@mcp-b/react-components 0.9.0 → 0.11.0

package/dist/{ModelSelector-9G_-GooI.js → ModelSelector-DXtpcRmT.js}

@@ -3,7 +3,7 @@ import { A as SearchIcon, o as ChevronDownIcon } from "./icons-D2Q5n5C1.js";
 import { Button } from "./components/Button.js";
 import { Dialog, DialogBackdrop, DialogPopup, DialogPortal, DialogTitle, DialogTrigger } from "./components/Dialog.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/provider-logos.tsx
 function Svg({ children, size = 16, ...props }) {
 	return /* @__PURE__ */ jsx("svg", {
@@ -77,6 +77,128 @@ function ProviderLogo({ provider, ...props }) {
 //#endregion
 //#region src/components/ModelSelector.tsx
 const ModelSelectorContext = React.createContext(null);
+const cloudflareModelProviderLabels = {
+	ai4bharat: "AI4Bharat",
+	aisingapore: "AI Singapore",
+	alibaba: "Alibaba",
+	anthropic: "Anthropic",
+	baai: "BAAI",
+	cohere: "Cohere",
+	deepseek: "DeepSeek",
+	"deepseek-ai": "DeepSeek",
+	google: "Google",
+	"google-vertex": "Google Vertex",
+	groq: "Groq",
+	ibm: "IBM",
+	"ibm-granite": "IBM",
+	meta: "Meta",
+	"meta-llama": "Meta",
+	microsoft: "Microsoft",
+	mistral: "Mistral AI",
+	mistralai: "Mistral AI",
+	minimax: "MiniMax",
+	moonshotai: "Moonshot AI",
+	nvidia: "NVIDIA",
+	openai: "OpenAI",
+	openrouter: "OpenRouter",
+	perplexity: "Perplexity",
+	qwen: "Qwen",
+	replicate: "Replicate",
+	together: "Together AI",
+	xai: "xAI",
+	"zai-org": "Zhipu AI"
+};
+function isCloudflareRunnableModelId(value) {
+	const modelId = value.trim();
+	return /^@(?:cf|hf)\/[^/\s]+\/\S+$/.test(modelId) || /^[a-z0-9][a-z0-9._-]*\/\S+$/i.test(modelId);
+}
+function readCatalogString(value) {
+	if (typeof value !== "string") return null;
+	const trimmed = value.trim();
+	return trimmed.length > 0 ? trimmed : null;
+}
+function readCatalogField(entry, field) {
+	if (typeof entry !== "object" || entry === null || !Object.hasOwn(entry, field)) return null;
+	return readCatalogString(entry[field]);
+}
+function readCatalogEntries(entry) {
+	if (Array.isArray(entry)) return entry;
+	if (typeof entry !== "object" || entry === null || !Object.hasOwn(entry, "data")) return null;
+	const data = entry.data;
+	return Array.isArray(data) ? data : null;
+}
+function readCloudflareModelId(entry) {
+	if (typeof entry === "string") {
+		const modelId = readCatalogString(entry);
+		return modelId && isCloudflareRunnableModelId(modelId) ? modelId : null;
+	}
+	for (const field of ["name", "id"]) {
+		const modelId = readCatalogField(entry, field);
+		if (modelId && isCloudflareRunnableModelId(modelId)) return modelId;
+	}
+	return null;
+}
+function getCloudflareModelProvider(modelId) {
+	const [, hostedProvider] = /^@(?:cf|hf)\/([^/]+)/.exec(modelId) ?? [];
+	if (hostedProvider) return hostedProvider;
+	return modelId.split("/", 1)[0] || "other";
+}
+function formatCloudflareModelProvider(provider) {
+	const normalized = provider.trim().toLowerCase();
+	if (cloudflareModelProviderLabels[normalized]) return cloudflareModelProviderLabels[normalized];
+	return normalized.split(/[-_]/).filter(Boolean).map((word) => word[0].toUpperCase() + word.slice(1)).join(" ");
+}
+function normalizeCloudflareModelSelectorModels(models) {
+	const seen = /* @__PURE__ */ new Set();
+	const options = [];
+	const appendOption = (entry) => {
+		const entries = readCatalogEntries(entry);
+		if (entries) {
+			for (const nestedEntry of entries) appendOption(nestedEntry);
+			return;
+		}
+		const id = readCloudflareModelId(entry);
+		if (!id || seen.has(id)) return;
+		seen.add(id);
+		const provider = getCloudflareModelProvider(id);
+		options.push({
+			id,
+			provider,
+			providerLabel: formatCloudflareModelProvider(provider),
+			source: id.startsWith("@") ? "workers-ai" : "ai-gateway",
+			description: readCatalogField(entry, "description")
+		});
+	};
+	for (const entry of models) appendOption(entry);
+	return options;
+}
+async function listCloudflareModelSelectorOptions(client, params) {
+	const models = [];
+	for await (const model of client.ai.models.list(params)) models.push(model);
+	if (params.format !== "openrouter") for await (const model of client.ai.models.list({
+		...params,
+		format: "openrouter"
+	})) models.push(model);
+	return normalizeCloudflareModelSelectorModels(models);
+}
+function groupCloudflareModelOptions(options) {
+	const groups = [];
+	const groupsByLabel = /* @__PURE__ */ new Map();
+	for (const option of options) {
+		const group = groupsByLabel.get(option.providerLabel);
+		if (group) {
+			group.push(option);
+			continue;
+		}
+		const nextGroup = [option];
+		groupsByLabel.set(option.providerLabel, nextGroup);
+		groups.push({
+			providerLabel: option.providerLabel,
+			options: nextGroup
+		});
+	}
+	return groups;
+}
 function useModelSelectorContext() {
 	const ctx = React.useContext(ModelSelectorContext);
 	if (!ctx) throw new Error("ModelSelector subcomponents must be used inside <ModelSelector>.");
@@ -154,6 +276,67 @@ function ModelSelector({ open, defaultOpen = false, onOpenChange, children, clas
 		})
 	});
 }
+function CloudflareModelSelector({ models, selectedModelId = null, onSelectModel, disabled = false, placeholder = "Search or paste an AI Gateway model id...", triggerLabel = "Select a model", emptyLabel = "No models found", allowTypedModel = true, onOpenChange, ...props }) {
+	const [query, setQuery] = React.useState("");
+	const options = React.useMemo(() => normalizeCloudflareModelSelectorModels(models), [models]);
+	const groups = React.useMemo(() => groupCloudflareModelOptions(options), [options]);
+	const optionIds = React.useMemo(() => new Set(options.map((option) => option.id)), [options]);
+	const selectedOption = selectedModelId ? options.find((option) => option.id === selectedModelId) ?? {
+		id: selectedModelId,
+		provider: getCloudflareModelProvider(selectedModelId),
+		providerLabel: formatCloudflareModelProvider(getCloudflareModelProvider(selectedModelId)),
+		source: selectedModelId.startsWith("@") ? "workers-ai" : "ai-gateway",
+		description: null
+	} : null;
+	const typedModelId = query.trim();
+	const showTypedModel = allowTypedModel && isCloudflareRunnableModelId(typedModelId) && typedModelId !== selectedModelId && !optionIds.has(typedModelId);
+	return /* @__PURE__ */ jsxs(ModelSelector, {
+		onOpenChange: React.useCallback((nextOpen) => {
+			if (!nextOpen) setQuery("");
+			onOpenChange?.(nextOpen);
+		}, [onOpenChange]),
+		...props,
+		children: [/* @__PURE__ */ jsx(ModelSelectorTrigger, {
+			disabled,
+			children: selectedOption ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: selectedOption.provider }), /* @__PURE__ */ jsx(ModelSelectorName, { children: selectedOption.id })] }) : /* @__PURE__ */ jsx(ModelSelectorName, { children: triggerLabel })
+		}), /* @__PURE__ */ jsx(ModelSelectorContent, {
+			title: "Cloudflare model selector",
+			children: /* @__PURE__ */ jsxs(ModelSelectorDialog, { children: [/* @__PURE__ */ jsx(ModelSelectorInput, {
+				"aria-label": "Search Cloudflare AI models",
+				placeholder,
+				onInput: (event) => setQuery(event.currentTarget.value)
+			}), /* @__PURE__ */ jsxs(ModelSelectorList, { children: [
+				showTypedModel ? /* @__PURE__ */ jsx(ModelSelectorGroup, {
+					label: "AI Gateway",
+					children: /* @__PURE__ */ jsxs(ModelSelectorItem, {
+						value: typedModelId,
+						onSelect: onSelectModel,
+						children: [
+							/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: getCloudflareModelProvider(typedModelId) }),
+							/* @__PURE__ */ jsx(ModelSelectorName, { children: typedModelId }),
+							/* @__PURE__ */ jsx(ModelSelectorShortcut, { children: "Use" })
+						]
+					})
+				}) : null,
+				groups.map((group) => /* @__PURE__ */ jsx(ModelSelectorGroup, {
+					label: group.providerLabel,
+					children: group.options.map((option) => /* @__PURE__ */ jsxs(ModelSelectorItem, {
+						value: option.id,
+						keywords: `${option.provider} ${option.providerLabel} ${option.source} ${option.description ?? ""}`,
+						selected: option.id === selectedModelId,
+						onSelect: onSelectModel,
+						children: [
+							/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: option.provider }),
+							/* @__PURE__ */ jsx(ModelSelectorName, { children: option.id }),
+							/* @__PURE__ */ jsx(ModelSelectorShortcut, { children: option.source === "workers-ai" ? "Workers AI" : "Gateway" })
+						]
+					}, option.id))
+				}, group.providerLabel)),
+				/* @__PURE__ */ jsx(ModelSelectorEmpty, { children: emptyLabel })
+			] })] })
+		})]
+	});
+}
 function ModelSelectorTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(DialogTrigger, { render: /* @__PURE__ */ jsxs(Button, {
 		variant: "outline",
@@ -303,4 +486,4 @@ function ModelSelectorShortcut({ className, children, ref, ...props }) {
 	});
 }
 //#endregion
-export { ModelSelectorGroup as a, ModelSelectorList as c, ModelSelectorName as d, ModelSelectorSeparator as f, ModelSelectorEmpty as i, ModelSelectorLogo as l, ModelSelectorTrigger as m, ModelSelectorContent as n, ModelSelectorInput as o, ModelSelectorShortcut as p, ModelSelectorDialog as r, ModelSelectorItem as s, ModelSelector as t, ModelSelectorLogoGroup as u };
+export { getCloudflareModelProvider as _, ModelSelectorEmpty as a, normalizeCloudflareModelSelectorModels as b, ModelSelectorItem as c, ModelSelectorLogoGroup as d, ModelSelectorName as f, formatCloudflareModelProvider as g, ModelSelectorTrigger as h, ModelSelectorDialog as i, ModelSelectorList as l, ModelSelectorShortcut as m, ModelSelector as n, ModelSelectorGroup as o, ModelSelectorSeparator as p, ModelSelectorContent as r, ModelSelectorInput as s, CloudflareModelSelector as t, ModelSelectorLogo as u, isCloudflareRunnableModelId as v, readCloudflareModelId as x, listCloudflareModelSelectorOptions as y };

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/ChatGptSignInScreen.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
 import { M as SpinnerIcon } from "../icons-D2Q5n5C1.js";
 import { Button } from "./Button.js";
-import { l as ModelSelectorLogo } from "../ModelSelector-9G_-GooI.js";
+import { u as ModelSelectorLogo } from "../ModelSelector-DXtpcRmT.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChatGptSignInScreen.tsx

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