@mcp-b/react-components 0.38.0 → 0.40.0

package/dist/{CodeBlock-DO4Hdu1R.js → CodeBlock-CWk1FVtm.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
 import { Select } from "./components/foundations/Select.js";
-import { t as CopyButton } from "./copy-button-4YvddK4e.js";
+import { t as CopyButton } from "./copy-button-Bc7jsYv_.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";

package/dist/{FileTree-DbQMpvxV.js → FileTree-xqHYBw4g.js}

@@ -1,5 +1,5 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
-import { C as FileIcon, T as FolderOpenIcon, m as ChevronRightIcon, w as FolderIcon } from "./icons-B4mGvCvc.js";
+import { C as FileIcon, T as FolderOpenIcon, m as ChevronRightIcon, w as FolderIcon } from "./icons-MmIXciMO.js";
 import { t as NavigationLink } from "./navigation-link-kqMa81v5.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{WorkspaceFileView-DeGzWwhK.js → WorkspaceFileView-Lab3om3F.js}

@@ -1,6 +1,6 @@
-import { A as MaximizeIcon, d as CheckIcon, h as CodeIcon, r as ArrowLeftIcon, tt as WarningIcon, x as EyeIcon, y as DownloadIcon } from "./icons-B4mGvCvc.js";
+import { d as CheckIcon, h as CodeIcon, j as MaximizeIcon, nt as WarningIcon, r as ArrowLeftIcon, x as EyeIcon, y as DownloadIcon } from "./icons-MmIXciMO.js";
 import { r as formatClock } from "./format-DB2mX9DA.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-DO4Hdu1R.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-CWk1FVtm.js";
 import { AppTopBar } from "./components/general-purpose/AppTopBar.js";
 import { inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceSkillPath, parseWorkspaceSkill } from "./components/agents-sdk/WorkspaceFile.js";
 import { c as useWorkspaceNavigationContext, s as useWorkspaceNavigationRestoration } from "./WorkspaceLink-DtH66bAY.js";

package/dist/components/agents-sdk/AgentActivity.js

@@ -1,5 +1,5 @@
 import { inferFaviconUrl } from "../../utils/favicon.js";
-import { $ as TerminalIcon, B as PencilIcon, C as FileIcon, F as MonitorIcon, G as SearchIcon, O as InfoIcon, k as LinkIcon, nt as WrenchIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.js";
+import { A as LinkIcon, C as FileIcon, I as MonitorIcon, K as SearchIcon, O as InfoIcon, V as PencilIcon, et as TerminalIcon, nt as WarningIcon, rt as WrenchIcon } from "../../icons-MmIXciMO.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/AgentActivity.tsx

package/dist/components/agents-sdk/AgentActivityPreview.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { C as FileIcon, J as SpinnerIcon, j as McpIcon, rt as XIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.js";
+import { C as FileIcon, M as McpIcon, Y as SpinnerIcon, it as XIcon, nt as WarningIcon } from "../../icons-MmIXciMO.js";
 import { ActivityHeader } from "../ai-sdk/Activity.js";
 import { Button } from "../foundations/Button.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";

package/dist/components/agents-sdk/AgentChat.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { ExpansionStateProvider } from "../ai-sdk/ExpansionState.js";
-import { B as PencilIcon, H as PlusIcon, J as SpinnerIcon, L as MoveToFrontIcon, U as QueueIcon, W as RefreshIcon, et as TrashIcon, t as ArchiveIcon } from "../../icons-B4mGvCvc.js";
+import { G as RefreshIcon, R as MoveToFrontIcon, U as PlusIcon, V as PencilIcon, W as QueueIcon, Y as SpinnerIcon, t as ArchiveIcon, tt as TrashIcon } from "../../icons-MmIXciMO.js";
 import { Button } from "../foundations/Button.js";
 import { AgentChatMessageEditor } from "../ai-sdk/AgentChatMessageEditor.js";
 import { IconButton } from "../foundations/IconButton.js";
@@ -10,7 +10,7 @@ import { AgentChatStartScreen } from "../ai-sdk/AgentChatStartScreen.js";
 import { Message, MessageAction, MessageActions } from "../ai-sdk/Message.js";
 import { AgentMessageParts } from "../ai-sdk/AgentMessageParts.js";
 import { Marker, MarkerContent } from "../foundations/Marker.js";
-import { t as CopyButton } from "../../copy-button-4YvddK4e.js";
+import { t as CopyButton } from "../../copy-button-Bc7jsYv_.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "../ai-sdk/Context.js";
 import { VirtualMessageScroller } from "../ai-sdk/MessageScrollerVirtual.js";
 import { QueueItem, QueueItemActions, QueueItemContent } from "../ai-sdk/Queue.js";
@@ -666,13 +666,13 @@ function AgentChat({ className, messages, status = "ready", onSubmit, showCompos
 				"aria-atomic": "true",
 				children: copyAnnouncement
 			}),
-			loading ? /* @__PURE__ */ jsxs("div", {
+			loading ? /* @__PURE__ */ jsx("div", {
 				className: "agent-chat__transcript-loading",
 				role: "status",
-				children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), /* @__PURE__ */ jsx("span", {
-					className: "sigvelo-visually-hidden",
-					children: "Loading conversation"
-				})]
+				children: /* @__PURE__ */ jsx(EmptyState, {
+					icon: /* @__PURE__ */ jsx(SpinnerIcon, {}),
+					description: "Loading conversation"
+				})
 			}) : showsStartScreen ? /* @__PURE__ */ jsx(AgentChatStartScreen, {
 				...startScreenProps,
 				composer

package/dist/components/agents-sdk/BrowserLiveView.d.ts

@@ -2,27 +2,85 @@ import * as React from "react";
 import { BrowserLiveViewUrl } from "agents/browser";
 
 //#region src/components/agents-sdk/BrowserLiveView.d.ts
-interface BrowserLiveViewProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Complete upstream value returned by `cdp.getLiveViewUrl()`. */
-  source: BrowserLiveViewUrl;
-  /** Epoch ms when `source` was received. Defaults to its first render. */
-  receivedAt?: number;
-  /** The page the session was showing — used for the ended-state text. */
+/** Where a live view is in its lifecycle, however the pixels arrive. */
+type BrowserLiveViewPhase = "connecting" | "streaming" | "reconnecting" | "idle" | "failed";
+interface BrowserLiveViewCommonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The page being shown — names the surface and labels its ended state. */
   pageTitle?: string;
   /**
-   * Shown once the link expires — pass the last screenshot the agent took
+   * Replaces the built-in text for the current phase — e.g. a failure reason.
+   * Set it while the view is live and it reads as a notice over the picture,
+   * which is where a fault that does not end the session belongs.
+   */
+  statusLabel?: string;
+  /**
+   * Shown once the view stops — pass the last screenshot the agent took
    * (`<img>`) to keep the final frame on screen. Defaults to a quiet
    * "Live view ended" state.
    */
   fallback?: React.ReactNode;
+  /** Omits the expand control for a view that already fills its viewport. */
+  expandable?: boolean;
+  /**
+   * Takes the whole container instead of standing in it as a 16/10 card.
+   * The card treatment — the aspect box, the hairline, the rounded corners —
+   * is there to separate the view from what sits beside it; a view that is
+   * the entire surface, as it is on a phone, has nothing to separate from and
+   * spends real pixels saying so. Usually paired with `expandable={false}`,
+   * since there is nowhere larger to expand into.
+   */
+  fill?: boolean;
 }
+type BrowserLiveViewProps = BrowserLiveViewCommonProps & ({
+  /** Complete upstream value returned by `cdp.getLiveViewUrl()`. */source: BrowserLiveViewUrl; /** Epoch ms when `source` was received. Defaults to its first render. */
+  receivedAt?: number;
+  renderMedia?: never;
+  phase?: never;
+} | {
+  /**
+   * The picture, drawn by the host — a `<video>` on its own transport, a
+   * canvas, whatever it carries. Called once per placement because
+   * neither a video nor an iframe can occupy two places at once.
+   *
+   * Remote-control surfaces belong in here too: coordinate mapping and
+   * key handling are the host's, since only it knows what its input API
+   * expects. This component owns the frame around them. An overlay drawn
+   * here covers the picture and stays under the frame's own chrome, so a
+   * control surface can take every pointer the picture gets without
+   * swallowing the Live badge or the expand control.
+   *
+   * `statusId` names whatever element currently states the phase, for a
+   * control surface to point `aria-describedby` at.
+   */
+  renderMedia: (placement: "inline" | "dialog", statusId: string) => React.ReactNode; /** The host draws, so the host owns the lifecycle. A URL derives its own. */
+  phase: BrowserLiveViewPhase;
+  source?: never;
+  receivedAt?: never;
+});
 /**
- * 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 `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.
+ * A live, interactive view of an agent's browser session.
+ *
+ * It takes the session either way round. Give it `source` — a Browser Run
+ * `BrowserLiveViewUrl` — and it embeds the hosted viewer, expiring the frame
+ * on its own once `expiresInMs` passes. Give it `renderMedia` and a `phase`
+ * instead and the host draws the picture on its own transport while this keeps
+ * the frame around it. The Live badge, the connecting overlay, the ended
+ * state, and the fullscreen expand are the same either way, because to the
+ * person watching it is the same thing.
+ *
+ * `fill` drops the card treatment for a view that is the whole surface rather
+ * than a block on one — the phone's screen, or a panel that already sizes
+ * itself. Everything else about the frame is unchanged.
+ *
+ * A host-drawn view keeps its own input surface, because coordinate mapping
+ * and key handling depend on what the host's input API expects — a screencast
+ * wants CSS pixels offset by its viewport, and nothing generic here could know
+ * that. This component owns the frame; the host owns the picture and control.
+ *
+ * The two sources differ in what the host must trust. A hosted URL embeds a
+ * third-party origin and runs its script; the iframe is unsandboxed by design
+ * because the viewer needs scripts and its own origin to stream the session,
+ * so only pass trusted Live View URLs. Host-drawn media embeds no origin.
  *
  * Where URLs come from (upstream: `agents/browser` in
  * github.com/cloudflare/agents — `BrowserLiveViewUrl`): the model calls
@@ -32,17 +90,7 @@ interface BrowserLiveViewProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * Styling rides `@mcp-b/react-components/styles` (browser-live-view.css),
  * which think-chat consumers load anyway.
- *
- * 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.
  */
-declare function BrowserLiveView({
-  source,
-  receivedAt,
-  pageTitle,
-  fallback,
-  className,
-  ...props
-}: BrowserLiveViewProps): React.JSX.Element;
+declare function BrowserLiveView(props: BrowserLiveViewProps): React.JSX.Element;
 //#endregion
-export { BrowserLiveView, BrowserLiveViewProps };
+export { BrowserLiveView, BrowserLiveViewPhase, BrowserLiveViewProps };

package/dist/components/agents-sdk/BrowserLiveView.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { A as MaximizeIcon, J as SpinnerIcon } from "../../icons-B4mGvCvc.js";
+import { Y as SpinnerIcon, j as MaximizeIcon } from "../../icons-MmIXciMO.js";
 import { Button } from "../foundations/Button.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { StatusPill } from "../foundations/StatusPill.js";
@@ -8,6 +8,13 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/BrowserLiveView.tsx
 const FRAME_LOAD_TIMEOUT_MS = 15e3;
+const PHASE_TEXT = {
+	connecting: "Connecting live view…",
+	streaming: "Live",
+	reconnecting: "Reconnecting live view…",
+	idle: "Live view ended",
+	failed: "Live view unavailable"
+};
 function EndedState({ title, detail }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "browser-live-view__ended",
@@ -21,12 +28,29 @@ 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 `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.
+* A live, interactive view of an agent's browser session.
+*
+* It takes the session either way round. Give it `source` — a Browser Run
+* `BrowserLiveViewUrl` — and it embeds the hosted viewer, expiring the frame
+* on its own once `expiresInMs` passes. Give it `renderMedia` and a `phase`
+* instead and the host draws the picture on its own transport while this keeps
+* the frame around it. The Live badge, the connecting overlay, the ended
+* state, and the fullscreen expand are the same either way, because to the
+* person watching it is the same thing.
+*
+* `fill` drops the card treatment for a view that is the whole surface rather
+* than a block on one — the phone's screen, or a panel that already sizes
+* itself. Everything else about the frame is unchanged.
+*
+* A host-drawn view keeps its own input surface, because coordinate mapping
+* and key handling depend on what the host's input API expects — a screencast
+* wants CSS pixels offset by its viewport, and nothing generic here could know
+* that. This component owns the frame; the host owns the picture and control.
+*
+* The two sources differ in what the host must trust. A hosted URL embeds a
+* third-party origin and runs its script; the iframe is unsandboxed by design
+* because the viewer needs scripts and its own origin to stream the session,
+* so only pass trusted Live View URLs. Host-drawn media embeds no origin.
 *
 * Where URLs come from (upstream: `agents/browser` in
 * github.com/cloudflare/agents — `BrowserLiveViewUrl`): the model calls
@@ -36,22 +60,21 @@ function EndedState({ title, detail }) {
 *
 * Styling rides `@mcp-b/react-components/styles` (browser-live-view.css),
 * which think-chat consumers load anyway.
-*
-* 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({ source, receivedAt, pageTitle, fallback, className, ...props }) {
-	const [expired, setExpired] = React.useState(() => receivedAt !== void 0 && receivedAt + source.expiresInMs <= Date.now());
+function BrowserLiveView(props) {
+	const { source, receivedAt, renderMedia, phase, pageTitle, statusLabel, fallback, expandable = true, fill, className, ...rest } = props;
+	const [expired, setExpired] = React.useState(() => source !== void 0 && receivedAt !== void 0 && receivedAt + source.expiresInMs <= Date.now());
 	const [reportedFrameState, setReportedFrameState] = React.useState(() => ({
-		url: source.url,
+		url: source?.url ?? "",
 		value: "loading"
 	}));
-	if (reportedFrameState.url !== source.url) setReportedFrameState({
+	if (source && reportedFrameState.url !== source.url) setReportedFrameState({
 		url: source.url,
 		value: "loading"
 	});
-	const frameState = reportedFrameState.url === source.url ? reportedFrameState.value : "loading";
+	const frameState = source && reportedFrameState.url === source.url ? reportedFrameState.value : "loading";
 	React.useEffect(() => {
+		if (!source) return;
 		const remaining = (receivedAt ?? Date.now()) + source.expiresInMs - Date.now();
 		if (remaining <= 0) {
 			setExpired(true);
@@ -60,57 +83,71 @@ function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, .
 		setExpired(false);
 		const timer = setTimeout(() => setExpired(true), remaining);
 		return () => clearTimeout(timer);
-	}, [
-		receivedAt,
-		source.expiresInMs,
-		source.targetId,
-		source.url
-	]);
+	}, [receivedAt, source]);
 	React.useEffect(() => {
-		if (frameState !== "loading") return;
+		if (!source || frameState !== "loading") return;
 		const url = source.url;
 		const timer = setTimeout(() => setReportedFrameState({
 			url,
 			value: "failed"
 		}), FRAME_LOAD_TIMEOUT_MS);
 		return () => clearTimeout(timer);
-	}, [frameState, source.url]);
-	const failed = frameState === "failed";
-	const live = !expired && !failed;
+	}, [frameState, source]);
+	const activePhase = source ? expired ? "idle" : frameState === "failed" ? "failed" : frameState === "loading" ? "connecting" : "streaming" : phase ?? "connecting";
+	const live = activePhase === "streaming";
+	const connecting = activePhase === "connecting" || activePhase === "reconnecting";
 	const frameTitle = pageTitle ? `Live browser view — ${pageTitle}` : "Live browser view";
-	const view = live ? /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(StatusPill, {
-			busy: true,
-			size: "sm",
-			color: "destructive",
-			className: "browser-live-view__badge",
-			children: "Live"
-		}),
-		/* @__PURE__ */ jsx("iframe", {
-			className: "browser-live-view__frame",
-			src: source.url,
-			title: frameTitle,
-			allow: "clipboard-read; clipboard-write",
-			onLoad: () => setReportedFrameState({
-				url: source.url,
-				value: "ready"
-			})
-		}, source.url),
-		frameState === "loading" ? /* @__PURE__ */ jsxs(TransitionSurface, {
-			className: "browser-live-view__state",
-			role: "status",
-			children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), "Connecting live view…"]
-		}) : null
-	] }) : fallback ?? /* @__PURE__ */ jsx(EndedState, {
-		title: failed ? "Live view unavailable" : "Live view ended",
-		detail: pageTitle
-	});
+	const statusId = React.useId();
+	const renderView = (placement) => {
+		const placementStatusId = `${statusId}-${placement}`;
+		if (!live && !connecting) return fallback ?? /* @__PURE__ */ jsx(EndedState, {
+			title: statusLabel ?? PHASE_TEXT[activePhase],
+			detail: pageTitle
+		});
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			live && placement === "inline" ? /* @__PURE__ */ jsx(StatusPill, {
+				busy: true,
+				size: "sm",
+				color: "destructive",
+				className: "browser-live-view__badge",
+				children: "Live"
+			}) : null,
+			source ? placement === "dialog" ? /* @__PURE__ */ jsx("iframe", {
+				src: source.url,
+				title: frameTitle,
+				allow: "clipboard-read; clipboard-write"
+			}) : /* @__PURE__ */ jsx("iframe", {
+				className: "browser-live-view__frame",
+				src: source.url,
+				title: frameTitle,
+				allow: "clipboard-read; clipboard-write",
+				onLoad: () => setReportedFrameState({
+					url: source.url,
+					value: "ready"
+				})
+			}, source.url) : renderMedia?.(placement, placementStatusId),
+			connecting ? /* @__PURE__ */ jsxs(TransitionSurface, {
+				className: "browser-live-view__state",
+				id: placementStatusId,
+				role: "status",
+				children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), statusLabel ?? PHASE_TEXT[activePhase]]
+			}) : null,
+			live && statusLabel ? /* @__PURE__ */ jsx("p", {
+				className: "browser-live-view__notice",
+				id: placementStatusId,
+				role: "status",
+				children: statusLabel
+			}) : null
+		] });
+	};
 	return /* @__PURE__ */ jsxs("div", {
-		...props,
+		...rest,
 		className: cx("browser-live-view", className),
-		"data-expired": expired || failed || void 0,
-		"data-frame-state": frameState,
-		children: [view, /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(Dialog.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+		"data-expired": activePhase === "idle" || activePhase === "failed" || void 0,
+		"data-fill": fill || void 0,
+		"data-frame-state": source ? frameState : void 0,
+		"data-phase": activePhase,
+		children: [renderView("inline"), expandable ? /* @__PURE__ */ jsxs(Dialog.Root, { children: [/* @__PURE__ */ jsx(Dialog.Trigger, { render: /* @__PURE__ */ jsx(Button, {
 			variant: "ghost",
 			color: "neutral",
 			size: "sm",
@@ -126,16 +163,9 @@ function BrowserLiveView({ source, receivedAt, pageTitle, fallback, className, .
 				children: frameTitle
 			}), /* @__PURE__ */ jsx("div", {
 				className: "browser-live-view__dialog-body",
-				children: live ? /* @__PURE__ */ jsx("iframe", {
-					src: source.url,
-					title: frameTitle,
-					allow: "clipboard-read; clipboard-write"
-				}) : fallback ?? /* @__PURE__ */ jsx(EndedState, {
-					title: failed ? "Live view unavailable" : "Live view ended",
-					detail: pageTitle
-				})
+				children: renderView("dialog")
 			})]
-		}) })] })] })]
+		}) })] })] }) : null]
 	});
 }
 //#endregion

package/dist/components/agents-sdk/BrowserReplay.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { V as PlayIcon, z as PauseIcon } from "../../icons-B4mGvCvc.js";
+import { B as PauseIcon, H as PlayIcon } from "../../icons-MmIXciMO.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { r as formatClock } from "../../format-DB2mX9DA.js";
 import { EmptyState } from "../foundations/EmptyState.js";

package/dist/components/agents-sdk/BrowserRunPanel.d.ts

@@ -2,7 +2,26 @@ import * as React from "react";
 import { BrowserLiveView } from "agents/browser";
 
 //#region src/components/agents-sdk/BrowserRunPanel.d.ts
-interface BrowserRunPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+/**
+ * One entry of the drawn tab strip. The panel synthesizes browser chrome
+ * around content Chrome itself never paints, so a tab is whatever record of a
+ * page the host holds — a Browser Run target, a claimed extension tab — cut
+ * down to the identity and words the strip needs.
+ */
+interface BrowserRunPanelTab {
+  /** Stable identity; the strip's selection value. Hosts stringify their own ids. */
+  id: string;
+  title?: string;
+  url?: string;
+}
+interface BrowserRunPanelCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /** Error from the host's browser session or transport. */
+  error?: React.ReactNode;
+  /** Panel heading. */
+  label?: React.ReactNode;
+  ref?: React.Ref<HTMLDivElement>;
+}
+interface BrowserRunPanelHostedProps extends BrowserRunPanelCommonProps {
   /** Host-side Browser Run Live View data from `connector.liveView()`. */
   liveView?: BrowserLiveView;
   /** Refreshes the Live View URL before it expires. */
@@ -11,36 +30,64 @@ interface BrowserRunPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   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;
+  children?: never;
+  tabs?: never;
+  selectedTabId?: never;
+  onSelectTab?: never;
+  url?: never;
+  onOpenUrl?: never;
+  urlPlaceholder?: never;
+  urlDisabled?: never;
+  urlLabel?: never;
+  navigation?: never;
+}
+interface BrowserRunPanelStreamedProps extends BrowserRunPanelCommonProps {
+  /**
+   * The host's own browser surface — typically a `BrowserLiveView` carrying a
+   * host-fed stream. The panel frames it with the drawn tab strip and address
+   * bar; the host keeps everything transport: media, input, reconnection.
+   */
+  children: React.ReactNode;
+  /** The drawn tab strip; it renders only with more than one entry. */
+  tabs?: readonly BrowserRunPanelTab[];
+  /** Controlled selection over `tabs`; null selects nothing. */
+  selectedTabId?: string | null;
+  /** A viewer picked a tab it is not watching; the host grants or ignores it. */
+  onSelectTab?: (tabId: string) => void;
+  /** Address bar value: the streamed page's current URL. */
+  url?: string;
+  /** Commits an address-bar entry. Absent, the address bar is read-only. */
+  onOpenUrl?: (url: string) => void;
+  urlPlaceholder?: string;
+  urlDisabled?: boolean;
+  /** Accessible name for the address input. */
+  urlLabel?: string;
+  /** Navigation controls before the address input, e.g. Back and Reload. */
+  navigation?: React.ReactNode;
+  liveView?: never;
+  onRefresh?: never;
+  onCloseSession?: never;
+  loading?: never;
+  empty?: never;
+  fallback?: never;
 }
+type BrowserRunPanelProps = BrowserRunPanelHostedProps | BrowserRunPanelStreamedProps;
 /**
- * Right-side Browser Run panel for `ThinkFullApp.workbenchPanels`.
+ * Browser panel chrome — drawn tab strip, address bar, framed body — for
+ * browser surfaces Chrome itself never paints.
  *
- * The app owns `createBrowserRuntime()`, `connector.liveView()`, polling, and
- * session cleanup. This component only renders upstream `BrowserLiveView`
- * data and calls app-provided refresh/close callbacks.
+ * Two hosts fill it in. A Browser Run host passes upstream `BrowserLiveView`
+ * data from `connector.liveView()`, and the panel derives tabs, address, and
+ * an embedded live view itself, calling app-provided refresh/close callbacks.
+ * A streaming host instead passes `children` — its own live surface — with
+ * the tab strip, address bar, and navigation controlled from the host's own
+ * records, because a remote screencast carries only page pixels and every
+ * piece of chrome around it has to be synthesized from host state.
  */
-declare function BrowserRunPanel({
-  liveView,
-  onRefresh,
-  onCloseSession,
-  loading,
-  error,
-  label,
-  empty,
-  fallback,
-  className,
-  ref,
-  ...props
-}: BrowserRunPanelProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+declare function BrowserRunPanel(props: BrowserRunPanelProps): React.JSX.Element;
 //#endregion
-export { BrowserRunPanel, BrowserRunPanelProps };
+export { BrowserRunPanel, BrowserRunPanelProps, BrowserRunPanelTab };