@aion0/forge 0.6.1 → 0.8.0

package/components/PipelineView.tsx

@@ -149,14 +149,16 @@ const STATUS_COLOR: Record<string, string> = {
 
 // ─── DAG Node Card with live logs ─────────────────────────
 
-function DagNodeCard({ nodeId, node, nodeDef, onViewTask }: {
+function DagNodeCard({ nodeId, node, nodeDef, onViewTask, onRetry }: {
   nodeId: string;
   node: PipelineNodeState;
   nodeDef?: WorkflowNode;
   onViewTask?: (taskId: string) => void;
+  onRetry?: (nodeId: string) => void;
 }) {
   const isRunning = node.status === 'running';
   const { log } = useTaskStream(node.taskId, isRunning);
+  const [retryBusy, setRetryBusy] = useState(false);
 
   return (
     <div className={`border rounded-lg p-3 ${
@@ -177,6 +179,16 @@ function DagNodeCard({ nodeId, node, nodeDef, onViewTask }: {
           </button>
         )}
         {node.iterations > 1 && <span className="text-[9px] text-yellow-400">iter {node.iterations}</span>}
+        {node.status === 'failed' && onRetry && (
+          <button
+            onClick={async () => { setRetryBusy(true); try { await onRetry(nodeId); } finally { setRetryBusy(false); } }}
+            disabled={retryBusy}
+            className="text-[9px] px-1.5 py-0.5 rounded bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-300 disabled:opacity-50"
+            title="Reset this node + all downstream to pending and re-run. Useful when an upstream node like fix-code already produced a valid worktree commit and only the later step (push-and-mr / notify-teams) needs to be re-tried."
+          >
+            {retryBusy ? 'retrying…' : '↻ retry'}
+          </button>
+        )}
         <span className="text-[9px] text-[var(--text-secondary)] ml-auto">{node.status}</span>
       </div>
 
@@ -449,38 +461,117 @@ export default function PipelineView({ onViewTask, focusPipelineId, onFocusHandl
   const [importYaml, setImportYaml] = useState('');
   const [agents, setAgents] = useState<{ id: string; name: string; detected?: boolean }[]>([]);
 
-  const fetchData = useCallback(async () => {
-    const [pRes, wRes, projRes, agentRes] = await Promise.all([
-      fetch('/api/pipelines'),
+  // "Load older runs" state, per-workflow. The initial /api/pipelines fetch
+  // returns the newest 100 across ALL workflows; if a particular workflow
+  // had older history beyond that window, the user can expand it and click
+  // "Load older runs". `expanded` = the user opted in to show all loaded
+  // runs (not just slice 20); `exhausted` = last load returned <50 → no more.
+  const [expandedHistory, setExpandedHistory] = useState<Set<string>>(new Set());
+  const [exhaustedHistory, setExhaustedHistory] = useState<Set<string>>(new Set());
+  const [loadingMoreFor, setLoadingMoreFor] = useState<string | null>(null);
+
+  async function loadOlderRuns(workflowName: string) {
+    const existing = pipelines.filter(p => p.workflowName === workflowName);
+    let oldest = existing[0]?.createdAt;
+    for (const p of existing) if (p.createdAt < oldest) oldest = p.createdAt;
+    if (!oldest) return;
+    setLoadingMoreFor(workflowName);
+    try {
+      const res = await fetch(`/api/pipelines?workflow=${encodeURIComponent(workflowName)}&before=${encodeURIComponent(oldest)}&limit=50`);
+      const more: Pipeline[] = await res.json();
+      if (Array.isArray(more) && more.length > 0) {
+        setPipelines(prev => {
+          const seen = new Set(prev.map(p => p.id));
+          return [...prev, ...more.filter(p => !seen.has(p.id))];
+        });
+      }
+      setExpandedHistory(prev => new Set(prev).add(workflowName));
+      if (!Array.isArray(more) || more.length < 50) {
+        setExhaustedHistory(prev => new Set(prev).add(workflowName));
+      }
+    } finally {
+      setLoadingMoreFor(null);
+    }
+  }
+
+  // Lightweight metadata only — no pipeline runs. Runs are lazy-loaded
+  // per-workflow on click. Reduces initial page to a single workflow
+  // table fetch + projects + agents, even with hundreds of runs on disk.
+  const fetchMeta = useCallback(async () => {
+    const [wRes, projRes, agentRes] = await Promise.all([
       fetch('/api/pipelines?type=workflows'),
       fetch('/api/projects'),
       fetch('/api/agents'),
     ]);
-    const pData = await pRes.json();
-    const wData = await wRes.json();
-    const projData = await projRes.json();
-    const agentData = await agentRes.json();
-    if (Array.isArray(pData)) setPipelines(pData);
+    const [wData, projData, agentData] = await Promise.all([wRes.json(), projRes.json(), agentRes.json()]);
     if (Array.isArray(wData)) setWorkflows(wData);
     if (Array.isArray(projData)) setProjects(projData.map((p: any) => ({ name: p.name, path: p.path })));
     if (Array.isArray(agentData?.agents)) setAgents(agentData.agents);
   }, []);
 
+  // Fetch the run history for ONE workflow. Used on first expand + on
+  // the 5s polling tick (only for the currently active workflow).
+  const fetchWorkflowRuns = useCallback(async (workflowName: string, opts: { append?: boolean } = {}) => {
+    try {
+      const res = await fetch(`/api/pipelines?workflow=${encodeURIComponent(workflowName)}&limit=100`);
+      const data: Pipeline[] = await res.json();
+      if (!Array.isArray(data)) return;
+      setPipelines(prev => {
+        if (!opts.append) {
+          // Replace this workflow's runs (covers status changes during polling),
+          // keep other workflows' loaded runs untouched.
+          const others = prev.filter(p => p.workflowName !== workflowName);
+          return [...others, ...data];
+        }
+        const seen = new Set(prev.map(p => p.id));
+        return [...prev, ...data.filter(p => !seen.has(p.id))];
+      });
+    } catch { /* ignore — polling will retry */ }
+  }, []);
+
+  // fetchData kept for places that explicitly want "refresh everything"
+  // (e.g. after Cancel/Delete actions). Just wraps the two pieces.
+  const fetchData = useCallback(async () => {
+    await fetchMeta();
+    if (activeWorkflow) await fetchWorkflowRuns(activeWorkflow);
+  }, [fetchMeta, fetchWorkflowRuns, activeWorkflow]);
+
+  useEffect(() => { void fetchMeta(); }, [fetchMeta]);
+
+  // Polling — refresh ONLY the active workflow (5s while expanded).
+  // Stops polling entirely when nothing is expanded — no background
+  // network traffic just from having the page open.
   useEffect(() => {
-    fetchData();
-    const timer = setInterval(fetchData, 5000);
+    if (!activeWorkflow) return;
+    void fetchWorkflowRuns(activeWorkflow);
+    const timer = setInterval(() => { void fetchWorkflowRuns(activeWorkflow); }, 5000);
     return () => clearInterval(timer);
-  }, [fetchData]);
+  }, [activeWorkflow, fetchWorkflowRuns]);
 
   // Focus on a specific pipeline (from external navigation)
   useEffect(() => {
-    if (!focusPipelineId || pipelines.length === 0) return;
-    const target = pipelines.find(p => p.id === focusPipelineId);
-    if (target) {
-      setSelectedPipeline(target);
-      setShowEditor(false);
-      onFocusHandled?.();
-    }
+    if (!focusPipelineId) return;
+    // External navigation may target a pipeline whose workflow isn't
+    // expanded yet (and so its runs aren't in `pipelines`). Look it up
+    // directly via /api/pipelines/:id, set as selected, and also expand
+    // its workflow rail-side so the user can see context.
+    // Always fetch the FULL pipeline — the in-memory cache only holds
+    // summary projections (no node.outputs, no conversation.messages),
+    // and the detail panel needs the heavy fields.
+    let cancelled = false;
+    void (async () => {
+      try {
+        const res = await fetch(`/api/pipelines/${encodeURIComponent(focusPipelineId)}`);
+        if (!res.ok) return;
+        const data: Pipeline = await res.json();
+        if (cancelled || !data?.id) return;
+        setSelectedPipeline(data);
+        setShowEditor(false);
+        if (data.workflowName) setActiveWorkflow(data.workflowName);
+        onFocusHandled?.();
+      } catch { /* ignore */ }
+    })();
+    return () => { cancelled = true; };
   }, [focusPipelineId, pipelines, onFocusHandled]);
 
   // Refresh selected pipeline
@@ -527,6 +618,24 @@ export default function PipelineView({ onViewTask, focusPipelineId, onFocusHandl
     }
   };
 
+  const handleRetryNode = async (pipelineId: string, nodeId: string) => {
+    const res = await fetch(`/api/pipelines/${pipelineId}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'retry-node', nodeId }),
+    });
+    if (!res.ok) {
+      const j = await res.json().catch(() => ({}));
+      alert(`Retry failed: ${j?.error || res.statusText}`);
+      return;
+    }
+    fetchData();
+    if (selectedPipeline?.id === pipelineId) {
+      const r = await fetch(`/api/pipelines/${pipelineId}`);
+      setSelectedPipeline(await r.json());
+    }
+  };
+
   const handleDelete = async (id: string) => {
     if (!confirm('Delete this pipeline?')) return;
     await fetch(`/api/pipelines/${id}`, {
@@ -566,7 +675,9 @@ initial_prompt: "{{input.task}}"
   const currentWorkflow = workflows.find(w => w.name === selectedWorkflow);
 
   return (
-    <div className="flex-1 flex min-h-0">
+    <div className="flex-1 flex flex-col min-h-0">
+      <MissingToolsBanner />
+      <div className="flex-1 flex min-h-0">
       {/* Left — Workflow list */}
       <aside style={{ width: sidebarWidth }} className="flex flex-col shrink-0 overflow-hidden">
         <div className="px-3 py-2 border-b border-[var(--border)] flex items-center gap-1.5">
@@ -741,44 +852,85 @@ initial_prompt: "{{input.task}}"
                   >{w.builtin ? 'View' : 'Edit'}</button>
                 </div>
                 {/* Execution history for this workflow */}
-                {isActive && (
-                  <div className="bg-[var(--bg-tertiary)]/50">
-                    {runs.length === 0 ? (
-                      <div className="px-4 py-2 text-[9px] text-[var(--text-secondary)]">No runs yet</div>
-                    ) : (
-                      runs.sort((a, b) => b.createdAt.localeCompare(a.createdAt)).slice(0, 20).map(p => (
-                        <button
-                          key={p.id}
-                          onClick={() => setSelectedPipeline(p)}
-                          className={`w-full text-left px-4 py-1.5 border-b border-[var(--border)]/20 hover:bg-[var(--bg-tertiary)] ${
-                            selectedPipeline?.id === p.id ? 'bg-[var(--accent)]/5' : ''
-                          }`}
-                        >
-                          <div className="flex items-center gap-1.5">
-                            <span className={`text-[9px] ${STATUS_COLOR[p.status]}`}>●</span>
-                            <span className="text-[9px] text-[var(--text-secondary)] font-mono">{p.id.slice(0, 8)}</span>
-                            {p.type === 'conversation' ? (
-                              <span className="text-[7px] px-1 rounded bg-[var(--accent)]/15 text-[var(--accent)]">
-                                R{p.conversation?.currentRound || 0}/{p.conversation?.config.maxRounds || '?'}
-                              </span>
-                            ) : (
-                            <div className="flex gap-0.5 ml-1">
-                              {p.nodeOrder.map(nodeId => (
-                                <span key={nodeId} className={`text-[8px] ${STATUS_COLOR[p.nodes[nodeId]?.status || 'pending']}`}>
-                                  {STATUS_ICON[p.nodes[nodeId]?.status || 'pending']}
+                {isActive && (() => {
+                  const sorted = runs.slice().sort((a, b) => b.createdAt.localeCompare(a.createdAt));
+                  // After clicking "Load older runs", show all loaded for this
+                  // workflow. Otherwise slice to 20 to keep the rail compact.
+                  const expanded = expandedHistory.has(w.name);
+                  const visible = expanded ? sorted : sorted.slice(0, 20);
+                  const showLoadMore = !exhaustedHistory.has(w.name) && (expanded || sorted.length >= 20);
+                  return (
+                    <div className="bg-[var(--bg-tertiary)]/50">
+                      {sorted.length === 0 ? (
+                        <div className="px-4 py-2 text-[9px] text-[var(--text-secondary)]">No runs yet</div>
+                      ) : (
+                        visible.map(p => (
+                          <button
+                            key={p.id}
+                            onClick={async () => {
+                              // The list payload is a LIGHT summary — no
+                              // node.outputs, no conversation.messages.
+                              // The detail panel walks those (e.g.
+                              // Object.entries(p.nodes[id].outputs)) and
+                              // crashes with "Cannot convert undefined to
+                              // object" when handed a summary. Fetch the
+                              // full pipeline before selecting.
+                              try {
+                                const res = await fetch(`/api/pipelines/${encodeURIComponent(p.id)}`);
+                                if (res.ok) {
+                                  const full = await res.json();
+                                  setSelectedPipeline(full);
+                                  return;
+                                }
+                              } catch { /* fall back to summary */ }
+                              setSelectedPipeline(p);
+                            }}
+                            className={`w-full text-left px-4 py-1.5 border-b border-[var(--border)]/20 hover:bg-[var(--bg-tertiary)] ${
+                              selectedPipeline?.id === p.id ? 'bg-[var(--accent)]/5' : ''
+                            }`}
+                          >
+                            <div className="flex items-center gap-1.5">
+                              <span className={`text-[9px] ${STATUS_COLOR[p.status]}`}>●</span>
+                              <span className="text-[9px] text-[var(--text-secondary)] font-mono">{p.id.slice(0, 8)}</span>
+                              {p.type === 'conversation' ? (
+                                <span className="text-[7px] px-1 rounded bg-[var(--accent)]/15 text-[var(--accent)]">
+                                  R{p.conversation?.currentRound || 0}/{p.conversation?.config.maxRounds || '?'}
                                 </span>
-                              ))}
+                              ) : (
+                                <div className="flex gap-0.5 ml-1">
+                                  {p.nodeOrder.map(nodeId => (
+                                    <span key={nodeId} className={`text-[8px] ${STATUS_COLOR[p.nodes[nodeId]?.status || 'pending']}`}>
+                                      {STATUS_ICON[p.nodes[nodeId]?.status || 'pending']}
+                                    </span>
+                                  ))}
+                                </div>
+                              )}
+                              <span className="text-[8px] text-[var(--text-secondary)] ml-auto">
+                                {new Date(p.createdAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+                              </span>
                             </div>
-                            )}
-                            <span className="text-[8px] text-[var(--text-secondary)] ml-auto">
-                              {new Date(p.createdAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
-                            </span>
-                          </div>
+                          </button>
+                        ))
+                      )}
+                      {showLoadMore && (
+                        <button
+                          onClick={() => void loadOlderRuns(w.name)}
+                          disabled={loadingMoreFor === w.name}
+                          className="w-full text-center px-4 py-1.5 text-[9px] text-[var(--accent)] hover:bg-[var(--bg-tertiary)] disabled:opacity-50 border-b border-[var(--border)]/20"
+                        >
+                          {loadingMoreFor === w.name
+                            ? 'Loading…'
+                            : expanded
+                              ? `↓ Load more (currently showing ${sorted.length})`
+                              : `↓ Load older runs (more than 20)`}
                         </button>
-                      ))
-                    )}
-                  </div>
-                )}
+                      )}
+                      {exhaustedHistory.has(w.name) && expanded && (
+                        <div className="px-4 py-1.5 text-[8px] text-center text-[var(--text-secondary)]">— end of history ({sorted.length} runs) —</div>
+                      )}
+                    </div>
+                  );
+                })()}
               </div>
             );
           })}
@@ -892,7 +1044,13 @@ initial_prompt: "{{input.task}}"
                         <div className="w-px h-4 bg-[var(--border)]" />
                       </div>
                     )}
-                    <DagNodeCard nodeId={nodeId} node={node} nodeDef={nodeDef} onViewTask={onViewTask} />
+                    <DagNodeCard
+                      nodeId={nodeId}
+                      node={node}
+                      nodeDef={nodeDef}
+                      onViewTask={onViewTask}
+                      onRetry={(nid) => handleRetryNode(selectedPipeline.id, nid)}
+                    />
                   </div>
                 );
               })}
@@ -1013,6 +1171,67 @@ initial_prompt: "{{input.task}}"
           </div>
         )}
       </main>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Small banner shown atop PipelineView when an external CLI a built-in
+ * workflow depends on (glab, gh, jq, git) isn't installed. Polls /api/health/tools
+ * once on mount + lets the user expand each row for the copy-pasteable
+ * install hint.
+ */
+function MissingToolsBanner() {
+  const [tools, setTools] = useState<Array<{ name: string; label: string; needed_for: string; installed: boolean; install_hint: string; version: string }>>([]);
+  const [expanded, setExpanded] = useState<string>('');
+  const [dismissed, setDismissed] = useState(false);
+
+  useEffect(() => {
+    fetch('/api/health/tools')
+      .then((r) => r.json())
+      .then((j) => setTools(j.tools || []))
+      .catch(() => {});
+  }, []);
+
+  if (dismissed) return null;
+  const missing = tools.filter((t) => !t.installed);
+  if (missing.length === 0) return null;
+
+  return (
+    <div className="border-b border-[var(--border)] bg-yellow-500/10 px-4 py-2">
+      <div className="flex items-center gap-2">
+        <span className="text-[11px] font-semibold text-yellow-500">⚠ Missing tools</span>
+        <span className="text-[10.5px] text-[var(--text-secondary)]">
+          Some built-in pipelines need these CLIs. Click a name for install instructions.
+        </span>
+        <span className="flex-1" />
+        <button
+          onClick={() => setDismissed(true)}
+          className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+          title="Dismiss until next reload"
+        >
+          ×
+        </button>
+      </div>
+      <div className="mt-1.5 flex flex-wrap gap-1.5">
+        {missing.map((t) => (
+          <div key={t.name} className="flex flex-col">
+            <button
+              onClick={() => setExpanded(expanded === t.name ? '' : t.name)}
+              className="text-[10.5px] px-2 py-0.5 border border-yellow-500/40 text-yellow-500 rounded hover:bg-yellow-500/10"
+              title={t.needed_for}
+            >
+              {t.name} {expanded === t.name ? '▾' : '▸'}
+            </button>
+            {expanded === t.name && (
+              <pre className="text-[10px] font-mono whitespace-pre-wrap mt-1 p-2 bg-black/30 text-[var(--text-secondary)] border border-[var(--border)] rounded max-w-[520px]">
+                {`# ${t.label} — needed for: ${t.needed_for}\n\n${t.install_hint}`}
+              </pre>
+            )}
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

package/components/PluginsPanel.tsx

@@ -29,6 +29,7 @@ interface PluginDetail {
   version: string;
   author?: string;
   description?: string;
+  category?: string;
   config: Record<string, { type: string; label?: string; description?: string; required?: boolean; default?: any; options?: string[] }>;
   params: Record<string, { type: string; label?: string; description?: string; required?: boolean; default?: any }>;
   actions: Record<string, { run: string; method?: string; url?: string; command?: string }>;
@@ -63,7 +64,8 @@ export default function PluginsPanel() {
       ]);
       const allData = await allRes.json();
       const instData = await instRes.json();
-      setPlugins(allData.plugins || []);
+      // Connectors have their own panel — keep this one focused on pipeline plugins.
+      setPlugins((allData.plugins || []).filter((p: any) => p.category !== 'connector'));
       // Build instances list from installed plugins
       const inst: PluginInstance[] = (instData.plugins || []).map((p: any) => ({
         id: p.id,