refactor: const for _inspInterval in inspector.html

Last remaining var declaration; matches the pattern in index.html and
links.html.

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

app.py

@@ -5,17 +5,20 @@ management UI. Authentication via Authelia forward-auth headers.
 All monitoring and alerting is handled by the separate monitor.py daemon.
 """
 import hashlib
+import html
 import ipaddress
 import json
 import logging
+import os
 import re
+import tempfile
 import threading
 import time
 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
@@ -71,8 +74,8 @@ def _purge_old_jobs_loop():
             for jid, j in list(_diag_jobs.items()):
                 if j['status'] == 'running' and j.get('created_at', 0) < stuck_cutoff:
                     j['status'] = 'done'
-                    j['result'] = {'status': 'error', 'error': 'Diagnostic timed out (thread crash)'}
-                    logger.error(f'Diagnostic job {jid} appeared stuck; marked as errored')
+                    j['result'] = {'status': 'error', 'error': 'Diagnostic abandoned — no activity for 5 minutes.'}
+                    logger.error(f'Diagnostic job {jid} stuck (no activity for 5 min); marked done/error')
 
 
 _purge_thread = threading.Thread(target=_purge_old_jobs_loop, daemon=True)
@@ -130,10 +133,12 @@ def require_auth(f):
             )
         allowed = _config().get('auth', {}).get('allowed_groups', ['admin'])
         if not any(g in allowed for g in user['groups']):
+            safe_user   = html.escape(user['username'])
+            safe_groups = html.escape(', '.join(allowed))
             return (
                 f'<h1>403 – Access denied</h1>'
-                f'<p>Your account ({user["username"]}) is not in an allowed group '
-                f'({", ".join(allowed)}).</p>',
+                f'<p>Your account ({safe_user}) is not in an allowed group '
+                f'({safe_groups}).</p>',
                 403,
             )
         return f(*args, **kwargs)
@@ -141,12 +146,31 @@ def require_auth(f):
 
 
 # ---------------------------------------------------------------------------
-# Page routes
+# Helpers
 # ---------------------------------------------------------------------------
 
 _PAGE_LIMIT = 200  # max events returned per request
 
 
+def _annotate_suppressions(events: list, suppressions: list) -> None:
+    """Annotate each event dict in-place with an is_suppressed bool."""
+    for ev in events:
+        sup_type = (
+            'unifi_device' if ev.get('event_type') == 'unifi_device_offline'
+            else 'interface' if ev.get('event_type') == 'interface_down'
+            else 'host'
+        )
+        ev['is_suppressed'] = db.check_suppressed(
+            suppressions, sup_type,
+            ev.get('target_name', ''), ev.get('target_detail', '') or '',
+        )
+
+
+# ---------------------------------------------------------------------------
+# Page routes
+# ---------------------------------------------------------------------------
+
+
 @app.route('/')
 @require_auth
 def index():
@@ -158,6 +182,7 @@ def index():
     last_check = db.get_state('last_check', 'Never')
     snapshot = json.loads(snapshot_raw) if snapshot_raw else {}
     suppressions = db.get_active_suppressions()
+    _annotate_suppressions(events, suppressions)
     recent_resolved = db.get_recent_resolved(hours=24, limit=10)
     return render_template(
         'index.html',
@@ -169,6 +194,7 @@ def index():
         last_check=last_check,
         suppressions=suppressions,
         recent_resolved=recent_resolved,
+        daemon_ok=_daemon_ok(last_check),
     )
 
 
@@ -211,6 +237,8 @@ def suppressions_page():
 @require_auth
 def api_status():
     active = db.get_active_events(limit=_PAGE_LIMIT)
+    suppressions = db.get_active_suppressions()
+    _annotate_suppressions(active, suppressions)
     last_check = db.get_state('last_check', 'Never')
     return jsonify({
         'summary': db.get_status_summary(),
@@ -442,6 +470,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', os.path.join(tempfile.gettempdir(), '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=gandalf,ou=people,dc=example,dc=com",
+    "bind_pw": "AZ-eUFRxamnlLEELuDy5-Mh6z-2cJbL_YJZnu64Tf0A",
+    "user_base": "ou=people,dc=example,dc=com",
+    "cache_dir": "/tmp/gandalf_avatars",
+    "cache_ttl": 3600
+  },
   "auth": {
     "allowed_groups": ["admin"]
   },

db.py

@@ -222,10 +222,17 @@ def get_status_summary() -> dict:
                    WHERE resolved_at IS NULL GROUP BY severity"""
             )
             counts = {r['severity']: r['cnt'] for r in cur.fetchall()}
+            cur.execute(
+                """SELECT COUNT(*) as cnt FROM network_events
+                   WHERE resolved_at IS NOT NULL
+                   AND resolved_at > DATE_SUB(NOW(), INTERVAL 24 HOUR)"""
+            )
+            resolved_24h = cur.fetchone()['cnt']
             return {
                 'critical': counts.get('critical', 0),
                 'warning': counts.get('warning', 0),
                 'info': counts.get('info', 0),
+                'resolved_24h': resolved_24h,
             }
 
 

monitor.py

@@ -877,8 +877,12 @@ class NetworkMonitor:
     # ------------------------------------------------------------------
     # Snapshot collection (for dashboard)
     # ------------------------------------------------------------------
-    def _collect_snapshot(self, iface_states: Dict[str, Dict[str, bool]]) -> dict:
-        unifi_devices = self.unifi.get_devices() or []
+    def _collect_snapshot(
+        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
-                snapshot = self._collect_snapshot(iface_states)
+                # 2. Fetch UniFi devices once — used by both snapshot and alert processing
+                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'),
@@ -51,11 +53,13 @@ async function refreshAll() {
       const status = statusResult.value;
       updateEventsTable(status.events || [], status.total_active);
       updateStatusBar(status.summary || {}, status.last_check || '', status.daemon_ok);
+      if (typeof window.gandalfNotifUpdate === 'function') window.gandalfNotifUpdate(status.events || []);
     } else {
       showToast('Status data unavailable', 'warning');
     }
   } finally {
     if (refreshBtn) refreshBtn.classList.remove('is-loading');
+    if (spinner)    spinner.style.display = 'none';
   }
 }
 
@@ -78,6 +82,23 @@ 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';
+  }
+
+  // Update stat cards
+  const scCrit = document.getElementById('stat-critical-val');
+  const scWarn = document.getElementById('stat-warning-val');
+  const scRes  = document.getElementById('stat-resolved-val');
+  if (scCrit) scCrit.textContent = critCount;
+  if (scWarn) scWarn.textContent = warnCount;
+  if (scRes && summary.resolved_24h !== null && summary.resolved_24h !== undefined) scRes.textContent = summary.resolved_24h;
+  const statCritCard = document.getElementById('stat-critical');
+  if (statCritCard) statCritCard.classList.toggle('lt-stat-card--alert', critCount > 0);
+
   // Stale data banner: warn if last_check is older than 15 minutes
   let staleBanner = document.getElementById('stale-banner');
   if (lastCheck) {
@@ -101,6 +122,9 @@ function updateStatusBar(summary, lastCheck, daemonOk) {
 }
 
 function updateHostGrid(hosts) {
+  const scHosts = document.getElementById('stat-hosts-val');
+  if (scHosts) scHosts.textContent = Object.keys(hosts).length;
+
   for (const [name, host] of Object.entries(hosts)) {
     const card = document.querySelector(`.host-card[data-host="${CSS.escape(name)}"]`);
     if (!card) continue;
@@ -132,9 +156,7 @@ 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}`;
@@ -155,7 +177,7 @@ 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"
@@ -181,11 +203,11 @@ function updateEventsTable(events, totalActive) {
 
   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;
   }
 
-  const truncated = totalActive != null && totalActive > active.length;
+  const truncated = totalActive !== null && totalActive !== undefined && totalActive > active.length;
   const countNotice = truncated
     ? `<div class="pagination-notice">Showing ${active.length} of ${totalActive} active alerts &mdash; <a href="/api/events?limit=1000">view all via API</a></div>`
     : '';
@@ -200,9 +222,12 @@ function updateEventsTable(events, totalActive) {
       ? `<a href="${lt.escHtml(ticketBase)}${lt.escHtml(String(e.ticket_id))}" target="_blank"
             class="ticket-link">#${e.ticket_id}</a>`
       : '–';
+    const supBadge = e.is_suppressed
+      ? `<span class="lt-badge badge-suppressed" title="Alert suppressed">🔕 sup</span>`
+      : '';
     return `
-      <tr class="row-${e.severity}">
-        <td><span class="lt-badge badge-${e.severity}">${e.severity}</span></td>
+      <tr class="row-${e.severity}${e.is_suppressed ? ' row-suppressed' : ''}">
+        <td><span class="lt-badge badge-${e.severity}">${e.severity}</span>${supBadge}</td>
         <td>${lt.escHtml(e.event_type.replace(/_/g,' '))}</td>
         <td><strong>${lt.escHtml(e.target_name)}</strong></td>
         <td>${lt.escHtml(e.target_detail || '–')}</td>
@@ -251,9 +276,12 @@ function openSuppressModal(type, name, detail) {
   updateSuppressForm();
   lt.modal.open('suppress-modal');
 
-  document.querySelectorAll('#suppress-modal .pill').forEach(p => p.classList.remove('active'));
+  document.querySelectorAll('#suppress-modal .pill').forEach(p => {
+    p.classList.remove('active');
+    p.setAttribute('aria-pressed', 'false');
+  });
   const manualPill = document.querySelector('#suppress-modal .pill-manual');
-  if (manualPill) manualPill.classList.add('active');
+  if (manualPill) { manualPill.classList.add('active'); manualPill.setAttribute('aria-pressed', 'true'); }
   const hint = document.getElementById('duration-hint');
   if (hint) hint.textContent = 'Suppression will persist until manually removed.';
 }
@@ -272,8 +300,11 @@ function updateSuppressForm() {
 
 function setDuration(mins, el) {
   document.getElementById('sup-expires').value = mins || '';
-  document.querySelectorAll('#suppress-modal .pill').forEach(p => p.classList.remove('active'));
-  if (el) el.classList.add('active');
+  document.querySelectorAll('#suppress-modal .pill').forEach(p => {
+    p.classList.remove('active');
+    p.setAttribute('aria-pressed', 'false');
+  });
+  if (el) { el.classList.add('active'); el.setAttribute('aria-pressed', 'true'); }
   const hint = document.getElementById('duration-hint');
   if (hint) {
     if (mins) {
@@ -312,6 +343,10 @@ async function submitSuppress(e) {
   }
 }
 
+// ── Suppress form – wired here so the modal works from any page ──────
+document.getElementById('suppress-form')?.addEventListener('submit', submitSuppress);
+document.getElementById('sup-type')?.addEventListener('change', updateSuppressForm);
+
 // ── Global click delegation ───────────────────────────────────────────
 document.addEventListener('click', e => {
   // Refresh button

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,17 +60,114 @@
   --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);
+}
 
-/* ── Refresh button loading state ────────────────────────────────── */
-[data-action="refresh"].is-loading {
+/* ── 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)); }
+}
+
+/* ── Button loading state ─────────────────────────────────────────── */
+[data-action="refresh"].is-loading,
+.lt-btn.is-loading {
   opacity: .5;
   pointer-events: none;
   cursor: wait;
+  position: relative;
 }
-[data-action="refresh"].is-loading::after {
+[data-action="refresh"].is-loading::after,
+.lt-btn.is-loading::after {
   content: '…';
 }
 
+/* ── Secondary button – dark-mode definition ─────────────────────────
+   base.css only defines .lt-btn-secondary in its light-theme block,
+   so dark mode falls back to the default cyan primary appearance.
+   This restores a visually distinct secondary look in dark mode. */
+.lt-btn-secondary {
+  background: var(--cyan-dim);
+  border-color: rgba(0,212,255,.28);
+  color: var(--cyan);
+}
+.lt-btn-secondary:hover {
+  background: rgba(0,212,255,.18);
+  border-color: rgba(0,212,255,.5);
+}
+
+/* ── ⌘K hint button in header ────────────────────────────────────── */
+.lt-cmd-hint-btn {
+  font-size: 0.65rem;
+  opacity: 0.55;
+  letter-spacing: 0.03em;
+  padding: 0.2rem 0.45rem;
+}
+
+/* ── Form group modifiers ────────────────────────────────────────── */
+.lt-form-group--last { margin-bottom: 0; }
+
+/* ── Search input size variant ───────────────────────────────────── */
+.lt-search-input--sm { width: 180px; }
+
+/* ── Notification panel helpers ──────────────────────────────────── */
+.lt-notif-empty {
+  padding: 1rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+.lt-notif-view-all {
+  width: 100%;
+  text-align: center;
+  display: block;
+  font-size: 0.72rem;
+}
+.lt-notif-dot {
+  border-radius: 50%;
+  margin-top: 4px;
+  flex-shrink: 0;
+}
+
+/* ── Divider variants ────────────────────────────────────────────── */
+.lt-divider--compact { margin: 1rem 0 0.75rem; }
+.lt-divider--unifi   { margin: 20px 0 12px; }
+.lt-divider-label--unifi { color: var(--cyan); letter-spacing: .1em; }
+
+/* ── Stats grid spacing variant ──────────────────────────────────── */
+.lt-stats-grid--mb { margin-bottom: 16px; }
+
+/* ── Topology section collapse toggle ────────────────────────────── */
+.topo-collapse-btn {
+  margin-left: auto;
+  font-size: .7em;
+  color: var(--text-muted);
+  background: transparent;
+  border: 1px solid var(--border-color);
+  padding: 2px 8px;
+  cursor: pointer;
+  font-family: var(--font);
+  letter-spacing: .04em;
+  transition: border-color .15s, color .15s;
+}
+.topo-collapse-btn:hover { border-color: var(--amber); color: var(--amber); }
+.topo-collapsible { overflow: hidden; transition: max-height .25s ease; }
+.topo-collapsible.is-collapsed { display: none; }
+
 /* ── Animations used by custom components ─────────────────────────── */
 @keyframes pulse-red {
   0%,100% { box-shadow: 0 0 0 0 rgba(255,45,85,.5); }
@@ -111,17 +214,9 @@
   padding: 1px 7px;
 }
 .g-section-actions  { margin-left: auto; }
-.events-filter-bar  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.events-filter-bar .lt-input-sm { width: 220px; }
 .sev-pills          { display: flex; gap: 4px; }
-.g-page-header { margin-bottom: 20px; }
-.g-page-title {
-  font-size: 1em;
-  font-weight: bold;
-  color: var(--text-accent);
-  letter-spacing: .06em;
-}
 .g-page-sub { font-size: .78em; color: var(--text-muted); margin-top: 4px; }
+.g-page-sub-aside { font-size: .78em; color: var(--text-muted); margin-left: 8px; }
 
 /* ── Badge severity color variants (used with lt-badge) ───────────── */
 .badge-critical { color: var(--red);    border-color: var(--red);    text-shadow: var(--glow-red); }
@@ -140,6 +235,8 @@
 .lt-table tr.row-warning  td              { background: rgba(255,107,0,.04); }
 .lt-table tr.row-warning  td:first-child  { border-left: 2px solid var(--orange); }
 .lt-table tr.row-resolved td              { opacity: .65; }
+.lt-table tr.row-suppressed td            { opacity: .6; }
+.lt-table tr.row-suppressed td:first-child{ border-left-color: var(--text-muted) !important; }
 
 /* ── Table size modifier ─────────────────────────────────────────── */
 .lt-table-sm th,
@@ -149,7 +246,6 @@
 .ts-cell    { color: var(--text-muted); font-size: .75em; white-space: nowrap; }
 .desc-cell  { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ticket-link{ color: var(--amber); text-shadow: var(--glow-amber); font-weight: bold; }
-.empty-state { padding: 28px; text-align: center; color: var(--text-muted); font-size: .82em; }
 .pagination-notice { font-size: .8em; color: var(--text-muted); padding: 6px 0 8px; }
 .pagination-notice a { color: var(--amber); }
 
@@ -173,7 +269,7 @@
   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; }
@@ -217,12 +313,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; }
@@ -286,7 +397,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;
@@ -329,9 +442,21 @@
   background: linear-gradient(to bottom, var(--cyan), var(--green));
   opacity: .7;
 }
+.topo-vc-wire--wan  { background: linear-gradient(to bottom, var(--cyan), rgba(0,212,255,.3)); opacity: .7; }
+.topo-vc-wire--10g  { background: var(--amber); opacity: .6; }
+.topo-vc-wire--mgmt { background: var(--border-color); opacity: .5; }
+/* 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;
@@ -339,6 +464,8 @@
   white-space: nowrap;
   letter-spacing: .06em;
   font-family: var(--font);
+  background: rgba(3,5,8,.7);
+  padding: 1px 4px;
 }
 
 .topo-v2-node {
@@ -355,26 +482,46 @@
   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-router   { border-color: var(--cyan);  color: var(--cyan);  text-shadow: var(--glow-cyan); }
-.topo-v2-switch   { border-color: var(--amber); color: var(--amber); text-shadow: var(--glow-amber); }
+.topo-v2-host--bus { min-width: 80px; max-width: 96px; }
+.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); 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); 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); }
 
@@ -398,12 +545,14 @@
   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%;
+  max-width: 860px;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -419,8 +568,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;
@@ -483,7 +633,11 @@
   color: var(--text-muted);
   font-family: var(--font);
 }
-.topo-legend-line-10g { width: 24px; height: 2px; background: var(--green); display: inline-block; }
+.topo-legend-item--offrack {
+  border: 1px dashed var(--border-color);
+  padding: 1px 5px;
+}
+.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; }
 
@@ -510,7 +664,6 @@
 .panel-toggle   { font-size: .65em; color: var(--text-muted); flex-shrink: 0; margin-left: 6px; padding: 0 4px; border: 1px solid var(--border-color); }
 .link-host-panel.collapsed > .link-ifaces-grid { display: none; }
 
-.link-collapse-bar { display: flex; gap: 8px; margin-bottom: 10px; }
 
 .link-ifaces-grid {
   display: grid;
@@ -564,6 +717,8 @@
 .traffic-label    { font-size: .62em; color: var(--text-muted); width: 20px; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
 .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; }
+/* 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 {
@@ -627,38 +782,7 @@
 .poe-bar-warn { background: var(--amber); }
 .poe-bar-crit { background: var(--red); }
 
-/* UniFi section divider */
-.unifi-section-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin: 24px 0 12px;
-  color: var(--cyan);
-  font-size: .75em;
-  letter-spacing: .1em;
-}
-.unifi-section-header::before,
-.unifi-section-header::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
-}
 
-/* Link health summary */
-.link-summary-panel {
-  background: var(--bg2);
-  border: 1px solid var(--border-color);
-  padding: 12px 16px;
-  margin-bottom: 12px;
-}
-.link-summary-panel.link-summary-has-alerts { border-color: var(--amber); }
-.link-summary-grid  { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
-.link-summary-stat  { min-width: 80px; }
-.link-summary-stat.lss-alert .lss-label { color: var(--amber); }
-.lss-label { display: block; font-size: .62em; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
-.lss-value { font-size: 1.2em; font-weight: bold; color: var(--text); }
-.lss-sub   { font-size: .7em; color: var(--text-muted); font-weight: normal; }
 
 .link-loading { padding: 20px; text-align: center; color: var(--text-muted); font-size: .8em; }
 .link-loading::after { content: ' ...'; animation: blink 1s step-end infinite; }
@@ -751,7 +875,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; }
@@ -820,17 +944,9 @@
   transition: all .15s;
 }
 .panel-close:hover { color: var(--red); border-color: var(--red); }
-.panel-section-title {
-  font-size: .62em;
-  font-weight: bold;
-  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; }
+/* Inspector panel uses lt-divider — compact spacing overrides */
+.inspector-panel .lt-divider { margin: 8px 0 4px; }
+.inspector-panel .lt-divider-label { color: var(--amber); font-size: .6em; }
 .panel-row {
   display: flex;
   justify-content: space-between;
@@ -924,6 +1040,17 @@
 .diag-pulse-link a { color: var(--cyan); }
 .diag-pulse-link a:hover { text-shadow: var(--glow-cyan); }
 
+/* ── Stat card alert variant (pulsing border when critical > 0) ─── */
+.lt-stat-card--alert {
+  border-color: var(--red) !important;
+  box-shadow: 0 0 8px rgba(255,45,85,.25) !important;
+  animation: topo-pulse-down 2s ease-in-out infinite;
+}
+.lt-stat-card--alert::before { background: var(--red); box-shadow: var(--glow-red); }
+
+/* ── lt-frame inside g-section: no extra bottom margin ────────────── */
+.g-section > .lt-frame { margin-bottom: 0; }
+
 /* ── Responsive ───────────────────────────────────────────────────── */
 @media (max-width: 768px) {
   .host-grid         { grid-template-columns: 1fr; }

templates/base.html

@@ -73,7 +73,6 @@
         <a href="{{ url_for('index') }}"
            class="lt-brand-title lt-glitch"
            data-text="GANDALF"
-           style="text-decoration:none"
            aria-label="GANDALF home">GANDALF</a>
         <span class="lt-brand-subtitle">Network Monitor // LotusGuild</span>
       </div>
@@ -96,28 +95,6 @@
           Inspector
         </a>
         {% if user.groups and 'admin' in user.groups %}
-        <div class="lt-nav-dropdown" data-action="toggle-nav-dropdown">
-          <a href="#"
-             class="lt-nav-link{% if request.endpoint == 'suppressions_page' %} active{% endif %}"
-             role="button"
-             aria-haspopup="true"
-             aria-expanded="false"
-             aria-controls="lt-admin-dropdown-menu">
-            Admin &#x25BE;
-          </a>
-          <ul class="lt-nav-dropdown-menu"
-              id="lt-admin-dropdown-menu"
-              role="menu"
-              aria-label="Admin menu">
-            <li role="none">
-              <a href="{{ url_for('suppressions_page') }}" role="menuitem"
-                 class="{% if request.endpoint == 'suppressions_page' %}active{% endif %}">
-                Suppressions
-              </a>
-            </li>
-          </ul>
-        </div>
-        {% else %}
         <a href="{{ url_for('suppressions_page') }}"
            class="lt-nav-link{% if request.endpoint == 'suppressions_page' %} active{% endif %}"
            {% if request.endpoint == 'suppressions_page' %}aria-current="page"{% endif %}>
@@ -133,12 +110,44 @@
       {% 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>
       {% if user.groups and 'admin' in user.groups %}
       <span class="lt-badge lt-badge-admin" aria-label="Administrator">ADMIN</span>
       {% endif %}
+
+      <!-- Notification bell — shows active monitoring alerts -->
+      <div class="lt-notif-dropdown-wrap" id="lt-notif-wrap">
+        <button type="button"
+                class="lt-btn lt-btn-ghost lt-btn-sm lt-notif-bell-btn"
+                id="lt-notif-bell"
+                aria-label="Active alerts"
+                aria-expanded="false"
+                aria-controls="lt-notif-panel"
+                title="Active alerts">&#x1F514;</button>
+        <div class="lt-notif-panel" id="lt-notif-panel" aria-hidden="true" role="dialog" aria-label="Active alerts">
+          <div class="lt-notif-panel-header">
+            <span>Active Alerts</span>
+            <button type="button" class="lt-notif-panel-clear" id="lt-notif-clear-btn">Mark all read</button>
+          </div>
+          <div class="lt-notif-panel-list" id="lt-notif-list">
+            <div class="lt-notif-empty">Loading&hellip;</div>
+          </div>
+          <div class="lt-notif-panel-footer">
+            <a href="{{ url_for('index') }}" class="lt-btn lt-btn-ghost lt-btn-sm lt-notif-view-all">View dashboard</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- ⌘K affordance -->
+      <button type="button"
+              class="lt-btn lt-btn-ghost lt-btn-sm lt-cmd-hint-btn"
+              data-action="open-cmdpalette"
+              title="Command palette (Ctrl+K)"
+              aria-label="Open command palette">&#x2315;&nbsp;K</button>
+
       <button type="button" class="lt-theme-btn" id="lt-theme-btn"
               aria-label="Toggle theme" title="Toggle light/dark mode">&#x2600;</button>
     </div>
@@ -169,18 +178,78 @@
     {% block content %}{% endblock %}
   </main>
 
-  <!-- FOOTER -->
+  <!-- FOOTER — context-sensitive per page -->
   <footer class="lt-footer" role="contentinfo">
     <nav class="lt-footer-hints" aria-label="Keyboard shortcuts">
-      <span class="lt-footer-hint"><span class="lt-footer-key">[ Ctrl+K ]</span> SEARCH</span>
-      <span class="lt-footer-sep">|</span>
-      <span class="lt-footer-hint"><span class="lt-footer-key">[ R ]</span> REFRESH</span>
+      {% if request.endpoint == 'index' %}
+        <span class="lt-footer-hint"><span class="lt-footer-key">[ R ]</span> REFRESH</span>
+        <span class="lt-footer-sep">|</span>
+        <span class="lt-footer-hint"><span class="lt-footer-key">[ S ]</span> SUPPRESS</span>
+        <span class="lt-footer-sep">|</span>
+      {% elif request.endpoint in ('links_page', 'inspector') %}
+        <span class="lt-footer-hint"><span class="lt-footer-key">[ R ]</span> REFRESH</span>
+        <span class="lt-footer-sep">|</span>
+      {% endif %}
+      <button type="button" class="lt-footer-hint" data-action="open-settings"><span class="lt-footer-key">[ * ]</span> CFG</button>
       <span class="lt-footer-sep">|</span>
       <button type="button" class="lt-footer-hint" data-action="show-keyboard-help"><span class="lt-footer-key">[ ? ]</span> HELP</button>
     </nav>
     <span>GANDALF &mdash; TDS v1.2</span>
   </footer>
 
+  <!-- QUICK-SUPPRESS MODAL — available on all pages via [S] shortcut -->
+  <div id="suppress-modal" class="lt-modal-overlay"
+       role="dialog" aria-modal="true" aria-labelledby="suppress-modal-title" aria-hidden="true">
+    <div class="lt-modal">
+      <div class="lt-modal-header">
+        <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">&#x2715;</button>
+      </div>
+      <form id="suppress-form">
+        <div class="lt-modal-body">
+          <div class="lt-form-group">
+            <label class="lt-label" for="sup-type">Target Type</label>
+            <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>
+              <option value="all">Global Maintenance</option>
+            </select>
+          </div>
+          <div class="lt-form-group" id="sup-name-group">
+            <label class="lt-label" for="sup-name">Target Name</label>
+            <input type="text" class="lt-input" id="sup-name" name="target_name" placeholder="e.g. large1">
+          </div>
+          <div class="lt-form-group" id="sup-detail-group" style="display:none">
+            <label class="lt-label" for="sup-detail">Interface <span class="lt-field-hint">(interface type only)</span></label>
+            <input type="text" class="lt-input" id="sup-detail" name="target_detail" placeholder="e.g. enp35s0">
+          </div>
+          <div class="lt-form-group">
+            <label class="lt-label" for="sup-reason">Reason <span class="required">*</span></label>
+            <input type="text" class="lt-input" id="sup-reason" name="reason"
+                   placeholder="e.g. Planned switch reboot" required>
+          </div>
+          <div class="lt-form-group lt-form-group--last">
+            <label class="lt-label">Duration</label>
+            <div class="duration-pills" role="group" aria-label="Select suppression duration">
+              <button type="button" class="pill" data-duration="30" aria-pressed="false">30 min</button>
+              <button type="button" class="pill" data-duration="60" aria-pressed="false">1 hr</button>
+              <button type="button" class="pill" data-duration="240" aria-pressed="false">4 hr</button>
+              <button type="button" class="pill" data-duration="480" aria-pressed="false">8 hr</button>
+              <button type="button" class="pill pill-manual active" data-duration="" aria-pressed="true">Manual &#x221E;</button>
+            </div>
+            <input type="hidden" id="sup-expires" name="expires_minutes" value="">
+            <div class="lt-field-hint" id="duration-hint">Persists until manually removed.</div>
+          </div>
+        </div>
+        <div class="lt-modal-footer">
+          <button type="button" class="lt-btn lt-btn-secondary" data-modal-close>Cancel</button>
+          <button type="submit" class="lt-btn lt-btn-primary">Apply</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
   <!-- KEYBOARD SHORTCUTS MODAL -->
   <div id="lt-keys-help" class="lt-modal-overlay" aria-hidden="true">
     <div class="lt-modal" role="dialog" aria-modal="true" aria-labelledby="keys-help-title">
@@ -189,13 +258,15 @@
         <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
       </div>
       <div class="lt-modal-body">
-        <table class="lt-table" style="width:100%">
+        <table class="lt-table">
           <thead><tr><th>Shortcut</th><th>Action</th></tr></thead>
           <tbody>
             <tr><td>Ctrl / &#x2318; + K</td><td>Command palette</td></tr>
-            <tr><td>R</td><td>Refresh dashboard data</td></tr>
+            <tr><td>R</td><td>Refresh data (Dashboard / Link Debug / Inspector)</td></tr>
+            <tr><td>S</td><td>Quick-suppress alert (Dashboard)</td></tr>
+            <tr><td>*</td><td>Open settings</td></tr>
             <tr><td>?</td><td>Show this help</td></tr>
-            <tr><td>ESC</td><td>Close modal</td></tr>
+            <tr><td>ESC</td><td>Close modal / panel</td></tr>
           </tbody>
         </table>
       </div>
@@ -205,6 +276,41 @@
     </div>
   </div>
 
+  <!-- SETTINGS MODAL -->
+  <div id="lt-settings-modal" class="lt-modal-overlay" aria-hidden="true">
+    <div class="lt-modal" role="dialog" aria-modal="true" aria-labelledby="settings-modal-title">
+      <div class="lt-modal-header">
+        <span class="lt-modal-title" id="settings-modal-title">Settings</span>
+        <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
+      </div>
+      <div class="lt-modal-body">
+        <div class="lt-form-group">
+          <label class="lt-label">Auto-refresh interval</label>
+          <div class="duration-pills" id="settings-refresh-pills" role="group" aria-label="Select auto-refresh interval">
+            <button type="button" class="pill" data-refresh-interval="15" aria-pressed="false">15 s</button>
+            <button type="button" class="pill" data-refresh-interval="30" aria-pressed="false">30 s</button>
+            <button type="button" class="pill" data-refresh-interval="60" aria-pressed="false">1 min</button>
+            <button type="button" class="pill" data-refresh-interval="300" aria-pressed="false">5 min</button>
+            <button type="button" class="pill" data-refresh-interval="0" aria-pressed="false">Off</button>
+          </div>
+          <div class="lt-field-hint" id="settings-refresh-hint"></div>
+        </div>
+        <div class="lt-divider lt-divider--compact"></div>
+        <div class="lt-kv-grid">
+          <span class="lt-kv-key">User</span>
+          <span class="lt-kv-val lt-kv-val--cyan">{{ user.name or user.username }}</span>
+          {% if user.groups %}
+          <span class="lt-kv-key">Groups</span>
+          <span class="lt-kv-val">{{ user.groups | join(', ') }}</span>
+          {% endif %}
+        </div>
+      </div>
+      <div class="lt-modal-footer">
+        <button type="button" class="lt-btn" data-modal-close>Close</button>
+      </div>
+    </div>
+  </div>
+
   <script>
     const GANDALF_CONFIG = {
       ticket_web_url: "{{ config.get('ticket_api', {}).get('web_url', 'http://t.lotusguild.org/ticket/') }}"
@@ -218,33 +324,197 @@
       lt.init({ bootName: 'GANDALF' });
 
       // Theme toggle
-      var themeBtn = document.getElementById('lt-theme-btn');
+      const themeBtn = document.getElementById('lt-theme-btn');
       if (themeBtn) themeBtn.addEventListener('click', function() { lt.theme.toggle(); });
 
       // Command palette
       lt.cmdPalette.init([
-        { id: 'nav-dashboard',    group: 'Navigate', icon: '~', label: 'Dashboard',    action: function() { window.location.href = '/'; } },
-        { id: 'nav-links',        group: 'Navigate', icon: '↗', label: 'Link Debug',   action: function() { window.location.href = '/links'; } },
-        { id: 'nav-inspector',    group: 'Navigate', icon: '⬡', label: 'Inspector',    action: function() { window.location.href = '/inspector'; } },
-        { id: 'nav-suppressions', group: 'Navigate', icon: '🔕', label: 'Suppressions', action: function() { window.location.href = '/suppressions'; } },
-        { id: 'help-shortcuts',   group: 'Help',     icon: '?', label: 'Keyboard Shortcuts', action: function() { lt.modal.open('lt-keys-help'); } },
-        { id: 'help-theme',       group: 'Help',     icon: '*', label: 'Toggle Theme',  action: function() { lt.theme.toggle(); } },
-        { id: 'action-refresh',   group: 'Actions',  icon: '↻', label: 'Refresh Data', kbd: 'R', action: function() { if (typeof refreshAll === 'function') refreshAll(); } },
+        { id: 'nav-dashboard',    group: 'Navigate', icon: '~',  label: 'Dashboard',          action: function() { window.location.href = '/'; } },
+        { id: 'nav-links',        group: 'Navigate', icon: '↗',  label: 'Link Debug',          action: function() { window.location.href = '/links'; } },
+        { id: 'nav-inspector',    group: 'Navigate', icon: '⬡',  label: 'Inspector',           action: function() { window.location.href = '/inspector'; } },
+        { id: 'nav-suppressions', group: 'Navigate', icon: '🔕', label: 'Suppressions',        action: function() { window.location.href = '/suppressions'; } },
+        { id: 'action-refresh',   group: 'Actions',  icon: '↻',  label: 'Refresh Data',  kbd: 'R', action: function() { lt.autoRefresh.now(); } },
+        { id: 'action-suppress',  group: 'Actions',  icon: '🔕', label: 'New Suppression', kbd: 'S', action: function() { if (typeof openSuppressModal === 'function') openSuppressModal('host','',''); else window.location.href='/suppressions'; } },
+        { id: 'help-shortcuts',   group: 'Help',     icon: '?',  label: 'Keyboard Shortcuts',  kbd: '?', action: function() { lt.modal.open('lt-keys-help'); } },
+        { id: 'help-settings',    group: 'Help',     icon: '*',  label: 'Settings',             kbd: '*', action: function() { lt.modal.open('lt-settings-modal'); } },
+        { id: 'help-theme',       group: 'Help',     icon: '☀',  label: 'Toggle Theme',         action: function() { lt.theme.toggle(); } },
       ]);
     }
 
-    // Footer hint actions
+    // ── Global footer + key actions ───────────────────────────────────────
     document.addEventListener('click', function(e) {
-      var btn = e.target.closest('[data-action]');
+      const btn = e.target.closest('[data-action]');
       if (!btn) return;
-      if (btn.getAttribute('data-action') === 'show-keyboard-help' && window.lt) {
-        lt.modal.open('lt-keys-help');
-      }
+      const action = btn.getAttribute('data-action');
+      if (action === 'open-cmdpalette' && window.lt && lt.cmdPalette) lt.cmdPalette.open();
+      if (action === 'show-keyboard-help' && window.lt)               lt.modal.open('lt-keys-help');
+      if (action === 'open-settings' && window.lt)                    lt.modal.open('lt-settings-modal');
     });
 
-    lt.keys.on('r', function() {
-      if (typeof refreshAll === 'function') refreshAll();
+    lt.keys.on('r', function() { lt.autoRefresh.now(); });
+    lt.keys.on('?', function() { if (window.lt) lt.modal.open('lt-keys-help'); });
+    lt.keys.on('*', function() { if (window.lt) lt.modal.open('lt-settings-modal'); });
+    lt.keys.on('s', function() {
+      if (typeof openSuppressModal === 'function') openSuppressModal('host', '', '');
     });
+
+    // ── Avatar image error fallback ───────────────────────────────────────
+    document.addEventListener('error', function(e) {
+      if (e.target.tagName === 'IMG' && e.target.closest('.lt-avatar')) {
+        e.target.classList.add('lt-avatar-img-err');
+      }
+    }, true);
+
+    // ── Settings modal ────────────────────────────────────────────────────
+    (function() {
+      const LS_KEY = 'gandalf_settings';
+      const DEFAULT = { refreshInterval: 30 };
+
+      function loadSettings() {
+        try { return Object.assign({}, DEFAULT, JSON.parse(localStorage.getItem(LS_KEY) || '{}')); }
+        catch(_) { return Object.assign({}, DEFAULT); }
+      }
+
+      function saveSettings(s) {
+        try { localStorage.setItem(LS_KEY, JSON.stringify(s)); } catch(_) {}
+        if (typeof window.onGandalfSettingsChanged === 'function') window.onGandalfSettingsChanged(s);
+      }
+
+      function applyRefreshPillUI(interval) {
+        document.querySelectorAll('#settings-refresh-pills .pill').forEach(function(p) {
+          const isActive = parseInt(p.dataset.refreshInterval) === interval;
+          p.classList.toggle('active', isActive);
+          p.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+        });
+        const hint = document.getElementById('settings-refresh-hint');
+        if (hint) {
+          if (interval === 0)        hint.textContent = 'Auto-refresh disabled.';
+          else if (interval < 60)    hint.textContent = 'Refreshes every ' + interval + ' seconds.';
+          else                       hint.textContent = 'Refreshes every ' + Math.floor(interval/60) + ' minute' + (interval > 60 ? 's' : '') + '.';
+        }
+      }
+
+      // Init pill UI from saved settings
+      const _settings = loadSettings();
+      applyRefreshPillUI(_settings.refreshInterval);
+
+      // Expose for pages that need to read it (e.g. index.html for autoRefresh)
+      window.gandalfSettings = _settings;
+
+      document.addEventListener('click', function(e) {
+        const pill = e.target.closest('#settings-refresh-pills .pill[data-refresh-interval]');
+        if (!pill) return;
+        const interval = parseInt(pill.dataset.refreshInterval);
+        _settings.refreshInterval = interval;
+        saveSettings(_settings);
+        applyRefreshPillUI(interval);
+      });
+    })();
+
+    // ── Notification Bell — shows active monitoring alerts ────────────────
+    (function() {
+      const bell     = document.getElementById('lt-notif-bell');
+      const panel    = document.getElementById('lt-notif-panel');
+      const list     = document.getElementById('lt-notif-list');
+      const clearBtn = document.getElementById('lt-notif-clear-btn');
+      const wrapEl   = document.getElementById('lt-notif-wrap');
+      if (!bell || !panel) return;
+
+      let _open       = false;
+      let _lastEvents = [];
+      const LS_READ_KEY = 'gandalf_notif_read_before';
+
+      function getReadBefore() {
+        try { return parseInt(localStorage.getItem(LS_READ_KEY) || '0'); } catch(_) { return 0; }
+      }
+      function setReadBefore(ts) {
+        try { localStorage.setItem(LS_READ_KEY, String(ts)); } catch(_) {}
+      }
+
+      function esc(s) {
+        return (window.lt && lt.escHtml) ? lt.escHtml(String(s)) : String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+      }
+
+      function toMs(dateStr) {
+        if (!dateStr) return 0;
+        return new Date(dateStr.replace(' UTC','Z').replace(' ','T')).getTime();
+      }
+
+      function fmtAgo(dateStr) {
+        const diff = Math.floor((Date.now() - toMs(dateStr)) / 1000);
+        if (diff < 60)    return diff + 's ago';
+        if (diff < 3600)  return Math.floor(diff/60) + 'm ago';
+        if (diff < 86400) return Math.floor(diff/3600) + 'h ago';
+        return Math.floor(diff/86400) + 'd ago';
+      }
+
+      const SEV_DOT = { critical: 'var(--red)', warning: 'var(--amber)' };
+
+      function renderAlerts(events) {
+        _lastEvents = events || [];
+        const readBefore = getReadBefore();
+        const active = _lastEvents.filter(function(e) { return e.severity !== 'info'; });
+        const unreadCount = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
+        lt.notif.set(bell, unreadCount);
+
+        if (!active.length) {
+          list.innerHTML = '<div class="lt-notif-empty">&#x2714; No active alerts</div>';
+          return;
+        }
+        list.innerHTML = active.slice(0, 25).map(function(e) {
+          const isUnread = toMs(e.last_seen) > readBefore;
+          const dotColor = SEV_DOT[e.severity] || 'var(--text-muted)';
+          return '<div class="lt-notif-item' + (isUnread ? ' lt-notif-item--unread' : '') + '">' +
+            '<div class="lt-notif-dot' + (isUnread ? '' : ' lt-notif-dot--read') + '" style="background:' + dotColor + '"></div>' +
+            '<div class="lt-notif-item-body">' +
+              '<div class="lt-notif-item-title">' + esc(e.target_name) + (e.target_detail ? ' &middot; ' + esc(e.target_detail) : '') + '</div>' +
+              '<div class="lt-notif-item-time">' + esc(e.event_type.replace(/_/g,' ')) + ' &middot; ' + fmtAgo(e.last_seen) + '</div>' +
+            '</div></div>';
+        }).join('');
+      }
+
+      function fetchAlerts(andRender) {
+        fetch('/api/status', { credentials: 'same-origin' })
+          .then(function(r) { return r.json(); })
+          .then(function(data) {
+            const events = data.events || [];
+            if (andRender) {
+              renderAlerts(events);
+            } else {
+              _lastEvents = events;
+              const readBefore = getReadBefore();
+              const active = events.filter(function(e) { return e.severity !== 'info'; });
+              const unread = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
+              lt.notif.set(bell, unread);
+            }
+          })
+          .catch(function() {
+            if (andRender) list.innerHTML = '<div class="lt-notif-empty">Could not load</div>';
+          });
+      }
+
+      function openPanel()  { _open = true;  panel.removeAttribute('aria-hidden'); bell.setAttribute('aria-expanded','true');  fetchAlerts(true); }
+      function closePanel() { _open = false; panel.setAttribute('aria-hidden','true'); bell.setAttribute('aria-expanded','false'); }
+
+      bell.addEventListener('click', function(e) { e.stopPropagation(); _open ? closePanel() : openPanel(); });
+
+      if (clearBtn) {
+        clearBtn.addEventListener('click', function() {
+          setReadBefore(Date.now());
+          renderAlerts(_lastEvents);
+        });
+      }
+
+      document.addEventListener('click', function(e) { if (_open && wrapEl && !wrapEl.contains(e.target)) closePanel(); });
+      document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && _open) closePanel(); });
+
+      // Initial badge load + poll every 60 s
+      fetchAlerts(false);
+      setInterval(function() { fetchAlerts(_open); }, 60000);
+
+      // Allow refreshAll() to also push fresh events to the bell
+      window.gandalfNotifUpdate = function(events) { renderAlerts(events); };
+    })();
   </script>
 
 </body>

templates/index.html

@@ -6,27 +6,172 @@
 <!-- ── 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>
-    <button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="refresh">↻ REFRESH</button>
+    <span class="last-check" id="last-check" data-tooltip="Last monitor poll timestamp" data-tooltip-pos="bottom">{{ last_check }}</span>
+    <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>
 
+<!-- ── Stats summary cards ──────────────────────────────────────────── -->
+<div class="lt-stats-grid">
+  <div class="lt-stat-card{% if summary.critical %} lt-stat-card--alert{% endif %}"
+       id="stat-critical" role="button" tabindex="0"
+       data-stat-filter="critical" aria-label="{{ summary.critical or 0 }} critical alerts">
+    <span class="lt-stat-icon lt-text-red" aria-hidden="true">●</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value lt-text-red" id="stat-critical-val">{{ summary.critical or 0 }}</span>
+      <span class="lt-stat-label">Critical</span>
+    </div>
+  </div>
+  <div class="lt-stat-card"
+       id="stat-warning" role="button" tabindex="0"
+       data-stat-filter="warning" aria-label="{{ summary.warning or 0 }} warning alerts">
+    <span class="lt-stat-icon lt-text-amber" aria-hidden="true">●</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value lt-text-amber" id="stat-warning-val">{{ summary.warning or 0 }}</span>
+      <span class="lt-stat-label">Warning</span>
+    </div>
+  </div>
+  <div class="lt-stat-card" id="stat-hosts" aria-label="Monitored hosts">
+    <span class="lt-stat-icon lt-text-cyan" aria-hidden="true">⬡</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value lt-text-cyan" id="stat-hosts-val">{{ snapshot.hosts | length }}</span>
+      <span class="lt-stat-label">Hosts</span>
+    </div>
+  </div>
+  <div class="lt-stat-card" id="stat-resolved" aria-label="{{ recent_resolved | length }} alerts resolved in last 24 hours">
+    <span class="lt-stat-icon lt-text-green" aria-hidden="true">✔</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value lt-text-green" id="stat-resolved-val">{{ recent_resolved | length }}</span>
+      <span class="lt-stat-label">Resolved 24h</span>
+    </div>
+  </div>
+</div>
+
+<!-- ── Active alerts ─────────────────────────────── (above the fold) -->
+<section class="g-section">
+  <div class="g-section-header">
+    <h2 class="g-section-title">Active Alerts</h2>
+    <span class="g-section-badge" id="alert-count-badge"
+          {% if not summary.critical and not summary.warning %}style="display:none"{% endif %}>{{ (summary.critical or 0) + (summary.warning or 0) }}</span>
+  </div>
+  <div class="lt-toolbar">
+    <div class="lt-toolbar-left">
+      <div class="lt-search">
+        <input type="search" class="lt-input lt-search-input" id="events-search"
+               placeholder="Filter by target, type, description…" autocomplete="off"
+               aria-label="Filter active alerts">
+      </div>
+      <div class="sev-pills" role="group" aria-label="Filter by severity">
+        <button type="button" class="pill active" data-sev="" aria-pressed="true">All</button>
+        <button type="button" class="pill" data-sev="critical" aria-pressed="false">Critical</button>
+        <button type="button" class="pill" data-sev="warning" aria-pressed="false">Warning</button>
+      </div>
+    </div>
+  </div>
+  <div class="lt-frame">
+    <span class="lt-frame-bl">&#x255A;</span>
+    <span class="lt-frame-br">&#x255D;</span>
+    <div class="lt-section-header">Alert Queue</div>
+    <div id="events-table-wrap">
+    {% if events %}
+    {% if total_active is defined and total_active > events|length %}
+    <div class="pagination-notice">Showing {{ events|length }} of {{ total_active }} active alerts &mdash; <a href="/api/events?limit=1000">view all via API</a></div>
+    {% endif %}
+    <div class="lt-table-wrap">
+      <table class="lt-table" id="events-table">
+        <caption class="lt-sr-only">Active network alerts</caption>
+        <thead>
+          <tr>
+            <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 data-tooltip="When this alert was first raised" data-tooltip-pos="bottom">First Seen</th>
+            <th data-tooltip="Most recent check failure" data-tooltip-pos="bottom">Last Seen</th>
+            <th data-tooltip="Consecutive check failures since first seen" data-tooltip-pos="bottom">Failures</th>
+            <th>Ticket</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for e in events %}
+          {% if e.severity != 'info' %}
+          <tr class="row-{{ e.severity }}{% if e.is_suppressed %} row-suppressed{% endif %}">
+            <td>
+              <span class="lt-badge badge-{{ e.severity }}">{{ e.severity }}</span>
+              {% if e.is_suppressed %}<span class="lt-badge badge-suppressed" title="Alert suppressed">🔕 sup</span>{% endif %}
+            </td>
+            <td>{{ e.event_type | replace('_', ' ') }}</td>
+            <td><strong>{{ e.target_name }}</strong></td>
+            <td>{{ e.target_detail or '–' }}</td>
+            <td class="desc-cell" title="{{ e.description | e }}">{{ e.description | truncate(60) }}</td>
+            <td class="ts-cell" title="{{ e.first_seen }}">
+              <span class="event-age" data-ts="{{ e.first_seen }}">{{ e.first_seen }}</span>
+            </td>
+            <td class="ts-cell" title="{{ e.last_seen }}">
+              <span class="event-age" data-ts="{{ e.last_seen }}">{{ e.last_seen }}</span>
+            </td>
+            <td>{{ e.consecutive_failures }}</td>
+            <td>
+              {% if e.ticket_id %}
+              <a href="{{ config.ticket_api.web_url }}{{ e.ticket_id }}" target="_blank"
+                 class="ticket-link">#{{ e.ticket_id }}</a>
+              {% else %}–{% endif %}
+            </td>
+            <td>
+              <button class="lt-btn lt-btn-ghost lt-btn-sm btn-suppress"
+                      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" aria-label="Suppress alert for {{ e.target_name }}">🔕</button>
+            </td>
+          </tr>
+          {% endif %}
+          {% else %}
+          <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 %}
+    <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><!-- /#events-table-wrap -->
+  </div><!-- /.lt-frame -->
+</section>
+
 <!-- ── Network topology + host grid ───────────────────────────────── -->
 <section class="g-section">
   <div class="g-section-header">
     <h2 class="g-section-title">Network Hosts</h2>
+    <button type="button" class="topo-collapse-btn" id="topo-toggle-btn"
+            aria-expanded="true" aria-controls="topo-collapsible-wrap">&#x25B4; Collapse</button>
   </div>
+  <div class="topo-collapsible" id="topo-collapsible-wrap">
 
   <div class="topology" id="topology-diagram">
   <div class="topo-v2">
@@ -44,9 +189,9 @@
       </div>
     </div>
 
-    <!-- WAN wire: cyan → green gradient, labeled -->
+    <!-- WAN wire: cyan → WAN gradient -->
     <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 topo-vc-wire--wan"></div>
       <span class="topo-vc-label">WAN · 10G SFP+</span>
     </div>
 
@@ -64,7 +209,7 @@
 
     <!-- UDM-Pro → USW-Agg (10G SFP+) -->
     <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
+      <div class="topo-vc-wire topo-vc-wire--10g"></div>
       <span class="topo-vc-label">10G SFP+</span>
     </div>
 
@@ -83,7 +228,7 @@
 
     <!-- USW-Agg → Pro 24 PoE (10G trunk) -->
     <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
+      <div class="topo-vc-wire topo-vc-wire--10g"></div>
       <span class="topo-vc-label">10G trunk</span>
     </div>
 
@@ -102,14 +247,14 @@
 
     <!-- Pro 24 PoE → host bus section -->
     <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--border-color);opacity:.5;"></div>
+      <div class="topo-vc-wire topo-vc-wire--mgmt"></div>
     </div>
 
     <!-- ══════════════════════════════════════════════════════════════
          TIER 4 connecting bus – two rails (10G green + 1G amber dashed)
          showing dual-homing for all 6 servers
          ══════════════════════════════════════════════════════════ -->
-    <div class="topo-bus-section" style="max-width:860px;">
+    <div class="topo-bus-section">
 
       <!-- 10G storage bus (Agg → VLAN90) -->
       <div class="topo-bus-10g">
@@ -142,8 +287,8 @@
             <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 '' }}"
-               data-host="{{ hname }}" style="min-width:80px; max-width:96px;">
+          <div class="topo-v2-node topo-v2-host topo-host topo-v2-status-{{ st }}{{ ' topo-v2-offrack' if off_rack else '' }} topo-v2-host--bus"
+               data-host="{{ hname }}">
             <span class="topo-v2-icon">▣</span>
             <span class="topo-v2-label">{{ hlabel }}</span>
             <span class="topo-v2-sub">{{ hsub }}</span>
@@ -161,13 +306,21 @@
       <div class="topo-legend-item"><span class="topo-legend-line-wan"></span> WAN / uplink</div>
       <div class="topo-legend-item"><span class="topo-legend-line-10g"></span> 10G SFP+ (Ceph / VLAN90)</div>
       <div class="topo-legend-item"><span class="topo-legend-line-1g"></span> 1G DHCP (mgmt)</div>
-      <div class="topo-legend-item" style="border:1px dashed var(--border-color); padding:1px 5px; font-size:.56em; color:var(--text-muted);">dashed border = off-rack</div>
+      <div class="topo-legend-item topo-legend-item--offrack">dashed border = off-rack</div>
     </div>
 
   </div><!-- /topo-v2 -->
   </div>
 
   <!-- Host cards -->
+  <div class="lt-toolbar" id="host-toolbar">
+    <div class="lt-toolbar-left">
+      <div class="lt-search">
+        <input type="search" class="lt-input lt-search-input lt-search-input--sm" id="host-search"
+               placeholder="Filter hosts…" autocomplete="off" aria-label="Filter hosts">
+      </div>
+    </div>
+  </div>
   <div class="host-grid" id="host-grid">
     {% for name, host in snapshot.hosts.items() %}
     {% set suppressed = suppressions | selectattr('target_name', 'equalto', name) | list %}
@@ -205,19 +358,24 @@
                 data-sup-type="host"
                 data-sup-name="{{ name }}"
                 data-sup-detail=""
-                title="Suppress alerts for this host">
+                aria-label="Suppress alerts for {{ name }}">
           🔕 Suppress
         </button>
         <a href="{{ url_for('links_page') }}#{{ name }}"
-           class="lt-btn lt-btn-secondary lt-btn-sm" style="text-decoration:none">
+           class="lt-btn lt-btn-secondary lt-btn-sm">
           ↗ Links
         </a>
       </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>
+  </div><!-- /#topo-collapsible-wrap -->
 </section>
 
 <!-- ── UniFi devices ────────────────────────────────────────────────── -->
@@ -226,131 +384,53 @@
   <div class="g-section-header">
     <h2 class="g-section-title">UniFi Devices</h2>
   </div>
-  <div class="lt-table-wrap">
-    <table class="lt-table" id="unifi-table">
-      <caption class="lt-sr-only">UniFi network devices</caption>
-      <thead>
-        <tr>
-          <th>Status</th>
-          <th>Name</th>
-          <th>Type</th>
-          <th>Model</th>
-          <th>IP</th>
-          <th>Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for d in snapshot.unifi %}
-        <tr class="{% if not d.connected %}row-critical{% endif %}">
-          <td>
-            <span class="dot-{{ 'up' if d.connected else 'down' }}"></span>
-            {{ 'ONLINE' if d.connected else 'OFFLINE' }}
-          </td>
-          <td><strong>{{ d.name }}</strong></td>
-          <td>{{ d.type }}</td>
-          <td>{{ d.model }}</td>
-          <td>{{ d.ip }}</td>
-          <td>
-            {% if not d.connected %}
-            <button class="lt-btn lt-btn-ghost lt-btn-sm btn-suppress"
-                    data-sup-type="unifi_device"
-                    data-sup-name="{{ d.name }}"
-                    data-sup-detail="">
-              🔕 Suppress
-            </button>
-            {% endif %}
-          </td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-</section>
-{% endif %}
-
-<!-- ── Active alerts ───────────────────────────────────────────────── -->
-<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">{{ (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"
-               placeholder="Filter by target, type, description…" autocomplete="off">
-        <div class="sev-pills">
-          <button type="button" class="pill active" data-sev="">All</button>
-          <button type="button" class="pill" data-sev="critical">Critical</button>
-          <button type="button" class="pill" data-sev="warning">Warning</button>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div id="events-table-wrap">
-    {% if events %}
-    {% if total_active is defined and total_active > events|length %}
-    <div class="pagination-notice">Showing {{ events|length }} of {{ total_active }} active alerts &mdash; <a href="/api/events?limit=1000">view all via API</a></div>
-    {% endif %}
+  <div class="lt-frame">
+    <span class="lt-frame-bl">&#x255A;</span>
+    <span class="lt-frame-br">&#x255D;</span>
+    <div class="lt-section-header">Device Inventory</div>
     <div class="lt-table-wrap">
-      <table class="lt-table" id="events-table">
-        <caption class="lt-sr-only">Active network alerts</caption>
+      <table class="lt-table" id="unifi-table">
+        <caption class="lt-sr-only">UniFi network devices</caption>
         <thead>
           <tr>
-            <th>Sev</th>
+            <th>Status</th>
+            <th>Name</th>
             <th>Type</th>
-            <th>Target</th>
-            <th>Detail</th>
-            <th>Description</th>
-            <th>First Seen</th>
-            <th>Last Seen</th>
-            <th>Failures</th>
-            <th>Ticket</th>
+            <th>Model</th>
+            <th>IP</th>
             <th>Actions</th>
           </tr>
         </thead>
         <tbody>
-          {% for e in events %}
-          {% if e.severity != 'info' %}
-          <tr class="row-{{ e.severity }}">
-            <td><span class="lt-badge badge-{{ e.severity }}">{{ e.severity }}</span></td>
-            <td>{{ e.event_type | replace('_', ' ') }}</td>
-            <td><strong>{{ e.target_name }}</strong></td>
-            <td>{{ e.target_detail or '–' }}</td>
-            <td class="desc-cell" title="{{ e.description | e }}">{{ e.description | truncate(60) }}</td>
-            <td class="ts-cell" title="{{ e.first_seen }}">
-              <span class="event-age" data-ts="{{ e.first_seen }}">{{ e.first_seen }}</span>
-            </td>
-            <td class="ts-cell" title="{{ e.last_seen }}">
-              <span class="event-age" data-ts="{{ e.last_seen }}">{{ e.last_seen }}</span>
-            </td>
-            <td>{{ e.consecutive_failures }}</td>
+          {% for d in snapshot.unifi %}
+          <tr class="{% if not d.connected %}row-critical{% endif %}">
             <td>
-              {% if e.ticket_id %}
-              <a href="{{ config.ticket_api.web_url }}{{ e.ticket_id }}" target="_blank"
-                 class="ticket-link">#{{ e.ticket_id }}</a>
-              {% else %}–{% endif %}
+              <span class="dot-{{ 'up' if d.connected else 'down' }}"></span>
+              {{ 'ONLINE' if d.connected else 'OFFLINE' }}
             </td>
+            <td><strong>{{ d.name }}</strong></td>
+            <td>{{ d.type }}</td>
+            <td>{{ d.model }}</td>
+            <td>{{ d.ip }}</td>
             <td>
+              {% if not d.connected %}
               <button class="lt-btn lt-btn-ghost lt-btn-sm btn-suppress"
-                      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" aria-label="Suppress alert for {{ e.target_name }}">🔕</button>
+                      data-sup-type="unifi_device"
+                      data-sup-name="{{ d.name }}"
+                      data-sup-detail=""
+                      aria-label="Suppress alerts for {{ d.name }}">
+                🔕 Suppress
+              </button>
+              {% endif %}
             </td>
           </tr>
-          {% endif %}
-          {% else %}
-          <tr><td colspan="10" class="empty-state">No active alerts ✔</td></tr>
           {% endfor %}
         </tbody>
       </table>
     </div>
-    {% else %}
-    <p class="empty-state">No active alerts ✔</p>
-    {% endif %}
   </div>
 </section>
+{% endif %}
 
 <!-- ── Recently Resolved (last 24h) ───────────────────────────────── -->
 {% if recent_resolved %}
@@ -359,98 +439,64 @@
     <h2 class="g-section-title">Recently Resolved</h2>
     <span class="g-section-badge g-section-badge-resolved">{{ recent_resolved | length }} in last 24h</span>
   </div>
-  <div class="lt-table-wrap">
-    <table class="lt-table">
-      <caption class="lt-sr-only">Recently resolved alerts</caption>
-      <thead>
-        <tr>
-          <th>Sev</th>
-          <th>Type</th>
-          <th>Target</th>
-          <th>Detail</th>
-          <th>Resolved</th>
-          <th>Duration</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for e in recent_resolved %}
-        <tr class="row-resolved">
-          <td><span class="lt-badge badge-resolved">{{ e.severity }}</span></td>
-          <td>{{ e.event_type | replace('_', ' ') }}</td>
-          <td><strong>{{ e.target_name }}</strong></td>
-          <td>{{ e.target_detail or '–' }}</td>
-          <td class="ts-cell">
-            <span class="event-age" data-ts="{{ e.resolved_at }}">{{ e.resolved_at }}</span>
-          </td>
-          <td class="ts-cell event-duration" data-first="{{ e.first_seen }}" data-resolved="{{ e.resolved_at }}">–</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
+  <div class="lt-timeline">
+    {% for e in recent_resolved %}
+    {%- set dot_cls = 'lt-timeline-item--green' if e.severity == 'info' else 'lt-timeline-item--dim' -%}
+    <div class="lt-timeline-item {{ dot_cls }}">
+      <div class="lt-timeline-meta">
+        <strong class="lt-timeline-actor">{{ e.target_name }}</strong>
+        {% if e.target_detail %}<span>· {{ e.target_detail }}</span>{% endif %}
+        <span class="lt-timeline-time event-age" data-ts="{{ e.resolved_at }}">{{ e.resolved_at }}</span>
+      </div>
+      <div class="lt-timeline-body">
+        {{ e.event_type | replace('_', ' ') }}
+        &nbsp;·&nbsp;
+        <span class="lt-badge badge-resolved">{{ e.severity }}</span>
+        &nbsp;·&nbsp; duration
+        <span class="event-duration" data-first="{{ e.first_seen }}" data-resolved="{{ e.resolved_at }}">–</span>
+      </div>
+    </div>
+    {% endfor %}
   </div>
 </section>
 {% endif %}
 
-<!-- ── Quick-suppress modal ─────────────────────────────────────────── -->
-<div id="suppress-modal" class="lt-modal-overlay"
-     role="dialog" aria-modal="true" aria-labelledby="suppress-modal-title" aria-hidden="true">
-  <div class="lt-modal">
-    <div class="lt-modal-header">
-      <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">
-      <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">
-            <option value="host">Host (all interfaces)</option>
-            <option value="interface">Specific Interface</option>
-            <option value="unifi_device">UniFi Device</option>
-            <option value="all">Global Maintenance</option>
-          </select>
-        </div>
-        <div class="lt-form-group" id="sup-name-group" style="margin-bottom:12px">
-          <label class="lt-label" for="sup-name">Target Name</label>
-          <input type="text" class="lt-input" id="sup-name" name="target_name" placeholder="e.g. large1">
-        </div>
-        <div class="lt-form-group" id="sup-detail-group" style="margin-bottom:12px;display:none">
-          <label class="lt-label" for="sup-detail">Interface <span class="lt-field-hint">(interface type only)</span></label>
-          <input type="text" class="lt-input" id="sup-detail" name="target_detail" placeholder="e.g. enp35s0">
-        </div>
-        <div class="lt-form-group" style="margin-bottom:12px">
-          <label class="lt-label" for="sup-reason">Reason <span class="required">*</span></label>
-          <input type="text" class="lt-input" id="sup-reason" name="reason"
-                 placeholder="e.g. Planned switch reboot" required>
-        </div>
-        <div class="lt-form-group" style="margin-bottom:0">
-          <label class="lt-label">Duration</label>
-          <div class="duration-pills">
-            <button type="button" class="pill" data-duration="30">30 min</button>
-            <button type="button" class="pill" data-duration="60">1 hr</button>
-            <button type="button" class="pill" data-duration="240">4 hr</button>
-            <button type="button" class="pill" data-duration="480">8 hr</button>
-            <button type="button" class="pill pill-manual active" data-duration="">Manual ∞</button>
-          </div>
-          <input type="hidden" id="sup-expires" name="expires_minutes" value="">
-          <div class="lt-field-hint" id="duration-hint">Persists until manually removed.</div>
-        </div>
-      </div>
-      <div class="lt-modal-footer">
-        <button type="button" class="lt-btn lt-btn-secondary" data-modal-close>Cancel</button>
-        <button type="submit" class="lt-btn lt-btn-primary">Apply</button>
-      </div>
-    </form>
-  </div>
-</div>
-
 {% endblock %}
 
 {% block scripts %}
 <script>
-  lt.autoRefresh.start(refreshAll, 30000);
-  document.getElementById('suppress-form')?.addEventListener('submit', submitSuppress);
-  document.getElementById('sup-type')?.addEventListener('change', updateSuppressForm);
+  // Start auto-refresh using saved settings interval (default 30 s)
+  const _savedInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 30;
+  if (_savedInterval > 0) lt.autoRefresh.start(refreshAll, _savedInterval * 1000);
+
+  // When settings change, restart auto-refresh with new interval
+  window.onGandalfSettingsChanged = function(s) {
+    lt.autoRefresh.stop();
+    if (s.refreshInterval > 0) lt.autoRefresh.start(refreshAll, s.refreshInterval * 1000);
+  };
+
+  // ── Topology collapse toggle ───────────────────────────────────
+  (function() {
+    const LS_KEY = 'gandalf_topo_collapsed';
+    const btn    = document.getElementById('topo-toggle-btn');
+    const wrap   = document.getElementById('topo-collapsible-wrap');
+    if (!btn || !wrap) return;
+
+    function setCollapsed(v) {
+      wrap.classList.toggle('is-collapsed', v);
+      btn.setAttribute('aria-expanded', v ? 'false' : 'true');
+      btn.textContent = v ? '▾ Expand' : '▴ Collapse';
+      try { localStorage.setItem(LS_KEY, v ? '1' : '0'); } catch(_) {}
+    }
+
+    let saved = false;
+    try { saved = localStorage.getItem(LS_KEY) === '1'; } catch(_) {}
+    setCollapsed(saved);
+
+    btn.addEventListener('click', function() {
+      setCollapsed(!wrap.classList.contains('is-collapsed'));
+    });
+  })();
 
   function updateEventAges() {
     document.querySelectorAll('.event-age[data-ts]').forEach(el => {
@@ -496,8 +542,12 @@
   document.querySelector('.sev-pills')?.addEventListener('click', e => {
     const pill = e.target.closest('.pill[data-sev]');
     if (!pill) return;
-    document.querySelectorAll('.sev-pills .pill').forEach(p => p.classList.remove('active'));
+    document.querySelectorAll('.sev-pills .pill').forEach(p => {
+      p.classList.remove('active');
+      p.setAttribute('aria-pressed', 'false');
+    });
     pill.classList.add('active');
+    pill.setAttribute('aria-pressed', 'true');
     _filterSev = pill.dataset.sev;
     applyEventsFilter();
   });
@@ -505,5 +555,31 @@
   // Re-apply filter after dynamic table updates
   new MutationObserver(applyEventsFilter)
     .observe(document.getElementById('events-table-wrap'), { childList: true, subtree: true });
+
+  // Host grid search filter
+  document.getElementById('host-search')?.addEventListener('input', function() {
+    const q = this.value.trim().toLowerCase();
+    document.querySelectorAll('#host-grid .host-card').forEach(card => {
+      const name = (card.dataset.host || '').toLowerCase();
+      card.style.display = (!q || name.includes(q)) ? '' : 'none';
+    });
+  });
+
+  // Stat card clicks — filter events table by severity
+  document.querySelectorAll('.lt-stat-card[data-stat-filter]').forEach(card => {
+    card.addEventListener('click', () => {
+      const sev = card.dataset.statFilter;
+      document.querySelectorAll('.sev-pills .pill').forEach(p => {
+        p.classList.remove('active');
+        p.setAttribute('aria-pressed', 'false');
+      });
+      const matchPill = document.querySelector(`.sev-pills .pill[data-sev="${sev}"]`);
+      if (matchPill) { matchPill.classList.add('active'); matchPill.setAttribute('aria-pressed', 'true'); }
+      _filterSev = sev;
+      applyEventsFilter();
+      document.getElementById('events-table-wrap')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+    card.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); card.click(); } });
+  });
 </script>
 {% endblock %}

templates/inspector.html

@@ -3,19 +3,21 @@
 
 {% block content %}
 
-<div class="g-page-header">
-  <h1 class="g-page-title">Network Inspector</h1>
-  <p class="g-page-sub">
-    Visual switch chassis diagrams. Click a port to see detailed stats and LLDP path debug.
-    <span id="inspector-updated" style="margin-left:10px; color:var(--text-muted); font-size:.85em;"></span>
-  </p>
+<div class="lt-page-header">
+  <div>
+    <h1 class="lt-page-title">Network Inspector</h1>
+    <p class="g-page-sub">
+      Visual switch chassis diagrams. Click a port to see detailed stats and LLDP path debug.
+      <span id="inspector-updated" class="g-page-sub-aside"></span>
+    </p>
+  </div>
 </div>
 
 <div class="inspector-layout">
-  <div class="inspector-main" id="inspector-main">
+  <div class="inspector-main" id="inspector-main" role="region" aria-label="Switch chassis diagrams">
     <div class="link-loading">Loading inspector data</div>
   </div>
-  <div class="inspector-panel" id="inspector-panel">
+  <div class="inspector-panel" id="inspector-panel" role="complementary" aria-label="Port detail panel">
     <div class="inspector-panel-inner" id="inspector-panel-inner"></div>
   </div>
 </div>
@@ -114,7 +116,7 @@ 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}"
     data-action="select-port"><span class="port-num">${numLabel}</span>${speedHtml}${lldpHtml}</div>`;
 }
 
@@ -259,7 +261,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 +271,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="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">RX</span><span class="panel-val">${fmtRate(d.rx_bytes_rate)}</span></div>`;
+      <div class="lt-divider"><span class="lt-divider-label">Traffic</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" 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 +293,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 +320,9 @@ function renderPanel(swName, idx) {
     _apiData.hosts && _apiData.hosts[d.lldp.system_name]);
   const diagHtml = hasDiagTarget ? `
     <div class="diag-bar">
-      <button class="btn-diag" data-action="run-diagnostic" data-sw="${escHtml(swName)}" data-idx="${idx}">Run Link Diagnostics</button>
+      <button class="btn-diag lt-btn lt-btn-secondary lt-btn-sm" data-action="run-diagnostic"
+              data-sw="${escHtml(swName)}" data-idx="${idx}"
+              aria-label="Run link diagnostics for port ${idx} on ${escHtml(swName)}">Run Diagnostics</button>
       <span class="diag-status" id="diag-status"></span>
     </div>
     <div class="diag-results" id="diag-results"></div>` : '';
@@ -333,11 +337,11 @@ function renderPanel(swName, idx) {
       <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">Auto-neg</span><span class="panel-val val-neutral">${autoneg}</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" 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 +396,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">
@@ -425,12 +429,13 @@ function renderInspector(data) {
   const main = document.getElementById('inspector-main');
   const switches = data.unifi_switches || {};
 
-  const upd = data.updated ? `Updated: ${data.updated}` : '';
   const updEl = document.getElementById('inspector-updated');
-  if (updEl) updEl.textContent = upd;
+  if (updEl && data.updated) {
+    updEl.textContent = 'Updated: ' + new Date(data.updated + (data.updated.includes('Z') ? '' : 'Z')).toLocaleTimeString();
+  }
 
   if (!Object.keys(switches).length) {
-    main.innerHTML = '<p class="empty-state">No switch data available. Monitor may still be initialising.</p>';
+    main.innerHTML = '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">⬡</div><div class="lt-empty-state-title">No switch data available</div><div class="lt-empty-state-body">Monitor may still be initialising.</div></div>';
     return;
   }
 
@@ -457,13 +462,19 @@ async function loadInspector() {
     renderInspector(data);
   } catch (e) {
     document.getElementById('inspector-main').innerHTML =
-      '<p class="empty-state">Failed to load inspector data.</p>';
+      '<div class="lt-empty-state lt-empty-state--sm"><div class="lt-empty-state-icon">✕</div><div class="lt-empty-state-title">Failed to load inspector data</div></div>';
     lt.toast.error('Failed to load inspector data');
   }
 }
 
 loadInspector();
-lt.autoRefresh.start(loadInspector, 60000);
+const _inspInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 60;
+if (_inspInterval > 0) lt.autoRefresh.start(loadInspector, Math.max(_inspInterval, 15) * 1000);
+
+window.onGandalfSettingsChanged = function(s) {
+  lt.autoRefresh.stop();
+  if (s.refreshInterval > 0) lt.autoRefresh.start(loadInspector, Math.max(s.refreshInterval, 15) * 1000);
+};
 lt.keys.on('Escape', () => {
   if (document.getElementById('inspector-panel').classList.contains('open')) closePanel();
 });

templates/links.html

@@ -3,13 +3,28 @@
 
 {% block content %}
 
-<div class="g-page-header">
-  <h1 class="g-page-title">Link Debug</h1>
-  <p class="g-page-sub">
-    Per-interface stats: speed, duplex, SFP optical levels, TX/RX rates, errors, and carrier changes.
-    Data collected via Prometheus node_exporter + SSH ethtool (servers) and UniFi API (switches) every poll cycle.
-    <span id="links-updated" style="margin-left:10px; color:var(--text-muted); font-size:.85em;"></span>
-  </p>
+<div class="lt-page-header">
+  <div>
+    <h1 class="lt-page-title">Link Debug</h1>
+    <p class="g-page-sub">
+      Per-interface stats: speed, duplex, SFP optical levels, TX/RX rates, errors, and carrier changes.
+      <span id="links-updated" class="g-page-sub-aside"></span>
+    </p>
+  </div>
+</div>
+
+<div class="lt-toolbar" id="links-toolbar" style="display:none">
+  <div class="lt-toolbar-left">
+    <div class="lt-search">
+      <input type="search" class="lt-input lt-search-input" id="links-search"
+             placeholder="Filter by host or switch name…" autocomplete="off"
+             aria-label="Filter by host or switch name">
+    </div>
+  </div>
+  <div class="lt-toolbar-right">
+    <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" data-action="expand-all">Expand All</button>
+  </div>
 </div>
 
 <div id="links-container">
@@ -21,6 +36,7 @@
 {% block scripts %}
 <script>
 const escHtml = s => lt.escHtml(s);
+const _toIso  = s => s ? s.replace(' UTC', 'Z').replace(' ', 'T') : s;
 
 // ── Formatting helpers ────────────────────────────────────────────
 function fmtRate(bytesPerSec) {
@@ -40,6 +56,7 @@ function fmtRateBar(bytesPerSec, linkSpeedMbps) {
 
 function trafficBarClass(pct, isTx) {
   if (pct > 85) return 'lt-progress--red';
+  if (pct > 65) return 'lt-progress--amber';
   return isTx ? '' : 'lt-progress--cyan';
 }
 
@@ -152,26 +169,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>
@@ -179,7 +196,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>
@@ -200,42 +217,42 @@ 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="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="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>
@@ -310,7 +327,7 @@ function renderPortCard(portName, d) {
 function renderUnifiSwitches(unifiSwitches, dataUpdated) {
   if (!unifiSwitches || !Object.keys(unifiSwitches).length) return '';
   const updStr = dataUpdated
-    ? new Date(dataUpdated.replace(' UTC', 'Z').replace(' ', 'T')).toLocaleTimeString()
+    ? new Date(_toIso(dataUpdated)).toLocaleTimeString()
     : '';
   const html = Object.entries(unifiSwitches).map(([swName, sw]) => {
     const ports = sw.ports || {};
@@ -332,7 +349,7 @@ function renderUnifiSwitches(unifiSwitches, dataUpdated) {
 
     return `
       <div class="link-host-panel" id="panel-${CSS.escape(swName)}">
-        <div class="link-host-title" data-action="toggle-panel">
+        <div class="link-host-title" data-action="toggle-panel" role="button" tabindex="0" aria-expanded="true">
           <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>
@@ -343,14 +360,17 @@ function renderUnifiSwitches(unifiSwitches, dataUpdated) {
       </div>`;
   }).join('');
 
-  return `<div class="unifi-section-header">UNIFI SWITCH PORTS</div>${html}`;
+  return `<div class="lt-divider lt-divider--unifi"><span class="lt-divider-label lt-divider-label--unifi">UNIFI SWITCH PORTS</span></div>${html}`;
 }
 
 // ── Panel collapse / expand ───────────────────────────────────────
 function togglePanel(panel) {
   panel.classList.toggle('collapsed');
-  const btn = panel.querySelector('.panel-toggle');
-  if (btn) btn.textContent = panel.classList.contains('collapsed') ? '[+]' : '[–]';
+  const isCollapsed = panel.classList.contains('collapsed');
+  const btn   = panel.querySelector('.panel-toggle');
+  const title = panel.querySelector('.link-host-title');
+  if (btn)   btn.textContent = isCollapsed ? '[+]' : '[–]';
+  if (title) title.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
   const id = panel.id;
   if (id) {
     const collapsed = JSON.parse(sessionStorage.getItem('linksCollapsed') || '{}');
@@ -366,8 +386,10 @@ function restoreCollapseState() {
     if (!panel) continue;
     if (isCollapsed) {
       panel.classList.add('collapsed');
-      const btn = panel.querySelector('.panel-toggle');
-      if (btn) btn.textContent = '[+]';
+      const btn   = panel.querySelector('.panel-toggle');
+      const title = panel.querySelector('.link-host-title');
+      if (btn)   btn.textContent = '[+]';
+      if (title) title.setAttribute('aria-expanded', 'false');
     }
   }
 }
@@ -382,33 +404,51 @@ function buildLinkSummary(hosts, unifiSwitches) {
       if ((d.tx_errs_rate || 0) > 0 || (d.rx_errs_rate || 0) > 0) errIfaces++;
     }
   }
+  let swTotal = 0, swDown = 0;
   for (const sw of Object.values(unifiSwitches || {})) {
     for (const p of Object.values(sw.ports || {})) {
       totalPoe += p.poe_power || 0;
+      swTotal++;
+      if (!p.up) swDown++;
     }
   }
-  const hasAlerts = downIfaces > 0 || errIfaces > 0;
-  return `
-    <div class="link-summary-panel ${hasAlerts ? 'link-summary-has-alerts' : ''}">
-      <div class="link-summary-grid">
-        <div class="link-summary-stat">
-          <span class="lss-label">Total Interfaces</span>
-          <span class="lss-value">${totalIfaces}</span>
-        </div>
-        <div class="link-summary-stat ${downIfaces ? 'lss-alert' : ''}">
-          <span class="lss-label">Interfaces Down</span>
-          <span class="lss-value ${downIfaces ? 'val-crit' : 'val-good'}">${downIfaces}</span>
-        </div>
-        <div class="link-summary-stat ${errIfaces ? 'lss-alert' : ''}">
-          <span class="lss-label">With Errors</span>
-          <span class="lss-value ${errIfaces ? 'val-warn' : 'val-good'}">${errIfaces}</span>
-        </div>
-        ${totalPoe > 0 ? `
-        <div class="link-summary-stat">
-          <span class="lss-label">PoE Load</span>
-          <span class="lss-value">${totalPoe.toFixed(1)} <span class="lss-sub">W</span></span>
-        </div>` : ''}
+  const allTotal = totalIfaces + swTotal;
+  const allDown  = downIfaces  + swDown;
+  const downCls    = allDown  > 0 ? 'lt-text-red'   : 'lt-text-green';
+  const errCls     = errIfaces > 0 ? 'lt-text-amber' : 'lt-text-green';
+  const downCardCls = allDown  > 0 ? ' lt-stat-card--alert' : '';
+  const poeCard = totalPoe > 0 ? `
+    <div class="lt-stat-card">
+      <span class="lt-stat-icon lt-text-amber" aria-hidden="true">⚡</span>
+      <div class="lt-stat-info">
+        <span class="lt-stat-value lt-text-amber">${totalPoe.toFixed(1)}</span>
+        <span class="lt-stat-label">PoE Load (W)</span>
       </div>
+    </div>` : '';
+  return `
+    <div class="lt-stats-grid lt-stats-grid--mb">
+      <div class="lt-stat-card">
+        <span class="lt-stat-icon lt-text-cyan" aria-hidden="true">⬡</span>
+        <div class="lt-stat-info">
+          <span class="lt-stat-value lt-text-cyan">${allTotal}</span>
+          <span class="lt-stat-label">Interfaces</span>
+        </div>
+      </div>
+      <div class="lt-stat-card${downCardCls}">
+        <span class="lt-stat-icon ${downCls}" aria-hidden="true">●</span>
+        <div class="lt-stat-info">
+          <span class="lt-stat-value ${downCls}">${allDown}</span>
+          <span class="lt-stat-label">Ports Down</span>
+        </div>
+      </div>
+      <div class="lt-stat-card">
+        <span class="lt-stat-icon ${errCls}" aria-hidden="true">▲</span>
+        <div class="lt-stat-info">
+          <span class="lt-stat-value ${errCls}">${errIfaces}</span>
+          <span class="lt-stat-label">With Errors</span>
+        </div>
+      </div>
+      ${poeCard}
     </div>`;
 }
 
@@ -419,10 +459,6 @@ function renderLinks(data) {
   const parts       = [];
 
   parts.push(buildLinkSummary(hosts, unifiSwitches));
-  parts.push(`<div class="link-collapse-bar">
-    <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" data-action="expand-all">Expand All</button>
-  </div>`);
   parts.push('<div class="link-host-list">');
 
   for (const [hostname, ifaces] of Object.entries(hosts)) {
@@ -431,13 +467,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
-      ? new Date(sample.updated + (sample.updated.includes('Z') ? '' : 'Z')).toLocaleTimeString()
+    const updStr  = data.updated
+      ? new Date(_toIso(data.updated)).toLocaleTimeString()
       : '';
 
     parts.push(`
       <div class="link-host-panel" id="panel-${CSS.escape(hostname)}">
-        <div class="link-host-title" data-action="toggle-panel">
+        <div class="link-host-title" data-action="toggle-panel" role="button" tabindex="0" aria-expanded="true">
           <span class="link-host-name">${escHtml(hostname)}</span>
           <span class="link-host-ip">${escHtml(ip)}</span>
           <span class="link-host-upd">${updStr}</span>
@@ -451,13 +487,26 @@ function renderLinks(data) {
   parts.push('</div>');
   document.getElementById('links-container').innerHTML = parts.join('');
   restoreCollapseState();
+  document.getElementById('links-toolbar').style.display = '';
+  applyLinksSearch();
+}
+
+// ── Host/switch search filter ─────────────────────────────────────
+function applyLinksSearch() {
+  const q = (document.getElementById('links-search')?.value || '').trim().toLowerCase();
+  document.querySelectorAll('.link-host-panel').forEach(panel => {
+    const text = (panel.querySelector('.link-host-name')?.textContent || '').toLowerCase();
+    panel.style.display = (!q || text.includes(q)) ? '' : 'none';
+  });
 }
 
 function collapseAll() {
   document.querySelectorAll('.link-host-panel').forEach(p => {
     p.classList.add('collapsed');
-    const btn = p.querySelector('.panel-toggle');
-    if (btn) btn.textContent = '[+]';
+    const btn   = p.querySelector('.panel-toggle');
+    const title = p.querySelector('.link-host-title');
+    if (btn)   btn.textContent = '[+]';
+    if (title) title.setAttribute('aria-expanded', 'false');
   });
   sessionStorage.setItem('linksCollapsed', JSON.stringify(
     Object.fromEntries([...document.querySelectorAll('.link-host-panel')].map(p => [p.id, true]))
@@ -467,8 +516,10 @@ function collapseAll() {
 function expandAll() {
   document.querySelectorAll('.link-host-panel').forEach(p => {
     p.classList.remove('collapsed');
-    const btn = p.querySelector('.panel-toggle');
-    if (btn) btn.textContent = '[–]';
+    const btn   = p.querySelector('.panel-toggle');
+    const title = p.querySelector('.link-host-title');
+    if (btn)   btn.textContent = '[–]';
+    if (title) title.setAttribute('aria-expanded', 'true');
   });
   sessionStorage.setItem('linksCollapsed', '{}');
 }
@@ -517,7 +568,13 @@ async function loadLinks() {
 }
 
 loadLinks();
-lt.autoRefresh.start(loadLinks, 60000);
+const _linksInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 60;
+if (_linksInterval > 0) lt.autoRefresh.start(loadLinks, Math.max(_linksInterval, 15) * 1000);
+
+window.onGandalfSettingsChanged = function(s) {
+  lt.autoRefresh.stop();
+  if (s.refreshInterval > 0) lt.autoRefresh.start(loadLinks, Math.max(s.refreshInterval, 15) * 1000);
+};
 
 document.addEventListener('click', e => {
   const toggleTitle = e.target.closest('[data-action="toggle-panel"]');
@@ -526,5 +583,13 @@ document.addEventListener('click', e => {
   if (e.target.closest('[data-action="collapse-all"]')) { collapseAll(); return; }
   if (e.target.closest('[data-action="expand-all"]'))   { expandAll();   return; }
 });
+
+document.addEventListener('keydown', e => {
+  if (e.key !== 'Enter' && e.key !== ' ') return;
+  const toggleTitle = e.target.closest('[data-action="toggle-panel"]');
+  if (toggleTitle) { e.preventDefault(); togglePanel(toggleTitle.closest('.link-host-panel')); }
+});
+
+document.getElementById('links-search')?.addEventListener('input', applyLinksSearch);
 </script>
 {% endblock %}

templates/suppressions.html

@@ -3,9 +3,11 @@
 
 {% block content %}
 
-<div class="g-page-header">
-  <h1 class="g-page-title">Alert Suppressions</h1>
-  <p class="g-page-sub">Manage maintenance windows and per-target alert suppression rules.</p>
+<div class="lt-page-header">
+  <div>
+    <h1 class="lt-page-title">Alert Suppressions</h1>
+    <p class="g-page-sub">Manage maintenance windows and per-target alert suppression rules.</p>
+  </div>
 </div>
 
 <!-- ── Create suppression ─────────────────────────────────────────── -->
@@ -56,12 +58,12 @@
         <div class="form-row form-row-align">
           <div class="lt-form-group">
             <label class="lt-label">Duration</label>
-            <div class="duration-pills">
-              <button type="button" class="pill" data-duration="30">30 min</button>
-              <button type="button" class="pill" data-duration="60">1 hr</button>
-              <button type="button" class="pill" data-duration="240">4 hr</button>
-              <button type="button" class="pill" data-duration="480">8 hr</button>
-              <button type="button" class="pill pill-manual active" data-duration="">Manual ∞</button>
+            <div class="duration-pills" role="group" aria-label="Select suppression duration">
+              <button type="button" class="pill" data-duration="30" aria-pressed="false">30 min</button>
+              <button type="button" class="pill" data-duration="60" aria-pressed="false">1 hr</button>
+              <button type="button" class="pill" data-duration="240" aria-pressed="false">4 hr</button>
+              <button type="button" class="pill" data-duration="480" aria-pressed="false">8 hr</button>
+              <button type="button" class="pill pill-manual active" data-duration="" aria-pressed="true">Manual ∞</button>
             </div>
             <input type="hidden" id="s-expires" name="expires_minutes" value="">
             <div class="lt-field-hint" id="s-dur-hint">Persists until manually removed.</div>
@@ -83,36 +85,46 @@
   </div>
   <div id="active-sup-wrap">
   {% if active %}
-  <div class="lt-table-wrap">
-    <table class="lt-table" id="active-sup-table">
-      <caption class="lt-sr-only">Active suppression rules</caption>
-      <thead>
-        <tr>
-          <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
-          <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for s in active %}
-        <tr id="sup-row-{{ s.id }}">
-          {%- 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>
-          <td>{{ s.suppressed_by }}</td>
-          <td class="ts-cell">{{ s.created_at }}</td>
-          <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
-          <td>
-            <button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="{{ s.id }}">Remove</button>
-          </td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
+  <div class="lt-frame">
+    <span class="lt-frame-bl">&#x255A;</span>
+    <span class="lt-frame-br">&#x255D;</span>
+    <div class="lt-section-header">Active Rules</div>
+    <div class="lt-table-wrap">
+      <table class="lt-table" id="active-sup-table">
+        <caption class="lt-sr-only">Active suppression rules</caption>
+        <thead>
+          <tr>
+            <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
+            <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for s in active %}
+          <tr id="sup-row-{{ s.id }}">
+            {%- 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>
+            <td>{{ s.suppressed_by }}</td>
+            <td class="ts-cell">{{ s.created_at }}</td>
+            <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
+            <td>
+              <button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="{{ s.id }}"
+                      aria-label="Remove suppression for {{ s.target_name or 'global' }}">Remove</button>
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
   </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>
@@ -124,39 +136,47 @@
     <span class="g-section-badge">{{ history | length }}</span>
   </div>
   {% if history %}
-  <div class="lt-table-wrap">
-    <table class="lt-table lt-table-sm">
-      <caption class="lt-sr-only">Suppression history</caption>
-      <thead>
-        <tr>
-          <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
-          <th>By</th><th>Created</th><th>Expires</th><th>Active</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for s in history %}
-        <tr class="{% if not s.active %}row-resolved{% endif %}">
-          <td>{{ s.target_type }}</td>
-          <td>{{ s.target_name or 'all' }}</td>
-          <td>{{ s.target_detail or '–' }}</td>
-          <td>{{ s.reason }}</td>
-          <td>{{ s.suppressed_by }}</td>
-          <td class="ts-cell">{{ s.created_at }}</td>
-          <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
-          <td>
-            {% if s.active %}
-            <span class="lt-badge badge-ok">Yes</span>
-            {% else %}
-            <span class="lt-badge badge-neutral">No</span>
-            {% endif %}
-          </td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
+  <div class="lt-frame">
+    <span class="lt-frame-bl">&#x255A;</span>
+    <span class="lt-frame-br">&#x255D;</span>
+    <div class="lt-section-header">Suppression Log</div>
+    <div class="lt-table-wrap">
+      <table class="lt-table lt-table-sm">
+        <caption class="lt-sr-only">Suppression history</caption>
+        <thead>
+          <tr>
+            <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
+            <th>By</th><th>Created</th><th>Expires</th><th>Active</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for s in history %}
+          <tr class="{% if not s.active %}row-resolved{% endif %}">
+            <td>{{ s.target_type }}</td>
+            <td>{{ s.target_name or 'all' }}</td>
+            <td>{{ s.target_detail or '–' }}</td>
+            <td>{{ s.reason }}</td>
+            <td>{{ s.suppressed_by }}</td>
+            <td class="ts-cell">{{ s.created_at }}</td>
+            <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
+            <td>
+              {% if s.active %}
+              <span class="lt-badge badge-ok">Yes</span>
+              {% else %}
+              <span class="lt-badge badge-neutral">No</span>
+              {% endif %}
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
   </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>
 
@@ -165,20 +185,27 @@
   <div class="g-section-header">
     <h2 class="g-section-title">Available Targets</h2>
   </div>
-  <div class="targets-grid">
-    {% for name, host in snapshot.hosts.items() %}
-    <div class="target-card">
-      <div class="target-name">{{ name }}</div>
-      <div class="target-type">{{ 'Proxmox Host (prometheus)' if host.source == 'prometheus' else 'Ping-only host' }}</div>
-      {% if host.interfaces %}
-      <div class="target-ifaces">
-        {% for iface in host.interfaces.keys() | sort %}
-        <code class="iface-chip">{{ iface }}</code>
+  <div class="lt-frame">
+    <span class="lt-frame-bl">&#x255A;</span>
+    <span class="lt-frame-br">&#x255D;</span>
+    <div class="lt-section-header">Host &amp; Interface Reference</div>
+    <div class="lt-section-body">
+      <div class="targets-grid">
+        {% for name, host in snapshot.hosts.items() %}
+        <div class="target-card">
+          <div class="target-name">{{ name }}</div>
+          <div class="target-type">{{ 'Proxmox Host (prometheus)' if host.source == 'prometheus' else 'Ping-only host' }}</div>
+          {% if host.interfaces %}
+          <div class="target-ifaces">
+            {% for iface in host.interfaces.keys() | sort %}
+            <code class="iface-chip">{{ iface }}</code>
+            {% endfor %}
+          </div>
+          {% endif %}
+        </div>
         {% endfor %}
       </div>
-      {% endif %}
     </div>
-    {% endfor %}
   </div>
 </section>
 
@@ -195,8 +222,11 @@
 
   function setDur(mins, el) {
     document.getElementById('s-expires').value = mins || '';
-    document.querySelectorAll('.duration-pills .pill').forEach(p => p.classList.remove('active'));
-    if (el) el.classList.add('active');
+    document.querySelectorAll('.duration-pills .pill').forEach(p => {
+      p.classList.remove('active');
+      p.setAttribute('aria-pressed', 'false');
+    });
+    if (el) { el.classList.add('active'); el.setAttribute('aria-pressed', 'true'); }
     const hint = document.getElementById('s-dur-hint');
     if (mins) {
       const h = Math.floor(mins/60), m = mins%60;
@@ -210,7 +240,7 @@
     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;
     }
@@ -225,18 +255,24 @@
         <td>${lt.escHtml(s.suppressed_by)}</td>
         <td class="ts-cell">${lt.escHtml(s.created_at || '')}</td>
         <td class="ts-cell">${s.expires_at ? lt.escHtml(s.expires_at) : '<em>manual</em>'}</td>
-        <td><button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="${s.id}">Remove</button></td>
+        <td><button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="${s.id}"
+            aria-label="Remove suppression for ${lt.escHtml(s.target_name || 'global')}">Remove</button></td>
       </tr>`).join('');
     wrap.innerHTML = `
-      <div class="lt-table-wrap">
-        <table class="lt-table" id="active-sup-table">
-          <caption class="lt-sr-only">Active suppression rules</caption>
-          <thead><tr>
-            <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
-            <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
-          </tr></thead>
-          <tbody>${tbody}</tbody>
-        </table>
+      <div class="lt-frame">
+        <span class="lt-frame-bl">&#x255A;</span>
+        <span class="lt-frame-br">&#x255D;</span>
+        <div class="lt-section-header">Active Rules</div>
+        <div class="lt-table-wrap">
+          <table class="lt-table" id="active-sup-table">
+            <caption class="lt-sr-only">Active suppression rules</caption>
+            <thead><tr>
+              <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
+              <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
+            </tr></thead>
+            <tbody>${tbody}</tbody>
+          </table>
+        </div>
       </div>`;
   }
 
@@ -245,7 +281,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');
     }
   }
 
@@ -287,7 +323,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');