Add overview workflow guidance

frontend/src/App.tsx

@@ -449,6 +449,67 @@ function App(): JSX.Element {
     }
     setActiveWorkspace('exports')
   }
+  const hasAnalysisOutput = qualityChecks.length > 0 || Boolean(changeDetectionResult) || detectionItems.length > 0 || segmentationItems.length > 0
+  const recommendedWorkflowTarget: WorkspaceKey = !selectedProjectId
+    ? 'data'
+    : datasets.length === 0
+      ? 'data'
+      : mapFeatureCount === 0 && areaFeatureCount === 0
+        ? 'map'
+        : !hasAnalysisOutput
+          ? 'analysis'
+          : exports.length === 0
+            ? 'exports'
+            : 'exports'
+  const workflowGuidanceSteps: Array<{
+    step: string
+    title: string
+    detail: string
+    status: string
+    ready: boolean
+    target: WorkspaceKey
+  }> = [
+    {
+      step: '1',
+      title: 'Project & AOI',
+      detail: selectedProjectId ? `${areas.length} AOI record${areas.length === 1 ? '' : 's'} available` : 'Create or load a project context',
+      status: selectedProjectId ? 'ready' : 'next',
+      ready: Boolean(selectedProjectId),
+      target: 'data',
+    },
+    {
+      step: '2',
+      title: 'Data',
+      detail: datasets.length > 0 ? `${datasets.length} dataset${datasets.length === 1 ? '' : 's'} loaded` : 'Upload source and reference datasets',
+      status: datasets.length > 0 ? 'ready' : 'waiting',
+      ready: datasets.length > 0,
+      target: 'data',
+    },
+    {
+      step: '3',
+      title: 'Map',
+      detail: mapFeatureCount > 0 || areaFeatureCount > 0 ? `${mapFeatureCount + areaFeatureCount} active map feature${mapFeatureCount + areaFeatureCount === 1 ? '' : 's'}` : 'Inspect AOI and selected layer',
+      status: mapFeatureCount > 0 || areaFeatureCount > 0 ? 'ready' : 'waiting',
+      ready: mapFeatureCount > 0 || areaFeatureCount > 0,
+      target: 'map',
+    },
+    {
+      step: '4',
+      title: 'QA / AI',
+      detail: hasAnalysisOutput ? 'QA, change, detection or segmentation output exists' : 'Run checks after data is ready',
+      status: hasAnalysisOutput ? 'ready' : 'waiting',
+      ready: hasAnalysisOutput,
+      target: 'analysis',
+    },
+    {
+      step: '5',
+      title: 'Export',
+      detail: exports.length > 0 ? `${exports.length} export artifact${exports.length === 1 ? '' : 's'} recorded` : 'Package validated project outputs',
+      status: exports.length > 0 ? 'ready' : 'waiting',
+      ready: exports.length > 0,
+      target: 'exports',
+    },
+  ]
 
   return (
     <div className="app-shell workbench-shell">
@@ -539,6 +600,40 @@ function App(): JSX.Element {
                 activeLayerFeatureCount={mapFeatureCount}
                 selectedAreaHasGeometry={Boolean(areaFeatureCollection)}
               />
+              <section className="workflow-guidance-panel" aria-label="V1 workflow guidance">
+                <div className="panel-title-row">
+                  <div>
+                    <p className="eyebrow">Workbench flow</p>
+                    <h2>Project to export path</h2>
+                  </div>
+                  <span className="status-badge">
+                    Next: {workspaceNavItems.find((item) => item.key === recommendedWorkflowTarget)?.label ?? 'Overview'}
+                  </span>
+                </div>
+                <div className="workflow-guidance-steps">
+                  {workflowGuidanceSteps.map((step) => (
+                    <button
+                      key={`${step.step}-${step.title}`}
+                      type="button"
+                      className={
+                        step.target === recommendedWorkflowTarget && !step.ready
+                          ? 'workflow-guidance-step workflow-guidance-step-active'
+                          : step.ready
+                            ? 'workflow-guidance-step workflow-guidance-step-ready'
+                            : 'workflow-guidance-step'
+                      }
+                      onClick={() => setActiveWorkspace(step.target)}
+                      aria-label={`Open ${step.title} step`}
+                    >
+                      <span className="workflow-step-status">{step.status}</span>
+                      <strong>
+                        {step.step}. {step.title}
+                      </strong>
+                      <small>{step.detail}</small>
+                    </button>
+                  ))}
+                </div>
+              </section>
               <section className="overview-actions">
                 <div className="overview-action-copy">
                   <p className="eyebrow">Recommended flow</p>

frontend/src/styles/app.css

@@ -835,6 +835,62 @@ section li strong + div {
   align-self: stretch;
 }
 
+.workflow-guidance-panel {
+  display: grid;
+  gap: 0.72rem;
+  border-left: 4px solid #2563eb;
+  background: linear-gradient(180deg, #ffffff, #f7fbf8);
+}
+
+.workflow-guidance-panel .panel-title-row {
+  margin-bottom: 0;
+}
+
+.workflow-guidance-steps {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+  gap: 0.55rem;
+}
+
+.workflow-guidance-step {
+  display: grid;
+  align-content: start;
+  gap: 0.28rem;
+  min-height: 5.35rem;
+  border-color: var(--line);
+  padding: 0.62rem 0.68rem;
+  background: #ffffff;
+  text-align: left;
+  box-shadow: none;
+}
+
+.workflow-guidance-step small {
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.workflow-guidance-step-active {
+  border-color: rgba(15, 118, 110, 0.46);
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
+}
+
+.workflow-guidance-step-ready {
+  border-color: rgba(21, 128, 61, 0.28);
+  background: #f2fbf5;
+}
+
+.workflow-step-status {
+  color: var(--muted);
+  font-size: 0.68rem;
+  font-weight: 850;
+  letter-spacing: 0.05em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
 .overview-actions {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);