@mcp-b/react-components 0.38.0 → 0.39.0

package/dist/{ToggleGroup-_pQMyHGM.d.ts → ToggleGroup-BrQZOQn_.d.ts}

@@ -1,7 +1,7 @@
 import { r as ToggleVariantsOptions } from "./Toggle-DLrIf5YH.js";
 import * as React from "react";
-import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
+import { Toggle } from "@base-ui/react/toggle";
 
 //#region src/components/foundations/ToggleGroup.d.ts
 type ToggleGroupSize = ToggleVariantsOptions["size"];

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

@@ -3,8 +3,8 @@ import { C as FileIcon, J as SpinnerIcon, j as McpIcon, rt as XIcon, tt as Warni
 import { ActivityHeader } from "../ai-sdk/Activity.js";
 import { Button } from "../foundations/Button.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
-import { AppIcon } from "../foundations/AppIcon.js";
 import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
+import { AppIcon } from "../foundations/AppIcon.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/AgentActivityPreview.tsx

package/dist/components/agents-sdk/AgentChat.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

@@ -2,12 +2,19 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { A as MaximizeIcon, J as SpinnerIcon } from "../../icons-B4mGvCvc.js";
 import { Button } from "../foundations/Button.js";
 import { Dialog } from "../foundations/Dialog.js";
-import { StatusPill } from "../foundations/StatusPill.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
+import { StatusPill } from "../foundations/StatusPill.js";
 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/BrowserRunPanel.js

@@ -2,8 +2,8 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { J as SpinnerIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
 import { Button } from "../foundations/Button.js";
 import { Tabs } from "../foundations/Tabs.js";
-import { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "../general-purpose/WebPreview.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
+import { WebPreview, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewUrl } from "../general-purpose/WebPreview.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/BrowserRunPanel.tsx

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

@@ -7,8 +7,8 @@ import { Dialog } from "../foundations/Dialog.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Separator } from "../foundations/Separator.js";
 import { AppIcon } from "../foundations/AppIcon.js";
-import { SearchField } from "../foundations/SearchField.js";
 import { n as getMcpServerProjection, t as McpServerIcon } from "../../mcp-server-SD_S-IpB.js";
+import { SearchField } from "../foundations/SearchField.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/McpPluginCatalog.tsx

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

@@ -6,8 +6,8 @@ import { Dialog } from "../foundations/Dialog.js";
 import { o as titleCase } from "../../format-DB2mX9DA.js";
 import { Separator } from "../foundations/Separator.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
-import { t as ProviderLogo } from "../../provider-logos-zjZycgV6.js";
 import { EmptyState } from "../foundations/EmptyState.js";
+import { t as ProviderLogo } from "../../provider-logos-zjZycgV6.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";

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

@@ -1,2 +1,2 @@
-import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-DkA4Wr71.js";
+import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
 export { ThinkChat, ThinkChatMessages, ThinkChatProvider, ThinkChatRoot, thinkPendingExecutionApprovalsQueryOptions, useThinkChat, useThinkPendingExecutionApprovals };

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

@@ -2,9 +2,9 @@ import { useExpansionState } from "../ai-sdk/ExpansionState.js";
 import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityText, ActivityTrigger } from "../ai-sdk/Activity.js";
 import { Button } from "../foundations/Button.js";
 import { MessageResponse } from "../ai-sdk/Message.js";
+import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
 import { useOptionalAgentToolRuns } from "./AgentToolRunsContext.js";
 import { SubagentRunList } from "./SubagentRunList.js";
-import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
 import { useOptionalThinkChatLive } from "./ThinkChatContext.js";
 import { isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartWorking, isSessionContextToolPart, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart } from "./ThinkChatToolParts.js";
 import { ThinkChatBrowserPanel, ThinkChatExecutePanel, ThinkChatFetchPanel, ThinkChatSessionContextPanel, ThinkChatSkillPanel, ThinkChatWorkspacePanel } from "./ThinkChatToolPanels.js";

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

@@ -6,10 +6,10 @@ import { Menu } from "../foundations/Menu.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { EmptyState } from "../foundations/EmptyState.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { getThinkExecutionRunAccessibleName, getThinkExecutionRunId, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, isSameThinkExecutionRun, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionRunSummary } from "./ThinkExecutionStatus.js";
 import { ThinkExecutionDetail } from "./ThinkExecutionDetail.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { queryOptions, useMutation, useSuspenseQuery } from "@tanstack/react-query";

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

@@ -3,12 +3,13 @@ import { $ as TerminalIcon, C as FileIcon, J as SpinnerIcon, c as BoxIcon, f as
 import { Button } from "../foundations/Button.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
-import { ResizableSidePanel } from "../general-purpose/ResizableSidePanel.js";
-import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../../WorkspaceLink-DtH66bAY.js";
-import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-DkA4Wr71.js";
+import { EmptyState } from "../foundations/EmptyState.js";
 import { McpPluginCatalog } from "./McpPluginCatalog.js";
+import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../../WorkspaceLink-DtH66bAY.js";
+import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
+import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { ThinkExecutionWorkbench } from "./ThinkExecutionWorkbench.js";
+import { ResizableSidePanel } from "../general-purpose/ResizableSidePanel.js";
 import { ThinkFullAppViewSwitch } from "./ThinkFullAppViewSwitch.js";
 import { ThinkThreadStatusIndicators } from "./ThinkThreadPicker.js";
 import { ThinkThreadShell } from "./ThinkThreadShell.js";
@@ -119,13 +120,13 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 		label: "Execution",
 		icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
 		render: () => /* @__PURE__ */ jsx(React.Suspense, {
-			fallback: /* @__PURE__ */ jsxs("div", {
-				className: "think-full-app__workbench",
+			fallback: /* @__PURE__ */ jsx("div", {
+				className: "think-full-app__workbench think-full-app__workbench--loading",
 				role: "status",
-				children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), /* @__PURE__ */ jsx("span", {
-					className: "sigvelo-visually-hidden",
-					children: "Loading execution"
-				})]
+				children: /* @__PURE__ */ jsx(EmptyState, {
+					icon: /* @__PURE__ */ jsx(SpinnerIcon, {}),
+					description: "Loading execution"
+				})
 			}),
 			children: /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
 				source: agent.stub,

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

@@ -1,4 +1,4 @@
-import { r as ToggleGroupProps } from "../../ToggleGroup-_pQMyHGM.js";
+import { r as ToggleGroupProps } from "../../ToggleGroup-BrQZOQn_.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/ThinkFullAppViewSwitch.d.ts

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

@@ -1,6 +1,6 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkFullAppViewSwitch.tsx

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

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Badge } from "../foundations/Badge.js";
-import { Switch } from "../foundations/Switch.js";
 import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
+import { Switch } from "../foundations/Switch.js";
 import { ThinkRoutineRuns } from "./ThinkRoutineRuns.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -4,9 +4,9 @@ import { Button, buttonVariants } from "../foundations/Button.js";
 import { Menu } from "../foundations/Menu.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { n as isPlainPrimaryLinkActivation, t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
-import { AlertDialog } from "../foundations/AlertDialog.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import { AlertDialog } from "../foundations/AlertDialog.js";
 import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { ThinkRoutineBrowser } from "./ThinkRoutineBrowser.js";
 import { ThinkRoutineDetail } from "./ThinkRoutineDetail.js";

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

@@ -4,9 +4,9 @@ import { Button, buttonVariants } from "../foundations/Button.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { n as isPlainPrimaryLinkActivation, t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
-import { AlertDialog } from "../foundations/AlertDialog.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { SearchField } from "../foundations/SearchField.js";
+import { AlertDialog } from "../foundations/AlertDialog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkThreadPicker.tsx

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

@@ -2,7 +2,7 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { a as WorkspaceNavigationRestorationBoundary, n as WorkspaceNavigationProvider, o as useRequiredWorkspaceNavigationRestoration, r as resolveWorkspaceLink } from "../../WorkspaceLink-DtH66bAY.js";
 import { WorkspaceBrowser } from "./WorkspaceBrowser.js";
-import { t as WorkspaceFileView } from "../../WorkspaceFileView-DeGzWwhK.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-D0r7xnq5.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/WorkspaceExplorer.tsx

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

@@ -1,2 +1,2 @@
-import { t as WorkspaceFileView } from "../../WorkspaceFileView-DeGzWwhK.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-D0r7xnq5.js";
 export { WorkspaceFileView };

package/dist/components/foundations/EmptyState.d.ts

@@ -21,10 +21,20 @@ interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ti
  * `children` land under the description, for the action that makes the region
  * non-empty.
  *
+ * A region waiting on data is empty too, and this is the shape for it:
+ * `icon={<SpinnerIcon />}` with a description of what is being waited on, in a
+ * `role="status"` container. The description is not optional there —
+ * `prefers-reduced-motion` stops the spinner outright, so an icon on its own
+ * leaves a still circle and no way to tell loading from broken.
+ *
  * @example
  * ```tsx
  * <EmptyState description="No runs yet." />
  *
+ * <div role="status">
+ *   <EmptyState icon={<SpinnerIcon />} description="Loading conversation" />
+ * </div>
+ *
  * <EmptyState
  *   icon={<MessageIcon />}
  *   title="Start a conversation"

package/dist/components/foundations/EmptyState.js

@@ -14,10 +14,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * `children` land under the description, for the action that makes the region
 * non-empty.
 *
+* A region waiting on data is empty too, and this is the shape for it:
+* `icon={<SpinnerIcon />}` with a description of what is being waited on, in a
+* `role="status"` container. The description is not optional there —
+* `prefers-reduced-motion` stops the spinner outright, so an icon on its own
+* leaves a still circle and no way to tell loading from broken.
+*
 * @example
 * ```tsx
 * <EmptyState description="No runs yet." />
 *
+* <div role="status">
+*   <EmptyState icon={<SpinnerIcon />} description="Loading conversation" />
+* </div>
+*
 * <EmptyState
 *   icon={<MessageIcon />}
 *   title="Start a conversation"

package/dist/components/foundations/ToggleGroup.d.ts

@@ -1,2 +1,2 @@
-import { n as ToggleGroupItemProps, r as ToggleGroupProps, t as ToggleGroup } from "../../ToggleGroup-_pQMyHGM.js";
+import { n as ToggleGroupItemProps, r as ToggleGroupProps, t as ToggleGroup } from "../../ToggleGroup-BrQZOQn_.js";
 export { ToggleGroup, ToggleGroupItemProps, ToggleGroupProps };

package/dist/components/foundations/ToggleGroup.js

@@ -3,8 +3,8 @@ import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { toggleVariants } from "./Toggle.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/foundations/ToggleGroup.tsx
 /**
 * Tracks the pressed item's box so the segmented thumb can slide to it instead

package/dist/components/general-purpose/PricingBillingToggle.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Badge } from "../foundations/Badge.js";
-import { Switch } from "../foundations/Switch.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
+import { Switch } from "../foundations/Switch.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/PricingBillingToggle.tsx
 /** Controlled billing-period selector composed from the shared Switch or ToggleGroup. */

package/dist/components/general-purpose/PricingUsageCalculator.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Separator } from "../foundations/Separator.js";
 import { Card } from "../foundations/Card.js";
-import { Progress } from "../foundations/Progress.js";
 import { Slider } from "../foundations/Slider.js";
+import { Progress } from "../foundations/Progress.js";
 import { formatPricingUsage, getUsagePrice } from "./Pricing.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/nanites/AgentToolDetail.js

@@ -1,11 +1,11 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { r as ArrowLeftIcon } from "../../icons-B4mGvCvc.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
+import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
+import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
+import { t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
-import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
-import { t as ThinkChat } from "../../ThinkChat-DkA4Wr71.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";

package/dist/styles/agent-chat.css

@@ -59,14 +59,14 @@
 
 /* Takes the whole transcript region, the way the scroller it stands in for
    does, so nothing moves when the rows arrive. The composer floats over its
-   lower edge, so the spinner sits slightly high rather than under it. */
+   lower edge, so the state sits slightly high rather than under it. The
+   .empty-state inside brings its own type and colour. */
 .agent-chat__transcript-loading {
   display: grid;
   block-size: 100%;
   min-block-size: 0;
   place-items: center;
   padding-block-end: var(--agent-chat-composer-size, 5rem);
-  color: var(--sigvelo-color-text-muted);
 }
 
 .agent-chat[data-composer-hidden] .agent-chat__transcript-loading {

package/dist/styles/base.css

@@ -135,6 +135,10 @@ body {
   }
 }
 
+/* A spinner that cannot spin is a circle. Plenty of people — most of them on
+   phones — browse with this on, so nothing may rely on the rotation to say
+   "still working": pair the icon with text that reads the same either way.
+   `.empty-state` is that pairing for a whole region. */
 @media (prefers-reduced-motion: reduce) {
   .sigvelo-icon--spinner {
     animation: none;

package/dist/styles/browser-live-view.css

@@ -15,6 +15,18 @@
   overflow: hidden;
 }
 
+/* `fill`: the view is the surface, not a card on it. Nothing sits beside it to
+   be separated from, so the aspect box, the hairline and the corners go and the
+   frame takes whatever its container gives it. The picture still letterboxes
+   inside — `object-fit: contain` further down is what keeps the remote page's
+   own proportions honest at any shape. */
+.browser-live-view[data-fill] {
+  block-size: 100%;
+  aspect-ratio: auto;
+  border: 0;
+  border-radius: 0;
+}
+
 .browser-live-view__frame {
   inline-size: 100%;
   block-size: 100%;
@@ -60,6 +72,20 @@
   max-inline-size: 80%;
 }
 
+/* Host-drawn media. Styled by element rather than by class so a host that
+   renders its own picture into the frame inherits the shape without opting in:
+   `contain` keeps the remote viewport's proportions whatever the box is, and
+   the letterbox inherits the frame's fill, so a host that recolors the frame
+   recolors the bars with it. */
+.browser-live-view video,
+.browser-live-view canvas {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: contain;
+  background-color: inherit;
+}
+
 /* An expired view showing a screenshot fallback keeps the image flush */
 .browser-live-view[data-expired] > img {
   inline-size: 100%;
@@ -83,6 +109,25 @@
   z-index: 1;
 }
 
+/* A fault that leaves the picture running: a caption on the frame, opposite
+   the expand control, rather than an overlay that would hide what still
+   arrives. */
+.browser-live-view__notice {
+  position: absolute;
+  inset-block-end: var(--sigvelo-spacing-2);
+  inset-inline-start: var(--sigvelo-spacing-2);
+  z-index: 1;
+  max-inline-size: calc(100% - var(--sigvelo-spacing-12));
+  margin: 0;
+  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
+  border-radius: var(--sigvelo-radius-md);
+  background-color: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-raised);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  pointer-events: none;
+}
+
 /* Expand affordance, video-player style: quiet until the box is hovered or
    the button is focused */
 .browser-live-view__expand {

package/dist/styles/think-full-app.css

@@ -158,6 +158,12 @@ body.is-resizing-side-panel .think-full-app__view-scope {
   );
 }
 
+/* The panel stands in for itself while its first read is in flight, so the
+   waiting state sits where the content will rather than in the top corner. */
+.think-full-app__workbench--loading {
+  justify-content: center;
+}
+
 .think-full-app__workbench.workspace-explorer {
   border: 0;
   border-radius: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -53,7 +53,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.38.0"
+    "@mcp-b/design-tokens": "0.39.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.230",

package/dist/{ThinkChat-DkA4Wr71.js → ThinkChat-BES_3Mb-.js}

@@ -1,6 +1,6 @@
 import { TransitionSurface } from "./components/foundations/TransitionSurface.js";
-import { AgentToolRunsProvider, useOptionalAgentToolRuns, useSourceScopedAgentToolEvents } from "./components/agents-sdk/AgentToolRunsContext.js";
 import { AgentChat, compactingNotice } from "./components/agents-sdk/AgentChat.js";
+import { AgentToolRunsProvider, useOptionalAgentToolRuns, useSourceScopedAgentToolEvents } from "./components/agents-sdk/AgentToolRunsContext.js";
 import { SubagentRunList } from "./components/agents-sdk/SubagentRunList.js";
 import { ThinkChatContext, ThinkChatLiveContext, useOptionalThinkChatContext, useThinkChatContext } from "./components/agents-sdk/ThinkChatContext.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./components/agents-sdk/ThinkChatActivity.js";

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

@@ -1,10 +1,10 @@
 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 { 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 { 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";
 import { n as createWorkspaceRehypePlugins, t as WorkspaceMessageResponse } from "./WorkspaceMessageResponse-CJCmGvTx.js";
+import { AppTopBar } from "./components/general-purpose/AppTopBar.js";
 import { WorkspaceHeader } from "./components/agents-sdk/WorkspaceHeader.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";