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/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 %}