@tangle-network/ui 11.48.0 → 11.50.1

package/dist/primitives/settings.js

@@ -6,19 +6,20 @@ import { Label } from "./label.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
 import { InfoTip } from "./info-tip.js";
 import { fieldMessageId } from "./field.js";
+import { StatusGlyph } from "./status-pill.js";
 import * as React from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { CircleAlert, Ellipsis, Lock } from "lucide-react";
+import { CircleAlert, Ellipsis, Lock, TriangleAlert } from "lucide-react";
 // src/primitives/settings.tsx
 const SCROLL_OFFSET = "scroll-mt-[calc(var(--shell-header-height)_+_1rem)]";
+const GUTTER = "px-5 py-4 @max-[34rem]/settings-section:px-4";
 const DIVIDED = "not-first:border-t not-first:border-[color:var(--border-subtle)]";
 const ERROR_TEXT = "text-[color:var(--surface-danger-text)]";
-function ErrorLine({ id, className, children }) {
+function GlyphLine({ icon: Icon, className, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
-		id,
-		role: "alert",
-		className: cn("flex items-start gap-1.5 text-sm leading-5 [overflow-wrap:anywhere]", ERROR_TEXT, className),
-		children: [/* @__PURE__ */ jsx(CircleAlert, {
+		...props,
+		className: cn("flex items-start gap-1.5 text-sm leading-5 [overflow-wrap:anywhere]", className),
+		children: [/* @__PURE__ */ jsx(Icon, {
 			"aria-hidden": "true",
 			className: "mt-0.5 size-4 shrink-0"
 		}), /* @__PURE__ */ jsx("div", {
@@ -27,18 +28,32 @@ function ErrorLine({ id, className, children }) {
 		})]
 	});
 }
-function LockLine({ id, className, children }) {
-	return /* @__PURE__ */ jsxs("div", {
-		id,
-		className: cn("flex items-start gap-1.5 text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]", className),
-		children: [/* @__PURE__ */ jsx(Lock, {
-			"aria-hidden": "true",
-			className: "mt-0.5 size-4 shrink-0"
-		}), /* @__PURE__ */ jsx("div", {
-			className: "min-w-0",
-			children
-		})]
-	});
+const ErrorLine = ({ className, ...props }) => /* @__PURE__ */ jsx(GlyphLine, {
+	icon: CircleAlert,
+	role: "alert",
+	className: cn(ERROR_TEXT, className),
+	...props
+});
+const LockLine = ({ className, ...props }) => /* @__PURE__ */ jsx(GlyphLine, {
+	icon: Lock,
+	className: cn("text-muted-foreground", className),
+	...props
+});
+const TOKEN_BREAK = /(?<=[/@])(?=[^/])|(?<=[\p{L}\p{N}])(?=[.\-_?#&=][\p{L}\p{N}])/u;
+function breakTokens(node) {
+	if (typeof node === "string") {
+		if (!TOKEN_BREAK.test(node)) return node;
+		return node.split(/(\s+)/).map((word, index) => {
+			const parts = word.split(TOKEN_BREAK);
+			return parts.length < 2 ? word : /* @__PURE__ */ jsx("span", {
+				className: "inline-block max-w-full [text-decoration:inherit]",
+				children: parts.map((part, at) => /* @__PURE__ */ jsxs(React.Fragment, { children: [at > 0 && /* @__PURE__ */ jsx("wbr", {}), part] }, at))
+			}, index);
+		});
+	}
+	if (Array.isArray(node)) return React.Children.map(node, breakTokens);
+	if (React.isValidElement(node) && node.props.children != null && typeof node.props.children !== "function") return React.cloneElement(node, void 0, breakTokens(node.props.children));
+	return node;
 }
 const ROW_COLUMNS = {
 	inline: "grid-cols-[minmax(0,1fr)_minmax(13rem,20rem)] @max-[34rem]/settings-section:grid-cols-1",
@@ -73,7 +88,7 @@ function SettingsRow(props) {
 	return /* @__PURE__ */ jsxs("div", {
 		id,
 		"data-layout": layout,
-		className: cn("grid min-w-0 items-center gap-x-8 gap-y-3 px-5 py-4 @max-[34rem]/settings-section:px-4", SCROLL_OFFSET, DIVIDED, ROW_COLUMNS[hasValue && layout === "compact" ? "inline" : layout]),
+		className: cn("grid min-w-0 items-center gap-x-8 gap-y-3", GUTTER, SCROLL_OFFSET, DIVIDED, ROW_COLUMNS[hasValue && layout === "compact" ? "inline" : layout]),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ jsxs("div", {
@@ -121,7 +136,7 @@ function SettingsRow(props) {
 			children: [hasValue && /* @__PURE__ */ jsx("span", {
 				"data-slot": "settings-value",
 				className: cn("min-w-0 text-foreground text-sm [overflow-wrap:anywhere] @min-[34rem]/settings-section:text-right", mono && "font-mono"),
-				children: value
+				children: breakTokens(value)
 			}), control]
 		})]
 	});
@@ -142,7 +157,7 @@ function SettingsSection({ id, title, description, info, actions, tone = "defaul
 		className: cn("@container/settings-section min-w-0", SCROLL_OFFSET, danger && "border-[color:var(--surface-danger-border)]"),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start justify-between gap-4 px-5 py-4 @max-[34rem]/settings-section:flex-wrap @max-[34rem]/settings-section:px-4",
+				className: cn("flex items-start justify-between gap-4 @max-[34rem]/settings-section:flex-wrap", GUTTER),
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "min-w-0",
 					children: [/* @__PURE__ */ jsxs("div", {
@@ -173,6 +188,35 @@ function SettingsSection({ id, title, description, info, actions, tone = "defaul
 		]
 	});
 }
+const NOTE_TONE = {
+	default: "text-foreground",
+	muted: "text-muted-foreground",
+	warning: "text-[color:var(--surface-warning-text)]",
+	danger: ERROR_TEXT
+};
+const NOTE_GLYPH = {
+	warning: TriangleAlert,
+	danger: CircleAlert
+};
+/**
+* A line or block of a {@link SettingsSection} that is not a row: an empty list, a loading line,
+* a notice, a refusal or a figure. It takes the rows' gutters and divider, so it lines up with
+* the rows and lists around it.
+*/
+function SettingsNote({ tone = "default", role, children }) {
+	const className = cn("min-w-0", GUTTER, DIVIDED, NOTE_TONE[tone]);
+	const glyph = NOTE_GLYPH[tone];
+	return glyph ? /* @__PURE__ */ jsx(GlyphLine, {
+		icon: glyph,
+		role,
+		className,
+		children
+	}) : /* @__PURE__ */ jsx("div", {
+		role,
+		className: cn("text-sm leading-5 [overflow-wrap:anywhere]", className),
+		children
+	});
+}
 const LIST_SLOTS = [
 	"leading",
 	"main",
@@ -251,7 +295,7 @@ const NARROW_STATUS = "@max-[34rem]/settings-section:col-start-[main] @max-[34re
 * that name. Without a status column the state follows the meta, and without
 * a menu column the ⋯ menu ends the action cell.
 */
-function SettingsListItem({ leading, title, meta, status, error, action, menu }) {
+function SettingsListItem({ leading, title, meta, status, tone, error, action, menu }) {
 	const columns = React.useContext(SettingsListContext);
 	const titleId = React.useId();
 	const reasonId = `${titleId}-reason`;
@@ -268,6 +312,11 @@ function SettingsListItem({ leading, title, meta, status, error, action, menu })
 		onClick: locked ? void 0 : action.onSelect,
 		children: action.label
 	});
+	const state = tone && status != null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StatusGlyph, { tone }), /* @__PURE__ */ jsx("span", {
+		className: "min-w-0",
+		children: status
+	})] }) : status;
+	const toned = tone && "flex items-center gap-1.5";
 	const actionCell = (actionButton || menuNode && !columns.menu) && /* @__PURE__ */ jsxs(Fragment$1, { children: [actionButton, !columns.menu && menuNode] });
 	return /* @__PURE__ */ jsxs("li", {
 		className: cn("col-span-full grid grid-cols-subgrid items-center px-5 py-3 @max-[34rem]/settings-section:px-4", DIVIDED),
@@ -282,15 +331,15 @@ function SettingsListItem({ leading, title, meta, status, error, action, menu })
 					/* @__PURE__ */ jsx("div", {
 						id: titleId,
 						className: "font-medium text-sm leading-5 text-foreground [overflow-wrap:anywhere] [&_a]:rounded-sm [&_a]:text-foreground [&_a]:underline-offset-4 [&_a:hover]:underline [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-[var(--focus-border)]",
-						children: title
+						children: breakTokens(title)
 					}),
 					meta != null && /* @__PURE__ */ jsx("div", {
 						className: "text-sm leading-5 text-muted-foreground [overflow-wrap:anywhere]",
-						children: meta
+						children: breakTokens(meta)
 					}),
 					status != null && !columns.status && /* @__PURE__ */ jsx("div", {
-						className: "mt-1 text-sm leading-5 text-muted-foreground",
-						children: status
+						className: cn("mt-1 text-sm leading-5 text-muted-foreground", toned),
+						children: state
 					}),
 					locked && /* @__PURE__ */ jsx(LockLine, {
 						id: reasonId,
@@ -304,8 +353,8 @@ function SettingsListItem({ leading, title, meta, status, error, action, menu })
 				children: error
 			}),
 			status != null && columns.status && /* @__PURE__ */ jsx("div", {
-				className: cn("col-start-[status] row-start-1 min-w-0 text-sm leading-5 text-muted-foreground", NARROW_STATUS),
-				children: status
+				className: cn("col-start-[status] row-start-1 min-w-0 text-sm leading-5 text-muted-foreground", toned, NARROW_STATUS),
+				children: state
 			}),
 			actionCell && /* @__PURE__ */ jsx("div", {
 				className: "col-start-[action] row-start-1 flex min-w-0 items-center justify-end gap-1",
@@ -318,4 +367,4 @@ function SettingsListItem({ leading, title, meta, status, error, action, menu })
 		]
 	});
 }
-export { SettingsList, SettingsListItem, SettingsRow, SettingsSection };
+export { SettingsList, SettingsListItem, SettingsNote, SettingsRow, SettingsSection };

package/dist/primitives/status-pill.js

@@ -107,15 +107,24 @@ function ToneGlyph({ tone }) {
 		});
 	}
 }
+const GLYPH = "inline-flex [&>svg]:size-3 [&>svg]:shrink-0";
+/** The tone's glyph in the tone's ink, before a label that keeps its own colour, as `bare` draws it. */
+function StatusGlyph({ tone }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cn(GLYPH, TONE_TEXT[tone]),
+		children: /* @__PURE__ */ jsx(ToneGlyph, { tone })
+	});
+}
 const StatusPill = React.forwardRef(({ className, tone, children, icon, bare = false, size = "sm", ...props }, ref) => /* @__PURE__ */ jsxs("span", {
 	ref,
 	className: cn("inline-flex items-center gap-1.5 whitespace-nowrap rounded-full font-medium", size === "sm" ? "px-2 py-0.5 text-xs" : "px-2.5 py-1 text-sm", bare ? "border border-transparent bg-transparent px-0" : cn("border", TONE_SURFACE[tone]), className),
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: cn("inline-flex [&>svg]:size-3 [&>svg]:shrink-0", bare && TONE_TEXT[tone]),
+		className: cn(GLYPH, bare && TONE_TEXT[tone]),
 		children: icon ?? /* @__PURE__ */ jsx(ToneGlyph, { tone })
 	}), children]
 }));
 StatusPill.displayName = "StatusPill";
-export { StatusPill };
+export { StatusGlyph, StatusPill };

package/dist/primitives.d.ts

@@ -45,11 +45,11 @@ import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { Heading, HeadingProps, HeadingVariant } from "./primitives/heading.js";
 import { PageShell, PageShellProps } from "./primitives/page-shell.js";
 import { Field, FieldProps, fieldMessageId } from "./primitives/field.js";
-import { SettingsList, SettingsListAction, SettingsListColumns, SettingsListItem, SettingsListItemProps, SettingsListMenuItem, SettingsListProps, SettingsRow, SettingsRowLayout, SettingsRowProps, SettingsSection, SettingsSectionProps } from "./primitives/settings.js";
+import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
+import { SettingsList, SettingsListAction, SettingsListColumns, SettingsListItem, SettingsListItemProps, SettingsListMenuItem, SettingsListProps, SettingsNote, SettingsNoteProps, SettingsRow, SettingsRowLayout, SettingsRowProps, SettingsSection, SettingsSectionProps } from "./primitives/settings.js";
 import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
 import { Pagination, PaginationProps } from "./primitives/pagination.js";
-import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
 import { ComplianceBadge, ComplianceBadgeProps, ComplianceProduct, ComplianceStatus } from "./primitives/compliance-badge.js";
 import { Tag, TagProps } from "./primitives/tag.js";
 import { Chip, ChipProps } from "./primitives/chip.js";
@@ -62,4 +62,4 @@ import { SeriesSparkline, SeriesSparklineProps } from "./primitives/series-spark
 import { ChartReferenceLine, MetricChart, MetricChartProps } from "./primitives/metric-chart.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.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, 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, 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

@@ -43,11 +43,11 @@ import { InlineCode } from "./primitives/code-block.js";
 import { ThemeToggle, useTheme } from "./primitives/theme-toggle.js";
 import { PageShell } from "./primitives/page-shell.js";
 import { Field, fieldMessageId } from "./primitives/field.js";
-import { SettingsList, SettingsListItem, SettingsRow, SettingsSection } from "./primitives/settings.js";
+import { StatusPill } from "./primitives/status-pill.js";
+import { SettingsList, SettingsListItem, SettingsNote, SettingsRow, SettingsSection } from "./primitives/settings.js";
 import { PageHeader } from "./primitives/page-header.js";
 import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
 import { Pagination } from "./primitives/pagination.js";
-import { StatusPill } from "./primitives/status-pill.js";
 import { ComplianceBadge } from "./primitives/compliance-badge.js";
 import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
 import { Tag } from "./primitives/tag.js";
@@ -62,4 +62,4 @@ import { SeriesSparkline } from "./primitives/series-sparkline.js";
 import { MetricChart } from "./primitives/metric-chart.js";
 import { FilterField, Toolbar } from "./primitives/toolbar.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, 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, 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/expanded-tool-detail.js

@@ -1,4 +1,3 @@
-import { cn } from "../lib/utils.js";
 import { CodeBlock } from "../markdown/code-block.js";
 import { getToolDisplayMetadata } from "../utils/tool-display.js";
 import { CommandPreview } from "../tool-previews/command-preview.js";
@@ -9,9 +8,10 @@ import { WebSearchPreview } from "../tool-previews/web-search-preview.js";
 import { QuestionPreview } from "../tool-previews/question-preview.js";
 import { DiffPreview } from "../tool-previews/diff-preview.js";
 import { ExpandableContent } from "./expandable-content.js";
+import { RunStatusIcon } from "./status-meta.js";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AlertCircle, ArrowLeft, ArrowRight, FileText, Loader2 } from "lucide-react";
+import { ArrowLeft, ArrowRight, FileText } from "lucide-react";
 // src/run/expanded-tool-detail.tsx
 const FLUSH_TOGGLE = "mx-3 mb-2";
 const EXT_LANG = {
@@ -144,7 +144,11 @@ const ExpandedToolDetail = memo(({ part }) => {
 				className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--surface-danger-border)]",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2 border-b border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-3 py-2",
-					children: [/* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 text-[var(--surface-danger-text)]" }), /* @__PURE__ */ jsx("span", {
+					children: [/* @__PURE__ */ jsx(RunStatusIcon, {
+						status: "failed",
+						"aria-hidden": true,
+						className: "size-3"
+					}), /* @__PURE__ */ jsx("span", {
 						className: "text-xs font-medium uppercase tracking-[0.08em] text-[var(--surface-danger-text)]",
 						children: "Error"
 					})]
@@ -159,7 +163,11 @@ const ExpandedToolDetail = memo(({ part }) => {
 			}),
 			(status === "pending" || status === "running") && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 rounded-[var(--radius-md)] border border-border bg-muted px-3 py-3 text-xs text-muted-foreground",
-				children: [/* @__PURE__ */ jsx(Loader2, { className: cn("h-3 w-3 animate-spin text-primary") }), "Running…"]
+				children: [/* @__PURE__ */ jsx(RunStatusIcon, {
+					status: "running",
+					"aria-hidden": true,
+					className: "size-3"
+				}), "Running…"]
 			})
 		]
 	});

package/dist/run/run-group.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { formatDuration } from "../utils/format.js";
+import { RunStatusIcon, statusMeta } from "./status-meta.js";
 import { InlineToolItem } from "./inline-tool-item.js";
 import { Markdown } from "../markdown/markdown.js";
 import { InlineThinkingItem } from "./inline-thinking-item.js";
@@ -8,7 +9,7 @@ import { OpenUIArtifactRenderer } from "../openui/openui-artifact-renderer.js";
 import { TRANSCRIPT_TEXT } from "../chat/transcript-text.js";
 import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Bot, ChevronDown, ChevronRight, ClipboardList, FileEdit, FileSearch, Globe, Loader2, PencilLine, Search, Settings, Sparkles, Terminal } from "lucide-react";
+import { Bot, ChevronDown, ChevronRight, ClipboardList, FileEdit, FileSearch, Globe, PencilLine, Search, Settings, Terminal } from "lucide-react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 // src/run/run-group.tsx
 /**
@@ -46,7 +47,11 @@ function AssistantShell({ branding, isStreaming, children }) {
 			className: "flex items-center gap-2 px-1 font-medium text-muted-foreground text-xs",
 			children: [/* @__PURE__ */ jsx("span", { children: branding.label }), isStreaming ? /* @__PURE__ */ jsxs("span", {
 				className: "inline-flex items-center gap-1.5",
-				children: [/* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }), "Thinking"]
+				children: [/* @__PURE__ */ jsx(RunStatusIcon, {
+					status: "running",
+					"aria-hidden": true,
+					className: "size-3"
+				}), "Thinking"]
 			}) : null]
 		}), /* @__PURE__ */ jsx("div", {
 			className: ASSISTANT_SHELL,
@@ -249,7 +254,10 @@ const RunGroup = memo(({ run, partMap, collapsed, onToggle, branding = DEFAULT_B
 						}, key);
 						if (toolPart.state.status === "running") return /* @__PURE__ */ jsxs("div", {
 							className: "flex items-center gap-2 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground",
-							children: [/* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }), "Building view…"]
+							children: [/* @__PURE__ */ jsx(RunStatusIcon, {
+								status: "running",
+								"aria-hidden": true
+							}), "Building view…"]
 						}, key);
 					}
 					if (part.type === "text" && !part.synthetic && part.text.trim()) return /* @__PURE__ */ jsx("div", {
@@ -302,12 +310,13 @@ const RunGroup = memo(({ run, partMap, collapsed, onToggle, branding = DEFAULT_B
 								}) : null,
 								/* @__PURE__ */ jsxs("span", {
 									className: "ml-auto flex shrink-0 items-center gap-1.5",
-									children: [/* @__PURE__ */ jsx(CategoryBadges, { categories: stats.toolCategories }), isStreaming ? /* @__PURE__ */ jsxs("span", {
-										className: "inline-flex items-center gap-1 rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-2 py-px text-[10px] font-semibold uppercase text-[var(--accent-text)]",
-										children: [/* @__PURE__ */ jsx(Loader2, { className: "h-2.5 w-2.5 animate-spin" }), "Running"]
-									}) : /* @__PURE__ */ jsxs("span", {
+									children: [/* @__PURE__ */ jsx(CategoryBadges, { categories: stats.toolCategories }), /* @__PURE__ */ jsxs("span", {
 										className: "inline-flex items-center gap-1 rounded-full border border-border px-2 py-px text-[10px] font-semibold uppercase text-muted-foreground",
-										children: [/* @__PURE__ */ jsx(Sparkles, { className: "h-2.5 w-2.5" }), "Done"]
+										children: [/* @__PURE__ */ jsx(RunStatusIcon, {
+											status: isStreaming ? "running" : "done",
+											"aria-hidden": true,
+											className: "size-3"
+										}), statusMeta(isStreaming ? "running" : "done").label]
 									})]
 								})
 							]
@@ -346,7 +355,10 @@ const RunGroup = memo(({ run, partMap, collapsed, onToggle, branding = DEFAULT_B
 									});
 									else if (toolPart.state.status === "running") node = /* @__PURE__ */ jsxs("div", {
 										className: "flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--md3-surface-container)] px-4 py-3 text-sm text-muted-foreground",
-										children: [/* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" }), "Building view…"]
+										children: [/* @__PURE__ */ jsx(RunStatusIcon, {
+											status: "running",
+											"aria-hidden": true
+										}), "Building view…"]
 									});
 								}
 								if (node === null) node = /* @__PURE__ */ jsx(InlineToolItem, {

package/dist/run/run-phase-list.js

@@ -1,8 +1,9 @@
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { RunStatusIcon } from "./status-meta.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, CircleAlert, Loader2 } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 // src/run/run-phase-list.tsx
 function PhaseRow({ phase }) {
 	const [open, setOpen] = useState(false);
@@ -28,13 +29,9 @@ function PhaseRow({ phase }) {
 					children: [" · ", phase.summary]
 				})]
 			}),
-			phase.status === "running" && /* @__PURE__ */ jsx(Loader2, {
-				"aria-label": "Running",
-				className: "mt-1 size-4 shrink-0 animate-spin text-muted-foreground"
-			}),
-			phase.status === "error" && /* @__PURE__ */ jsx(CircleAlert, {
-				"aria-label": "Had an error",
-				className: "mt-1 size-4 shrink-0 text-[var(--surface-danger-text)]"
+			phase.status && phase.status !== "done" && /* @__PURE__ */ jsx(RunStatusIcon, {
+				status: phase.status,
+				className: "mt-1"
 			})
 		]
 	}), open && /* @__PURE__ */ jsx("div", {

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

@@ -0,0 +1,25 @@
+import { LucideIcon, LucideProps } from "lucide-react";
+/** The states an agent or a run reports. Every surface names them with `statusMeta`. */
+export type RunStatus = "running" | "waiting" | "needs-you" | "done" | "failed" | "stopped" | "idle" | "unknown";
+export interface StatusMeta {
+  /** The one word for the state. A qualifier such as "Shipped" follows Done; it never replaces it. */
+  label: string;
+  /** The lucide glyph, drawn on the 16px grid at stroke 1.75 (`RunStatusIcon` does both). */
+  icon: LucideIcon;
+  /** The Brand colour token for the glyph and any bare status text: `color: var(<token>)`. */
+  token: `--${string}`;
+}
+/** Any status string as a `RunStatus`; a value nothing names reads as Unknown, never as a guess. */
+export declare function runStatus(status: string): RunStatus;
+/** The label, glyph and colour token for a status, in every surface. */
+export declare function statusMeta(status: RunStatus | (string & {})): StatusMeta;
+export interface RunStatusIconProps extends Omit<LucideProps, "ref"> {
+  status: RunStatus | (string & {});
+}
+/**
+ * A status glyph on the icon grid, in its token colour and labelled with its
+ * word. Pass `aria-hidden` where the label is already printed beside it.
+ * Running breathes on `--motion-ambient`, the page's one loop period; the
+ * breathe is opacity only, so it is the essential motion reduced motion keeps.
+ */
+export declare function RunStatusIcon({ status, className, style, ...props }: RunStatusIconProps): import("react").JSX.Element;

package/dist/run/status-meta.js

@@ -0,0 +1,105 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { CircleCheck, CircleDashed, CircleDot, CircleQuestionMark, CircleStop, CircleX, Hand, Hourglass } from "lucide-react";
+// src/run/status-meta.tsx
+const META = {
+	running: {
+		label: "Running",
+		icon: CircleDot,
+		token: "--surface-info-text"
+	},
+	waiting: {
+		label: "Waiting",
+		icon: Hourglass,
+		token: "--surface-neutral-text"
+	},
+	"needs-you": {
+		label: "Needs you",
+		icon: Hand,
+		token: "--surface-warning-text"
+	},
+	done: {
+		label: "Done",
+		icon: CircleCheck,
+		token: "--surface-success-text"
+	},
+	failed: {
+		label: "Failed",
+		icon: CircleX,
+		token: "--surface-danger-text"
+	},
+	stopped: {
+		label: "Stopped",
+		icon: CircleStop,
+		token: "--surface-neutral-text"
+	},
+	idle: {
+		label: "Idle",
+		icon: CircleDashed,
+		token: "--surface-neutral-text"
+	},
+	unknown: {
+		label: "Unknown",
+		icon: CircleQuestionMark,
+		token: "--surface-neutral-text"
+	}
+};
+const ALIASES = {
+	active: "running",
+	in_progress: "running",
+	"in-progress": "running",
+	streaming: "running",
+	pending: "waiting",
+	queued: "waiting",
+	blocked: "waiting",
+	"attention-needed": "needs-you",
+	needs_you: "needs-you",
+	needs_input: "needs-you",
+	awaiting_input: "needs-you",
+	completed: "done",
+	complete: "done",
+	success: "done",
+	succeeded: "done",
+	shipped: "done",
+	error: "failed",
+	errored: "failed",
+	cancelled: "stopped",
+	canceled: "stopped",
+	aborted: "stopped"
+};
+/** Any status string as a `RunStatus`; a value nothing names reads as Unknown, never as a guess. */
+function runStatus(status) {
+	const key = status.trim().toLowerCase();
+	if (Object.hasOwn(META, key)) return key;
+	return Object.hasOwn(ALIASES, key) ? ALIASES[key] : "unknown";
+}
+/** The label, glyph and colour token for a status, in every surface. */
+function statusMeta(status) {
+	return META[runStatus(status)];
+}
+/**
+* A status glyph on the icon grid, in its token colour and labelled with its
+* word. Pass `aria-hidden` where the label is already printed beside it.
+* Running breathes on `--motion-ambient`, the page's one loop period; the
+* breathe is opacity only, so it is the essential motion reduced motion keeps.
+*/
+function RunStatusIcon({ status, className, style, ...props }) {
+	const key = runStatus(status);
+	const { label, icon: Icon, token } = META[key];
+	const running = key === "running";
+	return /* @__PURE__ */ jsx(Icon, {
+		role: "img",
+		"aria-label": label,
+		size: 16,
+		strokeWidth: 1.75,
+		"data-run-status": key,
+		"data-motion": running ? "essential" : void 0,
+		className: cn("shrink-0", running && "animate-[tangle-breathe_var(--motion-ambient)_infinite]", className),
+		style: {
+			color: `var(${token})`,
+			...style
+		},
+		...props
+	});
+}
+export { RunStatusIcon, runStatus, statusMeta };

package/dist/run.d.ts

@@ -9,4 +9,5 @@ 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";
-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, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, parseToolEvent, showsTaskPriority, taskProgress, taskStatus };
+import { RunStatus, RunStatusIcon, RunStatusIconProps, StatusMeta, runStatus, statusMeta } from "./run/status-meta.js";
+export { ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, 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, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus };

package/dist/run.js

@@ -1,3 +1,4 @@
+import { RunStatusIcon, 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 { InlineToolItem } from "./run/inline-tool-item.js";
@@ -8,4 +9,4 @@ 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, TaskList, ToolCallFeed, parseToolEvent, showsTaskPriority, taskProgress, taskStatus };
+export { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, TaskList, ToolCallFeed, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.48.0",
+  "version": "11.50.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -166,7 +166,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.29.0",
+    "@tangle-network/brand": "^1.31.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

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

@@ -307,3 +307,12 @@ describe("transcript type scale", () => {
     expect(textClasses(agent)).toEqual(textClasses(user))
   })
 })
+
+describe("AgentTimeline status cards", () => {
+  it("marks a failed card with the failed glyph and keeps the triangle for warnings", () => {
+    const glyph = (tone: "error" | "warning") =>
+      render(<AgentTimeline items={[{ id: tone, kind: "status", label: tone, tone }]} />).container.querySelector("svg")?.getAttribute("class")
+    expect(glyph("error")).toContain("lucide-circle-x")
+    expect(glyph("warning")).toContain("lucide-triangle-alert")
+  })
+})