@aion0/forge 0.9.1 → 0.9.2

package/components/PipelineView.tsx

@@ -118,6 +118,28 @@ interface Pipeline {
   nodeOrder: string[];
   createdAt: string;
   completedAt?: string;
+  // for_each loop state — present only when the workflow declared `for_each:`.
+  forEach?: {
+    items: unknown[];
+    currentIndex: number;
+    total: number;
+    asName: string;
+    onFailure: 'continue' | 'stop';
+    // Loop-setup node ids (run ONCE before iterations). Empty / absent for
+    // simple for_each (no `before:` block).
+    before?: string[];
+    // false while setup nodes are still running and items haven't been
+    // resolved yet; true once loop body can begin (or immediately when
+    // no before nodes).
+    itemsResolved: boolean;
+    iterations: Array<{
+      index: number;
+      status: 'done' | 'failed' | 'cancelled';
+      startedAt: string;
+      completedAt: string;
+      nodes: Record<string, { status: string; outputs: Record<string, string>; error?: string; taskId?: string }>;
+    }>;
+  };
   conversation?: {
     config: {
       agents: { id: string; agent: string; role: string; project?: string }[];
@@ -147,6 +169,165 @@ const STATUS_COLOR: Record<string, string> = {
   skipped: 'text-gray-500',
 };
 
+// ─── for_each state panel (setup + iterations) ───────────
+//
+// Renders above the DAG node list when pipeline.forEach is set. Two
+// sections:
+//   1. Setup — only when `forEach.before` is non-empty. Shows live status
+//      of the setup nodes (run once, stay done across iterations). Full
+//      DagNodeCards render in the main DAG below for live log access;
+//      this is just a compact status bar to make the loop structure clear.
+//   2. Iterations — each completed iteration as a foldable card; current
+//      iter shown as a "running ↓" hint pointing to the DAG nodes below.
+function ForEachStatePanel({ pipeline, onViewTask }: {
+  pipeline: Pipeline;
+  onViewTask?: (taskId: string) => void;
+}) {
+  const fe = pipeline.forEach!;
+  const [openIdx, setOpenIdx] = useState<number | null>(null);
+  const beforeIds = fe.before || [];
+  const setupPhase = !fe.itemsResolved;
+
+  const iterStatusIcon = (s: string) =>
+    s === 'done' ? '✅' : s === 'failed' ? '❌' : s === 'cancelled' ? '⏹' : '⏸';
+  const itemLabel = (item: unknown): string => {
+    if (item === null || item === undefined) return '∅';
+    if (typeof item === 'object') {
+      const o = item as any;
+      // Prefer common id-ish fields for compact display, fall back to JSON.
+      return String(o.iid ?? o.id ?? o.bug_id ?? JSON.stringify(item).slice(0, 40));
+    }
+    return String(item);
+  };
+
+  const done = fe.iterations.length;
+  const total = fe.total;
+  const okCount = fe.iterations.filter((i) => i.status === 'done').length;
+  const failCount = fe.iterations.filter((i) => i.status === 'failed').length;
+  const isFinished = pipeline.status === 'done' || pipeline.status === 'failed' || pipeline.status === 'cancelled';
+
+  return (
+    <div className="border-b border-[var(--border)] pb-3">
+      {/* ── Setup section — only with for_each.before ── */}
+      {beforeIds.length > 0 && (
+        <div className="px-4 pt-2 pb-2 border-b border-[var(--border)]/50">
+          <div className="flex items-center gap-2 text-xs mb-1">
+            <span className="text-base">⚙️</span>
+            <span className="font-semibold text-[var(--text-primary)]">Setup</span>
+            <span className="text-[10px] text-[var(--text-secondary)]">
+              (runs once, feeds for_each items)
+            </span>
+            <span className="ml-auto text-[10px] text-[var(--text-secondary)]">
+              {setupPhase ? 'resolving…' : `resolved → ${fe.total} items`}
+            </span>
+          </div>
+          <div className="flex flex-wrap gap-2 text-[11px]">
+            {beforeIds.map((nid) => {
+              const n = pipeline.nodes[nid];
+              if (!n) return null;
+              const clickable = !!(n.taskId && onViewTask);
+              const Tag = clickable ? 'button' : 'div';
+              return (
+                <Tag
+                  key={nid}
+                  onClick={clickable ? () => onViewTask!(n.taskId!) : undefined}
+                  className={`flex items-center gap-1.5 px-2 py-0.5 border border-[var(--border)] rounded bg-[var(--bg-tertiary)]/30 text-left ${clickable ? 'hover:border-[var(--accent)] cursor-pointer' : ''}`}
+                  title={clickable ? `Click to view task ${n.taskId}` : undefined}
+                >
+                  <span className={STATUS_COLOR[n.status] ?? 'text-gray-400'}>
+                    {STATUS_ICON[n.status] ?? '?'}
+                  </span>
+                  <span className="font-mono">{nid}</span>
+                  {clickable && <span className="text-[9px] text-[var(--text-secondary)]">↗</span>}
+                  {n.error && (
+                    <span className="text-red-400 truncate max-w-[280px]" title={n.error}>
+                      — {n.error.slice(0, 60)}
+                    </span>
+                  )}
+                </Tag>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* ── Iterations header (hidden during setup phase: nothing to show yet) ── */}
+      {!setupPhase && (
+      <div className="px-4 py-2 flex items-center gap-3 text-xs">
+        <span className="font-semibold text-[var(--text-primary)]">
+          Loop {isFinished ? `${done}/${total}` : `${fe.currentIndex + 1}/${total}`}
+        </span>
+        <span className="text-[10px] text-[var(--text-secondary)]">
+          (`{`{`}{`}`}{fe.asName}{`}`}{`}`} = each item)
+        </span>
+        <span className="ml-auto text-[10px]">
+          <span className="text-green-400 mr-2">✅ {okCount}</span>
+          {failCount > 0 && <span className="text-red-400 mr-2">❌ {failCount}</span>}
+        </span>
+      </div>
+      )}
+
+      <div className="px-4 space-y-1">
+        {fe.iterations.map((iter) => {
+          const isOpen = openIdx === iter.index;
+          return (
+            <div key={iter.index} className="border border-[var(--border)] rounded">
+              <button
+                onClick={() => setOpenIdx(isOpen ? null : iter.index)}
+                className="w-full px-2 py-1 flex items-center gap-2 hover:bg-[var(--bg-tertiary)] text-left"
+              >
+                <span className="text-[10px] text-[var(--text-secondary)]">{isOpen ? '▼' : '▶'}</span>
+                <span>{iterStatusIcon(iter.status)}</span>
+                <span className="text-[10px] font-mono">
+                  iter {iter.index}: {itemLabel(fe.items[iter.index])}
+                </span>
+                <span className="ml-auto text-[8px] text-[var(--text-secondary)]">
+                  {new Date(iter.completedAt).toLocaleTimeString()}
+                </span>
+              </button>
+              {isOpen && (
+                <div className="px-3 py-2 space-y-1 border-t border-[var(--border)] bg-[var(--bg-tertiary)]/30">
+                  {Object.entries(iter.nodes).map(([nodeId, n]) => {
+                    const clickable = !!(n.taskId && onViewTask);
+                    const Tag = clickable ? 'button' : 'div';
+                    return (
+                      <Tag
+                        key={nodeId}
+                        onClick={clickable ? () => onViewTask!(n.taskId!) : undefined}
+                        className={`flex items-start gap-2 text-[10px] w-full text-left rounded px-1 -mx-1 py-0.5 ${clickable ? 'hover:bg-[var(--bg-secondary)] cursor-pointer' : ''}`}
+                        title={clickable ? `View task ${n.taskId}` : undefined}
+                      >
+                        <span className={STATUS_COLOR[n.status] ?? 'text-gray-400'}>
+                          {STATUS_ICON[n.status] ?? '?'}
+                        </span>
+                        <span className="font-mono">{nodeId}</span>
+                        {clickable && <span className="text-[9px] text-[var(--text-secondary)]">↗</span>}
+                        {n.error && (
+                          <span className="text-red-400 truncate flex-1" title={n.error}>
+                            — {n.error.slice(0, 80)}
+                          </span>
+                        )}
+                      </Tag>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
+        {!isFinished && fe.currentIndex < fe.total && (
+          <div className="border border-yellow-500/30 bg-yellow-500/5 rounded px-2 py-1 flex items-center gap-2">
+            <span>🔄</span>
+            <span className="text-[10px] font-mono text-yellow-400">
+              iter {fe.currentIndex}: {itemLabel(fe.items[fe.currentIndex])} — running ↓
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
 // ─── DAG Node Card with live logs ─────────────────────────
 
 function DagNodeCard({ nodeId, node, nodeDef, onViewTask, onRetry }: {
@@ -471,6 +652,7 @@ export default function PipelineView({ onViewTask, focusPipelineId, onFocusHandl
     installed_version?: string; has_update?: boolean;
   };
   const [showMarketplace, setShowMarketplace] = useState(false);
+  const [showCleanup, setShowCleanup] = useState(false);
   const [marketRows, setMarketRows] = useState<MarketRow[] | null>(null);
   const [marketBusy, setMarketBusy] = useState(false);
   const [marketErr, setMarketErr] = useState<string>('');
@@ -767,8 +949,26 @@ initial_prompt: "{{input.task}}"
             className="text-[9px] text-blue-400 hover:underline"
             title="Import a workflow from the marketplace as a new local copy"
           >+ From marketplace</button>
+          <button
+            onClick={() => setShowCleanup(true)}
+            className="text-[9px] text-[var(--text-secondary)] hover:underline"
+            title="Bulk-delete old pipeline runs (terminal state only)"
+          >Cleanup</button>
         </div>
 
+        {showCleanup && (
+          <CleanupModal
+            onClose={() => setShowCleanup(false)}
+            onCleaned={() => {
+              setShowCleanup(false);
+              // Force a full refetch so deleted rows disappear from the
+              // sidebar — easiest path is a page reload, no separate
+              // refresh fn lifted to this scope yet.
+              location.reload();
+            }}
+          />
+        )}
+
         {/* Marketplace import — each pipeline in the registry can be
             cloned to as many local copies as you want, each with a
             unique name. The local copy is fully independent of the
@@ -955,7 +1155,11 @@ initial_prompt: "{{input.task}}"
             {/* Input fields — project fields get a dropdown */}
             {currentWorkflow && Object.keys(currentWorkflow.input).length > 0 && (
               <div className="space-y-1.5">
-                {Object.entries(currentWorkflow.input).map(([key, desc]) => (
+                {Object.entries(currentWorkflow.input).map(([key, spec]) => {
+                  // spec is `string | WorkflowInputFieldSpec`. Extract the description
+                  // text either way — never render an object directly.
+                  const desc = typeof spec === 'string' ? spec : (spec && (spec as any).description) || '';
+                  return (
                   <div key={key}>
                     <label className="text-[9px] text-[var(--text-secondary)]">{key}: {desc}</label>
                     {key.toLowerCase() === 'project' ? (
@@ -975,7 +1179,8 @@ initial_prompt: "{{input.task}}"
                       />
                     )}
                   </div>
-                ))}
+                );
+                })}
               </div>
             )}
 
@@ -1275,8 +1480,19 @@ initial_prompt: "{{input.task}}"
                 onViewTask={onViewTask}
               />
             ) : (
-            <div className="p-4 space-y-2 overflow-y-auto">
-              {selectedPipeline.nodeOrder.map((nodeId, idx) => {
+            <div className="overflow-y-auto">
+              {/* for_each loop: setup + iteration history above the current-iter nodes */}
+              {selectedPipeline.forEach && (
+                <ForEachStatePanel pipeline={selectedPipeline} onViewTask={onViewTask} />
+              )}
+              <div className="p-4 space-y-2">
+              {(() => {
+                // Hide for_each `before:` nodes from the main DAG — they
+                // already render in the Setup section above. (Without
+                // for_each they aren't a thing, so the filter is no-op.)
+                const beforeSet = new Set(selectedPipeline.forEach?.before || []);
+                return selectedPipeline.nodeOrder.filter((nid) => !beforeSet.has(nid));
+              })().map((nodeId, idx) => {
                 const node = selectedPipeline.nodes[nodeId];
                 const wf = workflows.find(w => w.name === selectedPipeline.workflowName);
                 const nodeDef = wf?.nodes?.[nodeId];
@@ -1297,6 +1513,7 @@ initial_prompt: "{{input.task}}"
                   </div>
                 );
               })}
+              </div>
             </div>
             )}
           </>
@@ -1483,3 +1700,107 @@ function MissingToolsBanner() {
     </div>
   );
 }
+
+/**
+ * Bulk delete old terminal-state pipeline runs AND task runs.
+ * Both share the same age cutoff. Running/pending rows are always
+ * skipped by the backend.
+ */
+function CleanupModal({ onClose, onCleaned }: { onClose: () => void; onCleaned: () => void }) {
+  const [days, setDays] = useState(7);
+  const [scope, setScope] = useState<'both' | 'pipelines' | 'tasks'>('both');
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState<{ tasks?: number; pipelines?: number; before?: string } | null>(null);
+  const [err, setErr] = useState('');
+
+  async function run() {
+    if (busy) return;
+    if (!confirm(`Delete all ${scope === 'both' ? 'tasks + pipeline runs' : scope} older than ${days} day(s)? This cannot be undone.`)) return;
+    setBusy(true); setErr('');
+    try {
+      const body = JSON.stringify({ older_than_days: days });
+      const opts = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body };
+      let tasks: number | undefined;
+      let pipelines: number | undefined;
+      let before: string | undefined;
+      if (scope === 'both' || scope === 'tasks') {
+        const r = await fetch('/api/tasks/bulk-delete', opts);
+        const j = await r.json();
+        if (!r.ok) throw new Error(j.error || `tasks bulk-delete HTTP ${r.status}`);
+        tasks = j.removed; before = j.before;
+      }
+      if (scope === 'both' || scope === 'pipelines') {
+        const r = await fetch('/api/pipelines/bulk-delete', opts);
+        const j = await r.json();
+        if (!r.ok) throw new Error(j.error || `pipelines bulk-delete HTTP ${r.status}`);
+        pipelines = j.removed; before = before || j.before;
+      }
+      setResult({ tasks, pipelines, before });
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : String(e));
+    } finally { setBusy(false); }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+      <div className="bg-[var(--bg-primary)] border border-[var(--border)] rounded p-4 w-[420px] max-w-[90vw]">
+        <div className="flex items-baseline justify-between mb-3">
+          <h2 className="text-[13px] font-semibold">Cleanup old runs</h2>
+          <button onClick={onClose} className="text-[11px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]">✕</button>
+        </div>
+        <div className="space-y-2 mb-3">
+          <label className="block text-[11px]">
+            <span className="text-[var(--text-secondary)]">Older than (days)</span>
+            <input
+              type="number"
+              min={0}
+              value={days}
+              onChange={(e) => setDays(Math.max(0, Number(e.target.value) || 0))}
+              className="block w-full mt-0.5 px-2 py-1 text-[11px] border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+            />
+          </label>
+          <label className="block text-[11px]">
+            <span className="text-[var(--text-secondary)]">Scope</span>
+            <select
+              value={scope}
+              onChange={(e) => setScope(e.target.value as any)}
+              className="block w-full mt-0.5 px-2 py-1 text-[11px] border border-[var(--border)] rounded bg-[var(--bg-secondary)]"
+            >
+              <option value="both">Both — tasks + pipeline runs</option>
+              <option value="pipelines">Pipeline runs only</option>
+              <option value="tasks">Tasks only</option>
+            </select>
+          </label>
+          <p className="text-[10px] text-[var(--text-secondary)] leading-relaxed">
+            Only terminal-state rows are removed (done / failed / cancelled).
+            Running and pending entries are never touched.
+          </p>
+        </div>
+        {err && (
+          <div className="text-[10px] text-[var(--red)] bg-[var(--red)]/10 rounded p-2 mb-2">{err}</div>
+        )}
+        {result && (
+          <div className="text-[10px] text-[var(--green)] bg-[var(--green)]/10 rounded p-2 mb-2">
+            Removed
+            {result.tasks != null     ? ` · ${result.tasks} task(s)` : null}
+            {result.pipelines != null ? ` · ${result.pipelines} pipeline run(s)` : null}
+            {result.before            ? `. Cutoff: ${result.before}` : null}
+          </div>
+        )}
+        <div className="flex justify-end gap-2">
+          <button onClick={onClose} className="text-[11px] px-3 py-1 border border-[var(--border)] rounded">Close</button>
+          <button
+            onClick={() => void run()}
+            disabled={busy}
+            className="text-[11px] px-3 py-1 border border-[var(--red)] text-[var(--red)] rounded hover:bg-[var(--red)]/10 disabled:opacity-50"
+          >
+            {busy ? 'Deleting…' : 'Delete'}
+          </button>
+          {result && (
+            <button onClick={onCleaned} className="text-[11px] px-3 py-1 bg-[var(--accent)] text-[var(--bg-primary)] rounded">Done</button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}