e47a9f4401
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
96 lines
3.9 KiB
HTML
96 lines
3.9 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<!--#include virtual="/_include/head.html" -->
|
||
<title>Radial Gauges — ASW Examples</title>
|
||
<meta name="description" content="Session health dashboard — radial
|
||
gauges with status variants for operational percentages">
|
||
</head>
|
||
<body>
|
||
<!--#include virtual="/_include/nav.html" -->
|
||
|
||
<main>
|
||
<header>
|
||
<h1>Radial Gauges</h1>
|
||
<p data-text="lead">Session health dashboard — radial gauges with
|
||
status variants for operational percentages</p>
|
||
</header>
|
||
|
||
<hgroup>
|
||
<h1>Session Health Dashboard</h1>
|
||
<p>Radial gauges for agent operational metrics — token budget, issue completion, resource usage.</p>
|
||
</hgroup>
|
||
|
||
<p>Radial charts (<code>data-chart="radial"</code>) 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?</p>
|
||
|
||
<section>
|
||
<h2>Live session metrics</h2>
|
||
|
||
<div style="display: flex; gap: var(--size-8); justify-content: center; flex-wrap: wrap; margin-block: var(--size-6)">
|
||
<table data-chart="radial" style="--size: 0.72">
|
||
<caption>Token budget used</caption>
|
||
<tbody><tr><td><span>72%</span></td></tr></tbody>
|
||
</table>
|
||
<table data-chart="radial" style="--size: 0.58">
|
||
<caption>Issues resolved</caption>
|
||
<tbody><tr><td><span>58%</span></td></tr></tbody>
|
||
</table>
|
||
<table data-chart="radial" style="--size: 0.45">
|
||
<caption>Context consumed</caption>
|
||
<tbody><tr><td><span>45%</span></td></tr></tbody>
|
||
</table>
|
||
<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>
|
||
<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>
|
||
</div>
|
||
|
||
<p data-text="dim">Source: session metrics — 2026-04-03</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Status variants</h2>
|
||
<p>Use <code>data-status</code> for threshold-based color changes:</p>
|
||
|
||
<table>
|
||
<thead><tr><th>Range</th><th>Status attribute</th><th>Color</th><th>Meaning</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>< 70%</td><td><span data-text="dim">none</span></td><td style="color: var(--accent)" data-text="mono">green</td><td>Normal — no action needed</td></tr>
|
||
<tr><td>70–89%</td><td><code>data-status="warning"</code></td><td style="color: var(--accent-orange)" data-text="mono">orange</td><td>Approaching threshold</td></tr>
|
||
<tr><td>≥ 90%</td><td><code>data-status="danger"</code></td><td style="color: var(--accent-red)" data-text="mono">red</td><td>Critical — action required</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div data-callout="tip">
|
||
<span data-callout-title>Automating status</span>
|
||
<p>An agent can compute the appropriate <code>data-status</code> value based on the fraction. If <code>--size > 0.9</code>, set <code>data-status="danger"</code>. If <code>--size > 0.7</code>, set <code>data-status="warning"</code>. The CSS handles the color automatically.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Markup</h2>
|
||
<pre><code><table data-chart="radial" style="--size: 0.72">
|
||
<caption>Token budget used</caption>
|
||
<tbody><tr><td><span>72%</span></td></tr></tbody>
|
||
</table>
|
||
|
||
<p><!-- 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></p>
|
||
<p><!-- 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> </code></pre></p>
|
||
</section>
|
||
</main>
|
||
|
||
<!--#include virtual="/_include/footer.html" -->
|
||
</body>
|
||
</html>
|