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>

static/app.js

@@ -33,7 +33,9 @@ function _toIso(s) {
 // ── Dashboard auto-refresh ────────────────────────────────────────────
 async function refreshAll() {
   const refreshBtn = document.querySelector('[data-action="refresh"]');
+  const spinner    = document.getElementById('refresh-spinner');
   if (refreshBtn) refreshBtn.classList.add('is-loading');
+  if (spinner)    spinner.style.display = '';
   try {
     const [netResult, statusResult] = await Promise.allSettled([
       lt.api.get('/api/network'),
@@ -56,6 +58,7 @@ async function refreshAll() {
     }
   } finally {
     if (refreshBtn) refreshBtn.classList.remove('is-loading');
+    if (spinner)    spinner.style.display = 'none';
   }
 }
 
@@ -78,6 +81,13 @@ function updateStatusBar(summary, lastCheck, daemonOk) {
   else if (warnCount) document.title = `(${warnCount} WARN) GANDALF`;
   else                document.title = 'GANDALF';
 
+  const alertBadge = document.getElementById('alert-count-badge');
+  if (alertBadge) {
+    const total = critCount + warnCount;
+    alertBadge.textContent = total;
+    alertBadge.style.display = total ? '' : 'none';
+  }
+
   // Stale data banner: warn if last_check is older than 15 minutes
   let staleBanner = document.getElementById('stale-banner');
   if (lastCheck) {
@@ -132,9 +142,7 @@ function updateTopology(hosts) {
     const host = hosts[name];
     if (!host) return;
     node.className = node.className.replace(/topo-v2-status-(up|down|degraded|unknown)/g, '');
-    node.className = node.className.replace(/topo-status-(up|down|degraded|unknown)/g, '');
     node.classList.add(`topo-v2-status-${host.status}`);
-    node.classList.add(`topo-status-${host.status}`);
     const badge = node.querySelector('.topo-badge');
     if (badge) {
       badge.className = `topo-badge topo-badge-${host.status}`;
@@ -155,7 +163,7 @@ function updateUnifiTable(devices) {
   tbody.innerHTML = devices.map(d => {
     const statusClass = d.connected ? '' : 'row-critical';
     const dotClass    = d.connected ? 'dot-up' : 'dot-down';
-    const statusText  = d.connected ? 'Online' : 'Offline';
+    const statusText  = d.connected ? 'ONLINE' : 'OFFLINE';
     const suppressBtn = !d.connected
       ? `<button class="lt-btn lt-btn-ghost lt-btn-sm btn-suppress"
             data-sup-type="unifi_device"
@@ -181,7 +189,7 @@ function updateEventsTable(events, totalActive) {
 
   const active = (events || []).filter(e => e.severity !== 'info');
   if (!active.length) {
-    wrap.innerHTML = '<p class="empty-state">No active alerts ✔</p>';
+    wrap.innerHTML = '<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>';
     return;
   }