@mcp-b/react-components 0.16.0 → 0.17.0

package/dist/components/ThinkExecutionStatus.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, M as PauseIcon, S as InfoIcon, Y as XIcon, o as CheckIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { C as InfoIcon, N as PauseIcon, V as SpinnerIcon, X as XIcon, s as CheckIcon } from "../icons--FqCZEc3.js";
 import { Tooltip } from "./Tooltip.js";
 import { formatThinkExecutionStatus, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone } from "./ThinkExecutionRun.js";
 import "react";

package/dist/components/ThinkExecutionWorkbench.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { L as RefreshIcon, h as EllipsisIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { R as RefreshIcon, g as EllipsisIcon } from "../icons--FqCZEc3.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { Menu } from "./Menu.js";

package/dist/components/ThinkFullApp.d.ts

@@ -1,21 +1,18 @@
 import { l as WorkspaceNavigationAdapter } from "../WorkspaceLink-DK1DWMHe.js";
-import { r as WorkspaceFileAssetResolver } from "../WorkspaceFile-DOZkPwzu.js";
-import { r as WorkspaceSource } from "../Workspace-D39LxGvP.js";
+import { r as WorkspaceFileAssetResolver } from "../WorkspaceFile-C8UzuSH4.js";
+import { r as WorkspaceSource } from "../Workspace-C9RFoxcu.js";
 import { ThinkChatMessagesProps } from "./ThinkChat.js";
+import { t as ThinkAgent } from "../think-agent-Cip5KAPj.js";
 import { t as ThinkExecutionRun } from "../ThinkExecutionRun-ChhWhOoU.js";
 import { ThinkFullAppView } from "./ThinkFullAppViewSwitch.js";
 import { ThinkThreadStatusSummary } from "./ThinkThreadPicker.js";
 import { ThinkThreadShell } from "./ThinkThreadShell.js";
 import * as React from "react";
-import { useAgentChat } from "@cloudflare/think/react";
 import { UIMessage } from "ai";
-import { useAgent } from "agents/react";
-import { Think } from "@cloudflare/think";
+import { useAgentChat } from "@cloudflare/think/react";
+import { UseAgentOptions, useAgent } from "agents/react";
+import { AgentToolRunState } from "agents/agent-tools";
 
-//#region src/components/_internal/think-agent.d.ts
-/** Shared complete Think specialization for stateful React agent hooks. */
-type ThinkAgent<State = unknown> = Think<object, State>;
-//#endregion
 //#region src/components/ThinkFullApp.d.ts
 type ThinkFullAppMobileView = "chat" | "workbench";
 type ThinkFullAppAgent<State = unknown> = ThinkAgent<State>;
@@ -65,6 +62,26 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   messages?: ThinkChatMessagesProps<MessageT>;
   /** Extra workbench panels appended after the built-in Files and Execution panels. */
   workbenchPanels?: readonly ThinkFullAppPanel<AgentT, State, MessageT>[];
+  /** Show retained Agent Tool runs from the parent connection. Defaults to true. */
+  showAgentTools?: boolean;
+  /** Selected retained run id. Omit for internal selection state. */
+  selectedAgentToolRunId?: string | null;
+  /** Initial retained run selection when uncontrolled. */
+  defaultSelectedAgentToolRunId?: string | null;
+  /** Receives the complete upstream retained run selected from a Nanite pill. */
+  onSelectedAgentToolRunChange?: (run: AgentToolRunState<MessageT["parts"][number]> | null) => void;
+  /**
+   * Whole upstream connection options for child routing, including app auth or
+   * query configuration. The selected run's `subAgent` segment is appended.
+   */
+  agentToolChildConnection?: UseAgentOptions<unknown>;
+  /** Child transcript rendering overrides; the composer remains hidden. */
+  agentToolMessages?: ThinkChatMessagesProps<MessageT>;
+  /**
+   * App-owned detail for retained children that do not expose Think chat or
+   * require a product-specific route. The whole upstream run stays intact.
+   */
+  renderAgentToolDetail?: (run: AgentToolRunState<MessageT["parts"][number]>, onBack: () => void) => React.ReactNode;
   /**
    * Optional parent-owned thread picker/sidebar rendered beside the selected child app.
    * Use the render form to close the compact drawer after selecting a thread.
@@ -92,22 +109,29 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
 /** Combines ThinkChat with an optional resizable workbench shell. */
 declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage>({
   agent,
+  agentToolChildConnection,
+  agentToolMessages,
   appBarActions,
   appBarLeading,
   appBarTitle,
   chat,
   className,
   defaultMobileView,
+  defaultSelectedAgentToolRunId,
   defaultWorkbenchView,
   defaultThreadSidebarOpen,
   messages,
   mobileView,
   onMobileViewChange,
+  onSelectedAgentToolRunChange,
   onSelectedExecutionRunChange,
   onThreadSidebarOpenChange,
   onWorkbenchViewChange,
   ref,
+  renderAgentToolDetail,
+  selectedAgentToolRunId,
   selectedExecutionRun,
+  showAgentTools,
   showExecutionWorkbench,
   style,
   threadSidebar,

package/dist/components/ThinkFullApp.js

@@ -1,25 +1,28 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { G as TerminalIcon, s as ChevronDownIcon, v as FileIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { K as TerminalIcon, c as ChevronDownIcon, y as FileIcon } from "../icons--FqCZEc3.js";
 import { Button } from "./Button.js";
-import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../WorkspaceLink-DIPbXrUM.js";
+import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../WorkspaceLink-B1ykV1dS.js";
 import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import { AppTopBar } from "./AppTopBar.js";
-import { ResizableSidePanel } from "./ResizableSidePanel.js";
-import { o as useThinkPendingApprovals, s as resolveThinkApprovalProps, t as ThinkChat } from "../ThinkChat-CzC-zNGA.js";
+import { NaniteMark } from "./NaniteScene.js";
+import { o as useThinkPendingApprovals, s as resolveThinkApprovalProps, t as ThinkChat } from "../ThinkChat-DInElus-.js";
 import { useWorkspace } from "./Workspace.js";
 import { WorkspaceExplorer } from "./WorkspaceExplorer.js";
+import { SelectedAgentToolChild } from "./AgentToolDetail.js";
+import { ResizableSidePanel } from "./ResizableSidePanel.js";
 import { ThinkExecutionWorkbench } from "./ThinkExecutionWorkbench.js";
 import { ThinkFullAppViewSwitch } from "./ThinkFullAppViewSwitch.js";
 import { ThinkThreadStatusIndicators } from "./ThinkThreadPicker.js";
 import { ThinkThreadShell } from "./ThinkThreadShell.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useAgentToolEvents } from "agents/react";
 //#region src/components/ThinkFullApp.tsx
 const workbenchPanelDefaultWidth = 340;
 const workbenchPanelMinWidth = 300;
 const workbenchPanelMaxWidth = 600;
 const workbenchPanelKeyboardStep = 24;
-function WorkspacePanel({ config }) {
+function WorkspacePanel({ config, workbenchNavigation }) {
 	return /* @__PURE__ */ jsx(WorkspaceExplorer, {
 		className: "think-full-app__workbench",
 		workspace: useWorkspace({
@@ -29,13 +32,14 @@ function WorkspacePanel({ config }) {
 			maxInlineAssetBytes: config.maxInlineAssetBytes
 		}),
 		navigation: config.navigation,
-		leading: config.leading,
+		leading: workbenchNavigation || config.leading ? /* @__PURE__ */ jsxs(Fragment, { children: [workbenchNavigation, config.leading] }) : void 0,
 		actions: config.actions
 	});
 }
 /** Combines ThinkChat with an optional resizable workbench shell. */
-function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat, className, defaultMobileView, defaultWorkbenchView, defaultThreadSidebarOpen, messages, mobileView, onMobileViewChange, onSelectedExecutionRunChange, onThreadSidebarOpenChange, onWorkbenchViewChange, ref, selectedExecutionRun, showExecutionWorkbench = true, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchPanels, workbenchView, workspace, ...props }) {
+function ThinkFullApp({ agent, agentToolChildConnection, agentToolMessages, appBarActions, appBarLeading, appBarTitle, chat, className, defaultMobileView, defaultSelectedAgentToolRunId, defaultWorkbenchView, defaultThreadSidebarOpen, messages, mobileView, onMobileViewChange, onSelectedAgentToolRunChange, onSelectedExecutionRunChange, onThreadSidebarOpenChange, onWorkbenchViewChange, ref, renderAgentToolDetail, selectedAgentToolRunId, selectedExecutionRun, showAgentTools = true, showExecutionWorkbench = true, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchPanels, workbenchView, workspace, ...props }) {
 	const appRef = React.useRef(null);
+	const agentToolTriggerRef = React.useRef(null);
 	const approvals = useThinkPendingApprovals(agent.stub, `${chat.messages.length}:${chat.status}`);
 	const resolvedMessages = React.useMemo(() => {
 		const approvalProps = resolveThinkApprovalProps({
@@ -59,6 +63,49 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 	]);
 	const [innerMobileView, setInnerMobileView] = React.useState(defaultMobileView ?? "chat");
 	const [innerWorkbenchView, setInnerWorkbenchView] = React.useState(defaultWorkbenchView ?? "files");
+	const [innerSelectedAgentToolRunId, setInnerSelectedAgentToolRunId] = React.useState(defaultSelectedAgentToolRunId ?? null);
+	const agentTools = useAgentToolEvents({ agent });
+	const agentIdentity = JSON.stringify(agent.path);
+	const requestedMobileView = mobileView ?? innerMobileView;
+	const requestedWorkbenchView = workbenchView ?? innerWorkbenchView;
+	const activeAgentToolRunId = selectedAgentToolRunId ?? innerSelectedAgentToolRunId;
+	const selectedAgentToolRun = activeAgentToolRunId ? agentTools.runsById[activeAgentToolRunId] : void 0;
+	React.useEffect(() => {
+		agentTools.resetLocalState();
+		setInnerSelectedAgentToolRunId(null);
+	}, [agentIdentity]);
+	const setWorkbenchView = React.useCallback((next) => {
+		if (workbenchView === void 0) setInnerWorkbenchView(next);
+		onWorkbenchViewChange?.(next);
+	}, [onWorkbenchViewChange, workbenchView]);
+	const setMobileView = React.useCallback((next) => {
+		if (mobileView === void 0) setInnerMobileView(next);
+		onMobileViewChange?.(next);
+	}, [mobileView, onMobileViewChange]);
+	const updateSelectedAgentToolRun = React.useCallback((run) => {
+		if (selectedAgentToolRunId === void 0) setInnerSelectedAgentToolRunId(run?.runId ?? null);
+		onSelectedAgentToolRunChange?.(run);
+	}, [onSelectedAgentToolRunChange, selectedAgentToolRunId]);
+	const selectAgentToolRun = React.useCallback((run) => {
+		const trigger = document.activeElement;
+		if (trigger instanceof HTMLElement && appRef.current?.contains(trigger)) agentToolTriggerRef.current = trigger;
+		updateSelectedAgentToolRun(run);
+		setWorkbenchView("agent-tool");
+		setMobileView("workbench");
+	}, [
+		setMobileView,
+		setWorkbenchView,
+		updateSelectedAgentToolRun
+	]);
+	const closeAgentToolDetail = React.useCallback(() => {
+		const trigger = agentToolTriggerRef.current;
+		agentToolTriggerRef.current = null;
+		updateSelectedAgentToolRun(null);
+		setMobileView("chat");
+		requestAnimationFrame(() => {
+			if (trigger?.isConnected) trigger.focus();
+		});
+	}, [setMobileView, updateSelectedAgentToolRun]);
 	const panelContext = React.useMemo(() => ({
 		agent,
 		chat,
@@ -68,53 +115,66 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 		chat,
 		workspace
 	]);
-	const availableWorkbenchPanels = React.useMemo(() => {
-		const builtInPanels = [];
-		if (workspace !== void 0) builtInPanels.push({
-			id: "files",
-			label: "Files",
-			icon: /* @__PURE__ */ jsx(FileIcon, {}),
-			render: () => /* @__PURE__ */ jsx(WorkspacePanel, { config: workspace })
-		});
-		if (showExecutionWorkbench) builtInPanels.push({
-			id: "execution",
-			label: "Execution",
-			icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
-			render: ({ agent }) => /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
-				source: agent.stub,
-				title: "Execution",
-				selectedRun: selectedExecutionRun,
-				onSelectedRunChange: onSelectedExecutionRunChange
-			})
-		});
-		return workbenchPanels ? [...builtInPanels, ...workbenchPanels] : builtInPanels;
-	}, [
-		onSelectedExecutionRunChange,
-		selectedExecutionRun,
-		showExecutionWorkbench,
-		workbenchPanels,
-		workspace
-	]);
-	const requestedMobileView = mobileView ?? innerMobileView;
-	const requestedWorkbenchView = workbenchView ?? innerWorkbenchView;
+	const availableWorkbenchPanels = [];
+	if (workspace !== void 0) availableWorkbenchPanels.push({
+		id: "files",
+		label: "Files",
+		icon: /* @__PURE__ */ jsx(FileIcon, {}),
+		render: () => /* @__PURE__ */ jsx(WorkspacePanel, {
+			config: workspace,
+			workbenchNavigation
+		})
+	});
+	if (showExecutionWorkbench) availableWorkbenchPanels.push({
+		id: "execution",
+		label: "Execution",
+		icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
+		render: ({ agent }) => /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
+			source: agent.stub,
+			title: "Execution",
+			backButton: workbenchNavigation,
+			selectedRun: selectedExecutionRun,
+			onSelectedRunChange: onSelectedExecutionRunChange
+		})
+	});
+	if (showAgentTools && selectedAgentToolRun) availableWorkbenchPanels.push({
+		id: "agent-tool",
+		label: "Agent",
+		icon: /* @__PURE__ */ jsx(NaniteMark, { index: selectedAgentToolRun.order }),
+		render: () => renderAgentToolDetail ? renderAgentToolDetail(selectedAgentToolRun, closeAgentToolDetail) : /* @__PURE__ */ jsx(SelectedAgentToolChild, {
+			run: selectedAgentToolRun,
+			parentAgent: agent,
+			connectionOptions: agentToolChildConnection,
+			messages: agentToolMessages,
+			onBack: closeAgentToolDetail
+		}, selectedAgentToolRun.runId)
+	});
+	if (workbenchPanels) availableWorkbenchPanels.push(...workbenchPanels);
 	const activePanel = availableWorkbenchPanels.find((panel) => panel.id === requestedWorkbenchView) ?? availableWorkbenchPanels[0];
 	const activeWorkbenchView = activePanel?.id;
 	const hasWorkbench = activePanel !== void 0;
 	const activeMobileView = hasWorkbench ? requestedMobileView : "chat";
 	const showWorkbenchViewSwitch = availableWorkbenchPanels.length > 1;
 	const workbenchViews = availableWorkbenchPanels;
-	const setWorkbenchView = React.useCallback((next) => {
-		if (workbenchView === void 0) setInnerWorkbenchView(next);
-		onWorkbenchViewChange?.(next);
-	}, [onWorkbenchViewChange, workbenchView]);
-	const setMobileView = React.useCallback((next) => {
-		if (mobileView === void 0) setInnerMobileView(next);
-		onMobileViewChange?.(next);
-	}, [mobileView, onMobileViewChange]);
+	const canEmbedWorkbenchNavigation = activeWorkbenchView === "files" || activeWorkbenchView === "execution";
+	const hasApplicationChrome = Boolean(appBarActions || appBarLeading || appBarTitle || threadSidebar);
+	const shouldRenderInlineAppBar = !threadSidebar && (hasApplicationChrome || hasWorkbench);
+	const hasCompactAppBar = shouldRenderInlineAppBar && !hasApplicationChrome && canEmbedWorkbenchNavigation;
+	const hasAppBarRow = shouldRenderInlineAppBar && !hasCompactAppBar;
+	const workbenchNavigation = showWorkbenchViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+		className: "think-full-app__embedded-view-switch",
+		views: workbenchViews,
+		value: activeWorkbenchView,
+		onValueChange: (next) => {
+			if (next) setWorkbenchView(next);
+		},
+		"aria-label": "Workbench views"
+	}) : null;
 	const renderAppTopBar = (sidebarControls) => /* @__PURE__ */ jsxs(AppTopBar.Root, {
 		className: "think-full-app__app-bar",
 		"aria-label": "Workbench controls",
 		"data-mobile-view": activeMobileView,
+		"data-compact-only": hasCompactAppBar ? "true" : void 0,
 		children: [
 			/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [sidebarControls?.sidebarToggle, appBarLeading] }),
 			appBarTitle || sidebarControls ? /* @__PURE__ */ jsxs(AppTopBar.Title, { children: [appBarTitle ? /* @__PURE__ */ jsx("span", {
@@ -140,7 +200,7 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 			}) : null] }) : null,
 			/* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [
 				appBarActions,
-				showWorkbenchViewSwitch && activeWorkbenchView ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+				showWorkbenchViewSwitch && activeWorkbenchView && !canEmbedWorkbenchNavigation ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
 					className: "think-full-app__workbench-view-switch",
 					views: workbenchViews,
 					value: activeWorkbenchView,
@@ -178,36 +238,30 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 		keyboardStep: workbenchPanelKeyboardStep,
 		"data-has-thread-sidebar": threadSidebar ? "true" : "false",
 		"data-has-workbench": hasWorkbench ? "true" : "false",
-		"data-has-workbench-topbar": threadSidebar ? "false" : "true",
+		"data-has-workbench-topbar": hasAppBarRow ? "true" : "false",
+		"data-has-compact-app-bar": hasCompactAppBar ? "true" : "false",
 		"data-mobile-view": activeMobileView,
 		style,
 		...props,
 		children: [
-			!threadSidebar ? renderAppTopBar() : null,
+			shouldRenderInlineAppBar ? renderAppTopBar() : null,
 			/* @__PURE__ */ jsx("section", {
 				className: "think-full-app__chat-surface",
 				"data-workspace-restoration-scope": "chat",
 				"aria-label": "Chat",
 				children: /* @__PURE__ */ jsx("div", {
 					className: "think-full-app__chat",
-					children: /* @__PURE__ */ jsxs("div", {
+					children: /* @__PURE__ */ jsx("div", {
 						className: "think-full-app__chat-inner",
-						children: [/* @__PURE__ */ jsx(ThinkChat.Provider, {
+						children: /* @__PURE__ */ jsx(ThinkChat.Provider, {
 							chat,
-							children: /* @__PURE__ */ jsx(ThinkChat.Messages, { ...resolvedMessages })
-						}), chat.error ? /* @__PURE__ */ jsxs("div", {
-							className: "think-full-app__error",
-							role: "alert",
-							children: [chat.error.message, /* @__PURE__ */ jsx(Button, {
-								type: "button",
-								variant: "link",
-								color: "neutral",
-								size: "xs",
-								className: "think-full-app__error-dismiss",
-								onClick: () => chat.clearError(),
-								children: "Dismiss"
-							})]
-						}) : null]
+							agentTools,
+							children: /* @__PURE__ */ jsx(ThinkChat.Messages, {
+								...resolvedMessages,
+								selectedAgentToolRunId: activeAgentToolRunId,
+								onAgentToolRunSelect: showAgentTools ? selectAgentToolRun : void 0
+							})
+						})
 					})
 				})
 			}),

package/dist/components/ThinkFullAppViewSwitch.d.ts

@@ -1,4 +1,4 @@
-import { r as ToggleGroupProps } from "../ToggleGroup-8hPv-b69.js";
+import { r as ToggleGroupProps } from "../ToggleGroup-yseEWkOC.js";
 import * as React from "react";
 
 //#region src/components/ThinkFullAppViewSwitch.d.ts

package/dist/components/ThinkFullAppViewSwitch.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import { AppTopBar } from "./AppTopBar.js";
 import { ToggleGroup } from "./ToggleGroup.js";
 import "react";
@@ -11,7 +11,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function ThinkFullAppViewSwitch({ allowEmpty = false, className, onValueChange, value, views, ...props }) {
 	return /* @__PURE__ */ jsx(ToggleGroup.Root, {
-		className: cx("think-full-app__view-switch", className),
+		className: mergeBaseClassName("think-full-app__view-switch", className),
 		size: "sm",
 		value: value ? [value] : [],
 		onValueChange: (nextValue, eventDetails) => {

package/dist/components/ThinkPendingApproval.d.ts

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { DynamicToolUIPart, ToolUIPart } from "ai";
+import { PendingApproval, Think } from "@cloudflare/think";
+import { AgentStub } from "agents/client";
+import { ProxyToolOutput } from "@cloudflare/codemode";
+
+//#region src/components/ThinkPendingApproval.d.ts
+type PausedExecution = Extract<ProxyToolOutput, {
+  status: "paused";
+}>;
+/** Structural match for any upstream tool binding of the Codemode execute runtime. */
+declare function getPausedExecution(part: ToolUIPart | DynamicToolUIPart): PausedExecution | undefined;
+interface SharedThinkApprovalProps {
+  thinkStub: AgentStub<Think>;
+  onSettled?: () => void | Promise<void>;
+  onSkip?: () => void;
+  count?: number;
+  question?: React.ReactNode;
+}
+interface ThinkPendingApprovalProps extends React.HTMLAttributes<HTMLDivElement>, SharedThinkApprovalProps {
+  /** Whole entry returned by Think `pendingApprovals()`. */
+  approval: PendingApproval;
+}
+/**
+ * Durable Think approval adapter. It renders the complete upstream descriptor
+ * and resolves only through the full Think stub's idempotent execution RPCs.
+ */
+declare function ThinkPendingApproval({
+  approval,
+  className,
+  count,
+  onSettled,
+  onSkip,
+  question,
+  ref,
+  thinkStub,
+  ...props
+}: ThinkPendingApprovalProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface ThinkExecutionApprovalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "part">, SharedThinkApprovalProps {
+  /** Whole AI SDK tool part whose upstream Codemode output may be paused. */
+  part: ToolUIPart | DynamicToolUIPart;
+}
+/** Actionable adapter for Think's in-band paused Codemode execution output. */
+declare function ThinkExecutionApproval({
+  className,
+  count,
+  onSettled,
+  onSkip,
+  part,
+  question,
+  ref,
+  thinkStub,
+  ...props
+}: ThinkExecutionApprovalProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+//#endregion
+export { ThinkExecutionApproval, ThinkExecutionApprovalProps, ThinkPendingApproval, ThinkPendingApprovalProps, getPausedExecution };

package/dist/components/ThinkPendingApproval.js

@@ -0,0 +1,99 @@
+import { Approval, ApprovalCount, ApprovalDecision, ApprovalHeader, ApprovalInputPreview, ApprovalPreview, ApprovalPreviewRow, ApprovalQuestion, formatApprovalValue } from "./Approval.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getToolName } from "ai";
+import { getToolOutput } from "@cloudflare/think/react";
+//#region src/components/ThinkPendingApproval.tsx
+/** Structural match for any upstream tool binding of the Codemode execute runtime. */
+function getPausedExecution(part) {
+	if (part.state !== "output-available") return void 0;
+	const output = getToolOutput(part);
+	return output?.status === "paused" && typeof output.executionId === "string" ? output : void 0;
+}
+function titleCase(value) {
+	return value.split("-").map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`).join(" ");
+}
+/**
+* Durable Think approval adapter. It renders the complete upstream descriptor
+* and resolves only through the full Think stub's idempotent execution RPCs.
+*/
+function ThinkPendingApproval({ approval, className, count, onSettled, onSkip, question, ref, thinkStub, ...props }) {
+	const { descriptor } = approval;
+	const permissions = descriptor.permissions.length ? descriptor.permissions.join(", ") : "None requested";
+	const source = approval.source === "action" ? "Action" : "Codemode";
+	return /* @__PURE__ */ jsxs(Approval, {
+		ref,
+		className,
+		"aria-label": `Approve ${descriptor.action}`,
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(ApprovalHeader, { children: [/* @__PURE__ */ jsx(ApprovalQuestion, { children: question ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Do you want to allow ",
+				/* @__PURE__ */ jsx("code", { children: descriptor.summary }),
+				"?"
+			] }) }), count && count > 1 ? /* @__PURE__ */ jsxs(ApprovalCount, { children: ["1 of ", count] }) : null] }),
+			/* @__PURE__ */ jsxs(ApprovalPreview, { children: [
+				/* @__PURE__ */ jsx(ApprovalPreviewRow, {
+					label: "source",
+					children: source
+				}),
+				/* @__PURE__ */ jsx(ApprovalPreviewRow, {
+					label: "kind",
+					children: titleCase(descriptor.kind)
+				}),
+				/* @__PURE__ */ jsx(ApprovalPreviewRow, {
+					label: "risk",
+					children: descriptor.risk ? titleCase(descriptor.risk) : "Not specified"
+				}),
+				/* @__PURE__ */ jsx(ApprovalPreviewRow, {
+					label: "permissions",
+					children: permissions
+				})
+			] }),
+			descriptor.input !== void 0 ? /* @__PURE__ */ jsx(ApprovalInputPreview, { input: descriptor.input }) : null,
+			/* @__PURE__ */ jsx(ApprovalDecision, {
+				subject: descriptor.summary,
+				onSkip,
+				onDecision: async ({ approved, reason }) => {
+					try {
+						await (approved ? thinkStub.approveExecution(approval.executionId) : thinkStub.rejectExecution(approval.executionId, reason));
+					} finally {
+						await onSettled?.();
+					}
+				}
+			}, approval.executionId)
+		]
+	});
+}
+/** Actionable adapter for Think's in-band paused Codemode execution output. */
+function ThinkExecutionApproval({ className, count, onSettled, onSkip, part, question, ref, thinkStub, ...props }) {
+	const paused = getPausedExecution(part);
+	if (!paused) return null;
+	const toolName = part.title ?? getToolName(part);
+	return /* @__PURE__ */ jsxs(Approval, {
+		ref,
+		className,
+		"aria-label": `Approve ${toolName}`,
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(ApprovalHeader, { children: [/* @__PURE__ */ jsx(ApprovalQuestion, { children: question ?? /* @__PURE__ */ jsx(Fragment, { children: "The agent's code is paused on these calls. Allow it to continue?" }) }), count && count > 1 ? /* @__PURE__ */ jsxs(ApprovalCount, { children: ["1 of ", count] }) : null] }),
+			/* @__PURE__ */ jsx(ApprovalPreview, { children: paused.pending.map((action) => /* @__PURE__ */ jsx(ApprovalPreviewRow, {
+				label: `${action.connector}.${action.method}`,
+				children: action.args === void 0 ? null : formatApprovalValue(action.args)
+			}, action.seq)) }),
+			/* @__PURE__ */ jsx(ApprovalDecision, {
+				subject: toolName,
+				onSkip,
+				onDecision: async ({ approved, reason }) => {
+					try {
+						await (approved ? thinkStub.approveExecution(paused.executionId) : thinkStub.rejectExecution(paused.executionId, reason));
+					} finally {
+						await onSettled?.();
+					}
+				}
+			}, `${paused.executionId}:${paused.pending[0]?.seq ?? "pending"}`)
+		]
+	});
+}
+//#endregion
+export { ThinkExecutionApproval, ThinkPendingApproval, getPausedExecution };

package/dist/components/ThinkRecoveryNotice.d.ts

@@ -0,0 +1,2 @@
+import { n as ThinkRecoveryNoticeProps, t as ThinkRecoveryNotice } from "../ThinkRecoveryNotice-DFIcG9UX.js";
+export { ThinkRecoveryNotice, ThinkRecoveryNoticeProps };

package/dist/components/ThinkRecoveryNotice.js

@@ -0,0 +1,40 @@
+import { AgentChatTurnError } from "./AgentChatTurnError.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ThinkRecoveryNotice.tsx
+function connectionReason(error) {
+	return error.reason.trim() || error.message.trim();
+}
+/**
+* Native Think recovery, connection, and turn-error content for AgentChat's
+* persistent polite notice region. Think exposes no recovery phase, progress,
+* checkpoint, attempt count, or timeline to the browser, so this adapter does
+* not claim those details.
+*/
+function ThinkRecoveryNotice({ chat }) {
+	if (chat.isRecovering) return /* @__PURE__ */ jsx("span", {
+		"data-slot": "think-recovery-notice",
+		children: "Recovering the interrupted response…"
+	});
+	if (chat.connectionError) {
+		const reason = connectionReason(chat.connectionError);
+		return /* @__PURE__ */ jsxs("span", {
+			"data-slot": "think-recovery-notice",
+			"data-tone": "danger",
+			children: ["Connection lost", reason ? ` — ${reason}` : "."]
+		});
+	}
+	if (chat.error) {
+		const retryMessageId = chat.messages.findLast((message) => message.role !== "system")?.id;
+		return /* @__PURE__ */ jsx(AgentChatTurnError, {
+			error: chat.error,
+			onDismiss: chat.clearError,
+			onRetry: retryMessageId ? () => {
+				chat.clearError();
+				chat.regenerate({ messageId: retryMessageId });
+			} : void 0
+		});
+	}
+	return null;
+}
+//#endregion
+export { ThinkRecoveryNotice };

package/dist/components/ThinkRoutine.js

@@ -1,5 +1,6 @@
 //#region src/components/ThinkRoutine.ts
 function getThinkRoutineNextRun(routine) {
+	if (!routine.enabled) return "Paused";
 	return routine.schedule ? formatThinkExecutionDate(routine.schedule.time * 1e3, "Not scheduled") : "Pending reconciliation";
 }
 function formatThinkExecutionDate(value, fallback) {

package/dist/components/ThinkRoutineBrowser.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { F as PlusIcon, R as SearchIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { I as PlusIcon, z as SearchIcon } from "../icons--FqCZEc3.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { Field } from "./Field.js";
@@ -34,7 +34,7 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("h2", {
-				className: "think-routine-library__title",
+				className: "think-routine-library__title sigvelo-visually-hidden",
 				children: "Schedules"
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -79,7 +79,7 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 				className: "think-routine-library__search",
 				name: "routine-search",
 				children: [/* @__PURE__ */ jsx(Field.Label, {
-					className: "think-routine-library__title",
+					className: "think-routine-library__title sigvelo-visually-hidden",
 					children: "Search schedules"
 				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx(Field.Control, {
 					className: "think-routine-browser__search-control",
@@ -94,7 +94,7 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 				})] })]
 			}),
 			/* @__PURE__ */ jsxs("p", {
-				className: "think-routine-library__status",
+				className: "think-routine-library__status sigvelo-visually-hidden",
 				role: "status",
 				"aria-atomic": "true",
 				children: [
@@ -126,7 +126,7 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 									"aria-hidden": "true"
 								}),
 								/* @__PURE__ */ jsx("span", {
-									className: "think-routine-library__title",
+									className: "think-routine-library__title sigvelo-visually-hidden",
 									children: routine.enabled ? "Active" : "Paused"
 								}),
 								/* @__PURE__ */ jsxs("span", {