=feat-stitch-intelligence-cockpit

2026-07-21 22:52:28 +02:00
parent 4505e47d36
commit 479f61fc6a
42 changed files with 754 additions and 857 deletions
@@ -941,6 +941,42 @@ tasks:
    completed_at: '2026-07-21'
    note: Release script, smoke-run, backup/restore and artifact bundle for VR-117 toegevoegd; release artefacten
      en Unraid-runbook geactualiseerd; traceability en projectstate bijgewerkt.
+- id: VR-118
+  title: Stitch Intelligence Cockpit production-grade integreren
+  status: done
+  priority: P1
+  requirement_ids:
+  - NFR-006
+  - NFR-008
+  - AC-002
+  - AC-003
+  - AC-051
+  depends_on:
+  - VR-107
+  - VR-114
+  summary: Vertaal de negen aangeleverde Stitch-schermen naar de bestaande server-rendered Django-interface zonder
+    domeinlogica, securitygrenzen of gebruikersscope te vervangen en zonder fictieve productdata te introduceren.
+  acceptance_criteria:
+  - Een consistente responsive cockpit-shell en dark/light tokens bedienen alle kernroutes.
+  - Dashboard, vacatures, detail, pipeline, profiel, bronnen, systeem en login gebruiken echte backenddata en acties.
+  - Externe auto-apply, nepmetrics, onbewezen werkgeverinzichten en onbetrouwbare activiteitenfeeds zijn niet overgenomen.
+  - Zes doelviewports hebben één h1, geen horizontale overflow en werkende mobiele navigatie.
+  - Stitch-bronnen, integratieplan, screenshots en verificatierapport zijn traceerbaar maar niet onderdeel van de productiecontainer.
+  verification:
+  - uv run pytest tests/e2e tests/integration/test_views.py tests/integration/test_tasks_and_more_views.py
+  - ./scripts/codex_verify.sh
+  - Browsercontrole op 1440x900, 1280x800, 1024x768, 768x1024, 390x844 en 360x800
+  primary_paths:
+  - templates/
+  - static/css/app.css
+  - static/js/app.js
+  - docs/design/STITCH_INTEGRATION_PLAN.md
+  - docs/design/stitch-reference/
+  - docs/design/validation/
+  result:
+    completed_at: '2026-07-21'
+    note: Stitch-visuele taal geïntegreerd in CSP-veilige Django-templates; dark/light, responsive shell, pipeline,
+      broninteracties en browservalidatie toegevoegd zonder functionele scope-uitbreiding of fictieve data.
 - id: VR-201
  title: Concrete live-bronnen inventariseren en juridisch/operationeel reviewen
  status: blocked-external
@@ -1,7 +1,7 @@
 # Projectstatus

 - Laatst bijgewerkt: 2026-07-21
- Repositoryversie: 0.1.0 MVP-basis
+- Repositoryversie: 0.2.1 Stitch Intelligence Cockpit
 - Uitvoeringsmodus: autonome backlog
 - Eerste uitvoerbare taak: controleer met `python scripts/backlog.py next`

@@ -14,7 +14,7 @@ De repository bevat een uitvoerbare Django-MVP met:
 - JSON-LD-, HTML-, RSS/Atom- en e-mailadapters;
 - normalisatie, sanitization, werkgeverresolutie, dedupe, aliassen, provenance en versies;
 - deterministische features, harde exclusions, scores en optionele uitgeschakelde Ollama-boundary;
- dashboard, vacaturelijst/detail, profiel-, bron- en sollicitatiepagina's;
+- responsive dark/light cockpitdashboard, vacaturelijst/detail, sollicitatiepipeline, profiel-, bron- en systeemschermen;
 - feedbackacties, applicationdossiers, lifecycle en dagelijkse digest-outbox;
 - Celeryworker/scheduler, healthchecks, Docker/Unraidconfiguratie en back-up-/herstelscripts;
 - offline unit-, integratie- en securitytests.
@@ -43,6 +43,13 @@ Release-audit op 2026-07-21:

 ## Laatste uitgevoerde backlogtaak

+- 2026-07-21: `VR-118` voltooid.
+  - Alle kernroutes delen nu één responsive Intelligence Cockpit-shell met lokale SVG-iconen en CSP-veilige assets.
+  - Stitch-dark en een volwaardige light variant zijn gekoppeld aan echte Django-data; externe quick apply, nepmetrics en onbewezen intelligence zijn bewust geweerd.
+  - Browserflow valideerde vacature → sollicitatiedossier → pipeline, bron-disclosures, themawissel en viewports 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×800 zonder horizontale overflow.
+  - Stitch-bronnen, integratieplan en screenshots staan onder `docs/design/` en zijn uit de productiecontainer gesloten.
+  - Volgende taak: `VR-201` (`blocked-external`).
+
 - 2026-07-21: `VR-117` voltooid.
 - Productiereleasecontrole toegevoegd met `scripts/release_verify.sh`, inclusief smoke, backup/restore-smoke en artifactbundel.
 - Changelog, traceability en Unraid-runbook samengekoppeld aan het releasepad.
@@ -156,7 +163,7 @@ Deze blokkeren onafhankelijke code niet:

 ## Bekende verificatiebeperking van de aangeleverde basis

-De Pythonapplicatie, Dockerimage en PostgreSQL/Redis/Unraid-stack zijn geverifieerd. De Playwright-browservarianten zijn lokaal niet uitgevoerd; hun HTML/a11y-fallback is wel geslaagd. Een publieke HTTPS-smoke blijft afhankelijk van domein-, DNS- en reverse-proxyconfiguratie.
+De Pythonapplicatie, Dockerimage en PostgreSQL/Redis/Unraid-stack zijn geverifieerd. De optionele pytest-Playwrightvarianten vallen lokaal terug op de HTML/a11y-probe; VR-118 is aanvullend handmatig met de geïntegreerde browser op zes viewports uitgevoerd. Een publieke HTTPS-smoke blijft afhankelijk van domein-, DNS- en reverse-proxyconfiguratie.

 ## Hervatten

@@ -62,3 +62,12 @@ Per zichtbare taak:
 4. screenreader smoke test voor dashboard, vacaturedetail en profiel;
 5. contrastcontrole;
 6. test met lange/lege/unknown content.
+
+## VR-118 browservalidatie
+
+- Dashboard gecontroleerd op 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×800.
+- Op alle zes viewports: exact één `h1`, geen documentbrede horizontale overflow en de juiste desktop/mobile navigatiestatus.
+- Mobiel menu opent met `aria-expanded=true`, sluit met Escape/sluitactie en is buiten de focus-/accessibilityflow wanneer gesloten.
+- Themawisselaar blijft bruikbaar wanneer browseropslag niet beschikbaar is; de UI geeft dan geen consolefout.
+- Dashboard, vacaturelijst/detail, sollicitatiepipeline, profielen/editor, bronnen en systeem zijn met echte seeded data en zonder externe assets gevalideerd.
+- Screenshots staan onder `docs/design/validation/` en zijn via `.dockerignore` uitgesloten van de productiecontainer.
@@ -1,37 +1,44 @@
 # Design system

+> Geactualiseerd voor VR-118. De volledige Stitch-mapping en bewuste afwijkingen staan in
+> `docs/design/STITCH_INTEGRATION_PLAN.md`.
+
 ## 1. Merkgevoel

-Rustig, betrouwbaar, helder en licht technisch. De interface moet focus geven, niet gamificeren. Geen confetti, eindeloze badges of agressieve notificatiekleuren.
+Rustig, betrouwbaar, helder en technisch precies. De interface voelt als een professionele intelligence-cockpit:
+donker marineblauw als standaard, signaalcyaan voor primaire interactie en tonale lagen in plaats van zware schaduwen.
+De lichte variant behoudt dezelfde hiërarchie. Geen confetti, fictieve grafieken, eindeloze badges of agressieve notificatiekleuren.

 ## 2. Visuele tokens

 De implementatie staat in `static/css/app.css`. Gebruik semantische custom properties in plaats van losse kleuren in componenten.

-Aanbevolen tokenrollen:
+Geïmplementeerde tokenrollen omvatten onder meer:

 ```css
--surface-page
--surface-card
--surface-raised
--text-primary
--text-secondary
--text-muted
--border-subtle
--accent
--accent-strong
--success
+--bg
+--bg-deep
+--surface
+--surface-low
+--surface-high
+--surface-bright
+--text
+--text-soft
+--muted
+--border
+--border-strong
+--primary
+--primary-strong
+--positive
 --warning
 --danger
--focus-ring
--shadow-card
+--signal-glow
 --radius-sm
--radius-md
--radius-lg
--space-1 ... --space-8
+--radius
 ```

-Donkere modus volgt `prefers-color-scheme` en behoudt semantische contrastrollen.
+Donkere modus is de productstandaard. De gebruiker kan lokaal wisselen via `data-theme`; opslag is progressief en
+mag in een afgeschermde browsercontext uitvallen zonder de bediening te breken.

 ## 3. Typografie

@@ -45,10 +52,11 @@ Donkere modus volgt `prefers-color-scheme` en behoudt semantische contrastrollen
 ## 4. Spacing en layout

 - 4/8px-gebaseerde schaal;
- contentcontainer ongeveer 1180–1280px;
+- contentcontainer maximaal 1600px zodat de cockpit op brede schermen bruikbaar blijft;
 - kaarten met consistente padding 20–24px desktop, 16px mobiel;
 - minimaal 44×44px touch targets voor primaire interactie;
- grids breken onder 900px en 640px logisch af;
+- vaste zijbalk van 272px boven 900px, toegankelijke uitschuifnavigatie daaronder;
+- grids breken onder 1180px, 900px en 680px logisch af;
 - vaste/sticky elementen mogen content niet bedekken.

 ## 5. Componenten
@@ -72,6 +72,7 @@ Django/Celery
 | T-24 | Source terms wijzigen | ongewenste voortgezette crawling | reviewdatum, source health en policy expiry gepland | `VR-102`, `VR-112` |
 | T-31 | Sollicitatiedossier-export bevat niet-gewenste payload | data-lek of onbedoeld dossieroverdragen | export bevat alleen het gekozen dossier, ZIP-inhoud is beperkt tot snapshot/tijdlijn/print-HTML, bestandsnaam is geslugified zonder padseparators | `tests/integration/test_applications.py` |
 | T-32 | XML external entity/entity-expansion via sitemap | lokale data-uitlezing of parseruitputting | sitemap-XML wordt met `defusedxml` verwerkt; fetcherlimieten blijven vóór parsing gelden | `tests/unit/test_discovery_rss.py`, Ruff securitycheck |
+| T-33 | Externe UI-CDN of niet-vertrouwde Stitch-interactie | supply-chain-XSS, tracking of acties buiten Django-beleid | productie gebruikt alleen lokale CSS/JS en inline SVG-symbolen; Stitch-code is documentatiereferentie, alle mutaties blijven Django POST+CSRF; themavoorkeur bevat geen persoonsgegevens en opslagfouten worden afgevangen | `tests/e2e/test_vr114_browser_and_accessibility.py`, browserconsole- en assetcontrole VR-118 |

 ## Misbruikscenario's

@@ -39,8 +39,8 @@ Legenda: **I** = geïmplementeerd en getest in de huidige MVP; **P** = gedeeltel
 | PR-044 | I | profiel/modelversievelden | scoring/profiletests | VR-109 promptversie |
 | PR-045 | I | optionele Ollamaservice/fallback | `test_ai.py` | VR-109 |
 | PR-046 | I | geen tools + guardrails | AI/securitytests | VR-109/115 evaluaties |
-| PR-050 | I | dashboard view/template | viewtests | VR-114 e2e/a11y |
-| PR-051 | I | detailview/template/provenance | viewtests | VR-114 |
+| PR-050 | I | dashboard view/template + Stitch-cockpitshell | viewtests, VR-118 browsermatrix | VR-114/118 e2e/a11y |
+| PR-051 | I | detailview/template/provenance + intelligence-layout | viewtests, VR-118 screenshots | VR-114/118 |
 | PR-052 | I | feedbackendpoint/UI | feedback/viewtests | — |
 | PR-053 | I | applicationmodel/serviceflow | `tests/integration/test_dedupe_lifecycle_feedback.py`, `tests/integration/test_applications.py` | VR-113 uitgebreid dossier |
 | PR-054 | I | `notifications/models.py`, outbox/services/tasks | `tests/integration/test_email_import_notifications.py`, `tests/integration/test_reminders.py` | VR-111 |
@@ -63,7 +63,7 @@ Legenda: **I** = geïmplementeerd en getest in de huidige MVP; **P** = gedeeltel
 | NFR-005 | I | domeinapps/services/adapters/ADRs | continue review |
 | NFR-006 | I | offline pytest + coveragegate | VR-114 verbreedt e2e |
 | NFR-007 | P | `scripts/benchmark.py`, `tests/benchmark/test_benchmark.py` | VR-116 |
-| NFR-008 | I | semantische templates/designspec | `tests/e2e/test_vr114_browser_and_accessibility.py` |
+| NFR-008 | I | semantische templates/designspec, zes viewports, dark/light en toetsenbordmenu | `tests/e2e/test_vr114_browser_and_accessibility.py`, `docs/design/validation/`, VR-118 |
 | NFR-009 | I | lokale SQLite en Docker/Unraidconfig, release-smoke en restore | VR-117 afgerond |
 | NFR-010 | I | `apps/sources/services/health.py`, `apps/sources/tasks.py`, `apps/core/views.py`, `config/settings.py` | `tests/integration/test_source_health.py` | VR-112 observability |

@@ -87,5 +87,6 @@ Iedere backlogtaak die een requirement wijzigt, werkt in dezelfde commit deze ma
 - VR-102 is gerealiseerd met auditbare policyreviews (`SourcePolicyReview`), robotscache met TTL/size/SSRF-controles en fail-closed policy-gating op verlopen of conflicterende reviews.
 - VR-107 is gerealiseerd met `apps/sources/views.py`, `apps/sources/services/manual_import.py`, `templates/sources/list.html`, `static/js/manual_import.js` en bijhorende unit/integration-tests.
 - VR-115 is afgerond met productie-hardening voor `config/settings.py`, DNS-rebindmitigatie in `apps/sources/services/fetcher.py`, rate limiting op login en handmatige import, CI-secret- en kwetsbaarheidsscans, non-root/read-only containerhardening en bijbehorende security/unit/integration-tests.
+- VR-118 vertaalt de aangeleverde Stitch Intelligence Cockpit naar de bestaande server-rendered routes. Bewijs staat in `docs/design/STITCH_INTEGRATION_PLAN.md`, `docs/design/validation/`, de view/a11ytests en de gedeelde lokale shell/assets.