feat(ui): align workbench with Stitch screens
GeoIntel release gates / Compile, test, contracts and builds (push) Canceled after 0s
GeoIntel release gates / Python and npm vulnerability policy (push) Canceled after 0s
GeoIntel release gates / GIS image, SBOM and container scan (push) Canceled after 0s

This commit is contained in:
Codex
2026-07-19 16:38:17 +02:00
parent 87345f1a8c
commit 1b9848a5f4
10 changed files with 883 additions and 195 deletions
+48
View File
@@ -10861,3 +10861,51 @@ Behavior preservation:
calculation, model runtime or persistence flow changed.
- Existing map selection, source loading, local Ollama, QA, analysis and
download actions remain wired through their original hooks and services.
## 2026-07-19 - Stitch screen parity and responsive refinement
Implemented:
- Extended the Stitch project with dedicated Quality, Image Analysis,
Downloads and Status/Administration screens, all using design-system asset
`4667932515738184526`.
- Replaced the residual dark navigation treatment with the white 88-pixel
Stitch rail, pale context bar and locally bundled Public Sans/Manrope
typography.
- Made Sources a deterministic three-pane workspace after removing a legacy
full-width catalogue override.
- Added the Stitch control/result/inspector structure to the empty Quality
state and kept the existing populated evidence/history implementation.
- Compacted detection model administration into one row above the existing
configuration/result/QA workbench.
- Reorganized Downloads as artifact actions, current/history results and a
preview inspector without changing export callbacks or formats.
- Kept the MapLibre map full-height with icon controls and stable rails on
normal and ultrawide displays.
Visual verification:
- compared Map, Sources, AI Questions, Quality, Image Analysis, Downloads,
Status and Administration against their dedicated Stitch references;
- reviewed live-backend states at 1280x720, 1920x1080 and 390x844;
- confirmed that the widescreen map absorbs the additional width and that the
mobile workspaces remain vertically navigable without document overflow.
Validation:
- the complete readiness gate passed 1,052 backend tests, 22 frontend tests,
frontend typecheck/build and Alembic head `202607160001`;
- the final UX browser audit passed at 390x844, 1366x768 and 2560x1080 with
zero horizontal overflow, console errors or failed requests;
- all seven Belgium/North Sea release journeys passed through the redesigned
local frontend against the live backend;
- the journey retry caught and verified a fixed Sources grid containment issue
that previously allowed the Area panel to intercept a scrolled Project
management control.
Behavior preservation:
- no backend, API contract, migration, persistence, GIS metric, provider,
Ollama or model-runtime behavior changed;
- all existing actions continue through the original React hooks and service
layer.
+24 -6
View File
@@ -15,9 +15,15 @@ The redesign was developed in Stitch under:
- Map Explorer screen: `c24113d1f1474c91b332b2365be24993`
- Sources screen: `239796f2d66a44e7983e5fc588305ff8`
- AI Questions screen: `246aa57bbe974861885325ff9d10c6bd`
- Quality screen: `06b4b69387d847a0bba33c6953563860`
- Image Analysis screen: `200a196f4e524c979167e40905ae87f2`
- Downloads screen: `f6d91a48e98141bb94f680f626078a1e`
- Status and Administration screen: `3d685f83c61d4e9687bdfdf608220b26`
The React implementation remains the source of truth for behavior. Stitch is
the design reference for hierarchy, spacing and component treatment.
the design reference for hierarchy, spacing and component treatment. Each
primary workspace has a dedicated Stitch screen; new layout work must compare
against the corresponding screen rather than only borrowing the color palette.
## Product hierarchy
@@ -37,6 +43,12 @@ command bars or competing shortcut rows must not be reintroduced.
- Desktop uses an 88-pixel navigation rail and a 56-pixel context bar.
- The normal map layout is `theme drawer / map / insight inspector`.
- Sources uses `workspace and area / source inventory / loaded datasets`.
- AI Questions uses `area context / conversation and composer`.
- Quality uses `controls / result history / evidence inspector`.
- Image Analysis uses `configuration / persisted results / QA`.
- Downloads uses `artifact actions / export history / preview inspector`.
- Administration uses `source category / provider status and provenance`.
- Theme and insight rails stay stable on ultrawide displays; the map receives
the additional width.
- Non-map workspaces use one task header and one primary work surface.
@@ -50,17 +62,21 @@ command bars or competing shortcut rows must not be reintroduced.
| Role | Value |
| --- | --- |
| Canvas | `#f3f6f5` |
| Canvas | `#f5f7f6` |
| Surface | `#ffffff` |
| Ink | `#152522` |
| Muted text | `#687773` |
| Border | `#dce4e1` |
| Pale context | `#eef8f5` |
| Ink | `#162622` |
| Muted text | `#64726f` |
| Border | `#e1e7e5` |
| Primary teal | `#0b6b62` |
| Context blue | `#315d73` |
| Attention amber | `#a55c23` |
| Attention amber | `#b46432` |
| Error red | `#a33c39` |
| Radius | `4px` |
Body and labels use locally bundled Public Sans. Headings use locally bundled
Manrope. The interface must not depend on a remote font request.
The UI does not use gradients, decorative blobs, oversized hero sections,
nested cards or pill-heavy status presentation.
@@ -84,6 +100,8 @@ nested cards or pill-heavy status presentation.
`frontend/src/styles/atlas-workbench.css`
- Map workflow:
`frontend/src/components/map/MapWorkspace.tsx`
- Empty and populated quality review:
`frontend/src/components/quality/QualityResultsPanel.tsx`
- API, persistence and GIS behavior remain outside the design system.
Any future visual change must retain the browser acceptance widths of