@mcp-b/react-components 0.47.0 → 0.49.0

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

@@ -1,301 +1,87 @@
-import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { S as FileIcon, c as BoxIcon, r as ArrowLeftIcon, y as EllipsisIcon } from "../../icons-cuEtsgj9.js";
-import { IconButton } from "../foundations/IconButton.js";
-import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
-import { Menu } from "../foundations/Menu.js";
+import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
 import { ResizableSidePanel } from "../general-purpose/ResizableSidePanel.js";
-import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
-import { McpPluginCatalog } from "./McpPluginCatalog.js";
-import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../../WorkspaceLink-B1d2GIGl.js";
-import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-DLDta57t.js";
-import { ThinkFullAppViewSwitch } from "./ThinkFullAppViewSwitch.js";
-import { ThinkThreadStatusIndicators } from "./ThinkThreadPicker.js";
-import { useWorkspace } from "./Workspace.js";
-import { WorkspaceExplorer } from "./WorkspaceExplorer.js";
-import { useWorkspaceLiveQueries } from "./WorkspaceLive.js";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
 //#region src/components/agents-sdk/ThinkFullApp.tsx
-/** Matches --sigvelo-layout-conversation (24.5rem). */
-const conversationDefaultWidth = 392;
-const conversationMinWidth = 320;
-const conversationMaxWidth = 640;
-const conversationKeyboardStep = 24;
-/** Keep in lockstep with --sigvelo-layout-break-compact / the 56rem @container. */
-function compactBreakPx(el) {
-	const raw = getComputedStyle(el).getPropertyValue("--sigvelo-layout-break-compact").trim();
-	if (raw.endsWith("rem")) return Number.parseFloat(raw) * Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
-	const px = Number.parseFloat(raw);
-	return Number.isFinite(px) ? px : 896;
-}
-function isCompactApp(el) {
-	return el.getBoundingClientRect().width <= compactBreakPx(el);
-}
-function ThinkFullAppCompactViewMenu({ activeView, onViewChange, views }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "think-full-app__compact-view-menu",
-		children: /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(IconButton, {
-			label: "More views",
-			tooltip: "More views",
-			render: /* @__PURE__ */ jsx(Menu.Trigger, { unstyled: true }),
-			variant: "ghost",
-			color: "neutral",
-			size: "sm",
-			children: /* @__PURE__ */ jsx(EllipsisIcon, {})
-		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-			side: "bottom",
-			align: "end",
-			sideOffset: 4,
-			children: /* @__PURE__ */ jsx(Menu.Popup, { children: views.map((view) => /* @__PURE__ */ jsxs(Menu.Item, {
-				"aria-current": activeView === view.id ? "page" : void 0,
-				onClick: () => onViewChange(view.id),
-				children: [view.icon, view.label]
-			}, view.id)) })
-		}) })] })
-	});
-}
-function WorkspacePanel({ config }) {
-	const selectedPath = config.navigation.current.destination.kind === "file" ? config.navigation.current.destination.path : null;
-	return /* @__PURE__ */ jsx(WorkspaceExplorer, {
-		className: "think-full-app__workbench",
-		workspace: useWorkspace({
-			source: config.source,
-			sourceKey: config.sourceKey,
-			root: config.root,
-			selectedPath,
-			resolveFileAsset: config.resolveFileAsset,
-			maxInlineAssetBytes: config.maxInlineAssetBytes
-		}),
-		navigation: config.navigation,
-		leading: config.leading,
-		actions: config.actions
-	});
+const WorkbenchOpenContext = React.createContext(null);
+function useWorkbenchOpen() {
+	const open = React.useContext(WorkbenchOpenContext);
+	if (open === null) throw new Error("ThinkFullApp parts must be inside ThinkFullApp.Root.");
+	return open;
 }
 /**
-* Approval discovery and background-agent events need a live connection, so they
-* live here rather than in the shell, which also renders before there is one.
+* Conversation/workbench layout, independent of routing and SDK connections.
+* Compose navigation outside the root. The conversation remains mounted while
+* compact layouts show the workbench; ResizableSidePanel owns desktop resizing.
 */
-function ThinkFullAppThreadChat({ agent, agentTools, chat, messages, renderAgentToolRunLink, sourceKey }) {
-	const approvals = useThinkPendingExecutionApprovals(agent.stub, sourceKey, `${chat.messages.length}:${chat.status}`, messages?.approvalsEnabled !== false);
-	const resolvedMessages = React.useMemo(() => {
-		const approvalProps = resolveThinkApprovalProps({
-			thinkStub: messages?.thinkStub,
-			pendingApprovals: messages?.pendingApprovals,
-			onExecutionSettled: messages?.onExecutionSettled
-		}, {
-			thinkStub: agent.stub,
-			pendingApprovals: approvals.pendingApprovals,
-			onExecutionSettled: approvals.refreshPendingApprovals
-		});
-		return {
-			...messages,
-			...approvalProps
-		};
-	}, [
-		agent.stub,
-		approvals.pendingApprovals,
-		approvals.refreshPendingApprovals,
-		messages
-	]);
-	return /* @__PURE__ */ jsx(ThinkChat.Provider, {
-		chat,
-		agentTools,
-		children: /* @__PURE__ */ jsx(ThinkChat.Messages, {
-			...resolvedMessages,
-			renderAgentToolRunLink
+function ThinkFullAppRoot({ workbenchOpen, children, className, ...props }) {
+	return /* @__PURE__ */ jsx(WorkbenchOpenContext.Provider, {
+		value: workbenchOpen,
+		children: /* @__PURE__ */ jsx(ResizableSidePanel.Root, {
+			label: "conversation",
+			side: "start",
+			sizeVariable: "--think-full-app-conversation-size",
+			defaultSize: 392,
+			minSize: 320,
+			maxSize: 640,
+			keyboardStep: 24,
+			...props,
+			className: cx("think-full-app", className),
+			"data-has-workbench": workbenchOpen ? "true" : "false",
+			"data-mobile-view": workbenchOpen ? "workbench" : "chat",
+			"data-recipe": "fill-host",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "think-full-app__view-scope",
+				children
+			})
 		})
 	});
 }
-/** 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. */
-function ThinkFullApp({ bar, className, conversation, defaultView: defaultViewProp, messages, onViewChange, plugins, ref, renderAgentToolRunLink, sourceKey, sidebarTogglePlacement = "sidebar", style, threadSidebar, threadStatusSummary, view, workbenchPanels, workspace, ...props }) {
-	useWorkspaceLiveQueries({
-		changes: workspace?.changes,
-		sourceKey: workspace?.sourceKey,
-		root: workspace?.root ?? "/",
-		revision: workspace?.revision
-	});
-	const appRef = React.useRef(null);
-	const workbenchPanelRef = React.useRef(null);
-	const pendingPanelFocusRef = React.useRef(null);
-	const [innerView, setInnerView] = React.useState(defaultViewProp ?? "chat");
-	const userChoseView = React.useRef(defaultViewProp !== void 0 || view !== void 0);
-	const requestedView = view ?? innerView;
-	const setView = React.useCallback((next) => {
-		userChoseView.current = true;
-		if (view === void 0) setInnerView(next);
-		onViewChange?.(next);
-	}, [onViewChange, view]);
-	React.useLayoutEffect(() => {
-		if (view !== void 0 || defaultViewProp !== void 0 || userChoseView.current) return;
-		if (workspace === void 0) return;
-		const el = appRef.current;
-		if (!el) return;
-		const syncViewToWidth = () => {
-			if (userChoseView.current) return;
-			const next = isCompactApp(el) ? "chat" : "files";
-			setInnerView((current) => current === next ? current : next);
-		};
-		syncViewToWidth();
-		const observer = new ResizeObserver(syncViewToWidth);
-		observer.observe(el);
-		return () => observer.disconnect();
-	}, [
-		defaultViewProp,
-		view,
-		workspace
-	]);
-	const availableWorkbenchPanels = [];
-	if (workspace !== void 0) availableWorkbenchPanels.push({
-		id: "files",
-		label: "Files",
-		icon: /* @__PURE__ */ jsx(FileIcon, {}),
-		render: () => /* @__PURE__ */ jsx(WorkspacePanel, { config: workspace })
+/** Persistent conversation lane. Its contents and SDK providers belong to the caller. */
+function ThinkFullAppConversation({ render, className, ref, ...props }) {
+	useWorkbenchOpen();
+	return useRender({
+		defaultTagName: "section",
+		render,
+		ref,
+		props: mergeProps({
+			"aria-label": "Conversation",
+			className: mergeBaseClassName("think-full-app__chat-surface", className)
+		}, props)
 	});
-	if (plugins) availableWorkbenchPanels.push({
-		id: "plugins",
-		label: "Plugins",
-		icon: /* @__PURE__ */ jsx(BoxIcon, {}),
-		render: () => /* @__PURE__ */ jsx(McpPluginCatalog, { ...plugins })
+}
+/** The single raised output plane. Unmounts its content when the host closes it. */
+function ThinkFullAppWorkbench({ render, className, ref, ...props }) {
+	const open = useWorkbenchOpen();
+	const element = useRender({
+		defaultTagName: "aside",
+		render,
+		ref,
+		props: mergeProps({
+			"aria-label": "Workbench",
+			tabIndex: -1,
+			className: mergeBaseClassName("think-full-app__aside", className)
+		}, props)
 	});
-	if (workbenchPanels) availableWorkbenchPanels.push(...workbenchPanels);
-	const activePanel = requestedView === "chat" ? void 0 : availableWorkbenchPanels.find((panel) => panel.id === requestedView);
-	const hasWorkbench = activePanel !== void 0;
-	const activeMobileView = hasWorkbench ? "workbench" : "chat";
-	const hasAppBarRow = Boolean(bar?.back || bar?.leading || bar?.compactLeading || bar?.title || bar?.actions || bar?.primary || bar?.views || threadSidebar) || availableWorkbenchPanels.length > 0;
-	React.useLayoutEffect(() => {
-		const pendingFocus = pendingPanelFocusRef.current;
-		if (!pendingFocus || pendingFocus.id !== activePanel?.id) return;
-		pendingPanelFocusRef.current = null;
-		Array.from(workbenchPanelRef.current?.querySelectorAll("button") ?? []).find((button) => button.getAttribute("aria-label") === pendingFocus.label)?.focus({ preventScroll: true });
-	}, [activePanel?.id]);
-	const updateView = (next) => {
-		const activeElement = document.activeElement;
-		const restorePanelSwitchFocus = activeElement instanceof HTMLElement && workbenchPanelRef.current?.contains(activeElement);
-		const nextLabel = availableWorkbenchPanels.find((panel) => panel.id === next)?.label;
-		pendingPanelFocusRef.current = restorePanelSwitchFocus && nextLabel ? {
-			id: next,
-			label: nextLabel
-		} : null;
-		React.startTransition(() => setView(next));
-	};
-	const viewSwitch = bar?.views === void 0 && availableWorkbenchPanels.length ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
-		views: availableWorkbenchPanels,
-		value: activePanel?.id,
-		allowEmpty: true,
-		"aria-label": "App views",
-		onValueChange: (next) => updateView(next ?? "chat")
-	}) : bar?.views ?? null;
-	const compactViewMenu = bar?.views === void 0 && availableWorkbenchPanels.length ? /* @__PURE__ */ jsx(ThinkFullAppCompactViewMenu, {
-		activeView: activePanel?.id,
-		views: availableWorkbenchPanels,
-		onViewChange: updateView
+	return open ? /* @__PURE__ */ jsx(React.ViewTransition, {
+		default: "sigvelo-layout-transition",
+		children: element
 	}) : null;
-	const appBarActions = bar?.actions || compactViewMenu || viewSwitch ? /* @__PURE__ */ jsxs(Fragment, { children: [
-		bar?.actions,
-		compactViewMenu,
-		viewSwitch
-	] }) : void 0;
-	const compactLeading = bar?.compactLeading !== void 0 ? bar.compactLeading : activePanel ? /* @__PURE__ */ jsx(IconButton, {
-		type: "button",
-		label: "Back to chat",
-		tooltip: "Back to chat",
-		variant: "ghost",
-		color: "neutral",
-		size: "sm",
-		onClick: () => updateView("chat"),
-		children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
-	}) : void 0;
-	const appContent = /* @__PURE__ */ jsxs(ResizableSidePanel.Root, {
-		ref: mergeRefs(appRef, ref),
-		className: cx("think-full-app", className),
-		label: "workbench",
-		side: "start",
-		sizeVariable: "--think-full-app-conversation-size",
-		defaultSize: conversationDefaultWidth,
-		minSize: conversationMinWidth,
-		maxSize: conversationMaxWidth,
-		keyboardStep: conversationKeyboardStep,
-		"data-has-workbench": hasWorkbench ? "true" : "false",
-		"data-mobile-view": activeMobileView,
-		style,
+}
+/** Keyboard and pointer resize control; absent while the workbench is closed. */
+function ThinkFullAppResizeHandle({ className, ...props }) {
+	return useWorkbenchOpen() ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, {
 		...props,
-		"data-recipe": "fill-host",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "think-full-app__view-scope",
-			"data-mobile-view": activeMobileView,
-			children: [/* @__PURE__ */ jsx("section", {
-				className: "think-full-app__chat-surface",
-				"data-workspace-restoration-scope": "chat",
-				"aria-label": "Chat",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "think-full-app__chat",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "think-full-app__chat-inner",
-						children: conversation ? /* @__PURE__ */ jsx(ThinkFullAppThreadChat, {
-							...conversation,
-							messages,
-							renderAgentToolRunLink,
-							sourceKey
-						}) : /* @__PURE__ */ jsx(ThinkChat.Messages, {
-							...messages,
-							renderAgentToolRunLink
-						})
-					})
-				})
-			}), activePanel ? /* @__PURE__ */ jsx("aside", {
-				className: "think-full-app__aside",
-				"aria-label": "Workbench",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "think-full-app__workbench-slot",
-					children: /* @__PURE__ */ jsx(React.ViewTransition, {
-						default: "sigvelo-layout-transition",
-						children: /* @__PURE__ */ jsx("div", {
-							ref: workbenchPanelRef,
-							className: "think-full-app__workbench-panel",
-							tabIndex: -1,
-							children: activePanel.render()
-						})
-					})
-				})
-			}) : null]
-		}), activePanel ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "think-full-app__resizer" }) : null]
-	});
-	const app = workspace ? /* @__PURE__ */ jsx(WorkspaceNavigationProvider, {
-		root: workspace.root ?? "/",
-		base: {
-			kind: "directory",
-			path: workspace.root ?? "/"
-		},
-		navigation: workspace.navigation,
-		children: /* @__PURE__ */ jsxs(WorkspaceNavigationRestorationBoundary, { children: [/* @__PURE__ */ jsx(WorkspaceNavigationFocusRestorer, {
-			entryKey: workspace.navigation.current.key,
-			rootRef: appRef,
-			scope: "chat"
-		}), appContent] })
-	}) : appContent;
-	return /* @__PURE__ */ jsx(ResponsiveSidebarShell, {
-		className: "think-full-app-shell",
-		sidebar: threadSidebar,
-		sidebarLabel: "threads",
-		sidebarTogglePlacement,
-		showMainLabel: "Show selected thread",
-		bar: {
-			...bar,
-			actions: appBarActions,
-			compactLeading,
-			primary: bar?.primary,
-			className: "think-full-app__app-bar",
-			label: "Workbench controls",
-			hidden: !hasAppBarRow,
-			compactTitleTrigger: threadSidebar ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-				className: "sigvelo-truncate",
-				children: bar?.title ?? "Threads"
-			}), threadStatusSummary ? /* @__PURE__ */ jsx(ThinkThreadStatusIndicators, { summary: threadStatusSummary }) : null] }) : void 0
-		},
-		children: app
-	});
+		className: mergeBaseClassName("think-full-app__resizer", className)
+	}) : null;
 }
+const ThinkFullApp = {
+	Root: ThinkFullAppRoot,
+	Conversation: ThinkFullAppConversation,
+	Workbench: ThinkFullAppWorkbench,
+	ResizeHandle: ThinkFullAppResizeHandle
+};
 //#endregion
 export { ThinkFullApp };

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

@@ -1,2 +1,19 @@
-import { n as ThinkRecoveryNoticeProps, t as ThinkRecoveryNotice } from "../../ThinkRecoveryNotice-DGWr94rk.js";
+import { ThinkChatValue } from "./ThinkChatContext.js";
+import { UIMessage } from "ai";
+
+//#region src/components/agents-sdk/ThinkRecoveryNotice.d.ts
+interface ThinkRecoveryNoticeProps<State = unknown, MessageT extends UIMessage = UIMessage> {
+  /** The complete `useAgentChat` value from `@cloudflare/think/react`. */
+  chat: ThinkChatValue<State, MessageT>;
+}
+/**
+ * Native Think recovery, connection, and turn-error content for AgentChat's
+ * persistent polite notice region. Think exposes no recovery phase, progress,
+ * checkpoint, attempt count, or timeline to the browser, so this adapter does
+ * not claim those details.
+ */
+declare function ThinkRecoveryNotice<State = unknown, MessageT extends UIMessage = UIMessage>({
+  chat
+}: ThinkRecoveryNoticeProps<State, MessageT>): import("react").JSX.Element | null;
+//#endregion
 export { ThinkRecoveryNotice, ThinkRecoveryNoticeProps };

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

@@ -0,0 +1,51 @@
+import { ThinkRoutine } from "./ThinkRoutine.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import * as React from "react";
+
+//#region src/components/agents-sdk/ThinkRoutineActions.d.ts
+interface ThinkRoutineActionsRootProps<TRoutine extends ThinkRoutine = ThinkRoutine> {
+  /** Whole selected routine, including app-owned extensions and native task/run values. */
+  routine: TRoutine;
+  /** Stable non-secret identity of the source backing this routine. */
+  sourceKey: string;
+  /** Host mutation that runs the whole selected routine; its promise controls pending and error feedback. */
+  onRun?: (routine: TRoutine) => void | Promise<void>;
+  /** Host mutation for the requested enabled state; the host supplies the updated routine after success. */
+  onEnabledChange?: (routine: TRoutine, enabled: boolean) => void | Promise<void>;
+  /** Host removal invoked after confirmation; rejection keeps the confirmation open with its error. */
+  onDelete?: (routine: TRoutine) => void | Promise<void>;
+  /** Caller-composed controls and detail sharing this source/routine mutation scope; no layout is inserted. */
+  children: React.ReactNode;
+}
+/** Connect an independently mounted detail to its selected routine action scope. */
+declare function useThinkRoutineActions(): {
+  busy: boolean;
+  onEnabledChange: ((enabled: boolean) => void) | undefined;
+};
+/** No layout or routing. Source/routine changes reset actions without remounting caller navigation. */
+declare function ThinkRoutineActionsRoot<TRoutine extends ThinkRoutine>({
+  routine,
+  sourceKey,
+  onRun,
+  onEnabledChange,
+  onDelete,
+  children
+}: ThinkRoutineActionsRootProps<TRoutine>): React.JSX.Element;
+type ThinkRoutineActionProps = Omit<React.ComponentProps<typeof AppTopBar.Button>, "label"> & {
+  label?: string;
+};
+/** Explicit run control; preserves the complete shared button composition contract. */
+declare function ThinkRoutineRun(props: ThinkRoutineActionProps): React.JSX.Element | null;
+/** Delete confirmation stays open on failure; only its source-scoped action can settle it. */
+declare function ThinkRoutineDelete(props: ThinkRoutineActionProps): React.JSX.Element | null;
+declare function ThinkRoutineError(props: React.ComponentPropsWithRef<"div">): React.JSX.Element | null;
+declare function ThinkRoutineStatus(props: React.ComponentPropsWithRef<"div">): React.JSX.Element;
+declare const ThinkRoutineActions: {
+  Root: typeof ThinkRoutineActionsRoot;
+  Run: typeof ThinkRoutineRun;
+  Delete: typeof ThinkRoutineDelete;
+  Error: typeof ThinkRoutineError;
+  Status: typeof ThinkRoutineStatus;
+};
+//#endregion
+export { ThinkRoutineActionProps, ThinkRoutineActions, ThinkRoutineActionsRootProps, useThinkRoutineActions };

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

@@ -0,0 +1,201 @@
+import { K as SpinnerIcon, Q as TrashIcon, z as PlayIcon } from "../../icons-cuEtsgj9.js";
+import { Button } from "../foundations/Button.js";
+import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
+import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
+import { AlertDialog } from "../foundations/AlertDialog.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+//#region src/components/agents-sdk/ThinkRoutineActions.tsx
+const RoutineActionsContext = React.createContext(null);
+/** Selected-routine mutation state for explicitly composed detail and controls. */
+function useRoutineActions() {
+	const value = React.useContext(RoutineActionsContext);
+	if (!value) throw new Error("Routine actions require ThinkRoutineActions.Root.");
+	return value;
+}
+/** Connect an independently mounted detail to its selected routine action scope. */
+function useThinkRoutineActions() {
+	const { busy, onEnabledChange } = useRoutineActions();
+	return {
+		busy,
+		onEnabledChange
+	};
+}
+/** No layout or routing. Source/routine changes reset actions without remounting caller navigation. */
+function ThinkRoutineActionsRoot({ routine, sourceKey, onRun, onEnabledChange, onDelete, children }) {
+	const identity = JSON.stringify([sourceKey, routine.id]);
+	const initial = () => ({
+		scope: { identity },
+		busy: false,
+		error: null,
+		announcement: "",
+		action: null
+	});
+	const [state, setState] = React.useState(initial);
+	if (state.scope.identity !== identity) setState(initial());
+	const inFlight = React.useRef(null);
+	const value = React.useMemo(() => {
+		const perform = async (operation, action, success) => {
+			const scope = state.scope;
+			if (inFlight.current === scope) return false;
+			inFlight.current = scope;
+			setState((current) => current.scope === scope ? {
+				...current,
+				busy: true,
+				error: null,
+				announcement: "",
+				action: operation
+			} : current);
+			try {
+				await action();
+				setState((current) => current.scope === scope ? {
+					...current,
+					announcement: success
+				} : current);
+				return true;
+			} catch (next) {
+				setState((current) => current.scope === scope ? {
+					...current,
+					error: formatErrorMessage(next)
+				} : current);
+				return false;
+			} finally {
+				if (inFlight.current === scope) inFlight.current = null;
+				setState((current) => current.scope === scope ? {
+					...current,
+					busy: false
+				} : current);
+			}
+		};
+		return {
+			scope: state.scope,
+			name: routine.name,
+			busy: state.busy,
+			error: state.action === "delete" ? null : state.error,
+			deleteError: state.action === "delete" ? state.error : null,
+			announcement: state.announcement,
+			run: onRun ? () => perform("run", () => onRun(routine), `Started ${routine.name}.`) : void 0,
+			remove: onDelete ? () => perform("delete", () => onDelete(routine), `Deleted ${routine.name}.`) : void 0,
+			onEnabledChange: onEnabledChange ? (enabled) => {
+				perform("enable", () => onEnabledChange(routine, enabled), `${routine.name} ${enabled ? "activated" : "paused"}.`);
+			} : void 0
+		};
+	}, [
+		state,
+		routine,
+		onRun,
+		onDelete,
+		onEnabledChange
+	]);
+	return /* @__PURE__ */ jsx(RoutineActionsContext.Provider, {
+		value,
+		children
+	});
+}
+/** Explicit run control; preserves the complete shared button composition contract. */
+function ThinkRoutineRun(props) {
+	const { busy, run } = useRoutineActions();
+	if (!run) return null;
+	return /* @__PURE__ */ jsx(AppTopBar.Button, {
+		...mergeProps({
+			label: "Run schedule",
+			onClick: () => {
+				run();
+			},
+			children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+		}, props),
+		label: props.label ?? "Run schedule",
+		disabled: busy || props.disabled
+	});
+}
+/** Delete confirmation stays open on failure; only its source-scoped action can settle it. */
+function ThinkRoutineDelete(props) {
+	const { scope, name, busy, deleteError: error, remove } = useRoutineActions();
+	const [dialog, setDialog] = React.useState({
+		scope,
+		open: false
+	});
+	if (dialog.scope !== scope) setDialog({
+		scope,
+		open: false
+	});
+	const open = dialog.scope === scope && dialog.open;
+	const setOpen = (open) => setDialog((current) => current.scope === scope ? {
+		scope,
+		open
+	} : current);
+	const triggerRef = React.useRef(null);
+	if (!remove) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
+		...mergeProps({
+			label: "Delete schedule",
+			onClick: () => setOpen(true),
+			children: /* @__PURE__ */ jsx(TrashIcon, {})
+		}, props),
+		ref: mergeRefs(triggerRef, props.ref),
+		label: props.label ?? "Delete schedule",
+		disabled: busy || props.disabled
+	}), /* @__PURE__ */ jsx(AlertDialog.Root, {
+		open,
+		onOpenChange: (next, details) => {
+			if (busy && !next) details.cancel();
+			else setOpen(next);
+		},
+		children: /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, {}), /* @__PURE__ */ jsx(AlertDialog.Viewport, { children: /* @__PURE__ */ jsxs(AlertDialog.Popup, {
+			finalFocus: triggerRef,
+			children: [
+				/* @__PURE__ */ jsxs(AlertDialog.Title, { children: [
+					"Delete ",
+					name,
+					"?"
+				] }),
+				/* @__PURE__ */ jsx(AlertDialog.Description, { children: "This permanently deletes the schedule and stops its future runs." }),
+				error ? /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					children: error
+				}) : null,
+				/* @__PURE__ */ jsxs(AlertDialog.Footer, { children: [/* @__PURE__ */ jsx(AlertDialog.Close, {
+					disabled: busy,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					"aria-label": "Confirm delete schedule",
+					color: "destructive",
+					disabled: busy,
+					onClick: async () => {
+						if (await remove()) setOpen(false);
+					},
+					children: "Delete schedule"
+				})] })
+			]
+		}) })] })
+	})] });
+}
+function ThinkRoutineError(props) {
+	const { error } = useRoutineActions();
+	return error ? /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		...props,
+		children: error
+	}) : null;
+}
+function ThinkRoutineStatus(props) {
+	const { announcement } = useRoutineActions();
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"aria-atomic": "true",
+		className: "sigvelo-visually-hidden",
+		...props,
+		children: announcement
+	});
+}
+const ThinkRoutineActions = {
+	Root: ThinkRoutineActionsRoot,
+	Run: ThinkRoutineRun,
+	Delete: ThinkRoutineDelete,
+	Error: ThinkRoutineError,
+	Status: ThinkRoutineStatus
+};
+//#endregion
+export { ThinkRoutineActions, useThinkRoutineActions };

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

@@ -13,7 +13,10 @@ interface ThinkRoutineBrowserProps<TRoutine extends ThinkRoutine = ThinkRoutine>
   renderRoutineLink: (routine: TRoutine) => React.ReactElement;
   /** App-authored TanStack Router Link to the routine creation route. */
   createRoutineLink?: React.ReactElement;
-  /** Optional UI-only response after a routine link is activated. */
+  /** UI-only response to ordinary same-tab activation, including keyboard clicks.
+   * Modified, non-primary, download, and other-target clicks leave this UI unchanged.
+   * Receives the original React anchor event; routing remains with the rendered link.
+   */
   onRoutineLinkClick?: React.MouseEventHandler<HTMLAnchorElement>;
 }
 /** Searchable, filterable navigation for an app-owned collection of Think routines. */