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

feat: legacy import — packs, examples, lab, themes, docs, lineage

Browse source 
Import from agentic-semantic-web/ into restructured repo:
- 7 packs (apache, caddy, flask, hugo, nginx, pandoc, python)
- shared error pages (403-503)
- 17 lab experiments (boilerplate, charts, misc)
- 31 example pages (charts, components, content, layout, vault)
- 2 themes (garden, trentuna stub)
- 4 docs (llms.txt, vocabulary, philosophy, agent-directive)
- lineage.md (Pico/Open Props/Charts.css history)
- Hugo mounts for lab/ and examples/

All agentic.css references updated to asw.css.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ludo 2026-04-11 16:57:39 +02:00
parent e9895cf90d
commit 86464f3e21
Signed by: ludo
GPG key ID: F6E479DEFAB84D6E
100 changed files with 14700 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

96
examples/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>