@mcp-b/react-components 0.20.4 → 0.21.0

package/dist/components/EmptyState.js

@@ -0,0 +1,50 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/EmptyState.tsx
+/**
+* Placeholder for a region that has nothing in it yet.
+*
+* There is no size prop. A one-line "No results" and a full centred block are
+* the same component with different content — pass only `description` for the
+* first and add `icon` and `title` for the second. Filling and centring a
+* region is the container's job, not this component's; set
+* `--sigvelo-recipe-empty-state-padding-block` where a roomier well is wanted.
+*
+* `children` replaces the whole stack, for the cases that need an action.
+*
+* @example
+* ```tsx
+* <EmptyState description="No runs yet." />
+*
+* <EmptyState
+*   icon={<MessageIcon />}
+*   title="Start a conversation"
+*   description="Ask the agent to inspect, plan, or build."
+* />
+* ```
+*/
+function EmptyState({ className, icon, title, description, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("empty-state", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				className: "empty-state__icon",
+				"aria-hidden": "true",
+				children: icon
+			}) : null,
+			title ? /* @__PURE__ */ jsx("div", {
+				className: "empty-state__title",
+				children: title
+			}) : null,
+			description ? /* @__PURE__ */ jsx("div", {
+				className: "empty-state__description",
+				children: description
+			}) : null
+		] })
+	});
+}
+//#endregion
+export { EmptyState };

package/dist/components/Kbd.d.ts

@@ -0,0 +1,32 @@
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/Kbd.d.ts
+type KbdRenderState = {
+  slot: "kbd";
+};
+interface KbdProps extends useRender.ComponentProps<"kbd", KbdRenderState> {}
+/**
+ * A keyboard key or chord, rendered as a quiet inline chip.
+ *
+ * The chip draws itself from `currentColor`, so it reads correctly on a page
+ * surface, inside a menu row, and on the inverted surface of a tooltip without
+ * a variant prop deciding which. Put one key per element; a chord is several
+ * elements with separators between them, so a screen reader announces the keys
+ * rather than the punctuation.
+ *
+ * @example
+ * ```tsx
+ * <Kbd>⏎</Kbd>
+ * <span>
+ *   <Kbd>⌘</Kbd> <Kbd>K</Kbd>
+ * </span>
+ * ```
+ */
+declare function Kbd({
+  className,
+  render,
+  ref,
+  ...props
+}: KbdProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Kbd, KbdProps };

package/dist/components/Kbd.js

@@ -0,0 +1,34 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Kbd.tsx
+/**
+* A keyboard key or chord, rendered as a quiet inline chip.
+*
+* The chip draws itself from `currentColor`, so it reads correctly on a page
+* surface, inside a menu row, and on the inverted surface of a tooltip without
+* a variant prop deciding which. Put one key per element; a chord is several
+* elements with separators between them, so a screen reader announces the keys
+* rather than the punctuation.
+*
+* @example
+* ```tsx
+* <Kbd>⏎</Kbd>
+* <span>
+*   <Kbd>⌘</Kbd> <Kbd>K</Kbd>
+* </span>
+* ```
+*/
+function Kbd({ className, render, ref, ...props }) {
+	return useRender({
+		defaultTagName: "kbd",
+		render,
+		ref,
+		props: {
+			...props,
+			className: cx("kbd", className)
+		},
+		state: { slot: "kbd" }
+	});
+}
+//#endregion
+export { Kbd };

package/dist/components/MessageScroller.js

@@ -22,6 +22,7 @@ function MessageScroller({ className, ...props }) {
 function MessageScrollerViewport({ className, ...props }) {
 	return /* @__PURE__ */ jsx(MessageScroller$1.Viewport, {
 		"data-slot": "message-scroller-viewport",
+		"data-recipe": "scroll-fade-y",
 		className: cx("message-scroller__viewport", className),
 		...props
 	});

package/dist/components/ModelSelector.d.ts

@@ -243,14 +243,20 @@ declare function ModelSelectorName({
 }: ModelSelectorNameProps & {
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
-interface ModelSelectorShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}
-declare function ModelSelectorShortcut({
+interface ModelSelectorSourceProps extends React.HTMLAttributes<HTMLSpanElement> {}
+/**
+ * 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.
+ */
+declare function ModelSelectorSource({
   className,
   children,
   ref,
   ...props
-}: ModelSelectorShortcutProps & {
+}: ModelSelectorSourceProps & {
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 //#endregion
-export { CloudflareModelCatalogEntry, CloudflareModelCatalogListParams, CloudflareModelSelector, CloudflareModelSelectorModels, CloudflareModelSelectorOption, CloudflareModelSelectorProps, ModelSelector, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorDialog, ModelSelectorDialogProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorInput, ModelSelectorInputProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorLogoGroupProps, ModelSelectorLogoProps, ModelSelectorName, ModelSelectorNameProps, ModelSelectorProps, ModelSelectorSeparator, ModelSelectorSeparatorProps, ModelSelectorShortcut, ModelSelectorShortcutProps, ModelSelectorTrigger, ModelSelectorTriggerProps, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };
+export { CloudflareModelCatalogEntry, CloudflareModelCatalogListParams, CloudflareModelSelector, CloudflareModelSelectorModels, CloudflareModelSelectorOption, CloudflareModelSelectorProps, ModelSelector, ModelSelectorContent, ModelSelectorContentProps, ModelSelectorDialog, ModelSelectorDialogProps, ModelSelectorEmpty, ModelSelectorEmptyProps, ModelSelectorGroup, ModelSelectorGroupProps, ModelSelectorInput, ModelSelectorInputProps, ModelSelectorItem, ModelSelectorItemProps, ModelSelectorList, ModelSelectorListProps, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorLogoGroupProps, ModelSelectorLogoProps, ModelSelectorName, ModelSelectorNameProps, ModelSelectorProps, ModelSelectorSeparator, ModelSelectorSeparatorProps, ModelSelectorSource, ModelSelectorSourceProps, ModelSelectorTrigger, ModelSelectorTriggerProps, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };

package/dist/components/ModelSelector.js

@@ -1,2 +1,2 @@
-import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorShortcut, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-pecWyOFI.js";
-export { CloudflareModelSelector, ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };
+import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorSource, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-CEd8M9eK.js";
+export { CloudflareModelSelector, ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorSource, ModelSelectorTrigger, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };

package/dist/components/PricingBillingToggle.js

@@ -57,6 +57,7 @@ function PricingBillingToggle({ value, onValueChange, yearlySavingsPercent, vari
 				})
 			]
 		}) : /* @__PURE__ */ jsxs(ToggleGroup.Root, {
+			segmented: true,
 			"aria-label": "Billing period",
 			value: [value],
 			onValueChange: (nextValue) => {

package/dist/components/PromptInput.js

@@ -6,6 +6,7 @@ import { t as AttachmentPreview } from "../attachment-preview-DIs50Q0h.js";
 import { n as clamp, r as formatClock } from "../format-S6uWyoSb.js";
 import { Menu } from "./Menu.js";
 import { Combobox } from "./Combobox.js";
+import { Kbd } from "./Kbd.js";
 import { Select } from "./Select.js";
 import { Tabs } from "./Tabs.js";
 import { ThinkExecutionApproval, ThinkPendingApproval, getPausedExecution } from "./ThinkPendingApproval.js";
@@ -481,7 +482,7 @@ function PromptInputButton({ className, tooltip, variant = "ghost", color = "neu
 		children: /* @__PURE__ */ jsxs(Tooltip.Popup, { children: [/* @__PURE__ */ jsx("span", {
 			className: "prompt-input__tooltip-content",
 			children: tooltipConfig.content
-		}), tooltipConfig.shortcut ? /* @__PURE__ */ jsx("kbd", {
+		}), tooltipConfig.shortcut ? /* @__PURE__ */ jsx(Kbd, {
 			className: "prompt-input__tooltip-shortcut",
 			children: tooltipConfig.shortcut
 		}) : null] })
@@ -1238,7 +1239,7 @@ function PromptInputContextSelector({ items, value, onValueChange, categoryLabel
 }
 function defaultSubmitIcon(status) {
 	switch (status) {
-		case "submitted": return /* @__PURE__ */ jsx(SpinnerIcon, { className: "prompt-input__submit-spinner" });
+		case "submitted": return /* @__PURE__ */ jsx(SpinnerIcon, {});
 		case "streaming": return /* @__PURE__ */ jsx(SquareIcon, {});
 		case "error": return /* @__PURE__ */ jsx(WarningIcon, {});
 		default: return /* @__PURE__ */ jsx(ArrowUpIcon, {});

package/dist/components/Reasoning.js

@@ -128,7 +128,7 @@ function ReasoningTrigger({ className, children, getThinkingMessage = defaultGet
 		className: cx("reasoning__trigger", className),
 		"data-streaming": isStreaming ? "" : void 0,
 		icon: children == null && isStreaming ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : void 0,
-		label: children ?? getThinkingMessage(isStreaming, duration),
+		action: children ?? getThinkingMessage(isStreaming, duration),
 		...props
 	});
 }

package/dist/components/StatusPill.d.ts

@@ -0,0 +1,43 @@
+import { BadgeProps } from "./Badge.js";
+import * as React from "react";
+
+//#region src/components/StatusPill.d.ts
+interface StatusPillProps extends BadgeProps {
+  /**
+   * Whether the state this reports is still ongoing. A live state pulses; a
+   * settled one holds still, so "Live" and "Ended" are told apart without
+   * reading either word.
+   */
+  busy?: boolean;
+  /**
+   * Replaces the dot for states that have a picture — a spinner while a run
+   * starts, a check once it lands.
+   */
+  icon?: React.ReactNode;
+}
+/**
+ * A short state report: an indicator, then the state itself.
+ *
+ * This is a `Badge` with an indicator in front, not a second kind of chip, so
+ * `variant`, `color`, and `size` mean here exactly what they mean there. What
+ * it adds is the dot and its pulse, which several surfaces had been writing
+ * out by hand.
+ *
+ * It reports; it does not ask. A state that needs the user to do something is
+ * `AgentAttention`.
+ *
+ * @example
+ * ```tsx
+ * <StatusPill busy color="destructive" size="sm">Live</StatusPill>
+ * <StatusPill color="success" icon={<CheckIcon />}>Passed</StatusPill>
+ * ```
+ */
+declare function StatusPill({
+  busy,
+  className,
+  icon,
+  children,
+  ...props
+}: StatusPillProps): React.JSX.Element;
+//#endregion
+export { StatusPill, StatusPillProps };

package/dist/components/StatusPill.js

@@ -0,0 +1,35 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { Badge } from "./Badge.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/StatusPill.tsx
+/**
+* A short state report: an indicator, then the state itself.
+*
+* This is a `Badge` with an indicator in front, not a second kind of chip, so
+* `variant`, `color`, and `size` mean here exactly what they mean there. What
+* it adds is the dot and its pulse, which several surfaces had been writing
+* out by hand.
+*
+* It reports; it does not ask. A state that needs the user to do something is
+* `AgentAttention`.
+*
+* @example
+* ```tsx
+* <StatusPill busy color="destructive" size="sm">Live</StatusPill>
+* <StatusPill color="success" icon={<CheckIcon />}>Passed</StatusPill>
+* ```
+*/
+function StatusPill({ busy = false, className, icon, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Badge, {
+		className: cx("status-pill", className),
+		"data-busy": busy || void 0,
+		...props,
+		children: [icon ?? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "status-pill__dot"
+		}), children]
+	});
+}
+//#endregion
+export { StatusPill };

package/dist/components/Stepper.js

@@ -71,13 +71,12 @@ function Stepper({ defaultValue = 1, value, onValueChange, orientation = "horizo
 	});
 }
 function StepperNav({ className, ref, ...props }) {
-	const { activeStep, orientation } = useStepper();
+	const { activeStep } = useStepper();
 	return /* @__PURE__ */ jsx(Tabs.List, {
 		ref,
 		className: mergeBaseClassName("stepper__nav", className),
 		"data-active-step": activeStep,
 		"data-slot": "stepper-list",
-		"data-orientation": orientation,
 		unstyled: true,
 		...props
 	});
@@ -191,8 +190,6 @@ function StepperPanel({ className, ref, ...props }) {
 	});
 }
 function StepperContent({ value, forceMount = false, spacing = "none", className, children, ref, ...props }) {
-	const { activeStep } = useStepper();
-	const isActive = activeStep === value;
 	return /* @__PURE__ */ jsx(Tabs.Panel, {
 		ref,
 		value,
@@ -200,7 +197,6 @@ function StepperContent({ value, forceMount = false, spacing = "none", className
 		className: mergeBaseClassName("stepper__content", className),
 		"data-spacing": spacing,
 		"data-slot": "stepper-content",
-		"data-state": isActive ? "active" : "inactive",
 		unstyled: true,
 		...props,
 		children

package/dist/components/TestResults.js

@@ -1,6 +1,7 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
 import { K as SpinnerIcon, et as XIcon, p as ChevronRightIcon, u as CheckIcon } from "../icons-DyOM0EJs.js";
+import { Progress } from "./Progress.js";
 import { Badge } from "./Badge.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -122,22 +123,21 @@ function TestResultsProgress({ className, children, ref, ...props }) {
 		ref,
 		className: cx("test-results__progress", className),
 		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsx(Progress.Root, {
 			"aria-label": "Test progress",
-			"aria-valuemax": summary.total,
-			"aria-valuemin": 0,
-			"aria-valuenow": summary.passed,
-			"aria-valuetext": `${summary.passed}/${summary.total} tests passed, ${summary.failed} failed`,
-			className: "test-results__progress-track",
-			"data-slot": "progress-track",
-			role: "progressbar",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "test-results__progress-segment test-results__progress-segment--passed",
-				style: { inlineSize: `${passedPercent}%` }
-			}), /* @__PURE__ */ jsx("div", {
-				className: "test-results__progress-segment test-results__progress-segment--failed",
-				style: { inlineSize: `${failedPercent}%` }
-			})]
+			value: summary.passed,
+			max: summary.total,
+			getAriaValueText: () => `${summary.passed}/${summary.total} tests passed, ${summary.failed} failed`,
+			children: /* @__PURE__ */ jsxs(Progress.Track, {
+				className: "test-results__progress-track",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "test-results__progress-segment test-results__progress-segment--passed",
+					style: { inlineSize: `${passedPercent}%` }
+				}), /* @__PURE__ */ jsx("div", {
+					className: "test-results__progress-segment test-results__progress-segment--failed",
+					style: { inlineSize: `${failedPercent}%` }
+				})]
+			})
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "test-results__progress-label",
 			children: [

package/dist/components/ThinkChat.d.ts

@@ -1,9 +1,9 @@
 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 { i as useOptionalAgentToolRuns, n as AgentToolRunsProvider, r as AgentToolRunsProviderProps, t as AgentToolEventsValue } from "../AgentToolRunsContext-BVe4stgw.js";
 import { S as isThinkChatActivityPart } from "../ThinkChatToolParts-CSzVwMXf.js";
-import { l as describeThinkChatActivityPart } from "../ThinkChatActivitySummary-D1xOrNrq.js";
-import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-CdbL0aoA.js";
+import { u as describeThinkChatActivityPart } from "../ThinkChatActivitySummary-kr5fE0wg.js";
+import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-FY1VWXgh.js";
 import { n as ThinkChatValue } from "../ThinkChatContext-DrsZqdaO.js";
 import { n as ThinkRecoveryNoticeProps, t as ThinkRecoveryNotice } from "../ThinkRecoveryNotice-DFIcG9UX.js";
 import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-BV5qgFgI.js";
@@ -53,6 +53,8 @@ interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends
   showComposer?: AgentChatProps<MessageT>["showComposer"];
   /** Shown in place of the list while there are no messages. */
   emptyState?: React.ReactNode;
+  /** Welcoming first-turn layout with the live composer centered above starter actions. */
+  startScreen?: AgentChatProps<MessageT>["startScreen"];
   /** Extra controls rendered inside the composer, next to the send button. */
   composerTools?: React.ReactNode;
   /** Host-owned slash-command catalog and selection policy. */
@@ -75,6 +77,10 @@ interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends
   placeholder?: string;
   /** Rendered after each message (e.g. per-message actions). */
   renderMessageAfter?: AgentChatProps<MessageT>["renderMessageAfter"];
+  /** Per-message policy for AgentChat's built-in assistant copy/retry toolbar. */
+  showAssistantActions?: AgentChatProps<MessageT>["showAssistantActions"];
+  /** Overrides which rows anchor at the top when added; user messages are the default. */
+  isMessageScrollAnchor?: AgentChatProps<MessageT>["isMessageScrollAnchor"];
   /**
    * Durable backend edit/resend operation. Think does not synchronize
    * `setMessages`, so wire this to an agent callable that creates the branch.

package/dist/components/ThinkChatActivity.d.ts

@@ -1,4 +1,4 @@
 import { S as isThinkChatActivityPart } from "../ThinkChatToolParts-CSzVwMXf.js";
-import { l as describeThinkChatActivityPart } from "../ThinkChatActivitySummary-D1xOrNrq.js";
-import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-CdbL0aoA.js";
+import { u as describeThinkChatActivityPart } from "../ThinkChatActivitySummary-kr5fE0wg.js";
+import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-FY1VWXgh.js";
 export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, describeThinkChatActivityPart, isThinkChatActivityPart, renderThinkChatActivityPart };

package/dist/components/ThinkChatActivity.js

@@ -17,18 +17,18 @@ function activityPartIcon(part) {
 }
 /**
 * 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.
 */
 function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers }) {
 	const steps = parts.flatMap((part, index) => {
-		const text = describeThinkChatActivityPart(part, toolRenderers);
-		if (!text) return [];
+		const description = describeThinkChatActivityPart(part, toolRenderers);
+		if (!description) return [];
 		return [{
 			key: isToolUIPart(part) ? part.toolCallId : `${part.type}-${index}`,
-			text,
+			description,
 			part
 		}];
 	});
@@ -44,65 +44,77 @@ function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers }) {
 		defaultOpen,
 		children: [/* @__PURE__ */ jsx(ActivityTrigger, {
 			icon: header.url ? /* @__PURE__ */ jsx(AgentActivityFavicon, { url: header.url }) : /* @__PURE__ */ jsx(AgentActivityIcon, { kind: header.iconKind }),
-			label: header.label
+			action: header.action,
+			detail: header.detail
 		}), /* @__PURE__ */ jsx(ActivityContent, { children: steps.map((step) => /* @__PURE__ */ jsx(ThinkChatActivityStep, {
-			text: step.text,
+			description: step.description,
 			part: step.part,
 			toolRenderers
 		}, step.key)) })]
 	});
 }
-function ThinkChatActivityStep({ text, part, toolRenderers }) {
+function ThinkChatActivityStep({ description, part, toolRenderers }) {
 	const icon = activityPartIcon(part);
+	const { action: text, detail } = description;
 	if (isToolUIPart(part)) {
 		const customPanel = toolRenderers?.[getToolName(part)]?.panel?.(part);
 		if (customPanel === null) return /* @__PURE__ */ jsx(ActivityItem, {
 			icon,
+			detail,
 			children: text
 		});
 		if (customPanel !== void 0) return /* @__PURE__ */ jsx(ActivityItemGroup, {
-			label: text,
+			action: text,
+			detail,
 			icon,
 			children: customPanel
 		});
 	}
 	if (isReasoningUIPart(part) && part.text.trim()) return /* @__PURE__ */ jsx(ActivityItemGroup, {
-		label: text,
+		action: text,
+		detail,
 		icon,
 		children: /* @__PURE__ */ jsx(ActivityText, { children: /* @__PURE__ */ jsx(MessageResponse, { children: part.text }) })
 	});
 	if (isWorkspaceToolPart(part) && part.type !== "tool-delete") return /* @__PURE__ */ jsx(ActivityItemGroup, {
-		label: text,
+		action: text,
+		detail,
 		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatWorkspacePanel, { part })
 	});
 	if (isSkillToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
-		label: text,
+		action: text,
+		detail,
 		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatSkillPanel, { part })
 	});
 	if (isSessionContextToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
-		label: text,
+		action: text,
+		detail,
 		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatSessionContextPanel, { part })
 	});
 	if (isFetchToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
-		label: text,
+		action: text,
+		detail,
 		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatFetchPanel, { part })
 	});
 	if (isBrowserToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
-		label: text,
+		action: text,
+		detail,
 		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatBrowserPanel, { part })
 	});
 	if (isExecuteToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
-		label: text,
+		action: text,
+		detail,
 		icon,
 		children: /* @__PURE__ */ jsx(ThinkChatExecutePanel, { part })
 	});
 	return /* @__PURE__ */ jsx(ActivityItem, {
 		icon,
+		detail,
 		children: text
 	});
 }

package/dist/components/ThinkChatActivitySummary.d.ts

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