@mcp-b/react-components 0.17.0 → 0.18.0

package/dist/components/ThinkFullApp.d.ts

@@ -1,17 +1,17 @@
-import { l as WorkspaceNavigationAdapter } from "../WorkspaceLink-DK1DWMHe.js";
-import { r as WorkspaceFileAssetResolver } from "../WorkspaceFile-C8UzuSH4.js";
-import { r as WorkspaceSource } from "../Workspace-C9RFoxcu.js";
+import { l as WorkspaceNavigationAdapter } from "../WorkspaceLink-O-EBKUJ8.js";
+import { r as WorkspaceFileAssetResolver } from "../WorkspaceFile-CzyHnESE.js";
+import { a as WorkspaceSource } from "../Workspace-Jez8ffUj.js";
 import { ThinkChatMessagesProps } from "./ThinkChat.js";
 import { t as ThinkAgent } from "../think-agent-Cip5KAPj.js";
 import { t as ThinkExecutionRun } from "../ThinkExecutionRun-ChhWhOoU.js";
+import { ThinkExecutionWorkbenchProps } from "./ThinkExecutionWorkbench.js";
 import { ThinkFullAppView } from "./ThinkFullAppViewSwitch.js";
 import { ThinkThreadStatusSummary } from "./ThinkThreadPicker.js";
 import { ThinkThreadShell } from "./ThinkThreadShell.js";
 import * as React from "react";
 import { UIMessage } from "ai";
 import { useAgentChat } from "@cloudflare/think/react";
-import { UseAgentOptions, useAgent } from "agents/react";
-import { AgentToolRunState } from "agents/agent-tools";
+import { useAgent } from "agents/react";
 
 //#region src/components/ThinkFullApp.d.ts
 type ThinkFullAppMobileView = "chat" | "workbench";
@@ -19,6 +19,11 @@ type ThinkFullAppAgent<State = unknown> = ThinkAgent<State>;
 type ThinkFullAppWorkbenchView = "files" | "execution" | (string & {});
 interface ThinkFullAppWorkspaceConfig {
   source: WorkspaceSource;
+  /**
+   * Stable, non-secret identity for this workspace backend. It is independent
+   * of the app's agent `sourceKey` when files come from a parent/shared source.
+   */
+  sourceKey: string;
   root?: string;
   navigation: WorkspaceNavigationAdapter;
   resolveFileAsset?: WorkspaceFileAssetResolver;
@@ -54,34 +59,29 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   threadStatusSummary?: ThinkThreadStatusSummary;
   /** Whether to include the built-in Execution workbench. Defaults to true. */
   showExecutionWorkbench?: boolean;
-  /** Whole native execution selected by a parent-owned record. */
-  selectedExecutionRun?: ThinkExecutionRun | null;
-  /** Receives the whole native execution selected in the workbench. */
-  onSelectedExecutionRunChange?: (run: ThinkExecutionRun) => void;
+  /** Whether narrow layouts render the built-in chat/workbench switch. Defaults to true. */
+  showMobileViewSwitch?: boolean;
+  /** Hide the thread app bar when a narrow workbench supplies its own navigation. */
+  hideAppBarInWorkbench?: boolean;
+  /** Whole native execution selected by the application route. */
+  selectedExecutionRun: ThinkExecutionRun | null;
+  /**
+   * Stable, non-secret identity for the remote Think agent used by approvals
+   * and execution queries. Include endpoint, account or tenant scope, and
+   * agent path so two sources cannot share cached data. The optional workspace
+   * has its own source identity.
+   */
+  sourceKey: string;
+  /** Returns an application-authored TanStack Router Link for an execution. */
+  renderExecutionRunLink: ThinkExecutionWorkbenchProps["renderRunLink"];
   /** Message rendering labels and approval overrides for ThinkChat. */
   messages?: ThinkChatMessagesProps<MessageT>;
   /** Extra workbench panels appended after the built-in Files and Execution panels. */
   workbenchPanels?: readonly ThinkFullAppPanel<AgentT, State, MessageT>[];
   /** Show retained Agent Tool runs from the parent connection. Defaults to true. */
   showAgentTools?: boolean;
-  /** Selected retained run id. Omit for internal selection state. */
-  selectedAgentToolRunId?: string | null;
-  /** Initial retained run selection when uncontrolled. */
-  defaultSelectedAgentToolRunId?: string | null;
-  /** Receives the complete upstream retained run selected from a Nanite pill. */
-  onSelectedAgentToolRunChange?: (run: AgentToolRunState<MessageT["parts"][number]> | null) => void;
-  /**
-   * Whole upstream connection options for child routing, including app auth or
-   * query configuration. The selected run's `subAgent` segment is appended.
-   */
-  agentToolChildConnection?: UseAgentOptions<unknown>;
-  /** Child transcript rendering overrides; the composer remains hidden. */
-  agentToolMessages?: ThinkChatMessagesProps<MessageT>;
-  /**
-   * App-owned detail for retained children that do not expose Think chat or
-   * require a product-specific route. The whole upstream run stays intact.
-   */
-  renderAgentToolDetail?: (run: AgentToolRunState<MessageT["parts"][number]>, onBack: () => void) => React.ReactNode;
+  /** Returns an application-authored TanStack Router Link for a retained child run. */
+  renderAgentToolRunLink: NonNullable<ThinkChatMessagesProps<MessageT>["renderAgentToolRunLink"]>;
   /**
    * 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.
@@ -99,7 +99,10 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   defaultMobileView?: ThinkFullAppMobileView;
   /** Called when narrow layouts switch between chat and the workbench. */
   onMobileViewChange?: (view: ThinkFullAppMobileView) => void;
-  /** Selected workbench lane. Use this when the parent app stores the lane in route state. */
+  /**
+   * Selected workbench lane for controlled, ephemeral panel UI.
+   * Apps that make lanes durable should derive this value from validated route search state.
+   */
   workbenchView?: ThinkFullAppWorkbenchView;
   /** Initial workbench lane when `workbenchView` is uncontrolled. */
   defaultWorkbenchView?: ThinkFullAppWorkbenchView;
@@ -109,30 +112,28 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
 /** Combines ThinkChat with an optional resizable workbench shell. */
 declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage>({
   agent,
-  agentToolChildConnection,
-  agentToolMessages,
   appBarActions,
   appBarLeading,
   appBarTitle,
   chat,
   className,
   defaultMobileView,
-  defaultSelectedAgentToolRunId,
   defaultWorkbenchView,
   defaultThreadSidebarOpen,
+  hideAppBarInWorkbench,
   messages,
   mobileView,
   onMobileViewChange,
-  onSelectedAgentToolRunChange,
-  onSelectedExecutionRunChange,
   onThreadSidebarOpenChange,
   onWorkbenchViewChange,
   ref,
-  renderAgentToolDetail,
-  selectedAgentToolRunId,
+  renderAgentToolRunLink,
+  renderExecutionRunLink,
   selectedExecutionRun,
   showAgentTools,
   showExecutionWorkbench,
+  showMobileViewSwitch,
+  sourceKey,
   style,
   threadSidebar,
   threadSidebarOpen,

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 { Y as TerminalIcon, u as ChevronDownIcon, x as FileIcon } from "../icons-CQJ-aMnI.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