@tangle-network/ui 11.50.3 → 11.51.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @tangle-network/ui
 
+## 11.51.0
+
+### Minor Changes
+
+- ee52171: AgentTimeline folds a run of steps into one row: a `fold` item names what its tool calls did ("Read 6 files · Ran 2 commands", `foldSummary`) and opens to the rows; a failed call keeps the row in the failure ink with its error under it. A user bubble can fold a long message to its first `collapsedLines` lines, with a fade and a "Show more" inside the bubble. The bubble's hover time reads at 14px.
+
+### Patch Changes
+
+- d5798a3: FileTabs tells two open files with one name apart by the nearest folder that differs ("CHECK.md · route-a-lead-2"), and an inactive tab keeps a tab's slot with a 1px divider. A SegmentedControl's count reads at 14px in tabular figures.
+
 ## 11.50.3
 
 ### Patch Changes

package/dist/chat/agent-timeline.d.ts

@@ -11,6 +11,9 @@ export interface AgentTimelineMessageItem {
   content: string;
   toolCalls?: ReactNode;
   isStreaming?: boolean;
+  /** A user bubble longer than this many lines shows them with a fade and a
+   *  "Show more" inside the bubble; omit to show the whole message. */
+  collapsedLines?: number;
   /** Shown beside a user bubble on hover. Assistant prose carries no
    *  timestamp of its own — the turn's user message dates the exchange. */
   timestamp?: Date;
@@ -39,6 +42,22 @@ export interface AgentTimelineToolGroupItem {
   /** Source tool parts, parallel to `calls`. */
   parts?: ToolPart[];
 }
+/**
+ * A run of steps folded into one quiet row that names what they did ("Read 6
+ * files · Ran 2 commands") and opens to the rows themselves, as an agent app
+ * folds a settled multi-step turn. A failed call keeps the fold in the failure
+ * ink with its error under the row, so a failure never hides behind it.
+ */
+export interface AgentTimelineFoldItem {
+  id: string;
+  kind: "fold";
+  /** The folded rows in order: tool calls, reasoning and other run rows. */
+  items: AgentTimelineItem[];
+  /** The row's words; by default what its tool calls did (`foldSummary`). */
+  summary?: string;
+  /** Start open, e.g. when a link points at one of its steps. */
+  defaultOpen?: boolean;
+}
 export interface AgentTimelineStatusItem {
   id: string;
   kind: "status";
@@ -65,7 +84,7 @@ export interface AgentTimelineCustomItem {
    *  edge. */
   content: ReactNode;
 }
-export type AgentTimelineItem = AgentTimelineMessageItem | AgentTimelineToolItem | AgentTimelineToolGroupItem | AgentTimelineStatusItem | AgentTimelineArtifactItem | AgentTimelineCustomItem;
+export type AgentTimelineItem = AgentTimelineMessageItem | AgentTimelineToolItem | AgentTimelineToolGroupItem | AgentTimelineFoldItem | AgentTimelineStatusItem | AgentTimelineArtifactItem | AgentTimelineCustomItem;
 export interface AgentTimelineProps {
   items: AgentTimelineItem[];
   isThinking?: boolean;
@@ -93,6 +112,12 @@ export interface AgentTimelineProps {
 export type AgentTimelineStepKind = "user" | "prose" | "tool" | "card";
 /** What a row is, for the gap above the next one. */
 export declare function agentTimelineStepKind(item: AgentTimelineItem): AgentTimelineStepKind;
+/**
+ * What a fold's tool calls did, by verb in the order they first ran:
+ * "Read 6 files · Ran 2 commands". A fold without tool calls reads by its
+ * row count.
+ */
+export declare function foldSummary(items: readonly AgentTimelineItem[]): string;
 /** The transcript column every timeline sits in: centred, at the reading width. */
 export declare function AgentTimelineColumn({ className, children }: {
   className?: string;

package/dist/chat/agent-timeline.js

@@ -1,6 +1,8 @@
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { TextShimmer } from "../primitives/text-shimmer.js";
 import { statusMeta } from "../run/status-meta.js";
+import { RunRowShell } from "../run/run-row-shell.js";
 import { Markdown } from "../markdown/markdown.js";
 import "./transcript-text.js";
 import { MessageAuthor } from "./message-author.js";
@@ -9,7 +11,7 @@ import { ThinkingIndicator } from "./thinking-indicator.js";
 import { ToolCallGroup, ToolCallStep } from "../run/tool-call-step.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AlertTriangle, CircleDot, FileText, Info } from "lucide-react";
+import { AlertTriangle, CircleDot, FileText, Info, Layers } from "lucide-react";
 // src/chat/agent-timeline.tsx
 const TONE_STYLES = {
 	default: {
@@ -153,6 +155,71 @@ function ArtifactCard({ item }) {
 		children: content
 	});
 }
+const FOLD_VERBS = {
+	read: (n) => `Read ${n} ${n === 1 ? "file" : "files"}`,
+	write: (n) => `Wrote ${n} ${n === 1 ? "file" : "files"}`,
+	edit: (n) => `Edited ${n} ${n === 1 ? "file" : "files"}`,
+	bash: (n) => `Ran ${n} ${n === 1 ? "command" : "commands"}`,
+	grep: (n) => `Searched ${n} ${n === 1 ? "time" : "times"}`,
+	glob: (n) => `Matched ${n} ${n === 1 ? "pattern" : "patterns"}`,
+	list: (n) => `Listed ${n} ${n === 1 ? "folder" : "folders"}`,
+	download: (n) => `Downloaded ${n} ${n === 1 ? "file" : "files"}`,
+	inspect: (n) => `Inspected ${n} ${n === 1 ? "item" : "items"}`,
+	audit: (n) => `Audited ${n} ${n === 1 ? "item" : "items"}`,
+	unknown: (n) => `Used ${n} ${n === 1 ? "tool" : "tools"}`
+};
+/** The tool calls inside a fold, in order (a tool group's calls included). */
+function foldCalls(items) {
+	return items.flatMap((item) => item.kind === "tool" ? [{
+		call: item.call,
+		part: item.part
+	}] : item.kind === "tool_group" ? item.calls.map((call, i) => ({
+		call,
+		part: item.parts?.[i]
+	})) : item.kind === "fold" ? foldCalls(item.items) : []);
+}
+/**
+* What a fold's tool calls did, by verb in the order they first ran:
+* "Read 6 files · Ran 2 commands". A fold without tool calls reads by its
+* row count.
+*/
+function foldSummary(items) {
+	const counts = /* @__PURE__ */ new Map();
+	for (const { call } of foldCalls(items)) counts.set(call.type, (counts.get(call.type) ?? 0) + 1);
+	if (!counts.size) return `${items.length} ${items.length === 1 ? "step" : "steps"}`;
+	const phrases = [...counts].map(([type, n]) => FOLD_VERBS[type](n));
+	return phrases.length > 3 ? `${phrases.slice(0, 3).join(" · ")} · ${phrases.length - 3} more` : phrases.join(" · ");
+}
+function FoldStep({ item, renderToolActions, viewerId }) {
+	const calls = foldCalls(item.items);
+	const failed = calls.filter(({ call }) => call.status === "error");
+	const running = calls.some(({ call }) => call.status === "running");
+	const firstError = failed.map(({ part }) => part?.state.status === "error" ? part.state.error : void 0).find(Boolean);
+	const total = calls.reduce((sum, { call }) => sum + (call.duration ?? 0), 0);
+	const title = item.summary ?? foldSummary(item.items);
+	const targets = [...new Set(calls.map(({ call }) => call.detail).filter((detail) => Boolean(detail)))];
+	return /* @__PURE__ */ jsx(RunRowShell, {
+		icon: /* @__PURE__ */ jsx(Layers, { className: "h-3.5 w-3.5" }),
+		title: running ? /* @__PURE__ */ jsx(TextShimmer, { children: title }) : title,
+		description: targets.join(", ") || void 0,
+		descriptionMono: true,
+		status: failed.length ? "error" : running ? "running" : "success",
+		durationMs: total > 0 && !running ? total : void 0,
+		collapsedError: failed.length ? `${failed.length} failed${firstError ? `: ${firstError}` : ""}` : void 0,
+		defaultOpen: item.defaultOpen,
+		contentClassName: "px-3 py-1.5",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-timeline-fold": "",
+			className: "flex flex-col",
+			children: item.items.map((inner, index) => /* @__PURE__ */ jsx(AgentTimelineStep, {
+				item: inner,
+				previous: index > 0 ? agentTimelineStepKind(item.items[index - 1]) : void 0,
+				renderToolActions,
+				viewerId
+			}, inner.id))
+		})
+	});
+}
 /** The transcript column every timeline sits in: centred, at the reading width. */
 function AgentTimelineColumn({ className, children }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -183,7 +250,8 @@ function TimelineItem({ item, headed, renderToolActions, viewerId }) {
 		content: item.content,
 		timestamp: item.timestamp,
 		author: item.author,
-		viewerId
+		viewerId,
+		collapsedLines: item.collapsedLines
 	}) : /* @__PURE__ */ jsx(AssistantMessage, {
 		item,
 		author: headed ? item.author : void 0
@@ -214,6 +282,11 @@ function TimelineItem({ item, headed, renderToolActions, viewerId }) {
 			}, call.id);
 		})
 	});
+	if (item.kind === "fold") return /* @__PURE__ */ jsx(FoldStep, {
+		item,
+		renderToolActions,
+		viewerId
+	});
 	if (item.kind === "status") return /* @__PURE__ */ jsx(StatusCard, { item });
 	if (item.kind === "artifact") return /* @__PURE__ */ jsx(ArtifactCard, { item });
 	return item.content;
@@ -280,4 +353,4 @@ function AgentTimeline({ items, isThinking, emptyState, className, renderToolAct
 		}) : null]
 	});
 }
-export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, agentTimelineStepKind };
+export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, agentTimelineStepKind, foldSummary };

package/dist/chat/user-message.d.ts

@@ -19,9 +19,14 @@ export interface UserMessageProps {
    * someone else's: it sits at the start, on a card, under its author.
    */
   viewerId?: string;
+  /**
+   * Show a long message's first lines with a fade and a "Show more" inside the
+   * bubble, which opens it in place. Omit to show the whole message.
+   */
+  collapsedLines?: number;
 }
 /**
  * User speech retains the inverse-theme bubble and direct-content contract.
  * Application notes interrupt the bubble in source order, outside its attribution.
  */
-export declare const UserMessage: import("react").MemoExoticComponent<({ message: _message, parts, content, timestamp, actions, author, viewerId }: UserMessageProps) => import("react").JSX.Element | null>;
+export declare const UserMessage: import("react").MemoExoticComponent<({ message: _message, parts, content, timestamp, actions, author, viewerId, collapsedLines }: UserMessageProps) => import("react").JSX.Element | null>;

package/dist/chat/user-message.js

@@ -1,8 +1,8 @@
 import { SyntheticText, userTextSegments } from "./synthetic-text.js";
 import { TRANSCRIPT_TEXT } from "./transcript-text.js";
 import { MessageAuthor, isViewerMessage } from "./message-author.js";
-import { memo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/chat/user-message.tsx
 function formatTime(date) {
 	return date.toLocaleTimeString(void 0, {
@@ -16,7 +16,51 @@ function MessageActions({ children, align = "end" }) {
 		children
 	});
 }
-function UserBubble({ text, timestamp, actions }) {
+/**
+* A message body that can fold to its first `lines` lines: the last shown line
+* fades out and a "Show more" inside the bubble opens the rest in place. The
+* button appears only when the text overflows.
+*/
+function BubbleText({ text, lines }) {
+	const body = useRef(null);
+	const [open, setOpen] = useState(false);
+	const [over, setOver] = useState(false);
+	useLayoutEffect(() => {
+		const element = body.current;
+		if (!element || !lines || open) return;
+		const measure = () => setOver(element.scrollHeight > element.clientHeight + 1);
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [
+		lines,
+		open,
+		text
+	]);
+	const folded = Boolean(lines) && !open;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		ref: body,
+		className: `break-words whitespace-pre-wrap ${TRANSCRIPT_TEXT}`,
+		style: folded ? {
+			maxHeight: `${lines}lh`,
+			overflow: "hidden",
+			...over ? {
+				maskImage: "linear-gradient(to bottom, #000 calc(100% - 1.5lh), transparent)",
+				WebkitMaskImage: "linear-gradient(to bottom, #000 calc(100% - 1.5lh), transparent)"
+			} : {}
+		} : void 0,
+		children: text
+	}), lines && (over || open) ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-expanded": open,
+		onClick: () => setOpen(!open),
+		className: "mt-1.5 text-sm font-medium underline-offset-2 opacity-75 transition-opacity hover:underline hover:opacity-100",
+		children: open ? "Show less" : "Show more"
+	}) : null] });
+}
+function UserBubble({ text, timestamp, actions, lines }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex justify-end",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -25,11 +69,11 @@ function UserBubble({ text, timestamp, actions }) {
 				className: "relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background",
 				children: [timestamp ? /* @__PURE__ */ jsx("span", {
 					"data-user-message-time": "",
-					className: "pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[length:var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+					className: "pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-sm text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
 					children: formatTime(timestamp)
-				}) : null, /* @__PURE__ */ jsx("div", {
-					className: `break-words whitespace-pre-wrap ${TRANSCRIPT_TEXT}`,
-					children: text
+				}) : null, /* @__PURE__ */ jsx(BubbleText, {
+					text,
+					lines
 				})]
 			}), actions ? /* @__PURE__ */ jsx(MessageActions, { children: actions }) : null]
 		})
@@ -40,7 +84,7 @@ function UserBubble({ text, timestamp, actions }) {
 * than the reader's inverse fill, so "mine" and "theirs" differ before the
 * names are read. The timestamp is revealed on the bubble's far side.
 */
-function OtherPersonBubble({ text, timestamp, actions, author }) {
+function OtherPersonBubble({ text, timestamp, actions, author, lines }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex justify-start",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -51,11 +95,11 @@ function OtherPersonBubble({ text, timestamp, actions, author }) {
 					className: "relative min-w-0 max-w-full rounded-2xl border border-border bg-card px-4 py-3 text-foreground",
 					children: [timestamp ? /* @__PURE__ */ jsx("span", {
 						"data-user-message-time": "",
-						className: "pointer-events-none absolute left-full top-1/2 ml-3 -translate-y-1/2 whitespace-nowrap text-[length:var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+						className: "pointer-events-none absolute left-full top-1/2 ml-3 -translate-y-1/2 whitespace-nowrap text-sm text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
 						children: formatTime(timestamp)
-					}) : null, /* @__PURE__ */ jsx("div", {
-						className: `break-words whitespace-pre-wrap ${TRANSCRIPT_TEXT}`,
-						children: text
+					}) : null, /* @__PURE__ */ jsx(BubbleText, {
+						text,
+						lines
 					})]
 				}),
 				actions ? /* @__PURE__ */ jsx(MessageActions, {
@@ -70,17 +114,19 @@ function OtherPersonBubble({ text, timestamp, actions, author }) {
 * User speech retains the inverse-theme bubble and direct-content contract.
 * Application notes interrupt the bubble in source order, outside its attribution.
 */
-const UserMessage = memo(({ message: _message, parts, content, timestamp, actions, author, viewerId }) => {
+const UserMessage = memo(({ message: _message, parts, content, timestamp, actions, author, viewerId, collapsedLines }) => {
 	const other = isViewerMessage(author, viewerId) ? void 0 : author;
 	const bubble = (text, bubbleActions, headed = true, key) => other ? /* @__PURE__ */ jsx(OtherPersonBubble, {
 		text,
 		timestamp,
 		actions: bubbleActions,
-		author: headed ? other : void 0
+		author: headed ? other : void 0,
+		lines: collapsedLines
 	}, key) : /* @__PURE__ */ jsx(UserBubble, {
 		text,
 		timestamp,
-		actions: bubbleActions
+		actions: bubbleActions,
+		lines: collapsedLines
 	}, key);
 	if (content != null) return content.trim() ? bubble(content, actions) : null;
 	const segments = userTextSegments(parts ?? []);

package/dist/chat.d.ts

@@ -6,6 +6,6 @@ import { ChatMessage, ChatMessageProps, MessageRole } from "./chat/chat-message.
 import { MessageAuthor, MessageAuthorProps, isViewerMessage } from "./chat/message-author.js";
 import { Speaker, SpeakerHeader, SpeakerHeaderProps, SpeakerPart, SpeakerSection, SpeakerState, partitionBySpeaker } from "./chat/speaker.js";
 import { ThinkingIndicator, ThinkingIndicatorProps } from "./chat/thinking-indicator.js";
-import { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineColumn, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineStep, AgentTimelineStepKind, AgentTimelineStepProps, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, agentTimelineStepKind } from "./chat/agent-timeline.js";
+import { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineColumn, AgentTimelineCustomItem, AgentTimelineFoldItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineStep, AgentTimelineStepKind, AgentTimelineStepProps, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, agentTimelineStepKind, foldSummary } from "./chat/agent-timeline.js";
 import { TRANSCRIPT_TEXT } from "./chat/transcript-text.js";
-export { AgentTimeline, type AgentTimelineArtifactItem, AgentTimelineColumn, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, AgentTimelineStep, type AgentTimelineStepKind, type AgentTimelineStepProps, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, type ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, type Speaker, SpeakerHeader, type SpeakerHeaderProps, type SpeakerPart, type SpeakerSection, type SpeakerState, TRANSCRIPT_TEXT, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps, agentTimelineStepKind, isViewerMessage, partitionBySpeaker };
+export { AgentTimeline, type AgentTimelineArtifactItem, AgentTimelineColumn, type AgentTimelineCustomItem, type AgentTimelineFoldItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, AgentTimelineStep, type AgentTimelineStepKind, type AgentTimelineStepProps, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, type ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, type Speaker, SpeakerHeader, type SpeakerHeaderProps, type SpeakerPart, type SpeakerSection, type SpeakerState, TRANSCRIPT_TEXT, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps, agentTimelineStepKind, foldSummary, isViewerMessage, partitionBySpeaker };

package/dist/chat.js

@@ -3,8 +3,8 @@ import { MessageAuthor, isViewerMessage } from "./chat/message-author.js";
 import { UserMessage } from "./chat/user-message.js";
 import { MessageList } from "./chat/message-list.js";
 import { ThinkingIndicator } from "./chat/thinking-indicator.js";
-import { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, agentTimelineStepKind } from "./chat/agent-timeline.js";
+import { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, agentTimelineStepKind, foldSummary } from "./chat/agent-timeline.js";
 import { ChatContainer } from "./chat/chat-container.js";
 import { ChatMessage } from "./chat/chat-message.js";
 import { SpeakerHeader, partitionBySpeaker } from "./chat/speaker.js";
-export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, ChatContainer, ChatMessage, MessageAuthor, MessageList, SpeakerHeader, TRANSCRIPT_TEXT, ThinkingIndicator, UserMessage, agentTimelineStepKind, isViewerMessage, partitionBySpeaker };
+export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, ChatContainer, ChatMessage, MessageAuthor, MessageList, SpeakerHeader, TRANSCRIPT_TEXT, ThinkingIndicator, UserMessage, agentTimelineStepKind, foldSummary, isViewerMessage, partitionBySpeaker };

package/dist/files/file-tabs.js

@@ -18,6 +18,26 @@ function getTabIcon(name) {
 	if (["csv", "xlsx"].includes(ext)) return FileSpreadsheet;
 	return FileCode;
 }
+/**
+* Each tab's folder hint: two open files with one name ("CHECK.md" twice) each show the nearest parent folder that
+* tells them apart, as an editor does ("CHECK.md · route-a-lead-2"). A name no other tab shares shows none.
+*/
+function folderHints(tabs) {
+	const hints = /* @__PURE__ */ new Map();
+	const byName = /* @__PURE__ */ new Map();
+	for (const tab of tabs) byName.set(tab.name, [...byName.get(tab.name) ?? [], tab]);
+	for (const same of byName.values()) {
+		if (same.length < 2) continue;
+		const parents = same.map((tab) => tab.path.replace(/\/+$/, "").split("/").slice(0, -1).reverse());
+		same.forEach((tab, i) => {
+			const own = parents[i];
+			const depth = own.findIndex((folder, d) => parents.every((other, j) => j === i || other[d] !== folder));
+			const hint = own[depth >= 0 ? depth : 0];
+			if (hint) hints.set(tab.id, hint);
+		});
+	}
+	return hints;
+}
 /** A long name keeps its extension and the characters before it after the ellipsis. */
 function splitName(name) {
 	if (name.length <= 18) return [name, ""];
@@ -33,6 +53,7 @@ function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open files", cla
 		if (strip && tab) strip.scrollLeft = Math.min(tab.offsetLeft, Math.max(strip.scrollLeft, tab.offsetLeft + tab.offsetWidth - strip.clientWidth));
 	}, [activeId, tabs.length]);
 	if (tabs.length === 0) return null;
+	const hints = folderHints(tabs);
 	const tabButtons = () => [...stripRef.current?.querySelectorAll("[role=\"tab\"]") ?? []];
 	const onKeyDown = (event) => {
 		const at = tabButtons().indexOf(event.target);
@@ -59,18 +80,20 @@ function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open files", cla
 		"aria-label": label,
 		onKeyDown,
 		className: cn("relative flex h-10 min-w-0 items-end gap-1 overflow-x-auto px-2 shadow-[inset_0_-1px_0_hsl(var(--border))] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", className),
-		children: tabs.map((tab) => {
+		children: tabs.map((tab, index) => {
 			const isActive = tab.id === activeId;
+			const divided = !isActive && tabs[index + 1] !== void 0 && tabs[index + 1].id !== activeId;
+			const hint = hints.get(tab.id);
 			const Icon = getTabIcon(tab.name);
 			const [head, tail] = splitName(tab.name);
 			return /* @__PURE__ */ jsxs("div", {
 				title: tab.path,
-				className: cn("group relative flex h-[calc(100%-0.375rem)] max-w-72 shrink-0 items-center rounded-t-lg border border-b-0 text-sm", controlMotion, isActive ? "border-border bg-card text-foreground" : "border-transparent text-muted-foreground hover:bg-[var(--ix-hover-bg)] hover:text-foreground"),
+				className: cn("group relative flex h-[calc(100%-0.375rem)] max-w-72 shrink-0 items-center rounded-t-lg border border-b-0 text-sm", controlMotion, isActive ? "border-border bg-card text-foreground" : "border-transparent text-muted-foreground hover:bg-[var(--ix-hover-bg)] hover:text-foreground", divided && "after:absolute after:-right-[3px] after:top-1/2 after:h-4 after:w-px after:-translate-y-1/2 after:bg-border"),
 				children: [/* @__PURE__ */ jsxs("button", {
 					type: "button",
 					role: "tab",
 					"aria-selected": isActive,
-					"aria-label": tab.dirty ? `${tab.name}, unsaved changes` : tab.name,
+					"aria-label": `${tab.name}${hint ? ` in ${hint}` : ""}${tab.dirty ? ", unsaved changes" : ""}`,
 					tabIndex: isActive || !activeId && tab === tabs[0] ? 0 : -1,
 					onClick: () => onSelect(tab.id),
 					className: cn("flex h-full min-w-0 items-center gap-1.5 rounded-t-lg pl-3 pr-1", focusRingInset),
@@ -89,6 +112,10 @@ function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open files", cla
 								children: tail
 							})]
 						}),
+						hint && /* @__PURE__ */ jsxs("span", {
+							className: "min-w-0 truncate text-muted-foreground",
+							children: ["· ", hint]
+						}),
 						tab.dirty && /* @__PURE__ */ jsx("span", {
 							"aria-hidden": true,
 							className: "size-1.5 shrink-0 rounded-full bg-[var(--accent-text)]"

package/dist/index.d.ts

@@ -20,7 +20,7 @@ import { Speaker, SpeakerHeader, SpeakerHeaderProps, SpeakerPart, SpeakerSection
 import { ThinkingIndicator, ThinkingIndicatorProps } from "./chat/thinking-indicator.js";
 import { ToolCallStatus, ToolCallType } from "./run/tool-call-step.js";
 import { FeedSegment, ToolCallData, ToolCallFeed, ToolCallFeedProps, parseToolEvent } from "./run/tool-call-feed.js";
-import { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineColumn, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineStep, AgentTimelineStepKind, AgentTimelineStepProps, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, agentTimelineStepKind } from "./chat/agent-timeline.js";
+import { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineColumn, AgentTimelineCustomItem, AgentTimelineFoldItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineStep, AgentTimelineStepKind, AgentTimelineStepProps, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, agentTimelineStepKind, foldSummary } from "./chat/agent-timeline.js";
 import { TRANSCRIPT_TEXT } from "./chat/transcript-text.js";
 import "./chat.js";
 import { codeBlockGrammar } from "./lib/code-presentation.js";
@@ -145,4 +145,4 @@ import { QuestionPreview, QuestionPreviewProps } from "./tool-previews/question-
 import { DiffPreview, DiffPreviewProps } from "./tool-previews/diff-preview.js";
 import { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from "./redaction/redacted-document.js";
 import "./redaction.js";
-export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, AgentTimelineColumn, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, AgentTimelineStep, type AgentTimelineStepKind, type AgentTimelineStepProps, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ApiSchema, type ApiSchemaProps, AppendUserMessageOptions, ApplySdkEventOptions, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ComplianceBadge, type ComplianceBadgeProps, type ComplianceProduct, type ComplianceStatus, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, CustomToolRenderer, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, type RunStatus, RunStatusIcon, type RunStatusIconProps, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsNote, type SettingsNoteProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, type Speaker, SpeakerHeader, type SpeakerHeaderProps, type SpeakerPart, type SpeakerSection, type SpeakerState, StatCard, type StatCardProps, type StatusMeta, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, partitionBySpeaker, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, runStatus, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, statusMeta, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, AgentTimelineColumn, type AgentTimelineCustomItem, type AgentTimelineFoldItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, AgentTimelineStep, type AgentTimelineStepKind, type AgentTimelineStepProps, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ApiSchema, type ApiSchemaProps, AppendUserMessageOptions, ApplySdkEventOptions, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ComplianceBadge, type ComplianceBadgeProps, type ComplianceProduct, type ComplianceStatus, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, CustomToolRenderer, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, type RunStatus, RunStatusIcon, type RunStatusIconProps, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsNote, type SettingsNoteProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, type Speaker, SpeakerHeader, type SpeakerHeaderProps, type SpeakerPart, type SpeakerSection, type SpeakerState, StatCard, type StatCardProps, type StatusMeta, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, foldSummary, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, partitionBySpeaker, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, runStatus, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, statusMeta, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/index.js

@@ -96,7 +96,7 @@ import { MessageAuthor, isViewerMessage } from "./chat/message-author.js";
 import { UserMessage } from "./chat/user-message.js";
 import { MessageList } from "./chat/message-list.js";
 import { ThinkingIndicator } from "./chat/thinking-indicator.js";
-import { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, agentTimelineStepKind } from "./chat/agent-timeline.js";
+import { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, agentTimelineStepKind, foldSummary } from "./chat/agent-timeline.js";
 import { ChatContainer } from "./chat/chat-container.js";
 import { ChatMessage } from "./chat/chat-message.js";
 import { SpeakerHeader, partitionBySpeaker } from "./chat/speaker.js";
@@ -129,4 +129,4 @@ import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMap
 import { copyText } from "./utils/copy-text.js";
 import { timeAgo } from "./utils/time-ago.js";
 import { RedactedDocument } from "./redaction/redacted-document.js";
-export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiSchema, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ComplianceBadge, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsNote, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, SpeakerHeader, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TaskList, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, Wizard, WizardStep, WriteFilePreview, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, partitionBySpeaker, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, runStatus, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, statusMeta, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiSchema, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ComplianceBadge, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsNote, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, SpeakerHeader, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TaskList, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, Wizard, WizardStep, WriteFilePreview, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, foldSummary, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, partitionBySpeaker, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, runStatus, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, statusMeta, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/primitives/segmented-control.js

@@ -159,7 +159,7 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 						"hover:shadow-[inset_0_-2px_0_hsl(var(--hsl-ring)/0.4)] data-[state=active]:bg-[hsl(var(--hsl-ring)/0.07)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_-2px_0_var(--ix-sel-ring)] aria-checked:bg-[hsl(var(--hsl-ring)/0.07)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_-2px_0_var(--ix-sel-ring)]"
 					], active ? "text-[var(--accent-text)]" : "text-muted-foreground hover:text-foreground"),
 					children: [/* @__PURE__ */ jsx("span", { children: option.label }), option.adornment && /* @__PURE__ */ jsx("span", {
-						className: cn("text-xs", active ? "text-[var(--accent-text)]/80" : "text-muted-foreground"),
+						className: cn("text-sm tabular-nums", active ? "text-[var(--accent-text)]/80" : "text-muted-foreground"),
 						children: option.adornment
 					})]
 				}, option.value);

package/dist/run/run-row-shell.js

@@ -51,14 +51,14 @@ function RunRowShell({ icon, title, description, descriptionMono = false, status
 			children: [/* @__PURE__ */ jsxs("div", {
 				"data-run-row": "",
 				"data-state": open ? "open" : "closed",
-				className: cn("group min-w-0 flex-1 overflow-hidden border transition-colors", open ? "border-border bg-[var(--md3-surface-container)]" : "border-transparent bg-transparent", expandable && !open && "hover:bg-[var(--md3-surface-container)]", SHAPE_CLASS[groupPosition], className),
+				className: cn("min-w-0 flex-1 overflow-hidden border transition-colors", open ? "border-border bg-[var(--md3-surface-container)]" : "border-transparent bg-transparent", expandable && !open && "hover:bg-[var(--md3-surface-container)]", SHAPE_CLASS[groupPosition], className),
 				children: [
 					/* @__PURE__ */ jsx(Collapsible.Trigger, {
 						asChild: true,
 						disabled: !expandable,
 						children: /* @__PURE__ */ jsxs("button", {
 							type: "button",
-							className: cn("flex w-full items-center gap-2 text-left", HEADER_INSET, expandable ? "cursor-pointer" : "cursor-default"),
+							className: cn("group flex w-full items-center gap-2 text-left", HEADER_INSET, expandable ? "cursor-pointer" : "cursor-default"),
 							children: [
 								/* @__PURE__ */ jsxs("span", {
 									"aria-hidden": true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.50.3",
+  "version": "11.51.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/chat/agent-timeline.stories.tsx

@@ -295,6 +295,45 @@ export const WithToolGroup: Story = {
   },
 }
 
+// ---------------------------------------------------------------------------
+// A settled multi-step turn folded into one row, under a long prompt that folds too
+// ---------------------------------------------------------------------------
+
+const read = (id: string, detail: string, status: 'success' | 'error' = 'success'): AgentTimelineItem => ({
+  id,
+  kind: 'tool',
+  call: { id, type: 'read', label: 'Read', status, detail, duration: 40 },
+  part: { type: 'tool', id, tool: 'read', state: status === 'error' ? { status: 'error', input: { path: detail }, error: `File not found: ${detail}` } : { status: 'completed', input: { path: detail }, output: '…' } },
+})
+
+export const FoldedSteps: Story = {
+  args: {
+    items: [
+      {
+        id: 'user-1',
+        kind: 'message',
+        role: 'user',
+        collapsedLines: 4,
+        content:
+          'Build the most correct, most complete zkVM in Rust: every component of the paper, sound end to end, at 120 bits, measured against the paper\'s own tables, and then better. Start from the commission and the previous handoff; read the open blockers first. Keep one owner per path, and re-measure every gain on the same benchmark before you integrate it. Report the proving rate, proof size, verify time and peak memory at every release.',
+        timestamp: t(300),
+      },
+      { id: 'think-1', kind: 'custom', content: <p className="text-sm text-muted-foreground">Reasoning rows sit inside the fold with the calls they led to.</p> },
+      {
+        id: 'fold-1',
+        kind: 'fold',
+        items: [read('r1', 'inputs/commission.md'), read('r2', 'inputs/previous.md'), read('r3', 'inputs/claims.json'), read('r4', 'inputs/sources/handoff.md'), { id: 'b1', kind: 'tool', call: { id: 'b1', type: 'bash', label: 'Shell', status: 'success', detail: 'git -C repo log --oneline -5', duration: 120 } }],
+      },
+      { id: 'asst-1', kind: 'message', role: 'assistant', content: 'The handoff names four open blockers. I will take the proof-size one first, since the other three depend on it.' },
+      {
+        id: 'fold-2',
+        kind: 'fold',
+        items: [read('r5', 'inputs/sources/open-blockers.md'), read('r6', 'inputs/profile-examples/README.md', 'error'), read('r7', 'repo/README.md')],
+      },
+    ],
+  },
+}
+
 // ---------------------------------------------------------------------------
 // Error state
 // ---------------------------------------------------------------------------

package/src/chat/agent-timeline.test.tsx

@@ -316,3 +316,27 @@ describe("AgentTimeline status cards", () => {
     expect(glyph("warning")).toContain("lucide-triangle-alert")
   })
 })
+
+describe("AgentTimeline folds", () => {
+  const call = (id: string, type: "read" | "bash", detail: string, status: "success" | "error" = "success"): AgentTimelineItem => ({
+    id,
+    kind: "tool",
+    call: { id, type, label: type === "read" ? "Read" : "Shell", status, detail },
+    part: { type: "tool", id, tool: type, state: status === "error" ? { status: "error", input: { path: detail }, error: `File not found: ${detail}` } : { status: "completed", input: { path: detail }, output: "ok" } },
+  })
+
+  it("folds a run of calls into one row that names what they did and opens to the rows", async () => {
+    const user = userEvent.setup()
+    render(<AgentTimeline items={[{ id: "f", kind: "fold", items: [call("a", "read", "inputs/commission.md"), call("b", "read", "inputs/claims.json"), call("c", "bash", "ls repo")] }]} />)
+    const row = screen.getByRole("button", { name: /Read 2 files · Ran 1 command/ })
+    expect(screen.queryByText("Shell")).not.toBeInTheDocument()
+    await user.click(row)
+    expect(screen.getByText("Shell")).toBeInTheDocument()
+    expect(screen.getAllByText("Read")).toHaveLength(2)
+  })
+
+  it("keeps a failure visible under a closed fold", () => {
+    render(<AgentTimeline items={[{ id: "f", kind: "fold", items: [call("a", "read", "a.md"), call("b", "read", "b.md", "error")] }]} />)
+    expect(screen.getByText("1 failed: File not found: b.md")).toBeInTheDocument()
+  })
+})

package/src/chat/agent-timeline.tsx

@@ -5,6 +5,7 @@ import {
   CircleDot,
   FileText,
   Info,
+  Layers,
 } from "lucide-react";
 import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
@@ -16,6 +17,8 @@ import { ThinkingIndicator } from "./thinking-indicator";
 import { type ToolCallData } from "../run/tool-call-feed";
 import { ToolCallGroup, ToolCallStep } from "../run/tool-call-step";
 import { statusMeta } from "../run/status-meta";
+import { RunRowShell } from "../run/run-row-shell";
+import { TextShimmer } from "../primitives/text-shimmer";
 import type { ChatAuthor } from "../types/message";
 import type { ToolPart } from "../types/parts";
 
@@ -28,6 +31,9 @@ export interface AgentTimelineMessageItem {
   content: string;
   toolCalls?: ReactNode;
   isStreaming?: boolean;
+  /** A user bubble longer than this many lines shows them with a fade and a
+   *  "Show more" inside the bubble; omit to show the whole message. */
+  collapsedLines?: number;
   /** Shown beside a user bubble on hover. Assistant prose carries no
    *  timestamp of its own — the turn's user message dates the exchange. */
   timestamp?: Date;
@@ -59,6 +65,23 @@ export interface AgentTimelineToolGroupItem {
   parts?: ToolPart[];
 }
 
+/**
+ * A run of steps folded into one quiet row that names what they did ("Read 6
+ * files · Ran 2 commands") and opens to the rows themselves, as an agent app
+ * folds a settled multi-step turn. A failed call keeps the fold in the failure
+ * ink with its error under the row, so a failure never hides behind it.
+ */
+export interface AgentTimelineFoldItem {
+  id: string;
+  kind: "fold";
+  /** The folded rows in order: tool calls, reasoning and other run rows. */
+  items: AgentTimelineItem[];
+  /** The row's words; by default what its tool calls did (`foldSummary`). */
+  summary?: string;
+  /** Start open, e.g. when a link points at one of its steps. */
+  defaultOpen?: boolean;
+}
+
 export interface AgentTimelineStatusItem {
   id: string;
   kind: "status";
@@ -92,6 +115,7 @@ export type AgentTimelineItem =
   | AgentTimelineMessageItem
   | AgentTimelineToolItem
   | AgentTimelineToolGroupItem
+  | AgentTimelineFoldItem
   | AgentTimelineStatusItem
   | AgentTimelineArtifactItem
   | AgentTimelineCustomItem;
@@ -285,6 +309,82 @@ function ArtifactCard({ item }: { item: AgentTimelineArtifactItem }) {
   );
 }
 
+const FOLD_VERBS: Record<ToolCallData["type"], (n: number) => string> = {
+  read: (n) => `Read ${n} ${n === 1 ? "file" : "files"}`,
+  write: (n) => `Wrote ${n} ${n === 1 ? "file" : "files"}`,
+  edit: (n) => `Edited ${n} ${n === 1 ? "file" : "files"}`,
+  bash: (n) => `Ran ${n} ${n === 1 ? "command" : "commands"}`,
+  grep: (n) => `Searched ${n} ${n === 1 ? "time" : "times"}`,
+  glob: (n) => `Matched ${n} ${n === 1 ? "pattern" : "patterns"}`,
+  list: (n) => `Listed ${n} ${n === 1 ? "folder" : "folders"}`,
+  download: (n) => `Downloaded ${n} ${n === 1 ? "file" : "files"}`,
+  inspect: (n) => `Inspected ${n} ${n === 1 ? "item" : "items"}`,
+  audit: (n) => `Audited ${n} ${n === 1 ? "item" : "items"}`,
+  unknown: (n) => `Used ${n} ${n === 1 ? "tool" : "tools"}`,
+};
+
+/** The tool calls inside a fold, in order (a tool group's calls included). */
+function foldCalls(items: readonly AgentTimelineItem[]): { call: ToolCallData; part?: ToolPart }[] {
+  return items.flatMap((item) =>
+    item.kind === "tool"
+      ? [{ call: item.call, part: item.part }]
+      : item.kind === "tool_group"
+        ? item.calls.map((call, i) => ({ call, part: item.parts?.[i] }))
+        : item.kind === "fold"
+          ? foldCalls(item.items)
+          : [],
+  );
+}
+
+/**
+ * What a fold's tool calls did, by verb in the order they first ran:
+ * "Read 6 files · Ran 2 commands". A fold without tool calls reads by its
+ * row count.
+ */
+export function foldSummary(items: readonly AgentTimelineItem[]): string {
+  const counts = new Map<ToolCallData["type"], number>();
+  for (const { call } of foldCalls(items)) counts.set(call.type, (counts.get(call.type) ?? 0) + 1);
+  if (!counts.size) return `${items.length} ${items.length === 1 ? "step" : "steps"}`;
+  const phrases = [...counts].map(([type, n]) => FOLD_VERBS[type](n));
+  return phrases.length > 3 ? `${phrases.slice(0, 3).join(" · ")} · ${phrases.length - 3} more` : phrases.join(" · ");
+}
+
+function FoldStep({ item, renderToolActions, viewerId }: { item: AgentTimelineFoldItem; renderToolActions?: (part: ToolPart) => ReactNode; viewerId?: string }) {
+  const calls = foldCalls(item.items);
+  const failed = calls.filter(({ call }) => call.status === "error");
+  const running = calls.some(({ call }) => call.status === "running");
+  const firstError = failed.map(({ part }) => (part?.state.status === "error" ? part.state.error : undefined)).find(Boolean);
+  const total = calls.reduce((sum, { call }) => sum + (call.duration ?? 0), 0);
+  const title = item.summary ?? foldSummary(item.items);
+  // What the calls acted on, in order and once each: the row's quiet second half.
+  const targets = [...new Set(calls.map(({ call }) => call.detail).filter((detail): detail is string => Boolean(detail)))];
+  return (
+    <RunRowShell
+      icon={<Layers className="h-3.5 w-3.5" />}
+      title={running ? <TextShimmer>{title}</TextShimmer> : title}
+      description={targets.join(", ") || undefined}
+      descriptionMono
+      status={failed.length ? "error" : running ? "running" : "success"}
+      durationMs={total > 0 && !running ? total : undefined}
+      collapsedError={failed.length ? `${failed.length} failed${firstError ? `: ${firstError}` : ""}` : undefined}
+      defaultOpen={item.defaultOpen}
+      contentClassName="px-3 py-1.5"
+    >
+      <div data-timeline-fold="" className="flex flex-col">
+        {item.items.map((inner, index) => (
+          <AgentTimelineStep
+            key={inner.id}
+            item={inner}
+            previous={index > 0 ? agentTimelineStepKind(item.items[index - 1]) : undefined}
+            renderToolActions={renderToolActions}
+            viewerId={viewerId}
+          />
+        ))}
+      </div>
+    </RunRowShell>
+  );
+}
+
 /** The transcript column every timeline sits in: centred, at the reading width. */
 export function AgentTimelineColumn({ className, children }: { className?: string; children?: ReactNode }) {
   return <div className={cn("mx-auto flex w-full max-w-5xl flex-col px-4 py-4", className)}>{children}</div>;
@@ -317,7 +417,7 @@ export function AgentTimelineStep({ item, previous, headed, renderToolActions, v
 function TimelineItem({ item, headed, renderToolActions, viewerId }: Omit<AgentTimelineStepProps, "previous">): ReactNode {
   if (item.kind === "message") {
     return item.role === "user" ? (
-      <UserMessage content={item.content} timestamp={item.timestamp} author={item.author} viewerId={viewerId} />
+      <UserMessage content={item.content} timestamp={item.timestamp} author={item.author} viewerId={viewerId} collapsedLines={item.collapsedLines} />
     ) : (
       <AssistantMessage item={item} author={headed ? item.author : undefined} />
     );
@@ -361,6 +461,8 @@ function TimelineItem({ item, headed, renderToolActions, viewerId }: Omit<AgentT
     );
   }
 
+  if (item.kind === "fold") return <FoldStep item={item} renderToolActions={renderToolActions} viewerId={viewerId} />;
+
   if (item.kind === "status") return <StatusCard item={item} />;
   if (item.kind === "artifact") return <ArtifactCard item={item} />;
   return item.content;

package/src/chat/index.ts

@@ -19,6 +19,7 @@ export {
   AgentTimelineColumn,
   AgentTimelineStep,
   agentTimelineStepKind,
+  foldSummary,
   type AgentTimelineProps,
   type AgentTimelineStepProps,
   type AgentTimelineStepKind,
@@ -26,6 +27,7 @@ export {
   type AgentTimelineMessageItem,
   type AgentTimelineToolItem,
   type AgentTimelineToolGroupItem,
+  type AgentTimelineFoldItem,
   type AgentTimelineStatusItem,
   type AgentTimelineArtifactItem,
   type AgentTimelineCustomItem,

package/src/chat/user-message.tsx

@@ -1,5 +1,5 @@
 import { TRANSCRIPT_TEXT } from "./transcript-text";
-import { memo, type ReactNode } from "react";
+import { memo, useLayoutEffect, useRef, useState, type ReactNode } from "react";
 import type { ChatAuthor, SessionMessage } from "../types/message";
 import type { SessionPart } from "../types/parts";
 import { isViewerMessage, MessageAuthor } from "./message-author";
@@ -23,6 +23,11 @@ export interface UserMessageProps {
    * someone else's: it sits at the start, on a card, under its author.
    */
   viewerId?: string;
+  /**
+   * Show a long message's first lines with a fade and a "Show more" inside the
+   * bubble, which opens it in place. Omit to show the whole message.
+   */
+  collapsedLines?: number;
 }
 
 function formatTime(date: Date): string {
@@ -37,10 +42,58 @@ function MessageActions({ children, align = "end" }: { children: ReactNode; alig
   );
 }
 
-function UserBubble({ text, timestamp, actions }: {
+/**
+ * A message body that can fold to its first `lines` lines: the last shown line
+ * fades out and a "Show more" inside the bubble opens the rest in place. The
+ * button appears only when the text overflows.
+ */
+function BubbleText({ text, lines }: { text: string; lines?: number }) {
+  const body = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const [over, setOver] = useState(false);
+  useLayoutEffect(() => {
+    const element = body.current;
+    if (!element || !lines || open) return;
+    const measure = () => setOver(element.scrollHeight > element.clientHeight + 1);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [lines, open, text]);
+  const folded = Boolean(lines) && !open;
+  return (
+    <>
+      <div
+        ref={body}
+        className={`break-words whitespace-pre-wrap ${TRANSCRIPT_TEXT}`}
+        style={folded ? {
+          maxHeight: `${lines}lh`,
+          overflow: "hidden",
+          ...(over ? { maskImage: "linear-gradient(to bottom, #000 calc(100% - 1.5lh), transparent)", WebkitMaskImage: "linear-gradient(to bottom, #000 calc(100% - 1.5lh), transparent)" } : {}),
+        } : undefined}
+      >
+        {text}
+      </div>
+      {lines && (over || open) ? (
+        <button
+          type="button"
+          aria-expanded={open}
+          onClick={() => setOpen(!open)}
+          className="mt-1.5 text-sm font-medium underline-offset-2 opacity-75 transition-opacity hover:underline hover:opacity-100"
+        >
+          {open ? "Show less" : "Show more"}
+        </button>
+      ) : null}
+    </>
+  );
+}
+
+function UserBubble({ text, timestamp, actions, lines }: {
   text: string;
   timestamp?: Date;
   actions?: ReactNode;
+  lines?: number;
 }) {
   return (
     <div className="flex justify-end">
@@ -49,14 +102,12 @@ function UserBubble({ text, timestamp, actions }: {
           {timestamp ? (
             <span
               data-user-message-time=""
-              className="pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[length:var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+              className="pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-sm text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
             >
               {formatTime(timestamp)}
             </span>
           ) : null}
-          <div className={`break-words whitespace-pre-wrap ${TRANSCRIPT_TEXT}`}>
-            {text}
-          </div>
+          <BubbleText text={text} lines={lines} />
         </div>
         {actions ? <MessageActions>{actions}</MessageActions> : null}
       </div>
@@ -69,10 +120,11 @@ function UserBubble({ text, timestamp, actions }: {
  * than the reader's inverse fill, so "mine" and "theirs" differ before the
  * names are read. The timestamp is revealed on the bubble's far side.
  */
-function OtherPersonBubble({ text, timestamp, actions, author }: {
+function OtherPersonBubble({ text, timestamp, actions, author, lines }: {
   text: string;
   timestamp?: Date;
   actions?: ReactNode;
+  lines?: number;
   /** The author line; absent on a later segment of the same message. */
   author?: ChatAuthor;
 }) {
@@ -84,14 +136,12 @@ function OtherPersonBubble({ text, timestamp, actions, author }: {
           {timestamp ? (
             <span
               data-user-message-time=""
-              className="pointer-events-none absolute left-full top-1/2 ml-3 -translate-y-1/2 whitespace-nowrap text-[length:var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+              className="pointer-events-none absolute left-full top-1/2 ml-3 -translate-y-1/2 whitespace-nowrap text-sm text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
             >
               {formatTime(timestamp)}
             </span>
           ) : null}
-          <div className={`break-words whitespace-pre-wrap ${TRANSCRIPT_TEXT}`}>
-            {text}
-          </div>
+          <BubbleText text={text} lines={lines} />
         </div>
         {actions ? <MessageActions align="start">{actions}</MessageActions> : null}
       </div>
@@ -104,14 +154,14 @@ function OtherPersonBubble({ text, timestamp, actions, author }: {
  * Application notes interrupt the bubble in source order, outside its attribution.
  */
 export const UserMessage = memo(
-  ({ message: _message, parts, content, timestamp, actions, author, viewerId }: UserMessageProps) => {
+  ({ message: _message, parts, content, timestamp, actions, author, viewerId, collapsedLines }: UserMessageProps) => {
     const other = isViewerMessage(author, viewerId) ? undefined : author;
     // `headed` puts the author line on the first spoken segment only.
     const bubble = (text: string, bubbleActions?: ReactNode, headed = true, key?: number) =>
       other ? (
-        <OtherPersonBubble key={key} text={text} timestamp={timestamp} actions={bubbleActions} author={headed ? other : undefined} />
+        <OtherPersonBubble key={key} text={text} timestamp={timestamp} actions={bubbleActions} author={headed ? other : undefined} lines={collapsedLines} />
       ) : (
-        <UserBubble key={key} text={text} timestamp={timestamp} actions={bubbleActions} />
+        <UserBubble key={key} text={text} timestamp={timestamp} actions={bubbleActions} lines={collapsedLines} />
       );
     // Explicit direct content (including empty content) still overrides parts.
     if (content != null) {

package/src/files/file-tabs.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { FileTabs, type FileTabData } from './file-tabs'
+
+const meta: Meta<typeof FileTabs> = { title: 'Files/FileTabs', component: FileTabs, parameters: { layout: 'fullscreen' } }
+export default meta
+
+const TABS: FileTabData[] = [
+  { id: 'a', name: 'CHECK.md', path: 'code/route-a-lead-2/CHECK.md' },
+  { id: 'b', name: 'CHECK.md', path: 'code/rs3-merge-lead/CHECK.md' },
+  { id: 'c', name: 'approaches.md', path: 'pages/magnetar-rust/approaches.md' },
+  { id: 'd', name: 'gaps.json', path: 'code/route-a-lead-2/gaps.json', dirty: true },
+]
+
+/** Two files of one name tell themselves apart by folder; inactive tabs keep their slot with a divider. */
+export const SameNames: StoryObj<typeof FileTabs> = {
+  render: () => {
+    const [active, setActive] = useState('c')
+    return (
+      <div className="bg-[var(--bg-root)] p-6">
+        <div className="rounded-[var(--radius-xl)] border border-border bg-background">
+          <FileTabs tabs={TABS} activeId={active} onSelect={setActive} onClose={() => {}} />
+          <div className="h-40 bg-card" />
+        </div>
+      </div>
+    )
+  },
+}

package/src/files/file-tabs.test.tsx

@@ -63,4 +63,21 @@ describe("FileTabs", () => {
     fireEvent.click(screen.getByRole("button", { name: "Close README.md" }));
     expect(screen.getAllByRole("tab")).toHaveLength(2);
   });
+
+  it("tells two open files of one name apart by their nearest differing folder", () => {
+    render(
+      <FileTabs
+        tabs={[
+          { id: "x", name: "CHECK.md", path: "code/route-a-lead-2/CHECK.md" },
+          { id: "y", name: "CHECK.md", path: "code/rs3-merge-lead/CHECK.md" },
+          { id: "z", name: "plan.md", path: "pages/plan.md" },
+        ]}
+        activeId="x"
+        onSelect={() => {}}
+        onClose={() => {}}
+      />,
+    );
+    expect(screen.getAllByRole("tab").map((tab) => tab.getAttribute("aria-label"))).toEqual(["CHECK.md in route-a-lead-2", "CHECK.md in rs3-merge-lead", "plan.md"]);
+    expect(screen.getByText("· route-a-lead-2")).toBeInTheDocument();
+  });
 });

package/src/files/file-tabs.tsx

@@ -36,6 +36,28 @@ function getTabIcon(name: string) {
   return FileCode;
 }
 
+/**
+ * Each tab's folder hint: two open files with one name ("CHECK.md" twice) each show the nearest parent folder that
+ * tells them apart, as an editor does ("CHECK.md · route-a-lead-2"). A name no other tab shares shows none.
+ */
+function folderHints(tabs: readonly FileTabData[]): Map<string, string> {
+  const hints = new Map<string, string>();
+  const byName = new Map<string, FileTabData[]>();
+  for (const tab of tabs) byName.set(tab.name, [...(byName.get(tab.name) ?? []), tab]);
+  for (const same of byName.values()) {
+    if (same.length < 2) continue;
+    const parents = same.map((tab) => tab.path.replace(/\/+$/, "").split("/").slice(0, -1).reverse());
+    same.forEach((tab, i) => {
+      const own = parents[i]!;
+      // The first folder, walking up, that no other same-named tab has at that depth.
+      const depth = own.findIndex((folder, d) => parents.every((other, j) => j === i || other[d] !== folder));
+      const hint = own[depth >= 0 ? depth : 0];
+      if (hint) hints.set(tab.id, hint);
+    });
+  }
+  return hints;
+}
+
 /** A long name keeps its extension and the characters before it after the ellipsis. */
 function splitName(name: string): [string, string] {
   if (name.length <= 18) return [name, ""];
@@ -55,6 +77,7 @@ export function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open file
   }, [activeId, tabs.length]);
 
   if (tabs.length === 0) return null;
+  const hints = folderHints(tabs);
 
   const tabButtons = () => [...(stripRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]') ?? [])];
   const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
@@ -84,8 +107,12 @@ export function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open file
         className,
       )}
     >
-      {tabs.map((tab) => {
+      {tabs.map((tab, index) => {
         const isActive = tab.id === activeId;
+        // An inactive tab keeps a tab's slot: a 1px divider on its right, except beside the active tab, so the strip
+        // reads as tabs rather than loose words.
+        const divided = !isActive && tabs[index + 1] !== undefined && tabs[index + 1]!.id !== activeId;
+        const hint = hints.get(tab.id);
         const Icon = getTabIcon(tab.name);
         const [head, tail] = splitName(tab.name);
 
@@ -99,13 +126,14 @@ export function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open file
               isActive
                 ? "border-border bg-card text-foreground"
                 : "border-transparent text-muted-foreground hover:bg-[var(--ix-hover-bg)] hover:text-foreground",
+              divided && "after:absolute after:-right-[3px] after:top-1/2 after:h-4 after:w-px after:-translate-y-1/2 after:bg-border",
             )}
           >
             <button
               type="button"
               role="tab"
               aria-selected={isActive}
-              aria-label={tab.dirty ? `${tab.name}, unsaved changes` : tab.name}
+              aria-label={`${tab.name}${hint ? ` in ${hint}` : ""}${tab.dirty ? ", unsaved changes" : ""}`}
               tabIndex={isActive || (!activeId && tab === tabs[0]) ? 0 : -1}
               onClick={() => onSelect(tab.id)}
               className={cn("flex h-full min-w-0 items-center gap-1.5 rounded-t-lg pl-3 pr-1", focusRingInset)}
@@ -115,6 +143,7 @@ export function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open file
                 <span className="overflow-hidden text-ellipsis whitespace-pre">{head}</span>
                 {tail && <span className="shrink-0 whitespace-pre">{tail}</span>}
               </span>
+              {hint && <span className="min-w-0 truncate text-muted-foreground">· {hint}</span>}
               {tab.dirty && <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-[var(--accent-text)]" />}
             </button>
             <button

package/src/primitives/segmented-control.tsx

@@ -271,7 +271,7 @@ export function SegmentedControl<T extends string = string>({
             {option.adornment && (
               <span
                 className={cn(
-                  "text-xs",
+                  "text-sm tabular-nums",
                   active ? "text-[var(--accent-text)]/80" : "text-muted-foreground",
                 )}
               >

package/src/run/run-row-shell.tsx

@@ -113,7 +113,7 @@ export function RunRowShell({
           data-run-row=""
           data-state={open ? "open" : "closed"}
           className={cn(
-            "group min-w-0 flex-1 overflow-hidden border transition-colors",
+            "min-w-0 flex-1 overflow-hidden border transition-colors",
             open
               ? "border-border bg-[var(--md3-surface-container)]"
               : "border-transparent bg-transparent",
@@ -125,8 +125,11 @@ export function RunRowShell({
           <Collapsible.Trigger asChild disabled={!expandable}>
             <button
               type="button"
+              // The header is the hover group, not the whole card: rows nested in an
+              // open row (a fold's steps) keep their own glyphs while the
+              // pointer is over them.
               className={cn(
-                "flex w-full items-center gap-2 text-left",
+                "group flex w-full items-center gap-2 text-left",
                 HEADER_INSET,
                 expandable ? "cursor-pointer" : "cursor-default",
               )}