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>