@intentius/behold 0.29.0 → 0.29.2

package/web/kiosk.html

@@ -20,48 +20,117 @@
         --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       }
       * { box-sizing: border-box; }
-      html, body { margin: 0; background: var(--bg); color: var(--fg); font: 18px/1.45 var(--font-ui); }
-      #kiosk { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 3rem; display: grid; gap: 1.25rem; }
-      .k-kicker { font: 600 0.8rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
-      .k-title { margin: 0.2rem 0; font-size: 2rem; line-height: 1.2; }
-      .k-muted { color: var(--muted); margin: 0.25rem 0; }
-      section { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 1rem 1.25rem; }
-      .k-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
-      .k-stop { font: 0.85rem var(--font-mono); padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--muted); }
+      /* #569 step 3: one screen. The bar is the narration, the frame is
+         behold's own view of the change, the foot is the plan's facts. Sizes
+         follow the screen's width, so a TV reads it from across a room. */
+      html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: clamp(13px, 0.82vw, 20px)/1.4 var(--font-ui); overflow: hidden; }
+      body { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
+      /* #569: the pipeline's runs (left), the selected run's jobs, steps and
+         log (middle), behold's view of the change (right). */
+      #stage { display: grid; grid-template-columns: minmax(15em, 18%) minmax(26em, 34%) minmax(0, 1fr); min-height: 0; }
+      #runs-side { overflow-y: auto; border-right: 1px solid var(--rule); background: var(--panel); }
+      #runs-main { overflow: hidden; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--rule); }
+      .r-side-head { padding: 0.8em 1em 0.5em; }
+      .r-side-title { font-weight: 700; font-size: 1.05em; }
+      .r-side-note { color: var(--muted); font-size: 0.82em; margin-top: 0.15em; }
+      .r-runs { list-style: none; margin: 0; padding: 0 0 1em; }
+      .r-group { font: 600 0.72em var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0.7em 1em 0.25em; }
+      .r-run { display: grid; grid-template-columns: 1.2em 1fr; gap: 0.6em; padding: 0.5em 1em; cursor: pointer; border-left: 3px solid transparent; }
+      .r-run:hover { background: color-mix(in srgb, var(--active) 50%, transparent); }
+      .r-run.r-selected { background: var(--active); border-left-color: var(--focus); }
+      .r-run-title { font-weight: 600; line-height: 1.25; }
+      .r-run-place { color: var(--muted); font-size: 0.85em; }
+      .r-run-meta { display: flex; flex-wrap: wrap; gap: 0 0.7em; color: var(--muted); font-size: 0.8em; }
+      .r-icon { width: 1.15em; height: 1.15em; flex: none; margin-top: 0.15em; }
+      .r-ok { color: var(--managed); } .r-bad { color: var(--degraded); } .r-wait { color: var(--foreign); } .r-busy { color: var(--foreign); } .r-idle { color: var(--neutral); }
+      .r-word.r-idle { color: var(--muted); }
+      @media (prefers-reduced-motion: no-preference) { .r-spin { animation: r-spin 1s linear infinite; } }
+      @keyframes r-spin { to { transform: rotate(360deg); } }
+      .r-head { padding: 0.8em 1em 0.6em; border-bottom: 1px solid var(--rule); }
+      .r-head-title { display: flex; gap: 0.5em; align-items: center; font-weight: 700; font-size: 1.15em; }
+      .r-head-title .r-icon { margin: 0; }
+      .r-head-sub { color: var(--fg); font-size: 0.88em; margin-top: 0.15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .r-head-meta { color: var(--muted); font-size: 0.82em; }
+      .r-label { font: 600 0.7em var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0.6em 1em 0; }
+      .r-jobs { list-style: none; margin: 0; padding: 0.3em 0 0.5em; border-bottom: 1px solid var(--rule); }
+      .r-job { display: flex; gap: 0.5em; align-items: center; padding: 0.22em 1em 0.22em calc(1em + var(--depth, 0) * 0.9em); cursor: pointer; }
+      .r-job .r-icon { margin: 0; }
+      .r-job.r-selected { background: var(--active); }
+      .r-job-name { font: 600 0.92em var(--font-mono); }
+      .r-job-needs { color: var(--muted); font-size: 0.78em; }
+      .r-dur { margin-left: auto; color: var(--muted); font-size: 0.8em; white-space: nowrap; }
+      .r-job-skipped { color: var(--muted); font-size: 0.78em; cursor: default; }
+      .r-steps { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow-y: auto; padding-bottom: 0.5em; }
+      .r-steps-head { display: flex; gap: 0.5em; align-items: center; padding: 0.3em 1em 0.3em; }
+      .r-steps-head .r-icon { margin: 0; }
+      .r-steps-job { font: 700 0.95em var(--font-mono); }
+      .r-steps-word { color: var(--muted); font-size: 0.85em; }
+      .r-step-line { display: flex; gap: 0.45em; align-items: center; padding: 0.2em 1em; cursor: pointer; }
+      .r-step-line .r-icon { margin: 0; width: 1em; height: 1em; }
+      .r-caret { color: var(--muted); width: 0.8em; font-size: 0.8em; }
+      .r-step-name { font-size: 0.88em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .r-open > .r-step-line { background: color-mix(in srgb, var(--active) 60%, transparent); }
+      .r-log { margin: 0.2em 0.6em 0.4em 1.6em; padding: 0.5em 0; background: var(--well); border-radius: 6px; font: 0.76em/1.45 var(--font-mono);
+        white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; max-height: 52vh; min-height: 6em; }
+      .r-log-line { display: grid; grid-template-columns: 3.2em 1fr; gap: 0.8em; padding: 0 0.8em 0 0; }
+      .r-ln { color: var(--muted); text-align: right; user-select: none; opacity: 0.7; }
+      .r-log-cut { color: var(--muted); padding: 0 0.8em 0.2em 4em; font-style: italic; }
+      .r-log-live { color: var(--foreign); padding-left: 4em; }
+      @media (prefers-reduced-motion: no-preference) { .r-log-live { animation: r-blink 1s steps(2) infinite; } }
+      @keyframes r-blink { 50% { opacity: 0; } }
+      .r-note { color: var(--muted); padding: 0 1em; font-size: 0.88em; }
+      #bar { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6em; align-items: start;
+        padding: 0.7em 1.4em 0.7em; background: var(--panel); border-bottom: 1px solid var(--rule); }
+      #bar > .k-empty { grid-column: 1 / -1; }
+      .k-kicker { display: flex; gap: 1.2em; font: 600 0.78em var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
+      .k-cycle { text-transform: none; letter-spacing: 0; font-weight: 400; }
+      .k-title { margin: 0.05em 0 0.25em; font-size: 1.45em; line-height: 1.15; }
+      .k-muted { color: var(--muted); margin: 0.25em 0; }
+      .k-step { border-left: 4px solid var(--pending); padding: 0.1em 0 0.1em 0.8em; }
+      .k-step-word { font: 600 0.75em var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
+      .k-label { font-size: 1.02em; margin: 0.1em 0 0; }
+      .k-step-waiting { border-left-color: var(--foreign); }
+      .k-step-failed, .k-step-stalled { border-left-color: var(--degraded); }
+      .k-step-applied { border-left-color: var(--managed); }
+      .k-step-reset { border-left-color: var(--neutral); }
+      .k-right { display: grid; gap: 0.6em; align-content: start; }
+      .k-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35em; padding: 0; margin: 0; }
+      .k-stop { font: 0.82em var(--font-mono); padding: 0.25em 0.7em; border-radius: 999px; border: 1px solid var(--rule); color: var(--muted); }
       .k-done { color: var(--fg); border-color: var(--managed); }
       .k-current { color: var(--bg); background: var(--pending); border-color: var(--pending); font-weight: 600; }
       .k-failed { color: var(--bg); background: var(--degraded); border-color: var(--degraded); font-weight: 600; }
-      .k-label { font-size: 1.35rem; margin: 0.4rem 0 0; }
-      .k-step-waiting { border-color: var(--foreign); }
-      .k-step-failed, .k-step-stalled { border-color: var(--degraded); }
-      .k-step-applied { border-color: var(--managed); }
-      .k-next-line { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; margin: 0.4rem 0 0; font-size: 1.2rem; }
+      .k-next { display: flex; flex-wrap: wrap; gap: 0.3em 0.8em; align-items: baseline; font-size: 1.05em; }
+      .k-next-word { font: 600 0.72em var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
       .k-action { font-family: var(--font-mono); }
       .k-when { color: var(--foreign); font-family: var(--font-mono); }
-      .k-approve { margin-top: 0.75rem; }
-      .k-command { display: block; padding: 0.6rem 0.8rem; background: var(--well); border-radius: 6px; font: 0.95rem var(--font-mono); overflow-wrap: anywhere; user-select: none; }
-      .k-read { font-family: var(--font-mono); font-size: 0.95rem; margin: 0.3rem 0; }
+      .k-approve { border-left: 4px solid var(--foreign); padding-left: 0.8em; }
+      .k-approve p { margin: 0.15em 0; }
+      .k-approve-head, .k-approve-then { color: var(--muted); font-size: 0.92em; }
+      .k-command { display: block; margin: 0.25em 0; padding: 0.45em 0.7em; background: var(--well); border-radius: 6px; font: 0.88em var(--font-mono); overflow-wrap: anywhere; user-select: none; }
+      .k-inline { font-family: var(--font-mono); color: var(--fg); background: var(--well); padding: 0.05em 0.35em; border-radius: 4px; user-select: none; }
+      .k-note { color: var(--muted); margin: 0; font-size: 0.92em; }
       .k-unknown { color: var(--foreign); }
-      .k-unreviewed { margin: 0.4rem 0; padding-left: 0.6rem; border-left: 3px solid var(--foreign); }
-      .k-waves { list-style: none; padding: 0; margin: 0.6rem 0; display: grid; gap: 0.5rem; }
-      .k-wave { border: 1px solid var(--rule); border-left-width: 4px; border-radius: 6px; padding: 0.5rem 0.8rem; background: var(--bg); }
-      .k-wave-title { font-family: var(--font-mono); }
-      .k-wave-fact { color: var(--muted); font-size: 0.9rem; }
-      .k-tone-ok { border-left-color: var(--managed); }
-      .k-tone-wave { border-left-color: var(--foreign); }
-      .k-tone-failed { border-left-color: var(--degraded); }
-      .k-tone-plan { border-left-color: var(--pending); }
-      .k-tone-none { border-left-color: var(--neutral); }
-      .k-foot { font-size: 0.8rem; }
+      #view { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
+      #foot { display: flex; flex-wrap: wrap; gap: 0.2em 1.6em; padding: 0.55em 1.6em; border-top: 1px solid var(--rule); background: var(--panel); font-size: 0.85em; }
+      .k-legend { color: var(--muted); flex-basis: 100%; }
+      .k-fact { color: var(--fg); }
+      .k-source { color: var(--muted); margin-left: auto; }
+      @media (max-width: 900px) { #bar { grid-template-columns: 1fr; } #stage { grid-template-columns: 1fr; } }
     </style>
   </head>
   <body>
-    <main id="kiosk" aria-live="polite"></main>
+    <header id="bar" aria-live="polite"></header>
+    <div id="stage">
+      <nav id="runs-side" aria-label="pipeline runs"></nav>
+      <section id="runs-main" aria-live="polite"></section>
+      <iframe id="view" title="behold's view of the change"></iframe>
+    </div>
+    <footer id="foot"></footer>
     <script type="module">
       import { initTheme } from "/theme.js";
       import { startKiosk } from "/kiosk.js";
       initTheme();
-      startKiosk(document.getElementById("kiosk"));
+      startKiosk({ bar: document.getElementById("bar"), frame: document.getElementById("view"), foot: document.getElementById("foot"), side: document.getElementById("runs-side"), main: document.getElementById("runs-main") });
     </script>
   </body>
 </html>

package/web/kiosk.js

@@ -1,4 +1,5 @@
-// #569 step 2: the kiosk. A looping terragucci demo (terragucci#1014),
+// #569 step 2: the kiosk. #569 step 3: a status bar over behold's own view of
+// the change, framed (`/?embed=1&bare=1`), moved to the roots each step is about. A looping terragucci demo (terragucci#1014),
 // narrated from the demo.json its driver writes at every step, beside the
 // newest run: the pull request's plan before the merge, the run view's waves
 // from the merge on, and back to the start when the loop resets.
@@ -12,7 +13,8 @@
 // A wave that failed says which waves applied before it and stay applied.
 // Nothing here is all-or-nothing, and nothing says so.
 
-import { STATE_WORDS, costLine, readEdges, readLine, totalsLine, waveRows, blastRows } from "./terragucci-change.js";
+import { startRuns } from "./kiosk-runs.js";
+import { STATE_WORDS, changingRoots, costLine, 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. */
 export const SCENARIOS = {
@@ -198,13 +200,92 @@ export function pendingApproval(demo, progress) {
   return {
     wave: number,
     digest: w && w.digest ? w.digest : null,
-    roots: w ? w.roots : [],
+    // #569 review: only the roots whose plan the approval covers a change in.
+    roots: w ? changingRoots(w, [...new Set([...w.roots, ...(w.composed ? w.composed.roots : [])])]) : [],
     ...driverApproveLines(number, demo.pull),
   };
 }
 
+/**
+ * #569: the roots the step is about, for the framed view to bring forward:
+ * the pull request's roots while it is planned; from the merge on, the wave
+ * that is waiting, applying, failed or refused (its roots and, for a composed
+ * run, every root in it; for a failed or refused wave, the roots of the waves
+ * before it that applied, which stay applied); nothing in particular once applied or reset, so the
+ * whole picture shows. Null brings nothing forward.
+ */
+export function focusRoots(demo, answer, progress) {
+  if (!demo) return null;
+  const stage = demoStage(demo);
+  if (stage === "none" || demo.step === "applied") return null;
+  if (stage === "pull-request") {
+    const pr = matchingPull(answer, demo);
+    return pr && pr.roots && pr.roots.length ? [...pr.roots] : null;
+  }
+  const run = matchingRun(progress, demo);
+  if (!run) {
+    const pr = matchingPull(answer, demo);
+    return pr && pr.roots && pr.roots.length ? [...pr.roots] : null;
+  }
+  const order = ["failed", "refused", "waiting", "applying"];
+  for (const want of order) {
+    const w = progress.states.find((x) => x.state === want);
+    if (!w) continue;
+    const inRun = progress.reads.filter((r) => r.composed && r.composed.wave === w.number).map((r) => r.root);
+    // A wave that failed or refused: the waves before it that applied too, since they stay applied.
+    const before = want === "failed" || want === "refused" ? progress.states.filter((x) => x.number < w.number && x.state === "applied").flatMap((x) => changingRoots(x, x.roots)) : [];
+    // A root its wave plans no change in is not what the step is about.
+    const roots = [...new Set([...changingRoots(w, [...w.roots, ...(w.composed ? w.composed.roots : []), ...inRun]), ...before])];
+    if (roots.length) return roots;
+  }
+  return null;
+}
+
+/**
+ * #569: which run the framed view draws for this step, so the graph stays on
+ * the cycle the narration describes while the loop's next runs (the reset's
+ * push back to the base) already go:
+ *
+ * - before the merge, `none`: no run view, the pull request's plan;
+ * - from the merge to `applied`, the cycle's commit (demo.json's `commit`:
+ *   the merge, whose run view the `/terragucci apply` resume rewrites, or
+ *   scenario 5's push);
+ * - at `reset`, and on the base, `base`: nothing in flight.
+ *
+ * Never the reset's or the base's run while the step is before `reset`.
+ */
+export function runPin(demo) {
+  if (!demo) return null;
+  if (demo.scenario === "base" || demo.step === "reset") return "base";
+  if (demo.step === "pull-request" || demo.step === "planned") return "none";
+  if (demo.step === "stalled") return demo.commit ? demo.commit : "none";
+  return demo.commit || "none";
+}
+
+/** The framed view's address: behold's own page, bare, at the resources zoom, told who its host is. */
+export function frameSrc(origin) {
+  const q = new URLSearchParams({ embed: "1", bare: "1", zoom: "resources", host: origin });
+  return `/?${q.toString()}`;
+}
+
+/** The one-line facts under the view: the pull request's totals, cost and blast radius, as #568 has them. */
+export function factLines(demo, answer) {
+  const pr = demo ? matchingPull(answer, demo) : null;
+  if (!pr) return [];
+  const out = [];
+  const totals = totalsLine(pr.totals);
+  if (totals) out.push(`pull request #${pr.run.pull_request} changes ${rootsCount(pr.totals_roots) || "across roots"}: ${totals}`);
+  const b = blastRows(answer);
+  if (b && b.changed.length) out.push(`blast radius: ${b.changed.join(", ")}${b.downstream.length ? `; downstream, nearest first: ${b.downstream.join(", ")}` : ""}`);
+  if (b && b.unplanned.length) out.push(`not touched: ${b.unplanned.join(", ")}`);
+  const cost = costLine(pr.cost);
+  if (cost) out.push(cost);
+  return out;
+}
+
 // ---------------------------------------------------------------------------
-// The page.
+// The page: a status bar over behold's own view in a frame, and a line of
+// facts under it. The bar is the narration; the frame shows the change.
 
 const el = (tag, cls, text) => {
   const n = document.createElement(tag);
@@ -213,101 +294,72 @@ const el = (tag, cls, text) => {
   return n;
 };
 
-/** Draw everything from what the kiosk holds. Pure over its arguments, but for the DOM. */
-export function renderKiosk(root, s, now = new Date()) {
-  root.replaceChildren();
+/** 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();
   if (!s.demo || !s.demo.demo) {
-    const box = el("section", "k-empty");
+    const box = el("div", "k-empty");
     box.appendChild(el("h1", "k-title", "Waiting for the demo"));
     box.appendChild(el("p", "k-muted", s.demo ? s.demo.error || s.demo.absent : "Reading demo.json…"));
-    root.appendChild(box);
+    bar.appendChild(box);
     return;
   }
   const demo = s.demo.demo;
   const head = scenarioHead(demo);
 
-  const top = el("header", "k-head");
-  top.appendChild(el("div", "k-kicker", head.kicker));
-  top.appendChild(el("h1", "k-title", head.title));
-  top.appendChild(el("div", "k-muted", cycleWords(demo, now)));
-  root.appendChild(top);
-
+  const left = el("div", "k-left");
+  const kick = el("div", "k-kicker");
+  kick.append(el("span", null, head.kicker), el("span", "k-cycle", cycleWords(demo, now)));
+  left.appendChild(kick);
+  left.appendChild(el("h1", "k-title", head.title));
+  const said = el("div", `k-step k-step-${demo.step}`);
+  said.appendChild(el("span", "k-step-word", STEP_WORDS[demo.step] || demo.step));
+  said.appendChild(el("p", "k-label", demo.label));
+  left.appendChild(said);
+  bar.appendChild(left);
+
+  const right = el("div", "k-right");
   const strip = el("ol", "k-strip");
-  for (const stop of stripStops(demo.step)) {
-    const li = el("li", `k-stop k-${stop.state}`, stop.words);
-    strip.appendChild(li);
-  }
-  root.appendChild(strip);
-
-  const step = el("section", `k-step k-step-${demo.step}`);
-  step.appendChild(el("div", "k-kicker", STEP_WORDS[demo.step] || demo.step));
-  step.appendChild(el("p", "k-label", demo.label));
-  root.appendChild(step);
+  for (const stop of stripStops(demo.step)) strip.appendChild(el("li", `k-stop k-${stop.state}`, stop.words));
+  right.appendChild(strip);
 
   const nx = nextWords(demo, now);
-  const next = el("section", "k-next");
-  next.appendChild(el("div", "k-kicker", "next, by the driver"));
-  const line = el("p", "k-next-line");
-  line.appendChild(el("span", "k-action", nx.action));
-  line.appendChild(el("span", "k-when", nx.when));
-  next.appendChild(line);
+  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(el("span", "k-when", nx.when));
+  right.appendChild(next);
+
   const appr = pendingApproval(demo, s.progress);
   if (appr) {
     const a = el("div", "k-approve");
     a.appendChild(
       el(
         "p",
-        "k-muted",
-        `The driver approves wave ${appr.wave}${appr.roots.length ? ` (${appr.roots.join(", ")})` : ""} ${nx.secs === null ? "next" : nx.when}, signed with its own key. It runs:`,
+        "k-approve-head",
+        `The driver approves wave ${appr.wave}${appr.roots.length ? ` (${appr.roots.join(", ")})` : ""}, signed with its own key${appr.digest ? `, for the plan ${appr.digest.replace(/^jcs1-sha256:/, "").slice(0, 12)}` : ""}:`,
       ),
     );
     a.appendChild(el("code", "k-command", appr.approve));
-    a.appendChild(el("p", "k-muted", appr.digest ? `The plan it approves: ${appr.digest}` : "The plan it approves: the run view names no digest for this wave yet."));
-    a.appendChild(el("p", "k-muted", `Then it comments on ${appr.on}, so the waves run again:`));
-    a.appendChild(el("code", "k-command", appr.comment));
-    next.appendChild(a);
-  }
-  root.appendChild(next);
-
-  const panel = runPanel(demo, s.answer, s.progress);
-  const runBox = el("section", "k-run");
-  if (panel.note) {
-    runBox.appendChild(el("div", "k-kicker", panel.stage === "pull-request" ? "the pull request's plan" : panel.stage === "apply" ? "the waves" : "the run"));
-    runBox.appendChild(el("p", "k-muted", panel.note));
-  } else if (panel.stage === "pull-request") {
-    runBox.appendChild(el("div", "k-kicker", `the plan of pull request #${panel.pr.run.pull_request}, commit ${panel.pr.run.commit.slice(0, 8)}`));
-    const rows = pullRows(s.answer);
-    for (const e of rows.reads) runBox.appendChild(el("p", e.unknown.length ? "k-read k-unknown" : "k-read", readLine(e)));
-    for (const u of unreviewedLines(s.answer)) runBox.appendChild(el("p", "k-unreviewed", u));
-    runBox.appendChild(waveList(rows.waves));
-    const totals = totalsLine(panel.pr.totals);
-    if (totals) runBox.appendChild(el("p", "k-muted", `totals across roots: ${totals}`));
-    const cost = costLine(panel.pr.cost);
-    if (cost) runBox.appendChild(el("p", "k-muted", cost));
-    const b = blastRows(s.answer);
-    if (b && b.downstream.length) runBox.appendChild(el("p", "k-muted", `blast radius, nearest first: ${b.downstream.join(", ")}`));
-    if (b && b.unplanned.length) runBox.appendChild(el("p", "k-muted", `not planned by this pull request: ${b.unplanned.join(", ")}`));
+    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 {
-    runBox.appendChild(el("div", "k-kicker", `the waves of ${panel.run.commit.slice(0, 8)}`));
-    runBox.appendChild(waveList(runRows(s.progress)));
+    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));
   }
-  root.appendChild(runBox);
-
-  const foot = el("footer", "k-foot k-muted");
-  foot.textContent = `narration read ${clockOf(s.demo.read)} from ${s.demo.source}${demo.pull !== null ? ` · pull request #${demo.pull}` : ""}${demo.commit ? ` · commit ${demo.commit.slice(0, 8)}` : ""}`;
-  root.appendChild(foot);
-}
+  bar.appendChild(right);
 
-function waveList(rows) {
-  const ol = el("ol", "k-waves");
-  for (const w of rows) {
-    const li = el("li", `k-wave k-tone-${w.tone}`);
-    li.dataset.state = w.state;
-    li.appendChild(el("div", "k-wave-title", w.text));
-    for (const f of w.facts) li.appendChild(el("div", "k-wave-fact", f));
-    ol.appendChild(li);
+  if (foot) {
+    foot.appendChild(el("span", "k-legend", "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."));
+    for (const f of factLines(demo, s.answer)) foot.appendChild(el("span", "k-fact", f));
+    foot.appendChild(
+      el("span", "k-source", `narration read ${clockOf(s.demo.read)} from ${s.demo.source}${demo.pull !== null ? ` · pull request #${demo.pull}` : ""}${demo.commit ? ` · commit ${demo.commit.slice(0, 8)}` : ""} · nothing here writes`),
+    );
   }
-  return ol;
 }
 
 const clockOf = (iso) => {
@@ -319,21 +371,57 @@ const clockOf = (iso) => {
 export const DEMO_POLL_MS = 3_000;
 
 /**
- * Boot the kiosk into `root`: ask demo.json every few seconds, the reports
- * and the run view when the step, cycle or commit moves or the event stream
- * says they did, and redraw every second for the countdown.
+ * Boot the kiosk: the bar, the frame and the foot. Ask demo.json every few
+ * seconds, the reports and the run view when the step, cycle or commit moves
+ * or the event stream says they did, and redraw every second for the
+ * 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(root, { fetchJson = defaultFetch, now = () => new Date() } = {}) {
+export function startKiosk({ bar, frame, foot, side, main }, { fetchJson = defaultFetch, now = () => new Date(), origin = location.origin } = {}) {
   const s = { demo: null, answer: null, progress: null };
   let lastKey = "";
-  const draw = () => renderKiosk(root, s, now());
+  let lastFocus;
+  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);
+    const focus = roots ? roots.join(",") : null;
+    const run = runPin(d);
+    const key = `${focus}|${run}`;
+    if (!force && key === lastFocus) return;
+    lastFocus = key;
+    if (frame && frame.contentWindow) frame.contentWindow.postMessage({ type: "behold:view", member: null, focus, run }, origin);
+  };
+  const draw = () => {
+    renderKiosk(bar, s, now(), foot);
+    tellFrame(false);
+  };
+  // #569: the pipeline's runs beside the view, CI-page style.
+  if (side && main) startRuns({ side, main }, { fetchJson, now, scenarios: SCENARIOS });
+  if (frame) {
+    frame.src = frameSrc(origin);
+    // 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 reports = async (fresh) => {
     s.answer = await fetchJson(`/api/terragucci${fresh ? "?fresh=1" : ""}`);
     draw();
   };
+  // #569: the run view of the cycle's commit, the same one the frame draws.
+  const pinnedCommit = () => {
+    const pin = runPin(s.demo && s.demo.demo);
+    return pin && pin !== "none" && pin !== "base" ? pin : null;
+  };
   const progress = async (fresh) => {
-    s.progress = await fetchJson(`/api/terragucci/progress${fresh ? "?fresh=1" : ""}`);
+    const pin = pinnedCommit();
+    const q = new URLSearchParams();
+    if (pin) q.set("commit", pin);
+    if (fresh) q.set("fresh", "1");
+    const qs = q.toString();
+    s.progress = await fetchJson(`/api/terragucci/progress${qs ? `?${qs}` : ""}`);
     draw();
   };
 
@@ -362,8 +450,14 @@ export function startKiosk(root, { fetchJson = defaultFetch, now = () => new Dat
     es.addEventListener("reports", () => void reports(false));
     es.addEventListener("progress", (e) => {
       try {
-        s.progress = JSON.parse(e.data);
-        draw();
+        const pushed = JSON.parse(e.data);
+        const pin = pinnedCommit();
+        const c = pushed && pushed.run && pushed.run.commit;
+        // The pushed view is the newest run's: take it only when it is the cycle's.
+        if (!pin || (c && (c.startsWith(pin) || pin.startsWith(c)))) {
+          s.progress = pushed;
+          draw();
+        } else void progress(true);
       } catch {
         void progress(false);
       }

package/web/kiosk.test.js

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import { focusRoots, frameSrc, factLines, pendingApproval, runPin } from "./kiosk.js";
+
+const demo = (step, extra = {}) => ({ cycle: 1, scenario: "a-output", title: "t", step, label: "", started_at: "2026-10-15T03:00:00Z", next: null, pull: 7, commit: "abc12345", ...extra });
+const answer = {
+  roots: ["app", "edge", "network", "other"].map((name) => ({ member: "demo", name, path: name })),
+  pull_request: { run: { pull_request: "7", commit: "abc12345" }, roots: ["app", "edge", "network"], reads: [], waves: [], totals: { update: 3 }, totals_roots: 3, blast: { roots: ["app", "edge", "network"], downstream: [] } },
+};
+const progress = (states, reads = []) => ({ run: { present: true, commit: "abc12345", updated: "2026-10-15T03:05:00Z" }, states, reads });
+
+describe("focusRoots (#569)", () => {
+  it("brings the pull request's roots forward while it is planned", () => {
+    expect(focusRoots(demo("planned"), answer, null)).toEqual(["app", "edge", "network"]);
+  });
+  it("brings the wave that waits, applies or failed forward, and nothing once applied", () => {
+    const p = progress([
+      { number: 1, state: "applied", roots: ["network", "other"], reads: [] },
+      { number: 2, state: "waiting", roots: ["app"], reads: [1] },
+    ]);
+    expect(focusRoots(demo("waiting"), answer, p)).toEqual(["app"]);
+    expect(focusRoots(demo("applied"), answer, p)).toBe(null);
+    expect(focusRoots(demo("reset"), answer, p)).toBe(null);
+  });
+  it("brings a failed wave forward with the waves before it that stay applied", () => {
+    const p = progress([
+      { number: 1, state: "applied", roots: ["network", "other"], reads: [] },
+      { number: 2, state: "failed", roots: ["app"], reads: [1] },
+      { number: 3, state: "not-started", roots: ["edge"], reads: [2] },
+    ]);
+    expect(focusRoots(demo("failed"), answer, p)).toEqual(["app", "network", "other"]);
+  });
+  it("leaves a root its wave plans no change in out (#569 review)", () => {
+    const p = progress([{ number: 1, state: "waiting", roots: ["network", "other"], reads: [], digest: "d", totals: { create: 1 }, changed: ["network"] }]);
+    expect(focusRoots(demo("waiting"), answer, p)).toEqual(["network"]);
+    expect(pendingApproval(demo("waiting", { next: { action: "approve wave-1", at: null } }), p).roots).toEqual(["network"]);
+  });
+  it("takes every root of a composed run", () => {
+    const p = progress([{ number: 1, state: "applying", roots: ["network"], reads: [], composed: { roots: ["network", "app", "edge"] } }]);
+    expect(focusRoots(demo("applying"), answer, p)).toEqual(["network", "app", "edge"]);
+  });
+});
+
+describe("frameSrc (#569)", () => {
+  it("frames behold's own view, bare, told its host", () => {
+    expect(frameSrc("http://localhost:4700")).toBe("/?embed=1&bare=1&zoom=resources&host=http%3A%2F%2Flocalhost%3A4700");
+  });
+});
+
+describe("factLines (#569)", () => {
+  it("says the pull request's totals and blast radius", () => {
+    expect(factLines(demo("planned"), answer)).toEqual(["pull request #7 changes across 3 roots: 3 update", "blast radius: app, edge, network", "not touched: other"]);
+  });
+});
+
+describe("runPin: the frame stays on the cycle's run (#569)", () => {
+  it("draws the pull request's plan, then the cycle's commit up to applied, then the base", () => {
+    expect(runPin(demo("pull-request"))).toBe("none");
+    expect(runPin(demo("planned"))).toBe("none");
+    for (const step of ["merged", "applying", "waiting", "approved", "failed", "resumed", "applied"]) expect(runPin(demo(step))).toBe("abc12345");
+    expect(runPin(demo("reset"))).toBe("base");
+    expect(runPin(demo("applied", { scenario: "base" }))).toBe("base");
+    expect(runPin(demo("stalled", { commit: null }))).toBe("none");
+    expect(runPin(null)).toBe(null);
+  });
+});