feat: establish Stitch cockpit frontend contract

2026-07-22 19:48:36 +02:00
parent a30ecbc553
commit 09af98193f
17 changed files with 764 additions and 941 deletions
@@ -0,0 +1,50 @@
+# Stitch frontendcontract
+
+## Bindende productregel
+
+De normale VacatureRadar-productiefrontend is de functionele vertaling van de negen schermen uit `docs/design/stitch-reference/`. `screen.png` bepaalt compositie en visuele uitkomst, `code.html` verduidelijkt structuur en interacties en `intelligence_cockpit/DESIGN.md` bepaalt de visuele tokens. De voormalige MVP-frontend heeft geen behoudsprioriteit.
+
+Backend-, beveiligings- en toegankelijkheidsregels blijven altijd leidend. Een Stitch-element wordt alleen aangepast wanneer echte data ontbreekt, een actie onveilig of niet ondersteund is, Nederlandse content meer ruimte vraagt of WCAG 2.2 AA dat vereist. Zo'n afwijking wordt in `STITCH_INTEGRATION_REPORT.md` gemotiveerd.
+
+## Verplichte visuele taal
+
+- Donkere navy cockpit met `#060e20`, `#0b1326`, `#131b2e`, `#171f33`, `#222a3d` en `#2d3449` als tonale lagen.
+- Signal Cyan `#00f5ff` voor primaire acties en focus, Emerald `#4edea3` voor aantoonbaar gezonde/positieve status, indigo voor automation en koraal/amber voor fout of aandacht.
+- Compacte technische zijbalk, contextuele topbar, brede datacanvas en adaptieve intelligence-rails.
+- Geist-achtige systeemheadline, Inter-achtige systeembody en JetBrains Mono-achtige systeemmono; geen externe fontrequest.
+- 8px basisritme, 16/24/32px stackafstand, fijne borders, kleine radii en terughoudende glows. Tonale hiërarchie vervangt zware shadows.
+- Lokale inline SVG-iconen. Geen Material Symbols-, Tailwind-, font- of andere runtime-CDN.
+
+## Functioneel contract
+
+- Alle cijfers zijn database-aggregaties of tonen expliciet `Nog niet gemeten`, `Onbekend` of `Niet geconfigureerd`.
+- Alle mutaties zijn POST + CSRF, gebruikersgescopeerd en gebruiken bestaande services waar bedrijfsbeslissingen nodig zijn.
+- Vacature-HTML is alleen de gesanitized backendwaarde; externe links gebruiken `noopener noreferrer nofollow` en openen uitsluitend na een expliciete gebruikersactie.
+- Geen automatische sollicitatie, platformloginbot, CAPTCHA-omzeiling, drag-and-drop zonder persistente fallback of control zonder werkend effect.
+- Named URLs, querystrings, browser-back, paginering en kernflows werken zonder JavaScript. JavaScript verbetert alleen navigatie, disclosures, tabs, dialogen, viewtoggles en micro-interacties.
+
+## Schermcontract
+
+De volgende pagina's zijn verplicht en gebruiken echte data:
+
+1. Dashboard: dagconclusie, matches, filters/deduplicatie, sollicitatieopvolging, activiteit en bronstatus.
+2. Vacatureverkenner: master/detail op breed scherm, server-side filters, scorebewijs en snelle veilige acties.
+3. Vacaturedetail: jobhero, score-intelligence, inhoud, provenance, versies, duplicaten en sticky acties.
+4. Sollicitatiepipeline: toegankelijke kanban en lijstfallback met persistente statuswijziging.
+5. Zoekprofiel: gegroepeerde radarconfigurator met echte server-rendered preview en revisie-informatie.
+6. Bronnen: brongezondheid, policies, runtelemetrie, retry/review en beveiligde imports/mailboxen.
+7. Automatisering: echte pipeline-, queue-, database-, notificatie- en bronstatus zonder gesimuleerde liveclaims.
+8. Activiteit: gepagineerde, filterbare tijdlijn uit bestaande auditwaardige modellen.
+9. Werkgevers: index/detail uit genormaliseerde werkgever-, vacature-, score-, bron- en sollicitatiedata.
+
+Ook login, foutpagina's, lege toestanden en generieke formulieren gebruiken dezelfde visuele taal.
+
+## Responsive en toegankelijkheid
+
+- Desktop volgt de Stitch-silhouette op 1440×900 en 1280×800; 1920/2560px gebruikt extra kolommen of ruimte en geen smalle gecentreerde strook.
+- Op 1024/768px worden rails logisch gestapeld. Op 390/360/320px wordt de zijbalk een focusveilige drawer, tabellen krijgen kaart- of horizontale scrollpresentatie en sticky acties blijven bruikbaar.
+- Eén `h1`, geldige landmarks, skiplink, zichtbare `:focus-visible`, tekst naast statuskleur, expliciete labels/fouten, 44px touchdoelen waar haalbaar, reduced motion en bruikbaarheid bij 200% zoom.
+
+## Afrondingscontract
+
+Een frontendfase is pas klaar na relevante tests en een diffreview. De volledige vervanging vereist elf browserbeelden onder `artifacts/visual-validation/`, een schone console op de kernroutes, een legacyzoekaudit, `scripts/codex_verify.sh`, bijgewerkte backlog/traceability/projectstatus en `STITCH_INTEGRATION_REPORT.md`. Er bestaat daarna geen feature flag of alternatieve normale route naar de oude frontend.