@mcp-b/react-components 0.17.0 → 0.18.0

package/dist/components/ThinkChatActivity.js

@@ -105,28 +105,27 @@ function ThinkChatActivityStep({ text, part, toolRenderers }) {
 		children: text
 	});
 }
-function ThinkChatActivityGroup({ message, onAgentToolRunSelect, parts, selectedAgentToolRunId, isTrailing, toolRenderers }) {
+function ThinkChatActivityGroup({ message, parts, renderAgentToolRunLink, isTrailing, toolRenderers }) {
 	const chat = useOptionalThinkChatContext();
 	const chatStillWorking = isTrailing && Boolean(chat?.isStreaming) && chat?.messages.at(-1)?.id === message.id;
 	const agentTools = useOptionalAgentToolRuns();
 	const runs = React.useMemo(() => {
-		if (!agentTools || !onAgentToolRunSelect) return [];
+		if (!agentTools || !renderAgentToolRunLink) return [];
 		return parts.flatMap((part) => isToolUIPart(part) ? agentTools.getRunsForToolCall(part.toolCallId) : []);
 	}, [
 		agentTools,
-		onAgentToolRunSelect,
-		parts
+		parts,
+		renderAgentToolRunLink
 	]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ThinkChatActivity, {
 		parts,
 		isStreaming: parts.some(isPartWorking) || chatStillWorking,
 		toolRenderers
-	}), runs.length ? /* @__PURE__ */ jsx(SubagentRunList, {
+	}), runs.length && renderAgentToolRunLink ? /* @__PURE__ */ jsx(SubagentRunList, {
 		className: "subagent-run__list--adjacent",
 		"aria-label": "Delegated agent runs",
 		runs,
-		selectedRunId: selectedAgentToolRunId,
-		onSelect: onAgentToolRunSelect
+		renderRunLink: renderAgentToolRunLink
 	}) : null] });
 }
 /**
@@ -136,7 +135,7 @@ function ThinkChatActivityGroup({ message, onAgentToolRunSelect, parts, selected
 * state. Excluded tools split the run and return undefined so your own
 * renderPart (or AgentChat's generic activity row) takes over for them.
 */
-function createThinkChatActivityRenderer({ excludeTools, onAgentToolRunSelect, selectedAgentToolRunId, toolRenderers } = {}) {
+function createThinkChatActivityRenderer({ excludeTools, renderAgentToolRunLink, toolRenderers } = {}) {
 	const excluded = excludeTools?.length ? new Set(excludeTools) : void 0;
 	const isActivity = (part) => isThinkChatActivityPart(part, excluded);
 	return (context) => {
@@ -152,8 +151,7 @@ function createThinkChatActivityRenderer({ excludeTools, onAgentToolRunSelect, s
 			parts: message.parts.slice(start, end + 1),
 			isTrailing: end === message.parts.length - 1,
 			toolRenderers,
-			selectedAgentToolRunId,
-			onAgentToolRunSelect
+			renderAgentToolRunLink
 		});
 	};
 }

package/dist/components/ThinkChatActivitySummary.d.ts

@@ -1,2 +1,2 @@
-import { a as activityPartIconKind, c as deriveThinkChatToolLifecycleHeader, i as ThinkChatToolLifecycleSnapshot, l as describeThinkChatActivityPart, n as ThinkChatToolDescriber, o as activityPartUrl, r as ThinkChatToolDescribers, s as deriveThinkChatActivityHeader, t as ThinkChatActivityHeader, u as summarizeActivitySteps } from "../ThinkChatActivitySummary-BPmu9a-c.js";
+import { a as activityPartIconKind, c as deriveThinkChatToolLifecycleHeader, i as ThinkChatToolLifecycleSnapshot, l as describeThinkChatActivityPart, n as ThinkChatToolDescriber, o as activityPartUrl, r as ThinkChatToolDescribers, s as deriveThinkChatActivityHeader, t as ThinkChatActivityHeader, u as summarizeActivitySteps } from "../ThinkChatActivitySummary-D1xOrNrq.js";
 export { ThinkChatActivityHeader, ThinkChatToolDescriber, ThinkChatToolDescribers, ThinkChatToolLifecycleSnapshot, activityPartIconKind, activityPartUrl, deriveThinkChatActivityHeader, deriveThinkChatToolLifecycleHeader, describeThinkChatActivityPart, summarizeActivitySteps };

package/dist/components/ThinkChatActivitySummary.js

@@ -1,5 +1,5 @@
 import { displayUrl, getToolDisplayName, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSessionContextToolFailure, isSessionContextToolPart, isSkillToolPart, isWorkspaceToolPart } from "./ThinkChatToolParts.js";
-import { t as summarizeToolInput } from "../summarize-tool-input-BUJsENSn.js";
+import { t as summarizeToolInput } from "../summarize-tool-input-CqTcGRYy.js";
 import { getToolName, isReasoningUIPart, isToolUIPart } from "ai";
 //#region src/components/ThinkChatActivitySummary.ts
 const ACTIVITY_HEADER_LABEL_MAX_LENGTH = 240;
@@ -310,6 +310,7 @@ function summarizeActivitySteps(parts) {
 	if (browses > 0) segments.push("used the browser");
 	if (codeRuns > 0) segments.push("ran code");
 	if (commands > 0) segments.push(commands === 1 ? "ran a command" : `ran ${commands} commands`);
+	const includedSegments = new Set(segments);
 	for (const segment of [
 		"edited files",
 		"searched code",
@@ -318,8 +319,11 @@ function summarizeActivitySteps(parts) {
 		"ran a command",
 		"read files",
 		"used a tool"
-	]) if (genericSegments.has(segment)) segments.push(segment);
-	for (const segment of genericSegments) if (!segments.includes(segment)) segments.push(segment);
+	]) if (genericSegments.has(segment)) {
+		segments.push(segment);
+		includedSegments.add(segment);
+	}
+	for (const segment of genericSegments) if (!includedSegments.has(segment)) segments.push(segment);
 	if (segments.length === 0) return "Worked";
 	const top = segments.slice(0, 3);
 	const joined = top.length === 1 ? top[0] : `${top.slice(0, -1).join(", ")} and ${top.at(-1)}`;

package/dist/components/ThinkChatToolPanels.js

@@ -1,8 +1,9 @@
 import { ActivityOutput, ActivityPanel } from "./Activity.js";
 import { displayUrl, isSessionContextToolFailure } from "./ThinkChatToolParts.js";
 import { Tabs } from "./Tabs.js";
-import { t as CodeBlock } from "../CodeBlock-Co1noLbC.js";
+import { t as CodeBlock } from "../CodeBlock-Bfp5PAg3.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
+import { inferWorkspaceLanguage } from "./WorkspaceFile.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getToolName } from "ai";
@@ -15,11 +16,6 @@ function renderDeniedPanel(label, reason) {
 		error: true
 	});
 }
-function numberLines(content, from = 1) {
-	const lines = content.split("\n");
-	const width = String(from + lines.length - 1).length;
-	return lines.map((line, i) => `${String(from + i).padStart(width)}  ${line}`).join("\n");
-}
 function prefixLines(text, prefix) {
 	return text.split("\n").map((line) => `${prefix}${line}`).join("\n");
 }
@@ -58,11 +54,19 @@ function ThinkChatWorkspacePanel({ part }) {
 			return /* @__PURE__ */ jsx(ActivityPanel, { label });
 		}
 		case "tool-write": {
+			const path = part.input?.path ?? "file";
+			const content = part.input?.content;
 			const output = part.state === "output-available" ? part.output : void 0;
 			return /* @__PURE__ */ jsx(ActivityPanel, {
-				label: part.input?.path ?? "file",
-				text: part.input?.content ? numberLines(part.input.content) : void 0,
-				status: output ? `${output.lines} lines written` : void 0
+				label: path,
+				status: output ? `${output.lines} lines written` : void 0,
+				children: content !== void 0 ? /* @__PURE__ */ jsx(CodeBlock, {
+					className: "activity__code-block",
+					code: content,
+					isStreaming: part.state === "input-streaming",
+					language: inferWorkspaceLanguage(path),
+					showLineNumbers: true
+				}) : null
 			});
 		}
 		case "tool-edit": {
@@ -402,19 +406,25 @@ function ThinkChatBrowserPanel({ part }) {
 				children: [
 					/* @__PURE__ */ jsxs(Tabs.List, {
 						variant: "line",
-						children: [/* @__PURE__ */ jsx(Tabs.Tab, {
-							value: "browser",
-							children: "Preview"
-						}), /* @__PURE__ */ jsx(Tabs.Tab, {
-							value: "code",
-							children: "Code"
-						})]
+						children: [
+							/* @__PURE__ */ jsx(Tabs.Tab, {
+								value: "browser",
+								children: "Preview"
+							}),
+							/* @__PURE__ */ jsx(Tabs.Tab, {
+								value: "code",
+								children: "Code"
+							}),
+							/* @__PURE__ */ jsx(Tabs.Indicator, {})
+						]
 					}),
 					/* @__PURE__ */ jsx(Tabs.Panel, {
+						className: "activity__browser-panel",
 						value: "browser",
 						children: browserView
 					}),
 					/* @__PURE__ */ jsx(Tabs.Panel, {
+						className: "activity__browser-panel",
 						value: "code",
 						children: codeView
 					})

package/dist/components/ThinkExecutionDetail.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { C as InfoIcon, K as TerminalIcon, R as RefreshIcon, X as XIcon, s as CheckIcon, t as ArrowDownIcon, y as FileIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { $ as XIcon, E as InfoIcon, H as RefreshIcon, Y as TerminalIcon, l as CheckIcon, n as ArrowDownIcon, x as FileIcon } from "../icons-CQJ-aMnI.js";
 import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityOutput, ActivityPanel, ActivityTrigger } from "./Activity.js";
 import { formatThinkExecutionRunProgress, formatThinkExecutionStatus, formatThinkExecutionTimestamp, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunStatus, getThinkExecutionRunTitle, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionStatus } from "./ThinkExecutionStatus.js";

package/dist/components/ThinkExecutionStatus.js

@@ -1,5 +1,5 @@
-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 { t as cx } from "../class-names-BiMDVpUo.js";
+import { $ as XIcon, E as InfoIcon, G as SpinnerIcon, L as PauseIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
 import { Tooltip } from "./Tooltip.js";
 import { formatThinkExecutionStatus, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone } from "./ThinkExecutionRun.js";
 import "react";

package/dist/components/ThinkExecutionWorkbench.d.ts

@@ -1,20 +1,41 @@
 import { t as ThinkExecutionRun } from "../ThinkExecutionRun-ChhWhOoU.js";
 import * as React from "react";
-import { Think } from "@cloudflare/think";
+import { DataTag, UndefinedInitialDataOptions } from "@tanstack/react-query";
+import { Think, ThinkSubmissionInspection } from "@cloudflare/think";
 import { AgentStub } from "agents/client";
+import { WorkflowPage } from "agents/workflows";
 
 //#region src/components/ThinkExecutionWorkbench.d.ts
 interface ThinkExecutionWorkbenchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
   /** Agents SDK client stub for a Think agent; this UI calls native submission/workflow methods. */
   source: AgentStub<Think>;
+  /**
+   * Stable, serializable identity for the remote Think agent. It must change
+   * when `source` points at a different agent and must not contain credentials.
+   */
+  sourceKey: string;
   title?: React.ReactNode;
   backButton?: React.ReactNode;
   pageSize?: number;
-  /** Whole native execution selected by a parent-owned route or product record. */
-  selectedRun?: ThinkExecutionRun | null;
-  /** Receives the fully inspected native execution after a user selects a row. */
-  onSelectedRunChange?: (run: ThinkExecutionRun) => void;
+  /** Whole native execution selected by the application route. */
+  selectedRun: ThinkExecutionRun | null;
+  /** Returns an application-authored TanStack Router Link for the run. */
+  renderRunLink: (run: ThinkExecutionRun) => React.ReactElement;
 }
+interface ThinkExecutionRunsData {
+  submissions: readonly ThinkSubmissionInspection[];
+  workflows: WorkflowPage;
+}
+type ThinkExecutionRunsQueryKey = readonly ["think", sourceKey: string, "execution-runs", {
+  readonly limit: number;
+}];
+type ThinkExecutionRunsQueryOptions = UndefinedInitialDataOptions<ThinkExecutionRunsData, Error, ThinkExecutionRunsData, ThinkExecutionRunsQueryKey> & {
+  queryKey: DataTag<ThinkExecutionRunsQueryKey, ThinkExecutionRunsData, Error>;
+};
+/**
+ * Shared list options for component reads and TanStack Router loaders.
+ */
+declare function thinkExecutionRunsQueryOptions(source: AgentStub<Think>, sourceKey: string, pageSize?: number): ThinkExecutionRunsQueryOptions;
 /**
  * Unified execution history for native Think submissions and Agents workflows.
  * The workbench reads and acts through the whole upstream agent stub; it does
@@ -23,15 +44,16 @@ interface ThinkExecutionWorkbenchProps extends Omit<React.HTMLAttributes<HTMLDiv
 declare function ThinkExecutionWorkbench({
   backButton,
   className,
-  onSelectedRunChange,
   pageSize,
   ref,
-  selectedRun: controlledSelectedRun,
+  renderRunLink,
+  selectedRun,
   source,
+  sourceKey,
   title,
   ...props
 }: ThinkExecutionWorkbenchProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { ThinkExecutionWorkbench, ThinkExecutionWorkbenchProps };
+export { ThinkExecutionRunsData, ThinkExecutionRunsQueryKey, ThinkExecutionRunsQueryOptions, ThinkExecutionWorkbench, ThinkExecutionWorkbenchProps, thinkExecutionRunsQueryOptions };

package/dist/components/ThinkExecutionWorkbench.js

@@ -1,6 +1,7 @@
-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 { 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 };