@mcp-b/react-components 0.35.0 → 0.37.0

package/dist/{WorkspaceFileView-BmxSbhRu.js → WorkspaceFileView-Cu_ZG6HJ.js}

@@ -1,10 +1,10 @@
-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 { A as MaximizeIcon, d as CheckIcon, h as CodeIcon, r as ArrowLeftIcon, tt as WarningIcon, x as EyeIcon, y as DownloadIcon } from "./icons-B4mGvCvc.js";
 import { r as formatClock } from "./format-DB2mX9DA.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-CM5gfmdq.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-DO4Hdu1R.js";
+import { AppTopBar } from "./components/general-purpose/AppTopBar.js";
 import { inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceSkillPath, parseWorkspaceSkill } from "./components/agents-sdk/WorkspaceFile.js";
 import { c as useWorkspaceNavigationContext, s as useWorkspaceNavigationRestoration } from "./WorkspaceLink-DZeLe_jN.js";
 import { n as createWorkspaceRehypePlugins, t as WorkspaceMessageResponse } from "./WorkspaceMessageResponse-BWbkIELl.js";
-import { AppTopBar } from "./components/general-purpose/AppTopBar.js";
 import { WorkspaceHeader } from "./components/agents-sdk/WorkspaceHeader.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -123,23 +123,17 @@ function useWorkspaceAssetUrl(asset, mimeType) {
 	};
 }
 function WorkspaceAssetActions({ fileName, url, downloadUrl, allowOpen = true }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [allowOpen ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [allowOpen ? /* @__PURE__ */ jsx(AppTopBar.Link, {
 		label: `Open ${fileName} in a new tab`,
-		nativeButton: false,
-		render: /* @__PURE__ */ jsx("a", {
-			href: url,
-			target: "_blank",
-			rel: "noreferrer"
-		}),
+		href: url,
+		target: "_blank",
+		rel: "noreferrer",
 		children: /* @__PURE__ */ jsx(MaximizeIcon, { "aria-hidden": "true" })
-	}) : null, downloadUrl ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+	}) : null, downloadUrl ? /* @__PURE__ */ jsx(AppTopBar.Link, {
 		label: `Download ${fileName}`,
-		nativeButton: false,
-		render: /* @__PURE__ */ jsx("a", {
-			href: downloadUrl,
-			download: fileName,
-			rel: "noreferrer"
-		}),
+		href: downloadUrl,
+		download: fileName,
+		rel: "noreferrer",
 		children: /* @__PURE__ */ jsx(DownloadIcon, { "aria-hidden": "true" })
 	}) : null] });
 }

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

@@ -1,5 +1,5 @@
 import { inferFaviconUrl } from "../../utils/favicon.js";
-import { $ as TerminalIcon, B as PencilIcon, C as FileIcon, F as MonitorIcon, G as SearchIcon, O as InfoIcon, k as LinkIcon, nt as WrenchIcon, tt as WarningIcon } from "../../icons-B1Qw05te.js";
+import { $ as TerminalIcon, B as PencilIcon, C as FileIcon, F as MonitorIcon, G as SearchIcon, O as InfoIcon, k as LinkIcon, nt as WrenchIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/AgentActivity.tsx

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

@@ -1,10 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { C as FileIcon, J as SpinnerIcon, j as McpIcon, rt as XIcon, tt as WarningIcon } from "../../icons-B1Qw05te.js";
-import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
+import { C as FileIcon, J as SpinnerIcon, j as McpIcon, rt as XIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.js";
 import { ActivityHeader } from "../ai-sdk/Activity.js";
-import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
-import { AppIcon } from "../foundations/AppIcon.js";
 import { Button } from "../foundations/Button.js";
+import { AppIcon } from "../foundations/AppIcon.js";
+import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
+import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/AgentActivityPreview.tsx

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

@@ -1,2 +1,2 @@
-import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, o as compactingNotice, r as AgentChatProps, t as AgentChat } from "../../AgentChat-mpacmRU1.js";
+import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, o as compactingNotice, r as AgentChatProps, t as AgentChat } from "../../AgentChat-CVO7xyLC.js";
 export { AgentChat, AgentChatComposerDraft, AgentChatProps, AgentChatRenderMessageContext, PermissionModeControl, compactingNotice };

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

@@ -1,25 +1,26 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { B as PencilIcon, H as PlusIcon, J as SpinnerIcon, L as MoveToFrontIcon, U as QueueIcon, W as RefreshIcon, et as TrashIcon, t as ArchiveIcon } from "../../icons-B1Qw05te.js";
 import { ExpansionStateProvider } from "../ai-sdk/ExpansionState.js";
+import { B as PencilIcon, H as PlusIcon, J as SpinnerIcon, L as MoveToFrontIcon, U as QueueIcon, W as RefreshIcon, et as TrashIcon, t as ArchiveIcon } from "../../icons-B4mGvCvc.js";
 import { Button } from "../foundations/Button.js";
+import { AgentChatMessageEditor } from "../ai-sdk/AgentChatMessageEditor.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { Message, MessageAction, MessageActions } from "../ai-sdk/Message.js";
-import { AgentMessageParts } from "../ai-sdk/AgentMessageParts.js";
-import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "../ai-sdk/Context.js";
-import { EmptyState } from "../foundations/EmptyState.js";
-import { VirtualMessageScroller } from "../ai-sdk/MessageScrollerVirtual.js";
 import { Menu } from "../foundations/Menu.js";
 import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputReferences, PromptInputSubmit, PromptInputTextarea, PromptInputTools, PromptInputTray, usePromptInputAttachments } from "../ai-sdk/PromptInput.js";
 import { AgentChatStartScreen } from "../ai-sdk/AgentChatStartScreen.js";
-import { AgentChatMessageEditor } from "../ai-sdk/AgentChatMessageEditor.js";
+import { Message, MessageAction, MessageActions } from "../ai-sdk/Message.js";
+import { AgentMessageParts } from "../ai-sdk/AgentMessageParts.js";
 import { Marker, MarkerContent } from "../foundations/Marker.js";
+import { t as CopyButton } from "../../copy-button-4YvddK4e.js";
+import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "../ai-sdk/Context.js";
+import { VirtualMessageScroller } from "../ai-sdk/MessageScrollerVirtual.js";
+import { QueueItem, QueueItemActions, QueueItemContent } from "../ai-sdk/Queue.js";
+import { EmptyState } from "../foundations/EmptyState.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import { PromptInputApproval, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals } from "./PromptInputApproval.js";
-import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { isCompactionMessage } from "agents/experimental/memory/utils";
 import { isTextUIPart } from "ai";
+import { isCompactionMessage } from "agents/experimental/memory/utils";
 //#region src/components/agents-sdk/AgentChat.tsx
 /**
 * Agents exports this helper from `agents/sessions` after cloudflare/agents#1896;
@@ -529,7 +530,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 					"aria-label": "Queued messages",
 					children: pendingPrompts.map((pending) => {
 						const messageText = pending.message.text || "Queued message";
-						return /* @__PURE__ */ jsxs("li", {
+						return /* @__PURE__ */ jsxs(QueueItem, {
 							className: "agent-chat__queued-message",
 							children: [
 								/* @__PURE__ */ jsx("span", {
@@ -537,27 +538,32 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 									"aria-hidden": "true",
 									children: /* @__PURE__ */ jsx(QueueIcon, {})
 								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "agent-chat__queued-text sigvelo-truncate sigvelo-truncate-grow",
-									children: messageText
-								}),
-								/* @__PURE__ */ jsxs(Button, {
-									className: "agent-chat__queued-action",
-									"aria-label": `Move queued message to front: ${messageText}`,
-									color: "neutral",
-									size: "xs",
-									variant: "ghost",
-									onClick: () => setPendingPrompts((current) => [pending, ...current.filter((item) => item !== pending)]),
-									children: [/* @__PURE__ */ jsx(MoveToFrontIcon, {}), "Move to front"]
+								/* @__PURE__ */ jsx(QueueItemContent, {
+									className: "agent-chat__queued-content",
+									children: /* @__PURE__ */ jsx("span", {
+										className: "agent-chat__queued-text sigvelo-truncate sigvelo-truncate-grow",
+										children: messageText
+									})
 								}),
-								/* @__PURE__ */ jsx(IconButton, {
-									className: "agent-chat__queued-action agent-chat__queued-remove",
-									color: "neutral",
-									label: `Remove queued message: ${messageText}`,
-									size: "xs",
-									variant: "ghost",
-									onClick: () => setPendingPrompts((current) => current.filter((item) => item !== pending)),
-									children: /* @__PURE__ */ jsx(TrashIcon, {})
+								/* @__PURE__ */ jsxs(QueueItemActions, {
+									className: "agent-chat__queued-actions",
+									children: [/* @__PURE__ */ jsxs(Button, {
+										className: "agent-chat__queued-action",
+										"aria-label": `Move queued message to front: ${messageText}`,
+										color: "neutral",
+										size: "xs",
+										variant: "ghost",
+										onClick: () => setPendingPrompts((current) => [pending, ...current.filter((item) => item !== pending)]),
+										children: [/* @__PURE__ */ jsx(MoveToFrontIcon, {}), "Move to front"]
+									}), /* @__PURE__ */ jsx(IconButton, {
+										className: "agent-chat__queued-action agent-chat__queued-remove",
+										color: "neutral",
+										label: `Remove queued message: ${messageText}`,
+										size: "xs",
+										variant: "ghost",
+										onClick: () => setPendingPrompts((current) => current.filter((item) => item !== pending)),
+										children: /* @__PURE__ */ jsx(TrashIcon, {})
+									})]
 								})
 							]
 						}, pending.id);

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

@@ -1,2 +1,48 @@
-import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../../BrowserLiveView-tJTWkoyu.js";
+import * as React from "react";
+import { BrowserLiveViewUrl } from "agents/browser";
+
+//#region src/components/agents-sdk/BrowserLiveView.d.ts
+interface BrowserLiveViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Complete upstream value returned by `cdp.getLiveViewUrl()`. */
+  source: BrowserLiveViewUrl;
+  /** Epoch ms when `source` was received. Defaults to its first render. */
+  receivedAt?: number;
+  /** The page the session was showing — used for the ended-state text. */
+  pageTitle?: string;
+  /**
+   * Shown once the link expires — pass the last screenshot the agent took
+   * (`<img>`) to keep the final frame on screen. Defaults to a quiet
+   * "Live view ended" state.
+   */
+  fallback?: React.ReactNode;
+}
+/**
+ * Embeds a Browser Run Live View — a real-time, interactive view of the
+ * agent's browser session. Links expire (~5 minutes), so the iframe swaps to
+ * `fallback` (e.g. the last screenshot) once `source.expiresInMs` passes.
+ * While the hosted viewer connects, a quiet loading overlay hides the frame; if it
+ * never loads, the view degrades to `fallback` or an unavailable state. An
+ * expand button opens the same view in a fullscreen dialog.
+ *
+ * Where URLs come from (upstream: `agents/browser` in
+ * github.com/cloudflare/agents — `BrowserLiveViewUrl`): the model calls
+ * `cdp.getLiveViewUrl()` inside a `browser_execute` tool run, or the host
+ * calls `connector.liveView()`/`sessionInfo()`. This package's chat rendering
+ * derives the component automatically from links found in tool results.
+ *
+ * Styling rides `@mcp-b/react-components/styles` (browser-live-view.css),
+ * which think-chat consumers load anyway.
+ *
+ * The iframe is unsandboxed by design: the hosted Live View UI needs scripts
+ * and its own origin to stream the session. Only pass trusted Live View URLs.
+ */
+declare function BrowserLiveView({
+  source,
+  receivedAt,
+  pageTitle,
+  fallback,
+  className,
+  ...props
+}: BrowserLiveViewProps): React.JSX.Element;
+//#endregion
 export { BrowserLiveView, BrowserLiveViewProps };

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

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { A as MaximizeIcon, J as SpinnerIcon } from "../../icons-B1Qw05te.js";
+import { A as MaximizeIcon, J as SpinnerIcon } from "../../icons-B4mGvCvc.js";
 import { Button } from "../foundations/Button.js";
 import { Dialog } from "../foundations/Dialog.js";
-import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import { StatusPill } from "../foundations/StatusPill.js";
+import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/BrowserLiveView.tsx

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

@@ -1,2 +1,41 @@
-import { n as BrowserReplayProps, t as BrowserReplay } from "../../BrowserReplay-B0BQZr-N.js";
+import * as React from "react";
+import { BrowserRecording } from "agents/browser";
+
+//#region src/components/agents-sdk/BrowserReplay.d.ts
+interface BrowserReplayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /**
+   * rrweb events for one tab, e.g. one
+   * `BrowserRecording.events[targetId]` entry from Cloudflare Browser Run.
+   */
+  events: BrowserRecording["events"][string];
+  /** Start playing on mount. */
+  autoPlay?: boolean;
+}
+/**
+ * Replays a completed Cloudflare Browser Run recording locally with rrweb.
+ *
+ * This is intentionally not derived from Think chat message parts. Live view
+ * links and screenshots ride the `browser_execute` stream and belong to
+ * `BrowserLiveView`; replay events are fetched after a session closes with
+ * Browser Run's `getBrowserRecording()`. Upstream currently shapes those
+ * recordings as `Record<targetId, unknown[]>`, where each array is plain rrweb
+ * JSON for one tab. Playback happens in the viewer's browser through
+ * `@rrweb/replay`; no replay service is contacted at playback time.
+ *
+ * Styling rides `@mcp-b/react-components/styles` (browser-replay.css), which
+ * think-chat consumers load anyway.
+ *
+ * @see https://github.com/cloudflare/agents/tree/main/packages/agents/src/browser
+ * @see https://github.com/rrweb-io/rrweb/tree/main/packages/%40rrweb/replay
+ */
+declare function BrowserReplay({
+  className,
+  events,
+  autoPlay,
+  ref,
+  ...props
+}: BrowserReplayProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
 export { BrowserReplay, BrowserReplayProps };

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { V as PlayIcon, z as PauseIcon } from "../../icons-B1Qw05te.js";
+import { V as PlayIcon, z as PauseIcon } from "../../icons-B4mGvCvc.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { r as formatClock } from "../../format-DB2mX9DA.js";
 import { EmptyState } from "../foundations/EmptyState.js";

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

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { J as SpinnerIcon, rt as XIcon } from "../../icons-B1Qw05te.js";
+import { J as SpinnerIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
 import { Button } from "../foundations/Button.js";
 import { Tabs } from "../foundations/Tabs.js";
-import { BrowserLiveView } from "./BrowserLiveView.js";
 import { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "../general-purpose/WebPreview.js";
+import { BrowserLiveView } from "./BrowserLiveView.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/BrowserRunPanel.tsx

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

@@ -1,11 +1,10 @@
-import { getMcpServerEntry, getMcpServerRuntimeState } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { J as SpinnerIcon, d as CheckIcon, j as McpIcon, tt as WarningIcon } from "../../icons-B1Qw05te.js";
+import { J as SpinnerIcon, d as CheckIcon, j as McpIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.js";
 import { Button } from "../foundations/Button.js";
-import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
+import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { DescriptionList } from "../foundations/DescriptionList.js";
-import { n as getMcpServerConnectionKind } from "../../mcp-server-U71zhxFF.js";
+import { n as getMcpServerProjection } from "../../mcp-server-SD_S-IpB.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getToolPartState } from "@cloudflare/think/react";
@@ -17,25 +16,25 @@ import { getToolPartState } from "@cloudflare/think/react";
 */
 function McpConnectionRequest(props) {
 	const { mcp, part, server, serverId } = props;
-	const entry = getMcpServerEntry(server, mcp);
-	const connectedServer = serverId === void 0 ? entry?.[1] : mcp?.servers[serverId];
-	const serverState = connectedServer ? getMcpServerRuntimeState(connectedServer) : void 0;
+	const projection = getMcpServerProjection(server, mcp, serverId);
 	const actionStateKey = JSON.stringify([
 		part.toolCallId,
 		server.id,
 		server.url,
-		serverId ?? entry?.[0],
-		serverState,
-		connectedServer?.error
+		serverId ?? projection.serverId,
+		projection.runtimeState,
+		projection.server?.error
 	]);
-	return /* @__PURE__ */ jsx(McpConnectionRequestContent, { ...props }, actionStateKey);
+	return /* @__PURE__ */ jsx(McpConnectionRequestContent, {
+		projection,
+		...props
+	}, actionStateKey);
 }
-function McpConnectionRequestContent({ part, server, reason, mcp, serverId, outcome, onConnect, onDecline, className, ref, ...props }) {
+function McpConnectionRequestContent({ part, server, reason, mcp: _mcp, serverId: _serverId, outcome, onConnect, onDecline, className, ref, projection, ...props }) {
 	const [action, setAction] = React.useState(null);
-	const entry = getMcpServerEntry(server, mcp);
-	const connectedServer = serverId === void 0 ? entry?.[1] : mcp?.servers[serverId];
-	const serverState = connectedServer ? getMcpServerRuntimeState(connectedServer) : void 0;
-	const connectionKind = getMcpServerConnectionKind(connectedServer);
+	const connectedServer = projection.server;
+	const serverState = projection.runtimeState;
+	const connectionKind = projection.connectionKind;
 	const pendingAction = action?.status === "pending" ? action.kind : null;
 	const actionError = action?.status === "error" ? action.error : null;
 	const failedAction = action?.status === "error" ? action.kind : null;

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

@@ -1,9 +1,9 @@
 import { CUSTOM_MCP_SERVER_CARD } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Button } from "../foundations/Button.js";
-import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Field } from "../foundations/Field.js";
 import { Form } from "../foundations/Form.js";
+import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Fieldset } from "../foundations/Fieldset.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,5 +1,5 @@
 import { o as McpServerCard } from "../../mcp-server-catalog-CCj2ItkV.js";
-import { l as DialogProps } from "../../Dialog-DeOSJ0Oy.js";
+import { l as DialogProps } from "../../Dialog-B_FhRWaz.js";
 import * as React from "react";
 import { MCPServersState } from "agents";
 

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

@@ -1,15 +1,14 @@
-import { getMcpServerEntry } from "../../utils/mcp-server-catalog.js";
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { H as PlusIcon, J as SpinnerIcon, b as EllipsisIcon, o as ArrowUpRightIcon, rt as XIcon, tt as WarningIcon } from "../../icons-B1Qw05te.js";
-import { AppIcon } from "../foundations/AppIcon.js";
+import { H as PlusIcon, J as SpinnerIcon, b as EllipsisIcon, o as ArrowUpRightIcon, rt as XIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.js";
 import { Button } from "../foundations/Button.js";
+import { AgentAttention, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Separator } from "../foundations/Separator.js";
-import { AgentAttention, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
-import { n as getMcpServerConnectionKind, t as McpServerIcon } from "../../mcp-server-U71zhxFF.js";
+import { AppIcon } from "../foundations/AppIcon.js";
 import { SearchField } from "../foundations/SearchField.js";
+import { n as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-SD_S-IpB.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/McpPluginCatalog.tsx
@@ -23,7 +22,7 @@ function McpPluginCatalog({ servers, mcp, detailsByServerId, featuredServerIds =
 	const [selectedServer, setSelectedServer] = React.useState(null);
 	const headingIdPrefix = React.useId();
 	const sections = groupServers(filterServers(servers, detailsByServerId, query), featuredServerIds, query);
-	const installedServers = query ? [] : servers.filter((server) => getServerProjection(server, mcp).kind === "connected");
+	const installedServers = query ? [] : servers.filter((server) => getMcpServerProjection(server, mcp).connectionKind === "connected");
 	return /* @__PURE__ */ jsxs("section", {
 		className: cx("mcp-plugin-catalog", className),
 		...props,
@@ -119,8 +118,8 @@ function McpPluginDetailsDialog({ server, details, mcp, brandName = "your AI", b
 	/* @__PURE__ */ jsxs("p", { children: [/* @__PURE__ */ jsx("strong", { children: "Data shared with this plugin." }), " Your AI may send relevant context from your request so the plugin can respond. Review the provider's terms and privacy policy before connecting."] })
 ] }), onConnect, onDisconnect, onOpenChange }) {
 	const popupRef = React.useRef(null);
-	const projection = server ? getServerProjection(server, mcp) : null;
-	const title = server ? getDialogTitle(server.name, projection?.kind, brandName) : "Plugin details";
+	const projection = server ? getMcpServerProjection(server, mcp) : null;
+	const title = server ? getDialogTitle(server.name, projection?.connectionKind, brandName) : "Plugin details";
 	const description = details?.longDescription ?? server?.description;
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		open: server !== null,
@@ -168,9 +167,9 @@ function McpPluginDetailsDialog({ server, details, mcp, brandName = "your AI", b
 								className: "mcp-plugin-details__title",
 								children: title
 							}),
-							projection && projection.kind !== "available" ? /* @__PURE__ */ jsx("p", {
+							projection && projection.connectionKind !== "available" ? /* @__PURE__ */ jsx("p", {
 								className: "mcp-plugin-details__state",
-								children: projection.statusLabel
+								children: getServerStatusLabel(projection.connectionKind)
 							}) : null,
 							/* @__PURE__ */ jsx(Dialog.Description, {
 								className: "mcp-plugin-details__description",
@@ -193,11 +192,12 @@ function McpPluginDetailsDialog({ server, details, mcp, brandName = "your AI", b
 	});
 }
 function McpPluginCard({ server, details, mcp, onSelect }) {
-	const projection = getServerProjection(server, mcp);
+	const projection = getMcpServerProjection(server, mcp);
+	const statusLabel = getServerStatusLabel(projection.connectionKind);
 	return /* @__PURE__ */ jsxs("article", {
 		className: "mcp-plugin-catalog__card",
 		children: [/* @__PURE__ */ jsxs(Button, {
-			"aria-label": `View ${server.name} details. ${projection.statusLabel}.`,
+			"aria-label": `View ${server.name} details. ${statusLabel}.`,
 			className: "mcp-plugin-catalog__card-main",
 			color: "neutral",
 			size: "xl",
@@ -218,22 +218,22 @@ function McpPluginCard({ server, details, mcp, onSelect }) {
 			})]
 		}), /* @__PURE__ */ jsx(IconButton, {
 			color: "neutral",
-			label: projection.kind === "connected" ? `More actions for ${server.name}` : `View ${server.name} connection options`,
+			label: projection.connectionKind === "connected" ? `More actions for ${server.name}` : `View ${server.name} connection options`,
 			size: "sm",
 			variant: "ghost",
 			onClick: onSelect,
-			children: projection.kind === "connecting" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : projection.kind === "connected" ? /* @__PURE__ */ jsx(EllipsisIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
+			children: projection.connectionKind === "connecting" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : projection.connectionKind === "connected" ? /* @__PURE__ */ jsx(EllipsisIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
 		})]
 	});
 }
 function McpPluginDialogActions({ projection, server, onConnect, onDisconnect }) {
 	const [action, setAction] = React.useState({ pending: false });
 	if (!projection) return null;
-	const disconnect = projection.kind === "connected";
+	const disconnect = projection.connectionKind === "connected";
 	const connectedServerId = projection.serverId;
 	const callback = disconnect ? connectedServerId && onDisconnect ? () => onDisconnect(connectedServerId) : void 0 : onConnect ? () => onConnect(server) : void 0;
-	const actionLabel = action.pending ? disconnect ? "Disconnecting" : "Connecting" : disconnect ? onDisconnect ? "Disconnect" : "Connected" : projection.kind === "connecting" ? "Connecting" : projection.kind === "reconnect" ? `Reconnect ${server.name}` : `Connect ${server.name}`;
-	const disabled = action.pending || projection.kind === "connecting" || !callback;
+	const actionLabel = action.pending ? disconnect ? "Disconnecting" : "Connecting" : disconnect ? onDisconnect ? "Disconnect" : "Connected" : projection.connectionKind === "connecting" ? "Connecting" : projection.connectionKind === "reconnect" ? `Reconnect ${server.name}` : `Connect ${server.name}`;
+	const disabled = action.pending || projection.connectionKind === "connecting" || !callback;
 	async function runAction() {
 		if (!callback || disabled) return;
 		setAction({ pending: true });
@@ -272,15 +272,8 @@ function McpPluginDialogActions({ projection, server, onConnect, onDisconnect })
 		})
 	})] });
 }
-function getServerProjection(server, mcp) {
-	const entry = getMcpServerEntry(server, mcp);
-	const kind = getMcpServerConnectionKind(entry?.[1]);
-	const statusLabel = kind === "connected" ? "Connected" : kind === "connecting" ? "Connecting" : kind === "reconnect" ? "Needs attention" : "Available";
-	return {
-		kind,
-		serverId: entry?.[0],
-		statusLabel
-	};
+function getServerStatusLabel(kind) {
+	return kind === "connected" ? "Connected" : kind === "connecting" ? "Connecting" : kind === "reconnect" ? "Needs attention" : "Available";
 }
 function getDialogTitle(name, kind, brandName) {
 	if (kind === "connected") return name;

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

@@ -1,7 +1,7 @@
-import { s as MenuItemProps, t as Menu } from "../../Menu-DVmjBIuM.js";
+import { s as MenuItemProps, t as Menu } from "../../Menu-yb6QXWA3.js";
 import { o as McpServerCard } from "../../mcp-server-catalog-CCj2ItkV.js";
 import { McpConnectorFormProps } from "./McpConnectorForm.js";
-import { l as DialogProps } from "../../Dialog-DeOSJ0Oy.js";
+import { l as DialogProps } from "../../Dialog-B_FhRWaz.js";
 import * as React from "react";
 import { MCPServersState } from "agents";
 

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

@@ -1,12 +1,11 @@
-import { getMcpServerEntry, getMcpServerRuntimeState } from "../../utils/mcp-server-catalog.js";
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { J as SpinnerIcon, P as MinusIcon, d as CheckIcon, tt as WarningIcon } from "../../icons-B1Qw05te.js";
+import { J as SpinnerIcon, P as MinusIcon, d as CheckIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.js";
 import { buttonVariants } from "../foundations/Button.js";
+import { Menu } from "../foundations/Menu.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
-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 { n as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-SD_S-IpB.js";
 import { McpConnectorForm } from "./McpConnectorForm.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -156,11 +155,11 @@ function McpServerPickerAction({ icon, label, description, className, ...props }
 	});
 }
 function McpServerPickerRow({ row, onConnect, onDisconnect, pendingAction }) {
-	const { entry, server } = row;
-	const connectedServerId = entry?.[0];
-	const connectedServer = entry?.[1];
-	const state = connectedServer ? getMcpServerRuntimeState(connectedServer) : void 0;
-	const connectionKind = getMcpServerConnectionKind(connectedServer);
+	const { projection, server } = row;
+	const connectedServerId = projection.serverId;
+	const connectedServer = projection.server;
+	const state = projection.runtimeState;
+	const connectionKind = projection.connectionKind;
 	const connectKey = `connect:${server.id}:${server.url}`;
 	const connecting = connectionKind === "connecting";
 	const pendingConnect = pendingAction === connectKey;
@@ -241,25 +240,28 @@ function getStatusLabel(connectionKind, state) {
 }
 function getPickerRows(servers, mcp) {
 	const catalogRows = servers.map((server) => ({
-		server,
-		entry: getMcpServerEntry(server, mcp)
+		projection: getMcpServerProjection(server, mcp),
+		server
 	}));
 	if (!mcp) return catalogRows;
-	const resolvedServerIds = new Set(catalogRows.flatMap((row) => row.entry ? [row.entry[0]] : []));
-	const upstreamRows = Object.entries(mcp.servers).filter(([serverId]) => !resolvedServerIds.has(serverId)).map(([serverId, entry]) => ({
-		entry: [serverId, entry],
-		server: {
+	const resolvedServerIds = new Set(catalogRows.flatMap((row) => row.projection.serverId ? [row.projection.serverId] : []));
+	const upstreamRows = Object.entries(mcp.servers).filter(([serverId]) => !resolvedServerIds.has(serverId)).map(([serverId, entry]) => {
+		const server = {
 			id: serverId,
 			name: entry.name,
 			url: entry.server_url
-		}
-	}));
+		};
+		return {
+			projection: getMcpServerProjection(server, mcp, serverId),
+			server
+		};
+	});
 	return [...catalogRows, ...upstreamRows];
 }
 function groupPickerRows(rows) {
 	const groups = /* @__PURE__ */ new Map();
 	for (const row of rows) {
-		const key = getMcpServerConnectionKind(row.entry?.[1]) === "connected" ? "Connected" : row.server.category === "Auto" ? "MCP connectors" : row.server.category === "Manual" ? "Manual setup" : row.server.category ?? "Other";
+		const key = row.projection.connectionKind === "connected" ? "Connected" : row.server.category === "Auto" ? "MCP connectors" : row.server.category === "Manual" ? "Manual setup" : row.server.category ?? "Other";
 		const group = groups.get(key) ?? [];
 		group.push(row);
 		groups.set(key, group);

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

@@ -1,5 +1,5 @@
 import { r as ButtonProps } from "../../Button-CZt3yywF.js";
-import { l as DialogProps } from "../../Dialog-DeOSJ0Oy.js";
+import { l as DialogProps } from "../../Dialog-B_FhRWaz.js";
 import { SeparatorProps } from "../foundations/Separator.js";
 import * as React from "react";
 import Cloudflare from "cloudflare";
@@ -70,14 +70,13 @@ interface ModelSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
  * from a grouped provider list. Do not use it as a general command palette or
  * multiselect; use Combobox or a dedicated component for that.
  *
- * Sigvelo changes: composes the design-system Dialog and Button, filters item
- * children locally, and maps provider logos plus button-list styling to Sigvelo
- * CSS tokens.
+ * Sigvelo changes: composes the design-system Dialog, Autocomplete, ScrollArea,
+ * and Button, and maps provider logos plus option styling to Sigvelo CSS tokens.
  *
- * The dialog owns focus while open, and options are native buttons in grouped
- * sections. Styling consumes surface, border, spacing, radius, focus, and
- * typography tokens. Add provider/item affordances here when they need to be
- * shared.
+ * Dialog owns modal focus and dismissal. Autocomplete owns listbox semantics,
+ * active-descendant focus, and keyboard navigation. Styling consumes surface,
+ * border, spacing, radius, focus, and typography tokens. Add provider/item
+ * affordances here when they need to be shared.
  *
  * @example
  * ```tsx
@@ -196,6 +195,7 @@ declare function ModelSelectorItem({
   children,
   onClick,
   ref,
+  disabled,
   ...props
 }: ModelSelectorItemProps & {
   ref?: React.Ref<HTMLButtonElement>;
@@ -208,7 +208,7 @@ declare function ModelSelectorEmpty({
   ...props
 }: ModelSelectorEmptyProps & {
   ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}): React.JSX.Element | null;
 interface ModelSelectorSeparatorProps extends SeparatorProps {}
 declare function ModelSelectorSeparator({
   className,