@mcp-b/react-components 0.3.0 → 0.4.0

package/dist/components/PromptInput.js

@@ -1,9 +1,10 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as SpinnerIcon, C as MonitorIcon, D as PlusIcon, N as WarningIcon, T as PencilIcon, i as ArrowUpIcon, j as SquareIcon, v as ImageIcon } from "../icons-DQC4Zw5R.js";
+import { A as SpinnerIcon, C as MonitorIcon, D as PlusIcon, F as XIcon, N as WarningIcon, T as PencilIcon, h as FileIcon, i as ArrowUpIcon, j as SquareIcon, s as ChevronDownIcon, v as ImageIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { t as AttachmentPreview } from "../attachment-preview-ChtC3HiU.js";
 import { Combobox, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator } from "./Combobox.js";
-import { MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRoot, MenuTrigger } from "./Menu.js";
+import { MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuTrigger } from "./Menu.js";
 import { Select, SelectContent, SelectItem, SelectPortal, SelectPositioner, SelectTrigger, SelectValue } from "./Select.js";
 import { Tab, TabPanel, TabsList } from "./Tabs.js";
 import * as React from "react";
@@ -339,6 +340,59 @@ function PromptInputHeader({ className, children, ref, ...props }) {
 		children
 	});
 }
+/**
+* One pending attachment chip: image files show a thumbnail, everything else
+* a file icon and name. The corner button removes it from the pending list.
+*/
+function PromptInputAttachment({ file, className, ref, ...props }) {
+	const attachments = usePromptInputAttachments();
+	const isImage = file.mediaType.startsWith("image/");
+	const name = file.filename ?? "attachment";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("prompt-input__attachment", className),
+		"data-image": isImage || void 0,
+		...props,
+		children: [isImage ? /* @__PURE__ */ jsx(AttachmentPreview, {
+			url: file.url,
+			filename: file.filename,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "prompt-input__attachment-zoom",
+				"aria-label": `Preview ${name}`,
+				children: /* @__PURE__ */ jsx("img", {
+					className: "prompt-input__attachment-thumb",
+					src: file.url,
+					alt: ""
+				})
+			})
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FileIcon, { className: "prompt-input__attachment-icon" }), /* @__PURE__ */ jsx("span", {
+			className: "prompt-input__attachment-name",
+			children: name
+		})] }), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "prompt-input__attachment-remove",
+			"aria-label": `Remove ${name}`,
+			onClick: () => attachments.remove(file.id),
+			children: /* @__PURE__ */ jsx(XIcon, { size: 12 })
+		})]
+	});
+}
+/**
+* The pending-attachment chip row. Renders nothing while the list is empty,
+* so it can sit in the composer unconditionally — files added via the file
+* dialog, paste, or drop appear here until submit sends and clears them.
+*/
+function PromptInputAttachments({ className, children, ref, ...props }) {
+	const attachments = usePromptInputAttachments();
+	if (attachments.files.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("prompt-input__attachments", className),
+		...props,
+		children: attachments.files.map((file) => /* @__PURE__ */ jsx(React.Fragment, { children: children ? children(file) : /* @__PURE__ */ jsx(PromptInputAttachment, { file }) }, file.id))
+	});
+}
 function PromptInputBody({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -525,6 +579,60 @@ function PromptInputActionAddScreenshot({ label = "Take screenshot", onClick, ch
 		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MonitorIcon, { className: "prompt-input__action-menu-icon" }), label] })
 	});
 }
+const PERMISSION_MODES = [{
+	value: "ask",
+	label: "Ask for approval",
+	description: "Pause and ask before sensitive actions run"
+}, {
+	value: "bypass",
+	label: "Bypass permissions",
+	description: "Approve every request automatically"
+}];
+/**
+* Footer control for choosing how approval requests are handled — ask each
+* time, or bypass. Purely a picker: the auto-approve behavior lives with
+* whoever owns the approvals (`AgentChat` wires both ends).
+*/
+function PromptInputPermissionSelector({ value, onValueChange, question = "How should agent actions be approved?" }) {
+	return /* @__PURE__ */ jsxs(MenuRoot, { children: [/* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsxs(PromptInputButton, {
+		size: "sm",
+		className: "prompt-input__permissions-trigger",
+		"data-mode": value,
+		"aria-label": (PERMISSION_MODES.find((mode) => mode.value === value) ?? PERMISSION_MODES[0]).label,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "prompt-input__permissions-current",
+			children: PERMISSION_MODES.map((mode) => /* @__PURE__ */ jsxs("span", {
+				className: "prompt-input__permissions-current-option",
+				"data-active": mode.value === value || void 0,
+				children: [mode.value === "bypass" ? /* @__PURE__ */ jsx(WarningIcon, { size: 14 }) : null, mode.label]
+			}, mode.value))
+		}), /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12 })]
+	}) }), /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(MenuPositioner, { children: /* @__PURE__ */ jsxs(MenuPopup, {
+		className: "prompt-input__permissions-menu",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "prompt-input__permissions-question",
+			children: question
+		}), /* @__PURE__ */ jsx(MenuRadioGroup, {
+			value,
+			onValueChange: (mode) => onValueChange(mode),
+			children: PERMISSION_MODES.map((mode) => /* @__PURE__ */ jsxs(MenuRadioItem, {
+				value: mode.value,
+				closeOnClick: true,
+				className: "prompt-input__permissions-option",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "prompt-input__permissions-option-text",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "prompt-input__permissions-option-label",
+						children: mode.label
+					}), /* @__PURE__ */ jsx("span", {
+						className: "prompt-input__permissions-option-description",
+						children: mode.description
+					})]
+				}), /* @__PURE__ */ jsx(MenuRadioItemIndicator, { className: "prompt-input__permissions-check" })]
+			}, mode.value))
+		})]
+	}) }) })] });
+}
 function PromptInputSubmit({ className, status = "ready", onStop, variant = "normal", color = "primary", size = "icon", onClick, children, label, ref, ...props }) {
 	const isStopping = status === "submitted" || status === "streaming";
 	const resolvedLabel = label ?? defaultSubmitLabel(status);
@@ -549,12 +657,22 @@ function PromptInputSubmit({ className, status = "ready", onStop, variant = "nor
 		children: children ?? defaultSubmitIcon(status)
 	});
 }
+function getPausedExecution(part) {
+	if (part.state !== "output-available") return void 0;
+	const output = part.output;
+	return output?.status === "paused" && typeof output.executionId === "string" ? output : void 0;
+}
+/** The id a response must carry: the approval id, or the paused run's executionId. */
+function getApprovalRequestId(part) {
+	if (part.state === "approval-requested") return part.approval.id;
+	return getPausedExecution(part)?.executionId;
+}
 /** Derives pending tool approvals straight from the messages — no app-owned shapes. */
-function getPendingToolApprovals(messages) {
+function getPendingToolApprovals(messages, { pausedExecutions = false } = {}) {
 	const pending = [];
 	messages.forEach((message, messageIndex) => {
 		message.parts.forEach((part, partIndex) => {
-			if (isToolOrDynamicToolUIPart(part) && part.state === "approval-requested") pending.push({
+			if (isToolOrDynamicToolUIPart(part) && (part.state === "approval-requested" || pausedExecutions && getPausedExecution(part))) pending.push({
 				message,
 				messageIndex,
 				part,
@@ -575,30 +693,33 @@ function formatApprovalValue(value) {
 * sends the text as the native approval `reason`. Submit (or Enter) sends the
 * current selection — approve by default.
 */
-function PromptInputApproval({ part, onRespond, onSkip, question, count, className, ref, ...props }) {
+function PromptInputApproval({ part, onRespond, executionApprovals, onSkip, question, count, className, ref, ...props }) {
 	const [selected, setSelected] = React.useState("approve");
 	const [reason, setReason] = React.useState("");
 	const [busy, setBusy] = React.useState(false);
 	const yesRef = React.useRef(null);
 	const reasonRef = React.useRef(null);
 	const approval = part.state === "approval-requested" ? part.approval : void 0;
-	const approvalId = approval?.id;
+	const paused = getPausedExecution(part);
+	const approvalId = approval?.id ?? paused?.executionId;
 	React.useEffect(() => {
 		setSelected("approve");
 		setReason("");
 		setBusy(false);
 	}, [approvalId]);
-	if (!approval) return null;
+	if (approval ? !onRespond : !(paused && executionApprovals)) return null;
 	const toolName = getToolName(part);
 	const respond = (approved) => {
 		if (busy) return;
 		setBusy(true);
 		const trimmed = reason.trim();
-		onRespond({
+		const denyReason = !approved && trimmed ? trimmed : void 0;
+		if (approval) onRespond?.({
 			id: approval.id,
 			approved,
-			reason: !approved && trimmed ? trimmed : void 0
+			reason: denyReason
 		});
+		else if (paused) approved ? executionApprovals?.approve(paused.executionId) : executionApprovals?.reject(paused.executionId, denyReason);
 	};
 	const submit = () => respond(selected === "approve");
 	const input = "input" in part ? part.input : void 0;
@@ -618,16 +739,33 @@ function PromptInputApproval({ part, onRespond, onSkip, question, count, classNa
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "prompt-input__approval-question",
-				children: [/* @__PURE__ */ jsx("span", { children: question ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+				children: [/* @__PURE__ */ jsx("span", { children: question ?? (paused ? /* @__PURE__ */ jsx(Fragment, { children: "The agent's code is paused on these calls. Allow it to continue?" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
 					"Do you want to allow the agent to run ",
 					/* @__PURE__ */ jsx("code", { children: toolName }),
 					"?"
-				] }) }), count && count > 1 ? /* @__PURE__ */ jsxs("span", {
+				] })) }), count && count > 1 ? /* @__PURE__ */ jsxs("span", {
 					className: "prompt-input__approval-count",
 					children: ["1 of ", count]
 				}) : null]
 			}),
-			input !== void 0 ? /* @__PURE__ */ jsx("div", {
+			paused ? /* @__PURE__ */ jsx("div", {
+				className: "prompt-input__approval-preview",
+				children: paused.pending.map((action) => /* @__PURE__ */ jsxs("div", {
+					className: "prompt-input__approval-preview-row",
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "prompt-input__approval-preview-key",
+							children: [
+								action.connector,
+								".",
+								action.method
+							]
+						}),
+						" ",
+						action.args === void 0 ? null : formatApprovalValue(action.args)
+					]
+				}, action.seq))
+			}) : input !== void 0 ? /* @__PURE__ */ jsx("div", {
 				className: "prompt-input__approval-preview",
 				children: inputEntries ? inputEntries.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
 					className: "prompt-input__approval-preview-row",
@@ -844,11 +982,11 @@ function fileToPart(file) {
 	};
 }
 function revokeFileUrls(files) {
-	for (const file of files) if (file.url?.startsWith("blob:")) URL.revokeObjectURL(file.url);
+	for (const file of files) if (file.url.startsWith("blob:")) URL.revokeObjectURL(file.url);
 }
 async function resolveSubmittedFile(file) {
 	const { id: _id, ...part } = file;
-	if (!part.url?.startsWith("blob:")) return part;
+	if (!part.url.startsWith("blob:")) return part;
 	const dataUrl = await blobUrlToDataUrl(part.url);
 	return {
 		...part,
@@ -909,4 +1047,4 @@ function createId() {
 	return globalThis.crypto?.randomUUID?.() ?? `prompt-input-${Date.now()}-${Math.random()}`;
 }
 //#endregion
-export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputProvider, PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };
+export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputSelect, PromptInputSelectContent, PromptInputSelectItem, PromptInputSelectTrigger, PromptInputSelectValue, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments, usePromptInputController, usePromptInputReferencedSources, useProviderAttachments };

package/dist/components/Suggestion.d.ts

@@ -0,0 +1,43 @@
+import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
+import * as React from "react";
+
+//#region src/components/Suggestion.d.ts
+interface SuggestionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * A horizontally scrollable row of prompt suggestions, typically shown above
+ * the composer or in the empty state. Children are {@link Suggestion} chips.
+ *
+ * Ported from AI Elements' Suggestions. Sigvelo changes: design-system Button
+ * chips and token-based styling; scrollbars hidden, scroll by wheel/touch.
+ */
+declare function Suggestions({
+  className,
+  children,
+  ref,
+  ...props
+}: SuggestionsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface SuggestionProps extends Omit<ButtonProps, "onClick" | "className"> {
+  className?: string;
+  /** The suggestion text — the chip label and the `onClick` payload. */
+  suggestion: string;
+  /** Called with the suggestion text; typically feeds `sendMessage`. */
+  onClick?: (suggestion: string) => void;
+}
+/** One pill-shaped suggestion chip. Renders `suggestion` unless children are given. */
+declare function Suggestion({
+  className,
+  suggestion,
+  onClick,
+  variant,
+  color,
+  size,
+  children,
+  ref,
+  ...props
+}: SuggestionProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+//#endregion
+export { Suggestion, SuggestionProps, Suggestions, SuggestionsProps };

package/dist/components/Suggestion.js

@@ -0,0 +1,39 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { Button } from "./Button.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Suggestion.tsx
+/**
+* A horizontally scrollable row of prompt suggestions, typically shown above
+* the composer or in the empty state. Children are {@link Suggestion} chips.
+*
+* Ported from AI Elements' Suggestions. Sigvelo changes: design-system Button
+* chips and token-based styling; scrollbars hidden, scroll by wheel/touch.
+*/
+function Suggestions({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("suggestions", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "suggestions__row",
+			children
+		})
+	});
+}
+/** One pill-shaped suggestion chip. Renders `suggestion` unless children are given. */
+function Suggestion({ className, suggestion, onClick, variant = "outline", color = "neutral", size = "sm", children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "button",
+		variant,
+		color,
+		size,
+		className: cx("suggestions__chip", className),
+		onClick: () => onClick?.(suggestion),
+		...props,
+		children: children ?? suggestion
+	});
+}
+//#endregion
+export { Suggestion, Suggestions };

package/dist/components/ThinkChat.d.ts

@@ -1,3 +1,4 @@
+import { ExecutionApprovals } from "./PromptInput.js";
 import { AgentChatProps, AgentChatRenderPartContext } from "./AgentChat.js";
 import { BrowserLiveView, BrowserLiveViewProps } from "./BrowserLiveView.js";
 import { BrowserReplay, BrowserReplayProps } from "./BrowserReplay.js";
@@ -34,8 +35,26 @@ interface ThinkChatMessagesProps extends ThinkChatActivityRendererOptions {
   placeholder?: string;
   /** Rendered after each message (e.g. per-message actions). */
   renderMessageAfter?: AgentChatProps["renderMessageAfter"];
+  /** Prompt suggestions shown above the composer; clicking one sends it. */
+  suggestions?: AgentChatProps["suggestions"];
+  /**
+   * Overrides the built-in connection notice (derived from the hook's
+   * `isRecovering`/`connectionError`) shown between transcript and composer.
+   */
+  notice?: AgentChatProps["notice"];
   /** Full replacement for part rendering; wins over excludeTools/toolRenderers. */
   renderPart?: AgentChatProps["renderPart"];
+  /**
+   * Surfaces paused codemode executions in the composer's approval UI —
+   * the same confirmation tool approvals use. See {@link ExecutionApprovals}.
+   */
+  executionApprovals?: ExecutionApprovals;
+  /**
+   * Shows a Context ring in the composer footer — how much of the model's
+   * window the conversation occupies, from `metadata.usage` on the newest
+   * message that reports it.
+   */
+  contextWindow?: AgentChatProps["contextWindow"];
 }
 /**
  * Bespoke rendering for one tool inside the activity log. Both hooks fall
@@ -98,6 +117,8 @@ declare function ThinkChatMessages({
   renderPart,
   excludeTools,
   toolRenderers,
+  executionApprovals,
+  notice,
   ...props
 }: ThinkChatMessagesProps): React.JSX.Element;
 /** Agent work (reasoning, tool calls, step boundaries) vs. content shown to the user. */
@@ -183,4 +204,4 @@ declare const ThinkChat: {
   createActivityRenderer: typeof createThinkChatActivityRenderer;
 };
 //#endregion
-export { BrowserLiveView, type BrowserLiveViewProps, BrowserReplay, type BrowserReplayProps, type FileInfo, ThinkChat, ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatMessages, ThinkChatMessagesProps, ThinkChatProvider, ThinkChatProviderProps, ThinkChatRoot, ThinkChatRootProps, ThinkChatToolRenderer, ThinkChatToolRenderers, type UseWorkspaceOptions, WorkspaceExplorer, type WorkspaceExplorerProps, type WorkspaceFileState, type WorkspaceInfo, type WorkspaceSource, type WorkspaceState, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, useThinkChat, useWorkspace };
+export { BrowserLiveView, type BrowserLiveViewProps, BrowserReplay, type BrowserReplayProps, type ExecutionApprovals, type FileInfo, ThinkChat, ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatMessages, ThinkChatMessagesProps, ThinkChatProvider, ThinkChatProviderProps, ThinkChatRoot, ThinkChatRootProps, ThinkChatToolRenderer, ThinkChatToolRenderers, type UseWorkspaceOptions, WorkspaceExplorer, type WorkspaceExplorerProps, type WorkspaceFileState, type WorkspaceInfo, type WorkspaceSource, type WorkspaceState, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, useThinkChat, useWorkspace };

package/dist/components/ThinkChat.js

@@ -13,7 +13,8 @@ import { useAgent } from "agents/react";
 //#region src/components/ThinkChat.tsx
 /**
 * Think-specific chat rendering: interprets a Think agent's UIMessage stream
-* (reasoning + workspace/skill/fetch/browser tool parts) into Activity blocks.
+* (reasoning + workspace/skill/fetch/browser/execute tool parts) into
+* Activity blocks.
 *
 * Every shape here mirrors an upstream contract — see docs/think-chat.md
 * ("Upstream source map" and the re-alignment checklist) for where each comes from,
@@ -55,6 +56,9 @@ const BROWSER_TOOL_NAMES = new Set([
 function isBrowserToolPart(part) {
 	return isToolUIPart(part) && BROWSER_TOOL_NAMES.has(getToolName(part));
 }
+function isExecuteToolPart(part) {
+	return isToolUIPart(part) && getToolName(part) === "execute";
+}
 const ThinkChatContext = React.createContext(null);
 function useThinkChatContext(component) {
 	const context = React.useContext(ThinkChatContext);
@@ -109,13 +113,17 @@ function ThinkChatRoot({ agent: agentOption, name, children }) {
 * inside the log) or `excludeTools` + your own `renderPart` (standalone
 * card) — see README "App-specific tools" and the Custom Tool Panel story.
 */
-function ThinkChatMessages({ renderPart, excludeTools, toolRenderers, ...props }) {
+function ThinkChatMessages({ renderPart, excludeTools, toolRenderers, executionApprovals, notice, ...props }) {
 	const chat = useThinkChatContext("ThinkChat.Messages");
 	const status = toAgentChatStatus(chat);
 	const defaultRenderPart = React.useMemo(() => createThinkChatActivityRenderer({
 		excludeTools,
 		toolRenderers
 	}), [excludeTools, toolRenderers]);
+	const connectionNotice = chat.isRecovering ? /* @__PURE__ */ jsx(Fragment, { children: "Reconnecting to the agent…" }) : chat.connectionError ? /* @__PURE__ */ jsxs("span", {
+		"data-tone": "danger",
+		children: ["Connection lost", chat.connectionError.reason ? ` — ${chat.connectionError.reason}` : ""]
+	}) : void 0;
 	return /* @__PURE__ */ jsx(AgentChat, {
 		...props,
 		renderPart: renderPart ?? defaultRenderPart,
@@ -123,9 +131,15 @@ function ThinkChatMessages({ renderPart, excludeTools, toolRenderers, ...props }
 		status,
 		onStop: chat.stop,
 		onApprovalResponse: chat.addToolApprovalResponse,
-		onSubmit: ({ text }) => {
+		executionApprovals,
+		notice: notice ?? connectionNotice,
+		onRegenerate: (messageId) => void chat.regenerate({ messageId }),
+		onSubmit: ({ text, files }) => {
 			const trimmed = text.trim();
-			if (trimmed) chat.sendMessage({ text: trimmed });
+			if (trimmed || files.length) chat.sendMessage({
+				text: trimmed,
+				files
+			});
 		}
 	});
 }
@@ -177,6 +191,7 @@ function describeThinkChatActivityPart(part, toolRenderers) {
 	if (isSkillToolPart(part)) return describeSkillToolPart(part);
 	if (isFetchToolPart(part)) return describeFetchToolPart(part);
 	if (isBrowserToolPart(part)) return describeBrowserToolPart(part);
+	if (isExecuteToolPart(part)) return describeExecuteToolPart(part);
 	if (isToolUIPart(part)) {
 		const name = getToolName(part);
 		const verb = isPartFailed(part) ? `${name} failed` : isPartWorking(part) ? `Running ${name}` : `Ran ${name}`;
@@ -251,6 +266,14 @@ function describeBrowserToolPart(part) {
 	})();
 	return failed ? `${label} · failed` : label;
 }
+function describeExecuteToolPart(part) {
+	const output = part.state === "output-available" ? part.output : void 0;
+	if (isPartFailed(part) || output?.status === "error") return "Code failed";
+	if (output?.status === "paused") return "Code waiting for approval";
+	const label = isPartWorking(part) ? "Running code" : "Ran code";
+	const snippet = summarizeToolInput(part.input);
+	return snippet ? `${label} · ${snippet}` : label;
+}
 function describeFetchToolPart(part) {
 	const target = part.input?.url ?? part.input?.path ?? "";
 	const output = part.state === "output-available" ? part.output : void 0;
@@ -266,6 +289,7 @@ function summarizeActivitySteps(parts) {
 	let skillParts = 0;
 	let fetches = 0;
 	let browses = 0;
+	let codeRuns = 0;
 	for (const part of parts) if (isReasoningUIPart(part)) thoughts++;
 	else if (isWorkspaceToolPart(part)) {
 		const name = getToolName(part);
@@ -275,6 +299,7 @@ function summarizeActivitySteps(parts) {
 		if (typeof part.input?.name === "string") skillNames.add(part.input.name);
 	} else if (isFetchToolPart(part)) fetches++;
 	else if (isBrowserToolPart(part)) browses++;
+	else if (isExecuteToolPart(part)) codeRuns++;
 	else if (isToolUIPart(part)) otherTools.add(getToolName(part));
 	const count = (name) => byTool.get(name) ?? 0;
 	const files = (n) => n === 1 ? "a file" : `${n} files`;
@@ -292,6 +317,7 @@ function summarizeActivitySteps(parts) {
 	if (count("list") > 0) segments.push("listed files");
 	if (fetches > 0) segments.push(fetches === 1 ? "fetched a URL" : `fetched ${fetches} URLs`);
 	if (browses > 0) segments.push("used the browser");
+	if (codeRuns > 0) segments.push("ran code");
 	if (commands > 0) segments.push(commands === 1 ? "ran a command" : `ran ${commands} commands`);
 	for (const tool of otherTools) segments.push(`used ${tool}`);
 	if (segments.length === 0) return "Worked";
@@ -359,6 +385,10 @@ function ThinkChatActivityStep({ text, part, toolRenderers }) {
 		label: text,
 		children: /* @__PURE__ */ jsx(ThinkChatBrowserPanel, { part })
 	});
+	if (isExecuteToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
+		label: text,
+		children: /* @__PURE__ */ jsx(ThinkChatExecutePanel, { part })
+	});
 	return /* @__PURE__ */ jsx(ActivityItem, { children: text });
 }
 function renderDeniedPanel(label, reason) {
@@ -552,6 +582,50 @@ function findBrowserResultMedia(value, depth = 0) {
 	visit(value, depth);
 	return media;
 }
+function ExecuteCodeView({ code, output, hideResult }) {
+	const sections = [
+		output && "logs" in output && output.logs?.length ? output.logs.join("\n") : "",
+		output?.status === "error" ? output.error : "",
+		output?.status === "paused" ? formatPendingActions(output.pending) : "",
+		output?.status === "completed" && output.result !== void 0 && !hideResult ? typeof output.result === "string" ? output.result : JSON.stringify(output.result, null, 2) : ""
+	].filter(Boolean);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [code ? /* @__PURE__ */ jsx(CodeBlock, {
+		className: "activity__code-block",
+		code,
+		language: "ts"
+	}) : null, sections.length ? /* @__PURE__ */ jsx(ActivityOutput, { children: sections.join("\n\n") }) : null] });
+}
+function formatPendingActions(pending) {
+	return pending.map((action) => {
+		const args = action.args === void 0 ? "" : JSON.stringify(action.args);
+		return `awaiting approval: ${action.connector}.${action.method}(${args})`;
+	}).join("\n");
+}
+function executeStatusText(output) {
+	if (!output) return void 0;
+	return output.status === "paused" ? "paused · needs approval" : output.status;
+}
+/** The codemode execute tool as an activity panel: highlighted TypeScript
+plus logs, result, and the paused pending-approval list. */
+function ThinkChatExecutePanel({ part }) {
+	if (part.state === "output-error") return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: "Code",
+		text: part.errorText,
+		status: "error",
+		error: true
+	});
+	if (part.state === "output-denied") return renderDeniedPanel("Code", part.approval.reason);
+	const output = part.state === "output-available" ? part.output : void 0;
+	return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: "Code",
+		status: executeStatusText(output),
+		error: output?.status === "error",
+		children: /* @__PURE__ */ jsx(ExecuteCodeView, {
+			code: part.input?.code ?? "",
+			output
+		})
+	});
+}
 function ThinkChatBrowserPanel({ part }) {
 	const [seenAt] = React.useState(() => Date.now());
 	if (part.state === "output-error") return /* @__PURE__ */ jsx(ActivityPanel, {
@@ -566,12 +640,6 @@ function ThinkChatBrowserPanel({ part }) {
 		const code = part.input?.code ?? "";
 		const media = output?.status === "completed" ? findBrowserResultMedia(output.result) : {};
 		const hasMedia = Boolean(media.liveViewUrl || media.screenshot);
-		const sections = [
-			output && "logs" in output && output.logs?.length ? output.logs.join("\n") : "",
-			output?.status === "error" ? output.error : "",
-			output?.status === "completed" && output.result !== void 0 && !hasMedia ? typeof output.result === "string" ? output.result : JSON.stringify(output.result, null, 2) : ""
-		].filter(Boolean);
-		const status = !output ? void 0 : output.status === "paused" ? "paused · needs approval" : output.status === "error" ? "error" : "completed";
 		const browserView = media.liveViewUrl ? /* @__PURE__ */ jsx(BrowserLiveView, {
 			url: media.liveViewUrl,
 			expiresAt: seenAt + (media.expiresInMs ?? 300 * 1e3),
@@ -584,16 +652,16 @@ function ThinkChatBrowserPanel({ part }) {
 			src: media.screenshot,
 			alt: "Browser screenshot"
 		}) : null;
-		const codeView = /* @__PURE__ */ jsxs(Fragment, { children: [code ? /* @__PURE__ */ jsx(CodeBlock, {
-			className: "activity__code-block",
+		const codeView = /* @__PURE__ */ jsx(ExecuteCodeView, {
 			code,
-			language: "js"
-		}) : null, sections.length ? /* @__PURE__ */ jsx(ActivityOutput, { children: sections.join("\n\n") }) : null] });
+			output,
+			hideResult: hasMedia
+		});
 		return /* @__PURE__ */ jsx(ActivityPanel, {
 			label: "Browser",
-			status,
+			status: executeStatusText(output),
 			error: output?.status === "error",
-			children: browserView && (code || sections.length) ? /* @__PURE__ */ jsxs(Tabs, {
+			children: browserView && code ? /* @__PURE__ */ jsxs(Tabs, {
 				className: "activity__browser-tabs",
 				defaultValue: "browser",
 				children: [
@@ -616,7 +684,7 @@ function ThinkChatBrowserPanel({ part }) {
 						children: codeView
 					})
 				]
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [browserView, code || sections.length ? codeView : null] })
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [browserView, codeView] })
 		});
 	}
 	const output = part.state === "output-available" ? part.output : void 0;

package/dist/styles/agent-chat.css

@@ -19,3 +19,22 @@
   padding: 0.75rem;
   background-color: var(--sigvelo-color-surface);
 }
+
+/* Transient status pill between transcript and composer (recovery, errors). */
+.agent-chat__notice {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-block-end: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.agent-chat__notice[data-tone="danger"],
+.agent-chat__notice [data-tone="danger"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.agent-chat__suggestions {
+  margin-block-end: 0.5rem;
+}

package/dist/styles/attachment-preview.css

@@ -0,0 +1,21 @@
+/* Click-to-zoom lightbox for image attachments (composer chips + messages).
+   Scoped as .dialog__popup.attachment-preview so it beats the base dialog
+   sizing regardless of import order. */
+.dialog__popup.attachment-preview {
+  width: fit-content;
+  max-width: min(90vw, 56rem);
+}
+
+.attachment-preview__image {
+  display: block;
+  max-width: 100%;
+  max-height: 70vh;
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.attachment-preview__name {
+  margin-block-start: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--sigvelo-color-text-muted);
+  text-align: center;
+}