@mcp-b/react-components 0.3.0 → 0.5.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 SquareIcon, E as PlusIcon, M as WarningIcon, P as XIcon, S as MonitorIcon, _ as ImageIcon, i as ArrowUpIcon, k as SpinnerIcon, m as FileIcon, o as ChevronDownIcon, w as PencilIcon } from "../icons-CZRH4FVH.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,
@@ -363,7 +417,7 @@ function PromptInputTools({ className, children, ref, ...props }) {
 		children
 	});
 }
-const MIN_TEXTAREA_HEIGHT_PX = 48;
+const MIN_TEXTAREA_HEIGHT_PX = 24;
 const MAX_TEXTAREA_HEIGHT_PX = 240;
 function PromptInputTextarea({ className, placeholder = "How can I help?", rows = 1, minHeight = MIN_TEXTAREA_HEIGHT_PX, maxHeight = MAX_TEXTAREA_HEIGHT_PX, onChange, onCompositionEnd, onCompositionStart, onKeyDown, onInput, onPaste, ref, ...props }) {
 	const { submit } = usePromptInputContext("PromptInputTextarea");
@@ -446,7 +500,7 @@ function PromptInputTextarea({ className, placeholder = "How can I help?", rows
 	});
 }
 function PromptInputButton({ className, tooltip, variant = "ghost", color = "neutral", size, children, "aria-label": ariaLabel, ref, ...props }) {
-	const resolvedSize = size ?? (React.Children.count(children) > 1 ? "sm" : "icon");
+	const resolvedSize = size ?? (React.Children.count(children) > 1 ? "xs" : "icon-xs");
 	const tooltipConfig = typeof tooltip === "string" ? { content: tooltip } : tooltip;
 	const fallbackLabel = ariaLabel ?? (typeof tooltipConfig?.content === "string" ? tooltipConfig.content : void 0);
 	const button = /* @__PURE__ */ jsx(Button, {
@@ -525,7 +579,61 @@ function PromptInputActionAddScreenshot({ label = "Take screenshot", onClick, ch
 		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MonitorIcon, { className: "prompt-input__action-menu-icon" }), label] })
 	});
 }
-function PromptInputSubmit({ className, status = "ready", onStop, variant = "normal", color = "primary", size = "icon", onClick, children, label, ref, ...props }) {
+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: "xs",
+		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-sm", onClick, children, label, ref, ...props }) {
 	const isStopping = status === "submitted" || status === "streaming";
 	const resolvedLabel = label ?? defaultSubmitLabel(status);
 	return /* @__PURE__ */ jsx(Button, {
@@ -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",
@@ -697,7 +835,7 @@ function PromptInputApproval({ part, onRespond, onSkip, question, count, classNa
 						}),
 						onSkip ? /* @__PURE__ */ jsx(Button, {
 							type: "button",
-							size: "sm",
+							size: "xs",
 							variant: "ghost",
 							color: "neutral",
 							className: "prompt-input__approval-skip",
@@ -707,7 +845,7 @@ function PromptInputApproval({ part, onRespond, onSkip, question, count, classNa
 						}) : null,
 						/* @__PURE__ */ jsxs(Button, {
 							type: "button",
-							size: "sm",
+							size: "xs",
 							color: "primary",
 							className: "prompt-input__approval-submit",
 							disabled: busy,
@@ -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/Queue.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { d as DotIcon, h as FileIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
+import { a as CheckIcon, c as ChevronRightIcon, m as FileIcon, u as DotIcon } from "../icons-CZRH4FVH.js";
 import { Button } from "./Button.js";
 import { Badge } from "./Badge.js";
 import { ScrollArea } from "./ScrollArea.js";

package/dist/components/Reasoning.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as BrainIcon, l as ChevronRightIcon } from "../icons-DQC4Zw5R.js";
+import { c as ChevronRightIcon } from "../icons-CZRH4FVH.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cjk } from "@streamdown/cjk";
@@ -140,22 +140,14 @@ function ReasoningTrigger({ className, children, getThinkingMessage = defaultGet
 		"data-streaming": isStreaming ? "" : void 0,
 		...props,
 		unstyled: true,
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "reasoning__trigger-leading-icon",
-				"aria-hidden": "true",
-				children: /* @__PURE__ */ jsx(BrainIcon, {})
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "reasoning__trigger-label",
-				children: getThinkingMessage(isStreaming, duration)
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "reasoning__trigger-icon",
-				"aria-hidden": "true",
-				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-			})
-		]
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "reasoning__trigger-label",
+			children: getThinkingMessage(isStreaming, duration)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "reasoning__trigger-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+		})]
 	});
 }
 const streamdownPlugins = {

package/dist/components/Select.js

@@ -1,4 +1,4 @@
-import { i as ArrowUpIcon, o as CheckIcon, t as ArrowDownIcon } from "../icons-DQC4Zw5R.js";
+import { a as CheckIcon, i as ArrowUpIcon, t as ArrowDownIcon } from "../icons-CZRH4FVH.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/Sources.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { b as LinkIcon, l as ChevronRightIcon } from "../icons-DQC4Zw5R.js";
+import { c as ChevronRightIcon, y as LinkIcon } from "../icons-CZRH4FVH.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Sources.tsx

package/dist/components/Stepper.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as SpinnerIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
+import { a as CheckIcon, k as SpinnerIcon } from "../icons-CZRH4FVH.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Stepper.tsx

package/dist/components/Task.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { h as FileIcon, k as SearchIcon, l as ChevronRightIcon } from "../icons-DQC4Zw5R.js";
+import { O as SearchIcon, c as ChevronRightIcon, m as FileIcon } from "../icons-CZRH4FVH.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Task.tsx

package/dist/components/Terminal.js

@@ -1,9 +1,9 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { F as XIcon, M as TerminalIcon } from "../icons-DQC4Zw5R.js";
+import { P as XIcon, j as TerminalIcon } from "../icons-CZRH4FVH.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
+import { t as CopyButton } from "../copy-button-BmJEAKuP.js";
 import { Badge } from "./Badge.js";
-import { t as CopyButton } from "../copy-button-Dd6DEhOm.js";
 import { ScrollArea } from "./ScrollArea.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/TestResults.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as SpinnerIcon, F as XIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
+import { P as XIcon, a as CheckIcon, c as ChevronRightIcon, k as SpinnerIcon } from "../icons-CZRH4FVH.js";
 import { Badge } from "./Badge.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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,24 @@ interface ThinkChatMessagesProps extends ThinkChatActivityRendererOptions {
   placeholder?: string;
   /** Rendered after each message (e.g. per-message actions). */
   renderMessageAfter?: AgentChatProps["renderMessageAfter"];
+  /**
+   * 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
@@ -52,9 +69,9 @@ type ThinkChatToolRenderers = Record<string, ThinkChatToolRenderer>;
 interface ThinkChatActivityRendererOptions {
   /**
    * Tool names to keep out of activity folding entirely — the run splits
-   * around them and they fall through to your own renderPart / the generic
-   * Tool card. For tools that should stay in the log with custom UI, use
-   * `toolRenderers` instead.
+   * around them and they fall through to your own renderPart / AgentChat's
+   * generic standalone activity row. For tools that should stay in the log
+   * with custom UI, use `toolRenderers` instead.
    */
   excludeTools?: readonly string[];
   /** Per-tool label/panel overrides inside the activity log, keyed by tool name. */
@@ -98,6 +115,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. */
@@ -136,7 +155,7 @@ declare function ThinkChatActivity({
  * parts (reasoning + tool calls) into one collapsed Activity box. Everything
  * is derived from the UIMessage stream: part order, tool states, reasoning
  * state. Excluded tools split the run and return undefined so your own
- * renderPart (or the generic Tool card) takes over for them.
+ * renderPart (or AgentChat's generic activity row) takes over for them.
  */
 declare function createThinkChatActivityRenderer({
   excludeTools,
@@ -183,4 +202,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 };