Add tabbed workbench inspector

frontend/src/App.tsx

@@ -1,11 +1,11 @@
 import { useMemo, useState } from 'react'
 import './styles/app.css'
 import { ChangeDetectionPanel } from './components/analysis/ChangeDetectionPanel'
-import { DatasetDetailPanel } from './components/datasets/DatasetDetailPanel'
 import { DatasetPanel } from './components/datasets/DatasetPanel'
 import { DetectionLab } from './components/detection/DetectionLab'
 import { ExportCenter } from './components/exports/ExportCenter'
 import { ExportPreview } from './components/exports/ExportPreview'
+import { WorkbenchInspector } from './components/inspector/WorkbenchInspector'
 import { MapWorkspace } from './components/map/MapWorkspace'
 import { AreaPanel } from './components/project/AreaPanel'
 import { ProjectPanel } from './components/project/ProjectPanel'
@@ -690,60 +690,76 @@ function App(): JSX.Element {
         </main>
 
         <aside className="workbench-inspector" aria-label="Current selection inspector">
-          <DatasetDetailPanel
+          <WorkbenchInspector
+            selectedProject={selectedProject}
+            selectedArea={selectedArea}
+            selectedMapFeature={selectedMapFeature}
             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}
+            datasetsCount={datasets.length}
+            qualityChecks={qualityChecks}
+            exports={exports}
+            latestExport={latestExport}
+            detectionRuns={detectionRuns}
+            selectedDetectionRunId={selectedDetectionRunId}
+            detectionItems={detectionItems}
+            segmentationRuns={segmentationRuns}
+            selectedSegmentationRunId={selectedSegmentationRunId}
+            segmentationItems={segmentationItems}
+            datasetDetailProps={{
+              areas,
+              availableVectorTargets,
+              selectedDatasetId,
+              selectedDataset,
+              selectedDatasetSummary,
+              selectedRasterMetadata,
+              selectedRasterStats,
+              rasterPreview,
+              rasterUnavailableMessage,
+              selectedClipAreaId,
+              selectedIntersectTargetId,
+              rasterTileSize,
+              rasterTileOverlap,
+              rasterTileOutputName,
+              rasterReprojectCrs,
+              rasterReprojectResampling,
+              ndviNirBand,
+              ndviRedBand,
+              ndwiGreenBand,
+              ndwiNirBand,
+              ndbiSwirBand,
+              ndbiNirBand,
+              isRasterTileInputValid,
+              jobs,
+              loadingDatasetDetails,
+              datasetDetailError,
+              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>

frontend/src/components/datasets/DatasetDetailPanel.tsx

@@ -10,7 +10,7 @@ import type {
 import { RasterControls } from './RasterControls'
 import { VectorControls } from './VectorControls'
 
-interface DatasetDetailPanelProps {
+export interface DatasetDetailPanelProps {
   areas: AreaRead[]
   availableVectorTargets: DatasetCreateResponse[]
   selectedDatasetId: string | null
@@ -147,7 +147,7 @@ export function DatasetDetailPanel({
   onPickDerivedDataset,
 }: DatasetDetailPanelProps) {
   return (
-    <section>
+    <section className="dataset-detail-panel">
       <h2>Dataset details</h2>
       {selectedDatasetId ? <p>Selected dataset: {selectedDatasetId}</p> : <p>No dataset selected</p>}
       {selectedDataset ? (

frontend/src/components/inspector/WorkbenchInspector.tsx

@@ -0,0 +1,186 @@
+import { useMemo, useState } from 'react'
+import type {
+  AreaRead,
+  DetectionRead,
+  DetectionRunRead,
+  ExportCreateResponse,
+  ExportRead,
+  ProjectRead,
+  QualityCheckRead,
+  SegmentationRead,
+  SegmentationRunRead,
+} from '../../types'
+import { DatasetDetailPanel, type DatasetDetailPanelProps } from '../datasets/DatasetDetailPanel'
+
+type InspectorTab = 'context' | 'dataset' | 'quality' | 'ai'
+
+interface WorkbenchInspectorProps {
+  selectedProject: ProjectRead | null
+  selectedArea: AreaRead | null
+  selectedMapFeature: GeoJSON.Feature | null
+  areas: AreaRead[]
+  datasetsCount: number
+  qualityChecks: QualityCheckRead[]
+  exports: ExportRead[]
+  latestExport: ExportCreateResponse | null
+  detectionRuns: DetectionRunRead[]
+  selectedDetectionRunId: string
+  detectionItems: DetectionRead[]
+  segmentationRuns: SegmentationRunRead[]
+  selectedSegmentationRunId: string
+  segmentationItems: SegmentationRead[]
+  datasetDetailProps: DatasetDetailPanelProps
+}
+
+function formatValue(value: string | number | null | undefined): string {
+  if (value === null || value === undefined || value === '') {
+    return 'n/a'
+  }
+  return String(value)
+}
+
+function InspectorField({ label, value }: { label: string; value: string | number | null | undefined }): JSX.Element {
+  return (
+    <div className="inspector-field">
+      <span>{label}</span>
+      <strong>{formatValue(value)}</strong>
+    </div>
+  )
+}
+
+export function WorkbenchInspector({
+  selectedProject,
+  selectedArea,
+  selectedMapFeature,
+  areas,
+  datasetsCount,
+  qualityChecks,
+  exports,
+  latestExport,
+  detectionRuns,
+  selectedDetectionRunId,
+  detectionItems,
+  segmentationRuns,
+  selectedSegmentationRunId,
+  segmentationItems,
+  datasetDetailProps,
+}: WorkbenchInspectorProps): JSX.Element {
+  const [activeTab, setActiveTab] = useState<InspectorTab>('context')
+  const selectedDetectionRun = useMemo(
+    () => detectionRuns.find((run) => run.id === selectedDetectionRunId) ?? null,
+    [detectionRuns, selectedDetectionRunId],
+  )
+  const selectedSegmentationRun = useMemo(
+    () => segmentationRuns.find((run) => run.id === selectedSegmentationRunId) ?? null,
+    [segmentationRuns, selectedSegmentationRunId],
+  )
+  const latestQualityCheck = qualityChecks[0] ?? null
+  const latestPersistedExport = exports[0] ?? null
+
+  const tabs: Array<{ key: InspectorTab; label: string }> = [
+    { key: 'context', label: 'Context' },
+    { key: 'dataset', label: 'Dataset' },
+    { key: 'quality', label: 'QA/Exports' },
+    { key: 'ai', label: 'AI Runs' },
+  ]
+
+  return (
+    <section className="workbench-inspector-panel" data-testid="workbench-inspector-panel">
+      <div className="inspector-header">
+        <div>
+          <p className="eyebrow">Inspector</p>
+          <h2>Selection details</h2>
+        </div>
+      </div>
+      <div className="inspector-tabs" role="tablist" aria-label="Inspector detail tabs">
+        {tabs.map((tab) => (
+          <button
+            key={tab.key}
+            type="button"
+            className={activeTab === tab.key ? 'inspector-tab inspector-tab-active' : 'inspector-tab'}
+            onClick={() => setActiveTab(tab.key)}
+            role="tab"
+            aria-selected={activeTab === tab.key}
+            data-testid={`inspector-tab-${tab.key}`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === 'context' ? (
+        <div className="inspector-tab-panel">
+          <div className="inspector-card">
+            <h3>Project context</h3>
+            <InspectorField label="Project" value={selectedProject?.name} />
+            <InspectorField label="Region" value={selectedProject?.region} />
+            <InspectorField label="Status" value={selectedProject?.status} />
+            <InspectorField label="AOIs" value={areas.length} />
+            <InspectorField label="Datasets" value={datasetsCount} />
+          </div>
+          <div className="inspector-card">
+            <h3>Active AOI</h3>
+            <InspectorField label="Name" value={selectedArea?.name} />
+            <InspectorField label="Area m2" value={selectedArea?.area_m2} />
+            <InspectorField label="CRS" value={selectedArea?.original_crs} />
+            <InspectorField label="Geometry" value={selectedArea?.geometry?.type} />
+          </div>
+          <div className="inspector-card">
+            <h3>Map feature</h3>
+            {selectedMapFeature ? (
+              <pre className="job-result">{JSON.stringify(selectedMapFeature.properties ?? {}, null, 2)}</pre>
+            ) : (
+              <p className="muted">No map feature selected.</p>
+            )}
+          </div>
+        </div>
+      ) : null}
+
+      {activeTab === 'dataset' ? (
+        <div className="inspector-tab-panel">
+          <DatasetDetailPanel {...datasetDetailProps} />
+        </div>
+      ) : null}
+
+      {activeTab === 'quality' ? (
+        <div className="inspector-tab-panel">
+          <div className="inspector-card">
+            <h3>Latest QA/QC</h3>
+            <InspectorField label="Check type" value={latestQualityCheck?.check_type} />
+            <InspectorField label="Status" value={latestQualityCheck?.status} />
+            <InspectorField label="Score" value={latestQualityCheck?.score} />
+            <InspectorField label="Metrics" value={latestQualityCheck?.metrics.length} />
+            <InspectorField label="Reference" value={latestQualityCheck?.reference_dataset_id} />
+          </div>
+          <div className="inspector-card">
+            <h3>Latest export</h3>
+            <InspectorField label="Created now" value={latestExport?.export_type} />
+            <InspectorField label="Persisted type" value={latestPersistedExport?.export_type} />
+            <InspectorField label="Status" value={latestPersistedExport?.status ?? latestExport?.status} />
+            <InspectorField label="Path" value={latestPersistedExport?.storage_path ?? latestExport?.path} />
+            <InspectorField label="Export count" value={exports.length} />
+          </div>
+        </div>
+      ) : null}
+
+      {activeTab === 'ai' ? (
+        <div className="inspector-tab-panel">
+          <div className="inspector-card">
+            <h3>Detection run</h3>
+            <InspectorField label="Selected run" value={selectedDetectionRunId} />
+            <InspectorField label="Status" value={selectedDetectionRun?.status} />
+            <InspectorField label="Model" value={selectedDetectionRun?.model_name} />
+            <InspectorField label="Detections loaded" value={detectionItems.length} />
+          </div>
+          <div className="inspector-card">
+            <h3>Segmentation run</h3>
+            <InspectorField label="Selected run" value={selectedSegmentationRunId} />
+            <InspectorField label="Status" value={selectedSegmentationRun?.status} />
+            <InspectorField label="Model" value={selectedSegmentationRun?.model_name} />
+            <InspectorField label="Segmentations loaded" value={segmentationItems.length} />
+          </div>
+        </div>
+      ) : null}
+    </section>
+  )
+}

frontend/src/styles/app.css

@@ -764,7 +764,7 @@ section th {
   max-height: 16rem;
 }
 
-.workbench-inspector h2 {
+.inspector-header h2 {
   position: sticky;
   top: 0;
   z-index: 2;
@@ -1121,6 +1121,106 @@ button.entity-card {
   grid-template-columns: 1fr;
 }
 
+.workbench-inspector-panel {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.inspector-header {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.inspector-header h2 {
+  margin-bottom: 0;
+}
+
+.inspector-tabs {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.35rem;
+  position: sticky;
+  top: 3.4rem;
+  z-index: 3;
+  border-bottom: 1px solid var(--line);
+  padding-bottom: 0.65rem;
+  background: #f8fbf9;
+}
+
+.inspector-tab {
+  min-height: 2.2rem;
+  padding: 0.38rem 0.42rem;
+  background: #ffffff;
+  box-shadow: none;
+  font-size: 0.78rem;
+  line-height: 1.2;
+}
+
+.inspector-tab-active {
+  border-color: rgba(15, 118, 110, 0.46);
+  background: var(--accent-soft);
+  color: var(--accent-strong);
+}
+
+.inspector-tab-panel {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.inspector-card {
+  display: grid;
+  gap: 0.55rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.8rem;
+  background: #ffffff;
+}
+
+.inspector-card h3 {
+  margin-top: 0;
+}
+
+.inspector-field {
+  display: grid;
+  gap: 0.16rem;
+  min-width: 0;
+  border-top: 1px solid var(--line);
+  padding-top: 0.5rem;
+}
+
+.inspector-field:first-of-type {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.inspector-field span {
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.inspector-field strong {
+  overflow: hidden;
+  font-size: 0.88rem;
+  line-height: 1.28;
+  text-overflow: ellipsis;
+}
+
+.workbench-inspector-panel .dataset-detail-panel {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.dataset-detail-panel > div,
+.dataset-detail-panel ul {
+  display: grid;
+  gap: 0.55rem;
+}
+
 @media (max-width: 1120px) {
   .workbench-layout {
     grid-template-columns: 12rem minmax(0, 1fr);