@tangle-network/ui 11.51.14 → 11.51.16

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 11.51.16
+
+### Patch Changes
+
+- 09798b6: Restore `LiveDuration` and `RunRowStatusDot` in `@tangle-network/ui/run`. @tangle-network/sandbox-ui 7.0.2 imports both, so their removal in 11.51.14 broke consumers in a patch release.
+
+## 11.51.15
+
+### Patch Changes
+
+- ab4348b: Restore `isOpen` (`@tangle-network/ui/run`) and `formatCost` and `formatCount` (`@tangle-network/ui/utils`). 11.51.14 removed them as unused, but the Discovery viewer imports them, so the removal broke a public API in a patch release.
+
 ## 11.51.14
 
 ### Patch Changes

package/dist/hooks.js

@@ -2,8 +2,8 @@ import { useRunGroups } from "./hooks/use-run-groups.js";
 import { useRunCollapseState } from "./hooks/use-run-collapse-state.js";
 import { useFollowTail } from "./hooks/use-follow-tail.js";
 import { useAutoScroll } from "./hooks/use-auto-scroll.js";
-import { useDropdownMenu } from "./hooks/use-dropdown-menu.js";
 import { useLiveTime, useRunNow } from "./hooks/use-live-time.js";
+import { useDropdownMenu } from "./hooks/use-dropdown-menu.js";
 import { useToolCallStream } from "./hooks/use-tool-call-stream.js";
 import { createAuthFetcher, useApiKey, useAuth } from "./hooks/use-auth.js";
 import { RealtimeSessionRegistry, useRealtimeSession } from "./hooks/use-realtime-session.js";

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/run/run-item-primitives.d.ts

@@ -0,0 +1,3 @@
+export declare function LiveDuration({ startTime }: {
+  startTime: number;
+}): import("react").JSX.Element;

package/dist/run/run-item-primitives.js

@@ -0,0 +1,12 @@
+import { formatDuration as formatSpanDuration } from "../utils/format.js";
+import { useLiveTime } from "../hooks/use-live-time.js";
+import { jsx } from "react/jsx-runtime";
+// src/run/run-item-primitives.tsx
+function LiveDuration({ startTime }) {
+	const elapsed = useLiveTime(100) - startTime;
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-xs font-mono text-neutral-400 dark:text-neutral-500 tabular-nums",
+		children: formatSpanDuration(elapsed)
+	});
+}
+export { LiveDuration };

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

@@ -1,5 +1,14 @@
 import { ReactNode } from "react";
 export type RunRowStatus = "running" | "success" | "error" | "idle";
+/**
+ * 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;
+}): import("react").JSX.Element | null;
 export interface RunRowShellProps {
   /** Semantic lead glyph (14px). At rest it is the row's only ornament; on
    *  hover and while open the expand chevron takes its slot. */

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

@@ -6,6 +6,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 // src/run/run-row-shell.tsx
+/**
+* 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;
+	return /* @__PURE__ */ jsx("span", {
+		"data-run-row-status": "error",
+		className: "h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--surface-danger-text)]"
+	});
+}
 const SHAPE_CLASS = {
 	single: "rounded-[var(--radius-lg)]",
 	first: "rounded-t-[var(--radius-lg)] rounded-b-[var(--radius-sm)]",
@@ -97,4 +110,4 @@ function RunRowShell({ icon, title, description, descriptionMono = false, status
 		})
 	});
 }
-export { RunRowShell };
+export { RunRowShell, RunRowStatusDot };

package/dist/run/status-meta.d.ts

@@ -11,6 +11,8 @@ export interface StatusMeta {
 }
 /** Any status string as a `RunStatus`; a value nothing names reads as Unknown, never as a guess. */
 export declare function runStatus(status: string): RunStatus;
+/** Whether a canonical run state can still advance. */
+export declare const isOpen: (status: RunStatus | (string & {})) => boolean;
 /** The label, glyph and colour token for a status, in every surface. */
 export declare function statusMeta(status: RunStatus | (string & {})): StatusMeta;
 export interface RunStatusIconProps extends Omit<LucideProps, "ref"> {

package/dist/run/status-meta.js

@@ -78,6 +78,12 @@ function runStatus(status) {
 	if (Object.hasOwn(META, key)) return key;
 	return Object.hasOwn(ALIASES, key) ? ALIASES[key] : "unknown";
 }
+/** Whether a canonical run state can still advance. */
+const isOpen = (status) => [
+	"running",
+	"waiting",
+	"needs-you"
+].includes(runStatus(status));
 /** The label, glyph and colour token for a status, in every surface. */
 function statusMeta(status) {
 	return META[runStatus(status)];
@@ -107,4 +113,4 @@ function RunStatusIcon({ status, className, style, ...props }) {
 		...props
 	});
 }
-export { RunStatusIcon, runStatus, statusMeta };
+export { RunStatusIcon, isOpen, runStatus, statusMeta };

package/dist/run.d.ts

@@ -1,12 +1,13 @@
 import { ToolCallStatus, ToolCallType } from "./run/tool-call-step.js";
 import { FeedSegment, ToolCallData, ToolCallFeed, ToolCallFeedProps, parseToolEvent } from "./run/tool-call-feed.js";
 import { RunGroup, RunGroupProps } from "./run/run-group.js";
-import { RunRowShell, RunRowShellProps, RunRowStatus } from "./run/run-row-shell.js";
+import { RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot } from "./run/run-row-shell.js";
 import { InlineToolItem, InlineToolItemProps } from "./run/inline-tool-item.js";
 import { InlineThinkingItem, InlineThinkingItemProps } from "./run/inline-thinking-item.js";
 import { ExpandedToolDetail, ExpandedToolDetailProps } from "./run/expanded-tool-detail.js";
+import { LiveDuration } from "./run/run-item-primitives.js";
 import { TaskList, TaskListItem, TaskListProps, TaskStatus, showsTaskPriority, taskProgress, taskStatus } from "./run/task-list.js";
 import { ApprovalCard, ApprovalCardProps, ApprovalDiffFile, ApprovalDiffSummary, ApprovalPlanStep } from "./run/approval-card.js";
 import { RunPhase, RunPhaseList } from "./run/run-phase-list.js";
-import { RunStatus, RunStatusIcon, RunStatusIconProps, StatusMeta, runStatus, statusMeta } from "./run/status-meta.js";
-export { ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, type RunStatus, RunStatusIcon, type RunStatusIconProps, type StatusMeta, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus };
+import { RunStatus, RunStatusIcon, RunStatusIconProps, StatusMeta, isOpen, runStatus, statusMeta } from "./run/status-meta.js";
+export { ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LiveDuration, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, type RunStatus, RunStatusIcon, type RunStatusIconProps, type StatusMeta, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, isOpen, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus };

package/dist/run.js

@@ -1,11 +1,12 @@
-import { RunStatusIcon, runStatus, statusMeta } from "./run/status-meta.js";
+import { RunStatusIcon, isOpen, runStatus, statusMeta } from "./run/status-meta.js";
 import { ExpandedToolDetail } from "./run/expanded-tool-detail.js";
-import { RunRowShell } from "./run/run-row-shell.js";
+import { RunRowShell, RunRowStatusDot } from "./run/run-row-shell.js";
 import { InlineToolItem } from "./run/inline-tool-item.js";
 import { InlineThinkingItem } from "./run/inline-thinking-item.js";
 import { RunGroup } from "./run/run-group.js";
+import { LiveDuration } from "./run/run-item-primitives.js";
 import { ToolCallFeed, parseToolEvent } from "./run/tool-call-feed.js";
 import { TaskList, showsTaskPriority, taskProgress, taskStatus } from "./run/task-list.js";
 import { ApprovalCard, ApprovalDiffSummary } from "./run/approval-card.js";
 import { RunPhaseList } from "./run/run-phase-list.js";
-export { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, RunGroup, RunPhaseList, RunRowShell, RunStatusIcon, TaskList, ToolCallFeed, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus };
+export { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, TaskList, ToolCallFeed, isOpen, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus };

package/dist/utils/format.d.ts

@@ -17,6 +17,10 @@ export declare function formatAxisDuration(ms: number): string;
 export declare const formatCompact: (value: number | null | undefined) => string;
 /** Span milliseconds, tenths below ten seconds, then seconds/minutes; days stay compact. */
 export declare function formatSpanDuration(ms: number): string;
+/** $0.12, $0.005, $12.40; never rounds a recorded nonzero cost to $0.00. */
+export declare function formatCost(usd: number): string;
+/** 9.8k, 754.4k, 1.2M with the exact count left to a title. */
+export declare function formatCount(n: number): string;
 /** Elapsed clock at millisecond precision, so zoomed axis ticks keep distinct labels. */
 export declare function formatClock(ms: number): string;
 /** Normalize labels to UTC without rewriting the source timestamp. */

package/dist/utils/format.js

@@ -49,6 +49,17 @@ function formatSpanDuration(ms) {
 	const precision = ms < 1e4 ? 100 : ms < 36e5 ? 1e3 : 6e4;
 	return ms >= 864e5 ? formatAxisDuration(ms) : ms < 1e3 ? `${Math.round(ms)}ms` : formatClock(Math.round(ms / precision) * precision);
 }
+/** $0.12, $0.005, $12.40; never rounds a recorded nonzero cost to $0.00. */
+function formatCost(usd) {
+	if (!Number.isFinite(usd) || usd < 0) return "—";
+	if (usd === 0) return "$0.00";
+	if (usd < .01) return `$${usd.toPrecision(1)}`;
+	return `$${usd.toFixed(2)}`;
+}
+/** 9.8k, 754.4k, 1.2M with the exact count left to a title. */
+function formatCount(n) {
+	return !Number.isSafeInteger(n) || n < 0 ? "—" : formatCompact(n);
+}
 /** Elapsed clock at millisecond precision, so zoomed axis ticks keep distinct labels. */
 function formatClock(ms) {
 	if (!Number.isFinite(ms) || ms < 0) return "—";
@@ -67,4 +78,4 @@ function formatUtcTime(value, includeDate = false) {
 	const iso = date.toISOString();
 	return `${includeDate ? iso.slice(0, 19).replace("T", " ") : iso.slice(11, 19)} UTC`;
 }
-export { formatAxisDuration, formatBytes, formatClock, formatCompact, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, plainTextFromMarkdown, truncateText };
+export { formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, plainTextFromMarkdown, truncateText };

package/dist/utils.d.ts

@@ -1,8 +1,8 @@
 import { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline } from "./lib/interaction.js";
 import { copyText } from "./utils/copy-text.js";
-import { formatAxisDuration, formatBytes, formatClock, formatCompact, formatDuration as formatSpanDuration, formatUtcTime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
+import { formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatDuration as formatSpanDuration, formatUtcTime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
 import { timeAgo } from "./utils/time-ago.js";
 import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
 import { cn } from "./lib/utils.js";
 import { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset } from "./lib/focus.js";
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatAxisDuration, formatBytes, formatClock, formatCompact, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };

package/dist/utils.js

@@ -1,8 +1,8 @@
 import { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline } from "./lib/interaction.js";
 import { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset } from "./lib/focus.js";
 import { cn } from "./lib/utils.js";
-import { formatAxisDuration, formatBytes, formatClock, formatCompact, formatDuration as formatSpanDuration, formatUtcTime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
+import { formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatDuration as formatSpanDuration, formatUtcTime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
 import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
 import { copyText } from "./utils/copy-text.js";
 import { timeAgo } from "./utils/time-ago.js";
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatAxisDuration, formatBytes, formatClock, formatCompact, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };

package/package.json

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

package/src/primitives/metric-strip.test.tsx

@@ -52,51 +52,6 @@ describe("MetricStrip", () => {
     expect(screen.getByText("$0.00").className).not.toContain("--surface-danger-text");
   });
 
-  it("retains the default two / sm:four grid", () => {
-    const { container } = render(<MetricStrip><Metric label="Runs" value={0} /></MetricStrip>);
-    const dl = container.querySelector("dl")!;
-    expect(dl.className.split(" ")).toEqual(expect.arrayContaining(["grid-cols-2", "sm:grid-cols-4"]));
-    expect(dl.className).not.toContain("lg:grid-cols");
-  });
-
-  it.each([3, 4, 5, 6] as const)("owns the grid and all nonoverlapping row-start guards for %i columns", (columns) => {
-    const { container } = render(
-      <MetricStrip columns={columns}>
-        {Array.from({ length: columns }, (_, i) => <Metric key={i} label={`Metric ${i}`} value={i} />)}
-      </MetricStrip>,
-    );
-    const dl = container.querySelector("dl")!;
-    expect(dl).not.toHaveAttribute("columns");
-    expect(dl.className).toContain("max-sm:[&>div:not(:nth-child(2n+1))]:border-l");
-    if (columns <= 4) {
-      expect(dl.className).toContain(`sm:grid-cols-${columns}`);
-      expect(dl.className).toContain(`sm:[&>div:not(:nth-child(${columns}n+1))]:border-l`);
-    } else {
-      expect(dl.className).toContain("sm:grid-cols-3");
-      expect(dl.className).toContain("sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l");
-      expect(dl.className).toContain(`lg:grid-cols-${columns}`);
-      expect(dl.className).toContain(`lg:[&>div:not(:nth-child(${columns}n+1))]:border-l`);
-    }
-    expect(dl.className).not.toContain("border-l-0");
-    for (const item of Array.from(dl.children)) expect(item.className).not.toContain("nth-child");
-  });
-
-  it("does not give a standalone Metric a strip divider", () => {
-    const { container } = render(<Metric label="Runs" value={0} />);
-    expect(container.firstElementChild!.className).not.toContain("border-l");
-  });
-
-  it("wraps full labels, values and qualifiers without relying on a mouse title", () => {
-    render(<MetricStrip><Metric label="Very long account label without loss" value="$1,284,003.10" hint="Personal wallet (0x1234abcd5678efgh)" /></MetricStrip>);
-    for (const text of ["Very long account label without loss", "$1,284,003.10", "Personal wallet (0x1234abcd5678efgh)"]) {
-      const node = screen.getByText(text);
-      expect(node.className).toContain("[overflow-wrap:anywhere]");
-      expect(node.className).not.toContain("truncate");
-    }
-    expect(screen.getByText("$1,284,003.10")).toHaveAttribute("title", "$1,284,003.10");
-    expect(screen.getByText("Personal wallet (0x1234abcd5678efgh)")).toHaveAttribute("title", "Personal wallet (0x1234abcd5678efgh)");
-  });
-
   it("preserves refs, attributes, caller classes and fragment/conditional DOM order", () => {
     const strip = React.createRef<HTMLDListElement>();
     const item = React.createRef<HTMLDivElement>();

package/src/primitives/status-pill.test.tsx

@@ -28,31 +28,6 @@ describe("StatusPill", () => {
     expect(glyph).toHaveAttribute("aria-hidden", "true");
   });
 
-  it.each(TONES)("brings %s's own paired background", (tone) => {
-    const { container } = render(<StatusPill tone={tone}>Status</StatusPill>);
-    const pill = container.firstElementChild as HTMLElement;
-    expect(pill.className).toContain(`bg-[var(--surface-`);
-    expect(pill.className).toContain("border");
-  });
-
-  // A tone colour is solved against its own background. `bare` drops that
-  // background, so the tone may ride on the glyph only — lifting it onto the
-  // label would put it on whatever plane the caller happens to be on.
-  it.each(TONES)("keeps %s's tone off the label in bare mode", (tone) => {
-    const { container } = render(
-      <StatusPill bare tone={tone}>
-        Status
-      </StatusPill>,
-    );
-    const pill = container.firstElementChild as HTMLElement;
-    expect(pill.className).toContain("bg-transparent");
-    expect(pill.className).not.toContain("bg-[var(--surface-");
-
-    const glyphWrapper = container.querySelector("svg")
-      ?.parentElement as HTMLElement;
-    expect(glyphWrapper.className).toContain("text-[var(--surface-");
-  });
-
   // Guards the reason TONE_TEXT is declared rather than recovered by searching
   // TONE_SURFACE for a `text-` class: a miss there yields undefined and removes
   // the tone from the only channel bare mode has left.
@@ -68,22 +43,6 @@ describe("StatusPill", () => {
     expect(glyphWrapper.className).toMatch(/text-\[var\(--surface-[a-z]+-text\)\]/);
   });
 
-  // `px-2` from the size and `px-0` from bare are the same utility group, so
-  // which one lands is decided by the class merge rather than by reading order.
-  // Asserting the resolved class list keeps that a guarantee: a bare pill has to
-  // sit flush against the text beside it, and silently keeping the size padding
-  // would space it like a chip that lost only its background.
-  it.each(["sm", "md"] as const)("drops the %s size padding in bare mode", (size) => {
-    const { container } = render(
-      <StatusPill bare size={size} tone="info">
-        Queued
-      </StatusPill>,
-    );
-    const cls = (container.firstElementChild as HTMLElement).className;
-    expect(cls).toContain("px-0");
-    expect(cls).not.toMatch(/(^| )px-2(\.5)?( |$)/);
-  });
-
   it("gives no two tones the same silhouette", () => {
     const shapes = TONES.map((tone) => {
       const { container } = render(<StatusPill tone={tone}>S</StatusPill>);
@@ -91,15 +50,4 @@ describe("StatusPill", () => {
     });
     expect(new Set(shapes).size).toBe(shapes.length);
   });
-
-  it("takes a larger size", () => {
-    const { container } = render(
-      <StatusPill size="md" tone="info">
-        Queued
-      </StatusPill>,
-    );
-    expect((container.firstElementChild as HTMLElement).className).toContain(
-      "text-sm",
-    );
-  });
 });

package/src/run/index.ts

@@ -1,6 +1,7 @@
 export { RunGroup, type RunGroupProps } from "./run-group";
 export {
   RunRowShell,
+  RunRowStatusDot,
   type RunRowShellProps,
   type RunRowStatus,
 } from "./run-row-shell";
@@ -13,6 +14,7 @@ export {
   ExpandedToolDetail,
   type ExpandedToolDetailProps,
 } from "./expanded-tool-detail";
+export { LiveDuration } from "./run-item-primitives";
 // ToolCallStep/ToolCallGroup are internal adapters over InlineToolItem (used by
 // AgentTimeline + ToolCallFeed); only their status/type vocabulary is public
 // because ToolCallData references it.
@@ -38,6 +40,7 @@ export { RunPhaseList, type RunPhase } from "./run-phase-list";
 export {
   RunStatusIcon,
   runStatus,
+  isOpen,
   statusMeta,
   type RunStatus,
   type RunStatusIconProps,

package/src/run/run-item-primitives.tsx

@@ -0,0 +1,12 @@
+import { useLiveTime } from "../hooks/use-live-time";
+import { formatDuration } from "../utils/format";
+
+export function LiveDuration({ startTime }: { startTime: number }) {
+  const elapsed = useLiveTime(100) - startTime;
+
+  return (
+    <span className="text-xs font-mono text-neutral-400 dark:text-neutral-500 tabular-nums">
+      {formatDuration(elapsed)}
+    </span>
+  );
+}

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

@@ -7,6 +7,22 @@ import { formatDuration } from "../utils/format";
 
 export type RunRowStatus = "running" | "success" | "error" | "idle";
 
+/**
+ * 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;
+  return (
+    <span
+      data-run-row-status="error"
+      className="h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--surface-danger-text)]"
+    />
+  );
+}
+
 export interface RunRowShellProps {
   /** Semantic lead glyph (14px). At rest it is the row's only ornament; on
    *  hover and while open the expand chevron takes its slot. */

package/src/run/status-meta.tsx

@@ -57,6 +57,9 @@ export function runStatus(status: string): RunStatus {
   return Object.hasOwn(ALIASES, key) ? ALIASES[key] : "unknown";
 }
 
+/** Whether a canonical run state can still advance. */
+export const isOpen = (status: RunStatus | (string & {})): boolean => ["running", "waiting", "needs-you"].includes(runStatus(status));
+
 /** The label, glyph and colour token for a status, in every surface. */
 export function statusMeta(status: RunStatus | (string & {})): StatusMeta {
   return META[runStatus(status)];

package/src/utils/format.ts

@@ -57,6 +57,19 @@ export function formatSpanDuration(ms: number): string {
   return ms >= 86_400_000 ? formatAxisDuration(ms) : ms < 1000 ? `${Math.round(ms)}ms` : formatClock(Math.round(ms / precision) * precision)
 }
 
+/** $0.12, $0.005, $12.40; never rounds a recorded nonzero cost to $0.00. */
+export function formatCost(usd: number): string {
+  if (!Number.isFinite(usd) || usd < 0) return '—'
+  if (usd === 0) return '$0.00'
+  if (usd < 0.01) return `$${usd.toPrecision(1)}`
+  return `$${usd.toFixed(2)}`
+}
+
+/** 9.8k, 754.4k, 1.2M with the exact count left to a title. */
+export function formatCount(n: number): string {
+  return !Number.isSafeInteger(n) || n < 0 ? '—' : formatCompact(n)
+}
+
 /** Elapsed clock at millisecond precision, so zoomed axis ticks keep distinct labels. */
 export function formatClock(ms: number): string {
   if (!Number.isFinite(ms) || ms < 0) return '—'