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>

static/style.css

@@ -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; }

templates/index.html

@@ -270,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>
@@ -309,6 +313,7 @@
         </tbody>
       </table>
     </div>
+  </div>
 </section>
 {% endif %}
 

templates/inspector.html

@@ -427,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>';
@@ -465,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();
 });

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>
@@ -384,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="lt-stats-grid" style="margin-bottom:16px">
-      <div class="link-summary-grid">
+      <div class="lt-stat-card">
-        <div class="link-summary-stat">
+        <span class="lt-stat-icon" aria-hidden="true" style="color:var(--cyan)">⬡</span>
-          <span class="lss-label">Total Interfaces</span>
+        <div class="lt-stat-info">
-          <span class="lss-value">${totalIfaces}</span>
+          <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' : ''}">
+      <div class="lt-stat-card${downCardCls}">
-          <span class="lss-label">With Errors</span>
+        <span class="lt-stat-icon" aria-hidden="true" style="color:${downColor}">●</span>
-          <span class="lss-value ${errIfaces ? 'val-warn' : 'val-good'}">${errIfaces}</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>`;
 }
 
@@ -421,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)) {
@@ -453,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() {
@@ -534,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

@@ -85,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>
@@ -113,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>
@@ -130,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>
@@ -161,6 +170,7 @@
         </tbody>
       </table>
     </div>
+  </div>
   {% else %}
   <div class="lt-empty-state lt-empty-state--sm">
     <div class="lt-empty-state-icon">📋</div>
@@ -174,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">
@@ -189,6 +204,8 @@
         </div>
         {% endfor %}
       </div>
+    </div>
+  </div>
 </section>
 
 {% endblock %}
@@ -237,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>
@@ -246,6 +267,7 @@
             </tr></thead>
             <tbody>${tbody}</tbody>
           </table>
+        </div>
       </div>`;
   }