pmtiles-swarm 0.41.2 → 0.43.0

package/CHANGELOG.md

@@ -7,6 +7,58 @@
 ### 🐞 Bug fixes
 - _...Add new stuff here..._
 
+## 0.43.0
+### ✨ Features and improvements
+- **Six detail tabs are now five, and the two bars that matter lead the General tab.** How much of an
+  archive is here, and whether it can still be completed, are the first things anybody opening one
+  wants — and they were a tab away, above an explanation of how the drawing works. They now sit above
+  the infohash row, where the question is asked.
+
+  What that left on the Pieces tab was per-peer data, which is what the Peers tab already was. The two
+  are one: each peer's row shows what it holds beside how it is connected and how fast, joined from
+  the two endpoints that each knew half of it. A peer either side knows about still gets a row, since
+  half an answer about a peer beats leaving it out.
+
+  The General bars are redrawn into their canvases rather than by re-rendering the pane, so the
+  category box below them keeps whatever was being typed across the three-second refresh.
+
+### 🐞 Bug fixes
+
+## 0.42.0
+### ✨ Features and improvements
+- **Recheck all, Pause all and Resume all**, in the archives toolbar. Each does to every archive what
+  the per-archive action does to one — sequentially, because rechecking is disk-bound and firing
+  twenty at once at a library of planet builds is a way to make a node unresponsive while it works.
+
+  Each skips what does not need doing and reports how many were done, skipped and failed; a failure
+  is counted and named rather than thrown, since these run over archives nobody has looked at
+  individually and stopping at the first would leave the rest in an unknown state. **Recheck all** is
+  the one worth knowing about after a disk repair: every other answer about how much of an archive is
+  here comes from something written down earlier, and this is the only thing that goes and looks.
+  `POST /api/library/recheck`, `/api/library/pause` and `/api/library/resume` are the same three from
+  a script.
+- **A node can be taken out of rotation without being stopped.** `offline` — or the **Take offline**
+  switch in the console header, beside the engine and the reachability dot, where the things that
+  describe the node rather than an archive live — makes `/health` answer `503` with `status: "offline"`, which is what a load balancer
+  reads to stop sending traffic here. It is answered before the engine is asked, so a node stays
+  drained whatever the engine happens to think.
+
+  Nothing else changes: seeding, the console and the library carry on, because draining traffic and
+  stopping work are separate decisions and one switch doing both would mean a node could not be
+  drained without also being idled. It is stored in the configuration rather than in memory, so it
+  survives the restart you were probably about to do.
+
+### 🐞 Bug fixes
+
+## 0.41.3
+### ✨ Features and improvements
+- **The details panel no longer repeats the archive's name.** It opens directly under the row that
+  names it, so the heading was the same words twice, one line apart — it was there because the panel
+  used to render below the whole table, where nothing said which archive it belonged to. The panel is
+  labelled for assistive technology instead, which has no "just above" to read from.
+
+### 🐞 Bug fixes
+
 ## 0.41.2
 ### ✨ Features and improvements
 

package/docs/configuration.md

@@ -298,6 +298,20 @@ Nothing computes an MD5 for a [subscription](#subscriptions): those adopt a
 torrent somebody else built, so there is no hashing pass here to extend. What
 their feed publishes as `<pmtiles:md5>` is recorded as it arrives.
 
+### `offline`
+
+Off by default. Set it — or press **Take offline** in the console — and `/health`
+answers `503` with `status: "offline"`, which is what a load balancer reads to
+stop sending traffic here.
+
+Nothing else changes. The node keeps seeding, keeps answering the console, and
+keeps its library: draining traffic and stopping work are separate decisions, and
+one switch doing both would mean a node could not be drained without also being
+idled. Use **Pause all** for the other half.
+
+It lives in the configuration rather than in memory, so a node taken out of
+rotation stays out across the restart you were probably about to do.
+
 ## Trackers
 
 `trackers` is baked into every torrent this node creates. It defaults to the

package/docs/publishing.md

@@ -79,7 +79,26 @@ A magnet, a `.torrent` URL and an uploaded `.torrent` are metadata rather than
 data, so there is nothing slow to wait for: those still answer `201` with the
 entry.
 
-### Stopping one that is running
+### Acting on the whole library
+
+Three buttons in the archives toolbar do to every archive what the per-archive
+actions do to one, in sequence rather than all at once:
+
+| button          | what it does                                                                                              |
+| --------------- | --------------------------------------------------------------------------------------------------------- |
+| **Recheck all** | hashes every archive against its torrent. What you want after a disk repair — nothing else goes and looks |
+| **Pause all**   | stops offering everything. The data and the catalog stay                                                  |
+| **Resume all**  | starts everything that is paused                                                                          |
+
+Each skips archives that do not need it and reports how many were done, skipped
+and failed. One failure does not stop the rest: these run over archives nobody
+has looked at individually, and stopping at the first would leave the others in
+an unknown state.
+
+`POST /api/library/recheck`, `/api/library/pause` and `/api/library/resume` are
+the same three from a script.
+
+## Stopping one that is running
 
 `DELETE /api/adds?url=…` stops an add before it has produced a torrent, and the
 console offers it as a Cancel button beside each one. The identifier is whatever

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmtiles-swarm",
-  "version": "0.41.2",
+  "version": "0.43.0",
   "description": "BitTorrent distribution for PMTiles map archives: create torrents, watch folders, publish and subscribe to RSS feeds, and seed through qBittorrent or an embedded client",
   "type": "module",
   "main": "src/index.js",

package/src/api.js

@@ -573,6 +573,22 @@ export function createApp({
   app.get(
     '/health',
     route(async (_req, res) => {
+      // Answered before the engine is asked, and answered the same way every
+      // time. An operator who has taken a node out of rotation wants it out
+      // whatever the engine happens to say, and wants that to survive the
+      // restart they are probably about to do — which is why it lives in the
+      // configuration rather than in memory.
+      if (config.offline) {
+        res.setHeader('cache-control', 'no-store');
+        res.setHeader('access-control-allow-origin', '*');
+        return res.status(503).json({
+          status: 'offline',
+          engine: engine.name,
+          version: VERSION,
+          error: 'this node has been taken out of rotation by an operator',
+        });
+      }
+
       const now = Date.now();
       if (now - healthChecked >= HEALTH_TTL_MS) {
         healthChecked = now;
@@ -612,6 +628,7 @@ export function createApp({
       }
       res.json({
         version: VERSION,
+        offline: Boolean(config.offline),
         // What an unfinished archive is actually called on disk, or null when
         // nothing renames it. Both halves matter: the setting can be empty,
         // and an engine can ignore it entirely. The console showed the marker
@@ -1103,6 +1120,46 @@ export function createApp({
     }),
   );
 
+  // The whole library at once. Each of these is a shell loop over the
+  // per-archive route otherwise, and the moment somebody wants one -- a disk
+  // that has just been repaired, a node about to be taken down -- is exactly
+  // when they are least inclined to write one.
+  //
+  // Under /api/library rather than /api/torrents, so no path here can ever be
+  // mistaken for an infohash.
+  app.post(
+    '/api/library/recheck',
+    route(async (_req, res) => {
+      try {
+        res.status(202).json(await library.recheckAll());
+      } catch (error) {
+        res.status(error.status ?? 500).json({ error: error.message });
+      }
+    }),
+  );
+
+  app.post(
+    '/api/library/pause',
+    route(async (_req, res) => {
+      try {
+        res.json(await library.pauseAll());
+      } catch (error) {
+        res.status(error.status ?? 500).json({ error: error.message });
+      }
+    }),
+  );
+
+  app.post(
+    '/api/library/resume',
+    route(async (_req, res) => {
+      try {
+        res.json(await library.resumeAll());
+      } catch (error) {
+        res.status(error.status ?? 500).json({ error: error.message });
+      }
+    }),
+  );
+
   // Joining defaults to cache, deliberately. This is how that is changed
   // afterwards, without re-adding the archive by hand.
   app.patch(

package/src/config.js

@@ -411,6 +411,16 @@ const DEFAULTS = {
    * power to a token has to be made somewhere a token cannot reach.
    */
   allowHooksFromApi: false,
+  /**
+   * Take this node out of rotation without stopping it.
+   *
+   * `/health` answers 503 while this is set, which is what a load balancer
+   * reads to stop sending traffic here. Nothing else changes: the node keeps
+   * seeding, keeps answering the console, and keeps its library — draining
+   * traffic and stopping work are separate decisions, and doing both from one
+   * switch would mean a node could not be drained without also being idled.
+   */
+  offline: false,
   /** How often to look for finished downloads, in seconds. */
   onCompleteCheckIntervalSeconds: 60,
   /**

package/src/library.js

@@ -1819,6 +1819,83 @@ export class Library {
     return queued;
   }
 
+  /**
+   * Does something to the whole library, one archive at a time.
+   *
+   * One at a time on purpose. Every one of these is a request to the engine
+   * and rechecking is disk-bound, so firing twenty at once on a library of
+   * planet builds is a way to make a node unresponsive while it works. Nothing
+   * here is urgent enough to be worth that.
+   *
+   * A failure is counted rather than thrown: these run over archives the
+   * caller has not looked at individually, and stopping at the first would
+   * leave the rest in an unknown state with no way to tell which.
+   * @param {Function} pick - Given an entry, whether it needs doing.
+   * @param {Function} act - Given an infohash, does it.
+   * @returns {Promise<{done: string[], skipped: number, failed: object[]}>} - What happened.
+   */
+  async #eachArchive(pick, act) {
+    const done = [];
+    const failed = [];
+    let skipped = 0;
+
+    for (const entry of this.#catalog.list()) {
+      if (!pick(entry)) {
+        skipped += 1;
+        continue;
+      }
+      try {
+        await act(entry.infoHash);
+        done.push(entry.infoHash);
+      } catch (error) {
+        failed.push({ name: entry.name, error: error.message });
+      }
+    }
+
+    return { done, skipped, failed };
+  }
+
+  /**
+   * Hashes every archive against its torrent.
+   *
+   * The operation somebody wants after a disk repair, and the only one that
+   * goes and looks: every other answer about how much of an archive is here
+   * comes from something written down earlier. Doing it one archive at a time
+   * from a shell loop is the alternative, which is exactly when nobody is
+   * inclined to write one.
+   * @returns {Promise<{done: string[], skipped: number, failed: object[]}>} - What happened.
+   */
+  async recheckAll() {
+    // A paused archive cannot be rechecked by an engine that rechecks by
+    // re-adding, and skipping it beats failing the whole sweep on it.
+    return this.#eachArchive(
+      (entry) => !entry.paused,
+      (infoHash) => this.recheck(infoHash),
+    );
+  }
+
+  /**
+   * Stops offering every archive, without forgetting any.
+   * @returns {Promise<{done: string[], skipped: number, failed: object[]}>} - What happened.
+   */
+  async pauseAll() {
+    return this.#eachArchive(
+      (entry) => !entry.paused,
+      (infoHash) => this.pause(infoHash),
+    );
+  }
+
+  /**
+   * Starts every archive that was paused.
+   * @returns {Promise<{done: string[], skipped: number, failed: object[]}>} - What happened.
+   */
+  async resumeAll() {
+    return this.#eachArchive(
+      (entry) => entry.paused,
+      (infoHash) => this.resume(infoHash),
+    );
+  }
+
   /**
    * Reconciles what the catalog says about an archive with what is on disk.
    *

package/src/web/index.html

@@ -224,11 +224,13 @@
       }
       .tag.on { background: var(--accent); color: #fff; border-color: var(--accent); }
       #add-error { color: var(--bad); min-height: 1.2rem; }
+      /* Separates what acts on one archive from what acts on all of them. */
+      .bar-gap { flex: 1 1 1.5rem; min-width: 0.75rem; }
       .tabs {
         display: flex;
         gap: 0.25rem;
         border-bottom: 1px solid var(--line);
-        margin: -0.25rem 0 1rem;
+        margin: 0 0 1rem;
         flex-wrap: wrap;
       }
       .tabs button {
@@ -339,8 +341,10 @@
       .addrow > .value { font-size: 0.8rem; color: var(--muted); text-align: right; white-space: nowrap; }
       .addrow > button { padding: 0.15rem 0.55rem; font-size: 0.75rem; }
 
-      button.speed { border-color: var(--line); color: var(--muted); }
-      button.speed.on { border-color: var(--warn); color: var(--warn); }
+      button.speed,
+      button.state { border-color: var(--line); color: var(--muted); }
+      button.speed.on,
+      button.state.on { border-color: var(--warn); color: var(--warn); }
     </style>
   </head>
   <body>
@@ -349,6 +353,7 @@
       <div class="status" id="status">connecting…</div>
       <span id="reach" class="reach" hidden></span>
       <button id="speed-toggle" class="speed" hidden title="Switch between the normal and alternative speed limits"></button>
+      <button id="offline-toggle" class="state" hidden title="Take this node out of rotation. /health answers 503 while it is off, which is what a load balancer reads to stop sending traffic here — seeding, the console and the library carry on."></button>
       <nav>
         <button id="tab-archives" class="on">Archives</button>
         <button id="tab-categories">Categories</button>
@@ -366,6 +371,10 @@
           <a id="feed-link" href="/feed.xml" target="_blank" rel="noreferrer">
             <button type="button">Feed</button>
           </a>
+          <span class="bar-gap"></span>
+          <button id="recheck-all" title="Hash every archive against its torrent and believe the result. What you want after a disk repair — nothing else goes and looks. Progress reads as the fraction hashed while it runs.">Recheck all</button>
+          <button id="pause-all" title="Stop offering every archive. The data and the catalog stay; this is &quot;not right now&quot;, not &quot;not any more&quot;.">Pause all</button>
+          <button id="resume-all" title="Start every archive that is paused.">Resume all</button>
         </div>
         <div class="bar">
           <input
@@ -954,7 +963,7 @@
        * four requests a tick for nothing, which is why they are loaded lazily
        * in the first place.
        */
-      const LIVE_PANES = new Set(['pieces', 'peers']);
+      const LIVE_PANES = new Set(['peers']);
       let refreshingPane = false;
 
       // What the header switch shows, so a click knows what it is toggling to.
@@ -1188,6 +1197,7 @@
           // What an unfinished archive is really called on disk, or null when
           // nothing renames it. The engine decides, not the setting alone.
           incompleteMarker = status.incompleteMarker ?? null;
+          renderOffline(Boolean(status.offline));
           const engine = status.engine;
           renderReach(status.reachability);
           $('status').innerHTML =
@@ -1263,6 +1273,126 @@
         return `${minutes}m`;
       }
 
+      /**
+       * Runs one of the whole-library actions and reports what it did.
+       *
+       * Disabled while it runs, because each of these walks the library one
+       * archive at a time and a second click would start a second walk over
+       * the same archives.
+       * @param {string} id - The button's id.
+       * @param {string} path - The endpoint to post to.
+       * @param {Function} confirm - Given the archive count, the question to ask, or null to just do it.
+       * @param {Function} describe - Given the result, what to say afterwards.
+       * @returns {void}
+       */
+      function bulkAction(id, path, confirm, describe) {
+        $(id).onclick = async () => {
+          const question = confirm?.(archives.length);
+          if (question && !window.confirm(question)) return;
+
+          const button = $(id);
+          const label = button.textContent;
+          button.disabled = true;
+          button.textContent = 'working…';
+          try {
+            const result = await api(path, { method: 'POST' });
+            toast(describe(result));
+            refresh();
+          } catch (error) {
+            toast(error.message);
+          } finally {
+            button.disabled = false;
+            button.textContent = label;
+          }
+        };
+      }
+
+      /**
+       * How a whole-library action turned out, in one line.
+       * @param {object} result - `{done, skipped, failed}` from the server.
+       * @param {string} verb - What was done to the ones that were.
+       * @returns {string} - The summary.
+       */
+      function bulkSummary(result, verb) {
+        const parts = [`${result.done.length} ${verb}`];
+        if (result.skipped) parts.push(`${result.skipped} already were`);
+        if (result.failed.length) {
+          parts.push(`${result.failed.length} failed`);
+          // Named in the log as well: a toast is gone in a few seconds and the
+          // one thing somebody needs afterwards is which archive it was.
+          for (const failure of result.failed) {
+            console.error(`${failure.name}: ${failure.error}`);
+          }
+        }
+        return parts.join(', ');
+      }
+
+      bulkAction(
+        'recheck-all',
+        '/api/library/recheck',
+        (count) =>
+          `Hash all ${count} archives against their torrents.\n\n` +
+            'This reads every byte on disk, so it takes a while on a large ' +
+            'library, and each archive reads as low progress until its own ' +
+            'check finishes. Nothing is deleted.',
+        (result) => bulkSummary(result, 'rechecking'),
+      );
+
+      bulkAction(
+        'pause-all',
+        '/api/library/pause',
+        (count) =>
+          `Stop offering all ${count} archives.\n\n` +
+            'The data and the catalog stay. Nothing is served to the swarm ' +
+            'until they are resumed.',
+        (result) => bulkSummary(result, 'paused'),
+      );
+
+      bulkAction('resume-all', '/api/library/resume', null, (result) =>
+        bulkSummary(result, 'resumed'),
+      );
+
+      /**
+       * Puts the offline switch in the state the node is actually in.
+       *
+       * Read from the node rather than remembered here, so a second console —
+       * or the same one after a reload — shows the truth rather than whatever
+       * this tab last did.
+       * @param {boolean} offline - Whether the node is out of rotation.
+       * @returns {void}
+       */
+      function renderOffline(offline) {
+        const button = $('offline-toggle');
+        button.hidden = false;
+        button.classList.toggle('on', offline);
+        button.textContent = offline ? 'Bring online' : 'Take offline';
+      }
+
+      $('offline-toggle').onclick = async () => {
+        const going = !$('offline-toggle').classList.contains('on');
+        if (
+          going &&
+          !window.confirm(
+            'Take this node out of rotation.\n\n' +
+              '/health will answer 503, so a load balancer stops sending it ' +
+              'traffic. Seeding, the console and the library are unaffected, ' +
+              'and this survives a restart.',
+          )
+        ) {
+          return;
+        }
+        try {
+          await api('/api/config', {
+            method: 'PATCH',
+            body: { offline: going },
+          });
+          renderOffline(going);
+          toast(going ? 'taken out of rotation' : 'back in rotation');
+        } catch (error) {
+          toast(error.message);
+        }
+      };
+
       /**
        * Closes the details, panel and row together.
        *
@@ -1436,6 +1566,7 @@
        * @returns {void}
        */
       function refreshOpenPane() {
+        if (activeTab === 'general' && selected) renderPieceBars(selected);
         if (refreshingPane || !selected || !LIVE_PANES.has(activeTab)) return;
         const pane = document.querySelector(`[data-pane="${activeTab}"]`);
         // Only while it is on screen: a hidden pane is one the reader moved
@@ -1517,92 +1648,80 @@
           }
 
           if (name === 'peers') {
-            const answer = await api(`/api/torrents/${infoHash}/peers`);
+            const width = Math.max(256, Math.min(2048, pane.clientWidth || 1000));
+            // Both, because they answer halves of the same question and were
+            // two tabs for no better reason than that they come from two
+            // endpoints. `/peers` knows how a peer is connected and how fast;
+            // `/pieces` knows what it holds. Neither is much use alone.
+            const [answer, info] = await Promise.all([
+              api(`/api/torrents/${infoHash}/peers`),
+              api(`/api/torrents/${infoHash}/pieces?buckets=${width}&peers=true`).catch(
+                () => ({}),
+              ),
+            ]);
+
             // Either a bare array, or `{ peers, error }` when an engine could
             // not answer. "Nothing to show" is the right thing to say about an
             // empty swarm and the wrong thing to say about a broken engine.
             const peers = Array.isArray(answer) ? answer : (answer?.peers ?? []);
             const failed = Array.isArray(answer) ? null : answer?.error;
+
+            // Joined on address, which is the only thing both sides agree on.
+            // A peer in one and not the other still gets its row: half an
+            // answer about a peer beats leaving it out of the list.
+            const bitfields = new Map(
+              (info.peers ?? []).map((peer) => [peer.address, peer.have]),
+            );
+            const listed = new Set(peers.map((peer) => peer.address ?? peer.ip));
+            const extra = (info.peers ?? []).filter(
+              (peer) => !listed.has(peer.address),
+            );
+
+            const rows = [...peers, ...extra].map((peer, index) => {
+              const address = peer.address ?? peer.ip ?? '—';
+              const have = bitfields.get(address);
+              return [
+                escapeHtml(address),
+                escapeHtml(peer.client ?? '—'),
+                escapeHtml(peer.kind ?? 'peer'),
+                escapeHtml(peer.connection ?? '—'),
+                have
+                  ? `<canvas class="piecebar thin" data-bar="peer-${index}"></canvas>`
+                  : '<span class="sub">not reported</span>',
+                peer.progress != null ? pct(peer.progress) : '—',
+                rate(peer.downloadSpeed ?? peer.dlSpeed),
+                rate(peer.uploadSpeed ?? peer.upSpeed),
+              ];
+            });
+
             pane.innerHTML =
               table(
-                ['Address', 'Client', 'Kind', 'Conn', 'Progress', 'Down', 'Up'],
-                peers.map((peer) => [
-                  escapeHtml(peer.address ?? peer.ip ?? '—'),
-                  escapeHtml(peer.client ?? '—'),
-                  escapeHtml(peer.kind ?? 'peer'),
-                  escapeHtml(peer.connection ?? '—'),
-                  peer.progress != null ? pct(peer.progress) : '—',
-                  rate(peer.downloadSpeed ?? peer.dlSpeed),
-                  rate(peer.uploadSpeed ?? peer.upSpeed),
-                ]),
+                ['Address', 'Client', 'Kind', 'Conn', 'Has', 'Progress', 'Down', 'Up'],
+                rows,
               ) +
               (failed
                 ? `<div class="sub" style="margin-top:0.5rem">
                      The engine could not list peers: ${escapeHtml(failed)}
                    </div>`
+                : '') +
+              (rows.length > 0
+                ? `<div class="sub" style="margin-top:0.5rem">
+                     <b>Has</b> is drawn the same way as the bars on General —
+                     a column covers many pieces and is only filled when all of
+                     them are held. <b>Progress</b> is the engine's own figure
+                     for the same peer, which is exact.
+                   </div>`
                 : '');
-            return;
-          }
 
-          if (name === 'pieces') {
-            const width = Math.max(256, Math.min(2048, pane.clientWidth || 1000));
-            const info = await api(
-              `/api/torrents/${infoHash}/pieces?buckets=${width}&peers=true`,
-            );
-            if (info.error) {
-              pane.innerHTML = `<div class="sub">${escapeHtml(info.error)}</div>`;
-              return;
-            }
-
-            const held = info.haveCount ?? 0;
-            const pctHeld = info.numPieces ? (held / info.numPieces) * 100 : 0;
-            pane.innerHTML = `
-              <div class="piecerow">
-                <span class="label">Downloaded</span>
-                <canvas class="piecebar" data-bar="have"></canvas>
-                <span class="value">${pctHeld.toFixed(1)}%</span>
-              </div>
-              <div class="piecerow">
-                <span class="label">Availability</span>
-                <canvas class="piecebar" data-bar="availability"></canvas>
-                <span class="value">${(info.distributedCopies ?? 0).toFixed(3)}</span>
-              </div>
-              <div class="sub" style="margin:0.6rem 0 1rem">
-                ${info.numPieces} pieces of ${bytes(info.pieceLength)}, drawn in
-                ${info.buckets} columns — so one column is
-                ${Math.ceil(info.numPieces / info.buckets)} piece(s), and is only
-                shown as held when <i>all</i> of them are. Availability is the
-                <i>rarest</i> piece in each column: one piece nobody has is the
-                answer to "can this still be completed", however well supplied
-                its neighbours are. It counts <i>connected peers</i> and not
-                this node, so an archive only this node holds shows an empty
-                bar — which is the truth about the swarm, not about the file.
-              </div>
-              ${
-                (info.peers ?? []).length > 0
-                  ? `<h3 style="margin:0 0 0.5rem">What each peer has</h3>` +
-                    (info.peers ?? [])
-                      .map(
-                        (peer, index) => `
-                          <div class="piecerow">
-                            <span class="label" title="${escapeHtml(peer.client ?? '')}">${escapeHtml(peer.address ?? '?')}</span>
-                            <canvas class="piecebar thin" data-bar="peer-${index}"></canvas>
-                            <span class="value">${peer.progress != null ? pct(peer.progress) : ''}</span>
-                          </div>`,
-                      )
-                      .join('')
-                  : '<div class="sub">No connected peer is reporting what it holds.</div>'
-              }`;
-
-            drawPieceBar(pane.querySelector('[data-bar="have"]'), info.have, 'have');
-            drawPieceBar(
-              pane.querySelector('[data-bar="availability"]'),
-              info.availability,
-              'availability',
-            );
-            (info.peers ?? []).forEach((peer, index) =>
-              drawPieceBar(pane.querySelector(`[data-bar="peer-${index}"]`), peer.have, 'peer'),
-            );
+            [...peers, ...extra].forEach((peer, index) => {
+              const have = bitfields.get(peer.address ?? peer.ip);
+              if (!have) return;
+              drawPieceBar(
+                pane.querySelector(`[data-bar="peer-${index}"]`),
+                have,
+                'peer',
+              );
+            });
             return;
           }
 
@@ -1645,6 +1764,56 @@
         }
       }
 
+      /**
+       * Draws the two whole-archive bars at the top of General.
+       *
+       * Into the canvases that are already there rather than by re-rendering
+       * the pane: General carries the category box and the export buttons, and
+       * replacing its markup under a three-second refresh would take the focus
+       * out of whatever was being typed. A canvas can be redrawn in place.
+       * @param {string} infoHash - The open archive.
+       * @returns {Promise<void>} - Resolves once drawn, or quietly if it cannot be.
+       */
+      async function renderPieceBars(infoHash) {
+        const holder = $('entry-pieces');
+        if (!holder) return;
+
+        const width = Math.max(256, Math.min(2048, holder.clientWidth || 1000));
+        let info;
+        try {
+          info = await api(
+            `/api/torrents/${infoHash}/pieces?buckets=${width}`,
+          );
+        } catch {
+          // An engine that cannot describe pieces is not a fault worth a
+          // message here — the rest of General is still the answer somebody
+          // opened this for.
+          return;
+        }
+        if (!info || info.error || !info.have) return;
+
+        const held = info.haveCount ?? 0;
+        const pctHeld = info.numPieces ? (held / info.numPieces) * 100 : 0;
+        holder.querySelector('[data-value="have"]').textContent =
+          `${pctHeld.toFixed(1)}%`;
+        holder.querySelector('[data-value="availability"]').textContent = (
+          info.distributedCopies ?? 0
+        ).toFixed(3);
+        holder.querySelector('[data-role="piecenote"]').textContent =
+          `${info.numPieces} pieces of ${bytes(info.pieceLength)}, drawn in ` +
+          `${info.buckets} columns — so one column is ` +
+          `${Math.ceil(info.numPieces / info.buckets)} piece(s), and is only ` +
+          'shown as held when all of them are.';
+
+        drawPieceBar(holder.querySelector('[data-bar="have"]'), info.have, 'have');
+        drawPieceBar(
+          holder.querySelector('[data-bar="availability"]'),
+          info.availability,
+          'availability',
+        );
+        holder.hidden = false;
+      }
+
       async function renderDetail(infoHash, keepTab = true) {
         if (!keepTab) activeTab = 'general';
         const panel = $('detail');
@@ -1668,18 +1837,36 @@
         const summary = entry.pmtiles ?? {};
         const mode = entry.mode ?? 'mirror';
 
+        // No heading. The panel opens directly under the row that names the
+        // archive, so a title here repeated what the eye had just read one
+        // line above it. Named to assistive technology instead, which has no
+        // "just above" to rely on.
+        panel.setAttribute('role', 'region');
+        panel.setAttribute('aria-label', entry.name);
         panel.innerHTML = `
-          <h2>${escapeHtml(entry.name)}</h2>
           <div class="tabs">
             <button data-tab="general" class="on">General</button>
             <button data-tab="trackers">Trackers</button>
             <button data-tab="peers">Peers</button>
-            <button data-tab="pieces">Pieces</button>
             <button data-tab="sources">HTTP sources</button>
             <button data-tab="content">Content</button>
           </div>
 
           <div data-pane="general">
+          <div id="entry-pieces" hidden>
+            <div class="piecerow">
+              <span class="label">Downloaded</span>
+              <canvas class="piecebar" data-bar="have"></canvas>
+              <span class="value" data-value="have"></span>
+            </div>
+            <div class="piecerow">
+              <span class="label" title="The rarest piece in each column: one piece nobody has answers &quot;can this still be completed&quot;, however well supplied its neighbours are. Connected peers only, not this node — so an archive only this node holds shows an empty bar, which is the truth about the swarm rather than about the file.">Availability</span>
+              <canvas class="piecebar" data-bar="availability"></canvas>
+              <span class="value" data-value="availability"></span>
+            </div>
+            <div class="sub" data-role="piecenote" style="margin:0.6rem 0 1rem"></div>
+          </div>
+
           <div class="grid">
             <div><span>infohash</span><b>${escapeHtml(entry.infoHash)}</b></div>
             <div><span>size</span><b>${bytes(entry.size)}</b></div>
@@ -1803,7 +1990,6 @@
 
           <div data-pane="trackers" hidden><div class="sub">loading…</div></div>
           <div data-pane="peers" hidden><div class="sub">loading…</div></div>
-          <div data-pane="pieces" hidden><div class="sub">loading…</div></div>
           <div data-pane="sources" hidden><div class="sub">loading…</div></div>
           <div data-pane="content" hidden><div class="sub">loading…</div></div>`;
 
@@ -2154,6 +2340,7 @@ Every piece is hashed against the ` +
           }
         };
 
+        renderPieceBars(infoHash);
         if (servable) renderPreview(entry);
       }