@mcp-b/react-components 0.20.5 → 0.21.0

package/dist/{AgentActivity-D2SHSGFX.d.ts → AgentActivity-D3OvrC02.d.ts}

@@ -7,7 +7,20 @@ type AgentActivityIconKind = "thought" | "read" | "edit" | "search" | "web" | "c
 /** Safe, serializable presentation state suitable for an Agents SDK state object. */
 interface AgentActivitySummary<CustomIcon extends string = never> {
   mode: AgentActivityMode;
-  label: string;
+  /**
+   * The action phrase, already in the tense the part's state calls for:
+   * "Reading" while the tool runs, "Read" once it settles. Not a whole line —
+   * the thing being acted on belongs in `detail`, so a renderer can set the two
+   * apart. Joining them here is what makes an activity line read as one
+   * undifferentiated string.
+   */
+  action: string;
+  /**
+   * What the action is being applied to: a path, a command, a query. Optional
+   * because aggregate summaries ("Read 2 files and searched code") are a whole
+   * sentence with no target to separate out.
+   */
+  detail?: string;
   iconKind: AgentActivityIconKind | CustomIcon;
   /** Optional presentation hint. Consumers decide whether exposing or fetching it is safe. */
   url?: string;

package/dist/{AgentChat-C-ZyXbJz.d.ts → AgentChat-Dvkn8lce.d.ts}

@@ -1,4 +1,5 @@
 import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-CyD2UB3V.js";
+import { n as AgentChatStartScreenProps } from "./AgentChatStartScreen-CvXJBr4y.js";
 import { $ as PromptInputDictationProps, A as PromptInputCommandDefinition, X as PromptInputContextSelectorProps, gt as PromptInputReference, n as PermissionMode, ut as PromptInputMessage } from "./PromptInput-Cq-8RoXD.js";
 import * as React from "react";
 import { ChatAddToolApproveResponseFunction, ChatStatus, UIMessage } from "ai";
@@ -79,6 +80,13 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   disabled?: boolean;
   /** Rendered in place of the transcript while `messages` is empty. */
   emptyState?: React.ReactNode;
+  /**
+   * First-turn composition that places the live composer between a welcoming
+   * heading and app-authored starter actions. It is the default when messages
+   * are empty and no legacy `emptyState` is supplied. Pass `false` to retain
+   * the transcript-style empty row.
+   */
+  startScreen?: Omit<AgentChatStartScreenProps, "composer" | "className" | "aria-labelledby"> | false;
   /** Extra controls rendered in the composer toolbar. */
   composerTools?: React.ReactNode;
   /** Controlled slash-command catalog and host-owned selection policy. */
@@ -176,6 +184,18 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   renderPart?: (context: AgentMessageRenderPartContext<MessageT>) => React.ReactNode | undefined;
   /** Rendered after each message's parts — for actions, citations, and the like. */
   renderMessageAfter?: (context: AgentChatRenderMessageContext<MessageT>) => React.ReactNode;
+  /**
+   * Per-message policy for the built-in assistant copy/retry toolbar. Use this
+   * for deterministic interactive data messages whose visible UI already owns
+   * its actions, while preserving a hidden model-visible text companion.
+   */
+  showAssistantActions?: (context: AgentChatRenderMessageContext<MessageT>) => boolean;
+  /**
+   * Selects transcript rows that should anchor at the top when they appear.
+   * Defaults to user messages; large deterministic assistant guides can opt in
+   * so their introduction is visible instead of their final action.
+   */
+  isMessageScrollAnchor?: (context: AgentChatRenderMessageContext<MessageT>) => boolean;
 }
 interface AgentChatComposerDraft {
   value: string;
@@ -204,6 +224,7 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   placeholder,
   disabled,
   emptyState,
+  startScreen,
   composerHeader,
   composerTools,
   slashCommands,
@@ -225,6 +246,8 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   contextWindow,
   renderPart,
   renderMessageAfter,
+  showAssistantActions,
+  isMessageScrollAnchor,
   ref
 }: AgentChatProps<MessageT> & {
   ref?: React.Ref<HTMLDivElement>;

package/dist/AgentChatStartScreen-CvXJBr4y.d.ts

@@ -0,0 +1,57 @@
+import { r as ButtonProps } from "./Button-yRInko9u.js";
+import * as React from "react";
+
+//#region src/components/AgentChatStartScreen.d.ts
+interface AgentChatStartScreenProps extends Omit<React.ComponentPropsWithoutRef<"section">, "children" | "title"> {
+  /** The prompt that orients the user before their first message. */
+  heading?: React.ReactNode;
+  /** The one composer owned by `AgentChat`, placed between the heading and starters. */
+  composer: React.ReactNode;
+  /** App-authored starter actions rendered below the composer. */
+  children?: React.ReactNode;
+}
+/**
+ * Welcoming first-turn layout for `AgentChat` and `ThinkChat`.
+ *
+ * `AgentChat` normally creates this component through its `startScreen` prop so
+ * the same live composer moves from the center of the empty view to the pinned
+ * transcript position after the first message.
+ */
+declare function AgentChatStartScreen({
+  heading,
+  composer,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: AgentChatStartScreenProps): React.JSX.Element;
+interface AgentChatStarterListProps extends React.ComponentPropsWithoutRef<"ul"> {}
+/** Semantic list for first-turn prompts below an `AgentChatStartScreen`. */
+declare function AgentChatStarterList({
+  className,
+  ...props
+}: AgentChatStarterListProps): React.JSX.Element;
+interface AgentChatStarterProps extends Omit<ButtonProps, "color" | "iconOnly" | "size" | "variant"> {
+  /** Decorative icon shown before the prompt label. */
+  icon?: React.ReactNode;
+  /** Render the prompt with quieter onboarding emphasis. */
+  muted?: boolean;
+  /** Optional independent action for removing a suggested prompt. */
+  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
+  /** Accessible name for the dismiss action. */
+  dismissLabel?: string;
+}
+/** One full-width, keyboard-native starter prompt. */
+declare function AgentChatStarter({
+  icon,
+  muted,
+  onDismiss,
+  dismissLabel,
+  children,
+  className,
+  type,
+  ...props
+}: AgentChatStarterProps): React.JSX.Element;
+//#endregion
+export { AgentChatStarterListProps as a, AgentChatStarterList as i, AgentChatStartScreenProps as n, AgentChatStarterProps as o, AgentChatStarter as r, AgentChatStartScreen as t };

package/dist/{ModelSelector-pecWyOFI.js → ModelSelector-CEd8M9eK.js}

@@ -4,6 +4,7 @@ import { Button } from "./components/Button.js";
 import { Dialog } from "./components/Dialog.js";
 import { i as titleCase } from "./format-S6uWyoSb.js";
 import { Separator } from "./components/Separator.js";
+import { EmptyState } from "./components/EmptyState.js";
 import { Input } from "./components/Input.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -321,7 +322,7 @@ function CloudflareModelSelector({ models, selectedModelId = null, onSelectModel
 						children: [
 							/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: getCloudflareModelProvider(typedModelId) }),
 							/* @__PURE__ */ jsx(ModelSelectorName, { children: typedModelId }),
-							/* @__PURE__ */ jsx(ModelSelectorShortcut, { children: "Use" })
+							/* @__PURE__ */ jsx(ModelSelectorSource, { children: "Use" })
 						]
 					})
 				}) : null,
@@ -335,7 +336,7 @@ function CloudflareModelSelector({ models, selectedModelId = null, onSelectModel
 						children: [
 							/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: option.provider }),
 							/* @__PURE__ */ jsx(ModelSelectorName, { children: option.id }),
-							/* @__PURE__ */ jsx(ModelSelectorShortcut, { children: option.source === "workers-ai" ? "Workers AI" : "Gateway" })
+							/* @__PURE__ */ jsx(ModelSelectorSource, { children: option.source === "workers-ai" ? "Workers AI" : "Gateway" })
 						]
 					}, option.id))
 				}, group.providerLabel)),
@@ -444,7 +445,7 @@ function ModelSelectorItem({ className, value, keywords, selected, onSelect, chi
 	}) });
 }
 function ModelSelectorEmpty({ className, children = "No models found", ref, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(EmptyState, {
 		ref,
 		className: cx("model-selector__empty", className),
 		...props,
@@ -483,13 +484,19 @@ function ModelSelectorName({ className, children, ref, ...props }) {
 		children
 	});
 }
-function ModelSelectorShortcut({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("kbd", {
+/**
+* Where a model comes from — "Workers AI", "Gateway" — shown at the end of its
+* row. This was a `<kbd>` named `ModelSelectorSource`, which announced
+* "Workers AI" to a screen reader as keyboard input and offered a shortcut
+* that does not exist.
+*/
+function ModelSelectorSource({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
 		ref,
-		className: cx("model-selector__shortcut", className),
+		className: cx("model-selector__source", className),
 		...props,
 		children
 	});
 }
 //#endregion
-export { getCloudflareModelProvider as _, ModelSelectorEmpty as a, normalizeCloudflareModelSelectorModels as b, ModelSelectorItem as c, ModelSelectorLogoGroup as d, ModelSelectorName as f, formatCloudflareModelProvider as g, ModelSelectorTrigger as h, ModelSelectorDialog as i, ModelSelectorList as l, ModelSelectorShortcut as m, ModelSelector as n, ModelSelectorGroup as o, ModelSelectorSeparator as p, ModelSelectorContent as r, ModelSelectorInput as s, CloudflareModelSelector as t, ModelSelectorLogo as u, isCloudflareRunnableModelId as v, readCloudflareModelId as x, listCloudflareModelSelectorOptions as y };
+export { getCloudflareModelProvider as _, ModelSelectorEmpty as a, normalizeCloudflareModelSelectorModels as b, ModelSelectorItem as c, ModelSelectorLogoGroup as d, ModelSelectorName as f, formatCloudflareModelProvider as g, ModelSelectorTrigger as h, ModelSelectorDialog as i, ModelSelectorList as l, ModelSelectorSource as m, ModelSelector as n, ModelSelectorGroup as o, ModelSelectorSeparator as p, ModelSelectorContent as r, ModelSelectorInput as s, CloudflareModelSelector as t, ModelSelectorLogo as u, isCloudflareRunnableModelId as v, readCloudflareModelId as x, listCloudflareModelSelectorOptions as y };

package/dist/{ThinkChatActivity-CdbL0aoA.d.ts → ThinkChatActivity-FY1VWXgh.d.ts}

@@ -1,6 +1,7 @@
 import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-CyD2UB3V.js";
-import { r as AgentChatProps } from "./AgentChat-C-ZyXbJz.js";
+import { r as AgentChatProps } from "./AgentChat-Dvkn8lce.js";
 import { l as ThinkChatPart } from "./ThinkChatToolParts-CSzVwMXf.js";
+import { t as ThinkChatActivityDescription } from "./ThinkChatActivitySummary-kr5fE0wg.js";
 import * as React from "react";
 import { DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";
 import { AgentToolRunState } from "agents/agent-tools";
@@ -9,11 +10,11 @@ import { AgentToolRunState } from "agents/agent-tools";
 /**
  * Bespoke rendering for one tool inside the activity log. Both hooks fall
  * through to the built-in families when they return `undefined`, so an
- * override can adjust just the label or just the panel.
+ * override can adjust just the action or just the panel.
  */
 interface ThinkChatToolRenderer {
-  /** One-line step label. `null` hides the step from the log. */
-  describe?: (part: ToolUIPart | DynamicToolUIPart) => string | null | undefined;
+  /** One-line step action. `null` hides the step from the log. */
+  describe?: (part: ToolUIPart | DynamicToolUIPart) => ThinkChatActivityDescription | null | undefined;
   /** Expanded detail under the step. `null` keeps the step a plain row. */
   panel?: (part: ToolUIPart | DynamicToolUIPart) => React.ReactNode;
 }
@@ -26,7 +27,7 @@ interface ThinkChatActivityRendererOptions<MessageT extends UIMessage = UIMessag
    * with custom UI, use `toolRenderers` instead.
    */
   excludeTools?: readonly string[];
-  /** Per-tool label/panel overrides inside the activity log, keyed by tool name. */
+  /** Per-tool action/panel overrides inside the activity log, keyed by tool name. */
   toolRenderers?: ThinkChatToolRenderers;
   /** App-authored TanStack Router Link for each retained child destination. */
   renderAgentToolRunLink?: (run: AgentToolRunState<MessageT["parts"][number]>) => React.ReactElement;
@@ -37,12 +38,12 @@ interface ThinkChatActivityProps {
   parts: readonly ThinkChatPart[];
   /** Defaults to deriving from part states (reasoning streaming, tool awaiting output). */
   isStreaming?: boolean;
-  /** Per-tool label/panel overrides, keyed by tool name. */
+  /** Per-tool action/panel overrides, keyed by tool name. */
   toolRenderers?: ThinkChatToolRenderers;
 }
 /**
  * One run of agent work as a collapsed Activity block: while streaming the
- * label shimmers with the live step; settled, it becomes a short summary
+ * action shimmers with the live step; settled, it becomes a short summary
  * ("Thought, read 2 files and ran a command") over an expandable step log
  * with per-tool panels. Normally reached through `ThinkChat.Messages`;
  * exported for apps that lay out messages themselves.

package/dist/{ThinkChatActivitySummary-D1xOrNrq.d.ts → ThinkChatActivitySummary-kr5fE0wg.d.ts}

@@ -1,22 +1,31 @@
-import { i as AgentActivityIconKind, s as AgentActivitySummary } from "./AgentActivity-D2SHSGFX.js";
+import { i as AgentActivityIconKind, s as AgentActivitySummary } from "./AgentActivity-D3OvrC02.js";
 import { l as ThinkChatPart } from "./ThinkChatToolParts-CSzVwMXf.js";
 import { DynamicToolUIPart, ToolUIPart } from "ai";
 
 //#region src/components/ThinkChatActivitySummary.d.ts
 interface ThinkChatToolDescriber {
-  describe?: (part: ToolUIPart | DynamicToolUIPart) => string | null | undefined;
+  describe?: (part: ToolUIPart | DynamicToolUIPart) => ThinkChatActivityDescription | null | undefined;
 }
 type ThinkChatToolDescribers = Record<string, ThinkChatToolDescriber>;
 type ThinkChatActivityHeader = Omit<AgentActivitySummary, "mode">;
+/**
+ * A described step, kept in two pieces so the renderer can set the action apart
+ * from what it acted on. Describers that produce a whole sentence — aggregate
+ * summaries, failures — leave `detail` off and put everything in `action`.
+ */
+interface ThinkChatActivityDescription {
+  action: string;
+  detail?: string;
+}
 declare function activityPartUrl(part: ThinkChatPart): string | null;
 declare function activityPartIconKind(part: ThinkChatPart): AgentActivityIconKind;
 /**
- * One-line natural-language label for an activity part ("Ran vp test",
+ * One-line natural-language action for an activity part ("Ran vp test",
  * "Fetched developers.cloudflare.com/agents/"); `null` for boundaries that
  * aren't steps (step-start). Exported so a custom `renderPart` can reuse the
  * built-in labels for tools it doesn't override.
  */
-declare function describeThinkChatActivityPart(part: ThinkChatPart, toolRenderers?: ThinkChatToolDescribers): string | null;
+declare function describeThinkChatActivityPart(part: ThinkChatPart, toolRenderers?: ThinkChatToolDescribers): ThinkChatActivityDescription | null;
 declare function summarizeActivitySteps(parts: readonly ThinkChatPart[]): string;
 interface ThinkChatToolLifecycleSnapshot {
   toolName: string;
@@ -36,4 +45,4 @@ declare function deriveThinkChatActivityHeader(parts: readonly ThinkChatPart[],
  */
 declare function deriveThinkChatToolLifecycleHeader(snapshot: ThinkChatToolLifecycleSnapshot): ThinkChatActivityHeader;
 //#endregion
-export { activityPartIconKind as a, deriveThinkChatToolLifecycleHeader as c, ThinkChatToolLifecycleSnapshot as i, describeThinkChatActivityPart as l, ThinkChatToolDescriber as n, activityPartUrl as o, ThinkChatToolDescribers as r, deriveThinkChatActivityHeader as s, ThinkChatActivityHeader as t, summarizeActivitySteps as u };
+export { ThinkChatToolLifecycleSnapshot as a, deriveThinkChatActivityHeader as c, summarizeActivitySteps as d, ThinkChatToolDescribers as i, deriveThinkChatToolLifecycleHeader as l, ThinkChatActivityHeader as n, activityPartIconKind as o, ThinkChatToolDescriber as r, activityPartUrl as s, ThinkChatActivityDescription as t, describeThinkChatActivityPart as u };

package/dist/{ToggleGroup-DNd6cDJZ.d.ts → ToggleGroup-BW1jrhAF.d.ts}

@@ -13,6 +13,15 @@ interface ToggleGroupProps extends React.ComponentPropsWithRef<typeof ToggleGrou
    */
   size?: ToggleGroupSize;
   spacing?: number;
+  /**
+   * Draws one shared thumb that slides between segments rather than lighting up
+   * each item's own background. This is the permission-mode / view-switch
+   * control; it is a presentation of this group, not a separate component.
+   *
+   * Only meaningful for single selection — a sliding thumb cannot be in two
+   * places, so a `multiple` group ignores it.
+   */
+  segmented?: boolean;
 }
 interface ToggleGroupItemProps extends React.ComponentPropsWithRef<typeof Toggle>, Omit<ToggleVariantsOptions, "className"> {}
 /**
@@ -43,6 +52,7 @@ interface ToggleGroupItemProps extends React.ComponentPropsWithRef<typeof Toggle
 declare function ToggleGroupRoot({
   size,
   spacing,
+  segmented,
   variant,
   className,
   children,

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

@@ -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/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

@@ -36,7 +36,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,7 +44,7 @@ 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",

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-Dvkn8lce.js";
 export { AgentChat, AgentChatComposerDraft, AgentChatProps, AgentChatRenderMessageContext, PermissionModeControl };