@dxos/react-ui-assistant 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/dist/lib/index.mjs

@@ -1,31 +1,131 @@
+import { ChatView, DeliveryAnnotation, DeliveryStatus, getDelivery, isUnread } from "./types.mjs";
 import { translationKey, translations } from "./translations.mjs";
-import { ChatView } from "./types.mjs";
-import { createContext } from "@radix-ui/react-context";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { MessageList, isPrompt } from "@dxos/react-ui-feed";
-import { AnchorWidget, getXmlTextChild } from "@dxos/ui-editor";
-import { NumericTabs, TogglePanel } from "@dxos/react-ui-components";
-import { JsonHighlighter } from "@dxos/react-ui-syntax-highlighter";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { MessageList, isPrompt, useMessageList } from "@dxos/react-ui-feed";
+import * as Button from "@dxos/react-ui/Button";
+import * as Hooks from "@dxos/react-ui/Hooks";
+import * as Schema from "effect/Schema";
+import { getXmlInnerText, getXmlTextChild } from "@dxos/ui-editor";
 import { WidgetType } from "@codemirror/view";
 import { Domino, mx } from "@dxos/ui";
-import { Icon, IconBlock, IconButton, TextCrawl, useTranslation } from "@dxos/react-ui";
+import { getSize, getStyles, mx as mx$1 } from "@dxos/ui-theme";
+import { JsonHighlighter, SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
+import { TogglePanel } from "@dxos/react-ui-components";
+import * as Icon from "@dxos/react-ui/Icon";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as Card from "@dxos/react-ui/Card";
+import * as Layout from "@dxos/react-ui/Layout";
+import { ContentBlock, Message } from "@dxos/types";
 import { safeParseJson } from "@dxos/util";
-import { Message } from "@dxos/types";
-import { mx as mx$1 } from "@dxos/ui-theme";
-//#region src/widgets/FallbackWidget.tsx
-var FallbackWidget = ({ _tag, ...props }) => {
-	return /* @__PURE__ */ jsx(TogglePanel.Root, { children: /* @__PURE__ */ jsxs(TogglePanel.Content, { children: [/* @__PURE__ */ jsx(TogglePanel.Header, {
-		classNames: "dx-group-surface",
-		children: _tag
-	}), /* @__PURE__ */ jsx(TogglePanel.Body, {
-		classNames: "dx-modal-surface",
-		children: /* @__PURE__ */ jsx(TogglePanel.Viewport, { children: /* @__PURE__ */ jsx(JsonHighlighter, {
-			classNames: "p-2! text-sm",
-			data: props
-		}) })
-	})] }) });
+import * as Accordion from "@dxos/react-ui/Accordion";
+import * as SystemButton from "@dxos/react-ui/SystemButton";
+//#region src/widgets/DeliveryWidget.ts
+var ICONS = {
+	sent: "ph--check--regular",
+	delivered: "ph--checks--regular",
+	read: "ph--checks--bold",
+	failed: "ph--warning-circle--regular"
 };
+/**
+* The delivery ticks under a prompt still on its way to the agent, with its remove control.
+*
+* Every state is one line of the same height, so a prompt moving from sent to read never moves the
+* rows below it. The controls are `data-action` buttons the thread's delegated listener turns into
+* events, as the suggestion chips are, which keeps the widget renderable from its tag alone.
+*/
+var DeliveryWidget = class extends WidgetType {
+	status;
+	messageId;
+	labels;
+	constructor(status, messageId, labels) {
+		super();
+		this.status = status;
+		this.messageId = messageId;
+		this.labels = labels;
+	}
+	eq(other) {
+		return this.status === other.status && this.messageId === other.messageId && this.labels === other.labels;
+	}
+	toDOM() {
+		const status = this.status;
+		const root = Domino.of("div").classNames(mx("flex justify-end items-center gap-2 pt-1 text-xs leading-4", status === "failed" ? "text-error-text" : status === "read" ? "text-accent-text" : "text-fg-subtle")).attributes({
+			"data-testid": "chat.delivery",
+			"data-delivery": status
+		});
+		if (status === "failed" || status === "delivered") root.append(this.#action("remove"));
+		root.append(Domino.of("dx-icon").classNames(getSize(4)).attributes({
+			"icon": ICONS[status],
+			"role": "img",
+			"aria-label": this.labels[status],
+			"title": this.labels[status]
+		}));
+		return root.root;
+	}
+	#action(action) {
+		return Domino.of("button").attributes({
+			"type": "button",
+			"data-action": action,
+			"data-value": this.messageId
+		}).classNames("underline underline-offset-2 hover:text-fg-default").text(this.labels[action]);
+	}
+};
+//#endregion
+//#region src/widgets/WidgetPanel.tsx
+/** The bordered box a disclosure opens onto. */
+var PANEL_FRAME = "border border-separator rounded-md min-w-0";
+/**
+* A chat widget that reads as one line of prose with a disclosure caret at its end, opening onto
+* its detail — the shared shape of every collapsible widget in the thread.
+*/
+var WidgetPanel = ({ icon, label, suffix, error, testId, onChangeOpen, lazyMount, children }) => /* @__PURE__ */ jsxs(TogglePanel.Root, {
+	onChangeOpen,
+	lazyMount,
+	classNames: "w-0 min-w-full",
+	children: [/* @__PURE__ */ jsx(TogglePanel.Header, {
+		caret: "end",
+		"data-testid": testId,
+		classNames: "group/disclosure gap-1",
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-center gap-2 text-fg-muted tabular-nums",
+			children: [
+				/* @__PURE__ */ jsx(Icon.Icon, {
+					icon,
+					size: "md"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: mx$1("truncate group-hover/disclosure:text-fg", error && "text-error-text"),
+					children: label
+				}),
+				suffix
+			]
+		})
+	}), /* @__PURE__ */ jsx(TogglePanel.Body, { children })]
+});
+/** The same row without a caret, for a widget with nothing to open onto. */
+var WidgetPanelRow = ({ icon, label, testId }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex items-center gap-2 p-1 text-fg-muted min-h-(--dx-control)",
+	"data-testid": testId,
+	children: [/* @__PURE__ */ jsx(Icon.Icon, {
+		icon,
+		size: "md"
+	}), /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: label
+	})]
+});
+//#endregion
+//#region src/widgets/FallbackWidget.tsx
+var FallbackWidget = ({ _tag, ...props }) => /* @__PURE__ */ jsx(WidgetPanel, {
+	icon: "ph--brackets-curly--regular",
+	label: _tag,
+	testId: "assistant.fallback",
+	lazyMount: true,
+	children: /* @__PURE__ */ jsx(JsonHighlighter, {
+		data: props,
+		scroll: "horizontal",
+		classNames: mx$1(PANEL_FRAME, "p-trim-sm text-xs bg-transparent")
+	})
+});
 FallbackWidget.displayName = "Fallback";
 //#endregion
 //#region src/widgets/ReasoningWidget.ts
@@ -46,7 +146,7 @@ var ReasoningWidget = class extends WidgetType {
 		return this.text === other.text && this.#pos === other.#pos;
 	}
 	toDOM() {
-		return Domino.of("div").append(Domino.of("div").classNames("relative overflow-hidden p-px border border-subdued-separator rounded-md").attributes({ "data-trail-container": "" }).append(Domino.of("div").classNames("relative z-10 dx-base-surface rounded-md text-sm text-subdued py-1", "grid grid-cols-[24px_1fr] gap-x-0.5 items-start").append(Domino.of("div").classNames("flex h-5 w-full shrink-0 items-center justify-center self-start").append(Domino.svg("ph--brain--regular").classNames("shrink-0 size-4 opacity-70")), Domino.of("div").classNames("px-2 max-h-[5lh] overflow-y-auto dx-scrollbar-thin min-w-0").text(this.text).attributes({ "data-reasoning-text": "" })), Domino.of("div").attributes({ "data-id": this.#pos }))).root;
+		return Domino.of("div").append(Domino.of("div").classNames("relative overflow-hidden p-px border border-separator-subtle rounded-md").attributes({ "data-trail-container": "" }).append(Domino.of("div").classNames("relative z-10 dx-base-surface rounded-md text-sm p-1", "grid grid-cols-[24px_1fr] gap-x-0.5 items-start").append(Domino.of("div").classNames("flex h-[1lh] shrink-0 items-center justify-center self-start").append(Domino.svg("ph--brain--regular").classNames("shrink-0 size-4")), Domino.of("div").classNames("flex items-start max-h-[5lh] overflow-y-auto dx-scrollbar-thin text-fg-muted tabular-nums").text(this.text).attributes({ "data-reasoning-text": "" })), Domino.of("div").attributes({ "data-id": this.#pos }))).root;
 	}
 	updateDOM(dom) {
 		dom.querySelector("[data-reasoning-text]")?.replaceChildren(this.text);
@@ -101,20 +201,66 @@ var createTrailLayers = () => [Domino.of("div").classNames(...trail, "animate-tr
 //#region src/widgets/ReferenceWidget.ts
 var ReferenceWidget = class extends WidgetType {
 	text;
-	dxn;
-	constructor(text, dxn) {
+	eid;
+	constructor(text, eid) {
 		super();
 		this.text = text;
-		this.dxn = dxn;
+		this.eid = eid;
 	}
 	eq(other) {
-		return this.dxn === other.dxn;
+		return this.eid === other.eid;
 	}
 	toDOM() {
-		return Domino.of("span").classNames("inline-flex align-baseline").append(Domino.of("dx-anchor").classNames("dx-tag--anchor").attributes({ dxn: this.dxn }).text(this.text)).root;
+		return Domino.of("span").classNames("inline-flex align-baseline").append(Domino.of("dx-anchor").classNames("dx-tag-anchor").attributes({ eid: this.eid }).text(this.text)).root;
 	}
 };
 //#endregion
+//#region src/widgets/RequestWidget.tsx
+var decodeRequest = Schema.decodeUnknownOption(ContentBlock.Request);
+/**
+* An agent waiting for permission, as a card with the options it offered. A choice is reported
+* through the thread's delegated `respond` action, like the select and suggestion widgets' `submit`.
+* Once answered (or abandoned) the card shows the outcome instead of the buttons.
+*/
+var RequestWidget = ({ children, message }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const request = useMemo(() => decodeRequest(safeParseJson(getXmlTextChild(children ?? []) ?? "")), [children]);
+	if (request._tag === "None" || typeof message !== "string") return null;
+	const { requestId, title, options, resolution } = request.value;
+	const chosen = options.find((option) => option.id === resolution?.optionId);
+	return /* @__PURE__ */ jsxs(Card.Root, {
+		"data-testid": "assistant.request",
+		children: [/* @__PURE__ */ jsxs(Card.Header, { children: [/* @__PURE__ */ jsx(Layout.Block, { children: /* @__PURE__ */ jsx(Icon.Icon, { icon: "ph--shield-warning--regular" }) }), /* @__PURE__ */ jsx(Card.Title, { children: title })] }), /* @__PURE__ */ jsx(Card.Body, { children: resolution ? /* @__PURE__ */ jsx(Card.Description, { children: chosen ? t("request.answered.label", { option: chosen.label }) : t("request.cancelled.label") }) : /* @__PURE__ */ jsx(Layout.Flex, {
+			role: "group",
+			wrap: true,
+			gap: "sm",
+			children: options.map((option) => /* @__PURE__ */ jsx(Button.Root, {
+				variant: option.kind.startsWith("allow") ? "primary" : "default",
+				"data-action": "respond",
+				"data-message": message,
+				"data-request": requestId,
+				"data-option": option.id,
+				children: option.label
+			}, option.id))
+		}) })]
+	});
+};
+//#endregion
+//#region src/widgets/submit-button.ts
+/**
+* A button that submits its text as the reader's next prompt, through the thread's delegated
+* `submit` action — shared by the suggestion and select widgets so the two read as one control.
+*/
+var submitButton = (value, icon) => {
+	const button = Domino.of("button").attributes({
+		"data-size": "md",
+		"data-action": "submit",
+		"data-value": value
+	}).classNames("dx-control dx-button dx-container-query-inline-size gap-2 min-w-0 overflow-hidden");
+	if (icon) button.append(Domino.svg(icon).classNames("shrink-0 size-4 text-fg-muted"));
+	return button.append(Domino.of("span").classNames("truncate min-w-0").text(value));
+};
+//#endregion
 //#region src/widgets/SelectWidget.ts
 /**
 * Simple prompt widget.
@@ -132,11 +278,7 @@ var SelectWidget = class extends WidgetType {
 	* NOTE: Container must set var based on user's identity.
 	*/
 	toDOM() {
-		return Domino.of("div").attributes({ role: "group" }).classNames("flex flex-wrap gap-1").append(...this.options.map((option) => Domino.of("button").classNames("dx-button inline-block max-w-[100cqi]").attributes({
-			"data-action": "submit",
-			"data-value": option,
-			"data-density": "md"
-		}).text(option))).root;
+		return Domino.of("div").attributes({ role: "group" }).classNames("flex flex-wrap gap-x-2 gap-y-2").append(...this.options.map((option) => submitButton(option))).root;
 	}
 };
 //#endregion
@@ -198,302 +340,124 @@ var SuggestionWidget = class extends WidgetType {
 		return this.text === other.text;
 	}
 	toDOM() {
-		return Domino.of("span").classNames(mx("inline-flex max-w-[calc(100cqi-8px)] overflow-hidden")).append(Domino.of("button").attributes({
-			"data-density": "md",
-			"data-action": "submit",
-			"data-value": this.text
-		}).classNames(mx("dx-button gap-2 w-full overflow-hidden")).append(Domino.of("dx-icon").attributes({ icon: "ph--lightning--regular" }), Domino.of("span").classNames("flex-1 truncate min-w-0").text(this.text))).root;
+		return Domino.of("span").classNames("dx-container-query-inline-size inline-flex overflow-hidden py-1 pe-2").append(submitButton(this.text, "ph--lightning--regular")).root;
 	}
 };
 //#endregion
 //#region src/widgets/SummaryWidget.tsx
 var SummaryWidget = ({ children }) => {
-	const { t } = useTranslation(translationKey);
-	return /* @__PURE__ */ jsx(TogglePanel.Root, { children: /* @__PURE__ */ jsxs(TogglePanel.Content, {
-		classNames: "border border-subdued-separator rounded-md",
-		children: [/* @__PURE__ */ jsx(TogglePanel.Header, {
-			classNames: "text-sm dx-group-surface",
-			children: t("summary.label")
-		}), /* @__PURE__ */ jsx(TogglePanel.Body, { children: /* @__PURE__ */ jsx("div", {
-			className: "p-1 text-sm text-subdued",
+	const { t } = Hooks.useTranslation(translationKey);
+	return /* @__PURE__ */ jsx(WidgetPanel, {
+		icon: "ph--list-bullets--regular",
+		label: t("summary.label"),
+		testId: "assistant.summary",
+		children: /* @__PURE__ */ jsx("div", {
+			className: mx$1(PANEL_FRAME, "p-trim-sm text-sm text-fg-muted"),
 			children: getXmlTextChild(children ?? [])
-		}) })]
-	}) });
+		})
+	});
 };
 //#endregion
-//#region src/widgets/ToolWidget.tsx
+//#region src/widgets/SyntheticWidget.tsx
 /**
-* A run of tool blocks as one collapsible panel with a tab per call. The `<toolkit>` tag carries
-* the run as JSON — the item is rebuilt from its message alone, so there is no widget-state side
-* channel to accumulate blocks through.
+* A system-generated turn: a trigger, an alarm wake-up, a continuation nudge, a tool result
+* recovered across a reload. Collapsed to its first line behind a disclosure, like the model's own
+* panels, so it reads as machinery rather than prose, and glyphed as input, because it is a prompt
+* nobody typed.
 */
-var ToolWidget = ({ view, children }) => {
-	const { t } = useTranslation(translationKey);
-	const blocks = useMemo(() => {
-		const parsed = safeParseJson(getXmlTextChild(children ?? []) ?? "");
-		return Array.isArray(parsed) ? parsed : [];
-	}, [children]);
-	const items = useMemo(() => {
-		let lastToolCall;
-		const tools = [];
-		const items = [];
-		const indexByToolCallId = /* @__PURE__ */ new Map();
-		const push = (id, item) => {
-			const existing = id !== void 0 ? indexByToolCallId.get(id) : void 0;
-			if (existing !== void 0) items[existing] = item;
-			else {
-				if (id !== void 0) indexByToolCallId.set(id, items.length);
-				items.push(item);
-			}
-		};
-		for (const block of blocks) switch (block._tag) {
-			case "toolCall": {
-				const tool = tools.find((tool) => tool.name === block.name);
-				lastToolCall = {
-					tool,
-					block
-				};
-				push(block.toolCallId, {
-					title: tool?.description ?? [t("tool-call.label"), block.name].filter(Boolean).join(" "),
-					icon: block.operationIcon,
-					content: safeParseJson(block.input) ?? (block.input || {})
-				});
-				break;
-			}
-			case "toolResult": {
-				if (block.error) {
-					push(void 0, {
-						title: t("tool-error.label"),
-						icon: lastToolCall?.block.operationIcon,
-						content: block.error
-					});
-					break;
-				}
-				const title = lastToolCall?.tool?.description ?? [t("tool-result.label"), lastToolCall?.block.name].filter(Boolean).join(" ");
-				const icon = lastToolCall?.block.operationIcon;
-				lastToolCall = void 0;
-				push(void 0, {
-					title,
-					icon,
-					content: typeof block.result === "string" ? safeParseJson(block.result) ?? block.result : block.result
-				});
-				break;
-			}
-			case "stats":
-				if (!lastToolCall) break;
-				push(void 0, {
-					title: t("stats.label"),
-					icon: lastToolCall.block.operationIcon,
-					content: block
-				});
-		}
-		return items;
-	}, [blocks, t]);
+var SyntheticWidget = ({ view, children }) => {
+	const text = getXmlInnerText(children ?? [])?.trim();
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => view?.requestMeasure());
+		return () => cancelAnimationFrame(frame);
+	}, [view, text]);
 	const handleChangeOpen = useCallback(() => {
-		setTimeout(() => {
-			view?.requestMeasure();
-		}, 1e3);
+		setTimeout(() => view?.requestMeasure(), 1e3);
 	}, [view]);
-	if (!items.length) return null;
-	return /* @__PURE__ */ jsx(ToolPanel, {
-		items,
-		onChangeOpen: handleChangeOpen
-	});
-};
-var DEFAULT_TOOL_ICON = "ph--wrench--regular";
-var ToolPanel = ({ items, onChangeOpen }) => {
-	const tabsRef = useRef(null);
-	const [selected, setSelected] = useState(0);
-	const [open, setOpen] = useState(false);
-	useEffect(() => {
-		setSelected((prev) => Math.min(prev, Math.max(0, items.length - 1)));
-	}, [items.length]);
-	useEffect(() => {
-		onChangeOpen?.(open);
-		if (open) tabsRef.current?.focus();
-	}, [open, onChangeOpen]);
-	const handleSelect = useCallback((index) => {
-		setSelected(index);
-	}, []);
-	const headerIcon = items[items.length - 1]?.icon ?? items[0]?.icon ?? DEFAULT_TOOL_ICON;
-	return /* @__PURE__ */ jsx(TogglePanel.Root, {
-		open,
-		onChangeOpen: setOpen,
-		children: /* @__PURE__ */ jsxs(TogglePanel.Content, { children: [/* @__PURE__ */ jsx(TogglePanel.Header, {
-			classNames: "flex items-center gap-2 text-sm",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "w-full grid grid-cols-[1fr_auto] items-center gap-2",
-				children: [/* @__PURE__ */ jsx(TextCrawl, {
-					classNames: "text-description",
-					lines: items.map((item) => item.title),
-					autoAdvance: true,
-					greedy: true
-				}, "status-roll"), /* @__PURE__ */ jsx(IconBlock, { children: /* @__PURE__ */ jsx(Icon, {
-					icon: headerIcon,
-					size: 4
-				}) })]
-			})
-		}), /* @__PURE__ */ jsx(TogglePanel.Body, { children: /* @__PURE__ */ jsxs(TogglePanel.Viewport, {
-			classNames: "grid grid-cols-[32px_1fr]",
-			children: [/* @__PURE__ */ jsx(NumericTabs, {
-				ref: tabsRef,
-				classNames: "p-1",
-				length: items.length,
-				selected,
-				onSelect: handleSelect
-			}), /* @__PURE__ */ jsx(JsonHighlighter, {
-				data: items[selected]?.content,
-				classNames: "p-1 text-xs bg-transparent",
-				replacer: {
-					maxDepth: 3,
-					maxArrayLen: 10,
-					maxStringLen: 128
-				}
-			})]
-		}) })] })
+	if (!text) return null;
+	return /* @__PURE__ */ jsx(WidgetPanel, {
+		icon: "ph--lightning--regular",
+		label: text.split("\n")[0],
+		testId: "assistant.synthetic",
+		onChangeOpen: handleChangeOpen,
+		children: /* @__PURE__ */ jsx("div", {
+			className: mx$1(PANEL_FRAME, "p-trim-sm text-sm text-fg-muted whitespace-pre-wrap wrap-break-word tabular-nums"),
+			"data-synthetic-text": "",
+			children: text
+		})
 	});
 };
 //#endregion
-//#region src/registry.tsx
-/**
-* Floor for a portaled panel's collapsed height, reserved before its content paints. `heightMode:
-* 'min'` makes it a floor rather than a pin — without it the row is measured at the height of an
-* empty box and grows a frame later, a row moving under a reader scrolling up.
-*/
-var COLLAPSED_HEIGHT = 42;
-/**
-* Widgets for the tags {@link createRenderer} emits.
-*
-* Host-extensible by spreading: the plugin adds its `surface` widget (which renders an
-* app-framework Surface this package must not depend on) over the fallback registered here.
-* DOM widgets render synchronously from the tag alone; React widgets are portaled and declare a
-* collapsed-height floor so the row's first measurement is honest.
-*/
-var assistantRegistry = {
-	"prompt": { block: true },
-	"link-preview": {
-		block: false,
-		urlSchemes: ["dxn:", "echo:"],
-		factory: ({ label, dxn }) => typeof label === "string" && typeof dxn === "string" ? new AnchorWidget(label, dxn) : null
-	},
-	"synthetic": {
-		block: true,
-		factory: ({ children, range }) => {
-			const text = getXmlTextChild(children ?? []);
-			return text ? new ReasoningWidget(text, range?.from) : null;
-		}
-	},
-	"reasoning": {
-		block: true,
-		streaming: true,
-		factory: ({ children, range }) => {
-			const text = getXmlTextChild(children ?? []);
-			return text ? new ReasoningWidget(text, range?.from) : null;
-		}
-	},
-	"status": {
-		block: true,
-		streaming: true,
-		factory: ({ children }) => {
-			const text = getXmlTextChild(children ?? []);
-			return text ? new StatusWidget(text) : null;
-		}
-	},
-	"reference": {
-		block: false,
-		factory: ({ children, ref }) => {
-			const text = getXmlTextChild(children ?? []);
-			return text && typeof ref === "string" ? new ReferenceWidget(text, ref) : null;
-		}
-	},
-	"suggestion": {
-		block: false,
-		factory: ({ children }) => {
-			const text = getXmlTextChild(children ?? []);
-			return text ? new SuggestionWidget(text) : null;
-		}
-	},
-	"select": {
-		block: true,
-		factory: ({ children }) => {
-			const options = (children ?? []).map((option) => option?._tag === "option" && getXmlTextChild(option.children)).filter(Boolean);
-			return options.length ? new SelectWidget(options) : null;
-		}
-	},
-	"stats": {
-		block: true,
-		factory: ({ children }) => {
-			const text = getXmlTextChild(children ?? []);
-			return text ? new StatsWidget(text) : null;
-		}
-	},
-	"toolkit": {
-		block: true,
-		streaming: true,
-		estimatedHeight: () => COLLAPSED_HEIGHT,
-		heightMode: "min",
-		Component: ToolWidget
-	},
-	"summary": {
-		block: true,
-		estimatedHeight: () => COLLAPSED_HEIGHT,
-		heightMode: "min",
-		Component: SummaryWidget
-	},
-	"surface": {
-		block: true,
-		estimatedHeight: () => COLLAPSED_HEIGHT,
-		heightMode: "min",
-		Component: FallbackWidget
-	},
-	"json": {
-		block: true,
-		estimatedHeight: () => COLLAPSED_HEIGHT,
-		heightMode: "min",
-		Component: FallbackWidget
-	}
-};
-//#endregion
 //#region src/renderer.ts
 /**
 * The assistant's projection of a message: each block flattened to markdown, everything that is not
 * prose emitted as an XML tag for the registry's widgets. The view type is a filter over blocks —
 * the model always carries everything, so switching views is a re-render, not a re-fetch.
 *
-* Consecutive tool blocks (`toolCall`/`toolResult`/`stats`) render as ONE `<toolkit>` tag carrying
-* the run as JSON: the panel widget shows a run of calls as tabs, and the item is rebuilt from its
-* message alone — there is no side channel accumulating widget state (the old `MessageSyncer`
-* machinery this package retires).
+* Consecutive tool blocks (`toolCall`/`toolResult`/`stats`) — along with the `status` and `reasoning`
+* blocks that narrate them — render as ONE `<toolkit>` tag carrying the run as JSON: the panel
+* widget shows a run of calls as tabs, and the item is rebuilt from its message alone — there is no
+* side channel accumulating widget state (the old `MessageSyncer` machinery this package retires).
+*
+* Narration opens a run of its own where no call follows, so a turn the model spends only saying
+* what it is doing reads as one panel rather than a widget per block — and a call arriving later
+* lands in the panel the status already opened instead of displacing it.
 */
 var createRenderer = (viewType, { getObjectLabel = () => "Object" } = {}) => {
 	return (message) => {
 		const blocks = message.blocks.filter((block) => isBlockVisible(viewType, block));
 		const segments = [];
-		let tools = [];
-		const flushTools = () => {
-			if (tools.length) {
-				segments.push(toolkitTag(tools));
-				tools = [];
+		let run = [];
+		let deferred = [];
+		const flushRun = () => {
+			if (run.length) {
+				segments.push(toolkitTag(run, viewType === "debug"));
+				run = [];
+			}
+			if (deferred.length) {
+				segments.push(...deferred);
+				deferred = [];
 			}
 		};
 		for (const block of blocks) {
-			if (block._tag === "toolCall" || block._tag === "toolResult" || block._tag === "stats" && tools.length) {
-				tools.push(block);
+			if (block._tag === "toolCall" || block._tag === "toolResult") {
+				run.push(block);
+				continue;
+			}
+			const recovered = isPrompt(message) ? void 0 : recoveredToolResult(block);
+			if (recovered) {
+				run.push(recovered);
+				continue;
+			}
+			if (block._tag === "status" || block._tag === "reasoning") {
+				if (narrationText(block).length) run.push(block);
+				continue;
+			}
+			if (block._tag === "stats") {
+				const rendered = blockToMarkdown(message, block, getObjectLabel);
+				if (rendered) deferred.push(rendered);
 				continue;
 			}
-			flushTools();
 			const rendered = blockToMarkdown(message, block, getObjectLabel);
-			if (rendered) segments.push(rendered);
+			if (!rendered) continue;
+			flushRun();
+			segments.push(rendered);
 		}
-		flushTools();
+		flushRun();
+		const text = segments.reduce((parts, segment) => {
+			const previous = parts[parts.length - 1];
+			if (previous?.startsWith("<suggestion") && segment.startsWith("<suggestion")) parts[parts.length - 1] = `${previous}${segment}`;
+			else parts.push(segment);
+			return parts;
+		}, []).join("\n\n");
+		const delivery = getDelivery(message);
+		if (delivery) return {
+			kind: "markdown",
+			text: `${text}\n<delivery status="${delivery}" id="${escapeAttribute(message.id)}" />`
+		};
 		return {
 			kind: "markdown",
-			text: segments.reduce((parts, segment) => {
-				const previous = parts[parts.length - 1];
-				if (previous?.startsWith("<suggestion") && segment.startsWith("<suggestion")) parts[parts.length - 1] = `${previous} ${segment}`;
-				else parts.push(segment);
-				return parts;
-			}, []).join("\n\n")
+			text
 		};
 	};
 };
@@ -508,10 +472,9 @@ var isBlockVisible = (viewType, block) => {
 var blockToMarkdown = (message, block, getObjectLabel) => {
 	switch (block._tag) {
 		case "text":
-			if (message.sender.role === "user") return block.disposition === "synthetic" ? void 0 : tag("prompt", block.text, block);
-			return block.text.trim() || void 0;
-		case "reasoning": return tag("reasoning", block.reasoningText ?? block.redactedText ?? "", block);
-		case "status": return tag("status", block.statusText, block);
+			if (block.disposition === "synthetic") return isPrompt(message) ? void 0 : tag("synthetic", block.text, block);
+			if (message.sender.role === "user") return tag("prompt", block.text, block);
+			return linkBareObjectUris(block.text, getObjectLabel).trim() || void 0;
 		case "summary": return tag("summary", block.content, block);
 		case "suggestion": return block.pending ? void 0 : tag("suggestion", block.text, block);
 		case "select": return block.pending || !block.options.length ? void 0 : `<select>${block.options.map((option) => `<option>${escapeXml(option)}</option>`).join("")}</select>`;
@@ -521,13 +484,49 @@ var blockToMarkdown = (message, block, getObjectLabel) => {
 			return `<reference ref="${escapeAttribute(uri.toString())}">${escapeXml(getObjectLabel(uri))}</reference>`;
 		}
 		case "stats": return;
+		case "request": return `<request message="${escapeAttribute(message.id)}">${escapeXml(JSON.stringify(block))}</request>`;
 		case "surface": return block.pending ? void 0 : `<surface role="${escapeAttribute(block.role)}">${escapeXml(JSON.stringify(block.data ?? {}))}</surface>`;
 		default: return tag("json", JSON.stringify(block), block);
 	}
 };
+/** The prose a narration block carries; blank means the widget would render no row for it. */
+/** Tool name of a recovered background result; the widget names it, since the original call is gone. */
+var BACKGROUND_TOOL = "background";
+/** The agent runtime's `<result pid=…>` / `<error pid=…>` prompt for a background tool's outcome. */
+var RECOVERED_RESULT = /^<(result|error) pid=([^>\s]+)>([\s\S]*)<\/\1>$/;
+var recoveredToolResult = (block) => {
+	if (block._tag !== "text" || block.disposition !== "synthetic") return;
+	const match = block.text.trim().match(RECOVERED_RESULT);
+	if (!match) return;
+	const [, kind, pid, body] = match;
+	return {
+		_tag: "toolResult",
+		toolCallId: pid,
+		name: BACKGROUND_TOOL,
+		providerExecuted: false,
+		...kind === "error" ? { error: body } : { result: body }
+	};
+};
+var narrationText = (block) => {
+	switch (block._tag) {
+		case "status": return block.statusText?.trim() ?? "";
+		case "reasoning": return (block.reasoningText ?? block.redactedText ?? "").trim();
+		default: return "";
+	}
+};
 /** A run of tool blocks as one tag; the widget parses the payload back out. */
-var toolkitTag = (blocks) => {
-	return `<toolkit${blocks.some((block) => block.pending) ? " pending=\"true\"" : ""}>${escapeXml(JSON.stringify(blocks))}</toolkit>`;
+/**
+* Debug shows the tag as text, so its JSON is indented, with JSON-string payloads expanded in place;
+* the widget parses either form.
+*/
+var toolkitTag = (blocks, pretty = false) => {
+	const open = `<toolkit${blocks.some((block) => block.pending) ? " pending=\"true\"" : ""}>`;
+	if (pretty) return `\`\`\`json\n${open}\n${JSON.stringify(blocks, expandJsonStrings, 2)}\n</toolkit>\n\`\`\``;
+	return `${open}${escapeXml(JSON.stringify(blocks))}</toolkit>`;
+};
+var expandJsonStrings = (key, value) => {
+	if ((key === "input" || key === "result") && typeof value === "string") return safeParseJson(value) ?? value;
+	return value;
 };
 /**
 * An XML tag holding block content.
@@ -557,7 +556,7 @@ var PANEL_HEIGHT = 50;
 * enough that measuring the row does not move the rows below it.
 */
 var estimateRow = (message) => {
-	let height = ROW_CHROME;
+	let height = getDelivery(message) ? 66 : ROW_CHROME;
 	for (const block of message.blocks) switch (block._tag) {
 		case "text":
 			if (block.disposition === "synthetic") {
@@ -578,6 +577,412 @@ var estimateRow = (message) => {
 	}
 	return height;
 };
+/** Code fences and spans, which a URI rewrite must leave alone. */
+var CODE = /(```[\s\S]*?```|~~~[\s\S]*?~~~|`[^`\n]*`)/g;
+/** A bare object URI in prose, with the `@` the model is told it may prefix an in-text reference with. */
+var BARE_OBJECT_URI = /(^|\s)@?(echo:\/\/[A-Za-z0-9]+(?:\/[A-Za-z0-9]+)?)(?=$|[\s.,;:!?)])/gm;
+/**
+* Bare `echo://…` URIs in the model's prose become the markdown forms the editor renders: one alone
+* on its line is the object shown, so it becomes an embed; one inside a sentence becomes a link.
+* The model writes the bare form at least as readily as either, and unrewritten it is just text.
+*/
+var linkBareObjectUris = (text, getObjectLabel) => text.split(CODE).map((segment, index) => index % 2 === 1 ? segment : segment.replace(BARE_OBJECT_URI, (match, lead, uri, offset, whole) => {
+	const label = getObjectLabel(uri);
+	const lineStart = whole.lastIndexOf("\n", offset) + 1;
+	const lineEnd = whole.indexOf("\n", offset + match.length);
+	return `${lead}${whole.slice(lineStart, lineEnd === -1 ? void 0 : lineEnd).trim() === match.trim() ? "!" : ""}[${label}](${uri})`;
+})).join("");
+//#endregion
+//#region src/widgets/ToolWidget.tsx
+/**
+* A run of tool blocks as one collapsible panel with a row per call. The `<toolkit>` tag carries
+* the run as JSON — the item is rebuilt from its message alone, so there is no widget-state side
+* channel to accumulate blocks through.
+*/
+var ToolWidget = ({ view, children }) => {
+	const blocks = useMemo(() => {
+		const parsed = safeParseJson(getXmlTextChild(children ?? []) ?? "");
+		return Array.isArray(parsed) ? parsed : [];
+	}, [children]);
+	const entries = useMemo(() => toEntries(blocks), [blocks]);
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => view?.requestMeasure());
+		return () => cancelAnimationFrame(frame);
+	}, [view, entries.length]);
+	const handleChangeOpen = useCallback(() => {
+		setTimeout(() => {
+			view?.requestMeasure();
+		}, 1e3);
+	}, [view]);
+	if (!entries.length) return null;
+	return /* @__PURE__ */ jsx(ToolPanel, {
+		entries,
+		onChangeOpen: handleChangeOpen
+	});
+};
+var TOOL_ICON = "ph--wrench--regular";
+var STATUS_ICON = "ph--info--regular";
+var REASONING_ICON = "ph--brain--regular";
+/**
+* The call's display label where its producer supplied one (a code-mode `eval`), else the operation's
+* human-readable name; the raw tool name is the fallback for inline toolkit and MCP tools, which have
+* no operation behind them.
+*/
+var callTitle = (block) => block.displayName ?? block.operationName ?? block.name ?? "Tool";
+/**
+* Groups a run's blocks by row.
+*
+* Calls are keyed on `toolCallId` where the transport supplies one; a result without it answers the
+* most recent unanswered call, which is the order the runtime emits them in.
+*/
+var toEntries = (blocks) => {
+	const entries = [];
+	const indexById = /* @__PURE__ */ new Map();
+	const pending = () => {
+		for (let index = entries.length - 1; index >= 0; index--) if (entries[index].kind === "call" && entries[index].active) return entries[index];
+	};
+	for (const block of blocks) switch (block._tag) {
+		case "toolCall": {
+			const existing = block.toolCallId !== void 0 ? indexById.get(block.toolCallId) : void 0;
+			const entry = {
+				id: block.toolCallId ?? `call-${entries.length}`,
+				kind: "call",
+				active: true,
+				title: callTitle(block),
+				icon: block.displayIcon ?? block.operationIcon ?? TOOL_ICON,
+				input: safeParseJson(block.input) ?? (block.input || void 0)
+			};
+			if (existing !== void 0) entries[existing] = {
+				...entries[existing],
+				...entry
+			};
+			else {
+				if (block.toolCallId !== void 0) indexById.set(block.toolCallId, entries.length);
+				entries.push(entry);
+			}
+			break;
+		}
+		case "toolResult": {
+			let entry;
+			if (block.name === "background") {
+				const id = `background-${block.toolCallId}`;
+				entry = {
+					id,
+					kind: "call",
+					active: false,
+					background: true,
+					title: "",
+					icon: TOOL_ICON
+				};
+				const previous = entries.findIndex((existing) => existing.id === id);
+				if (previous === -1) entries.push(entry);
+				else entries[previous] = entry;
+			} else entry = pending();
+			if (!entry) break;
+			entry.active = false;
+			if (block.error) entry.error = block.error;
+			else entry.result = typeof block.result === "string" ? safeParseJson(block.result) ?? block.result : block.result;
+			break;
+		}
+		case "status": {
+			const text = block.statusText?.trim();
+			if (!text) break;
+			entries.push({
+				id: `status-${entries.length}`,
+				kind: "status",
+				active: block.pending === true,
+				title: text,
+				icon: STATUS_ICON
+			});
+			break;
+		}
+		case "reasoning": {
+			const text = (block.reasoningText ?? block.redactedText ?? "").trim();
+			if (!text) break;
+			entries.push({
+				id: `reasoning-${entries.length}`,
+				kind: "reasoning",
+				active: block.pending === true,
+				title: "",
+				icon: REASONING_ICON,
+				text
+			});
+			break;
+		}
+	}
+	return entries;
+};
+/**
+* The row's own words. Reasoning names the kind instead of its prose: it runs to paragraphs, and a
+* truncated first line reads as a broken title rather than a summary.
+*/
+var entryLabel = (entry, t) => entry.kind === "reasoning" ? t("tool-thinking.label") : entry.background ? t("tool-background.label") : entry.title;
+/** Whether the row carries anything an expansion could show. */
+var hasDetail = (entry) => entry.text !== void 0 || entry.input !== void 0 || entry.error !== void 0 || entry.result !== void 0;
+var ToolPanel = ({ entries, onChangeOpen }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const calls = entries.filter((entry) => entry.kind === "call");
+	const status = entries.filter((entry) => entry.kind === "status").at(-1);
+	const failed = calls.filter((call) => call.error !== void 0).length;
+	const single = entries.length === 1 ? entries[0] : void 0;
+	const singleCall = single?.kind === "call" ? single : void 0;
+	const count = t("tool-run.label", { count: calls.length });
+	const narrating = calls.length === 0 ? status ?? entries[entries.length - 1] : void 0;
+	const reasoning = entries.filter((entry) => entry.kind === "reasoning").at(-1);
+	const running = calls.some((call) => call.active) ? status ?? reasoning : void 0;
+	const header = narrating ? entryLabel(narrating, t) : running ? `${entryLabel(running, t)} · ${t("tool-run-suffix.label", { count: calls.length })}` : singleCall ? entryLabel(singleCall, t) : count;
+	const icon = narrating?.icon ?? running?.icon ?? singleCall?.icon ?? TOOL_ICON;
+	if (single && !hasDetail(single)) return /* @__PURE__ */ jsx(WidgetPanelRow, {
+		icon,
+		label: header,
+		testId: `assistant.tool-${single.kind}`
+	});
+	return /* @__PURE__ */ jsx(WidgetPanel, {
+		icon,
+		label: header,
+		error: single?.error !== void 0,
+		suffix: failed > 0 && /* @__PURE__ */ jsxs("span", {
+			className: "shrink-0 text-error-text",
+			children: ["· ", t("tool-failed.label", { count: failed })]
+		}),
+		testId: singleCall ? "assistant.tool-call" : "assistant.tool-run",
+		onChangeOpen,
+		lazyMount: true,
+		children: single ? /* @__PURE__ */ jsx(ToolCallDetail, {
+			entry: single,
+			classNames: mx$1(PANEL_FRAME, "p-trim-sm")
+		}) : /* @__PURE__ */ jsx(ToolCallList, {
+			entries,
+			onOpen: onChangeOpen
+		})
+	});
+};
+/**
+* The run's rows as an accordion, so each opens onto its own payload and the machine supplies the
+* APG keymap the hand-rolled rows never had.
+*
+* Rows are collapsed by default: one that opened itself would change this item's height, and the
+* feed measures that height as the row mounts.
+*/
+var ToolCallList = ({ entries, onOpen }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const label = (entry) => entryLabel(entry, t);
+	return /* @__PURE__ */ jsx(Accordion.Root, {
+		onValueChange: (value) => onOpen?.(value.length > 0),
+		children: entries.map((entry) => {
+			const detail = hasDetail(entry);
+			return /* @__PURE__ */ jsxs(Accordion.Item, {
+				value: entry.id,
+				disabled: !detail,
+				children: [/* @__PURE__ */ jsx(Accordion.ItemTrigger, {
+					icon: entry.icon,
+					"data-testid": `assistant.tool-${entry.kind}`,
+					classNames: mx$1("text-sm", entry.error !== void 0 && "text-error-text"),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "flex items-center h-(--dx-control-sm) min-w-0",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: label(entry)
+						})
+					})
+				}), detail && /* @__PURE__ */ jsx(Accordion.ItemContent, {
+					classNames: "px-2",
+					children: /* @__PURE__ */ jsx(ToolCallDetail, { entry })
+				})]
+			}, entry.id);
+		})
+	});
+};
+/** What a row carries, in the order it happened. */
+var ToolCallDetail = ({ entry, classNames }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	return /* @__PURE__ */ jsxs("div", {
+		className: mx$1("flex flex-col gap-1 min-w-0", classNames),
+		children: [
+			entry.text !== void 0 && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-fg-muted whitespace-pre-wrap px-1 py-trim-sm",
+				children: entry.text
+			}),
+			entry.input !== void 0 && /* @__PURE__ */ jsx(ToolSection, {
+				label: t("tool-input.label"),
+				data: entry.input
+			}),
+			entry.error !== void 0 && /* @__PURE__ */ jsx(ToolSection, {
+				label: t("tool-error.label"),
+				data: entry.error
+			}),
+			entry.result !== void 0 && /* @__PURE__ */ jsx(ToolSection, {
+				label: t("tool-result.label"),
+				data: entry.result
+			})
+		]
+	});
+};
+/** Longer than this, JSON rendering truncates a string, so a text field is shown as text instead. */
+var MAX_JSON_STRING_LENGTH = 128;
+var ToolSection = ({ label, data }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col",
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-sm text-fg-muted",
+			children: label
+		}), /* @__PURE__ */ jsx(SystemButton.Clipboard, {
+			variant: "ghost",
+			size: "sm",
+			iconOnly: true,
+			classNames: "-me-1",
+			onCopy: () => JSON.stringify(data)
+		})]
+	}), multilineFields(data)?.map(([key, value], _, fields) => /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col",
+		children: [fields.length > 1 && /* @__PURE__ */ jsx("span", {
+			className: "text-xs text-fg-muted",
+			children: key
+		}), /* @__PURE__ */ jsx(SyntaxHighlighter, {
+			language: key === "code" ? "js" : "text",
+			scroll: "horizontal",
+			classNames: "text-xs bg-transparent",
+			children: value
+		})]
+	}, key)) ?? /* @__PURE__ */ jsx(JsonHighlighter, {
+		data,
+		scroll: "horizontal",
+		classNames: "text-xs bg-transparent",
+		replacer: {
+			maxDepth: 3,
+			maxArrayLen: 10,
+			maxStringLen: MAX_JSON_STRING_LENGTH
+		}
+	})]
+});
+/**
+* A string, or the entries of a record whose fields are all strings, when one spans lines or runs
+* long — a code-mode `eval`'s `code` and its printed output. JSON would escape every newline onto
+* one line and cut the string short, so these render as the text they are.
+*/
+var multilineFields = (data) => {
+	if (typeof data === "string") return isMultiline(data) ? [["", data]] : void 0;
+	if (typeof data !== "object" || data === null || Array.isArray(data)) return;
+	const entries = Object.entries(data);
+	const strings = entries.flatMap(([key, value]) => typeof value === "string" ? [[key, value]] : []);
+	return strings.length > 0 && strings.length === entries.length && strings.some(([, value]) => isMultiline(value)) ? strings : void 0;
+};
+var isMultiline = (value) => value.includes("\n") || value.length > MAX_JSON_STRING_LENGTH;
+//#endregion
+//#region src/registry.tsx
+/**
+* Floor for a portaled panel's collapsed height, reserved before its content paints. `heightMode:
+* 'min'` makes it a floor rather than a pin — without it the row is measured at the height of an
+* empty box and grows a frame later, a row moving under a reader scrolling up.
+*/
+var COLLAPSED_HEIGHT = 42;
+/** An `<option>` child of a `<select>` tag, as the XML parser emits it. */
+var isOption = (node) => typeof node === "object" && node !== null && "_tag" in node && node._tag === "option";
+/**
+* Widgets for the tags {@link createRenderer} emits.
+*
+* Host-extensible by spreading: the plugin adds its `surface` widget (which renders an
+* app-framework Surface this package must not depend on) over the fallback registered here.
+* DOM widgets render synchronously from the tag alone; React widgets are portaled and declare a
+* collapsed-height floor so the row's first measurement is honest.
+*/
+var assistantRegistry = {
+	prompt: { block: true },
+	reasoning: {
+		block: true,
+		streaming: true,
+		factory: ({ children, range }) => {
+			const text = getXmlInnerText(children ?? []);
+			return text ? new ReasoningWidget(text, range?.from) : null;
+		}
+	},
+	status: {
+		block: true,
+		streaming: true,
+		factory: ({ children }) => {
+			const text = getXmlTextChild(children ?? []);
+			return text ? new StatusWidget(text) : null;
+		}
+	},
+	reference: {
+		block: false,
+		factory: ({ children, ref }) => {
+			const text = getXmlTextChild(children ?? []);
+			return text && typeof ref === "string" ? new ReferenceWidget(text, ref) : null;
+		}
+	},
+	suggestion: {
+		block: false,
+		factory: ({ children }) => {
+			const text = getXmlTextChild(children ?? []);
+			return text ? new SuggestionWidget(text) : null;
+		}
+	},
+	select: {
+		block: true,
+		factory: ({ children }) => {
+			const options = (children ?? []).flatMap((option) => {
+				const text = isOption(option) ? getXmlTextChild(option.children) : null;
+				return text ? [text] : [];
+			});
+			return options.length ? new SelectWidget(options) : null;
+		}
+	},
+	stats: {
+		block: true,
+		factory: ({ children }) => {
+			const text = getXmlTextChild(children ?? []);
+			return text ? new StatsWidget(text) : null;
+		}
+	},
+	toolkit: {
+		block: true,
+		streaming: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: ToolWidget
+	},
+	synthetic: {
+		block: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: SyntheticWidget
+	},
+	summary: {
+		block: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: SummaryWidget
+	},
+	request: {
+		block: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: RequestWidget
+	},
+	surface: {
+		block: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: FallbackWidget
+	},
+	json: {
+		block: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: FallbackWidget
+	}
+};
+var isDeliveryStatus = Schema.is(DeliveryStatus);
+/**
+* The delivery ticks under a prompt still on its way to the agent. Not in {@link assistantRegistry}
+* because its labels are the reader's language, which only a rendered thread has.
+*/
+var createDeliveryWidget = (labels) => ({
+	block: true,
+	factory: ({ status, id }) => isDeliveryStatus(status) && typeof id === "string" ? new DeliveryWidget(status, id, labels) : null
+});
 //#endregion
 //#region src/components/MessageChrome/format-time.ts
 /**
@@ -587,6 +992,8 @@ var estimateRow = (message) => {
 * Recent prompts are the ones a reader places by elapsed time; older ones by date.
 */
 var DAY_MS = 864e5;
+var relativeFormatter;
+var relativeFormat = () => relativeFormatter ??= new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
 /**
 * Relative time for the message toolbars: `justNow` (caller-translated) under a minute, relative
 * ("5 min ago", "yesterday") within two days, an absolute date beyond that. `now` defaults to the
@@ -600,7 +1007,7 @@ var formatTime = (created, { now = Date.now(), justNow } = {}) => {
 		month: "short",
 		day: "numeric"
 	});
-	const format = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+	const format = relativeFormat();
 	if (elapsed < 6e4) {
 		if (justNow) return justNow;
 		return format.format(-Math.max(1, Math.round(elapsed / 1e3)), "second");
@@ -614,34 +1021,43 @@ var formatTime = (created, { now = Date.now(), justNow } = {}) => {
 //#endregion
 //#region src/components/MessageChrome/MessageChrome.tsx
 var MESSAGE_CHROME_NAME = "MessageChrome";
-var [MessageChromeProvider, useMessageChromeContext] = createContext(MESSAGE_CHROME_NAME, {});
+var [MessageChromeProvider, useMessageChromeContext] = Hooks.createContext(MESSAGE_CHROME_NAME, {});
 /** Copies the message's extracted text — the model's truth, not the DOM's partial render. */
 var CopyButton = ({ message }) => {
-	const { t } = useTranslation(translationKey);
-	return /* @__PURE__ */ jsx(IconButton, {
-		icon: "ph--copy--regular",
+	const { t } = Hooks.useTranslation(translationKey);
+	return /* @__PURE__ */ jsx(SystemButton.Clipboard, {
 		iconOnly: true,
 		label: t("copy.label"),
 		variant: "ghost",
-		density: "sm",
-		onClick: () => void navigator.clipboard?.writeText(Message.extractText(message))
+		size: "sm",
+		onCopy: () => Message.extractText(message)
 	});
 };
 var MessageId = ({ message }) => {
 	const { debug } = useMessageChromeContext("MessageId");
 	if (!debug) return null;
 	return /* @__PURE__ */ jsx("span", {
-		className: "font-mono text-subdued",
+		className: "font-mono text-fg-subtle",
 		title: message.id,
 		children: message.id.slice(-8)
 	});
 };
+/** How often a relative time is re-read; the coarsest label it shows changes by the minute. */
+var TIME_REFRESH_MS = 3e4;
 var Time = ({ message }) => {
-	const { t } = useTranslation(translationKey);
+	const { t } = Hooks.useTranslation(translationKey);
+	const [now, setNow] = useState(Date.now);
+	useEffect(() => {
+		const interval = setInterval(() => setNow(Date.now()), TIME_REFRESH_MS);
+		return () => clearInterval(interval);
+	}, []);
 	return /* @__PURE__ */ jsx("time", {
 		dateTime: message.created,
 		title: new Date(message.created).toLocaleString(),
-		children: formatTime(message.created, { justNow: t("just-now.label") })
+		children: formatTime(message.created, {
+			now,
+			justNow: t("just-now.label")
+		})
 	});
 };
 /**
@@ -650,20 +1066,20 @@ var Time = ({ message }) => {
 * disappears changes the row's height, and a pointer travelling down a scrolling list would then
 * move every row below it.
 */
-var PromptToolbar = ({ classNames, message }) => {
-	const { t } = useTranslation(translationKey);
+var PromptToolbar = memo(({ classNames, message }) => {
+	const { t } = Hooks.useTranslation(translationKey);
 	const { onRewind } = useMessageChromeContext("PromptToolbar");
 	return /* @__PURE__ */ jsxs("div", {
 		role: "toolbar",
-		className: mx$1("flex items-center gap-1 text-xs text-description", classNames),
+		className: mx$1("flex items-center gap-1 text-xs text-fg-muted", classNames),
 		children: [
 			/* @__PURE__ */ jsx(CopyButton, { message }),
-			onRewind && /* @__PURE__ */ jsx(IconButton, {
+			onRewind && !isUnread(getDelivery(message)) && /* @__PURE__ */ jsx(Button.Root, {
 				icon: "ph--clock-counter-clockwise--regular",
 				iconOnly: true,
 				label: t("rewind.label"),
 				variant: "ghost",
-				density: "sm",
+				size: "sm",
 				"data-testid": "chat.rewind",
 				onClick: () => onRewind(message.id)
 			}),
@@ -671,28 +1087,56 @@ var PromptToolbar = ({ classNames, message }) => {
 			/* @__PURE__ */ jsx(MessageId, { message })
 		]
 	});
-};
+});
 PromptToolbar.displayName = "PromptToolbar";
 /** The controls under an answer: copy, and when the answer finished. */
-var AssistantToolbar = ({ classNames, message }) => {
+var AssistantToolbar = memo(({ classNames, message }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		role: "toolbar",
-		className: mx$1("flex items-center gap-1 text-xs text-description", classNames),
+		className: mx$1("flex items-center gap-1 text-xs text-fg-muted", classNames),
 		children: [
 			/* @__PURE__ */ jsx(CopyButton, { message }),
 			/* @__PURE__ */ jsx(Time, { message }),
-			/* @__PURE__ */ jsx(MessageId, { message })
+			/* @__PURE__ */ jsx(MessageId, { message }),
+			/* @__PURE__ */ jsx(Stats, {
+				message,
+				classNames: "ms-auto"
+			})
 		]
 	});
-};
+});
 AssistantToolbar.displayName = "AssistantToolbar";
+/** Thousands abbreviated to one decimal, so the count stays one glance wide as a turn grows. */
+var formatTokens = (tokens) => tokens >= 1e3 ? `${(tokens / 1e3).toFixed(1)}k` : String(tokens);
+/**
+* What the turn cost, beside what it produced — the toolbar is where a reader looks for a message's
+* metadata, and a widget of its own would take a row of the thread to say one line.
+*/
+var Stats = ({ classNames, message }) => {
+	const stats = message.blocks.find((block) => block._tag === "stats");
+	const tokens = stats?.usage?.totalTokens;
+	const duration = stats?.duration;
+	if (tokens === void 0 && duration === void 0) return null;
+	return /* @__PURE__ */ jsxs("span", {
+		className: mx$1("flex items-center gap-1 tabular-nums", classNames),
+		children: [
+			tokens !== void 0 && /* @__PURE__ */ jsxs("span", { children: [formatTokens(tokens), " tokens"] }),
+			tokens !== void 0 && duration !== void 0 && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				children: "·"
+			}),
+			duration !== void 0 && /* @__PURE__ */ jsxs("span", { children: [(duration / 1e3).toFixed(1), "s"] })
+		]
+	});
+};
+Stats.displayName = "Stats";
 /**
 * Synthetic context riding on a prompt (a document selection, an encoded event): system-generated
 * input, so it renders as its own dimmed panel above the bubble — the bubble frames only the
 * reader's words.
 */
 var SyntheticContext = ({ message }) => {
-	const { t } = useTranslation(translationKey);
+	const { t } = Hooks.useTranslation(translationKey);
 	const { showContext = true } = useMessageChromeContext("SyntheticContext");
 	const context = message.blocks.filter((block) => block._tag === "text" && block.disposition === "synthetic").map((block) => block.text).join("\n\n");
 	if (!showContext || !context.length) return null;
@@ -700,32 +1144,45 @@ var SyntheticContext = ({ message }) => {
 		className: "pb-1 opacity-60",
 		"data-testid": "chat.context",
 		children: /* @__PURE__ */ jsx(TogglePanel.Root, { children: /* @__PURE__ */ jsxs(TogglePanel.Content, {
-			classNames: "border border-subdued-separator rounded-sm",
+			classNames: "border border-separator-subtle rounded-sm",
 			children: [/* @__PURE__ */ jsxs(TogglePanel.Header, {
 				classNames: "flex items-center gap-2 px-2 py-1 text-sm",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "grow text-description truncate",
+					className: "grow text-fg-muted truncate",
 					children: t("context.label")
-				}), /* @__PURE__ */ jsx(Icon, {
+				}), /* @__PURE__ */ jsx(Icon.Icon, {
 					icon: "ph--brain--regular",
-					size: 4,
-					classNames: "text-description"
+					size: "md",
+					tone: "muted"
 				})]
 			}), /* @__PURE__ */ jsx(TogglePanel.Body, { children: /* @__PURE__ */ jsx(TogglePanel.Viewport, {
-				classNames: "px-2 pb-1 max-h-40 overflow-y-auto text-sm text-description whitespace-pre-wrap",
+				classNames: "px-2 pb-1 max-h-40 overflow-y-auto text-sm text-fg-muted whitespace-pre-wrap",
 				children: context
 			}) })]
 		}) })
 	});
 };
-/** Shared hover reveal: present in flow at all times, visible when the row is under the pointer. */
-var reveal = "pt-1 opacity-0 transition-opacity";
-var revealOnHover = "group-hover/message:opacity-100";
-var Row = ({ children, classNames }) => /* @__PURE__ */ jsx("div", {
-	className: mx$1("group/message relative px-2 py-2", classNames),
+/**
+* Shared hover reveal: present in flow at all times, visible when the row is under the pointer.
+*
+* A named group: the bare `group` variant matches ANY ancestor carrying `group`, and the app's
+* planks do — every toolbar lit up when the pointer was anywhere in the deck. Streaming hides it
+* from the row's attribute rather than the toolbar's props, so the memoized toolbars do not
+* re-render on every row each time a turn starts or ends.
+*/
+var reveal = "pt-1 opacity-0 transition-opacity group-hover/message:opacity-100 group-data-[streaming]/message:invisible";
+var Row = ({ children, classNames, streaming }) => /* @__PURE__ */ jsx("div", {
+	className: mx$1("group/message relative -mx-2 px-2 py-2 rounded-md", classNames),
+	"data-streaming": streaming || void 0,
 	"data-testid": "feed.message",
 	children
 });
+var promptReveal = mx$1("justify-end", reveal);
+/**
+* Whether an answer row carries the toolbar: only when it has prose to copy or stats to show. A row
+* of machinery alone (a synthetic prompt, a tool run) would otherwise reserve a blank toolbar line.
+*/
+var hasToolbar = (message) => message.blocks.some((block) => block._tag === "stats" || block._tag === "text" && block.disposition !== "synthetic" && !!block.text.trim());
 /**
 * The assistant feed's per-message frame: the reader's prompts and the model's answers are framed
 * differently because they are different kinds of thing — a prompt is an instruction the thread
@@ -736,10 +1193,11 @@ var Row = ({ children, classNames }) => /* @__PURE__ */ jsx("div", {
 * bubble's edge.
 */
 var MessageChrome = ({ message, selected, children }) => {
-	const { streaming } = useMessageChromeContext(MESSAGE_CHROME_NAME);
+	const { streaming, userHue } = useMessageChromeContext(MESSAGE_CHROME_NAME);
 	const prompt = isPrompt(message);
 	return /* @__PURE__ */ jsx(Row, {
 		classNames: mx$1(selected && "bg-hover-surface"),
+		streaming,
 		children: prompt ? /* @__PURE__ */ jsx("div", {
 			className: "min-w-0 flex flex-col items-end",
 			children: /* @__PURE__ */ jsxs("div", {
@@ -747,19 +1205,19 @@ var MessageChrome = ({ message, selected, children }) => {
 				children: [
 					/* @__PURE__ */ jsx(SyntheticContext, { message }),
 					/* @__PURE__ */ jsx("div", {
-						className: "px-3 py-2 border-s-2 border-accent-bg rounded-sm bg-input-surface",
+						className: mx$1("w-fit max-w-full ms-auto px-3 py-2 border-s-2 rounded-sm bg-input-surface", userHue ? getStyles(userHue).border : "border-accent-bg"),
 						children
 					}),
 					/* @__PURE__ */ jsx(PromptToolbar, {
-						classNames: mx$1("justify-end", reveal, !streaming && revealOnHover),
+						classNames: promptReveal,
 						message
 					})
 				]
 			})
 		}) : /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0",
-			children: [children, /* @__PURE__ */ jsx(AssistantToolbar, {
-				classNames: mx$1(reveal, !streaming && revealOnHover),
+			children: [children, hasToolbar(message) && /* @__PURE__ */ jsx(AssistantToolbar, {
+				classNames: reveal,
 				message
 			})]
 		})
@@ -768,19 +1226,34 @@ var MessageChrome = ({ message, selected, children }) => {
 MessageChrome.displayName = MESSAGE_CHROME_NAME;
 //#endregion
 //#region src/components/ChatThread/ChatThread.tsx
-var [ChatThreadProvider, useChatThreadContext] = createContext("ChatThread");
+var [ChatThreadProvider, useChatThreadContext] = Hooks.createContext("ChatThread");
 /**
 * Headless root: the feed's `MessageList.Root` configured as an assistant thread — the view-typed
 * renderer, the widget registry, the prompt/answer chrome, and the chat behaviours (follow the
 * streaming tail; reserve room to bring the last prompt to the top). Composes with the feed's own
 * parts: `MessageList.Nav`, `useMessageList`, and the rails all work inside it.
 */
-var ChatThreadRoot = ({ children, model, viewType, registry, getObjectLabel, userHue, tailLines, debug, onEvent, onRangeChange, controllerRef }) => {
+/** Debug's registry: identity-stable, since the feed caches its extensions per registry. */
+var DEBUG_REGISTRY = {};
+var ChatThreadRoot = ({ children, model, viewType, registry, objectImage, getObjectLabel, userHue, tailLines, debug, rewind = true, onEvent, onRangeChange, controllerRef }) => {
+	const { t } = Hooks.useTranslation(translationKey);
 	const renderer = useMemo(() => createRenderer(viewType, { getObjectLabel }), [viewType, getObjectLabel]);
-	const merged = useMemo(() => viewType === "debug" ? void 0 : registry ? {
+	const delivery = useMemo(() => createDeliveryWidget({
+		sent: t("delivery-sent.label"),
+		delivered: t("delivery-delivered.label"),
+		read: t("delivery-read.label"),
+		failed: t("delivery-failed.label"),
+		remove: t("delivery-remove.label")
+	}), [t]);
+	const merged = useMemo(() => viewType === "debug" ? DEBUG_REGISTRY : {
 		...assistantRegistry,
+		delivery,
 		...registry
-	} : assistantRegistry, [registry, viewType]);
+	}, [
+		registry,
+		viewType,
+		delivery
+	]);
 	const handleRewind = useCallback((id) => onEvent?.({
 		type: "rewind",
 		id
@@ -792,16 +1265,19 @@ var ChatThreadRoot = ({ children, model, viewType, registry, getObjectLabel, use
 	}, [model]);
 	return /* @__PURE__ */ jsx(ChatThreadProvider, {
 		userHue,
+		viewType,
 		onEvent,
 		children: /* @__PURE__ */ jsx(MessageChromeProvider, {
-			onRewind: onEvent ? handleRewind : void 0,
+			onRewind: onEvent && rewind ? handleRewind : void 0,
 			streaming,
 			showContext: viewType !== "summary",
 			debug,
+			userHue,
 			children: /* @__PURE__ */ jsx(MessageList.Root, {
 				model,
 				renderer,
 				registry: merged,
+				objectImage,
 				Chrome: MessageChrome,
 				estimateSize: estimateRow,
 				debug,
@@ -821,16 +1297,32 @@ var CHAT_THREAD_VIEWPORT_NAME = "ChatThread.Viewport";
 * `data-action="submit"` buttons; one delegated listener here turns those clicks into `submit`
 * events, which is what keeps the widgets renderable from the tag alone.
 */
-var ChatThreadViewport = ({ children, classNames, ...props }) => {
-	const { userHue, onEvent } = useChatThreadContext(CHAT_THREAD_VIEWPORT_NAME);
+var ChatThreadViewport = ({ children, classNames, overlay, ...props }) => {
+	const { userHue, viewType, onEvent } = useChatThreadContext(CHAT_THREAD_VIEWPORT_NAME);
 	const handleClick = useCallback((event) => {
-		const text = event.target.closest("[data-action=\"submit\"]")?.getAttribute("data-value");
-		if (text) {
+		const target = event.target;
+		if (!(target instanceof Element)) return;
+		const action = target.closest("[data-action]");
+		const value = action?.getAttribute("data-value");
+		const threadEvent = value ? toThreadEvent(action?.getAttribute("data-action"), value) : void 0;
+		if (threadEvent) {
+			event.preventDefault();
+			event.stopPropagation();
+			onEvent?.(threadEvent);
+			return;
+		}
+		const response = target.closest("[data-action=\"respond\"]");
+		const messageId = response?.getAttribute("data-message");
+		const requestId = response?.getAttribute("data-request");
+		const optionId = response?.getAttribute("data-option");
+		if (messageId && requestId && optionId) {
 			event.preventDefault();
 			event.stopPropagation();
 			onEvent?.({
-				type: "submit",
-				text
+				type: "respond",
+				messageId,
+				requestId,
+				optionId
 			});
 		}
 	}, [onEvent]);
@@ -841,17 +1333,63 @@ var ChatThreadViewport = ({ children, classNames, ...props }) => {
 		onClickCapture: handleClick,
 		children: /* @__PURE__ */ jsx(MessageList.Viewport, {
 			...props,
-			classNames: ["grow min-h-0", classNames],
+			classNames: [
+				"dx-grow",
+				viewType === "debug" && "[&_.cm-codeblock-line]:text-sm [&_.cm-xml-tag]:text-sm",
+				classNames
+			],
+			overlay: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ScrollToBottom, {}), overlay] }),
 			children
 		})
 	});
 };
 ChatThreadViewport.displayName = CHAT_THREAD_VIEWPORT_NAME;
+/** A widget's `data-action` button as the event it stands for; the value is the text or the message id. */
+var toThreadEvent = (action, value) => {
+	switch (action) {
+		case "submit": return {
+			type: "submit",
+			text: value
+		};
+		case "remove": return {
+			type: "remove-prompt",
+			id: value
+		};
+		default: return;
+	}
+};
+var CHAT_THREAD_SCROLL_TO_BOTTOM_NAME = "ChatThread.ScrollToBottom";
+/**
+* Returns the reader to the tail, and re-arms the follow with it (`scrollToBottom` does both).
+*
+* Hidden by opacity rather than unmounted, because a control leaving the layout would move the
+* scroller's own box — which the placement measures; `disabled` and `aria-hidden` then keep the
+* invisible button out of the focus order and off the accessibility tree.
+*/
+var ScrollToBottom = () => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const { atEnd, following, scrollToBottom } = useMessageList(CHAT_THREAD_SCROLL_TO_BOTTOM_NAME);
+	const hidden = atEnd || following;
+	return /* @__PURE__ */ jsx(Button.Root, {
+		variant: "primary",
+		icon: "ph--arrow-line-down--regular",
+		iconOnly: true,
+		size: "lg",
+		label: t("scroll-to-bottom.label"),
+		disabled: hidden,
+		"aria-hidden": hidden,
+		classNames: ["absolute bottom-2 left-1/2 -translate-x-1/2 z-10 transition-opacity duration-300", hidden && "opacity-0 pointer-events-none"],
+		"data-testid": "assistant.thread.scroll-to-bottom",
+		onClick: () => scrollToBottom({ behavior: "smooth" })
+	});
+};
+ScrollToBottom.displayName = CHAT_THREAD_SCROLL_TO_BOTTOM_NAME;
 var ChatThread = {
 	Root: ChatThreadRoot,
-	Viewport: ChatThreadViewport
+	Viewport: ChatThreadViewport,
+	ScrollToBottom
 };
 //#endregion
-export { AssistantToolbar, ChatThread, ChatView, MessageChrome, MessageChromeProvider, PromptToolbar, assistantRegistry, createRenderer, estimateRow, translationKey, translations };
+export { AssistantToolbar, BACKGROUND_TOOL, ChatThread, ChatView, DeliveryAnnotation, DeliveryStatus, MessageChrome, MessageChromeProvider, PromptToolbar, assistantRegistry, createDeliveryWidget, createRenderer, estimateRow, getDelivery, isUnread, linkBareObjectUris, translationKey, translations };
 
 //# sourceMappingURL=index.mjs.map