@intentius/behold 0.29.2 → 0.29.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentius/behold",
-  "version": "0.29.2",
+  "version": "0.29.4",
   "license": "Apache-2.0",
   "type": "module",
   "description": "behold — a live control plane on chant. See your whole estate (every substrate in one graph), coloured by drift; act through delegated, gated Ops.",

package/web/app.js

@@ -18,7 +18,8 @@ import { renderLane } from "./terragucci-lifecycle.js";
 import { renderReleases } from "./releases.js";
 import { renderYodelLane } from "./sql-yodeler-lane.js";
 import { initTerragucciEstate } from "./terragucci-estate.js";
-import { changeSection as tgChangeSection, readCardIds as tgReadCardIds, readEdges as tgReadEdges, readLabel as tgReadLabel, readLine as tgReadLine, readTag as tgReadTag, rootStates as tgRootStates, viewCaption as tgViewCaption } from "./terragucci-change.js";
+import { componentMarks as tgComponentMarks, waveOfKey as tgWaveOfKey } from "./terragucci-components-live.js";
+import { STATE_WORDS as tgStateWords, changeSection as tgChangeSection, readCardIds as tgReadCardIds, readEdges as tgReadEdges, readLabel as tgReadLabel, readLine as tgReadLine, readTag as tgReadTag, rootStates as tgRootStates, viewCaption as tgViewCaption, pinnedAnswer as tgPinnedAnswer, pinnedCaption as tgPinnedCaption, pinsCommit as tgPinsCommit } from "./terragucci-change.js";
 import { auditLines as yrAuditLines, cornerText as yrCorner, datedWords as yrDated, environmentLines as yrEnvLines, joinMarks as yrJoin, legend as yrLegend, markLine as yrMarkLine } from "./yodel-report.js";
 import { cardProgress as tgCardProgress, progressLines as tgProgressLines, progressSection as tgProgressSection, stampProgress as tgStampProgress } from "./terragucci-progress.js";
 import { seconds, whyQuery, whyView } from "./why.js";
@@ -964,7 +965,7 @@ function inspect(node) {
   // #568: the reads this card's root makes or answers, from the pull
   // request's plan or the run view, dated by its run.
   const tgReadRoot = tgAnswer && !tgAnswer.error && tgRootOfCard(tgAnswer, node.id);
-  const tgReads = tgReadRoot ? tgReadEdges(tgAnswer, tgProgress).filter((e) => e.from === tgReadRoot || e.to === tgReadRoot) : [];
+  const tgReads = tgReadRoot ? tgReadEdges(tgAnswerDrawn(), tgProgress).filter((e) => e.from === tgReadRoot || e.to === tgReadRoot) : [];
   if (tgReads.length) {
     const h = document.createElement("h3");
     h.textContent = "terragucci reads between roots (not live)";
@@ -1221,9 +1222,14 @@ function inspect(node) {
     // The heading names the forge the pipeline was actually generated for
     // (#164) — it used to say GitLab whatever the project targeted.
     const ci = section(`CI (${{ gitlab: "GitLab", github: "GitHub Actions", forgejo: "Forgejo" }[ciForge] || ciForge || "pipeline"})`);
-    ci("stage", job.stage);
+    // #571: a terragucci repo's declared job names the job and its wave; a
+    // chant-generated pipeline names a stage and the script it runs.
+    if (job.jobName) ci("job", job.jobName);
+    if (job.wave !== undefined) ci("wave", String(job.wave));
+    if (job.stage) ci("stage", job.stage);
     ci("needs", job.needs.length ? job.needs.join(", ") : "(none)");
-    ci("runs", job.script.length ? job.script.join(" && ") : `chant run --components ${node.id}`);
+    if (job.alsoIn && job.alsoIn.length) ci("also in", job.alsoIn.join(", "));
+    if (job.script) ci("runs", job.script.length ? job.script.join(" && ") : `chant run --components ${node.id}`);
     // The last pipeline run of this session, when one touched this component
     // (#164) — the server joins it as `_ciJob`/`ci` on the node.
     if (node.attrs && node.attrs._ciJob) ci("last run", `${node.attrs._ciJob}: ${node.attrs.ci}`);
@@ -1241,7 +1247,7 @@ function inspect(node) {
   if (resources) {
     const res = section("resources");
     if (!resources.length) {
-      res("", "(none found under this component's source directory)");
+      res("", terragucciComponentsRepo ? "(none in this component's root)" : "(none found under this component's source directory)");
     } else {
       for (const r of resources) {
         res(r.kind, r.physicalId ? `${r.id} (${r.physicalId})` : r.id);
@@ -1614,7 +1620,12 @@ let autoZoomFallback = true;
 // order), so the decision is made from what the server already knows rather
 // than from a zero-node answer. A chant member anywhere in the estate keeps
 // #182's behaviour exactly, and picking components later still shows the note.
-function bootZoom(memberKinds) {
+//
+// #571: a terragucci repo that declares its roots as components
+// (`terragucci.components.json`, /api/project's `terragucciComponents`) does
+// have a components picture, so it opens there whatever its member kind.
+function bootZoom(memberKinds, terragucciComponents) {
+  if (terragucciComponents) return "components";
   return memberKinds && memberKinds.length && !memberKinds.includes("chant") ? "resources" : "components";
 }
 
@@ -3394,7 +3405,7 @@ function watchTerragucci() {
     if (tgPushFits(pushed)) {
       tgProgress = pushed;
       paintTgProgress();
-    } else if (view.run && view.run !== "none" && view.run !== "base") void loadTgProgress({ fresh: true });
+    } else if (tgPinsCommit(view.run)) void loadTgProgress({ fresh: true });
   });
   es.addEventListener("lifecycle", (e) => {
     tgLifecycle = JSON.parse(e.data);
@@ -3429,9 +3440,9 @@ async function loadTerragucci({ fresh = false } = {}) {
 // #511: /api/terragucci/progress, the newest apply's run view on the cards.
 let tgProgress = null;
 async function loadTgProgress({ fresh = false } = {}) {
-  // #569: `run` pins the run view: a commit's, or none at all (the pull request's plan, or the base).
+  // #569: `run` pins the run view: a commit's, or none at all (a pull request's plan, or the base).
   const pin = view.run;
-  if (pin === "none" || pin === "base") {
+  if (pin && !tgPinsCommit(pin)) {
     tgProgress = null;
     paintTgProgress();
     return;
@@ -3451,12 +3462,12 @@ async function loadTgProgress({ fresh = false } = {}) {
 function tgPushFits(answer) {
   const pin = view.run;
   if (!pin) return true;
-  if (pin === "none" || pin === "base") return false;
+  if (!tgPinsCommit(pin)) return false;
   return !!(answer && answer.run && answer.run.commit && (answer.run.commit.startsWith(pin) || pin.startsWith(answer.run.commit)));
 }
-/** #569: the reports as the view draws them: at `run=base` nothing is in flight, so no pull request either. */
+/** #569: the reports as the view draws them: at `run=base` no pull request, at `run=pull-<n>` only that one's plan. */
 function tgAnswerDrawn() {
-  return view.run === "base" && tgAnswer && !tgAnswer.error ? { ...tgAnswer, pull_request: null } : tgAnswer;
+  return tgPinnedAnswer(tgAnswer, view.run);
 }
 function paintTgProgress() {
   tgStampProgress(document.querySelector("#graph svg"), tgProgress, new Date());
@@ -3474,6 +3485,7 @@ function paintTgProgress() {
 // merged. Not live; redrawn on each render and each read.
 const TG_TONE = { plan: "var(--pending)", wait: "var(--foreign)", busy: "var(--runtime)", ok: "var(--managed)", bad: "var(--degraded)", idle: "var(--neutral)" };
 function drawTgReads() {
+  watchTgRuns(); // #571: the wave boxes' jobs, while the components zoom is on screen
   const svg = document.querySelector("#graph svg");
   if (!svg) return;
   for (const old of svg.querySelectorAll("[data-tg-reads]")) old.remove();
@@ -3484,6 +3496,10 @@ function drawTgReads() {
     r.removeAttribute("data-tg-stroke0");
     r.removeAttribute("data-tg-width0");
   }
+  for (const r of svg.querySelectorAll("[data-tg-fill0]")) {
+    r.setAttribute("fill", r.getAttribute("data-tg-fill0"));
+    r.removeAttribute("data-tg-fill0");
+  }
   for (const t of svg.querySelectorAll("[data-tg-hid]")) {
     t.removeAttribute("data-tg-hid");
     t.removeAttribute("visibility");
@@ -3512,13 +3528,24 @@ function drawTgReads() {
   };
   const union = (boxes) => (boxes.length ? { x: Math.min(...boxes.map((b) => b.x)), y: Math.min(...boxes.map((b) => b.y)), x2: Math.max(...boxes.map((b) => b.x2)), y2: Math.max(...boxes.map((b) => b.y2)) } : null);
   const rootOf = (path) => tgAnswer.roots.find((x) => x.path === path) || null;
+  // #571: on a terragucci repo's components zoom each root is one card, in a
+  // box per wave: the reads run card to card, and the marks go on the cards
+  // and the wave boxes (drawTgComponentMarks).
+  const compMode = !!(view.components && terragucciComponentsRepo && tgComponentFacets);
+  const componentsOfRoot = (r) => {
+    const roots = (tgComponentFacets && tgComponentFacets.roots) || {};
+    const named = (tgComponentFacets && tgComponentFacets.jobs ? tgComponentFacets.jobs.map((j) => j.component) : []).filter((c) => (roots[c] || c) === r.path || (roots[c] || c) === r.name);
+    return named.length ? named : [r.name];
+  };
   const groupRect = (path) => {
     const r = rootOf(path);
+    if (compMode) return null;
     return r ? svg.querySelector(`rect[data-group-id="${CSS.escape(r.name)}"]`) : null;
   };
   const cardsOf = (path) => {
     const r = rootOf(path);
     if (!r) return [];
+    if (compMode) return componentsOfRoot(r).map((c) => svg.querySelector(`[data-node-id="${CSS.escape(c)}"]`)).filter(Boolean);
     const prefix = `${r.member}/${r.name}/`;
     return [...svg.querySelectorAll("[data-node-id]")].filter((g) => (g.getAttribute("data-node-id") || "").startsWith(prefix));
   };
@@ -3571,8 +3598,12 @@ function drawTgReads() {
     if (focus && !focus.has(r.path) && !focus.has(r.name)) {
       for (const el of [rect && rect.parentElement, ...cardsOf(r.path)]) {
         if (!el) continue;
-        el.setAttribute("data-tg-dim", "1");
-        el.style.opacity = "0.5";
+        // #571: a card on the components zoom keeps its body opaque, so the graph's edges behind it stay hidden; what is on it dims.
+        const parts = compMode ? [...el.children].filter((c) => c !== el.querySelector(":scope > rect")) : [el];
+        for (const part of parts) {
+          part.setAttribute("data-tg-dim", "1");
+          part.style.opacity = "0.5";
+        }
       }
     }
     if (!rect || !st || !b) continue;
@@ -3641,6 +3672,13 @@ function drawTgReads() {
     }
   }
 
+  // #571: the components zoom's own marks; its wave boxes are the boxes the caption and the labels keep clear of.
+  const edgePoints = compMode ? chantEdgePoints(svg) : [];
+  if (compMode) {
+    boxes.length = 0;
+    boxes.push(...drawTgComponentMarks(svg, { drawnAnswer, focus, boxOf, make, edgePoints }));
+  }
+
   // The reads. #569 review: no line or label crosses text. Each line is the
   // shortest one, from a point on the reader's card (or box) border to a point
   // on the read root's box border, that crosses no text and as few cards as
@@ -3686,6 +3724,20 @@ function drawTgReads() {
     .map((b) => grow(b, 3));
   const cardEls = [...svg.querySelectorAll("[data-node-id]")];
   const cardBoxOf = new Map(cardEls.map((g) => [g, boxOf(g)]));
+  // #571: how many of the components graph's own edge points a segment runs over, so a read never hides a dependency line.
+  const nearEdge = (a, z, d = 6) => {
+    if (!edgePoints.length) return 0;
+    const dx = z.x - a.x;
+    const dy = z.y - a.y;
+    const l2 = dx * dx + dy * dy || 1;
+    let n = 0;
+    for (const p of edgePoints) {
+      const t = Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / l2));
+      if (Math.hypot(a.x + dx * t - p.x, a.y + dy * t - p.y) < d) n++;
+    }
+    return n;
+  };
+  const edgeIn = (r) => edgePoints.filter((p) => p.x >= r.x - 3 && p.x <= r.x2 + 3 && p.y >= r.y - 3 && p.y <= r.y2 + 3).length;
   const defs = svg.querySelector("defs") || svg.insertBefore(make("defs", {}), svg.firstChild);
   for (const [id, color] of [["tg-arrow-unknown", "var(--foreign)"], ["tg-arrow-planned", "var(--pending)"], ["tg-arrow-applied", "var(--focus)"]]) {
     if (svg.querySelector(`#${id}`)) continue;
@@ -3709,7 +3761,7 @@ function drawTgReads() {
     const fromBox = (card && cardBoxOf.get(card)) || (card && boxOf(card)) || rootBox(e.from);
     const toBox = rootBox(e.to);
     if (!fromBox || !toBox) continue;
-    const others = cardEls.filter((g) => g !== card).map((g) => cardBoxOf.get(g)).filter(Boolean);
+    const others = cardEls.filter((g) => g !== card).map((g) => cardBoxOf.get(g)).filter((b) => b && b !== fromBox && b !== toBox && !(compMode && (sameBox(b, fromBox) || sameBox(b, toBox))));
     let best = null;
     for (const p0 of borderPoints(fromBox, [0.25, 0.5, 0.75])) {
       for (const p1 of borderPoints(toBox, [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9])) {
@@ -3726,7 +3778,7 @@ function drawTgReads() {
         const texts = textBoxes.filter((t) => crosses(a, z, t)).length;
         const cards = others.filter((c) => crosses(a, z, c)).length;
         const lines = drawn.filter((d) => crosses(a, z, grow({ x: Math.min(d.p0.x, d.p1.x), y: Math.min(d.p0.y, d.p1.y), x2: Math.max(d.p0.x, d.p1.x), y2: Math.max(d.p0.y, d.p1.y) }, 0)) && Math.hypot(d.p1.x - p1.x, d.p1.y - p1.y) < 30).length;
-        const score = texts * 10000 + cards * 2000 + lines * 500 + len;
+        const score = texts * 10000 + cards * 2000 + lines * 500 + nearEdge(a, z) * 400 + len;
         if (!best || score < best.score) best = { p0, p1, score };
       }
     }
@@ -3769,7 +3821,7 @@ function drawTgReads() {
       }
       for (const c of spots) {
         const r = { x: c.x - w / 2, y: c.y - h / 2, x2: c.x + w / 2, y2: c.y + h / 2 };
-        const lineHits = drawn.filter((d) => crosses(d.p0, d.p1, r)).length;
+        const lineHits = drawn.filter((d) => crosses(d.p0, d.p1, r)).length + edgeIn(r);
         // Outside the boxes' own span the label may leave the drawing when the view is fitted: keep it in.
         const span = union(boxes);
         const out = span ? (r.x2 - r.x) * (r.y2 - r.y) - overlap(r, { x: span.x - 40, y: span.y - 60, x2: span.x2 + 40, y2: span.y2 + 40 }) : 0;
@@ -3783,12 +3835,222 @@ function drawTgReads() {
   }
 
   // Which run the marks come from, above the boxes.
-  const caption = view.run === "base" ? "nothing in flight: the states went back to the base" : tgViewCaption(drawnAnswer, tgProgress, new Date());
+  // #569: a pin that holds the view off every plan says why in its own words.
+  const shown = tgViewCaption(drawnAnswer, tgProgress, new Date());
+  const caption = tgPinnedCaption(tgAnswer, view.run) || (shown ? `Showing ${shown}` : null);
   const all = union(boxes);
   if (caption && all) {
-    layer.appendChild(make("text", { "data-tg-reads": "caption", x: all.x, y: all.y - 22, "font-size": 16, "font-weight": 600, fill: "var(--muted)" }, `Showing ${caption}`));
+    const line = make("text", { "data-tg-reads": "caption", x: all.x, y: all.y - 22, "font-size": 16, "font-weight": 600, fill: "var(--muted)" }, caption);
+    layer.appendChild(line);
+    // #571: the components zoom is narrow; a caption wider than its boxes goes on two lines, broken after its colon or comma.
+    let wide = 0;
+    try {
+      wide = line.getComputedTextLength();
+    } catch {
+      /* not laid out */
+    }
+    const cut = caption.indexOf(": ") > 0 ? caption.indexOf(": ") : caption.indexOf(", ");
+    if (compMode && cut > 0 && wide > all.x2 - all.x + 40) {
+      line.textContent = caption.slice(0, cut + 1);
+      line.setAttribute("y", String(all.y - 42));
+      layer.appendChild(make("text", { "data-tg-reads": "caption", x: all.x, y: all.y - 22, "font-size": 16, "font-weight": 600, fill: "var(--muted)" }, caption.slice(cut + 2)));
+    }
+  }
+}
+const sameBox = (a, b) => !!a && !!b && Math.abs(a.x - b.x) < 0.5 && Math.abs(a.y - b.y) < 0.5 && Math.abs(a.x2 - b.x2) < 0.5 && Math.abs(a.y2 - b.y2) < 0.5;
+
+/** #571: points along the components graph's own edges, in the svg's coordinates, every few units. */
+function chantEdgePoints(svg) {
+  const toSvg = svg.getScreenCTM && svg.getScreenCTM();
+  if (!toSvg) return [];
+  const inv = toSvg.inverse();
+  const out = [];
+  for (const path of svg.querySelectorAll("path.pin-edge-line")) {
+    let len = 0;
+    try {
+      len = path.getTotalLength();
+    } catch {
+      continue;
+    }
+    const ctm = path.getScreenCTM && path.getScreenCTM();
+    if (!ctm || !len) continue;
+    const m = inv.multiply(ctm);
+    for (let d = 0; d <= len; d += 5) {
+      const p = path.getPointAtLength(d);
+      out.push(new DOMPoint(p.x, p.y).matrixTransform(m));
+    }
+  }
+  return out;
+}
+
+// #571: the pipeline's runs (terragucci#1038), for the components zoom's wave
+// boxes: each box's job and its status on the run the view draws.
+let tgRuns = null;
+let tgRunsTimer = null;
+async function loadTgRuns() {
+  const was = JSON.stringify(tgRuns && tgRuns.doc ? tgRuns.doc.runs : null);
+  tgRuns = await apiFetch("/api/terragucci/runs")
+    .then((r) => (r.ok ? r.json() : null))
+    .catch(() => null);
+  if (JSON.stringify(tgRuns && tgRuns.doc ? tgRuns.doc.runs : null) !== was) drawTgReads();
+}
+/** Read the runs while the components zoom of a terragucci repo is on screen, every few seconds as the kiosk does. */
+function watchTgRuns() {
+  const on = !staticMode && !!tgAnswer && !tgAnswer.error && view.components && terragucciComponentsRepo;
+  if (on && !tgRunsTimer) {
+    void loadTgRuns();
+    tgRunsTimer = setInterval(() => void loadTgRuns(), 3_000);
+  } else if (!on && tgRunsTimer) {
+    clearInterval(tgRunsTimer);
+    tgRunsTimer = null;
   }
 }
+
+/**
+ * #571: the live marks on a terragucci repo's components zoom, for the run
+ * the view draws (`view.run`): each card in its wave's state, each wave box
+ * outlined in its wave's state with its job's status after its title and its
+ * first fact (a waiting wave's plan digest) in its bottom padding. Text goes
+ * only where it covers no text, no card and no edge of the graph: the first
+ * spot that is clear, in the words that fit, else only in the tooltip.
+ * Returns the wave boxes, in the svg's coordinates.
+ */
+function drawTgComponentMarks(svg, { drawnAnswer, focus, boxOf, make, edgePoints }) {
+  const marks = tgComponentMarks(drawnAnswer, tgProgress, tgComponentFacets, { runs: tgRuns, pin: view.run || null });
+  const group = make("g", { "data-tg-root": "components", "pointer-events": "none" });
+  svg.appendChild(group);
+  const grow = (b, d) => ({ x: b.x - d, y: b.y - d, x2: b.x2 + d, y2: b.y2 + d });
+  const hits = (a, b) => a.x < b.x2 && a.x2 > b.x && a.y < b.y2 && a.y2 > b.y;
+  const textBoxes = () =>
+    [...svg.querySelectorAll("text")]
+      .filter((t) => t.getAttribute("visibility") !== "hidden" && (t.textContent || "").trim() && !t.closest("[data-tg-reads]"))
+      .map(boxOf)
+      .filter(Boolean);
+  const cardEls = [...svg.querySelectorAll("[data-node-id]")];
+  const cardBoxes = cardEls.map(boxOf).filter(Boolean);
+  const edgeHit = (r) => edgePoints.some((p) => p.x >= r.x - 4 && p.x <= r.x2 + 4 && p.y >= r.y - 4 && p.y <= r.y2 + 4);
+  const probe = make("text", { "font-size": 12, "font-weight": 700 });
+  group.appendChild(probe);
+  const width = (t, size, weight) => {
+    probe.setAttribute("font-size", String(size));
+    probe.setAttribute("font-weight", String(weight));
+    probe.textContent = t;
+    try {
+      return probe.getComputedTextLength() || t.length * size * 0.58;
+    } catch {
+      return t.length * size * 0.58;
+    }
+  };
+  const tone = (t) => TG_TONE[t] || TG_TONE.idle;
+
+  // The cards: outlined and barred in their state's colour, the state in the
+  // line under the name (the "Component · chant" line gives way to it).
+  for (const g of cardEls) {
+    const id = g.getAttribute("data-node-id");
+    const m = marks.cards[id];
+    if (!m) continue;
+    const rects = [...g.querySelectorAll(":scope > rect")];
+    const body = rects.reduce((a, r) => (!a || Number(r.getAttribute("width")) * Number(r.getAttribute("height")) > Number(a.getAttribute("width")) * Number(a.getAttribute("height")) ? r : a), null);
+    const bar = rects.find((r) => r !== body && Number(r.getAttribute("width")) <= 6);
+    const quiet = m.state === "outside" || m.state === "unchanged" || m.state === "not-started";
+    const inFocus = !focus || focus.has(m.root) || focus.has(id);
+    if (body) {
+      body.setAttribute("data-tg-stroke0", body.getAttribute("stroke") || "");
+      body.setAttribute("data-tg-width0", body.getAttribute("stroke-width") || "1.2");
+      if (!quiet) {
+        body.setAttribute("stroke", tone(m.tone));
+        body.setAttribute("stroke-width", focus && inFocus ? "4" : "2.5");
+      }
+    }
+    if (bar && !quiet) {
+      bar.setAttribute("data-tg-fill0", bar.getAttribute("fill") || "");
+      bar.setAttribute("fill", tone(m.tone));
+    }
+    const texts = [...g.querySelectorAll(":scope > text")];
+    const sub = texts.find((t) => /^Component\b/.test((t.textContent || "").trim())) || texts[1];
+    if (!sub || !body) continue;
+    const x = Number(sub.getAttribute("x"));
+    const y = Number(sub.getAttribute("y"));
+    const room = Number(body.getAttribute("x")) + Number(body.getAttribute("width")) - 10 - x;
+    const words = width(m.words, 12, 700) <= room ? m.words : m.short;
+    sub.setAttribute("visibility", "hidden");
+    sub.setAttribute("data-tg-hid", "1");
+    const t = make("text", { "data-tg-root": "card", x, y, "font-size": 12, "font-weight": 700, fill: quiet ? "var(--muted)" : tone(m.tone) }, words);
+    if (m.state === "applying") t.setAttribute("class", "pin-pulse");
+    if (!inFocus) t.style.opacity = "0.6";
+    t.appendChild(make("title", {}, [`wave ${m.wave} · ${m.words}`, ...m.facts].join("\n") + "\n(from terragucci's reports, not live)"));
+    g.appendChild(t);
+  }
+
+  // The wave boxes.
+  const out = [];
+  const placed = [];
+  for (const rect of svg.querySelectorAll("rect[data-group-id]")) {
+    const n = tgWaveOfKey(rect.getAttribute("data-group-id"));
+    const w = n === null ? null : marks.waves[n];
+    const b = boxOf(rect);
+    if (!b) continue;
+    out.push(b);
+    if (!w) continue;
+    const quiet = !w.state || w.state === "not-started";
+    rect.setAttribute("data-tg-stroke0", rect.getAttribute("stroke") || "");
+    rect.setAttribute("data-tg-width0", rect.getAttribute("stroke-width") || "1.2");
+    if (!quiet) {
+      rect.setAttribute("stroke", tone(w.tone));
+      rect.setAttribute("stroke-width", "2.5");
+    }
+    const title = [...svg.querySelectorAll("text[data-layout-move]")].find((t) => t.getAttribute("data-layout-move") === `box:${rect.getAttribute("data-group-id")}`);
+    const tb = title ? boxOf(title) : null;
+    const others = () => [...textBoxes(), ...placed].filter((x) => !(tb && sameBox(x, tb)));
+    const clear = (r) => r.x >= b.x + 6 && r.x2 <= b.x2 - 6 && !edgeHit(r) && !others().some((x) => hits(grow(x, 2), r)) && !cardBoxes.some((c) => hits(grow(c, 4), r));
+    // The job's status: after the title on its line, else at the right of that line.
+    if (w.status && tb) {
+      const size = 12;
+      const cy = (tb.y + tb.y2) / 2;
+      // Right after the title, as "apply-wave-2 · held at the gate"; else alone at the right of the title's line.
+      const spots = [{ words: `· ${w.status.words}`, at: () => tb.x2 + 6 }, { words: w.status.words, at: (wd) => b.x2 - 16 - wd }];
+      for (const { words, at } of spots) {
+        const wd = width(words, size, 700);
+        const x = at(wd);
+        const r = { x, y: cy - size / 2 - 2, x2: x + wd, y2: cy + size / 2 + 2 };
+        if (x < tb.x2 + 4 || !clear(r)) continue;
+        const t = make("text", { "data-tg-root": "wave-status", x, y: cy, "dominant-baseline": "central", "font-size": size, "font-weight": 700, fill: tone(w.status.tone) }, words);
+        if (w.status.status === "running") t.setAttribute("class", "pin-pulse");
+        group.appendChild(t);
+        placed.push(r);
+        break;
+      }
+    }
+    if (title) {
+      const tip = make("title", { "data-tg-root": "tip" }, [w.title, ...(w.state ? [`wave ${n} ${tgStateWords[w.state] || w.state}`] : []), ...w.facts].join("\n") + "\n(the job's status from the pipeline's runs; the wave's from terragucci's reports)");
+      title.appendChild(tip);
+    }
+    // The wave's first fact (a waiting wave's plan digest) in the box's bottom padding, where it fits.
+    const fact = w.facts[0];
+    if (fact) {
+      const size = 12.5;
+      const digest = /^approve plan (\S+)/.exec(fact);
+      const say = digest ? [fact, `plan ${digest[1]}`, `plan ${digest[1].slice(0, 8)}`, digest[1].slice(0, 8)] : [fact];
+      const fill = w.state === "waiting" ? tone(w.tone) : "var(--muted)";
+      let done = false;
+      for (const words of say) {
+        const wd = width(words, size, 600);
+        for (const x of [b.x2 - 14 - wd, b.x + 18]) {
+          const cy = b.y2 - 14;
+          const r = { x, y: cy - size / 2 - 2, x2: x + wd, y2: cy + size / 2 + 2 };
+          if (!clear(r)) continue;
+          group.appendChild(make("text", { "data-tg-root": "wave-fact", x, y: cy, "dominant-baseline": "central", "font-size": size, "font-weight": 600, fill }, words));
+          placed.push(r);
+          done = true;
+          break;
+        }
+        if (done) break;
+      }
+    }
+  }
+  probe.remove();
+  return out;
+}
 function markTerragucciCards() {
   recolorNodesByCategory(); // #569 review: the reports arrived, so the cards may go neutral
   const svg = document.querySelector("#graph svg");
@@ -4273,9 +4535,29 @@ function lensParams(params) {
 // it synchronously. Component-DAG mode only — cleared otherwise.
 let ciByComponent = new Map();
 let ciForge = null; // the forge the pipeline was generated for (#164) — heads the inspect section
+// #571: the served repo declares its components in terragucci.components.json.
+// Its CI and resources facets then ride the components graph response
+// (`meta.terragucciComponents`, see takeTerragucciFacets), which a public view
+// can read, so the two facet fetches below are skipped.
+let terragucciComponentsRepo = false;
+// #571: the components graph's facets (jobs, component -> root), for the live marks drawTgReads puts on it.
+let tgComponentFacets = null;
+
+/** #571: the CI and resources facets from a terragucci repo's components
+ * graph: component -> its declared job ({jobName, needs, wave, alsoIn}), and
+ * component -> the resources its root holds. */
+function takeTerragucciFacets(m) {
+  const tg = m && m.terragucciComponents;
+  tgComponentFacets = tg || null;
+  if (!tg) return;
+  ciByComponent = new Map((tg.jobs || []).map((job) => [job.component, job]));
+  ciForge = tg.forge || null;
+  resourcesByComponent = tg.resources || {};
+}
 
 async function loadCi() {
   if (publicMode) return; // #569: /api/ci is refused in a public view
+  if (terragucciComponentsRepo) return; // #571: carried on the graph response
   try {
     const q = lensParams(new URLSearchParams(view.env ? { env: view.env } : {}));
     const res = await apiFetch(`/api/ci?${q}`);
@@ -4301,6 +4583,7 @@ let resourcesByComponent = {};
 
 async function loadResources() {
   if (publicMode) return; // #569: /api/resources is refused in a public view
+  if (terragucciComponentsRepo) return; // #571: carried on the graph response
   try {
     const q = lensParams(new URLSearchParams(view.env ? { env: view.env } : {}));
     const res = await apiFetch(`/api/resources?${q}`);
@@ -5051,7 +5334,7 @@ function render(ir, svg, m) {
     // Mark each wave lane as a GitLab CI stage when the CI projection is loaded
     // (components view only) — waves ARE the pipeline's stages (`chant build
     // --components --generate gitlab`, see loadCi / #58).
-    if (view.components && ciByComponent.size) addGitlabWaveBadges(svgEl);
+    if (view.components && ciByComponent.size && !terragucciComponentsRepo) addGitlabWaveBadges(svgEl);
   }
   ensureZoomControls(g);
   ensureBackToInfra(g);
@@ -6199,6 +6482,7 @@ async function loadOnce(opts = {}, isCurrent = () => true) {
     // "still reading" claim on screen.
     pendingMembers = body.meta && body.meta.mode === "progressive" ? [...(body.meta.pending || [])] : [];
     pendingTotal = pendingMembers.length;
+    if (view.components) takeTerragucciFacets(body.meta);
     render(body.ir, body.svg, body.meta);
     afterPaint(body.ir);
   } catch (err) {
@@ -6318,7 +6602,8 @@ async function initPickers() {
   // estate never paints the components apology on its way to a picture.
   runtimeCapable = !!info.runtimeCapable;
   stacksCapable = !!info.stacksCapable;
-  const boot = bootZoom(info.memberKinds);
+  terragucciComponentsRepo = !!info.terragucciComponents;
+  const boot = bootZoom(info.memberKinds, terragucciComponentsRepo);
   if (boot !== "components") {
     applyZoom(boot);
     autoZoomFallback = false;

package/web/kiosk-runs.js

@@ -316,7 +316,7 @@ export function renderRun(host, answer, ui, { now = new Date(), pickJob = () =>
   host.replaceChildren();
   if (!answer || answer.error || answer.absent || !answer.doc) {
     host.appendChild(el("p", "r-note", answer ? answer.absent || answer.error : "Reading the run…"));
-    return { log: null };
+    return { log: null, steps: null, key: null };
   }
   const run = mergeRun(entry, answer.doc);
   const head = el("div", "r-head");
@@ -355,7 +355,7 @@ export function renderRun(host, answer, ui, { now = new Date(), pickJob = () =>
   if (skipped.length) jobsBox.appendChild(el("li", "r-job r-job-skipped", `${skipped.length} skipped, not for this event: ${skipped.map((j) => j.name).join(", ")}`));
   host.appendChild(jobsBox);
 
-  if (!job) return { log: null };
+  if (!job) return { log: null, steps: null, key: null };
   host.appendChild(el("div", "r-label", "Steps of the job, with its log"));
   const stepsBox = el("div", "r-steps");
   const sh = el("div", "r-steps-head");
@@ -395,7 +395,31 @@ export function renderRun(host, answer, ui, { now = new Date(), pickJob = () =>
     stepsBox.appendChild(row);
   });
   host.appendChild(stepsBox);
-  return { log: logEl, live: LIVE.has(job.status) };
+  return { log: logEl, steps: stepsBox, key: logEl ? logKey(run.id, job.name, open) : null, live: LIVE.has(job.status) };
+}
+
+/** Which log is open: the run, the job and the step. A new key means a different log, which the pane follows from its end. */
+export function logKey(runId, job, step) {
+  return `${runId}|${job}|${step}`;
+}
+
+/** How close to the end, in log lines, still counts as at the end: a viewer back within it is followed again. */
+export const FOLLOW_LINES = 3;
+
+/** Whether a scroller's view ends within `slack` pixels of its content's end. */
+export function nearEnd({ scrollTop, clientHeight, scrollHeight }, slack) {
+  return scrollTop + clientHeight >= scrollHeight - slack;
+}
+
+/**
+ * Whether the log pane follows its end after a redraw, the way a CI page's
+ * log does: always when a different log opened (another run, job or step,
+ * as when the next step starts); otherwise as the viewer left it, following
+ * unless they scrolled up away from the end.
+ */
+export function followsLog(prevKey, key, wasFollowing) {
+  if (key !== prevKey) return true;
+  return wasFollowing;
 }
 
 /** How long a viewer's pick holds before the kiosk follows the live run again. */
@@ -410,6 +434,9 @@ export function startRuns({ side, main }, { fetchJson, now = () => new Date(), s
   const s = { index: null, run: null, selected: null, picked: 0, ui: { job: null, open: 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.
+  let logShown = null;
+  let logFollow = true;
   const following = () => follow || now().getTime() - s.picked > PICK_HOLD_MS;
   const selectedId = () => {
     const runs = s.index && s.index.doc ? s.index.doc.runs : [];
@@ -427,10 +454,11 @@ export function startRuns({ side, main }, { fetchJson, now = () => new Date(), s
     // 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 });
-    // Keep the log's scroll unless it was at the bottom, so a live log follows.
+    // The redraw replaces the scrollers: keep where a viewer left them.
     const old = main.querySelector(".r-log");
-    const atBottom = !old || old.scrollTop + old.clientHeight >= old.scrollHeight - 8;
+    const oldSteps = main.querySelector(".r-steps");
     const prevTop = old ? old.scrollTop : 0;
+    const prevStepsTop = oldSteps ? oldSteps.scrollTop : 0;
     const drawn = renderRun(main, ans, s.ui, {
       now: now(),
       entry,
@@ -445,7 +473,34 @@ export function startRuns({ side, main }, { fetchJson, now = () => new Date(), s
         draw();
       },
     });
-    if (drawn.log) drawn.log.scrollTop = atBottom ? drawn.log.scrollHeight : prevTop;
+    logFollow = followsLog(logShown, drawn.key, logFollow);
+    const sameLog = drawn.key !== null && drawn.key === logShown;
+    logShown = drawn.key;
+    if (!drawn.log) {
+      if (drawn.steps) drawn.steps.scrollTop = prevStepsTop;
+      return;
+    }
+    const log = drawn.log;
+    const steps = drawn.steps;
+    if (logFollow) {
+      log.scrollTop = log.scrollHeight;
+      // The steps list scrolls too: bring the log's end into its view.
+      steps.scrollTop = sameLog ? prevStepsTop : 0;
+      const below = log.getBoundingClientRect().bottom - steps.getBoundingClientRect().bottom;
+      if (below > 0) steps.scrollTop += below + 8;
+    } else {
+      log.scrollTop = prevTop;
+      steps.scrollTop = prevStepsTop;
+    }
+    // A viewer scrolling either list decides whether the pane follows: near the log's end it does again.
+    const line = log.querySelector(".r-log-line");
+    const slack = (line ? line.getBoundingClientRect().height || 18 : 18) * FOLLOW_LINES;
+    const onScroll = () => {
+      const logEnd = log.getBoundingClientRect().bottom - steps.getBoundingClientRect().bottom;
+      logFollow = nearEnd(log, slack) && logEnd <= slack;
+    };
+    log.addEventListener("scroll", onScroll, { passive: true });
+    steps.addEventListener("scroll", onScroll, { passive: true });
   };
   const hold = () => {
     follow = false;

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 { mergeRun, newerOf, agoWords, defaultJob, defaultStep, durationWords, jobOrder, liveRun, placeWords, sidebarRuns, splitSkipped, STATUS_TONE, triggerWords } from "./kiosk-runs.js";
+import { FOLLOW_LINES, followsLog, logKey, nearEnd, mergeRun, newerOf, agoWords, defaultJob, defaultStep, durationWords, jobOrder, liveRun, placeWords, 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"));
@@ -96,3 +96,24 @@ describe("one run, from the index and its own document (#569)", () => {
     expect(mergeRun(entry, null)).toBe(entry);
   });
 });
+
+describe("the log pane follows its end, like a CI page's log", () => {
+  const key = logKey(448, "apply-wave-2", 2);
+  it("follows a log that just opened: another run, job or step", () => {
+    expect(followsLog(null, key, false)).toBe(true);
+    expect(followsLog(logKey(447, "apply-wave-2", 2), key, false)).toBe(true);
+    expect(followsLog(logKey(448, "apply-wave-1", 2), key, false)).toBe(true);
+    expect(followsLog(logKey(448, "apply-wave-2", 1), key, false)).toBe(true);
+  });
+  it("on the same log, keeps what the viewer chose", () => {
+    expect(followsLog(key, key, true)).toBe(true);
+    expect(followsLog(key, key, false)).toBe(false);
+  });
+  it("counts a view within a few lines of the end as at the end", () => {
+    const slack = 18 * FOLLOW_LINES;
+    expect(nearEnd({ scrollTop: 600, clientHeight: 400, scrollHeight: 1000 }, slack)).toBe(true);
+    expect(nearEnd({ scrollTop: 600 - slack, clientHeight: 400, scrollHeight: 1000 }, slack)).toBe(true);
+    expect(nearEnd({ scrollTop: 600 - slack - 1, clientHeight: 400, scrollHeight: 1000 }, slack)).toBe(false);
+    expect(nearEnd({ scrollTop: 0, clientHeight: 400, scrollHeight: 1000 }, slack)).toBe(false);
+  });
+});