@mcp-b/react-components 0.48.0 → 0.49.0

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

@@ -1,168 +1,50 @@
-import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-Bh9-Jo1r.js";
-import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-jtmveaRE.js";
-import { n as ResponsiveSidebarShell, t as AppBarSlots } from "../../ResponsiveSidebarShell-BTVPxLJK.js";
-import { n as McpPluginCatalogProps } from "../../McpPluginCatalog-3qWu8oK1.js";
-import { i as ThinkChatMessagesProps } from "../../ThinkChat-CwMdEum8.js";
-import { o as ThinkThreadStatusSummary } from "../../ThinkThreadPicker-yFz4vvIf.js";
-import { r as WorkspaceFileAssetResolver } from "../../WorkspaceFile-Dq-GC0_T.js";
-import { y as WorkspaceSource } from "../../Workspace-LIoU30n7.js";
-import { r as WorkspaceChangeSource } from "../../WorkspaceLive-DfjH1Ypm.js";
-import { t as ThinkAgent } from "../../think-agent-Cip5KAPj.js";
+import { ResizableSidePanelHandleProps } from "../general-purpose/ResizableSidePanel.js";
 import * as React from "react";
-import { UIMessage } from "ai";
-import { useAgentChat } from "@cloudflare/think/react";
-import { useAgent } from "agents/react";
+import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/agents-sdk/ThinkFullApp.d.ts
-type ThinkFullAppAgent<State = unknown> = ThinkAgent<State>;
-type ThinkFullAppWorkbenchView = "files" | "plugins" | (string & {});
-/**
- * ThinkFullApp bar: the shared shell slots plus the workbench view switch.
- * `views` omitted uses the built-in Files/Plugins switch. Pass `null` when
- * the host already offers those destinations (an overflow menu). `primary`
- * is always last.
- */
-interface ThinkFullAppBarSlots extends AppBarSlots {
-  /**
-   * View-switch slot. Omit for the built-in switch. `null` omits it so the
-   * host can own Files/Plugins in `actions` instead of showing a second set
-   * of icons.
-   */
-  views?: React.ReactNode | null;
+interface ThinkFullAppRootProps extends React.ComponentPropsWithRef<"div"> {
+  /** Whether the host-selected workbench is visible. Route identity remains with the host. */
+  workbenchOpen: boolean;
 }
 /**
- * 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.
+ * 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.
  */
-type ThinkFullAppView = "chat" | ThinkFullAppWorkbenchView;
-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;
-  maxInlineAssetBytes?: number;
-  /** Optional native change stream; the design system owns Query invalidation. */
-  changes?: WorkspaceChangeSource;
-  /**
-   * Disposable freshness tick for hosts without native observation, such as a
-   * serialization of settled-turn state. Each change invalidates the concept
-   * queries under `sourceKey`; it never enters query identity.
-   */
-  revision?: string;
-  /** Leading workspace control, such as a host-owned Back to chat button. */
-  leading?: React.ReactNode;
-  actions?: React.ReactNode;
-}
-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 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>>;
-  /** The `useAgentChat` value from `@cloudflare/think/react` used by the chat surface. */
-  chat: ReturnType<typeof useAgentChat<State, MessageT>>;
-  /**
-   * The `useSourceScopedAgentToolEvents(agent)` value for this connection.
-   * The app owns the subscription — mounted beside the `useAgent` call, since
-   * the server replays retained runs once per socket connect — so a run-detail
-   * route can read the same projection. ThinkFullApp never subscribes itself.
-   *
-   * Omit it for a connection that spawns no runs — a delegated run's own
-   * socket carries none — rather than passing an empty stand-in projection.
-   */
-  agentTools?: AgentToolEventsValue<MessageT["parts"][number]>;
-}
-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 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;
-  /** Application bar slots: back, leading, title, actions, views, primary. */
-  bar?: ThinkFullAppBarSlots;
-  /** Aggregate thread activity rendered beside the compact thread-title disclosure. */
-  threadStatusSummary?: ThinkThreadStatusSummary;
-  /**
-   * 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;
-  /** Message rendering labels and approval overrides for ThinkChat. */
-  messages?: ThinkChatMessagesProps<MessageT>;
-  /** Extra workbench panels appended after the enabled built-in panels. */
-  workbenchPanels?: readonly ThinkFullAppPanel[];
-  /** Returns an application-authored TanStack Router Link and enables retained Agent Tool runs. */
-  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.
-   */
-  threadSidebar?: React.ComponentProps<typeof ResponsiveSidebarShell>["sidebar"];
-  /**
-   * Place the wide-layout thread toggle. The thread rail owns it by default;
-   * hosts that compose their own rail header may keep the shell fallback in
-   * the main bar and render `closeSidebar` themselves.
-   */
-  sidebarTogglePlacement?: React.ComponentProps<typeof ResponsiveSidebarShell>["sidebarTogglePlacement"];
-  /**
-   * 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.
-   */
-  defaultView?: ThinkFullAppView;
-  /** Called when the built-in switch (or a collapse) asks for another view. */
-  onViewChange?: (view: ThinkFullAppView) => void;
-}
-/** 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>({
-  bar,
+declare function ThinkFullAppRoot({
+  workbenchOpen,
+  children,
+  className,
+  ...props
+}: ThinkFullAppRootProps): React.JSX.Element;
+interface ThinkFullAppConversationProps extends useRender.ComponentProps<"section"> {}
+/** Persistent conversation lane. Its contents and SDK providers belong to the caller. */
+declare function ThinkFullAppConversation({
+  render,
+  className,
+  ref,
+  ...props
+}: ThinkFullAppConversationProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+interface ThinkFullAppWorkbenchProps extends useRender.ComponentProps<"aside"> {}
+/** The single raised output plane. Unmounts its content when the host closes it. */
+declare function ThinkFullAppWorkbench({
+  render,
   className,
-  conversation,
-  defaultView: defaultViewProp,
-  messages,
-  onViewChange,
-  plugins,
   ref,
-  renderAgentToolRunLink,
-  sourceKey,
-  sidebarTogglePlacement,
-  style,
-  threadSidebar,
-  threadStatusSummary,
-  view,
-  workbenchPanels,
-  workspace,
   ...props
-}: ThinkFullAppProps<AgentT, State, MessageT> & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}: ThinkFullAppWorkbenchProps): React.JSX.Element | null;
+interface ThinkFullAppResizeHandleProps extends ResizableSidePanelHandleProps {}
+/** Keyboard and pointer resize control; absent while the workbench is closed. */
+declare function ThinkFullAppResizeHandle({
+  className,
+  ...props
+}: ThinkFullAppResizeHandleProps): React.JSX.Element | null;
+declare const ThinkFullApp: {
+  Root: typeof ThinkFullAppRoot;
+  Conversation: typeof ThinkFullAppConversation;
+  Workbench: typeof ThinkFullAppWorkbench;
+  ResizeHandle: typeof ThinkFullAppResizeHandle;
+};
 //#endregion
-export { ThinkFullApp, ThinkFullAppAgent, ThinkFullAppBarSlots, ThinkFullAppConversation, ThinkFullAppPanel, ThinkFullAppProps, ThinkFullAppView, ThinkFullAppWorkbenchView, ThinkFullAppWorkspaceConfig };
+export { ThinkFullApp, ThinkFullAppConversationProps, ThinkFullAppResizeHandleProps, ThinkFullAppRootProps, ThinkFullAppWorkbenchProps };

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

@@ -1,306 +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-CeGfXO21.js";
-import { IconButton } from "../foundations/IconButton.js";
-import { Menu } from "../foundations/Menu.js";
-import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.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 { 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-DiI6hhDP.js";
-import { McpPluginCatalog } from "./McpPluginCatalog.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 }) {
-	const selectedWorkspacePath = workspace?.navigation.current.destination.kind === "file" ? workspace.navigation.current.destination.path : null;
-	useWorkspaceLiveQueries({
-		changes: workspace?.changes,
-		maxInlineAssetBytes: workspace?.maxInlineAssetBytes,
-		resolveFileAsset: workspace?.resolveFileAsset,
-		selectedPath: selectedWorkspacePath,
-		source: workspace?.source,
-		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/ThinkRecoveryNotice.js

@@ -1,5 +1,5 @@
-import { AgentChatTurnError } from "../ai-sdk/AgentChatTurnError.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
+import { AgentChatTurnError } from "../ai-sdk/AgentChatTurnError.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkRecoveryNotice.tsx
 function connectionReason(error) {