feat: Add pipeline execution UI, stage metrics, and API proxy routes

- Add run pipeline page with job selection UI
- Add execution detail page with stage metrics visualization
- Add stage_metrics and total_duration_ms to pipeline.executions table
- Create Next.js API proxy routes for all pipeline endpoints
- Fix trailing slash issues in pipeline-api.ts URLs
- Add Docker volume mounts for pipeline packages
- Add REVIEWIQ_DATABASE_URL and LLM API keys to docker-compose
- Fix JSONB field parsing in execution detail endpoint

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

api/routes/pipelines.py

@@ -288,41 +288,81 @@ async def execute_pipeline(
     execution_id = str(uuid.uuid4())
     stages = request.stages or pipeline.get_stage_names()
 
+    # Prepare input summary for storage
+    import json
+    input_summary = {
+        "job_id": request.job_id,
+        "business_id": request.business_id,
+        "stages": stages,
+    }
+
     if _pool:
         async with _pool.acquire() as conn:
             await conn.execute(
                 """
                 INSERT INTO pipeline.executions (
                     id, pipeline_id, job_id, business_id,
-                    status, stages_requested, created_at
+                    status, stages_requested, input_summary,
+                    started_at, created_at
                 )
-                VALUES ($1, $2, $3, $4, 'running', $5, NOW())
+                VALUES ($1, $2, $3, $4, 'running', $5, $6, NOW(), NOW())
                 """,
                 uuid.UUID(execution_id),
                 pipeline_id,
                 uuid.UUID(request.job_id) if request.job_id else None,
                 request.business_id,
                 stages,
+                json.dumps(input_summary),
             )
 
     try:
+        import time
+        start_time = time.time()
+
         # Execute pipeline
         result = await pipeline.process(input_data, stages=stages)
 
-        # Update execution status
+        # Calculate total duration
+        total_duration_ms = int((time.time() - start_time) * 1000)
+
+        # Prepare result summary
+        result_summary = {
+            "success": result.success,
+            "stages_run": result.stages_run,
+        }
+        if hasattr(result, "summary") and result.summary:
+            result_summary.update(result.summary)
+
+        # Extract stage metrics for profiling
+        stage_metrics = {}
+        if hasattr(result, "stage_results") and result.stage_results:
+            for stage_name, stage_result in result.stage_results.items():
+                stage_metrics[stage_name] = {
+                    "duration_ms": stage_result.get("duration_ms", 0),
+                    "success": stage_result.get("success", True),
+                    "records_in": stage_result.get("records_in", 0),
+                    "records_out": stage_result.get("records_out", 0),
+                    "error": stage_result.get("error"),
+                }
+
+        # Update execution status with metrics
         if _pool:
             async with _pool.acquire() as conn:
                 await conn.execute(
                     """
                     UPDATE pipeline.executions
                     SET status = $2, stages_completed = $3, error_message = $4,
-                        completed_at = NOW()
+                        result_summary = $5, stage_metrics = $6,
+                        total_duration_ms = $7, completed_at = NOW()
                     WHERE id = $1
                     """,
                     uuid.UUID(execution_id),
                     "completed" if result.success else "failed",
                     result.stages_run,
                     result.error,
+                    json.dumps(result_summary),
+                    json.dumps(stage_metrics) if stage_metrics else None,
+                    total_duration_ms,
                 )
 
         return ExecuteResponse(
@@ -412,6 +452,115 @@ async def list_executions(
     ]
 
 
+class StageMetrics(BaseModel):
+    """Metrics for a single pipeline stage."""
+
+    duration_ms: int = Field(0, description="Stage execution time in ms")
+    success: bool = Field(True, description="Whether stage succeeded")
+    records_in: int = Field(0, description="Records input to stage")
+    records_out: int = Field(0, description="Records output from stage")
+    error: str | None = Field(None, description="Error message if failed")
+
+
+class ExecutionDetail(BaseModel):
+    """Detailed execution information."""
+
+    id: str = Field(..., description="Execution identifier")
+    pipeline_id: str = Field(..., description="Pipeline identifier")
+    job_id: str | None = Field(None, description="Associated job ID")
+    business_id: str | None = Field(None, description="Business identifier")
+    status: str = Field(..., description="Execution status")
+    stages_requested: list[str] = Field(..., description="Stages requested")
+    stages_completed: list[str] = Field(..., description="Stages completed")
+    current_stage: str | None = Field(None, description="Currently executing stage")
+    progress: int = Field(0, description="Progress percentage")
+    error_message: str | None = Field(None, description="Error if failed")
+    started_at: str | None = Field(None, description="Start timestamp")
+    completed_at: str | None = Field(None, description="Completion timestamp")
+    created_at: str | None = Field(None, description="Creation timestamp")
+    total_duration_ms: int | None = Field(None, description="Total execution time in ms")
+    input_summary: dict[str, Any] | None = Field(None, description="Input data summary")
+    result_summary: dict[str, Any] | None = Field(None, description="Result summary")
+    stage_metrics: dict[str, StageMetrics] | None = Field(None, description="Per-stage execution metrics")
+
+
+@router.get("/{pipeline_id}/executions/{execution_id}", response_model=ExecutionDetail)
+async def get_execution(pipeline_id: str, execution_id: str) -> ExecutionDetail:
+    """
+    Get details for a specific execution.
+
+    Returns full execution details including stage results and summaries.
+    """
+    if not _pool:
+        raise HTTPException(status_code=503, detail="Database not initialized")
+
+    import uuid
+
+    try:
+        exec_uuid = uuid.UUID(execution_id)
+    except ValueError:
+        raise HTTPException(status_code=400, detail="Invalid execution ID format")
+
+    async with _pool.acquire() as conn:
+        row = await conn.fetchrow(
+            """
+            SELECT id, pipeline_id, job_id, business_id, status,
+                   stages_requested, stages_completed, error_message,
+                   input_summary, result_summary, stage_metrics,
+                   total_duration_ms, started_at, completed_at, created_at
+            FROM pipeline.executions
+            WHERE pipeline_id = $1 AND id = $2
+            """,
+            pipeline_id,
+            exec_uuid,
+        )
+
+    if not row:
+        raise HTTPException(status_code=404, detail=f"Execution not found: {execution_id}")
+
+    # Calculate progress
+    stages_requested = row["stages_requested"] or []
+    stages_completed = row["stages_completed"] or []
+    progress = (
+        int(len(stages_completed) / len(stages_requested) * 100)
+        if stages_requested
+        else 0
+    )
+
+    # Parse JSONB fields (asyncpg may return them as strings)
+    import json
+
+    def parse_json_field(value):
+        if value is None:
+            return None
+        if isinstance(value, str):
+            try:
+                return json.loads(value)
+            except json.JSONDecodeError:
+                return None
+        return value
+
+    return ExecutionDetail(
+        id=str(row["id"]),
+        pipeline_id=row["pipeline_id"],
+        job_id=str(row["job_id"]) if row["job_id"] else None,
+        business_id=row["business_id"],
+        status=row["status"],
+        stages_requested=stages_requested,
+        stages_completed=stages_completed,
+        current_stage=None,  # Could be tracked if needed
+        progress=progress,
+        error_message=row["error_message"],
+        started_at=row["started_at"].isoformat() if row["started_at"] else None,
+        completed_at=row["completed_at"].isoformat() if row["completed_at"] else None,
+        created_at=row["created_at"].isoformat() if row["created_at"] else None,
+        total_duration_ms=row["total_duration_ms"],
+        input_summary=parse_json_field(row["input_summary"]),
+        result_summary=parse_json_field(row["result_summary"]),
+        stage_metrics=parse_json_field(row["stage_metrics"]),
+    )
+
+
 @router.get("/{pipeline_id}/dashboard", response_model=DashboardConfigModel)
 async def get_dashboard_config(pipeline_id: str) -> DashboardConfigModel:
     """

docker-compose.production.yml

@@ -37,6 +37,16 @@ services:
       # Chromium/Xvfb configuration
       - DISPLAY=:99
       - CHROME_BIN=/usr/bin/chromium
+      # Pipeline packages path
+      - PYTHONPATH=/app:/app/packages/pipeline-core/src:/app/packages/reviewiq-pipeline/src
+      # ReviewIQ pipeline database URL (same DB, pipeline schema)
+      - REVIEWIQ_DATABASE_URL=postgresql://scraper:${DB_PASSWORD:-scraper123}@db:5432/scraper
+      # ReviewIQ LLM API keys
+      - REVIEWIQ_OPENAI_API_KEY=${OPENAI_API_KEY:-}
+      - REVIEWIQ_ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY:-}
+    volumes:
+      - ./packages:/app/packages:ro
+      - ./api:/app/api:ro
     ports:
       - "8000:8000"
       - "5900:5900"   # VNC port (for VNC client)

migrations/versions/007_add_stage_metrics.sql

@@ -0,0 +1,36 @@
+-- =============================================================================
+-- Migration: 007_add_stage_metrics.sql
+-- Add stage-level metrics to pipeline executions
+-- =============================================================================
+--
+-- Adds a JSONB column to store per-stage execution metrics for profiling:
+--   - duration_ms: execution time per stage
+--   - records_processed: number of records handled
+--   - errors: any stage-specific errors
+--
+-- Date: 2026-01-24
+-- =============================================================================
+
+-- Add stage_metrics column to store per-stage profiling data
+ALTER TABLE pipeline.executions
+ADD COLUMN IF NOT EXISTS stage_metrics JSONB;
+
+COMMENT ON COLUMN pipeline.executions.stage_metrics IS 'Per-stage execution metrics (timing, records processed, errors)';
+
+-- Example structure:
+-- {
+--   "normalize": {"duration_ms": 150, "records_in": 100, "records_out": 100, "success": true},
+--   "classify": {"duration_ms": 2500, "records_in": 100, "records_out": 100, "success": true},
+--   "route": {"duration_ms": 80, "records_in": 100, "records_out": 15, "success": true},
+--   "aggregate": {"duration_ms": 45, "records_in": 100, "records_out": 1, "success": true}
+-- }
+
+-- Add total_duration_ms for quick access to overall execution time
+ALTER TABLE pipeline.executions
+ADD COLUMN IF NOT EXISTS total_duration_ms INTEGER;
+
+COMMENT ON COLUMN pipeline.executions.total_duration_ms IS 'Total execution duration in milliseconds';
+
+-- =============================================================================
+-- DONE
+-- =============================================================================

web/app/api/pipelines/[pipelineId]/dashboard/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ pipelineId: string }> }
+) {
+  try {
+    const { pipelineId } = await params;
+    const url = `${API_BASE_URL}/api/pipelines/${pipelineId}/dashboard`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch dashboard config' },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Pipeline dashboard API error:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch dashboard config' },
+      { status: 500 }
+    );
+  }
+}

web/app/api/pipelines/[pipelineId]/execute/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ pipelineId: string }> }
+) {
+  try {
+    const { pipelineId } = await params;
+    const body = await request.json();
+
+    const url = `${API_BASE_URL}/api/pipelines/${pipelineId}/execute`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ detail: 'Unknown error' }));
+      return NextResponse.json(
+        { error: error.detail || 'Failed to execute pipeline' },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Pipeline execute API error:', error);
+    return NextResponse.json(
+      { error: 'Failed to execute pipeline' },
+      { status: 500 }
+    );
+  }
+}

web/app/api/pipelines/[pipelineId]/executions/[executionId]/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ pipelineId: string; executionId: string }> }
+) {
+  try {
+    const { pipelineId, executionId } = await params;
+    const url = `${API_BASE_URL}/api/pipelines/${pipelineId}/executions/${executionId}`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch execution' },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Pipeline execution API error:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch execution' },
+      { status: 500 }
+    );
+  }
+}

web/app/api/pipelines/[pipelineId]/executions/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ pipelineId: string }> }
+) {
+  try {
+    const { pipelineId } = await params;
+    const { searchParams } = new URL(request.url);
+    const limit = searchParams.get('limit') || '50';
+
+    const url = `${API_BASE_URL}/api/pipelines/${pipelineId}/executions?limit=${limit}`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch executions' },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Pipeline executions API error:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch executions' },
+      { status: 500 }
+    );
+  }
+}

web/app/api/pipelines/[pipelineId]/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ pipelineId: string }> }
+) {
+  try {
+    const { pipelineId } = await params;
+    const url = `${API_BASE_URL}/api/pipelines/${pipelineId}`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch pipeline' },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Pipeline API error:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch pipeline' },
+      { status: 500 }
+    );
+  }
+}

web/app/api/pipelines/[pipelineId]/widgets/[widgetId]/route.ts

@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ pipelineId: string; widgetId: string }> }
+) {
+  try {
+    const { pipelineId, widgetId } = await params;
+    const { searchParams } = new URL(request.url);
+
+    // Forward query params
+    const queryString = searchParams.toString();
+    const url = `${API_BASE_URL}/api/pipelines/${pipelineId}/widgets/${widgetId}${queryString ? `?${queryString}` : ''}`;
+
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch widget data' },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Widget API error:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch widget data' },
+      { status: 500 }
+    );
+  }
+}

web/app/api/pipelines/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const enabledOnly = searchParams.get('enabled_only') !== 'false';
+
+    const url = `${API_BASE_URL}/api/pipelines/?enabled_only=${enabledOnly}`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: 'Failed to fetch pipelines' },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Pipelines API error:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch pipelines' },
+      { status: 500 }
+    );
+  }
+}

web/app/pipelines/[pipelineId]/executions/[executionId]/page.tsx

@@ -0,0 +1,479 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+import {
+  ArrowLeft,
+  CheckCircle,
+  XCircle,
+  Clock,
+  Loader,
+  RefreshCw,
+  AlertCircle,
+  ChevronDown,
+  ChevronRight,
+  ExternalLink,
+  Timer,
+  ArrowRightLeft,
+} from 'lucide-react';
+import type { ExecutionStatus, StageMetrics } from '@/lib/pipeline-types';
+import { getExecution } from '@/lib/pipeline-api';
+
+// Status badge component
+function StatusBadge({ status }: { status: ExecutionStatus['status'] }) {
+  const config = {
+    pending: {
+      icon: Clock,
+      color: 'bg-gray-100 text-gray-600',
+      label: 'Pending',
+    },
+    running: {
+      icon: Loader,
+      color: 'bg-blue-100 text-blue-600',
+      label: 'Running',
+    },
+    completed: {
+      icon: CheckCircle,
+      color: 'bg-green-100 text-green-600',
+      label: 'Completed',
+    },
+    failed: {
+      icon: XCircle,
+      color: 'bg-red-100 text-red-600',
+      label: 'Failed',
+    },
+    cancelled: {
+      icon: AlertCircle,
+      color: 'bg-yellow-100 text-yellow-600',
+      label: 'Cancelled',
+    },
+  };
+
+  const { icon: Icon, color, label } = config[status] || config.pending;
+
+  return (
+    <span className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold ${color}`}>
+      <Icon className={`w-4 h-4 mr-2 ${status === 'running' ? 'animate-spin' : ''}`} />
+      {label}
+    </span>
+  );
+}
+
+// Format date string
+function formatDate(dateStr: string | undefined): string {
+  if (!dateStr) return '-';
+  const date = new Date(dateStr);
+  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+}
+
+// Format duration from milliseconds
+function formatDurationMs(ms: number | undefined): string {
+  if (!ms) return '-';
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const minutes = Math.floor(ms / 60000);
+  const seconds = Math.floor((ms % 60000) / 1000);
+  return `${minutes}m ${seconds}s`;
+}
+
+// Calculate duration from timestamps
+function formatDuration(start?: string, end?: string): string {
+  if (!start) return '-';
+  const startDate = new Date(start);
+  const endDate = end ? new Date(end) : new Date();
+  const ms = endDate.getTime() - startDate.getTime();
+  return formatDurationMs(ms);
+}
+
+// Stage metrics display component
+function StageMetricsTable({
+  stages,
+  metrics,
+  completed,
+}: {
+  stages: string[];
+  metrics: Record<string, StageMetrics> | undefined;
+  completed: string[];
+}) {
+  if (!metrics || Object.keys(metrics).length === 0) {
+    return (
+      <div className="text-sm text-gray-500 italic">
+        No stage metrics available yet
+      </div>
+    );
+  }
+
+  // Calculate total duration
+  const totalDuration = Object.values(metrics).reduce(
+    (sum, m) => sum + (m.duration_ms || 0),
+    0
+  );
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full divide-y divide-gray-200">
+        <thead className="bg-gray-50">
+          <tr>
+            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
+              Stage
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
+              Status
+            </th>
+            <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">
+              Duration
+            </th>
+            <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">
+              % of Total
+            </th>
+            <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">
+              Records In
+            </th>
+            <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">
+              Records Out
+            </th>
+          </tr>
+        </thead>
+        <tbody className="bg-white divide-y divide-gray-200">
+          {stages.map((stage, index) => {
+            const stageMetrics = metrics[stage];
+            const isCompleted = completed.includes(stage);
+            const percentage = totalDuration > 0 && stageMetrics
+              ? ((stageMetrics.duration_ms / totalDuration) * 100).toFixed(1)
+              : '0';
+
+            return (
+              <tr key={stage} className="hover:bg-gray-50">
+                <td className="px-4 py-3">
+                  <div className="flex items-center">
+                    <span className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold mr-2 bg-gray-100 text-gray-600">
+                      {index + 1}
+                    </span>
+                    <span className="font-medium text-gray-900">{stage}</span>
+                  </div>
+                </td>
+                <td className="px-4 py-3">
+                  {stageMetrics ? (
+                    stageMetrics.success ? (
+                      <span className="inline-flex items-center text-green-600 text-sm">
+                        <CheckCircle className="w-4 h-4 mr-1" />
+                        Success
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center text-red-600 text-sm">
+                        <XCircle className="w-4 h-4 mr-1" />
+                        Failed
+                      </span>
+                    )
+                  ) : isCompleted ? (
+                    <span className="text-gray-400 text-sm">-</span>
+                  ) : (
+                    <span className="text-gray-400 text-sm">Pending</span>
+                  )}
+                </td>
+                <td className="px-4 py-3 text-right">
+                  <span className="font-mono text-sm text-gray-900">
+                    {stageMetrics ? formatDurationMs(stageMetrics.duration_ms) : '-'}
+                  </span>
+                </td>
+                <td className="px-4 py-3 text-right">
+                  {stageMetrics && totalDuration > 0 ? (
+                    <div className="flex items-center justify-end">
+                      <div className="w-16 h-2 bg-gray-200 rounded-full mr-2 overflow-hidden">
+                        <div
+                          className="h-full bg-blue-500 rounded-full"
+                          style={{ width: `${percentage}%` }}
+                        />
+                      </div>
+                      <span className="text-sm text-gray-600 w-12 text-right">
+                        {percentage}%
+                      </span>
+                    </div>
+                  ) : (
+                    <span className="text-gray-400 text-sm">-</span>
+                  )}
+                </td>
+                <td className="px-4 py-3 text-right">
+                  <span className="font-mono text-sm text-gray-900">
+                    {stageMetrics?.records_in?.toLocaleString() || '-'}
+                  </span>
+                </td>
+                <td className="px-4 py-3 text-right">
+                  <span className="font-mono text-sm text-gray-900">
+                    {stageMetrics?.records_out?.toLocaleString() || '-'}
+                  </span>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+        <tfoot className="bg-gray-50">
+          <tr>
+            <td className="px-4 py-3 font-semibold text-gray-900">Total</td>
+            <td className="px-4 py-3"></td>
+            <td className="px-4 py-3 text-right font-mono font-semibold text-gray-900">
+              {formatDurationMs(totalDuration)}
+            </td>
+            <td className="px-4 py-3 text-right text-sm text-gray-600">100%</td>
+            <td className="px-4 py-3"></td>
+            <td className="px-4 py-3"></td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  );
+}
+
+// JSON viewer component
+function JsonViewer({ data, title }: { data: unknown; title: string }) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (!data) return null;
+
+  return (
+    <div className="bg-gray-50 rounded-lg border border-gray-200">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center justify-between p-3 text-left hover:bg-gray-100 rounded-lg transition-colors"
+      >
+        <span className="font-medium text-gray-700">{title}</span>
+        {expanded ? (
+          <ChevronDown className="w-4 h-4 text-gray-500" />
+        ) : (
+          <ChevronRight className="w-4 h-4 text-gray-500" />
+        )}
+      </button>
+      {expanded && (
+        <div className="p-3 pt-0">
+          <pre className="text-xs text-gray-600 overflow-x-auto bg-white p-3 rounded border border-gray-200">
+            {JSON.stringify(data, null, 2)}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Execution detail page - shows results, status, and stage metrics.
+ */
+export default function ExecutionDetailPage() {
+  const params = useParams();
+  const pipelineId = params.pipelineId as string;
+  const executionId = params.executionId as string;
+
+  const [execution, setExecution] = useState<ExecutionStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+
+  const fetchExecution = async () => {
+    try {
+      const data = await getExecution(pipelineId, executionId);
+      setExecution(data);
+      setError(null);
+
+      // Stop auto-refresh if execution is complete
+      if (data.status === 'completed' || data.status === 'failed' || data.status === 'cancelled') {
+        setAutoRefresh(false);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to load execution');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchExecution();
+  }, [pipelineId, executionId]);
+
+  // Auto-refresh while running
+  useEffect(() => {
+    if (!autoRefresh) return;
+
+    const interval = setInterval(fetchExecution, 3000);
+    return () => clearInterval(interval);
+  }, [autoRefresh, pipelineId, executionId]);
+
+  if (loading && !execution) {
+    return (
+      <div className="h-full overflow-y-auto p-6">
+        <div className="animate-pulse">
+          <div className="h-8 w-64 bg-gray-200 rounded mb-4" />
+          <div className="h-4 w-96 bg-gray-200 rounded mb-8" />
+          <div className="h-48 bg-gray-200 rounded-xl mb-6" />
+          <div className="h-64 bg-gray-200 rounded-xl" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error && !execution) {
+    return (
+      <div className="h-full overflow-y-auto p-6">
+        <Link
+          href={`/pipelines/${pipelineId}`}
+          className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-6"
+        >
+          <ArrowLeft className="w-4 h-4 mr-1" />
+          Back to Pipeline
+        </Link>
+
+        <div className="text-center py-12">
+          <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
+          <p className="text-red-600 mb-4">{error}</p>
+          <button
+            onClick={fetchExecution}
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const isRunning = execution?.status === 'running' || execution?.status === 'pending';
+
+  return (
+    <div className="h-full overflow-y-auto p-6">
+      {/* Navigation */}
+      <div className="flex items-center justify-between mb-6">
+        <Link
+          href={`/pipelines/${pipelineId}`}
+          className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700"
+        >
+          <ArrowLeft className="w-4 h-4 mr-1" />
+          Back to Pipeline
+        </Link>
+
+        <div className="flex items-center space-x-3">
+          {isRunning && (
+            <span className="text-sm text-gray-500">
+              Auto-refreshing...
+            </span>
+          )}
+          <button
+            onClick={fetchExecution}
+            disabled={loading}
+            className="inline-flex items-center px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md disabled:opacity-50"
+          >
+            <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      {/* Header */}
+      <div className="bg-white rounded-xl border-2 border-gray-200 p-6 mb-6">
+        <div className="flex items-start justify-between mb-4">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">
+              Execution Details
+            </h1>
+            <code className="text-sm text-gray-500 mt-1">
+              {execution?.id}
+            </code>
+          </div>
+          <StatusBadge status={execution?.status || 'pending'} />
+        </div>
+
+        {/* Info Grid */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+          <div>
+            <span className="text-sm text-gray-500">Started</span>
+            <p className="font-medium text-gray-900">
+              {formatDate(execution?.started_at)}
+            </p>
+          </div>
+          <div>
+            <span className="text-sm text-gray-500">Completed</span>
+            <p className="font-medium text-gray-900">
+              {formatDate(execution?.completed_at)}
+            </p>
+          </div>
+          <div>
+            <span className="text-sm text-gray-500">Total Duration</span>
+            <p className="font-medium text-gray-900">
+              {execution?.total_duration_ms
+                ? formatDurationMs(execution.total_duration_ms)
+                : formatDuration(execution?.started_at, execution?.completed_at)}
+            </p>
+          </div>
+          <div>
+            <span className="text-sm text-gray-500">Stages</span>
+            <p className="font-medium text-gray-900">
+              {execution?.stages_completed.length} / {execution?.stages_requested.length}
+            </p>
+          </div>
+        </div>
+
+        {/* Job/Business Link */}
+        {execution?.job_id && (
+          <div className="flex items-center text-sm mb-4">
+            <span className="text-gray-500 mr-2">Job:</span>
+            <Link
+              href={`/jobs/${execution.job_id}`}
+              className="text-blue-600 hover:underline font-medium inline-flex items-center"
+            >
+              {execution.job_id.slice(0, 12)}...
+              <ExternalLink className="w-3 h-3 ml-1" />
+            </Link>
+          </div>
+        )}
+
+        {execution?.business_id && (
+          <div className="flex items-center text-sm mb-4">
+            <span className="text-gray-500 mr-2">Business:</span>
+            <span className="font-medium text-gray-900">
+              {execution.business_id}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Error Message */}
+      {execution?.error_message && (
+        <div className="bg-red-50 rounded-xl border-2 border-red-200 p-6 mb-6">
+          <div className="flex items-start">
+            <XCircle className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
+            <div className="ml-3">
+              <h3 className="font-semibold text-red-800">Execution Failed</h3>
+              <p className="mt-1 text-sm text-red-700">{execution.error_message}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Stage Metrics / Profiling */}
+      <div className="bg-white rounded-xl border-2 border-gray-200 p-6 mb-6">
+        <div className="flex items-center mb-4">
+          <Timer className="w-5 h-5 text-gray-600 mr-2" />
+          <h2 className="text-lg font-semibold text-gray-900">
+            Stage Performance
+          </h2>
+        </div>
+
+        <StageMetricsTable
+          stages={execution?.stages_requested || []}
+          metrics={execution?.stage_metrics}
+          completed={execution?.stages_completed || []}
+        />
+      </div>
+
+      {/* Raw Data */}
+      <div className="bg-white rounded-xl border-2 border-gray-200 p-6">
+        <h2 className="text-lg font-semibold text-gray-900 mb-4">
+          Execution Data
+        </h2>
+
+        <div className="space-y-3">
+          <JsonViewer data={execution?.input_summary} title="Input Summary" />
+          <JsonViewer data={execution?.result_summary} title="Result Summary" />
+        </div>
+      </div>
+    </div>
+  );
+}

web/app/pipelines/[pipelineId]/run/page.tsx

@@ -0,0 +1,288 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import {
+  ArrowLeft,
+  Play,
+  CheckCircle,
+  Search,
+  Loader,
+  AlertCircle,
+  ChevronRight,
+} from 'lucide-react';
+import type { PipelineDetail } from '@/lib/pipeline-types';
+import { getPipeline, executePipeline } from '@/lib/pipeline-api';
+
+interface Job {
+  job_id: string;
+  business_name: string;
+  place_id: string;
+  status: string;
+  total_reviews: number;
+  created_at: string;
+  completed_at?: string;
+}
+
+/**
+ * Run Pipeline page - select a job to process through the pipeline.
+ */
+export default function RunPipelinePage() {
+  const params = useParams();
+  const router = useRouter();
+  const pipelineId = params.pipelineId as string;
+
+  const [pipeline, setPipeline] = useState<PipelineDetail | null>(null);
+  const [jobs, setJobs] = useState<Job[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedJob, setSelectedJob] = useState<Job | null>(null);
+  const [executing, setExecuting] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        // Fetch pipeline details
+        const pipelineData = await getPipeline(pipelineId);
+        setPipeline(pipelineData);
+
+        // Fetch completed jobs
+        const response = await fetch('/api/jobs/?status=completed&limit=100');
+        if (!response.ok) throw new Error('Failed to fetch jobs');
+        const jobsData = await response.json();
+        // API returns { jobs: [...] }
+        setJobs(jobsData.jobs || []);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Failed to load data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [pipelineId]);
+
+  const handleExecute = async () => {
+    if (!selectedJob || !pipeline) return;
+
+    setExecuting(true);
+    setError(null);
+
+    try {
+      const execution = await executePipeline(pipelineId, {
+        job_id: selectedJob.job_id,
+        // Always run all stages - they're sequential and depend on each other
+        stages: pipeline.stages,
+      });
+
+      // Navigate to execution detail page
+      router.push(`/pipelines/${pipelineId}/executions/${execution.execution_id}`);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to execute pipeline');
+      setExecuting(false);
+    }
+  };
+
+  // Filter jobs by search query
+  const filteredJobs = jobs.filter((job) =>
+    job.business_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    job.place_id.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  if (loading) {
+    return (
+      <div className="h-full overflow-y-auto p-6">
+        <div className="animate-pulse">
+          <div className="h-8 w-48 bg-gray-200 rounded mb-4" />
+          <div className="h-4 w-96 bg-gray-200 rounded mb-8" />
+          <div className="h-96 bg-gray-200 rounded-xl" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error && !pipeline) {
+    return (
+      <div className="h-full overflow-y-auto p-6">
+        <Link
+          href={`/pipelines/${pipelineId}`}
+          className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-6"
+        >
+          <ArrowLeft className="w-4 h-4 mr-1" />
+          Back to Pipeline
+        </Link>
+
+        <div className="text-center py-12">
+          <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
+          <p className="text-red-600 mb-4">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-y-auto p-6">
+      {/* Navigation */}
+      <Link
+        href={`/pipelines/${pipelineId}`}
+        className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-6"
+      >
+        <ArrowLeft className="w-4 h-4 mr-1" />
+        Back to Pipeline
+      </Link>
+
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">Run Pipeline</h1>
+        <p className="text-gray-600 mt-1">
+          {pipeline?.name} - Select a completed job to process
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
+          <p className="text-red-600">{error}</p>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Job Selection */}
+        <div className="lg:col-span-2 bg-white rounded-xl border-2 border-gray-200 p-5">
+          <h2 className="text-lg font-semibold text-gray-900 mb-4">
+            Select Job
+          </h2>
+
+          {/* Search */}
+          <div className="relative mb-4">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search jobs by business name..."
+              className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          {/* Jobs List */}
+          <div className="max-h-[500px] overflow-y-auto space-y-2">
+            {filteredJobs.length === 0 ? (
+              <div className="text-center py-8">
+                <p className="text-gray-500">No completed jobs found</p>
+              </div>
+            ) : (
+              filteredJobs.map((job, index) => (
+                <div
+                  key={job.job_id || `job-${index}`}
+                  onClick={() => setSelectedJob(job)}
+                  className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${
+                    selectedJob?.job_id === job.job_id
+                      ? 'border-blue-500 bg-blue-50'
+                      : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
+                  }`}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex-1 min-w-0">
+                      <h3 className="font-medium text-gray-900 truncate">
+                        {job.business_name}
+                      </h3>
+                      <p className="text-xs text-gray-500 truncate mt-1">
+                        {job.place_id}
+                      </p>
+                      <div className="mt-2 flex items-center text-xs text-gray-500 space-x-4">
+                        <span>{job.total_reviews} reviews</span>
+                        <span>
+                          {new Date(job.completed_at || job.created_at).toLocaleDateString()}
+                        </span>
+                      </div>
+                    </div>
+                    {selectedJob?.job_id === job.job_id ? (
+                      <CheckCircle className="w-6 h-6 text-blue-600 flex-shrink-0 ml-4" />
+                    ) : (
+                      <ChevronRight className="w-5 h-5 text-gray-300 flex-shrink-0 ml-4" />
+                    )}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* Pipeline Info & Execute */}
+        <div className="bg-white rounded-xl border-2 border-gray-200 p-5">
+          <h2 className="text-lg font-semibold text-gray-900 mb-4">
+            Pipeline Stages
+          </h2>
+
+          {/* Stages (read-only, informational) */}
+          <div className="space-y-2 mb-6">
+            {pipeline?.stages.map((stage, index) => (
+              <div
+                key={stage}
+                className="flex items-center p-3 bg-gray-50 rounded-lg"
+              >
+                <div className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold mr-3 bg-blue-100 text-blue-700">
+                  {index + 1}
+                </div>
+                <span className="font-medium text-gray-700">{stage}</span>
+              </div>
+            ))}
+          </div>
+
+          <p className="text-xs text-gray-500 mb-6">
+            All stages will run sequentially. Each stage depends on the output of the previous stage.
+          </p>
+
+          {/* Summary */}
+          <div className="p-4 bg-gray-50 rounded-lg mb-4">
+            <h3 className="text-sm font-medium text-gray-700 mb-2">Summary</h3>
+            <div className="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-gray-500">Selected Job:</span>
+                <span className="font-medium text-gray-900 truncate max-w-[150px]">
+                  {selectedJob?.business_name || 'None'}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Reviews:</span>
+                <span className="font-medium text-gray-900">
+                  {selectedJob?.total_reviews || '-'}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Stages:</span>
+                <span className="font-medium text-gray-900">
+                  {pipeline?.stages.length || 0}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Execute Button */}
+          <button
+            onClick={handleExecute}
+            disabled={!selectedJob || executing}
+            className="w-full flex items-center justify-center px-4 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {executing ? (
+              <>
+                <Loader className="w-5 h-5 mr-2 animate-spin" />
+                Starting...
+              </>
+            ) : (
+              <>
+                <Play className="w-5 h-5 mr-2" />
+                Run Pipeline
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

web/lib/pipeline-api.ts

@@ -166,6 +166,26 @@ export async function listExecutions(
   return response.json();
 }
 
+/**
+ * Get a specific execution by ID.
+ */
+export async function getExecution(
+  pipelineId: string,
+  executionId: string
+): Promise<ExecutionStatus> {
+  const url = `${API_BASE}/api/pipelines/${pipelineId}/executions/${executionId}`;
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    if (response.status === 404) {
+      throw new Error(`Execution not found: ${executionId}`);
+    }
+    throw new Error(`Failed to fetch execution: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
 /**
  * Enable a pipeline.
  */