Add LDAP avatar photos, UX polish, and TDS component upgrades

- Add /api/avatar endpoint querying lldap for user jpegPhoto; disk cache
  with sentinel pattern avoids repeat LDAP hits for users without photos
- Add ldap3 dependency and ldap config block to config.json
- Wire lt-avatar img overlay in base.html with capture-phase error
  fallback (lt-avatar-img-err) to reveal initials when image is absent
- Fix lt-avatar CSS shim: position:relative + absolute inset on img
  (local base.css was missing these; added to style.css)
- Replace all empty-state paragraphs with proper lt-empty-state markup
  (icon + title + body) across index, suppressions, inspector, app.js
- Add lt-spinner--cyan next to refresh button; shows during refreshAll()
- Replace inspector panel-section-title with lt-divider throughout
- Add data-tooltip attributes to SFP DOM metrics, TX/RX/Carrier/Duplex/
  Auto-neg/Error labels in links.html and inspector panel
- Add tooltips to events table column headers (Sev, First Seen, Failures)
- Fix links.html host panel timestamp (was reading sample.updated which
  is always undefined; now uses data.updated)
- Fix UniFi status text casing (Online→ONLINE to match server render)
- Remove dead topo-status-* class manipulation from updateTopology()
- Always render alert-count-badge; toggle display:none when count is 0
- Fix double UniFi get_devices() call in monitor.py run loop
- Fix chip-critical animation (was using green pulse-glow; now red)

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

templates/base.html

@@ -133,6 +133,7 @@
       {% set _initials = (_words[0][0] ~ (_words[1][0] if _words|length > 1 else ''))|upper %}
       <div class="lt-avatar lt-avatar--sm {{ _uname | avatar_color }}"
            aria-hidden="true" title="{{ _uname }}">
+        <img src="{{ url_for('api_avatar') }}" alt="" class="lt-avatar-img">
         <span class="lt-avatar-initials">{{ _initials }}</span>
       </div>
       <span class="lt-header-user">{{ _uname }}</span>
@@ -245,6 +246,13 @@
     lt.keys.on('r', function() {
       if (typeof refreshAll === 'function') refreshAll();
     });
+
+    // Avatar image error fallback — hide broken img, reveal initials beneath
+    document.addEventListener('error', function(e) {
+      if (e.target.tagName === 'IMG' && e.target.closest('.lt-avatar')) {
+        e.target.classList.add('lt-avatar-img-err');
+      }
+    }, true);
   </script>
 
 </body>

templates/index.html

@@ -6,19 +6,23 @@
 <!-- ── Status bar ──────────────────────────────────────────────────── -->
 <div class="status-bar">
   <div class="status-chips">
+    {% if not daemon_ok %}
+    <span class="chip chip-critical">⚠ MONITOR OFFLINE</span>
+    {% endif %}
     {% if summary.critical %}
     <span class="chip chip-critical">● {{ summary.critical }} CRITICAL</span>
     {% endif %}
     {% if summary.warning %}
     <span class="chip chip-warning">● {{ summary.warning }} WARNING</span>
     {% endif %}
-    {% if not summary.critical and not summary.warning %}
+    {% if daemon_ok and not summary.critical and not summary.warning %}
     <span class="chip chip-ok">✔ ALL SYSTEMS NOMINAL</span>
     {% endif %}
   </div>
   <div class="status-meta">
-    <span class="last-check" id="last-check">{{ last_check }}</span>
-    <button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="refresh">↻ REFRESH</button>
+    <span class="last-check" id="last-check" data-tooltip="Last monitor poll timestamp" data-tooltip-pos="bottom">{{ last_check }}</span>
+    <span class="lt-spinner lt-spinner--sm lt-spinner--cyan" id="refresh-spinner" style="display:none"></span>
+    <button class="lt-btn lt-btn-ghost lt-btn-sm" data-action="refresh" data-tooltip="Refresh all data now" data-tooltip-pos="bottom">↻ REFRESH</button>
   </div>
 </div>
 
@@ -46,7 +50,7 @@
 
     <!-- WAN wire: cyan → green gradient, labeled -->
     <div class="topo-vc">
-      <div class="topo-vc-wire" style="background:linear-gradient(to bottom,var(--cyan),var(--cyan)); opacity:.55;"></div>
+      <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>
 
@@ -215,7 +219,11 @@
       </div>
     </div>
     {% else %}
-    <p class="empty-state">No host data yet – monitor is initializing.</p>
+    <div class="lt-empty-state lt-empty-state--sm">
+      <div class="lt-empty-state-icon">⌛</div>
+      <div class="lt-empty-state-title">No host data yet</div>
+      <div class="lt-empty-state-body">The monitor daemon may still be starting up.</div>
+    </div>
     {% endfor %}
   </div>
 </section>
@@ -272,9 +280,8 @@
 <section class="g-section">
   <div class="g-section-header">
     <h2 class="g-section-title">Active Alerts</h2>
-    {% if summary.critical or summary.warning %}
-    <span class="g-section-badge">{{ (summary.critical or 0) + (summary.warning or 0) }}</span>
-    {% endif %}
+    <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"
@@ -297,14 +304,14 @@
         <caption class="lt-sr-only">Active network alerts</caption>
         <thead>
           <tr>
-            <th>Sev</th>
+            <th data-tooltip="Alert severity level" data-tooltip-pos="bottom">Sev</th>
             <th>Type</th>
             <th>Target</th>
             <th>Detail</th>
             <th>Description</th>
-            <th>First Seen</th>
-            <th>Last Seen</th>
-            <th>Failures</th>
+            <th data-tooltip="When this alert was first raised" data-tooltip-pos="bottom">First Seen</th>
+            <th data-tooltip="Most recent check failure" data-tooltip-pos="bottom">Last Seen</th>
+            <th data-tooltip="Consecutive check failures since first seen" data-tooltip-pos="bottom">Failures</th>
             <th>Ticket</th>
             <th>Actions</th>
           </tr>
@@ -341,13 +348,21 @@
           </tr>
           {% endif %}
           {% else %}
-          <tr><td colspan="10" class="empty-state">No active alerts ✔</td></tr>
+          <tr><td colspan="10">
+            <div class="lt-empty-state lt-empty-state--sm">
+              <div class="lt-empty-state-icon">✔</div>
+              <div class="lt-empty-state-title">No active alerts</div>
+            </div>
+          </td></tr>
           {% endfor %}
         </tbody>
       </table>
     </div>
     {% else %}
-    <p class="empty-state">No active alerts ✔</p>
+    <div class="lt-empty-state lt-empty-state--sm">
+      <div class="lt-empty-state-icon">✔</div>
+      <div class="lt-empty-state-title">No active alerts</div>
+    </div>
     {% endif %}
   </div>
 </section>

templates/inspector.html

@@ -114,7 +114,7 @@ function portBlockHtml(idx, port, swName, sfpBlock) {
   const speedHtml = speedTxt ? `<span class="port-speed">${speedTxt}</span>` : '';
   return `<div class="switch-port-block ${state}${sfpCls}"
     data-switch="${escHtml(swName)}" data-port-idx="${idx}"
-    title="${title}"
+    title="${title}" aria-label="${title}"
     data-action="select-port"><span class="port-num">${numLabel}</span>${speedHtml}${lldpHtml}</div>`;
 }
 
@@ -259,7 +259,7 @@ function renderPanel(swName, idx) {
     const poeMaxStr = d.poe_max_power != null ? ` / max ${d.poe_max_power.toFixed(1)}W` : '';
     const poeCurStr = (d.poe_power != null && d.poe_power > 0) ? ` / draw <span class="val-amber">${d.poe_power.toFixed(1)}W</span>` : '';
     poeHtml = `
-      <div class="panel-section-title">PoE</div>
+      <div class="lt-divider"><span class="lt-divider-label">PoE</span></div>
       <div class="panel-row"><span class="panel-label">Class</span><span class="panel-val">class ${d.poe_class}${poeMaxStr}</span></div>
       ${d.poe_power != null ? `<div class="panel-row"><span class="panel-label">Draw</span><span class="panel-val">${d.poe_power > 0 ? `<span class="val-amber">${d.poe_power.toFixed(1)}W</span>` : '0W'}</span></div>` : ''}
       ${d.poe_mode ? `<div class="panel-row"><span class="panel-label">Mode</span><span class="panel-val">${escHtml(d.poe_mode)}</span></div>` : ''}`;
@@ -269,16 +269,16 @@ function renderPanel(swName, idx) {
   let trafficHtml = '';
   if (d.tx_bytes_rate != null || d.rx_bytes_rate != null) {
     trafficHtml = `
-      <div class="panel-section-title">Traffic</div>
-      <div class="panel-row"><span class="panel-label">TX</span><span class="panel-val">${fmtRate(d.tx_bytes_rate)}</span></div>
-      <div class="panel-row"><span class="panel-label">RX</span><span class="panel-val">${fmtRate(d.rx_bytes_rate)}</span></div>`;
+      <div class="lt-divider"><span class="lt-divider-label">Traffic</span></div>
+      <div class="panel-row"><span class="panel-label" data-tooltip="Transmit — outgoing from this port">TX</span><span class="panel-val">${fmtRate(d.tx_bytes_rate)}</span></div>
+      <div class="panel-row"><span class="panel-label" data-tooltip="Receive — incoming to this port">RX</span><span class="panel-val">${fmtRate(d.rx_bytes_rate)}</span></div>`;
   }
 
   // Errors / drops section
   let errHtml = '';
   if (d.tx_errs_rate != null || d.rx_errs_rate != null) {
     errHtml = `
-      <div class="panel-section-title">Errors / Drops</div>
+      <div class="lt-divider"><span class="lt-divider-label">Errors / Drops</span></div>
       <div class="panel-row"><span class="panel-label">TX Err</span><span class="panel-val">${fmtErrors(d.tx_errs_rate)}</span></div>
       <div class="panel-row"><span class="panel-label">RX Err</span><span class="panel-val">${fmtErrors(d.rx_errs_rate)}</span></div>
       <div class="panel-row"><span class="panel-label">TX Drop</span><span class="panel-val">${fmtErrors(d.tx_drops_rate)}</span></div>
@@ -291,7 +291,7 @@ function renderPanel(swName, idx) {
   if (d.lldp && d.lldp.system_name) {
     const l = d.lldp;
     lldpHtml = `
-      <div class="panel-section-title">LLDP Neighbor</div>
+      <div class="lt-divider"><span class="lt-divider-label">LLDP Neighbor</span></div>
       <div class="panel-row"><span class="panel-label">System</span><span class="panel-val val-cyan">${escHtml(l.system_name)}</span></div>
       ${l.port_id  ? `<div class="panel-row"><span class="panel-label">Port</span><span class="panel-val">${escHtml(l.port_id)}</span></div>` : ''}
       ${l.port_desc ? `<div class="panel-row"><span class="panel-label">Port Desc</span><span class="panel-val">${escHtml(l.port_desc)}</span></div>` : ''}
@@ -333,11 +333,11 @@ function renderPanel(swName, idx) {
       <button class="panel-close" data-action="close-panel" aria-label="Close panel">✕</button>
     </div>
 
-    <div class="panel-section-title">Link</div>
+    <div class="lt-divider"><span class="lt-divider-label">Link</span></div>
     <div class="panel-row"><span class="panel-label">Status</span><span class="panel-val">${upStr}</span></div>
     <div class="panel-row"><span class="panel-label">Speed</span><span class="panel-val">${speedStr}</span></div>
-    <div class="panel-row"><span class="panel-label">Duplex</span><span class="panel-val">${duplexStr}</span></div>
-    <div class="panel-row"><span class="panel-label">Auto-neg</span><span class="panel-val val-neutral">${autoneg}</span></div>
+    <div class="panel-row"><span class="panel-label" data-tooltip="Full = simultaneous send/receive. Half = one direction at a time.">Duplex</span><span class="panel-val">${duplexStr}</span></div>
+    <div class="panel-row"><span class="panel-label" data-tooltip="Autonegotiation: NIC and switch automatically agree speed and duplex.">Auto-neg</span><span class="panel-val val-neutral">${autoneg}</span></div>
     <div class="panel-row"><span class="panel-label">Media</span><span class="panel-val">${escHtml(mediaStr)}</span></div>
 
     ${poeHtml}
@@ -392,7 +392,7 @@ function buildPathDebug(swName, swPort, serverName, ifaceName, svrData) {
     : '';
 
   return `
-    <div class="panel-section-title">Path Debug <span class="path-conn-type">${escHtml(connType)}</span></div>
+    <div class="lt-divider"><span class="lt-divider-label">Path Debug · ${escHtml(connType)}</span></div>
     ${duplexWarnHtml}${speedWarnHtml}
     <div class="path-debug-cols">
       <div class="path-col">

templates/links.html

@@ -40,6 +40,7 @@ function fmtRateBar(bytesPerSec, linkSpeedMbps) {
 
 function trafficBarClass(pct, isTx) {
   if (pct > 85) return 'lt-progress--red';
+  if (pct > 65) return 'lt-progress--amber';
   return isTx ? '' : 'lt-progress--cyan';
 }
 
@@ -152,26 +153,26 @@ function renderIfaceCard(ifaceName, d) {
         </div>
         <div class="sfp-grid">
           <div class="sfp-stat">
-            <span class="sfp-stat-label">Temp</span>
+            <span class="sfp-stat-label" data-tooltip="SFP module temperature. Normal: below 70°C. Warn: 70–85°C. Critical: above 85°C.">Temp</span>
             <span class="sfp-stat-value ${tmpClass}">${fmtTemp(s.temp_c)}</span>
           </div>
           <div class="sfp-stat">
-            <span class="sfp-stat-label">Voltage</span>
+            <span class="sfp-stat-label" data-tooltip="SFP supply voltage. Normal: 3.1–3.5V.">Voltage</span>
             <span class="sfp-stat-value ${vClass}">${fmtVoltage(s.voltage_v)}</span>
           </div>
           <div class="sfp-stat">
-            <span class="sfp-stat-label">Bias</span>
+            <span class="sfp-stat-label" data-tooltip="Laser bias current in mA. High values may indicate end-of-life laser diode.">Bias</span>
             <span class="sfp-stat-value">${fmtBias(s.bias_ma)}</span>
           </div>
           <div class="sfp-stat">
-            <span class="sfp-stat-label">TX Power</span>
+            <span class="sfp-stat-label" data-tooltip="Optical transmit power in dBm. Typical good range: -3 to -9 dBm.">TX Power</span>
             <span class="sfp-stat-value ${txClass}">${fmtPower(s.tx_power_dbm)}</span>
             <div class="power-row">
               <div class="power-track"><div class="power-fill ${txClass === 'val-good' ? 'power-ok' : txClass === 'val-warn' ? 'power-warn' : 'power-crit'}" style="width:${txPct2}%"></div></div>
             </div>
           </div>
           <div class="sfp-stat">
-            <span class="sfp-stat-label">RX Power</span>
+            <span class="sfp-stat-label" data-tooltip="Optical receive power in dBm. Typical good range: -3 to -18 dBm. Below -20 dBm may indicate dirty/damaged fiber.">RX Power</span>
             <span class="sfp-stat-value ${rxClass}">${fmtPower(s.rx_power_dbm)}</span>
             <div class="power-row">
               <div class="power-track"><div class="power-fill ${rxClass === 'val-good' ? 'power-ok' : rxClass === 'val-warn' ? 'power-warn' : 'power-crit'}" style="width:${rxPct2}%"></div></div>
@@ -179,7 +180,7 @@ function renderIfaceCard(ifaceName, d) {
           </div>
           ${s.rx_power_dbm != null && s.tx_power_dbm != null ? `
           <div class="sfp-stat">
-            <span class="sfp-stat-label">RX−TX Δ</span>
+            <span class="sfp-stat-label" data-tooltip="Insertion loss: difference between transmit and receive power. Large negative values indicate fiber loss or connector issues.">RX−TX Δ</span>
             <span class="sfp-stat-value">${(s.rx_power_dbm - s.tx_power_dbm).toFixed(2)} dBm</span>
           </div>` : ''}
         </div>
@@ -200,42 +201,42 @@ function renderIfaceCard(ifaceName, d) {
           <span class="link-stat-value ${isDown ? 'val-crit' : 'val-good'}">${isDown ? 'DOWN' : 'UP'}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">Duplex</span>
+          <span class="link-stat-label" data-tooltip="Full = simultaneous send/receive at full speed. Half = one direction at a time, can cause collisions.">Duplex</span>
           <span class="link-stat-value">${fmtDuplex(d.duplex)}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">Auto-neg</span>
+          <span class="link-stat-label" data-tooltip="Autonegotiation: NIC and switch automatically agree on link speed and duplex mode.">Auto-neg</span>
           <span class="link-stat-value">${d.auto_neg == null ? '–' : d.auto_neg ? 'On' : 'Off'}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">Carrier Δ</span>
+          <span class="link-stat-label" data-tooltip="Carrier changes: number of times the link went up or down. High values indicate a flapping or unstable cable/SFP.">Carrier Δ</span>
           <span class="link-stat-value">${fmtCarrier(d.carrier_changes)}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">TX Err/s</span>
+          <span class="link-stat-label" data-tooltip="Transmit errors per second reported by the kernel network driver.">TX Err/s</span>
           <span class="link-stat-value">${fmtErrors(d.tx_errs_rate)}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">RX Err/s</span>
+          <span class="link-stat-label" data-tooltip="Receive errors per second reported by the kernel network driver.">RX Err/s</span>
           <span class="link-stat-value">${fmtErrors(d.rx_errs_rate)}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">TX Drop/s</span>
+          <span class="link-stat-label" data-tooltip="Transmit packets dropped per second (ring buffer full or driver overrun).">TX Drop/s</span>
           <span class="link-stat-value">${fmtErrors(d.tx_drops_rate)}</span>
         </div>
         <div class="link-stat">
-          <span class="link-stat-label">RX Drop/s</span>
+          <span class="link-stat-label" data-tooltip="Receive packets dropped per second (ring buffer full or driver overrun).">RX Drop/s</span>
           <span class="link-stat-value">${fmtErrors(d.rx_drops_rate)}</span>
         </div>
       </div>
       <div class="traffic-section">
         <div class="traffic-row">
-          <span class="traffic-label">TX</span>
+          <span class="traffic-label" data-tooltip="Transmit — outgoing traffic from this server">TX</span>
           <div class="lt-progress ${trafficBarClass(txPct, true)}"><div class="lt-progress-bar" style="width:${txPct}%"></div></div>
           <span class="traffic-value">${fmtRate(d.tx_bytes_rate)}</span>
         </div>
         <div class="traffic-row">
-          <span class="traffic-label">RX</span>
+          <span class="traffic-label" data-tooltip="Receive — incoming traffic to this server">RX</span>
           <div class="lt-progress ${trafficBarClass(rxPct, false)}"><div class="lt-progress-bar" style="width:${rxPct}%"></div></div>
           <span class="traffic-value">${fmtRate(d.rx_bytes_rate)}</span>
         </div>
@@ -431,8 +432,8 @@ function renderLinks(data) {
       .map(([iname, d]) => renderIfaceCard(iname, d)).join('');
     const sample  = Object.values(ifaces)[0] || {};
     const ip      = sample.host_ip || '';
-    const updStr  = sample.updated
-      ? new Date(sample.updated + (sample.updated.includes('Z') ? '' : 'Z')).toLocaleTimeString()
+    const updStr  = data.updated
+      ? new Date(data.updated.replace(' UTC', 'Z').replace(' ', 'T')).toLocaleTimeString()
       : '';
 
     parts.push(`

templates/suppressions.html

@@ -112,7 +112,11 @@
     </table>
   </div>
   {% else %}
-  <p class="empty-state" id="no-active-msg">No active suppressions.</p>
+  <div class="lt-empty-state lt-empty-state--sm" id="no-active-msg">
+    <div class="lt-empty-state-icon">🔕</div>
+    <div class="lt-empty-state-title">No active suppressions</div>
+    <div class="lt-empty-state-body">All alerts are active. Use the form above to silence a host or interface.</div>
+  </div>
   {% endif %}
   </div>
 </section>
@@ -156,7 +160,10 @@
     </table>
   </div>
   {% else %}
-  <p class="empty-state">No suppression history yet.</p>
+  <div class="lt-empty-state lt-empty-state--sm">
+    <div class="lt-empty-state-icon">📋</div>
+    <div class="lt-empty-state-title">No suppression history yet</div>
+  </div>
   {% endif %}
 </section>
 
@@ -210,7 +217,7 @@
     const wrap = document.getElementById('active-sup-wrap');
     const badge = document.getElementById('active-sup-badge');
     if (!rows || !rows.length) {
-      wrap.innerHTML = '<p class="empty-state" id="no-active-msg">No active suppressions.</p>';
+      wrap.innerHTML = '<div class="lt-empty-state lt-empty-state--sm" id="no-active-msg"><div class="lt-empty-state-icon">🔕</div><div class="lt-empty-state-title">No active suppressions</div><div class="lt-empty-state-body">All alerts are active. Use the form above to silence a host or interface.</div></div>';
       if (badge) badge.textContent = '0';
       return;
     }
@@ -245,7 +252,7 @@
       const rows = await lt.api.get('/api/suppressions');
       renderActiveRows(rows);
     } catch (err) {
-      console.warn('Failed to refresh suppressions:', err);
+      showToast('Failed to refresh suppressions', 'warning');
     }
   }
 
@@ -287,7 +294,7 @@
       const tbody = document.querySelector('#active-sup-table tbody');
       if (tbody && !tbody.children.length) {
         document.getElementById('active-sup-wrap').innerHTML =
-          '<p class="empty-state" id="no-active-msg">No active suppressions.</p>';
+          '<div class="lt-empty-state lt-empty-state--sm" id="no-active-msg"><div class="lt-empty-state-icon">🔕</div><div class="lt-empty-state-title">No active suppressions</div><div class="lt-empty-state-body">All alerts are active. Use the form above to silence a host or interface.</div></div>';
         if (badge) badge.textContent = '0';
       }
       showToast('Suppression removed', 'success');