@intentius/behold 0.13.1 → 0.15.0

package/web/operator.js

@@ -9,13 +9,20 @@
  *
  * What it renders, from the `operator` state the server broadcasts:
  *  - one line per ConvergeOp: the last tick's own log line, verbatim, honestly
- *    dated; the lease; the pending-gate count. ONE line, because chant's status
- *    surface exposes one tick and no history (chant#2029) — this is a strip, and
- *    there is deliberately no code path here that can render a second tick.
+ *    dated; the lease; the pending-gate count. ONE line, because that is what
+ *    `chant operator status` answers with — there is deliberately no code path
+ *    here that can render a second tick onto the strip.
  *  - each pending converge gate as a card whose Approve button says what
  *    approving actually does: it records a fact, and the next tick acts on it.
  *    It does not release anything. That is the run gate, painted by the playhead
  *    panel next door, and the card names its loop so the two can't be confused.
+ *    When the gate fact names where approval happens (chant#2028) the card links
+ *    it, under chant's own words — `approve at:`. When it doesn't, the card is
+ *    exactly the card it was before that field existed.
+ *  - the history, when a human opens it: the converge timeline chant#2029's
+ *    `operator log` reads, ticks and gate resolutions interleaved. It grows from
+ *    the strip and is fetched on the click, never on a timer — the strip is the
+ *    at-a-glance line, the timeline is the thing you go and look at.
  */
 import { waitingFor } from "./run-playhead.js";
 
@@ -46,6 +53,35 @@ export const APPROVE_SEMANTICS =
 /** The past-tense half, for the toast right after the click. */
 export const APPROVED_SEMANTICS = "recorded; the next tick acts on it";
 
+/** The words a gate's address is offered under — chant's own. `chant operator
+ * status`'s human render prints `approve at: <url>` beneath the pending gate, so
+ * the card labels the same fact the same way. */
+export const APPROVE_AT = "approve at:";
+
+/** The resolved half's label. Same field, chant#2028's other end
+ * (`GateResolutionRecord.url`): where the approval DID happen, so the tense
+ * changes — a resolution's link is a record, not an invitation. */
+export const RESOLVED_AT = "resolved at:";
+
+/**
+ * The address behold will put behind an `href`, or null.
+ *
+ * Re-checked here rather than only trusted from the server, exactly as
+ * APPROVE_SEMANTICS is re-stated above: an absolute http/https URL becomes a
+ * link, anything else reads as no address at all and the card renders without
+ * one. A `javascript:` string that reached a ledger must not become a link
+ * because a server was older than this file.
+ */
+export function approvalLink(url) {
+  if (!url || typeof url !== "string") return null;
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "http:" || parsed.protocol === "https:" ? url : null;
+  } catch {
+    return null;
+  }
+}
+
 /** Which loop a card belongs to, spelled out. behold draws two gate cards and
  * they resolve through different commands with different effects. */
 export const CONVERGE_LOOP_LINE =
@@ -86,6 +122,8 @@ export function operatorRows(state, now = Date.now()) {
         log: null,
         at: null,
         ago: null,
+        tickId: null,
+        tick: null,
         lease: "free",
         leaseText: state.strip ? "not in the last status read" : "not read yet",
         pendingGates: 0,
@@ -98,6 +136,12 @@ export function operatorRows(state, now = Date.now()) {
       log: r.log,
       at: r.at,
       ago: r.at ? waitingFor(r.at, now) : null,
+      // chant#2027's tick id: whole (so the hover can quote it in full) and
+      // truncated (so the line stays a line). Both null on a chant that
+      // recorded none, and the row then reads exactly as it did before the
+      // field existed.
+      tickId: r.tickId || null,
+      tick: shortTickId(r.tickId),
       lease: r.lease,
       leaseText: leaseText(r),
       pendingGates: r.pendingGates,
@@ -105,6 +149,25 @@ export function operatorRows(state, now = Date.now()) {
   });
 }
 
+/**
+ * How much of a tick id to show.
+ *
+ * chant mints one with `randomUUID()` (chant#2027), so the first block of a
+ * canonical UUID is already the part a human reads out and the part that
+ * distinguishes two ticks in the same ISO second — which is the whole reason
+ * the field exists. Anything shorter than the cut is shown whole rather than
+ * padded: behold never invents characters chant didn't write.
+ */
+export const TICK_ID_CHARS = 8;
+
+/** A tick id, short enough to sit on a strip line. Null in, null out — a chant
+ * older than 0.53.1 recorded no id, and the strip says nothing rather than
+ * showing a placeholder for an identity that doesn't exist. */
+export function shortTickId(id) {
+  if (typeof id !== "string" || !id) return null;
+  return id.length > TICK_ID_CHARS ? id.slice(0, TICK_ID_CHARS) : id;
+}
+
 /** The lease, in words. The holder is always named when there is one — "held"
  * without a holder is a fact nobody can act on. */
 export function leaseText(row) {
@@ -127,12 +190,18 @@ export function operatorHeadline(state) {
 /**
  * The one-tick caveat, said every time there is a tick to say it about.
  *
- * A reader must never take this strip for a shortened timeline: chant's
- * `operator status` keeps only the last ledger record and no CLI exposes the
- * rest (chant#2029), so one line is all there is, not one line behold chose.
+ * A reader must never take this strip for a shortened timeline: `chant operator
+ * status` keeps only the last ledger record per loop, so one line is all this
+ * read has, not one line behold chose. The rest of the history is a different
+ * command (chant#2029) and a different click — which the caveat now points at,
+ * because "this is not a timeline" without saying where the timeline IS would be
+ * the strip keeping a secret.
  */
 export const ONE_TICK_CAVEAT =
-  "One tick per loop — chant's status surface exposes only the last one (chant#2029), so this is a strip, not a timeline.";
+  "One tick per loop — `chant operator status` answers with only the last one. The rest is its own read (chant#2029): open the history below.";
+
+/** What the history disclosure is called, closed and open. */
+export const HISTORY_LABEL = "converge history";
 
 /** The converge gate cards, from the same state. Each already carries the
  * delegated write it performs; nothing here is derived from a graph. */
@@ -140,6 +209,76 @@ export function convergeGates(state) {
   return (state && state.gates) || [];
 }
 
+// ── the timeline (chant#2029) ────────────────────────────────────────────────
+
+/** The rows of a loaded history, or [] for one that hasn't been read. */
+export function timelineRows(history) {
+  return (history && history.data && history.data.entries) || [];
+}
+
+/**
+ * The history's own headline: how much of the ledger this is, and whether there
+ * is more behind it.
+ *
+ * The window is stated on screen rather than implied. behold asks for the newest
+ * n (never the whole ledger — it grows one line per tick forever), so a full
+ * window means "and older ticks before these", and a reader who isn't told that
+ * would read the oldest row as the beginning of history.
+ */
+export function historyHeadline(history) {
+  const data = history && history.data;
+  if (!data) return null;
+  const n = data.entries.length;
+  const head = `${n} ${n === 1 ? "entry" : "entries"}`;
+  const window = data.window || {};
+  const bits = [`newest ${window.limit}`];
+  if (window.since) bits.push(`since ${window.since}`);
+  if (data.more) bits.push("older ticks before these");
+  return `${head} · ${bits.join(" · ")}`;
+}
+
+/**
+ * The unreadable-line count, in words, or null when every line read.
+ *
+ * chant counts the ledger lines it could not parse rather than throwing, so a
+ * corrupted ledger renders a SHORTER timeline. Surfacing the count is the
+ * difference between "3 lines of this ledger are unreadable" and a quiet gap the
+ * reader takes for a quiet loop.
+ */
+export function historyMalformedNote(history) {
+  const m = (history && history.data && history.data.malformed) || null;
+  if (!m) return null;
+  const total = (m.converge || 0) + (m.gates || 0);
+  if (!total) return null;
+  return (
+    `${total} ledger line${total === 1 ? "" : "s"} were unreadable and are missing from this timeline ` +
+    `(converge: ${m.converge || 0}, gates: ${m.gates || 0}).`
+  );
+}
+
+/**
+ * One timeline row, in words — chant's own `operator log` render is the model.
+ *
+ * A tick reads as its op, its id and the log line chant wrote, verbatim; a
+ * resolution reads as who resolved which gate. Nothing here rewords a fact:
+ * behold's job on this surface is ordering and legibility, not narration.
+ */
+export function timelineText(row) {
+  if (!row) return "";
+  if (row.kind === "gate-resolution") {
+    return `gate resolved · ${row.op}/${row.gate} by ${row.resolvedBy}`;
+  }
+  // Bracketed, the way chant's own `operator log` render prints it, and cut by
+  // the strip's own {@link shortTickId} so one tick reads the same in both.
+  const id = shortTickId(row.id) ? ` [${shortTickId(row.id)}]` : "";
+  return `${row.op}${row.env ? `@${row.env}` : ""}${id}`;
+}
+
+/** One gated outcome within a tick, in chant's own `operator log` words. */
+export function gatedText(gate) {
+  return `gated ${gate.rule} → ${gate.op || "?"} gate "${gate.gate}"`;
+}
+
 // ── the DOM half ─────────────────────────────────────────────────────────────
 
 function el(tag, cls, text) {
@@ -149,13 +288,33 @@ function el(tag, cls, text) {
   return n;
 }
 
+/** An `approve at: <url>` link, or null for a fact carrying no address behold
+ * will link. Never a placeholder: the absent case renders nothing at all. */
+function approveAtLink(url, label = APPROVE_AT) {
+  const href = approvalLink(url);
+  if (!href) return null;
+  const a = el("a", "operator-url", `${label} ${href}`);
+  a.href = href;
+  a.target = "_blank";
+  a.rel = "noreferrer noopener";
+  a.title = `${href} — the address the gate fact itself records (chant#2028). behold never invents this link.`;
+  return a;
+}
+
 /**
  * Render the operator strip into `host` (cleared first — the whole subtree is
  * rebuilt per event, exactly as renderPlayhead does).
  *
- * `actions.approve(op, gate)` performs the delegated `chant approve`.
+ * `actions.approve(op, gate)` performs the delegated `chant approve`;
+ * `actions.history()` toggles the timeline below the strip and is what triggers
+ * its one read. Omit it (a static export has no server to ask) and no history
+ * affordance is drawn at all.
+ *
+ * `history` is the caller's own `{open, loading, error, data}` — this module
+ * decides what the panel SAYS, app.js owns the fetch and the open/closed bit,
+ * the same split every other panel here keeps.
  */
-export function renderOperator(host, state, actions = {}) {
+export function renderOperator(host, state, actions = {}, history = null) {
   host.textContent = "";
   if (!hasOperator(state)) return host;
 
@@ -178,8 +337,12 @@ export function renderOperator(host, state, actions = {}) {
     body.appendChild(head);
     // chant's own log line, verbatim — behold re-words nothing about a tick.
     body.appendChild(el("div", "operator-log", r.log || "no tick recorded yet"));
-    const when = r.at ? `last tick ${r.at}${r.ago ? ` (${r.ago} ago)` : ""}` : "never ticked";
-    body.appendChild(el("div", "operator-meta", `${when} · ${r.leaseText}`));
+    // `· tick <id>` only when chant wrote one (chant#2027) — a tick becomes a
+    // thing you can point at, and an older chant's line is unchanged.
+    const when = r.at ? `last tick ${r.at}${r.ago ? ` (${r.ago} ago)` : ""}${r.tick ? ` · tick ${r.tick}` : ""}` : "never ticked";
+    const meta = el("div", "operator-meta", `${when} · ${r.leaseText}`);
+    if (r.tick) meta.title = `tick id ${r.tickId || r.tick}`;
+    body.appendChild(meta);
     row.appendChild(body);
 
     if (r.pendingGates) {
@@ -190,11 +353,76 @@ export function renderOperator(host, state, actions = {}) {
   host.appendChild(list);
 
   if (rows.some((r) => r.at)) host.appendChild(el("div", "operator-caveat", ONE_TICK_CAVEAT));
+  if (actions.history) host.appendChild(renderHistory(history, actions));
 
   for (const gate of convergeGates(state)) host.appendChild(renderConvergeGateCard(gate, actions));
   return host;
 }
 
+/**
+ * The history disclosure and, when it is open, the timeline.
+ *
+ * Closed is the default and costs nothing: the read happens on the click that
+ * opens it, and there is no interval anywhere on this path. The strip above ages
+ * on its own — a tick lands whether or not anyone is looking — but a ledger's
+ * past does not change while you read it, so re-fetching it on a timer would be
+ * spending a chant process per interval to be told the same thing.
+ */
+function renderHistory(history, actions) {
+  const box = el("div", "operator-history");
+  const open = !!(history && history.open);
+  const toggle = el("button", "operator-history-toggle", `${open ? "▾" : "▸"} ${HISTORY_LABEL}`);
+  toggle.title =
+    "The converge timeline: ticks and gate resolutions from the chant/lifecycle ledger " +
+    "(chant operator log, chant#2029). Read when you open it — behold never polls the history.";
+  toggle.addEventListener("click", () => actions.history());
+  box.appendChild(toggle);
+  if (!open) return box;
+
+  if (history.error) {
+    box.appendChild(el("div", "run-lost", `Converge history unavailable — ${history.error}`));
+    return box;
+  }
+  if (history.loading || !history.data) {
+    box.appendChild(el("div", "operator-meta", "reading the converge ledger…"));
+    return box;
+  }
+
+  box.appendChild(el("div", "operator-history-head", historyHeadline(history)));
+  const malformed = historyMalformedNote(history);
+  if (malformed) box.appendChild(el("div", "run-lost", malformed));
+
+  const rows = timelineRows(history);
+  if (!rows.length) {
+    box.appendChild(el("div", "operator-meta", "No converge ticks recorded in this window."));
+    return box;
+  }
+
+  const list = el("div", "operator-timeline");
+  for (const row of rows) {
+    // Oldest first, exactly as chant merged them — a timeline reads forward.
+    const entry = el("div", `operator-entry operator-entry-${row.kind}`);
+    entry.appendChild(el("div", "operator-meta", `${row.at} · ${timelineText(row)}`));
+    if (row.kind === "tick") {
+      // chant's own log line, verbatim — the strip's rule, on every row.
+      entry.appendChild(el("div", "operator-log", row.log));
+      for (const gate of row.gated) {
+        const line = el("div", "operator-gated", gatedText(gate));
+        const link = approveAtLink(gate.url);
+        if (link) line.appendChild(link);
+        entry.appendChild(line);
+      }
+    } else {
+      if (row.note) entry.appendChild(el("div", "operator-log", row.note));
+      const link = approveAtLink(row.url, RESOLVED_AT);
+      if (link) entry.appendChild(link);
+    }
+    list.appendChild(entry);
+  }
+  box.appendChild(list);
+  return box;
+}
+
 /**
  * A pending converge gate.
  *
@@ -205,9 +433,12 @@ export function renderOperator(host, state, actions = {}) {
  *    own gate-ledger doc, and what `chant approve` itself prints;
  *  - the exact command the button delegates to.
  *
- * And one thing it deliberately does not render: a link. A pending gate fact
- * carries no URL (chant#2028), and a placeholder link would invent a review
- * surface that does not exist.
+ * And the fourth, since chant#2028: where approval happens, when the gate fact
+ * says so. `approve at: <url>` — chant's own words from `operator status`'s
+ * human render — linking the PR/MR the gated tick knew about. A fact with no
+ * address renders no link and no placeholder for one: the url is optional by
+ * design (a local tick with no PR behind it genuinely has none), and inventing a
+ * review surface would be worse than the shell command it replaces.
  */
 export function renderConvergeGateCard(gate, actions = {}) {
   const box = el("div", "run-gate operator-gate");
@@ -224,6 +455,8 @@ export function renderConvergeGateCard(gate, actions = {}) {
     ),
   );
   box.appendChild(el("div", "operator-semantics", gate.semantics || APPROVE_SEMANTICS));
+  const at = approveAtLink(gate.url);
+  if (at) box.appendChild(at);
 
   const command = (gate.approve && gate.approve.command) || `chant approve ${gate.op} ${gate.gate}`;
   const approve = el("button", "approve", "Record approval");

package/web/operator.test.js

@@ -11,11 +11,21 @@ import {
   leaseText,
   operatorHeadline,
   convergeGates,
+  approvalLink,
+  timelineRows,
+  timelineText,
+  gatedText,
+  historyHeadline,
+  historyMalformedNote,
   APPROVE_SEMANTICS,
   APPROVED_SEMANTICS,
   CONVERGE_LOOP_LINE,
   ONE_TICK_CAVEAT,
+  APPROVE_AT,
+  RESOLVED_AT,
   LEASE_LABEL,
+  shortTickId,
+  TICK_ID_CHARS,
 } from "./operator.js";
 
 /** src/operator.ts's OperatorState, as the server broadcasts it. Values trace to
@@ -29,6 +39,9 @@ const stripRow = {
   lease: "held",
   leaseHolder: "op-a",
   leaseExpiresAt: "2026-01-01T00:05:00.000Z",
+  // chant#2027's tick id, as src/operator.ts's `operatorStrip` carries it —
+  // whole, for the renderer to truncate.
+  tickId: "9f1c7a52-3b64-4d0e-8a71-2e5c6d90b4af",
   pendingGates: 1,
 };
 const gate = {
@@ -96,6 +109,44 @@ describe("operatorRows", () => {
     const [row] = operatorRows({ ...state, strip: null, gates: [] }, NOW);
     expect(row.leaseText).toBe("not read yet");
   });
+
+  it("carries the tick id whole and truncated (chant#2027)", () => {
+    const [row] = operatorRows(state, NOW);
+    expect(row.tickId).toBe("9f1c7a52-3b64-4d0e-8a71-2e5c6d90b4af");
+    expect(row.tick).toBe("9f1c7a52");
+  });
+
+  it("says nothing about a tick id a pre-0.53.1 chant never wrote", () => {
+    // The row must read exactly as it did before the field existed — a
+    // placeholder would show an identity that does not exist.
+    const older = { ...stripRow, tickId: null };
+    const [row] = operatorRows({ ...state, strip: { rows: [older], pendingGates: 1 } }, NOW);
+    expect(row.tickId).toBeNull();
+    expect(row.tick).toBeNull();
+  });
+
+  it("says nothing about a tick id on a loop the last read didn't mention", () => {
+    const rows = operatorRows({ ...state, declared: [...declared, { name: "prod-observe", env: "prod" }] }, NOW);
+    expect(rows[1]).toMatchObject({ tickId: null, tick: null });
+  });
+});
+
+describe("shortTickId", () => {
+  it("keeps the first block of chant's randomUUID mint", () => {
+    expect(shortTickId("9f1c7a52-3b64-4d0e-8a71-2e5c6d90b4af")).toBe("9f1c7a52");
+    expect(TICK_ID_CHARS).toBe(8);
+  });
+
+  it("shows a shorter id whole rather than padding one chant didn't write", () => {
+    expect(shortTickId("tick-fix")).toBe("tick-fix");
+    expect(shortTickId("abc")).toBe("abc");
+  });
+
+  it("is null in, null out — an absent id is not an id to shorten", () => {
+    expect(shortTickId(null)).toBeNull();
+    expect(shortTickId(undefined)).toBeNull();
+    expect(shortTickId("")).toBeNull();
+  });
 });
 
 describe("leaseText", () => {
@@ -120,10 +171,12 @@ describe("operatorHeadline", () => {
 });
 
 describe("the one-tick caveat", () => {
-  it("says the strip is not a timeline, and why", () => {
+  it("says the strip has one tick, why, and where the rest of it is", () => {
     expect(ONE_TICK_CAVEAT).toMatch(/only the last one/);
     expect(ONE_TICK_CAVEAT).toMatch(/chant#2029/);
-    expect(ONE_TICK_CAVEAT).toMatch(/strip, not a timeline/);
+    // The history is reachable now, so "this is not a timeline" without saying
+    // where the timeline IS would be the strip keeping a secret.
+    expect(ONE_TICK_CAVEAT).toMatch(/open the history below/);
   });
 });
 
@@ -141,14 +194,21 @@ describe("the converge gate card's words", () => {
     expect(CONVERGE_LOOP_LINE).toMatch(/not the Temporal run gate/);
   });
 
-  it("carries the delegated write it performs, and no URL (chant#2028)", () => {
+  it("carries the delegated write it performs", () => {
     const [g] = convergeGates(state);
     expect(g.approve).toEqual({
       method: "POST",
       path: "/api/operator/approve/fountain-apply/rollout-gate",
       command: "chant approve fountain-apply rollout-gate",
     });
-    expect(JSON.stringify(g)).not.toMatch(/https?:/);
+  });
+
+  it("offers the gate's address under chant's own words, on either half", () => {
+    // `chant operator status`'s human render prints `approve at: <url>` under
+    // the pending gate; the resolved half is where it DID happen, so the tense
+    // changes and nothing else does.
+    expect(APPROVE_AT).toBe("approve at:");
+    expect(RESOLVED_AT).toBe("resolved at:");
   });
 
   it("has no cards when nothing is pending", () => {
@@ -156,3 +216,127 @@ describe("the converge gate card's words", () => {
     expect(convergeGates(null)).toEqual([]);
   });
 });
+
+describe("approvalLink (chant#2028)", () => {
+  it("links an absolute http/https address", () => {
+    expect(approvalLink("https://github.com/INTENTIUS/chant/pull/2028")).toBe("https://github.com/INTENTIUS/chant/pull/2028");
+    expect(approvalLink("http://gitlab.internal/x/-/merge_requests/9")).toBe("http://gitlab.internal/x/-/merge_requests/9");
+  });
+
+  it("reads anything else as no address at all — never a link", () => {
+    // Re-checked here rather than only trusted from the server, exactly as
+    // APPROVE_SEMANTICS is re-stated in this module: a `javascript:` string that
+    // reached a ledger must not become a link because a server was older.
+    for (const bad of ["javascript:alert(1)", "org/repo/pull/1", "file:///etc/passwd", "", null, undefined, 12]) {
+      expect(approvalLink(bad)).toBeNull();
+    }
+  });
+
+  it("means the card renders exactly as it did before the field existed", () => {
+    // The absent case is the ordinary one: the url is optional by design, and a
+    // placeholder would invent a review surface chant never claimed.
+    const [g] = convergeGates(state);
+    expect(approvalLink(g.url)).toBeNull();
+  });
+});
+
+// ── The timeline (chant#2029) ────────────────────────────────────────────────
+
+/** src/operator.ts's OperatorHistory, as `/api/operator/log` answers with it.
+ * Values trace to chant's own `operator log` test through the committed fixture
+ * (src/__fixtures__/operator-status/timeline.log.json). */
+const history = {
+  open: true,
+  loading: false,
+  error: null,
+  data: {
+    entries: [
+      {
+        kind: "tick",
+        at: "2026-01-01T00:00:00.000Z",
+        op: "staging-converge",
+        env: "staging",
+        id: "t1",
+        log: "converge(staging): drifted=0",
+        gated: [{ rule: "drift-apply", op: "fountain-apply", gate: "rollout-gate", url: "https://pr.example/1" }],
+      },
+      {
+        kind: "gate-resolution",
+        at: "2026-01-02T00:00:00.000Z",
+        op: "fountain-apply",
+        gate: "rollout-gate",
+        resolvedBy: "alex",
+        note: null,
+        url: "https://pr.example/1",
+      },
+    ],
+    malformed: { converge: 0, gates: 0 },
+    window: { limit: 50, since: null },
+    more: false,
+    readAt: "2026-01-04T00:00:00.000Z",
+  },
+};
+
+describe("timelineRows", () => {
+  it("is empty for a history nobody has opened yet", () => {
+    expect(timelineRows(null)).toEqual([]);
+    expect(timelineRows({ open: true, loading: true, data: null })).toEqual([]);
+  });
+
+  it("keeps the order the server handed over — chant's own, oldest first", () => {
+    expect(timelineRows(history).map((r) => r.at)).toEqual([
+      "2026-01-01T00:00:00.000Z",
+      "2026-01-02T00:00:00.000Z",
+    ]);
+  });
+});
+
+describe("timelineText", () => {
+  it("reads a tick as its loop and its id, with chant's log line kept separate", () => {
+    // The log line is rendered verbatim on its own row; nothing here rewords a
+    // fact chant wrote.
+    expect(timelineText(timelineRows(history)[0])).toBe("staging-converge@staging [t1]");
+  });
+
+  it("reads a resolution as who resolved which gate", () => {
+    expect(timelineText(timelineRows(history)[1])).toBe("gate resolved · fountain-apply/rollout-gate by alex");
+  });
+
+  it("prints no id for a tick recorded before chant#2027", () => {
+    expect(timelineText({ ...timelineRows(history)[0], id: null })).toBe("staging-converge@staging");
+  });
+
+  it("names a gated outcome the way chant's own log render does", () => {
+    expect(gatedText(timelineRows(history)[0].gated[0])).toBe('gated drift-apply → fountain-apply gate "rollout-gate"');
+  });
+});
+
+describe("historyHeadline", () => {
+  it("states the window, so a full one doesn't read as the end of history", () => {
+    expect(historyHeadline(history)).toBe("2 entries · newest 50");
+    const full = { ...history, data: { ...history.data, more: true } };
+    expect(historyHeadline(full)).toMatch(/older ticks before these/);
+  });
+
+  it("names a --since when one was asked for", () => {
+    const since = { ...history, data: { ...history.data, window: { limit: 20, since: "2026-01-01T00:00:00.000Z" } } };
+    expect(historyHeadline(since)).toBe("2 entries · newest 20 · since 2026-01-01T00:00:00.000Z");
+  });
+
+  it("says nothing about a history that hasn't been read", () => {
+    expect(historyHeadline({ open: true, loading: true, data: null })).toBeNull();
+  });
+});
+
+describe("historyMalformedNote", () => {
+  it("surfaces the unreadable lines rather than letting a gap read as a quiet loop", () => {
+    const bad = { ...history, data: { ...history.data, malformed: { converge: 3, gates: 1 } } };
+    expect(historyMalformedNote(bad)).toMatch(/4 ledger lines were unreadable/);
+    expect(historyMalformedNote(bad)).toMatch(/converge: 3, gates: 1/);
+  });
+
+  it("stays silent when every line read", () => {
+    expect(historyMalformedNote(history)).toBeNull();
+    expect(historyMalformedNote(null)).toBeNull();
+  });
+});

package/web/release.js

@@ -0,0 +1,66 @@
+// #165 (#61's second clause): the recorded release, read off a component
+// node's `_release` attr (src/component-status.ts's `releaseStatus`). The pure
+// half, tested the way web/operator.js and web/run-playhead.js are — no DOM.
+// The card chip (`release`) already answers "which commit, through what"; this
+// is the pane's fuller answer — which run, from which commit, approved by whom
+// — and, when the record cannot be followed, the reason in words.
+import { approvalLink } from "./operator.js";
+import { waitingFor } from "./run-playhead.js";
+
+/** How the pane names each id space. `laptop` for a local mint: "local" would
+ * read as a place, and the point is that there is nowhere to go. */
+export const FORGE_LABEL = { github: "GitHub Actions", gitlab: "GitLab CI", op: "an Op run", local: "a laptop run", unknown: "an unlinked run" };
+
+/** The one line that says why there is no link, or null when there is one.
+ * Never a placeholder link, never a guessed forge: the three id spaces a
+ * `runId` can live in are mutually incompatible, so a link behold built from
+ * a bare id would as often be wrong as right (chant#2045). */
+export function unlinkedReason(release) {
+  if (!release) return null;
+  if (runLink(release)) return null;
+  switch (release.forge) {
+    case "local":
+      return release.originSource === "record"
+        ? "minted on the machine that deployed — the record says so; there is no run to open"
+        : "minted on the machine that deployed (a local- id) — there is no run to open";
+    case "unknown":
+      return "the record names a run id and nothing else — no forge, no repo, no URL. A chant older than chant#2045 wrote it; behold will not guess which forge the id belongs to";
+    case "op":
+      return "an orchestrator run id — the run lives in Temporal, not on a forge";
+    default:
+      return `${FORGE_LABEL[release.forge] || release.forge} named no server URL when this was recorded, so the id cannot be resolved to a link`;
+  }
+}
+
+/** The run's absolute http(s) URL, or null. Same validator as the gate card's
+ * `approve at:` — an address the ledger itself carries, or nothing. */
+export function runLink(release) {
+  return release && release.originSource === "record" ? approvalLink(release.url) : null;
+}
+
+/** `<runId> (<forge>)` — the run row's text, link or no link. */
+export function runText(release) {
+  const forge = FORGE_LABEL[release.forge] || release.forge;
+  return release.repo ? `${release.runId} · ${forge} · ${release.repo}` : `${release.runId} · ${forge}`;
+}
+
+/** The pane's rows, in order: `[key, value]` pairs plus an optional caveat
+ * row keyed `""`. The link is returned as `{href, text}` so the DOM half makes
+ * the anchor and this half stays testable. */
+export function releaseRows(release, now = Date.now()) {
+  if (!release) return [];
+  const rows = [];
+  const href = runLink(release);
+  rows.push(["run", href ? { href, text: runText(release) } : runText(release)]);
+  const why = unlinkedReason(release);
+  if (why) rows.push(["", why]);
+  rows.push(["commit", release.gitSha]);
+  rows.push(["digest", release.digest]);
+  const ago = release.timestamp ? waitingFor(release.timestamp, now) : null;
+  rows.push(["recorded", ago ? `${release.timestamp} (${ago} ago)` : release.timestamp]);
+  rows.push(["actor", release.actor]);
+  // Absent means ungated — chant omits `approver` exactly then — so the row
+  // says that rather than leaving a gap the reader could take for a redaction.
+  rows.push(["approver", release.approver || "none — an ungated change"]);
+  return rows;
+}