phase 3

ui/detection-app/src/App.vue

@@ -2,10 +2,10 @@
 import { ref } from 'vue'
 import { SSEDataSource, Panel, LayoutGrid } from 'mpr-ui-framework'
 import 'mpr-ui-framework/src/tokens.css'
-import type { LogEvent, StatsUpdate } from './types/sse-contract'
+import LogPanel from './panels/LogPanel.vue'
+import type { StatsUpdate } from './types/sse-contract'
 
 const jobId = ref(new URLSearchParams(window.location.search).get('job') || 'test-job')
-const logs = ref<LogEvent[]>([])
 const stats = ref<StatsUpdate | null>(null)
 const status = ref<'idle' | 'live' | 'processing' | 'error'>('idle')
 
@@ -15,11 +15,6 @@ const source = new SSEDataSource({
   eventTypes: ['graph_update', 'stats_update', 'frame_update', 'detection', 'log', 'job_complete', 'waiting'],
 })
 
-source.on<LogEvent>('log', (e) => {
-  logs.value.push(e)
-  if (logs.value.length > 200) logs.value.shift()
-})
-
 source.on<StatsUpdate>('stats_update', (e) => {
   stats.value = e
 })
@@ -62,17 +57,7 @@ source.connect()
         <div v-else class="empty">Waiting for stats...</div>
       </Panel>
 
-      <Panel title="Log" :status="status">
-        <div class="log-scroll">
-          <div v-for="(log, i) in logs" :key="i" class="log-line" :class="log.level.toLowerCase()">
-            <span class="ts">{{ log.ts }}</span>
-            <span class="level">{{ log.level }}</span>
-            <span class="stage">{{ log.stage }}</span>
-            <span class="msg">{{ log.msg }}</span>
-          </div>
-          <div v-if="logs.length === 0" class="empty">Waiting for events...</div>
-        </div>
-      </Panel>
+      <LogPanel :source="source" :status="status" />
     </LayoutGrid>
   </div>
 </template>
@@ -133,25 +118,5 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
 .stat .label { display: block; color: var(--text-dim); font-size: var(--font-size-sm); margin-bottom: var(--space-1); }
 .stat .value { font-size: 20px; font-weight: 600; }
 
-.log-scroll {
-  max-height: 500px;
-  overflow-y: auto;
-}
-
-.log-line {
-  display: flex;
-  gap: var(--space-2);
-  padding: 2px 0;
-  font-size: 12px;
-  line-height: 1.5;
-}
-.log-line .ts { color: var(--text-dim); min-width: 80px; }
-.log-line .level { min-width: 56px; font-weight: 600; }
-.log-line .stage { color: var(--status-processing); min-width: 120px; }
-.log-line.info .level { color: var(--status-live); }
-.log-line.warning .level { color: var(--status-escalating); }
-.log-line.error .level { color: var(--status-error); }
-.log-line.debug .level { color: var(--text-dim); }
-
 .empty { color: var(--text-dim); padding: var(--space-6); text-align: center; }
 </style>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Panel } from 'mpr-ui-framework'
+import LogRenderer from 'mpr-ui-framework/src/renderers/LogRenderer.vue'
+import type { LogEntry } from 'mpr-ui-framework/src/renderers/LogRenderer.vue'
+import type { DataSource } from 'mpr-ui-framework'
+import type { LogEvent } from '../types/sse-contract'
+
+const props = defineProps<{
+  source: DataSource
+  status?: 'idle' | 'live' | 'processing' | 'error'
+}>()
+
+const entries = ref<LogEntry[]>([])
+
+props.source.on<LogEvent>('log', (e) => {
+  entries.value.push({
+    level: e.level,
+    stage: e.stage,
+    msg: e.msg,
+    ts: e.ts,
+  })
+})
+</script>
+
+<template>
+  <Panel title="Log" :status="status">
+    <LogRenderer :entries="entries" />
+  </Panel>
+</template>