@aion0/forge 0.10.79 → 0.10.81

package/RELEASE_NOTES.md

@@ -1,12 +1,11 @@
-# Forge v0.10.79
+# Forge v0.10.81
 
 Released: 2026-06-14
 
-## Changes since v0.10.78
+## Changes since v0.10.80
 
 ### Other
-- feat(terminal): hide API key env vars from pane echo + container-aware claude auth
-- Move file-tree computation server-side (fix browser stack overflow on large repos) (#35)
+- feat(ui): URL deep-linking + Automation/History default + Pipeline History page
 
 
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.10.78...v0.10.79
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.10.80...v0.10.81

package/app/api/tasks/[id]/hook/stop/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+import { fireTmuxHook, completeStaleTmuxTask } from '@/lib/task-tmux-backend';
+
+// Called by the Claude Code Stop hook when a tmux-backend task turn completes.
+// The hook script (installed in ~/.claude/settings.json) reads task-context.json
+// from the project dir and POSTs here. We resolve the awaited promise in executeTmuxTask.
+// If no waiter exists (server restart mid-task), fall back to directly completing the task.
+export async function POST(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const handled = fireTmuxHook(id);
+  if (!handled) {
+    completeStaleTmuxTask(id);
+  }
+  return NextResponse.json({ ok: true });
+}

package/app/api/tasks/route.ts

@@ -14,7 +14,7 @@ export async function GET(req: Request) {
 
 // Create a new task
 export async function POST(req: Request) {
-  const { projectName, prompt, priority, newSession, conversationId, scheduledAt, mode, watchConfig, agent } = await req.json();
+  const { projectName, prompt, priority, newSession, conversationId, scheduledAt, mode, watchConfig, agent, backend } = await req.json();
 
   if (!projectName || !prompt) {
     return NextResponse.json({ error: 'projectName and prompt are required' }, { status: 400 });
@@ -38,6 +38,7 @@ export async function POST(req: Request) {
     mode: mode || 'prompt',
     watchConfig: watchConfig || undefined,
     agent: agent || undefined,
+    backend: backend === 'tmux' ? 'tmux' : undefined,
   });
 
   return NextResponse.json(task);

package/cli/mw.mjs

@@ -1352,7 +1352,7 @@ var init_clean = __esm({
 
 // cli/mw.ts
 var _cliPort = process.argv.find((a, i) => i > 0 && process.argv[i - 1] === "--port");
-var BASE2 = process.env.MW_URL || `http://localhost:${_cliPort || "3000"}`;
+var BASE2 = process.env.MW_URL || `http://localhost:${_cliPort || "8403"}`;
 var [, , cmd, ...args] = process.argv;
 async function checkForUpdate() {
   try {
@@ -1463,19 +1463,21 @@ async function main() {
     case "task":
     case "t": {
       const newSession = args.includes("--new");
-      const filtered = args.filter((a) => a !== "--new");
+      const useTmux = args.includes("--tmux");
+      const filtered = args.filter((a) => a !== "--new" && a !== "--tmux");
       const project = filtered[0];
       const prompt = filtered.slice(1).join(" ");
       if (!project || !prompt) {
-        console.log("Usage: mw task <project> <prompt> [--new]");
-        console.log("  --new    Start a fresh session (ignore previous context)");
+        console.log("Usage: mw task <project> <prompt> [--new] [--tmux]");
+        console.log("  --new     Start a fresh session (ignore previous context)");
+        console.log("  --tmux    Run via tmux backend (interactive mode, subscription billing)");
         console.log('Example: mw task my-app "Fix the login bug"');
         process.exit(1);
       }
       const task = await api3("/api/tasks", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ projectName: project, prompt, newSession })
+        body: JSON.stringify({ projectName: project, prompt, newSession, ...useTmux ? { backend: "tmux" } : {} })
       });
       const session = task.conversationId ? "(continuing session)" : "(new session)";
       console.log(`\u2713 Task ${task.id} created ${session}`);

package/cli/mw.ts

@@ -16,7 +16,7 @@
  */
 
 const _cliPort = process.argv.find((a, i) => i > 0 && process.argv[i - 1] === '--port');
-const BASE = process.env.MW_URL || `http://localhost:${_cliPort || '3000'}`;
+const BASE = process.env.MW_URL || `http://localhost:${_cliPort || '8403'}`;
 
 const [, , cmd, ...args] = process.argv;
 
@@ -149,21 +149,23 @@ async function main() {
 
     case 'task':
     case 't': {
-      // Parse --new flag to force a fresh session
+      // Parse --new and --tmux flags
       const newSession = args.includes('--new');
-      const filtered = args.filter(a => a !== '--new');
+      const useTmux = args.includes('--tmux');
+      const filtered = args.filter(a => a !== '--new' && a !== '--tmux');
       const project = filtered[0];
       const prompt = filtered.slice(1).join(' ');
       if (!project || !prompt) {
-        console.log('Usage: mw task <project> <prompt> [--new]');
-        console.log('  --new    Start a fresh session (ignore previous context)');
+        console.log('Usage: mw task <project> <prompt> [--new] [--tmux]');
+        console.log('  --new     Start a fresh session (ignore previous context)');
+        console.log('  --tmux    Run via tmux backend (interactive mode, subscription billing)');
         console.log('Example: mw task my-app "Fix the login bug"');
         process.exit(1);
       }
       const task = await api('/api/tasks', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ projectName: project, prompt, newSession }),
+        body: JSON.stringify({ projectName: project, prompt, newSession, ...(useTmux ? { backend: 'tmux' } : {}) }),
       });
       const session = task.conversationId ? '(continuing session)' : '(new session)';
       console.log(`✓ Task ${task.id} created ${session}`);

package/components/Dashboard.tsx

@@ -14,6 +14,7 @@ const CodeViewer = lazy(() => import('./CodeViewer'));
 const ProjectManager = lazy(() => import('./ProjectManager'));
 const BrowserPanel = lazy(() => import('./BrowserPanel'));
 const PipelineView = lazy(() => import('./PipelineView'));
+const PipelineHistory = lazy(() => import('./PipelineHistory'));
 const JobsView = lazy(() => import('./JobsView'));
 const SchedulesView = lazy(() => import('./SchedulesView'));
 const HelpDialog = lazy(() => import('./HelpDialog'));
@@ -103,7 +104,7 @@ function FloatingBrowser({ onClose }: { onClose: () => void }) {
 }
 
 export default function Dashboard({ user }: { user: any }) {
-  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'pipelines' | 'jobs' | 'schedules' | 'workspace' | 'skills' | 'logs' | 'usage'>('terminal');
+  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'pipelines' | 'history' | 'jobs' | 'schedules' | 'workspace' | 'skills' | 'logs' | 'usage'>('history');
 
   // Honour `?view=<mode>` from the URL so external links (eg the VSCode
   // extension) can deep-link straight into a section. Only views that have a
@@ -116,7 +117,7 @@ export default function Dashboard({ user }: { user: any }) {
     if (raw) {
       const aliases: Record<string, string> = { workspace: 'projects', sessions: 'projects' };
       const v = aliases[raw] || raw;
-      const valid = ['tasks', 'terminal', 'docs', 'projects', 'pipelines', 'jobs', 'schedules', 'skills', 'logs', 'usage'];
+      const valid = ['tasks', 'terminal', 'docs', 'projects', 'pipelines', 'history', 'jobs', 'schedules', 'skills', 'logs', 'usage'];
       if (valid.includes(v)) setViewMode(v as any);
     }
     // Optional deep-link to a specific pipeline run — used by the extension
@@ -137,6 +138,24 @@ export default function Dashboard({ user }: { user: any }) {
   const [browserDragging, setBrowserDragging] = useState(false);
   const [tasks, setTasks] = useState<Task[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
+
+  // Write the current section back into the URL so clicking a menu updates the
+  // address bar and links are shareable / bookmarkable. replaceState → the
+  // Dashboard never remounts (terminals stay alive) and history isn't spammed.
+  // Skip the very first run so the incoming deep-link (read on mount above) is
+  // not clobbered before it's consumed.
+  const didSyncUrl = useRef(false);
+  useEffect(() => {
+    if (!didSyncUrl.current) { didSyncUrl.current = true; return; }
+    const params = new URLSearchParams(window.location.search);
+    params.set('view', viewMode);
+    if (viewMode === 'tasks' && activeTaskId) params.set('taskId', activeTaskId);
+    else params.delete('taskId');
+    // pipeline deep-link id only makes sense inside the pipelines view.
+    if (viewMode !== 'pipelines') { params.delete('pipeline'); params.delete('pipelineId'); }
+    window.history.replaceState(null, '', `${window.location.pathname}?${params.toString()}`);
+  }, [viewMode, activeTaskId]);
+
   const [showNewTask, setShowNewTask] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [needsOnboarding, setNeedsOnboarding] = useState(false);
@@ -282,10 +301,14 @@ export default function Dashboard({ user }: { user: any }) {
   // Listen for open-terminal events from ProjectManager
   useEffect(() => {
     const handler = (e: Event) => {
-      const { projectPath, projectName, agentId, resumeMode, sessionId, profileEnv } = (e as CustomEvent).detail;
+      const { projectPath, projectName, agentId, resumeMode, sessionId, profileEnv, tmuxSession, tmuxLabel } = (e as CustomEvent).detail;
       setViewMode('terminal');
       setTimeout(() => {
-        terminalRef.current?.openProjectTerminal?.(projectPath, projectName, agentId, resumeMode, sessionId, profileEnv);
+        if (tmuxSession) {
+          terminalRef.current?.openExistingSession?.(tmuxSession, tmuxLabel || tmuxSession);
+        } else {
+          terminalRef.current?.openProjectTerminal?.(projectPath, projectName, agentId, resumeMode, sessionId, profileEnv);
+        }
       }, 300);
     };
     window.addEventListener('forge:open-terminal', handler);
@@ -484,6 +507,27 @@ export default function Dashboard({ user }: { user: any }) {
 
           {/* View mode toggle */}
           <div className="flex items-center bg-[var(--bg-tertiary)] rounded p-0.5">
+            {/* Automation — first. Sub-tabs: pipelines / tasks / schedules.
+                Jobs is deprecated and hidden from the nav (backend still
+                present in case of reversion, but no UI entry point). */}
+            <button
+              onClick={() => {
+                if (!['tasks', 'pipelines', 'schedules', 'history'].includes(viewMode)) setViewMode('history');
+              }}
+              className={`text-[12px] px-2.5 py-0.5 rounded transition-colors ${
+                ['tasks', 'pipelines', 'schedules', 'history'].includes(viewMode)
+                  ? 'bg-[var(--accent)]/15 text-[var(--accent)] shadow-sm'
+                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              }`}
+            >
+              Automation
+            </button>
+            {/* Activity sub-pill — sits next to Automation since its content
+                (running pipelines + upcoming schedules + recent runs) is the
+                live read-side of Automation. Click anywhere → dropdown with
+                3 sections + a "view" jump to the run. */}
+            <Suspense fallback={null}><ActivityPanel /></Suspense>
+            <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30 mx-1.5" />
             {/* Workspace */}
             {(['terminal', 'projects'] as const).map(mode => (
               <button
@@ -511,27 +555,6 @@ export default function Dashboard({ user }: { user: any }) {
               Docs
             </button>
             <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30 mx-1.5" />
-            {/* Automation — sub-tabs: tasks / pipelines / schedules.
-                Jobs is deprecated and hidden from the nav (backend still
-                present in case of reversion, but no UI entry point). */}
-            <button
-              onClick={() => {
-                if (!['tasks', 'pipelines', 'schedules'].includes(viewMode)) setViewMode('schedules');
-              }}
-              className={`text-[12px] px-2.5 py-0.5 rounded transition-colors ${
-                ['tasks', 'pipelines', 'schedules'].includes(viewMode)
-                  ? 'bg-[var(--accent)]/15 text-[var(--accent)] shadow-sm'
-                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-              }`}
-            >
-              Automation
-            </button>
-            {/* Activity sub-pill — sits next to Automation since its content
-                (running pipelines + upcoming schedules + recent runs) is the
-                live read-side of Automation. Click anywhere → dropdown with
-                3 sections + a "view" jump to the run. */}
-            <Suspense fallback={null}><ActivityPanel /></Suspense>
-            <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30 mx-1.5" />
             {/* Marketplace */}
             <button
               onClick={() => setViewMode('skills')}
@@ -907,10 +930,10 @@ export default function Dashboard({ user }: { user: any }) {
 
       {/* Automation secondary toolbar — sub-tabs + context actions.
           Lives below the main header so it never squishes the top nav. */}
-      {['tasks', 'pipelines', 'schedules'].includes(viewMode) && (
+      {['tasks', 'pipelines', 'schedules', 'history'].includes(viewMode) && (
         <div className="h-8 border-b border-[var(--border)] flex items-center justify-between px-4 shrink-0 bg-[var(--bg-tertiary)]/40">
           <div className="flex items-center gap-1">
-            {(['schedules', 'pipelines', 'tasks'] as const).map((m) => (
+            {(['history', 'pipelines', 'tasks', 'schedules'] as const).map((m) => (
               <button
                 key={m}
                 onClick={() => setViewMode(m)}
@@ -920,7 +943,7 @@ export default function Dashboard({ user }: { user: any }) {
                     : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
                 }`}
               >
-                {{ tasks: 'Tasks', pipelines: 'Pipelines', schedules: 'Schedules' }[m]}
+                {{ tasks: 'Tasks', pipelines: 'Pipelines', schedules: 'Schedules', history: 'History' }[m]}
               </button>
             ))}
             {viewMode === 'tasks' && (
@@ -1054,6 +1077,16 @@ export default function Dashboard({ user }: { user: any }) {
           </Suspense>
         )}
 
+        {/* History — flat list of all pipeline runs, expandable */}
+        {viewMode === 'history' && (
+          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
+            <PipelineHistory
+              onViewTask={(taskId) => { setViewMode('tasks'); setActiveTaskId(taskId); }}
+              onViewPipeline={(pipelineId) => { setPendingPipelineId(pipelineId); setViewMode('pipelines'); }}
+            />
+          </Suspense>
+        )}
+
         {/* Jobs — scheduled connector polls (Forge web read-mostly; create via extension) */}
         {viewMode === 'jobs' && (
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>

package/components/InlinePipelineView.tsx

@@ -52,10 +52,12 @@ function InlineLiveLog({ log }: { log: TaskLogEntry[] }) {
 
 // ─── DAG node card ────────────────────────────────────────
 
-function InlineDagNode({ nodeId, node }: { nodeId: string; node: any }) {
+function InlineDagNode({ nodeId, node, onViewTask }: { nodeId: string; node: any; onViewTask?: (taskId: string) => void }) {
   const isRunning = node.status === 'running';
   const log = useTaskStreamInline(node.taskId, isRunning);
   const statusIcon = node.status === 'done' ? '✅' : node.status === 'failed' ? '❌' : node.status === 'running' ? '🔄' : node.status === 'skipped' ? '⏭' : '⏳';
+  const outputs: Record<string, string> = node.outputs || {};
+  const outputKeys = Object.keys(outputs).filter(k => (outputs[k] ?? '').length > 0);
   return (
     <div className={`border rounded p-2 ${
       isRunning ? 'border-yellow-500/40 bg-yellow-500/5' :
@@ -66,18 +68,33 @@ function InlineDagNode({ nodeId, node }: { nodeId: string; node: any }) {
       <div className="flex items-center gap-1.5 text-[9px]">
         <span>{statusIcon}</span>
         <span className="font-semibold text-[var(--text-primary)]">{nodeId}</span>
-        {node.taskId && <span className="text-[7px] text-[var(--accent)] font-mono">task:{node.taskId}</span>}
+        {node.taskId && (
+          onViewTask
+            ? <button onClick={() => onViewTask(node.taskId)} className="text-[7px] text-[var(--accent)] font-mono hover:underline">task:{node.taskId} ↗</button>
+            : <span className="text-[7px] text-[var(--accent)] font-mono">task:{node.taskId}</span>
+        )}
         <span className="text-[var(--text-secondary)] ml-auto">{node.status}</span>
       </div>
       {isRunning && <div className="mt-1.5"><InlineLiveLog log={log} /></div>}
-      {node.error && <div className="text-[8px] text-red-400 mt-1">{node.error}</div>}
+      {node.error && <div className="text-[8px] text-red-400 mt-1 whitespace-pre-wrap break-words">{node.error}</div>}
+      {outputKeys.map((key) => {
+        const isDiff = key === 'diff' || /diff/i.test(key);
+        return (
+          <details key={key} className="mt-1 text-[8px]">
+            <summary className="cursor-pointer text-[var(--accent)]">
+              {isDiff ? 'diff' : key === 'result' || key === 'report' || key === 'summary' ? `result: ${key}` : `output: ${key}`} ({outputs[key].length} chars)
+            </summary>
+            <pre className="mt-1 max-h-[200px] overflow-auto bg-[var(--bg-primary)] rounded p-1.5 whitespace-pre-wrap break-words text-[var(--text-secondary)]">{outputs[key].slice(0, 8000)}{outputs[key].length > 8000 ? '\n…(truncated)' : ''}</pre>
+          </details>
+        );
+      })}
     </div>
   );
 }
 
 // ─── Main component ───────────────────────────────────────
 
-export default function InlinePipelineView({ pipeline, onRefresh }: { pipeline: any; onRefresh: () => void }) {
+export default function InlinePipelineView({ pipeline, onRefresh, onViewTask }: { pipeline: any; onRefresh: () => void; onViewTask?: (taskId: string) => void }) {
   useEffect(() => {
     if (pipeline.status !== 'running') return;
     const timer = setInterval(onRefresh, 3000);
@@ -97,7 +114,7 @@ export default function InlinePipelineView({ pipeline, onRefresh }: { pipeline:
       ) : (
         <div className="px-3 py-2 space-y-1.5">
           {pipeline.nodeOrder.map((nodeId: string) => (
-            <InlineDagNode key={nodeId} nodeId={nodeId} node={pipeline.nodes[nodeId]} />
+            <InlineDagNode key={nodeId} nodeId={nodeId} node={pipeline.nodes[nodeId]} onViewTask={onViewTask} />
           ))}
         </div>
       )}

package/components/PipelineHistory.tsx

@@ -0,0 +1,306 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef, lazy, Suspense } from 'react';
+
+const InlinePipelineView = lazy(() => import('./InlinePipelineView'));
+
+// Light summary shape returned by GET /api/pipelines (heavy node outputs stripped).
+interface PipelineSummary {
+  id: string;
+  workflowName: string;
+  status: 'running' | 'done' | 'failed' | 'cancelled';
+  type?: string;
+  createdAt: string;
+  completedAt?: string;
+  nodeOrder: string[];
+  nodes: Record<string, { status: string; iterations?: number }>;
+  input?: Record<string, string>;
+}
+
+const STATUS_META: Record<string, { icon: string; cls: string }> = {
+  running:   { icon: '🔄', cls: 'text-yellow-400' },
+  done:      { icon: '✅', cls: 'text-green-400' },
+  failed:    { icon: '❌', cls: 'text-red-400' },
+  cancelled: { icon: '⏹', cls: 'text-[var(--text-secondary)]' },
+};
+
+function relTime(iso?: string): string {
+  if (!iso) return '';
+  const t = new Date(iso).getTime();
+  if (Number.isNaN(t)) return '';
+  const s = Math.floor((Date.now() - t) / 1000);
+  if (s < 60) return `${s}s ago`;
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  return `${Math.floor(s / 86400)}d ago`;
+}
+
+/** A compact one-liner of the most useful input fields. */
+function inputSummary(input?: Record<string, string>): string {
+  if (!input) return '';
+  const keys = ['bug_id', 'mr_url', 'mr_iid', 'project', 'issue_id', 'base_branch'];
+  const parts: string[] = [];
+  for (const k of keys) {
+    if (input[k]) parts.push(`${k}=${String(input[k]).slice(0, 40)}`);
+  }
+  return parts.join('  ·  ');
+}
+
+export default function PipelineHistory({ onViewTask, onViewPipeline }: {
+  onViewTask: (taskId: string) => void;
+  onViewPipeline: (pipelineId: string) => void;
+}) {
+  const PAGE = 20;
+  const [list, setList] = useState<PipelineSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hasMore, setHasMore] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [fullById, setFullById] = useState<Record<string, any>>({});
+  const [statusFilter, setStatusFilter] = useState<'all' | 'running' | 'done' | 'failed'>('all');
+  const [search, setSearch] = useState('');
+  const [showCleanup, setShowCleanup] = useState(false);
+  const expandedRef = useRef(expandedId);
+  expandedRef.current = expandedId;
+
+  // Merge a fetched page into the list by id (fresh copy wins), newest-first.
+  // Lets the 4s poll refresh running runs without dropping older loaded pages.
+  const mergeIn = useCallback((incoming: PipelineSummary[]) => {
+    setList(prev => {
+      const byId = new Map(prev.map(p => [p.id, p]));
+      for (const p of incoming) byId.set(p.id, p);
+      return [...byId.values()].sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+    });
+  }, []);
+
+  // First page (newest 20). Also the 4s poll target — keeps running runs fresh.
+  const fetchFirst = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/pipelines?limit=${PAGE}`);
+      if (res.ok) {
+        const page: PipelineSummary[] = await res.json();
+        mergeIn(page);
+        setHasMore(page.length === PAGE);
+      }
+    } catch { /* keep prior list */ }
+    finally { setLoading(false); }
+  }, [mergeIn]);
+
+  // Cursor pagination: fetch the next 20 older than the oldest loaded run.
+  const loadMore = useCallback(async () => {
+    setLoadingMore(true);
+    try {
+      const oldest = list.length ? list[list.length - 1].createdAt : undefined;
+      const res = await fetch(`/api/pipelines?limit=${PAGE}${oldest ? `&before=${encodeURIComponent(oldest)}` : ''}`);
+      if (res.ok) {
+        const page: PipelineSummary[] = await res.json();
+        mergeIn(page);
+        setHasMore(page.length === PAGE);
+      }
+    } catch { /* ignore */ }
+    finally { setLoadingMore(false); }
+  }, [list, mergeIn]);
+
+  const fetchFull = useCallback(async (id: string) => {
+    try {
+      const res = await fetch(`/api/pipelines/${id}`);
+      if (res.ok) {
+        const full = await res.json();
+        setFullById(prev => ({ ...prev, [id]: full }));
+      }
+    } catch { /* ignore */ }
+  }, []);
+
+  // Initial load + poll every 4s so running pipelines update live.
+  useEffect(() => {
+    fetchFirst();
+    const t = setInterval(() => {
+      fetchFirst();
+      const id = expandedRef.current;
+      if (id) fetchFull(id); // keep the open run fresh while it runs
+    }, 4000);
+    return () => clearInterval(t);
+  }, [fetchFirst, fetchFull]);
+
+  const toggle = (id: string) => {
+    if (expandedId === id) { setExpandedId(null); return; }
+    setExpandedId(id);
+    if (!fullById[id]) fetchFull(id);
+  };
+
+  const op = async (id: string, action: 'cancel' | 'delete') => {
+    if (action === 'delete' && !confirm('Delete this pipeline run? This cannot be undone.')) return;
+    try {
+      await fetch(`/api/pipelines/${id}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action }),
+      });
+      if (action === 'delete') { setExpandedId(null); setList(prev => prev.filter(p => p.id !== id)); }
+      fetchFirst();
+      if (action === 'cancel') fetchFull(id);
+    } catch { /* ignore */ }
+  };
+
+  // Unified cleanup — bulk-delete terminal (done/failed/cancelled) runs.
+  // Running/pending runs are always skipped server-side.
+  const cleanup = async (olderThanDays: number, label: string) => {
+    if (!confirm(`Delete ${label}? Running pipelines are kept. This cannot be undone.`)) return;
+    setShowCleanup(false);
+    try {
+      const res = await fetch('/api/pipelines/bulk-delete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ older_than_days: olderThanDays }),
+      });
+      const data = res.ok ? await res.json() : null;
+      // Many rows gone — rebuild the list from scratch.
+      setExpandedId(null);
+      setList([]);
+      setLoading(true);
+      await fetchFirst();
+      if (data) alert(`Cleaned up ${data.removed} pipeline run${data.removed === 1 ? '' : 's'}.`);
+    } catch { /* ignore */ }
+  };
+
+  const filtered = list.filter(p => {
+    if (statusFilter !== 'all' && p.status !== statusFilter) return false;
+    if (search) {
+      const hay = `${p.workflowName} ${inputSummary(p.input)} ${p.id}`.toLowerCase();
+      if (!hay.includes(search.toLowerCase())) return false;
+    }
+    return true;
+  });
+
+  const runningCount = list.filter(p => p.status === 'running').length;
+
+  return (
+    <div className="flex-1 min-h-0 flex flex-col">
+      {/* Filter bar */}
+      <div className="flex items-center gap-2 px-4 py-2 border-b border-[var(--border)] shrink-0">
+        <div className="flex items-center gap-1">
+          {(['all', 'running', 'done', 'failed'] as const).map(s => (
+            <button
+              key={s}
+              onClick={() => setStatusFilter(s)}
+              className={`text-[11px] px-2 py-0.5 rounded ${
+                statusFilter === s
+                  ? 'bg-[var(--accent)]/15 text-[var(--accent)]'
+                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              }`}
+            >
+              {s === 'all' ? 'All' : s[0].toUpperCase() + s.slice(1)}
+              {s === 'running' && runningCount > 0 ? ` (${runningCount})` : ''}
+            </button>
+          ))}
+        </div>
+        <input
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          placeholder="Filter by workflow / bug_id / id…"
+          className="text-[11px] px-2 py-0.5 rounded bg-[var(--bg-tertiary)] border border-[var(--border)] text-[var(--text-primary)] flex-1 max-w-[320px] outline-none focus:border-[var(--accent)]"
+        />
+        <span className="text-[10px] text-[var(--text-secondary)] ml-auto">{filtered.length} run{filtered.length === 1 ? '' : 's'}</span>
+        {/* Unified cleanup */}
+        <div className="relative">
+          <button
+            onClick={() => setShowCleanup(v => !v)}
+            className="text-[11px] px-2 py-0.5 rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] border border-[var(--border)]"
+            title="Bulk-delete finished pipeline runs"
+          >
+            Cleanup ▾
+          </button>
+          {showCleanup && (
+            <>
+              <div className="fixed inset-0 z-10" onClick={() => setShowCleanup(false)} />
+              <div className="absolute right-0 mt-1 z-20 bg-[var(--bg-secondary)] border border-[var(--border)] rounded shadow-lg py-1 w-56 text-[11px]">
+                <div className="px-3 py-1 text-[9px] text-[var(--text-secondary)] uppercase tracking-wide">Delete finished runs</div>
+                <button onClick={() => cleanup(30, 'finished runs older than 30 days')} className="w-full text-left px-3 py-1.5 hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)]">Older than 30 days</button>
+                <button onClick={() => cleanup(7, 'finished runs older than 7 days')} className="w-full text-left px-3 py-1.5 hover:bg-[var(--bg-tertiary)] text-[var(--text-primary)]">Older than 7 days</button>
+                <button onClick={() => cleanup(0, 'ALL finished runs')} className="w-full text-left px-3 py-1.5 hover:bg-[var(--bg-tertiary)] text-red-400">All finished (done/failed/cancelled)</button>
+                <div className="px-3 py-1 text-[9px] text-[var(--text-secondary)] border-t border-[var(--border)] mt-1">Running pipelines are always kept.</div>
+              </div>
+            </>
+          )}
+        </div>
+        <button onClick={fetchFirst} className="text-[11px] px-2 py-0.5 rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)]" title="Refresh">↻</button>
+      </div>
+
+      {/* List */}
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        {loading && list.length === 0 ? (
+          <div className="flex items-center justify-center h-32 text-[var(--text-secondary)] text-[12px]">Loading…</div>
+        ) : filtered.length === 0 ? (
+          <div className="flex items-center justify-center h-32 text-[var(--text-secondary)] text-[12px]">No pipeline runs.</div>
+        ) : (
+          <div className="divide-y divide-[var(--border)]">
+            {filtered.map(p => {
+              const meta = STATUS_META[p.status] || STATUS_META.cancelled;
+              const total = p.nodeOrder.length;
+              const done = Object.values(p.nodes).filter(n => n.status === 'done').length;
+              const isOpen = expandedId === p.id;
+              const full = fullById[p.id];
+              return (
+                <div key={p.id}>
+                  {/* Row header */}
+                  <div
+                    onClick={() => toggle(p.id)}
+                    className="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-[var(--bg-tertiary)]/40"
+                  >
+                    <span className={`text-[11px] w-4 text-center transition-transform ${isOpen ? 'rotate-90' : ''}`}>▸</span>
+                    <span className="text-[12px]">{meta.icon}</span>
+                    <span className="text-[12px] font-medium text-[var(--text-primary)] truncate max-w-[220px]">{p.workflowName}</span>
+                    <span className={`text-[10px] ${meta.cls}`}>{p.status}</span>
+                    <span className="text-[10px] text-[var(--text-secondary)]">{done}/{total} steps</span>
+                    {inputSummary(p.input) && (
+                      <span className="text-[10px] text-[var(--text-secondary)] truncate max-w-[280px] font-mono">{inputSummary(p.input)}</span>
+                    )}
+                    <span className="text-[10px] text-[var(--text-secondary)] ml-auto whitespace-nowrap">{relTime(p.createdAt)}</span>
+                  </div>
+
+                  {/* Expanded detail */}
+                  {isOpen && (
+                    <div className="bg-[var(--bg-tertiary)]/30 border-t border-[var(--border)]">
+                      {/* Action bar */}
+                      <div className="flex items-center gap-2 px-4 py-1.5 text-[11px]">
+                        <button
+                          onClick={() => onViewPipeline(p.id)}
+                          className="px-2 py-0.5 rounded bg-[var(--accent)]/15 text-[var(--accent)] hover:bg-[var(--accent)]/25"
+                        >
+                          Open in Pipelines ↗
+                        </button>
+                        {p.status === 'running' && (
+                          <button onClick={() => op(p.id, 'cancel')} className="px-2 py-0.5 rounded text-yellow-400 hover:bg-yellow-400/10">Cancel</button>
+                        )}
+                        <button onClick={() => op(p.id, 'delete')} className="px-2 py-0.5 rounded text-red-400 hover:bg-red-400/10">Delete</button>
+                        <span className="text-[10px] text-[var(--text-secondary)] ml-auto font-mono">id:{p.id}</span>
+                      </div>
+                      {full ? (
+                        <Suspense fallback={<div className="px-4 py-2 text-[10px] text-[var(--text-secondary)]">Loading detail…</div>}>
+                          <InlinePipelineView pipeline={full} onRefresh={() => fetchFull(p.id)} onViewTask={onViewTask} />
+                        </Suspense>
+                      ) : (
+                        <div className="px-4 py-3 text-[10px] text-[var(--text-secondary)]">Loading detail…</div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {hasMore && !(loading && list.length === 0) && (
+          <div className="flex justify-center py-3">
+            <button
+              onClick={loadMore}
+              disabled={loadingMore}
+              className="text-[11px] px-3 py-1 rounded border border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-50"
+            >
+              {loadingMore ? 'Loading…' : 'Load more'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}