@intentius/behold 0.29.7 → 0.29.9

package/web/kiosk.js

@@ -13,8 +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, notRunRepo, 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. */
@@ -68,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)) {
@@ -336,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()}`;
 }
 
@@ -399,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. */
@@ -475,40 +487,75 @@ const elRoots = (tag, cls, text, s) => {
 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, { graph: !!s.notRunGraph });
+    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), elRoots("dd", "k-about-text", r.text, s));
-    left.appendChild(card);
+    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), elRoots("span", "k-label", demo.label, s));
-  left.appendChild(said);
+  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);
@@ -516,28 +563,120 @@ export function renderKiosk(bar, s, now = new Date(), foot = null) {
   next.appendChild(el("span", "k-next-word", "next, by the driver"));
   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(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(elRoots("p", "k-note", panel.note, s));
-    else if (panel.stage === "pull-request") for (const u of unreviewedLines(s.answer)) right.appendChild(elRoots("p", "k-note k-unknown", u, s));
+    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(elRoots("span", "k-fact", f, s));
+    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);
   }
 }
 
@@ -545,6 +684,22 @@ export function renderKiosk(bar, s, now = new Date(), foot = null) {
 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;
 
@@ -555,17 +710,53 @@ 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 } = {}) {
+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 = () => {
+    if (!vendor) return true;
+    // Before the tool's first cycle: its repo's checkout, when this behold serves it.
+    if (s.mode === "none") return !!notRunRepo(tool, s.viewRepos) && s.aimed === notRunRepo(tool, s.viewRepos);
+    return 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) || (vendor && s.mode === "none" ? notRunRepo(tool, s.viewRepos) : null);
+  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() });
   const tellFrame = (force) => {
-    const d = s.demo && s.demo.demo;
-    if (!d) return; // nothing said yet: the frame keeps its default until the narration is read
-    const roots = focusRoots(d, s.answer, s.progress);
+    // behold#571: before the tool's first cycle the frame draws its repo on the base, with nothing in flight.
+    const notRun = !!vendor && s.mode === "none";
+    const d = notRun ? null : s.demo && s.demo.demo;
+    if (!d && !notRun) return; // nothing said yet: the frame keeps its default until the narration is read
+    const roots = d ? focusRoots(d, s.answer, s.progress) : null;
     const focus = roots ? roots.join(",") : null;
-    const run = runPin(d);
+    const run = d ? runPin(d) : "base";
     const zoom = viewZoom(shownView().view);
     const key = `${focus}|${run}|${zoom}`;
     if (!force && key === lastFocus) return;
@@ -626,39 +817,235 @@ export function startKiosk({ bar, frame, foot, side, main, views }, { fetchJson
       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.notRunGraph = !!vendor && s.mode === "none" && 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);
+      // Before the tool's first cycle there are no runs and no log: those panes fold away, and the graph (when there is one) takes the width.
+      document.body.classList.toggle("k-notyet", !!vendor && s.mode === "none");
+    }
     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, roots: rootList, waves: () => s.waves, light: () => s.light });
+
+  // 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" : ""}`);
@@ -679,19 +1066,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();
   };
 
@@ -699,6 +1112,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") {