From 49da927da00e8baea53788b43eb52827984ea363 Mon Sep 17 00:00:00 2001
From: buenosairesam <mariano@gotadeinfo.com>
Date: Sat, 28 Mar 2026 00:09:47 -0300
Subject: [PATCH] phase 5

---
 ui/detection-app/src/App.vue              | 346 ++++++++--------------
 ui/framework/src/components/SplitPane.vue | 155 ++++++++++
 ui/framework/src/index.ts                 |   1 +
 3 files changed, 272 insertions(+), 230 deletions(-)
 create mode 100644 ui/framework/src/components/SplitPane.vue

diff --git a/ui/detection-app/src/App.vue b/ui/detection-app/src/App.vue
index 4686056..b07be31 100644
--- a/ui/detection-app/src/App.vue
+++ b/ui/detection-app/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Panel, ResizeHandle } from 'mpr-ui-framework'
+import { Panel, ResizeHandle, SplitPane } from 'mpr-ui-framework'
 import 'mpr-ui-framework/src/tokens.css'
 import LogPanel from './panels/LogPanel.vue'
 import FunnelPanel from './panels/FunnelPanel.vue'
@@ -55,35 +55,6 @@ function onJobStarted(newJobId: string) {
   sseJobStarted(newJobId)
 }
 
-// Resizable splits
-const pipelineWidth = ref(320)
-const detectionsFlex = ref(3)
-const viewerHeight = ref(240)
-const timelineFlex = ref(1)
-const tableFlex = ref(1)
-const slidersWidth = ref(210)
-
-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))
-}
-
-function onSlidersResize(delta: number) {
-  slidersWidth.value = Math.max(210, Math.min(350, slidersWidth.value - delta))
-}
 </script>
 
 <template>
@@ -108,138 +79,134 @@ function onSlidersResize(delta: number) {
       <span class="job-id">job: {{ jobId || '—' }}</span>
     </header>
 
-    <div class="main-layout">
-      <!-- Left column: Pipeline control (full height) -->
-      <div class="pipeline-col" :style="{ width: pipelineWidth + 'px' }">
+    <SplitPane direction="horizontal" :initial-size="320" size-mode="px" :min="200" :max="500">
+      <template #first>
         <PipelineGraphPanel :source="source" :status="status" />
-      </div>
-      <ResizeHandle direction="horizontal" @resize="onPipelineResize" />
-
-      <!-- Right area: mode-dependent content -->
-      <div class="content-col">
+      </template>
+      <template #second>
 
         <!-- === NORMAL MODE === -->
-        <template v-if="pipeline.layoutMode === 'normal'">
-          <div class="viewer-row" :style="{ height: viewerHeight + 'px' }">
-            <FramePanel :source="source" :status="status" />
-            <FunnelPanel :source="source" :status="status" />
-          </div>
-          <ResizeHandle direction="vertical" @resize="onViewerResize" />
-
-          <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>
+        <SplitPane v-if="pipeline.layoutMode === 'normal'" direction="vertical" :initial-size="240" size-mode="px" :min="120" :max="400">
+          <template #first>
+            <SplitPane direction="horizontal" :initial-size="1" size-mode="ratio" :min="0.3" :max="3">
+              <template #first>
+                <FramePanel :source="source" :status="status" />
+              </template>
+              <template #second>
+                <FunnelPanel :source="source" :status="status" />
+              </template>
+            </SplitPane>
+          </template>
+          <template #second>
+            <SplitPane direction="horizontal" :initial-size="3" size-mode="ratio" :min="1" :max="6">
+              <template #first>
+                <Panel title="Detections" :status="status">
+                  <SplitPane direction="vertical" :initial-size="1" size-mode="ratio" :min="0.3" :max="3">
+                    <template #first>
+                      <TimelinePanel :source="source" :status="status" :embedded="true" />
+                    </template>
+                    <template #second>
+                      <BrandTablePanel :source="source" :status="status" :embedded="true" />
+                    </template>
+                  </SplitPane>
+                </Panel>
+              </template>
+              <template #second>
+                <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>
-              </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>
-        </template>
+              </template>
+            </SplitPane>
+          </template>
+        </SplitPane>
 
         <!-- === BBOX EDITOR MODE === -->
-        <template v-else-if="pipeline.layoutMode === 'bbox_editor'">
-          <div class="editor-layout">
-            <!-- Top: frame + sliders side by side -->
-            <div class="editor-top">
-              <div class="editor-frame">
+        <div v-else-if="pipeline.layoutMode === 'bbox_editor'" class="editor-layout">
+          <div class="editor-top">
+            <SplitPane direction="horizontal" :initial-size="210" size-mode="px" :min="210" :max="350" anchor="second">
+              <template #first>
                 <FramePanel :source="source" :status="status" :overlays="editorOverlays" :frame-image="currentFrameImage" :editor-boxes="editorBoxes" />
-              </div>
-              <ResizeHandle direction="horizontal" @resize="onSlidersResize" />
-              <div class="editor-sliders" :style="{ width: slidersWidth + 'px' }">
-                <StageConfigSliders
-                  v-if="pipeline.editorStage"
-                  :stage="pipeline.editorStage"
-                  :job-id="jobId"
-                  :frame-image="currentFrameImage"
-                  :frame-ref="currentFrameRef"
-                  :frames="checkpointFrames"
-                  :selection-start="stripSelStart"
-                  :selection-end="stripSelEnd"
-                  @replay-result="onReplayResult"
-                />
-              </div>
+              </template>
+              <template #second>
+                <div class="editor-sliders">
+                  <StageConfigSliders
+                    v-if="pipeline.editorStage"
+                    :stage="pipeline.editorStage"
+                    :job-id="jobId"
+                    :frame-image="currentFrameImage"
+                    :frame-ref="currentFrameRef"
+                    :frames="checkpointFrames"
+                    :selection-start="stripSelStart"
+                    :selection-end="stripSelEnd"
+                    @replay-result="onReplayResult"
+                  />
+                </div>
+              </template>
+            </SplitPane>
+          </div>
+
+          <FrameStrip
+            v-if="checkpointFrames.length > 0"
+            :frames="checkpointFrames"
+            :current-index="checkpointFrameIndex"
+            :selection-start="stripSelStart"
+            :selection-end="stripSelEnd"
+            @frame-click="setCheckpointFrame"
+            @selection-change="(s, e) => { stripSelStart.value = s; stripSelEndOverride.value = e }"
+          />
+
+          <div class="editor-bottom">
+            <div class="overlay-controls">
+              <template v-if="editorOverlays.length > 0">
+                <label v-for="(overlay, idx) in editorOverlays" :key="idx" class="overlay-toggle">
+                  <input type="checkbox" v-model="overlay.visible" />
+                  <span class="overlay-label">{{ overlay.label }}</span>
+                  <input
+                    type="range"
+                    min="0" max="1" step="0.05"
+                    :value="overlay.opacity ?? 0.5"
+                    @input="(e: Event) => overlay.opacity = Number((e.target as HTMLInputElement).value)"
+                    class="opacity-slider"
+                  />
+                  <span class="opacity-value">{{ Math.round((overlay.opacity ?? 0.5) * 100) }}%</span>
+                </label>
+              </template>
             </div>
+            <button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
+          </div>
+        </div>
 
-            <!-- Frame strip: thumbnails + selection handles -->
-            <FrameStrip
-              v-if="checkpointFrames.length > 0"
-              :frames="checkpointFrames"
-              :current-index="checkpointFrameIndex"
-              :selection-start="stripSelStart"
-              :selection-end="stripSelEnd"
-              @frame-click="setCheckpointFrame"
-              @selection-change="(s, e) => { stripSelStart.value = s; stripSelEndOverride.value = e }"
-            />
-
-            <!-- Bottom: debug overlays + close -->
-            <div class="editor-bottom">
-              <div class="overlay-controls">
-                <template v-if="editorOverlays.length > 0">
-                  <label v-for="(overlay, idx) in editorOverlays" :key="idx" class="overlay-toggle">
-                    <input type="checkbox" v-model="overlay.visible" />
-                    <span class="overlay-label">{{ overlay.label }}</span>
-                    <input
-                      type="range"
-                      min="0" max="1" step="0.05"
-                      :value="overlay.opacity ?? 0.5"
-                      @input="(e: Event) => overlay.opacity = Number((e.target as HTMLInputElement).value)"
-                      class="opacity-slider"
-                    />
-                    <span class="opacity-value">{{ Math.round((overlay.opacity ?? 0.5) * 100) }}%</span>
-                  </label>
-                </template>
-              </div>
+        <!-- === STAGE EDITOR MODE === -->
+        <Panel v-else-if="pipeline.layoutMode === 'stage_editor'" :title="`Stage Config — ${pipeline.editorStage?.replace(/_/g, ' ')}`" :status="status">
+          <div class="editor-placeholder">
+            <div class="editor-config">
+              <p>Stage: <strong>{{ pipeline.editorStage }}</strong></p>
+              <p>Config fields will be auto-generated from stage registry</p>
               <button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
             </div>
           </div>
-        </template>
-
-        <!-- === STAGE EDITOR MODE === -->
-        <template v-else-if="pipeline.layoutMode === 'stage_editor'">
-          <Panel :title="`Stage Config — ${pipeline.editorStage?.replace(/_/g, ' ')}`" :status="status">
-            <div class="editor-placeholder">
-              <div class="editor-config">
-                <p>Stage: <strong>{{ pipeline.editorStage }}</strong></p>
-                <p>Config fields will be auto-generated from stage registry</p>
-                <button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
-              </div>
-            </div>
-          </Panel>
-        </template>
+        </Panel>
 
         <!-- === SOURCE SELECTOR MODE === -->
-        <template v-else-if="pipeline.layoutMode === 'source_selector'">
-          <SourceSelector @job-started="onJobStarted" />
-        </template>
+        <SourceSelector v-else-if="pipeline.layoutMode === 'source_selector'" @job-started="onJobStarted" />
 
-      </div>
-    </div>
+      </template>
+    </SplitPane>
 
     <!-- Bottom bar: Log or Blob viewer depending on mode -->
     <div class="log-row">
@@ -328,54 +295,6 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
 
 .job-id { color: var(--text-dim); font-size: var(--font-size-sm); margin-left: auto; }
 
-/* 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;
@@ -385,24 +304,6 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
 }
 .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;
@@ -427,7 +328,7 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
 
 .empty { color: var(--text-dim); padding: var(--space-6); text-align: center; }
 
-/* Editor layout — frame maximized, sliders right, overlays bottom */
+/* Editor layout */
 .editor-layout {
   display: flex;
   flex-direction: column;
@@ -437,32 +338,17 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
 }
 
 .editor-top {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.editor-frame {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-  overflow: hidden;
-  display: flex;
-}
-.editor-frame > * {
   flex: 1;
   min-height: 0;
   overflow: hidden;
 }
 
 .editor-sliders {
-  flex-shrink: 0;
-  min-width: 210px;
   padding: var(--space-2);
   background: var(--surface-2);
   overflow-y: auto;
   overflow-x: hidden;
+  height: 100%;
 }
 
 .editor-bottom {
diff --git a/ui/framework/src/components/SplitPane.vue b/ui/framework/src/components/SplitPane.vue
new file mode 100644
index 0000000..af77b73
--- /dev/null
+++ b/ui/framework/src/components/SplitPane.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** Split direction */
+  direction?: 'horizontal' | 'vertical'
+  /** Initial size of the sized pane (px or flex ratio) */
+  initialSize?: number
+  /** Size mode: 'px' = sized pane fixed in pixels, 'ratio' = flex ratio */
+  sizeMode?: 'px' | 'ratio'
+  /** Which pane is sized: 'first' or 'second'. Default: 'first'. */
+  anchor?: 'first' | 'second'
+  /** Min size (px in px-mode, ratio in ratio-mode) */
+  min?: number
+  /** Max size (px in px-mode, ratio in ratio-mode) */
+  max?: number
+  /** Whether the divider is draggable */
+  resizable?: boolean
+}>(), {
+  direction: 'horizontal',
+  initialSize: 1,
+  sizeMode: 'ratio',
+  anchor: 'first',
+  min: 0.1,
+  max: 10,
+  resizable: true,
+})
+
+const size = ref(props.initialSize)
+const dragging = ref(false)
+let startPos = 0
+
+function onPointerDown(e: PointerEvent) {
+  if (!props.resizable) return
+  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
+  let delta = currentPos - startPos
+  startPos = currentPos
+
+  // Dragging right/down grows first pane, shrinks second.
+  // If anchor is 'second', invert so dragging grows the second pane.
+  if (props.anchor === 'second') delta = -delta
+
+  if (props.sizeMode === 'px') {
+    size.value = Math.max(props.min, Math.min(props.max, size.value + delta))
+  } else {
+    const scale = props.direction === 'horizontal' ? 0.01 : 0.02
+    size.value = Math.max(props.min, Math.min(props.max, size.value + delta * scale))
+  }
+}
+
+function onPointerUp() {
+  dragging.value = false
+}
+
+const isHorizontal = computed(() => props.direction === 'horizontal')
+
+const sizedStyle = computed(() => {
+  if (props.sizeMode === 'px') {
+    return isHorizontal.value
+      ? { width: size.value + 'px', flexShrink: '0' }
+      : { height: size.value + 'px', flexShrink: '0' }
+  }
+  return { flex: String(size.value) }
+})
+
+const flexStyle = computed(() => ({ flex: '1' }))
+
+const firstStyle = computed(() => props.anchor === 'first' ? sizedStyle.value : flexStyle.value)
+const secondStyle = computed(() => props.anchor === 'second' ? sizedStyle.value : flexStyle.value)
+</script>
+
+<template>
+  <div class="split-pane" :class="[direction]">
+    <div class="split-first" :style="firstStyle">
+      <slot name="first" />
+    </div>
+    <div
+      v-if="resizable"
+      class="split-divider"
+      :class="[direction, { dragging }]"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+    />
+    <div class="split-second" :style="secondStyle">
+      <slot name="second" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.split-pane {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.split-pane.horizontal {
+  flex-direction: row;
+}
+
+.split-pane.vertical {
+  flex-direction: column;
+}
+
+.split-first,
+.split-second {
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* Children must fill their pane */
+.split-first > :deep(*),
+.split-second > :deep(*) {
+  width: 100%;
+  height: 100%;
+}
+
+.split-divider {
+  flex-shrink: 0;
+  background: transparent;
+  transition: background 0.15s;
+  touch-action: none;
+  z-index: 10;
+}
+
+.split-divider:hover,
+.split-divider.dragging {
+  background: var(--text-dim);
+}
+
+.split-divider.horizontal {
+  width: 4px;
+  cursor: col-resize;
+  margin: 0 -2px;
+}
+
+.split-divider.vertical {
+  height: 4px;
+  cursor: row-resize;
+  margin: -2px 0;
+}
+</style>
diff --git a/ui/framework/src/index.ts b/ui/framework/src/index.ts
index 26d4de0..82f4ac5 100644
--- a/ui/framework/src/index.ts
+++ b/ui/framework/src/index.ts
@@ -8,6 +8,7 @@ export { useDataSource } from './composables/useDataSource'
 export { default as Panel } from './components/Panel.vue'
 export { default as LayoutGrid } from './components/LayoutGrid.vue'
 export { default as ResizeHandle } from './components/ResizeHandle.vue'
+export { default as SplitPane } from './components/SplitPane.vue'
 
 // Renderers
 export { default as LogRenderer } from './renderers/LogRenderer.vue'