@mcp-b/react-components 0.20.5 → 0.21.0

package/dist/components/ThinkChatActivitySummary.js

@@ -3,12 +3,22 @@ import { displayUrl, getToolDisplayName, isBrowserToolPart, isExecuteToolPart, i
 import { t as summarizeToolInput } from "../summarize-tool-input-CqTcGRYy.js";
 import { getToolName, isReasoningUIPart, isToolUIPart } from "ai";
 //#region src/components/ThinkChatActivitySummary.ts
+function described(action, detail) {
+	return detail ? {
+		action,
+		detail
+	} : { action };
+}
 const ACTIVITY_HEADER_LABEL_MAX_LENGTH = 240;
+function bounded(text) {
+	if (text.length <= ACTIVITY_HEADER_LABEL_MAX_LENGTH) return text;
+	return `${text.slice(0, ACTIVITY_HEADER_LABEL_MAX_LENGTH - 1).trimEnd()}…`;
+}
 function boundedActivityHeader(header) {
-	if (header.label.length <= ACTIVITY_HEADER_LABEL_MAX_LENGTH) return header;
 	return {
 		...header,
-		label: `${header.label.slice(0, ACTIVITY_HEADER_LABEL_MAX_LENGTH - 1).trimEnd()}…`
+		action: bounded(header.action),
+		...header.detail ? { detail: bounded(header.detail) } : {}
 	};
 }
 function getToolInput(part) {
@@ -100,9 +110,7 @@ function genericToolPresentation(part, hasUrl) {
 }
 function describeGenericToolPart(part) {
 	const labels = genericToolPresentation(part, activityPartUrl(part) !== null);
-	const label = isPartFailed(part) ? labels.failed : isPartWorking(part) ? labels.working : labels.done;
-	const detail = summarizeToolInput(getToolInput(part));
-	return detail ? `${label} · ${detail}` : label;
+	return described(isPartFailed(part) ? labels.failed : isPartWorking(part) ? labels.working : labels.done, summarizeToolInput(getToolInput(part)));
 }
 function activityPartUrl(part) {
 	if (isFetchToolPart(part)) return firstHttpUrl(part.input?.url ?? part.input?.path);
@@ -151,7 +159,7 @@ function activityPartWorkspaceDestination(part) {
 	}
 }
 /**
-* 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.
@@ -159,12 +167,12 @@ function activityPartWorkspaceDestination(part) {
 function describeThinkChatActivityPart(part, toolRenderers) {
 	if (isToolUIPart(part)) {
 		const custom = toolRenderers?.[getToolName(part)]?.describe?.(part);
-		if (custom !== void 0) return custom;
+		if (custom !== void 0) return custom ?? null;
 	}
 	if (isReasoningUIPart(part)) {
 		const snippet = summarizeReasoningTitle(part.text);
-		const label = part.state === "streaming" ? "Thinking…" : "Thought";
-		return snippet ?? label;
+		const action = part.state === "streaming" ? "Thinking…" : "Thought";
+		return described(snippet ?? action);
 	}
 	if (isWorkspaceToolPart(part)) return describeWorkspaceToolPart(part);
 	if (isSkillToolPart(part)) return describeSkillToolPart(part);
@@ -183,88 +191,83 @@ function describeWorkspaceToolPart(part) {
 	const failed = isPartFailed(part);
 	if (part.type === "tool-bash") {
 		const command = part.input?.script?.trim() ?? "";
-		if (failed) return command ? `Command failed · ${command}` : "Command failed";
+		if (failed) return described("Command failed", command);
 		const verb = working ? "Running" : "Ran";
-		return command ? `${verb} ${command}` : `${verb} a command`;
+		return command ? described(verb, command) : described(`${verb} a command`);
 	}
-	const label = (() => {
+	const { action, detail } = (() => {
 		switch (part.type) {
-			case "tool-read": return `${working ? "Reading" : "Read"} ${basename(part.input?.path) ?? "a file"}`;
-			case "tool-write": return `${working ? "Writing" : "Wrote"} ${basename(part.input?.path) ?? "a file"}`;
-			case "tool-edit": return `${working ? "Editing" : "Edited"} ${basename(part.input?.path) ?? "a file"}`;
-			case "tool-delete": return `${working ? "Deleting" : "Deleted"} ${part.input?.path || "a file"}`;
+			case "tool-read": return described(working ? "Reading" : "Read", basename(part.input?.path) ?? "a file");
+			case "tool-write": return described(working ? "Writing" : "Wrote", basename(part.input?.path) ?? "a file");
+			case "tool-edit": return described(working ? "Editing" : "Edited", basename(part.input?.path) ?? "a file");
+			case "tool-delete": return described(working ? "Deleting" : "Deleted", part.input?.path || "a file");
 			case "tool-list": {
 				const path = part.input?.path;
-				return `${working ? "Listing" : "Listed"} ${path && path !== "/" ? path : "files"}`;
+				return described(working ? "Listing" : "Listed", path && path !== "/" ? path : "files");
 			}
-			case "tool-find": return `${working ? "Searching" : "Searched"} for ${part.input?.pattern || "files"}`;
-			case "tool-grep": return `${working ? "Searching" : "Searched"} for ${part.input?.query || "text"}`;
+			case "tool-find": return described(working ? "Searching" : "Searched", `for ${part.input?.pattern || "files"}`);
+			case "tool-grep": return described(working ? "Searching" : "Searched", `for ${part.input?.query || "text"}`);
 		}
 	})();
-	return failed ? `${label} · failed` : label;
+	return failed ? described(`${action} ${detail ?? ""}`.trim() + " · failed") : described(action, detail);
 }
 function describeSkillToolPart(part) {
 	const working = isPartWorking(part);
 	const failed = isPartFailed(part);
-	const label = (() => {
+	const { action, detail } = (() => {
 		switch (part.type) {
 			case "tool-activate_skill": {
 				const name = part.input?.name;
-				return `${working ? "Using" : "Used"} ${name ? `the ${name} skill` : "a skill"}`;
+				return described(working ? "Using" : "Used", name ? `the ${name} skill` : "a skill");
 			}
-			case "tool-read_skill_resource": return `${working ? "Reading" : "Read"} ${part.input?.path ?? "a skill resource"}`;
-			case "tool-run_skill_script": return `${working ? "Running" : "Ran"} ${part.input?.path ?? "a skill script"}`;
+			case "tool-read_skill_resource": return described(working ? "Reading" : "Read", part.input?.path ?? "a skill resource");
+			case "tool-run_skill_script": return described(working ? "Running" : "Ran", part.input?.path ?? "a skill script");
 		}
 	})();
-	return failed ? `${label} · failed` : label;
+	return failed ? described(`${action} ${detail ?? ""}`.trim() + " · failed") : described(action, detail);
 }
 function describeSessionContextToolPart(part) {
 	const working = isPartWorking(part);
 	const failed = isSessionContextToolFailure(part);
-	const label = (() => {
+	const { action, detail } = (() => {
 		switch (part.type) {
-			case "tool-set_context": {
-				const target = part.input?.label ? ` ${part.input.label}` : " context";
-				return `${working ? "Updating" : "Updated"}${target}`;
-			}
-			case "tool-load_context": return `${working ? "Loading" : "Loaded"} ${part.input?.key ?? "context"}`;
-			case "tool-unload_context": return `${working ? "Unloading" : "Unloaded"} ${part.input?.key ?? "context"}`;
-			case "tool-search_context": return `${working ? "Searching" : "Searched"} ${part.input?.label ?? "context"}`;
-			case "tool-session_search": return `${working ? "Searching" : "Searched"} conversations`;
+			case "tool-set_context": return described(working ? "Updating" : "Updated", part.input?.label || "context");
+			case "tool-load_context": return described(working ? "Loading" : "Loaded", part.input?.key ?? "context");
+			case "tool-unload_context": return described(working ? "Unloading" : "Unloaded", part.input?.key ?? "context");
+			case "tool-search_context": return described(working ? "Searching" : "Searched", part.input?.label ?? "context");
+			case "tool-session_search": return described(working ? "Searching" : "Searched", "conversations");
 		}
 	})();
-	return failed ? `${label} · failed` : label;
+	return failed ? described(`${action} ${detail ?? ""}`.trim() + " · failed") : described(action, detail);
 }
 function describeBrowserToolPart(part) {
 	const working = isPartWorking(part);
 	const failed = isPartFailed(part);
 	if (part.type === "tool-browser_execute") {
 		const output = part.state === "output-available" ? part.output : void 0;
-		if (failed || output?.status === "error") return "Browser automation failed";
-		if (output?.status === "paused") return isHumanWaitPause(output) ? "Browser waiting for human" : "Browser waiting for approval";
-		return working ? "Using the browser" : "Used the browser";
+		if (failed || output?.status === "error") return described("Browser automation failed");
+		if (output?.status === "paused") return described(isHumanWaitPause(output) ? "Browser waiting for human" : "Browser waiting for approval");
+		return described(working ? "Using the browser" : "Used the browser");
 	}
 	const page = displayUrl(part.input?.url) || "a page";
-	const label = (() => {
+	const { action, detail } = (() => {
 		switch (part.type) {
-			case "tool-browser_extract": return `${working ? "Extracting" : "Extracted"} data from ${page}`;
-			case "tool-browser_links": return `${working ? "Listing" : "Listed"} links on ${page}`;
-			case "tool-browser_scrape": return `${working ? "Scraping" : "Scraped"} ${page}`;
-			default: return `${working ? "Browsing" : "Browsed"} ${page}`;
+			case "tool-browser_extract": return described(working ? "Extracting data" : "Extracted data", `from ${page}`);
+			case "tool-browser_links": return described(working ? "Listing links" : "Listed links", `on ${page}`);
+			case "tool-browser_scrape": return described(working ? "Scraping" : "Scraped", page);
+			default: return described(working ? "Browsing" : "Browsed", page);
 		}
 	})();
-	return failed ? `${label} · failed` : label;
+	return failed ? described(`${action} ${detail ?? ""}`.trim() + " · failed") : described(action, detail);
 }
 function describeExecuteToolPart(part) {
 	const output = part.state === "output-available" ? part.output : void 0;
-	if (output?.status === "paused") return isHumanWaitPause(output) ? "Code waiting for human" : "Code waiting for approval";
+	if (output?.status === "paused") return described(isHumanWaitPause(output) ? "Code waiting for human" : "Code waiting for approval");
 	const explicitSummary = part.input ? Reflect.get(part.input, "summary") : void 0;
 	const summary = typeof explicitSummary === "string" ? summarizeToolInput({ summary: explicitSummary }) : null;
-	if (summary) return summary;
-	if (isPartFailed(part) || output?.status === "error") return "Code failed";
-	const label = isPartWorking(part) ? "Running code" : "Ran code";
-	const snippet = summarizeToolInput(part.input);
-	return snippet ? `${label} · ${snippet}` : label;
+	if (summary) return described(summary);
+	if (isPartFailed(part) || output?.status === "error") return described("Code failed");
+	return described(isPartWorking(part) ? "Running code" : "Ran code", summarizeToolInput(part.input));
 }
 function summarizeReasoningTitle(text) {
 	const line = text.split("\n").find((candidate) => candidate.trim())?.trim();
@@ -279,9 +282,9 @@ function isHumanWaitPause(output) {
 function describeFetchToolPart(part) {
 	const target = part.input?.url ?? part.input?.path ?? "";
 	const output = part.state === "output-available" ? part.output : void 0;
-	if (isPartFailed(part) || output?.ok === false) return target ? `Fetch failed · ${target}` : "Fetch failed";
+	if (isPartFailed(part) || output?.ok === false) return described("Fetch failed", target);
 	const verb = isPartWorking(part) ? "Fetching" : "Fetched";
-	return target ? `${verb} ${target}` : `${verb} a URL`;
+	return target ? described(verb, target) : described(`${verb} a URL`);
 }
 function summarizeActivitySteps(parts) {
 	const byTool = /* @__PURE__ */ new Map();
@@ -344,38 +347,38 @@ function summarizeActivitySteps(parts) {
 }
 /** Derive the serializable collapsed header from persisted AI SDK message parts. */
 function deriveThinkChatActivityHeader(parts, options = {}) {
-	const described = parts.flatMap((part) => {
-		const label = describeThinkChatActivityPart(part, options.toolDescribers);
-		return label ? [{
-			label,
+	const steps = parts.flatMap((part) => {
+		const description = describeThinkChatActivityPart(part, options.toolDescribers);
+		return description ? [{
+			description,
 			part
 		}] : [];
 	});
-	if (described.length === 0) return null;
+	if (steps.length === 0) return null;
 	if (options.isStreaming ?? parts.some(isPartWorking)) {
-		const latest = described.at(-1);
+		const latest = steps.at(-1);
 		const workspaceDestination = activityPartWorkspaceDestination(latest.part);
 		return boundedActivityHeader({
-			label: latest.label,
+			...latest.description,
 			iconKind: activityPartIconKind(latest.part),
 			...activityPartUrl(latest.part) ? { url: activityPartUrl(latest.part) } : {},
 			...workspaceDestination ? { workspaceDestination } : {}
 		});
 	}
 	if (parts.some((part) => isToolUIPart(part) && isPartFailed(part))) return boundedActivityHeader({
-		label: summarizeActivitySteps(parts),
+		action: summarizeActivitySteps(parts),
 		iconKind: "approval"
 	});
 	const workspaceRepresentative = parts.find((part) => activityPartIconKind(part) === "edit" && activityPartWorkspaceDestination(part)) ?? parts.find((part) => activityPartWorkspaceDestination(part));
 	const workspaceDestination = workspaceRepresentative ? activityPartWorkspaceDestination(workspaceRepresentative) : null;
 	const representative = parts.find((part) => activityPartIconKind(part) === "edit") ?? parts.find((part) => activityPartUrl(part)) ?? parts.find((part) => describeThinkChatActivityPart(part));
 	if (!representative) return boundedActivityHeader({
-		label: summarizeActivitySteps(parts),
+		action: summarizeActivitySteps(parts),
 		iconKind: "tool"
 	});
 	const url = activityPartUrl(representative);
 	return boundedActivityHeader({
-		label: summarizeActivitySteps(parts),
+		action: summarizeActivitySteps(parts),
 		iconKind: activityPartIconKind(representative),
 		...url ? { url } : {},
 		...workspaceDestination ? { workspaceDestination } : {}
@@ -387,14 +390,14 @@ function deriveThinkChatActivityHeader(parts, options = {}) {
 */
 function deriveThinkChatToolLifecycleHeader(snapshot) {
 	if (snapshot.state === "approval-required") return boundedActivityHeader({
-		label: "Approval needed",
+		action: "Approval needed",
 		iconKind: "approval"
 	});
 	const part = lifecycleSnapshotToToolPart(snapshot);
 	const url = activityPartUrl(part);
 	const workspaceDestination = activityPartWorkspaceDestination(part);
 	return boundedActivityHeader({
-		label: describeThinkChatActivityPart(part) ?? "Used a tool",
+		...describeThinkChatActivityPart(part) ?? described("Used a tool"),
 		iconKind: activityPartIconKind(part),
 		...url ? { url } : {},
 		...workspaceDestination ? { workspaceDestination } : {}

package/dist/components/ThinkExecutionDetail.js

@@ -38,7 +38,7 @@ function ThinkExecutionDetail({ className, emptyState = "Select a run to view it
 			defaultOpen: true,
 			children: [/* @__PURE__ */ jsx(ActivityTrigger, {
 				icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
-				label: "Activity"
+				action: "Activity"
 			}), /* @__PURE__ */ jsxs(ActivityContent, { children: [
 				/* @__PURE__ */ jsx(ActivityItem, {
 					icon: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
@@ -54,7 +54,7 @@ function ThinkExecutionDetail({ className, emptyState = "Select a run to view it
 				}) : null,
 				error ? /* @__PURE__ */ jsx(ActivityItemGroup, {
 					icon: /* @__PURE__ */ jsx(XIcon, {}),
-					label: "Failure",
+					action: "Failure",
 					children: /* @__PURE__ */ jsx(ActivityPanel, {
 						label: "Error",
 						text: error,
@@ -64,12 +64,12 @@ function ThinkExecutionDetail({ className, emptyState = "Select a run to view it
 				}) : null,
 				run.metadata ? /* @__PURE__ */ jsx(ActivityItemGroup, {
 					icon: /* @__PURE__ */ jsx(InfoIcon, {}),
-					label: "Metadata",
+					action: "Metadata",
 					children: /* @__PURE__ */ jsx(ActivityOutput, { children: formatJson(run.metadata) })
 				}) : null,
 				/* @__PURE__ */ jsx(ActivityItemGroup, {
 					icon: /* @__PURE__ */ jsx(FileIcon, {}),
-					label: "Raw record",
+					action: "Raw record",
 					children: /* @__PURE__ */ jsx(ActivityOutput, { children: formatJson(run) })
 				})
 			] })]

package/dist/components/ThinkExecutionWorkbench.js

@@ -3,6 +3,7 @@ import { U as RefreshIcon, y as EllipsisIcon } from "../icons-DyOM0EJs.js";
 import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
 import { Button, buttonVariants } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
+import { EmptyState } from "./EmptyState.js";
 import { Menu } from "./Menu.js";
 import { AppTopBar } from "./AppTopBar.js";
 import { formatThinkExecutionRunProgress, getThinkExecutionRunAccessibleName, getThinkExecutionRunId, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone, getThinkExecutionRunSubtitle, getThinkExecutionRunTitle, isSameThinkExecutionRun, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
@@ -188,13 +189,13 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 							id: runsId,
 							children: "Runs"
 						})
-					}), runsQuery.isPending && runs.length === 0 ? /* @__PURE__ */ jsx("p", {
+					}), runsQuery.isPending && runs.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
 						className: "think-execution-workbench__empty",
 						role: "status",
-						children: "Loading runs..."
-					}) : runs.length === 0 ? /* @__PURE__ */ jsx("p", {
+						description: "Loading runs..."
+					}) : runs.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
 						className: "think-execution-workbench__empty",
-						children: "No runs yet."
+						description: "No runs yet."
 					}) : /* @__PURE__ */ jsx("ul", {
 						className: "think-execution-workbench__list",
 						role: "list",

package/dist/components/ThinkFullAppViewSwitch.d.ts

@@ -1,4 +1,4 @@
-import { r as ToggleGroupProps } from "../ToggleGroup-DNd6cDJZ.js";
+import { r as ToggleGroupProps } from "../ToggleGroup-BW1jrhAF.js";
 import * as React from "react";
 
 //#region src/components/ThinkFullAppViewSwitch.d.ts

package/dist/components/ThinkRoutineBrowser.js

@@ -36,6 +36,7 @@ function ThinkRoutineBrowser({ className, routines, selectedRoutineId, showOwner
 			/* @__PURE__ */ jsxs("div", {
 				className: "think-routine-library__browser-toolbar",
 				children: [/* @__PURE__ */ jsx(ToggleGroup.Root, {
+					segmented: true,
 					className: "think-routine-library__filters",
 					size: "sm",
 					"aria-label": "Filter schedules",

package/dist/components/ThinkRoutineRuns.js

@@ -1,6 +1,7 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
 import { buttonVariants } from "./Button.js";
+import { EmptyState } from "./EmptyState.js";
 import { Badge } from "./Badge.js";
 import { formatThinkExecutionShortTimestamp, getThinkExecutionRunId, getThinkExecutionRunStatus, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionStatus } from "./ThinkExecutionStatus.js";
@@ -65,9 +66,9 @@ function ThinkRoutineRuns({ className, runs, title = "Recent runs", emptyState =
 					})
 				}, `${kind}:${getThinkExecutionRunId(run)}`);
 			})
-		}) : /* @__PURE__ */ jsx("p", {
+		}) : /* @__PURE__ */ jsx(EmptyState, {
 			className: "think-routine-library__empty-runs",
-			children: emptyState
+			description: emptyState
 		})]
 	});
 }

package/dist/components/ThinkThreadPicker.js

@@ -2,6 +2,7 @@ import { t as cx } from "../class-names-BiMDVpUo.js";
 import { K as SpinnerIcon, Q as WarningIcon, V as PlusIcon, _ as DotIcon, t as ArchiveIcon } from "../icons-DyOM0EJs.js";
 import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
 import { Button, buttonVariants } from "./Button.js";
+import { EmptyState } from "./EmptyState.js";
 import { SearchField } from "./SearchField.js";
 import { AlertDialog } from "./AlertDialog.js";
 import { ScrollArea } from "./ScrollArea.js";
@@ -247,9 +248,9 @@ function ThinkThreadPicker({ threads, renderThreadLink, onCreate, onDelete, clas
 									}) : null]
 								}, thread.id);
 							})
-						}) : /* @__PURE__ */ jsx("p", {
+						}) : /* @__PURE__ */ jsx(EmptyState, {
 							className: "think-thread-picker__empty",
-							children: threads.length ? "No matching threads." : "No threads yet."
+							description: threads.length ? "No matching threads." : "No threads yet."
 						})
 					}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
 						orientation: "vertical",

package/dist/components/ToggleGroup.d.ts

@@ -1,2 +1,2 @@
-import { n as ToggleGroupItemProps, r as ToggleGroupProps, t as ToggleGroup } from "../ToggleGroup-DNd6cDJZ.js";
+import { n as ToggleGroupItemProps, r as ToggleGroupProps, t as ToggleGroup } from "../ToggleGroup-BW1jrhAF.js";
 export { ToggleGroup, ToggleGroupItemProps, ToggleGroupProps };

package/dist/components/ToggleGroup.js

@@ -1,10 +1,52 @@
 import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
+import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import { toggleVariants } from "./Toggle.js";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/ToggleGroup.tsx
+/**
+* Tracks the pressed item's box so the segmented thumb can slide to it instead
+* of appearing under it.
+*
+* The measurement is here because CSS cannot do it. Anchor positioning places
+* the thumb correctly but teleports: `inset: anchor(...)` keeps the same
+* computed value when the anchor changes, and transitions run on computed
+* values. Counting siblings with `:has()` slides, but only while every segment
+* is the same width, which stops being true the moment one label is longer.
+*
+* `offsetLeft` is physical, so the thumb is placed with `left` rather than
+* `inset-inline-start` — a logical property fed a physical number lands on the
+* wrong side in RTL.
+*/
+function useSegmentedThumb(enabled) {
+	const ref = React.useRef(null);
+	React.useLayoutEffect(() => {
+		const root = ref.current;
+		if (!enabled || !root) return;
+		const measure = () => {
+			const pressed = root.querySelector("[data-pressed]");
+			if (!pressed) return;
+			root.style.setProperty("--toggle-group-thumb-start", `${pressed.offsetLeft}px`);
+			root.style.setProperty("--toggle-group-thumb-size", `${pressed.offsetWidth}px`);
+		};
+		measure();
+		const attributes = new MutationObserver(measure);
+		attributes.observe(root, {
+			attributes: true,
+			attributeFilter: ["data-pressed"],
+			subtree: true
+		});
+		const resize = new ResizeObserver(measure);
+		resize.observe(root);
+		return () => {
+			attributes.disconnect();
+			resize.disconnect();
+		};
+	}, [enabled]);
+	return ref;
+}
 const ToggleGroupContext = React.createContext({
 	variant: "default",
 	size: "md",
@@ -35,7 +77,9 @@ const ToggleGroupContext = React.createContext({
 *
 * @see {@link https://base-ui.com/react/components/toggle-group | Base UI Toggle Group}
 */
-function ToggleGroupRoot({ size = "md", spacing = 0, variant = "default", className, children, style, ref, ...props }) {
+function ToggleGroupRoot({ size = "md", spacing = 0, segmented = false, variant = "default", className, children, style, ref, ...props }) {
+	const slidesThumb = segmented && !props.multiple;
+	const thumbRef = useSegmentedThumb(slidesThumb);
 	const gap = `${spacing * .25}rem`;
 	const groupStyle = typeof style === "function" ? (state) => ({
 		...style(state),
@@ -44,7 +88,7 @@ function ToggleGroupRoot({ size = "md", spacing = 0, variant = "default", classN
 		...style,
 		gap
 	};
-	const classes = mergeBaseClassName(cx("toggle-group", size !== "md" && `toggle-group--${size}`), className);
+	const classes = mergeBaseClassName(cx("toggle-group", size !== "md" && `toggle-group--${size}`, slidesThumb && "toggle-group--segmented"), className);
 	const contextValue = React.useMemo(() => ({
 		variant,
 		size,
@@ -54,8 +98,8 @@ function ToggleGroupRoot({ size = "md", spacing = 0, variant = "default", classN
 		spacing,
 		variant
 	]);
-	return /* @__PURE__ */ jsx(ToggleGroup$1, {
-		ref,
+	return /* @__PURE__ */ jsxs(ToggleGroup$1, {
+		ref: mergeRefs(ref, thumbRef),
 		"data-size": size,
 		"data-slot": "toggle-group",
 		"data-spacing": spacing,
@@ -63,10 +107,13 @@ function ToggleGroupRoot({ size = "md", spacing = 0, variant = "default", classN
 		className: classes,
 		style: groupStyle,
 		...props,
-		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+		children: [slidesThumb ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "toggle-group__thumb"
+		}) : null, /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
 			value: contextValue,
 			children
-		})
+		})]
 	});
 }
 /**

package/dist/components/ToolInvocation.js

@@ -55,7 +55,7 @@ function ToolInvocation({ part, defaultOpen }) {
 	return /* @__PURE__ */ jsxs(Activity, {
 		isStreaming: isToolPartWorking(part),
 		defaultOpen,
-		children: [/* @__PURE__ */ jsx(ActivityTrigger, { label: describeToolPart(part) }), /* @__PURE__ */ jsxs(ActivityContent, { children: [/* @__PURE__ */ jsx(ActivityPanel, {
+		children: [/* @__PURE__ */ jsx(ActivityTrigger, { action: describeToolPart(part) }), /* @__PURE__ */ jsxs(ActivityContent, { children: [/* @__PURE__ */ jsx(ActivityPanel, {
 			label: part.title ?? getToolName(part),
 			text: formatToolValue(getToolInput(part)),
 			status: inputStatus,

package/dist/styles/activity-header.css

@@ -11,13 +11,44 @@
   text-align: start;
 }
 
-/* Basis 0 keeps a long label from inflating its owner; the trailing
-   affordance stays adjacent until the available width is exhausted. */
-.activity__header-label {
-  flex: 1 1 0;
+/*
+ * The action holds its content width and the detail absorbs whatever is left,
+ * so the two shrink in the right order: a long path loses its tail while
+ * "Reading" stays legible. Basis 0 on the detail is what makes it the flexible
+ * one; the trailing affordance stays adjacent until the width is exhausted.
+ *
+ * With no detail present the action is the only flexible item, so a settled
+ * summary sentence still truncates rather than inflating its owner.
+ */
+.activity__header-action {
+  flex: 0 1 auto;
   min-width: 0;
   max-width: max-content;
+  overflow: hidden;
   color: var(--sigvelo-color-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * The target of the action — a path, a command, a query. Muted, because in a
+ * column of activity lines the verb is what the reader scans for.
+ *
+ * Faded rather than ellipsed: this is data, and a trailing "…" reads as part of
+ * the value it is truncating.
+ *
+ * The fade is unconditional because it does not need a condition. Growing to
+ * fill the free space means the box is wider than short text, so the gradient
+ * lands on empty space and only bites once the text actually reaches the edge.
+ */
+.activity__header-detail {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--sigvelo-color-text-muted);
+  font-weight: var(--sigvelo-font-weight-normal);
+  white-space: nowrap;
+  mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent 100%);
 }
 
 .activity__item-icon {
@@ -26,8 +57,8 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.activity[data-streaming] .activity__header-label,
-.activity__header[data-streaming] .activity__header-label {
+.activity[data-streaming] .activity__header-action,
+.activity__header[data-streaming] .activity__header-action {
   --sigvelo-shimmer-base: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
   background: linear-gradient(
     90deg,
@@ -43,8 +74,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .activity[data-streaming] .activity__header-label,
-  .activity__header[data-streaming] .activity__header-label {
+  .activity[data-streaming] .activity__header-action,
+  .activity__header[data-streaming] .activity__header-action {
     animation: none;
     background: none;
     color: inherit;
@@ -52,8 +83,8 @@
 }
 
 @media (forced-colors: active) {
-  .activity[data-streaming] .activity__header-label,
-  .activity__header[data-streaming] .activity__header-label {
+  .activity[data-streaming] .activity__header-action,
+  .activity__header[data-streaming] .activity__header-action {
     animation: none;
     background: none;
     color: inherit;

package/dist/styles/activity.css

@@ -91,7 +91,7 @@
   gap: var(--sigvelo-spacing-1-5);
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text);
-  line-height: var(--sigvelo-leading-body);
+  line-height: var(--sigvelo-leading-relaxed);
 }
 
 /* Second collapse level: the trigger reads as a plain item row; the panel is
@@ -118,7 +118,7 @@
   font-size: var(--sigvelo-text-compact);
   font-weight: inherit;
   color: var(--sigvelo-color-text);
-  line-height: var(--sigvelo-leading-body);
+  line-height: var(--sigvelo-leading-relaxed);
   text-align: start;
   cursor: pointer;
   transition: background-color var(--sigvelo-motion-duration-interaction)
@@ -164,7 +164,7 @@
 .activity__group-text {
   margin: 0;
   font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-body);
+  line-height: var(--sigvelo-leading-relaxed);
   color: var(--sigvelo-color-text-muted);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
@@ -200,7 +200,7 @@
   margin: 0;
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-xs);
-  line-height: var(--sigvelo-leading-body);
+  line-height: var(--sigvelo-leading-relaxed);
   color: var(--sigvelo-color-text);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
@@ -323,6 +323,28 @@
   overflow-wrap: anywhere;
 }
 
+/*
+ * The target of a row's action. Muted and shrink-first, so a column of rows
+ * reads down its verbs — "Read / Edited / Ran" — with the paths and commands
+ * present but out of the way.
+ */
+.activity__item-detail {
+  flex: 1 1 0;
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--sigvelo-color-text-muted);
+  white-space: nowrap;
+  mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent 100%);
+}
+
+/* The action keeps its content width once a detail is beside it to shrink. */
+.activity__item:has(.activity__item-detail) .activity__item-text,
+.activity__group-trigger:has(.activity__item-detail) .activity__item-text {
+  flex: 0 1 auto;
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
 @media (hover: none) {
   .activity__group-icon {
     opacity: 1;