Update GeoIntel project files
@@ -0,0 +1,9 @@
|
||||
# DockDeck design system
|
||||
|
||||
De visuele basis is **DockDeck Canon v1**. Het onderhoudbare systeem, de bronselectie en de mapping naar echte productflows staan in:
|
||||
|
||||
- [`dockdeck-canon-v1/DESIGN_SYSTEM.md`](./dockdeck-canon-v1/DESIGN_SYSTEM.md)
|
||||
- [`dockdeck-canon-v1/SOURCE_MANIFEST.md`](./dockdeck-canon-v1/SOURCE_MANIFEST.md)
|
||||
- [`dockdeck-canon-v1/IMPLEMENTATION_MAPPING.md`](./dockdeck-canon-v1/IMPLEMENTATION_MAPPING.md)
|
||||
|
||||
Gebruik in productcode uitsluitend semantische tokens en lokale assets. Behoud dark en light themes, Nederlandse terminologie, echte API-data en de read-only productgrenzen.
|
||||
@@ -0,0 +1,68 @@
|
||||
# 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-motion` blijft 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.tsx` is 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.
|
||||
@@ -0,0 +1,30 @@
|
||||
# DockDeck Canon v1
|
||||
|
||||
DockDeck is een rustige, premium digitale thuisbasis. De interface is een launcher, geen beheer- of monitoringconsole.
|
||||
|
||||
## Fundament
|
||||
|
||||
- 8px spacingbasis; 16px mobiel zijmarge, 24px desktopgutter, 1280px launchermaximum.
|
||||
- Geist-achtige lokaal gebundelde sans-serif, sentence case en volledig Nederlandse copy met `je/jouw`.
|
||||
- Dark-first diepe navy `#0b1326`; tonale oppervlakken en subtiele 1px-randen.
|
||||
- Lavendel `#818cf8` voor merk, focus, selectie en primaire acties.
|
||||
- Groen `#10b981` uitsluitend voor positieve status/bevestiging; rood voor offline/fout, slate voor onbekend.
|
||||
- 8px radius voor controls, 12–16px voor grotere oppervlakken, pills alleen waar de vorm betekenis heeft.
|
||||
- Geen zware schaduwen of permanente pulserende statusanimaties.
|
||||
|
||||
## Semantische tokens
|
||||
|
||||
Productcode gebruikt tokens voor `background`, `surface`, `surface-elevated`, `border`, `text`, `text-muted`, `primary`, `focus`, `success`, `warning`, `error`, `unknown`, `hover`, `active` en `disabled`. Thema's wijzigen de tokenwaarden, niet de componentstructuur.
|
||||
|
||||
## Componentregels
|
||||
|
||||
- Apptegels tonen icoon, naam en `Online`, `Offline` of `Status onbekend`; geen poort, image, CPU, RAM of uptime.
|
||||
- Favoriettegels delen dezelfde visuele familie zonder runtimestatus.
|
||||
- Quick Launch groepeert Apps, Favorieten en Google en ondersteunt muis en toetsenbord.
|
||||
- Settings gebruikt één shell met Algemeen, Apps, Favorieten, Categorieën, Weergave, Integraties en Back-up en herstel.
|
||||
- Overlays hebben Escape, focusherstel en een zichtbaar sluitdoel; drawer op desktop, schermvullend op mobiel.
|
||||
- Status wordt nooit uitsluitend met kleur gecommuniceerd.
|
||||
|
||||
## Assets
|
||||
|
||||
Alle merkassets, fonts en productie-iconen zijn lokaal. Stitch-screenshots zijn alleen ontwerpdocumentatie; HTML/CDN/Google-hosted exportassets worden niet uitgevoerd of gebundeld.
|
||||
@@ -0,0 +1,37 @@
|
||||
# Implementatiemapping — DockDeck Canon v1
|
||||
|
||||
| Canonreferentie | DockDeck-oppervlak | Implementatiekeuze |
|
||||
| --------------------------------------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
|
||||
| Dashboard 1440/1920 donker | primaire startpagina | compacte topbar, begroeting, categorieën, desktopfavorietenrail, apptegels en uitklapbaar live inzicht; echte data |
|
||||
| Dashboard licht | light theme | dezelfde hiërarchie en componentvormen op lichte semantische tokens |
|
||||
| Dashboard categorie-modus | bestaande `viewMode=categories` | categoriechips sturen de bestaande filterlogica |
|
||||
| Quick Launch resultaten/geen lokaal resultaat | `SearchOverlay` | viewportbrede portal met Apps/Favorieten/Google, pijlen, Enter, Escape en herstelde toetsenbordfocus |
|
||||
| Instellingen Apps | `Settings` / apps | compacte rijen, echte ontdekstatus, filters, paginering en status/zichtbaarheid afzonderlijk |
|
||||
| App-editor drawer | app PATCH-contract | naam, zichtbaarheid/categorie, lokale/externe URL, icoon en sortering in toegankelijke drawer |
|
||||
| Instellingen Favorieten | favoriete CRUD | Canon-lijst en formulier met bestaande validatie |
|
||||
| Instellingen Categorieën | categorie CRUD | bestaande naam/icoon/sortering/verwijderen in rustige lijst |
|
||||
| Instellingen Weergave | preferences PATCH | thema, modus en dichtheid eerst; accent, breedte, achtergrond en details progressief ontsloten |
|
||||
| Instellingen Integraties | status/credential-API | uitsluitend bestaande read-only integraties; secrets gemaskeerd |
|
||||
| Back-up en herstel | `/api/export` en `/api/import` | bestaande versie 1-flow, geen fictieve historie |
|
||||
| Mobiel 390×844 | responsive dashboard/settings | mobiele topbar, touchcategorieën, compacte tegels en ondernavigatie |
|
||||
|
||||
## Bewuste afwijkingen
|
||||
|
||||
- Bestaande read-only widgets, presets en diagnostics blijven beschikbaar onder Algemeen omdat dit operationele productfunctionaliteit is; ze krijgen geen voorrang boven de launcher.
|
||||
- De statische voorbeelden gebruiken andere apps en aantallen; DockDeck toont uitsluitend API-data.
|
||||
- Canon-copy over Docker Proxy wordt niet letterlijk gebruikt omdat productie via AppOps kan ontdekken; integratietekst volgt de echte runtime.
|
||||
- Het logo wordt vereenvoudigd voor 16–48px en als lokaal SVG/PNG geleverd; de bronafbeelding wordt niet uitgesneden of gehotlinkt.
|
||||
|
||||
## Implementatiestatus
|
||||
|
||||
Alle bovenstaande kernoppervlakken zijn op 2026-07-21 geïmplementeerd. Het dashboard gebruikt de echte API-payload, Quick Launch groepeert server/apps/favorieten/Google, appbeheer gebruikt compacte regels plus een focus-trapped drawer en de bestaande geavanceerde widget- en diagnosticaflows staan onder **Algemeen**. De statische Canon-voorbeelden zijn dus niet als los prototype of hardcoded datalaag overgenomen.
|
||||
|
||||
Na de eerste review is een tweede, directere Stitch-pass uitgevoerd. `stitch-direct.css` is de finale compositielaag en neemt nu de daadwerkelijke Canon-hiërarchie over: 64px topbar, begroeting met compacte ontdekbanner, pilnavigatie, vaste favorietkaart, vierkoloms servicekaarten, tweekoloms featurekaarten, de volledige Quick Launch-sheet, App Beheer als vijfkolomstabel en de 570px app-editor. Op mobiel worden de ontdekkaart, zoekbalk, ronde categorieknoppen, favorietegels, compacte servicerijen en vaste ondernavigatie rechtstreeks uit `canon_mobiel_dashboard_390_844` gevolgd.
|
||||
|
||||
Het operationele widgetblok blijft in de normale launcher zichtbaar als compacte rij **Live inzicht** en klapt op verzoek open. De volledige Paneelstudio, presets en diagnostics blijven onder **Algemeen** beschikbaar, zodat de dagelijkse launcher rustig blijft zonder functionaliteit te verbergen.
|
||||
|
||||
De visuele eindcontrole staat in [`implementation/README.md`](./implementation/README.md). Daarbij is ook de eerste-use toestand met alle nieuw ontdekte apps verborgen gecontroleerd; de gevulde screenshots gebruiken uitsluitend de geïsoleerde mockdatabase onder `.codex-input/`.
|
||||
|
||||
## Consistentiepass 2026-07-22
|
||||
|
||||
Dashboard en instellingen delen nu dezelfde platformgeometrie tot 3040 px, met een schaalbare linkerrail en een rechter widgetdock dat vanaf 1900 px automatisch opent. De instellingenkopie en form controls zijn vergroot voor leesbaarheid, apptegels hebben sterkere iconografie en actieaffordances, Quick Launch gebruikt echte favorieticonen en de lege zoekstaat bevat directe snelkoppelingen in plaats van alleen uitlegtekst.
|
||||
@@ -0,0 +1,23 @@
|
||||
# Source manifest — DockDeck Canon v1
|
||||
|
||||
## ZIP
|
||||
|
||||
- Bron: `C:\Users\Jens\Downloads\stitch_dockdeck_premium_interface_system (2).zip`
|
||||
- SHA-256: `C5A76D95680550A74024F967F86553A008E5657C05833EE13C042C4F493BD441`
|
||||
- Tijdelijke extractie: `.codex-input/stitch-dockdeck-canon-v1/` (genegeerd door Git)
|
||||
- Primair: `dockdeck_canon_v1/DESIGN.md`, `dockdeck_canon_logo/screen.png` en alle `canon_*`-schermen.
|
||||
- Aanvullende controle: `design.md_dockdeck_canon_v1.md`.
|
||||
- Bewust genegeerd: `core_modernist/`, `obsidian_control/`, niet-`canon_*` schermen, `*_definitief` varianten en conflicterende oudere designsystemen.
|
||||
|
||||
## Stitch MCP
|
||||
|
||||
- Beschikbaar op 2026-07-21.
|
||||
- Project: `projects/11417268779858336248` — **DockDeck Premium Interface System**.
|
||||
- Project bijgewerkt: 2026-07-21T19:14:24.395101Z.
|
||||
- Gebruikt design system: `assets/d3776abdbc9040bcac889ef9b20c3eb8` — **DockDeck Canon v1**, versie 1.
|
||||
- Gecontroleerde metadata: Geist, dark-first, 8px afronding, `#818cf8` primair, `#10b981` positief, `#0b1326` basis en 1280px contentmaximum.
|
||||
- De actuele `CANON — ...` schermen zijn vergeleken; niet-canonieke oudere schermen en de systemen Obsidian Control/Core Modernist zijn niet als productbron gebruikt.
|
||||
|
||||
## Opgenomen referenties
|
||||
|
||||
De map `screens/` bevat alleen dashboard dark/light, Quick Launch-resultaten, instellingen Apps, mobiel dashboard en de logo-referentie. HTML-export en externe Google-assets zijn niet opgenomen of gebruikt als productieafhankelijkheid.
|
||||
@@ -0,0 +1,20 @@
|
||||
# Canon v1 implementatiebeelden
|
||||
|
||||
Deze beelden zijn op 2026-07-22 rechtstreeks uit de lokale applicatie vastgelegd met deterministische mockdiscovery. Ze bevatten geen credentials of productiegegevens. De actuele dashboards tonen de Stitch-launcherworkspace met desktopfavorietenrail, herkenbare appiconen en zichtbare read-only servicepanelen; de E2E-suite legt ze opnieuw vast.
|
||||
|
||||
| Oppervlak | Beeld |
|
||||
| ----------------------------------------- | ---------------------------------------------------------------------------------------- |
|
||||
| Dashboard licht, desktop 1440×900 | [`dashboard-light-desktop-1440x900.png`](./dashboard-light-desktop-1440x900.png) |
|
||||
| Dashboard donker, desktop 1440×900 | [`dashboard-dark-desktop-1440x900.png`](./dashboard-dark-desktop-1440x900.png) |
|
||||
| Quick Launch licht, desktop 1440×900 | [`quick-launch-light-desktop-1440x900.png`](./quick-launch-light-desktop-1440x900.png) |
|
||||
| Apps-instellingen licht, desktop 1440×900 | [`settings-apps-light-desktop-1440x900.png`](./settings-apps-light-desktop-1440x900.png) |
|
||||
| Dashboard licht, mobiel 390×844 | [`dashboard-light-mobile-390x844.png`](./dashboard-light-mobile-390x844.png) |
|
||||
| App-editor drawer, mobiel 390×844 | [`app-drawer-mobile-390x844.png`](./app-drawer-mobile-390x844.png) |
|
||||
| Dashboard donker, mobiel 390×844 | [`dashboard-dark-mobile-390x844.png`](./dashboard-dark-mobile-390x844.png) |
|
||||
| Dashboard donker, tablet 768×1024 | [`dashboard-dark-tablet-768x1024.png`](./dashboard-dark-tablet-768x1024.png) |
|
||||
| Dashboard donker, ultrawide 3440×1440 | [`dashboard-dark-ultrawide-3440x1440.png`](./dashboard-dark-ultrawide-3440x1440.png) |
|
||||
| Quick Launch donker, desktop 1440×900 | [`quick-launch-dark-desktop-1440x900.png`](./quick-launch-dark-desktop-1440x900.png) |
|
||||
| Apps-instellingen donker, desktop | [`settings-apps-dark-desktop-1440x900.png`](./settings-apps-dark-desktop-1440x900.png) |
|
||||
| App-editor donker, desktop | [`app-drawer-dark-desktop-1440x900.png`](./app-drawer-dark-desktop-1440x900.png) |
|
||||
|
||||
De geïsoleerde E2E-database wordt alleen voor visuele verificatie aangepast om drie apps en drie favorieten zichtbaar te maken. De productregel blijft ongewijzigd: nieuw ontdekte apps zijn standaard verborgen. De finale audit controleert bovendien alle instellingensecties, de horizontale tablet-/mobiele navigatie, echte appiconen, de uitklapbare widgetlaag en een Quick Launch die ook op ultrawide het volledige viewport afdekt.
|
||||
|
After Width: | Height: | Size: 148 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 610 KiB |
|
After Width: | Height: | Size: 156 KiB |
|
After Width: | Height: | Size: 378 KiB |
|
After Width: | Height: | Size: 831 KiB |
|
After Width: | Height: | Size: 642 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 231 KiB |
|
After Width: | Height: | Size: 366 KiB |
|
After Width: | Height: | Size: 177 KiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 294 KiB |