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

blockyard 0.0.1 → 0.0.9

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 (107) hide show

package/CHANGELOG.md +679 -0
package/LICENSE +202 -0
package/NOTICE +4 -0
package/README.md +172 -4
package/SECURITY.md +38 -0
package/bin/blockyard.js +40 -0
package/config/pool-map.json +2620 -0
package/docs/API.md +1575 -0
package/docs/ARCHITECTURE.md +1307 -0
package/docs/AUTO-UPDATE.md +269 -0
package/docs/CONFIGURATION.md +840 -0
package/docs/DEFECTS.md +813 -0
package/docs/EFFECTS-AGENTS.md +448 -0
package/docs/GETTING-STARTED.md +202 -0
package/docs/INSTALL.md +490 -0
package/docs/MEASUREMENTS.md +1254 -0
package/docs/PRIVATE-LEADERBOARD.md +230 -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 +195 -0
package/docs/STATE-2026-09-09.md +200 -0
package/docs/TROUBLESHOOTING.md +298 -0
package/docs/USER-GUIDE.md +1022 -0
package/package.json +53 -5
package/public/404.html +9 -0
package/public/css/app.css +1785 -0
package/public/index.html +893 -0
package/public/js/about.js +112 -0
package/public/js/agents.js +964 -0
package/public/js/app.js +1312 -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 +2678 -0
package/public/js/breakout.js +224 -0
package/public/js/charts.js +635 -0
package/public/js/depthchart.js +311 -0
package/public/js/details3d.js +2957 -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 +83 -0
package/public/js/markets.js +357 -0
package/public/js/mining.js +1138 -0
package/public/js/panels.js +966 -0
package/public/js/pricechart.js +188 -0
package/public/js/settings.js +1014 -0
package/public/js/tetris.js +226 -0
package/public/js/tetrust.js +356 -0
package/public/js/tetsound.js +175 -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 +20 -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 +410 -0
package/scripts/shots.mjs +272 -0
package/scripts/smoke.sh +327 -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 +193 -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 +2516 -0
package/server/collect/nextblock.js +275 -0
package/server/collect/sync.js +386 -0
package/server/config.js +620 -0
package/server/http/api.js +1275 -0
package/server/http/explorer.js +418 -0
package/server/http/server.js +412 -0
package/server/http/sse.js +176 -0
package/server/http/static.js +212 -0
package/server/main.js +628 -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/util/fmt.js +29 -0
package/systemd/blockyard.service +100 -0

package/public/index.html ADDED Viewed

@@ -0,0 +1,893 @@
+<!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>
+  </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. -->
+  <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">Kept in this browser only, and applied as soon as you change them. They
+        change what is drawn, not what is measured: every number on the page is the same either way.</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">
+              <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="kv two mt-6" 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>
+          <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. -->
+            <svg class="abqr" viewBox="0 0 41 41" width="132" height="132" role="img" aria-label="QR code of the donation address" shape-rendering="crispEdges"><rect width="41" height="41" fill="#fff"/><path fill="#000" d="M6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM9 6h1v1h-1zM10 6h1v1h-1zM11 6h1v1h-1zM12 6h1v1h-1zM16 6h1v1h-1zM18 6h1v1h-1zM20 6h1v1h-1zM22 6h1v1h-1zM23 6h1v1h-1zM24 6h1v1h-1zM25 6h1v1h-1zM26 6h1v1h-1zM28 6h1v1h-1zM29 6h1v1h-1zM30 6h1v1h-1zM31 6h1v1h-1zM32 6h1v1h-1zM33 6h1v1h-1zM34 6h1v1h-1zM6 7h1v1h-1zM12 7h1v1h-1zM14 7h1v1h-1zM16 7h1v1h-1zM19 7h1v1h-1zM20 7h1v1h-1zM21 7h1v1h-1zM23 7h1v1h-1zM24 7h1v1h-1zM28 7h1v1h-1zM34 7h1v1h-1zM6 8h1v1h-1zM8 8h1v1h-1zM9 8h1v1h-1zM10 8h1v1h-1zM12 8h1v1h-1zM18 8h1v1h-1zM20 8h1v1h-1zM21 8h1v1h-1zM25 8h1v1h-1zM26 8h1v1h-1zM28 8h1v1h-1zM30 8h1v1h-1zM31 8h1v1h-1zM32 8h1v1h-1zM34 8h1v1h-1zM6 9h1v1h-1zM8 9h1v1h-1zM9 9h1v1h-1zM10 9h1v1h-1zM12 9h1v1h-1zM14 9h1v1h-1zM15 9h1v1h-1zM16 9h1v1h-1zM18 9h1v1h-1zM19 9h1v1h-1zM20 9h1v1h-1zM22 9h1v1h-1zM23 9h1v1h-1zM26 9h1v1h-1zM28 9h1v1h-1zM30 9h1v1h-1zM31 9h1v1h-1zM32 9h1v1h-1zM34 9h1v1h-1zM6 10h1v1h-1zM8 10h1v1h-1zM9 10h1v1h-1zM10 10h1v1h-1zM12 10h1v1h-1zM15 10h1v1h-1zM20 10h1v1h-1zM22 10h1v1h-1zM24 10h1v1h-1zM25 10h1v1h-1zM26 10h1v1h-1zM28 10h1v1h-1zM30 10h1v1h-1zM31 10h1v1h-1zM32 10h1v1h-1zM34 10h1v1h-1zM6 11h1v1h-1zM12 11h1v1h-1zM14 11h1v1h-1zM15 11h1v1h-1zM17 11h1v1h-1zM18 11h1v1h-1zM19 11h1v1h-1zM20 11h1v1h-1zM21 11h1v1h-1zM22 11h1v1h-1zM23 11h1v1h-1zM24 11h1v1h-1zM26 11h1v1h-1zM28 11h1v1h-1zM34 11h1v1h-1zM6 12h1v1h-1zM7 12h1v1h-1zM8 12h1v1h-1zM9 12h1v1h-1zM10 12h1v1h-1zM11 12h1v1h-1zM12 12h1v1h-1zM14 12h1v1h-1zM16 12h1v1h-1zM18 12h1v1h-1zM20 12h1v1h-1zM22 12h1v1h-1zM24 12h1v1h-1zM26 12h1v1h-1zM28 12h1v1h-1zM29 12h1v1h-1zM30 12h1v1h-1zM31 12h1v1h-1zM32 12h1v1h-1zM33 12h1v1h-1zM34 12h1v1h-1zM15 13h1v1h-1zM16 13h1v1h-1zM17 13h1v1h-1zM22 13h1v1h-1zM25 13h1v1h-1zM6 14h1v1h-1zM7 14h1v1h-1zM8 14h1v1h-1zM9 14h1v1h-1zM10 14h1v1h-1zM12 14h1v1h-1zM13 14h1v1h-1zM14 14h1v1h-1zM15 14h1v1h-1zM17 14h1v1h-1zM19 14h1v1h-1zM21 14h1v1h-1zM22 14h1v1h-1zM23 14h1v1h-1zM26 14h1v1h-1zM27 14h1v1h-1zM29 14h1v1h-1zM31 14h1v1h-1zM33 14h1v1h-1zM7 15h1v1h-1zM10 15h1v1h-1zM11 15h1v1h-1zM13 15h1v1h-1zM14 15h1v1h-1zM16 15h1v1h-1zM18 15h1v1h-1zM20 15h1v1h-1zM22 15h1v1h-1zM23 15h1v1h-1zM25 15h1v1h-1zM27 15h1v1h-1zM28 15h1v1h-1zM29 15h1v1h-1zM30 15h1v1h-1zM34 15h1v1h-1zM7 16h1v1h-1zM11 16h1v1h-1zM12 16h1v1h-1zM13 16h1v1h-1zM16 16h1v1h-1zM20 16h1v1h-1zM21 16h1v1h-1zM23 16h1v1h-1zM24 16h1v1h-1zM26 16h1v1h-1zM27 16h1v1h-1zM30 16h1v1h-1zM31 16h1v1h-1zM6 17h1v1h-1zM8 17h1v1h-1zM9 17h1v1h-1zM10 17h1v1h-1zM11 17h1v1h-1zM14 17h1v1h-1zM18 17h1v1h-1zM21 17h1v1h-1zM24 17h1v1h-1zM26 17h1v1h-1zM28 17h1v1h-1zM29 17h1v1h-1zM7 18h1v1h-1zM8 18h1v1h-1zM9 18h1v1h-1zM10 18h1v1h-1zM11 18h1v1h-1zM12 18h1v1h-1zM13 18h1v1h-1zM14 18h1v1h-1zM15 18h1v1h-1zM16 18h1v1h-1zM18 18h1v1h-1zM19 18h1v1h-1zM23 18h1v1h-1zM26 18h1v1h-1zM27 18h1v1h-1zM31 18h1v1h-1zM32 18h1v1h-1zM33 18h1v1h-1zM8 19h1v1h-1zM9 19h1v1h-1zM10 19h1v1h-1zM11 19h1v1h-1zM13 19h1v1h-1zM14 19h1v1h-1zM20 19h1v1h-1zM22 19h1v1h-1zM24 19h1v1h-1zM25 19h1v1h-1zM28 19h1v1h-1zM29 19h1v1h-1zM30 19h1v1h-1zM34 19h1v1h-1zM7 20h1v1h-1zM8 20h1v1h-1zM9 20h1v1h-1zM11 20h1v1h-1zM12 20h1v1h-1zM13 20h1v1h-1zM14 20h1v1h-1zM17 20h1v1h-1zM18 20h1v1h-1zM19 20h1v1h-1zM21 20h1v1h-1zM23 20h1v1h-1zM27 20h1v1h-1zM29 20h1v1h-1zM32 20h1v1h-1zM33 20h1v1h-1zM7 21h1v1h-1zM9 21h1v1h-1zM11 21h1v1h-1zM13 21h1v1h-1zM14 21h1v1h-1zM17 21h1v1h-1zM27 21h1v1h-1zM28 21h1v1h-1zM29 21h1v1h-1zM30 21h1v1h-1zM34 21h1v1h-1zM8 22h1v1h-1zM9 22h1v1h-1zM10 22h1v1h-1zM11 22h1v1h-1zM12 22h1v1h-1zM17 22h1v1h-1zM19 22h1v1h-1zM20 22h1v1h-1zM22 22h1v1h-1zM23 22h1v1h-1zM25 22h1v1h-1zM26 22h1v1h-1zM29 22h1v1h-1zM31 22h1v1h-1zM32 22h1v1h-1zM33 22h1v1h-1zM6 23h1v1h-1zM10 23h1v1h-1zM11 23h1v1h-1zM13 23h1v1h-1zM14 23h1v1h-1zM15 23h1v1h-1zM18 23h1v1h-1zM22 23h1v1h-1zM24 23h1v1h-1zM25 23h1v1h-1zM26 23h1v1h-1zM28 23h1v1h-1zM30 23h1v1h-1zM31 23h1v1h-1zM33 23h1v1h-1zM34 23h1v1h-1zM6 24h1v1h-1zM8 24h1v1h-1zM10 24h1v1h-1zM12 24h1v1h-1zM13 24h1v1h-1zM14 24h1v1h-1zM19 24h1v1h-1zM20 24h1v1h-1zM21 24h1v1h-1zM23 24h1v1h-1zM27 24h1v1h-1zM6 25h1v1h-1zM9 25h1v1h-1zM10 25h1v1h-1zM13 25h1v1h-1zM16 25h1v1h-1zM18 25h1v1h-1zM20 25h1v1h-1zM24 25h1v1h-1zM30 25h1v1h-1zM33 25h1v1h-1zM34 25h1v1h-1zM6 26h1v1h-1zM7 26h1v1h-1zM8 26h1v1h-1zM12 26h1v1h-1zM13 26h1v1h-1zM14 26h1v1h-1zM15 26h1v1h-1zM18 26h1v1h-1zM19 26h1v1h-1zM20 26h1v1h-1zM23 26h1v1h-1zM26 26h1v1h-1zM27 26h1v1h-1zM28 26h1v1h-1zM29 26h1v1h-1zM30 26h1v1h-1zM31 26h1v1h-1zM32 26h1v1h-1zM33 26h1v1h-1zM14 27h1v1h-1zM22 27h1v1h-1zM25 27h1v1h-1zM26 27h1v1h-1zM30 27h1v1h-1zM32 27h1v1h-1zM33 27h1v1h-1zM34 27h1v1h-1zM6 28h1v1h-1zM7 28h1v1h-1zM8 28h1v1h-1zM9 28h1v1h-1zM10 28h1v1h-1zM11 28h1v1h-1zM12 28h1v1h-1zM14 28h1v1h-1zM16 28h1v1h-1zM17 28h1v1h-1zM18 28h1v1h-1zM19 28h1v1h-1zM21 28h1v1h-1zM22 28h1v1h-1zM23 28h1v1h-1zM25 28h1v1h-1zM26 28h1v1h-1zM28 28h1v1h-1zM30 28h1v1h-1zM31 28h1v1h-1zM6 29h1v1h-1zM12 29h1v1h-1zM15 29h1v1h-1zM17 29h1v1h-1zM20 29h1v1h-1zM24 29h1v1h-1zM26 29h1v1h-1zM30 29h1v1h-1zM31 29h1v1h-1zM33 29h1v1h-1zM34 29h1v1h-1zM6 30h1v1h-1zM8 30h1v1h-1zM9 30h1v1h-1zM10 30h1v1h-1zM12 30h1v1h-1zM14 30h1v1h-1zM17 30h1v1h-1zM21 30h1v1h-1zM22 30h1v1h-1zM23 30h1v1h-1zM26 30h1v1h-1zM27 30h1v1h-1zM28 30h1v1h-1zM29 30h1v1h-1zM30 30h1v1h-1zM32 30h1v1h-1zM33 30h1v1h-1zM34 30h1v1h-1zM6 31h1v1h-1zM8 31h1v1h-1zM9 31h1v1h-1zM10 31h1v1h-1zM12 31h1v1h-1zM14 31h1v1h-1zM18 31h1v1h-1zM19 31h1v1h-1zM22 31h1v1h-1zM25 31h1v1h-1zM27 31h1v1h-1zM29 31h1v1h-1zM33 31h1v1h-1zM34 31h1v1h-1zM6 32h1v1h-1zM8 32h1v1h-1zM9 32h1v1h-1zM10 32h1v1h-1zM12 32h1v1h-1zM14 32h1v1h-1zM16 32h1v1h-1zM19 32h1v1h-1zM20 32h1v1h-1zM21 32h1v1h-1zM22 32h1v1h-1zM23 32h1v1h-1zM26 32h1v1h-1zM28 32h1v1h-1zM30 32h1v1h-1zM31 32h1v1h-1zM32 32h1v1h-1zM33 32h1v1h-1zM6 33h1v1h-1zM12 33h1v1h-1zM14 33h1v1h-1zM15 33h1v1h-1zM18 33h1v1h-1zM19 33h1v1h-1zM22 33h1v1h-1zM24 33h1v1h-1zM25 33h1v1h-1zM26 33h1v1h-1zM31 33h1v1h-1zM33 33h1v1h-1zM6 34h1v1h-1zM7 34h1v1h-1zM8 34h1v1h-1zM9 34h1v1h-1zM10 34h1v1h-1zM11 34h1v1h-1zM12 34h1v1h-1zM14 34h1v1h-1zM16 34h1v1h-1zM18 34h1v1h-1zM20 34h1v1h-1zM21 34h1v1h-1zM23 34h1v1h-1zM25 34h1v1h-1zM28 34h1v1h-1zM29 34h1v1h-1zM30 34h1v1h-1zM31 34h1v1h-1zM32 34h1v1h-1z"/></svg>
+            <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>
+          <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">
+          <div class="khead"><b>Block flow</b><span class="faint">projected → being built → the chain</span></div>
+          <div id="kTrain" class="flowwrap"></div>
+        </div>
+        </div>
+        <button type="button" class="kfull" id="kFull" title="full screen">full screen</button>
+      </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>
+    <!-- ======================================================== 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>
+          <div id="mkTable"></div>
+          <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 class="note tiny faint" id="mkNote"></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">
+        <div class="card w6">
+          <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" id="ovNetChart"></canvas>
+        </div>
+        <div class="card w6">
+          <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 w6">
+          <h3>Traffic accounting <span class="sp"></span><span class="src">cumulative</span></h3>
+          <dl class="kv" id="ntAccounting"></dl>
+        </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">
+        <!-- TWO INDEPENDENT STACKS (operator, 2026-09-11: "too much wasted space in this
+             display. Crunch down the panel sizes to fit more info"). One grid coupled the rows:
+             the square Mempool space viewer set the first row, so Block flow sat in a 591 px
+             card using ~273, and the landscape was stretched to the packages table. Stacks never
+             stretch a card to its neighbour; the explanatory Detailed card folds away. -->
+        <div class="mncols">
+          <div class="ovcol">
+            <div class="card">
+              <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="mnpair">
+              <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 still fits.</div>
+              </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>
+          <div class="ovcol">
+            <div class="card">
+              <h3>Mempool space <span class="sp"></span><span class="src">every rectangle is a waiting transaction: area = vbytes, colour = its feerate, richest first</span></h3>
+              <div class="treemapwrap sq">
+                <canvas class="treemap" id="gnMempoolTreemap"></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="gnMempoolNote"></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>
+      </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">
+        <div class="card w6">
+          <h3>RPC etiquette <span class="sp"></span><span class="src">what this app asks of the node</span></h3>
+          <dl class="kv" 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 w6">
+          <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="card w6">
+          <h3>Data quality <span class="sp"></span><span class="src">known gaps, stated</span></h3>
+          <div id="ndQuality"></div>
+        </div>
+        <div class="card w3">
+          <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 w3">
+          <h3>Log tail <span class="sp"></span><span class="src">follow state</span></h3>
+          <dl class="kv" id="ndTail"></dl>
+        </div>
+        <div class="card w6">
+          <h3>Panel sources <span class="sp"></span><span class="src">provenance</span></h3>
+          <div id="ndSources"></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 w6">
+          <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 class="card w6">
+          <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>
+    </section>
+    <!-- ========================================================== ADMIN -->
+    <section class="page" data-page="admin">
+      <div class="grid">
+        <div class="card w6">
+          <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 w6">
+          <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 w6">
+          <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 class="card w6">
+          <h3>Change own password <span class="sp"></span></h3>
+          <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>
+          <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>
+    </section>
+  </main>
+</div>
+<div class="toast" id="toast"></div>
+<script type="module" src="/js/app.js"></script>
+</body>
+</html>