phase 10

ui/detection-app/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { SSEDataSource, Panel, LayoutGrid } from 'mpr-ui-framework'
+import { SSEDataSource, Panel, ResizeHandle } from 'mpr-ui-framework'
 import 'mpr-ui-framework/src/tokens.css'
 import LogPanel from './panels/LogPanel.vue'
 import FunnelPanel from './panels/FunnelPanel.vue'
@@ -9,10 +9,11 @@ import FramePanel from './panels/FramePanel.vue'
 import BrandTablePanel from './panels/BrandTablePanel.vue'
 import TimelinePanel from './panels/TimelinePanel.vue'
 import CostStatsPanel from './panels/CostStatsPanel.vue'
-import type { StatsUpdate } from './types/sse-contract'
+import type { StatsUpdate, RunContext } from './types/sse-contract'
 
 const jobId = ref(new URLSearchParams(window.location.search).get('job') || 'test-job')
 const stats = ref<StatsUpdate | null>(null)
+const runContext = ref<RunContext | null>(null)
 const status = ref<'idle' | 'live' | 'processing' | 'error'>('idle')
 
 const source = new SSEDataSource({
@@ -23,8 +24,41 @@ const source = new SSEDataSource({
 
 source.on<StatsUpdate>('stats_update', (e) => {
   stats.value = e
+  // Capture run context from first event that carries it
+  if (!runContext.value && e.run_id) {
+    runContext.value = {
+      run_id: (e as any).run_id,
+      parent_job_id: (e as any).parent_job_id,
+      run_type: (e as any).run_type ?? 'initial',
+    }
+  }
 })
 
+// Resizable splits
+const pipelineWidth = ref(320)
+const detectionsFlex = ref(3)  // ratio for detections vs stats
+const viewerHeight = ref(240)
+const timelineFlex = ref(1)
+const tableFlex = ref(1)
+
+function onPipelineResize(delta: number) {
+  pipelineWidth.value = Math.max(200, Math.min(500, pipelineWidth.value + delta))
+}
+
+function onViewerResize(delta: number) {
+  viewerHeight.value = Math.max(120, Math.min(400, viewerHeight.value + delta))
+}
+
+function onDetectionsResize(delta: number) {
+  detectionsFlex.value = Math.max(1, Math.min(6, detectionsFlex.value + delta * 0.01))
+}
+
+function onTimelineResize(delta: number) {
+  const shift = delta * 0.02
+  timelineFlex.value = Math.max(0.3, Math.min(3, timelineFlex.value + shift))
+  tableFlex.value = Math.max(0.3, Math.min(3, tableFlex.value - shift))
+}
+
 const statusMap: Record<string, 'idle' | 'live' | 'processing' | 'error'> = {
   idle: 'idle',
   connecting: 'processing',
@@ -42,41 +76,70 @@ source.connect()
     <header>
       <h1>Detection Pipeline</h1>
       <span class="status-badge" :class="status">{{ status }}</span>
+      <span v-if="runContext" class="run-info">
+        {{ runContext.run_type }} · run: {{ runContext.run_id }}
+      </span>
       <span class="job-id">job: {{ jobId }}</span>
     </header>
 
-    <LayoutGrid :columns="3" :rows="3" gap="var(--space-2)">
-      <Panel title="Stats" :status="status">
-        <div class="stats" v-if="stats">
-          <div class="stat" v-for="s in [
-            { label: 'Frames', value: stats.frames_extracted },
-            { label: 'After filter', value: stats.frames_after_scene_filter },
-            { label: 'Regions', value: stats.regions_detected },
-            { label: 'OCR resolved', value: stats.regions_resolved_by_ocr },
-            { label: 'Cloud calls', value: stats.cloud_llm_calls },
-            { label: 'Cost', value: `$${stats.estimated_cloud_cost_usd.toFixed(4)}` },
-          ]" :key="s.label">
-            <span class="label">{{ s.label }}</span>
-            <span class="value">{{ s.value }}</span>
+    <div class="main-layout">
+      <!-- Left column: Pipeline control (full height) -->
+      <div class="pipeline-col" :style="{ width: pipelineWidth + 'px' }">
+        <PipelineGraphPanel :source="source" :status="status" />
+      </div>
+      <ResizeHandle direction="horizontal" @resize="onPipelineResize" />
+
+      <!-- Right area: interactive panels -->
+      <div class="content-col">
+        <!-- Row 1: Frame viewer + Funnel -->
+        <div class="viewer-row" :style="{ height: viewerHeight + 'px' }">
+          <FramePanel :source="source" :status="status" />
+          <FunnelPanel :source="source" :status="status" />
+        </div>
+        <ResizeHandle direction="vertical" @resize="onViewerResize" />
+
+        <!-- Row 2: Detections + Stats side by side -->
+        <div class="detections-stats-row">
+          <div class="detections-col" :style="{ flex: detectionsFlex }">
+            <Panel title="Detections" :status="status">
+              <div class="detections-stack">
+                <div class="timeline-section" :style="{ flex: timelineFlex }">
+                  <TimelinePanel :source="source" :status="status" :embedded="true" />
+                </div>
+                <ResizeHandle direction="vertical" @resize="onTimelineResize" />
+                <div class="table-section" :style="{ flex: tableFlex }">
+                  <BrandTablePanel :source="source" :status="status" :embedded="true" />
+                </div>
+              </div>
+            </Panel>
+          </div>
+          <ResizeHandle direction="horizontal" @resize="onDetectionsResize" />
+          <div class="stats-col">
+            <Panel title="Pipeline" :status="status">
+              <div class="pipeline-stats">
+                <div class="stat" v-for="s in [
+                  { label: 'Frames', value: stats?.frames_extracted ?? '—' },
+                  { label: 'After filter', value: stats?.frames_after_scene_filter ?? '—' },
+                  { label: 'Regions', value: stats?.regions_detected ?? '—' },
+                  { label: 'OCR resolved', value: stats?.regions_resolved_by_ocr ?? '—' },
+                  { label: 'VLM escalated', value: stats?.regions_escalated_to_local_vlm ?? '—' },
+                  { label: 'Cloud escalated', value: stats?.regions_escalated_to_cloud_llm ?? '—' },
+                ]" :key="s.label">
+                  <span class="label">{{ s.label }}</span>
+                  <span class="value">{{ s.value }}</span>
+                </div>
+              </div>
+            </Panel>
+            <CostStatsPanel :source="source" :status="status" />
           </div>
         </div>
-        <div v-else class="empty">Waiting for stats...</div>
-      </Panel>
-
-      <FunnelPanel :source="source" :status="status" />
-
-      <FramePanel :source="source" :status="status" />
-
-      <PipelineGraphPanel :source="source" :status="status" />
-
-      <BrandTablePanel :source="source" :status="status" />
-
-      <TimelinePanel :source="source" :status="status" />
-
-      <CostStatsPanel :source="source" :status="status" />
+      </div>
+    </div>
 
+    <!-- Bottom: Log (full width) -->
+    <div class="log-row">
       <LogPanel :source="source" :status="status" />
-    </LayoutGrid>
+    </div>
   </div>
 </template>
 
@@ -92,10 +155,11 @@ body {
 
 .app {
   height: 100vh;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
   padding: var(--space-4);
   gap: var(--space-2);
+  overflow: hidden;
 }
 
 header {
@@ -120,21 +184,110 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
 .status-badge.live { background: var(--status-live); color: #000; }
 .status-badge.error { background: var(--status-error); color: #000; }
 
+.run-info {
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
 .job-id { color: var(--text-dim); font-size: var(--font-size-sm); margin-left: auto; }
 
-.stats {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+/* Main layout: pipeline left, content right — both same height */
+.main-layout {
+  display: flex;
   gap: var(--space-2);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.pipeline-col {
+  flex-shrink: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.pipeline-col > * { flex: 1; }
+
+.content-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Content rows */
+.viewer-row {
+  display: flex;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+.viewer-row > * { flex: 1; overflow: hidden; }
+
+/* Detections (75%) + Stats (25%) side by side, bottom-aligned with pipeline */
+.detections-stats-row {
+  display: flex;
+  gap: var(--space-2);
+  flex: 1;
+  min-height: 0;
+}
+
+.detections-col {
+  flex: 3;
+  min-width: 0;
+  display: flex;
+}
+.detections-col > * { flex: 1; display: flex; flex-direction: column; }
+
+.stats-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 200px;
+}
+.stats-col > * { flex: 1; }
+
+.detections-stack {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.timeline-section {
+  min-height: 60px;
+  overflow: auto;
+}
+
+.table-section {
+  min-height: 60px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* Pipeline stats list */
+.pipeline-stats {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
 }
 
 .stat {
-  background: var(--surface-2);
-  border-radius: var(--panel-radius);
-  padding: var(--space-3);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--space-1) 0;
+}
+
+.stat .label { color: var(--text-dim); font-size: var(--font-size-sm); }
+.stat .value { font-weight: 600; }
+
+/* Log: full width bottom, fixed height */
+.log-row {
+  flex-shrink: 0;
+  height: 160px;
+  overflow: hidden;
 }
-.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; }
 
 .empty { color: var(--text-dim); padding: var(--space-6); text-align: center; }
 </style>

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

@@ -8,6 +8,7 @@ import type { DataSource } from 'mpr-ui-framework'
 const props = defineProps<{
   source: DataSource
   status?: 'idle' | 'live' | 'processing' | 'error'
+  embedded?: boolean
 }>()
 
 const columns: TableColumn[] = [
@@ -45,7 +46,7 @@ function onSort(key: string) {
 </script>
 
 <template>
-  <Panel title="Detections" :status="status">
+  <Panel v-if="!embedded" title="Detections" :status="status">
     <TableRenderer
       :columns="columns"
       :rows="rows"
@@ -54,4 +55,12 @@ function onSort(key: string) {
       @sort="onSort"
     />
   </Panel>
+  <TableRenderer
+    v-else
+    :columns="columns"
+    :rows="rows"
+    :sort-key="sortKey"
+    :sort-dir="sortDir"
+    @sort="onSort"
+  />
 </template>

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

@@ -7,6 +7,7 @@ import type { StatsUpdate, Detection } from '../types/sse-contract'
 const props = defineProps<{
   source: DataSource
   status?: 'idle' | 'live' | 'processing' | 'error'
+  embedded?: boolean
 }>()
 
 const stats = ref<StatsUpdate | null>(null)
@@ -71,7 +72,7 @@ const metrics = computed<Metric[]>(() => {
 </script>
 
 <template>
-  <Panel title="Cost & Stats" :status="status">
+  <Panel v-if="!embedded" title="Cost & Stats" :status="status">
     <div class="cost-stats" v-if="stats">
       <div class="metric" v-for="m in metrics" :key="m.label">
         <span class="label">{{ m.label }}</span>
@@ -81,38 +82,59 @@ const metrics = computed<Metric[]>(() => {
     </div>
     <div v-else class="empty">Waiting for stats...</div>
   </Panel>
+  <div v-else class="cost-stats" v-show="stats">
+    <div class="metric" v-for="m in metrics" :key="m.label">
+      <span class="label">{{ m.label }}</span>
+      <span class="value" :style="m.color ? { color: m.color } : {}">{{ m.value }}</span>
+      <span class="sub" v-if="m.sub">{{ m.sub }}</span>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .cost-stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--space-3);
-  padding: var(--space-3);
+  gap: var(--space-2);
+  padding: var(--space-2);
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
 }
 
 .metric {
   background: var(--surface-2);
   border-radius: var(--panel-radius);
-  padding: var(--space-3);
+  padding: var(--space-2);
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
+  gap: 2px;
+  overflow: hidden;
+  min-width: 0;
 }
 
 .label {
   font-size: var(--font-size-sm);
   color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .value {
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .sub {
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .empty {

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

@@ -7,6 +7,7 @@ import type { Detection } from '../types/sse-contract'
 const props = defineProps<{
   source: DataSource
   status?: 'idle' | 'live' | 'processing' | 'error'
+  embedded?: boolean
 }>()
 
 interface TimelineEntry {
@@ -45,6 +46,20 @@ const maxTime = computed(() => {
   return Math.max(...entries.value.map((e) => e.timestamp + e.duration)) * 1.1
 })
 
+// Ruler ticks — nice intervals based on duration
+const rulerTicks = computed(() => {
+  const max = maxTime.value
+  const intervals = [1, 2, 5, 10, 15, 30, 60, 120, 300]
+  const targetTicks = 8
+  const rawStep = max / targetTicks
+  const step = intervals.find((i) => i >= rawStep) || Math.ceil(rawStep / 60) * 60
+  const ticks: number[] = []
+  for (let t = 0; t <= max; t += step) {
+    ticks.push(t)
+  }
+  return ticks
+})
+
 const sourceColor: Record<string, string> = {
   ocr: '#3ecf8e',
   local_vlm: '#f5a623',
@@ -67,8 +82,53 @@ function barStyle(entry: TimelineEntry) {
 </script>
 
 <template>
-  <Panel title="Detection Timeline" :status="status">
+  <Panel v-if="!embedded" title="Detection Timeline" :status="status">
     <div class="timeline" v-if="brands.length > 0">
+      <div class="ruler">
+        <span class="ruler-label" />
+        <div class="ruler-track">
+          <span
+            v-for="t in rulerTicks" :key="t"
+            class="ruler-tick"
+            :style="{ left: (t / maxTime) * 100 + '%' }"
+          >{{ t }}s</span>
+        </div>
+      </div>
+      <div class="rows">
+        <div class="row" v-for="brand in brands" :key="brand">
+          <span class="brand-label">{{ brand }}</span>
+          <div class="track">
+            <div
+              v-for="(entry, i) in entries.filter((e) => e.brand === brand)"
+              :key="i"
+              class="bar"
+              :style="barStyle(entry)"
+              :title="`${entry.brand} — ${entry.source} (${(entry.confidence * 100).toFixed(0)}%) @ ${entry.timestamp.toFixed(1)}s`"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="legend">
+        <span v-for="(color, source) in sourceColor" :key="source" class="legend-item">
+          <span class="legend-dot" :style="{ background: color }" />
+          {{ source }}
+        </span>
+      </div>
+    </div>
+    <div v-else class="empty">Waiting for detections...</div>
+  </Panel>
+  <div v-else class="timeline" v-show="brands.length > 0">
+    <div class="ruler">
+      <span class="ruler-label" />
+      <div class="ruler-track">
+        <span
+          v-for="t in rulerTicks" :key="t"
+          class="ruler-tick"
+          :style="{ left: (t / maxTime) * 100 + '%' }"
+        >{{ t }}s</span>
+      </div>
+    </div>
+    <div class="rows">
       <div class="row" v-for="brand in brands" :key="brand">
         <span class="brand-label">{{ brand }}</span>
         <div class="track">
@@ -81,20 +141,8 @@ function barStyle(entry: TimelineEntry) {
           />
         </div>
       </div>
-      <div class="time-axis">
-        <span>0s</span>
-        <span>{{ (maxTime / 2).toFixed(0) }}s</span>
-        <span>{{ maxTime.toFixed(0) }}s</span>
-      </div>
-      <div class="legend">
-        <span v-for="(color, source) in sourceColor" :key="source" class="legend-item">
-          <span class="legend-dot" :style="{ background: color }" />
-          {{ source }}
-        </span>
-      </div>
     </div>
-    <div v-else class="empty">Waiting for detections...</div>
-  </Panel>
+  </div>
 </template>
 
 <style scoped>
@@ -102,9 +150,54 @@ function barStyle(entry: TimelineEntry) {
   padding: var(--space-2);
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
   height: 100%;
-  overflow-y: auto;
+  overflow: auto;
+}
+
+.ruler {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--space-2);
+  flex-shrink: 0;
+  height: 20px;
+  margin-bottom: var(--space-1);
+}
+
+.ruler-label {
+  width: 100px;
+  flex-shrink: 0;
+}
+
+.ruler-track {
+  flex: 1;
+  position: relative;
+  height: 100%;
+  border-bottom: 1px solid var(--surface-3);
+}
+
+.ruler-tick {
+  position: absolute;
+  bottom: 0;
+  transform: translateX(-50%);
+  font-size: 9px;
+  color: var(--text-dim);
+  padding-bottom: 2px;
+}
+
+.ruler-tick::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 50%;
+  width: 1px;
+  height: 6px;
+  background: var(--surface-3);
+}
+
+.rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
 }
 
 .row {
@@ -141,15 +234,6 @@ function barStyle(entry: TimelineEntry) {
   min-width: 4px;
 }
 
-.time-axis {
-  display: flex;
-  justify-content: space-between;
-  padding-left: 108px;
-  font-size: 10px;
-  color: var(--text-dim);
-  margin-top: var(--space-1);
-}
-
 .legend {
   display: flex;
   gap: var(--space-3);

ui/detection-app/src/types/sse-contract.ts

@@ -95,3 +95,44 @@ export interface JobComplete {
   job_id: string;
   report: DetectionReportSummary | null;
 }
+
+// --- Run context (injected into all SSE events) ---
+
+export interface RunContext {
+  run_id: string;
+  parent_job_id: string;
+  run_type: 'initial' | 'replay' | 'retry';
+}
+
+// --- Checkpoint API types ---
+
+export interface CheckpointInfo {
+  stage: string;
+}
+
+export interface ReplayRequest {
+  job_id: string;
+  start_stage: string;
+  config_overrides?: Record<string, unknown>;
+}
+
+export interface ReplayResponse {
+  status: string;
+  job_id: string;
+  start_stage: string;
+  detections: number;
+  brands_found: number;
+}
+
+export interface RetryRequest {
+  job_id: string;
+  config_overrides?: Record<string, unknown>;
+  start_stage?: string;
+  schedule_seconds?: number;
+}
+
+export interface RetryResponse {
+  status: string;
+  task_id: string;
+  job_id: string;
+}

ui/framework/src/components/Panel.vue

@@ -64,8 +64,9 @@ defineProps<{
 
 .panel-body {
   flex: 1;
-  overflow: auto;
+  overflow: hidden;
   padding: var(--space-2);
+  min-height: 0;
 }
 
 .panel-overlay {

ui/framework/src/components/ResizeHandle.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  direction: 'horizontal' | 'vertical'
+}>()
+
+const emit = defineEmits<{
+  resize: [delta: number]
+}>()
+
+const dragging = ref(false)
+let startPos = 0
+
+function onPointerDown(e: PointerEvent) {
+  dragging.value = true
+  startPos = props.direction === 'horizontal' ? e.clientX : e.clientY
+  const el = e.target as HTMLElement
+  el.setPointerCapture(e.pointerId)
+}
+
+function onPointerMove(e: PointerEvent) {
+  if (!dragging.value) return
+  const currentPos = props.direction === 'horizontal' ? e.clientX : e.clientY
+  const delta = currentPos - startPos
+  startPos = currentPos
+  emit('resize', delta)
+}
+
+function onPointerUp() {
+  dragging.value = false
+}
+</script>
+
+<template>
+  <div
+    class="resize-handle"
+    :class="[direction, { dragging }]"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+  />
+</template>
+
+<style scoped>
+.resize-handle {
+  flex-shrink: 0;
+  background: transparent;
+  transition: background 0.15s;
+  touch-action: none;
+  z-index: 10;
+}
+
+.resize-handle:hover,
+.resize-handle.dragging {
+  background: var(--text-dim);
+}
+
+.resize-handle.horizontal {
+  width: 4px;
+  cursor: col-resize;
+  margin: 0 -2px;
+}
+
+.resize-handle.vertical {
+  height: 4px;
+  cursor: row-resize;
+  margin: -2px 0;
+}
+</style>

ui/framework/src/index.ts

@@ -7,6 +7,7 @@ export { useDataSource } from './composables/useDataSource'
 // Components
 export { default as Panel } from './components/Panel.vue'
 export { default as LayoutGrid } from './components/LayoutGrid.vue'
+export { default as ResizeHandle } from './components/ResizeHandle.vue'
 
 // Renderers
 export { default as LogRenderer } from './renderers/LogRenderer.vue'

ui/framework/src/renderers/TableRenderer.vue

@@ -76,6 +76,7 @@ const sorted = computed(() => {
 table {
   width: 100%;
   border-collapse: collapse;
+  table-layout: fixed;
 }
 
 th {
@@ -89,7 +90,6 @@ th {
   border-bottom: var(--panel-border);
   cursor: pointer;
   user-select: none;
-  white-space: nowrap;
 }
 
 th:hover {
@@ -104,7 +104,10 @@ th:hover {
 td {
   padding: var(--space-1) var(--space-3);
   border-bottom: 1px solid var(--surface-3);
-  white-space: nowrap;
+  white-space: normal;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 tr:hover td {

ui/framework/src/renderers/TimeSeriesRenderer.vue

@@ -22,6 +22,7 @@ const props = withDefaults(defineProps<{
 })
 
 const container = ref<HTMLElement | null>(null)
+const zoomed = ref(false)
 let chart: uPlot | null = null
 
 function buildOpts(): uPlot.Options {
@@ -40,25 +41,66 @@ function buildOpts(): uPlot.Options {
     height: container.value?.clientHeight ?? 200,
     series: seriesOpts,
     axes: [
-      { stroke: '#555568', grid: { stroke: '#2e2e3822' } },
-      { stroke: '#555568', grid: { stroke: '#2e2e3822' } },
+      {
+        stroke: '#555568',
+        grid: { stroke: '#2e2e3822' },
+        size: 40,
+        font: '10px monospace',
+        ticks: { size: 3 },
+      },
+      {
+        stroke: '#555568',
+        grid: { stroke: '#2e2e3822' },
+        size: 35,
+        font: '10px monospace',
+        ticks: { size: 3 },
+      },
     ],
     cursor: { show: true },
-    legend: { show: true },
+    legend: { show: true, live: false },
+    padding: [8, 8, 0, 0],
+    hooks: {
+      setScale: [(_self: uPlot, scaleKey: string) => {
+        if (scaleKey === 'x') zoomed.value = true
+      }],
+    },
   }
 }
 
+function resetZoom() {
+  if (!chart) return
+  const data = chart.data
+  if (data && data[0] && data[0].length > 0) {
+    const min = data[0][0]
+    const max = data[0][data[0].length - 1]
+    chart.setScale('x', { min, max })
+  }
+  zoomed.value = false
+}
+
+function getLegendHeight(): number {
+  if (!container.value) return 0
+  const legend = container.value.querySelector('.u-legend') as HTMLElement | null
+  return legend ? legend.offsetHeight : 0
+}
+
 function createChart() {
   if (!container.value) return
   if (chart) chart.destroy()
   chart = new uPlot(buildOpts(), props.data, container.value)
+  // Refit after legend renders
+  nextTick(() => resize())
 }
 
 function resize() {
   if (!chart || !container.value) return
+  const legendH = getLegendHeight()
+  const availableH = container.value.clientHeight
+  // uPlot height = canvas height (chart sets total = canvas + legend)
+  const chartH = Math.max(60, availableH - legendH)
   chart.setSize({
     width: container.value.clientWidth,
-    height: container.value.clientHeight,
+    height: chartH,
   })
 }
 
@@ -83,19 +125,74 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="container" class="timeseries-renderer" />
+  <div class="timeseries-wrapper">
+    <button v-if="zoomed" class="reset-zoom" @click="resetZoom" title="Reset zoom">⟲</button>
+    <div ref="container" class="timeseries-renderer" />
+  </div>
 </template>
 
 <style scoped>
+.timeseries-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.reset-zoom {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 20;
+  background: var(--surface-2);
+  border: 1px solid var(--surface-3);
+  border-radius: 4px;
+  color: var(--text-secondary);
+  font-size: 14px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.7;
+  transition: opacity 0.15s;
+}
+
+.reset-zoom:hover {
+  opacity: 1;
+  color: var(--text-primary);
+}
+
 .timeseries-renderer {
   width: 100%;
   height: 100%;
-  min-height: 150px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* uPlot creates a .u-wrap for canvas + a .u-legend below it */
+.timeseries-renderer :deep(.u-wrap) {
+  flex: 1;
+  min-height: 0;
+}
+
+.timeseries-renderer :deep(.u-legend) {
+  flex-shrink: 0;
 }
 
 .timeseries-renderer :deep(.u-legend) {
   font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
+  font-size: 10px;
   color: var(--text-secondary);
+  padding: 2px 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 8px;
+}
+
+.timeseries-renderer :deep(.u-legend .u-series) {
+  display: inline-flex;
+  padding: 0;
 }
 </style>