@mcp-b/react-components 0.40.0 → 0.42.0

package/dist/components/agents-sdk/ThinkExecutionDetail.js

@@ -1,9 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { C as FileIcon, G as RefreshIcon, O as InfoIcon, d as CheckIcon, et as TerminalIcon, it as XIcon, n as ArrowDownIcon } from "../../icons-MmIXciMO.js";
-import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityOutput, ActivityPanel, ActivityTrigger } from "../ai-sdk/Activity.js";
+import { S as FileIcon, T as InfoIcon } from "../../icons-CVFSeTJn.js";
+import { Activity, ActivityContent, ActivityItemGroup, ActivityOutput, ActivityTrigger } from "../ai-sdk/Activity.js";
 import { a as formatUnknownValue } from "../../format-DB2mX9DA.js";
+import { DescriptionList } from "../foundations/DescriptionList.js";
 import { EmptyState } from "../foundations/EmptyState.js";
-import { formatThinkExecutionRunProgress, formatThinkExecutionStatus, formatThinkExecutionTimestamp, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunStatus, getThinkExecutionRunTitle, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
+import { formatThinkExecutionTimestamp, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunKindLabel, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunTitle, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionStatus } from "./ThinkExecutionStatus.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -16,6 +17,7 @@ function ThinkExecutionDetail({ className, emptyState = "Select a run to view it
 	if (!run) return /* @__PURE__ */ jsx("section", {
 		ref,
 		className: cx("think-execution-detail", "think-execution-detail--empty", className),
+		"data-recipe": "page",
 		role: "status",
 		...props,
 		children: /* @__PURE__ */ jsx(EmptyState, { description: emptyState })
@@ -26,53 +28,53 @@ function ThinkExecutionDetail({ className, emptyState = "Select a run to view it
 	return /* @__PURE__ */ jsxs("section", {
 		ref,
 		className: cx("think-execution-detail", className),
+		"data-recipe": "page",
 		...props,
-		children: [/* @__PURE__ */ jsxs("header", {
-			className: "think-execution-workbench__detail-header",
-			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: getThinkExecutionRunTitle(run) }), !isThinkSubmissionRun(run) ? /* @__PURE__ */ jsx("code", { children: id }) : null] }), /* @__PURE__ */ jsxs("div", {
-				className: "think-execution-workbench__detail-status",
-				children: [/* @__PURE__ */ jsx(ThinkExecutionStatus, { run }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: formatThinkExecutionStatus(getThinkExecutionRunStatus(run)) }), /* @__PURE__ */ jsx("span", { children: formatThinkExecutionRunProgress(run) })] })]
-			})]
-		}), /* @__PURE__ */ jsxs(Activity, {
-			defaultOpen: true,
-			children: [/* @__PURE__ */ jsx(ActivityTrigger, {
-				icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
-				action: "Activity"
-			}), /* @__PURE__ */ jsxs(ActivityContent, { children: [
-				/* @__PURE__ */ jsx(ActivityItem, {
-					icon: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
-					children: `Created ${formatThinkExecutionTimestamp(run.createdAt)}`
-				}),
-				progressedAt ? /* @__PURE__ */ jsx(ActivityItem, {
-					icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
-					children: `${getThinkExecutionRunProgressedLabel(run)} ${formatThinkExecutionTimestamp(progressedAt)}`
-				}) : null,
-				run.completedAt ? /* @__PURE__ */ jsx(ActivityItem, {
-					icon: /* @__PURE__ */ jsx(CheckIcon, {}),
-					children: `Finished ${formatThinkExecutionTimestamp(run.completedAt)}`
-				}) : null,
-				error ? /* @__PURE__ */ jsx(ActivityItemGroup, {
-					icon: /* @__PURE__ */ jsx(XIcon, {}),
-					action: "Failure",
-					children: /* @__PURE__ */ jsx(ActivityPanel, {
-						label: "Error",
-						text: error,
-						status: "error",
-						error: true
-					})
-				}) : null,
-				run.metadata ? /* @__PURE__ */ jsx(ActivityItemGroup, {
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "think-execution-detail__header",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "think-execution-detail__eyebrow",
+						children: getThinkExecutionRunKindLabel(run)
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "think-execution-detail__heading",
+						children: [/* @__PURE__ */ jsx("h3", { children: getThinkExecutionRunTitle(run) }), /* @__PURE__ */ jsx(ThinkExecutionStatus, { run })]
+					}),
+					!isThinkSubmissionRun(run) ? /* @__PURE__ */ jsx("code", { children: id }) : null
+				]
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				className: "think-execution-detail__error",
+				role: "alert",
+				children: error
+			}) : null,
+			/* @__PURE__ */ jsxs(DescriptionList.Root, {
+				variant: "divided",
+				className: "think-execution-detail__facts",
+				children: [
+					/* @__PURE__ */ jsxs(DescriptionList.Item, { children: [/* @__PURE__ */ jsx(DescriptionList.Term, { children: "Created" }), /* @__PURE__ */ jsx(DescriptionList.Details, { children: formatThinkExecutionTimestamp(run.createdAt) })] }),
+					progressedAt ? /* @__PURE__ */ jsxs(DescriptionList.Item, { children: [/* @__PURE__ */ jsx(DescriptionList.Term, { children: getThinkExecutionRunProgressedLabel(run) }), /* @__PURE__ */ jsx(DescriptionList.Details, { children: formatThinkExecutionTimestamp(progressedAt) })] }) : null,
+					run.completedAt ? /* @__PURE__ */ jsxs(DescriptionList.Item, { children: [/* @__PURE__ */ jsx(DescriptionList.Term, { children: "Finished" }), /* @__PURE__ */ jsx(DescriptionList.Details, { children: formatThinkExecutionTimestamp(run.completedAt) })] }) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs(Activity, {
+				defaultOpen: true,
+				children: [/* @__PURE__ */ jsx(ActivityTrigger, {
+					icon: /* @__PURE__ */ jsx(FileIcon, {}),
+					action: "Record"
+				}), /* @__PURE__ */ jsxs(ActivityContent, { children: [run.metadata ? /* @__PURE__ */ jsx(ActivityItemGroup, {
 					icon: /* @__PURE__ */ jsx(InfoIcon, {}),
 					action: "Metadata",
 					children: /* @__PURE__ */ jsx(ActivityOutput, { children: formatJson(run.metadata) })
-				}) : null,
-				/* @__PURE__ */ jsx(ActivityItemGroup, {
+				}) : null, /* @__PURE__ */ jsx(ActivityItemGroup, {
 					icon: /* @__PURE__ */ jsx(FileIcon, {}),
 					action: "Raw record",
 					children: /* @__PURE__ */ jsx(ActivityOutput, { children: formatJson(run) })
-				})
-			] })]
-		})]
+				})] })]
+			})
+		]
 	});
 }
 //#endregion

package/dist/components/agents-sdk/ThinkExecutionRun.d.ts

@@ -1,2 +1,2 @@
-import { _ as isThinkSubmissionRun, a as formatThinkExecutionStatus, c as getThinkExecutionRunError, d as getThinkExecutionRunProgressedLabel, f as getThinkExecutionRunStatus, g as isSameThinkExecutionRun, h as getThinkExecutionRunTitle, i as formatThinkExecutionShortTimestamp, l as getThinkExecutionRunId, m as getThinkExecutionRunSubtitle, n as ThinkExecutionStatusTone, o as formatThinkExecutionTimestamp, p as getThinkExecutionRunStatusTone, r as formatThinkExecutionRunProgress, s as getThinkExecutionRunAccessibleName, t as ThinkExecutionRun, u as getThinkExecutionRunProgressedAt } from "../../ThinkExecutionRun-lYYgyeE1.js";
-export { ThinkExecutionRun, ThinkExecutionStatusTone, formatThinkExecutionRunProgress, formatThinkExecutionShortTimestamp, formatThinkExecutionStatus, formatThinkExecutionTimestamp, getThinkExecutionRunAccessibleName, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunSubtitle, getThinkExecutionRunTitle, isSameThinkExecutionRun, isThinkSubmissionRun };
+import { _ as isThinkSubmissionRun, a as formatThinkExecutionStatus, c as getThinkExecutionRunError, d as getThinkExecutionRunProgressedAt, f as getThinkExecutionRunProgressedLabel, g as getThinkExecutionRunTitle, h as getThinkExecutionRunSubtitle, i as formatThinkExecutionShortTimestamp, l as getThinkExecutionRunId, m as getThinkExecutionRunStatusTone, n as ThinkExecutionStatusTone, o as formatThinkExecutionTimestamp, p as getThinkExecutionRunStatus, r as formatThinkExecutionRunProgress, s as getThinkExecutionRunAccessibleName, t as ThinkExecutionRun, u as getThinkExecutionRunKindLabel } from "../../ThinkExecutionRun-k8bpyXqt.js";
+export { ThinkExecutionRun, ThinkExecutionStatusTone, formatThinkExecutionRunProgress, formatThinkExecutionShortTimestamp, formatThinkExecutionStatus, formatThinkExecutionTimestamp, getThinkExecutionRunAccessibleName, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunKindLabel, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunSubtitle, getThinkExecutionRunTitle, isThinkSubmissionRun };

package/dist/components/agents-sdk/ThinkExecutionRun.js

@@ -10,6 +10,9 @@ function getThinkExecutionRunId(run) {
 function getThinkExecutionRunTitle(run) {
 	return isThinkSubmissionRun(run) ? run.submissionId : run.workflowName;
 }
+function getThinkExecutionRunKindLabel(run) {
+	return isThinkSubmissionRun(run) ? "Submission" : "Workflow";
+}
 function getThinkExecutionRunSubtitle(run) {
 	return isThinkSubmissionRun(run) ? void 0 : run.workflowId;
 }
@@ -31,7 +34,7 @@ function getThinkExecutionRunStatusTone(run) {
 	const status = getThinkExecutionRunStatus(run);
 	if (status === "completed" || status === "complete") return "success";
 	if (status === "error" || status === "errored" || status === "terminated") return "danger";
-	if (status === "aborted" || status === "skipped" || status === "paused" || status === "waiting") return "warning";
+	if (status === "aborted" || status === "skipped" || status === "paused" || status === "waiting") return "paused";
 	if (status === "running" || status === "pending" || status === "queued" || status === "waitingForPause" || status === "rollingBack") return "primary";
 	return "neutral";
 }
@@ -64,9 +67,5 @@ function getThinkExecutionRunAccessibleName(run) {
 function getThinkExecutionRunError(run) {
 	return isThinkSubmissionRun(run) ? run.error : run.error ? `${run.error.name}: ${run.error.message}` : void 0;
 }
-function isSameThinkExecutionRun(first, second) {
-	if (!first || isThinkSubmissionRun(first) !== isThinkSubmissionRun(second)) return false;
-	return getThinkExecutionRunId(first) === getThinkExecutionRunId(second);
-}
 //#endregion
-export { formatThinkExecutionRunProgress, formatThinkExecutionShortTimestamp, formatThinkExecutionStatus, formatThinkExecutionTimestamp, getThinkExecutionRunAccessibleName, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunSubtitle, getThinkExecutionRunTitle, isSameThinkExecutionRun, isThinkSubmissionRun };
+export { formatThinkExecutionRunProgress, formatThinkExecutionShortTimestamp, formatThinkExecutionStatus, formatThinkExecutionTimestamp, getThinkExecutionRunAccessibleName, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunKindLabel, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunSubtitle, getThinkExecutionRunTitle, isThinkSubmissionRun };

package/dist/components/agents-sdk/ThinkExecutionStatus.d.ts

@@ -1,4 +1,4 @@
-import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-lYYgyeE1.js";
+import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-k8bpyXqt.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/ThinkExecutionStatus.d.ts

package/dist/components/agents-sdk/ThinkExecutionStatus.js

@@ -1,14 +1,14 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { B as PauseIcon, O as InfoIcon, Y as SpinnerIcon, d as CheckIcon, it as XIcon } from "../../icons-MmIXciMO.js";
+import { K as SpinnerIcon, L as PauseIcon, T as InfoIcon, d as CheckIcon, tt as XIcon } from "../../icons-CVFSeTJn.js";
 import { Tooltip } from "../foundations/Tooltip.js";
-import { formatThinkExecutionRunProgress, formatThinkExecutionStatus, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunSubtitle, getThinkExecutionRunTitle } from "./ThinkExecutionRun.js";
+import { formatThinkExecutionRunProgress, formatThinkExecutionStatus, getThinkExecutionRunKindLabel, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunTitle } from "./ThinkExecutionRun.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkExecutionStatus.tsx
 function statusIcon(tone) {
 	if (tone === "success") return /* @__PURE__ */ jsx(CheckIcon, {});
 	if (tone === "danger") return /* @__PURE__ */ jsx(XIcon, {});
-	if (tone === "warning") return /* @__PURE__ */ jsx(PauseIcon, {});
+	if (tone === "paused") return /* @__PURE__ */ jsx(PauseIcon, {});
 	if (tone === "primary") return /* @__PURE__ */ jsx(SpinnerIcon, {});
 	return /* @__PURE__ */ jsx(InfoIcon, {});
 }
@@ -34,7 +34,6 @@ function ThinkExecutionStatus({ className, label, run, ref, ...props }) {
 }
 /** Shared identity, status, and progress summary for a whole Think execution record. */
 function ThinkExecutionRunSummary({ className, run, ref, ...props }) {
-	const subtitle = getThinkExecutionRunSubtitle(run);
 	return /* @__PURE__ */ jsxs("span", {
 		ref,
 		"data-slot": "think-execution-run-summary",
@@ -42,15 +41,12 @@ function ThinkExecutionRunSummary({ className, run, ref, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx(ThinkExecutionStatus, { run }), /* @__PURE__ */ jsxs("span", {
 			className: "think-execution-run-summary__copy",
-			children: [/* @__PURE__ */ jsxs("span", {
-				className: "think-execution-run-summary__heading",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "think-execution-run-summary__title sigvelo-truncate",
-					children: getThinkExecutionRunTitle(run)
-				}), subtitle ? /* @__PURE__ */ jsx("code", { children: subtitle }) : null]
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "think-execution-run-summary__title sigvelo-truncate",
+				children: getThinkExecutionRunTitle(run)
 			}), /* @__PURE__ */ jsx("span", {
-				className: "think-execution-run-summary__progress",
-				children: formatThinkExecutionRunProgress(run)
+				className: "think-execution-run-summary__meta sigvelo-truncate",
+				children: `${getThinkExecutionRunKindLabel(run)} · ${formatThinkExecutionStatus(getThinkExecutionRunStatus(run))} · ${formatThinkExecutionRunProgress(run)}`
 			})]
 		})]
 	});

package/dist/components/agents-sdk/ThinkExecutionWorkbench.d.ts

@@ -1,4 +1,4 @@
-import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-lYYgyeE1.js";
+import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-k8bpyXqt.js";
 import * as React from "react";
 import { DataTag, UnusedSkipTokenOptions } from "@tanstack/react-query";
 import { Think, ThinkSubmissionInspection } from "@cloudflare/think";
@@ -21,6 +21,12 @@ interface ThinkExecutionWorkbenchProps extends Omit<React.HTMLAttributes<HTMLDiv
   selectedRun: ThinkExecutionRun | null;
   /** Returns an application-authored TanStack Router Link for the run. */
   renderRunLink: (run: ThinkExecutionRun) => React.ReactElement;
+  /**
+   * Returns an application-authored TanStack Router Link back to the run
+   * list. A selected run replaces the list — the workspace drill-in pattern —
+   * so this link is the way back out.
+   */
+  renderRunsLink: () => React.ReactElement;
 }
 interface ThinkExecutionRunsData {
   submissions: readonly ThinkSubmissionInspection[];
@@ -48,6 +54,7 @@ declare function ThinkExecutionWorkbench({
   pageSize,
   ref,
   renderRunLink,
+  renderRunsLink,
   selectedRun,
   source,
   sourceKey,

package/dist/components/agents-sdk/ThinkExecutionWorkbench.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { G as RefreshIcon, b as EllipsisIcon } from "../../icons-MmIXciMO.js";
+import { $ as WarningIcon, H as RefreshIcon, r as ArrowLeftIcon, y as EllipsisIcon } from "../../icons-CVFSeTJn.js";
 import { buttonVariants } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Menu } from "../foundations/Menu.js";
@@ -7,7 +7,7 @@ import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
-import { getThinkExecutionRunAccessibleName, getThinkExecutionRunId, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, isSameThinkExecutionRun, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
+import { getThinkExecutionRunAccessibleName, getThinkExecutionRunId, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionRunSummary } from "./ThinkExecutionStatus.js";
 import { ThinkExecutionDetail } from "./ThinkExecutionDetail.js";
 import * as React from "react";
@@ -117,7 +117,7 @@ function thinkExecutionRunsQueryOptions(source, sourceKey, pageSize = executionP
 * not normalize execution records or own workflow authoring. Its first
 * uncached list read suspends to the consuming route's Suspense boundary.
 */
-function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPanelPageSize, ref, renderRunLink, selectedRun, source, sourceKey, title = "Execution", ...props }) {
+function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPanelPageSize, ref, renderRunLink, renderRunsLink, selectedRun, source, sourceKey, title = "Execution", ...props }) {
 	const runsId = React.useId();
 	const runsOptions = thinkExecutionRunsQueryOptions(source, sourceKey, pageSize);
 	const runsQueryKey = thinkExecutionRunsScopeQueryKey(sourceKey);
@@ -142,18 +142,29 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("think-execution-workbench", className),
+		"data-recipe": "fill-host",
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs(AppTopBar.Root, {
 				className: "think-execution-workbench__header",
+				titleAlign: "start",
 				"aria-label": "Run controls",
 				children: [
-					/* @__PURE__ */ jsx(AppTopBar.Leading, { children: backButton }),
+					/* @__PURE__ */ jsx(AppTopBar.Leading, { children: selectedRun ? /* @__PURE__ */ jsx(AppTopBar.Link, {
+						label: "Back to runs",
+						render: renderRunsLink(),
+						children: /* @__PURE__ */ jsx(ArrowLeftIcon, { "aria-hidden": "true" })
+					}) : backButton }),
 					/* @__PURE__ */ jsx(AppTopBar.Title, { children: /* @__PURE__ */ jsx("h2", {
 						className: "think-execution-workbench__title",
 						children: title
 					}) }),
-					/* @__PURE__ */ jsx(AppTopBar.Trailing, { children: /* @__PURE__ */ jsx(AppTopBar.Button, {
+					/* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [selectedRun ? /* @__PURE__ */ jsx(RunActions, {
+						busy: actionIsPending,
+						run: selectedRun,
+						source,
+						onAction: runAction
+					}) : null, /* @__PURE__ */ jsx(AppTopBar.Button, {
 						label: "Refresh runs",
 						disabled: busyAction !== null,
 						onClick: () => {
@@ -161,18 +172,22 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 							runsQuery.refetch();
 						},
 						children: /* @__PURE__ */ jsx(RefreshIcon, {})
-					}) })
+					})] })
 				]
 			}),
-			error ? /* @__PURE__ */ jsx("div", {
+			error ? /* @__PURE__ */ jsxs("div", {
 				className: "think-execution-workbench__error",
 				role: "alert",
-				children: formatErrorMessage(error)
+				children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: formatErrorMessage(error) })]
 			}) : null,
-			/* @__PURE__ */ jsxs("div", {
+			/* @__PURE__ */ jsx("div", {
 				className: "think-execution-workbench__content",
 				"aria-busy": busyAction !== null,
-				children: [/* @__PURE__ */ jsxs("section", {
+				children: selectedRun ? /* @__PURE__ */ jsx("section", {
+					className: "think-execution-workbench__detail",
+					"aria-label": "Run detail",
+					children: /* @__PURE__ */ jsx(ThinkExecutionDetail, { run: selectedRun })
+				}) : /* @__PURE__ */ jsxs("section", {
 					className: "think-execution-workbench__run-list",
 					"aria-labelledby": runsId,
 					children: [/* @__PURE__ */ jsx("div", {
@@ -190,35 +205,26 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 						children: runs.map((run) => {
 							const id = getThinkExecutionRunId(run);
 							const kind = isThinkSubmissionRun(run) ? "submission" : "workflow";
-							const selected = isSameThinkExecutionRun(selectedRun, run);
-							return /* @__PURE__ */ jsxs("li", {
-								"data-selected": selected || void 0,
-								children: [/* @__PURE__ */ jsx(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,
-									children: /* @__PURE__ */ jsx(ThinkExecutionRunSummary, { run })
-								}), /* @__PURE__ */ jsx(RunActions, {
-									busy: actionIsPending,
-									run,
-									source,
-									onAction: runAction
-								})]
-							}, `${kind}:${id}`);
+							return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx(NavigationLink, {
+								render: renderRunLink(run),
+								"data-slot": "button",
+								className: buttonVariants({
+									variant: "ghost",
+									color: "neutral",
+									size: "sm",
+									className: "think-execution-workbench__run"
+								}),
+								"aria-label": getThinkExecutionRunAccessibleName(run),
+								children: /* @__PURE__ */ jsx(ThinkExecutionRunSummary, { run })
+							}), /* @__PURE__ */ jsx(RunActions, {
+								busy: actionIsPending,
+								run,
+								source,
+								onAction: runAction
+							})] }, `${kind}:${id}`);
 						})
 					})]
-				}), /* @__PURE__ */ jsx("section", {
-					className: "think-execution-workbench__detail",
-					"aria-label": "Run detail",
-					children: /* @__PURE__ */ jsx(ThinkExecutionDetail, { run: selectedRun })
-				})]
+				})
 			})
 		]
 	});

package/dist/components/agents-sdk/ThinkFullApp.d.ts

@@ -1,12 +1,9 @@
 import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-Bh9-Jo1r.js";
-import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-BCVqCtJ1.js";
+import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-daY67hFM.js";
 import { McpPluginCatalogProps } from "./McpPluginCatalog.js";
 import { ThinkChatMessagesProps } from "./ThinkChat.js";
-import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-lYYgyeE1.js";
-import { ThinkExecutionWorkbenchProps } from "./ThinkExecutionWorkbench.js";
-import { ThinkFullAppView } from "./ThinkFullAppViewSwitch.js";
+import { AppBarSlots, ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { ThinkThreadStatusSummary } from "./ThinkThreadPicker.js";
-import { ThinkThreadShell } from "./ThinkThreadShell.js";
 import { r as WorkspaceFileAssetResolver } from "../../WorkspaceFile-BLaFmMrt.js";
 import { WorkspaceSource } from "./Workspace.js";
 import { t as ThinkAgent } from "../../think-agent-Cip5KAPj.js";
@@ -16,9 +13,15 @@ import { useAgentChat } from "@cloudflare/think/react";
 import { useAgent } from "agents/react";
 
 //#region src/components/agents-sdk/ThinkFullApp.d.ts
-type ThinkFullAppMobileView = "chat" | "workbench";
 type ThinkFullAppAgent<State = unknown> = ThinkAgent<State>;
-type ThinkFullAppWorkbenchView = "files" | "execution" | "plugins" | (string & {});
+type ThinkFullAppWorkbenchView = "files" | "plugins" | (string & {});
+/**
+ * The one view axis: the conversation alone, or the conversation with a named
+ * workbench panel raised beside it (leading at narrow widths). Apps that make
+ * views durable derive this from validated route search state and pass
+ * `onViewChange` back into their router.
+ */
+type ThinkFullAppView = "chat" | ThinkFullAppWorkbenchView;
 interface ThinkFullAppWorkspaceConfig {
   source: WorkspaceSource;
   /**
@@ -34,13 +37,15 @@ interface ThinkFullAppWorkspaceConfig {
   leading?: React.ReactNode;
   actions?: React.ReactNode;
 }
-interface ThinkFullAppPanel extends ThinkFullAppView {
-  /** Unique panel id used by `workbenchView`; custom panels should not reuse built-in ids. */
+interface ThinkFullAppPanel {
+  /** Unique panel id used by `view`; custom panels should not reuse built-in ids. */
   id: ThinkFullAppWorkbenchView;
+  label: string;
+  icon: React.ReactNode;
   /** Panels are app-authored, so anything one needs is already in its scope. */
   render: () => React.ReactNode;
 }
-/** The live conversation the chat lane, approvals, and executions belong to. */
+/** The live conversation the chat lane and approvals belong to. */
 interface ThinkFullAppConversation<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> {
   /** The `useAgent` value from `agents/react`; its stub drives approvals and execution records. */
   agent: ReturnType<typeof useAgent<AgentT, State>>;
@@ -57,39 +62,25 @@ interface ThinkFullAppConversation<AgentT extends ThinkFullAppAgent<State>, Stat
 interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Omit it and supply `messages.draft` for the first turn of a conversation
-   * that does not exist yet. The approvals, execution, and background-agent
-   * surfaces wait for a conversation to belong to; everything else is unchanged.
+   * that does not exist yet. The approvals and background-agent surfaces wait
+   * for a conversation to belong to; everything else is unchanged.
    */
   conversation?: ThinkFullAppConversation<AgentT, State, MessageT>;
   /** Atomic workspace source, navigation, media, and header configuration. */
   workspace?: ThinkFullAppWorkspaceConfig;
   /** Plugin directory backed by the host's live Agents MCP state and connection callbacks. */
   plugins?: McpPluginCatalogProps;
-  /** Product-specific actions rendered in the application top bar. */
-  appBarActions?: React.ReactNode;
-  /** Product-specific navigation rendered after the built-in sidebar control. */
-  appBarLeading?: React.ReactNode;
-  /** Active conversation or page title rendered in the application top bar. */
-  appBarTitle?: React.ReactNode;
+  /** Application bar slots: back control, leading navigation, title, actions. */
+  bar?: AppBarSlots;
   /** Aggregate thread activity rendered beside the compact thread-title disclosure. */
   threadStatusSummary?: ThinkThreadStatusSummary;
-  /** Whether narrow layouts render the built-in chat/workbench switch. Defaults to true. */
-  showMobileViewSwitch?: boolean;
-  /** Whether desktop layouts render the built-in workbench switch. Defaults to true. */
-  showWorkbenchViewSwitch?: 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
+   * Stable, non-secret identity for the remote Think agent used by approvals.
+   * 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 and enables the Execution workbench. */
-  renderExecutionRunLink?: ThinkExecutionWorkbenchProps["renderRunLink"];
   /** Message rendering labels and approval overrides for ThinkChat. */
   messages?: ThinkChatMessagesProps<MessageT>;
   /** Extra workbench panels appended after the enabled built-in panels. */
@@ -100,72 +91,45 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
    * 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.
    */
-  threadSidebar?: React.ComponentProps<typeof ThinkThreadShell>["sidebar"];
-  /** Whether the thread sidebar is open. Omit for internal state. */
-  threadSidebarOpen?: boolean;
-  /** Initial thread sidebar state when `threadSidebarOpen` is uncontrolled. */
-  defaultThreadSidebarOpen?: boolean;
-  /** Called when the thread sidebar is opened or closed. */
-  onThreadSidebarOpenChange?: (open: boolean) => void;
-  /** Visible surface at narrow widths. Omit for internal state. */
-  mobileView?: ThinkFullAppMobileView;
-  /** Initial narrow-width surface when `mobileView` is uncontrolled. */
-  defaultMobileView?: ThinkFullAppMobileView;
-  /** Called when narrow layouts switch between chat and the workbench. */
-  onMobileViewChange?: (view: ThinkFullAppMobileView) => void;
+  threadSidebar?: React.ComponentProps<typeof ResponsiveSidebarShell>["sidebar"];
   /**
-   * Selected workbench lane for controlled, ephemeral panel UI.
-   * Apps that make lanes durable should derive this value from validated route search state.
+   * Visible surface. Omit for internal state. A controlled `view` naming a
+   * panel that does not exist renders the conversation alone — it is never
+   * silently substituted with another panel.
    */
-  workbenchView?: ThinkFullAppWorkbenchView;
-  /** Initial workbench lane when `workbenchView` is uncontrolled. */
-  defaultWorkbenchView?: ThinkFullAppWorkbenchView;
-  /** Called when the shell toolbar asks to switch workbench lanes. */
-  onWorkbenchViewChange?: (view: ThinkFullAppWorkbenchView) => void;
-  /** Whether the desktop workbench panel is open. Omit for internal state. */
-  workbenchOpen?: boolean;
-  /** Initial desktop workbench state when `workbenchOpen` is uncontrolled. */
-  defaultWorkbenchOpen?: boolean;
-  /** Called when toolbar or resize input opens or closes the workbench. */
-  onWorkbenchOpenChange?: (open: boolean) => void;
+  view?: ThinkFullAppView;
+  /**
+   * Uncontrolled starting view. Ignored when `view` is set. Omit it to open
+   * Files beside the conversation on a wide app when a workspace exists, and
+   * to stay on chat at compact (extension) widths.
+   */
+  defaultView?: ThinkFullAppView;
+  /** Called when the built-in switch (or a collapse) asks for another view. */
+  onViewChange?: (view: ThinkFullAppView) => void;
 }
-/** Combines ThinkChat with an optional resizable workbench shell. */
+/** Combines ThinkChat with a resizable workbench. Wide apps with a workspace
+ *  open Files beside the conversation; compact (extension) widths stay on chat
+ *  until a view is selected. */
 declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage>({
-  appBarActions,
-  appBarLeading,
-  appBarTitle,
+  bar,
   className,
   conversation,
-  defaultMobileView,
-  defaultWorkbenchOpen,
-  defaultWorkbenchView,
-  defaultThreadSidebarOpen,
-  hideAppBarInWorkbench,
+  defaultView: defaultViewProp,
   messages,
-  mobileView,
-  onMobileViewChange,
-  onThreadSidebarOpenChange,
-  onWorkbenchOpenChange,
-  onWorkbenchViewChange,
+  onViewChange,
   plugins,
   ref,
   renderAgentToolRunLink,
-  renderExecutionRunLink,
-  selectedExecutionRun,
-  showMobileViewSwitch,
-  showWorkbenchViewSwitch,
   sourceKey,
   style,
   threadSidebar,
-  threadSidebarOpen,
   threadStatusSummary,
-  workbenchOpen,
+  view,
   workbenchPanels,
-  workbenchView,
   workspace,
   ...props
 }: ThinkFullAppProps<AgentT, State, MessageT> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { ThinkFullApp, ThinkFullAppAgent, ThinkFullAppConversation, ThinkFullAppMobileView, ThinkFullAppPanel, ThinkFullAppProps, ThinkFullAppWorkbenchView, ThinkFullAppWorkspaceConfig };
+export { ThinkFullApp, ThinkFullAppAgent, ThinkFullAppConversation, ThinkFullAppPanel, ThinkFullAppProps, ThinkFullAppView, ThinkFullAppWorkbenchView, ThinkFullAppWorkspaceConfig };