@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/components/ThinkExecutionWorkbench.js

@@ -1,6 +1,7 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { L as RefreshIcon, h as EllipsisIcon } from "../icons-CpfUer49.js";
-import { Button } from "./Button.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { H as RefreshIcon, v as EllipsisIcon } from "../icons-CQJ-aMnI.js";
+import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
+import { Button, buttonVariants } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { Menu } from "./Menu.js";
 import { AppTopBar } from "./AppTopBar.js";
@@ -9,6 +10,7 @@ import { ThinkExecutionStatus } from "./ThinkExecutionStatus.js";
 import { ThinkExecutionDetail } from "./ThinkExecutionDetail.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { queryOptions, useMutation, useQuery } from "@tanstack/react-query";
 //#region src/components/ThinkExecutionWorkbench.tsx
 const executionPanelPageSize = 20;
 function getErrorMessage(error) {
@@ -17,6 +19,13 @@ function getErrorMessage(error) {
 function isSubmissionCancelable(status) {
 	return status === "pending" || status === "running";
 }
+function thinkExecutionRunsScopeQueryKey(sourceKey) {
+	return [
+		"think",
+		sourceKey,
+		"execution-runs"
+	];
+}
 function RunActions({ busy, onAction, run, source }) {
 	const id = getThinkExecutionRunId(run);
 	const statusTone = getThinkExecutionRunStatusTone(run);
@@ -28,7 +37,8 @@ function RunActions({ busy, onAction, run, source }) {
 			type: "button",
 			variant: "ghost",
 			color: "neutral",
-			size: "icon-xs",
+			size: "sm",
+			iconOnly: true,
 			className: "think-execution-workbench__run-actions",
 			"aria-label": `Actions for ${kind} ${id}`,
 			disabled: busy,
@@ -91,129 +101,51 @@ function RunActions({ busy, onAction, run, source }) {
 	}) })] });
 }
 /**
+* Shared list options for component reads and TanStack Router loaders.
+*/
+function thinkExecutionRunsQueryOptions(source, sourceKey, pageSize = executionPanelPageSize) {
+	return queryOptions({
+		queryKey: [...thinkExecutionRunsScopeQueryKey(sourceKey), { limit: pageSize }],
+		queryFn: async () => {
+			const [submissions, workflows] = await Promise.all([source.listSubmissions({ limit: pageSize }), source.getWorkflows({
+				limit: pageSize,
+				orderBy: "desc"
+			})]);
+			return {
+				submissions,
+				workflows
+			};
+		},
+		staleTime: 5e3
+	});
+}
+/**
 * Unified execution history for native Think submissions and Agents workflows.
 * The workbench reads and acts through the whole upstream agent stub; it does
 * not normalize execution records or own workflow authoring.
 */
-function ThinkExecutionWorkbench({ backButton, className, onSelectedRunChange, pageSize = executionPanelPageSize, ref, selectedRun: controlledSelectedRun, source, title = "Execution", ...props }) {
+function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPanelPageSize, ref, renderRunLink, selectedRun, source, sourceKey, title = "Execution", ...props }) {
 	const runsId = React.useId();
-	const activeSourceRef = React.useRef(source);
-	const sourceGenerationRef = React.useRef(0);
-	const operationSequenceRef = React.useRef(0);
-	const [busyAction, setBusyAction] = React.useState("refresh");
-	const [error, setError] = React.useState(null);
-	const [executionData, setExecutionData] = React.useState(null);
-	const [selection, setSelection] = React.useState(null);
-	const activeExecutionData = executionData?.source === source ? executionData : null;
-	const innerSelectedRun = selection?.source === source ? selection.run : null;
-	const selectedRun = controlledSelectedRun === void 0 ? innerSelectedRun : controlledSelectedRun;
-	const runs = React.useMemo(() => [...activeExecutionData?.submissions ?? [], ...activeExecutionData?.workflows.workflows ?? []].sort((first, second) => Number(second.createdAt) - Number(first.createdAt)), [activeExecutionData]);
-	const isCurrentOperation = React.useCallback((operation) => activeSourceRef.current === operation.source && sourceGenerationRef.current === operation.generation && operationSequenceRef.current === operation.sequence, []);
-	const beginOperation = React.useCallback(() => {
-		if (activeSourceRef.current !== source) return null;
-		return {
-			generation: sourceGenerationRef.current,
-			sequence: ++operationSequenceRef.current,
+	const runsOptions = thinkExecutionRunsQueryOptions(source, sourceKey, pageSize);
+	const runsQueryKey = thinkExecutionRunsScopeQueryKey(sourceKey);
+	const runsQuery = useQuery(runsOptions);
+	const actionMutation = useMutation({
+		mutationFn: ({ action }) => action(),
+		onSuccess: (_result, action, _onMutateResult, context) => context.client.invalidateQueries({ queryKey: action.runsQueryKey })
+	});
+	const currentAction = actionMutation.variables?.source === source ? actionMutation.variables : null;
+	const actionIsPending = currentAction !== null && actionMutation.isPending;
+	const busyAction = actionIsPending ? currentAction.key : runsQuery.isFetching ? "refresh" : null;
+	const error = currentAction && actionMutation.isError ? actionMutation.error : runsQuery.error;
+	const runs = React.useMemo(() => [...runsQuery.data?.submissions ?? [], ...runsQuery.data?.workflows.workflows ?? []].sort((first, second) => Number(second.createdAt) - Number(first.createdAt)), [runsQuery.data]);
+	const runAction = (key, action) => {
+		actionMutation.mutate({
+			action,
+			key,
+			runsQueryKey,
 			source
-		};
-	}, [source]);
-	const loadData = React.useCallback(async (operation) => {
-		const [nextSubmissions, nextWorkflows] = await Promise.all([operation.source.listSubmissions({ limit: pageSize }), operation.source.getWorkflows({
-			limit: pageSize,
-			orderBy: "desc"
-		})]);
-		if (!isCurrentOperation(operation)) return;
-		setExecutionData({
-			source: operation.source,
-			submissions: nextSubmissions,
-			workflows: nextWorkflows
-		});
-	}, [isCurrentOperation, pageSize]);
-	const refresh = React.useCallback(async () => {
-		const operation = beginOperation();
-		if (!operation) return;
-		setBusyAction("refresh");
-		setError(null);
-		try {
-			await loadData(operation);
-		} catch (nextError) {
-			if (!isCurrentOperation(operation)) return;
-			setError(getErrorMessage(nextError));
-		} finally {
-			if (isCurrentOperation(operation)) setBusyAction(null);
-		}
-	}, [
-		beginOperation,
-		isCurrentOperation,
-		loadData
-	]);
-	const runAction = React.useCallback(async (key, action) => {
-		const operation = beginOperation();
-		if (!operation) return;
-		setBusyAction(key);
-		setError(null);
-		try {
-			await action(operation);
-			if (!isCurrentOperation(operation)) return;
-			await loadData(operation);
-		} catch (nextError) {
-			if (!isCurrentOperation(operation)) return;
-			setError(getErrorMessage(nextError));
-		} finally {
-			if (isCurrentOperation(operation)) setBusyAction(null);
-		}
-	}, [
-		beginOperation,
-		isCurrentOperation,
-		loadData
-	]);
-	const selectRun = React.useCallback((run) => {
-		const kind = isThinkSubmissionRun(run) ? "submission" : "workflow";
-		runAction(`select-${kind}:${getThinkExecutionRunId(run)}`, async (operation) => {
-			if (isThinkSubmissionRun(run)) {
-				const inspection = await operation.source.inspectSubmission(run.submissionId);
-				if (!isCurrentOperation(operation)) return;
-				const selected = inspection ?? run;
-				if (controlledSelectedRun === void 0) setSelection({
-					source: operation.source,
-					run: selected
-				});
-				onSelectedRunChange?.(selected);
-				return;
-			}
-			const workflow = await operation.source.getWorkflow(run.workflowId);
-			if (!isCurrentOperation(operation)) return;
-			const selected = workflow ?? run;
-			if (controlledSelectedRun === void 0) setSelection({
-				source: operation.source,
-				run: selected
-			});
-			onSelectedRunChange?.(selected);
 		});
-	}, [
-		controlledSelectedRun,
-		isCurrentOperation,
-		onSelectedRunChange,
-		runAction
-	]);
-	React.useLayoutEffect(() => {
-		activeSourceRef.current = source;
-		sourceGenerationRef.current += 1;
-		operationSequenceRef.current += 1;
-		setExecutionData(null);
-		setSelection(null);
-		setBusyAction("refresh");
-		setError(null);
-		return () => {
-			if (activeSourceRef.current === source) {
-				sourceGenerationRef.current += 1;
-				operationSequenceRef.current += 1;
-			}
-		};
-	}, [source]);
-	React.useEffect(() => {
-		refresh();
-	}, [refresh]);
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("think-execution-workbench", className),
@@ -231,7 +163,10 @@ function ThinkExecutionWorkbench({ backButton, className, onSelectedRunChange, p
 					/* @__PURE__ */ jsx(AppTopBar.Trailing, { children: /* @__PURE__ */ jsx(AppTopBar.Button, {
 						label: "Refresh runs",
 						disabled: busyAction !== null,
-						onClick: () => void refresh(),
+						onClick: () => {
+							actionMutation.reset();
+							runsQuery.refetch();
+						},
 						children: /* @__PURE__ */ jsx(RefreshIcon, {})
 					}) })
 				]
@@ -239,7 +174,7 @@ function ThinkExecutionWorkbench({ backButton, className, onSelectedRunChange, p
 			error ? /* @__PURE__ */ jsx("div", {
 				className: "think-execution-workbench__error",
 				role: "alert",
-				children: error
+				children: getErrorMessage(error)
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
 				className: "think-execution-workbench__content",
@@ -253,7 +188,7 @@ function ThinkExecutionWorkbench({ backButton, className, onSelectedRunChange, p
 							id: runsId,
 							children: "Runs"
 						})
-					}), busyAction === "refresh" && runs.length === 0 ? /* @__PURE__ */ jsx("p", {
+					}), runsQuery.isPending && runs.length === 0 ? /* @__PURE__ */ jsx("p", {
 						className: "think-execution-workbench__empty",
 						role: "status",
 						children: "Loading runs..."
@@ -269,16 +204,17 @@ function ThinkExecutionWorkbench({ backButton, className, onSelectedRunChange, p
 							const selected = isSameThinkExecutionRun(selectedRun, run);
 							return /* @__PURE__ */ jsxs("li", {
 								"data-selected": selected || void 0,
-								children: [/* @__PURE__ */ jsxs(Button, {
-									type: "button",
-									variant: "ghost",
-									color: "neutral",
-									size: "sm",
-									className: "think-execution-workbench__run",
+								children: [/* @__PURE__ */ jsxs(NavigationLink, {
+									render: renderRunLink(run),
+									"data-slot": "button",
+									className: buttonVariants({
+										variant: "ghost",
+										color: "neutral",
+										size: "sm",
+										className: "think-execution-workbench__run"
+									}),
 									"aria-label": getThinkExecutionRunAccessibleName(run),
 									"aria-current": selected ? "page" : void 0,
-									disabled: busyAction !== null,
-									onClick: () => selectRun(run),
 									children: [/* @__PURE__ */ jsx(ThinkExecutionStatus, {
 										run,
 										className: "think-execution-workbench__icon"
@@ -296,10 +232,10 @@ function ThinkExecutionWorkbench({ backButton, className, onSelectedRunChange, p
 										})]
 									})]
 								}), /* @__PURE__ */ jsx(RunActions, {
-									busy: busyAction !== null,
+									busy: actionIsPending,
 									run,
 									source,
-									onAction: (key, action) => void runAction(key, () => action())
+									onAction: runAction
 								})]
 							}, `${kind}:${id}`);
 						})
@@ -314,4 +250,4 @@ function ThinkExecutionWorkbench({ backButton, className, onSelectedRunChange, p
 	});
 }
 //#endregion
-export { ThinkExecutionWorkbench };
+export { ThinkExecutionWorkbench, thinkExecutionRunsQueryOptions };

package/dist/components/ThinkFullApp.d.ts

@@ -1,27 +1,29 @@
-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 { l as WorkspaceNavigationAdapter } from "../WorkspaceLink-O-EBKUJ8.js";
+import { r as WorkspaceFileAssetResolver } from "../WorkspaceFile-CzyHnESE.js";
+import { a as WorkspaceSource } from "../Workspace-Jez8ffUj.js";
 import { ThinkChatMessagesProps } from "./ThinkChat.js";
+import { t as ThinkAgent } from "../think-agent-Cip5KAPj.js";
 import { t as ThinkExecutionRun } from "../ThinkExecutionRun-ChhWhOoU.js";
+import { ThinkExecutionWorkbenchProps } from "./ThinkExecutionWorkbench.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 { useAgentChat } from "@cloudflare/think/react";
 import { useAgent } from "agents/react";
-import { Think } from "@cloudflare/think";
 
-//#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>;
 type ThinkFullAppWorkbenchView = "files" | "execution" | (string & {});
 interface ThinkFullAppWorkspaceConfig {
   source: WorkspaceSource;
+  /**
+   * Stable, non-secret identity for this workspace backend. It is independent
+   * of the app's agent `sourceKey` when files come from a parent/shared source.
+   */
+  sourceKey: string;
   root?: string;
   navigation: WorkspaceNavigationAdapter;
   resolveFileAsset?: WorkspaceFileAssetResolver;
@@ -57,14 +59,29 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   threadStatusSummary?: ThinkThreadStatusSummary;
   /** Whether to include the built-in Execution workbench. Defaults to true. */
   showExecutionWorkbench?: boolean;
-  /** Whole native execution selected by a parent-owned record. */
-  selectedExecutionRun?: ThinkExecutionRun | null;
-  /** Receives the whole native execution selected in the workbench. */
-  onSelectedExecutionRunChange?: (run: ThinkExecutionRun) => void;
+  /** Whether narrow layouts render the built-in chat/workbench switch. Defaults to true. */
+  showMobileViewSwitch?: boolean;
+  /** Hide the thread app bar when a narrow workbench supplies its own navigation. */
+  hideAppBarInWorkbench?: boolean;
+  /** Whole native execution selected by the application route. */
+  selectedExecutionRun: ThinkExecutionRun | null;
+  /**
+   * Stable, non-secret identity for the remote Think agent used by approvals
+   * and execution queries. Include endpoint, account or tenant scope, and
+   * agent path so two sources cannot share cached data. The optional workspace
+   * has its own source identity.
+   */
+  sourceKey: string;
+  /** Returns an application-authored TanStack Router Link for an execution. */
+  renderExecutionRunLink: ThinkExecutionWorkbenchProps["renderRunLink"];
   /** Message rendering labels and approval overrides for ThinkChat. */
   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;
+  /** Returns an application-authored TanStack Router Link for a retained child run. */
+  renderAgentToolRunLink: NonNullable<ThinkChatMessagesProps<MessageT>["renderAgentToolRunLink"]>;
   /**
    * 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.
@@ -82,7 +99,10 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   defaultMobileView?: ThinkFullAppMobileView;
   /** Called when narrow layouts switch between chat and the workbench. */
   onMobileViewChange?: (view: ThinkFullAppMobileView) => void;
-  /** Selected workbench lane. Use this when the parent app stores the lane in route state. */
+  /**
+   * Selected workbench lane for controlled, ephemeral panel UI.
+   * Apps that make lanes durable should derive this value from validated route search state.
+   */
   workbenchView?: ThinkFullAppWorkbenchView;
   /** Initial workbench lane when `workbenchView` is uncontrolled. */
   defaultWorkbenchView?: ThinkFullAppWorkbenchView;
@@ -100,15 +120,20 @@ declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = u
   defaultMobileView,
   defaultWorkbenchView,
   defaultThreadSidebarOpen,
+  hideAppBarInWorkbench,
   messages,
   mobileView,
   onMobileViewChange,
-  onSelectedExecutionRunChange,
   onThreadSidebarOpenChange,
   onWorkbenchViewChange,
   ref,
+  renderAgentToolRunLink,
+  renderExecutionRunLink,
   selectedExecutionRun,
+  showAgentTools,
   showExecutionWorkbench,
+  showMobileViewSwitch,
+  sourceKey,
   style,
   threadSidebar,
   threadSidebarOpen,