@mcp-b/react-components 0.9.0 → 0.11.0

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/components/ModelSelector.d.ts

@@ -1,7 +1,41 @@
 import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
 import * as React from "react";
+import Cloudflare from "cloudflare";
+import { AiModelsSearchObject } from "@cloudflare/workers-types";
 
 //#region src/components/ModelSelector.d.ts
+type CloudflareModelSelectorModels = readonly Cloudflare.AI.ModelListResponse[] | readonly AiModelsSearchObject[] | readonly string[];
+interface CloudflareModelSelectorOption {
+  readonly id: string;
+  readonly provider: string;
+  readonly providerLabel: string;
+  readonly source: "ai-gateway" | "workers-ai";
+  readonly description: string | null;
+}
+interface CloudflareModelSelectorProps extends Omit<ModelSelectorProps, "children"> {
+  /** Raw `client.ai.models.list()` entries, `env.AI.models()` entries, or model ids. */
+  models: CloudflareModelSelectorModels;
+  /** Current runnable model id, such as `@cf/meta/llama...` or `openai/gpt-5.5`. */
+  selectedModelId?: string | null;
+  /** Called with a runnable Workers AI or AI Gateway model id. */
+  onSelectModel: (modelId: string) => void;
+  /** Disables the trigger while the caller is loading or saving. */
+  disabled?: boolean;
+  /** Search input placeholder. */
+  placeholder?: string;
+  /** Trigger fallback when no model is selected. */
+  triggerLabel?: React.ReactNode;
+  /** Empty state copy. */
+  emptyLabel?: React.ReactNode;
+  /** Whether a pasted `provider/model` id can be selected when absent from the catalog. */
+  allowTypedModel?: boolean;
+}
+declare function isCloudflareRunnableModelId(value: string): boolean;
+declare function readCloudflareModelId(entry: unknown): string | null;
+declare function getCloudflareModelProvider(modelId: string): string;
+declare function formatCloudflareModelProvider(provider: string): string;
+declare function normalizeCloudflareModelSelectorModels(models: CloudflareModelSelectorModels): CloudflareModelSelectorOption[];
+declare function listCloudflareModelSelectorOptions(client: Cloudflare, params: Cloudflare.AI.ModelListParams): Promise<CloudflareModelSelectorOption[]>;
 interface ModelSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Controlled dialog open state. */
   open?: boolean;
@@ -65,6 +99,18 @@ declare function ModelSelector({
 }: ModelSelectorProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
+declare function CloudflareModelSelector({
+  models,
+  selectedModelId,
+  onSelectModel,
+  disabled,
+  placeholder,
+  triggerLabel,
+  emptyLabel,
+  allowTypedModel,
+  onOpenChange,
+  ...props
+}: CloudflareModelSelectorProps): React.JSX.Element;
 interface ModelSelectorTriggerProps extends Omit<ButtonProps, "variant" | "color" | "className"> {
   className?: string;
 }
@@ -195,4 +241,4 @@ declare function ModelSelectorShortcut({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 //#endregion
-export { ModelSelector, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorDialog, ModelSelectorDialogProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorInput, ModelSelectorInputProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorLogoGroupProps, ModelSelectorLogoProps, ModelSelectorName, ModelSelectorNameProps, ModelSelectorProps, ModelSelectorSeparator, ModelSelectorSeparatorProps, ModelSelectorShortcut, ModelSelectorShortcutProps, ModelSelectorTrigger, ModelSelectorTriggerProps };
+export { CloudflareModelSelector, CloudflareModelSelectorModels, CloudflareModelSelectorOption, CloudflareModelSelectorProps, ModelSelector, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorDialog, ModelSelectorDialogProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorInput, ModelSelectorInputProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorLogoGroupProps, ModelSelectorLogoProps, ModelSelectorName, ModelSelectorNameProps, ModelSelectorProps, ModelSelectorSeparator, ModelSelectorSeparatorProps, ModelSelectorShortcut, ModelSelectorShortcutProps, ModelSelectorTrigger, ModelSelectorTriggerProps, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };

package/dist/components/ModelSelector.js

@@ -1,2 +1,2 @@
-import { a as ModelSelectorGroup, c as ModelSelectorList, d as ModelSelectorName, f as ModelSelectorSeparator, i as ModelSelectorEmpty, l as ModelSelectorLogo, m as ModelSelectorTrigger, n as ModelSelectorContent, o as ModelSelectorInput, p as ModelSelectorShortcut, r as ModelSelectorDialog, s as ModelSelectorItem, t as ModelSelector, u as ModelSelectorLogoGroup } from "../ModelSelector-9G_-GooI.js";
-export { ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger };
+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 ModelSelectorShortcut, 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-DXtpcRmT.js";
+export { CloudflareModelSelector, ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };

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);