TDS polish: lt-frame tables, links search toolbar, dead CSS cleanup

- 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>
TDS polish: lt-frame tables, lt-stats-grid link summary, settings-aware refresh
2026-05-01 17:39:11 -04:00 · 2026-05-01 17:15:48 -04:00 · 2026-05-01 01:09:30 -04:00 · 2026-04-30 22:19:50 -04:00 · 2026-04-30 21:33:02 -04:00
7 changed files with 617 additions and 233 deletions
@@ -53,6 +53,7 @@ async function refreshAll() {
      const status = statusResult.value;
      updateEventsTable(status.events || [], status.total_active);
      updateStatusBar(status.summary || {}, status.last_check || '', status.daemon_ok);
+      if (typeof window.gandalfNotifUpdate === 'function') window.gandalfNotifUpdate(status.events || []);
    } else {
      showToast('Status data unavailable', 'warning');
    }
@@ -88,6 +89,14 @@ 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');
+  if (scCrit) scCrit.textContent = critCount;
+  if (scWarn) scWarn.textContent = warnCount;
+  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) {
@@ -111,6 +120,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;
@@ -724,20 +724,6 @@
  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 +981,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; }
@@ -140,6 +140,38 @@
      {% if user.groups and 'admin' in user.groups %}
      <span class="lt-badge lt-badge-admin" aria-label="Administrator">ADMIN</span>
      {% endif %}
+
+      <!-- Notification bell — shows active monitoring alerts -->
+      <div class="lt-notif-dropdown-wrap" id="lt-notif-wrap">
+        <button type="button"
+                class="lt-btn lt-btn-ghost lt-btn-sm lt-notif-bell-btn"
+                id="lt-notif-bell"
+                aria-label="Active alerts"
+                aria-expanded="false"
+                aria-controls="lt-notif-panel"
+                title="Active alerts">&#x1F514;</button>
+        <div class="lt-notif-panel" id="lt-notif-panel" aria-hidden="true" role="dialog" aria-label="Active alerts">
+          <div class="lt-notif-panel-header">
+            <span>Active Alerts</span>
+            <button type="button" class="lt-notif-panel-clear" id="lt-notif-clear-btn">Mark all read</button>
+          </div>
+          <div class="lt-notif-panel-list" id="lt-notif-list">
+            <div style="padding:0.75rem;font-size:0.75rem;color:var(--text-muted);text-align:center">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>
+          </div>
+        </div>
+      </div>
+
+      <!-- ⌘K affordance -->
+      <button type="button"
+              class="lt-btn lt-btn-ghost lt-btn-sm"
+              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>
+
      <button type="button" class="lt-theme-btn" id="lt-theme-btn"
              aria-label="Toggle theme" title="Toggle light/dark mode">&#x2600;</button>
    </div>
@@ -170,13 +202,20 @@
    {% block content %}{% endblock %}
  </main>

-  <!-- FOOTER -->
+  <!-- FOOTER — context-sensitive per page -->
  <footer class="lt-footer" role="contentinfo">
    <nav class="lt-footer-hints" aria-label="Keyboard shortcuts">
-      <span class="lt-footer-hint"><span class="lt-footer-key">[ Ctrl+K ]</span> SEARCH</span>
-      <span class="lt-footer-sep">|</span>
+      {% if request.endpoint == 'index' %}
        <span class="lt-footer-hint"><span class="lt-footer-key">[ R ]</span> REFRESH</span>
        <span class="lt-footer-sep">|</span>
+        <span class="lt-footer-hint"><span class="lt-footer-key">[ S ]</span> SUPPRESS</span>
+        <span class="lt-footer-sep">|</span>
+      {% elif request.endpoint == 'links_page' %}
+        <span class="lt-footer-hint"><span class="lt-footer-key">[ R ]</span> REFRESH</span>
+        <span class="lt-footer-sep">|</span>
+      {% endif %}
+      <button type="button" class="lt-footer-hint" data-action="open-settings"><span class="lt-footer-key">[ * ]</span> CFG</button>
+      <span class="lt-footer-sep">|</span>
      <button type="button" class="lt-footer-hint" data-action="show-keyboard-help"><span class="lt-footer-key">[ ? ]</span> HELP</button>
    </nav>
    <span>GANDALF &mdash; TDS v1.2</span>
@@ -194,9 +233,11 @@
          <thead><tr><th>Shortcut</th><th>Action</th></tr></thead>
          <tbody>
            <tr><td>Ctrl / &#x2318; + K</td><td>Command palette</td></tr>
-            <tr><td>R</td><td>Refresh dashboard data</td></tr>
+            <tr><td>R</td><td>Refresh data (Dashboard / Link Debug)</td></tr>
+            <tr><td>S</td><td>Quick-suppress alert (Dashboard)</td></tr>
+            <tr><td>*</td><td>Open settings</td></tr>
            <tr><td>?</td><td>Show this help</td></tr>
-            <tr><td>ESC</td><td>Close modal</td></tr>
+            <tr><td>ESC</td><td>Close modal / panel</td></tr>
          </tbody>
        </table>
      </div>
@@ -206,6 +247,45 @@
    </div>
  </div>

+  <!-- SETTINGS MODAL -->
+  <div id="lt-settings-modal" class="lt-modal-overlay" aria-hidden="true">
+    <div class="lt-modal" role="dialog" aria-modal="true" aria-labelledby="settings-modal-title">
+      <div class="lt-modal-header">
+        <span class="lt-modal-title" id="settings-modal-title">Settings</span>
+        <button type="button" class="lt-modal-close" data-modal-close aria-label="Close">&#x2715;</button>
+      </div>
+      <div class="lt-modal-body">
+        <div class="lt-form-group">
+          <label class="lt-label">Auto-refresh interval</label>
+          <div class="duration-pills" id="settings-refresh-pills">
+            <button type="button" class="pill" data-refresh-interval="15">15 s</button>
+            <button type="button" class="pill" data-refresh-interval="30">30 s</button>
+            <button type="button" class="pill" data-refresh-interval="60">1 min</button>
+            <button type="button" class="pill" data-refresh-interval="300">5 min</button>
+            <button type="button" class="pill" data-refresh-interval="0">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-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>
+          {% 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>
+          {% endif %}
+        </div>
+      </div>
+      <div class="lt-modal-footer">
+        <button type="button" class="lt-btn" data-modal-close>Close</button>
+      </div>
+    </div>
+  </div>
+
  <script>
    const GANDALF_CONFIG = {
      ticket_web_url: "{{ config.get('ticket_api', {}).get('web_url', 'http://t.lotusguild.org/ticket/') }}"
@@ -228,31 +308,185 @@
        { id: 'nav-links',        group: 'Navigate', icon: '↗',  label: 'Link Debug',          action: function() { window.location.href = '/links'; } },
        { id: 'nav-inspector',    group: 'Navigate', icon: '⬡',  label: 'Inspector',           action: function() { window.location.href = '/inspector'; } },
        { id: 'nav-suppressions', group: 'Navigate', icon: '🔕', label: 'Suppressions',        action: function() { window.location.href = '/suppressions'; } },
-        { id: 'help-shortcuts',   group: 'Help',     icon: '?', label: 'Keyboard Shortcuts', action: function() { lt.modal.open('lt-keys-help'); } },
-        { id: 'help-theme',       group: 'Help',     icon: '*', label: 'Toggle Theme',  action: function() { lt.theme.toggle(); } },
-        { id: 'action-refresh',   group: 'Actions',  icon: '↻', label: 'Refresh Data', kbd: 'R', action: function() { if (typeof refreshAll === 'function') refreshAll(); } },
+        { id: 'action-refresh',   group: 'Actions',  icon: '↻',  label: 'Refresh Data',  kbd: 'R', action: function() { lt.autoRefresh.now(); } },
+        { id: 'action-suppress',  group: 'Actions',  icon: '🔕', label: 'New Suppression', kbd: 'S', action: function() { if (typeof openSuppressModal === 'function') openSuppressModal('host','',''); else window.location.href='/suppressions'; } },
+        { id: 'help-shortcuts',   group: 'Help',     icon: '?',  label: 'Keyboard Shortcuts',  kbd: '?', action: function() { lt.modal.open('lt-keys-help'); } },
+        { id: 'help-settings',    group: 'Help',     icon: '*',  label: 'Settings',             kbd: '*', action: function() { lt.modal.open('lt-settings-modal'); } },
+        { id: 'help-theme',       group: 'Help',     icon: '☀',  label: 'Toggle Theme',         action: function() { lt.theme.toggle(); } },
      ]);
    }

-    // Footer hint actions
+    // ── Global footer + key actions ───────────────────────────────────────
    document.addEventListener('click', function(e) {
      var btn = e.target.closest('[data-action]');
      if (!btn) return;
-      if (btn.getAttribute('data-action') === 'show-keyboard-help' && window.lt) {
-        lt.modal.open('lt-keys-help');
-      }
+      var action = btn.getAttribute('data-action');
+      if (action === 'show-keyboard-help' && window.lt)  lt.modal.open('lt-keys-help');
+      if (action === 'open-settings' && window.lt)       lt.modal.open('lt-settings-modal');
    });

-    lt.keys.on('r', function() {
-      if (typeof refreshAll === 'function') refreshAll();
+    lt.keys.on('r', function() { lt.autoRefresh.now(); });
+    lt.keys.on('?', function() { if (window.lt) lt.modal.open('lt-keys-help'); });
+    lt.keys.on('*', function() { if (window.lt) lt.modal.open('lt-settings-modal'); });
+    lt.keys.on('s', function() {
+      if (typeof openSuppressModal === 'function') openSuppressModal('host', '', '');
    });

-    // Avatar image error fallback — hide broken img, reveal initials beneath
+    // ── Avatar image error fallback ───────────────────────────────────────
    document.addEventListener('error', function(e) {
      if (e.target.tagName === 'IMG' && e.target.closest('.lt-avatar')) {
        e.target.classList.add('lt-avatar-img-err');
      }
    }, true);
+
+    // ── Settings modal ────────────────────────────────────────────────────
+    (function() {
+      var LS_KEY = 'gandalf_settings';
+      var DEFAULT = { refreshInterval: 30 };
+
+      function loadSettings() {
+        try { return Object.assign({}, DEFAULT, JSON.parse(localStorage.getItem(LS_KEY) || '{}')); }
+        catch(_) { return Object.assign({}, DEFAULT); }
+      }
+
+      function saveSettings(s) {
+        try { localStorage.setItem(LS_KEY, JSON.stringify(s)); } catch(_) {}
+        if (typeof window.onGandalfSettingsChanged === 'function') window.onGandalfSettingsChanged(s);
+      }
+
+      function applyRefreshPillUI(interval) {
+        document.querySelectorAll('#settings-refresh-pills .pill').forEach(function(p) {
+          p.classList.toggle('active', parseInt(p.dataset.refreshInterval) === interval);
+        });
+        var hint = document.getElementById('settings-refresh-hint');
+        if (hint) {
+          if (interval === 0)        hint.textContent = 'Auto-refresh disabled.';
+          else if (interval < 60)    hint.textContent = 'Refreshes every ' + interval + ' seconds.';
+          else                       hint.textContent = 'Refreshes every ' + Math.floor(interval/60) + ' minute' + (interval > 60 ? 's' : '') + '.';
+        }
+      }
+
+      // Init pill UI from saved settings
+      var _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]');
+        if (!pill) return;
+        var interval = parseInt(pill.dataset.refreshInterval);
+        _settings.refreshInterval = interval;
+        saveSettings(_settings);
+        applyRefreshPillUI(interval);
+      });
+    })();
+
+    // ── Notification Bell — shows active monitoring alerts ────────────────
+    (function() {
+      var bell     = document.getElementById('lt-notif-bell');
+      var panel    = document.getElementById('lt-notif-panel');
+      var list     = document.getElementById('lt-notif-list');
+      var clearBtn = document.getElementById('lt-notif-clear-btn');
+      var wrapEl   = document.getElementById('lt-notif-wrap');
+      if (!bell || !panel) return;
+
+      var _open      = false;
+      var _lastEvents = [];
+      var LS_READ_KEY = 'gandalf_notif_read_before';
+
+      function getReadBefore() {
+        try { return parseInt(localStorage.getItem(LS_READ_KEY) || '0'); } catch(_) { return 0; }
+      }
+      function setReadBefore(ts) {
+        try { localStorage.setItem(LS_READ_KEY, String(ts)); } catch(_) {}
+      }
+
+      function esc(s) {
+        return (window.lt && lt.escHtml) ? lt.escHtml(String(s)) : String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+      }
+
+      function toMs(dateStr) {
+        if (!dateStr) return 0;
+        return new Date(dateStr.replace(' UTC','Z').replace(' ','T')).getTime();
+      }
+
+      function fmtAgo(dateStr) {
+        var 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)' };
+
+      function renderAlerts(events) {
+        _lastEvents = events || [];
+        var readBefore = getReadBefore();
+        var active = _lastEvents.filter(function(e) { return e.severity !== 'info'; });
+        var 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>';
+          return;
+        }
+        list.innerHTML = active.slice(0, 25).map(function(e) {
+          var isUnread = toMs(e.last_seen) > readBefore;
+          var 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-item-body">' +
+              '<div class="lt-notif-item-title">' + esc(e.target_name) + (e.target_detail ? ' &middot; ' + esc(e.target_detail) : '') + '</div>' +
+              '<div class="lt-notif-item-time">' + esc(e.event_type.replace(/_/g,' ')) + ' &middot; ' + fmtAgo(e.last_seen) + '</div>' +
+            '</div></div>';
+        }).join('');
+      }
+
+      function fetchAlerts(andRender) {
+        fetch('/api/status', { credentials: 'same-origin' })
+          .then(function(r) { return r.json(); })
+          .then(function(data) {
+            var events = data.events || [];
+            if (andRender) {
+              renderAlerts(events);
+            } else {
+              _lastEvents = events;
+              var readBefore = getReadBefore();
+              var active = events.filter(function(e) { return e.severity !== 'info'; });
+              var 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>';
+          });
+      }
+
+      function openPanel()  { _open = true;  panel.removeAttribute('aria-hidden'); bell.setAttribute('aria-expanded','true');  fetchAlerts(true); }
+      function closePanel() { _open = false; panel.setAttribute('aria-hidden','true'); bell.setAttribute('aria-expanded','false'); }
+
+      bell.addEventListener('click', function(e) { e.stopPropagation(); _open ? closePanel() : openPanel(); });
+
+      if (clearBtn) {
+        clearBtn.addEventListener('click', function() {
+          setReadBefore(Date.now());
+          renderAlerts(_lastEvents);
+        });
+      }
+
+      document.addEventListener('click', function(e) { if (_open && wrapEl && !wrapEl.contains(e.target)) closePanel(); });
+      document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && _open) closePanel(); });
+
+      // Initial badge load + poll every 60 s
+      fetchAlerts(false);
+      setInterval(function() { fetchAlerts(_open); }, 60000);
+
+      // Allow refreshAll() to also push fresh events to the bell
+      window.gandalfNotifUpdate = function(events) { renderAlerts(events); };
+    })();
  </script>

 </body>
@@ -26,6 +26,42 @@
  </div>
 </div>

+<!-- ── Stats summary cards ──────────────────────────────────────────── -->
+<div class="lt-stats-grid">
+  <div class="lt-stat-card{% if summary.critical %} lt-stat-card--alert{% endif %}"
+       id="stat-critical" role="button" tabindex="0"
+       data-stat-filter="critical" aria-label="{{ summary.critical or 0 }} critical alerts">
+    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--red);text-shadow:var(--glow-red)">●</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-label">Critical</span>
+    </div>
+  </div>
+  <div class="lt-stat-card"
+       id="stat-warning" role="button" tabindex="0"
+       data-stat-filter="warning" aria-label="{{ summary.warning or 0 }} warning alerts">
+    <span class="lt-stat-icon" aria-hidden="true" style="color:var(--amber)">●</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-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>
+    <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-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>
+    <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-label">Resolved 24h</span>
+    </div>
+  </div>
+</div>
+
 <!-- ── Network topology + host grid ───────────────────────────────── -->
 <section class="g-section">
  <div class="g-section-header">
@@ -234,6 +270,10 @@
  <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>
@@ -273,6 +313,7 @@
        </tbody>
      </table>
    </div>
+  </div>
 </section>
 {% endif %}

@@ -282,10 +323,13 @@
    <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>
      <div class="sev-pills">
        <button type="button" class="pill active" data-sev="">All</button>
        <button type="button" class="pill" data-sev="critical">Critical</button>
@@ -293,7 +337,10 @@
      </div>
    </div>
  </div>
-  </div>
+  <div class="lt-frame">
+    <span class="lt-frame-bl">&#x255A;</span>
+    <span class="lt-frame-br">&#x255D;</span>
+    <div class="lt-section-header">Alert Queue</div>
    <div id="events-table-wrap">
    {% if events %}
    {% if total_active is defined and total_active > events|length %}
@@ -364,7 +411,8 @@
      <div class="lt-empty-state-title">No active alerts</div>
    </div>
    {% endif %}
-  </div>
+    </div><!-- /#events-table-wrap -->
+  </div><!-- /.lt-frame -->
 </section>

 <!-- ── Recently Resolved (last 24h) ───────────────────────────────── -->
@@ -374,34 +422,24 @@
    <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>
+  <div class="lt-timeline">
    {% 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>
+    {%- 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 %}
-      </tbody>
-    </table>
  </div>
 </section>
 {% endif %}
@@ -463,7 +501,16 @@

 {% block scripts %}
 <script>
-  lt.autoRefresh.start(refreshAll, 30000);
+  // Start auto-refresh using saved settings interval (default 30 s)
+  var _savedInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 30;
+  if (_savedInterval > 0) lt.autoRefresh.start(refreshAll, _savedInterval * 1000);
+
+  // When settings change, restart auto-refresh with new interval
+  window.onGandalfSettingsChanged = function(s) {
+    lt.autoRefresh.stop();
+    if (s.refreshInterval > 0) lt.autoRefresh.start(refreshAll, s.refreshInterval * 1000);
+  };
+
  document.getElementById('suppress-form')?.addEventListener('submit', submitSuppress);
  document.getElementById('sup-type')?.addEventListener('change', updateSuppressForm);

@@ -520,5 +567,19 @@
  // Re-apply filter after dynamic table updates
  new MutationObserver(applyEventsFilter)
    .observe(document.getElementById('events-table-wrap'), { childList: true, subtree: true });
+
+  // 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,13 +3,15 @@

 {% block content %}

-<div class="g-page-header">
-  <h1 class="g-page-title">Network Inspector</h1>
-  <p class="g-page-sub">
+<div class="lt-page-header">
+  <div>
+    <h1 class="lt-page-title">Network Inspector</h1>
+    <p class="g-page-sub" style="margin-top:4px">
      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>
+      <span id="inspector-updated" style="margin-left:8px"></span>
    </p>
  </div>
+</div>

 <div class="inspector-layout">
  <div class="inspector-main" id="inspector-main">
@@ -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,14 +3,28 @@

 {% block content %}

-<div class="g-page-header">
-  <h1 class="g-page-title">Link Debug</h1>
-  <p class="g-page-sub">
+<div class="lt-page-header">
+  <div>
+    <h1 class="lt-page-title">Link Debug</h1>
+    <p class="g-page-sub" style="margin-top:4px">
      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>
+      <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">
  <div class="link-loading">Loading link statistics</div>
@@ -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;
+  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="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 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 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 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>
-        ${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>` : ''}
      </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() {
@@ -518,7 +557,13 @@ async function loadLinks() {
 }

 loadLinks();
-lt.autoRefresh.start(loadLinks, 60000);
+var _linksInterval = (window.gandalfSettings && window.gandalfSettings.refreshInterval) || 60;
+if (_linksInterval > 0) lt.autoRefresh.start(loadLinks, Math.max(_linksInterval, 15) * 1000);
+
+window.onGandalfSettingsChanged = function(s) {
+  lt.autoRefresh.stop();
+  if (s.refreshInterval > 0) lt.autoRefresh.start(loadLinks, Math.max(s.refreshInterval, 15) * 1000);
+};

 document.addEventListener('click', e => {
  const toggleTitle = e.target.closest('[data-action="toggle-panel"]');
@@ -527,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" style="margin-top:4px">Manage maintenance windows and per-target alert suppression rules.</p>
+  </div>
 </div>

 <!-- ── Create suppression ─────────────────────────────────────────── -->
@@ -83,6 +85,10 @@
  </div>
  <div id="active-sup-wrap">
  {% if active %}
+  <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>
@@ -111,6 +117,7 @@
        </tbody>
      </table>
    </div>
+  </div>
  {% else %}
  <div class="lt-empty-state lt-empty-state--sm" id="no-active-msg">
    <div class="lt-empty-state-icon">🔕</div>
@@ -128,6 +135,10 @@
    <span class="g-section-badge">{{ history | length }}</span>
  </div>
  {% if history %}
+  <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>
@@ -159,6 +170,7 @@
        </tbody>
      </table>
    </div>
+  </div>
  {% else %}
  <div class="lt-empty-state lt-empty-state--sm">
    <div class="lt-empty-state-icon">📋</div>
@@ -172,6 +184,11 @@
  <div class="g-section-header">
    <h2 class="g-section-title">Available Targets</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">Host &amp; Interface Reference</div>
+    <div style="padding:12px 14px">
      <div class="targets-grid">
        {% for name, host in snapshot.hosts.items() %}
        <div class="target-card">
@@ -187,6 +204,8 @@
        </div>
        {% endfor %}
      </div>
+    </div>
+  </div>
 </section>

 {% endblock %}
@@ -235,6 +254,10 @@
        <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-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>
@@ -244,6 +267,7 @@
            </tr></thead>
            <tbody>${tbody}</tbody>
          </table>
+        </div>
      </div>`;
  }
Author	SHA1	Message	Date
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
jared	7922d4bc79	Add notification bell, settings modal, and context-sensitive footer Lint / Python (flake8) (push) Successful in 40s Details Lint / JS (eslint) (push) Successful in 9s Details Security / Python Security (bandit) (push) Failing after 1m11s Details Test / Python Tests (pytest) (push) Successful in 1m3s Details Lint / Notify on failure (push) Has been skipped Details Lint / Deploy (push) Successful in 2s Details - Notification bell in header polls /api/status and shows active alerts with severity-colored dots; badge counts unread items via localStorage - Settings modal ([ * ] CFG) controls auto-refresh interval (15s/30s/1m/5m/off) persisted to localStorage and wired into lt.autoRefresh on all pages - Context-sensitive footer hints: Dashboard shows REFRESH + SUPPRESS, Link Debug shows REFRESH, all pages show CFG + HELP - Added S key (quick suppress) and * key (settings) shortcuts - ⌘K affordance button added to header-right - R key now uses lt.autoRefresh.now() so it works on any page - refreshAll() pushes fresh events to notification bell on each poll Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-30 21:33:02 -04:00