phase 6

ui/detection-app/src/App.vue

@@ -5,6 +5,7 @@ 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 FramePanel from './panels/FramePanel.vue'
 import type { StatsUpdate } from './types/sse-contract'
 
 const jobId = ref(new URLSearchParams(window.location.search).get('job') || 'test-job')
@@ -41,7 +42,7 @@ source.connect()
       <span class="job-id">job: {{ jobId }}</span>
     </header>
 
-    <LayoutGrid :columns="2" :rows="2" gap="var(--space-2)">
+    <LayoutGrid :columns="3" :rows="2" gap="var(--space-2)">
       <Panel title="Stats" :status="status">
         <div class="stats" v-if="stats">
           <div class="stat" v-for="s in [
@@ -61,6 +62,8 @@ source.connect()
 
       <FunnelPanel :source="source" :status="status" />
 
+      <FramePanel :source="source" :status="status" />
+
       <PipelineGraphPanel :source="source" :status="status" />
 
       <LogPanel :source="source" :status="status" />

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } 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'
+import type { DataSource } from 'mpr-ui-framework'
+
+const props = defineProps<{
+  source: DataSource
+  status?: 'idle' | 'live' | 'processing' | 'error'
+}>()
+
+const imageSrc = ref('')
+const boxes = ref<FrameBBox[]>([])
+
+props.source.on<{
+  frame_ref: number
+  timestamp: number
+  jpeg_b64: string
+  boxes: FrameBBox[]
+}>('frame_update', (e) => {
+  imageSrc.value = e.jpeg_b64
+  boxes.value = e.boxes
+})
+</script>
+
+<template>
+  <Panel title="Frame Viewer" :status="status">
+    <FrameRenderer :image-src="imageSrc" :boxes="boxes" />
+  </Panel>
+</template>