6.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.