Dynamic resolved count, host search filter, lt-divider for UniFi section

- 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>

app.py

@@ -10,6 +10,7 @@ import json
 import logging
 import os
 import re
+import tempfile
 import threading
 import time
 import uuid
@@ -458,7 +459,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')

db.py

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

static/app.js

@@ -92,8 +92,10 @@ function updateStatusBar(summary, lastCheck, daemonOk) {
   // Update stat cards
   const scCrit = document.getElementById('stat-critical-val');
   const scWarn = document.getElementById('stat-warning-val');
+  const scRes  = document.getElementById('stat-resolved-val');
   if (scCrit) scCrit.textContent = critCount;
   if (scWarn) scWarn.textContent = warnCount;
+  if (scRes && summary.resolved_24h != null) scRes.textContent = summary.resolved_24h;
   const statCritCard = document.getElementById('stat-critical');
   if (statCritCard) statCritCard.classList.toggle('lt-stat-card--alert', critCount > 0);
 

static/style.css

@@ -706,38 +706,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; }

templates/index.html

@@ -208,6 +208,14 @@
   </div>
 
   <!-- Host cards -->
+  <div class="lt-toolbar" style="margin-bottom:10px" id="host-toolbar">
+    <div class="lt-toolbar-left">
+      <div class="lt-search">
+        <input type="search" class="lt-input lt-search-input" id="host-search"
+               placeholder="Filter hosts…" autocomplete="off" style="width:180px">
+      </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 %}
@@ -270,6 +278,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>
@@ -309,6 +321,7 @@
         </tbody>
       </table>
     </div>
+  </div>
 </section>
 {% endif %}
 
@@ -563,6 +576,15 @@
   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', () => {

templates/links.html

@@ -13,6 +13,19 @@
   </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>
 </div>
@@ -345,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 ───────────────────────────────────────
@@ -439,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)) {
@@ -471,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() {
@@ -552,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 %}

templates/suppressions.html

@@ -184,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">
@@ -199,6 +204,8 @@
         </div>
         {% endfor %}
       </div>
+    </div>
+  </div>
 </section>
 
 {% endblock %}