@mcp-b/react-components 0.48.0 → 0.49.0

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

@@ -20,7 +20,7 @@ declare function ThinkExecutionStatus({
   ref,
   ...props
 }: ThinkExecutionStatusProps & {
-  ref?: React.Ref<HTMLSpanElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 /** Shared identity, status, and progress summary for a whole Think execution record. */
 declare function ThinkExecutionRunSummary({

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { K as SpinnerIcon, L as PauseIcon, T as InfoIcon, d as CheckIcon, nt as XIcon } from "../../icons-CeGfXO21.js";
+import { K as SpinnerIcon, L as PauseIcon, T as InfoIcon, d as CheckIcon, nt as XIcon } from "../../icons-cuEtsgj9.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { formatThinkExecutionRunProgress, formatThinkExecutionStatus, getThinkExecutionRunKindLabel, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunTitle } from "./ThinkExecutionRun.js";
 import "react";

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

@@ -1,32 +1,38 @@
 import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-k8bpyXqt.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 import { DataTag, UnusedSkipTokenOptions } from "@tanstack/react-query";
 import { Think, ThinkSubmissionInspection } from "@cloudflare/think";
 import { AgentStub } from "agents/client";
 import { WorkflowPage } from "agents/workflows";
 
+//#region src/components/_internal/navigation-link.d.ts
+interface NavigationLinkProps extends Omit<useRender.ComponentProps<"a">, "render"> {
+  /** App-authored TanStack Router Link with its destination already type-checked. */
+  render: React.ReactElement;
+}
+/**
+ * Merges design-system anchor props into an application-owned router Link.
+ *
+ * Keeping the Link element at the call site lets the consuming application's
+ * registered route tree infer `to`, `params`, and `search` without routing
+ * generics leaking through every design-system component.
+ */
+declare function NavigationLink({
+  render,
+  ref,
+  ...props
+}: NavigationLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+//#endregion
 //#region src/components/agents-sdk/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. */
+interface ThinkExecutionWorkbenchRootProps extends useRender.ComponentProps<"div"> {
+  /** Whole Agents SDK client stub; native submission/workflow methods remain unchanged. */
   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.
-   */
+  /** Stable, non-secret remote agent identity; change with the backing source. */
   sourceKey: string;
-  title?: React.ReactNode;
-  backButton?: React.ReactNode;
+  /** Maximum submissions and workflows requested per page. */
   pageSize?: number;
-  /** 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;
-  /**
-   * 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,20 +54,71 @@ declare function thinkExecutionRunsQueryOptions(source: AgentStub<Think>, source
  * not normalize execution records or own workflow authoring. Its first
  * uncached list read suspends to the consuming route's Suspense boundary.
  */
-declare function ThinkExecutionWorkbench({
-  backButton,
-  className,
+declare function ThinkExecutionWorkbenchRoot({
   pageSize,
+  render,
   ref,
-  renderRunLink,
-  renderRunsLink,
-  selectedRun,
   source,
   sourceKey,
-  title,
   ...props
-}: ThinkExecutionWorkbenchProps & {
-  ref?: React.Ref<HTMLDivElement>;
+}: ThinkExecutionWorkbenchRootProps): React.JSX.Element;
+/** Caller-authored toolbar; no title, navigation, or action is injected. */
+declare function ThinkExecutionWorkbenchHeader({
+  className,
+  "aria-label": label,
+  ...props
+}: Omit<React.ComponentProps<typeof AppTopBar.Root>, "aria-label"> & {
+  "aria-label"?: string;
 }): React.JSX.Element;
+declare function ThinkExecutionWorkbenchContent({
+  render,
+  ref,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Refresh control retaining the complete AppTopBar button render/ref/event contract. */
+declare function ThinkExecutionWorkbenchRefresh({
+  label,
+  ...props
+}: Omit<React.ComponentProps<typeof AppTopBar.Button>, "label"> & {
+  label?: string;
+}): React.JSX.Element;
+declare function ThinkExecutionWorkbenchError({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<"div">): React.JSX.Element | null;
+/** Controls for one whole native run; mount in a list row or a selected-run toolbar. */
+declare function ThinkExecutionWorkbenchRunActions({
+  run
+}: {
+  run: ThinkExecutionRun;
+}): React.JSX.Element;
+interface ThinkExecutionWorkbenchListProps extends Omit<React.ComponentPropsWithRef<"section">, "children"> {
+  /** Explicit row content; native execution identity and order come from the query. */
+  children: (run: ThinkExecutionRun) => React.ReactNode;
+}
+declare function ThinkExecutionWorkbenchList({
+  children,
+  className,
+  ...props
+}: ThinkExecutionWorkbenchListProps): React.JSX.Element;
+interface ThinkExecutionWorkbenchRunLinkProps extends Omit<React.ComponentProps<typeof NavigationLink>, "children"> {
+  run: ThinkExecutionRun;
+}
+declare function ThinkExecutionWorkbenchRunLink({
+  run,
+  className,
+  ...props
+}: ThinkExecutionWorkbenchRunLinkProps): React.JSX.Element;
+/** Native execution runtime with independently placed controls, rows, and route content. */
+declare const ThinkExecutionWorkbench: {
+  Root: typeof ThinkExecutionWorkbenchRoot;
+  Header: typeof ThinkExecutionWorkbenchHeader;
+  Content: typeof ThinkExecutionWorkbenchContent;
+  Refresh: typeof ThinkExecutionWorkbenchRefresh;
+  Error: typeof ThinkExecutionWorkbenchError;
+  List: typeof ThinkExecutionWorkbenchList;
+  RunLink: typeof ThinkExecutionWorkbenchRunLink;
+  RunActions: typeof ThinkExecutionWorkbenchRunActions;
+};
 //#endregion
-export { ThinkExecutionRunsData, ThinkExecutionRunsQueryKey, ThinkExecutionRunsQueryOptions, ThinkExecutionWorkbench, ThinkExecutionWorkbenchProps, thinkExecutionRunsQueryOptions };
+export { ThinkExecutionRunsData, ThinkExecutionRunsQueryKey, ThinkExecutionRunsQueryOptions, ThinkExecutionWorkbench, ThinkExecutionWorkbenchListProps, ThinkExecutionWorkbenchRootProps, ThinkExecutionWorkbenchRunLinkProps, thinkExecutionRunsQueryOptions };

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

@@ -1,20 +1,25 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { H as RefreshIcon, et as WarningIcon, r as ArrowLeftIcon, y as EllipsisIcon } from "../../icons-CeGfXO21.js";
+import { H as RefreshIcon, et as WarningIcon, y as EllipsisIcon } from "../../icons-cuEtsgj9.js";
 import { buttonVariants } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { Menu } from "../foundations/Menu.js";
 import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
-import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
+import { Menu } from "../foundations/Menu.js";
 import { EmptyState } from "../foundations/EmptyState.js";
+import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.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";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
 import { queryOptions, useMutation, useSuspenseQuery } from "@tanstack/react-query";
 //#region src/components/agents-sdk/ThinkExecutionWorkbench.tsx
 const executionPanelPageSize = 20;
+const workbenchDefaults = {
+	className: "think-execution-workbench",
+	"data-recipe": "fill-host"
+};
 function isSubmissionCancelable(status) {
 	return status === "pending" || status === "running";
 }
@@ -117,11 +122,8 @@ 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, renderRunsLink, selectedRun, source, sourceKey, title = "Execution", ...props }) {
-	const runsId = React.useId();
-	const runsOptions = thinkExecutionRunsQueryOptions(source, sourceKey, pageSize);
-	const runsQueryKey = thinkExecutionRunsScopeQueryKey(sourceKey);
-	const runsQuery = useSuspenseQuery(runsOptions);
+function ThinkExecutionWorkbenchRoot({ pageSize = executionPanelPageSize, render, ref, source, sourceKey, ...props }) {
+	const runsQuery = useSuspenseQuery(thinkExecutionRunsQueryOptions(source, sourceKey, pageSize));
 	const actionMutation = useMutation({
 		mutationFn: ({ action }) => action(),
 		onSuccess: (_result, action, _onMutateResult, context) => context.client.invalidateQueries({ queryKey: action.runsQueryKey })
@@ -131,103 +133,158 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 	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
-		});
-	};
-	return /* @__PURE__ */ jsxs("div", {
+	const { mutate, reset } = actionMutation;
+	const { refetch } = runsQuery;
+	const busy = busyAction !== null;
+	const value = React.useMemo(() => ({
+		runs,
+		source,
+		actionIsPending,
+		busy,
+		error,
+		runAction: (key, action) => {
+			mutate({
+				action,
+				key,
+				runsQueryKey: thinkExecutionRunsScopeQueryKey(sourceKey),
+				source
+			});
+		},
+		refresh: () => {
+			reset();
+			refetch();
+		}
+	}), [
+		runs,
+		source,
+		sourceKey,
+		actionIsPending,
+		busy,
+		error,
+		mutate,
+		reset,
+		refetch
+	]);
+	const element = useRender({
+		defaultTagName: "div",
+		render,
 		ref,
-		className: cx("think-execution-workbench", className),
-		"data-recipe": "fill-host",
+		props: mergeProps(workbenchDefaults, props)
+	});
+	return /* @__PURE__ */ jsx(WorkbenchContext.Provider, {
+		value,
+		children: element
+	});
+}
+const WorkbenchContext = React.createContext(null);
+function useWorkbench() {
+	const value = React.useContext(WorkbenchContext);
+	if (!value) throw new Error("ThinkExecutionWorkbench parts require ThinkExecutionWorkbench.Root.");
+	return value;
+}
+/** Caller-authored toolbar; no title, navigation, or action is injected. */
+function ThinkExecutionWorkbenchHeader({ className, "aria-label": label = "Run controls", ...props }) {
+	return /* @__PURE__ */ jsx(AppTopBar.Root, {
+		titleAlign: "start",
+		"aria-label": label,
 		...props,
-		children: [
-			/* @__PURE__ */ jsxs(AppTopBar.Root, {
-				className: "think-execution-workbench__header",
-				titleAlign: "start",
-				"aria-label": "Run controls",
-				children: [
-					/* @__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__ */ 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: () => {
-							actionMutation.reset();
-							runsQuery.refetch();
-						},
-						children: /* @__PURE__ */ jsx(RefreshIcon, {})
-					})] })
-				]
-			}),
-			error ? /* @__PURE__ */ jsxs("div", {
-				className: "think-execution-workbench__error",
-				role: "alert",
-				children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: formatErrorMessage(error) })]
-			}) : null,
-			/* @__PURE__ */ jsx("div", {
-				className: "think-execution-workbench__content",
-				"aria-busy": busyAction !== null,
-				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", {
-						className: "think-execution-workbench__list-header",
-						children: /* @__PURE__ */ jsx("h3", {
-							id: runsId,
-							children: "Runs"
-						})
-					}), runs.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
-						className: "think-execution-workbench__empty",
-						description: "No runs yet."
-					}) : /* @__PURE__ */ jsx("ul", {
-						className: "think-execution-workbench__list",
-						role: "list",
-						children: runs.map((run) => {
-							const id = getThinkExecutionRunId(run);
-							const kind = isThinkSubmissionRun(run) ? "submission" : "workflow";
-							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}`);
-						})
-					})]
-				})
+		className: cx("think-execution-workbench__header", className)
+	});
+}
+function ThinkExecutionWorkbenchContent({ render, ref, ...props }) {
+	const { busy } = useWorkbench();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({
+			className: "think-execution-workbench__content",
+			"aria-busy": busy
+		}, props)
+	});
+}
+/** Refresh control retaining the complete AppTopBar button render/ref/event contract. */
+function ThinkExecutionWorkbenchRefresh({ label = "Refresh runs", ...props }) {
+	const { busy, refresh } = useWorkbench();
+	return /* @__PURE__ */ jsx(AppTopBar.Button, {
+		...mergeProps({
+			label,
+			disabled: busy,
+			onClick: refresh,
+			children: /* @__PURE__ */ jsx(RefreshIcon, {})
+		}, {
+			...props,
+			label
+		}),
+		disabled: busy || props.disabled
+	});
+}
+function ThinkExecutionWorkbenchError({ className, ...props }) {
+	const { error } = useWorkbench();
+	return error ? /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		...props,
+		className: cx("think-execution-workbench__error", className),
+		children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: formatErrorMessage(error) })]
+	}) : null;
+}
+/** Controls for one whole native run; mount in a list row or a selected-run toolbar. */
+function ThinkExecutionWorkbenchRunActions({ run }) {
+	const { source, actionIsPending, runAction } = useWorkbench();
+	return /* @__PURE__ */ jsx(RunActions, {
+		run,
+		source,
+		busy: actionIsPending,
+		onAction: runAction
+	});
+}
+function ThinkExecutionWorkbenchList({ children, className, ...props }) {
+	const { runs } = useWorkbench();
+	const runsId = React.useId();
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": runsId,
+		...props,
+		className: cx("think-execution-workbench__run-list", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "think-execution-workbench__list-header",
+			children: /* @__PURE__ */ jsx("h3", {
+				id: runsId,
+				children: "Runs"
 			})
-		]
+		}), runs.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+			className: "think-execution-workbench__empty",
+			description: "No runs yet."
+		}) : /* @__PURE__ */ jsx("ul", {
+			className: "think-execution-workbench__list",
+			role: "list",
+			children: runs.map((run) => /* @__PURE__ */ jsx("li", { children: children(run) }, `${isThinkSubmissionRun(run) ? "submission" : "workflow"}:${getThinkExecutionRunId(run)}`))
+		})]
+	});
+}
+function ThinkExecutionWorkbenchRunLink({ run, className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationLink, {
+		"data-slot": "button",
+		"aria-label": getThinkExecutionRunAccessibleName(run),
+		...props,
+		className: buttonVariants({
+			variant: "ghost",
+			color: "neutral",
+			size: "sm",
+			className: cx("think-execution-workbench__run", className)
+		}),
+		children: /* @__PURE__ */ jsx(ThinkExecutionRunSummary, { run })
 	});
 }
+/** Native execution runtime with independently placed controls, rows, and route content. */
+const ThinkExecutionWorkbench = {
+	Root: ThinkExecutionWorkbenchRoot,
+	Header: ThinkExecutionWorkbenchHeader,
+	Content: ThinkExecutionWorkbenchContent,
+	Refresh: ThinkExecutionWorkbenchRefresh,
+	Error: ThinkExecutionWorkbenchError,
+	List: ThinkExecutionWorkbenchList,
+	RunLink: ThinkExecutionWorkbenchRunLink,
+	RunActions: ThinkExecutionWorkbenchRunActions
+};
 //#endregion
 export { ThinkExecutionWorkbench, thinkExecutionRunsQueryOptions };