phase 12

2026-03-26 06:10:19 -03:00
parent 731964ca10
commit e27cb5bcc3
41 changed files with 2079 additions and 95 deletions
--- a/ui/detection-app/src/App.vue
+++ b/ui/detection-app/src/App.vue
@@ -10,6 +10,9 @@ import BrandTablePanel from './panels/BrandTablePanel.vue'
 import TimelinePanel from './panels/TimelinePanel.vue'
 import CostStatsPanel from './panels/CostStatsPanel.vue'
 import type { StatsUpdate, RunContext } from './types/sse-contract'
+import { usePipelineStore } from './stores/pipeline'
+
+const pipeline = usePipelineStore()

 const jobId = ref(new URLSearchParams(window.location.search).get('job') || 'test-job')
 const stats = ref<StatsUpdate | null>(null)
@@ -89,56 +92,99 @@ source.connect()
      </div>
      <ResizeHandle direction="horizontal" @resize="onPipelineResize" />

-      <!-- Right area: interactive panels -->
+      <!-- Right area: mode-dependent content -->
      <div class="content-col">
-        <!-- Row 1: Frame viewer + Funnel -->
-        <div class="viewer-row" :style="{ height: viewerHeight + 'px' }">
-          <FramePanel :source="source" :status="status" />
-          <FunnelPanel :source="source" :status="status" />
-        </div>
-        <ResizeHandle direction="vertical" @resize="onViewerResize" />

-        <!-- Row 2: Detections + Stats side by side -->
-        <div class="detections-stats-row">
-          <div class="detections-col" :style="{ flex: detectionsFlex }">
-            <Panel title="Detections" :status="status">
-              <div class="detections-stack">
-                <div class="timeline-section" :style="{ flex: timelineFlex }">
-                  <TimelinePanel :source="source" :status="status" :embedded="true" />
-                </div>
-                <ResizeHandle direction="vertical" @resize="onTimelineResize" />
-                <div class="table-section" :style="{ flex: tableFlex }">
-                  <BrandTablePanel :source="source" :status="status" :embedded="true" />
-                </div>
-              </div>
-            </Panel>
+        <!-- === NORMAL MODE === -->
+        <template v-if="pipeline.layoutMode === 'normal'">
+          <div class="viewer-row" :style="{ height: viewerHeight + 'px' }">
+            <FramePanel :source="source" :status="status" />
+            <FunnelPanel :source="source" :status="status" />
          </div>
-          <ResizeHandle direction="horizontal" @resize="onDetectionsResize" />
-          <div class="stats-col">
-            <Panel title="Pipeline" :status="status">
-              <div class="pipeline-stats">
-                <div class="stat" v-for="s in [
-                  { label: 'Frames', value: stats?.frames_extracted ?? '—' },
-                  { label: 'After filter', value: stats?.frames_after_scene_filter ?? '—' },
-                  { label: 'Regions', value: stats?.regions_detected ?? '—' },
-                  { label: 'OCR resolved', value: stats?.regions_resolved_by_ocr ?? '—' },
-                  { label: 'VLM escalated', value: stats?.regions_escalated_to_local_vlm ?? '—' },
-                  { label: 'Cloud escalated', value: stats?.regions_escalated_to_cloud_llm ?? '—' },
-                ]" :key="s.label">
-                  <span class="label">{{ s.label }}</span>
-                  <span class="value">{{ s.value }}</span>
+          <ResizeHandle direction="vertical" @resize="onViewerResize" />
+
+          <div class="detections-stats-row">
+            <div class="detections-col" :style="{ flex: detectionsFlex }">
+              <Panel title="Detections" :status="status">
+                <div class="detections-stack">
+                  <div class="timeline-section" :style="{ flex: timelineFlex }">
+                    <TimelinePanel :source="source" :status="status" :embedded="true" />
+                  </div>
+                  <ResizeHandle direction="vertical" @resize="onTimelineResize" />
+                  <div class="table-section" :style="{ flex: tableFlex }">
+                    <BrandTablePanel :source="source" :status="status" :embedded="true" />
+                  </div>
                </div>
-              </div>
-            </Panel>
-            <CostStatsPanel :source="source" :status="status" />
+              </Panel>
+            </div>
+            <ResizeHandle direction="horizontal" @resize="onDetectionsResize" />
+            <div class="stats-col">
+              <Panel title="Pipeline" :status="status">
+                <div class="pipeline-stats">
+                  <div class="stat" v-for="s in [
+                    { label: 'Frames', value: stats?.frames_extracted ?? '—' },
+                    { label: 'After filter', value: stats?.frames_after_scene_filter ?? '—' },
+                    { label: 'Regions', value: stats?.regions_detected ?? '—' },
+                    { label: 'OCR resolved', value: stats?.regions_resolved_by_ocr ?? '—' },
+                    { label: 'VLM escalated', value: stats?.regions_escalated_to_local_vlm ?? '—' },
+                    { label: 'Cloud escalated', value: stats?.regions_escalated_to_cloud_llm ?? '—' },
+                  ]" :key="s.label">
+                    <span class="label">{{ s.label }}</span>
+                    <span class="value">{{ s.value }}</span>
+                  </div>
+                </div>
+              </Panel>
+              <CostStatsPanel :source="source" :status="status" />
+            </div>
          </div>
-        </div>
+        </template>
+
+        <!-- === BBOX EDITOR MODE === -->
+        <template v-else-if="pipeline.layoutMode === 'bbox_editor'">
+          <Panel :title="`Region Editor — ${pipeline.editorStage?.replace(/_/g, ' ')}`" :status="status">
+            <div class="editor-placeholder">
+              <div class="editor-frame">
+                <FramePanel :source="source" :status="status" />
+              </div>
+              <div class="editor-tools">
+                <p>Stage: <strong>{{ pipeline.editorStage }}</strong></p>
+                <p>Draw polygons to define regions</p>
+                <button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
+              </div>
+            </div>
+          </Panel>
+        </template>
+
+        <!-- === STAGE EDITOR MODE === -->
+        <template v-else-if="pipeline.layoutMode === 'stage_editor'">
+          <Panel :title="`Stage Config — ${pipeline.editorStage?.replace(/_/g, ' ')}`" :status="status">
+            <div class="editor-placeholder">
+              <div class="editor-config">
+                <p>Stage: <strong>{{ pipeline.editorStage }}</strong></p>
+                <p>Config fields will be auto-generated from stage registry</p>
+                <button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
+              </div>
+            </div>
+          </Panel>
+        </template>
+
      </div>
    </div>

-    <!-- Bottom: Log (full width) -->
+    <!-- Bottom bar: Log or Blob viewer depending on mode -->
    <div class="log-row">
-      <LogPanel :source="source" :status="status" />
+      <template v-if="pipeline.layoutMode === 'bbox_editor'">
+        <Panel :title="`Blobs — ${pipeline.editorStage?.replace(/_/g, ' ')}`" :status="status">
+          <div class="blob-viewer">
+            <div class="blob-placeholder">
+              Blob viewer: crops, preprocessed images, OCR results for {{ pipeline.editorStage }}
+            </div>
+          </div>
+        </Panel>
+      </template>
+      <template v-else>
+        <LogPanel :source="source" :status="status" />
+      </template>
    </div>
  </div>
 </template>
@@ -290,4 +336,67 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
 }

 .empty { color: var(--text-dim); padding: var(--space-6); text-align: center; }
+
+/* Editor placeholders */
+.editor-placeholder {
+  display: flex;
+  height: 100%;
+  gap: var(--space-2);
+}
+
+.editor-frame {
+  flex: 1;
+  min-height: 0;
+}
+
+.editor-tools {
+  width: 200px;
+  flex-shrink: 0;
+  padding: var(--space-3);
+  background: var(--surface-2);
+  border-radius: var(--panel-radius);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.editor-config {
+  padding: var(--space-4);
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.editor-close {
+  background: var(--surface-3);
+  border: 1px solid var(--surface-3);
+  border-radius: 4px;
+  padding: var(--space-2) var(--space-3);
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  margin-top: auto;
+}
+
+.editor-close:hover {
+  background: var(--status-error);
+  color: #000;
+}
+
+.blob-viewer {
+  height: 100%;
+  overflow-x: auto;
+}
+
+.blob-placeholder {
+  padding: var(--space-4);
+  color: var(--text-dim);
+  text-align: center;
+  font-size: var(--font-size-sm);
+}
 </style>
--- a/ui/detection-app/src/main.ts
+++ b/ui/detection-app/src/main.ts
@@ -1,4 +1,7 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'

-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(createPinia())
+app.mount('#app')
--- a/ui/detection-app/src/panels/FramePanel.vue
+++ b/ui/detection-app/src/panels/FramePanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { Panel } from 'mpr-ui-framework'
 import FrameRenderer from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
 import type { FrameBBox } from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
@@ -11,8 +11,23 @@ const props = defineProps<{
 }>()

 const imageSrc = ref('')
-const boxes = ref<FrameBBox[]>([])

+// Per-stage box accumulation
+const stageBoxes = ref<Record<string, FrameBBox[]>>({})
+const stageStatus = ref<Record<string, string>>({})
+// Toggles — multiple can be active at once, all start ON
+const activeToggles = ref<Set<string>>(new Set())
+
+const STAGE_TABS = [
+  { key: 'detect_objects', label: 'YOLO', color: '#f5a623' },
+  { key: 'preprocess', label: 'Prep', color: '#e0e0e0' },
+  { key: 'run_ocr', label: 'OCR', color: '#ff8c42' },
+  { key: 'match_brands', label: 'Brands', color: '#3ecf8e' },
+  { key: 'escalate_vlm', label: 'VLM', color: '#4f9cf9' },
+  { key: 'escalate_cloud', label: 'Cloud', color: '#a78bfa' },
+]
+
+// Frame updates — store image, replace (not accumulate) boxes per frame
 props.source.on<{
  frame_ref: number
  timestamp: number
@@ -20,12 +35,230 @@ props.source.on<{
  boxes: FrameBBox[]
 }>('frame_update', (e) => {
  imageSrc.value = e.jpeg_b64
-  boxes.value = e.boxes
+
+  // Group incoming boxes by stage, replace previous for that stage
+  const incoming: Record<string, FrameBBox[]> = {}
+  for (const box of e.boxes) {
+    const stage = box.stage || 'detect_objects'
+    if (!incoming[stage]) incoming[stage] = []
+    incoming[stage].push(box)
+  }
+
+  for (const [stage, boxes] of Object.entries(incoming)) {
+    stageBoxes.value[stage] = boxes
+    ensureToggleOn(stage)
+  }
 })
+
+// Track stage status from graph updates
+props.source.on<{ nodes: { id: string; status: string }[] }>('graph_update', (e) => {
+  for (const node of e.nodes) {
+    stageStatus.value[node.id] = node.status
+  }
+})
+
+// Detection events also produce boxes
+props.source.on<{
+  brand: string
+  confidence: number
+  source: string
+  timestamp: number
+  frame_ref: number | null
+  bbox?: { x: number; y: number; w: number; h: number } | null
+}>('detection', (e) => {
+  if (!e.bbox) return
+
+  const stage = sourceToStage(e.source)
+  const box: FrameBBox = {
+    x: e.bbox.x,
+    y: e.bbox.y,
+    w: e.bbox.w,
+    h: e.bbox.h,
+    confidence: e.confidence,
+    label: e.brand,
+    resolved_brand: e.brand,
+    source: e.source,
+    stage: stage,
+  }
+
+  if (!stageBoxes.value[stage]) {
+    stageBoxes.value[stage] = []
+  }
+  stageBoxes.value[stage].push(box)
+  ensureToggleOn(stage)
+})
+
+function toggleStage(key: string) {
+  if (activeToggles.value.has(key)) {
+    activeToggles.value.delete(key)
+  } else {
+    activeToggles.value.add(key)
+  }
+  // Force reactivity
+  activeToggles.value = new Set(activeToggles.value)
+}
+
+function ensureToggleOn(stage: string) {
+  if (!activeToggles.value.has(stage)) {
+    activeToggles.value.add(stage)
+    activeToggles.value = new Set(activeToggles.value)
+  }
+}
+
+function sourceToStage(source: string): string {
+  const map: Record<string, string> = {
+    ocr: 'match_brands',
+    local_vlm: 'escalate_vlm',
+    cloud_llm: 'escalate_cloud',
+  }
+  return map[source] || 'match_brands'
+}
+
+// Filtered boxes — show all toggled-on stages
+const visibleBoxes = computed<FrameBBox[]>(() => {
+  const result: FrameBBox[] = []
+  for (const [stage, boxes] of Object.entries(stageBoxes.value)) {
+    if (activeToggles.value.has(stage)) {
+      result.push(...boxes)
+    }
+  }
+  return result
+})
+
+// Which toggles are visible (stage exists in pipeline)
+const visibleTabs = computed(() => {
+  return STAGE_TABS.filter((tab) => {
+    const status = stageStatus.value[tab.key]
+    return status !== undefined
+  })
+})
+
+// Whether a toggle has data (boxes available)
+function hasData(key: string): boolean {
+  return (stageBoxes.value[key]?.length || 0) > 0
+}
+
+
 </script>

 <template>
  <Panel title="Frame Viewer" :status="status">
-    <FrameRenderer :image-src="imageSrc" :boxes="boxes" />
+    <div class="frame-panel">
+      <div class="stage-toggles" v-if="visibleTabs.length > 0">
+        <button
+          v-for="tab in visibleTabs"
+          :key="tab.key"
+          :class="['stage-toggle', {
+            active: activeToggles.has(tab.key),
+            running: stageStatus[tab.key] === 'running',
+            done: stageStatus[tab.key] === 'done',
+            disabled: !hasData(tab.key),
+          }]"
+          :style="{ '--toggle-color': tab.color }"
+          :disabled="!hasData(tab.key)"
+          @click="toggleStage(tab.key)"
+        >
+          <span class="toggle-dot" />
+          {{ tab.label }}
+          <span class="toggle-count" v-if="stageBoxes[tab.key]?.length">
+            {{ stageBoxes[tab.key].length }}
+          </span>
+        </button>
+      </div>
+      <div class="frame-content">
+        <FrameRenderer :image-src="imageSrc" :boxes="visibleBoxes" />
+      </div>
+    </div>
  </Panel>
 </template>
+
+<style scoped>
+.frame-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.stage-toggles {
+  display: flex;
+  gap: 2px;
+  padding: 4px;
+  flex-shrink: 0;
+  overflow-x: auto;
+  background: var(--surface-2);
+  border-bottom: var(--panel-border);
+}
+
+.stage-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s;
+}
+
+.stage-toggle:hover {
+  color: var(--text-secondary);
+  background: var(--surface-3);
+}
+
+.stage-toggle.active {
+  color: var(--text-primary);
+  border-color: var(--toggle-color, var(--text-dim));
+  background: var(--surface-3);
+}
+
+.stage-toggle:not(.active) {
+  opacity: 0.5;
+}
+
+.stage-toggle:not(.active) .toggle-dot {
+  background: var(--text-dim);
+}
+
+.stage-toggle.disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.stage-toggle.disabled:hover {
+  background: transparent;
+  color: var(--text-dim);
+}
+
+.stage-toggle.running .toggle-dot {
+  animation: pulse 1s infinite;
+}
+
+.toggle-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--toggle-color, var(--text-dim));
+}
+
+.toggle-count {
+  background: var(--surface-1);
+  padding: 0 4px;
+  border-radius: 8px;
+  font-size: 9px;
+}
+
+.frame-content {
+  flex: 1;
+  min-height: 0;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+</style>
--- a/ui/detection-app/src/panels/PipelineGraphPanel.vue
+++ b/ui/detection-app/src/panels/PipelineGraphPanel.vue
@@ -4,10 +4,11 @@ import { Panel } from 'mpr-ui-framework'
 import GraphRenderer from 'mpr-ui-framework/src/renderers/GraphRenderer.vue'
 import type { GraphNode } from 'mpr-ui-framework/src/renderers/GraphRenderer.vue'
 import type { DataSource } from 'mpr-ui-framework'
+import { usePipelineStore } from '../stores/pipeline'

 const PIPELINE_NODES = [
-  'extract_frames', 'filter_scenes', 'detect_objects', 'run_ocr',
-  'match_brands', 'escalate_vlm', 'escalate_cloud', 'compile_report',
+  'extract_frames', 'filter_scenes', 'detect_objects', 'preprocess',
+  'run_ocr', 'match_brands', 'escalate_vlm', 'escalate_cloud', 'compile_report',
 ]

 const props = defineProps<{
@@ -15,6 +16,8 @@ const props = defineProps<{
  status?: 'idle' | 'live' | 'processing' | 'error'
 }>()

+const pipeline = usePipelineStore()
+
 const nodes = ref<GraphNode[]>(
  PIPELINE_NODES.map((id) => ({ id, status: 'pending' }))
 )
@@ -22,10 +25,22 @@ const nodes = ref<GraphNode[]>(
 props.source.on<{ nodes: GraphNode[] }>('graph_update', (e) => {
  nodes.value = e.nodes
 })
+
+function onOpenRegionEditor(stage: string) {
+  pipeline.openBBoxEditor(stage)
+}
+
+function onOpenStageEditor(stage: string) {
+  pipeline.openStageEditor(stage)
+}
 </script>

 <template>
  <Panel title="Pipeline" :status="status">
-    <GraphRenderer :nodes="nodes" />
+    <GraphRenderer
+      :nodes="nodes"
+      @open-region-editor="onOpenRegionEditor"
+      @open-stage-editor="onOpenStageEditor"
+    />
  </Panel>
 </template>
--- a/ui/detection-app/src/stores/config.ts
+++ b/ui/detection-app/src/stores/config.ts
@@ -0,0 +1,47 @@
+/**
+ * Config store — aggregated config from all panels.
+ *
+ * Panels write their own config slice (ocr, detection, etc.).
+ * Pipeline panel reads the full config and triggers replay.
+ * State shape defined in types/store-state.ts.
+ */
+
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { ConfigState, ConfigOverrides } from '../types/store-state'
+
+export const useConfigStore = defineStore('config', () => {
+  const current = ref<ConfigOverrides>({})
+  const pending = ref<ConfigOverrides>({})
+
+  const dirty = computed(() => JSON.stringify(pending.value) !== JSON.stringify(current.value))
+
+  function updatePending(section: keyof ConfigOverrides, values: Record<string, unknown>) {
+    pending.value = {
+      ...pending.value,
+      [section]: { ...(pending.value[section] as Record<string, unknown> || {}), ...values },
+    }
+  }
+
+  function apply() {
+    current.value = JSON.parse(JSON.stringify(pending.value))
+  }
+
+  function revert() {
+    pending.value = JSON.parse(JSON.stringify(current.value))
+  }
+
+  function loadFromServer(config: ConfigOverrides) {
+    current.value = config
+    pending.value = JSON.parse(JSON.stringify(config))
+  }
+
+  function getOverrides(): ConfigOverrides {
+    return JSON.parse(JSON.stringify(pending.value))
+  }
+
+  return {
+    current, pending, dirty,
+    updatePending, apply, revert, loadFromServer, getOverrides,
+  }
+})
--- a/ui/detection-app/src/stores/data.ts
+++ b/ui/detection-app/src/stores/data.ts
@@ -0,0 +1,40 @@
+/**
+ * Data store — latest SSE data, replaces inline refs in App.vue.
+ *
+ * The SSE DataSource writes here. Panels read from here.
+ * State shape defined in types/store-state.ts.
+ */
+
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { DataState } from '../types/store-state'
+import type { StatsUpdate, Detection } from '../types/sse-contract'
+
+export const useDataStore = defineStore('data', () => {
+  const stats = ref<StatsUpdate | null>(null)
+  const detections = ref<Detection[]>([])
+  const connectionStatus = ref<'idle' | 'connecting' | 'live' | 'error'>('idle')
+
+  function updateStats(s: StatsUpdate) {
+    stats.value = s
+  }
+
+  function addDetection(d: Detection) {
+    detections.value.push(d)
+  }
+
+  function setConnectionStatus(s: 'idle' | 'connecting' | 'live' | 'error') {
+    connectionStatus.value = s
+  }
+
+  function reset() {
+    stats.value = null
+    detections.value = []
+    connectionStatus.value = 'idle'
+  }
+
+  return {
+    stats, detections, connectionStatus,
+    updateStats, addDetection, setConnectionStatus, reset,
+  }
+})
--- a/ui/detection-app/src/stores/index.ts
+++ b/ui/detection-app/src/stores/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Store index — re-exports all stores.
+ *
+ * State shapes are in types/store-state.ts (the contract).
+ * These files are the Pinia bindings (the implementation).
+ * Swap Pinia for anything else by replacing these files,
+ * keeping the same function signatures.
+ */
+
+export { usePipelineStore } from './pipeline'
+export { useConfigStore } from './config'
+export { useSelectionStore } from './selection'
+export { useDataStore } from './data'
--- a/ui/detection-app/src/stores/pipeline.ts
+++ b/ui/detection-app/src/stores/pipeline.ts
@@ -0,0 +1,96 @@
+/**
+ * Pipeline store — run state, transport controls, checkpoint status.
+ *
+ * State shape defined in types/store-state.ts.
+ * This file is just the Pinia binding.
+ */
+
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { NodeState } from '../types/store-state'
+import type { CheckpointInfo } from '../types/sse-contract'
+
+export const usePipelineStore = defineStore('pipeline', () => {
+  const jobId = ref('')
+  const status = ref<string>('idle')
+  const nodes = ref<NodeState[]>([])
+  const currentStage = ref<string | null>(null)
+  const runId = ref<string | null>(null)
+  const parentJobId = ref<string | null>(null)
+  const runType = ref<string>('initial')
+  const checkpoints = ref<CheckpointInfo[]>([])
+  const error = ref<string | null>(null)
+
+  // Layout mode
+  const layoutMode = ref<string>('normal')  // normal | bbox_editor | stage_editor
+  const editorStage = ref<string | null>(null)  // which stage's editor is open
+
+  const isRunning = computed(() => status.value === 'running')
+  const isPaused = computed(() => status.value === 'paused')
+  const canReplay = computed(() => checkpoints.value.length > 0)
+  const isEditing = computed(() => layoutMode.value !== 'normal')
+
+  function setJob(id: string) {
+    jobId.value = id
+  }
+
+  function setStatus(s: string) {
+    status.value = s
+  }
+
+  function updateNodes(nodeList: NodeState[]) {
+    nodes.value = nodeList
+    const running = nodeList.find((n) => n.status === 'running')
+    currentStage.value = running?.id ?? null
+  }
+
+  function setRunContext(rid: string, parentId: string, rtype: string) {
+    runId.value = rid
+    parentJobId.value = parentId
+    runType.value = rtype
+  }
+
+  function setCheckpoints(list: CheckpointInfo[]) {
+    checkpoints.value = list
+  }
+
+  function setError(msg: string | null) {
+    error.value = msg
+    if (msg) status.value = 'error'
+  }
+
+  function openBBoxEditor(stage: string) {
+    layoutMode.value = 'bbox_editor'
+    editorStage.value = stage
+  }
+
+  function openStageEditor(stage: string) {
+    layoutMode.value = 'stage_editor'
+    editorStage.value = stage
+  }
+
+  function closeEditor() {
+    layoutMode.value = 'normal'
+    editorStage.value = null
+  }
+
+  function reset() {
+    status.value = 'idle'
+    layoutMode.value = 'normal'
+    editorStage.value = null
+    nodes.value = []
+    currentStage.value = null
+    runId.value = null
+    parentJobId.value = null
+    runType.value = 'initial'
+    error.value = null
+  }
+
+  return {
+    jobId, status, nodes, currentStage, runId, parentJobId, runType,
+    checkpoints, error, layoutMode, editorStage,
+    isRunning, isPaused, canReplay, isEditing,
+    setJob, setStatus, updateNodes, setRunContext, setCheckpoints, setError,
+    openBBoxEditor, openStageEditor, closeEditor, reset,
+  }
+})
--- a/ui/detection-app/src/stores/selection.ts
+++ b/ui/detection-app/src/stores/selection.ts
@@ -0,0 +1,59 @@
+/**
+ * Selection store — cross-panel selection state.
+ *
+ * When you click a detection in the table, the frame viewer highlights it.
+ * When you hover on the timeline, the crosshair syncs across charts.
+ * When you draw a bbox, it feeds into the config store.
+ *
+ * State shape defined in types/store-state.ts.
+ */
+
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { SelectionState } from '../types/store-state'
+import type { Detection } from '../types/sse-contract'
+
+export const useSelectionStore = defineStore('selection', () => {
+  const selectedFrame = ref<number | null>(null)
+  const selectedDetection = ref<Detection | null>(null)
+  const selectedBrand = ref<string | null>(null)
+  const hoveredTimestamp = ref<number | null>(null)
+  const bboxRegion = ref<{ x: number; y: number; w: number; h: number } | null>(null)
+
+  function selectFrame(seq: number | null) {
+    selectedFrame.value = seq
+  }
+
+  function selectDetection(det: Detection | null) {
+    selectedDetection.value = det
+    if (det) {
+      selectedBrand.value = det.brand
+      selectedFrame.value = det.frame_ref
+    }
+  }
+
+  function selectBrand(brand: string | null) {
+    selectedBrand.value = brand
+  }
+
+  function hoverTimestamp(ts: number | null) {
+    hoveredTimestamp.value = ts
+  }
+
+  function setBbox(region: { x: number; y: number; w: number; h: number } | null) {
+    bboxRegion.value = region
+  }
+
+  function clearAll() {
+    selectedFrame.value = null
+    selectedDetection.value = null
+    selectedBrand.value = null
+    hoveredTimestamp.value = null
+    bboxRegion.value = null
+  }
+
+  return {
+    selectedFrame, selectedDetection, selectedBrand, hoveredTimestamp, bboxRegion,
+    selectFrame, selectDetection, selectBrand, hoverTimestamp, setBbox, clearAll,
+  }
+})
--- a/ui/detection-app/src/types/sse-contract.ts
+++ b/ui/detection-app/src/types/sse-contract.ts
@@ -96,16 +96,12 @@ export interface JobComplete {
  report: DetectionReportSummary | null;
 }

-// --- Run context (injected into all SSE events) ---
-
 export interface RunContext {
  run_id: string;
  parent_job_id: string;
-  run_type: 'initial' | 'replay' | 'retry';
+  run_type: string;
 }

-// --- Checkpoint API types ---
-
 export interface CheckpointInfo {
  stage: string;
 }
@@ -113,7 +109,7 @@ export interface CheckpointInfo {
 export interface ReplayRequest {
  job_id: string;
  start_stage: string;
-  config_overrides?: Record<string, unknown>;
+  config_overrides: Record<string, unknown> | null;
 }

 export interface ReplayResponse {
@@ -126,9 +122,9 @@ export interface ReplayResponse {

 export interface RetryRequest {
  job_id: string;
-  config_overrides?: Record<string, unknown>;
-  start_stage?: string;
-  schedule_seconds?: number;
+  config_overrides: Record<string, unknown> | null;
+  start_stage: string;
+  schedule_seconds: number | null;
 }

 export interface RetryResponse {
--- a/ui/detection-app/src/types/store-state.ts
+++ b/ui/detection-app/src/types/store-state.ts
@@ -0,0 +1,82 @@
+/**
+ * TypeScript Types - GENERATED FILE
+ *
+ * Do not edit directly. Regenerate using modelgen.
+ */
+
+
+export interface NodeState {
+  id: string;
+  status: string;
+  has_checkpoint: boolean;
+  has_region_editor: boolean;
+  has_config_editor: boolean;
+}
+
+export interface PipelineState {
+  job_id: string;
+  status: string;
+  layout_mode: string;
+  editor_stage: string | null;
+  nodes: NodeState[];
+  current_stage: string | null;
+  run_id: string | null;
+  parent_job_id: string | null;
+  run_type: string;
+  error: string | null;
+}
+
+export interface DetectionConfigOverrides {
+  model_name: string | null;
+  confidence_threshold: number | null;
+  target_classes: string[] | null;
+}
+
+export interface OCRConfigOverrides {
+  languages: string[] | null;
+  min_confidence: number | null;
+}
+
+export interface ResolverConfigOverrides {
+  fuzzy_threshold: number | null;
+}
+
+export interface EscalationConfigOverrides {
+  vlm_min_confidence: number | null;
+  cloud_min_confidence: number | null;
+  cloud_provider: string | null;
+}
+
+export interface PreprocessingConfigOverrides {
+  binarize: boolean | null;
+  deskew: boolean | null;
+  contrast: boolean | null;
+}
+
+export interface ConfigOverrides {
+  detection: DetectionConfigOverrides | null;
+  ocr: OCRConfigOverrides | null;
+  resolver: ResolverConfigOverrides | null;
+  escalation: EscalationConfigOverrides | null;
+  preprocessing: PreprocessingConfigOverrides | null;
+}
+
+export interface ConfigState {
+  current: ConfigOverrides;
+  pending: ConfigOverrides;
+  dirty: boolean;
+}
+
+export interface BboxRegion {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface SelectionState {
+  selected_frame: number | null;
+  selected_brand: string | null;
+  hovered_timestamp: number | null;
+  bbox_region: BboxRegion | null;
+}