@mcp-b/react-components 0.20.0 → 0.20.1

package/dist/{AgentChat-CaQaT0LF.d.ts → AgentChat-C-ZyXbJz.d.ts}

@@ -140,6 +140,8 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   onApprovalResponse?: ChatAddToolApproveResponseFunction;
   /** Whole upstream Think stub used to resolve paused and durable execution approvals. */
   thinkStub?: AgentStub<Think>;
+  /** Disable approval scanning, automatic responses, cards, and composer controls. */
+  approvalsEnabled?: boolean;
   /** Parent-owned approval policy. Omit to keep AgentChat's session-local mode. */
   permissionModeControl?: PermissionModeControl;
   /** Called after a Think approve/reject RPC settles, including when it rejects. */
@@ -216,6 +218,7 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   onEditAndResend,
   onApprovalResponse,
   thinkStub,
+  approvalsEnabled,
   permissionModeControl,
   onExecutionSettled,
   pendingApprovals: durableApprovals,

package/dist/{ThinkChat-15EhfvYJ.js → ThinkChat-E_HrfH76.js}

@@ -45,9 +45,12 @@ function thinkPendingExecutionApprovalsQueryOptions(stub, sourceKey) {
 		staleTime: 5e3
 	});
 }
-function useThinkPendingExecutionApprovals(stub, sourceKey, refreshSignal) {
+function useThinkPendingExecutionApprovals(stub, sourceKey, refreshSignal, enabled = true) {
 	const queryClient = useQueryClient();
-	const approvalsQuery = useQuery(thinkPendingExecutionApprovalsQueryOptions(stub, sourceKey));
+	const approvalsQuery = useQuery({
+		...thinkPendingExecutionApprovalsQueryOptions(stub, sourceKey),
+		enabled
+	});
 	const refreshState = React.useRef({
 		sourceKey,
 		observedSignal: refreshSignal,
@@ -55,15 +58,20 @@ function useThinkPendingExecutionApprovals(stub, sourceKey, refreshSignal) {
 	});
 	const refetch = React.useEffectEvent(() => approvalsQuery.refetch());
 	const refreshPendingApprovals = React.useCallback(async () => {
+		if (!enabled) return;
 		const filters = {
 			queryKey: thinkPendingExecutionApprovalsQueryKey(sourceKey),
 			exact: true
 		};
 		await queryClient.cancelQueries(filters);
 		await queryClient.invalidateQueries(filters);
-	}, [queryClient, sourceKey]);
+	}, [
+		enabled,
+		queryClient,
+		sourceKey
+	]);
 	React.useEffect(() => {
-		if (refreshState.current.sourceKey !== sourceKey) {
+		if (!enabled || refreshState.current.sourceKey !== sourceKey) {
 			refreshState.current = {
 				sourceKey,
 				observedSignal: refreshSignal,
@@ -80,6 +88,7 @@ function useThinkPendingExecutionApprovals(stub, sourceKey, refreshSignal) {
 		refetch();
 	}, [
 		approvalsQuery.isFetching,
+		enabled,
 		refreshSignal,
 		sourceKey
 	]);
@@ -122,7 +131,7 @@ function ThinkChatProvider({ agentTools, chat, children }) {
 * </QueryClientProvider>
 * ```
 */
-function ThinkChatRoot({ agent: agentOption, name, sourceKey, children }) {
+function ThinkChatRoot({ agent: agentOption, approvalsEnabled = true, name, sourceKey, children }) {
 	const agent = useAgent(typeof agentOption === "string" ? {
 		agent: agentOption,
 		name
@@ -133,7 +142,7 @@ function ThinkChatRoot({ agent: agentOption, name, sourceKey, children }) {
 	const chat = useAgentChat({ agent });
 	const agentTools = useAgentToolEvents({ agent });
 	const agentIdentity = JSON.stringify(agent.path);
-	const approvals = useThinkPendingExecutionApprovals(agent.stub, sourceKey, `${chat.messages.length}:${chat.status}`);
+	const approvals = useThinkPendingExecutionApprovals(agent.stub, sourceKey, `${chat.messages.length}:${chat.status}`, approvalsEnabled);
 	const resetAgentTools = React.useEffectEvent(() => agentTools.resetLocalState());
 	React.useEffect(() => {
 		resetAgentTools();

package/dist/{ThinkChatActivity-CnIJPvV5.d.ts → ThinkChatActivity-CdbL0aoA.d.ts}

@@ -1,5 +1,5 @@
 import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-CyD2UB3V.js";
-import { r as AgentChatProps } from "./AgentChat-CaQaT0LF.js";
+import { r as AgentChatProps } from "./AgentChat-C-ZyXbJz.js";
 import { l as ThinkChatPart } from "./ThinkChatToolParts-CSzVwMXf.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";

package/dist/components/AgentChat.d.ts

@@ -1,2 +1,2 @@
-import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-CaQaT0LF.js";
+import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-C-ZyXbJz.js";
 export { AgentChat, AgentChatComposerDraft, AgentChatProps, AgentChatRenderMessageContext, PermissionModeControl };

package/dist/components/AgentChat.js

@@ -108,7 +108,7 @@ function getEditableUserText(message) {
 * transport. Product code that talks to a Cloudflare Think agent should render
 * `ThinkChat`; use this directly only for plain AI SDK or read-only messages.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, showComposer = onSubmit !== void 0, onStop, placeholder = "Ask anything...", disabled, emptyState, composerHeader, composerTools, slashCommands, mentionCommands, contextSelector, composerEndTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, permissionModeControl, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, showComposer = onSubmit !== void 0, onStop, placeholder = "Ask anything...", disabled, emptyState, composerHeader, composerTools, slashCommands, mentionCommands, contextSelector, composerEndTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, approvalsEnabled = true, permissionModeControl, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
 	const [copyAnnouncement, setCopyAnnouncement] = React.useState("");
 	const [composerDraft, setComposerDraft] = React.useState("");
 	const [composerReferences, setComposerReferences] = React.useState([]);
@@ -214,19 +214,21 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 	}, [thinkStub]);
 	const skippedApprovalIdSet = React.useMemo(() => new Set(skippedApprovalIds), [skippedApprovalIds]);
 	const pendingApprovalItems = React.useMemo(() => {
+		if (!approvalsEnabled) return [];
 		return [...getPendingToolApprovals(messages, { pausedExecutions: Boolean(thinkStub) }).filter((part) => {
 			if (part.state === "approval-requested" && !onApprovalResponse) return false;
 			const id = getApprovalStateKey(part);
 			return Boolean(id) && !skippedApprovalIdSet.has(id);
 		}).map((part) => ({ part })), ...thinkStub ? durableApprovals.filter((approval) => approval.source === "action" && !skippedApprovalIdSet.has(approval.executionId)).map((approval) => ({ approval })) : []];
 	}, [
+		approvalsEnabled,
 		durableApprovals,
 		messages,
 		onApprovalResponse,
 		skippedApprovalIdSet,
 		thinkStub
 	]);
-	const approvalsWired = Boolean(onApprovalResponse || thinkStub);
+	const approvalsWired = approvalsEnabled && Boolean(onApprovalResponse || thinkStub);
 	const autoApprovedIds = React.useRef({
 		thinkStub,
 		ids: /* @__PURE__ */ new Set()

package/dist/components/AgentToolDetail.js

@@ -5,7 +5,7 @@ import { AppTopBar } from "./AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
 import { SubagentRunIndicator, getSubagentRunName } from "./SubagentRunIndicator.js";
 import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "./SubagentRunDetails.js";
-import { t as ThinkChat } from "../ThinkChat-15EhfvYJ.js";
+import { t as ThinkChat } from "../ThinkChat-E_HrfH76.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";

package/dist/components/ThinkChat.d.ts

@@ -1,9 +1,9 @@
 import { i as AgentMessageRenderPartContext } from "../AgentMessageParts-CyD2UB3V.js";
-import { r as AgentChatProps } from "../AgentChat-CaQaT0LF.js";
+import { r as AgentChatProps } from "../AgentChat-C-ZyXbJz.js";
 import { i as useOptionalAgentToolRuns, n as AgentToolRunsProvider, r as AgentToolRunsProviderProps, t as AgentToolEventsValue } from "../AgentToolRunsContext-BVe4stgw.js";
 import { S as isThinkChatActivityPart } from "../ThinkChatToolParts-CSzVwMXf.js";
 import { l as describeThinkChatActivityPart } from "../ThinkChatActivitySummary-D1xOrNrq.js";
-import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-CnIJPvV5.js";
+import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-CdbL0aoA.js";
 import { n as ThinkChatValue } from "../ThinkChatContext-DrsZqdaO.js";
 import { n as ThinkRecoveryNoticeProps, t as ThinkRecoveryNotice } from "../ThinkRecoveryNotice-DFIcG9UX.js";
 import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-BV5qgFgI.js";
@@ -34,6 +34,8 @@ interface ThinkChatProviderProps<State = unknown, MessageT extends UIMessage = U
 interface ThinkChatRootProps<State = unknown> {
   /** Agent to connect to: a kebab-case class name, or full `useAgent` options. */
   agent: string | UseAgentOptions<State>;
+  /** Disable durable pending-approval discovery. Also disable it on `ThinkChat.Messages`. */
+  approvalsEnabled?: boolean;
   /** Instance name (e.g. a session or room id). Wins over `agent.name`. */
   name?: string;
   /**
@@ -91,6 +93,12 @@ interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends
   renderPart?: AgentChatProps<MessageT>["renderPart"];
   /** Whole upstream Think stub. `ThinkChat.Root` wires `agent.stub` automatically. */
   thinkStub?: AgentStub<Think>;
+  /**
+   * Disable transcript approval scanning, automatic responses, cards, and
+   * composer controls. Set the matching prop on `ThinkChat.Root` to also skip
+   * durable pending-approval discovery; `ThinkFullApp` wires both from here.
+   */
+  approvalsEnabled?: AgentChatProps<MessageT>["approvalsEnabled"];
   /** Parent-owned Ask/Bypass policy; omit to keep AgentChat's session-local mode. */
   permissionModeControl?: AgentChatProps<MessageT>["permissionModeControl"];
   /** Called after a Think approve/reject RPC settles. Root uses this to refresh approvals. */
@@ -106,7 +114,7 @@ interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends
 }
 /** Shared pending-approval options for components and TanStack Router loaders. */
 declare function thinkPendingExecutionApprovalsQueryOptions(stub: AgentStub<Think>, sourceKey: string): ThinkPendingExecutionApprovalsQueryOptions;
-declare function useThinkPendingExecutionApprovals(stub: AgentStub<Think>, sourceKey: string, refreshSignal?: unknown): {
+declare function useThinkPendingExecutionApprovals(stub: AgentStub<Think>, sourceKey: string, refreshSignal?: unknown, enabled?: boolean): {
   pendingApprovals: readonly PendingApproval[];
   refreshPendingApprovals: () => Promise<void>;
 };
@@ -141,6 +149,7 @@ declare function ThinkChatProvider<State = unknown, MessageT extends UIMessage =
  */
 declare function ThinkChatRoot<State = unknown, MessageT extends UIMessage = UIMessage>({
   agent: agentOption,
+  approvalsEnabled,
   name,
   sourceKey,
   children

package/dist/components/ThinkChat.js

@@ -5,7 +5,7 @@ import { inferWorkspaceLanguage } from "./WorkspaceFile.js";
 import { describeThinkChatActivityPart } from "./ThinkChatActivitySummary.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./ThinkChatActivity.js";
 import { ThinkRecoveryNotice } from "./ThinkRecoveryNotice.js";
-import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../ThinkChat-15EhfvYJ.js";
+import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../ThinkChat-E_HrfH76.js";
 import { BrowserReplay } from "./BrowserReplay.js";
 import { useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryOptions, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions } from "./Workspace.js";
 import { WorkspaceExplorer } from "./WorkspaceExplorer.js";

package/dist/components/ThinkChatActivity.d.ts

@@ -1,4 +1,4 @@
 import { S as isThinkChatActivityPart } from "../ThinkChatToolParts-CSzVwMXf.js";
 import { l as describeThinkChatActivityPart } from "../ThinkChatActivitySummary-D1xOrNrq.js";
-import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-CnIJPvV5.js";
+import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-CdbL0aoA.js";
 export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, describeThinkChatActivityPart, isThinkChatActivityPart, renderThinkChatActivityPart };

package/dist/components/ThinkChatActivitySummary.js

@@ -240,7 +240,7 @@ function describeBrowserToolPart(part) {
 	if (part.type === "tool-browser_execute") {
 		const output = part.state === "output-available" ? part.output : void 0;
 		if (failed || output?.status === "error") return "Browser automation failed";
-		if (output?.status === "paused") return "Browser waiting for approval";
+		if (output?.status === "paused") return isHumanWaitPause(output) ? "Browser waiting for human" : "Browser waiting for approval";
 		return working ? "Using the browser" : "Used the browser";
 	}
 	const page = displayUrl(part.input?.url) || "a page";
@@ -257,11 +257,15 @@ function describeBrowserToolPart(part) {
 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";
+	if (output?.status === "paused") return isHumanWaitPause(output) ? "Code waiting for human" : "Code waiting for approval";
 	const label = isPartWorking(part) ? "Running code" : "Ran code";
 	const snippet = summarizeToolInput(part.input);
 	return snippet ? `${label} · ${snippet}` : label;
 }
+function isHumanWaitPause(output) {
+	const pending = output.pending ?? [];
+	return pending.length > 0 && pending.every((action) => action.connector === "human" && action.method === "waitFor");
+}
 function describeFetchToolPart(part) {
 	const target = part.input?.url ?? part.input?.path ?? "";
 	const output = part.state === "output-available" ? part.output : void 0;

package/dist/components/ThinkChatToolPanels.js

@@ -329,20 +329,25 @@ function formatAuditValue(value) {
 	const maxLength = 240;
 	return formatted.length > maxLength ? `${formatted.slice(0, maxLength - 1)}…` : formatted;
 }
+function isHumanWait(action) {
+	return action.connector === "human" && action.method === "waitFor";
+}
 function toolCallStateLabel(call) {
-	const state = call.state === "pending" ? "awaiting approval" : call.state === "applied" ? "applied" : call.state;
-	const qualifiers = [call.requiresApproval && call.state !== "pending" ? "approval required" : "", call.ephemeral ? "re-executes on replay" : ""].filter(Boolean);
+	const humanWait = isHumanWait(call);
+	const state = call.state === "pending" ? humanWait ? "waiting for human" : "awaiting approval" : call.state === "applied" ? "applied" : call.state;
+	const qualifiers = [call.requiresApproval && call.state !== "pending" && !humanWait ? "approval required" : "", call.ephemeral ? "re-executes on replay" : ""].filter(Boolean);
 	return qualifiers.length ? `${state} · ${qualifiers.join(" · ")}` : state;
 }
 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})`;
+		return `${isHumanWait(action) ? "waiting for a human step" : "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;
+	if (output.status !== "paused") return output.status;
+	return output.pending.length > 0 && output.pending.every(isHumanWait) ? "paused · waiting for human" : "paused · needs approval";
 }
 /** The codemode execute tool as an activity panel: highlighted TypeScript
 plus logs, result, and the paused pending-approval list. */

package/dist/components/ThinkFullApp.js

@@ -3,7 +3,7 @@ import { S as FileIcon, X as TerminalIcon, d as ChevronDownIcon } from "../icons
 import { Button } from "./Button.js";
 import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../WorkspaceLink-BYYeTQLf.js";
 import { AppTopBar } from "./AppTopBar.js";
-import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../ThinkChat-15EhfvYJ.js";
+import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../ThinkChat-E_HrfH76.js";
 import { t as mergeRefs } from "../merge-refs-KlanQB7A.js";
 import { useWorkspace } from "./Workspace.js";
 import { WorkspaceExplorer } from "./WorkspaceExplorer.js";
@@ -113,7 +113,7 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 	const appRef = React.useRef(null);
 	const viewScopeRef = React.useRef(null);
 	const workbenchPanelRef = React.useRef(null);
-	const approvals = useThinkPendingExecutionApprovals(agent.stub, sourceKey, `${chat.messages.length}:${chat.status}`);
+	const approvals = useThinkPendingExecutionApprovals(agent.stub, sourceKey, `${chat.messages.length}:${chat.status}`, messages?.approvalsEnabled !== false);
 	const resolvedMessages = React.useMemo(() => {
 		const approvalProps = resolveThinkApprovalProps({
 			thinkStub: messages?.thinkStub,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -57,7 +57,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.20.0"
+    "@mcp-b/design-tokens": "0.20.1"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",