Add LDAP avatar photos, UX polish, and TDS component upgrades

- Add /api/avatar endpoint querying lldap for user jpegPhoto; disk cache
  with sentinel pattern avoids repeat LDAP hits for users without photos
- Add ldap3 dependency and ldap config block to config.json
- Wire lt-avatar img overlay in base.html with capture-phase error
  fallback (lt-avatar-img-err) to reveal initials when image is absent
- Fix lt-avatar CSS shim: position:relative + absolute inset on img
  (local base.css was missing these; added to style.css)
- Replace all empty-state paragraphs with proper lt-empty-state markup
  (icon + title + body) across index, suppressions, inspector, app.js
- Add lt-spinner--cyan next to refresh button; shows during refreshAll()
- Replace inspector panel-section-title with lt-divider throughout
- Add data-tooltip attributes to SFP DOM metrics, TX/RX/Carrier/Duplex/
  Auto-neg/Error labels in links.html and inspector panel
- Add tooltips to events table column headers (Sev, First Seen, Failures)
- Fix links.html host panel timestamp (was reading sample.updated which
  is always undefined; now uses data.updated)
- Fix UniFi status text casing (Online→ONLINE to match server render)
- Remove dead topo-status-* class manipulation from updateTopology()
- Always render alert-count-badge; toggle display:none when count is 0
- Fix double UniFi get_devices() call in monitor.py run loop
- Fix chip-critical animation (was using green pulse-glow; now red)

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

app.py

@@ -8,6 +8,7 @@ import hashlib
 import ipaddress
 import json
 import logging
+import os
 import re
 import threading
 import time
@@ -15,7 +16,7 @@ import uuid
 from datetime import datetime, timezone
 from functools import wraps
 
-from flask import Flask, jsonify, render_template, request
+from flask import Flask, jsonify, make_response, render_template, request, send_file
 
 import db
 import diagnose
@@ -169,6 +170,7 @@ def index():
         last_check=last_check,
         suppressions=suppressions,
         recent_resolved=recent_resolved,
+        daemon_ok=_daemon_ok(last_check),
     )
 
 
@@ -442,6 +444,82 @@ def api_diagnose_poll(job_id: str):
     return jsonify({'status': job['status'], 'result': job.get('result')})
 
 
+@app.route('/api/avatar')
+@require_auth
+def api_avatar():
+    """Serve the current user's LDAP avatar photo (JPEG), cached to disk."""
+    username = request.headers.get('Remote-User', '').strip()
+    if not username:
+        return '', 404
+
+    ldap_cfg = _config().get('ldap', {})
+    if not ldap_cfg.get('host') or not ldap_cfg.get('bind_dn'):
+        return '', 404
+
+    # Build a safe cache filename from the username (alphanumeric + - _ .)
+    safe_name = re.sub(r'[^a-zA-Z0-9._-]', '_', username)
+    cache_dir = ldap_cfg.get('cache_dir', '/tmp/gandalf_avatars')
+    os.makedirs(cache_dir, exist_ok=True)
+    cache_file = os.path.join(cache_dir, f'user_{safe_name}.jpg')
+    sentinel    = os.path.join(cache_dir, f'user_{safe_name}.none')
+    cache_ttl   = int(ldap_cfg.get('cache_ttl', 3600))
+
+    now = time.time()
+
+    # Serve cached image if fresh
+    if os.path.exists(cache_file) and now - os.path.getmtime(cache_file) < cache_ttl:
+        return send_file(cache_file, mimetype='image/jpeg',
+                         max_age=cache_ttl, conditional=True)
+
+    # Skip LDAP if we already know this user has no avatar
+    if os.path.exists(sentinel) and now - os.path.getmtime(sentinel) < cache_ttl:
+        return '', 404
+
+    # Query lldap
+    avatar_data = None
+    try:
+        import ldap3
+        server = ldap3.Server(ldap_cfg['host'], port=int(ldap_cfg.get('port', 3890)))
+        conn   = ldap3.Connection(server,
+                                  user=ldap_cfg['bind_dn'],
+                                  password=ldap_cfg.get('bind_pw', ''),
+                                  auto_bind=True, receive_timeout=5)
+        safe_uid = ldap3.utils.conv.escape_filter_chars(username)
+        conn.search(ldap_cfg.get('user_base', 'ou=people,dc=example,dc=com'),
+                    f'(uid={safe_uid})', attributes=['avatar'])
+        if conn.entries and conn.entries[0]['avatar'].value:
+            avatar_data = conn.entries[0]['avatar'].value
+        conn.unbind()
+    except ImportError:
+        logger.error('ldap3 not installed — run: pip install ldap3')
+        return '', 404
+    except Exception as e:
+        logger.error(f'LDAP avatar lookup failed for {username}: {e}')
+        return '', 404
+
+    if not avatar_data or len(avatar_data) < 100:
+        open(sentinel, 'w').close()
+        return '', 404
+
+    # Validate JPEG magic bytes (FF D8 FF)
+    if isinstance(avatar_data, str):
+        avatar_data = avatar_data.encode('latin-1')
+    if avatar_data[:3] != b'\xFF\xD8\xFF':
+        logger.warning(f'Non-JPEG avatar data for {username}')
+        open(sentinel, 'w').close()
+        return '', 404
+
+    with open(cache_file, 'wb') as f:
+        f.write(avatar_data)
+    if os.path.exists(sentinel):
+        os.unlink(sentinel)
+
+    resp = make_response(avatar_data)
+    resp.headers['Content-Type']  = 'image/jpeg'
+    resp.headers['Cache-Control'] = f'private, max-age={cache_ttl}'
+    return resp
+
+
 @app.route('/health')
 def health():
     """Health check endpoint (no auth). Checks DB and monitor freshness."""

config.json

@@ -24,6 +24,15 @@
     "url": "http://10.10.10.45/create_ticket_api.php",
     "api_key": "5acc5d3c647b84f7c6f59082ce4450ee772e2d1633238b960136f653d20c93af"
   },
+  "ldap": {
+    "host": "10.10.10.39",
+    "port": 3890,
+    "bind_dn": "uid=jared,ou=people,dc=example,dc=com",
+    "bind_pw": "SJdi$P%RhB3yRoXE^PNL",
+    "user_base": "ou=people,dc=example,dc=com",
+    "cache_dir": "/tmp/gandalf_avatars",
+    "cache_ttl": 3600
+  },
   "auth": {
     "allowed_groups": ["admin"]
   },

monitor.py

@@ -877,8 +877,12 @@ class NetworkMonitor:
     # ------------------------------------------------------------------
     # Snapshot collection (for dashboard)
     # ------------------------------------------------------------------
-    def _collect_snapshot(self, iface_states: Dict[str, Dict[str, bool]]) -> dict:
+    def _collect_snapshot(
-        unifi_devices = self.unifi.get_devices() or []
+        self, iface_states: Dict[str, Dict[str, bool]],
+        unifi_devices: Optional[List[dict]] = None,
+    ) -> dict:
+        # Accept pre-fetched devices; fall back to empty list if unavailable
+        display_unifi = unifi_devices if unifi_devices is not None else []
 
         hosts = {}
         for instance, ifaces in iface_states.items():
@@ -914,7 +918,7 @@ class NetworkMonitor:
 
         return {
             'hosts': hosts,
-            'unifi': unifi_devices,
+            'unifi': display_unifi,
             'updated': datetime.utcnow().isoformat(),
         }
 
@@ -933,23 +937,24 @@ class NetworkMonitor:
                 # 1. Fetch interface states once — shared by snapshot and alert processing
                 iface_states = self.prom.get_interface_states()
 
-                # 2. Collect and store snapshot for dashboard
+                # 2. Fetch UniFi devices once — used by both snapshot and alert processing
-                snapshot = self._collect_snapshot(iface_states)
+                unifi_devices = self.unifi.get_devices()
+
+                # 3. Collect and store snapshot for dashboard
+                snapshot = self._collect_snapshot(iface_states, unifi_devices)
                 db.set_state('network_snapshot', snapshot)
                 db.set_state('last_check', _now_utc())
 
-                # 3. Collect link stats (ethtool + traffic metrics)
+                # 4. Collect link stats (ethtool + traffic metrics)
                 try:
                     link_data = self.link_stats.collect(self._instance_map)
                     db.set_state('link_stats', link_data)
                 except Exception as e:
                     logger.error(f'Link stats collection failed: {e}', exc_info=True)
 
-                # 4. Process alerts using already-fetched interface states
+                # 5. Process alerts using already-fetched data
                 suppressions = db.get_active_suppressions()
                 self._process_interfaces(iface_states, suppressions)
-
-                unifi_devices = self.unifi.get_devices()
                 self._process_unifi(unifi_devices, suppressions)
 
                 self._process_ping_hosts(suppressions)

requirements.txt

@@ -1,5 +1,6 @@
 flask>=2.2.0
 gunicorn>=20.1.0
+ldap3>=2.9
 pymysql>=1.1.0
 requests>=2.31.0
 urllib3>=2.0.0

static/app.js

@@ -33,7 +33,9 @@ function _toIso(s) {
 // ── Dashboard auto-refresh ────────────────────────────────────────────
 async function refreshAll() {
   const refreshBtn = document.querySelector('[data-action="refresh"]');
+  const spinner    = document.getElementById('refresh-spinner');
   if (refreshBtn) refreshBtn.classList.add('is-loading');
+  if (spinner)    spinner.style.display = '';
   try {
     const [netResult, statusResult] = await Promise.allSettled([
       lt.api.get('/api/network'),
@@ -45,17 +47,18 @@ async function refreshAll() {
       updateUnifiTable(net.unifi || []);
       updateTopology(net.hosts || {});
     } else {
-      console.warn('Network API failed:', netResult.reason);
+      showToast('Network data unavailable', 'warning');
     }
     if (statusResult.status === 'fulfilled') {
       const status = statusResult.value;
       updateEventsTable(status.events || [], status.total_active);
       updateStatusBar(status.summary || {}, status.last_check || '', status.daemon_ok);
     } else {
-      console.warn('Status API failed:', statusResult.reason);
+      showToast('Status data unavailable', 'warning');
     }
   } finally {
     if (refreshBtn) refreshBtn.classList.remove('is-loading');
+    if (spinner)    spinner.style.display = 'none';
   }
 }
 
@@ -78,6 +81,13 @@ function updateStatusBar(summary, lastCheck, daemonOk) {
   else if (warnCount) document.title = `(${warnCount} WARN) GANDALF`;
   else                document.title = 'GANDALF';
 
+  const alertBadge = document.getElementById('alert-count-badge');
+  if (alertBadge) {
+    const total = critCount + warnCount;
+    alertBadge.textContent = total;
+    alertBadge.style.display = total ? '' : 'none';
+  }
+
   // Stale data banner: warn if last_check is older than 15 minutes
   let staleBanner = document.getElementById('stale-banner');
   if (lastCheck) {
@@ -86,11 +96,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';
@@ -130,14 +142,17 @@ function updateTopology(hosts) {
     const host = hosts[name];
     if (!host) return;
     node.className = node.className.replace(/topo-v2-status-(up|down|degraded|unknown)/g, '');
-    node.className = node.className.replace(/topo-status-(up|down|degraded|unknown)/g, '');
     node.classList.add(`topo-v2-status-${host.status}`);
-    node.classList.add(`topo-status-${host.status}`);
     const badge = node.querySelector('.topo-badge');
     if (badge) {
       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');
+    });
   });
 }
 
@@ -148,12 +163,13 @@ function updateUnifiTable(devices) {
   tbody.innerHTML = devices.map(d => {
     const statusClass = d.connected ? '' : 'row-critical';
     const dotClass    = d.connected ? 'dot-up' : 'dot-down';
-    const statusText  = d.connected ? 'Online' : 'Offline';
+    const statusText  = d.connected ? 'ONLINE' : 'OFFLINE';
     const suppressBtn = !d.connected
       ? `<button class="lt-btn lt-btn-ghost lt-btn-sm btn-suppress"
             data-sup-type="unifi_device"
             data-sup-name="${lt.escHtml(d.name)}"
-            data-sup-detail="">🔕 Suppress</button>`
+            data-sup-detail=""
+            aria-label="Suppress alerts for ${lt.escHtml(d.name)}">🔕 Suppress</button>`
       : '';
     return `
       <tr class="${statusClass}">
@@ -171,9 +187,9 @@ function updateEventsTable(events, totalActive) {
   const wrap = document.getElementById('events-table-wrap');
   if (!wrap) return;
 
-  const active = events.filter(e => e.severity !== 'info');
+  const active = (events || []).filter(e => e.severity !== 'info');
   if (!active.length) {
-    wrap.innerHTML = '<p class="empty-state">No active alerts ✔</p>';
+    wrap.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">✔</div><div class="lt-empty-state-title">No active alerts</div></div>';
     return;
   }
 
@@ -207,7 +223,8 @@ function updateEventsTable(events, totalActive) {
           <button class="lt-btn lt-btn-ghost lt-btn-sm btn-suppress"
             data-sup-type="${lt.escHtml(supType)}"
             data-sup-name="${lt.escHtml(e.target_name)}"
-            data-sup-detail="${lt.escHtml(e.target_detail||'')}">🔕</button>
+            data-sup-detail="${lt.escHtml(e.target_detail||'')}"
+            aria-label="Suppress alert for ${lt.escHtml(e.target_name)}">🔕</button>
         </td>
       </tr>`;
   }).join('');

static/style.css

@@ -5,6 +5,12 @@
    This file adds only gandalf-specific components.
    ══════════════════════════════════════════════════════════════════════ */
 
+/* ── lt-avatar image overlay (base.css compat shim) ───────────────── */
+/* Older base.css missing position:relative + position:absolute on img */
+.lt-avatar { position: relative; }
+.lt-avatar img { position: absolute; inset: 0; }
+.lt-avatar img.lt-avatar-img-err { display: none; }
+
 /* ── Variable aliases bridging to base.css palette ────────────────── */
 :root {
   /* Short names used throughout custom components */
@@ -54,6 +60,28 @@
   --glow-cyan:   none;
   --glow-xl:     none;
 }
+[data-theme="light"] .topology {
+  background-image: radial-gradient(circle, rgba(0,100,160,0.07) 1px, transparent 1px);
+}
+[data-theme="light"] .topo-vc-label {
+  background: rgba(235,238,242,.88);
+}
+
+/* ── Header overlap fix ───────────────────────────────────────────
+   .lt-container's padding shorthand resets padding-top, defeating
+   .lt-main's padding-top. The combined selector restores it. */
+.lt-main.lt-container {
+  padding-top: calc(var(--header-height) + var(--space-lg));
+}
+@media (max-height: 500px) and (orientation: landscape) {
+  .lt-main.lt-container { padding-top: calc(42px + var(--space-md)); }
+}
+@media (max-width: 767px) {
+  .lt-main.lt-container { padding-top: calc(50px + var(--space-md)); }
+}
+@media (max-width: 479px) {
+  .lt-main.lt-container { padding-top: calc(46px + var(--space-sm)); }
+}
 
 /* ── Refresh button loading state ────────────────────────────────── */
 [data-action="refresh"].is-loading {
@@ -132,6 +160,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); }
@@ -172,22 +201,14 @@
   border: 1px solid;
   letter-spacing: .04em;
 }
-.chip-critical { color: var(--red);    border-color: var(--red);    text-shadow: var(--glow-red); animation: pulse-glow 2s infinite; }
+.chip-critical { color: var(--red);    border-color: var(--red);    text-shadow: var(--glow-red); animation: topo-pulse-down 2s ease-in-out infinite; }
 .chip-warning  { color: var(--orange); border-color: var(--orange); }
 .chip-ok       { color: var(--green);  border-color: var(--green-muted); text-shadow: var(--glow); }
 .status-meta { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
 .last-check  { font-size: .72em; color: var(--text-muted); }
 
 /* ── Stale monitoring banner ──────────────────────────────────────── */
-.stale-banner {
+/* .stale-banner replaced by lt-alert--warning */
-  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;
-}
 
 /* ── Error / empty state containers ─────────────────────────────────  */
 .error-state {
@@ -224,12 +245,27 @@
   border: 1px solid var(--border-color);
   padding: 12px;
   position: relative;
+  overflow: hidden;
   transition: border-color .2s, box-shadow .2s;
 }
+/* Corner accent triangle — mirrors test code's status-tinted corner */
+.host-card::after {
+  content: '';
+  position: absolute;
+  top: 0; right: 0;
+  width: 0; height: 0;
+  border-style: solid;
+  border-width: 0 10px 10px 0;
+  border-color: transparent var(--border-color) transparent transparent;
+  transition: border-color .2s;
+}
 .host-card:hover { border-color: var(--accent-orange); box-shadow: 0 0 12px rgba(255,107,0,.1); }
 .host-card-up       { border-left: 3px solid var(--green); }
+.host-card-up::after    { border-color: transparent rgba(0,255,136,.45) transparent transparent; }
 .host-card-down     { border-left: 3px solid var(--red);   box-shadow: inset 3px 0 10px rgba(255,45,85,.08); }
+.host-card-down::after  { border-color: transparent rgba(255,45,85,.55) transparent transparent; }
 .host-card-degraded { border-left: 3px solid var(--orange); }
+.host-card-degraded::after { border-color: transparent rgba(255,107,0,.45) transparent transparent; }
 .host-card-header   { margin-bottom: 8px; }
 .host-name-row      { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
 .host-name { font-weight: bold; font-size: .88em; color: var(--amber); letter-spacing: .04em; }
@@ -293,7 +329,9 @@
 
 /* ── Topology diagram ─────────────────────────────────────────────── */
 .topology {
-  background: var(--bg2);
+  background-color: var(--bg2);
+  background-image: radial-gradient(circle, rgba(0,212,255,0.07) 1px, transparent 1px);
+  background-size: 22px 22px;
   border: 1px solid var(--border-color);
   padding: 20px 16px 16px;
   margin-bottom: 16px;
@@ -336,9 +374,18 @@
   background: linear-gradient(to bottom, var(--cyan), var(--green));
   opacity: .7;
 }
+/* Blurred copy of the wire for a soft glow halo */
+.topo-vc-wire::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: inherit;
+  filter: blur(5px);
+  opacity: .5;
+}
 .topo-vc-label {
   position: absolute;
-  left: calc(50% + 6px);
+  left: calc(50% + 7px);
   top: 50%;
   transform: translateY(-50%);
   font-size: .58em;
@@ -346,6 +393,8 @@
   white-space: nowrap;
   letter-spacing: .06em;
   font-family: var(--font);
+  background: rgba(3,5,8,.7);
+  padding: 1px 4px;
 }
 
 .topo-v2-node {
@@ -362,26 +411,45 @@
   min-width: 110px;
   text-align: center;
   transition: border-color .2s, box-shadow .2s;
+  overflow: hidden;
 }
+/* Top highlight strip — color matches node type / status */
+.topo-v2-node::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 2px;
+  background: currentColor;
+  opacity: .4;
+}
+.topo-v2-status-up.topo-v2-node::before       { background: var(--green);  opacity: .65; }
+.topo-v2-status-down.topo-v2-node::before     { background: var(--red);    opacity: .75; }
+.topo-v2-status-degraded.topo-v2-node::before { background: var(--orange); opacity: .65; }
+.topo-v2-status-unknown.topo-v2-node::before  { opacity: .15; }
 .topo-v2-icon  { font-size: 1.3em; line-height: 1; }
 .topo-v2-label { font-weight: bold; letter-spacing: .04em; }
 .topo-v2-sub   { font-size: .58em; color: var(--text-muted); letter-spacing: .02em; }
 .topo-v2-vlan  { font-size: .54em; color: var(--cyan); opacity: .75; }
 
-.topo-v2-internet { border-color: var(--cyan);  color: var(--cyan);  text-shadow: var(--glow-cyan); }
+.topo-v2-internet { border-color: var(--cyan);  color: var(--cyan);  text-shadow: var(--glow-cyan); box-shadow: 0 0 12px rgba(0,212,255,.12); }
-.topo-v2-router   { border-color: var(--cyan);  color: var(--cyan);  text-shadow: var(--glow-cyan); }
+.topo-v2-router   { border-color: var(--cyan);  color: var(--cyan);  text-shadow: var(--glow-cyan); box-shadow: 0 0 12px rgba(0,212,255,.14); }
-.topo-v2-switch   { border-color: var(--amber); color: var(--amber); text-shadow: var(--glow-amber); }
+.topo-v2-switch   { border-color: var(--amber); color: var(--amber); text-shadow: var(--glow-amber); box-shadow: 0 0 12px rgba(255,179,0,.12); }
 .topo-v2-host     { border-color: var(--border-color); color: var(--text); cursor: default; }
 
+@keyframes topo-pulse-down {
+  0%,100% { box-shadow: 0 0 6px rgba(255,45,85,.3); }
+  50%     { box-shadow: 0 0 18px rgba(255,45,85,.75), 0 0 30px rgba(255,45,85,.2); }
+}
+
 .topo-v2-status-up       { border-color: var(--green);  box-shadow: 0 0 8px rgba(0,255,136,.2); }
-.topo-v2-status-down     { border-color: var(--red);    box-shadow: 0 0 8px rgba(255,45,85,.35); animation: pulse-glow 2s infinite; }
+.topo-v2-status-down     { border-color: var(--red);    animation: topo-pulse-down 2s ease-in-out infinite; }
 .topo-v2-status-degraded { border-color: var(--orange); box-shadow: 0 0 8px rgba(255,107,0,.2); }
 .topo-v2-status-unknown  { border-color: var(--border-color); }
 .topo-v2-offrack         { border-style: dashed !important; }
 
 .topo-badge { font-size: .68em; padding: 1px 5px; border: 1px solid; letter-spacing: .03em; }
 .topo-badge-up       { color: var(--green);      border-color: var(--green);      text-shadow: var(--glow); }
-.topo-badge-down     { color: var(--red);        border-color: var(--red);        animation: pulse-glow 1.5s infinite; }
+.topo-badge-down     { color: var(--red);        border-color: var(--red);        animation: topo-pulse-down 1.5s ease-in-out infinite; }
 .topo-badge-degraded { color: var(--orange);     border-color: var(--orange); }
 .topo-badge-unknown  { color: var(--text-muted); border-color: var(--border-color); }
 
@@ -397,9 +465,18 @@
   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;
+  transition: none !important;
+  animation: wire-dash-anim .7s linear infinite;
+}
+
 /* Bus rails */
 .topo-bus-section {
   width: 100%;
@@ -418,8 +495,9 @@
   flex: 1;
   height: 2px;
   background: var(--green);
-  opacity: .45;
+  opacity: .55;
   margin: 0 4px;
+  box-shadow: 0 0 6px rgba(0,255,136,.4);
 }
 .topo-bus-10g-label {
   font-size: .56em;
@@ -482,7 +560,7 @@
   color: var(--text-muted);
   font-family: var(--font);
 }
-.topo-legend-line-10g { width: 24px; height: 2px; background: var(--green); display: inline-block; }
+.topo-legend-line-10g { width: 24px; height: 2px; background: var(--green); display: inline-block; box-shadow: 0 0 4px rgba(0,255,136,.5); }
 .topo-legend-line-1g  { width: 24px; height: 0; border-top: 2px dashed var(--amber); display: inline-block; }
 .topo-legend-line-wan { width: 24px; height: 2px; background: linear-gradient(to right, var(--cyan), var(--green)); display: inline-block; }
 
@@ -557,15 +635,14 @@
 .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-row .lt-progress { flex: 1; height: 5px; }
-.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-value    { font-size: .7em; color: var(--text-dim); width: 68px; text-align: right; flex-shrink: 0; }
+/* Amber variant for lt-progress (65-85% utilisation warning) */
+.lt-progress--amber .lt-progress-bar { background: var(--amber); box-shadow: 0 0 5px var(--amber), 0 0 10px rgba(255,179,0,.35); }
 
 /* SFP / optical panel */
 .sfp-panel {
@@ -665,7 +742,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 {
@@ -753,7 +830,7 @@
 .switch-port-block.poe-active:hover { box-shadow: var(--glow-amber); }
 .switch-port-block.uplink           { background: var(--cyan-dim); border-color: var(--cyan); color: var(--cyan); }
 .switch-port-block.uplink:hover     { box-shadow: var(--glow-cyan); }
-.switch-port-block.selected         { outline: 2px solid #fff; outline-offset: 1px; }
+.switch-port-block.selected         { outline: 2px solid rgba(255,255,255,.85); outline-offset: 1px; box-shadow: 0 0 8px rgba(255,255,255,.5); }
 .port-num   { line-height: 1; font-weight: bold; }
 .port-speed { font-size: .72em; opacity: .7; line-height: 1; font-weight: normal; }
 .port-lldp  { font-size: .62em; opacity: .65; line-height: 1; max-width: 32px; overflow: hidden; white-space: nowrap; text-overflow: clip; font-weight: normal; }
@@ -822,17 +899,9 @@
   transition: all .15s;
 }
 .panel-close:hover { color: var(--red); border-color: var(--red); }
-.panel-section-title {
+/* Inspector panel uses lt-divider — compact spacing overrides */
-  font-size: .62em;
+.inspector-panel .lt-divider { margin: 8px 0 4px; }
-  font-weight: bold;
+.inspector-panel .lt-divider-label { color: var(--amber); font-size: .6em; }
-  color: var(--amber);
-  text-transform: uppercase;
-  letter-spacing: .1em;
-  margin: 10px 0 5px;
-  padding-bottom: 3px;
-  border-bottom: 1px solid rgba(255,107,0,.12);
-}
-.panel-section-title:first-of-type { margin-top: 0; }
 .panel-row {
   display: flex;
   justify-content: space-between;

templates/base.html

@@ -133,6 +133,7 @@
       {% set _initials = (_words[0][0] ~ (_words[1][0] if _words|length > 1 else ''))|upper %}
       <div class="lt-avatar lt-avatar--sm {{ _uname | avatar_color }}"
            aria-hidden="true" title="{{ _uname }}">
+        <img src="{{ url_for('api_avatar') }}" alt="" class="lt-avatar-img">
         <span class="lt-avatar-initials">{{ _initials }}</span>
       </div>
       <span class="lt-header-user">{{ _uname }}</span>
@@ -245,6 +246,13 @@
     lt.keys.on('r', function() {
       if (typeof refreshAll === 'function') refreshAll();
     });
+
+    // Avatar image error fallback — hide broken img, reveal initials beneath
+    document.addEventListener('error', function(e) {
+      if (e.target.tagName === 'IMG' && e.target.closest('.lt-avatar')) {
+        e.target.classList.add('lt-avatar-img-err');
+      }
+    }, true);
   </script>
 
 </body>

templates/index.html

@@ -6,19 +6,23 @@
 <!-- ── Status bar ──────────────────────────────────────────────────── -->
 <div class="status-bar">
   <div class="status-chips">
+    {% if not daemon_ok %}
+    <span class="chip chip-critical">⚠ MONITOR OFFLINE</span>
+    {% endif %}
     {% if summary.critical %}
     <span class="chip chip-critical">● {{ summary.critical }} CRITICAL</span>
     {% endif %}
     {% if summary.warning %}
     <span class="chip chip-warning">● {{ summary.warning }} WARNING</span>
     {% endif %}
-    {% if not summary.critical and not summary.warning %}
+    {% if daemon_ok and not summary.critical and not summary.warning %}
     <span class="chip chip-ok">✔ ALL SYSTEMS NOMINAL</span>
     {% endif %}
   </div>
   <div class="status-meta">
-    <span class="last-check" id="last-check">{{ last_check }}</span>
+    <span class="last-check" id="last-check" data-tooltip="Last monitor poll timestamp" data-tooltip-pos="bottom">{{ last_check }}</span>
-    <button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="refresh">↻ REFRESH</button>
+    <span class="lt-spinner lt-spinner--sm lt-spinner--cyan" id="refresh-spinner" style="display:none"></span>
+    <button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="refresh" data-tooltip="Refresh all data now" data-tooltip-pos="bottom">↻ REFRESH</button>
   </div>
 </div>
 
@@ -46,7 +50,7 @@
 
     <!-- WAN wire: cyan → green gradient, labeled -->
     <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:linear-gradient(to bottom,var(--cyan),var(--cyan)); opacity:.55;"></div>
+      <div class="topo-vc-wire" style="background:linear-gradient(to bottom,var(--cyan),rgba(0,212,255,.3)); opacity:.7;"></div>
       <span class="topo-vc-label">WAN · 10G SFP+</span>
     </div>
 
@@ -138,8 +142,8 @@
         <div class="topo-v2-host-wrap">
           <!-- dual-homing wires: 10G solid green + 1G dashed amber -->
           <div class="topo-v2-host-wires">
-            <div class="topo-v2-wire-10g" title="10G SFP+ → USW-Agg"></div>
+            <div class="topo-v2-wire-10g" data-host="{{ hname }}" title="10G SFP+ → USW-Agg"></div>
-            <div class="topo-v2-wire-1g"  title="1G → Pro 24 PoE"></div>
+            <div class="topo-v2-wire-1g"  data-host="{{ hname }}" title="1G → Pro 24 PoE"></div>
           </div>
           <!-- host box -->
           <div class="topo-v2-node topo-v2-host topo-host topo-v2-status-{{ st }}{{ ' topo-v2-offrack' if off_rack else '' }}"
@@ -215,7 +219,11 @@
       </div>
     </div>
     {% else %}
-    <p class="empty-state">No host data yet – monitor is initializing.</p>
+    <div class="lt-empty-state lt-empty-state--sm">
+      <div class="lt-empty-state-icon">⌛</div>
+      <div class="lt-empty-state-title">No host data yet</div>
+      <div class="lt-empty-state-body">The monitor daemon may still be starting up.</div>
+    </div>
     {% endfor %}
   </div>
 </section>
@@ -272,9 +280,8 @@
 <section class="g-section">
   <div class="g-section-header">
     <h2 class="g-section-title">Active Alerts</h2>
-    {% if summary.critical or summary.warning %}
+    <span class="g-section-badge" id="alert-count-badge"
-    <span class="g-section-badge">{{ (summary.critical or 0) + (summary.warning or 0) }}</span>
+          {% if not summary.critical and not summary.warning %}style="display:none"{% endif %}>{{ (summary.critical or 0) + (summary.warning or 0) }}</span>
-    {% endif %}
     <div class="g-section-actions">
       <div class="events-filter-bar">
         <input type="search" class="lt-input lt-input-sm" id="events-search"
@@ -297,14 +304,14 @@
         <caption class="lt-sr-only">Active network alerts</caption>
         <thead>
           <tr>
-            <th>Sev</th>
+            <th data-tooltip="Alert severity level" data-tooltip-pos="bottom">Sev</th>
             <th>Type</th>
             <th>Target</th>
             <th>Detail</th>
             <th>Description</th>
-            <th>First Seen</th>
+            <th data-tooltip="When this alert was first raised" data-tooltip-pos="bottom">First Seen</th>
-            <th>Last Seen</th>
+            <th data-tooltip="Most recent check failure" data-tooltip-pos="bottom">Last Seen</th>
-            <th>Failures</th>
+            <th data-tooltip="Consecutive check failures since first seen" data-tooltip-pos="bottom">Failures</th>
             <th>Ticket</th>
             <th>Actions</th>
           </tr>
@@ -336,18 +343,26 @@
                       data-sup-type="{{ 'unifi_device' if e.event_type == 'unifi_device_offline' else 'interface' if e.event_type == 'interface_down' else 'host' }}"
                       data-sup-name="{{ e.target_name }}"
                       data-sup-detail="{{ e.target_detail or '' }}"
-                      title="Suppress">🔕</button>
+                      title="Suppress" aria-label="Suppress alert for {{ e.target_name }}">🔕</button>
             </td>
           </tr>
           {% endif %}
           {% else %}
-          <tr><td colspan="10" class="empty-state">No active alerts ✔</td></tr>
+          <tr><td colspan="10">
+            <div class="lt-empty-state lt-empty-state--sm">
+              <div class="lt-empty-state-icon">✔</div>
+              <div class="lt-empty-state-title">No active alerts</div>
+            </div>
+          </td></tr>
           {% endfor %}
         </tbody>
       </table>
     </div>
     {% else %}
-    <p class="empty-state">No active alerts ✔</p>
+    <div class="lt-empty-state lt-empty-state--sm">
+      <div class="lt-empty-state-icon">✔</div>
+      <div class="lt-empty-state-title">No active alerts</div>
+    </div>
     {% endif %}
   </div>
 </section>
@@ -399,11 +414,11 @@
       <h3 class="lt-modal-title" id="suppress-modal-title">Suppress Alert</h3>
       <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
     </div>
-    <form id="suppress-form" onsubmit="submitSuppress(event)">
+    <form id="suppress-form">
       <div class="lt-modal-body">
         <div class="lt-form-group" style="margin-bottom:12px">
           <label class="lt-label" for="sup-type">Target Type</label>
-          <select class="lt-select" id="sup-type" name="target_type" onchange="updateSuppressForm()">
+          <select class="lt-select" id="sup-type" name="target_type">
             <option value="host">Host (all interfaces)</option>
             <option value="interface">Specific Interface</option>
             <option value="unifi_device">UniFi Device</option>
@@ -449,6 +464,8 @@
 {% block scripts %}
 <script>
   lt.autoRefresh.start(refreshAll, 30000);
+  document.getElementById('suppress-form')?.addEventListener('submit', submitSuppress);
+  document.getElementById('sup-type')?.addEventListener('change', updateSuppressForm);
 
   function updateEventAges() {
     document.querySelectorAll('.event-age[data-ts]').forEach(el => {

templates/inspector.html

@@ -114,8 +114,8 @@ function portBlockHtml(idx, port, swName, sfpBlock) {
   const speedHtml = speedTxt ? `<span class="port-speed">${speedTxt}</span>` : '';
   return `<div class="switch-port-block ${state}${sfpCls}"
     data-switch="${escHtml(swName)}" data-port-idx="${idx}"
-    title="${title}"
+    title="${title}" aria-label="${title}"
-    onclick="selectPort(this)"><span class="port-num">${numLabel}</span>${speedHtml}${lldpHtml}</div>`;
+    data-action="select-port"><span class="port-num">${numLabel}</span>${speedHtml}${lldpHtml}</div>`;
 }
 
 // ── Chassis legend HTML ──────────────────────────────────────────────────
@@ -169,8 +169,8 @@ function renderChassis(swName, sw) {
         const lldpHtml  = lldpName ? `<span class="port-lldp">${lldpName}</span>` : '';
         chassisHtml += `<div class="switch-port-block ${state}${sfpCls}"
           data-switch="${escHtml(swName)}" data-port-idx="${idx}"
-          title="${title}"
+          title="${title}" aria-label="${title}"
-          onclick="selectPort(this)"><span class="port-num">${idx}</span>${speedHtml}${lldpHtml}</div>`;
+          data-action="select-port"><span class="port-num">${idx}</span>${speedHtml}${lldpHtml}</div>`;
       }
       chassisHtml += '</div>';
     }
@@ -259,7 +259,7 @@ function renderPanel(swName, idx) {
     const poeMaxStr = d.poe_max_power != null ? ` / max ${d.poe_max_power.toFixed(1)}W` : '';
     const poeCurStr = (d.poe_power != null && d.poe_power > 0) ? ` / draw <span class="val-amber">${d.poe_power.toFixed(1)}W</span>` : '';
     poeHtml = `
-      <div class="panel-section-title">PoE</div>
+      <div class="lt-divider"><span class="lt-divider-label">PoE</span></div>
       <div class="panel-row"><span class="panel-label">Class</span><span class="panel-val">class ${d.poe_class}${poeMaxStr}</span></div>
       ${d.poe_power != null ? `<div class="panel-row"><span class="panel-label">Draw</span><span class="panel-val">${d.poe_power > 0 ? `<span class="val-amber">${d.poe_power.toFixed(1)}W</span>` : '0W'}</span></div>` : ''}
       ${d.poe_mode ? `<div class="panel-row"><span class="panel-label">Mode</span><span class="panel-val">${escHtml(d.poe_mode)}</span></div>` : ''}`;
@@ -269,16 +269,16 @@ function renderPanel(swName, idx) {
   let trafficHtml = '';
   if (d.tx_bytes_rate != null || d.rx_bytes_rate != null) {
     trafficHtml = `
-      <div class="panel-section-title">Traffic</div>
+      <div class="lt-divider"><span class="lt-divider-label">Traffic</span></div>
-      <div class="panel-row"><span class="panel-label">TX</span><span class="panel-val">${fmtRate(d.tx_bytes_rate)}</span></div>
+      <div class="panel-row"><span class="panel-label" data-tooltip="Transmit — outgoing from this port">TX</span><span class="panel-val">${fmtRate(d.tx_bytes_rate)}</span></div>
-      <div class="panel-row"><span class="panel-label">RX</span><span class="panel-val">${fmtRate(d.rx_bytes_rate)}</span></div>`;
+      <div class="panel-row"><span class="panel-label" data-tooltip="Receive — incoming to this port">RX</span><span class="panel-val">${fmtRate(d.rx_bytes_rate)}</span></div>`;
   }
 
   // Errors / drops section
   let errHtml = '';
   if (d.tx_errs_rate != null || d.rx_errs_rate != null) {
     errHtml = `
-      <div class="panel-section-title">Errors / Drops</div>
+      <div class="lt-divider"><span class="lt-divider-label">Errors / Drops</span></div>
       <div class="panel-row"><span class="panel-label">TX Err</span><span class="panel-val">${fmtErrors(d.tx_errs_rate)}</span></div>
       <div class="panel-row"><span class="panel-label">RX Err</span><span class="panel-val">${fmtErrors(d.rx_errs_rate)}</span></div>
       <div class="panel-row"><span class="panel-label">TX Drop</span><span class="panel-val">${fmtErrors(d.tx_drops_rate)}</span></div>
@@ -291,7 +291,7 @@ function renderPanel(swName, idx) {
   if (d.lldp && d.lldp.system_name) {
     const l = d.lldp;
     lldpHtml = `
-      <div class="panel-section-title">LLDP Neighbor</div>
+      <div class="lt-divider"><span class="lt-divider-label">LLDP Neighbor</span></div>
       <div class="panel-row"><span class="panel-label">System</span><span class="panel-val val-cyan">${escHtml(l.system_name)}</span></div>
       ${l.port_id  ? `<div class="panel-row"><span class="panel-label">Port</span><span class="panel-val">${escHtml(l.port_id)}</span></div>` : ''}
       ${l.port_desc ? `<div class="panel-row"><span class="panel-label">Port Desc</span><span class="panel-val">${escHtml(l.port_desc)}</span></div>` : ''}
@@ -318,7 +318,7 @@ function renderPanel(swName, idx) {
     _apiData.hosts && _apiData.hosts[d.lldp.system_name]);
   const diagHtml = hasDiagTarget ? `
     <div class="diag-bar">
-      <button class="btn-diag" onclick="runDiagnostic('${escHtml(swName)}', ${idx})">Run Link Diagnostics</button>
+      <button class="btn-diag" data-action="run-diagnostic" data-sw="${escHtml(swName)}" data-idx="${idx}">Run Link Diagnostics</button>
       <span class="diag-status" id="diag-status"></span>
     </div>
     <div class="diag-results" id="diag-results"></div>` : '';
@@ -330,14 +330,14 @@ function renderPanel(swName, idx) {
         <span class="panel-port-name">${escHtml(d.name)}</span>${isUplinkBadge}
         <div class="panel-meta">${escHtml(swName)} · port #${idx}</div>
       </div>
-      <button class="panel-close" onclick="closePanel()">✕</button>
+      <button class="panel-close" data-action="close-panel" aria-label="Close panel">✕</button>
     </div>
 
-    <div class="panel-section-title">Link</div>
+    <div class="lt-divider"><span class="lt-divider-label">Link</span></div>
     <div class="panel-row"><span class="panel-label">Status</span><span class="panel-val">${upStr}</span></div>
     <div class="panel-row"><span class="panel-label">Speed</span><span class="panel-val">${speedStr}</span></div>
-    <div class="panel-row"><span class="panel-label">Duplex</span><span class="panel-val">${duplexStr}</span></div>
+    <div class="panel-row"><span class="panel-label" data-tooltip="Full = simultaneous send/receive. Half = one direction at a time.">Duplex</span><span class="panel-val">${duplexStr}</span></div>
-    <div class="panel-row"><span class="panel-label">Auto-neg</span><span class="panel-val val-neutral">${autoneg}</span></div>
+    <div class="panel-row"><span class="panel-label" data-tooltip="Autonegotiation: NIC and switch automatically agree speed and duplex.">Auto-neg</span><span class="panel-val val-neutral">${autoneg}</span></div>
     <div class="panel-row"><span class="panel-label">Media</span><span class="panel-val">${escHtml(mediaStr)}</span></div>
 
     ${poeHtml}
@@ -392,7 +392,7 @@ function buildPathDebug(swName, swPort, serverName, ifaceName, svrData) {
     : '';
 
   return `
-    <div class="panel-section-title">Path Debug <span class="path-conn-type">${escHtml(connType)}</span></div>
+    <div class="lt-divider"><span class="lt-divider-label">Path Debug · ${escHtml(connType)}</span></div>
     ${duplexWarnHtml}${speedWarnHtml}
     <div class="path-debug-cols">
       <div class="path-col">
@@ -468,6 +468,20 @@ lt.keys.on('Escape', () => {
   if (document.getElementById('inspector-panel').classList.contains('open')) closePanel();
 });
 
+document.addEventListener('click', e => {
+  const portBlock = e.target.closest('[data-action="select-port"]');
+  if (portBlock) { selectPort(portBlock); return; }
+
+  const closeBtn = e.target.closest('[data-action="close-panel"]');
+  if (closeBtn) { closePanel(); return; }
+
+  const diagBtn = e.target.closest('[data-action="run-diagnostic"]');
+  if (diagBtn) { runDiagnostic(diagBtn.dataset.sw, parseInt(diagBtn.dataset.idx, 10)); return; }
+
+  const toggleDiag = e.target.closest('[data-action="toggle-diag"]');
+  if (toggleDiag) { toggleDiag.parentElement.classList.toggle('diag-open'); return; }
+});
+
 // ── Link Diagnostics ─────────────────────────────────────────────────
 let _diagPollTimer = null;
 
@@ -635,7 +649,7 @@ function renderDiagnosticResults(d, container) {
     }).join('');
     nicStatHtml = `
       <div class="diag-section diag-collapsible">
-        <div class="diag-section-header diag-toggle" onclick="this.parentElement.classList.toggle('diag-open')">
+        <div class="diag-section-header diag-toggle" data-action="toggle-diag">
           ethtool -S (NIC stats) <span class="diag-toggle-hint">[expand]</span>
         </div>
         <div class="diag-section-body">
@@ -711,7 +725,7 @@ function renderDiagnosticResults(d, container) {
     }).join('');
     dmesgHtml = `
       <div class="diag-section diag-collapsible">
-        <div class="diag-section-header diag-toggle" onclick="this.parentElement.classList.toggle('diag-open')">
+        <div class="diag-section-header diag-toggle" data-action="toggle-diag">
           Kernel Events (dmesg) <span class="diag-toggle-hint">[expand]</span>
         </div>
         <div class="diag-section-body">

templates/links.html

@@ -38,6 +38,12 @@ function fmtRateBar(bytesPerSec, linkSpeedMbps) {
   return Math.min(100, (mbps / linkSpeedMbps) * 100);
 }
 
+function trafficBarClass(pct, isTx) {
+  if (pct > 85) return 'lt-progress--red';
+  if (pct > 65) return 'lt-progress--amber';
+  return isTx ? '' : 'lt-progress--cyan';
+}
+
 function fmtSpeed(mbps) {
   if (mbps === null || mbps === undefined) return '–';
   if (mbps >= 1000) return (mbps/1000).toFixed(0) + ' Gbps';
@@ -147,26 +153,26 @@ function renderIfaceCard(ifaceName, d) {
         </div>
         <div class="sfp-grid">
           <div class="sfp-stat">
-            <span class="sfp-stat-label">Temp</span>
+            <span class="sfp-stat-label" data-tooltip="SFP module temperature. Normal: below 70°C. Warn: 70–85°C. Critical: above 85°C.">Temp</span>
             <span class="sfp-stat-value ${tmpClass}">${fmtTemp(s.temp_c)}</span>
           </div>
           <div class="sfp-stat">
-            <span class="sfp-stat-label">Voltage</span>
+            <span class="sfp-stat-label" data-tooltip="SFP supply voltage. Normal: 3.1–3.5V.">Voltage</span>
             <span class="sfp-stat-value ${vClass}">${fmtVoltage(s.voltage_v)}</span>
           </div>
           <div class="sfp-stat">
-            <span class="sfp-stat-label">Bias</span>
+            <span class="sfp-stat-label" data-tooltip="Laser bias current in mA. High values may indicate end-of-life laser diode.">Bias</span>
             <span class="sfp-stat-value">${fmtBias(s.bias_ma)}</span>
           </div>
           <div class="sfp-stat">
-            <span class="sfp-stat-label">TX Power</span>
+            <span class="sfp-stat-label" data-tooltip="Optical transmit power in dBm. Typical good range: -3 to -9 dBm.">TX Power</span>
             <span class="sfp-stat-value ${txClass}">${fmtPower(s.tx_power_dbm)}</span>
             <div class="power-row">
               <div class="power-track"><div class="power-fill ${txClass === 'val-good' ? 'power-ok' : txClass === 'val-warn' ? 'power-warn' : 'power-crit'}" style="width:${txPct2}%"></div></div>
             </div>
           </div>
           <div class="sfp-stat">
-            <span class="sfp-stat-label">RX Power</span>
+            <span class="sfp-stat-label" data-tooltip="Optical receive power in dBm. Typical good range: -3 to -18 dBm. Below -20 dBm may indicate dirty/damaged fiber.">RX Power</span>
             <span class="sfp-stat-value ${rxClass}">${fmtPower(s.rx_power_dbm)}</span>
             <div class="power-row">
               <div class="power-track"><div class="power-fill ${rxClass === 'val-good' ? 'power-ok' : rxClass === 'val-warn' ? 'power-warn' : 'power-crit'}" style="width:${rxPct2}%"></div></div>
@@ -174,7 +180,7 @@ function renderIfaceCard(ifaceName, d) {
           </div>
           ${s.rx_power_dbm != null && s.tx_power_dbm != null ? `
           <div class="sfp-stat">
-            <span class="sfp-stat-label">RX−TX Δ</span>
+            <span class="sfp-stat-label" data-tooltip="Insertion loss: difference between transmit and receive power. Large negative values indicate fiber loss or connector issues.">RX−TX Δ</span>
             <span class="sfp-stat-value">${(s.rx_power_dbm - s.tx_power_dbm).toFixed(2)} dBm</span>
           </div>` : ''}
         </div>
@@ -195,43 +201,43 @@ function renderIfaceCard(ifaceName, d) {
           <span class="link-stat-value ${isDown ? 'val-crit' : 'val-good'}">${isDown ? 'DOWN' : 'UP'}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">Duplex</span>
+          <span class="link-stat-label" data-tooltip="Full = simultaneous send/receive at full speed. Half = one direction at a time, can cause collisions.">Duplex</span>
           <span class="link-stat-value">${fmtDuplex(d.duplex)}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">Auto-neg</span>
+          <span class="link-stat-label" data-tooltip="Autonegotiation: NIC and switch automatically agree on link speed and duplex mode.">Auto-neg</span>
           <span class="link-stat-value">${d.auto_neg == null ? '–' : d.auto_neg ? 'On' : 'Off'}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">Carrier Δ</span>
+          <span class="link-stat-label" data-tooltip="Carrier changes: number of times the link went up or down. High values indicate a flapping or unstable cable/SFP.">Carrier Δ</span>
           <span class="link-stat-value">${fmtCarrier(d.carrier_changes)}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">TX Err/s</span>
+          <span class="link-stat-label" data-tooltip="Transmit errors per second reported by the kernel network driver.">TX Err/s</span>
           <span class="link-stat-value">${fmtErrors(d.tx_errs_rate)}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">RX Err/s</span>
+          <span class="link-stat-label" data-tooltip="Receive errors per second reported by the kernel network driver.">RX Err/s</span>
           <span class="link-stat-value">${fmtErrors(d.rx_errs_rate)}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">TX Drop/s</span>
+          <span class="link-stat-label" data-tooltip="Transmit packets dropped per second (ring buffer full or driver overrun).">TX Drop/s</span>
           <span class="link-stat-value">${fmtErrors(d.tx_drops_rate)}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">RX Drop/s</span>
+          <span class="link-stat-label" data-tooltip="Receive packets dropped per second (ring buffer full or driver overrun).">RX Drop/s</span>
           <span class="link-stat-value">${fmtErrors(d.rx_drops_rate)}</span>
         </div>
       </div>
       <div class="traffic-section">
         <div class="traffic-row">
-          <span class="traffic-label">TX</span>
+          <span class="traffic-label" data-tooltip="Transmit — outgoing traffic from this server">TX</span>
-          <div class="traffic-bar-track"><div class="traffic-bar-fill traffic-tx" style="width:${txPct}%"></div></div>
+          <div class="lt-progress ${trafficBarClass(txPct, true)}"><div class="lt-progress-bar" style="width:${txPct}%"></div></div>
           <span class="traffic-value">${fmtRate(d.tx_bytes_rate)}</span>
         </div>
         <div class="traffic-row">
-          <span class="traffic-label">RX</span>
+          <span class="traffic-label" data-tooltip="Receive — incoming traffic to this server">RX</span>
-          <div class="traffic-bar-track"><div class="traffic-bar-fill traffic-rx" style="width:${rxPct}%"></div></div>
+          <div class="lt-progress ${trafficBarClass(rxPct, false)}"><div class="lt-progress-bar" style="width:${rxPct}%"></div></div>
           <span class="traffic-value">${fmtRate(d.rx_bytes_rate)}</span>
         </div>
       </div>
@@ -289,12 +295,12 @@ function renderPortCard(portName, d) {
       <div class="traffic-section">
         <div class="traffic-row">
           <span class="traffic-label">TX</span>
-          <div class="traffic-bar-track"><div class="traffic-bar-fill traffic-tx" style="width:${txPct}%"></div></div>
+          <div class="lt-progress ${trafficBarClass(txPct, true)}"><div class="lt-progress-bar" style="width:${txPct}%"></div></div>
           <span class="traffic-value">${fmtRate(d.tx_bytes_rate)}</span>
         </div>
         <div class="traffic-row">
           <span class="traffic-label">RX</span>
-          <div class="traffic-bar-track"><div class="traffic-bar-fill traffic-rx" style="width:${rxPct}%"></div></div>
+          <div class="lt-progress ${trafficBarClass(rxPct, false)}"><div class="lt-progress-bar" style="width:${rxPct}%"></div></div>
           <span class="traffic-value">${fmtRate(d.rx_bytes_rate)}</span>
         </div>
       </div>
@@ -327,7 +333,7 @@ function renderUnifiSwitches(unifiSwitches, dataUpdated) {
 
     return `
       <div class="link-host-panel" id="panel-${CSS.escape(swName)}">
-        <div class="link-host-title" onclick="togglePanel(this.closest('.link-host-panel'))">
+        <div class="link-host-title" data-action="toggle-panel">
           <span class="link-host-name">${escHtml(swName)}</span>
           <span class="link-host-ip">${escHtml(sw.ip || '')}</span>
           <span class="link-host-upd">${escHtml(sw.model || '')}${updStr ? ' · ' + updStr : ''}${poeLoad}</span>
@@ -415,8 +421,8 @@ function renderLinks(data) {
 
   parts.push(buildLinkSummary(hosts, unifiSwitches));
   parts.push(`<div class="link-collapse-bar">
-    <button class="lt-btn lt-btn-ghost lt-btn-sm" onclick="collapseAll()">Collapse All</button>
+    <button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="collapse-all">Collapse All</button>
-    <button class="lt-btn lt-btn-ghost lt-btn-sm" onclick="expandAll()">Expand All</button>
+    <button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="expand-all">Expand All</button>
   </div>`);
   parts.push('<div class="link-host-list">');
 
@@ -426,13 +432,13 @@ function renderLinks(data) {
       .map(([iname, d]) => renderIfaceCard(iname, d)).join('');
     const sample  = Object.values(ifaces)[0] || {};
     const ip      = sample.host_ip || '';
-    const updStr  = sample.updated
+    const updStr  = data.updated
-      ? new Date(sample.updated + (sample.updated.includes('Z') ? '' : 'Z')).toLocaleTimeString()
+      ? new Date(data.updated.replace(' UTC', 'Z').replace(' ', 'T')).toLocaleTimeString()
       : '';
 
     parts.push(`
       <div class="link-host-panel" id="panel-${CSS.escape(hostname)}">
-        <div class="link-host-title" onclick="togglePanel(this.closest('.link-host-panel'))">
+        <div class="link-host-title" data-action="toggle-panel">
           <span class="link-host-name">${escHtml(hostname)}</span>
           <span class="link-host-ip">${escHtml(ip)}</span>
           <span class="link-host-upd">${updStr}</span>
@@ -477,10 +483,12 @@ function checkLinksStale(updatedStr) {
     if (!banner) {
       banner = document.createElement('div');
       banner.id = 'links-stale-banner';
-      banner.className = 'stale-banner';
+      banner.className = 'lt-alert lt-alert--warning';
+      banner.innerHTML = '<span class="lt-alert-icon">⚠</span><div class="lt-alert-body"><div class="lt-alert-msg"></div></div>';
       document.getElementById('links-container').prepend(banner);
     }
-    banner.textContent = `⚠ Link data may be stale — last updated ${Math.floor(age/60)}m ago.`;
+    banner.querySelector('.lt-alert-msg').textContent =
+      `Link data may be stale — last updated ${Math.floor(age/60)}m ago.`;
     banner.style.display = '';
   } else if (banner) {
     banner.style.display = 'none';
@@ -511,5 +519,13 @@ async function loadLinks() {
 
 loadLinks();
 lt.autoRefresh.start(loadLinks, 60000);
+
+document.addEventListener('click', e => {
+  const toggleTitle = e.target.closest('[data-action="toggle-panel"]');
+  if (toggleTitle) { togglePanel(toggleTitle.closest('.link-host-panel')); return; }
+
+  if (e.target.closest('[data-action="collapse-all"]')) { collapseAll(); return; }
+  if (e.target.closest('[data-action="expand-all"]'))   { expandAll();   return; }
+});
 </script>
 {% endblock %}

templates/suppressions.html

@@ -15,11 +15,11 @@
   </div>
   <div class="lt-card">
     <div class="lt-card-body">
-      <form id="create-suppression-form" onsubmit="createSuppression(event)">
+      <form id="create-suppression-form">
         <div class="form-row">
           <div class="lt-form-group">
             <label class="lt-label" for="s-type">Target Type <span class="required">*</span></label>
-            <select class="lt-select" id="s-type" name="target_type" onchange="onTypeChange()">
+            <select class="lt-select" id="s-type" name="target_type">
               <option value="host">Host (all interfaces)</option>
               <option value="interface">Specific Interface</option>
               <option value="unifi_device">UniFi Device</option>
@@ -95,7 +95,8 @@
       <tbody>
         {% for s in active %}
         <tr id="sup-row-{{ s.id }}">
-          <td><span class="lt-badge badge-info">{{ s.target_type }}</span></td>
+          {%- set _sup_badge = {'host':'badge-warning','interface':'badge-info','unifi_device':'badge-purple','all':'badge-critical'} -%}
+          <td><span class="lt-badge {{ _sup_badge.get(s.target_type, 'badge-neutral') }}">{{ s.target_type }}</span></td>
           <td>{{ s.target_name or 'all' }}</td>
           <td>{{ s.target_detail or '–' }}</td>
           <td>{{ s.reason }}</td>
@@ -111,7 +112,11 @@
     </table>
   </div>
   {% else %}
-  <p class="empty-state" id="no-active-msg">No active suppressions.</p>
+  <div class="lt-empty-state lt-empty-state--sm" id="no-active-msg">
+    <div class="lt-empty-state-icon">🔕</div>
+    <div class="lt-empty-state-title">No active suppressions</div>
+    <div class="lt-empty-state-body">All alerts are active. Use the form above to silence a host or interface.</div>
+  </div>
   {% endif %}
   </div>
 </section>
@@ -155,7 +160,10 @@
     </table>
   </div>
   {% else %}
-  <p class="empty-state">No suppression history yet.</p>
+  <div class="lt-empty-state lt-empty-state--sm">
+    <div class="lt-empty-state-icon">📋</div>
+    <div class="lt-empty-state-title">No suppression history yet</div>
+  </div>
   {% endif %}
 </section>
 
@@ -209,14 +217,15 @@
     const wrap = document.getElementById('active-sup-wrap');
     const badge = document.getElementById('active-sup-badge');
     if (!rows || !rows.length) {
-      wrap.innerHTML = '<p class="empty-state" id="no-active-msg">No active suppressions.</p>';
+      wrap.innerHTML = '<div class="lt-empty-state lt-empty-state--sm" id="no-active-msg"><div class="lt-empty-state-icon">🔕</div><div class="lt-empty-state-title">No active suppressions</div><div class="lt-empty-state-body">All alerts are active. Use the form above to silence a host or interface.</div></div>';
       if (badge) badge.textContent = '0';
       return;
     }
     if (badge) badge.textContent = rows.length;
+    const SUP_BADGE = {host:'badge-warning', interface:'badge-info', unifi_device:'badge-purple', all:'badge-critical'};
     const tbody = rows.map(s => `
       <tr id="sup-row-${s.id}">
-        <td><span class="lt-badge badge-info">${lt.escHtml(s.target_type)}</span></td>
+        <td><span class="lt-badge ${SUP_BADGE[s.target_type] || 'badge-neutral'}">${lt.escHtml(s.target_type)}</span></td>
         <td>${lt.escHtml(s.target_name || 'all')}</td>
         <td>${lt.escHtml(s.target_detail || '–')}</td>
         <td>${lt.escHtml(s.reason)}</td>
@@ -243,7 +252,7 @@
       const rows = await lt.api.get('/api/suppressions');
       renderActiveRows(rows);
     } catch (err) {
-      console.warn('Failed to refresh suppressions:', err);
+      showToast('Failed to refresh suppressions', 'warning');
     }
   }
 
@@ -285,7 +294,7 @@
       const tbody = document.querySelector('#active-sup-table tbody');
       if (tbody && !tbody.children.length) {
         document.getElementById('active-sup-wrap').innerHTML =
-          '<p class="empty-state" id="no-active-msg">No active suppressions.</p>';
+          '<div class="lt-empty-state lt-empty-state--sm" id="no-active-msg"><div class="lt-empty-state-icon">🔕</div><div class="lt-empty-state-title">No active suppressions</div><div class="lt-empty-state-body">All alerts are active. Use the form above to silence a host or interface.</div></div>';
         if (badge) badge.textContent = '0';
       }
       showToast('Suppression removed', 'success');
@@ -294,6 +303,9 @@
     }
   }
 
+  document.getElementById('s-type')?.addEventListener('change', onTypeChange);
+  document.getElementById('create-suppression-form')?.addEventListener('submit', createSuppression);
+
   document.addEventListener('click', e => {
     const pill = e.target.closest('#create-suppression-form .pill[data-duration]');
     if (pill) {