phase 10

ui/detection-app/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { SSEDataSource, Panel, LayoutGrid } from 'mpr-ui-framework'
+import { SSEDataSource, Panel, ResizeHandle } from 'mpr-ui-framework'
 import 'mpr-ui-framework/src/tokens.css'
 import LogPanel from './panels/LogPanel.vue'
 import FunnelPanel from './panels/FunnelPanel.vue'
@@ -9,10 +9,11 @@ import FramePanel from './panels/FramePanel.vue'
 import BrandTablePanel from './panels/BrandTablePanel.vue'
 import TimelinePanel from './panels/TimelinePanel.vue'
 import CostStatsPanel from './panels/CostStatsPanel.vue'
-import type { StatsUpdate } from './types/sse-contract'
+import type { StatsUpdate, RunContext } from './types/sse-contract'
 
 const jobId = ref(new URLSearchParams(window.location.search).get('job') || 'test-job')
 const stats = ref<StatsUpdate | null>(null)
+const runContext = ref<RunContext | null>(null)
 const status = ref<'idle' | 'live' | 'processing' | 'error'>('idle')
 
 const source = new SSEDataSource({
@@ -23,8 +24,41 @@ const source = new SSEDataSource({
 
 source.on<StatsUpdate>('stats_update', (e) => {
   stats.value = e
+  // Capture run context from first event that carries it
+  if (!runContext.value && e.run_id) {
+    runContext.value = {
+      run_id: (e as any).run_id,
+      parent_job_id: (e as any).parent_job_id,
+      run_type: (e as any).run_type ?? 'initial',
+    }
+  }
 })
 
+// Resizable splits
+const pipelineWidth = ref(320)
+const detectionsFlex = ref(3)  // ratio for detections vs stats
+const viewerHeight = ref(240)
+const timelineFlex = ref(1)
+const tableFlex = ref(1)
+
+function onPipelineResize(delta: number) {
+  pipelineWidth.value = Math.max(200, Math.min(500, pipelineWidth.value + delta))
+}
+
+function onViewerResize(delta: number) {
+  viewerHeight.value = Math.max(120, Math.min(400, viewerHeight.value + delta))
+}
+
+function onDetectionsResize(delta: number) {
+  detectionsFlex.value = Math.max(1, Math.min(6, detectionsFlex.value + delta * 0.01))
+}
+
+function onTimelineResize(delta: number) {
+  const shift = delta * 0.02
+  timelineFlex.value = Math.max(0.3, Math.min(3, timelineFlex.value + shift))
+  tableFlex.value = Math.max(0.3, Math.min(3, tableFlex.value - shift))
+}
+
 const statusMap: Record<string, 'idle' | 'live' | 'processing' | 'error'> = {
   idle: 'idle',
   connecting: 'processing',
@@ -42,41 +76,70 @@ source.connect()
     <header>
       <h1>Detection Pipeline</h1>
       <span class="status-badge" :class="status">{{ status }}</span>
+      <span v-if="runContext" class="run-info">
+        {{ runContext.run_type }} · run: {{ runContext.run_id }}
+      </span>
       <span class="job-id">job: {{ jobId }}</span>
     </header>
 
-    <LayoutGrid :columns="3" :rows="3" gap="var(--space-2)">
-      <Panel title="Stats" :status="status">
-        <div class="stats" v-if="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: 'Cloud calls', value: stats.cloud_llm_calls },
-            { label: 'Cost', value: `$${stats.estimated_cloud_cost_usd.toFixed(4)}` },
-          ]" :key="s.label">
-            <span class="label">{{ s.label }}</span>
-            <span class="value">{{ s.value }}</span>
+    <div class="main-layout">
+      <!-- Left column: Pipeline control (full height) -->
+      <div class="pipeline-col" :style="{ width: pipelineWidth + 'px' }">
+        <PipelineGraphPanel :source="source" :status="status" />
+      </div>
+      <ResizeHandle direction="horizontal" @resize="onPipelineResize" />
+
+      <!-- Right area: interactive panels -->
+      <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>
+          </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 v-else class="empty">Waiting for stats...</div>
-      </Panel>
-
-      <FunnelPanel :source="source" :status="status" />
-
-      <FramePanel :source="source" :status="status" />
-
-      <PipelineGraphPanel :source="source" :status="status" />
-
-      <BrandTablePanel :source="source" :status="status" />
-
-      <TimelinePanel :source="source" :status="status" />
-
-      <CostStatsPanel :source="source" :status="status" />
+      </div>
+    </div>
 
+    <!-- Bottom: Log (full width) -->
+    <div class="log-row">
       <LogPanel :source="source" :status="status" />
-    </LayoutGrid>
+    </div>
   </div>
 </template>
 
@@ -92,10 +155,11 @@ body {
 
 .app {
   height: 100vh;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
   padding: var(--space-4);
   gap: var(--space-2);
+  overflow: hidden;
 }
 
 header {
@@ -120,21 +184,110 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
 .status-badge.live { background: var(--status-live); color: #000; }
 .status-badge.error { background: var(--status-error); color: #000; }
 
+.run-info {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
 .job-id { color: var(--text-dim); font-size: var(--font-size-sm); margin-left: auto; }
 
-.stats {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+/* Main layout: pipeline left, content right — both same height */
+.main-layout {
+  display: flex;
   gap: var(--space-2);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.pipeline-col {
+  flex-shrink: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.pipeline-col > * { flex: 1; }
+
+.content-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Content rows */
+.viewer-row {
+  display: flex;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+.viewer-row > * { flex: 1; overflow: hidden; }
+
+/* Detections (75%) + Stats (25%) side by side, bottom-aligned with pipeline */
+.detections-stats-row {
+  display: flex;
+  gap: var(--space-2);
+  flex: 1;
+  min-height: 0;
+}
+
+.detections-col {
+  flex: 3;
+  min-width: 0;
+  display: flex;
+}
+.detections-col > * { flex: 1; display: flex; flex-direction: column; }
+
+.stats-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 200px;
+}
+.stats-col > * { flex: 1; }
+
+.detections-stack {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.timeline-section {
+  min-height: 60px;
+  overflow: auto;
+}
+
+.table-section {
+  min-height: 60px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* Pipeline stats list */
+.pipeline-stats {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
 }
 
 .stat {
-  background: var(--surface-2);
-  border-radius: var(--panel-radius);
-  padding: var(--space-3);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--space-1) 0;
+}
+
+.stat .label { color: var(--text-dim); font-size: var(--font-size-sm); }
+.stat .value { font-weight: 600; }
+
+/* Log: full width bottom, fixed height */
+.log-row {
+  flex-shrink: 0;
+  height: 160px;
+  overflow: hidden;
 }
-.stat .label { display: block; color: var(--text-dim); font-size: var(--font-size-sm); margin-bottom: var(--space-1); }
-.stat .value { font-size: 20px; font-weight: 600; }
 
 .empty { color: var(--text-dim); padding: var(--space-6); text-align: center; }
 </style>

ui/detection-app/src/panels/BrandTablePanel.vue

@@ -8,6 +8,7 @@ import type { DataSource } from 'mpr-ui-framework'
 const props = defineProps<{
   source: DataSource
   status?: 'idle' | 'live' | 'processing' | 'error'
+  embedded?: boolean
 }>()
 
 const columns: TableColumn[] = [
@@ -45,7 +46,7 @@ function onSort(key: string) {
 </script>
 
 <template>
-  <Panel title="Detections" :status="status">
+  <Panel v-if="!embedded" title="Detections" :status="status">
     <TableRenderer
       :columns="columns"
       :rows="rows"
@@ -54,4 +55,12 @@ function onSort(key: string) {
       @sort="onSort"
     />
   </Panel>
+  <TableRenderer
+    v-else
+    :columns="columns"
+    :rows="rows"
+    :sort-key="sortKey"
+    :sort-dir="sortDir"
+    @sort="onSort"
+  />
 </template>

ui/detection-app/src/panels/CostStatsPanel.vue

@@ -7,6 +7,7 @@ import type { StatsUpdate, Detection } from '../types/sse-contract'
 const props = defineProps<{
   source: DataSource
   status?: 'idle' | 'live' | 'processing' | 'error'
+  embedded?: boolean
 }>()
 
 const stats = ref<StatsUpdate | null>(null)
@@ -71,7 +72,7 @@ const metrics = computed<Metric[]>(() => {
 </script>
 
 <template>
-  <Panel title="Cost & Stats" :status="status">
+  <Panel v-if="!embedded" title="Cost & Stats" :status="status">
     <div class="cost-stats" v-if="stats">
       <div class="metric" v-for="m in metrics" :key="m.label">
         <span class="label">{{ m.label }}</span>
@@ -81,38 +82,59 @@ const metrics = computed<Metric[]>(() => {
     </div>
     <div v-else class="empty">Waiting for stats...</div>
   </Panel>
+  <div v-else class="cost-stats" v-show="stats">
+    <div class="metric" v-for="m in metrics" :key="m.label">
+      <span class="label">{{ m.label }}</span>
+      <span class="value" :style="m.color ? { color: m.color } : {}">{{ m.value }}</span>
+      <span class="sub" v-if="m.sub">{{ m.sub }}</span>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .cost-stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--space-3);
-  padding: var(--space-3);
+  gap: var(--space-2);
+  padding: var(--space-2);
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
 }
 
 .metric {
   background: var(--surface-2);
   border-radius: var(--panel-radius);
-  padding: var(--space-3);
+  padding: var(--space-2);
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
+  gap: 2px;
+  overflow: hidden;
+  min-width: 0;
 }
 
 .label {
   font-size: var(--font-size-sm);
   color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .value {
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .sub {
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .empty {

ui/detection-app/src/panels/TimelinePanel.vue

@@ -7,6 +7,7 @@ import type { Detection } from '../types/sse-contract'
 const props = defineProps<{
   source: DataSource
   status?: 'idle' | 'live' | 'processing' | 'error'
+  embedded?: boolean
 }>()
 
 interface TimelineEntry {
@@ -45,6 +46,20 @@ const maxTime = computed(() => {
   return Math.max(...entries.value.map((e) => e.timestamp + e.duration)) * 1.1
 })
 
+// Ruler ticks — nice intervals based on duration
+const rulerTicks = computed(() => {
+  const max = maxTime.value
+  const intervals = [1, 2, 5, 10, 15, 30, 60, 120, 300]
+  const targetTicks = 8
+  const rawStep = max / targetTicks
+  const step = intervals.find((i) => i >= rawStep) || Math.ceil(rawStep / 60) * 60
+  const ticks: number[] = []
+  for (let t = 0; t <= max; t += step) {
+    ticks.push(t)
+  }
+  return ticks
+})
+
 const sourceColor: Record<string, string> = {
   ocr: '#3ecf8e',
   local_vlm: '#f5a623',
@@ -67,8 +82,53 @@ function barStyle(entry: TimelineEntry) {
 </script>
 
 <template>
-  <Panel title="Detection Timeline" :status="status">
+  <Panel v-if="!embedded" title="Detection Timeline" :status="status">
     <div class="timeline" v-if="brands.length > 0">
+      <div class="ruler">
+        <span class="ruler-label" />
+        <div class="ruler-track">
+          <span
+            v-for="t in rulerTicks" :key="t"
+            class="ruler-tick"
+            :style="{ left: (t / maxTime) * 100 + '%' }"
+          >{{ t }}s</span>
+        </div>
+      </div>
+      <div class="rows">
+        <div class="row" v-for="brand in brands" :key="brand">
+          <span class="brand-label">{{ brand }}</span>
+          <div class="track">
+            <div
+              v-for="(entry, i) in entries.filter((e) => e.brand === brand)"
+              :key="i"
+              class="bar"
+              :style="barStyle(entry)"
+              :title="`${entry.brand} — ${entry.source} (${(entry.confidence * 100).toFixed(0)}%) @ ${entry.timestamp.toFixed(1)}s`"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="legend">
+        <span v-for="(color, source) in sourceColor" :key="source" class="legend-item">
+          <span class="legend-dot" :style="{ background: color }" />
+          {{ source }}
+        </span>
+      </div>
+    </div>
+    <div v-else class="empty">Waiting for detections...</div>
+  </Panel>
+  <div v-else class="timeline" v-show="brands.length > 0">
+    <div class="ruler">
+      <span class="ruler-label" />
+      <div class="ruler-track">
+        <span
+          v-for="t in rulerTicks" :key="t"
+          class="ruler-tick"
+          :style="{ left: (t / maxTime) * 100 + '%' }"
+        >{{ t }}s</span>
+      </div>
+    </div>
+    <div class="rows">
       <div class="row" v-for="brand in brands" :key="brand">
         <span class="brand-label">{{ brand }}</span>
         <div class="track">
@@ -81,20 +141,8 @@ function barStyle(entry: TimelineEntry) {
           />
         </div>
       </div>
-      <div class="time-axis">
-        <span>0s</span>
-        <span>{{ (maxTime / 2).toFixed(0) }}s</span>
-        <span>{{ maxTime.toFixed(0) }}s</span>
-      </div>
-      <div class="legend">
-        <span v-for="(color, source) in sourceColor" :key="source" class="legend-item">
-          <span class="legend-dot" :style="{ background: color }" />
-          {{ source }}
-        </span>
-      </div>
     </div>
-    <div v-else class="empty">Waiting for detections...</div>
-  </Panel>
+  </div>
 </template>
 
 <style scoped>
@@ -102,9 +150,54 @@ function barStyle(entry: TimelineEntry) {
   padding: var(--space-2);
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
   height: 100%;
-  overflow-y: auto;
+  overflow: auto;
+}
+
+.ruler {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--space-2);
+  flex-shrink: 0;
+  height: 20px;
+  margin-bottom: var(--space-1);
+}
+
+.ruler-label {
+  width: 100px;
+  flex-shrink: 0;
+}
+
+.ruler-track {
+  flex: 1;
+  position: relative;
+  height: 100%;
+  border-bottom: 1px solid var(--surface-3);
+}
+
+.ruler-tick {
+  position: absolute;
+  bottom: 0;
+  transform: translateX(-50%);
+  font-size: 9px;
+  color: var(--text-dim);
+  padding-bottom: 2px;
+}
+
+.ruler-tick::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 50%;
+  width: 1px;
+  height: 6px;
+  background: var(--surface-3);
+}
+
+.rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
 }
 
 .row {
@@ -141,15 +234,6 @@ function barStyle(entry: TimelineEntry) {
   min-width: 4px;
 }
 
-.time-axis {
-  display: flex;
-  justify-content: space-between;
-  padding-left: 108px;
-  font-size: 10px;
-  color: var(--text-dim);
-  margin-top: var(--space-1);
-}
-
 .legend {
   display: flex;
   gap: var(--space-3);

ui/detection-app/src/types/sse-contract.ts

@@ -95,3 +95,44 @@ export interface JobComplete {
   job_id: string;
   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';
+}
+
+// --- Checkpoint API types ---
+
+export interface CheckpointInfo {
+  stage: string;
+}
+
+export interface ReplayRequest {
+  job_id: string;
+  start_stage: string;
+  config_overrides?: Record<string, unknown>;
+}
+
+export interface ReplayResponse {
+  status: string;
+  job_id: string;
+  start_stage: string;
+  detections: number;
+  brands_found: number;
+}
+
+export interface RetryRequest {
+  job_id: string;
+  config_overrides?: Record<string, unknown>;
+  start_stage?: string;
+  schedule_seconds?: number;
+}
+
+export interface RetryResponse {
+  status: string;
+  task_id: string;
+  job_id: string;
+}