@mcp-b/react-components 0.2.2 → 0.3.0

package/dist/components/BrowserLiveView.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+
+//#region src/components/BrowserLiveView.d.ts
+interface BrowserLiveViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Live View URL (Browser Run `devtoolsFrontendUrl`, e.g. live.browser.run). */
+  url: string;
+  /** Epoch ms after which the URL is dead (Browser Run mints ~5-minute links). */
+  expiresAt?: number;
+  /** The page the session was showing — used for the ended-state text. */
+  pageTitle?: string;
+  /**
+   * Shown once the link expires — 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;
+}
+/**
+ * Embeds a Browser Run Live View — a real-time, interactive view of the
+ * agent's browser session. Links expire (~5 minutes), so the iframe swaps to
+ * `fallback` (e.g. the last screenshot) once `expiresAt` passes. While the
+ * hosted viewer connects, a quiet loading overlay hides the frame; if it
+ * never loads, the view degrades to `fallback` or an unavailable state. An
+ * expand button opens the same view in a fullscreen dialog.
+ *
+ * Where URLs come from (upstream: `agents/browser` in
+ * github.com/cloudflare/agents — `BrowserLiveViewUrl`): the model calls
+ * `cdp.getLiveViewUrl()` inside a `browser_execute` tool run, or the host
+ * calls `connector.liveView()`/`sessionInfo()`. This package's chat rendering
+ * derives the component automatically from links found in tool results.
+ *
+ * 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({
+  url,
+  expiresAt,
+  pageTitle,
+  fallback,
+  className,
+  ...props
+}: BrowserLiveViewProps): React.JSX.Element;
+//#endregion
+export { BrowserLiveView, BrowserLiveViewProps };

package/dist/components/BrowserLiveView.js

@@ -0,0 +1,135 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { A as SpinnerIcon, x as MaximizeIcon } from "../icons-DQC4Zw5R.js";
+import { Button } from "./Button.js";
+import { Badge } from "./Badge.js";
+import { Dialog, DialogContent, DialogTitle } from "./Dialog.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/BrowserLiveView.tsx
+const FRAME_LOAD_TIMEOUT_MS = 15e3;
+function EndedState({ title, detail }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "browser-live-view__ended",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "browser-live-view__ended-title",
+			children: title
+		}), detail ? /* @__PURE__ */ jsx("span", {
+			className: "browser-live-view__ended-detail",
+			children: detail
+		}) : null]
+	});
+}
+/**
+* Embeds a Browser Run Live View — a real-time, interactive view of the
+* agent's browser session. Links expire (~5 minutes), so the iframe swaps to
+* `fallback` (e.g. the last screenshot) once `expiresAt` passes. While the
+* hosted viewer connects, a quiet loading overlay hides the frame; if it
+* never loads, the view degrades to `fallback` or an unavailable state. An
+* expand button opens the same view in a fullscreen dialog.
+*
+* Where URLs come from (upstream: `agents/browser` in
+* github.com/cloudflare/agents — `BrowserLiveViewUrl`): the model calls
+* `cdp.getLiveViewUrl()` inside a `browser_execute` tool run, or the host
+* calls `connector.liveView()`/`sessionInfo()`. This package's chat rendering
+* derives the component automatically from links found in tool results.
+*
+* 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({ url, expiresAt, pageTitle, fallback, className, ...props }) {
+	const [expired, setExpired] = React.useState(() => expiresAt !== void 0 && expiresAt <= Date.now());
+	const [frameState, setFrameState] = React.useState("loading");
+	const [expandedOpen, setExpandedOpen] = React.useState(false);
+	React.useEffect(() => {
+		if (expiresAt === void 0) return;
+		const remaining = expiresAt - Date.now();
+		if (remaining <= 0) {
+			setExpired(true);
+			return;
+		}
+		setExpired(false);
+		const timer = setTimeout(() => setExpired(true), remaining);
+		return () => clearTimeout(timer);
+	}, [expiresAt]);
+	React.useEffect(() => {
+		setFrameState("loading");
+	}, [url]);
+	React.useEffect(() => {
+		if (frameState !== "loading") return;
+		const timer = setTimeout(() => setFrameState("failed"), FRAME_LOAD_TIMEOUT_MS);
+		return () => clearTimeout(timer);
+	}, [frameState]);
+	const failed = frameState === "failed";
+	const live = !expired && !failed;
+	const frameTitle = pageTitle ? `Live browser view — ${pageTitle}` : "Live browser view";
+	const view = live ? /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(Badge, {
+			size: "sm",
+			color: "destructive",
+			className: "browser-live-view__badge",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "browser-live-view__badge-dot",
+				"aria-hidden": true
+			}), "Live"]
+		}),
+		/* @__PURE__ */ jsx("iframe", {
+			className: "browser-live-view__frame",
+			src: url,
+			title: frameTitle,
+			allow: "clipboard-read; clipboard-write",
+			onLoad: () => setFrameState("ready")
+		}),
+		frameState === "loading" ? /* @__PURE__ */ jsxs("div", {
+			className: "browser-live-view__state",
+			role: "status",
+			children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "browser-live-view__state-spinner" }), "Connecting live view…"]
+		}) : null
+	] }) : fallback ?? /* @__PURE__ */ jsx(EndedState, {
+		title: failed ? "Live view unavailable" : "Live view ended",
+		detail: pageTitle
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cx("browser-live-view", className),
+		"data-expired": expired || failed || void 0,
+		children: [
+			view,
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				color: "neutral",
+				size: "icon-xs",
+				className: "browser-live-view__expand",
+				"aria-label": "Expand browser view",
+				onClick: () => setExpandedOpen(true),
+				children: /* @__PURE__ */ jsx(MaximizeIcon, {})
+			}),
+			/* @__PURE__ */ jsx(Dialog, {
+				open: expandedOpen,
+				onOpenChange: setExpandedOpen,
+				children: /* @__PURE__ */ jsxs(DialogContent, {
+					size: "fullscreen",
+					className: "browser-live-view__dialog",
+					children: [/* @__PURE__ */ jsx(DialogTitle, {
+						className: "browser-live-view__dialog-title",
+						children: frameTitle
+					}), /* @__PURE__ */ jsx("div", {
+						className: "browser-live-view__dialog-body",
+						children: live ? /* @__PURE__ */ jsx("iframe", {
+							src: url,
+							title: frameTitle,
+							allow: "clipboard-read; clipboard-write"
+						}) : fallback ?? /* @__PURE__ */ jsx(EndedState, {
+							title: failed ? "Live view unavailable" : "Live view ended",
+							detail: pageTitle
+						})
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { BrowserLiveView };

package/dist/components/BrowserReplay.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+//#region src/components/BrowserReplay.d.ts
+interface BrowserReplayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /**
+   * rrweb events for one tab, e.g. one
+   * `BrowserRecording.events[targetId]` entry from Cloudflare Browser Run.
+   */
+  events: unknown[];
+  /** Start playing on mount. */
+  autoPlay?: boolean;
+}
+/**
+ * Replays a completed Cloudflare Browser Run recording locally with rrweb.
+ *
+ * This is intentionally not derived from Think chat message parts. Live view
+ * links and screenshots ride the `browser_execute` stream and belong to
+ * `BrowserLiveView`; replay events are fetched after a session closes with
+ * Browser Run's `getBrowserRecording()`. Upstream currently shapes those
+ * recordings as `Record<targetId, unknown[]>`, where each array is plain rrweb
+ * JSON for one tab. Playback happens in the viewer's browser through
+ * `@rrweb/replay`; no replay service is contacted at playback time.
+ *
+ * Styling rides `@mcp-b/react-components/styles` (browser-replay.css), which
+ * think-chat consumers load anyway.
+ *
+ * @see https://github.com/cloudflare/agents/tree/main/packages/agents/src/browser
+ * @see https://github.com/rrweb-io/rrweb/tree/main/packages/%40rrweb/replay
+ */
+declare function BrowserReplay({
+  className,
+  events,
+  autoPlay,
+  ref,
+  ...props
+}: BrowserReplayProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { BrowserReplay, BrowserReplayProps };

package/dist/components/BrowserReplay.js

@@ -0,0 +1,187 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { E as PlayIcon, w as PauseIcon } from "../icons-DQC4Zw5R.js";
+import { Button } from "./Button.js";
+import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "./Slider.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Replayer } from "@rrweb/replay";
+//#region src/components/BrowserReplay.tsx
+function formatReplayTime(ms) {
+	const totalSeconds = Math.max(0, Math.floor(ms / 1e3));
+	return `${Math.floor(totalSeconds / 60)}:${String(totalSeconds % 60).padStart(2, "0")}`;
+}
+function labelReplayFrame(stage) {
+	const frame = stage.querySelector("iframe");
+	if (frame) frame.title = "Browser session replay";
+}
+/**
+* Replays a completed Cloudflare Browser Run recording locally with rrweb.
+*
+* This is intentionally not derived from Think chat message parts. Live view
+* links and screenshots ride the `browser_execute` stream and belong to
+* `BrowserLiveView`; replay events are fetched after a session closes with
+* Browser Run's `getBrowserRecording()`. Upstream currently shapes those
+* recordings as `Record<targetId, unknown[]>`, where each array is plain rrweb
+* JSON for one tab. Playback happens in the viewer's browser through
+* `@rrweb/replay`; no replay service is contacted at playback time.
+*
+* Styling rides `@mcp-b/react-components/styles` (browser-replay.css), which
+* think-chat consumers load anyway.
+*
+* @see https://github.com/cloudflare/agents/tree/main/packages/agents/src/browser
+* @see https://github.com/rrweb-io/rrweb/tree/main/packages/%40rrweb/replay
+*/
+function BrowserReplay({ className, events, autoPlay, ref, ...props }) {
+	const stageRef = React.useRef(null);
+	const replayerRef = React.useRef(null);
+	const rafRef = React.useRef(0);
+	const [isPlaying, setIsPlaying] = React.useState(false);
+	const [currentTime, setCurrentTime] = React.useState(0);
+	const [duration, setDuration] = React.useState(0);
+	const [hasError, setHasError] = React.useState(false);
+	React.useEffect(() => {
+		const stage = stageRef.current;
+		if (!stage) return;
+		stage.replaceChildren();
+		cancelAnimationFrame(rafRef.current);
+		setIsPlaying(false);
+		setCurrentTime(0);
+		setDuration(0);
+		setHasError(false);
+		if (events.length < 2) return;
+		let frameLabelRaf = 0;
+		const handleFinish = () => {
+			const replayer = replayerRef.current;
+			cancelAnimationFrame(rafRef.current);
+			setIsPlaying(false);
+			setCurrentTime(replayer?.getMetaData().totalTime ?? 0);
+		};
+		const fit = ({ width, height }) => {
+			const scale = Math.min(stage.clientWidth / width, stage.clientHeight / height, 1);
+			const replayer = replayerRef.current;
+			if (!replayer) return;
+			replayer.wrapper.style.position = "absolute";
+			replayer.wrapper.style.transform = `scale(${scale})`;
+			replayer.wrapper.style.transformOrigin = "top left";
+			replayer.wrapper.style.left = `${Math.max(0, (stage.clientWidth - width * scale) / 2)}px`;
+			replayer.wrapper.style.top = `${Math.max(0, (stage.clientHeight - height * scale) / 2)}px`;
+			labelReplayFrame(stage);
+		};
+		try {
+			const replayer = new Replayer(events, {
+				root: stage,
+				mouseTail: false,
+				speed: 1
+			});
+			replayerRef.current = replayer;
+			setDuration(replayer.getMetaData().totalTime);
+			replayer.on("finish", handleFinish);
+			replayer.on("resize", fit);
+			replayer.pause(0);
+			labelReplayFrame(stage);
+			frameLabelRaf = requestAnimationFrame(() => labelReplayFrame(stage));
+			if (autoPlay) {
+				replayer.play(0);
+				setIsPlaying(true);
+			}
+		} catch {
+			setHasError(true);
+		}
+		return () => {
+			cancelAnimationFrame(rafRef.current);
+			cancelAnimationFrame(frameLabelRaf);
+			replayerRef.current?.destroy();
+			replayerRef.current = null;
+			stage.replaceChildren();
+		};
+	}, [autoPlay, events]);
+	React.useEffect(() => {
+		if (!isPlaying) return;
+		const tick = () => {
+			const replayer = replayerRef.current;
+			if (replayer) setCurrentTime(Math.min(replayer.getCurrentTime(), duration));
+			rafRef.current = requestAnimationFrame(tick);
+		};
+		rafRef.current = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(rafRef.current);
+	}, [duration, isPlaying]);
+	const disabled = events.length < 2 || hasError || duration <= 0;
+	const handlePlayPause = () => {
+		const replayer = replayerRef.current;
+		if (!replayer || disabled) return;
+		if (isPlaying) {
+			replayer.pause(currentTime);
+			setIsPlaying(false);
+			return;
+		}
+		const startAt = currentTime >= duration ? 0 : currentTime;
+		replayer.play(startAt);
+		setCurrentTime(startAt);
+		setIsPlaying(true);
+	};
+	const handleScrub = (value) => {
+		const next = typeof value === "number" ? value : value[0] ?? 0;
+		setCurrentTime(next);
+		const replayer = replayerRef.current;
+		if (!replayer) return;
+		if (isPlaying) replayer.play(next);
+		else replayer.pause(next);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("browser-replay", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "browser-replay__stage-wrap",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					ref: stageRef,
+					className: "browser-replay__stage"
+				}),
+				events.length < 2 ? /* @__PURE__ */ jsx("div", {
+					className: "browser-replay__empty",
+					children: "No browser recording"
+				}) : null,
+				hasError ? /* @__PURE__ */ jsx("div", {
+					className: "browser-replay__empty",
+					role: "alert",
+					children: "Browser replay could not be loaded"
+				}) : null
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "browser-replay__controls",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					color: "neutral",
+					size: "icon-sm",
+					className: "browser-replay__toggle",
+					"aria-label": isPlaying ? "Pause replay" : "Play replay",
+					disabled,
+					onClick: handlePlayPause,
+					children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+				}),
+				/* @__PURE__ */ jsx(Slider, {
+					className: "browser-replay__scrubber",
+					min: 0,
+					max: Math.max(duration, 1),
+					step: 100,
+					value: Math.min(currentTime, duration),
+					disabled,
+					onValueChange: handleScrub,
+					children: /* @__PURE__ */ jsx(SliderControl, { children: /* @__PURE__ */ jsxs(SliderTrack, { children: [/* @__PURE__ */ jsx(SliderIndicator, {}), /* @__PURE__ */ jsx(SliderThumb, { "aria-label": "Replay position" })] }) })
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "browser-replay__time",
+					children: [
+						formatReplayTime(currentTime),
+						" / ",
+						formatReplayTime(duration)
+					]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { BrowserReplay };

package/dist/components/ChainOfThought.d.ts

@@ -1,5 +1,5 @@
 import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
-import { v as IconProps } from "../icons-BklFyZbx.js";
+import { v as IconProps } from "../icons-ctdVxng0.js";
 import * as React from "react";
 
 //#region src/components/ChainOfThought.d.ts

package/dist/components/ChainOfThought.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { d as DotIcon, k as SpinnerIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-Bf7JMKk-.js";
+import { A as SpinnerIcon, d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChainOfThought.tsx

package/dist/components/CodeBlock.js

@@ -1,2 +1,2 @@
-import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-BrCoypnc.js";
+import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-C2Xjxu9M.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle, highlightCode };

package/dist/components/Commit.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { h as FileIcon, l as ChevronRightIcon, o as CheckIcon, u as CopyIcon } from "../icons-Bf7JMKk-.js";
+import { h as FileIcon, l as ChevronRightIcon, o as CheckIcon, u as CopyIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";

package/dist/components/ContextMenu.js

@@ -1,4 +1,4 @@
-import { d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-Bf7JMKk-.js";
+import { d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";

package/dist/components/Conversation.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { f as DownloadIcon, t as ArrowDownIcon } from "../icons-Bf7JMKk-.js";
+import { f as DownloadIcon, t as ArrowDownIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { useStickToBottom } from "./useStickToBottom.js";
 import * as React from "react";

package/dist/components/Dialog.js

@@ -1,4 +1,4 @@
-import { P as XIcon } from "../icons-Bf7JMKk-.js";
+import { F as XIcon } from "../icons-DQC4Zw5R.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";

package/dist/components/EnvironmentVariables.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { m as EyeOffIcon, o as CheckIcon, p as EyeIcon, u as CopyIcon } from "../icons-Bf7JMKk-.js";
+import { m as EyeOffIcon, o as CheckIcon, p as EyeIcon, u as CopyIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";