@mcp-b/react-components 0.17.0 → 0.19.0

package/dist/components/ThinkFullApp.js

@@ -1,46 +1,119 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { K as TerminalIcon, c as ChevronDownIcon, y as FileIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { S as FileIcon, X as TerminalIcon, d as ChevronDownIcon } from "../icons-DKXiSepE.js";
 import { Button } from "./Button.js";
-import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../WorkspaceLink-B1ykV1dS.js";
+import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../WorkspaceLink-BYYeTQLf.js";
 import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import { AppTopBar } from "./AppTopBar.js";
-import { NaniteMark } from "./NaniteScene.js";
-import { o as useThinkPendingApprovals, s as resolveThinkApprovalProps, t as ThinkChat } from "../ThinkChat-DInElus-.js";
+import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../ThinkChat-15EhfvYJ.js";
 import { useWorkspace } from "./Workspace.js";
 import { WorkspaceExplorer } from "./WorkspaceExplorer.js";
-import { SelectedAgentToolChild } from "./AgentToolDetail.js";
 import { ResizableSidePanel } from "./ResizableSidePanel.js";
 import { ThinkExecutionWorkbench } from "./ThinkExecutionWorkbench.js";
 import { ThinkFullAppViewSwitch } from "./ThinkFullAppViewSwitch.js";
 import { ThinkThreadStatusIndicators } from "./ThinkThreadPicker.js";
 import { ThinkThreadShell } from "./ThinkThreadShell.js";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentToolEvents } from "agents/react";
+import { flushSync } from "react-dom";
+//#region src/components/_internal/view-transitions.ts
+let documentScopeSequence = 0;
+let restoreActiveDocumentScope = null;
+function motionIsReduced() {
+	if (typeof document === "undefined") return true;
+	if (document.documentElement.dataset.motion === "reduce") return true;
+	return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+}
+function isReactTestEnvironment() {
+	return globalThis.IS_REACT_ACT_ENVIRONMENT;
+}
+function scopeDocumentTransition(scope) {
+	if (!(scope instanceof HTMLElement || scope instanceof SVGElement)) return null;
+	restoreActiveDocumentScope?.();
+	const rootStyle = document.documentElement.style;
+	const scopeStyle = scope.style;
+	const rootValue = rootStyle.getPropertyValue("view-transition-name");
+	const rootPriority = rootStyle.getPropertyPriority("view-transition-name");
+	const scopeValue = scopeStyle.getPropertyValue("view-transition-name");
+	const scopePriority = scopeStyle.getPropertyPriority("view-transition-name");
+	rootStyle.setProperty("view-transition-name", "none", "important");
+	scopeStyle.setProperty("view-transition-name", `sigvelo-transition-scope-${++documentScopeSequence}`, "important");
+	let active = true;
+	const restore = () => {
+		if (!active) return;
+		active = false;
+		if (rootValue) rootStyle.setProperty("view-transition-name", rootValue, rootPriority);
+		else rootStyle.removeProperty("view-transition-name");
+		if (scopeValue) scopeStyle.setProperty("view-transition-name", scopeValue, scopePriority);
+		else scopeStyle.removeProperty("view-transition-name");
+		if (restoreActiveDocumentScope === restore) restoreActiveDocumentScope = null;
+	};
+	restoreActiveDocumentScope = restore;
+	return restore;
+}
+/**
+* Runs one synchronous React update inside the narrowest supported native view
+* transition. Unsupported and reduced-motion environments commit immediately.
+*/
+function runViewTransition({ scope, update }) {
+	let committed = false;
+	const commitOnce = () => {
+		if (committed) return;
+		committed = true;
+		flushSync(update);
+	};
+	if (typeof document === "undefined" || motionIsReduced() || isReactTestEnvironment()) {
+		commitOnce();
+		return null;
+	}
+	const scopedHost = scope;
+	const documentHost = document;
+	const useScopedHost = typeof scopedHost?.startViewTransition === "function";
+	const host = useScopedHost ? scopedHost : typeof documentHost.startViewTransition === "function" ? documentHost : null;
+	if (!host?.startViewTransition) {
+		commitOnce();
+		return null;
+	}
+	const restoreDocumentScope = useScopedHost ? null : scopeDocumentTransition(scope);
+	try {
+		const transition = host.startViewTransition(commitOnce);
+		if (restoreDocumentScope) transition.finished.finally(restoreDocumentScope).catch(() => void 0);
+		return transition;
+	} catch {
+		restoreDocumentScope?.();
+		commitOnce();
+		return null;
+	}
+}
+//#endregion
 //#region src/components/ThinkFullApp.tsx
 const workbenchPanelDefaultWidth = 340;
 const workbenchPanelMinWidth = 300;
 const workbenchPanelMaxWidth = 600;
 const workbenchPanelKeyboardStep = 24;
-function WorkspacePanel({ config, workbenchNavigation }) {
+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: workbenchNavigation || config.leading ? /* @__PURE__ */ jsxs(Fragment, { children: [workbenchNavigation, config.leading] }) : void 0,
+		leading: config.leading,
 		actions: config.actions
 	});
 }
 /** Combines ThinkChat with an optional resizable workbench shell. */
-function ThinkFullApp({ agent, agentToolChildConnection, agentToolMessages, appBarActions, appBarLeading, appBarTitle, chat, className, defaultMobileView, defaultSelectedAgentToolRunId, defaultWorkbenchView, defaultThreadSidebarOpen, messages, mobileView, onMobileViewChange, onSelectedAgentToolRunChange, onSelectedExecutionRunChange, onThreadSidebarOpenChange, onWorkbenchViewChange, ref, renderAgentToolDetail, selectedAgentToolRunId, selectedExecutionRun, showAgentTools = true, showExecutionWorkbench = true, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchPanels, workbenchView, workspace, ...props }) {
+function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat, className, defaultMobileView, defaultWorkbenchView, defaultThreadSidebarOpen, hideAppBarInWorkbench = false, messages, mobileView, onMobileViewChange, onThreadSidebarOpenChange, onWorkbenchViewChange, ref, renderAgentToolRunLink, renderExecutionRunLink, selectedExecutionRun, showAgentTools = true, showExecutionWorkbench = true, showMobileViewSwitch = true, sourceKey, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchPanels, workbenchView, workspace, ...props }) {
 	const appRef = React.useRef(null);
-	const agentToolTriggerRef = React.useRef(null);
-	const approvals = useThinkPendingApprovals(agent.stub, `${chat.messages.length}:${chat.status}`);
+	const viewScopeRef = React.useRef(null);
+	const workbenchPanelRef = React.useRef(null);
+	const approvals = useThinkPendingExecutionApprovals(agent.stub, sourceKey, `${chat.messages.length}:${chat.status}`);
 	const resolvedMessages = React.useMemo(() => {
 		const approvalProps = resolveThinkApprovalProps({
 			thinkStub: messages?.thinkStub,
@@ -63,16 +136,13 @@ function ThinkFullApp({ agent, agentToolChildConnection, agentToolMessages, appB
 	]);
 	const [innerMobileView, setInnerMobileView] = React.useState(defaultMobileView ?? "chat");
 	const [innerWorkbenchView, setInnerWorkbenchView] = React.useState(defaultWorkbenchView ?? "files");
-	const [innerSelectedAgentToolRunId, setInnerSelectedAgentToolRunId] = React.useState(defaultSelectedAgentToolRunId ?? null);
 	const agentTools = useAgentToolEvents({ agent });
 	const agentIdentity = JSON.stringify(agent.path);
 	const requestedMobileView = mobileView ?? innerMobileView;
 	const requestedWorkbenchView = workbenchView ?? innerWorkbenchView;
-	const activeAgentToolRunId = selectedAgentToolRunId ?? innerSelectedAgentToolRunId;
-	const selectedAgentToolRun = activeAgentToolRunId ? agentTools.runsById[activeAgentToolRunId] : void 0;
+	const resetAgentTools = React.useEffectEvent(() => agentTools.resetLocalState());
 	React.useEffect(() => {
-		agentTools.resetLocalState();
-		setInnerSelectedAgentToolRunId(null);
+		resetAgentTools();
 	}, [agentIdentity]);
 	const setWorkbenchView = React.useCallback((next) => {
 		if (workbenchView === void 0) setInnerWorkbenchView(next);
@@ -82,30 +152,12 @@ function ThinkFullApp({ agent, agentToolChildConnection, agentToolMessages, appB
 		if (mobileView === void 0) setInnerMobileView(next);
 		onMobileViewChange?.(next);
 	}, [mobileView, onMobileViewChange]);
-	const updateSelectedAgentToolRun = React.useCallback((run) => {
-		if (selectedAgentToolRunId === void 0) setInnerSelectedAgentToolRunId(run?.runId ?? null);
-		onSelectedAgentToolRunChange?.(run);
-	}, [onSelectedAgentToolRunChange, selectedAgentToolRunId]);
-	const selectAgentToolRun = React.useCallback((run) => {
-		const trigger = document.activeElement;
-		if (trigger instanceof HTMLElement && appRef.current?.contains(trigger)) agentToolTriggerRef.current = trigger;
-		updateSelectedAgentToolRun(run);
-		setWorkbenchView("agent-tool");
-		setMobileView("workbench");
-	}, [
-		setMobileView,
-		setWorkbenchView,
-		updateSelectedAgentToolRun
-	]);
-	const closeAgentToolDetail = React.useCallback(() => {
-		const trigger = agentToolTriggerRef.current;
-		agentToolTriggerRef.current = null;
-		updateSelectedAgentToolRun(null);
-		setMobileView("chat");
-		requestAnimationFrame(() => {
-			if (trigger?.isConnected) trigger.focus();
+	const updateAppView = React.useCallback((update) => {
+		return runViewTransition({
+			scope: viewScopeRef.current,
+			update
 		});
-	}, [setMobileView, updateSelectedAgentToolRun]);
+	}, []);
 	const panelContext = React.useMemo(() => ({
 		agent,
 		chat,
@@ -120,10 +172,7 @@ function ThinkFullApp({ agent, agentToolChildConnection, agentToolMessages, appB
 		id: "files",
 		label: "Files",
 		icon: /* @__PURE__ */ jsx(FileIcon, {}),
-		render: () => /* @__PURE__ */ jsx(WorkspacePanel, {
-			config: workspace,
-			workbenchNavigation
-		})
+		render: () => /* @__PURE__ */ jsx(WorkspacePanel, { config: workspace })
 	});
 	if (showExecutionWorkbench) availableWorkbenchPanels.push({
 		id: "execution",
@@ -131,24 +180,12 @@ function ThinkFullApp({ agent, agentToolChildConnection, agentToolMessages, appB
 		icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
 		render: ({ agent }) => /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
 			source: agent.stub,
+			sourceKey,
 			title: "Execution",
-			backButton: workbenchNavigation,
 			selectedRun: selectedExecutionRun,
-			onSelectedRunChange: onSelectedExecutionRunChange
+			renderRunLink: renderExecutionRunLink
 		})
 	});
-	if (showAgentTools && selectedAgentToolRun) availableWorkbenchPanels.push({
-		id: "agent-tool",
-		label: "Agent",
-		icon: /* @__PURE__ */ jsx(NaniteMark, { index: selectedAgentToolRun.order }),
-		render: () => renderAgentToolDetail ? renderAgentToolDetail(selectedAgentToolRun, closeAgentToolDetail) : /* @__PURE__ */ jsx(SelectedAgentToolChild, {
-			run: selectedAgentToolRun,
-			parentAgent: agent,
-			connectionOptions: agentToolChildConnection,
-			messages: agentToolMessages,
-			onBack: closeAgentToolDetail
-		}, selectedAgentToolRun.runId)
-	});
 	if (workbenchPanels) availableWorkbenchPanels.push(...workbenchPanels);
 	const activePanel = availableWorkbenchPanels.find((panel) => panel.id === requestedWorkbenchView) ?? availableWorkbenchPanels[0];
 	const activeWorkbenchView = activePanel?.id;
@@ -156,25 +193,27 @@ function ThinkFullApp({ agent, agentToolChildConnection, agentToolMessages, appB
 	const activeMobileView = hasWorkbench ? requestedMobileView : "chat";
 	const showWorkbenchViewSwitch = availableWorkbenchPanels.length > 1;
 	const workbenchViews = availableWorkbenchPanels;
-	const canEmbedWorkbenchNavigation = activeWorkbenchView === "files" || activeWorkbenchView === "execution";
-	const hasApplicationChrome = Boolean(appBarActions || appBarLeading || appBarTitle || threadSidebar);
-	const shouldRenderInlineAppBar = !threadSidebar && (hasApplicationChrome || hasWorkbench);
-	const hasCompactAppBar = shouldRenderInlineAppBar && !hasApplicationChrome && canEmbedWorkbenchNavigation;
-	const hasAppBarRow = shouldRenderInlineAppBar && !hasCompactAppBar;
-	const workbenchNavigation = showWorkbenchViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
-		className: "think-full-app__embedded-view-switch",
-		views: workbenchViews,
-		value: activeWorkbenchView,
-		onValueChange: (next) => {
-			if (next) setWorkbenchView(next);
-		},
-		"aria-label": "Workbench views"
-	}) : null;
+	const shouldRenderInlineAppBar = !threadSidebar && (Boolean(appBarActions || appBarLeading || appBarTitle || threadSidebar) || hasWorkbench);
+	const hasAppBarRow = shouldRenderInlineAppBar;
+	const updateWorkbenchPanel = (next) => {
+		const activeElement = document.activeElement;
+		const restorePanelSwitchFocus = activeElement instanceof HTMLElement && workbenchPanelRef.current?.contains(activeElement);
+		const nextLabel = availableWorkbenchPanels.find((panel) => panel.id === next)?.label;
+		const restoreFocus = () => {
+			if (!restorePanelSwitchFocus || !nextLabel) return;
+			Array.from(workbenchPanelRef.current?.querySelectorAll("button") ?? []).find((button) => button.getAttribute("aria-label") === nextLabel)?.focus({ preventScroll: true });
+		};
+		const transition = runViewTransition({
+			scope: workbenchPanelRef.current,
+			update: () => setWorkbenchView(next)
+		});
+		if (transition) transition.updateCallbackDone.then(restoreFocus, restoreFocus);
+		else requestAnimationFrame(restoreFocus);
+	};
 	const renderAppTopBar = (sidebarControls) => /* @__PURE__ */ jsxs(AppTopBar.Root, {
 		className: "think-full-app__app-bar",
 		"aria-label": "Workbench controls",
 		"data-mobile-view": activeMobileView,
-		"data-compact-only": hasCompactAppBar ? "true" : void 0,
 		children: [
 			/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [sidebarControls?.sidebarToggle, appBarLeading] }),
 			appBarTitle || sidebarControls ? /* @__PURE__ */ jsxs(AppTopBar.Title, { children: [appBarTitle ? /* @__PURE__ */ jsx("span", {
@@ -186,6 +225,7 @@ function ThinkFullApp({ agent, agentToolChildConnection, agentToolMessages, appB
 				color: "neutral",
 				size: "sm",
 				className: "think-full-app__thread-trigger",
+				"aria-label": "Threads",
 				"aria-controls": sidebarControls.sidebarId,
 				"aria-expanded": sidebarControls.sidebarOpen,
 				onClick: (event) => sidebarControls.toggleSidebar(event.currentTarget),
@@ -200,27 +240,29 @@ function ThinkFullApp({ agent, agentToolChildConnection, agentToolMessages, appB
 			}) : null] }) : null,
 			/* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [
 				appBarActions,
-				showWorkbenchViewSwitch && activeWorkbenchView && !canEmbedWorkbenchNavigation ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+				showWorkbenchViewSwitch && activeWorkbenchView ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
 					className: "think-full-app__workbench-view-switch",
 					views: workbenchViews,
 					value: activeWorkbenchView,
 					onValueChange: (next) => {
-						if (next) setWorkbenchView(next);
+						if (next) updateWorkbenchPanel(next);
 					},
 					"aria-label": "Workbench views"
 				}) : null,
-				activePanel ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+				activePanel && showMobileViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
 					className: "think-full-app__mobile-view-switch",
 					views: workbenchViews,
 					value: activeMobileView === "workbench" ? activePanel.id : void 0,
 					allowEmpty: true,
 					onValueChange: (next) => {
-						if (!next) {
-							setMobileView("chat");
-							return;
-						}
-						setWorkbenchView(next);
-						setMobileView("workbench");
+						updateAppView(() => {
+							if (!next) {
+								setMobileView("chat");
+								return;
+							}
+							setWorkbenchView(next);
+							setMobileView("workbench");
+						});
 					},
 					"aria-label": "App views"
 				}) : null
@@ -239,44 +281,48 @@ function ThinkFullApp({ agent, agentToolChildConnection, agentToolMessages, appB
 		"data-has-thread-sidebar": threadSidebar ? "true" : "false",
 		"data-has-workbench": hasWorkbench ? "true" : "false",
 		"data-has-workbench-topbar": hasAppBarRow ? "true" : "false",
-		"data-has-compact-app-bar": hasCompactAppBar ? "true" : "false",
 		"data-mobile-view": activeMobileView,
 		style,
 		...props,
 		children: [
 			shouldRenderInlineAppBar ? renderAppTopBar() : null,
-			/* @__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",
+			/* @__PURE__ */ jsxs("div", {
+				ref: viewScopeRef,
+				className: "think-full-app__view-scope",
+				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-inner",
-						children: /* @__PURE__ */ jsx(ThinkChat.Provider, {
-							chat,
-							agentTools,
-							children: /* @__PURE__ */ jsx(ThinkChat.Messages, {
-								...resolvedMessages,
-								selectedAgentToolRunId: activeAgentToolRunId,
-								onAgentToolRunSelect: showAgentTools ? selectAgentToolRun : void 0
+						className: "think-full-app__chat",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "think-full-app__chat-inner",
+							children: /* @__PURE__ */ jsx(ThinkChat.Provider, {
+								chat,
+								agentTools,
+								children: /* @__PURE__ */ jsx(ThinkChat.Messages, {
+									...resolvedMessages,
+									renderAgentToolRunLink: showAgentTools ? renderAgentToolRunLink : void 0
+								})
 							})
 						})
 					})
-				})
-			}),
-			activePanel ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "think-full-app__resizer" }), /* @__PURE__ */ jsx("aside", {
-				className: "think-full-app__aside",
-				"aria-label": "Workbench",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "think-full-app__workbench-slot",
+				}), activePanel ? /* @__PURE__ */ jsx("aside", {
+					className: "think-full-app__aside",
+					"aria-label": "Workbench",
 					children: /* @__PURE__ */ jsx("div", {
-						className: "think-full-app__workbench-panel",
-						"data-view": activeWorkbenchView,
-						children: activePanel.render(panelContext)
+						className: "think-full-app__workbench-slot",
+						children: /* @__PURE__ */ jsx("div", {
+							ref: workbenchPanelRef,
+							className: "think-full-app__workbench-panel",
+							"data-view": activeWorkbenchView,
+							tabIndex: -1,
+							children: activePanel.render(panelContext)
+						})
 					})
-				})
-			})] }) : null
+				}) : null]
+			}),
+			activePanel ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "think-full-app__resizer" }) : null
 		]
 	});
 	const app = workspace ? /* @__PURE__ */ jsx(WorkspaceNavigationProvider, {
@@ -298,6 +344,7 @@ function ThinkFullApp({ agent, agentToolChildConnection, agentToolMessages, appB
 		sidebarOpen: threadSidebarOpen,
 		defaultSidebarOpen: defaultThreadSidebarOpen,
 		onSidebarOpenChange: onThreadSidebarOpenChange,
+		"data-hide-app-bar-in-workbench": hideAppBarInWorkbench ? "" : void 0,
 		topBar: (controls) => renderAppTopBar(controls),
 		children: app
 	});

package/dist/components/ThinkFullAppViewSwitch.d.ts

@@ -1,4 +1,4 @@
-import { r as ToggleGroupProps } from "../ToggleGroup-yseEWkOC.js";
+import { r as ToggleGroupProps } from "../ToggleGroup-DNd6cDJZ.js";
 import * as React from "react";
 
 //#region src/components/ThinkFullAppViewSwitch.d.ts

package/dist/components/ThinkFullAppViewSwitch.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import { AppTopBar } from "./AppTopBar.js";
 import { ToggleGroup } from "./ToggleGroup.js";
 import "react";

package/dist/components/ThinkRecoveryNotice.js

@@ -1,3 +1,4 @@
+import { TransitionSurface } from "./TransitionSurface.js";
 import { AgentChatTurnError } from "./AgentChatTurnError.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThinkRecoveryNotice.tsx
@@ -11,28 +12,33 @@ function connectionReason(error) {
 * not claim those details.
 */
 function ThinkRecoveryNotice({ chat }) {
-	if (chat.isRecovering) return /* @__PURE__ */ jsx("span", {
+	if (chat.isRecovering) return /* @__PURE__ */ jsx(TransitionSurface, {
 		"data-slot": "think-recovery-notice",
+		className: "think-recovery-notice",
 		children: "Recovering the interrupted response…"
-	});
+	}, "recovering");
 	if (chat.connectionError) {
 		const reason = connectionReason(chat.connectionError);
-		return /* @__PURE__ */ jsxs("span", {
+		return /* @__PURE__ */ jsxs(TransitionSurface, {
 			"data-slot": "think-recovery-notice",
+			className: "think-recovery-notice",
 			"data-tone": "danger",
 			children: ["Connection lost", reason ? ` — ${reason}` : "."]
-		});
+		}, "connection-error");
 	}
 	if (chat.error) {
 		const retryMessageId = chat.messages.findLast((message) => message.role !== "system")?.id;
-		return /* @__PURE__ */ jsx(AgentChatTurnError, {
-			error: chat.error,
-			onDismiss: chat.clearError,
-			onRetry: retryMessageId ? () => {
-				chat.clearError();
-				chat.regenerate({ messageId: retryMessageId });
-			} : void 0
-		});
+		return /* @__PURE__ */ jsx(TransitionSurface, {
+			className: "think-recovery-notice",
+			children: /* @__PURE__ */ jsx(AgentChatTurnError, {
+				error: chat.error,
+				onDismiss: chat.clearError,
+				onRetry: retryMessageId ? () => {
+					chat.clearError();
+					chat.regenerate({ messageId: retryMessageId });
+				} : void 0
+			})
+		}, "turn-error");
 	}
 	return null;
 }

package/dist/components/ThinkRoutineBrowser.d.ts

@@ -3,22 +3,30 @@ import * as React from "react";
 
 //#region src/components/ThinkRoutineBrowser.d.ts
 type ThinkRoutineFilter = "all" | "active" | "paused";
-interface ThinkRoutineBrowserProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {
-  routines: readonly ThinkRoutine[];
-  selectedRoutineId?: string;
-  onSelectedRoutineIdChange?: (routineId: string) => void;
-  onCreateRoutine?: () => void;
+interface ThinkRoutineBrowserProps<TRoutine extends ThinkRoutine = ThinkRoutine> extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {
+  routines: readonly TRoutine[];
+  /** Routine selected by the current application route. */
+  selectedRoutineId?: string | null;
+  showOwner?: boolean;
+  /** App-authored TanStack Router Link for each durable routine destination. */
+  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. */
+  onRoutineLinkClick?: React.MouseEventHandler<HTMLAnchorElement>;
 }
 /** Searchable, filterable navigation for an app-owned collection of Think routines. */
-declare function ThinkRoutineBrowser({
+declare function ThinkRoutineBrowser<TRoutine extends ThinkRoutine = ThinkRoutine>({
   className,
   routines,
   selectedRoutineId,
-  onSelectedRoutineIdChange,
-  onCreateRoutine,
+  showOwner,
+  renderRoutineLink,
+  createRoutineLink,
+  onRoutineLinkClick,
   ref,
   ...props
-}: ThinkRoutineBrowserProps & {
+}: ThinkRoutineBrowserProps<TRoutine> & {
   ref?: React.Ref<HTMLElement>;
 }): React.JSX.Element;
 //#endregion

package/dist/components/ThinkRoutineBrowser.js

@@ -1,8 +1,9 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { I as PlusIcon, z as SearchIcon } from "../icons--FqCZEc3.js";
-import { Button } from "./Button.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { V as PlusIcon } from "../icons-DKXiSepE.js";
+import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
+import { buttonVariants } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
-import { Field } from "./Field.js";
+import { SearchField } from "./SearchField.js";
 import { ToggleGroup } from "./ToggleGroup.js";
 import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
 import * as React from "react";
@@ -18,16 +19,10 @@ function filterRoutines(routines, filter, query) {
 	});
 }
 /** Searchable, filterable navigation for an app-owned collection of Think routines. */
-function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelectedRoutineIdChange, onCreateRoutine, ref, ...props }) {
+function ThinkRoutineBrowser({ className, routines, selectedRoutineId, showOwner = true, renderRoutineLink, createRoutineLink, onRoutineLinkClick, ref, ...props }) {
 	const [filter, setFilter] = React.useState("all");
 	const [query, setQuery] = React.useState("");
 	const visibleRoutines = filterRoutines(routines, filter, query);
-	const retainVisibleSelection = (nextVisibleRoutines) => {
-		if (selectedRoutineId && !nextVisibleRoutines.some((routine) => routine.id === selectedRoutineId)) {
-			const nextSelectedId = nextVisibleRoutines[0]?.id;
-			if (nextSelectedId) onSelectedRoutineIdChange?.(nextSelectedId);
-		}
-	};
 	return /* @__PURE__ */ jsxs("nav", {
 		ref,
 		className: cx("think-routine-browser", "think-routine-library__browser", className),
@@ -48,7 +43,6 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 						const nextFilter = nextValue[0];
 						if (!nextFilter) return;
 						setFilter(nextFilter);
-						retainVisibleSelection(filterRoutines(routines, nextFilter, query));
 					},
 					children: [
 						"all",
@@ -59,14 +53,16 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 						value,
 						children: value.charAt(0).toUpperCase() + value.slice(1)
 					}, value))
-				}), onCreateRoutine ? /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
-					render: /* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "ghost",
-						color: "neutral",
-						size: "icon-sm",
-						"aria-label": "New schedule",
-						onClick: onCreateRoutine
+				}), createRoutineLink ? /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+					render: /* @__PURE__ */ jsx(NavigationLink, {
+						render: createRoutineLink,
+						className: buttonVariants({
+							variant: "ghost",
+							color: "neutral",
+							size: "sm"
+						}),
+						"data-icon-only": "",
+						"aria-label": "New schedule"
 					}),
 					children: /* @__PURE__ */ jsx(PlusIcon, {})
 				}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
@@ -75,23 +71,17 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 					children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: "Create schedule" })
 				}) })] }) : null]
 			}),
-			/* @__PURE__ */ jsxs(Field.Root, {
+			/* @__PURE__ */ jsxs(SearchField.Root, {
 				className: "think-routine-library__search",
 				name: "routine-search",
-				children: [/* @__PURE__ */ jsx(Field.Label, {
+				children: [/* @__PURE__ */ jsx(SearchField.Label, {
 					className: "think-routine-library__title sigvelo-visually-hidden",
 					children: "Search schedules"
-				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx(Field.Control, {
-					className: "think-routine-browser__search-control",
-					type: "search",
+				}), /* @__PURE__ */ jsx(SearchField.Control, {
 					value: query,
 					placeholder: "Search schedules",
-					onChange: (event) => {
-						const nextQuery = event.currentTarget.value;
-						setQuery(nextQuery);
-						retainVisibleSelection(filterRoutines(routines, filter, nextQuery));
-					}
-				})] })]
+					onChange: (event) => setQuery(event.currentTarget.value)
+				})]
 			}),
 			/* @__PURE__ */ jsxs("p", {
 				className: "think-routine-library__status sigvelo-visually-hidden",
@@ -111,14 +101,16 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 					const selected = routine.id === selectedRoutineId;
 					return /* @__PURE__ */ jsx("li", {
 						"data-selected": selected || void 0,
-						children: /* @__PURE__ */ jsxs(Button, {
-							className: "think-routine-browser__routine",
-							type: "button",
-							variant: "ghost",
-							color: "neutral",
-							size: "sm",
+						children: /* @__PURE__ */ jsxs(NavigationLink, {
+							render: renderRoutineLink(routine),
+							className: buttonVariants({
+								variant: "ghost",
+								color: "neutral",
+								size: "sm",
+								className: "think-routine-browser__routine"
+							}),
 							"aria-current": selected ? "page" : void 0,
-							onClick: () => onSelectedRoutineIdChange?.(routine.id),
+							onClick: onRoutineLinkClick,
 							children: [
 								/* @__PURE__ */ jsx("span", {
 									className: "think-routine-library__routine-status",
@@ -135,8 +127,9 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, onSelecte
 										/* @__PURE__ */ jsx("strong", { children: routine.name }),
 										/* @__PURE__ */ jsx("span", { children: routine.task.schedule }),
 										/* @__PURE__ */ jsxs("small", { children: [
-											routine.owner.name,
-											" · Next ",
+											showOwner ? `${routine.owner.name} · ` : null,
+											"Next",
+											" ",
 											getThinkRoutineNextRun(routine)
 										] })
 									]