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>

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>
+  );
+}