8.8 KiB
Stitch-integratierapport
Resultaat
VacatureRadar 0.3.0 gebruikt één normale productiefrontend: de functionele Django-vertaling van de negen Stitch Intelligence Cockpit-schermen. De voormalige MVP-shell, monolithische stylesheet en pagina-indelingen zijn vervangen. Backendregels, named routes, user scoping, CSRF, sanitization, bronbeleid en servervalidatie blijven leidend.
Startcommit: 029df89. Branch: codex/stitch-frontend-replacement.
Schermmapping en fidelity
| Stitch-scherm | Productie-implementatie | Fidelity | Bewuste afwijking |
|---|---|---|---|
| Dashboard overzicht | / · templates/dashboard/today.html |
Zeer hoog | Geen fictieve trends; dagconclusie en KPI's zijn echte aggregaties. |
| Nieuwe matches | /jobs/ · templates/jobs/list.html |
Zeer hoog | Server-side master/detail en paginering vervangen prototype-state. |
| Vacature intelligence detail | /jobs/<uuid>/ · templates/jobs/detail.html |
Hoog | Geen quick apply, kaart of salaris wanneer backenddata ontbreekt. |
| Sollicitatie pipeline | /jobs/applications/ · applicationtemplates |
Zeer hoog | Select+POST en lijstfallback in plaats van drag-only kanban. |
| Zoekprofiel editor | /profiles/<id>/ · profieltemplates |
Hoog | Preview gebruikt laatste echte score en ververst na server-save. |
| Bronnenbeheer & gezondheid | /sources/ · templates/sources/list.html |
Zeer hoog | Veiligheids-, import- en mailboxflows blijven zichtbaar en progressief. |
| Automatisering centrum | /system/ · templates/system/status.html |
Hoog | Worker/AI/browserstatus is eerlijk onbekend of niet geconfigureerd. |
| Activiteitenlogboek | /jobs/activity/ · templates/activity/list.html |
Zeer hoog | Multi-model read service; geen nieuw fictief auditmodel. |
| Werkgevers intelligence | /jobs/employers/ en detail · employertemplates |
Zeer hoog | Geen verzonnen sector, contactfinder of CRM-data. |
Ook login, 403/404/500, messages, empty states, dossieredit en skillsradar gebruiken dezelfde componenttaal.
Implementatie
Templates en assets
Vervangen of fundamenteel herschikt: base.html, dashboard, jobs list/detail/skills, applications list/edit, profiles list/edit, sources list, system status en registration login. Nieuw: activity, employer index/detail en generieke fouttemplates.
static/css/app.css is alleen de ingang voor tokens.css, base.css, layout.css, components.css, pages.css en responsive.css. static/js/app.js bevat alleen progressive enhancement. Iconografie is één lokale SVG-sprite. Er zijn geen externe fonts, iconfonts, Tailwind/CDN of clientframeworks.
Services, views en routes
apps/jobs/services/cockpit.py: dashboard- en vacature-intelligence.apps/jobs/services/activity.py: begrensde, user-safe multi-model tijdlijn.apps/jobs/services/employer_intelligence.py: werkgeveraggregaties en detailreadmodel.apps/core/services/automation.py: eerlijke operationele cockpit.apps/jobs/services/applications.py: auditbare statuswijziging via POST.- Nieuwe named routes:
jobs:activity,jobs:employers,jobs:employer-detail,jobs:application-status.
Er waren geen nieuwe modellen of migraties nodig. Bestaande bronhealth is geoptimaliseerd met een per-bron geslicete prefetch.
Echte data en security
Alle KPI's komen uit JobPosting, laatste ScoreRun, Application, Source, SourceRun, outbox- of profieldata. Persoonlijke feedback, dossiers, notificaties en profielrevisies zijn gebruikersgescopeerd. Vacature-HTML blijft de gesanitized backendwaarde. Externe links en POST-acties behouden bestaande securitycontracts. Er is geen automatische sollicitatie, platformloginbot, CAPTCHA-omzeiling of directe denylistcrawl toegevoegd.
Responsive en browservalidatie
Gecontroleerd met de echte app en representatieve lokale fixtures op 360×800, 390×844, 768×1024, 1024×768, 1280×800 en 1440×900; dashboard, explorer en werkgevers ook op 1920×1080 en 2560×1440. Alle negen schermen zijn op desktop en 390 px doorlopen.
Resultaat:
- geen documentbrede horizontale overflow;
- mobiele sidebar en tabbar functioneren;
- profile preview respecteert de gridkolom;
- brede automationpipeline en tabellen scrollen alleen intern;
- geen kapotte images;
- geen browserconsole-errors of warnings;
- dark/light actielabel en opgeslagen voorkeur zijn consistent.
Screenshots:
artifacts/visual-validation/dashboard-desktop.pngartifacts/visual-validation/matches-desktop.pngartifacts/visual-validation/job-detail-desktop.pngartifacts/visual-validation/applications-desktop.pngartifacts/visual-validation/profile-desktop.pngartifacts/visual-validation/sources-desktop.pngartifacts/visual-validation/automation-desktop.pngartifacts/visual-validation/activity-desktop.pngartifacts/visual-validation/employers-desktop.pngartifacts/visual-validation/dashboard-mobile.pngartifacts/visual-validation/job-detail-mobile.png
De afbeeldingen en Stitch-referenties zijn via .dockerignore uit de productieimage gehouden.
Accessibility
De shell heeft skiplink en expliciete landmarks; iedere hoofdroute heeft één h1. Status gebruikt tekst, formulieren behouden echte labels/servererrors, mutaties werken zonder JavaScript en motion respecteert reduced motion. De drawer is met toetsenbord-/ARIA-state getest. Wide data heeft focusbare lokale scrollcontainers. De HTML/a11y-probe slaagt; de optionele externe pytest-Playwrightvariant is alleen beschikbaar wanneer Playwright lokaal geïnstalleerd is.
Performance
Representatieve volledige paginaquerymetingen: dashboard 16, explorer 17, detail 15, pipeline 5, profiel 6, bronnen 14, activiteit 10 en werkgevers 14. Automation daalde door het verwijderen van de bronhealth-N+1 van 63 naar 23 queries. collect_source_health() is regressiegedekt op exact twee queries voor meerdere bronnen. Grote tijdlijnen en detailsets zijn begrensd; lijsten gebruiken annotaties, select_related en prefetching.
Legacy-audit
Er is geen oude shell, alternatieve feature flag of parallelle frontendroute. Oude componentselectors, kleuren en monolithische pagina-opbouw zijn verwijderd. Alleen HTML-e-mailtemplates behouden bewust hun zelfstandige inline mailstijl; zij zijn geen browserfrontend. Bestaande historische validatiebeelden blijven documentair bewijs, maar worden niet gerenderd of in de productiecontainer opgenomen.
Verificatie en beperkingen
De volledige scripts/codex_verify.sh-gate is zowel vóór als na ledgerafronding groen: Ruff, Django system check, makemigrations --check --dry-run, 248 geslaagde tests, 2 optioneel overgeslagen Playwrightvarianten, 84,40% branch-aware coverage, backlogvalidatie en repository-/documentvalidatie.
Bekende externe beperkingen wijzigen de frontend niet: live mailbox-/SMTP-credentials en productie-infrastructuur blijven afzonderlijke blocked-external taken. Niet-bestaande backenddata wordt bewust als onbekend getoond.
Premium verfijning (VR-216)
De high-fidelity cockpit is na een senior UX-audit verfijnd volgens het principe “calm intelligence”. De onderliggende Stitch-informatiearchitectuur en alle server-rendered flows blijven intact; de visuele laag vermindert gelijkwaardige kaders en reserveert cyan voor primaire acties, actieve navigatie en betekenisvolle signalen. Navigatie, labels en hulptekst gebruiken humane typografie, terwijl cijfers en technische statusinformatie hun compacte technische karakter behouden.
Dashboard-KPI's staan mobiel in een compact 2×2-raster zodat de eerste matches binnen de eerste viewport beginnen. De vacaturefilters gedragen zich als één responsieve commandobar, pipelinekolommen hebben een stabiele interne scroll en scroll-snap, en het zoekprofiel gebruikt een brede samengestelde kaart in plaats van een klein eiland in lege ruimte. Het lichte thema heeft meer tonale diepte en minder grijze vlakheid.
De geïntegreerde browsercontrole dekte dashboard, verkenner, pipeline en profiel op 1280×800, dashboard en verkenner op 390×844, en het dashboard in donker en licht thema. De gemeten documentbreedte bleef binnen de viewport; op 390 px gebruikte het dashboard twee KPI-kolommen en begon de matchsectie op 550 px. De loginconsole is schoon nadat de voorheen inline logininteractie naar static/js/login.js is verplaatst conform de bestaande CSP.
Interactieve illustratielaag
Het zoekprofiel gebruikt een herbruikbare lokale SVG-radar als projectillustratie. Scan, signalen en orbitale details bewegen langzaam; pointerbeweging geeft maximaal tien pixels parallax. De visual is aria-hidden, bevat geen metric of statusclaim en laat alle profielinformatie en acties zelfstandig intact. Zonder JavaScript blijft de compositie bruikbaar en prefers-reduced-motion: reduce verwijdert animatie en parallax volledig. Op 390 px staat de illustratie onder de primaire profielactie, zodat zij de kernflow niet uit de eerste leesvolgorde verdringt.