This commit is contained in:
Jens
@@ -1994,6 +1994,89 @@ tasks:
|
||||
exact afgeleid voor 512px favicon/app-icon en 256px Dockermanicoon. Browsermatrix 390/1280/1920 schoon, 267
|
||||
tests groen en live image sha256:daf34407813b37cdf2d0fc65a482ded65375f89eedd3f0144a8c0ce206d41565 healthy
|
||||
met readiness/PNG-smokes.
|
||||
- id: VR-221
|
||||
title: Scheid appmerk van ontwikkelaarsbranding
|
||||
status: done
|
||||
priority: P1
|
||||
requirement_ids:
|
||||
- NFR-004
|
||||
- NFR-008
|
||||
- NFR-009
|
||||
depends_on:
|
||||
- VR-220
|
||||
summary: Herstel VacatureRadar als zelfstandig productmerk met een nieuw professioneel radarlogo en favicon, en
|
||||
plaats de aangeleverde ITWorx.tech-identiteit uitsluitend als subtiele ontwikkelaarscredit.
|
||||
acceptance_criteria:
|
||||
- VacatureRadar gebruikt een zelfstandig, vectorvriendelijk beeldmerk dat radar, detectie en een gevonden kans
|
||||
combineert, scherp blijft op 16 px en visueel niet met het ITWorx-cloud-check-logo concurreert.
|
||||
- Sidebar, login, favicon en Dockerman tonen het VacatureRadar-productmerk; ITWorx.tech staat alleen op geschikte
|
||||
secundaire plaatsen als `Ontwikkeld door ITWorx.tech`.
|
||||
- De ontwikkelaarscredit gebruikt de officiële aangeleverde ITWorx-wordmark lokaal en blijft ondergeschikt, toegankelijk
|
||||
en leesbaar in donker/licht thema en op mobiel.
|
||||
- Browsercontrole op login, dashboard en verkenner bij 390, 1280 en 1920 px toont correcte merkhiërarchie, geladen
|
||||
assets, geen overflow of consolefouten; live container en alle assets zijn healthy.
|
||||
verification:
|
||||
- Inspecteer VacatureRadar-SVG op viewBox, elementeenvoud en klein-formaat-signatuur
|
||||
- uv run pytest tests/integration/test_auth_login.py tests/integration/test_views.py tests/unit/test_deployment_configuration.py
|
||||
- Browsermatrix 390/1280/1920 voor login, dashboard en verkenner
|
||||
- Live logo-, favicon-, ontwikkelaarswordmark-, readiness- en containerhealth-smoke
|
||||
- ./scripts/codex_verify.sh
|
||||
primary_paths:
|
||||
- static/favicon.svg
|
||||
- static/img/vacatureradar-logo.svg
|
||||
- static/img/vacatureradar-docker.png
|
||||
- static/img/itworx-wordmark.png
|
||||
- templates/base.html
|
||||
- templates/registration
|
||||
- static/css/premium.css
|
||||
- static/css/auth.css
|
||||
result:
|
||||
completed_at: '2026-07-26'
|
||||
note: VacatureRadar heeft een zelfstandig professioneel open-radar-logo, SVG-favicon en 256px Dockermanicoon;
|
||||
officiële ITWorx.tech-wordmark staat alleen als Ontwikkeld door-credit. Twee beeldconcepten verkend, finale
|
||||
geometrie handmatig als vijf-elementen-SVG gebouwd. Browsermatrix 390/1280/1920 schoon, 267 tests groen en
|
||||
live image sha256:4184aeff33759b7a205637b0a0333b751b599141fe691a61965d2f1c56ca984a healthy met alle asset-smokes.
|
||||
- id: VR-222
|
||||
title: Voer een integrale premium visuele audit en herstelroadmap uit
|
||||
status: done
|
||||
priority: P1
|
||||
requirement_ids:
|
||||
- NFR-004
|
||||
- NFR-008
|
||||
- NFR-009
|
||||
depends_on:
|
||||
- VR-221
|
||||
summary: Audit de volledige cockpit als één designsysteem en herstel merkhiërarchie, uitlijning, informatiedichtheid,
|
||||
interactiedoelen, responsief gedrag en motion tot een consistente premium productervaring.
|
||||
acceptance_criteria:
|
||||
- Een gedateerd auditrapport bevat geprioriteerde bevindingen, concreet gevolg, herstelactie en volledige roadmap
|
||||
voor alle hoofdschermen, login en herstel.
|
||||
- Topbar en hoofdcontent delen voorspelbare horizontale ankers; dashboard en activiteit zijn aantoonbaar compacter
|
||||
zonder echte informatie te verbergen of controles onbruikbaar te maken.
|
||||
- VacatureRadar blijft het enige primaire appmerk; ITWorx.tech staat uitsluitend als subtiele ontwikkelaarscredit
|
||||
en geen concept- of chroma-keybeeld wordt als productasset geleverd.
|
||||
- Controls, focus, reduced motion, dark/light en 390/768/1280/1440/1920/3840 px zijn gecontroleerd zonder overflow,
|
||||
consolefouten of regressie in de server-rendered kernflow.
|
||||
- De live container is healthy en levert het finale logo, favicon en de relevante CSS met HTTP 200.
|
||||
verification:
|
||||
- Browsermatrix voor alle hoofdschermen plus login in dark/light en 390/768/1280/1440/1920/3840 px
|
||||
- uv run pytest tests/integration/test_auth_login.py tests/integration/test_views.py
|
||||
- ./scripts/codex_verify.sh
|
||||
- Live readiness-, containerhealth- en assetsmokes
|
||||
primary_paths:
|
||||
- docs/design/VISUAL_AUDIT_2026-07-26.md
|
||||
- templates/base.html
|
||||
- templates/dashboard/today.html
|
||||
- templates/activity/list.html
|
||||
- static/css/premium.css
|
||||
- static/css/pages.css
|
||||
- static/css/responsive.css
|
||||
result:
|
||||
completed_at: '2026-07-26'
|
||||
note: 'Integrale audit en roadmap uitgevoerd: gedeeld contentframe, vijf dashboardmatches, compacte activiteit,
|
||||
subtiele ITWorx-credit, grotere klikdoelen, volledige reduced-motion, CSS-cacheversies en herstelde mobiele
|
||||
loginiconen/uitlijning. Browsermatrix 50 route/breedtechecks plus light/login schoon; 268 tests groen, 2 skips,
|
||||
83,45% dekking.'
|
||||
- id: VR-301
|
||||
title: Multi-tenant SaaS, teams en billing
|
||||
status: deferred
|
||||
|
||||
@@ -34,6 +34,24 @@ Het volledige scherm- en afwijkingsrapport staat in `docs/design/STITCH_INTEGRAT
|
||||
|
||||
## Laatste onderhoudsaudit
|
||||
|
||||
VR-222 op 2026-07-26:
|
||||
|
||||
- integrale visuele audit van tien hoofdroutes plus login/herstel vastgelegd in `docs/design/VISUAL_AUDIT_2026-07-26.md`, met geprioriteerde bevindingen, gevolgen en uitgevoerde roadmap;
|
||||
- topbar en hoofdcontent delen één begrensd contentframe; het dagoverzicht toont maximaal vijf kernmatches en daalde op 1440 px van 2.399 naar 1.838 px;
|
||||
- activiteitstijdlijn, ontwikkelaarscredit, secundaire klikdoelen en reduced-motion zijn verfijnd; CSS-imports gebruiken een gedeelde cacheversie zodat een release werkelijk alle stijllagen ververst;
|
||||
- mobiele loginbotsing, foutieve oog-/demo-iconen en dubbele herstel-link zijn opgelost; VacatureRadar blijft productmerk en ITWorx.tech uitsluitend ontwikkelaarscredit;
|
||||
- browsercontrole: 50 combinaties over tien routes en 390/768/1280/1920/3840 px, plus light-theme en login, zonder overflow of consolewaarschuwingen;
|
||||
- volledige gate groen met 268 geslaagde tests, 2 optionele skips en 83,45% branch-aware dekking. Volgende uitvoerbare taak: geen.
|
||||
|
||||
VR-221 op 2026-07-26:
|
||||
|
||||
- merkarchitectuur gecorrigeerd: ITWorx.tech is de ontwikkelaar, VacatureRadar het zelfstandige productmerk;
|
||||
- twee logo-concepten zijn met de ingebouwde beeldgeneratieflow verkend; de eenvoudigste radar-/kansrichting is handmatig vertaald naar een exact vijf-elementen-SVG met open cyan radarboog, scanstraal en emerald kanssignaal;
|
||||
- sidebar, bovenbalk, login, favicon en Dockerman gebruiken het VacatureRadar-logo; de officiële ITWorx.tech-wordmark staat alleen als `Ontwikkeld door`-credit in secundaire zones;
|
||||
- appmetadata heet opnieuw uitsluitend `VacatureRadar`; het ongebruikte ITWorx-appicoon is verwijderd en bron-/assetdocumentatie is bijgewerkt;
|
||||
- browsermatrix op 390, 1280 en 1920 px toont correcte hiërarchie, geen overflow en een schone console; 29 gerichte regressies en de volledige gate zijn groen met 267 geslaagde tests, 2 optionele skips en 83,45% branch-aware dekking;
|
||||
- live image `sha256:4184aeff33759b7a205637b0a0333b751b599141fe691a61965d2f1c56ca984a` via `unraid-itworx` uitgerold; container healthy, readiness HTTP 200 en favicon, productlogo, Dockermanicoon plus ITWorx-ontwikkelaarscredit live gevalideerd. Volgende uitvoerbare taak: geen.
|
||||
|
||||
VR-220 op 2026-07-26:
|
||||
|
||||
- “eigen branding” is gecorrigeerd naar de door de eigenaar aangeleverde officiële ITWorx.tech-identiteit in plaats van een tijdelijke tekstuele Jens-signatuur;
|
||||
|
||||
@@ -122,3 +122,9 @@ De verkenner begrenst zijn resultatenkolom op ultrawide tot 880 px en geeft de r
|
||||
De projecteigenaar verduidelijkte dat “eigen branding” verwijst naar de officiële ITWorx.tech-identiteit. De tijdelijke tekstuele Jens-lock-up is daarom vervangen door de transparante, opgeschoonde wordmark uit het aangeleverde `ITWorx_Logo_Asset_Pack_2026-07-25.zip`. In de sidebar staat ITWorx.tech als hoofdmerk met `VacatureRadar · intelligence cockpit` als productdescriptor; de bovenbalk combineert ITWorx.tech met de bestaande routecontext. Login en wachtwoordherstel tonen eerst de officiële wordmark en vervolgens VacatureRadar als product.
|
||||
|
||||
Het favicon/app-icon en Dockermanicoon zijn deterministische crops van het cloud-check-symbool uit dezelfde goedgekeurde wordmark, op respectievelijk 512×512 en 256×256. Er is geen nieuw beeldmerk gegenereerd of nagetekend. Alle assets zijn lokaal, transparant en gedocumenteerd in `static/img/README.md`. De browsermatrix op 390, 1280 en 1920 px bevestigt correcte wordmarkverhoudingen, geladen PNG-assets, geen documentoverflow en een schone console.
|
||||
|
||||
## Gecorrigeerde merkarchitectuur (VR-221)
|
||||
|
||||
Een volgende verduidelijking maakte duidelijk dat ITWorx.tech de ontwikkelaar is en niet het productmerk. VacatureRadar gebruikt daarom opnieuw een zelfstandig beeldmerk, nu herontworpen als een open cyan radarboog, heldere scanstraal en één emerald kanssignaal op een compact navy appvlak. Twee beeldgeneratieconcepten verkenden de vormtaal; de geselecteerde eenvoudige richting is vervolgens bewust handmatig als vijf-elementen-SVG opgebouwd voor exacte geometrie, schaalbaarheid en herkenning op faviconformaat.
|
||||
|
||||
Sidebar, bovenbalk, login, favicon en Dockerman tonen VacatureRadar als primair merk. De officiële aangeleverde ITWorx.tech-wordmark staat alleen nog in een rustige `Ontwikkeld door`-credit tussen radarstatus en account, en onder authenticatiekaarten. De credit gebruikt een lokaal asset en concurreert niet met de producttitel. Browsercontrole op 390, 1280 en 1920 px bevestigt correcte hiërarchie, geladen logo's, geen overflow en een schone console.
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
# Visuele audit en herstelroadmap
|
||||
|
||||
Datum: 26 juli 2026
|
||||
Scope: alle tien primaire cockpitroutes, login en wachtwoordherstel; dark/light; 390, 768, 1280, 1440, 1920 en 3840 px.
|
||||
|
||||
## Ontwerpoordeel
|
||||
|
||||
VacatureRadar heeft een onderscheidende, geloofwaardige dark-intelligencebasis. De cyan/emerald-signalen, technische typografie en datagedreven panelen passen bij het product. De vorige iteraties hebben echter lokale oplossingen op elkaar gestapeld. Daardoor zijn merkhiërarchie, informatiedichtheid en horizontale ankers niet overal één systeem. De premiumkans zit vooral in rust, reductie en voorspelbaarheid, niet in meer decoratie.
|
||||
|
||||
## Bevindingen
|
||||
|
||||
| Prioriteit | Bevinding | Gevolg | Herstel |
|
||||
| --- | --- | --- | --- |
|
||||
| P0 | De roze conceptafbeelding was een beeldgeneratie-werkachtergrond en had nooit als logoresultaat gepresenteerd mogen worden. | Merkverwarring en vertrouwensverlies. | Alleen het lokaal gecontroleerde VacatureRadar-radarlogo wordt als productasset gebruikt; geen gegenereerde conceptplaat wordt geleverd of gedeployed. |
|
||||
| P1 | De bovenbalk en hoofdcontent hadden verschillende maximale breedtes op ultrawide. | Acties leken los te staan van de pagina en oogbewegingen werden te lang. | Eén gedeeld contentframe voor topbar en hoofdsecties, met een begrensde ultrawidevariant. |
|
||||
| P1 | Het dashboard toonde tot acht vrijwel gelijkwaardige vacaturekaarten en werd 2.399 px hoog op 1440×900. | Een dagoverzicht voelde als een tweede resultatenlijst. | Beperk het overzicht tot vijf besliskaarten; de verkenner blijft de volledige rangschikking. |
|
||||
| P1 | De activiteitstijdlijn gebruikte 256 px per gebeurtenis en werd 5.901 px hoog. | Lage informatiedichtheid, veel scrollen en zwakke scanbaarheid. | Compactere marker, kaart, detailzone en verticale tussenruimte zonder informatieverlies. |
|
||||
| P1 | De ITWorx-credit stond in een wit, omkaderd vlak met relatief groot woordmerk. | De ontwikkelaarscredit concurreerde visueel met het productmerk en oogde als advertentie. | Maak de credit randloos, kleiner, minder verzadigd en secundair; VacatureRadar blijft primair. |
|
||||
| P1 | Meerdere tekstlinks hadden een klikhoogte rond 26 px. | Zwakkere muis- en touchbruikbaarheid, ondanks semantisch correcte links. | Secundaire actielinks krijgen minimaal 38 px interactiehoogte; primaire controls blijven 44 px. |
|
||||
| P2 | Op 1440 px gebruikt de filterconsole twee functionele rijen, maar de visuele groepering is zwak. | Zoeken, verfijnen en toepassen lezen als losse velden. | Behoud responsieve wrapping, maar versterk consolekaart, vaste gaps en consistente controlhoogtes. |
|
||||
| P2 | Dashboardkaarten hadden veel interne verticale ruimte en sterke schaduwen. | De feed werd zwaarder dan de intelligence-rail. | Compactere kaartpadding en gaps; schaduw uitsluitend als elevatiesignaal. |
|
||||
| P2 | De profielpagina benut slechts circa 1.040 px van 1.121 px beschikbare content. | Een enkel profiel voelt onbedoeld klein. | Bewuste brede compositie behouden, met illustratie als ondersteunend element en duidelijke primaire actie. |
|
||||
| P2 | Systeemstatus en acht pipelinefasen zijn op laptopbreedte informatief maar erg dicht. | Kleine labels vertragen scanbaarheid. | Pipeline behoudt interne horizontale overflow op klein scherm; statusmetadata groepeert in consistente kolommen. |
|
||||
| P2 | De UI bevat veel uppercase labels van 8–10 px. | Technische sfeer, maar zwakkere leesbaarheid op compacte of geschaalde displays. | Uppercase alleen voor korte metadata; body- en actietekst blijven minimaal 12–15 px. |
|
||||
| P2 | Bewegingsreductie dekte de radarillustratie, niet alle transities en entreeanimaties. | Onvolledige reduced-motionervaring. | Globale gereduceerde motion voor animatie, transitie en smooth scrolling. |
|
||||
| P3 | De accountnaam verschijnt zowel in de sidebar als in het menu; de topbar herhaalt productnaam en paginacontext. | Lichte redundantie, vooral op smaller desktop. | Sidebar blijft identiteit en navigatie; topbar blijft context, zoeken en systeemacties met compactere lock-up. |
|
||||
| P3 | Lange beheerpagina’s zijn inhoudelijk correct maar hebben weinig lokale navigatie. | Gebruikers verliezen sneller hun positie in bronnen en activiteit. | Compacte rijen, sticky context waar aanwezig en paginering blijven leidend; geen verborgen inhoud. |
|
||||
|
||||
## Uitgevoerde roadmap
|
||||
|
||||
1. **Merkdiscipline** — productlogo en favicon strikt scheiden van ITWorx-ontwikkelaarsbranding; credit visueel terugplaatsen.
|
||||
2. **Layoutfundament** — één maximaal contentframe voor topbar en pagina, met voorspelbare ankers van laptop tot ultrawide.
|
||||
3. **Informatiereductie** — dashboard terugbrengen tot vijf kernmatches en activiteit compacter maken.
|
||||
4. **Interactie en toegankelijkheid** — secundaire klikdoelen vergroten en reduced-motion volledig maken.
|
||||
5. **Responsieve verfijning** — alle kernroutes controleren op mobiel, laptop, desktop en ultrawide, in licht en donker.
|
||||
6. **Regressie en release** — templatecontracten, volledige gate, live containerhealth en assetsmokes uitvoeren.
|
||||
|
||||
## Acceptatiebewijs
|
||||
|
||||
- Browsermatrix: 50 combinaties over tien ingelogde routes op 390, 768, 1280, 1920 en 3840 px; geen documentoverflow of consolewaarschuwingen.
|
||||
- Licht thema: dashboard en mobiele verkenner gecontroleerd; correcte thematokens, geen overflow en intacte filters.
|
||||
- Authenticatie: login op 390 en 1440 px; één herstel-link, gescheiden labels, zelfstandig gerenderde lijniconen en correcte merkhiërarchie.
|
||||
- Meetbare reductie: dashboard 2.399 → 1.838 px op 1440 px; kernmatches 7/8 → 5; activiteitgebeurtenis 268 → 242 px na cacheverversing.
|
||||
- Repositorygate: Ruff, Django check, migratiecheck, 268 tests geslaagd, 2 optionele browsertests overgeslagen en 83,45% branch-aware dekking.
|
||||
@@ -39,7 +39,7 @@ Legenda: **I** = geïmplementeerd en getest in de huidige MVP; **P** = gedeeltel
|
||||
| PR-044 | I | profiel/modelversievelden | scoring/profiletests | VR-109 promptversie |
|
||||
| PR-045 | I | optionele Ollamaservice/fallback | `test_ai.py` | VR-109 |
|
||||
| PR-046 | I | geen tools + guardrails | AI/securitytests | VR-109/115 evaluaties |
|
||||
| PR-050 | I | dashboard/list/skillsradar + Stitch-dominante cockpitshell/feed/rail en ultrawide compositie | viewtests, skill-insighttests, VR-119/206/208 browsermatrix | VR-114/118/119/206/208 e2e/a11y |
|
||||
| PR-050 | I | dashboard/list/skillsradar + Stitch-dominante cockpitshell/feed/rail, gedeeld contentframe en auditgedreven informatiedichtheid | viewtests, skill-insighttests, VR-119/206/208/222 browsermatrix | VR-114/118/119/206/208/222 e2e/a11y |
|
||||
| PR-051 | I | detailview/template/provenance + scorehero/intelligence-strip | viewtests, VR-119 screenshots | VR-114/118/119 |
|
||||
| PR-052 | I | feedbackendpoint/UI | feedback/viewtests | — |
|
||||
| PR-053 | I | applicationmodel/serviceflow | `tests/integration/test_dedupe_lifecycle_feedback.py`, `tests/integration/test_applications.py` | VR-113 uitgebreid dossier |
|
||||
@@ -63,7 +63,7 @@ Legenda: **I** = geïmplementeerd en getest in de huidige MVP; **P** = gedeeltel
|
||||
| NFR-005 | I | domeinapps/services/adapters/ADRs | continue review |
|
||||
| NFR-006 | I | offline pytest + coveragegate | VR-114 verbreedt e2e |
|
||||
| NFR-007 | P | `scripts/benchmark.py`, `tests/benchmark/test_benchmark.py` | VR-116 |
|
||||
| NFR-008 | I | volledige negen-schermen-Stitch-cockpit, acht viewports, dark/light, toetsenborddrawer, premium visuele hiërarchie, officiële lokale ITWorx.tech-merklaag en toegankelijke interactieve radarillustratie | `tests/e2e/test_vr114_browser_and_accessibility.py`, `tests/integration/test_intelligence_views.py`, `tests/integration/test_views.py`, `artifacts/visual-validation/`, VR-209–213, VR-216–220 |
|
||||
| NFR-008 | I | volledige negen-schermen-Stitch-cockpit, acht viewports, dark/light, toetsenborddrawer, premium visuele hiërarchie, zelfstandig VacatureRadar-productmerk, lokale ITWorx-ontwikkelaarscredit en toegankelijke interactieve radarillustratie | `tests/e2e/test_vr114_browser_and_accessibility.py`, `tests/integration/test_intelligence_views.py`, `tests/integration/test_views.py`, `artifacts/visual-validation/`, VR-209–213, VR-216–221 |
|
||||
| NFR-009 | I | lokale SQLite, configureerbare eigenaarbranding, Docker/Unraidconfig, gevalideerde SSH-deployalias, release-smoke en restore | `tests/unit/test_deployment_configuration.py`, VR-117, VR-217/218 afgerond |
|
||||
| NFR-010 | I | `apps/sources/services/health.py`, `apps/sources/tasks.py`, `apps/core/views.py`, `config/settings.py` | `tests/integration/test_source_health.py` | VR-112 observability |
|
||||
|
||||
@@ -109,3 +109,4 @@ Iedere backlogtaak die een requirement wijzigt, werkt in dezelfde commit deze ma
|
||||
- VR-218 verenigt favicon, login en shell onder één radarbeeldmerk, maakt de persoonlijke eigenaarssignatuur configureerbaar en voegt contextuele oriëntatie aan de bovenbalk toe zonder mobiele overflow.
|
||||
- VR-219 verankert alle hoofdsecties op één ultrawide grid, begrenst paneelverhoudingen voor leesbaarheid en maakt `Personal intelligence by Jens` tot de consistente productlock-up op publieke en ingelogde schermen.
|
||||
- VR-220 vervangt die tijdelijke tekstlock-up door de aangeleverde officiële ITWorx.tech-wordmark en een exact daaruit afgeleid cloud-check-appicoon voor browser, shell en Dockerman; VacatureRadar blijft de productnaam.
|
||||
- VR-221 corrigeert de merkarchitectuur: VacatureRadar krijgt een zelfstandig radar-/kansbeeldmerk voor alle productcontactpunten en ITWorx.tech blijft uitsluitend zichtbaar als officiële secundaire ontwikkelaarscredit.
|
||||
|
||||
Reference in New Issue
Block a user