npm - blockyard - Versions diffs - 0.0.1 → 0.1.0 - Mend

blockyard 0.0.1 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/CHANGELOG.md +929 -0
package/LICENSE +202 -0
package/NOTICE +4 -0
package/README.md +191 -4
package/SECURITY.md +38 -0
package/bin/blockyard.js +41 -0
package/config/pool-map.json +2620 -0
package/docs/API.md +1577 -0
package/docs/ARCHITECTURE.md +1394 -0
package/docs/AUTO-UPDATE.md +269 -0
package/docs/CONFIGURATION.md +847 -0
package/docs/DEFECTS.md +813 -0
package/docs/EFFECTS-AGENTS.md +448 -0
package/docs/GETTING-STARTED.md +205 -0
package/docs/INSTALL.md +547 -0
package/docs/MEASUREMENTS.md +1401 -0
package/docs/RULES.md +681 -0
package/docs/SECURITY-AUDIT-2026-09-14.md +177 -0
package/docs/SECURITY-AUDIT.md +258 -0
package/docs/SECURITY.md +212 -0
package/docs/TROUBLESHOOTING.md +332 -0
package/docs/USER-GUIDE.md +1262 -0
package/package.json +53 -5
package/public/404.html +9 -0
package/public/css/app.css +2009 -0
package/public/donate-qr.png +0 -0
package/public/index.html +1085 -0
package/public/js/about.js +112 -0
package/public/js/agents.js +1141 -0
package/public/js/app.js +1386 -0
package/public/js/arkanoid.js +806 -0
package/public/js/blockanoid.js +347 -0
package/public/js/blockout.js +347 -0
package/public/js/blockpack.js +428 -0
package/public/js/blockscene3d.js +2830 -0
package/public/js/breakout.js +224 -0
package/public/js/charts.js +635 -0
package/public/js/depthchart.js +315 -0
package/public/js/details3d.js +4342 -0
package/public/js/doom.js +31 -0
package/public/js/dosaudio.js +48 -0
package/public/js/dosgame.js +389 -0
package/public/js/dosio.js +186 -0
package/public/js/dospc.js +1353 -0
package/public/js/dosworker.js +196 -0
package/public/js/explorer.js +405 -0
package/public/js/feepalette.js +149 -0
package/public/js/fmt.js +162 -0
package/public/js/goggles.js +886 -0
package/public/js/kiosk.js +41 -0
package/public/js/login.js +88 -0
package/public/js/markets.js +395 -0
package/public/js/mining.js +1416 -0
package/public/js/panels.js +970 -0
package/public/js/pricechart.js +189 -0
package/public/js/quake.js +20 -0
package/public/js/settings.js +1096 -0
package/public/js/soundcard.js +459 -0
package/public/js/tetris.js +226 -0
package/public/js/tetrust.js +356 -0
package/public/js/tetsound.js +175 -0
package/public/js/theme.js +235 -0
package/public/js/wolf3d.js +22 -0
package/public/js/x86.js +1978 -0
package/public/login.html +33 -0
package/scripts/blockfile-measure.js +156 -0
package/scripts/browser-check.mjs +286 -0
package/scripts/check.js +173 -0
package/scripts/decode-check.js +81 -0
package/scripts/doc-counts.js +109 -0
package/scripts/donate-qr.py +23 -0
package/scripts/dos-bench.js +56 -0
package/scripts/fake-node.js +534 -0
package/scripts/index-bench.js +216 -0
package/scripts/index-benchmark.js +117 -0
package/scripts/index-build.js +40 -0
package/scripts/live-render-check.mjs +89 -0
package/scripts/manage-users.js +132 -0
package/scripts/motion-check.mjs +138 -0
package/scripts/pool-map.js +157 -0
package/scripts/setup.js +432 -0
package/scripts/shots.mjs +278 -0
package/scripts/smoke.sh +327 -0
package/scripts/tls.js +31 -0
package/scripts/ui.js +174 -0
package/server/auth/sessions.js +221 -0
package/server/auth/users.js +243 -0
package/server/chain/blockfile.js +234 -0
package/server/chain/index/build.js +210 -0
package/server/chain/index/heights.js +36 -0
package/server/chain/index/live.js +276 -0
package/server/chain/index/rows.js +145 -0
package/server/chain/index/store.js +154 -0
package/server/chain/index/worker.js +109 -0
package/server/chain/tx.js +310 -0
package/server/collect/gbt.js +229 -0
package/server/collect/logparse.js +765 -0
package/server/collect/logtail.js +189 -0
package/server/collect/markets.js +333 -0
package/server/collect/mining.js +333 -0
package/server/collect/monitor.js +2545 -0
package/server/collect/network.js +295 -0
package/server/collect/nextblock.js +275 -0
package/server/collect/sync.js +386 -0
package/server/config.js +644 -0
package/server/http/api.js +1319 -0
package/server/http/explorer.js +418 -0
package/server/http/games.js +77 -0
package/server/http/server.js +420 -0
package/server/http/sse.js +176 -0
package/server/http/static.js +212 -0
package/server/main.js +673 -0
package/server/netinfo.js +253 -0
package/server/rpc/allowlist.js +130 -0
package/server/rpc/client.js +414 -0
package/server/store/audit.js +148 -0
package/server/store/history.js +220 -0
package/server/store/ledger.js +290 -0
package/server/store/ring.js +173 -0
package/server/tls/selfsigned.js +160 -0
package/server/util/fmt.js +29 -0
package/systemd/blockyard.service +102 -0

package/public/index.html ADDED Viewed

@@ -0,0 +1,1085 @@
+<!doctype html>
+<!-- data-blockyard-build is rewritten per response by server/http/static.js, so the page
+     can compare the build it was served against what /api/build says is current and
+     say "this tab is stale" out loud. `%BLOCKYARD_BUILD%` is the placeholder. -->
+<html lang="en" data-blockyard-build="%BLOCKYARD_BUILD%">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="referrer" content="no-referrer">
+<title>BlockYard - Bitcoin node monitor</title>
+<link rel="stylesheet" href="/css/app.css">
+<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffb85c%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23f7931a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23a8640d%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20rx%3D%227.5%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20fill%3D%22%2316110a%22%20opacity%3D%22.14%22%3E%3Crect%20x%3D%224%22%20y%3D%2224.6%22%20width%3D%228%22%20height%3D%223.6%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2224.6%22%20width%3D%226%22%20height%3D%223.6%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2224.6%22%20width%3D%228%22%20height%3D%223.6%22%20rx%3D%221%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%231a1206%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5%208h6.6a4.2%204.2%200%200%201%202.35%207.66A4.4%204.4%200%200%201%2012%2024H5Zm3.3%202.9v3.5h3.1a1.75%201.75%200%200%200%200-3.5Zm0%206.4v3.8h3.4a1.9%201.9%200%200%200%200-3.8Z%22%2F%3E%3Cpath%20fill%3D%22%231a1206%22%20d%3D%22M16.8%208h3.3l2.75%205.3L25.6%208h3.3l-4.85%208.8V24h-3.3v-7.2Z%22%2F%3E%3C%2Fsvg%3E">
+</head>
+<body>
+<div class="app">
+  <header class="top">
+    <!-- The monogram IS the About link (operator: "Make clicking the BlockYard icon the About
+         page then"). A <button data-page> rather than a bare click handler, so it satisfies the
+         same page contract every nav tab does: test/web-contract.test.js holds every
+         `<button data-page>` to a matching <section> and a render case. -->
+    <button type="button" data-page="about" class="brand" id="brandAbout" title="About BlockYard" aria-label="About BlockYard"><svg class="mark" viewBox="0 0 32 32" role="img" aria-label="BlockYard">
+  <defs><linearGradient id="byTile" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#ffb85c"/><stop offset=".55" stop-color="#f7931a"/><stop offset="1" stop-color="#a8640d"/>
+  </linearGradient></defs>
+  <rect x=".5" y=".5" width="31" height="31" rx="7.5" fill="url(#byTile)"/>
+  <g fill="#16110a" opacity=".14"><rect x="4" y="24.6" width="8" height="3.6" rx="1"/><rect x="13" y="24.6" width="6" height="3.6" rx="1"/><rect x="20" y="24.6" width="8" height="3.6" rx="1"/></g>
+  <path fill="#1a1206" fill-rule="evenodd" d="M5 8h6.6a4.2 4.2 0 0 1 2.35 7.66A4.4 4.4 0 0 1 12 24H5Zm3.3 2.9v3.5h3.1a1.75 1.75 0 0 0 0-3.5Zm0 6.4v3.8h3.4a1.9 1.9 0 0 0 0-3.8Z"/>
+  <path fill="#1a1206" d="M16.8 8h3.3l2.75 5.3L25.6 8h3.3l-4.85 8.8V24h-3.3v-7.2Z"/>
+</svg>
+    <span class="wordmark">Block<b>Yard</b></span> <small id="ver"></small></button>
+    <nav class="pages" id="nav">
+      <button data-page="overview" class="on">Overview</button>
+      <button data-page="space">Block space</button>
+      <button data-page="chain">Chain &amp; Sync</button>
+      <button data-page="mempool">Mempool</button>
+      <button data-page="explorer">Explorer</button>
+      <button data-page="markets">Markets</button>
+      <button data-page="kiosk">Kiosk</button>
+      <button data-page="peers">Peers</button>
+      <button data-page="network">Network</button>
+      <button data-page="mining">Mining</button>
+      <button data-page="logs">Events</button>
+      <button data-page="node">Node &amp; RPC</button>
+      <button data-page="admin" id="navAdmin" hidden>Admin</button>
+    </nav>
+    <!-- DIVERSIONS (operator, 2026-09-12: "Move Tetrust and Blockout to the very end of the menu
+         options under a pop-down menu called 'Diversions'"). The toggle deliberately carries no
+         data-page, because a nav button with one is required to have a page section behind it.
+         OUTSIDE <nav>, and that is the whole point (operator, Safari on macOS: "still doesn't work
+         on safari. not clickable"). It used to sit inside `nav.pages`, which is a horizontal
+         scroll container, held at the right edge with `position: sticky; right: 0`. WebKit paints
+         a sticky element in its stuck position but hit-tests it where layout originally put it, so
+         the button was plainly visible and completely dead to the pointer -- in that engine only,
+         which is why every check here passed. Out here it is an ordinary flex item in the header
+         row: no sticky, no scroll container, nothing to go wrong. Being outside <nav> also means
+         the nav's delegated click handler no longer reaches the items, so app.js routes them from
+         the panel's own handler. -->
+    <div class="navmenu" id="navDiv">
+      <button type="button" class="navmenu-btn" id="navDivBtn" aria-haspopup="true" aria-expanded="false">Diversions <span class="navcaret">&#9662;</span></button>
+    </div>
+    <span class="spacer"></span>
+    <div class="meta">
+      <span id="nodePick"></span>
+      <span title="Server-sent events link">stream <b id="sseState" class="warn">connecting</b></span>
+      <span title="Node RPC round trip">rpc <b id="rpcLat">–</b></span>
+      <span title="Monitor uptime">up <b id="appUp">–</b></span>
+      <!-- Shown only when the server reports accounts=false. The posture has to be
+           visible in the page, not inferred from a sign-out button that is missing. -->
+      <span id="accessPill" class="hidden"><b class="badge muted">open access</b></span>
+      <!-- Only shown when the loaded build differs from the served one. Its whole
+           purpose is the case where nothing else on screen has changed. -->
+      <span id="buildNote" class="hidden"><b class="badge bad">stale build</b></span>
+    </div>
+    <div class="userchip">
+      <span class="tiny faint" id="whoami"></span>
+      <button class="btn gear" id="btnSettings" title="Display settings" aria-label="Display settings" aria-expanded="false">
+        <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M 13.94 2 c 0.50 0 0.92 0.37 0.99 0.87 l 0.26 1.85 c 0.50 0.18 0.97 0.41 1.40 0.69 l 1.73 -0.72 c 0.45 -0.19 0.98 -0.02 1.25 0.43 l 1.44 2.50 c 0.26 0.45 0.16 1.02 -0.24 1.28 l -1.47 1.16 c 0.04 0.28 0.06 0.56 0.06 0.84 c 0 0.28 -0.02 0.56 -0.06 0.84 l 1.47 1.16 c 0.40 0.26 0.50 0.83 0.24 1.28 l -1.44 2.50 c -0.27 0.45 -0.80 0.62 -1.25 0.43 l -1.73 -0.72 c -0.43 0.28 -0.90 0.51 -1.40 0.69 l -0.26 1.85 c -0.07 0.50 -0.49 0.87 -0.99 0.87 h -2.88 c -0.50 0 -0.92 -0.37 -0.99 -0.87 l -0.26 -1.85 c -0.50 -0.18 -0.97 -0.41 -1.40 -0.69 l -1.73 0.72 c -0.45 0.19 -0.98 0.02 -1.25 -0.43 l -1.44 -2.50 c -0.26 -0.45 -0.16 -1.02 0.24 -1.28 l 1.47 -1.16 c -0.04 -0.28 -0.06 -0.56 -0.06 -0.84 c 0 -0.28 0.02 -0.56 0.06 -0.84 l -1.47 -1.16 c -0.40 -0.26 -0.50 -0.83 -0.24 -1.28 l 1.44 -2.50 c 0.27 -0.45 0.80 -0.62 1.25 -0.43 l 1.73 0.72 c 0.43 -0.28 0.90 -0.51 1.40 -0.69 l 0.26 -1.85 c 0.07 -0.50 0.49 -0.87 0.99 -0.87 z M 12 8.40 a 3.60 3.60 0 1 0 0 7.20 a 3.60 3.60 0 0 0 0 -7.20 z"/></svg>
+      </button>
+      <button class="btn" id="btnPause" title="Freeze live updates (hold Shift to also stop the event feed)">pause</button>
+      <button class="btn" id="btnLogout">sign out</button>
+    </div>
+  </header>
+  <!-- THE DIVERSIONS PANEL, a direct child of <body> (operator, Safari on macOS: "rendering on
+       safari is still broken. It's only showing half the drop-down contents").
+       It used to sit inside `header.top`, which is `overflow: hidden` and `height: 46px`. The panel
+       opens ~32px down and stands ~88px tall, so everything past the header's 46px was cut -- about
+       half of it, in WebKit. `position: fixed` is supposed to escape an ancestor's overflow, and in
+       Chrome and Firefox it did, which is why this looked fine everywhere it was tested.
+       The settings dialog (.cfgwrap) is the proof of the right shape: also fixed, also an overlay,
+       and it renders correctly in Safari. It sits out here at the top level of .app rather than
+       inside the header, and so does this panel now -- .app is a plain grid with no overflow, no
+       transform and no filter, so nothing between this element and the viewport can clip it or
+       become its containing block. (It is NOT a child of <body>: the page is wrapped in .app. The
+       invariant that matters is "not inside the clipped header", which is what the test pins.)
+       Its button stays in the header; only the panel moved, so app.js positions it from that
+       button's rect and routes the games from here. -->
+  <div class="navmenu-pop hidden" id="navDivPop" role="menu">
+    <button data-page="tetrust" role="menuitem" title="Tetrust: trust, but verify">Tetrust</button>
+    <button data-page="blockout" role="menuitem" title="Blockout: break the wall">Blockout</button>
+    <button data-page="blockanoid" role="menuitem" title="Blockanoid: Vaus, capsules and the minions">Blockanoid</button>
+    <button data-page="wolf3d" role="menuitem" title="Wolfenstein 3D: the shareware WOLF3D.EXE on an emulated PC">Wolfenstein 3D</button>
+    <button data-page="doom" role="menuitem" title="DOOM: the shareware DOOM.EXE on an emulated 486">DOOM</button>
+    <button data-page="quake" role="menuitem" title="Quake: the shareware QUAKE.EXE on an emulated PC">Quake</button>
+  </div>
+  <!-- Display settings (settings.js). Hidden until the gear is pressed; the contents are
+       rendered from settings.js PANEL, so a value and its control cannot drift apart. -->
+  <!-- "View more »" on the Mining tab's cards (2026-09-15): the same card, full screen, drawn by
+       mining.js renderExpand while it is open; Esc, the scrim or the close button shut it. -->
+  <div class="expandwrap hidden" id="expandWrap" role="dialog" aria-modal="true" aria-labelledby="expandTitle">
+    <div class="cfgscrim" id="expandScrim"></div>
+    <section class="expand card">
+      <h3><span id="expandTitle">…</span> <span class="sp"></span><span class="src" id="expandSrc"></span> <button type="button" class="btn" id="expandClose" aria-label="Close">close</button></h3>
+      <div class="expandbody" id="expandBody"></div>
+    </section>
+  </div>
+  <div class="cfgwrap hidden" id="settingsWrap">
+    <div class="cfgscrim" id="settingsScrim"></div>
+    <section class="cfg" id="settingsPanel" role="dialog" aria-modal="true" aria-labelledby="cfgTitle">
+      <h2 id="cfgTitle">Display settings <span class="sp"></span>
+        <button class="btn" id="cfgReset" title="Put every setting back to the shipped default">reset</button>
+        <button class="btn" id="cfgClose" aria-label="Close settings">close</button>
+      </h2>
+      <p class="cfgnote">Saved on the server, so every screen sees the same board; applied as you change them. They change what is drawn, never what is measured.</p>
+      <div id="cfgBody"></div>
+    </section>
+  </div>
+  <main>
+    <div id="offline" class="offline-bar hidden"></div>
+    <!-- ======================================================== OVERVIEW -->
+    <section class="page on" data-page="overview">
+      <div class="grid">
+        <div data-sync-hero="overview"></div>
+        <!-- The markets summary, between the sync strip and Block flow (operator, 2026-09-13:
+             "We really need to squeeze this line into the top of the Overview"). Hidden unless
+             markets.overviewSummary is on: the figures need the exchange feed, and Overview is
+             the landing page -- see the note on that setting. Same class as the Markets page's
+             own line, and filled by the same summaryHtml(), so the two cannot drift. -->
+        <div class="mksum ovmksum" id="ovMkSummary" hidden></div>
+        <!-- Two independent stacks (operator, 2026-09-11: "Still too much empty
+             space here. Need to compress the mempool and fees view at the very
+             least to sit side-by-side"). A shared grid row coupled the columns,
+             so whichever side was taller padded the other; here each column
+             stacks on its own, and the last card of each takes the height that
+             is left and scrolls inside it. -->
+        <div class="ovcols">
+          <div class="ovcol">
+            <div class="card w8 flowtight">
+              <h3>Block flow <span class="sp"></span><span class="src">being assembled → <b>the current block</b> → history · <a href="#mining">packages &amp; goggles</a></span></h3>
+              <div id="ovTrain" class="flowwrap"></div>
+            </div>
+            <div class="ovpair">
+              <div class="card w5" id="ovMempoolCard">
+                <h3>Mempool <span class="sp"></span><span class="src">getmempoolinfo · vs blocks mined</span></h3>
+                <div class="metric"><div class="l">transactions</div><div><span class="v" id="ovMpCount">–</span><span class="u">tx</span></div>
+                  <div class="s" id="ovMpBytes">–</div></div>
+                <canvas class="chart xs" id="ovMpChart"></canvas>
+                <div class="s faint" id="ovMpVsBlock">–</div>
+                <div class="kv" id="ovMpVsBlockKv"></div>
+              </div>
+              <div class="card w3 compact" id="ovFeesCard">
+                <h3>Fees <span class="sp"></span><span class="src">estimatesmartfee</span></h3>
+                <div class="kv" id="ovFees"><dt>–</dt></div>
+                <canvas class="chart xs" id="ovFeeChart"></canvas>
+              </div>
+            </div>
+            <div class="card w8" id="ovBlocksCard">
+              <h3>Last blocks <span class="sp"></span><span class="src">getblockstats + [block] stored</span></h3>
+              <div class="scroll md">
+                <table class="t" id="ovBlocks">
+                  <thead><tr><th>height</th><th>age</th><th>gap</th><th class="r">txs</th><th class="r">size</th><th class="r">vsize</th><th class="r">fees (btc)</th><th class="r">min fee rate</th><th>from peer</th></tr></thead>
+                  <tbody></tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div class="ovcol">
+            <div class="card w8">
+              <h3>Block space <span class="sp"></span><span class="src">area = vbytes, colour = feerate paid</span></h3>
+              <div class="treemapwrap sq">
+                <canvas class="treemap" id="ovGnTreemap"></canvas><div class="viewer-ctl"><div class="refresh-in" data-refresh></div><button type="button" class="refresh-now" data-refresh-now disabled>refresh now</button></div>
+                <div class="goggles-tip hidden"></div>
+              </div>
+              <div class="note tiny faint" id="ovGnTreemapNote"></div>
+            </div>
+            <div class="card w4" id="ovEventsCard">
+              <h3>Monitor events <span class="sp"></span><span class="src">what this monitor observed; not node log lines</span></h3>
+              <div class="feed" id="ovFeed"></div>
+            </div>
+          </div>
+        </div>
+        <div class="card w12">
+          <h3>Mined by <span class="sp"></span><span class="src">coinbase text + curated labels</span></h3>
+          <div id="ovMiningPools"></div>
+        </div>
+        <div class="card w12" id="ovCaveats"></div>
+      </div>
+    </section>
+    <!-- ===================================================== BLOCK SPACE -->
+    <!-- The viewer at full size, with the block being built and the chain tip
+         beside it (operator, 2026-09-11: "blockspace viewer really deserves its
+         own tab so it can run in a large window. Try to incorporate current
+         block building, and tip information into the one panel as well"). -->
+    <section class="page" data-page="space">
+      <div class="card w12" id="spaceCard">
+        <h3>Block space <span class="sp"></span><span class="src">the next block's worth of the mempool, richest first · area = vbytes, colour = feerate paid</span></h3>
+        <div class="spacelayout">
+          <div class="treemapwrap space">
+            <canvas class="treemap" id="spTreemap"></canvas><div class="viewer-ctl"><div class="refresh-in" data-refresh></div><button type="button" class="refresh-now" data-refresh-now disabled>refresh now</button></div>
+            <div class="goggles-tip hidden"></div>
+          </div>
+          <aside class="spacehud">
+            <div class="hud" id="spNext"></div>
+            <div class="hud" id="spTip"></div>
+            <div class="hud" id="spLegend"></div>
+          </aside>
+        </div>
+        <div class="note tiny faint" id="spNote"></div>
+      </div>
+    </section>
+    <!-- ==================================================== CHAIN & SYNC -->
+    <section class="page" data-page="chain">
+      <div class="grid chgrid">
+        <div data-sync-hero="chain"></div>
+        <!-- THREE ACROSS, SHORT (operator, 2026-09-11: "surely we can fit more info on here").
+             Two columns of tall charts made the page 1,518 px at 1483 x 1000 and 1,762 at
+             1280 x 860; the tip chart is a flat line once synced, and Chain state was a 12-row
+             single column. Charts are three to a row at 110 px (tip progression last), the
+             state and UTXO/difficulty cards three across with two-column lists. -->
+        <div class="card w4">
+          <h3>Block interval <span class="sp"></span><span class="src">inter-arrival, last 24h</span></h3>
+          <canvas class="chart" id="chGapChart"></canvas>
+          <div class="note tiny faint" id="chGapNote"></div>
+        </div>
+        <div class="card w4">
+          <h3>Block size <span class="sp"></span><span class="src">bytes, sum of transaction sizes</span></h3>
+          <canvas class="chart" id="chSizeChart"></canvas>
+          <div class="note tiny faint" id="chSizeNote"></div>
+        </div>
+        <div class="card w4">
+          <h3>Fees per block <span class="sp"></span><span class="src">satsoshis</span></h3>
+          <canvas class="chart" id="chFeeChart"></canvas>
+        </div>
+        <div class="card w4">
+          <h3>Transactions per block <span class="sp"></span><span class="src">count</span></h3>
+          <canvas class="chart" id="chTxChart"></canvas>
+        </div>
+        <div class="card w4">
+          <h3>Transaction rate <span class="sp"></span><span class="src">getchaintxstats txrate</span></h3>
+          <canvas class="chart" id="chTxRateChart"></canvas>
+          <div class="mksum mt-6 chtx" id="chTxStats"></div>
+        </div>
+        <div class="card w4">
+          <h3>Tip progression <span class="sp"></span><span class="src">blocks vs headers</span></h3>
+          <canvas class="chart" id="chTipChart"></canvas>
+          <div class="note tiny faint" id="chTipNote"></div>
+        </div>
+        <div class="card w4">
+          <h3>Chain state <span class="sp"></span><span class="src">getblockchaininfo</span></h3>
+          <dl class="kv two" id="chState"></dl>
+        </div>
+        <div class="card w4">
+          <h3>UTXO set <span class="sp"></span><span class="src">gettxoutsetinfo</span></h3>
+          <dl class="kv" id="chUtxo"></dl>
+          <canvas class="chart short" id="chUtxoChart"></canvas>
+        </div>
+        <div class="card w4">
+          <h3>Difficulty &amp; work <span class="sp"></span><span class="src">difficulty</span></h3>
+          <dl class="kv" id="chDiff"></dl>
+          <canvas class="chart short" id="chDiffChart"></canvas>
+        </div>
+        <div class="card w6">
+          <h3>Block drill-down <span class="sp"></span><span class="src">getblock verbosity=1 + getblockstats</span></h3>
+          <div class="rowform">
+            <input class="f grow minw-180" id="bdQuery" placeholder="height or block hash (blank = current tip)" autocomplete="off">
+            <button class="btn primary" id="bdRun">inspect</button>
+          </div>
+          <div class="note tiny faint" id="bdNote">Header, statistics and the first page of txids. Not the block's transactions: this node returns 11 MB of hex for one verbose block, and its verbose form still omits Core's fee fields.</div>
+          <dl class="kv" id="bdHeader"></dl>
+          <div class="txid-list" id="bdTxids"></div>
+          <div class="drill" id="bdTx"></div>
+        </div>
+        <div class="card w6">
+          <h3>Indexes <span class="sp"></span><span class="src">getindexinfo</span></h3>
+          <table class="t" id="chIndexes"><thead><tr><th>index</th><th class="r">height</th><th>synced</th></tr></thead><tbody></tbody></table>
+          <div class="hr"></div>
+          <h3>Chain tips <span class="sp"></span><span class="src">getchaintips</span></h3>
+          <table class="t" id="chTips"><thead><tr><th>height</th><th class="r">branchlen</th><th>status</th></tr></thead><tbody></tbody></table>
+        </div>
+      </div>
+    </section>
+    <!-- ========================================================== ABOUT -->
+    <!-- Reached from the monogram, not from a nav tab. The galaxy is the point here, not a
+         backdrop: this is the one page with no data for it to obscure. -->
+    <section class="page" data-page="about">
+      <div class="aboutwrap">
+        <canvas class="absky" id="abSky"></canvas>
+        <div class="aboutinner">
+          <div class="abhead">
+            <svg class="ablogo" viewBox="0 0 32 32" role="img" aria-label="BlockYard">
+              <defs><linearGradient id="abTile" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0" stop-color="#ffb85c"/><stop offset=".55" stop-color="#f7931a"/><stop offset="1" stop-color="#a8640d"/>
+              </linearGradient></defs>
+              <rect x=".5" y=".5" width="31" height="31" rx="7.5" fill="url(#abTile)"/>
+              <g fill="#16110a" opacity=".14"><rect x="4" y="24.6" width="8" height="3.6" rx="1"/><rect x="13" y="24.6" width="6" height="3.6" rx="1"/><rect x="20" y="24.6" width="8" height="3.6" rx="1"/></g>
+              <path fill="#1a1206" fill-rule="evenodd" d="M5 8h6.6a4.2 4.2 0 0 1 2.35 7.66A4.4 4.4 0 0 1 12 24H5Zm3.3 2.9v3.5h3.1a1.75 1.75 0 0 0 0-3.5Zm0 6.4v3.8h3.4a1.9 1.9 0 0 0 0-3.8Z"/>
+              <path fill="#1a1206" d="M16.8 8h3.3l2.75 5.3L25.6 8h3.3l-4.85 8.8V24h-3.3v-7.2Z"/>
+            </svg>
+            <div>
+              <h1>Block<b>Yard</b></h1>
+              <p>A self-hosted monitor, block explorer, markets view and 3D block-space viewer for a Bitcoin node. No dependencies, no telemetry, read-only toward your node.</p>
+            </div>
+          </div>
+          <div class="abcols">
+            <section class="abcard"><h3>This monitor</h3><div id="abApp"></div></section>
+            <section class="abcard"><h3>Host</h3><div id="abHost"></div></section>
+            <section class="abcard"><h3>Bitcoin node</h3><div id="abNode"></div></section>
+          </div>
+          <div class="ablinks">
+          <a class="abgh" href="https://github.com/BobClawblaw/blockyard" target="_blank" rel="noopener noreferrer">
+            <!-- The GitHub mark, GitHub's trademark, used to link to the project on GitHub. -->
+            <svg viewBox="0 0 16 16" width="20" height="20" aria-hidden="true" focusable="false" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>
+            <span>github.com/BobClawblaw/blockyard</span>
+          </a>
+          <!-- The donation address: one click copies it (operator, 2026-09-14). A button, not a link:
+               there is nowhere to go, and the address is the whole point. -->
+          <button type="button" class="abdon" id="abDonate" data-copy="bc1q249cv27lc2q7y0x53vkczgfvvgsjzhwxwv42gc" title="click to copy the address">
+            <!-- The QR is the address itself, generated once (scripts/donate-qr.py) and checked to decode back to it.
+                 A PNG, not an inline SVG: Safari on the first Mac install painted the SVG's white ground and
+                 not one of its 800 module rects (2026-09-15), and a bitmap is painted the same everywhere. -->
+            <img class="abqr" src="/donate-qr.png" width="132" height="132" alt="QR code of the donation address" decoding="async">
+            <span class="abdontext">
+              <span class="abdonlbl"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="11" fill="var(--accent)"/><path fill="#1a1206" d="M9.2 6.2h1.5V4.8h1.6v1.4h1.1V4.8H15v1.5c1.6.3 2.6 1.2 2.6 2.7 0 1-.5 1.8-1.3 2.2 1.2.4 1.9 1.3 1.9 2.6 0 1.8-1.3 2.8-3.2 3v1.5h-1.6v-1.4h-1.1v1.4h-1.6v-1.5H9.2v-1.8h1.1V8h-1.1zm2.6 3.9h1.7c1 0 1.6-.4 1.6-1.2 0-.8-.6-1.2-1.6-1.2h-1.7zm0 4.4h2c1.1 0 1.8-.5 1.8-1.3s-.7-1.3-1.8-1.3h-2z"/></svg> If BlockYard is useful, tips are welcome</span>
+              <code>bc1q249cv27lc2q7y0x53vkczgfvvgsjzhwxwv42gc</code>
+              <span class="abdonhint">scan, or click to copy</span>
+            </span>
+          </button>
+          </div>
+          <p class="abcredit">Entirely made by machines. Directed by human hands.</p>
+        </div>
+      </div>
+    </section>
+    <!-- ======================================================== MEMPOOL -->
+    <section class="page" data-page="mempool">
+      <div class="grid">
+        <!-- Two independent stacks, like the Overview (operator, 2026-09-11: "Too
+             much wasted space on this panel. We should compress, and add the
+             mempool display here too in a smaller panel"). The Pool usage card is
+             compact -- gauge beside its figures -- and the Block space viewer (the
+             same one as Overview, Mining and Block space) sits in the narrower
+             right column. -->
+        <div class="mpcols">
+          <!-- TWO COLUMNS, THE RIGHT ONE WIDER (operator, 2026-09-12: "Why can't we put Age
+               distribution next to Fee rate vs age under Fee estimates over time"). No reason at
+               all, and it balances the page: with three equal columns the figures-and-histogram
+               column ran 659px at a 1600px window while the other two sat at 375 and 392 -- a 284px
+               spread. The two distributions share a row under the time series instead.
+               These are flex columns, not a grid of cards: a grid stretches every card to its row's
+               tallest, which is what once held Mempool size open with ~130px of nothing inside it.
+               Here each card is exactly as tall as its contents. -->
+          <div class="ovcol">
+            <div class="card w3" id="mpUsageCard">
+              <h3>Pool usage <span class="sp"></span><span class="src">usage / maxmempool</span></h3>
+              <div class="mpusage">
+                <canvas class="chart meter" id="mpMeter"></canvas>
+                <dl class="kv" id="mpLimits"></dl>
+              </div>
+            </div>
+            <div class="card w6">
+              <h3>Fee rate distribution <span class="sp"></span><span class="src">sat/vB from getrawmempool (RPC)</span></h3>
+              <canvas class="chart" id="mpHistChart"></canvas>
+              <div class="note tiny faint" id="mpHistNote"></div>
+            </div>
+          </div>
+          <!-- No Block space viewer on this page (operator: "just remove the block space panel from
+               mempool entirely"). It lives on Overview, Block space and Mining; here it was the
+               tallest thing by a distance -- square, so its width was its height -- and it spent
+               most of this page's layout budget. -->
+          <div class="ovcol">
+            <div class="card w5">
+              <h3>Mempool size <span class="sp"></span><span class="src">count and bytes</span></h3>
+              <canvas class="chart" id="mpSizeChart"></canvas>
+            </div>
+            <div class="card w4">
+              <h3>Fee estimates over time <span class="sp"></span><span class="src">sat/vB</span></h3>
+              <canvas class="chart" id="mpFeeChart"></canvas>
+            </div>
+            <!-- the two distributions, side by side, under the time series -->
+            <div class="mprow">
+              <div class="card w6">
+                <h3>Fee rate vs age <span class="sp"></span><span class="src">sampled scatter</span></h3>
+                <canvas class="chart" id="mpScatter"></canvas>
+                <div class="note tiny faint" id="mpScatterNote"></div>
+              </div>
+              <div class="card w4">
+                <h3>Age distribution <span class="sp"></span><span class="src">seconds in pool</span></h3>
+                <canvas class="chart" id="mpAgeChart"></canvas>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- WHAT THIS NODE CANNOT TELL US, as a strip rather than as rows. All three are absences:
+             two need the node's log (off on a monitor running RPC-only) and the third lists fields
+             getrawmempool omits. They are worth stating and not worth a third of the page. -->
+        <div class="card w4" id="mpAcceptCard">
+          <h3>Ingest &amp; rejects <span class="sp"></span><span class="src">from the node's log</span></h3>
+          <dl class="kv" id="mpAccept"></dl>
+          <canvas class="chart short" id="mpIngestChart"></canvas>
+        </div>
+        <div class="card w4" id="mpOrphansCard">
+          <h3>Orphan pool <span class="sp"></span><span class="src">held, parked and resolved</span></h3>
+          <dl class="kv" id="mpOrphans"></dl>
+          <canvas class="chart short" id="mpOrphanChart"></canvas>
+        </div>
+        <div class="card w4">
+          <h3>Fields this node does not report <span class="sp"></span><span class="src">getrawmempool shape</span></h3>
+          <div class="note" id="mpNotReported"></div>
+        </div>
+      </div>
+    </section>
+    <!-- ========================================================== PEERS -->
+    <!-- ========================================================== KIOSK -->
+    <!-- The 3D Markets board and the Block space board side by side (public/js/kiosk.js). -->
+    <section class="page" data-page="kiosk">
+      <div class="kiosk" id="kiosk">
+        <div class="kcol">
+        <div class="kpanel kmk">
+          <div class="khead"><b>Markets</b><span class="faint" id="kMkLabel"></span></div>
+          <div class="treemapwrap kboard"><canvas class="treemap" id="kMarkets"></canvas><div class="goggles-tip hidden"></div></div>
+        </div>
+        <!-- the price text in a panel of its own (operator: "Create a new panel for the price text to
+             exist in, and keep the markets in it's own panel") -->
+        <!-- PRICE AND THE BOOK, in one panel of its own (operator, 2026-09-12: "Make it a new
+             panel with price, obviously"). The chart needs real height, which it cannot get as a
+             strip under the markets board, so the panel is sized like the Block flow one. -->
+        <div class="kpanel kpp">
+          <div class="khead"><b>Price &amp; order book depth</b><span class="faint">five exchanges' tickers, and their books</span></div>
+          <div class="kprice" id="kPrice"></div>
+          <!-- The depth chart is a SIBLING of #kPrice, not a child: renderPriceInfo replaces that
+               element's innerHTML on every refresh, which would destroy a canvas inside it. -->
+          <div class="kdepthwrap"><canvas class="kdepth" id="kDepth"></canvas></div>
+        </div>
+        </div>
+        <div class="kcol">
+        <div class="kpanel ksp">
+          <div class="khead"><b>Block space</b><span class="faint">the next block's worth of the mempool</span></div>
+          <div class="treemapwrap kboard"><canvas class="treemap" id="kSpace"></canvas><div class="viewer-ctl"><div class="refresh-in" data-refresh></div><button type="button" class="refresh-now" data-refresh-now disabled>refresh now</button></div><div class="goggles-tip hidden"></div></div>
+        </div>
+        <div class="kpanel kbf flowtight">
+          <!-- the full-screen button lives in this head now (2026-09-15): floated at the kiosk's
+               corner it sat over the flow's cards once the strip was tightened -->
+          <div class="khead"><b>Block flow</b><span class="faint">projected → being built → the chain</span><span class="sp"></span><button type="button" class="kfull" id="kFull" title="full screen">full screen</button></div>
+          <div id="kTrain" class="flowwrap"></div>
+        </div>
+        </div>
+      </div>
+    </section>
+    <!-- TETRUST: a Tetris on the 3D engine (operator, 2026-09-12). The well is a board3d, so it wears
+         every display setting the Block space board does: stars, the galaxy, neon edges, the sheen. -->
+    <!-- BLOCKOUT (public/js/blockout.js, rules in breakout.js): Breakout on the block engine. The
+         court is a board3d, the bricks are one grid cell each, and the panel behind it is the same
+         sky the Block space board draws. -->
+    <section class="page" data-page="blockout">
+      <div class="tetrust" id="blockout">
+        <div class="card tetcard bocard">
+          <canvas class="tetsky" id="boSky"></canvas>
+          <h3>Blockout <span class="sp"></span><span class="src">break the wall — the bat follows your mouse</span></h3>
+          <div class="treemapwrap tetwell bowell idle" id="boWellWrap">
+            <canvas class="treemap" id="boWell"></canvas>
+          </div>
+          <div class="tetover" id="boOver">
+            <div class="tetmsg" id="boMsg">Blockout</div>
+            <div class="tetsub" id="boSub"></div>
+            <button type="button" class="btn primary" id="boResume">play</button>
+          </div>
+        </div>
+        <div class="card tethud">
+          <h3>Score</h3>
+          <div class="tetstats" id="boStats"></div>
+          <h3>Keys</h3>
+          <div class="tetkeys">move the mouse over the court, or ← → / A D · space or click serves · P pause · Enter play</div>
+          <h3>Switches</h3>
+          <div class="tetswitches">
+            <button type="button" class="tetsw" id="boStars" aria-pressed="false" title="the star field across the panel">★ stars</button>
+            <button type="button" class="tetsw" id="boGalaxy" aria-pressed="false" title="the spiral galaxy in that sky">🌀 galaxy</button>
+            <button type="button" class="tetsw" id="boNeon" aria-pressed="false" title="the wall under lit neon tubes">◉ neon</button>
+            <button type="button" class="tetsw" id="boSfx" aria-pressed="false" title="bat, bricks, walls and a lost ball">♫ sound</button>
+          </div>
+          <h3>High scores <span class="sp"></span><span class="src">this browser</span></h3>
+          <table class="tetscores" id="boScores"></table>
+        </div>
+      </div>
+    </section>
+    <!-- BLOCKANOID (public/js/blockanoid.js, rules in arkanoid.js): Arkanoid on the block engine.
+         A narrower, taller court than Blockout's; silver bricks survive a hit, gold survives every
+         hit, and a broken brick may drop a capsule. Vaus turns red while the laser is up. -->
+    <section class="page" data-page="blockanoid">
+      <div class="tetrust" id="blockanoid">
+        <div class="card tetcard bacard">
+          <canvas class="tetsky" id="baSky"></canvas>
+          <h3>Blockanoid <span class="sp"></span><span class="src">catch the capsules — Vaus follows your mouse</span></h3>
+          <div class="treemapwrap tetwell banwell idle" id="baWellWrap">
+            <canvas class="treemap" id="baWell"></canvas>
+          </div>
+          <div class="tetover" id="baOver">
+            <div class="tetmsg" id="baMsg">Blockanoid</div>
+            <div class="tetsub" id="baSub"></div>
+            <button type="button" class="btn primary" id="baResume">play</button>
+          </div>
+        </div>
+        <div class="card tethud">
+          <h3>Score</h3>
+          <div class="tetstats" id="baStats"></div>
+          <h3>Capsules</h3>
+          <!-- Each capsule has its own SHAPE on the court, not just its own colour, so the legend
+               names the shape too -- the swatch is a class, never a style attribute (CSP). -->
+          <ul class="caplegend">
+            <li><i class="capsw cap-laser">L</i><b>laser</b><span>twin cannons</span></li>
+            <li><i class="capsw cap-enlarge">E</i><b>wide</b><span>flat bar, capped ends</span></li>
+            <li><i class="capsw cap-catch">C</i><b>catch</b><span>ball in a cradle</span></li>
+            <li><i class="capsw cap-slow">S</i><b>slow</b><span>hollow frame</span></li>
+            <li><i class="capsw cap-disrupt">D</i><b>three balls</b><span>three beads</span></li>
+            <li><i class="capsw cap-player">P</i><b>a life</b><span>tall tower</span></li>
+          </ul>
+          <h3>Keys</h3>
+          <div class="tetkeys">move the mouse over the court, or ← → / A D · space or click serves · the laser fires itself while armed · P pause · Enter play</div>
+          <h3>Switches</h3>
+          <div class="tetswitches">
+            <button type="button" class="tetsw" id="baStars" aria-pressed="false" title="the star field across the panel">★ stars</button>
+            <button type="button" class="tetsw" id="baGalaxy" aria-pressed="false" title="the spiral galaxy in that sky">🌀 galaxy</button>
+            <button type="button" class="tetsw" id="baNeon" aria-pressed="false" title="the wall under lit neon tubes">◉ neon</button>
+            <button type="button" class="tetsw" id="baSfx" aria-pressed="false" title="Vaus, bricks, capsules, the laser and a lost ball">♫ sound</button>
+          </div>
+          <h3>High scores <span class="sp"></span><span class="src">this browser</span></h3>
+          <table class="tetscores" id="baScores"></table>
+        </div>
+      </div>
+    </section>
+    <section class="page" data-page="tetrust">
+      <div class="tetrust" id="tetrust">
+        <div class="card tetcard">
+          <canvas class="tetsky" id="tetSky"></canvas>
+          <h3>Tetrust <span class="sp"></span><span class="src">trust, but verify — every line you clear is a block you verified</span></h3>
+          <div class="treemapwrap tetwell idle" id="tetWellWrap">
+            <canvas class="treemap" id="tetWell"></canvas>
+          </div>
+          <div class="tetover" id="tetOver">
+            <div class="tetmsg" id="tetMsg">Tetrust</div>
+            <div class="tetsub" id="tetSub"></div>
+            <button type="button" class="btn primary" id="tetResume">play</button>
+          </div>
+        </div>
+        <div class="card tethud">
+          <h3>Score</h3>
+          <div class="tetstats" id="tetStats"></div>
+          <h3>Next</h3>
+          <div class="treemapwrap tetnext"><canvas class="treemap" id="tetNext"></canvas></div>
+          <h3>Keys</h3>
+          <div class="tetkeys">← → or A D move · ↑ W or X rotate · Z or Q rotate back · ↓ or S soft drop · space hard drop · P pause · Enter play</div>
+          <h3>Switches</h3>
+          <div class="tetswitches">
+            <button type="button" class="tetsw" id="tetStars" aria-pressed="false" title="the star field across the panel">★ stars</button>
+            <button type="button" class="tetsw" id="tetGalaxy" aria-pressed="false" title="the spiral galaxy in that sky">🌀 galaxy</button>
+            <button type="button" class="tetsw" id="tetMusic" aria-pressed="false" title="Korobeiniki, on oscillators">♪ music</button>
+            <button type="button" class="tetsw" id="tetSfx" aria-pressed="false" title="move, rotate, drop, clear, game over">♫ sound</button>
+          </div>
+          <h3>High scores <span class="sp"></span><span class="src">this browser</span></h3>
+          <table class="tetscores" id="tetScores"></table>
+        </div>
+      </div>
+    </section>
+    <!-- WOLFENSTEIN 3D (public/js/wolf3d.js): the shareware WOLF3D.EXE v1.4 from games/wolf3d_dos/,
+         unmodified, on the same emulated PC -- this time in real mode, as a 16-bit DOS program. -->
+    <section class="page" data-page="wolf3d">
+      <div class="tetrust dosgame" id="wolf3d">
+        <div class="card doscard">
+          <h3>Wolfenstein 3D <span class="sp"></span><span class="src">shareware v1.4 · Escape from Wolfenstein · on an emulated PC</span></h3>
+          <div class="doswrap" id="wolfWrap">
+            <canvas class="dosscreen" id="wolfScreen" width="320" height="200"></canvas>
+            <div class="tetover" id="wolfOver">
+              <div class="tetmsg" id="wolfMsg">Wolfenstein 3D</div>
+              <div class="tetsub" id="wolfSub"></div>
+              <button type="button" class="btn primary" id="wolfPlay">play</button>
+            </div>
+            <button type="button" class="btn primary dosagain hidden" id="wolfPlay2">play again</button>
+          </div>
+        </div>
+        <div class="card tethud">
+          <h3>Machine</h3>
+          <div class="tetstats" id="wolfStatus"></div>
+          <h3>Keys</h3>
+          <div class="tetkeys" id="wolfKeys"></div>
+          <div class="tetkeys">click the screen to capture the mouse (Esc gives it back): moving it turns, forward and back walk, left click fires</div>
+          <h3>Switches</h3>
+          <div class="tetswitches">
+            <button type="button" class="tetsw" id="wolfSound" aria-pressed="false" title="the Sound Blaster: AdLib music and digitised effects">♫ sound</button>
+            <button type="button" class="tetsw" id="wolfSmooth" aria-pressed="false" title="smooth the 320x200 picture instead of showing its pixels">◌ smooth</button>
+            <button type="button" class="tetsw" id="wolfFull" title="the screen alone, full screen">⛶ full screen</button>
+          </div>
+          <h3>About</h3>
+          <div class="tetkeys">Wolfenstein 3D is id Software's (1992, published by Apogee), from the shareware files in <code>games/wolf3d_dos/</code> on this server. The PC under it is BlockYard's own, here running in real mode: a 16-bit DOS program with a VGA and a Sound Blaster, written in JavaScript with no dependencies. Savegames and settings stay in this browser.</div>
+        </div>
+      </div>
+    </section>
+    <!-- DOOM (public/js/doom.js): the shareware DOOM.EXE v1.9 from games/doom_dos/, unmodified, on a PC this
+         repository emulates -- x86.js the CPU, dospc.js DOS/4GW and the hardware, soundcard.js a
+         Sound Blaster Pro 2 -- running in a worker (dosworker.js). The canvas is the monitor. -->
+    <section class="page" data-page="doom">
+      <div class="tetrust dosgame" id="doom">
+        <div class="card doscard">
+          <h3>DOOM <span class="sp"></span><span class="src">shareware v1.9 · Knee-Deep in the Dead · on an emulated 486</span></h3>
+          <div class="doswrap" id="doomWrap">
+            <canvas class="dosscreen" id="doomScreen" width="320" height="200"></canvas>
+            <div class="tetover" id="doomOver">
+              <div class="tetmsg" id="doomMsg">DOOM</div>
+              <div class="tetsub" id="doomSub"></div>
+              <button type="button" class="btn primary" id="doomPlay">play</button>
+            </div>
+            <button type="button" class="btn primary dosagain hidden" id="doomPlay2">play again</button>
+          </div>
+        </div>
+        <div class="card tethud">
+          <h3>Machine</h3>
+          <div class="tetstats" id="doomStatus"></div>
+          <h3>Keys</h3>
+          <div class="tetkeys" id="doomKeys"></div>
+          <div class="tetkeys">click the screen to capture the mouse (Esc gives it back) · left fire · right strafe · middle walk</div>
+          <h3>Switches</h3>
+          <div class="tetswitches">
+            <button type="button" class="tetsw" id="doomSound" aria-pressed="false" title="the Sound Blaster: effects and the OPL music">♫ sound</button>
+            <button type="button" class="tetsw" id="doomWasd" aria-pressed="false" title="W A S D to walk and strafe, E to open (on by default); off gives DOOM's own arrows, Space and Alt. Applies at once">⌨ WASD</button>
+            <button type="button" class="tetsw" id="doomSmooth" aria-pressed="false" title="smooth the 320x200 picture instead of showing its pixels">◌ smooth</button>
+            <button type="button" class="tetsw" id="doomFull" title="the screen alone, full screen">⛶ full screen</button>
+          </div>
+          <h3>About</h3>
+          <div class="tetkeys">DOOM is id Software's (1993), from the shareware files in <code>games/doom_dos/</code> on this server. The PC under it is BlockYard's own: an i386, DOS/4GW, a VGA and a Sound Blaster written in JavaScript, with no dependencies. Savegames and settings stay in this browser.</div>
+        </div>
+      </div>
+    </section>
+    <!-- QUAKE (public/js/quake.js): the shareware QUAKE.EXE v1.06 from games/quake_dos/, unmodified, on the
+         same emulated PC as DOOM -- this time playing the go32 stub and CWSDPMI for a DJGPP program. -->
+    <section class="page" data-page="quake">
+      <div class="tetrust dosgame" id="quake">
+        <div class="card doscard">
+          <h3>Quake <span class="sp"></span><span class="src">shareware v1.06 · Dimension of the Doomed · on an emulated PC</span></h3>
+          <div class="doswrap" id="quakeWrap">
+            <canvas class="dosscreen" id="quakeScreen" width="320" height="200"></canvas>
+            <div class="tetover" id="quakeOver">
+              <div class="tetmsg" id="quakeMsg">Quake</div>
+              <div class="tetsub" id="quakeSub"></div>
+              <button type="button" class="btn primary" id="quakePlay">play</button>
+            </div>
+            <button type="button" class="btn primary dosagain hidden" id="quakePlay2">play again</button>
+          </div>
+        </div>
+        <div class="card tethud">
+          <h3>Machine</h3>
+          <div class="tetstats" id="quakeStatus"></div>
+          <h3>Keys</h3>
+          <div class="tetkeys" id="quakeKeys"></div>
+          <div class="tetkeys">click the screen to capture the mouse (Esc gives it back) · W A S D and mouse look to start with; rebind anything in Quake's own options menu</div>
+          <h3>Switches</h3>
+          <div class="tetswitches">
+            <button type="button" class="tetsw" id="quakeSound" aria-pressed="false" title="the Sound Blaster: Quake's effects (its music was on the CD)">♫ sound</button>
+            <button type="button" class="tetsw" id="quakeSmooth" aria-pressed="false" title="smooth the 320x200 picture instead of showing its pixels">◌ smooth</button>
+            <button type="button" class="tetsw" id="quakeFull" title="the screen alone, full screen">⛶ full screen</button>
+          </div>
+          <h3>About</h3>
+          <div class="tetkeys">Quake is id Software's (1996), from the shareware files in <code>games/quake_dos/</code> on this server. The PC under it is BlockYard's own: an i386 with its FPU, a DPMI host, a VGA and a Sound Blaster written in JavaScript, with no dependencies. Savegames and settings stay in this browser.</div>
+        </div>
+      </div>
+    </section>
+    <!-- ======================================================== MARKETS -->
+    <!-- Exchange prices on the block-space board (public/js/markets.js, server/collect/markets.js). -->
+    <section class="page" data-page="markets">
+      <div class="grid">
+        <div class="card w12 mkcard">
+          <h3>Markets <span class="sp"></span><span class="src">public exchange APIs · hourly candles · fetched only while this tab is open</span></h3>
+          <div class="mkbar" id="mkBar"></div>
+          <!-- THE VISUALIZER FIRST (operator: "move the 3D View to the top of the markets display. That
+               should be our main selling point, is the spectacular visualizer") -->
+          <!-- ONE PRICE VIEW AT A TIME (operator, 2026-09-12: "have a selector for either the 3D
+               view or 2D view for price. Not both at the same time. Too much waste of space for
+               that screen"). Both elements stay in the page -- the toolbar switches between them
+               live, and markets.js skips the DRAW for whichever is hidden, so the unseen one costs
+               nothing per refresh. The 3D board keeps its place first; a test pins that order. -->
+          <!-- THE FIGURES SIT UNDER THE TOOLBAR IN BOTH VIEWS (operator, 2026-09-12: of the median,
+               spread, volume and reporting line, "that line is also missing on the 3D view"). It was
+               never missing -- it sat AFTER the board in the markup, so with the flat chart showing
+               it landed 37px under the toolbar, and with the 600px board showing it was pushed 647px
+               down and stranded below the picture. Measured both ways. One line of figures belongs
+               with the price, whichever way the price is drawn. -->
+          <div class="mksum" id="mkSummary"></div>
+          <!-- No legend beside the board (operator, 2026-09-12: "get rid of this. takes up too much
+               space on the markets page"). It was a 250px column of prose explaining that a green
+               body closed up and a red one closed down, next to a chart that shows exactly that.
+               The board takes the full width now. -->
+          <div class="mklayout" id="mkLayout">
+            <div class="treemapwrap mkboard"><canvas class="treemap" id="mkBoard"></canvas><div class="goggles-tip hidden"></div></div>
+          </div>
+          <canvas class="mkchart" id="mkChart"></canvas>
+          <!-- THE TABLE AND THE BOOK SIDE BY SIDE (2026-09-15, "same treatment on the markets tab"):
+               stacked, the depth chart began 1,000px down and was never on the first screen; the
+               board now takes what the window leaves after this row, and the row is two columns
+               from 900px up. -->
+          <div class="mkbottom">
+            <div class="mkbottom-l">
+              <div id="mkTable"></div>
+              <div class="note tiny faint" id="mkNote"></div>
+            </div>
+            <div class="mkbottom-r">
+          <h3 class="mksub">Order book depth <span class="faint">cumulative bids and asks against price · each exchange's book, their total, and the total as it stood · change bars on the right, log scale</span></h3>
+          <div class="mkbar" id="mkDepthBar"></div>
+          <canvas class="mkchart mkdepth" id="mkDepth"></canvas>
+          <div class="note tiny faint" id="mkDepthNote"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ======================================================= EXPLORER -->
+    <!-- Blocks, transactions and addresses from this node (public/js/explorer.js). The route is
+         on the URL: #explorer/block/<height>, #explorer/tx/<txid>, #explorer/address/<addr>. -->
+    <section class="page" data-page="explorer">
+      <div class="grid">
+        <div class="card w12 xcard">
+          <form id="xSearch" class="xsearch" role="search" autocomplete="off">
+            <input id="xQuery" type="search" spellcheck="false" placeholder="block height, block hash, transaction id or address" aria-label="search the chain">
+            <button type="submit">Search</button>
+          </form>
+          <div id="xBody"></div>
+        </div>
+      </div>
+    </section>
+    <section class="page" data-page="peers">
+      <div class="grid">
+        <!-- THE PEER TABLE IS THE PAGE (operator, 2026-09-11: "We need to really compress the
+             panels in this screen to show more data. I don't want to have to scroll down to see
+             the primary information for that tab"). Two Connections cards showed the same count,
+             two charts the same 24 hours, and a seven-row budget list answered "–" or "not
+             reported" to every row on this build, all before the first peer. Now one strip --
+             the count with what the node does report, then one short history -- and the table. -->
+        <div class="prtop">
+          <div class="card prsum">
+            <h3>Connections <span class="sp"></span><span class="src">getconnectioncount · getnetworkinfo</span></h3>
+            <div class="metric"><div><span class="v" id="prCount">–</span></div><div class="s" id="prSplit">–</div></div>
+            <dl class="kv prbudget" id="prBudget"></dl>
+          </div>
+          <div class="card">
+            <h3>Connection history <span class="sp"></span><span class="src">in / out over 24h</span></h3>
+            <canvas class="chart short" id="prChart"></canvas>
+          </div>
+        </div>
+        <div class="card w12 prpeers">
+          <h3>Peers <span class="sp"></span><span class="src">getpeerinfo, every 15 s · bytes and rates per connection</span></h3>
+          <div class="note tiny faint" id="prIdentityNote"></div>
+          <div id="prTable"></div>
+        </div>
+      </div>
+    </section>
+    <!-- ======================================================== NETWORK -->
+    <section class="page" data-page="network">
+      <div class="grid">
+        <!-- TWO STACKS (2026-09-15, "same treatment on the network tab"): Throughput on the left,
+             Upload over Traffic accounting on the right, so the accounting card no longer sits
+             alone on a row beside half a screen of nothing; the sources table takes the rest. -->
+        <div class="ovcols ntcols">
+          <div class="ovcol">
+            <div class="card">
+              <h3>Throughput <span class="sp"></span><span class="src">getnettotals (RPC)</span></h3>
+              <div class="metric"><div class="l">network in</div><div><span class="v" id="ovNetIn">–</span><span class="u" id="ovNetInU"></span></div>
+                <div class="s" id="ovDisk">–</div></div>
+              <canvas class="chart tall" id="ovNetChart"></canvas>
+            </div>
+          </div>
+          <div class="ovcol">
+            <div class="card">
+              <h3>Upload <span class="sp"></span><span class="src">what the node reports</span></h3>
+              <div class="note" id="ntUploadNote"></div>
+              <dl class="kv" id="ntRpc"></dl>
+            </div>
+            <div class="card">
+              <h3>Traffic accounting <span class="sp"></span><span class="src">cumulative</span></h3>
+              <dl class="kv" id="ntAccounting"></dl>
+            </div>
+          </div>
+        </div>
+        <div class="card w12">
+          <h3>Where each number comes from <span class="sp"></span><span class="src">explicit sources</span></h3>
+          <div class="note" id="ntSources"></div>
+        </div>
+      </div>
+    </section>
+    <!-- ========================================================= EVENTS -->
+    <section class="page" data-page="mining">
+      <div class="grid">
+        <!-- THE NETWORK OVER A WEEK AND A YEAR (operator, 2026-09-15, with mempool.space's mining
+             dashboard: "Why don't we have this view in our mining tab?" -- "Do it"; then its
+             adjustments table: "add this too"). Every figure is from this node: getblockstats for
+             the reward window, block headers for the periods and the daily hashrate samples, the
+             coinbases of the last week's blocks for the pools (collect/network.js). -->
+        <!-- ONE SCREEN (operator, 2026-09-15: "remove the mempool space viewer from the mining tab.
+             Move Block flow up as the first thing along the top. Shuffle around and try to fit as
+             much as possible on one screen"): the flow across the top, then three stacks -- the
+             figures and the packages; the pool pie and the landscape; the year chart, the
+             adjustments, the window's pools and the attribution. The Mempool space viewer is on
+             Overview, Block space and Mempool already. -->
+        <!-- THE DEFAULT LAYOUT OF mempool.space's MINING DASHBOARD (operator, 2026-09-15: "look at the
+             source code for mempool space app, and try to implement this default layout at the very
+             least. Notice the 'View more >>' that open up a panel to see a full screen view of just
+             that panel"). Its mining-dashboard.component.html is two columns: reward stats |
+             difficulty adjustment; pool ranking | hashrate chart, each with "View more »"; recent
+             blocks | adjustments. The same six cards here in the same order, the block flow across
+             the top as before, and "View more »" opens the card full-screen (#expandWrap). Every
+             figure is from this node (collect/network.js); our own panels follow beneath. -->
+        <div class="card mnflow flowtight">
+          <h3>Block flow <span class="sp"></span><span class="src">being assembled → <b>the current block</b> → history receding</span></h3>
+          <div id="mnFlow" class="flowwrap"></div>
+        </div>
+        <div class="mn2">
+          <div class="card">
+            <h3>Reward stats <span class="sp"></span><span class="src" id="mnRewardsSrc">last 144 blocks · getblockstats</span></h3>
+            <div class="netstats" id="mnRewards"></div>
+          </div>
+          <div class="card">
+            <h3>Difficulty adjustment <span class="sp"></span><span class="src">this period, from its first block's time</span></h3>
+            <div class="netstats" id="mnAdjust"></div>
+          </div>
+          <div class="card">
+            <h3>Pools <span class="sp"></span><span class="src" id="mnPoolsWeekSrc">the last week's blocks, by coinbase</span></h3>
+            <div class="netstats" id="mnPoolsWeek"></div>
+            <canvas class="chart donut" id="mnPoolDonut"></canvas>
+            <div class="note tiny faint" id="mnPoolsWeekNote"></div>
+            <a class="viewmore" href="#mining" data-expand="pools">View more »</a>
+          </div>
+          <div class="card">
+            <h3>Hashrate &amp; difficulty <span class="sp"></span><span class="src">a year, one sample a day · getnetworkhashps over the week</span></h3>
+            <div class="netstats" id="mnHashrate"></div>
+            <canvas class="chart tall" id="mnHashChart"></canvas>
+            <div class="note tiny faint">Difficulty × 2³² over each day's mean block interval, from the headers — an estimate, as every hashrate figure is; the steps are the difficulty.</div>
+            <a class="viewmore" href="#mining" data-expand="hashrate">View more »</a>
+          </div>
+          <div class="card">
+            <h3>Recent blocks <span class="sp"></span><span class="src">height, pool, reward, fees · the attributed window</span></h3>
+            <div id="mnRecent"></div>
+            <a class="viewmore" href="#mining" data-expand="blocks">View more »</a>
+          </div>
+          <div class="card">
+            <h3>Adjustments <span class="sp"></span><span class="src">each period's first block against the one before</span></h3>
+            <div id="mnAdjustments"></div>
+            <a class="viewmore" href="#mining" data-expand="adjustments">View more »</a>
+          </div>
+        </div>
+        <!-- our own: the block being built and the attribution behind the pools -->
+        <div class="mnextra">
+          <div class="card">
+            <h3>Packages in the block being built <span class="sp"></span><span class="src">ancestor graph from getrawmempool · depends</span></h3>
+            <div id="mnPackages"></div>
+          </div>
+          <div class="card">
+            <h3>Feerate landscape <span class="sp"></span><span class="src">the transactions selected for the next block</span></h3>
+            <canvas class="chart" id="mnFeeLandscape"></canvas>
+            <div class="note tiny faint">Buckets are sat/vB. Green means the bucket pays well above the block's own median, red below — the same shape a miner is looking at when it decides what to include.</div>
+          </div>
+          <div class="card">
+            <h3>Pools in this window <span class="sp"></span><span class="src">coinbase tags, grouped by curated label</span></h3>
+            <div id="mnPools"></div>
+          </div>
+          <div class="card">
+            <h3>Attribution <span class="sp"></span><span class="src">what we read and from where</span></h3>
+            <div id="mnCoverage"></div>
+          </div>
+          <details class="card mndetailed">
+              <summary><h3>Detailed <span class="sp"></span><span class="src">what this node can and cannot answer</span></h3></summary>
+              <div class="kv">
+                <dt>fee deployment by miner</dt><dd>above, per mined block</dd>
+                <dt>block fullness &amp; gaps</dt><dd>block train above</dd>
+                <dt>mempool feerate landscape</dt><dd>on the <b>Mempool</b> page (fee histogram + scatter)</dd>
+                <dt>CPFP / child-pays-for-parent clusters</dt><dd>shown above, <b>for the block under construction</b>.
+                  The ancestor graph is <span class="mono">getrawmempool … depends</span> (indices into the selected
+                  transactions) — 1,496 transactions, 19 multi-transaction packages and 40 transactions inside a package as
+                  measured on 2026-09-09. It is <b>not</b> the whole mempool: <span class="mono">getrawmempool verbose</span> on
+                  this build carries no <span class="mono">depends</span> and no <span class="mono">ancestorcount</span>, and
+                  there is no <span class="mono">zmqpubsequence</span>, so the unselected pool cannot be clustered. The card
+                  says which of those two it is showing rather than blurring them together.</dd>
+                <dt>1p1c ancestor packages</dt><dd><span class="warn">not shown.</span> The node reports accepted/failed counts for
+                  1p1c packages, but only in its own log lines, and log files are not a source this monitor reads. The package
+                  view above is built from <span class="mono">getrawmempool … depends</span>, which is RPC.</dd>
+              </div>
+            </details>
+        </div>
+      </div>
+    </section>
+    <section class="page" data-page="logs">
+      <div class="grid">
+        <div class="card w12">
+          <h3>Monitor events <span class="sp"></span><span class="src">what this monitor observed and decided; the node's log is not a source here</span><span class="count faint tiny" id="lgCount"></span></h3>
+          <div class="rowform">
+            <input class="f grow minw-200" id="lgSearch" placeholder="filter text, e.g. orphan, unreachable, stored">
+            <select class="f" id="lgSev"><option value="">all severities</option><option value="warn">warn</option><option value="error">error</option><option value="info">info</option></select>
+            <select class="f" id="lgKind"><option value="">all kinds</option></select>
+            <span class="spacer grow"></span>
+            <button class="btn" id="lgClear">clear</button>
+          </div>
+          <div class="feed tall" id="lgFeed"></div>
+        </div>
+      </div>
+    </section>
+    <!-- ==================================================== NODE & RPC -->
+    <section class="page" data-page="node">
+      <div class="grid">
+        <!-- TWO STACKS (2026-09-15, "same treatment on the node & rpc tab"): the cards are of very
+             different heights -- RPC etiquette is fourteen figures and a chart, Poll cadence five
+             rows -- and as grid rows they left holes beside the short ones. Each stack packs its
+             own cards; the etiquette figures run in two columns. -->
+        <div class="ovcols ndcols">
+          <div class="ovcol">
+            <div class="card">
+          <h3>RPC etiquette <span class="sp"></span><span class="src">what this app asks of the node</span></h3>
+          <dl class="kv two" id="ndRpc"></dl>
+          <canvas class="chart short" id="ndLatChart"></canvas>
+          <div class="note tiny faint">The node's RPC server services one connection at a time on a single thread. This app keeps one request in flight, spaces them, batches multiple methods per connection, and drops a poll that could not answer in time to be true.</div>
+        </div>
+            <div class="card">
+          <h3>Data quality <span class="sp"></span><span class="src">known gaps, stated</span></h3>
+          <div id="ndQuality"></div>
+        </div>
+        <!-- THE NODE CONNECTION (operator, 2026-09-12: "Still left to do is a config connection in
+             the web settings. We have no way for users to configure a connection to their rpc
+             backend"). Test first, save second: the save button is disabled until a test has
+             actually ANSWERED, so nothing is written for an endpoint nobody reached. That is the
+             operator's own ordering.
+             No credential fields, deliberately: authentication is the node's own .cookie, found
+             from the data directory (server/config.js resolveCookie). Asking for an RPC password on
+             a page that is open access by default is not something to add quietly. -->
+                    <div class="card">
+          <h3>Node connection <span class="sp"></span><span class="src">where this monitor looks</span></h3>
+          <!-- the placeholder deliberately is NOT a URL: web-contract.test.js refuses an http(s)
+               literal outside an <a href>, because in shipped markup that reads as a resource load
+               under `script-src/img-src 'self'`. It caught this exact line. -->
+          <div class="field"><label for="cnUrl">RPC URL</label><input class="f w-full" id="cnUrl" placeholder="http(s)://host:port" autocomplete="off" spellcheck="false"></div>
+          <div class="field"><label for="cnDatadir">data directory</label><input class="f w-full" id="cnDatadir" placeholder="/var/lib/bitcoin" autocomplete="off" spellcheck="false"></div>
+          <div class="rowform">
+            <select class="f" id="cnChain"><option value="main">main</option><option value="test">test</option><option value="signet">signet</option><option value="regtest">regtest</option></select>
+            <input class="f grow minw-140" id="cnLabel" placeholder="label, e.g. My node" autocomplete="off">
+          </div>
+          <div class="rowform">
+            <button class="btn" id="cnTest">test connection</button>
+            <button class="btn primary" id="cnSave" disabled>save</button>
+          </div>
+          <div class="note tiny" id="cnOut"></div>
+          <div class="note tiny faint">Authentication uses the node's <span class="mono">.cookie</span> from the data directory; no password is asked for or kept here. Saving writes this monitor's own configuration file and takes effect on restart.</div>
+        </div>
+          </div>
+          <div class="ovcol">
+            <div class="card">
+          <h3>Poll cadence <span class="sp"></span><span class="src">configured vs actual</span></h3>
+          <table class="t" id="ndCadence"><thead><tr><th>tier</th><th class="r">configured</th><th class="r">actual</th><th class="r">last run</th></tr></thead><tbody></tbody></table>
+          <div class="note tiny faint" id="ndCadenceNote"></div>
+        </div>
+            <div class="ovpair">
+              <div class="card">
+          <h3>Monitor self-telemetry <span class="sp"></span><span class="src">this process</span></h3>
+          <dl class="kv" id="ndSelf"></dl>
+          <canvas class="chart short" id="ndSelfChart"></canvas>
+        </div>
+              <div class="card">
+          <h3>Log tail <span class="sp"></span><span class="src">follow state</span></h3>
+          <dl class="kv" id="ndTail"></dl>
+        </div>
+            </div>
+            <div class="card">
+          <h3>Panel sources <span class="sp"></span><span class="src">provenance</span></h3>
+          <div id="ndSources"></div>
+        </div>
+            <div class="card">
+          <h3>RPC console <span class="sp"></span><span class="src">read-only allowlist</span></h3>
+          <div class="rowform">
+            <input class="f grow minw-180" id="rpcMethod" placeholder="method, e.g. getblockchaininfo">
+            <input class="f grow minw-140" id="rpcParams" placeholder='params JSON array, e.g. [6]'>
+            <button class="btn primary" id="rpcRun">call</button>
+          </div>
+          <div class="note tiny faint" id="rpcNote">Mutating, wallet- and peer-control methods are refused by this app regardless of what the node would do.</div>
+          <pre class="mono tiny output-box" id="rpcOut"></pre>
+        </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ========================================================== ADMIN -->
+    <section class="page" data-page="admin">
+      <div class="grid">
+        <!-- TWO STACKS (2026-09-15, "same treatment on the admin page"): Users beside Node actions left
+             a hole under the short Users card; each stack packs its own. The two password fields
+             share a row. -->
+        <div class="ovcols adcols">
+          <div class="ovcol">
+            <div class="card">
+          <h3>Users <span class="sp"></span><span class="src">scrypt-hashed, never shown</span></h3>
+          <div class="scroll"><table class="t" id="adUsers"><thead><tr><th>user</th><th>role</th><th>created</th><th>last login</th><th></th></tr></thead><tbody></tbody></table></div>
+          <div class="hr"></div>
+          <div class="rowform">
+            <input class="f" id="newUser" placeholder="username" autocomplete="off">
+            <select class="f" id="newRole"><option value="viewer">viewer</option><option value="operator">operator</option><option value="admin">admin</option></select>
+            <button class="btn" id="btnGen">generate password</button>
+          </div>
+          <div class="note tiny" id="adGen"></div>
+        </div>
+            <div class="card">
+          <h3>Audit log <span class="sp"></span><span class="src">credentials use, without credentials</span></h3>
+          <div class="scroll lg"><table class="t" id="adAudit"><thead><tr><th>when</th><th>type</th><th>who</th><th>detail</th></tr></thead><tbody></tbody></table></div>
+          <div class="note tiny faint mt-6" id="adAuditSize"></div>
+        </div>
+          </div>
+          <div class="ovcol">
+            <div class="card">
+          <h3>Node actions <span class="sp"></span><span class="src">off unless enabled</span></h3>
+          <div class="note tiny" id="adActions"></div>
+        </div>
+            <div class="card">
+          <h3>Change own password <span class="sp"></span></h3>
+          <div class="ovpair">
+            <div class="field"><label>current password</label><input class="f w-full" type="password" id="pwCurrent" autocomplete="current-password"></div>
+            <div class="field"><label>new password</label><input class="f w-full" type="password" id="pwNew" autocomplete="new-password"></div>
+          </div>
+          <button class="btn primary" id="btnPw">change password</button>
+          <div class="note tiny faint mt-6">Changing it revokes every session, including this one.</div>
+        </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</div>
+<div class="toast" id="toast"></div>
+<script type="module" src="/js/app.js"></script>
+</body>
+</html>