@smooai/chat-widget 0.12.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smooai/chat-widget",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Embeddable AI chat as a framework-light web component — the Aurora Glass design, streaming replies, grounded sources, and per-brand theming. Speaks the smooth-operator WebSocket protocol.",
   "license": "MIT",
   "author": "SmooAI",

package/src/config.ts

@@ -6,6 +6,19 @@
  * {@link mountChatWidget} / `element.configure(...)`).
  */
 import { safeHttpUrl } from './markdown.js';
+import { DEFAULT_VOICE_URL } from './voice-session.js';
+
+/**
+ * Browser voice input/output (SMOODEV-2534). OFF by default — when disabled the
+ * widget renders zero voice UI. When enabled, a mic toggle appears in the
+ * composer and speech flows over the browser-voice WebSocket.
+ */
+export interface ChatWidgetVoiceConfig {
+    /** Turn the voice feature on. Default `false`. */
+    enabled?: boolean;
+    /** Browser-voice WS endpoint. Defaults to the hosted SmooAI voice service. */
+    url?: string;
+}
 
 export interface ChatWidgetTheme {
     /** Foreground text color for the widget chrome. */
@@ -141,6 +154,18 @@ export interface ChatWidgetConfig {
      * `require*` flags are ignored and the pre-chat form is skipped.
      */
     allowAnonymous?: boolean;
+    /**
+     * Show the agent's tool activity (grep / read_file / bash / knowledge_search…)
+     * as inline chips interleaved with its prose, mirroring the smooth daemon SPA.
+     *
+     * Defaults to **`false`**: for a customer-facing support widget, surfacing raw
+     * tool calls to an end-user is usually undesirable, so tool activity is hidden
+     * and only the assistant's prose renders. Enable it for internal / power-user
+     * surfaces where seeing what the agent did mid-turn is valuable.
+     */
+    showToolActivity?: boolean;
+    /** Browser voice input/output. OFF by default (zero UI when off). */
+    voice?: ChatWidgetVoiceConfig;
     /** Theme overrides. */
     theme?: ChatWidgetTheme;
 }
@@ -148,8 +173,9 @@ export interface ChatWidgetConfig {
 /** The fully-resolved theme (canonical keys only — aliases are folded in). */
 export type ResolvedTheme = Required<Omit<ChatWidgetTheme, 'chatBubbleInbound' | 'chatBubbleInboundText' | 'chatBubbleOutbound' | 'chatBubbleOutboundText'>>;
 
-export type ResolvedConfig = Required<Omit<ChatWidgetConfig, 'theme' | 'userName' | 'userEmail' | 'userPhone' | 'authContext' | 'logoUrl'>> & {
+export type ResolvedConfig = Required<Omit<ChatWidgetConfig, 'theme' | 'userName' | 'userEmail' | 'userPhone' | 'authContext' | 'logoUrl' | 'voice'>> & {
     theme: ResolvedTheme;
+    voice: { enabled: boolean; url: string };
     userName?: string;
     userEmail?: string;
     userPhone?: string;
@@ -194,6 +220,8 @@ export function resolveConfig(config: ChatWidgetConfig): ResolvedConfig {
         collectConsent: config.collectConsent ?? true,
         allowChatRestore: config.allowChatRestore ?? true,
         allowAnonymous: config.allowAnonymous ?? false,
+        showToolActivity: config.showToolActivity ?? false,
+        voice: { enabled: config.voice?.enabled ?? false, url: config.voice?.url ?? DEFAULT_VOICE_URL },
         theme: {
             text: theme.text ?? '#f8fafc',
             background: theme.background ?? '#040d30',

package/src/conversation.ts

@@ -61,6 +61,32 @@ export type { Citation };
 
 export type Role = 'user' | 'assistant';
 
+/**
+ * One tool invocation within an assistant turn. Mirrors the smooth daemon SPA's
+ * `ToolCall` (`crates/smooth-web/web/src/operator.ts`): opens `done: false` on the
+ * tool call and resolves on the tool result.
+ */
+export interface ToolCall {
+    /** Stable id for keyed rendering (assigned when the call opens). */
+    id: string;
+    name: string;
+    /** Raw arguments, JSON-stringified. */
+    args: string;
+    /** Present once the tool resolves. */
+    result?: string;
+    isError?: boolean;
+    done: boolean;
+}
+
+/**
+ * One ordered segment of an assistant turn: a run of prose, or a tool call.
+ * Preserves the interleave order the model produced (say a bit → call a tool →
+ * say a bit → …) so the UI can render tool chips INLINE where the model called
+ * them. Mirrors the daemon SPA's `MessageBlock`. Only populated when the widget
+ * is configured with `showToolActivity: true`.
+ */
+export type MessageBlock = { kind: 'text'; text: string } | { kind: 'tool'; tool: ToolCall };
+
 export interface ChatMessage {
     id: string;
     role: Role;
@@ -68,6 +94,12 @@ export interface ChatMessage {
     text: string;
     /** True while an assistant message is still streaming. */
     streaming: boolean;
+    /**
+     * Ordered text + tool segments, interleaved as the model produced them. Present
+     * only on assistant messages when `showToolActivity` is enabled (absent
+     * otherwise — the default popover renders `text` alone, byte-for-byte unchanged).
+     */
+    blocks?: MessageBlock[];
     /**
      * Sources that grounded an assistant answer, when the terminal
      * `eventual_response` carried any. Optional + back-compatible: absent when
@@ -244,12 +276,60 @@ function wireMessageToChat(m: WireMessage, idx: number): ChatMessage | null {
     return { id: typeof m.id === 'string' ? m.id : `hist-${idx}`, role, text, streaming: false };
 }
 
+let toolSeq = 0;
+const nextToolId = (): string => `tool-${++toolSeq}`;
+
+/** Grow the trailing text block, or open a new one if the last block was a tool. */
+function growTextBlock(blocks: MessageBlock[], text: string): void {
+    if (!text) return;
+    const last = blocks[blocks.length - 1];
+    if (last && last.kind === 'text') last.text += text;
+    else blocks.push({ kind: 'text', text });
+}
+
+/**
+ * Fold a `stream_chunk` node-state into the ordered block list, returning `true`
+ * when the chunk carried tool activity.
+ *
+ * Tool activity rides `state.rawResponse.toolCall` / `state.rawResponse.toolResult`
+ * — **NOT** `state.toolResult`. Reading the wrong path leaves every chip stuck on
+ * "running…" forever (the exact bug the daemon SPA hit and this mirror avoids).
+ */
+function applyToolChunk(blocks: MessageBlock[], state: unknown): boolean {
+    const raw = (state as { rawResponse?: unknown } | null | undefined)?.rawResponse;
+    if (!raw || typeof raw !== 'object') return false;
+    const call = (raw as { toolCall?: { name?: string; arguments?: unknown } }).toolCall;
+    const res = (raw as { toolResult?: { name?: string; isError?: boolean; result?: unknown } }).toolResult;
+    if (call) {
+        const args = typeof call.arguments === 'string' ? call.arguments : JSON.stringify(call.arguments ?? {});
+        blocks.push({ kind: 'tool', tool: { id: nextToolId(), name: call.name ?? '', args, done: false } });
+        return true;
+    }
+    if (res) {
+        const result = typeof res.result === 'string' ? res.result : JSON.stringify(res.result ?? '');
+        // Complete the most-recent still-open tool block matching this name.
+        for (let i = blocks.length - 1; i >= 0; i--) {
+            const b = blocks[i];
+            if (b && b.kind === 'tool' && b.tool.name === (res.name ?? '') && !b.tool.done) {
+                b.tool.done = true;
+                b.tool.isError = !!res.isError;
+                b.tool.result = result;
+                break;
+            }
+        }
+        return true;
+    }
+    return false;
+}
+
 export class ConversationController {
     private readonly config: ChatWidgetConfig;
     private readonly events: ConversationEvents;
     private readonly store: StoreApi<WidgetStore>;
     private client: SmoothAgentClient | null = null;
     private sessionId: string | null = null;
+    /** Conversation id of the live session (create or resume) — lets voice join the same thread. */
+    private conversationId: string | null = null;
     private readonly messages: ChatMessage[] = [];
     private status: ConnectionStatus = 'idle';
     private seq = 0;
@@ -306,6 +386,23 @@ export class ConversationController {
         return this.status;
     }
 
+    /** Conversation id of the live session, or null before connect (voice passes this as `conversation_id`). */
+    get currentConversationId(): string | null {
+        return this.conversationId;
+    }
+
+    /**
+     * Append an already-finalized message to the transcript and emit — the voice
+     * path reuses this so `transcript_final` (user) and `reply_text` (assistant)
+     * turns land in the same message list / render pipeline as typed chat.
+     */
+    appendLocalMessage(role: Role, text: string): void {
+        const trimmed = text.trim();
+        if (!trimmed) return;
+        this.messages.push({ id: this.nextId(role === 'user' ? 'u' : 'a'), role, text: trimmed, streaming: false });
+        this.emitMessages();
+    }
+
     /** The persisted store, exposed so the view can read identity for the pre-chat gate. */
     getStore(): StoreApi<WidgetStore> {
         return this.store;
@@ -612,6 +709,7 @@ export class ConversationController {
             ...(metadata ? { metadata } : {}),
         });
         this.sessionId = session.sessionId;
+        this.conversationId = session.conversationId ?? null;
         this.store.getState().setSessionId(session.sessionId);
     }
 
@@ -621,7 +719,7 @@ export class ConversationController {
      */
     private async tryResume(sessionId: string): Promise<boolean> {
         if (!this.client) return false;
-        let snap: { status?: 'active' | 'idle' | 'ended' };
+        let snap: { status?: 'active' | 'idle' | 'ended'; conversationId?: string };
         try {
             snap = await this.client.getSession({ sessionId });
         } catch {
@@ -630,6 +728,7 @@ export class ConversationController {
         if (snap.status === 'ended') return false;
 
         this.sessionId = sessionId;
+        this.conversationId = snap.conversationId ?? null;
         await this.hydrateHistory(sessionId);
         return true;
     }
@@ -674,7 +773,8 @@ export class ConversationController {
         this.messages.push({ id: this.nextId('u'), role: 'user', text: trimmed, streaming: false });
 
         // 2. Placeholder assistant bubble we grow as tokens arrive.
-        const assistant: ChatMessage = { id: this.nextId('a'), role: 'assistant', text: '', streaming: true };
+        const showTools = this.config.showToolActivity === true;
+        const assistant: ChatMessage = { id: this.nextId('a'), role: 'assistant', text: '', streaming: true, blocks: showTools ? [] : undefined };
         this.messages.push(assistant);
         this.emitMessages();
 
@@ -687,6 +787,14 @@ export class ConversationController {
                     const token = event.token ?? event.data?.token ?? '';
                     if (token) {
                         assistant.text += token;
+                        // Grow the trailing text block so prose interleaves with any
+                        // tool chips in the order the model produced them.
+                        if (showTools && assistant.blocks) growTextBlock(assistant.blocks, token);
+                        this.emitMessages();
+                    }
+                } else if (showTools && event.type === 'stream_chunk') {
+                    // Tool activity (gated). Read state.rawResponse.toolCall/.toolResult.
+                    if (assistant.blocks && applyToolChunk(assistant.blocks, event.data?.state)) {
                         this.emitMessages();
                     }
                 } else {
@@ -715,6 +823,11 @@ export class ConversationController {
             if (suggestions.length > 0) {
                 assistant.suggestions = suggestions;
             }
+            // Only keep blocks for turns that actually invoked a tool — a prose-only
+            // turn drops back to the normal markdown text path (with the final text).
+            if (assistant.blocks && !assistant.blocks.some((b) => b.kind === 'tool')) {
+                assistant.blocks = undefined;
+            }
             assistant.streaming = false;
             this.emitMessages();
         } catch (err) {
@@ -960,6 +1073,7 @@ export class ConversationController {
         this.client?.disconnect('widget closed');
         this.client = null;
         this.sessionId = null;
+        this.conversationId = null;
         this.activeRequestId = null;
         // A full teardown ends the controller lifecycle: a subsequent connect() is a
         // genuine re-open and may resume again, so re-arm the resume probe.

package/src/element.ts

@@ -17,10 +17,20 @@
 import { AsYouType, isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js/min';
 import type { ChatWidgetConfig, ChatWidgetMode, ChatWidgetTheme } from './config.js';
 import { needsUserInfo, resolveConfig } from './config.js';
-import { type ChatMessage, type Citation, type ConnectionStatus, ConversationController, type IdentityRestore, type Interrupt, SUPPORTED_INTERACTION_CAPABILITIES } from './conversation.js';
+import {
+    type ChatMessage,
+    type Citation,
+    type ConnectionStatus,
+    ConversationController,
+    type IdentityRestore,
+    type Interrupt,
+    SUPPORTED_INTERACTION_CAPABILITIES,
+    type ToolCall,
+} from './conversation.js';
 import { SMOOTH_ICON_SVG } from './logo.js';
 import { cleanCitationSnippet, escapeHtml, renderMarkdown, safeHttpUrl } from './markdown.js';
 import { buildStyles } from './styles.js';
+import { VoiceSession } from './voice-session.js';
 
 export const ELEMENT_TAG = 'smooth-agent-chat';
 
@@ -52,7 +62,7 @@ function phoneToE164(value: string): string | null {
 /** Public smooth-operator repo — the "powered by" header tag + footer link here. */
 const SMOOTH_OPERATOR_URL = 'https://github.com/SmooAI/smooth-operator';
 
-const OBSERVED = ['endpoint', 'agent-id', 'agent-name', 'logo-url', 'placeholder', 'greeting', 'start-open', 'mode', 'hide-branding'] as const;
+const OBSERVED = ['endpoint', 'agent-id', 'agent-name', 'logo-url', 'placeholder', 'greeting', 'start-open', 'mode', 'hide-branding', 'show-tool-activity'] as const;
 
 /**
  * Inline SVG icons (static, trusted strings — never interpolated with user data).
@@ -75,6 +85,10 @@ const ICON = {
     user: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="8.2" r="3.4" stroke="currentColor" stroke-width="1.7"/><path d="M5.5 19.5c.8-3.1 3.4-4.8 6.5-4.8s5.7 1.7 6.5 4.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>`,
     /** Tool-confirmation interrupt — a shield. */
     shield: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3 5 6v5c0 4.4 3 7.2 7 8.5 4-1.3 7-4.1 7-8.5V6l-7-3Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="m9 11.5 2 2 4-4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+    /** Tool-activity chip — a wrench. */
+    tool: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.7 6.3a3.5 3.5 0 0 0-4.6 4.3l-5 5a1.6 1.6 0 0 0 2.3 2.3l5-5a3.5 3.5 0 0 0 4.3-4.6l-2 2-1.7-.3-.3-1.7 2-2Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`,
+    /** Voice toggle — a microphone. */
+    mic: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="3.5" width="6" height="11" rx="3" stroke="currentColor" stroke-width="1.7"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v2.5M9 20.5h6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>`,
 } as const;
 
 /**
@@ -266,6 +280,10 @@ export class SmoothAgentChatElement extends HTMLElement {
     private allowChatRestore = true;
     /** True while the pre-chat identity gate is showing (blocks premature connect). */
     private gating = false;
+    /** Voice config (SMOODEV-2534) — enabled=false renders zero voice UI. */
+    private voiceCfg: { enabled: boolean; url: string } = { enabled: false, url: '' };
+    /** Live voice session, or null when voice is off. */
+    private voiceSession: VoiceSession | null = null;
 
     // Cached DOM refs (populated in render()).
     private panelEl: HTMLElement | null = null;
@@ -275,6 +293,7 @@ export class SmoothAgentChatElement extends HTMLElement {
     private dotEl: HTMLElement | null = null;
     private inputEl: HTMLTextAreaElement | null = null;
     private sendBtn: HTMLButtonElement | null = null;
+    private micBtn: HTMLButtonElement | null = null;
     private suggestionsEl: HTMLElement | null = null;
 
     // ── Smooth streaming reveal ──
@@ -292,6 +311,10 @@ export class SmoothAgentChatElement extends HTMLElement {
     /** How many chars of {@link streamTarget} are currently shown. */
     private displayedLength = 0;
     private rafId = 0;
+    /** Block structure signature of the last-rendered streaming message (tool chips
+     *  only — text growth doesn't change it), so a chip add/resolve forces a rebuild
+     *  while plain trailing-text growth stays on the fast reveal path. */
+    private prevBlockSig = '';
 
     constructor() {
         super();
@@ -306,6 +329,7 @@ export class SmoothAgentChatElement extends HTMLElement {
     disconnectedCallback(): void {
         this.mounted = false;
         this.resetReveal();
+        this.stopVoice();
         this.controller?.disconnect();
         this.controller = null;
     }
@@ -376,6 +400,8 @@ export class SmoothAgentChatElement extends HTMLElement {
             collectConsent: this.overrides.collectConsent,
             allowChatRestore: this.overrides.allowChatRestore,
             allowAnonymous: this.overrides.allowAnonymous,
+            showToolActivity: this.overrides.showToolActivity ?? this.hasAttribute('show-tool-activity'),
+            voice: this.overrides.voice,
             theme,
         };
     }
@@ -511,6 +537,11 @@ export class SmoothAgentChatElement extends HTMLElement {
         const restoreBtn = this.allowChatRestore ? `<button type="button" class="restore-link">Restore my chats</button>` : '';
         const footerInner = [brandingHtml, restoreBtn].filter(Boolean).join(' · ');
         const footerHtml = footerInner ? `<div class="footer">${footerInner}</div>` : '';
+        // Voice (SMOODEV-2534): mic toggle in the composer, only when enabled.
+        this.voiceCfg = resolved.voice;
+        const micHtml = resolved.voice.enabled
+            ? `<button class="mic" type="button" aria-label="Start voice" aria-pressed="false" title="Talk to ${escapeHtml(resolved.agentName)}">${ICON.mic}</button>`
+            : '';
         const chatHtml = `
                 <div class="messages"></div>
                 <div class="reply-suggestions"></div>
@@ -518,6 +549,7 @@ export class SmoothAgentChatElement extends HTMLElement {
                 <div class="composer-wrap">
                     <div class="composer">
                         <textarea rows="1" placeholder="${escapeHtml(resolved.placeholder)}"></textarea>
+                        ${micHtml}
                         <button class="send" type="button" aria-label="Send message">${ICON.send}</button>
                     </div>
                     ${footerHtml}
@@ -539,8 +571,10 @@ export class SmoothAgentChatElement extends HTMLElement {
         if (logoSvg) logoSvg.setAttribute('class', 'logo');
 
         // A full DOM rebuild invalidates any cached streaming-bubble ref; cancel
-        // the in-flight reveal loop so renderMessages can re-bind cleanly.
+        // the in-flight reveal loop so renderMessages can re-bind cleanly. A live
+        // voice session is bound to the old composer's mic button — end it too.
         this.resetReveal();
+        this.stopVoice();
         this.root.replaceChildren(style, container);
 
         this.launcherEl = container.querySelector('.launcher');
@@ -550,12 +584,14 @@ export class SmoothAgentChatElement extends HTMLElement {
         this.dotEl = container.querySelector('.dot');
         this.inputEl = container.querySelector('textarea');
         this.sendBtn = container.querySelector('.send');
+        this.micBtn = container.querySelector('.mic');
         this.interruptEl = container.querySelector('.interrupt');
         this.suggestionsEl = container.querySelector('.reply-suggestions');
 
         this.launcherEl?.addEventListener('click', () => this.openChat());
         container.querySelector('.close')?.addEventListener('click', () => this.closeChat());
         this.sendBtn?.addEventListener('click', () => this.submit());
+        this.micBtn?.addEventListener('click', () => this.toggleVoice());
         this.inputEl?.addEventListener('input', () => this.autosize());
         this.inputEl?.addEventListener('keydown', (ev) => {
             if (ev.key === 'Enter' && !ev.shiftKey) {
@@ -1046,14 +1082,19 @@ export class SmoothAgentChatElement extends HTMLElement {
             // finalize transition (streaming → done) needs the markdown render + sources
             last.streaming !== prevLast.streaming ||
             // first token after the typing indicator needs the bubble swapped in
-            (!!last.streaming && !prevLast.text && !!last.text);
+            (!!last.streaming && !prevLast.text && !!last.text) ||
+            // a tool chip was added or resolved (text growth alone doesn't change this)
+            this.blockSig(last) !== this.prevBlockSig;
 
         this.messages = messages;
-
-        if (!structural && last && last.streaming && last.id === this.streamMsgId) {
-            // Fast path: the streaming tail just grew. Bump the reveal target and
-            // let the rAF loop catch up — no DOM rebuild, no per-token reflow.
-            this.streamTarget = last.text;
+        this.prevBlockSig = this.blockSig(last);
+
+        if (!structural && last && last.streaming && this.tailKey(last) === this.streamMsgId) {
+            // Fast path: the streaming (trailing) text just grew. Bump the reveal
+            // target and let the rAF loop catch up — no DOM rebuild, no per-token
+            // reflow. `tailText` is the live trailing text block for a tool turn, or
+            // the whole message for a plain-prose turn.
+            this.streamTarget = this.tailText(last);
             this.ensureRevealLoop();
             return;
         }
@@ -1061,6 +1102,32 @@ export class SmoothAgentChatElement extends HTMLElement {
         this.renderMessages();
     }
 
+    /** True when an assistant message's turn invoked at least one tool. */
+    private hasToolBlocks(m?: ChatMessage): boolean {
+        return !!m?.blocks?.some((b) => b.kind === 'tool');
+    }
+
+    /** Signature that changes only when a tool chip is added or resolved (text growth is 'x'). */
+    private blockSig(m?: ChatMessage): string {
+        if (!m?.blocks) return '';
+        return m.blocks.map((b) => (b.kind === 'tool' ? `t:${b.tool.id}:${b.tool.done ? 1 : 0}` : 'x')).join('|');
+    }
+
+    /** The live (last) text block for a tool turn, else the whole message text. */
+    private tailText(m: ChatMessage): string {
+        if (this.hasToolBlocks(m) && m.blocks) {
+            const last = m.blocks[m.blocks.length - 1];
+            return last?.kind === 'text' ? last.text : '';
+        }
+        return m.text;
+    }
+
+    /** Reveal-binding key — composite for a tool-turn tail (so a new trailing block rebinds), else msg id. */
+    private tailKey(m: ChatMessage): string {
+        if (this.hasToolBlocks(m) && m.blocks) return `${m.id}#${m.blocks.length - 1}`;
+        return m.id;
+    }
+
     private renderMessages(): void {
         if (!this.messagesEl) return;
         this.resetReveal();
@@ -1087,6 +1154,16 @@ export class SmoothAgentChatElement extends HTMLElement {
         }
 
         for (const msg of this.messages) {
+            // Tool-activity turns (gated by `showToolActivity`) render as an ordered
+            // strip of prose bubbles + inline tool chips instead of one bubble.
+            if (msg.role === 'assistant' && this.hasToolBlocks(msg)) {
+                this.messagesEl.appendChild(this.buildRow('assistant', this.renderAssistantBlocks(msg)));
+                if (!msg.streaming && msg.citations && msg.citations.length > 0) {
+                    this.messagesEl.appendChild(this.renderSources(msg.citations));
+                }
+                continue;
+            }
+
             const bubble = document.createElement('div');
             bubble.className = `bubble ${msg.role}`;
             if (msg.role === 'assistant' && msg.streaming && !msg.text) {
@@ -1168,22 +1245,89 @@ export class SmoothAgentChatElement extends HTMLElement {
      * doesn't restart the reveal from zero), then resumes the loop.
      */
     private bindReveal(msg: ChatMessage, bubble: HTMLElement): void {
-        const carryOver = msg.id === this.streamMsgId ? Math.min(this.displayedLength, msg.text.length) : 0;
+        // `tailKey`/`tailText` collapse to the message id + full text for a plain
+        // prose turn, and to the live trailing text block for a tool turn — so both
+        // the single streaming bubble and a tool turn's trailing prose share this path.
+        const key = this.tailKey(msg);
+        const target = this.tailText(msg);
+        const carryOver = key === this.streamMsgId ? Math.min(this.displayedLength, target.length) : 0;
         this.streamBubbleEl = bubble;
-        this.streamMsgId = msg.id;
-        this.streamTarget = msg.text;
+        this.streamMsgId = key;
+        this.streamTarget = target;
         this.displayedLength = carryOver;
 
         if (this.prefersReducedMotion()) {
             // No animation: show everything immediately.
-            this.displayedLength = msg.text.length;
-            bubble.textContent = msg.text;
+            this.displayedLength = target.length;
+            bubble.textContent = target;
             return;
         }
-        bubble.textContent = msg.text.slice(0, this.displayedLength);
+        bubble.textContent = target.slice(0, this.displayedLength);
         this.ensureRevealLoop();
     }
 
+    /**
+     * Render a tool-activity assistant turn as an ordered strip: prose bubbles and
+     * inline tool chips in the order the model produced them (mirrors the daemon
+     * SPA's `blocks`). The live trailing text block (while streaming) binds to the
+     * rAF reveal; earlier/finalized text blocks render as sanitized markdown.
+     */
+    private renderAssistantBlocks(msg: ChatMessage): HTMLElement {
+        const wrap = document.createElement('div');
+        wrap.className = 'blocks';
+        const blocks = msg.blocks ?? [];
+        const lastIdx = blocks.length - 1;
+        blocks.forEach((block, i) => {
+            if (block.kind === 'tool') {
+                wrap.appendChild(this.buildToolChip(block.tool));
+                return;
+            }
+            const bubble = document.createElement('div');
+            bubble.className = 'bubble assistant';
+            if (msg.streaming && i === lastIdx) {
+                // Live trailing prose → plain text + cursor, driven by the reveal loop.
+                bubble.classList.add('cursor');
+                this.bindReveal(msg, bubble);
+            } else {
+                // Settled prose → sanitized markdown (same allowlisted renderer as bubbles).
+                bubble.classList.add('md');
+                bubble.innerHTML = renderMarkdown(block.text);
+            }
+            wrap.appendChild(bubble);
+        });
+        return wrap;
+    }
+
+    /**
+     * A single tool-activity chip: icon + tool name + status (running… / done / error),
+     * with a truncated args preview. Tool name/args are set via `textContent` so a
+     * tool payload can never inject markup.
+     */
+    private buildToolChip(tool: ToolCall): HTMLElement {
+        const chip = document.createElement('div');
+        chip.className = `toolchip ${tool.done ? (tool.isError ? 'error' : 'done') : 'running'}`;
+        chip.setAttribute('part', 'tool-chip');
+
+        const icon = document.createElement('span');
+        icon.className = 'ti';
+        icon.innerHTML = ICON.tool; // static, trusted
+        const name = document.createElement('span');
+        name.className = 'tn';
+        name.textContent = tool.name || 'tool';
+        const status = document.createElement('span');
+        status.className = 'ts';
+        status.textContent = tool.done ? (tool.isError ? 'error' : 'done') : 'running…';
+        chip.append(icon, name, status);
+
+        if (tool.args && tool.args !== '{}' && tool.args !== '""') {
+            const args = document.createElement('span');
+            args.className = 'ta';
+            args.textContent = tool.args.length > 80 ? `${tool.args.slice(0, 80)}…` : tool.args;
+            chip.appendChild(args);
+        }
+        return chip;
+    }
+
     /** Start the rAF loop if it isn't already running. */
     private ensureRevealLoop(): void {
         if (this.prefersReducedMotion() || typeof requestAnimationFrame !== 'function') {
@@ -1401,6 +1545,99 @@ export class SmoothAgentChatElement extends HTMLElement {
         if (this.inputEl) this.inputEl.disabled = busy;
     }
 
+    // ───────────────────────── Voice (SMOODEV-2534) ─────────────────────────────
+
+    /**
+     * Mic button: start a voice session, or — when one is live — end it. Hitting
+     * the button while the agent's TTS is playing barges in first (interrupt +
+     * playback flush) so the audio dies instantly, then the session ends.
+     */
+    private toggleVoice(): void {
+        if (this.voiceSession) {
+            if (this.voiceSession.isSpeaking) this.voiceSession.interrupt();
+            this.stopVoice();
+            return;
+        }
+        void this.startVoice();
+    }
+
+    private async startVoice(): Promise<void> {
+        if (!this.controller || this.voiceSession || !this.voiceCfg.enabled) return;
+        const config = this.readConfig();
+        if (!config) return;
+        // Best-effort: join the text thread when one exists. If the text session
+        // hasn't connected yet, voice starts a fresh thread (the frozen protocol
+        // never returns the voice-created conversation id, so it can't be adopted
+        // for later text turns — tracked as a follow-up on the server protocol).
+        const conversationId = this.controller.currentConversationId ?? undefined;
+        const controller = this.controller;
+        const session = new VoiceSession(
+            { url: this.voiceCfg.url, agentId: config.agentId, conversationId },
+            {
+                onTranscriptPartial: (text) => {
+                    // Live partial transcript in the input area while listening.
+                    if (this.inputEl) {
+                        this.inputEl.value = text;
+                        this.autosize();
+                    }
+                },
+                onTranscriptFinal: (text) => {
+                    if (this.inputEl) {
+                        this.inputEl.value = '';
+                        this.autosize();
+                    }
+                    // Finalized speech lands as a normal user message.
+                    controller.appendLocalMessage('user', text);
+                },
+                onReplyText: (text) => {
+                    // Agent replies render through the normal chat message path.
+                    controller.appendLocalMessage('assistant', text);
+                },
+                onSpeaking: (speaking) => {
+                    this.micBtn?.classList.toggle('speaking', speaking);
+                },
+                onError: () => this.stopVoice(),
+                onEnded: () => {
+                    // Server-side end (handoff / close) — reset the UI. stopVoice()
+                    // is idempotent, so a local stop lands here harmlessly too.
+                    this.voiceSession = null;
+                    this.syncVoiceUi(false);
+                },
+            },
+        );
+        this.voiceSession = session;
+        this.syncVoiceUi(true);
+        try {
+            await session.start();
+        } catch {
+            // Mic permission denied / audio unavailable — back to text.
+            this.voiceSession = null;
+            this.syncVoiceUi(false);
+        }
+    }
+
+    /** End any live voice session and reset the composer UI. Idempotent. */
+    private stopVoice(): void {
+        const session = this.voiceSession;
+        this.voiceSession = null;
+        session?.stop();
+        this.syncVoiceUi(false);
+    }
+
+    /** Toggle the mic button's listening state + clear the partial transcript. */
+    private syncVoiceUi(active: boolean): void {
+        this.micBtn?.classList.toggle('active', active);
+        this.micBtn?.setAttribute('aria-pressed', String(active));
+        this.micBtn?.setAttribute('aria-label', active ? 'Stop voice' : 'Start voice');
+        if (!active) {
+            this.micBtn?.classList.remove('speaking');
+            if (this.inputEl && this.inputEl.value) {
+                this.inputEl.value = '';
+                this.autosize();
+            }
+        }
+    }
+
     private submit(): void {
         if (!this.inputEl || !this.controller) return;
         const text = this.inputEl.value;