@mcp-b/react-components 0.37.0 → 0.38.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-DkA4Wr71.js}

@@ -5,7 +5,7 @@ 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/{WorkspaceFileView-Cu_ZG6HJ.js → WorkspaceFileView-DeGzWwhK.js}

@@ -3,8 +3,8 @@ 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 { 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,8 +2,8 @@ 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 { AppIcon } from "../foundations/AppIcon.js";
 import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -3,9 +3,10 @@ import { K as PromptInputMessage } from "../../PromptInput-BRX7FhjH.js";
 import { r as AgentChatProps } from "../../AgentChat-CVO7xyLC.js";
 import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-BCVqCtJ1.js";
 import { o as UseSessionCompactionResult } from "../../SessionCompaction-CmTJFpzj.js";
-import { o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, t as ThinkChatActivity } from "../../ThinkChatActivity-Dkmm2pIj.js";
+import { o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, t as ThinkChatActivity } from "../../ThinkChatActivity-D6-_5Phw.js";
 import { i as ThinkChatValue } from "../../ThinkChatContext-COIgzkYp.js";
 import { t as ThinkRecoveryNotice } from "../../ThinkRecoveryNotice-DGWr94rk.js";
+import { n as WorkspaceHtmlArtifactRenderer } from "../../WorkspaceMessageResponse-Cy28WGSz.js";
 import * as React from "react";
 import { UIMessage } from "ai";
 import { UseAgentOptions } from "agents/react";
@@ -67,7 +68,8 @@ type ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> = Omit<Agent
    * that does not exist yet.
    */
   draft?: ThinkChatDraft<MessageT>; /** Whole `useSessionCompaction` result for built-in progress and error notices. */
-  sessionCompaction?: UseSessionCompactionResult;
+  sessionCompaction?: UseSessionCompactionResult; /** Promotes assistant-authored workspace HTML links through a host runtime hydrator. */
+  renderWorkspaceHtmlArtifact?: WorkspaceHtmlArtifactRenderer;
 };
 /** Shared pending-approval options for components and TanStack Router loaders. */
 declare function thinkPendingExecutionApprovalsQueryOptions(stub: AgentStub<Think>, sourceKey: string): ThinkPendingExecutionApprovalsQueryOptions;
@@ -128,6 +130,7 @@ declare function ThinkChatMessages<State = unknown, MessageT extends UIMessage =
   renderPart,
   excludeTools,
   renderAgentToolRunLink,
+  renderWorkspaceHtmlArtifact,
   toolRenderers,
   thinkStub,
   onExecutionSettled,

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-DQh59CeC.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-DkA4Wr71.js";
 export { ThinkChat, ThinkChatMessages, ThinkChatProvider, ThinkChatRoot, thinkPendingExecutionApprovalsQueryOptions, useThinkChat, useThinkPendingExecutionApprovals };

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

@@ -1,2 +1,2 @@
-import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../../ThinkChatActivity-Dkmm2pIj.js";
+import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../../ThinkChatActivity-D6-_5Phw.js";
 export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, renderThinkChatActivityPart };

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

@@ -1,2 +1,2 @@
-import { a as ThinkChatToolLifecycleSnapshot, c as deriveThinkChatActivityHeader, d as summarizeActivitySteps, i as ThinkChatToolDescribers, l as deriveThinkChatToolLifecycleHeader, n as ThinkChatActivityHeader, o as activityPartIconKind, r as ThinkChatToolDescriber, s as activityPartUrl, t as ThinkChatActivityDescription, u as describeThinkChatActivityPart } from "../../ThinkChatActivitySummary-teRjrPxW.js";
+import { a as ThinkChatToolLifecycleSnapshot, c as deriveThinkChatActivityHeader, d as summarizeActivitySteps, i as ThinkChatToolDescribers, l as deriveThinkChatToolLifecycleHeader, n as ThinkChatActivityHeader, o as activityPartIconKind, r as ThinkChatToolDescriber, s as activityPartUrl, t as ThinkChatActivityDescription, u as describeThinkChatActivityPart } from "../../ThinkChatActivitySummary-BtBQgMg6.js";
 export { ThinkChatActivityDescription, ThinkChatActivityHeader, ThinkChatToolDescriber, ThinkChatToolDescribers, ThinkChatToolLifecycleSnapshot, activityPartIconKind, activityPartUrl, deriveThinkChatActivityHeader, deriveThinkChatToolLifecycleHeader, describeThinkChatActivityPart, summarizeActivitySteps };

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

@@ -4,9 +4,9 @@ import { buttonVariants } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
 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 { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { getThinkExecutionRunAccessibleName, getThinkExecutionRunId, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, isSameThinkExecutionRun, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionRunSummary } from "./ThinkExecutionStatus.js";
 import { ThinkExecutionDetail } from "./ThinkExecutionDetail.js";

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

@@ -1,4 +1,4 @@
-import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-DQogVe8E.js";
+import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-Bh9-Jo1r.js";
 import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-BCVqCtJ1.js";
 import { McpPluginCatalogProps } from "./McpPluginCatalog.js";
 import { ThinkChatMessagesProps } from "./ThinkChat.js";

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

@@ -5,8 +5,8 @@ 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-DZeLe_jN.js";
-import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-DQh59CeC.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 { McpPluginCatalog } from "./McpPluginCatalog.js";
 import { ThinkExecutionWorkbench } from "./ThinkExecutionWorkbench.js";
 import { ThinkFullAppViewSwitch } from "./ThinkFullAppViewSwitch.js";

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

@@ -3,10 +3,10 @@ import { H as PlusIcon } from "../../icons-B4mGvCvc.js";
 import { buttonVariants } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { t as capitalize } from "../../format-DB2mX9DA.js";
+import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { SearchField } from "../foundations/SearchField.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
-import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -4,8 +4,8 @@ import { Button, buttonVariants } from "../foundations/Button.js";
 import { Field } from "../foundations/Field.js";
 import { Form } from "../foundations/Form.js";
 import { Textarea } from "../foundations/Textarea.js";
-import { Select } from "../foundations/Select.js";
 import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
+import { Select } from "../foundations/Select.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkRoutineForm.tsx

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

@@ -3,10 +3,10 @@ import { J as SpinnerIcon, V as PlayIcon, b as EllipsisIcon, f as ChevronDownIco
 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 { n as isPlainPrimaryLinkActivation, t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
 import { ThinkRoutineBrowser } from "./ThinkRoutineBrowser.js";
 import { ThinkRoutineDetail } from "./ThinkRoutineDetail.js";

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

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { buttonVariants } from "../foundations/Button.js";
+import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { Badge } from "../foundations/Badge.js";
 import { EmptyState } from "../foundations/EmptyState.js";
-import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { getThinkExecutionRunAccessibleName, getThinkExecutionRunId, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionRunSummary } from "./ThinkExecutionStatus.js";
 import * as React from "react";

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

@@ -2,11 +2,11 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { H as PlusIcon, J as SpinnerIcon, t as ArchiveIcon, tt as WarningIcon, v as DotIcon } from "../../icons-B4mGvCvc.js";
 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 { n as isPlainPrimaryLinkActivation, t as NavigationLink } from "../../navigation-link-kqMa81v5.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.d.ts

@@ -1,4 +1,4 @@
-import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-DQogVe8E.js";
+import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-Bh9-Jo1r.js";
 import { WorkspaceState } from "./Workspace.js";
 import * as React from "react";
 

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

@@ -1,8 +1,8 @@
 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-DZeLe_jN.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-Cu_ZG6HJ.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-DeGzWwhK.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-Cu_ZG6HJ.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-DeGzWwhK.js";
 export { WorkspaceFileView };

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

@@ -1,2 +1,2 @@
-import { a as WorkspaceFileLinkProps, c as WorkspaceLinkResolution, d as WorkspaceNavigationProvider, f as WorkspaceNavigationProviderProps, i as WorkspaceFileLink, l as WorkspaceNavigationAdapter, n as WorkspaceDestination, o as WorkspaceInvalidDestination, p as resolveWorkspaceLink, r as WorkspaceExternalDestination, s as WorkspaceLinkBase, t as ResolveWorkspaceLinkOptions, u as WorkspaceNavigationEntry } from "../../WorkspaceLink-DQogVe8E.js";
+import { a as WorkspaceFileLinkProps, c as WorkspaceLinkResolution, d as WorkspaceNavigationProvider, f as WorkspaceNavigationProviderProps, i as WorkspaceFileLink, l as WorkspaceNavigationAdapter, n as WorkspaceDestination, o as WorkspaceInvalidDestination, p as resolveWorkspaceLink, r as WorkspaceExternalDestination, s as WorkspaceLinkBase, t as ResolveWorkspaceLinkOptions, u as WorkspaceNavigationEntry } from "../../WorkspaceLink-Bh9-Jo1r.js";
 export { ResolveWorkspaceLinkOptions, WorkspaceDestination, WorkspaceExternalDestination, WorkspaceFileLink, WorkspaceFileLinkProps, WorkspaceInvalidDestination, WorkspaceLinkBase, WorkspaceLinkResolution, WorkspaceNavigationAdapter, WorkspaceNavigationEntry, WorkspaceNavigationProvider, WorkspaceNavigationProviderProps, resolveWorkspaceLink };

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

@@ -1,2 +1,2 @@
-import { n as WorkspaceNavigationProvider, r as resolveWorkspaceLink, t as WorkspaceFileLink } from "../../WorkspaceLink-DZeLe_jN.js";
+import { n as WorkspaceNavigationProvider, r as resolveWorkspaceLink, t as WorkspaceFileLink } from "../../WorkspaceLink-DtH66bAY.js";
 export { WorkspaceFileLink, WorkspaceNavigationProvider, resolveWorkspaceLink };

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

@@ -1,12 +1,2 @@
-import { MessageResponseProps } from "../ai-sdk/Message.js";
-import * as React from "react";
-
-//#region src/components/agents-sdk/WorkspaceMessageResponse.d.ts
-/** Adds workspace-aware Markdown links when rendered inside a workspace provider. */
-declare const WorkspaceMessageResponse: React.MemoExoticComponent<({
-  components,
-  rehypePlugins,
-  ...props
-}: MessageResponseProps) => React.JSX.Element>;
-//#endregion
-export { WorkspaceMessageResponse };
+import { i as WorkspaceMessageResponseProps, n as WorkspaceHtmlArtifactRenderer, r as WorkspaceMessageResponse, t as WorkspaceHtmlArtifactRenderInput } from "../../WorkspaceMessageResponse-Cy28WGSz.js";
+export { WorkspaceHtmlArtifactRenderInput, WorkspaceHtmlArtifactRenderer, WorkspaceMessageResponse, WorkspaceMessageResponseProps };

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

@@ -1,2 +1,2 @@
-import { t as WorkspaceMessageResponse } from "../../WorkspaceMessageResponse-BWbkIELl.js";
+import { t as WorkspaceMessageResponse } from "../../WorkspaceMessageResponse-CJCmGvTx.js";
 export { WorkspaceMessageResponse };

package/dist/components/ai-sdk/Artifact.d.ts

@@ -118,5 +118,48 @@ declare function ArtifactContent({
 }: ArtifactContentProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
+/** Host error messages render verbatim and must be user-readable rather than raw diagnostics.
+ * Sandbox policy is a host concern the preview never mediates: a host that blocks a resource
+ * reports it through the error states, so there is no approval state here. */
+type ArtifactPreviewState = {
+  status: "loading";
+} | {
+  message: string;
+  onRetry: () => void;
+  status: "error";
+} | {
+  content: React.ReactNode;
+  status: "ready";
+} | {
+  content: React.ReactNode;
+  message: string;
+  onRetry: () => void;
+  status: "runtime-error";
+};
+interface ArtifactPreviewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /** Accessible artifact name, usually derived from the source link label. */
+  label: string;
+  /** Navigation element for the source artifact. */
+  sourceLink: React.ReactElement;
+  /** Host-resolved artifact lifecycle facts and callables. */
+  state: ArtifactPreviewState;
+}
+/**
+ * Controlled inline preview for host-hydrated generated UI runtimes.
+ *
+ * The design system owns artifact chrome, status copy, disclosure, responsive
+ * layout, and accessible announcements. The host owns source reads, sandbox
+ * policy, runtime messaging, and the rendered content element.
+ */
+declare function ArtifactPreview({
+  className,
+  label,
+  sourceLink,
+  state,
+  ref,
+  ...props
+}: ArtifactPreviewProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
 //#endregion
-export { Artifact, ArtifactAction, ArtifactActionProps, ArtifactActions, ArtifactActionsProps, ArtifactClose, ArtifactCloseProps, ArtifactContent, ArtifactContentProps, ArtifactDescription, ArtifactDescriptionProps, ArtifactHeader, ArtifactHeaderProps, ArtifactProps, ArtifactTitle, ArtifactTitleProps };
+export { Artifact, ArtifactAction, ArtifactActionProps, ArtifactActions, ArtifactActionsProps, ArtifactClose, ArtifactCloseProps, ArtifactContent, ArtifactContentProps, ArtifactDescription, ArtifactDescriptionProps, ArtifactHeader, ArtifactHeaderProps, ArtifactPreview, ArtifactPreviewProps, ArtifactPreviewState, ArtifactProps, ArtifactTitle, ArtifactTitleProps };

package/dist/components/ai-sdk/Artifact.js

@@ -1,8 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { rt as XIcon } from "../../icons-B4mGvCvc.js";
+import { J as SpinnerIcon, rt as XIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.js";
+import { Button, buttonVariants } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
+import { t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Artifact.tsx
 /**
 * A container for generated content (code, documents, outputs) with a header
@@ -107,5 +109,79 @@ function ArtifactContent({ className, children, ref, ...props }) {
 		children
 	});
 }
+/**
+* Controlled inline preview for host-hydrated generated UI runtimes.
+*
+* The design system owns artifact chrome, status copy, disclosure, responsive
+* layout, and accessible announcements. The host owns source reads, sandbox
+* policy, runtime messaging, and the rendered content element.
+*/
+function ArtifactPreview({ className, label, sourceLink, state, ref, ...props }) {
+	const liveMessage = state.status === "loading" ? "Loading interactive UI." : state.status === "error" ? `Interactive UI failed to load: ${state.message}` : state.status === "runtime-error" ? `Interactive UI error: ${state.message}` : "Interactive UI loaded.";
+	return /* @__PURE__ */ jsxs(Artifact, {
+		ref,
+		...props,
+		"aria-busy": state.status === "loading" || void 0,
+		"aria-label": props["aria-label"] ?? label,
+		className: cx("artifact-preview", className),
+		"data-state": state.status,
+		role: props.role ?? "region",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sigvelo-visually-hidden",
+				role: "status",
+				"aria-atomic": "true",
+				children: liveMessage
+			}),
+			/* @__PURE__ */ jsx(ArtifactHeader, {
+				className: "artifact-preview__header",
+				children: /* @__PURE__ */ jsx(NavigationLink, {
+					render: sourceLink,
+					className: buttonVariants({
+						variant: "ghost",
+						color: "neutral",
+						size: "xs"
+					}),
+					children: "View source"
+				})
+			}),
+			state.status === "loading" ? /* @__PURE__ */ jsxs(ArtifactContent, {
+				className: "artifact-preview__status",
+				children: [/* @__PURE__ */ jsx(SpinnerIcon, {}), "Loading interactive UI…"]
+			}) : state.status === "error" ? /* @__PURE__ */ jsx(ArtifactPreviewError, {
+				message: state.message,
+				onRetry: state.onRetry
+			}) : /* @__PURE__ */ jsxs(ArtifactContent, {
+				className: "artifact-preview__frame-shell",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "artifact-preview__runtime",
+					inert: state.status === "runtime-error" || void 0,
+					children: state.content
+				}), state.status === "runtime-error" ? /* @__PURE__ */ jsx(ArtifactPreviewError, {
+					message: state.message,
+					onRetry: state.onRetry,
+					overlay: true
+				}) : null]
+			})
+		]
+	});
+}
+function ArtifactPreviewError({ message, onRetry, overlay = false }) {
+	return /* @__PURE__ */ jsxs(ArtifactContent, {
+		className: cx("artifact-preview__status", overlay && "artifact-preview__status--overlay"),
+		children: [
+			/* @__PURE__ */ jsx(WarningIcon, {}),
+			/* @__PURE__ */ jsx("span", { children: message }),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				color: "neutral",
+				size: "sm",
+				onClick: onRetry,
+				children: "Retry"
+			})
+		]
+	});
+}
 //#endregion
-export { Artifact, ArtifactAction, ArtifactActions, ArtifactClose, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactTitle };
+export { Artifact, ArtifactAction, ArtifactActions, ArtifactClose, ArtifactContent, ArtifactDescription, ArtifactHeader, ArtifactPreview, ArtifactTitle };

package/dist/components/ai-sdk/Message.d.ts

@@ -1,228 +1,2 @@
-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
+import { C as MessageResponse, D as MessageToolbarProps, E as MessageToolbar, S as MessageProps, T as MessageRole, _ as MessageBranchProps, a as MessageActionsProps, b as MessageContent, c as MessageBranch, d as MessageBranchNext, f as MessageBranchNextProps, g as MessageBranchPreviousProps, h as MessageBranchPrevious, i as MessageActions, l as MessageBranchContent, m as MessageBranchPageProps, n as MessageAction, o as MessageAttachment, p as MessageBranchPage, r as MessageActionProps, s as MessageAttachmentProps, t as Message, u as MessageBranchContentProps, v as MessageBranchSelector, w as MessageResponseProps, x as MessageContentProps, y as MessageBranchSelectorProps } from "../../Message-DBsHHhcM.js";
 export { Message, MessageAction, MessageActionProps, MessageActions, MessageActionsProps, MessageAttachment, MessageAttachmentProps, MessageBranch, MessageBranchContent, MessageBranchContentProps, MessageBranchNext, MessageBranchNextProps, MessageBranchPage, MessageBranchPageProps, MessageBranchPrevious, MessageBranchPreviousProps, MessageBranchProps, MessageBranchSelector, MessageBranchSelectorProps, MessageContent, MessageContentProps, MessageProps, MessageResponse, MessageResponseProps, MessageRole, MessageToolbar, MessageToolbarProps };

package/dist/components/nanites/AgentToolDetail.js

@@ -5,7 +5,7 @@ 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-DQh59CeC.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/artifact.css

@@ -61,8 +61,73 @@
   overflow-wrap: anywhere;
 }
 
+.artifact-preview {
+  container-type: inline-size;
+  min-inline-size: 0;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  background: var(--sigvelo-color-surface);
+  box-shadow: none;
+}
+
+.artifact-preview__header {
+  min-inline-size: 0;
+  justify-content: flex-end;
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.artifact-preview__frame-shell {
+  position: relative;
+  min-inline-size: 0;
+  padding: 0;
+}
+
+.artifact-preview__runtime {
+  min-inline-size: 0;
+}
+
+.artifact-preview__runtime > iframe {
+  display: block;
+  inline-size: 100%;
+  min-block-size: 12rem;
+  border: 0;
+  background: transparent;
+}
+
+.artifact-preview__status {
+  display: flex;
+  min-block-size: 12rem;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-4);
+  color: var(--sigvelo-color-text-muted);
+  text-align: center;
+}
+
+.artifact-preview__status--overlay {
+  position: absolute;
+  inset: 0;
+  color: var(--sigvelo-color-text);
+  background: color-mix(in srgb, var(--sigvelo-color-surface) 92%, transparent);
+}
+
+@media (any-pointer: coarse) {
+  .artifact-preview .button {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
 @media (forced-colors: active) {
   .artifact {
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
+
+  .artifact-preview__header {
+    border-color: CanvasText;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.37.0",
+  "version": "0.38.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.37.0"
+    "@mcp-b/design-tokens": "0.38.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.230",