phase 5

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,39 +79,39 @@ function onSlidersResize(delta: number) {
       <span class="job-id">job: {{ jobId || '—' }}</span>
     </header>
 
-    <div class="main-layout">
+    <SplitPane direction="horizontal" :initial-size="320" size-mode="px" :min="200" :max="500">
-      <!-- Left column: Pipeline control (full height) -->
+      <template #first>
-      <div class="pipeline-col" :style="{ width: pipelineWidth + 'px' }">
         <PipelineGraphPanel :source="source" :status="status" />
-      </div>
+      </template>
-      <ResizeHandle direction="horizontal" @resize="onPipelineResize" />
+      <template #second>
-
-      <!-- Right area: mode-dependent content -->
-      <div class="content-col">
 
         <!-- === NORMAL MODE === -->
-        <template v-if="pipeline.layoutMode === 'normal'">
+        <SplitPane v-if="pipeline.layoutMode === 'normal'" direction="vertical" :initial-size="240" size-mode="px" :min="120" :max="400">
-          <div class="viewer-row" :style="{ height: viewerHeight + 'px' }">
+          <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" />
-          </div>
+              </template>
-          <ResizeHandle direction="vertical" @resize="onViewerResize" />
+            </SplitPane>
-
+          </template>
-          <div class="detections-stats-row">
+          <template #second>
-            <div class="detections-col" :style="{ flex: detectionsFlex }">
+            <SplitPane direction="horizontal" :initial-size="3" size-mode="ratio" :min="1" :max="6">
+              <template #first>
                 <Panel title="Detections" :status="status">
-                <div class="detections-stack">
+                  <SplitPane direction="vertical" :initial-size="1" size-mode="ratio" :min="0.3" :max="3">
-                  <div class="timeline-section" :style="{ flex: timelineFlex }">
+                    <template #first>
                       <TimelinePanel :source="source" :status="status" :embedded="true" />
-                  </div>
+                    </template>
-                  <ResizeHandle direction="vertical" @resize="onTimelineResize" />
+                    <template #second>
-                  <div class="table-section" :style="{ flex: tableFlex }">
                       <BrandTablePanel :source="source" :status="status" :embedded="true" />
-                  </div>
+                    </template>
-                </div>
+                  </SplitPane>
                 </Panel>
-            </div>
+              </template>
-            <ResizeHandle direction="horizontal" @resize="onDetectionsResize" />
+              <template #second>
                 <div class="stats-col">
                   <Panel title="Pipeline" :status="status">
                     <div class="pipeline-stats">
@@ -159,19 +130,20 @@ function onSlidersResize(delta: number) {
                   </Panel>
                   <CostStatsPanel :source="source" :status="status" />
                 </div>
-          </div>
               </template>
+            </SplitPane>
+          </template>
+        </SplitPane>
 
         <!-- === BBOX EDITOR MODE === -->
-        <template v-else-if="pipeline.layoutMode === 'bbox_editor'">
+        <div v-else-if="pipeline.layoutMode === 'bbox_editor'" class="editor-layout">
-          <div class="editor-layout">
-            <!-- Top: frame + sliders side by side -->
           <div class="editor-top">
-              <div class="editor-frame">
+            <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>
+              </template>
-              <ResizeHandle direction="horizontal" @resize="onSlidersResize" />
+              <template #second>
-              <div class="editor-sliders" :style="{ width: slidersWidth + 'px' }">
+                <div class="editor-sliders">
                   <StageConfigSliders
                     v-if="pipeline.editorStage"
                     :stage="pipeline.editorStage"
@@ -184,9 +156,10 @@ function onSlidersResize(delta: number) {
                     @replay-result="onReplayResult"
                   />
                 </div>
+              </template>
+            </SplitPane>
           </div>
 
-            <!-- Frame strip: thumbnails + selection handles -->
           <FrameStrip
             v-if="checkpointFrames.length > 0"
             :frames="checkpointFrames"
@@ -197,7 +170,6 @@ function onSlidersResize(delta: number) {
             @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">
@@ -218,11 +190,9 @@ function onSlidersResize(delta: number) {
             <button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
           </div>
         </div>
-        </template>
 
         <!-- === STAGE EDITOR MODE === -->
-        <template v-else-if="pipeline.layoutMode === 'stage_editor'">
+        <Panel v-else-if="pipeline.layoutMode === 'stage_editor'" :title="`Stage Config — ${pipeline.editorStage?.replace(/_/g, ' ')}`" :status="status">
-          <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>
@@ -231,15 +201,12 @@ function onSlidersResize(delta: number) {
             </div>
           </div>
         </Panel>
-        </template>
 
         <!-- === SOURCE SELECTOR MODE === -->
-        <template v-else-if="pipeline.layoutMode === 'source_selector'">
+        <SourceSelector v-else-if="pipeline.layoutMode === 'source_selector'" @job-started="onJobStarted" />
-          <SourceSelector @job-started="onJobStarted" />
-        </template>
 
-      </div>
+      </template>
-    </div>
+    </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 {

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>

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'