feat: Add extensible multi-pipeline integration system

This commit implements a plugin-like pipeline architecture with:

Pipeline Core Package (packages/pipeline-core/):
- BasePipeline abstract class all pipelines implement
- PipelineRegistry for database-backed discovery/management
- PipelineRunner for execution with status tracking
- DashboardConfig contracts for dynamic widget definitions

Database Migration (006_pipeline_registry.sql):
- pipeline.registry table for registered pipelines
- pipeline.executions table for execution history
- Views for execution stats and monitoring

ReviewIQ Pipeline Refactor:
- Implements BasePipeline interface
- Adds get_dashboard_config() with widget definitions
- Adds get_widget_data() methods for all dashboard widgets
- Maintains backward compatibility with Pipeline alias

Generic Pipeline API (api/routes/pipelines.py):
- GET /api/pipelines - List all registered pipelines
- GET /api/pipelines/{id} - Pipeline details
- POST /api/pipelines/{id}/execute - Execute pipeline
- GET /api/pipelines/{id}/dashboard - Dashboard config
- GET /api/pipelines/{id}/widgets/{w} - Widget data
- GET /api/pipelines/{id}/executions - Execution history

Frontend Dynamic Dashboard System:
- DynamicDashboard component renders from config
- WidgetRegistry maps types to components
- Widget components: StatCard, LineChart, BarChart,
  PieChart, DataTable, Heatmap
- Pipeline API client library

Frontend Pipeline Pages:
- /pipelines - List all registered pipelines
- /pipelines/[id] - Dynamic dashboard for pipeline
- /pipelines/[id]/executions - Execution history
- Pipelines nav item in Sidebar

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

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

@@ -0,0 +1,282 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+import {
+  ArrowLeft,
+  CheckCircle,
+  XCircle,
+  Clock,
+  PlayCircle,
+  Loader,
+  RefreshCw,
+  AlertCircle,
+} from 'lucide-react';
+import type { ExecutionStatus, PipelineDetail } from '@/lib/pipeline-types';
+import { getPipeline, listExecutions } 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 dark:bg-gray-700 dark:text-gray-400',
+    },
+    running: {
+      icon: Loader,
+      color: 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400',
+    },
+    completed: {
+      icon: CheckCircle,
+      color: 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400',
+    },
+    failed: {
+      icon: XCircle,
+      color: 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400',
+    },
+    cancelled: {
+      icon: AlertCircle,
+      color: 'bg-yellow-100 text-yellow-600 dark:bg-yellow-900/30 dark:text-yellow-400',
+    },
+  };
+
+  const { icon: Icon, color } = config[status] || config.pending;
+
+  return (
+    <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${color}`}>
+      <Icon className={`w-3 h-3 mr-1 ${status === 'running' ? 'animate-spin' : ''}`} />
+      {status.charAt(0).toUpperCase() + status.slice(1)}
+    </span>
+  );
+}
+
+// Format date string
+function formatDate(dateStr: string | undefined): string {
+  if (!dateStr) return '-';
+  const date = new Date(dateStr);
+  return date.toLocaleString();
+}
+
+// Calculate duration
+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();
+
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60000).toFixed(1)}m`;
+}
+
+/**
+ * Execution history page for a pipeline.
+ */
+export default function ExecutionsPage() {
+  const params = useParams();
+  const pipelineId = params.pipelineId as string;
+
+  const [pipeline, setPipeline] = useState<PipelineDetail | null>(null);
+  const [executions, setExecutions] = useState<ExecutionStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [statusFilter, setStatusFilter] = useState<string>('');
+
+  const fetchData = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const [pipelineData, executionsData] = await Promise.all([
+        getPipeline(pipelineId),
+        listExecutions(pipelineId, {
+          status: statusFilter || undefined,
+          limit: 50,
+        }),
+      ]);
+      setPipeline(pipelineData);
+      setExecutions(executionsData);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to load data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (pipelineId) {
+      fetchData();
+    }
+  }, [pipelineId, statusFilter]);
+
+  return (
+    <div className="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 dark:hover:text-gray-300"
+        >
+          <ArrowLeft className="w-4 h-4 mr-1" />
+          Back to Dashboard
+        </Link>
+
+        <button
+          onClick={fetchData}
+          disabled={loading}
+          className="inline-flex items-center px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md disabled:opacity-50"
+        >
+          <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+          Refresh
+        </button>
+      </div>
+
+      {/* Header */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          Execution History
+        </h1>
+        <p className="text-gray-500 mt-1">
+          {pipeline?.name || pipelineId}
+        </p>
+      </div>
+
+      {/* Filters */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-6">
+        <div className="flex items-center space-x-4">
+          <label className="text-sm text-gray-600 dark:text-gray-400">
+            Status:
+          </label>
+          <select
+            value={statusFilter}
+            onChange={(e) => setStatusFilter(e.target.value)}
+            className="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="">All</option>
+            <option value="completed">Completed</option>
+            <option value="failed">Failed</option>
+            <option value="running">Running</option>
+            <option value="pending">Pending</option>
+            <option value="cancelled">Cancelled</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Content */}
+      {error ? (
+        <div className="text-center py-12">
+          <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
+          <p className="text-red-600 dark:text-red-400">{error}</p>
+          <button
+            onClick={fetchData}
+            className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          >
+            Retry
+          </button>
+        </div>
+      ) : loading ? (
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <div
+              key={i}
+              className="p-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0 animate-pulse"
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-4">
+                  <div className="w-20 h-6 bg-gray-200 dark:bg-gray-700 rounded" />
+                  <div className="w-32 h-4 bg-gray-200 dark:bg-gray-700 rounded" />
+                </div>
+                <div className="w-24 h-4 bg-gray-200 dark:bg-gray-700 rounded" />
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : executions.length === 0 ? (
+        <div className="text-center py-12">
+          <PlayCircle className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+          <p className="text-gray-500">No executions found</p>
+        </div>
+      ) : (
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead className="bg-gray-50 dark:bg-gray-900">
+              <tr>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Execution ID
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Job / Business
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Stages
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Started
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Duration
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+              {executions.map((execution) => (
+                <tr
+                  key={execution.id}
+                  className="hover:bg-gray-50 dark:hover:bg-gray-800"
+                >
+                  <td className="px-4 py-3">
+                    <StatusBadge status={execution.status} />
+                  </td>
+                  <td className="px-4 py-3">
+                    <code className="text-xs text-gray-600 dark:text-gray-400">
+                      {execution.id.slice(0, 8)}...
+                    </code>
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
+                    {execution.job_id ? (
+                      <Link
+                        href={`/jobs/${execution.job_id}`}
+                        className="text-blue-600 hover:underline"
+                      >
+                        {execution.job_id.slice(0, 8)}...
+                      </Link>
+                    ) : execution.business_id ? (
+                      <span className="truncate max-w-[150px] inline-block">
+                        {execution.business_id}
+                      </span>
+                    ) : (
+                      <span className="text-gray-400">-</span>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-sm">
+                    <span className="text-gray-500">
+                      {execution.stages_completed.length} / {execution.stages_requested.length}
+                    </span>
+                    {execution.error_message && (
+                      <span
+                        className="ml-2 text-red-500 cursor-help"
+                        title={execution.error_message}
+                      >
+                        (error)
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-500">
+                    {formatDate(execution.started_at)}
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-500">
+                    {formatDuration(execution.started_at, execution.completed_at)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,168 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+import { AlertCircle, ArrowLeft, History, Settings } from 'lucide-react';
+import type { DashboardConfig, PipelineDetail } from '@/lib/pipeline-types';
+import { getPipeline, getDashboardConfig } from '@/lib/pipeline-api';
+import { DynamicDashboard } from '@/components/dashboard';
+
+/**
+ * Pipeline dashboard page.
+ *
+ * Displays the dynamic dashboard for a specific pipeline.
+ */
+export default function PipelineDashboardPage() {
+  const params = useParams();
+  const pipelineId = params.pipelineId as string;
+
+  const [pipeline, setPipeline] = useState<PipelineDetail | null>(null);
+  const [dashboardConfig, setDashboardConfig] = useState<DashboardConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const [pipelineData, configData] = await Promise.all([
+          getPipeline(pipelineId),
+          getDashboardConfig(pipelineId),
+        ]);
+        setPipeline(pipelineData);
+        setDashboardConfig(configData);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Failed to load pipeline');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (pipelineId) {
+      fetchData();
+    }
+  }, [pipelineId]);
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        {/* Header skeleton */}
+        <div className="flex items-center mb-6 animate-pulse">
+          <div className="w-8 h-8 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="ml-4 flex-1">
+            <div className="h-6 w-48 bg-gray-200 dark:bg-gray-700 rounded" />
+            <div className="h-4 w-64 bg-gray-200 dark:bg-gray-700 rounded mt-2" />
+          </div>
+        </div>
+
+        {/* Dashboard skeleton */}
+        <div className="space-y-6">
+          <div className="grid grid-cols-4 gap-4">
+            {[1, 2, 3, 4].map((i) => (
+              <div
+                key={i}
+                className="h-24 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse"
+              />
+            ))}
+          </div>
+          <div className="h-64 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !pipeline || !dashboardConfig) {
+    return (
+      <div className="p-6">
+        <Link
+          href="/pipelines"
+          className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 mb-6"
+        >
+          <ArrowLeft className="w-4 h-4 mr-1" />
+          Back to Pipelines
+        </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 dark:text-red-400">
+            {error || 'Pipeline not found'}
+          </p>
+          <Link
+            href="/pipelines"
+            className="mt-4 inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          >
+            Back to Pipelines
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      {/* Navigation */}
+      <div className="flex items-center justify-between mb-6">
+        <Link
+          href="/pipelines"
+          className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+        >
+          <ArrowLeft className="w-4 h-4 mr-1" />
+          Back to Pipelines
+        </Link>
+
+        <div className="flex items-center space-x-3">
+          <Link
+            href={`/pipelines/${pipelineId}/executions`}
+            className="inline-flex items-center px-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md"
+          >
+            <History className="w-4 h-4 mr-2" />
+            Execution History
+          </Link>
+        </div>
+      </div>
+
+      {/* Pipeline Info */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              {pipeline.name}
+            </h2>
+            <p className="text-sm text-gray-500 mt-1">{pipeline.description}</p>
+          </div>
+          <div className="text-right">
+            <p className="text-sm text-gray-500">
+              Version: <span className="font-medium">{pipeline.version}</span>
+            </p>
+            <p className="text-sm text-gray-500">
+              Input: <code className="text-xs bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded">{pipeline.input_type}</code>
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
+          <p className="text-sm text-gray-500 mb-2">Stages:</p>
+          <div className="flex flex-wrap gap-2">
+            {pipeline.stages.map((stage, index) => (
+              <span
+                key={stage}
+                className="inline-flex items-center px-2 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-sm rounded"
+              >
+                <span className="w-5 h-5 flex items-center justify-center bg-blue-100 dark:bg-blue-800 rounded-full text-xs font-medium mr-2">
+                  {index + 1}
+                </span>
+                {stage}
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Dynamic Dashboard */}
+      <DynamicDashboard pipelineId={pipelineId} config={dashboardConfig} />
+    </div>
+  );
+}

web/app/pipelines/page.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import {
+  Beaker,
+  Play,
+  Pause,
+  CheckCircle,
+  AlertCircle,
+  Clock,
+  ChevronRight,
+  RefreshCw,
+} from 'lucide-react';
+import type { PipelineInfo } from '@/lib/pipeline-types';
+import { listPipelines } from '@/lib/pipeline-api';
+
+/**
+ * Pipeline card component.
+ */
+function PipelineCard({ pipeline }: { pipeline: PipelineInfo }) {
+  return (
+    <Link
+      href={`/pipelines/${pipeline.id}`}
+      className="block bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-600 transition-all"
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex items-center">
+          <div
+            className={`p-2 rounded-lg ${
+              pipeline.is_enabled
+                ? 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400'
+                : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
+            }`}
+          >
+            <Beaker className="w-5 h-5" />
+          </div>
+          <div className="ml-3">
+            <h3 className="font-medium text-gray-900 dark:text-gray-100">
+              {pipeline.name}
+            </h3>
+            <p className="text-sm text-gray-500">v{pipeline.version}</p>
+          </div>
+        </div>
+        <ChevronRight className="w-5 h-5 text-gray-400" />
+      </div>
+
+      <p className="mt-3 text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
+        {pipeline.description}
+      </p>
+
+      <div className="mt-4 flex items-center justify-between">
+        <div className="flex items-center text-sm text-gray-500">
+          <span className="font-medium mr-2">Stages:</span>
+          {pipeline.stages.slice(0, 3).map((stage, i) => (
+            <span
+              key={stage}
+              className="px-2 py-0.5 bg-gray-100 dark:bg-gray-700 rounded text-xs mr-1"
+            >
+              {stage}
+            </span>
+          ))}
+          {pipeline.stages.length > 3 && (
+            <span className="text-xs text-gray-400">
+              +{pipeline.stages.length - 3} more
+            </span>
+          )}
+        </div>
+
+        <span
+          className={`px-2 py-1 rounded-full text-xs font-medium ${
+            pipeline.is_enabled
+              ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+              : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
+          }`}
+        >
+          {pipeline.is_enabled ? 'Enabled' : 'Disabled'}
+        </span>
+      </div>
+    </Link>
+  );
+}
+
+/**
+ * Pipelines list page.
+ */
+export default function PipelinesPage() {
+  const [pipelines, setPipelines] = useState<PipelineInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [showDisabled, setShowDisabled] = useState(false);
+
+  const fetchPipelines = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await listPipelines(!showDisabled);
+      setPipelines(data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to load pipelines');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchPipelines();
+  }, [showDisabled]);
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+            Pipelines
+          </h1>
+          <p className="text-gray-500 mt-1">
+            Data processing pipelines for review analysis
+          </p>
+        </div>
+
+        <div className="flex items-center space-x-3">
+          {/* Show disabled toggle */}
+          <label className="flex items-center cursor-pointer">
+            <input
+              type="checkbox"
+              checked={showDisabled}
+              onChange={(e) => setShowDisabled(e.target.checked)}
+              className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+            />
+            <span className="ml-2 text-sm text-gray-600 dark:text-gray-400">
+              Show disabled
+            </span>
+          </label>
+
+          {/* Refresh button */}
+          <button
+            onClick={fetchPipelines}
+            disabled={loading}
+            className="p-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md disabled:opacity-50"
+            title="Refresh"
+          >
+            <RefreshCw className={`w-5 h-5 ${loading ? 'animate-spin' : ''}`} />
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      {error ? (
+        <div className="text-center py-12">
+          <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
+          <p className="text-red-600 dark:text-red-400">{error}</p>
+          <button
+            onClick={fetchPipelines}
+            className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          >
+            Retry
+          </button>
+        </div>
+      ) : loading ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {[1, 2, 3].map((i) => (
+            <div
+              key={i}
+              className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 animate-pulse"
+            >
+              <div className="flex items-center">
+                <div className="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-lg" />
+                <div className="ml-3 flex-1">
+                  <div className="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded" />
+                  <div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded mt-2" />
+                </div>
+              </div>
+              <div className="h-8 w-full bg-gray-200 dark:bg-gray-700 rounded mt-4" />
+              <div className="h-6 w-3/4 bg-gray-200 dark:bg-gray-700 rounded mt-4" />
+            </div>
+          ))}
+        </div>
+      ) : pipelines.length === 0 ? (
+        <div className="text-center py-12">
+          <Beaker className="w-12 h-12 text-gray-400 mx-auto mb-4" />
+          <p className="text-gray-500">No pipelines registered</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {pipelines.map((pipeline) => (
+            <PipelineCard key={pipeline.id} pipeline={pipeline} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

web/components/Sidebar.tsx

@@ -50,6 +50,16 @@ export default function Sidebar() {
       label: 'Analytics',
       matchPaths: ['/analytics'],
     },
+    {
+      href: '/pipelines',
+      icon: (
+        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+        </svg>
+      ),
+      label: 'Pipelines',
+      matchPaths: ['/pipelines'],
+    },
     {
       href: '/dashboard/scrapers',
       icon: (

web/components/dashboard/DashboardSection.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import type { DashboardSection as DashboardSectionType, WidgetData } from '@/lib/pipeline-types';
+import { getWidgetData } from '@/lib/pipeline-api';
+import { renderWidget } from './WidgetRegistry';
+
+interface DashboardSectionProps {
+  section: DashboardSectionType;
+  pipelineId: string;
+  businessId?: string;
+  timeRange?: string;
+}
+
+/**
+ * Renders a dashboard section with its widgets.
+ */
+export function DashboardSection({
+  section,
+  pipelineId,
+  businessId,
+  timeRange = '30d',
+}: DashboardSectionProps) {
+  const [collapsed, setCollapsed] = useState(section.collapsed ?? false);
+  const [widgetData, setWidgetData] = useState<Record<string, WidgetData | null>>({});
+  const [widgetLoading, setWidgetLoading] = useState<Record<string, boolean>>({});
+  const [widgetErrors, setWidgetErrors] = useState<Record<string, string | undefined>>({});
+  const [tablePagination, setTablePagination] = useState<Record<string, number>>({});
+
+  // Fetch data for a single widget
+  const fetchWidgetData = useCallback(
+    async (widgetId: string, page?: number) => {
+      setWidgetLoading((prev) => ({ ...prev, [widgetId]: true }));
+      setWidgetErrors((prev) => ({ ...prev, [widgetId]: undefined }));
+
+      try {
+        const data = await getWidgetData(pipelineId, widgetId, {
+          business_id: businessId,
+          time_range: timeRange,
+          page: page || tablePagination[widgetId] || 1,
+        });
+        setWidgetData((prev) => ({ ...prev, [widgetId]: data }));
+      } catch (error) {
+        setWidgetErrors((prev) => ({
+          ...prev,
+          [widgetId]: error instanceof Error ? error.message : 'Failed to load',
+        }));
+      } finally {
+        setWidgetLoading((prev) => ({ ...prev, [widgetId]: false }));
+      }
+    },
+    [pipelineId, businessId, timeRange, tablePagination]
+  );
+
+  // Fetch all widget data on mount and when params change
+  useEffect(() => {
+    if (!collapsed) {
+      section.widgets.forEach((widget) => {
+        fetchWidgetData(widget.id);
+      });
+    }
+  }, [section.widgets, collapsed, pipelineId, businessId, timeRange]);
+
+  // Handle page change for tables
+  const handlePageChange = (widgetId: string, page: number) => {
+    setTablePagination((prev) => ({ ...prev, [widgetId]: page }));
+    fetchWidgetData(widgetId, page);
+  };
+
+  // Calculate grid layout
+  // Using a 12-column grid
+  const getGridClass = (widget: typeof section.widgets[0]) => {
+    const { grid } = widget;
+    // Map grid units to Tailwind classes
+    const colSpanClasses: Record<number, string> = {
+      1: 'col-span-1',
+      2: 'col-span-2',
+      3: 'col-span-3',
+      4: 'col-span-4',
+      5: 'col-span-5',
+      6: 'col-span-6',
+      7: 'col-span-7',
+      8: 'col-span-8',
+      9: 'col-span-9',
+      10: 'col-span-10',
+      11: 'col-span-11',
+      12: 'col-span-12',
+    };
+    const rowSpanClasses: Record<number, string> = {
+      1: 'row-span-1',
+      2: 'row-span-2',
+      3: 'row-span-3',
+      4: 'row-span-4',
+    };
+    return `${colSpanClasses[grid.w] || 'col-span-4'} ${rowSpanClasses[grid.h] || 'row-span-1'}`;
+  };
+
+  return (
+    <div className="mb-6">
+      {/* Section Header */}
+      <button
+        onClick={() => setCollapsed(!collapsed)}
+        className="flex items-center w-full text-left mb-4 group"
+      >
+        {collapsed ? (
+          <ChevronRight className="w-5 h-5 text-gray-500 mr-2" />
+        ) : (
+          <ChevronDown className="w-5 h-5 text-gray-500 mr-2" />
+        )}
+        <div>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 group-hover:text-blue-600">
+            {section.title}
+          </h2>
+          {section.description && (
+            <p className="text-sm text-gray-500">{section.description}</p>
+          )}
+        </div>
+      </button>
+
+      {/* Widgets Grid */}
+      {!collapsed && (
+        <div
+          className="grid grid-cols-12 gap-4"
+          style={{
+            gridAutoRows: '140px', // Base row height
+          }}
+        >
+          {section.widgets.map((widget) => (
+            <div key={widget.id} className={getGridClass(widget)}>
+              {renderWidget(
+                widget,
+                widgetData[widget.id] || null,
+                widgetLoading[widget.id] ?? true,
+                widgetErrors[widget.id],
+                () => fetchWidgetData(widget.id),
+                widget.type === 'table'
+                  ? (page) => handlePageChange(widget.id, page)
+                  : undefined,
+                tablePagination[widget.id] || 1
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

web/components/dashboard/DynamicDashboard.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { useState } from 'react';
+import { RefreshCw, Calendar, Building2 } from 'lucide-react';
+import type { DashboardConfig } from '@/lib/pipeline-types';
+import { DashboardSection } from './DashboardSection';
+
+interface DynamicDashboardProps {
+  pipelineId: string;
+  config: DashboardConfig;
+  businessId?: string;
+}
+
+// Time range options
+const TIME_RANGES = [
+  { value: '7d', label: 'Last 7 days' },
+  { value: '14d', label: 'Last 14 days' },
+  { value: '30d', label: 'Last 30 days' },
+  { value: '90d', label: 'Last 90 days' },
+];
+
+/**
+ * Dynamic dashboard that renders from a DashboardConfig.
+ *
+ * This component:
+ * - Renders sections based on the config
+ * - Provides time range and business filters
+ * - Handles global refresh
+ */
+export function DynamicDashboard({
+  pipelineId,
+  config,
+  businessId: initialBusinessId,
+}: DynamicDashboardProps) {
+  const [timeRange, setTimeRange] = useState(config.default_time_range || '30d');
+  const [businessId, setBusinessId] = useState(initialBusinessId);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  // Force refresh all widgets
+  const handleRefresh = () => {
+    setRefreshKey((prev) => prev + 1);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Dashboard Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+            {config.title}
+          </h1>
+          {config.description && (
+            <p className="text-gray-500 mt-1">{config.description}</p>
+          )}
+        </div>
+
+        {/* Controls */}
+        <div className="flex items-center space-x-3">
+          {/* Business Filter (placeholder) */}
+          {businessId && (
+            <div className="flex items-center text-sm text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-3 py-2 rounded-md">
+              <Building2 className="w-4 h-4 mr-2" />
+              <span className="truncate max-w-[150px]">{businessId}</span>
+            </div>
+          )}
+
+          {/* Time Range Selector */}
+          <div className="relative">
+            <select
+              value={timeRange}
+              onChange={(e) => setTimeRange(e.target.value)}
+              className="appearance-none bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md pl-9 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              {TIME_RANGES.map((range) => (
+                <option key={range.value} value={range.value}>
+                  {range.label}
+                </option>
+              ))}
+            </select>
+            <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+          </div>
+
+          {/* Refresh Button */}
+          <button
+            onClick={handleRefresh}
+            className="p-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md"
+            title="Refresh all widgets"
+          >
+            <RefreshCw className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Sections */}
+      {config.sections.map((section) => (
+        <DashboardSection
+          key={`${section.id}-${refreshKey}`}
+          section={section}
+          pipelineId={pipelineId}
+          businessId={businessId}
+          timeRange={timeRange}
+        />
+      ))}
+    </div>
+  );
+}

web/components/dashboard/WidgetRegistry.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import type { ComponentType } from 'react';
+import type { WidgetConfig, WidgetType, WidgetData } from '@/lib/pipeline-types';
+import { StatCard } from './widgets/StatCard';
+import { LineChartWidget } from './widgets/LineChart';
+import { BarChartWidget } from './widgets/BarChart';
+import { PieChartWidget } from './widgets/PieChart';
+import { DataTableWidget } from './widgets/DataTable';
+import { HeatmapWidget } from './widgets/Heatmap';
+
+// Common widget props
+export interface WidgetComponentProps {
+  config: WidgetConfig;
+  data: WidgetData | null;
+  loading: boolean;
+  error?: string;
+  onRefresh?: () => void;
+  onPageChange?: (page: number) => void;
+  currentPage?: number;
+}
+
+// Widget component type
+type WidgetComponent = ComponentType<WidgetComponentProps>;
+
+/**
+ * Registry mapping widget types to their React components.
+ */
+const WIDGET_COMPONENTS: Record<WidgetType, WidgetComponent> = {
+  stat_card: StatCard as WidgetComponent,
+  line_chart: LineChartWidget as WidgetComponent,
+  bar_chart: BarChartWidget as WidgetComponent,
+  pie_chart: PieChartWidget as WidgetComponent,
+  table: DataTableWidget as WidgetComponent,
+  heatmap: HeatmapWidget as WidgetComponent,
+  // Placeholder for unimplemented types
+  area_chart: LineChartWidget as WidgetComponent, // Use line chart as fallback
+  gauge: StatCard as WidgetComponent, // Use stat card as fallback
+};
+
+/**
+ * Get the component for a widget type.
+ */
+export function getWidgetComponent(type: WidgetType): WidgetComponent | null {
+  return WIDGET_COMPONENTS[type] || null;
+}
+
+/**
+ * Check if a widget type is supported.
+ */
+export function isWidgetTypeSupported(type: string): type is WidgetType {
+  return type in WIDGET_COMPONENTS;
+}
+
+/**
+ * Render a widget based on its configuration.
+ */
+export function renderWidget(
+  config: WidgetConfig,
+  data: WidgetData | null,
+  loading: boolean,
+  error?: string,
+  onRefresh?: () => void,
+  onPageChange?: (page: number) => void,
+  currentPage?: number
+): React.ReactNode {
+  const Component = WIDGET_COMPONENTS[config.type];
+
+  if (!Component) {
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        <p className="text-red-500">Unknown widget type: {config.type}</p>
+      </div>
+    );
+  }
+
+  return (
+    <Component
+      config={config}
+      data={data}
+      loading={loading}
+      error={error}
+      onRefresh={onRefresh}
+      onPageChange={onPageChange}
+      currentPage={currentPage}
+    />
+  );
+}
+
+// Export widget components for direct use
+export {
+  StatCard,
+  LineChartWidget,
+  BarChartWidget,
+  PieChartWidget,
+  DataTableWidget,
+  HeatmapWidget,
+};

web/components/dashboard/index.ts

@@ -0,0 +1,26 @@
+/**
+ * Dashboard component exports.
+ *
+ * This module provides the dynamic dashboard system that renders
+ * pipeline dashboards from configuration.
+ */
+
+// Main components
+export { DynamicDashboard } from './DynamicDashboard';
+export { DashboardSection } from './DashboardSection';
+
+// Widget registry
+export {
+  getWidgetComponent,
+  isWidgetTypeSupported,
+  renderWidget,
+} from './WidgetRegistry';
+
+// Individual widgets
+export { StatCard } from './widgets/StatCard';
+export { LineChartWidget } from './widgets/LineChart';
+export { BarChartWidget } from './widgets/BarChart';
+export { PieChartWidget } from './widgets/PieChart';
+export { DataTableWidget } from './widgets/DataTable';
+export { HeatmapWidget } from './widgets/Heatmap';
+export { WidgetWrapper } from './widgets/WidgetWrapper';

web/components/dashboard/widgets/BarChart.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+import type { WidgetConfig, ChartData, ChartWidgetConfig } from '@/lib/pipeline-types';
+import { WidgetWrapper } from './WidgetWrapper';
+
+interface BarChartWidgetProps {
+  config: WidgetConfig;
+  data: ChartData | null;
+  loading: boolean;
+  error?: string;
+  onRefresh?: () => void;
+}
+
+// Default colors for series
+const DEFAULT_COLORS = [
+  '#3b82f6', // blue
+  '#22c55e', // green
+  '#ef4444', // red
+  '#eab308', // yellow
+  '#8b5cf6', // purple
+  '#ec4899', // pink
+  '#06b6d4', // cyan
+];
+
+/**
+ * Bar chart widget using Recharts.
+ */
+export function BarChartWidget({
+  config,
+  data,
+  loading,
+  error,
+  onRefresh,
+}: BarChartWidgetProps) {
+  const chartConfig = config.config as ChartWidgetConfig;
+  const chartData = data?.data || [];
+
+  return (
+    <WidgetWrapper config={config} loading={loading} error={error} onRefresh={onRefresh}>
+      {chartData.length === 0 ? (
+        <div className="flex items-center justify-center h-full text-gray-500">
+          No data available
+        </div>
+      ) : (
+        <ResponsiveContainer width="100%" height="100%">
+          <RechartsBarChart
+            data={chartData}
+            margin={{ top: 5, right: 20, left: 0, bottom: 5 }}
+          >
+            {chartConfig.show_grid !== false && (
+              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+            )}
+            <XAxis
+              dataKey={chartConfig.x_axis?.key || 'x'}
+              tick={{ fontSize: 12 }}
+              tickLine={false}
+              axisLine={{ stroke: '#e5e7eb' }}
+            />
+            <YAxis
+              tick={{ fontSize: 12 }}
+              tickLine={false}
+              axisLine={{ stroke: '#e5e7eb' }}
+              label={
+                chartConfig.y_axis?.label
+                  ? {
+                      value: chartConfig.y_axis.label,
+                      angle: -90,
+                      position: 'insideLeft',
+                      style: { fontSize: 12 },
+                    }
+                  : undefined
+              }
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: 'white',
+                border: '1px solid #e5e7eb',
+                borderRadius: '0.375rem',
+              }}
+            />
+            {chartConfig.show_legend !== false && <Legend />}
+            {chartConfig.series?.map((series, index) => (
+              <Bar
+                key={series.key}
+                dataKey={series.key}
+                name={series.name}
+                fill={series.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length]}
+                radius={[4, 4, 0, 0]}
+              />
+            ))}
+          </RechartsBarChart>
+        </ResponsiveContainer>
+      )}
+    </WidgetWrapper>
+  );
+}

web/components/dashboard/widgets/DataTable.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import type { WidgetConfig, TableData, TableWidgetConfig } from '@/lib/pipeline-types';
+import { WidgetWrapper } from './WidgetWrapper';
+
+interface DataTableWidgetProps {
+  config: WidgetConfig;
+  data: TableData | null;
+  loading: boolean;
+  error?: string;
+  onRefresh?: () => void;
+  onPageChange?: (page: number) => void;
+  currentPage?: number;
+}
+
+/**
+ * Data table widget with pagination.
+ */
+export function DataTableWidget({
+  config,
+  data,
+  loading,
+  error,
+  onRefresh,
+  onPageChange,
+  currentPage = 1,
+}: DataTableWidgetProps) {
+  const tableConfig = config.config as TableWidgetConfig;
+  const rows = data?.data || [];
+  const total = data?.total || 0;
+  const pageSize = tableConfig.page_size || 10;
+  const totalPages = Math.ceil(total / pageSize);
+
+  return (
+    <WidgetWrapper config={config} loading={loading} error={error} onRefresh={onRefresh}>
+      {rows.length === 0 ? (
+        <div className="flex items-center justify-center h-full text-gray-500">
+          No data available
+        </div>
+      ) : (
+        <div className="flex flex-col h-full">
+          {/* Table */}
+          <div className="flex-1 overflow-auto">
+            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+              <thead className="bg-gray-50 dark:bg-gray-800 sticky top-0">
+                <tr>
+                  {tableConfig.columns.map((col) => (
+                    <th
+                      key={col.key}
+                      className={`px-4 py-3 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider ${
+                        col.align === 'right'
+                          ? 'text-right'
+                          : col.align === 'center'
+                          ? 'text-center'
+                          : 'text-left'
+                      }`}
+                      style={{ width: col.width ? `${col.width}px` : undefined }}
+                    >
+                      {col.header}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
+                {rows.map((row, rowIndex) => (
+                  <tr
+                    key={row[tableConfig.row_key] as string || rowIndex}
+                    className="hover:bg-gray-50 dark:hover:bg-gray-800"
+                  >
+                    {tableConfig.columns.map((col) => (
+                      <td
+                        key={col.key}
+                        className={`px-4 py-3 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap ${
+                          col.align === 'right'
+                            ? 'text-right'
+                            : col.align === 'center'
+                            ? 'text-center'
+                            : 'text-left'
+                        }`}
+                      >
+                        {formatCellValue(row[col.key], col.format)}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination */}
+          {tableConfig.show_pagination !== false && totalPages > 1 && onPageChange && (
+            <div className="flex items-center justify-between px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+              <div className="text-sm text-gray-500">
+                Showing {(currentPage - 1) * pageSize + 1} to{' '}
+                {Math.min(currentPage * pageSize, total)} of {total}
+              </div>
+              <div className="flex items-center space-x-2">
+                <button
+                  onClick={() => onPageChange(currentPage - 1)}
+                  disabled={currentPage <= 1}
+                  className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <ChevronLeft className="w-5 h-5" />
+                </button>
+                <span className="text-sm text-gray-700 dark:text-gray-300">
+                  Page {currentPage} of {totalPages}
+                </span>
+                <button
+                  onClick={() => onPageChange(currentPage + 1)}
+                  disabled={currentPage >= totalPages}
+                  className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <ChevronRight className="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </WidgetWrapper>
+  );
+}
+
+function formatCellValue(value: unknown, format?: string): string {
+  if (value === null || value === undefined) return '-';
+  if (typeof value === 'number') {
+    if (format?.includes('%')) {
+      return `${value.toFixed(1)}%`;
+    }
+    return value.toLocaleString();
+  }
+  return String(value);
+}

web/components/dashboard/widgets/Heatmap.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import type { WidgetConfig, ChartData, HeatmapConfig } from '@/lib/pipeline-types';
+import { WidgetWrapper } from './WidgetWrapper';
+
+interface HeatmapWidgetProps {
+  config: WidgetConfig;
+  data: ChartData | null;
+  loading: boolean;
+  error?: string;
+  onRefresh?: () => void;
+}
+
+/**
+ * Heatmap widget for displaying 2D data grids.
+ */
+export function HeatmapWidget({
+  config,
+  data,
+  loading,
+  error,
+  onRefresh,
+}: HeatmapWidgetProps) {
+  const heatmapConfig = config.config as HeatmapConfig;
+  const rawData = data?.data || [];
+
+  // Extract unique x and y values
+  const xValues = [...new Set(rawData.map((d) => d[heatmapConfig.x_key] as string))];
+  const yValues = [...new Set(rawData.map((d) => d[heatmapConfig.y_key] as string))];
+
+  // Find min/max values for color scaling
+  const values = rawData.map((d) => d[heatmapConfig.value_key] as number);
+  const minValue = Math.min(...values, 0);
+  const maxValue = Math.max(...values, 1);
+
+  // Create lookup map
+  const valueMap = new Map<string, number>();
+  rawData.forEach((d) => {
+    const key = `${d[heatmapConfig.y_key]}-${d[heatmapConfig.x_key]}`;
+    valueMap.set(key, d[heatmapConfig.value_key] as number);
+  });
+
+  // Get color for a value
+  const getColor = (value: number): string => {
+    const colors = heatmapConfig.color_scale || ['#f0fdf4', '#22c55e'];
+    const ratio = maxValue === minValue ? 0.5 : (value - minValue) / (maxValue - minValue);
+
+    // Simple interpolation between first and last color
+    if (colors.length === 2) {
+      return interpolateColor(colors[0], colors[1], ratio);
+    }
+    return colors[Math.min(Math.floor(ratio * colors.length), colors.length - 1)];
+  };
+
+  return (
+    <WidgetWrapper config={config} loading={loading} error={error} onRefresh={onRefresh}>
+      {rawData.length === 0 ? (
+        <div className="flex items-center justify-center h-full text-gray-500">
+          No data available
+        </div>
+      ) : (
+        <div className="overflow-auto h-full">
+          <table className="min-w-full">
+            <thead>
+              <tr>
+                <th className="px-2 py-2 text-xs font-medium text-gray-500" />
+                {xValues.map((x) => (
+                  <th
+                    key={x}
+                    className="px-2 py-2 text-xs font-medium text-gray-500 text-center"
+                  >
+                    {x}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {yValues.map((y) => (
+                <tr key={y}>
+                  <td className="px-2 py-2 text-xs font-medium text-gray-700 dark:text-gray-300">
+                    {y}
+                  </td>
+                  {xValues.map((x) => {
+                    const key = `${y}-${x}`;
+                    const value = valueMap.get(key) || 0;
+                    return (
+                      <td
+                        key={key}
+                        className="px-2 py-2 text-center"
+                        style={{ backgroundColor: getColor(value) }}
+                        title={`${y}, ${x}: ${value}`}
+                      >
+                        {heatmapConfig.show_values && (
+                          <span className="text-xs font-medium text-gray-800">
+                            {value.toLocaleString()}
+                          </span>
+                        )}
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </WidgetWrapper>
+  );
+}
+
+/**
+ * Interpolate between two hex colors.
+ */
+function interpolateColor(color1: string, color2: string, ratio: number): string {
+  const hex = (c: string) => parseInt(c, 16);
+  const r1 = hex(color1.slice(1, 3));
+  const g1 = hex(color1.slice(3, 5));
+  const b1 = hex(color1.slice(5, 7));
+  const r2 = hex(color2.slice(1, 3));
+  const g2 = hex(color2.slice(3, 5));
+  const b2 = hex(color2.slice(5, 7));
+
+  const r = Math.round(r1 + (r2 - r1) * ratio);
+  const g = Math.round(g1 + (g2 - g1) * ratio);
+  const b = Math.round(b1 + (b2 - b1) * ratio);
+
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}

web/components/dashboard/widgets/LineChart.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import {
+  LineChart as RechartsLineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+import type { WidgetConfig, ChartData, ChartWidgetConfig } from '@/lib/pipeline-types';
+import { WidgetWrapper } from './WidgetWrapper';
+
+interface LineChartWidgetProps {
+  config: WidgetConfig;
+  data: ChartData | null;
+  loading: boolean;
+  error?: string;
+  onRefresh?: () => void;
+}
+
+// Default colors for series
+const DEFAULT_COLORS = [
+  '#3b82f6', // blue
+  '#22c55e', // green
+  '#ef4444', // red
+  '#eab308', // yellow
+  '#8b5cf6', // purple
+  '#ec4899', // pink
+  '#06b6d4', // cyan
+];
+
+/**
+ * Line chart widget using Recharts.
+ */
+export function LineChartWidget({
+  config,
+  data,
+  loading,
+  error,
+  onRefresh,
+}: LineChartWidgetProps) {
+  const chartConfig = config.config as ChartWidgetConfig;
+  const chartData = data?.data || [];
+
+  return (
+    <WidgetWrapper config={config} loading={loading} error={error} onRefresh={onRefresh}>
+      {chartData.length === 0 ? (
+        <div className="flex items-center justify-center h-full text-gray-500">
+          No data available
+        </div>
+      ) : (
+        <ResponsiveContainer width="100%" height="100%">
+          <RechartsLineChart
+            data={chartData}
+            margin={{ top: 5, right: 20, left: 0, bottom: 5 }}
+          >
+            {chartConfig.show_grid !== false && (
+              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+            )}
+            <XAxis
+              dataKey={chartConfig.x_axis?.key || 'x'}
+              tick={{ fontSize: 12 }}
+              tickLine={false}
+              axisLine={{ stroke: '#e5e7eb' }}
+            />
+            <YAxis
+              tick={{ fontSize: 12 }}
+              tickLine={false}
+              axisLine={{ stroke: '#e5e7eb' }}
+              label={
+                chartConfig.y_axis?.label
+                  ? {
+                      value: chartConfig.y_axis.label,
+                      angle: -90,
+                      position: 'insideLeft',
+                      style: { fontSize: 12 },
+                    }
+                  : undefined
+              }
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: 'white',
+                border: '1px solid #e5e7eb',
+                borderRadius: '0.375rem',
+              }}
+            />
+            {chartConfig.show_legend !== false && <Legend />}
+            {chartConfig.series?.map((series, index) => (
+              <Line
+                key={series.key}
+                type="monotone"
+                dataKey={series.key}
+                name={series.name}
+                stroke={series.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length]}
+                strokeWidth={2}
+                dot={false}
+                activeDot={{ r: 4 }}
+              />
+            ))}
+          </RechartsLineChart>
+        </ResponsiveContainer>
+      )}
+    </WidgetWrapper>
+  );
+}

web/components/dashboard/widgets/PieChart.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import {
+  PieChart as RechartsPieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+import type { WidgetConfig, ChartData, PieChartConfig } from '@/lib/pipeline-types';
+import { WidgetWrapper } from './WidgetWrapper';
+
+interface PieChartWidgetProps {
+  config: WidgetConfig;
+  data: ChartData | null;
+  loading: boolean;
+  error?: string;
+  onRefresh?: () => void;
+}
+
+// Default colors for pie slices
+const DEFAULT_COLORS = [
+  '#3b82f6', // blue
+  '#22c55e', // green
+  '#ef4444', // red
+  '#eab308', // yellow
+  '#8b5cf6', // purple
+  '#ec4899', // pink
+  '#06b6d4', // cyan
+  '#f97316', // orange
+];
+
+/**
+ * Pie/Donut chart widget using Recharts.
+ */
+export function PieChartWidget({
+  config,
+  data,
+  loading,
+  error,
+  onRefresh,
+}: PieChartWidgetProps) {
+  const chartConfig = config.config as PieChartConfig;
+  const chartData = data?.data || [];
+  const colors = chartConfig.colors || DEFAULT_COLORS;
+  const innerRadius = chartConfig.inner_radius || 0; // 0 = pie, > 0 = donut
+
+  // Transform data to use consistent keys
+  const transformedData = chartData.map((item) => ({
+    name: item[chartConfig.label_key] as string,
+    value: item[chartConfig.value_key] as number,
+  }));
+
+  return (
+    <WidgetWrapper config={config} loading={loading} error={error} onRefresh={onRefresh}>
+      {transformedData.length === 0 ? (
+        <div className="flex items-center justify-center h-full text-gray-500">
+          No data available
+        </div>
+      ) : (
+        <ResponsiveContainer width="100%" height="100%">
+          <RechartsPieChart>
+            <Pie
+              data={transformedData}
+              cx="50%"
+              cy="50%"
+              innerRadius={innerRadius}
+              outerRadius="80%"
+              dataKey="value"
+              nameKey="name"
+              label={
+                chartConfig.show_labels !== false
+                  ? ({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`
+                  : undefined
+              }
+              labelLine={chartConfig.show_labels !== false}
+            >
+              {transformedData.map((_, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={colors[index % colors.length]}
+                />
+              ))}
+            </Pie>
+            <Tooltip
+              contentStyle={{
+                backgroundColor: 'white',
+                border: '1px solid #e5e7eb',
+                borderRadius: '0.375rem',
+              }}
+              formatter={(value: number) => [value.toLocaleString(), 'Count']}
+            />
+            {chartConfig.show_legend !== false && (
+              <Legend
+                layout="horizontal"
+                verticalAlign="bottom"
+                align="center"
+              />
+            )}
+          </RechartsPieChart>
+        </ResponsiveContainer>
+      )}
+    </WidgetWrapper>
+  );
+}

web/components/dashboard/widgets/StatCard.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import {
+  TrendingUp,
+  TrendingDown,
+  MessageSquare,
+  CheckCircle,
+  AlertTriangle,
+  Star,
+  Activity,
+} from 'lucide-react';
+import type { WidgetConfig, StatCardData, StatCardConfig } from '@/lib/pipeline-types';
+import { WidgetWrapper } from './WidgetWrapper';
+
+interface StatCardProps {
+  config: WidgetConfig;
+  data: StatCardData | null;
+  loading: boolean;
+  error?: string;
+  onRefresh?: () => void;
+}
+
+// Icon mapping
+const ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  'message-square': MessageSquare,
+  'check-circle': CheckCircle,
+  'alert-triangle': AlertTriangle,
+  star: Star,
+  activity: Activity,
+};
+
+// Color mapping
+const COLORS: Record<string, string> = {
+  blue: 'text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-900/30',
+  green: 'text-green-600 bg-green-100 dark:text-green-400 dark:bg-green-900/30',
+  red: 'text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-900/30',
+  yellow: 'text-yellow-600 bg-yellow-100 dark:text-yellow-400 dark:bg-yellow-900/30',
+  purple: 'text-purple-600 bg-purple-100 dark:text-purple-400 dark:bg-purple-900/30',
+  gray: 'text-gray-600 bg-gray-100 dark:text-gray-400 dark:bg-gray-700',
+};
+
+/**
+ * Format a value according to a format string.
+ * Supports: {value:,} for thousands, {value:.1f} for decimals, {value:.1%} for percentages
+ */
+function formatValue(value: number | string, format?: string): string {
+  if (!format) return String(value);
+
+  const num = typeof value === 'string' ? parseFloat(value) : value;
+  if (isNaN(num)) return String(value);
+
+  // Simple format parsing
+  if (format.includes(':,}')) {
+    return num.toLocaleString();
+  }
+  if (format.includes(':.1f}')) {
+    return num.toFixed(1);
+  }
+  if (format.includes(':.2f}')) {
+    return num.toFixed(2);
+  }
+  if (format.includes(':.1%}')) {
+    return (num * 100).toFixed(1) + '%';
+  }
+
+  return String(value);
+}
+
+/**
+ * Stat card widget for displaying KPIs.
+ */
+export function StatCard({ config, data, loading, error, onRefresh }: StatCardProps) {
+  const widgetConfig = config.config as StatCardConfig;
+  const Icon = widgetConfig.icon ? ICONS[widgetConfig.icon] : Activity;
+  const colorClass = widgetConfig.color ? COLORS[widgetConfig.color] : COLORS.gray;
+
+  // Extract value and trend from data
+  const value = data?.[widgetConfig.value_key] ?? 0;
+  const trend = widgetConfig.trend_key ? data?.[widgetConfig.trend_key] : undefined;
+
+  return (
+    <WidgetWrapper config={config} loading={loading} error={error} onRefresh={onRefresh}>
+      <div className="flex items-center justify-between h-full">
+        <div className="flex-1">
+          <p className="text-3xl font-bold text-gray-900 dark:text-gray-100">
+            {formatValue(value, widgetConfig.format)}
+          </p>
+          {trend !== undefined && (
+            <div className="flex items-center mt-1">
+              {Number(trend) >= 0 ? (
+                <TrendingUp className="w-4 h-4 text-green-500 mr-1" />
+              ) : (
+                <TrendingDown className="w-4 h-4 text-red-500 mr-1" />
+              )}
+              <span
+                className={`text-sm ${
+                  Number(trend) >= 0 ? 'text-green-600' : 'text-red-600'
+                }`}
+              >
+                {formatValue(trend, widgetConfig.trend_format || '{value:.1f}')}
+              </span>
+            </div>
+          )}
+        </div>
+        {Icon && (
+          <div className={`p-3 rounded-full ${colorClass}`}>
+            <Icon className="w-6 h-6" />
+          </div>
+        )}
+      </div>
+    </WidgetWrapper>
+  );
+}

web/components/dashboard/widgets/WidgetWrapper.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { RefreshCw, AlertCircle } from 'lucide-react';
+import type { WidgetConfig } from '@/lib/pipeline-types';
+
+interface WidgetWrapperProps {
+  config: WidgetConfig;
+  loading: boolean;
+  error?: string;
+  onRefresh?: () => void;
+  children: React.ReactNode;
+}
+
+/**
+ * Common wrapper for dashboard widgets.
+ * Handles loading, error states, and refresh functionality.
+ */
+export function WidgetWrapper({
+  config,
+  loading,
+  error,
+  onRefresh,
+  children,
+}: WidgetWrapperProps) {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm h-full flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+        <h3 className="font-medium text-gray-900 dark:text-gray-100 text-sm">
+          {config.title}
+        </h3>
+        {onRefresh && (
+          <button
+            onClick={onRefresh}
+            disabled={loading}
+            className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-50"
+            title="Refresh"
+          >
+            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+          </button>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 p-4 overflow-auto">
+        {error ? (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <AlertCircle className="w-8 h-8 text-red-500 mx-auto mb-2" />
+              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+            </div>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center h-full">
+            <div className="animate-pulse flex flex-col items-center">
+              <div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded mb-2" />
+              <div className="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded" />
+            </div>
+          </div>
+        ) : (
+          children
+        )}
+      </div>
+    </div>
+  );
+}

web/lib/pipeline-api.ts

@@ -0,0 +1,213 @@
+/**
+ * Pipeline API client functions.
+ *
+ * Provides methods for interacting with the pipeline API endpoints.
+ */
+
+import type {
+  PipelineInfo,
+  PipelineDetail,
+  DashboardConfig,
+  ExecutionStatus,
+  WidgetData,
+} from './pipeline-types';
+
+// API base URL - defaults to same origin in production
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || '';
+
+/**
+ * Fetch all registered pipelines.
+ */
+export async function listPipelines(enabledOnly = true): Promise<PipelineInfo[]> {
+  const url = `${API_BASE}/api/pipelines?enabled_only=${enabledOnly}`;
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch pipelines: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+/**
+ * Fetch details for a specific pipeline.
+ */
+export async function getPipeline(pipelineId: string): Promise<PipelineDetail> {
+  const url = `${API_BASE}/api/pipelines/${pipelineId}`;
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    if (response.status === 404) {
+      throw new Error(`Pipeline not found: ${pipelineId}`);
+    }
+    throw new Error(`Failed to fetch pipeline: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+/**
+ * Fetch dashboard configuration for a pipeline.
+ */
+export async function getDashboardConfig(pipelineId: string): Promise<DashboardConfig> {
+  const url = `${API_BASE}/api/pipelines/${pipelineId}/dashboard`;
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch dashboard config: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+/**
+ * Fetch data for a specific widget.
+ */
+export async function getWidgetData(
+  pipelineId: string,
+  widgetId: string,
+  params: {
+    business_id?: string;
+    time_range?: string;
+    page?: number;
+    page_size?: number;
+  } = {}
+): Promise<WidgetData> {
+  const searchParams = new URLSearchParams();
+
+  if (params.business_id) {
+    searchParams.set('business_id', params.business_id);
+  }
+  if (params.time_range) {
+    searchParams.set('time_range', params.time_range);
+  }
+  if (params.page) {
+    searchParams.set('page', params.page.toString());
+  }
+  if (params.page_size) {
+    searchParams.set('page_size', params.page_size.toString());
+  }
+
+  const url = `${API_BASE}/api/pipelines/${pipelineId}/widgets/${widgetId}?${searchParams}`;
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch widget data: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+/**
+ * Execute a pipeline.
+ */
+export async function executePipeline(
+  pipelineId: string,
+  request: {
+    job_id?: string;
+    business_id?: string;
+    input_data?: Record<string, unknown>;
+    stages?: string[];
+    options?: Record<string, unknown>;
+  }
+): Promise<{
+  execution_id: string;
+  pipeline_id: string;
+  success: boolean;
+  stages_run: string[];
+  error?: string;
+}> {
+  const url = `${API_BASE}/api/pipelines/${pipelineId}/execute`;
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(request),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to execute pipeline: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+/**
+ * List execution history for a pipeline.
+ */
+export async function listExecutions(
+  pipelineId: string,
+  params: {
+    status?: string;
+    limit?: number;
+    offset?: number;
+  } = {}
+): Promise<ExecutionStatus[]> {
+  const searchParams = new URLSearchParams();
+
+  if (params.status) {
+    searchParams.set('status', params.status);
+  }
+  if (params.limit) {
+    searchParams.set('limit', params.limit.toString());
+  }
+  if (params.offset) {
+    searchParams.set('offset', params.offset.toString());
+  }
+
+  const url = `${API_BASE}/api/pipelines/${pipelineId}/executions?${searchParams}`;
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch executions: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+/**
+ * Enable a pipeline.
+ */
+export async function enablePipeline(pipelineId: string): Promise<void> {
+  const url = `${API_BASE}/api/pipelines/${pipelineId}/enable`;
+  const response = await fetch(url, { method: 'POST' });
+
+  if (!response.ok) {
+    throw new Error(`Failed to enable pipeline: ${response.statusText}`);
+  }
+}
+
+/**
+ * Disable a pipeline.
+ */
+export async function disablePipeline(pipelineId: string): Promise<void> {
+  const url = `${API_BASE}/api/pipelines/${pipelineId}/disable`;
+  const response = await fetch(url, { method: 'POST' });
+
+  if (!response.ok) {
+    throw new Error(`Failed to disable pipeline: ${response.statusText}`);
+  }
+}
+
+/**
+ * Check pipeline health.
+ */
+export async function checkPipelineHealth(
+  pipelineId: string
+): Promise<{
+  pipeline_id: string;
+  healthy: boolean;
+  checks?: Record<string, unknown>;
+  message?: string;
+  error?: string;
+}> {
+  const url = `${API_BASE}/api/pipelines/${pipelineId}/health`;
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error(`Failed to check pipeline health: ${response.statusText}`);
+  }
+
+  return response.json();
+}

web/lib/pipeline-types.ts

@@ -0,0 +1,194 @@
+/**
+ * TypeScript types for the pipeline system.
+ *
+ * These types mirror the Python contracts in pipeline_core/contracts.py
+ */
+
+// Widget types supported by the dashboard
+export type WidgetType =
+  | 'stat_card'
+  | 'line_chart'
+  | 'bar_chart'
+  | 'pie_chart'
+  | 'table'
+  | 'heatmap'
+  | 'area_chart'
+  | 'gauge';
+
+// Grid position for dashboard layout
+export interface GridPosition {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+// Widget configuration
+export interface WidgetConfig {
+  id: string;
+  type: WidgetType;
+  title: string;
+  grid: GridPosition;
+  config: Record<string, unknown>;
+  data_endpoint?: string;
+  refresh_interval?: number;
+}
+
+// Dashboard section containing widgets
+export interface DashboardSection {
+  id: string;
+  title: string;
+  description?: string;
+  widgets: WidgetConfig[];
+  collapsed?: boolean;
+}
+
+// Full dashboard configuration
+export interface DashboardConfig {
+  pipeline_id: string;
+  title: string;
+  description?: string;
+  sections: DashboardSection[];
+  default_time_range?: string;
+  refresh_interval?: number;
+}
+
+// Pipeline info (summary)
+export interface PipelineInfo {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  is_enabled: boolean;
+  stages: string[];
+  input_type: string;
+}
+
+// Pipeline detail (full info)
+export interface PipelineDetail extends PipelineInfo {
+  module_path: string;
+  config?: Record<string, unknown>;
+  created_at?: string;
+  updated_at?: string;
+}
+
+// Execution status
+export interface ExecutionStatus {
+  id: string;
+  pipeline_id: string;
+  job_id?: string;
+  business_id?: string;
+  status: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled';
+  stages_requested: string[];
+  stages_completed: string[];
+  current_stage?: string;
+  progress: number;
+  error_message?: string;
+  started_at?: string;
+  completed_at?: string;
+  created_at?: string;
+}
+
+// Widget-specific data types
+
+export interface StatCardData {
+  [key: string]: number | string;
+}
+
+export interface ChartDataPoint {
+  [key: string]: number | string;
+}
+
+export interface ChartData {
+  data: ChartDataPoint[];
+}
+
+export interface TableData {
+  data: Record<string, unknown>[];
+  total: number;
+}
+
+export type WidgetData = StatCardData | ChartData | TableData;
+
+// Widget props base
+export interface WidgetProps {
+  config: WidgetConfig;
+  data: WidgetData | null;
+  loading: boolean;
+  error?: string;
+  onRefresh?: () => void;
+}
+
+// Stat card specific config
+export interface StatCardConfig {
+  value_key: string;
+  label?: string;
+  format?: string;
+  trend_key?: string;
+  trend_format?: string;
+  icon?: string;
+  color?: string;
+}
+
+// Chart config
+export interface ChartAxisConfig {
+  key: string;
+  label?: string;
+  type?: 'number' | 'category' | 'time';
+  format?: string;
+}
+
+export interface ChartSeriesConfig {
+  key: string;
+  name: string;
+  color?: string;
+  type?: 'line' | 'bar' | 'area';
+}
+
+export interface ChartWidgetConfig {
+  x_axis: ChartAxisConfig;
+  y_axis: ChartAxisConfig;
+  series: ChartSeriesConfig[];
+  stacked?: boolean;
+  show_legend?: boolean;
+  show_grid?: boolean;
+}
+
+// Pie chart config
+export interface PieChartConfig {
+  value_key: string;
+  label_key: string;
+  colors?: string[];
+  show_legend?: boolean;
+  show_labels?: boolean;
+  inner_radius?: number;
+}
+
+// Table config
+export interface TableColumnConfig {
+  key: string;
+  header: string;
+  width?: number;
+  align?: 'left' | 'center' | 'right';
+  format?: string;
+  sortable?: boolean;
+}
+
+export interface TableWidgetConfig {
+  columns: TableColumnConfig[];
+  row_key: string;
+  page_size?: number;
+  show_pagination?: boolean;
+  sortable?: boolean;
+  filterable?: boolean;
+}
+
+// Heatmap config
+export interface HeatmapConfig {
+  x_key: string;
+  y_key: string;
+  value_key: string;
+  color_scale?: string[];
+  show_values?: boolean;
+  format?: string;
+}