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.

Agent runs

14,842+18.6%vs last week

Accepted agent runs across production workspaces.

Intervention rate

4.2%-2.4%blocked

Playground

Props in the URL.

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

Loading playground.

States

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

Agent runs

14,842+18.6%vs last week

Accepted agent runs across production workspaces.

Intervention rate

4.2%-2.4%blocked

Default

KPI tile with value, delta, and sparkline.

Eval healthLive

14,842+0.8%vs last week

Accepted agent runs across production workspaces.

Intervention rateWatch

4.2%-2.4%blocked

Status

Metric with a terminal status indicator.

Agent runs

14.8k+18.6%vs last week

Intervention rate

4.2%-2.4%blocked

Compact

Dense grid tile for dashboard rows.

Props

Name	Type	Default	Description
`label *`	`string`	-	Metric label shown above the value.
`value *`	`string`	-	Formatted metric value.
`unit`	`string`	-	Optional unit suffix beside the value.
`delta`	`DataDelta`	-	Optional terminal/error/neutral change indicator.
`trend`	`readonly number[]`	`[]`	Optional inline sparkline values.
`trendTone`	`DataTone`	-	Overrides the sparkline tone derived from delta intent.
`status`	`DataLegendItem`	-	Small status indicator in the header.
`compact`	`boolean`	`false`	Tight metric card rhythm for dense dashboards.