feat(ui): align workbench with Stitch screens
This commit is contained in:
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user