@tangle-network/ui 11.51.13 → 11.51.15

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 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
+
+- 40a98a3: Add `ExpandablePanel` to `@tangle-network/ui/primitives`: any panel can fill the screen in place, keeping its subtree, and Escape closes the top-most one after inner popovers, menus and dialogs.
+
 ## 11.51.13
 
 ### Patch Changes
@@ -551,7 +563,7 @@
 
 ### Patch Changes
 
-- 11fbba5: Chat text renders at the 15px body size. The user bubble, assistant prose, legacy `ChatMessage` and thinking timer wrote their size tokens as `text-[var(--font-size-*)]`, which Tailwind compiles to a color, so assistant prose fell back to the Markdown default of 14px and the user bubble inherited 16px. They now use `text-[length:var(...)]`, and the dist check fails on the untyped form.
+- 11fbba5: Chat text renders at the 15px body size. The user bubble, assistant prose, legacy `ChatMessage` and thinking timer wrote their size tokens as `text-[var(--font-size-…)]`, which Tailwind compiles to a color, so assistant prose fell back to the Markdown default of 14px and the user bubble inherited 16px. They now use `text-[length:var(...)]`, and the dist check fails on the untyped form.
   
   The streaming caret follows the last word instead of starting a new line. A code block that scrolls sideways takes keyboard focus as a named region (axe `scrollable-region-focusable`). The Show more toggle under a tool's output or error sits inside the card's inset instead of against its edge.
 

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 { useLiveTime, useRunNow } from "./hooks/use-live-time.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 { RealtimeSessionRegistry, useRealtimeSession } from "./hooks/use-realtime-session.js";

package/dist/index.d.ts

@@ -110,13 +110,13 @@ import { PeriodDelta, SeriesExtent, SeriesPoint, SeriesPointInput, SeriesScale,
 import { SeriesSparkline, SeriesSparklineProps } from "./primitives/series-sparkline.js";
 import { ChartReferenceLine, MetricChart, MetricChartProps } from "./primitives/metric-chart.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
+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, RunRowStatusDot } from "./run/run-row-shell.js";
+import { RunRowShell, RunRowShellProps, RunRowStatus } 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";
@@ -147,4 +147,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, 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 };
+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, 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

@@ -66,6 +66,7 @@ import { normalizeSeries, periodDelta, seriesAreaPath, seriesExtent, seriesLineP
 import { SeriesSparkline } from "./primitives/series-sparkline.js";
 import { MetricChart } from "./primitives/metric-chart.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.js";
+import { ExpandablePanel } from "./primitives/expandable-panel.js";
 import { Logo, TangleKnot } from "./primitives.js";
 import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
 import { useRunGroups } from "./hooks/use-run-groups.js";
@@ -82,7 +83,7 @@ import { QuestionPreview } from "./tool-previews/question-preview.js";
 import { DiffPreview } from "./tool-previews/diff-preview.js";
 import { RunStatusIcon, isOpen, runStatus, statusMeta } from "./run/status-meta.js";
 import { ExpandedToolDetail } from "./run/expanded-tool-detail.js";
-import { RunRowShell, RunRowStatusDot } from "./run/run-row-shell.js";
+import { RunRowShell } 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";
@@ -101,8 +102,6 @@ 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";
@@ -120,6 +119,7 @@ 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 +131,4 @@ import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMap
 import { copyText } from "./utils/copy-text.js";
 import { timeAgo } from "./utils/time-ago.js";
 import { RedactedDocument } from "./redaction/redacted-document.js";
-export { AgentTimeline, AgentTimelineColumn, AgentTimelineStep, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiSchema, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ComplianceBadge, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsNote, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, SpeakerHeader, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TaskList, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, Wizard, WizardStep, WriteFilePreview, activeSessionsAtom, addMessage, addParts, agentTimelineStepKind, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, 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 };
+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, 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/primitives/expandable-panel.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export interface ExpandablePanelProps {
+  children?: React.ReactNode;
+  /** Accessible name: the toggle reads "Expand <label>" and "Close full screen <label>". */
+  label: string;
+  expanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  className?: string;
+  actions?: React.ReactNode;
+}
+/**
+ * A panel that fills the viewport in place and returns on Escape. The subtree
+ * never moves (no portal), so chart, canvas and conversation state and scroll
+ * survive the switch. Radix popovers, menus and dialogs inside take Escape
+ * first: they prevent its default, which this panel respects. An ancestor
+ * with a transform or filter would contain the fixed panel, so avoid one.
+ */
+declare function ExpandablePanel({ children, label, expanded: expandedProp, onExpandedChange, className, actions }: ExpandablePanelProps): React.JSX.Element;
+export { ExpandablePanel };

package/dist/primitives/expandable-panel.js

@@ -0,0 +1,69 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Maximize2, Minimize2 } from "lucide-react";
+// src/primitives/expandable-panel.tsx
+const openPanels = [];
+let bodyOverflow = "";
+/**
+* A panel that fills the viewport in place and returns on Escape. The subtree
+* never moves (no portal), so chart, canvas and conversation state and scroll
+* survive the switch. Radix popovers, menus and dialogs inside take Escape
+* first: they prevent its default, which this panel respects. An ancestor
+* with a transform or filter would contain the fixed panel, so avoid one.
+*/
+function ExpandablePanel({ children, label, expanded: expandedProp, onExpandedChange, className, actions }) {
+	const [expandedState, setExpandedState] = React.useState(false);
+	const expanded = expandedProp ?? expandedState;
+	const toggleRef = React.useRef(null);
+	const panelRef = React.useRef(null);
+	const wasExpanded = React.useRef(expanded);
+	const setExpanded = (next) => {
+		if (expandedProp === void 0) setExpandedState(next);
+		onExpandedChange?.(next);
+	};
+	const setExpandedRef = React.useRef(setExpanded);
+	setExpandedRef.current = setExpanded;
+	React.useEffect(() => {
+		if (wasExpanded.current && !expanded) toggleRef.current?.focus();
+		wasExpanded.current = expanded;
+		const id = panelRef.current;
+		if (!expanded || !id) return;
+		if (openPanels.length === 0) bodyOverflow = document.body.style.overflow;
+		openPanels.push(id);
+		document.body.style.overflow = "hidden";
+		const onKeyDown = (event) => {
+			const top = openPanels.filter((p) => !openPanels.some((q) => q !== p && p.contains(q))).pop();
+			if (event.key !== "Escape" || event.defaultPrevented || top !== id) return;
+			event.preventDefault();
+			setExpandedRef.current(false);
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("keydown", onKeyDown);
+			openPanels.splice(openPanels.indexOf(id), 1);
+			if (openPanels.length === 0) document.body.style.overflow = bodyOverflow;
+		};
+	}, [expanded]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: panelRef,
+		"data-expandable-panel": "",
+		"data-expanded": expanded ? "" : void 0,
+		className: cn("group/expandable relative flex min-h-0 flex-col", className, expanded && "fixed inset-0 z-50 m-0 size-auto min-h-0 min-w-0 max-h-none max-w-none rounded-none transform-none bg-background"),
+		children: [children, /* @__PURE__ */ jsxs("div", {
+			className: cn("absolute right-2 top-2 z-10 flex items-center gap-1 transition-opacity", expanded ? "opacity-100" : "opacity-0 group-hover/expandable:opacity-100 group-focus-within/expandable:opacity-100 pointer-coarse:opacity-100"),
+			children: [actions, /* @__PURE__ */ jsx(Button, {
+				ref: toggleRef,
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": `${expanded ? "Close full screen" : "Expand"} ${label}`,
+				onClick: () => setExpanded(!expanded),
+				children: expanded ? /* @__PURE__ */ jsx(Minimize2, { "aria-hidden": true }) : /* @__PURE__ */ jsx(Maximize2, { "aria-hidden": true })
+			})]
+		})]
+	});
+}
+export { ExpandablePanel };

package/dist/primitives.d.ts

@@ -61,5 +61,6 @@ import { PeriodDelta, SeriesExtent, SeriesPoint, SeriesPointInput, SeriesScale,
 import { SeriesSparkline, SeriesSparklineProps } from "./primitives/series-sparkline.js";
 import { ChartReferenceLine, MetricChart, MetricChartProps } from "./primitives/metric-chart.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
+import { ExpandablePanel, ExpandablePanelProps } from "./primitives/expandable-panel.js";
 import { Logo, LogoProps, TangleKnot } from "@tangle-network/brand";
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ComplianceBadge, type ComplianceBadgeProps, type ComplianceProduct, type ComplianceStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, Field, type FieldProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, 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, 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, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ComplianceBadge, type ComplianceBadgeProps, type ComplianceProduct, type ComplianceStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandablePanel, type ExpandablePanelProps, Field, type FieldProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, 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, 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, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };

package/dist/primitives.js

@@ -61,5 +61,6 @@ import { normalizeSeries, periodDelta, seriesAreaPath, seriesExtent, seriesLineP
 import { SeriesSparkline } from "./primitives/series-sparkline.js";
 import { MetricChart } from "./primitives/metric-chart.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.js";
+import { ExpandablePanel } from "./primitives/expandable-panel.js";
 import { Logo, TangleKnot } from "@tangle-network/brand";
-export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, 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, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Field, FilterField, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, Input, Label, Logo, Metric, MetricChart, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, 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, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, Wizard, WizardStep, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };
+export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, 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, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandablePanel, Field, FilterField, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, Input, Label, Logo, Metric, MetricChart, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, 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, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, Wizard, WizardStep, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };

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

@@ -1,14 +1,5 @@
 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. */
@@ -22,10 +13,6 @@ export interface RunRowShellProps {
   /** Render the description in mono (tools) vs prose (reasoning). */
   descriptionMono?: boolean;
   status?: RunRowStatus;
-  /** @deprecated The shell no longer ticks a live duration while running; the
-   *  running state lives in the title (`TextShimmer`). Accepted and ignored so
-   *  existing callers keep compiling. */
-  startTime?: number;
   /** Static duration, revealed on hover once the row is no longer running. */
   durationMs?: number;
   /** Radius shaping when rows are stacked into a group. */

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

@@ -1,3 +1,4 @@
+import { focusRingInset } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import { formatDuration as formatSpanDuration } from "../utils/format.js";
 import { useState } from "react";
@@ -5,19 +6,6 @@ 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)]",
@@ -58,7 +46,7 @@ function RunRowShell({ icon, title, description, descriptionMono = false, status
 						disabled: !expandable,
 						children: /* @__PURE__ */ jsxs("button", {
 							type: "button",
-							className: cn("group flex w-full items-center gap-2 text-left", HEADER_INSET, expandable ? "cursor-pointer" : "cursor-default"),
+							className: cn(focusRingInset, "group flex w-full items-center gap-2 text-left", HEADER_INSET, expandable ? "cursor-pointer" : "cursor-default"),
 							children: [
 								/* @__PURE__ */ jsxs("span", {
 									"aria-hidden": true,
@@ -109,4 +97,4 @@ function RunRowShell({ icon, title, description, descriptionMono = false, status
 		})
 	});
 }
-export { RunRowShell, RunRowStatusDot };
+export { RunRowShell };

package/dist/run.d.ts

@@ -1,13 +1,12 @@
 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, RunRowStatusDot } from "./run/run-row-shell.js";
+import { RunRowShell, RunRowShellProps, RunRowStatus } 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, 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 };
+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, isOpen, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus };

package/dist/run.js

@@ -1,12 +1,11 @@
 import { RunStatusIcon, isOpen, runStatus, statusMeta } from "./run/status-meta.js";
 import { ExpandedToolDetail } from "./run/expanded-tool-detail.js";
-import { RunRowShell, RunRowStatusDot } from "./run/run-row-shell.js";
+import { RunRowShell } 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, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, TaskList, ToolCallFeed, isOpen, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus };
+export { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, RunGroup, RunPhaseList, RunRowShell, RunStatusIcon, TaskList, ToolCallFeed, isOpen, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus };

package/package.json

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

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

@@ -1,81 +1,14 @@
 import * as React from "react";
 import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
-import { controlHeight, controlText, fieldPresentation } from "../lib/control-presentation";
 import { HelpText } from "./help-text";
 import { Label } from "./label";
-import { Button, buttonVariants } from "./button";
 import { Input, Textarea } from "./input";
 import { Select, SelectTrigger, SelectValue } from "./select";
 
 afterEach(cleanup);
 
 describe("shared control presentation", () => {
-  it("uses the field well, not the border/track alias, with scoped foreground", () => {
-    // The well is the brand's --well context variable; Toolbar can still pick the fill.
-    expect(fieldPresentation).toContain("bg-[var(--field-surface,var(--well))]");
-    expect(fieldPresentation.split(" ")).not.toContain("bg-input");
-    expect(fieldPresentation.split(" ")).not.toContain("bg-card");
-    // ixField's --field-border replaces focusField's resting border-border.
-    expect(fieldPresentation.split(" ")).toContain("border-[var(--field-border)]");
-    expect(fieldPresentation.split(" ")).not.toContain("border-border");
-    expect(fieldPresentation).toContain("text-foreground");
-  });
-
-  it("puts Button, Input, Textarea and SelectTrigger on one height and text scale", () => {
-    const classes = (name: string) => screen.getByLabelText(name).className.split(" ");
-    const { rerender } = render(<><Input aria-label="Input" /><Textarea aria-label="Textarea" /><Button aria-label="Action">Action</Button><Select><SelectTrigger aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
-    // The default is md for every control: one 36px height, one 14px text size, one corner.
-    for (const name of ["Input", "Action", "Select"]) {
-      expect(classes(name)).toContain(controlHeight.md);
-      expect(classes(name)).toContain(controlText.md);
-      expect(classes(name)).toContain("rounded-lg");
-    }
-    expect(classes("Textarea")).toContain(controlText.md);
-    expect(screen.getByLabelText("Textarea").className).toContain("min-h-[120px]");
-    for (const size of ["sm", "md", "lg"] as const) {
-      rerender(<><Input size={size} aria-label="Input" /><Textarea size={size} aria-label="Textarea" /><Button size={size} aria-label="Action">Action</Button><Select><SelectTrigger size={size} aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
-      for (const name of ["Input", "Action", "Select"]) {
-        expect(classes(name), `${name} ${size}`).toContain(controlHeight[size]);
-        expect(classes(name), `${name} ${size}`).toContain(controlText[size]);
-        expect(classes(name), `${name} ${size}`).toContain(size === "sm" ? "rounded-md" : "rounded-lg");
-        expect(screen.getByLabelText(name)).not.toHaveAttribute("size");
-      }
-      expect(classes("Textarea")).toContain(controlText[size]);
-    }
-    // Fields never drop below 16px on a coarse pointer (iOS zooms on focus otherwise).
-    for (const name of ["Input", "Textarea", "Select"]) expect(classes(name)).toContain("pointer-coarse:text-base");
-    expect(classes("Action")).not.toContain("pointer-coarse:text-base");
-  });
-
-  it("keeps the explicit compact and touch sizes", () => {
-    const { rerender } = render(<><Input size="compact" aria-label="Input" /><Button size="compact">Action</Button><Select><SelectTrigger size="compact" aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
-    for (const size of ["compact", "touch"] as const) {
-      rerender(<><Input size={size} aria-label="Input" /><Textarea size={size} aria-label="Textarea" /><Button size={size}>Action</Button><Select><SelectTrigger size={size} aria-label="Select"><SelectValue /></SelectTrigger></Select></>);
-      for (const name of ["Input", "Select"]) {
-        expect(screen.getByLabelText(name).className).toContain(size === "compact" ? "h-[var(--control-height)]" : "min-h-11");
-        expect(screen.getByLabelText(name).className.split(" ")).toContain("rounded-lg");
-        expect(screen.getByLabelText(name)).not.toHaveAttribute("size");
-      }
-      expect(screen.getByText("Action").className).toContain(size === "compact" ? "h-[var(--control-height)]" : "min-h-11");
-      expect(screen.getByLabelText("Textarea")).not.toHaveAttribute("size");
-    }
-  });
-
-  it("lets a file input's selector button take the field's text size", () => {
-    render(<Input type="file" size="lg" aria-label="Upload" />);
-    const classes = screen.getByLabelText("Upload").className.split(" ");
-    expect(classes).toContain("text-[length:var(--control-text-lg,1rem)]");
-    expect(classes.filter((name) => name.startsWith("file:text-"))).toEqual([]);
-  });
-
-  it("gives icon buttons squares on the same heights", () => {
-    render(<><Button size="icon-sm" aria-label="Small" /><Button size="icon" aria-label="Medium" /><Button size="icon-lg" aria-label="Large" /></>);
-    expect(screen.getByLabelText("Small").className).toContain("size-[var(--control-height-sm,2rem)]");
-    expect(screen.getByLabelText("Medium").className).toContain("size-[var(--control-height,2.25rem)]");
-    expect(screen.getByLabelText("Large").className).toContain("size-[var(--control-height-lg,2.75rem)]");
-  });
-
   it("renders labels and help text at one size each, and wires hint and error to the field", () => {
     render(<><Label htmlFor="x">Name</Label><HelpText>Plain</HelpText><Input label="Email" hint="We never share it" error="Enter an address" /></>);
     expect(screen.getByText("Name").className).toContain("text-[length:var(--font-size-label,0.875rem)]");
@@ -105,29 +38,4 @@ describe("shared control presentation", () => {
     expect(trigger.current).toBeDisabled();
     expect(trigger.current!.className.split(" ")).toContain("h-12");
   });
-
-  it("uses accent ink for link actions while retaining filled action foregrounds and scale motion", () => {
-    expect(buttonVariants({ variant: "link" })).toContain("text-[var(--accent-text)]");
-    expect(buttonVariants({ variant: "default" })).toContain("text-primary-foreground");
-    expect(buttonVariants({ variant: "destructive" })).toContain("text-destructive-foreground");
-    expect(buttonVariants({ variant: "sandbox" })).toContain("text-[var(--btn-primary-text)]");
-    expect(buttonVariants()).not.toContain("transition-all");
-    expect(buttonVariants()).toContain("motion-reduce:active:scale-100");
-  });
-});
-
-describe("SelectTrigger with a value longer than the trigger", () => {
-  it("ends the value in an ellipsis with a gap before the chevron", () => {
-    const value = "Luna — ReCenter Guest Concierge & Practitioner Desk";
-    render(<Select value="concierge"><SelectTrigger aria-label="Agent" className="w-40"><SelectValue>{value}</SelectValue></SelectTrigger></Select>);
-    const trigger = screen.getByLabelText("Agent");
-    const classes = trigger.className.split(" ");
-    // line-clamp cannot ellipsize a nowrap line: it clipped mid-glyph under the chevron.
-    expect(trigger.className).not.toContain("line-clamp");
-    expect(classes).toContain("[&>span]:truncate");
-    expect(classes).toContain("[&>span]:min-w-0");
-    expect(classes).toContain("gap-2");
-    // The rule targets the value span, which Radix renders as the trigger's direct child.
-    expect(trigger.querySelector(":scope > span")?.textContent).toBe(value);
-  });
 });

package/src/primitives/expandable-panel.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button } from './button'
+import { ExpandablePanel } from './expandable-panel'
+import { MetricChart } from './metric-chart'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
+
+const meta: Meta = {
+  title: 'Primitives/ExpandablePanel',
+  parameters: { layout: 'padded', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj
+
+const t0 = Date.parse('2026-08-24T07:00:00.000Z')
+const points = Array.from({ length: 24 }, (_, i) => ({ at: t0 + i * 3_600_000, value: 40 + Math.round(20 * Math.sin(i / 3)) + i }))
+
+// Hover or focus the panel for the toggle; Escape closes the open popover first, then the panel.
+export const ChartPanel: Story = {
+  render: () => (
+    <ExpandablePanel
+      label="Throughput chart"
+      className="h-72 w-[560px] rounded-xl border border-border bg-card p-4"
+      actions={
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="ghost" size="sm">Range</Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-48 text-sm">Last 24 hours</PopoverContent>
+        </Popover>
+      }
+    >
+      <MetricChart title="Throughput" unit="req/s" points={points} className="min-h-0 flex-1" />
+    </ExpandablePanel>
+  ),
+}

package/src/primitives/expandable-panel.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { ExpandablePanel } from "./expandable-panel";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+describe("ExpandablePanel", () => {
+  // The journey a run view needs: expand in place, let an inner popover take the
+  // first Escape, close the top-most panel on the next, and hand focus back.
+  it("expands in place and closes the top-most panel on Escape after inner layers", async () => {
+    const user = userEvent.setup();
+    render(
+      <ExpandablePanel label="Run">
+        <p data-testid="content">chart</p>
+        <ExpandablePanel label="Chart">
+          <Popover>
+            <PopoverTrigger>Range</PopoverTrigger>
+            <PopoverContent>Last 24 hours</PopoverContent>
+          </Popover>
+        </ExpandablePanel>
+      </ExpandablePanel>,
+    );
+    const content = screen.getByTestId("content"), outer = content.parentElement!;
+
+    await user.click(screen.getByRole("button", { name: "Expand Run" }));
+    expect(outer).toHaveAttribute("data-expanded");
+    expect(outer.className).toContain("fixed");
+    expect(screen.getByTestId("content")).toBe(content);
+    expect(document.body.style.overflow).toBe("hidden");
+
+    await user.click(screen.getByRole("button", { name: "Expand Chart" }));
+    await user.click(screen.getByRole("button", { name: "Range" }));
+    expect(await screen.findByText("Last 24 hours")).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByText("Last 24 hours")).not.toBeInTheDocument());
+    expect(screen.getByRole("button", { name: "Close full screen Chart" })).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+    expect(screen.getByRole("button", { name: "Expand Chart" })).toHaveFocus();
+    expect(outer).toHaveAttribute("data-expanded");
+    expect(document.body.style.overflow).toBe("hidden");
+
+    await user.keyboard("{Escape}");
+    expect(outer).not.toHaveAttribute("data-expanded");
+    expect(screen.getByRole("button", { name: "Expand Run" })).toHaveFocus();
+    expect(document.body.style.overflow).toBe("");
+  });
+});

package/src/primitives/expandable-panel.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { Maximize2, Minimize2 } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+
+export interface ExpandablePanelProps {
+  children?: React.ReactNode;
+  /** Accessible name: the toggle reads "Expand <label>" and "Close full screen <label>". */
+  label: string;
+  expanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  className?: string;
+  actions?: React.ReactNode; // controls shown beside the toggle
+}
+
+// Expanded panels in opening order. Escape closes the last one that holds no other.
+const openPanels: HTMLElement[] = [];
+let bodyOverflow = "";
+
+/**
+ * A panel that fills the viewport in place and returns on Escape. The subtree
+ * never moves (no portal), so chart, canvas and conversation state and scroll
+ * survive the switch. Radix popovers, menus and dialogs inside take Escape
+ * first: they prevent its default, which this panel respects. An ancestor
+ * with a transform or filter would contain the fixed panel, so avoid one.
+ */
+function ExpandablePanel({
+  children,
+  label,
+  expanded: expandedProp,
+  onExpandedChange,
+  className,
+  actions,
+}: ExpandablePanelProps) {
+  const [expandedState, setExpandedState] = React.useState(false);
+  const expanded = expandedProp ?? expandedState;
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const panelRef = React.useRef<HTMLDivElement>(null);
+  const wasExpanded = React.useRef(expanded);
+  const setExpanded = (next: boolean) => {
+    if (expandedProp === undefined) setExpandedState(next);
+    onExpandedChange?.(next);
+  };
+  // A ref, so a new onExpandedChange never re-registers and reorders the open stack.
+  const setExpandedRef = React.useRef(setExpanded);
+  setExpandedRef.current = setExpanded;
+
+  React.useEffect(() => {
+    if (wasExpanded.current && !expanded) toggleRef.current?.focus();
+    wasExpanded.current = expanded;
+    const id = panelRef.current;
+    if (!expanded || !id) return;
+    if (openPanels.length === 0) bodyOverflow = document.body.style.overflow;
+    openPanels.push(id);
+    document.body.style.overflow = "hidden";
+    const onKeyDown = (event: KeyboardEvent) => {
+      const top = openPanels.filter((p) => !openPanels.some((q) => q !== p && p.contains(q))).pop();
+      if (event.key !== "Escape" || event.defaultPrevented || top !== id) return;
+      event.preventDefault();
+      setExpandedRef.current(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      openPanels.splice(openPanels.indexOf(id), 1);
+      if (openPanels.length === 0) document.body.style.overflow = bodyOverflow;
+    };
+  }, [expanded]);
+
+  return (
+    <div
+      ref={panelRef}
+      data-expandable-panel=""
+      data-expanded={expanded ? "" : undefined}
+      className={cn(
+        "group/expandable relative flex min-h-0 flex-col",
+        className, // before the expanded classes, so a caller's size cannot shrink it
+        expanded && "fixed inset-0 z-50 m-0 size-auto min-h-0 min-w-0 max-h-none max-w-none rounded-none transform-none bg-background",
+      )}
+    >
+      {children}
+      <div
+        className={cn(
+          "absolute right-2 top-2 z-10 flex items-center gap-1 transition-opacity",
+          expanded
+            ? "opacity-100"
+            : "opacity-0 group-hover/expandable:opacity-100 group-focus-within/expandable:opacity-100 pointer-coarse:opacity-100",
+        )}
+      >
+        {actions}
+        <Button
+          ref={toggleRef}
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          aria-label={`${expanded ? "Close full screen" : "Expand"} ${label}`}
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? <Minimize2 aria-hidden /> : <Maximize2 aria-hidden />}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { ExpandablePanel };

package/src/primitives/index.ts

@@ -279,3 +279,6 @@ export type {
 
 export { Toolbar, FilterField } from "./toolbar";
 export type { ToolbarProps, FilterFieldProps } from "./toolbar";
+
+export { ExpandablePanel } from "./expandable-panel";
+export type { ExpandablePanelProps } from "./expandable-panel";

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/run/index.ts

@@ -1,7 +1,6 @@
 export { RunGroup, type RunGroupProps } from "./run-group";
 export {
   RunRowShell,
-  RunRowStatusDot,
   type RunRowShellProps,
   type RunRowStatus,
 } from "./run-row-shell";
@@ -14,7 +13,6 @@ 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.

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

@@ -1,27 +1,12 @@
 import { useState, type ReactNode } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { ChevronRight } from "lucide-react";
+import { focusRingInset } from "../lib/focus";
 import { cn } from "../lib/utils";
 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. */
@@ -35,10 +20,6 @@ export interface RunRowShellProps {
   /** Render the description in mono (tools) vs prose (reasoning). */
   descriptionMono?: boolean;
   status?: RunRowStatus;
-  /** @deprecated The shell no longer ticks a live duration while running; the
-   *  running state lives in the title (`TextShimmer`). Accepted and ignored so
-   *  existing callers keep compiling. */
-  startTime?: number;
   /** Static duration, revealed on hover once the row is no longer running. */
   durationMs?: number;
   /** Radius shaping when rows are stacked into a group. */
@@ -128,7 +109,10 @@ export function RunRowShell({
               // The header is the hover group, not the whole card: rows nested in an
               // open row (a fold's steps) keep their own glyphs while the
               // pointer is over them.
+              // Inset focus ring: the row clips overflow, so the shared ring
+              // must draw inside the trigger instead of around it.
               className={cn(
+                focusRingInset,
                 "group flex w-full items-center gap-2 text-left",
                 HEADER_INSET,
                 expandable ? "cursor-pointer" : "cursor-default",

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

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

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

@@ -1,12 +0,0 @@
-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/src/primitives/switch.test.tsx

@@ -1,39 +0,0 @@
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it } from "vitest";
-import { Switch } from "./switch";
-
-afterEach(cleanup);
-
-/** The classes that apply in a state: unprefixed ones, plus that state's variant. */
-function stateClasses(el: Element, state: "checked" | "unchecked"): string[] {
-  return (el.getAttribute("class") ?? "")
-    .split(/\s+/)
-    .filter((c) => !c.startsWith("data-[") || c.startsWith(`data-[state=${state}]:`))
-    .map((c) => c.replace(`data-[state=${state}]:`, ""));
-}
-
-describe("Switch", () => {
-  it("draws its off state in muted-foreground, so an unchecked switch is visible on a card or the canvas", () => {
-    render(<Switch aria-label="Reminders" />);
-    const track = screen.getByRole("switch", { name: "Reminders" });
-    const thumb = track.firstElementChild as Element;
-    expect(track).toHaveAttribute("data-state", "unchecked");
-    expect(stateClasses(track, "unchecked")).toContain("border-muted-foreground");
-    expect(stateClasses(track, "unchecked")).not.toContain("bg-input");
-    expect(stateClasses(thumb, "unchecked")).toContain("bg-muted-foreground");
-    expect(stateClasses(thumb, "unchecked")).not.toContain("bg-background");
-  });
-
-  it("draws its on state as an accent-text track with a card thumb, so a checked switch clears 3:1 in every theme", () => {
-    render(<Switch aria-label="Reminders" />);
-    const track = screen.getByRole("switch", { name: "Reminders" });
-    fireEvent.click(track);
-    expect(track).toHaveAttribute("data-state", "checked");
-    const thumb = track.firstElementChild as Element;
-    expect(stateClasses(track, "checked")).toContain("bg-[var(--accent-text)]");
-    expect(stateClasses(track, "checked")).toContain("border-transparent");
-    expect(stateClasses(track, "checked")).not.toContain("bg-primary");
-    expect(stateClasses(thumb, "checked")).toContain("bg-card");
-    expect(stateClasses(thumb, "checked")).not.toContain("bg-background");
-  });
-});

package/src/primitives/toolbar.test.tsx

@@ -1,103 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { FilterField, Toolbar } from "./toolbar";
-
-describe("Toolbar", () => {
-  it("renders each slot it is given", () => {
-    render(
-      <Toolbar
-        actions={<button type="button">Export</button>}
-        filters={<span>Product</span>}
-        search={<input aria-label="Search" type="search" />}
-      />,
-    );
-    expect(screen.getByLabelText("Search")).toBeInTheDocument();
-    expect(screen.getByText("Product")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Export" })).toBeInTheDocument();
-  });
-
-  it("omits a slot's wrapper entirely when it is not given", () => {
-    const { container } = render(
-      <Toolbar search={<input aria-label="Search" type="search" />} />,
-    );
-    const row = container.firstElementChild as HTMLElement;
-    expect(row.children).toHaveLength(1);
-  });
-
-  // Filters keep their content width while it fits and shrink (scrolling) only
-  // once search reaches its 16rem floor; an even split clipped a third filter at
-  // 1440px, and no floor left search 89px wide in an 832px toolbar.
-  it("keeps filters at content width above a search floor, actions at content width", () => {
-    const { container } = render(
-      <Toolbar
-        actions={<button type="button">Export</button>}
-        filters={<span>Product</span>}
-        search={<input aria-label="Search" type="search" />}
-      />,
-    );
-    const [searchSlot, filterSlot, actionsSlot] = Array.from(
-      (container.firstElementChild as HTMLElement).children,
-    ) as HTMLElement[];
-    const search = searchSlot.className.split(" ");
-    const filters = filterSlot.className.split(" ");
-    expect(search).toEqual(expect.arrayContaining(["lg:flex-1", "lg:min-w-64", "lg:max-w-sm", "min-w-0"]));
-    expect(filters).toEqual(expect.arrayContaining(["lg:flex-initial", "min-w-0", "lg:overflow-x-auto"]));
-    expect(filters).not.toContain("lg:flex-1");
-    expect(actionsSlot.className).toContain("shrink-0");
-    expect(actionsSlot.className).not.toContain("flex-1");
-  });
-
-  it("wraps the filters on a phone and scrolls one line from lg up", () => {
-    const { container } = render(<Toolbar filters={<span>Product</span>} />);
-    const filterSlot = (container.firstElementChild as HTMLElement)
-      .children[0] as HTMLElement;
-    const classes = filterSlot.className.split(" ");
-    expect(classes).toContain("flex-wrap");
-    expect(classes).not.toContain("overflow-x-auto");
-    expect(classes).toContain("lg:flex-nowrap");
-    expect(classes).toContain("lg:overflow-x-auto");
-    expect(classes).toContain("min-w-0");
-  });
-
-  // A free child would render as a bare flex item with none of the slots'
-  // guards, so it would size off its content and push the row into overflow.
-  it("renders nothing for a stray child", () => {
-    const { container } = render(
-      // @ts-expect-error children is deliberately not part of the API
-      <Toolbar>
-        <span>stray</span>
-      </Toolbar>,
-    );
-    expect(screen.queryByText("stray")).toBeNull();
-    expect((container.firstElementChild as HTMLElement).children).toHaveLength(
-      0,
-    );
-  });
-});
-
-describe("FilterField", () => {
-  it("labels the control visibly rather than by placeholder", () => {
-    render(
-      <FilterField htmlFor="product" label="Product">
-        <select id="product">
-          <option>All products</option>
-        </select>
-      </FilterField>,
-    );
-    expect(screen.getByText("Product")).toBeInTheDocument();
-    expect(screen.getByLabelText("Product")).toBe(
-      screen.getByRole("combobox"),
-    );
-  });
-
-  it("sets its label on the 14px step of the shared scale, never smaller", () => {
-    render(
-      <FilterField htmlFor="status" label="Status">
-        <select id="status" />
-      </FilterField>,
-    );
-    const label = screen.getByText("Status");
-    expect(label.className).toMatch(/\btext-sm\b/);
-    expect(label.className).not.toMatch(/\btext-xs\b|text-\[/);
-  });
-});

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

@@ -1,12 +0,0 @@
-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>
-  );
-}