Full pipeline flow through web interface with live updates

API:
  POST /api/tasks/{id}/run — sets task to in_progress immediately,
    launches subprocess with error handling and logging.
  GET /api/tasks/{id}/running — checks pipelines table for active run.
  Fixed --db flag position in subprocess command.

TaskDetail (live pipeline):
  - Run button starts pipeline, auto-starts 3s polling
  - Pipeline cards update in real-time as agent_logs appear
  - Pulsing blue dot on header while in_progress
  - Spinner on run button during execution
  - Auto-stops polling when status changes from in_progress
  - Cleanup on component unmount (no leaked timers)

ProjectView (run from list):
  - [>] button on each pending task row
  - Confirm dialog before starting
  - Pulsing blue dot for in_progress tasks
  - Click task row → /task/:id with live view

Dashboard (live statuses):
  - Pulsing blue dot next to active task count
  - Auto-poll every 5s when any project has active tasks
  - Stops polling when no active tasks

5 new API tests (running endpoint, run sets status, not found).
141 tests total, all passing. Frontend builds clean.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web/frontend/src/views/Dashboard.vue

@@ -31,7 +31,23 @@ async function load() {
   }
 }
 
-onMounted(load)
+let dashPollTimer: ReturnType<typeof setInterval> | null = null
+
+onMounted(async () => {
+  await load()
+  // Poll if there are running tasks
+  checkAndPoll()
+})
+
+function checkAndPoll() {
+  const hasRunning = projects.value.some(p => p.active_tasks > 0)
+  if (hasRunning && !dashPollTimer) {
+    dashPollTimer = setInterval(load, 5000)
+  } else if (!hasRunning && dashPollTimer) {
+    clearInterval(dashPollTimer)
+    dashPollTimer = null
+  }
+}
 
 const costMap = computed(() => {
   const m: Record<string, number> = {}
@@ -115,7 +131,10 @@ async function runBootstrap() {
         </div>
         <div class="flex gap-4 text-xs">
           <span class="text-gray-500">{{ p.total_tasks }} tasks</span>
-          <span v-if="p.active_tasks" class="text-blue-400">{{ p.active_tasks }} active</span>
+          <span v-if="p.active_tasks" class="text-blue-400">
+            <span class="inline-block w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse mr-0.5"></span>
+            {{ p.active_tasks }} active
+          </span>
           <span v-if="p.review_tasks" class="text-yellow-400">{{ p.review_tasks }} awaiting review</span>
           <span v-if="p.blocked_tasks" class="text-red-400">{{ p.blocked_tasks }} blocked</span>
           <span v-if="p.done_tasks" class="text-green-500">{{ p.done_tasks }} done</span>

web/frontend/src/views/ProjectView.vue

@@ -109,6 +109,18 @@ async function addTask() {
   }
 }
 
+async function runTask(taskId: string, event: Event) {
+  event.preventDefault()
+  event.stopPropagation()
+  if (!confirm(`Run pipeline for ${taskId}?`)) return
+  try {
+    await api.runTask(taskId)
+    await load()
+  } catch (e: any) {
+    error.value = e.message
+  }
+}
+
 async function addDecision() {
   decFormError.value = ''
   try {
@@ -202,6 +214,12 @@ async function addDecision() {
           <div class="flex items-center gap-2 text-xs text-gray-600 shrink-0">
             <span v-if="t.assigned_role">{{ t.assigned_role }}</span>
             <span>pri {{ t.priority }}</span>
+            <button v-if="t.status === 'pending'"
+              @click="runTask(t.id, $event)"
+              class="px-2 py-0.5 bg-blue-900/40 text-blue-400 border border-blue-800 rounded hover:bg-blue-900 text-[10px]"
+              title="Run pipeline">&#9654;</button>
+            <span v-if="t.status === 'in_progress'"
+              class="inline-block w-2 h-2 bg-blue-500 rounded-full animate-pulse" title="Running"></span>
           </div>
         </router-link>
       </div>

web/frontend/src/views/TaskDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { api, type TaskFull, type PipelineStep, type PendingAction } from '../api'
 import Badge from '../components/Badge.vue'
 import Modal from '../components/Modal.vue'
@@ -27,8 +27,16 @@ const rejectReason = ref('')
 
 async function load() {
   try {
-    loading.value = true
+    const prev = task.value
     task.value = await api.taskFull(props.id)
+    // Auto-start polling if task is in_progress
+    if (task.value.status === 'in_progress' && !polling.value) {
+      startPolling()
+    }
+    // Stop polling when pipeline done
+    if (prev?.status === 'in_progress' && task.value.status !== 'in_progress') {
+      stopPolling()
+    }
   } catch (e: any) {
     error.value = e.message
   } finally {
@@ -36,7 +44,19 @@ async function load() {
   }
 }
 
+function startPolling() {
+  if (polling.value) return
+  polling.value = true
+  pollTimer = setInterval(load, 3000)
+}
+
+function stopPolling() {
+  polling.value = false
+  if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
+}
+
 onMounted(load)
+onUnmounted(stopPolling)
 
 function statusColor(s: string) {
   const m: Record<string, string> = {
@@ -49,7 +69,7 @@ function statusColor(s: string) {
 const roleIcons: Record<string, string> = {
   pm: '\u{1F9E0}', security: '\u{1F6E1}', debugger: '\u{1F50D}',
   frontend_dev: '\u{1F4BB}', backend_dev: '\u{2699}', tester: '\u{2705}',
-  reviewer: '\u{1F4CB}', architect: '\u{1F3D7}',
+  reviewer: '\u{1F4CB}', architect: '\u{1F3D7}', followup_pm: '\u{1F4DD}',
 }
 
 function stepStatusClass(step: PipelineStep) {
@@ -67,7 +87,6 @@ function stepStatusColor(step: PipelineStep) {
 
 function formatOutput(text: string | null): string {
   if (!text) return ''
-  // Try to detect and format JSON
   try {
     const parsed = JSON.parse(text)
     return JSON.stringify(parsed, null, 2)
@@ -113,7 +132,6 @@ async function resolveAction(action: PendingAction, choice: string) {
   resolvingAction.value = true
   try {
     const res = await api.resolveAction(props.id, action, choice)
-    // Remove resolved action from list
     pendingActions.value = pendingActions.value.filter(a => a !== action)
     if (choice === 'manual_task' && res.result && typeof res.result === 'object' && 'id' in res.result) {
       followupResults.value.push({ id: (res.result as any).id, title: (res.result as any).title })
@@ -143,29 +161,20 @@ async function reject() {
 async function runPipeline() {
   try {
     await api.runTask(props.id)
-    polling.value = true
-    pollTimer = setInterval(async () => {
-      await load()
-      if (task.value && !['in_progress'].includes(task.value.status)) {
-        stopPolling()
-      }
-    }, 3000)
+    startPolling()
+    await load()
   } catch (e: any) {
     error.value = e.message
   }
 }
 
-function stopPolling() {
-  polling.value = false
-  if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
-}
-
 const hasSteps = computed(() => (task.value?.pipeline_steps?.length ?? 0) > 0)
+const isRunning = computed(() => task.value?.status === 'in_progress')
 </script>
 
 <template>
-  <div v-if="loading" class="text-gray-500 text-sm">Loading...</div>
-  <div v-else-if="error" class="text-red-400 text-sm">{{ error }}</div>
+  <div v-if="loading && !task" class="text-gray-500 text-sm">Loading...</div>
+  <div v-else-if="error && !task" class="text-red-400 text-sm">{{ error }}</div>
   <div v-else-if="task">
     <!-- Header -->
     <div class="mb-6">
@@ -178,6 +187,7 @@ const hasSteps = computed(() => (task.value?.pipeline_steps?.length ?? 0) > 0)
         <h1 class="text-xl font-bold text-gray-100">{{ task.id }}</h1>
         <span class="text-gray-400">{{ task.title }}</span>
         <Badge :text="task.status" :color="statusColor(task.status)" />
+        <span v-if="isRunning" class="inline-block w-2 h-2 bg-blue-500 rounded-full animate-pulse"></span>
         <span class="text-xs text-gray-600">pri {{ task.priority }}</span>
       </div>
       <div v-if="task.brief" class="text-xs text-gray-500 mb-1">
@@ -189,13 +199,14 @@ const hasSteps = computed(() => (task.value?.pipeline_steps?.length ?? 0) > 0)
     </div>
 
     <!-- Pipeline Graph -->
-    <div v-if="hasSteps" class="mb-6">
-      <h2 class="text-sm font-semibold text-gray-300 mb-3">Pipeline</h2>
+    <div v-if="hasSteps || isRunning" class="mb-6">
+      <h2 class="text-sm font-semibold text-gray-300 mb-3">
+        Pipeline
+        <span v-if="isRunning" class="text-blue-400 text-xs font-normal ml-2 animate-pulse">running...</span>
+      </h2>
       <div class="flex items-center gap-1 overflow-x-auto pb-2">
         <template v-for="(step, i) in task.pipeline_steps" :key="step.id">
-          <!-- Arrow -->
           <div v-if="i > 0" class="text-gray-600 text-lg shrink-0 px-1">&rarr;</div>
-          <!-- Step card -->
           <button
             @click="selectedStep = selectedStep?.id === step.id ? null : step"
             class="border rounded-lg px-3 py-2 min-w-[120px] text-left transition-all shrink-0"
@@ -220,7 +231,7 @@ const hasSteps = computed(() => (task.value?.pipeline_steps?.length ?? 0) > 0)
     </div>
 
     <!-- No pipeline -->
-    <div v-else class="mb-6 text-sm text-gray-600">
+    <div v-if="!hasSteps && !isRunning" class="mb-6 text-sm text-gray-600">
       No pipeline steps yet.
     </div>
 
@@ -263,7 +274,8 @@ const hasSteps = computed(() => (task.value?.pipeline_steps?.length ?? 0) > 0)
         @click="runPipeline"
         :disabled="polling"
         class="px-4 py-2 text-sm bg-blue-900/50 text-blue-400 border border-blue-800 rounded hover:bg-blue-900 disabled:opacity-50">
-        {{ polling ? 'Running...' : '&#9654; Run Pipeline' }}
+        <span v-if="polling" class="inline-block w-3 h-3 border-2 border-blue-400 border-t-transparent rounded-full animate-spin mr-1"></span>
+        {{ polling ? 'Pipeline running...' : '&#9654; Run Pipeline' }}
       </button>
     </div>