newHEADmain

1 files changed, 552 insertions, 0 deletions

diff --git a/web/app.js b/web/app.js
new file mode 100644
index 0000000..6b909a3
--- /dev/null
+++ b/web/app.js
@@ -0,0 +1,552 @@
+'use strict';
+
+const $ = (id) => document.getElementById(id);
+const HIST_MAX = 3600;
+
+/* ---------- constellation identity (fixed categorical order) ---------- */
+const CONSTS = [
+  { id: 0, name: 'GPS', v: '--s1' },
+  { id: 6, name: 'GLONASS', v: '--s2' },
+  { id: 2, name: 'Galileo', v: '--s3' },
+  { id: 3, name: 'BeiDou', v: '--s4' },
+  { id: 5, name: 'QZSS', v: '--s5' },
+  { id: 1, name: 'SBAS', v: '--s6' },
+  { id: 7, name: 'NavIC', v: '--s7' },
+  { id: 4, name: 'IMES', v: '--s8' },
+];
+const CONST_BY_ID = Object.fromEntries(CONSTS.map((c, i) => [c.id, { ...c, order: i }]));
+function gnssOf(sat) {
+  if (sat.gnssid != null) return sat.gnssid;
+  const p = sat.PRN; // NMEA PRN fallbacks
+  if (p <= 32) return 0;
+  if (p <= 64 || (p >= 120 && p <= 158)) return 1;
+  if (p <= 96) return 6;
+  if (p >= 193 && p <= 202) return 5;
+  if (p >= 201 && p <= 237) return 3;
+  if (p >= 301 && p <= 336) return 2;
+  return 0;
+}
+const css = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+
+/* ---------- formatting ---------- */
+function sig(v) {
+  const a = Math.abs(v);
+  if (a === 0) return '0';
+  if (a >= 100) return a.toFixed(0);
+  if (a >= 10) return a.toFixed(1);
+  return a.toFixed(2);
+}
+function fmtSec(s, signed = true) {
+  if (s == null || !isFinite(s)) return '—';
+  const a = Math.abs(s);
+  let v, u;
+  if (a < 1e-6) { v = s * 1e9; u = 'ns'; }
+  else if (a < 1e-3) { v = s * 1e6; u = 'µs'; }
+  else if (a < 1) { v = s * 1e3; u = 'ms'; }
+  else { v = s; u = 's'; }
+  const sign = signed ? (v < 0 ? '−' : '+') : '';
+  return `${sign}${sig(v)} ${u}`;
+}
+function fmtDur(sec) {
+  if (sec == null || sec < 0) return '—';
+  if (sec < 60) return `${Math.round(sec)} s`;
+  if (sec < 3600) return `${Math.round(sec / 60)} m`;
+  if (sec < 86400) return `${(sec / 3600).toFixed(1)} h`;
+  return `${(sec / 86400).toFixed(1)} d`;
+}
+const pad = (n, w = 2) => String(n).padStart(w, '0');
+const num = (v, d) => (v == null || !isFinite(v) ? '—' : v.toFixed(d));
+function fmtLat(v) { return v == null ? '—' : `${Math.abs(v).toFixed(4)}° ${v >= 0 ? 'N' : 'S'}`; }
+function fmtLon(v) { return v == null ? '—' : `${Math.abs(v).toFixed(4)}° ${v >= 0 ? 'E' : 'W'}`; }
+function utcHM(tSec) { const d = new Date(tSec * 1000); return `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`; }
+function utcHMS(tSec) { const d = new Date(tSec * 1000); return `${utcHM(tSec)}:${pad(d.getUTCSeconds())}`; }
+function setText(id, text) { const el = $(id); if (el && el.textContent !== text) el.textContent = text; }
+
+/* ---------- browser ↔ server clock offset ---------- */
+let clockOff = null; // ms to add to Date.now() to get server time
+let clockRtt = null;
+async function syncClock() {
+  let best = null;
+  for (let i = 0; i < 6; i++) {
+    try {
+      const t0 = Date.now();
+      const r = await fetch('api/time', { cache: 'no-store' });
+      const j = await r.json();
+      const t1 = Date.now();
+      const s = { rtt: t1 - t0, off: j.now * 1000 - (t0 + t1) / 2 };
+      if (!best || s.rtt < best.rtt) best = s;
+    } catch { /* ignore */ }
+  }
+  if (best) { clockOff = best.off; clockRtt = best.rtt; }
+}
+
+/* ---------- state ---------- */
+let latest = null;
+let history = [];
+let range = 600;
+let lastMsgAt = 0;
+let gpsLeap = 18; // GPS−UTC; replaced by receiver value if reported
+
+/* ---------- clock banner (animation frame) ---------- */
+let lastWholeSec = -1;
+function tickClock() {
+  const ms = Date.now() + (clockOff ?? 0);
+  const d = new Date(ms);
+  setText('utc-hms', `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`);
+  const whole = Math.floor(ms / 1000);
+  if (whole !== lastWholeSec) {
+    lastWholeSec = whole;
+    setText('utc-date', d.toLocaleDateString(undefined, { timeZone: 'UTC', weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }));
+    setText('local-time', d.toLocaleString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false, timeZoneName: 'short' }) + ', ' +
+      d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }));
+    const jan1 = Date.UTC(d.getUTCFullYear(), 0, 1);
+    setText('doy', pad(Math.floor((ms - jan1) / 86400000) + 1, 3));
+    setText('mjd', (ms / 86400000 + 40587).toFixed(5));
+    setText('unix', String(whole));
+    const gps = whole - 315964800 + gpsLeap;
+    const wk = Math.floor(gps / 604800);
+    setText('gpswk', `${wk} / ${gps - wk * 604800}`);
+    if (clockOff != null) {
+      const o = -clockOff; // browser − server
+      const dir = Math.abs(o) < 0.5 ? 'in step' : o > 0 ? 'ahead' : 'behind';
+      setText('browser-off', `${Math.abs(o).toFixed(0)} ms ${dir} (±${Math.ceil(clockRtt / 2)} ms)`);
+    }
+    // stale stream detection
+    if (lastMsgAt && Date.now() - lastMsgAt > 5000) setConn('dead', 'no data — reconnecting');
+  }
+  requestAnimationFrame(tickClock);
+}
+
+function setConn(cls, text) {
+  $('conn-dot').className = `dot ${cls}`;
+  setText('conn-text', text);
+}
+
+/* ---------- health assessment ---------- */
+function assess(s) {
+  const reasons = [];
+  let level = 0; // 0 good, 1 warning, 2 critical
+  const bump = (l, r) => { level = Math.max(level, l); reasons.push(r); };
+  const t = s.chrony.tracking;
+  const src = s.chrony.sources || [];
+  if (!t) bump(2, 'chronyd is not responding');
+  else {
+    if (t.leap === 'Not synchronised' || t.stratum === 0 || t.stratum >= 16) bump(2, 'chronyd is not synchronised');
+    const sel = src.find((x) => x.state === '*');
+    if (!sel) bump(2, 'No source selected');
+    else if (sel.name !== s.ppsRefId) bump(1, `Using ${sel.name} instead of PPS`);
+    const a = Math.abs(t.systemOffset);
+    if (a > 1e-3) bump(2, `System offset ${fmtSec(t.systemOffset, false)}`);
+    else if (a > 100e-6) bump(1, `System offset ${fmtSec(t.systemOffset, false)}`);
+    const pps = src.find((x) => x.name === s.ppsRefId);
+    if (pps && (pps.reach & 0x7) !== 0x7) bump(1, 'Recent PPS samples missed');
+  }
+  const g = s.gps;
+  if (!g.connected) bump(1, 'gpsd unreachable');
+  else if (!g.tpv || g.tpv.mode < 2) bump(1, 'No GPS fix');
+  else if (g.tpvAge != null && g.tpvAge > 5) bump(1, `No GPS report for ${Math.round(g.tpvAge)} s`);
+  const text = level === 0 ? 'Locked to PPS' : level === 1 ? 'Degraded' : 'Not synchronised';
+  return { cls: ['good', 'warning', 'critical'][level], text, reasons };
+}
+
+/* ---------- render: chrony ---------- */
+function renderChrony(s) {
+  const c = s.chrony;
+  const t = c.tracking;
+  const err = $('chrony-err');
+  err.hidden = !c.error; err.textContent = c.error || '';
+  if (t) {
+    setText('t-sys', fmtSec(Math.abs(t.systemOffset), false));
+    setText('t-sys-dir', t.systemOffset >= 0 ? 'slow of NTP time' : 'fast of NTP time');
+    setText('t-rms', fmtSec(t.rmsOffset, false));
+    setText('t-ref', t.refName || t.refId);
+    setText('t-stratum', `stratum ${t.stratum} · refid ${t.refId}`);
+    setText('t-last', fmtSec(t.lastOffset));
+    setText('t-freq', `${Math.abs(t.freqPpm).toFixed(3)} ppm ${t.freqPpm >= 0 ? 'slow' : 'fast'}`);
+    setText('t-resid', `${t.residFreqPpm >= 0 ? '+' : '−'}${Math.abs(t.residFreqPpm).toFixed(3)} ppm`);
+    setText('t-skew', `${t.skewPpm.toFixed(3)} ppm`);
+    setText('t-rdelay', fmtSec(t.rootDelay, false));
+    setText('t-rdisp', fmtSec(t.rootDispersion, false));
+    setText('t-upd', `${t.updateInterval.toFixed(1)} s`);
+    setText('t-reftime', t.refTime ? `${utcHMS(t.refTime)} UTC (${fmtDur(s.now - t.refTime)} ago)` : '—');
+    setText('leap', t.leap);
+  }
+  document.querySelectorAll('.srv').forEach((el) => { el.hidden = !c.server; });
+  if (c.server) setText('t-srv', `${c.server.ratePerSec.toFixed(1)}/s · ${c.server.ntpReceived.toLocaleString()} total`);
+
+  const rows = (c.sources || []).map((x) => {
+    const type = x.mode === '#' ? 'refclock' : x.mode === '=' ? 'peer' : 'server';
+    let dots = '';
+    for (let b = 7; b >= 0; b--) dots += `<i class="${(x.reach >> b) & 1 ? 'on' : ''}"></i>`;
+    const stateTxt = x.state === '-' ? '−' : x.state;
+    return `<tr class="${x.state === '*' ? 'selected' : ''}">
+      <td class="state">${stateTxt}</td>
+      <td class="name-cell" title="${esc(x.name)}">${esc(x.name)}</td>
+      <td>${x.mode === '#' ? type : `${type === 'peer' ? 'peer' : 'NTP'} s${x.stratum}`}</td>
+      <td class="num">${fmtDur(2 ** x.poll)}</td>
+      <td><span class="reach" title="reach ${x.reach.toString(8).padStart(3, '0')} (oldest → newest)">${dots}</span></td>
+      <td class="num">${x.lastRx < 0 ? '—' : fmtDur(x.lastRx)}</td>
+      <td class="num mono">${fmtSec(x.offset)}<div class="sub2">±${fmtSec(x.error, false)}${x.stdDev != null ? ` · σ ${fmtSec(x.stdDev, false)}` : ''}</div></td>
+    </tr>`;
+  });
+  $('sources').innerHTML = rows.join('') || '<tr><td colspan="7" class="muted">No sources</td></tr>';
+}
+function esc(s) { return String(s).replace(/[&<>"]/g, (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[ch])); }
+
+/* ---------- render: GPS ---------- */
+const FIX = ['Unknown', 'No fix', '2D', '3D'];
+const GSTATUS = ['', 'GPS', 'DGPS', 'RTK fixed', 'RTK float', 'Dead reckoning', 'GNSS + DR', 'Surveyed time', 'Simulated', 'P(Y)'];
+function renderGPS(s) {
+  const g = s.gps;
+  const err = $('gps-err');
+  err.hidden = g.connected; err.textContent = g.connected ? '' : `gpsd: ${g.error || 'not connected'}`;
+  const p = g.tpv || {};
+  setText('g-fix', g.tpv ? `${FIX[p.mode] ?? '—'}${p.mode >= 2 ? ' fix' : ''}` : '—');
+  setText('g-status', GSTATUS[p.status] || (g.tpv ? 'GPS' : ' '));
+  setText('g-used', g.uSat != null ? String(g.uSat) : '—');
+  setText('g-seen', g.nSat != null ? String(g.nSat) : '—');
+  setText('g-ept', p.ept != null ? `±${fmtSec(p.ept, false)}` : '—');
+  setText('g-lat', fmtLat(p.lat));
+  setText('g-lon', fmtLon(p.lon));
+  setText('g-alt', p.altMSL != null ? `${p.altMSL.toFixed(1)} m${p.altHAE != null ? ` (HAE ${p.altHAE.toFixed(1)} m)` : ''}` : '—');
+  setText('g-eph', p.eph != null ? `±${p.eph.toFixed(1)} m horiz${p.epv != null ? ` · ±${p.epv.toFixed(1)} m vert` : ''}` : '—');
+  const d = g.dop || {};
+  setText('g-dop', `${num(d.pdop, 2)} / ${num(d.hdop, 2)} / ${num(d.vdop, 2)} / ${num(d.tdop, 2)}`);
+  setText('g-toff', g.toff ? fmtSec(g.toff.latency, false) : '—');
+  setText('g-time', p.time ? `${p.time.replace('T', ' ').replace('Z', ' UTC')}${g.tpvAge != null && g.tpvAge > 3 ? ` (${Math.round(g.tpvAge)} s old)` : ''}` : '—');
+  const dev = g.device;
+  setText('g-dev', dev ? `${dev.driver || 'unknown'}${dev.subtype ? ' ' + dev.subtype.split(',')[0] : ''} on ${dev.path}${dev.bps ? ` @ ${dev.bps}` : ''}${g.version ? ` · gpsd ${g.version}` : ''}` : '—');
+  if (p.leapseconds) gpsLeap = p.leapseconds;
+  renderSky(g.satellites || []);
+}
+
+/* ---------- sky plot ---------- */
+function skyBase() {
+  let h = '';
+  for (const el of [0, 30, 60]) h += `<circle class="ring${el === 0 ? ' horizon' : ''}" r="${90 - el}"/>`;
+  for (let az = 0; az < 360; az += 45) {
+    const r = (az * Math.PI) / 180;
+    h += `<line class="spoke" x1="0" y1="0" x2="${(90 * Math.sin(r)).toFixed(1)}" y2="${(-90 * Math.cos(r)).toFixed(1)}"/>`;
+  }
+  h += `<text class="card-pt" x="0" y="-101">N</text><text class="card-pt" x="101" y="0">E</text><text class="card-pt" x="0" y="101">S</text><text class="card-pt" x="-101" y="0">W</text>`;
+  h += `<text class="el" x="2" y="-58">30°</text><text class="el" x="2" y="-28">60°</text>`;
+  return h + '<g id="sky-sats"></g>';
+}
+function sortSats(sats) {
+  return [...sats].sort((a, b) => {
+    const ca = CONST_BY_ID[gnssOf(a)]?.order ?? 99, cb = CONST_BY_ID[gnssOf(b)]?.order ?? 99;
+    return ca - cb || (a.svid ?? a.PRN) - (b.svid ?? b.PRN);
+  });
+}
+function satLabel(x) {
+  const c = CONST_BY_ID[gnssOf(x)];
+  return `${c ? c.name : 'Sat'} ${x.svid ?? x.PRN}`;
+}
+function renderSky(sats) {
+  const sorted = sortSats(sats);
+  // sky
+  let h = '';
+  // draw unused first so used sit on top
+  for (const x of [...sorted].sort((a, b) => a.used - b.used)) {
+    if (x.az == null || x.el == null || x.el < 0) continue;
+    const c = CONST_BY_ID[gnssOf(x)] || CONSTS[0];
+    const r = (90 * (90 - x.el)) / 90, a = (x.az * Math.PI) / 180;
+    const cx = (r * Math.sin(a)).toFixed(1), cy = (-r * Math.cos(a)).toFixed(1);
+    const col = `var(${c.v})`;
+    const style = x.used ? `fill:${col}` : `stroke:${col}`;
+    h += `<circle class="sat${x.used ? '' : ' hollow'}" cx="${cx}" cy="${cy}" r="${x.used ? 6 : 5}" style="${style}" data-tip="${esc(satTip(x))}"/>`;
+    h += `<text class="prn" x="${cx}" y="${(+cy + 14).toFixed(1)}">${x.svid ?? x.PRN}</text>`;
+  }
+  const g = $('sky-sats');
+  if (g) g.innerHTML = h;
+
+  // constellation table
+  const counts = new Map();
+  for (const x of sorted) {
+    const id = gnssOf(x);
+    const e = counts.get(id) || { used: 0, seen: 0 };
+    e.seen++; if (x.used) e.used++;
+    counts.set(id, e);
+  }
+  $('const').innerHTML = [...counts.entries()]
+    .sort((a, b) => (CONST_BY_ID[a[0]]?.order ?? 99) - (CONST_BY_ID[b[0]]?.order ?? 99))
+    .map(([id, e]) => {
+      const c = CONST_BY_ID[id] || { name: `gnss ${id}`, v: '--muted' };
+      return `<tr><td><i style="background:var(${c.v})"></i>${c.name}</td><td class="num">${e.used}</td><td class="num">${e.seen}</td></tr>`;
+    }).join('') || '<tr><td colspan="3" class="muted">No satellites</td></tr>';
+
+  // SNR bars
+  const MAX = 50;
+  $('snr').innerHTML = sorted.map((x) => {
+    const c = CONST_BY_ID[gnssOf(x)] || CONSTS[0];
+    const ss = x.ss ?? 0;
+    const hPct = Math.max(0, Math.min(1, ss / MAX)) * 100;
+    return `<div class="col${x.used ? '' : ' unused'}" data-tip="${esc(satTip(x))}">
+      <span class="v">${ss ? Math.round(ss) : ''}</span>
+      <div class="track"><div class="fill" style="height:${hPct}%;background:var(${c.v})"></div></div>
+      <span class="lab">${x.svid ?? x.PRN}</span></div>`;
+  }).join('');
+}
+function satTip(x) {
+  return `${satLabel(x)}${x.svid != null && x.svid !== x.PRN ? ` (PRN ${x.PRN})` : ''}|Signal|${x.ss != null ? x.ss.toFixed(0) + ' dB-Hz' : '—'}|Elevation|${x.el != null ? x.el.toFixed(0) + '°' : '—'}|Azimuth|${x.az != null ? x.az.toFixed(0) + '°' : '—'}|Status|${x.used ? 'used in fix' : 'tracked only'}`;
+}
+
+/* ---------- tooltip ---------- */
+const tip = $('tip');
+function showTip(html, clientX, clientY) {
+  tip.innerHTML = html;
+  tip.hidden = false;
+  const w = tip.offsetWidth, h = tip.offsetHeight;
+  let x = clientX + 14, y = clientY + 14;
+  if (x + w > window.innerWidth - 8) x = clientX - w - 14;
+  if (y + h > window.innerHeight - 8) y = clientY - h - 14;
+  tip.style.left = `${Math.max(8, x)}px`;
+  tip.style.top = `${Math.max(8, y)}px`;
+}
+function hideTip() { tip.hidden = true; }
+document.addEventListener('pointerover', (e) => {
+  const el = e.target.closest?.('[data-tip]');
+  if (!el) return;
+  const parts = el.dataset.tip.split('|');
+  let h = `<div class="t">${esc(parts[0])}</div>`;
+  for (let i = 1; i + 1 < parts.length; i += 2) h += `<div class="row">${esc(parts[i])}<b>${esc(parts[i + 1])}</b></div>`;
+  showTip(h, e.clientX, e.clientY);
+});
+document.addEventListener('pointermove', (e) => {
+  if (!tip.hidden && e.target.closest?.('[data-tip]')) showTip(tip.innerHTML, e.clientX, e.clientY);
+});
+document.addEventListener('pointerout', (e) => { if (e.target.closest?.('[data-tip]')) hideTip(); });
+
+/* ---------- line charts (canvas) ---------- */
+class LineChart {
+  constructor(fig, series, fmtY, fmtTip) {
+    this.fig = fig; this.series = series; this.fmtY = fmtY; this.fmtTip = fmtTip || fmtY;
+    this.canvas = document.createElement('canvas');
+    fig.appendChild(this.canvas);
+    if (series.length > 1) {
+      fig.querySelector('figcaption').innerHTML += series.map((s) => ` <span class="lg"><i style="background:var(${s.v})"></i>${s.label}</span>`).join('');
+    }
+    this.hoverX = null;
+    this.canvas.addEventListener('pointermove', (e) => { this.hoverX = e.offsetX; this.draw(); this.tip(e); });
+    this.canvas.addEventListener('pointerleave', () => { this.hoverX = null; hideTip(); this.draw(); });
+  }
+  draw() {
+    const cv = this.canvas, dpr = window.devicePixelRatio || 1;
+    const W = cv.clientWidth, H = cv.clientHeight;
+    if (!W || !H) return;
+    if (cv.width !== Math.round(W * dpr) || cv.height !== Math.round(H * dpr)) { cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr); }
+    const ctx = cv.getContext('2d');
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, W, H);
+
+    const tMax = history.length ? history[history.length - 1].t : Date.now() / 1000;
+    const tMin = tMax - range;
+    const pts = history.filter((p) => p.t >= tMin);
+    let lo = Infinity, hi = -Infinity;
+    for (const p of pts) for (const s of this.series) { const v = p[s.key]; if (v != null) { lo = Math.min(lo, v); hi = Math.max(hi, v); } }
+    if (!isFinite(lo)) { lo = 0; hi = 1; }
+    if (this.series[0].zero) { lo = Math.min(lo, 0); hi = Math.max(hi, 0); }
+    if (hi - lo < 1e-12) { const d = Math.abs(hi) * 0.1 || 1e-9; lo -= d; hi += d; }
+    const ticks = niceTicks(lo, hi, 4);
+    lo = Math.min(lo, ticks[0]); hi = Math.max(hi, ticks[ticks.length - 1]);
+
+    ctx.font = '11px system-ui, -apple-system, "Segoe UI", sans-serif';
+    const labels = ticks.map((v) => this.fmtY(v));
+    const padL = Math.ceil(Math.max(...labels.map((l) => ctx.measureText(l).width))) + 8;
+    const padR = 6, padT = 6, padB = 18;
+    const pw = W - padL - padR, ph = H - padT - padB;
+    const x = (t) => padL + ((t - tMin) / range) * pw;
+    const y = (v) => padT + (1 - (v - lo) / (hi - lo)) * ph;
+    this.geom = { x, y, tMin, padL, pw, pts };
+
+    // grid + y labels
+    ctx.fillStyle = css('--muted'); ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+    ticks.forEach((v, i) => {
+      const yy = Math.round(y(v)) + 0.5;
+      ctx.strokeStyle = v === 0 ? css('--axis') : css('--grid'); ctx.lineWidth = 1;
+      ctx.beginPath(); ctx.moveTo(padL, yy); ctx.lineTo(W - padR, yy); ctx.stroke();
+      ctx.fillText(labels[i], padL - 6, yy);
+    });
+    // x labels
+    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+    const step = range <= 600 ? 120 : range <= 1800 ? 600 : 900;
+    for (let t = Math.ceil(tMin / step) * step; t <= tMax; t += step) {
+      const xx = x(t);
+      if (xx < padL + 14 || xx > W - padR - 14) continue;
+      ctx.fillText(utcHM(t), xx, H - padB + 4);
+    }
+    // lines
+    for (const s of this.series) {
+      ctx.strokeStyle = css(s.v); ctx.lineWidth = 2; ctx.lineJoin = 'round'; ctx.lineCap = 'round';
+      ctx.beginPath();
+      let pen = false, prevT = null;
+      for (const p of pts) {
+        const v = p[s.key];
+        if (v == null || (prevT != null && p.t - prevT > 5)) pen = false;
+        if (v != null) { if (pen) ctx.lineTo(x(p.t), y(v)); else ctx.moveTo(x(p.t), y(v)); pen = true; }
+        prevT = p.t;
+      }
+      ctx.stroke();
+    }
+    // crosshair
+    const hp = this.hoverPoint();
+    if (hp) {
+      const xx = Math.round(x(hp.t)) + 0.5;
+      ctx.strokeStyle = css('--axis'); ctx.lineWidth = 1;
+      ctx.beginPath(); ctx.moveTo(xx, padT); ctx.lineTo(xx, padT + ph); ctx.stroke();
+      for (const s of this.series) {
+        const v = hp[s.key]; if (v == null) continue;
+        ctx.fillStyle = css(s.v); ctx.strokeStyle = css('--surface'); ctx.lineWidth = 2;
+        ctx.beginPath(); ctx.arc(x(hp.t), y(v), 4, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
+      }
+    }
+  }
+  hoverPoint() {
+    if (this.hoverX == null || !this.geom || !this.geom.pts.length) return null;
+    const { tMin, padL, pw, pts } = this.geom;
+    const t = tMin + ((this.hoverX - padL) / pw) * range;
+    let best = null, bd = Infinity;
+    for (const p of pts) { const d = Math.abs(p.t - t); if (d < bd) { bd = d; best = p; } }
+    return bd <= range / 50 + 2 ? best : null;
+  }
+  tip(e) {
+    const hp = this.hoverPoint();
+    if (!hp) { hideTip(); return; }
+    let h = `<div class="t">${utcHMS(hp.t)} UTC</div>`;
+    for (const s of this.series) h += `<div class="row"><i style="background:var(${s.v})"></i>${s.label}<b>${hp[s.key] == null ? '—' : this.fmtTip(hp[s.key])}</b></div>`;
+    showTip(h, e.clientX, e.clientY);
+  }
+}
+function niceTicks(lo, hi, n) {
+  const span = hi - lo;
+  const raw = span / n;
+  const mag = 10 ** Math.floor(Math.log10(raw));
+  const step = [1, 2, 2.5, 5, 10].map((m) => m * mag).find((s) => span / s <= n) || 10 * mag;
+  const out = [];
+  for (let v = Math.floor(lo / step) * step; v <= hi + step * 0.5; v += step) out.push(Math.abs(v) < step * 1e-6 ? 0 : v);
+  return out;
+}
+
+const charts = [
+  new LineChart($('ch-offset'), [
+    { key: 'sys', label: 'System (+ = slow)', v: '--s1', zero: true },
+    { key: 'pps', label: 'PPS sample', v: '--s2' },
+  ], (v) => fmtSec(v).replace('+', '')),
+  new LineChart($('ch-freq'), [{ key: 'freq', label: 'Frequency', v: '--s1' }], (v) => v.toFixed(3)),
+  new LineChart($('ch-sats'), [
+    { key: 'seen', label: 'In view', v: '--s1' },
+    { key: 'used', label: 'Used', v: '--s2' },
+  ], (v) => String(Math.round(v * 10) / 10), (v) => String(v)),
+];
+function drawCharts() { if (!document.hidden) charts.forEach((c) => c.draw()); }
+window.addEventListener('resize', drawCharts);
+document.querySelectorAll('.range button').forEach((b) => b.addEventListener('click', () => {
+  range = +b.dataset.range;
+  document.querySelectorAll('.range button').forEach((o) => o.classList.toggle('on', o === b));
+  drawCharts();
+}));
+
+/* ---------- main update ---------- */
+function onSnapshot(s) {
+  latest = s;
+  lastMsgAt = Date.now();
+  setConn('live', 'live');
+  if (clockOff == null) clockOff = s.now * 1000 - Date.now();
+  setText('host', s.host);
+  setText('ver', s.version);
+  document.title = `${s.host} · GPS Clock`;
+
+  const a = assess(s);
+  $('status').className = `status ${a.cls}`;
+  setText('status-text', a.text);
+  $('status-reasons').innerHTML = a.reasons.map((r) => `<li>${esc(r)}</li>`).join('');
+
+  renderChrony(s);
+  renderGPS(s);
+
+  if (s.point && (!history.length || s.point.t > history[history.length - 1].t)) {
+    history.push(s.point);
+    if (history.length > HIST_MAX) history.splice(0, history.length - HIST_MAX);
+  }
+  drawCharts();
+}
+
+function connect() {
+  const es = new EventSource('events');
+  es.onmessage = (e) => { try { onSnapshot(JSON.parse(e.data)); } catch (err) { console.error(err); } };
+  es.onerror = () => setConn('dead', 'disconnected — retrying');
+}
+
+/* ---------- theme toggle ---------- */
+(function theme() {
+  const root = document.documentElement;
+  try { const t = localStorage.getItem('theme'); if (t) root.dataset.theme = t; } catch { /* ignore */ }
+  $('theme').addEventListener('click', () => {
+    const dark = root.dataset.theme ? root.dataset.theme === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches;
+    root.dataset.theme = dark ? 'light' : 'dark';
+    try { localStorage.setItem('theme', root.dataset.theme); } catch { /* ignore */ }
+    drawCharts();
+  });
+  matchMedia('(prefers-color-scheme: dark)').addEventListener?.('change', drawCharts);
+})();
+
+/* ---------- hover help ---------- */
+const HELP = {
+  'utc-hms': 'Current UTC from this server, kept in step with the server clock (not your browser clock).',
+  'local-time': 'The same instant in this browser\'s local time zone.',
+  doy: 'Day of the year in UTC (001–366). Common in logs and scientific timestamps.',
+  mjd: 'Modified Julian Date: days since 1858-11-17 00:00 UTC, with a fractional day. Used in astronomy and timing labs.',
+  unix: 'Seconds since 1970-01-01 00:00 UTC, not counting leap seconds. This is what most computers store.',
+  gpswk: 'GPS week number and seconds into that week (Time of Week). GPS time ignores leap seconds, so it is currently ahead of UTC by the GPS−UTC leap offset.',
+  leap: 'chronyd\'s leap-second state. "Normal" is expected. "Insert/Delete second" means a leap second is scheduled for the end of the day. "Not synchronised" means chronyd has no usable reference.',
+  'browser-off': 'How far this browser\'s clock differs from the server, measured over HTTP. ± is the uncertainty from network round-trip time. This affects only this page, not the server.',
+  status: 'Overall health. "Locked to PPS" means chronyd is steering to the PPS reference with small offset and the GPS has a fix. "Degraded" means it still works but something needs attention (reasons listed below). "Not synchronised" means the clock is not being disciplined.',
+  't-sys': 'How far chronyd estimates the system clock is from true time right now. It is slewing the clock to remove this. For a PPS-disciplined server this should be well under 10 µs.',
+  't-rms': 'Long-term average of measured offsets (root mean square). Shows how tightly the clock is held over time, independent of the current moment.',
+  't-ref': 'The source chronyd is currently synchronised to and its stratum. Stratum 1 means directly attached to a reference clock such as GPS/PPS. Refid is the short identifier other NTP clients see.',
+  't-last': 'Offset measured on the most recent clock update. Shows how much the clock needed correcting at that moment.',
+  't-freq': 'How fast or slow the system\'s crystal oscillator would run without correction, in parts per million. 1 ppm ≈ 86 ms per day. It changes slowly with temperature.',
+  't-resid': 'Difference between the frequency the reference suggests and the one in use. Near zero means chronyd\'s frequency estimate is accurate.',
+  't-skew': 'Estimated error bound on the frequency. Smaller means chronyd is more confident about the oscillator\'s rate.',
+  't-rdelay': 'Total network round-trip delay back to the stratum-1 reference. For a local PPS refclock this is essentially zero.',
+  't-rdisp': 'Total accumulated uncertainty back to the reference. Together with root delay it bounds how wrong the clock could be (max error ≈ dispersion + delay/2). Clients use it to pick the best server.',
+  't-upd': 'Seconds between the last two clock corrections. Tracks the reference\'s polling interval (about 16 s for a typical PPS refclock). A much longer value suggests missed samples or a fallback to slower NTP sources.',
+  't-reftime': 'When chronyd last took a measurement from the reference. This should always be recent (within about one update interval). If it falls behind, chronyd is running on its own oscillator without fresh data.',
+  't-srv': 'NTP requests this server is answering for clients: current rate and total since chronyd started.',
+  'g-fix': 'GPS position fix. A 3D fix (4+ satellites) is best. Timing works with a 2D fix, and a surveyed-in timing receiver may keep good time with fewer. "No fix" means PPS output may be unreliable or absent.',
+  'g-used': 'Satellites used in the fix, out of those the receiver is tracking. More used satellites give better timing stability; at least 4 is needed for a 3D fix.',
+  'g-ept': 'The receiver\'s estimate of the error in its reported time. This applies to the NMEA serial time, which is only coarse. PPS supplies the precise second edge.',
+  'g-lat': 'Antenna latitude reported by the receiver.',
+  'g-lon': 'Antenna longitude reported by the receiver.',
+  'g-alt': 'Antenna altitude above mean sea level (MSL). HAE is height above the WGS-84 ellipsoid, which GPS uses internally.',
+  'g-eph': 'Estimated 95% position uncertainty, horizontal and vertical. Large values mean a weak or poorly spread set of satellites.',
+  'g-dop': 'Dilution of precision: how satellite geometry amplifies errors in Position, Horizontal, Vertical and Time. Lower is better; under 2 is excellent and over 5 is poor. TDOP matters most for timing.',
+  'g-toff': 'Delay from the top of the second to when the NMEA time message arrives over serial (gpsd TOFF). Useful for tuning the offset of an NMEA refclock; it does not affect PPS.',
+  'g-time': 'UTC time in the receiver\'s latest fix report. Flags how old it is if reports stop arriving.',
+  'g-dev': 'gpsd driver, device path and serial speed of the receiver, and the gpsd version.',
+};
+function applyHelp() {
+  for (const [id, text] of Object.entries(HELP)) {
+    const el = $(id);
+    if (!el) continue;
+    const tile = el.closest('.tile');
+    if (tile && id !== 'status') { tile.title = text; continue; }
+    el.title = text;
+    if (el.tagName === 'DD' && el.previousElementSibling?.tagName === 'DT') el.previousElementSibling.title = text;
+  }
+}
+
+/* ---------- boot ---------- */
+applyHelp();
+$('sky').innerHTML = skyBase();
+requestAnimationFrame(tickClock);
+Promise.all([
+  fetch('api/history', { cache: 'no-store' }).then((r) => r.json()).catch(() => null),
+  fetch('api/status', { cache: 'no-store' }).then((r) => (r.ok ? r.json() : null)).catch(() => null),
+]).then(([h, s]) => {
+  if (Array.isArray(h)) history = h;
+  if (s && !latest) onSnapshot(s); else drawCharts();
+}).finally(connect);
+syncClock();
+setInterval(syncClock, 5 * 60 * 1000);
+document.addEventListener('visibilitychange', drawCharts);