madarx 2.17.0 → 2.18.0

package/app/components/app-topbar.jsx

@@ -1,9 +1,12 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { usePathname } from 'next/navigation';
-import { Search, Command } from 'lucide-react';
+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';
 
 // Pathname prefix → human section label. Longest-prefix wins via order: list
 // more specific paths before their parents.
@@ -31,35 +34,193 @@ 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 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]);
 
-  // Global "is anything running" indicator. Tracks the set of agent ids with a
-  // live run via the shared SSE bus — the same source the Run buttons use.
-  const [runningIds, setRunningIds] = useState(() => new Set());
+  // Per-agent background activity, keyed by agent id. Fed by the shared SSE bus
+  // (same connection the Run buttons use) so the topbar reflects every
+  // sub-agent the Main Agent spawns, plus scheduled/heartbeat ticks.
+  const [agents, setAgents] = useState({});
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
 
   useEffect(() => {
     return subscribeAgentEvents((event) => {
-      if (!event?.agent_id) return;
-      if (event.type === 'agent_run_start') {
-        setRunningIds((cur) => {
-          const next = new Set(cur);
-          next.add(event.agent_id);
-          return next;
-        });
-      } else if (event.type === 'agent_run_complete') {
-        setRunningIds((cur) => {
-          if (!cur.has(event.agent_id)) return cur;
-          const next = new Set(cur);
-          next.delete(event.agent_id);
-          return next;
-        });
-      }
+      setAgents((cur) => reduceEvent(cur, event));
     });
   }, []);
 
-  const runningCount = runningIds.size;
+  // Sweep: evict finished agents after a short linger, and orphaned "running"
+  // agents whose run-complete event we never received.
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const now = Date.now();
+      setAgents((cur) => {
+        let changed = false;
+        const next = {};
+        for (const [id, a] of Object.entries(cur)) {
+          if (a.status !== 'running') {
+            if (a.finished_at && now - a.finished_at > LINGER_MS) { changed = true; continue; }
+          } else if ((a.last_activity || a.started_at || 0) < now - ORPHAN_TTL_MS) {
+            changed = true; continue;
+          }
+          next[id] = a;
+        }
+        return changed ? next : cur;
+      });
+    }, 4000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // The popover renders in a body portal (so it escapes the topbar's
+  // backdrop-filter stacking context and paints above canvas artifacts).
+  // It's anchored to the button via the button's viewport rect.
+  const popRef = useRef(null);
+  const [coords, setCoords] = useState(null);
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    function reposition() {
+      const el = wrapRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      setCoords({ top: Math.round(r.bottom + 8), right: Math.round(window.innerWidth - r.right) });
+    }
+    reposition();
+    window.addEventListener('resize', reposition);
+    window.addEventListener('scroll', reposition, true);
+    return () => {
+      window.removeEventListener('resize', reposition);
+      window.removeEventListener('scroll', reposition, true);
+    };
+  }, [open]);
+
+  // Close the popover on navigation and on Escape.
+  useEffect(() => { setOpen(false); }, [pathname]);
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e) { if (e.key === 'Escape') setOpen(false); }
+    function onClick(e) {
+      // Outside-click must account for the portaled popover, which lives
+      // outside wrapRef in the DOM tree.
+      const inTrigger = wrapRef.current && wrapRef.current.contains(e.target);
+      const inPop = popRef.current && popRef.current.contains(e.target);
+      if (!inTrigger && !inPop) setOpen(false);
+    }
+    document.addEventListener('keydown', onKey);
+    document.addEventListener('mousedown', onClick);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('mousedown', onClick);
+    };
+  }, [open]);
+
+  const list = useMemo(
+    () => Object.values(agents).sort((a, b) => (b.started_at || 0) - (a.started_at || 0)),
+    [agents],
+  );
+  const running = list.filter((a) => a.status === 'running');
+  const runningCount = running.length;
+
+  // Pill summary: one agent → name · current tool; many → a count; idle → label
+  // that reads as a feature ("Activity") so the control is discoverable even
+  // when nothing is running.
+  let label = 'Activity';
+  if (runningCount === 1) {
+    const a = running[0];
+    label = a.current_tool ? `${a.agent_name} · ${toolStepDisplayName(a.current_tool)}` : a.agent_name;
+  } else if (runningCount > 1) {
+    label = `${runningCount} agents running`;
+  }
 
   function openSearch() {
     if (typeof window !== 'undefined') {
@@ -81,13 +242,89 @@ export default function AppTopbar() {
             there is ONE toolbar instead of two. Empty on every other page. */}
         <div id="app-topbar-slot" className="app-topbar-slot" />
 
-        <span
-          className={`app-topbar-activity ${runningCount ? 'is-running' : ''}`}
-          title={runningCount ? `${runningCount} agent${runningCount === 1 ? '' : 's'} running` : 'No agents running'}
-        >
-          <span className="app-topbar-dot" aria-hidden />
-          {runningCount ? `${runningCount} running` : 'Idle'}
-        </span>
+        <div className="app-topbar-activity-wrap" ref={wrapRef}>
+          <button
+            type="button"
+            className={`app-topbar-activity is-clickable ${runningCount ? 'is-running' : ''}`}
+            title={runningCount ? `${runningCount} agent${runningCount === 1 ? '' : 's'} running — click for details` : 'Background agent activity'}
+            onClick={() => setOpen((v) => !v)}
+            aria-expanded={open}
+            aria-haspopup="dialog"
+          >
+            <Activity size={12} className="app-topbar-activity-glyph" aria-hidden />
+            <span className="app-topbar-dot" aria-hidden />
+            <span className="app-topbar-activity-label">{label}</span>
+          </button>
+
+          {open && typeof document !== 'undefined' && createPortal(
+            <div
+              className="bg-activity-pop"
+              role="dialog"
+              aria-label="Background agent activity"
+              ref={popRef}
+              style={coords ? { top: coords.top, right: coords.right } : { visibility: 'hidden' }}
+            >
+              <div className="bg-activity-head">
+                <b>Background agents</b>
+                <small>
+                  {runningCount
+                    ? `${runningCount} working now`
+                    : list.length
+                      ? 'Recently finished'
+                      : 'Live view of agents the Main Agent spawns'}
+                </small>
+              </div>
+              {list.length === 0 && (
+                <div className="bg-activity-empty">
+                  <Activity size={18} aria-hidden />
+                  <span>No background agents active right now.</span>
+                  <small>When the Main Agent calls a sub-agent, it shows here live.</small>
+                </div>
+              )}
+              <div className="bg-activity-list">
+                {list.map((a) => (
+                  <div key={a.agent_id} className={`bg-activity-agent bg-activity-agent--${a.status}`}>
+                    <div className="bg-activity-agent-head">
+                      <span className="bg-activity-agent-icon" aria-hidden>
+                        {a.status === 'running' && <SpinnerIcon />}
+                        {a.status === 'complete' && <CheckIcon />}
+                        {a.status === 'failed' && <StepXIcon />}
+                      </span>
+                      <span className="bg-activity-agent-name">{a.agent_name}</span>
+                      {a.triggered_by && (
+                        <span className="bg-activity-agent-by">via {a.triggered_by}</span>
+                      )}
+                      <span className="bg-activity-agent-status">
+                        {a.status === 'running'
+                          ? (a.current_tool ? toolStepDisplayName(a.current_tool) : 'working…')
+                          : a.status === 'complete' ? 'done' : 'failed'}
+                      </span>
+                    </div>
+                    {a.steps.length > 0 && (
+                      <div className="bg-activity-steps">
+                        {a.steps.slice(-5).map((s, i) => (
+                          <div key={i} className={`bg-activity-step bg-activity-step--${s.status}`}>
+                            <span className="bg-activity-step-icon" aria-hidden>
+                              {s.status === 'running' && <SpinnerIcon />}
+                              {s.status === 'done' && <CheckIcon />}
+                              {s.status === 'error' && <StepXIcon />}
+                            </span>
+                            <code className="bg-activity-step-name">{toolStepDisplayName(s.tool)}</code>
+                            {toolStepSublabel(s.tool, s.input) && (
+                              <span className="bg-activity-step-sub">{toolStepSublabel(s.tool, s.input)}</span>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+              <a className="bg-activity-foot" href="/activity">Open activity log →</a>
+            </div>,
+            document.body,
+          )}
+        </div>
 
         <button type="button" className="app-topbar-search" onClick={openSearch} aria-label="Open search (Command K)">
           <Search size={13} aria-hidden />

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