=docs-stitch-integration-baseline

docs/design/STITCH_INTEGRATION_PLAN.md

@@ -0,0 +1,55 @@
+# Stitch-integratieplan
+
+## Doel en bronhiërarchie
+
+Deze integratie vertaalt het Stitch-project **VacatureRadar Intelligence Cockpit** naar de bestaande Django-applicatie. De functionele repository blijft leidend voor routes, data, beveiliging, gebruikersscope en acties. Stitch levert de visuele taal en compositie, niet de domeinwaarheid.
+
+De volledige ontvangen referentie staat in `docs/design/stitch-reference/`. Deze map en de validatiescreenshots zijn uitgesloten van de productiecontainer via `.dockerignore`; er worden geen externe Tailwind-, font-, icoon-, afbeelding- of JavaScript-CDN's aan de applicatie toegevoegd.
+
+## Visuele richting
+
+- Donkere cockpit als standaard: diep marineblauw, tonale panelen, fijne slate-randen, signaalcyaan voor primaire interactie, emerald voor aantoonbaar gezonde status en koraal/amber voor fouten of aandacht.
+- Een volwaardige lichte variant met dezelfde semantische tokens en contrastverhoudingen.
+- Systeemfonts als lokale, snelle fallback voor Geist/Inter; monospace systeemfonts voor metadata. Geen netwerkfonts.
+- Een vaste desktopzijbalk en compacte utilitybar, op mobiel een toegankelijke uitschuifnavigatie met overlay en focusbehoud.
+- Dichte informatieweergave met een consistente 8px-ritmiek, zonder decoratieve data die niet uit het domeinmodel komt.
+
+## Schermmapping
+
+| Stitch-scherm | Django-route/template | Integratie | Bewuste aanpassing |
+| --- | --- | --- | --- |
+| Dashboard Overzicht | `/`, `dashboard/today.html` | KPI-strip, sterke-matchkaarten, bronstatus en snelle route-acties | Geen verzonnen trendgrafiek, notificaties of scannerstatus; alleen actuele databasecijfers. |
+| Nieuwe Matches | `/jobs/`, `jobs/list.html` | Filterwerkbalk en responsive vacature-intelligentielijst | Geen client-side master/detail-SPA; detail blijft een eigen, deelbare route. |
+| Vacature Intelligentie Detail | `/jobs/<uuid>/`, `jobs/detail.html` | Scorehero, componentanalyse, bronhistorie en sticky acties | Geen quick/direct apply, logo of kaart zonder betrouwbare brondata. Externe vacature opent alleen expliciet in een nieuw tabblad. |
+| Sollicitatie Pipeline | `/jobs/applications/`, `applications/list.html` | Statuskolommen op breed scherm, lineaire kaarten op smal scherm | Alleen bestaande dossierstatussen en gebruikersgescopeerde data. Geen drag-and-drop zonder backendcontract. |
+| Zoekprofiel Editor | `/profiles/` en `/profiles/<id>/` | Profielsummary, gegroepeerde editor, hulp- en risicotekst | Geen live scorepreview die servervalidatie kan tegenspreken. JSON-velden blijven functioneel maar krijgen duidelijke uitleg. |
+| Bronnenbeheer & Gezondheid | `/sources/`, `sources/list.html` | KPI's, importpaneel, bronkaarten, uitklapbare runinformatie en bulkacties | Bestaande policy-, SSRF-, rate-limit- en CSRF-flows blijven intact. Geen algemene “gezond”-claim zonder readinessdata. |
+| Automatisering Centrum | `/system/`, `system/status.html` | Readiness, echte bron-/vacaturestatus en veilige beheeropdrachten | Geen gefingeerde worker uptime, latency, cronprogressie of logregels. |
+| Activiteitenlogboek | geen zelfstandige route | Recente, betrouwbare gebruikersactiviteit wordt op dashboard/dossiers getoond waar het model die al bezit | Geen samengestelde auditfeed: de huidige modellen hebben geen uniform, volledig gebruikersgescopeerd eventcontract. Dit wordt niet geforceerd. |
+| Werkgevers Intelligentie | geen zelfstandige route | Werkgever blijft context op vacature- en sollicitatiekaarten | Geen “intelligence”-pagina zolang contact-, reputatie- en aggregatievelden niet betrouwbaar bestaan; dit voorkomt fictieve inzichten. |
+
+## Componenten en templatestructuur
+
+- `base.html`: skiplink, merkblok, utilitybar, desktop/mobile navigatie, gebruikerspaneel, meldingen en themawisselaar.
+- `templates/components/`: herbruikbare SVG-iconen, paginakop, lege toestand, statuschip en vacaturekaart waar template-includes de duplicatie daadwerkelijk verlagen.
+- `static/css/app.css`: uitsluitend semantische tokens en componentklassen; dark/light via `data-theme`, met systeemvoorkeur als fallback.
+- `static/js/app.js`: alleen navigatie, details-disclosures en themaopslag. Alle kernacties blijven normale links of formulieren.
+
+## Functionele en veiligheidsgrenzen
+
+- Alle mutaties blijven POST + CSRF en gebruiken de bestaande services/views.
+- Sanitized vacature-HTML blijft het enige HTML-fragment dat met `safe` wordt gerenderd.
+- Externe URL's behouden `noopener noreferrer nofollow` en worden nooit automatisch geopend.
+- Bronimport, retry en bulkreview veranderen inhoudelijk niet.
+- Er worden geen secrets, persoonsgegevens, nepstatistieken, externe assets of nieuwe productieafhankelijkheden toegevoegd.
+
+## Responsive en toegankelijkheid
+
+- Validatiebreedtes: 1440×900, 1280×800, 1024×768, 768×1024, 390×844 en 360×800.
+- Eén `h1` per pagina, semantische landmarks, zichtbare focus, toetsenbordbediening, 44px touchdoelen waar praktisch, tekstlabels naast statuskleur en een robuuste skiplink.
+- Tabellen schakelen op smalle schermen naar kaartachtige rijen of blijven gecontroleerd horizontaal scrolbaar wanneer kolomvergelijking essentieel is.
+- Animatie is subtiel en volledig uitgeschakeld bij `prefers-reduced-motion`.
+
+## Verificatie
+
+Na elke implementatiefase worden formattering, Ruff en relevante tests uitgevoerd. De afronding vereist `scripts/codex_verify.sh`, responsieve browserflows, console-/netwerkcontrole en screenshots per hoofdroute in beide thema's waar dat het ontwerp valideert.