madarx 2.17.0 → 2.19.0

package/app/components/dashboard/use-dashboard-sessions.js

@@ -1,5 +1,8 @@
 import { useState } from 'react';
 import { api } from './api';
+import { chatStateFromSession } from './chat-session-view';
+
+export { chatStateFromSession };
 
 export const LAST_SESSION_KEY = 'madarx:last-chat-session-id:v1';
 
@@ -17,15 +20,6 @@ export function getSavedLastSessionId() {
   catch { return null; }
 }
 
-export function chatStateFromSession(session) {
-  const msgs = (session?.messages || []).filter(m => (m.role === 'user' || m.role === 'assistant') && m.content);
-  const next = msgs.map(m => ({ role: m.role === 'assistant' ? 'agent' : 'user', text: m.content }));
-  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;
-}
-
 export function useDashboardSessions({ sessionId, setSessionId, setChat, setUsage, setSelectedModel, setSessionArtifactId }) {
   const [sessions, setSessions] = useState([]);
   const [sessionsOpen, setSessionsOpen] = useState(false);
@@ -37,15 +31,16 @@ export function useDashboardSessions({ sessionId, setSessionId, setChat, setUsag
     } catch { /* ignore — chat history is best-effort */ }
   }
 
-  async function openSession(id) {
-    setSessionsOpen(false);
-    if (id === sessionId) return;
-    setSessionArtifactId(null);
+  // Force-fetch a session and hydrate chat/usage from it. Unlike openSession,
+  // this does NOT short-circuit when id === sessionId — used by the continuity
+  // hook to pull newly-persisted turns while an agent is working remotely.
+  // Returns the raw session (incl. agent_working) or null.
+  async function reloadSession(id) {
+    if (!id) return null;
     try {
       const d = await api(`/api/chat/sessions/${encodeURIComponent(id)}`);
       const s = d.session;
-      setSessionId(s.id);
-      saveLastSessionId(s.id);
+      if (!s) return null;
       setChat(chatStateFromSession(s));
       setUsage(u => ({
         ...u,
@@ -56,8 +51,19 @@ export function useDashboardSessions({ sessionId, setSessionId, setChat, setUsag
         cache_creation: s.total_cache_creation_tokens || 0,
         context: s.last_context_tokens || 0,
       }));
-      if (s.model) setSelectedModel(s.model);
-    } catch { /* ignore */ }
+      return s;
+    } catch { return null; }
+  }
+
+  async function openSession(id) {
+    setSessionsOpen(false);
+    if (id === sessionId) return;
+    setSessionArtifactId(null);
+    const s = await reloadSession(id);
+    if (!s) return;
+    setSessionId(s.id);
+    saveLastSessionId(s.id);
+    if (s.model) setSelectedModel(s.model);
   }
 
   function newSession() {
@@ -85,6 +91,7 @@ export function useDashboardSessions({ sessionId, setSessionId, setChat, setUsag
     setSessionsOpen,
     refreshSessions,
     openSession,
+    reloadSession,
     newSession,
     deleteSession,
   };

package/app/components/dashboard/use-dashboard-state.js

@@ -2,8 +2,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { api } from './api';
 import { useArtifactLayout } from './use-artifact-layout';
+import { orderedSpaceArtifacts } from './artifact-order';
 import { useSpaces } from './use-spaces';
 import { useDashboardSessions, getSavedLastSessionId } from './use-dashboard-sessions';
+import { useChatContinuity } from './use-chat-continuity';
 import { useMainAgentStream } from './use-main-agent-stream';
 import { useRuntimeActions } from './use-runtime-actions';
 import { useConfigPanel } from './use-config-panel';
@@ -100,6 +102,58 @@ export function useDashboardState() {
     activeSpaceId: spaces.activeSpaceId,
     moveArtifactToSpace: spaces.moveArtifactToSpace,
   });
+
+  // ── Smart auto-fullscreen on create (Bug 3 / Step 6) ──────────────────────
+  // When EXACTLY ONE new artifact appears in the ACTIVE space in a single state
+  // tick, open it full-screen so the freshly generated work is the focus. Batch
+  // / scheduled runs that emit several artifacts at once tile normally (we do
+  // nothing if >1 new id lands in a tick), and artifacts created in a
+  // non-active space never trigger fullscreen. Esc/close returns the artifact
+  // to its grid slot (handled by ArtifactFullscreen). No user setting.
+  //
+  // `prevArtifactIdsRef` is initialized to null so the FIRST hydration only
+  // seeds the set without firing — on page load many artifacts may already
+  // exist and we must not yank the user into fullscreen. Subsequent ticks diff
+  // against the previous set, so a given artifact fires (at most) once, on the
+  // single tick it first appears.
+  const { setFullscreenId, fullscreenId } = artifactLayout;
+  const prevArtifactIdsRef = useRef(null);
+  useEffect(() => {
+    // Wait for the first hydrated state before seeding. `state` is null until
+    // the mount poll resolves; seeding off the null render would make every
+    // existing artifact look "new" on the first data tick and wrongly
+    // fullscreen a single-artifact space on page load.
+    if (!state) return;
+    // Current set of real (content-bearing) artifact ids across all spaces.
+    const current = (state.artifacts || []).filter((a) => a.content);
+    const currentIds = new Set(current.map((a) => a.id));
+    const prev = prevArtifactIdsRef.current;
+
+    // First hydrated run: seed the baseline only, never fire. This guards
+    // page load (existing artifacts are not "new").
+    if (prev === null) {
+      prevArtifactIdsRef.current = currentIds;
+      return;
+    }
+
+    // New ids = present now, absent before. Switching spaces does NOT change
+    // the global id set, so a space switch produces zero new ids and never
+    // fullscreens an existing artifact.
+    const newInActiveSpace = current.filter(
+      (a) => !prev.has(a.id) && (a.space_id || 'default') === spaces.activeSpaceId
+    );
+
+    // Always advance the baseline so the next diff is correct, even when we
+    // don't fire.
+    prevArtifactIdsRef.current = currentIds;
+
+    // Fire only for exactly one new artifact in the active space. Skip if the
+    // user already has a fullscreen open (don't yank them off it), or if that
+    // artifact is somehow already the current fullscreen.
+    if (newInActiveSpace.length !== 1) return;
+    if (fullscreenId) return;
+    setFullscreenId(newInActiveSpace[0].id);
+  }, [state, spaces.activeSpaceId, fullscreenId, setFullscreenId]);
   const sessions = useDashboardSessions({
     sessionId,
     setSessionId,
@@ -119,12 +173,23 @@ export function useDashboardState() {
     setUsage,
     refresh,
     refreshSessions: sessions.refreshSessions,
+    reloadSession: sessions.reloadSession,
     bringToFront: artifactLayout.bringToFront,
     projectId: selectedProjectId,
     runs: state?.runs || null,
   });
   const runtimeActions = useRuntimeActions({ refresh, setChat });
 
+  // Resume the live-activity view when a turn is running for this session but
+  // this client isn't the one streaming it (navigate-away/return, second tab).
+  const continuity = useChatContinuity({
+    sessionId,
+    localBusy: mainAgent.busy,
+    reloadSession: sessions.reloadSession,
+    attach: mainAgent.attach,
+    resuming: mainAgent.resuming,
+  });
+
   // ── Always-latest refs so mount-only effect reads current values ──────────
   // Direct render-body assignment is the React-recommended pattern for refs
   // that mirror the latest closure value. This lets the mount-only effect
@@ -341,8 +406,11 @@ export function useDashboardState() {
     () => (counts.artifacts || []).filter(a => a.content),
     [counts.artifacts]
   );
+  // Single source of index assignment for the canvas. `orderedSpaceArtifacts`
+  // is the same pure helper the layout hook consumes, so the board's first-paint
+  // index can never disagree with the auto-layout effect's cell (Bug 1).
   const visibleArtifacts = useMemo(
-    () => artifacts.filter(a => (a.space_id || 'default') === spaces.activeSpaceId && !artifactLayout.minimizedIds[a.id]),
+    () => orderedSpaceArtifacts(artifacts, spaces.activeSpaceId, artifactLayout.minimizedIds),
     [artifacts, spaces.activeSpaceId, artifactLayout.minimizedIds]
   );
   const dockedArtifacts = useMemo(
@@ -404,6 +472,9 @@ export function useDashboardState() {
     sessions,
     mainAgent,
     runtimeActions,
+    // chat continuity: true when a turn is running remotely for this session
+    // (Phase 1 banner) or being live-resumed (Phase 2 attach).
+    agentWorkingRemote: continuity.remoteWorking || mainAgent.resuming,
     // frame registration
     registerArtifactFrame,
   };

package/app/components/dashboard/use-main-agent-stream.js

@@ -9,6 +9,8 @@ export function useMainAgentStream(opts) {
 
   return {
     busy: stream.busy,
+    resuming: stream.resuming,
+    attach: stream.attach,
     liveText: stream.liveText,
     liveTool: stream.liveTool,
     liveExpanded: stream.liveExpanded,
@@ -16,6 +18,8 @@ export function useMainAgentStream(opts) {
     liveSteps: stream.liveSteps,
     busyStartTime: stream.busyStartTime,
     agentPhase: stream.agentPhase,
+    liveThinking: stream.liveThinking,
+    liveStatus: stream.liveStatus,
     bgAgentList,
     hasBgActivity,
     feedRef: stream.feedRef,

package/app/components/dashboard/use-realtime-voice.js

@@ -24,7 +24,12 @@ function safeJson(text) {
   try { return JSON.parse(text); } catch { return null; }
 }
 
-export function useRealtimeVoice({ projectId = null, agentId = 'main', activeSpace = null, allSpaces = null, onTranscript } = {}) {
+// `transport` (default true): Realtime is STT-only. Final user transcripts are
+// handed to `onUserUtterance(text)` and the answer is produced by the main
+// orchestrator (same brain as typed chat), then spoken via the TTS lane. When
+// false, the legacy in-browser-brain path runs (Realtime reasons + calls tools
+// + speaks) for rollback.
+export function useRealtimeVoice({ projectId = null, agentId = 'main', activeSpace = null, allSpaces = null, transport = true, greetingText = '', onUserUtterance, onTranscript } = {}) {
   const [state, setState] = useState(STATE_IDLE);
   const [error, setError] = useState(null);
   const [transcript, setTranscript] = useState([]);
@@ -186,6 +191,12 @@ export function useRealtimeVoice({ projectId = null, agentId = 'main', activeSpa
       case 'conversation.item.input_audio_transcription.completed':
         if (event.transcript) {
           appendTranscript({ role: 'user', text: event.transcript, at: Date.now() });
+          // Transport mode: the Realtime model does not answer. Forward the
+          // final user utterance to the main orchestrator brain.
+          if (transport) {
+            const said = String(event.transcript || '').trim();
+            if (said) onUserUtterance?.(said);
+          }
         }
         break;
       case 'response.created':
@@ -202,7 +213,9 @@ export function useRealtimeVoice({ projectId = null, agentId = 'main', activeSpa
         }
         break;
       case 'response.function_call_arguments.done':
-        handleToolCall(event);
+        // Transport mode has no tools on the Realtime session; ignore any stray
+        // function-call event so the brain stays solely with the orchestrator.
+        if (!transport) handleToolCall(event);
         break;
       case 'error': {
         const code = event.error?.code || '';
@@ -220,7 +233,7 @@ export function useRealtimeVoice({ projectId = null, agentId = 'main', activeSpa
       default:
         break;
     }
-  }, [handleToolCall, onTranscript, sendEvent]);
+  }, [handleToolCall, onTranscript, onUserUtterance, sendEvent, transport]);
 
   const startAudioLevelMeter = useCallback((stream) => {
     try {
@@ -278,6 +291,7 @@ export function useRealtimeVoice({ projectId = null, agentId = 'main', activeSpa
           speaking_style: speakingStyle,
           active_space: activeSpace,
           all_spaces: allSpaces,
+          mode: transport ? 'transport' : 'realtime',
         }),
       });
       if (!mintRes.ok) {
@@ -318,7 +332,21 @@ export function useRealtimeVoice({ projectId = null, agentId = 'main', activeSpa
       const dc = pc.createDataChannel('oai-events');
       dcRef.current = dc;
       dc.onmessage = (event) => handleMessage(event.data);
-      dc.onopen = () => setState(STATE_LIVE);
+      dc.onopen = () => {
+        setState(STATE_LIVE);
+        // Greet on connect. In the legacy (brain) mode the Realtime model can
+        // speak it directly via a one-off response.create. In transport mode the
+        // model is silent, so the panel handles the greeting via the TTS lane.
+        const greet = String(greetingText || '').trim();
+        if (greet && !transport) {
+          try {
+            dc.send(JSON.stringify({
+              type: 'response.create',
+              response: { instructions: `Greet the operator now, once, briefly and warmly. Say exactly: "${greet}" and nothing else.` },
+            }));
+          } catch {}
+        }
+      };
       dc.onclose = () => {
         cleanup();
         setState(STATE_IDLE);
@@ -349,7 +377,7 @@ export function useRealtimeVoice({ projectId = null, agentId = 'main', activeSpa
       setState(STATE_ERROR);
       setError(String(err?.message || err));
     }
-  }, [activeSpace, agentId, allSpaces, cleanup, handleMessage, projectId, startAudioLevelMeter, state]);
+  }, [activeSpace, agentId, allSpaces, cleanup, greetingText, handleMessage, projectId, startAudioLevelMeter, state, transport]);
 
   // Toggle the local mic track without dropping the WebRTC connection. The
   // model still streams audio out (so the user can listen), but their voice

package/app/components/dashboard/use-stream-command.js

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { saveLastSessionId } from './use-dashboard-sessions';
 import { clearSavedDraft } from './use-draft-persist';
+import { applyStreamEvent } from './apply-stream-event';
 
 export function useStreamCommand({
   chat,
@@ -15,16 +16,26 @@ export function useStreamCommand({
   setUsage,
   refresh,
   refreshSessions,
+  reloadSession,
   bringToFront,
   projectId,
 }) {
   const [busy, setBusy] = useState(false);
+  // Phase 2: re-attaching to a turn that started in another tab / before this
+  // client mounted. Distinct from `busy` (this client's own send) so the
+  // composer stays usable and we don't fight the live path's guards.
+  const [resuming, setResuming] = useState(false);
+  const attachEsRef = useRef(null);
   const [liveText, setLiveText] = useState('');
   const [liveTool, setLiveTool] = useState(null);
   const [liveExpanded, setLiveExpanded] = useState(false);
   const [liveSteps, setLiveSteps] = useState([]);
   const [busyStartTime, setBusyStartTime] = useState(null);
   const [agentPhase, setAgentPhase] = useState('idle');
+  // Live reasoning (extended thinking) + engine status line. Engine-agnostic:
+  // fed by cli_thinking / cli_status events from any engine that streams them.
+  const [liveThinking, setLiveThinking] = useState('');
+  const [liveStatus, setLiveStatus] = useState(null);
   // Approvals harvested from tool_result events with status='approval_required'.
   // Drained into pending_approvals on the next outgoing request so the server
   // can inject approval_id into the retried tool call.
@@ -51,6 +62,12 @@ export function useStreamCommand({
 
   async function commandImpl(text, attachments) {
     if (busy) return;
+    // A user send takes over from any passive resume stream.
+    if (attachEsRef.current) {
+      try { attachEsRef.current.close(); } catch { /* ignore */ }
+      attachEsRef.current = null;
+      setResuming(false);
+    }
     const clean = (text ?? '').trim();
     const files = Array.isArray(attachments) ? attachments : [];
     // Allow an attachment-only send (no text) — the model still gets the files.
@@ -58,6 +75,8 @@ export function useStreamCommand({
     setChat(c => [...c, { role: 'user', text: clean, attachments: files }]);
     clearSavedDraft();
     setLiveSteps([]);
+    setLiveThinking('');
+    setLiveStatus(null);
     setAgentPhase('thinking');
     setBusyStartTime(Date.now());
     setBusy(true);
@@ -102,7 +121,19 @@ export function useStreamCommand({
       const reader = res.body.getReader();
       const dec = new TextDecoder();
       let buf = '';
-      let agentText = '';
+      const textRef = { current: '' };
+      const sessionIdRef = { current: sessionId };
+      // Shared event reducer bundle — identical to the Phase-2 attach path.
+      const ctx = {
+        textRef,
+        sessionIdRef,
+        setChat, setLiveText, setAgentPhase, setLiveTool, setLiveSteps,
+        setUsage, setSessionId, setSessionArtifactId,
+        setLiveThinking, setLiveStatus,
+        pendingApprovalsRef,
+        bringToFront, refresh,
+        onSession: (id) => { saveLastSessionId(id); sessionIdRef.current = id; },
+      };
 
       setChat(c => [...c, { role: 'agent', text: '' }]);
 
@@ -121,97 +152,7 @@ export function useStreamCommand({
           } else if (line.startsWith('data:')) {
             const raw = line.slice(5).trim();
             try {
-              const payload = JSON.parse(raw);
-              if (eventName === 'session' && payload.id) {
-                saveLastSessionId(payload.id);
-                if (payload.id !== sessionId) setSessionId(payload.id);
-              } else if (eventName === 'cli_stream' && payload.text) {
-                setAgentPhase(p => p === 'thinking' ? 'responding' : p);
-                setChat(c => {
-                  const next = [...c];
-                  next[next.length - 1] = { role: 'agent', text: payload.text, streaming: true };
-                  return next;
-                });
-              } else if (eventName === 'text' && payload.delta) {
-                agentText += 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: agentText };
-                  return next;
-                });
-              } else if (eventName === 'tool_start') {
-                setLiveTool(payload.name);
-                setAgentPhase('tool');
-                setLiveSteps(s => [...s, {
-                  id: `${payload.name}-${Date.now()}`,
-                  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'),
-                        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 === 'pending_approvals' && Array.isArray(payload?.approvals)) {
-                // Server returned unused approvals (adapter errored + refunded).
-                // Put them back into the ref so the next outgoing message
-                // carries them again.
-                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') {
-                agentText += `\nError: ${payload.message}`;
-                setChat(c => {
-                  const next = [...c];
-                  next[next.length - 1] = { role: 'agent', text: agentText };
-                  return next;
-                });
-              }
+              applyStreamEvent(eventName, JSON.parse(raw), ctx);
             } catch {
               // non-JSON data line — ignore
             }
@@ -220,7 +161,7 @@ export function useStreamCommand({
         }
       }
 
-      if (!agentText) {
+      if (!textRef.current) {
         setChat(c => {
           const next = [...c];
           next[next.length - 1] = { role: 'agent', text: 'Done.' };
@@ -258,6 +199,10 @@ export function useStreamCommand({
       setAgentPhase('idle');
       setLiveText('');
       setLiveTool(null);
+      setLiveStatus(null);
+      // Keep liveThinking visible briefly so the reasoning doesn't vanish the
+      // instant the answer lands; the disclosure stays collapsible after.
+      setTimeout(() => setLiveThinking(''), 4000);
       // Don't auto-clear when an approval chip needs to stay visible. The
       // user needs to see and act on the Approve / Deny buttons.
       setTimeout(() => {
@@ -267,6 +212,71 @@ export function useStreamCommand({
     }
   }
 
+  // Phase 2: open a live re-attach to an in-flight turn. Replays the buffered
+  // tail then streams live tokens through the SAME reducer as the send path.
+  // On completion (or if nothing is live) it finalises and, when canonicalising,
+  // pulls the persisted session so the transcript matches chat_messages exactly.
+  function attachImpl(targetSessionId) {
+    if (!targetSessionId || busy || attachEsRef.current) return;
+    let es;
+    try {
+      es = new EventSource(`/api/orchestrator/stream/attach?session_id=${encodeURIComponent(targetSessionId)}&from_seq=0`);
+    } catch { return; }
+    attachEsRef.current = es;
+    setResuming(true);
+    setLiveSteps([]);
+    setLiveThinking('');
+    setLiveStatus(null);
+
+    const textRef = { current: '' };
+    const sessionIdRef = { current: targetSessionId };
+    const ctx = {
+      textRef, sessionIdRef,
+      setChat, setLiveText, setAgentPhase, setLiveTool, setLiveSteps,
+      setUsage, setSessionId, setSessionArtifactId,
+      setLiveThinking, setLiveStatus,
+      pendingApprovalsRef,
+      bringToFront, refresh,
+      onSession: () => {},
+    };
+
+    let bubbleAdded = false;
+    function ensureBubble() {
+      if (bubbleAdded) return;
+      bubbleAdded = true;
+      setChat(c => [...c, { role: 'agent', text: '' }]);
+    }
+
+    function finish(canonicalize) {
+      if (attachEsRef.current !== es) return;
+      try { es.close(); } catch { /* ignore */ }
+      attachEsRef.current = null;
+      setResuming(false);
+      setAgentPhase('idle');
+      setLiveText('');
+      setLiveTool(null);
+      // Snap to the persisted transcript so any replay duplication collapses to
+      // the canonical chat_messages view.
+      if (canonicalize) { try { reloadSession?.(targetSessionId); } catch { /* ignore */ } }
+    }
+
+    const EVENTS = ['session', 'text', 'cli_stream', 'cli_thinking', 'cli_status',
+      'tool_start', 'tool_result', 'artifacts', 'agent_created', 'session_artifact',
+      'artifact_updated', 'usage', 'pending_approvals', 'error', 'done'];
+    for (const name of EVENTS) {
+      es.addEventListener(name, (ev) => {
+        let payload;
+        try { payload = JSON.parse(ev.data); } catch { return; }
+        if (name === 'done') { finish(true); return; }
+        if (name === 'text' || name === 'cli_stream' || name === 'error') ensureBubble();
+        applyStreamEvent(name, payload, ctx);
+      });
+    }
+    // 204 (nothing live) or a transport drop surfaces as an error. EventSource
+    // would auto-reconnect; finish() closes it so we don't loop.
+    es.addEventListener('error', () => finish(false));
+  }
+
   async function decideApprovalImpl(approvalId, decision, toolName) {
     if (!approvalId) return;
     try {
@@ -307,15 +317,25 @@ export function useStreamCommand({
   stopRef.current = stopImpl;
   const decideApprovalRef = useRef(null);
   decideApprovalRef.current = decideApprovalImpl;
+  const attachRef = useRef(null);
+  attachRef.current = attachImpl;
   const command = useCallback((text, attachments) => commandRef.current(text, attachments), []);
   const stop = useCallback(() => stopRef.current(), []);
   const decideApproval = useCallback(
     (id, decision, toolName) => decideApprovalRef.current(id, decision, toolName),
     [],
   );
+  const attach = useCallback((id) => attachRef.current(id), []);
+
+  // Close any live re-attach when this hook unmounts (page navigation).
+  useEffect(() => () => {
+    if (attachEsRef.current) { try { attachEsRef.current.close(); } catch { /* ignore */ } }
+  }, []);
 
   return {
     busy,
+    resuming,
+    attach,
     liveText,
     liveTool,
     liveExpanded,
@@ -323,6 +343,8 @@ export function useStreamCommand({
     liveSteps,
     busyStartTime,
     agentPhase,
+    liveThinking,
+    liveStatus,
     feedRef,
     command,
     stop,