@intentius/behold 0.29.16 → 0.29.18

package/web/app.js

@@ -21,7 +21,9 @@ 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 { componentMarks as tgComponentMarks, waveOfKey as tgWaveOfKey } from "./terragucci-components-live.js";
+import { componentMarks as tgComponentMarks, runsCommit as tgRunsCommit, waveOfKey as tgWaveOfKey } from "./terragucci-components-live.js";
+import { FORGES, MARK, componentsForge, forgeOfName, iconSvg, markLink, markTitle, waveJobUrl } from "./forge-mark.js";
+import { TOOLS, orderTools } from "./tool-mark.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";
@@ -284,7 +286,7 @@ function recolorNodesByCategory(ir) {
     if (bar) bar.setAttribute("fill", "var(--runtime)");
   }
 }
-onThemeChange(() => recolorNodesByCategory());
+onThemeChange(() => (recolorNodesByCategory(), drawTgReads())); // behold#571: drawTgReads redraws the marks in the theme's colours
 
 // #229, the one motion signature behold spends on data: a node whose drift
 // `_status` CHANGED between two renders pulses once in the colour it just
@@ -3487,12 +3489,16 @@ function paintTgProgress() {
 // says which run all of it comes from. `view.focus` brings some roots forward
 // and dims the rest. From the pull request's plan, or from the run view once
 // 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)" };
+// behold#571: the state colours as the frame draws them on cards and boxes, each legible on every ground (theme.js frameInks).
+const TG_TONE = { plan: "var(--frame-pending, var(--pending))", wait: "var(--frame-foreign, var(--foreign))", busy: "var(--frame-runtime, var(--runtime))", ok: "var(--frame-managed, var(--managed))", bad: "var(--frame-degraded, var(--degraded))", idle: "var(--frame-neutral, var(--neutral))" };
+/** The same, for words on a card: read on the card's own ground. */
+const TG_CARD_TONE = Object.fromEntries(Object.entries(TG_TONE).map(([k, v]) => [k, v.replace("--frame-", "--frame-card-")]));
 function drawTgReads() {
   if (embedOpts.bare) queueMicrotask(kioskDecorate); // behold#571: once this draw is done
   watchTgRuns(); // #571: the wave boxes' jobs, while the components zoom is on screen
   const svg = document.querySelector("#graph svg");
   if (!svg) return;
+  drawPipelineMarks(svg); // behold#571: the forge and tool marks, before the wave boxes' status finds room around them
   for (const old of svg.querySelectorAll("[data-tg-reads]")) old.remove();
   for (const old of svg.querySelectorAll("[data-tg-root]")) old.remove();
   for (const r of svg.querySelectorAll("rect[data-tg-stroke0]")) {
@@ -3722,8 +3728,9 @@ function drawTgReads() {
   };
   // Text to keep clear: every text drawn so far (cards, box names, badges,
   // facts, the checkout's own edge labels), a little grown.
-  const textBoxes = [...svg.querySelectorAll("text")]
-    .filter((t) => !t.closest("[data-tg-reads]") && t.getAttribute("visibility") !== "hidden" && (t.textContent || "").trim())
+  // behold#571: and each wave box's forge and tool marks, icons too.
+  const textBoxes = [...svg.querySelectorAll("text"), ...svg.querySelectorAll(".pipeline-marks")]
+    .filter((t) => !t.closest("[data-tg-reads]") && t.getAttribute("visibility") !== "hidden" && t.style.display !== "none" && (t.textContent || "").trim())
     .map(boxOf)
     .filter(Boolean)
     .map((b) => grow(b, 3));
@@ -3744,7 +3751,7 @@ function drawTgReads() {
   };
   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)"]]) {
+  for (const [id, color] of [["tg-arrow-unknown", "var(--frame-foreign, var(--foreign))"], ["tg-arrow-planned", "var(--frame-pending, var(--pending))"], ["tg-arrow-applied", "var(--frame-focus, var(--focus))"]]) {
     if (svg.querySelector(`#${id}`)) continue;
     const m = make("marker", { id, viewBox: "0 0 10 10", refX: 9, refY: 5, markerWidth: 7, markerHeight: 7, orient: "auto-start-reverse", "data-tg-reads": "marker" });
     m.appendChild(make("path", { d: "M0,0 L10,5 L0,10 z", fill: color }));
@@ -3755,7 +3762,7 @@ function drawTgReads() {
   for (const e of edges) {
     const card = tgReadCardIds(tgAnswer, e).map((id) => svg.querySelector('[data-node-id="' + CSS.escape(id) + '"]')).find(Boolean);
     const kind = e.unknown.length ? "unknown" : e.outputs === "planned" ? "planned" : "applied";
-    const color = kind === "unknown" ? "var(--foreign)" : kind === "planned" ? "var(--pending)" : "var(--focus)";
+    const color = kind === "unknown" ? "var(--frame-foreign, var(--foreign))" : kind === "planned" ? "var(--frame-pending, var(--pending))" : "var(--frame-focus, var(--focus))";
     if (card) {
       // The tag on the reader's card, at its bottom right, clear of the card's own "root:" line.
       const rect = card.querySelector("rect");
@@ -3796,6 +3803,11 @@ function drawTgReads() {
     drawn.push({ p0, p1 });
     labels.push({ e, p0, p1, color, kind });
   }
+  // behold#571: the marks step aside from the read lines, and a box lifts its marks off an arrowhead (its box then reaches higher).
+  for (const [rect] of clearMarksOfReads(svg, drawn)) {
+    const now = boxOf(rect);
+    for (const b of boxes) if (now && Math.abs(b.x - now.x) < 0.5 && Math.abs(b.x2 - now.x2) < 0.5 && Math.abs(b.y2 - now.y2) < 0.5) b.y = now.y;
+  }
   // Each read's words beside its line: covering no text, crossing no line,
   // over as few cards and box headers as can be.
   const cardBoxes = cardEls.map((g) => cardBoxOf.get(g)).filter(Boolean);
@@ -3811,10 +3823,12 @@ function drawTgReads() {
     const dx = l.p1.x - l.p0.x;
     const dy = l.p1.y - l.p0.y;
     let best = null;
-    for (const t of [0.5, 0.35, 0.65, 0.2, 0.8]) {
+    // behold#571: the label's own line may run under it; every other read line may not.
+    const others = drawn.filter((d) => !(d.p0 === l.p0 && d.p1 === l.p1));
+    for (const t of [0.5, 0.35, 0.65, 0.2, 0.8, 0.1, 0.9]) {
       const m = { x: l.p0.x + dx * t, y: l.p0.y + dy * t };
-      // Beside the line, then farther off it into open ground: the boxes sit close.
-      const spots = [];
+      // On the line itself, slid along its width; then beside the line, then farther off it into open ground: the boxes sit close.
+      const spots = [-0.35, -0.2, 0, 0.2, 0.35].map((f) => ({ x: m.x + f * w, y: m.y, off: 1 + Math.abs(f) * 4 }));
       for (let k = 0; k < 6; k++) {
         const off = k * (h + 6);
         spots.push(
@@ -3826,11 +3840,14 @@ 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 + edgeIn(r);
+        const lineHits = others.filter((d) => crosses(d.p0, d.p1, r)).length;
         // Outside the boxes' own span the label may leave the drawing when the view is fitted: keep it in.
+        // behold#571: never above the top box, where the caption says which run the marks are from.
         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;
-        const score = out * 80 + lineHits * 1e6 + sum(r, textBoxes, 50) + sum(r, placed, 50) + sum(r, cardBoxes, 1) + sum(r, headers, 1.5) + sum(r, boxes, 0.15) + Math.abs(t - 0.5) * 300 + c.off * 4;
+        const out = span ? (r.x2 - r.x) * (r.y2 - r.y) - overlap(r, { x: span.x - 40, y: span.y, x2: span.x2 + 40, y2: span.y2 + 40 }) : 0;
+        // behold#571: a card or a box's title row under the words costs as much as text does, so a label sits on open ground between boxes.
+        // A dependency line under a label costs less than a card or text does, and far less than another read's line.
+        const score = out * 80 + lineHits * 1e6 + edgeIn(r) * 30 + Math.hypot(c.x - m.x, c.y - m.y) * 2 + sum(r, textBoxes, 50) + sum(r, placed, 50) + sum(r, cardBoxes, 50) + sum(r, headers, 40) + sum(r, boxes, 0.15) + Math.abs(t - 0.5) * 300 + c.off * 4;
         if (!best || score < best.score) best = { c, r, score };
       }
     }
@@ -3928,7 +3945,7 @@ function drawTgComponentMarks(svg, { drawnAnswer, focus, boxOf, make, edgePoints
   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]"))
+      .filter((t) => t.getAttribute("visibility") !== "hidden" && (t.textContent || "").trim() && !t.closest("[data-tg-reads]") && !t.closest(".pipeline-marks"))
       .map(boxOf)
       .filter(Boolean);
   const cardEls = [...svg.querySelectorAll("[data-node-id]")];
@@ -3980,7 +3997,7 @@ function drawTgComponentMarks(svg, { drawnAnswer, focus, boxOf, make, edgePoints
     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);
+    const t = make("text", { "data-tg-root": "card", x, y, "font-size": 12, "font-weight": 700, fill: quiet ? "var(--frame-card-muted, var(--muted))" : TG_CARD_TONE[m.tone] || TG_CARD_TONE.idle }, 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)"));
@@ -4008,6 +4025,10 @@ function drawTgComponentMarks(svg, { drawnAnswer, focus, boxOf, make, edgePoints
     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));
+    // behold#571: the wave's forge and tool marks (drawPipelineMarks) left the job's status its room after the title.
+    const row = svg.querySelector(`.pipeline-marks[data-pm-wave="${n}"]`);
+    const rb = row && row.style.display !== "none" ? boxOf(row) : null;
+    if (rb) placed.push(rb);
     // The job's status: after the title on its line, else at the right of that line.
     if (w.status && tb) {
       const size = 12;
@@ -4079,7 +4100,7 @@ function markTerragucciCards() {
     tag.setAttribute("text-anchor", "end");
     tag.setAttribute("font-size", "11");
     tag.setAttribute("font-weight", "600");
-    tag.setAttribute("fill", corner.tone === "drift" ? "var(--degraded)" : corner.tone === "wave" ? "var(--pending)" : "var(--muted)");
+    tag.setAttribute("fill", corner.tone === "drift" ? "var(--frame-card-degraded, var(--degraded))" : corner.tone === "wave" ? "var(--frame-card-pending, var(--pending))" : "var(--frame-card-muted, var(--muted))");
     tag.textContent = `${corner.text} · ${markAge(marks)}`;
     const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
     title.setAttribute("data-tg-mark", "title");
@@ -5448,36 +5469,455 @@ function wireEdgeHighlight(svgEl, ir) {
   }
 }
 
-// GitLab's tanuki, one filled silhouette (the widely-used single-path mark),
-// scaled into a small badge. Self-contained (no external URL) so it survives the
-// static export + the CSP.
-const GITLAB_TANUKI =
-  "M23.6004 9.5927l-.0337-.0862L20.3.9814a.851.851 0 00-.3362-.405.8748.8748 0 00-.9997.0539.8748.8748 0 00-.29.4399l-2.2055 6.748H7.5375l-2.2055-6.748a.8573.8573 0 00-.29-.4412.8748.8748 0 00-.9997-.0537.8585.8585 0 00-.3362.405L.4332 9.5065l-.0325.0862a6.0657 6.0657 0 002.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 001.2197 0l1.4995-1.1321 2.462-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 002.0094-7.003z";
 const SVGNS = "http://www.w3.org/2000/svg";
 
-// Stamp a GitLab tanuki in the top-right corner of each wave lane — a visual cue
-// that the waves ARE the GitLab CI pipeline's stages (job `stage` = `wave-N`).
-// Post-processes the inlined SVG: each wave box is a `<rect>` immediately
-// followed by its `<text>wave-N</text>` title, so the rect gives the corner.
-function addGitlabWaveBadges(svgEl) {
-  const SIZE = 17;
-  for (const text of svgEl.querySelectorAll("text")) {
-    if (!/^wave-/i.test((text.textContent || "").trim())) continue;
-    const rect = text.previousElementSibling;
-    if (!rect || rect.tagName.toLowerCase() !== "rect") continue;
-    const rx = parseFloat(rect.getAttribute("x"));
-    const ry = parseFloat(rect.getAttribute("y"));
-    const rw = parseFloat(rect.getAttribute("width"));
-    const g = document.createElementNS(SVGNS, "g");
-    g.setAttribute("class", "gitlab-wave-badge");
-    g.setAttribute("transform", `translate(${rx + rw - SIZE - 12}, ${ry + 10}) scale(${SIZE / 24})`);
-    const path = document.createElementNS(SVGNS, "path");
-    path.setAttribute("d", GITLAB_TANUKI);
-    path.setAttribute("fill", "#FC6D26"); // GitLab brand orange
-    const title = document.createElementNS(SVGNS, "title");
-    title.textContent = "This wave is a GitLab CI stage (chant → GitLab pipeline)";
-    g.append(title, path);
-    rect.parentNode.insertBefore(g, text);
+// behold#571: the marks on each wave box's title row of the Components view,
+// so the CI projection says which forge runs each wave and which tools its
+// job runs: the forge's mark (linked to the wave's job when a report carried
+// its URL), then each tool's (web/forge-mark.js, web/tool-mark.js). Each is
+// a small icon and the name beside it. Right-aligned in the row after the
+// title; when the row is short the icons go first, then the marks from the
+// end, so a name stays. On chant's own GitLab-generated projection the row
+// holds the forge chant generated for (the tanuki since #58).
+const MARK_STEP = 6; // between two marks in a row
+
+/** What a wave's row says: its forge, its job and its tools; null for no row. */
+function pipelineMarksFor(n) {
+  if (!view.components) return null;
+  if (terragucciComponentsRepo && tgComponentFacets) {
+    const jobs = (tgComponentFacets.jobs || []).filter((j) => j.wave === n);
+    // The repo's tools, and what the wave's roots carry inside them (a SQL Yodeler project under app/).
+    const roots = jobs.map((j) => (tgComponentFacets.roots && tgComponentFacets.roots[j.component]) || j.component);
+    const carried = roots.flatMap((r) => (tgComponentFacets.rootTools && tgComponentFacets.rootTools[r]) || []);
+    return { forge: componentsForge(tgComponentFacets, tgAnswer), job: jobs[0] ? jobs[0].jobName : null, tools: orderTools([...(tgComponentFacets.tools || []), ...carried]) };
+  }
+  if (ciByComponent.size) return { forge: forgeOfName(ciForge), job: null, tools: [], projection: true };
+  return null;
+}
+
+/** One mark: an icon and the name, with its tooltip; an `<a>` for the forge so it can link. */
+function markElement(tag, cls, spec, name, tip, light) {
+  const el = document.createElementNS(SVGNS, tag);
+  el.setAttribute("class", `pm-mark ${cls}`);
+  const title = document.createElementNS(SVGNS, "title");
+  title.textContent = tip;
+  el.appendChild(title);
+  if (spec) {
+    const icon = iconSvg(document, spec, MARK.size, { light });
+    icon.setAttribute("class", "pm-icon");
+    el.appendChild(icon);
+  }
+  const text = document.createElementNS(SVGNS, "text");
+  text.setAttribute("class", "pm-label");
+  text.setAttribute("font-size", String(MARK.font));
+  text.setAttribute("font-weight", "600");
+  text.setAttribute("fill", "var(--muted)");
+  text.setAttribute("dominant-baseline", "central");
+  text.textContent = name;
+  el.appendChild(text);
+  return el;
+}
+
+/** Each mark's label width, measured. */
+function markWidths(marks) {
+  return marks.map((m) => {
+    const label = m.querySelector(".pm-label");
+    try {
+      return label.getComputedTextLength() || label.textContent.length * MARK.font * 0.6;
+    } catch {
+      return label.textContent.length * MARK.font * 0.6;
+    }
+  });
+}
+
+/** Put a row's marks at `xs` (each mark's left), `icons` with or without their icon; marks past `k` hidden. */
+function placeMarks(row, marks, widths, xs, icons, k, cys = null) {
+  const cy0 = Number(row.getAttribute("data-pm-cy"));
+  const show = (n, on) => (n.style.display = on ? "" : "none");
+  show(row, k > 0);
+  marks.forEach((m, i) => {
+    show(m, i < k);
+    if (i >= k) return;
+    const icon = m.querySelector(".pm-icon");
+    const label = m.querySelector(".pm-label");
+    const cy = cys ? cys[i] : cy0;
+    let x = xs[i];
+    if (icon) show(icon, icons);
+    if (icon && icons) {
+      icon.setAttribute("x", x.toFixed(1));
+      icon.setAttribute("y", (cy - MARK.size / 2).toFixed(1));
+      x += MARK.size + MARK.gap;
+    }
+    label.setAttribute("x", x.toFixed(1));
+    label.setAttribute("y", cy.toFixed(1));
+  });
+}
+
+/** One mark's width, with or without its icon. */
+const markWidth = (m, w, icons) => w + (icons && m.querySelector(".pm-icon") ? MARK.size + MARK.gap : 0);
+
+/**
+ * The title row: every mark with its icon, right-aligned in the rightmost
+ * gap between `left` and the box's right edge that the edges crossing the
+ * row (`data-pm-avoid`) leave. True when they fit; else nothing is placed.
+ */
+function titleRowFits(row, left) {
+  const right = Number(row.getAttribute("data-pm-right"));
+  const marks = [...row.querySelectorAll(":scope > .pm-mark")];
+  const widths = markWidths(marks);
+  const need = marks.reduce((s, m, i) => s + markWidth(m, widths[i], true), 0) + MARK_STEP * (marks.length - 1);
+  const cuts = (row.getAttribute("data-pm-avoid") || "").split(",").filter(Boolean).map(Number).filter((x) => x > left && x < right).sort((a, b) => a - b);
+  const gaps = [];
+  let at = left;
+  for (const x of cuts) {
+    if (x - 5 > at) gaps.push([at, x - 5]);
+    at = Math.max(at, x + 5);
+  }
+  if (right > at) gaps.push([at, right]);
+  const gap = gaps.reverse().find(([a, z]) => z - a >= need);
+  if (!gap) return false;
+  const xs = [];
+  let x = gap[1] - need;
+  marks.forEach((m, i) => {
+    xs.push(x);
+    x += markWidth(m, widths[i], true) + MARK_STEP;
+  });
+  placeMarks(row, marks, widths, xs, true, marks.length);
+  row.setAttribute("data-pm-mode", "title");
+  return true;
+}
+
+/**
+ * The marks' own row, just under the title: the box grows upward by a row
+ * and its title moves up into it, so no card moves and none is covered. The
+ * marks stay one cluster, the forge first, at the row's start or end where
+ * no edge crosses it, else at its start with the edge behind. They keep
+ * their icons: short of room the cluster runs onto another row, and the box
+ * grows by that one too. Only at phone width do the icons go
+ * first, while one row of names alone holds them.
+ */
+function marksOwnRow(row, rect, title, grown = 0) {
+  const G = MARK.size + 6;
+  const left = Number(row.getAttribute("data-pm-start"));
+  const right = Number(row.getAttribute("data-pm-end"));
+  const cy = Number(row.getAttribute("data-pm-cy"));
+  const avoid = (row.getAttribute("data-pm-avoid") || "").split(",").filter(Boolean).map(Number);
+  const marks = [...row.querySelectorAll(":scope > .pm-mark")];
+  const widths = markWidths(marks);
+  // One cluster, the forge first, then the tools: in rows when one row can't hold it, each row's
+  // part together. A part goes at the row's start or its end, whichever an edge doesn't cross
+  // (`clear`); else at the start, any edge passing behind it.
+  const lay = (icons, clear, maxRows) => {
+    const parts = [[]];
+    let used = 0;
+    for (let i = 0; i < marks.length; i++) {
+      const w = markWidth(marks[i], widths[i], icons);
+      const part = parts[parts.length - 1];
+      const need = used + (part.length ? MARK_STEP : 0) + w;
+      if (part.length && need > right - left) {
+        parts.push([i]);
+        used = w;
+      } else {
+        part.push(i);
+        used = need;
+      }
+      if (w > right - left || parts.length > maxRows) return null;
+    }
+    const xs = [];
+    const rowOf = [];
+    for (const [r, part] of parts.entries()) {
+      const width = part.reduce((s, i) => s + markWidth(marks[i], widths[i], icons), 0) + MARK_STEP * (part.length - 1);
+      const crosses = (x0) => avoid.some((e) => e > x0 - 4 && e < x0 + width + 4);
+      let x0 = left;
+      if (clear) {
+        const spot = [left, right - width].find((x) => !crosses(x));
+        if (spot === undefined) return null;
+        x0 = spot;
+      }
+      for (const i of part) {
+        xs[i] = x0;
+        rowOf[i] = r;
+        x0 += markWidth(marks[i], widths[i], icons) + MARK_STEP;
+      }
+    }
+    return { xs, rowOf, rows: parts.length };
+  };
+  // Phone width is the viewer's screen: the kiosk frames this page narrow on a wide one.
+  const phone = (() => {
+    try {
+      return (window.top || window).innerWidth <= 600;
+    } catch {
+      return window.innerWidth <= 600;
+    }
+  })();
+  // A second pass (`grown`, the rows the box already grew by) keeps within those rows.
+  const most = grown || marks.length;
+  const tries = [[true, true, 1], [true, false, 1]];
+  if (phone) tries.push([false, true, 1], [false, false, 1]);
+  tries.push([true, true, most], [true, false, most], [false, true, most], [false, false, most]);
+  let fit = null;
+  for (const [icons, step, maxRows] of tries) {
+    const l = lay(icons, step, maxRows);
+    if (l) {
+      fit = { ...l, icons };
+      break;
+    }
+  }
+  row.setAttribute("data-pm-mode", "row");
+  if (!fit) return grown ? false : placeMarks(row, marks, widths, [], true, 0);
+  const rows = grown || fit.rows;
+  if (!grown) {
+    const grow = G * rows;
+    rect.setAttribute("y", String(Number(rect.getAttribute("y")) - grow));
+    rect.setAttribute("height", String(Number(rect.getAttribute("height")) + grow));
+    if (title) title.setAttribute("y", String(Number(title.getAttribute("y")) - grow));
+    row.setAttribute("data-pm-rows", String(rows));
+  }
+  // The last row stands where the title stood, just over the cards; the others above it.
+  const cys = fit.rowOf.map((r) => cy - (rows - 1 - r) * G);
+  placeMarks(row, marks, widths, fit.xs, fit.icons, marks.length, cys);
+  return true;
+}
+
+/**
+ * Once the reads are drawn: each wave box's marks stand clear of the read
+ * lines that cross their row too, where the row has room; else they stay.
+ */
+function clearMarksOfReads(svgEl, lines) {
+  for (const row of svgEl.querySelectorAll(".pipeline-marks")) {
+    if (row.style.display === "none") continue;
+    const m = /translate\(\s*([-\d.]+)[\s,]+([-\d.]+)/.exec((row.parentNode.getAttribute && row.parentNode.getAttribute("transform")) || "");
+    const dx = m ? Number(m[1]) : 0;
+    const dy = m ? Number(m[2]) : 0;
+    const G = MARK.size + 6;
+    const cy = Number(row.getAttribute("data-pm-cy"));
+    const own = row.getAttribute("data-pm-mode") === "row";
+    const top = cy - (own ? (Number(row.getAttribute("data-pm-rows")) || 1) * G : 0) - MARK.size / 2 - 2 + dy;
+    const bottom = cy + MARK.size / 2 + 2 + dy;
+    const xs = [];
+    for (const { p0, p1 } of lines) {
+      if (Math.max(p0.y, p1.y) < top || Math.min(p0.y, p1.y) > bottom) continue;
+      for (const y of [top, (top + bottom) / 2, bottom]) {
+        const f = p1.y === p0.y ? 0.5 : (y - p0.y) / (p1.y - p0.y);
+        if (f >= 0 && f <= 1) xs.push(p0.x + (p1.x - p0.x) * f - dx);
+      }
+    }
+    if (xs.length) stepAside(row, xs, own);
+  }
+  return liftOffArrowheads(svgEl, lines);
+}
+
+/** Lay a row out again clear of `xs` too, or leave it as it was where that doesn't fit. */
+function stepAside(row, xs, own) {
+  {
+    const was = row.getAttribute("data-pm-avoid") || "";
+    row.setAttribute("data-pm-avoid", [was, ...xs.map((x) => x.toFixed(1))].filter(Boolean).join(","));
+    // The old places, should the new avoidance not fit.
+    const keep = [...row.querySelectorAll("[x], [y]")].map((n) => [n, n.getAttribute("x"), n.getAttribute("y"), n.style.display]);
+    const ok = own ? marksOwnRow(row, null, null, Number(row.getAttribute("data-pm-rows")) || 1) : titleRowFits(row, Number(row.getAttribute("data-pm-left")));
+    if (!ok) {
+      row.setAttribute("data-pm-avoid", was);
+      for (const [n, x, y, d] of keep) {
+        if (x !== null) n.setAttribute("x", x);
+        if (y !== null) n.setAttribute("y", y);
+        n.style.display = d;
+      }
+    }
+  }
+}
+
+/** How far a read's arrowhead reaches back from its tip, and how wide it spreads (marker 7 x stroke 3). */
+const ARROWHEAD = { length: 22, half: 11 };
+
+/**
+ * No arrowhead sits on a mark. A read that ends in a box whose marks its head
+ * would cover lifts the box's title and marks a row up, the box growing by
+ * that row, so the head lands on open ground just over the card. Returns each
+ * lifted box as [its rect, the rows it grew by].
+ */
+function liftOffArrowheads(svgEl, lines) {
+  const G = MARK.size + 6;
+  const lifted = [];
+  const hit = (a, b) => a.x < b.x2 && a.x2 > b.x && a.y < b.y2 && a.y2 > b.y;
+  const heads = lines.map(({ p0, p1 }) => {
+    const len = Math.hypot(p1.x - p0.x, p1.y - p0.y) || 1;
+    const bx = p1.x - ((p1.x - p0.x) / len) * ARROWHEAD.length;
+    const by = p1.y - ((p1.y - p0.y) / len) * ARROWHEAD.length;
+    const h = ARROWHEAD.half;
+    return { x: Math.min(p1.x, bx) - h, y: Math.min(p1.y, by) - h, x2: Math.max(p1.x, bx) + h, y2: Math.max(p1.y, by) + h };
+  });
+  for (const row of svgEl.querySelectorAll(".pipeline-marks")) {
+    if (row.style.display === "none") continue;
+    const m = /translate\(\s*([-\d.]+)[\s,]+([-\d.]+)/.exec((row.parentNode.getAttribute && row.parentNode.getAttribute("transform")) || "");
+    const dx = m ? Number(m[1]) : 0;
+    const dy = m ? Number(m[2]) : 0;
+    const boxes = [...row.querySelectorAll(":scope > .pm-mark")]
+      .filter((mk) => mk.style.display !== "none")
+      .map((mk) => {
+        try {
+          const b = mk.getBBox();
+          return { x: b.x + dx - 2, y: b.y + dy - 2, x2: b.x + b.width + dx + 2, y2: b.y + b.height + dy + 2 };
+        } catch {
+          return null;
+        }
+      })
+      .filter(Boolean);
+    if (!heads.some((h) => boxes.some((b) => hit(h, b)))) continue;
+    const rect = svgEl.querySelector(`rect[data-group-id="wave-${row.getAttribute("data-pm-wave")}"]`);
+    const title = row.nextElementSibling && row.nextElementSibling.tagName.toLowerCase() === "text" ? row.nextElementSibling : null;
+    if (!rect) continue;
+    if (!rect.hasAttribute("data-pm-y0")) {
+      rect.setAttribute("data-pm-y0", rect.getAttribute("y"));
+      rect.setAttribute("data-pm-h0", rect.getAttribute("height"));
+    }
+    if (title && !title.hasAttribute("data-pm-ty0")) title.setAttribute("data-pm-ty0", title.getAttribute("y"));
+    const titleCy = title ? Number(title.getAttribute("y")) : null;
+    rect.setAttribute("y", String(Number(rect.getAttribute("y")) - G));
+    rect.setAttribute("height", String(Number(rect.getAttribute("height")) + G));
+    if (title) title.setAttribute("y", String(titleCy - G));
+    row.setAttribute("data-pm-cy", String(Number(row.getAttribute("data-pm-cy")) - G));
+    for (const n of row.querySelectorAll(".pm-icon, .pm-label")) n.setAttribute("y", String(Number(n.getAttribute("y")) - G));
+    // The job's status rides its title's line.
+    if (title) {
+      const tb = title.getBBox();
+      for (const s of svgEl.querySelectorAll('[data-tg-root="wave-status"]')) {
+        const y = Number(s.getAttribute("y"));
+        if (Math.abs(y - (tb.y + tb.height / 2 + G + dy)) < tb.height) s.setAttribute("y", String(y - G));
+      }
+    }
+    lifted.push([rect, G]);
+  }
+  return lifted;
+}
+
+/** The x's at which the graph's edges cross a band of the svg (`y0`..`y1`), in the svg's own coordinates. */
+function edgeXsIn(svgEl, y0, y1) {
+  const xs = [];
+  for (const path of svgEl.querySelectorAll("g[data-edge-from] path, g[data-edge-from] line")) {
+    let len = 0;
+    try {
+      len = path.getTotalLength();
+    } catch {
+      continue;
+    }
+    for (let d = 0; d <= len; d += 3) {
+      const p = path.getPointAtLength(d);
+      if (p.y >= y0 && p.y <= y1) xs.push(p.x);
+    }
+  }
+  return xs;
+}
+
+/** The width of the job's status words a terragucci wave box will say after its title, or 0. */
+function waveStatusRoom(svgEl, n) {
+  if (!(terragucciComponentsRepo && tgComponentFacets && tgAnswer && !tgAnswer.error)) return 0;
+  let w;
+  try {
+    w = tgComponentMarks(tgAnswerDrawn(), tgProgress, tgComponentFacets, { runs: tgRuns, pin: view.run || null }).waves[n];
+  } catch {
+    return 0;
+  }
+  if (!w || !w.status) return 0;
+  const probe = document.createElementNS(SVGNS, "text");
+  probe.setAttribute("font-size", "12");
+  probe.setAttribute("font-weight", "700");
+  probe.textContent = `· ${w.status.words}`;
+  svgEl.appendChild(probe);
+  let len = 0;
+  try {
+    len = probe.getComputedTextLength();
+  } catch {
+    len = probe.textContent.length * 7;
+  }
+  probe.remove();
+  return len + 6 + 10;
+}
+
+/** Draw every wave box's row afresh: in the title row when the marks fit there with their icons, else in their own row under it. */
+function drawPipelineMarks(svgEl) {
+  for (const old of svgEl.querySelectorAll(".pipeline-marks")) old.remove();
+  // A box an earlier draw grew for its marks' row goes back as pinhole drew it.
+  for (const r of svgEl.querySelectorAll("rect[data-pm-y0]")) {
+    r.setAttribute("y", r.getAttribute("data-pm-y0"));
+    r.setAttribute("height", r.getAttribute("data-pm-h0"));
+    r.removeAttribute("data-pm-y0");
+    r.removeAttribute("data-pm-h0");
+  }
+  for (const tx of svgEl.querySelectorAll("text[data-pm-ty0]")) {
+    tx.setAttribute("y", tx.getAttribute("data-pm-ty0"));
+    tx.removeAttribute("data-pm-ty0");
+  }
+  const light = kioskLight();
+  const pin = view.run || null;
+  const commit = tgRunsCommit(pin, tgProgress);
+  for (const rect of svgEl.querySelectorAll("rect[data-group-id]")) {
+    const key = rect.getAttribute("data-group-id");
+    const n = tgWaveOfKey(key);
+    if (n === null) continue;
+    const what = pipelineMarksFor(n);
+    if (!what) continue;
+    const forge = what.forge && FORGES[what.forge] ? what.forge : null;
+    const tools = what.tools.filter((t) => TOOLS[t]);
+    if (!forge && !tools.length) continue;
+    // The box's title: the text right after its rect (pinhole's order), inside the box's group once wrapped.
+    let title = null;
+    for (let el = rect.nextElementSibling; el; el = el.nextElementSibling) {
+      if (el.tagName.toLowerCase() === "text") {
+        title = el;
+        break;
+      }
+      if (el.tagName.toLowerCase() === "rect") break;
+    }
+    const rx = Number(rect.getAttribute("x"));
+    const ry = Number(rect.getAttribute("y"));
+    const rw = Number(rect.getAttribute("width"));
+    let tb = null;
+    try {
+      tb = title ? title.getBBox() : null;
+    } catch {
+      tb = null;
+    }
+    const cy = tb && tb.height ? tb.y + tb.height / 2 : ry + 10 + MARK.size / 2;
+    const row = document.createElementNS(SVGNS, "g");
+    row.setAttribute("class", "pipeline-marks");
+    row.setAttribute("data-pm-wave", String(n));
+    row.setAttribute("data-pm-right", String(rx + rw - MARK.pad));
+    row.setAttribute("data-pm-cy", String(cy));
+    row.setAttribute("data-pm-start", String(rx + 12));
+    row.setAttribute("data-pm-end", String(rx + rw - 10));
+    if (forge) {
+      const f = FORGES[forge];
+      const url = what.projection ? null : markLink(waveJobUrl(tgAnswer, n, commit), forge);
+      const tip = what.projection ? `${key} is a ${f.label} CI stage of the pipeline chant generates` : markTitle(what.job, forge);
+      const a = markElement("a", `pm-forge pm-forge-${forge}`, f, f.label, tip, light);
+      if (url) {
+        a.setAttribute("href", url);
+        a.setAttribute("target", "_blank");
+        a.setAttribute("rel", "noopener noreferrer");
+      }
+      row.appendChild(a);
+    }
+    for (const t of tools) {
+      const tool = TOOLS[t];
+      row.appendChild(markElement("g", `pm-tool pm-tool-${t}`, tool.icon, tool.name, what.job ? `${what.job} runs ${tool.name}` : `Runs ${tool.name}`, light));
+    }
+    // The edges that run through the title row, so the marks stand clear of them. Pinhole draws edges
+    // in the svg's coordinates and a moved box carries a translate, so their x's are taken back into the box's.
+    const shift = (() => {
+      const m = /translate\(\s*([-\d.]+)/.exec((rect.parentNode.getAttribute && rect.parentNode.getAttribute("transform")) || "");
+      return m ? Number(m[1]) : 0;
+    })();
+    const band = edgeXsIn(svgEl, cy - MARK.size / 2 - 2, cy + MARK.size / 2 + 2).map((x) => x - shift);
+    row.setAttribute("data-pm-avoid", band.filter((x) => x >= rx && x <= rx + rw).map((x) => x.toFixed(1)).join(","));
+    rect.parentNode.insertBefore(row, title || rect.nextSibling);
+    // The title row holds the title, the job's status after it, then the marks; else the marks take their own row.
+    const left = (tb && tb.width ? tb.x + tb.width : rx + 12) + 8 + waveStatusRoom(svgEl, n);
+    row.setAttribute("data-pm-left", String(left));
+    if (titleRowFits(row, left)) continue;
+    rect.setAttribute("data-pm-y0", rect.getAttribute("y"));
+    rect.setAttribute("data-pm-h0", rect.getAttribute("height"));
+    if (title) title.setAttribute("data-pm-ty0", title.getAttribute("y"));
+    marksOwnRow(row, rect, title);
   }
 }
 
@@ -5603,10 +6043,6 @@ function render(ir, svg, m) {
     if (embedOpts.bare) quietCardLines(svgEl);
     setupGraphViewBox(svgEl);
     wireEdgeHighlight(svgEl, ir);
-    // 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 && !terragucciComponentsRepo) addGitlabWaveBadges(svgEl);
   }
   ensureZoomControls(g);
   ensureBackToInfra(g);