phase cv 0

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

@@ -2,12 +2,14 @@
 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'
+import type { FrameBBox, FrameOverlay } 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'
+  /** Debug overlay layers passed from parent (editor mode) */
+  overlays?: FrameOverlay[]
 }>()
 
 const imageSrc = ref('')
@@ -19,6 +21,7 @@ const stageStatus = ref<Record<string, string>>({})
 const activeToggles = ref<Set<string>>(new Set())
 
 const STAGE_TABS = [
+  { key: 'detect_edges', label: 'Edges', color: '#00bcd4' },
   { key: 'detect_objects', label: 'YOLO', color: '#f5a623' },
   { key: 'preprocess', label: 'Prep', color: '#e0e0e0' },
   { key: 'run_ocr', label: 'OCR', color: '#ff8c42' },
@@ -166,7 +169,7 @@ function hasData(key: string): boolean {
         </button>
       </div>
       <div class="frame-content">
-        <FrameRenderer :image-src="imageSrc" :boxes="visibleBoxes" />
+        <FrameRenderer :image-src="imageSrc" :boxes="visibleBoxes" :overlays="overlays" />
       </div>
     </div>
   </Panel>