{ "$schema": "https://design.dana.xyz/registry-schema.json", "version": "0.8.0", "generated": "2026-10-13T05:32:41.215Z", "license": "Proprietary. All rights reserved. Evaluation use only, in a non-production environment — see LICENSE. Production use requires a separate written agreement with the copyright holder.", "terms": "https://design.dana.xyz/license", "totalComponents": 379, "categories": { "ui": 275, "pattern": 104 }, "tier": "public-projection", "fullCatalog": "The full typed catalog (props, import paths, a11y notes) ships as registry/agent-catalog.json inside the @danagraph/design-system package.", "components": [ { "name": "Button", "slug": "button", "category": "ui", "subcategory": "actions", "description": "Primary action trigger with variant and size support", "tags": [ "responsive", "touch-safe" ], "variants": [ "primary", "secondary", "ghost", "danger" ], "sizes": [ "sm", "md", "lg" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "IconButton", "Badge" ] }, { "name": "Icon", "slug": "icon", "category": "ui", "subcategory": "data-display", "description": "Purpose-built SVG icon set for agentic state and treasury domain. 16 icons: streaming, thinking, timeout, partial, unavailable, conflict, validated, stale, entity, fx, approval, escalation, risk, compliance, provenance, position.", "tags": [ "responsive" ], "status": "stable", "since": "S9", "version": "1.0.0", "interactive": false, "related": [ "IconButton" ] }, { "name": "IconButton", "slug": "icon-button", "category": "ui", "subcategory": "actions", "description": "Icon-only action button with accessible label", "tags": [ "responsive", "touch-safe" ], "sizes": [ "sm", "md", "lg" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Button" ] }, { "name": "Input", "slug": "input", "category": "ui", "subcategory": "data-entry", "description": "Text input with label, hint, and error states", "tags": [ "responsive", "touch-safe" ], "variants": [ "default", "error", "disabled" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "TextField", "TextArea" ] }, { "name": "TextField", "slug": "text-field", "category": "ui", "subcategory": "data-entry", "description": "Labeled text field with validation and helper text", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Input", "TextArea" ] }, { "name": "TextArea", "slug": "text-area", "category": "ui", "subcategory": "data-entry", "description": "Multi-line text input with auto-resize support", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Input", "TextField" ] }, { "name": "Select", "slug": "select", "category": "ui", "subcategory": "data-entry", "description": "Dropdown selection with Radix-powered accessible listbox", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Input", "RadioGroup" ] }, { "name": "Checkbox", "slug": "checkbox", "category": "ui", "subcategory": "data-entry", "description": "Binary toggle control with label", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "CheckboxGroup", "Switch" ] }, { "name": "CheckboxGroup", "slug": "checkbox-group", "category": "ui", "subcategory": "data-entry", "description": "Group of related checkboxes with shared label", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Checkbox", "RadioGroup" ] }, { "name": "RadioGroup", "slug": "radio-group", "category": "ui", "subcategory": "data-entry", "description": "Single-selection radio button group", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Select", "CheckboxGroup" ] }, { "name": "Switch", "slug": "switch", "category": "ui", "subcategory": "data-entry", "description": "Toggle switch for boolean settings", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Checkbox" ] }, { "name": "Slider", "slug": "slider", "category": "ui", "subcategory": "data-entry", "description": "Range input slider with min/max/step", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Meter", "Input" ] }, { "name": "Badge", "slug": "badge", "category": "ui", "subcategory": "data-display", "description": "Colored label for status, trust level, or category", "tags": [ "responsive" ], "variants": [ "agency", "temporal", "validation", "black", "gray" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Tag", "DataTag", "StatusDot", "ModelTag" ] }, { "name": "Tag", "slug": "tag", "category": "ui", "subcategory": "data-display", "description": "Uppercase label chip with optional click handler", "tags": [ "responsive", "touch-safe" ], "variants": [ "default", "outlined" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Badge", "DataTag" ] }, { "name": "DataTag", "slug": "data-tag", "category": "ui", "subcategory": "data-display", "description": "Inline data value with expandable provenance popover", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Badge", "Tag", "ProvenanceChain" ] }, { "name": "StatusDot", "slug": "status-dot", "category": "ui", "subcategory": "data-display", "description": "Colored dot indicating idle, active, pending, error, or completed state", "tags": [ "responsive" ], "variants": [ "idle", "active", "pending", "error", "completed" ], "sizes": [ "sm", "md" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "StreamingDot", "Badge" ] }, { "name": "ModelTag", "slug": "model-tag", "category": "ui", "subcategory": "data-display", "description": "AI model identifier chip", "tags": [ "responsive" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Badge", "DataTag" ] }, { "name": "Timestamp", "slug": "timestamp", "category": "ui", "subcategory": "data-display", "description": "Relative or exact time display with auto-refresh", "tags": [ "responsive" ], "variants": [ "relative", "exact" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "DataFreshness", "TemporalScale" ] }, { "name": "DataFreshness", "slug": "data-freshness", "category": "ui", "subcategory": "data-display", "description": "Temporal age indicator showing data staleness", "tags": [ "responsive" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Timestamp", "TemporalScale" ] }, { "name": "CostIndicator", "slug": "cost-indicator", "category": "ui", "subcategory": "data-display", "description": "Token/cost budget visualization with threshold warnings", "tags": [ "responsive" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "TokenCounter", "Meter" ] }, { "name": "TokenCounter", "slug": "token-counter", "category": "ui", "subcategory": "data-display", "description": "Live token usage counter with budget threshold", "tags": [ "responsive" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "CostIndicator", "ContextWindow" ] }, { "name": "Meter", "slug": "meter", "category": "ui", "subcategory": "data-display", "description": "Horizontal bar gauge with low/high threshold markers", "tags": [ "responsive" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Progress", "CostIndicator" ] }, { "name": "Avatar", "slug": "avatar", "category": "ui", "subcategory": "data-display", "description": "User or agent avatar with fallback initials", "tags": [ "responsive" ], "sizes": [ "sm", "md", "lg" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "AgentCard", "Badge" ] }, { "name": "Table", "slug": "table", "category": "ui", "subcategory": "data-display", "description": "Data table with sortable columns and row selection", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "DataList", "ScrollArea" ] }, { "name": "DataList", "slug": "data-list", "category": "ui", "subcategory": "data-display", "description": "Key-value list for structured data display", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Table" ] }, { "name": "Callout", "slug": "callout", "category": "ui", "subcategory": "feedback", "description": "Attention block with accent bar for info, warning, or error context", "tags": [ "responsive" ], "variants": [ "info", "warning", "error" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "EmptyState", "EscalationBanner" ] }, { "name": "EmptyState", "slug": "empty-state", "category": "ui", "subcategory": "feedback", "description": "Placeholder for empty, pending, or error states with action slot", "tags": [ "responsive" ], "variants": [ "empty", "pending", "error" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Skeleton", "Callout" ] }, { "name": "Skeleton", "slug": "skeleton", "category": "ui", "subcategory": "feedback", "description": "Animated placeholder for loading content", "tags": [ "responsive" ], "variants": [ "text", "circle", "rect" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "EmptyState", "StreamingDot" ] }, { "name": "StreamingDot", "slug": "streaming-dot", "category": "ui", "subcategory": "feedback", "description": "Animated dot sequence for streaming/typing indicators", "tags": [ "responsive" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Skeleton", "StreamingResponse" ] }, { "name": "FeedbackSignal", "slug": "feedback-signal", "category": "ui", "subcategory": "feedback", "description": "Micro-feedback indicator for user reactions", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Badge" ] }, { "name": "Progress", "slug": "progress", "category": "ui", "subcategory": "feedback", "description": "Determinate or indeterminate progress bar", "tags": [ "responsive" ], "variants": [ "determinate", "indeterminate" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Meter", "Spinner" ] }, { "name": "Spinner", "slug": "spinner", "category": "ui", "subcategory": "feedback", "description": "Spinning loading indicator", "tags": [ "responsive" ], "sizes": [ "sm", "md", "lg" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Progress", "Skeleton" ] }, { "name": "Toast", "slug": "toast", "category": "ui", "subcategory": "feedback", "description": "Ephemeral notification toast with auto-dismiss", "tags": [ "responsive", "touch-safe" ], "variants": [ "info", "success", "warning", "error" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Callout", "EscalationBanner" ] }, { "name": "DeprecationBanner", "slug": "deprecation-banner", "category": "ui", "subcategory": "feedback", "description": "Validation-tinted callout shown on deprecated component pages with migration guidance", "tags": [ "responsive" ], "status": "stable", "since": "S11", "version": "1.0.0", "interactive": false, "related": [ "Callout", "EscalationBanner" ] }, { "name": "Card", "slug": "card", "category": "ui", "subcategory": "layout", "description": "Container with structured border and optional header", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S2", "version": "1.0.0", "related": [ "Box", "Section" ] }, { "name": "Box", "slug": "box", "category": "ui", "subcategory": "layout", "description": "Generic box container with padding and border props", "tags": [ "responsive" ], "status": "stable", "since": "S2", "version": "1.0.0", "related": [ "Card", "Flex", "Grid" ] }, { "name": "Flex", "slug": "flex", "category": "ui", "subcategory": "layout", "description": "Flexbox layout container with gap and alignment", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S2", "version": "1.0.0", "related": [ "Box", "Grid" ] }, { "name": "Grid", "slug": "grid", "category": "ui", "subcategory": "layout", "description": "CSS Grid layout container with responsive columns", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S2", "version": "1.0.0", "related": [ "Flex", "Box" ] }, { "name": "Container", "slug": "container", "category": "ui", "subcategory": "layout", "description": "Max-width centered content container", "tags": [ "responsive" ], "status": "stable", "since": "S2", "version": "1.0.0", "related": [ "Section", "Box" ] }, { "name": "Section", "slug": "section", "category": "ui", "subcategory": "layout", "description": "Semantic section wrapper with vertical spacing", "tags": [ "responsive" ], "status": "stable", "since": "S2", "version": "1.0.0", "related": [ "Container", "Separator" ] }, { "name": "Separator", "slug": "separator", "category": "ui", "subcategory": "layout", "description": "Horizontal or vertical divider line", "tags": [ "responsive" ], "variants": [ "horizontal", "vertical" ], "status": "stable", "since": "S2", "version": "1.0.0", "related": [ "Section" ] }, { "name": "ScrollArea", "slug": "scroll-area", "category": "ui", "subcategory": "layout", "description": "Scrollable container with styled scrollbar", "tags": [ "responsive" ], "status": "stable", "since": "S2", "version": "1.0.0", "related": [ "Box", "Table" ] }, { "name": "ResponsiveNav", "slug": "responsive-nav", "category": "ui", "subcategory": "navigation", "description": "Adaptive navigation bar with mobile hamburger", "tags": [ "responsive", "mobile-ready" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "Tabs", "SegmentedControl" ] }, { "name": "Tabs", "slug": "tabs", "category": "ui", "subcategory": "navigation", "description": "Tabbed content navigation with Radix accessibility", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "SegmentedControl", "ResponsiveNav" ] }, { "name": "SegmentedControl", "slug": "segmented-control", "category": "ui", "subcategory": "navigation", "description": "Button group for switching between related views", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "Tabs", "RadioGroup" ] }, { "name": "LocaleSwitcher", "slug": "locale-switcher", "category": "ui", "subcategory": "navigation", "description": "Locale selection dropdown with flag, native name, BCP 47 code, and RTL indicator. Two variants: compact (icon+code) and full (flag+name).", "tags": [], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "Badge", "SegmentedControl" ] }, { "name": "Dialog", "slug": "dialog", "category": "ui", "subcategory": "overlays", "description": "Modal dialog with Radix focus management and close on escape", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "AlertDialog", "Modal" ] }, { "name": "AlertDialog", "slug": "alert-dialog", "category": "ui", "subcategory": "overlays", "description": "Confirmation dialog requiring explicit user action", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "Dialog", "CeremonyGate" ] }, { "name": "Modal", "slug": "modal", "category": "ui", "subcategory": "overlays", "description": "Full-featured modal wrapper with header, body, and footer slots", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "Dialog", "AlertDialog" ] }, { "name": "DropdownMenu", "slug": "dropdown-menu", "category": "ui", "subcategory": "overlays", "description": "Contextual menu triggered by button press", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "Popover", "Select" ] }, { "name": "Popover", "slug": "popover", "category": "ui", "subcategory": "overlays", "description": "Floating content panel anchored to a trigger element", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "Tooltip", "DropdownMenu" ] }, { "name": "Tooltip", "slug": "tooltip", "category": "ui", "subcategory": "overlays", "description": "Contextual tooltip with Radix positioning", "tags": [ "responsive" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "Popover" ] }, { "name": "GlossaryTooltip", "slug": "glossary-tooltip", "category": "ui", "subcategory": "overlays", "description": "Inline term definition for technical vocabulary — wraps jargon in a semantic abbr with a plain-language tooltip (H2 + H10)", "tags": [], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "Tooltip", "QuickTooltip" ] }, { "name": "Accordion", "slug": "accordion", "category": "ui", "subcategory": "overlays", "description": "Collapsible content sections with Radix animation support", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "Tabs" ] }, { "name": "TableOfContents", "slug": "table-of-contents", "category": "ui", "subcategory": "overlays", "description": "Collapsible table of contents with anchor link navigation", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "Accordion" ] }, { "name": "Text", "slug": "text", "category": "ui", "subcategory": "typography", "description": "Body text primitive with size and weight control", "tags": [ "responsive" ], "sizes": [ "sm", "md", "lg" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Heading", "Code" ] }, { "name": "Heading", "slug": "heading", "category": "ui", "subcategory": "typography", "description": "Semantic heading element with display and size variants", "tags": [ "responsive" ], "sizes": [ "1", "2", "3", "4", "5", "6" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Text" ] }, { "name": "Code", "slug": "code", "category": "ui", "subcategory": "typography", "description": "Inline or block code display with syntax styling", "tags": [ "responsive" ], "variants": [ "inline", "block" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Kbd", "InstallBlock" ] }, { "name": "Kbd", "slug": "kbd", "category": "ui", "subcategory": "typography", "description": "Keyboard shortcut display element", "tags": [ "responsive" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Code" ] }, { "name": "Link", "slug": "link", "category": "ui", "subcategory": "typography", "description": "Styled anchor element with underline and color variants", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Button", "Text" ] }, { "name": "Blockquote", "slug": "blockquote", "category": "ui", "subcategory": "typography", "description": "Styled block quote with accent border", "tags": [ "responsive" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Text", "Callout" ] }, { "name": "Em", "slug": "em", "category": "ui", "subcategory": "typography", "description": "Emphasized italic text", "tags": [ "responsive" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Strong", "Text" ] }, { "name": "Strong", "slug": "strong", "category": "ui", "subcategory": "typography", "description": "Bold emphasis text", "tags": [ "responsive" ], "status": "stable", "since": "S1", "version": "1.0.0", "related": [ "Em", "Text" ] }, { "name": "ApprovalGate", "slug": "approval-gate", "category": "ui", "subcategory": "trust", "description": "Binary approve/deny gate with ceremony-level friction", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "CeremonyGate", "AlertDialog", "ApprovalQueue" ] }, { "name": "CeremonyGate", "slug": "ceremony-gate", "category": "ui", "subcategory": "trust", "description": "Multi-step deliberate confirmation for high-stakes actions", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "ApprovalGate", "ConsentFlow" ] }, { "name": "IntegritySeal", "slug": "integrity-seal", "category": "ui", "subcategory": "trust", "description": "SHA-256 hash verification badge", "tags": [ "responsive" ], "status": "stable", "since": "S3", "version": "1.0.0", "related": [ "AuditTrail", "ProvenanceChain" ] }, { "name": "GroundingIndicator", "slug": "grounding-indicator", "category": "ui", "subcategory": "trust", "description": "Visual indicator of AI response grounding quality", "tags": [ "responsive" ], "status": "stable", "since": "S3", "version": "1.0.0", "related": [ "ConfidenceMeter", "CitationCard" ] }, { "name": "LearnedFromBadge", "slug": "learned-from-badge", "category": "ui", "subcategory": "trust", "description": "Attribution badge showing learning source", "tags": [ "responsive" ], "status": "stable", "since": "S3", "version": "1.0.0", "related": [ "LearningLedger", "DataTag" ] }, { "name": "InstallBlock", "slug": "install-block", "category": "ui", "subcategory": "trust", "description": "Code block with copy-to-clipboard for install commands", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "Code", "IntegritySeal" ] }, { "name": "NodePrimitive", "slug": "node-primitive", "category": "ui", "subcategory": "graph", "description": "Draggable graph node with status-driven styling and pulse animation", "tags": [ "responsive", "touch-safe" ], "sizes": [ "small", "medium", "large" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "EdgePrimitive", "GraphLayout", "AgentGraph" ] }, { "name": "EdgePrimitive", "slug": "edge-primitive", "category": "ui", "subcategory": "graph", "description": "SVG connection line between graph nodes", "tags": [ "responsive" ], "status": "stable", "since": "S2", "version": "1.0.0", "related": [ "NodePrimitive", "GraphLayout" ] }, { "name": "GraphLayout", "slug": "graph-layout", "category": "ui", "subcategory": "graph", "description": "Force-directed or grid layout engine for node graphs", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S2", "version": "1.0.0", "related": [ "NodePrimitive", "EdgePrimitive", "AgentGraph" ] }, { "name": "ThemeToggle", "slug": "theme-toggle", "category": "ui", "subcategory": "actions", "description": "Light/dark theme toggle", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Button" ] }, { "name": "RuntimeThemeProvider", "slug": "runtime-theme-provider", "category": "ui", "subcategory": "theming", "description": "React context that applies a ThemeConfig as --ds-* CSS custom properties scoped to a wrapper div or document root. Use createTheme() to build a typed config; pair with serializeThemeToCss() for SSR injection.", "tags": [], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": false, "related": [ "ThemeToggle" ] }, { "name": "MFAInput", "slug": "mfa-input", "category": "ui", "subcategory": "trust", "description": "Six/eight-digit OTP code entry with auto-advance, paste support, countdown timer, and resend action", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "CeremonyGate", "LoginCard" ] }, { "name": "PasswordStrength", "slug": "password-strength", "category": "ui", "subcategory": "trust", "description": "Password complexity meter with four-segment bar and requirement checklist", "tags": [ "responsive" ], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": false, "related": [ "LoginCard", "Meter" ] }, { "name": "RoleBadge", "slug": "role-badge", "category": "ui", "subcategory": "trust", "description": "Treasury persona role indicator with semantic color coding (analyst, manager, director, controller, compliance)", "tags": [ "responsive" ], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": false, "related": [ "Badge", "UserProfileCard", "AccessDenied" ] }, { "name": "APIKeyDisplay", "slug": "api-key-display", "category": "ui", "subcategory": "trust", "description": "Masked API key display with reveal toggle, copy-to-clipboard, metadata, and revoke action", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "CeremonyGate" ] }, { "name": "ProgressiveDisclosure", "slug": "progressive-disclosure", "category": "ui", "subcategory": "layout", "description": "Three-level disclosure primitive (compact / default / verbose) that resolves the H7 tension between Principle 02 (Ceremony Over Efficiency) and expert user needs. Includes DisclosureLevelToggle for shared list-level control.", "tags": [], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "Accordion", "Modal", "ContextWindow" ] }, { "name": "ConfirmDialog", "slug": "confirm-dialog", "category": "ui", "subcategory": "overlays", "description": "Lightweight single-step confirmation dialog for destructive or consequential actions. Fills the H5 (Error Prevention) gap between zero-confirmation and the heavy CeremonyGate pattern. Includes useConfirmDialog hook for imperative usage.", "tags": [], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "CeremonyGate", "OverrideConfirmation", "Modal" ] }, { "name": "KeyboardShortcutsPanel", "slug": "keyboard-shortcuts-panel", "category": "ui", "subcategory": "navigation", "description": "Scannable reference panel for keyboard shortcuts. Three trigger modes: inline (dedicated pages), button (sidebar/settings), and kbd (global ? key). Closes H7 (Flexibility/Efficiency) by surfacing accelerators, and H10 (Help/Documentation) via ambient self-documentation. Includes KeyboardBadge sub-component for styled key display. Supports grouping, context-filtering, and multi-platform key variants.", "tags": [], "status": "beta", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "GlossaryTooltip", "ProgressiveDisclosure", "ConfirmDialog" ] }, { "name": "Breadcrumbs", "slug": "breadcrumbs", "category": "ui", "subcategory": "navigation", "description": "Hierarchical navigation trail with configurable separator, overflow collapse, and semantic markup", "tags": [ "navigation", "hierarchy", "path" ], "variants": [], "sizes": [ "sm", "md", "lg" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "Tabs", "SegmentedControl", "Stepper" ] }, { "name": "Stepper", "slug": "stepper", "category": "ui", "subcategory": "navigation", "description": "Multi-step progress indicator with horizontal/vertical orientation and step status tracking", "tags": [ "progress", "wizard", "multi-step" ], "variants": [], "sizes": [ "sm", "md", "lg" ], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": false, "related": [ "Breadcrumbs", "Progress" ] }, { "name": "NumberInput", "slug": "number-input", "category": "ui", "subcategory": "data-entry", "description": "Numeric input with currency formatting, min/max/step clamping, stepper buttons, and Intl.NumberFormat", "tags": [ "form", "number", "currency", "finance" ], "variants": [], "sizes": [ "sm", "md", "lg" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "TextField", "CurrencyAmount" ] }, { "name": "DatePicker", "slug": "date-picker", "category": "ui", "subcategory": "data-entry", "description": "Date selection input using native date control with DS token styling and monospace font", "tags": [ "form", "date", "finance", "calendar" ], "variants": [], "sizes": [ "sm", "md", "lg" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "DateRangePicker", "NumberInput", "TextField" ] }, { "name": "DateRangePicker", "slug": "date-range-picker", "category": "ui", "subcategory": "data-entry", "description": "Date range selection with linked start/end inputs, automatic min/max constraints", "tags": [ "form", "date", "range", "finance" ], "variants": [], "sizes": [ "sm", "md", "lg" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "DatePicker", "NumberInput" ] }, { "name": "Command", "slug": "command", "category": "ui", "subcategory": "overlays", "description": "Command palette / combobox built on cmdk with DS token styling. Composable sub-components.", "tags": [ "command", "palette", "search", "combobox", "cmdk" ], "variants": [], "sizes": [], "status": "stable", "since": "S2", "version": "1.0.0", "interactive": true, "related": [ "KeyboardShortcutsPanel", "Modal" ] }, { "name": "AgencyIndicator", "slug": "agency-indicator", "category": "pattern", "subcategory": "agency-control", "description": "5-level agency scale from autonomous to human-controlled", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "AgencyStack", "AgentCard" ] }, { "name": "AgencyStack", "slug": "agency-stack", "category": "pattern", "subcategory": "agency-control", "description": "Layered agency visualization with progress meters", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "related": [ "AgencyIndicator", "AgentCard" ] }, { "name": "AgentCard", "slug": "agent-card", "category": "pattern", "subcategory": "agency-control", "description": "Agent identity card with trust level, status, and expandable permissions", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "AgentTimeline", "AgentGraph", "Avatar" ] }, { "name": "AgentGraph", "slug": "agent-graph", "category": "pattern", "subcategory": "agency-control", "description": "Force-directed graph of agent relationships and communication", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "related": [ "NodePrimitive", "EdgePrimitive", "GraphLayout" ] }, { "name": "AgentTimeline", "slug": "agent-timeline", "category": "pattern", "subcategory": "agency-control", "description": "Chronological log of agent actions with status filtering", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "AgentCard", "AuditTrail" ] }, { "name": "AgentIdentityBadge", "slug": "agent-identity-badge", "category": "pattern", "subcategory": "agency-control", "description": "Three-surface agent identity signal — inline @mention chip, card with capabilities, full sidebar panel. Encodes role, execution state, and approval-gated capabilities using semantic tokens.", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "AgentCard", "AgentTimeline", "StatusDot", "Badge" ] }, { "name": "MCPToolCall", "slug": "mcp-tool-call", "category": "pattern", "subcategory": "tool-execution", "description": "Expandable tool call log with input/output/error panels", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "ToolResult", "MCPServerStatus" ] }, { "name": "MCPServerStatus", "slug": "mcp-server-status", "category": "pattern", "subcategory": "tool-execution", "description": "MCP server health dashboard with tool listing", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "MCPToolCall", "StatusDot" ] }, { "name": "ToolResult", "slug": "tool-result", "category": "pattern", "subcategory": "tool-execution", "description": "Formatted tool execution result with status and duration", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "related": [ "MCPToolCall" ] }, { "name": "ChatMessage", "slug": "chat-message", "category": "pattern", "subcategory": "conversation", "description": "Conversational message bubble for human or AI sender", "tags": [], "variants": [ "human", "ai", "system" ], "status": "stable", "since": "S3", "version": "1.0.0", "related": [ "StreamingResponse", "ContextWindow" ] }, { "name": "StreamingResponse", "slug": "streaming-response", "category": "pattern", "subcategory": "conversation", "description": "Streaming LLM output with temporal cursor. Displays content immediately — no fake simulation. StreamingDot disappears instantly on completion.", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "related": [ "ChatMessage", "StreamingDot" ] }, { "name": "ContextWindow", "slug": "context-window", "category": "pattern", "subcategory": "conversation", "description": "Token budget visualization showing context utilization", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "related": [ "TokenCounter", "CostIndicator" ] }, { "name": "CitationCard", "slug": "citation-card", "category": "pattern", "subcategory": "conversation", "description": "Data source citation with type icon, inline freshness timestamp, and stale indicator (DAN-17)", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "related": [ "ProvenanceChain", "ConfidenceMeter" ] }, { "name": "ModelSelector", "slug": "conversation-model-selector", "category": "pattern", "subcategory": "conversation", "description": "AI model picker with capability comparison", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "ModelTag", "Select" ] }, { "name": "ApprovalQueue", "slug": "approval-queue", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Queue of pending human approvals with priority ordering", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "ApprovalGate", "ConsentFlow" ] }, { "name": "ApprovalCard", "slug": "approval-card", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Single approval request for the A2UI nodus:approval-card spec: agent sources, confidence, reasoning, consequences, and Approve / Reject with a decided state", "tags": [], "status": "beta", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "ApprovalGate", "ApprovalQueue", "HumanInputRequest" ] }, { "name": "CycleRail", "slug": "cycle-rail", "category": "pattern", "subcategory": "orchestration", "description": "A recurring loop of stages that does not end: a track of 2 to 8 stages, the live stage marked, and the return from the last stage to the first drawn with the cycle count on it", "tags": [], "status": "beta", "since": "S5", "version": "1.0.0", "interactive": false, "related": [ "RunLifecycleRail", "PaymentLifecycleTracker", "OnboardingChecklist" ] }, { "name": "KanbanBoard", "slug": "kanban-board", "category": "pattern", "subcategory": "orchestration", "description": "A pipeline board: columns of cards that move between stages by pointer drag, by a Move control on each card, or by keyboard alone, with counts, empty columns and a work-in-progress limit", "tags": [], "status": "beta", "since": "S5", "version": "1.0.0", "interactive": true, "related": [ "ApprovalQueue", "CycleRail", "RunLifecycleRail" ] }, { "name": "ConsentFlow", "slug": "consent-flow", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Multi-step consent wizard with step indicator", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "CeremonyGate", "ApprovalQueue" ] }, { "name": "CorrectionFlow", "slug": "correction-flow", "category": "pattern", "subcategory": "human-in-the-loop", "description": "UI for correcting AI output with diff preview", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "IterationDiff" ] }, { "name": "EscalationBanner", "slug": "escalation-banner", "category": "pattern", "subcategory": "human-in-the-loop", "description": "High-priority alert banner for human escalation", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "Callout", "ApprovalQueue" ] }, { "name": "GuardrailIndicator", "slug": "guardrail-indicator", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Visual indicator of active guardrails and safety constraints", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "GroundingIndicator", "ConfidenceMeter" ] }, { "name": "AuditTrail", "slug": "audit-trail", "category": "pattern", "subcategory": "trust-provenance", "description": "Immutable action log with integrity hash chain", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "IntegritySeal", "ProvenanceChain", "AgentTimeline" ] }, { "name": "ProvenanceChain", "slug": "provenance-chain", "category": "pattern", "subcategory": "trust-provenance", "description": "Linked chain of data sources showing transformation provenance", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "AuditTrail", "CitationCard", "DataTag" ] }, { "name": "ProvenanceFrame", "slug": "provenance-frame", "category": "pattern", "subcategory": "trust-provenance", "description": "Wrapper for agent-rendered generative-UI output: provenance chip rail, agency-red left marker, validation warnings, and a streaming state", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "UnknownComponentFallback", "ProvenanceChain", "CitationCard" ] }, { "name": "UnknownComponentFallback", "slug": "unknown-component-fallback", "category": "pattern", "subcategory": "trust-provenance", "description": "Visible, honest fallback when a generative-UI action requests a component outside the approved catalog", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "ProvenanceFrame" ] }, { "name": "VaultBoundary", "slug": "vault-boundary", "category": "pattern", "subcategory": "trust-provenance", "description": "Visual boundary between vault permission zones", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "PermissionMatrix" ] }, { "name": "PermissionMatrix", "slug": "permission-matrix", "category": "pattern", "subcategory": "trust-provenance", "description": "Grid of resource-permission grants for agent authorization", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "VaultBoundary", "AgentCard" ] }, { "name": "ConfidenceMeter", "slug": "confidence-meter", "category": "pattern", "subcategory": "trust-provenance", "description": "Labeled confidence gauge with low/moderate/high qualifier", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "Meter", "GroundingIndicator" ] }, { "name": "TemporalScale", "slug": "temporal-scale", "category": "pattern", "subcategory": "trust-provenance", "description": "Time-based scale showing recency and freshness", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "Timestamp", "DataFreshness" ] }, { "name": "A2UISurface", "slug": "a2ui-surface", "category": "pattern", "subcategory": "orchestration", "description": "Agent-to-UI renderer — accepts declarative nodus:* component specs and renders the appropriate Nodus component", "tags": [], "status": "stable", "since": "S5", "version": "1.0.0", "interactive": true, "related": [ "ApprovalGate", "A2AHandoff", "AgentCard" ] }, { "name": "A2AHandoff", "slug": "a2a-handoff", "category": "pattern", "subcategory": "orchestration", "description": "Agent-to-agent task handoff visualization with protocol steps", "tags": [], "status": "stable", "since": "S5", "version": "1.0.0", "related": [ "TaskQueue", "AgentGraph" ] }, { "name": "TaskQueue", "slug": "task-queue", "category": "pattern", "subcategory": "orchestration", "description": "Ordered task list with status tracking and priority", "tags": [], "status": "stable", "since": "S5", "version": "1.0.0", "interactive": true, "related": [ "A2AHandoff", "ApprovalQueue" ] }, { "name": "ReasoningTree", "slug": "reasoning-tree", "category": "pattern", "subcategory": "reasoning", "description": "Collapsible tree of reasoning steps with depth indicators", "tags": [], "status": "stable", "since": "S6", "version": "1.0.0", "interactive": true, "related": [ "ThoughtEntry", "IterationDiff" ] }, { "name": "ThoughtEntry", "slug": "thought-entry", "category": "pattern", "subcategory": "reasoning", "description": "Single reasoning step with type indicator and content", "tags": [], "status": "stable", "since": "S6", "version": "1.0.0", "related": [ "ReasoningTree" ] }, { "name": "ThinkingState", "slug": "thinking-state", "category": "pattern", "subcategory": "reasoning", "description": "In-progress LLM reasoning indicator with temporal pulse, elapsed timer, and optional chain-of-thought trace", "tags": [], "status": "stable", "since": "S6", "version": "1.0.0", "related": [ "ThoughtEntry", "StreamingResponse" ] }, { "name": "IterationDiff", "slug": "iteration-diff", "category": "pattern", "subcategory": "reasoning", "description": "Side-by-side or inline diff of iteration changes", "tags": [], "status": "stable", "since": "S6", "version": "1.0.0", "related": [ "CorrectionFlow", "ReasoningTree" ] }, { "name": "LearningLedger", "slug": "learning-ledger", "category": "pattern", "subcategory": "learning", "description": "Log of learned behaviors and their sources", "tags": [], "status": "stable", "since": "S6", "version": "1.0.0", "related": [ "EvalRadar", "LearnedFromBadge" ] }, { "name": "EvalRadar", "slug": "eval-radar", "category": "pattern", "subcategory": "learning", "description": "Radar/spider chart for multi-dimensional evaluation scoring", "tags": [], "status": "stable", "since": "S6", "version": "1.0.0", "related": [ "LearningLedger", "RetryLedger" ] }, { "name": "RetryLedger", "slug": "retry-ledger", "category": "pattern", "subcategory": "learning", "description": "Log of retry attempts with backoff timing", "tags": [], "status": "stable", "since": "S6", "version": "1.0.0", "related": [ "LearningLedger", "EvalRadar" ] }, { "name": "SimilarityCloud", "slug": "similarity-cloud", "category": "pattern", "subcategory": "visualization", "description": "Visual cluster of semantically similar items", "tags": [], "status": "stable", "since": "S7", "version": "1.0.0", "related": [ "RetrievalRanking" ] }, { "name": "RetrievalRanking", "slug": "retrieval-ranking", "category": "pattern", "subcategory": "visualization", "description": "Ranked list of retrieved documents with relevance scores", "tags": [], "status": "stable", "since": "S7", "version": "1.0.0", "related": [ "SimilarityCloud", "CitationCard" ] }, { "name": "CostDashboard", "slug": "cost-dashboard", "category": "pattern", "subcategory": "visualization", "description": "Token cost breakdown by model and operation", "tags": [], "status": "stable", "since": "S7", "version": "1.0.0", "related": [ "CostIndicator", "TokenCounter" ] }, { "name": "LoginCard", "slug": "login-card", "category": "pattern", "subcategory": "identity", "description": "Authentication form with email/password, SSO providers, password strength, and branding slot", "tags": [], "status": "stable", "since": "S9", "version": "1.0.0", "interactive": true, "related": [ "MFAInput", "PasswordStrength", "SessionTimeoutDialog" ] }, { "name": "SessionTimeoutDialog", "slug": "session-timeout-dialog", "category": "pattern", "subcategory": "identity", "description": "Session expiry warning dialog with countdown timer, progress bar, and extend/logout actions", "tags": [], "status": "stable", "since": "S9", "version": "1.0.0", "interactive": true, "related": [ "LoginCard", "CeremonyGate" ] }, { "name": "AccessDenied", "slug": "access-denied", "category": "pattern", "subcategory": "identity", "description": "Unauthorized access state with role comparison, request-access CTA, and navigation back", "tags": [], "status": "stable", "since": "S9", "version": "1.0.0", "interactive": true, "related": [ "RoleBadge", "EmptyState", "LoginCard" ] }, { "name": "UserProfileCard", "slug": "user-profile-card", "category": "pattern", "subcategory": "identity", "description": "User profile with avatar, role badge, permissions summary, last login, and sign-out action", "tags": [], "status": "stable", "since": "S9", "version": "1.0.0", "interactive": true, "related": [ "RoleBadge", "Avatar", "PermissionMatrix" ] }, { "name": "AvatarStack", "slug": "avatar-stack", "category": "pattern", "subcategory": "identity", "description": "Overlapping avatar circles showing multiple users or active sessions with overflow count", "tags": [], "status": "stable", "since": "S9", "version": "1.0.0", "interactive": false, "related": [ "UserProfileCard", "StatusDot", "Badge" ] }, { "name": "AgentConflictPanel", "slug": "agent-conflict-panel", "category": "pattern", "subcategory": "coordination", "description": "Multi-agent conflict resolution panel — surfaces conflict, delegation, and override states with parallel position display and human resolution flow", "tags": [], "status": "stable", "since": "S5", "version": "1.0.0", "interactive": true, "related": [ "AgentIdentityBadge", "ProvenanceChain", "ConfidenceMeter", "ApprovalQueue" ] }, { "name": "ChartTooltip", "slug": "chart-tooltip", "category": "pattern", "subcategory": "dataviz", "description": "Recharts-compatible tooltip that distinguishes user-selected vs. agent-highlighted data points with semantic color treatment", "tags": [], "status": "stable", "since": "S9", "version": "1.0.0", "interactive": true, "related": [ "ChartAnnotation", "ChartComparisonBar", "DSLineChart", "DSBarChart" ] }, { "name": "ChartAnnotation", "slug": "chart-annotation", "category": "pattern", "subcategory": "dataviz", "description": "Persistent inline chart marker for agent-noted anomalies, threshold crossings, or notable observations with semantic color coding", "tags": [], "status": "stable", "since": "S9", "version": "1.0.0", "interactive": false, "related": [ "ChartTooltip", "ChartComparisonBar" ] }, { "name": "ChartComparisonBar", "slug": "chart-comparison-bar", "category": "pattern", "subcategory": "dataviz", "description": "Overlay control strip for comparing two periods, entities, or scenarios with A/B labeling and delta display", "tags": [], "status": "stable", "since": "S9", "version": "1.0.0", "interactive": true, "related": [ "ChartTooltip", "ChartAnnotation", "DSBarChart" ] }, { "name": "AgentIntroductionCard", "slug": "agent-introduction-card", "category": "pattern", "subcategory": "agentic", "description": "First-run agent presentation card. Discloses identity, trust tier, and every capability class (read/write/transact) before the agent takes any action. Approval-gated items are labeled in gold.", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "AgentCard", "ConsentFlow", "ProgressivePermissionFlow" ] }, { "name": "ProgressivePermissionFlow", "slug": "progressive-permission-flow", "category": "pattern", "subcategory": "agentic", "description": "Incremental trust escalation pattern: read → write → transact. Each step requires explicit human approval. The agent can never skip a capability class.", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "AgentIntroductionCard", "ConsentFlow", "ApprovalQueue" ] }, { "name": "OnboardingChecklist", "slug": "onboarding-checklist", "category": "pattern", "subcategory": "agentic", "description": "Agentic task completion tracker for first-run onboarding. Items carry status, agent attribution, timestamps, and provenance links. Blocked items surface human-action requirements.", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "TaskQueue", "ProvenanceChain", "ApprovalQueue" ] }, { "name": "ErrorBoundaryCard", "slug": "error-boundary-card", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Containment unit for agent errors — severity-coded card with recovery actions", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "AgentRecoveryFlow", "PartialSuccessPanel", "EscalationBanner" ] }, { "name": "AgentRecoveryFlow", "slug": "agent-recovery-flow", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Recovery breadcrumb timeline showing every step an agent attempted after hitting a dead end", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "ErrorBoundaryCard", "PartialSuccessPanel", "RetryLedger" ] }, { "name": "PartialSuccessPanel", "slug": "partial-success-panel", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Partial completion panel — agent did N of M steps, human needed on step K", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "ErrorBoundaryCard", "AgentRecoveryFlow", "ApprovalQueue", "EscalationBanner" ] }, { "name": "StateBadge", "slug": "state-badge", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Color-coded uppercase badge for the six canonical AI interaction states (loading, thinking, acting, confirming, error, recovery)", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "StateIndicator", "ScenarioScript", "AgencyIndicator" ] }, { "name": "StateIndicator", "slug": "state-indicator", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Animated dot indicator for AI interaction states — CSS-only animations with prefers-reduced-motion support", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "StateBadge", "ScenarioScript", "AgentThinkingIndicator" ] }, { "name": "ScenarioScript", "slug": "scenario-script", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Linear step sequence for documenting agent interaction flows — shows state badge, copy, and annotation per step", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "StateBadge", "StateIndicator" ] }, { "name": "AgentPauseControl", "slug": "agent-pause-control", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Pause/resume control for in-flight agents with execution state preservation — shows step count and last completed action when paused", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "RedirectPanel", "OverrideConfirmation", "TaskQueue", "AgentRecoveryFlow" ] }, { "name": "RedirectPanel", "slug": "redirect-panel", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Mid-execution goal redirect — shows agent progress, struck-through original goal, and preview of new goal before confirming", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "AgentPauseControl", "OverrideConfirmation", "PartialSuccessPanel" ] }, { "name": "OverrideConfirmation", "slug": "override-confirmation", "category": "pattern", "subcategory": "human-in-the-loop", "description": "High-stakes override with consequence preview and mandatory acknowledgment — no blind overrides, consequences always shown first", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "AgentPauseControl", "RedirectPanel", "ErrorBoundaryCard", "EscalationBanner" ] }, { "name": "useAgentStream", "slug": "use-agent-stream", "category": "pattern", "subcategory": "orchestration", "kind": "hook", "description": "SSE stream subscription hook — returns { chunks, status, latency, start, reset }. Simulates token-by-token delivery with configurable TTFT, chunkInterval, and chunkSize.", "tags": [], "status": "stable", "since": "S5", "version": "1.0.0", "related": [ "usePositionFeed", "useAgentHeartbeat", "StreamingResponse", "ThinkingState" ] }, { "name": "usePositionFeed", "slug": "use-position-feed", "category": "pattern", "subcategory": "orchestration", "kind": "hook", "description": "Live FX position tick hook — returns { positions, lastUpdate, delta, running, pause, resume }. Configurable volatility and tick interval.", "tags": [], "status": "stable", "since": "S5", "version": "1.0.0", "related": [ "useAgentStream", "useAgentHeartbeat" ] }, { "name": "useAgentHeartbeat", "slug": "use-agent-heartbeat", "category": "pattern", "subcategory": "orchestration", "kind": "hook", "description": "Agent status polling hook — returns { agents, lastPing, stale, ping }. Marks agents stale after configurable staleness window. Used in multi-agent orchestration views.", "tags": [], "status": "stable", "since": "S5", "version": "1.0.0", "related": [ "useAgentStream", "usePositionFeed" ] }, { "name": "AgentCapabilityMatrix", "slug": "agent-capability-matrix", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Scannable grid of agents × capability dimensions — blue=granted, gold=conditional, red=denied — designed for treasury dashboards at 3am", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "CapabilityGrant", "CapabilityRevokeFlow", "PermissionMatrix", "AgentIdentityBadge" ] }, { "name": "CapabilityGrant", "slug": "capability-grant", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Single permission grant card with conditions (time-bounded, value-bounded, approval-gated), audit trail toggle, and revoke trigger", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "AgentCapabilityMatrix", "CapabilityRevokeFlow", "ProvenanceChain" ] }, { "name": "CapabilityRevokeFlow", "slug": "capability-revoke-flow", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Two-step revocation ceremony: Step 1 shows task impact preview (will-fail / may-degrade), Step 2 requires written reason — non-repudiable audit trail", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "related": [ "CapabilityGrant", "AgentCapabilityMatrix", "OverrideConfirmation" ] }, { "name": "AmbientAgentStatus", "slug": "ambient-agent-status", "category": "pattern", "subcategory": "agency-control", "description": "Non-intrusive background activity indicator. Shows agents working without demanding attention. Three variants: dot (toolbar), strip (bottom bar), tray (collapsible side panel).", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "AgentIdentityBadge", "CollaborationPresence", "ThinkingState", "StatusDot" ] }, { "name": "ConfidenceSpectrum", "slug": "confidence-spectrum", "category": "pattern", "subcategory": "trust-provenance", "description": "Multi-dimensional certainty visualization. Shows uncertainty fingerprint across epistemic, aleatory, temporal, and consensus dimensions. Distinct from ConfidenceMeter (single-axis).", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ConfidenceMeter", "ActionProvenanceCard", "ProvenanceChain", "CitationCard" ] }, { "name": "CollaborationPresence", "slug": "collaboration-presence", "category": "pattern", "subcategory": "multi-agent", "description": "Multi-user + agent co-presence indicator. Visually distinguishes humans (round avatars) from agents (square monograms). Shows execution state, ghost presence, and typed participant counts.", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": false, "related": [ "AgentIdentityBadge", "AmbientAgentStatus", "AvatarStack", "AgentTimeline" ] }, { "name": "PresenceAvatarStack", "slug": "presence-avatar-stack", "category": "pattern", "subcategory": "multi-agent", "description": "Agent-aware presence avatar stack. Distinguishes humans (circular) from agents (square) in a compact overlap row. Shows executing, active, idle, and ghost states with appropriate ring colors.", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": false, "related": [ "CollaborationPresence", "AvatarStack", "AgentIdentityBadge", "CollaborativeCursor" ] }, { "name": "CollaborativeCursor", "slug": "collaborative-cursor", "category": "pattern", "subcategory": "multi-agent", "description": "Ghost cursor with identity. Renders a participant cursor as an overlay inside a position:relative container. Agents use a bracket cursor shape in agency red; humans use an arrow cursor in their avatar color.", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": false, "related": [ "PresenceAvatarStack", "CollaborationPresence", "LiveChangeIndicator" ] }, { "name": "LiveChangeIndicator", "slug": "live-change-indicator", "category": "pattern", "subcategory": "multi-agent", "description": "Diff highlight for live edits. Wraps changed content in three modes: inline (underline + badge), field (left border), block (full tint). Always attributes the change to a named human or agent.", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "ConflictResolutionBanner", "CollaborativeCursor", "ProvenanceChain", "AuditTrail" ] }, { "name": "ConflictResolutionBanner", "slug": "conflict-resolution-banner", "category": "pattern", "subcategory": "multi-agent", "description": "Agent conflict surface. When two participants produce diverging values, this surfaces both versions for human arbitration. Gold (validation) color — conflict is a decision gate, not an error. Shows confidence bars and agent reasoning.", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": true, "related": [ "LiveChangeIndicator", "ApprovalQueue", "ProvenanceChain", "OverrideConfirmation" ] }, { "name": "ActionProvenanceCard", "slug": "action-provenance-card", "category": "pattern", "subcategory": "trust-provenance", "description": "Traceable action attribution receipt. Shows decision authority, executing agent, human approver, confidence at decision time, and evidence used. Mandatory for consequential agentic actions.", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "ProvenanceChain", "ConfidenceSpectrum", "ApprovalQueue", "AuditTrail" ] }, { "name": "AgentActivityFeed", "slug": "agent-activity-feed", "category": "pattern", "subcategory": "agency-control", "description": "Chronological feed of agent actions, tool calls, decisions, and state transitions. Each entry carries type, actor, description, and relative timestamp.", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": false, "related": [ "AgentTimeline", "AuditTrail", "ThinkingState", "MultiAgentOrchestrationView" ] }, { "name": "AgentConfidenceBar", "slug": "agent-confidence-bar", "category": "pattern", "subcategory": "agency-control", "description": "Inline confidence bar for a single agent output. Renders a colored progress bar with optional numeric label. Color maps to outcome tokens.", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": false, "related": [ "ConfidenceMeter", "ConfidenceSpectrum", "AgentCard", "TrustScoreDisplay" ] }, { "name": "AgentDecisionTree", "slug": "agent-decision-tree", "category": "pattern", "subcategory": "reasoning", "description": "Vertical branching logic tree. Each node shows condition evaluated, agent verdict, and whether that branch was taken. Terminal nodes show final outcome.", "tags": [], "status": "stable", "since": "S6", "version": "1.0.0", "interactive": false, "related": [ "ReasoningTree", "ProvenanceChain", "AgentActivityFeed", "ConfidenceSpectrum" ] }, { "name": "AgentSourceCitation", "slug": "agent-source-citation", "category": "pattern", "subcategory": "trust-provenance", "description": "Inline citation block listing the evidence sources an agent used. Each entry has source name, type, confidence score, and retrieval timestamp.", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CitationCard", "ProvenanceChain", "ActionProvenanceCard", "RetrievalRanking" ] }, { "name": "AgentThinkingIndicator", "slug": "agent-thinking-indicator", "category": "pattern", "subcategory": "agency-control", "description": "Animated loading indicator communicating an agent is actively processing. Supports text label, step counter, and elapsed time. Uses temporal color.", "tags": [], "status": "stable", "since": "S3", "version": "1.0.0", "interactive": false, "related": [ "ThinkingState", "StreamingResponse", "AmbientAgentStatus", "StreamingDot" ] }, { "name": "DataLineageTag", "slug": "data-lineage-tag", "category": "pattern", "subcategory": "trust-provenance", "description": "Compact hop-chain tag showing data lineage from source to consumer. Each hop has a system name and optional transformation type.", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ProvenanceChain", "AgentSourceCitation", "AuditTrail", "CitationCard" ] }, { "name": "DeadlineCountdown", "slug": "deadline-countdown", "category": "pattern", "subcategory": "visualization", "description": "Real-time deadline countdown. Transitions color from validation → caution → agency as deadline approaches. Supports critical threshold configuration.", "tags": [], "status": "stable", "since": "S7", "version": "1.0.0", "interactive": false, "related": [ "RelativeTimestamp", "TemporalScale", "AgentTimeline", "ScheduleGridView" ] }, { "name": "MultiAgentOrchestrationView", "slug": "multi-agent-orchestration-view", "category": "pattern", "subcategory": "orchestration", "description": "Pipeline view of a multi-agent workflow. Shows each agent step with status (queued/active/done/failed/blocked/skipped), duration, and dependency connectors.", "tags": [], "status": "stable", "since": "S5", "version": "1.0.0", "interactive": false, "related": [ "AgentActivityFeed", "AgentTimeline", "TaskQueue", "CollaborationPresence" ] }, { "name": "OverrideJustification", "slug": "override-justification", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Structured justification form for human overrides of agent decisions. Captures reason category, free-text rationale, and acknowledges accountability.", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "OverrideConfirmation", "ApprovalQueue", "ActionProvenanceCard", "GuardrailIndicator" ] }, { "name": "RelativeTimestamp", "slug": "relative-timestamp", "category": "pattern", "subcategory": "visualization", "description": "Localized relative timestamp that updates in real time. Shows '2 min ago', 'just now', etc. with a tooltip showing the absolute ISO time.", "tags": [], "status": "stable", "since": "S7", "version": "1.0.0", "interactive": false, "related": [ "DeadlineCountdown", "TemporalScale", "AgentTimeline", "Timestamp" ] }, { "name": "ReviewRequestCard", "slug": "review-request-card", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Card surface for human review requests from an agent. Shows the decision context, confidence, urgency level, and approve/reject actions.", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "ApprovalQueue", "OverrideJustification", "OverrideConfirmation", "ActionProvenanceCard" ] }, { "name": "ScheduleGridView", "slug": "schedule-grid-view", "category": "pattern", "subcategory": "visualization", "description": "Time-grid schedule view with columns (agents/pipelines) and rows (time slots). Tasks displayed as colored blocks with status-mapped outcome tokens.", "tags": [], "status": "stable", "since": "S7", "version": "1.0.0", "interactive": false, "related": [ "DeadlineCountdown", "MultiAgentOrchestrationView", "AgentTimeline", "TaskQueue" ] }, { "name": "TrustScoreDisplay", "slug": "trust-score-display", "category": "pattern", "subcategory": "trust-provenance", "description": "Composite trust score display with breakdown by factor (accuracy, recency, source quality, consensus). Score maps to outcome color tokens.", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ConfidenceMeter", "ConfidenceSpectrum", "AgentConfidenceBar", "ProvenanceChain" ] }, { "name": "ValidationChain", "slug": "validation-chain", "category": "pattern", "subcategory": "trust-provenance", "description": "Sequential validation pipeline display. Each step shows rule name, result (pass/fail/warning/pending/skipped), and optional message. Used for data quality and policy gates.", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ProvenanceChain", "DataLineageTag", "GuardrailIndicator", "TrustScoreDisplay" ] }, { "name": "ReconciliationDiff", "slug": "reconciliation-diff", "category": "pattern", "subcategory": "trust-provenance", "description": "Side-by-side reconciliation diff — expected vs actual with match/break/tolerance/missing status per row and delta values", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "BreakAnalysisTable", "ValidationChain", "IterationDiff" ] }, { "name": "AuditSignature", "slug": "audit-signature", "category": "pattern", "subcategory": "trust-provenance", "description": "Cryptographic audit attestation display — signer, subject, full hash, algorithm, verified/invalid/pending status, compact inline variant", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "IntegritySeal", "AuditTrail", "ValidationChain" ] }, { "name": "VoiceInputButton", "slug": "voice-input-button", "category": "pattern", "subcategory": "conversation", "description": "Microphone trigger with integrated waveform animation. States: idle, listening (agency red), processing (temporal blue), done, error. Waveform bars animate to real or simulated audio amplitude while listening; freeze and pulse during STT processing.", "tags": [], "variants": [ "idle", "listening", "processing", "done", "error" ], "status": "stable", "since": "S22", "version": "1.0.0", "interactive": true, "related": [ "TranscriptionDisplay", "SpeechStateIndicator", "AudioPlayer", "StreamingResponse" ] }, { "name": "TranscriptionDisplay", "slug": "transcription-display", "category": "pattern", "subcategory": "conversation", "description": "Live speech-to-text output with per-segment confidence signaling. Low-confidence words are underlined in gold (validation) with a confidence pill. Temporal blue border while transcribing, gold for low-confidence final output, error red for STT failure.", "tags": [], "variants": [ "transcribing", "complete", "low-confidence", "error" ], "status": "stable", "since": "S22", "version": "1.0.0", "interactive": true, "related": [ "VoiceInputButton", "SpeechStateIndicator", "AudioPlayer", "StreamingResponse" ] }, { "name": "AudioPlayer", "slug": "audio-player", "category": "pattern", "subcategory": "conversation", "description": "Compact audio playback with waveform visualization. Played portion shown in temporal blue; unplayed in border-structure. Click waveform to seek. Supports controlled and uncontrolled modes. States: idle, playing, paused, loading (skeleton bars), error.", "tags": [], "variants": [ "idle", "playing", "paused", "loading", "error" ], "status": "stable", "since": "S22", "version": "1.0.0", "interactive": true, "related": [ "VoiceInputButton", "TranscriptionDisplay", "SpeechStateIndicator" ] }, { "name": "SpeechStateIndicator", "slug": "speech-state-indicator", "category": "pattern", "subcategory": "ambient", "description": "Ambient ring indicator for voice pipeline state. Sizes: sm/md/lg. States: idle (muted), listening (agency red pulse), processing (temporal blue spin), speaking (green pulse — agent delivering output), error, muted. Designed for headers, toolbars, and conversation panels.", "tags": [], "variants": [ "idle", "listening", "processing", "speaking", "error", "muted" ], "sizes": [ "sm", "md", "lg" ], "status": "stable", "since": "S22", "version": "1.0.0", "interactive": true, "related": [ "VoiceInputButton", "TranscriptionDisplay", "AmbientAgentStatus", "StatusDot" ] }, { "name": "TaskStateBadge", "slug": "task-state-badge", "category": "pattern", "subcategory": "orchestration", "description": "Badge for the nine A2A protocol TaskStates (submitted, working, input-required, auth-required, completed, failed, canceled, rejected, unknown). Extends the StateBadge anatomy with protocol-grouped semantic colors; exports a taskStateGroup helper for branching on active/interrupted/terminal.", "tags": [], "status": "stable", "since": "S5", "version": "1.0.0", "related": [ "StateBadge", "A2AHandoff", "TaskQueue" ] }, { "name": "RunLifecycleRail", "slug": "run-lifecycle-rail", "category": "pattern", "subcategory": "orchestration", "description": "Vertical rail rendering one AG-UI run as lifecycle phases: RunStarted, StepStarted/StepFinished segments, and a terminal cap (finished/interrupt/error). Supports one level of nested child runs (parentRunId concept). Composes the AgentTimeline track language with TaskStateBadge-consistent colors.", "tags": [], "status": "stable", "since": "S5", "version": "1.0.0", "interactive": false, "related": [ "AgentTimeline", "TaskStateBadge", "A2AHandoff", "StatusDot" ] }, { "name": "HumanInputRequest", "slug": "human-input-request", "category": "pattern", "subcategory": "human-in-the-loop", "description": "Canonical 'agent needs a human' surface unifying the AG-UI interrupt model and the A2A input-required TaskState behind a protocol adapter prop. Validation-gold frame (ReviewRequestCard treatment); response buttons meet the 44px touch-target floor.", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "ReviewRequestCard", "ConsentFlow", "ApprovalQueue", "TaskStateBadge" ] }, { "name": "StateDeltaInspector", "slug": "state-delta-inspector", "category": "pattern", "subcategory": "orchestration", "description": "AG-UI shared-state inspector: renders a StateSnapshot as a collapsible tree with RFC 6902 JSON Patch ops (StateDelta) highlighted in place — temporal tint on patched values, agency accent on agent-written path labels, strikethrough ghost rows for removes. Optional before/after snapshot toggle and prev/next history stepper. Malformed patch entries render as warning rows, never crashes.", "tags": [], "status": "stable", "since": "S5", "version": "1.0.0", "interactive": true, "related": [ "IterationDiff", "DataList", "RunLifecycleRail", "ContextWindow" ] }, { "name": "A2ATaskPanel", "slug": "a2a-task-panel", "category": "pattern", "subcategory": "orchestration", "description": "Single A2A Task detail surface mirroring the spec's Task object: identity header (task id + contextId + TaskStateBadge), role-turned message history in ChatMessage conventions, artifact list delegating each artifact to ArtifactViewer, and a mono key/value metadata block. Temporal spine — a task is a thing moving through time.", "tags": [], "status": "stable", "since": "S5", "version": "1.0.0", "interactive": false, "related": [ "TaskStateBadge", "ArtifactViewer", "TaskQueue", "ChatMessage" ] }, { "name": "ArtifactViewer", "slug": "artifact-viewer", "category": "pattern", "subcategory": "orchestration", "description": "Part-type-aware renderer for the A2A Artifact model ({artifactId, name?, parts}): text parts as a typographic block, data parts as DataList-convention key/value rows, file parts as a mediaType + uri chip (never fetched), unknown kinds as a warning row. Validation-gold accent — an artifact is enriched output. The appending prop shows a StreamingDot tail while artifact-update appends arrive.", "tags": [], "status": "stable", "since": "S5", "version": "1.0.0", "interactive": false, "related": [ "StreamingArtifact", "A2ATaskPanel", "StreamingDot", "DataList" ] }, { "name": "NumberCell", "slug": "number-cell", "category": "ui", "subcategory": "finance", "description": "Formatted number display with tabular alignment for financial tables", "tags": [ "responsive" ], "variants": [ "currency", "rate", "percent", "bps", "integer", "decimal" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "DeltaCell", "CompactTable" ] }, { "name": "DeltaCell", "slug": "delta-cell", "category": "ui", "subcategory": "finance", "description": "Change/delta display with severity-based coloring for P&L and returns", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "NumberCell", "SparkLine" ] }, { "name": "CompactTable", "slug": "compact-table", "category": "ui", "subcategory": "finance", "description": "High-density data table for treasury positions, risk matrices, and compliance grids", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "NumberCell", "DeltaCell" ] }, { "name": "StatusBadge", "slug": "status-badge", "category": "ui", "subcategory": "finance", "description": "Compliance/regulatory status indicator for filings, KYC, and attestations", "tags": [ "responsive" ], "variants": [ "compliant", "pending", "non-compliant", "exempt", "expired" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ThresholdAlert" ] }, { "name": "CurrencyPair", "slug": "currency-pair", "category": "ui", "subcategory": "finance", "description": "Currency pair display with mid-rate for FX trading and treasury", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CurrencyFlag", "NumberCell" ] }, { "name": "PositionSummary", "slug": "position-summary", "category": "ui", "subcategory": "finance", "description": "Aggregated position card showing balance, period change, and severity", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "DeltaCell", "RiskGauge" ] }, { "name": "RiskGauge", "slug": "risk-gauge", "category": "ui", "subcategory": "finance", "description": "Risk metric display with confidence interval and severity bar", "tags": [ "responsive", "scroll" ], "variants": [ "low", "medium", "high", "critical" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "PositionSummary", "MiniBar" ] }, { "name": "ThresholdAlert", "slug": "threshold-alert", "category": "ui", "subcategory": "finance", "description": "Time-critical alert banner for cutoff warnings and breach notifications", "tags": [ "responsive", "touch-safe" ], "variants": [ "info", "warning", "critical" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "StatusBadge" ] }, { "name": "SparkLine", "slug": "spark-line", "category": "ui", "subcategory": "finance", "description": "Inline SVG micro-chart for trend visualization in table cells", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "DeltaCell", "MiniBar" ] }, { "name": "CurrencyFlag", "slug": "currency-flag", "category": "ui", "subcategory": "finance", "description": "ISO 4217 currency code with flag emoji and optional symbol", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CurrencyPair" ] }, { "name": "DateRange", "slug": "date-range", "category": "ui", "subcategory": "finance", "description": "Locale-aware date range for settlement windows and reporting periods", "tags": [ "responsive" ], "variants": [ "short", "medium", "long" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "NumberCell" ] }, { "name": "Watermark", "slug": "watermark", "category": "ui", "subcategory": "finance", "description": "Draft/confidential overlay for financial reports and dashboards", "tags": [ "responsive" ], "variants": [ "DRAFT", "CONFIDENTIAL", "INTERNAL", "PRELIMINARY" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "StatusBadge" ] }, { "name": "MiniBar", "slug": "mini-bar", "category": "ui", "subcategory": "finance", "description": "Inline proportional bar for ratio visualization in table cells", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "RiskGauge", "SparkLine" ] }, { "name": "SortableHeader", "slug": "sortable-header", "category": "ui", "subcategory": "finance", "description": "Sortable column header with direction indicator for data tables", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "CompactTable" ] }, { "name": "DrilldownCell", "slug": "drilldown-cell", "category": "ui", "subcategory": "finance", "description": "Expand/collapse cell for hierarchical financial data", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "CompactTable" ] }, { "name": "Pagination", "slug": "pagination", "category": "ui", "subcategory": "finance", "description": "Compact pagination for large financial datasets", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "CompactTable", "FilterBar" ] }, { "name": "FilterBar", "slug": "filter-bar", "category": "ui", "subcategory": "finance", "description": "Filter toolbar with chip toggles for financial data views", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "StatusBadge", "Pagination", "CompactTable" ] }, { "name": "SpreadIndicator", "slug": "spread-indicator", "category": "ui", "subcategory": "finance", "description": "Bid-ask spread display with basis point calculation and severity coloring", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "FXRateCard", "NumberCell", "CurrencyPair" ] }, { "name": "FXRateCard", "slug": "fx-rate-card", "category": "ui", "subcategory": "finance", "description": "FX rate card with bid/ask, spread, daily change, and sparkline", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CurrencyPair", "SparkLine", "SpreadIndicator", "DeltaCell" ] }, { "name": "FXRateTicker", "slug": "fx-rate-ticker", "category": "ui", "subcategory": "finance", "description": "Horizontally scrolling FX rate ticker with live-style directional change indicators", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "FXRateCard", "CurrencyPair", "FXRateGrid" ] }, { "name": "CurrencyPairSelector", "slug": "currency-pair-selector", "category": "ui", "subcategory": "finance", "description": "Currency pair selector supporting predefined pairs or free-select from full currency list", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "CurrencyPair", "FXRateCard" ] }, { "name": "DerivativeExposureBar", "slug": "derivative-exposure-bar", "category": "ui", "subcategory": "finance", "description": "Diverging horizontal bar showing derivative exposure by instrument type (asset vs liability)", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "RiskGauge", "VaRCard", "HedgeEffectivenessGauge" ] }, { "name": "ForwardContractCard", "slug": "forward-contract-card", "category": "ui", "subcategory": "finance", "description": "Forward contract card showing rate, forward points, notional, tenor, MTM P&L, and contract status", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "FXRateCard", "HedgeBook", "HedgeEffectivenessGauge" ] }, { "name": "FXRateGrid", "slug": "fx-rate-grid", "category": "ui", "subcategory": "finance", "description": "Responsive grid layout for FX rate cards", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "FXRateCard", "CurrencyPair" ] }, { "name": "FXOptionPricer", "slug": "fx-option-pricer", "category": "ui", "subcategory": "finance", "description": "FX option pricing summary with Greeks display", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CurrencyPair", "NumberCell", "RiskGauge" ] }, { "name": "CashPositionCard", "slug": "cash-position-card", "category": "ui", "subcategory": "finance", "description": "Real-time cash position card with per-bank breakdown and intraday flows", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "PositionSummary", "NumberCell" ] }, { "name": "PaymentStatusTracker", "slug": "payment-status-tracker", "category": "ui", "subcategory": "finance", "description": "Payment lifecycle tracker with maker/checker pipeline and rejection handling", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "StatusBadge", "NumberCell" ] }, { "name": "CashForecastChart", "slug": "cash-forecast-chart", "category": "ui", "subcategory": "finance", "description": "13-week rolling cash forecast with confidence-band bar chart", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "PositionSummary", "NumberCell", "SparkLine" ] }, { "name": "CounterpartyRiskCard", "slug": "counterparty-risk-card", "category": "ui", "subcategory": "finance", "description": "AI-powered counterparty credit risk dashboard with score bands and recommendations", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "RiskGauge", "StatusBadge" ] }, { "name": "SweepRuleVisualizer", "slug": "sweep-rule-visualizer", "category": "ui", "subcategory": "finance", "description": "Cash sweep rule visualization with flow direction, triggers, and execution history", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "PositionSummary", "NumberCell" ] }, { "name": "ApprovalStepIndicator", "slug": "approval-step-indicator", "category": "ui", "subcategory": "finance", "description": "Maker/checker approval pipeline with 5-step progression and rejection state", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "StatusBadge", "PaymentStatusTracker" ] }, { "name": "LearningSignalCard", "slug": "learning-signal-card", "category": "ui", "subcategory": "finance", "description": "Learning system event list showing CONFIRMS/REFINES/CONTRADICTS signals with confidence deltas", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "FlywheelHealth", "ConfidenceMeter" ] }, { "name": "PeriodCloseTracker", "slug": "period-close-tracker", "category": "ui", "subcategory": "finance", "description": "Accounting period close progress with step status, blockers, and deadline tracking", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ApprovalStepIndicator", "StatusBadge" ] }, { "name": "MatchWaterfall", "slug": "match-waterfall", "category": "ui", "subcategory": "finance", "description": "Reconciliation match funnel showing progressive matching stages and unmatched exceptions", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CompactTable", "StatusBadge" ] }, { "name": "CovenantGauge", "slug": "covenant-gauge", "category": "ui", "subcategory": "finance", "description": "Debt covenant compliance card with threshold vs. current visualization and headroom", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "RiskGauge", "ThresholdAlert" ] }, { "name": "VaRDecomposition", "slug": "var-decomposition", "category": "ui", "subcategory": "finance", "description": "Value at Risk decomposition by risk driver with contribution bars and diversification benefit", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "RiskGauge", "PositionSummary" ] }, { "name": "MaturityLadder", "slug": "maturity-ladder", "category": "ui", "subcategory": "finance", "description": "Portfolio maturity distribution with bar chart and bucket details including count, amount, yield", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "MiniBar", "CompactTable" ] }, { "name": "ComplianceScreeningCard", "slug": "compliance-screening-card", "category": "ui", "subcategory": "finance", "description": "Sanctions and compliance screening results with per-list match scores and overall status", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "StatusBadge", "CovenantGauge" ] }, { "name": "AgingBucketChart", "slug": "aging-bucket-chart", "category": "ui", "subcategory": "finance", "description": "Receivables aging visualization with bucket bars, overdue percentage, and amount breakdown", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "MaturityLadder", "MiniBar" ] }, { "name": "PoolHierarchy", "slug": "pool-hierarchy", "category": "ui", "subcategory": "finance", "description": "Recursive liquidity pool tree showing parent-child account balances", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CashPositionCard", "SweepRuleVisualizer" ] }, { "name": "FlywheelHealth", "slug": "flywheel-health", "category": "ui", "subcategory": "finance", "description": "Cross-domain learning flywheel health dashboard with loop strength and event activity", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "LearningSignalCard", "RiskGauge" ] }, { "name": "BulkExecutionTimeline", "slug": "bulk-execution-timeline", "category": "ui", "subcategory": "finance", "description": "Bulk payment/trade execution pipeline with per-item status tracking and failure callouts", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "PaymentStatusTracker", "ApprovalStepIndicator" ] }, { "name": "ApprovalPipeline", "slug": "approval-pipeline", "category": "ui", "subcategory": "finance", "description": "Maker/checker approval pipeline with step-by-step status, rejection reasons, and actor attribution", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "PaymentStatusTracker", "ApprovalStepIndicator", "ApprovalGate" ] }, { "name": "CovenantDashboard", "slug": "covenant-dashboard", "category": "ui", "subcategory": "finance", "description": "Debt covenant compliance dashboard with headroom bars, status badges, and bidirectional threshold support", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CovenantGauge", "RiskGauge", "ThresholdAlert" ] }, { "name": "IntradayTimeline", "slug": "intraday-timeline", "category": "ui", "subcategory": "finance", "description": "Hourly intraday cash position timeline with bar chart, flow arrows, and alert threshold line", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CashPositionCard", "CashForecastChart", "SparkLine" ] }, { "name": "LearningMultiplierGraph", "slug": "learning-multiplier-graph", "category": "ui", "subcategory": "finance", "description": "Cross-domain learning multiplier network graph with SVG nodes, weighted edges, and strength legend", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "FlywheelHealth", "LearningSignalCard" ] }, { "name": "HedgeEffectivenessGauge", "slug": "hedge-effectiveness-gauge", "category": "ui", "subcategory": "finance", "description": "ASC 815 / IFRS 9 hedge effectiveness gauge with 80%–125% corridor visualization", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "RiskGauge", "CovenantDashboard" ] }, { "name": "TrialBalanceTree", "slug": "trial-balance-tree", "category": "ui", "subcategory": "finance", "description": "Hierarchical trial balance with expandable GL account tree, debit/credit/net columns", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "CompactTable", "PoolHierarchy" ] }, { "name": "ScreeningResultCard", "slug": "screening-result-card", "category": "ui", "subcategory": "finance", "description": "AML/KYC entity screening result with match scores against sanctions and PEP lists", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ComplianceScreeningCard", "StatusBadge" ] }, { "name": "LimitBreachTimeline", "slug": "limit-breach-timeline", "category": "ui", "subcategory": "finance", "description": "Chronological risk limit breach timeline with severity escalation and acknowledgement tracking", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ThresholdAlert", "RiskGauge", "CovenantDashboard" ] }, { "name": "DecisionTestCard", "slug": "decision-test-card", "category": "ui", "subcategory": "finance", "description": "Learning system decision test with confidence meter, feedback signal breakdown, and contradiction alerts", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "LearningSignalCard", "FlywheelHealth", "LearningMultiplierGraph" ] }, { "name": "RatioBar", "slug": "ratio-bar", "category": "ui", "subcategory": "finance", "description": "Regulatory compliance ratio bar with threshold marker — visualizes LCR, NSFR, leverage ratios against minimum requirements", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CovenantGauge", "Meter", "StatusBadge" ] }, { "name": "TrendBadge", "slug": "trend-badge", "category": "ui", "subcategory": "finance", "description": "Directional trend indicator with semantic coloring — shows up/down/flat movement with optional percentage value", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "DeltaCell", "StatusBadge", "RatioBar" ] }, { "name": "DataFootnote", "slug": "data-footnote", "category": "ui", "subcategory": "finance", "description": "Report footnote with data source attribution, timestamp, and optional disclaimer", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ReportHeader", "SummaryMetrics" ] }, { "name": "ReportHeader", "slug": "report-header", "category": "ui", "subcategory": "finance", "description": "Formal report header with title, as-of date, period, and classification badge", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "DataFootnote", "SummaryMetrics" ] }, { "name": "RiskDisclosure", "slug": "risk-disclosure", "category": "ui", "subcategory": "finance", "description": "Risk disclosure callout with severity level, description, and mitigation guidance", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ThresholdAlert", "RiskHeatmap" ] }, { "name": "SummaryMetrics", "slug": "summary-metrics", "category": "ui", "subcategory": "finance", "description": "Horizontal strip of key performance metrics with trend deltas and loading states", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "AccountingMetrics", "ReportHeader", "DataFootnote" ] }, { "name": "ForecastTable", "slug": "forecast-table", "category": "ui", "subcategory": "finance", "description": "Multi-period cash forecast table with row grouping, totals, and loading skeleton", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "WaterfallChart", "ScenarioComparison", "CashForecastChart" ] }, { "name": "ScenarioComparison", "slug": "scenario-comparison", "category": "ui", "subcategory": "finance", "description": "Side-by-side comparison of forecast scenarios with baseline highlighting", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ForecastTable", "WaterfallChart" ] }, { "name": "WaterfallChart", "slug": "waterfall-chart", "category": "ui", "subcategory": "finance", "description": "Cash flow waterfall with opening balance, incremental flows, and closing balance", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ReconWaterfall", "ForecastTable", "CashForecastChart" ] }, { "name": "VaRCard", "slug": "var-card", "category": "ui", "subcategory": "finance", "description": "Value-at-Risk summary card with confidence level, horizon, method, and limit utilization", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "VaRDecomposition", "RiskHeatmap", "ConcentrationRisk" ] }, { "name": "VaRGauge", "slug": "var-gauge", "category": "ui", "subcategory": "finance", "description": "Semicircular VaR gauge showing limit utilization with four severity tiers", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "VaRCard", "VaRDecomposition", "RiskGauge" ] }, { "name": "ExposureLimitBar", "slug": "exposure-limit-bar", "category": "ui", "subcategory": "finance", "description": "Multi-band exposure limit bar for counterparty, sector, and concentration limits with warning ticks", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "LimitBreachTimeline", "ConcentrationRisk", "RiskGauge" ] }, { "name": "RiskScoreCard", "slug": "risk-score-card", "category": "ui", "subcategory": "finance", "description": "Composite risk score card with rating tier, period delta, and dimension breakdown bars", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "VaRCard", "RiskGauge", "BreachAlert" ] }, { "name": "BreachAlert", "slug": "breach-alert", "category": "ui", "subcategory": "finance", "description": "Risk breach alert panel with three severity levels, acknowledgement flow, and limit/current display", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "LimitBreachTimeline", "RiskScoreCard", "ThresholdAlert" ] }, { "name": "GreeksPanel", "slug": "greeks-panel", "category": "ui", "subcategory": "finance", "description": "Options Greeks display panel with delta, gamma, theta, vega, and rho values", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "VaRCard", "FXOptionPricer" ] }, { "name": "ConcentrationRisk", "slug": "concentration-risk", "category": "ui", "subcategory": "finance", "description": "Portfolio concentration risk breakdown with exposure bars and limit indicators", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "RiskHeatmap", "FactorHeatmap" ] }, { "name": "RiskHeatmap", "slug": "risk-heatmap", "category": "ui", "subcategory": "finance", "description": "Two-dimensional risk heatmap grid with severity-colored cells", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "FactorHeatmap", "ConcentrationRisk" ] }, { "name": "FactorHeatmap", "slug": "factor-heatmap", "category": "ui", "subcategory": "finance", "description": "Multi-factor exposure heatmap across time periods with threshold-based coloring", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "RiskHeatmap", "ConcentrationRisk" ] }, { "name": "CashPoolCard", "slug": "cash-pool-card", "category": "ui", "subcategory": "finance", "description": "Cash pool summary card with account balances and pool total", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "PoolHierarchy", "CashPositionCard" ] }, { "name": "LCRDashboard", "slug": "lcr-dashboard", "category": "ui", "subcategory": "finance", "description": "Liquidity Coverage Ratio dashboard with HQLA, net outflows, and compliance gauge", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "NSFRPanel", "HQLAComposition", "RatioBar" ] }, { "name": "NSFRPanel", "slug": "nsfr-panel", "category": "ui", "subcategory": "finance", "description": "Net Stable Funding Ratio panel with ASF/RSF category breakdown and compliance status", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "LCRDashboard", "HQLAComposition" ] }, { "name": "HQLAComposition", "slug": "hqla-composition", "category": "ui", "subcategory": "finance", "description": "HQLA tier composition breakdown with stacked bar and tier-level detail", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "LCRDashboard", "NSFRPanel", "RatioBar" ] }, { "name": "OrderBook", "slug": "order-book", "category": "ui", "subcategory": "finance", "description": "Depth-of-market order book with bid/ask columns and cumulative volume bars", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "TradeBlotter", "OrderTicket", "SpreadIndicator" ] }, { "name": "TradeBlotter", "slug": "trade-blotter", "category": "ui", "subcategory": "finance", "description": "Trade activity log with sortable columns, status badges, and row-level detail", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "OrderBook", "OrderTicket", "TCAReport" ] }, { "name": "OrderTicket", "slug": "order-ticket", "category": "ui", "subcategory": "finance", "description": "Order entry ticket displaying instrument, side, type, quantity, and price parameters", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "TradeBlotter", "OrderBook" ] }, { "name": "PaymentTracker", "slug": "payment-tracker", "category": "ui", "subcategory": "finance", "description": "End-to-end payment lifecycle tracker with step progression and SLA deadline", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "PaymentStatusTracker", "PaymentQueue" ] }, { "name": "PaymentQueue", "slug": "payment-queue", "category": "ui", "subcategory": "finance", "description": "Queued payment list with priority ordering, amount, and approval status", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "PaymentTracker", "PaymentStatusTracker" ] }, { "name": "TCAReport", "slug": "tca-report", "category": "ui", "subcategory": "finance", "description": "Transaction cost analysis report with benchmark comparison and slippage metrics", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ExecutionAnalytics", "TradeBlotter" ] }, { "name": "ExecutionAnalytics", "slug": "execution-analytics", "category": "ui", "subcategory": "finance", "description": "Execution quality analytics with fill rate, VWAP deviation, and venue breakdown", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "TCAReport", "TradeBlotter" ] }, { "name": "AllocationDonut", "slug": "allocation-donut", "category": "ui", "subcategory": "finance", "description": "Portfolio allocation donut chart with segment labels and center total", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "HoldingsTable", "AttributionTable" ] }, { "name": "AttributionTable", "slug": "attribution-table", "category": "ui", "subcategory": "finance", "description": "Performance attribution table with allocation, selection, and interaction effects", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "AllocationDonut", "HoldingsTable" ] }, { "name": "HoldingsTable", "slug": "holdings-table", "category": "ui", "subcategory": "finance", "description": "Portfolio holdings table with position, market value, weight, and P&L columns", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "AllocationDonut", "AttributionTable" ] }, { "name": "AccountingMetrics", "slug": "accounting-metrics", "category": "ui", "subcategory": "finance", "description": "Key accounting metrics grid with period-over-period comparison and deltas", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "SummaryMetrics", "TrialBalanceSummary" ] }, { "name": "JournalEntry", "slug": "journal-entry", "category": "ui", "subcategory": "finance", "description": "General ledger journal entry with debit/credit lines and balanced totals", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "TrialBalanceSummary", "AccountingMetrics" ] }, { "name": "HedgeBook", "slug": "hedge-book", "category": "ui", "subcategory": "finance", "description": "Hedge position register with instrument details, notional, and effectiveness status", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "HedgeEffectivenessGauge", "GreeksPanel" ] }, { "name": "TrialBalanceSummary", "slug": "trial-balance-summary", "category": "ui", "subcategory": "finance", "description": "Summarized trial balance with account categories, debit/credit totals, and balance check", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "TrialBalanceTree", "JournalEntry", "AccountingMetrics" ] }, { "name": "ComplianceChecklist", "slug": "compliance-checklist", "category": "ui", "subcategory": "finance", "description": "Regulatory compliance checklist with pass/fail/pending status per item", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "SanctionsCheck", "RegulatoryReport" ] }, { "name": "SurveillanceQueue", "slug": "surveillance-queue", "category": "ui", "subcategory": "finance", "description": "Trade surveillance alert queue with severity, type, and investigation status", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ExceptionQueue", "ComplianceChecklist" ] }, { "name": "RegulatoryReport", "slug": "regulatory-report", "category": "ui", "subcategory": "finance", "description": "Regulatory filing card with report name, authority, due date, and submission status", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ComplianceChecklist", "StatusBadge" ] }, { "name": "SanctionsCheck", "slug": "sanctions-check", "category": "ui", "subcategory": "finance", "description": "Sanctions screening result card with entity name, list matches, and clear/hit status", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ComplianceChecklist", "ComplianceScreeningCard" ] }, { "name": "ReconWaterfall", "slug": "recon-waterfall", "category": "ui", "subcategory": "finance", "description": "Reconciliation waterfall showing match stages from total items to final exceptions", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "WaterfallChart", "ReconSummary" ] }, { "name": "ReconSummary", "slug": "recon-summary", "category": "ui", "subcategory": "finance", "description": "Reconciliation summary dashboard with match rate, item counts, and status breakdown", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ExceptionQueue", "MatchPair", "ReconWaterfall" ] }, { "name": "ExceptionQueue", "slug": "exception-queue", "category": "ui", "subcategory": "finance", "description": "Reconciliation exception queue with severity, age, and resolution status", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ReconSummary", "MatchPair" ] }, { "name": "MatchPair", "slug": "match-pair", "category": "ui", "subcategory": "finance", "description": "Side-by-side reconciliation match pair showing bank vs. book entries with differences highlighted", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ReconSummary", "ExceptionQueue" ] }, { "name": "ConnectionStatus", "slug": "connection-status", "category": "ui", "subcategory": "finance", "description": "Bank connection status indicator with sync time, latency, and health state", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CreditLineUtil", "SettlementTimeline" ] }, { "name": "CreditLineUtil", "slug": "credit-line-util", "category": "ui", "subcategory": "finance", "description": "Credit facility utilization gauge with drawn amount, limit, and availability", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CashPoolCard", "RatioBar" ] }, { "name": "SettlementTimeline", "slug": "settlement-timeline", "category": "ui", "subcategory": "finance", "description": "Settlement lifecycle timeline with T+N stages and completion indicators", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "PaymentTracker", "SettlementTracker" ] }, { "name": "NettingPosition", "slug": "netting-position", "category": "ui", "subcategory": "finance", "description": "Multilateral netting summary with gross/net payable/receivable and savings percentage", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "SettlementTimeline", "PaymentQueue" ] }, { "name": "ConfirmationCard", "slug": "confirmation-card", "category": "ui", "subcategory": "finance", "description": "Trade confirmation card with counterparty, amount, reference, and matching status", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "TradeBlotter", "SettlementTracker" ] }, { "name": "SettlementTracker", "slug": "settlement-tracker", "category": "ui", "subcategory": "finance", "description": "Settlement batch tracker with batch status, amounts, and counterparty breakdown", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "SettlementTimeline", "ConfirmationCard" ] }, { "name": "PaymentLifecycleTracker", "slug": "payment-lifecycle-tracker", "category": "ui", "subcategory": "finance", "description": "SWIFT / ACH / SEPA payment lifecycle stepper with per-step timestamps, actor labels, and reference IDs", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "PaymentTracker", "PaymentStatusTracker", "SettlementNetCard" ] }, { "name": "DualControlPanel", "slug": "dual-control-panel", "category": "ui", "subcategory": "finance", "description": "Two-person maker/checker approval widget with signature status, countdown timer, and optional approve/reject actions", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "ApprovalPipeline", "ApprovalStepIndicator" ] }, { "name": "SanctionsCheckBadge", "slug": "sanctions-check-badge", "category": "ui", "subcategory": "finance", "description": "Inline sanctions screening badge: pending (spinner), clear (green), flagged (red), manual-review (amber) — with optional report link", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "SanctionsCheck", "ComplianceScreeningCard", "ScreeningResultCard" ] }, { "name": "SettlementNetCard", "slug": "settlement-net-card", "category": "ui", "subcategory": "finance", "description": "Net settlement position card: gross debit, gross credit, net amount, counterparty, value date, netting method", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "SettlementTracker", "SettlementTimeline", "NettingPosition" ] }, { "name": "StablecoinTable", "slug": "stablecoin-table", "category": "ui", "subcategory": "finance", "description": "Stablecoin holdings table with peg deviation, reserves, and market cap metrics", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "WalletCard", "HoldingsTable" ] }, { "name": "WalletCard", "slug": "wallet-card", "category": "ui", "subcategory": "finance", "description": "Digital wallet card with address, balance, network, and connection status", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "StablecoinTable" ] }, { "name": "TreasuryDashboard", "slug": "treasury-dashboard", "category": "ui", "subcategory": "finance", "description": "Composed treasury overview dashboard with positions, FX rates, forecasts, and alerts", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CashPoolCard", "FXRateGrid", "SummaryMetrics", "ReportHeader" ] }, { "name": "RiskDashboard", "slug": "risk-dashboard", "category": "ui", "subcategory": "finance", "description": "Composed risk management dashboard with VaR, heatmap, concentration, and Greeks", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "VaRCard", "RiskHeatmap", "ConcentrationRisk", "GreeksPanel" ] }, { "name": "ComplianceDashboard", "slug": "compliance-dashboard", "category": "ui", "subcategory": "finance", "description": "Composed compliance monitoring dashboard with checklist, surveillance, and filings", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ComplianceChecklist", "SurveillanceQueue", "RegulatoryReport", "ReportHeader" ] }, { "name": "PaymentStatusBadge", "slug": "payment-status-badge", "category": "ui", "subcategory": "finance", "description": "Payment lifecycle status badge covering the full payment state machine from pending through settlement — distinct from StatusBadge (compliance), with temporal/agency color semantics for in-flight vs. blocked payments", "tags": [ "responsive" ], "variants": [ "pending", "authorised", "sent", "clearing", "settled", "failed", "recalled", "on_hold", "cancelled" ], "sizes": [ "compact", "default" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "StatusBadge", "PaymentQueueTable", "PaymentLifecycleTracker" ] }, { "name": "ClearingNetworkIndicator", "slug": "clearing-network-indicator", "category": "ui", "subcategory": "finance", "description": "Clearing network chip with optional message type and settlement type — gold = high-value RTGS (CHIPS, Fedwire, LVTS), blue = messaging networks (SWIFT, SEPA, CHAPS, TARGET2), green = instant networks (FPS, RTP)", "tags": [ "responsive" ], "variants": [ "SWIFT", "SEPA", "ACH", "CHIPS", "Fedwire", "CHAPS", "TARGET2", "FPS", "BACS", "RTP", "LVTS", "SPEI", "internal" ], "sizes": [ "compact", "default" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "PaymentStatusBadge", "PaymentQueueTable", "CorrespondentBankChain" ] }, { "name": "ForecastRow", "slug": "forecast-row", "category": "ui", "subcategory": "finance", "description": "Single forecast period row (opening, receipts, disbursements, net flow, closing, confidence) — presentational sub-component rendered inside ForecastTable's ", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ForecastTable", "CashForecastChart" ] }, { "name": "OrderBookRow", "slug": "order-book-row", "category": "ui", "subcategory": "finance", "description": "Single order book price level row with cumulative depth bar — presentational sub-component rendered inside OrderBook", "tags": [ "responsive", "scroll" ], "variants": [ "bid", "ask" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "OrderBook", "SpreadIndicator", "DepthChartGL" ] }, { "name": "PaymentQueueTable", "slug": "payment-queue-table", "category": "ui", "subcategory": "finance", "description": "High-density payment queue table with bulk-select checkboxes, priority accents, approve/reject/view actions, and pagination — composes PaymentStatusBadge and ClearingNetworkIndicator per row", "tags": [ "responsive", "scroll" ], "variants": [ "compact", "default", "spacious" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "PaymentQueue", "PaymentStatusBadge", "ClearingNetworkIndicator", "Pagination" ] }, { "name": "LineChart", "slug": "line-chart", "category": "ui", "subcategory": "finance", "description": "Multi-series SVG line chart for time-series and trend data — cash forecasts, FX history, AI confidence trends", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "SparkLine", "AreaChart", "AgingBucketChart" ] }, { "name": "AreaChart", "slug": "area-chart", "category": "ui", "subcategory": "finance", "description": "Filled area chart for cumulative and stacked treasury data — liquidity buffers, stacked funding sources", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "LineChart", "SparkLine" ] }, { "name": "GroupedBarChart", "slug": "grouped-bar-chart", "category": "ui", "subcategory": "finance", "description": "Side-by-side grouped bar chart for categorical comparison — budget vs. actual, entity-by-entity cash", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "AgingBucketChart", "DivergingBarChart" ] }, { "name": "DivergingBarChart", "slug": "diverging-bar-chart", "category": "ui", "subcategory": "finance", "description": "Bidirectional bar chart from zero — FX net positions, budget variance, tornado sensitivity analysis", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "GroupedBarChart", "WaterfallChart" ] }, { "name": "ScatterPlot", "slug": "scatter-plot", "category": "ui", "subcategory": "finance", "description": "Two-dimensional scatter plot for correlation and distribution — risk vs. return, exposure vs. limit", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "LineChart", "ConcentrationRisk" ] }, { "name": "Treemap", "slug": "treemap", "category": "ui", "subcategory": "finance", "description": "Squarified treemap for hierarchical proportion — portfolio allocation, currency exposure breakdown", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "AllocationDonut", "ConcentrationRisk" ] }, { "name": "SankeyDiagram", "slug": "sankey-diagram", "category": "ui", "subcategory": "finance", "description": "Sankey flow diagram for cash flow attribution — inflow sources, intercompany netting, liquidity cascade", "tags": [ "responsive", "scroll" ], "status": "experimental", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "LearningMultiplierGraph", "PoolHierarchy" ] }, { "name": "ISINChip", "slug": "isin-chip", "category": "ui", "subcategory": "finance", "description": "Instrument identifier chip for ISIN, CUSIP, SEDOL, FIGI, and RIC with optional copy-to-clipboard", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "LEIBadge", "InstrumentTypeTag", "TenorChip" ] }, { "name": "TenorChip", "slug": "tenor-chip", "category": "ui", "subcategory": "finance", "description": "Tenor label chip (ON, 1W, 3M, 1Y…) with duration-band color coding and optional selection state", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "ISINChip", "InstrumentTypeTag" ] }, { "name": "CurrencyAmount", "slug": "currency-amount", "category": "ui", "subcategory": "finance", "description": "Currency-aware monetary amount with semantic sign coloring, monospace tabular-nums, and ISO 4217 label", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "NumberCell", "DeltaCell", "TrendBadge" ] }, { "name": "LEIBadge", "slug": "lei-badge", "category": "ui", "subcategory": "finance", "description": "Legal Entity Identifier (ISO 17442) badge with full/truncated display and copy-to-clipboard", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "ISINChip", "CounterpartyCard" ] }, { "name": "InstrumentTypeTag", "slug": "instrument-type-tag", "category": "ui", "subcategory": "finance", "description": "Asset class and instrument type classification tag with semantic color coding per asset class", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ISINChip", "TenorChip", "StatusBadge" ] }, { "name": "CounterpartyCard", "slug": "counterparty-card", "category": "ui", "subcategory": "finance", "description": "Counterparty identity card with LEI, country, sector, credit rating, outlook, and exposure limit", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "LEIBadge", "CounterpartyRiskCard", "ExposureLimitBar" ] }, { "name": "DebtMaturityProfile", "slug": "debt-maturity-profile", "category": "ui", "subcategory": "finance", "description": "Stacked bar chart showing debt maturities by period and instrument type for funding dashboards", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CapitalStructureWaterfall", "FundingCostBreakdown", "MaturityLadder" ] }, { "name": "FundingCostBreakdown", "slug": "funding-cost-breakdown", "category": "ui", "subcategory": "finance", "description": "Horizontal bar chart showing all-in cost (bps) per funding source with blended average reference line", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "DebtMaturityProfile", "RepoRateTable", "CreditLineUtil" ] }, { "name": "RepoRateTable", "slug": "repo-rate-table", "category": "ui", "subcategory": "finance", "description": "Repo and reverse repo rate table by collateral type and tenor with spread-to-benchmark display", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "FundingCostBreakdown", "CommercialPaperTracker" ] }, { "name": "CommercialPaperTracker", "slug": "commercial-paper-tracker", "category": "ui", "subcategory": "finance", "description": "CP issuance and maturity tracker with days-to-maturity urgency coloring and program-type classification", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "RepoRateTable", "PaymentStatusTracker", "MaturityLadder" ] }, { "name": "CapitalStructureWaterfall", "slug": "capital-structure-waterfall", "category": "ui", "subcategory": "finance", "description": "Capital structure waterfall from senior secured to equity with seniority color coding and proportion bars", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "DebtMaturityProfile", "FundingCostBreakdown", "CovenantGauge" ] }, { "name": "BenchmarkComparisonChart", "slug": "benchmark-comparison-chart", "category": "ui", "subcategory": "finance", "description": "Portfolio vs. benchmark cumulative return comparison with excess return (alpha) display", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "TrackingErrorGauge", "PnLAttributionSummary", "AttributionTable" ] }, { "name": "DurationConvexityPanel", "slug": "duration-convexity-panel", "category": "ui", "subcategory": "finance", "description": "Fixed-income duration and convexity metrics panel with modified duration, effective duration, convexity, and DV01", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "YieldCurveViewer", "TrackingErrorGauge", "VaRCard" ] }, { "name": "YieldCurveViewer", "slug": "yield-curve-viewer", "category": "ui", "subcategory": "finance", "description": "Par, spot (zero), and forward yield curve viewer with inversion detection and tenor labels", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "DurationConvexityPanel", "TrackingErrorGauge", "LineChart" ] }, { "name": "TrackingErrorGauge", "slug": "tracking-error-gauge", "category": "ui", "subcategory": "finance", "description": "Benchmark tracking error gauge with TE budget/limit bar, utilization percentage, and severity classification", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "BenchmarkComparisonChart", "PnLAttributionSummary", "RiskGauge" ] }, { "name": "PnLAttributionSummary", "slug": "pnl-attribution-summary", "category": "ui", "subcategory": "finance", "description": "P&L attribution breakdown by factor, desk, or strategy with diverging bar chart and totals", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "BenchmarkComparisonChart", "AttributionTable", "VaRDecomposition" ] }, { "name": "ExpectedShortfallCard", "slug": "expected-shortfall-card", "category": "ui", "subcategory": "finance", "description": "Expected Shortfall (CVaR) card with VaR comparison, ES/VaR multiplier, and limit utilization bar", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "VaRCard", "StressTestResults", "RiskGauge" ] }, { "name": "CreditRatingBadge", "slug": "credit-rating-badge", "category": "ui", "subcategory": "finance", "description": "Credit rating badge with agency, tier color coding (IG=green/sub-IG=caution/distressed=red), and outlook", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "KYCStatusCard", "StressTestResults" ] }, { "name": "StressTestResults", "slug": "stress-test-results", "category": "ui", "subcategory": "finance", "description": "Stress test scenario results table with impact bars, pass/warn/fail status, and worst-case callout", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ExpectedShortfallCard", "BacktestingChart", "VaRCard" ] }, { "name": "BacktestingChart", "slug": "backtesting-chart", "category": "ui", "subcategory": "finance", "description": "VaR backtesting chart with P&L bars vs. VaR forecast line; breach count and color-coded exceptions", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ExpectedShortfallCard", "StressTestResults" ] }, { "name": "CutOffTimer", "slug": "cut-off-timer", "category": "ui", "subcategory": "finance", "description": "Real-time payment cutoff countdown timer with urgency color coding for CHAPS, Fedwire, SWIFT windows", "tags": [ "responsive", "touch-safe" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "CorrespondentBankChain", "PaymentStatusTracker" ] }, { "name": "CorrespondentBankChain", "slug": "correspondent-bank-chain", "category": "ui", "subcategory": "finance", "description": "Correspondent bank chain visualizer for cross-border payment routing with BIC, status, and charges per hop", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CutOffTimer", "PaymentStatusTracker" ] }, { "name": "KYCStatusCard", "slug": "kyc-status-card", "category": "ui", "subcategory": "finance", "description": "KYC/CDD status card with risk tier, expiry date, and outstanding document checklist", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "AMLAlertCard", "RegulatoryCapitalGauge" ] }, { "name": "AMLAlertCard", "slug": "aml-alert-card", "category": "ui", "subcategory": "finance", "description": "AML transaction monitoring alert card with severity, type, status, and entity metadata for compliance queues", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "KYCStatusCard", "RegulatoryCapitalGauge" ] }, { "name": "RegulatoryCapitalGauge", "slug": "regulatory-capital-gauge", "category": "ui", "subcategory": "finance", "description": "Basel/CRR regulatory capital adequacy panel showing CET1, Tier 1, Total Capital, Leverage, LCR, NSFR vs. minimums", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "KYCStatusCard", "AMLAlertCard", "RiskGauge" ] }, { "name": "BreakAnalysisTable", "slug": "break-analysis-table", "category": "ui", "subcategory": "finance", "description": "Reconciliation break analysis table with break type, age, counterparty, amount, and open/aging/critical status", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "STPRateGauge" ] }, { "name": "STPRateGauge", "slug": "stp-rate-gauge", "category": "ui", "subcategory": "finance", "description": "Straight-Through Processing rate gauge with target line, exception count, and exception breakdown", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "BreakAnalysisTable" ] }, { "name": "AdaptiveChartContainer", "slug": "adaptive-chart-container", "category": "ui", "subcategory": "finance", "description": "Responsive wrapper that renders a full chart at desktop (≥768px) and collapses to a compact metric card with sparkline at mobile (<768px)", "tags": [ "responsive", "mobile-ready" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "LineChart", "BarChart", "SparkLine", "SummaryMetrics" ] }, { "name": "VolatilitySurface", "slug": "volatility-surface", "category": "ui", "subcategory": "finance", "description": "Strike × tenor implied volatility heatmap with 5-stop vol ramp, contour borders, and hover tooltip showing exact IV%", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "HeatmapChart", "FXOptionPricer", "OptionsPricingCard" ] }, { "name": "OptionsPricingCard", "slug": "options-pricing-card", "category": "ui", "subcategory": "finance", "description": "Black-Scholes / Black-76 / Binomial options pricer: model inputs, live premium output, put/call toggle, and full Greeks breakdown", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "GreeksPanel", "FXOptionPricer", "VolatilitySurface" ] }, { "name": "TenorLadder", "slug": "tenor-ladder", "category": "ui", "subcategory": "finance", "description": "Diverging horizontal bar chart of FX forward positions by tenor (ON/TN/1W/1M/3M/6M/1Y). Long bars right in green, short bars left in red, with net position labels", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "MaturityLadder", "TenorChip", "FXRateCard" ] }, { "name": "HedgeRatioGauge", "slug": "hedge-ratio-gauge", "category": "ui", "subcategory": "finance", "description": "270° arc gauge for portfolio hedge ratio (0–130%). Shows current ratio vs target band, over-hedged warning zone, and needle indicator", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "HedgeEffectivenessGauge", "CovenantGauge", "VaRGauge" ] }, { "name": "FXExposureHeatmap", "slug": "fx-exposure-heatmap", "category": "ui", "subcategory": "finance", "description": "Currency pair × business unit exposure matrix. Blue = long, red = short, intensity = magnitude. Row/column totals. Click-to-drill support", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "HeatmapChart", "RiskHeatmap", "FactorHeatmap" ] }, { "name": "WebGLChartProvider", "slug": "webgl-chart-provider", "category": "ui", "subcategory": "finance", "description": "Shared infrastructure for GPU-accelerated charts — CSS token bridge (CSS custom property → WebGL RGBA uniform), animation frame scheduler, and WebGL context factory. Wrap once at dashboard level.", "tags": [ "responsive" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CandlestickGL", "DepthChartGL", "VolumeProfileGL", "OrderFlowGL" ] }, { "name": "CandlestickGL", "slug": "candlestick-gl", "category": "ui", "subcategory": "finance", "description": "GPU-accelerated OHLC candlestick chart via WebGL2 (fallback WebGL1). Renders 50k+ candles at 60fps. Hardware-accelerated zoom/pan, crosshair tooltip, bull/bear coloring from DS semantic tokens.", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "DepthChartGL", "OrderFlowGL", "WebGLChartProvider", "LineChart" ] }, { "name": "DepthChartGL", "slug": "depth-chart-gl", "category": "ui", "subcategory": "finance", "description": "GPU-accelerated order book depth visualization. Bid (temporal blue) and ask (agency red) cumulative depth curves as filled triangle-strip areas with smooth line borders. Animates live via rAF.", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "CandlestickGL", "OrderFlowGL", "WebGLChartProvider", "OrderBook" ] }, { "name": "VolumeProfileGL", "slug": "volume-profile-gl", "category": "ui", "subcategory": "finance", "description": "GPU-accelerated price-at-volume histogram. Two color modes: 'heat' (5-stop vol intensity ramp from dataviz tokens) and 'delta' (buy/sell stacked bars). POC label. Real-time updates via DYNAMIC_DRAW.", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "CandlestickGL", "WebGLChartProvider", "BarChart", "HeatmapChart" ] }, { "name": "OrderFlowGL", "slug": "order-flow-gl", "category": "ui", "subcategory": "finance", "description": "GPU-accelerated order flow tape — trades as circular GL_POINTS on a price-over-time scatter. Dot radius scales with quantity. Buy = outcome-positive green, sell = agency red. Ring buffer for real-time streams (default 2000 trades).", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "DepthChartGL", "CandlestickGL", "WebGLChartProvider", "OrderBook" ] }, { "name": "MatchQueue", "slug": "match-queue", "category": "ui", "subcategory": "finance", "description": "Two-column reconciliation match interface. Left panel lists unmatched items with queue-depth badge; right panel shows ranked match candidates with confidence scores (HIGH/MED/LOW). Match and Reject actions per candidate.", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "ExceptionManager", "BreakAnalysisPanel", "ReconciliationSummary", "MatchPair" ] }, { "name": "ExceptionManager", "slug": "exception-manager", "category": "ui", "subcategory": "finance", "description": "Full-featured reconciliation exception table with type/status/age filters, batch-action toolbar (escalate, resolve, assign), and inline status update per row. Sorts oldest-first by default.", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "MatchQueue", "BreakAnalysisPanel", "ReconciliationSummary", "ExceptionQueue" ] }, { "name": "BreakAnalysisPanel", "slug": "break-analysis-panel", "category": "ui", "subcategory": "finance", "description": "Root-cause analysis panel for a single reconciliation break. Shows break metadata, field-level diff view between internal and counterparty records, a chronological history timeline, and a resolution notes editor.", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "ExceptionManager", "MatchQueue", "BreakAnalysisTable", "ReconciliationSummary" ] }, { "name": "AgedItemsList", "slug": "aged-items-list", "category": "ui", "subcategory": "finance", "description": "Time-bucketed aged items table: 0–30 / 31–60 / 61–90 / 90+ day buckets with color-coded aging signals (green → amber → red). Click bucket headers to drill into item-level detail. Sparkline per bucket shows age distribution trend.", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "ExceptionManager", "ReconciliationSummary", "AgingBucketChart" ] }, { "name": "ReconciliationSummary", "slug": "reconciliation-summary", "category": "ui", "subcategory": "finance", "description": "Dashboard header card for reconciliation status: total items, matched %, open exceptions, oldest break age, and last run timestamp. MetricCard grid with a thin match-rate progress bar at the bottom. Optional refresh callback.", "tags": [], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "MatchQueue", "ExceptionManager", "AgedItemsList", "ReconSummary" ] }, { "name": "SunburstChart", "slug": "sunburst-chart", "category": "ui", "subcategory": "finance", "description": "D3-powered sunburst chart for hierarchical allocation data — fund decomposition, portfolio sector breakdown, budget hierarchy", "tags": [ "responsive", "scroll" ], "status": "beta", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "Treemap", "AllocationDonut", "AreaChart" ] }, { "name": "ChordDiagram", "slug": "chord-diagram", "category": "ui", "subcategory": "finance", "description": "D3-powered chord diagram for cross-entity treasury flows — intercompany transfers, currency exposure mapping, bilateral netting", "tags": [ "responsive", "scroll" ], "status": "beta", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "SankeyDiagram", "ForceGraph", "FXExposureHeatmap" ] }, { "name": "ForceGraph", "slug": "force-graph", "category": "ui", "subcategory": "finance", "description": "D3-powered force-directed graph for counterparty networks — entity relationships, exposure connections, banking relationships", "tags": [ "responsive", "scroll" ], "status": "beta", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ChordDiagram", "AgentGraph", "GraphLayout" ] }, { "name": "BoxViolinPlot", "slug": "box-violin-plot", "category": "ui", "subcategory": "finance", "description": "D3-powered box/violin plot for risk distribution visualization — VaR distributions, return spreads, yield curve analysis, stress-test scenarios", "tags": [ "responsive", "scroll" ], "status": "beta", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "ScatterChart", "HeatmapChart", "ParallelCoordinates" ] }, { "name": "ParallelCoordinates", "slug": "parallel-coordinates", "category": "ui", "subcategory": "finance", "description": "D3-powered parallel coordinates for multi-factor analysis — instrument comparison across rate, duration, credit, liquidity with interactive axis brushing", "tags": [ "responsive", "scroll" ], "status": "beta", "since": "S4", "version": "1.0.0", "interactive": true, "related": [ "ScatterChart", "BoxViolinPlot", "HeatmapChart" ] }, { "name": "ChoroplethMap", "slug": "choropleth-map", "category": "ui", "subcategory": "finance", "description": "D3-powered choropleth map for geographic exposure visualization — regional treasury allocation, counterparty country risk, AUM by geography, FX exposure", "tags": [ "responsive", "scroll" ], "status": "beta", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "FXExposureHeatmap", "ScatterPlot", "ContourDensityChart" ] }, { "name": "CirclePacking", "slug": "circle-packing-chart", "category": "ui", "subcategory": "finance", "description": "D3-powered circle packing chart for hierarchical allocation — portfolio → fund → position drill-down, budget decomposition, counterparty exposure tiers", "tags": [ "responsive", "scroll" ], "status": "beta", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "SunburstChart", "Treemap", "AllocationDonut" ] }, { "name": "ContourDensityChart", "slug": "contour-density-chart", "category": "ui", "subcategory": "finance", "description": "D3-powered 2D contour density chart for return distribution — bimodal clusters, alpha factor scatter, risk-return frontiers, option payoff density", "tags": [ "responsive", "scroll" ], "status": "beta", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ScatterPlot", "ChoroplethMap", "VolatilitySurface" ] }, { "name": "HorizonChart", "slug": "horizon-chart", "category": "ui", "subcategory": "finance", "description": "D3-powered horizon chart for dense multi-series time-series — FX rate monitoring, cash position tracking, 10+ simultaneous series in compact lanes", "tags": [], "status": "beta", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "SunburstChart", "AreaChart", "StreamGraph" ] }, { "name": "StreamGraph", "slug": "stream-graph", "category": "ui", "subcategory": "finance", "description": "D3-powered streamgraph with wiggle offset for AUM composition over time — organic flow aesthetic for multi-category stacked area visualization", "tags": [], "status": "beta", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "AreaChart", "HorizonChart", "BumpChart" ] }, { "name": "BumpChart", "slug": "bump-chart", "category": "ui", "subcategory": "finance", "description": "D3-powered bump chart for rank changes over time — fund performance rankings, counterparty ranking shifts, quarterly peer comparison", "tags": [], "status": "beta", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "LineChart", "StreamGraph", "BenchmarkComparisonChart" ] }, { "name": "RadialBarChart", "slug": "radial-bar-chart", "category": "ui", "subcategory": "finance", "description": "D3-powered radial bar chart for comparative metrics in circular layout — KPI comparison, limit utilization gauges, multi-metric overview", "tags": [], "status": "beta", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "AllocationDonut", "CovenantGauge", "BumpChart" ] }, { "name": "BarChart", "slug": "bar-chart", "category": "ui", "subcategory": "finance", "description": "Token-native grouped/stacked bar chart (Recharts) reading DS dataviz tokens at runtime — FX volume by currency, payment counts by status, budget vs. actual, funding source stacks", "tags": [ "responsive", "scroll" ], "variants": [ "grouped", "stacked" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "GroupedBarChart", "DivergingBarChart", "LineChart", "AreaChart" ] }, { "name": "HeatmapChart", "slug": "heatmap-chart", "category": "ui", "subcategory": "finance", "description": "Token-native SVG cell-matrix heatmap with sequential (red/blue/neutral) and diverging color scales from DS dataviz tokens — correlation matrices, factor exposure grids, settlement timing, risk concentration", "tags": [ "responsive", "scroll" ], "variants": [ "sequential-red", "sequential-blue", "sequential-neutral", "diverging" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "RiskHeatmap", "FXExposureHeatmap", "FactorHeatmap" ] }, { "name": "ScatterChart", "slug": "scatter-chart", "category": "ui", "subcategory": "finance", "description": "Token-native multi-series scatter/bubble chart (Recharts) with optional z-dimension bubble sizing — risk/return scatter, VaR vs. exposure, FX spread vs. volume, counterparty clustering", "tags": [ "responsive", "scroll" ], "status": "stable", "since": "S4", "version": "1.0.0", "interactive": false, "related": [ "ScatterPlot", "BarChart", "LineChart" ] }, { "name": "StreamingArtifact", "slug": "streaming-artifact", "category": "ui", "subcategory": "ai-agent", "description": "Renders streamed code, markdown, or text output with progressive disclosure, syntax highlighting via line-number table, diff view, and copy action. Integrates with useStream patterns via controlled content + state props.", "tags": [], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "FunctionCallVisualizer", "StreamingDot", "TokenCounter" ] }, { "name": "ContextWindowMeter", "slug": "context-window-meter", "category": "ui", "subcategory": "ai-agent", "description": "Visualizes token usage across a conversation context window. Renders a segmented bar (system/user/assistant/tools), overflow warning state, and legend. Semantic colors from Tokens v2. Warning at 80%, critical at 95%.", "tags": [], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": false, "related": [ "TokenCounter", "Meter", "ContextWindowMeter" ] }, { "name": "ModelSelector", "slug": "model-selector", "category": "ui", "subcategory": "ai-agent", "description": "Model comparison dropdown or inline panel for Claude model family. Each option shows capability tags, context window size, latency indicator, and cost tier badge. Supports dropdown and full panel variants.", "tags": [], "variants": [ "dropdown", "panel" ], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "ModelTag", "Select", "Badge" ] }, { "name": "FunctionCallVisualizer", "slug": "function-call-visualizer", "category": "ui", "subcategory": "ai-agent", "description": "Renders AI tool call execution: function name, input parameters (syntax-highlighted JSON with line numbers), status badge (pending/running/done/error), output preview, execution duration, and call ID. Collapsible detail panel.", "tags": [], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "StreamingArtifact", "StreamingDot", "ApprovalGate" ] }, { "name": "GenerativeFormFill", "slug": "generative-form-fill", "category": "ui", "subcategory": "ai-agent", "description": "Form field with AI-assist affordances: ghost-text suggestion, accept/reject controls, Tab-to-accept keyboard shortcut, provenance badge (model name + confidence), and generating state. WCAG AA compliant with full ARIA labeling.", "tags": [], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "Input", "GroundingIndicator", "LearnedFromBadge" ] }, { "name": "AuthorityScope", "slug": "authority-scope", "category": "ui", "subcategory": "ai-agent", "description": "Agent supervision (S27): declares what an agent is PERMITTED to do. Renders the human-granted authority boundary — grant summary, permitted/denied action list with text labels, notional caps with gold usage bars, expiry, accountable grantor, and a revoke control. Validation gold frames the grant.", "tags": [], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "ReversalWindow", "ActionLedger", "ApprovalGate" ] }, { "name": "ReversalWindow", "slug": "reversal-window", "category": "ui", "subcategory": "ai-agent", "description": "Agent supervision (S27): the undo horizon after an agent acts. Shows the executed action (agency red accent), a live time-remaining countdown to the reversal deadline, REVERSIBLE / REVERSED / FINAL text badges, audit reference, and a gold reverse control with optional reason input — the human decision moment.", "tags": [], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "AuthorityScope", "ActionLedger", "DeadlineCountdown" ] }, { "name": "ActionLedger", "slug": "action-ledger", "category": "ui", "subcategory": "ai-agent", "description": "Agent supervision (S27): interruptible running log of agent actions. Rows carry UTC mono timestamps and text status badges (COMPLETED / IN PROGRESS / QUEUED / BLOCKED); in-progress rows pulse in temporal blue. The gold control rail — Pause / Stop / Hand back — is the human's interruption authority.", "tags": [], "status": "stable", "since": "S1", "version": "1.0.0", "interactive": true, "related": [ "AuthorityScope", "ReversalWindow", "FunctionCallVisualizer" ] } ] }