@mcp-b/react-components 0.29.0 → 0.30.1

package/dist/components/{AgentToolRunsContext.d.ts → agents-sdk/AgentToolRunsContext.d.ts}

@@ -1,2 +1,2 @@
-import { i as useOptionalAgentToolRuns, n as AgentToolRunsProvider, r as AgentToolRunsProviderProps, t as AgentToolEventsValue } from "../AgentToolRunsContext-BVe4stgw.js";
+import { i as useOptionalAgentToolRuns, n as AgentToolRunsProvider, r as AgentToolRunsProviderProps, t as AgentToolEventsValue } from "../../AgentToolRunsContext-Cgve-Upx.js";
 export { AgentToolEventsValue, AgentToolRunsProvider, AgentToolRunsProviderProps, useOptionalAgentToolRuns };

package/dist/components/{AgentToolRunsContext.js → agents-sdk/AgentToolRunsContext.js}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/AgentToolRunsContext.tsx
+//#region src/components/agents-sdk/AgentToolRunsContext.tsx
 const AgentToolRunsContext = React.createContext(null);
 /** Provides one parent connection's retained Agent Tool event projection. */
 function AgentToolRunsProvider({ agentTools, children }) {

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

@@ -0,0 +1,2 @@
+import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../../BrowserLiveView-tJTWkoyu.js";
+export { BrowserLiveView, BrowserLiveViewProps };

package/dist/components/{BrowserLiveView.js → agents-sdk/BrowserLiveView.js}

@@ -1,12 +1,12 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Button } from "./Button.js";
-import { A as MaximizeIcon, J as SpinnerIcon } from "../icons-B4mGvCvc.js";
-import { Dialog } from "./Dialog.js";
-import { TransitionSurface } from "./TransitionSurface.js";
-import { StatusPill } from "./StatusPill.js";
+import { t as cx } from "../../class-names-BiMDVpUo.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 * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/BrowserLiveView.tsx
+//#region src/components/agents-sdk/BrowserLiveView.tsx
 const FRAME_LOAD_TIMEOUT_MS = 15e3;
 function EndedState({ title, detail }) {
 	return /* @__PURE__ */ jsxs("div", {

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

@@ -0,0 +1,2 @@
+import { n as BrowserReplayProps, t as BrowserReplay } from "../../BrowserReplay-B0BQZr-N.js";
+export { BrowserReplay, BrowserReplayProps };

package/dist/components/{BrowserReplay.js → agents-sdk/BrowserReplay.js}

@@ -1,13 +1,13 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { V as PlayIcon, z as PauseIcon } from "../icons-B4mGvCvc.js";
-import { IconButton } from "./IconButton.js";
-import { r as formatClock } from "../format-S6uWyoSb.js";
-import { EmptyState } from "./EmptyState.js";
-import { Slider } from "./Slider.js";
+import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { V as PlayIcon, z as PauseIcon } from "../../icons-B4mGvCvc.js";
+import { IconButton } from "../foundations/IconButton.js";
+import { r as formatClock } from "../../format-CmopcfqJ.js";
+import { EmptyState } from "../foundations/EmptyState.js";
+import { Slider } from "../foundations/Slider.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Replayer } from "@rrweb/replay";
-//#region src/components/BrowserReplay.tsx
+//#region src/components/agents-sdk/BrowserReplay.tsx
 function labelReplayFrame(stage) {
 	const frame = stage.querySelector("iframe");
 	if (frame) frame.title = "Browser session replay";

package/dist/components/{BrowserRunPanel.d.ts → agents-sdk/BrowserRunPanel.d.ts}

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { BrowserLiveView } from "agents/browser";
 
-//#region src/components/BrowserRunPanel.d.ts
+//#region src/components/agents-sdk/BrowserRunPanel.d.ts
 interface BrowserRunPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   /** Host-side Browser Run Live View data from `connector.liveView()`. */
   liveView?: BrowserLiveView;

package/dist/components/{BrowserRunPanel.js → agents-sdk/BrowserRunPanel.js}

@@ -1,12 +1,12 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Button } from "./Button.js";
-import { J as SpinnerIcon, rt as XIcon } from "../icons-B4mGvCvc.js";
-import { Tabs } from "./Tabs.js";
+import { t as cx } from "../../class-names-BiMDVpUo.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 "./WebPreview.js";
+import { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "../general-purpose/WebPreview.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/BrowserRunPanel.tsx
+//#region src/components/agents-sdk/BrowserRunPanel.tsx
 function isInspectablePage(target) {
 	const pageUrl = target.pageUrl;
 	return Boolean(pageUrl && !pageUrl.startsWith("about:") && !pageUrl.startsWith("chrome:") && !pageUrl.startsWith("devtools:"));

package/dist/components/{McpConnectionRequest.d.ts → agents-sdk/McpConnectionRequest.d.ts}

@@ -1,9 +1,9 @@
-import { o as McpServerCard } from "../mcp-server-catalog-CO7GAl1f.js";
+import { o as McpServerCard } from "../../mcp-server-catalog-CO7GAl1f.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart } from "ai";
 import { MCPServersState } from "agents";
 
-//#region src/components/McpConnectionRequest.d.ts
+//#region src/components/agents-sdk/McpConnectionRequest.d.ts
 type McpConnectionRequestOutcome = "authorization-required" | "connected" | "declined" | "failed";
 interface McpConnectionRequestBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "part"> {
   /** Whole upstream AI SDK tool part whose lifecycle this card renders. */
@@ -31,19 +31,7 @@ type McpConnectionRequestProps = (McpConnectionRequestBaseProps & {
  * state. Failed and interrupted connections deliberately restart through the
  * same `onConnect` seam instead of introducing recovery operations.
  */
-declare function McpConnectionRequest({
-  part,
-  server,
-  reason,
-  mcp,
-  serverId,
-  outcome,
-  onConnect,
-  onDecline,
-  className,
-  ref,
-  ...props
-}: McpConnectionRequestProps & {
+declare function McpConnectionRequest(props: McpConnectionRequestProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion

package/dist/components/{McpConnectionRequest.js → agents-sdk/McpConnectionRequest.js}

@@ -1,43 +1,71 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Button } from "./Button.js";
-import { J as SpinnerIcon, d as CheckIcon, j as McpIcon, tt as WarningIcon } from "../icons-B4mGvCvc.js";
-import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "./AgentAttention.js";
-import { getMcpServerEntry, getMcpServerRuntimeState } from "../utils/mcp-server-catalog.js";
-import { DescriptionList } from "./DescriptionList.js";
+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-B4mGvCvc.js";
+import { Button } from "../foundations/Button.js";
+import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "../ai-sdk/AgentAttention.js";
+import { i as formatErrorMessage } from "../../format-CmopcfqJ.js";
+import { DescriptionList } from "../foundations/DescriptionList.js";
+import { n as getMcpServerConnectionKind } from "../../mcp-server-U71zhxFF.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getToolPartState } from "@cloudflare/think/react";
-//#region src/components/McpConnectionRequest.tsx
+//#region src/components/agents-sdk/McpConnectionRequest.tsx
 /**
 * In-chat MCP connection request backed by the AI SDK tool part and Agents MCP
 * state. Failed and interrupted connections deliberately restart through the
 * same `onConnect` seam instead of introducing recovery operations.
 */
-function McpConnectionRequest({ part, server, reason, mcp, serverId, outcome, onConnect, onDecline, className, ref, ...props }) {
+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 actionStateKey = JSON.stringify([
+		part.toolCallId,
+		server.id,
+		server.url,
+		serverId ?? entry?.[0],
+		serverState,
+		connectedServer?.error
+	]);
+	return /* @__PURE__ */ jsx(McpConnectionRequestContent, { ...props }, actionStateKey);
+}
+function McpConnectionRequestContent({ part, server, reason, mcp, serverId, outcome, onConnect, onDecline, className, ref, ...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 pendingAction = action && "pending" in action ? action.pending : null;
-	const actionError = action && "error" in action ? action.error : null;
+	const connectionKind = getMcpServerConnectionKind(connectedServer);
+	const pendingAction = action?.status === "pending" ? action.kind : null;
+	const actionError = action?.status === "error" ? action.error : null;
+	const failedAction = action?.status === "error" ? action.kind : null;
 	const toolState = part.state === "output-available" && part.preliminary === true ? "streaming" : getToolPartState(part);
 	const authorizationPending = outcome === "authorization-required" && toolState === "complete";
 	const settled = toolState === "error" || toolState === "denied" || toolState === "complete" && !authorizationPending;
 	const preparing = !settled && (toolState === "streaming" || toolState === "waiting-approval" || toolState === "approved");
-	const ready = serverState === "ready";
+	const ready = connectionKind === "connected";
 	const authorizationFailed = authorizationPending && (serverState === "failed" || serverState === "not-connected" || Boolean(connectedServer?.error) || Boolean(actionError));
 	const authorizing = authorizationPending && !ready && !authorizationFailed;
-	const connecting = !authorizationPending && (pendingAction === "connect" || serverState === "connecting" || serverState === "discovering" || serverState === "connected" && !connectedServer?.error);
-	const reconnect = Boolean(actionError) || serverState === "authenticating" || serverState === "failed" || serverState === "not-connected" || serverState === "connected" && Boolean(connectedServer?.error);
-	const connectionError = actionError ?? connectedServer?.error ?? (serverState === "failed" ? "Connection failed. Reconnect to try again." : authorizationFailed ? "Connection did not complete." : void 0);
+	const connecting = !authorizationPending && (pendingAction === "connect" || connectionKind === "connecting");
+	const reconnect = failedAction === "connect" || connectionKind === "reconnect";
+	const connectionError = actionError ?? connectedServer?.error ?? (serverState === "failed" ? "The connection did not complete." : authorizationFailed ? "Connection did not complete." : void 0);
 	async function runAction(kind, callback) {
 		if (pendingAction) return;
-		setAction({ pending: kind });
+		const nextAction = {
+			kind,
+			status: "pending"
+		};
+		setAction(nextAction);
 		try {
 			await callback();
-			setAction(null);
+			setAction((current) => current === nextAction ? null : current);
 		} catch (error) {
-			setAction({ error: error instanceof Error ? error.message : String(error) });
+			const message = formatErrorMessage(error);
+			setAction((current) => current === nextAction ? {
+				error: message,
+				kind,
+				status: "error"
+			} : current);
 		}
 	}
 	if (settled) {
@@ -61,7 +89,7 @@ function McpConnectionRequest({ part, server, reason, mcp, serverId, outcome, on
 			}) }) : null]
 		});
 	}
-	const title = preparing ? "Preparing connection request" : authorizationFailed ? `Couldn’t connect ${server.name}` : authorizing ? `Authorizing ${server.name}` : connecting ? `Connecting ${server.name}` : ready ? `Connected to ${server.name}` : reconnect ? `Reconnect ${server.name}` : `Connect ${server.name}`;
+	const title = preparing ? "Preparing connection request" : authorizationFailed ? `Couldn’t connect ${server.name}` : authorizing ? `Authorizing ${server.name}` : connecting ? `Connecting ${server.name}` : ready ? `Connected to ${server.name}` : reconnect ? `${server.name} connection needs attention` : `${server.name} connection requested`;
 	const description = preparing ? "Reading assistant request" : authorizationFailed ? "Connection failed" : authorizing ? "The agent is completing sign-in" : connecting ? "Setting up connection" : ready ? "Connection is ready" : reconnect ? "The previous connection needs attention" : "Assistant requested access";
 	const connectLabel = pendingAction === "connect" ? "Connecting…" : ready ? "Continue" : reconnect ? `Reconnect ${server.name}` : `Connect ${server.name}`;
 	return /* @__PURE__ */ jsxs(AgentAttention, {

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

@@ -0,0 +1,39 @@
+import { d as McpServerSetupAuthFieldName, l as McpServerSetupAuth } from "../../mcp-server-catalog-CO7GAl1f.js";
+import * as React from "react";
+
+//#region src/components/agents-sdk/McpConnectorForm.d.ts
+type CredentialFieldName = Exclude<McpServerSetupAuthFieldName, "redirectUrl">;
+type McpConnectorFormValues = Readonly<Partial<Record<CredentialFieldName, string>> & {
+  readonly name: string;
+  readonly url: string;
+}>;
+type McpConnectorFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "status"> & {
+  /** Authentication metadata that decides which credential fields render. */readonly auth?: McpServerSetupAuth; /** Initial connector values. Publisher client credentials remain app-owned. */
+  readonly defaults?: Partial<McpConnectorFormValues>; /** Optional pattern used to validate the MCP name field. */
+  readonly namePattern?: string; /** Keep a catalog-owned MCP name and URL visible but immutable. */
+  readonly readOnlyServer?: boolean; /** Read-only redirect URL shown for manual OAuth client setup. */
+  readonly redirectUrl?: string; /** Inline connection status announced politely to assistive tech. */
+  readonly status?: React.ReactNode; /** Label for the submit button. */
+  readonly submitLabel?: string; /** Label shown while submit is pending. */
+  readonly submittingLabel?: string; /** Called with normalized connector values after native form validation passes. */
+  readonly onSubmit: (values: McpConnectorFormValues) => void | Promise<void>;
+};
+/** Collects MCP connector settings and optional credentials with native form validation. */
+declare function McpConnectorForm({
+  auth,
+  className,
+  defaults,
+  namePattern,
+  readOnlyServer,
+  redirectUrl,
+  status,
+  submitLabel,
+  submittingLabel,
+  onSubmit,
+  ref,
+  ...props
+}: McpConnectorFormProps & {
+  ref?: React.Ref<HTMLFormElement>;
+}): React.JSX.Element;
+//#endregion
+export { McpConnectorForm, McpConnectorFormProps, McpConnectorFormValues };

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

@@ -0,0 +1,151 @@
+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 { Field } from "../foundations/Field.js";
+import { Form } from "../foundations/Form.js";
+import { i as formatErrorMessage } from "../../format-CmopcfqJ.js";
+import { Fieldset } from "../foundations/Fieldset.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/agents-sdk/McpConnectorForm.tsx
+const CUSTOM_AUTH_FIELDS = [{
+	inputType: "password",
+	label: "Bearer",
+	name: "bearerToken"
+}];
+/** Collects MCP connector settings and optional credentials with native form validation. */
+function McpConnectorForm({ auth, className, defaults, namePattern, readOnlyServer = false, redirectUrl = "", status, submitLabel = "Connect MCP", submittingLabel = "Connecting", onSubmit, ref, ...props }) {
+	const [submission, setSubmission] = React.useState(null);
+	const credentialFields = (auth?.fields ?? CUSTOM_AUTH_FIELDS).filter(isCredentialAuthField);
+	const redirectUrlField = auth?.fields.find((field) => field.name === "redirectUrl");
+	async function handleSubmit(values) {
+		setSubmission(true);
+		try {
+			await onSubmit(readMcpConnectorFormValues(values));
+			setSubmission(null);
+		} catch (error) {
+			setSubmission(formatErrorMessage(error));
+		}
+	}
+	return /* @__PURE__ */ jsxs(Form, {
+		ref,
+		"aria-label": "MCP connector",
+		className: cx("agent-connect__mcp-form", className),
+		onFormSubmit: handleSubmit,
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs(Field.Root, {
+				name: "name",
+				children: [
+					/* @__PURE__ */ jsx(Field.Label, { children: "MCP name" }),
+					/* @__PURE__ */ jsx(Field.Control, {
+						defaultValue: defaults?.name ?? CUSTOM_MCP_SERVER_CARD.id,
+						pattern: namePattern,
+						readOnly: readOnlyServer,
+						required: true,
+						title: namePattern ? "Use the required name format." : void 0
+					}),
+					/* @__PURE__ */ jsx(Field.Error, {
+						match: "valueMissing",
+						children: "MCP name is required."
+					}),
+					/* @__PURE__ */ jsx(Field.Error, {
+						match: "patternMismatch",
+						children: "Use the required name format."
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Field.Root, {
+				name: "url",
+				children: [
+					/* @__PURE__ */ jsx(Field.Label, { children: "MCP URL" }),
+					/* @__PURE__ */ jsx(Field.Control, {
+						defaultValue: defaults?.url ?? "",
+						placeholder: "http://127.0.0.1:8787/mcp",
+						readOnly: readOnlyServer,
+						required: true,
+						type: "url"
+					}),
+					/* @__PURE__ */ jsx(Field.Error, {
+						match: "valueMissing",
+						children: "MCP URL is required."
+					}),
+					/* @__PURE__ */ jsx(Field.Error, {
+						match: "typeMismatch",
+						children: "MCP URL must use http or https."
+					})
+				]
+			}),
+			redirectUrlField ? /* @__PURE__ */ jsxs(Field.Root, {
+				name: "redirectUrl",
+				children: [/* @__PURE__ */ jsx(Field.Label, { children: redirectUrlField.label }), /* @__PURE__ */ jsx(Field.Control, {
+					readOnly: true,
+					type: "url",
+					value: redirectUrl
+				})]
+			}) : null,
+			credentialFields.length > 0 ? /* @__PURE__ */ jsxs(Fieldset.Root, {
+				variant: "plain",
+				children: [/* @__PURE__ */ jsx(Fieldset.Legend, { children: auth?.label ?? "Credentials" }), /* @__PURE__ */ jsx(Field.Group, { children: credentialFields.map((authField) => /* @__PURE__ */ jsxs(Field.Root, {
+					name: authField.name,
+					children: [
+						/* @__PURE__ */ jsx(Field.Label, { children: authField.label }),
+						/* @__PURE__ */ jsx(Field.Control, {
+							autoComplete: "off",
+							defaultValue: defaults?.[authField.name],
+							placeholder: authField.placeholder,
+							required: authField.required,
+							type: authField.inputType ?? "text"
+						}),
+						/* @__PURE__ */ jsxs(Field.Error, {
+							match: "valueMissing",
+							children: [authField.label, " is required."]
+						})
+					]
+				}, authField.name)) })]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "agent-connect__mcp-form-actions",
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					size: "sm",
+					disabled: submission === true,
+					focusableWhenDisabled: submission === true,
+					children: submission === true ? submittingLabel : submitLabel
+				})
+			}),
+			typeof submission === "string" ? /* @__PURE__ */ jsx("span", {
+				className: "agent-connect__mcp-form-status",
+				"aria-atomic": "true",
+				role: "alert",
+				children: submission
+			}) : status ? /* @__PURE__ */ jsx("span", {
+				className: "agent-connect__mcp-form-status",
+				"aria-atomic": "true",
+				role: "status",
+				children: status
+			}) : null
+		]
+	});
+}
+function readMcpConnectorFormValues(data) {
+	const bearerToken = readFormString(data, "bearerToken");
+	const clientId = readFormString(data, "clientId");
+	const clientSecret = readFormString(data, "clientSecret");
+	return {
+		...bearerToken ? { bearerToken } : {},
+		...clientId ? { clientId } : {},
+		...clientSecret ? { clientSecret } : {},
+		name: readFormString(data, "name"),
+		url: readFormString(data, "url")
+	};
+}
+function readFormString(data, name) {
+	const value = data[name];
+	return typeof value === "string" ? value.trim() : "";
+}
+function isCredentialAuthField(field) {
+	return field.name !== "redirectUrl";
+}
+//#endregion
+export { McpConnectorForm };

package/dist/components/{McpPluginCatalog.d.ts → agents-sdk/McpPluginCatalog.d.ts}

@@ -1,9 +1,9 @@
-import { o as McpServerCard } from "../mcp-server-catalog-CO7GAl1f.js";
-import { l as DialogProps } from "../Dialog-BD8NBKaE.js";
+import { o as McpServerCard } from "../../mcp-server-catalog-CO7GAl1f.js";
+import { l as DialogProps } from "../../Dialog-DeOSJ0Oy.js";
 import * as React from "react";
 import { MCPServersState } from "agents";
 
-//#region src/components/McpPluginCatalog.d.ts
+//#region src/components/agents-sdk/McpPluginCatalog.d.ts
 /** Optional plugin-specific copy layered over the canonical MCP server card. */
 interface McpPluginDetails {
   developerName?: string;

package/dist/components/{McpPluginCatalog.js → agents-sdk/McpPluginCatalog.js}

@@ -1,16 +1,18 @@
-import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Button } from "./Button.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 { AppIcon } from "./AppIcon.js";
-import { IconButton } from "./IconButton.js";
-import { AgentAttention, AgentAttentionBody, AgentAttentionHeader } from "./AgentAttention.js";
-import { Dialog } from "./Dialog.js";
-import { Separator } from "./Separator.js";
-import { getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState } from "../utils/mcp-server-catalog.js";
-import { SearchField } from "./SearchField.js";
+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-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-CmopcfqJ.js";
+import { Separator } from "../foundations/Separator.js";
+import { AppIcon } from "../foundations/AppIcon.js";
+import { n as getMcpServerConnectionKind, t as McpServerIcon } from "../../mcp-server-U71zhxFF.js";
+import { SearchField } from "../foundations/SearchField.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/McpPluginCatalog.tsx
+//#region src/components/agents-sdk/McpPluginCatalog.tsx
 /**
 * Searchable plugin directory backed by the same MCP cards and live Agents
 * state as {@link McpServerPicker}. Selecting a row opens the shared details
@@ -66,7 +68,7 @@ function McpPluginCatalog({ servers, mcp, detailsByServerId, featuredServerIds =
 						tooltipSide: "bottom",
 						variant: "ghost",
 						onClick: () => setSelectedServer(server),
-						children: /* @__PURE__ */ jsx(McpPluginAvatar, { server })
+						children: /* @__PURE__ */ jsx(McpServerIcon, { server })
 					}) }, `${server.id}:${server.url}`))
 				})]
 			}) : null,
@@ -110,7 +112,7 @@ function McpPluginCatalog({ servers, mcp, detailsByServerId, featuredServerIds =
 /** Reference-derived plugin detail surface without a parallel install state. */
 function McpPluginDetailsDialog({ server, details, mcp, brandName = "your AI", brandLogo = /* @__PURE__ */ jsx("img", {
 	alt: "",
-	src: new URL("../assets/think-browser-host.png", import.meta.url).href
+	src: new URL("../../assets/think-browser-host.png", import.meta.url).href
 }), disclosure = /* @__PURE__ */ jsxs(Fragment, { children: [
 	/* @__PURE__ */ jsxs("p", { children: [/* @__PURE__ */ jsx("strong", { children: "You're in control." }), " This plugin is limited to the account and permissions you approve, and you can disconnect it at any time."] }),
 	/* @__PURE__ */ jsxs("p", { children: [/* @__PURE__ */ jsx("strong", { children: "Plugins may introduce elevated risk." }), " Only connect tools you trust. A compromised plugin could use its access to read or change data in the connected service."] }),
@@ -146,7 +148,7 @@ function McpPluginDetailsDialog({ server, details, mcp, brandName = "your AI", b
 						className: "mcp-plugin-details__identity",
 						"aria-hidden": "true",
 						children: [
-							/* @__PURE__ */ jsx(McpPluginAvatar, {
+							/* @__PURE__ */ jsx(McpServerIcon, {
 								server,
 								size: "xl",
 								variant: "surface"
@@ -201,7 +203,7 @@ function McpPluginCard({ server, details, mcp, onSelect }) {
 			size: "xl",
 			variant: "ghost",
 			onClick: onSelect,
-			children: [/* @__PURE__ */ jsx(McpPluginAvatar, { server }), /* @__PURE__ */ jsxs("span", {
+			children: [/* @__PURE__ */ jsx(McpServerIcon, { server }), /* @__PURE__ */ jsxs("span", {
 				className: "mcp-plugin-catalog__card-copy",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "mcp-plugin-catalog__card-name sigvelo-truncate",
@@ -224,19 +226,6 @@ function McpPluginCard({ server, details, mcp, onSelect }) {
 		})]
 	});
 }
-function McpPluginAvatar({ server, size = "lg", variant }) {
-	const src = getMcpServerIconSrc(server);
-	return /* @__PURE__ */ jsxs(AppIcon.Root, {
-		size,
-		variant,
-		"aria-hidden": "true",
-		children: [src ? /* @__PURE__ */ jsx(AppIcon.Image, {
-			alt: "",
-			fit: "contain",
-			src
-		}, src) : null, /* @__PURE__ */ jsx(AppIcon.Fallback, { children: server.name.slice(0, 1) })]
-	});
-}
 function McpPluginDialogActions({ projection, server, onConnect, onDisconnect }) {
 	const [action, setAction] = React.useState({ pending: false });
 	if (!projection) return null;
@@ -255,7 +244,7 @@ function McpPluginDialogActions({ projection, server, onConnect, onDisconnect })
 			console.error(`MCP server ${disconnect ? "disconnect" : "connect"} failed`, error);
 			setAction({
 				pending: false,
-				error: error instanceof Error ? error.message : String(error)
+				error: formatErrorMessage(error)
 			});
 		}
 	}
@@ -285,25 +274,12 @@ function McpPluginDialogActions({ projection, server, onConnect, onDisconnect })
 }
 function getServerProjection(server, mcp) {
 	const entry = getMcpServerEntry(server, mcp);
-	if (!entry) return {
-		kind: "available",
-		statusLabel: "Available"
-	};
-	const state = getMcpServerRuntimeState(entry[1]);
-	if (state === "ready") return {
-		kind: "connected",
-		serverId: entry[0],
-		statusLabel: "Connected"
-	};
-	if (state === "connecting" || state === "discovering" || state === "connected" && !entry[1].error) return {
-		kind: "connecting",
-		serverId: entry[0],
-		statusLabel: "Connecting"
-	};
+	const kind = getMcpServerConnectionKind(entry?.[1]);
+	const statusLabel = kind === "connected" ? "Connected" : kind === "connecting" ? "Connecting" : kind === "reconnect" ? "Needs attention" : "Available";
 	return {
-		kind: "reconnect",
-		serverId: entry[0],
-		statusLabel: "Needs attention"
+		kind,
+		serverId: entry?.[0],
+		statusLabel
 	};
 }
 function getDialogTitle(name, kind, brandName) {

package/dist/components/{McpServerPicker.d.ts → agents-sdk/McpServerPicker.d.ts}

@@ -1,11 +1,19 @@
-import { s as MenuItemProps, t as Menu } from "../Menu-L6MZm-7N.js";
-import { o as McpServerCard } from "../mcp-server-catalog-CO7GAl1f.js";
-import { McpConnectorFormProps } from "./AgentConnection.js";
-import { l as DialogProps } from "../Dialog-BD8NBKaE.js";
+import { s as MenuItemProps, t as Menu } from "../../Menu-DVmjBIuM.js";
+import { o as McpServerCard } from "../../mcp-server-catalog-CO7GAl1f.js";
+import { McpConnectorFormProps } from "./McpConnectorForm.js";
+import { l as DialogProps } from "../../Dialog-DeOSJ0Oy.js";
 import * as React from "react";
 import { MCPServersState } from "agents";
 
-//#region src/components/McpServerPicker.d.ts
+//#region src/components/_internal/MenuDisclosureGroup.d.ts
+interface MenuDisclosureGroupProps extends Omit<React.ComponentProps<typeof Menu.Group>, "children"> {
+  label: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  triggerClassName?: string;
+}
+//#endregion
+//#region src/components/agents-sdk/McpServerPicker.d.ts
 interface McpServerPickerProps {
   /** MCP servers to show in the plus-menu picker. */
   servers: readonly McpServerCard[];
@@ -24,7 +32,7 @@ interface McpServerPickerProps {
   triggerLabel?: string;
 }
 type McpServerPickerItemsProps = Omit<McpServerPickerProps, "sideOffset" | "triggerLabel">;
-interface McpServerPickerGroupProps extends Omit<React.ComponentProps<typeof Menu.Group>, "children" | "label"> {
+interface McpServerPickerGroupProps extends Omit<MenuDisclosureGroupProps, "children" | "label" | "triggerClassName"> {
   /** Quiet visible heading for a related set of picker actions. */
   label: React.ReactNode;
   children: React.ReactNode;