@mcp-b/react-components 0.37.0 → 0.39.0

package/dist/{AgentActivity-SP1WfLDW.d.ts → AgentActivity-Cc_oDYum.d.ts}

@@ -1,4 +1,4 @@
-import { n as WorkspaceDestination } from "./WorkspaceLink-DQogVe8E.js";
+import { n as WorkspaceDestination } from "./WorkspaceLink-Bh9-Jo1r.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/AgentActivity.d.ts

package/dist/Message-DBsHHhcM.d.ts

@@ -0,0 +1,228 @@
+import { n as IconButtonProps } from "./IconButton-BAUFhUk8.js";
+import * as React from "react";
+import { FileUIPart, UIMessage } from "ai";
+import { StreamdownProps } from "streamdown";
+
+//#region src/components/ai-sdk/Message.d.ts
+type MessageRole = UIMessage["role"];
+interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The originating role of the message. Controls alignment and styling via
+   * the `data-from` attribute (e.g. user messages align end).
+   */
+  from?: MessageRole;
+}
+/**
+ * A chat message row. Aligns and styles itself based on {@link from}.
+ * Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
+ *
+ * Compose with {@link MessageContent} for the bubble, {@link MessageActions}
+ * for toolbar actions, and {@link MessageBranch} for multi-version responses.
+ *
+ * @example
+ * ```tsx
+ * <Message from="assistant">
+ *   <MessageContent>Hello there!</MessageContent>
+ *   <MessageActions>
+ *     <MessageAction label="Copy" tooltip="Copy to clipboard">
+ *       <CopyIcon />
+ *     </MessageAction>
+ *   </MessageActions>
+ * </Message>
+ * ```
+ *
+ * @see {@link https://elements.ai-sdk.dev/components/message | AI Elements Message}
+ */
+declare function Message({
+  className,
+  from,
+  children,
+  ref,
+  ...props
+}: MessageProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * The visible bubble/body of a message. Styled differently based on the
+ * parent {@link Message}'s `from` attribute.
+ */
+declare function MessageContent({
+  className,
+  children,
+  ref,
+  ...props
+}: MessageContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+type MessageResponseProps = StreamdownProps;
+declare const MessageResponse: React.MemoExoticComponent<({
+  className,
+  components,
+  ...props
+}: MessageResponseProps) => React.JSX.Element>;
+interface MessageAttachmentProps extends Omit<React.HTMLAttributes<HTMLElement>, "color" | "part"> {
+  /** The AI SDK `file` part, taken whole. */
+  part: FileUIPart;
+}
+/**
+ * A `file` part inside a message: images render inline (click to zoom),
+ * anything else becomes a download chip. Covers both directions — files the
+ * user attached and files the agent emitted.
+ */
+declare function MessageAttachment({
+  part,
+  className,
+  ...props
+}: MessageAttachmentProps): React.JSX.Element;
+interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Horizontal list of action buttons (copy, retry, thumbs-up, etc.) shown
+ * alongside or beneath a message.
+ */
+declare function MessageActions({
+  className,
+  children,
+  ref,
+  ...props
+}: MessageActionsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MessageActionProps extends Omit<IconButtonProps, "children"> {
+  children?: React.ReactNode;
+}
+/**
+ * A single icon button inside {@link MessageActions}. Always has an accessible
+ * name; shows a tooltip on hover/focus when {@link tooltip} is set.
+ */
+declare function MessageAction({
+  className,
+  label,
+  tooltip,
+  variant,
+  color,
+  size,
+  children,
+  ref,
+  ...props
+}: MessageActionProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface MessageToolbarProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Horizontal container that places children in a row with space between —
+ * typically a {@link MessageBranchSelector} on one side and
+ * {@link MessageActions} on the other.
+ */
+declare function MessageToolbar({
+  className,
+  children,
+  ref,
+  ...props
+}: MessageToolbarProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MessageBranchProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Number of response branches rendered by MessageBranchContent. */
+  branchCount: number;
+  /** Zero-based index of the initially selected branch. */
+  defaultBranch?: number;
+  /** Controlled branch index. */
+  branch?: number;
+  /** Called when the selected branch changes. */
+  onBranchChange?: (branchIndex: number) => void;
+}
+/**
+ * Container for a message response with multiple versions. Tracks which
+ * branch is active and exposes navigation through {@link MessageBranchSelector},
+ * {@link MessageBranchPrevious}, {@link MessageBranchNext}, and {@link MessageBranchPage}.
+ */
+declare function MessageBranch({
+  className,
+  branchCount,
+  defaultBranch,
+  branch,
+  onBranchChange,
+  children,
+  ref,
+  ...props
+}: MessageBranchProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MessageBranchContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Renders only the active branch's child. Expects siblings to represent
+ * alternative versions of the same response.
+ */
+declare function MessageBranchContent({
+  className,
+  children,
+  ref,
+  ...props
+}: MessageBranchContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MessageBranchSelectorProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Inline group containing branch navigation controls (previous / page /
+ * next). Hidden automatically when there is only one branch.
+ */
+declare function MessageBranchSelector({
+  className,
+  children,
+  ref,
+  ...props
+}: MessageBranchSelectorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element | null;
+interface MessageBranchPreviousProps extends Omit<IconButtonProps, "children" | "label"> {
+  label?: string;
+  children?: React.ReactNode;
+}
+/** Button that selects the previous branch. Disabled at the first branch. */
+declare function MessageBranchPrevious({
+  className,
+  label,
+  variant,
+  color,
+  size,
+  children,
+  onClick,
+  ref,
+  ...props
+}: MessageBranchPreviousProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface MessageBranchNextProps extends Omit<IconButtonProps, "children" | "label"> {
+  label?: string;
+  children?: React.ReactNode;
+}
+/** Button that selects the next branch. Disabled at the last branch. */
+declare function MessageBranchNext({
+  className,
+  label,
+  variant,
+  color,
+  size,
+  children,
+  onClick,
+  ref,
+  ...props
+}: MessageBranchNextProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+interface MessageBranchPageProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Customize the displayed text. Defaults to `{index} / {count}`. */
+  format?: (currentIndex: number, total: number) => React.ReactNode;
+}
+/** Page indicator (e.g. "1 / 3") for the current branch selection. */
+declare function MessageBranchPage({
+  className,
+  format,
+  ref,
+  ...props
+}: MessageBranchPageProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { MessageResponse as C, MessageToolbarProps as D, MessageToolbar as E, MessageProps as S, MessageRole as T, MessageBranchProps as _, MessageActionsProps as a, MessageContent as b, MessageBranch as c, MessageBranchNext as d, MessageBranchNextProps as f, MessageBranchPreviousProps as g, MessageBranchPrevious as h, MessageActions as i, MessageBranchContent as l, MessageBranchPageProps as m, MessageAction as n, MessageAttachment as o, MessageBranchPage as p, MessageActionProps as r, MessageAttachmentProps as s, Message as t, MessageBranchContentProps as u, MessageBranchSelector as v, MessageResponseProps as w, MessageContentProps as x, MessageBranchSelectorProps as y };

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

@@ -1,11 +1,11 @@
 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";
 import { ThinkRecoveryNotice } from "./components/agents-sdk/ThinkRecoveryNotice.js";
-import { t as WorkspaceMessageResponse } from "./WorkspaceMessageResponse-BWbkIELl.js";
+import { t as WorkspaceMessageResponse } from "./WorkspaceMessageResponse-CJCmGvTx.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isTextUIPart } from "ai";
@@ -195,7 +195,7 @@ const ThinkChatApprovalsContext = React.createContext(null);
 * inside the log) or `excludeTools` + your own `renderPart` (standalone
 * card) — see README "App-specific tools" and the Custom Tool Panel story.
 */
-function ThinkChatMessages({ composerHeader, draft, loading, renderPart, excludeTools, renderAgentToolRunLink, toolRenderers, thinkStub, onExecutionSettled, pendingApprovals, notice, sessionCompaction, ...props }) {
+function ThinkChatMessages({ composerHeader, draft, loading, renderPart, excludeTools, renderAgentToolRunLink, renderWorkspaceHtmlArtifact, toolRenderers, thinkStub, onExecutionSettled, pendingApprovals, notice, sessionCompaction, ...props }) {
 	const chat = useOptionalThinkChatContext();
 	const agentTools = useOptionalAgentToolRuns();
 	const approvals = React.useContext(ThinkChatApprovalsContext);
@@ -224,9 +224,14 @@ function ThinkChatMessages({ composerHeader, draft, loading, renderPart, exclude
 		return isTextUIPart(context.part) && context.part.text ? /* @__PURE__ */ jsx(WorkspaceMessageResponse, {
 			animated: STREAMED_TEXT_ANIMATION,
 			isAnimating: context.message.role === "assistant" && context.message.id === streamingMessageId && context.part.state === "streaming",
+			renderWorkspaceHtmlArtifact: context.message.role === "assistant" ? renderWorkspaceHtmlArtifact : void 0,
 			children: context.part.text
 		}) : void 0;
-	}, [activityRenderPart, streamingMessageId]);
+	}, [
+		activityRenderPart,
+		renderWorkspaceHtmlArtifact,
+		streamingMessageId
+	]);
 	const resolvedRenderPart = React.useMemo(() => renderPart ? (context) => {
 		const renderBuiltIn = () => {
 			const builtIn = defaultRenderPart(context);

package/dist/{ThinkChatActivity-Dkmm2pIj.d.ts → ThinkChatActivity-D6-_5Phw.d.ts}

@@ -1,7 +1,7 @@
 import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-C7L-Mv9U.js";
 import { r as AgentChatProps } from "./AgentChat-CVO7xyLC.js";
 import { l as ThinkChatPart } from "./ThinkChatToolParts-D4qcnnxt.js";
-import { t as ThinkChatActivityDescription } from "./ThinkChatActivitySummary-teRjrPxW.js";
+import { t as ThinkChatActivityDescription } from "./ThinkChatActivitySummary-BtBQgMg6.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";
 import { AgentToolRunState } from "agents/agent-tools";

package/dist/{ThinkChatActivitySummary-teRjrPxW.d.ts → ThinkChatActivitySummary-BtBQgMg6.d.ts}

@@ -1,4 +1,4 @@
-import { i as AgentActivityIconKind, s as AgentActivitySummary } from "./AgentActivity-SP1WfLDW.js";
+import { i as AgentActivityIconKind, s as AgentActivitySummary } from "./AgentActivity-Cc_oDYum.js";
 import { l as ThinkChatPart } from "./ThinkChatToolParts-D4qcnnxt.js";
 import { DynamicToolUIPart, ToolUIPart } from "ai";
 

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/{WorkspaceFileView-Cu_ZG6HJ.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-DZeLe_jN.js";
-import { n as createWorkspaceRehypePlugins, t as WorkspaceMessageResponse } from "./WorkspaceMessageResponse-BWbkIELl.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";

package/dist/{WorkspaceLink-DQogVe8E.d.ts → WorkspaceLink-Bh9-Jo1r.d.ts}

@@ -76,7 +76,7 @@ declare function WorkspaceFileLink({
   className,
   download,
   href,
-  node: _node,
+  node,
   onClick,
   rel,
   target,

package/dist/{WorkspaceLink-DZeLe_jN.js → WorkspaceLink-DtH66bAY.js}

@@ -233,11 +233,12 @@ function UnavailableWorkspaceLink({ children, className }) {
 * Markdown-compatible anchor that resolves local files through the nearest
 * workspace navigation provider while preserving native link behavior.
 */
-function WorkspaceFileLink({ children, className, download, href = "", node: _node, onClick, rel, target, ...props }) {
+function WorkspaceFileLink({ children, className, download, href = "", node, onClick, rel, target, ...props }) {
 	const workspace = useWorkspaceNavigationContext();
 	const restoration = useWorkspaceNavigationRestoration();
 	if (!workspace) return /* @__PURE__ */ jsx("a", {
 		className,
+		"data-streamdown": node ? "link" : void 0,
 		download,
 		href,
 		onClick,
@@ -259,7 +260,7 @@ function WorkspaceFileLink({ children, className, download, href = "", node: _no
 		const externalTarget = target ?? "_blank";
 		return /* @__PURE__ */ jsxs("a", {
 			className: cx("workspace-link workspace-link--external", className),
-			"data-streamdown": "link",
+			"data-streamdown": node ? "link" : void 0,
 			download,
 			href: resolved.href,
 			onClick,
@@ -285,7 +286,7 @@ function WorkspaceFileLink({ children, className, download, href = "", node: _no
 	return /* @__PURE__ */ jsx(NavigationLink, {
 		render: workspace.navigation.renderLink(resolved),
 		className: cx("workspace-link workspace-link--file", className),
-		"data-streamdown": "link",
+		"data-streamdown": node ? "link" : void 0,
 		"data-workspace-link": "file",
 		"data-workspace-destination-fragment": resolved.fragment ?? "",
 		"data-workspace-path": resolved.path,

package/dist/{WorkspaceMessageResponse-BWbkIELl.js → WorkspaceMessageResponse-CJCmGvTx.js}

@@ -1,7 +1,7 @@
 import { MessageResponse } from "./components/ai-sdk/Message.js";
-import { c as useWorkspaceNavigationContext, r as resolveWorkspaceLink, t as WorkspaceFileLink } from "./WorkspaceLink-DZeLe_jN.js";
+import { c as useWorkspaceNavigationContext, r as resolveWorkspaceLink, t as WorkspaceFileLink } from "./WorkspaceLink-DtH66bAY.js";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { defaultRehypePlugins } from "streamdown";
 import { visit } from "unist-util-visit";
 //#region src/components/_internal/workspace-markdown.ts
@@ -84,17 +84,74 @@ const workspaceComponents = {
 	a: WorkspaceFileLink
 };
 /** Adds workspace-aware Markdown links when rendered inside a workspace provider. */
-const WorkspaceMessageResponse = React.memo(function WorkspaceMessageResponse({ components, rehypePlugins, ...props }) {
+const WorkspaceMessageResponse = React.memo(function WorkspaceMessageResponse({ components, rehypePlugins, renderWorkspaceHtmlArtifact, ...props }) {
 	const workspace = useWorkspaceNavigationContext();
 	const resolvedRehypePlugins = React.useMemo(() => rehypePlugins ?? (workspace ? createWorkspaceRehypePlugins(workspace.root, workspace.base) : void 0), [rehypePlugins, workspace]);
 	return /* @__PURE__ */ jsx(MessageResponse, {
-		components: components ? {
-			...workspaceComponents,
-			...components
-		} : workspaceComponents,
+		components: React.useMemo(() => {
+			const merged = components ? {
+				...workspaceComponents,
+				...components
+			} : workspaceComponents;
+			if (!workspace || !renderWorkspaceHtmlArtifact) return merged;
+			const FallbackParagraph = components?.p ?? "p";
+			return {
+				...merged,
+				p: function WorkspaceHtmlArtifactParagraph({ node, children, ...paragraphProps }) {
+					const renderFallbackParagraph = (content) => React.createElement(FallbackParagraph, typeof FallbackParagraph === "string" ? paragraphProps : {
+						node,
+						...paragraphProps
+					}, content);
+					const artifact = getWorkspaceHtmlArtifactParagraph(node, workspace.root, workspace.base);
+					if (!artifact) return renderFallbackParagraph(children);
+					const remainingChildren = React.Children.toArray(children).filter((_child, index) => index !== artifact.childIndex);
+					return /* @__PURE__ */ jsxs(Fragment, { children: [artifact.showRemainingChildren ? renderFallbackParagraph(remainingChildren) : null, renderWorkspaceHtmlArtifact({
+						label: artifact.label,
+						path: artifact.path,
+						sourceLink: /* @__PURE__ */ jsx(WorkspaceFileLink, { href: artifact.path })
+					})] });
+				}
+			};
+		}, [
+			components,
+			renderWorkspaceHtmlArtifact,
+			workspace
+		]),
 		rehypePlugins: resolvedRehypePlugins,
 		...props
 	});
 });
+function getWorkspaceHtmlArtifactParagraph(node, root, base) {
+	if (!node || node.tagName !== "p") return null;
+	const children = node.children;
+	const matches = children.flatMap((child, childIndex) => {
+		if (child.type !== "element" || child.tagName !== "a") return [];
+		const href = child.properties?.href;
+		if (typeof href !== "string") return [];
+		const destination = resolveWorkspaceLink({
+			href,
+			root,
+			base
+		});
+		if (destination.kind !== "file" || destination.fragment !== null || !destination.path.toLowerCase().endsWith(".html")) return [];
+		return [{
+			anchor: child,
+			childIndex,
+			path: destination.path
+		}];
+	});
+	if (matches.length !== 1) return null;
+	const [{ anchor, childIndex, path }] = matches;
+	return {
+		childIndex,
+		path,
+		label: markdownText(anchor).trim() || path.split("/").at(-1) || "Interactive UI",
+		showRemainingChildren: children.some((child, index) => index !== childIndex && (child.type !== "text" || child.value.trim()))
+	};
+}
+function markdownText(node) {
+	if (node.type === "text") return node.value;
+	return node.type === "element" ? node.children.map(markdownText).join("") : "";
+}
 //#endregion
 export { createWorkspaceRehypePlugins as n, WorkspaceMessageResponse as t };

package/dist/WorkspaceMessageResponse-Cy28WGSz.d.ts

@@ -0,0 +1,24 @@
+import { w as MessageResponseProps } from "./Message-DBsHHhcM.js";
+import * as React from "react";
+
+//#region src/components/agents-sdk/WorkspaceMessageResponse.d.ts
+interface WorkspaceHtmlArtifactRenderInput {
+  label: string;
+  path: string;
+  /** Shared workspace link element; hosts pass it through to the preview unchanged. */
+  sourceLink: React.ReactElement;
+}
+type WorkspaceHtmlArtifactRenderer = (artifact: WorkspaceHtmlArtifactRenderInput) => React.ReactNode;
+interface WorkspaceMessageResponseProps extends MessageResponseProps {
+  /** Promotes one standalone workspace HTML link into host-hydrated shared UI. */
+  renderWorkspaceHtmlArtifact?: WorkspaceHtmlArtifactRenderer;
+}
+/** Adds workspace-aware Markdown links when rendered inside a workspace provider. */
+declare const WorkspaceMessageResponse: React.MemoExoticComponent<({
+  components,
+  rehypePlugins,
+  renderWorkspaceHtmlArtifact,
+  ...props
+}: WorkspaceMessageResponseProps) => React.JSX.Element>;
+//#endregion
+export { WorkspaceMessageResponseProps as i, WorkspaceHtmlArtifactRenderer as n, WorkspaceMessageResponse as r, WorkspaceHtmlArtifactRenderInput as t };

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

@@ -1,2 +1,2 @@
-import { a as AgentActivityIconProps, i as AgentActivityIconKind, n as AgentActivityFaviconProps, o as AgentActivityMode, r as AgentActivityIcon, s as AgentActivitySummary, t as AgentActivityFavicon } from "../../AgentActivity-SP1WfLDW.js";
+import { a as AgentActivityIconProps, i as AgentActivityIconKind, n as AgentActivityFaviconProps, o as AgentActivityMode, r as AgentActivityIcon, s as AgentActivitySummary, t as AgentActivityFavicon } from "../../AgentActivity-Cc_oDYum.js";
 export { AgentActivityFavicon, AgentActivityFaviconProps, AgentActivityIcon, AgentActivityIconKind, AgentActivityIconProps, AgentActivityMode, AgentActivitySummary };

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

@@ -1,5 +1,5 @@
-import { n as WorkspaceDestination } from "../../WorkspaceLink-DQogVe8E.js";
-import { s as AgentActivitySummary } from "../../AgentActivity-SP1WfLDW.js";
+import { n as WorkspaceDestination } from "../../WorkspaceLink-Bh9-Jo1r.js";
+import { s as AgentActivitySummary } from "../../AgentActivity-Cc_oDYum.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/AgentActivityPreview.d.ts

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

@@ -2,9 +2,9 @@ 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 { ActivityHeader } from "../ai-sdk/Activity.js";
 import { Button } from "../foundations/Button.js";
-import { AppIcon } from "../foundations/AppIcon.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.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 };