Radial Gauges

Session health dashboard — radial gauges with status variants for operational percentages

Session Health Dashboard

Radial gauges for agent operational metrics — token budget, issue completion, resource usage.

Radial charts (data-chart="radial") show a single value as a circular gauge. They are the natural chart type for operational percentages: how full is the token budget? How many issues are resolved? How much context window is consumed?

Live session metrics

Token budget used
72%

Issues resolved
58%

Context consumed
45%

Vault size
78%

Disk usage
91%

Source: session metrics — 2026-04-03

Status variants

Use data-status for threshold-based color changes:

Range	Status attribute	Color	Meaning
< 70%	none	green	Normal — no action needed
70–89%	`data-status="warning"`	orange	Approaching threshold
≥ 90%	`data-status="danger"`	red	Critical — action required

Automating status

An agent can compute the appropriate data-status value based on the fraction. If --size > 0.9, set data-status="danger". If --size > 0.7, set data-status="warning". The CSS handles the color automatically.

Markup

<table data-chart="radial" style="--size: 0.72">
  <caption>Token budget used</caption>
  <tbody><tr><td><span>72%</span></td></tr></tbody>
</table>

<!-- Warning variant --> <table data-chart="radial"
style="--size: 0.78" data-status="warning"> <caption>Vault
size</caption>
<tbody><tr><td><span>78%</span></td></tr></tbody>
</table>
<!-- Danger variant --> <table data-chart="radial"
style="--size: 0.91" data-status="danger"> <caption>Disk
usage</caption>
<tbody><tr><td><span>91%</span></td></tr></tbody>
</table>