Add live pipeline tracker to Dashboard

Shows a blue progress banner with step name and progress bar while
pipeline is running. Polls /api/pipeline/status every 5s. Disappears
when pipeline completes.

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

frontend/src/lib/api.ts

@@ -313,6 +313,29 @@ export function usePipelineStats() {
   })
 }
 
+export interface PipelineStatus {
+  running: boolean
+  current_step: string | null
+  current_step_index: number
+  total_steps: number
+  last_result: {
+    run_id: string
+    status: string
+    zones_processed: number
+    triggers_found: number
+    duration_s: number
+  } | null
+  last_run: string | null
+}
+
+export function usePipelineStatus() {
+  return useQuery<PipelineStatus>({
+    queryKey: ['pipeline-status'],
+    queryFn: () => fetchJson('/api/pipeline/status'),
+    refetchInterval: 5000,  // poll every 5s while running
+  })
+}
+
 export function useEnrolled() {
   return useQuery<EnrolledResponse>({
     queryKey: ['enrolled'],

frontend/src/pages/Dashboard.tsx

@@ -4,13 +4,23 @@ import { Satellite, Thermometer, SlidersHorizontal, ChevronDown, ChevronRight, A
 import MetricCard from '../components/MetricCard'
 import StatusBadge from '../components/StatusBadge'
 import { LoadingSpinner, ErrorState } from '../components/LoadingState'
-import { usePipelineStats, usePipelineRuns, useTriggers } from '../lib/api'
+import { usePipelineStats, usePipelineRuns, useTriggers, usePipelineStatus } from '../lib/api'
 import { REGION } from '../regionConfig'
 
+const STEP_LABELS: Record<string, string> = {
+  ingest: 'Collecting climate data',
+  heal: 'Fixing data issues',
+  downscale: 'Adjusting for urban heat',
+  predict: 'Forecasting heat danger',
+  explain: 'Writing alert messages',
+  notify: 'Notifying workers',
+}
+
 export default function Dashboard() {
   const stats = usePipelineStats()
   const runs = usePipelineRuns()
   const triggers = useTriggers()
+  const pipelineStatus = usePipelineStatus()
   const [showRuns, setShowRuns] = useState(false)
 
   if (stats.isLoading) return <LoadingSpinner />
@@ -33,6 +43,36 @@ export default function Dashboard() {
         <p className="page-caption">{REGION.heroCaption}</p>
       </div>
 
+      {/* Pipeline running banner */}
+      {pipelineStatus.data?.running && (
+        <div className="mb-6 rounded-[10px] flex items-center gap-4" style={{
+          background: 'linear-gradient(135deg, rgba(21,101,192,0.06) 0%, rgba(42,157,143,0.04) 100%)',
+          border: '1px solid rgba(21,101,192,0.15)',
+          padding: '14px 20px',
+        }}>
+          <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{
+            background: '#1565C0',
+            boxShadow: '0 0 0 3px rgba(21,101,192,0.2)',
+            animation: 'pulse 2s infinite',
+          }} />
+          <div className="flex-1">
+            <div className="text-sm font-sans font-medium" style={{ color: '#1565C0' }}>
+              Pipeline running — step {pipelineStatus.data.current_step_index}/{pipelineStatus.data.total_steps}:{' '}
+              {STEP_LABELS[pipelineStatus.data.current_step ?? ''] ?? pipelineStatus.data.current_step}
+            </div>
+            <div className="mt-1.5 w-full h-1.5 rounded-full bg-warm-border overflow-hidden">
+              <div
+                className="h-full rounded-full transition-all duration-500"
+                style={{
+                  width: `${(pipelineStatus.data.current_step_index / pipelineStatus.data.total_steps) * 100}%`,
+                  background: '#1565C0',
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Danger banner — shows when there are active triggers */}
       {activeTriggers.length > 0 && (
         <div className="danger-banner">