Components

Primary action trigger with variant and size support

Icon-only action button with accessible label

Light/dark theme toggle

Text input with label, hint, and error states

Labeled text field with validation and helper text

Multi-line text input with auto-resize support

Dropdown selection with Radix-powered accessible listbox

Binary toggle control with label

Group of related checkboxes with shared label

Single-selection radio button group

Toggle switch for boolean settings

Range input slider with min/max/step

Numeric input with currency formatting, min/max/step clamping, stepper buttons, and Intl.NumberFormat

Date selection input using native date control with DS token styling and monospace font

Date range selection with linked start/end inputs, automatic min/max constraints

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.

Colored label for status, trust level, or category

Uppercase label chip with optional click handler

Inline data value with expandable provenance popover

Colored dot indicating idle, active, pending, error, or completed state

AI model identifier chip

Relative or exact time display with auto-refresh

Temporal age indicator showing data staleness

Token/cost budget visualization with threshold warnings

Live token usage counter with budget threshold

Horizontal bar gauge with low/high threshold markers

User or agent avatar with fallback initials

Data table with sortable columns and row selection

Key-value list for structured data display

Attention block with accent bar for info, warning, or error context

Placeholder for empty, pending, or error states with action slot

Animated placeholder for loading content

Animated dot sequence for streaming/typing indicators

Micro-feedback indicator for user reactions

Determinate or indeterminate progress bar

Spinning loading indicator

Ephemeral notification toast with auto-dismiss

Validation-tinted callout shown on deprecated component pages with migration guidance

Container with structured border and optional header

Generic box container with padding and border props

Flexbox layout container with gap and alignment

CSS Grid layout container with responsive columns

Max-width centered content container

Semantic section wrapper with vertical spacing

Horizontal or vertical divider line

Scrollable container with styled scrollbar

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.

Adaptive navigation bar with mobile hamburger

Tabbed content navigation with Radix accessibility

Button group for switching between related views

Locale selection dropdown with flag, native name, BCP 47 code, and RTL indicator. Two variants: compact (icon+code) and full (flag+name).

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 <kbd> key display. Supports grouping, context-filtering, and multi-platform key variants.

Hierarchical navigation trail with configurable separator, overflow collapse, and semantic markup

Multi-step progress indicator with horizontal/vertical orientation and step status tracking

Modal dialog with Radix focus management and close on escape

Confirmation dialog requiring explicit user action

Full-featured modal wrapper with header, body, and footer slots

Contextual menu triggered by button press

Floating content panel anchored to a trigger element

Contextual tooltip with Radix positioning

Inline term definition for technical vocabulary — wraps jargon in a semantic abbr with a plain-language tooltip (H2 + H10)

Collapsible content sections with Radix animation support

Collapsible table of contents with anchor link navigation

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.

Command palette / combobox built on cmdk with DS token styling. Composable sub-components.

Body text primitive with size and weight control

Semantic heading element with display and size variants

Inline or block code display with syntax styling

Keyboard shortcut display element

Styled anchor element with underline and color variants

Styled block quote with accent border

Emphasized italic text

Bold emphasis text

Binary approve/deny gate with ceremony-level friction

Multi-step deliberate confirmation for high-stakes actions

SHA-256 hash verification badge

Visual indicator of AI response grounding quality

Attribution badge showing learning source

Code block with copy-to-clipboard for install commands

Six/eight-digit OTP code entry with auto-advance, paste support, countdown timer, and resend action

Password complexity meter with four-segment bar and requirement checklist

Treasury persona role indicator with semantic color coding (analyst, manager, director, controller, compliance)

Masked API key display with reveal toggle, copy-to-clipboard, metadata, and revoke action

Draggable graph node with status-driven styling and pulse animation

SVG connection line between graph nodes

Force-directed or grid layout engine for node graphs

Formatted number display with tabular alignment for financial tables

Change/delta display with severity-based coloring for P&L and returns

High-density data table for treasury positions, risk matrices, and compliance grids

Compliance/regulatory status indicator for filings, KYC, and attestations

Currency pair display with mid-rate for FX trading and treasury

Aggregated position card showing balance, period change, and severity

Risk metric display with confidence interval and severity bar

Time-critical alert banner for cutoff warnings and breach notifications

Inline SVG micro-chart for trend visualization in table cells

ISO 4217 currency code with flag emoji and optional symbol

Locale-aware date range for settlement windows and reporting periods

Draft/confidential overlay for financial reports and dashboards

Inline proportional bar for ratio visualization in table cells

Sortable column header with direction indicator for data tables

Expand/collapse cell for hierarchical financial data

Compact pagination for large financial datasets

Filter toolbar with chip toggles for financial data views

Bid-ask spread display with basis point calculation and severity coloring

FX rate card with bid/ask, spread, daily change, and sparkline

Horizontally scrolling FX rate ticker with live-style directional change indicators

Currency pair selector supporting predefined pairs or free-select from full currency list

Diverging horizontal bar showing derivative exposure by instrument type (asset vs liability)

Forward contract card showing rate, forward points, notional, tenor, MTM P&L, and contract status

Responsive grid layout for FX rate cards

FX option pricing summary with Greeks display

Real-time cash position card with per-bank breakdown and intraday flows

Payment lifecycle tracker with maker/checker pipeline and rejection handling

13-week rolling cash forecast with confidence-band bar chart

AI-powered counterparty credit risk dashboard with score bands and recommendations

Cash sweep rule visualization with flow direction, triggers, and execution history

Maker/checker approval pipeline with 5-step progression and rejection state

Learning system event list showing CONFIRMS/REFINES/CONTRADICTS signals with confidence deltas

Accounting period close progress with step status, blockers, and deadline tracking

Reconciliation match funnel showing progressive matching stages and unmatched exceptions

Debt covenant compliance card with threshold vs. current visualization and headroom

Value at Risk decomposition by risk driver with contribution bars and diversification benefit

Portfolio maturity distribution with bar chart and bucket details including count, amount, yield

Sanctions and compliance screening results with per-list match scores and overall status

Receivables aging visualization with bucket bars, overdue percentage, and amount breakdown

Recursive liquidity pool tree showing parent-child account balances

Cross-domain learning flywheel health dashboard with loop strength and event activity

Bulk payment/trade execution pipeline with per-item status tracking and failure callouts

Maker/checker approval pipeline with step-by-step status, rejection reasons, and actor attribution

Debt covenant compliance dashboard with headroom bars, status badges, and bidirectional threshold support

Hourly intraday cash position timeline with bar chart, flow arrows, and alert threshold line

Cross-domain learning multiplier network graph with SVG nodes, weighted edges, and strength legend

ASC 815 / IFRS 9 hedge effectiveness gauge with 80%–125% corridor visualization

Hierarchical trial balance with expandable GL account tree, debit/credit/net columns

AML/KYC entity screening result with match scores against sanctions and PEP lists

Chronological risk limit breach timeline with severity escalation and acknowledgement tracking

Learning system decision test with confidence meter, feedback signal breakdown, and contradiction alerts

Regulatory compliance ratio bar with threshold marker — visualizes LCR, NSFR, leverage ratios against minimum requirements

Directional trend indicator with semantic coloring — shows up/down/flat movement with optional percentage value

Report footnote with data source attribution, timestamp, and optional disclaimer

Formal report header with title, as-of date, period, and classification badge

Risk disclosure callout with severity level, description, and mitigation guidance

Horizontal strip of key performance metrics with trend deltas and loading states

Multi-period cash forecast table with row grouping, totals, and loading skeleton

Side-by-side comparison of forecast scenarios with baseline highlighting

Cash flow waterfall with opening balance, incremental flows, and closing balance

Value-at-Risk summary card with confidence level, horizon, method, and limit utilization

Semicircular VaR gauge showing limit utilization with four severity tiers

Multi-band exposure limit bar for counterparty, sector, and concentration limits with warning ticks

Composite risk score card with rating tier, period delta, and dimension breakdown bars

Risk breach alert panel with three severity levels, acknowledgement flow, and limit/current display

Options Greeks display panel with delta, gamma, theta, vega, and rho values

Portfolio concentration risk breakdown with exposure bars and limit indicators

Two-dimensional risk heatmap grid with severity-colored cells

Multi-factor exposure heatmap across time periods with threshold-based coloring

Cash pool summary card with account balances and pool total

Liquidity Coverage Ratio dashboard with HQLA, net outflows, and compliance gauge

Net Stable Funding Ratio panel with ASF/RSF category breakdown and compliance status

HQLA tier composition breakdown with stacked bar and tier-level detail

Depth-of-market order book with bid/ask columns and cumulative volume bars

Trade activity log with sortable columns, status badges, and row-level detail

Order entry ticket displaying instrument, side, type, quantity, and price parameters

End-to-end payment lifecycle tracker with step progression and SLA deadline

Queued payment list with priority ordering, amount, and approval status

Transaction cost analysis report with benchmark comparison and slippage metrics

Execution quality analytics with fill rate, VWAP deviation, and venue breakdown

Portfolio allocation donut chart with segment labels and center total

Performance attribution table with allocation, selection, and interaction effects

Portfolio holdings table with position, market value, weight, and P&L columns

Key accounting metrics grid with period-over-period comparison and deltas

General ledger journal entry with debit/credit lines and balanced totals

Hedge position register with instrument details, notional, and effectiveness status

Summarized trial balance with account categories, debit/credit totals, and balance check

Regulatory compliance checklist with pass/fail/pending status per item

Trade surveillance alert queue with severity, type, and investigation status

Regulatory filing card with report name, authority, due date, and submission status

Sanctions screening result card with entity name, list matches, and clear/hit status

Reconciliation waterfall showing match stages from total items to final exceptions

Reconciliation summary dashboard with match rate, item counts, and status breakdown

Reconciliation exception queue with severity, age, and resolution status

Side-by-side reconciliation match pair showing bank vs. book entries with differences highlighted

Bank connection status indicator with sync time, latency, and health state

Credit facility utilization gauge with drawn amount, limit, and availability

Settlement lifecycle timeline with T+N stages and completion indicators

Multilateral netting summary with gross/net payable/receivable and savings percentage

Trade confirmation card with counterparty, amount, reference, and matching status

Settlement batch tracker with batch status, amounts, and counterparty breakdown

SWIFT / ACH / SEPA payment lifecycle stepper with per-step timestamps, actor labels, and reference IDs

Two-person maker/checker approval widget with signature status, countdown timer, and optional approve/reject actions

Inline sanctions screening badge: pending (spinner), clear (green), flagged (red), manual-review (amber) — with optional report link

Net settlement position card: gross debit, gross credit, net amount, counterparty, value date, netting method

Stablecoin holdings table with peg deviation, reserves, and market cap metrics

Digital wallet card with address, balance, network, and connection status

Composed treasury overview dashboard with positions, FX rates, forecasts, and alerts

Composed risk management dashboard with VaR, heatmap, concentration, and Greeks

Composed compliance monitoring dashboard with checklist, surveillance, and filings

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

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)

Single forecast period row (opening, receipts, disbursements, net flow, closing, confidence) — presentational <tr> sub-component rendered inside ForecastTable's <tbody>

Single order book price level row with cumulative depth bar — presentational <tr> sub-component rendered inside OrderBook

High-density payment queue table with bulk-select checkboxes, priority accents, approve/reject/view actions, and pagination — composes PaymentStatusBadge and ClearingNetworkIndicator per row

Multi-series SVG line chart for time-series and trend data — cash forecasts, FX history, AI confidence trends

Filled area chart for cumulative and stacked treasury data — liquidity buffers, stacked funding sources

Side-by-side grouped bar chart for categorical comparison — budget vs. actual, entity-by-entity cash

Bidirectional bar chart from zero — FX net positions, budget variance, tornado sensitivity analysis

Two-dimensional scatter plot for correlation and distribution — risk vs. return, exposure vs. limit

Squarified treemap for hierarchical proportion — portfolio allocation, currency exposure breakdown

Sankey flow diagram for cash flow attribution — inflow sources, intercompany netting, liquidity cascade

Instrument identifier chip for ISIN, CUSIP, SEDOL, FIGI, and RIC with optional copy-to-clipboard

Tenor label chip (ON, 1W, 3M, 1Y…) with duration-band color coding and optional selection state

Currency-aware monetary amount with semantic sign coloring, monospace tabular-nums, and ISO 4217 label

Legal Entity Identifier (ISO 17442) badge with full/truncated display and copy-to-clipboard

Asset class and instrument type classification tag with semantic color coding per asset class

Counterparty identity card with LEI, country, sector, credit rating, outlook, and exposure limit

Stacked bar chart showing debt maturities by period and instrument type for funding dashboards

Horizontal bar chart showing all-in cost (bps) per funding source with blended average reference line

Repo and reverse repo rate table by collateral type and tenor with spread-to-benchmark display

CP issuance and maturity tracker with days-to-maturity urgency coloring and program-type classification

Capital structure waterfall from senior secured to equity with seniority color coding and proportion bars

Portfolio vs. benchmark cumulative return comparison with excess return (alpha) display

Fixed-income duration and convexity metrics panel with modified duration, effective duration, convexity, and DV01

Par, spot (zero), and forward yield curve viewer with inversion detection and tenor labels

Benchmark tracking error gauge with TE budget/limit bar, utilization percentage, and severity classification

P&L attribution breakdown by factor, desk, or strategy with diverging bar chart and totals

Expected Shortfall (CVaR) card with VaR comparison, ES/VaR multiplier, and limit utilization bar

Credit rating badge with agency, tier color coding (IG=green/sub-IG=caution/distressed=red), and outlook

Stress test scenario results table with impact bars, pass/warn/fail status, and worst-case callout

VaR backtesting chart with P&L bars vs. VaR forecast line; breach count and color-coded exceptions

Real-time payment cutoff countdown timer with urgency color coding for CHAPS, Fedwire, SWIFT windows

Correspondent bank chain visualizer for cross-border payment routing with BIC, status, and charges per hop

KYC/CDD status card with risk tier, expiry date, and outstanding document checklist

AML transaction monitoring alert card with severity, type, status, and entity metadata for compliance queues

Basel/CRR regulatory capital adequacy panel showing CET1, Tier 1, Total Capital, Leverage, LCR, NSFR vs. minimums

Reconciliation break analysis table with break type, age, counterparty, amount, and open/aging/critical status

Straight-Through Processing rate gauge with target line, exception count, and exception breakdown

Responsive wrapper that renders a full chart at desktop (≥768px) and collapses to a compact metric card with sparkline at mobile (<768px)

Strike × tenor implied volatility heatmap with 5-stop vol ramp, contour borders, and hover tooltip showing exact IV%

Black-Scholes / Black-76 / Binomial options pricer: model inputs, live premium output, put/call toggle, and full Greeks breakdown

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

270° arc gauge for portfolio hedge ratio (0–130%). Shows current ratio vs target band, over-hedged warning zone, and needle indicator

Currency pair × business unit exposure matrix. Blue = long, red = short, intensity = magnitude. Row/column totals. Click-to-drill support

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.

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.

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.

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.

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).

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.

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.

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.

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.

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.

D3-powered sunburst chart for hierarchical allocation data — fund decomposition, portfolio sector breakdown, budget hierarchy

D3-powered chord diagram for cross-entity treasury flows — intercompany transfers, currency exposure mapping, bilateral netting

D3-powered force-directed graph for counterparty networks — entity relationships, exposure connections, banking relationships

D3-powered box/violin plot for risk distribution visualization — VaR distributions, return spreads, yield curve analysis, stress-test scenarios

D3-powered parallel coordinates for multi-factor analysis — instrument comparison across rate, duration, credit, liquidity with interactive axis brushing

D3-powered choropleth map for geographic exposure visualization — regional treasury allocation, counterparty country risk, AUM by geography, FX exposure

D3-powered circle packing chart for hierarchical allocation — portfolio → fund → position drill-down, budget decomposition, counterparty exposure tiers

D3-powered 2D contour density chart for return distribution — bimodal clusters, alpha factor scatter, risk-return frontiers, option payoff density

D3-powered horizon chart for dense multi-series time-series — FX rate monitoring, cash position tracking, 10+ simultaneous series in compact lanes

D3-powered streamgraph with wiggle offset for AUM composition over time — organic flow aesthetic for multi-category stacked area visualization

D3-powered bump chart for rank changes over time — fund performance rankings, counterparty ranking shifts, quarterly peer comparison

D3-powered radial bar chart for comparative metrics in circular layout — KPI comparison, limit utilization gauges, multi-metric overview

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

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

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

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.

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%.

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.

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.

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.

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.

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.

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.