@mcp-b/react-components 0.5.3 → 0.5.4

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.js

@@ -1,5 +1,5 @@
 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";

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,34 @@
+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;
+}
+/**
+ * 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;
+//#endregion
+export { McpServerCard, McpServerPicker, McpServerPickerProps, McpServerPickerStatus };

package/dist/components/McpServerPicker.js

@@ -0,0 +1,133 @@
+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 }) {
+	const groups = groupServers(servers);
+	const showHeadings = groups.some((group) => group.category);
+	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: servers.length === 0 ? /* @__PURE__ */ jsx(MenuItem, {
+				disabled: true,
+				className: "mcp-server-picker__empty",
+				children: "No MCP servers available."
+			}) : 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 };

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.js

@@ -1,5 +1,5 @@
 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";
@@ -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.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,11 @@
   );
 }
 
+.agent-chat__composer > .prompt-input {
+  max-inline-size: 64rem;
+  margin-inline: auto;
+}
+
 /* 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.4",
   "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.4"
   },
   "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
     },