@aion0/forge 0.10.84 → 0.10.85

package/components/Dashboard.tsx

@@ -27,6 +27,7 @@ const SettingsModal = lazy(() => import('./SettingsModal'));
 const MonitorPanel = lazy(() => import('./MonitorPanel'));
 const LoginStatusPanel = lazy(() => import('./LoginStatusPanel'));
 const ActivityPanel = lazy(() => import('./ActivityPanel'));
+const HomeView = lazy(() => import('./HomeView'));
 const EnterpriseBadge = lazy(() => import('./EnterpriseBadge'));
 const WorkspaceView = lazy(() => import('./WorkspaceView'));
 // WorkspaceTree moved into ProjectDetail — no longer needed at Dashboard level
@@ -104,7 +105,7 @@ function FloatingBrowser({ onClose }: { onClose: () => void }) {
 }
 
 export default function Dashboard({ user }: { user: any }) {
-  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'pipelines' | 'history' | 'jobs' | 'schedules' | 'workspace' | 'skills' | 'logs' | 'usage'>('history');
+  const [viewMode, setViewMode] = useState<'home' | 'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'pipelines' | 'history' | 'jobs' | 'schedules' | 'workspace' | 'skills' | 'logs' | 'usage'>('home');
 
   // 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
@@ -117,7 +118,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', 'history', 'jobs', 'schedules', 'skills', 'logs', 'usage'];
+      const valid = ['home', '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
@@ -507,26 +508,17 @@ 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). */}
+            {/* Home — landing view: web chat + activity panel side-by-side. */}
             <button
-              onClick={() => {
-                if (!['tasks', 'pipelines', 'schedules', 'history'].includes(viewMode)) setViewMode('history');
-              }}
+              onClick={() => setViewMode('home')}
               className={`text-[12px] px-2.5 py-0.5 rounded transition-colors ${
-                ['tasks', 'pipelines', 'schedules', 'history'].includes(viewMode)
+                viewMode === 'home'
                   ? 'bg-[var(--accent)]/15 text-[var(--accent)] shadow-sm'
                   : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
               }`}
             >
-              Automation
+              Home
             </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 => (
@@ -543,6 +535,27 @@ export default function Dashboard({ user }: { user: any }) {
               </button>
             ))}
             <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30 mx-1.5" />
+            {/* Automation — moved AFTER Projects, deemphasized now that Home
+                surfaces pipelines / tasks inline via the right rail. Sub-tabs:
+                pipelines / tasks / schedules. Jobs is deprecated (backend kept
+                for reversion, but no UI entry point). */}
+            <button
+              onClick={() => {
+                if (!['tasks', 'pipelines', 'schedules', 'history'].includes(viewMode)) setViewMode('history');
+              }}
+              className={`text-[11px] px-2 py-0.5 rounded transition-colors opacity-80 hover:opacity-100 ${
+                ['tasks', 'pipelines', 'schedules', 'history'].includes(viewMode)
+                  ? 'bg-[var(--accent)]/15 text-[var(--accent)] shadow-sm opacity-100'
+                  : '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. */}
+            <Suspense fallback={null}><ActivityPanel /></Suspense>
+            <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30 mx-1.5" />
             {/* Docs */}
             <button
               onClick={() => setViewMode('docs')}
@@ -1073,6 +1086,15 @@ export default function Dashboard({ user }: { user: any }) {
           </Suspense>
         </div>
 
+        {/* Home — web chat + activity rail */}
+        {viewMode === 'home' && (
+          <div className="flex-1 flex min-h-0 min-w-0">
+            <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
+              <HomeView />
+            </Suspense>
+          </div>
+        )}
+
         {/* Pipelines */}
         {viewMode === 'pipelines' && (
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>

package/components/HomeView.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback, lazy, Suspense } from 'react';
+
+const WebChatPanel = lazy(() => import('./WebChatPanel'));
+const PipelineActivityPanel = lazy(() => import('./PipelineActivityPanel'));
+
+// Home view: 3 columns with draggable splitters.
+//   col 1 — Session list (inside WebChatPanel; width controlled via prop)
+//   col 2 — Main chat    (WebChatPanel's main area, fluid)
+//   col 3 — Activity     (PipelineActivityPanel; collapsible to vertical strip)
+const LEFT_KEY = 'forge.home.leftWidth';
+const RIGHT_KEY = 'forge.home.rightWidth';
+const RIGHT_COLLAPSED_KEY = 'forge.home.rightCollapsed';
+
+const DEFAULT_LEFT = 208;   // session list
+const DEFAULT_RIGHT = 288;  // activity panel
+const MIN_LEFT = 140;
+const MAX_LEFT = 380;
+const MIN_RIGHT = 200;
+const MAX_RIGHT = 500;
+
+function readNumber(key: string, fallback: number): number {
+  if (typeof window === 'undefined') return fallback;
+  const v = parseInt(localStorage.getItem(key) || '', 10);
+  return Number.isFinite(v) ? v : fallback;
+}
+
+export default function HomeView() {
+  const [leftWidth, setLeftWidth] = useState<number>(() => readNumber(LEFT_KEY, DEFAULT_LEFT));
+  const [rightWidth, setRightWidth] = useState<number>(() => readNumber(RIGHT_KEY, DEFAULT_RIGHT));
+  const [rightCollapsed, setRightCollapsed] = useState<boolean>(() => {
+    if (typeof window === 'undefined') return false;
+    return localStorage.getItem(RIGHT_COLLAPSED_KEY) === '1';
+  });
+
+  // Persist on change (debounced via effect)
+  useEffect(() => { try { localStorage.setItem(LEFT_KEY, String(leftWidth)); } catch {} }, [leftWidth]);
+  useEffect(() => { try { localStorage.setItem(RIGHT_KEY, String(rightWidth)); } catch {} }, [rightWidth]);
+
+  const toggleRight = () => {
+    setRightCollapsed(v => {
+      const next = !v;
+      try { localStorage.setItem(RIGHT_COLLAPSED_KEY, next ? '1' : '0'); } catch {}
+      return next;
+    });
+  };
+
+  // ─── Drag handlers ────────────────────────────────────
+  // Each splitter installs window-level mousemove/mouseup on drag-start;
+  // these auto-clean themselves up on release.
+  const dragRef = useRef<{ which: 'left' | 'right'; startX: number; startW: number } | null>(null);
+
+  const startDrag = useCallback((which: 'left' | 'right') => (e: React.MouseEvent) => {
+    e.preventDefault();
+    dragRef.current = {
+      which,
+      startX: e.clientX,
+      startW: which === 'left' ? leftWidth : rightWidth,
+    };
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+
+    const onMove = (mv: MouseEvent) => {
+      const ctx = dragRef.current;
+      if (!ctx) return;
+      if (ctx.which === 'left') {
+        const next = Math.max(MIN_LEFT, Math.min(MAX_LEFT, ctx.startW + (mv.clientX - ctx.startX)));
+        setLeftWidth(next);
+      } else {
+        const next = Math.max(MIN_RIGHT, Math.min(MAX_RIGHT, ctx.startW - (mv.clientX - ctx.startX)));
+        setRightWidth(next);
+      }
+    };
+    const onUp = () => {
+      dragRef.current = null;
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  }, [leftWidth, rightWidth]);
+
+  return (
+    <div className="flex-1 flex min-h-0 min-w-0">
+      {/* Chat (session list + main chat — WebChatPanel handles both internally).
+          The session-list splitter is rendered INSIDE WebChatPanel, between its
+          aside and main, so it sits at the actual sidebar boundary. */}
+      <Suspense fallback={<div className="flex-1 p-4 text-xs text-[var(--text-secondary)]">Loading chat…</div>}>
+        <WebChatPanel sidebarWidth={leftWidth} onSidebarResizeStart={startDrag('left')} />
+      </Suspense>
+
+      {/* Right rail: collapsible activity panel */}
+      {rightCollapsed ? (
+        <button
+          onClick={toggleRight}
+          title="Show pipeline panel"
+          className="w-7 shrink-0 flex flex-col items-center justify-start pt-3 gap-2 hover:bg-[var(--bg-tertiary)] transition-colors group border-l border-[var(--border)]"
+        >
+          <span className="text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]">‹</span>
+          <span
+            className="text-[10px] tracking-widest text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]"
+            style={{ writingMode: 'vertical-rl' }}
+          >
+            PIPELINES
+          </span>
+        </button>
+      ) : (
+        <>
+          {/* Splitter between chat and activity */}
+          <div
+            onMouseDown={startDrag('right')}
+            className="w-1 shrink-0 cursor-col-resize bg-transparent hover:bg-[var(--accent)]/30 active:bg-[var(--accent)]/50 transition-colors border-l border-[var(--border)]"
+            title="Drag to resize activity panel"
+          />
+          <div
+            className="shrink-0 flex flex-col bg-[var(--bg-secondary)]"
+            style={{ width: rightWidth }}
+          >
+            <div className="flex items-center justify-between px-3 py-2 border-b border-[var(--border)] shrink-0">
+              <span className="text-[11px] font-medium text-[var(--text-primary)]">Activity</span>
+              <button
+                onClick={toggleRight}
+                title="Collapse"
+                className="text-[var(--text-secondary)] hover:text-[var(--text-primary)] text-sm px-1"
+              >
+                ›
+              </button>
+            </div>
+            <div className="flex-1 overflow-hidden">
+              <Suspense fallback={<div className="p-3 text-[10px] text-[var(--text-secondary)]">Loading…</div>}>
+                <PipelineActivityPanel />
+              </Suspense>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/components/PipelineActivityPanel.tsx

@@ -0,0 +1,327 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+
+interface RunningRow {
+  id: string;
+  workflowName: string;
+  status: string;
+  currentNode: string | null;
+  progress: { done: number; total: number };
+  createdAt: string;
+}
+
+interface RecentRow {
+  id: string;
+  workflowName: string;
+  status: string;
+  completedAt: string | null;
+  durationMs: number | null;
+}
+
+interface RunningTaskRow {
+  id: string;
+  project: string;
+  prompt_preview: string;
+  status: string;
+  startedAt: string | null;
+  createdAt: string;
+  agent: string | null;
+}
+
+interface Summary {
+  running: RunningRow[];
+  running_tasks: RunningTaskRow[];
+  recent: RecentRow[];
+}
+
+function statusColor(s: string): string {
+  if (s === 'running' || s === 'queued') return 'text-blue-400';
+  if (s === 'succeeded' || s === 'done') return 'text-green-400';
+  if (s === 'failed') return 'text-red-400';
+  if (s === 'cancelled') return 'text-gray-500';
+  return 'text-[var(--text-secondary)]';
+}
+
+function fmtDuration(ms: number | null): string {
+  if (!ms) return '';
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${Math.round(ms / 60000)}m`;
+}
+
+function fmtRelative(ts: string | null): string {
+  if (!ts) return '';
+  const diff = Date.now() - new Date(ts).getTime();
+  if (diff < 60_000) return `${Math.floor(diff / 1000)}s ago`;
+  if (diff < 3600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  if (diff < 86400_000) return `${Math.floor(diff / 3600_000)}h ago`;
+  return `${Math.floor(diff / 86400_000)}d ago`;
+}
+
+// ─── Inline log ─────────────────────────────────────────
+
+interface InlineLogState {
+  kind: 'task' | 'pipeline';
+  id: string;
+  loading: boolean;
+  lines: string[];
+  error?: string;
+}
+
+function trimEntry(s: string, max = 120): string {
+  const flat = (s || '').replace(/\s+/g, ' ').trim();
+  return flat.length > max ? flat.slice(0, max) + '…' : flat;
+}
+
+async function fetchTaskLog(taskId: string): Promise<string[]> {
+  const res = await fetch(`/api/tasks/${taskId}/log?limit=50`);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const data = await res.json() as { entries: Array<{ type?: string; subtype?: string; tool?: string; content?: string }> };
+  return (data.entries || []).map(e => {
+    const prefix = e.subtype === 'tool_use' ? `⚙ ${e.tool || 'tool'}: ` : e.type === 'result' ? '✓ ' : e.subtype === 'error' ? '✗ ' : '';
+    return prefix + trimEntry(e.content || '');
+  });
+}
+
+async function fetchPipelineLog(pipelineId: string): Promise<string[]> {
+  const res = await fetch(`/api/pipelines/${pipelineId}`);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  // Pipeline shape: nodes is Record<string, PipelineNodeState>, nodeOrder gives display order.
+  const data = await res.json() as {
+    nodes?: Record<string, { status: string; startedAt?: string; completedAt?: string; error?: string; outputs?: Record<string, string>; attempts?: number }>;
+    nodeOrder?: string[];
+    error?: string;
+  };
+  const order = Array.isArray(data.nodeOrder) ? data.nodeOrder : Object.keys(data.nodes || {});
+  const lines: string[] = [];
+  if (data.error) lines.push(`✗ pipeline error: ${trimEntry(data.error, 100)}`);
+  for (const id of order) {
+    const n = data.nodes?.[id];
+    if (!n) continue;
+    const tag = n.status === 'running' ? '▶'
+      : n.status === 'done' || n.status === 'succeeded' ? '✓'
+      : n.status === 'failed' ? '✗'
+      : n.status === 'cancelled' ? '⊘'
+      : '·';
+    const attempts = n.attempts && n.attempts > 1 ? ` (try ${n.attempts})` : '';
+    const err = n.error ? `  — ${trimEntry(n.error, 80)}` : '';
+    lines.push(`${tag} ${id}  [${n.status}]${attempts}${err}`);
+  }
+  return lines;
+}
+
+function InlineLog({ state, onClose }: { state: InlineLogState; onClose: () => void }) {
+  return (
+    <div className="mt-1 mb-1 p-2 bg-black/20 border border-[var(--border)] rounded text-[9.5px] font-mono text-[var(--text-secondary)] max-h-[120px] overflow-y-auto leading-tight">
+      <div className="flex items-center justify-between mb-1 text-[9px] uppercase tracking-wider text-[var(--text-secondary)]/70">
+        <span>{state.kind} log</span>
+        <button onClick={(e) => { e.stopPropagation(); onClose(); }} className="hover:text-[var(--text-primary)]">×</button>
+      </div>
+      {state.loading && <div className="italic">loading…</div>}
+      {state.error && <div className="text-red-400">err: {state.error}</div>}
+      {!state.loading && !state.error && state.lines.length === 0 && <div className="italic">no entries</div>}
+      {state.lines.slice(-50).map((line, i) => (
+        <div key={i} className="truncate" title={line}>{line}</div>
+      ))}
+    </div>
+  );
+}
+
+// Small inline "open full view" button — shown on row hover, click navigates
+// without triggering the row's expand toggle.
+function OpenButton({ onOpen }: { onOpen: () => void }) {
+  return (
+    <button
+      onClick={(e) => { e.stopPropagation(); onOpen(); }}
+      className="opacity-0 group-hover:opacity-100 text-[var(--text-secondary)] hover:text-[var(--accent)] text-[10px] leading-none px-1 transition-opacity"
+      title="Open in full view"
+    >
+      ↗
+    </button>
+  );
+}
+
+// ─── Main panel ─────────────────────────────────────────
+
+export default function PipelineActivityPanel() {
+  const [data, setData] = useState<Summary>({ running: [], running_tasks: [], recent: [] });
+  const [expanded, setExpanded] = useState<InlineLogState | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    const fetchSummary = async () => {
+      try {
+        const res = await fetch('/api/activity/summary');
+        if (!res.ok || !alive) return;
+        const json = await res.json();
+        setData({
+          running: json.running || [],
+          running_tasks: json.running_tasks || [],
+          recent: json.recent || [],
+        });
+      } catch {}
+    };
+    fetchSummary();
+    const iv = setInterval(fetchSummary, 5000);
+    return () => { alive = false; clearInterval(iv); };
+  }, []);
+
+  const toggleExpand = useCallback(async (kind: 'task' | 'pipeline', id: string) => {
+    if (expanded && expanded.id === id && expanded.kind === kind) {
+      setExpanded(null);
+      return;
+    }
+    setExpanded({ kind, id, loading: true, lines: [] });
+    try {
+      const lines = kind === 'task' ? await fetchTaskLog(id) : await fetchPipelineLog(id);
+      setExpanded(cur => (cur && cur.id === id && cur.kind === kind) ? { ...cur, loading: false, lines } : cur);
+    } catch (e: any) {
+      setExpanded(cur => (cur && cur.id === id && cur.kind === kind) ? { ...cur, loading: false, error: e?.message || 'fetch failed' } : cur);
+    }
+  }, [expanded]);
+
+  // Open in a NEW tab so the current Home view (chat + activity rail) stays put.
+  // Dashboard deep-links accept ?view + ?pipelineId / ?taskId.
+  const openPipelineFull = (id: string) => {
+    window.open(`/?view=pipelines&pipelineId=${encodeURIComponent(id)}`, '_blank', 'noopener');
+  };
+  const openTaskFull = (id: string) => {
+    window.open(`/?view=tasks&taskId=${encodeURIComponent(id)}`, '_blank', 'noopener');
+  };
+
+  const isExpanded = (kind: 'task' | 'pipeline', id: string) =>
+    expanded?.id === id && expanded?.kind === kind;
+
+  return (
+    <div className="h-full flex flex-col text-xs overflow-y-auto">
+      {/* Running pipelines */}
+      <div className="px-3 py-2 border-b border-[var(--border)]">
+        <div className="text-[10px] uppercase tracking-wider text-[var(--text-secondary)] mb-1.5 flex items-center gap-1.5">
+          <span>Running Pipelines</span>
+          {data.running.length > 0 && (
+            <span className="text-[var(--accent)]">({data.running.length})</span>
+          )}
+        </div>
+        {data.running.length === 0 ? (
+          <div className="text-[10px] text-[var(--text-secondary)] italic">none</div>
+        ) : (
+          <div className="space-y-1">
+            {data.running.map(p => (
+              <div key={p.id}>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => toggleExpand('pipeline', p.id)}
+                  className={`group w-full text-left p-1.5 rounded transition-colors cursor-pointer ${
+                    isExpanded('pipeline', p.id) ? 'bg-[var(--bg-tertiary)]' : 'hover:bg-[var(--bg-tertiary)]'
+                  }`}
+                  title="Click to peek log"
+                >
+                  <div className="flex items-center justify-between gap-1">
+                    <span className="truncate font-medium">{p.workflowName}</span>
+                    <div className="flex items-center gap-1 shrink-0">
+                      <span className={`text-[9px] ${statusColor(p.status)}`}>{p.status}</span>
+                      <OpenButton onOpen={() => openPipelineFull(p.id)} />
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-between text-[9px] text-[var(--text-secondary)] mt-0.5">
+                    <span className="truncate">{p.currentNode || '—'}</span>
+                    <span className="shrink-0">{p.progress.done}/{p.progress.total}</span>
+                  </div>
+                </div>
+                {isExpanded('pipeline', p.id) && expanded && (
+                  <InlineLog state={expanded} onClose={() => setExpanded(null)} />
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Running tasks */}
+      <div className="px-3 py-2 border-b border-[var(--border)]">
+        <div className="text-[10px] uppercase tracking-wider text-[var(--text-secondary)] mb-1.5 flex items-center gap-1.5">
+          <span>Running Tasks</span>
+          {data.running_tasks.length > 0 && (
+            <span className="text-[var(--accent)]">({data.running_tasks.length})</span>
+          )}
+        </div>
+        {data.running_tasks.length === 0 ? (
+          <div className="text-[10px] text-[var(--text-secondary)] italic">none</div>
+        ) : (
+          <div className="space-y-1">
+            {data.running_tasks.map(t => (
+              <div key={t.id}>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => toggleExpand('task', t.id)}
+                  className={`group w-full text-left p-1.5 rounded transition-colors cursor-pointer ${
+                    isExpanded('task', t.id) ? 'bg-[var(--bg-tertiary)]' : 'hover:bg-[var(--bg-tertiary)]'
+                  }`}
+                  title="Click to peek log"
+                >
+                  <div className="flex items-center justify-between gap-1">
+                    <span className="truncate font-medium">{t.project}</span>
+                    <div className="flex items-center gap-1 shrink-0">
+                      <span className={`text-[9px] ${statusColor(t.status)}`}>{t.status}</span>
+                      <OpenButton onOpen={() => openTaskFull(t.id)} />
+                    </div>
+                  </div>
+                  <div className="text-[9px] text-[var(--text-secondary)] mt-0.5 truncate">
+                    {t.prompt_preview}
+                  </div>
+                </div>
+                {isExpanded('task', t.id) && expanded && (
+                  <InlineLog state={expanded} onClose={() => setExpanded(null)} />
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Recent pipelines */}
+      <div className="px-3 py-2 flex-1">
+        <div className="text-[10px] uppercase tracking-wider text-[var(--text-secondary)] mb-1.5">
+          Recent Runs
+        </div>
+        {data.recent.length === 0 ? (
+          <div className="text-[10px] text-[var(--text-secondary)] italic">none</div>
+        ) : (
+          <div className="space-y-1">
+            {data.recent.map(r => (
+              <div key={r.id}>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => toggleExpand('pipeline', r.id)}
+                  className={`group w-full text-left p-1.5 rounded transition-colors cursor-pointer ${
+                    isExpanded('pipeline', r.id) ? 'bg-[var(--bg-tertiary)]' : 'hover:bg-[var(--bg-tertiary)]'
+                  }`}
+                  title="Click to peek log"
+                >
+                  <div className="flex items-center justify-between gap-1">
+                    <span className="truncate font-medium">{r.workflowName}</span>
+                    <div className="flex items-center gap-1 shrink-0">
+                      <span className={`text-[9px] ${statusColor(r.status)}`}>{r.status}</span>
+                      <OpenButton onOpen={() => openPipelineFull(r.id)} />
+                    </div>
+                  </div>
+                  <div className="flex items-center justify-between text-[9px] text-[var(--text-secondary)] mt-0.5">
+                    <span className="truncate">{fmtRelative(r.completedAt)}</span>
+                    {r.durationMs != null && <span className="shrink-0">{fmtDuration(r.durationMs)}</span>}
+                  </div>
+                </div>
+                {isExpanded('pipeline', r.id) && expanded && (
+                  <InlineLog state={expanded} onClose={() => setExpanded(null)} />
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}