@mcp-b/react-components 0.41.0 → 0.42.0

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

@@ -2,10 +2,7 @@ import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-Bh9-Jo1r.js
 import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-daY67hFM.js";
 import { McpPluginCatalogProps } from "./McpPluginCatalog.js";
 import { ThinkChatMessagesProps } from "./ThinkChat.js";
-import { t as ThinkExecutionRun } from "../../ThinkExecutionRun-k8bpyXqt.js";
-import { ThinkExecutionWorkbenchProps } from "./ThinkExecutionWorkbench.js";
-import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
-import { ThinkFullAppView } from "./ThinkFullAppViewSwitch.js";
+import { AppBarSlots, ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { ThinkThreadStatusSummary } from "./ThinkThreadPicker.js";
 import { r as WorkspaceFileAssetResolver } from "../../WorkspaceFile-BLaFmMrt.js";
 import { WorkspaceSource } from "./Workspace.js";
@@ -16,9 +13,15 @@ import { useAgentChat } from "@cloudflare/think/react";
 import { useAgent } from "agents/react";
 
 //#region src/components/agents-sdk/ThinkFullApp.d.ts
-type ThinkFullAppMobileView = "chat" | "workbench";
 type ThinkFullAppAgent<State = unknown> = ThinkAgent<State>;
-type ThinkFullAppWorkbenchView = "files" | "execution" | "plugins" | (string & {});
+type ThinkFullAppWorkbenchView = "files" | "plugins" | (string & {});
+/**
+ * The one view axis: the conversation alone, or the conversation with a named
+ * workbench panel raised beside it (leading at narrow widths). Apps that make
+ * views durable derive this from validated route search state and pass
+ * `onViewChange` back into their router.
+ */
+type ThinkFullAppView = "chat" | ThinkFullAppWorkbenchView;
 interface ThinkFullAppWorkspaceConfig {
   source: WorkspaceSource;
   /**
@@ -34,13 +37,15 @@ interface ThinkFullAppWorkspaceConfig {
   leading?: React.ReactNode;
   actions?: React.ReactNode;
 }
-interface ThinkFullAppPanel extends ThinkFullAppView {
-  /** Unique panel id used by `workbenchView`; custom panels should not reuse built-in ids. */
+interface ThinkFullAppPanel {
+  /** Unique panel id used by `view`; custom panels should not reuse built-in ids. */
   id: ThinkFullAppWorkbenchView;
+  label: string;
+  icon: React.ReactNode;
   /** Panels are app-authored, so anything one needs is already in its scope. */
   render: () => React.ReactNode;
 }
-/** The live conversation the chat lane, approvals, and executions belong to. */
+/** The live conversation the chat lane and approvals belong to. */
 interface ThinkFullAppConversation<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> {
   /** The `useAgent` value from `agents/react`; its stub drives approvals and execution records. */
   agent: ReturnType<typeof useAgent<AgentT, State>>;
@@ -57,49 +62,25 @@ interface ThinkFullAppConversation<AgentT extends ThinkFullAppAgent<State>, Stat
 interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Omit it and supply `messages.draft` for the first turn of a conversation
-   * that does not exist yet. The approvals, execution, and background-agent
-   * surfaces wait for a conversation to belong to; everything else is unchanged.
+   * that does not exist yet. The approvals and background-agent surfaces wait
+   * for a conversation to belong to; everything else is unchanged.
    */
   conversation?: ThinkFullAppConversation<AgentT, State, MessageT>;
   /** Atomic workspace source, navigation, media, and header configuration. */
   workspace?: ThinkFullAppWorkspaceConfig;
   /** Plugin directory backed by the host's live Agents MCP state and connection callbacks. */
   plugins?: McpPluginCatalogProps;
-  /** Product-specific actions rendered in the application top bar. */
-  appBarActions?: React.ReactNode;
-  /** Product-specific navigation that owns the leading slot at every width. */
-  appBarLeading?: React.ReactNode;
-  /** Product-specific compact navigation; the wide layout keeps its sidebar toggle. */
-  compactAppBarLeading?: React.ReactNode;
-  /** Active conversation or page title rendered in the application top bar. */
-  appBarTitle?: React.ReactNode;
+  /** Application bar slots: back control, leading navigation, title, actions. */
+  bar?: AppBarSlots;
   /** Aggregate thread activity rendered beside the compact thread-title disclosure. */
   threadStatusSummary?: ThinkThreadStatusSummary;
-  /** Whether narrow layouts render the built-in chat/workbench switch. Defaults to true. */
-  showMobileViewSwitch?: boolean;
-  /** Whether desktop layouts render the built-in workbench switch. Defaults to true. */
-  showWorkbenchViewSwitch?: 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
+   * Stable, non-secret identity for the remote Think agent used by approvals.
+   * 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 a run. Together
-   * with `renderExecutionRunsLink` this enables the Execution workbench.
-   */
-  renderExecutionRunLink?: ThinkExecutionWorkbenchProps["renderRunLink"];
-  /**
-   * Returns an application-authored TanStack Router Link back to the run
-   * list — the way out of a selected run, which replaces the list in place.
-   */
-  renderExecutionRunsLink?: ThinkExecutionWorkbenchProps["renderRunsLink"];
   /** Message rendering labels and approval overrides for ThinkChat. */
   messages?: ThinkChatMessagesProps<MessageT>;
   /** Extra workbench panels appended after the enabled built-in panels. */
@@ -111,73 +92,44 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
    * Use the render form to close the compact drawer after selecting a thread.
    */
   threadSidebar?: React.ComponentProps<typeof ResponsiveSidebarShell>["sidebar"];
-  /** Whether the thread sidebar is open. Omit for internal state. */
-  threadSidebarOpen?: boolean;
-  /** Initial thread sidebar state when `threadSidebarOpen` is uncontrolled. */
-  defaultThreadSidebarOpen?: boolean;
-  /** Called when the thread sidebar is opened or closed. */
-  onThreadSidebarOpenChange?: (open: boolean) => void;
-  /** Visible surface at narrow widths. Omit for internal state. */
-  mobileView?: ThinkFullAppMobileView;
-  /** Initial narrow-width surface when `mobileView` is uncontrolled. */
-  defaultMobileView?: ThinkFullAppMobileView;
-  /** Called when narrow layouts switch between chat and the workbench. */
-  onMobileViewChange?: (view: ThinkFullAppMobileView) => void;
   /**
-   * Selected workbench lane for controlled, ephemeral panel UI.
-   * Apps that make lanes durable should derive this value from validated route search state.
+   * Visible surface. Omit for internal state. A controlled `view` naming a
+   * panel that does not exist renders the conversation alone — it is never
+   * silently substituted with another panel.
+   */
+  view?: ThinkFullAppView;
+  /**
+   * Uncontrolled starting view. Ignored when `view` is set. Omit it to open
+   * Files beside the conversation on a wide app when a workspace exists, and
+   * to stay on chat at compact (extension) widths.
    */
-  workbenchView?: ThinkFullAppWorkbenchView;
-  /** Initial workbench lane when `workbenchView` is uncontrolled. */
-  defaultWorkbenchView?: ThinkFullAppWorkbenchView;
-  /** Called when the shell toolbar asks to switch workbench lanes. */
-  onWorkbenchViewChange?: (view: ThinkFullAppWorkbenchView) => void;
-  /** Whether the desktop workbench panel is open. Omit for internal state. */
-  workbenchOpen?: boolean;
-  /** Initial desktop workbench state when `workbenchOpen` is uncontrolled. */
-  defaultWorkbenchOpen?: boolean;
-  /** Called when toolbar or resize input opens or closes the workbench. */
-  onWorkbenchOpenChange?: (open: boolean) => void;
+  defaultView?: ThinkFullAppView;
+  /** Called when the built-in switch (or a collapse) asks for another view. */
+  onViewChange?: (view: ThinkFullAppView) => void;
 }
-/** Combines ThinkChat with an optional resizable workbench shell. */
+/** 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. */
 declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage>({
-  appBarActions,
-  appBarLeading,
-  appBarTitle,
-  compactAppBarLeading,
+  bar,
   className,
   conversation,
-  defaultMobileView,
-  defaultWorkbenchOpen,
-  defaultWorkbenchView,
-  defaultThreadSidebarOpen,
-  hideAppBarInWorkbench,
+  defaultView: defaultViewProp,
   messages,
-  mobileView,
-  onMobileViewChange,
-  onThreadSidebarOpenChange,
-  onWorkbenchOpenChange,
-  onWorkbenchViewChange,
+  onViewChange,
   plugins,
   ref,
   renderAgentToolRunLink,
-  renderExecutionRunLink,
-  renderExecutionRunsLink,
-  selectedExecutionRun,
-  showMobileViewSwitch,
-  showWorkbenchViewSwitch,
   sourceKey,
   style,
   threadSidebar,
-  threadSidebarOpen,
   threadStatusSummary,
-  workbenchOpen,
+  view,
   workbenchPanels,
-  workbenchView,
   workspace,
   ...props
 }: ThinkFullAppProps<AgentT, State, MessageT> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { ThinkFullApp, ThinkFullAppAgent, ThinkFullAppConversation, ThinkFullAppMobileView, ThinkFullAppPanel, ThinkFullAppProps, ThinkFullAppWorkbenchView, ThinkFullAppWorkspaceConfig };
+export { ThinkFullApp, ThinkFullAppAgent, ThinkFullAppConversation, ThinkFullAppPanel, ThinkFullAppProps, ThinkFullAppView, ThinkFullAppWorkbenchView, ThinkFullAppWorkspaceConfig };

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

@@ -1,13 +1,11 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { K as SpinnerIcon, S as FileIcon, Z as TerminalIcon, c as BoxIcon } from "../../icons-CVFSeTJn.js";
+import { S as FileIcon, c as BoxIcon } from "../../icons-CVFSeTJn.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
-import { EmptyState } from "../foundations/EmptyState.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-DtH66bAY.js";
-import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
-import { ThinkExecutionWorkbench } from "./ThinkExecutionWorkbench.js";
+import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-DkA4Wr71.js";
+import { McpPluginCatalog } from "./McpPluginCatalog.js";
 import { ThinkFullAppViewSwitch } from "./ThinkFullAppViewSwitch.js";
 import { ThinkThreadStatusIndicators } from "./ThinkThreadPicker.js";
 import { useWorkspace } from "./Workspace.js";
@@ -15,10 +13,21 @@ import { WorkspaceExplorer } from "./WorkspaceExplorer.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkFullApp.tsx
-const conversationDefaultWidth = 393;
+/** 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 WorkspacePanel({ config }) {
 	const selectedPath = config.navigation.current.destination.kind === "file" ? config.navigation.current.destination.path : null;
 	return /* @__PURE__ */ jsx(WorkspaceExplorer, {
@@ -71,33 +80,40 @@ function ThinkFullAppThreadChat({ agent, agentTools, chat, messages, renderAgent
 		})
 	});
 }
-/** Combines ThinkChat with an optional resizable workbench shell. */
-function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, compactAppBarLeading, className, conversation, defaultMobileView, defaultWorkbenchOpen, defaultWorkbenchView, defaultThreadSidebarOpen, hideAppBarInWorkbench = false, messages, mobileView, onMobileViewChange, onThreadSidebarOpenChange, onWorkbenchOpenChange, onWorkbenchViewChange, plugins, ref, renderAgentToolRunLink, renderExecutionRunLink, renderExecutionRunsLink, selectedExecutionRun = null, showMobileViewSwitch = true, showWorkbenchViewSwitch = true, sourceKey, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchOpen, workbenchPanels, workbenchView, workspace, ...props }) {
-	const agent = conversation?.agent;
+/** 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, style, threadSidebar, threadStatusSummary, view, workbenchPanels, workspace, ...props }) {
 	const appRef = React.useRef(null);
 	const workbenchPanelRef = React.useRef(null);
 	const pendingPanelFocusRef = React.useRef(null);
-	const [innerMobileView, setInnerMobileView] = React.useState(defaultMobileView ?? "chat");
-	const [innerWorkbenchView, setInnerWorkbenchView] = React.useState(defaultWorkbenchView ?? "files");
-	const [innerWorkbenchOpen, setInnerWorkbenchOpen] = React.useState(defaultWorkbenchOpen ?? true);
-	const requestedMobileView = mobileView ?? innerMobileView;
-	const requestedWorkbenchView = workbenchView ?? innerWorkbenchView;
-	const requestedWorkbenchOpen = workbenchOpen ?? innerWorkbenchOpen;
-	const setWorkbenchView = React.useCallback((next) => {
-		if (workbenchView === void 0) setInnerWorkbenchView(next);
-		onWorkbenchViewChange?.(next);
-	}, [onWorkbenchViewChange, workbenchView]);
-	const setMobileView = React.useCallback((next) => {
-		if (mobileView === void 0) setInnerMobileView(next);
-		onMobileViewChange?.(next);
-	}, [mobileView, onMobileViewChange]);
-	const setWorkbenchOpen = React.useCallback((next) => {
-		if (workbenchOpen === void 0) setInnerWorkbenchOpen(next);
-		onWorkbenchOpenChange?.(next);
-	}, [onWorkbenchOpenChange, workbenchOpen]);
-	const updateAppView = React.useCallback((update) => {
-		React.startTransition(update);
-	}, []);
+	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",
@@ -105,29 +121,6 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, compactAppBar
 		icon: /* @__PURE__ */ jsx(FileIcon, {}),
 		render: () => /* @__PURE__ */ jsx(WorkspacePanel, { config: workspace })
 	});
-	if (renderExecutionRunLink && renderExecutionRunsLink && agent) availableWorkbenchPanels.push({
-		id: "execution",
-		label: "Execution",
-		icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
-		render: () => /* @__PURE__ */ jsx(React.Suspense, {
-			fallback: /* @__PURE__ */ jsx("div", {
-				className: "think-full-app__workbench think-full-app__workbench--loading",
-				role: "status",
-				children: /* @__PURE__ */ jsx(EmptyState, {
-					icon: /* @__PURE__ */ jsx(SpinnerIcon, {}),
-					description: "Loading execution"
-				})
-			}),
-			children: /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
-				source: agent.stub,
-				sourceKey,
-				title: "Execution",
-				selectedRun: selectedExecutionRun,
-				renderRunLink: renderExecutionRunLink,
-				renderRunsLink: renderExecutionRunsLink
-			})
-		})
-	});
 	if (plugins) availableWorkbenchPanels.push({
 		id: "plugins",
 		label: "Plugins",
@@ -135,24 +128,17 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, compactAppBar
 		render: () => /* @__PURE__ */ jsx(McpPluginCatalog, { ...plugins })
 	});
 	if (workbenchPanels) availableWorkbenchPanels.push(...workbenchPanels);
-	const selectedPanel = availableWorkbenchPanels.find((panel) => panel.id === requestedWorkbenchView) ?? availableWorkbenchPanels[0];
-	const activePanel = requestedWorkbenchOpen ? selectedPanel : void 0;
-	const activeWorkbenchView = activePanel?.id;
+	const activePanel = requestedView === "chat" ? void 0 : availableWorkbenchPanels.find((panel) => panel.id === requestedView);
 	const hasWorkbench = activePanel !== void 0;
-	const hasAvailableWorkbench = selectedPanel !== void 0;
-	const activeMobileView = hasWorkbench ? requestedMobileView : "chat";
-	const shouldShowWorkbenchViewSwitch = showWorkbenchViewSwitch && availableWorkbenchPanels.length > 0;
-	const workbenchViews = availableWorkbenchPanels;
-	const hasApplicationChrome = Boolean(appBarActions || appBarLeading || compactAppBarLeading || appBarTitle || threadSidebar);
-	const shouldShowMobileViewSwitch = Boolean(selectedPanel) && showMobileViewSwitch;
-	const hasAppBarRow = hasApplicationChrome || shouldShowWorkbenchViewSwitch || shouldShowMobileViewSwitch;
+	const activeMobileView = hasWorkbench ? "workbench" : "chat";
+	const hasAppBarRow = Boolean(bar?.back || bar?.leading || bar?.compactLeading || bar?.title || bar?.actions || threadSidebar) || availableWorkbenchPanels.length > 0;
 	React.useLayoutEffect(() => {
 		const pendingFocus = pendingPanelFocusRef.current;
-		if (!pendingFocus || pendingFocus.id !== activeWorkbenchView) return;
+		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 });
-	}, [activeWorkbenchView]);
-	const updateWorkbenchPanel = (next) => {
+	}, [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;
@@ -160,50 +146,22 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, compactAppBar
 			id: next,
 			label: nextLabel
 		} : null;
-		React.startTransition(() => setWorkbenchView(next));
+		React.startTransition(() => setView(next));
 	};
-	const appBarTrailing = appBarActions || shouldShowWorkbenchViewSwitch || shouldShowMobileViewSwitch ? /* @__PURE__ */ jsxs(Fragment, { children: [
-		appBarActions,
-		shouldShowWorkbenchViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
-			className: "think-full-app__workbench-view-switch",
-			views: workbenchViews,
-			value: activeWorkbenchView,
-			allowEmpty: true,
-			onValueChange: (next) => {
-				updateAppView(() => {
-					if (!next) {
-						setWorkbenchOpen(false);
-						return;
-					}
-					updateWorkbenchPanel(next);
-					setWorkbenchOpen(true);
-				});
-			},
-			"aria-label": "Workbench views"
-		}) : null,
-		shouldShowMobileViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
-			className: "think-full-app__mobile-view-switch",
-			views: workbenchViews,
-			value: activeMobileView === "workbench" ? activeWorkbenchView : void 0,
-			allowEmpty: true,
-			onValueChange: (next) => {
-				updateAppView(() => {
-					if (!next) {
-						setMobileView("chat");
-						return;
-					}
-					setWorkbenchView(next);
-					setMobileView("workbench");
-				});
-			},
-			"aria-label": "App views"
-		}) : null
-	] }) : void 0;
+	const viewSwitch = availableWorkbenchPanels.length ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+		views: availableWorkbenchPanels,
+		value: activePanel?.id,
+		allowEmpty: true,
+		"aria-label": "App views",
+		onValueChange: (next) => updateView(next ?? "chat")
+	}) : null;
+	const appBarActions = bar?.actions || viewSwitch ? /* @__PURE__ */ jsxs(Fragment, { children: [bar?.actions, viewSwitch] }) : 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,
@@ -212,6 +170,7 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, compactAppBar
 		"data-mobile-view": activeMobileView,
 		style,
 		...props,
+		"data-recipe": "fill-host",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "think-full-app__view-scope",
 			"data-mobile-view": activeMobileView,
@@ -234,10 +193,10 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, compactAppBar
 						})
 					})
 				})
-			}), hasAvailableWorkbench ? /* @__PURE__ */ jsx("aside", {
+			}), activePanel ? /* @__PURE__ */ jsx("aside", {
 				className: "think-full-app__aside",
 				"aria-label": "Workbench",
-				children: activePanel ? /* @__PURE__ */ jsx("div", {
+				children: /* @__PURE__ */ jsx("div", {
 					className: "think-full-app__workbench-slot",
 					children: /* @__PURE__ */ jsx(React.ViewTransition, {
 						default: "sigvelo-layout-transition",
@@ -248,7 +207,7 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, compactAppBar
 							children: activePanel.render()
 						})
 					})
-				}) : null
+				})
 			}) : null]
 		}), activePanel ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "think-full-app__resizer" }) : null]
 	});
@@ -269,26 +228,18 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, compactAppBar
 		className: "think-full-app-shell",
 		sidebar: threadSidebar,
 		sidebarLabel: "threads",
-		sidebarOpen: threadSidebarOpen,
-		defaultSidebarOpen: defaultThreadSidebarOpen,
-		onSidebarOpenChange: onThreadSidebarOpenChange,
 		showMainLabel: "Show selected thread",
-		topBarHidden: !hasAppBarRow,
-		topBarProps: {
+		bar: {
+			...bar,
+			actions: appBarActions,
 			className: "think-full-app__app-bar",
-			"aria-label": "Workbench controls",
-			"data-app-chrome": hasApplicationChrome || shouldShowWorkbenchViewSwitch ? "true" : "false",
-			"data-mobile-view": activeMobileView,
-			"data-hide-in-workbench": hideAppBarInWorkbench ? "" : void 0
+			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
 		},
-		topBarLeading: appBarLeading,
-		compactTopBarLeading: compactAppBarLeading,
-		topBarTitle: appBarTitle,
-		compactTitleTrigger: threadSidebar ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-			className: "sigvelo-truncate",
-			children: appBarTitle ?? "Threads"
-		}), threadStatusSummary ? /* @__PURE__ */ jsx(ThinkThreadStatusIndicators, { summary: threadStatusSummary }) : null] }) : void 0,
-		topBarTrailing: appBarTrailing,
 		children: app
 	});
 }

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

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

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

@@ -1,6 +1,6 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkFullAppViewSwitch.tsx

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
 import { Switch } from "../foundations/Switch.js";
+import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
 import { ThinkRoutineRuns } from "./ThinkRoutineRuns.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,3 +1,4 @@
+import { AppBarSlots } from "../general-purpose/ResponsiveSidebarShell.js";
 import { ThinkRoutine, ThinkRoutineRunOf } from "./ThinkRoutine.js";
 import * as React from "react";
 
@@ -29,10 +30,11 @@ interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine>
   showOwner?: boolean;
   /** Host-owned catalog error shown above the library without replacing loaded routines. */
   error?: React.ReactNode;
-  /** Product navigation rendered after the built-in schedule navigation control. */
-  appBarLeading?: React.ReactNode;
-  /** Product navigation rendered before the selected schedule actions. */
-  appBarActions?: React.ReactNode;
+  /**
+   * Application bar slots. `title` defaults to the selected schedule's name;
+   * `actions` render before the built-in schedule actions.
+   */
+  bar?: AppBarSlots;
   /** Starts the selected routine immediately. */
   onRunRoutine?: (routine: TRoutine) => void | Promise<void>;
   /** Activates or pauses the selected app-owned routine. */
@@ -54,8 +56,7 @@ interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine>
  * route and may also use these surfaces independently.
  */
 declare function ThinkRoutineLibrary<TRoutine extends ThinkRoutine = ThinkRoutine>({
-  appBarActions,
-  appBarLeading,
+  bar,
   className,
   createRoutineLink,
   error: catalogError,