diff --git a/CHANGELOG.md b/CHANGELOG.md index f21fc532..e2f0faba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,14 @@ # Changelog +## Sprint 83 Workspace panel hierarchy polish (2026-06-20) + +- Made the Overview readiness strip a calmer section surface with tighter status tiles. +- Added explicit Overview action-copy and recommended-action regions for easier scanning and future UI regression coverage. +- Restyled recommended next actions as a lighter callout instead of another equally weighted white card. +- Added static regression coverage for Overview hierarchy regions, compact status tiles and secondary action-callout styling. +- No API contracts, migrations, backend behavior, provider fetching or AI model behavior changed. + ## Sprint 82 Shell density polish (2026-06-20) - Added a keyboard skip link to jump directly from the workbench shell to active workspace content. diff --git a/backend/tests/test_sprint83_workspace_panel_hierarchy.py b/backend/tests/test_sprint83_workspace_panel_hierarchy.py new file mode 100644 index 00000000..023d20de --- /dev/null +++ b/backend/tests/test_sprint83_workspace_panel_hierarchy.py @@ -0,0 +1,38 @@ +from __future__ import annotations + +from pathlib import Path + + +ROOT = Path(__file__).resolve().parents[2] + + +def test_overview_uses_named_hierarchy_regions() -> None: + app = (ROOT / "frontend" / "src" / "App.tsx").read_text(encoding="utf-8") + + assert 'className="overview-action-copy"' in app + assert 'className="quick-action-grid overview-quick-actions"' in app + assert 'className="quick-action-button"' in app + assert 'aria-label="Recommended next workbench actions"' in app + + +def test_status_strip_has_compact_section_surface_contracts() -> None: + css = (ROOT / "frontend" / "src" / "styles" / "app.css").read_text(encoding="utf-8") + + assert ".workbench-status-strip" in css + assert "background: linear-gradient(180deg, #ffffff, #f7fbf8);" in css + assert ".status-strip-grid" in css + assert "grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));" in css + assert ".status-tile-topline" in css + assert ".status-tile strong" in css + assert "min-height: 5.85rem;" in css + + +def test_overview_action_callout_is_visually_secondary() -> None: + css = (ROOT / "frontend" / "src" / "styles" / "app.css").read_text(encoding="utf-8") + + assert ".overview-action-copy" in css + assert ".overview-quick-actions" in css + assert ".quick-action-button" in css + assert "background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(255, 255, 255, 0.82));" in css + assert "border-left: 4px solid var(--accent);" in css + assert "align-content: center;" in css diff --git a/docs/CODEX_EXECUTION_LOG.md b/docs/CODEX_EXECUTION_LOG.md index 41f669a5..eb757662 100644 --- a/docs/CODEX_EXECUTION_LOG.md +++ b/docs/CODEX_EXECUTION_LOG.md @@ -3015,3 +3015,29 @@ Limitations: Next recommended pass: - Continue with a live visual review of dense workspace panel hierarchy after the shell density changes are deployed. + +## Sprint 83 Workspace panel hierarchy polish (2026-06-20) + +Changed: +- Made the Overview readiness strip visually calmer with a compact section surface and tighter status tiles. +- Added explicit `overview-action-copy`, `overview-quick-actions` and `quick-action-button` regions to the recommended-action block. +- Restyled the recommended flow block as a lighter accent callout so it no longer competes visually with the readiness strip. +- Added `backend/tests/test_sprint83_workspace_panel_hierarchy.py`. +- Updated `frontend/README.md`, `docs/TODO.md` and `CHANGELOG.md`. + +Tested: +- Live browser pre-check against `http://192.168.10.150:1202` showed no console errors or horizontal overflow, but the first workspace viewport still had several equally weighted white cards. +- Red step: `python -m pytest backend/tests/test_sprint83_workspace_panel_hierarchy.py -q` failed on missing Overview hierarchy regions and compact section-surface CSS contracts. +- `python -m pytest backend/tests/test_sprint83_workspace_panel_hierarchy.py -q` (`3 passed`) +- `python -m pytest backend/tests/test_sprint83_workspace_panel_hierarchy.py backend/tests/test_sprint82_shell_density_polish.py backend/tests/test_sprint62_frontend_visual_polish.py backend/tests/test_sprint50_workspace_usability_polish.py backend/tests/test_sprint22_workbench_status_strip.py backend/tests/test_sprint47_workbench_interaction_smoke.py -q` (`15 passed`) +- `cd frontend && npm run typecheck` +- `cd frontend && npm run build` + +Open: +- Full readiness, deployment and live browser verification still need to run for this pass. + +Limitations: +- Frontend Overview presentation hierarchy only; no workflow behavior, API contract, persistence, migration, provider fetching or AI/model changes. + +Next recommended pass: +- Continue with Data workspace panel hierarchy and selected-item density after this pass is deployed and visually checked. diff --git a/docs/TODO.md b/docs/TODO.md index 0642a143..1a4bc92b 100644 --- a/docs/TODO.md +++ b/docs/TODO.md @@ -72,6 +72,7 @@ This file now starts with the current implementation status. Older preparation/b - [x] Add raster/vector operation form readability polish for dense tool panels. - [x] Add compact loading/error/empty/result state polish across QA, exports and AI labs. - [x] Add compact shell density polish for topbar context, mobile navigation and workspace skip flow. +- [x] Add Overview workspace panel hierarchy polish for readiness and recommended-action regions. ## Sprint 8 status diff --git a/frontend/README.md b/frontend/README.md index 0b40b862..4e1e5075 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -237,6 +237,7 @@ QA/QC, exports and AI lab result panels use shared loading, error, empty and rea - Workbench bootstrap and reload effects live in `src/hooks/useWorkbenchBootstrap.ts`, keeping `App.tsx` focused on composing hooks into panels. - The workbench shell includes a compact command bar, consistent raised/sunken surfaces, structured empty states and scroll-safe AI result tables to keep the V1 workflow usable across desktop and mobile widths. - The shell includes a keyboard skip link, an explicit primary workspace navigation label and compact horizontal context/navigation rails on narrow screens so active workspace content is reachable without a tall preamble. +- The Overview workspace separates readiness, status tiles and recommended next actions into distinct visual hierarchy regions, keeping the first screen scannable without changing workflow behavior. - The Export Center includes a handoff readiness summary, grouped artifact actions and provenance-rich export cards so report/GeoJSON handoff stays understandable in long-running demo projects. ## Workbench shell refactor diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6f73fb76..ac88dcdd 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -540,7 +540,7 @@ function App(): JSX.Element { selectedAreaHasGeometry={Boolean(areaFeatureCollection)} />
-
+

Recommended flow

Build the project, load data, review on map, validate, export.

@@ -548,17 +548,37 @@ function App(): JSX.Element { required datasets are present.

-
- - - -
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css index 9ded4a59..91cd2eae 100644 --- a/frontend/src/styles/app.css +++ b/frontend/src/styles/app.css @@ -359,7 +359,10 @@ section { .workbench-status-strip { margin: 1rem 0; - box-shadow: var(--shadow); + border-color: #bdd0c5; + padding: 0.9rem; + background: linear-gradient(180deg, #ffffff, #f7fbf8); + box-shadow: 0 8px 22px rgba(33, 48, 41, 0.05); } .status-strip-header { @@ -367,11 +370,13 @@ section { gap: 1rem; align-items: flex-start; justify-content: space-between; - margin-bottom: 0.8rem; + margin-bottom: 0.72rem; } .status-strip-header h2 { margin-bottom: 0; + font-size: 1.32rem; + line-height: 1.15; } .status-next-action { @@ -382,26 +387,31 @@ section { } .status-strip-grid { - grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); + gap: 0.58rem; } .status-tile { - min-height: 6.7rem; + display: grid; + align-content: start; + min-height: 5.85rem; border-left: 4px solid #64748b; - padding: 0.7rem; + padding: 0.62rem 0.68rem; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74); } .status-tile strong { display: block; - margin-top: 0.48rem; - font-size: 1.02rem; + margin-top: 0.36rem; + font-size: 0.98rem; line-height: 1.22; } .status-tile p { - margin: 0.32rem 0 0; + margin: 0.24rem 0 0; color: var(--muted); - font-size: 0.86rem; + font-size: 0.82rem; + line-height: 1.34; } .status-tile-ready { @@ -830,11 +840,20 @@ section li strong + div { grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); gap: 1rem; align-items: center; + border-left: 4px solid var(--accent); + background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(255, 255, 255, 0.82)); + box-shadow: 0 8px 20px rgba(33, 48, 41, 0.045); +} + +.overview-action-copy { + max-width: 46rem; } .overview-actions h2 { max-width: 42rem; margin-bottom: 0.5rem; + font-size: 1.22rem; + line-height: 1.22; } .quick-action-grid { @@ -843,8 +862,16 @@ section li strong + div { gap: 0.65rem; } +.overview-quick-actions { + align-self: stretch; +} + +.quick-action-button, .quick-action-grid button { + display: grid; + align-content: center; min-height: 4.25rem; + text-align: center; } section form,