@aion0/forge 0.9.1 → 0.9.2

package/cli/mw.ts

@@ -420,6 +420,32 @@ async function main() {
       break;
     }
 
+    case 'pipeline': {
+      const sub = args[0];
+      if (sub === 'gc') {
+        const dryRun = args.includes('--dry-run') || args.includes('-n');
+        const res = await api('/api/pipelines/gc', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ dry_run: dryRun }),
+        });
+        if (!res.ok) { console.error('error:', res.error); process.exit(1); }
+        console.log(`Scanned: ${res.scanned} pipeline tmp dir(s)`);
+        console.log(`${dryRun ? 'Would remove' : 'Removed'}: ${res.removed.length}`);
+        for (const r of res.removed) console.log(`  - ${r.path}  (${r.reason})`);
+        if (res.kept.length) {
+          console.log(`Kept: ${res.kept.length}`);
+          for (const k of res.kept.slice(0, 10)) console.log(`  - ${k.path}  (${k.reason})`);
+          if (res.kept.length > 10) console.log(`  … ${res.kept.length - 10} more`);
+        }
+      } else {
+        console.log('Usage: forge pipeline gc [--dry-run]');
+        console.log('   Sweeps expired <project>/worktrees/pipeline-<id>/ scratch dirs');
+        console.log('   per settings.pipelineTmpKeep{Failed,Cancelled}Days.');
+      }
+      break;
+    }
+
     case 'server': {
       // Delegate to forge-server.mjs
       const { execSync } = await import('node:child_process');

package/components/ConnectorsPanel.tsx

@@ -247,6 +247,31 @@ export default function ConnectorsPanel() {
     } finally { setTesting(false); }
   }
 
+  // Sync the Forge-stored token into the local `glab` CLI config so
+  // user's shell `glab` uses the same token as Forge pipelines. Avoids
+  // the "shell glab says 401 but Forge connector says OK" split-brain.
+  // gitlab-only for now; other CLIs can be added in the backend route.
+  const [syncingCli, setSyncingCli] = useState(false);
+  const [syncCliResult, setSyncCliResult] = useState<{ ok: boolean; message?: string; error?: string; hint?: string } | null>(null);
+
+  async function syncCli() {
+    if (!selectedId) return;
+    setSyncingCli(true); setSyncCliResult(null);
+    try {
+      // Save first so the server reads the current token (same pattern as Test).
+      await fetch(`/api/connectors/${selectedId}/settings`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ settings: values }),
+      });
+      const r = await fetch(`/api/connectors/${selectedId}/sync-cli`, { method: 'POST' });
+      const j = await r.json();
+      setSyncCliResult(j);
+    } catch (e) {
+      setSyncCliResult({ ok: false, error: e instanceof Error ? e.message : String(e) });
+    } finally { setSyncingCli(false); }
+  }
+
   async function saveSettings() {
     if (!selectedId) return;
     try {
@@ -558,6 +583,19 @@ export default function ConnectorsPanel() {
                             {testing ? 'Testing…' : 'Test'}
                           </button>
                         )}
+                        {/* Sync the Forge token into the local `glab` CLI config so
+                            user's shell `glab` matches what Forge uses for
+                            pipelines. Only relevant for gitlab right now. */}
+                        {selectedId === 'gitlab' && (
+                          <button
+                            onClick={syncCli}
+                            disabled={syncingCli}
+                            title="Write current Forge token into ~/.config/glab-cli/config.yml so shell `glab` uses the same token. Avoids 'shell 401 but Forge OK' split."
+                            className="text-[10px] px-2.5 py-1 rounded border border-[var(--border)] text-[var(--text-secondary)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors disabled:opacity-40"
+                          >
+                            {syncingCli ? 'Syncing…' : 'Sync to glab CLI'}
+                          </button>
+                        )}
                         {testResult && (
                           <span
                             className={`text-[10px] ${
@@ -569,6 +607,14 @@ export default function ConnectorsPanel() {
                               : `✗ ${testResult.error || `HTTP ${testResult.status}`}`}
                           </span>
                         )}
+                        {syncCliResult && (
+                          <span
+                            className={`text-[10px] ${syncCliResult.ok ? 'text-green-400' : 'text-red-400'}`}
+                            title={syncCliResult.hint}
+                          >
+                            {syncCliResult.ok ? `✓ ${syncCliResult.message}` : `✗ ${syncCliResult.error}`}
+                          </span>
+                        )}
                       </div>
                     </div>
                   </div>

package/components/Dashboard.tsx

@@ -15,6 +15,7 @@ const ProjectManager = lazy(() => import('./ProjectManager'));
 const BrowserPanel = lazy(() => import('./BrowserPanel'));
 const PipelineView = lazy(() => import('./PipelineView'));
 const JobsView = lazy(() => import('./JobsView'));
+const SchedulesView = lazy(() => import('./SchedulesView'));
 const HelpDialog = lazy(() => import('./HelpDialog'));
 const LogViewer = lazy(() => import('./LogViewer'));
 const SkillsPanel = lazy(() => import('./SkillsPanel'));
@@ -98,7 +99,7 @@ function FloatingBrowser({ onClose }: { onClose: () => void }) {
 }
 
 export default function Dashboard({ user }: { user: any }) {
-  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'pipelines' | 'jobs' | 'workspace' | 'skills' | 'logs' | 'usage'>('terminal');
+  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'pipelines' | 'jobs' | 'schedules' | 'workspace' | 'skills' | 'logs' | 'usage'>('terminal');
 
   // 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
@@ -111,7 +112,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', 'skills', 'logs', 'usage'];
+      const valid = ['tasks', 'terminal', 'docs', 'projects', 'pipelines', '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
@@ -365,15 +366,15 @@ export default function Dashboard({ user }: { user: any }) {
               Docs
             </button>
             <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30 mx-1.5" />
-            {/* Automation — single button that lights up for tasks/pipelines/jobs;
-                clicking it lands on whichever sub-view you used last (default Tasks).
-                The sub-tab strip below the header switches between the three. */}
+            {/* 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', 'jobs'].includes(viewMode)) setViewMode('jobs');
+                if (!['tasks', 'pipelines', 'schedules'].includes(viewMode)) setViewMode('schedules');
               }}
               className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
-                ['tasks', 'pipelines', 'jobs'].includes(viewMode)
+                ['tasks', 'pipelines', 'schedules'].includes(viewMode)
                   ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
                   : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
               }`}
@@ -632,10 +633,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', 'jobs'].includes(viewMode) && (
+      {['tasks', 'pipelines', 'schedules'].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">
-            {(['jobs', 'pipelines', 'tasks'] as const).map((m) => (
+            {(['schedules', 'pipelines', 'tasks'] as const).map((m) => (
               <button
                 key={m}
                 onClick={() => setViewMode(m)}
@@ -645,7 +646,7 @@ export default function Dashboard({ user }: { user: any }) {
                     : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
                 }`}
               >
-                {{ tasks: 'Tasks', pipelines: 'Pipelines', jobs: 'Jobs' }[m]}
+                {{ tasks: 'Tasks', pipelines: 'Pipelines', schedules: 'Schedules' }[m]}
               </button>
             ))}
             {viewMode === 'tasks' && (
@@ -791,6 +792,18 @@ export default function Dashboard({ user }: { user: any }) {
           </Suspense>
         )}
 
+        {/* Schedules — pipeline triggers (new path, complements Jobs) */}
+        {viewMode === 'schedules' && (
+          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
+            <SchedulesView
+              onViewPipeline={(pipelineId) => {
+                setPendingPipelineId(pipelineId);
+                setViewMode('pipelines');
+              }}
+            />
+          </Suspense>
+        )}
+
         {/* Skills */}
         {viewMode === 'skills' && (
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>

package/components/JobsView.tsx

@@ -84,6 +84,19 @@ export default function JobsView({ onViewPipeline }: Props) {
 
   useEffect(() => { void refresh(); }, [refresh]);
 
+  // While a Job row is expanded, poll its state every 3s so the user
+  // sees Dispatched-Pipelines + busy badges update without manual
+  // refresh. Stops when the row is collapsed.
+  useEffect(() => {
+    if (!expandedJobId) return;
+    const id = expandedJobId;
+    const interval = setInterval(() => {
+      void refresh();
+      void loadRuns(id);
+    }, 3000);
+    return () => clearInterval(interval);
+  }, [expandedJobId, refresh]);
+
   async function loadRuns(jobId: string) {
     try {
       const r = await fetch(`/api/jobs/${encodeURIComponent(jobId)}/runs?limit=20`);
@@ -101,9 +114,50 @@ export default function JobsView({ onViewPipeline }: Props) {
   async function fireNow(id: string, opts?: { resetDedup?: boolean }) {
     try {
       const qs = opts?.resetDedup ? '?reset_dedup=1' : '';
-      await fetch(`/api/jobs/${encodeURIComponent(id)}/run${qs}`, { method: 'POST' });
-      await loadRuns(id);
-    } catch (e) { alert(`Fire failed: ${e instanceof Error ? e.message : String(e)}`); }
+      const r = await fetch(`/api/jobs/${encodeURIComponent(id)}/run${qs}`, { method: 'POST' });
+      if (!r.ok) {
+        const j = await r.json().catch(() => ({}));
+        setErr(j.error || `Fire failed (${r.status})`);
+        return;
+      }
+      // executeRun is async — give it a moment to write the
+      // pipeline_runs row, then refetch state. Without this the UI
+      // would not see job.busy turn true, and Stop drain / Cancel
+      // all wouldn't appear until the next manual refresh.
+      setTimeout(() => { void refresh(); void loadRuns(id); }, 300);
+    } catch (e) { setErr(`Fire failed: ${e instanceof Error ? e.message : String(e)}`); }
+  }
+
+  async function cancelDrain(id: string, opts?: { cancelInflight?: boolean }) {
+    if (!confirm(opts?.cancelInflight
+        ? 'Cancel the drain AND stop any in-flight pipelines this Job dispatched?'
+        : 'Stop the sequential drain? In-flight pipelines keep running.')) return;
+    const qs = opts?.cancelInflight ? '?cancel_inflight=1' : '';
+    const r = await fetch(`/api/jobs/${id}/cancel${qs}`, { method: 'POST' });
+    if (!r.ok) { setErr(`Cancel failed: ${await r.text()}`); return; }
+    void refresh();
+  }
+
+  async function toggleConcurrencyMode(j: Job) {
+    const next = (j as any).concurrency_mode === 'parallel' ? 'sequential' : 'parallel';
+    const r = await fetch(`/api/jobs/${j.id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ concurrency_mode: next }),
+    });
+    if (!r.ok) { setErr(`Failed to switch mode: ${await r.text()}`); return; }
+    void refresh();
+  }
+
+  async function toggleOnFailure(j: Job) {
+    const next = (j as any).on_failure === 'stop' ? 'continue' : 'stop';
+    const r = await fetch(`/api/jobs/${j.id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ on_failure: next }),
+    });
+    if (!r.ok) { setErr(`Failed to switch on_failure: ${await r.text()}`); return; }
+    void refresh();
   }
 
   async function toggle(j: Job) {
@@ -183,6 +237,9 @@ export default function JobsView({ onViewPipeline }: Props) {
               onToggle={() => toggle(j)}
               onDelete={() => remove(j.id)}
               onReset={() => resetDedup(j.id)}
+              onToggleMode={() => toggleConcurrencyMode(j)}
+              onToggleOnFailure={() => toggleOnFailure(j)}
+              onCancelDrain={(cancelInflight) => cancelDrain(j.id, { cancelInflight })}
               onViewPipeline={onViewPipeline}
             />
           ))}
@@ -192,11 +249,45 @@ export default function JobsView({ onViewPipeline }: Props) {
   );
 }
 
-function JobRow({ job, expanded, runs, onClick, onFire, onForceFire, onToggle, onDelete, onReset, onViewPipeline }: {
+interface DispatchedPipeline {
+  dispatch_id: string;
+  job_run_id: string;
+  item_key: string;
+  item_preview: string | null;
+  pipeline_id: string;
+  pipeline_status: string;
+  workflow_name: string | null;
+  dispatched_at: string;
+}
+
+function JobRow({ job, expanded, runs, onClick, onFire, onForceFire, onToggle, onDelete, onReset, onToggleMode, onToggleOnFailure, onCancelDrain, onViewPipeline }: {
   job: Job; expanded: boolean; runs?: JobRun[];
   onClick: () => void; onFire: () => void; onForceFire: () => void; onToggle: () => void; onDelete: () => void; onReset: () => void;
+  onToggleMode: () => void;
+  onToggleOnFailure: () => void;
+  onCancelDrain: (cancelInflight: boolean) => void;
   onViewPipeline?: (id: string) => void;
 }) {
+  // Dispatched-pipelines mini list — loaded lazily on first expand. Tells
+  // the user "Job X spawned these pipelines, here's their state" without
+  // having to navigate to PipelineView per row.
+  const [pipes, setPipes] = useState<DispatchedPipeline[] | null>(null);
+  const [pipesLoading, setPipesLoading] = useState(false);
+  useEffect(() => {
+    if (!expanded) return;
+    let cancelled = false;
+    setPipesLoading(true);
+    fetch(`/api/jobs/${job.id}/dispatched-pipelines?limit=15`)
+      .then((r) => r.json())
+      .then((j) => { if (!cancelled) setPipes(j.pipelines || []); })
+      .catch(() => { if (!cancelled) setPipes([]); })
+      .finally(() => { if (!cancelled) setPipesLoading(false); });
+    return () => { cancelled = true; };
+  }, [expanded, job.id, job.last_run_at]);
+
+  const hasScheduledDrain = !!job.next_run_at;
+  const inflightCount = pipes ? pipes.filter((p) => p.pipeline_status === 'running' || p.pipeline_status === 'pending').length : 0;
+
   return (
     <div className="rounded border border-[var(--border)] bg-[var(--bg-secondary)]">
       <div onClick={onClick} className="px-3 py-2 cursor-pointer flex items-baseline gap-2">
@@ -207,6 +298,33 @@ function JobRow({ job, expanded, runs, onClick, onFire, onForceFire, onToggle, o
             <span className={`text-[9px] px-1.5 py-0.5 rounded ${job.enabled ? 'bg-[var(--green)]/15 text-[var(--green)]' : 'bg-[var(--text-secondary)]/15 text-[var(--text-secondary)]'}`}>
               {job.enabled ? 'enabled' : 'disabled'}
             </span>
+            {(job as any).busy && (
+              <span
+                className="text-[9px] px-1.5 py-0.5 rounded bg-[var(--accent)]/20 text-[var(--accent)]"
+                title={(job as any).busy_reason}
+              >running</span>
+            )}
+            {/* Show pacing mode — 'sequential' is the default (1 pipeline at a time);
+                'parallel' fans out up to max_per_tick at once and is louder visually so
+                the user knows fan-out can happen. */}
+            <span
+              className={`text-[9px] px-1.5 py-0.5 rounded ${
+                (job as any).concurrency_mode === 'parallel'
+                  ? 'bg-[var(--yellow)]/20 text-[var(--yellow)]'
+                  : 'bg-[var(--text-secondary)]/15 text-[var(--text-secondary)]'
+              }`}
+              title={(job as any).concurrency_mode === 'parallel'
+                ? 'parallel — each tick dispatches up to max_per_tick pipelines concurrently'
+                : 'sequential — one pipeline at a time; next tick waits until prior finishes'}
+            >
+              {(job as any).concurrency_mode === 'parallel' ? 'parallel' : 'sequential'}
+            </span>
+            {(job as any).on_failure === 'stop' && (
+              <span
+                className="text-[9px] px-1.5 py-0.5 rounded bg-[var(--red)]/20 text-[var(--red)]"
+                title="on_failure: stop — any item's pipeline failure halts the drain. Force-run to resume."
+              >stop on fail</span>
+            )}
           </div>
           <div className="text-[10px] text-[var(--text-secondary)] font-mono mt-0.5 truncate">
             {job.source_connector}.{job.source_tool} → {job.dispatch_type} · every {job.schedule_interval_minutes}m
@@ -219,14 +337,135 @@ function JobRow({ job, expanded, runs, onClick, onFire, onForceFire, onToggle, o
       {expanded && (
         <div className="border-t border-[var(--border)] px-3 py-2 bg-[var(--bg-tertiary)]">
           <div className="flex items-center gap-2 mb-2">
-            <button onClick={(e) => { e.stopPropagation(); onFire(); }} className="text-[10px] px-2 py-0.5 border border-[var(--border)] rounded hover:bg-[var(--bg-secondary)]">Run now</button>
-            <button onClick={(e) => { e.stopPropagation(); onForceFire(); }} className="text-[10px] px-2 py-0.5 border border-[var(--border)] rounded hover:bg-[var(--bg-secondary)]" title="Reset dedup + run — re-dispatch every item this tick">Force run</button>
+            <button
+              onClick={(e) => { e.stopPropagation(); if (!(job as any).busy) onFire(); }}
+              disabled={!!(job as any).busy}
+              className={`text-[10px] px-2 py-0.5 border border-[var(--border)] rounded ${(job as any).busy ? 'opacity-50 cursor-not-allowed' : 'hover:bg-[var(--bg-secondary)]'}`}
+              title={(job as any).busy ? `Disabled: ${(job as any).busy_reason}` : 'Trigger one tick now'}
+            >Run now</button>
+            <button
+              onClick={(e) => { e.stopPropagation(); if (!(job as any).busy) onForceFire(); }}
+              disabled={!!(job as any).busy}
+              className={`text-[10px] px-2 py-0.5 border border-[var(--border)] rounded ${(job as any).busy ? 'opacity-50 cursor-not-allowed' : 'hover:bg-[var(--bg-secondary)]'}`}
+              title={(job as any).busy ? `Disabled: ${(job as any).busy_reason}` : 'Reset dedup + run — re-dispatch every item this tick'}
+            >Force run</button>
             <button onClick={(e) => { e.stopPropagation(); onToggle(); }} className="text-[10px] px-2 py-0.5 border border-[var(--border)] rounded hover:bg-[var(--bg-secondary)]">{job.enabled ? 'Disable' : 'Enable'}</button>
             <button onClick={(e) => { e.stopPropagation(); onReset(); }} className="text-[10px] px-2 py-0.5 border border-[var(--border)] rounded hover:bg-[var(--bg-secondary)]" title="Wipe dedup state">Reset dedup</button>
+            <button
+              onClick={(e) => { e.stopPropagation(); onToggleMode(); }}
+              className="text-[10px] px-2 py-0.5 border border-[var(--border)] rounded hover:bg-[var(--bg-secondary)]"
+              title={(job as any).concurrency_mode === 'parallel'
+                ? 'Switch to sequential — one pipeline at a time'
+                : 'Switch to parallel — fan out up to max_per_tick per tick'}
+            >
+              {(job as any).concurrency_mode === 'parallel' ? '→ Sequential' : '→ Parallel'}
+            </button>
+            <button
+              onClick={(e) => { e.stopPropagation(); onToggleOnFailure(); }}
+              className="text-[10px] px-2 py-0.5 border border-[var(--border)] rounded hover:bg-[var(--bg-secondary)]"
+              title={(job as any).on_failure === 'stop'
+                ? 'on_failure=stop: halt drain on any failure. Click to switch to continue (default — skip failed item, proceed).'
+                : 'on_failure=continue (default): keep dispatching even if items fail. Click to switch to stop (halt on first failure).'}
+            >
+              {(job as any).on_failure === 'stop' ? '→ Continue on fail' : '→ Stop on fail'}
+            </button>
             <button onClick={(e) => { e.stopPropagation(); navigateLogs(`[jobs] ${job.id}`); }} className="text-[10px] px-2 py-0.5 border border-[var(--border)] rounded hover:bg-[var(--bg-secondary)]" title="Tail forge.log filtered to this job's id">View logs</button>
+            {/* Cancel — visible only when something is in flight or a drain is queued. Hidden otherwise to keep the action bar lean. */}
+            {(hasScheduledDrain || inflightCount > 0) && (
+              <>
+                <button
+                  onClick={(e) => { e.stopPropagation(); onCancelDrain(false); }}
+                  className="text-[10px] px-2 py-0.5 border border-[var(--yellow)]/50 text-[var(--yellow)] rounded hover:bg-[var(--yellow)]/10"
+                  title="Stop the sequential drain — clears next_run_at so no more items dispatch automatically. In-flight pipelines KEEP running."
+                >Stop drain</button>
+                {inflightCount > 0 && (
+                  <button
+                    onClick={(e) => { e.stopPropagation(); onCancelDrain(true); }}
+                    className="text-[10px] px-2 py-0.5 border border-[var(--red)]/50 text-[var(--red)] rounded hover:bg-[var(--red)]/10"
+                    title={`Stop drain AND cancel ${inflightCount} in-flight pipeline(s) this Job dispatched`}
+                  >Cancel all ({inflightCount})</button>
+                )}
+              </>
+            )}
             <span className="flex-1" />
             <button onClick={(e) => { e.stopPropagation(); onDelete(); }} className="text-[10px] px-2 py-0.5 border border-[var(--red)]/50 text-[var(--red)] rounded hover:bg-[var(--red)]/10">Delete</button>
           </div>
+
+          {/* Dispatched pipelines panel — what this Job spawned, current state. */}
+          {(pipes && pipes.length > 0) && (() => {
+            // Aggregate counts by status for the summary header.
+            const c = { running: 0, pending: 0, done: 0, failed: 0, cancelled: 0, unknown: 0 } as Record<string, number>;
+            for (const p of pipes) { c[p.pipeline_status] = (c[p.pipeline_status] || 0) + 1; }
+            // Best-effort "items waiting to be dispatched" hint from the
+            // most recent run's deferred count. Sequential mode rolls
+            // these over to the next tick — they are NOT in
+            // dispatched-pipelines yet.
+            const latestDeferred = (() => {
+              if (!runs || runs.length === 0) return 0;
+              const m = String(runs[0].notes || '').match(/(\d+)\s*item\(s\)\s*deferred/i);
+              return m ? Number(m[1]) : 0;
+            })();
+            return (
+            <div className="mb-2">
+              <div className="text-[10px] font-semibold text-[var(--text-secondary)] uppercase mb-1 flex items-baseline gap-2 flex-wrap">
+                <span>Dispatched pipelines</span>
+                <span className="text-[10px] font-normal normal-case text-[var(--text-primary)]">
+                  {pipes.length} total
+                  {c.running   ? <> · <span className="text-[var(--accent)]">{c.running} running</span></>   : null}
+                  {c.pending   ? <> · <span className="text-[var(--accent)]">{c.pending} pending</span></>   : null}
+                  {c.done      ? <> · <span className="text-[var(--green)]">{c.done} done</span></>          : null}
+                  {c.failed    ? <> · <span className="text-[var(--red)]">{c.failed} failed</span></>        : null}
+                  {c.cancelled ? <> · <span className="text-[var(--text-secondary)]">{c.cancelled} cancelled</span></>: null}
+                </span>
+                {latestDeferred > 0 && (
+                  <span className="text-[10px] font-normal normal-case text-[var(--yellow)]">
+                    · {latestDeferred} waiting in queue (deferred)
+                  </span>
+                )}
+                {pipesLoading && <span className="text-[var(--text-secondary)]">· loading…</span>}
+              </div>
+              <div className="space-y-0.5">
+                {/* Trim to "what's actionable": all running/pending + the
+                    one most-recent terminal entry. Full history would
+                    bloat the panel and isn't useful here — go to the
+                    Pipeline view for history. */}
+                {(() => {
+                  const active = pipes.filter((p) => p.pipeline_status === 'running' || p.pipeline_status === 'pending');
+                  const lastTerminal = pipes.find((p) =>
+                    p.pipeline_status !== 'running' && p.pipeline_status !== 'pending');
+                  const display = lastTerminal ? [...active, lastTerminal] : active;
+                  return display;
+                })().map((p) => (
+                  <div
+                    key={p.dispatch_id}
+                    className="flex items-baseline gap-2 text-[10px] font-mono py-0.5 px-1 rounded hover:bg-[var(--bg-secondary)]/50 cursor-pointer"
+                    onClick={(e) => { e.stopPropagation(); if (onViewPipeline) onViewPipeline(p.pipeline_id); }}
+                    title={`Click to open Pipeline view for ${p.pipeline_id}`}
+                  >
+                    <span className={
+                      p.pipeline_status === 'running'   ? 'text-[var(--accent)]'
+                    : p.pipeline_status === 'pending'   ? 'text-[var(--accent)]'
+                    : p.pipeline_status === 'done'      ? 'text-[var(--green)]'
+                    : p.pipeline_status === 'failed'    ? 'text-[var(--red)]'
+                    : p.pipeline_status === 'cancelled' ? 'text-[var(--text-secondary)]'
+                    :                                     'text-[var(--text-secondary)]'
+                    }>
+                      {p.pipeline_status === 'running'   ? '🔄'
+                     : p.pipeline_status === 'pending'   ? '⏳'
+                     : p.pipeline_status === 'done'      ? '✅'
+                     : p.pipeline_status === 'failed'    ? '❌'
+                     : p.pipeline_status === 'cancelled' ? '⏹'
+                     :                                     '·'}
+                    </span>
+                    <span className="text-[var(--text-secondary)] w-20 truncate">{p.pipeline_id.slice(0, 8)}</span>
+                    <span className="truncate flex-1 text-[var(--text-primary)]">{p.item_key}</span>
+                    <span className="text-[var(--text-secondary)]">{p.pipeline_status}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            );
+          })()}
           <div className="text-[10px] font-semibold text-[var(--text-secondary)] uppercase mb-1">Recent runs</div>
           {runs == null ? (
             <div className="text-[10px] text-[var(--text-secondary)]">Loading…</div>

package/components/PipelineEditor.tsx

@@ -310,6 +310,9 @@ export default function PipelineEditor({ onSave, onClose, initialYaml }: {
   const [workflowDesc, setWorkflowDesc] = useState('');
   const [varsProject, setVarsProject] = useState('');
   const [projects, setProjects] = useState<{ name: string; root: string }[]>([]);
+  // Preserve workflow-level for_each block round-trip (read on load, write on save).
+  // Editor is read-only for this field; edit via yaml export/import.
+  const [forEachSpec, setForEachSpec] = useState<{ source: any; as?: string; on_failure?: string; split?: string; before?: string[] } | null>(null);
   const nextNodeId = useRef(1);
 
   useEffect(() => {
@@ -329,6 +332,7 @@ export default function PipelineEditor({ onSave, onClose, initialYaml }: {
       if (parsed.name) setWorkflowName(parsed.name);
       if (parsed.description) setWorkflowDesc(parsed.description);
       if (parsed.vars?.project) setVarsProject(parsed.vars.project);
+      if (parsed.for_each && typeof parsed.for_each === 'object') setForEachSpec(parsed.for_each);
 
       const nodeEntries = Object.entries(parsed.nodes || {});
       const newNodes: Node<NodeData>[] = [];
@@ -465,6 +469,7 @@ export default function PipelineEditor({ onSave, onClose, initialYaml }: {
       name: workflowName,
       description: workflowDesc || undefined,
       vars: varsProject ? { project: varsProject } : undefined,
+      for_each: forEachSpec || undefined,
       nodes: {} as any,
     };
 
@@ -490,7 +495,7 @@ export default function PipelineEditor({ onSave, onClose, initialYaml }: {
 
     const YAML = require('yaml');
     return YAML.stringify(workflow);
-  }, [nodes, edges, workflowName, workflowDesc, varsProject]);
+  }, [nodes, edges, workflowName, workflowDesc, varsProject, forEachSpec]);
 
   return (
     <div className="fixed inset-0 z-50 flex flex-col bg-[#0a0a1a]">
@@ -537,6 +542,38 @@ export default function PipelineEditor({ onSave, onClose, initialYaml }: {
         </button>
       </div>
 
+      {/* for_each banner — workflow wraps the DAG in a loop */}
+      {forEachSpec && (
+        <div className="border-b border-purple-500/30 bg-purple-500/10 px-4 py-2 flex items-center gap-3 text-xs shrink-0">
+          <span className="text-base">🔁</span>
+          <span className="font-semibold text-purple-300">for_each</span>
+          <span className="text-gray-400">— each</span>
+          <code className="text-purple-200 bg-purple-500/20 px-1.5 py-0.5 rounded">
+            {forEachSpec.as || 'item'}
+          </code>
+          <span className="text-gray-400">in</span>
+          <code className="text-purple-200 bg-purple-500/20 px-1.5 py-0.5 rounded font-mono">
+            {typeof forEachSpec.source === 'string'
+              ? forEachSpec.source
+              : Array.isArray(forEachSpec.source)
+                ? `[${forEachSpec.source.length} literal items]`
+                : '(complex source)'}
+          </code>
+          <span className="text-gray-500">
+            • on_failure: <span className="text-gray-300">{forEachSpec.on_failure || 'continue'}</span>
+            {forEachSpec.split && forEachSpec.split !== ',' && (
+              <> • split: <code className="text-gray-300">{JSON.stringify(forEachSpec.split)}</code></>
+            )}
+            {forEachSpec.before && forEachSpec.before.length > 0 && (
+              <> • setup: <code className="text-purple-200 bg-purple-500/20 px-1 rounded">[{forEachSpec.before.join(', ')}]</code></>
+            )}
+          </span>
+          <span className="ml-auto text-gray-500 italic">
+            Whole DAG below re-runs once per item • iteration history persists in pipeline.forEach.iterations
+          </span>
+        </div>
+      )}
+
       {/* Flow canvas */}
       <div className="flex-1">
         <ReactFlow