@bongos/core 1.19.534 → 1.19.536

package/modules/hall-ui/public/project-settings.js

@@ -0,0 +1,249 @@
+// project-settings.js — the five fundamentals of this project, each with the place
+// its value came from (task 1003280, goal 1000072, criterion legibility-project-settings).
+//
+// WHAT THIS PAGE IS FOR. Goal 1000072's thesis: the project is legible to Claude and
+// illegible to a person. Answering "how long before work is called stale", "what
+// categories do we use", "how is a credit calculated", "is equity real" or "what
+// share of upmarket is paid on credits" each meant reading source. This page is the
+// translation layer — it invents no value and stores nothing of its own.
+//
+// THE RULE THAT SHAPES EVERY ROW: the SERVER decides what each row says and where it
+// came from; this file only draws it. No formula, threshold, default or file path is
+// re-typed here. That is deliberate and load-bearing — a settings page carrying its
+// own copy of `round(cost × 1.20)` or of "1..365" is exactly the drift ADR 0226
+// describes, one release later and on the screen the owner trusts most.
+//
+// A ROW THE READER CANNOT TYPE INTO MUST LOOK UNWRITABLE AND SAY WHY. Three of the
+// five are read-only, and two of those are read-only for different reasons — equity
+// is a settled owner decision that it is not real, upmarket is a knob that does not
+// exist yet. Both render as themselves rather than as a plausible zero.
+(() => {
+  'use strict';
+
+  const API = '/api/bongos';
+  // The generated typed client (task 1996 / R09), as every other hall page uses it.
+  const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+  const { escapeHtml } = window.OTB;
+  const { emptyStateHtml } = window.OTBKit;
+  const toast = (msg) => window.OTB.toast(msg);
+
+  const $ = (id) => document.getElementById(id);
+
+  async function fetchJson(path) {
+    const res = await api.request('GET', `${API}${path}`);
+    if (res.status === 401) { window.location.assign(`${API}/auth/web/start`); throw { kind: '401' }; }
+    if (res.status === 403) { throw { kind: '403' }; }
+    if (!res.ok) throw new Error(`${path} → ${res.status}`);
+    return res.data;
+  }
+
+  async function sendJson(method, path, body) {
+    const res = await api.request(method, `${API}${path}`, { body: body || {} });
+    if (res.status === 401) { window.location.assign(`${API}/auth/web/start`); throw { kind: '401' }; }
+    const data = res.data || {};
+    if (!res.ok) {
+      const err = data.error || {};
+      // The server's message when it wrote one (its range wording is the authority),
+      // the code as a last resort. Never a message invented here.
+      throw new Error(err.message && err.message !== err.code ? err.message : (err.code || `${path} → ${res.status}`));
+    }
+    return data;
+  }
+
+  // ---- row chrome ----------------------------------------------------------
+
+  // The provenance foot. `reads.file` is the artefact the value resolves from and is
+  // shown as code because it is a path or a table key the reader may go and open.
+  function provHtml(row) {
+    const reads = row.reads || {};
+    const bits = [];
+    if (row.source) bits.push(`source: ${escapeHtml(String(row.source))}`);
+    if (reads.file) bits.push(`reads <code>${escapeHtml(String(reads.file))}</code>`);
+    if (reads.adr) bits.push(escapeHtml(String(reads.adr)));
+    if (!bits.length) return '';
+    return `<p class="ps-prov">${bits.join(' · ')}</p>`;
+  }
+
+  const PILL = {
+    live: ['ps-pill--live', 'live'],
+    'read-only': ['ps-pill--readonly', 'committed config'],
+    'not-yet-real': ['ps-pill--readonly', 'not yet real'],
+    absent: ['ps-pill--absent', 'not configured'],
+    unavailable: ['ps-pill--absent', 'unavailable'],
+  };
+
+  function pillHtml(row) {
+    // An editable row is the only thing that gets the "live" pill; a read-only row
+    // whose state the server called 'live' is still committed config to the reader.
+    const key = row.editable ? 'live' : (row.state === 'live' ? 'read-only' : row.state);
+    const [cls, label] = PILL[key] || PILL['read-only'];
+    return `<span class="ps-pill ${cls}">${escapeHtml(label)}</span>`;
+  }
+
+  // One row's shell. `bodyHtml` is whatever that row needs beneath its sentence —
+  // controls for a knob, nothing for the three that are read.
+  function rowHtml(row, bodyHtml) {
+    return `
+      <li class="ov-row" data-row="${escapeHtml(row.key)}">
+        <div class="ov-row__main">
+          <span class="ov-row__title">${escapeHtml(row.title)} ${pillHtml(row)}</span>
+          <p class="ov-row__sub">${escapeHtml(row.sentence || '')}</p>
+          ${bodyHtml || ''}
+          ${provHtml(row)}
+        </div>
+      </li>`;
+  }
+
+  // ---- the two knobs -------------------------------------------------------
+
+  function rotBodyHtml(row) {
+    const v = row.value || {};
+    // The bounds come from the server's own resolver, never re-typed here.
+    const invalid = row.invalid
+      ? `<p class="ps-invalid">A configured value could not be used: <code>${escapeHtml(String(row.invalid.raw))}</code>
+           at ${escapeHtml(String(row.invalid.where))} — ${escapeHtml(String(row.invalid.reason))}.
+           The timer above is the fallback that is actually in force.</p>`
+      : '';
+    const sib = row.sibling
+      ? `<p class="ps-sibling"><strong>${escapeHtml(row.sibling.title)}</strong> —
+           ${escapeHtml(row.sibling.sentence)}
+           ${row.sibling.reads && row.sibling.reads.file
+             ? `<code>${escapeHtml(row.sibling.reads.file)}</code>` : ''}</p>`
+      : '';
+    return `
+      ${invalid}
+      <div class="ps-controls">
+        <label for="ps-rot-days">Raise after</label>
+        <input type="number" id="ps-rot-days" min="${escapeHtml(String(v.min))}" max="${escapeHtml(String(v.max))}"
+               step="1" value="${escapeHtml(String(v.days))}" aria-describedby="ps-rot-hint">
+        <span id="ps-rot-hint">days (${escapeHtml(String(v.min))}–${escapeHtml(String(v.max))})</span>
+        <button type="button" class="btn" id="ps-rot-save">Save</button>
+      </div>
+      ${sib}`;
+  }
+
+  function catsBodyHtml(row) {
+    const v = row.value || {};
+    const cats = Array.isArray(v.categories) ? v.categories : [];
+    const list = cats.length
+      ? `<ul class="ps-cats">${cats.map((c) => `
+          <li class="ps-cat ${c.active ? '' : 'ps-cat--off'}" data-cat="${escapeHtml(String(c.id))}">
+            <input type="text" class="ps-cat__label" value="${escapeHtml(String(c.label))}" aria-label="Label for ${escapeHtml(String(c.slug))}">
+            <span class="ps-cat__slug"><code>${escapeHtml(String(c.slug))}</code></span>
+            <input type="number" class="ps-cat__order" step="10" value="${escapeHtml(String(c.sort_order))}" aria-label="Order for ${escapeHtml(String(c.slug))}">
+            <label><input type="checkbox" class="ps-cat__active" ${c.active ? 'checked' : ''}> offered</label>
+            <button type="button" class="btn ps-cat__save">Save</button>
+          </li>`).join('')}</ul>`
+      : emptyStateHtml('This project has no categories yet.');
+    return `
+      ${list}
+      <div class="ps-controls">
+        <input type="text" id="ps-cat-new" placeholder="New category label" aria-label="New category label">
+        <button type="button" class="btn" id="ps-cat-add">Add</button>
+      </div>`;
+  }
+
+  // ---- render + wire -------------------------------------------------------
+
+  let rows = [];
+
+  function render() {
+    const mount = $('ps-rows');
+    mount.innerHTML = `<ul class="ov-rows">${rows.map((row) => {
+      if (row.key === 'rot_timer' && row.editable) return rowHtml(row, rotBodyHtml(row));
+      if (row.key === 'work_categories' && row.editable) return rowHtml(row, catsBodyHtml(row));
+      return rowHtml(row, '');
+    }).join('')}</ul>`;
+    wire();
+  }
+
+  // Every control dies while a write is in flight and comes back after — the
+  // sessions.js discipline. Without it a double-click sends two writes and the second
+  // reply, arriving first, can repaint a value nobody asked for.
+  function setBusy(on) {
+    const mount = $('ps-rows');
+    mount.querySelectorAll('input, button').forEach((el) => { el.disabled = on; });
+  }
+
+  function wire() {
+    const rotSave = $('ps-rot-save');
+    if (rotSave) {
+      rotSave.addEventListener('click', async () => {
+        const days = Number($('ps-rot-days').value);
+        setBusy(true);
+        try {
+          const out = await sendJson('PATCH', '/project-settings/rot-days', { days });
+          toast(`Stale timer is now ${out.rot_days} days.`);
+          await load();          // re-read, so the row shows what the SERVER now resolves
+        } catch (err) {
+          toast(err.message || 'Could not save the timer.');
+          setBusy(false);        // load() re-renders on success; on failure put the row back
+        }
+      });
+    }
+
+    const addBtn = $('ps-cat-add');
+    if (addBtn) {
+      addBtn.addEventListener('click', async () => {
+        const label = ($('ps-cat-new').value || '').trim();
+        if (!label) { toast('Give the category a label.'); return; }
+        setBusy(true);
+        try {
+          const out = await sendJson('POST', '/work-categories', { label });
+          toast(out.created === false ? `“${out.category.label}” already existed.` : `Added “${out.category.label}”.`);
+          await load();
+        } catch (err) {
+          toast(err.message || 'Could not add the category.');
+          setBusy(false);
+        }
+      });
+    }
+
+    document.querySelectorAll('.ps-cat__save').forEach((btn) => {
+      btn.addEventListener('click', async () => {
+        const li = btn.closest('.ps-cat');
+        const id = li.getAttribute('data-cat');
+        const body = {
+          label: li.querySelector('.ps-cat__label').value.trim(),
+          sort_order: Number(li.querySelector('.ps-cat__order').value),
+          active: li.querySelector('.ps-cat__active').checked,
+        };
+        setBusy(true);
+        try {
+          await sendJson('PATCH', `/work-categories/${encodeURIComponent(id)}`, body);
+          toast('Category saved.');
+          await load();
+        } catch (err) {
+          toast(err.message || 'Could not save the category.');
+          setBusy(false);
+        }
+      });
+    });
+  }
+
+  async function load() {
+    try {
+      const data = await fetchJson('/project-settings');
+      rows = Array.isArray(data.rows) ? data.rows : [];
+      $('ps-sub').textContent = `${rows.length} fundamentals · ${rows.filter((r) => r.editable).length} you can change here`;
+      $('ps-body').hidden = false;
+      $('ps-sealed').hidden = true;
+      render();
+    } catch (err) {
+      if (err && err.kind === '401') return;   // already redirecting to sign-in
+      if (err && err.kind === '403') {
+        $('ps-sub').textContent = 'Restricted';
+        $('ps-sealed').hidden = false;
+        $('ps-body').hidden = true;
+        return;
+      }
+      // A failed read is a NAMED failure, never a blank page that reads as "this
+      // project has no settings".
+      $('ps-sub').textContent = 'Could not load';
+      $('ps-body').hidden = false;
+      $('ps-rows').innerHTML = emptyStateHtml('Could not load the project settings just now.');
+    }
+  }
+
+  load();
+})();

package/modules/hall-ui/public/roadmap-timeline.js

@@ -0,0 +1,105 @@
+// roadmap-timeline.js — the program in time (task 1003447, criterion
+// `legibility-series-are-drawn`).
+//
+// /public/versions has always carried `started_at` and `shipped_at` per version,
+// and /roadmap drew NEITHER: both dates reached the browser and came out as
+// "Sep 2026" on a shipped pill. The series two dates support is a SPAN — when
+// each version ran — and every span on ONE shared axis is the reading the page
+// exists for: whether the build is speeding up, and how much of the in-flight
+// version's run is already behind it.
+//
+// Its own file rather than another sixty lines of roadmap.js, for the reason
+// profile-charts.js is its own file: the builders are PURE, so a test imports
+// this and runs the real arithmetic over the real fixture instead of agreeing
+// with a copy of it. Exposed as window.OTBRoadmapTimeline; node-require-safe
+// (the hall-kit.js / dom-utils.js pattern — assignment is the only eval-time
+// side effect, and only when a window exists).
+//
+// The DRAWING is the kit's: OTBKit.barSeriesHtml with a per-row `start`, the
+// span option added for exactly this. Date arithmetic stays here — the kit takes
+// `max` as the axis span and `start` as an offset into it, and never learns what
+// a month is. That is the same seam every other chart in the hall rides.
+(() => {
+  'use strict';
+
+  const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+  // "May ’26" — short enough that a whole span label fits the value column at
+  // phone width, which "May 2026 – September 2026" does not.
+  function ymShort(t) {
+    const d = new Date(t);
+    return Number.isNaN(d.getTime()) ? '' : `${MON[d.getMonth()]} ’${String(d.getFullYear()).slice(-2)}`;
+  }
+
+  // One row per version that actually started, oldest first.
+  //
+  // A version with no parsable `start` is NOT on the timeline, because it has
+  // not happened. Defaulting it to the axis origin would draw it as having begun
+  // at the start of the project, which is the opposite of true; the caller says
+  // how many were left out instead.
+  //
+  // `open` is a version still running (or parked mid-run): its span reaches
+  // today and its label says "now", rather than naming an end date nothing
+  // recorded. `to` is floored at `from` so a clock skew or a bad shipped_at
+  // cannot produce a negative span the kit would draw backwards.
+  function timelineRows(all, now) {
+    return (all || [])
+      .map((v) => {
+        const from = Date.parse(v && v.start);
+        if (!Number.isFinite(from)) return null;
+        const shipped = Date.parse(v.ship);
+        const open = !Number.isFinite(shipped);
+        return { v, from, to: Math.max(open ? now : shipped, from), open };
+      })
+      .filter(Boolean)
+      .sort((a, b) => a.from - b.from);
+  }
+
+  // The chart card: the spans, and the foot that says what the axis covers and
+  // what is missing from it. Returns { count, html }, or NULL when there is
+  // nothing worth drawing — so the caller renders no section at all rather than
+  // an empty panel. One return shape either way, never a string sometimes and an
+  // object other times.
+  //
+  // `kit` is a parameter (defaulting to window.OTBKit) so this module is pure
+  // enough to import in node and run against the real kit in a test.
+  function timelineCardHtml(all, now, kit) {
+    const k = kit || (typeof window !== 'undefined' ? window.OTBKit : null);
+    if (!k) return null;
+    const rows = timelineRows(all, now);
+    // One version is not a timeline: a single bar filling the whole axis says
+    // nothing that version's own card does not already say.
+    if (rows.length < 2) return null;
+
+    const t0 = rows[0].from;
+    const t1 = Math.max(now, ...rows.map((r) => r.to));
+    const span = (t1 - t0) || 1;
+    const bars = k.barSeriesHtml(
+      rows.map((r) => ({
+        label: r.v.id,
+        value: r.to - r.from,
+        start: r.from - t0,
+        valueLabel: `${ymShort(r.from)} → ${r.open ? 'now' : ymShort(r.to)}`,
+      })),
+      {
+        max: span,
+        list: true,
+        ariaLabel: 'When each version ran',
+        labelWidth: '92px',
+        valueWidth: '108px',
+        barHeight: '10px',
+        pill: true,
+      },
+    );
+    const missing = (all || []).length - rows.length;
+    const foot = `${ymShort(t0)} to today, one bar per version.`
+      + (missing > 0
+        ? ` ${missing} version${missing === 1 ? '' : 's'} with no start date ${missing === 1 ? 'is' : 'are'} not shown.`
+        : '');
+    return { count: rows.length, html: k.chartCardHtml('When each version ran', bars, foot) };
+  }
+
+  const api = { timelineRows, timelineCardHtml, ymShort };
+  if (typeof window !== 'undefined') window.OTBRoadmapTimeline = api;
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+})();

package/modules/hall-ui/public/roadmap.html

@@ -45,6 +45,12 @@
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <script src="/builders/dom-utils.js?v=2026-06-14-domutils"></script>
-<script src="/builders/roadmap.js?v=2026-07-24-deck1"></script>
+<!-- The chart kit and the timeline's series builders (task 1003447). Both MUST
+     precede roadmap.js: the page reads window.OTBKit / window.OTBRoadmapTimeline
+     at render time, so loading either after would be a blank section in
+     production and a green unit suite. tests/hall_kit_charts.mjs pins the order. -->
+<script src="/builders/hall-kit.js"></script>
+<script src="/builders/roadmap-timeline.js"></script>
+<script src="/builders/roadmap.js?v=2026-09-03-timeline"></script>
 </body>
 </html>

package/modules/hall-ui/public/roadmap.js

@@ -241,6 +241,18 @@
     </article>`;
   }
 
+  // The program in time (task 1003447). The SERIES is roadmap-timeline.js's —
+  // pure builders in their own file so a test runs the real arithmetic over the
+  // real fixture — and the SECTION chrome is this page's, which is the same seam
+  // the chart kit keeps everywhere: the module draws, the page frames. Missing
+  // module or fewer than two started versions renders nothing at all, so the
+  // deck reads exactly as it did before rather than growing an empty panel.
+  function timelineHtml(all, now) {
+    const mod = window.OTBRoadmapTimeline;
+    const card = mod ? mod.timelineCardHtml(all, now) : null;
+    return card ? sectionHtml('flight', 'In time', card.count, '', card.html) : '';
+  }
+
   function sectionHtml(dotCls, title, count, note, inner) {
     return `<section class="rm-sec">
       <div class="rm-sec__h"><span class="rm-sec__dot rm-sec__dot--${dotCls}"></span><span class="rm-sec__t">${title}</span><span class="rm-sec__n">${count}</span><span class="rm-sec__rule"></span></div>
@@ -380,6 +392,10 @@
       html += `<div class="rm-hero"><div class="rm-lab" style="max-width:none">No version is in flight right now.</div></div>`;
     }
 
+    // Directly under the hero: both are program-level readings, and this is the
+    // one that answers "how fast" rather than "how much".
+    html += timelineHtml(all, Date.now());
+
     if (staged.length) {
       html += sectionHtml('staged', 'Staged', staged.length, 'Seeded with goals, not yet started.', `<div class="rm-grid">${staged.map(stagedCard).join('')}</div>`);
     }

package/modules/hall-ui/public/shell.js

@@ -236,6 +236,9 @@
       { id: 'harbor', label: 'Harbor', icon: 'admin', href: '/harbor', gate: 'government', module: 'dev-box' },
       { id: 'gate', label: 'Gate', icon: 'admin', href: '/gate', gate: 'government' },
       { id: 'sessions', label: 'Sessions', icon: 'admin', href: '/sessions', gate: 'government' },
+      // The project's own fundamentals (task 1003280, goal 1000072). Mirrors the
+      // server's requireGovernmentPage floor; cosmetic only, as every item here is.
+      { id: 'project-settings', label: 'Project settings', icon: 'admin', href: '/project-settings', gate: 'government' },
       // BV1.R113: the roles-and-permissions tab (ADR 0151). The one genuinely
       // Archon-only item the 'government' gate comment anticipated — cosmetic
       // only; requireGovernmentManagePage (the government.manage atom) is the wall.

package/modules/hall-ui/public/style.css

@@ -2039,8 +2039,10 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
      reduced-motion kill switch (§the kill switch, at the end of this sheet)
      already zeroes this with !important — do NOT add a second @media block
      here, which is what `tests/hall_tokens.mjs` forbids and why the rule
-     cannot rot in two places. */
-  transition: width 200ms ease;
+     cannot rot in two places. `margin-left` rides along because a SPAN bar
+     (barSeriesHtml's per-row `start`) moves as well as grows, and a bar that
+     slides while its neighbour eases reads as two different animations. */
+  transition: width 200ms ease, margin-left 200ms ease;
 }
 .kit-bars__row:hover .kit-bars__fill { opacity: .8; }
 .kit-bars__val { text-align: right; color: var(--ink-faint); }

package/modules/hall-ui/public/watch.html

@@ -111,6 +111,10 @@
             <h2 id="ledger-h" class="scroll__h">Repo health</h2>
             <p class="scroll__lede">The shape and health of the codebase.</p>
             <div id="ledger-stats" class="ov-figs"><span class="kit-skel"></span></div>
+            <!-- The trend the request has always carried and the page dropped
+                 on the floor (task 1003447) — the same shape as the sessions
+                 fix above it. -->
+            <div id="ledger-trend"></div>
             <div id="ledger-loc"></div>
             <div id="ledger-files"></div>
           </section>

package/modules/hall-ui/public/watch.js

@@ -942,6 +942,120 @@
       .replace(/\b\w/g, (c) => c.toUpperCase());
   }
 
+  // The four series the snapshot table keeps, in the order a reader wants them:
+  // how big the codebase is, then the three kinds of rot it accumulates.
+  //
+  // `zeroBased` is the axis decision, made per metric because the metrics are
+  // not alike. A count of dead exports belongs on a zero floor: zero is a real,
+  // reachable state and the distance from it IS the reading. `total_loc` never
+  // goes near zero — on a zero floor a month of real movement is a flat band
+  // across the top of the box, which is a picture of nothing. That one fits its
+  // floor to the data, and `trendFigure` puts the range in the foot so the
+  // magnified wiggle is never silent about what it is.
+  const TREND_METRICS = [
+    {
+      key: 'total_loc', title: 'Total lines', fmt: fmtCompact, zeroBased: false,
+      foot: 'Every tracked line of the codebase, snapshot by snapshot.',
+    },
+    {
+      key: 'dead_exports', title: 'Dead exports', fmt: fmtInt, zeroBased: true,
+      foot: 'Exported symbols nothing imports — the knip scan, run daily.',
+    },
+    {
+      key: 'stale_branches', title: 'Stale branches', fmt: fmtInt, zeroBased: true,
+      foot: 'Branches with no movement inside the staleness window.',
+    },
+    {
+      key: 'confirmed_unshipped', title: 'Confirmed, unshipped', fmt: fmtInt, zeroBased: true,
+      foot: 'Work verified but not yet landed — the strand backlog.',
+    },
+  ];
+
+  // One repo-health metric as a figure: the step plot, the value it ends on, and
+  // the table twin that keeps it out of picture-only territory.
+  //
+  // A STEP line, not a polyline, and that is the honest shape here: a snapshot's
+  // value is what the repo measured that morning and it holds until the next run
+  // measures again. The scan does not run every single day, so a straight line
+  // between two samples a week apart would draw movement nobody recorded.
+  //
+  // No readout is wired, so the plot passes `interactive: false` and takes
+  // neither a focus stop nor a crosshair — the /drachmae contract. The reading
+  // is the aria-label, the labelled endpoint and the twin.
+  function trendFigure({ key, title, fmt, foot: footText, zeroBased }, trend) {
+    const kit = window.OTBKit;
+    // Only rows that actually carry this metric. An older snapshot predates a
+    // column and sends null; counting that as 0 would draw a cliff to the floor
+    // that never happened.
+    //
+    // NOT `Number(v)` — that is the trap, and the trap is silent: Number(null),
+    // Number(undefined ?? '') and Number('') are 0, 0 and 0, every one of them
+    // finite, so a plain isFinite filter keeps a missing reading as a real zero.
+    // The page's own `num()` coerces the same way for the same reason. Mapping
+    // an absent value to NaN is what makes the filter below mean "carried".
+    const carried = (v) => (v === null || v === undefined || v === '' ? NaN : Number(v));
+    const points = trend
+      .map((r) => ({ x: Date.parse(r.snapshot_date), value: carried(r[key]) }))
+      .filter((p) => Number.isFinite(p.x) && Number.isFinite(p.value));
+    // One sample is a reading, not a trend, and it draws a single dot on an
+    // axis with nothing to compare it to.
+    if (points.length < 2) return '';
+
+    const last = points[points.length - 1];
+    // The axis window is the kit's arithmetic, not this page's.
+    const { lo, hi, yMin, yMax } = kit.plotWindow(points.map((p) => p.value), { zeroBased });
+
+    const series = kit.timeStepSeriesHtml(points, {
+      x0: points[0].x, x1: last.x, yMin, yMax,
+    });
+    const { endX, endY } = series.geometry;
+    const day = (t) => new Date(t).toISOString().slice(0, 10);
+    // At most ~21 rows however wide the window is (?days goes to 90), and the
+    // last row is always present so the twin ends where the plot's label does.
+    const step = Math.max(1, Math.ceil(points.length / 20));
+    const twinRows = points.filter((p, i) => i % step === 0 || i === points.length - 1);
+    const range = `${fmt(lo)} – ${fmt(hi)} across ${fmtInt(points.length)} snapshots.`;
+    // A fitted floor multiplies how big every move looks, so the figure says so
+    // in words rather than letting the picture imply a collapse to nothing.
+    const axisNote = zeroBased ? '' : ` The axis starts at ${fmt(Math.round(yMin))}, not zero.`;
+
+    return `<figure class="pchart" id="ledger-trend-${escapeHtml(key)}">
+      <figcaption class="pchart__title">${escapeHtml(title)}</figcaption>
+      ${kit.plotSvgHtml({
+    series: series.body,
+    interactive: false,
+    ariaLabel: `${title}: ${fmt(last.value)} on ${day(last.x)}, ranging ${fmt(lo)} to ${fmt(hi)} over the window.`,
+    label: kit.plotValueLabelHtml(endX, endY - 8, fmt(last.value), 'end'),
+    leftTick: day(points[0].x),
+    rightTick: day(last.x),
+  })}
+      <details class="pchart__twin">
+        <summary>Read it as a table</summary>
+        <table class="ledger pchart__table"><thead><tr><th>Snapshot</th><th>${escapeHtml(title)}</th></tr></thead><tbody>
+        ${twinRows.map((p) => `<tr><td>${escapeHtml(day(p.x))}</td><td>${escapeHtml(fmt(p.value))}</td></tr>`).join('')}
+        </tbody></table>
+      </details>
+      <p class="pchart__foot">${escapeHtml(`${footText} ${range}${axisNote}`)}</p>
+    </figure>`;
+  }
+
+  // The trend the route has always sent and renderLedger discarded (task
+  // 1003447). It is requested WITH ?days=30 — the page was paying for the window
+  // and reading one snapshot off it.
+  function renderTrend(data) {
+    const el = $('#ledger-trend');
+    if (!el) return;
+    const trend = Array.isArray(data.trend) ? data.trend : [];
+    const figures = TREND_METRICS.map((m) => trendFigure(m, trend)).filter(Boolean).join('');
+    // Nothing plottable yet (a fresh instance, or one metrics run) renders
+    // nothing at all — the figures above already say what today's numbers are,
+    // and an empty panel under them would be worse than no panel.
+    el.innerHTML = figures
+      ? `<section class="ov-group"><div class="ov-group__head"><span class="ov-group__name">Over the last ${escapeHtml(String(data.window_days || 30))} days</span></div>`
+        + `<div class="pcharts">${figures}</div></section>`
+      : '';
+  }
+
   function renderLedger(data, stats) {
     const locEl = $('#ledger-loc');
     const filesEl = $('#ledger-files');
@@ -962,6 +1076,8 @@
     }
     stats.innerHTML = figs(cards);
 
+    renderTrend(data);
+
     // loc_by_dir as a two-column ledger under its own head.
     const locByDir = latest.loc_by_dir && typeof latest.loc_by_dir === 'object' ? latest.loc_by_dir : {};
     const dirEntries = Object.entries(locByDir).sort((a, b) => num(b[1]) - num(a[1]));