@mcp-b/react-components 0.16.0 → 0.17.0

package/dist/{Workspace-D39LxGvP.d.ts → Workspace-C9RFoxcu.d.ts}

@@ -1,4 +1,4 @@
-import { i as WorkspaceFileState, r as WorkspaceFileAssetResolver } from "./WorkspaceFile-DOZkPwzu.js";
+import { i as WorkspaceFileState, r as WorkspaceFileAssetResolver } from "./WorkspaceFile-C8UzuSH4.js";
 import { WorkspaceLike } from "@cloudflare/think";
 import { FileInfo, Workspace } from "@cloudflare/shell";
 

package/dist/WorkspaceExplorer-sZewzT2O.d.ts

@@ -0,0 +1,32 @@
+import { l as WorkspaceNavigationAdapter } from "./WorkspaceLink-DK1DWMHe.js";
+import { i as WorkspaceState } from "./Workspace-C9RFoxcu.js";
+import * as React from "react";
+
+//#region src/components/WorkspaceExplorer.d.ts
+interface WorkspaceExplorerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  workspace: WorkspaceState;
+  /** Host-owned URL/history adapter shared by chat links and the file explorer. */
+  navigation: WorkspaceNavigationAdapter;
+  /** Header label. Defaults to "Workspace". */
+  title?: React.ReactNode;
+  /** Leading workspace control, such as a host-owned Back to chat button. */
+  leading?: React.ReactNode;
+  /** Extra header actions, rendered next to the built-in refresh button. */
+  actions?: React.ReactNode;
+  /** Show the file filter input. Hidden by default to keep the browser compact. */
+  showFilter?: boolean;
+  filterPlaceholder?: string;
+  emptyState?: React.ReactNode;
+}
+/**
+ * Convenience workspace application composed from `WorkspaceBrowser` and
+ * `WorkspaceFileView`. The host adapter owns URLs and history; the explorer
+ * only restores presentation state for stable navigation entry keys.
+ */
+declare function WorkspaceExplorer({
+  ...props
+}: WorkspaceExplorerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { WorkspaceExplorerProps as n, WorkspaceExplorer as t };

package/dist/{WorkspaceFile-DOZkPwzu.d.ts → WorkspaceFile-C8UzuSH4.d.ts}

@@ -1,4 +1,4 @@
-import { A as CodeBlockLanguage } from "./CodeBlock-BRajW4QU.js";
+import { A as CodeBlockLanguage } from "./CodeBlock-Dnpr88ZQ.js";
 import { SkillParseResult } from "agent-skills-ts-sdk";
 import { FileInfo } from "@cloudflare/shell";
 

package/dist/{WorkspaceFileView-rSN_yT0L.js → WorkspaceFileView-DNdGAEiX.js}

@@ -1,7 +1,7 @@
-import { g as EyeIcon, m as DownloadIcon, o as CheckIcon, q as WarningIcon, u as CodeIcon, w as MaximizeIcon } from "./icons-CpfUer49.js";
-import { c as useWorkspaceNavigationContext, s as useWorkspaceNavigationRestoration } from "./WorkspaceLink-DIPbXrUM.js";
-import { f as MessageResponse, m as createWorkspaceRehypePlugins } from "./Message-BkMdE3bS.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-BmB4Xaqq.js";
+import { J as WarningIcon, T as MaximizeIcon, _ as EyeIcon, d as CodeIcon, h as DownloadIcon, s as CheckIcon } from "./icons--FqCZEc3.js";
+import { c as useWorkspaceNavigationContext, s as useWorkspaceNavigationRestoration } from "./WorkspaceLink-B1ykV1dS.js";
+import { f as MessageResponse, m as createWorkspaceRehypePlugins } from "./Message-C4eYRogZ.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-Co1noLbC.js";
 import { AppTopBar } from "./components/AppTopBar.js";
 import { WorkspaceHeader } from "./components/WorkspaceHeader.js";
 import { inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceSkillPath, parseWorkspaceSkill } from "./components/WorkspaceFile.js";
@@ -273,7 +273,7 @@ function WorkspaceImagePreview({ asset, fileName, media, url }) {
 						onError: () => setLoadFailed(true)
 					})
 				}), /* @__PURE__ */ jsx("div", {
-					className: "workspace-explorer__visually-hidden",
+					className: "workspace-explorer__visually-hidden sigvelo-visually-hidden",
 					role: "status",
 					"aria-live": "polite",
 					"aria-atomic": "true",

package/dist/{WorkspaceLink-DIPbXrUM.js → WorkspaceLink-B1ykV1dS.js}

@@ -1,4 +1,5 @@
-import { t as cx } from "./class-names-9UtZwb0J.js";
+import { t as cx } from "./class-names-Bk-QLWWI.js";
+import { n as isWorkspacePathWithinRoot, t as canonicalizeAbsoluteWorkspacePath } from "./workspace-path-L_KmjRjq.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/workspace-navigation-context.tsx
@@ -120,24 +121,9 @@ function decodeUrlPart(value) {
 		return null;
 	}
 }
-function canonicalizeAbsolutePath(path) {
-	if (!path.startsWith("/") || hasInvalidPathCharacter(path)) return null;
-	const segments = [];
-	for (const segment of path.split("/")) {
-		if (!segment || segment === ".") continue;
-		if (segment === "..") segments.pop();
-		else segments.push(segment);
-	}
-	return `/${segments.join("/")}`;
-}
-function normalizeRoot(root) {
-	if (!root || hasInvalidPathCharacter(root)) return null;
-	const pathname = canonicalizeAbsolutePath(root);
-	if (!pathname) return null;
-	return pathname === "/" ? pathname : pathname.replace(/\/+$/, "");
-}
-function isWithinRoot(path, root) {
-	return root === "/" || path === root || path.startsWith(`${root}/`);
+function canonicalizeWorkspaceLinkPath(path) {
+	if (hasInvalidPathCharacter(path)) return null;
+	return canonicalizeAbsoluteWorkspacePath(path);
 }
 function getPathSegments(path) {
 	return path === "/" ? [] : path.slice(1).split("/");
@@ -188,10 +174,10 @@ function getExternalDestination(href) {
 }
 /** Resolve a Markdown link to a validated workspace file, external URL, or unavailable target. */
 function resolveWorkspaceLink({ href, root, base }) {
-	const normalizedRoot = normalizeRoot(root);
-	const normalizedBase = canonicalizeAbsolutePath(base.path);
+	const normalizedRoot = canonicalizeWorkspaceLinkPath(root);
+	const normalizedBase = canonicalizeWorkspaceLinkPath(base.path);
 	const trimmedHref = href.trim();
-	if (!normalizedRoot || !normalizedBase || !isWithinRoot(normalizedBase, normalizedRoot) || !trimmedHref || hasInvalidPathCharacter(href)) return invalid(href, "invalid-path");
+	if (!normalizedRoot || !normalizedBase || !isWorkspacePathWithinRoot(normalizedBase, normalizedRoot) || !trimmedHref || hasInvalidPathCharacter(href)) return invalid(href, "invalid-path");
 	if (trimmedHref.startsWith("//")) return getExternalDestination(trimmedHref);
 	if (URL_SCHEME.test(trimmedHref)) return getExternalDestination(trimmedHref);
 	if (trimmedHref.startsWith("#") && base.kind === "directory") return invalid(href, "fragment-without-file");
@@ -204,7 +190,7 @@ function resolveWorkspaceLink({ href, root, base }) {
 	if (rawFragment !== null && rawFragment !== "" && fragment === null || fragment !== null && hasInvalidPathCharacter(fragment)) return invalid(href, "invalid-path");
 	const localPath = resolveLocalPath(rawPath, normalizedRoot, base, normalizedBase);
 	if ("reason" in localPath) return invalid(href, localPath.reason);
-	if (!isWithinRoot(localPath.path, normalizedRoot)) return invalid(href, "outside-workspace");
+	if (!isWorkspacePathWithinRoot(localPath.path, normalizedRoot)) return invalid(href, "outside-workspace");
 	return {
 		kind: "file",
 		path: localPath.path,
@@ -250,9 +236,9 @@ function UnavailableWorkspaceLink({ children, className }) {
 				"aria-hidden": "true",
 				children: "↛"
 			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "workspace-link__visually-hidden",
-				children: " (link unavailable)"
+			/* @__PURE__ */ jsxs("span", {
+				className: "workspace-link__visually-hidden sigvelo-visually-hidden",
+				children: [" ", "(link unavailable)"]
 			})
 		]
 	});
@@ -298,9 +284,9 @@ function WorkspaceFileLink({ children, className, download, href = "", node: _no
 				className: "workspace-link__external-mark",
 				"aria-hidden": "true",
 				children: "↗"
-			}), /* @__PURE__ */ jsx("span", {
-				className: "workspace-link__visually-hidden",
-				children: " (opens in a new tab)"
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "workspace-link__visually-hidden sigvelo-visually-hidden",
+				children: [" ", "(opens in a new tab)"]
 			})] }) : null]
 		});
 	}

package/dist/class-names-Bk-QLWWI.js

@@ -0,0 +1,11 @@
+//#region src/components/_internal/class-names.ts
+function cx(...parts) {
+	if (parts.some((part) => typeof part === "function")) return (state) => parts.map((part) => typeof part === "function" ? part(state) : part).filter(Boolean).join(" ");
+	return parts.filter(Boolean).join(" ");
+}
+function mergeBaseClassName(stableClassName, className) {
+	if (typeof className === "function") return (state) => cx(stableClassName, className(state));
+	return cx(stableClassName, className);
+}
+//#endregion
+export { mergeBaseClassName as n, cx as t };

package/dist/components/Accordion.d.ts

@@ -2,21 +2,11 @@ import * as React from "react";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 
 //#region src/components/Accordion.d.ts
-interface AccordionProps extends Omit<React.ComponentPropsWithRef<typeof Accordion$1.Root>, "className"> {
-  className?: string;
-}
-interface AccordionItemProps extends Omit<React.ComponentPropsWithRef<typeof Accordion$1.Item>, "className"> {
-  className?: string;
-}
-interface AccordionTriggerProps extends Omit<React.ComponentPropsWithRef<typeof Accordion$1.Trigger>, "className"> {
-  className?: string;
-}
-interface AccordionHeaderProps extends Omit<Accordion$1.Header.Props, "className"> {
-  className?: string;
-}
-interface AccordionPanelProps extends Omit<React.ComponentPropsWithRef<typeof Accordion$1.Panel>, "className"> {
-  className?: string;
-}
+interface AccordionProps extends React.ComponentPropsWithRef<typeof Accordion$1.Root> {}
+interface AccordionItemProps extends React.ComponentPropsWithRef<typeof Accordion$1.Item> {}
+interface AccordionTriggerProps extends React.ComponentPropsWithRef<typeof Accordion$1.Trigger> {}
+interface AccordionHeaderProps extends Accordion$1.Header.Props {}
+interface AccordionPanelProps extends React.ComponentPropsWithRef<typeof Accordion$1.Panel> {}
 /**
  * An accordion component for showing collapsible content sections.
  *

package/dist/components/Accordion.js

@@ -1,3 +1,4 @@
+import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
 import "react";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import { jsx } from "react/jsx-runtime";
@@ -21,8 +22,8 @@ import { jsx } from "react/jsx-runtime";
 *
 * @see {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
 */
-function AccordionRoot({ className = "", ref, ...props }) {
-	const classes = ["accordion", className].filter(Boolean).join(" ");
+function AccordionRoot({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["accordion"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Accordion$1.Root, {
 		ref,
 		className: classes,
@@ -32,16 +33,16 @@ function AccordionRoot({ className = "", ref, ...props }) {
 /**
 * A single item within an Accordion.
 */
-function AccordionItem({ className = "", ref, ...props }) {
-	const classes = ["accordion__item", className].filter(Boolean).join(" ");
+function AccordionItem({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["accordion__item"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Accordion$1.Item, {
 		ref,
 		className: classes,
 		...props
 	});
 }
-function AccordionHeader({ className = "", ref, ...props }) {
-	const classes = ["accordion__header", className].filter(Boolean).join(" ");
+function AccordionHeader({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["accordion__header"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Accordion$1.Header, {
 		ref,
 		className: classes,
@@ -54,8 +55,8 @@ function AccordionHeader({ className = "", ref, ...props }) {
 /**
 * The clickable trigger button within an AccordionItem.
 */
-function AccordionTrigger({ className = "", ref, ...props }) {
-	const classes = ["accordion__trigger", className].filter(Boolean).join(" ");
+function AccordionTrigger({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["accordion__trigger"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Accordion$1.Trigger, {
 		ref,
 		className: classes,
@@ -65,8 +66,8 @@ function AccordionTrigger({ className = "", ref, ...props }) {
 /**
 * The collapsible content panel of an AccordionItem.
 */
-function AccordionPanel({ className = "", ref, ...props }) {
-	const classes = ["accordion__panel", className].filter(Boolean).join(" ");
+function AccordionPanel({ className, ref, ...props }) {
+	const classes = mergeBaseClassName(["accordion__panel"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Accordion$1.Panel, {
 		ref,
 		className: classes,

package/dist/components/Activity.d.ts

@@ -1,9 +1,8 @@
-import { Collapsible } from "./Collapsible.js";
+import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
 import * as React from "react";
 
 //#region src/components/Activity.d.ts
-interface ActivityProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "unstyled"> {
-  className?: string;
+interface ActivityProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "unstyled"> {
   /** While true, the trigger label shimmers. */
   isStreaming?: boolean;
 }
@@ -36,8 +35,7 @@ declare function Activity({
 }: ActivityProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ActivityTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "className" | "unstyled"> {
-  className?: string;
+interface ActivityTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "unstyled"> {
   /** Header text. Defaults to "Working…". */
   label?: React.ReactNode;
   /** Optional leading icon for the header. */
@@ -83,9 +81,7 @@ declare function ActivityTrigger({
 }: ActivityTriggerProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
-interface ActivityContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "className" | "unstyled"> {
-  className?: string;
-}
+interface ActivityContentProps extends Omit<React.ComponentProps<typeof Collapsible.Panel>, "unstyled"> {}
 /** The collapsible log of ActivityItem children. */
 declare function ActivityContent({
   className,
@@ -95,8 +91,7 @@ declare function ActivityContent({
 }: ActivityContentProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ActivityItemGroupProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "className" | "unstyled"> {
-  className?: string;
+interface ActivityItemGroupProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "unstyled"> {
   /** The row text, e.g. "Ran bash · vp test". */
   label: React.ReactNode;
   /** Optional leading icon for the row. */

package/dist/components/Activity.js

@@ -1,6 +1,6 @@
+import { t as cx } from "../class-names-Bk-QLWWI.js";
 import { Collapsible } from "./Collapsible.js";
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { l as ChevronRightIcon } from "../icons-CpfUer49.js";
+import { u as ChevronRightIcon } from "../icons--FqCZEc3.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Activity.tsx

package/dist/components/AgentActivity.js

@@ -1,4 +1,4 @@
-import { C as LinkIcon, G as TerminalIcon, J as WrenchIcon, N as PencilIcon, R as SearchIcon, S as InfoIcon, k as MonitorIcon, q as WarningIcon, v as FileIcon } from "../icons-CpfUer49.js";
+import { A as MonitorIcon, C as InfoIcon, J as WarningIcon, K as TerminalIcon, P as PencilIcon, Y as WrenchIcon, w as LinkIcon, y as FileIcon, z as SearchIcon } from "../icons--FqCZEc3.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/AgentActivity.tsx

package/dist/components/AgentActivityPreview.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { B as SpinnerIcon, T as McpIcon, Y as XIcon, q as WarningIcon, v as FileIcon } from "../icons-CpfUer49.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { E as McpIcon, J as WarningIcon, V as SpinnerIcon, X as XIcon, y as FileIcon } from "../icons--FqCZEc3.js";
 import { ActivityHeader } from "./Activity.js";
 import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
 import "react";

package/dist/components/AgentAttention.d.ts

@@ -37,7 +37,7 @@ declare function AgentAttentionHeader({
 }: AgentAttentionHeaderProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface AgentAttentionTriggerProps extends Omit<ButtonProps, "children" | "className" | "color" | "size" | "title" | "variant">, AgentAttentionHeadingProps {
+interface AgentAttentionTriggerProps extends Omit<ButtonProps, "children" | "color" | "size" | "title" | "variant">, AgentAttentionHeadingProps {
   className?: string;
 }
 /** Whole-surface trigger for opening the owning agent client or disclosure. */

package/dist/components/AgentAttention.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
 import { Button } from "./Button.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/AgentChat.d.ts

@@ -1,2 +1,2 @@
-import { a as AgentChatRenderMessageContext, i as AgentChatProps, n as AgentChatComposerDraft, o as AgentChatRenderPartContext, r as AgentChatPart, s as PermissionModeControl, t as AgentChat } from "../AgentChat-CrlpbvQJ.js";
-export { AgentChat, AgentChatComposerDraft, AgentChatPart, AgentChatProps, AgentChatRenderMessageContext, AgentChatRenderPartContext, PermissionModeControl };
+import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-CRuMi1Pb.js";
+export { AgentChat, AgentChatComposerDraft, AgentChatProps, AgentChatRenderMessageContext, PermissionModeControl };

package/dist/components/AgentChat.js

@@ -1,25 +1,28 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { F as PlusIcon, H as SteerIcon, I as QueueIcon, K as TrashIcon, L as RefreshIcon, N as PencilIcon } from "../icons-CpfUer49.js";
-import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
+import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { I as PlusIcon, L as QueueIcon, P as PencilIcon, R as RefreshIcon, U as SteerIcon, q as TrashIcon } from "../icons--FqCZEc3.js";
+import { n as MessageAction, r as MessageActions, t as Message } from "../Message-C4eYRogZ.js";
+import { AgentMessageParts } from "./AgentMessageParts.js";
 import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
 import { ConversationEmptyState } from "./Conversation.js";
-import { d as MessageContent, f as MessageResponse, i as MessageAttachment, n as MessageAction, r as MessageActions, t as Message } from "../Message-BkMdE3bS.js";
 import { AgentChatMessageEditor } from "./AgentChatMessageEditor.js";
 import { Marker, MarkerContent } from "./Marker.js";
 import { Menu } from "./Menu.js";
 import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputPermissionSelector, PromptInputReferences, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getApprovalStateKey, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
-import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
-import { Source, Sources, SourcesContent, SourcesTrigger } from "./Sources.js";
-import { getToolDisplayName, isToolPartFailed, isToolPartWorking } from "./ThinkChatToolParts.js";
-import { t as CopyButton } from "../copy-button-Dejn5heL.js";
-import { t as summarizeToolInput } from "../summarize-tool-input-BUJsENSn.js";
+import { t as CopyButton } from "../copy-button-cYsJBauI.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isCompactionMessage } from "agents/experimental/memory/utils";
-import { getToolInput, getToolOutput, getToolPartState } from "@cloudflare/think/react";
-import { isFileUIPart, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
+import { isReasoningUIPart, isTextUIPart } from "ai";
 //#region src/components/AgentChat.tsx
+/**
+* Agents exports this helper from `agents/sessions` after cloudflare/agents#1896;
+* the current 0.17.4 release still publishes it from the experimental path.
+* It checks the canonical `compaction_` id prefix used when Session history
+* materializes a summary overlay. `UIMessage` is structurally compatible with
+* the `SessionMessage` fields it reads, so use the upstream helper directly
+* instead of duplicating the prefix contract locally.
+*/
 const EMPTY_PENDING_APPROVALS = [];
 const EMPTY_SKIPPED_APPROVAL_IDS = [];
 function createApprovalSessionState(thinkStub) {
@@ -45,10 +48,8 @@ function AgentChatAddMenu({ children }) {
 		sideOffset: 12,
 		collisionPadding: 8,
 		className: "agent-chat__add-menu",
-		children: [/* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(Menu.GroupLabel, {
-			className: "agent-chat__add-menu-group-label",
-			children: "Add"
-		}), /* @__PURE__ */ jsx(PromptInputActionAddAttachments, {})] }), children]
+		"data-recipe": "composer-command-surface wide-scroll-picker",
+		children: [/* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(Menu.GroupLabel, { children: "Add" }), /* @__PURE__ */ jsx(PromptInputActionAddAttachments, {})] }), children]
 	})] });
 }
 function AgentChatSubmitAction({ status, onStop, allowSubmitWhileBusy, disabled, hasDraft }) {
@@ -61,58 +62,6 @@ function AgentChatSubmitAction({ status, onStop, allowSubmitWhileBusy, disabled,
 		disabled
 	});
 }
-/**
-* Per-message row-size compaction marker from `AIChatAgent` persistence.
-*
-* This is distinct from Session history compaction overlays. When a single
-* SQLite row approaches the Workers/SQLite size limit, Agents compacts large
-* tool outputs and, if necessary, truncates text before persistence. The
-* message remains in place and receives metadata keys documented by Agents:
-* `compactedToolOutputs` lists tool-call ids whose outputs were summarized;
-* `compactedTextParts` lists text-part indexes that were truncated. The UI
-* reads those keys structurally because they are persisted metadata rather than
-* exported AI SDK part variants, then adds a local visual note while preserving
-* the original `UIMessage` and part shapes.
-*
-* @see https://github.com/cloudflare/agents/blob/main/docs/agents/chat-agents.md#row-size-protection
-*/
-function isCompactedPart(message, part, partIndex) {
-	const metadata = message.metadata;
-	if (isTextUIPart(part)) return Array.isArray(metadata?.compactedTextParts) && metadata.compactedTextParts.includes(partIndex);
-	if (isToolUIPart(part)) return Array.isArray(metadata?.compactedToolOutputs) && metadata.compactedToolOutputs.includes(part.toolCallId);
-	return false;
-}
-function getPartKey(part, partIndex) {
-	if (isToolUIPart(part)) return part.toolCallId;
-	if ("id" in part && typeof part.id === "string") return `${part.type}-${part.id}`;
-	return `${part.type}-${partIndex}`;
-}
-/**
-* AI SDK exports concrete source part types but no public source-part guard.
-* Keep these local guards as exact discriminant checks, matching
-* `ai/src/ui/ui-messages.ts` and `ai/src/ui/process-ui-message-stream.ts`.
-* If AI SDK exports source or step guards later, replace these wrappers rather
-* than widening the local transcript contract.
-*/
-function isSourceUrlPart(part) {
-	return part?.type === "source-url";
-}
-function isSourceDocumentPart(part) {
-	return part?.type === "source-document";
-}
-/**
-* Session compaction overlay marker from Agents Sessions.
-*
-* Agents exports `isCompactionMessage` from `agents/sessions`; it checks the canonical `compaction_`
-* id prefix used when `Session.getHistory()` materializes a summary overlay.
-* `UIMessage` is structurally compatible with the fields the helper reads, so
-* keep this wrapper instead of duplicating the prefix test locally. The
-* runtime import above stays on the deprecated compatibility path until this
-* package raises its Agents dependency floor to the graduating release.
-*/
-function isCompactionMessage$1(message) {
-	return isCompactionMessage(message);
-}
 function getMessageText(message) {
 	return message.parts.filter((part) => isTextUIPart(part) || isReasoningUIPart(part)).map((part) => part.text).join("");
 }
@@ -146,77 +95,6 @@ function getEditableUserText(message) {
 	const part = message.parts[0];
 	return isTextUIPart(part) && part.text.trim() ? part.text : void 0;
 }
-function formatSourceTitle(part) {
-	if (part.title) return part.title;
-	if (part.type === "source-document") return part.filename ?? part.mediaType;
-	try {
-		return new URL(part.url).hostname.replace(/^www\./, "");
-	} catch {
-		return part.url;
-	}
-}
-function renderSources(parts) {
-	return /* @__PURE__ */ jsxs(Sources, { children: [/* @__PURE__ */ jsx(SourcesTrigger, { count: parts.length }), /* @__PURE__ */ jsx(SourcesContent, { children: parts.map((part) => part.type === "source-url" ? /* @__PURE__ */ jsx(Source, {
-		href: part.url,
-		title: formatSourceTitle(part)
-	}, part.sourceId) : /* @__PURE__ */ jsx(Source, {
-		title: formatSourceTitle(part),
-		description: part.filename ?? part.mediaType
-	}, part.sourceId)) })] });
-}
-function getSourceRun(parts, start) {
-	const sources = [];
-	for (let index = start; index < parts.length; index++) {
-		const candidate = parts[index];
-		if (!isSourceUrlPart(candidate) && !isSourceDocumentPart(candidate)) break;
-		sources.push(candidate);
-	}
-	return sources;
-}
-function describeToolPart(part) {
-	const name = getToolDisplayName(part);
-	const verb = isToolPartFailed(part) ? `${name} failed` : isToolPartWorking(part) ? `Running ${name}` : `Ran ${name}`;
-	const detail = summarizeToolInput(getToolInput(part));
-	return detail ? `${verb} · ${detail}` : verb;
-}
-function formatToolValue(value) {
-	if (value === void 0) return void 0;
-	return typeof value === "string" ? value : JSON.stringify(value, null, 2);
-}
-function renderToolActivity(part) {
-	const state = getToolPartState(part);
-	const failed = isToolPartFailed(part);
-	const deniedReason = part.state === "output-denied" ? part.approval.reason : void 0;
-	const output = state === "error" ? part.errorText : state === "denied" ? deniedReason ?? "Denied" : formatToolValue(getToolOutput(part));
-	return /* @__PURE__ */ jsxs(Activity, {
-		isStreaming: isToolPartWorking(part),
-		children: [/* @__PURE__ */ jsx(ActivityTrigger, { label: describeToolPart(part) }), /* @__PURE__ */ jsxs(ActivityContent, { children: [/* @__PURE__ */ jsx(ActivityPanel, {
-			label: getToolDisplayName(part),
-			text: formatToolValue(getToolInput(part))
-		}), output ? /* @__PURE__ */ jsx(ActivityPanel, {
-			label: "output",
-			text: output,
-			status: state === "denied" ? "denied" : failed ? "error" : void 0,
-			error: failed
-		}) : null] })]
-	});
-}
-function renderDefaultPart(message, part, partIndex, isLastMessage, status) {
-	if (isTextUIPart(part) && part.text) return /* @__PURE__ */ jsx(MessageResponse, { children: part.text });
-	if (isFileUIPart(part)) return /* @__PURE__ */ jsx(MessageAttachment, { part });
-	if (isReasoningUIPart(part)) {
-		if (partIndex !== message.parts.findIndex(isReasoningUIPart)) return null;
-		const reasoningText = message.parts.filter(isReasoningUIPart).map((reasoningPart) => reasoningPart.text).join("\n\n");
-		if (!reasoningText) return null;
-		const lastPart = message.parts.at(-1);
-		return /* @__PURE__ */ jsxs(Reasoning, {
-			isStreaming: isLastMessage && status === "streaming" && lastPart !== void 0 && isReasoningUIPart(lastPart) && lastPart.state === "streaming",
-			children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: reasoningText })]
-		});
-	}
-	if (isToolUIPart(part)) return renderToolActivity(part);
-	return null;
-}
 /**
 * Low-level transcript/composer surface used by `ThinkChat`: props in, no
 * transport. Product code that talks to a Cloudflare Think agent should render
@@ -302,11 +180,11 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 	React.useLayoutEffect(() => {
 		setApprovalSession((previous) => previous.thinkStub === thinkStub ? previous : createApprovalSessionState(thinkStub));
 	}, [thinkStub]);
-	const pendingApprovalItems = [...getPendingToolApprovals(messages, { pausedExecutions: Boolean(thinkStub) }).filter(({ part }) => {
+	const pendingApprovalItems = [...getPendingToolApprovals(messages, { pausedExecutions: Boolean(thinkStub) }).filter((part) => {
 		if (part.state === "approval-requested" && !onApprovalResponse) return false;
 		const id = getApprovalStateKey(part);
 		return Boolean(id) && !skippedApprovalIds.includes(id);
-	}).map((approval) => ({ part: approval.part })), ...thinkStub ? durableApprovals.filter((approval) => approval.source === "action" && !skippedApprovalIds.includes(approval.executionId)).map((approval) => ({ approval })) : []];
+	}).map((part) => ({ part })), ...thinkStub ? durableApprovals.filter((approval) => approval.source === "action" && !skippedApprovalIds.includes(approval.executionId)).map((approval) => ({ approval })) : []];
 	const approvalsWired = Boolean(onApprovalResponse || thinkStub);
 	const autoApprovedIds = React.useRef({
 		thinkStub,
@@ -347,7 +225,7 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 	const contextUsage = contextWindow ? getContextUsage(messages) : void 0;
 	const queuedMessageIds = new Set(queuedMessages.map((message) => message.id));
 	const transcriptMessages = queuedMessageIds.size ? messages.filter((message) => !queuedMessageIds.has(message.id)) : messages;
-	const newestAssistantIndex = transcriptMessages.findLastIndex((message) => message.role === "assistant" && !isCompactionMessage$1(message));
+	const newestAssistantIndex = transcriptMessages.findLastIndex((message) => message.role === "assistant" && !isCompactionMessage(message));
 	const lastAssistantIndex = onRegenerate && status !== "streaming" && status !== "submitted" ? newestAssistantIndex : -1;
 	const lastUserIndex = onEditAndResend && !disabled && status !== "streaming" && status !== "submitted" ? transcriptMessages.findLastIndex((message) => message.role === "user") : -1;
 	const [editingMessageId, setEditingMessageId] = React.useState();
@@ -355,7 +233,7 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 	const editButtonRef = React.useRef(null);
 	let assistantResponseCount = 0;
 	const assistantResponseNumbers = transcriptMessages.map((message) => {
-		if (message.role !== "assistant" || isCompactionMessage$1(message)) return 0;
+		if (message.role !== "assistant" || isCompactionMessage(message)) return 0;
 		assistantResponseCount += 1;
 		return assistantResponseCount;
 	});
@@ -379,7 +257,7 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 		"data-composer-hidden": showComposer ? void 0 : "",
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				className: "message__copy-status",
+				className: "message__copy-status sigvelo-visually-hidden",
 				role: "status",
 				"aria-atomic": "true",
 				children: copyAnnouncement
@@ -401,7 +279,7 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 						}) : null, transcriptMessages.map((message, messageIndex) => /* @__PURE__ */ jsx(MessageScrollerItem, {
 							messageId: message.id,
 							scrollAnchor: message.role === "user",
-							children: isCompactionMessage$1(message) ? /* @__PURE__ */ jsx(Marker, {
+							children: isCompactionMessage(message) ? /* @__PURE__ */ jsx(Marker, {
 								variant: "separator",
 								children: /* @__PURE__ */ jsx(MarkerContent, { children: getMessageText(message) || "Conversation compacted" })
 							}) : /* @__PURE__ */ jsx(Message, {
@@ -419,25 +297,10 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 										setEditingMessageId(void 0);
 									}
 								}, message.id) : /* @__PURE__ */ jsxs(Fragment, { children: [
-									message.parts.map((part, partIndex) => {
-										const defaultRender = () => renderDefaultPart(message, part, partIndex, messageIndex === transcriptMessages.length - 1, status);
-										const custom = renderPart?.({
-											message,
-											part,
-											partIndex,
-											defaultRender
-										});
-										if (isSourceUrlPart(part) || isSourceDocumentPart(part)) {
-											if (custom !== void 0) return custom ? /* @__PURE__ */ jsx(MessageContent, { children: custom }, getPartKey(part, partIndex)) : null;
-											const previous = message.parts[partIndex - 1];
-											if (isSourceUrlPart(previous) || isSourceDocumentPart(previous)) return null;
-											return /* @__PURE__ */ jsx(MessageContent, { children: renderSources(getSourceRun(message.parts, partIndex)) }, getPartKey(part, partIndex));
-										}
-										const rendered = custom === void 0 ? defaultRender() : custom;
-										return rendered ? /* @__PURE__ */ jsxs(MessageContent, { children: [rendered, isCompactedPart(message, part, partIndex) ? /* @__PURE__ */ jsx("div", {
-											className: "message__compacted",
-											children: "Output truncated for storage"
-										}) : null] }, getPartKey(part, partIndex)) : null;
+									/* @__PURE__ */ jsx(AgentMessageParts, {
+										message,
+										status: messageIndex === transcriptMessages.length - 1 ? status : "ready",
+										renderPart
 									}),
 									renderMessageAfter?.({
 										message,
@@ -501,7 +364,7 @@ function AgentChat({ className, messages, queuedMessages = [], onSteerQueuedMess
 											children: /* @__PURE__ */ jsx(QueueIcon, {})
 										}),
 										/* @__PURE__ */ jsx("span", {
-											className: "agent-chat__queued-text",
+											className: "agent-chat__queued-text sigvelo-truncate",
 											children: messageText
 										}),
 										onSteerQueuedMessage ? /* @__PURE__ */ jsxs("button", {

package/dist/components/AgentChatMessageEditor.js

@@ -66,7 +66,7 @@ function AgentChatMessageEditor({ message, originalText, onCancel, onSubmit, onS
 						onCancel();
 					}
 				}),
-				error ? /* @__PURE__ */ jsx(Field.Error, { errors: [error] }) : null
+				error ? /* @__PURE__ */ jsx(Field.Errors, { errors: [error] }) : null
 			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "message__edit-actions",