@intentius/behold 0.29.6 → 0.29.8

package/web/kiosk.js

@@ -13,7 +13,12 @@
 // A wave that failed says which waves applied before it and stay applied.
 // Nothing here is all-or-nothing, and nothing says so.
 
-import { PICK_HOLD_MS, startRuns } from "./kiosk-runs.js";
+import { PICK_HOLD_MS, annMark, mergeRun, startRuns } from "./kiosk-runs.js";
+import { PANEL_STEPS, PANEL_TITLE, approvalModel, cycleRuns, rowFacts, shortDigest } from "./kiosk-approval.js";
+import { getThemeName, mountThemePicker, onThemeChange } from "./theme.js";
+import { cssString, hoverCss, hoverFromMessage, hoverLinks, hoverMessage, isLightBg, rootSegments, rootText } from "./kiosk-roots.js";
+import { creditLines, filterIndex, keepRun, liveEstimate, liveFor, namesOther, notRunWords, replayAt, replayBanner, replayIndex, rootWord, runAsOf, scrubDemo, servesRepo, vendorOf } from "./kiosk-vendor.js";
+import { repoParam, repoUrl } from "./kiosk-repo.js";
 import { STATE_WORDS, changingRoots, costLine, pinsCommit, planFitsPin, pullPin, readEdges, rootsCount, totalsLine, waveRows, blastRows } from "./terragucci-change.js";
 
 /** The scenarios terragucci#1014 numbers. An id not here is shown by the title demo.json carries. */
@@ -67,7 +72,12 @@ export function scenarioName(demo) {
  * place of SCENARIOS' label when it has one; the driver's title alone for an
  * id behold doesn't know.
  */
-export function scenarioHead(demo) {
+export function scenarioHead(demo, { vendor = null } = {}) {
+  // behold#571: a tool's page numbers nothing, so nothing hints at the loop's other scenarios.
+  if (vendor) {
+    const name = scenarioName(demo);
+    return { kicker: name ? `Scenario · ${name}` : "Scenario", title: demo.title || name || demo.scenario };
+  }
   const known = Object.prototype.hasOwnProperty.call(SCENARIOS, demo.scenario) ? SCENARIOS[demo.scenario] : null;
   const name = scenarioName(demo);
   if (counted(demo.index)) {
@@ -218,14 +228,17 @@ export function unreviewedLines(answer) {
 
 /**
  * The approval the driver gives at a waiting wave, as terragucci's
- * stack/demo.sh gives it: `approve_wave` runs chant's approve, sealed with
- * the driver's ssh key, then `resume_pull` posts `/terragucci apply` on the
- * merged pull request. The actor and the key are placeholders: the kiosk
- * never names a path or a secret.
+ * stack/demo.sh gives it: `approve_wave` runs chant's approve as the
+ * reviewer (terragucci#1052: the driver plays two people, demo-author who
+ * opens, merges and comments, and demo-reviewer who approves, since an
+ * approval only counts from someone who had no hand in the change), sealed
+ * with the reviewer's own signing key; then `resume_pull` posts
+ * `/terragucci apply` on the merged pull request. The actor and the key are
+ * placeholders: the kiosk never names a path or a secret.
  */
 export function driverApproveLines(wave, pull) {
   return {
-    approve: `chant approve tf-apply wave-${wave} --actor <driver> --sign <driver key>`,
+    approve: `chant approve tf-apply wave-${wave} --actor <reviewer> --sign <reviewer key>`,
     comment: "/terragucci apply",
     on: pull !== null && pull !== undefined ? `pull request #${pull}` : "the merged pull request",
   };
@@ -254,12 +267,13 @@ export function pendingApproval(demo, progress) {
 
 /**
  * behold#571: the approval in plain words, before the command, for a viewer
- * who has never approved a pipeline: who the driver is, what it signs. The
+ * who has never approved a pipeline: who the driver plays, what it signs
+ * with (terragucci#1052: a reviewer apart from the change's author). The
  * plan's digest is on the wave's box in the view.
  */
 export function approveGloss(appr) {
   const roots = appr.roots.length ? ` (${appr.roots.join(", ")})` : "";
-  return `The driver stands in for a person: it approves wave ${appr.wave}${roots} with its own signing key.`;
+  return `The driver plays a reviewer who had no hand in the change, and approves wave ${appr.wave}${roots} with that reviewer's own signing key.`;
 }
 
 /**
@@ -331,8 +345,10 @@ export function runPin(demo) {
 }
 
 /** The framed view's address: behold's own page, bare, at a zoom (the resources zoom unless told), told who its host is. */
-export function frameSrc(origin, zoom = "resources") {
+export function frameSrc(origin, zoom = "resources", repo = null, theme = null) {
   const q = new URLSearchParams({ embed: "1", bare: "1", zoom, host: origin });
+  if (repo) q.set("repo", repo); // behold#571: the checkout the frame draws, on a behold that serves several
+  if (theme) q.set("theme", theme); // behold#571: the kiosk's theme, which the frame follows
   return `/?${q.toString()}`;
 }
 
@@ -394,11 +410,12 @@ export function kioskView(demo, { components = false, pick = null, now = Date.no
 }
 
 /** The line under the view saying how to read it, for the view shown. */
-export function legendWords(view) {
+export function legendWords(view, tool = null) {
+  const root = rootWord(tool);
   if (view === "components") {
-    return "Each card is a Terraform root with its own state, in a box per wave titled with the pipeline job that applies it; an arrow is one root reading another's outputs, dashed while it reads planned values. A wave applies its roots together, after the waves it reads.";
+    return `Each card is ${root} with its own state, in a box per wave titled with the pipeline job that applies it; an arrow is one root reading another's outputs, dashed while it reads planned values. A wave applies its roots together, after the waves it reads.`;
   }
-  return "Each box is a Terraform root with its own state; an arrow is one root reading another's outputs, dashed while it reads planned values. A wave applies its roots together, after the waves it reads.";
+  return `Each box is ${root} with its own state; an arrow is one root reading another's outputs, dashed while it reads planned values. A wave applies its roots together, after the waves it reads.`;
 }
 
 /** The behold zoom for a view. */
@@ -457,76 +474,232 @@ const el = (tag, cls, text) => {
   return n;
 };
 
+/** behold#571: an element whose text puts a dot in its root's colour by each whole-word root name. */
+const elRoots = (tag, cls, text, s) => {
+  const roots = (s && (s.rootNames || s.roots)) || [];
+  if (text === undefined || text === null || !rootSegments(String(text), roots).some((x) => x.root)) return el(tag, cls, text);
+  const n = el(tag, cls);
+  n.appendChild(rootText(document, String(text), roots, { light: !!(s && s.light) }));
+  return n;
+};
+
 /** Draw the bar and the foot from what the kiosk holds. Pure over its arguments, but for the DOM. */
 export function renderKiosk(bar, s, now = new Date(), foot = null) {
   bar.replaceChildren();
   if (foot) foot.replaceChildren();
+  drawBar(bar, s, now, foot);
+  // behold#571: a tool's page ends with who makes the tool, and that they don't endorse the demo.
+  if (foot && vendorOf(s.vendor)) drawCredit(foot, s.vendor);
+}
+
+function drawBar(bar, s, now, foot) {
+  const vendor = vendorOf(s.vendor);
+  if (vendor && s.mode === "none") {
+    // behold#571: the tool's scenario has no cycle yet: its name, its link, and a calm line.
+    const words = notRunWords(vendor);
+    const box = el("div", "k-empty");
+    const title = el("h1", "k-title");
+    title.append(brandEl(vendor), el("span", "k-title-text", words.title));
+    box.append(title, el("p", "k-muted", words.text));
+    bar.appendChild(box);
+    return;
+  }
   if (!s.demo || !s.demo.demo) {
     const box = el("div", "k-empty");
-    box.appendChild(el("h1", "k-title", "Waiting for the demo"));
+    const title = el("h1", "k-title");
+    if (vendor) title.appendChild(brandEl(vendor));
+    title.appendChild(el("span", "k-title-text", "Waiting for the demo"));
+    box.appendChild(title);
     box.appendChild(el("p", "k-muted", s.demo ? s.demo.error || s.demo.absent : "Reading demo.json…"));
     bar.appendChild(box);
     return;
   }
   const demo = s.demo.demo;
-  const head = scenarioHead(demo);
+  const head = scenarioHead(demo, { vendor: s.vendor || null });
 
+  // behold#571: a tool's page says plainly when it replays an earlier run, and when it can't draw the repo's graph.
+  if (s.replay && s.replay.banner) bar.appendChild(el("p", "k-replay", s.replay.banner));
+  if (vendor && s.noReports && (s.mode === "live" || s.mode === "replay")) bar.appendChild(el("p", "k-nograph-note", NO_GRAPH_WORDS));
   const intro = introText(demo);
-  if (intro) bar.appendChild(el("p", "k-intro", intro));
 
-  // behold#571: the kicker on the title's line, so the bar has room for the intro.
+  // behold#571: the left column in fixed boxes: the title, the card (the intro between scenarios), the step.
   const left = el("div", "k-left");
+  const titleBox = box("title", "k-box-title");
   const title = el("h1", "k-title");
+  if (vendor) title.appendChild(brandEl(vendor));
   title.append(el("span", "k-kicker", head.kicker), el("span", "k-title-text", head.title));
-  left.appendChild(title);
+  if (title.setAttribute) title.setAttribute("title", `${head.kicker} · ${head.title || ""}`);
+  titleBox.appendChild(title);
+  left.appendChild(titleBox);
+  const cardBox = box("card");
   const rows = aboutRows(demo);
-  if (rows.length) {
+  if (demo.step === "reset" && intro) {
+    // Between scenarios nothing else happens: the card's box says what the demo is about.
+    const p = el("p", "k-intro");
+    p.append(el("span", "k-intro-head", INTRO_HEAD), intro);
+    cardBox.appendChild(p);
+  } else if (rows.length) {
     const card = el("dl", "k-about");
-    for (const r of rows) card.append(el("dt", "k-about-label", r.label), el("dd", "k-about-text", r.text));
-    left.appendChild(card);
+    for (const r of rows) card.append(el("dt", "k-about-label", r.label), elRoots("dd", "k-about-text", r.text, s));
+    cardBox.appendChild(card);
   }
+  left.appendChild(cardBox);
   const said = el("p", `k-step k-step-${demo.step}`);
-  said.append(el("span", "k-step-word", STEP_WORDS[demo.step] || demo.step), el("span", "k-label", demo.label));
-  left.appendChild(said);
+  said.append(el("span", "k-step-word", STEP_WORDS[demo.step] || demo.step), elRoots("span", "k-label", demo.label, s));
+  const stepBox = box("step");
+  stepBox.appendChild(said);
+  left.appendChild(stepBox);
   bar.appendChild(left);
 
   const right = el("div", "k-right");
   const strip = el("ol", "k-strip");
   for (const stop of stripStops(demo.step)) strip.appendChild(el("li", `k-stop k-${stop.state}`, stop.words));
   const where = el("div", "k-where");
-  where.append(strip, el("span", "k-cycle", cycleWords(demo, now)));
+  where.appendChild(strip);
   right.appendChild(where);
 
   const nx = nextWords(demo, now);
   const next = el("div", "k-next");
   next.appendChild(el("span", "k-next-word", "next, by the driver"));
-  next.appendChild(el("span", "k-action", nx.action));
+  next.appendChild(elRoots("span", "k-action", nx.action, s));
   next.appendChild(el("span", "k-when", nx.when));
+  next.appendChild(el("span", "k-cycle", cycleWords(demo, now)));
   right.appendChild(next);
 
+  // behold#571: the hold's box: how the hold ends, from the records; else the driver's approval, or the run's note.
+  const holdBox = box("hold");
   const appr = pendingApproval(demo, s.progress);
-  if (appr) {
+  if (s.approval) {
+    holdBox.appendChild(approvalPanel(s.approval, s));
+  } else if (appr) {
     const a = el("div", "k-approve");
-    a.appendChild(el("p", "k-approve-gloss", approveGloss(appr)));
+    a.appendChild(elRoots("p", "k-approve-gloss", approveGloss(appr), s));
     a.appendChild(el("code", "k-command", appr.approve));
     const then = el("p", "k-approve-then");
     then.append(`then comments `, el("code", "k-inline", appr.comment), ` on ${appr.on}, and the waves run again.`);
     a.appendChild(then);
-    right.appendChild(a);
-  } else {
+    holdBox.appendChild(a);
+  } else if (!s.noReports) {
     const panel = runPanel(demo, s.answer, s.progress);
-    if (panel.note) right.appendChild(el("p", "k-note", panel.note));
-    else if (panel.stage === "pull-request") for (const u of unreviewedLines(s.answer)) right.appendChild(el("p", "k-note k-unknown", u));
+    if (panel.note) holdBox.appendChild(elRoots("p", "k-note", panel.note, s));
+    else if (panel.stage === "pull-request") for (const u of unreviewedLines(s.answer)) holdBox.appendChild(elRoots("p", "k-note k-unknown", u, s));
   }
+  right.appendChild(holdBox);
   bar.appendChild(right);
 
   if (foot) {
-    foot.appendChild(el("span", "k-legend", legendWords(s.view || "resources")));
+    // The legend reads the graph; with no graph shown there is nothing for it to explain.
+    if (!s.noReports) foot.appendChild(el("span", "k-legend", legendWords(s.view || "resources", s.vendor || null)));
     // behold#571: no line on where the narration was read from: a viewer new to the demo reads the facts.
-    for (const f of factLines(demo, s.answer)) foot.appendChild(el("span", "k-fact", f));
+    if (!s.noReports) for (const f of factLines(demo, s.answer)) foot.appendChild(elRoots("span", "k-fact", f, s));
   }
 }
 
+/** behold#571: the head over the intro, in the card's box between scenarios, and the title of "What is this?". */
+export const INTRO_HEAD = "What this demo is about";
+
+/** A fixed box of the header: its text scrolls inside it, and the page keeps its scroll across redraws by `data-box`. */
+function box(name, cls = "") {
+  const b = el("div", `k-box${cls ? ` ${cls}` : ""}`);
+  if (b.dataset) b.dataset.box = name;
+  return b;
+}
+
+/**
+ * behold#571: "How this hold ends", drawn from approvalModel's rows. A row's
+ * chip names the log line it rests on and shows it in the runs pane
+ * (`s.showLine`).
+ */
+export function approvalPanel(model, s = {}) {
+  const wrap = el("div", "k-ap");
+  const head = el("p", "k-ap-head", `${PANEL_TITLE} · wave ${model.wave} `);
+  if (model.digest) head.appendChild(el("span", "k-ap-plan", `plan ${shortDigest(model.digest)}`));
+  head.append(" · times in UTC");
+  wrap.appendChild(head);
+  const list = el("ol", "k-ap-rows");
+  for (const r of model.rows) {
+    const li = el("li", `k-ap-row k-ap-${r.state}`);
+    const mark = el("span", "k-ap-mark");
+    if (mark.setAttribute) mark.setAttribute("aria-label", r.state === "lit" ? "done" : r.state === "going" ? "under way" : "not yet");
+    li.append(mark, el("span", "k-ap-label", r.label));
+    const text = elRoots("span", "k-ap-text", r.text, s);
+    const facts = rowFacts(r);
+    if (facts.length) text.appendChild(el("span", `k-ap-facts${r.seal && r.seal.ok === false ? " k-ap-bad" : ""}`, facts.join(" · ")));
+    if (r.line && r.line.a) {
+      const chip = annMark(r.line.a, { first: true });
+      chip.dataset.annJump = "1";
+      chip.title = `${r.line.a.note} Shows run #${r.line.run}, ${r.line.job}, line ${r.line.n}.`;
+      const line = r.line;
+      chip.addEventListener("click", () => s.showLine && s.showLine(line));
+      text.append(" ", chip);
+    }
+    li.appendChild(text);
+    if (r.command) li.appendChild(el("code", "k-command", r.command));
+    list.appendChild(li);
+  }
+  wrap.appendChild(list);
+  return wrap;
+}
+
+/** behold#571: the header's line when this behold serves another repo than the page's. */
+export const NO_GRAPH_WORDS = "This page shows the runs and their logs; the graph of this repo isn't served here.";
+
+/** behold#571: a tool's name, and its logo where its owner allows one, linking to its official site. */
+function brandEl(vendor) {
+  const a = el("a", "k-brand");
+  a.href = vendor.url;
+  a.target = "_blank";
+  a.rel = "noopener";
+  if (vendor.logo) {
+    const img = el("img", "k-brand-logo");
+    img.src = vendor.logo.src;
+    if (vendor.logo.src2x) img.srcset = `${vendor.logo.src2x} 2x`;
+    img.alt = "";
+    a.appendChild(img);
+  }
+  a.appendChild(el("span", "k-brand-name", vendor.name));
+  return a;
+}
+
+/** behold#571: the footer's credit on a tool's page, its names linked to their official sites. */
+function drawCredit(foot, tool) {
+  for (const line of creditLines(tool)) {
+    const p = el("span", "k-credit");
+    for (const seg of line) {
+      if (!seg.url) {
+        p.append(seg.text);
+        continue;
+      }
+      const a = el("a", "k-credit-link", seg.text);
+      a.href = seg.url;
+      a.target = "_blank";
+      a.rel = "noopener";
+      p.appendChild(a);
+    }
+    foot.appendChild(p);
+  }
+}
+
+/** behold#571: how a hovered root's name and wave's job row light. A background and a shadow: nothing moves. */
+export const HOVER_ROOT_RULE = "background: color-mix(in srgb, var(--focus) 32%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 32%, transparent); border-radius: 3px;";
+export const HOVER_JOB_RULE = "background: color-mix(in srgb, var(--focus) 24%, transparent); box-shadow: inset 4px 0 0 var(--focus);";
+
+/** behold#571: how often the approval panel reads the cycle's runs, and the gate ledger (which the server caches 30 s). */
+export const APPROVAL_POLL_MS = 4_000;
+export const LEDGER_POLL_MS = 10_000;
+
+/** behold#571: the approval panel's words for the approval the driver gives next, over its command. */
+export const DRIVER_SIGNS = "Next the driver plays a reviewer with no hand in the change and signs this plan with that reviewer's key:";
+
+/** behold#571: "What is this?" before demo.json says. */
+export const WHAT_FALLBACK = "A demo that runs a real infrastructure change through its pipeline in a loop, and shows each step as it happens.";
+
+/** behold#571: a fade at a box's edge where its text goes on past it. */
+function fade(b) {
+  b.classList.toggle("k-more-below", b.scrollTop + b.clientHeight < b.scrollHeight - 1);
+  b.classList.toggle("k-more-above", b.scrollTop > 1);
+}
+
 /** How often the kiosk asks for demo.json. The server shares one read between kiosks. */
 export const DEMO_POLL_MS = 3_000;
 
@@ -537,8 +710,37 @@ export const DEMO_POLL_MS = 3_000;
  * countdown. When the roots the step is about change, move the framed view
  * with a `behold:view` message; the frame takes them only from this origin.
  */
-export function startKiosk({ bar, frame, foot, side, main, views }, { fetchJson = defaultFetch, now = () => new Date(), origin = location.origin } = {}) {
-  const s = { demo: null, answer: null, progress: null, components: false, pick: null, view: "resources" };
+export function startKiosk({ bar, frame, foot, side, main, views, tools = null }, { fetchJson = defaultFetch, now = () => new Date(), origin = location.origin, tool = null } = {}) {
+  const s = { demo: null, answer: null, progress: null, components: false, pick: null, view: "resources", roots: [], waves: [], light: false, hover: null, frameHover: null };
+  // behold#571: on a tool's page, `live` while its scenario runs, `replay` of its latest cycle otherwise, `none` before it has one.
+  const vendor = vendorOf(tool);
+  s.vendor = vendor ? tool : null;
+  s.mode = vendor ? "loading" : "live";
+  s.replay = null;
+  s.repo = null;
+  s.live = null;
+  if (vendor && typeof document !== "undefined") document.title = `${vendor.name} · terragucci demo`;
+  /** The time the page shows: the replay's, while it replays. */
+  const shownNow = () => (s.mode === "replay" && s.replay && s.replay.at ? s.replay.at : now());
+  /** behold#571: the frame and the plan's facts are the served repo's, so a tool's page shows them only for its own repo. */
+  const frameOk = () => !vendor || servesRepo(s.answer && !s.answer.error ? s.answer.project : null, s.repo);
+  // behold#571: a behold serving several repos (`serve --repos`) answers the
+  // graph's reads from the checkout of the repo the page is about, asked by
+  // name. `viewRepos` is what it serves, `aimed` the repo the reads are for.
+  s.viewRepos = null;
+  s.aimed = null;
+  const wantRepo = () => repoParam(s.repo, s.viewRepos);
+  const fetchServed = fetchJson;
+  fetchJson = (url) => fetchServed(repoUrl(url, wantRepo()));
+  /** When the page moves to another served repo, read its project, reports and run view again, and point the frame at it. */
+  const followRepo = () => {
+    const want = wantRepo();
+    if (!want || want === s.aimed) return;
+    s.aimed = want;
+    void readProject();
+    void reports(true);
+    void progress(true);
+  };
   let lastKey = "";
   let lastFocus;
   const shownView = () => kioskView(s.demo && s.demo.demo, { components: s.components, pick: s.pick, now: now().getTime() });
@@ -558,32 +760,280 @@ export function startKiosk({ bar, frame, foot, side, main, views }, { fetchJson
     s.pick = { view, at: now().getTime() };
     draw();
   };
+  // behold#571: the roots' colours and the hover links between the panes and the frame.
+  const rootList = () => (s.roots.length ? s.roots : s.answer && Array.isArray(s.answer.roots) ? s.answer.roots.map((r) => r.path) : []);
+  const glow = () => {
+    let style = document.getElementById("k-hover-style");
+    if (!style) {
+      style = document.createElement("style");
+      style.id = "k-hover-style";
+      document.head.appendChild(style);
+    }
+    const a = hoverLinks(s.hover, s.waves);
+    const b = hoverLinks(s.frameHover, s.waves);
+    const links = { roots: [...new Set([...a.roots, ...b.roots])], waves: [...new Set([...a.waves, ...b.waves])] };
+    style.textContent = [
+      hoverCss({ roots: links.roots, waves: [] }, { root: (r) => `.k-root[data-k-root=${cssString(r)}]` }, HOVER_ROOT_RULE),
+      hoverCss({ roots: [], waves: links.waves }, { wave: (w) => `.r-job[data-k-wave="${w}"]` }, HOVER_JOB_RULE),
+    ].join("\n");
+  };
+  const tellHover = (h) => {
+    if (frame && frame.contentWindow) frame.contentWindow.postMessage(hoverMessage(h), origin);
+  };
+  const hoverAt = (target) => {
+    const t = target && target.closest ? target.closest("[data-k-root],[data-k-wave]") : null;
+    if (!t) return null;
+    if (t.dataset.kRoot) return { root: t.dataset.kRoot };
+    const w = Number(t.dataset.kWave);
+    return Number.isInteger(w) ? { wave: w } : null;
+  };
+  const setHover = (h) => {
+    if ((h && h.root) === (s.hover && s.hover.root) && (h && h.wave) === (s.hover && s.hover.wave)) return;
+    s.hover = h;
+    glow();
+    tellHover(h);
+  };
+  if (typeof document !== "undefined" && document.addEventListener) {
+    document.addEventListener("pointerover", (e) => setHover(hoverAt(e.target)));
+    document.documentElement.addEventListener("pointerleave", () => setHover(null));
+    // A click or Escape anywhere here is a click elsewhere for the frame's pinned popover.
+    const unpin = () => frame && frame.contentWindow && frame.contentWindow.postMessage({ type: "behold:unpin" }, origin);
+    document.addEventListener("pointerdown", unpin);
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") unpin();
+    });
+    window.addEventListener("message", (e) => {
+      if (e.origin !== origin || !frame || e.source !== frame.contentWindow) return;
+      const h = hoverFromMessage(e.data);
+      if (h === undefined) return;
+      s.frameHover = h;
+      glow();
+    });
+  }
+
+  // behold#571: the titles and names demo.json has carried, by scenario, for the runs' subtitles.
+  const titles = {};
+  const names = {};
+  /** Take one narration (demo.json, or a replayed step), and ask for the run it is about when the step moved. */
+  const setDemo = (answer) => {
+    s.demo = answer;
+    const d = answer && answer.demo;
+    if (d && d.scenario && typeof d.title === "string" && d.title) titles[d.scenario] = d.title;
+    if (d && d.scenario && scenarioName(d)) names[d.scenario] = scenarioName(d);
+    const key = d ? `${s.mode}|${d.cycle}|${d.step}|${d.commit}|${d.pull}` : "";
+    if (key !== lastKey) {
+      lastKey = key;
+      // The step moved: the run it is about may be newer than what behold read.
+      const stage = d ? demoStage(d) : "none";
+      if (stage === "pull-request" || stage === "either") void reports(true);
+      if (stage === "apply" || stage === "either") void progress(true);
+    }
+  };
+  // behold#571: the replay's clock, read on every draw.
+  const replayTick = () => {
+    if (s.mode !== "replay" || !s.replay) return;
+    const steps = s.replay.cycle.steps;
+    const r = replayAt(steps, now().getTime() - s.replay.start);
+    s.replay.at = r.at;
+    s.replay.banner = replayBanner(s.replay.cycle, liveEstimate(s.live && s.live.demo, s.replay.cycle, now()));
+    setDemo({ source: "replay", read: steps[r.index].at, demo: scrubDemo(steps[r.index], tool) });
+  };
+
   const draw = () => {
+    followRepo();
+    replayTick();
+    s.light = typeof document !== "undefined" && document.documentElement ? isLightBg(getComputedStyle(document.documentElement).getPropertyValue("--bg")) : false;
+    s.rootNames = rootList();
     const shown = shownView();
     s.view = shown.view;
-    renderKiosk(bar, s, now(), foot);
-    renderViewToggle(views, shown, { components: s.components, onPick: pickView });
+    const ok = frameOk();
+    s.noReports = !ok;
+    s.approval = approvalNow();
+    // behold#571: the header's boxes redraw every second; each keeps where a viewer scrolled it.
+    const scrolled = Object.fromEntries([...bar.querySelectorAll(".k-box")].map((b) => [b.dataset.box, b.scrollTop]));
+    renderKiosk(bar, s, shownNow(), foot);
+    for (const b of bar.querySelectorAll(".k-box")) {
+      if (scrolled[b.dataset.box]) b.scrollTop = scrolled[b.dataset.box];
+      fade(b);
+      b.addEventListener("scroll", () => fade(b), { passive: true });
+    }
+    whatText();
+    renderViewToggle(views, shown, { components: s.components && ok, onPick: pickView });
+    // behold#571: with no graph to show, the graph pane folds away and the runs and the log take its width.
+    if (typeof document !== "undefined" && document.body && document.body.classList) document.body.classList.toggle("k-nograph", !!vendor && !ok);
     tellFrame(false);
   };
-  // #569: the pipeline's runs beside the view, CI-page style.
-  // behold#571: the titles and names demo.json has carried, by scenario, for the runs' subtitles.
-  const titles = {};
-  const names = {};
-  if (side && main) startRuns({ side, main }, { fetchJson, now, scenarios: SCENARIOS, titles: () => titles, names: () => names });
+
+  // behold#571: on a tool's page the runs pane shows the tool's repo alone; in the replay, the cycle's runs as they stood.
+  const runDocs = new Map();
+  const runDoc = (id) => {
+    if (!runDocs.has(id)) runDocs.set(id, fetchJson(`/api/terragucci/runs/${id}`).then((a) => (a && a.doc ? a.doc : null)));
+    return runDocs.get(id);
+  };
+  const replayRuns = async () => {
+    const r = s.replay;
+    if (r.runs) return r.runs;
+    const idx = await fetchJson("/api/terragucci/runs");
+    const listed = new Map((idx && idx.doc && Array.isArray(idx.doc.runs) ? idx.doc.runs : []).map((x) => [x.id, x]));
+    const runs = [];
+    for (const id of r.cycle.runs) {
+      const e = listed.get(id) || (await runDoc(id));
+      if (e) runs.push(e);
+    }
+    r.runs = runs.filter((x) => keepRun(x, { tool, repo: r.cycle.repo }));
+    return r.runs;
+  };
+  const runsSource = () => {
+    if (!vendor || s.mode === "live") return null;
+    if (s.mode !== "replay" || !s.replay) return { index: async () => ({ doc: { schema: "demo.runs/v1", runs: [] } }), run: async () => ({ doc: null, absent: "No run to show yet." }) };
+    return {
+      index: async () => replayIndex(await replayRuns(), shownNow().getTime()),
+      run: async (id) => {
+        const doc = await runDoc(id);
+        return doc ? { doc: runAsOf(doc, shownNow().getTime()) } : { doc: null, absent: `Run #${id} is no longer kept in the reports.` };
+      },
+    };
+  };
+  // behold#571: the approval panel's records: the cycle's runs, the gate ledger's history, and the lane.
+  const ap = { runs: new Map(), list: [], lifecycle: null, history: null, at: 0, ledgerAt: 0, busy: false };
+  const readApproval = async () => {
+    const d = s.demo && s.demo.demo;
+    if (!d || !PANEL_STEPS.includes(d.step) || ap.busy) return;
+    const t = now().getTime();
+    if (t - ap.at < APPROVAL_POLL_MS) return;
+    ap.busy = true;
+    ap.at = t;
+    try {
+      const src = runsSource();
+      const raw = src ? await src.index() : await fetchJson("/api/terragucci/runs");
+      const idx = vendor ? filterIndex(raw, { tool, repo: s.repo }) : raw;
+      const mine = cycleRuns(idx && idx.doc && Array.isArray(idx.doc.runs) ? idx.doc.runs : [], d);
+      for (const e of mine) {
+        const key = `${s.mode}|${e.status}|${e.ended_at}|${src ? Math.floor(shownNow().getTime() / 5000) : ""}`;
+        const had = ap.runs.get(e.id);
+        if (had && had.key === key) continue;
+        const r = src ? await src.run(e.id) : await fetchJson(`/api/terragucci/runs/${e.id}`);
+        if (r && r.doc) ap.runs.set(e.id, { key, doc: mergeRun(e, r.doc) });
+      }
+      ap.list = mine.map((e) => ap.runs.get(e.id)).filter(Boolean).map((x) => x.doc);
+      if (t - ap.ledgerAt >= LEDGER_POLL_MS) {
+        ap.ledgerAt = t;
+        const [lifecycle, history] = await Promise.all([fetchJson("/api/terragucci/lifecycle"), fetchJson("/api/lifecycle/history?limit=200")]);
+        ap.lifecycle = lifecycle && !lifecycle.error ? lifecycle : null;
+        ap.history = history && !history.error ? history : null;
+      }
+    } finally {
+      ap.busy = false;
+    }
+    draw();
+  };
+  const approvalNow = () => {
+    const d = s.demo && s.demo.demo;
+    if (!d || !PANEL_STEPS.includes(d.step)) return null;
+    const appr = pendingApproval(d, s.progress);
+    const driver = appr && s.mode !== "replay" ? { gloss: DRIVER_SIGNS, approve: appr.approve, comment: appr.comment, on: appr.on } : null;
+    return approvalModel({ demo: d, runs: ap.list, history: ap.history, lifecycle: ap.lifecycle, fallback: appr, now: shownNow().getTime(), driver });
+  };
+  // behold#571: a chip in the panel shows its log line in the runs pane (opened, on a phone).
+  let runsApi = null;
+  s.showLine = (line) => {
+    if (!runsApi) return;
+    if (tools && tools.runsToggle) setRunsOpen(true);
+    runsApi.show(line.run, line.job, line.step, line.n);
+  };
+  const setRunsOpen = (open) => {
+    document.body.classList.toggle("k-runs-open", open);
+    if (tools && tools.runsToggle) tools.runsToggle.setAttribute("aria-expanded", String(open));
+  };
+  if (tools && tools.runsToggle) tools.runsToggle.addEventListener("click", () => setRunsOpen(!document.body.classList.contains("k-runs-open")));
+
+  // behold#571: "What is this?" opens the intro over the page (no layout moves); a click elsewhere or Escape closes it.
+  const whatText = () => {
+    if (!tools || !tools.pop) return;
+    const d = s.demo && s.demo.demo;
+    const text = (d && introText(d)) || WHAT_FALLBACK;
+    const p = tools.pop.firstElementChild;
+    if (p && p.textContent === text) return;
+    tools.pop.replaceChildren(el("p", null, text));
+  };
+  if (tools && tools.what && tools.pop) {
+    const setWhat = (open) => {
+      tools.pop.hidden = !open;
+      tools.what.setAttribute("aria-expanded", String(open));
+    };
+    tools.what.addEventListener("click", (e) => {
+      e.stopPropagation();
+      whatText();
+      setWhat(tools.pop.hidden);
+    });
+    document.addEventListener("click", (e) => {
+      if (!tools.pop.hidden && !tools.pop.contains(e.target)) setWhat(false);
+    });
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") setWhat(false);
+    });
+  }
+  // behold#571: the theme picker, persisted per viewer as the app does; the frame follows without a reload.
+  if (tools && tools.theme) mountThemePicker(tools.theme);
+  onThemeChange((th) => {
+    if (frame && frame.contentWindow) frame.contentWindow.postMessage({ type: "behold:theme", name: th.name }, origin);
+    draw();
+  });
+
+  if (side && main) {
+    runsApi = startRuns(
+      { side, main },
+      {
+        fetchJson,
+        now,
+        shown: shownNow,
+        scenarios: SCENARIOS,
+        titles: () => titles,
+        names: () => names,
+        roots: rootList,
+        waves: () => s.waves,
+        light: () => s.light,
+        source: runsSource,
+        filter: vendor ? (index) => filterIndex(index, { tool, repo: s.repo }) : (index) => index,
+        replay: () => s.mode === "replay",
+        hideLine: vendor ? (line) => namesOther(line, tool) : null,
+      },
+    );
+  }
   // #571: whether the repo offers the components zoom (a terragucci.components.json), read before the frame opens so it opens on the step's view.
+  let frameSrcNow = null;
   const openFrame = () => {
     if (!frame) return;
-    frame.src = frameSrc(origin, viewZoom(shownView().view));
-    // The frame reads its graph after load; tell it again once it has had the time.
-    frame.addEventListener("load", () => {
-      for (const ms of [1500, 4000, 8000]) setTimeout(() => tellFrame(true), ms);
-    });
+    const src = frameSrc(origin, viewZoom(shownView().view), wantRepo(), getThemeName());
+    if (src === frameSrcNow) return;
+    if (frameSrcNow === null) {
+      // The frame reads its graph after load; tell it again once it has had the time.
+      frame.addEventListener("load", () => {
+        for (const ms of [1500, 4000, 8000]) setTimeout(() => tellFrame(true), ms);
+      });
+    }
+    frameSrcNow = src;
+    frame.src = src;
   };
-  void fetchJson("/api/project").then((p) => {
+  const readProject = () => fetchJson("/api/project").then((p) => {
+    // behold#571: the repos this behold serves, and which one this answer is.
+    if (p && !p.error && Array.isArray(p.viewRepos)) {
+      s.viewRepos = p.viewRepos;
+      if (s.aimed === null && p.viewRepo) s.aimed = p.viewRepo;
+    }
     s.components = !!(p && !p.error && p.terragucciComponents);
+    // behold#571: the declared roots (their colours' order) and the wave jobs that apply them.
+    if (p && p.terragucciRoots) {
+      s.roots = Array.isArray(p.terragucciRoots.roots) ? p.terragucciRoots.roots : [];
+      s.waves = Array.isArray(p.terragucciRoots.waves) ? p.terragucciRoots.waves : [];
+    } else if (s.aimed) {
+      s.roots = [];
+      s.waves = [];
+    }
     openFrame();
     draw();
   });
+  void readProject();
 
   const reports = async (fresh) => {
     s.answer = await fetchJson(`/api/terragucci${fresh ? "?fresh=1" : ""}`);
@@ -604,19 +1054,45 @@ export function startKiosk({ bar, frame, foot, side, main, views }, { fetchJson
     draw();
   };
 
+  // behold#571: a tool's latest cycle, read when its scenario stops being live, and while it has none yet.
+  let cycleRead = 0;
+  const readCycle = async () => {
+    cycleRead = now().getTime();
+    const a = await fetchJson(`/api/terragucci/cycles/${tool}`);
+    if (s.mode === "live") return; // its scenario started while the read was out
+    if (a && a.cycle) {
+      if (!s.replay || s.replay.cycle.cycle !== a.cycle.cycle) s.replay = { cycle: a.cycle, start: now().getTime(), at: null, banner: null, runs: null };
+      s.mode = "replay";
+      s.repo = a.cycle.repo;
+    } else if (a && a.absent) {
+      s.mode = "none";
+      s.replay = null;
+    } else {
+      s.mode = "error";
+      s.replay = null;
+      s.demo = { demo: null, error: a && a.error ? a.error : "The tool's latest cycle could not be read." };
+    }
+  };
+  const CYCLE_REREAD_MS = 60_000;
+
   const demo = async () => {
-    s.demo = await fetchJson("/api/terragucci/demo");
-    const d = s.demo && s.demo.demo;
-    if (d && d.scenario && typeof d.title === "string" && d.title) titles[d.scenario] = d.title;
-    if (d && d.scenario && scenarioName(d)) names[d.scenario] = scenarioName(d);
-    const key = d ? `${d.cycle}|${d.step}|${d.commit}|${d.pull}` : "";
-    if (key !== lastKey) {
-      lastKey = key;
-      // The step moved: the run it is about may be newer than what behold read.
-      const stage = d ? demoStage(d) : "none";
-      if (stage === "pull-request" || stage === "either") void reports(true);
-      if (stage === "apply" || stage === "either") void progress(true);
+    const live = await fetchJson("/api/terragucci/demo");
+    s.live = live;
+    if (!vendor) {
+      s.repo = live && live.demo ? live.demo.repo : null;
+      setDemo(live);
+      return draw();
+    }
+    const d = live && live.demo;
+    if (liveFor(d, tool, SCENARIOS)) {
+      s.mode = "live";
+      s.replay = null;
+      s.repo = d.repo || s.repo;
+      setDemo({ ...live, demo: scrubDemo(d, tool) });
+      return draw();
     }
+    // Not this tool's scenario: replay its latest cycle, read again when it went live and ended, or now and then.
+    if (s.mode === "live" || s.mode === "loading" || now().getTime() - cycleRead > CYCLE_REREAD_MS) await readCycle();
     draw();
   };
 
@@ -624,6 +1100,7 @@ export function startKiosk({ bar, frame, foot, side, main, views }, { fetchJson
   void reports(false);
   void progress(false);
   setInterval(() => void demo(), DEMO_POLL_MS);
+  setInterval(() => void readApproval(), 1000);
   setInterval(draw, 1000);
 
   if (typeof EventSource !== "undefined") {