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