@mcp-b/react-components 0.28.0 → 0.30.0

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-B1Qw05te.js";
+import { Button } from "../foundations/Button.js";
+import { i as formatErrorMessage } from "../../format-CmopcfqJ.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 * 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 { i as formatErrorMessage } from "../../format-CmopcfqJ.js";
+import { Field } from "../foundations/Field.js";
+import { Form } from "../foundations/Form.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-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 { 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 { 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,11 @@
-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/agents-sdk/McpServerPicker.d.ts
 interface McpServerPickerProps {
   /** MCP servers to show in the plus-menu picker. */
   servers: readonly McpServerCard[];

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

@@ -1,15 +1,16 @@
-import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
-import { buttonVariants } from "./Button.js";
-import { J as SpinnerIcon, P as MinusIcon, d as CheckIcon, tt as WarningIcon } from "../icons-B4mGvCvc.js";
-import { AppIcon } from "./AppIcon.js";
-import { Dialog } from "./Dialog.js";
-import { Menu } from "./Menu.js";
-import { PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger } from "./PromptInput.js";
-import { getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState } from "../utils/mcp-server-catalog.js";
-import { McpConnectorForm } from "./AgentConnection.js";
+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 { 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 { McpConnectorForm } from "./McpConnectorForm.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/McpServerPicker.tsx
+//#region src/components/agents-sdk/McpServerPicker.tsx
 /** Manual MCP setup surface driven by the same catalog metadata as the picker. */
 function McpServerSetupDialog({ server, defaults, onOpenChange, onSubmit, redirectUrl, status }) {
 	const formDefaults = server ? {
@@ -88,7 +89,7 @@ function McpServerPickerItems({ servers, onConnect, mcp, onDisconnect, actions,
 			await callback();
 			setAction(null);
 		} catch (error) {
-			setAction({ error: error instanceof Error ? error.message : String(error) });
+			setAction({ error: formatErrorMessage(error) });
 		}
 	}
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -159,12 +160,12 @@ function McpServerPickerRow({ row, onConnect, onDisconnect, pendingAction }) {
 	const connectedServerId = entry?.[0];
 	const connectedServer = entry?.[1];
 	const state = connectedServer ? getMcpServerRuntimeState(connectedServer) : void 0;
+	const connectionKind = getMcpServerConnectionKind(connectedServer);
 	const connectKey = `connect:${server.id}:${server.url}`;
-	const connecting = state === "connecting" || state === "discovering" || state === "connected" && !connectedServer?.error;
-	const reconnectable = state === "authenticating" || state === "failed" || state === "not-connected" || state === "connected" && Boolean(connectedServer?.error);
+	const connecting = connectionKind === "connecting";
 	const pendingConnect = pendingAction === connectKey;
-	const statusText = pendingConnect ? "Connecting" : getStatusLabel(state, connectedServer?.error);
-	const disabled = !onConnect || !(!connectedServer || reconnectable) || connecting || state === "ready" || pendingAction !== null;
+	const statusText = pendingConnect ? "Connecting" : getStatusLabel(connectionKind, state);
+	const disabled = !onConnect || !(connectionKind === "available" || connectionKind === "reconnect") || pendingAction !== null;
 	const description = connectedServer?.error || server.description;
 	const disconnectPending = pendingAction === `disconnect:${connectedServerId}`;
 	let disconnectLabel = state === "ready" ? `Disconnect ${server.name}` : `Remove ${server.name}`;
@@ -183,7 +184,10 @@ function McpServerPickerRow({ row, onConnect, onDisconnect, pendingAction }) {
 			children: [
 				/* @__PURE__ */ jsx("span", {
 					className: "mcp-server-picker__icon",
-					children: /* @__PURE__ */ jsx(McpServerIcon, { server })
+					children: /* @__PURE__ */ jsx(McpServerIcon, {
+						server,
+						size: "xs"
+					})
 				}),
 				/* @__PURE__ */ jsxs("span", {
 					className: "mcp-server-picker__copy",
@@ -207,9 +211,8 @@ function McpServerPickerRow({ row, onConnect, onDisconnect, pendingAction }) {
 				className: "mcp-server-picker__row-status",
 				title: statusText,
 				children: /* @__PURE__ */ jsx(StatusIcon, {
-					error: connectedServer.error,
-					pending: pendingConnect,
-					state
+					connectionKind,
+					pending: pendingConnect
 				})
 			}), connectedServerId && onDisconnect ? /* @__PURE__ */ jsxs(Menu.Item, {
 				className: "mcp-server-picker__action",
@@ -225,17 +228,16 @@ function McpServerPickerRow({ row, onConnect, onDisconnect, pendingAction }) {
 		}) : null]
 	});
 }
-function StatusIcon({ error, pending, state }) {
-	if (pending || state === "connecting" || state === "discovering" || state === "connected" && !error) return /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 });
-	if (state === "ready") return /* @__PURE__ */ jsx(CheckIcon, { size: 14 });
+function StatusIcon({ connectionKind, pending }) {
+	if (pending || connectionKind === "connecting") return /* @__PURE__ */ jsx(SpinnerIcon, { size: 14 });
+	if (connectionKind === "connected") return /* @__PURE__ */ jsx(CheckIcon, { size: 14 });
 	return /* @__PURE__ */ jsx(WarningIcon, { size: 14 });
 }
-function getStatusLabel(state, error) {
-	if (state === "ready") return "Connected";
-	if (state === "connecting" || state === "discovering" || state === "connected" && !error) return "Connecting";
+function getStatusLabel(connectionKind, state) {
+	if (connectionKind === "connected") return "Connected";
+	if (connectionKind === "connecting") return "Connecting";
 	if (state === "authenticating") return "Reconnect to sign in";
-	if (state === "connected" || state === "failed" || state === "not-connected") return "Reconnect";
-	return "";
+	return connectionKind === "reconnect" ? "Reconnect" : "";
 }
 function getPickerRows(servers, mcp) {
 	const catalogRows = servers.map((server) => ({
@@ -257,7 +259,7 @@ function getPickerRows(servers, mcp) {
 function groupPickerRows(rows) {
 	const groups = /* @__PURE__ */ new Map();
 	for (const row of rows) {
-		const key = (row.entry ? getMcpServerRuntimeState(row.entry[1]) : void 0) === "ready" ? "Connected" : row.server.category === "Auto" ? "MCP connectors" : row.server.category === "Manual" ? "Manual setup" : row.server.category ?? "Other";
+		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 group = groups.get(key) ?? [];
 		group.push(row);
 		groups.set(key, group);
@@ -270,17 +272,5 @@ function groupPickerRows(rows) {
 	];
 	return [...groups.entries()].sort(([left], [right]) => (order.indexOf(left) === -1 ? order.length : order.indexOf(left)) - (order.indexOf(right) === -1 ? order.length : order.indexOf(right)));
 }
-function McpServerIcon({ server }) {
-	const src = getMcpServerIconSrc(server);
-	return /* @__PURE__ */ jsxs(AppIcon.Root, {
-		size: "xs",
-		"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) })]
-	});
-}
 //#endregion
 export { McpServerPicker, McpServerPickerAction, McpServerPickerGroup, McpServerPickerItems, McpServerSetupDialog };

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

@@ -1,11 +1,11 @@
-import { r as ButtonProps } from "../Button-SBIz6Lqi.js";
-import { l as DialogProps } from "../Dialog-BD8NBKaE.js";
-import { SeparatorProps } from "./Separator.js";
+import { r as ButtonProps } from "../../Button-CZt3yywF.js";
+import { l as DialogProps } from "../../Dialog-DeOSJ0Oy.js";
+import { SeparatorProps } from "../foundations/Separator.js";
 import * as React from "react";
 import Cloudflare from "cloudflare";
 import { AiModelsSearchObject } from "@cloudflare/workers-types";
 
-//#region src/components/ModelSelector.d.ts
+//#region src/components/agents-sdk/ModelSelector.d.ts
 type CloudflareModelSelectorModels = readonly Cloudflare.AI.ModelListResponse[] | readonly CloudflareModelCatalogEntry[] | readonly AiModelsSearchObject[] | readonly string[];
 interface CloudflareModelCatalogEntry {
   readonly model_id: string;

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

@@ -1,2 +1,2 @@
-import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorSource, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-CRdvHT_b.js";
+import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorSource, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../../ModelSelector-DzdEs2fX.js";
 export { CloudflareModelSelector, ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorSource, ModelSelectorTrigger, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };