@mcp-b/react-components 0.17.0 → 0.19.0

package/dist/components/AgentActivityPreview.d.ts

@@ -1,5 +1,5 @@
-import { n as WorkspaceDestination } from "../WorkspaceLink-DK1DWMHe.js";
-import { s as AgentActivitySummary } from "../AgentActivity-BNUNrP9O.js";
+import { n as WorkspaceDestination } from "../WorkspaceLink-O-EBKUJ8.js";
+import { s as AgentActivitySummary } from "../AgentActivity-D2SHSGFX.js";
 import * as React from "react";
 
 //#region src/components/AgentActivityPreview.d.ts
@@ -17,12 +17,12 @@ type AgentActivityPreviewItem = Omit<AgentActivitySummary, "mode"> & {
 interface AgentActivityPreviewProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onSelect"> {
   /** Current agent summaries to show in the transient preview. */
   items: readonly AgentActivityPreviewItem[];
-  /** Opens the selected agent by its stable id. */
-  onSelect: (id: string) => void;
-  /** Opens a projected file target in the selected agent's workspace. */
-  onOpenWorkspaceFile?: (id: string, destination: Extract<WorkspaceDestination, {
+  /** App-authored TanStack Router Link for every durable agent destination. */
+  renderAgentLink: (item: AgentActivityPreviewItem) => React.ReactElement;
+  /** App-authored TanStack Router Link for a projected workspace file destination. */
+  renderWorkspaceFileLink?: (item: AgentActivityPreviewItem, destination: Extract<WorkspaceDestination, {
     kind: "file";
-  }>) => void;
+  }>) => React.ReactElement;
   /** Hides the complete preview when the host supports dismissal. */
   onDismiss?: () => void;
   /** Product mark shown beside the agent rows. */
@@ -35,8 +35,8 @@ declare function AgentActivityPreview({
   className,
   items,
   onDismiss,
-  onOpenWorkspaceFile,
-  onSelect,
+  renderAgentLink,
+  renderWorkspaceFileLink,
   ref,
   ...props
 }: AgentActivityPreviewProps & {

package/dist/components/AgentActivityPreview.js

@@ -1,12 +1,13 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { E as McpIcon, J as WarningIcon, V as SpinnerIcon, X as XIcon, y as FileIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { A as McpIcon, K as SpinnerIcon, Q as WarningIcon, S as FileIcon, et as XIcon } from "../icons-DKXiSepE.js";
 import { ActivityHeader } from "./Activity.js";
 import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
+import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AgentActivityPreview.tsx
 /** Compact multi-agent preview for a page overlay or secondary application rail. */
-function AgentActivityPreview({ "aria-label": ariaLabel = "Agent activity", brandIcon = /* @__PURE__ */ jsx(McpIcon, {}), className, items, onDismiss, onOpenWorkspaceFile, onSelect, ref, ...props }) {
+function AgentActivityPreview({ "aria-label": ariaLabel = "Agent activity", brandIcon = /* @__PURE__ */ jsx(McpIcon, {}), className, items, onDismiss, renderAgentLink, renderWorkspaceFileLink, ref, ...props }) {
 	if (items.length === 0) return null;
 	return /* @__PURE__ */ jsxs("section", {
 		ref,
@@ -32,12 +33,11 @@ function AgentActivityPreview({ "aria-label": ariaLabel = "Agent activity", bran
 				role: "list",
 				children: items.map((item) => /* @__PURE__ */ jsxs("li", {
 					className: "agent-activity-preview__item",
-					children: [/* @__PURE__ */ jsx("button", {
-						type: "button",
+					children: [/* @__PURE__ */ jsx(NavigationLink, {
+						render: renderAgentLink(item),
 						className: "agent-activity-preview__row",
 						"aria-label": `${item.label}. ${statusLabel(item.status)}. Open agent.`,
 						"data-status": item.status,
-						onClick: () => onSelect(item.id),
 						children: /* @__PURE__ */ jsx(ActivityHeader, {
 							icon: item.url ? /* @__PURE__ */ jsx(AgentActivityFavicon, {
 								url: item.url,
@@ -61,14 +61,10 @@ function AgentActivityPreview({ "aria-label": ariaLabel = "Agent activity", bran
 								}) : null, /* @__PURE__ */ jsx(StatusIcon, { status: item.status })]
 							})
 						})
-					}), item.workspaceDestination && onOpenWorkspaceFile ? /* @__PURE__ */ jsx("button", {
-						type: "button",
+					}), item.workspaceDestination && renderWorkspaceFileLink ? /* @__PURE__ */ jsx(NavigationLink, {
+						render: renderWorkspaceFileLink(item, item.workspaceDestination),
 						className: "agent-activity-preview__file-action",
 						"aria-label": `Open ${item.workspaceDestination.path} in workspace`,
-						onClick: () => {
-							const destination = item.workspaceDestination;
-							if (destination) onOpenWorkspaceFile(item.id, destination);
-						},
 						children: /* @__PURE__ */ jsx(FileIcon, {})
 					}) : null]
 				}, item.id))

package/dist/components/AgentAttention.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-FX_hpqxm.js";
+import { r as ButtonProps } from "../Button-DLGzHsjc.js";
 import * as React from "react";
 
 //#region src/components/AgentAttention.d.ts

package/dist/components/AgentAttention.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Button } from "./Button.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/AgentChat.d.ts

@@ -1,2 +1,2 @@
-import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-CRuMi1Pb.js";
+import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-ClxViuUM.js";
 export { AgentChat, AgentChatComposerDraft, AgentChatProps, AgentChatRenderMessageContext, PermissionModeControl };

package/dist/components/AgentChat.js

@@ -1,6 +1,6 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { I as PlusIcon, L as QueueIcon, P as PencilIcon, R as RefreshIcon, U as SteerIcon, q as TrashIcon } from "../icons--FqCZEc3.js";
-import { n as MessageAction, r as MessageActions, t as Message } from "../Message-C4eYRogZ.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { H as QueueIcon, I as MoveToFrontIcon, U as RefreshIcon, V as PlusIcon, Z as TrashIcon, z as PencilIcon } from "../icons-DKXiSepE.js";
+import { n as MessageAction, r as MessageActions, t as Message } from "../Message-rZEaaD8Q.js";
 import { AgentMessageParts } from "./AgentMessageParts.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
@@ -8,8 +8,9 @@ import { ConversationEmptyState } from "./Conversation.js";
 import { AgentChatMessageEditor } from "./AgentChatMessageEditor.js";
 import { Marker, MarkerContent } from "./Marker.js";
 import { Menu } from "./Menu.js";
+import { TransitionSurface } from "./TransitionSurface.js";
 import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputReferences, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
-import { t as CopyButton } from "../copy-button-cYsJBauI.js";
+import { t as CopyButton } from "../copy-button-BtRwhRks.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isCompactionMessage } from "agents/experimental/memory/utils";
@@ -23,6 +24,15 @@ import { isReasoningUIPart, isTextUIPart } from "ai";
 * the `SessionMessage` fields it reads, so use the upstream helper directly
 * instead of duplicating the prefix contract locally.
 */
+function observeAgentChatComposer(element) {
+	if (!element || typeof ResizeObserver === "undefined") return;
+	const root = element.parentElement;
+	const observer = new ResizeObserver(() => {
+		root?.style.setProperty("--agent-chat-composer-size", `${element.offsetHeight}px`);
+	});
+	observer.observe(element);
+	return () => observer.disconnect();
+}
 const EMPTY_PENDING_APPROVALS = [];
 const EMPTY_SKIPPED_APPROVAL_IDS = [];
 function createApprovalSessionState(thinkStub) {
@@ -52,12 +62,11 @@ function AgentChatAddMenu({ children }) {
 		children: [/* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(Menu.GroupLabel, { children: "Add" }), /* @__PURE__ */ jsx(PromptInputActionAddAttachments, {})] }), children]
 	})] });
 }
-function AgentChatSubmitAction({ status, onStop, allowSubmitWhileBusy, disabled, hasDraft }) {
+function AgentChatSubmitAction({ status, onStop, disabled, hasDraft }) {
 	const attachments = usePromptInputAttachments();
 	return /* @__PURE__ */ jsx(PromptInputSubmit, {
 		status,
 		onStop,
-		allowSubmitWhileBusy,
 		hasContent: hasDraft || attachments.files.length > 0,
 		disabled
 	});
@@ -78,13 +87,12 @@ function AgentChatAssistantActions({ message, responseNumber, showCopy, showRetr
 			label: `Copy response ${responseNumber}`,
 			tooltip: "Copy response",
 			text: copyText,
-			size: "icon-lg",
+			size: "sm",
 			onCopy: () => onCopyStatus(`Response ${responseNumber} copied.`),
 			onError: () => onCopyStatus(`Could not copy response ${responseNumber}. Try again.`)
 		}) : null, showRetry && onRegenerate ? /* @__PURE__ */ jsx(MessageAction, {
 			label: "Retry",
 			tooltip: "Regenerate response",
-			size: "icon-lg",
 			onClick: () => onRegenerate(message.id),
 			children: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 })
 		}) : null]
@@ -100,10 +108,13 @@ function getEditableUserText(message) {
 * transport. Product code that talks to a Cloudflare Think agent should render
 * `ThinkChat`; use this directly only for plain AI SDK or read-only messages.
 */
-function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMessage, onRemoveQueuedMessage, status = "ready", onSubmit, showComposer = onSubmit !== void 0, onStop, allowSubmitWhileBusy = false, placeholder = "Ask anything...", disabled, emptyState, composerHeader, composerTools, slashCommands, mentionCommands, contextSelector, composerEndTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, permissionModeControl, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, showComposer = onSubmit !== void 0, onStop, placeholder = "Ask anything...", disabled, emptyState, composerHeader, composerTools, slashCommands, mentionCommands, contextSelector, composerEndTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, permissionModeControl, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
 	const [copyAnnouncement, setCopyAnnouncement] = React.useState("");
 	const [composerDraft, setComposerDraft] = React.useState("");
 	const [composerReferences, setComposerReferences] = React.useState([]);
+	const [pendingPrompts, setPendingPrompts] = React.useState([]);
+	const busy = status === "submitted" || status === "streaming";
+	const wasBusy = React.useRef(busy);
 	const addComposerReference = React.useCallback((reference) => {
 		setComposerReferences((current) => current.some((item) => item.id === reference.id && item.trigger === reference.trigger) ? current : [...current, reference]);
 	}, []);
@@ -123,14 +134,35 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 		if (copyAnnouncementTimer.current !== null) window.clearTimeout(copyAnnouncementTimer.current);
 	}, []);
 	const handleSubmit = React.useCallback((message) => {
-		const submission = onSubmit?.({
+		const prompt = {
 			...message,
 			...composerReferences.length ? { references: composerReferences } : {}
-		});
+		};
+		const submission = busy || pendingPrompts.length ? setPendingPrompts((current) => [...current, {
+			id: crypto.randomUUID(),
+			message: prompt
+		}]) : onSubmit?.(prompt);
 		setComposerDraft("");
 		setComposerReferences([]);
 		return submission;
-	}, [composerReferences, onSubmit]);
+	}, [
+		busy,
+		composerReferences,
+		onSubmit,
+		pendingPrompts.length
+	]);
+	React.useEffect(() => {
+		const becameReady = wasBusy.current && !busy;
+		wasBusy.current = busy;
+		const next = pendingPrompts[0];
+		if (!becameReady || !next || !onSubmit) return;
+		setPendingPrompts((current) => current.slice(1));
+		onSubmit(next.message);
+	}, [
+		busy,
+		onSubmit,
+		pendingPrompts
+	]);
 	const selectComposerCommand = React.useCallback((command, trigger) => {
 		const reference = {
 			id: command.id,
@@ -180,16 +212,34 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 	React.useLayoutEffect(() => {
 		setApprovalSession((previous) => previous.thinkStub === thinkStub ? previous : createApprovalSessionState(thinkStub));
 	}, [thinkStub]);
-	const pendingApprovalItems = [...getPendingToolApprovals(messages, { pausedExecutions: Boolean(thinkStub) }).filter((part) => {
-		if (part.state === "approval-requested" && !onApprovalResponse) return false;
-		const id = getApprovalStateKey(part);
-		return Boolean(id) && !skippedApprovalIds.includes(id);
-	}).map((part) => ({ part })), ...thinkStub ? durableApprovals.filter((approval) => approval.source === "action" && !skippedApprovalIds.includes(approval.executionId)).map((approval) => ({ approval })) : []];
+	const skippedApprovalIdSet = React.useMemo(() => new Set(skippedApprovalIds), [skippedApprovalIds]);
+	const pendingApprovalItems = React.useMemo(() => {
+		return [...getPendingToolApprovals(messages, { pausedExecutions: Boolean(thinkStub) }).filter((part) => {
+			if (part.state === "approval-requested" && !onApprovalResponse) return false;
+			const id = getApprovalStateKey(part);
+			return Boolean(id) && !skippedApprovalIdSet.has(id);
+		}).map((part) => ({ part })), ...thinkStub ? durableApprovals.filter((approval) => approval.source === "action" && !skippedApprovalIdSet.has(approval.executionId)).map((approval) => ({ approval })) : []];
+	}, [
+		durableApprovals,
+		messages,
+		onApprovalResponse,
+		skippedApprovalIdSet,
+		thinkStub
+	]);
 	const approvalsWired = Boolean(onApprovalResponse || thinkStub);
 	const autoApprovedIds = React.useRef({
 		thinkStub,
 		ids: /* @__PURE__ */ new Set()
 	});
+	const respondToApproval = React.useEffectEvent((id) => {
+		onApprovalResponse?.({
+			id,
+			approved: true
+		});
+	});
+	const notifyExecutionSettled = React.useEffectEvent(() => {
+		onExecutionSettled?.();
+	});
 	React.useLayoutEffect(() => {
 		if (autoApprovedIds.current.thinkStub === thinkStub) return;
 		autoApprovedIds.current = {
@@ -204,35 +254,27 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 			const key = "part" in item ? getApprovalStateKey(item.part) : item.approval.executionId;
 			if (!id || !key || autoApprovedIds.current.ids.has(key)) continue;
 			autoApprovedIds.current.ids.add(key);
-			if ("part" in item && item.part.state === "approval-requested") onApprovalResponse?.({
-				id,
-				approved: true
-			});
+			if ("part" in item && item.part.state === "approval-requested") respondToApproval(id);
 			else if (thinkStub) thinkStub.approveExecution(id).finally(() => {
-				onExecutionSettled?.();
+				notifyExecutionSettled();
 			});
 		}
 	}, [
+		pendingApprovalItems,
 		permissionMode,
 		permissionModeControl,
-		messages,
-		durableApprovals,
-		onApprovalResponse,
-		thinkStub,
-		onExecutionSettled
+		thinkStub
 	]);
 	const pendingApproval = !permissionModeControl && permissionMode === "bypass" ? void 0 : pendingApprovalItems[0];
 	const contextUsage = contextWindow ? getContextUsage(messages) : void 0;
-	const queuedMessageIds = new Set(queuedMessages.map((message) => message.id));
-	const transcriptMessages = queuedMessageIds.size ? messages.filter((message) => !queuedMessageIds.has(message.id)) : messages;
-	const newestAssistantIndex = transcriptMessages.findLastIndex((message) => message.role === "assistant" && !isCompactionMessage(message));
+	const newestAssistantIndex = messages.findLastIndex((message) => message.role === "assistant" && !isCompactionMessage(message));
 	const lastAssistantIndex = onRegenerate && status !== "streaming" && status !== "submitted" ? newestAssistantIndex : -1;
-	const lastUserIndex = onEditAndResend && !disabled && status !== "streaming" && status !== "submitted" ? transcriptMessages.findLastIndex((message) => message.role === "user") : -1;
+	const lastUserIndex = onEditAndResend && !disabled && status !== "streaming" && status !== "submitted" ? messages.findLastIndex((message) => message.role === "user") : -1;
 	const [editingMessageId, setEditingMessageId] = React.useState();
 	const restoreEditFocus = React.useRef(false);
 	const editButtonRef = React.useRef(null);
 	let assistantResponseCount = 0;
-	const assistantResponseNumbers = transcriptMessages.map((message) => {
+	const assistantResponseNumbers = messages.map((message) => {
 		if (message.role !== "assistant" || isCompactionMessage(message)) return 0;
 		assistantResponseCount += 1;
 		return assistantResponseCount;
@@ -242,17 +284,9 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 		editButtonRef.current?.focus();
 		restoreEditFocus.current = false;
 	}, [editingMessageId]);
-	const composerRef = (el) => {
-		if (!el || typeof ResizeObserver === "undefined") return;
-		const root = el.parentElement;
-		const observer = new ResizeObserver(() => {
-			root?.style.setProperty("--agent-chat-composer-size", `${el.offsetHeight}px`);
-		});
-		observer.observe(el);
-		return () => observer.disconnect();
-	};
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(TransitionSurface, {
 		ref,
+		variant: "fade",
 		className: cx("agent-chat", className),
 		"data-composer-hidden": showComposer ? void 0 : "",
 		children: [
@@ -270,13 +304,13 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 					children: [/* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
 						"aria-busy": status === "streaming" || status === "submitted",
 						className: "agent-chat__transcript-content",
-						children: [transcriptMessages.length === 0 ? /* @__PURE__ */ jsx(MessageScrollerItem, {
-							className: "agent-chat__empty-row",
+						children: [messages.length === 0 ? /* @__PURE__ */ jsx(MessageScrollerItem, {
+							className: "conversation__empty-row",
 							children: emptyState ?? /* @__PURE__ */ jsx(ConversationEmptyState, {
 								title: "Start a conversation",
 								description: "Ask the agent to inspect, plan, or build."
 							})
-						}) : null, transcriptMessages.map((message, messageIndex) => /* @__PURE__ */ jsx(MessageScrollerItem, {
+						}) : null, messages.map((message, messageIndex) => /* @__PURE__ */ jsx(MessageScrollerItem, {
 							messageId: message.id,
 							scrollAnchor: message.role === "user",
 							children: isCompactionMessage(message) ? /* @__PURE__ */ jsx(Marker, {
@@ -299,7 +333,7 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 								}, message.id) : /* @__PURE__ */ jsxs(Fragment, { children: [
 									/* @__PURE__ */ jsx(AgentMessageParts, {
 										message,
-										status: messageIndex === transcriptMessages.length - 1 ? status : "ready",
+										status: messageIndex === messages.length - 1 ? status : "ready",
 										renderPart
 									}),
 									renderMessageAfter?.({
@@ -312,7 +346,6 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 											ref: editButtonRef,
 											label: "Edit message",
 											tooltip: "Edit and resend",
-											size: "icon-lg",
 											onClick: () => {
 												restoreEditFocus.current = false;
 												setEditingMessageId(message.id);
@@ -334,12 +367,12 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 					}) }), /* @__PURE__ */ jsx(MessageScrollerButton, {
 						"aria-label": "Scroll to latest",
 						className: "agent-chat__scroll-button",
-						size: "icon"
+						size: "sm"
 					})]
 				})
 			}),
 			showComposer ? /* @__PURE__ */ jsxs("div", {
-				ref: composerRef,
+				ref: observeAgentChatComposer,
 				className: "agent-chat__composer",
 				children: [
 					/* @__PURE__ */ jsx("div", {
@@ -348,13 +381,13 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 						"aria-atomic": "true",
 						children: notice
 					}),
-					queuedMessages.length ? /* @__PURE__ */ jsx("section", {
+					pendingPrompts.length ? /* @__PURE__ */ jsx("section", {
 						className: "agent-chat__queued",
 						"aria-label": "Queued messages",
 						children: /* @__PURE__ */ jsx("ul", {
 							className: "agent-chat__queued-list",
-							children: queuedMessages.map((message) => {
-								const messageText = getMessageText(message) || "Queued message";
+							children: pendingPrompts.map((pending) => {
+								const messageText = pending.message.text || "Queued message";
 								return /* @__PURE__ */ jsxs("li", {
 									className: "agent-chat__queued-message",
 									children: [
@@ -367,22 +400,22 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 											className: "agent-chat__queued-text sigvelo-truncate",
 											children: messageText
 										}),
-										onSteerQueuedMessage ? /* @__PURE__ */ jsxs("button", {
+										/* @__PURE__ */ jsxs("button", {
 											type: "button",
 											className: "agent-chat__queued-action",
-											"aria-label": `Steer queued message: ${messageText}`,
-											onClick: () => onSteerQueuedMessage(message),
-											children: [/* @__PURE__ */ jsx(SteerIcon, {}), "Steer"]
-										}) : null,
-										onRemoveQueuedMessage ? /* @__PURE__ */ jsx("button", {
+											"aria-label": `Move queued message to front: ${messageText}`,
+											onClick: () => setPendingPrompts((current) => [pending, ...current.filter((item) => item !== pending)]),
+											children: [/* @__PURE__ */ jsx(MoveToFrontIcon, {}), "Move to front"]
+										}),
+										/* @__PURE__ */ jsx("button", {
 											type: "button",
 											className: "agent-chat__queued-action agent-chat__queued-remove",
 											"aria-label": `Remove queued message: ${messageText}`,
-											onClick: () => onRemoveQueuedMessage(message),
+											onClick: () => setPendingPrompts((current) => current.filter((item) => item !== pending)),
 											children: /* @__PURE__ */ jsx(TrashIcon, {})
-										}) : null
+										})
 									]
-								}, message.id);
+								}, pending.id);
 							})
 						})
 					}) : null,
@@ -452,7 +485,6 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 									/* @__PURE__ */ jsx(AgentChatSubmitAction, {
 										status,
 										onStop,
-										allowSubmitWhileBusy: Boolean(allowSubmitWhileBusy),
 										disabled,
 										hasDraft: Boolean(composerDraft.trim() || composerReferences.length)
 									})

package/dist/components/AgentChatMessageEditor.js

@@ -74,14 +74,14 @@ function AgentChatMessageEditor({ message, originalText, onCancel, onSubmit, onS
 				type: "button",
 				variant: "outline",
 				color: "neutral",
-				size: "lg",
+				size: "sm",
 				disabled: isSubmitting,
 				onClick: onCancel,
 				children: "Cancel"
 			}), /* @__PURE__ */ jsx(Button, {
 				type: "submit",
 				color: "primary",
-				size: "lg",
+				size: "sm",
 				disabled: !canSubmit,
 				children: isSubmitting ? "Resending…" : "Send"
 			})]

package/dist/components/AgentChatTurnError.js

@@ -23,13 +23,13 @@ function AgentChatTurnError({ error, onDismiss, onRetry }) {
 				type: "button",
 				variant: "ghost",
 				color: "neutral",
-				size: "lg",
+				size: "sm",
 				onClick: onDismiss,
 				children: "Dismiss"
 			}), onRetry ? /* @__PURE__ */ jsx(Button, {
 				type: "button",
 				color: "primary",
-				size: "lg",
+				size: "sm",
 				onClick: onRetry,
 				children: "Try again"
 			}) : null]

package/dist/components/AgentConnection.js

@@ -1,10 +1,10 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { w as LinkIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { O as LinkIcon } from "../icons-DKXiSepE.js";
 import { Button } from "./Button.js";
 import { Popover } from "./Popover.js";
 import { Field } from "./Field.js";
 import { Form } from "./Form.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-Co1noLbC.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-Bb-IPBc_.js";
 import { CUSTOM_MCP_SERVER_CARD } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/AgentMessageParts.js

@@ -1,4 +1,4 @@
-import { d as MessageContent, f as MessageResponse, i as MessageAttachment } from "../Message-C4eYRogZ.js";
+import { d as MessageContent, f as MessageResponse, i as MessageAttachment } from "../Message-rZEaaD8Q.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
 import { Source, Sources, SourcesContent, SourcesTrigger } from "./Sources.js";
 import { ToolInvocation } from "./ToolInvocation.js";

package/dist/components/AgentToolDetail.d.ts

@@ -13,7 +13,8 @@ interface AgentToolDetailProps<State = unknown, MessageT extends UIMessage = UIM
   /** Whole child Think chat hook result; it owns the stored child transcript. */
   chat: ThinkChatValue<State, MessageT>;
   messages?: ThinkChatMessagesProps<MessageT>;
-  onBack?: () => void;
+  /** App-authored TanStack Router Link to the parent conversation. */
+  backLink?: React.ReactElement;
 }
 /**
  * Live retained-child detail composed from upstream connection and chat values.
@@ -21,10 +22,10 @@ interface AgentToolDetailProps<State = unknown, MessageT extends UIMessage = UIM
  * compact parent-side stream projection and is never promoted to fake history.
  */
 declare function AgentToolDetail<State = unknown, MessageT extends UIMessage = UIMessage>({
+  backLink,
   chat,
   className,
   messages,
-  onBack,
   ref,
   run,
   ...props
@@ -41,13 +42,14 @@ interface SelectedAgentToolChildProps<ParentAgentT extends ThinkAgent<ParentStat
    */
   connectionOptions?: UseAgentOptions<ChildState>;
   messages?: ThinkChatMessagesProps<MessageT>;
-  onBack?: () => void;
+  /** App-authored TanStack Router Link to the parent conversation. */
+  backLink?: React.ReactElement;
 }
 /** Lazily connects one selected retained child and renders its real Think chat. */
 declare function SelectedAgentToolChild<ParentAgentT extends ThinkAgent<ParentState>, ParentState = unknown, ChildState = unknown, MessageT extends UIMessage = UIMessage>({
+  backLink,
   connectionOptions,
   messages,
-  onBack,
   parentAgent,
   run
 }: SelectedAgentToolChildProps<ParentAgentT, ParentState, ChildState, MessageT>): React.JSX.Element;

package/dist/components/AgentToolDetail.js

@@ -1,10 +1,11 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { n as ArrowLeftIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { r as ArrowLeftIcon } from "../icons-DKXiSepE.js";
+import { TransitionSurface } from "./TransitionSurface.js";
 import { AppTopBar } from "./AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
 import { SubagentRunIndicator, getSubagentRunName } from "./SubagentRunIndicator.js";
 import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "./SubagentRunDetails.js";
-import { t as ThinkChat } from "../ThinkChat-DInElus-.js";
+import { t as ThinkChat } from "../ThinkChat-15EhfvYJ.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";
@@ -15,15 +16,16 @@ import { useAgent } from "agents/react";
 * The full child transcript comes from `chat.messages`; `run.parts` remains a
 * compact parent-side stream projection and is never promoted to fake history.
 */
-function AgentToolDetail({ chat, className, messages, onBack, ref, run, ...props }) {
+function AgentToolDetail({ backLink, chat, className, messages, ref, run, ...props }) {
 	const backRef = React.useRef(null);
 	const name = getSubagentRunName(run);
 	const progressLabel = run.progress?.message ?? run.progress?.phase;
 	React.useEffect(() => {
 		backRef.current?.focus();
 	}, [run.runId]);
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(TransitionSurface, {
 		ref,
+		variant: "slide-inline",
 		"data-slot": "agent-tool-detail",
 		className: cx("agent-tool-detail", className),
 		...props,
@@ -31,10 +33,10 @@ function AgentToolDetail({ chat, className, messages, onBack, ref, run, ...props
 			/* @__PURE__ */ jsxs(AppTopBar.Root, {
 				"aria-label": `${name} controls`,
 				children: [
-					/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [onBack ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+					/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [backLink ? /* @__PURE__ */ jsx(AppTopBar.Link, {
 						ref: backRef,
 						label: "Back to parent conversation",
-						onClick: onBack,
+						render: backLink,
 						children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
 					}) : null, /* @__PURE__ */ jsx(NaniteMark, { index: run.order })] }),
 					/* @__PURE__ */ jsx(AppTopBar.Title, { children: /* @__PURE__ */ jsx("h2", {
@@ -79,7 +81,7 @@ function AgentToolDetail({ chat, className, messages, onBack, ref, run, ...props
 	});
 }
 /** Lazily connects one selected retained child and renders its real Think chat. */
-function SelectedAgentToolChild({ connectionOptions, messages, onBack, parentAgent, run }) {
+function SelectedAgentToolChild({ backLink, connectionOptions, messages, parentAgent, run }) {
 	const [root, ...parentSubPath] = parentAgent.path;
 	return /* @__PURE__ */ jsx(AgentToolDetail, {
 		run,
@@ -91,8 +93,8 @@ function SelectedAgentToolChild({ connectionOptions, messages, onBack, parentAge
 			sub: [...connectionOptions?.sub ?? parentSubPath, run.subAgent]
 		}) }),
 		messages,
-		onBack
-	});
+		backLink
+	}, run.runId);
 }
 //#endregion
 export { AgentToolDetail, SelectedAgentToolChild };

package/dist/components/AlertDialog.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";