@mcp-b/react-components 0.30.0 → 0.31.0

package/dist/MenuDisclosureGroup-yJRq7YXa.js

@@ -0,0 +1,32 @@
+import { n as mergeBaseClassName } from "./class-names-BiMDVpUo.js";
+import { f as ChevronDownIcon } from "./icons-B1Qw05te.js";
+import { Menu } from "./components/foundations/Menu.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_internal/MenuDisclosureGroup.tsx
+/**
+* A menu-native disclosure: its trigger stays in the menu roving-focus model,
+* while its rows mount only after the user expands the section.
+*/
+function MenuDisclosureGroup({ children, className, defaultOpen = false, label, triggerClassName, ...props }) {
+	const [open, setOpen] = React.useState(defaultOpen);
+	return /* @__PURE__ */ jsxs(Menu.Group, {
+		className: mergeBaseClassName("menu-disclosure-group", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs(Menu.Item, {
+			"aria-expanded": open,
+			className: mergeBaseClassName("menu-disclosure-group__trigger", triggerClassName),
+			closeOnClick: false,
+			onClick: () => setOpen((current) => !current),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sigvelo-truncate-grow",
+				children: label
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })]
+		}), open ? /* @__PURE__ */ jsx("div", {
+			className: "menu-disclosure-group__items",
+			children
+		}) : null]
+	});
+}
+//#endregion
+export { MenuDisclosureGroup as t };

package/dist/{ThinkChat-Dsm1xF3a.js → ThinkChat-ldbrNiAx.js}

@@ -3,7 +3,7 @@ import { TransitionSurface } from "./components/foundations/TransitionSurface.js
 import { AgentChat } from "./components/agents-sdk/AgentChat.js";
 import { AgentToolRunsProvider, useOptionalAgentToolRuns } from "./components/agents-sdk/AgentToolRunsContext.js";
 import { SubagentRunList } from "./components/agents-sdk/SubagentRunList.js";
-import { ThinkChatContext, ThinkChatLiveContext, useThinkChatContext } from "./components/agents-sdk/ThinkChatContext.js";
+import { ThinkChatContext, ThinkChatLiveContext, useOptionalThinkChatContext, useThinkChatContext } from "./components/agents-sdk/ThinkChatContext.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./components/agents-sdk/ThinkChatActivity.js";
 import { ThinkRecoveryNotice } from "./components/agents-sdk/ThinkRecoveryNotice.js";
 import { t as WorkspaceMessageResponse } from "./WorkspaceMessageResponse-BWbkIELl.js";
@@ -202,11 +202,10 @@ const ThinkChatApprovalsContext = React.createContext(null);
 * inside the log) or `excludeTools` + your own `renderPart` (standalone
 * card) — see README "App-specific tools" and the Custom Tool Panel story.
 */
-function ThinkChatMessages({ composerHeader, renderPart, excludeTools, renderAgentToolRunLink, toolRenderers, thinkStub, onExecutionSettled, pendingApprovals, notice, sessionCompaction, ...props }) {
-	const chat = useThinkChatContext("ThinkChat.Messages");
+function ThinkChatMessages({ composerHeader, draft, renderPart, excludeTools, renderAgentToolRunLink, toolRenderers, thinkStub, onExecutionSettled, pendingApprovals, notice, sessionCompaction, ...props }) {
+	const chat = useOptionalThinkChatContext();
 	const agentTools = useOptionalAgentToolRuns();
 	const approvals = React.useContext(ThinkChatApprovalsContext);
-	const status = toAgentChatStatus(chat);
 	const resolvedApprovals = resolveThinkApprovalProps({
 		thinkStub,
 		pendingApprovals,
@@ -241,7 +240,7 @@ function ThinkChatMessages({ composerHeader, renderPart, excludeTools, renderAge
 		});
 		return custom === void 0 ? renderBuiltIn() : custom;
 	} : defaultRenderPart, [defaultRenderPart, renderPart]);
-	const defaultNotice = /* @__PURE__ */ jsx(ThinkRecoveryNotice, { chat });
+	const defaultNotice = chat ? /* @__PURE__ */ jsx(ThinkRecoveryNotice, { chat }) : null;
 	const [dismissedCompaction, setDismissedCompaction] = React.useState(null);
 	const landedCompaction = sessionCompaction?.lastCompaction && sessionCompaction.lastCompaction !== dismissedCompaction ? sessionCompaction.lastCompaction : null;
 	const sessionCompactionNotice = sessionCompaction?.compacting ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), "Compacting context…"] }) : sessionCompaction?.sessionError ? /* @__PURE__ */ jsxs(TransitionSurface, {
@@ -256,7 +255,7 @@ function ThinkChatMessages({ composerHeader, renderPart, excludeTools, renderAge
 		className: "think-recovery-notice",
 		children: [compactionSizeText(landedCompaction), " Context usage updates after your next message."]
 	}) : null;
-	const recoveryActive = chat.isRecovering || chat.connectionError || chat.error;
+	const recoveryActive = chat && (chat.isRecovering || chat.connectionError || chat.error);
 	const backgroundRuns = renderAgentToolRunLink ? agentTools?.unboundRuns : void 0;
 	const resolvedComposerHeader = composerHeader || backgroundRuns?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [composerHeader, backgroundRuns?.length && renderAgentToolRunLink ? /* @__PURE__ */ jsxs("div", {
 		className: "subagent-run__tray",
@@ -270,11 +269,32 @@ function ThinkChatMessages({ composerHeader, renderPart, excludeTools, renderAge
 			renderRunLink: renderAgentToolRunLink
 		})]
 	}) : null] }) : void 0;
+	const submit = ({ text, files, references }, send) => {
+		setDismissedCompaction(sessionCompaction?.lastCompaction ?? null);
+		const prompt = [...references?.map(({ trigger, value }) => trigger ? `${trigger}${value}` : value) ?? [], text.trim()].filter(Boolean).join(" ");
+		if (!prompt && !files.length) return;
+		return send({
+			text: prompt,
+			files
+		});
+	};
+	if (!chat) {
+		if (!draft) throw new Error("ThinkChat.Messages must be used inside <ThinkChat.Provider> or <ThinkChat.Root>, or given a `draft`.");
+		return /* @__PURE__ */ jsx(AgentChat, {
+			...props,
+			renderPart: resolvedRenderPart,
+			messages: draft.messages ?? EMPTY_DRAFT_MESSAGES,
+			status: draft.status ?? "ready",
+			notice: notice ?? sessionCompactionNotice,
+			composerHeader: resolvedComposerHeader,
+			onSubmit: (message) => submit(message, draft.onSubmit)
+		});
+	}
 	return /* @__PURE__ */ jsx(AgentChat, {
 		...props,
 		renderPart: resolvedRenderPart,
 		messages: chat.messages,
-		status,
+		status: toAgentChatStatus(chat),
 		onStop: chat.stop,
 		onApprovalResponse: chat.addToolApprovalResponse,
 		thinkStub: resolvedApprovals.thinkStub,
@@ -283,17 +303,10 @@ function ThinkChatMessages({ composerHeader, renderPart, excludeTools, renderAge
 		notice: notice ?? (recoveryActive ? defaultNotice : sessionCompactionNotice),
 		composerHeader: resolvedComposerHeader,
 		onRegenerate: (messageId) => void chat.regenerate({ messageId }),
-		onSubmit: ({ text, files, references }) => {
-			setDismissedCompaction(sessionCompaction?.lastCompaction ?? null);
-			const prompt = [...references?.map(({ trigger, value }) => trigger ? `${trigger}${value}` : value) ?? [], text.trim()].filter(Boolean).join(" ");
-			if (!prompt && !files.length) return;
-			return chat.sendMessage({
-				text: prompt,
-				files
-			});
-		}
+		onSubmit: (message) => submit(message, chat.sendMessage)
 	});
 }
+const EMPTY_DRAFT_MESSAGES = [];
 /**
 * The ambient chat value from `ThinkChat.Root`/`Provider` — for custom tool
 * panels, cards, or composer actions that need `messages`, `status`, or

package/dist/{WorkspaceFileView-hd1-cpuz.js → WorkspaceFileView-BtzVKAed.js}

@@ -1,6 +1,4 @@
-import { A as MaximizeIcon, d as CheckIcon, h as CodeIcon, rt as XIcon, tt as WarningIcon, x as EyeIcon, y as DownloadIcon } from "./icons-B1Qw05te.js";
-import { t as NavigationLink } from "./navigation-link-kqMa81v5.js";
-import { buttonVariants } from "./components/foundations/Button.js";
+import { A as MaximizeIcon, d as CheckIcon, h as CodeIcon, r as ArrowLeftIcon, tt as WarningIcon, x as EyeIcon, y as DownloadIcon } from "./icons-B1Qw05te.js";
 import { r as formatClock } from "./format-CmopcfqJ.js";
 import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-CM5gfmdq.js";
 import { inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceSkillPath, parseWorkspaceSkill } from "./components/agents-sdk/WorkspaceFile.js";
@@ -555,22 +553,13 @@ function WorkspaceFileView({ appearance = "contained", file, path, isLoading, is
 		downloadUrl: assetUrl.downloadUrl,
 		allowOpen: media?.mimeType !== "image/svg+xml"
 	}) : null;
-	const closeAction = workspaceNavigation ? /* @__PURE__ */ jsx(NavigationLink, {
-		"aria-label": "Close file",
-		className: buttonVariants({
-			color: "neutral",
-			variant: "ghost",
-			size: "sm",
-			className: "workspace-explorer__file-close"
-		}),
-		"data-icon-only": "",
-		"data-slot": "button",
-		render: workspaceNavigation.navigation.renderLink({ kind: "files" }),
-		children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
-	}) : null;
 	const headerProps = {
 		path,
-		leading,
+		leading: workspaceNavigation ? /* @__PURE__ */ jsx(AppTopBar.Link, {
+			label: "Back to workspace",
+			render: workspaceNavigation.navigation.renderLink({ kind: "files" }),
+			children: /* @__PURE__ */ jsx(ArrowLeftIcon, { "aria-hidden": "true" })
+		}) : leading,
 		actions: isMarkdown ? /* @__PURE__ */ jsxs(Fragment, { children: [
 			actions,
 			assetActions,
@@ -606,17 +595,13 @@ function WorkspaceFileView({ appearance = "contained", file, path, isLoading, is
 			className: "workspace-explorer__file",
 			"data-appearance": appearance,
 			"data-workspace-restoration-scope": "file",
-			children: [
-				/* @__PURE__ */ jsx(WorkspaceHeader, { ...headerProps }),
-				closeAction,
-				/* @__PURE__ */ jsx("div", {
-					className: "workspace-explorer__empty",
-					"data-workspace-file-content": "",
-					"data-workspace-focus-target": "",
-					role,
-					children: message
-				})
-			]
+			children: [/* @__PURE__ */ jsx(WorkspaceHeader, { ...headerProps }), /* @__PURE__ */ jsx("div", {
+				className: "workspace-explorer__empty",
+				"data-workspace-file-content": "",
+				"data-workspace-focus-target": "",
+				role,
+				children: message
+			})]
 		});
 	}
 	if (file.asset && media && assetUrl.url) return /* @__PURE__ */ jsxs("div", {
@@ -624,18 +609,14 @@ function WorkspaceFileView({ appearance = "contained", file, path, isLoading, is
 		className: "workspace-explorer__file",
 		"data-appearance": appearance,
 		"data-workspace-restoration-scope": "file",
-		children: [
-			/* @__PURE__ */ jsx(WorkspaceHeader, { ...headerProps }),
-			closeAction,
-			/* @__PURE__ */ jsx(WorkspaceMediaPreview, {
-				asset: file.asset,
-				fileName: file.name,
-				media,
-				url: assetUrl.url,
-				downloadUrl: assetUrl.downloadUrl,
-				onScroll: handleScroll
-			})
-		]
+		children: [/* @__PURE__ */ jsx(WorkspaceHeader, { ...headerProps }), /* @__PURE__ */ jsx(WorkspaceMediaPreview, {
+			asset: file.asset,
+			fileName: file.name,
+			media,
+			url: assetUrl.url,
+			downloadUrl: assetUrl.downloadUrl,
+			onScroll: handleScroll
+		})]
 	});
 	if (file.content === null) return null;
 	if (isMarkdown && markdownView === "preview") {
@@ -652,60 +633,56 @@ function WorkspaceFileView({ appearance = "contained", file, path, isLoading, is
 			className: "workspace-explorer__file",
 			"data-appearance": appearance,
 			"data-workspace-restoration-scope": "file",
-			children: [
-				/* @__PURE__ */ jsx(WorkspaceHeader, { ...headerProps }),
-				closeAction,
-				/* @__PURE__ */ jsx("div", {
-					ref: scrollRef,
-					className: "workspace-explorer__markdown-scroll",
-					"data-workspace-file-content": "",
-					"data-workspace-scroll": "",
-					onScroll: handleScroll,
-					children: /* @__PURE__ */ jsxs("article", {
-						className: "workspace-explorer__markdown",
-						children: [skill ? /* @__PURE__ */ jsxs("header", {
-							className: "workspace-explorer__skill",
-							"data-skill-identity": showSkillIdentity ? "" : void 0,
-							children: [
-								showSkillIdentity ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-									className: "workspace-explorer__skill-kicker",
-									children: "Agent Skill"
-								}), skill.parsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
-									/* @__PURE__ */ jsx("p", {
-										className: "workspace-explorer__skill-name",
-										children: skill.parsed.properties.name
-									}),
-									/* @__PURE__ */ jsx("p", {
-										className: "workspace-explorer__skill-description",
-										children: skill.parsed.properties.description
-									}),
-									/* @__PURE__ */ jsxs("dl", {
-										className: "workspace-explorer__skill-metadata",
-										children: [skill.parsed.properties.compatibility ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: "Compatibility" }), /* @__PURE__ */ jsx("dd", { children: skill.parsed.properties.compatibility })] }) : null, skill.parsed.properties.allowedTools ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: "Allowed tools" }), /* @__PURE__ */ jsx("dd", { children: skill.parsed.properties.allowedTools })] }) : null]
-									})
-								] }) : null] }) : null,
-								/* @__PURE__ */ jsxs("div", {
-									className: "workspace-explorer__skill-status",
-									"data-invalid": skill.validationErrors.length > 0 ? "" : void 0,
-									children: [skill.validationErrors.length > 0 ? /* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }), skill.validationErrors.length > 0 ? `${skill.validationErrors.length.toLocaleString()} validation ${skill.validationErrors.length === 1 ? "issue" : "issues"}` : "Valid Agent Skill"]
+			children: [/* @__PURE__ */ jsx(WorkspaceHeader, { ...headerProps }), /* @__PURE__ */ jsx("div", {
+				ref: scrollRef,
+				className: "workspace-explorer__markdown-scroll",
+				"data-workspace-file-content": "",
+				"data-workspace-scroll": "",
+				onScroll: handleScroll,
+				children: /* @__PURE__ */ jsxs("article", {
+					className: "workspace-explorer__markdown",
+					children: [skill ? /* @__PURE__ */ jsxs("header", {
+						className: "workspace-explorer__skill",
+						"data-skill-identity": showSkillIdentity ? "" : void 0,
+						children: [
+							showSkillIdentity ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+								className: "workspace-explorer__skill-kicker",
+								children: "Agent Skill"
+							}), skill.parsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+								/* @__PURE__ */ jsx("p", {
+									className: "workspace-explorer__skill-name",
+									children: skill.parsed.properties.name
 								}),
-								skill.validationErrors.length > 0 ? /* @__PURE__ */ jsx("ul", {
-									className: "workspace-explorer__skill-errors",
-									children: skill.validationErrors.map((error) => /* @__PURE__ */ jsx("li", { children: error }, error))
-								}) : null
-							]
-						}) : null, response]
-					})
+								/* @__PURE__ */ jsx("p", {
+									className: "workspace-explorer__skill-description",
+									children: skill.parsed.properties.description
+								}),
+								/* @__PURE__ */ jsxs("dl", {
+									className: "workspace-explorer__skill-metadata",
+									children: [skill.parsed.properties.compatibility ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: "Compatibility" }), /* @__PURE__ */ jsx("dd", { children: skill.parsed.properties.compatibility })] }) : null, skill.parsed.properties.allowedTools ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: "Allowed tools" }), /* @__PURE__ */ jsx("dd", { children: skill.parsed.properties.allowedTools })] }) : null]
+								})
+							] }) : null] }) : null,
+							/* @__PURE__ */ jsxs("div", {
+								className: "workspace-explorer__skill-status",
+								"data-invalid": skill.validationErrors.length > 0 ? "" : void 0,
+								children: [skill.validationErrors.length > 0 ? /* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }), skill.validationErrors.length > 0 ? `${skill.validationErrors.length.toLocaleString()} validation ${skill.validationErrors.length === 1 ? "issue" : "issues"}` : "Valid Agent Skill"]
+							}),
+							skill.validationErrors.length > 0 ? /* @__PURE__ */ jsx("ul", {
+								className: "workspace-explorer__skill-errors",
+								children: skill.validationErrors.map((error) => /* @__PURE__ */ jsx("li", { children: error }, error))
+							}) : null
+						]
+					}) : null, response]
 				})
-			]
+			})]
 		});
 	}
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		ref: fileViewRef,
 		className: "workspace-explorer__file",
 		"data-appearance": appearance,
 		"data-workspace-restoration-scope": "file",
-		children: [closeAction, /* @__PURE__ */ jsxs(CodeBlock, {
+		children: /* @__PURE__ */ jsxs(CodeBlock, {
 			className: "workspace-explorer__code",
 			code: file.content,
 			"data-workspace-file-content": "",
@@ -724,7 +701,7 @@ function WorkspaceFileView({ appearance = "contained", file, path, isLoading, is
 				onScroll: handleScroll,
 				children: /* @__PURE__ */ jsx(CodeBlockContent, {})
 			})]
-		})]
+		})
 	});
 }
 //#endregion

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

@@ -5,6 +5,14 @@ import { l as DialogProps } from "../../Dialog-DeOSJ0Oy.js";
 import * as React from "react";
 import { MCPServersState } from "agents";
 
+//#region src/components/_internal/MenuDisclosureGroup.d.ts
+interface MenuDisclosureGroupProps extends Omit<React.ComponentProps<typeof Menu.Group>, "children"> {
+  label: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  triggerClassName?: string;
+}
+//#endregion
 //#region src/components/agents-sdk/McpServerPicker.d.ts
 interface McpServerPickerProps {
   /** MCP servers to show in the plus-menu picker. */
@@ -24,7 +32,7 @@ interface McpServerPickerProps {
   triggerLabel?: string;
 }
 type McpServerPickerItemsProps = Omit<McpServerPickerProps, "sideOffset" | "triggerLabel">;
-interface McpServerPickerGroupProps extends Omit<React.ComponentProps<typeof Menu.Group>, "children" | "label"> {
+interface McpServerPickerGroupProps extends Omit<MenuDisclosureGroupProps, "children" | "label" | "triggerClassName"> {
   /** Quiet visible heading for a related set of picker actions. */
   label: React.ReactNode;
   children: React.ReactNode;

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

@@ -8,6 +8,7 @@ import { Menu } from "../foundations/Menu.js";
 import { PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger } from "../ai-sdk/PromptInput.js";
 import { n as getMcpServerConnectionKind, t as McpServerIcon } from "../../mcp-server-U71zhxFF.js";
 import { McpConnectorForm } from "./McpConnectorForm.js";
+import { t as MenuDisclosureGroup } from "../../MenuDisclosureGroup-yJRq7YXa.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/McpServerPicker.tsx
@@ -127,13 +128,12 @@ function McpServerPickerItems({ servers, onConnect, mcp, onDisconnect, actions,
 	] });
 }
 function McpServerPickerGroup({ label, children, className, ...props }) {
-	return /* @__PURE__ */ jsxs(Menu.Group, {
+	return /* @__PURE__ */ jsx(MenuDisclosureGroup, {
 		className: mergeBaseClassName("mcp-server-picker__group", className),
+		label,
+		triggerClassName: "mcp-server-picker__group-trigger",
 		...props,
-		children: [/* @__PURE__ */ jsx(Menu.GroupLabel, {
-			className: "mcp-server-picker__group-label",
-			children: label
-		}), children]
+		children
 	});
 }
 function McpServerPickerAction({ icon, label, description, className, ...props }) {

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

@@ -1,4 +1,5 @@
 import { i as AgentMessageRenderPartContext } from "../../AgentMessageParts-C7L-Mv9U.js";
+import { ct as PromptInputMessage } from "../../PromptInput-DOyee1kM.js";
 import { r as AgentChatProps } from "../../AgentChat-CV-GuYA6.js";
 import { i as useOptionalAgentToolRuns, n as AgentToolRunsProvider, r as AgentToolRunsProviderProps, t as AgentToolEventsValue } from "../../AgentToolRunsContext-Cgve-Upx.js";
 import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../../BrowserLiveView-tJTWkoyu.js";
@@ -46,8 +47,29 @@ interface ThinkChatRootProps<State = unknown> {
   sourceKey: string;
   children: React.ReactNode;
 }
+/**
+ * The first-turn surface with no conversation behind it. Supply this instead of
+ * a chat provider when the composer's submission is what creates the
+ * conversation: connecting early is what leaves empty threads behind.
+ */
+interface ThinkChatDraft<MessageT extends UIMessage = UIMessage> {
+  /** Client-only transcript rows, such as a locally rendered guide. */
+  messages?: readonly MessageT[];
+  /** Receives the first message, normalized the same way a live thread's is. */
+  onSubmit: (message: {
+    text: string;
+    files: PromptInputMessage["files"];
+  }) => void | Promise<void>;
+  /** Set while the app is creating the conversation, so the composer reads busy. */
+  status?: AgentChatProps<MessageT>["status"];
+}
 interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends ThinkChatActivityRendererOptions<MessageT> {
   className?: string;
+  /**
+   * Renders without a chat provider, for the first turn of a conversation that
+   * does not exist yet. Everything else here behaves as it does on a live thread.
+   */
+  draft?: ThinkChatDraft<MessageT>;
   /** Disable the composer (e.g. while the agent is unreachable). */
   disabled?: boolean;
   /** Hide the composer while retaining the normal Think transcript rendering. */
@@ -179,6 +201,7 @@ declare function ThinkChatRoot<State = unknown, MessageT extends UIMessage = UIM
  */
 declare function ThinkChatMessages<State = unknown, MessageT extends UIMessage = UIMessage>({
   composerHeader,
+  draft,
   renderPart,
   excludeTools,
   renderAgentToolRunLink,
@@ -230,4 +253,4 @@ declare const ThinkChat: {
   createActivityRenderer: typeof createThinkChatActivityRenderer;
 };
 //#endregion
-export { type AgentToolEventsValue, AgentToolRunsProvider, type AgentToolRunsProviderProps, BrowserLiveView, type BrowserLiveViewProps, BrowserReplay, type BrowserReplayProps, ThinkChat, ThinkChatActivity, type ThinkChatActivityProps, type ThinkChatActivityRendererOptions, ThinkChatMessages, ThinkChatMessagesProps, ThinkChatProvider, ThinkChatProviderProps, ThinkChatRoot, ThinkChatRootProps, type ThinkChatToolRenderer, type ThinkChatToolRenderers, ThinkPendingExecutionApprovalsQueryKey, ThinkPendingExecutionApprovalsQueryOptions, ThinkRecoveryNotice, type ThinkRecoveryNoticeProps, type UseWorkspaceOptions, WorkspaceExplorer, type WorkspaceExplorerProps, type WorkspaceFileReadTarget, type WorkspaceFileState, type WorkspaceInfo, type WorkspaceQueryKey, type WorkspaceSource, type WorkspaceState, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, thinkPendingExecutionApprovalsQueryOptions, useOptionalAgentToolRuns, useThinkChat, useThinkPendingExecutionApprovals, useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryKey, workspaceDirectoryQueryOptions, workspaceDirectoryQueryPrefix, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions };
+export { type AgentToolEventsValue, AgentToolRunsProvider, type AgentToolRunsProviderProps, BrowserLiveView, type BrowserLiveViewProps, BrowserReplay, type BrowserReplayProps, ThinkChat, ThinkChatActivity, type ThinkChatActivityProps, type ThinkChatActivityRendererOptions, ThinkChatDraft, ThinkChatMessages, ThinkChatMessagesProps, ThinkChatProvider, ThinkChatProviderProps, ThinkChatRoot, ThinkChatRootProps, type ThinkChatToolRenderer, type ThinkChatToolRenderers, ThinkPendingExecutionApprovalsQueryKey, ThinkPendingExecutionApprovalsQueryOptions, ThinkRecoveryNotice, type ThinkRecoveryNoticeProps, type UseWorkspaceOptions, WorkspaceExplorer, type WorkspaceExplorerProps, type WorkspaceFileReadTarget, type WorkspaceFileState, type WorkspaceInfo, type WorkspaceQueryKey, type WorkspaceSource, type WorkspaceState, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, thinkPendingExecutionApprovalsQueryOptions, useOptionalAgentToolRuns, useThinkChat, useThinkPendingExecutionApprovals, useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryKey, workspaceDirectoryQueryOptions, workspaceDirectoryQueryPrefix, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions };

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

@@ -6,7 +6,7 @@ import { isThinkChatActivityPart } from "./ThinkChatToolParts.js";
 import { describeThinkChatActivityPart } from "./ThinkChatActivitySummary.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./ThinkChatActivity.js";
 import { ThinkRecoveryNotice } from "./ThinkRecoveryNotice.js";
-import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-Dsm1xF3a.js";
+import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-ldbrNiAx.js";
 import { useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryKey, workspaceDirectoryQueryOptions, workspaceDirectoryQueryPrefix, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions } from "./Workspace.js";
 import { WorkspaceExplorer } from "./WorkspaceExplorer.js";
 export { AgentToolRunsProvider, BrowserLiveView, BrowserReplay, ThinkChat, ThinkChatActivity, ThinkChatMessages, ThinkChatProvider, ThinkChatRoot, ThinkRecoveryNotice, WorkspaceExplorer, createThinkChatActivityRenderer, describeThinkChatActivityPart, inferWorkspaceLanguage, isThinkChatActivityPart, renderThinkChatActivityPart, thinkPendingExecutionApprovalsQueryOptions, useOptionalAgentToolRuns, useThinkChat, useThinkPendingExecutionApprovals, useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryKey, workspaceDirectoryQueryOptions, workspaceDirectoryQueryPrefix, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions };

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

@@ -33,21 +33,26 @@ interface ThinkFullAppWorkspaceConfig {
   leading?: React.ReactNode;
   actions?: React.ReactNode;
 }
-interface ThinkFullAppPanelContext<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> {
-  agent: ReturnType<typeof useAgent<AgentT, State>>;
-  chat: ReturnType<typeof useAgentChat<State, MessageT>>;
-  workspace?: ThinkFullAppWorkspaceConfig;
-}
-interface ThinkFullAppPanel<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> extends ThinkFullAppView {
+interface ThinkFullAppPanel extends ThinkFullAppView {
   /** Unique panel id used by `workbenchView`; custom panels should not reuse built-in ids. */
   id: ThinkFullAppWorkbenchView;
-  render: (context: ThinkFullAppPanelContext<AgentT, State, MessageT>) => React.ReactNode;
+  /** Panels are app-authored, so anything one needs is already in its scope. */
+  render: () => React.ReactNode;
 }
-interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> extends React.HTMLAttributes<HTMLDivElement> {
+/** The live conversation the chat lane, approvals, and executions 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>>;
+}
+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.
+   */
+  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. */
@@ -78,7 +83,7 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   /** Message rendering labels and approval overrides for ThinkChat. */
   messages?: ThinkChatMessagesProps<MessageT>;
   /** Extra workbench panels appended after the enabled built-in panels. */
-  workbenchPanels?: readonly ThinkFullAppPanel<AgentT, State, MessageT>[];
+  workbenchPanels?: readonly ThinkFullAppPanel[];
   /** Returns an application-authored TanStack Router Link and enables retained Agent Tool runs. */
   renderAgentToolRunLink?: NonNullable<ThinkChatMessagesProps<MessageT>["renderAgentToolRunLink"]>;
   /**
@@ -110,12 +115,11 @@ 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,
   appBarActions,
   appBarLeading,
   appBarTitle,
-  chat,
   className,
+  conversation,
   defaultMobileView,
   defaultWorkbenchView,
   defaultThreadSidebarOpen,
@@ -144,4 +148,4 @@ declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = u
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { ThinkFullApp, ThinkFullAppAgent, ThinkFullAppMobileView, ThinkFullAppPanel, ThinkFullAppPanelContext, ThinkFullAppProps, ThinkFullAppWorkbenchView, ThinkFullAppWorkspaceConfig };
+export { ThinkFullApp, ThinkFullAppAgent, ThinkFullAppConversation, ThinkFullAppMobileView, ThinkFullAppPanel, ThinkFullAppProps, ThinkFullAppWorkbenchView, ThinkFullAppWorkspaceConfig };

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

@@ -4,7 +4,7 @@ import { Button } from "../foundations/Button.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
 import { McpPluginCatalog } from "./McpPluginCatalog.js";
-import { c as resolveThinkApprovalProps, l as useSourceScopedAgentToolEvents, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-Dsm1xF3a.js";
+import { c as resolveThinkApprovalProps, l as useSourceScopedAgentToolEvents, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-ldbrNiAx.js";
 import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../../WorkspaceLink-DZeLe_jN.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { useWorkspace } from "./Workspace.js";
@@ -44,11 +44,12 @@ function PluginsPanel({ config }) {
 		children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, { children: /* @__PURE__ */ jsx(McpPluginCatalog, { ...config }) }), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })]
 	});
 }
-/** Combines ThinkChat with an optional resizable workbench shell. */
-function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat, className, defaultMobileView, defaultWorkbenchView, defaultThreadSidebarOpen, hideAppBarInWorkbench = false, messages, mobileView, onMobileViewChange, onThreadSidebarOpenChange, onWorkbenchViewChange, plugins, ref, renderAgentToolRunLink, renderExecutionRunLink, selectedExecutionRun = null, showMobileViewSwitch = true, sourceKey, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchPanels, workbenchView, workspace, ...props }) {
-	const appRef = React.useRef(null);
-	const workbenchPanelRef = React.useRef(null);
-	const pendingPanelFocusRef = React.useRef(null);
+/**
+* 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.
+*/
+function ThinkFullAppThreadChat({ agent, chat, messages, renderAgentToolRunLink, sourceKey }) {
+	const agentTools = useSourceScopedAgentToolEvents(agent);
 	const approvals = useThinkPendingExecutionApprovals(agent.stub, sourceKey, `${chat.messages.length}:${chat.status}`, messages?.approvalsEnabled !== false);
 	const resolvedMessages = React.useMemo(() => {
 		const approvalProps = resolveThinkApprovalProps({
@@ -70,9 +71,23 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 		approvals.refreshPendingApprovals,
 		messages
 	]);
+	return /* @__PURE__ */ jsx(ThinkChat.Provider, {
+		chat,
+		agentTools,
+		children: /* @__PURE__ */ jsx(ThinkChat.Messages, {
+			...resolvedMessages,
+			renderAgentToolRunLink
+		})
+	});
+}
+/** Combines ThinkChat with an optional resizable workbench shell. */
+function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, conversation, defaultMobileView, defaultWorkbenchView, defaultThreadSidebarOpen, hideAppBarInWorkbench = false, messages, mobileView, onMobileViewChange, onThreadSidebarOpenChange, onWorkbenchViewChange, plugins, ref, renderAgentToolRunLink, renderExecutionRunLink, selectedExecutionRun = null, showMobileViewSwitch = true, sourceKey, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchPanels, workbenchView, workspace, ...props }) {
+	const agent = conversation?.agent;
+	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 agentTools = useSourceScopedAgentToolEvents(agent);
 	const requestedMobileView = mobileView ?? innerMobileView;
 	const requestedWorkbenchView = workbenchView ?? innerWorkbenchView;
 	const setWorkbenchView = React.useCallback((next) => {
@@ -86,15 +101,6 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 	const updateAppView = React.useCallback((update) => {
 		React.startTransition(update);
 	}, []);
-	const panelContext = React.useMemo(() => ({
-		agent,
-		chat,
-		workspace
-	}), [
-		agent,
-		chat,
-		workspace
-	]);
 	const availableWorkbenchPanels = [];
 	if (workspace !== void 0) availableWorkbenchPanels.push({
 		id: "files",
@@ -102,11 +108,11 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 		icon: /* @__PURE__ */ jsx(FileIcon, {}),
 		render: () => /* @__PURE__ */ jsx(WorkspacePanel, { config: workspace })
 	});
-	if (renderExecutionRunLink) availableWorkbenchPanels.push({
+	if (renderExecutionRunLink && agent) availableWorkbenchPanels.push({
 		id: "execution",
 		label: "Execution",
 		icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
-		render: ({ agent }) => /* @__PURE__ */ jsx(React.Suspense, {
+		render: () => /* @__PURE__ */ jsx(React.Suspense, {
 			fallback: /* @__PURE__ */ jsx("div", {
 				className: "think-full-app__workbench",
 				role: "status",
@@ -241,13 +247,14 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 						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
-								})
+							children: conversation ? /* @__PURE__ */ jsx(ThinkFullAppThreadChat, {
+								...conversation,
+								messages,
+								renderAgentToolRunLink,
+								sourceKey
+							}) : /* @__PURE__ */ jsx(ThinkChat.Messages, {
+								...messages,
+								renderAgentToolRunLink
 							})
 						})
 					})
@@ -263,7 +270,7 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 								className: "think-full-app__workbench-panel",
 								"data-view": activeWorkbenchView,
 								tabIndex: -1,
-								children: activePanel.render(panelContext)
+								children: activePanel.render()
 							})
 						})
 					})

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

@@ -32,6 +32,8 @@ interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine>
   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;
   /** Starts the selected routine immediately. */
   onRunRoutine?: (routine: TRoutine) => void | Promise<void>;
   /** Activates or pauses the selected app-owned routine. */
@@ -53,6 +55,7 @@ interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine>
  * route and may also use these surfaces independently.
  */
 declare function ThinkRoutineLibrary<TRoutine extends ThinkRoutine = ThinkRoutine>({
+  appBarActions,
   appBarLeading,
   className,
   createRoutineLink,

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

@@ -12,41 +12,45 @@ import { ThinkRoutineDetail } from "./ThinkRoutineDetail.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkRoutineLibrary.tsx
-function RoutineTopBarActions({ busy, onDelete, editLink, onRun, routineName }) {
+function RoutineTopBarActions({ appBarActions, busy, onDelete, editLink, onRun, routineName }) {
 	const [deleteOpen, setDeleteOpen] = React.useState(false);
 	const moreActionsRef = React.useRef(null);
 	const hasMenu = Boolean(editLink || onDelete);
-	if (!onRun && !hasMenu) return null;
+	if (!appBarActions && !onRun && !hasMenu) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(AppTopBar.Trailing, {
 		"aria-label": "Schedule actions",
-		children: [onRun ? /* @__PURE__ */ jsx(AppTopBar.Button, {
-			label: "Run schedule",
-			tooltip: "Run now",
-			disabled: busy,
-			onClick: onRun,
-			children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
-		}) : null, hasMenu ? /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
-			label: "More schedule actions",
-			tooltip: "More actions",
-			disabled: busy,
-			render: /* @__PURE__ */ jsx(Menu.Trigger, {
-				ref: moreActionsRef,
-				unstyled: true
-			}),
-			children: /* @__PURE__ */ jsx(EllipsisIcon, {})
-		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-			align: "end",
-			sideOffset: 4,
-			children: /* @__PURE__ */ jsxs(Menu.Popup, { children: [editLink ? /* @__PURE__ */ jsx(Menu.Item, {
-				render: editLink,
-				children: "Edit schedule"
-			}) : null, onDelete ? /* @__PURE__ */ jsx(Menu.Item, {
-				variant: "destructive",
+		children: [
+			appBarActions,
+			onRun ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+				label: "Run schedule",
+				tooltip: "Run now",
+				disabled: busy,
+				onClick: onRun,
+				children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+			}) : null,
+			hasMenu ? /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
+				label: "More schedule actions",
+				tooltip: "More actions",
 				disabled: busy,
-				onClick: () => setDeleteOpen(true),
-				children: "Delete schedule"
-			}) : null] })
-		}) })] }) : null]
+				render: /* @__PURE__ */ jsx(Menu.Trigger, {
+					ref: moreActionsRef,
+					unstyled: true
+				}),
+				children: /* @__PURE__ */ jsx(EllipsisIcon, {})
+			}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+				align: "end",
+				sideOffset: 4,
+				children: /* @__PURE__ */ jsxs(Menu.Popup, { children: [editLink ? /* @__PURE__ */ jsx(Menu.Item, {
+					render: editLink,
+					children: "Edit schedule"
+				}) : null, onDelete ? /* @__PURE__ */ jsx(Menu.Item, {
+					variant: "destructive",
+					disabled: busy,
+					onClick: () => setDeleteOpen(true),
+					children: "Delete schedule"
+				}) : null] })
+			}) })] }) : null
+		]
 	}), onDelete ? /* @__PURE__ */ jsx(AlertDialog.Root, {
 		open: deleteOpen,
 		onOpenChange: setDeleteOpen,
@@ -80,7 +84,7 @@ function RoutineTopBarActions({ busy, onDelete, editLink, onRun, routineName })
 * and `ThinkRoutineRuns`; consumers compose `ThinkRoutineForm` in their create
 * route and may also use these surfaces independently.
 */
-function ThinkRoutineLibrary({ appBarLeading, className, createRoutineLink, error: catalogError, onDeleteRoutine, onRoutineEnabledChange, onRunRoutine, renderEditRoutineLink, renderRoutineLink, renderRoutineDetail, renderRunLink, ref, routines, selectedRoutineId, showOwner = true, ...props }) {
+function ThinkRoutineLibrary({ appBarActions, appBarLeading, className, createRoutineLink, error: catalogError, onDeleteRoutine, onRoutineEnabledChange, onRunRoutine, renderEditRoutineLink, renderRoutineLink, renderRoutineDetail, renderRunLink, ref, routines, selectedRoutineId, showOwner = true, ...props }) {
 	const [busy, setBusy] = React.useState(false);
 	const [announcement, setAnnouncement] = React.useState("");
 	const [actionError, setActionError] = React.useState(null);
@@ -140,6 +144,7 @@ function ThinkRoutineLibrary({ appBarLeading, className, createRoutineLink, erro
 							children: [/* @__PURE__ */ jsx("span", { children: selectedRoutine.name }), /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })]
 						}) : null] }),
 						/* @__PURE__ */ jsx(RoutineTopBarActions, {
+							appBarActions,
 							busy,
 							routineName: selectedRoutine?.name ?? "schedule",
 							editLink: selectedRoutine && renderEditRoutineLink ? renderEditRoutineLink(selectedRoutine) : void 0,

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

@@ -43,7 +43,11 @@ interface ThinkThreadPickerProps extends Omit<React.HTMLAttributes<HTMLElement>,
   renderThreadLink: (thread: ThinkThreadItem) => React.ReactElement;
   /** Optional parent-agent create action, usually `parent.stub.createThread()`. */
   onCreate?: () => void | Promise<void>;
-  /** Handles unmodified primary activation while preserving link modifier behavior. */
+  /**
+   * Notified on unmodified primary activation. The link still navigates — the
+   * route is the selection — so this is for side effects such as closing a
+   * compact drawer, never for performing the selection itself.
+   */
   onSelect?: (thread: ThinkThreadItem) => void;
   /** Optional parent-agent delete action, usually `parent.stub.deleteThread(thread.id)`. */
   onDelete?: (thread: ThinkThreadItem) => void | Promise<void>;

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

@@ -209,9 +209,7 @@ function ThinkThreadPicker({ threads, renderThreadLink, onCreate, onSelect, onDe
 										}),
 										"data-thread-status": thread.status,
 										onClick: onSelect ? (event) => {
-											if (!isPlainPrimaryLinkActivation(event)) return;
-											event.preventDefault();
-											onSelect(thread);
+											if (isPlainPrimaryLinkActivation(event)) onSelect(thread);
 										} : void 0,
 										children: [/* @__PURE__ */ jsx("span", {
 											className: "think-thread-picker__thread-title sigvelo-truncate",

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

@@ -3,7 +3,7 @@ import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceMediaPath, isWorkspaceSkillPath, parseWorkspaceSkill } from "./WorkspaceFile.js";
 import { a as WorkspaceNavigationRestorationBoundary, n as WorkspaceNavigationProvider, o as useRequiredWorkspaceNavigationRestoration, r as resolveWorkspaceLink, t as WorkspaceFileLink } from "../../WorkspaceLink-DZeLe_jN.js";
 import { WorkspaceBrowser } from "./WorkspaceBrowser.js";
-import { t as WorkspaceFileView } from "../../WorkspaceFileView-hd1-cpuz.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-BtzVKAed.js";
 import { useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryKey, workspaceDirectoryQueryOptions, workspaceDirectoryQueryPrefix, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions } from "./Workspace.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -104,8 +104,6 @@ function WorkspaceExplorerContent({ workspace, navigation, className, title = "W
 				path: fileDestination.path,
 				isLoading: selectedPath !== fileDestination.path || loadingPaths.has(fileDestination.path),
 				isRefreshing: isLoading,
-				leading,
-				actions,
 				onRefresh: refresh
 			})
 		}) : /* @__PURE__ */ jsx(WorkspaceBrowser, {

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

@@ -1,2 +1,2 @@
-import { t as WorkspaceFileView } from "../../WorkspaceFileView-hd1-cpuz.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-BtzVKAed.js";
 export { WorkspaceFileView };

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

@@ -1,4 +1,4 @@
-import { w as FolderIcon } from "../../icons-B1Qw05te.js";
+import { R as PaperclipIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
 import { Popover } from "../foundations/Popover.js";
 import { EmptyState } from "../foundations/EmptyState.js";
@@ -26,7 +26,7 @@ function WorkspaceMountManager({ mounts, adding = false, busyMountId = null, err
 	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
 		label: triggerLabel,
 		render: /* @__PURE__ */ jsx(Popover.Trigger, { unstyled: true }),
-		children: /* @__PURE__ */ jsx(FolderIcon, {})
+		children: /* @__PURE__ */ jsx(PaperclipIcon, {})
 	}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
 		side: "bottom",
 		align: "end",

package/dist/components/general-purpose/ResizableSidePanel.d.ts

@@ -18,6 +18,10 @@ interface ResizableSidePanelRootProps extends React.HTMLAttributes<HTMLDivElemen
   keyboardStep?: number;
   /** Called whenever pointer or keyboard input changes the panel size. */
   onSizeChange?: (size: number) => void;
+  /** Pointer size below which the consumer should collapse the panel. */
+  collapseThreshold?: number;
+  /** Called once pointer resizing crosses `collapseThreshold`. */
+  onCollapse?: () => void;
 }
 interface ResizableSidePanelHandleProps extends Omit<SeparatorProps, "aria-label" | "aria-orientation" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "decorative" | "orientation"> {}
 /**
@@ -27,12 +31,14 @@ interface ResizableSidePanelHandleProps extends Omit<SeparatorProps, "aria-label
 declare function ResizableSidePanelRoot({
   children,
   className,
+  collapseThreshold,
   defaultSize,
   keyboardStep,
   label,
   maxSize,
   minSize,
   onSizeChange,
+  onCollapse,
   ref,
   side,
   style,

package/dist/components/general-purpose/ResizableSidePanel.js

@@ -14,7 +14,7 @@ function panelSizeDelta(physicalDelta, side, direction) {
 * Shared sizing seam for a logical start- or end-side panel. Consumers retain
 * ownership of panel placement, visibility, compact behavior, and top bars.
 */
-function ResizableSidePanelRoot({ children, className, defaultSize, keyboardStep = 24, label, maxSize, minSize, onSizeChange, ref, side = "start", style, ...props }) {
+function ResizableSidePanelRoot({ children, className, collapseThreshold, defaultSize, keyboardStep = 24, label, maxSize, minSize, onSizeChange, onCollapse, ref, side = "start", style, ...props }) {
 	const [size, setInnerSize] = React.useState(() => clamp(defaultSize, minSize, maxSize));
 	const cleanupResizeRef = React.useRef(null);
 	const setSize = React.useCallback((nextSize) => {
@@ -41,7 +41,13 @@ function ResizableSidePanelRoot({ children, className, defaultSize, keyboardStep
 		const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? "rtl" : "ltr";
 		const onMove = (move) => {
 			if (move.pointerId !== pointerId) return;
-			setSize(startSize + panelSizeDelta(move.clientX - startX, side, direction));
+			const nextSize = startSize + panelSizeDelta(move.clientX - startX, side, direction);
+			if (collapseThreshold !== void 0 && nextSize < collapseThreshold) {
+				onCollapse?.();
+				stopResize();
+				return;
+			}
+			setSize(nextSize);
 		};
 		const onEnd = (end) => {
 			if (end.pointerId === pointerId) stopResize();
@@ -58,6 +64,8 @@ function ResizableSidePanelRoot({ children, className, defaultSize, keyboardStep
 		window.addEventListener("pointerup", onEnd);
 		window.addEventListener("pointercancel", onEnd);
 	}, [
+		collapseThreshold,
+		onCollapse,
 		setSize,
 		side,
 		size,

package/dist/components/general-purpose/SetupChecklist.d.ts

@@ -15,6 +15,8 @@ interface SetupChecklistGroupProps<Id extends string = string> {
   /** Quiet visible heading above the checklist rows. */
   label: React.ReactNode;
   entries: readonly SetupChecklistEntry<Id>[];
+  /** Whether rows are visible when the containing menu first opens. */
+  defaultOpen?: boolean;
   /** Called with the selected entry id — complete rows re-run their setup. */
   onSelect: (id: Id) => void;
 }
@@ -22,6 +24,7 @@ interface SetupChecklistGroupProps<Id extends string = string> {
 declare function SetupChecklistGroup<Id extends string = string>({
   label,
   entries,
+  defaultOpen,
   onSelect
 }: SetupChecklistGroupProps<Id>): React.JSX.Element;
 interface SetupChecklistActionProps<Id extends string = string> extends SetupChecklistGroupProps<Id> {

package/dist/components/general-purpose/SetupChecklist.js

@@ -1,23 +1,28 @@
 import { H as PlusIcon, d as CheckIcon, tt as WarningIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
 import { Menu } from "../foundations/Menu.js";
+import { t as MenuDisclosureGroup } from "../../MenuDisclosureGroup-yJRq7YXa.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/SetupChecklist.tsx
 /** Checklist rows for any Menu surface (composer plus menu, tray menu). */
-function SetupChecklistGroup({ label, entries, onSelect }) {
-	return /* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(Menu.GroupLabel, { children: label }), entries.map((entry) => /* @__PURE__ */ jsxs(Menu.Item, {
-		"aria-label": `${entry.name}, ${entry.complete ? "complete" : "not set up"}`,
-		onClick: () => onSelect(entry.id),
-		children: [
-			entry.icon,
-			/* @__PURE__ */ jsx("span", {
-				className: "sigvelo-truncate-grow",
-				children: entry.description
-			}),
-			entry.complete ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" })
-		]
-	}, entry.id))] });
+function SetupChecklistGroup({ label, entries, defaultOpen = false, onSelect }) {
+	return /* @__PURE__ */ jsx(MenuDisclosureGroup, {
+		label,
+		defaultOpen,
+		children: entries.map((entry) => /* @__PURE__ */ jsxs(Menu.Item, {
+			"aria-label": `${entry.name}, ${entry.complete ? "complete" : "not set up"}`,
+			onClick: () => onSelect(entry.id),
+			children: [
+				entry.icon,
+				/* @__PURE__ */ jsx("span", {
+					className: "sigvelo-truncate-grow",
+					children: entry.description
+				}),
+				entry.complete ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" })
+			]
+		}, entry.id))
+	});
 }
 /** Progress-aware tray trigger opening the checklist in its own menu. */
 function SetupChecklistAction({ actionLabel, label, entries, onSelect }) {
@@ -35,6 +40,7 @@ function SetupChecklistAction({ actionLabel, label, entries, onSelect }) {
 		align: "start",
 		sideOffset: 4,
 		children: /* @__PURE__ */ jsx(Menu.Popup, { children: /* @__PURE__ */ jsx(SetupChecklistGroup, {
+			defaultOpen: true,
 			label,
 			entries,
 			onSelect

package/dist/components/nanites/AgentToolDetail.js

@@ -3,7 +3,7 @@ import { r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { t as ThinkChat } from "../../ThinkChat-Dsm1xF3a.js";
+import { t as ThinkChat } from "../../ThinkChat-ldbrNiAx.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
 import * as React from "react";

package/dist/styles/file-tree.css

@@ -81,6 +81,7 @@
   font-family: inherit;
   font-size: var(--sigvelo-text-compact);
   text-align: start;
+  text-decoration: none;
   cursor: pointer;
   border-radius: var(--sigvelo-radius-sm);
   transition: background-color var(--sigvelo-motion-duration-interaction)

package/dist/styles/index.css

@@ -49,6 +49,7 @@
 @import "./mcp-server-picker.css" layer(components);
 @import "./media-preview-card.css" layer(components);
 @import "./menu.css" layer(components);
+@import "./menu-disclosure-group.css" layer(components);
 @import "./menubar.css" layer(components);
 @import "./message-scroller.css" layer(components);
 @import "./meter.css" layer(components);

package/dist/styles/mcp-server-picker.css

@@ -2,9 +2,7 @@
   margin-block-start: var(--sigvelo-spacing-0-5);
 }
 
-.mcp-server-picker__group-label {
-  padding-block: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-0-5);
-  padding-inline: var(--sigvelo-spacing-2);
+.mcp-server-picker__group-trigger {
   color: var(--sigvelo-color-text);
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-normal);

package/dist/styles/menu-disclosure-group.css

@@ -0,0 +1,13 @@
+.menu-disclosure-group__trigger > svg {
+  flex: 0 0 auto;
+  transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.menu-disclosure-group__trigger[aria-expanded="true"] > svg {
+  rotate: 180deg;
+}
+
+.menu-disclosure-group__items {
+  display: flex;
+  flex-direction: column;
+}

package/dist/styles/think-full-app.css

@@ -11,7 +11,7 @@
   position: relative;
   container: think-full-app / inline-size;
   block-size: 100%;
-  min-block-size: 32rem;
+  min-block-size: 0;
   min-inline-size: 0;
   display: grid;
   grid-template-rows: minmax(0, 1fr);

package/dist/styles/workspace-explorer.css

@@ -125,15 +125,6 @@
   position: relative;
 }
 
-.workspace-explorer__file-close {
-  position: absolute;
-  z-index: 2;
-  inset-block-start: calc(var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2));
-  inset-inline-end: var(--sigvelo-spacing-2);
-  background-color: var(--sigvelo-color-surface-raised);
-  box-shadow: var(--sigvelo-elevation-floating);
-}
-
 .workspace-explorer__filter {
   --sigvelo-recipe-control-height: var(--sigvelo-density-compact-control-height);
   --sigvelo-recipe-control-font-size: var(--sigvelo-density-compact-control-font-size);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -58,7 +58,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.30.0"
+    "@mcp-b/design-tokens": "0.31.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.230",