@intentius/behold 0.24.0 → 0.26.0

package/example-choudoufu-estate/chant.workspace.json

@@ -4,7 +4,7 @@
   "pins": [
     {
       "package": "@intentius/chant-lexicon-terraform",
-      "version": "0.121.0"
+      "version": "0.124.0"
     }
   ],
   "members": [

package/example-terraform-estate/README.md

@@ -90,7 +90,7 @@ install them, so that every user who serves an ordinary chant project does not
 carry an HCL parser they will never run:
 
 ```sh
-npm install --no-save @intentius/chant-lexicon-terraform@^0.121.0 @cdktn/hcl2json@^0.24.0
+npm install --no-save @intentius/chant-lexicon-terraform@^0.124.0 @cdktn/hcl2json@^0.24.0
 ```
 
 Without them the demo refuses before it serves, naming both packages, the
@@ -101,7 +101,7 @@ the packages `chant.workspace.json` pins, looked up from the workspace's own
 `node_modules` at exactly the pinned version. A demo copy has no
 `node_modules`, so `behold demo` links the lexicon behold resolved into the
 copy and sets the copy's pin to that version (#484). It says so as it loads:
-`linked @intentius/chant-lexicon-terraform 0.121.0 into the copy`. Serving
+`linked @intentius/chant-lexicon-terraform 0.124.0 into the copy`. Serving
 your own declared workspace is different: install the pinned lexicon in its
 root, the way `chant workspace check` asks.
 

package/example-terraform-estate/chant.workspace.json

@@ -4,7 +4,7 @@
   "pins": [
     {
       "package": "@intentius/chant-lexicon-terraform",
-      "version": "0.121.0"
+      "version": "0.124.0"
     }
   ],
   "members": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentius/behold",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "license": "Apache-2.0",
   "type": "module",
   "description": "behold — a live control plane on chant. See your whole estate (every substrate in one graph), coloured by drift; act through delegated, gated Ops.",
@@ -41,14 +41,14 @@
   },
   "dependencies": {
     "@hono/node-server": "^2.0.5",
-    "@intentius/chant": "^0.121.1",
-    "@intentius/chant-k8s-client": "^0.121.1",
+    "@intentius/chant": "^0.124.17",
+    "@intentius/chant-k8s-client": "^0.124.17",
     "@intentius/pinhole": "^0.3.8",
     "ajv": "^8.20.0",
     "hono": "^4.12.34"
   },
   "peerDependencies": {
-    "@intentius/chant-lexicon-terraform": "^0.121.0",
+    "@intentius/chant-lexicon-terraform": "^0.124.0",
     "@cdktn/hcl2json": "^0.24.0"
   },
   "peerDependenciesMeta": {
@@ -60,6 +60,7 @@
     }
   },
   "devDependencies": {
+    "@intentius/chant-lexicon-sql": "^0.124.13",
     "@types/node": "^26.4.1",
     "esbuild": "^0.28.0",
     "playwright": "^1.62.1",

package/web/app.js

@@ -13,8 +13,16 @@ import { readViewQuery, writeViewQuery, settleView, settlePlace, refusalLine } f
 import { readEmbed, selectMessage, viewFromMessage } from "./embed.js";
 import { gateCards } from "./workspace-gates.js";
 import { cornerOf, estateLine, hrefOf as tgHref, legend as tgLegend, markLine, rootRows as tgRootRows, waveCards } from "./terragucci.js";
+import { laneElement as tgLane, rootOfCard as tgRootOfCard, historyElement as tgHistoryLane } from "./terragucci-timeline.js";
+import { renderLane } from "./terragucci-lifecycle.js";
+import { renderReleases } from "./releases.js";
+import { renderYodelLane } from "./sql-yodeler-lane.js";
+import { initTerragucciEstate } from "./terragucci-estate.js";
+import { auditLines as yrAuditLines, cornerText as yrCorner, datedWords as yrDated, environmentLines as yrEnvLines, joinMarks as yrJoin, legend as yrLegend, markLine as yrMarkLine } from "./yodel-report.js";
+import { cardProgress as tgCardProgress, progressLines as tgProgressLines, progressSection as tgProgressSection, stampProgress as tgStampProgress } from "./terragucci-progress.js";
 import { seconds, whyQuery, whyView } from "./why.js";
 import { readCostLine } from "./read-cost.js";
+import { mountHistoryPicker } from "./history-picker.js";
 import { applyMemberFrame, pendingLine, stillPending } from "./pending.js";
 import { initTheme, setTheme, mountThemePicker, readableOn, colorForCategory, onThemeChange, getTokens, getTheme, pinTokensFor } from "./theme.js";
 // #399 M2 / #401 M4 of #397: the colour-by modes' arithmetic and the
@@ -903,6 +911,42 @@ function inspect(node) {
       panel.appendChild(p);
     }
   }
+  // #526: SQL Yodeler's drift on this card, each dated by its file.
+  const yrMarks = yrJoined && yrJoined.cards[node.id];
+  if (yrMarks && yrMarks.length) {
+    const h = document.createElement("h3");
+    h.textContent = "SQL Yodeler drift (from files, not live)";
+    panel.appendChild(h);
+    const now = new Date();
+    for (const m of yrMarks) {
+      const p = document.createElement("p");
+      p.className = "tg-inspect";
+      p.textContent = yrMarkLine(m, now);
+      p.title = m.changes.map((c) => `${c.path || ""} ${c.kind || ""}: declared ${JSON.stringify(c.declared ?? null)}, live ${JSON.stringify(c.live ?? null)}`).join("\n");
+      panel.appendChild(p);
+    }
+  }
+  // #511: the newest apply's progress on this card, dated by the records read.
+  const tgProg = tgCardProgress(tgProgress && tgProgress.cards && tgProgress.cards[node.id]);
+  if (tgProg) {
+    const h = document.createElement("h3");
+    h.textContent = "terragucci apply progress (run view, not live)";
+    panel.appendChild(h);
+    for (const line of tgProgressLines(tgProg, new Date())) {
+      const p = document.createElement("p");
+      p.className = "tg-inspect";
+      p.textContent = line;
+      panel.appendChild(p);
+    }
+  }
+  // #506: the audit record's entries for this card's root (the record names
+  // roots, never a resource), newest first.
+  const tgRoot = tgTimeline && tgRootOfCard(tgAnswer, node.id);
+  if (tgRoot) {
+    const h = document.createElement("h3");
+    h.textContent = "terragucci timeline (audit record)";
+    panel.append(h, tgLane(tgTimeline, { root: tgRoot }));
+  }
 
   // Containment hierarchy: a resource shows its parent chain UP (composite →
   // component); a collapsed composite (detail 1: `attrs.members` is a count)
@@ -3223,26 +3267,88 @@ function markDriftedCards(ir) {
 // of this is live. A waiting wave offers its approve line to copy, no button.
 let tgAnswer = null;
 let tgHost = null;
+let tgTimeline = null; // #506: /api/terragucci/timeline, the audit record's lane
+let tgHistory = null; // #522: /api/lifecycle/history, the gate ledgers' history
 async function initTerragucci() {
   const project = await apiFetch("/api/project").then((r) => r.json()).catch(() => ({}));
   if (!project.terragucciReports) return;
   await loadTerragucci();
+  // #505: the chant/lifecycle lane, and what moved while this page is open.
+  if (staticMode) return;
+  await loadTerragucciLane();
+  watchTerragucci();
+}
+let tgLifecycle = null;
+let tgPolled = null;
+async function loadTerragucciLane({ fresh = false } = {}) {
+  tgLifecycle = await apiFetch(`/api/terragucci/lifecycle${fresh ? "?fresh=1" : ""}`)
+    .then((r) => r.json())
+    .catch((e) => ({ error: String(e) }));
+  renderTerragucciPanel();
+}
+// The server polls only while this stream is open, and stops when the page goes.
+function watchTerragucci() {
+  if (typeof EventSource === "undefined") return;
+  const es = new EventSource("/api/terragucci/events");
+  es.addEventListener("reports", () => loadTerragucci({ fresh: true }));
+  // #511: the run view moved while a wave applies.
+  es.addEventListener("progress", (e) => {
+    tgProgress = JSON.parse(e.data);
+    paintTgProgress();
+  });
+  es.addEventListener("lifecycle", (e) => {
+    tgLifecycle = JSON.parse(e.data);
+    renderTerragucciPanel();
+  });
+  es.addEventListener("polled", (e) => {
+    tgPolled = JSON.parse(e.data);
+    renderTerragucciPanel();
+  });
+}
+function renderTerragucciLane(host, now) {
+  if (staticMode || (!tgLifecycle && !tgPolled)) return;
+  renderLane(host, tgLifecycle, tgPolled, now, { button, copy: copyToClipboard, link: tgLink });
 }
 async function loadTerragucci({ fresh = false } = {}) {
   const answer = await apiFetch(`/api/terragucci${fresh ? "?fresh=1" : ""}`)
     .then((r) => r.json())
     .catch((e) => ({ error: String(e), code: "terragucci-report", remedy: "" }));
   tgAnswer = answer;
+  // #506: the timeline, whole; the inspect pane filters it by a card's root.
+  tgTimeline = await apiFetch(`/api/terragucci/timeline${fresh ? "?fresh=1" : ""}`)
+    .then((r) => r.json())
+    .catch((e) => ({ error: String(e), code: "terragucci-report", remedy: "" }));
+  // #522: the gate ledgers' history, with or in place of the audit record.
+  tgHistory = await apiFetch(`/api/lifecycle/history${fresh ? "?fresh=1" : ""}`)
+    .then((r) => (r.ok ? r.json() : null))
+    .catch(() => null);
   renderTerragucciPanel();
   markTerragucciCards();
+  if (!staticMode) await loadTgProgress({ fresh });
+}
+// #511: /api/terragucci/progress, the newest apply's run view on the cards.
+let tgProgress = null;
+async function loadTgProgress({ fresh = false } = {}) {
+  tgProgress = await apiFetch(`/api/terragucci/progress${fresh ? "?fresh=1" : ""}`)
+    .then((r) => r.json())
+    .catch((e) => ({ error: String(e) }));
+  paintTgProgress();
+}
+function paintTgProgress() {
+  tgStampProgress(document.querySelector("#graph svg"), tgProgress, new Date());
+  renderTerragucciPanel();
 }
 function markTerragucciCards() {
   const svg = document.querySelector("#graph svg");
+  tgStampProgress(svg, tgProgress, new Date()); // #511
   if (!svg || !tgAnswer || !tgAnswer.cards) return;
   const now = new Date();
+  // #505: a pushed read replaces the marks, so the old ones go first.
+  for (const old of svg.querySelectorAll("[data-tg-mark]")) old.remove();
+  for (const g of svg.querySelectorAll(".tg-marked")) g.classList.remove("tg-marked", "tg-drift", "tg-wave", "tg-plan");
   for (const [id, marks] of Object.entries(tgAnswer.cards)) {
     const g = svg.querySelector('[data-node-id="' + CSS.escape(id) + '"]');
-    if (!g || g.querySelector('[data-tg-mark="1"]')) continue;
+    if (!g) continue;
     const corner = cornerOf(marks);
     g.classList.add("tg-marked", `tg-${corner.tone}`);
     const rect = g.querySelector("rect");
@@ -3257,6 +3363,7 @@ function markTerragucciCards() {
     tag.setAttribute("fill", corner.tone === "drift" ? "var(--degraded)" : corner.tone === "wave" ? "var(--pending)" : "var(--muted)");
     tag.textContent = `${corner.text} · ${markAge(marks)}`;
     const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+    title.setAttribute("data-tg-mark", "title");
     title.textContent = marks.map((m) => markLine(m, now)).join("\n") + "\n(from terragucci reports, not live: the Terragucci tab links each run)";
     g.append(title, tag);
   }
@@ -3292,6 +3399,7 @@ function renderTerragucciPanel() {
     fix.className = "tg-legend";
     fix.textContent = (a && a.remedy) || "";
     host.append(err, fix);
+    renderTerragucciLane(host, new Date());
     return;
   }
   const now = new Date();
@@ -3308,6 +3416,8 @@ function renderTerragucciPanel() {
     line.appendChild(tgLink(est.text, est.href));
     host.appendChild(line);
   }
+  renderTerragucciLane(host, now);
+  if (tgProgress) host.appendChild(tgProgressSection(tgProgress, now, tgLink)); // #511
   for (const w of waveCards(a, now)) {
     const box = document.createElement("div");
     box.className = "ws-gate tg-wave";
@@ -3369,12 +3479,210 @@ function renderTerragucciPanel() {
     ].filter(Boolean).join(" · ");
     host.appendChild(um);
   }
+  if (tgTimeline || tgHistory) {
+    const h = document.createElement("div");
+    h.className = "tg-timeline-title";
+    h.textContent = "Timeline";
+    host.append(h);
+    // #522: the audit record, and the ledger's history beside it, each
+    // labelled by its source. Without an audit.jsonl the record's lane is its
+    // one "has no audit.jsonl" sentence and the ledger carries the history.
+    if (tgTimeline) host.append(tgLane(tgTimeline));
+    if (tgHistory) host.append(tgHistoryLane(tgHistory));
+  }
   if (!staticMode) {
-    const again = button("Read the reports again", "", () => loadTerragucci({ fresh: true }));
+    const again = button("Read the reports again", "", () => {
+      loadTerragucci({ fresh: true });
+      loadTerragucciLane({ fresh: true }); // #505: and chant/lifecycle
+    });
     host.appendChild(again);
   }
 }
 initTerragucci();
+// #525: each environment's newest release from the release ledger on
+// chant/lifecycle, with a cell whose schema the environment before it does
+// not hold marked. Dated and read-only; a static export carries its snapshot.
+let relHost = null;
+async function initReleases() {
+  const project = await apiFetch("/api/project").then((r) => r.json()).catch(() => ({}));
+  if (!project.releaseLedger) return;
+  await loadReleases();
+}
+async function loadReleases({ fresh = false } = {}) {
+  const a = await apiFetch(`/api/lifecycle/releases${fresh ? "?fresh=1" : ""}`)
+    .then((r) => r.json())
+    .catch((e) => ({ error: String(e) }));
+  if (!relHost) {
+    relHost = addPanelTab("releases", "Releases", "Each environment's newest release from the release ledger on chant/lifecycle, dated. Not live.");
+    if (!relHost) return;
+    relHost.id = "tab-releases";
+  }
+  renderReleases(relHost, a, new Date(), { link: tgLink });
+  if (!staticMode) {
+    const again = button("Read again", "", () => loadReleases({ fresh: true }));
+    again.title = "Read chant/lifecycle again and redraw.";
+    relHost.appendChild(again);
+  }
+}
+initReleases();
+
+
+// --- #526: SQL Yodeler's report and drift, from files ------------------------
+// /api/yodel-report reads `yodel report --json` and drift JSON the person or
+// their pipeline wrote, checked against SQL Yodeler's schemas. Drift marks are
+// dated corner tags on the cards they name; environments and gaps go in the
+// panel. Nothing is live, and behold never runs yodel.
+let yrAnswer = null;
+let yrJoined = null;
+let yrHost = null;
+async function initYodelReport() {
+  const project = await apiFetch("/api/project").then((r) => r.json()).catch(() => ({}));
+  if (!project.yodelReport) return;
+  await loadYodelReport();
+}
+async function loadYodelReport() {
+  yrAnswer = await apiFetch("/api/yodel-report")
+    .then((r) => r.json())
+    .catch((e) => ({ error: String(e), code: "yodel-report", remedy: "" }));
+  markYodelCards();
+}
+function markYodelCards() {
+  if (!yrAnswer) return;
+  const svg = document.querySelector("#graph svg");
+  if (svg) {
+    for (const old of svg.querySelectorAll("[data-yr-mark]")) old.remove();
+    const ids = [...svg.querySelectorAll("[data-node-id]")].map((g) => g.getAttribute("data-node-id"));
+    yrJoined = yrAnswer.error ? null : yrJoin(yrAnswer, ids);
+    const now = new Date();
+    for (const [id, marks] of Object.entries(yrJoined ? yrJoined.cards : {})) {
+      const g = svg.querySelector('[data-node-id="' + CSS.escape(id) + '"]');
+      if (!g) continue;
+      const rect = g.querySelector("rect");
+      const box = rect && rect.getBBox ? rect.getBBox() : null;
+      const tag = document.createElementNS("http://www.w3.org/2000/svg", "text");
+      tag.setAttribute("data-yr-mark", "1");
+      tag.setAttribute("x", String((box ? box.x + box.width : 150) - 10));
+      tag.setAttribute("y", String((box ? box.y : 0) + 14));
+      tag.setAttribute("text-anchor", "end");
+      tag.setAttribute("font-size", "11");
+      tag.setAttribute("font-weight", "600");
+      tag.setAttribute("fill", "var(--degraded)");
+      tag.textContent = yrCorner(marks, now);
+      const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+      title.setAttribute("data-yr-mark", "title");
+      title.textContent = marks.map((m) => yrMarkLine(m, now)).join("\n") + "\n(from SQL Yodeler drift files, not live)";
+      g.append(title, tag);
+    }
+  }
+  renderYodelPanel();
+}
+function renderYodelPanel() {
+  if (!yrHost) {
+    yrHost = addPanelTab("yodel", "SQL Yodeler", "SQL Yodeler's report and drift, read from files: each environment's applied migrations and gaps, dated. Not live.");
+    if (!yrHost) return;
+    yrHost.id = "tab-yodel";
+  }
+  const host = yrHost;
+  host.replaceChildren();
+  const a = yrAnswer;
+  const line = (cls, text, title) => {
+    const d = document.createElement("div");
+    d.className = cls;
+    d.textContent = text;
+    if (title) d.title = title;
+    host.appendChild(d);
+    return d;
+  };
+  if (!a || a.error) {
+    line("tg-refusal", a ? `${a.code}: ${a.error}` : "SQL Yodeler report not read");
+    if (a && a.remedy) line("tg-legend", a.remedy);
+    return;
+  }
+  const now = new Date();
+  const lg = yrLegend(a, now);
+  line("tg-legend", lg.text, lg.title);
+  for (const e of a.environments) {
+    const h = document.createElement("h3");
+    h.textContent = e.op ? `${e.name} (op ${e.op.name}, gate ${e.op.gate})` : e.name;
+    host.appendChild(h);
+    for (const t of yrEnvLines(e, now)) line("tg-inspect", t);
+    line("tg-legend", `from ${yrDated(e.dated, now)}`);
+    drawAudit((a.audit || []).filter((x) => x.environment === e.name));
+  }
+  // #537: audit entries for an environment the report lists no row for.
+  const named = new Set(a.environments.map((e) => e.name));
+  const loose = (a.audit || []).filter((x) => !named.has(x.environment));
+  if (loose.length) {
+    const h = document.createElement("h3");
+    h.textContent = "audit, environments the report lists no row for";
+    host.appendChild(h);
+    drawAudit(loose, true);
+  }
+  function drawAudit(entries, withEnv = false) {
+    if (!entries.length) return;
+    const sub = document.createElement("div");
+    sub.className = "tg-legend";
+    sub.textContent = `audit, ${entries.length} entr${entries.length === 1 ? "y" : "ies"}, oldest first`;
+    host.appendChild(sub);
+    for (const x of entries) {
+      const l = yrAuditLines(x, now);
+      line("tg-inspect", withEnv ? `${x.environment}: ${l.text}` : l.text, l.source);
+      line("tg-legend", l.source);
+    }
+  }
+  for (const d of a.drift) {
+    const h = document.createElement("h3");
+    h.textContent = `${d.environment} drift`;
+    host.appendChild(h);
+    line("tg-inspect", d.drifted ? `${d.changed} changed, ${d.missing} missing` : "no drift in what could be read");
+    for (const u of d.unobserved) line("tg-inspect", `not read: ${u.name}${u.reason ? ` (${u.reason})` : ""}`);
+    line("tg-legend", `from ${yrDated(d.dated, now)}${d.server ? ` · ${d.server}` : ""}`);
+  }
+  const unmatched = (yrJoined && yrJoined.unmatched) || [];
+  if (unmatched.length) {
+    const h = document.createElement("h3");
+    h.textContent = "drift on no card";
+    host.appendChild(h);
+    for (const m of unmatched) line("tg-inspect", `${m.object}: ${yrMarkLine(m, now)}`);
+  }
+  if (a.ignored.length) line("tg-legend", `not read (neither a report nor drift): ${a.ignored.join(", ")}`);
+  if (!staticMode) host.appendChild(button("Read the files again", "", () => loadYodelReport()));
+}
+initYodelReport();
+
+// --- #524: a SQL Yodeler repo's lane over chant/lifecycle -------------------
+// /api/sql-yodeler/lifecycle: each environment's wave gate and migrations-op
+// gate, in the order of applies, with the approve line to copy. Below it,
+// the gate ledgers' history (#522). Read-only and dated; never live.
+let ylHost = null;
+async function initYodelLane() {
+  // #537: a static export carries the lane as a snapshot (src/export.ts), so it draws here too.
+  const project = await apiFetch("/api/project").then((r) => r.json()).catch(() => ({}));
+  if (!project.sqlYodeler) return;
+  await loadYodelLane();
+}
+async function loadYodelLane({ fresh = false } = {}) {
+  const q = fresh ? "?fresh=1" : "";
+  const [lane, history] = await Promise.all([
+    apiFetch(`/api/sql-yodeler/lifecycle${q}`).then((r) => r.json()).catch((e) => ({ error: String(e) })),
+    apiFetch(`/api/lifecycle/history${q}`).then((r) => (r.ok ? r.json() : null)).catch(() => null),
+  ]);
+  if (!ylHost) {
+    ylHost = addPanelTab("yodel-lane", "Pipeline", "SQL Yodeler's gates on chant/lifecycle: each environment's wave and migrations op, in the order of applies, dated. Not live.");
+    if (!ylHost) return;
+    ylHost.id = "tab-yodel-lane";
+  }
+  ylHost.replaceChildren();
+  renderYodelLane(ylHost, lane, new Date(), { button, copy: copyToClipboard, link: tgLink });
+  if (history) ylHost.appendChild(tgHistoryLane(history));
+  if (staticMode) return;
+  const again = button("Read again", "", () => loadYodelLane({ fresh: true }));
+  again.title = "Fetch chant/lifecycle again and redraw.";
+  ylHost.appendChild(again);
+}
+initYodelLane();
+// #509: a control repo draws its projects from estate.json and their run views.
+initTerragucciEstate({ fetchUrl: apiFetch, copy: copyToClipboard });
 
 function renderPanelCarve() {
   if (!carveMode()) return;
@@ -4281,6 +4589,7 @@ function render(ir, svg, m) {
   markDriftedCards(ir); // #404: same, for a bound card the plan would change — after the carve/operator stamps, so it can see and yield to them
   markPendingCards(ir); // #422: and the cards whose member has not answered yet
   markTerragucciCards(); // #490: and what terragucci's reports found, dated
+  markYodelCards(); // #526: and SQL Yodeler's drift, dated
   applyLayout(); // #228: last, so the hand-placed deltas ride on top of every other pass
   renderDial();
 }
@@ -6110,6 +6419,7 @@ async function initActions() {
     pill.title = "An exported, read-only snapshot — no live observe or deploy.";
     pill.style.cssText = "align-self:center;font:var(--t-caption)/1.4 var(--font-mono);color:var(--muted);border:1px solid var(--line);border-radius:var(--r-ctl);padding:2px 8px";
     bar.appendChild(pill);
+    mountHistoryPicker(bar); // #510: other commits' views, when ../history.json sits beside this one
     previewMode = true;
     return; // nothing else in the bar is a read
   }
@@ -6122,12 +6432,14 @@ async function initActions() {
   // them right now (`/api/project`'s executor block).
   executorInfo = project.executor || {};
   previewMode = staticMode || !!project.previewMode; // static ⇒ read-only, no writes at all
-  if (project.terragucci) {
-    terragucciRepo = project.terragucci;
+  // #517: a SQL Yodeler repo is guarded the same way.
+  const guarded = project.terragucci || project.sqlYodeler;
+  if (guarded) {
+    terragucciRepo = guarded;
     previewMode = true;
     const pill = document.createElement("span");
-    pill.textContent = "● applied by terragucci";
-    pill.title = `${project.terragucci.error}\n\n${project.terragucci.remedy}`;
+    pill.textContent = project.terragucci ? "● applied by terragucci" : "● migrated by SQL Yodeler";
+    pill.title = `${guarded.error}\n\n${guarded.remedy}`;
     pill.style.cssText = "align-self:center;font:var(--t-caption)/1.4 var(--font-mono);color:var(--muted);border:1px solid var(--line);border-radius:var(--r-ctl);padding:2px 8px";
     bar.appendChild(pill);
     return; // no Deploy, no Run, no Approve: the pipeline is the only way to apply

package/web/history-picker.js

@@ -0,0 +1,85 @@
+// #510: a published view lives at views/<name>/<commit>/, with
+// views/<name>/history.json beside the commits (newest first, {commit, at,
+// project, generated}). Inside one, this picker reads ../history.json and
+// opens another commit's view. It only reads: switching is a navigation, and
+// a bundle served anywhere without a history.json beside it shows no picker.
+
+const COMMIT_SHAPE = /^[0-9a-f]{7,64}$/;
+
+/** The rows of a history.json document worth offering, in its order. */
+export function historyRows(doc) {
+  if (!Array.isArray(doc)) return [];
+  return doc.filter((e) => e && typeof e === "object" && typeof e.commit === "string" && COMMIT_SHAPE.test(e.commit));
+}
+
+/** Which row the page at `pathname` is: the commit named by one of its path segments, or null. */
+export function commitOfPath(pathname, rows) {
+  const segs = String(pathname || "").split("/").filter(Boolean);
+  for (let i = segs.length - 1; i >= 0; i--) {
+    const hit = rows.find((r) => r.commit === segs[i]);
+    if (hit) return hit.commit;
+  }
+  return null;
+}
+
+const stamp = (iso) => (typeof iso === "string" && iso.length >= 16 ? iso.slice(0, 16).replace("T", " ") : "");
+
+/** One option's words: the commit, and when its view was exported. */
+export function historyLabel(row) {
+  const when = stamp(row.generated) || stamp(row.at);
+  return `${row.commit.slice(0, 12)}${when ? ` · exported ${when}` : ""}`;
+}
+
+/** One option's tooltip. */
+export function historyTitle(row) {
+  return [`commit ${row.commit}`, row.at ? `committed ${row.at}` : "", row.generated ? `exported ${row.generated}` : "", row.project ? `project ${row.project}` : ""].filter(Boolean).join("\n");
+}
+
+/** Where a pick goes: the sibling commit's view, keeping the lens in the query and the fragment. */
+export function commitHref(commit, search = "", hash = "") {
+  return `../${commit}/index.html${search || ""}${hash || ""}`;
+}
+
+/**
+ * Read ../history.json and put a commit picker into `host`. Resolves to the
+ * <select>, or null when there is no history to pick from.
+ */
+export async function mountHistoryPicker(host, env = {}) {
+  const fetchFn = env.fetch || ((u, o) => fetch(u, o));
+  const loc = env.location || location;
+  const doc = env.document || document;
+  let rows;
+  try {
+    const r = await fetchFn("../history.json", { cache: "no-cache" });
+    if (!r.ok) return null;
+    rows = historyRows(await r.json());
+  } catch {
+    return null;
+  }
+  if (!rows.length) return null;
+  const current = commitOfPath(loc.pathname, rows);
+  const select = doc.createElement("select");
+  select.title = "Published views, newest first: open the view exported at another commit";
+  select.setAttribute("aria-label", "Published view history");
+  select.style.cssText = "align-self:center;font:var(--t-caption)/1.4 var(--font-mono);color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-ctl);padding:1px 4px;margin-left:6px;max-width:16em";
+  if (!current) {
+    const here = doc.createElement("option");
+    here.value = "";
+    here.textContent = "this view (not in history)";
+    here.selected = true;
+    select.appendChild(here);
+  }
+  for (const row of rows) {
+    const o = doc.createElement("option");
+    o.value = row.commit;
+    o.textContent = historyLabel(row);
+    o.title = historyTitle(row);
+    if (row.commit === current) o.selected = true;
+    select.appendChild(o);
+  }
+  select.addEventListener("change", () => {
+    if (select.value && select.value !== current) loc.assign(commitHref(select.value, loc.search, loc.hash));
+  });
+  host.appendChild(select);
+  return select;
+}

package/web/history-picker.test.js

@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import { commitHref, commitOfPath, historyLabel, historyRows, mountHistoryPicker } from "./history-picker.js";
+
+// #510: the picker inside a published commit's view, reading ../history.json.
+const A = "a".repeat(40);
+const B = "b".repeat(40);
+const history = [
+  { commit: A, at: "2026-10-09T08:00:00.000Z", project: "shop", generated: "2026-10-10T12:00:00.000Z" },
+  { commit: B, at: "2026-10-08T08:00:00.000Z", project: "shop", generated: "2026-10-08T09:30:00.000Z" },
+  { commit: "../x", at: "", project: "", generated: "" },
+];
+
+/** Just enough of a document for the picker. */
+function fakeDocument() {
+  const make = (tag) => {
+    const el = {
+      tag,
+      children: [],
+      style: {},
+      attrs: {},
+      listeners: {},
+      appendChild: (c) => (el.children.push(c), c),
+      setAttribute: (k, v) => (el.attrs[k] = v),
+      addEventListener: (k, f) => (el.listeners[k] = f),
+    };
+    return el;
+  };
+  return { createElement: make, host: make("div") };
+}
+
+describe("the history picker (#510)", () => {
+  it("offers the rows with a commit, newest first, labeled with the commit and when it was exported", () => {
+    const rows = historyRows(history);
+    expect(rows.map((r) => r.commit)).toEqual([A, B]);
+    expect(historyLabel(rows[0])).toBe(`${A.slice(0, 12)} · exported 2026-10-10 12:00`);
+    expect(historyRows({})).toEqual([]);
+  });
+
+  it("knows which commit the page is from its path", () => {
+    const rows = historyRows(history);
+    expect(commitOfPath(`/r/views/behold/${B}/index.html`, rows)).toBe(B);
+    expect(commitOfPath(`/r/views/behold/${A}/`, rows)).toBe(A);
+    expect(commitOfPath("/somewhere/else/", rows)).toBeNull();
+  });
+
+  it("reads ../history.json, selects this commit, and opens another in place, keeping the query and fragment", async () => {
+    const asked = [];
+    const went = [];
+    const doc = fakeDocument();
+    const location = { pathname: `/r/views/behold/${A}/index.html`, search: "?env=prod", hash: "#x", assign: (u) => went.push(u) };
+    const fetch = async (u, o) => (asked.push([u, o]), { ok: true, json: async () => history });
+    const select = await mountHistoryPicker(doc.host, { fetch, location, document: doc });
+    expect(asked).toEqual([["../history.json", { cache: "no-cache" }]]);
+    expect(doc.host.children).toEqual([select]);
+    expect(select.children.map((o) => [o.value, !!o.selected])).toEqual([[A, true], [B, false]]);
+    select.value = B;
+    select.listeners.change();
+    expect(went).toEqual([`../${B}/index.html?env=prod#x`]);
+    expect(commitHref(A)).toBe(`../${A}/index.html`);
+  });
+
+  it("shows nothing when no history.json sits beside the view", async () => {
+    const doc = fakeDocument();
+    const location = { pathname: "/bundle/index.html", search: "", hash: "", assign: () => {} };
+    expect(await mountHistoryPicker(doc.host, { fetch: async () => ({ ok: false }), location, document: doc })).toBeNull();
+    expect(await mountHistoryPicker(doc.host, { fetch: async () => Promise.reject(new Error("offline")), location, document: doc })).toBeNull();
+    expect(doc.host.children).toEqual([]);
+  });
+
+  it("marks a view that is not in the history rather than claiming to be another commit", async () => {
+    const doc = fakeDocument();
+    const location = { pathname: `/r/views/behold/${"c".repeat(40)}/index.html`, search: "", hash: "", assign: () => {} };
+    const select = await mountHistoryPicker(doc.host, { fetch: async () => ({ ok: true, json: async () => history }), location, document: doc });
+    expect(select.children[0]).toMatchObject({ value: "", selected: true });
+    expect(select.children).toHaveLength(3);
+  });
+});