@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/ThinkFullApp.js

@@ -1,42 +1,119 @@
-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-BiMDVpUo.js";
+import { Y as TerminalIcon, u as ChevronDownIcon, x as FileIcon } from "../icons-CQJ-aMnI.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-BYYeTQLf.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 { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../ThinkChat-15EhfvYJ.js";
 import { useWorkspace } from "./Workspace.js";
 import { WorkspaceExplorer } from "./WorkspaceExplorer.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 { jsx, jsxs } from "react/jsx-runtime";
+import { useAgentToolEvents } from "agents/react";
+import { flushSync } from "react-dom";
+//#region src/components/_internal/view-transitions.ts
+let documentScopeSequence = 0;
+let restoreActiveDocumentScope = null;
+function motionIsReduced() {
+	if (typeof document === "undefined") return true;
+	if (document.documentElement.dataset.motion === "reduce") return true;
+	return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+}
+function isReactTestEnvironment() {
+	return globalThis.IS_REACT_ACT_ENVIRONMENT;
+}
+function scopeDocumentTransition(scope) {
+	if (!(scope instanceof HTMLElement || scope instanceof SVGElement)) return null;
+	restoreActiveDocumentScope?.();
+	const rootStyle = document.documentElement.style;
+	const scopeStyle = scope.style;
+	const rootValue = rootStyle.getPropertyValue("view-transition-name");
+	const rootPriority = rootStyle.getPropertyPriority("view-transition-name");
+	const scopeValue = scopeStyle.getPropertyValue("view-transition-name");
+	const scopePriority = scopeStyle.getPropertyPriority("view-transition-name");
+	rootStyle.setProperty("view-transition-name", "none", "important");
+	scopeStyle.setProperty("view-transition-name", `sigvelo-transition-scope-${++documentScopeSequence}`, "important");
+	let active = true;
+	const restore = () => {
+		if (!active) return;
+		active = false;
+		if (rootValue) rootStyle.setProperty("view-transition-name", rootValue, rootPriority);
+		else rootStyle.removeProperty("view-transition-name");
+		if (scopeValue) scopeStyle.setProperty("view-transition-name", scopeValue, scopePriority);
+		else scopeStyle.removeProperty("view-transition-name");
+		if (restoreActiveDocumentScope === restore) restoreActiveDocumentScope = null;
+	};
+	restoreActiveDocumentScope = restore;
+	return restore;
+}
+/**
+* Runs one synchronous React update inside the narrowest supported native view
+* transition. Unsupported and reduced-motion environments commit immediately.
+*/
+function runViewTransition({ scope, update }) {
+	let committed = false;
+	const commitOnce = () => {
+		if (committed) return;
+		committed = true;
+		flushSync(update);
+	};
+	if (typeof document === "undefined" || motionIsReduced() || isReactTestEnvironment()) {
+		commitOnce();
+		return null;
+	}
+	const scopedHost = scope;
+	const documentHost = document;
+	const useScopedHost = typeof scopedHost?.startViewTransition === "function";
+	const host = useScopedHost ? scopedHost : typeof documentHost.startViewTransition === "function" ? documentHost : null;
+	if (!host?.startViewTransition) {
+		commitOnce();
+		return null;
+	}
+	const restoreDocumentScope = useScopedHost ? null : scopeDocumentTransition(scope);
+	try {
+		const transition = host.startViewTransition(commitOnce);
+		if (restoreDocumentScope) transition.finished.finally(restoreDocumentScope).catch(() => void 0);
+		return transition;
+	} catch {
+		restoreDocumentScope?.();
+		commitOnce();
+		return null;
+	}
+}
+//#endregion
 //#region src/components/ThinkFullApp.tsx
 const workbenchPanelDefaultWidth = 340;
 const workbenchPanelMinWidth = 300;
 const workbenchPanelMaxWidth = 600;
 const workbenchPanelKeyboardStep = 24;
-function WorkspacePanel({ config, workbenchNavigation }) {
+function WorkspacePanel({ config }) {
+	const selectedPath = config.navigation.current.destination.kind === "file" ? config.navigation.current.destination.path : null;
 	return /* @__PURE__ */ jsx(WorkspaceExplorer, {
 		className: "think-full-app__workbench",
 		workspace: useWorkspace({
 			source: config.source,
+			sourceKey: config.sourceKey,
 			root: config.root,
+			selectedPath,
 			resolveFileAsset: config.resolveFileAsset,
 			maxInlineAssetBytes: config.maxInlineAssetBytes
 		}),
 		navigation: config.navigation,
-		leading: workbenchNavigation || config.leading ? /* @__PURE__ */ jsxs(Fragment, { children: [workbenchNavigation, config.leading] }) : void 0,
+		leading: config.leading,
 		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, appBarActions, appBarLeading, appBarTitle, chat, className, defaultMobileView, defaultWorkbenchView, defaultThreadSidebarOpen, hideAppBarInWorkbench = false, messages, mobileView, onMobileViewChange, onThreadSidebarOpenChange, onWorkbenchViewChange, ref, renderAgentToolRunLink, renderExecutionRunLink, selectedExecutionRun, showAgentTools = true, showExecutionWorkbench = true, showMobileViewSwitch = true, sourceKey, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchPanels, workbenchView, workspace, ...props }) {
 	const appRef = React.useRef(null);
-	const approvals = useThinkPendingApprovals(agent.stub, `${chat.messages.length}:${chat.status}`);
+	const viewScopeRef = React.useRef(null);
+	const workbenchPanelRef = React.useRef(null);
+	const approvals = useThinkPendingExecutionApprovals(agent.stub, sourceKey, `${chat.messages.length}:${chat.status}`);
 	const resolvedMessages = React.useMemo(() => {
 		const approvalProps = resolveThinkApprovalProps({
 			thinkStub: messages?.thinkStub,
@@ -59,6 +136,28 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 	]);
 	const [innerMobileView, setInnerMobileView] = React.useState(defaultMobileView ?? "chat");
 	const [innerWorkbenchView, setInnerWorkbenchView] = React.useState(defaultWorkbenchView ?? "files");
+	const agentTools = useAgentToolEvents({ agent });
+	const agentIdentity = JSON.stringify(agent.path);
+	const requestedMobileView = mobileView ?? innerMobileView;
+	const requestedWorkbenchView = workbenchView ?? innerWorkbenchView;
+	const resetAgentTools = React.useEffectEvent(() => agentTools.resetLocalState());
+	React.useEffect(() => {
+		resetAgentTools();
+	}, [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 updateAppView = React.useCallback((update) => {
+		return runViewTransition({
+			scope: viewScopeRef.current,
+			update
+		});
+	}, []);
 	const panelContext = React.useMemo(() => ({
 		agent,
 		chat,
@@ -68,68 +167,53 @@ 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 })
+	});
+	if (showExecutionWorkbench) availableWorkbenchPanels.push({
+		id: "execution",
+		label: "Execution",
+		icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
+		render: ({ agent }) => /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
+			source: agent.stub,
+			sourceKey,
+			title: "Execution",
+			selectedRun: selectedExecutionRun,
+			renderRunLink: renderExecutionRunLink
+		})
+	});
+	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 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 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 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 shouldRenderInlineAppBar = !threadSidebar && (Boolean(appBarActions || appBarLeading || appBarTitle || threadSidebar) || hasWorkbench);
+	const hasAppBarRow = shouldRenderInlineAppBar;
+	const updateWorkbenchPanel = (next) => {
+		const activeElement = document.activeElement;
+		const restorePanelSwitchFocus = activeElement instanceof HTMLElement && workbenchPanelRef.current?.contains(activeElement);
+		const nextLabel = availableWorkbenchPanels.find((panel) => panel.id === next)?.label;
+		const restoreFocus = () => {
+			if (!restorePanelSwitchFocus || !nextLabel) return;
+			Array.from(workbenchPanelRef.current?.querySelectorAll("button") ?? []).find((button) => button.getAttribute("aria-label") === nextLabel)?.focus({ preventScroll: true });
+		};
+		const transition = runViewTransition({
+			scope: workbenchPanelRef.current,
+			update: () => setWorkbenchView(next)
+		});
+		if (transition) transition.updateCallbackDone.then(restoreFocus, restoreFocus);
+		else requestAnimationFrame(restoreFocus);
+	};
 	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", {
@@ -141,6 +225,7 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 				color: "neutral",
 				size: "sm",
 				className: "think-full-app__thread-trigger",
+				"aria-label": "Threads",
 				"aria-controls": sidebarControls.sidebarId,
 				"aria-expanded": sidebarControls.sidebarOpen,
 				onClick: (event) => sidebarControls.toggleSidebar(event.currentTarget),
@@ -155,27 +240,29 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 			}) : null] }) : null,
 			/* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [
 				appBarActions,
-				showWorkbenchViewSwitch && activeWorkbenchView && !canEmbedWorkbenchNavigation ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+				showWorkbenchViewSwitch && activeWorkbenchView ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
 					className: "think-full-app__workbench-view-switch",
 					views: workbenchViews,
 					value: activeWorkbenchView,
 					onValueChange: (next) => {
-						if (next) setWorkbenchView(next);
+						if (next) updateWorkbenchPanel(next);
 					},
 					"aria-label": "Workbench views"
 				}) : null,
-				activePanel ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+				activePanel && showMobileViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
 					className: "think-full-app__mobile-view-switch",
 					views: workbenchViews,
 					value: activeMobileView === "workbench" ? activePanel.id : void 0,
 					allowEmpty: true,
 					onValueChange: (next) => {
-						if (!next) {
-							setMobileView("chat");
-							return;
-						}
-						setWorkbenchView(next);
-						setMobileView("workbench");
+						updateAppView(() => {
+							if (!next) {
+								setMobileView("chat");
+								return;
+							}
+							setWorkbenchView(next);
+							setMobileView("workbench");
+						});
 					},
 					"aria-label": "App views"
 				}) : null
@@ -194,60 +281,48 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 		"data-has-thread-sidebar": threadSidebar ? "true" : "false",
 		"data-has-workbench": hasWorkbench ? "true" : "false",
 		"data-has-workbench-topbar": hasAppBarRow ? "true" : "false",
-		"data-has-compact-app-bar": hasCompactAppBar ? "true" : "false",
 		"data-mobile-view": activeMobileView,
 		style,
 		...props,
 		children: [
 			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", {
-						className: "think-full-app__chat-inner",
-						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]
+			/* @__PURE__ */ jsxs("div", {
+				ref: viewScopeRef,
+				className: "think-full-app__view-scope",
+				children: [/* @__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__ */ jsx("div", {
+							className: "think-full-app__chat-inner",
+							children: /* @__PURE__ */ jsx(ThinkChat.Provider, {
+								chat,
+								agentTools,
+								children: /* @__PURE__ */ jsx(ThinkChat.Messages, {
+									...resolvedMessages,
+									renderAgentToolRunLink: showAgentTools ? renderAgentToolRunLink : void 0
+								})
+							})
+						})
 					})
-				})
-			}),
-			activePanel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "think-full-app__resizer" }), /* @__PURE__ */ jsx("aside", {
-				className: "think-full-app__aside",
-				"aria-label": "Workbench",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "think-full-app__workbench-slot",
+				}), activePanel ? /* @__PURE__ */ jsx("aside", {
+					className: "think-full-app__aside",
+					"aria-label": "Workbench",
 					children: /* @__PURE__ */ jsx("div", {
-						className: "think-full-app__workbench-panel",
-						"data-view": activeWorkbenchView,
-						children: activeWorkbenchView === "files" && workspace ? /* @__PURE__ */ jsx(WorkspacePanel, {
-							config: workspace,
-							workbenchNavigation
-						}) : activeWorkbenchView === "execution" ? /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
-							source: agent.stub,
-							title: "Execution",
-							backButton: workbenchNavigation,
-							selectedRun: selectedExecutionRun,
-							onSelectedRunChange: onSelectedExecutionRunChange
-						}) : activePanel.render(panelContext)
+						className: "think-full-app__workbench-slot",
+						children: /* @__PURE__ */ jsx("div", {
+							ref: workbenchPanelRef,
+							className: "think-full-app__workbench-panel",
+							"data-view": activeWorkbenchView,
+							tabIndex: -1,
+							children: activePanel.render(panelContext)
+						})
 					})
-				})
-			})] }) : null
+				}) : null]
+			}),
+			activePanel ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "think-full-app__resizer" }) : null
 		]
 	});
 	const app = workspace ? /* @__PURE__ */ jsx(WorkspaceNavigationProvider, {
@@ -269,6 +344,7 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 		sidebarOpen: threadSidebarOpen,
 		defaultSidebarOpen: defaultThreadSidebarOpen,
 		onSidebarOpenChange: onThreadSidebarOpenChange,
+		"data-hide-app-bar-in-workbench": hideAppBarInWorkbench ? "" : void 0,
 		topBar: (controls) => renderAppTopBar(controls),
 		children: app
 	});

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-DNd6cDJZ.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-BiMDVpUo.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,46 @@
+import { TransitionSurface } from "./TransitionSurface.js";
+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(TransitionSurface, {
+		"data-slot": "think-recovery-notice",
+		className: "think-recovery-notice",
+		children: "Recovering the interrupted response…"
+	}, "recovering");
+	if (chat.connectionError) {
+		const reason = connectionReason(chat.connectionError);
+		return /* @__PURE__ */ jsxs(TransitionSurface, {
+			"data-slot": "think-recovery-notice",
+			className: "think-recovery-notice",
+			"data-tone": "danger",
+			children: ["Connection lost", reason ? ` — ${reason}` : "."]
+		}, "connection-error");
+	}
+	if (chat.error) {
+		const retryMessageId = chat.messages.findLast((message) => message.role !== "system")?.id;
+		return /* @__PURE__ */ jsx(TransitionSurface, {
+			className: "think-recovery-notice",
+			children: /* @__PURE__ */ jsx(AgentChatTurnError, {
+				error: chat.error,
+				onDismiss: chat.clearError,
+				onRetry: retryMessageId ? () => {
+					chat.clearError();
+					chat.regenerate({ messageId: retryMessageId });
+				} : void 0
+			})
+		}, "turn-error");
+	}
+	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) {