fix: escapeHtml crashes on numbers — String(s) before .replace()

ci: add pre-deploy JS validation — syntax check + undefined reference detection
Validation runs BEFORE docker build. If it fails, deployment is blocked. No more broken code reaching production.
2026-03-30 15:55:49 +00:00 · 2026-03-20 19:25:48 +00:00 · 2026-03-20 19:24:11 +00:00 · 2026-03-20 19:23:20 +00:00 · 2026-03-20 19:21:30 +00:00 · 2026-03-20 19:17:57 +00:00
17 changed files with 455 additions and 85 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -14,6 +14,9 @@ jobs:
    steps:
      - uses: actions/checkout@v4

+      - name: Validate JS
+        run: sh scripts/validate.sh
+
      - name: Build and deploy
        run: |
          set -e
@@ -24,6 +27,7 @@ jobs:
            --restart unless-stopped \
            -p 80:80 -p 443:443 -p 1883:1883 \
            -v $HOME/meshcore-data:/app/data \
+            -v $HOME/meshcore-config.json:/app/config.json:ro \
            -v $HOME/caddy-data:/data/caddy \
            -v $HOME/meshcore-analyzer/Caddyfile:/etc/caddy/Caddyfile \
            meshcore-analyzer
--- a/config.example.json
+++ b/config.example.json
@@ -8,7 +8,10 @@
    {
      "name": "local",
      "broker": "mqtt://localhost:1883",
-      "topics": ["meshcore/+/+/packets", "meshcore/#"]
+      "topics": [
+        "meshcore/+/+/packets",
+        "meshcore/#"
+      ]
    },
    {
      "name": "lincomatic",
@@ -16,8 +19,18 @@
      "username": "your-username",
      "password": "your-password",
      "rejectUnauthorized": false,
-      "topics": ["meshcore/+/+/packets", "meshcore/+/+/status"],
-      "iataFilter": ["SJC", "SFO", "OAK"]
+      "topics": [
+        "meshcore/SJC/#",
+        "meshcore/SFO/#",
+        "meshcore/OAK/#",
+        "meshcore/MRY/#"
+      ],
+      "iataFilter": [
+        "SJC",
+        "SFO",
+        "OAK",
+        "MRY"
+      ]
    }
  ],
  "channelKeys": {
--- a/public/analytics.js
+++ b/public/analytics.js
@@ -1129,7 +1129,7 @@
    // Render minimap
    if (hasMap && typeof L !== 'undefined') {
      const map = L.map('subpathMap', { zoomControl: false, attributionControl: false });
-      L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { maxZoom: 18 }).addTo(map);
+      L.tileLayer(getTileUrl(), { maxZoom: 18 }).addTo(map);

      const latlngs = [];
      nodesWithLoc.forEach((n, i) => {
@@ -1182,7 +1182,7 @@
        return myKeys.has(n.public_key) ? ' <span style="color:var(--accent);font-size:10px">★ MINE</span>' : '';
      }

-      const ROLE_COLORS = { repeater: '#dc2626', companion: '#2563eb', room: '#16a34a', sensor: '#d97706' };
+      // ROLE_COLORS from shared roles.js

      el.innerHTML = `
        <div class="analytics-section">
--- a/public/app.js
+++ b/public/app.js
@@ -228,8 +228,8 @@ function offWS(fn) { wsListeners = wsListeners.filter(f => f !== fn); }

 /* Global escapeHtml — used by multiple pages */
 function escapeHtml(s) {
-  if (!s) return '';
-  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  if (s == null) return '';
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
 }

 /* Global debounce */
@@ -383,7 +383,7 @@ window.addEventListener('DOMContentLoaded', () => {
      try {
        const h = await api('/nodes/' + pk + '/health', { ttl: CLIENT_TTL.nodeHealth });
        const age = h.stats.lastHeard ? Date.now() - new Date(h.stats.lastHeard).getTime() : null;
-        const status = age === null ? '🔴' : age < 3600000 ? '🟢' : age < 86400000 ? '🟡' : '🔴';
+        const status = age === null ? '🔴' : age < HEALTH_THRESHOLDS.nodeDegradedMs ? '🟢' : age < HEALTH_THRESHOLDS.nodeSilentMs ? '🟡' : '🔴';
        return '<a href="#/nodes/' + pk + '" class="fav-dd-item" data-key="' + pk + '">'
          + '<span class="fav-dd-status">' + status + '</span>'
          + '<span class="fav-dd-name">' + (h.node.name || truncate(pk, 12)) + '</span>'
--- a/public/channels.js
+++ b/public/channels.js
@@ -40,7 +40,8 @@
    tip.id = 'chNodeTooltip';
    tip.className = 'ch-node-tooltip';
    tip.setAttribute('role', 'tooltip');
-    const role = node.is_repeater ? '📡 Repeater' : node.is_room ? '🏠 Room' : node.is_sensor ? '🌡 Sensor' : '📻 Companion';
+    const roleKey = node.role || (node.is_repeater ? 'repeater' : node.is_room ? 'room' : node.is_sensor ? 'sensor' : 'companion');
+    const role = (ROLE_EMOJI[roleKey] || '●') + ' ' + (ROLE_LABELS[roleKey] || roleKey);
    const lastSeen = node.last_seen ? timeAgo(node.last_seen) : 'unknown';
    tip.innerHTML = `<div class="ch-tooltip-name">${escapeHtml(node.name)}</div>
      <div class="ch-tooltip-role">${role}</div>
@@ -113,7 +114,8 @@
      const detail = await api('/nodes/' + encodeURIComponent(node.public_key), { ttl: CLIENT_TTL.nodeDetail });
      const n = detail.node;
      const adverts = detail.recentAdverts || [];
-      const role = n.is_repeater ? '📡 Repeater' : n.is_room ? '🏠 Room' : n.is_sensor ? '🌡 Sensor' : '📻 Companion';
+      const roleKey = n.role || (n.is_repeater ? 'repeater' : n.is_room ? 'room' : n.is_sensor ? 'sensor' : 'companion');
+      const role = (ROLE_EMOJI[roleKey] || '●') + ' ' + (ROLE_LABELS[roleKey] || roleKey);
      const lastSeen = n.last_seen ? timeAgo(n.last_seen) : 'unknown';

      panel.innerHTML = `<div class="ch-node-panel-header">
--- a/public/home.js
+++ b/public/home.js
@@ -253,7 +253,7 @@
        const obs = h.observers || [];

        const age = stats.lastHeard ? Date.now() - new Date(stats.lastHeard).getTime() : null;
-        const status = age === null ? 'silent' : age < 3600000 ? 'healthy' : age < 86400000 ? 'degraded' : 'silent';
+        const status = age === null ? 'silent' : age < HEALTH_THRESHOLDS.nodeDegradedMs ? 'healthy' : age < HEALTH_THRESHOLDS.nodeSilentMs ? 'degraded' : 'silent';
        const statusDot = status === 'healthy' ? '🟢' : status === 'degraded' ? '🟡' : '🔴';
        const statusText = status === 'healthy' ? 'Active' : status === 'degraded' ? 'Degraded' : 'Silent';
        const name = node.name || mn.name || truncate(mn.pubkey, 12);
@@ -403,8 +403,8 @@
      if (stats.lastHeard) {
        const ageMs = Date.now() - new Date(stats.lastHeard).getTime();
        const ago = timeAgo(stats.lastHeard);
-        if (ageMs < 3600000) { status = 'healthy'; color = 'green'; statusMsg = `Last heard ${ago}`; }
-        else if (ageMs < 86400000) { status = 'degraded'; color = 'yellow'; statusMsg = `Last heard ${ago}`; }
+        if (ageMs < HEALTH_THRESHOLDS.nodeDegradedMs) { status = 'healthy'; color = 'green'; statusMsg = `Last heard ${ago}`; }
+        else if (ageMs < HEALTH_THRESHOLDS.nodeSilentMs) { status = 'degraded'; color = 'yellow'; statusMsg = `Last heard ${ago}`; }
        else { statusMsg = `Last heard ${ago}`; }
      }

--- a/public/index.html
+++ b/public/index.html
@@ -24,7 +24,7 @@
  <meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
  <link rel="stylesheet" href="style.css?v=1773998477">
  <link rel="stylesheet" href="home.css">
-  <link rel="stylesheet" href="live.css?v=1773966856">
+  <link rel="stylesheet" href="live.css?v=1774034490">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin="anonymous">
@@ -79,18 +79,19 @@
  <main id="app" role="main"></main>

  <script src="vendor/qrcode.js"></script>
-  <script src="app.js?v=1773993532"></script>
-  <script src="home.js?v=1773977027"></script>
-  <script src="packets.js?v=1773999188"></script>
-  <script src="map.js?v=1773998477" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="channels.js?v=1773977027" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="nodes.js?v=1773977027" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="roles.js?v=1774028201"></script>
+  <script src="app.js?v=1774034748"></script>
+  <script src="home.js?v=1774028201"></script>
+  <script src="packets.js?v=1774023016"></script>
+  <script src="map.js?v=1774028201" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="channels.js?v=1774028201" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="nodes.js?v=1774028201" onerror="console.error('Failed to load:', this.src)"></script>
  <script src="traces.js?v=1773972187" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="analytics.js?v=1773996158" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="live.js?v=1773998477" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="observers.js?v=1773998477" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="observer-detail.js?v=1773993532" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="node-analytics.js?v=1773996158" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="analytics.js?v=1774028201" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="live.js?v=1774034600" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="observers.js?v=1774018095" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="observer-detail.js?v=1774028201" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="node-analytics.js?v=1774028201" onerror="console.error('Failed to load:', this.src)"></script>
  <script src="perf.js?v=1773985649" onerror="console.error('Failed to load:', this.src)"></script>
 </body>
 </html>
--- a/public/live.css
+++ b/public/live.css
@@ -100,6 +100,26 @@
  background: color-mix(in srgb, var(--text) 14%, transparent);
 }

+/* ---- Node Detail Panel ---- */
+.live-node-detail {
+  top: 60px;
+  right: 12px;
+  width: 320px;
+  max-height: calc(100vh - 140px);
+  overflow-y: auto;
+  background: color-mix(in srgb, var(--surface-1) 95%, transparent);
+  backdrop-filter: blur(12px);
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.live-node-detail.hidden {
+  transform: translateX(340px);
+  opacity: 0;
+  pointer-events: none;
+}
+
 /* ---- Feed ---- */
 .live-feed {
  bottom: 12px;
--- a/public/live.js
+++ b/public/live.js
@@ -30,10 +30,7 @@
    timelineFetchedScope: 0, // last fetched scope to avoid redundant fetches
  };

-  const ROLE_COLORS = {
-    repeater: '#3b82f6', companion: '#06b6d4', room: '#a855f7',
-    sensor: '#f59e0b', unknown: '#6b7280'
-  };
+  // ROLE_COLORS loaded from shared roles.js (includes 'unknown')

  const TYPE_COLORS = {
    ADVERT: '#22c55e', GRP_TXT: '#3b82f6', TXT_MSG: '#f59e0b', ACK: '#6b7280',
@@ -601,6 +598,10 @@
          <button class="feed-hide-btn" id="feedHideBtn" title="Hide feed">✕</button>
        </div>
        <button class="feed-show-btn hidden" id="feedShowBtn" title="Show feed">📋</button>
+        <div class="live-overlay live-node-detail hidden" id="liveNodeDetail">
+          <button class="feed-hide-btn" id="nodeDetailClose" title="Close">✕</button>
+          <div id="nodeDetailContent"></div>
+        </div>
        <button class="legend-toggle-btn hidden" id="legendToggleBtn" aria-label="Show legend" title="Show legend">🎨</button>
        <div class="live-overlay live-legend" id="liveLegend" role="region" aria-label="Map legend">
          <h3 class="legend-title">PACKET TYPES</h3>
@@ -612,12 +613,7 @@
            <li><span class="live-dot" style="background:#ec4899" aria-hidden="true"></span> Trace — Route trace</li>
          </ul>
          <h3 class="legend-title" style="margin-top:8px">NODE ROLES</h3>
-          <ul class="legend-list">
-            <li><span class="live-dot" style="background:#3b82f6" aria-hidden="true"></span> Repeater</li>
-            <li><span class="live-dot" style="background:#06b6d4" aria-hidden="true"></span> Companion</li>
-            <li><span class="live-dot" style="background:#a855f7" aria-hidden="true"></span> Room</li>
-            <li><span class="live-dot" style="background:#f59e0b" aria-hidden="true"></span> Sensor</li>
-          </ul>
+          <ul class="legend-list" id="roleLegendList"></ul>
        </div>

        <!-- VCR Bar -->
@@ -656,15 +652,13 @@

    const isDark = document.documentElement.getAttribute('data-theme') === 'dark' ||
      (document.documentElement.getAttribute('data-theme') !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-    const DARK_TILES = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
-    const LIGHT_TILES = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
-    let tileLayer = L.tileLayer(isDark ? DARK_TILES : LIGHT_TILES, { maxZoom: 19 }).addTo(map);
+    let tileLayer = L.tileLayer(isDark ? TILE_DARK : TILE_LIGHT, { maxZoom: 19 }).addTo(map);

    // Swap tiles when theme changes
    const _themeObs = new MutationObserver(function () {
      const dark = document.documentElement.getAttribute('data-theme') === 'dark' ||
        (document.documentElement.getAttribute('data-theme') !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-      tileLayer.setUrl(dark ? DARK_TILES : LIGHT_TILES);
+      tileLayer.setUrl(dark ? TILE_DARK : TILE_LIGHT);
    });
    _themeObs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
    L.control.zoom({ position: 'topright' }).addTo(map);
@@ -749,6 +743,23 @@
      });
    }

+    // Populate role legend from shared roles.js
+    const roleLegendList = document.getElementById('roleLegendList');
+    if (roleLegendList) {
+      for (const role of (window.ROLE_SORT || ['repeater', 'companion', 'room', 'sensor', 'observer'])) {
+        const li = document.createElement('li');
+        li.innerHTML = `<span class="live-dot" style="background:${ROLE_COLORS[role] || '#6b7280'}" aria-hidden="true"></span> ${(ROLE_LABELS[role] || role).replace(/s$/, '')}`;
+        roleLegendList.appendChild(li);
+      }
+    }
+
+    // Node detail panel
+    const nodeDetailPanel = document.getElementById('liveNodeDetail');
+    const nodeDetailContent = document.getElementById('nodeDetailContent');
+    document.getElementById('nodeDetailClose').addEventListener('click', () => {
+      nodeDetailPanel.classList.add('hidden');
+    });
+
    // Feed panel resize handle (#27)
    const savedFeedWidth = localStorage.getItem('live-feed-width');
    if (savedFeedWidth) feedEl.style.width = savedFeedWidth + 'px';
@@ -966,6 +977,80 @@
    }, 2000);
  }

+  async function showNodeDetail(pubkey) {
+    const panel = document.getElementById('liveNodeDetail');
+    const content = document.getElementById('nodeDetailContent');
+    panel.classList.remove('hidden');
+    content.innerHTML = '<div style="padding:20px;color:var(--text-muted)">Loading…</div>';
+    try {
+      const [data, healthData] = await Promise.all([
+        api('/nodes/' + encodeURIComponent(pubkey), { ttl: 30 }),
+        api('/nodes/' + encodeURIComponent(pubkey) + '/health', { ttl: 30 }).catch(() => null)
+      ]);
+      const n = data.node;
+      const h = healthData || {};
+      const stats = h.stats || {};
+      const observers = h.observers || [];
+      const recent = h.recentPackets || [];
+      const roleColor = ROLE_COLORS[n.role] || '#6b7280';
+      const roleLabel = (ROLE_LABELS[n.role] || n.role || 'unknown').replace(/s$/, '');
+      const hasLoc = n.lat != null && n.lon != null;
+      const lastSeen = n.last_seen ? timeAgo(n.last_seen) : '—';
+      const thresholds = window.getHealthThresholds ? getHealthThresholds(n.role) : { degradedMs: 3600000, silentMs: 86400000 };
+      const ageMs = n.last_seen ? Date.now() - new Date(n.last_seen).getTime() : Infinity;
+      const statusDot = ageMs < thresholds.degradedMs ? 'health-green' : ageMs < thresholds.silentMs ? 'health-yellow' : 'health-red';
+      const statusLabel = ageMs < thresholds.degradedMs ? 'Online' : ageMs < thresholds.silentMs ? 'Degraded' : 'Offline';
+
+      let html = `
+        <div style="padding:16px;">
+          <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
+            <span class="${statusDot}" style="font-size:18px">●</span>
+            <h3 style="margin:0;font-size:16px;font-weight:700;">${escapeHtml(n.name || 'Unknown')}</h3>
+          </div>
+          <div style="margin-bottom:12px;">
+            <span style="display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600;background:${roleColor};color:#fff;">${roleLabel.toUpperCase()}</span>
+            <span style="color:var(--text-muted);font-size:12px;margin-left:8px;">${statusLabel}</span>
+          </div>
+          <div style="font-size:12px;color:var(--text-muted);margin-bottom:8px;">
+            <code style="font-size:10px;word-break:break-all;">${escapeHtml(n.public_key)}</code>
+          </div>
+          <table style="font-size:12px;width:100%;border-collapse:collapse;">
+            <tr><td style="color:var(--text-muted);padding:4px 8px 4px 0;">Last Seen</td><td>${lastSeen}</td></tr>
+            <tr><td style="color:var(--text-muted);padding:4px 8px 4px 0;">Adverts</td><td>${n.advert_count || 0}</td></tr>
+            ${hasLoc ? `<tr><td style="color:var(--text-muted);padding:4px 8px 4px 0;">Location</td><td>${n.lat.toFixed(5)}, ${n.lon.toFixed(5)}</td></tr>` : ''}
+            ${stats.avgSnr != null ? `<tr><td style="color:var(--text-muted);padding:4px 8px 4px 0;">Avg SNR</td><td>${stats.avgSnr.toFixed(1)} dB</td></tr>` : ''}
+            ${stats.avgHops != null ? `<tr><td style="color:var(--text-muted);padding:4px 8px 4px 0;">Avg Hops</td><td>${stats.avgHops.toFixed(1)}</td></tr>` : ''}
+            ${stats.totalPackets ? `<tr><td style="color:var(--text-muted);padding:4px 8px 4px 0;">Total Packets</td><td>${stats.totalPackets}</td></tr>` : ''}
+          </table>`;
+
+      if (observers.length) {
+        html += `<h4 style="font-size:12px;margin:12px 0 6px;color:var(--text-muted);">Heard By</h4>
+          <div style="font-size:11px;">` +
+          observers.map(o => `<div style="padding:2px 0;">${escapeHtml(o.observer_name || o.observer_id.slice(0, 12))} — ${o.count} pkts</div>`).join('') +
+          '</div>';
+      }
+
+      if (recent.length) {
+        html += `<h4 style="font-size:12px;margin:12px 0 6px;color:var(--text-muted);">Recent Packets</h4>
+          <div style="font-size:11px;max-height:200px;overflow-y:auto;">` +
+          recent.slice(0, 10).map(p => `<div style="padding:2px 0;display:flex;justify-content:space-between;">
+            <span>${escapeHtml(p.payload_type || '?')}</span>
+            <span style="color:var(--text-muted)">${p.timestamp ? timeAgo(p.timestamp) : '—'}</span>
+          </div>`).join('') +
+          '</div>';
+      }
+
+      html += `<div style="margin-top:12px;display:flex;gap:8px;">
+        <a href="#/nodes?selected=${encodeURIComponent(n.public_key)}" style="font-size:12px;color:var(--accent);">Full Detail →</a>
+        <a href="#/nodes/${encodeURIComponent(n.public_key)}/analytics" style="font-size:12px;color:var(--accent);">📊 Analytics</a>
+      </div></div>`;
+
+      content.innerHTML = html;
+    } catch (e) {
+      content.innerHTML = `<div style="padding:20px;color:var(--text-muted);">Error: ${e.message}</div>`;
+    }
+  }
+
  async function loadNodes(beforeTs) {
    try {
      const url = beforeTs
@@ -1014,6 +1099,8 @@
      permanent: false, direction: 'top', offset: [0, -10], className: 'live-tooltip'
    });

+    marker.on('click', () => showNodeDetail(n.public_key));
+
    marker._glowMarker = glow;
    marker._baseColor = color;
    marker._baseSize = size;
@@ -1059,7 +1146,7 @@
        if (msg.type === 'packet') bufferPacket(msg.data);
      } catch {}
    };
-    ws.onclose = () => setTimeout(connectWS, 3000);
+    ws.onclose = () => setTimeout(connectWS, WS_RECONNECT_MS);
    ws.onerror = () => {};
  }

@@ -1154,7 +1241,7 @@

    // Sanity check: drop hops that are impossibly far from both neighbors (>200km ≈ 1.8°)
    // These are almost certainly 1-byte prefix collisions with distant nodes
-    const MAX_HOP_DIST = 1.8;
+    // MAX_HOP_DIST from shared roles.js
    for (let i = 0; i < raw.length; i++) {
      if (!raw[i].known || !raw[i].pos) continue;
      const prev = i > 0 && raw[i-1].known && raw[i-1].pos ? raw[i-1].pos : null;
--- a/public/map.js
+++ b/public/map.js
@@ -8,7 +8,7 @@
  let clusterGroup = null;
  let nodes = [];
  let observers = [];
-  let filters = { repeater: true, companion: true, room: true, sensor: true, lastHeard: '30d', mqttOnly: false, neighbors: false, clusters: false };
+  let filters = { repeater: true, companion: true, room: true, sensor: true, observer: true, lastHeard: '30d', neighbors: false, clusters: false };
  let wsHandler = null;
  let heatLayer = null;
  let userHasMoved = false;
@@ -17,16 +17,7 @@
  // Safe escape — falls back to identity if app.js hasn't loaded yet
  const safeEsc = (typeof esc === 'function') ? esc : function (s) { return s; };

-  // Distinct shapes + high-contrast WCAG AA colors for each role
-  const ROLE_STYLE = {
-    repeater:  { color: '#dc2626', shape: 'diamond',  radius: 10, weight: 2 },  // red diamond
-    companion: { color: '#2563eb', shape: 'circle',   radius: 8,  weight: 2 },  // blue circle
-    room:      { color: '#16a34a', shape: 'square',   radius: 9,  weight: 2 },  // green square
-    sensor:    { color: '#d97706', shape: 'triangle', radius: 8,  weight: 2 },  // amber triangle
-  };
-
-  const ROLE_LABELS = { repeater: 'Repeaters', companion: 'Companions', room: 'Room Servers', sensor: 'Sensors' };
-  const ROLE_COLORS = { repeater: '#dc2626', companion: '#2563eb', room: '#16a34a', sensor: '#d97706' };
+  // Roles loaded from shared roles.js (ROLE_STYLE, ROLE_LABELS, ROLE_COLORS globals)

  function makeMarkerIcon(role) {
    const s = ROLE_STYLE[role] || ROLE_STYLE.companion;
@@ -43,6 +34,19 @@
      case 'triangle':
        path = `<polygon points="${c},2 ${size-2},${size-2} 2,${size-2}" fill="${s.color}" stroke="#fff" stroke-width="2"/>`;
        break;
+      case 'star': {
+        // 5-pointed star
+        const cx = c, cy = c, outer = c - 1, inner = outer * 0.4;
+        let pts = '';
+        for (let i = 0; i < 5; i++) {
+          const aOuter = (i * 72 - 90) * Math.PI / 180;
+          const aInner = ((i * 72) + 36 - 90) * Math.PI / 180;
+          pts += `${cx + outer * Math.cos(aOuter)},${cy + outer * Math.sin(aOuter)} `;
+          pts += `${cx + inner * Math.cos(aInner)},${cy + inner * Math.sin(aInner)} `;
+        }
+        path = `<polygon points="${pts.trim()}" fill="${s.color}" stroke="#fff" stroke-width="1.5"/>`;
+        break;
+      }
      default: // circle
        path = `<circle cx="${c}" cy="${c}" r="${c-2}" fill="${s.color}" stroke="#fff" stroke-width="2"/>`;
    }
@@ -74,7 +78,6 @@
          </fieldset>
          <fieldset class="mc-section">
            <legend class="mc-label">Filters</legend>
-            <label for="mcMqtt"><input type="checkbox" id="mcMqtt"> MQTT Connected Only</label>
            <label for="mcNeighbors"><input type="checkbox" id="mcNeighbors"> Show direct neighbors</label>
          </fieldset>
          <fieldset class="mc-section">
@@ -106,18 +109,16 @@
    }
    map = L.map('leaflet-map', { zoomControl: true }).setView(initCenter, initZoom);

-    const DARK_TILES = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
-    const LIGHT_TILES = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
    const isDark = document.documentElement.getAttribute('data-theme') === 'dark' ||
      (document.documentElement.getAttribute('data-theme') !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-    const tileLayer = L.tileLayer(isDark ? DARK_TILES : LIGHT_TILES, {
+    const tileLayer = L.tileLayer(isDark ? TILE_DARK : TILE_LIGHT, {
      attribution: '© OpenStreetMap © CartoDB',
      maxZoom: 19,
    }).addTo(map);
    const _mapThemeObs = new MutationObserver(function () {
      const dark = document.documentElement.getAttribute('data-theme') === 'dark' ||
        (document.documentElement.getAttribute('data-theme') !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-      tileLayer.setUrl(dark ? DARK_TILES : LIGHT_TILES);
+      tileLayer.setUrl(dark ? TILE_DARK : TILE_LIGHT);
    });
    _mapThemeObs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });

@@ -152,7 +153,6 @@
    // Bind controls
    document.getElementById('mcClusters').addEventListener('change', e => { filters.clusters = e.target.checked; renderMarkers(); });
    document.getElementById('mcHeatmap').addEventListener('change', e => { toggleHeatmap(e.target.checked); });
-    document.getElementById('mcMqtt').addEventListener('change', e => { filters.mqttOnly = e.target.checked; renderMarkers(); });
    document.getElementById('mcNeighbors').addEventListener('change', e => { filters.neighbors = e.target.checked; renderMarkers(); });
    document.getElementById('mcLastHeard').addEventListener('change', e => { filters.lastHeard = e.target.value; loadNodes(); });

@@ -256,13 +256,17 @@

  async function loadNodes() {
    try {
+      // Load regions from config + observed IATAs
+      try { REGION_NAMES = await api('/config/regions', { ttl: 3600 }); } catch {}
+
      const data = await api(`/nodes?limit=10000&lastHeard=${filters.lastHeard}`, { ttl: CLIENT_TTL.nodeList });
      nodes = data.nodes || [];
-      buildRoleChecks(data.counts || {});

-      // Load observers for jump buttons
+      // Load observers for jump buttons + map markers
      const obsData = await api('/observers', { ttl: CLIENT_TTL.observers });
      observers = obsData.observers || [];
+
+      buildRoleChecks(data.counts || {});
      buildJumpButtons();

      renderMarkers();
@@ -277,12 +281,14 @@
    const el = document.getElementById('mcRoleChecks');
    if (!el) return;
    el.innerHTML = '';
-    for (const role of ['repeater', 'companion', 'room', 'sensor']) {
-      const count = counts[role + 's'] || 0;
+    const obsCount = observers.filter(o => o.lat && o.lon).length;
+    const roles = ['repeater', 'companion', 'room', 'sensor', 'observer'];
+    const shapeMap = { repeater: '◆', companion: '●', room: '■', sensor: '▲', observer: '★' };
+    for (const role of roles) {
+      const count = role === 'observer' ? obsCount : (counts[role + 's'] || 0);
      const cbId = 'mcRole_' + role;
      const lbl = document.createElement('label');
      lbl.setAttribute('for', cbId);
-      const shapeMap = { repeater: '◆', companion: '●', room: '■', sensor: '▲' };
      const shape = shapeMap[role] || '●';
      lbl.innerHTML = `<input type="checkbox" id="${cbId}" data-role="${role}" ${filters[role] ? 'checked' : ''}> <span style="color:${ROLE_COLORS[role]};font-weight:600;" aria-hidden="true">${shape}</span> ${ROLE_LABELS[role]} <span style="color:var(--text-muted)">(${count})</span>`;
      lbl.querySelector('input').addEventListener('change', e => {
@@ -293,7 +299,7 @@
    }
  }

-  const REGION_NAMES = { SJC: 'San Jose', SFO: 'San Francisco', OAK: 'Oakland', MTV: 'Mountain View', SCZ: 'Santa Cruz', MRY: 'Monterey', PAO: 'Palo Alto' };
+  let REGION_NAMES = {};

  function buildJumpButtons() {
    const el = document.getElementById('mcJumps');
@@ -358,6 +364,44 @@
      marker.bindPopup(buildPopup(node), { maxWidth: 280 });
      markerLayer.addLayer(marker);
    }
+
+    // Add observer markers
+    if (filters.observer) {
+      for (const obs of observers) {
+        if (!obs.lat || !obs.lon) continue;
+        const icon = makeMarkerIcon('observer');
+        const marker = L.marker([obs.lat, obs.lon], {
+          icon,
+          alt: `${obs.name || obs.id} (observer)`,
+        });
+        marker.bindPopup(buildObserverPopup(obs), { maxWidth: 280 });
+        markerLayer.addLayer(marker);
+      }
+    }
+  }
+
+  function buildObserverPopup(obs) {
+    const name = safeEsc(obs.name || obs.id || 'Unknown');
+    const iata = obs.iata ? `<span class="badge-region">${safeEsc(obs.iata)}</span>` : '';
+    const lastSeen = obs.last_seen ? timeAgo(obs.last_seen) : '—';
+    const packets = (obs.packet_count || 0).toLocaleString();
+    const loc = `${obs.lat.toFixed(5)}, ${obs.lon.toFixed(5)}`;
+    const roleBadge = `<span style="display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;background:${ROLE_COLORS.observer};color:#fff;">OBSERVER</span>`;
+
+    return `
+      <div class="map-popup" style="font-family:var(--font);min-width:180px;">
+        <h3 style="font-weight:700;font-size:14px;margin:0 0 4px;">${name}</h3>
+        ${roleBadge} ${iata}
+        <dl style="margin-top:8px;font-size:12px;">
+          <dt style="color:var(--text-muted);float:left;clear:left;width:80px;padding:2px 0;">Location</dt>
+          <dd style="margin-left:88px;padding:2px 0;">${loc}</dd>
+          <dt style="color:var(--text-muted);float:left;clear:left;width:80px;padding:2px 0;">Last Seen</dt>
+          <dd style="margin-left:88px;padding:2px 0;">${lastSeen}</dd>
+          <dt style="color:var(--text-muted);float:left;clear:left;width:80px;padding:2px 0;">Packets</dt>
+          <dd style="margin-left:88px;padding:2px 0;">${packets}</dd>
+        </dl>
+        <a href="#/observers/${encodeURIComponent(obs.id || obs.observer_id)}" style="display:block;margin-top:8px;font-size:12px;color:var(--accent);">View Detail →</a>
+      </div>`;
  }

  function buildPopup(node) {
--- a/public/nodes.js
+++ b/public/nodes.js
@@ -24,7 +24,7 @@
  let wsHandler = null;
  let detailMap = null;

-  const ROLE_COLORS = { repeater: '#3b82f6', room: '#6b7280', companion: '#22c55e', sensor: '#f59e0b' };
+  // ROLE_COLORS loaded from shared roles.js
  const TABS = [
    { key: 'all', label: 'All' },
    { key: 'repeater', label: 'Repeaters' },
@@ -107,9 +107,7 @@
      // Repeaters/rooms: flood advert every 12-24h, so degraded after 24h, silent after 72h
      // Companions/sensors: user-initiated adverts, shorter thresholds
      const role = (n.role || '').toLowerCase();
-      const isInfra = role === 'repeater' || role === 'room';
-      const degradedMs = isInfra ? 86400000 : 3600000;   // 24h : 1h
-      const silentMs = isInfra ? 259200000 : 86400000;    // 72h : 24h
+      const { degradedMs, silentMs } = getHealthThresholds(role);
      const statusLabel = statusAge < degradedMs ? '🟢 Active' : statusAge < silentMs ? '🟡 Degraded' : '🔴 Silent';

      body.innerHTML = `
@@ -426,9 +424,7 @@
    const lastHeard = stats.lastHeard;
    const statusAge = lastHeard ? (Date.now() - new Date(lastHeard).getTime()) : Infinity;
    const role = (n.role || '').toLowerCase();
-    const isInfra = role === 'repeater' || role === 'room';
-    const degradedMs = isInfra ? 86400000 : 3600000;
-    const silentMs = isInfra ? 259200000 : 86400000;
+    const { degradedMs, silentMs } = getHealthThresholds(role);
    const statusLabel = statusAge < degradedMs ? '🟢 Active' : statusAge < silentMs ? '🟡 Degraded' : '🔴 Silent';
    const totalPackets = stats.totalPackets || n.advert_count || 0;

--- a/public/observer-detail.js
+++ b/public/observer-detail.js
@@ -97,8 +97,8 @@

    // Health status
    const ago = obs.last_seen ? Date.now() - new Date(obs.last_seen).getTime() : Infinity;
-    const statusCls = ago < 600000 ? 'health-green' : ago < 3600000 ? 'health-yellow' : 'health-red';
-    const statusLabel = ago < 600000 ? 'Online' : ago < 3600000 ? 'Stale' : 'Offline';
+    const statusCls = ago < 600000 ? 'health-green' : ago < HEALTH_THRESHOLDS.nodeDegradedMs ? 'health-yellow' : 'health-red';
+    const statusLabel = ago < 600000 ? 'Online' : ago < HEALTH_THRESHOLDS.nodeDegradedMs ? 'Stale' : 'Offline';

    el.innerHTML = `
      <div class="obs-info-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:20px">
--- a/public/observers.js
+++ b/public/observers.js
@@ -69,10 +69,9 @@
  }

  function sparkBar(count, max) {
-    const aria = `role="meter" aria-valuenow="${count}" aria-valuemin="0" aria-valuemax="${max}" aria-label="Packet rate"`;
-    if (max === 0) return `<div class="spark-bar" ${aria}><div class="spark-fill" style="width:0"></div></div>`;
+    if (max === 0) return `<span class="text-muted">0/hr</span>`;
    const pct = Math.min(100, Math.round((count / max) * 100));
-    return `<div class="spark-bar" ${aria}><div class="spark-fill" style="width:${pct}%"></div><span class="spark-label">${count}/hr</span></div>`;
+    return `<span style="display:inline-flex;align-items:center;gap:6px;white-space:nowrap"><span style="display:inline-block;width:60px;height:12px;background:var(--border);border-radius:3px;overflow:hidden;vertical-align:middle"><span style="display:block;height:100%;width:${pct}%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:3px"></span></span><span style="font-size:11px">${count}/hr</span></span>`;
  }

  function render() {
@@ -113,7 +112,7 @@
            <td>${o.iata ? `<span class="badge-region">${o.iata}</span>` : '—'}</td>
            <td>${timeAgo(o.last_seen)}</td>
            <td>${(o.packet_count || 0).toLocaleString()}</td>
-            <td class="col-spark" style="max-width:none;overflow:visible;min-width:80px">${sparkBar(o.packetsLastHour || 0, maxPktsHr)}</td>
+            <td>${sparkBar(o.packetsLastHour || 0, maxPktsHr)}</td>
            <td>${uptimeStr(o.first_seen)}</td>
          </tr>`;
        }).join('')}</tbody>
--- a/public/packets.js
+++ b/public/packets.js
@@ -1090,11 +1090,10 @@
    return '<div class="byop-row"><span class="byop-key">' + key + '</span><span class="byop-val">' + val + '</span></div>';
  }

-  // Load regions from config
+  // Load regions from config API
  (async () => {
    try {
-      // We'll use a simple approach - hardcode from config
-      regionMap = {"SJC":"San Jose, US","SFO":"San Francisco, US","OAK":"Oakland, US","MRY":"Monterey, US","LAR":"Los Angeles, US"};
+      regionMap = await api('/config/regions', { ttl: 3600 });
    } catch {}
  })();

--- a/public/roles.js
+++ b/public/roles.js
@@ -0,0 +1,127 @@
+/* === MeshCore Analyzer — roles.js (shared config module) === */
+'use strict';
+
+/*
+ * Centralized roles, thresholds, tile URLs, and UI constants.
+ * Loaded BEFORE all page scripts via index.html.
+ * Defaults are set synchronously; server config overrides arrive via fetch.
+ */
+
+(function () {
+  // ─── Role definitions ───
+  window.ROLE_COLORS = {
+    repeater: '#dc2626', companion: '#2563eb', room: '#16a34a',
+    sensor: '#d97706', observer: '#8b5cf6', unknown: '#6b7280'
+  };
+
+  window.ROLE_LABELS = {
+    repeater: 'Repeaters', companion: 'Companions', room: 'Room Servers',
+    sensor: 'Sensors', observer: 'Observers'
+  };
+
+  window.ROLE_STYLE = {
+    repeater:  { color: '#dc2626', shape: 'diamond',  radius: 10, weight: 2 },
+    companion: { color: '#2563eb', shape: 'circle',   radius: 8,  weight: 2 },
+    room:      { color: '#16a34a', shape: 'square',   radius: 9,  weight: 2 },
+    sensor:    { color: '#d97706', shape: 'triangle', radius: 8,  weight: 2 },
+    observer:  { color: '#8b5cf6', shape: 'star',     radius: 11, weight: 2 }
+  };
+
+  window.ROLE_EMOJI = {
+    repeater: '◆', companion: '●', room: '■', sensor: '▲', observer: '★'
+  };
+
+  window.ROLE_SORT = ['repeater', 'companion', 'room', 'sensor', 'observer'];
+
+  // ─── Health thresholds (ms) ───
+  window.HEALTH_THRESHOLDS = {
+    infraDegradedMs: 86400000,   // 24h
+    infraSilentMs:   259200000,  // 72h
+    nodeDegradedMs:  3600000,    // 1h
+    nodeSilentMs:    86400000    // 24h
+  };
+
+  // Helper: get degraded/silent thresholds for a role
+  window.getHealthThresholds = function (role) {
+    var isInfra = role === 'repeater' || role === 'room';
+    return {
+      degradedMs: isInfra ? HEALTH_THRESHOLDS.infraDegradedMs : HEALTH_THRESHOLDS.nodeDegradedMs,
+      silentMs:   isInfra ? HEALTH_THRESHOLDS.infraSilentMs   : HEALTH_THRESHOLDS.nodeSilentMs
+    };
+  };
+
+  // ─── Tile URLs ───
+  window.TILE_DARK  = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
+  window.TILE_LIGHT = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
+
+  window.getTileUrl = function () {
+    var isDark = document.documentElement.getAttribute('data-theme') === 'dark' ||
+      (document.documentElement.getAttribute('data-theme') !== 'light' &&
+       window.matchMedia('(prefers-color-scheme: dark)').matches);
+    return isDark ? TILE_DARK : TILE_LIGHT;
+  };
+
+  // ─── SNR thresholds ───
+  window.SNR_THRESHOLDS = { excellent: 6, good: 0 };
+
+  // ─── Distance thresholds (km) ───
+  window.DIST_THRESHOLDS = { local: 50, regional: 200 };
+
+  // ─── MAX_HOP_DIST (degrees, ~200km ≈ 1.8°) ───
+  window.MAX_HOP_DIST = 1.8;
+
+  // ─── Result limits ───
+  window.LIMITS = {
+    topNodes: 15,
+    topPairs: 12,
+    topRingNodes: 8,
+    topSenders: 10,
+    topCollisionNodes: 10,
+    recentReplay: 8,
+    feedMax: 25
+  };
+
+  // ─── Performance thresholds ───
+  window.PERF_SLOW_MS = 100;
+
+  // ─── WebSocket reconnect delay (ms) ───
+  window.WS_RECONNECT_MS = 3000;
+
+  // ─── Cache invalidation debounce (ms) ───
+  window.CACHE_INVALIDATE_MS = 5000;
+
+  // ─── External URLs ───
+  window.EXTERNAL_URLS = {
+    flasher: 'https://flasher.meshcore.co.uk/'
+  };
+
+  // ─── Fetch server overrides ───
+  window.MeshConfigReady = fetch('/api/config/client').then(function (r) { return r.json(); }).then(function (cfg) {
+    if (cfg.roles) {
+      if (cfg.roles.colors) Object.assign(ROLE_COLORS, cfg.roles.colors);
+      if (cfg.roles.labels) Object.assign(ROLE_LABELS, cfg.roles.labels);
+      if (cfg.roles.style) {
+        for (var k in cfg.roles.style) ROLE_STYLE[k] = Object.assign(ROLE_STYLE[k] || {}, cfg.roles.style[k]);
+      }
+      if (cfg.roles.emoji) Object.assign(ROLE_EMOJI, cfg.roles.emoji);
+      if (cfg.roles.sort) window.ROLE_SORT = cfg.roles.sort;
+    }
+    if (cfg.healthThresholds) Object.assign(HEALTH_THRESHOLDS, cfg.healthThresholds);
+    if (cfg.tiles) {
+      if (cfg.tiles.dark) window.TILE_DARK = cfg.tiles.dark;
+      if (cfg.tiles.light) window.TILE_LIGHT = cfg.tiles.light;
+    }
+    if (cfg.snrThresholds) Object.assign(SNR_THRESHOLDS, cfg.snrThresholds);
+    if (cfg.distThresholds) Object.assign(DIST_THRESHOLDS, cfg.distThresholds);
+    if (cfg.maxHopDist != null) window.MAX_HOP_DIST = cfg.maxHopDist;
+    if (cfg.limits) Object.assign(LIMITS, cfg.limits);
+    if (cfg.perfSlowMs != null) window.PERF_SLOW_MS = cfg.perfSlowMs;
+    if (cfg.wsReconnectMs != null) window.WS_RECONNECT_MS = cfg.wsReconnectMs;
+    if (cfg.cacheInvalidateMs != null) window.CACHE_INVALIDATE_MS = cfg.cacheInvalidateMs;
+    if (cfg.externalUrls) Object.assign(EXTERNAL_URLS, cfg.externalUrls);
+    // Sync ROLE_STYLE colors with ROLE_COLORS
+    for (var role in ROLE_STYLE) {
+      if (ROLE_COLORS[role]) ROLE_STYLE[role].color = ROLE_COLORS[role];
+    }
+  }).catch(function () { /* use defaults */ });
+})();
--- a/scripts/validate.sh
+++ b/scripts/validate.sh
@@ -0,0 +1,30 @@
+#!/bin/sh
+# Pre-push validation — catches common JS errors before they hit prod
+set -e
+
+echo "=== Syntax check ==="
+node -c server.js
+for f in public/*.js; do node -c "$f"; done
+echo "✅ All JS files parse OK"
+
+echo "=== Checking for undefined common references ==="
+ERRORS=0
+
+# esc() should only exist inside IIFEs that define it, not in files that don't
+for f in public/live.js public/map.js public/home.js public/nodes.js public/channels.js public/observers.js; do
+  if grep -q '\besc(' "$f" 2>/dev/null && ! grep -q 'function esc' "$f" 2>/dev/null; then
+    REFS=$(grep -n '\besc(' "$f" | grep -v escapeHtml | grep -v "desc\|Esc\|resc\|safeEsc" || true)
+    if [ -n "$REFS" ]; then
+      echo "❌ $f uses esc() but doesn't define it:"
+      echo "$REFS"
+      ERRORS=$((ERRORS + 1))
+    fi
+  fi
+done
+
+if [ "$ERRORS" -gt 0 ]; then
+  echo "❌ $ERRORS validation error(s) found"
+  exit 1
+fi
+
+echo "✅ Validation passed"
--- a/server.js
+++ b/server.js
@@ -7,6 +7,23 @@ const mqtt = require('mqtt');
 const path = require('path');
 const config = require('./config.json');
 const decoder = require('./decoder');
+
+// Health thresholds — configurable with sensible defaults
+const _ht = config.healthThresholds || {};
+const HEALTH = {
+  infraDegradedMs: _ht.infraDegradedMs || 86400000,
+  infraSilentMs:   _ht.infraSilentMs   || 259200000,
+  nodeDegradedMs:  _ht.nodeDegradedMs  || 3600000,
+  nodeSilentMs:    _ht.nodeSilentMs    || 86400000
+};
+function getHealthMs(role) {
+  const isInfra = role === 'repeater' || role === 'room';
+  return {
+    degradedMs: isInfra ? HEALTH.infraDegradedMs : HEALTH.nodeDegradedMs,
+    silentMs:   isInfra ? HEALTH.infraSilentMs   : HEALTH.nodeSilentMs
+  };
+}
+const MAX_HOP_DIST_SERVER = config.maxHopDist || 1.8;
 const crypto = require('crypto');
 const PacketStore = require('./packet-store');

@@ -188,6 +205,35 @@ app.get('/api/config/cache', (req, res) => {
  res.json(config.cacheTTL || {});
 });

+// Expose all client-side config (roles, thresholds, tiles, limits, etc.)
+app.get('/api/config/client', (req, res) => {
+  res.json({
+    roles: config.roles || null,
+    healthThresholds: config.healthThresholds || null,
+    tiles: config.tiles || null,
+    snrThresholds: config.snrThresholds || null,
+    distThresholds: config.distThresholds || null,
+    maxHopDist: config.maxHopDist || null,
+    limits: config.limits || null,
+    perfSlowMs: config.perfSlowMs || null,
+    wsReconnectMs: config.wsReconnectMs || null,
+    cacheInvalidateMs: config.cacheInvalidateMs || null,
+    externalUrls: config.externalUrls || null
+  });
+});
+
+app.get('/api/config/regions', (req, res) => {
+  // Merge config regions with any IATA codes seen from observers
+  const regions = { ...(config.regions || {}) };
+  try {
+    const rows = db.db.prepare("SELECT DISTINCT iata FROM observers WHERE iata IS NOT NULL").all();
+    for (const r of rows) {
+      if (r.iata && !regions[r.iata]) regions[r.iata] = r.iata; // fallback to code itself
+    }
+  } catch {}
+  res.json(regions);
+});
+
 app.get('/api/perf', (req, res) => {
  const summary = {};
  for (const [path, ep] of Object.entries(perfStats.endpoints)) {
@@ -300,7 +346,7 @@ function geoDist(lat1, lon1, lat2, lon2) { return Math.sqrt((lat1 - lat2) ** 2 +
 // Sequential hop disambiguation: resolve 1-byte prefixes to best-matching nodes
 // Returns array of {hop, name, lat, lon, pubkey, ambiguous, unreliable} per hop
 function disambiguateHops(hops, allNodes) {
-  const MAX_HOP_DIST = 1.8; // ~200km
+  const MAX_HOP_DIST = MAX_HOP_DIST_SERVER;

  // Build prefix index on first call (cached on allNodes array)
  if (!allNodes._prefixIdx) {
@@ -958,8 +1004,7 @@ app.get('/api/nodes/network-status', (req, res) => {
    const ls = n.last_seen ? new Date(n.last_seen).getTime() : 0;
    const age = now - ls;
    const isInfra = r === 'repeater' || r === 'room';
-    const degradedMs = isInfra ? 86400000 : 3600000;
-    const silentMs = isInfra ? 259200000 : 86400000;
+    const { degradedMs, silentMs } = getHealthMs(r);
    if (age < degradedMs) active++;
    else if (age < silentMs) degraded++;
    else silent++;
@@ -1508,7 +1553,7 @@ app.get('/api/resolve-hops', (req, res) => {
  }

  // Sanity check: drop hops impossibly far from both neighbors (>200km ≈ 1.8°)
-  const MAX_HOP_DIST = 1.8;
+  const MAX_HOP_DIST = MAX_HOP_DIST_SERVER;
  for (let i = 0; i < hops.length; i++) {
    const pos = hopPositions[hops[i]];
    if (!pos) continue;
@@ -1663,10 +1708,13 @@ app.get('/api/observers', (req, res) => {
  const _c = cache.get('observers'); if (_c) return res.json(_c);
  const observers = db.getObservers();
  const oneHourAgo = new Date(Date.now() - 3600000).toISOString();
+  // Join observer location from nodes table (observers are nodes — same pubkey)
+  const nodeLocStmt = db.db.prepare("SELECT lat, lon, role FROM nodes WHERE public_key = ? COLLATE NOCASE");
  const result = observers.map(o => {
    const obsPackets = pktStore.byObserver.get(o.id) || [];
    const lastHour = { count: obsPackets.filter(p => p.timestamp > oneHourAgo).length };
-    return { ...o, packetsLastHour: lastHour.count };
+    const node = nodeLocStmt.get(o.id);
+    return { ...o, packetsLastHour: lastHour.count, lat: node?.lat || null, lon: node?.lon || null, nodeRole: node?.role || null };
  });
  const _oResult = { observers: result, server_time: new Date().toISOString() };
  cache.set('observers', _oResult, TTL.observers);
Author	SHA1	Message	Date
you	2feb2c5b94	fix: escapeHtml crashes on numbers — String(s) before .replace()	2026-03-20 19:25:48 +00:00
you	10b11106f6	ci: add pre-deploy JS validation — syntax check + undefined reference detection Validation runs BEFORE docker build. If it fails, deployment is blocked. No more broken code reaching production.	2026-03-20 19:24:11 +00:00
you	326d411c4a	fix: esc is not defined — use escapeHtml in live.js node detail	2026-03-20 19:23:20 +00:00
you	15a93d5ea4	feat: clickable nodes on live map with slide-in detail panel - Click any node marker to see name, role, status, location, stats - Heard By observers and recent packets shown - Links to full node detail and analytics pages - Slide-in panel from right with blur background, matches live page style - Uses shared ROLE_COLORS and HEALTH_THRESHOLDS	2026-03-20 19:21:30 +00:00
you	055467ca43	fix: live map legend uses shared ROLE_COLORS instead of hardcoded wrong colors	2026-03-20 19:17:57 +00:00
you	4f7b02a91c	fix: centralize hardcoded values — roles, thresholds, colors, tiles, limits — closes #104 - New public/roles.js shared module: ROLE_COLORS, ROLE_LABELS, ROLE_STYLE, ROLE_EMOJI, ROLE_SORT, HEALTH_THRESHOLDS, TILE_DARK/LIGHT, SNR_THRESHOLDS, DIST_THRESHOLDS, MAX_HOP_DIST, LIMITS — all configurable via /api/config/roles - Removed duplicate ROLE_COLORS from map.js, nodes.js, live.js, analytics.js - Removed duplicate health thresholds from nodes.js, home.js, observer-detail.js - Deduplicated CartoDB tile URLs (3 copies → 1 in roles.js) - Removed hardcoded region names from map.js and packets.js - channels.js uses ROLE_EMOJI/ROLE_LABELS instead of hardcoded emoji chains - server.js reads healthThresholds from config.json with defaults - Unknown roles get gray circle fallback instead of crashing	2026-03-20 17:36:41 +00:00
you	f0db317051	fix: observer locations case-insensitive match, regions from API not hardcoded - Observer ID is uppercase, node pubkey is lowercase — added COLLATE NOCASE - New /api/config/regions endpoint merges config regions + observed IATAs - map.js and packets.js fetch regions from API instead of hardcoded maps	2026-03-20 16:10:16 +00:00
you	9bf78bd28d	feat: add MRY (Monterey) to lincomatic MQTT topics	2026-03-20 15:29:37 +00:00
you	5fe275b3f8	fix: use region-specific MQTT topics instead of wildcards — saves bandwidth	2026-03-20 15:28:54 +00:00
you	74a08d99b0	fix: observer location from nodes table direct join — observer ID = node pubkey	2026-03-20 15:11:57 +00:00
you	76d63ffe75	feat: observers as map markers (purple stars) with computed locations - Removed dead 'MQTT Connected Only' checkbox (never worked) - Added 'observer' role type with purple star marker - Observer locations computed from average of nodes they've seen - Observer popup with name, IATA, packets, link to detail page - Role filter checkbox includes observers with count	2026-03-20 14:56:08 +00:00
you	157dc9a979	fix: spark bars use inline spans instead of div — immune to max-width:0 table crush The div-based spark bar was always getting crushed to 0px by table-layout:auto + max-width:0 on td. Inline spans with fixed width survive because they participate in text flow, not block layout.	2026-03-20 14:48:15 +00:00
you	2f07ae2e5c	fix: spark bar z-index so it renders above adjacent packet count cell	2026-03-20 14:39:48 +00:00
you	1f9cd3ead1	fix: add config.json mount to CI deploy workflow	2026-03-20 14:29:32 +00:00