madarx 2.16.3 → 2.18.0

package/app/components/dashboard/canvas-section.jsx

@@ -1,5 +1,6 @@
 "use client";
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useDashboard } from './dashboard-context';
 import ArtifactDock from './artifact-dock';
 import ArtifactBoard from './artifact-board';
@@ -14,6 +15,7 @@ function CanvasSection() {
     runtimeActions,
     mainAgent,
     approvalRun,
+    counts,
     artifacts,
     visibleArtifacts,
     dockedArtifacts,
@@ -52,60 +54,78 @@ function CanvasSection() {
 
   const [moveMenu, setMoveMenu] = useState(null); // { artifactId, x, y } | null
 
+  // Portal the canvas controls into the persistent top toolbar so the dashboard
+  // ("spaces") shows ONE toolbar, not two. The slot lives in AppTopbar (root
+  // layout); resolve it after mount. Handlers keep working because the buttons
+  // stay in this component's React tree — only their DOM position moves.
+  const [toolbarSlot, setToolbarSlot] = useState(null);
+  useEffect(() => {
+    setToolbarSlot(document.getElementById('app-topbar-slot'));
+  }, []);
+
+  // Hermes control is shown only when the user actually has a Hermes-engine
+  // agent — otherwise the runtime indicator is noise.
+  const hasHermesAgent = (counts?.agents || []).some(a => (a.engine || '') === 'hermes');
+
+  const toolbarActions = (
+    <div className="app-topbar-actions">
+      {approvalRun && (
+        <button
+          className="admin-button"
+          onClick={() => approveClaudeRun(approvalRun.id)}
+          disabled={approvalBusyId === approvalRun.id}
+          style={{ height: 28, padding: '0 12px', fontSize: 12 }}
+        >
+          {approvalBusyId === approvalRun.id ? 'Running Claude...' : 'Approve & Run'}
+        </button>
+      )}
+      {hasHermesAgent && (
+        <div className="hermes-wrap">
+          <span
+            className={'tb-icon-btn' + (activeHermesJobs.length > 0 ? ' on' : '')}
+            role="status"
+            aria-label={activeHermesJobs.length > 0 ? `Hermes ${activeHermesJobs.length} running` : 'Hermes idle'}
+          >
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+            </svg>
+            {activeHermesJobs.length > 0 && <span>{activeHermesJobs.length}</span>}
+          </span>
+          <div className="hermes-tooltip" role="tooltip">
+            <b>Hermes</b>
+            <small>{activeHermesJobs.length > 0 ? `${activeHermesJobs.length} running` : 'idle'}</small>
+            {activeHermesJobs.length > 0 && (
+              <ul>
+                {activeHermesJobs.map(j => (
+                  <li key={j.id}>{j.title || (j.prompt ? j.prompt.slice(0, 60) : 'Untitled job')}</li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      )}
+      <RuntimePopover />
+      {artifacts.length > 0 && (
+        <button
+          className="tb-icon-btn"
+          onClick={resetArtifactLayout}
+          title={layoutMode === 'manual' ? 'Reset to auto layout' : 'Auto layout active'}
+          aria-label={layoutMode === 'manual' ? 'Reset to auto layout' : 'Auto layout active'}
+        >
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="3" y="3" width="7" height="7"/>
+            <rect x="14" y="3" width="7" height="7"/>
+            <rect x="14" y="14" width="7" height="7"/>
+            <rect x="3" y="14" width="7" height="7"/>
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+
   return (
 <section className={'canvas fresh-canvas' + (isSpaceSwitching ? ' is-space-switching' : '')}>
-  <div className="toolbar fresh-toolbar">
-    <span className="tb-wordmark" aria-label="madarX OS">madar<b>X</b><i>OS</i></span>
-    {approvalRun && (
-      <button
-        onClick={() => approveClaudeRun(approvalRun.id)}
-        disabled={approvalBusyId === approvalRun.id}
-        style={{border:0,borderRadius:999,padding:'7px 10px',background:'#111318',color:'#fff',fontSize:12,fontWeight:700,cursor:approvalBusyId ? 'wait' : 'pointer'}}
-      >
-        {approvalBusyId === approvalRun.id ? 'Running Claude...' : 'Approve & Run'}
-      </button>
-    )}
-    <div className="hermes-wrap">
-      <span
-        className={'tb-icon-btn' + (activeHermesJobs.length > 0 ? ' on' : '')}
-        role="status"
-        aria-label={activeHermesJobs.length > 0 ? `Hermes ${activeHermesJobs.length} running` : 'Hermes idle'}
-      >
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
-        </svg>
-        {activeHermesJobs.length > 0 && <span>{activeHermesJobs.length}</span>}
-      </span>
-      <div className="hermes-tooltip" role="tooltip">
-        <b>Hermes</b>
-        <small>{activeHermesJobs.length > 0 ? `${activeHermesJobs.length} running` : 'idle'}</small>
-        {activeHermesJobs.length > 0 && (
-          <ul>
-            {activeHermesJobs.map(j => (
-              <li key={j.id}>{j.title || (j.prompt ? j.prompt.slice(0, 60) : 'Untitled job')}</li>
-            ))}
-          </ul>
-        )}
-      </div>
-    </div>
-    <RuntimePopover />
-    {artifacts.length > 0 && (
-      <button
-        className="tb-icon-btn"
-        style={{ marginLeft: 'auto' }}
-        onClick={resetArtifactLayout}
-        title={layoutMode === 'manual' ? 'Reset to auto layout' : 'Auto layout active'}
-        aria-label={layoutMode === 'manual' ? 'Reset to auto layout' : 'Auto layout active'}
-      >
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <rect x="3" y="3" width="7" height="7"/>
-          <rect x="14" y="3" width="7" height="7"/>
-          <rect x="14" y="14" width="7" height="7"/>
-          <rect x="3" y="14" width="7" height="7"/>
-        </svg>
-      </button>
-    )}
-  </div>
+  {toolbarSlot ? createPortal(toolbarActions, toolbarSlot) : null}
 
   {(() => {
     const visible = visibleArtifacts;

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

@@ -3,7 +3,8 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { SpinnerIcon, CheckIcon, StepXIcon, ElapsedTime } from './icons';
-import { toolStepSublabel, toolStepDisplayName } from './tool-steps';
+import { toolStepSublabel, toolStepDisplayName, formatToolDuration } from './tool-steps';
+import { ThinkingDisclosure } from './thinking-disclosure';
 import { useDashboard } from './dashboard-context';
 import { useDraftPersist } from './use-draft-persist';
 
@@ -27,6 +28,29 @@ function formatBytes(n) {
   return `${(n / 1024 / 1024).toFixed(1)} MB`;
 }
 
+// Whether a streamed agent turn contains HTML artifact markup (a ```html fence,
+// or a raw document the model started emitting). Such content renders on the
+// canvas — it should never type out as raw markup in the chat bubble.
+function hasArtifactMarkup(text) {
+  return /```html|<!doctype html|<html[\s>]/i.test(text || '');
+}
+
+// Strip artifact markup (and any half-streamed action block) from a streaming
+// preview so the chat shows only the conversational prose. Engine-agnostic
+// safety net — the CLI path already strips server-side, but Anthropic/Ollama
+// deltas pass through here.
+function cleanStreamingPreview(text) {
+  if (!text) return '';
+  return text
+    .replace(/```madarx-action[\s\S]*?```/gi, '')
+    .replace(/```madarx-action[\s\S]*$/i, '')
+    .replace(/```html[\s\S]*?```/gi, '')
+    .replace(/```html[\s\S]*$/i, '')
+    .replace(/<!doctype html[\s\S]*$/i, '')
+    .replace(/<html[\s>][\s\S]*$/i, '')
+    .trim();
+}
+
 function ChatPanel() {
   const {
     initializing,
@@ -63,6 +87,8 @@ function ChatPanel() {
   const liveSteps = mainAgent.liveSteps;
   const busyStartTime = mainAgent.busyStartTime;
   const agentPhase = mainAgent.agentPhase;
+  const liveThinking = mainAgent.liveThinking;
+  const liveStatus = mainAgent.liveStatus;
   const busy = mainAgent.busy;
   const command = mainAgent.command;
   const stop = mainAgent.stop;
@@ -375,11 +401,25 @@ function ChatPanel() {
         </div>
       </div>
     ) : chat.map((m, i) => {
+      const isAgent = m.role === 'agent';
+      // While an agent turn streams, the model may be emitting a full HTML
+      // artifact — that belongs on the canvas, not as raw markup typing into the
+      // chat bubble. Strip it from the preview; if the turn is artifact-only,
+      // show a tasteful "designing" placeholder instead.
+      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 (m.role === 'agent' && !m.text) return null;
+      if (isAgent && !cleaned && !building) return null;
       return (
-        <div className={'msg ' + m.role + (m.streaming ? ' msg--streaming' : '')} key={i}>
-          <Markdown remarkPlugins={[remarkGfm]}>{m.text}</Markdown>
+        <div className={'msg ' + m.role + (m.streaming ? ' msg--streaming' : '') + (building ? ' msg--building' : '')} key={i}>
+          {building ? (
+            <div className="artifact-building" aria-live="polite">
+              <span className="artifact-building-orb" aria-hidden="true" />
+              <span className="artifact-building-label">Designing the page<span className="artifact-building-dots"><i>.</i><i>.</i><i>.</i></span></span>
+            </div>
+          ) : (
+            <Markdown remarkPlugins={[remarkGfm]}>{cleaned}</Markdown>
+          )}
           {Array.isArray(m.attachments) && m.attachments.length > 0 && (
             <div className="msg-attachments">
               {m.attachments.map(a => (
@@ -396,12 +436,17 @@ function ChatPanel() {
         </div>
       );
     })}
+    {(busy || (liveThinking && liveThinking.trim())) && (
+      <ThinkingDisclosure thinking={liveThinking} status={liveStatus} busy={busy} />
+    )}
     {liveSteps.length > 0 && (
       <div className="tool-steps">
         {liveSteps.map(step => {
           const isCli = step.name === 'claude_code_cli' || step.name === 'codex_cli';
           const sub = toolStepSublabel(step.name, step.input);
           const awaiting = step.status === 'awaiting_approval';
+          const dur = typeof step.durationMs === 'number' && step.durationMs > 0 ? formatToolDuration(step.durationMs) : null;
+          const previewLine = step.preview ? String(step.preview).split('\n').find(l => l.trim()) : null;
           return (
             <div key={step.id} className={`tool-step tool-step--${step.status}` + (isCli ? ' tool-step--cli' : '')}>
               <span className="tool-step-icon" aria-hidden="true">
@@ -413,6 +458,10 @@ function ChatPanel() {
               </span>
               {!isCli && <code className="tool-step-name">{toolStepDisplayName(step.name)}</code>}
               {sub && <span className="tool-step-sub">{sub}</span>}
+              {previewLine && step.status === 'done' && (
+                <span className="tool-step-preview" title={step.preview}>{previewLine.slice(0, 64)}</span>
+              )}
+              {dur && !awaiting && <span className="tool-step-dur">{dur}</span>}
               {awaiting && step.approval_id ? (
                 <span className="tool-step-approve" style={{ marginLeft: 'auto', display: 'inline-flex', gap: 6 }}>
                   <button
@@ -441,7 +490,7 @@ function ChatPanel() {
         )}
       </div>
     )}
-    {busy && liveSteps.length === 0 && <div className="typing-indicator"><span /><span /><span /></div>}
+    {busy && liveSteps.length === 0 && !liveStatus && !(liveThinking && liveThinking.trim()) && <div className="typing-indicator"><span /><span /><span /></div>}
   </div>
   </section>
   <div

package/app/components/dashboard/thinking-disclosure.jsx

@@ -0,0 +1,59 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+
+// Engine-agnostic live reasoning + status surface. Streams the model's extended
+// "thinking" into a collapsible panel (Claude-Code-TUI style) and shows a status
+// line with elapsed time so cold-start and long tools never look frozen. Fed by
+// the cli_thinking / cli_status events, which every engine that supports them
+// emits in the same shape.
+
+const PHASE_LABELS = {
+  starting: 'Starting engine…',
+  working: 'Working…',
+  generating: 'Composing…',
+  thinking: 'Thinking…',
+  done: 'Finishing…',
+};
+
+export function ThinkingDisclosure({ thinking, status, busy }) {
+  const [open, setOpen] = useState(false);
+  const bodyRef = useRef(null);
+
+  const hasThinking = Boolean(thinking && thinking.trim());
+
+  // Keep the streaming reasoning pinned to the latest token while open.
+  useEffect(() => {
+    if (open && bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
+  }, [thinking, open]);
+
+  if (!hasThinking && !busy) return null;
+
+  const phase = status?.phase;
+  const label = PHASE_LABELS[phase] || (hasThinking ? 'Thinking' : 'Working…');
+  const elapsed = status?.elapsedMs ? `${Math.round(status.elapsedMs / 1000)}s` : null;
+
+  return (
+    <div className={'thinking-disclosure' + (open ? ' open' : '')}>
+      <button
+        type="button"
+        className="thinking-toggle"
+        onClick={() => hasThinking && setOpen(o => !o)}
+        aria-expanded={open}
+        disabled={!hasThinking}
+        title={hasThinking ? 'Show reasoning' : undefined}
+      >
+        <span className={'thinking-dot' + (busy ? ' pulsing' : '')} aria-hidden="true" />
+        <span className="thinking-label">{label}</span>
+        {elapsed && <span className="thinking-elapsed">{elapsed}</span>}
+        {hasThinking && (
+          <svg className={'thinking-caret' + (open ? ' open' : '')} width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+            <path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+      </button>
+      {open && hasThinking && (
+        <div className="thinking-body" ref={bodyRef}>{thinking}</div>
+      )}
+    </div>
+  );
+}

package/app/components/dashboard/tool-steps.js

@@ -28,6 +28,15 @@ function hostname(u) {
   try { return new URL(String(u)).hostname; } catch { return String(u).slice(0, 52); }
 }
 
+// Compact elapsed-time label for a finished tool step (e.g. "820ms", "3.4s", "1m 5s").
+export function formatToolDuration(ms) {
+  if (!ms || ms < 0) return null;
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const s = Math.round(ms / 1000);
+  return `${Math.floor(s / 60)}m ${s % 60}s`;
+}
+
 export function toolStepDisplayName(name) {
   if (!name) return '';
   if (CC_DISPLAY_NAMES[name]) return CC_DISPLAY_NAMES[name];

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

@@ -16,6 +16,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

@@ -25,6 +25,10 @@ export function useStreamCommand({
   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.
@@ -58,6 +62,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);
@@ -125,13 +131,23 @@ export function useStreamCommand({
               if (eventName === 'session' && payload.id) {
                 saveLastSessionId(payload.id);
                 if (payload.id !== sessionId) setSessionId(payload.id);
-              } else if (eventName === 'cli_stream' && payload.text) {
+              } 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 };
+                  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') {
+                // Accumulated reasoning text (replaces, not appends — server sends
+                // the running total). Surfaced in the collapsible Thinking panel.
+                setLiveThinking(payload.text);
+                setAgentPhase(p => (p === 'responding' || p === 'tool') ? p : 'thinking');
+              } else if (eventName === 'cli_status') {
+                setLiveStatus(payload && payload.phase ? payload : null);
+                if (payload?.phase === 'thinking') {
+                  setAgentPhase(p => (p === 'responding' || p === 'tool') ? p : 'thinking');
+                }
               } else if (eventName === 'text' && payload.delta) {
                 agentText += payload.delta;
                 setAgentPhase(p => p === 'thinking' ? 'responding' : p);
@@ -165,6 +181,11 @@ export function useStreamCommand({
                         status: isApprovalRequired
                           ? 'awaiting_approval'
                           : (payload.isError ? 'error' : 'done'),
+                        // Verbose detail: elapsed time + a short output preview so
+                        // the user can see what each tool actually returned.
+                        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,
@@ -258,6 +279,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(() => {
@@ -323,6 +348,8 @@ export function useStreamCommand({
     liveSteps,
     busyStartTime,
     agentPhase,
+    liveThinking,
+    liveStatus,
     feedRef,
     command,
     stop,