madarx 2.19.0 → 2.22.0

package/app/api/orchestrator/stream/route.js

@@ -5,7 +5,10 @@ import { executeTool, getTools } from '@/lib/orchestrator-tools.js';
 import { getSystemPrompt, getModel, getModels, currentDateInstruction } from '@/lib/agent-config.js';
 import { brandInstructionText } from '@/lib/brand.js';
 import { agentMemoryContext } from '@/lib/agent-memory-context.js';
-import { runOllamaAgent, runClaudeCodeAgent, runCodexAgent } from '@/lib/agent-engines.js';
+import { runOllamaAgent, runClaudeCodeAgent, runCodexAgent, agentSubprocessCwd } from '@/lib/agent-engines.js';
+import { getProject } from '@/lib/projects.js';
+import { DATA_DIR } from '@/lib/paths.js';
+import nodePath from 'node:path';
 import { thinkingBudgetTokens, getStreamVerbosity } from '@/lib/engine-verbosity.js';
 import {
   createChatSession,
@@ -18,7 +21,13 @@ import {
 import { publishLiveEvent } from '@/lib/live-events.js';
 import * as turnBroadcast from '@/lib/orchestrator-broadcast.js';
 import { buildAgentCreatedHtml } from '@/lib/agent-created-card.js';
+import { buildHiggsfieldMediaHtml } from '@/lib/higgsfield-media-card.js';
 import { INTENT_WITHOUT_ACTION_RE } from '@/lib/intent-without-action.js';
+import {
+  classifyCliTurn,
+  latestPlanningResult,
+  buildRouteGoalContinuationPrompt,
+} from '@/lib/cli-action-flow.js';
 import { looksFabricatedToolTranscript } from '@/lib/fabricated-tool-output.js';
 import { loadAttachments, attachmentsToContentBlocks, attachmentsToPromptText } from '@/lib/chat-uploads.js';
 
@@ -44,15 +53,26 @@ function buildCliSystemPrompt() {
   const brand = brandInstructionText();
   return `${currentDateInstruction()}
 
-You are the madarX Main Agent — local-first AI orchestrator. You report to the owner as a chief of staff reports to a chairman: bring back the actual answer, not a list of places they could go to find it.
+You are the madarX Main Agent — local-first AI orchestrator. You report to the owner as a chief of staff reports to a chairman: bring back the actual answer, not a list of places they could go to find it. You DELEGATE specialist work to the agents that own the tools; you do not perform it yourself.
 
 madarX is a VISUAL workspace, not a chatbot. The chat bubble exists only for short conversational exchanges. Anything that would make the reader scroll, scan, or compare belongs in a designed HTML artifact rendered on the canvas — never as a long markdown blob in chat.
 
-What you CAN do:
-- Search the web and fetch live data — use madarx-action blocks with web_search or web_fetch. Results come back automatically so you can synthesize a direct answer.
-- Generate HTML pages, landing pages, dashboards, news feeds, reports, decks, and UI — output a complete self-contained HTML file in a \`\`\`html code fence. This is the PRIMARY output channel for any structured response.
-- Write short conversational replies (≤ 2 sentences, no lists) — reply in plain text.
-- Create agents for recurring/scheduled work only — output a madarx-action block.
+DELEGATION-FIRST (non-negotiable): for any request beyond a one-line factual reply, set the goal in one sentence and route it FIRST:
+\`\`\`madarx-action
+{"tool":"route_goal","input":{"goal":"<one-sentence goal>"}}
+\`\`\`
+route_goal returns the live roster (every agent's role/skills/granted tools), the tool catalog, and whether Tool Smith can build what's missing. Reason over it and pick ONE ladder step:
+  - delegate → an existing specialist fits: run it with run_agent (pass an instruction + expected_output).
+  - create_then_delegate → none fits: create_agent for the role the goal needs, then run_agent it.
+  - build_capability → a specialist lacks a tool: request_capability (Tool Smith builds + grants), tell the owner it's building, then delegate.
+  - direct_fallback → trivial one-line factual ask only: answer in chat.
+Specialist domain tools (flights, hotels, email, GitHub writes, calendar, database, deploys) are NOT in your toolset — they belong to specialists. Do not attempt them directly; they will be refused with "delegate_required". This routing works for ANY goal, not a fixed domain list.
+
+What you CAN do directly:
+- Quick factual web lookups — madarx-action blocks with web_search / web_fetch — for a single date, number, or definition that does not warrant a specialist. Results come back automatically.
+- Generate HTML pages, dashboards, reports, decks, UI — a complete self-contained HTML file in a \`\`\`html code fence. PRIMARY output channel for structured responses.
+- Write short conversational replies (≤ 2 sentences, no lists) — plain text.
+- Route + delegate via route_goal / run_agent / create_agent / request_capability madarx-action blocks. Use list_agents to see your existing workforce + what each can do BEFORE creating a new agent — reuse an equipped specialist, never spawn a duplicate. Every run_agent is filed as a tracked task on /tasks and its status is managed for you.
 
 ARTIFACT TEMPLATES (always emit a complete HTML page in a \`\`\`html fence — never paste structured data as markdown in chat):
 - news → "news feed" layout: stacked story cards with headline, source label, timestamp, 2-3 sentence dek, and a "Read source" link per card. Publication-style typography.
@@ -71,64 +91,31 @@ DECISION RULE (non-negotiable):
 - Anything else (any list of 3+ items, any comparison, any news/report/document/page/dashboard, any response > 2 sentences) → emit a \`\`\`html ... \`\`\` artifact FIRST, then a 1-2 sentence chat summary describing what you built.
 - Never paste a markdown response with bullet links into the chat. If you find yourself writing "## Sources" or a bulleted list outside an HTML artifact, stop and move it into the artifact.
 
-LIVE DATA WORKFLOW (non-negotiable for flights, hotels, prices, addresses, schedules, any factual lookup):
-  1) web_search to identify the 2-4 most authoritative sources (operator/booking sites, official pages, named publications).
-  2) web_fetch each chosen source to extract concrete values — prices, dates, times, addresses, ratings, names, distances.
-  3) Present the result as a comparison TABLE or structured list with real values in cells. Cite sources at the bottom as a short "Sources" list.
-
-NEVER deliver a response that is just "Results for X" sections of search titles and snippets. That is not an answer. If a value cannot be extracted after fetching, put "Not listed" in the cell and continue — do not pad with snippets.
+SPECIALIST DATA (flights, hotels, prices behind booking sites, email, calendar, repos, deploys): DELEGATE — do not run those tools yourself. route_goal, then run_agent the owning specialist. The specialist brings back concrete values; you verify they meet the goal and present them as a designed artifact.
 
+QUICK FACTUAL LOOKUP (a single date, number, or definition that does not warrant a specialist): you may search directly.
 Web search:
 \`\`\`madarx-action
 {"tool":"web_search","input":{"query":"<search query>","count":5}}
 \`\`\`
-
 Fetch a specific URL:
 \`\`\`madarx-action
 {"tool":"web_fetch","input":{"url":"<url>"}}
 \`\`\`
+NEVER deliver a response that is just "Results for X" sections of search titles and snippets — that is not an answer.
 
-You can emit multiple action blocks in one response. Combine them: search broadly first, then fetch the strongest URLs that came back.
-
-Example — user asks "find flights DXB to London May 18-25 and hotels in Kensington":
-Turn 1 — discovery searches:
-\`\`\`madarx-action
-{"tool":"web_search","input":{"query":"Emirates DXB to LHR May 18 2026 return May 25 economy fare","count":5}}
-\`\`\`
+Example — user asks "find flights DXB to London May 18-25":
+Turn 1 — route the goal:
 \`\`\`madarx-action
-{"tool":"web_search","input":{"query":"4 star hotels South Kensington London 7 nights May 18 2026 price","count":5}}
+{"tool":"route_goal","input":{"goal":"find a return flight DXB to London, 18-25 May, economy"}}
 \`\`\`
-Turn 2 — after seeing results, fetch the actual booking/operator pages:
+Turn 2 — the roster shows a Travel Concierge that owns flight_search → delegate to it:
 \`\`\`madarx-action
-{"tool":"web_fetch","input":{"url":"https://www.emirates.com/.../dxb-to-lhr"}}
+{"tool":"run_agent","input":{"agent_name":"Travel Concierge","instruction":"Return flight DXB→London 18 May, back 25 May, economy — compare 3 options with real fares/times.","expected_output":"A comparison table of 3+ flights with airline, route, times, cabin, price, and source links.","wake_reason":"owner requested flights via chat"}}
 \`\`\`
-\`\`\`madarx-action
-{"tool":"web_fetch","input":{"url":"https://www.tripadvisor.com/Hotels-South-Kensington-London"}}
-\`\`\`
-Turn 3 — produce the final answer as a structured artifact:
-
-# Trip plan: Dubai → London, 18–25 May 2026
-
-## Flight options
-| Airline | Route | Outbound | Return | Cabin | Price (AED) | Notes |
-|---|---|---|---|---|---|---|
-| Emirates | DXB → LHR | 18 May 02:40 | 25 May 14:25 | Economy Flex | 4,250 | Direct, 7h 50m |
-| British Airways | DXB → LHR | 18 May 09:15 | 25 May 21:30 | Economy | 3,890 | Direct, 7h 55m |
-| Etihad | AUH → LHR | 18 May 02:25 | 25 May 14:10 | Economy | 3,520 | 1h transfer at AUH |
-
-## Hotel shortlist (South Kensington, 7 nights)
-| Hotel | Stars | Nightly (£) | 7-night total (£) | Walk to Tube | Source |
-|---|---|---|---|---|---|
-| The Milestone | 5 | 612 | 4,284 | 3 min (High St Ken) | Booking.com |
-| Number Sixteen | 5 | 478 | 3,346 | 4 min (South Ken) | Hotel site |
-| The Cranley | 4 | 295 | 2,065 | 2 min (Gloucester Rd) | Tripadvisor |
-
-## Sources
-1. Emirates fare search (link)
-2. British Airways fare search (link)
-3. Tripadvisor South Kensington (link)
-
-AGENT CREATION — only for recurring or scheduled tasks (daily monitoring, weekly reports):
+Turn 3 — the specialist produced the itinerary artifact; confirm in one line. If no Travel Concierge existed, create_agent one first (create_then_delegate); if it lacked flight_search, request_capability (build_capability) and tell the owner it's being built.
+
+AGENT CREATION — for recurring/scheduled work, OR to create a specialist that route_goal showed is missing (create_then_delegate):
 \`\`\`madarx-action
 {"tool":"create_agent","input":{"name":"Agent Name","mission":"...","engine":"anthropic","schedule":"daily 08:00","tools":["web-search","browser"]}}
 \`\`\`
@@ -412,7 +399,7 @@ export async function POST(req) {
   // Thread tenancy so chat-initiated tool calls (e.g. mines_run_report →
   // runSingleReport → executeRegistryTool) attribute audit/approval rows to the
   // real acting user/org, not the 'local-user'/'personal-org' fallbacks.
-  const toolContext = { project_id: projectId, user_id: session.user_id, org_id: session.org_id };
+  const toolContext = { project_id: projectId, user_id: session.user_id, org_id: session.org_id, engine: activeEngine };
 
   // pending_approvals: [{ approval_id, tool_name }] — sent by the chat client
   // after the user clicks Approve in an inline tool-step. We inject
@@ -425,6 +412,10 @@ export async function POST(req) {
         .map(p => ({ approval_id: String(p.approval_id), tool_name: String(p.tool_name), used: false }))
     : [];
 
+  // Forward owner-granted approvals into delegated sub-agents (run_agent → runAgentTick)
+  // so an inline-approved sub-agent tool resumes instead of re-prompting.
+  toolContext.pending_approvals = pendingApprovals.map(p => ({ approval_id: p.approval_id, tool_name: p.tool_name }));
+
   // Mirror of REFUNDABLE_ERRORS in lib/tools/registry.js — when the adapter
   // errors with one of these codes, the registry refunds the approval, so we
   // must not mark the pending entry as used either.
@@ -472,10 +463,20 @@ export async function POST(req) {
   const modelIdentityContext = isCliEngine
     ? ''
     : `\n\nActive model: ${activeModelMeta?.label || activeModel} (id: ${activeModel}). If the user asks which model you are, answer with this exact name. Do not guess from training-data priors.`;
+  // Project-Disk grounding. The owner's "project folder / my files" means the
+  // active project's Disk (data/disk/<slug>/, surfaced at /projects/<slug>),
+  // NOT the madarX source tree. Tell the agent to use the disk_* tools and never
+  // inspect the source code or parent directories for the owner's files.
+  let activeProjectMeta = null;
+  try { activeProjectMeta = getProject(projectId); } catch { /* unknown/personal scope */ }
+  const projectDiskContext = `\n\nPROJECT FILES — when the owner asks to "check my project", "my folder", "my files", or anything about ${activeProjectMeta ? `the "${activeProjectMeta.name}" project` : 'their project'}, that means the project's DISK (the files shown at /projects/<slug>), NOT the madarX source code. Active project: ${activeProjectMeta ? `name="${activeProjectMeta.name}", slug="${activeProjectMeta.slug}", id="${activeProjectMeta.id}"` : `id="${projectId}"`}.
+- Use disk_list_folders / disk_list_files / disk_read_file (and list_projects to resolve a project by name/slug). These read the owner's content.
+- NEVER answer a "my project/files" question by reading the madarX source tree (app/, lib/, tests/, CLAUDE.md) or any directory above it, and never via Bash/Read/Glob/file_read/directory_list. Those are the product's own code, not the owner's files.`;
+
   // Use `let` so the CLI fallback path can override to the Anthropic system prompt.
   let systemPrompt = isCliEngine
-    ? (buildCliSystemPrompt() + cliArtifactContext)
-    : getSystemPrompt() + agentMemoryContext(userText) + artifactContext + modelIdentityContext;
+    ? (buildCliSystemPrompt() + cliArtifactContext + projectDiskContext)
+    : getSystemPrompt() + agentMemoryContext(userText) + artifactContext + modelIdentityContext + projectDiskContext;
 
   const encoder = new TextEncoder();
   // The CLI subprocess can keep streaming chunks back via `cliOnChunk` even after
@@ -621,6 +622,12 @@ export async function POST(req) {
                 systemPrompt,
                 userMessage,
                 allowedTools: [],
+                // Boot the chat subprocess in a neutral runtime dir (workspace),
+                // not the madarX repo root, so a casual "list my files" can't
+                // wander the source tree or the parent dir's sibling repos. The
+                // owner's files come through the disk_* madarx-action tools.
+                cwd: agentSubprocessCwd(),
+                addDirs: [nodePath.join(DATA_DIR, 'disk')],
                 maxTurns: 5,
                 timeoutMs: Number(process.env.CLAUDE_CODE_CHAT_TIMEOUT_MS || 600000),
                 verbosity: getStreamVerbosity(),
@@ -658,6 +665,38 @@ export async function POST(req) {
           let actions = await executeCliActions(raw, { emit, context: toolContext });
           let cliHasHtml = extractCliArtifacts(raw).length > 0;
 
+          // route_goal continuation: route_goal is a PLANNING action whose result
+          // (the live roster) must drive a follow-up delegating action (run_agent /
+          // create_agent / request_capability). The CLI engine executes action
+          // blocks post-hoc and never feeds results back into the subprocess, so a
+          // turn that calls ONLY route_goal dead-ends — the model narrates "I'll
+          // delegate once the roster comes back" but no second turn exists, so no
+          // specialist is ever dispatched (no sub-agent run, nothing in the activity
+          // panel). Re-invoke the CLI ONCE with the route_goal registry injected so
+          // it can pick a ladder step and emit the real delegating action — the
+          // CLI-engine equivalent of the Anthropic loop's turn 2. Only fires when
+          // route_goal was the ONLY action and no HTML artifact was produced, so
+          // one-shot delegations and conversational answers are untouched.
+          if (classifyCliTurn(actions, { hasHtml: cliHasHtml }).needsRouteContinuation) {
+            const registry = latestPlanningResult(actions);
+            const routeNudge = buildRouteGoalContinuationPrompt(cliUserContent, registry);
+            emit('cli_stream', { text: 'Routing resolved — delegating…' });
+            let routeRetryRaw = null;
+            try {
+              routeRetryRaw = await invokeCliWithHeartbeat(routeNudge);
+            } catch (routeErr) {
+              if (process.env.MADARX_DEBUG) console.error('[madarx] route_goal continuation failed:', routeErr.message);
+            }
+            if (routeRetryRaw) {
+              const routeRetryActions = await executeCliActions(routeRetryRaw, { emit, context: toolContext });
+              if (routeRetryActions.length > 0 || extractCliArtifacts(routeRetryRaw).length > 0) {
+                raw = routeRetryRaw;
+                actions = routeRetryActions;
+                cliHasHtml = extractCliArtifacts(routeRetryRaw).length > 0;
+              }
+            }
+          }
+
           // Intent-without-action guard: the CLI narrated a task ("Started AI brief run.
           // Artifact lands on canvas when done.") but emitted NO ```madarx-action``` block,
           // so nothing actually ran — the user gets a promise + silence. Re-prompt the CLI
@@ -671,7 +710,12 @@ export async function POST(req) {
           // action. That blob has 0 real actions, so without this it would slip through and be
           // delivered as the answer. Detect it and re-prompt to dispatch the real action.
           const initialFabricated = looksFabricatedToolTranscript(raw);
-          if (actions.length === 0 && !cliHasHtml && (INTENT_WITHOUT_ACTION_RE.test(stripCliActions(raw)) || initialFabricated)) {
+          // A route_goal-only turn that survived the continuation above (the retry
+          // produced nothing actionable) is still an intent-without-action stall:
+          // the model routed a goal but never delegated. Treat it like a zero-action
+          // turn so the generic nudge fires as a last resort.
+          const routeGoalStalled = classifyCliTurn(actions, { hasHtml: cliHasHtml }).needsRouteContinuation;
+          if ((actions.length === 0 || routeGoalStalled) && !cliHasHtml && (INTENT_WITHOUT_ACTION_RE.test(stripCliActions(raw)) || initialFabricated || routeGoalStalled)) {
             const fabricationClause = initialFabricated
               ? ' You SIMULATED a tool run by writing <tool_call>/<tool_response> text with made-up results — that is fiction, nothing actually ran. Do NOT simulate or narrate tool output. To run another agent, emit a real run_agent madarx-action block with the target agent id; madarX will execute it and return the real artifact.'
               : '';
@@ -898,6 +942,22 @@ Rules (non-negotiable):
               .map(a => a.result);
             const ranAgentLines = [];
             for (const r of ranAgents) {
+              // Sub-agent paused on an owner-approval gate: surface an inline
+              // Approve/Deny card in chat instead of sending the owner to the
+              // approvals page. Approving re-dispatches the same delegation.
+              if (r.pending_approval?.approval_id) {
+                emit('agent_approval', {
+                  approval_id: r.pending_approval.approval_id,
+                  tool_name: r.pending_approval.tool_name,
+                  agent_id: r.pending_approval.agent_id || r.agent_id,
+                  agent_name: r.pending_approval.agent_name || r.agent_name,
+                  summary: r.pending_approval.summary || `${r.agent_name} needs approval to run ${r.pending_approval.tool_name}.`,
+                });
+                ranAgentLines.push(
+                  `**${r.agent_name}** is ready but needs your approval to spend credits / act. Approve below to continue.`
+                );
+                continue;
+              }
               const artId = r.artifact_id || r.artifact?.artifact_id || r.artifact?.id || null;
               if (artId) {
                 emit('artifacts', { created: [{ title: r.title || r.agent_name, artifact_id: artId }] });
@@ -1167,6 +1227,28 @@ Rules (non-negotiable):
                  tool.name === 'send_to_hermes' || tool.name === 'start_hermes_job')) {
               artifactCreated = true;
             }
+            if (!isError &&
+                (tool.name === 'higgsfield_generate_image' ||
+                 tool.name === 'higgsfield_generate_video' ||
+                 tool.name === 'higgsfield_product_photoshoot') &&
+                output?.ok && output?.url) {
+              try {
+                const mediaKind = tool.name === 'higgsfield_generate_video' ? 'video' : 'image';
+                const html = buildHiggsfieldMediaHtml(output, {
+                  kind: mediaKind,
+                  prompt: tool.input?.prompt || '',
+                });
+                const card = createArtifact({
+                  title: `Higgsfield ${mediaKind === 'video' ? 'Video' : 'Image'}`,
+                  kind: 'html',
+                  content: html,
+                  project_id: projectId,
+                });
+                emit('artifacts', { created: [{ title: `Higgsfield ${mediaKind}`, artifact_id: card.artifact_id }] });
+                emit('session_artifact', { artifact_id: card.artifact_id });
+                artifactCreated = true;
+              } catch { /* non-fatal — fall through to normal tool_result emission */ }
+            }
             if (!isError && tool.name === 'create_agent' && output?.agent) {
               try {
                 const html = buildAgentCreatedHtml(output.agent, output.files ?? []);

package/app/components/app-topbar.jsx

@@ -7,6 +7,7 @@ import { Search, Command, Activity } from 'lucide-react';
 import { subscribeAgentEvents } from '../agents/agent-events-bus.js';
 import { SpinnerIcon, CheckIcon, StepXIcon } from './dashboard/icons';
 import { toolStepDisplayName, toolStepSublabel } from './dashboard/tool-steps.js';
+import { reduceAgentEvent } from './dashboard/bg-agent-reducer.js';
 
 // Pathname prefix → human section label. Longest-prefix wins via order: list
 // more specific paths before their parents.
@@ -34,94 +35,9 @@ function sectionFor(pathname) {
   return hit ? hit[1] : 'madarX';
 }
 
-const STEP_CAP = 8;          // most recent tool steps kept per agent
-const LINGER_MS = 6000;      // keep a finished agent in the list briefly
+const LINGER_MS = 20000;     // keep a finished agent visible long enough to notice
 const ORPHAN_TTL_MS = 120000; // drop a "running" agent with no activity for 2m
 
-// Fold a single live event into the keyed-by-agent activity map. Mirrors the
-// dashboard's use-bg-agents reducer, kept inline here so the global topbar can
-// show background-agent detail on every page from the shared SSE bus.
-function reduceEvent(prev, event) {
-  const id = event.agent_id;
-  if (!id) return prev;
-  const existing = prev[id];
-
-  switch (event.type) {
-    case 'agent_run_start':
-      return {
-        ...prev,
-        [id]: {
-          agent_id: id,
-          agent_name: event.agent_name || id,
-          triggered_by: event.triggered_by || null,
-          status: 'running',
-          started_at: event.ts || Date.now(),
-          current_tool: null,
-          current_input: null,
-          last_activity: event.ts || Date.now(),
-          steps: existing?.steps?.slice(-4) ?? [],
-        },
-      };
-
-    case 'agent_tool_start': {
-      const base = existing || {
-        agent_id: id,
-        agent_name: event.agent_name || id,
-        triggered_by: null,
-        status: 'running',
-        started_at: Date.now(),
-        steps: [],
-      };
-      const ts = event.ts || Date.now();
-      return {
-        ...prev,
-        [id]: {
-          ...base,
-          agent_name: event.agent_name || base.agent_name,
-          status: 'running',
-          current_tool: event.tool,
-          current_input: event.input_summary ?? null,
-          last_activity: ts,
-          steps: [
-            ...base.steps,
-            { tool: event.tool, input: event.input_summary ?? null, status: 'running', ts },
-          ].slice(-STEP_CAP),
-        },
-      };
-    }
-
-    case 'agent_tool_result': {
-      if (!existing) return prev;
-      const steps = [...existing.steps];
-      for (let i = steps.length - 1; i >= 0; i--) {
-        if (steps[i].tool === event.tool && steps[i].status === 'running') {
-          steps[i] = { ...steps[i], status: event.isError ? 'error' : 'done' };
-          break;
-        }
-      }
-      return {
-        ...prev,
-        [id]: { ...existing, current_tool: null, last_activity: event.ts || Date.now(), steps },
-      };
-    }
-
-    case 'agent_run_complete':
-      if (!existing) return prev;
-      return {
-        ...prev,
-        [id]: {
-          ...existing,
-          status: event.isError ? 'failed' : 'complete',
-          finished_at: event.ts || Date.now(),
-          current_tool: null,
-        },
-      };
-
-    default:
-      return prev;
-  }
-}
-
 export default function AppTopbar() {
   const pathname = usePathname();
   const section = useMemo(() => sectionFor(pathname), [pathname]);
@@ -134,9 +50,39 @@ export default function AppTopbar() {
   const wrapRef = useRef(null);
 
   useEffect(() => {
-    return subscribeAgentEvents((event) => {
-      setAgents((cur) => reduceEvent(cur, event));
+    let cancelled = false;
+    // Seed "what's running now" from the persistent snapshot so a run that
+    // started before this connection — or whose start we missed on a reconnect —
+    // appears without waiting for the next live event. Never clobber a richer
+    // live entry (one already tracking tool steps).
+    async function seedActive() {
+      try {
+        const r = await fetch('/api/agents/active-runs');
+        if (!r.ok) return;
+        const { agents: active } = await r.json();
+        if (cancelled || !Array.isArray(active)) return;
+        setAgents((cur) => {
+          let next = cur;
+          for (const a of active) {
+            if (!a.agent_id || next[a.agent_id]) continue;
+            next = reduceAgentEvent(next, {
+              type: 'agent_run_start',
+              agent_id: a.agent_id,
+              agent_name: a.agent_name,
+              triggered_by: a.triggered_by,
+              ts: a.started_at,
+            });
+          }
+          return next;
+        });
+      } catch { /* offline / not ready — live events will catch up */ }
+    }
+    const unsub = subscribeAgentEvents((event) => {
+      if (event.type === 'ready') { seedActive(); return; }
+      setAgents((cur) => reduceAgentEvent(cur, event));
     });
+    seedActive();
+    return () => { cancelled = true; unsub(); };
   }, []);
 
   // Sweep: evict finished agents after a short linger, and orphaned "running"

package/app/components/dashboard/apply-stream-event.js

@@ -119,6 +119,21 @@ export function applyStreamEvent(eventName, payload, ctx) {
     refresh();
   } else if (eventName === 'usage') {
     setUsage(payload);
+  } else if (eventName === 'agent_approval' && payload?.approval_id) {
+    // A delegated sub-agent paused on an owner-approval gate. Surface an inline
+    // Approve/Deny card in the chat thread (see chat-panel) so the owner stays in
+    // the conversation instead of opening the approvals page.
+    ctx.setAgentApprovals?.(list => {
+      if (list.some(x => x.approval_id === payload.approval_id)) return list;
+      return [...list, {
+        approval_id: payload.approval_id,
+        tool_name: payload.tool_name || null,
+        agent_id: payload.agent_id || null,
+        agent_name: payload.agent_name || 'Agent',
+        summary: payload.summary || '',
+        status: 'pending',
+      }];
+    });
   } else if (eventName === 'pending_approvals' && Array.isArray(payload?.approvals)) {
     for (const a of payload.approvals) {
       if (a?.approval_id && a?.tool_name) {

package/app/components/dashboard/bg-agent-reducer.js

@@ -0,0 +1,125 @@
+// Pure reducer that folds a single live SSE event into the keyed-by-agent
+// background-activity map shown by the global topbar (app-topbar.jsx). Extracted
+// so the resilience rules can be unit-tested without a DOM.
+//
+// Resilience invariant: an entry must surface even when run_start was missed
+// (the two independent EventSource connections — toolbar bus vs command center —
+// can race on connect/reconnect). A sub-agent that ran but had no granted tool
+// emits ONLY run_start + run_complete; if the toolbar misses run_start it would
+// otherwise show nothing while the command center shows the run. So tool_result
+// and run_complete both create an entry when none exists, never silently drop.
+
+export const STEP_CAP = 8; // most recent tool steps kept per agent
+
+export function reduceAgentEvent(prev, event) {
+  const id = event.agent_id;
+  if (!id) return prev;
+  const existing = prev[id];
+
+  switch (event.type) {
+    case 'agent_run_start':
+      return {
+        ...prev,
+        [id]: {
+          agent_id: id,
+          agent_name: event.agent_name || id,
+          triggered_by: event.triggered_by || null,
+          status: 'running',
+          started_at: event.ts || Date.now(),
+          current_tool: null,
+          current_input: null,
+          last_activity: event.ts || Date.now(),
+          steps: existing?.steps?.slice(-4) ?? [],
+        },
+      };
+
+    case 'agent_tool_start': {
+      const base = existing || {
+        agent_id: id,
+        agent_name: event.agent_name || id,
+        triggered_by: null,
+        status: 'running',
+        started_at: Date.now(),
+        steps: [],
+      };
+      const ts = event.ts || Date.now();
+      return {
+        ...prev,
+        [id]: {
+          ...base,
+          agent_name: event.agent_name || base.agent_name,
+          status: 'running',
+          current_tool: event.tool,
+          current_input: event.input_summary ?? null,
+          last_activity: ts,
+          steps: [
+            ...base.steps,
+            { tool: event.tool, input: event.input_summary ?? null, status: 'running', ts },
+          ].slice(-STEP_CAP),
+        },
+      };
+    }
+
+    case 'agent_tool_result': {
+      // A tool result for an agent we never saw start (missed run_start on a
+      // late/reconnected SSE connection) must still surface the agent — create a
+      // running entry from the result rather than dropping it.
+      if (!existing) {
+        const ts = event.ts || Date.now();
+        return {
+          ...prev,
+          [id]: {
+            agent_id: id,
+            agent_name: event.agent_name || id,
+            triggered_by: null,
+            status: 'running',
+            started_at: ts,
+            current_tool: null,
+            last_activity: ts,
+            steps: [{ tool: event.tool, status: event.isError ? 'error' : 'done', ts }],
+          },
+        };
+      }
+      const steps = [...existing.steps];
+      for (let i = steps.length - 1; i >= 0; i--) {
+        if (steps[i].tool === event.tool && steps[i].status === 'running') {
+          steps[i] = { ...steps[i], status: event.isError ? 'error' : 'done' };
+          break;
+        }
+      }
+      return {
+        ...prev,
+        [id]: { ...existing, current_tool: null, last_activity: event.ts || Date.now(), steps },
+      };
+    }
+
+    case 'agent_run_complete': {
+      // Never silently drop a completion. If run_start was missed (reconnect
+      // race) and the run emitted no tool events — e.g. a sub-agent that ran but
+      // had no granted tool to call — this is the ONLY event we get for it.
+      // Without this, the toolbar shows nothing while the command center (whose
+      // connection caught run_start) shows the run. Create a finished entry so
+      // both panels agree.
+      const finishedAt = event.ts || Date.now();
+      const base = existing || {
+        agent_id: id,
+        agent_name: event.agent_name || id,
+        triggered_by: event.triggered_by || null,
+        started_at: finishedAt,
+        steps: [],
+      };
+      return {
+        ...prev,
+        [id]: {
+          ...base,
+          status: event.isError ? 'failed' : 'complete',
+          finished_at: finishedAt,
+          current_tool: null,
+        },
+      };
+    }
+
+    default:
+      return prev;
+  }
+}

package/app/components/dashboard/chat-panel.jsx

@@ -94,6 +94,8 @@ function ChatPanel() {
   const command = mainAgent.command;
   const stop = mainAgent.stop;
   const decideApproval = mainAgent.decideApproval;
+  const agentApprovals = mainAgent.agentApprovals || [];
+  const resumeAgentApproval = mainAgent.resumeAgentApproval;
   const hideChat = useCallback(() => setChatHidden(true), [setChatHidden]);
   const onOpenVoice = useCallback(() => setVoiceOpen(true), [setVoiceOpen]);
   const composerRef = useRef(null);
@@ -503,6 +505,60 @@ function ChatPanel() {
         )}
       </div>
     )}
+    {agentApprovals.length > 0 && (
+      <div className="agent-approvals">
+        {agentApprovals.map(card => {
+          const pending = card.status === 'pending';
+          const resuming = card.status === 'resuming';
+          const done = card.status === 'done' || card.status === 'approved';
+          const denied = card.status === 'denied';
+          const errored = card.status === 'error';
+          return (
+            <div
+              key={card.approval_id}
+              className="agent-approval-card"
+              style={{
+                margin: '8px 0', padding: '12px 14px', borderRadius: 12,
+                border: '1px solid rgba(17,19,24,.12)', background: '#fff',
+                display: 'flex', flexDirection: 'column', gap: 8,
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 4, background: pending ? '#c2452a' : done ? '#2f9e44' : '#9a968d' }} />
+                <strong style={{ font: '600 13px/1.3 ui-sans-serif,system-ui' }}>
+                  {card.agent_name} needs your approval
+                </strong>
+              </div>
+              <div style={{ font: '400 12.5px/1.45 ui-sans-serif,system-ui', color: '#5b606b' }}>
+                {card.summary || `Approve to run ${card.tool_name}.`}
+              </div>
+              {pending && (
+                <div style={{ display: 'inline-flex', gap: 6 }}>
+                  <button
+                    type="button"
+                    onClick={() => resumeAgentApproval(card.approval_id, 'approved')}
+                    style={{ appearance: 'none', border: 0, background: '#c2452a', color: '#fff', padding: '6px 14px', borderRadius: 999, font: '600 12px/1 ui-sans-serif,system-ui', cursor: 'pointer' }}
+                  >
+                    Approve &amp; continue
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => resumeAgentApproval(card.approval_id, 'denied')}
+                    style={{ appearance: 'none', border: '1px solid rgba(17,19,24,.16)', background: '#fff', color: '#313740', padding: '6px 14px', borderRadius: 999, font: '600 12px/1 ui-sans-serif,system-ui', cursor: 'pointer' }}
+                  >
+                    Deny
+                  </button>
+                </div>
+              )}
+              {resuming && <div style={{ font: '500 12px/1 ui-sans-serif,system-ui', color: '#c2452a' }}>Running…</div>}
+              {done && <div style={{ font: '500 12px/1 ui-sans-serif,system-ui', color: '#2f9e44' }}>Approved — done.</div>}
+              {denied && <div style={{ font: '500 12px/1 ui-sans-serif,system-ui', color: '#9a968d' }}>Denied.</div>}
+              {errored && <div style={{ font: '500 12px/1 ui-sans-serif,system-ui', color: '#c2452a' }}>Couldn’t continue: {String(card.error || 'error')}</div>}
+            </div>
+          );
+        })}
+      </div>
+    )}
     {busy && liveSteps.length === 0 && !liveStatus && !(liveThinking && liveThinking.trim()) && <div className="typing-indicator"><span /><span /><span /></div>}
     {!busy && agentWorkingRemote && (
       <div className="agent-resume-banner" aria-live="polite">