@mcp-b/react-components 0.34.1 → 0.36.0

package/dist/{WorkspaceFile-C8Riev9j.d.ts → WorkspaceFile-BLaFmMrt.d.ts}

@@ -1,4 +1,4 @@
-import { O as CodeBlockLanguage } from "./CodeBlock-DzGhYyNe.js";
+import { O as CodeBlockLanguage } from "./CodeBlock-C380GD5t.js";
 import { SkillParseResult } from "agent-skills-ts-sdk";
 import { FileInfo } from "@cloudflare/shell";
 
@@ -97,10 +97,26 @@ declare function isWorkspaceSkillPath(path: string): boolean;
  * that report generic values such as `application/octet-stream`.
  */
 declare function inferWorkspaceMedia(path: string, mimeType?: string | null): WorkspaceMediaInfo | null;
+/**
+ * The mime type this vocabulary fixes for a file name, or `null` where it has
+ * no opinion and the caller's own answer stands.
+ *
+ * A workspace that derives mime types from names needs this for the reason
+ * `inferWorkspaceMedia` distrusts them: the platform registries call `.ts`
+ * MPEG-2 transport stream, and every downstream media check believes it. Media
+ * extensions answer their canonical type here too, so a host has one call
+ * instead of a copy of the table this module already keeps.
+ *
+ * @example
+ * ```ts
+ * const mimeType = inferWorkspaceMimeType(name) ?? lookup(name) ?? "application/octet-stream";
+ * ```
+ */
+declare function inferWorkspaceMimeType(path: string): string | null;
 declare function isWorkspaceMediaPath(path: string, mimeType?: string | null): boolean;
 /** Parse and validate a workspace skill with the canonical Agent Skills SDK. */
 declare function parseWorkspaceSkill(content: string): WorkspaceSkillDocument;
 /** Best-effort syntax-highlighting language from a file path; unknown extensions render as plain text. */
 declare function inferWorkspaceLanguage(path: string): CodeBlockLanguage;
 //#endregion
-export { WorkspaceMediaInfo as a, WorkspaceMediaTrackKind as c, inferWorkspaceLanguage as d, inferWorkspaceMedia as f, parseWorkspaceSkill as g, isWorkspaceSkillPath as h, WorkspaceFileState as i, WorkspaceSkillDocument as l, isWorkspaceMediaPath as m, WorkspaceFileAssetRequest as n, WorkspaceMediaKind as o, isWorkspaceMarkdownPath as p, WorkspaceFileAssetResolver as r, WorkspaceMediaTrack as s, WorkspaceFileAsset as t, getWorkspaceBasename as u };
+export { parseWorkspaceSkill as _, WorkspaceMediaInfo as a, WorkspaceMediaTrackKind as c, inferWorkspaceLanguage as d, inferWorkspaceMedia as f, isWorkspaceSkillPath as g, isWorkspaceMediaPath as h, WorkspaceFileState as i, WorkspaceSkillDocument as l, isWorkspaceMarkdownPath as m, WorkspaceFileAssetRequest as n, WorkspaceMediaKind as o, inferWorkspaceMimeType as p, WorkspaceFileAssetResolver as r, WorkspaceMediaTrack as s, WorkspaceFileAsset as t, getWorkspaceBasename as u };

package/dist/{WorkspaceFileView-BtzVKAed.js → WorkspaceFileView-DTHJLKW_.js}

@@ -1,6 +1,6 @@
 import { A as MaximizeIcon, d as CheckIcon, h as CodeIcon, r as ArrowLeftIcon, tt as WarningIcon, x as EyeIcon, y as DownloadIcon } from "./icons-B1Qw05te.js";
-import { r as formatClock } from "./format-CmopcfqJ.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-CM5gfmdq.js";
+import { r as formatClock } from "./format-DB2mX9DA.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-Bk4nn7l-.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";
@@ -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] });
 }
@@ -245,7 +239,7 @@ function WorkspaceImagePreview({ asset, fileName, media, url }) {
 						onError: () => setLoadFailed(true)
 					})
 				}), /* @__PURE__ */ jsx("div", {
-					className: "workspace-explorer__visually-hidden sigvelo-visually-hidden",
+					className: "sigvelo-visually-hidden",
 					role: "status",
 					"aria-live": "polite",
 					"aria-atomic": "true",

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

@@ -1,2 +1,2 @@
-import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../../AgentChat-CV-GuYA6.js";
-export { AgentChat, AgentChatComposerDraft, AgentChatProps, AgentChatRenderMessageContext, PermissionModeControl };
+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

@@ -8,6 +8,7 @@ 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 { QueueItem, QueueItemActions, QueueItemContent } from "../ai-sdk/Queue.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";
@@ -43,10 +44,17 @@ const COMPACT_SLASH_COMMAND = {
 	group: "Conversation",
 	meta: "Built in"
 };
+/**
+* The affordance for a compaction that is running right now, for the `notice`
+* slot. Exported because Think's session frames report the same state from
+* outside this component's own `/compact` lifecycle, and one running
+* compaction must not read two ways.
+*/
+const compactingNotice = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), "Compacting context…"] });
 const COMPACTION_NOTICES = {
 	compacted: "Context compacted. Context usage updates after your next message.",
 	failed: "Compaction failed — run /compact to try again.",
-	pending: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), "Compacting context…"] }),
+	pending: compactingNotice,
 	unchanged: "No context was compacted. Recent context is already protected."
 };
 function observeAgentChatComposer(element) {
@@ -240,7 +248,8 @@ const AgentChatTranscriptRowBody = React.memo(AgentChatTranscriptRowBodyImpl);
 *   announce re-inserted old rows as new); announce new messages from a
 *   host-owned live region if that matters.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, showComposer = onSubmit !== void 0, onStop, onPromptQueued, placeholder = "Ask anything...", disabled, emptyState, startScreen, composerHeader, composerTray, composerTools, slashCommands, onCompact, mentionCommands, contextSelector, composerEndTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, approvalsEnabled = true, permissionModeControl, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, showAssistantActions, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, showComposer = onSubmit !== void 0, onStop, onPromptQueued, placeholder = "Ask anything...", disabled: composerDisabled, emptyState, loading, startScreen, composerHeader, composerTray, composerTools, slashCommands, onCompact, mentionCommands, contextSelector, composerEndTools, voiceInput, beforeVoiceStart, composerAddMenuItems, notice, onRegenerate, onEditAndResend, onApprovalResponse, thinkStub, approvalsEnabled = true, permissionModeControl, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, showAssistantActions, ref }) {
+	const disabled = composerDisabled || loading;
 	const [copyAnnouncement, setCopyAnnouncement] = React.useState("");
 	const [composerDraft, setComposerDraft] = React.useState("");
 	const [composerReferences, setComposerReferences] = React.useState([]);
@@ -521,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", {
@@ -529,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__ */ jsx(QueueItemContent, {
+									className: "agent-chat__queued-content",
+									children: /* @__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(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);
@@ -638,7 +652,7 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 		title: "Start a conversation",
 		description: "Ask the agent to inspect, plan, or build."
 	});
-	const showsStartScreen = messages.length === 0 && showComposer && startScreen !== false && (startScreen !== void 0 || emptyState === void 0);
+	const showsStartScreen = !loading && messages.length === 0 && showComposer && startScreen !== false && (startScreen !== void 0 || emptyState === void 0);
 	const startScreenProps = startScreen && typeof startScreen === "object" ? startScreen : void 0;
 	return /* @__PURE__ */ jsxs(TransitionSurface, {
 		ref,
@@ -652,7 +666,14 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 				"aria-atomic": "true",
 				children: copyAnnouncement
 			}),
-			showsStartScreen ? /* @__PURE__ */ jsx(AgentChatStartScreen, {
+			loading ? /* @__PURE__ */ jsxs("div", {
+				className: "agent-chat__transcript-loading",
+				role: "status",
+				children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), /* @__PURE__ */ jsx("span", {
+					className: "sigvelo-visually-hidden",
+					children: "Loading conversation"
+				})]
+			}) : showsStartScreen ? /* @__PURE__ */ jsx(AgentChatStartScreen, {
 				...startScreenProps,
 				composer
 			}) : /* @__PURE__ */ jsx(ExpansionStateProvider, { children: /* @__PURE__ */ jsx(VirtualMessageScroller, {
@@ -678,4 +699,4 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 	});
 }
 //#endregion
-export { AgentChat };
+export { AgentChat, compactingNotice };

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/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,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { V as PlayIcon, z as PauseIcon } from "../../icons-B1Qw05te.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { r as formatClock } from "../../format-CmopcfqJ.js";
+import { r as formatClock } from "../../format-DB2mX9DA.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { Slider } from "../foundations/Slider.js";
 import * as React from "react";

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 { Button } from "../foundations/Button.js";
-import { i as formatErrorMessage } from "../../format-CmopcfqJ.js";
+import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.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,7 +1,7 @@
 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-CmopcfqJ.js";
+import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Field } from "../foundations/Field.js";
 import { Form } from "../foundations/Form.js";
 import { Fieldset } from "../foundations/Fieldset.js";

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,14 +1,13 @@
-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 { Button } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Dialog } from "../foundations/Dialog.js";
-import { i as formatErrorMessage } from "../../format-CmopcfqJ.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 { n as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-SD_S-IpB.js";
 import { SearchField } from "../foundations/SearchField.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -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 { buttonVariants } from "../foundations/Button.js";
 import { Dialog } from "../foundations/Dialog.js";
-import { i as formatErrorMessage } from "../../format-CmopcfqJ.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,