feat(plugins): Traefik problems first, UniFi/SNMP/fleet on shared shapes, audit names its entities, templates on tokens (#5126)

Traefik: routers are graded from their latest scrape (router_state: crit on
any real 5xx share, warn on p95 past the latency critical cutoff or a high
4xx share). Failing and slow routers lead as cards that say why; healthy
ones fold into one table that stays open or shut across polls. Proxy
counts are stat tiles; certificates are graded by Settings -> Thresholds
(tls_days).

UniFi: WAN health is a stat strip (latency graded by the thresholds),
devices carry status dots, event categories and firewall actions are
badges, the alarm count reuses .count-badge (renamed from .nav-count).
SNMP: each device wears a status badge and its readings are stat tiles.

Agent fleet: the table comes first, with a Status column (Reporting /
Silent / Never reported, by the host page's stale_after_seconds), silent
agents first, hosts linked, last seen as |ago.

Audit: entries name their entity (one query per type, steward/audit/
service.py) and link it; something deleted since keeps the name its entry
recorded and says "(deleted)".

Tokens: charts read colours through chart-colors.js (stewardColor resolves
a token to the rgb the browser computed; Chart.js defaults take the page's
text and border colours), so host, history, Traefik and SNMP charts drop
their hex. Template hex colours reach 0 (HEX_CEILING = 0), the last rgba
pills go, and heavy weights (600/700/bold, 60 of them) become 500, the
house pair being 400/500; a guard keeps templates there.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

plugins/snmp/templates/snmp/device.html

@@ -9,9 +9,7 @@
   <span style="font-size:0.8rem;color:var(--text-dim);">{{ device.host }}</span>
   <div style="margin-left:auto;display:flex;gap:0.5rem;">
     {% for h in [1, 6, 24, 168] %}
-    <a href="?hours={{ h }}"
-       class="btn btn-ghost"
-       style="font-size:0.78rem;padding:0.2rem 0.6rem;{% if hours == h %}background:var(--accent);color:#fff;border-color:var(--accent);{% endif %}">
+    <a href="?hours={{ h }}" class="range-btn{% if hours == h %} active{% endif %}"{% if hours == h %} aria-current="true"{% endif %}>
       {% if h < 24 %}{{ h }}h{% elif h == 24 %}24h{% else %}7d{% endif %}
     </a>
     {% endfor %}
@@ -27,7 +25,8 @@
 (function(){
   const raw = {{ history_json | safe }};
   const labels = {{ oid_labels | tojson }};
-  const palette = ["#6060c0","#e07040","#40b080","#c040c0","#4080e0","#e0c040","#c08040"];
+  // Series colours from the tokens, in an order that keeps neighbours apart.
+  const palette = ["--blue", "--yellow", "--green", "--red", "--gold", "--orange", "--text-muted"].map(stewardColor);
 
   // Collect all unique timestamps, sorted
   const tsSet = new Set();
@@ -66,12 +65,10 @@
       responsive: true,
       interaction: { mode: "index", intersect: false },
       plugins: {
-        legend: { position: "top", labels: { color: "#aaa", boxWidth: 12 } },
-        tooltip: { backgroundColor: "#1e1e2e", titleColor: "#ccc", bodyColor: "#aaa" },
+        legend: { position: "top", labels: { boxWidth: 12 } },
       },
       scales: {
-        x: { ticks: { color: "#888", maxTicksLimit: 12 }, grid: { color: "#2a2a3a" } },
-        y: { ticks: { color: "#888" }, grid: { color: "#2a2a3a" } },
+        x: { ticks: { maxTicksLimit: 12 } },
       },
     },
   });

plugins/snmp/templates/snmp/host_panel.html

@@ -9,7 +9,7 @@
   {% for device in devices %}
   <div style="{% if not loop.last %}margin-bottom:1rem;{% endif %}">
     <div style="display:flex;align-items:center;gap:0.6rem;margin-bottom:0.5rem;flex-wrap:wrap;">
-      <span style="font-weight:600;font-size:0.92rem;">{{ device.name }}</span>
+      <span style="font-weight:500;font-size:0.92rem;">{{ device.name }}</span>
       <span style="font-size:0.78rem;color:var(--text-dim);font-family:ui-monospace,monospace;">{{ device.host }}</span>
       {% if device.bound %}
       <span title="Explicitly bound to this host (host_id / steward_host)"
@@ -32,7 +32,7 @@
       <div style="background:var(--bg-elevated);border-radius:5px;padding:0.5rem 0.7rem;border:1px solid var(--border);">
         <div style="font-size:0.68rem;color:var(--text-dim);margin-bottom:0.2rem;font-family:ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ label }}</div>
         {% if val is not none %}
-        <div style="font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;">
+        <div style="font-size:1rem;font-weight:500;font-variant-numeric:tabular-nums;">
           {% if val >= 1000000 %}{{ "%.2f"|format(val / 1000000) }}<span style="font-size:0.72rem;color:var(--text-muted);">M</span>
           {% elif val >= 1000 %}{{ "%.1f"|format(val / 1000) }}<span style="font-size:0.72rem;color:var(--text-muted);">K</span>
           {% else %}{{ "%.4g"|format(val) }}{% endif %}

plugins/snmp/templates/snmp/index.html

@@ -1,56 +1,39 @@
 {# plugins/snmp/templates/snmp/index.html #}
 {% extends "base.html" %}
+{% from "_macros.html" import page_header, status_badge, stat_tile, empty_state %}
 {% block title %}SNMP — Steward{% endblock %}
 {% block content %}
-<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
-  <h1 class="page-title" style="margin:0;">SNMP Devices</h1>
-  <span style="font-size:0.8rem;color:var(--text-dim);">{{ devices|length }} device(s) configured</span>
-</div>
+{{ page_header("SNMP devices", devices|length ~ " device" ~ ("s" if devices|length != 1 else "") ~ " configured") }}
 
 {% if not devices %}
-<div class="card" style="color:var(--text-muted);text-align:center;padding:2rem;">
-  No SNMP devices configured. Add devices to <code>plugin.yaml</code>.
-</div>
+<div class="card">{{ empty_state("No SNMP devices configured. Add them to the snmp plugin's plugin.yaml.") }}</div>
 {% else %}
 
 {% for device in devices %}
-<div class="card" style="margin-bottom:1rem;">
-  <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1rem;">
-    <h2 style="margin:0;font-size:1rem;font-weight:600;">{{ device.name }}</h2>
-    <span style="font-size:0.78rem;color:var(--text-dim);">{{ device.host }}</span>
-    {% if device.readings %}
-    <span style="font-size:0.75rem;color:var(--green);margin-left:auto;">&#9679; reachable</span>
-    {% else %}
-    <span style="font-size:0.75rem;color:var(--text-dim);margin-left:auto;">&#9675; no data yet</span>
-    {% endif %}
-    <a href="/plugins/snmp/device/{{ device.name }}" class="btn btn-ghost" style="font-size:0.78rem;padding:0.2rem 0.6rem;">History</a>
+<section class="card" aria-labelledby="snmp-{{ loop.index }}">
+  <div class="host-health-head">
+    {{ status_badge('up', 'Reachable') if device.readings else status_badge('pending', 'No data yet') }}
+    <h2 id="snmp-{{ loop.index }}" class="section-title" style="margin:0;">{{ device.name }}</h2>
+    <span class="field-hint mono">{{ device.host }}</span>
+    <a href="/plugins/snmp/device/{{ device.name }}" class="btn btn-sm btn-ghost" style="margin-left:auto;">History</a>
   </div>
 
   {% if device.readings %}
-  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.75rem;">
+  <div class="stat-strip" style="margin-bottom:0;">
     {% for oid_cfg in device.oids %}
     {% set label = oid_cfg.label if oid_cfg.label else oid_cfg.oid %}
     {% set val = device.readings.get(label) %}
-    <div style="background:var(--bg-elevated);border-radius:6px;padding:0.6rem 0.9rem;">
-      <div style="font-size:0.72rem;color:var(--text-dim);margin-bottom:0.2rem;font-family:monospace;">{{ label }}</div>
-      {% if val is not none %}
-      <div style="font-size:1.1rem;font-weight:600;font-variant-numeric:tabular-nums;">
-        {% if val >= 1000000 %}{{ "%.2f"|format(val / 1000000) }}<span style="font-size:0.75rem;color:var(--text-muted);">M</span>
-        {% elif val >= 1000 %}{{ "%.1f"|format(val / 1000) }}<span style="font-size:0.75rem;color:var(--text-muted);">K</span>
-        {% else %}{{ "%.4g"|format(val) }}{% endif %}
-      </div>
-      {% else %}
-      <div style="font-size:0.85rem;color:var(--text-dim);">—</div>
-      {% endif %}
-    </div>
+    {{ stat_tile(label,
+                 "—" if val is none else
+                 ("%.2fM"|format(val / 1000000)) if val >= 1000000 else
+                 ("%.1fK"|format(val / 1000)) if val >= 1000 else
+                 "%.4g"|format(val)) }}
     {% endfor %}
   </div>
   {% else %}
-  <p style="font-size:0.85rem;color:var(--text-muted);margin:0;">
-    No readings yet — waiting for next poll cycle.
-  </p>
+  <p class="field-hint">No readings yet; waiting for the next poll.</p>
   {% endif %}
-</div>
+</section>
 {% endfor %}
 
 {% endif %}