@mcp-b/react-components 0.20.5 → 0.22.0

package/dist/{WorkspaceFile-D8Un_xge.d.ts → WorkspaceFile-DMtRMwVv.d.ts}

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

package/dist/{WorkspaceFileView-Bxx4wEzJ.js → WorkspaceFileView-rUEN2iox.js}

@@ -1,10 +1,10 @@
-import { Q as WarningIcon, b as EyeIcon, et as XIcon, k as MaximizeIcon, m as CodeIcon, u as CheckIcon, v as DownloadIcon } from "./icons-DyOM0EJs.js";
-import { t as NavigationLink } from "./navigation-link-Cob7KBlM.js";
 import { buttonVariants } from "./components/Button.js";
+import { $ as WarningIcon, A as MaximizeIcon, d as CheckIcon, h as CodeIcon, tt as XIcon, x as EyeIcon, y as DownloadIcon } from "./icons-ua6f_GH3.js";
+import { t as NavigationLink } from "./navigation-link-Cob7KBlM.js";
 import { c as useWorkspaceNavigationContext, s as useWorkspaceNavigationRestoration } from "./WorkspaceLink-BYYeTQLf.js";
 import { r as formatClock } from "./format-S6uWyoSb.js";
-import { f as MessageResponse, m as createWorkspaceRehypePlugins } from "./Message-DzuteocT.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-ygtuzqJd.js";
+import { f as MessageResponse, m as createWorkspaceRehypePlugins } from "./Message-_-bEYLAO.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "./CodeBlock-Cp67Njo3.js";
 import { AppTopBar } from "./components/AppTopBar.js";
 import { inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceSkillPath, parseWorkspaceSkill } from "./components/WorkspaceFile.js";
 import { WorkspaceHeader } from "./components/WorkspaceHeader.js";

package/dist/components/ActionGuide.d.ts

@@ -0,0 +1,85 @@
+import { r as ButtonProps } from "../Button-SBIz6Lqi.js";
+import * as React from "react";
+
+//#region src/components/ActionGuide.d.ts
+type ActionGuideHeadingLevel = 2 | 3 | 4 | 5 | 6;
+type ActionGuideListLayout = "compact" | "cards" | "list";
+interface ActionGuideProps extends Omit<React.ComponentPropsWithoutRef<"article">, "title"> {
+  /** Short, task-oriented introduction to the guide. */
+  title: React.ReactNode;
+  /** Optional sentence that explains what the guide helps the user do. */
+  description?: React.ReactNode;
+  /** Semantic heading level for the guide title. */
+  headingLevel?: ActionGuideHeadingLevel;
+}
+/**
+ * Composable, app-agnostic guide for presenting groups of useful actions.
+ *
+ * Product code owns the copy, icons, availability, and click behavior. This
+ * component owns only the shared article rhythm and responsive layout.
+ */
+declare function ActionGuide({
+  title,
+  description,
+  headingLevel,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ref,
+  ...props
+}: ActionGuideProps & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+interface ActionGuideSectionProps extends Omit<React.ComponentPropsWithoutRef<"section">, "title"> {
+  /** Label for this group of related actions. */
+  title: React.ReactNode;
+  /** Semantic heading level for the section title. */
+  headingLevel?: ActionGuideHeadingLevel;
+}
+/** A labelled group inside an {@link ActionGuide}. */
+declare function ActionGuideSection({
+  title,
+  headingLevel,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ref,
+  ...props
+}: ActionGuideSectionProps & {
+  ref?: React.Ref<HTMLElement>;
+}): React.JSX.Element;
+interface ActionGuideListProps extends React.ComponentPropsWithoutRef<"ul"> {
+  /** Responsive arrangement for the actions in this group. */
+  layout?: ActionGuideListLayout;
+}
+/** Semantic action list with compact, card, and plain-row layouts. */
+declare function ActionGuideList({
+  layout,
+  className,
+  ref,
+  ...props
+}: ActionGuideListProps & {
+  ref?: React.Ref<HTMLUListElement>;
+}): React.JSX.Element;
+interface ActionGuideActionProps extends Omit<ButtonProps, "color" | "iconOnly" | "nativeButton" | "render" | "size" | "variant"> {
+  /** Decorative leading glyph or app mark. */
+  icon?: React.ReactNode;
+  /** Raised actions are prominent; ghost actions form a quieter task list. */
+  variant?: "surface" | "ghost";
+}
+/** One native-button action inside an {@link ActionGuideList}. */
+declare function ActionGuideAction({
+  icon,
+  variant,
+  children,
+  className,
+  type,
+  ref,
+  ...props
+}: ActionGuideActionProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+//#endregion
+export { ActionGuide, ActionGuideAction, ActionGuideActionProps, ActionGuideHeadingLevel, ActionGuideList, ActionGuideListLayout, ActionGuideListProps, ActionGuideProps, ActionGuideSection, ActionGuideSectionProps };

package/dist/components/ActionGuide.js

@@ -0,0 +1,94 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { Button } from "./Button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ActionGuide.tsx
+/**
+* Composable, app-agnostic guide for presenting groups of useful actions.
+*
+* Product code owns the copy, icons, availability, and click behavior. This
+* component owns only the shared article rhythm and responsive layout.
+*/
+function ActionGuide({ title, description, headingLevel = 2, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }) {
+	const titleId = React.useId();
+	const Title = `h${headingLevel}`;
+	return /* @__PURE__ */ jsxs("article", {
+		ref,
+		"data-slot": "action-guide",
+		"data-message-layout": "wide",
+		className: cx("action-guide", className),
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? titleId,
+		...props,
+		children: [/* @__PURE__ */ jsxs("header", {
+			"data-slot": "action-guide-header",
+			className: "action-guide__header",
+			children: [/* @__PURE__ */ jsx(Title, {
+				id: titleId,
+				"data-slot": "action-guide-title",
+				className: "action-guide__title",
+				children: title
+			}), description ? /* @__PURE__ */ jsx("p", {
+				"data-slot": "action-guide-description",
+				className: "action-guide__description",
+				children: description
+			}) : null]
+		}), children]
+	});
+}
+/** A labelled group inside an {@link ActionGuide}. */
+function ActionGuideSection({ title, headingLevel = 3, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }) {
+	const titleId = React.useId();
+	const Title = `h${headingLevel}`;
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		"data-slot": "action-guide-section",
+		className: cx("action-guide__section", className),
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? titleId,
+		...props,
+		children: [/* @__PURE__ */ jsx(Title, {
+			id: titleId,
+			"data-slot": "action-guide-section-title",
+			className: "action-guide__section-title",
+			children: title
+		}), children]
+	});
+}
+/** Semantic action list with compact, card, and plain-row layouts. */
+function ActionGuideList({ layout = "compact", className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		"data-slot": "action-guide-list",
+		"data-layout": layout,
+		className: cx("action-guide__list", className),
+		...props
+	});
+}
+/** One native-button action inside an {@link ActionGuideList}. */
+function ActionGuideAction({ icon, variant = "surface", children, className, type = "button", ref, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "action-guide-item",
+		className: "action-guide__item",
+		children: /* @__PURE__ */ jsxs(Button, {
+			ref,
+			...props,
+			type,
+			variant,
+			color: "neutral",
+			className: cx("action-guide__action", className),
+			children: [icon ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "action-guide-action-icon",
+				className: "action-guide__action-icon",
+				"aria-hidden": true,
+				children: icon
+			}) : null, /* @__PURE__ */ jsx("span", {
+				"data-slot": "action-guide-action-label",
+				className: "action-guide__action-label",
+				children
+			})]
+		})
+	});
+}
+//#endregion
+export { ActionGuide, ActionGuideAction, ActionGuideList, ActionGuideSection };

package/dist/components/Activity.d.ts

@@ -3,22 +3,22 @@ import * as React from "react";
 
 //#region src/components/Activity.d.ts
 interface ActivityProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "unstyled"> {
-  /** While true, the trigger label shimmers. */
+  /** While true, the trigger action shimmers. */
   isStreaming?: boolean;
 }
 /**
  * A collapsible activity line that aggregates agent activity (tool calls,
  * file edits, searches) instead of rendering every call as its own block.
  * Borderless, Claude/Codex style: the collapsed state is a single plain text
- * line whose label shimmers while streaming — pass the latest action as the
- * label while streaming, and a short summary once settled. Expanding reveals
+ * line whose action shimmers while streaming — pass the latest action while
+ * streaming, and a short summary once settled. Expanding reveals
  * the full log. Compose with ActivityTrigger, ActivityContent, and
  * ActivityItem.
  *
  * @example
  * ```tsx
  * <Activity isStreaming={running}>
- *   <ActivityTrigger label={running ? "Searching code" : "Read 2 files and searched code"} />
+ *   <ActivityTrigger action={running ? "Searching code" : "Read 2 files and searched code"} />
  *   <ActivityContent>
  *     <ActivityItem>Searched code</ActivityItem>
  *     <ActivityItem>Edited a file</ActivityItem>
@@ -35,20 +35,29 @@ declare function Activity({
 }: ActivityProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ActivityTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "unstyled"> {
-  /** Header text. Defaults to "Working…". */
-  label?: React.ReactNode;
+interface ActivityTriggerProps extends Omit<React.ComponentProps<typeof Collapsible.Trigger>, "unstyled" | "children"> {
+  /** The action being taken. Defaults to "Working…". */
+  action?: React.ReactNode;
+  /** What the action is being applied to, rendered quieter. See ActivityHeader. */
+  detail?: React.ReactNode;
   /** Optional leading icon for the header. */
   icon?: React.ReactNode;
 }
 interface ActivityHeaderProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
-  /** Current one-line activity label. */
-  label?: React.ReactNode;
+  /** The action being taken, e.g. "Reading" or "Ran". */
+  action?: React.ReactNode;
+  /**
+   * What the action applies to: a path, a command, a query. Rendered in the
+   * muted role beside the action, which is what lets a reader find the verb at
+   * a glance in a column of activity lines. It also truncates first, so a long
+   * command loses its tail rather than pushing the action out of view.
+   */
+  detail?: React.ReactNode;
   /** Optional leading activity icon. */
   icon?: React.ReactNode;
   /** Optional trailing affordance supplied by the interactive owner. */
   trailing?: React.ReactNode;
-  /** While true, the label uses the shared streaming treatment. */
+  /** While true, the action uses the shared streaming treatment. */
   isStreaming?: boolean;
 }
 /**
@@ -58,9 +67,10 @@ interface ActivityHeaderProps extends Omit<React.HTMLAttributes<HTMLSpanElement>
  */
 declare function ActivityHeader({
   className,
+  detail,
   icon,
   isStreaming,
-  label,
+  action,
   trailing,
   ref,
   ...props
@@ -68,14 +78,14 @@ declare function ActivityHeader({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 /**
- * Clickable header line that toggles the activity log. The label shimmers
+ * Clickable header line that toggles the activity log. The action shimmers
  * while the parent Activity is streaming.
  */
 declare function ActivityTrigger({
   className,
-  label,
+  action,
+  detail,
   icon,
-  children,
   ref,
   ...props
 }: ActivityTriggerProps & {
@@ -92,8 +102,10 @@ declare function ActivityContent({
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 interface ActivityItemGroupProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "unstyled"> {
-  /** The row text, e.g. "Ran bash · vp test". */
-  label: React.ReactNode;
+  /** The action the row reports, e.g. "Ran" or "Edited". */
+  action: React.ReactNode;
+  /** What the action applied to — a path, a command. Rendered muted. */
+  detail?: React.ReactNode;
   /** Optional leading icon for the row. */
   icon?: React.ReactNode;
 }
@@ -104,7 +116,8 @@ interface ActivityItemGroupProps extends Omit<React.ComponentProps<typeof Collap
  */
 declare function ActivityItemGroup({
   className,
-  label,
+  action,
+  detail,
   icon,
   children,
   ref,
@@ -125,6 +138,8 @@ declare function ActivityText({
 interface ActivityItemProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Optional leading icon for the row. */
   icon?: React.ReactNode;
+  /** What the row's action applied to — a path, a command. Rendered muted. */
+  detail?: React.ReactNode;
 }
 /**
  * A single activity row — "Searched code", "Edited a file", etc. Free-form
@@ -133,6 +148,7 @@ interface ActivityItemProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function ActivityItem({
   className,
   icon,
+  detail,
   children,
   ref,
   ...props

package/dist/components/Activity.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { p as ChevronRightIcon } from "../icons-DyOM0EJs.js";
+import { m as ChevronRightIcon } from "../icons-ua6f_GH3.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Activity.tsx
@@ -8,15 +8,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * A collapsible activity line that aggregates agent activity (tool calls,
 * file edits, searches) instead of rendering every call as its own block.
 * Borderless, Claude/Codex style: the collapsed state is a single plain text
-* line whose label shimmers while streaming — pass the latest action as the
-* label while streaming, and a short summary once settled. Expanding reveals
+* line whose action shimmers while streaming — pass the latest action while
+* streaming, and a short summary once settled. Expanding reveals
 * the full log. Compose with ActivityTrigger, ActivityContent, and
 * ActivityItem.
 *
 * @example
 * ```tsx
 * <Activity isStreaming={running}>
-*   <ActivityTrigger label={running ? "Searching code" : "Read 2 files and searched code"} />
+*   <ActivityTrigger action={running ? "Searching code" : "Read 2 files and searched code"} />
 *   <ActivityContent>
 *     <ActivityItem>Searched code</ActivityItem>
 *     <ActivityItem>Edited a file</ActivityItem>
@@ -39,7 +39,7 @@ function Activity({ className, isStreaming = false, defaultOpen = false, ref, ..
 * disclosure behavior so a transcript, app shell, or injected preview can
 * provide the correct interaction semantics around the same visual.
 */
-function ActivityHeader({ className, icon, isStreaming = false, label = "Working…", trailing, ref, ...props }) {
+function ActivityHeader({ className, detail, icon, isStreaming = false, action = "Working…", trailing, ref, ...props }) {
 	return /* @__PURE__ */ jsxs("span", {
 		ref,
 		className: cx("activity__header", className),
@@ -52,25 +52,23 @@ function ActivityHeader({ className, icon, isStreaming = false, label = "Working
 				children: icon
 			}) : null,
 			/* @__PURE__ */ jsx("span", {
-				className: "activity__header-label sigvelo-truncate",
-				children: label
+				className: "activity__header-action",
+				children: action
 			}),
+			detail ? " " : null,
+			detail ? /* @__PURE__ */ jsx("span", {
+				className: "activity__header-detail",
+				children: detail
+			}) : null,
 			trailing
 		]
 	});
 }
 /**
-* Clickable header line that toggles the activity log. The label shimmers
+* Clickable header line that toggles the activity log. The action shimmers
 * while the parent Activity is streaming.
 */
-function ActivityTrigger({ className, label = "Working…", icon, children, ref, ...props }) {
-	if (children !== void 0 && children !== null) return /* @__PURE__ */ jsx(Collapsible.Trigger, {
-		ref,
-		className: cx("activity__trigger", className),
-		...props,
-		unstyled: true,
-		children
-	});
+function ActivityTrigger({ className, action = "Working…", detail, icon, ref, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
 		ref,
 		className: cx("activity__trigger", className),
@@ -78,7 +76,8 @@ function ActivityTrigger({ className, label = "Working…", icon, children, ref,
 		unstyled: true,
 		children: /* @__PURE__ */ jsx(ActivityHeader, {
 			icon,
-			label,
+			action,
+			detail,
 			trailing: /* @__PURE__ */ jsx("span", {
 				className: "activity__trigger-icon",
 				"aria-hidden": "true",
@@ -105,7 +104,7 @@ function ActivityContent({ className, children, ref, ...props }) {
 * like a plain ActivityItem; expanding reveals chrome-free detail (a Terminal,
 * a thought trace) flush inside the outer Activity log.
 */
-function ActivityItemGroup({ className, label, icon, children, ref, ...props }) {
+function ActivityItemGroup({ className, action, detail, icon, children, ref, ...props }) {
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		ref,
 		className: cx("activity__group", className),
@@ -122,8 +121,13 @@ function ActivityItemGroup({ className, label, icon, children, ref, ...props })
 				}) : null,
 				/* @__PURE__ */ jsx("span", {
 					className: "activity__item-text",
-					children: label
+					children: action
 				}),
+				detail ? " " : null,
+				detail ? /* @__PURE__ */ jsx("span", {
+					className: "activity__item-detail",
+					children: detail
+				}) : null,
 				/* @__PURE__ */ jsx("span", {
 					className: "activity__group-icon",
 					"aria-hidden": "true",
@@ -154,19 +158,27 @@ function ActivityText({ className, children, ref, ...props }) {
 * A single activity row — "Searched code", "Edited a file", etc. Free-form
 * content; keep it to one line so the streaming peek reads well.
 */
-function ActivityItem({ className, icon, children, ref, ...props }) {
+function ActivityItem({ className, icon, detail, children, ref, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("activity__item", className),
 		...props,
-		children: [icon ? /* @__PURE__ */ jsx("span", {
-			className: "activity__item-icon",
-			"aria-hidden": "true",
-			children: icon
-		}) : null, /* @__PURE__ */ jsx("span", {
-			className: "activity__item-text",
-			children
-		})]
+		children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				className: "activity__item-icon",
+				"aria-hidden": "true",
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "activity__item-text",
+				children
+			}),
+			detail ? " " : null,
+			detail ? /* @__PURE__ */ jsx("span", {
+				className: "activity__item-detail",
+				children: detail
+			}) : null
+		]
 	});
 }
 /** Scrollable monospaced output inside an ActivityPanel. */

package/dist/components/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-D2SHSGFX.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-D3OvrC02.js";
 export { AgentActivityFavicon, AgentActivityFaviconProps, AgentActivityIcon, AgentActivityIconKind, AgentActivityIconProps, AgentActivityMode, AgentActivitySummary };

package/dist/components/AgentActivity.js

@@ -1,4 +1,5 @@
-import { $ as WrenchIcon, D as InfoIcon, O as LinkIcon, P as MonitorIcon, Q as WarningIcon, S as FileIcon, W as SearchIcon, X as TerminalIcon, z as PencilIcon } from "../icons-DyOM0EJs.js";
+import { $ as WarningIcon, B as PencilIcon, C as FileIcon, F as MonitorIcon, G as SearchIcon, O as InfoIcon, Z as TerminalIcon, et as WrenchIcon, k as LinkIcon } from "../icons-ua6f_GH3.js";
+import { inferFaviconUrl } from "../utils/favicon.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/AgentActivity.tsx
@@ -18,7 +19,7 @@ function AgentActivityIcon({ kind }) {
 }
 /** Site favicon for URL-backed activity, with the shared icon vocabulary as fallback. */
 function AgentActivityFavicon({ fallbackKind = "web", url }) {
-	const src = faviconHref(url);
+	const src = inferFaviconUrl(url);
 	const [failedSrc, setFailedSrc] = React.useState(null);
 	if (!src || failedSrc === src) return /* @__PURE__ */ jsx(AgentActivityIcon, { kind: fallbackKind });
 	return /* @__PURE__ */ jsx("img", {
@@ -31,14 +32,5 @@ function AgentActivityFavicon({ fallbackKind = "web", url }) {
 		onError: () => setFailedSrc(src)
 	});
 }
-function faviconHref(url) {
-	try {
-		const parsed = new URL(url);
-		if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return null;
-		return new URL("/favicon.ico", parsed.origin).href;
-	} catch {
-		return null;
-	}
-}
 //#endregion
 export { AgentActivityFavicon, AgentActivityIcon };

package/dist/components/AgentActivityPreview.d.ts

@@ -1,5 +1,5 @@
 import { n as WorkspaceDestination } from "../WorkspaceLink-O-EBKUJ8.js";
-import { s as AgentActivitySummary } from "../AgentActivity-D2SHSGFX.js";
+import { s as AgentActivitySummary } from "../AgentActivity-D3OvrC02.js";
 import * as React from "react";
 
 //#region src/components/AgentActivityPreview.d.ts

package/dist/components/AgentActivityPreview.js

@@ -1,8 +1,10 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { A as McpIcon, K as SpinnerIcon, Q as WarningIcon, S as FileIcon, et as XIcon } from "../icons-DyOM0EJs.js";
+import { $ as WarningIcon, C as FileIcon, j as McpIcon, q as SpinnerIcon, tt as XIcon } from "../icons-ua6f_GH3.js";
 import { ActivityHeader } from "./Activity.js";
 import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
 import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
+import { AppIcon } from "./AppIcon.js";
+import { IconButton } from "./IconButton.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AgentActivityPreview.tsx
@@ -21,10 +23,12 @@ function AgentActivityPreview({ "aria-label": ariaLabel = "Agent activity", bran
 				"aria-hidden": "true",
 				children: brandIcon
 			}),
-			onDismiss ? /* @__PURE__ */ jsx("button", {
-				type: "button",
+			onDismiss ? /* @__PURE__ */ jsx(IconButton, {
 				className: "agent-activity-preview__dismiss",
-				"aria-label": "Hide agent activity",
+				color: "neutral",
+				label: "Hide agent activity",
+				size: "sm",
+				variant: "ghost",
 				onClick: onDismiss,
 				children: /* @__PURE__ */ jsx(XIcon, {})
 			}) : null,
@@ -36,7 +40,7 @@ function AgentActivityPreview({ "aria-label": ariaLabel = "Agent activity", bran
 					children: [/* @__PURE__ */ jsx(NavigationLink, {
 						render: renderAgentLink(item),
 						className: "agent-activity-preview__row",
-						"aria-label": `${item.label}. ${statusLabel(item.status)}. Open agent.`,
+						"aria-label": `${item.action}. ${statusLabel(item.status)}. Open agent.`,
 						"data-status": item.status,
 						children: /* @__PURE__ */ jsx(ActivityHeader, {
 							icon: item.url ? /* @__PURE__ */ jsx(AgentActivityFavicon, {
@@ -44,21 +48,18 @@ function AgentActivityPreview({ "aria-label": ariaLabel = "Agent activity", bran
 								fallbackKind: item.iconKind
 							}) : /* @__PURE__ */ jsx(AgentActivityIcon, { kind: item.iconKind }),
 							isStreaming: item.status === "running",
-							label: item.label,
+							action: item.action,
 							trailing: /* @__PURE__ */ jsxs("span", {
 								className: "agent-activity-preview__trailing",
 								"aria-hidden": "true",
-								children: [item.favicons?.length ? /* @__PURE__ */ jsx("span", {
-									className: "agent-activity-preview__favicons",
-									children: item.favicons.map((favicon) => /* @__PURE__ */ jsx("img", {
+								children: [item.favicons?.length ? /* @__PURE__ */ jsx(AppIcon.Stack, { children: item.favicons.map((favicon) => /* @__PURE__ */ jsxs(AppIcon.Root, {
+									size: "sm",
+									title: favicon.label,
+									children: [/* @__PURE__ */ jsx(AppIcon.Image, {
 										src: favicon.src,
-										alt: "",
-										title: favicon.label,
-										loading: "lazy",
-										decoding: "async",
-										referrerPolicy: "no-referrer"
-									}, `${favicon.src}:${favicon.label}`))
-								}) : null, /* @__PURE__ */ jsx(StatusIcon, { status: item.status })]
+										alt: ""
+									}), /* @__PURE__ */ jsx(AppIcon.Fallback, { children: favicon.label.slice(0, 1) })]
+								}, `${favicon.src}:${favicon.label}`)) }) : null, /* @__PURE__ */ jsx(StatusIcon, { status: item.status })]
 							})
 						})
 					}), item.workspaceDestination && renderWorkspaceFileLink ? /* @__PURE__ */ jsx(NavigationLink, {

package/dist/components/AgentAttention.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-yRInko9u.js";
+import { r as ButtonProps } from "../Button-SBIz6Lqi.js";
 import * as React from "react";
 
 //#region src/components/AgentAttention.d.ts

package/dist/components/AgentChat.d.ts

@@ -1,2 +1,2 @@
-import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-C-ZyXbJz.js";
+import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-Bm1qYbOo.js";
 export { AgentChat, AgentChatComposerDraft, AgentChatProps, AgentChatRenderMessageContext, PermissionModeControl };