@intentius/behold 0.29.0 → 0.29.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentius/behold",
-  "version": "0.29.0",
+  "version": "0.29.2",
   "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,7 @@ 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, readLine as tgReadLine, readTag as tgReadTag } from "./terragucci-change.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 { 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";
@@ -108,6 +108,7 @@ initTheme();
 const embedOpts = readEmbed(location.search);
 if (embedOpts.theme && !setTheme(embedOpts.theme, { persist: false })) console.warn(`behold: no theme named ${embedOpts.theme}`);
 if (embedOpts.embed) document.documentElement.classList.add("embed");
+if (embedOpts.embed && embedOpts.bare) document.documentElement.classList.add("bare"); // #569: the graph alone, for a kiosk
 initPanel({ embed: embedOpts.embed });
 mountThemePicker(document.getElementById("panel-theme"));
 
@@ -192,10 +193,17 @@ function colourPlan(graphIr) {
   const mode = activeColourMode();
   const tokens = getTokens();
   const kindOf = new Map(graphIr.nodes.map((n) => [n.id, n.kind || n.lexicon || "node"]));
+  const theme = getTheme();
+  // #569 review: a terragucci repo's view with no drift read draws each root's
+  // wave state on its box, so the cards wear the neutral ground: colour there
+  // means a wave's state, never a category hue that reads as an error.
+  if (mode === "drift" && tokens && tgStatesDrawn(graphIr)) {
+    const neutral = theme ? pinTokensFor(theme).neutralFill : tokens.neutral;
+    return { mode, fillOf: () => ({ fill: neutral, unpriced: false }) };
+  }
   if (mode === "drift" || !tokens) {
     return { mode, fillOf: (id) => ({ fill: colorForCategory(kindOf.get(id)), unpriced: false }) };
   }
-  const theme = getTheme();
   // The drift overlay's own neutral card ground — the colour a card wears when
   // chant could not read it. #399: an entity with no block draws THIS, never
   // the zero end of the scale, which would say "free" or "saturated" about an
@@ -210,6 +218,12 @@ function colourPlan(graphIr) {
   return { mode, domain, ramp, fillOf: (id) => fillFor(figures.get(id), domain, ramp, neutralFill) };
 }
 
+/** Whether the view draws a terragucci repo's root states over cards that carry no drift read. */
+function tgStatesDrawn(graphIr) {
+  if (!tgAnswer || tgAnswer.error || !tgAnswer.roots || !tgAnswer.roots.length) return false;
+  return !graphIr.nodes.some((n) => n.attrs && n.attrs._status);
+}
+
 function recolorNodesByCategory(ir) {
   if (ir) lastGraphIr = ir;
   const graphIr = ir || lastGraphIr;
@@ -1580,7 +1594,7 @@ function wire(ir) {
 // member (#475) is the estate member the view is on: a host opens behold with
 // ?member=, and picking a card or a member box moves it. It changes no fetch;
 // the graph is the whole estate, framed on that member's box.
-const view = { member: null, env: null, gates: null, detail: 2, components: true, logical: false, runtime: false, ops: false, tier: null, target: null, stack: null, radial: false, collapse: false, compareTo: null };
+const view = { member: null, env: null, gates: null, focus: null, run: null, detail: 2, components: true, logical: false, runtime: false, ops: false, tier: null, target: null, stack: null, radial: false, collapse: false, compareTo: null };
 
 // #182: `components` is the boot default, but a project that declares no
 // components renders it as ZERO nodes — the first screen was a blank graph
@@ -2473,6 +2487,8 @@ function applyWantedView(want) {
   if (apply.lens) colourMode = apply.lens; // not written to localStorage: the link's pick, not yours
   if ("radial" in apply) view.radial = apply.radial;
   if ("gates" in apply) view.gates = apply.gates;
+  if ("focus" in apply) view.focus = apply.focus; // #569: drawn by drawTgReads, no new read
+  if ("run" in apply) view.run = apply.run; // #569: which run the view draws; read in the message handler
   if (want.member === null) {
     view.member = null;
     selectedNodeId = null;
@@ -2496,7 +2512,11 @@ window.addEventListener("message", (e) => {
   if (!want) return;
   const lensBefore = colourMode;
   const gatesBefore = view.gates;
+  const focusBefore = view.focus;
+  const runBefore = view.run;
   const moved = applyWantedView(want);
+  if (view.run !== runBefore) void loadTgProgress({ fresh: true }); // #569: the run the narration is about
+  else if (view.focus !== focusBefore && !moved) drawTgReads(); // #569
   // #477: the host's env for the gate strip moved. Read it now, not on the
   // next `changed`; renderStatusbar below writes it into the URL.
   if (view.gates !== gatesBefore) loadWorkspaceGates({ force: true });
@@ -2735,6 +2755,8 @@ function syncViewUrl() {
     node: place.node || selectedNodeId,
     radial: view.radial && !view.components && !view.logical && !view.ops,
     gates: view.gates,
+    focus: view.focus,
+    run: view.run,
   };
   const defaults = { env: (projectInfo && projectInfo.currentEnv) || null, lens: savedColourMode };
   const next = location.pathname + writeViewQuery(location.search, state, defaults) + location.hash;
@@ -3367,8 +3389,12 @@ function watchTerragucci() {
   es.addEventListener("reports", () => loadTerragucci({ fresh: true }));
   // #511: the run view moved while a wave applies.
   es.addEventListener("progress", (e) => {
-    tgProgress = JSON.parse(e.data);
-    paintTgProgress();
+    const pushed = JSON.parse(e.data);
+    // #569: the pushed view is the newest run's; a view pinned to another run reads its own again.
+    if (tgPushFits(pushed)) {
+      tgProgress = pushed;
+      paintTgProgress();
+    } else if (view.run && view.run !== "none" && view.run !== "base") void loadTgProgress({ fresh: true });
   });
   es.addEventListener("lifecycle", (e) => {
     tgLifecycle = JSON.parse(e.data);
@@ -3403,29 +3429,70 @@ 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 } = {}) {
-  tgProgress = await apiFetch(`/api/terragucci/progress${fresh ? "?fresh=1" : ""}`)
+  // #569: `run` pins the run view: a commit's, or none at all (the pull request's plan, or the base).
+  const pin = view.run;
+  if (pin === "none" || pin === "base") {
+    tgProgress = null;
+    paintTgProgress();
+    return;
+  }
+  const q = new URLSearchParams();
+  if (pin) q.set("commit", pin);
+  if (fresh) q.set("fresh", "1");
+  const qs = q.toString();
+  const answer = await apiFetch(`/api/terragucci/progress${qs ? `?${qs}` : ""}`)
     .then((r) => r.json())
     .catch((e) => ({ error: String(e) }));
+  if (view.run !== pin) return; // the pin moved while this read ran
+  tgProgress = answer;
   paintTgProgress();
 }
+/** #569: whether a pushed run view is the one the view draws: any, unless `run` pins another. */
+function tgPushFits(answer) {
+  const pin = view.run;
+  if (!pin) return true;
+  if (pin === "none" || pin === "base") 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. */
+function tgAnswerDrawn() {
+  return view.run === "base" && tgAnswer && !tgAnswer.error ? { ...tgAnswer, pull_request: null } : tgAnswer;
+}
 function paintTgProgress() {
   tgStampProgress(document.querySelector("#graph svg"), tgProgress, new Date());
   drawTgReads(); // #568: the run view's reads, once the change merged
   renderTerragucciPanel();
 }
-// #568: the reads edges between roots of one repo, drawn over the card view:
-// a dashed line from the reader (its data card when the checkout draws one,
-// else its root's cards) to the root it reads, behind the cards, plus a tag on
-// the reader's data card ("reads network · planned · 1 unknown"). From the
-// pull request's plan, or from the run view once merged. Not live; redrawn on
-// each render, so a card dragged since moves its line on the next one.
+// #568: the reads edges between roots of one repo, drawn over the card view.
+// #569: drawn so the view shows the change without the panel: each read is a
+// line from the reader (its data card when the checkout draws one, else its
+// root's box) to the box of the root it reads, ending at the box's border,
+// arrowed, over the boxes, with what it reads written on it; each root's box
+// carries its wave and that wave's state, in the state's colour; a caption
+// 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)" };
 function drawTgReads() {
   const svg = document.querySelector("#graph svg");
   if (!svg) return;
   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]")) {
+    r.setAttribute("stroke", r.getAttribute("data-tg-stroke0"));
+    r.setAttribute("stroke-width", r.getAttribute("data-tg-width0") || "1.2");
+    r.removeAttribute("data-tg-stroke0");
+    r.removeAttribute("data-tg-width0");
+  }
+  for (const t of svg.querySelectorAll("[data-tg-hid]")) {
+    t.removeAttribute("data-tg-hid");
+    t.removeAttribute("visibility");
+  }
+  for (const g of svg.querySelectorAll("[data-tg-dim]")) {
+    g.removeAttribute("data-tg-dim");
+    g.style.opacity = "";
+  }
   if (!tgAnswer || tgAnswer.error || !tgAnswer.roots) return;
-  const edges = tgReadEdges(tgAnswer, tgProgress);
-  if (!edges.length) return;
   const toSvg = svg.getScreenCTM && svg.getScreenCTM();
   if (!toSvg) return;
   const inv = toSvg.inverse();
@@ -3444,56 +3511,286 @@ function drawTgReads() {
     return { x: Math.min(pts[0].x, pts[1].x), y: Math.min(pts[0].y, pts[1].y), x2: Math.max(pts[0].x, pts[1].x), y2: Math.max(pts[0].y, pts[1].y) };
   };
   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 rootBox = (path) => {
-    const r = tgAnswer.roots.find((x) => x.path === path);
-    if (!r) return null;
+  const rootOf = (path) => tgAnswer.roots.find((x) => x.path === path) || null;
+  const groupRect = (path) => {
+    const r = rootOf(path);
+    return r ? svg.querySelector(`rect[data-group-id="${CSS.escape(r.name)}"]`) : null;
+  };
+  const cardsOf = (path) => {
+    const r = rootOf(path);
+    if (!r) return [];
     const prefix = `${r.member}/${r.name}/`;
-    return union([...svg.querySelectorAll("[data-node-id]")].filter((g) => (g.getAttribute("data-node-id") || "").startsWith(prefix)).map(boxOf).filter(Boolean));
+    return [...svg.querySelectorAll("[data-node-id]")].filter((g) => (g.getAttribute("data-node-id") || "").startsWith(prefix));
+  };
+  const rootBox = (path) => {
+    const rect = groupRect(path);
+    return (rect && boxOf(rect)) || union(cardsOf(path).map(boxOf).filter(Boolean));
   };
   const NS = "http://www.w3.org/2000/svg";
-  const layer = document.createElementNS(NS, "g");
-  layer.setAttribute("data-tg-reads", "1");
-  layer.setAttribute("pointer-events", "none");
+  const make = (tag, attrs, text) => {
+    const n = document.createElementNS(NS, tag);
+    for (const [k, v] of Object.entries(attrs)) n.setAttribute(k, String(v));
+    if (text !== undefined) n.textContent = text;
+    return n;
+  };
+  const layer = make("g", { "data-tg-reads": "1", "pointer-events": "none" });
+  svg.appendChild(layer); // over the boxes and cards: the lines end at the borders, and the labels carry a background
+  // A pill of text with a background, centred on (cx, cy); measured once it is in the svg.
+  const pill = (parent, cx, cy, text, { stroke, fill = "var(--panel)", color = "var(--fg)", size = 13, weight = 600, anchor = "middle", cls = "" } = {}) => {
+    const g = make("g", cls ? { class: cls } : {});
+    const rect = make("rect", { rx: 6, fill, stroke: stroke || "var(--rule)", "stroke-width": 1.5 });
+    const t = make("text", { x: cx, y: cy, "text-anchor": anchor, "dominant-baseline": "central", "font-size": size, "font-weight": weight, fill: color }, text);
+    g.append(rect, t);
+    parent.appendChild(g);
+    let w = text.length * size * 0.58;
+    try {
+      w = t.getComputedTextLength() || w;
+    } catch {
+      /* not laid out: the estimate stands */
+    }
+    const padX = 8;
+    const h = size + 10;
+    const left = anchor === "end" ? cx - w : anchor === "start" ? cx : cx - w / 2;
+    rect.setAttribute("x", String(left - padX));
+    rect.setAttribute("y", String(cy - h / 2));
+    rect.setAttribute("width", String(w + 2 * padX));
+    rect.setAttribute("height", String(h));
+    return { g, w: w + 2 * padX, h };
+  };
+
+  // The roots: each box's wave and state, in its colour.
+  const drawnAnswer = tgAnswerDrawn();
+  const states = tgRootStates(drawnAnswer, tgProgress);
+  const focus = view.focus ? new Set(view.focus.split(",")) : null;
+  const boxes = [];
+  for (const r of tgAnswer.roots) {
+    const rect = groupRect(r.path);
+    const st = states.roots[r.path];
+    const b = rootBox(r.path);
+    if (b) boxes.push(b);
+    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";
+      }
+    }
+    if (!rect || !st || !b) continue;
+    const tone = TG_TONE[st.tone] || TG_TONE.idle;
+    rect.setAttribute("data-tg-stroke0", rect.getAttribute("stroke") || "");
+    rect.setAttribute("data-tg-width0", rect.getAttribute("stroke-width") || "1.2");
+    if (st.state !== "outside" && st.state !== "unchanged") {
+      rect.setAttribute("stroke", tone);
+      rect.setAttribute("stroke-width", focus && (focus.has(r.path) || focus.has(r.name)) ? "4" : "2.5");
+    }
+    const mark = make("g", { "data-tg-root": r.path, "pointer-events": "none" });
+    if (focus && !focus.has(r.path) && !focus.has(r.name)) mark.style.opacity = "0.6";
+    layer.parentNode.insertBefore(mark, layer);
+    // The badge: on the box's top border, right-aligned, like a tab; the "N
+    // resources" count in the header row under it gives way.
+    const local = rect.getBBox();
+    const headY = local.y + 23;
+    const tabY = local.y;
+    for (const t of svg.querySelectorAll("text")) {
+      if (t.closest("[data-node-id]") || t.closest("[data-tg-root]") || t.closest("[data-tg-reads]")) continue;
+      const tb = t.getBBox();
+      if (/^\d+ resources?$/.test((t.textContent || "").trim()) && Math.abs(tb.y + tb.height / 2 - headY) < 12 && tb.x > local.x && tb.x < local.x + local.width) {
+        t.setAttribute("visibility", "hidden");
+        t.setAttribute("data-tg-hid", "1");
+      }
+    }
+    // Filled when something happened or waits on the root; an outline when nothing has yet.
+    const solid = st.state !== "outside" && st.state !== "not-started" && st.state !== "unchanged";
+    const badge = pill(mark, local.x + local.width - 16, tabY, st.words, { stroke: tone, fill: solid ? tone : "var(--panel)", color: solid ? "var(--bg)" : "var(--fg)", size: 14, weight: 700, anchor: "end", cls: st.state === "applying" ? "pin-pulse" : "" });
+    badge.g.appendChild(make("title", {}, [st.words, ...st.facts].join("\n") + "\n(from terragucci's reports, not live)"));
+    // The facts under it, at the box's bottom right: the plan a wave waits on, its changes.
+    // Packed into one line that fits the box, most telling first; the rest is in the badge's tooltip.
+    if (st.facts.length) {
+      // Right-aligned and at most about three fifths of the box, so a read's arrow leaving the box has room beside it.
+      const room = local.width * 0.6 - 14;
+      const fill = st.state === "waiting" ? tone : "var(--muted)";
+      const probe = make("text", { "font-size": 12.5, "font-weight": 600 });
+      mark.appendChild(probe);
+      const width = (t) => {
+        probe.textContent = t;
+        try {
+          return probe.getComputedTextLength();
+        } catch {
+          return t.length * 7;
+        }
+      };
+      const lines = [];
+      let cur = "";
+      const more = width(" …");
+      for (const f of st.facts) {
+        const next = cur ? `${cur} · ${f}` : f;
+        if (!cur || width(next) <= room - more) cur = next;
+        else {
+          lines.push(cur);
+          cur = f;
+        }
+      }
+      if (cur) lines.push(cur);
+      probe.remove();
+      // One line: the box's bottom padding holds no more without touching a card.
+      const shown = lines.slice(0, 1);
+      if (lines.length > 1) shown[0] += " …";
+      shown.forEach((t, i) => {
+        mark.appendChild(make("text", { x: local.x + local.width - 14, y: local.y + local.height - 10 - (shown.length - 1 - i) * 15, "text-anchor": "end", "font-size": 12.5, "font-weight": 600, fill }, t));
+      });
+    }
+  }
+
+  // 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
+  // there are; each label then sits beside its line where it covers no text
+  // and crosses no line.
+  const edges = tgReadEdges(drawnAnswer, tgProgress);
+  const centre = (b) => ({ x: (b.x + b.x2) / 2, y: (b.y + b.y2) / 2 });
+  const grow = (b, d) => ({ x: b.x - d, y: b.y - d, x2: b.x2 + d, y2: b.y2 + d });
+  // Whether the segment p-q passes through the box (Liang-Barsky).
+  const crosses = (p, q, b) => {
+    let t0 = 0;
+    let t1 = 1;
+    const dx = q.x - p.x;
+    const dy = q.y - p.y;
+    for (const [pp, qq] of [[-dx, p.x - b.x], [dx, b.x2 - p.x], [-dy, p.y - b.y], [dy, b.y2 - p.y]]) {
+      if (pp === 0) {
+        if (qq < 0) return false;
+        continue;
+      }
+      const r = qq / pp;
+      if (pp < 0) t0 = Math.max(t0, r);
+      else t1 = Math.min(t1, r);
+      if (t0 > t1) return false;
+    }
+    return true;
+  };
+  // Points along a box's four sides, its corners left out.
+  const borderPoints = (b, fractions) => {
+    const out = [];
+    for (const f of fractions) {
+      const x = b.x + (b.x2 - b.x) * f;
+      const y = b.y + (b.y2 - b.y) * f;
+      out.push({ x, y: b.y }, { x, y: b.y2 }, { x: b.x, y }, { x: b.x2, y });
+    }
+    return out;
+  };
+  // 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())
+    .map(boxOf)
+    .filter(Boolean)
+    .map((b) => grow(b, 3));
+  const cardEls = [...svg.querySelectorAll("[data-node-id]")];
+  const cardBoxOf = new Map(cardEls.map((g) => [g, boxOf(g)]));
+  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;
+    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 }));
+    defs.appendChild(m);
+  }
+  const labels = [];
+  const drawn = [];
   for (const e of edges) {
     const card = tgReadCardIds(tgAnswer, e).map((id) => svg.querySelector('[data-node-id="' + CSS.escape(id) + '"]')).find(Boolean);
-    const from = (card && boxOf(card)) || rootBox(e.from);
-    const to = rootBox(e.to);
+    const kind = e.unknown.length ? "unknown" : e.outputs === "planned" ? "planned" : "applied";
+    const color = kind === "unknown" ? "var(--foreign)" : kind === "planned" ? "var(--pending)" : "var(--focus)";
     if (card) {
-      const tag = document.createElementNS(NS, "text");
-      tag.setAttribute("data-tg-reads", "tag");
+      // The tag on the reader's card, at its bottom right, clear of the card's own "root:" line.
       const rect = card.querySelector("rect");
       const local = rect && rect.getBBox ? rect.getBBox() : null;
-      tag.setAttribute("x", String((local ? local.x : 0) + 10));
-      tag.setAttribute("y", String((local ? local.y + local.height : 60) - 9));
-      tag.setAttribute("font-size", "11");
-      tag.setAttribute("font-weight", "600");
-      tag.setAttribute("fill", e.unknown.length ? "var(--pending)" : "var(--muted)");
-      tag.textContent = tgReadTag(e);
-      const t = document.createElementNS(NS, "title");
-      t.setAttribute("data-tg-reads", "title");
-      t.textContent = tgReadLine(e) + "\n(from terragucci reports, not live)";
-      card.append(t, tag);
+      const tag = make("text", { "data-tg-reads": "tag", x: (local ? local.x + local.width : 150) - 10, y: (local ? local.y + local.height : 60) - 9, "text-anchor": "end", "font-size": 11, "font-weight": 700, fill: (card.querySelector("text") && card.querySelector("text").getAttribute("fill")) || "var(--fg)", opacity: 0.8 }, tgReadTag(e));
+      card.append(make("title", { "data-tg-reads": "title" }, tgReadLine(e) + "\n(from terragucci reports, not live)"), tag);
+    }
+    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);
+    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])) {
+        // Pull the ends a hair off the borders, so a line never counts the box it starts or ends on.
+        const len = Math.hypot(p1.x - p0.x, p1.y - p0.y);
+        if (len < 20) continue;
+        const ux = (p1.x - p0.x) / len;
+        const uy = (p1.y - p0.y) / len;
+        const a = { x: p0.x + ux * 2, y: p0.y + uy * 2 };
+        const z = { x: p1.x - ux * 2, y: p1.y - uy * 2 };
+        // Leaving the reader inward, or reaching the read box from inside it, is no route.
+        if (crosses({ x: a.x + ux * 4, y: a.y + uy * 4 }, { x: a.x + ux * 4, y: a.y + uy * 4 }, fromBox)) continue;
+        if (crosses({ x: z.x - ux * 4, y: z.y - uy * 4 }, { x: z.x - ux * 4, y: z.y - uy * 4 }, toBox)) continue;
+        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;
+        if (!best || score < best.score) best = { p0, p1, score };
+      }
     }
-    if (!from || !to) continue;
-    const line = document.createElementNS(NS, "line");
-    line.setAttribute("x1", String((from.x + from.x2) / 2));
-    line.setAttribute("y1", String((from.y + from.y2) / 2));
-    line.setAttribute("x2", String((to.x + to.x2) / 2));
-    line.setAttribute("y2", String((to.y + to.y2) / 2));
-    line.setAttribute("stroke", e.unknown.length ? "var(--pending)" : "var(--muted)");
-    line.setAttribute("stroke-width", "2");
-    line.setAttribute("stroke-dasharray", e.outputs === "planned" ? "6 4" : "2 4");
-    line.setAttribute("data-tg-read-from", e.from);
-    line.setAttribute("data-tg-read-to", e.to);
-    const t = document.createElementNS(NS, "title");
-    t.textContent = tgReadLine(e);
-    line.appendChild(t);
+    if (!best) continue;
+    const { p0, p1 } = best;
+    const line = make("line", { x1: p0.x, y1: p0.y, x2: p1.x, y2: p1.y, stroke: color, "stroke-width": 3, "stroke-dasharray": e.outputs === "planned" ? "9 6" : "none", "marker-end": `url(#tg-arrow-${kind})`, "data-tg-read-from": e.from, "data-tg-read-to": e.to });
+    line.appendChild(make("title", {}, tgReadLine(e)));
+    if (focus && !(focus.has(e.from) || focus.has(e.to))) line.style.opacity = "0.5";
     layer.appendChild(line);
+    drawn.push({ p0, p1 });
+    labels.push({ e, p0, p1, color, kind });
+  }
+  // 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);
+  const headers = boxes.map((b) => ({ x: b.x, y: b.y - 14, x2: b.x2, y2: b.y + 36 }));
+  const placed = [];
+  const overlap = (r, b) => Math.max(0, Math.min(r.x2, b.x2) - Math.max(r.x, b.x)) * Math.max(0, Math.min(r.y2, b.y2) - Math.max(r.y, b.y));
+  const sum = (r, list, k) => list.reduce((a, b) => a + k * overlap(r, b), 0);
+  for (const l of labels) {
+    const words = `${l.e.from} ${tgReadLabel(l.e)}`;
+    const size = 13;
+    const w = words.length * size * 0.56 + 16;
+    const h = size + 10;
+    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]) {
+      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 = [];
+      for (let k = 0; k < 6; k++) {
+        const off = k * (h + 6);
+        spots.push(
+          { x: m.x + w / 2 + 12 + off, y: m.y, off },
+          { x: m.x - w / 2 - 12 - off, y: m.y, off },
+          { x: m.x, y: m.y - h / 2 - 10 - off, off },
+          { x: m.x, y: m.y + h / 2 + 10 + off, off },
+        );
+      }
+      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;
+        // 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;
+        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;
+        if (!best || score < best.score) best = { c, r, score };
+      }
+    }
+    placed.push(best.r);
+    const p = pill(layer, best.c.x, best.c.y, words, { stroke: l.color, fill: "var(--bg)", color: "var(--fg)", size, weight: 600 });
+    if (focus && !(focus.has(l.e.from) || focus.has(l.e.to))) p.g.style.opacity = "0.5";
+  }
+
+  // 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());
+  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}`));
   }
-  // Behind every card: first in the svg.
-  svg.insertBefore(layer, svg.firstChild);
 }
 function markTerragucciCards() {
+  recolorNodesByCategory(); // #569 review: the reports arrived, so the cards may go neutral
   const svg = document.querySelector("#graph svg");
   tgStampProgress(svg, tgProgress, new Date()); // #511
   if (!svg || !tgAnswer || !tgAnswer.cards) return;

package/web/embed.js

@@ -7,6 +7,8 @@
 //                       panel and the inspect pane start folded
 //   ?theme=<name>       a theme for this frame only (light, dark, or any theme
 //                       name the picker lists); never saved
+//   ?bare=1             with embed: the graph alone, no panel, inspect pane,
+//                       buttons or now line (#569, the kiosk's frame)
 //   ?host=<origin>      the parent's origin. Messages go only there, and only
 //                       messages from there are taken. No host, no messages.
 //
@@ -35,7 +37,8 @@ export function readEmbed(search) {
   }
   const t = (q.get("theme") || "").trim();
   const theme = t ? THEME_ALIASES[t.toLowerCase()] || t : null;
-  return { embed, host, theme };
+  const bare = embed && /^(1|true|on|yes)$/i.test(q.get("bare") || "");
+  return { embed, host, theme, bare };
 }
 
 /** The message a pick sends the parent. `node` is null when a member's box was
@@ -61,9 +64,9 @@ export function viewFromMessage(event, host) {
       if (typeof v === "boolean") want.radial = v;
       continue;
     }
-    if (k === "env" || k === "gates") {
+    if (k === "env" || k === "gates" || k === "focus" || k === "run") {
       // env: null or "" is the source graph. gates: null or "" hands the
-      // gate strip back to the graph's env.
+      // gate strip back to the graph's env. focus: null or "" brings nothing forward. run: null or "" draws the newest run again.
       if (v === null || v === "") want[k] = null;
       else if (typeof v === "string") want[k] = v;
       continue;

package/web/embed.test.js

@@ -7,8 +7,13 @@ describe("readEmbed (#476)", () => {
       embed: true,
       host: "http://localhost:7777",
       theme: THEME_ALIASES.dark,
+      bare: false,
     });
   });
+  it("reads bare only inside embed (#569)", () => {
+    expect(readEmbed("?embed=1&bare=1").bare).toBe(true);
+    expect(readEmbed("?bare=1").bare).toBe(false);
+  });
   it("takes no host that isn't an http(s) origin", () => {
     expect(readEmbed("?host=localhost").host).toBe(null);
     expect(readEmbed("?host=javascript%3Aalert(1)").host).toBe(null);
@@ -17,7 +22,7 @@ describe("readEmbed (#476)", () => {
     expect(readEmbed("?theme=Atom%20One%20Light").theme).toBe("Atom One Light");
   });
   it("is off by default", () => {
-    expect(readEmbed("")).toEqual({ embed: false, host: null, theme: null });
+    expect(readEmbed("")).toEqual({ embed: false, host: null, theme: null, bare: false });
   });
 });
 
@@ -49,3 +54,12 @@ describe("viewFromMessage (#476)", () => {
     expect(viewFromMessage({ origin: host, data: { type: "behold:view" } }, null)).toBe(null);
   });
 });
+
+describe("viewFromMessage focus (#569)", () => {
+  const host = "http://localhost:7777";
+  it("takes focus as box names, and null or empty as nothing brought forward", () => {
+    expect(viewFromMessage({ origin: host, data: { type: "behold:view", focus: "network,other" } }, host)).toEqual({ focus: "network,other" });
+    expect(viewFromMessage({ origin: host, data: { type: "behold:view", focus: null } }, host)).toEqual({ focus: null });
+    expect(viewFromMessage({ origin: host, data: { type: "behold:view", focus: "" } }, host)).toEqual({ focus: null });
+  });
+});

package/web/index.html

@@ -412,6 +412,13 @@
       .embed #panel.collapsed #panel-tabs button[data-tab] { display: none; }
       .embed #panel.collapsed { width: auto; }
       .embed #panel.collapsed #panel-tabs { gap: 4px; padding: 2px 4px; }
+      /* #569: ?embed=1&bare=1, the kiosk's frame: the graph alone. Nothing to
+         open, nothing to press, and no backdrop of its own: the page's. */
+      .bare #panel, .bare #inspect, .bare #inspect-reopen, .bare #zoom-toggle, .bare #back-to-infra,
+      .bare #nowline, .bare #ws-gates, .bare #loading-overlay { display: none !important; }
+      .bare #app { grid-template-columns: 1fr 0 !important; }
+      .bare #graph svg > rect[fill^="url(#pin-"] { display: none; }
+      .bare #graph svg { cursor: default; }
       #panel-tabs #hintk { flex: none; align-self: center; padding: 2px 6px; margin-left: 2px; }
       #panel-collapse { flex: none; align-self: center; background: none; border: none; color: var(--muted);
         font-size: var(--t-body); cursor: pointer; line-height: 1; padding: 2px 4px; }