@tangle-network/ui 11.45.0 → 11.47.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- 7924be7: SegmentedControl (row): the selected segment is a raised thumb on one quiet well instead of a tint inside an inset ring, the track uses the hairline border token, and the control is 36px tall so it sits inside a 44px toolbar with air above and below.
+
+### Patch Changes
+
+- 9bd1487: RunRowShell shows its description (the file, command or query) at every width, truncated, instead of hiding it below 640px, where a transcript read as a column of bare verbs ("Read", "Read", "Shell").
+
 ## 11.45.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/primitives/segmented-control.d.ts

@@ -11,10 +11,13 @@ import * as React from "react";
  * console warning fires when both are omitted.
  *
  * Design rules baked into the default variant:
- *   - The row track is a field well (`--well`, `--field-border`), so the
- *     control reads as one inset group on whatever plane it sits on.
- *   - Only the SELECTED segment shows a surface colour + accent text: the
- *     shared selected state (`ixSelected`: tint plus an inset ring). A tab
+ *   - The row track is one quiet well (`--well`, the hairline `border`), so
+ *     the control reads as one inset group on whatever plane it sits on, and
+ *     it is compact (36px) so it sits inside a 44px toolbar with air above
+ *     and below instead of touching its edges.
+ *   - Only the SELECTED segment shows a surface: a raised thumb (the card
+ *     colour with a hairline and a soft shadow) with accent text. No ring is
+ *     drawn around the track's segments, so the group never stacks rings. A tab
  *     shows it as an underline instead (`ixTabUnderline`).
  *   - Unselected segments have NO background — they're plain-text labels
  *     that darken on hover. This keeps the selected segment as the

package/dist/primitives/segmented-control.js

@@ -7,6 +7,8 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 // src/primitives/segmented-control.tsx
+/** The row variant's selected segment: a raised thumb on the well, not a tint inside a ring. */
+const rowThumb = "aria-checked:bg-card aria-checked:border-border aria-checked:shadow-[0_1px_2px_rgb(0_0_0/0.08)] hover:aria-checked:bg-card";
 /** Size of the edge chevron, in px. The selected option is kept this far
 *  (plus the strip's own padding) from an edge so the chevron never covers it. */
 const SCROLL_CUE_SIZE = 32;
@@ -123,7 +125,7 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 		ref: stripRef,
 		onKeyDown: handleKeyDown,
 		onScroll: measureOverflow,
-		className: cn("relative flex gap-1", variant === "row" && "flex-wrap items-center rounded-lg border border-[var(--field-border)] bg-[var(--well)] p-1", variant === "tabs" && "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", className),
+		className: cn("relative flex gap-1", variant === "row" && "flex-wrap items-center rounded-lg border border-border bg-[var(--well)] p-0.5", variant === "tabs" && "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto", className),
 		children: [
 			overflow.start && /* @__PURE__ */ jsx(ScrollCue, {
 				side: "start",
@@ -146,10 +148,10 @@ function SegmentedControl({ value, onValueChange, options, variant = "row", clas
 						if (!active) onValueChange(option.value);
 					},
 					className: cn("relative inline-flex items-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,background-color,border-color,box-shadow]", variant === "row" && [
-						"rounded-md border border-transparent px-3 py-1.5",
+						"rounded-md border border-transparent px-3 py-1",
 						"focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0",
 						"hover:bg-[var(--ix-hover-bg)] active:bg-[var(--ix-sel-bg)]",
-						"aria-pressed:bg-[var(--ix-sel-bg)] aria-pressed:text-[var(--accent-text)] aria-pressed:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-checked:bg-[var(--ix-sel-bg)] aria-checked:text-[var(--accent-text)] aria-checked:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] aria-[current=page]:bg-[var(--ix-sel-bg)] aria-[current=page]:text-[var(--accent-text)] aria-[current=page]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=on]:bg-[var(--ix-sel-bg)] data-[state=on]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)] data-[state=active]:bg-[var(--ix-sel-bg)] data-[state=active]:text-[var(--accent-text)] data-[state=active]:shadow-[inset_0_0_0_1px_var(--ix-sel-ring)]"
+						rowThumb
 					], variant === "tabs" && [
 						"shrink-0 rounded-none border-b-2 border-transparent -mb-px px-4 py-2",
 						"pointer-coarse:min-h-11 pointer-coarse:min-w-11",

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"),
@@ -76,22 +78,19 @@ function RunRowShell({ icon, title, description, descriptionMono = false, status
 									children: title
 								}),
 								description ? /* @__PURE__ */ jsx("span", {
-									className: cn("hidden min-w-0 flex-1 truncate text-sm text-muted-foreground transition-colors group-hover:text-foreground sm:inline", descriptionMono && "font-mono"),
+									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.45.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/primitives/interaction-states.test.tsx

@@ -191,15 +191,17 @@ describe("each primitive renders its interaction helper", () => {
     expect(classes(screen.getByText(/Guests, staff/))).toContain("line-clamp-2");
   });
 
-  it("SegmentedControl row: a well track, soft items, the selected state on aria-checked", () => {
+  it("SegmentedControl row: a quiet well track, soft items, a raised thumb on aria-checked and no ring", () => {
     const options = [{ value: "a", label: "A–Z" }, { value: "b", label: "Recent" }];
     render(<SegmentedControl aria-label="Sort" value="a" onValueChange={() => {}} options={options} />);
     const track = screen.getByRole("radiogroup");
     expect(classes(track)).toContain("bg-[var(--well)]");
-    expect(classes(track)).toContain("border-[var(--field-border)]");
+    expect(classes(track)).toContain("border-border");
     expect(classes(track)).not.toContain("bg-card");
     for (const radio of screen.getAllByRole("radio")) {
-      expectHelpers(radio, ixControlSoft, ixSelected);
+      expectHelpers(radio, ixControlSoft);
+      expect(classes(radio)).toContain("aria-checked:bg-card");
+      expect([...classes(radio)].some((token) => token.includes("--ix-sel-ring"))).toBe(false);
       for (const token of FOCUS_RING) expect(classes(radio)).toContain(token);
       expect(classes(radio)).not.toContain("bg-[var(--accent-surface)]");
     }

package/src/primitives/segmented-control.test.tsx

@@ -271,9 +271,10 @@ describe("SegmentedControl", () => {
     const radiogroup = screen.getByRole("radiogroup")
     expect(radiogroup.className).toContain("flex-wrap")
     expect(radiogroup.className).toContain("rounded-lg")
-    // The row track is a field well, so it steps off whatever plane holds it.
+    // The row track is one quiet well: the hairline border, not a field's strong border.
     expect(radiogroup.className).toContain("bg-[var(--well)]")
-    expect(radiogroup.className).toContain("border-[var(--field-border)]")
+    expect(radiogroup.className).toContain("border-border")
+    expect(radiogroup.className).not.toContain("border-[var(--field-border)]")
   })
 
   it("applies tabs variant classes with nowrap", () => {

package/src/primitives/segmented-control.tsx

@@ -6,9 +6,13 @@ import { ChevronLeft, ChevronRight } from "lucide-react"
 import * as React from "react"
 import { touchTarget } from "../lib/control-presentation"
 import { focusRing, focusRingInset } from "../lib/focus"
-import { ixControlSoft, ixSelected, ixTabUnderline } from "../lib/interaction"
+import { ixControlSoft, ixTabUnderline } from "../lib/interaction"
 import { cn } from "../lib/utils"
 
+/** The row variant's selected segment: a raised thumb on the well, not a tint inside a ring. */
+const rowThumb =
+  "aria-checked:bg-card aria-checked:border-border aria-checked:shadow-[0_1px_2px_rgb(0_0_0/0.08)] hover:aria-checked:bg-card"
+
 /**
  * Visually lightweight segmented control for single-value selection.
  *
@@ -21,10 +25,13 @@ import { cn } from "../lib/utils"
  * console warning fires when both are omitted.
  *
  * Design rules baked into the default variant:
- *   - The row track is a field well (`--well`, `--field-border`), so the
- *     control reads as one inset group on whatever plane it sits on.
- *   - Only the SELECTED segment shows a surface colour + accent text: the
- *     shared selected state (`ixSelected`: tint plus an inset ring). A tab
+ *   - The row track is one quiet well (`--well`, the hairline `border`), so
+ *     the control reads as one inset group on whatever plane it sits on, and
+ *     it is compact (36px) so it sits inside a 44px toolbar with air above
+ *     and below instead of touching its edges.
+ *   - Only the SELECTED segment shows a surface: a raised thumb (the card
+ *     colour with a hairline and a soft shadow) with accent text. No ring is
+ *     drawn around the track's segments, so the group never stacks rings. A tab
  *     shows it as an underline instead (`ixTabUnderline`).
  *   - Unselected segments have NO background — they're plain-text labels
  *     that darken on hover. This keeps the selected segment as the
@@ -224,7 +231,7 @@ export function SegmentedControl<T extends string = string>({
       className={cn(
         "relative flex gap-1",
         variant === "row" &&
-          "flex-wrap items-center rounded-lg border border-[var(--field-border)] bg-[var(--well)] p-1",
+          "flex-wrap items-center rounded-lg border border-border bg-[var(--well)] p-0.5",
         variant === "tabs" &&
           "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto",
         className,
@@ -251,7 +258,7 @@ export function SegmentedControl<T extends string = string>({
             }}
             className={cn(
               "relative inline-flex items-center gap-2 whitespace-nowrap text-sm font-medium transition-[color,background-color,border-color,box-shadow]",
-              variant === "row" && ["rounded-md border border-transparent px-3 py-1.5", focusRing, ixControlSoft, ixSelected],
+              variant === "row" && ["rounded-md border border-transparent px-3 py-1", focusRing, ixControlSoft, rowThumb],
               // The strip scrolls horizontally, which would clip an outer ring.
               // The border-b-2 slot stays transparent: the underline is ixTabUnderline's inset shadow.
               variant === "tabs" && ["shrink-0 rounded-none border-b-2 border-transparent -mb-px px-4 py-2", touchTarget, focusRingInset, ixTabUnderline],

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=""
@@ -166,7 +171,7 @@ export function RunRowShell({
               {description ? (
                 <span
                   className={cn(
-                    "hidden min-w-0 flex-1 truncate text-sm text-muted-foreground transition-colors group-hover:text-foreground sm:inline",
+                    "min-w-0 flex-1 truncate text-sm text-muted-foreground transition-colors group-hover:text-foreground",
                     descriptionMono && "font-mono",
                   )}
                 >
@@ -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,
               )}
             >