feat: neighbors section in node detail page (#482) — milestone 5 (#510)

## Summary

Add a "Neighbors" section to the node detail page, showing first-hop
neighbor relationships derived from the neighbor affinity graph (M2
API).

Part of #482 — Milestone 5 per
[spec](https://github.com/Kpa-clawbot/CoreScope/blob/spec/482-neighbor-affinity/docs/specs/neighbor-affinity-graph.md).

## What's Added

### Full-screen detail view (`#/nodes/{pubkey}`)
- New `node-full-card` section between "Heard By" and "Paths Through
This Node"
- Table with columns: **Neighbor** (linked), **Role** (badge),
**Score**, **Obs**, **Last Seen**, **Conf** (confidence indicator)
- Confidence indicators per spec:
  - 🟢 HIGH: auto-resolved, ≥3 observations, score ≥ 0.5
  - 🟡 MEDIUM: 2+ observations
  - 🔴 LOW: single observation
  - ⚠️ AMBIGUOUS: multiple candidates
- Click neighbor name → navigate to their detail page
- 📍 Map button per resolved neighbor row

### Condensed panel view (right panel)
- Shows top 5 neighbors only
- "View all N neighbors →" link navigates to full detail page with
`?section=node-neighbors`

### Deep linking
- `?section=node-neighbors` auto-scrolls to the neighbors section (uses
existing scroll mechanism)

### Data fetching
- `GET /api/nodes/{pubkey}/neighbors` via existing `api()` helper
- Cached per-node for 5 minutes (panel lifetime)
- Loading spinner, empty state, error state

### States
- **Loading**: spinner with "Loading neighbors…"
- **Empty**: "No neighbor data available yet. Neighbor relationships are
built from observed packet paths over time."
- **Error**: "Could not load neighbor data"

## Tests
- 2 new Playwright E2E tests:
  1. Section exists with correct table columns (or empty state)
  2. Loading spinner visible during fetch

## Files Changed
- `public/nodes.js` — neighbor section rendering + data fetching helpers
- `test-e2e-playwright.js` — 2 new E2E tests

---------

Co-authored-by: you <you@example.com>

public/nodes.js

@@ -175,6 +175,110 @@
     return `<div style="font-size:11px;color:var(--text-muted);margin:-2px 0 6px;padding:6px 10px;background:var(--surface-2);border-radius:4px;border-left:3px solid var(--status-yellow)">Adverts show varying hash sizes (<strong>${sizes.join('-byte, ')}-byte</strong>). This is a <a href="https://github.com/meshcore-dev/MeshCore/commit/fcfdc5f" target="_blank" style="color:var(--accent)">known bug</a> where automatic adverts ignore the configured multibyte path setting. Fixed in <a href="https://github.com/meshcore-dev/MeshCore/releases/tag/repeater-v1.14.1" target="_blank" style="color:var(--accent)">repeater v1.14.1</a>.</div>`;
   }
 
+  // ─── Neighbor section helpers ───────────────────────────────────────────────
+
+  // Cache: pubkey → { data, ts }
+  var _neighborCache = {};
+
+  function getConfidenceIndicator(entry) {
+    if (entry.ambiguous) return { icon: '⚠️', label: 'AMBIGUOUS', cls: 'confidence-ambiguous' };
+    if (entry.count <= 1) return { icon: '🔴', label: 'LOW', cls: 'confidence-low' };
+    if (entry.score >= 0.5 && entry.count >= 3) return { icon: '🟢', label: 'HIGH', cls: 'confidence-high' };
+    return { icon: '🟡', label: 'MEDIUM', cls: 'confidence-medium' };
+  }
+
+  function renderNeighborRows(neighbors, limit) {
+    var sorted = neighbors.slice().sort(function(a, b) {
+      return (b.score || b.affinity || 0) - (a.score || a.affinity || 0);
+    });
+    var items = limit ? sorted.slice(0, limit) : sorted;
+    return items.map(function(nb) {
+      var conf = getConfidenceIndicator(nb);
+      var name = nb.name || (nb.prefix + '… (unknown)');
+      var nameHtml = nb.pubkey
+        ? '<a href="#/nodes/' + encodeURIComponent(nb.pubkey) + '">' + escapeHtml(name) + '</a>'
+        : '<span class="text-muted">' + escapeHtml(name) + '</span>';
+      var role = nb.role || '—';
+      var roleBadge = nb.role
+        ? '<span class="badge" style="background:' + (ROLE_COLORS[nb.role] || 'var(--surface-2)') + ';color:#fff;font-size:10px">' + escapeHtml(role) + '</span>'
+        : '<span class="text-muted">—</span>';
+      var scoreTitle = 'Observations: ' + nb.count;
+      if (nb.avg_snr != null) scoreTitle += ' · Avg SNR: ' + Number(nb.avg_snr).toFixed(1) + ' dB';
+      var showOnMap = nb.pubkey
+        ? ' <button class="btn-link neighbor-show-map" data-pubkey="' + escapeHtml(nb.pubkey) + '" style="font-size:11px;padding:1px 6px;white-space:nowrap">📍 Map</button>'
+        : '';
+      return '<tr>' +
+        '<td style="font-weight:600">' + nameHtml + '</td>' +
+        '<td>' + roleBadge + '</td>' +
+        '<td title="' + escapeHtml(scoreTitle) + '">' + Number(nb.score).toFixed(2) + '</td>' +
+        '<td>' + nb.count + '</td>' +
+        '<td>' + renderNodeTimestampHtml(nb.last_seen) + '</td>' +
+        '<td><span title="' + conf.label + '">' + conf.icon + '</span></td>' +
+        '<td style="text-align:right">' + showOnMap + '</td>' +
+        '</tr>';
+    }).join('');
+  }
+
+  function renderNeighborTable(neighbors, limit) {
+    return '<table class="data-table" style="font-size:12px">' +
+      '<thead><tr><th>Neighbor</th><th>Role</th><th>Score</th><th>Obs</th><th>Last Seen</th><th>Conf</th><th></th></tr></thead>' +
+      '<tbody>' + renderNeighborRows(neighbors, limit) + '</tbody></table>';
+  }
+
+  function fetchAndRenderNeighbors(pubkey, containerId, opts) {
+    opts = opts || {};
+    var limit = opts.limit || 0;
+    var headerSelector = opts.headerSelector;
+    var viewAllPubkey = opts.viewAllPubkey;
+
+    // Check cache
+    var cached = _neighborCache[pubkey];
+    if (cached && (Date.now() - cached.ts < 300000)) { // 5 min cache
+      renderNeighborData(cached.data, containerId, limit, headerSelector, viewAllPubkey);
+      return;
+    }
+
+    api('/nodes/' + encodeURIComponent(pubkey) + '/neighbors', { ttl: CLIENT_TTL.nodeDetail }).then(function(data) {
+      _neighborCache[pubkey] = { data: data, ts: Date.now() };
+      renderNeighborData(data, containerId, limit, headerSelector, viewAllPubkey);
+    }).catch(function() {
+      var el = document.getElementById(containerId);
+      if (el) el.innerHTML = '<div class="text-muted" style="padding:8px">Could not load neighbor data</div>';
+    });
+  }
+
+  function renderNeighborData(data, containerId, limit, headerSelector, viewAllPubkey) {
+    var el = document.getElementById(containerId);
+    if (!el) return;
+    if (!data || !data.neighbors || !data.neighbors.length) {
+      el.innerHTML = '<div class="text-muted" style="padding:8px">No neighbor data available yet. Neighbor relationships are built from observed packet paths over time.</div>';
+      if (headerSelector) {
+        var h = document.querySelector(headerSelector);
+        if (h) h.textContent = 'Neighbors (0)';
+      }
+      return;
+    }
+    if (headerSelector) {
+      var h = document.querySelector(headerSelector);
+      if (h) h.textContent = 'Neighbors (' + data.neighbors.length + ')';
+    }
+    var html = renderNeighborTable(data.neighbors, limit);
+    if (limit && data.neighbors.length > limit && viewAllPubkey) {
+      html += '<div style="margin-top:6px;text-align:right"><a href="#/nodes/' + encodeURIComponent(viewAllPubkey) + '?section=node-neighbors" style="font-size:12px">View all ' + data.neighbors.length + ' neighbors →</a></div>';
+    }
+    el.innerHTML = html;
+
+    // Wire up "Show on Map" buttons via event delegation
+    el.addEventListener('click', function(e) {
+      var btn = e.target.closest('.neighbor-show-map');
+      if (!btn) return;
+      var pk = btn.getAttribute('data-pubkey');
+      if (pk) location.hash = '#/map?node=' + encodeURIComponent(pk);
+    });
+  }
+
+  // ─── End neighbor helpers ─────────────────────────────────────────────────
+
   let directNode = null; // set when navigating directly to #/nodes/:pubkey
 
   let regionChangeHandler = null;
@@ -347,6 +451,11 @@
           </table>
         </div>` : ''}
 
+        <div class="node-full-card" id="node-neighbors">
+          <h4 id="fullNeighborsHeader">Neighbors</h4>
+          <div id="fullNeighborsContent"><div class="text-muted" style="padding:8px"><span class="spinner"></span> Loading neighbors…</div></div>
+        </div>
+
         <div class="node-full-card" id="fullPathsSection">
           <h4>Paths Through This Node</h4>
           <div id="fullPathsContent"><div class="text-muted" style="padding:8px"><span class="spinner"></span> Loading paths…</div></div>
@@ -427,6 +536,11 @@
         } catch {}
       }
 
+      // Fetch neighbors for this node (full-screen view)
+      fetchAndRenderNeighbors(n.public_key, 'fullNeighborsContent', {
+        headerSelector: '#fullNeighborsHeader'
+      });
+
       // Fetch paths through this node (full-screen view)
       api('/nodes/' + encodeURIComponent(n.public_key) + '/paths', { ttl: CLIENT_TTL.nodeDetail }).then(pathData => {
         const el = document.getElementById('fullPathsContent');
@@ -819,6 +933,11 @@
           </div>
         </div>` : ''}
 
+        <div class="node-detail-section" id="panelNeighborsSection">
+          <h4 id="panelNeighborsHeader">Neighbors</h4>
+          <div id="panelNeighborsContent"><div class="text-muted" style="padding:8px"><span class="spinner"></span> Loading neighbors…</div></div>
+        </div>
+
         <div class="node-detail-section" id="pathsSection">
           <h4>Paths Through This Node</h4>
           <div id="pathsContent"><div class="text-muted" style="padding:8px"><span class="spinner"></span> Loading paths…</div></div>
@@ -889,6 +1008,13 @@
       } catch {}
     }
 
+    // Fetch neighbors for this node (condensed panel — top 5)
+    fetchAndRenderNeighbors(n.public_key, 'panelNeighborsContent', {
+      limit: 5,
+      headerSelector: '#panelNeighborsHeader',
+      viewAllPubkey: n.public_key
+    });
+
     // Fetch paths through this node
     api('/nodes/' + encodeURIComponent(n.public_key) + '/paths', { ttl: CLIENT_TTL.nodeDetail }).then(pathData => {
       const el = document.getElementById('pathsContent');

test-e2e-playwright.js

@@ -1308,6 +1308,7 @@ async function run() {
     await page.evaluate(() => localStorage.removeItem('cs-theme-overrides'));
   });
 
+<<<<<<< HEAD
   // --- Group: Show Neighbors (#484 fix) ---
 
   await test('Show Neighbors populates neighborPubkeys from affinity API', async () => {
@@ -1452,6 +1453,64 @@ async function run() {
     await page.unroute(`**/api/nodes/${testPubkey}/neighbors*`);
     await page.unroute(`**/api/nodes/${testPubkey}/paths*`);
   });
+  // ─── Neighbor section tests ───────────────────────────────────────────────
+
+  await test('Node detail: neighbors section exists with correct columns', async () => {
+    // Navigate to a node detail page (use the first node in the list)
+    await page.goto(BASE + '/#/nodes');
+    await page.waitForSelector('#nodesBody tr[data-key]', { timeout: 10000 });
+    // Get the first node's pubkey from the row's data-key attribute
+    const pubkey = await page.$eval('#nodesBody tr[data-key]', el => el.dataset.key);
+    await page.goto(BASE + '/#/nodes/' + pubkey);
+    await page.waitForSelector('#node-neighbors', { timeout: 10000 });
+    // Check the section exists
+    const header = await page.$eval('#fullNeighborsHeader', el => el.textContent);
+    assert(header.startsWith('Neighbors'), 'Header should start with "Neighbors", got: ' + header);
+    // Wait for content to load (either table or empty state)
+    await page.waitForFunction(() => {
+      const el = document.getElementById('fullNeighborsContent');
+      return el && !el.innerHTML.includes('spinner');
+    }, { timeout: 10000 });
+    const hasTable = await page.$('#fullNeighborsContent .data-table');
+    if (hasTable) {
+      // Check columns
+      const headers = await page.$$eval('#fullNeighborsContent thead th', ths => ths.map(t => t.textContent));
+      assert(headers.includes('Neighbor'), 'Should have Neighbor column');
+      assert(headers.includes('Role'), 'Should have Role column');
+      assert(headers.includes('Score'), 'Should have Score column');
+      assert(headers.includes('Obs'), 'Should have Obs column');
+      assert(headers.includes('Last Seen'), 'Should have Last Seen column');
+      assert(headers.includes('Conf'), 'Should have Conf column');
+    } else {
+      // Empty state
+      const text = await page.$eval('#fullNeighborsContent', el => el.textContent);
+      assert(text.includes('No neighbor data') || text.includes('Could not load'), 'Should show empty or error state');
+    }
+  });
+
+  await test('Node detail: neighbors section loading state', async () => {
+    // Navigate to a node - the section should initially show a spinner
+    await page.goto(BASE + '/#/nodes');
+    await page.waitForSelector('#nodesBody tr[data-key]', { timeout: 10000 });
+    const pubkey = await page.$eval('#nodesBody tr[data-key]', el => el.dataset.key);
+    // Intercept API to delay response
+    await page.route('**/api/nodes/*/neighbors*', async route => {
+      await new Promise(r => setTimeout(r, 500));
+      await route.continue();
+    });
+    await page.goto(BASE + '/#/nodes/' + pubkey);
+    // Check spinner appears
+    const spinnerVisible = await page.waitForSelector('#fullNeighborsContent .spinner', { timeout: 5000 }).then(() => true).catch(() => false);
+    assert(spinnerVisible, 'Loading spinner should be visible initially');
+    // Wait for loading to finish
+    await page.waitForFunction(() => {
+      const el = document.getElementById('fullNeighborsContent');
+      return el && !el.innerHTML.includes('spinner');
+    }, { timeout: 15000 });
+    await page.unroute('**/api/nodes/*/neighbors*');
+  });
+
+  // ─── End neighbor section tests ───────────────────────────────────────────
 
   // Extract frontend coverage if instrumented server is running
   try {