Refactor workbench into task-based UI shell

CHANGELOG.md

@@ -7,6 +7,15 @@
 
 # Changelog
 
+## Sprint 49 Workbench shell UI refactor (2026-06-17)
+
+- Replaced the one-page workbench panel stack with a task-based UI shell.
+- Added primary workspaces for Overview, Data, Map, QA/QC, AI Labs, Exports and System.
+- Added a persistent top context bar for active project, AOI, dataset and layer state.
+- Moved dataset details into a persistent right-side inspector instead of leaving them below the full workflow.
+- Kept existing hooks, API contracts, backend behavior, migrations, provider behavior and AI configuration unchanged.
+- Added static regression coverage for the new shell regions and workspace navigation anchors.
+
 ## Sprint 48 Backend API contract audit (2026-06-17)
 
 - Added `scripts/audit_api_contracts.py` to compare the active FastAPI route surface with `docs/API_CONTRACTS.md`.

backend/tests/test_sprint30_workbench_components.py

@@ -18,15 +18,18 @@ def test_app_uses_quality_and_map_presentational_components() -> None:
     assert "<GeoMap" not in app
 
 
-def test_map_workspace_is_promoted_before_dense_workflow_grid() -> None:
+def test_map_workspace_lives_in_task_based_workbench_shell() -> None:
     app = (ROOT / "frontend" / "src" / "App.tsx").read_text(encoding="utf-8")
     styles = (ROOT / "frontend" / "src" / "styles" / "app.css").read_text(encoding="utf-8")
 
-    assert app.index("<MapWorkspace") < app.index('<main className="workspace-grid">')
-    assert "grid-template-columns: repeat(12, minmax(0, 1fr));" in styles
-    assert ".workspace-grid > section" in styles
-    assert "max-height: 42rem;" in styles
-    assert "overflow: auto;" in styles
+    assert "activeWorkspace === 'map'" in app
+    assert app.index("activeWorkspace === 'map'") < app.index("<MapWorkspace")
+    assert 'className="workbench-main"' in app
+    assert 'className="workbench-inspector"' in app
+    assert ".workbench-layout" in styles
+    assert ".workbench-sidebar" in styles
+    assert ".workbench-main" in styles
+    assert ".workbench-inspector" in styles
 
 
 def test_quality_results_panel_owns_persisted_quality_check_markup() -> None:

backend/tests/test_sprint39_frontend_orchestration_hooks.py

@@ -35,10 +35,10 @@ def test_app_entrypoint_has_clean_encoding_and_react_imports() -> None:
     app = app_path.read_text(encoding="utf-8")
 
     assert not app_bytes.startswith(b"\xef\xbb\xbf")
-    assert "import { useMemo } from 'react'" in app
+    assert "import { useMemo, useState } from 'react'" in app
     assert "FormEvent" not in app
     assert "useEffect" not in app
-    assert "useState" not in app
+    assert "const [activeWorkspace, setActiveWorkspace] = useState<WorkspaceKey>('overview')" in app
 
 
 def test_demo_workflow_hook_owns_demo_api_and_cross_module_selection() -> None:

backend/tests/test_sprint49_workbench_shell_refactor.py

@@ -0,0 +1,38 @@
+from __future__ import annotations
+
+from pathlib import Path
+
+
+ROOT = Path(__file__).resolve().parents[2]
+
+
+def test_app_uses_task_based_workbench_shell() -> None:
+    app = (ROOT / "frontend" / "src" / "App.tsx").read_text(encoding="utf-8")
+
+    assert "type WorkspaceKey" in app
+    assert "workspaceNavItems" in app
+    assert 'data-testid={`workspace-nav-${item.key}`}' in app
+    assert 'className="workbench-layout"' in app
+    assert 'className="workbench-sidebar"' in app
+    assert 'className="workbench-main"' in app
+    assert 'className="workbench-inspector"' in app
+    assert "activeWorkspace === 'data'" in app
+    assert "activeWorkspace === 'map'" in app
+    assert "activeWorkspace === 'analysis'" in app
+    assert "activeWorkspace === 'ai'" in app
+    assert "activeWorkspace === 'exports'" in app
+    assert "activeWorkspace === 'system'" in app
+
+
+def test_workbench_shell_css_provides_navigation_main_and_inspector_regions() -> None:
+    css = (ROOT / "frontend" / "src" / "styles" / "app.css").read_text(encoding="utf-8")
+
+    assert ".workbench-topbar" in css
+    assert ".context-bar" in css
+    assert ".workbench-layout" in css
+    assert ".workbench-sidebar" in css
+    assert ".nav-item-active" in css
+    assert ".workbench-main" in css
+    assert ".workbench-inspector" in css
+    assert ".workspace-grid-data" in css
+    assert ".workspace-grid-ai" in css

docs/CODEX_EXECUTION_LOG.md

@@ -2042,3 +2042,28 @@ Limitations:
 
 Next recommended pass:
 - Run release readiness, deploy Tower and decide whether to manually acknowledge the current collation version.
+
+## Sprint 49 Workbench shell UI refactor (2026-06-17)
+
+Changed:
+- Audited the live workbench UI and confirmed the main usability issue was information architecture: all V1 workflows were mounted as one long vertical panel stack.
+- Refactored the frontend into a task-based workbench shell with Overview, Data, Map, QA/QC, AI Labs, Exports and System workspaces.
+- Added a persistent top context bar for active project, AOI, dataset and layer state.
+- Moved selected dataset details into a persistent right-side inspector while keeping the same dataset/raster/vector operation callbacks.
+- Added stable primary navigation test anchors.
+- Documented the new frontend shell structure and updated the changelog.
+
+Tested:
+- `cd frontend && npm run typecheck`
+- `cd frontend && npm run build`
+- Local Vite visual audit on `http://127.0.0.1:5175`
+
+Open:
+- Local Vite visual audit shows `Request failed (404)` when no local backend/proxy target is available. Docker/nginx same-origin proxy behavior remains the production path.
+- The next pass should run full release readiness and deploy to Tower for browser-facing verification on `http://192.168.10.150:1202`.
+
+Limitations:
+- This pass intentionally changes UI structure only. It does not add product capabilities, alter API contracts, change migrations, fetch live providers or enable new AI models.
+
+Next recommended pass:
+- Run full readiness, rebuild/deploy Tower, then perform a live browser smoke through the new workbench navigation.

docs/TODO.md

@@ -312,3 +312,10 @@ This file now starts with the current implementation status. Older preparation/b
 - [x] Add implementation ticket index and tickets.
 - [x] Add API example payloads.
 - [x] Add final pre-Codex checklist.
+
+# Current Workbench UI
+
+- [x] Replace the one-page workflow panel stack with a task-based workbench shell.
+- [x] Add persistent project/AOI/dataset/layer context.
+- [x] Move selected dataset details into a persistent inspector.
+- [ ] Deploy the shell refactor to Tower and run live browser smoke on port 1202.

frontend/README.md

@@ -2,7 +2,7 @@
 
 React + TypeScript + MapLibre foundation for project/area/dataset workflow.
 
-The workbench is intentionally map-first: `MapWorkspace` is promoted above the dense workflow grid so GIS context stays visible before lower-detail provider, AI, QA and export panels. Long workflow panels are scroll-contained by CSS rather than stretching every grid row.
+The workbench now uses a task-based shell instead of a single long panel stack. `App.tsx` still owns shared orchestration state, but the UI is organized into Overview, Data, Map, QA/QC, AI Labs, Exports and System workspaces with a persistent top context bar and right-side dataset inspector.
 
 ## Scope implemented
 - API client layer (`src/services/api`)
@@ -220,6 +220,17 @@ The workbench is intentionally map-first: `MapWorkspace` is promoted above the d
 - Offline demo workflow orchestration lives in `src/hooks/useDemoWorkflow.ts`, because it coordinates project, dataset, map, QA/QC, detection, segmentation and export state after the backend fixture seed.
 - Workbench bootstrap and reload effects live in `src/hooks/useWorkbenchBootstrap.ts`, keeping `App.tsx` focused on composing hooks into panels.
 
+## Workbench shell refactor
+
+- The primary UI is organized around `workspaceNavItems` in `src/App.tsx`.
+- The shell regions are:
+  - `workbench-topbar`: active project, AOI, dataset and layer context.
+  - `workbench-sidebar`: primary navigation between workflow workspaces.
+  - `workbench-main`: one active workflow at a time.
+  - `workbench-inspector`: persistent selected dataset details and raster/vector operation controls.
+- Existing API calls, hooks, MapLibre rendering and QA/AI/export flows are unchanged.
+- Stable navigation test anchors use `data-testid="workspace-nav-{workspace}"`.
+
 ## Raster dependency visibility
 
 Raster metadata and raster ops may remain unavailable when backend raster stack is missing. In that case:

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import './styles/app.css'
 import { ChangeDetectionPanel } from './components/analysis/ChangeDetectionPanel'
 import { DatasetDetailPanel } from './components/datasets/DatasetDetailPanel'
@@ -30,7 +30,20 @@ function isVectorDatasetType(datasetType: string): boolean {
   return datasetType === 'vector' || datasetType === 'geojson'
 }
 
+type WorkspaceKey = 'overview' | 'data' | 'map' | 'analysis' | 'ai' | 'exports' | 'system'
+
+const workspaceNavItems: Array<{ key: WorkspaceKey; label: string; description: string }> = [
+  { key: 'overview', label: 'Overview', description: 'V1 readiness and next action' },
+  { key: 'data', label: 'Data', description: 'Projects, AOI and datasets' },
+  { key: 'map', label: 'Map', description: 'Layer review and inspection' },
+  { key: 'analysis', label: 'QA/QC', description: 'Quality checks and change detection' },
+  { key: 'ai', label: 'AI Labs', description: 'Detection and segmentation' },
+  { key: 'exports', label: 'Exports', description: 'Artifacts and downloads' },
+  { key: 'system', label: 'System', description: 'Provider capabilities' },
+]
+
 function App(): JSX.Element {
+  const [activeWorkspace, setActiveWorkspace] = useState<WorkspaceKey>('overview')
   const {
     projects,
     selectedProject,
@@ -370,269 +383,370 @@ function App(): JSX.Element {
     resetExportsForProject,
   })
 
+  const selectedArea = areas.find((area) => area.id === selectedMapAreaId) ?? null
+  const activeWorkspaceItem = workspaceNavItems.find((item) => item.key === activeWorkspace) ?? workspaceNavItems[0]
+
   return (
-    <div className="app-shell">
-      <header>
-        <h1>GeoIntel Kempen V1 Workbench</h1>
-        <p>Raster/vector workbench with QA/QC, exports, change detection and AI foundation layers.</p>
+    <div className="app-shell workbench-shell">
+      <header className="workbench-topbar">
+        <div className="brand-block">
+          <p className="eyebrow">GeoAI Workbench</p>
+          <h1>GeoIntel Kempen</h1>
+        </div>
+        <div className="context-bar" aria-label="Active workbench context">
+          <div>
+            <span>Project</span>
+            <strong>{selectedProject?.name ?? 'No project'}</strong>
+          </div>
+          <div>
+            <span>AOI</span>
+            <strong>{selectedArea?.name ?? (areas.length > 0 ? 'Select area' : 'No AOI')}</strong>
+          </div>
+          <div>
+            <span>Dataset</span>
+            <strong>{selectedDataset?.name ?? (datasets.length > 0 ? 'Select dataset' : 'No dataset')}</strong>
+          </div>
+          <div>
+            <span>Layer</span>
+            <strong>{mapFeatureCollection ? `${mapFeatureCount} features` : 'No active layer'}</strong>
+          </div>
+        </div>
       </header>
 
       {errorMessage ? <p className="error">{errorMessage}</p> : null}
 
-      <WorkbenchStatusStrip
-        selectedProject={selectedProject}
-        areas={areas}
-        datasets={datasets}
-        qualityChecks={qualityChecks}
-        exports={exports}
-        activeLayerFeatureCount={mapFeatureCount}
-        selectedAreaHasGeometry={Boolean(areaFeatureCollection)}
-      />
+      <div className="workbench-layout">
+        <aside className="workbench-sidebar" aria-label="Workbench navigation">
+          <nav>
+            {workspaceNavItems.map((item) => (
+              <button
+                key={item.key}
+                type="button"
+                className={item.key === activeWorkspace ? 'nav-item nav-item-active' : 'nav-item'}
+                onClick={() => setActiveWorkspace(item.key)}
+                aria-current={item.key === activeWorkspace ? 'page' : undefined}
+                data-testid={`workspace-nav-${item.key}`}
+              >
+                <span>{item.label}</span>
+                <small>{item.description}</small>
+              </button>
+            ))}
+          </nav>
+        </aside>
 
-      <MapWorkspace
-        areas={areas}
-        selectedMapAreaId={selectedMapAreaId}
-        areaFeatureCollection={areaFeatureCollection}
-        mapFeatureCollection={mapFeatureCollection}
-        mapLayerLabel={mapLayerLabel}
-        mapLayerVisible={mapLayerVisible}
-        mapLayerOpacity={mapLayerOpacity}
-        areaLayerVisible={areaLayerVisible}
-        areaLayerOpacity={areaLayerOpacity}
-        mapFeatureCount={mapFeatureCount}
-        areaFeatureCount={areaFeatureCount}
-        selectedMapFeature={selectedMapFeature}
-        onSelectMapArea={setSelectedMapAreaId}
-        onSetAreaLayerVisible={setAreaLayerVisible}
-        onSetAreaLayerOpacity={setAreaLayerOpacity}
-        onSetMapLayerVisible={setMapLayerVisible}
-        onSetMapLayerOpacity={setMapLayerOpacity}
-        onSelectMapFeature={setSelectedMapFeature}
-      />
+        <main className="workbench-main">
+          <div className="workspace-heading">
+            <div>
+              <p className="eyebrow">Workspace</p>
+              <h2>{activeWorkspaceItem.label}</h2>
+            </div>
+            <p>{activeWorkspaceItem.description}</p>
+          </div>
 
-      <main className="workspace-grid">
-        <ProjectPanel
-          projects={projects}
-          selectedProjectId={selectedProjectId}
-          loadingProjects={loadingProjects}
-          projectForm={projectForm}
-          loadingDemoWorkflow={loadingDemoWorkflow}
-          demoWorkflowMessage={demoWorkflowMessage}
-          onCreateProject={createProject}
-          onUpdateProjectForm={setProjectForm}
-          onSelectProject={setSelectedProjectId}
-          onLoadDemoWorkflow={loadDemoWorkflow}
-        />
+          {activeWorkspace === 'overview' ? (
+            <div className="workspace-stack">
+              <WorkbenchStatusStrip
+                selectedProject={selectedProject}
+                areas={areas}
+                datasets={datasets}
+                qualityChecks={qualityChecks}
+                exports={exports}
+                activeLayerFeatureCount={mapFeatureCount}
+                selectedAreaHasGeometry={Boolean(areaFeatureCollection)}
+              />
+              <section className="overview-actions">
+                <div>
+                  <p className="eyebrow">Recommended flow</p>
+                  <h2>Build the project, load data, review on map, validate, export.</h2>
+                  <p className="muted">
+                    Keep the daily workflow focused: prepare data first, inspect it spatially, then run QA/QC or AI lab tasks only when the
+                    required datasets are present.
+                  </p>
+                </div>
+                <div className="quick-action-grid">
+                  <button type="button" onClick={() => setActiveWorkspace('data')}>
+                    Open data setup
+                  </button>
+                  <button type="button" onClick={() => setActiveWorkspace('map')}>
+                    Inspect map
+                  </button>
+                  <button type="button" onClick={() => setActiveWorkspace('analysis')}>
+                    Review QA/QC
+                  </button>
+                  <button type="button" onClick={() => setActiveWorkspace('exports')}>
+                    Manage exports
+                  </button>
+                </div>
+              </section>
+            </div>
+          ) : null}
 
-        <AreaPanel
-          areas={areas}
-          selectedProject={selectedProject}
-          selectedProjectId={selectedProjectId}
-          loadingAreas={loadingAreas}
-          areaForm={areaForm}
-          selectedMapAreaId={selectedMapAreaId}
-          onCreateArea={createArea}
-          onUpdateAreaForm={setAreaForm}
-          onSelectMapArea={setSelectedMapAreaId}
-        />
+          {activeWorkspace === 'data' ? (
+            <div className="workspace-grid workspace-grid-data">
+              <ProjectPanel
+                projects={projects}
+                selectedProjectId={selectedProjectId}
+                loadingProjects={loadingProjects}
+                projectForm={projectForm}
+                loadingDemoWorkflow={loadingDemoWorkflow}
+                demoWorkflowMessage={demoWorkflowMessage}
+                onCreateProject={createProject}
+                onUpdateProjectForm={setProjectForm}
+                onSelectProject={setSelectedProjectId}
+                onLoadDemoWorkflow={loadDemoWorkflow}
+              />
 
-        <DatasetPanel
-          selectedProjectId={selectedProjectId}
-          areas={areas}
-          datasets={datasets}
-          datasetForm={datasetForm}
-          loadingDatasets={loadingDatasets}
-          onDatasetFormChange={setDatasetForm}
-          onUploadDataset={uploadDataset}
-          onLoadDatasetDetails={loadDatasetDetails}
-          onRefreshMetadata={refreshMetadata}
-        />
+              <AreaPanel
+                areas={areas}
+                selectedProject={selectedProject}
+                selectedProjectId={selectedProjectId}
+                loadingAreas={loadingAreas}
+                areaForm={areaForm}
+                selectedMapAreaId={selectedMapAreaId}
+                onCreateArea={createArea}
+                onUpdateAreaForm={setAreaForm}
+                onSelectMapArea={setSelectedMapAreaId}
+              />
 
-        <ProviderPanel
-          providers={providers}
-          loadingCapabilities={loadingCapabilities}
-          capabilitiesError={capabilitiesError}
-          onRefresh={loadCapabilities}
-        />
+              <DatasetPanel
+                selectedProjectId={selectedProjectId}
+                areas={areas}
+                datasets={datasets}
+                datasetForm={datasetForm}
+                loadingDatasets={loadingDatasets}
+                onDatasetFormChange={setDatasetForm}
+                onUploadDataset={uploadDataset}
+                onLoadDatasetDetails={loadDatasetDetails}
+                onRefreshMetadata={refreshMetadata}
+              />
+            </div>
+          ) : null}
 
-        <ChangeDetectionPanel
-          vectorDatasets={availableVectorDatasets}
-          sourceDatasetId={changeSourceDatasetId}
-          targetDatasetId={changeTargetDatasetId}
-          iouThreshold={changeIouThreshold}
-          includeUnchanged={changeIncludeUnchanged}
-          running={runningChangeDetection}
-          result={changeDetectionResult}
-          error={changeDetectionError}
-          onSourceDatasetChange={setChangeSourceDatasetId}
-          onTargetDatasetChange={setChangeTargetDatasetId}
-          onIouThresholdChange={setChangeIouThreshold}
-          onIncludeUnchangedChange={setChangeIncludeUnchanged}
-          onRun={runChangeDetection}
-        />
+          {activeWorkspace === 'map' ? (
+            <MapWorkspace
+              areas={areas}
+              selectedMapAreaId={selectedMapAreaId}
+              areaFeatureCollection={areaFeatureCollection}
+              mapFeatureCollection={mapFeatureCollection}
+              mapLayerLabel={mapLayerLabel}
+              mapLayerVisible={mapLayerVisible}
+              mapLayerOpacity={mapLayerOpacity}
+              areaLayerVisible={areaLayerVisible}
+              areaLayerOpacity={areaLayerOpacity}
+              mapFeatureCount={mapFeatureCount}
+              areaFeatureCount={areaFeatureCount}
+              selectedMapFeature={selectedMapFeature}
+              onSelectMapArea={setSelectedMapAreaId}
+              onSetAreaLayerVisible={setAreaLayerVisible}
+              onSetAreaLayerOpacity={setAreaLayerOpacity}
+              onSetMapLayerVisible={setMapLayerVisible}
+              onSetMapLayerOpacity={setMapLayerOpacity}
+              onSelectMapFeature={setSelectedMapFeature}
+            />
+          ) : null}
 
-        <DetectionLab
-          detectionModels={detectionModels}
-          loadingDetectionModels={loadingDetectionModels}
-          detectionModelError={detectionModelError}
-          selectedDetectionDatasetId={selectedDetectionDatasetId}
-          selectedDetectionModelId={selectedDetectionModelId}
-          detectionTileManifestPath={detectionTileManifestPath}
-          detectionConfidenceThreshold={detectionConfidenceThreshold}
-          runningDetection={runningDetection}
-          detectionRunResult={detectionRunResult}
-          detectionRunError={detectionRunError}
-          detectionRuns={detectionRuns}
-          selectedDetectionRunId={selectedDetectionRunId}
-          detectionItems={detectionItems}
-          detectionClassFilter={detectionClassFilter}
-          detectionMinConfidenceFilter={detectionMinConfidenceFilter}
-          loadingDetectionResults={loadingDetectionResults}
-          detectionReferenceDatasetId={detectionReferenceDatasetId}
-          detectionQaResult={detectionQaResult}
-          detectionQaError={detectionQaError}
-          runningDetectionQa={runningDetectionQa}
-          selectedProjectId={selectedProjectId}
-          rasterDatasets={rasterDatasets}
-          referenceDatasets={referenceDatasets}
-          onLoadModels={loadDetectionModels}
-          onSelectDataset={setSelectedDetectionDatasetId}
-          onSelectModel={setSelectedDetectionModelId}
-          onSetConfidenceThreshold={setDetectionConfidenceThreshold}
-          onSetTileManifestPath={setDetectionTileManifestPath}
-          onRunDetection={runDetection}
-          onLoadRuns={() => loadDetectionRuns()}
-          onSelectRun={setSelectedDetectionRunId}
-          onSetClassFilter={setDetectionClassFilter}
-          onSetMinConfidenceFilter={setDetectionMinConfidenceFilter}
-          onLoadResults={() => loadDetectionResults()}
-          onSelectReferenceDataset={setDetectionReferenceDatasetId}
-          onRunQa={runDetectionQa}
-        />
+          {activeWorkspace === 'analysis' ? (
+            <div className="workspace-grid workspace-grid-analysis">
+              <ChangeDetectionPanel
+                vectorDatasets={availableVectorDatasets}
+                sourceDatasetId={changeSourceDatasetId}
+                targetDatasetId={changeTargetDatasetId}
+                iouThreshold={changeIouThreshold}
+                includeUnchanged={changeIncludeUnchanged}
+                running={runningChangeDetection}
+                result={changeDetectionResult}
+                error={changeDetectionError}
+                onSourceDatasetChange={setChangeSourceDatasetId}
+                onTargetDatasetChange={setChangeTargetDatasetId}
+                onIouThresholdChange={setChangeIouThreshold}
+                onIncludeUnchangedChange={setChangeIncludeUnchanged}
+                onRun={runChangeDetection}
+              />
 
-        <SegmentationLab
-          segmentationModels={segmentationModels}
-          loadingSegmentationModels={loadingSegmentationModels}
-          segmentationModelError={segmentationModelError}
-          selectedSegmentationDatasetId={selectedSegmentationDatasetId}
-          selectedSegmentationModelId={selectedSegmentationModelId}
-          segmentationConfidenceThreshold={segmentationConfidenceThreshold}
-          runningSegmentation={runningSegmentation}
-          segmentationRunResult={segmentationRunResult}
-          segmentationRunError={segmentationRunError}
-          segmentationRuns={segmentationRuns}
-          selectedSegmentationRunId={selectedSegmentationRunId}
-          segmentationItems={segmentationItems}
-          segmentationClassFilter={segmentationClassFilter}
-          segmentationMinConfidenceFilter={segmentationMinConfidenceFilter}
-          loadingSegmentationResults={loadingSegmentationResults}
-          segmentationReferenceDatasetId={segmentationReferenceDatasetId}
-          segmentationQaResult={segmentationQaResult}
-          segmentationQaError={segmentationQaError}
-          runningSegmentationQa={runningSegmentationQa}
-          selectedProjectId={selectedProjectId}
-          rasterDatasets={rasterDatasets}
-          referenceDatasets={referenceDatasets}
-          selectedSegmentationModelConfigured={Boolean(selectedSegmentationModel?.configured)}
-          selectedSegmentationModelLimitation={selectedSegmentationModel?.limitation_message ?? null}
-          onLoadModels={loadSegmentationModels}
-          onSelectDataset={setSelectedSegmentationDatasetId}
-          onSelectModel={setSelectedSegmentationModelId}
-          onSetConfidenceThreshold={setSegmentationConfidenceThreshold}
-          onRunSegmentation={runSegmentation}
-          onLoadRuns={() => loadSegmentationRuns()}
-          onSelectRun={setSelectedSegmentationRunId}
-          onSetClassFilter={setSegmentationClassFilter}
-          onSetMinConfidenceFilter={setSegmentationMinConfidenceFilter}
-          onLoadResults={() => loadSegmentationResults()}
-          onSelectReferenceDataset={setSegmentationReferenceDatasetId}
-          onRunQa={runSegmentationQa}
-        />
+              <QualityResultsPanel
+                selectedProjectId={selectedProjectId}
+                qualityChecks={qualityChecks}
+                qualityChecksError={qualityChecksError}
+                onRefresh={() => loadQualityChecks()}
+              />
+            </div>
+          ) : null}
 
-        <QualityResultsPanel
-          selectedProjectId={selectedProjectId}
-          qualityChecks={qualityChecks}
-          qualityChecksError={qualityChecksError}
-          onRefresh={() => loadQualityChecks()}
-        />
+          {activeWorkspace === 'ai' ? (
+            <div className="workspace-grid workspace-grid-ai">
+              <DetectionLab
+                detectionModels={detectionModels}
+                loadingDetectionModels={loadingDetectionModels}
+                detectionModelError={detectionModelError}
+                selectedDetectionDatasetId={selectedDetectionDatasetId}
+                selectedDetectionModelId={selectedDetectionModelId}
+                detectionTileManifestPath={detectionTileManifestPath}
+                detectionConfidenceThreshold={detectionConfidenceThreshold}
+                runningDetection={runningDetection}
+                detectionRunResult={detectionRunResult}
+                detectionRunError={detectionRunError}
+                detectionRuns={detectionRuns}
+                selectedDetectionRunId={selectedDetectionRunId}
+                detectionItems={detectionItems}
+                detectionClassFilter={detectionClassFilter}
+                detectionMinConfidenceFilter={detectionMinConfidenceFilter}
+                loadingDetectionResults={loadingDetectionResults}
+                detectionReferenceDatasetId={detectionReferenceDatasetId}
+                detectionQaResult={detectionQaResult}
+                detectionQaError={detectionQaError}
+                runningDetectionQa={runningDetectionQa}
+                selectedProjectId={selectedProjectId}
+                rasterDatasets={rasterDatasets}
+                referenceDatasets={referenceDatasets}
+                onLoadModels={loadDetectionModels}
+                onSelectDataset={setSelectedDetectionDatasetId}
+                onSelectModel={setSelectedDetectionModelId}
+                onSetConfidenceThreshold={setDetectionConfidenceThreshold}
+                onSetTileManifestPath={setDetectionTileManifestPath}
+                onRunDetection={runDetection}
+                onLoadRuns={() => loadDetectionRuns()}
+                onSelectRun={setSelectedDetectionRunId}
+                onSetClassFilter={setDetectionClassFilter}
+                onSetMinConfidenceFilter={setDetectionMinConfidenceFilter}
+                onLoadResults={() => loadDetectionResults()}
+                onSelectReferenceDataset={setDetectionReferenceDatasetId}
+                onRunQa={runDetectionQa}
+              />
 
-        <ExportCenter
-          selectedProjectId={selectedProjectId}
-          selectedDataset={selectedDataset}
-          selectedDetectionRunId={selectedDetectionRunId}
-          selectedSegmentationRunId={selectedSegmentationRunId}
-          exports={exports}
-          latestExport={latestExport}
-          exportError={exportError}
-          loadingExports={loadingExports}
-          exporting={exporting}
-          onRefresh={() => loadExports()}
-          onExportDataset={exportSelectedDatasetGeoJson}
-          onExportDetectionRun={exportSelectedDetectionRunGeoJson}
-          onExportSegmentationRun={exportSelectedSegmentationRunGeoJson}
-          onExportProjectMetadata={exportProjectMetadata}
-          onExportProjectReport={exportProjectReport}
-          onPreviewContent={previewExportContent}
-          onDownload={downloadExportArtifact}
-        />
-        <ExportPreview content={exportPreview} />
-      </main>
+              <SegmentationLab
+                segmentationModels={segmentationModels}
+                loadingSegmentationModels={loadingSegmentationModels}
+                segmentationModelError={segmentationModelError}
+                selectedSegmentationDatasetId={selectedSegmentationDatasetId}
+                selectedSegmentationModelId={selectedSegmentationModelId}
+                segmentationConfidenceThreshold={segmentationConfidenceThreshold}
+                runningSegmentation={runningSegmentation}
+                segmentationRunResult={segmentationRunResult}
+                segmentationRunError={segmentationRunError}
+                segmentationRuns={segmentationRuns}
+                selectedSegmentationRunId={selectedSegmentationRunId}
+                segmentationItems={segmentationItems}
+                segmentationClassFilter={segmentationClassFilter}
+                segmentationMinConfidenceFilter={segmentationMinConfidenceFilter}
+                loadingSegmentationResults={loadingSegmentationResults}
+                segmentationReferenceDatasetId={segmentationReferenceDatasetId}
+                segmentationQaResult={segmentationQaResult}
+                segmentationQaError={segmentationQaError}
+                runningSegmentationQa={runningSegmentationQa}
+                selectedProjectId={selectedProjectId}
+                rasterDatasets={rasterDatasets}
+                referenceDatasets={referenceDatasets}
+                selectedSegmentationModelConfigured={Boolean(selectedSegmentationModel?.configured)}
+                selectedSegmentationModelLimitation={selectedSegmentationModel?.limitation_message ?? null}
+                onLoadModels={loadSegmentationModels}
+                onSelectDataset={setSelectedSegmentationDatasetId}
+                onSelectModel={setSelectedSegmentationModelId}
+                onSetConfidenceThreshold={setSegmentationConfidenceThreshold}
+                onRunSegmentation={runSegmentation}
+                onLoadRuns={() => loadSegmentationRuns()}
+                onSelectRun={setSelectedSegmentationRunId}
+                onSetClassFilter={setSegmentationClassFilter}
+                onSetMinConfidenceFilter={setSegmentationMinConfidenceFilter}
+                onLoadResults={() => loadSegmentationResults()}
+                onSelectReferenceDataset={setSegmentationReferenceDatasetId}
+                onRunQa={runSegmentationQa}
+              />
+            </div>
+          ) : null}
 
-      <DatasetDetailPanel
-        areas={areas}
-        availableVectorTargets={availableVectorTargets}
-        selectedDatasetId={selectedDatasetId}
-        selectedDataset={selectedDataset}
-        selectedDatasetSummary={selectedDatasetSummary}
-        selectedRasterMetadata={selectedRasterMetadata}
-        selectedRasterStats={selectedRasterStats}
-        rasterPreview={rasterPreview}
-        rasterUnavailableMessage={rasterUnavailableMessage}
-        selectedClipAreaId={selectedClipAreaId}
-        selectedIntersectTargetId={selectedIntersectTargetId}
-        rasterTileSize={rasterTileSize}
-        rasterTileOverlap={rasterTileOverlap}
-        rasterTileOutputName={rasterTileOutputName}
-        rasterReprojectCrs={rasterReprojectCrs}
-        rasterReprojectResampling={rasterReprojectResampling}
-        ndviNirBand={ndviNirBand}
-        ndviRedBand={ndviRedBand}
-        ndwiGreenBand={ndwiGreenBand}
-        ndwiNirBand={ndwiNirBand}
-        ndbiSwirBand={ndbiSwirBand}
-        ndbiNirBand={ndbiNirBand}
-        isRasterTileInputValid={isRasterTileInputValid}
-        jobs={jobs}
-        loadingDatasetDetails={loadingDatasetDetails}
-        datasetDetailError={datasetDetailError}
-        isVectorDatasetType={isVectorDatasetType}
-        onSetSelectedClipAreaId={setSelectedClipAreaId}
-        onSetSelectedIntersectTargetId={setSelectedIntersectTargetId}
-        onSetRasterTileSize={setRasterTileSize}
-        onSetRasterTileOverlap={setRasterTileOverlap}
-        onSetRasterTileOutputName={setRasterTileOutputName}
-        onSetRasterReprojectCrs={setRasterReprojectCrs}
-        onSetRasterReprojectResampling={setRasterReprojectResampling}
-        onSetNdviNirBand={setNdviNirBand}
-        onSetNdviRedBand={setNdviRedBand}
-        onSetNdwiGreenBand={setNdwiGreenBand}
-        onSetNdwiNirBand={setNdwiNirBand}
-        onSetNdbiSwirBand={setNdbiSwirBand}
-        onSetNdbiNirBand={setNdbiNirBand}
-        onRunRasterInspect={runRasterInspect}
-        onRunRasterPreview={runRasterPreview}
-        onRunRasterStats={runRasterStats}
-        onRunRasterReproject={runRasterReproject}
-        onRunRasterClip={runRasterClip}
-        onRunRasterTile={runRasterTile}
-        onRunRasterNdvi={runRasterNdvi}
-        onRunRasterNdwi={runRasterNdwi}
-        onRunRasterNdbi={runRasterNdbi}
-        onRunVectorClip={runVectorClip}
-        onRunVectorBuffer={runVectorBuffer}
-        onRunVectorIntersect={() => runVectorIntersect(availableVectorTargets)}
-        onPickDerivedDataset={pickDerivedDataset}
-      />
+          {activeWorkspace === 'exports' ? (
+            <div className="workspace-grid workspace-grid-exports">
+              <ExportCenter
+                selectedProjectId={selectedProjectId}
+                selectedDataset={selectedDataset}
+                selectedDetectionRunId={selectedDetectionRunId}
+                selectedSegmentationRunId={selectedSegmentationRunId}
+                exports={exports}
+                latestExport={latestExport}
+                exportError={exportError}
+                loadingExports={loadingExports}
+                exporting={exporting}
+                onRefresh={() => loadExports()}
+                onExportDataset={exportSelectedDatasetGeoJson}
+                onExportDetectionRun={exportSelectedDetectionRunGeoJson}
+                onExportSegmentationRun={exportSelectedSegmentationRunGeoJson}
+                onExportProjectMetadata={exportProjectMetadata}
+                onExportProjectReport={exportProjectReport}
+                onPreviewContent={previewExportContent}
+                onDownload={downloadExportArtifact}
+              />
+              <ExportPreview content={exportPreview} />
+            </div>
+          ) : null}
+
+          {activeWorkspace === 'system' ? (
+            <ProviderPanel
+              providers={providers}
+              loadingCapabilities={loadingCapabilities}
+              capabilitiesError={capabilitiesError}
+              onRefresh={loadCapabilities}
+            />
+          ) : null}
+        </main>
+
+        <aside className="workbench-inspector" aria-label="Current selection inspector">
+          <DatasetDetailPanel
+            areas={areas}
+            availableVectorTargets={availableVectorTargets}
+            selectedDatasetId={selectedDatasetId}
+            selectedDataset={selectedDataset}
+            selectedDatasetSummary={selectedDatasetSummary}
+            selectedRasterMetadata={selectedRasterMetadata}
+            selectedRasterStats={selectedRasterStats}
+            rasterPreview={rasterPreview}
+            rasterUnavailableMessage={rasterUnavailableMessage}
+            selectedClipAreaId={selectedClipAreaId}
+            selectedIntersectTargetId={selectedIntersectTargetId}
+            rasterTileSize={rasterTileSize}
+            rasterTileOverlap={rasterTileOverlap}
+            rasterTileOutputName={rasterTileOutputName}
+            rasterReprojectCrs={rasterReprojectCrs}
+            rasterReprojectResampling={rasterReprojectResampling}
+            ndviNirBand={ndviNirBand}
+            ndviRedBand={ndviRedBand}
+            ndwiGreenBand={ndwiGreenBand}
+            ndwiNirBand={ndwiNirBand}
+            ndbiSwirBand={ndbiSwirBand}
+            ndbiNirBand={ndbiNirBand}
+            isRasterTileInputValid={isRasterTileInputValid}
+            jobs={jobs}
+            loadingDatasetDetails={loadingDatasetDetails}
+            datasetDetailError={datasetDetailError}
+            isVectorDatasetType={isVectorDatasetType}
+            onSetSelectedClipAreaId={setSelectedClipAreaId}
+            onSetSelectedIntersectTargetId={setSelectedIntersectTargetId}
+            onSetRasterTileSize={setRasterTileSize}
+            onSetRasterTileOverlap={setRasterTileOverlap}
+            onSetRasterTileOutputName={setRasterTileOutputName}
+            onSetRasterReprojectCrs={setRasterReprojectCrs}
+            onSetRasterReprojectResampling={setRasterReprojectResampling}
+            onSetNdviNirBand={setNdviNirBand}
+            onSetNdviRedBand={setNdviRedBand}
+            onSetNdwiGreenBand={setNdwiGreenBand}
+            onSetNdwiNirBand={setNdwiNirBand}
+            onSetNdbiSwirBand={setNdbiSwirBand}
+            onSetNdbiNirBand={setNdbiNirBand}
+            onRunRasterInspect={runRasterInspect}
+            onRunRasterPreview={runRasterPreview}
+            onRunRasterStats={runRasterStats}
+            onRunRasterReproject={runRasterReproject}
+            onRunRasterClip={runRasterClip}
+            onRunRasterTile={runRasterTile}
+            onRunRasterNdvi={runRasterNdvi}
+            onRunRasterNdwi={runRasterNdwi}
+            onRunRasterNdbi={runRasterNdbi}
+            onRunVectorClip={runVectorClip}
+            onRunVectorBuffer={runVectorBuffer}
+            onRunVectorIntersect={() => runVectorIntersect(availableVectorTargets)}
+            onPickDerivedDataset={pickDerivedDataset}
+          />
+        </aside>
+      </div>
     </div>
   )
 }

frontend/src/styles/app.css

@@ -506,3 +506,355 @@ section li strong + div {
     margin-top: 0.6rem;
   }
 }
+
+.workbench-shell {
+  width: 100%;
+  max-width: none;
+  padding: 0;
+  background: #eef4f1;
+}
+
+.workbench-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: minmax(16rem, 26rem) minmax(0, 1fr);
+  gap: 1rem;
+  align-items: center;
+  border-bottom: 1px solid var(--line);
+  padding: 0.85rem 1rem;
+  background: rgba(248, 251, 249, 0.96);
+  backdrop-filter: blur(12px);
+}
+
+.brand-block h1 {
+  font-size: 1.45rem;
+  line-height: 1.1;
+}
+
+.context-bar {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.65rem;
+}
+
+.context-bar > div {
+  min-height: 4.2rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.62rem 0.72rem;
+  background: #ffffff;
+}
+
+.context-bar span {
+  display: block;
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.context-bar strong {
+  display: block;
+  margin-top: 0.3rem;
+  font-size: 0.92rem;
+  line-height: 1.25;
+}
+
+.workbench-layout {
+  display: grid;
+  grid-template-columns: 14rem minmax(0, 1fr) 24rem;
+  gap: 0;
+  height: calc(100vh - 5.95rem);
+  min-height: 42rem;
+}
+
+.workbench-sidebar,
+.workbench-inspector {
+  min-height: 0;
+  overflow: auto;
+  border-color: var(--line);
+  background: #f8fbf9;
+}
+
+.workbench-sidebar {
+  border-right: 1px solid var(--line);
+  padding: 0.85rem;
+}
+
+.workbench-sidebar nav {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.nav-item {
+  display: block;
+  width: 100%;
+  min-height: 4.2rem;
+  border-color: transparent;
+  padding: 0.66rem 0.72rem;
+  background: transparent;
+  box-shadow: none;
+  text-align: left;
+}
+
+.nav-item:hover:not(:disabled) {
+  background: #ffffff;
+}
+
+.nav-item span,
+.nav-item small {
+  display: block;
+}
+
+.nav-item span {
+  font-size: 0.96rem;
+}
+
+.nav-item small {
+  margin-top: 0.22rem;
+  color: var(--muted);
+  font-size: 0.77rem;
+  font-weight: 550;
+  line-height: 1.3;
+}
+
+.nav-item-active {
+  border-color: rgba(15, 118, 110, 0.34);
+  background: #ffffff;
+  box-shadow: inset 4px 0 0 var(--accent);
+}
+
+.workbench-main {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 1rem;
+}
+
+.workbench-inspector {
+  border-left: 1px solid var(--line);
+  padding: 1rem;
+}
+
+.workbench-inspector > section {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.workspace-heading {
+  display: flex;
+  gap: 1rem;
+  align-items: end;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.85rem 1rem;
+  background: #ffffff;
+}
+
+.workspace-heading h2 {
+  margin: 0;
+}
+
+.workspace-heading p:last-child {
+  max-width: 32rem;
+  margin: 0;
+  color: var(--muted);
+  text-align: right;
+}
+
+.workspace-stack {
+  display: grid;
+  gap: 1rem;
+}
+
+.workspace-grid {
+  margin-top: 0;
+}
+
+.workspace-grid-data {
+  grid-template-columns: minmax(16rem, 0.75fr) minmax(18rem, 0.95fr) minmax(22rem, 1.35fr);
+}
+
+.workspace-grid-analysis,
+.workspace-grid-ai,
+.workspace-grid-exports {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.workspace-grid-data > section,
+.workspace-grid-analysis > section,
+.workspace-grid-ai > section,
+.workspace-grid-exports > section,
+.workspace-grid-data > section:nth-child(n),
+.workspace-grid-analysis > section:nth-child(n),
+.workspace-grid-ai > section:nth-child(n),
+.workspace-grid-exports > section:nth-child(n) {
+  grid-column: auto;
+  max-height: none;
+  overflow: visible;
+}
+
+.workspace-grid-ai > section {
+  align-self: stretch;
+}
+
+.overview-actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
+  gap: 1rem;
+  align-items: center;
+}
+
+.overview-actions h2 {
+  max-width: 42rem;
+  margin-bottom: 0.5rem;
+}
+
+.quick-action-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.65rem;
+}
+
+.quick-action-grid button {
+  min-height: 4.25rem;
+}
+
+section form,
+section > div:not(.map-controls):not(.feature-inspector):not(.quick-action-grid) {
+  display: grid;
+  gap: 0.55rem;
+}
+
+section button + button {
+  margin-top: 0.45rem;
+}
+
+section table {
+  width: 100%;
+  margin-top: 0.75rem;
+  border-collapse: collapse;
+  font-size: 0.86rem;
+}
+
+section th,
+section td {
+  border-bottom: 1px solid var(--line);
+  padding: 0.5rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+section th {
+  color: var(--muted);
+  font-size: 0.72rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.workbench-inspector .job-result,
+.workbench-inspector pre {
+  max-height: 16rem;
+}
+
+.workbench-inspector h2 {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  margin: 0 -1rem 0.8rem;
+  border-bottom: 1px solid var(--line);
+  padding: 0.35rem 1rem 0.75rem;
+  background: #f8fbf9;
+}
+
+.workbench-main .map-container {
+  height: calc(100vh - 23rem);
+  min-height: 28rem;
+}
+
+@media (max-width: 1280px) {
+  .workbench-layout {
+    grid-template-columns: 12rem minmax(0, 1fr);
+  }
+
+  .workbench-inspector {
+    grid-column: 1 / -1;
+    border-top: 1px solid var(--line);
+    border-left: 0;
+  }
+}
+
+@media (max-width: 980px) {
+  .workbench-topbar,
+  .workbench-layout,
+  .workspace-grid-data,
+  .workspace-grid-analysis,
+  .workspace-grid-ai,
+  .workspace-grid-exports,
+  .overview-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .workbench-layout {
+    height: auto;
+  }
+
+  .workbench-sidebar {
+    position: sticky;
+    top: 5.8rem;
+    z-index: 10;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .workbench-sidebar nav,
+  .context-bar,
+  .quick-action-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .nav-item {
+    min-height: 3.45rem;
+  }
+
+  .workspace-heading,
+  .status-strip-header {
+    display: block;
+  }
+
+  .workspace-heading p:last-child,
+  .status-next-action {
+    margin-top: 0.45rem;
+    text-align: left;
+  }
+
+  .workbench-main .map-container {
+    height: 28rem;
+  }
+}
+
+@media (max-width: 620px) {
+  .workbench-topbar,
+  .workbench-main,
+  .workbench-inspector,
+  .workbench-sidebar {
+    padding: 0.75rem;
+  }
+
+  .context-bar,
+  .workbench-sidebar nav,
+  .quick-action-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .status-strip-grid {
+    grid-template-columns: 1fr;
+  }
+}