@intentius/behold 0.29.5 → 0.29.7

package/web/kiosk-roots.test.js

@@ -0,0 +1,95 @@
+import { describe, expect, it } from "vitest";
+import { ROOT_HUES, cssString, hoverCss, hoverFromMessage, hoverLinks, hoverMessage, isLightBg, rootColour, rootOrder, rootSegments, rootsOfWave, waveOfJob } from "./kiosk-roots.js";
+
+// behold#571: the demo repo's roots and the wave jobs of its terragucci.components.json.
+const ROOTS = ["network", "other", "app", "edge"];
+const WAVES = [
+  { job: "apply-wave-1", wave: 1, roots: ["network", "other"] },
+  { job: "apply-wave-2", wave: 2, roots: ["app"] },
+  { job: "apply-wave-3", wave: 3, roots: ["edge"] },
+];
+const names = (text) => rootSegments(text, ROOTS).filter((s) => s.root).map((s) => s.root);
+
+describe("a colour per root (behold#571)", () => {
+  it("follows the sorted root list, so it is the same on every cycle and in any order", () => {
+    expect(rootOrder(ROOTS)).toEqual(["app", "edge", "network", "other"]);
+    const a = Object.fromEntries(ROOTS.map((r) => [r, rootColour(r, ROOTS)]));
+    const b = Object.fromEntries(ROOTS.map((r) => [r, rootColour(r, [...ROOTS].reverse())]));
+    expect(a).toEqual(b);
+    expect(a.app).toBe(ROOT_HUES.dark[0]);
+    expect(new Set(Object.values(a)).size).toBe(4);
+    expect(rootColour("app", ROOTS, { light: true })).toBe(ROOT_HUES.light[0]);
+    expect(rootColour("nope", ROOTS)).toBeNull();
+  });
+
+  it("uses no state colour: not the green, amber, red, blue or teal of the theme", () => {
+    const state = ["#a6e3a1", "#f9e2af", "#f38ba8", "#89b4fa", "#94e2d5", "#6d7187"];
+    for (const hue of [...ROOT_HUES.dark, ...ROOT_HUES.light]) expect(state).not.toContain(hue.toLowerCase());
+    expect(new Set(ROOT_HUES.dark).size).toBe(ROOT_HUES.dark.length);
+    expect(new Set(ROOT_HUES.light).size).toBe(ROOT_HUES.light.length);
+  });
+
+  it("tells a light background from a dark one", () => {
+    expect(isLightBg("#ffffff")).toBe(true);
+    expect(isLightBg(" #1e1e2e")).toBe(false);
+    expect(isLightBg("")).toBe(false);
+  });
+});
+
+describe("root names in a line (behold#571)", () => {
+  it("finds whole-word names, possessives and names in brackets, and keeps the line's text", () => {
+    const line = "app reads subnet_id from network, known only after network applies: the review does not show the value app gets.";
+    expect(names(line)).toEqual(["app", "network", "network", "app"]);
+    expect(rootSegments(line, ROOTS).map((s) => s.text).join("")).toBe(line);
+    expect(names("approves wave 2 (app) with network's key")).toEqual(["app", "network"]);
+    expect(names("app: Plan: 0 to add, 1 to change, 0 to destroy.")).toEqual(["app"]);
+  });
+
+  it("leaves names inside addresses, hosts, URLs, paths, hashes and longer words alone", () => {
+    expect(names("terraform_data.app_x and data.terraform_remote_state.network")).toEqual([]);
+    expect(names("upstream http://app:9080 and app:8070")).toEqual([]);
+    expect(names("report copied to demo/forgejo:3000/terragucci-admin/demo/2026/10/ef95/tf-apply-wave-1")).toEqual([]);
+    expect(names("set digest jcs1-sha256:0accc105ba06 and commit a1b2c3d4e5")).toEqual([]);
+    expect(names("apply-wave-2 appliance networks edge-proxy network.tfstate")).toEqual([]);
+    expect(names("key=network")).toEqual([]);
+  });
+
+  it("says nothing without roots", () => {
+    expect(rootSegments("network", [])).toEqual([{ text: "network" }]);
+    expect(rootSegments("", ROOTS)).toEqual([]);
+  });
+});
+
+describe("hover links between the panes (behold#571)", () => {
+  it("ties a wave's job to its roots, from the declared jobs or the job's name", () => {
+    expect(waveOfJob("apply-wave-2", WAVES)).toBe(2);
+    expect(waveOfJob("apply-wave-7", [])).toBe(7);
+    expect(waveOfJob("check", WAVES)).toBeNull();
+    expect(rootsOfWave(1, WAVES)).toEqual(["network", "other"]);
+    expect(rootsOfWave(9, WAVES)).toEqual([]);
+  });
+
+  it("lights a root's mentions and its wave, and a wave's job and its roots", () => {
+    expect(hoverLinks({ root: "other" }, WAVES)).toEqual({ roots: ["other"], waves: [1] });
+    expect(hoverLinks({ wave: 1 }, WAVES)).toEqual({ roots: ["network", "other"], waves: [1] });
+    expect(hoverLinks({ root: "lonely" }, WAVES)).toEqual({ roots: ["lonely"], waves: [] });
+    expect(hoverLinks(null, WAVES)).toEqual({ roots: [], waves: [] });
+  });
+
+  it("carries a hover between the frame and the kiosk as a message, and takes only that message", () => {
+    expect(hoverMessage({ root: "app" })).toEqual({ type: "behold:hover", root: "app", wave: null });
+    expect(hoverMessage(null)).toEqual({ type: "behold:hover", root: null, wave: null });
+    expect(hoverFromMessage(hoverMessage({ wave: 2 }))).toEqual({ wave: 2 });
+    expect(hoverFromMessage(hoverMessage({ root: "app" }))).toEqual({ root: "app" });
+    expect(hoverFromMessage(hoverMessage(null))).toBeNull();
+    expect(hoverFromMessage({ type: "behold:view" })).toBeUndefined();
+    expect(hoverFromMessage("behold:hover")).toBeUndefined();
+  });
+
+  it("writes one rule for what a hover lights, quoting names", () => {
+    const css = hoverCss(hoverLinks({ wave: 2 }, WAVES), { root: (r) => `.k-root[data-k-root=${cssString(r)}]`, wave: (w) => `.r-job[data-k-wave="${w}"]` }, "outline: 1px solid");
+    expect(css).toBe('.k-root[data-k-root="app"],\n.r-job[data-k-wave="2"] { outline: 1px solid }');
+    expect(hoverCss({ roots: [], waves: [] }, { root: () => "x", wave: () => "y" }, "z")).toBe("");
+    expect(cssString('a"b')).toBe('"a\\"b"');
+  });
+});

package/web/kiosk-runs.js

@@ -10,6 +10,8 @@
 // A job held at a terragucci gate is `waiting`: it waits for an approval, and
 // is never drawn as a failure. Step names are shown as the driver wrote them.
 
+import { rootColour, rootSegments, rootText, rootsOfWave, waveOfJob } from "./kiosk-roots.js";
+
 /** The run, job and step statuses, as a viewer reads them. */
 export const STATUS_WORDS = {
   queued: "queued",
@@ -227,12 +229,88 @@ export function agoWords(at, now = new Date()) {
   return `${Math.floor(s / 86400)} d ago`;
 }
 
-/** "a-output" as the kiosk names scenarios, with the cycle: "A, read through .output · cycle 90". */
-export function placeWords(run, scenarios) {
-  const sc = run.scenario && scenarios && Object.prototype.hasOwnProperty.call(scenarios, run.scenario) ? scenarios[run.scenario].name : run.scenario;
+/**
+ * behold#571: whether a scenario's short label reads as code to someone new
+ * to the demo: a lettered label ("A, read through .output", "B on waves"), a
+ * code token in it, or the bare id ("a-output").
+ */
+export function codeish(label) {
+  return typeof label === "string" && (/^[A-Z]\b/.test(label) || /\.[A-Za-z]|[_`]/.test(label) || /^[a-z0-9]+(?:-[a-z0-9]+)+$/.test(label));
+}
+
+const MERGE_TITLE = /^Merge pull request '(.+)' \(#\d+\)/;
+
+/**
+ * behold#571: each scenario's title in plain words, by id: from the merge
+ * runs' titles (the pull request is titled after its scenario), and from
+ * `known` (the titles demo.json has carried, which win).
+ */
+export function scenarioTitles(runs, known = {}) {
+  const out = {};
+  for (const r of [...(runs || [])].reverse()) {
+    const m = r && r.scenario && typeof r.title === "string" ? MERGE_TITLE.exec(r.title) : null;
+    if (m) out[r.scenario] = m[1];
+  }
+  for (const [id, title] of Object.entries(known || {})) if (typeof title === "string" && title) out[id] = title;
+  return out;
+}
+
+/**
+ * The scenario and the cycle under a run: "a failure mid-apply · cycle 90".
+ * The scenario's name as demo.json last carried it (`names`, terragucci#1050)
+ * comes first, then the kiosk's SCENARIOS label; a label that reads as code
+ * gives way to the scenario's title when one is known (behold#571).
+ */
+export function placeWords(run, scenarios, titles = {}, names = {}) {
+  const own = (m) => !!(run.scenario && m && Object.prototype.hasOwnProperty.call(m, run.scenario));
+  const short = own(names) && names[run.scenario] ? names[run.scenario] : own(scenarios) ? scenarios[run.scenario].name : run.scenario;
+  const title = own(titles) ? titles[run.scenario] : null;
+  const sc = title && (!short || codeish(short)) ? title : short;
   return [sc, run.cycle !== null && run.cycle !== undefined ? `cycle ${run.cycle}` : null].filter(Boolean).join(" · ");
 }
 
+/**
+ * behold#571: a runner's or an action's set-up line, not terragucci's own:
+ * git's hints, the checkout's `[command]` lines and groups, the runner's
+ * docker and fetch lines.
+ */
+export const SETUP_LINES = [
+  /^hint:/,
+  /^\[command\]/,
+  /^##\[(?:group|endgroup)\]/,
+  /^Initialized empty Git repository\b/,
+  /^::(?:add|remove)-matcher\b/,
+  /^\s*❓\s*add-matcher\b/u,
+  /^\s*🐳\s+docker\b/u,
+  /^\s*☁️\s+git fetch\b/u,
+  /^git version \d/,
+  /^Temporarily overriding HOME=/,
+  /^Adding repository directory to the temporary git global config\b/,
+  /^Deleting the contents of '/,
+  /^Syncing repository: /,
+  /^Working directory is '/,
+];
+
+/** Whether a log line is set-up noise (SETUP_LINES). */
+export function setupLine(line) {
+  return typeof line === "string" && SETUP_LINES.some((re) => re.test(line));
+}
+
+/**
+ * behold#571: a step's log as the kiosk draws it. The set-up lines fold into
+ * one row at the top, `{ setup: n }`, so terragucci's own lines come first;
+ * opened (`open`), the row heads the whole log in order. Every line keeps
+ * its number in the log. A log with no set-up lines is drawn as it came.
+ */
+export function logRows(lines, { open = false, from = 0 } = {}) {
+  const all = (lines || []).map((text, i) => ({ n: from + i + 1, text, setup: setupLine(text) }));
+  const n = all.filter((l) => l.setup).length;
+  if (!n) return all.map(({ n: num, text }) => ({ n: num, text }));
+  const head = { setup: n, open };
+  const body = open ? all : all.filter((l) => !l.setup);
+  return [head, ...body.map(({ n: num, text, setup }) => (open && setup ? { n: num, text, quiet: true } : { n: num, text }))];
+}
+
 // ---------------------------------------------------------------------------
 // Drawing.
 
@@ -277,7 +355,7 @@ export function statusIcon(status) {
 }
 
 /** The sidebar: the live run pinned, then the recent ones. `pick(id)` selects one; nothing here writes. */
-export function renderSidebar(host, index, selectedId, { now = new Date(), scenarios = {}, pick = () => {}, merged = null } = {}) {
+export function renderSidebar(host, index, selectedId, { now = new Date(), scenarios = {}, titles = {}, names = {}, pick = () => {}, merged = null } = {}) {
   host.replaceChildren();
   const head = el("div", "r-side-head");
   head.appendChild(el("div", "r-side-title", "Pipeline runs"));
@@ -290,6 +368,7 @@ export function renderSidebar(host, index, selectedId, { now = new Date(), scena
   // The selected run as its page draws it, when its own document is newer than the index.
   const runs = sidebarRuns(index.doc.runs).map((r) => (merged && merged.id === r.id ? merged : r));
   const live = runs[0];
+  const named = scenarioTitles(index.doc.runs, titles);
   const list = el("ol", "r-runs");
   runs.forEach((r, i) => {
     if (i === 0) list.appendChild(el("li", "r-group", LIVE.has(live.status) ? "Live" : "Latest"));
@@ -300,7 +379,7 @@ export function renderSidebar(host, index, selectedId, { now = new Date(), scena
     li.appendChild(statusIcon(r.status));
     const body = el("div", "r-run-body");
     body.appendChild(el("div", "r-run-title", triggerWords(r)));
-    const place = placeWords(r, scenarios);
+    const place = placeWords(r, scenarios, named, names);
     if (place) body.appendChild(el("div", "r-run-place", place));
     const meta = el("div", "r-run-meta");
     meta.append(
@@ -328,7 +407,14 @@ export function renderSidebar(host, index, selectedId, { now = new Date(), scena
  * null for the defaults. Returns what it drew, so the caller can keep a log's
  * scroll.
  */
-export function renderRun(host, answer, ui, { now = new Date(), pickJob = () => {}, toggleStep = () => {}, entry = null } = {}) {
+export function renderRun(host, answer, ui, { now = new Date(), pickJob = () => {}, toggleStep = () => {}, toggleSetup = () => {}, entry = null, roots = [], waves = [], light = false } = {}) {
+  // behold#571: a root's name with its colour's dot, where the line names one.
+  const textOf = (cls, text) => {
+    if (!roots.length || !rootSegments(text, roots).some((x) => x.root)) return el("span", cls, text);
+    const n = el("span", cls);
+    n.appendChild(rootText(document, text, roots, { light }));
+    return n;
+  };
   host.replaceChildren();
   if (!answer || answer.error || answer.absent || !answer.doc) {
     host.appendChild(el("p", "r-note", answer ? answer.absent || answer.error : "Reading the run…"));
@@ -363,6 +449,20 @@ export function renderRun(host, answer, ui, { now = new Date(), pickJob = () =>
     li.style.setProperty("--depth", String(j.depth));
     li.appendChild(statusIcon(j.status));
     li.appendChild(el("span", "r-job-name", j.name));
+    // behold#571: a wave's job row names the roots it applies, each with its dot, and lights its wave box on hover.
+    const wave = waveOfJob(j.name, waves);
+    const applies = wave !== null ? rootsOfWave(wave, waves).filter((r) => rootColour(r, roots, { light })) : [];
+    if (wave !== null && waves.length) li.dataset.kWave = String(wave);
+    if (applies.length) {
+      const box = el("span", "r-job-roots");
+      for (const r of applies) {
+        const name = el("span", "k-root", r);
+        name.dataset.kRoot = r;
+        name.style.setProperty("--k-root", rootColour(r, roots, { light }));
+        box.appendChild(name);
+      }
+      li.appendChild(box);
+    }
     if (j.needs && j.needs.length) li.appendChild(el("span", "r-job-needs", `after ${j.needs.join(", ")}`));
     li.appendChild(el("span", "r-dur", j.status === "waiting" ? "held at the gate" : durationWords(j.started_at, j.ended_at, now) || STATUS_WORDS[j.status] || ""));
     li.addEventListener("click", () => pickJob(j.name));
@@ -398,12 +498,25 @@ export function renderRun(host, answer, ui, { now = new Date(), pickJob = () =>
     if (i === open) {
       const pre = el("pre", "r-log");
       if (s.truncated) pre.appendChild(el("div", "r-log-cut", `… ${s.truncated} earlier lines not kept`));
-      s.log.forEach((l, n) => {
-        const ln = el("div", "r-log-line");
-        const shown = logLineWords(job.status, l);
-        ln.append(el("span", "r-ln", String((s.truncated || 0) + n + 1)), el("span", shown.held ? "r-lt r-wait" : "r-lt", shown.text));
+      const key = logKey(run.id, job.name, i);
+      for (const row of logRows(s.log, { open: ui.setup === key, from: s.truncated || 0 })) {
+        if (row.setup) {
+          const fold = el("div", `r-log-setup${row.open ? " r-log-setup-open" : ""}`, `${row.open ? "▾" : "▸"} setup (${row.setup} line${row.setup === 1 ? "" : "s"})`);
+          fold.setAttribute("role", "button");
+          fold.tabIndex = 0;
+          fold.setAttribute("aria-expanded", String(row.open));
+          fold.addEventListener("click", () => toggleSetup(key));
+          fold.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" || e.key === " ") toggleSetup(key);
+          });
+          pre.appendChild(fold);
+          continue;
+        }
+        const ln = el("div", `r-log-line${row.quiet ? " r-log-quiet" : ""}`);
+        const shown = logLineWords(job.status, row.text);
+        ln.append(el("span", "r-ln", String(row.n)), row.quiet ? el("span", shown.held ? "r-lt r-wait" : "r-lt", shown.text) : textOf(shown.held ? "r-lt r-wait" : "r-lt", shown.text));
         pre.appendChild(ln);
-      });
+      }
       if (!s.log.length) pre.appendChild(el("div", "r-log-cut", s.status === "running" ? "waiting for output…" : "no output"));
       if (s.status === "running") pre.appendChild(el("div", "r-log-live", "▍"));
       row.appendChild(pre);
@@ -447,8 +560,8 @@ export const PICK_HOLD_MS = 90_000;
  * is live), and redraw. The live run is selected until a viewer picks
  * another, and again {@link PICK_HOLD_MS} after their last pick.
  */
-export function startRuns({ side, main }, { fetchJson, now = () => new Date(), scenarios = {}, onLive = () => {} } = {}) {
-  const s = { index: null, run: null, selected: null, picked: 0, ui: { job: null, open: null } };
+export function startRuns({ side, main }, { fetchJson, now = () => new Date(), scenarios = {}, titles = () => ({}), names = () => ({}), onLive = () => {}, roots = () => [], waves = () => [], light = () => false } = {}) {
+  const s = { index: null, run: null, selected: null, picked: 0, ui: { job: null, open: null, setup: null } };
   let follow = true;
   let lastRunKey = "";
   // The open log and whether the pane follows its end; a viewer who scrolls up stops it until they come back.
@@ -470,7 +583,7 @@ export function startRuns({ side, main }, { fetchJson, now = () => new Date(), s
     const ans = s.run && (!s.run.doc || s.run.doc.id === id) ? s.run : null;
     // One merged read of the selected run for both the sidebar and its page.
     const merged = ans && ans.doc ? mergeRun(entry, ans.doc) : null;
-    renderSidebar(side, s.index, id, { now: now(), scenarios, pick, merged });
+    renderSidebar(side, s.index, id, { now: now(), scenarios, titles: titles(), names: names(), pick, merged });
     // The redraw replaces the scrollers: keep where a viewer left them.
     const old = main.querySelector(".r-log");
     const oldSteps = main.querySelector(".r-steps");
@@ -479,13 +592,21 @@ export function startRuns({ side, main }, { fetchJson, now = () => new Date(), s
     const drawn = renderRun(main, ans, s.ui, {
       now: now(),
       entry,
+      roots: roots(),
+      waves: waves(),
+      light: light(),
       pickJob: (name) => {
-        s.ui = { job: name, open: null };
+        s.ui = { job: name, open: null, setup: null };
         hold();
         draw();
       },
       toggleStep: (job, i) => {
-        s.ui = { job, open: i };
+        s.ui = { job, open: i, setup: null };
+        hold();
+        draw();
+      },
+      toggleSetup: (key) => {
+        s.ui = { ...s.ui, setup: s.ui.setup === key ? null : key };
         hold();
         draw();
       },
@@ -528,7 +649,7 @@ export function startRuns({ side, main }, { fetchJson, now = () => new Date(), s
     s.selected = id;
     follow = false;
     s.picked = now().getTime();
-    s.ui = { job: null, open: null };
+    s.ui = { job: null, open: null, setup: null };
     void readRun();
   };
   const readIndex = async () => {
@@ -545,7 +666,7 @@ export function startRuns({ side, main }, { fetchJson, now = () => new Date(), s
     // A run that ended reads once; one still going reads on every tick.
     const key = `${id}|${entry ? entry.status : ""}|${entry ? entry.ended_at : ""}`;
     if (key === lastRunKey && entry && !LIVE.has(entry.status) && s.run && s.run.doc && s.run.doc.id === id) return draw();
-    if (s.run && s.run.doc && s.run.doc.id !== id) s.ui = { job: null, open: null };
+    if (s.run && s.run.doc && s.run.doc.id !== id) s.ui = { job: null, open: null, setup: null };
     lastRunKey = key;
     s.run = await fetchJson(`/api/terragucci/runs/${id}`);
     draw();

package/web/kiosk-runs.test.js

@@ -1,7 +1,7 @@
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { describe, expect, it } from "vitest";
-import { FOLLOW_LINES, followsLog, logKey, nearEnd, mergeRun, newerOf, agoWords, defaultJob, defaultStep, durationWords, jobOrder, liveRun, logLineWords, placeWords, sidebarRuns, splitSkipped, STATUS_TONE, triggerWords } from "./kiosk-runs.js";
+import { FOLLOW_LINES, followsLog, logKey, nearEnd, mergeRun, newerOf, agoWords, defaultJob, defaultStep, durationWords, jobOrder, liveRun, codeish, logLineWords, logRows, placeWords, scenarioTitles, setupLine, sidebarRuns, splitSkipped, STATUS_TONE, triggerWords } from "./kiosk-runs.js";
 
 const FIX = join(import.meta.dirname, "..", "src", "__fixtures__", "terragucci-demo", "runs");
 const run = (id) => JSON.parse(readFileSync(join(FIX, `${id}.json`), "utf8"));
@@ -131,3 +131,55 @@ describe("the log pane follows its end, like a CI page's log", () => {
     expect(nearEnd({ scrollTop: 0, clientHeight: 400, scrollHeight: 1000 }, slack)).toBe(false);
   });
 });
+
+describe("the runs for a viewer new to the demo (behold#571)", () => {
+  const SC = { "a-output": { name: "A, read through .output" }, "b-waves": { name: "B on waves" }, failure: { name: "a failure mid-apply" } };
+  it("prefers the scenario's title when its short label reads as code", () => {
+    expect(codeish("A, read through .output")).toBe(true);
+    expect(codeish("B on waves")).toBe(true);
+    expect(codeish("a-output")).toBe(true);
+    expect(codeish("a failure mid-apply")).toBe(false);
+    expect(codeish("the base")).toBe(false);
+    const titles = { "a-output": "The same change, read once it is built", failure: "One root fails partway" };
+    expect(placeWords({ scenario: "a-output", cycle: 90 }, SC, titles)).toBe("The same change, read once it is built · cycle 90");
+    expect(placeWords({ scenario: "failure", cycle: 92 }, SC, titles)).toBe("a failure mid-apply · cycle 92");
+    expect(placeWords({ scenario: "b-waves", cycle: 91 }, SC, titles)).toBe("B on waves · cycle 91");
+    expect(placeWords({ scenario: "c-new", cycle: 93 }, SC, { "c-new": "A new one" })).toBe("A new one · cycle 93");
+    expect(placeWords({ scenario: "a-output", cycle: 90 }, SC)).toBe("A, read through .output · cycle 90");
+  });
+  it("takes demo.json's name for a scenario before the table's label (terragucci#1050)", () => {
+    const names = { "b-waves": "a new subnet", failure: "a failure halfway" };
+    expect(placeWords({ scenario: "b-waves", cycle: 12 }, SC, {}, names)).toBe("a new subnet · cycle 12");
+    expect(placeWords({ scenario: "failure", cycle: 12 }, SC, { failure: "One root fails" }, names)).toBe("a failure halfway · cycle 12");
+    expect(placeWords({ scenario: "a-output", cycle: 12 }, SC, {}, names)).toBe("A, read through .output · cycle 12");
+  });
+  it("learns titles from the merge runs, and demo.json's win", () => {
+    const runs = index().runs;
+    const t = scenarioTitles(runs);
+    expect(t["a-known"]).toBe("A port change, known when it plans");
+    expect(scenarioTitles(runs, { "a-known": "A plain title" })["a-known"]).toBe("A plain title");
+    expect(scenarioTitles([], {})).toEqual({});
+  });
+  it("knows the runner's set-up lines from terragucci's own", () => {
+    for (const l of ["hint: Using 'master' as the name", "[command]/usr/bin/git init /workspace/demo", "##[group]Initializing the repository", "##[endgroup]", "Initialized empty Git repository in /workspace/demo/.git/"]) expect(setupLine(l)).toBe(true);
+    for (const l of ["wave 2 of 3: planning app", "app: Plan: 0 to add, 1 to change, 0 to destroy.", "  terragucci approve wave-2 --plan jcs1-sha256:0a", "⚙️ [runner]: exitcode '3': failure"]) expect(setupLine(l)).toBe(false);
+  });
+  it("folds the set-up lines into one row at the top, and opens it in order", () => {
+    const log = ["##[group]Init", "[command]/usr/bin/git init", "wave 1 of 3: planning network", "hint: x", "##[endgroup]", "wave 1 of 3: applied"];
+    expect(logRows(log)).toEqual([{ setup: 4, open: false }, { n: 3, text: "wave 1 of 3: planning network" }, { n: 6, text: "wave 1 of 3: applied" }]);
+    const open = logRows(log, { open: true });
+    expect(open[0]).toEqual({ setup: 4, open: true });
+    expect(open.slice(1).map((r) => r.n)).toEqual([1, 2, 3, 4, 5, 6]);
+    expect(open.filter((r) => r.quiet).map((r) => r.n)).toEqual([1, 2, 4, 5]);
+    expect(logRows(["a", "b"], { from: 10 })).toEqual([{ n: 11, text: "a" }, { n: 12, text: "b" }]);
+  });
+  it("folds the checkout's set-up in a real held job's log, and leaves terragucci's step as it came", () => {
+    const job = run(444).jobs.find((j) => j.status === "waiting");
+    const checkout = job.steps.find((s) => s.name.includes("checkout") && !s.name.startsWith("Post"));
+    const rows = logRows(checkout.log);
+    expect(rows[0].setup).toBeGreaterThan(40);
+    expect(rows.slice(1).some((r) => /^hint:|^\[command\]|^##\[/.test(r.text))).toBe(false);
+    const own = job.steps.find((s) => /^Apply wave/.test(s.name));
+    expect(logRows(own.log)).toEqual(own.log.map((text, i) => ({ n: i + 1, text })));
+  });
+});

package/web/kiosk.html

@@ -58,6 +58,9 @@
       .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; }
+      /* behold#571: each root's colour, as a dot by its name; never a text or fill colour, which mean a state. */
+      .k-root::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--k-root); margin: 0 0.28em 0.1em 0.05em; vertical-align: middle; }
+      .r-job-roots { display: inline-flex; gap: 0.75em; font-size: 0.82em; color: var(--fg); }
       .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; }
@@ -74,30 +77,36 @@
         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; }
+      /* behold#571: the runner's set-up lines, folded into one row so terragucci's own lines come first. */
+      .r-log-setup { color: var(--muted); padding: 0 0.8em 0.2em 4em; cursor: pointer; user-select: none; }
+      .r-log-setup:hover { color: var(--fg); }
+      .r-log-quiet .r-lt { color: var(--muted); }
       .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 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0.45em 1.6em; align-items: start;
+        padding: 0.55em 1.4em 0.6em; 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; }
+      /* behold#571: the problem the demo solves, always on, across the bar's top. */
+      .k-intro { grid-column: 1 / -1; margin: 0; font-size: 1em; line-height: 1.35; color: var(--fg); }
+      .k-kicker { font: 600 0.58em var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-right: 0.9em; vertical-align: 0.2em; white-space: nowrap; }
+      .k-cycle { color: var(--muted); font: 0.78em var(--font-mono); white-space: nowrap; }
+      .k-title { margin: 0 0 0.2em; font-size: 1.35em; line-height: 1.2; }
       /* behold#571: the scenario's card, three labelled rows under the title. */
-      .k-about { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.12em 0.9em; align-items: baseline; margin: 0 0 0.45em; font-size: 0.9em; line-height: 1.3; }
+      .k-about { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.08em 0.9em; align-items: baseline; margin: 0 0 0.35em; font-size: 0.88em; line-height: 1.25; }
       .k-about-label { font: 600 0.74em var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
       .k-about-text { margin: 0; color: var(--fg); }
       .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 { border-left: 4px solid var(--pending); padding: 0.1em 0 0.1em 0.8em; margin: 0; font-size: 0.95em; line-height: 1.3; }
+      .k-step-word { font: 600 0.72em var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-right: 0.7em; }
       .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-right { display: grid; gap: 0.45em; align-content: start; }
+      .k-where { display: flex; flex-wrap: wrap; gap: 0.35em 1em; align-items: center; }
       .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); }
@@ -109,7 +118,8 @@
       .k-when { color: var(--foreign); font-family: var(--font-mono); }
       .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-approve-gloss { color: var(--fg); font-size: 0.92em; }
+      .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; }
@@ -129,7 +139,6 @@
       #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>