blockyard 0.0.9 → 0.1.1

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
@@ -958,10 +959,10 @@ export function nextHud(nb, { meter = '', fresh = null, mempool = null } = {}, f
   const mins = fresh && Number.isFinite(fresh.seconds) ? Math.floor(fresh.seconds / 60) : null;
   const ageSec = nb.at ? Math.max(0, Math.round((Date.now() - nb.at) / 1000)) : null;
   const ec = nb.economy ?? null;
-  const kv = (k, v) => `<dt>${k}</dt><dd>${v}</dd>`;
-  return `${head(`<span class="hudk">#${nb.height ?? '?'}</span><span class="hudclock ${lvl}" title="time since the last block: how long this block has been accumulating${fresh?.basis === 'block time' ? ' (from the block timestamp)' : ''}">${mins != null ? `${mins}m` : '–'}</span>`)}
+  const kv = (k, v) => `<dt>${fmt.esc(k)}</dt><dd>${fmt.esc(v)}</dd>`;   // text only (audit 2026-09-16, L2)
+  return `${head(`<span class="hudk">#${fmt.esc(nb.height ?? '?')}</span><span class="hudclock ${lvl}" title="time since the last block: how long this block has been accumulating${fresh?.basis === 'block time' ? ' (from the block timestamp)' : ''}">${mins != null ? `${mins}m` : '–'}</span>`)}
     ${meter}
-    <div class="hudbig">${pct.toFixed(1)}<small>% full</small>${ec?.marginal?.rate != null ? `<span class="chip hot">marginal ~${ec.marginal.rate}/vB</span>` : '<span class="chip">not full</span>'}</div>
+    <div class="hudbig">${pct.toFixed(1)}<small>% full</small>${ec?.marginal?.rate != null ? `<span class="chip hot">marginal ~${fmt.esc(ec.marginal.rate)}/vB</span>` : '<span class="chip">not full</span>'}</div>
     <dl class="hudkv">
       ${kv('transactions', nb.txCount != null ? fmt.num(nb.txCount) : '–')}
       ${kv('fees', btc(nb.totalFeesSat))}
@@ -982,7 +983,7 @@ export function tipHud(tipHeight, row, prev, { avgGapSec = null, now = Date.now(
   const w = who(row);
   const f = blockFacts(row);
   const gap = prev?.time && row.time ? row.time - prev.time : null;
-  const kv = (k, v) => `<dt>${k}</dt><dd>${v}</dd>`;
+  const kv = (k, v) => `<dt>${fmt.esc(k)}</dt><dd>${fmt.esc(v)}</dd>`;   // text only (audit 2026-09-16, L2)
   return `${head}
     <div class="hudpool"><span class="bdot" data-pool="${w.idx}"></span><b data-pool-fg="${w.idx}">${fmt.esc(trunc(w.name, 22))}</b><span class="faint">${agoText(row.at ?? row.seenAt, now) ? `mined ${agoText(row.at ?? row.seenAt, now)}` : ''}</span></div>
     <div class="hudbar" title="${f.capPct != null ? `${f.capPct.toFixed(1)}% of the 4,000,000 WU cap` : 'weight unknown'}"><span data-w="${f.capPct == null ? 0 : f.capPct.toFixed(1)}" data-pool="${w.idx}"></span></div>
@@ -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 ?? {};
@@ -107,8 +111,8 @@ export function renderChain(s, state, h) {
     // hundreds of blocks a second is not a hashrate), and the reason travels with it
     // so the dash is an explanation rather than a mystery.
     ['network hash', s.hashrateEstEh != null ? fmt.eh(s.hashrateEstEh)
-      : `<span title="${fmt.esc(s.hashrateNote ?? '')}">–</span>`],
-    ...(s.hashrateEstEh == null && s.hashrateNote ? [['hash rate note', `<span class="tiny faint">${fmt.esc(s.hashrateNote)}</span>`]] : []),
+      : raw(`<span title="${fmt.esc(s.hashrateNote ?? '')}">–</span>`)],
+    ...(s.hashrateEstEh == null && s.hashrateNote ? [['hash rate note', raw(`<span class="tiny faint">${fmt.esc(s.hashrateNote)}</span>`)]] : []),
     ['avg interval', s.avgBlockGapSec != null ? fmt.ageSec(s.avgBlockGapSec) : '–'],
     ['reorgs seen', String(s.blocks?.reorgs ?? 0)],
   ]));
@@ -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)],
@@ -517,7 +521,7 @@ export function renderNode(s, state, h) {
   const lh = t.health ?? {};
   h.setText('ndTail', kv([
     ['file', t.source === 'disabled'
-      ? '<span class="faint">disabled — running on RPC only</span>'
+      ? raw('<span class="faint">disabled — running on RPC only</span>')
       : (t.file ? fmt.hash(t.file, 16) : 'not configured')],
     ['exists', t.exists == null ? '–' : String(t.exists)],
     ['size', t.size != null ? fmt.bytes(t.size, 1) : '–'],
@@ -532,10 +536,10 @@ export function renderNode(s, state, h) {
     // The two figures that separate "this node is quiet" from "we are tailing the
     // wrong file". A tail that stops moving is invisible in every other panel.
     ['lines matched', lh.ratio != null
-      ? `${Math.round(lh.ratio * 100)}%${lh.lines ? ` <span class="faint tiny">(${fmt.num(lh.parsed)}/${fmt.num(lh.lines)} last window)</span>` : ''}`
-      : '<span class="faint">not checked yet</span>'],
+      ? raw(`${Math.round(lh.ratio * 100)}%${lh.lines ? ` <span class="faint tiny">(${fmt.num(lh.parsed)}/${fmt.num(lh.lines)} last window)</span>` : ''}`)
+      : raw('<span class="faint">not checked yet</span>')],
     ['last new bytes', lh.lastGrowthAt
-      ? `${fmt.ago(lh.lastGrowthAt)} <span class="faint tiny">(warns after ${lh.staleAfterMs ? Math.round(lh.staleAfterMs / 60000) : '?'} min)</span>`
+      ? raw(`${fmt.esc(fmt.ago(lh.lastGrowthAt))} <span class="faint tiny">(warns after ${lh.staleAfterMs ? Math.round(lh.staleAfterMs / 60000) : '?'} min)</span>`)
       : '–'],
   ]));
 
@@ -822,8 +826,17 @@ function drawFromSeries(h, id, points, color, fmtY, extra = {}) {
   });
 }
 
-function kv(pairs) {
-  return pairs.map(([k, v]) => `<dt>${String(k)}</dt><dd>${String(v)}</dd>`).join('');
+// ESCAPED BY DEFAULT (audit 2026-09-16, L2/L3). kv() used to write every value as markup, and some
+// values are the node's own strings passed straight through -- `chain`, `pruned`, the RPC endpoint,
+// the cookie path. A hostile or misconfigured node returned `chain` with an <img> appended and it
+// became an element on the Chain page (the CSP stopped the script; the element was still there).
+// Now a value is text unless it is wrapped in raw(), which says at the call site "this is markup
+// this file built, with its own dynamic parts already escaped".
+const RAW = Symbol('raw');
+export const raw = (html) => ({ [RAW]: String(html) });
+export function kv(pairs) {
+  const cell = (v) => (v && typeof v === 'object' && RAW in v ? v[RAW] : F().esc(v));
+  return pairs.map(([k, v]) => `<dt>${F().esc(k)}</dt><dd>${cell(v)}</dd>`).join('');
 }
 
 function median(a) {
@@ -884,8 +897,8 @@ export function initChainDrill(h) {
       return;
     }
     const rows = [
-      ['txid', `<span class="mono tiny select-all">${fmt.esc(d.txid ?? txid)}</span> <a class="xlink" href="#explorer/tx/${encodeURIComponent(d.txid ?? txid)}">open in the explorer ›</a>`],
-      ['in', d.inMempool ? '<span class="warn">mempool (unconfirmed)</span>' : `block ${fmt.esc(d.blockHash ?? '?')}`],
+      ['txid', raw(`<span class="mono tiny select-all">${fmt.esc(d.txid ?? txid)}</span> <a class="xlink" href="#explorer/tx/${encodeURIComponent(d.txid ?? txid)}">open in the explorer ›</a>`)],
+      ['in', d.inMempool ? raw('<span class="warn">mempool (unconfirmed)</span>') : `block ${d.blockHash ?? '?'}`],
       ['confirmations', d.confirmations == null ? '– (in the pool)' : fmt.num(d.confirmations)],
       ['size / vsize / weight', [d.size, d.vsize, d.weight].map((v) => (v == null ? '–' : fmt.num(v))).join(' / ')],
       ['locktime', d.locktime ?? 0],
@@ -894,8 +907,8 @@ export function initChainDrill(h) {
       ['total out', d.totalOutSat != null ? `${fmt.num(d.totalOutSat)} sat` : '–'],
     ];
     const io = (rows2, label) => `<div class="note tiny mt-6"><b>${label}</b></div><table class="t"><tbody>${rows2}</tbody></table>`;
-    const inRows = (d.inputs ?? []).map((v) => `<tr><td class=\"mono tiny w\">${fmt.esc(String(v.txid ?? 'coinbase').slice(0, 16))}…:${v.vout ?? '–'}</td><td class=\"tiny faint\">${fmt.esc(v.scriptSigType ?? '')} ${fmt.esc(v.scriptSigAsm ?? '')}</td></tr>`).join('');
-    const outRows = (d.outputs ?? []).map((v) => `<tr><td class=\"r faint\">${v.n ?? '–'}</td><td class=\"mono tiny\">${fmt.esc(String(v.address ?? v.scriptPubKeyType ?? '–'))}</td><td class=\"r\">${v.value == null ? '–' : fmt.num(v.value)}</td></tr>`).join('');
+    const inRows = (d.inputs ?? []).map((v) => `<tr><td class=\"mono tiny w\">${fmt.esc(String(v.txid ?? 'coinbase').slice(0, 16))}…:${fmt.esc(v.vout ?? '–')}</td><td class=\"tiny faint\">${fmt.esc(v.scriptSigType ?? '')} ${fmt.esc(v.scriptSigAsm ?? '')}</td></tr>`).join('');
+    const outRows = (d.outputs ?? []).map((v) => `<tr><td class=\"r faint\">${fmt.esc(v.n ?? '–')}</td><td class=\"mono tiny\">${fmt.esc(String(v.address ?? v.scriptPubKeyType ?? '–'))}</td><td class=\"r\">${v.value == null ? '–' : fmt.num(v.value)}</td></tr>`).join('');
     box.innerHTML = `<div class=\"drill\">
       <dl class=\"kv\">${kv(rows)}</dl>
       ${inRows ? io(inRows, `inputs (${d.inputsTotal})`) : ''}
@@ -932,20 +945,20 @@ export function initChainDrill(h) {
     const b = d.header ?? {};
     const st = d.stats ?? {};
     if (hdr()) hdr().innerHTML = kv([
-      ['height', b.height == null ? '–' : `<a class="xlink" href="#explorer/block/${b.height}">${fmt.num(b.height)}</a> <span class="tiny faint">open in the explorer</span>`],
-      ['hash', `<span class=\"mono tiny select-all\">${fmt.esc(String(b.hash ?? '').slice(0, 24))}…</span>`],
-      ['confirmations', b.confirmations == null ? '–' : `${fmt.num(b.confirmations)}${b.confirmations === 0 ? ' <span class=\"bad\">(not on the best chain)</span>' : ''}`],
+      ['height', b.height == null ? '–' : raw(`<a class="xlink" href="#explorer/block/${encodeURIComponent(Number(b.height))}">${fmt.esc(fmt.num(b.height))}</a> <span class="tiny faint">open in the explorer</span>`)],
+      ['hash', raw(`<span class=\"mono tiny select-all\">${fmt.esc(String(b.hash ?? '').slice(0, 24))}…</span>`)],
+      ['confirmations', b.confirmations == null ? '–' : raw(`${fmt.esc(fmt.num(b.confirmations))}${b.confirmations === 0 ? ' <span class=\"bad\">(not on the best chain)</span>' : ''}`)],
       ['time', b.time ? `${new Date(b.time * 1000).toISOString().replace('T', ' ').slice(0, 19)}Z` : '–'],
       ['age', b.time ? fmt.ago(b.time * 1000) : '–'],
       ['size / weight', `${b.size == null ? '–' : fmt.bytes(b.size, 0)} / ${b.weight == null ? '–' : fmt.num(b.weight)} WU`],
       ['transactions', fmt.num(b.nTx ?? b.txCount ?? 0)],
-      ['fees', st.totalfee == null ? (d.statsError ? '<span class=\"warn\">getblockstats failed</span>' : '–') : `${fmt.num(st.totalfee)} sat`],
+      ['fees', st.totalfee == null ? (d.statsError ? raw('<span class=\"warn\">getblockstats failed</span>') : '–') : `${fmt.num(st.totalfee)} sat`],
       ['median fee', st.medianfee == null ? '–' : `${fmt.num(st.medianfee)} sat`],
       ['fee rate p10/50/90', (st.feerate_percentiles ?? []).length ? st.feerate_percentiles.map((v) => Number(v).toFixed(1)).join(' / ') : '–'],
       ['subsidy', st.subsidy == null ? '–' : `${fmt.num(st.subsidy)} sat`],
       ['utxo delta', st.utxo_increase == null ? '–' : fmt.num(st.utxo_increase)],
-      ['prev / next', `<span class=\"mono tiny\">${fmt.esc(String(b.previousblockhash ?? '–').slice(0, 10))}… / ${fmt.esc(String(b.nextblockhash ?? 'none').slice(0, 10))}…</span>`],
-      ['merkle root', `<span class=\"mono tiny\">${fmt.esc(String(b.merkleRoot ?? '–').slice(0, 16))}…</span>`],
+      ['prev / next', raw(`<span class=\"mono tiny\">${fmt.esc(String(b.previousblockhash ?? '–').slice(0, 10))}… / ${fmt.esc(String(b.nextblockhash ?? 'none').slice(0, 10))}…</span>`)],
+      ['merkle root', raw(`<span class=\"mono tiny\">${fmt.esc(String(b.merkleRoot ?? '–').slice(0, 16))}…</span>`)],
     ]);
     const ids = d.txids ?? [];
     if (list()) {