phase 1

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { Panel } from 'mpr-ui-framework'
 import FrameRenderer from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
 import type { FrameBBox, FrameOverlay } from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
@@ -10,9 +10,18 @@ const props = defineProps<{
   status?: 'idle' | 'live' | 'processing' | 'error'
   /** Debug overlay layers passed from parent (editor mode) */
   overlays?: FrameOverlay[]
+  /** Frame image from checkpoint (scenario mode) — overrides SSE */
+  frameImage?: string | null
+  /** Boxes from editor (local CV or server) — merged with SSE boxes */
+  editorBoxes?: import('mpr-ui-framework/src/renderers/FrameRenderer.vue').FrameBBox[]
 }>()
 
-const imageSrc = ref('')
+const imageSrc = ref(props.frameImage ?? '')
+
+// Sync prop → internal ref when checkpoint frame changes
+watch(() => props.frameImage, (v) => {
+  if (v) imageSrc.value = v
+})
 
 // Per-stage box accumulation
 const stageBoxes = ref<Record<string, FrameBBox[]>>({})
@@ -117,14 +126,19 @@ function sourceToStage(source: string): string {
   return map[source] || 'match_brands'
 }
 
-// Filtered boxes — show all toggled-on stages
+// Filtered boxes — show all toggled-on stages + editor boxes
 const visibleBoxes = computed<FrameBBox[]>(() => {
   const result: FrameBBox[] = []
+  // SSE boxes filtered by toggles
   for (const [stage, boxes] of Object.entries(stageBoxes.value)) {
     if (activeToggles.value.has(stage)) {
       result.push(...boxes)
     }
   }
+  // Editor boxes (from local CV or server) — always shown
+  if (props.editorBoxes?.length) {
+    result.push(...props.editorBoxes)
+  }
   return result
 })