@smooai/chat-widget 0.11.0 → 0.13.0

package/dist/index.js

@@ -342,6 +342,7 @@ function resolveConfig(config) {
 		collectConsent: config.collectConsent ?? true,
 		allowChatRestore: config.allowChatRestore ?? true,
 		allowAnonymous: config.allowAnonymous ?? false,
+		showToolActivity: config.showToolActivity ?? false,
 		theme: {
 			text: theme.text ?? "#f8fafc",
 			background: theme.background ?? "#040d30",
@@ -735,6 +736,13 @@ function httpBaseFromWsEndpoint(endpoint) {
 		return null;
 	}
 }
+/**
+* The Rich-Interaction render capabilities this widget declares at session
+* create (`supports`). Must stay aligned with the card registry in
+* `element.ts` (`INTERACTION_CARDS`) — registering a card IS declaring its
+* capability; a test asserts the two match.
+*/
+const SUPPORTED_INTERACTION_CAPABILITIES = ["identity_form"];
 /** Pull the final assistant text out of an `eventual_response` data payload. */
 function extractFinalText(response) {
 	if (!response || typeof response !== "object") return null;
@@ -800,6 +808,59 @@ function wireMessageToChat(m, idx) {
 		streaming: false
 	};
 }
+let toolSeq = 0;
+const nextToolId = () => `tool-${++toolSeq}`;
+/** Grow the trailing text block, or open a new one if the last block was a tool. */
+function growTextBlock(blocks, text) {
+	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, state) {
+	const raw = state?.rawResponse;
+	if (!raw || typeof raw !== "object") return false;
+	const call = raw.toolCall;
+	const res = raw.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 ?? "");
+		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;
+}
 var ConversationController = class {
 	constructor(config, events, store) {
 		_defineProperty(this, "config", void 0);
@@ -812,6 +873,7 @@ var ConversationController = class {
 		_defineProperty(this, "seq", 0);
 		_defineProperty(this, "activeRequestId", null);
 		_defineProperty(this, "interrupt", null);
+		_defineProperty(this, "pendingInteractionValues", null);
 		_defineProperty(this, "identityRestore", { phase: "idle" });
 		_defineProperty(this, "resumeAttempted", false);
 		_defineProperty(this, "httpBase", void 0);
@@ -890,6 +952,40 @@ var ConversationController = class {
 		});
 		this.setInterrupt(null);
 	}
+	/**
+	* Submit a Rich Interaction card to resume the parked turn. The server
+	* routes to the kind's validator: invalid values come back as an
+	* `interaction_invalid` event (the card re-renders with per-field errors —
+	* the turn stays parked); a valid submit is acked and the turn resumes.
+	* No-op if not awaiting an interaction.
+	*/
+	submitInteraction(values) {
+		if (!this.client || !this.sessionId || !this.activeRequestId || this.interrupt?.kind !== "interaction") return;
+		this.pendingInteractionValues = {
+			kind: this.interrupt.interactionKind,
+			values
+		};
+		this.client.submitInteraction({
+			sessionId: this.sessionId,
+			requestId: this.activeRequestId,
+			interactionId: this.interrupt.interactionId,
+			kind: this.interrupt.interactionKind,
+			values
+		});
+	}
+	/** Decline the pending Rich Interaction; the agent continues without it. */
+	declineInteraction() {
+		if (!this.client || !this.sessionId || !this.activeRequestId || this.interrupt?.kind !== "interaction") return;
+		this.client.submitInteraction({
+			sessionId: this.sessionId,
+			requestId: this.activeRequestId,
+			interactionId: this.interrupt.interactionId,
+			kind: this.interrupt.interactionKind,
+			declined: true
+		});
+		this.pendingInteractionValues = null;
+		this.setInterrupt(null);
+	}
 	nextId(prefix) {
 		this.seq += 1;
 		return `${prefix}-${this.seq}-${Date.now().toString(36)}`;
@@ -1054,6 +1150,7 @@ var ConversationController = class {
 			userName: state.identity.name,
 			userEmail: state.identity.email,
 			browserFingerprint: this.fingerprint(),
+			supports: [...SUPPORTED_INTERACTION_CAPABILITIES],
 			...metadata ? { metadata } : {}
 		});
 		this.sessionId = session.sessionId;
@@ -1110,11 +1207,13 @@ var ConversationController = class {
 			text: trimmed,
 			streaming: false
 		});
+		const showTools = this.config.showToolActivity === true;
 		const assistant = {
 			id: this.nextId("a"),
 			role: "assistant",
 			text: "",
-			streaming: true
+			streaming: true,
+			blocks: showTools ? [] : void 0
 		};
 		this.messages.push(assistant);
 		this.emitMessages();
@@ -1129,8 +1228,11 @@ var ConversationController = class {
 				const token = event.token ?? event.data?.token ?? "";
 				if (token) {
 					assistant.text += token;
+					if (showTools && assistant.blocks) growTextBlock(assistant.blocks, token);
 					this.emitMessages();
 				}
+			} else if (showTools && event.type === "stream_chunk") {
+				if (assistant.blocks && applyToolChunk(assistant.blocks, event.data?.state)) this.emitMessages();
 			} else this.handleTurnEvent(event);
 			const inner = (await turn).data?.data;
 			const finalText = extractFinalText(inner?.response);
@@ -1140,6 +1242,7 @@ var ConversationController = class {
 			if (citations.length > 0) assistant.citations = citations;
 			const suggestions = extractSuggestions(inner?.response);
 			if (suggestions.length > 0) assistant.suggestions = suggestions;
+			if (assistant.blocks && !assistant.blocks.some((b) => b.kind === "tool")) assistant.blocks = void 0;
 			assistant.streaming = false;
 			this.emitMessages();
 		} catch (err) {
@@ -1196,6 +1299,55 @@ var ConversationController = class {
 					actionDescription: str(inner.actionDescription)
 				});
 				break;
+			case "interaction_required": {
+				const interactionId = str(inner.interactionId);
+				const kind = str(inner.kind);
+				const spec = inner.spec && typeof inner.spec === "object" ? inner.spec : {};
+				if (!interactionId || !kind) break;
+				this.pendingInteractionValues = null;
+				this.setInterrupt({
+					kind: "interaction",
+					interactionId,
+					interactionKind: kind,
+					spec,
+					reason: str(inner.reason)
+				});
+				break;
+			}
+			case "interaction_invalid":
+				if (this.interrupt?.kind === "interaction" && this.interrupt.interactionId === str(inner.interactionId)) {
+					const errors = [];
+					if (Array.isArray(inner.errors)) for (const e of inner.errors) {
+						if (!e || typeof e !== "object") continue;
+						const o = e;
+						const field = str(o.field);
+						if (field) errors.push({
+							field,
+							message: str(o.message) ?? "Invalid value"
+						});
+					}
+					this.pendingInteractionValues = null;
+					this.setInterrupt({
+						...this.interrupt,
+						errors
+					});
+				}
+				break;
+			case "immediate_response":
+				if (this.interrupt?.kind === "interaction") {
+					const pending = this.pendingInteractionValues;
+					if (pending && pending.kind === "identity_intake") {
+						const v = pending.values;
+						this.store.getState().mergeIdentity({
+							name: v.name,
+							email: v.email,
+							phone: v.phone
+						});
+					}
+					this.pendingInteractionValues = null;
+					this.setInterrupt(null);
+				}
+				break;
 			default: break;
 		}
 	}
@@ -1402,6 +1554,7 @@ function buildStyles(theme, mode = "popover") {
     --sac-bg: ${theme.background};
     --sac-primary: ${theme.primary};
     --sac-primary-text: ${theme.primaryText};
+    --sac-secondary: ${theme.secondary};
     --sac-assistant-bubble: ${theme.assistantBubble};
     --sac-assistant-bubble-text: ${theme.assistantBubbleText};
     --sac-user-bubble: ${theme.userBubble};
@@ -1714,6 +1867,47 @@ ${mode === "fullpage" ? `
 }
 @keyframes sac-blink { to { opacity: 0 } }
 
+/* Interleaved tool-activity strip (gated by showToolActivity): prose bubbles
+   and inline tool chips stacked in the order the model produced them. */
+.blocks { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
+.blocks .bubble { align-self: flex-start; }
+.toolchip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 100%;
+    padding: 5px 10px;
+    border-radius: 99px;
+    font-size: 12px;
+    line-height: 1.3;
+    color: color-mix(in srgb, var(--sac-text) 78%, transparent);
+    background: color-mix(in srgb, var(--sac-text) 6%, transparent);
+    border: 1px solid color-mix(in srgb, var(--sac-text) 12%, transparent);
+    animation: sac-msg-in .3s var(--sac-ease) both;
+}
+.toolchip .ti { display: inline-flex; flex: none; opacity: .8; }
+.toolchip .ti svg { width: 13px; height: 13px; }
+.toolchip .tn { font-weight: 600; letter-spacing: .01em; }
+.toolchip .ts { opacity: .7; }
+.toolchip .ta {
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11px;
+    opacity: .6;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+.toolchip.running { border-color: color-mix(in srgb, var(--sac-primary) 45%, transparent); }
+.toolchip.running .ts { color: var(--sac-primary); opacity: 1; animation: sac-typing 1.3s ease-in-out infinite; }
+.toolchip.done .ts::before { content: '✓ '; }
+.toolchip.error {
+    color: var(--sac-secondary);
+    border-color: color-mix(in srgb, var(--sac-secondary) 50%, transparent);
+    background: color-mix(in srgb, var(--sac-secondary) 10%, transparent);
+}
+.toolchip.error .ts::before { content: '! '; }
+
 /* ─────────────── Rendered markdown (assistant bubbles / snippets) ─────────── */
 /* The renderer (markdown.ts) emits a small allowlisted set of tags; these rules
    keep them legible inside the tight Aurora-Glass bubble + citation card. */
@@ -2008,6 +2202,9 @@ ${mode === "fullpage" ? `
     border-color: color-mix(in srgb, var(--sac-primary) 60%, transparent);
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--sac-primary) 14%, transparent);
 }
+.int-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
+.int-form .pc-field input { width: 100%; box-sizing: border-box; }
+.int-form .int-error { margin-top: 2px; }
 .int-btn {
     border: 1px solid color-mix(in srgb, var(--sac-border) 80%, transparent);
     background: var(--sac-surface-2);
@@ -2027,8 +2224,14 @@ ${mode === "fullpage" ? `
     color: var(--sac-primary-text);
     box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--sac-primary) 65%, transparent);
 }
-.int-row .int-btn { flex: 1; }
-.int-row .int-input + .int-btn { flex: 0 0 auto; }
+.int-row .int-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
+.int-form .pc-field input { width: 100%; box-sizing: border-box; }
+.int-form .int-error { margin-top: 2px; }
+.int-btn { flex: 1; }
+.int-row .int-input + .int-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
+.int-form .pc-field input { width: 100%; box-sizing: border-box; }
+.int-form .int-error { margin-top: 2px; }
+.int-btn { flex: 0 0 auto; }
 .int-error { margin-top: 8px; font-size: 12px; color: #f87171; }
 .int-card { position: relative; }
 .int-close {
@@ -2147,7 +2350,8 @@ const OBSERVED = [
 	"greeting",
 	"start-open",
 	"mode",
-	"hide-branding"
+	"hide-branding",
+	"show-tool-activity"
 ];
 /**
 * Inline SVG icons (static, trusted strings — never interpolated with user data).
@@ -2166,9 +2370,141 @@ const ICON = {
 	chev: `<svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="m9 6 6 6-6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
 	/** OTP interrupt — a padlock. */
 	lock: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="10.5" width="14" height="9.5" rx="2.2" stroke="currentColor" stroke-width="1.7"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" stroke="currentColor" stroke-width="1.7"/></svg>`,
+	/** Identity-intake interrupt — a person. */
+	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>`
+	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>`
 };
+/**
+* The identity_intake card: the fields the agent requested (pre-chat form field
+* pattern — same classes, same phone formatting), per-field server errors, a
+* submit and a decline affordance. Server-supplied text (reason, labels, error
+* messages) is set via `textContent` — never innerHTML.
+*/
+function buildIdentityIntakeCard(it, ctx) {
+	const form = document.createElement("form");
+	form.className = "int-form";
+	form.noValidate = true;
+	if (it.reason) {
+		const desc = document.createElement("div");
+		desc.className = "int-desc";
+		desc.textContent = it.reason;
+		form.appendChild(desc);
+	}
+	const DEFAULTS = {
+		name: {
+			label: "Name",
+			type: "text",
+			autocomplete: "name"
+		},
+		email: {
+			label: "Email",
+			type: "email",
+			autocomplete: "email"
+		},
+		phone: {
+			label: "Phone",
+			type: "tel",
+			autocomplete: "tel"
+		}
+	};
+	const rawFields = Array.isArray(it.spec.fields) ? it.spec.fields : [];
+	const fields = [];
+	for (const f of rawFields) {
+		if (!f || typeof f !== "object") continue;
+		const o = f;
+		const key = typeof o.key === "string" ? o.key : "";
+		if (key !== "name" && key !== "email" && key !== "phone") continue;
+		fields.push({
+			key,
+			required: o.required === true,
+			label: typeof o.label === "string" ? o.label : void 0
+		});
+	}
+	if (fields.length === 0) fields.push({
+		key: "email",
+		required: true
+	});
+	for (const f of fields) {
+		const d = DEFAULTS[f.key];
+		const label = document.createElement("label");
+		label.className = "pc-field";
+		const caption = document.createElement("span");
+		caption.textContent = f.label ?? d.label;
+		const input = document.createElement("input");
+		input.name = f.key;
+		input.type = d.type;
+		input.setAttribute("autocomplete", d.autocomplete);
+		input.required = f.required;
+		const prefill = ctx.prefill[f.key];
+		if (prefill) input.value = prefill;
+		label.append(caption, input);
+		if (f.key === "phone") {
+			const hint = document.createElement("span");
+			hint.className = "pc-hint";
+			hint.setAttribute("aria-live", "polite");
+			label.appendChild(hint);
+		}
+		const serverError = it.errors?.find((e) => e.field === f.key);
+		if (serverError) {
+			label.classList.add("invalid");
+			const err = document.createElement("span");
+			err.className = "int-error";
+			err.textContent = serverError.message;
+			label.appendChild(err);
+		}
+		form.appendChild(label);
+	}
+	const row = document.createElement("div");
+	row.className = "int-row";
+	const decline = document.createElement("button");
+	decline.className = "int-btn";
+	decline.type = "button";
+	decline.textContent = "No thanks";
+	decline.addEventListener("click", () => ctx.decline());
+	const share = document.createElement("button");
+	share.className = "int-btn primary";
+	share.type = "submit";
+	share.textContent = "Share details";
+	row.append(decline, share);
+	form.appendChild(row);
+	form.addEventListener("submit", (ev) => {
+		ev.preventDefault();
+		if (!form.reportValidity()) return;
+		const data = new FormData(form);
+		const val = (k) => data.get(k)?.trim() || void 0;
+		const rawPhone = val("phone");
+		const phoneInput = form.querySelector("input[name=\"phone\"]");
+		if (rawPhone && phoneInput && !isValidPhoneNumber(rawPhone, PHONE_DEFAULT_REGION)) {
+			const field = phoneInput.closest(".pc-field");
+			field?.classList.add("invalid");
+			const hint = field?.querySelector(".pc-hint");
+			if (hint) hint.textContent = "Enter a valid phone number";
+			if (phoneInput.hasAttribute("required")) {
+				phoneInput.focus();
+				return;
+			}
+		}
+		const phone = rawPhone ? phoneToE164(rawPhone) ?? rawPhone : void 0;
+		ctx.submit({
+			name: val("name"),
+			email: val("email"),
+			phone
+		});
+	});
+	ctx.wirePhoneField(form);
+	queueMicrotask(() => form.querySelector("input")?.focus());
+	return form;
+}
+/** Kind → card. See the registry doc above. */
+const INTERACTION_CARDS = { identity_intake: {
+	capability: "identity_form",
+	title: "Share your details",
+	icon: ICON.user,
+	build: buildIdentityIntakeCard
+} };
 var SmoothAgentChatElement = class extends HTMLElement {
 	static get observedAttributes() {
 		return OBSERVED;
@@ -2205,6 +2541,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		_defineProperty(this, "streamTarget", "");
 		_defineProperty(this, "displayedLength", 0);
 		_defineProperty(this, "rafId", 0);
+		_defineProperty(this, "prevBlockSig", "");
 		this.root = this.attachShadow({ mode: "open" });
 	}
 	connectedCallback() {
@@ -2276,6 +2613,7 @@ var SmoothAgentChatElement = class extends HTMLElement {
 			collectConsent: this.overrides.collectConsent,
 			allowChatRestore: this.overrides.allowChatRestore,
 			allowAnonymous: this.overrides.allowAnonymous,
+			showToolActivity: this.overrides.showToolActivity ?? this.hasAttribute("show-tool-activity"),
 			theme
 		};
 	}
@@ -2451,19 +2789,31 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		head.className = "int-head";
 		const ico = document.createElement("span");
 		ico.className = "int-ico";
-		ico.innerHTML = it.kind === "otp" ? ICON.lock : ICON.shield;
+		const card_meta = it.kind === "interaction" ? INTERACTION_CARDS[it.interactionKind] : void 0;
+		if (it.kind === "interaction" && !card_meta) {
+			this.controller?.declineInteraction();
+			el.classList.add("hidden");
+			return;
+		}
+		ico.innerHTML = it.kind === "otp" ? ICON.lock : it.kind === "interaction" ? card_meta?.icon ?? ICON.user : ICON.shield;
 		const title = document.createElement("span");
 		title.className = "int-title";
-		title.textContent = it.kind === "otp" ? "Verification required" : "Confirm this action";
+		title.textContent = it.kind === "otp" ? "Verification required" : it.kind === "interaction" ? card_meta?.title ?? "One more thing" : "Confirm this action";
 		head.append(ico, title);
 		card.appendChild(head);
-		if (it.actionDescription) {
+		if (it.kind !== "interaction" && it.actionDescription) {
 			const desc = document.createElement("div");
 			desc.className = "int-desc";
 			desc.textContent = it.actionDescription;
 			card.appendChild(desc);
 		}
-		if (it.kind === "otp") {
+		if (it.kind === "interaction") card.appendChild(card_meta.build(it, {
+			submit: (values) => this.controller?.submitInteraction(values),
+			decline: () => this.controller?.declineInteraction(),
+			prefill: this.controller?.getStore().getState().identity ?? {},
+			wirePhoneField: (form) => this.wirePhoneField(form)
+		}));
+		else if (it.kind === "otp") {
 			if (it.sent?.maskedDestination) {
 				const sent = document.createElement("div");
 				sent.className = "int-sent";
@@ -2803,15 +3153,38 @@ var SmoothAgentChatElement = class extends HTMLElement {
 		const prev = this.messages;
 		const last = messages[messages.length - 1];
 		const prevLast = prev[prev.length - 1];
-		const structural = messages.length !== prev.length || !last || !prevLast || last.id !== prevLast.id || last.role !== prevLast.role || last.streaming !== prevLast.streaming || !!last.streaming && !prevLast.text && !!last.text;
+		const structural = messages.length !== prev.length || !last || !prevLast || last.id !== prevLast.id || last.role !== prevLast.role || last.streaming !== prevLast.streaming || !!last.streaming && !prevLast.text && !!last.text || this.blockSig(last) !== this.prevBlockSig;
 		this.messages = messages;
-		if (!structural && last && last.streaming && last.id === this.streamMsgId) {
-			this.streamTarget = last.text;
+		this.prevBlockSig = this.blockSig(last);
+		if (!structural && last && last.streaming && this.tailKey(last) === this.streamMsgId) {
+			this.streamTarget = this.tailText(last);
 			this.ensureRevealLoop();
 			return;
 		}
 		this.renderMessages();
 	}
+	/** True when an assistant message's turn invoked at least one tool. */
+	hasToolBlocks(m) {
+		return !!m?.blocks?.some((b) => b.kind === "tool");
+	}
+	/** Signature that changes only when a tool chip is added or resolved (text growth is 'x'). */
+	blockSig(m) {
+		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. */
+	tailText(m) {
+		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. */
+	tailKey(m) {
+		if (this.hasToolBlocks(m) && m.blocks) return `${m.id}#${m.blocks.length - 1}`;
+		return m.id;
+	}
 	renderMessages() {
 		if (!this.messagesEl) return;
 		this.resetReveal();
@@ -2832,6 +3205,11 @@ var SmoothAgentChatElement = class extends HTMLElement {
 			this.messagesEl.appendChild(chips);
 		}
 		for (const msg of this.messages) {
+			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) {
@@ -2889,19 +3267,77 @@ var SmoothAgentChatElement = class extends HTMLElement {
 	* doesn't restart the reveal from zero), then resumes the loop.
 	*/
 	bindReveal(msg, bubble) {
-		const carryOver = msg.id === this.streamMsgId ? Math.min(this.displayedLength, msg.text.length) : 0;
+		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()) {
-			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.
+	*/
+	renderAssistantBlocks(msg) {
+		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) {
+				bubble.classList.add("cursor");
+				this.bindReveal(msg, bubble);
+			} else {
+				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.
+	*/
+	buildToolChip(tool) {
+		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;
+		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. */
 	ensureRevealLoop() {
 		if (this.prefersReducedMotion() || typeof requestAnimationFrame !== "function") {