From a9732e64aedcd1f1a194591b49a702f557c2f87d Mon Sep 17 00:00:00 2001
From: Kpa-clawbot <kpaclawbot@outlook.com>
Date: Mon, 20 Apr 2026 21:45:42 -0700
Subject: [PATCH] fix(nodes): render clock-skew section in side panel (#813)
 (#814)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #813

## Root cause
The Node detail **side panel** (`renderDetail()`,
`public/nodes.js:1145`) was missing both the `#node-clock-skew`
placeholder div and the `loadClockSkew()` IIFE loader. Those exist only
in the **full-screen** detail page (`loadFullNode`, lines 498 / 632), so
any node opened via deep link or click in the listing — which uses the
side panel — showed no clock-skew UI even when
`/api/nodes/{pk}/clock-skew` returned rich data.

## Fix
Mirror the full-screen template branch and IIFE in `renderDetail`:
- Add `<div class="node-detail-section skew-detail-section"
id="node-clock-skew" style="display:none">` to the side-panel template
(right above Observers).
- Add an async `loadClockSkewPanel()` IIFE after the panel `innerHTML`
is set, using the same severity/badge/drift/sparkline rendering and the
`severity === 'no_clock'` branch the full-screen view uses.

No new helpers — reuses existing window globals (`formatSkew`,
`formatDrift`, `renderSkewBadge`, `renderSkewSparkline`).

## Verification
- Syntax check: `node -c public/nodes.js` ✓
- `node test-frontend-helpers.js` → 553/553 ✓
- Browser: staging runs master so I couldn't validate the deployed UI
yet. Manual repro after deploy:
1. Open `https://analyzer.00id.net/#/nodes`, click any node with a known
skew (e.g. Puppy Solar `a8dde6d7…` shows `⏰ -23d 8h` in listing).
2. Side panel should show a **⏰ Clock Skew** section with median skew,
severity badge, drift line, and sparkline.
3. For `severity === 'no_clock'` (e.g. SKCE_RS `14531bd2…`), section
shows "No Clock" instead of skew value.

---------

Co-authored-by: you <you@example.com>
---
 public/nodes.js | 67 ++++++++++++++++++++++++++++---------------------
 1 file changed, 39 insertions(+), 28 deletions(-)

diff --git a/public/nodes.js b/public/nodes.js
index 2547541..fd69754 100644
--- a/public/nodes.js
+++ b/public/nodes.js
@@ -628,34 +628,9 @@
         headerSelector: '#fullNeighborsHeader'
       });
 
-      // #690 — Clock Skew detail section
-      (async function loadClockSkew() {
-        var container = document.getElementById('node-clock-skew');
-        if (!container) return;
-        try {
-          var cs = await api('/nodes/' + encodeURIComponent(n.public_key) + '/clock-skew', { ttl: 30000 });
-          if (!cs || !cs.severity) return;
-          container.style.display = '';
-          var severityColor = SKEW_SEVERITY_COLORS[cs.severity] || 'var(--text-muted)';
-          var severityLabel = SKEW_SEVERITY_LABELS[cs.severity] || cs.severity;
-          var driftHtml = cs.driftPerDaySec ? '<div style="font-size:12px;color:var(--text-muted);margin-top:2px">Drift: ' + formatDrift(cs.driftPerDaySec) + '</div>' : '';
-          var sparkHtml = renderSkewSparkline(cs.samples, 200, 32);
-          var skewDisplay = cs.severity === 'no_clock'
-            ? '<span style="font-size:18px;font-weight:700;color:var(--text-muted)">No Clock</span>'
-            : '<span style="font-size:18px;font-weight:700;font-family:var(--mono)">' + formatSkew(cs.medianSkewSec) + '</span>';
-          container.innerHTML =
-            '<h4 style="margin:0 0 6px">⏰ Clock Skew</h4>' +
-            '<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">' +
-              skewDisplay +
-              renderSkewBadge(cs.severity, cs.medianSkewSec) +
-              (cs.calibrated ? ' <span style="font-size:10px;color:var(--text-muted)" title="Observer-calibrated">✓ calibrated</span>' : '') +
-            '</div>' +
-            driftHtml +
-            (sparkHtml ? '<div class="skew-sparkline-wrap" style="margin-top:8px">' + sparkHtml + '<div style="font-size:10px;color:var(--text-muted)">Skew over time (' + (cs.samples || []).length + ' samples)</div></div>' : '');
-        } catch (e) {
-          // Non-fatal — section stays hidden
-        }
-      })();
+      // #690 — Clock Skew detail section (full-screen view)
+      loadClockSkewInto(document.getElementById('node-clock-skew'), n.public_key);
+
 
       // Affinity debug panel — show if debugAffinity is enabled
       (function loadAffinityDebug() {
@@ -812,6 +787,36 @@
   let _allNodes = null; // cached full node list
   let _fleetSkew = null; // cached clock skew map: pubkey → {severity, medianSkewSec, ...}
 
+  /**
+   * Fetch per-node clock skew and render into the given container element.
+   * Shared between the full-screen detail page and the side panel (#813, #690).
+   * No-op if the container is missing, the API errors, or the response lacks severity.
+   */
+  async function loadClockSkewInto(container, pubkey) {
+    if (!container) return;
+    try {
+      var cs = await api('/nodes/' + encodeURIComponent(pubkey) + '/clock-skew', { ttl: 30000 });
+      if (!cs || !cs.severity) return;
+      container.style.display = '';
+      var driftHtml = cs.driftPerDaySec ? '<div style="font-size:12px;color:var(--text-muted);margin-top:2px">Drift: ' + formatDrift(cs.driftPerDaySec) + '</div>' : '';
+      var sparkHtml = renderSkewSparkline(cs.samples, 200, 32);
+      var skewDisplay = cs.severity === 'no_clock'
+        ? '<span style="font-size:18px;font-weight:700;color:var(--text-muted)">No Clock</span>'
+        : '<span style="font-size:18px;font-weight:700;font-family:var(--mono)">' + formatSkew(cs.medianSkewSec) + '</span>';
+      container.innerHTML =
+        '<h4 style="margin:0 0 6px">⏰ Clock Skew</h4>' +
+        '<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">' +
+          skewDisplay +
+          renderSkewBadge(cs.severity, cs.medianSkewSec) +
+          (cs.calibrated ? ' <span style="font-size:10px;color:var(--text-muted)" title="Observer-calibrated">✓ calibrated</span>' : '') +
+        '</div>' +
+        driftHtml +
+        (sparkHtml ? '<div class="skew-sparkline-wrap" style="margin-top:8px">' + sparkHtml + '<div style="font-size:10px;color:var(--text-muted)">Skew over time (' + (cs.samples || []).length + ' samples)</div></div>' : '');
+    } catch (e) {
+      // Non-fatal — section stays hidden
+    }
+  }
+
   /** Fetch fleet clock skew once, return map keyed by pubkey */
   async function getFleetSkew() {
     if (_fleetSkew) return _fleetSkew;
@@ -1194,6 +1199,8 @@
           </dl>
         </div>
 
+        <div class="node-detail-section skew-detail-section" id="node-clock-skew" style="display:none"></div>
+
         ${observers.length ? `<div class="node-detail-section">
           ${(() => { const regions = [...new Set(observers.map(o => o.iata).filter(Boolean))]; return regions.length ? `<div style="margin-bottom:6px;font-size:12px"><strong>Regions:</strong> ${regions.join(', ')}</div>` : ''; })()}
           <h4>Heard By (${observers.length} observer${observers.length > 1 ? 's' : ''})</h4>
@@ -1287,6 +1294,10 @@
       viewAllPubkey: n.public_key
     });
 
+    // #813 — Clock Skew section in side panel (mirrors full-screen view)
+    loadClockSkewInto(document.getElementById('node-clock-skew'), 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');