phase 12

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>