@mcp-b/react-components 0.5.3 → 0.5.5

package/dist/{CodeBlock-D-a84xBL.js → CodeBlock-BK0sOAbV.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-9UtZwb0J.js";
 import { Select, SelectContent, SelectItem, SelectList, SelectTrigger, SelectValue } from "./components/Select.js";
-import { t as CopyButton } from "./copy-button-BmJEAKuP.js";
+import { t as CopyButton } from "./copy-button-CB2MWcau.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";

package/dist/{FileTree-D8rtTLgK.js → FileTree-BWQZ0FSi.js}

@@ -1,5 +1,5 @@
 import { t as cx } from "./class-names-9UtZwb0J.js";
-import { c as ChevronRightIcon, g as FolderOpenIcon, h as FolderIcon, m as FileIcon } from "./icons-CZRH4FVH.js";
+import { c as ChevronRightIcon, g as FolderOpenIcon, h as FolderIcon, m as FileIcon } from "./icons-BCNawx-T.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/use-file-tree-nav.ts

package/dist/components/Activity.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { c as ChevronRightIcon } from "../icons-CZRH4FVH.js";
+import { c as ChevronRightIcon } from "../icons-BCNawx-T.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Activity.tsx

package/dist/components/AgentChat.d.ts

@@ -30,6 +30,8 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   emptyState?: React.ReactNode;
   /** Extra controls rendered in the composer toolbar. */
   composerTools?: React.ReactNode;
+  /** Extra rows rendered in the built-in plus menu after files. */
+  composerAddMenuItems?: React.ReactNode;
   /**
    * Transient status rendered between the transcript and the composer —
    * e.g. a "Reconnecting…" pill. `ThinkChat.Messages` fills this from the
@@ -86,6 +88,7 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   disabled,
   emptyState,
   composerTools,
+  composerAddMenuItems,
   notice,
   onRegenerate,
   onApprovalResponse,

package/dist/components/AgentChat.js

@@ -1,10 +1,10 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { D as RefreshIcon, E as PlusIcon } from "../icons-CZRH4FVH.js";
+import { D as PlusIcon, O as RefreshIcon } from "../icons-BCNawx-T.js";
 import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
 import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton } from "./Conversation.js";
 import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
-import { PromptInput, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
+import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -18,6 +18,17 @@ function AgentChatAttachButton() {
 		children: /* @__PURE__ */ jsx(PlusIcon, {})
 	});
 }
+function AgentChatAddMenu({ children }) {
+	if (!children) return /* @__PURE__ */ jsx(AgentChatAttachButton, {});
+	return /* @__PURE__ */ jsxs(PromptInputActionMenu, { children: [/* @__PURE__ */ jsx(PromptInputActionMenuTrigger, { "aria-label": "Add context" }), /* @__PURE__ */ jsxs(PromptInputActionMenuContent, {
+		side: "top",
+		align: "start",
+		sideOffset: 12,
+		collisionPadding: 8,
+		className: "agent-chat__add-menu",
+		children: [/* @__PURE__ */ jsx(PromptInputActionAddAttachments, {}), children]
+	})] });
+}
 function isCompactedPart(message, part, partIndex) {
 	const metadata = message.metadata;
 	if (isTextUIPart(part)) return Array.isArray(metadata?.compactedTextParts) && metadata.compactedTextParts.includes(partIndex);
@@ -88,7 +99,7 @@ function renderDefaultPart(part) {
 * transport. Use it directly with plain AI SDK `useChat` or a read-only
 * transcript; if you have a Cloudflare Think agent, use `ThinkChat` instead.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, notice, onRegenerate, onApprovalResponse, executionApprovals, contextWindow, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, composerAddMenuItems, notice, onRegenerate, onApprovalResponse, executionApprovals, contextWindow, renderPart, renderMessageAfter, ref }) {
 	const handleSubmit = React.useCallback((message) => {
 		onSubmit?.(message);
 	}, [onSubmit]);
@@ -194,7 +205,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 						disabled
 					}) }),
 					/* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsxs(PromptInputTools, { children: [
-						/* @__PURE__ */ jsx(AgentChatAttachButton, {}),
+						/* @__PURE__ */ jsx(AgentChatAddMenu, { children: composerAddMenuItems }),
 						approvalsWired ? /* @__PURE__ */ jsx(PromptInputPermissionSelector, {
 							value: permissionMode,
 							onValueChange: setPermissionMode

package/dist/components/AgentConnection.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { y as LinkIcon } from "../icons-CZRH4FVH.js";
+import { y as LinkIcon } from "../icons-BCNawx-T.js";
 import { Popover } from "./Popover.js";
 import { Button } from "./Button.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-D-a84xBL.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-BK0sOAbV.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AgentConnection.tsx

package/dist/components/Artifact.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { P as XIcon } from "../icons-CZRH4FVH.js";
+import { F as XIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import "react";

package/dist/components/BrowserLiveView.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { b as MaximizeIcon, k as SpinnerIcon } from "../icons-CZRH4FVH.js";
+import { A as SpinnerIcon, b as MaximizeIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { Dialog, DialogContent, DialogTitle } from "./Dialog.js";
 import { Badge } from "./Badge.js";

package/dist/components/BrowserReplay.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { C as PauseIcon, T as PlayIcon } from "../icons-CZRH4FVH.js";
+import { E as PlayIcon, w as PauseIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "./Slider.js";
 import * as React from "react";

package/dist/components/ChainOfThought.d.ts

@@ -1,5 +1,5 @@
 import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
-import { _ as IconProps } from "../icons-CmO7-pNY.js";
+import { _ as IconProps } from "../icons-BYpJY6L2.js";
 import * as React from "react";
 
 //#region src/components/ChainOfThought.d.ts

package/dist/components/ChainOfThought.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, c as ChevronRightIcon, k as SpinnerIcon, u as DotIcon } from "../icons-CZRH4FVH.js";
+import { A as SpinnerIcon, a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-BCNawx-T.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChainOfThought.tsx

package/dist/components/CodeBlock.js

@@ -1,2 +1,2 @@
-import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-D-a84xBL.js";
+import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-BK0sOAbV.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle, highlightCode };

package/dist/components/Commit.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, c as ChevronRightIcon, l as CopyIcon, m as FileIcon } from "../icons-CZRH4FVH.js";
+import { a as CheckIcon, c as ChevronRightIcon, l as CopyIcon, m as FileIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Avatar } from "./Avatar.js";

package/dist/components/ContextMenu.js

@@ -1,4 +1,4 @@
-import { a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-CZRH4FVH.js";
+import { a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-BCNawx-T.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";

package/dist/components/Conversation.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { d as DownloadIcon, t as ArrowDownIcon } from "../icons-CZRH4FVH.js";
+import { d as DownloadIcon, t as ArrowDownIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { useStickToBottom } from "./useStickToBottom.js";
 import * as React from "react";

package/dist/components/Dialog.js

@@ -1,4 +1,4 @@
-import { P as XIcon } from "../icons-CZRH4FVH.js";
+import { F as XIcon } from "../icons-BCNawx-T.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";

package/dist/components/EnvironmentVariables.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, f as EyeIcon, l as CopyIcon, p as EyeOffIcon } from "../icons-CZRH4FVH.js";
+import { a as CheckIcon, f as EyeIcon, l as CopyIcon, p as EyeOffIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";

package/dist/components/FileTree.js

@@ -1,2 +1,2 @@
-import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-D8rtTLgK.js";
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-BWQZ0FSi.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

package/dist/components/McpServerPicker.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { Icon } from "@modelcontextprotocol/sdk/types.js";
+
+//#region src/components/McpServerPicker.d.ts
+type McpServerPickerStatus = "connecting" | "needs-auth" | "authenticating" | "ready" | "failed";
+interface McpServerCard {
+  id: string;
+  name: string;
+  url: string;
+  description?: string;
+  category?: string;
+  icon?: React.ReactNode | string | Icon;
+  status?: McpServerPickerStatus;
+  statusLabel?: string;
+}
+interface McpServerPickerProps {
+  /** MCP servers to show in the plus-menu picker. */
+  servers: readonly McpServerCard[];
+  /** Called when the user chooses a server; hosts own OAuth and connection state. */
+  onConnect: (server: McpServerCard) => void | Promise<void>;
+  /** Offset from the plus trigger to the menu, useful for prompt composers. */
+  sideOffset?: number;
+}
+type McpServerPickerItemsProps = Pick<McpServerPickerProps, "servers" | "onConnect">;
+/**
+ * Prompt plus-menu picker for choosing an MCP server and handing connection
+ * work back to the host app.
+ */
+declare function McpServerPicker({
+  servers,
+  onConnect,
+  sideOffset
+}: McpServerPickerProps): React.JSX.Element;
+declare function McpServerPickerItems({
+  servers,
+  onConnect
+}: McpServerPickerItemsProps): React.JSX.Element | React.JSX.Element[];
+//#endregion
+export { McpServerCard, McpServerPicker, McpServerPickerItems, McpServerPickerItemsProps, McpServerPickerProps, McpServerPickerStatus };

package/dist/components/McpServerPicker.js

@@ -0,0 +1,140 @@
+import { A as SpinnerIcon, D as PlusIcon, N as WarningIcon, a as CheckIcon } from "../icons-BCNawx-T.js";
+import { Button } from "./Button.js";
+import { MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRoot, MenuShortcut, MenuTrigger } from "./Menu.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/McpServerPicker.tsx
+/**
+* Prompt plus-menu picker for choosing an MCP server and handing connection
+* work back to the host app.
+*/
+function McpServerPicker({ servers, onConnect, sideOffset = 80 }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "mcp-server-picker",
+		children: /* @__PURE__ */ jsxs(MenuRoot, { children: [/* @__PURE__ */ jsx(MenuTrigger, { render: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			color: "neutral",
+			size: "icon-xs",
+			className: "mcp-server-picker__trigger",
+			"aria-label": "Add MCP server",
+			children: /* @__PURE__ */ jsx(PlusIcon, {})
+		}) }), /* @__PURE__ */ jsx(MenuContent, {
+			side: "top",
+			align: "start",
+			sideOffset,
+			collisionPadding: 8,
+			"aria-label": "MCP servers",
+			className: "mcp-server-picker__popup",
+			children: /* @__PURE__ */ jsx(McpServerPickerItems, {
+				servers,
+				onConnect
+			})
+		})] })
+	});
+}
+function McpServerPickerItems({ servers, onConnect }) {
+	const groups = groupServers(servers);
+	const showHeadings = groups.some((group) => group.category);
+	if (servers.length === 0) return /* @__PURE__ */ jsx(MenuItem, {
+		disabled: true,
+		className: "mcp-server-picker__empty",
+		children: "No MCP servers available."
+	});
+	return groups.map((group) => /* @__PURE__ */ jsxs(MenuGroup, {
+		className: "mcp-server-picker__group",
+		children: [showHeadings ? /* @__PURE__ */ jsx(MenuGroupLabel, { children: group.category || "Servers" }) : null, group.servers.map((server) => /* @__PURE__ */ jsx(McpServerPickerRow, {
+			server,
+			onConnect
+		}, server.id))]
+	}, group.category));
+}
+function McpServerPickerRow({ server, onConnect }) {
+	const descriptionId = React.useId();
+	const statusText = server.statusLabel ?? getStatusLabel(server.status);
+	const busy = server.status === "connecting" || server.status === "authenticating";
+	return /* @__PURE__ */ jsxs(MenuItem, {
+		className: "mcp-server-picker__row",
+		"data-status": server.status,
+		"aria-busy": busy || void 0,
+		"aria-describedby": server.description ? descriptionId : void 0,
+		onClick: () => void onConnect(server),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "mcp-server-picker__icon",
+				children: renderIcon(server.icon, server.name)
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "mcp-server-picker__copy",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "mcp-server-picker__name",
+					children: server.name
+				}), server.description ? /* @__PURE__ */ jsx("span", {
+					id: descriptionId,
+					className: "mcp-server-picker__description",
+					children: server.description
+				}) : null]
+			}),
+			statusText ? /* @__PURE__ */ jsxs(MenuShortcut, {
+				className: "mcp-server-picker__meta",
+				children: [/* @__PURE__ */ jsx(StatusIcon, { status: server.status }), /* @__PURE__ */ jsx("span", { children: statusText })]
+			}) : null
+		]
+	});
+}
+function StatusIcon({ status }) {
+	if (status === "ready") return /* @__PURE__ */ jsx(CheckIcon, { size: 14 });
+	if (status === "failed" || status === "needs-auth") return /* @__PURE__ */ jsx(WarningIcon, { size: 14 });
+	if (status === "connecting" || status === "authenticating") return /* @__PURE__ */ jsx(SpinnerIcon, {
+		className: "mcp-server-picker__spinner",
+		size: 14
+	});
+	return null;
+}
+function getStatusLabel(status) {
+	if (status === "ready") return "Connected";
+	if (status === "failed") return "Failed";
+	if (status === "needs-auth") return "Authorize";
+	if (status === "authenticating") return "Authenticating";
+	if (status === "connecting") return "Connecting";
+	return "";
+}
+function renderIcon(icon, name) {
+	if (React.isValidElement(icon)) return icon;
+	if (typeof icon === "string") return /* @__PURE__ */ jsx(IconImage, { src: icon });
+	if (isMcpIcon(icon)) return /* @__PURE__ */ jsx(IconImage, { src: icon.src });
+	return /* @__PURE__ */ jsx("span", {
+		className: "mcp-server-picker__fallback-icon",
+		children: name.slice(0, 1)
+	});
+}
+function IconImage({ src }) {
+	return /* @__PURE__ */ jsx("img", {
+		src,
+		alt: "",
+		loading: "lazy",
+		decoding: "async",
+		referrerPolicy: "no-referrer"
+	});
+}
+function isMcpIcon(icon) {
+	return Boolean(icon && typeof icon === "object" && "src" in icon && typeof icon.src === "string");
+}
+function groupServers(servers) {
+	const groups = [];
+	for (const server of servers) {
+		const category = server.category ?? "";
+		let group = groups.find((candidate) => candidate.category === category);
+		if (!group) {
+			group = {
+				category,
+				servers: []
+			};
+			groups.push(group);
+		}
+		group.servers.push(server);
+	}
+	return groups;
+}
+//#endregion
+export { McpServerPicker, McpServerPickerItems };

package/dist/components/Menubar.js

@@ -1,4 +1,4 @@
-import { a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-CZRH4FVH.js";
+import { a as CheckIcon, c as ChevronRightIcon, u as DotIcon } from "../icons-BCNawx-T.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";

package/dist/components/Message.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { m as FileIcon, n as ArrowLeftIcon, r as ArrowRightIcon } from "../icons-CZRH4FVH.js";
+import { m as FileIcon, n as ArrowLeftIcon, r as ArrowRightIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { t as AttachmentPreview } from "../attachment-preview-ChtC3HiU.js";

package/dist/components/ModelSelector.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as SearchIcon, o as ChevronDownIcon } from "../icons-CZRH4FVH.js";
+import { k as SearchIcon, o as ChevronDownIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { Dialog, DialogBackdrop, DialogPopup, DialogPortal, DialogTitle, DialogTrigger } from "./Dialog.js";
 import * as React from "react";

package/dist/components/NavigationMenu.js

@@ -1,4 +1,4 @@
-import { o as ChevronDownIcon } from "../icons-CZRH4FVH.js";
+import { o as ChevronDownIcon } from "../icons-BCNawx-T.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";

package/dist/components/PromptInput.d.ts

@@ -1,6 +1,6 @@
 import { A as SelectTriggerProps, M as SelectValueProps, S as SelectProps, f as SelectOption, j as SelectValue, r as SelectContentProps, s as SelectItemProps, t as Select } from "../Select-CRsKCJ9x.js";
 import { c as ComboboxGroup, d as ComboboxLabel, f as ComboboxList, g as ComboboxTrigger, h as ComboboxSeparator, l as ComboboxInput, m as ComboboxPositioner, p as ComboboxPopup, s as ComboboxEmpty, t as Combobox, u as ComboboxItem } from "../Combobox-D9anamNr.js";
-import { h as MenuItemProps, w as MenuProps, y as MenuPopupProps } from "../Menu-B5vDqZe_.js";
+import { h as MenuItemProps, l as MenuContentProps, w as MenuProps } from "../Menu-B5vDqZe_.js";
 import { c as TabsList, n as TabPanel, t as Tab } from "../Tabs-D9EAq09D.js";
 import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
 import * as React from "react";
@@ -261,7 +261,7 @@ declare function PromptInputActionMenuTrigger({
   children,
   ...props
 }: PromptInputActionMenuTriggerProps): React.JSX.Element;
-type PromptInputActionMenuContentProps = MenuPopupProps;
+type PromptInputActionMenuContentProps = MenuContentProps;
 declare function PromptInputActionMenuContent({
   className,
   children,

package/dist/components/PromptInput.js

@@ -1,10 +1,10 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as SquareIcon, E as PlusIcon, M as WarningIcon, P as XIcon, S as MonitorIcon, _ as ImageIcon, i as ArrowUpIcon, k as SpinnerIcon, m as FileIcon, o as ChevronDownIcon, w as PencilIcon } from "../icons-CZRH4FVH.js";
+import { A as SpinnerIcon, C as PaperclipIcon, D as PlusIcon, F as XIcon, N as WarningIcon, S as MonitorIcon, T as PencilIcon, i as ArrowUpIcon, j as SquareIcon, m as FileIcon, o as ChevronDownIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { t as AttachmentPreview } from "../attachment-preview-ChtC3HiU.js";
 import { Combobox, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator } from "./Combobox.js";
-import { MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuTrigger } from "./Menu.js";
+import { MenuContent, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuRoot, MenuTrigger } from "./Menu.js";
 import { Select, SelectContent, SelectItem, SelectPortal, SelectPositioner, SelectTrigger, SelectValue } from "./Select.js";
 import { Tab, TabPanel, TabsList } from "./Tabs.js";
 import * as React from "react";
@@ -538,11 +538,11 @@ function PromptInputActionMenuTrigger({ className, children, ...props }) {
 	}) });
 }
 function PromptInputActionMenuContent({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(MenuPositioner, { children: /* @__PURE__ */ jsx(MenuPopup, {
+	return /* @__PURE__ */ jsx(MenuContent, {
 		className: cx("prompt-input__action-menu", className),
 		...props,
 		children
-	}) }) });
+	});
 }
 function PromptInputActionMenuItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(MenuItem, {
@@ -550,7 +550,7 @@ function PromptInputActionMenuItem({ className, ...props }) {
 		...props
 	});
 }
-function PromptInputActionAddAttachments({ label = "Add photos or files", onClick, children, ...props }) {
+function PromptInputActionAddAttachments({ label = "Files and folders", onClick, children, ...props }) {
 	const attachments = usePromptInputAttachments();
 	return /* @__PURE__ */ jsx(PromptInputActionMenuItem, {
 		...props,
@@ -558,7 +558,7 @@ function PromptInputActionAddAttachments({ label = "Add photos or files", onClic
 			onClick?.(event);
 			if (!event.defaultPrevented) attachments.openFileDialog();
 		},
-		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ImageIcon, { className: "prompt-input__action-menu-icon" }), label] })
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PaperclipIcon, { className: "prompt-input__action-menu-icon" }), label] })
 	});
 }
 function PromptInputActionAddScreenshot({ label = "Take screenshot", onClick, children, ...props }) {

package/dist/components/Queue.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, c as ChevronRightIcon, m as FileIcon, u as DotIcon } from "../icons-CZRH4FVH.js";
+import { a as CheckIcon, c as ChevronRightIcon, m as FileIcon, u as DotIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { Badge } from "./Badge.js";
 import { ScrollArea } from "./ScrollArea.js";

package/dist/components/Reasoning.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { c as ChevronRightIcon } from "../icons-CZRH4FVH.js";
+import { c as ChevronRightIcon } from "../icons-BCNawx-T.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cjk } from "@streamdown/cjk";

package/dist/components/Select.js

@@ -1,4 +1,4 @@
-import { a as CheckIcon, i as ArrowUpIcon, t as ArrowDownIcon } from "../icons-CZRH4FVH.js";
+import { a as CheckIcon, i as ArrowUpIcon, t as ArrowDownIcon } from "../icons-BCNawx-T.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/Sources.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { c as ChevronRightIcon, y as LinkIcon } from "../icons-CZRH4FVH.js";
+import { c as ChevronRightIcon, y as LinkIcon } from "../icons-BCNawx-T.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Sources.tsx

package/dist/components/Stepper.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { a as CheckIcon, k as SpinnerIcon } from "../icons-CZRH4FVH.js";
+import { A as SpinnerIcon, a as CheckIcon } from "../icons-BCNawx-T.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Stepper.tsx

package/dist/components/Task.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as SearchIcon, c as ChevronRightIcon, m as FileIcon } from "../icons-CZRH4FVH.js";
+import { c as ChevronRightIcon, k as SearchIcon, m as FileIcon } from "../icons-BCNawx-T.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Task.tsx

package/dist/components/Terminal.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { P as XIcon, j as TerminalIcon } from "../icons-CZRH4FVH.js";
+import { F as XIcon, M as TerminalIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
-import { t as CopyButton } from "../copy-button-BmJEAKuP.js";
+import { t as CopyButton } from "../copy-button-CB2MWcau.js";
 import { Badge } from "./Badge.js";
 import { ScrollArea } from "./ScrollArea.js";
 import * as React from "react";

package/dist/components/TestResults.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { P as XIcon, a as CheckIcon, c as ChevronRightIcon, k as SpinnerIcon } from "../icons-CZRH4FVH.js";
+import { A as SpinnerIcon, F as XIcon, a as CheckIcon, c as ChevronRightIcon } from "../icons-BCNawx-T.js";
 import { Badge } from "./Badge.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/ThinkChat.d.ts

@@ -31,6 +31,8 @@ interface ThinkChatMessagesProps extends ThinkChatActivityRendererOptions {
   emptyState?: React.ReactNode;
   /** Extra controls rendered inside the composer, next to the send button. */
   composerTools?: React.ReactNode;
+  /** Extra rows rendered in the built-in plus menu after files. */
+  composerAddMenuItems?: AgentChatProps["composerAddMenuItems"];
   /** Composer placeholder text. */
   placeholder?: string;
   /** Rendered after each message (e.g. per-message actions). */

package/dist/components/ThinkChat.js

@@ -1,7 +1,7 @@
 import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityOutput, ActivityPanel, ActivityText, ActivityTrigger } from "./Activity.js";
 import { Tab, TabPanel, Tabs, TabsList } from "./Tabs.js";
 import { AgentChat } from "./AgentChat.js";
-import { t as CodeBlock } from "../CodeBlock-D-a84xBL.js";
+import { t as CodeBlock } from "../CodeBlock-BK0sOAbV.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
 import { BrowserReplay } from "./BrowserReplay.js";
 import { WorkspaceExplorer, inferWorkspaceLanguage, useWorkspace } from "./WorkspaceExplorer.js";

package/dist/components/WebPreview.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { D as RefreshIcon, n as ArrowLeftIcon, o as ChevronDownIcon, r as ArrowRightIcon } from "../icons-CZRH4FVH.js";
+import { O as RefreshIcon, n as ArrowLeftIcon, o as ChevronDownIcon, r as ArrowRightIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";

package/dist/components/WorkspaceExplorer.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { D as RefreshIcon, O as SearchIcon, m as FileIcon, n as ArrowLeftIcon } from "../icons-CZRH4FVH.js";
+import { O as RefreshIcon, k as SearchIcon, m as FileIcon, n as ArrowLeftIcon } from "../icons-BCNawx-T.js";
 import { Button } from "./Button.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-D-a84xBL.js";
-import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-D8rtTLgK.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-BK0sOAbV.js";
+import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-BWQZ0FSi.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/WorkspaceExplorer.tsx

package/dist/components/icons.d.ts

@@ -1,2 +1,2 @@
-import { A as SpinnerIcon, C as MonitorIcon, D as PlusIcon, E as PlayIcon, F as XIcon, M as TerminalIcon, N as WarningIcon, O as RefreshIcon, P as WrenchIcon, S as MinusIcon, T as PencilIcon, _ as IconProps, a as CheckIcon, b as LinkIcon, c as ChevronRightIcon, d as DownloadIcon, f as EyeIcon, g as FolderOpenIcon, h as FolderIcon, i as ArrowUpIcon, j as SquareIcon, k as SearchIcon, l as CopyIcon, m as FileIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeOffIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as ImageIcon, w as PauseIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-CmO7-pNY.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as SearchIcon, C as MonitorIcon, D as PlayIcon, E as PencilIcon, F as WrenchIcon, I as XIcon, M as SquareIcon, N as TerminalIcon, O as PlusIcon, P as WarningIcon, S as MinusIcon, T as PauseIcon, _ as IconProps, a as CheckIcon, b as LinkIcon, c as ChevronRightIcon, d as DownloadIcon, f as EyeIcon, g as FolderOpenIcon, h as FolderIcon, i as ArrowUpIcon, j as SpinnerIcon, k as RefreshIcon, l as CopyIcon, m as FileIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeOffIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as ImageIcon, w as PaperclipIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-BYpJY6L2.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/components/icons.js

@@ -1,2 +1,2 @@
-import { A as SquareIcon, C as PauseIcon, D as RefreshIcon, E as PlusIcon, M as WarningIcon, N as WrenchIcon, O as SearchIcon, P as XIcon, S as MonitorIcon, T as PlayIcon, _ as ImageIcon, a as CheckIcon, b as MaximizeIcon, c as ChevronRightIcon, d as DownloadIcon, f as EyeIcon, g as FolderOpenIcon, h as FolderIcon, i as ArrowUpIcon, j as TerminalIcon, k as SpinnerIcon, l as CopyIcon, m as FileIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeOffIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as InfoIcon, w as PencilIcon, x as MinusIcon, y as LinkIcon } from "../icons-CZRH4FVH.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as SpinnerIcon, C as PaperclipIcon, D as PlusIcon, E as PlayIcon, F as XIcon, M as TerminalIcon, N as WarningIcon, O as RefreshIcon, P as WrenchIcon, S as MonitorIcon, T as PencilIcon, _ as ImageIcon, a as CheckIcon, b as MaximizeIcon, c as ChevronRightIcon, d as DownloadIcon, f as EyeIcon, g as FolderOpenIcon, h as FolderIcon, i as ArrowUpIcon, j as SquareIcon, k as SearchIcon, l as CopyIcon, m as FileIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeOffIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as InfoIcon, w as PauseIcon, x as MinusIcon, y as LinkIcon } from "../icons-BCNawx-T.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/{copy-button-BmJEAKuP.js → copy-button-CB2MWcau.js}

@@ -1,4 +1,4 @@
-import { a as CheckIcon, l as CopyIcon } from "./icons-CZRH4FVH.js";
+import { a as CheckIcon, l as CopyIcon } from "./icons-BCNawx-T.js";
 import { Button } from "./components/Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./components/Tooltip.js";
 import * as React from "react";

package/dist/{icons-CZRH4FVH.js → icons-BCNawx-T.js}

@@ -80,6 +80,10 @@ const FileIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
 	...props,
 	children: [/* @__PURE__ */ jsx("path", { d: "M9 1.5H4A1.5 1.5 0 0 0 2.5 3v10A1.5 1.5 0 0 0 4 14.5h8A1.5 1.5 0 0 0 13.5 13V6L9 1.5Z" }), /* @__PURE__ */ jsx("path", { d: "M9 1.5V6h4.5" })]
 });
+const PaperclipIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
+	...props,
+	children: [/* @__PURE__ */ jsx("path", { d: "M5.25 8.25 9.9 3.6a2.45 2.45 0 0 1 3.5 3.45l-5.6 5.6a3.25 3.25 0 0 1-4.6-4.6l5.4-5.4" }), /* @__PURE__ */ jsx("path", { d: "M6.6 9.6 11 5.2" })]
+});
 const PlusIcon = (props) => /* @__PURE__ */ jsx(Icon, {
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M8 3v10M3 8h10" })
@@ -248,4 +252,4 @@ const MaximizeIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
 	]
 });
 //#endregion
-export { SquareIcon as A, PauseIcon as C, RefreshIcon as D, PlusIcon as E, WarningIcon as M, WrenchIcon as N, SearchIcon as O, XIcon as P, MonitorIcon as S, PlayIcon as T, ImageIcon as _, CheckIcon as a, MaximizeIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, TerminalIcon as j, SpinnerIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, InfoIcon as v, PencilIcon as w, MinusIcon as x, LinkIcon as y };
+export { SpinnerIcon as A, PaperclipIcon as C, PlusIcon as D, PlayIcon as E, XIcon as F, TerminalIcon as M, WarningIcon as N, RefreshIcon as O, WrenchIcon as P, MonitorIcon as S, PencilIcon as T, ImageIcon as _, CheckIcon as a, MaximizeIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, SquareIcon as j, SearchIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, InfoIcon as v, PauseIcon as w, MinusIcon as x, LinkIcon as y };

package/dist/{icons-CmO7-pNY.d.ts → icons-BYpJY6L2.d.ts}

@@ -22,6 +22,7 @@ declare const EyeOffIcon: (props: IconProps) => React.JSX.Element;
 declare const FolderIcon: (props: IconProps) => React.JSX.Element;
 declare const FolderOpenIcon: (props: IconProps) => React.JSX.Element;
 declare const FileIcon: (props: IconProps) => React.JSX.Element;
+declare const PaperclipIcon: (props: IconProps) => React.JSX.Element;
 declare const PlusIcon: (props: IconProps) => React.JSX.Element;
 declare const MinusIcon: (props: IconProps) => React.JSX.Element;
 declare const PlayIcon: (props: IconProps) => React.JSX.Element;
@@ -45,4 +46,4 @@ declare const ImageIcon: (props: IconProps) => React.JSX.Element;
 declare const MonitorIcon: (props: IconProps) => React.JSX.Element;
 declare const MaximizeIcon: (props: IconProps) => React.JSX.Element;
 //#endregion
-export { SpinnerIcon as A, MonitorIcon as C, PlusIcon as D, PlayIcon as E, XIcon as F, TerminalIcon as M, WarningIcon as N, RefreshIcon as O, WrenchIcon as P, MinusIcon as S, PencilIcon as T, IconProps as _, CheckIcon as a, LinkIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, SquareIcon as j, SearchIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, ImageIcon as v, PauseIcon as w, MaximizeIcon as x, InfoIcon as y };
+export { SearchIcon as A, MonitorIcon as C, PlayIcon as D, PencilIcon as E, WrenchIcon as F, XIcon as I, SquareIcon as M, TerminalIcon as N, PlusIcon as O, WarningIcon as P, MinusIcon as S, PauseIcon as T, IconProps as _, CheckIcon as a, LinkIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, SpinnerIcon as j, RefreshIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, ImageIcon as v, PaperclipIcon as w, MaximizeIcon as x, InfoIcon as y };

package/dist/styles/agent-chat.css

@@ -38,6 +38,19 @@
   );
 }
 
+.agent-chat__composer > .prompt-input {
+  max-inline-size: 64rem;
+  margin-inline: auto;
+}
+
+.agent-chat__add-menu {
+  inline-size: min(32rem, calc(100dvw - 1rem));
+  max-block-size: min(28rem, calc(100dvh - 2rem));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
 /* Transient status pill between transcript and composer (recovery, errors). */
 .agent-chat__notice {
   display: flex;

package/dist/styles/index.css

@@ -37,6 +37,7 @@
 @import "./nanite-scene.css" layer(components);
 @import "./number-field.css" layer(components);
 @import "./popover.css" layer(components);
+@import "./mcp-server-picker.css" layer(components);
 @import "./preview-card.css" layer(components);
 @import "./progress.css" layer(components);
 @import "./radio.css" layer(components);

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

@@ -0,0 +1,138 @@
+.mcp-server-picker {
+  display: inline-flex;
+}
+
+.mcp-server-picker__trigger {
+  flex-shrink: 0;
+  color: var(--sigvelo-color-text);
+  background: none;
+}
+
+.mcp-server-picker__trigger:hover:not([data-disabled]),
+.mcp-server-picker__trigger[data-popup-open] {
+  color: var(--sigvelo-color-text);
+  background: none;
+}
+
+.mcp-server-picker__popup {
+  inline-size: min(32rem, calc(100dvw - 1rem));
+  max-block-size: min(28rem, calc(100dvh - 2rem));
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
+}
+
+.mcp-server-picker__group + .mcp-server-picker__group {
+  margin-block-start: 0.25rem;
+}
+
+.mcp-server-picker__row {
+  min-block-size: 2.5rem;
+  gap: 0.75rem;
+  overflow: hidden;
+}
+
+.mcp-server-picker__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.mcp-server-picker__icon > img,
+.mcp-server-picker__icon > svg {
+  display: block;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  object-fit: contain;
+}
+
+.mcp-server-picker__fallback-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.375rem;
+  block-size: 1.375rem;
+  border-radius: var(--sigvelo-radius-sm);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
+  font-size: 0.75rem;
+  font-weight: var(--sigvelo-font-weight-bold);
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.mcp-server-picker__copy {
+  display: flex;
+  align-items: baseline;
+  gap: 0.625rem;
+  min-inline-size: 0;
+}
+
+.mcp-server-picker__name {
+  flex: 0 0 auto;
+  color: var(--sigvelo-color-text);
+}
+
+.mcp-server-picker__description {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--sigvelo-color-text-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mcp-server-picker__meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-inline-size: max-content;
+}
+
+.mcp-server-picker__row[data-status="ready"] .mcp-server-picker__meta {
+  color: var(--sigvelo-color-success-text-on-subtle);
+}
+
+.mcp-server-picker__row[data-status="needs-auth"] .mcp-server-picker__meta {
+  color: var(--sigvelo-color-warning-text-on-subtle);
+}
+
+.mcp-server-picker__row[data-status="failed"] .mcp-server-picker__meta {
+  color: var(--sigvelo-color-danger-text-on-subtle);
+}
+
+.mcp-server-picker__spinner {
+  animation: mcp-server-picker-spin 900ms linear infinite;
+}
+
+.mcp-server-picker__empty {
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.875rem;
+}
+
+@media (width < 30rem) {
+  .mcp-server-picker__copy {
+    flex-direction: column;
+    gap: 0;
+  }
+}
+
+@media (forced-colors: active) {
+  .mcp-server-picker__fallback-icon {
+    border: 1px solid ButtonText;
+  }
+}
+
+@keyframes mcp-server-picker-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "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": {
@@ -49,13 +49,14 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.5.3"
+    "@mcp-b/design-tokens": "0.5.5"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.194",
     "@cloudflare/shell": "^0.4.1",
     "@cloudflare/think": "^0.12.1",
     "@cloudflare/workers-types": "^4.20260630.1",
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-docs": "^10.4.6",
     "@storybook/addon-mcp": "^0.6.0",
@@ -83,6 +84,7 @@
     "@ai-sdk/react": "^3.0.194",
     "@cloudflare/shell": "^0.4.1",
     "@cloudflare/think": "^0.12.1",
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "agents": "^0.17.3",
     "ai": "^6.0.182",
     "react": "^19.0.0",
@@ -98,6 +100,9 @@
     "@cloudflare/think": {
       "optional": true
     },
+    "@modelcontextprotocol/sdk": {
+      "optional": true
+    },
     "agents": {
       "optional": true
     },