@mcp-b/react-components 0.10.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.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
+			})
 		]
 	});
 }
@@ -244,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,
@@ -266,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,
@@ -287,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,
@@ -362,28 +280,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 +308,4 @@ function AgentConnectionPopover({ className, ...props }) {
 	}) })] });
 }
 //#endregion
-export { AgentConnectionPanel, AgentConnectionPopover, Connection, McpConnectorForm, McpServerSetup, buildNanitesAgentConnectionCommands };
+export { AgentConnectionPanel, AgentConnectionPopover, Connection, McpConnectorForm, buildNanitesAgentConnectionCommands };

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