fix: escape poe_class in inspector panel for consistency

d.poe_mode was already wrapped in escHtml(); apply same to d.poe_class.

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

app.py

@@ -5,11 +5,13 @@ 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
@@ -57,6 +59,8 @@ def inject_config():
 # In-memory diagnostic job store { job_id: { status, result, created_at } }
 _diag_jobs: dict = {}
 _diag_lock = threading.Lock()
+# Per-user rate-limit: { username: [epoch_float, ...] } — cleaned inside _diag_lock
+_diag_rate: dict = {}
 
 
 def _purge_old_jobs_loop():
@@ -72,8 +76,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)'}
+                    j['result'] = {'status': 'error', 'error': 'Diagnostic abandoned — no activity for 5 minutes.'}
-                    logger.error(f'Diagnostic job {jid} appeared stuck; marked as errored')
+                    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)
@@ -90,6 +94,14 @@ def _config() -> dict:
     return _cfg
 
 
+@app.after_request
+def add_security_headers(response):
+    response.headers.setdefault('X-Content-Type-Options', 'nosniff')
+    response.headers.setdefault('X-Frame-Options', 'DENY')
+    response.headers.setdefault('Referrer-Policy', 'strict-origin-when-cross-origin')
+    return response
+
+
 def _daemon_ok(last_check: str) -> bool:
     """Return True if monitor last checked within 20 minutes."""
     if not last_check or last_check == 'Never':
@@ -131,10 +143,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'<p>Your account ({safe_user}) is not in an allowed group '
-                f'({", ".join(allowed)}).</p>',
+                f'({safe_groups}).</p>',
                 403,
             )
         return f(*args, **kwargs)
@@ -142,12 +156,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():
@@ -157,8 +190,13 @@ def index():
     summary = db.get_status_summary()
     snapshot_raw = db.get_state('network_snapshot')
     last_check = db.get_state('last_check', 'Never')
-    snapshot = json.loads(snapshot_raw) if snapshot_raw else {}
+    try:
+        snapshot = json.loads(snapshot_raw) if snapshot_raw else {}
+    except Exception as e:
+        logger.error(f'Failed to parse network_snapshot JSON: {e}')
+        snapshot = {}
     suppressions = db.get_active_suppressions()
+    _annotate_suppressions(events, suppressions)
     recent_resolved = db.get_recent_resolved(hours=24, limit=10)
     return render_template(
         'index.html',
@@ -195,7 +233,11 @@ def suppressions_page():
     active = db.get_active_suppressions()
     history = db.get_suppression_history(limit=50)
     snapshot_raw = db.get_state('network_snapshot')
-    snapshot = json.loads(snapshot_raw) if snapshot_raw else {}
+    try:
+        snapshot = json.loads(snapshot_raw) if snapshot_raw else {}
+    except Exception as e:
+        logger.error(f'Failed to parse network_snapshot JSON: {e}')
+        snapshot = {}
     return render_template(
         'suppressions.html',
         user=user,
@@ -213,6 +255,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(),
@@ -240,10 +284,13 @@ def api_network():
 def api_links():
     raw = db.get_state('link_stats')
     if raw:
+        if len(raw) > 10_000_000:
+            logger.error(f'link_stats exceeds 10 MB ({len(raw)} bytes); possible corruption')
+            return jsonify({'error': 'Invalid cached data'}), 503
         try:
             return jsonify(json.loads(raw))
-        except Exception:
+        except Exception as e:
-            logger.error('Failed to parse link_stats JSON')
+            logger.error(f'Failed to parse link_stats JSON: {e}')
     return jsonify({'hosts': {}, 'updated': None})
 
 
@@ -299,13 +346,21 @@ def api_create_suppression():
     if len(target_detail) > 255:
         return jsonify({'error': 'target_detail must be 255 characters or fewer'}), 400
 
+    if expires_minutes is not None:
+        try:
+            expires_minutes = int(expires_minutes)
+            if expires_minutes <= 0 or expires_minutes > 43200:
+                return jsonify({'error': 'expires_minutes must be between 1 and 43200 (30 days)'}), 400
+        except (ValueError, TypeError):
+            return jsonify({'error': 'expires_minutes must be a valid integer'}), 400
+
     sup_id = db.create_suppression(
         target_type=target_type,
         target_name=target_name,
         target_detail=target_detail,
         reason=reason,
         suppressed_by=user['username'],
-        expires_minutes=int(expires_minutes) if expires_minutes else None,
+        expires_minutes=expires_minutes,
     )
     logger.info(
         f'Suppression #{sup_id} created by {user["username"]}: '
@@ -343,8 +398,8 @@ def api_diagnose_start():
         return jsonify({'error': 'No link_stats data available'}), 503
     try:
         link_data = json.loads(raw)
-    except Exception:
+    except Exception as e:
-        logger.error('Failed to parse link_stats JSON in /api/diagnose')
+        logger.error(f'Failed to parse link_stats JSON in /api/diagnose: {e}')
         return jsonify({'error': 'Internal data error'}), 500
 
     switches = link_data.get('unifi_switches', {})
@@ -368,6 +423,9 @@ def api_diagnose_start():
         return jsonify({'error': 'No LLDP neighbor data for this port'}), 400
 
     server_name = lldp['system_name']
+    if not re.fullmatch(r'[a-zA-Z0-9._-]+', server_name):
+        logger.error(f'Refusing diagnostic: invalid server_name from LLDP: {server_name!r}')
+        return jsonify({'error': 'LLDP neighbor name contains invalid characters'}), 400
     lldp_port_id = lldp.get('port_id', '')
 
     # Find matching host + interface in link_stats hosts
@@ -393,9 +451,14 @@ def api_diagnose_start():
     # Resolve host IP from link_stats host data
     host_ip = (server_ifaces.get(matched_iface) or {}).get('host_ip')
     if not host_ip:
-        # Fallback: use LLDP mgmt IPs
+        # Fallback: use first valid IP from LLDP mgmt IPs
-        mgmt_ips = lldp.get('mgmt_ips') or []
+        for candidate in (lldp.get('mgmt_ips') or []):
-        host_ip = mgmt_ips[0] if mgmt_ips else None
+            try:
+                ipaddress.ip_address(candidate)
+                host_ip = candidate
+                break
+            except ValueError:
+                continue
     if not host_ip:
         return jsonify({'error': 'Cannot determine host IP for SSH'}), 400
 
@@ -410,8 +473,22 @@ def api_diagnose_start():
         return jsonify({'error': 'Resolved interface name contains invalid characters'}), 400
 
     job_id = str(uuid.uuid4())
+    requesting_user = _get_user()['username']
+    now = time.time()
     with _diag_lock:
-        _diag_jobs[job_id] = {'status': 'running', 'result': None, 'created_at': time.time()}
+        # Rate limit: max 5 diagnostic jobs per user per minute; prune stale user entries
+        stale_users = [u for u, ts in _diag_rate.items() if not ts or max(ts) < now - 3600]
+        for u in stale_users:
+            del _diag_rate[u]
+        recent = [t for t in _diag_rate.get(requesting_user, []) if now - t < 60]
+        if len(recent) >= 5:
+            return jsonify({'error': 'Rate limit exceeded: max 5 diagnostics per minute'}), 429
+        recent.append(now)
+        _diag_rate[requesting_user] = recent
+        _diag_jobs[job_id] = {
+            'status': 'running', 'result': None,
+            'created_at': now, 'user': requesting_user,
+        }
 
     def _run():
         try:
@@ -421,7 +498,7 @@ def api_diagnose_start():
             result = runner.run(host_ip, server_name, matched_iface, port_data)
         except Exception as e:
             logger.error(f'Diagnostic job {job_id} failed: {e}', exc_info=True)
-            result = {'status': 'error', 'error': str(e)}
+            result = {'status': 'error', 'error': 'Diagnostic failed; check server logs.'}
         with _diag_lock:
             if job_id in _diag_jobs:
                 _diag_jobs[job_id]['status'] = 'done'
@@ -437,11 +514,15 @@ def api_diagnose_start():
 @require_auth
 def api_diagnose_poll(job_id: str):
     """Poll a diagnostic job. Returns {status, result}."""
+    current_user = _get_user()['username']
     with _diag_lock:
         job = _diag_jobs.get(job_id)
-    if not job:
+        if not job:
-        return jsonify({'error': 'Job not found'}), 404
+            return jsonify({'error': 'Job not found'}), 404
-    return jsonify({'status': job['status'], 'result': job.get('result')})
+        if job.get('user') != current_user:
+            return jsonify({'error': 'Forbidden'}), 403
+        snapshot = {'status': job['status'], 'result': job.get('result')}
+    return jsonify(snapshot)
 
 
 @app.route('/api/avatar')
@@ -458,11 +539,21 @@ def api_avatar():
 
     # Build a safe cache filename from the username (alphanumeric + - _ .)
     safe_name = re.sub(r'[^a-zA-Z0-9._-]', '_', username)
-    cache_dir = ldap_cfg.get('cache_dir', '/tmp/gandalf_avatars')
+    cache_dir = os.path.abspath(
+        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')
+    cache_file = os.path.abspath(os.path.join(cache_dir, f'user_{safe_name}.jpg'))
-    sentinel    = os.path.join(cache_dir, f'user_{safe_name}.none')
+    sentinel   = os.path.abspath(os.path.join(cache_dir, f'user_{safe_name}.none'))
-    cache_ttl   = int(ldap_cfg.get('cache_ttl', 3600))
+    # Guard against path escape (shouldn't happen with sanitised safe_name, but be explicit)
+    if not cache_file.startswith(cache_dir + os.sep) or not sentinel.startswith(cache_dir + os.sep):
+        logger.error(f'Avatar path escape detected for user {username!r}')
+        return '', 404
+    try:
+        cache_ttl = int(ldap_cfg.get('cache_ttl', 3600))
+    except (ValueError, TypeError):
+        logger.warning('Invalid cache_ttl in ldap config; using default 3600')
+        cache_ttl = 3600
 
     now = time.time()
 
@@ -472,33 +563,48 @@ def api_avatar():
                          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:
+    try:
-        return '', 404
+        if os.path.exists(sentinel) and now - os.path.getmtime(sentinel) < cache_ttl:
+            return '', 404
+    except OSError:
+        pass
 
     # Query lldap
+    bind_pw = ldap_cfg.get('bind_pw', '')
+    if not bind_pw:
+        logger.error('LDAP bind_pw not configured — avatar lookup disabled')
+        return '', 404
+
     avatar_data = None
+    conn = 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', ''),
+                                  password=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
+    finally:
+        if conn is not None:
+            try:
+                conn.unbind()
+            except Exception:
+                pass
 
     if not avatar_data or len(avatar_data) < 100:
-        open(sentinel, 'w').close()
+        with open(sentinel, 'w'):
+            pass
         return '', 404
 
     # Validate JPEG magic bytes (FF D8 FF)
@@ -531,7 +637,8 @@ def health():
         db.get_state('last_check')
         checks['db'] = 'ok'
     except Exception as e:
-        checks['db'] = f'error: {e}'
+        logger.error(f'Health check db error: {e}')
+        checks['db'] = 'error'
         overall = 'degraded'
 
     # Monitor freshness: fail if last_check is older than 20 minutes
@@ -541,14 +648,15 @@ def health():
             ts = datetime.strptime(last_check, '%Y-%m-%d %H:%M:%S UTC').replace(tzinfo=timezone.utc)
             age_s = (datetime.now(timezone.utc) - ts).total_seconds()
             if age_s > 1200:
-                checks['monitor'] = f'stale ({int(age_s)}s since last check)'
+                checks['monitor'] = 'stale'
                 overall = 'degraded'
             else:
-                checks['monitor'] = f'ok ({int(age_s)}s ago)'
+                checks['monitor'] = 'ok'
         else:
             checks['monitor'] = 'no data yet'
     except Exception as e:
-        checks['monitor'] = f'error: {e}'
+        logger.error(f'Health check monitor error: {e}')
+        checks['monitor'] = 'error'
         overall = 'degraded'
 
     status_code = 200 if overall == 'ok' else 503

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,
             }
 
 
@@ -358,7 +365,7 @@ def is_suppressed(target_type: str, target_name: str, target_detail: str = '') -
                 """SELECT id FROM suppression_rules
                    WHERE active=TRUE AND (expires_at IS NULL OR expires_at > NOW())
                    AND target_type=%s AND target_name=%s
-                   AND (target_detail IS NULL OR target_detail='') LIMIT 1""",
+                   AND target_detail='' LIMIT 1""",
                 (target_type, target_name),
             )
             if cur.fetchone():

diagnose.py

@@ -75,7 +75,7 @@ class DiagnosticsRunner:
         )
 
         return (
-            f'ssh -o StrictHostKeyChecking=no -o ConnectTimeout=5 '
+            f'ssh -o StrictHostKeyChecking=accept-new -o ConnectTimeout=5 '
             f'-o BatchMode=yes -o LogLevel=ERROR '
             f'-o ServerAliveInterval=10 -o ServerAliveCountMax=2 '
             f'root@{ip_q} \'{remote_cmd}\''

monitor.py

@@ -11,7 +11,6 @@ import json
 import logging
 import re
 import shlex
-import subprocess
 import time
 from datetime import datetime
 from typing import Dict, List, Optional
@@ -21,7 +20,6 @@ from urllib3.exceptions import InsecureRequestWarning
 
 import db
 
-requests.packages.urllib3.disable_warnings(InsecureRequestWarning)
 
 logging.basicConfig(
     level=logging.INFO,
@@ -91,7 +89,9 @@ class UnifiClient:
         self.base_url = cfg['controller']
         self.site_id = cfg.get('site_id', 'default')
         self.session = requests.Session()
-        self.session.verify = False
+        self.session.verify = cfg.get('verify_ssl', True)
+        if not self.session.verify:
+            requests.packages.urllib3.disable_warnings(InsecureRequestWarning)
         self.headers = {
             'X-API-KEY': cfg['api_key'],
             'Accept': 'application/json',
@@ -263,7 +263,10 @@ class PulseClient:
                 timeout=10,
             )
             resp.raise_for_status()
-            execution_id = resp.json()['execution_id']
+            execution_id = resp.json().get('execution_id')
+            if not execution_id:
+                logger.error('Pulse submit response missing execution_id')
+                return None
             self.last_execution_id = execution_id
         except Exception as e:
             logger.error(f'Pulse command submit failed: {e}')
@@ -315,6 +318,14 @@ class PulseClient:
             return self.run_command(command, _retry=False)
         return None
 
+    def ping(self, ip: str, count: int = 3, timeout: int = 2) -> bool:
+        """Ping *ip* via the Pulse worker. Returns True if host responds."""
+        ip_q = shlex.quote(ip)
+        output = self.run_command(
+            f'ping -c {count} -W {timeout} {ip_q} >/dev/null 2>&1 && echo REACHABLE || echo UNREACHABLE'
+        )
+        return output is not None and output.strip() == 'REACHABLE'
+
 
 # --------------------------------------------------------------------------
 # Link stats collector (ethtool + Prometheus traffic metrics)
@@ -344,8 +355,8 @@ class LinkStatsCollector:
         if not ifaces or not self.pulse.url:
             return {}
 
-        # Validate interface names (kernel names only contain [a-zA-Z0-9_.-])
+        # Validate interface names (kernel names: [a-zA-Z0-9_.-], max 15 chars per IFNAMSIZ)
-        safe_ifaces = [i for i in ifaces if re.match(r'^[a-zA-Z0-9_.@-]+$', i)]
+        safe_ifaces = [i for i in ifaces if re.match(r'^[a-zA-Z0-9_.-]{1,15}$', i)]
         if not safe_ifaces:
             return {}
 
@@ -363,7 +374,7 @@ class LinkStatsCollector:
         shell_cmd = ' '.join(parts)
 
         ssh_cmd = (
-            f'ssh -o StrictHostKeyChecking=no -o ConnectTimeout=5 '
+            f'ssh -o StrictHostKeyChecking=accept-new -o ConnectTimeout=5 '
             f'-o BatchMode=yes -o LogLevel=ERROR '
             f'-o ServerAliveInterval=10 -o ServerAliveCountMax=2 '
             f'root@{ip} "{shell_cmd}"'
@@ -638,19 +649,6 @@ class LinkStatsCollector:
 # --------------------------------------------------------------------------
 # Helpers
 # --------------------------------------------------------------------------
-def ping(ip: str, count: int = 3, timeout: int = 2) -> bool:
-    try:
-        r = subprocess.run(
-            ['ping', '-c', str(count), '-W', str(timeout), ip],
-            stdout=subprocess.DEVNULL,
-            stderr=subprocess.DEVNULL,
-            timeout=30,
-        )
-        return r.returncode == 0
-    except Exception:
-        return False
-
-
 def _now_utc() -> str:
     return datetime.utcnow().strftime('%Y-%m-%d %H:%M:%S UTC')
 
@@ -671,6 +669,7 @@ class NetworkMonitor:
         self.unifi = UnifiClient(self.cfg['unifi'])
         self.tickets = TicketClient(self.cfg.get('ticket_api', {}))
         self.link_stats = LinkStatsCollector(self.cfg, self.prom, self.unifi)
+        self.pulse = self.link_stats.pulse  # convenience alias
 
         mon = self.cfg.get('monitor', {})
         self.poll_interval = mon.get('poll_interval', 120)
@@ -838,7 +837,7 @@ class NetworkMonitor:
     def _process_ping_hosts(self, suppressions: list) -> None:
         for h in self.cfg.get('monitor', {}).get('ping_hosts', []):
             name, ip = h['name'], h['ip']
-            reachable = ping(ip)
+            reachable = self.pulse.ping(ip)
 
             if not reachable:
                 sup = db.check_suppressed(suppressions, 'host', name)
@@ -908,7 +907,7 @@ class NetworkMonitor:
 
         for h in self.cfg.get('monitor', {}).get('ping_hosts', []):
             name, ip = h['name'], h['ip']
-            reachable = ping(ip, count=1, timeout=2)
+            reachable = self.pulse.ping(ip, count=1, timeout=2)
             hosts[name] = {
                 'ip': ip,
                 'interfaces': {},
@@ -967,6 +966,7 @@ class NetworkMonitor:
 
             except Exception as e:
                 logger.error(f'Monitor loop error: {e}', exc_info=True)
+                time.sleep(30)
 
             time.sleep(self.poll_interval)
 

static/app.js

@@ -92,8 +92,10 @@ function updateStatusBar(summary, lastCheck, daemonOk) {
   // 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);
 
@@ -205,7 +207,7 @@ function updateEventsTable(events, totalActive) {
     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>`
     : '';
@@ -220,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}">
+      <tr class="row-${e.severity}${e.is_suppressed ? ' row-suppressed' : ''}">
-        <td><span class="lt-badge badge-${e.severity}">${e.severity}</span></td>
+        <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>
@@ -271,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.';
 }
@@ -292,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'));
+  document.querySelectorAll('#suppress-modal .pill').forEach(p => {
-  if (el) el.classList.add('active');
+    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) {
@@ -332,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

@@ -83,16 +83,91 @@
   .lt-main.lt-container { padding-top: calc(46px + var(--space-sm)); }
 }
 
-/* ── Refresh button loading state ────────────────────────────────── */
+/* ── Button loading state ─────────────────────────────────────────── */
-[data-action="refresh"].is-loading {
+[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); }
@@ -139,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); }
@@ -168,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,
@@ -177,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); }
 
@@ -374,6 +442,9 @@
   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: '';
@@ -431,6 +502,7 @@
 .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-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); }
@@ -480,6 +552,7 @@
 /* Bus rails */
 .topo-bus-section {
   width: 100%;
+  max-width: 860px;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -560,6 +633,10 @@
   color: var(--text-muted);
   font-family: var(--font);
 }
+.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; }
@@ -587,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;
@@ -706,23 +782,6 @@
 .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-loading { padding: 20px; text-align: center; color: var(--text-muted); font-size: .8em; }

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 %}>
@@ -156,21 +133,20 @@
             <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 style="padding:0.75rem;font-size:0.75rem;color:var(--text-muted);text-align:center">Loading&hellip;</div>
+            <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" style="width:100%;text-align:center;display:block;font-size:0.72rem">View dashboard</a>
+            <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"
+              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"
+              aria-label="Open command palette">&#x2315;&nbsp;K</button>
-              onclick="if(window.lt&&lt.cmdPalette)lt.cmdPalette.open()"
-              style="font-size:0.65rem;opacity:0.55;letter-spacing:0.03em;padding:0.2rem 0.45rem">&#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>
@@ -210,7 +186,7 @@
         <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 == 'links_page' %}
+      {% 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 %}
@@ -221,6 +197,59 @@
     <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">
@@ -229,11 +258,11 @@
         <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 data (Dashboard / Link Debug)</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>
@@ -257,26 +286,22 @@
       <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">
+          <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">15 s</button>
+            <button type="button" class="pill" data-refresh-interval="15" aria-pressed="false">15 s</button>
-            <button type="button" class="pill" data-refresh-interval="30">30 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">1 min</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">5 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">Off</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" style="margin:1rem 0 0.75rem"></div>
+        <div class="lt-divider lt-divider--compact"></div>
         <div class="lt-kv-grid">
-          <div class="lt-kv-row">
+          <span class="lt-kv-key">User</span>
-            <span class="lt-kv-label">User</span>
+          <span class="lt-kv-val lt-kv-val--cyan">{{ user.name or user.username }}</span>
-            <span class="lt-kv-value lt-text-cyan">{{ user.name or user.username }}</span>
-          </div>
           {% if user.groups %}
-          <div class="lt-kv-row">
+          <span class="lt-kv-key">Groups</span>
-            <span class="lt-kv-label">Groups</span>
+          <span class="lt-kv-val">{{ user.groups | join(', ') }}</span>
-            <span class="lt-kv-value">{{ user.groups | join(', ') }}</span>
-          </div>
           {% endif %}
         </div>
       </div>
@@ -288,7 +313,7 @@
 
   <script>
     const GANDALF_CONFIG = {
-      ticket_web_url: "{{ config.get('ticket_api', {}).get('web_url', 'http://t.lotusguild.org/ticket/') }}"
+      ticket_web_url: {{ config.get('ticket_api', {}).get('web_url', 'http://t.lotusguild.org/ticket/') | tojson }}
     };
   </script>
   <script src="{{ url_for('static', filename='app.js') }}"></script>
@@ -299,7 +324,7 @@
       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
@@ -318,11 +343,12 @@
 
     // ── 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;
-      var action = btn.getAttribute('data-action');
+      const action = btn.getAttribute('data-action');
-      if (action === 'show-keyboard-help' && window.lt)  lt.modal.open('lt-keys-help');
+      if (action === 'open-cmdpalette' && window.lt && lt.cmdPalette) lt.cmdPalette.open();
-      if (action === 'open-settings' && window.lt)       lt.modal.open('lt-settings-modal');
+      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() { lt.autoRefresh.now(); });
@@ -341,8 +367,8 @@
 
     // ── Settings modal ────────────────────────────────────────────────────
     (function() {
-      var LS_KEY = 'gandalf_settings';
+      const LS_KEY = 'gandalf_settings';
-      var DEFAULT = { refreshInterval: 30 };
+      const DEFAULT = { refreshInterval: 30 };
 
       function loadSettings() {
         try { return Object.assign({}, DEFAULT, JSON.parse(localStorage.getItem(LS_KEY) || '{}')); }
@@ -356,9 +382,11 @@
 
       function applyRefreshPillUI(interval) {
         document.querySelectorAll('#settings-refresh-pills .pill').forEach(function(p) {
-          p.classList.toggle('active', parseInt(p.dataset.refreshInterval) === interval);
+          const isActive = parseInt(p.dataset.refreshInterval) === interval;
+          p.classList.toggle('active', isActive);
+          p.setAttribute('aria-pressed', isActive ? 'true' : 'false');
         });
-        var hint = document.getElementById('settings-refresh-hint');
+        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.';
@@ -367,16 +395,16 @@
       }
 
       // Init pill UI from saved settings
-      var _settings = loadSettings();
+      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) {
-        var pill = e.target.closest('#settings-refresh-pills .pill[data-refresh-interval]');
+        const pill = e.target.closest('#settings-refresh-pills .pill[data-refresh-interval]');
         if (!pill) return;
-        var interval = parseInt(pill.dataset.refreshInterval);
+        const interval = parseInt(pill.dataset.refreshInterval);
         _settings.refreshInterval = interval;
         saveSettings(_settings);
         applyRefreshPillUI(interval);
@@ -385,16 +413,16 @@
 
     // ── Notification Bell — shows active monitoring alerts ────────────────
     (function() {
-      var bell     = document.getElementById('lt-notif-bell');
+      const bell     = document.getElementById('lt-notif-bell');
-      var panel    = document.getElementById('lt-notif-panel');
+      const panel    = document.getElementById('lt-notif-panel');
-      var list     = document.getElementById('lt-notif-list');
+      const list     = document.getElementById('lt-notif-list');
-      var clearBtn = document.getElementById('lt-notif-clear-btn');
+      const clearBtn = document.getElementById('lt-notif-clear-btn');
-      var wrapEl   = document.getElementById('lt-notif-wrap');
+      const wrapEl   = document.getElementById('lt-notif-wrap');
       if (!bell || !panel) return;
 
-      var _open      = false;
+      let _open       = false;
-      var _lastEvents = [];
+      let _lastEvents = [];
-      var LS_READ_KEY = 'gandalf_notif_read_before';
+      const LS_READ_KEY = 'gandalf_notif_read_before';
 
       function getReadBefore() {
         try { return parseInt(localStorage.getItem(LS_READ_KEY) || '0'); } catch(_) { return 0; }
@@ -413,31 +441,31 @@
       }
 
       function fmtAgo(dateStr) {
-        var diff = Math.floor((Date.now() - toMs(dateStr)) / 1000);
+        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';
       }
 
-      var SEV_DOT = { critical: 'var(--red)', warning: 'var(--amber)' };
+      const SEV_DOT = { critical: 'var(--red)', warning: 'var(--amber)' };
 
       function renderAlerts(events) {
         _lastEvents = events || [];
-        var readBefore = getReadBefore();
+        const readBefore = getReadBefore();
-        var active = _lastEvents.filter(function(e) { return e.severity !== 'info'; });
+        const active = _lastEvents.filter(function(e) { return e.severity !== 'info'; });
-        var unreadCount = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
+        const unreadCount = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
         lt.notif.set(bell, unreadCount);
 
         if (!active.length) {
-          list.innerHTML = '<div style="padding:1rem;font-size:0.75rem;color:var(--text-muted);text-align:center">&#x2714; No active alerts</div>';
+          list.innerHTML = '<div class="lt-notif-empty">&#x2714; No active alerts</div>';
           return;
         }
         list.innerHTML = active.slice(0, 25).map(function(e) {
-          var isUnread = toMs(e.last_seen) > readBefore;
+          const isUnread = toMs(e.last_seen) > readBefore;
-          var dotColor = SEV_DOT[e.severity] || 'var(--text-muted)';
+          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 + ';border-radius:50%;margin-top:4px"></div>' +
+            '<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>' +
@@ -449,19 +477,19 @@
         fetch('/api/status', { credentials: 'same-origin' })
           .then(function(r) { return r.json(); })
           .then(function(data) {
-            var events = data.events || [];
+            const events = data.events || [];
             if (andRender) {
               renderAlerts(events);
             } else {
               _lastEvents = events;
-              var readBefore = getReadBefore();
+              const readBefore = getReadBefore();
-              var active = events.filter(function(e) { return e.severity !== 'info'; });
+              const active = events.filter(function(e) { return e.severity !== 'info'; });
-              var unread = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
+              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 style="padding:0.75rem;font-size:0.75rem;color:var(--text-muted);text-align:center">Could not load</div>';
+            if (andRender) list.innerHTML = '<div class="lt-notif-empty">Could not load</div>';
           });
       }
 

templates/index.html

@@ -5,7 +5,7 @@
 
 <!-- ── Status bar ──────────────────────────────────────────────────── -->
 <div class="status-bar">
-  <div class="status-chips">
+  <div class="status-chips" id="status-chips" aria-live="polite" aria-atomic="true">
     {% if not daemon_ok %}
     <span class="chip chip-critical">⚠ MONITOR OFFLINE</span>
     {% endif %}
@@ -30,294 +30,41 @@
 <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">
+       data-stat-filter="critical" aria-label="{{ summary.critical or 0 }} critical alerts"
-    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--red);text-shadow:var(--glow-red)">●</span>
+       aria-controls="events-table-wrap">
+    <span class="lt-stat-icon lt-text-red" aria-hidden="true">●</span>
     <div class="lt-stat-info">
-      <span class="lt-stat-value" id="stat-critical-val" style="color:var(--red)">{{ summary.critical or 0 }}</span>
+      <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">
+       data-stat-filter="warning" aria-label="{{ summary.warning or 0 }} warning alerts"
-    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--amber)">●</span>
+       aria-controls="events-table-wrap">
+    <span class="lt-stat-icon lt-text-amber" aria-hidden="true">●</span>
     <div class="lt-stat-info">
-      <span class="lt-stat-value" id="stat-warning-val" style="color:var(--amber)">{{ summary.warning or 0 }}</span>
+      <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" aria-hidden="true" style="color:var(--cyan)">⬡</span>
+    <span class="lt-stat-icon lt-text-cyan" aria-hidden="true">⬡</span>
     <div class="lt-stat-info">
-      <span class="lt-stat-value" id="stat-hosts-val" style="color:var(--cyan)">{{ snapshot.hosts | length }}</span>
+      <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" aria-hidden="true" style="color:var(--green);text-shadow:var(--glow)">✔</span>
+    <span class="lt-stat-icon lt-text-green" aria-hidden="true">✔</span>
     <div class="lt-stat-info">
-      <span class="lt-stat-value" id="stat-resolved-val" style="color:var(--green)">{{ recent_resolved | length }}</span>
+      <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>
 
-<!-- ── Network topology + host grid ───────────────────────────────── -->
+<!-- ── Active alerts ─────────────────────────────── (above the fold) -->
-<section class="g-section">
-  <div class="g-section-header">
-    <h2 class="g-section-title">Network Hosts</h2>
-  </div>
-
-  <div class="topology" id="topology-diagram">
-  <div class="topo-v2">
-
-    {%- set topo_h = snapshot.hosts if snapshot.hosts else {} -%}
-
-    <!-- ══════════════════════════════════════════════════════════════
-         TIER 1: Internet (WAN edge)
-         ══════════════════════════════════════════════════════════ -->
-    <div class="topo-tier">
-      <div class="topo-v2-node topo-v2-internet">
-        <span class="topo-v2-icon">◈</span>
-        <span class="topo-v2-label">INTERNET</span>
-        <span class="topo-v2-sub">WAN uplink</span>
-      </div>
-    </div>
-
-    <!-- WAN wire: cyan → green gradient, labeled -->
-    <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:linear-gradient(to bottom,var(--cyan),rgba(0,212,255,.3)); opacity:.7;"></div>
-      <span class="topo-vc-label">WAN · 10G SFP+</span>
-    </div>
-
-    <!-- ══════════════════════════════════════════════════════════════
-         TIER 2: Router – UDM-Pro
-         ══════════════════════════════════════════════════════════ -->
-    <div class="topo-tier">
-      <div class="topo-v2-node topo-v2-router">
-        <span class="topo-v2-icon">⬡</span>
-        <span class="topo-v2-label">UDM-Pro</span>
-        <span class="topo-v2-sub">Dream Machine Pro</span>
-        <span class="topo-v2-sub">RU24</span>
-      </div>
-    </div>
-
-    <!-- UDM-Pro → USW-Agg (10G SFP+) -->
-    <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
-      <span class="topo-vc-label">10G SFP+</span>
-    </div>
-
-    <!-- ══════════════════════════════════════════════════════════════
-         TIER 3: USW-Aggregation
-         ══════════════════════════════════════════════════════════ -->
-    <div class="topo-tier">
-      <div class="topo-v2-node topo-v2-switch" id="topo-switch-agg">
-        <span class="topo-v2-icon">⬡</span>
-        <span class="topo-v2-label">USW-Agg</span>
-        <span class="topo-v2-sub">Aggregation · RU22</span>
-        <span class="topo-v2-sub">8 × 10G SFP+</span>
-        <span class="topo-v2-vlan">VLAN90 · 10.10.90.x/24</span>
-      </div>
-    </div>
-
-    <!-- USW-Agg → Pro 24 PoE (10G trunk) -->
-    <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
-      <span class="topo-vc-label">10G trunk</span>
-    </div>
-
-    <!-- ══════════════════════════════════════════════════════════════
-         TIER 4: Pro 24 PoE
-         ══════════════════════════════════════════════════════════ -->
-    <div class="topo-tier">
-      <div class="topo-v2-node topo-v2-switch" id="topo-switch-poe">
-        <span class="topo-v2-icon">⬡</span>
-        <span class="topo-v2-label">Pro 24 PoE</span>
-        <span class="topo-v2-sub">24-Port · RU23</span>
-        <span class="topo-v2-sub">24 × 1G PoE</span>
-        <span class="topo-v2-vlan">DHCP · mgmt</span>
-      </div>
-    </div>
-
-    <!-- Pro 24 PoE → host bus section -->
-    <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:var(--border-color);opacity:.5;"></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;">
-
-      <!-- 10G storage bus (Agg → VLAN90) -->
-      <div class="topo-bus-10g">
-        <span class="topo-bus-10g-label">← USW-Agg · 10G SFP+ · VLAN90 →</span>
-        <div class="topo-bus-10g-line"></div>
-      </div>
-
-      <!-- 1G management bus (PoE → DHCP) -->
-      <div class="topo-bus-1g">
-        <span class="topo-bus-1g-label">← Pro 24 PoE · 1G · DHCP mgmt →</span>
-        <div class="topo-bus-1g-line"></div>
-      </div>
-
-      <!-- ── Host nodes with drop wires ── -->
-      <div class="topo-v2-hosts">
-        {%- set all_defs = [
-          ('compute-storage-gpu-01', 'csg-01',    'RU4–12',    'Ceph · VLAN90', False),
-          ('compute-storage-01',     'cs-01',     'RU14–17',   'Ceph · VLAN90', False),
-          ('storage-01',             'sto-01',    'rack',      'Ceph · VLAN90', False),
-          ('monitor-01',             'mon-01',    'ZimaBoard', 'mgmt',          False),
-          ('monitor-02',             'mon-02',    'ZimaBoard', 'mgmt',          False),
-          ('large1',                 'large1',    'off-rack',  'table',         True),
-        ] -%}
-        {%- for hname, hlabel, hsub, hvlan, off_rack in all_defs -%}
-        {%- set st = topo_h[hname].status if hname in topo_h else 'unknown' -%}
-        <div class="topo-v2-host-wrap">
-          <!-- dual-homing wires: 10G solid green + 1G dashed amber -->
-          <div class="topo-v2-host-wires">
-            <div class="topo-v2-wire-10g" data-host="{{ hname }}" title="10G SFP+ → USW-Agg"></div>
-            <div class="topo-v2-wire-1g"  data-host="{{ hname }}" title="1G → Pro 24 PoE"></div>
-          </div>
-          <!-- host box -->
-          <div class="topo-v2-node topo-v2-host topo-host topo-v2-status-{{ st }}{{ ' topo-v2-offrack' if off_rack else '' }}"
-               data-host="{{ hname }}" style="min-width:80px; max-width:96px;">
-            <span class="topo-v2-icon">▣</span>
-            <span class="topo-v2-label">{{ hlabel }}</span>
-            <span class="topo-v2-sub">{{ hsub }}</span>
-            <span class="topo-v2-vlan">{{ hvlan }}</span>
-            <span class="topo-badge topo-badge-{{ st }}">{{ st if st != 'unknown' else '–' }}</span>
-          </div>
-        </div>
-        {%- endfor -%}
-      </div>
-
-    </div><!-- /topo-bus-section -->
-
-    <!-- ── Legend ── -->
-    <div class="topo-legend">
-      <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>
-
-  </div><!-- /topo-v2 -->
-  </div>
-
-  <!-- Host cards -->
-  <div class="host-grid" id="host-grid">
-    {% for name, host in snapshot.hosts.items() %}
-    {% set suppressed = suppressions | selectattr('target_name', 'equalto', name) | list %}
-    <div class="host-card host-card-{{ host.status }}" data-host="{{ name }}">
-      <div class="host-card-header">
-        <div class="host-name-row">
-          <span class="host-status-dot dot-{{ host.status }}"></span>
-          <span class="host-name">{{ name }}</span>
-          {% if suppressed %}
-          <span class="badge-suppressed" title="Suppressed">🔕</span>
-          {% endif %}
-        </div>
-        <div class="host-meta">
-          <span class="host-ip">{{ host.ip }}</span>
-          <span class="host-source source-{{ host.source }}">{{ host.source }}</span>
-        </div>
-      </div>
-
-      {% if host.interfaces %}
-      <div class="iface-list">
-        {% for iface, state in host.interfaces.items() | sort %}
-        <div class="iface-row">
-          <span class="iface-dot dot-{{ state }}"></span>
-          <span class="iface-name">{{ iface }}</span>
-          <span class="iface-state state-{{ state }}">{{ state }}</span>
-        </div>
-        {% endfor %}
-      </div>
-      {% else %}
-      <div class="host-ping-note">ping-only / no node_exporter</div>
-      {% endif %}
-
-      <div class="host-actions">
-        <button class="lt-btn lt-btn-ghost lt-btn-sm btn-suppress"
-                data-sup-type="host"
-                data-sup-name="{{ name }}"
-                data-sup-detail=""
-                title="Suppress alerts for this host">
-          🔕 Suppress
-        </button>
-        <a href="{{ url_for('links_page') }}#{{ name }}"
-           class="lt-btn lt-btn-secondary lt-btn-sm" style="text-decoration:none">
-          ↗ Links
-        </a>
-      </div>
-    </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 host data yet</div>
-      <div class="lt-empty-state-body">The monitor daemon may still be starting up.</div>
-    </div>
-    {% endfor %}
-  </div>
-</section>
-
-<!-- ── UniFi devices ────────────────────────────────────────────────── -->
-{% if snapshot.unifi %}
-<section class="g-section">
-  <div class="g-section-header">
-    <h2 class="g-section-title">UniFi Devices</h2>
-  </div>
-  <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="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>
-  </div>
-</section>
-{% endif %}
-
-<!-- ── Active alerts ───────────────────────────────────────────────── -->
 <section class="g-section">
   <div class="g-section-header">
     <h2 class="g-section-title">Active Alerts</h2>
@@ -328,12 +75,13 @@
     <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">
+               placeholder="Filter by target, type, description…" autocomplete="off"
+               aria-label="Filter active alerts">
       </div>
-      <div class="sev-pills">
+      <div class="sev-pills" role="group" aria-label="Filter by severity">
-        <button type="button" class="pill active" data-sev="">All</button>
+        <button type="button" class="pill active" data-sev="" aria-pressed="true">All</button>
-        <button type="button" class="pill" data-sev="critical">Critical</button>
+        <button type="button" class="pill" data-sev="critical" aria-pressed="false">Critical</button>
-        <button type="button" class="pill" data-sev="warning">Warning</button>
+        <button type="button" class="pill" data-sev="warning" aria-pressed="false">Warning</button>
       </div>
     </div>
   </div>
@@ -366,8 +114,11 @@
         <tbody>
           {% for e in events %}
           {% if e.severity != 'info' %}
-          <tr class="row-{{ e.severity }}">
+          <tr class="row-{{ e.severity }}{% if e.is_suppressed %} row-suppressed{% endif %}">
-            <td><span class="lt-badge badge-{{ e.severity }}">{{ e.severity }}</span></td>
+            <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>
@@ -415,6 +166,274 @@
   </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">
+
+    {%- set topo_h = snapshot.hosts if snapshot.hosts else {} -%}
+
+    <!-- ══════════════════════════════════════════════════════════════
+         TIER 1: Internet (WAN edge)
+         ══════════════════════════════════════════════════════════ -->
+    <div class="topo-tier">
+      <div class="topo-v2-node topo-v2-internet">
+        <span class="topo-v2-icon">◈</span>
+        <span class="topo-v2-label">INTERNET</span>
+        <span class="topo-v2-sub">WAN uplink</span>
+      </div>
+    </div>
+
+    <!-- WAN wire: cyan → WAN gradient -->
+    <div class="topo-vc">
+      <div class="topo-vc-wire topo-vc-wire--wan"></div>
+      <span class="topo-vc-label">WAN · 10G SFP+</span>
+    </div>
+
+    <!-- ══════════════════════════════════════════════════════════════
+         TIER 2: Router – UDM-Pro
+         ══════════════════════════════════════════════════════════ -->
+    <div class="topo-tier">
+      <div class="topo-v2-node topo-v2-router">
+        <span class="topo-v2-icon">⬡</span>
+        <span class="topo-v2-label">UDM-Pro</span>
+        <span class="topo-v2-sub">Dream Machine Pro</span>
+        <span class="topo-v2-sub">RU24</span>
+      </div>
+    </div>
+
+    <!-- UDM-Pro → USW-Agg (10G SFP+) -->
+    <div class="topo-vc">
+      <div class="topo-vc-wire topo-vc-wire--10g"></div>
+      <span class="topo-vc-label">10G SFP+</span>
+    </div>
+
+    <!-- ══════════════════════════════════════════════════════════════
+         TIER 3: USW-Aggregation
+         ══════════════════════════════════════════════════════════ -->
+    <div class="topo-tier">
+      <div class="topo-v2-node topo-v2-switch" id="topo-switch-agg">
+        <span class="topo-v2-icon">⬡</span>
+        <span class="topo-v2-label">USW-Agg</span>
+        <span class="topo-v2-sub">Aggregation · RU22</span>
+        <span class="topo-v2-sub">8 × 10G SFP+</span>
+        <span class="topo-v2-vlan">VLAN90 · 10.10.90.x/24</span>
+      </div>
+    </div>
+
+    <!-- USW-Agg → Pro 24 PoE (10G trunk) -->
+    <div class="topo-vc">
+      <div class="topo-vc-wire topo-vc-wire--10g"></div>
+      <span class="topo-vc-label">10G trunk</span>
+    </div>
+
+    <!-- ══════════════════════════════════════════════════════════════
+         TIER 4: Pro 24 PoE
+         ══════════════════════════════════════════════════════════ -->
+    <div class="topo-tier">
+      <div class="topo-v2-node topo-v2-switch" id="topo-switch-poe">
+        <span class="topo-v2-icon">⬡</span>
+        <span class="topo-v2-label">Pro 24 PoE</span>
+        <span class="topo-v2-sub">24-Port · RU23</span>
+        <span class="topo-v2-sub">24 × 1G PoE</span>
+        <span class="topo-v2-vlan">DHCP · mgmt</span>
+      </div>
+    </div>
+
+    <!-- Pro 24 PoE → host bus section -->
+    <div class="topo-vc">
+      <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">
+
+      <!-- 10G storage bus (Agg → VLAN90) -->
+      <div class="topo-bus-10g">
+        <span class="topo-bus-10g-label">← USW-Agg · 10G SFP+ · VLAN90 →</span>
+        <div class="topo-bus-10g-line"></div>
+      </div>
+
+      <!-- 1G management bus (PoE → DHCP) -->
+      <div class="topo-bus-1g">
+        <span class="topo-bus-1g-label">← Pro 24 PoE · 1G · DHCP mgmt →</span>
+        <div class="topo-bus-1g-line"></div>
+      </div>
+
+      <!-- ── Host nodes with drop wires ── -->
+      <div class="topo-v2-hosts">
+        {%- set all_defs = [
+          ('compute-storage-gpu-01', 'csg-01',    'RU4–12',    'Ceph · VLAN90', False),
+          ('compute-storage-01',     'cs-01',     'RU14–17',   'Ceph · VLAN90', False),
+          ('storage-01',             'sto-01',    'rack',      'Ceph · VLAN90', False),
+          ('monitor-01',             'mon-01',    'ZimaBoard', 'mgmt',          False),
+          ('monitor-02',             'mon-02',    'ZimaBoard', 'mgmt',          False),
+          ('large1',                 'large1',    'off-rack',  'table',         True),
+        ] -%}
+        {%- for hname, hlabel, hsub, hvlan, off_rack in all_defs -%}
+        {%- set st = topo_h[hname].status if hname in topo_h else 'unknown' -%}
+        <div class="topo-v2-host-wrap">
+          <!-- dual-homing wires: 10G solid green + 1G dashed amber -->
+          <div class="topo-v2-host-wires">
+            <div class="topo-v2-wire-10g" data-host="{{ hname }}" title="10G SFP+ → USW-Agg"></div>
+            <div class="topo-v2-wire-1g"  data-host="{{ hname }}" title="1G → Pro 24 PoE"></div>
+          </div>
+          <!-- host box -->
+          <div class="topo-v2-node topo-v2-host topo-host topo-v2-status-{{ st }}{{ ' topo-v2-offrack' if off_rack else '' }} 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>
+            <span class="topo-v2-vlan">{{ hvlan }}</span>
+            <span class="topo-badge topo-badge-{{ st }}">{{ st if st != 'unknown' else '–' }}</span>
+          </div>
+        </div>
+        {%- endfor -%}
+      </div>
+
+    </div><!-- /topo-bus-section -->
+
+    <!-- ── Legend ── -->
+    <div class="topo-legend">
+      <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 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 %}
+    <div class="host-card host-card-{{ host.status }}" data-host="{{ name }}">
+      <div class="host-card-header">
+        <div class="host-name-row">
+          <span class="host-status-dot dot-{{ host.status }}"></span>
+          <span class="host-name">{{ name }}</span>
+          {% if suppressed %}
+          <span class="badge-suppressed" title="Suppressed">🔕</span>
+          {% endif %}
+        </div>
+        <div class="host-meta">
+          <span class="host-ip">{{ host.ip }}</span>
+          <span class="host-source source-{{ host.source }}">{{ host.source }}</span>
+        </div>
+      </div>
+
+      {% if host.interfaces %}
+      <div class="iface-list">
+        {% for iface, state in host.interfaces.items() | sort %}
+        <div class="iface-row">
+          <span class="iface-dot dot-{{ state }}"></span>
+          <span class="iface-name">{{ iface }}</span>
+          <span class="iface-state state-{{ state }}">{{ state }}</span>
+        </div>
+        {% endfor %}
+      </div>
+      {% else %}
+      <div class="host-ping-note">ping-only / no node_exporter</div>
+      {% endif %}
+
+      <div class="host-actions">
+        <button class="lt-btn lt-btn-ghost lt-btn-sm btn-suppress"
+                data-sup-type="host"
+                data-sup-name="{{ name }}"
+                data-sup-detail=""
+                aria-label="Suppress alerts for {{ name }}">
+          🔕 Suppress
+        </button>
+        <a href="{{ url_for('links_page') }}#{{ name }}"
+           class="lt-btn lt-btn-secondary lt-btn-sm">
+          ↗ Links
+        </a>
+      </div>
+    </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 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 ────────────────────────────────────────────────── -->
+{% if snapshot.unifi %}
+<section class="g-section">
+  <div class="g-section-header">
+    <h2 class="g-section-title">UniFi Devices</h2>
+  </div>
+  <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="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=""
+                      aria-label="Suppress alerts for {{ d.name }}">
+                🔕 Suppress
+              </button>
+              {% endif %}
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</section>
+{% endif %}
+
 <!-- ── Recently Resolved (last 24h) ───────────────────────────────── -->
 {% if recent_resolved %}
 <section class="g-section">
@@ -444,65 +463,12 @@
 </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>
   // Start auto-refresh using saved settings interval (default 30 s)
-  var _savedInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 30;
+  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
@@ -511,8 +477,29 @@
     if (s.refreshInterval > 0) lt.autoRefresh.start(refreshAll, s.refreshInterval * 1000);
   };
 
-  document.getElementById('suppress-form')?.addEventListener('submit', submitSuppress);
+  // ── Topology collapse toggle ───────────────────────────────────
-  document.getElementById('sup-type')?.addEventListener('change', updateSuppressForm);
+  (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);
+      wrap.setAttribute('aria-hidden', v ? 'true' : 'false');
+      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 => {
@@ -558,8 +545,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();
   });
@@ -568,13 +559,25 @@
   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'));
+      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');
+      if (matchPill) { matchPill.classList.add('active'); matchPill.setAttribute('aria-pressed', 'true'); }
       _filterSev = sev;
       applyEventsFilter();
       document.getElementById('events-table-wrap')?.scrollIntoView({ behavior: 'smooth', block: 'start' });

templates/inspector.html

@@ -6,18 +6,18 @@
 <div class="lt-page-header">
   <div>
     <h1 class="lt-page-title">Network Inspector</h1>
-    <p class="g-page-sub" style="margin-top:4px">
+    <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:8px"></span>
+      <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>
@@ -107,10 +107,8 @@ function portBlockHtml(idx, port, swName, sfpBlock) {
   const sfpCls    = sfpBlock ? ' sfp-block' : '';
   const speedTxt  = portSpeedLabel(port);
   // LLDP neighbor: first 6 chars of hostname
-  const lldpName  = (port && port.lldp_table && port.lldp_table.length)
+  const lldpName  = (port && port.lldp && (port.lldp.system_name || port.lldp.chassis_id))
-                    ? escHtml((port.lldp_table[0].chassis_id_subtype === 'local'
+                    ? escHtml((port.lldp.system_name || port.lldp.chassis_id || '').slice(0, 6))
-                        ? port.lldp_table[0].chassis_id
-                        : port.lldp_table[0].system_name || port.lldp_table[0].chassis_id || '').slice(0, 6))
                     : '';
   const lldpHtml  = lldpName ? `<span class="port-lldp">${lldpName}</span>` : '';
   const speedHtml = speedTxt ? `<span class="port-speed">${speedTxt}</span>` : '';
@@ -162,10 +160,8 @@ function renderChassis(swName, sw) {
         const state  = portBlockState(port);
         const title  = port ? escHtml(port.name) : `Port ${idx}`;
         const speedTxt  = portSpeedLabel(port);
-        const lldpName  = (port && port.lldp_table && port.lldp_table.length)
+        const lldpName  = (port && port.lldp && (port.lldp.system_name || port.lldp.chassis_id))
-                          ? escHtml((port.lldp_table[0].chassis_id_subtype === 'local'
+                          ? escHtml((port.lldp.system_name || port.lldp.chassis_id || '').slice(0, 6))
-                              ? port.lldp_table[0].chassis_id
-                              : port.lldp_table[0].system_name || port.lldp_table[0].chassis_id || '').slice(0, 6))
                           : '';
         const speedHtml = speedTxt ? `<span class="port-speed">${speedTxt}</span>` : '';
         const lldpHtml  = lldpName ? `<span class="port-lldp">${lldpName}</span>` : '';
@@ -231,6 +227,7 @@ function selectPort(el) {
 }
 
 function closePanel() {
+  if (_diagPollTimer) { clearInterval(_diagPollTimer); _diagPollTimer = null; }
   document.getElementById('inspector-panel').classList.remove('open');
   document.querySelectorAll('.switch-port-block.selected')
     .forEach(el => el.classList.remove('selected'));
@@ -262,7 +259,7 @@ function renderPanel(swName, idx) {
     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="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>
+      <div class="panel-row"><span class="panel-label">Class</span><span class="panel-val">class ${escHtml(String(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>` : ''}`;
   }
@@ -320,7 +317,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>` : '';
@@ -433,7 +432,7 @@ function renderInspector(data) {
   }
 
   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;
   }
 
@@ -460,13 +459,13 @@ 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();
-var _inspInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 60;
+const _inspInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 60;
 if (_inspInterval > 0) lt.autoRefresh.start(loadInspector, Math.max(_inspInterval, 15) * 1000);
 
 window.onGandalfSettingsChanged = function(s) {

templates/links.html

@@ -6,9 +6,9 @@
 <div class="lt-page-header">
   <div>
     <h1 class="lt-page-title">Link Debug</h1>
-    <p class="g-page-sub" style="margin-top:4px">
+    <p class="g-page-sub">
       Per-interface stats: speed, duplex, SFP optical levels, TX/RX rates, errors, and carrier changes.
-      <span id="links-updated" style="margin-left:8px"></span>
+      <span id="links-updated" class="g-page-sub-aside"></span>
     </p>
   </div>
 </div>
@@ -17,7 +17,8 @@
   <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">
+             placeholder="Filter by host or switch name…" autocomplete="off"
+             aria-label="Filter by host or switch name">
     </div>
   </div>
   <div class="lt-toolbar-right">
@@ -35,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) {
@@ -325,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 || {};
@@ -347,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>
@@ -358,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');
+  const isCollapsed = panel.classList.contains('collapsed');
-  if (btn) btn.textContent = 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') || '{}');
@@ -381,8 +386,10 @@ function restoreCollapseState() {
     if (!panel) continue;
     if (isCollapsed) {
       panel.classList.add('collapsed');
-      const btn = panel.querySelector('.panel-toggle');
+      const btn   = panel.querySelector('.panel-toggle');
-      if (btn) btn.textContent = '[+]';
+      const title = panel.querySelector('.link-host-title');
+      if (btn)   btn.textContent = '[+]';
+      if (title) title.setAttribute('aria-expanded', 'false');
     }
   }
 }
@@ -407,37 +414,37 @@ function buildLinkSummary(hosts, unifiSwitches) {
   }
   const allTotal = totalIfaces + swTotal;
   const allDown  = downIfaces  + swDown;
-  const downColor = allDown  > 0 ? 'var(--red)'   : 'var(--green)';
+  const downCls    = allDown  > 0 ? 'lt-text-red'   : 'lt-text-green';
-  const errColor  = errIfaces > 0 ? 'var(--amber)' : 'var(--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" aria-hidden="true" style="color:var(--amber)">⚡</span>
+      <span class="lt-stat-icon lt-text-amber" aria-hidden="true">⚡</span>
       <div class="lt-stat-info">
-        <span class="lt-stat-value" style="color:var(--amber)">${totalPoe.toFixed(1)}</span>
+        <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" style="margin-bottom:16px">
+    <div class="lt-stats-grid lt-stats-grid--mb">
       <div class="lt-stat-card">
-        <span class="lt-stat-icon" aria-hidden="true" style="color:var(--cyan)">⬡</span>
+        <span class="lt-stat-icon lt-text-cyan" aria-hidden="true">⬡</span>
         <div class="lt-stat-info">
-          <span class="lt-stat-value" style="color:var(--cyan)">${allTotal}</span>
+          <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" aria-hidden="true" style="color:${downColor}">●</span>
+        <span class="lt-stat-icon ${downCls}" aria-hidden="true">●</span>
         <div class="lt-stat-info">
-          <span class="lt-stat-value" style="color:${downColor}">${allDown}</span>
+          <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" aria-hidden="true" style="color:${errColor}">▲</span>
+        <span class="lt-stat-icon ${errCls}" aria-hidden="true">▲</span>
         <div class="lt-stat-info">
-          <span class="lt-stat-value" style="color:${errColor}">${errIfaces}</span>
+          <span class="lt-stat-value ${errCls}">${errIfaces}</span>
           <span class="lt-stat-label">With Errors</span>
         </div>
       </div>
@@ -461,12 +468,12 @@ function renderLinks(data) {
     const sample  = Object.values(ifaces)[0] || {};
     const ip      = sample.host_ip || '';
     const updStr  = data.updated
-      ? new Date(data.updated.replace(' UTC', 'Z').replace(' ', 'T')).toLocaleTimeString()
+      ? 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>
@@ -496,8 +503,10 @@ function applyLinksSearch() {
 function collapseAll() {
   document.querySelectorAll('.link-host-panel').forEach(p => {
     p.classList.add('collapsed');
-    const btn = p.querySelector('.panel-toggle');
+    const btn   = p.querySelector('.panel-toggle');
-    if (btn) btn.textContent = '[+]';
+    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]))
@@ -507,8 +516,10 @@ function collapseAll() {
 function expandAll() {
   document.querySelectorAll('.link-host-panel').forEach(p => {
     p.classList.remove('collapsed');
-    const btn = p.querySelector('.panel-toggle');
+    const btn   = p.querySelector('.panel-toggle');
-    if (btn) btn.textContent = '[–]';
+    const title = p.querySelector('.link-host-title');
+    if (btn)   btn.textContent = '[–]';
+    if (title) title.setAttribute('aria-expanded', 'true');
   });
   sessionStorage.setItem('linksCollapsed', '{}');
 }
@@ -557,7 +568,7 @@ async function loadLinks() {
 }
 
 loadLinks();
-var _linksInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 60;
+const _linksInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 60;
 if (_linksInterval > 0) lt.autoRefresh.start(loadLinks, Math.max(_linksInterval, 15) * 1000);
 
 window.onGandalfSettingsChanged = function(s) {
@@ -573,6 +584,12 @@ document.addEventListener('click', e => {
   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

@@ -6,7 +6,7 @@
 <div class="lt-page-header">
   <div>
     <h1 class="lt-page-title">Alert Suppressions</h1>
-    <p class="g-page-sub" style="margin-top:4px">Manage maintenance windows and per-target alert suppression rules.</p>
+    <p class="g-page-sub">Manage maintenance windows and per-target alert suppression rules.</p>
   </div>
 </div>
 
@@ -58,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">
+            <div class="duration-pills" role="group" aria-label="Select suppression duration">
-              <button type="button" class="pill" data-duration="30">30 min</button>
+              <button type="button" class="pill" data-duration="30" aria-pressed="false">30 min</button>
-              <button type="button" class="pill" data-duration="60">1 hr</button>
+              <button type="button" class="pill" data-duration="60" aria-pressed="false">1 hr</button>
-              <button type="button" class="pill" data-duration="240">4 hr</button>
+              <button type="button" class="pill" data-duration="240" aria-pressed="false">4 hr</button>
-              <button type="button" class="pill" data-duration="480">8 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="">Manual ∞</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>
@@ -110,7 +110,8 @@
             <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>
+              <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 %}
@@ -188,7 +189,7 @@
     <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 style="padding:12px 14px">
+    <div class="lt-section-body">
       <div class="targets-grid">
         {% for name, host in snapshot.hosts.items() %}
         <div class="target-card">
@@ -221,8 +222,11 @@
 
   function setDur(mins, el) {
     document.getElementById('s-expires').value = mins || '';
-    document.querySelectorAll('.duration-pills .pill').forEach(p => p.classList.remove('active'));
+    document.querySelectorAll('.duration-pills .pill').forEach(p => {
-    if (el) el.classList.add('active');
+      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;
@@ -251,7 +255,8 @@
         <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-frame">

tests/test_diagnose.py

@@ -9,9 +9,9 @@ from diagnose import DiagnosticsRunner  # noqa: E402
 # ── build_ssh_command ────────────────────────────────────────────────────────
 
 class TestBuildSshCommand:
-    def test_contains_stricthostkeychecking_no(self):
+    def test_contains_stricthostkeychecking_accept_new(self):
         cmd = DiagnosticsRunner.build_ssh_command('10.0.0.1', 'eth0')
-        assert 'StrictHostKeyChecking=no' in cmd
+        assert 'StrictHostKeyChecking=accept-new' in cmd
 
     def test_contains_host_ip(self):
         cmd = DiagnosticsRunner.build_ssh_command('10.0.0.1', 'eth0')