madarx 2.18.0 → 2.21.0

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

@@ -11,10 +11,14 @@ import {
   createChatSession,
   appendChatMessage,
   getChatSession,
+  setSessionActiveTurn,
   createArtifact,
   updateArtifact,
 } from '@/lib/runtime.js';
+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 { looksFabricatedToolTranscript } from '@/lib/fabricated-tool-output.js';
 import { loadAttachments, attachmentsToContentBlocks, attachmentsToPromptText } from '@/lib/chat-uploads.js';
@@ -41,15 +45,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.
 
 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.
@@ -68,64 +83,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"]}}
 \`\`\`
@@ -386,6 +368,19 @@ export async function POST(req) {
     sessionId = created.id;
   }
 
+  // Live-turn id for navigate-away/return continuity. Marks the session as
+  // "agent working" so a returning client can show a resume banner (Phase 1)
+  // and, later, re-attach to the live stream (Phase 2). Cleared in `finally`.
+  const turnId = `turn-${sessionId}-${Date.now()}`;
+  function emitTurnPhase(phase) {
+    try {
+      publishLiveEvent({ type: 'chat_turn', session_id: sessionId, turn_id: turnId, phase });
+    } catch { /* observation-only — never let it break the turn */ }
+  }
+  try { setSessionActiveTurn(sessionId, turnId); } catch { /* best-effort */ }
+  try { turnBroadcast.beginTurn(sessionId, turnId); } catch { /* best-effort */ }
+  emitTurnPhase('started');
+
   // Optional: caller passes the artifact ID from the previous turn so follow-ups can update it.
   const sessionArtifactId = typeof body.session_artifact_id === 'string' ? body.session_artifact_id : null;
 
@@ -409,6 +404,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.
@@ -484,6 +483,10 @@ export async function POST(req) {
         }
       }
       function emit(event, data) {
+        // Mirror to the turn broadcaster FIRST so a re-attached client (Phase 2)
+        // receives the frame even after this request's stream has closed
+        // (navigate-away leaves the server loop running to completion).
+        try { turnBroadcast.publish(sessionId, turnId, event, data); } catch { /* best-effort */ }
         if (streamState.closed) return;
         const payload = typeof data === 'string' ? data : JSON.stringify(data);
         enqueue(`event: ${event}\ndata: ${payload}\n\n`);
@@ -878,6 +881,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 }] });
@@ -1109,6 +1128,9 @@ Rules (non-negotiable):
             });
           } catch { /* session deleted mid-stream — keep streaming, drop persistence */ }
 
+          // Each persisted turn is a resume point for a returning client.
+          emitTurnPhase('step');
+
           totalAgentText += textBuffer;
 
           // If no tool calls, we are done
@@ -1144,6 +1166,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 ?? []);
@@ -1198,6 +1242,11 @@ Rules (non-negotiable):
       } catch (err) {
         emit('error', { message: err.message });
       } finally {
+        // Clear the live-turn flag even on error/disconnect so the session
+        // reads idle on return. (cancel() leaves the loop running to here.)
+        try { setSessionActiveTurn(sessionId, null); } catch { /* best-effort */ }
+        try { turnBroadcast.endTurn(sessionId, turnId); } catch { /* best-effort */ }
+        emitTurnPhase('done');
         closeStream();
       }
     },

package/app/api/orgs/[id]/invites/route.js

@@ -112,19 +112,25 @@ export async function POST(req, { params }) {
     // link now works whenever Supabase is configured at all. The token rides in
     // the FRAGMENT (H1); the client prepends window.location.origin.
     let joinPath = null;
+    let joinUrl = null;
     try {
       const { url, anonKey } = getSupabaseAuthConfig();
       if (url && anonKey) {
         const org = getOrgById(orgId);
         const blob = encodeInviteBlob({ url, anonKey, token, org: org?.name || undefined });
         joinPath = `/join#invite=${blob}`;
+        // Prefer an absolute URL on the configured public host so the link works
+        // for a teammate on another machine (not the generator's localhost).
+        const { getPublicBaseUrl } = await import('@/lib/public-url.js');
+        const base = getPublicBaseUrl();
+        if (base) joinUrl = `${base}${joinPath}`;
       }
     } catch {
       // Non-fatal — the bare token still works via "Join with code".
     }
 
     // H1: the raw token is returned ONCE and never persisted in raw form.
-    return Response.json({ kind: 'link', id, token, invite, joinPath }, { status: 201 });
+    return Response.json({ kind: 'link', id, token, invite, joinPath, joinUrl }, { status: 201 });
   } catch (err) {
     if (err.code === 'role_ceiling') {
       return Response.json({ error: 'role_ceiling', message: err.message }, { status: 403 });

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

@@ -0,0 +1,151 @@
+'use client';
+
+// Shared SSE event reducer for the orchestrator stream.
+//
+// Both the live POST stream (use-stream-command.js) and the Phase-2 attach
+// reconnect (use-stream-command's attach path) funnel every event through this
+// one function so the two paths can never drift. It is intentionally a plain
+// function over a `ctx` bundle of setters + refs — no hooks — so it can run
+// outside React render.
+//
+// ctx shape:
+//   textRef            : { current: string }  — accumulated assistant text
+//   setChat, setLiveText, setAgentPhase, setLiveTool, setLiveSteps,
+//   setUsage, setSessionId, setSessionArtifactId : React setters
+//   sessionIdRef       : { current: string|null }
+//   pendingApprovalsRef: { current: Array<{approval_id,tool_name}> }
+//   bringToFront(id), refresh()
+//   onSession(id)      : optional — called when a `session` event arrives
+//                        (live path persists last-session id here)
+export function applyStreamEvent(eventName, payload, ctx) {
+  const {
+    textRef,
+    setChat,
+    setLiveText,
+    setAgentPhase,
+    setLiveTool,
+    setLiveSteps,
+    setUsage,
+    setSessionId,
+    setSessionArtifactId,
+    sessionIdRef,
+    pendingApprovalsRef,
+    bringToFront,
+    refresh,
+    onSession,
+  } = ctx;
+
+  if (eventName === 'session' && payload.id) {
+    onSession?.(payload.id);
+    if (payload.id !== sessionIdRef.current) setSessionId(payload.id);
+  } else if (eventName === 'cli_stream' && (payload.text || payload.building)) {
+    setAgentPhase(p => p === 'thinking' ? 'responding' : p);
+    setChat(c => {
+      const next = [...c];
+      next[next.length - 1] = { role: 'agent', text: payload.text || '', streaming: true, building: Boolean(payload.building) };
+      return next;
+    });
+  } else if (eventName === 'cli_thinking' && typeof payload.text === 'string') {
+    ctx.setLiveThinking?.(payload.text);
+    setAgentPhase(p => (p === 'responding' || p === 'tool') ? p : 'thinking');
+  } else if (eventName === 'cli_status') {
+    ctx.setLiveStatus?.(payload && payload.phase ? payload : null);
+    if (payload?.phase === 'thinking') {
+      setAgentPhase(p => (p === 'responding' || p === 'tool') ? p : 'thinking');
+    }
+  } else if (eventName === 'text' && payload.delta) {
+    textRef.current += payload.delta;
+    setAgentPhase(p => p === 'thinking' ? 'responding' : p);
+    setLiveText(t => t + payload.delta);
+    setChat(c => {
+      const next = [...c];
+      next[next.length - 1] = { role: 'agent', text: textRef.current };
+      return next;
+    });
+  } else if (eventName === 'tool_start') {
+    setLiveTool(payload.name);
+    setAgentPhase('tool');
+    setLiveSteps(s => [...s, {
+      id: `${payload.name}-${s.length}`,
+      name: payload.name,
+      input: payload.input,
+      status: 'running',
+    }]);
+  } else if (eventName === 'tool_result') {
+    setLiveTool(null);
+    setAgentPhase('synthesis');
+    const isApprovalRequired =
+      payload.output?.status === 'approval_required' &&
+      typeof payload.output?.approval_request_id === 'string';
+    setLiveSteps(s => {
+      const next = [...s];
+      for (let i = next.length - 1; i >= 0; i--) {
+        if (next[i].name === payload.name && next[i].status === 'running') {
+          next[i] = {
+            ...next[i],
+            status: isApprovalRequired
+              ? 'awaiting_approval'
+              : (payload.isError ? 'error' : 'done'),
+            durationMs: typeof payload.durationMs === 'number' ? payload.durationMs : next[i].durationMs,
+            preview: payload.output?.preview || next[i].preview || null,
+            outLines: payload.output?.lines ?? next[i].outLines,
+            approval_id: isApprovalRequired
+              ? payload.output.approval_request_id
+              : next[i].approval_id || null,
+            approval_reason: isApprovalRequired
+              ? (payload.output.reason || null)
+              : null,
+          };
+          break;
+        }
+      }
+      return next;
+    });
+    if ((payload.name === 'create_artifact' || payload.name === 'generate_ui' || payload.name === 'send_to_hermes' || payload.name === 'start_hermes_job') && payload.output?.artifact_id) {
+      bringToFront(payload.output.artifact_id);
+    }
+  } else if (eventName === 'artifacts' && payload.created?.length) {
+    for (const a of payload.created) {
+      if (a.artifact_id) bringToFront(a.artifact_id);
+    }
+    refresh();
+  } else if (eventName === 'agent_created' && payload.agent) {
+    refresh();
+  } else if (eventName === 'session_artifact' && payload.artifact_id) {
+    setSessionArtifactId(payload.artifact_id);
+  } else if (eventName === 'artifact_updated' && payload.artifact_id) {
+    setSessionArtifactId(payload.artifact_id);
+    bringToFront(payload.artifact_id);
+    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) {
+        pendingApprovalsRef.current.push({ approval_id: a.approval_id, tool_name: a.tool_name });
+      }
+    }
+  } else if (eventName === 'error') {
+    textRef.current += `\nError: ${payload.message}`;
+    setChat(c => {
+      const next = [...c];
+      next[next.length - 1] = { role: 'agent', text: textRef.current };
+      return next;
+    });
+  }
+}

package/app/components/dashboard/artifact-board.jsx

@@ -7,7 +7,6 @@ import InactiveIframeShield from './inactive-iframe-shield';
 
 export default function ArtifactBoard({ confirmDeleteId, setConfirmDeleteId, deleteArtifactById, setMoveMenu }) {
   const {
-    artifacts,
     visibleArtifacts,
     frontArtifactId,
     zForArtifact,
@@ -29,8 +28,13 @@ export default function ArtifactBoard({ confirmDeleteId, setConfirmDeleteId, del
 
   return (
     <div ref={setBoardEl} className="canvas-board canvas-board--docked">
-      {visibleArtifacts.map(a => {
-        const stableIdx = artifacts.findIndex(x => x.id === a.id);
+      {visibleArtifacts.map((a, idx) => {
+        // Index INTO the ordered visible list (visibleArtifacts === the layout
+        // hook's orderedVisibleArtifacts()), not a global findIndex across all
+        // spaces/minimized cards. This is the single index source: stableIdx is
+        // always < the space's visible count, so getLayout's default cell is
+        // always defined and never the {16,16} overlap fallback (Bug 1).
+        const stableIdx = idx;
         const L = getLayout(a.id, stableIdx);
         const z = zForArtifact(a);
         const isIframeArtifact = isHtmlArtifact(a.kind);

package/app/components/dashboard/artifact-order.js

@@ -0,0 +1,22 @@
+// Canonical ordering of the artifacts visible on the canvas for a given space.
+//
+// This is the SINGLE source of index assignment for artifact layout. Both the
+// board (first-paint default position) and the layout hook (auto/manual reflow)
+// must derive a card's grid slot from the same ordered list, or the synchronous
+// default disagrees with the async effect and a card flashes at the {16,16}
+// fallback before snapping into place (Bug 1).
+//
+// Filter semantics intentionally mirror `visibleArtifacts` in
+// use-dashboard-state.js exactly: in-space, has content, not minimized. Input
+// order is preserved (stable) so index N always maps to the same card.
+
+export function orderedSpaceArtifacts(artifacts, spaceId, minimizedIds) {
+  if (!Array.isArray(artifacts)) return [];
+  return artifacts.filter(
+    (a) =>
+      a &&
+      a.content &&
+      (a.space_id || 'default') === spaceId &&
+      !minimizedIds?.[a.id]
+  );
+}

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

@@ -68,6 +68,7 @@ function ChatPanel() {
     openConfig,
     chat,
     mainAgent,
+    agentWorkingRemote,
     setChatHidden,
     setVoiceOpen,
   } = useDashboard();
@@ -93,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);
@@ -409,7 +412,9 @@ function ChatPanel() {
       const cleaned = isAgent && m.streaming ? cleanStreamingPreview(m.text) : m.text;
       const building = isAgent && (m.building || (m.streaming && !cleaned && hasArtifactMarkup(m.text)));
       // Empty agent placeholder — never shown. Live activity below covers it.
-      if (isAgent && !cleaned && !building) return null;
+      // Exception: a restored tool-only turn (no prose) still shows its steps.
+      const hasRestoredTools = isAgent && Array.isArray(m.tools) && m.tools.length > 0;
+      if (isAgent && !cleaned && !building && !hasRestoredTools) return null;
       return (
         <div className={'msg ' + m.role + (m.streaming ? ' msg--streaming' : '') + (building ? ' msg--building' : '')} key={i}>
           {building ? (
@@ -433,6 +438,16 @@ function ChatPanel() {
               ))}
             </div>
           )}
+          {isAgent && Array.isArray(m.tools) && m.tools.length > 0 && (
+            <div className="tool-steps tool-steps--restored">
+              {m.tools.map((step, si) => (
+                <div key={si} className="tool-step tool-step--done">
+                  <span className="tool-step-icon" aria-hidden="true"><CheckIcon /></span>
+                  <code className="tool-step-name">{toolStepDisplayName(step.name)}</code>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       );
     })}
@@ -490,7 +505,68 @@ 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">
+        <span className="agent-resume-orb" aria-hidden="true" />
+        <span className="agent-resume-label">Agent still working<span className="artifact-building-dots"><i>.</i><i>.</i><i>.</i></span></span>
+        <span className="agent-resume-sub">picking up where you left off</span>
+      </div>
+    )}
   </div>
   </section>
   <div

package/app/components/dashboard/chat-session-view.js

@@ -0,0 +1,26 @@
+// Pure mapping from a persisted chat session (chat_sessions + chat_messages)
+// to the dashboard's in-memory `chat` array shape. No React / network imports
+// so it is unit-testable under raw node ESM.
+
+export function chatStateFromSession(session) {
+  // Keep any user/assistant turn that carried text OR tool calls. Assistant
+  // turns that only ran tools (empty content) are retained so restored history
+  // shows the steps the agent took, not just its final prose.
+  const msgs = (session?.messages || []).filter(m =>
+    (m.role === 'user' || m.role === 'assistant') &&
+    (m.content || (Array.isArray(m.tool_calls) && m.tool_calls.length)));
+  const next = msgs.map(m => {
+    const entry = { role: m.role === 'assistant' ? 'agent' : 'user', text: m.content || '' };
+    if (m.role === 'assistant' && Array.isArray(m.tool_calls) && m.tool_calls.length) {
+      // Restored steps are terminal — they already completed when persisted.
+      entry.tools = m.tool_calls
+        .filter(tc => tc && tc.name)
+        .map(tc => ({ name: tc.name, status: 'done' }));
+    }
+    return entry;
+  });
+  if (!next.length) {
+    next.push({ role: 'agent', text: 'Fresh workspace ready. I am the madarX Main Agent. Tell me what to create first.' });
+  }
+  return next;
+}