@mcp-b/react-components 0.11.0 → 0.12.0

package/dist/components/AgentChat.js

@@ -6,10 +6,10 @@ import { MessageScroller, MessageScrollerButton, MessageScrollerContent, Message
 import { ConversationEmptyState } from "./Conversation.js";
 import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
 import { Marker, MarkerContent } from "./Marker.js";
-import { MenuGroup, MenuGroupLabel } from "./Menu.js";
 import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
 import { Source, Sources, SourcesContent, SourcesTrigger } from "./Sources.js";
+import { t as summarizeToolInput } from "../summarize-tool-input-BUJsENSn.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isCompactionMessage } from "agents/experimental/memory/utils";
@@ -17,6 +17,17 @@ import { getToolInput, getToolOutput, getToolPartState } from "@cloudflare/think
 import { getToolName, isFileUIPart, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
 //#region src/components/AgentChat.tsx
 const EMPTY_PENDING_APPROVALS = [];
+const EMPTY_SKIPPED_APPROVAL_IDS = [];
+function createApprovalSessionState(thinkStub) {
+	return {
+		thinkStub,
+		skippedApprovalIds: EMPTY_SKIPPED_APPROVAL_IDS,
+		permissionMode: "ask"
+	};
+}
+function isCurrentApprovalSession(state, thinkStub) {
+	return state.thinkStub === thinkStub;
+}
 function AgentChatAttachButton() {
 	const attachments = usePromptInputAttachments();
 	return /* @__PURE__ */ jsx(PromptInputButton, {
@@ -33,7 +44,7 @@ function AgentChatAddMenu({ children }) {
 		sideOffset: 12,
 		collisionPadding: 8,
 		className: "agent-chat__add-menu",
-		children: [/* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, { children: "Files" }), /* @__PURE__ */ jsx(PromptInputActionAddAttachments, {})] }), children]
+		children: [/* @__PURE__ */ jsx(PromptInputActionAddAttachments, {}), children]
 	})] });
 }
 /**
@@ -62,14 +73,6 @@ function getPartKey(part, partIndex) {
 	if ("id" in part && typeof part.id === "string") return `${part.type}-${part.id}`;
 	return `${part.type}-${partIndex}`;
 }
-function summarizeToolInput(input) {
-	if (!input || typeof input !== "object") return null;
-	for (const value of Object.values(input)) if (typeof value === "string" && value.trim()) {
-		const line = value.trim().split("\n", 1)[0] ?? "";
-		return line.length > 64 ? `${line.slice(0, 64)}…` : line;
-	}
-	return null;
-}
 function isToolPartWorking(part) {
 	const state = getToolPartState(part);
 	return state === "loading" || state === "streaming" || state === "waiting-approval";
@@ -188,38 +191,65 @@ function renderDefaultPart(part) {
 * transport. Product code that talks to a Cloudflare Think agent should render
 * `ThinkChat`; use this directly only for plain AI SDK or read-only messages.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, composerAddMenuItems, notice, onRegenerate, onApprovalResponse, executionApprovals, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, composerAddMenuItems, notice, onRegenerate, onApprovalResponse, thinkStub, onExecutionSettled, pendingApprovals: durableApprovals = EMPTY_PENDING_APPROVALS, contextWindow, renderPart, renderMessageAfter, ref }) {
 	const handleSubmit = React.useCallback((message) => {
 		onSubmit?.(message);
 	}, [onSubmit]);
-	const [skippedApprovalIds, setSkippedApprovalIds] = React.useState([]);
-	const pendingApprovalItems = [...getPendingToolApprovals(messages, { pausedExecutions: Boolean(executionApprovals) }).filter(({ part }) => {
+	const [approvalSession, setApprovalSession] = React.useState(() => createApprovalSessionState(thinkStub));
+	const approvalSessionIsCurrent = isCurrentApprovalSession(approvalSession, thinkStub);
+	const skippedApprovalIds = approvalSessionIsCurrent ? approvalSession.skippedApprovalIds : EMPTY_SKIPPED_APPROVAL_IDS;
+	const permissionMode = approvalSessionIsCurrent ? approvalSession.permissionMode : "ask";
+	const updateApprovalSession = React.useCallback((update) => {
+		setApprovalSession((previous) => update(isCurrentApprovalSession(previous, thinkStub) ? previous : createApprovalSessionState(thinkStub)));
+	}, [thinkStub]);
+	const setPermissionMode = React.useCallback((next) => {
+		updateApprovalSession((current) => ({
+			...current,
+			permissionMode: next
+		}));
+	}, [updateApprovalSession]);
+	React.useLayoutEffect(() => {
+		setApprovalSession((previous) => isCurrentApprovalSession(previous, thinkStub) ? previous : createApprovalSessionState(thinkStub));
+	}, [thinkStub]);
+	const pendingApprovalItems = [...getPendingToolApprovals(messages, { pausedExecutions: Boolean(thinkStub) }).filter(({ part }) => {
 		if (part.state === "approval-requested" && !onApprovalResponse) return false;
 		const id = getApprovalStateKey(part);
 		return Boolean(id) && !skippedApprovalIds.includes(id);
-	}).map((approval) => ({ part: approval.part })), ...executionApprovals ? durableApprovals.filter((approval) => approval.source === "action" && !skippedApprovalIds.includes(approval.executionId)).map((approval) => ({ approval })) : []];
-	const approvalsWired = Boolean(onApprovalResponse || executionApprovals);
-	const [permissionMode, setPermissionMode] = React.useState("ask");
-	const autoApprovedIds = React.useRef(/* @__PURE__ */ new Set());
+	}).map((approval) => ({ part: approval.part })), ...thinkStub ? durableApprovals.filter((approval) => approval.source === "action" && !skippedApprovalIds.includes(approval.executionId)).map((approval) => ({ approval })) : []];
+	const approvalsWired = Boolean(onApprovalResponse || thinkStub);
+	const autoApprovedIds = React.useRef({
+		thinkStub,
+		ids: /* @__PURE__ */ new Set()
+	});
+	React.useLayoutEffect(() => {
+		if (isCurrentApprovalSession(autoApprovedIds.current, thinkStub)) return;
+		autoApprovedIds.current = {
+			thinkStub,
+			ids: /* @__PURE__ */ new Set()
+		};
+	}, [thinkStub]);
 	React.useEffect(() => {
 		if (permissionMode !== "bypass") return;
 		for (const item of pendingApprovalItems) {
 			const id = "part" in item ? getApprovalRequestId(item.part) : item.approval.executionId;
 			const key = "part" in item ? getApprovalStateKey(item.part) : item.approval.executionId;
-			if (!id || !key || autoApprovedIds.current.has(key)) continue;
-			autoApprovedIds.current.add(key);
+			if (!id || !key || autoApprovedIds.current.ids.has(key)) continue;
+			autoApprovedIds.current.ids.add(key);
 			if ("part" in item && item.part.state === "approval-requested") onApprovalResponse?.({
 				id,
 				approved: true
 			});
-			else executionApprovals?.approve(id);
+			else if (thinkStub) thinkStub.approveExecution(id).finally(() => {
+				onExecutionSettled?.();
+			});
 		}
 	}, [
 		permissionMode,
 		messages,
 		durableApprovals,
 		onApprovalResponse,
-		executionApprovals
+		thinkStub,
+		onExecutionSettled
 	]);
 	const pendingApproval = permissionMode === "bypass" ? void 0 : pendingApprovalItems[0];
 	const contextUsage = contextWindow ? getContextUsage(messages) : void 0;
@@ -312,10 +342,14 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 					approval: "approval" in pendingApproval ? pendingApproval.approval : void 0,
 					count: pendingApprovalItems.length,
 					onRespond: onApprovalResponse,
-					executionApprovals,
+					thinkStub,
+					onExecutionSettled,
 					onSkip: () => {
 						const id = "part" in pendingApproval ? getApprovalStateKey(pendingApproval.part) : pendingApproval.approval.executionId;
-						if (id) setSkippedApprovalIds((previous) => [...previous, id]);
+						if (id) updateApprovalSession((current) => ({
+							...current,
+							skippedApprovalIds: [...current.skippedApprovalIds, id]
+						}));
 					}
 				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx(PromptInputAttachments, {}),

package/dist/components/AgentConnection.js

@@ -178,12 +178,8 @@ function McpConnectorForm({ auth, authorizeLabel = "Authorize", className, defau
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs(Field.Root, { children: [
-				/* @__PURE__ */ jsx(Field.Label, {
-					htmlFor: "mcpName",
-					children: "MCP name"
-				}),
+				/* @__PURE__ */ jsx(Field.Label, { children: "MCP name" }),
 				/* @__PURE__ */ jsx(Field.Control, {
-					id: "mcpName",
 					name: "name",
 					pattern: namePattern,
 					required: true,
@@ -200,12 +196,8 @@ function McpConnectorForm({ auth, authorizeLabel = "Authorize", className, defau
 				})
 			] }),
 			/* @__PURE__ */ jsxs(Field.Root, { children: [
-				/* @__PURE__ */ jsx(Field.Label, {
-					htmlFor: "mcpUrl",
-					children: "MCP URL"
-				}),
+				/* @__PURE__ */ jsx(Field.Label, { children: "MCP URL" }),
 				/* @__PURE__ */ jsx(Field.Control, {
-					id: "mcpUrl",
 					name: "url",
 					placeholder: "http://127.0.0.1:8787/mcp",
 					required: true,
@@ -221,24 +213,16 @@ function McpConnectorForm({ auth, authorizeLabel = "Authorize", className, defau
 					children: "MCP URL must use http or https."
 				})
 			] }),
-			redirectUrlField ? /* @__PURE__ */ jsxs(Field.Root, { children: [/* @__PURE__ */ jsx(Field.Label, {
-				htmlFor: "mcpRedirectUrl",
-				children: redirectUrlField.label
-			}), /* @__PURE__ */ jsx(Field.Control, {
-				id: "mcpRedirectUrl",
+			redirectUrlField ? /* @__PURE__ */ jsxs(Field.Root, { children: [/* @__PURE__ */ jsx(Field.Label, { children: redirectUrlField.label }), /* @__PURE__ */ jsx(Field.Control, {
 				name: "redirectUrl",
 				readOnly: true,
 				type: "url",
 				value: redirectUrl
 			})] }) : null,
 			credentialFields.map((authField) => /* @__PURE__ */ jsxs(Field.Root, { children: [
-				/* @__PURE__ */ jsx(Field.Label, {
-					htmlFor: `mcp-${authField.name}`,
-					children: authField.label
-				}),
+				/* @__PURE__ */ jsx(Field.Label, { children: authField.label }),
 				/* @__PURE__ */ jsx(Field.Control, {
 					autoComplete: "off",
-					id: `mcp-${authField.name}`,
 					name: authField.name,
 					placeholder: authField.placeholder,
 					required: authField.required,

package/dist/components/Badge.js

@@ -1,3 +1,4 @@
+import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Badge.tsx
@@ -26,21 +27,6 @@ function badgeVariants({ variant = "default", color, size = "md", className } =
 		className
 	].filter(Boolean).join(" ");
 }
-function assignRef(ref, value) {
-	if (!ref) return;
-	if (typeof ref === "function") {
-		ref(value);
-		return;
-	}
-	ref.current = value;
-}
-function mergeRefs(...refs) {
-	const activeRefs = refs.filter(Boolean);
-	if (activeRefs.length === 0) return;
-	return (value) => {
-		for (const activeRef of activeRefs) assignRef(activeRef, value);
-	};
-}
 function isEventHandler(propName, value) {
 	return /^on[A-Z]/.test(propName) && typeof value === "function";
 }

package/dist/components/BrowserLiveView.d.ts

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

package/dist/components/BrowserLiveView.js

@@ -22,8 +22,8 @@ function EndedState({ title, detail }) {
 /**
 * Embeds a Browser Run Live View — a real-time, interactive view of the
 * agent's browser session. Links expire (~5 minutes), so the iframe swaps to
-* `fallback` (e.g. the last screenshot) once `expiresAt` passes. While the
-* hosted viewer connects, a quiet loading overlay hides the frame; if it
+* `fallback` (e.g. the last screenshot) once `source.expiresInMs` passes.
+* While the hosted viewer connects, a quiet loading overlay hides the frame; if it
 * never loads, the view degrades to `fallback` or an unavailable state. An
 * expand button opens the same view in a fullscreen dialog.
 *
@@ -39,13 +39,12 @@ function EndedState({ title, detail }) {
 * The iframe is unsandboxed by design: the hosted Live View UI needs scripts
 * and its own origin to stream the session. Only pass trusted Live View URLs.
 */
-function BrowserLiveView({ url, expiresAt, pageTitle, fallback, className, ...props }) {
-	const [expired, setExpired] = React.useState(() => expiresAt !== void 0 && expiresAt <= Date.now());
+function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, ...props }) {
+	const [expired, setExpired] = React.useState(() => receivedAt !== void 0 && receivedAt + source.expiresInMs <= Date.now());
 	const [frameState, setFrameState] = React.useState("loading");
 	const [expandedOpen, setExpandedOpen] = React.useState(false);
 	React.useEffect(() => {
-		if (expiresAt === void 0) return;
-		const remaining = expiresAt - Date.now();
+		const remaining = (receivedAt ?? Date.now()) + source.expiresInMs - Date.now();
 		if (remaining <= 0) {
 			setExpired(true);
 			return;
@@ -53,10 +52,15 @@ function BrowserLiveView({ url, expiresAt, pageTitle, fallback, className, ...pr
 		setExpired(false);
 		const timer = setTimeout(() => setExpired(true), remaining);
 		return () => clearTimeout(timer);
-	}, [expiresAt]);
+	}, [
+		receivedAt,
+		source.expiresInMs,
+		source.targetId,
+		source.url
+	]);
 	React.useEffect(() => {
 		setFrameState("loading");
-	}, [url]);
+	}, [source.url]);
 	React.useEffect(() => {
 		if (frameState !== "loading") return;
 		const timer = setTimeout(() => setFrameState("failed"), FRAME_LOAD_TIMEOUT_MS);
@@ -77,7 +81,7 @@ function BrowserLiveView({ url, expiresAt, pageTitle, fallback, className, ...pr
 		}),
 		/* @__PURE__ */ jsx("iframe", {
 			className: "browser-live-view__frame",
-			src: url,
+			src: source.url,
 			title: frameTitle,
 			allow: "clipboard-read; clipboard-write",
 			onLoad: () => setFrameState("ready")
@@ -118,7 +122,7 @@ function BrowserLiveView({ url, expiresAt, pageTitle, fallback, className, ...pr
 					}), /* @__PURE__ */ jsx("div", {
 						className: "browser-live-view__dialog-body",
 						children: live ? /* @__PURE__ */ jsx("iframe", {
-							src: url,
+							src: source.url,
 							title: frameTitle,
 							allow: "clipboard-read; clipboard-write"
 						}) : fallback ?? /* @__PURE__ */ jsx(EndedState, {

package/dist/components/BrowserReplay.d.ts

@@ -1,2 +1,2 @@
-import { n as BrowserReplayProps, t as BrowserReplay } from "../BrowserReplay-6G-mnwcn.js";
+import { n as BrowserReplayProps, t as BrowserReplay } from "../BrowserReplay-xWvRjRAC.js";
 export { BrowserReplay, BrowserReplayProps };

package/dist/components/BrowserRunPanel.js

@@ -1,7 +1,8 @@
 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 { L as XIcon, M as SpinnerIcon } from "../icons-D2Q5n5C1.js";
 import { Button } from "./Button.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
+import { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "./WebPreview.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/BrowserRunPanel.tsx
@@ -12,12 +13,15 @@ function isInspectablePage(target) {
 function targetLabel(target) {
 	return target.title || target.pageUrl || target.targetId;
 }
+function targetGlyph(target) {
+	return (target.title || target.pageUrl || target.targetId).trim().charAt(0).toUpperCase() || "•";
+}
 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",
+		className: "web-preview__body--empty browser-run-panel__state",
 		"data-tone": tone,
 		role: role ?? (tone === "danger" ? "alert" : void 0),
 		children
@@ -33,84 +37,116 @@ function BrowserRunPanelState({ children, role, tone = "neutral" }) {
 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());
+	const tabRefs = React.useRef(/* @__PURE__ */ new Map());
+	const tabListId = React.useId();
 	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", {
+	const pageUrl = target?.pageUrl ?? "";
+	const selectTarget = React.useCallback((nextTarget) => {
+		setSelectedTargetId(nextTarget.targetId);
+	}, []);
+	const handleTabListKeyDown = (event) => {
+		const currentIndex = targets.findIndex((candidate) => candidate.targetId === target?.targetId);
+		if (currentIndex < 0) return;
+		let nextIndex;
+		if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % targets.length;
+		if (event.key === "ArrowLeft") nextIndex = (currentIndex - 1 + targets.length) % targets.length;
+		if (event.key === "Home") nextIndex = 0;
+		if (event.key === "End") nextIndex = targets.length - 1;
+		if (nextIndex === void 0) return;
+		event.preventDefault();
+		const nextTarget = targets[nextIndex];
+		if (!nextTarget) return;
+		selectTarget(nextTarget);
+		tabRefs.current.get(nextTarget.targetId)?.focus();
+	};
+	return /* @__PURE__ */ jsxs(WebPreview, {
 		ref,
 		className: cx("browser-run-panel", className),
+		url: pageUrl,
+		role: "region",
 		"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, {
+			targets.length > 1 ? /* @__PURE__ */ jsx(WebPreviewNavigation, { children: /* @__PURE__ */ jsx("div", {
+				id: tabListId,
+				className: "browser-run-panel__tabs",
+				role: "tablist",
+				"aria-label": "Open browser pages",
+				onKeyDown: handleTabListKeyDown,
+				children: targets.map((candidate) => {
+					const selected = candidate.targetId === target?.targetId;
+					return /* @__PURE__ */ jsxs(Button, {
+						ref: (node) => {
+							if (node) tabRefs.current.set(candidate.targetId, node);
+							else tabRefs.current.delete(candidate.targetId);
+						},
 						type: "button",
 						variant: "ghost",
 						color: "neutral",
-						size: "icon-sm",
-						"aria-label": "Refresh browser view",
+						size: "sm",
+						className: "browser-run-panel__tab",
+						role: "tab",
+						id: `${tabListId}-${candidate.targetId}`,
+						"aria-selected": selected,
+						"aria-controls": `${tabListId}-panel`,
+						tabIndex: selected ? 0 : -1,
+						onClick: () => selectTarget(candidate),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "browser-run-panel__tab-glyph",
+							"aria-hidden": "true",
+							children: targetGlyph(candidate)
+						}), /* @__PURE__ */ jsx("span", {
+							className: "browser-run-panel__tab-title",
+							children: targetLabel(candidate)
+						})]
+					}, candidate.targetId);
+				})
+			}) }) : null,
+			/* @__PURE__ */ jsxs(WebPreviewNavigation, {
+				className: "browser-run-panel__address-bar",
+				children: [
+					/* @__PURE__ */ jsx(WebPreviewUrl, {
+						"aria-label": "Browser page URL",
+						placeholder: "Waiting for browser session",
+						readOnly: true
+					}),
+					onRefresh ? /* @__PURE__ */ jsx(WebPreviewNavigationButton, {
+						action: "reload",
+						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 onRefresh()
+					}) : null,
+					onCloseSession ? /* @__PURE__ */ jsx(WebPreviewNavigationButton, {
+						label: "Close browser session",
 						onClick: () => void onCloseSession(),
 						children: /* @__PURE__ */ jsx(XIcon, {})
-					}) : null]
-				})]
+					}) : 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",
+				id: `${tabListId}-panel`,
+				className: "web-preview__body browser-run-panel__body",
+				role: targets.length > 1 ? "tabpanel" : void 0,
+				"aria-labelledby": targets.length > 1 && target ? `${tabListId}-${target.targetId}` : void 0,
 				"aria-busy": loading || void 0,
 				children: target && liveView ? /* @__PURE__ */ jsx(BrowserLiveView, {
-					url: target.url,
-					expiresAt: receivedAt + liveView.expiresInMs,
+					source: {
+						url: target.url,
+						targetId: target.targetId,
+						expiresInMs: liveView.expiresInMs
+					},
+					receivedAt,
 					pageTitle: target.title ?? target.pageUrl,
-					fallback
+					fallback,
+					className: "browser-run-panel__live-view"
 				}) : loading ? /* @__PURE__ */ jsxs(BrowserRunPanelState, {
 					role: "status",
 					children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "browser-run-panel__spinner" }), "Loading browser session"]

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 { u as ModelSelectorLogo } from "../ModelSelector-DXtpcRmT.js";
+import { u as ModelSelectorLogo } from "../ModelSelector-BB-xB-Es.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChatGptSignInScreen.tsx

package/dist/components/CodexModelSelector.d.ts

@@ -0,0 +1,63 @@
+import * as React from "react";
+
+//#region src/components/CodexModelSelector.d.ts
+/** One server-supported value for a Codex response setting. */
+interface CodexModelSelectorSetting {
+  readonly id: string;
+  readonly label: string;
+  /** Optional explanation shown below the option, such as its usage impact. */
+  readonly description?: string;
+}
+interface CodexModelSelectorProps {
+  /** Model options allowed by the consuming app. Keep authentication and entitlement checks server-side. */
+  readonly models: readonly CodexModelSelectorSetting[];
+  /** Current model id used by the consuming app's AI SDK provider. */
+  readonly selectedModelId?: string | null;
+  /** Called only with an id from the app-provided catalog. */
+  readonly onSelectModel: (modelId: string) => void;
+  /** Server-supported reasoning effort values for the selected model. */
+  readonly effortOptions?: readonly CodexModelSelectorSetting[];
+  readonly selectedEffortId?: string | null;
+  readonly onSelectEffort?: (effortId: string) => void;
+  /** Server-supported response-speed values for the selected model. */
+  readonly speedOptions?: readonly CodexModelSelectorSetting[];
+  readonly selectedSpeedId?: string | null;
+  readonly onSelectSpeed?: (speedId: string) => void;
+  /** Restores all values to the consuming app's preferred defaults. */
+  readonly onReset?: () => void;
+  readonly disabled?: boolean;
+  readonly className?: string;
+  /** Controlled menu open state. */
+  readonly open?: boolean;
+  /** Initial menu state for uncontrolled usage. */
+  readonly defaultOpen?: boolean;
+  readonly onOpenChange?: (open: boolean) => void;
+  readonly "aria-label"?: string;
+}
+/**
+ * A compact Codex-style response settings picker: model, reasoning effort,
+ * response speed, and reset are kept in one cascading menu.
+ *
+ * The consuming app supplies every selectable value. This component only
+ * renders those values and never guesses model ids or account entitlements.
+ */
+declare function CodexModelSelector({
+  models,
+  selectedModelId,
+  onSelectModel,
+  effortOptions,
+  selectedEffortId,
+  onSelectEffort,
+  speedOptions,
+  selectedSpeedId,
+  onSelectSpeed,
+  onReset,
+  disabled,
+  className,
+  open,
+  defaultOpen,
+  onOpenChange,
+  "aria-label": ariaLabel
+}: CodexModelSelectorProps): React.JSX.Element;
+//#endregion
+export { CodexModelSelector, CodexModelSelectorProps, CodexModelSelectorSetting };