Component

Metric card

KPI tile composed from Stat, Delta, Sparkline, Indicator, and Concrete surface primitives.

Metric card is for compact dashboard summaries. It accepts formatted values at the boundary and leaves business math to product code.
data
DOM renderImage render
Metric cardDefault

Agent runs

14,842+18.6%vs last week
Sparkline

Accepted agent runs across production workspaces.

Intervention rate

4.2%-2.4%blocked
Sparkline

Playground

Controls update query params directly. Complex slots use item-owned examples so component states stay deterministic, linkable, and screenshot-ready.

Loading playground

Rendered matrix

Every state maps to the same component render route through the state query param.

Default

KPI tile with value, delta, and sparkline.

Agent runs

14,842+18.6%vs last week
Sparkline

Accepted agent runs across production workspaces.

Intervention rate

4.2%-2.4%blocked
Sparkline
Render state

Status

Metric with a terminal status indicator.

Eval health

Live
14,842+0.8%vs last week
Sparkline

Accepted agent runs across production workspaces.

Intervention rate

Watch
4.2%-2.4%blocked
Sparkline
Render state

Compact

Dense grid tile for dashboard rows.

Agent runs

14.8k+18.6%vs last week
Sparkline

Intervention rate

4.2%-2.4%blocked
Sparkline
Render state

Critical

Negative signal tile for blocked workflow metrics.

Blocked runs

Watch
148+12.4%blocked
Sparkline

Runs held for policy review across production workspaces.

Escalations

Hot
14+624h
Sparkline
Render state

Trendless

Static KPI tile when trend data is unavailable.

Eval health

14,842+0.8%vs last week

Accepted agent runs across production workspaces.

Intervention rate

4.2%-2.4%blocked
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
label *string-Metric label shown above the value.
value *string-Formatted metric value.
unitstring-Optional unit suffix beside the value.
deltaDataDelta-Optional terminal/error/neutral change indicator.
trendreadonly number[][]Optional inline sparkline values.
trendIntentDataIntent-Overrides the sparkline intent derived from delta intent.
statusDataLegendItem-Small status indicator in the header.
compactbooleanfalseTight metric card rhythm for dense dashboards.