blockyard 0.0.1 → 0.1.0

package/public/js/feepalette.js

@@ -0,0 +1,149 @@
+// SPDX-License-Identifier: Apache-2.0
+//
+// feepalette.js -- feerate bands and their colours, for the block-space
+// viewer, the block meter and the feerate legend.
+//
+// THE BANDS are a geometric series: from FLOOR_RATE to TOP_RATE in equal
+// ratios, each threshold rounded to two significant figures so the legend
+// reads in plain numbers. Everything below FLOOR_RATE is band 0. A geometric
+// series is what a feerate scale wants: the difference between 1 and 2 sat/vB
+// matters as much as the difference between 500 and 1000, so the bands sit
+// close together near the floor and far apart near the ceiling.
+//
+// 128 BANDS FROM 0.1 sat/vB (operator, 2026-09-11: "we really need more color
+// separation. at least 64 different colors and shades", then "we should try
+// 128 colors"). The first palette began at 1 sat/vB with 36 bands, and this
+// chain's blocks run from 0.1 to a few tens of sat/vB -- so most of a block
+// fell into band 0 and the board was one green. Starting at 0.1 puts
+// 0.1..30 sat/vB across some 73 bands, each step about 8% up the scale.
+// Thresholds are two significant figures, three where two would repeat the
+// band below (an 8% step is finer than two figures near the start of a decade).
+//
+// THE COLOURS are a ramp through a handful of anchors, interpolated in HSL
+// with the hue unwrapped so it only ever travels one way: sky blue for the
+// cheapest, through teal, green, yellow-green, yellow, amber, orange, red and
+// crimson, to purple for the most expensive -- 280 degrees of hue. Band i takes
+// the colour at i / (bands - 1) along the ramp, and its lightness steps
+// through a three-band pattern (LIGHT_STEP), so two neighbouring bands differ
+// in tone as well as hue and read as separate colours side by side.
+//
+// feeShade() then gives each tile its own tone of its band's colour: darker
+// at the bottom of the band, brighter toward its top, plus a small fixed
+// variation per transaction id so a field of equal feerates reads as a field
+// of separate stones rather than one flat slab. Only the brightness moves;
+// the hue is the band's.
+
+const FLOOR_RATE = 0.1;    // sat/vB: the start of band 1 (below it is band 0)
+const TOP_RATE = 2000;     // sat/vB: the start of the last band
+const STEPS = 126;         // ratios between FLOOR_RATE and TOP_RATE: 128 bands in all
+
+// n significant figures: figures(1.2505, 2) -> 1.3, figures(14.6, 2) -> 15, figures(1.049, 3) -> 1.05
+function figures(v, n) {
+  const mag = 10 ** (Math.floor(Math.log10(v)) - (n - 1));
+  return Math.round(v / mag) * mag;
+}
+const tidy = (v) => Number(v.toPrecision(12));   // drop float dust (1.3000000000000003)
+
+export const FEE_BANDS = Object.freeze((() => {
+  const bands = [0];
+  for (let i = 0; i <= STEPS; i++) {
+    const v = FLOOR_RATE * (TOP_RATE / FLOOR_RATE) ** (i / STEPS);
+    const two = tidy(figures(v, 2));
+    bands.push(two > bands.at(-1) ? two : tidy(figures(v, 3)));
+  }
+  return bands;
+})());
+
+// [position along the ramp, hue (deg), saturation, lightness], with the rate
+// that lands there. Hues are unwrapped (they fall from blue past 0 into
+// negative = crimson/purple), so linear interpolation moves the hue one way.
+const ANCHORS = [
+  [0.00, 205, 0.62, 0.42],   // sky blue      under 0.1 sat/vB
+  [0.12, 172, 0.60, 0.40],   // teal          ~0.3
+  [0.24, 138, 0.58, 0.40],   // green         ~1
+  [0.35, 96, 0.58, 0.45],    // yellow-green  ~3
+  [0.47, 58, 0.72, 0.50],    // yellow        ~10
+  [0.56, 40, 0.76, 0.51],    // amber         ~25
+  [0.65, 24, 0.78, 0.51],    // orange        ~60
+  [0.78, 2, 0.72, 0.50],     // red           ~250
+  [0.89, -28, 0.70, 0.46],   // crimson       ~700
+  [1.00, -75, 0.60, 0.46],   // purple        2000 and up
+];
+// lightness added band by band, in a repeating three-step pattern
+const LIGHT_STEP = [0, 0.075, -0.06];
+
+function hslToRgb(h, s, l) {
+  const hh = ((h % 360) + 360) % 360;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((hh / 60) % 2) - 1));
+  const m = l - c / 2;
+  const [r, g, b] = hh < 60 ? [c, x, 0] : hh < 120 ? [x, c, 0] : hh < 180 ? [0, c, x]
+    : hh < 240 ? [0, x, c] : hh < 300 ? [x, 0, c] : [c, 0, x];
+  return [r + m, g + m, b + m].map((v) => Math.round(v * 255));
+}
+
+function rampAt(t, dl = 0) {
+  let i = 0;
+  while (i < ANCHORS.length - 2 && t > ANCHORS[i + 1][0]) i++;
+  const [t0, h0, s0, l0] = ANCHORS[i];
+  const [t1, h1, s1, l1] = ANCHORS[i + 1];
+  const f = Math.min(1, Math.max(0, (t - t0) / (t1 - t0)));
+  return hslToRgb(h0 + (h1 - h0) * f, s0 + (s1 - s0) * f, l0 + (l1 - l0) * f + dl);
+}
+
+const hex = (rgb) => '#' + rgb.map((v) => Math.min(255, Math.max(0, Math.round(v))).toString(16).padStart(2, '0')).join('');
+
+const BAND_RGB = FEE_BANDS.map((_, i) => rampAt(i / (FEE_BANDS.length - 1), LIGHT_STEP[i % LIGHT_STEP.length]));
+const BAND_HEX = BAND_RGB.map(hex);
+
+export function feeBandIndex(rate) {
+  const r = Number(rate);
+  if (!Number.isFinite(r) || r <= 0) return 0;
+  // binary search: the highest band whose threshold is <= r
+  let lo = 0, hi = FEE_BANDS.length - 1;
+  while (lo < hi) {
+    const mid = (lo + hi + 1) >> 1;
+    if (FEE_BANDS[mid] <= r) lo = mid; else hi = mid - 1;
+  }
+  return lo;
+}
+
+export function feeColor(rate) {
+  return BAND_HEX[feeBandIndex(rate)];
+}
+
+// Where a rate sits inside its band, 0 at the threshold and 1 at the next.
+// The last band has no upper threshold; it is given one as wide as itself.
+function inBand(rate, i) {
+  const r = Number(rate);
+  if (!Number.isFinite(r) || r <= 0) return 0;
+  const lo = FEE_BANDS[i];
+  const hi = i + 1 < FEE_BANDS.length ? FEE_BANDS[i + 1] : lo * 2;
+  return Math.min(1, Math.max(0, (r - lo) / (hi - lo)));
+}
+
+// FNV-1a, 32 bits: a stable number per key, the same in every browser
+function hashKey(key) {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < key.length; i++) {
+    h ^= key.charCodeAt(i);
+    h = Math.imul(h, 0x01000193);
+  }
+  return h >>> 0;
+}
+
+const SHADE_LOW = 0.84;    // brightness at the bottom of a band
+const SHADE_SPAN = 0.26;   // added across the band (so 1.10 at its top)
+const KEY_SPREAD = 0.06;   // +/- per-key variation
+
+export function feeShade(rate, key = '') {
+  const i = feeBandIndex(rate);
+  const rgb = BAND_RGB[i];
+  let k = SHADE_LOW + SHADE_SPAN * inBand(rate, i);
+  const id = key == null ? '' : String(key);
+  if (id) k += KEY_SPREAD * ((hashKey(id) % 1001) / 500 - 1);
+  // never past full brightness in any channel: clipping one channel would
+  // change the hue, and the hue is the band's
+  k = Math.min(k, 255 / Math.max(1, ...rgb));
+  return hex(rgb.map((v) => v * k));
+}

package/public/js/fmt.js

@@ -0,0 +1,162 @@
+// Display formatters. Units are decimal (1 KB = 1000 B) to match how the node
+// itself prints sizes -- its log renders 4096 bytes as "4.0KB", so the monitor
+// must not be the one place on the box that says 4.1 KB.
+const U = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+
+export function bytes(n, dp = 1) {
+  if (n == null || !Number.isFinite(n)) return '–';
+  let v = Math.abs(n);
+  let i = 0;
+  while (v >= 1000 && i < U.length - 1) { v /= 1000; i += 1; }
+  return `${n < 0 ? '-' : ''}${v.toFixed(i === 0 ? 0 : dp)} ${U[i]}`;
+}
+
+export function rate(bps, unit = 'B/s') {
+  if (bps == null || !Number.isFinite(bps)) return '–';
+  let v = Math.abs(bps);
+  let i = 0;
+  while (v >= 1000 && i < U.length - 1) { v /= 1000; i += 1; }
+  return `${(bps < 0 ? '-' : '')}${v.toFixed(i === 0 ? 0 : 1)} ${U[i]}/${unit === 'B/s' ? 's' : unit}`;
+}
+
+export function num(n, dp = 0) {
+  if (n == null || !Number.isFinite(n)) return '–';
+  return n.toLocaleString('en-US', { minimumFractionDigits: dp, maximumFractionDigits: dp });
+}
+
+export function pct(n, dp = 2) {
+  if (n == null || !Number.isFinite(n)) return '–';
+  return `${n.toFixed(dp)}%`;
+}
+
+// DD:HH:MM:SS, matching the node's own ETA and heartbeat format.
+export function eta(sec) {
+  if (sec == null || !Number.isFinite(sec) || sec < 0) return '–';
+  const s = Math.floor(sec);
+  const p = (x, w = 2) => String(x).padStart(w, '0');
+  return `${p(Math.floor(s / 86400), 2)}:${p(Math.floor((s % 86400) / 3600))}:${p(Math.floor((s % 3600) / 60))}:${p(s % 60)}`;
+}
+
+export function ago(ms, now = Date.now()) {
+  if (ms == null || !Number.isFinite(ms)) return '–';
+  const s = Math.max(0, (now - ms) / 1000);
+  if (s < 45) return `${Math.round(s)}s ago`;
+  if (s < 5400) return `${Math.round(s / 60)}m ago`;
+  if (s < 172800) return `${(s / 3600).toFixed(1)}h ago`;
+  return `${(s / 86400).toFixed(1)}d ago`;
+}
+
+export function ageSec(sec) {
+  if (sec == null || !Number.isFinite(sec)) return '–';
+  if (sec < 60) return `${Math.round(sec)}s`;
+  if (sec < 5400) return `${(sec / 60).toFixed(1)}m`;
+  if (sec < 172800) return `${(sec / 3600).toFixed(1)}h`;
+  return `${(sec / 86400).toFixed(1)}d`;
+}
+
+export function sats(n) {
+  if (n == null || !Number.isFinite(n)) return '–';
+  return n.toLocaleString('en-US');
+}
+
+export function btc(sat) {
+  if (sat == null || !Number.isFinite(sat)) return '–';
+  return (sat / 1e8).toFixed(8);
+}
+
+// Core reports feerates in BTC/kvB; operators think in sat/vB. Convert, and show
+// the unit every time so nobody compares two numbers in different currencies.
+export function satPerVb(btcPerKvB, dp = 2) {
+  if (btcPerKvB == null || !Number.isFinite(btcPerKvB)) return '–';
+  return (btcPerKvB * 1e8 / 1000).toFixed(dp);
+}
+
+// `n` is already in EH/s, so each step up is a THOUSAND of them: 1e3 EH/s is a zettahash and 1e6
+// is a yottahash. Both labels were one prefix too low (2026-09-12) -- 1112 EH/s printed as
+// "1.11 EH/s" -- which stayed hidden while the estimator that feeds this was itself out by 2^32
+// and never produced a number above 1.
+export function eh(n) {
+  if (n == null || !Number.isFinite(n)) return '–';
+  if (n >= 1e6) return `${(n / 1e6).toFixed(2)} YH/s`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(2)} ZH/s`;
+  return `${n.toFixed(1)} EH/s`;
+}
+
+export function clock(ms) {
+  const d = new Date(ms);
+  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
+}
+
+
+export function short(n) {
+  if (n == null || !Number.isFinite(n)) return '–';
+  const a = Math.abs(n);
+  if (a >= 1e12) return (n / 1e12).toFixed(1) + 'T';
+  if (a >= 1e9) return (n / 1e9).toFixed(1) + 'G';
+  if (a >= 1e6) return (n / 1e6).toFixed(1) + 'M';
+  if (a >= 1e3) return (n / 1e3).toFixed(a >= 1e4 ? 0 : 1) + 'k';
+  if (a >= 100) return n.toFixed(0);
+  if (a >= 1) return (+n.toFixed(1)).toString();
+  return (+n.toFixed(4)).toString();
+}
+
+export function hash(x, keep = 8) {
+  if (!x || typeof x !== 'string') return '–';
+  if (x.length <= keep * 2 + 3) return x;
+  return `${x.slice(0, keep)}…${x.slice(-keep)}`;
+}
+
+export function esc(s) {
+  return String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+};
+
+export function uptime(ms) {
+  if (!Number.isFinite(ms)) return '–';
+  const s = Math.floor(ms / 1000);
+  const d = Math.floor(s / 86400);
+  const h = Math.floor((s % 86400) / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  return d > 0 ? `${d}d ${h}h` : h > 0 ? `${h}h ${m}m` : `${m}m`;
+}
+
+// THE ONE WARNING THE BANNER DOES NOT SHOW (operator, 2026-09-13, getting ready for release:
+// "how do we get rid of the node warning?" -- "This is a pre-release test build - use at your
+// own risk - do not use for mining or merchant applications").
+//
+// It is TRUE: a node built from source reports itself pre-release on every poll, which means a red
+// caveat sits across the hero permanently and stops meaning anything. The fix is deliberately
+// the narrowest one available -- this exact notice, matched on the phrase bitcoind has always
+// used for it, and nothing else. "unknown new rules activated", a chain reorganisation, an
+// unsupported chainstate: all still land in the banner, in red.
+//
+// WHERE THIS DOES NOT HAPPEN: the server. monitor.js and sync.js keep passing the node's exact
+// words through, so /api/state still reports what the node said and the filter cannot become a
+// way for the monitor to conceal it. This is a presentation choice, applied at the banner.
+const PRE_RELEASE = /pre-release test build/i;
+
+/** The node's warnings, minus the permanent pre-release notice. Never throws on odd input. */
+export function nodeWarnings(list) {
+  if (!Array.isArray(list)) return [];
+  return list.filter((w) => typeof w === 'string' && w.trim() && !PRE_RELEASE.test(w));
+}
+
+/**
+ * Copy text to the clipboard. The monitor is served over plain http on the LAN, where
+ * navigator.clipboard does not exist (it needs a secure context), so a select-and-copy fallback is
+ * kept. Resolves when copied, rejects when the browser refused. (public/js/explorer.js keeps its
+ * own copy of this: that file imports nothing by design.)
+ */
+export function copyText(text) {
+  if (globalThis.navigator?.clipboard && globalThis.isSecureContext) return navigator.clipboard.writeText(text);
+  return new Promise((resolve, reject) => {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.setAttribute('readonly', '');
+    ta.className = 'xclip';
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand?.('copy');
+    ta.remove();
+    if (ok) resolve(); else reject(new Error('copy refused'));
+  });
+}