Integrate test code improvements using web_template components

lt-alert:
- Replace custom .stale-banner with lt-alert lt-alert--warning in app.js
  and links.html; remove stale-banner CSS, reuse lt-alert margin rule

lt-progress:
- Replace custom .traffic-bar-track/.traffic-bar-fill in links.html with
  lt-progress from base.css; TX uses default (orange), RX uses --cyan,
  both flip to --red when utilisation >85% (trafficBarClass helper)
- Keep traffic layout classes (.traffic-section/.traffic-row etc.) for structure

Suppression type badges:
- Map target_type to distinct badge colors: host→badge-warning (orange),
  interface→badge-info (cyan), unifi_device→badge-purple (new alias using
  --accent-purple from base.css), all→badge-critical (red)
- Applied in both server-rendered table (Jinja2 dict lookup) and
  renderActiveRows() JS

Topology animated down-wire:
- Add data-host attribute to .topo-v2-wire-10g/.topo-v2-wire-1g elements
- updateTopology() toggles .wire-down class on the 10G drop-wire when
  host.status === 'down'
- .wire-down CSS: animated repeating-linear-gradient dashed red line
  via wire-dash-anim @keyframes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/app.js

@@ -86,11 +86,13 @@ function updateStatusBar(summary, lastCheck, daemonOk) {
       if (!staleBanner) {
         staleBanner = document.createElement('div');
         staleBanner.id = 'stale-banner';
-        staleBanner.className = 'stale-banner';
+        staleBanner.className = 'lt-alert lt-alert--warning';
+        staleBanner.innerHTML = '<span class="lt-alert-icon">⚠</span><div class="lt-alert-body"><div class="lt-alert-msg"></div></div>';
         document.querySelector('.lt-main').prepend(staleBanner);
       }
       const mins = Math.floor(checkAge / 60);
-      staleBanner.textContent = `⚠ Monitoring data is stale — last check was ${mins} minute${mins !== 1 ? 's' : ''} ago. The monitor daemon may be down.`;
+      staleBanner.querySelector('.lt-alert-msg').textContent =
+        `Monitoring data is stale — last check was ${mins} minute${mins !== 1 ? 's' : ''} ago. The monitor daemon may be down.`;
       staleBanner.style.display = '';
     } else if (staleBanner) {
       staleBanner.style.display = 'none';
@@ -138,6 +140,11 @@ function updateTopology(hosts) {
       badge.className = `topo-badge topo-badge-${host.status}`;
       badge.textContent = host.status;
     }
+
+    // Animate the 10G drop-wire red+dashed when host is down
+    document.querySelectorAll(`.topo-v2-wire-10g[data-host="${CSS.escape(name)}"]`).forEach(wire => {
+      wire.classList.toggle('wire-down', host.status === 'down');
+    });
   });
 }
 

static/style.css

@@ -132,6 +132,7 @@
 .badge-neutral  { color: var(--text-muted); border-color: var(--text-muted); }
 .badge-resolved { color: var(--text-muted); border-color: var(--border-color); text-decoration: line-through; }
 .badge-suppressed { font-size: .9em; padding: 0; border: none; color: var(--text-muted); }
+.badge-purple   { color: var(--accent-purple); border-color: var(--accent-purple); }
 
 /* ── Table row state colors ───────────────────────────────────────── */
 .lt-table tr.row-critical td              { background: rgba(255,45,85,.04); }
@@ -179,15 +180,7 @@
 .last-check  { font-size: .72em; color: var(--text-muted); }
 
 /* ── Stale monitoring banner ──────────────────────────────────────── */
-.stale-banner {
-  background: var(--amber-dim);
-  border: 1px solid var(--amber);
-  border-left: 4px solid var(--amber);
-  color: var(--amber);
-  padding: 10px 16px;
-  margin: 0 0 14px;
-  font-size: .88em;
-}
+/* .stale-banner replaced by lt-alert--warning */
 
 /* ── Error / empty state containers ─────────────────────────────────  */
 .error-state {
@@ -397,9 +390,17 @@
   height: 28px;
   align-items: flex-start;
 }
-.topo-v2-wire-10g { width: 2px; height: 100%; background: var(--green); opacity: .55; }
+.topo-v2-wire-10g { width: 2px; height: 100%; background: var(--green); opacity: .55; transition: background .3s, opacity .3s; }
 .topo-v2-wire-1g  { width: 0; height: 100%; border-left: 2px dashed var(--amber); opacity: .45; }
 
+@keyframes wire-dash-anim { to { background-position: 0 -20px; } }
+.topo-v2-wire-10g.wire-down {
+  background: repeating-linear-gradient(to bottom, var(--red) 0 6px, transparent 6px 10px) !important;
+  background-size: 2px 10px !important;
+  opacity: .9 !important;
+  animation: wire-dash-anim .7s linear infinite;
+}
+
 /* Bus rails */
 .topo-bus-section {
   width: 100%;
@@ -557,14 +558,11 @@
 .counter-zero    { color: var(--green); }
 .counter-nonzero { color: var(--red); text-shadow: var(--glow-red); }
 
-/* Traffic bars */
+/* Traffic bars — use lt-progress from base.css */
 .traffic-section  { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,107,0,.08); }
 .traffic-row      { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
 .traffic-label    { font-size: .62em; color: var(--text-muted); width: 20px; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
-.traffic-bar-track{ flex: 1; height: 5px; background: var(--bg-primary); border: 1px solid rgba(255,107,0,.15); position: relative; overflow: hidden; }
-.traffic-bar-fill { height: 100%; position: absolute; left: 0; top: 0; transition: width .4s; }
-.traffic-tx       { background: var(--cyan);  box-shadow: 0 0 3px rgba(0,212,255,.4); }
-.traffic-rx       { background: var(--green); box-shadow: 0 0 3px rgba(0,255,136,.4); }
+.traffic-row .lt-progress { flex: 1; height: 5px; }
 .traffic-value    { font-size: .7em; color: var(--text-dim); width: 68px; text-align: right; flex-shrink: 0; }
 
 /* SFP / optical panel */
@@ -665,7 +663,7 @@
 .link-loading { padding: 20px; text-align: center; color: var(--text-muted); font-size: .8em; }
 .link-loading::after { content: ' ...'; animation: blink 1s step-end infinite; }
 .link-no-data { padding: 14px; color: var(--text-muted); font-size: .78em; text-align: center; }
-.stale-banner { margin-bottom: 12px; }
+.lt-alert { margin-bottom: 12px; }
 
 /* ── Inspector page ───────────────────────────────────────────────── */
 .inspector-layout {