phase 2

ui/detection-app/src/App.vue

@@ -24,8 +24,10 @@ const logPanel = ref<{ clear: () => void } | null>(null)
 
 // SSE connection + pipeline status
 const {
-  jobId, stats, runContext, status, sseConnected, source,
-  stopPipeline, onJobStarted: sseJobStarted,
+  jobId, stats, runContext, status, paused, pauseAfterStage,
+  sseConnected, source,
+  stopPipeline, pausePipeline, resumePipeline, stepPipeline,
+  togglePauseAfterStage, onJobStarted: sseJobStarted,
 } = useSSEConnection()
 
 // Checkpoint frames + navigation
@@ -50,9 +52,9 @@ function setCheckpointFrame(index: number) {
 }
 
 // Wire job start to clear log panel
-function onJobStarted(newJobId: string) {
+function onJobStarted(newJobId: string, opts?: { pauseAfterStage?: boolean }) {
   logPanel.value?.clear()
-  sseJobStarted(newJobId)
+  sseJobStarted(newJobId, opts)
 }
 
 </script>
@@ -62,20 +64,52 @@ function onJobStarted(newJobId: string) {
     <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>
       <button class="header-btn" title="Select source" @click="pipeline.openSourceSelector()">
         <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
           <path d="M2 4h4l2 2h6v8H2V4z"/><path d="M2 4V2h12v2"/>
         </svg>
       </button>
-      <button
-        v-if="sseConnected && (status === 'live' || status === 'processing')"
-        class="header-btn stop-btn"
-        title="Stop pipeline"
-        @click="stopPipeline"
-      >■</button>
+
+      <!-- Transport controls — visible when a pipeline is running -->
+      <div v-if="sseConnected && (status === 'live' || status === 'processing' || paused)" class="transport">
+        <button
+          v-if="paused"
+          class="header-btn play-btn"
+          title="Resume"
+          @click="resumePipeline"
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><polygon points="2,1 11,6 2,11"/></svg>
+        </button>
+        <button
+          v-else
+          class="header-btn pause-btn"
+          title="Pause after current stage"
+          @click="pausePipeline"
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><rect x="2" y="1" width="3" height="10"/><rect x="7" y="1" width="3" height="10"/></svg>
+        </button>
+        <button
+          class="header-btn step-btn"
+          title="Run one stage"
+          @click="stepPipeline"
+          :disabled="!paused"
+        >
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><polygon points="1,1 7,6 1,11"/><rect x="8" y="1" width="2.5" height="10"/></svg>
+        </button>
+        <button
+          class="header-btn stop-btn"
+          title="Stop pipeline"
+          @click="stopPipeline"
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><rect width="10" height="10"/></svg>
+        </button>
+        <label class="pause-toggle" title="Pause after each stage">
+          <input type="checkbox" :checked="pauseAfterStage" @change="togglePauseAfterStage" />
+          <span>step</span>
+        </label>
+      </div>
+
+      <span v-if="paused" class="status-badge paused">PAUSED</span>
       <span class="job-id">job: {{ jobId || '—' }}</span>
     </header>
 
@@ -203,19 +237,14 @@ function onJobStarted(newJobId: string) {
         </Panel>
 
         <!-- === SOURCE SELECTOR MODE === -->
-        <SourceSelector v-else-if="pipeline.layoutMode === 'source_selector'" @job-started="onJobStarted" />
+        <SourceSelector v-else-if="pipeline.layoutMode === 'source_selector'" @job-started="(id: string, opts: any) => onJobStarted(id, opts)" />
 
       </template>
     </SplitPane>
 
-    <!-- Bottom bar: Log or Blob viewer depending on mode -->
-    <div class="log-row">
-      <template v-if="pipeline.layoutMode === 'source_selector'">
-        <!-- no log in source selector -->
-      </template>
-      <template v-else>
-        <LogPanel ref="logPanel" :source="source" :status="status" />
-      </template>
+    <!-- Bottom bar: Log (hidden in source selector) -->
+    <div v-if="pipeline.layoutMode !== 'source_selector'" class="log-row">
+      <LogPanel ref="logPanel" :source="source" :status="status" />
     </div>
   </div>
 </template>
@@ -283,6 +312,16 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
   background: var(--surface-3);
   color: var(--text-primary);
 }
+.transport {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.play-btn { color: var(--status-live); }
+.pause-btn { color: var(--text-secondary); }
+.step-btn { color: var(--text-secondary); }
+.step-btn:disabled { opacity: 0.3; cursor: not-allowed; }
 .stop-btn {
   background: var(--status-error);
   color: #000;
@@ -293,6 +332,19 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
   opacity: 0.8;
 }
 
+.pause-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  color: var(--text-dim);
+  cursor: pointer;
+  margin-left: 4px;
+}
+.pause-toggle input { accent-color: var(--status-processing); }
+
+.status-badge.paused { background: var(--status-processing); color: #000; }
+
 .job-id { color: var(--text-dim); font-size: var(--font-size-sm); margin-left: auto; }
 
 .stats-col {