6.4 KiB
Stitch Canon UI-upgradeplan
Datum: 2026-07-21
Branch: codex/stitch-canon-ui-upgrade
Nulmeting
DockDeck is een React/Vite-single-page-app met Fastify REST, SQLite en gedeelde Zod-contracten. App.tsx beheert dashboard/settings, polling, themadata-attributen en toasts. Dashboard.tsx groepeert echte apps en favorieten. Settings.tsx bevat de bestaande beheerflows; widgetconfiguratie blijft in afzonderlijke componenten. Er is geen router: schermwisseling is lokale React-state.
De bestaande functionaliteit is operationeel, maar de interface wijkt zichtbaar van Canon v1 af: Engelse copy, een permanente brede dashboardrail, een prominente monitoringlaag vóór de launcherinhoud en volledig uitgeklapte appformulieren. De baseline is opgeslagen onder .codex-input/baseline/.
Baselinechecks:
- format, lint en typecheck: geslaagd;
- unit/integratie: 42/42 geslaagd;
- security: 5/5 geslaagd;
- build en audit: geslaagd, 0 kwetsbaarheden;
- E2E-start: omgevingsblokkade doordat een WSL-relay poort 3000 bezet; de upgrade maakt de testpoort configureerbaar.
Routes en workflows
| Oppervlak | Werkelijke workflow | Canonvertaling |
|---|---|---|
| Dashboard | apps/favorieten openen, categorieën, sync, widgets | compacte topbar, Quick Launch eerst, favorieten en apps als launcher; widgets lager en optioneel |
| Quick Launch | apps/favorieten/Tower/Google, toetsenbord | gegroepeerde command-palette met Apps, Favorieten en Google |
| Apps | zoeken, zichtbaarheid, widget, naam, categorie, URL's, icoon, sortering, verwijderen | compacte beheerregels met filters en een app-editor drawer |
| Favorieten | toevoegen, wijzigen, verwijderen | Canon-lijst plus rustig formulier/drawerpatroon |
| Categorieën | toevoegen, wijzigen, icoon, sortering, verwijderen | Canon-lijst met duidelijke aantallen en inline-acties |
| Weergave | thema, accent, dichtheid, breedte, achtergrond, hero/status, modus | visuele keuzevelden en previews binnen dezelfde settings-shell |
| Widgets/operaties | bestaande read-only panelen, presets en diagnostics | behouden onder Algemeen als secundaire geavanceerde functies |
| Integraties | status en gemaskeerde credentials | doelgerichte read-only statuskaarten zonder secret-echo |
| Back-up | export/import versie 1 | Canon back-up- en hersteloppervlak, zonder fictieve historie |
Componentstrategie
Hergebruikt: API-client, contracten, URL-resolutie, iconpipeline, widgetconfigurators, server- en servicewidgets, persistence en alle backendvalidatie.
Herbouwd of toegevoegd: semantische tokenlaag, lokale merkassets, DashboardTopBar, dashboardcompositie, categorie-navigatie, app-/favoriettegels, Quick Launch-groepering, settings-shell, compacte appbeheerregels, app-editor drawer, banners, empty/loading/degraded states en mobiele navigatie.
Tokens en responsiviteit
Canon v1 gebruikt een 8px-basis, diepe navy, tonale oppervlakken, lavendel voor actie/focus en groen uitsluitend voor positieve status. Dark, light en het bestaande aanvullende thema blijven functioneel via semantische CSS-variabelen. Bestaande accenten blijven beschikbaar maar worden op de Canon-tokenlaag geprojecteerd.
- 1920×1080 en 1440×900: max. 1280px launcherinhoud, compacte topbar, vier appkolommen waar passend.
- 768–1024px: twee kolommen, compacte settingsnavigatie.
- 390×844: echte mobiele compositie, horizontaal scrollbare categorieën, één/twee kolommen naar inhoud, vaste ondernavigatie.
- Geen horizontale overflow; minimum klikdoel 44px;
prefers-reduced-motionblijft leidend.
Risico's en mitigatie
- De huidige widgetdiepgang is groter dan de statische Canon-scope. De functies blijven bestaan maar verdwijnen uit de primaire launcherhiërarchie.
Settings.tsxis groot. De wijziging beperkt backend/API-impact en splitst nieuwe UI-primitives en drawerlogica waar dat reviewbaarheid verbetert.- E2E gebruikt een vaste poort. De configuratie krijgt een geïsoleerde testpoort zonder productieruntime te wijzigen.
- Externe appiconen kunnen falen. De bestaande veilige monogramfallback blijft behouden.
Validatie
Twee visuele rondes vergelijken dark/light dashboard, Quick Launch, settings/apps, editor en mobiel met de referenties. Daarna volgen alle verplichte scripts, browserconsole/netwerkcontrole, overflowchecks op 390×844, 768×1024, 1440×900 en 1920×1080, Compose-config en een Docker-imagebuild wanneer de lokale Docker-runtime beschikbaar is.
Niet-doelen
Geen Docker-mutaties, containerbeheer, accounts, terminal/logviewer, nieuwe backendintegraties, fictieve data, automatische back-uphistorie of externe tijdelijke assets.
Resultaat
Afgerond op 2026-07-21. De Canon-tokenlaag, lokale Geist-fonts, merkassets, topbar, launcherhiërarchie, Quick Launch, compacte settings-shell, app-editor drawer en responsive mobiele compositie zijn in de bestaande React/Fastify-app geïntegreerd. De E2E-runtime gebruikt geïsoleerde poorten 3101/5174 zodat een lokale WSL-relay op 3000 de suite niet meer blokkeert. De finale gates en eventuele resterende omgevingsbeperkingen staan in TEST_LOG.md, RISKS.md en HANDOFF.md.
Een aanvullende fidelity-pass heeft de eerder nog eigen DockDeck-interpretatie vervangen door de daadwerkelijke canon_*-compositie. Stitch bepaalt nu vrijwel volledig layout, density, kaartfamilies, navigatie, overlay, settings-tabel, drawer en mobiele hiërarchie; alleen echte data, bestaande validatie en operationele workflows wijken bewust af van de statische voorbeelden.