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

package/dist/lib/index.mjs

@@ -1,43 +1,19 @@
+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 { Icon, IconBlock, IconButton, setRef, useTranslation } from "@dxos/react-ui";
-import { MessageList, useMessageList } from "@dxos/react-ui-feed";
+import { MessageList, isPrompt } from "@dxos/react-ui-feed";
 import { AnchorWidget, getXmlTextChild } from "@dxos/ui-editor";
-import { NumericTabs, TextCrawl, TogglePanel } from "@dxos/react-ui-components";
+import { NumericTabs, TogglePanel } from "@dxos/react-ui-components";
 import { JsonHighlighter } from "@dxos/react-ui-syntax-highlighter";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { WidgetType } from "@codemirror/view";
 import { Domino, mx } from "@dxos/ui";
-import { isNonNullable, safeParseJson } from "@dxos/util";
+import { Icon, IconBlock, IconButton, TextCrawl, useTranslation } from "@dxos/react-ui";
+import { safeParseJson } from "@dxos/util";
 import { Message } from "@dxos/types";
 import { mx as mx$1 } from "@dxos/ui-theme";
-import * as Schema from "effect/Schema";
-//#region src/components/widgets/format-time.ts
-/**
-* Relative ("5 min ago", "yesterday") within two days, absolute date beyond that. The exact
-* timestamp is always available via the `title` tooltip.
-*
-* Recent prompts are the ones a reader places by elapsed time; older ones by date.
-*/
-var DAY_MS = 864e5;
-var formatTime = (created, now = Date.now()) => {
-	const date = new Date(created);
-	if (Number.isNaN(date.getTime())) return "";
-	const elapsed = now - date.getTime();
-	if (elapsed < 0 || elapsed >= 2 * DAY_MS) return date.toLocaleDateString(void 0, {
-		month: "short",
-		day: "numeric"
-	});
-	const format = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
-	const minutes = Math.round(elapsed / 6e4);
-	if (minutes < 1) return format.format(-Math.max(1, Math.round(elapsed / 1e3)), "second");
-	if (minutes < 60) return format.format(-minutes, "minute");
-	const hours = Math.round(minutes / 60);
-	if (hours < 24) return format.format(-hours, "hour");
-	return format.format(-Math.round(hours / 24), "day");
-};
-//#endregion
-//#region src/components/widgets/FallbackWidget.tsx
+//#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",
@@ -52,19 +28,7 @@ var FallbackWidget = ({ _tag, ...props }) => {
 };
 FallbackWidget.displayName = "Fallback";
 //#endregion
-//#region src/components/widgets/defaults.ts
-var styles = {
-	/**
-	* Vertical rhythm for block widgets. Padding, never margin: CodeMirror measures a widget from its own
-	* box, so a margin sits outside what it can see and its height model drifts from what is rendered —
-	* the error accumulates down the document until the turn-fold gutter markers are visibly misaligned.
-	* Note padding does not collapse between adjacent siblings the way margins do
-	*/
-	padding: "pt-2 pb-4",
-	border: "border border-subdued-separator rounded-sm"
-};
-//#endregion
-//#region src/components/widgets/ReasoningWidget.ts
+//#region src/widgets/ReasoningWidget.ts
 /**
 * AI reasoning widget.
 */
@@ -82,7 +46,7 @@ var ReasoningWidget = class extends WidgetType {
 		return this.text === other.text && this.#pos === other.#pos;
 	}
 	toDOM() {
-		return Domino.of("div").classNames(styles.padding).append(Domino.of("div").classNames("relative overflow-hidden p-px", styles.border).attributes({ "data-trail-container": "" }).append(Domino.of("div").classNames("relative z-10 dx-base-surface rounded-sm 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-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;
 	}
 	updateDOM(dom) {
 		dom.querySelector("[data-reasoning-text]")?.replaceChildren(this.text);
@@ -134,7 +98,7 @@ var TRAIL_REMOVAL_DELAY_MS = 1e3;
 var trailRemovalTimers = /* @__PURE__ */ new Map();
 var createTrailLayers = () => [Domino.of("div").classNames(...trail, "animate-trail").root, Domino.of("div").classNames(...trail, "animate-trail-offset").root];
 //#endregion
-//#region src/components/widgets/ReferenceWidget.ts
+//#region src/widgets/ReferenceWidget.ts
 var ReferenceWidget = class extends WidgetType {
 	text;
 	dxn;
@@ -147,11 +111,11 @@ var ReferenceWidget = class extends WidgetType {
 		return this.dxn === other.dxn;
 	}
 	toDOM() {
-		return Domino.of("div").classNames(styles.padding).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({ dxn: this.dxn }).text(this.text)).root;
 	}
 };
 //#endregion
-//#region src/components/widgets/SelectWidget.ts
+//#region src/widgets/SelectWidget.ts
 /**
 * Simple prompt widget.
 */
@@ -168,7 +132,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(styles.padding, "flex flex-wrap gap-1").append(...this.options.map((option) => Domino.of("button").classNames("dx-button inline-block max-w-[100cqi]").attributes({
+		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"
@@ -176,7 +140,7 @@ var SelectWidget = class extends WidgetType {
 	}
 };
 //#endregion
-//#region src/components/widgets/StatsWidget.ts
+//#region src/widgets/StatsWidget.ts
 /**
 * Simple stats widget.
 */
@@ -190,7 +154,7 @@ var StatsWidget = class extends WidgetType {
 		return this.text === other.text;
 	}
 	toDOM() {
-		return Domino.of("div").classNames(styles.padding, "text-sm text-placeholder").text(this.text).root;
+		return Domino.of("div").classNames("text-sm text-placeholder").text(this.text).root;
 	}
 	updateDOM(dom) {
 		dom.textContent = this.text;
@@ -198,7 +162,7 @@ var StatsWidget = class extends WidgetType {
 	}
 };
 //#endregion
-//#region src/components/widgets/StatusWidget.ts
+//#region src/widgets/StatusWidget.ts
 /**
 * AI status widget.
 */
@@ -212,7 +176,7 @@ var StatusWidget = class extends WidgetType {
 		return this.text === other.text;
 	}
 	toDOM() {
-		return Domino.of("div").classNames(styles.padding).append(Domino.of("div").classNames("relative overflow-hidden rounded-sm").append(Domino.of("div").classNames("grid grid-cols-[24px_1fr] gap-x-0.5 gap-y-0 items-start px-0.5 py-0.5 text-placeholder").append(Domino.of("div").classNames("flex h-5 w-full shrink-0 items-center justify-center self-start").append(Domino.svg("ph--info--regular").classNames("shrink-0 size-4 opacity-70")), Domino.of("div").classNames("relative min-w-0").append(Domino.of("div").classNames("relative z-10 rounded-sm text-sm leading-5").attributes({ "data-status-text": "" }).text(this.text))))).root;
+		return Domino.of("div").append(Domino.of("div").classNames("relative overflow-hidden rounded-md").append(Domino.of("div").classNames("grid grid-cols-[24px_1fr] gap-x-0.5 gap-y-0 items-start px-0.5 py-0.5 text-placeholder").append(Domino.of("div").classNames("flex h-5 w-full shrink-0 items-center justify-center self-start").append(Domino.svg("ph--info--regular").classNames("shrink-0 size-4 opacity-70")), Domino.of("div").classNames("relative min-w-0").append(Domino.of("div").classNames("relative z-10 rounded-md text-sm leading-5").attributes({ "data-status-text": "" }).text(this.text))))).root;
 	}
 	updateDOM(dom) {
 		dom.querySelector("[data-status-text]")?.replaceChildren(this.text);
@@ -220,7 +184,7 @@ var StatusWidget = class extends WidgetType {
 	}
 };
 //#endregion
-//#region src/components/widgets/SuggestionWidget.ts
+//#region src/widgets/SuggestionWidget.ts
 /**
 * Simple prompt widget.
 */
@@ -234,7 +198,7 @@ var SuggestionWidget = class extends WidgetType {
 		return this.text === other.text;
 	}
 	toDOM() {
-		return Domino.of("span").classNames(mx("inline-flex max-w-[calc(100cqi-8px)] py-1 pe-1 overflow-hidden")).append(Domino.of("button").attributes({
+		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
@@ -242,27 +206,11 @@ var SuggestionWidget = class extends WidgetType {
 	}
 };
 //#endregion
-//#region src/translations.ts
-var translationKey = "@dxos/react-ui-assistant";
-var translations = [{ "en-US": { [translationKey]: {
-	"copy.label": "Copy",
-	"rewind.label": "Rewind to this prompt",
-	"summary.label": "Summary",
-	"stats.label": "Stats",
-	"tool-call.label": "Calling",
-	"tool-result.label": "Result",
-	"tool-error.label": "Tool error",
-	"nav-first.label": "First message",
-	"nav-previous.label": "Previous message",
-	"nav-next.label": "Next message",
-	"nav-last.label": "Last message"
-} } }];
-//#endregion
-//#region src/components/widgets/SummaryWidget.tsx
+//#region src/widgets/SummaryWidget.tsx
 var SummaryWidget = ({ children }) => {
 	const { t } = useTranslation(translationKey);
 	return /* @__PURE__ */ jsx(TogglePanel.Root, { children: /* @__PURE__ */ jsxs(TogglePanel.Content, {
-		classNames: styles.border,
+		classNames: "border border-subdued-separator rounded-md",
 		children: [/* @__PURE__ */ jsx(TogglePanel.Header, {
 			classNames: "text-sm dx-group-surface",
 			children: t("summary.label")
@@ -273,7 +221,7 @@ var SummaryWidget = ({ children }) => {
 	}) });
 };
 //#endregion
-//#region src/components/widgets/ToolWidget.tsx
+//#region src/widgets/ToolWidget.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
@@ -288,51 +236,58 @@ var ToolWidget = ({ view, children }) => {
 	const items = useMemo(() => {
 		let lastToolCall;
 		const tools = [];
-		return blocks.filter((block) => block._tag === "toolCall" || block._tag === "toolResult" || block._tag === "stats").map((block) => {
-			switch (block._tag) {
-				case "toolCall": {
-					if (block.pending && lastToolCall?.block.toolCallId === block.toolCallId) return null;
-					const tool = tools.find((tool) => tool.name === block.name);
-					lastToolCall = {
-						tool,
-						block
-					};
-					return {
-						title: tool?.description ?? [t("tool-call.label"), block.name].filter(Boolean).join(" "),
-						icon: block.operationIcon,
-						content: {
-							...block,
-							input: safeParseJson(block.input)
-						}
-					};
-				}
-				case "toolResult": {
-					if (block.error) return {
+		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
-					};
-					const title = lastToolCall?.tool?.description ?? [t("tool-result.label"), lastToolCall?.block.name].filter(Boolean).join(" ");
-					const icon = lastToolCall?.block.operationIcon;
-					lastToolCall = void 0;
-					return {
-						title,
-						icon,
-						content: {
-							...block,
-							result: typeof block.result === "string" ? safeParseJson(block.result) : block.result
-						}
-					};
+						content: block.error
+					});
+					break;
 				}
-				case "stats":
-					if (!lastToolCall) return null;
-					return {
-						title: t("stats.label"),
-						icon: lastToolCall.block.operationIcon,
-						content: block
-					};
+				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;
 			}
-		}).filter(isNonNullable);
+			case "stats":
+				if (!lastToolCall) break;
+				push(void 0, {
+					title: t("stats.label"),
+					icon: lastToolCall.block.operationIcon,
+					content: block
+				});
+		}
+		return items;
 	}, [blocks, t]);
 	const handleChangeOpen = useCallback(() => {
 		setTimeout(() => {
@@ -553,7 +508,7 @@ var isBlockVisible = (viewType, block) => {
 var blockToMarkdown = (message, block, getObjectLabel) => {
 	switch (block._tag) {
 		case "text":
-			if (message.sender.role === "user") return block.disposition === "synthetic" ? tag("synthetic", block.text, block) : tag("prompt", block.text, block);
+			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);
@@ -605,6 +560,10 @@ var estimateRow = (message) => {
 	let height = ROW_CHROME;
 	for (const block of message.blocks) switch (block._tag) {
 		case "text":
+			if (block.disposition === "synthetic") {
+				height += PANEL_HEIGHT;
+				break;
+			}
 			for (const paragraph of block.text.split("\n\n")) height += Math.max(1, Math.ceil(paragraph.length / LINE_CHARS)) * LINE_HEIGHT;
 			break;
 		case "suggestion":
@@ -620,9 +579,42 @@ var estimateRow = (message) => {
 	return height;
 };
 //#endregion
+//#region src/components/MessageChrome/format-time.ts
+/**
+* Relative ("5 min ago", "yesterday") within two days, absolute date beyond that. The exact
+* timestamp is always available via the `title` tooltip.
+*
+* Recent prompts are the ones a reader places by elapsed time; older ones by date.
+*/
+var DAY_MS = 864e5;
+/**
+* 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
+* wall clock; an invalid timestamp renders as the empty string.
+*/
+var formatTime = (created, { now = Date.now(), justNow } = {}) => {
+	const date = new Date(created);
+	if (Number.isNaN(date.getTime())) return "";
+	const elapsed = now - date.getTime();
+	if (elapsed < 0 || elapsed >= 2 * DAY_MS) return date.toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric"
+	});
+	const format = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+	if (elapsed < 6e4) {
+		if (justNow) return justNow;
+		return format.format(-Math.max(1, Math.round(elapsed / 1e3)), "second");
+	}
+	const minutes = Math.round(elapsed / 6e4);
+	if (minutes < 60) return format.format(-minutes, "minute");
+	const hours = Math.round(minutes / 60);
+	if (hours < 24) return format.format(-hours, "hour");
+	return format.format(-Math.round(hours / 24), "day");
+};
+//#endregion
 //#region src/components/MessageChrome/MessageChrome.tsx
 var MESSAGE_CHROME_NAME = "MessageChrome";
-var [MessageChromeProvider, useMessageChromeContext] = createContext(MESSAGE_CHROME_NAME);
+var [MessageChromeProvider, useMessageChromeContext] = 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);
@@ -635,11 +627,23 @@ var CopyButton = ({ message }) => {
 		onClick: () => void navigator.clipboard?.writeText(Message.extractText(message))
 	});
 };
-var timeOf = (message) => /* @__PURE__ */ jsx("time", {
-	dateTime: message.created,
-	title: new Date(message.created).toLocaleString(),
-	children: formatTime(message.created)
-});
+var MessageId = ({ message }) => {
+	const { debug } = useMessageChromeContext("MessageId");
+	if (!debug) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "font-mono text-subdued",
+		title: message.id,
+		children: message.id.slice(-8)
+	});
+};
+var Time = ({ message }) => {
+	const { t } = useTranslation(translationKey);
+	return /* @__PURE__ */ jsx("time", {
+		dateTime: message.created,
+		title: new Date(message.created).toLocaleString(),
+		children: formatTime(message.created, { justNow: t("just-now.label") })
+	});
+};
 /**
 * The controls under the reader's own prompt: copy, rewind (edit-and-resend), and when it was
 * sent. Revealed on hover by the chrome, but never removed from flow — chrome that appears and
@@ -663,7 +667,8 @@ var PromptToolbar = ({ classNames, message }) => {
 				"data-testid": "chat.rewind",
 				onClick: () => onRewind(message.id)
 			}),
-			timeOf(message)
+			/* @__PURE__ */ jsx(Time, { message }),
+			/* @__PURE__ */ jsx(MessageId, { message })
 		]
 	});
 };
@@ -673,14 +678,51 @@ var AssistantToolbar = ({ classNames, message }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		role: "toolbar",
 		className: mx$1("flex items-center gap-1 text-xs text-description", classNames),
-		children: [/* @__PURE__ */ jsx(CopyButton, { message }), timeOf(message)]
+		children: [
+			/* @__PURE__ */ jsx(CopyButton, { message }),
+			/* @__PURE__ */ jsx(Time, { message }),
+			/* @__PURE__ */ jsx(MessageId, { message })
+		]
 	});
 };
 AssistantToolbar.displayName = "AssistantToolbar";
+/**
+* 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 { 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;
+	return /* @__PURE__ */ jsx("div", {
+		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",
+			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",
+					children: t("context.label")
+				}), /* @__PURE__ */ jsx(Icon, {
+					icon: "ph--brain--regular",
+					size: 4,
+					classNames: "text-description"
+				})]
+			}), /* @__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",
+				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 group-hover:opacity-100";
+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 relative px-2 py-2", classNames),
+	className: mx$1("group/message relative px-2 py-2", classNames),
 	"data-testid": "feed.message",
 	children
 });
@@ -694,25 +736,30 @@ var Row = ({ children, classNames }) => /* @__PURE__ */ jsx("div", {
 * bubble's edge.
 */
 var MessageChrome = ({ message, selected, children }) => {
-	const prompt = message.sender.role === "user";
+	const { streaming } = useMessageChromeContext(MESSAGE_CHROME_NAME);
+	const prompt = isPrompt(message);
 	return /* @__PURE__ */ jsx(Row, {
 		classNames: mx$1(selected && "bg-hover-surface"),
 		children: prompt ? /* @__PURE__ */ jsx("div", {
 			className: "min-w-0 flex flex-col items-end",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "max-w-[66%] min-w-0",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "px-4 py-3 border-s-2 border-accent-bg rounded-sm bg-input-surface",
-					children
-				}), /* @__PURE__ */ jsx(PromptToolbar, {
-					classNames: mx$1("justify-end", reveal),
-					message
-				})]
+				className: "max-w-[70%] min-w-0",
+				children: [
+					/* @__PURE__ */ jsx(SyntheticContext, { message }),
+					/* @__PURE__ */ jsx("div", {
+						className: "px-3 py-2 border-s-2 border-accent-bg rounded-sm bg-input-surface",
+						children
+					}),
+					/* @__PURE__ */ jsx(PromptToolbar, {
+						classNames: mx$1("justify-end", reveal, !streaming && revealOnHover),
+						message
+					})
+				]
 			})
 		}) : /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0",
 			children: [children, /* @__PURE__ */ jsx(AssistantToolbar, {
-				classNames: reveal,
+				classNames: mx$1(reveal, !streaming && revealOnHover),
 				message
 			})]
 		})
@@ -722,50 +769,36 @@ MessageChrome.displayName = MESSAGE_CHROME_NAME;
 //#endregion
 //#region src/components/ChatThread/ChatThread.tsx
 var [ChatThreadProvider, useChatThreadContext] = createContext("ChatThread");
-/** Bridges the feed's context out to the host's ref; renders nothing. */
-var ControllerBridge = ({ controllerRef }) => {
-	const { model, scrollToBottom, scrollToIndex, navigation } = useMessageList("ChatThread.Controller");
-	useEffect(() => {
-		setRef(controllerRef, {
-			model,
-			scrollToBottom,
-			scrollToIndex,
-			navigation
-		});
-		return () => {
-			setRef(controllerRef, null);
-		};
-	}, [
-		controllerRef,
-		model,
-		scrollToBottom,
-		scrollToIndex,
-		navigation
-	]);
-	return null;
-};
 /**
 * 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, debug, onEvent, onRangeChange, controllerRef }) => {
+var ChatThreadRoot = ({ children, model, viewType, registry, getObjectLabel, userHue, tailLines, debug, onEvent, onRangeChange, controllerRef }) => {
 	const renderer = useMemo(() => createRenderer(viewType, { getObjectLabel }), [viewType, getObjectLabel]);
-	const merged = useMemo(() => registry ? {
+	const merged = useMemo(() => viewType === "debug" ? void 0 : registry ? {
 		...assistantRegistry,
 		...registry
-	} : assistantRegistry, [registry]);
+	} : assistantRegistry, [registry, viewType]);
 	const handleRewind = useCallback((id) => onEvent?.({
 		type: "rewind",
 		id
 	}), [onEvent]);
+	const [streaming, setStreaming] = useState(!!model.streamingId);
+	useEffect(() => {
+		setStreaming(!!model.streamingId);
+		return model.subscribe(() => setStreaming(!!model.streamingId));
+	}, [model]);
 	return /* @__PURE__ */ jsx(ChatThreadProvider, {
 		userHue,
 		onEvent,
 		children: /* @__PURE__ */ jsx(MessageChromeProvider, {
 			onRewind: onEvent ? handleRewind : void 0,
-			children: /* @__PURE__ */ jsxs(MessageList.Root, {
+			streaming,
+			showContext: viewType !== "summary",
+			debug,
+			children: /* @__PURE__ */ jsx(MessageList.Root, {
 				model,
 				renderer,
 				registry: merged,
@@ -773,9 +806,10 @@ var ChatThreadRoot = ({ children, model, viewType, registry, getObjectLabel, use
 				estimateSize: estimateRow,
 				debug,
 				stickyBottom: true,
-				scrollPastEnd: true,
+				tailLines,
 				onRangeChange,
-				children: [controllerRef && /* @__PURE__ */ jsx(ControllerBridge, { controllerRef }), children]
+				controllerRef,
+				children
 			})
 		})
 	});
@@ -787,7 +821,7 @@ 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, ...props }) => {
+var ChatThreadViewport = ({ children, classNames, ...props }) => {
 	const { userHue, onEvent } = useChatThreadContext(CHAT_THREAD_VIEWPORT_NAME);
 	const handleClick = useCallback((event) => {
 		const text = event.target.closest("[data-action=\"submit\"]")?.getAttribute("data-value");
@@ -807,6 +841,7 @@ var ChatThreadViewport = ({ children, ...props }) => {
 		onClickCapture: handleClick,
 		children: /* @__PURE__ */ jsx(MessageList.Viewport, {
 			...props,
+			classNames: ["grow min-h-0", classNames],
 			children
 		})
 	});
@@ -817,23 +852,6 @@ var ChatThread = {
 	Viewport: ChatThreadViewport
 };
 //#endregion
-//#region src/types.ts
-/**
-* Which projection of the thread the reader sees. A view is a filter over blocks, applied by the
-* renderer — the model always carries everything.
-*
-* - `summary`: only conversational text (prompts and replies).
-* - `normal`: everything except reasoning.
-* - `thinking`: everything, reasoning included.
-* - `debug`: every block, raw fallbacks visible.
-*/
-var ChatView = Schema.Union([
-	Schema.Literal("normal").annotate({ title: "Normal" }),
-	Schema.Literal("summary").annotate({ title: "Summary" }),
-	Schema.Literal("thinking").annotate({ title: "Thinking" }),
-	Schema.Literal("debug").annotate({ title: "Debug" })
-]);
-//#endregion
-export { AssistantToolbar, ChatThread, ChatView, FallbackWidget, MessageChrome, MessageChromeProvider, PromptToolbar, ReasoningWidget, ReferenceWidget, SelectWidget, StatsWidget, StatusWidget, SuggestionWidget, SummaryWidget, ToolWidget, assistantRegistry, createRenderer, estimateRow, formatTime, translationKey, translations };
+export { AssistantToolbar, ChatThread, ChatView, MessageChrome, MessageChromeProvider, PromptToolbar, assistantRegistry, createRenderer, estimateRow, translationKey, translations };
 
 //# sourceMappingURL=index.mjs.map