@mcp-b/react-components 0.10.0 → 0.11.0

package/dist/components/AgentConnection.d.ts

@@ -1,4 +1,4 @@
-import { McpServerCard, McpServerManualSetup, McpServerSetupAuth } from "../utils/mcp-server-catalog.js";
+import { McpServerSetupAuth } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 
 //#region src/components/AgentConnection.d.ts
@@ -25,19 +25,14 @@ type NanitesAgentConnectionOptions = {
 type AgentConnectionPanelProps = {
   readonly className?: string;
   readonly commands?: readonly AgentConnectionCommand[];
-  readonly dcrMcpServers?: readonly McpServerCard[];
   readonly defaultTarget?: AgentConnectionTarget;
   readonly headingLevel?: 2 | 3;
-  readonly manualMcpServers?: readonly McpServerCard[];
   readonly origin?: string;
   readonly section?: boolean;
 };
 type AgentConnectionPopoverProps = Omit<AgentConnectionPanelProps, "section"> & {
   readonly className?: string;
 };
-type McpServerSetupProps = {
-  readonly setup: McpServerManualSetup;
-};
 type McpConnectorFormValues = {
   readonly bearerToken?: string;
   readonly clientId?: string;
@@ -46,11 +41,10 @@ type McpConnectorFormValues = {
   readonly scope?: string;
   readonly url: string;
 };
-type McpConnectorFormDefaults = Partial<Pick<McpConnectorFormValues, "name" | "url">>;
 type McpConnectorFormProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "status"> & {
   /** Authentication metadata that decides which credential fields render. */readonly auth?: McpServerSetupAuth; /** Label for the OAuth authorization button. */
   readonly authorizeLabel?: string; /** Initial MCP name and URL values. */
-  readonly defaults?: McpConnectorFormDefaults; /** Pattern used to validate the MCP name field. */
+  readonly defaults?: Partial<Pick<McpConnectorFormValues, "name" | "url">>; /** Pattern used to validate the MCP name field. */
   readonly namePattern?: string; /** OAuth URL waiting for the user to authorize, when available. */
   readonly pendingAuthUrl?: string | null; /** Read-only redirect URL shown for manual OAuth client setup. */
   readonly redirectUrl?: string; /** Inline connection status announced politely to assistive tech. */
@@ -81,16 +75,11 @@ declare function buildNanitesAgentConnectionCommands(origin: string, {
 declare function AgentConnectionPanel({
   className,
   commands: commandsProp,
-  dcrMcpServers,
   defaultTarget,
   headingLevel,
-  manualMcpServers,
   origin,
   section
 }: AgentConnectionPanelProps): React.JSX.Element | null;
-declare function McpServerSetup({
-  setup
-}: McpServerSetupProps): React.JSX.Element;
 /** Collects MCP connector settings and optional credentials with native form validation. */
 declare function McpConnectorForm({
   auth,
@@ -118,4 +107,4 @@ declare function AgentConnectionPopover({
   ...props
 }: AgentConnectionPopoverProps): React.JSX.Element;
 //#endregion
-export { AgentConnectionCommand, AgentConnectionPanel, AgentConnectionPanelProps, AgentConnectionPopover, AgentConnectionPopoverProps, AgentConnectionTarget, Connection, ConnectionProps, McpConnectorForm, McpConnectorFormDefaults, McpConnectorFormProps, McpConnectorFormValues, McpServerSetup, McpServerSetupProps, NanitesAgentConnectionOptions, buildNanitesAgentConnectionCommands };
+export { AgentConnectionCommand, AgentConnectionPanel, AgentConnectionPanelProps, AgentConnectionPopover, AgentConnectionPopoverProps, AgentConnectionTarget, Connection, ConnectionProps, McpConnectorForm, McpConnectorFormProps, McpConnectorFormValues, NanitesAgentConnectionOptions, buildNanitesAgentConnectionCommands };

package/dist/components/AgentConnection.js

@@ -5,7 +5,6 @@ import { Button } from "./Button.js";
 import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-XNQOupQ3.js";
 import { Field } from "./Field.js";
 import { Form } from "./Form.js";
-import { DCR_MCP_SERVER_CARDS, MANUAL_MCP_SERVER_CARDS, getMcpServerIconSrc } from "../utils/mcp-server-catalog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AgentConnection.tsx
@@ -104,7 +103,7 @@ function buildNanitesAgentConnectionCommands(origin, { mcpName = "nanites", plug
 * Use inside setup screens where users need Codex, Claude Code, skill-only,
 * or raw MCP JSON connection instructions.
 */
-function AgentConnectionPanel({ className, commands: commandsProp, dcrMcpServers = DCR_MCP_SERVER_CARDS, defaultTarget = "codex", headingLevel = 2, manualMcpServers = MANUAL_MCP_SERVER_CARDS, origin, section = true }) {
+function AgentConnectionPanel({ className, commands: commandsProp, defaultTarget = "codex", headingLevel = 2, origin, section = true }) {
 	const commands = React.useMemo(() => commandsProp ?? buildNanitesAgentConnectionCommands(origin ?? getBrowserOrigin()), [commandsProp, origin]);
 	const [target, setTarget] = React.useState(defaultTarget);
 	const selected = commands.find((command) => command.target === target) ?? commands[0];
@@ -150,72 +149,7 @@ function AgentConnectionPanel({ className, commands: commandsProp, dcrMcpServers
 				code: selected.code,
 				language: selected.language,
 				children: [/* @__PURE__ */ jsxs(CodeBlockHeader, { children: [/* @__PURE__ */ jsx(CodeBlockTitle, { children: selected.label }), /* @__PURE__ */ jsx(CodeBlockActions, { children: /* @__PURE__ */ jsx(CodeBlockCopyButton, {}) })] }), /* @__PURE__ */ jsx(CodeBlockContainer, { children: /* @__PURE__ */ jsx(CodeBlockContent, {}) })]
-			}),
-			dcrMcpServers.length > 0 ? /* @__PURE__ */ jsx(McpServerList, {
-				heading: "Auto",
-				servers: dcrMcpServers
-			}) : null,
-			manualMcpServers.length > 0 ? /* @__PURE__ */ jsx(McpServerList, {
-				heading: "Manual",
-				servers: manualMcpServers
-			}) : null
-		]
-	});
-}
-function McpServerList({ heading, servers }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "agent-connect__mcp",
-		children: [/* @__PURE__ */ jsx("p", {
-			className: "agent-connect__mcp-heading",
-			children: heading
-		}), /* @__PURE__ */ jsx("ul", {
-			className: "agent-connect__mcp-list",
-			role: "list",
-			children: servers.map((server) => /* @__PURE__ */ jsxs("li", {
-				className: "agent-connect__mcp-item",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "agent-connect__mcp-icon",
-					children: renderMcpServerIcon(server)
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "agent-connect__mcp-copy",
-					children: [
-						/* @__PURE__ */ jsx("a", {
-							className: "agent-connect__mcp-name",
-							href: server.url,
-							target: "_blank",
-							rel: "noreferrer",
-							children: server.name
-						}),
-						server.description ? /* @__PURE__ */ jsx("span", {
-							className: "agent-connect__mcp-description",
-							children: server.description
-						}) : null,
-						server.manualSetup ? /* @__PURE__ */ jsx(McpServerSetup, { setup: server.manualSetup }) : null
-					]
-				})]
-			}, server.id))
-		})]
-	});
-}
-function McpServerSetup({ setup }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "agent-connect__mcp-setup",
-		children: [
-			/* @__PURE__ */ jsx("p", { children: setup.description }),
-			/* @__PURE__ */ jsxs("p", {
-				className: "agent-connect__mcp-setup-auth",
-				children: [/* @__PURE__ */ jsx("span", { children: setup.auth.label }), setup.auth.fields.length > 0 ? /* @__PURE__ */ jsx("span", { children: setup.auth.fields.map((field) => field.label).join(", ") }) : null]
-			}),
-			setup.links.length > 0 ? /* @__PURE__ */ jsx("ul", {
-				className: "agent-connect__mcp-setup-links",
-				role: "list",
-				children: setup.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
-					href: link.url,
-					target: "_blank",
-					rel: "noreferrer",
-					children: link.label
-				}) }, `${link.label}:${link.url}`))
-			}) : null
+			})
 		]
 	});
 }
@@ -362,28 +296,6 @@ function readFormString(data, name) {
 function isCredentialAuthField(field) {
 	return field.name !== "redirectUrl";
 }
-function renderMcpServerIcon(server) {
-	const src = getMcpServerIconSrc(server);
-	if (src) return /* @__PURE__ */ jsx(McpServerIconImage, {
-		src,
-		name: server.name
-	});
-	return server.name.slice(0, 1);
-}
-function McpServerIconImage({ src, name }) {
-	const [failed, setFailed] = React.useState(false);
-	if (failed) return name.slice(0, 1);
-	return /* @__PURE__ */ jsx("img", {
-		src,
-		alt: "",
-		width: 16,
-		height: 16,
-		loading: "lazy",
-		decoding: "async",
-		referrerPolicy: "no-referrer",
-		onError: () => setFailed(true)
-	});
-}
 /**
 * Compact popover trigger for showing AgentConnectionPanel inline.
 */
@@ -412,4 +324,4 @@ function AgentConnectionPopover({ className, ...props }) {
 	}) })] });
 }
 //#endregion
-export { AgentConnectionPanel, AgentConnectionPopover, Connection, McpConnectorForm, McpServerSetup, buildNanitesAgentConnectionCommands };
+export { AgentConnectionPanel, AgentConnectionPopover, Connection, McpConnectorForm, buildNanitesAgentConnectionCommands };

package/dist/components/BrowserRunPanel.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { BrowserLiveView } from "agents/browser";
+
+//#region src/components/BrowserRunPanel.d.ts
+interface BrowserRunPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /** Host-side Browser Run Live View data from `connector.liveView()`. */
+  liveView?: BrowserLiveView;
+  /** Refreshes the Live View URL before it expires. */
+  onRefresh?: () => void | Promise<void>;
+  /** Closes the app-owned shared browser session. */
+  onCloseSession?: () => void | Promise<void>;
+  /** True while the app is fetching Live View data. */
+  loading?: boolean;
+  /** Error from the app-owned browser session fetch/refresh path. */
+  error?: React.ReactNode;
+  /** Panel heading. */
+  label?: React.ReactNode;
+  /** Empty state shown when there is no shared browser session. */
+  empty?: React.ReactNode;
+  /** Fallback passed through to `BrowserLiveView` after URL expiry/failure. */
+  fallback?: React.ReactNode;
+}
+/**
+ * Right-side Browser Run panel for `ThinkFullApp.workbenchPanels`.
+ *
+ * The app owns `createBrowserRuntime()`, `connector.liveView()`, polling, and
+ * session cleanup. This component only renders upstream `BrowserLiveView`
+ * data and calls app-provided refresh/close callbacks.
+ */
+declare function BrowserRunPanel({
+  liveView,
+  onRefresh,
+  onCloseSession,
+  loading,
+  error,
+  label,
+  empty,
+  fallback,
+  className,
+  ref,
+  ...props
+}: BrowserRunPanelProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { BrowserRunPanel, BrowserRunPanelProps };

package/dist/components/BrowserRunPanel.js

@@ -0,0 +1,123 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { C as MonitorIcon, L as XIcon, M as SpinnerIcon, k as RefreshIcon } from "../icons-D2Q5n5C1.js";
+import { Button } from "./Button.js";
+import { BrowserLiveView } from "./BrowserLiveView.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/BrowserRunPanel.tsx
+function isInspectablePage(target) {
+	const pageUrl = target.pageUrl;
+	return Boolean(pageUrl && !pageUrl.startsWith("about:") && !pageUrl.startsWith("chrome:") && !pageUrl.startsWith("devtools:"));
+}
+function targetLabel(target) {
+	return target.title || target.pageUrl || target.targetId;
+}
+function pickTarget(targets, targetId) {
+	return (targetId ? targets.find((target) => target.targetId === targetId) : void 0) ?? targets.find(isInspectablePage) ?? targets[0];
+}
+function BrowserRunPanelState({ children, role, tone = "neutral" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "browser-run-panel__state",
+		"data-tone": tone,
+		role: role ?? (tone === "danger" ? "alert" : void 0),
+		children
+	});
+}
+/**
+* Right-side Browser Run panel for `ThinkFullApp.workbenchPanels`.
+*
+* The app owns `createBrowserRuntime()`, `connector.liveView()`, polling, and
+* session cleanup. This component only renders upstream `BrowserLiveView`
+* data and calls app-provided refresh/close callbacks.
+*/
+function BrowserRunPanel({ liveView, onRefresh, onCloseSession, loading, error, label = "Browser", empty = "No live browser session", fallback, className, ref, ...props }) {
+	const [selectedTargetId, setSelectedTargetId] = React.useState();
+	const [receivedAt, setReceivedAt] = React.useState(() => Date.now());
+	React.useEffect(() => {
+		if (liveView) setReceivedAt(Date.now());
+	}, [liveView]);
+	const targets = liveView?.targets ?? [];
+	const target = pickTarget(targets, selectedTargetId);
+	const pageLabel = target ? targetLabel(target) : "Waiting for a shared browser session";
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		className: cx("browser-run-panel", className),
+		"aria-label": typeof label === "string" ? label : "Browser",
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "browser-run-panel__header",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "browser-run-panel__identity",
+					children: [/* @__PURE__ */ jsx(MonitorIcon, { className: "browser-run-panel__icon" }), /* @__PURE__ */ jsxs("div", {
+						className: "browser-run-panel__title-block",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "browser-run-panel__title",
+							children: label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "browser-run-panel__url",
+							title: pageLabel,
+							children: pageLabel
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "browser-run-panel__actions",
+					children: [onRefresh ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						color: "neutral",
+						size: "icon-sm",
+						"aria-label": "Refresh browser view",
+						disabled: loading,
+						onClick: () => void onRefresh(),
+						children: /* @__PURE__ */ jsx(RefreshIcon, {})
+					}) : null, onCloseSession ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						color: "neutral",
+						size: "icon-sm",
+						"aria-label": "Close browser session",
+						onClick: () => void onCloseSession(),
+						children: /* @__PURE__ */ jsx(XIcon, {})
+					}) : null]
+				})]
+			}),
+			targets.length > 1 ? /* @__PURE__ */ jsx("div", {
+				className: "browser-run-panel__targets",
+				"aria-label": "Browser tabs",
+				children: targets.map((candidate) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "browser-run-panel__target",
+					"aria-pressed": candidate.targetId === target?.targetId,
+					onClick: () => setSelectedTargetId(candidate.targetId),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "browser-run-panel__target-title",
+						children: targetLabel(candidate)
+					}), candidate.pageUrl ? /* @__PURE__ */ jsx("span", {
+						className: "browser-run-panel__target-url",
+						children: candidate.pageUrl
+					}) : null]
+				}, candidate.targetId))
+			}) : null,
+			error ? /* @__PURE__ */ jsx(BrowserRunPanelState, {
+				tone: "danger",
+				children: error
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "browser-run-panel__body",
+				"aria-busy": loading || void 0,
+				children: target && liveView ? /* @__PURE__ */ jsx(BrowserLiveView, {
+					url: target.url,
+					expiresAt: receivedAt + liveView.expiresInMs,
+					pageTitle: target.title ?? target.pageUrl,
+					fallback
+				}) : loading ? /* @__PURE__ */ jsxs(BrowserRunPanelState, {
+					role: "status",
+					children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "browser-run-panel__spinner" }), "Loading browser session"]
+				}) : /* @__PURE__ */ jsx(BrowserRunPanelState, { children: empty })
+			})
+		]
+	});
+}
+//#endregion
+export { BrowserRunPanel };

package/dist/components/McpServerConnections.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { MCPServer, MCPServersState } from "agents";
+
+//#region src/components/McpServerConnections.d.ts
+type McpServerConnectionAction = (serverId: string, server: MCPServer) => void | Promise<void>;
+interface McpServerConnectionsProps extends React.HTMLAttributes<HTMLElement> {
+  /** Upstream Agents SDK MCP state from `getMcpServers()` or `useAgent({ onMcpUpdate })`. */
+  mcp: MCPServersState;
+  /** Optional heading for the connected-server list. */
+  heading?: React.ReactNode;
+  /** Called when an OAuth server needs user authorization. */
+  onAuthorize?: McpServerConnectionAction;
+  /** Called when a failed server should retry through an app-owned Agent RPC. */
+  onRetry?: McpServerConnectionAction;
+  /** Called when a ready/connected server should refresh discovery through an app-owned Agent RPC. */
+  onRefresh?: McpServerConnectionAction;
+  /** Called when a server transport should close but the stored config should remain. */
+  onDisconnect?: McpServerConnectionAction;
+  /** Should call `removeMcpServer(serverId)`; Agents SDK disconnects and removes storage. */
+  onRemove?: McpServerConnectionAction;
+}
+/**
+ * Runtime MCP server list. Add servers with `McpServerPicker`; render connected
+ * state here from the upstream Agents SDK `MCPServersState`.
+ */
+declare function McpServerConnections({
+  className,
+  heading,
+  mcp,
+  onAuthorize,
+  onDisconnect,
+  onRefresh,
+  onRemove,
+  onRetry,
+  ref,
+  ...props
+}: McpServerConnectionsProps & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+//#endregion
+export { McpServerConnections, McpServerConnectionsProps };

package/dist/components/McpServerConnections.js

@@ -0,0 +1,188 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { F as WarningIcon, L as XIcon, M as SpinnerIcon, a as CheckIcon, k as RefreshIcon } from "../icons-D2Q5n5C1.js";
+import { Button } from "./Button.js";
+import { Badge } from "./Badge.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/McpServerConnections.tsx
+/**
+* Runtime MCP server list. Add servers with `McpServerPicker`; render connected
+* state here from the upstream Agents SDK `MCPServersState`.
+*/
+function McpServerConnections({ className, heading = "Connected MCP servers", mcp, onAuthorize, onDisconnect, onRefresh, onRemove, onRetry, ref, ...props }) {
+	const [pendingAction, setPendingAction] = React.useState(null);
+	const entries = Object.entries(mcp.servers);
+	async function runAction(action, serverId, server, handler) {
+		if (!handler) return;
+		setPendingAction(`${action}:${serverId}`);
+		try {
+			await handler(serverId, server);
+		} finally {
+			setPendingAction(null);
+		}
+	}
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		className: cx("mcp-server-connections", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mcp-server-connections__header",
+			children: [/* @__PURE__ */ jsx("h2", { children: heading }), /* @__PURE__ */ jsxs("span", {
+				className: "mcp-server-connections__summary",
+				children: [
+					entries.length,
+					" ",
+					entries.length === 1 ? "server" : "servers"
+				]
+			})]
+		}), entries.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "mcp-server-connections__empty",
+			children: "No MCP servers connected."
+		}) : /* @__PURE__ */ jsx("ul", {
+			className: "mcp-server-connections__list",
+			role: "list",
+			children: entries.map(([serverId, server]) => {
+				const counts = getServerCapabilityCounts(mcp, serverId);
+				const status = getServerStatus(server);
+				const state = server.state;
+				const pending = (action) => pendingAction === `${action}:${serverId}`;
+				return /* @__PURE__ */ jsxs("li", {
+					className: "mcp-server-connections__item",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "mcp-server-connections__main",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "mcp-server-connections__title-row",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "mcp-server-connections__name",
+									children: server.name
+								}), /* @__PURE__ */ jsxs(Badge, {
+									color: status.color,
+									size: "sm",
+									className: "mcp-server-connections__status",
+									children: [status.icon, status.label]
+								})]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "mcp-server-connections__url",
+								children: server.server_url
+							}),
+							server.error ? /* @__PURE__ */ jsx("p", {
+								className: "mcp-server-connections__error",
+								children: server.error
+							}) : null,
+							server.instructions ? /* @__PURE__ */ jsx("p", {
+								className: "mcp-server-connections__instructions",
+								children: server.instructions
+							}) : null,
+							/* @__PURE__ */ jsxs("p", {
+								className: "mcp-server-connections__capabilities",
+								children: [
+									counts.tools,
+									" tools, ",
+									counts.prompts,
+									" prompts, ",
+									counts.resources,
+									" resources"
+								]
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "mcp-server-connections__actions",
+						children: [
+							state === "authenticating" && onAuthorize ? /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								size: "xs",
+								variant: "outline",
+								color: "primary",
+								disabled: pending("authorize"),
+								onClick: () => void runAction("authorize", serverId, server, onAuthorize),
+								children: pending("authorize") ? "Opening" : "Authorize"
+							}) : null,
+							state === "failed" && onRetry ? /* @__PURE__ */ jsxs(Button, {
+								type: "button",
+								size: "xs",
+								variant: "outline",
+								color: "neutral",
+								disabled: pending("retry"),
+								onClick: () => void runAction("retry", serverId, server, onRetry),
+								children: [/* @__PURE__ */ jsx(RefreshIcon, {}), pending("retry") ? "Retrying" : "Retry"]
+							}) : null,
+							(state === "ready" || state === "connected") && onRefresh ? /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								size: "icon-xs",
+								variant: "ghost",
+								color: "neutral",
+								"aria-label": `Refresh ${server.name} capabilities`,
+								disabled: pending("refresh"),
+								onClick: () => void runAction("refresh", serverId, server, onRefresh),
+								children: /* @__PURE__ */ jsx(RefreshIcon, {})
+							}) : null,
+							state !== "failed" && onDisconnect ? /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								size: "xs",
+								variant: "outline",
+								color: "neutral",
+								disabled: pending("disconnect"),
+								onClick: () => void runAction("disconnect", serverId, server, onDisconnect),
+								children: pending("disconnect") ? "Disconnecting" : "Disconnect"
+							}) : null,
+							onRemove ? /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								size: "icon-xs",
+								variant: "ghost",
+								color: "destructive",
+								"aria-label": `Remove ${server.name}`,
+								disabled: pending("remove"),
+								onClick: () => void runAction("remove", serverId, server, onRemove),
+								children: /* @__PURE__ */ jsx(XIcon, {})
+							}) : null
+						]
+					})]
+				}, serverId);
+			})
+		})]
+	});
+}
+function getServerCapabilityCounts(mcp, serverId) {
+	return {
+		tools: mcp.tools.filter((tool) => tool.serverId === serverId).length,
+		prompts: mcp.prompts.filter((prompt) => prompt.serverId === serverId).length,
+		resources: mcp.resources.filter((resource) => resource.serverId === serverId).length
+	};
+}
+function getServerStatus(server) {
+	const state = server.state;
+	if (state === "ready") return {
+		color: "success",
+		icon: /* @__PURE__ */ jsx(CheckIcon, {}),
+		label: "Ready"
+	};
+	if (state === "failed") return {
+		color: "destructive",
+		icon: /* @__PURE__ */ jsx(WarningIcon, {}),
+		label: "Failed"
+	};
+	if (state === "authenticating") return {
+		color: "warning",
+		icon: /* @__PURE__ */ jsx(WarningIcon, {}),
+		label: "Authorize"
+	};
+	if (state === "connecting") return {
+		color: "neutral",
+		icon: /* @__PURE__ */ jsx(SpinnerIcon, { className: "mcp-server-connections__spinner" }),
+		label: "Connecting"
+	};
+	if (state === "discovering") return {
+		color: "neutral",
+		icon: /* @__PURE__ */ jsx(SpinnerIcon, { className: "mcp-server-connections__spinner" }),
+		label: "Discovering"
+	};
+	return {
+		color: "neutral",
+		icon: /* @__PURE__ */ jsx(CheckIcon, {}),
+		label: "Connected"
+	};
+}
+//#endregion
+export { McpServerConnections };

package/dist/styles/agent-connection.css

@@ -141,180 +141,18 @@
   line-height: 1.5;
 }
 
-.agent-connect__mcp {
-  display: grid;
-  gap: 0.5rem;
-  min-inline-size: 0;
-}
-
-.agent-connect__mcp-heading {
-  margin: 0;
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.74rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
-}
-
-.agent-connect__mcp-list {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.35rem;
-  max-block-size: 24rem;
-  margin: 0;
-  padding: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  list-style: none;
-}
-
-.agent-connect__mcp-item {
-  display: grid;
-  grid-template-columns: 1.625rem minmax(0, 1fr);
-  gap: 0.5rem;
-  align-items: start;
-  min-inline-size: 0;
-  padding: 0.5rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  background: var(--sigvelo-color-surface);
-}
-
-.agent-connect__mcp-icon {
-  display: grid;
-  place-items: center;
-  inline-size: 1.625rem;
-  block-size: 1.625rem;
-  border-radius: var(--sigvelo-radius-sm);
-  background: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.72rem;
-  font-weight: var(--sigvelo-font-weight-bold);
-  line-height: 1;
-}
-
-.agent-connect__mcp-icon img {
-  display: block;
-  max-inline-size: 1rem;
-  max-block-size: 1rem;
-}
-
-.agent-connect__mcp-copy {
-  display: grid;
-  gap: 0.08rem;
-  min-inline-size: 0;
-}
-
-.agent-connect__mcp-name {
-  color: var(--sigvelo-color-text);
-  font-size: 0.78rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.2;
-  overflow-wrap: anywhere;
-  text-decoration: none;
-}
-
-.agent-connect__mcp-name:hover {
-  color: var(--sigvelo-color-primary-text);
-  text-decoration: underline;
-  text-underline-offset: 0.16em;
-}
-
-.agent-connect__mcp-name:focus-visible {
-  outline: 2px solid var(--sigvelo-color-focus);
-  outline-offset: 2px;
-}
-
-.agent-connect__mcp-description {
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.7rem;
-  line-height: 1.25;
-  overflow-wrap: anywhere;
-}
-
-.agent-connect__mcp-setup {
-  display: grid;
-  gap: 0.3rem;
-  margin-block-start: 0.2rem;
-  min-inline-size: 0;
-}
-
-.agent-connect__mcp-setup p {
-  margin: 0;
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.68rem;
-  line-height: 1.3;
-  overflow-wrap: anywhere;
-}
-
-.agent-connect__mcp-setup-auth {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-}
-
-.agent-connect__mcp-setup-auth span:first-child {
-  color: var(--sigvelo-color-text);
-  font-weight: var(--sigvelo-font-weight-semibold);
-}
-
-.agent-connect__mcp-setup-links {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.agent-connect__mcp-setup-links a {
-  display: inline-flex;
-  align-items: center;
-  min-block-size: 1.35rem;
-  padding: 0 0.35rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-sm);
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.65rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.1;
-  text-decoration: none;
-}
-
-.agent-connect__mcp-setup-links a:hover {
-  border-color: var(--sigvelo-color-primary-border-muted);
-  color: var(--sigvelo-color-primary-text);
-}
-
-.agent-connect__mcp-setup-links a:focus-visible {
-  outline: 2px solid var(--sigvelo-color-focus);
-  outline-offset: 2px;
-}
-
 .agent-connect__mcp-form {
   display: grid;
   gap: 0.75rem;
   min-inline-size: 0;
 }
 
-.agent-connect__mcp-form--row {
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
-  align-items: end;
-  padding: 0.75rem;
-  background: var(--sigvelo-color-surface);
-}
-
 .agent-connect__mcp-form-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }
 
-.agent-connect__mcp-form--row .agent-connect__mcp-form-actions {
-  align-self: end;
-}
-
 .agent-connect__mcp-form-status {
   align-self: end;
   min-inline-size: 0;
@@ -340,10 +178,6 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .agent-connect__mcp-list {
-    grid-template-columns: 1fr;
-  }
-
   .agent-connect-popover {
     inline-size: min(24rem, calc(100dvi - 1.5rem));
   }

package/dist/styles/browser-run-panel.css

@@ -0,0 +1,178 @@
+.browser-run-panel {
+  min-inline-size: 0;
+  min-block-size: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--sigvelo-color-canvas);
+  color: var(--sigvelo-color-text);
+  font-family: var(--sigvelo-font-sans);
+}
+
+.browser-run-panel__header {
+  min-block-size: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.5rem 0.625rem;
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 62%, transparent);
+  background: var(--sigvelo-color-surface);
+}
+
+.browser-run-panel__identity {
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.browser-run-panel__icon {
+  flex: none;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.browser-run-panel__title-block {
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.browser-run-panel__title {
+  font-size: 0.8125rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.2;
+}
+
+.browser-run-panel__url,
+.browser-run-panel__target-url {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.75rem;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.browser-run-panel__actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.browser-run-panel__actions svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.browser-run-panel__targets {
+  display: flex;
+  gap: 0.375rem;
+  padding: 0.5rem 0.625rem;
+  overflow-x: auto;
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 50%, transparent);
+  background: color-mix(in oklab, var(--sigvelo-color-canvas), var(--sigvelo-color-surface) 58%);
+}
+
+.browser-run-panel__target {
+  min-inline-size: 8rem;
+  max-inline-size: 13rem;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.375rem 0.5rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 68%, transparent);
+  border-radius: var(--sigvelo-radius-md);
+  background: var(--sigvelo-color-surface);
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.browser-run-panel__target:hover {
+  border-color: var(--sigvelo-color-neutral-border);
+}
+
+.browser-run-panel__target:focus-visible {
+  outline: 2px solid var(--sigvelo-color-focus);
+  outline-offset: 2px;
+}
+
+.browser-run-panel__target[aria-pressed="true"] {
+  border-color: color-mix(in srgb, var(--sigvelo-color-primary-border) 82%, transparent);
+  background: var(--sigvelo-color-primary-bg-subtle);
+}
+
+.browser-run-panel__target-title {
+  overflow: hidden;
+  font-size: 0.75rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.browser-run-panel__body {
+  min-block-size: 0;
+  display: flex;
+  flex: 1;
+  padding: 0.625rem;
+}
+
+.browser-run-panel__body > .browser-live-view {
+  flex: 1;
+  min-block-size: 16rem;
+  aspect-ratio: auto;
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.browser-run-panel__state {
+  min-block-size: 14rem;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+  background: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.8125rem;
+  text-align: center;
+}
+
+.browser-run-panel__state[data-tone="danger"] {
+  min-block-size: auto;
+  flex: none;
+  margin: 0.625rem 0.625rem 0;
+  border-color: var(--sigvelo-color-danger-border-subtle);
+  background: var(--sigvelo-color-danger-bg-subtle);
+  color: var(--sigvelo-color-danger-text);
+}
+
+.browser-run-panel__spinner {
+  animation: browser-run-panel-spin 900ms linear infinite;
+}
+
+@keyframes browser-run-panel-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .browser-run-panel__spinner,
+  .browser-run-panel__actions .button svg {
+    animation: none;
+  }
+}

package/dist/styles/index.css

@@ -39,6 +39,7 @@
 @import "./nanite-scene.css" layer(components);
 @import "./number-field.css" layer(components);
 @import "./popover.css" layer(components);
+@import "./mcp-server-connections.css" layer(components);
 @import "./mcp-server-picker.css" layer(components);
 @import "./preview-card.css" layer(components);
 @import "./progress.css" layer(components);
@@ -62,6 +63,7 @@
 @import "./streamdown.css" layer(components);
 @import "./artifact.css" layer(components);
 @import "./browser-live-view.css" layer(components);
+@import "./browser-run-panel.css" layer(components);
 @import "./browser-replay.css" layer(components);
 @import "./chain-of-thought.css" layer(components);
 @import "./code-block.css" layer(components);

package/dist/styles/mcp-server-connections.css

@@ -0,0 +1,145 @@
+.mcp-server-connections {
+  display: grid;
+  gap: 0.625rem;
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text);
+}
+
+.mcp-server-connections__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  min-inline-size: 0;
+}
+
+.mcp-server-connections__header h2 {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: var(--sigvelo-font-weight-bold);
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+.mcp-server-connections__summary,
+.mcp-server-connections__empty,
+.mcp-server-connections__url,
+.mcp-server-connections__capabilities,
+.mcp-server-connections__instructions {
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.75rem;
+  line-height: 1.35;
+}
+
+.mcp-server-connections__summary {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.mcp-server-connections__empty {
+  margin: 0;
+  padding: 0.75rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+  background: var(--sigvelo-color-surface);
+}
+
+.mcp-server-connections__list {
+  display: grid;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mcp-server-connections__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: start;
+  min-inline-size: 0;
+  padding: 0.625rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+  background: var(--sigvelo-color-surface);
+}
+
+.mcp-server-connections__main {
+  display: grid;
+  gap: 0.25rem;
+  min-inline-size: 0;
+}
+
+.mcp-server-connections__title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  min-inline-size: 0;
+}
+
+.mcp-server-connections__name {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text);
+  font-size: 0.85rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.mcp-server-connections__status .mcp-server-connections__spinner {
+  animation: mcp-server-connections-spin 900ms linear infinite;
+}
+
+.mcp-server-connections__url,
+.mcp-server-connections__error,
+.mcp-server-connections__instructions,
+.mcp-server-connections__capabilities {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.mcp-server-connections__error {
+  color: var(--sigvelo-color-danger-text);
+  font-size: 0.75rem;
+  line-height: 1.35;
+}
+
+.mcp-server-connections__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.25rem;
+}
+
+.mcp-server-connections__actions .button > svg {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+}
+
+@media (width < 34rem) {
+  .mcp-server-connections__item {
+    grid-template-columns: 1fr;
+  }
+
+  .mcp-server-connections__actions {
+    justify-content: flex-start;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mcp-server-connections__status .mcp-server-connections__spinner {
+    animation: none;
+  }
+}
+
+@keyframes mcp-server-connections-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/utils/mcp-server-catalog.d.ts

@@ -1,8 +1,7 @@
-import { MCPServersState } from "agents";
+import { MCPServer } from "agents";
 
 //#region src/utils/mcp-server-catalog.d.ts
-type McpServerConnectionState = MCPServersState["servers"][string]["state"];
-type McpServerPickerStatus = McpServerConnectionState | "needs-auth";
+type McpServerPickerStatus = MCPServer["state"] | "needs-auth";
 interface McpServerCardIcon {
   src: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -52,7 +52,7 @@
     "cloudflare": "^6.5.0",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.10.0"
+    "@mcp-b/design-tokens": "0.11.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",