blockyard 0.0.9 → 0.1.0

package/public/js/mining.js

@@ -16,7 +16,8 @@
 // fees.chunk/chunkweight -- so the block being built is assembled from the mempool the
 // monitor already reads, and costs the node no call at all (server/collect/gbt.js).
 
-import { paint, COL } from './charts.js';
+import { paint, COL, lineChart } from './charts.js';
+import { INK } from './theme.js';   // the pie's labels and slice seams follow the theme
 import { blockTreemap, mempoolTreemap, rateColor as rateBucketColor } from './goggles.js';
 import { loadSettings, spaceOptions } from './settings.js';
 // 2026-09-10: the block and the pool now draw as lit solids on a square-packed
@@ -1051,44 +1052,321 @@ export function renderMining(s, state, h) {
   h.nextBlock?.();
   blockFlow(document.getElementById('mnFlow'), flowArgs(s, state), h.fmt);
   packagesView(document.getElementById('mnPackages'), a?.nextBlock?.packages, h.fmt);
-  const nb = a?.nextBlock ?? null;
-  h.mempoolDetail?.();
-  const mp = state?.mempoolDist ?? s?.mempool ?? {};
-  drawPoolViewer(h.canvas('gnMempoolTreemap'), s, state);
-  const mnote = document.getElementById('gnMempoolNote');
-  if (mnote) {
-    const cells = mp.cells ?? [];
-    const tail = cells.find((c) => c.aggregate) ?? null;
-    const total = mp.totalVsize ?? 0;
-    const drawn = cells.length - (tail ? 1 : 0);
-    if (cells.length) {
-      const parts = [`${fmtNum(drawn, h)} drawn`];
-      if (tail) parts.push(`+ 1 aggregate of ${fmtNum(tail.aggregate, h)} smaller ones`);
-      if (mp.cellCount != null) parts.push(`= ${fmtNum(mp.cellCount, h)} transactions as at the poll`);
-      if (mp.fetchedAt != null) parts.push(`${Math.round((Date.now() - mp.fetchedAt) / 1000)}s ago`);
-      const fits = total <= 1_000_000
-        ? '<b>everything waiting fits in a single block</b>'
-        : 'the line sits where one block runs out and everything right of it waits';
-      mnote.innerHTML = `${parts.join(', ')}; ${fmtNum(total, h)} vB waiting. One block is 1,000,000 vB, so ${fits}.`
-        + ' Ordered by feerate, because that is the order a miner takes them; colour is what each transaction pays.'
-        + (mp.stale ? ' <span class="warn">Last poll failed; this picture may be old.</span>' : '');
-    } else if (mp.stale) {
-      mnote.innerHTML = '<span class="warn">Detail stale</span> — the last poll of the full pool failed. Anything drawn above is the previous reading.';
-    } else if (mp.count != null && mp.count > 0) {
-      mnote.innerHTML = `<span class="warn">Cells not loaded yet</span> — ${fmtNum(mp.count, h)} transactions are waiting; the full pool is polled on the 20 s tier and this page has not received it.`;
-    } else if (mp.count === 0) {
-      mnote.textContent = 'The mempool is empty: nothing is waiting, so there is nothing to draw.';
-    } else {
-      mnote.textContent = 'Nothing to draw yet — the full pool is polled on the 20 s tier, not every second.';
-    }
-  }
+  // (the Mempool space viewer left this page on 2026-09-15 -- it is on Overview, Block space and
+  // Mempool -- and with it the full-pool poll this page used to ask for)
   feeLandscape(h.canvas('mnFeeLandscape'), a?.nextBlock ?? null, h.fmt);
   poolTable(document.getElementById('mnPools'), a, h.fmt);
+  networkPanels(s?.network ?? null, h);
+  const recent = document.getElementById('mnRecent');
+  if (recent) { const html = recentBlocksHtml(a, h.fmt, { limit: 8 }); if (recent.__html !== html) { recent.innerHTML = html; recent.__html = html; } }
+  renderExpand(s, h);
   const el = document.getElementById('mnCoverage');
   if (el) el.innerHTML = coveragePanel(a, h);
   applyMiningStyles(document);
 }
 
+// THE NETWORK ROW (2026-09-15): reward stats, the difficulty period, a week of pools as a donut,
+// a year of hashrate, the adjustments table. Everything is from the snapshot's `network`, which
+// collect/network.js fills from the node alone; a figure it has not gathered yet is a dash and
+// the note says how far the week of coinbases has got.
+const DONUT_COLORS = ['#e8306a', '#8b3fd9', '#5b4fd6', '#3a7be0', '#2f9ee6', '#26b8c8', '#22b7a0', '#3cba6c', '#8bc34a', '#c9d02a', '#f0c419', '#f39c1f', '#ee7b2f', '#c7c9d1', '#8d93a1'];
+function stat(k, v, s = '', cls = '') {
+  return `<div class="ns"><span class="k">${k}</span><span class="v ${cls}">${v}</span>${s ? `<span class="s">${s}</span>` : ''}</div>`;
+}
+function signed(pct, dp = 2) {
+  if (pct == null || !Number.isFinite(pct)) return { text: '–', cls: '' };
+  return { text: `${pct >= 0 ? '▴ +' : '▾ '}${pct.toFixed(dp)}%`, cls: pct >= 0 ? 'up' : 'down' };
+}
+function shortDate(ms) {
+  if (!Number.isFinite(ms)) return '–';
+  return new Date(ms).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+}
+function inWords(sec) {
+  if (!Number.isFinite(sec)) return '–';
+  const d = sec / 86400;
+  if (d < 1) return `~${Math.max(1, Math.round(sec / 3600))} hours`;
+  if (d < 60) return `~${Math.round(d)} days`;
+  const y = Math.floor(d / 365.25), rest = Math.round(d - y * 365.25);
+  return y ? `~${y} year${y > 1 ? 's' : ''}, ${rest} days` : `~${Math.round(d)} days`;
+}
+function agoWords(ms, now = Date.now()) {
+  const d = (now - ms) / 86400000;
+  if (d < 1) return `${Math.max(1, Math.round(d * 24))} hours ago`;
+  if (d < 28) return `${Math.round(d)} days ago`;
+  return `${Math.round(d / 7)} weeks ago`;
+}
+function tera(d) { return d == null || !Number.isFinite(d) ? '–' : `${(d / 1e12).toFixed(2)}T`; }
+
+// the spot price for the dollar lines, asked for at most once a minute while the page is
+// painted, and only ever the cached one (/api/price never starts the exchange polling)
+const PRICE = { usd: null, at: 0, askedAt: 0, busy: false, off: false };
+function askPrice(h) {
+  const now = Date.now();
+  if (PRICE.busy || now - PRICE.askedAt < 60_000 || typeof h.api !== 'function') return;
+  PRICE.busy = true; PRICE.askedAt = now;
+  h.api('/api/price').then((d) => { PRICE.usd = d?.usd ?? null; PRICE.at = d?.at ?? now; PRICE.off = d?.polling === false || d?.enabled === false; }).catch(() => {}).finally(() => { PRICE.busy = false; h.render?.(); });
+}
+const usd = (v) => (v == null || !Number.isFinite(v) ? '' : `$${v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`);
+
+// RECENT BLOCKS, as mempool.space lists them (height, pool, reward, fees): the attributed window
+// the ledger already carries, the reward being the height's subsidy plus the block's fees
+const SATS = 100_000_000;
+export function subsidyAt(height) {
+  if (!Number.isFinite(height) || height < 0) return null;
+  const halvings = Math.floor(height / 210_000);
+  if (halvings >= 64) return 0;
+  let sat = 50 * SATS;
+  for (let i = 0; i < halvings; i++) sat = Math.floor(sat / 2);
+  return sat;
+}
+export function recentBlocksHtml(a, F, { limit = 8, now = Date.now() } = {}) {
+  const rows = (a?.recent ?? []).slice(0, limit);
+  if (!rows.length) return '<div class="note tiny faint">no blocks attributed yet</div>';
+  const esc = F.esc;
+  return `<table class="t"><thead><tr><th>Height</th><th>Pool</th><th>Mined</th><th class="r">Reward</th><th class="r">Fees</th></tr></thead><tbody>${rows.map((r) => {
+    const name = r.poolLabel ?? r.poolName ?? r.poolKey ?? '–';
+    const sub = subsidyAt(r.height), reward = sub != null && r.totalfee != null ? sub + r.totalfee : null;
+    return `<tr><td><a href="#explorer/block/${r.height}">#${F.num(r.height)}</a></td><td title="${esc(r.tagText ?? '')}">${esc(String(name).length > 22 ? `${String(name).slice(0, 21)}…` : name)}</td><td>${r.at ? F.ago(r.at, now) : '–'}</td><td class="r">${reward != null ? `${(reward / SATS).toFixed(3)} BTC` : '–'}</td><td class="r">${r.totalfee != null ? `${(r.totalfee / SATS).toFixed(4)} BTC` : '–'}</td></tr>`;
+  }).join('')}</tbody></table>`;
+}
+
+// "VIEW MORE »" (operator, 2026-09-15, of mempool.space: "the 'View more >>' that open up a panel
+// to see a full screen view of just that panel"): one of four cards, full screen, drawn from the
+// same snapshot every frame while open. Esc, the scrim or the button close it.
+const EXPAND = { kind: null, s: null, h: null };
+const EXPAND_TITLE = { pools: ['Pools', 'the last week’s blocks, by coinbase'], hashrate: ['Hashrate & difficulty', 'a year, one sample a day'], blocks: ['Recent blocks', 'the attributed window, newest first'], adjustments: ['Adjustments', 'each period’s first block against the one before'] };
+export function openExpand(kind) {
+  const wrap = document.getElementById('expandWrap');
+  if (!wrap || !EXPAND_TITLE[kind]) return;
+  EXPAND.kind = kind;
+  const [t, src] = EXPAND_TITLE[kind];
+  const title = document.getElementById('expandTitle'), s = document.getElementById('expandSrc'), body = document.getElementById('expandBody');
+  if (title) title.textContent = t;
+  if (s) s.textContent = src;
+  if (body) {
+    body.innerHTML = kind === 'pools' ? '<div class="netstats" id="xpStats"></div><canvas class="chart donut" id="xpDonut"></canvas><div id="xpTable"></div>'
+      : kind === 'hashrate' ? '<div class="netstats" id="xpStats"></div><canvas class="chart big" id="xpChart"></canvas>'
+      : '<div id="xpTable"></div>';
+  }
+  wrap.classList.remove('hidden');
+  if (EXPAND.s && EXPAND.h) renderExpand(EXPAND.s, EXPAND.h);
+}
+export function closeExpand() {
+  EXPAND.kind = null;
+  document.getElementById('expandWrap')?.classList.add('hidden');
+}
+let expandBound = false;
+function bindExpand() {
+  if (expandBound || typeof document === 'undefined' || typeof document.addEventListener !== 'function' || !document.getElementById('expandWrap')) return;
+  expandBound = true;
+  document.addEventListener('click', (e) => {
+    const a = e.target.closest?.('[data-expand]');
+    if (a) { e.preventDefault(); openExpand(a.dataset.expand); }
+  });
+  document.getElementById('expandClose')?.addEventListener('click', closeExpand);
+  document.getElementById('expandScrim')?.addEventListener('click', closeExpand);
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && EXPAND.kind) closeExpand(); });
+}
+export function renderExpand(s, h) {
+  EXPAND.s = s; EXPAND.h = h;
+  if (!EXPAND.kind) return;
+  const n = s?.network ?? null, F = h.fmt;
+  const put = (id, html) => { const el = document.getElementById(id); if (el && el.__html !== html) { el.innerHTML = html; el.__html = html; } };
+  if (EXPAND.kind === 'pools') {
+    const p = n?.pools ?? {};
+    put('xpStats', stat('Pools luck', p.luckPct == null ? '–' : `${p.luckPct.toFixed(2)}%`, p.blocks ? `${p.blocks} found · ${Math.round(p.expected)} expected` : '') + stat('Blocks (1w)', p.blocks ? F.num(p.blocks) : '–') + stat('Pools count', p.count ? String(p.count) : '–'));
+    poolDonut(h.canvas('xpDonut'), p.pools ?? [], F);
+    put('xpTable', (p.pools ?? []).length ? `<table class="t"><thead><tr><th>Pool</th><th class="r">Blocks</th><th class="r">Share</th><th>Labelled</th></tr></thead><tbody>${p.pools.map((x) => `<tr><td>${F.esc(x.name)}</td><td class="r">${F.num(x.blocks)}</td><td class="r">${x.sharePct.toFixed(2)}%</td><td>${x.labelled ? 'curated map' : '<span class="faint">coinbase text</span>'}</td></tr>`).join('')}</tbody></table>` : '');
+  } else if (EXPAND.kind === 'hashrate') {
+    const hr = n?.hashrate ?? {}, a = n?.adjustment;
+    put('xpStats', stat('Hashrate (1w)', hr.networkHashPs != null ? F.eh(hr.networkHashPs / 1e18) : '–', 'getnetworkhashps, 1008 blocks') + stat('Difficulty', tera(n?.difficulty), a ? `period from #${F.num(a.epochStart)}` : '') + stat('Samples', hr.series?.length ? `${hr.series.length}<small>days</small>` : '–', 'one block header a day'));
+    hashrateChart(h.canvas('xpChart'), hr.series ?? [], F);
+  } else if (EXPAND.kind === 'blocks') {
+    put('xpTable', recentBlocksHtml(s?.attribution, F, { limit: 200 }));
+  } else if (EXPAND.kind === 'adjustments') {
+    put('xpTable', adjustmentsHtml(n?.adjustments ?? [], F));
+  }
+}
+function adjustmentsHtml(rows, F) {
+  if (!rows.length) return '<div class="note tiny faint">reading the periods\' first blocks…</div>';
+  return `<table class="t"><thead><tr><th>Height</th><th>Adjusted</th><th class="r">Difficulty</th><th class="r">Change</th></tr></thead><tbody>${rows.map((x) => { const c = signed(x.changePct); return `<tr><td>#${F.num(x.height)}</td><td>${agoWords(x.time * 1000)}</td><td class="r">${tera(x.difficulty)}</td><td class="r ${c.cls}">${c.text.replace(/^[▴▾] /, '')}</td></tr>`; }).join('')}</tbody></table>`;
+}
+function hashrateChart(canvas, series, F) {
+  if (!canvas) return;
+  if (series.length > 2) {
+    const pts = series.map((x) => ({ t: x.t, v: x.hashrate / 1e18 }));
+    const dLo = Math.min(...series.map((x) => x.difficulty / 1e12)), dHi = Math.max(...series.map((x) => x.difficulty / 1e12));
+    const smooth = pts.map((_, i) => { const w = pts.slice(Math.max(0, i - 6), i + 1); return { t: pts[i].t, v: w.reduce((s, q) => s + q.v, 0) / w.length }; });
+    lineChart(canvas, [
+      { label: 'hashrate, daily', points: pts, color: 'rgba(160,200,80,0.45)', width: 1 },
+      { label: 'hashrate, 7-day mean', points: smooth, color: '#f0c419', width: 2 },
+      { label: `difficulty ${dLo.toFixed(0)}T–${dHi.toFixed(0)}T`, points: series.map((x) => ({ t: x.t, v: x.difficulty / 1e12 })), color: '#e8306a', width: 2, axis: 'right' },
+    ], {
+      fmtY: (v) => (v >= 1000 ? `${(v / 1000).toFixed(2)}Z` : `${v.toFixed(0)}E`), fmtRight: () => '', left: 40,
+      fmtX: (t) => new Date(t).toLocaleDateString('en-US', { month: 'short' }),
+      min: Math.min(...pts.map((q) => q.v)) * 0.85, max: Math.max(...pts.map((q) => q.v)) * 1.05, zeroBase: false,
+      rightMin: dLo * 0.97, rightMax: dHi * 1.03,
+    });
+  } else paint(canvas, { when: null, draw: () => {}, placeholder: 'reading a year of block headers…' });
+}
+
+export function networkPanels(n, h) {
+  bindExpand();
+  const F = h.fmt, esc = F.esc;
+  askPrice(h);
+  const put = (id, html) => { const el = document.getElementById(id); if (el && el.__html !== html) { el.innerHTML = html; el.__html = html; } };
+  if (!n) {
+    for (const id of ['mnRewards', 'mnAdjust', 'mnPoolsWeek', 'mnHashrate']) put(id, '<div class="note tiny faint">not in this snapshot yet — the node has not been asked</div>');
+    return;
+  }
+  // reward stats
+  const r = n.rewards ?? {};
+  // the dollar lines (operator, 2026-09-15: "Add dollar figures"): under each figure while a
+  // price is at hand; a faint note instead while market polling is off
+  const px = PRICE.usd;
+  const dollars = (sat) => (px != null && sat != null ? `<span class="usd">${usd(sat / 1e8 * px)}</span>` : '');
+  put('mnRewards', r.blocks
+    ? stat('Miners reward', `${(r.minersRewardSat / 1e8).toFixed(2)}<small>BTC</small>`, `${dollars(r.minersRewardSat)}${r.blocks} blocks · #${r.from}–#${r.to}`)
+      + stat('Avg block fees', `${(r.avgBlockFeeSat / 1e8).toFixed(4)}<small>BTC/block</small>`, dollars(r.avgBlockFeeSat))
+      + stat('Avg tx fee', `${r.avgTxFeeSat == null ? '–' : F.num(r.avgTxFeeSat)}<small>sats/tx</small>`, `${dollars(r.avgTxFeeSat)}${F.num(r.txs)} transactions`)
+      + (px == null && PRICE.off ? '<div class="note tiny faint usdnote">dollar figures need market polling (Display settings → Markets &amp; Price)</div>' : '')
+    : '<div class="note tiny faint">reading the last 144 blocks…</div>');
+  const src = document.getElementById('mnRewardsSrc'); if (src) src.textContent = `last ${r.blocks || 144} blocks · getblockstats`;
+  // the difficulty period
+  const a = n.adjustment, hv = n.halving;
+  if (a) {
+    const est = signed(a.estimatePct), prev = signed(a.previousPct);
+    put('mnAdjust',
+      stat('Remaining', `${F.num(a.remaining)}<small>blocks</small>`, `in ${inWords(a.etaSec)} · ${a.into} of 2016 mined`)
+      + stat('Estimate', `<span class="${est.cls}">${est.text}</span>`, `previous: <span class="${prev.cls}">${prev.text}</span>`)
+      + stat('Next halving', shortDate(hv?.at), hv ? `#${F.num(hv.nextHeight)} · in ${inWords(hv.etaSec)}` : ''));
+  } else put('mnAdjust', '<div class="note tiny faint">reading the period\'s first block…</div>');
+  // pools over the week
+  const p = n.pools ?? {};
+  const luck = p.luckPct == null ? '–' : `${p.luckPct.toFixed(2)}%`;
+  put('mnPoolsWeek', stat('Pools luck', luck, p.blocks ? `${p.blocks} found · ${Math.round(p.expected)} expected` : '')
+    + stat('Blocks (1w)', p.blocks ? F.num(p.blocks) : '–')
+    + stat('Pools count', p.count ? String(p.count) : '–'));
+  const note = document.getElementById('mnPoolsWeekNote');
+  if (note) {
+    const left = p.todo ?? 0;
+    note.textContent = left > 0
+      ? `Filling in: ${F.num(p.filled ?? 0)} coinbases read so far, ${F.num(left)} to go (eight every few seconds, behind the live polls). Shares are of the blocks read so far.`
+      : p.blocks ? `${F.num(p.blocks)} blocks in the last seven days, every coinbase read from this node; a name appears only where the curated pool map or your alias file says so.` : '';
+  }
+  poolDonut(h.canvas('mnPoolDonut'), p.pools ?? [], F);
+  // hashrate and difficulty
+  const hr = n.hashrate ?? {};
+  put('mnHashrate', stat('Hashrate (1w)', hr.networkHashPs != null ? F.eh(hr.networkHashPs / 1e18) : '–', 'getnetworkhashps, 1008 blocks')
+    + stat('Difficulty', tera(n.difficulty), a ? `period from #${F.num(a.epochStart)}` : '')
+    + stat('Samples', hr.series?.length ? `${hr.series.length}<small>days</small>` : '–', 'one block header a day'));
+  hashrateChart(h.canvas('mnHashChart'), hr.series ?? [], F);
+  // the adjustments table
+  put('mnAdjustments', adjustmentsHtml((n.adjustments ?? []).slice(0, 6), F));   // six on the card; every period the server carries under View more
+}
+
+function poolDonut(canvas, pools, F) {
+  // THE LABELLED PIE (operator, 2026-09-15, with the reference: "I want this view. With pool
+  // names clustered with colored lines linking to their pie slice"): every pool named beside the
+  // pie, the big ones on the side their slice faces, the small ones stacked where there is room,
+  // each name joined to its own slice by a leader in the slice's colour. Slices under half a
+  // percent are gathered into "Other (x.xx%)". Labels on a side are laid out top to bottom at
+  // their slice's height and pushed apart where they would overlap, so the leaders fan out.
+  if (!canvas?.getContext) return;
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  const w = canvas.clientWidth || 520, h = canvas.clientHeight || 440;
+  if (canvas.width !== Math.round(w * dpr) || canvas.height !== Math.round(h * dpr)) { canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); }
+  const ctx = canvas.getContext('2d');
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, w, h);
+  const total = pools.reduce((s, p) => s + p.blocks, 0);
+  const cx = w / 2, cy = h / 2;
+  // THE PIE FITS ITS LABELS (operator, 2026-09-15, of a 975px window: "surely it could look better
+  // at this sizing"): the radius is what is left after the widest label on each side and its
+  // leader, measured, so no name is ever cut at the card's edge; where that leaves too small a
+  // pie the names are shortened and the font drops a size first
+  const gap = 34;
+  const nameOf = (p, max) => (p.other ? p.name : p.name.length > max ? `${p.name.slice(0, max - 1)}…` : p.name);
+  const preview = pools.map((p) => ({ ...p, other: false }));
+  let font = 12.5, maxName = 16, R = 0, withPct = true;
+  for (const [f, m, pc] of [[12.5, 16, true], [11.5, 13, true], [11, 14, false]]) {
+    font = f; maxName = m; withPct = pc;
+    ctx.font = `${f}px system-ui, sans-serif`;
+    const widths = preview.map((p) => ctx.measureText(nameOf(p, m)).width + (pc ? ctx.measureText(' 100.0%').width : 0) + 8);
+    const widest = widths.length ? Math.max(...widths) : 0;
+    R = Math.min(h / 2 - 14, cx - gap - widest - 6);
+    if (R >= 90 || f === 11) break;   // the last step drops the shares (the reference has none) for a bigger pie
+  }
+  R = Math.max(50, R);
+  const LH = font + 4, r = R * 0.28;
+  if (!total) { ctx.fillStyle = COL.text; ctx.font = `${font}px system-ui, sans-serif`; ctx.textAlign = 'center'; ctx.fillText('no blocks read yet', cx, cy); return; }
+  // slices: the named ones, and the rest under a threshold as one "Other". The threshold starts at
+  // half a percent and rises until each side's stack of labels FITS THE CANVAS (operator,
+  // 2026-09-15: "getting cut off on mining screen left bottom" -- fourteen names at 16px need
+  // 230px, and a short card gave them 220), so on a small card the small pools fold into Other
+  // rather than run off the bottom
+  const build = (threshold) => {
+    const small = pools.filter((p) => (p.blocks / total) * 100 < threshold);
+    const big = pools.filter((p) => (p.blocks / total) * 100 >= threshold);
+    const slices = [...big, ...(small.length ? [{ name: `Other (${(small.reduce((s, p) => s + p.blocks, 0) / total * 100).toFixed(2)}%)`, blocks: small.reduce((s, p) => s + p.blocks, 0), other: true }] : [])];
+    let a0 = -Math.PI / 2;
+    return slices.map((p, i) => {
+      const a1 = a0 + (p.blocks / total) * Math.PI * 2, mid = (a0 + a1) / 2;
+      const out = { p, i, a0, a1, mid, color: p.other ? '#8d93a1' : DONUT_COLORS[i % DONUT_COLORS.length] };
+      a0 = a1;
+      return out;
+    });
+  };
+  let laid = build(0.5);
+  for (const threshold of [1, 2, 3, 5, 8, 12]) {
+    const perSide = [1, -1].map((dir) => laid.filter((x) => (Math.cos(x.mid) >= 0 ? 1 : -1) === dir).length);
+    if (Math.max(...perSide) * LH <= h - 6) break;
+    laid = build(threshold);
+  }
+  // the pie
+  for (const s of laid) {
+    ctx.beginPath(); ctx.arc(cx, cy, R, s.a0, s.a1); ctx.arc(cx, cy, r, s.a1, s.a0, true); ctx.closePath();
+    ctx.fillStyle = s.color; ctx.fill();
+    ctx.strokeStyle = INK.panel; ctx.lineWidth = 1; ctx.stroke();
+  }
+  // the labels: each side laid out top to bottom, pushed apart to LH
+  const side = (dir) => {
+    const list = laid.filter((s) => (Math.cos(s.mid) >= 0 ? 1 : -1) === dir).map((s) => ({ s, y: cy + Math.sin(s.mid) * (R + 12), ax: cx + Math.cos(s.mid) * R, ay: cy + Math.sin(s.mid) * R }));
+    list.sort((p, q) => p.y - q.y);
+    for (let k = 1; k < list.length; k++) if (list[k].y < list[k - 1].y + LH) list[k].y = list[k - 1].y + LH;
+    // keep them on the canvas: push the stack up from the bottom, then down from the top
+    const over = list.length ? list[list.length - 1].y - (h - LH / 2) : 0;
+    if (over > 0) for (const l of list) l.y -= over;
+    for (let k = 0; k < list.length; k++) if (list[k].y < LH / 2) list[k].y = LH / 2; else if (k && list[k].y < list[k - 1].y + LH) list[k].y = list[k - 1].y + LH;
+    return list;
+  };
+  ctx.font = `${font}px system-ui, sans-serif`; ctx.textBaseline = 'middle'; ctx.lineWidth = 1.5;
+  for (const dir of [1, -1]) {
+    const labelX = cx + dir * (R + gap), edgeX = cx + dir * (R + gap - 8);
+    ctx.textAlign = dir > 0 ? 'left' : 'right';
+    for (const l of side(dir)) {
+      const name = nameOf(l.s.p, maxName);
+      ctx.strokeStyle = l.s.color;
+      ctx.beginPath(); ctx.moveTo(l.ax, l.ay); ctx.lineTo(edgeX, l.y); ctx.lineTo(labelX - dir * 3, l.y); ctx.stroke();
+      ctx.fillStyle = INK.label;
+      ctx.fillText(name, labelX, l.y);
+      // the share, faint, after the name on the right side and before it on the left
+      if (withPct) {
+        const pct = `${(l.s.p.blocks / total * 100).toFixed(1)}%`;
+        ctx.fillStyle = INK.axisText; ctx.font = `${font - 1.5}px ${'var(--mono), monospace'}`;
+        const nameW = ctx.measureText(name).width;
+        if (dir > 0) ctx.fillText(pct, labelX + nameW + 8, l.y); else ctx.fillText(pct, labelX - nameW - 8, l.y);
+        ctx.font = `${font}px system-ui, sans-serif`;
+      }
+    }
+  }
+  ctx.textAlign = 'center';
+  ctx.fillStyle = COL.text; ctx.font = `600 ${font + 1}px system-ui, sans-serif`;
+  ctx.fillText(`${F.num(total)}`, cx, cy - 7);
+  ctx.font = `${font - 2}px system-ui, sans-serif`; ctx.fillStyle = INK.axisText;
+  ctx.fillText('blocks', cx, cy + 8);
+}
+
 function coveragePanel(a, h) {
   const esc = h.fmt.esc;
   const row = (k, v) => `<dt>${esc(k)}</dt><dd>${v}</dd>`;

package/public/js/panels.js

@@ -30,7 +30,7 @@ export function renderChain(s, state, h) {
     placeholder: 'no tip samples yet',
   });
   h.setText('chTipNote', s.tip?.headers != null && s.tip?.height != null
-    ? `Applied ${fmt.num(s.tip.height)} of ${fmt.num(s.tip.headers)} announced headers. Headers-first means this reaches 100% only when the last block lands.`
+    ? `<span title="Headers-first: this reaches 100% only when the last block lands">${fmt.num(s.tip.height)} of ${fmt.num(s.tip.headers)} announced headers applied</span>`
     : 'no header count reported yet');
 
   const gap = (b.gap ?? []).filter((p) => Number.isFinite(p.v));
@@ -55,10 +55,11 @@ export function renderChain(s, state, h) {
   // reads as "broken panel" unless the panel says otherwise: this figure sat empty
   // for a day because the request asked for statistics the endpoint has never had.
   const sizeRow = (s.blocks?.recent ?? [])[0] ?? null;
+  // one line (2026-09-15, the packing pass): the basis sentence is the note's title, the figures its text
   h.setText('chSizeNote', sizeRow?.sizeBasis
-    ? `<span class="mono">total_size</span> — ${sizeRow.sizeBasis}.`
+    ? `<span class="mono" title="${fmt.esc(sizeRow.sizeBasis)}">total_size</span>`
       + (sizeRow.medianTxSize != null && sizeRow.swtotalSize != null && sizeRow.size != null
-        ? ` This block: median tx ${fmt.bytes(sizeRow.medianTxSize, 0)}, witness ${fmt.bytes(sizeRow.swtotalSize, 0)} of ${fmt.bytes(sizeRow.size, 0)}.`
+        ? ` · this block: median tx ${fmt.bytes(sizeRow.medianTxSize, 0)}, witness ${fmt.bytes(sizeRow.swtotalSize, 0)} of ${fmt.bytes(sizeRow.size, 0)}`
         : '')
     : (sizeRow?.sizeMissing ?? 'no block stats collected yet — the monitor has not seen a new height since it started'));
   drawFromSeries(h, 'chFeeChart', b.fee, COL.ok, (v) => fmt.short(v), { fmtTip: (v) => `${fmt.sats(v)} sat` });
@@ -71,10 +72,13 @@ export function renderChain(s, state, h) {
     placeholder: 'getchaintxstats has not answered yet',
   });
   const cs = s.chaintxstats;
-  h.setText('chTxStats', cs ? `<dt>window</dt><dd>${fmt.num(cs.window_block_count ?? 0)} blocks</dd>
-    <dt>txs in window</dt><dd>${fmt.num(cs.window_tx_count ?? 0)}</dd>
-    <dt>all-time txs</dt><dd>${fmt.num(cs.txcount ?? 0)}</dd>
-    <dt>rate</dt><dd>${cs.txrate != null ? cs.txrate.toFixed(2) + ' tx/s' : '–'}</dd>` : '<dt>–</dt><dd>not yet fetched</dd>');
+  // ONE WRAPPING LINE (2026-09-15, the packing pass): as a four-column grid these overflowed a
+  // 330px card and as two columns they made the card the row's tallest
+  const item = (k, v) => `<span><span class="k">${k}</span><b>${v}</b></span>`;
+  h.setText('chTxStats', cs
+    ? item('window', `${fmt.num(cs.window_block_count ?? 0)} blocks`) + item('txs in window', fmt.num(cs.window_tx_count ?? 0))
+      + item('all-time txs', fmt.num(cs.txcount ?? 0)) + item('rate', cs.txrate != null ? `${cs.txrate.toFixed(2)} tx/s` : '–')
+    : '<span class="faint">not yet fetched</span>');
 
   h.setText('chState', kv([
     ['chain', s.chain ?? '–'],
@@ -89,7 +93,7 @@ export function renderChain(s, state, h) {
     ['pruned', s.pruned == null ? '–' : String(s.pruned)],
     ['chain work', s.chainwork ? fmt.hash(s.chainwork.replace(/^0+/, '') || '0', 6) : '–'],
     ['IBD', s.ibd == null ? '–' : String(s.ibd)],
-    ['monitor uptime', s.uptimeSec != null ? fmt.uptime(s.uptimeSec * 1000) : '–'],
+    ['uptime', s.uptimeSec != null ? fmt.uptime(s.uptimeSec * 1000) : '–'],
   ]));
 
   const u = s.utxo ?? {};
@@ -348,7 +352,7 @@ export function peerTableHtml(rows, fmt, { now = Date.now(), tip = null } = {})
   const faint = (s) => ` <span class="faint">${fmt.esc(s)}</span>`;
   const body = sorted.map((p) => `<tr>
     <td>${p.inbound ? '<span class="badge muted">in</span>' : '<span class="badge">out</span>'}</td>
-    <td>${fmt.esc(p.addr ?? '–')}${p.network ? faint(p.network) : ''}</td>
+    <td class="addr" title="${fmt.esc(p.addr ?? '')}">${fmt.esc(p.addr ?? '–')}${p.network ? faint(p.network) : ''}</td>
     <td class="w">${fmt.esc(ua(p.subver))}${p.version ? faint(String(p.version)) : ''}${svc(p).map((t) => ` <span class="badge muted">${t}</span>`).join('')}</td>
     <td class="r">${Number.isFinite(p.conntime) ? fmt.uptime((now / 1000 - p.conntime) * 1000) : '–'}</td>
     <td class="r">${since(p.lastrecv)}</td>
@@ -472,7 +476,7 @@ export function renderNode(s, state, h) {
   h.setText('ndRpc', kv([
     ['endpoint', rpc.url ?? '–'],
     ['cookie source', rpc.cookieSource ? fmt.hash(rpc.cookieSource, 14) : '–'],
-    ['in flight', '1 (by design)'],
+    ['in flight', '1'],   // one request at a time is the design (the note under the chart says so); '(by design)' was cut off in the two-column list
     ['calls (60 s window)', String(rpc.ratePerSec ?? 0) + '/s'],
     ['total calls', fmt.num(rpc.calls)],
     ['batches', fmt.num(rpc.batches)],

package/public/js/pricechart.js

@@ -4,6 +4,7 @@
 // crosshair that says exactly what an hour did. This is that chart. The 3D board under it is a
 // view of the same hours, not a substitute for it.
 import { niceTicks } from './charts.js';
+import { INK } from './theme.js';   // the axis, grid and tooltip colours of the chosen theme
 
 export const EX_COLORS = { coinbase: '#4c8dff', kraken: '#a78bfa', bitstamp: '#2ecc8f', bitfinex: '#4dd0e1', okx: '#f0b429' };
 const UP = '#26c281', DOWN = '#ef5350';
@@ -79,7 +80,7 @@ export function drawPriceChart(canvas, { candles = [], overlays = [], name = '',
   if (!canvas?.getContext) return null;
   const { ctx, w, h } = prep(canvas);
   if (!candles.length) {
-    ctx.fillStyle = '#6a7484'; ctx.textAlign = 'center';
+    ctx.fillStyle = INK.text; ctx.textAlign = 'center';
     ctx.fillText('no candles yet', w / 2, h / 2);
     return null;
   }
@@ -92,22 +93,22 @@ export function drawPriceChart(canvas, { candles = [], overlays = [], name = '',
   for (const v of niceTicks(L.lo, L.hi, Math.max(3, Math.floor(L.priceH / 46)))) {
     const y = Math.round(L.Y(v)) + 0.5;
     if (y < PAD.top || y > PAD.top + L.priceH) continue;
-    ctx.strokeStyle = '#1a2029';
+    ctx.strokeStyle = INK.grid;
     ctx.beginPath(); ctx.moveTo(PAD.left, y); ctx.lineTo(right, y); ctx.stroke();
-    ctx.fillStyle = '#7d8898';
+    ctx.fillStyle = INK.axisText;
     ctx.fillText(money(v, 0), right + 7, y);
   }
   // time grid and axis
   ctx.textAlign = 'center';
   for (const tk of timeTicks(L.t0, L.t1, L.plotW)) {
     const x = Math.round(L.XT(tk.t)) + 0.5;
-    ctx.strokeStyle = tk.label.includes(' ') ? '#27303b' : '#161b22';
+    ctx.strokeStyle = tk.label.includes(' ') ? INK.axis : INK.grid;
     ctx.beginPath(); ctx.moveTo(x, PAD.top); ctx.lineTo(x, L.VY0); ctx.stroke();
-    ctx.fillStyle = tk.label.includes(' ') ? '#b5c0cc' : '#7d8898';
+    ctx.fillStyle = tk.label.includes(' ') ? INK.label : INK.axisText;
     ctx.fillText(tk.label, x, h - PAD.bottom / 2);
   }
   // the pane edges
-  ctx.strokeStyle = '#2a323d';
+  ctx.strokeStyle = INK.axis;
   ctx.beginPath(); ctx.moveTo(right + 0.5, PAD.top); ctx.lineTo(right + 0.5, L.VY0); ctx.stroke();
   ctx.beginPath(); ctx.moveTo(PAD.left, L.VY0 + 0.5); ctx.lineTo(right, L.VY0 + 0.5); ctx.stroke();
 
@@ -119,7 +120,7 @@ export function drawPriceChart(canvas, { candles = [], overlays = [], name = '',
     ctx.fillStyle = k.c >= k.o ? UP_V : DOWN_V;
     ctx.fillRect(L.X(i) - bodyW / 2, L.VY0 - vh, bodyW, vh);
   });
-  ctx.fillStyle = '#56606e'; ctx.textAlign = 'left';
+  ctx.fillStyle = INK.textDim; ctx.textAlign = 'left';
   ctx.fillText('volume', PAD.left + 4, L.VY0 - L.volH + 6);
 
   // the other exchanges, as thin close lines
@@ -152,7 +153,7 @@ export function drawPriceChart(canvas, { candles = [], overlays = [], name = '',
   ctx.beginPath(); ctx.moveTo(PAD.left, ly); ctx.lineTo(right, ly); ctx.stroke();
   ctx.setLineDash([]);
   ctx.fillStyle = lcol; ctx.fillRect(right + 1, ly - 9, PAD.right - 2, 18);
-  ctx.fillStyle = '#ffffff'; ctx.textAlign = 'left';
+  ctx.fillStyle = INK.bright; ctx.textAlign = 'left';
   ctx.fillText(money(lastK.c), right + 6, ly);
 
   // the crosshair
@@ -161,26 +162,26 @@ export function drawPriceChart(canvas, { candles = [], overlays = [], name = '',
     const i = L.index(hover.x);
     shown = candles[i];
     const x = Math.round(L.X(i)) + 0.5;
-    ctx.strokeStyle = 'rgba(200,215,230,0.45)'; ctx.setLineDash([3, 3]);
+    ctx.strokeStyle = INK.dash; ctx.setLineDash([3, 3]);
     ctx.beginPath(); ctx.moveTo(x, PAD.top); ctx.lineTo(x, L.VY0); ctx.stroke();
     if (hover.y >= PAD.top && hover.y <= PAD.top + L.priceH) {
       const y = Math.round(hover.y) + 0.5;
       ctx.beginPath(); ctx.moveTo(PAD.left, y); ctx.lineTo(right, y); ctx.stroke();
       ctx.setLineDash([]);
-      ctx.fillStyle = '#3a4452'; ctx.fillRect(right + 1, y - 9, PAD.right - 2, 18);
-      ctx.fillStyle = '#ffffff'; ctx.fillText(money(L.V(hover.y)), right + 6, y);
+      ctx.fillStyle = INK.cursorFill; ctx.fillRect(right + 1, y - 9, PAD.right - 2, 18);
+      ctx.fillStyle = INK.cursorText; ctx.fillText(money(L.V(hover.y)), right + 6, y);
     }
     ctx.setLineDash([]);
   }
   // readout (top-left) and overlay legend (top-right)
   ctx.textAlign = 'left';
-  ctx.fillStyle = '#dfe6ee';
+  ctx.fillStyle = INK.bright;
   ctx.fillText(readout(shown, name), PAD.left + 2, 12);
   ctx.textAlign = 'right';
   let lx = right;
   for (const o of [...overlays].reverse()) {
     const wT = ctx.measureText(o.name).width;
-    ctx.fillStyle = '#9aa5b3'; ctx.fillText(o.name, lx, 12);
+    ctx.fillStyle = INK.label; ctx.fillText(o.name, lx, 12);
     ctx.fillStyle = o.color; ctx.fillRect(lx - wT - 16, 11, 11, 2);
     lx -= wT + 26;
   }

package/public/js/quake.js

@@ -0,0 +1,20 @@
+// QUAKE, the tab (operator, 2026-09-15: "yes, get Quake working as a diversion").
+//
+// The shareware QUAKE.EXE v1.06 and its PAK0.PAK from games/quake_dos/, unmodified, on the emulated
+// PC (dosgame.js has the tab, dosworker.js the machine). Quake is a DJGPP program where DOOM was a
+// DOS/4GW one, so the same machine plays the go32 stub and CWSDPMI for it (dospc.js bootCoff), and it
+// asks far more of the FPU. Its keys are its own: W A S D and mouse look on the first run
+// (dosio.js quakeAutoexec), and after that whatever the player binds in Quake's own menu.
+import { createDosGame } from './dosgame.js';
+
+export const renderQuake = createDosGame({
+  game: 'quake',
+  page: 'quake',
+  prefix: 'quake',
+  title: 'Quake',
+  idleText: 'The shareware episode, Dimension of the Doomed: the real QUAKE.EXE v1.06 running on a PC this monitor emulates. Click the screen to use the mouse.',
+  loadingText: 'loading the shareware episode (18 MB)…',
+  saveName: /\.SAV$/i,
+  keysText: () => 'W S walk · A D strafe · mouse to look · left click fire · Space or right click jump · Shift run · 1–8 weapons · − = smaller or bigger view (smaller runs faster) · Esc menu · ~ console · F6 quicksave · F9 quickload',
+  switches: [],
+});