@tangle-network/ui 11.46.0 → 11.47.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @tangle-network/ui
 
+## 11.47.0
+
+### Minor Changes
+
+- 99cf964: A windowed transcript keeps the chat's rhythm and edge. `AgentTimeline` now renders through two new exports, `AgentTimelineColumn` (the centred reading column) and `AgentTimelineStep` (one row with the gap its neighbour pair calls for, from `agentTimelineStepKind`), so a consumer that virtualizes a long transcript renders its rows inside one column instead of one `AgentTimeline` per row.
+  
+  `RunRowShell` (and so `InlineToolItem` and `InlineThinkingItem`) marks a failure on the row's own glyph, tinted to the danger ink beside the tool's name, instead of a red dot at the row's far edge. `data-run-row-status="error"` moves to the glyph slot. The collapsed error line, the hover duration, an opened reasoning body, a user message's timestamp row and the "Show more steps" toggle read at `text-sm` (14px) instead of 10–12px.
+
 ## 11.46.0
 
 ### Minor Changes

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

@@ -84,6 +84,35 @@ export interface AgentTimelineProps {
    */
   viewerId?: string;
 }
+/**
+ * Vertical rhythm. Rows are grouped by what they are, and the gap between two
+ * neighbours follows from the pair: a turn boundary (user message) separates
+ * most, a tool sequence — and prose beside it — sits tightest, cards and
+ * consecutive paragraphs fall between.
+ */
+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;
+/** The transcript column every timeline sits in: centred, at the reading width. */
+export declare function AgentTimelineColumn({ className, children }: {
+  className?: string;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+export interface AgentTimelineStepProps {
+  item: AgentTimelineItem;
+  /** The kind of the row above, which sets the gap; omit for the first row. */
+  previous?: AgentTimelineStepKind;
+  /** Draw the message's author line (the first prose of a turn). */
+  headed?: boolean;
+  renderToolActions?: (part: ToolPart) => ReactNode;
+  viewerId?: string;
+}
+/**
+ * One row of the timeline with the gap its neighbour pair calls for. A
+ * consumer that windows a long transcript renders these inside one
+ * `AgentTimelineColumn`, so the rows keep the column's rhythm and edge.
+ */
+export declare function AgentTimelineStep({ item, previous, headed, renderToolActions, viewerId }: AgentTimelineStepProps): import("react").JSX.Element;
 /**
  * AgentTimeline — unified mixed-content transcript for agent-backed sandbox
  * sessions. Renders messages, tool rows, status cards, and artifact handoffs

package/dist/chat/agent-timeline.js

@@ -42,7 +42,8 @@ const TONE_STYLES = {
 		icon: AlertTriangle
 	}
 };
-function stepKind(item) {
+/** What a row is, for the gap above the next one. */
+function agentTimelineStepKind(item) {
 	if (item.kind === "message") return item.role === "user" ? "user" : "prose";
 	if (item.kind === "status" || item.kind === "artifact") return "card";
 	return "tool";
@@ -151,6 +152,71 @@ function ArtifactCard({ item }) {
 		children: content
 	});
 }
+/** The transcript column every timeline sits in: centred, at the reading width. */
+function AgentTimelineColumn({ className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("mx-auto flex w-full max-w-5xl flex-col px-4 py-4", className),
+		children
+	});
+}
+/**
+* One row of the timeline with the gap its neighbour pair calls for. A
+* consumer that windows a long transcript renders these inside one
+* `AgentTimelineColumn`, so the rows keep the column's rhythm and edge.
+*/
+function AgentTimelineStep({ item, previous, headed, renderToolActions, viewerId }) {
+	const kind = agentTimelineStepKind(item);
+	return /* @__PURE__ */ jsx("div", {
+		"data-timeline-step": kind,
+		className: cn(spacingBefore(previous, kind), kind === "tool" && ROW_BLEED),
+		children: /* @__PURE__ */ jsx(TimelineItem, {
+			item,
+			headed,
+			renderToolActions,
+			viewerId
+		})
+	});
+}
+function TimelineItem({ item, headed, renderToolActions, viewerId }) {
+	if (item.kind === "message") return item.role === "user" ? /* @__PURE__ */ jsx(UserMessage, {
+		content: item.content,
+		timestamp: item.timestamp,
+		author: item.author,
+		viewerId
+	}) : /* @__PURE__ */ jsx(AssistantMessage, {
+		item,
+		author: headed ? item.author : void 0
+	});
+	if (item.kind === "tool") return /* @__PURE__ */ jsx(ToolCallStep, {
+		type: item.call.type,
+		label: item.call.label,
+		status: item.call.status,
+		detail: item.call.detail,
+		output: item.call.output,
+		duration: item.call.duration,
+		part: item.part,
+		actions: item.part ? renderToolActions?.(item.part) : void 0
+	});
+	if (item.kind === "tool_group") return /* @__PURE__ */ jsx(ToolCallGroup, {
+		title: item.title,
+		children: item.calls.map((call, callIndex) => {
+			const part = item.parts?.[callIndex];
+			return /* @__PURE__ */ jsx(ToolCallStep, {
+				type: call.type,
+				label: call.label,
+				status: call.status,
+				detail: call.detail,
+				output: call.output,
+				duration: call.duration,
+				part,
+				actions: part ? renderToolActions?.(part) : void 0
+			}, call.id);
+		})
+	});
+	if (item.kind === "status") return /* @__PURE__ */ jsx(StatusCard, { item });
+	if (item.kind === "artifact") return /* @__PURE__ */ jsx(ArtifactCard, { item });
+	return item.content;
+}
 /**
 * AgentTimeline — unified mixed-content transcript for agent-backed sandbox
 * sessions. Renders messages, tool rows, status cards, and artifact handoffs
@@ -197,62 +263,20 @@ function AgentTimeline({ items, isThinking, emptyState, className, renderToolAct
 		if (item.author && item.author.id !== speakingAgent) headedAgentMessages.add(item.id);
 		speakingAgent = item.author?.id;
 	}
-	const renderItem = (item) => {
-		if (item.kind === "message") return item.role === "user" ? /* @__PURE__ */ jsx(UserMessage, {
-			content: item.content,
-			timestamp: item.timestamp,
-			author: item.author,
-			viewerId
-		}) : /* @__PURE__ */ jsx(AssistantMessage, {
+	return /* @__PURE__ */ jsxs(AgentTimelineColumn, {
+		className,
+		children: [renderList.map((item, index) => /* @__PURE__ */ jsx(AgentTimelineStep, {
 			item,
-			author: headedAgentMessages.has(item.id) ? item.author : void 0
-		});
-		if (item.kind === "tool") return /* @__PURE__ */ jsx(ToolCallStep, {
-			type: item.call.type,
-			label: item.call.label,
-			status: item.call.status,
-			detail: item.call.detail,
-			output: item.call.output,
-			duration: item.call.duration,
-			part: item.part,
-			actions: item.part ? renderToolActions?.(item.part) : void 0
-		});
-		if (item.kind === "tool_group") return /* @__PURE__ */ jsx(ToolCallGroup, {
-			title: item.title,
-			children: item.calls.map((call, callIndex) => {
-				const part = item.parts?.[callIndex];
-				return /* @__PURE__ */ jsx(ToolCallStep, {
-					type: call.type,
-					label: call.label,
-					status: call.status,
-					detail: call.detail,
-					output: call.output,
-					duration: call.duration,
-					part,
-					actions: part ? renderToolActions?.(part) : void 0
-				}, call.id);
-			})
-		});
-		if (item.kind === "status") return /* @__PURE__ */ jsx(StatusCard, { item });
-		if (item.kind === "artifact") return /* @__PURE__ */ jsx(ArtifactCard, { item });
-		return item.content;
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("mx-auto flex w-full max-w-5xl flex-col px-4 py-4", className),
-		children: [renderList.map((item, index) => {
-			const kind = stepKind(item);
-			const prev = index > 0 ? stepKind(renderList[index - 1]) : void 0;
-			return /* @__PURE__ */ jsx("div", {
-				"data-timeline-step": kind,
-				className: cn(spacingBefore(prev, kind), kind === "tool" && ROW_BLEED),
-				children: renderItem(item)
-			}, item.id);
-		}), collapsible ? /* @__PURE__ */ jsx("button", {
+			previous: index > 0 ? agentTimelineStepKind(renderList[index - 1]) : void 0,
+			headed: headedAgentMessages.has(item.id),
+			renderToolActions,
+			viewerId
+		}, item.id)), collapsible ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: () => setExpanded((value) => !value),
-			className: "mt-2 self-start text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+			className: "mt-2 self-start text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
 			children: collapsed ? `Show ${hiddenCount} more step${hiddenCount === 1 ? "" : "s"}` : "Show less"
 		}) : null]
 	});
 }
-export { AgentTimeline };
+export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, agentTimelineStepKind };

package/dist/chat/user-message.js

@@ -12,7 +12,7 @@ function formatTime(date) {
 }
 function MessageActions({ children, align = "end" }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: `flex flex-wrap items-center ${align === "end" ? "justify-end" : "justify-start"} gap-1.5 text-xs text-muted-foreground`,
+		className: `flex flex-wrap items-center ${align === "end" ? "justify-end" : "justify-start"} gap-1.5 text-sm text-muted-foreground`,
 		children
 	});
 }

package/dist/chat.d.ts

@@ -5,6 +5,6 @@ import { UserMessage, UserMessageProps } from "./chat/user-message.js";
 import { ChatMessage, ChatMessageProps, MessageRole } from "./chat/chat-message.js";
 import { MessageAuthor, MessageAuthorProps, isViewerMessage } from "./chat/message-author.js";
 import { ThinkingIndicator, ThinkingIndicatorProps } from "./chat/thinking-indicator.js";
-import { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem } from "./chat/agent-timeline.js";
+import { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineColumn, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineStep, AgentTimelineStepKind, AgentTimelineStepProps, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, agentTimelineStepKind } from "./chat/agent-timeline.js";
 import { TRANSCRIPT_TEXT } from "./chat/transcript-text.js";
-export { AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, type ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, TRANSCRIPT_TEXT, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps, isViewerMessage };
+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, TRANSCRIPT_TEXT, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps, agentTimelineStepKind, isViewerMessage };

package/dist/chat.js

@@ -3,7 +3,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 } from "./chat/agent-timeline.js";
+import { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, agentTimelineStepKind } from "./chat/agent-timeline.js";
 import { ChatContainer } from "./chat/chat-container.js";
 import { ChatMessage } from "./chat/chat-message.js";
-export { AgentTimeline, ChatContainer, ChatMessage, MessageAuthor, MessageList, TRANSCRIPT_TEXT, ThinkingIndicator, UserMessage, isViewerMessage };
+export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, ChatContainer, ChatMessage, MessageAuthor, MessageList, TRANSCRIPT_TEXT, ThinkingIndicator, UserMessage, agentTimelineStepKind, isViewerMessage };

package/dist/index.d.ts

@@ -19,7 +19,7 @@ import { MessageAuthor, MessageAuthorProps, isViewerMessage } from "./chat/messa
 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, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem } from "./chat/agent-timeline.js";
+import { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineColumn, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineStep, AgentTimelineStepKind, AgentTimelineStepProps, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, agentTimelineStepKind } from "./chat/agent-timeline.js";
 import { TRANSCRIPT_TEXT } from "./chat/transcript-text.js";
 import "./chat.js";
 import { codeBlockGrammar } from "./lib/code-presentation.js";
@@ -143,4 +143,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, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, 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, 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, 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, StatCard, type StatCardProps, 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, 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, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, 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 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, 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, 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, StatCard, type StatCardProps, 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, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, 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

@@ -95,7 +95,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 } from "./chat/agent-timeline.js";
+import { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, agentTimelineStepKind } from "./chat/agent-timeline.js";
 import { ChatContainer } from "./chat/chat-container.js";
 import { ChatMessage } from "./chat/chat-message.js";
 import { LiveDuration } from "./run/run-item-primitives.js";
@@ -127,4 +127,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, 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, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, 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, 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, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, 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, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, 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, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, 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/run/inline-thinking-item.js

@@ -51,7 +51,7 @@ const InlineThinkingItem = memo(({ part, defaultOpen = false, autoCollapse = tru
 				children: /* @__PURE__ */ jsx(Markdown, { children: part.text })
 			})
 		}) : /* @__PURE__ */ jsx("div", {
-			className: "px-3 py-2.5 text-xs text-muted-foreground",
+			className: "px-3 py-2.5 text-sm text-muted-foreground",
 			children: "No reasoning text provided."
 		})
 	});

package/dist/run/run-row-shell.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from "react";
 export type RunRowStatus = "running" | "success" | "error" | "idle";
 /**
- * Trailing status indicator shared by every run row. Only `error` draws a
- * mark (a red dot). Success is silence, and a running row carries its state in
- * the title — a `TextShimmer` sweep — so neither renders anything here.
+ * A red dot for a failed row, for rows composed outside the shell. The shell
+ * itself marks a failure on the row's own glyph, beside its name, never at the
+ * far edge. Success is silence, and a running row carries its state in the
+ * title — a `TextShimmer` sweep.
  */
 export declare function RunRowStatusDot({ status }: {
   status: RunRowStatus;

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

@@ -6,9 +6,10 @@ import { ChevronRight } from "lucide-react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 // src/run/run-row-shell.tsx
 /**
-* Trailing status indicator shared by every run row. Only `error` draws a
-* mark (a red dot). Success is silence, and a running row carries its state in
-* the title — a `TextShimmer` sweep — so neither renders anything here.
+* A red dot for a failed row, for rows composed outside the shell. The shell
+* itself marks a failure on the row's own glyph, beside its name, never at the
+* far edge. Success is silence, and a running row carries its state in the
+* title — a `TextShimmer` sweep.
 */
 function RunRowStatusDot({ status }) {
 	if (status !== "error") return null;
@@ -61,7 +62,8 @@ function RunRowShell({ icon, title, description, descriptionMono = false, status
 							children: [
 								/* @__PURE__ */ jsxs("span", {
 									"aria-hidden": true,
-									className: "flex h-[1.375rem] w-[1.375rem] shrink-0 items-center justify-center text-muted-foreground",
+									"data-run-row-status": status === "error" ? "error" : void 0,
+									className: cn("flex h-[1.375rem] w-[1.375rem] shrink-0 items-center justify-center", status === "error" ? "text-[var(--surface-danger-text)]" : "text-muted-foreground"),
 									children: [/* @__PURE__ */ jsx("span", {
 										"data-run-row-glyph": "",
 										className: cn("flex items-center justify-center", expandable && "group-hover:hidden", open && "hidden"),
@@ -79,19 +81,16 @@ function RunRowShell({ icon, title, description, descriptionMono = false, status
 									className: cn("min-w-0 flex-1 truncate text-sm text-muted-foreground transition-colors group-hover:text-foreground", descriptionMono && "font-mono"),
 									children: description
 								}) : null,
-								/* @__PURE__ */ jsxs("span", {
-									className: "ml-auto flex shrink-0 items-center gap-1.5",
-									children: [!isRunning && durationMs != null ? /* @__PURE__ */ jsx("span", {
-										"data-run-row-duration": "",
-										className: "font-mono text-[10px] tabular-nums text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
-										children: formatDuration(durationMs)
-									}) : null, /* @__PURE__ */ jsx(RunRowStatusDot, { status })]
-								})
+								!isRunning && durationMs != null ? /* @__PURE__ */ jsx("span", {
+									"data-run-row-duration": "",
+									className: "ml-auto shrink-0 font-mono text-sm tabular-nums text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+									children: formatDuration(durationMs)
+								}) : null
 							]
 						})
 					}),
 					collapsedError && !open ? /* @__PURE__ */ jsx("div", {
-						className: cn("pb-1.5 pr-2 text-xs leading-snug text-[var(--surface-danger-text)]", ERROR_INDENT),
+						className: cn("pb-1.5 pr-2 text-sm leading-snug text-[var(--surface-danger-text)]", ERROR_INDENT),
 						children: collapsedError
 					}) : null,
 					expandable ? /* @__PURE__ */ jsx(Collapsible.Content, {

package/package.json

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

package/src/chat/agent-timeline.tsx

@@ -154,9 +154,11 @@ const TONE_STYLES: Record<AgentTimelineTone, { card: string; text: string; suppo
  * most, a tool sequence — and prose beside it — sits tightest, cards and
  * consecutive paragraphs fall between.
  */
-type StepKind = "user" | "prose" | "tool" | "card";
+export type AgentTimelineStepKind = "user" | "prose" | "tool" | "card";
+type StepKind = AgentTimelineStepKind;
 
-function stepKind(item: AgentTimelineItem): StepKind {
+/** What a row is, for the gap above the next one. */
+export function agentTimelineStepKind(item: AgentTimelineItem): AgentTimelineStepKind {
   if (item.kind === "message") return item.role === "user" ? "user" : "prose";
   if (item.kind === "status" || item.kind === "artifact") return "card";
   return "tool";
@@ -282,6 +284,87 @@ function ArtifactCard({ item }: { item: AgentTimelineArtifactItem }) {
   );
 }
 
+/** 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>;
+}
+
+export interface AgentTimelineStepProps {
+  item: AgentTimelineItem;
+  /** The kind of the row above, which sets the gap; omit for the first row. */
+  previous?: AgentTimelineStepKind;
+  /** Draw the message's author line (the first prose of a turn). */
+  headed?: boolean;
+  renderToolActions?: (part: ToolPart) => ReactNode;
+  viewerId?: string;
+}
+
+/**
+ * One row of the timeline with the gap its neighbour pair calls for. A
+ * consumer that windows a long transcript renders these inside one
+ * `AgentTimelineColumn`, so the rows keep the column's rhythm and edge.
+ */
+export function AgentTimelineStep({ item, previous, headed, renderToolActions, viewerId }: AgentTimelineStepProps) {
+  const kind = agentTimelineStepKind(item);
+  return (
+    <div data-timeline-step={kind} className={cn(spacingBefore(previous, kind), kind === "tool" && ROW_BLEED)}>
+      <TimelineItem item={item} headed={headed} renderToolActions={renderToolActions} viewerId={viewerId} />
+    </div>
+  );
+}
+
+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} />
+    ) : (
+      <AssistantMessage item={item} author={headed ? item.author : undefined} />
+    );
+  }
+
+  if (item.kind === "tool") {
+    return (
+      <ToolCallStep
+        type={item.call.type}
+        label={item.call.label}
+        status={item.call.status}
+        detail={item.call.detail}
+        output={item.call.output}
+        duration={item.call.duration}
+        part={item.part}
+        actions={item.part ? renderToolActions?.(item.part) : undefined}
+      />
+    );
+  }
+
+  if (item.kind === "tool_group") {
+    return (
+      <ToolCallGroup title={item.title}>
+        {item.calls.map((call, callIndex) => {
+          const part = item.parts?.[callIndex];
+          return (
+            <ToolCallStep
+              key={call.id}
+              type={call.type}
+              label={call.label}
+              status={call.status}
+              detail={call.detail}
+              output={call.output}
+              duration={call.duration}
+              part={part}
+              actions={part ? renderToolActions?.(part) : undefined}
+            />
+          );
+        })}
+      </ToolCallGroup>
+    );
+  }
+
+  if (item.kind === "status") return <StatusCard item={item} />;
+  if (item.kind === "artifact") return <ArtifactCard item={item} />;
+  return item.content;
+}
+
 /**
  * AgentTimeline — unified mixed-content transcript for agent-backed sandbox
  * sessions. Renders messages, tool rows, status cards, and artifact handoffs
@@ -352,84 +435,29 @@ export function AgentTimeline({
     speakingAgent = item.author?.id;
   }
 
-  const renderItem = (item: AgentTimelineItem): ReactNode => {
-    if (item.kind === "message") {
-      return item.role === "user" ? (
-        <UserMessage content={item.content} timestamp={item.timestamp} author={item.author} viewerId={viewerId} />
-      ) : (
-        <AssistantMessage item={item} author={headedAgentMessages.has(item.id) ? item.author : undefined} />
-      );
-    }
-
-    if (item.kind === "tool") {
-      return (
-        <ToolCallStep
-          type={item.call.type}
-          label={item.call.label}
-          status={item.call.status}
-          detail={item.call.detail}
-          output={item.call.output}
-          duration={item.call.duration}
-          part={item.part}
-          actions={item.part ? renderToolActions?.(item.part) : undefined}
-        />
-      );
-    }
-
-    if (item.kind === "tool_group") {
-      return (
-        <ToolCallGroup title={item.title}>
-          {item.calls.map((call, callIndex) => {
-            const part = item.parts?.[callIndex];
-            return (
-              <ToolCallStep
-                key={call.id}
-                type={call.type}
-                label={call.label}
-                status={call.status}
-                detail={call.detail}
-                output={call.output}
-                duration={call.duration}
-                part={part}
-                actions={part ? renderToolActions?.(part) : undefined}
-              />
-            );
-          })}
-        </ToolCallGroup>
-      );
-    }
-
-    if (item.kind === "status") return <StatusCard item={item} />;
-    if (item.kind === "artifact") return <ArtifactCard item={item} />;
-    return item.content;
-  };
-
   return (
-    <div className={cn("mx-auto flex w-full max-w-5xl flex-col px-4 py-4", className)}>
-      {renderList.map((item, index) => {
-        const kind = stepKind(item);
-        const prev = index > 0 ? stepKind(renderList[index - 1]) : undefined;
-        return (
-          <div
-            key={item.id}
-            data-timeline-step={kind}
-            className={cn(spacingBefore(prev, kind), kind === "tool" && ROW_BLEED)}
-          >
-            {renderItem(item)}
-          </div>
-        );
-      })}
+    <AgentTimelineColumn className={className}>
+      {renderList.map((item, index) => (
+        <AgentTimelineStep
+          key={item.id}
+          item={item}
+          previous={index > 0 ? agentTimelineStepKind(renderList[index - 1]) : undefined}
+          headed={headedAgentMessages.has(item.id)}
+          renderToolActions={renderToolActions}
+          viewerId={viewerId}
+        />
+      ))}
       {collapsible ? (
         <button
           type="button"
           onClick={() => setExpanded((value) => !value)}
-          className="mt-2 self-start text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+          className="mt-2 self-start text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
         >
           {collapsed
             ? `Show ${hiddenCount} more step${hiddenCount === 1 ? "" : "s"}`
             : "Show less"}
         </button>
       ) : null}
-    </div>
+    </AgentTimelineColumn>
   );
 }

package/src/chat/index.ts

@@ -7,7 +7,12 @@ export type { ChatAuthor } from "../types/message";
 export { ThinkingIndicator, type ThinkingIndicatorProps } from "./thinking-indicator";
 export {
   AgentTimeline,
+  AgentTimelineColumn,
+  AgentTimelineStep,
+  agentTimelineStepKind,
   type AgentTimelineProps,
+  type AgentTimelineStepProps,
+  type AgentTimelineStepKind,
   type AgentTimelineItem,
   type AgentTimelineMessageItem,
   type AgentTimelineToolItem,

package/src/chat/message-author.test.tsx

@@ -28,8 +28,8 @@ describe("a transcript without authors", () => {
   })
 
   it("renders UserMessage actions and application notes as before", () => {
-    expect(html(<UserMessage content="Can I break my lease early?" actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground"><button type="button">Copy</button></div></div></div>"`)
-    expect(html(<UserMessage parts={segmentedParts} actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="space-y-2"><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">I signed the lease in March.</div></div></div></div><div role="note" aria-label="Application note" data-synthetic-text="" class="min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground"><div class="mb-1 font-medium">Application note</div><div class="break-words whitespace-pre-wrap">Lease uploaded: lease.pdf</div></div><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Here it is.</div></div></div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground"><button type="button">Copy</button></div></div>"`)
+    expect(html(<UserMessage content="Can I break my lease early?" actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-sm text-muted-foreground"><button type="button">Copy</button></div></div></div>"`)
+    expect(html(<UserMessage parts={segmentedParts} actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="space-y-2"><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">I signed the lease in March.</div></div></div></div><div role="note" aria-label="Application note" data-synthetic-text="" class="min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground"><div class="mb-1 font-medium">Application note</div><div class="break-words whitespace-pre-wrap">Lease uploaded: lease.pdf</div></div><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Here it is.</div></div></div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-sm text-muted-foreground"><button type="button">Copy</button></div></div>"`)
   })
 
   it("renders UserMessage as before", () => {

package/src/chat/user-message.tsx

@@ -31,7 +31,7 @@ function formatTime(date: Date): string {
 
 function MessageActions({ children, align = "end" }: { children: ReactNode; align?: "start" | "end" }) {
   return (
-    <div className={`flex flex-wrap items-center ${align === "end" ? "justify-end" : "justify-start"} gap-1.5 text-xs text-muted-foreground`}>
+    <div className={`flex flex-wrap items-center ${align === "end" ? "justify-end" : "justify-start"} gap-1.5 text-sm text-muted-foreground`}>
       {children}
     </div>
   );

package/src/run/inline-thinking-item.tsx

@@ -80,7 +80,7 @@ export const InlineThinkingItem = memo(
             </div>
           </ExpandableContent>
         ) : (
-          <div className="px-3 py-2.5 text-xs text-muted-foreground">
+          <div className="px-3 py-2.5 text-sm text-muted-foreground">
             No reasoning text provided.
           </div>
         )}

package/src/run/inline-tool-item.test.tsx

@@ -57,7 +57,7 @@ describe("InlineToolItem", () => {
     expect(container.querySelector(".tangle-text-shimmer")).not.toBeNull();
   });
 
-  it("keeps the red dot and the collapsed error on failure", () => {
+  it("marks a failure on its glyph and keeps the collapsed error", () => {
     const { container } = render(
       <InlineToolItem
         part={part({ status: "error", error: "ENOENT: no such file", output: undefined })}

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

@@ -40,7 +40,7 @@ describe("RunRowShell", () => {
     expect(container.querySelector("[data-run-row-status]")).toBeNull();
   });
 
-  it("renders the red dot and the collapsed error on error", () => {
+  it("marks a failure on the row's own glyph, with the collapsed error under it", () => {
     const { container } = renderShell("error", {
       collapsedError: "exit code 1",
     });

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

@@ -7,9 +7,10 @@ import { formatDuration } from "../utils/format";
 export type RunRowStatus = "running" | "success" | "error" | "idle";
 
 /**
- * Trailing status indicator shared by every run row. Only `error` draws a
- * mark (a red dot). Success is silence, and a running row carries its state in
- * the title — a `TextShimmer` sweep — so neither renders anything here.
+ * A red dot for a failed row, for rows composed outside the shell. The shell
+ * itself marks a failure on the row's own glyph, beside its name, never at the
+ * far edge. Success is silence, and a running row carries its state in the
+ * title — a `TextShimmer` sweep.
  */
 export function RunRowStatusDot({ status }: { status: RunRowStatus }) {
   if (status !== "error") return null;
@@ -132,7 +133,11 @@ export function RunRowShell({
             >
               <span
                 aria-hidden
-                className="flex h-[1.375rem] w-[1.375rem] shrink-0 items-center justify-center text-muted-foreground"
+                data-run-row-status={status === "error" ? "error" : undefined}
+                className={cn(
+                  "flex h-[1.375rem] w-[1.375rem] shrink-0 items-center justify-center",
+                  status === "error" ? "text-[var(--surface-danger-text)]" : "text-muted-foreground",
+                )}
               >
                 <span
                   data-run-row-glyph=""
@@ -174,24 +179,21 @@ export function RunRowShell({
                 </span>
               ) : null}
 
-              <span className="ml-auto flex shrink-0 items-center gap-1.5">
-                {!isRunning && durationMs != null ? (
-                  <span
-                    data-run-row-duration=""
-                    className="font-mono text-[10px] tabular-nums text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
-                  >
-                    {formatDuration(durationMs)}
-                  </span>
-                ) : null}
-                <RunRowStatusDot status={status} />
-              </span>
+              {!isRunning && durationMs != null ? (
+                <span
+                  data-run-row-duration=""
+                  className="ml-auto shrink-0 font-mono text-sm tabular-nums text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+                >
+                  {formatDuration(durationMs)}
+                </span>
+              ) : null}
             </button>
           </Collapsible.Trigger>
 
           {collapsedError && !open ? (
             <div
               className={cn(
-                "pb-1.5 pr-2 text-xs leading-snug text-[var(--surface-danger-text)]",
+                "pb-1.5 pr-2 text-sm leading-snug text-[var(--surface-danger-text)]",
                 ERROR_INDENT,
               )}
             >