@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/AgentChat.js

@@ -1,25 +1,38 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { F as PlusIcon, H as SteerIcon, I as QueueIcon, K as TrashIcon, L as RefreshIcon, N as PencilIcon } from "../icons-CpfUer49.js";
-import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { B as PlusIcon, F as MoveToFrontIcon, H as RefreshIcon, R as PencilIcon, V as QueueIcon, X as TrashIcon } from "../icons-CQJ-aMnI.js";
+import { n as MessageAction, r as MessageActions, t as Message } from "../Message-BXtmfc9Q.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";
 import { ConversationEmptyState } from "./Conversation.js";
-import { d as MessageContent, f as MessageResponse, i as MessageAttachment, n as MessageAction, r as MessageActions, t as Message } from "../Message-BkMdE3bS.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 { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
-import { Source, Sources, SourcesContent, SourcesTrigger } from "./Sources.js";
-import { getToolDisplayName, isToolPartFailed, isToolPartWorking } from "./ThinkChatToolParts.js";
-import { t as CopyButton } from "../copy-button-Dejn5heL.js";
-import { t as summarizeToolInput } from "../summarize-tool-input-BUJsENSn.js";
+import { t as CopyButton } from "../copy-button-DeK6KXEV.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isCompactionMessage } from "agents/experimental/memory/utils";
-import { getToolInput, getToolOutput, getToolPartState } from "@cloudflare/think/react";
-import { isFileUIPart, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
+import { isReasoningUIPart, isTextUIPart } from "ai";
 //#region src/components/AgentChat.tsx
+/**
+* Agents exports this helper from `agents/sessions` after cloudflare/agents#1896;
+* the current 0.17.4 release still publishes it from the experimental path.
+* It checks the canonical `compaction_` id prefix used when Session history
+* materializes a summary overlay. `UIMessage` is structurally compatible with
+* 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) {
@@ -45,74 +58,19 @@ function AgentChatAddMenu({ children }) {
 		sideOffset: 12,
 		collisionPadding: 8,
 		className: "agent-chat__add-menu",
-		children: [/* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(Menu.GroupLabel, {
-			className: "agent-chat__add-menu-group-label",
-			children: "Add"
-		}), /* @__PURE__ */ jsx(PromptInputActionAddAttachments, {})] }), children]
+		"data-recipe": "composer-command-surface wide-scroll-picker",
+		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
 	});
 }
-/**
-* Per-message row-size compaction marker from `AIChatAgent` persistence.
-*
-* This is distinct from Session history compaction overlays. When a single
-* SQLite row approaches the Workers/SQLite size limit, Agents compacts large
-* tool outputs and, if necessary, truncates text before persistence. The
-* message remains in place and receives metadata keys documented by Agents:
-* `compactedToolOutputs` lists tool-call ids whose outputs were summarized;
-* `compactedTextParts` lists text-part indexes that were truncated. The UI
-* reads those keys structurally because they are persisted metadata rather than
-* exported AI SDK part variants, then adds a local visual note while preserving
-* the original `UIMessage` and part shapes.
-*
-* @see https://github.com/cloudflare/agents/blob/main/docs/agents/chat-agents.md#row-size-protection
-*/
-function isCompactedPart(message, part, partIndex) {
-	const metadata = message.metadata;
-	if (isTextUIPart(part)) return Array.isArray(metadata?.compactedTextParts) && metadata.compactedTextParts.includes(partIndex);
-	if (isToolUIPart(part)) return Array.isArray(metadata?.compactedToolOutputs) && metadata.compactedToolOutputs.includes(part.toolCallId);
-	return false;
-}
-function getPartKey(part, partIndex) {
-	if (isToolUIPart(part)) return part.toolCallId;
-	if ("id" in part && typeof part.id === "string") return `${part.type}-${part.id}`;
-	return `${part.type}-${partIndex}`;
-}
-/**
-* AI SDK exports concrete source part types but no public source-part guard.
-* Keep these local guards as exact discriminant checks, matching
-* `ai/src/ui/ui-messages.ts` and `ai/src/ui/process-ui-message-stream.ts`.
-* If AI SDK exports source or step guards later, replace these wrappers rather
-* than widening the local transcript contract.
-*/
-function isSourceUrlPart(part) {
-	return part?.type === "source-url";
-}
-function isSourceDocumentPart(part) {
-	return part?.type === "source-document";
-}
-/**
-* Session compaction overlay marker from Agents Sessions.
-*
-* Agents exports `isCompactionMessage` from `agents/sessions`; it checks the canonical `compaction_`
-* id prefix used when `Session.getHistory()` materializes a summary overlay.
-* `UIMessage` is structurally compatible with the fields the helper reads, so
-* keep this wrapper instead of duplicating the prefix test locally. The
-* runtime import above stays on the deprecated compatibility path until this
-* package raises its Agents dependency floor to the graduating release.
-*/
-function isCompactionMessage$1(message) {
-	return isCompactionMessage(message);
-}
 function getMessageText(message) {
 	return message.parts.filter((part) => isTextUIPart(part) || isReasoningUIPart(part)).map((part) => part.text).join("");
 }
@@ -129,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]
@@ -146,86 +103,18 @@ function getEditableUserText(message) {
 	const part = message.parts[0];
 	return isTextUIPart(part) && part.text.trim() ? part.text : void 0;
 }
-function formatSourceTitle(part) {
-	if (part.title) return part.title;
-	if (part.type === "source-document") return part.filename ?? part.mediaType;
-	try {
-		return new URL(part.url).hostname.replace(/^www\./, "");
-	} catch {
-		return part.url;
-	}
-}
-function renderSources(parts) {
-	return /* @__PURE__ */ jsxs(Sources, { children: [/* @__PURE__ */ jsx(SourcesTrigger, { count: parts.length }), /* @__PURE__ */ jsx(SourcesContent, { children: parts.map((part) => part.type === "source-url" ? /* @__PURE__ */ jsx(Source, {
-		href: part.url,
-		title: formatSourceTitle(part)
-	}, part.sourceId) : /* @__PURE__ */ jsx(Source, {
-		title: formatSourceTitle(part),
-		description: part.filename ?? part.mediaType
-	}, part.sourceId)) })] });
-}
-function getSourceRun(parts, start) {
-	const sources = [];
-	for (let index = start; index < parts.length; index++) {
-		const candidate = parts[index];
-		if (!isSourceUrlPart(candidate) && !isSourceDocumentPart(candidate)) break;
-		sources.push(candidate);
-	}
-	return sources;
-}
-function describeToolPart(part) {
-	const name = getToolDisplayName(part);
-	const verb = isToolPartFailed(part) ? `${name} failed` : isToolPartWorking(part) ? `Running ${name}` : `Ran ${name}`;
-	const detail = summarizeToolInput(getToolInput(part));
-	return detail ? `${verb} · ${detail}` : verb;
-}
-function formatToolValue(value) {
-	if (value === void 0) return void 0;
-	return typeof value === "string" ? value : JSON.stringify(value, null, 2);
-}
-function renderToolActivity(part) {
-	const state = getToolPartState(part);
-	const failed = isToolPartFailed(part);
-	const deniedReason = part.state === "output-denied" ? part.approval.reason : void 0;
-	const output = state === "error" ? part.errorText : state === "denied" ? deniedReason ?? "Denied" : formatToolValue(getToolOutput(part));
-	return /* @__PURE__ */ jsxs(Activity, {
-		isStreaming: isToolPartWorking(part),
-		children: [/* @__PURE__ */ jsx(ActivityTrigger, { label: describeToolPart(part) }), /* @__PURE__ */ jsxs(ActivityContent, { children: [/* @__PURE__ */ jsx(ActivityPanel, {
-			label: getToolDisplayName(part),
-			text: formatToolValue(getToolInput(part))
-		}), output ? /* @__PURE__ */ jsx(ActivityPanel, {
-			label: "output",
-			text: output,
-			status: state === "denied" ? "denied" : failed ? "error" : void 0,
-			error: failed
-		}) : null] })]
-	});
-}
-function renderDefaultPart(message, part, partIndex, isLastMessage, status) {
-	if (isTextUIPart(part) && part.text) return /* @__PURE__ */ jsx(MessageResponse, { children: part.text });
-	if (isFileUIPart(part)) return /* @__PURE__ */ jsx(MessageAttachment, { part });
-	if (isReasoningUIPart(part)) {
-		if (partIndex !== message.parts.findIndex(isReasoningUIPart)) return null;
-		const reasoningText = message.parts.filter(isReasoningUIPart).map((reasoningPart) => reasoningPart.text).join("\n\n");
-		if (!reasoningText) return null;
-		const lastPart = message.parts.at(-1);
-		return /* @__PURE__ */ jsxs(Reasoning, {
-			isStreaming: isLastMessage && status === "streaming" && lastPart !== void 0 && isReasoningUIPart(lastPart) && lastPart.state === "streaming",
-			children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: reasoningText })]
-		});
-	}
-	if (isToolUIPart(part)) return renderToolActivity(part);
-	return null;
-}
 /**
 * Low-level transcript/composer surface used by `ThinkChat`: props in, no
 * 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]);
 	}, []);
@@ -245,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,
@@ -302,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((approval) => ({ part: approval.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 = {
@@ -326,36 +254,28 @@ 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$1(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) => {
-		if (message.role !== "assistant" || isCompactionMessage$1(message)) return 0;
+	const assistantResponseNumbers = messages.map((message) => {
+		if (message.role !== "assistant" || isCompactionMessage(message)) return 0;
 		assistantResponseCount += 1;
 		return assistantResponseCount;
 	});
@@ -364,22 +284,14 @@ 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: [
 			/* @__PURE__ */ jsx("span", {
-				className: "message__copy-status",
+				className: "message__copy-status sigvelo-visually-hidden",
 				role: "status",
 				"aria-atomic": "true",
 				children: copyAnnouncement
@@ -392,16 +304,16 @@ 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$1(message) ? /* @__PURE__ */ jsx(Marker, {
+							children: isCompactionMessage(message) ? /* @__PURE__ */ jsx(Marker, {
 								variant: "separator",
 								children: /* @__PURE__ */ jsx(MarkerContent, { children: getMessageText(message) || "Conversation compacted" })
 							}) : /* @__PURE__ */ jsx(Message, {
@@ -419,25 +331,10 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 										setEditingMessageId(void 0);
 									}
 								}, message.id) : /* @__PURE__ */ jsxs(Fragment, { children: [
-									message.parts.map((part, partIndex) => {
-										const defaultRender = () => renderDefaultPart(message, part, partIndex, messageIndex === transcriptMessages.length - 1, status);
-										const custom = renderPart?.({
-											message,
-											part,
-											partIndex,
-											defaultRender
-										});
-										if (isSourceUrlPart(part) || isSourceDocumentPart(part)) {
-											if (custom !== void 0) return custom ? /* @__PURE__ */ jsx(MessageContent, { children: custom }, getPartKey(part, partIndex)) : null;
-											const previous = message.parts[partIndex - 1];
-											if (isSourceUrlPart(previous) || isSourceDocumentPart(previous)) return null;
-											return /* @__PURE__ */ jsx(MessageContent, { children: renderSources(getSourceRun(message.parts, partIndex)) }, getPartKey(part, partIndex));
-										}
-										const rendered = custom === void 0 ? defaultRender() : custom;
-										return rendered ? /* @__PURE__ */ jsxs(MessageContent, { children: [rendered, isCompactedPart(message, part, partIndex) ? /* @__PURE__ */ jsx("div", {
-											className: "message__compacted",
-											children: "Output truncated for storage"
-										}) : null] }, getPartKey(part, partIndex)) : null;
+									/* @__PURE__ */ jsx(AgentMessageParts, {
+										message,
+										status: messageIndex === messages.length - 1 ? status : "ready",
+										renderPart
 									}),
 									renderMessageAfter?.({
 										message,
@@ -449,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);
@@ -471,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", {
@@ -485,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: [
@@ -501,25 +397,25 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 											children: /* @__PURE__ */ jsx(QueueIcon, {})
 										}),
 										/* @__PURE__ */ jsx("span", {
-											className: "agent-chat__queued-text",
+											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,
@@ -589,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

@@ -66,7 +66,7 @@ function AgentChatMessageEditor({ message, originalText, onCancel, onSubmit, onS
 						onCancel();
 					}
 				}),
-				error ? /* @__PURE__ */ jsx(Field.Error, { errors: [error] }) : null
+				error ? /* @__PURE__ */ jsx(Field.Errors, { errors: [error] }) : null
 			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "message__edit-actions",
@@ -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-9UtZwb0J.js";
-import { C as LinkIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { D as LinkIcon } from "../icons-CQJ-aMnI.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-BmB4Xaqq.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-Bfp5PAg3.js";
 import { CUSTOM_MCP_SERVER_CARD } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -131,7 +131,7 @@ function AgentConnectionPanel({ className, commands: commandsProp, defaultTarget
 			/* @__PURE__ */ jsxs("fieldset", {
 				className: "agent-connect__targets",
 				children: [/* @__PURE__ */ jsx("legend", {
-					className: "agent-connect__legend",
+					className: "agent-connect__legend sigvelo-visually-hidden",
 					children: "Agent connection target"
 				}), commands.map((command) => /* @__PURE__ */ jsx(Button, {
 					variant: "ghost",

package/dist/components/AgentMessageParts.d.ts

@@ -0,0 +1,2 @@
+import { i as AgentMessageRenderPartContext, n as AgentMessageParts, r as AgentMessagePartsProps, t as AgentMessagePart } from "../AgentMessageParts-CyD2UB3V.js";
+export { AgentMessagePart, AgentMessageParts, AgentMessagePartsProps, AgentMessageRenderPartContext };