@mcp-b/react-components 0.40.0 → 0.41.0

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);
@@ -146,14 +146,24 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 		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 +171,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 +204,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,12 @@
 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 { t as ThinkExecutionRun } from "../../ThinkExecutionRun-k8bpyXqt.js";
 import { ThinkExecutionWorkbenchProps } from "./ThinkExecutionWorkbench.js";
+import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { ThinkFullAppView } from "./ThinkFullAppViewSwitch.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";
@@ -67,8 +67,10 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   plugins?: McpPluginCatalogProps;
   /** Product-specific actions rendered in the application top bar. */
   appBarActions?: React.ReactNode;
-  /** Product-specific navigation rendered after the built-in sidebar control. */
+  /** Product-specific navigation that owns the leading slot at every width. */
   appBarLeading?: React.ReactNode;
+  /** Product-specific compact navigation; the wide layout keeps its sidebar toggle. */
+  compactAppBarLeading?: React.ReactNode;
   /** Active conversation or page title rendered in the application top bar. */
   appBarTitle?: React.ReactNode;
   /** Aggregate thread activity rendered beside the compact thread-title disclosure. */
@@ -88,8 +90,16 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
    * has its own source identity.
    */
   sourceKey: string;
-  /** Returns an application-authored TanStack Router Link and enables the Execution workbench. */
+  /**
+   * Returns an application-authored TanStack Router Link for a run. Together
+   * with `renderExecutionRunsLink` this enables the Execution workbench.
+   */
   renderExecutionRunLink?: ThinkExecutionWorkbenchProps["renderRunLink"];
+  /**
+   * Returns an application-authored TanStack Router Link back to the run
+   * list — the way out of a selected run, which replaces the list in place.
+   */
+  renderExecutionRunsLink?: ThinkExecutionWorkbenchProps["renderRunsLink"];
   /** Message rendering labels and approval overrides for ThinkChat. */
   messages?: ThinkChatMessagesProps<MessageT>;
   /** Extra workbench panels appended after the enabled built-in panels. */
@@ -100,7 +110,7 @@ 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"];
+  threadSidebar?: React.ComponentProps<typeof ResponsiveSidebarShell>["sidebar"];
   /** Whether the thread sidebar is open. Omit for internal state. */
   threadSidebarOpen?: boolean;
   /** Initial thread sidebar state when `threadSidebarOpen` is uncontrolled. */
@@ -134,6 +144,7 @@ declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = u
   appBarActions,
   appBarLeading,
   appBarTitle,
+  compactAppBarLeading,
   className,
   conversation,
   defaultMobileView,
@@ -151,6 +162,7 @@ declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = u
   ref,
   renderAgentToolRunLink,
   renderExecutionRunLink,
+  renderExecutionRunsLink,
   selectedExecutionRun,
   showMobileViewSwitch,
   showWorkbenchViewSwitch,