phase 5

ui/detection-app/src/App.vue

@@ -4,6 +4,7 @@ import { SSEDataSource, Panel, LayoutGrid } from 'mpr-ui-framework'
 import 'mpr-ui-framework/src/tokens.css'
 import LogPanel from './panels/LogPanel.vue'
 import FunnelPanel from './panels/FunnelPanel.vue'
+import PipelineGraphPanel from './panels/PipelineGraphPanel.vue'
 import type { StatsUpdate } from './types/sse-contract'
 
 const jobId = ref(new URLSearchParams(window.location.search).get('job') || 'test-job')
@@ -60,6 +61,8 @@ source.connect()
 
       <FunnelPanel :source="source" :status="status" />
 
+      <PipelineGraphPanel :source="source" :status="status" />
+
       <LogPanel :source="source" :status="status" />
     </LayoutGrid>
   </div>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+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'
+
+const PIPELINE_NODES = [
+  'extract_frames', 'filter_scenes', 'detect_objects', 'run_ocr',
+  'match_brands', 'escalate_vlm', 'escalate_cloud', 'compile_report',
+]
+
+const props = defineProps<{
+  source: DataSource
+  status?: 'idle' | 'live' | 'processing' | 'error'
+}>()
+
+const nodes = ref<GraphNode[]>(
+  PIPELINE_NODES.map((id) => ({ id, status: 'pending' }))
+)
+
+props.source.on<{ nodes: GraphNode[] }>('graph_update', (e) => {
+  nodes.value = e.nodes
+})
+</script>
+
+<template>
+  <Panel title="Pipeline" :status="status">
+    <GraphRenderer :nodes="nodes" />
+  </Panel>
+</template>