@intentius/behold 0.25.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.25.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,9 +13,12 @@ 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 } from "./terragucci-timeline.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";
@@ -908,6 +911,21 @@ 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) {
@@ -3250,6 +3268,7 @@ function markDriftedCards(ir) {
 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;
@@ -3299,6 +3318,10 @@ async function loadTerragucci({ fresh = false } = {}) {
   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 });
@@ -3456,11 +3479,16 @@ function renderTerragucciPanel() {
     ].filter(Boolean).join(" · ");
     host.appendChild(um);
   }
-  if (tgTimeline) {
+  if (tgTimeline || tgHistory) {
     const h = document.createElement("div");
     h.className = "tg-timeline-title";
     h.textContent = "Timeline";
-    host.append(h, tgLane(tgTimeline));
+    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", "", () => {
@@ -3471,6 +3499,188 @@ function renderTerragucciPanel() {
   }
 }
 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 });
 
@@ -4379,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();
 }
@@ -6221,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/index.html

@@ -142,6 +142,21 @@
       #ws-gates .ws-gate-title { font-weight: 600; }
       #ws-gates .ws-gate-facts, #ws-gates .ws-gate-note { color: var(--muted); font-size: var(--t-caption); }
       #ws-gates .ws-gate button { margin-top: 4px; }
+      /* #526: SQL Yodeler's report and drift, from files, dated. Never a fill. */
+      #panel-body #tab-yodel.active { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-caption); }
+      #tab-yodel h3 { margin: 8px 0 0; font-size: var(--t-caption); }
+      #tab-yodel .tg-legend { color: var(--muted); overflow-wrap: anywhere; }
+      #tab-yodel .tg-inspect { overflow-wrap: anywhere; }
+      #tab-yodel .tg-refusal { color: var(--degraded); font-weight: 600; }
+      /* #524: SQL Yodeler's gates on chant/lifecycle, dated. A Copy button is the only control. */
+      #panel-body #tab-yodel-lane.active { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-caption); }
+      #tab-yodel-lane h3 { margin: 8px 0 0; font-size: var(--t-caption); }
+      #tab-yodel-lane .tg-legend { color: var(--muted); overflow-wrap: anywhere; }
+      #tab-yodel-lane .tg-refusal { color: var(--degraded); font-weight: 600; }
+      #tab-yodel-lane .ws-gate { border: 1px solid var(--rule); border-radius: 6px; padding: 6px 8px; }
+      #tab-yodel-lane .ws-gate-title { font-weight: 600; }
+      #tab-yodel-lane .ws-gate-facts, #tab-yodel-lane .ws-gate-note { color: var(--muted); overflow-wrap: anywhere; }
+      #tab-yodel-lane .tg-command { display: block; font-family: var(--font-mono); overflow-wrap: anywhere; margin: 4px 0; }
       /* #490: terragucci's reports, dated. Never a fill. */
       #panel-body #tab-terragucci.active { display: flex; flex-direction: column; gap: 8px; font-size: var(--t-caption); }
       #tab-terragucci .tg-legend, #tab-terragucci .tg-estate { color: var(--muted); }
@@ -189,6 +204,13 @@
       /* #506: the audit record's lane, in the tab and in a card's inspect pane. */
       #tab-terragucci .tg-timeline-title { font-weight: 600; border-top: 1px solid var(--rule); padding-top: 6px; }
       .tg-timeline { display: flex; flex-direction: column; gap: 3px; font-size: var(--t-caption); }
+      .rel-strip { border-collapse: collapse; margin: 6px 0; font-size: 12px; }
+      .rel-strip th, .rel-strip td { padding: 3px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--neutral); }
+      .rel-strip .rel-component { font-family: var(--font-mono); overflow-wrap: anywhere; }
+      .rel-strip .rel-cell { font-family: var(--font-mono); }
+      .rel-strip .rel-empty { color: var(--muted); }
+      .rel-strip .rel-differs { box-shadow: inset 2px 0 0 var(--degraded); }
+      .rel-strip .rel-mark { color: var(--degraded); font-weight: 600; font-family: inherit; }
       .tg-timeline .tg-legend { color: var(--muted); }
       .tg-timeline .tg-refusal { color: var(--degraded); font-weight: 600; }
       .tg-timeline .tg-entry { overflow-wrap: anywhere; }

package/web/releases.js

@@ -0,0 +1,121 @@
+// #525: the Releases strip. Pure words from /api/lifecycle/releases, and one
+// render. One column per environment (wave order when yodel-waves.json gives
+// one), one row per component or tenant. Every cell says when its release was
+// recorded, by whom, and which commit of chant/lifecycle it was read from. A
+// cell whose digest the environment before it does not hold is marked
+// "differs from <env>" with both digests. Nothing here deploys or promotes.
+
+import { ago, clock } from "./terragucci.js";
+
+const short = (s) => (s ? String(s).replace(/^(jcs1-)?sha256:/, "").slice(0, 12) : "");
+
+/** The strip's line: what was read, how, and when. */
+export function releasesLegend(a, now = new Date()) {
+  if (!a || a.error) return { text: `release ledger not read${a && a.error ? `: ${a.error}` : ""}`, title: "", tone: "refusal" };
+  const when = `read ${ago(a.read.at, now)}`;
+  if (!a.found) {
+    const text = a.via === "none" ? `release ledger unknown: behold could not fetch chant/lifecycle · ${when}` : `no release recorded yet · ${when}`;
+    return { text, title: a.note, tone: a.via === "none" ? "refusal" : "quiet" };
+  }
+  const how = a.via === "fetch" ? "fetched from origin" : "the checkout's origin/chant/lifecycle, as of its last git fetch (behold's fetch failed)";
+  const order = a.order === "waves" ? "columns in yodel-waves.json's wave order" : "columns by name";
+  const bad = Object.entries(a.malformed || {}).map(([env, n]) => `${env}: ${n} malformed line${n === 1 ? "" : "s"} skipped`);
+  return {
+    text: `release ledger on chant/lifecycle · ${when}, ${how} · ${order}`,
+    title: [a.note, a.fetch && a.fetch.error ? `fetch: ${a.fetch.error}` : "", ...bad].filter(Boolean).join("\n"),
+    tone: a.via === "fetch" ? "quiet" : "stale",
+  };
+}
+
+/** One cell's words: digest, age, who, and a difference mark when there is one. */
+export function releaseCellWords(cell, now = new Date()) {
+  if (!cell) return { text: "no release", title: "", differs: null };
+  const who = `${cell.actor}${cell.approver ? `, approved by ${cell.approver}` : ""}`;
+  const src = cell.source && cell.source.commit ? `chant/lifecycle ${short(cell.source.commit)}${cell.source.committed ? `, committed ${clock(cell.source.committed, now)}` : ""}` : "chant/lifecycle";
+  let differs = null;
+  if (cell.differs) {
+    const theirs = cell.differs.digest ? short(cell.differs.digest) : "nothing";
+    differs = {
+      text: `differs from ${cell.differs.from}`,
+      title: `${cell.env} holds ${short(cell.digest)}; ${cell.differs.from} holds ${theirs}.${cell.differs.everHad ? "" : ` ${cell.differs.from}'s ledger never recorded ${short(cell.digest)}.`}`,
+    };
+  }
+  return {
+    text: `${short(cell.digest)} · ${ago(cell.timestamp, now)}`,
+    title: [
+      `${cell.component} in ${cell.env}`,
+      `digest ${cell.digest}`,
+      `recorded ${clock(cell.timestamp, now)}, ${ago(cell.timestamp, now)}, by ${who}`,
+      `commit ${short(cell.gitSha)}, run ${cell.runId}`,
+      `from ${src} (${cell.source ? cell.source.path : ""})`,
+      differs ? differs.title : "",
+    ]
+      .filter(Boolean)
+      .join("\n"),
+    differs,
+  };
+}
+
+/** The grid: header row of environments, then a row per component with a cell per environment. */
+export function releaseGrid(a, now = new Date()) {
+  if (!a || !a.found) return { environments: [], rows: [] };
+  const at = new Map(a.cells.map((c) => [`${c.component}\u0000${c.env}`, c]));
+  return {
+    environments: a.environments,
+    rows: a.components.map((component) => ({
+      component,
+      cells: a.environments.map((env) => {
+        const c = at.get(`${component}\u0000${env}`);
+        return { env, ...releaseCellWords(c, now), runUrl: c && c.runUrl ? c.runUrl : null, empty: !c };
+      }),
+    })),
+  };
+}
+
+/** Render into `host`. `ui.link(text, href)` is app.js's link. */
+export function renderReleases(host, a, now, ui) {
+  host.replaceChildren();
+  const lg = releasesLegend(a, now);
+  const head = document.createElement("div");
+  head.className = lg.tone === "refusal" ? "tg-refusal" : "tg-legend";
+  head.textContent = lg.text;
+  head.title = lg.title;
+  host.appendChild(head);
+  const g = releaseGrid(a, now);
+  if (!g.rows.length) return;
+  const table = document.createElement("table");
+  table.className = "rel-strip";
+  const tr = document.createElement("tr");
+  tr.appendChild(document.createElement("th"));
+  for (const env of g.environments) {
+    const th = document.createElement("th");
+    th.textContent = env;
+    tr.appendChild(th);
+  }
+  table.appendChild(tr);
+  for (const row of g.rows) {
+    const r = document.createElement("tr");
+    const name = document.createElement("th");
+    name.className = "rel-component";
+    name.textContent = row.component;
+    r.appendChild(name);
+    for (const c of row.cells) {
+      const td = document.createElement("td");
+      td.className = c.empty ? "rel-cell rel-empty" : c.differs ? "rel-cell rel-differs" : "rel-cell";
+      td.title = c.title;
+      const t = document.createElement("div");
+      t.textContent = c.text;
+      td.appendChild(t);
+      if (c.differs) {
+        const d = document.createElement("div");
+        d.className = "rel-mark";
+        d.textContent = c.differs.text;
+        td.appendChild(d);
+      }
+      if (c.runUrl && ui && ui.link) td.appendChild(ui.link("run", c.runUrl));
+      r.appendChild(td);
+    }
+    table.appendChild(r);
+  }
+  host.appendChild(table);
+}

package/web/sql-yodeler-lane.js

@@ -0,0 +1,129 @@
+// #524: a SQL Yodeler repo's lane, from /api/sql-yodeler/lifecycle. One row
+// per environment in the order of applies (yodel-waves.json), each with its
+// wave's gate and its migrations op's gate: the state, the plan digest, who
+// approved and how, and the chant/lifecycle commit it was read from. A
+// waiting gate offers `npx yodel approve <env> --plan <digest>` to copy;
+// nothing here approves.
+
+import { ago, clock } from "./terragucci.js";
+import { holderWords, laneLegend, modeWords, sourceWords } from "./terragucci-lifecycle.js";
+
+const short = (s) => (s ? String(s).replace(/^(jcs1-)?sha256:/, "").slice(0, 12) : "");
+
+const STATE_WORDS = {
+  waiting: "waits for an approval",
+  expired: "asked for an approval that expired",
+  approved: "approved, not applied yet",
+  applied: "applied",
+  failed: "apply failed",
+  refused: "refused: an approval stands for another plan",
+  "refused-by-policy": "refused by policy, no override counts",
+  held: "held on another gate",
+};
+
+/** The line over the lane: what was read, how, when, and where the order came from. */
+export function yodelLegend(answer, now = new Date()) {
+  const lg = laneLegend(answer, now);
+  if (!answer || answer.error) return lg;
+  const order = answer.order && answer.order.source === "yodel-waves.json" ? "environments in yodel-waves.json's order" : answer.order && answer.order.source === "ops" ? "environments from ops/migrate-<env>.op.ts (no yodel-waves.json)" : "no environments declared";
+  const member = answer.member && answer.member.members.length ? ` · workspace member ${answer.member.members.join(" / ")}, read under ${answer.member.prefix}` : "";
+  return { ...lg, text: `${lg.text} · ${order}${member}`, title: [lg.title, answer.order && answer.order.error ? `yodel-waves.json: ${answer.order.error}` : "", answer.member && answer.member.error ? answer.member.error : ""].filter(Boolean).join("\n") };
+}
+
+/** One gate as a card: title, facts, source, and the line to copy when it waits. Pure. */
+export function yodelGateCard(env, g, now = new Date()) {
+  const what = g.kind === "wave" ? `wave ${g.wave} (${g.gate})` : `${g.op} (${g.gate})`;
+  const facts = [];
+  if (g.pending) facts.push(`asked ${clock(g.pending.timestamp, now)}, ${ago(g.pending.timestamp, now)}`);
+  if (g.approval) {
+    const how = [g.approval.signed ? "signed" : "unsigned", g.approval.via ? `via ${g.approval.via}` : "", g.approval.pr !== undefined ? `PR #${g.approval.pr}` : "", g.approval.relayedBy ? `relayed by ${g.approval.relayedBy}` : ""].filter(Boolean).join(", ");
+    facts.push(`approved by ${g.approval.by} (${how}) ${clock(g.approval.at, now)}, ${ago(g.approval.at, now)}`);
+  }
+  if (g.applied) facts.push(`applied ${clock(g.applied.at, now)}, ${ago(g.applied.at, now)}${g.applied.result ? "" : " (outcome not recorded)"}`);
+  if (g.digest) facts.push(`plan ${short(g.digest)}`);
+  for (const u of g.uncounted || []) facts.push(`${u.approval.by}'s approval does not count: ${u.reason}`);
+  if (g.heldOn) facts.push(`held on ${g.heldOn.op}/${g.heldOn.gate}${holderWords(g.heldOn) ? `, ${holderWords(g.heldOn)}` : ""}`);
+  if (modeWords(g)) facts.push(modeWords(g));
+  if ((g.headPlans || []).length) {
+    const h = g.headPlans[0];
+    facts.push(`pull request head ${h.head.slice(0, 12)} recorded this plan ${clock(h.timestamp, now)}, ${ago(h.timestamp, now)} (${h.path}): a writer's approving review of that head, merged, approves it${g.headPlans.length > 1 ? `; ${g.headPlans.length - 1} more head${g.headPlans.length > 2 ? "s" : ""} recorded it too` : ""}`);
+  }
+  return {
+    env,
+    kind: g.kind,
+    state: g.state,
+    tone: g.state === "waiting" || g.state === "held" ? "wave" : g.state === "failed" || g.state === "refused" || g.state === "refused-by-policy" ? "failed" : g.state === "expired" ? "none" : "ok",
+    title: `${env}: ${what} ${STATE_WORDS[g.state] || g.state}`,
+    facts: facts.join(" · "),
+    source: sourceWords(g.source, now),
+    ...(g.command ? { command: g.command } : {}),
+    ...(g.pending && g.pending.url ? { job: g.pending.url } : {}),
+  };
+}
+
+/** Every environment's rows, in the order of applies. An environment with no gate on the ledger says so. Pure. */
+export function yodelRows(answer, now = new Date()) {
+  if (!answer || answer.error || !answer.found) return [];
+  const rows = [];
+  for (const e of answer.environments || []) {
+    const head = e.wave ? `${e.env}: wave ${e.wave.k}${e.wave.gate ? `, gate ${e.wave.gate}` : ""}${e.wave.approval ? `, approval ${e.wave.approval}` : ""}${e.wave.targets.length > 1 || e.wave.targets[0] !== e.env ? `, ${e.wave.targets.join(", ")}` : ""}` : `${e.env}: in no wave`;
+    rows.push({ env: e.env, head, cards: e.gates.map((g) => yodelGateCard(e.env, g, now)) });
+  }
+  if ((answer.unplaced || []).length) rows.push({ env: "", head: "waves yodel-waves.json does not name", cards: answer.unplaced.map((g) => yodelGateCard(`wave ${g.wave}`, g, now)) });
+  return rows;
+}
+
+const APPROVE_NOTE = "An approval is a git record bound to this plan digest: run the line at your shell. behold does not approve.";
+
+/** The lane as DOM. `ui` lends app.js's `button`, `copy` and `link`; a Copy button is the only control. */
+export function renderYodelLane(host, answer, now, ui) {
+  const lg = yodelLegend(answer, now);
+  const head = document.createElement("div");
+  head.className = lg.tone === "refusal" ? "tg-refusal" : "tg-legend";
+  head.textContent = lg.text;
+  head.title = lg.title || "";
+  host.appendChild(head);
+  for (const r of yodelRows(answer, now)) {
+    const h = document.createElement("h3");
+    h.textContent = r.head;
+    host.appendChild(h);
+    if (!r.cards.length) {
+      const none = document.createElement("div");
+      none.className = "tg-legend";
+      none.textContent = "no gate on chant/lifecycle yet";
+      host.appendChild(none);
+    }
+    for (const c of r.cards) {
+      const box = document.createElement("div");
+      box.className = `ws-gate tg-lane-gate tg-${c.tone}`;
+      const title = document.createElement("div");
+      title.className = "ws-gate-title";
+      title.textContent = c.title;
+      const facts = document.createElement("div");
+      facts.className = "ws-gate-facts";
+      facts.textContent = c.facts;
+      const src = document.createElement("div");
+      src.className = "ws-gate-note";
+      src.textContent = `from ${c.source}`;
+      box.append(title, facts, src);
+      if (c.command) {
+        const cmd = document.createElement("code");
+        cmd.className = "tg-command";
+        cmd.textContent = c.command;
+        const copy = ui.button("Copy", "", () => ui.copy(c.command, copy));
+        copy.title = "Copy the line. Run it at your shell: the approval is yours.";
+        const note = document.createElement("div");
+        note.className = "ws-gate-note";
+        note.textContent = APPROVE_NOTE;
+        box.append(cmd, copy, note);
+      }
+      if (c.job) {
+        const links = document.createElement("div");
+        links.className = "ws-gate-note";
+        links.appendChild(ui.link("job", c.job));
+        box.appendChild(links);
+      }
+      host.appendChild(box);
+    }
+  }
+}