madarx 2.17.0 → 2.18.0

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,

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

@@ -1,9 +1,23 @@
 "use client";
 
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import VoiceOrb from './voice-orb';
 import { useRealtimeVoice } from './use-realtime-voice';
 import { useDashboard } from './dashboard-context';
+import { useAccountSession } from '../account-session.jsx';
+
+// Derive a friendly first name from the signed-in session. Prefers an explicit
+// display name; otherwise capitalises the email local-part (ak@madarx.io → Ak).
+function greetingNameFrom(session) {
+  const dn = session?.display_name && String(session.display_name).trim();
+  if (dn) return dn.split(/\s+/)[0];
+  const email = session?.email && String(session.email);
+  if (email && email.includes('@')) {
+    const local = email.split('@')[0].replace(/[._-]+/g, ' ').trim().split(/\s+/)[0];
+    if (local) return local.charAt(0).toUpperCase() + local.slice(1);
+  }
+  return '';
+}
 
 const MODE_LABELS = {
   realtime: 'Live',
@@ -36,6 +50,7 @@ function VoicePanel() {
     spaces: spacesHook,
     state,
     chat,
+    mainAgent,
     setVoiceOpen,
     setConfigTab,
     setConfigOpen,
@@ -83,8 +98,100 @@ function VoicePanel() {
   const [providerError, setProviderError] = useState(null);
   const [ttsSpeaking, setTtsSpeaking] = useState(false);
   const [collapsed, setCollapsed] = useState(() => load('madarx:voice-collapsed', '0') === '1');
+  // Brain selection. 'realtime' (default) is the proven in-browser-brain path
+  // (Realtime reasons + calls tools + speaks). 'transport' routes voice through
+  // the same main-agent stream as typed chat (Realtime = STT only, TTS = mouth)
+  // — opt-in until verified live, set localStorage madarx:voice-brain='transport'.
+  const [brain] = useState(() => load('madarx:voice-brain', 'realtime'));
+  const transport = brain === 'transport';
+
+  // Speak an arbitrary string via the TTS lane. Generalised from speakLast so
+  // the orchestrator's reply can be voiced in transport mode.
+  const speakText = useCallback(async (text) => {
+    const say = String(text || '').trim();
+    if (!say) return;
+    setProviderError(null);
+    try {
+      setTtsSpeaking(true);
+      const res = await fetch('/api/voice/tts', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          text: say.slice(0, 3800),
+          provider: ttsProvider,
+          voice: ttsVoice || undefined,
+          project_id: projectId,
+        }),
+      });
+      if (!res.ok) throw new Error(`tts ${res.status}`);
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const audio = new Audio(url);
+      audio.onended = () => { setTtsSpeaking(false); URL.revokeObjectURL(url); };
+      audio.onerror = () => { setTtsSpeaking(false); URL.revokeObjectURL(url); };
+      await audio.play();
+    } catch (err) {
+      setTtsSpeaking(false);
+      setProviderError(String(err?.message || err));
+    }
+  }, [projectId, ttsProvider, ttsVoice]);
+
+  // Transport loop: a final user utterance from Realtime STT is forwarded to
+  // the main orchestrator (same brain + tools + gates as typed chat). We mark a
+  // reply pending so the busy→idle effect below can voice the answer.
+  const pendingSpeakRef = useRef(false);
+  const onUserUtterance = useCallback((text) => {
+    const said = String(text || '').trim();
+    if (!said) return;
+    if (mainAgent?.busy) return; // a turn is already in flight; drop barge-in
+    pendingSpeakRef.current = true;
+    mainAgent?.command?.(said);
+  }, [mainAgent]);
 
-  const realtime = useRealtimeVoice({ projectId, agentId, activeSpace, allSpaces });
+  const { session: account } = useAccountSession();
+  const greetingName = useMemo(() => greetingNameFrom(account), [account]);
+  const greetingText = greetingName ? `Hello, ${greetingName}.` : 'Hello.';
+
+  const realtime = useRealtimeVoice({ projectId, agentId, activeSpace, allSpaces, transport, greetingText, onUserUtterance });
+
+  // Transport-mode greeting: the Realtime model is silent, so speak the hello
+  // through the TTS lane once the line goes live. Legacy mode greets via the
+  // model itself (handled in the hook's dc.onopen).
+  const greetedRef = useRef(false);
+  useEffect(() => {
+    if (transport && realtime.state === 'live' && !greetedRef.current) {
+      greetedRef.current = true;
+      speakText(greetingText);
+    }
+    if (realtime.state === 'idle' || realtime.state === 'ending') greetedRef.current = false;
+  }, [transport, realtime.state, greetingText, speakText]);
+
+  // When a voice-initiated orchestrator turn finishes (busy true→false), speak
+  // the freshest assistant reply. Approval pauses surface separately below.
+  const prevBusyRef = useRef(false);
+  const spokenApprovalRef = useRef(false);
+  useEffect(() => {
+    const wasBusy = prevBusyRef.current;
+    prevBusyRef.current = mainAgent?.busy || false;
+    if (!transport) return;
+    if (wasBusy && !mainAgent?.busy && pendingSpeakRef.current) {
+      pendingSpeakRef.current = false;
+      // If the turn paused on an approval, say so instead of reading a
+      // half-finished answer; the Approve/Deny controls live in the chat panel.
+      const awaiting = (mainAgent?.liveSteps || []).some(s => s.status === 'awaiting_approval');
+      if (awaiting) {
+        if (!spokenApprovalRef.current) {
+          spokenApprovalRef.current = true;
+          speakText('That action needs your approval. Open the chat to approve or deny.');
+        }
+        return;
+      }
+      spokenApprovalRef.current = false;
+      for (let i = chat.length - 1; i >= 0; i--) {
+        if (chat[i].role === 'agent' && chat[i].text) { speakText(chat[i].text); break; }
+      }
+    }
+  }, [mainAgent?.busy, mainAgent?.liveSteps, transport, chat, speakText]);
 
   // Capability discovery — lets us hide modes we can't run.
   useEffect(() => {
@@ -122,13 +229,21 @@ function VoicePanel() {
     return () => window.removeEventListener('storage', onStorage);
   }, []);
 
+  const awaitingApproval = useMemo(
+    () => transport && (mainAgent?.liveSteps || []).some(s => s.status === 'awaiting_approval'),
+    [transport, mainAgent?.liveSteps],
+  );
+
   const orbState = useMemo(() => {
     if (realtime.error) return 'error';
-    if (realtime.pendingToolCalls.length > 0) return 'approval';
+    if (awaitingApproval || realtime.pendingToolCalls.length > 0) return 'approval';
+    // Transport mode keeps the WebRTC line live while the orchestrator thinks
+    // and the TTS lane speaks — surface those as an active orb.
+    if (transport && (mainAgent?.busy || ttsSpeaking)) return 'live';
     if (mode === 'realtime') return realtime.state;
     if (ttsSpeaking) return 'live';
     return 'idle';
-  }, [mode, realtime.error, realtime.pendingToolCalls.length, realtime.state, ttsSpeaking]);
+  }, [mode, transport, awaitingApproval, mainAgent?.busy, realtime.error, realtime.pendingToolCalls.length, realtime.state, ttsSpeaking]);
 
   const stop = useCallback(() => {
     realtime.stop();
@@ -142,35 +257,31 @@ function VoicePanel() {
 
   // Speak last assistant message via TTS (used in tts mode).
   const speakLast = useCallback(async () => {
-    setProviderError(null);
     const text = await onSpeakLast?.();
-    if (!text) return;
-    try {
-      setTtsSpeaking(true);
-      const res = await fetch('/api/voice/tts', {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({
-          text: String(text).slice(0, 3800),
-          provider: ttsProvider,
-          voice: ttsVoice || undefined,
-          project_id: projectId,
-        }),
-      });
-      if (!res.ok) throw new Error(`tts ${res.status}`);
-      const blob = await res.blob();
-      const url = URL.createObjectURL(blob);
-      const audio = new Audio(url);
-      audio.onended = () => { setTtsSpeaking(false); URL.revokeObjectURL(url); };
-      audio.onerror = () => { setTtsSpeaking(false); URL.revokeObjectURL(url); };
-      await audio.play();
-    } catch (err) {
-      setTtsSpeaking(false);
-      setProviderError(String(err?.message || err));
-    }
-  }, [onSpeakLast, projectId, ttsProvider, ttsVoice]);
+    await speakText(text);
+  }, [onSpeakLast, speakText]);
 
   const liveTranscript = realtime.transcript.slice(-8);
+
+  // Activity strip source. In transport mode the tools run through the
+  // orchestrator, so surface mainAgent.liveSteps; otherwise use the Realtime
+  // hook's own tool-call tracking.
+  const pendingPills = transport
+    ? (mainAgent?.liveSteps || [])
+        .filter(s => s.status === 'running')
+        .map(s => ({ call_id: s.id, name: s.name }))
+    : realtime.pendingToolCalls;
+  const recentPills = transport
+    ? (mainAgent?.liveSteps || [])
+        .filter(s => s.status !== 'running')
+        .slice(-6)
+        .map(s => ({
+          call_id: s.id,
+          name: s.name,
+          status: s.status === 'awaiting_approval' ? 'approval' : (s.status === 'error' ? 'error' : 'ok'),
+          duration_ms: s.durationMs || 0,
+        }))
+    : (realtime.recentToolCalls || []);
   const caps = providers?.capabilities;
   const realtimeAvailable = Boolean(caps?.realtime?.openai);
   const ttsAvailable = Boolean(caps?.tts?.openai || caps?.tts?.elevenlabs || caps?.tts?.local);
@@ -219,6 +330,9 @@ function VoicePanel() {
     if (realtime.error) return STATE_COPY.error;
     if (realtime.pendingToolCalls.length > 0) return STATE_COPY.approval;
     if (mode === 'realtime') {
+      if (awaitingApproval) return 'Needs approval — open chat';
+      if (transport && mainAgent?.busy) return 'Thinking…';
+      if (transport && ttsSpeaking) return 'Speaking…';
       if (realtime.muted && isLive) return 'Muted — tap orb to end';
       if (isLive) return 'Listening — tap orb to end';
       if (isConnecting) return 'Connecting…';
@@ -302,21 +416,19 @@ function VoicePanel() {
         <div
           className={
             'voice-panel__activity' +
-            (realtime.pendingToolCalls.length > 0 || (realtime.recentToolCalls && realtime.recentToolCalls.length > 0)
-              ? ' is-active'
-              : '')
+            (pendingPills.length > 0 || recentPills.length > 0 ? ' is-active' : '')
           }
           aria-live="polite"
         >
           <div className="voice-panel__activity-track">
-            {realtime.pendingToolCalls.map(c => (
+            {pendingPills.map(c => (
               <span key={c.call_id} className="voice-panel__activity-pill voice-panel__activity-pill--running">
                 <span className="voice-panel__activity-dot" aria-hidden />
                 {c.name.replace(/_/g, ' ')}
               </span>
             ))}
-            {(realtime.recentToolCalls || [])
-              .filter(r => !realtime.pendingToolCalls.some(p => p.call_id === r.call_id))
+            {recentPills
+              .filter(r => !pendingPills.some(p => p.call_id === r.call_id))
               .slice(-6)
               .map(r => (
                 <span

package/app/components/ui/marketplace/install-toggle.jsx

@@ -1,18 +1,25 @@
+'use client';
+
+import { useState } from 'react';
+
 /**
- * Install toggle button — server-action backed via the surrounding `<form>`.
- * Generalised from the .tp-switch toggle on the legacy tools page.
+ * Install toggle button.
  *
- * The form action must be a Next.js server action that calls
- * `setItemInstalled(id, !installed)`. The action lives outside this component
- * so the toggle stays purely presentational and can be reused everywhere a
- * marketplace item is rendered.
+ * Two modes:
+ *  - Client mode (preferred): pass `onToggle(nextInstalled) => Promise`. The
+ *    toggle flips in place via fetch — no full-page navigation. Used by the
+ *    marketplace shell so installing a tool updates the card without a refresh.
+ *  - Server-action mode (fallback): pass `action` (a Next.js server action). The
+ *    surrounding `<form>` submits and the action redirects with a toast. Kept for
+ *    progressive enhancement / no-JS.
  *
  * Hidden fields `current_kind` and `slug_hint` are echoed back to the server
  * action so the post-redirect toast can identify which item changed and which
  * tab to restore.
  *
  * @param {{
- *   action: any,
+ *   action?: any,
+ *   onToggle?: (nextInstalled: boolean) => Promise<any>,
  *   itemId: string,
  *   installed: boolean,
  *   available?: boolean,
@@ -24,6 +31,7 @@
  */
 export default function InstallToggle({
   action,
+  onToggle,
   itemId,
   installed,
   available = true,
@@ -32,8 +40,35 @@ export default function InstallToggle({
   slugHint,
   currentKind,
 }) {
-  const isDisabled = disabled || !available;
+  const [busy, setBusy] = useState(false);
+  const isDisabled = disabled || !available || busy;
   const ariaLabel = label || `${installed ? 'Uninstall' : 'Install'} ${itemId}`;
+
+  // Client mode — no form, no navigation.
+  if (typeof onToggle === 'function') {
+    return (
+      <button
+        className={`mkt-toggle ${installed ? 'on' : ''}`}
+        type="button"
+        role="switch"
+        aria-checked={installed}
+        aria-label={ariaLabel}
+        aria-busy={busy || undefined}
+        disabled={isDisabled}
+        onClick={async () => {
+          if (isDisabled) return;
+          setBusy(true);
+          try {
+            await onToggle(!installed);
+          } finally {
+            setBusy(false);
+          }
+        }}
+      />
+    );
+  }
+
+  // Server-action fallback.
   return (
     <form action={action} className="mkt-toggle-form">
       <input type="hidden" name="item_id" value={itemId} />
@@ -46,7 +81,7 @@ export default function InstallToggle({
         role="switch"
         aria-checked={installed}
         aria-label={ariaLabel}
-        disabled={isDisabled}
+        disabled={disabled || !available}
       />
     </form>
   );

package/app/globals.css

@@ -47,7 +47,7 @@
   --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
 }
 
-:root{--ink:#111318;--muted:#68707b;--gold:#d4b77f;--glass:rgba(255,255,255,.78);--line:rgba(20,22,26,.09);--radius:14px;
+:root{--ink:#111318;--muted:#68707b;--gold:#d4b77f;--glass:rgba(255,255,255,.78);--line:rgba(20,22,26,.09);--radius:14px;--artifact-radius:14px;
   /* Marketplace brand tokens — see ai-docs/marketplace-brand.md */
   --mkt-tool-tint:#f3f1ec;
   --mkt-tool-ink:#3a3f47;
@@ -246,8 +246,21 @@
 .msg--loading{display:flex;align-items:center;padding:12px 14px;color:#9ca3af;min-height:38px;}
 .msg--streaming{opacity:.82;position:relative;}
 .msg--streaming::after{content:'';display:inline-block;width:2px;height:1em;background:currentColor;opacity:.5;margin-left:2px;vertical-align:text-bottom;animation:cursor-blink .9s step-end infinite;}
+.msg--building::after{display:none;}
 @keyframes cursor-blink{0%,100%{opacity:.5;}50%{opacity:0;}}
 
+/* Artifact-building placeholder — shown while the agent streams an HTML page
+   that will render on the canvas (the raw markup is hidden from chat). */
+.artifact-building{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:12px;border:1px solid rgba(17,19,24,.08);background:linear-gradient(100deg,rgba(255,255,255,.6),rgba(247,248,250,.9));font-size:12.5px;color:#4a5059;}
+.artifact-building-orb{width:13px;height:13px;border-radius:50%;flex-shrink:0;background:conic-gradient(from 0deg,var(--accent-500,#c2452a),rgba(194,69,42,.15),var(--accent-500,#c2452a));animation:artifact-spin 1s linear infinite;mask:radial-gradient(circle 3.5px at center,transparent 96%,#000 100%);-webkit-mask:radial-gradient(circle 3.5px at center,transparent 96%,#000 100%);}
+.artifact-building-label{font-weight:600;letter-spacing:.01em;}
+.artifact-building-dots{display:inline-block;}
+.artifact-building-dots i{font-style:normal;opacity:.3;animation:artifact-dot 1.2s ease-in-out infinite;}
+.artifact-building-dots i:nth-child(2){animation-delay:.18s;}
+.artifact-building-dots i:nth-child(3){animation-delay:.36s;}
+@keyframes artifact-spin{to{transform:rotate(360deg);}}
+@keyframes artifact-dot{0%,70%,100%{opacity:.25;}35%{opacity:1;}}
+
 /* Inline delete confirmation — replaces winbar controls in place */
 .confirm-label{font-size:11.5px;font-weight:600;color:#111318;letter-spacing:-.01em;margin-right:2px;}
 .confirm-cancel,.confirm-delete{font-size:11px;font-weight:650;padding:3px 11px;border-radius:8px;border:0;cursor:pointer;transition:background .15s,transform .1s;}
@@ -259,9 +272,9 @@
 
 /* Fullscreen overlay — canvas-bound, rail + chat stay visible */
 .artifact-fs{position:absolute;inset:0;z-index:9100;display:flex;flex-direction:column;background:#f8f7f5;backdrop-filter:blur(24px);overflow:hidden;transform-origin:center center;will-change:transform,opacity,border-radius;transition:transform 260ms cubic-bezier(.22,.8,.24,1),opacity 220ms ease,border-radius 260ms cubic-bezier(.22,.8,.24,1),box-shadow 260ms ease;}
-.artifact-fs[data-phase="enter"]{transform:scale(.88) translateY(8px);opacity:0;border-radius:22px;box-shadow:0 30px 90px rgba(17,19,24,.18);}
-.artifact-fs[data-phase="open"]{transform:scale(1) translateY(0);opacity:1;border-radius:0;box-shadow:0 0 0 rgba(17,19,24,0);}
-.artifact-fs[data-phase="exit"]{transform:scale(.88) translateY(8px);opacity:0;border-radius:22px;box-shadow:0 30px 90px rgba(17,19,24,.16);pointer-events:none;}
+.artifact-fs[data-phase="enter"]{transform:scale(.88) translateY(8px);opacity:0;border-radius:var(--artifact-radius);box-shadow:0 30px 90px rgba(17,19,24,.18);}
+.artifact-fs[data-phase="open"]{transform:scale(1) translateY(0);opacity:1;border-radius:var(--artifact-radius);box-shadow:0 0 0 rgba(17,19,24,0);}
+.artifact-fs[data-phase="exit"]{transform:scale(.88) translateY(8px);opacity:0;border-radius:var(--artifact-radius);box-shadow:0 30px 90px rgba(17,19,24,.16);pointer-events:none;}
 .artifact-fs--docked{bottom:0;}
 .artifact-fs-bar{flex:0 0 auto;background:rgba(246,247,248,.96);border-bottom:1px solid var(--line);position:relative;z-index:1;}
 .artifact-fs-content{flex:1;overflow:hidden;position:relative;background:#f8f7f5;}
@@ -270,7 +283,7 @@
 body:has(.artifact-fs[data-phase="open"]){overflow:hidden;}
 @media (prefers-reduced-motion: reduce){
   .artifact-fs{transition:opacity 120ms ease;}
-  .artifact-fs[data-phase="enter"],.artifact-fs[data-phase="exit"]{transform:none;border-radius:0;}
+  .artifact-fs[data-phase="enter"],.artifact-fs[data-phase="exit"]{transform:none;border-radius:var(--artifact-radius);}
 }
 
 /* macOS-style dock — spaces switcher + minimised artifact cards */
@@ -442,7 +455,7 @@ body:has(.artifact-fs[data-phase="open"]){overflow:hidden;}
 .artifact-window-wrap[data-dragging="true"],.artifact-window-wrap[data-resizing="true"]{transition:none;}
 @keyframes artifact-enter{from{opacity:0;}to{opacity:1;}}
 @keyframes artifact-exit{to{opacity:0;transform:translate3d(0,12px,0) scale(.94);}}
-.artifact-window{width:100%;height:100%;display:flex;flex-direction:column;transition:transform .18s cubic-bezier(.32,.72,0,1),box-shadow .18s cubic-bezier(.32,.72,0,1);}
+.artifact-window{width:100%;height:100%;display:flex;flex-direction:column;border-radius:var(--artifact-radius);overflow:hidden;transition:transform .18s cubic-bezier(.32,.72,0,1),box-shadow .18s cubic-bezier(.32,.72,0,1);}
 .artifact-window-wrap.is-dragging .artifact-window{box-shadow:none;}
 .artifact-window--new{box-shadow:0 18px 48px rgba(32,34,38,.22);}
 
@@ -985,6 +998,7 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 .connection-setup-field-help a:hover{text-decoration:underline;}
 .connection-setup-error{margin:0;padding:10px 12px;background:#ffe3df;color:#9a3325;border-radius:10px;font-size:12.5px;line-height:1.55;}
 .connection-setup-error small{display:block;margin-top:4px;font-size:11.5px;color:#7a3a30;}
+.connection-setup-disabled-hint{margin:0;font-size:12px;line-height:1.5;color:#80611b;}
 .connection-setup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px;}
 .connection-setup-step-verify{align-items:center;padding:18px 0;color:#68707b;font-size:13px;}
 .connection-setup-done-head{display:flex;align-items:center;gap:10px;}
@@ -993,7 +1007,7 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 .connection-setup-summary span+span{margin-left:4px;}
 .connection-setup-unlocked{margin:0;font-size:12.5px;color:#2d7044;}
 .connection-setup-deeplink{margin:0;}
-.connection-status{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;background:#eef2f6;color:#59616d;}
+.connection-status{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;background:#eef2f6;color:#59616d;max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 .connection-status.connected{background:#e8f6ee;color:#2d7044;}
 .connection-status.error{background:#ffe3df;color:#9a3325;}
 .connection-status.pending{background:#fff4d8;color:#80611b;}
@@ -1602,6 +1616,22 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 /* CLI subprocess steps render as a compact icon-only pill — the model name is irrelevant to the user */
 .tool-step--cli{padding:6px 9px;border-radius:999px;}
 .tool-step--cli .tool-step-icon{color:#3a4150;}
+/* Verbose tool detail: output preview + elapsed duration */
+.tool-step-preview{font-size:10.5px;color:#8a9099;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;opacity:.85;}
+.tool-step-dur{margin-left:auto;font-size:10px;font-family:ui-monospace,monospace;color:#9ca3af;font-weight:600;letter-spacing:.02em;flex-shrink:0;padding-left:6px;}
+
+/* ── Live reasoning (extended thinking) disclosure ── */
+.thinking-disclosure{display:flex;flex-direction:column;gap:0;margin:2px 0;width:fit-content;max-width:100%;}
+.thinking-toggle{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;border:1px solid rgba(17,19,24,.07);background:rgba(255,255,255,.62);color:#68707b;font:inherit;font-size:11.5px;cursor:pointer;width:fit-content;max-width:100%;transition:background .14s,border-color .14s;}
+.thinking-toggle:hover:not(:disabled){background:rgba(255,255,255,.85);border-color:rgba(17,19,24,.12);}
+.thinking-toggle:disabled{cursor:default;}
+.thinking-dot{width:7px;height:7px;border-radius:50%;background:#b0b6bf;flex-shrink:0;}
+.thinking-dot.pulsing{background:var(--accent-500,#c2452a);animation:livepulse 1.1s ease-in-out infinite;}
+.thinking-label{font-weight:650;color:#4a5059;letter-spacing:.01em;}
+.thinking-elapsed{font-size:10px;font-family:ui-monospace,monospace;color:#9ca3af;font-weight:600;background:rgba(17,19,24,.05);border-radius:6px;padding:1px 6px;}
+.thinking-caret{color:#9ca3af;transition:transform .16s;flex-shrink:0;}
+.thinking-caret.open{transform:rotate(180deg);}
+.thinking-body{margin:6px 2px 2px;padding:10px 12px;border-left:2px solid rgba(17,19,24,.10);background:rgba(17,19,24,.025);border-radius:0 8px 8px 0;font-size:12px;line-height:1.55;color:#6a7079;font-style:italic;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto;max-width:640px;}
 
 /* ── Runtime popover — compact stats ── */
 .runtime-compact-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
@@ -1873,7 +1903,8 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
 .mkt-page .mkt-card.kind-workflow::before{background:var(--mkt-workflow-ink);}
 .mkt-page .mkt-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(17,19,24,.10),0 2px 4px rgba(17,19,24,.04);border-color:rgba(17,19,24,.12);}
 .mkt-page .mkt-card.on{background:linear-gradient(180deg,#fff 0%,#fbfaf7 100%);border-color:rgba(194,69,42,.22);box-shadow:0 6px 18px rgba(194,69,42,.08);}
-.mkt-page .mkt-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
+.mkt-page .mkt-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
+.mkt-page .mkt-card-head > *{min-width:0;}
 .mkt-page .mkt-card-body{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;}
 .mkt-page .mkt-card-title{margin:0;font:500 15px/1.2 'IBM Plex Mono','SF Mono',ui-monospace,monospace;color:var(--mkt-installed);letter-spacing:-.01em;word-break:break-word;}
 .mkt-page .mkt-card-desc{margin:0;color:#69707b;font-size:13px;line-height:1.55;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
@@ -3643,6 +3674,115 @@ a.admin-record-link{display:block;text-decoration:none;color:inherit;transition:
   0%, 100% { opacity: 1; }
   50% { opacity: .4; }
 }
+/* ── Background-agent activity: clickable pill + detail popover ── */
+.app-topbar-activity-wrap { position: relative; display: inline-flex; }
+.app-topbar-activity {
+  border: 1px solid rgba(20,22,26,.10);
+  cursor: pointer;
+  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
+}
+.app-topbar-activity:hover { background: rgba(17,19,24,.07); border-color: rgba(20,22,26,.20); }
+.app-topbar-activity[aria-expanded="true"] { background: rgba(17,19,24,.08); border-color: rgba(20,22,26,.22); }
+.app-topbar-activity.is-running { border-color: rgba(194,69,42,.28); }
+.app-topbar-activity.is-running:hover { background: var(--accent-100, #fbe6e0); }
+.app-topbar-activity-glyph { flex: 0 0 auto; color: #8a9099; }
+.app-topbar-activity.is-running .app-topbar-activity-glyph { color: var(--accent-600, #a5371f); }
+/* Static dot only adds noise at idle — keep it for the running pulse only. */
+.app-topbar-activity:not(.is-running) .app-topbar-dot { display: none; }
+/* Empty state inside the popover */
+.bg-activity-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  text-align: center;
+  padding: 20px 14px 16px;
+  color: #69707a;
+}
+.bg-activity-empty > svg { color: #b4bac1; margin-bottom: 2px; }
+.bg-activity-empty span { font-size: 12px; font-weight: 600; color: #4a5059; }
+.bg-activity-empty small { font-size: 10.5px; color: #9ca3af; }
+.app-topbar-activity-label {
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bg-activity-pop {
+  /* Portaled to <body> so it escapes the topbar's backdrop-filter stacking
+     context and paints above canvas artifacts (.artifact-fs is z-index 9100).
+     top/right are set inline from the trigger's viewport rect. Stays below the
+     search (12000) and help (12100) overlays. */
+  position: fixed;
+  z-index: 9300;
+  width: 320px;
+  max-height: min(70vh, 460px);
+  overflow-y: auto;
+  padding: 10px;
+  border-radius: 14px;
+  background: var(--glass, rgba(255,255,255,.92));
+  border: 1px solid rgba(255,255,255,.85);
+  box-shadow: 0 16px 44px rgba(17,19,24,.18), inset 0 1px 0 rgba(255,255,255,.6);
+  backdrop-filter: saturate(160%) blur(16px);
+  -webkit-backdrop-filter: saturate(160%) blur(16px);
+  animation: bgActivityIn .14s ease;
+}
+@keyframes bgActivityIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.bg-activity-head { display: flex; flex-direction: column; gap: 1px; padding: 2px 4px 8px; }
+.bg-activity-head b { font-size: 12px; font-weight: 700; color: #1c1f25; }
+.bg-activity-head small { font-size: 10.5px; color: #8a9099; font-weight: 500; }
+.bg-activity-list { display: flex; flex-direction: column; gap: 6px; }
+.bg-activity-agent {
+  padding: 8px;
+  border-radius: 11px;
+  border: 1px solid rgba(17,19,24,.07);
+  background: rgba(255,255,255,.6);
+}
+.bg-activity-agent--running { border-color: rgba(194,69,42,.22); background: var(--accent-50, #fdf2ef); }
+.bg-activity-agent--failed { border-color: rgba(194,69,42,.28); }
+.bg-activity-agent-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
+.bg-activity-agent-icon { display: inline-flex; flex: 0 0 auto; color: #68707b; }
+.bg-activity-agent--running .bg-activity-agent-icon { color: var(--accent-600, #a5371f); }
+.bg-activity-agent--complete .bg-activity-agent-icon { color: #2e7d52; }
+.bg-activity-agent--failed .bg-activity-agent-icon { color: #c2452a; }
+.bg-activity-agent-name {
+  font-size: 12px; font-weight: 600; color: #1c1f25;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
+}
+.bg-activity-agent-by { font-size: 10px; color: #9ca3af; font-weight: 500; flex: 0 0 auto; }
+.bg-activity-agent-status {
+  margin-left: auto; flex: 0 0 auto;
+  font-size: 10px; font-weight: 600; color: #69707a;
+  font-family: ui-monospace, 'IBM Plex Mono', monospace;
+}
+.bg-activity-agent--running .bg-activity-agent-status { color: var(--accent-700, #7c2b19); }
+.bg-activity-steps { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; padding-left: 2px; }
+.bg-activity-step { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.bg-activity-step-icon { display: inline-flex; flex: 0 0 auto; color: #a2a8b0; }
+.bg-activity-step--done .bg-activity-step-icon { color: #2e7d52; }
+.bg-activity-step--error .bg-activity-step-icon { color: #c2452a; }
+.bg-activity-step--running .bg-activity-step-icon { color: var(--accent-500, #c2452a); }
+.bg-activity-step-name {
+  font-family: ui-monospace, 'IBM Plex Mono', monospace;
+  font-size: 10.5px; color: #4a5059; flex: 0 0 auto; white-space: nowrap;
+}
+.bg-activity-step--done .bg-activity-step-name { color: #6b7280; }
+.bg-activity-step-sub {
+  font-size: 10.5px; color: #8a9099;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
+}
+.bg-activity-foot {
+  display: block; margin-top: 9px; padding: 6px 4px 2px;
+  font-size: 11px; font-weight: 600; color: var(--accent-600, #a5371f);
+  text-decoration: none;
+}
+.bg-activity-foot:hover { text-decoration: underline; }
+@media (max-width: 980px) {
+  .bg-activity-pop { width: min(320px, calc(100vw - 28px)); }
+}
 .app-topbar-search {
   display: inline-flex;
   align-items: center;