@mcp-b/react-components 0.40.0 → 0.42.0

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

@@ -0,0 +1,637 @@
+import { E as KeyboardIcon, H as RefreshIcon, r as ArrowLeftIcon } from "../../icons-CVFSeTJn.js";
+import { Button } from "../foundations/Button.js";
+import { WebPreviewNavigationButton } from "../general-purpose/WebPreview.js";
+import { BrowserLiveView } from "./BrowserLiveView.js";
+import { BrowserRunPanel } from "./BrowserRunPanel.js";
+import { useCallback, useEffect, useEffectEvent, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/agents-sdk/BrowserLiveScreen.tsx
+const BROWSER_LIVE_SCREEN_NEGOTIATION_TIMEOUT_MS = 1e4;
+/**
+* A complete interactive viewer for an employee's claimed browser tabs.
+*
+* The host supplies only signaling transport, ICE configuration, and claimed
+* tab summaries. This component owns the peer connection, remote-input
+* mapping, reconnect lifecycle, synthesized browser chrome, and cleanup.
+*/
+function BrowserLiveScreen({ sendSignal: sendHostSignal, subscribeSignals, protocol, getIceServers, label = "Employee browser", controlLabel = "Control employee browser", tabs = [], requestedTabId }) {
+	const video = useRef(null);
+	const track = useRef(null);
+	const attachVideo = useCallback((element) => {
+		video.current = element;
+		if (element) element.srcObject = track.current;
+	}, []);
+	const showTrack = useCallback((stream) => {
+		track.current = stream;
+		if (video.current) video.current.srcObject = stream;
+	}, []);
+	const channel = useRef(null);
+	const geometry = useRef(null);
+	const [phase, setPhase] = useState("connecting");
+	const [failure, setFailure] = useState(null);
+	const sendSignal = useEffectEvent((viewerId, payload) => sendHostSignal({
+		viewerId,
+		payload
+	}));
+	const loadIceServers = useEffectEvent(async () => await getIceServers?.() ?? []);
+	const subscribe = useEffectEvent((listener) => subscribeSignals(listener));
+	const parseStatus = useEffectEvent((value) => protocol.parseStatus(value));
+	const serializeInput = useEffectEvent((value) => protocol.serializeInput(value));
+	const serializeCommand = useEffectEvent((value) => protocol.serializeCommand(value));
+	const selectRequestedTab = useEffectEvent((data) => {
+		if (requestedTabId === void 0 || data?.readyState !== "open") return;
+		data.send(serializeCommand({
+			kind: "selectTab",
+			tabId: requestedTabId
+		}));
+	});
+	const dataChannelLabel = protocol.dataChannelLabel;
+	const input = useRef(null);
+	const handleWheel = useEffectEvent((event) => {
+		event.preventDefault();
+		const point = toPagePoint(event);
+		if (!point) return;
+		sendInput([{
+			kind: "mouse",
+			type: "mouseWheel",
+			...point,
+			deltaX: event.deltaX,
+			deltaY: event.deltaY,
+			modifiers: modifiers(event)
+		}]);
+	});
+	const attachInput = useCallback((element) => {
+		input.current?.removeEventListener("wheel", handleWheel);
+		input.current = element;
+		element?.addEventListener("wheel", handleWheel, { passive: false });
+	}, []);
+	const [keyboardOpen, setKeyboardOpen] = useState(false);
+	const touch = useRef(null);
+	const mousePress = useRef(null);
+	const [streamed, setStreamed] = useState(null);
+	useEffect(() => {
+		let disposed = false;
+		let connection;
+		let viewerId = "";
+		let attempt = 0;
+		let pendingCandidates = [];
+		let retryTimer;
+		let negotiationTimer;
+		let signaling = Promise.resolve();
+		function clearRetry() {
+			if (retryTimer !== void 0) clearTimeout(retryTimer);
+			retryTimer = void 0;
+		}
+		function clearNegotiationTimeout() {
+			if (negotiationTimer !== void 0) clearTimeout(negotiationTimer);
+			negotiationTimer = void 0;
+		}
+		function closeCurrent(notify) {
+			const closing = connection;
+			const closingViewerId = viewerId;
+			connection = void 0;
+			channel.current = null;
+			geometry.current = null;
+			if (!disposed) setStreamed(null);
+			showTrack(null);
+			pendingCandidates = [];
+			signaling = Promise.resolve();
+			clearNegotiationTimeout();
+			closing?.close();
+			if (notify && closingViewerId) sendSignal(closingViewerId, { kind: "close" }).catch(() => void 0);
+		}
+		function scheduleReconnect(error) {
+			if (disposed) return;
+			clearNegotiationTimeout();
+			setPhase("reconnecting");
+			if (error !== void 0) setFailure(error instanceof Error ? error.message : "Live view connection failed.");
+			retryTimer ??= setTimeout(() => {
+				retryTimer = void 0;
+				restart();
+			}, RECONNECT_DELAY_MS);
+		}
+		const unsubscribe = subscribe((signal) => {
+			if (signal.viewerId !== viewerId) return;
+			const payload = signal.payload;
+			const signalViewerId = signal.viewerId;
+			signaling = signaling.then(async () => {
+				const peer = connection;
+				if (!peer || signalViewerId !== viewerId) return;
+				if (payload.kind === "answer") {
+					await peer.setRemoteDescription({
+						type: "answer",
+						sdp: payload.sdp
+					});
+					if (peer !== connection || signalViewerId !== viewerId) return;
+					for (const candidate of pendingCandidates.splice(0)) await peer.addIceCandidate(candidate);
+					return;
+				}
+				if (payload.kind === "candidate") {
+					if (!peer.remoteDescription) {
+						pendingCandidates.push(payload.candidate);
+						return;
+					}
+					await peer.addIceCandidate(payload.candidate);
+				}
+			}).catch((error) => {
+				if (signalViewerId === viewerId) scheduleReconnect(error);
+			});
+		});
+		async function connect() {
+			const currentAttempt = ++attempt;
+			try {
+				await connectAs(currentAttempt);
+			} catch (error) {
+				if (currentAttempt === attempt) scheduleReconnect(error);
+			}
+		}
+		async function connectAs(currentAttempt) {
+			const currentViewerId = crypto.randomUUID();
+			viewerId = currentViewerId;
+			setFailure(null);
+			clearNegotiationTimeout();
+			negotiationTimer = setTimeout(() => {
+				if (currentAttempt === attempt) scheduleReconnect(/* @__PURE__ */ new Error("The employee machine did not answer the live view."));
+			}, BROWSER_LIVE_SCREEN_NEGOTIATION_TIMEOUT_MS);
+			const iceServers = await loadIceServers();
+			if (disposed || currentAttempt !== attempt) return;
+			const peer = new RTCPeerConnection({ iceServers });
+			connection = peer;
+			pendingCandidates = [];
+			peer.ontrack = (event) => {
+				if (peer !== connection) return;
+				showTrack(event.streams[0] ?? new MediaStream([event.track]));
+			};
+			peer.onicecandidate = (event) => {
+				if (event.candidate && peer === connection) sendSignal(currentViewerId, {
+					kind: "candidate",
+					candidate: event.candidate.toJSON()
+				}).catch((error) => {
+					if (peer === connection && currentViewerId === viewerId) scheduleReconnect(error);
+				});
+			};
+			peer.onconnectionstatechange = () => {
+				if (peer !== connection) return;
+				if (peer.connectionState === "connected") {
+					clearRetry();
+					clearNegotiationTimeout();
+					setFailure(null);
+					setPhase((current) => current === "reconnecting" ? geometry.current ? "streaming" : "idle" : current);
+				}
+				if (peer.connectionState === "failed" || peer.connectionState === "disconnected") scheduleReconnect();
+			};
+			const data = peer.createDataChannel(dataChannelLabel);
+			channel.current = data;
+			data.onopen = () => selectRequestedTab(data);
+			selectRequestedTab(data);
+			data.onmessage = (event) => {
+				const status = parseStatus(event.data);
+				if (!status) return;
+				if (status.kind === "idle") {
+					geometry.current = null;
+					setFailure(null);
+					setPhase("idle");
+					setStreamed(null);
+					return;
+				}
+				if (status.kind === "streaming") {
+					geometry.current = status;
+					setFailure(null);
+					setPhase("streaming");
+					setStreamed(status);
+					return;
+				}
+				setFailure(status.message);
+			};
+			peer.addTransceiver("video", { direction: "recvonly" });
+			const offer = await peer.createOffer();
+			await peer.setLocalDescription(offer);
+			if (disposed || peer !== connection) return;
+			await sendSignal(currentViewerId, {
+				kind: "offer",
+				sdp: offer.sdp ?? ""
+			});
+		}
+		function restart() {
+			clearRetry();
+			closeCurrent(true);
+			if (disposed) return;
+			connect();
+		}
+		connect();
+		return () => {
+			disposed = true;
+			attempt += 1;
+			clearRetry();
+			unsubscribe();
+			closeCurrent(true);
+		};
+	}, [dataChannelLabel]);
+	useEffect(() => {
+		selectRequestedTab(channel.current);
+	}, [requestedTabId]);
+	function sendInput(events) {
+		const open = channel.current;
+		const status = geometry.current;
+		if (open?.readyState !== "open" || !status || events.length === 0) return;
+		open.send(serializeInput({
+			tabId: status.tabId,
+			streamGeneration: status.streamGeneration,
+			events
+		}));
+	}
+	/**
+	* A browser-chrome command needs only the channel, not a live stream:
+	* picking a tab is exactly what a viewer does while nothing is on screen.
+	*/
+	function sendCommand(command) {
+		const open = channel.current;
+		if (open?.readyState !== "open") return;
+		open.send(serializeCommand(command));
+	}
+	/**
+	* How the displayed picture maps to page CSS pixels, computed from the
+	* video's current on-screen box. The machine never rescales: it sends the
+	* geometry with each change and the viewer, which is the side that knows how
+	* big it drew the picture, does the arithmetic.
+	*
+	* A touch gesture freezes one of these at its first contact, because the
+	* soft keyboard opening or closing mid-gesture moves the video and would
+	* otherwise put the release somewhere the press never was.
+	*/
+	function currentViewGeometry() {
+		const element = video.current;
+		const status = geometry.current;
+		if (!element || !status) return null;
+		const bounds = element.getBoundingClientRect();
+		const sourceWidth = element.videoWidth || status.metadata.deviceWidth;
+		const sourceHeight = element.videoHeight || status.metadata.deviceHeight;
+		if (bounds.width === 0 || bounds.height === 0 || sourceWidth <= 0 || sourceHeight <= 0) return null;
+		const containScale = Math.min(bounds.width / sourceWidth, bounds.height / sourceHeight);
+		const renderedWidth = sourceWidth * containScale;
+		const renderedHeight = sourceHeight * containScale;
+		return {
+			renderedLeft: bounds.left + (bounds.width - renderedWidth) / 2,
+			renderedTop: bounds.top + (bounds.height - renderedHeight) / 2,
+			renderedWidth,
+			renderedHeight,
+			zoomX: renderedWidth / status.metadata.deviceWidth,
+			zoomY: renderedHeight / status.metadata.deviceHeight,
+			offsetTop: status.metadata.offsetTop
+		};
+	}
+	function toPagePoint(event) {
+		const view = currentViewGeometry();
+		return view ? pointWithin(view, event) : null;
+	}
+	function beginTouch(event) {
+		if (touch.current) return;
+		const view = currentViewGeometry();
+		const startPage = view ? pointWithin(view, event) : null;
+		if (!view || !startPage) return;
+		const client = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const gesture = {
+			pointerId: event.pointerId,
+			mode: "pending",
+			view,
+			startClient: client,
+			startPage,
+			lastClient: client,
+			lastPage: startPage,
+			holdTimer: setTimeout(() => {
+				gesture.mode = "drag";
+				sendInput([move(startPage, 0), press(startPage)]);
+			}, TOUCH_HOLD_MS)
+		};
+		touch.current = gesture;
+		event.currentTarget.setPointerCapture(event.pointerId);
+	}
+	function moveTouch(event) {
+		const gesture = touch.current;
+		if (!gesture || event.pointerId !== gesture.pointerId) return;
+		const client = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (gesture.mode === "pending") {
+			if (Math.hypot(client.x - gesture.startClient.x, client.y - gesture.startClient.y) <= TOUCH_TAP_SLOP_PX) return;
+			clearTimeout(gesture.holdTimer);
+			gesture.mode = "scroll";
+		}
+		if (gesture.mode === "scroll") {
+			const deltaX = (gesture.lastClient.x - client.x) / gesture.view.zoomX;
+			const deltaY = (gesture.lastClient.y - client.y) / gesture.view.zoomY;
+			gesture.lastClient = client;
+			if (deltaX !== 0 || deltaY !== 0) sendInput([{
+				kind: "mouse",
+				type: "mouseWheel",
+				...gesture.startPage,
+				deltaX,
+				deltaY
+			}]);
+			return;
+		}
+		const point = pointWithin(gesture.view, event);
+		if (!point) return;
+		gesture.lastPage = point;
+		sendInput([move(point, 1)]);
+	}
+	function endTouch(event, cancelled) {
+		const gesture = touch.current;
+		if (!gesture || event.pointerId !== gesture.pointerId) return;
+		touch.current = null;
+		clearTimeout(gesture.holdTimer);
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		if (gesture.mode === "pending") {
+			if (cancelled) return;
+			sendInput([
+				move(gesture.startPage, 0),
+				press(gesture.startPage),
+				release(gesture.startPage)
+			]);
+			return;
+		}
+		if (gesture.mode === "drag") sendInput([release(gesture.lastPage)]);
+	}
+	const notice = failure ?? (phase === "streaming" ? void 0 : PHASE_TEXT[phase]);
+	const streamedTab = streamed ? tabs.find((tab) => tab.tabId === streamed.tabId) : void 0;
+	const displayUrl = streamed?.pageUrl ?? streamedTab?.url ?? "";
+	const view = /* @__PURE__ */ jsx(BrowserLiveView, {
+		expandable: false,
+		fill: true,
+		phase,
+		statusLabel: notice,
+		renderMedia: (_placement, statusId) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("video", {
+				ref: attachVideo,
+				autoPlay: true,
+				playsInline: true,
+				muted: true,
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				"aria-describedby": notice ? statusId : void 0,
+				ref: attachInput,
+				"aria-label": controlLabel,
+				autoCapitalize: "none",
+				autoComplete: "off",
+				className: "browser-live-screen__input",
+				inputMode: keyboardOpen ? "text" : "none",
+				spellCheck: false,
+				onBeforeInput: (event) => {
+					const nativeInput = event.nativeEvent;
+					if (nativeInput.isComposing) return;
+					if (nativeInput.inputType === "insertLineBreak" || nativeInput.inputType === "insertParagraph") {
+						event.preventDefault();
+						event.currentTarget.value = "";
+						sendInput([{
+							kind: "key",
+							type: "keyDown",
+							key: "Enter",
+							code: "Enter",
+							windowsVirtualKeyCode: 13,
+							text: "\r",
+							modifiers: 0
+						}, {
+							kind: "key",
+							type: "keyUp",
+							key: "Enter",
+							code: "Enter",
+							windowsVirtualKeyCode: 13,
+							modifiers: 0
+						}]);
+						return;
+					}
+					if (!nativeInput.data) return;
+					event.preventDefault();
+					event.currentTarget.value = "";
+					sendInput([{
+						kind: "text",
+						text: nativeInput.data
+					}]);
+				},
+				onInput: (event) => {
+					if ("isComposing" in event.nativeEvent && event.nativeEvent.isComposing) return;
+					const text = event.currentTarget.value;
+					event.currentTarget.value = "";
+					if (text) sendInput([{
+						kind: "text",
+						text
+					}]);
+				},
+				onKeyDown: (event) => {
+					if (event.nativeEvent.isComposing) return;
+					if (event.key === "Enter") event.preventDefault();
+					sendInput([{
+						kind: "key",
+						type: "keyDown",
+						key: event.key,
+						code: event.code,
+						windowsVirtualKeyCode: event.keyCode,
+						...event.key === "Enter" ? { text: "\r" } : {},
+						modifiers: modifiers(event)
+					}]);
+				},
+				onKeyUp: (event) => {
+					if (event.nativeEvent.isComposing) return;
+					sendInput([{
+						kind: "key",
+						type: "keyUp",
+						key: event.key,
+						code: event.code,
+						windowsVirtualKeyCode: event.keyCode,
+						modifiers: modifiers(event)
+					}]);
+				},
+				onPaste: (event) => {
+					event.preventDefault();
+					const text = event.clipboardData.getData("text");
+					if (text) sendInput([{
+						kind: "text",
+						text
+					}]);
+				},
+				onContextMenu: (event) => {
+					event.preventDefault();
+				},
+				onPointerDown: (event) => {
+					if (event.pointerType === "touch") {
+						beginTouch(event);
+						return;
+					}
+					const point = toPagePoint(event);
+					if (point) {
+						event.currentTarget.setPointerCapture(event.pointerId);
+						mousePress.current = point;
+						sendInput([press(point)]);
+					}
+				},
+				onPointerMove: (event) => {
+					if (event.pointerType === "touch") {
+						moveTouch(event);
+						return;
+					}
+					const point = toPagePoint(event);
+					if (point) {
+						if (mousePress.current) mousePress.current = point;
+						sendInput([move(point, event.buttons)]);
+					}
+				},
+				onPointerUp: (event) => {
+					if (event.pointerType === "touch") {
+						endTouch(event, false);
+						return;
+					}
+					const point = toPagePoint(event) ?? mousePress.current;
+					mousePress.current = null;
+					if (point) sendInput([release(point)]);
+					if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+				},
+				onPointerCancel: (event) => {
+					if (event.pointerType === "touch") {
+						endTouch(event, true);
+						return;
+					}
+					const point = toPagePoint(event) ?? mousePress.current;
+					mousePress.current = null;
+					if (point) sendInput([release(point)]);
+				}
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"aria-label": keyboardOpen ? "Hide keyboard" : "Show keyboard",
+				"aria-pressed": keyboardOpen,
+				className: "browser-live-screen__keyboard",
+				color: "neutral",
+				iconOnly: true,
+				size: "sm",
+				variant: "ghost",
+				onClick: () => {
+					const element = input.current;
+					const open = !keyboardOpen;
+					setKeyboardOpen(open);
+					if (!element) return;
+					element.inputMode = open ? "text" : "none";
+					if (open) element.focus();
+					else element.blur();
+				},
+				children: /* @__PURE__ */ jsx(KeyboardIcon, {})
+			})
+		] })
+	});
+	return /* @__PURE__ */ jsx(BrowserRunPanel, {
+		label,
+		tabs: tabs.map((tab) => ({
+			id: String(tab.tabId),
+			title: tab.title || tab.url || `Tab ${String(tab.tabId)}`,
+			...tab.url === void 0 ? {} : { url: tab.url }
+		})),
+		selectedTabId: streamed ? String(streamed.tabId) : null,
+		onSelectTab: (id) => sendCommand({
+			kind: "selectTab",
+			tabId: Number(id)
+		}),
+		url: displayUrl,
+		onOpenUrl: (next) => {
+			if (!streamed) return;
+			const url = normalizeOpenUrl(next);
+			if (url) sendCommand({
+				kind: "open",
+				tabId: streamed.tabId,
+				url
+			});
+		},
+		urlLabel: "Streamed page URL",
+		urlPlaceholder: streamed ? "Open a page…" : "Nothing is streaming",
+		urlDisabled: !streamed,
+		navigation: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(WebPreviewNavigationButton, {
+			label: "Back",
+			disabled: !streamed,
+			onClick: () => streamed && sendCommand({
+				kind: "navigate",
+				tabId: streamed.tabId,
+				action: "back"
+			}),
+			children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+		}), /* @__PURE__ */ jsx(WebPreviewNavigationButton, {
+			label: "Reload",
+			disabled: !streamed,
+			onClick: () => streamed && sendCommand({
+				kind: "navigate",
+				tabId: streamed.tabId,
+				action: "reload"
+			}),
+			children: /* @__PURE__ */ jsx(RefreshIcon, {})
+		})] }),
+		children: view
+	});
+}
+/**
+* What a thumb types is rarely a URL: absent scheme becomes https, and
+* anything that still is not an http(s) page is refused here, mirroring the
+* machine's own validation rather than surprising it.
+*/
+function normalizeOpenUrl(raw) {
+	const value = raw.trim();
+	if (!value) return null;
+	for (const candidate of [value, `https://${value}`]) {
+		let url;
+		try {
+			url = new URL(candidate);
+		} catch {
+			continue;
+		}
+		if (url.protocol === "http:" || url.protocol === "https:") return url.href;
+	}
+	return null;
+}
+const press = (p) => ({
+	kind: "mouse",
+	type: "mousePressed",
+	...p,
+	button: "left",
+	buttons: 1,
+	clickCount: 1
+});
+const release = (p) => ({
+	kind: "mouse",
+	type: "mouseReleased",
+	...p,
+	button: "left",
+	buttons: 0,
+	clickCount: 1
+});
+const move = (p, buttons) => ({
+	kind: "mouse",
+	type: "mouseMoved",
+	...p,
+	buttons
+});
+/** A client point in the picture's own page coordinates, or null if outside it. */
+function pointWithin(view, event) {
+	const renderedX = event.clientX - view.renderedLeft;
+	const renderedY = event.clientY - view.renderedTop;
+	if (renderedX < 0 || renderedY < 0 || renderedX > view.renderedWidth || renderedY > view.renderedHeight) return null;
+	return {
+		x: renderedX / view.zoomX,
+		y: renderedY / view.zoomY - view.offsetTop
+	};
+}
+/** CDP's modifier bitmask: alt, ctrl, meta, shift. */
+function modifiers(event) {
+	return Number(event.altKey) | Number(event.ctrlKey) << 1 | Number(event.metaKey) << 2 | Number(event.shiftKey) << 3;
+}
+/** Finger travel that still reads as a tap, in the viewer's own pixels. */
+const TOUCH_TAP_SLOP_PX = 8;
+/** A hold this long turns the touch into a mouse drag instead of a scroll. */
+const TOUCH_HOLD_MS = 450;
+const RECONNECT_DELAY_MS = 1e3;
+const PHASE_TEXT = {
+	connecting: "Connecting to the employee browser…",
+	idle: "Nothing is on screen. The employee browser appears here while it works.",
+	reconnecting: "Reconnecting…"
+};
+//#endregion
+export { BrowserLiveScreen };

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

@@ -47,7 +47,7 @@ type BrowserLiveViewProps = BrowserLiveViewCommonProps & ({
    * 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.
+   * swallowing the live status or the expand control.
    *
    * `statusId` names whatever element currently states the phase, for a
    * control surface to point `aria-describedby` at.
@@ -64,7 +64,7 @@ type BrowserLiveViewProps = BrowserLiveViewCommonProps & ({
  * `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
+ * the frame around it. The live status, connecting overlay, ended
  * state, and the fullscreen expand are the same either way, because to the
  * person watching it is the same thing.
  *

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

@@ -1,8 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Y as SpinnerIcon, j as MaximizeIcon } from "../../icons-MmIXciMO.js";
+import { K as SpinnerIcon, O as MaximizeIcon, _ as DotIcon } from "../../icons-CVFSeTJn.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 * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -34,7 +33,7 @@ function EndedState({ title, detail }) {
 * `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
+* the frame around it. The live status, connecting overlay, ended
 * state, and the fullscreen expand are the same either way, because to the
 * person watching it is the same thing.
 *
@@ -105,12 +104,10 @@ function BrowserLiveView(props) {
 			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"
+			live && placement === "inline" ? /* @__PURE__ */ jsxs("span", {
+				className: "browser-live-view__status",
+				role: "status",
+				children: [/* @__PURE__ */ jsx(DotIcon, {}), "Live"]
 			}) : null,
 			source ? placement === "dialog" ? /* @__PURE__ */ jsx("iframe", {
 				src: source.url,

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

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