CSS: replace remaining inline color/size styles with TDS utilities

- Stat card icons and values: style="color:var(--red)" etc replaced with lt-text-red, lt-text-amber, lt-text-cyan, lt-text-green (defined in base.css with both color and glow-shadow) - Host search input: style="width:180px" extracted to .lt-search-input--sm - base.html: suppress modal form groups use lt-form-group--last for last item (already committed); lt-divider--compact applied to settings divider Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
CSS: remove remaining fixable inline styles across templates
2026-05-10 23:17:22 -04:00 · 2026-05-10 23:15:15 -04:00 · 2026-05-10 23:13:24 -04:00 · 2026-05-10 23:11:15 -04:00 · 2026-05-10 23:09:25 -04:00 · 2026-05-10 23:07:53 -04:00
9 changed files with 769 additions and 545 deletions
@@ -10,6 +10,7 @@ import json
 import logging
 import os
 import re
+import tempfile
 import threading
 import time
 import uuid
@@ -159,6 +160,16 @@ def index():
    last_check = db.get_state('last_check', 'Never')
    snapshot = json.loads(snapshot_raw) if snapshot_raw else {}
    suppressions = db.get_active_suppressions()
+    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 '',
+        )
    recent_resolved = db.get_recent_resolved(hours=24, limit=10)
    return render_template(
        'index.html',
@@ -213,6 +224,17 @@ def suppressions_page():
@require_auth
 def api_status():
    active = db.get_active_events(limit=_PAGE_LIMIT)
+    suppressions = db.get_active_suppressions()
+    for ev in active:
+        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 '',
+        )
    last_check = db.get_state('last_check', 'Never')
    return jsonify({
        'summary': db.get_status_summary(),
@@ -458,7 +480,7 @@ 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 = ldap_cfg.get('cache_dir', os.path.join(tempfile.gettempdir(), 'gandalf_avatars'))
    os.makedirs(cache_dir, exist_ok=True)
    cache_file = os.path.join(cache_dir, f'user_{safe_name}.jpg')
    sentinel    = os.path.join(cache_dir, f'user_{safe_name}.none')
@@ -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,
            }


@@ -89,6 +89,16 @@ function updateStatusBar(summary, lastCheck, daemonOk) {
    alertBadge.style.display = total ? '' : 'none';
  }

+  // Update stat cards
+  const scCrit = document.getElementById('stat-critical-val');
+  const scWarn = document.getElementById('stat-warning-val');
+  const scRes  = document.getElementById('stat-resolved-val');
+  if (scCrit) scCrit.textContent = critCount;
+  if (scWarn) scWarn.textContent = warnCount;
+  if (scRes && summary.resolved_24h !== null && summary.resolved_24h !== undefined) scRes.textContent = summary.resolved_24h;
+  const statCritCard = document.getElementById('stat-critical');
+  if (statCritCard) statCritCard.classList.toggle('lt-stat-card--alert', critCount > 0);
+
  // Stale data banner: warn if last_check is older than 15 minutes
  let staleBanner = document.getElementById('stale-banner');
  if (lastCheck) {
@@ -112,6 +122,9 @@ function updateStatusBar(summary, lastCheck, daemonOk) {
 }

 function updateHostGrid(hosts) {
+  const scHosts = document.getElementById('stat-hosts-val');
+  if (scHosts) scHosts.textContent = Object.keys(hosts).length;
+
  for (const [name, host] of Object.entries(hosts)) {
    const card = document.querySelector(`.host-card[data-host="${CSS.escape(name)}"]`);
    if (!card) continue;
@@ -194,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>`
    : '';
@@ -209,9 +222,12 @@ function updateEventsTable(events, totalActive) {
      ? `<a href="${lt.escHtml(ticketBase)}${lt.escHtml(String(e.ticket_id))}" target="_blank"
            class="ticket-link">#${e.ticket_id}</a>`
      : '–';
+    const supBadge = e.is_suppressed
+      ? `<span class="lt-badge badge-suppressed" title="Alert suppressed">🔕 sup</span>`
+      : '';
    return `
-      <tr class="row-${e.severity}">
-        <td><span class="lt-badge badge-${e.severity}">${e.severity}</span></td>
+      <tr class="row-${e.severity}${e.is_suppressed ? ' row-suppressed' : ''}">
+        <td><span class="lt-badge badge-${e.severity}">${e.severity}</span>${supBadge}</td>
        <td>${lt.escHtml(e.event_type.replace(/_/g,' '))}</td>
        <td><strong>${lt.escHtml(e.target_name)}</strong></td>
        <td>${lt.escHtml(e.target_detail || '–')}</td>
@@ -321,6 +337,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
@@ -83,16 +83,67 @@
  .lt-main.lt-container { padding-top: calc(46px + var(--space-sm)); }
 }

-/* ── Refresh button loading state ────────────────────────────────── */
-[data-action="refresh"].is-loading {
+/* ── Button loading state ─────────────────────────────────────────── */
+[data-action="refresh"].is-loading,
+.lt-btn.is-loading {
  opacity: .5;
  pointer-events: none;
  cursor: wait;
+  position: relative;
 }
-[data-action="refresh"].is-loading::after {
+[data-action="refresh"].is-loading::after,
+.lt-btn.is-loading::after {
  content: '…';
 }

+/* ── Secondary button – dark-mode definition ─────────────────────────
+   base.css only defines .lt-btn-secondary in its light-theme block,
+   so dark mode falls back to the default cyan primary appearance.
+   This restores a visually distinct secondary look in dark mode. */
+.lt-btn-secondary {
+  background: var(--cyan-dim);
+  border-color: rgba(0,212,255,.28);
+  color: var(--cyan);
+}
+.lt-btn-secondary:hover {
+  background: rgba(0,212,255,.18);
+  border-color: rgba(0,212,255,.5);
+}
+
+/* ── ⌘K hint button in header ────────────────────────────────────── */
+.lt-cmd-hint-btn {
+  font-size: 0.65rem;
+  opacity: 0.55;
+  letter-spacing: 0.03em;
+  padding: 0.2rem 0.45rem;
+}
+
+/* ── Form group modifiers ────────────────────────────────────────── */
+.lt-form-group--last { margin-bottom: 0; }
+
+/* ── Search input size variant ───────────────────────────────────── */
+.lt-search-input--sm { width: 180px; }
+
+/* ── Divider compact variant ─────────────────────────────────────── */
+.lt-divider--compact { margin: 1rem 0 0.75rem; }
+
+/* ── 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); }
@@ -142,13 +193,6 @@
 .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; }

 /* ── Badge severity color variants (used with lt-badge) ───────────── */
@@ -168,6 +212,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 +223,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 +419,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 +479,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 +529,7 @@
 /* Bus rails */
 .topo-bus-section {
  width: 100%;
+  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
@@ -560,6 +610,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 +641,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,38 +759,7 @@
 .poe-bar-warn { background: var(--amber); }
 .poe-bar-crit { background: var(--red); }

-/* UniFi section divider */
-.unifi-section-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin: 24px 0 12px;
-  color: var(--cyan);
-  font-size: .75em;
-  letter-spacing: .1em;
-}
-.unifi-section-header::before,
-.unifi-section-header::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
-}

-/* Link health summary */
-.link-summary-panel {
-  background: var(--bg2);
-  border: 1px solid var(--border-color);
-  padding: 12px 16px;
-  margin-bottom: 12px;
-}
-.link-summary-panel.link-summary-has-alerts { border-color: var(--amber); }
-.link-summary-grid  { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
-.link-summary-stat  { min-width: 80px; }
-.link-summary-stat.lss-alert .lss-label { color: var(--amber); }
-.lss-label { display: block; font-size: .62em; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
-.lss-value { font-size: 1.2em; font-weight: bold; color: var(--text); }
-.lss-sub   { font-size: .7em; color: var(--text-muted); font-weight: normal; }

 .link-loading { padding: 20px; text-align: center; color: var(--text-muted); font-size: .8em; }
 .link-loading::after { content: ' ...'; animation: blink 1s step-end infinite; }
@@ -995,6 +1017,17 @@
 .diag-pulse-link a { color: var(--cyan); }
 .diag-pulse-link a:hover { text-shadow: var(--glow-cyan); }

+/* ── Stat card alert variant (pulsing border when critical > 0) ─── */
+.lt-stat-card--alert {
+  border-color: var(--red) !important;
+  box-shadow: 0 0 8px rgba(255,45,85,.25) !important;
+  animation: topo-pulse-down 2s ease-in-out infinite;
+}
+.lt-stat-card--alert::before { background: var(--red); box-shadow: var(--glow-red); }
+
+/* ── lt-frame inside g-section: no extra bottom margin ────────────── */
+.g-section > .lt-frame { margin-bottom: 0; }
+
 /* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .host-grid         { grid-template-columns: 1fr; }
@@ -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 %}>
@@ -166,11 +143,10 @@

      <!-- ⌘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"
              title="Command palette (Ctrl+K)"
              aria-label="Open command palette"
-              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>
+              onclick="if(window.lt&&lt.cmdPalette)lt.cmdPalette.open()">&#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">
+              <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 &#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>
@@ -266,17 +295,13 @@
          </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-label">User</span>
-            <span class="lt-kv-value lt-text-cyan">{{ user.name or user.username }}</span>
-          </div>
+          <span class="lt-kv-key">User</span>
+          <span class="lt-kv-val lt-kv-val--cyan">{{ user.name or user.username }}</span>
          {% if user.groups %}
-          <div class="lt-kv-row">
-            <span class="lt-kv-label">Groups</span>
-            <span class="lt-kv-value">{{ user.groups | join(', ') }}</span>
-          </div>
+          <span class="lt-kv-key">Groups</span>
+          <span class="lt-kv-val">{{ user.groups | join(', ') }}</span>
          {% endif %}
        </div>
      </div>
@@ -26,275 +26,67 @@
  </div>
 </div>

-<!-- ── Network topology + host grid ───────────────────────────────── -->
-<section class="g-section">
-  <div class="g-section-header">
-    <h2 class="g-section-title">Network Hosts</h2>
+<!-- ── Stats summary cards ──────────────────────────────────────────── -->
+<div class="lt-stats-grid">
+  <div class="lt-stat-card{% if summary.critical %} lt-stat-card--alert{% endif %}"
+       id="stat-critical" role="button" tabindex="0"
+       data-stat-filter="critical" aria-label="{{ summary.critical or 0 }} critical alerts">
+    <span class="lt-stat-icon lt-text-red" aria-hidden="true">●</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value lt-text-red" id="stat-critical-val">{{ summary.critical or 0 }}</span>
+      <span class="lt-stat-label">Critical</span>
+    </div>
  </div>
-
-  <div class="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 class="lt-stat-card"
+       id="stat-warning" role="button" tabindex="0"
+       data-stat-filter="warning" aria-label="{{ summary.warning or 0 }} warning alerts">
+    <span class="lt-stat-icon lt-text-amber" aria-hidden="true">●</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value lt-text-amber" id="stat-warning-val">{{ summary.warning or 0 }}</span>
+      <span class="lt-stat-label">Warning</span>
    </div>
-
-    <!-- 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 class="lt-stat-card" id="stat-hosts" aria-label="Monitored hosts">
+    <span class="lt-stat-icon lt-text-cyan" aria-hidden="true">⬡</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value lt-text-cyan" id="stat-hosts-val">{{ snapshot.hosts | length }}</span>
+      <span class="lt-stat-label">Hosts</span>
    </div>
-    {% 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>
+  <div class="lt-stat-card" id="stat-resolved" aria-label="{{ recent_resolved | length }} alerts resolved in last 24 hours">
+    <span class="lt-stat-icon lt-text-green" aria-hidden="true">✔</span>
+    <div class="lt-stat-info">
+      <span class="lt-stat-value lt-text-green" id="stat-resolved-val">{{ recent_resolved | length }}</span>
+      <span class="lt-stat-label">Resolved 24h</span>
    </div>
-    {% endfor %}
  </div>
-</section>
+</div>

-<!-- ── 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-table-wrap">
-    <table class="lt-table" id="unifi-table">
-      <caption class="lt-sr-only">UniFi network devices</caption>
-      <thead>
-        <tr>
-          <th>Status</th>
-          <th>Name</th>
-          <th>Type</th>
-          <th>Model</th>
-          <th>IP</th>
-          <th>Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for d in snapshot.unifi %}
-        <tr class="{% if not d.connected %}row-critical{% endif %}">
-          <td>
-            <span class="dot-{{ 'up' if d.connected else 'down' }}"></span>
-            {{ 'ONLINE' if d.connected else 'OFFLINE' }}
-          </td>
-          <td><strong>{{ d.name }}</strong></td>
-          <td>{{ d.type }}</td>
-          <td>{{ d.model }}</td>
-          <td>{{ d.ip }}</td>
-          <td>
-            {% if not d.connected %}
-            <button class="lt-btn lt-btn-ghost lt-btn-sm btn-suppress"
-                    data-sup-type="unifi_device"
-                    data-sup-name="{{ d.name }}"
-                    data-sup-detail="">
-              🔕 Suppress
-            </button>
-            {% endif %}
-          </td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-</section>
-{% endif %}
-
-<!-- ── Active alerts ───────────────────────────────────────────────── -->
+<!-- ── Active alerts ─────────────────────────────── (above the fold) -->
 <section class="g-section">
  <div class="g-section-header">
    <h2 class="g-section-title">Active Alerts</h2>
    <span class="g-section-badge" id="alert-count-badge"
          {% if not summary.critical and not summary.warning %}style="display:none"{% endif %}>{{ (summary.critical or 0) + (summary.warning or 0) }}</span>
-    <div class="g-section-actions">
-      <div class="events-filter-bar">
-        <input type="search" class="lt-input lt-input-sm" id="events-search"
+  </div>
+  <div class="lt-toolbar">
+    <div class="lt-toolbar-left">
+      <div class="lt-search">
+        <input type="search" class="lt-input lt-search-input" id="events-search"
               placeholder="Filter by target, type, description…" autocomplete="off">
-        <div class="sev-pills">
-          <button type="button" class="pill active" data-sev="">All</button>
-          <button type="button" class="pill" data-sev="critical">Critical</button>
-          <button type="button" class="pill" data-sev="warning">Warning</button>
-        </div>
+      </div>
+      <div class="sev-pills">
+        <button type="button" class="pill active" data-sev="">All</button>
+        <button type="button" class="pill" data-sev="critical">Critical</button>
+        <button type="button" class="pill" data-sev="warning">Warning</button>
      </div>
    </div>
  </div>
-  <div id="events-table-wrap">
+  <div class="lt-frame">
+    <span class="lt-frame-bl">&#x255A;</span>
+    <span class="lt-frame-br">&#x255D;</span>
+    <div class="lt-section-header">Alert Queue</div>
+    <div id="events-table-wrap">
    {% if events %}
    {% if total_active is defined and total_active > events|length %}
    <div class="pagination-notice">Showing {{ events|length }} of {{ total_active }} active alerts &mdash; <a href="/api/events?limit=1000">view all via API</a></div>
@@ -319,8 +111,11 @@
        <tbody>
          {% for e in events %}
          {% if e.severity != 'info' %}
-          <tr class="row-{{ e.severity }}">
-            <td><span class="lt-badge badge-{{ e.severity }}">{{ e.severity }}</span></td>
+          <tr class="row-{{ e.severity }}{% if e.is_suppressed %} row-suppressed{% endif %}">
+            <td>
+              <span class="lt-badge badge-{{ e.severity }}">{{ e.severity }}</span>
+              {% if e.is_suppressed %}<span class="lt-badge badge-suppressed" title="Alert suppressed">🔕 sup</span>{% endif %}
+            </td>
            <td>{{ e.event_type | replace('_', ' ') }}</td>
            <td><strong>{{ e.target_name }}</strong></td>
            <td>{{ e.target_detail or '–' }}</td>
@@ -364,8 +159,276 @@
      <div class="lt-empty-state-title">No active alerts</div>
    </div>
    {% endif %}
+    </div><!-- /#events-table-wrap -->
+  </div><!-- /.lt-frame -->
+</section>
+
+<!-- ── Network topology + host grid ───────────────────────────────── -->
+<section class="g-section">
+  <div class="g-section-header">
+    <h2 class="g-section-title">Network Hosts</h2>
+    <button type="button" class="topo-collapse-btn" id="topo-toggle-btn"
+            aria-expanded="true" aria-controls="topo-collapsible-wrap">&#x25B4; Collapse</button>
+  </div>
+  <div class="topo-collapsible" id="topo-collapsible-wrap">
+
+  <div class="topology" id="topology-diagram">
+  <div class="topo-v2">
+
+    {%- 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">
+      </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=""
+                title="Suppress alerts for this host">
+          🔕 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="">
+                🔕 Suppress
+              </button>
+              {% endif %}
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
  </div>
 </section>
+{% endif %}

 <!-- ── Recently Resolved (last 24h) ───────────────────────────────── -->
 {% if recent_resolved %}
@@ -374,91 +437,28 @@
    <h2 class="g-section-title">Recently Resolved</h2>
    <span class="g-section-badge g-section-badge-resolved">{{ recent_resolved | length }} in last 24h</span>
  </div>
-  <div class="lt-table-wrap">
-    <table class="lt-table">
-      <caption class="lt-sr-only">Recently resolved alerts</caption>
-      <thead>
-        <tr>
-          <th>Sev</th>
-          <th>Type</th>
-          <th>Target</th>
-          <th>Detail</th>
-          <th>Resolved</th>
-          <th>Duration</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for e in recent_resolved %}
-        <tr class="row-resolved">
-          <td><span class="lt-badge badge-resolved">{{ e.severity }}</span></td>
-          <td>{{ e.event_type | replace('_', ' ') }}</td>
-          <td><strong>{{ e.target_name }}</strong></td>
-          <td>{{ e.target_detail or '–' }}</td>
-          <td class="ts-cell">
-            <span class="event-age" data-ts="{{ e.resolved_at }}">{{ e.resolved_at }}</span>
-          </td>
-          <td class="ts-cell event-duration" data-first="{{ e.first_seen }}" data-resolved="{{ e.resolved_at }}">–</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
+  <div class="lt-timeline">
+    {% for e in recent_resolved %}
+    {%- set dot_cls = 'lt-timeline-item--green' if e.severity == 'info' else 'lt-timeline-item--dim' -%}
+    <div class="lt-timeline-item {{ dot_cls }}">
+      <div class="lt-timeline-meta">
+        <strong class="lt-timeline-actor">{{ e.target_name }}</strong>
+        {% if e.target_detail %}<span>· {{ e.target_detail }}</span>{% endif %}
+        <span class="lt-timeline-time event-age" data-ts="{{ e.resolved_at }}">{{ e.resolved_at }}</span>
+      </div>
+      <div class="lt-timeline-body">
+        {{ e.event_type | replace('_', ' ') }}
+        &nbsp;·&nbsp;
+        <span class="lt-badge badge-resolved">{{ e.severity }}</span>
+        &nbsp;·&nbsp; duration
+        <span class="event-duration" data-first="{{ e.first_seen }}" data-resolved="{{ e.resolved_at }}">–</span>
+      </div>
+    </div>
+    {% endfor %}
  </div>
 </section>
 {% endif %}

-<!-- ── Quick-suppress modal ─────────────────────────────────────────── -->
-<div id="suppress-modal" class="lt-modal-overlay"
-     role="dialog" aria-modal="true" aria-labelledby="suppress-modal-title" aria-hidden="true">
-  <div class="lt-modal">
-    <div class="lt-modal-header">
-      <h3 class="lt-modal-title" id="suppress-modal-title">Suppress Alert</h3>
-      <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
-    </div>
-    <form id="suppress-form">
-      <div class="lt-modal-body">
-        <div class="lt-form-group" style="margin-bottom:12px">
-          <label class="lt-label" for="sup-type">Target Type</label>
-          <select class="lt-select" id="sup-type" name="target_type">
-            <option value="host">Host (all interfaces)</option>
-            <option value="interface">Specific Interface</option>
-            <option value="unifi_device">UniFi Device</option>
-            <option value="all">Global Maintenance</option>
-          </select>
-        </div>
-        <div class="lt-form-group" id="sup-name-group" style="margin-bottom:12px">
-          <label class="lt-label" for="sup-name">Target Name</label>
-          <input type="text" class="lt-input" id="sup-name" name="target_name" placeholder="e.g. large1">
-        </div>
-        <div class="lt-form-group" id="sup-detail-group" style="margin-bottom:12px;display:none">
-          <label class="lt-label" for="sup-detail">Interface <span class="lt-field-hint">(interface type only)</span></label>
-          <input type="text" class="lt-input" id="sup-detail" name="target_detail" placeholder="e.g. enp35s0">
-        </div>
-        <div class="lt-form-group" style="margin-bottom:12px">
-          <label class="lt-label" for="sup-reason">Reason <span class="required">*</span></label>
-          <input type="text" class="lt-input" id="sup-reason" name="reason"
-                 placeholder="e.g. Planned switch reboot" required>
-        </div>
-        <div class="lt-form-group" style="margin-bottom:0">
-          <label class="lt-label">Duration</label>
-          <div class="duration-pills">
-            <button type="button" class="pill" data-duration="30">30 min</button>
-            <button type="button" class="pill" data-duration="60">1 hr</button>
-            <button type="button" class="pill" data-duration="240">4 hr</button>
-            <button type="button" class="pill" data-duration="480">8 hr</button>
-            <button type="button" class="pill pill-manual active" data-duration="">Manual ∞</button>
-          </div>
-          <input type="hidden" id="sup-expires" name="expires_minutes" value="">
-          <div class="lt-field-hint" id="duration-hint">Persists until manually removed.</div>
-        </div>
-      </div>
-      <div class="lt-modal-footer">
-        <button type="button" class="lt-btn lt-btn-secondary" data-modal-close>Cancel</button>
-        <button type="submit" class="lt-btn lt-btn-primary">Apply</button>
-      </div>
-    </form>
-  </div>
-</div>
-
 {% endblock %}

 {% block scripts %}
@@ -473,8 +473,28 @@
    if (s.refreshInterval > 0) lt.autoRefresh.start(refreshAll, s.refreshInterval * 1000);
  };

-  document.getElementById('suppress-form')?.addEventListener('submit', submitSuppress);
-  document.getElementById('sup-type')?.addEventListener('change', updateSuppressForm);
+  // ── Topology collapse toggle ───────────────────────────────────
+  (function() {
+    var LS_KEY = 'gandalf_topo_collapsed';
+    var btn    = document.getElementById('topo-toggle-btn');
+    var wrap   = document.getElementById('topo-collapsible-wrap');
+    if (!btn || !wrap) return;
+
+    function setCollapsed(v) {
+      wrap.classList.toggle('is-collapsed', v);
+      btn.setAttribute('aria-expanded', v ? 'false' : 'true');
+      btn.textContent = v ? '▾ Expand' : '▴ Collapse';
+      try { localStorage.setItem(LS_KEY, v ? '1' : '0'); } catch(_) {}
+    }
+
+    var 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 => {
@@ -529,5 +549,28 @@
  // Re-apply filter after dynamic table updates
  new MutationObserver(applyEventsFilter)
    .observe(document.getElementById('events-table-wrap'), { childList: true, subtree: true });
+
+  // Host grid search filter
+  document.getElementById('host-search')?.addEventListener('input', function() {
+    const q = this.value.trim().toLowerCase();
+    document.querySelectorAll('#host-grid .host-card').forEach(card => {
+      const name = (card.dataset.host || '').toLowerCase();
+      card.style.display = (!q || name.includes(q)) ? '' : 'none';
+    });
+  });
+
+  // Stat card clicks — filter events table by severity
+  document.querySelectorAll('.lt-stat-card[data-stat-filter]').forEach(card => {
+    card.addEventListener('click', () => {
+      const sev = card.dataset.statFilter;
+      document.querySelectorAll('.sev-pills .pill').forEach(p => p.classList.remove('active'));
+      const matchPill = document.querySelector(`.sev-pills .pill[data-sev="${sev}"]`);
+      if (matchPill) matchPill.classList.add('active');
+      _filterSev = sev;
+      applyEventsFilter();
+      document.getElementById('events-table-wrap')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+    card.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); card.click(); } });
+  });
 </script>
 {% endblock %}
@@ -3,12 +3,14 @@

 {% block content %}

-<div class="g-page-header">
-  <h1 class="g-page-title">Network Inspector</h1>
-  <p class="g-page-sub">
-    Visual switch chassis diagrams. Click a port to see detailed stats and LLDP path debug.
-    <span id="inspector-updated" style="margin-left:10px; color:var(--text-muted); font-size:.85em;"></span>
-  </p>
+<div class="lt-page-header">
+  <div>
+    <h1 class="lt-page-title">Network Inspector</h1>
+    <p class="g-page-sub">
+      Visual switch chassis diagrams. Click a port to see detailed stats and LLDP path debug.
+      <span id="inspector-updated" style="margin-left:8px"></span>
+    </p>
+  </div>
 </div>

 <div class="inspector-layout">
@@ -425,9 +427,10 @@ function renderInspector(data) {
  const main = document.getElementById('inspector-main');
  const switches = data.unifi_switches || {};

-  const upd = data.updated ? `Updated: ${data.updated}` : '';
  const updEl = document.getElementById('inspector-updated');
-  if (updEl) updEl.textContent = upd;
+  if (updEl && data.updated) {
+    updEl.textContent = 'Updated: ' + new Date(data.updated + (data.updated.includes('Z') ? '' : 'Z')).toLocaleTimeString();
+  }

  if (!Object.keys(switches).length) {
    main.innerHTML = '<p class="empty-state">No switch data available. Monitor may still be initialising.</p>';
@@ -463,7 +466,13 @@ async function loadInspector() {
 }

 loadInspector();
-lt.autoRefresh.start(loadInspector, 60000);
+var _inspInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 60;
+if (_inspInterval > 0) lt.autoRefresh.start(loadInspector, Math.max(_inspInterval, 15) * 1000);
+
+window.onGandalfSettingsChanged = function(s) {
+  lt.autoRefresh.stop();
+  if (s.refreshInterval > 0) lt.autoRefresh.start(loadInspector, Math.max(s.refreshInterval, 15) * 1000);
+};
 lt.keys.on('Escape', () => {
  if (document.getElementById('inspector-panel').classList.contains('open')) closePanel();
 });
@@ -3,13 +3,27 @@

 {% block content %}

-<div class="g-page-header">
-  <h1 class="g-page-title">Link Debug</h1>
-  <p class="g-page-sub">
-    Per-interface stats: speed, duplex, SFP optical levels, TX/RX rates, errors, and carrier changes.
-    Data collected via Prometheus node_exporter + SSH ethtool (servers) and UniFi API (switches) every poll cycle.
-    <span id="links-updated" style="margin-left:10px; color:var(--text-muted); font-size:.85em;"></span>
-  </p>
+<div class="lt-page-header">
+  <div>
+    <h1 class="lt-page-title">Link Debug</h1>
+    <p class="g-page-sub">
+      Per-interface stats: speed, duplex, SFP optical levels, TX/RX rates, errors, and carrier changes.
+      <span id="links-updated" style="margin-left:8px"></span>
+    </p>
+  </div>
+</div>
+
+<div class="lt-toolbar" id="links-toolbar" style="display:none">
+  <div class="lt-toolbar-left">
+    <div class="lt-search">
+      <input type="search" class="lt-input lt-search-input" id="links-search"
+             placeholder="Filter by host or switch name…" autocomplete="off">
+    </div>
+  </div>
+  <div class="lt-toolbar-right">
+    <button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="collapse-all">Collapse All</button>
+    <button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="expand-all">Expand All</button>
+  </div>
 </div>

 <div id="links-container">
@@ -344,7 +358,7 @@ function renderUnifiSwitches(unifiSwitches, dataUpdated) {
      </div>`;
  }).join('');

-  return `<div class="unifi-section-header">UNIFI SWITCH PORTS</div>${html}`;
+  return `<div class="lt-divider" style="margin:20px 0 12px"><span class="lt-divider-label" style="color:var(--cyan);letter-spacing:.1em">UNIFI SWITCH PORTS</span></div>${html}`;
 }

 // ── Panel collapse / expand ───────────────────────────────────────
@@ -383,33 +397,51 @@ function buildLinkSummary(hosts, unifiSwitches) {
      if ((d.tx_errs_rate || 0) > 0 || (d.rx_errs_rate || 0) > 0) errIfaces++;
    }
  }
+  let swTotal = 0, swDown = 0;
  for (const sw of Object.values(unifiSwitches || {})) {
    for (const p of Object.values(sw.ports || {})) {
      totalPoe += p.poe_power || 0;
+      swTotal++;
+      if (!p.up) swDown++;
    }
  }
-  const hasAlerts = downIfaces > 0 || errIfaces > 0;
-  return `
-    <div class="link-summary-panel ${hasAlerts ? 'link-summary-has-alerts' : ''}">
-      <div class="link-summary-grid">
-        <div class="link-summary-stat">
-          <span class="lss-label">Total Interfaces</span>
-          <span class="lss-value">${totalIfaces}</span>
-        </div>
-        <div class="link-summary-stat ${downIfaces ? 'lss-alert' : ''}">
-          <span class="lss-label">Interfaces Down</span>
-          <span class="lss-value ${downIfaces ? 'val-crit' : 'val-good'}">${downIfaces}</span>
-        </div>
-        <div class="link-summary-stat ${errIfaces ? 'lss-alert' : ''}">
-          <span class="lss-label">With Errors</span>
-          <span class="lss-value ${errIfaces ? 'val-warn' : 'val-good'}">${errIfaces}</span>
-        </div>
-        ${totalPoe > 0 ? `
-        <div class="link-summary-stat">
-          <span class="lss-label">PoE Load</span>
-          <span class="lss-value">${totalPoe.toFixed(1)} <span class="lss-sub">W</span></span>
-        </div>` : ''}
+  const allTotal = totalIfaces + swTotal;
+  const allDown  = downIfaces  + swDown;
+  const downColor = allDown  > 0 ? 'var(--red)'   : 'var(--green)';
+  const errColor  = errIfaces > 0 ? 'var(--amber)' : 'var(--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>
+      <div class="lt-stat-info">
+        <span class="lt-stat-value" style="color:var(--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-stat-card">
+        <span class="lt-stat-icon" aria-hidden="true" style="color:var(--cyan)">⬡</span>
+        <div class="lt-stat-info">
+          <span class="lt-stat-value" style="color:var(--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>
+        <div class="lt-stat-info">
+          <span class="lt-stat-value" style="color:${downColor}">${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>
+        <div class="lt-stat-info">
+          <span class="lt-stat-value" style="color:${errColor}">${errIfaces}</span>
+          <span class="lt-stat-label">With Errors</span>
+        </div>
+      </div>
+      ${poeCard}
    </div>`;
 }

@@ -420,10 +452,6 @@ function renderLinks(data) {
  const parts       = [];

  parts.push(buildLinkSummary(hosts, unifiSwitches));
-  parts.push(`<div class="link-collapse-bar">
-    <button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="collapse-all">Collapse All</button>
-    <button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="expand-all">Expand All</button>
-  </div>`);
  parts.push('<div class="link-host-list">');

  for (const [hostname, ifaces] of Object.entries(hosts)) {
@@ -452,6 +480,17 @@ function renderLinks(data) {
  parts.push('</div>');
  document.getElementById('links-container').innerHTML = parts.join('');
  restoreCollapseState();
+  document.getElementById('links-toolbar').style.display = '';
+  applyLinksSearch();
+}
+
+// ── Host/switch search filter ─────────────────────────────────────
+function applyLinksSearch() {
+  const q = (document.getElementById('links-search')?.value || '').trim().toLowerCase();
+  document.querySelectorAll('.link-host-panel').forEach(panel => {
+    const text = (panel.querySelector('.link-host-name')?.textContent || '').toLowerCase();
+    panel.style.display = (!q || text.includes(q)) ? '' : 'none';
+  });
 }

 function collapseAll() {
@@ -533,5 +572,7 @@ document.addEventListener('click', e => {
  if (e.target.closest('[data-action="collapse-all"]')) { collapseAll(); return; }
  if (e.target.closest('[data-action="expand-all"]'))   { expandAll();   return; }
 });
+
+document.getElementById('links-search')?.addEventListener('input', applyLinksSearch);
 </script>
 {% endblock %}
@@ -3,9 +3,11 @@

 {% block content %}

-<div class="g-page-header">
-  <h1 class="g-page-title">Alert Suppressions</h1>
-  <p class="g-page-sub">Manage maintenance windows and per-target alert suppression rules.</p>
+<div class="lt-page-header">
+  <div>
+    <h1 class="lt-page-title">Alert Suppressions</h1>
+    <p class="g-page-sub">Manage maintenance windows and per-target alert suppression rules.</p>
+  </div>
 </div>

 <!-- ── Create suppression ─────────────────────────────────────────── -->
@@ -83,33 +85,38 @@
  </div>
  <div id="active-sup-wrap">
  {% if active %}
-  <div class="lt-table-wrap">
-    <table class="lt-table" id="active-sup-table">
-      <caption class="lt-sr-only">Active suppression rules</caption>
-      <thead>
-        <tr>
-          <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
-          <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for s in active %}
-        <tr id="sup-row-{{ s.id }}">
-          {%- set _sup_badge = {'host':'badge-warning','interface':'badge-info','unifi_device':'badge-purple','all':'badge-critical'} -%}
-          <td><span class="lt-badge {{ _sup_badge.get(s.target_type, 'badge-neutral') }}">{{ s.target_type }}</span></td>
-          <td>{{ s.target_name or 'all' }}</td>
-          <td>{{ s.target_detail or '–' }}</td>
-          <td>{{ s.reason }}</td>
-          <td>{{ s.suppressed_by }}</td>
-          <td class="ts-cell">{{ s.created_at }}</td>
-          <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
-          <td>
-            <button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="{{ s.id }}">Remove</button>
-          </td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
+  <div class="lt-frame">
+    <span class="lt-frame-bl">&#x255A;</span>
+    <span class="lt-frame-br">&#x255D;</span>
+    <div class="lt-section-header">Active Rules</div>
+    <div class="lt-table-wrap">
+      <table class="lt-table" id="active-sup-table">
+        <caption class="lt-sr-only">Active suppression rules</caption>
+        <thead>
+          <tr>
+            <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
+            <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for s in active %}
+          <tr id="sup-row-{{ s.id }}">
+            {%- set _sup_badge = {'host':'badge-warning','interface':'badge-info','unifi_device':'badge-purple','all':'badge-critical'} -%}
+            <td><span class="lt-badge {{ _sup_badge.get(s.target_type, 'badge-neutral') }}">{{ s.target_type }}</span></td>
+            <td>{{ s.target_name or 'all' }}</td>
+            <td>{{ s.target_detail or '–' }}</td>
+            <td>{{ s.reason }}</td>
+            <td>{{ s.suppressed_by }}</td>
+            <td class="ts-cell">{{ s.created_at }}</td>
+            <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
+            <td>
+              <button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="{{ s.id }}">Remove</button>
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
  </div>
  {% else %}
  <div class="lt-empty-state lt-empty-state--sm" id="no-active-msg">
@@ -128,36 +135,41 @@
    <span class="g-section-badge">{{ history | length }}</span>
  </div>
  {% if history %}
-  <div class="lt-table-wrap">
-    <table class="lt-table lt-table-sm">
-      <caption class="lt-sr-only">Suppression history</caption>
-      <thead>
-        <tr>
-          <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
-          <th>By</th><th>Created</th><th>Expires</th><th>Active</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for s in history %}
-        <tr class="{% if not s.active %}row-resolved{% endif %}">
-          <td>{{ s.target_type }}</td>
-          <td>{{ s.target_name or 'all' }}</td>
-          <td>{{ s.target_detail or '–' }}</td>
-          <td>{{ s.reason }}</td>
-          <td>{{ s.suppressed_by }}</td>
-          <td class="ts-cell">{{ s.created_at }}</td>
-          <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
-          <td>
-            {% if s.active %}
-            <span class="lt-badge badge-ok">Yes</span>
-            {% else %}
-            <span class="lt-badge badge-neutral">No</span>
-            {% endif %}
-          </td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
+  <div class="lt-frame">
+    <span class="lt-frame-bl">&#x255A;</span>
+    <span class="lt-frame-br">&#x255D;</span>
+    <div class="lt-section-header">Suppression Log</div>
+    <div class="lt-table-wrap">
+      <table class="lt-table lt-table-sm">
+        <caption class="lt-sr-only">Suppression history</caption>
+        <thead>
+          <tr>
+            <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
+            <th>By</th><th>Created</th><th>Expires</th><th>Active</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for s in history %}
+          <tr class="{% if not s.active %}row-resolved{% endif %}">
+            <td>{{ s.target_type }}</td>
+            <td>{{ s.target_name or 'all' }}</td>
+            <td>{{ s.target_detail or '–' }}</td>
+            <td>{{ s.reason }}</td>
+            <td>{{ s.suppressed_by }}</td>
+            <td class="ts-cell">{{ s.created_at }}</td>
+            <td class="ts-cell">{% if s.expires_at %}{{ s.expires_at }}{% else %}<em>manual</em>{% endif %}</td>
+            <td>
+              {% if s.active %}
+              <span class="lt-badge badge-ok">Yes</span>
+              {% else %}
+              <span class="lt-badge badge-neutral">No</span>
+              {% endif %}
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
  </div>
  {% else %}
  <div class="lt-empty-state lt-empty-state--sm">
@@ -172,20 +184,27 @@
  <div class="g-section-header">
    <h2 class="g-section-title">Available Targets</h2>
  </div>
-  <div class="targets-grid">
-    {% for name, host in snapshot.hosts.items() %}
-    <div class="target-card">
-      <div class="target-name">{{ name }}</div>
-      <div class="target-type">{{ 'Proxmox Host (prometheus)' if host.source == 'prometheus' else 'Ping-only host' }}</div>
-      {% if host.interfaces %}
-      <div class="target-ifaces">
-        {% for iface in host.interfaces.keys() | sort %}
-        <code class="iface-chip">{{ iface }}</code>
+  <div class="lt-frame">
+    <span class="lt-frame-bl">&#x255A;</span>
+    <span class="lt-frame-br">&#x255D;</span>
+    <div class="lt-section-header">Host &amp; Interface Reference</div>
+    <div class="lt-section-body">
+      <div class="targets-grid">
+        {% for name, host in snapshot.hosts.items() %}
+        <div class="target-card">
+          <div class="target-name">{{ name }}</div>
+          <div class="target-type">{{ 'Proxmox Host (prometheus)' if host.source == 'prometheus' else 'Ping-only host' }}</div>
+          {% if host.interfaces %}
+          <div class="target-ifaces">
+            {% for iface in host.interfaces.keys() | sort %}
+            <code class="iface-chip">{{ iface }}</code>
+            {% endfor %}
+          </div>
+          {% endif %}
+        </div>
        {% endfor %}
      </div>
-      {% endif %}
    </div>
-    {% endfor %}
  </div>
 </section>

@@ -235,15 +254,20 @@
        <td><button class="lt-btn lt-btn-danger lt-btn-sm" data-action="remove-sup" data-sup-id="${s.id}">Remove</button></td>
      </tr>`).join('');
    wrap.innerHTML = `
-      <div class="lt-table-wrap">
-        <table class="lt-table" id="active-sup-table">
-          <caption class="lt-sr-only">Active suppression rules</caption>
-          <thead><tr>
-            <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
-            <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
-          </tr></thead>
-          <tbody>${tbody}</tbody>
-        </table>
+      <div class="lt-frame">
+        <span class="lt-frame-bl">&#x255A;</span>
+        <span class="lt-frame-br">&#x255D;</span>
+        <div class="lt-section-header">Active Rules</div>
+        <div class="lt-table-wrap">
+          <table class="lt-table" id="active-sup-table">
+            <caption class="lt-sr-only">Active suppression rules</caption>
+            <thead><tr>
+              <th>Type</th><th>Target</th><th>Detail</th><th>Reason</th>
+              <th>By</th><th>Created</th><th>Expires</th><th>Actions</th>
+            </tr></thead>
+            <tbody>${tbody}</tbody>
+          </table>
+        </div>
      </div>`;
  }
Author	SHA1	Message	Date
jared	ca4bcef26c	CSS: replace remaining inline color/size styles with TDS utilities Lint / Python (flake8) (push) Successful in 57s Details Lint / JS (eslint) (push) Successful in 7s Details Security / Python Security (bandit) (push) Successful in 53s Details Test / Python Tests (pytest) (push) Successful in 1m13s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 9s Details - Stat card icons and values: style="color:var(--red)" etc replaced with lt-text-red, lt-text-amber, lt-text-cyan, lt-text-green (defined in base.css with both color and glow-shadow) - Host search input: style="width:180px" extracted to .lt-search-input--sm - base.html: suppress modal form groups use lt-form-group--last for last item (already committed); lt-divider--compact applied to settings divider Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 23:17:22 -04:00
jared	15120a280f	CSS: remove remaining fixable inline styles across templates Lint / Python (flake8) (push) Successful in 48s Details Lint / JS (eslint) (push) Successful in 7s Details Security / Python Security (bandit) (push) Successful in 42s Details Test / Python Tests (pytest) (push) Successful in 54s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 3s Details - Suppress modal form groups: strip margin-bottom:12px (lt-form-group already has margin-bottom in TDS); use lt-form-group--last for the final group where zero margin is needed - Keyboard shortcuts table: remove width:100% (lt-table is already full- width in base.css) - Settings divider: replace style=margin override with .lt-divider--compact - Topology bus section: move max-width:860px into .topo-bus-section rule Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 23:15:15 -04:00
jared	906869f425	CSS: convert all topology inline styles to modifier classes Lint / Python (flake8) (push) Successful in 41s Details Lint / JS (eslint) (push) Successful in 9s Details Security / Python Security (bandit) (push) Successful in 1m0s Details Test / Python Tests (pytest) (push) Successful in 55s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 4s Details Replace style= attributes on topology wire/node elements with semantic modifier classes: - topo-vc-wire--wan, --10g, --mgmt (wire colour semantics in CSS) - topo-v2-host--bus (bus-section node size constraint) - topo-legend-item--offrack already done in prior commit Zero inline styles remain in the topology section. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 23:13:24 -04:00
jared	c027b5422a	Feature: show suppression status on active alert rows Lint / Python (flake8) (push) Successful in 45s Details Lint / JS (eslint) (push) Successful in 7s Details Security / Python Security (bandit) (push) Successful in 47s Details Test / Python Tests (pytest) (push) Successful in 1m11s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 3s Details Active events now carry an is_suppressed boolean (added in api_status() and the index() route via check_suppressed() against the pre-loaded suppression list). The events table renders a muted '🔕 sup' badge next to the severity and dims the entire row (.row-suppressed) so operators can immediately see which firing alerts are silenced. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 23:11:15 -04:00
jared	d3e8191f26	Cleanup: strip redundant inline styles, add CSS classes Lint / Python (flake8) (push) Successful in 41s Details Lint / JS (eslint) (push) Successful in 7s Details Security / Python Security (bandit) (push) Successful in 44s Details Test / Python Tests (pytest) (push) Successful in 52s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 3s Details - Remove style="margin-top:4px" from .g-page-sub in all three secondary pages (the value is already defined in .g-page-sub rule in style.css) - suppressions.html: replace inline style="padding:12px 14px" with TDS lt-section-body class - index.html topology legend: replace inline dashed-border style with .topo-legend-item--offrack modifier class in style.css Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 23:09:25 -04:00
jared	ed19838a4e	Redesign: alerts above fold, fix nav, globalise suppress modal Lint / Python (flake8) (push) Successful in 37s Details Lint / JS (eslint) (push) Successful in 7s Details Security / Python Security (bandit) (push) Successful in 40s Details Test / Python Tests (pytest) (push) Successful in 53s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 2s Details - Dashboard: reorder sections so Active Alerts appear immediately below stat cards rather than after 200+ lines of topology — primary content is now above the fold on all screen sizes - Network Hosts section gains a collapse toggle (persisted to localStorage) so the topology diagram can be hidden when not needed - Admin nav corrected: admin now gets a direct Suppressions link; non-admin no longer sees the page at all (it was always admin-only) - Suppress modal moved from index.html into base.html so [S] keyboard shortcut works on every page, not just the dashboard; form listeners wired in app.js accordingly - Settings modal KV grid: replaced lt-kv-row/lt-kv-label/lt-kv-value (light-mode only) with lt-kv-key/lt-kv-val (dark-mode defined) - style.css: add lt-btn-secondary dark-mode definition, lt-cmd-hint-btn class for ⌘K button, topology collapse styles; remove dead .g-page-header, .g-page-title, .empty-state classes; strip redundant inline styles Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 23:07:53 -04:00
jared	7b4c263a40	Cleanup: fix eslint warnings, button loading state, inspector footer hint Lint / Python (flake8) (push) Successful in 45s Details Lint / JS (eslint) (push) Successful in 7s Details Security / Python Security (bandit) (push) Successful in 42s Details Test / Python Tests (pytest) (push) Successful in 51s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 3s Details - app.js: replace != with !== (eqeqeq rule) on resolved_24h null check and totalActive pagination check - style.css: extend loading state to all .lt-btn.is-loading (not just refresh button), so suppressions form submit shows disabled feedback; remove dead .link-collapse-bar rule - base.html: add inspector page to footer R=REFRESH hint; update keyboard shortcut table to include Inspector in refresh shortcut doc Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-10 22:42:40 -04:00
jared	40a0c2af78	Dynamic resolved count, host search filter, lt-divider for UniFi section Lint / Python (flake8) (push) Successful in 38s Details Lint / JS (eslint) (push) Successful in 8s Details Security / Python Security (bandit) (push) Successful in 38s Details Test / Python Tests (pytest) (push) Successful in 50s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 3s Details - db.py: add resolved_24h to get_status_summary() so each /api/status poll carries the fresh 24h resolved count - app.js: wire stat-resolved-val to update from summary.resolved_24h so the Resolved 24h card stays accurate after auto-refresh - index.html: add lt-toolbar/lt-search above host grid for quick client-side host filtering by name - links.html: replace custom unifi-section-header div with lt-divider - style.css: remove unused .unifi-section-header rules Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 18:36:57 -04:00
jared	08543ac25a	Fix B108: replace hardcoded /tmp with tempfile.gettempdir() Lint / Python (flake8) (push) Successful in 40s Details Lint / JS (eslint) (push) Successful in 8s Details Security / Python Security (bandit) (push) Successful in 42s Details Test / Python Tests (pytest) (push) Successful in 1m18s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 8s Details Bandit flags hardcoded /tmp strings as CWE-377 (insecure temp file). Use tempfile.gettempdir() for the avatar cache dir default so the path resolves correctly on all platforms and passes the security scan. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-07 13:34:37 -04:00
jared	760e45bb68	TDS polish: lt-frame tables, links search toolbar, dead CSS cleanup Lint / Python (flake8) (push) Successful in 56s Details Lint / JS (eslint) (push) Successful in 8s Details Security / Python Security (bandit) (push) Failing after 40s Details Test / Python Tests (pytest) (push) Successful in 50s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 3s Details - index.html: wrap UniFi devices table in lt-frame with section header - links.html: add static lt-toolbar with lt-search filter and collapse controls above the dynamic container; remove collapse bar from renderLinks() since it's now static; add applyLinksSearch() to filter host/switch panels by name as user types - suppressions.html: wrap Available Targets section in lt-frame - style.css: remove unused .link-summary-panel and related rules (replaced by lt-stats-grid in previous commit) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-01 17:39:11 -04:00
jared	c3aa3bea6f	TDS polish: lt-frame tables, lt-stats-grid link summary, settings-aware refresh Lint / Python (flake8) (push) Successful in 40s Details Lint / JS (eslint) (push) Successful in 8s Details Security / Python Security (bandit) (push) Failing after 42s Details Test / Python Tests (pytest) (push) Successful in 50s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 3s Details - links.html: replace custom link-summary-panel with lt-stats-grid/lt-stat-card showing total interfaces, ports down, errors, and PoE load - suppressions.html: wrap active suppressions and history tables in lt-frame with lt-section-header labels - inspector.html: wire auto-refresh to gandalfSettings (respects interval pill), fix updated timestamp to use locale time Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-01 17:15:48 -04:00
jared	b393d94e81	Upgrade page headers to lt-page-header/lt-page-title across all pages Lint / Python (flake8) (push) Successful in 1m7s Details Lint / JS (eslint) (push) Successful in 10s Details Security / Python Security (bandit) (push) Failing after 1m17s Details Test / Python Tests (pytest) (push) Successful in 1m23s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 4s Details Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-01 01:09:30 -04:00
jared	4cb36a47a9	Add stat cards, lt-frame alert queue, and timeline for resolved alerts Lint / Python (flake8) (push) Successful in 54s Details Lint / JS (eslint) (push) Successful in 7s Details Security / Python Security (bandit) (push) Failing after 40s Details Test / Python Tests (pytest) (push) Successful in 50s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 3s Details - Four lt-stat-card widgets (Critical, Warning, Hosts, Resolved 24h) below the status bar; Critical card pulses red when count > 0 - Clicking Critical or Warning card filters the events table by severity - Events table wrapped in lt-frame with ASCII corner ornaments and lt-section-header; filter bar moved to lt-toolbar with lt-search icon - Recently Resolved table replaced with lt-timeline component - updateStatusBar() and updateHostGrid() keep stat card values live Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-30 22:19:50 -04:00