feat: Add TanStack table for pipeline executions with debug modal

- Create ExecutionsView component with TanStack Table
- Add status filter buttons with count badges
- Add action buttons: Analytics, Metrics, Debug
- Add debug modal with AI copy-paste button for failed executions
- Generate detailed debug report with stage metrics and error context
- Update executions page to use new component

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

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

@@ -3,75 +3,14 @@
 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 { ArrowLeft, PlayCircle, 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`;
-}
+import ExecutionsView from '@/components/ExecutionsView';
 
 /**
  * Execution history page for a pipeline.
+ * Uses TanStack Table for filtering, sorting, and pagination.
  */
 export default function ExecutionsPage() {
   const params = useParams();
@@ -81,7 +20,6 @@ export default function ExecutionsPage() {
   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);
@@ -90,10 +28,7 @@ export default function ExecutionsPage() {
     try {
       const [pipelineData, executionsData] = await Promise.all([
         getPipeline(pipelineId),
-        listExecutions(pipelineId, {
-          status: statusFilter || undefined,
-          limit: 50,
-        }),
+        listExecutions(pipelineId, { limit: 100 }),
       ]);
       setPipeline(pipelineData);
       setExecutions(executionsData);
@@ -108,66 +43,44 @@ export default function ExecutionsPage() {
     if (pipelineId) {
       fetchData();
     }
-  }, [pipelineId, statusFilter]);
+  }, [pipelineId]);
 
   return (
-    <div className="p-6">
+    <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 dark:hover:text-gray-300"
+          className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700"
         >
           <ArrowLeft className="w-4 h-4 mr-1" />
-          Back to Dashboard
+          Back to Pipeline
         </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"
+        <Link
+          href={`/pipelines/${pipelineId}/run`}
+          className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium"
         >
-          <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
-          Refresh
-        </button>
+          <PlayCircle className="w-4 h-4 mr-2" />
+          Run Pipeline
+        </Link>
       </div>
 
       {/* Header */}
       <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+        <h1 className="text-2xl font-bold text-gray-900">
           Execution History
         </h1>
         <p className="text-gray-500 mt-1">
-          {pipeline?.name || pipelineId}
+          {pipeline?.name || pipelineId} - View and analyze pipeline executions
         </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>
+          <p className="text-red-600">{error}</p>
           <button
             onClick={fetchData}
             className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
@@ -176,106 +89,21 @@ export default function ExecutionsPage() {
           </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 className="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
+          <div className="animate-pulse space-y-4">
+            <div className="h-10 bg-gray-200 rounded w-full" />
+            <div className="h-12 bg-gray-100 rounded w-full" />
+            <div className="h-12 bg-gray-100 rounded w-full" />
+            <div className="h-12 bg-gray-100 rounded w-full" />
+            <div className="h-12 bg-gray-100 rounded w-full" />
+          </div>
         </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>
+        <ExecutionsView
+          executions={executions}
+          pipelineId={pipelineId}
+          onRefresh={fetchData}
+        />
       )}
     </div>
   );