trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

asw-v01: archive deferred content (packs, site, lab, legacy examples)

Browse source 
- 2.1: packs/ -> archive/packs/
- 2.2: site/ -> archive/site/
- 2.3: src/lab/ -> archive/lab/
- 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
This commit is contained in:
exe.dev user 2026-06-07 10:39:21 +02:00
parent 416fe2f180
commit e47a9f4401
173 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

96
archive/examples-legacy/charts/radial-gauges.html Normal file
View file

@ -0,0 +1,96 @@
<!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>&lt; 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 &gt; 0.9</code>, set <code>data-status="danger"</code>. If <code>--size &gt; 0.7</code>, set <code>data-status="warning"</code>. The CSS handles the color automatically.</p>
</div>
</section>
<section>
<h2>Markup</h2>
<pre><code>&lt;table data-chart="radial" style="--size: 0.72"&gt;
&lt;caption&gt;Token budget used&lt;/caption&gt;
&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;span&gt;72%&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
&lt;/table&gt;
<p>&lt;!-- Warning variant --&gt; &lt;table data-chart="radial"
style="--size: 0.78" data-status="warning"&gt; &lt;caption&gt;Vault
size&lt;/caption&gt;
&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;span&gt;78%&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
&lt;/table&gt;</p>
<p>&lt;!-- Danger variant --&gt; &lt;table data-chart="radial"
style="--size: 0.91" data-status="danger"&gt; &lt;caption&gt;Disk
usage&lt;/caption&gt;
&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;span&gt;91%&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
&lt;/table&gt; </code></pre></p>
</section>
</main>
<!--#include virtual="/_include/footer.html" -->
</body>
</html>