Polish overview panel hierarchy

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.

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

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.

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
 

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

frontend/src/App.tsx

@@ -540,7 +540,7 @@ function App(): JSX.Element {
                 selectedAreaHasGeometry={Boolean(areaFeatureCollection)}
               />
               <section className="overview-actions">
-                <div>
+                <div className="overview-action-copy">
                   <p className="eyebrow">Recommended flow</p>
                   <h2>Build the project, load data, review on map, validate, export.</h2>
                   <p className="muted">
@@ -548,17 +548,37 @@ function App(): JSX.Element {
                     required datasets are present.
                   </p>
                 </div>
-                <div className="quick-action-grid">
-                  <button type="button" onClick={() => setActiveWorkspace('data')} aria-label="Open data setup workspace">
+                <div className="quick-action-grid overview-quick-actions" aria-label="Recommended next workbench actions">
+                  <button
+                    type="button"
+                    className="quick-action-button"
+                    onClick={() => setActiveWorkspace('data')}
+                    aria-label="Open data setup workspace"
+                  >
                     Open data setup
                   </button>
-                  <button type="button" onClick={() => setActiveWorkspace('map')} aria-label="Inspect map workspace">
+                  <button
+                    type="button"
+                    className="quick-action-button"
+                    onClick={() => setActiveWorkspace('map')}
+                    aria-label="Inspect map workspace"
+                  >
                     Inspect map
                   </button>
-                  <button type="button" onClick={() => setActiveWorkspace('analysis')} aria-label="Review QA/QC workspace">
+                  <button
+                    type="button"
+                    className="quick-action-button"
+                    onClick={() => setActiveWorkspace('analysis')}
+                    aria-label="Review QA/QC workspace"
+                  >
                     Review QA/QC
                   </button>
-                  <button type="button" onClick={() => setActiveWorkspace('exports')} aria-label="Manage exports workspace">
+                  <button
+                    type="button"
+                    className="quick-action-button"
+                    onClick={() => setActiveWorkspace('exports')}
+                    aria-label="Manage exports workspace"
+                  >
                     Manage exports
                   </button>
                 </div>

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,