VacatureRadar/docs/design/STITCH_FRONTEND_CONTRACT.md

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.