phase 12

ui/framework/src/renderers/FrameRenderer.vue

@@ -8,6 +8,10 @@ export interface FrameBBox {
   h: number
   confidence: number
   label: string
+  resolved_brand?: string | null
+  source?: string | null
+  stage?: string | null
+  ocr_text?: string | null
 }
 
 const props = defineProps<{
@@ -46,27 +50,37 @@ function draw() {
       const bw = box.w * scale
       const bh = box.h * scale
 
-      // Box outline
-      ctx.strokeStyle = confidenceColor(box.confidence)
+      const color = sourceColor(box)
+      const resolved = box.resolved_brand || box.ocr_text
+
+      // Box outline only — no labels, no percentages
+      ctx.strokeStyle = color
       ctx.lineWidth = 2
+      if (!resolved) {
+        ctx.setLineDash([4, 3])
+      }
       ctx.strokeRect(bx, by, bw, bh)
-
-      // Label background
-      const label = `${box.label} ${(box.confidence * 100).toFixed(0)}%`
-      ctx.font = '11px var(--font-mono)'
-      const metrics = ctx.measureText(label)
-      const labelH = 16
-      ctx.fillStyle = confidenceColor(box.confidence)
-      ctx.fillRect(bx, by - labelH, metrics.width + 8, labelH)
-
-      // Label text
-      ctx.fillStyle = '#000'
-      ctx.fillText(label, bx + 4, by - 4)
+      ctx.setLineDash([])
     }
   }
   img.src = `data:image/jpeg;base64,${props.imageSrc}`
 }
 
+const SOURCE_COLORS: Record<string, string> = {
+  yolo: '#f5a623',       // yellow — raw detection
+  ocr: '#ff8c42',        // orange — text extracted
+  ocr_matched: '#3ecf8e', // green — brand resolved
+  local_vlm: '#4f9cf9',  // blue — VLM resolved
+  cloud_llm: '#a78bfa',  // purple — cloud resolved
+  unresolved: '#e05252',  // red — nothing matched
+}
+
+function sourceColor(box: FrameBBox): string {
+  if (box.resolved_brand) return SOURCE_COLORS.ocr_matched
+  if (box.source && box.source in SOURCE_COLORS) return SOURCE_COLORS[box.source]
+  return confidenceColor(box.confidence)
+}
+
 function confidenceColor(conf: number): string {
   if (conf >= 0.7) return 'var(--conf-high)'
   if (conf >= 0.4) return 'var(--conf-mid)'