@intentius/behold 0.29.5 → 0.29.7

package/AGENTS.md

@@ -71,7 +71,12 @@ and none is the checkout's git remote) adds two reads, in
   Terraform root of the checkout with the newest `plan`, `drift` and `apply`
   run that held it; a missing stage means no report holds that root, which is
   not "no changes". `cards` maps a card id to its marks (`verdict: drift |
-  plan | wave`, terragucci's words, the instance addresses, the run). Nothing
+  plan | wave`, terragucci's words, the instance addresses, the run). Each
+  mark's `values` gives each changed attribute's `before` and `after`, or
+  `unknown: true` for a value known only after apply. A sensitive attribute
+  is never there, and a value longer than 300 characters of JSON is left out
+  with `long: true`. `applied` maps a card id to what its root's newest
+  applied wave wrote. The kiosk's popover reads both (behold#571). Nothing
   sets `_status`: a report is never painted as live. `waiting[]` carries each
   wave's roots, destroys, and the `command` a person runs. `estate` is
   terragucci's own counts when the source has `estate.json`. A key such as a

package/dist/cli.js

@@ -22722,6 +22722,20 @@ var TerragucciReadError = class extends Error {
 var refuse10 = (error, remedy) => {
   throw new TerragucciReadError({ error, code: "terragucci-report", remedy });
 };
+var VALUE_CAP = 300;
+function attributeValues(a) {
+  const out = { path: a.path };
+  let long = false;
+  for (const k of ["before", "after"]) {
+    if (!(k in a) || a[k] === void 0) continue;
+    const json2 = JSON.stringify(a[k]);
+    if (json2 === void 0 || json2.length > VALUE_CAP) long = true;
+    else out[k] = a[k];
+  }
+  if (a.unknown === true) out.unknown = true;
+  if (long) out.long = true;
+  return out;
+}
 var SCHEMA_FILES = { report: "report.schema.json", index: "report-index.schema.json", estate: "estate.schema.json" };
 var SCHEMA_IDS = { report: REPORT_SCHEMA, index: INDEX_SCHEMA, estate: ESTATE_SCHEMA };
 var isRecord14 = (v) => v !== null && typeof v === "object" && !Array.isArray(v);
@@ -22897,7 +22911,7 @@ async function readTerragucci(source2, opts = {}) {
             action: c.action,
             ...c.type ? { type: c.type } : {},
             ...c.module ? { module: c.module } : {},
-            attributes: (c.attributes ?? []).filter((a) => !a.sensitive).map((a) => ({ path: a.path }))
+            attributes: (c.attributes ?? []).filter((a) => !a.sensitive).map(attributeValues)
           })),
           ...stage === "tf-apply" && row.approval ? { approval: row.approval } : {},
           ...stage === "tf-apply" && row.applied ? { applied: row.applied } : {}
@@ -23079,6 +23093,7 @@ function joinTerragucci(read, nodes, roots) {
     byRoot.get(key).set(n.id.slice(at2 + root.length + 2), n.id);
   }
   const cards = {};
+  const applied = {};
   const unmatchedChanges = [];
   const out = [];
   const known = new Set(roots.map((r) => r.path));
@@ -23089,7 +23104,17 @@ function joinTerragucci(read, nodes, roots) {
     for (const [slot, run3] of [["drift", runs2.drift], ["plan", runs2.plan], ["apply", runs2.apply]]) {
       if (!run3) continue;
       marks[slot] = verdict(run3);
-      if (slot === "apply" && run3.approval !== "waiting") continue;
+      if (slot === "apply" && run3.approval !== "waiting") {
+        if (run3.applied) {
+          for (const c of run3.changes) {
+            const id = blocks?.get(blockPath(c.address));
+            if (!id || !c.attributes?.length) continue;
+            const a = applied[id] ??= { values: [], run: ref(run3) };
+            for (const v of c.attributes) a.values.push({ ...v, address: c.address });
+          }
+        }
+        continue;
+      }
       const kind = slot === "apply" ? "wave" : slot;
       const words = slot === "drift" ? DRIFT_WORDS : PLAN_WORDS;
       const grouped = /* @__PURE__ */ new Map();
@@ -23102,9 +23127,12 @@ function joinTerragucci(read, nodes, roots) {
           continue;
         }
         const k = `${id}\0${c.action}`;
-        const m = grouped.get(k) ?? { verdict: kind, action: c.action, words: said4, addresses: [], attributes: [], run: ref(run3) };
+        const m = grouped.get(k) ?? { verdict: kind, action: c.action, words: said4, addresses: [], attributes: [], values: [], run: ref(run3) };
         m.addresses.push(c.address);
-        for (const a of c.attributes ?? []) if (!m.attributes.includes(a.path)) m.attributes.push(a.path);
+        for (const a of c.attributes ?? []) {
+          if (!m.attributes.includes(a.path)) m.attributes.push(a.path);
+          m.values.push({ ...a, address: c.address });
+        }
         grouped.set(k, m);
       }
       for (const [k, m] of grouped) (cards[k.slice(0, k.indexOf("\0"))] ??= []).push(m);
@@ -23115,7 +23143,8 @@ function joinTerragucci(read, nodes, roots) {
     cards,
     roots: out,
     unmatched: { roots: Object.keys(read.roots).filter((p) => !known.has(p)).sort(), changes: unmatchedChanges },
-    waiting: read.waiting
+    waiting: read.waiting,
+    applied
   };
 }
 
@@ -24215,6 +24244,7 @@ var UTC = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}Z$/;
 var isRecord17 = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
 var str13 = (v) => typeof v === "string";
 var int = (v) => typeof v === "number" && Number.isInteger(v);
+var positive = (v) => int(v) && v > 0 ? v : null;
 function demoProblem(doc) {
   if (!isRecord17(doc)) return "it is not an object";
   if (!int(doc.cycle)) return "cycle is not an integer";
@@ -24269,7 +24299,11 @@ async function readDemo(source2, now = /* @__PURE__ */ new Date()) {
       next: d.next ? { action: d.next.action, at: d.next.at } : null,
       pull: d.pull,
       commit: d.commit,
-      about: d.about ? { changes: d.about.changes, watch: d.about.watch, shows: d.about.shows } : null
+      about: d.about ? { changes: d.about.changes, watch: d.about.watch, shows: d.about.shows } : null,
+      intro: str13(d.intro) && d.intro.trim() ? d.intro.trim() : null,
+      name: str13(d.name) && d.name.trim() ? d.name.trim() : null,
+      scenarios: positive(d.scenarios),
+      index: positive(d.index)
     }
   };
 }
@@ -27332,6 +27366,14 @@ function createApp(cfg, broadcaster = new Broadcaster(), frames = new FrameBuffe
       // #571: the repo declares its roots as components, so the page opens on
       // the components zoom (web/app.js `bootZoom`).
       ...servedTerragucciComponents() ? { terragucciComponents: true } : {},
+      // behold#571: the declared roots and the wave jobs that apply them, so
+      // the kiosk gives each root its colour and ties a job row to its roots.
+      ...(() => {
+        const decl = servedTerragucciComponents();
+        if (!decl) return {};
+        const waves = decl.pipeline.jobs.filter((j) => typeof j.wave === "number").map((j) => ({ job: j.name, wave: j.wave, roots: [...j.applies] }));
+        return { terragucciRoots: { roots: Object.keys(decl.roots).sort(), waves } };
+      })(),
       // #517: a SQL Yodeler repo is migrated by its pipeline; same contract.
       ...(() => {
         const r = guardedRepo();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentius/behold",
-  "version": "0.29.5",
+  "version": "0.29.7",
   "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

@@ -10,7 +10,9 @@
 // renderPanelView never rewrites, so the select mounts once and survives re-renders).
 import { createRefreshQueue } from "./refresh-queue.js";
 import { readViewQuery, writeViewQuery, settleView, settlePlace, refusalLine } from "./view-url.js";
-import { readEmbed, selectMessage, viewFromMessage } from "./embed.js";
+import { quietCardLines, readEmbed, selectMessage, viewFromMessage } from "./embed.js";
+import { WORDS as POP_WORDS, cardRoot as popCardRoot, placePopover, popReduce, popState, resourcePopover, rootPopover } from "./kiosk-popover.js";
+import { cssString, hoverCss, hoverFromMessage, hoverLinks, hoverMessage, isLightBg, rootColour, rootText } from "./kiosk-roots.js";
 import { gateCards } from "./workspace-gates.js";
 import { cornerOf, estateLine, hrefOf as tgHref, legend as tgLegend, markLine, rootRows as tgRootRows, waveCards } from "./terragucci.js";
 import { laneElement as tgLane, rootOfCard as tgRootOfCard, historyElement as tgHistoryLane } from "./terragucci-timeline.js";
@@ -3378,6 +3380,7 @@ let tgTimeline = null; // #506: /api/terragucci/timeline, the audit record's lan
 let tgHistory = null; // #522: /api/lifecycle/history, the gate ledgers' history
 async function initTerragucci() {
   const project = await apiFetch("/api/project").then((r) => r.json()).catch(() => ({}));
+  kioskRoots = project.terragucciRoots || null; // behold#571
   if (!project.terragucciReports) return;
   await loadTerragucci();
   // #505: the chant/lifecycle lane, and what moved while this page is open.
@@ -3485,6 +3488,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() {
+  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;
@@ -3502,7 +3506,7 @@ function drawTgReads() {
   }
   for (const t of svg.querySelectorAll("[data-tg-hid]")) {
     t.removeAttribute("data-tg-hid");
-    t.removeAttribute("visibility");
+    if (!t.hasAttribute("data-kiosk-quiet")) t.removeAttribute("visibility");
   }
   for (const g of svg.querySelectorAll("[data-tg-dim]")) {
     g.removeAttribute("data-tg-dim");
@@ -4083,6 +4087,266 @@ function markTerragucciCards() {
   }
   drawTgReads(); // #568
 }
+// --- behold#571: the kiosk frame's popover, root colours and hover links -------
+// The kiosk frames this page bare, with no Inspect pane. Pointing at a card
+// shows a popover beside it (web/kiosk-popover.js says what it holds); a
+// click keeps it open. Each root's name carries a dot in its own colour, and
+// hovering a card or box here lights its root and wave in the kiosk's other
+// panes, and theirs light it here (`behold:hover`, web/kiosk-roots.js).
+// Nothing happens until someone points: a TV with no pointer sees the page
+// as before.
+let kioskRoots = null; // /api/project's terragucciRoots: { roots, waves }
+let kioskPop = popState();
+let kioskHover = null; // this frame's pointer: { root } | { wave } | null
+let kioskHostHover = null; // the kiosk's pointer, from its message
+function kioskRootList() {
+  if (kioskRoots && Array.isArray(kioskRoots.roots) && kioskRoots.roots.length) return kioskRoots.roots;
+  return tgAnswer && Array.isArray(tgAnswer.roots) ? tgAnswer.roots.map((r) => r.path) : [];
+}
+function kioskWaves() {
+  return (kioskRoots && kioskRoots.waves) || [];
+}
+function kioskLight() {
+  return isLightBg(getComputedStyle(document.documentElement).getPropertyValue("--bg"));
+}
+function kioskCompMode() {
+  return !!(view.components && terragucciComponentsRepo && tgComponentFacets);
+}
+function kioskRootOfComponent(c) {
+  const m = (tgComponentFacets && tgComponentFacets.roots) || {};
+  return m[c] || c;
+}
+/** The terragucci root (its path) of a resources-zoom box name. */
+function kioskRootOfBox(name) {
+  const r = tgAnswer && Array.isArray(tgAnswer.roots) ? tgAnswer.roots.find((x) => x.name === name) : null;
+  return r ? r.path : name;
+}
+/** What the pointer is on: a card's or a box's root, or a wave's box. */
+function kioskHoverOf(target) {
+  if (!target || !target.closest) return null;
+  const card = target.closest("[data-node-id]");
+  if (card) {
+    const id = card.getAttribute("data-node-id");
+    if (kioskCompMode()) return { root: kioskRootOfComponent(id) };
+    const at = popCardRoot(tgAnswer, id);
+    return at ? { root: at.path } : null;
+  }
+  const rect = target.closest("rect[data-group-id]");
+  if (!rect) return null;
+  const g = rect.getAttribute("data-group-id") || "";
+  const w = /^wave-(\d+)$/.exec(g);
+  if (w) return { wave: Number(w[1]) };
+  const root = kioskRootOfBox(g);
+  return kioskRootList().includes(root) ? { root } : null;
+}
+const sameHover = (a, b) => (a && a.root) === (b && b.root) && (a && a.wave) === (b && b.wave);
+function kioskSetHover(h) {
+  if (sameHover(h, kioskHover)) return;
+  kioskHover = h;
+  kioskGlow();
+  if (!embedOpts.host || window.parent === window) return;
+  try {
+    window.parent.postMessage(hoverMessage(h), embedOpts.host);
+  } catch {
+    /* the parent went away */
+  }
+}
+/** Light what the two pointers link: a root's box (or card) and a wave's box, with one style element that survives a redraw. */
+function kioskGlow() {
+  let style = document.getElementById("k-hover-style");
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "k-hover-style";
+    document.head.appendChild(style);
+  }
+  const a = hoverLinks(kioskHover, kioskWaves());
+  const b = hoverLinks(kioskHostHover, kioskWaves());
+  const links = { roots: [...new Set([...a.roots, ...b.roots])], waves: [...new Set([...a.waves, ...b.waves])] };
+  const boxes = (root) => {
+    const names = new Set([root]);
+    const r = tgAnswer && Array.isArray(tgAnswer.roots) ? tgAnswer.roots.find((x) => x.path === root || x.name === root) : null;
+    if (r) names.add(r.name);
+    const comps = tgComponentFacets && tgComponentFacets.roots ? Object.keys(tgComponentFacets.roots).filter((c) => tgComponentFacets.roots[c] === root) : [];
+    for (const c of comps) names.add(c);
+    return [...names].map((n) => `#graph rect[data-group-id=${cssString(n)}], #graph g[data-node-id=${cssString(n)}]`).join(", ");
+  };
+  style.textContent = hoverCss(links, { root: boxes, wave: (w) => `#graph rect[data-group-id="wave-${w}"]` }, "filter: drop-shadow(0 0 2px var(--focus)) drop-shadow(0 0 7px var(--focus));");
+}
+/** The dots by each root's name: on its box's title (Resources) or its card (Roots by wave). */
+function kioskDots(svg) {
+  for (const d of svg.querySelectorAll("[data-k-dot]")) d.remove();
+  const roots = kioskRootList();
+  if (!roots.length) return;
+  const light = kioskLight();
+  const dotBy = (text, root) => {
+    const colour = rootColour(root, roots, { light });
+    if (!colour) return;
+    let bb;
+    try {
+      bb = text.getBBox();
+    } catch {
+      return;
+    }
+    if (!bb.width) return;
+    const c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    c.setAttribute("data-k-dot", "1");
+    // After the name: before it sits the card's icon.
+    c.setAttribute("cx", String(bb.x + bb.width + 9));
+    c.setAttribute("cy", String(bb.y + bb.height / 2));
+    c.setAttribute("r", "5.5");
+    c.setAttribute("fill", colour);
+    c.setAttribute("pointer-events", "none");
+    text.parentNode.insertBefore(c, text.nextSibling);
+  };
+  if (kioskCompMode()) {
+    for (const card of svg.querySelectorAll("[data-node-id]")) {
+      const id = card.getAttribute("data-node-id");
+      const t = [...card.querySelectorAll("text")].find((x) => (x.textContent || "").trim() === id);
+      if (t) dotBy(t, kioskRootOfComponent(id));
+    }
+    return;
+  }
+  for (const rect of svg.querySelectorAll("rect[data-group-id]")) {
+    const name = rect.getAttribute("data-group-id");
+    const root = kioskRootOfBox(name);
+    if (!roots.includes(root)) continue;
+    const t = [...(rect.parentNode ? rect.parentNode.querySelectorAll(":scope > text") : [])].find((x) => (x.textContent || "").trim() === name && x.getAttribute("visibility") !== "hidden");
+    if (t) dotBy(t, root);
+  }
+}
+function kioskDecorate() {
+  const svg = document.querySelector("#graph svg");
+  if (!svg) return;
+  kioskDots(svg);
+  kioskGlow();
+  kioskPopRender();
+}
+function kioskPopEvent(ev) {
+  const next = popReduce(kioskPop, ev, Date.now());
+  if (next === kioskPop) return;
+  kioskPop = next;
+  kioskPopRender();
+}
+function kioskPopRender() {
+  let pop = document.getElementById("k-pop");
+  const svg = document.querySelector("#graph svg");
+  const id = kioskPop.shown;
+  const card = id && svg ? svg.querySelector(`[data-node-id="${CSS.escape(id)}"]`) : null;
+  const answer = tgAnswerDrawn();
+  const content = !card || !answer ? null : kioskCompMode() ? rootPopover(answer, kioskRootOfComponent(id), resourcesByComponent[id]) : resourcePopover(answer, id);
+  if (!content) {
+    if (pop) pop.hidden = true;
+    return;
+  }
+  if (!pop) {
+    pop = document.createElement("div");
+    pop.id = "k-pop";
+    pop.setAttribute("role", "tooltip");
+    document.body.appendChild(pop);
+  }
+  pop.replaceChildren();
+  pop.classList.toggle("k-pinned", kioskPop.pinned);
+  const roots = kioskRootList();
+  const light = kioskLight();
+  const add = (tag, cls, text) => {
+    const n = document.createElement(tag);
+    n.className = cls;
+    if (text !== undefined) n.textContent = text;
+    pop.appendChild(n);
+    return n;
+  };
+  const list = (rows) => {
+    const ul = add("ul", "k-pop-lines");
+    for (const r of rows) {
+      const li = document.createElement("li");
+      li.className = r.tone === "unknown" ? "k-pop-unknown" : "";
+      li.textContent = r.text;
+      ul.appendChild(li);
+    }
+    return ul;
+  };
+  if (content.address !== undefined) {
+    add("div", "k-pop-addr", content.address);
+    add("div", "k-pop-root").appendChild(rootText(document, `It sits in root ${content.root}.`, roots, { light }));
+    add("p", "k-pop-head", content.head);
+    if (content.lines.length) {
+      const ul = list(content.lines);
+      if (content.more) ul.appendChild(Object.assign(document.createElement("li"), { className: "k-pop-more", textContent: `and ${content.more} more` }));
+    }
+    if (content.applied) {
+      add("p", "k-pop-note", content.applied.when);
+      list(content.applied.lines);
+    } else if (content.note) add("p", "k-pop-note", content.note);
+  } else {
+    add("div", "k-pop-addr").appendChild(rootText(document, content.root, roots, { light }));
+    add("p", "k-pop-head", content.head);
+    const ul = add("ul", "k-pop-lines");
+    for (const r of content.rows) {
+      const li = document.createElement("li");
+      li.className = "k-pop-res";
+      const st = document.createElement("span");
+      st.className = `k-pop-state k-pop-${r.state}`;
+      st.textContent = r.words;
+      li.append(document.createTextNode(`${r.address} `), st);
+      ul.appendChild(li);
+    }
+    if (content.more > 0) ul.appendChild(Object.assign(document.createElement("li"), { className: "k-pop-more", textContent: `and ${content.more} more` }));
+  }
+  add("p", "k-pop-hint", kioskPop.pinned ? POP_WORDS.pinnedHint : POP_WORDS.pinHint);
+  pop.hidden = false;
+  const cb = card.getBoundingClientRect();
+  const pb = pop.getBoundingClientRect();
+  const at = placePopover({ left: cb.left, top: cb.top, width: cb.width, height: cb.height }, { width: pb.width, height: pb.height }, { width: window.innerWidth, height: window.innerHeight });
+  pop.style.left = `${Math.round(at.left)}px`;
+  pop.style.top = `${Math.round(at.top)}px`;
+}
+/** Wire the frame's pointer once: the popover, and the hover links to the kiosk. Bare frames only. */
+function wireKioskFrame() {
+  if (!embedOpts.bare) return;
+  const graph = document.getElementById("graph");
+  if (!graph) return;
+  graph.addEventListener("pointerover", (e) => {
+    const card = e.target.closest && e.target.closest("[data-node-id]");
+    if (card) {
+      // The card's own tooltips would sit over the popover.
+      for (const t of card.querySelectorAll("title")) t.remove();
+      kioskPopEvent({ type: "enter", id: card.getAttribute("data-node-id") });
+    }
+    kioskSetHover(kioskHoverOf(e.target));
+  });
+  graph.addEventListener("pointerout", (e) => {
+    const card = e.target.closest && e.target.closest("[data-node-id]");
+    const into = e.relatedTarget;
+    if (card && !(into && card.contains(into))) kioskPopEvent({ type: "leave", id: card.getAttribute("data-node-id") });
+    if (!into || !graph.contains(into)) kioskSetHover(null);
+  });
+  graph.addEventListener(
+    "click",
+    (e) => {
+      const card = e.target.closest && e.target.closest("[data-node-id]");
+      if (card) kioskPopEvent({ type: "click", id: card.getAttribute("data-node-id") });
+      else kioskPopEvent({ type: "outside" });
+    },
+    true,
+  );
+  document.addEventListener("click", (e) => {
+    if (!graph.contains(e.target) && !(e.target.closest && e.target.closest("#k-pop"))) kioskPopEvent({ type: "outside" });
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") kioskPopEvent({ type: "escape" });
+  });
+  setInterval(() => kioskPopEvent({ type: "tick" }), 1000);
+  window.addEventListener("message", (e) => {
+    if (!embedOpts.host || e.origin !== embedOpts.host) return;
+    if (e.data && e.data.type === "behold:unpin") return kioskPopEvent({ type: "outside" });
+    const h = hoverFromMessage(e.data);
+    if (h === undefined) return;
+    kioskHostHover = h;
+    kioskGlow();
+  });
+}
+wireKioskFrame();
+
 function markAge(marks) {
   const newest = marks.map((m) => m.run.finished).sort().pop();
   const s = Math.max(0, (Date.now() - Date.parse(newest)) / 1000);
@@ -5329,6 +5593,8 @@ function render(ir, svg, m) {
     svgEl.removeAttribute("width");
     svgEl.removeAttribute("height");
     svgEl.setAttribute("preserveAspectRatio", "xMidYMid meet");
+    // behold#571: the kiosk's frame drops the cards' kind and meta lines.
+    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

package/web/embed.js

@@ -79,3 +79,23 @@ export function viewFromMessage(event, host) {
   }
   return want;
 }
+
+/**
+ * behold#571: a card's line the kiosk's frame leaves out, for a viewer new to
+ * Terraform: the kind line ("Component · chant", "terraform_data ·
+ * terraform"), and the `archetype:`, `wave:` and `root:` meta lines (the wave
+ * or the root is the box the card sits in). behold's own page keeps them.
+ */
+export function kioskQuietLine(text) {
+  const t = typeof text === "string" ? text.trim() : "";
+  return /^Component\b/.test(t) || /^[\w.-]+ · [\w.-]+$/.test(t) || /^archetype:\s*\S/.test(t) || /^wave:\s*\d+$/.test(t) || /^root:\s*\S+$/.test(t);
+}
+
+/** Hide the kioskQuietLine lines of every card in a drawn graph; marks them so a redraw of the marks leaves them hidden. */
+export function quietCardLines(svg) {
+  for (const t of svg.querySelectorAll("[data-node-id] text")) {
+    if (!kioskQuietLine(t.textContent)) continue;
+    t.setAttribute("visibility", "hidden");
+    t.setAttribute("data-kiosk-quiet", "1");
+  }
+}

package/web/embed.test.js

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { readEmbed, selectMessage, viewFromMessage, THEME_ALIASES } from "./embed.js";
+import { kioskQuietLine, readEmbed, selectMessage, viewFromMessage, THEME_ALIASES } from "./embed.js";
 
 describe("readEmbed (#476)", () => {
   it("reads embed, an exact host origin and a theme", () => {
@@ -63,3 +63,12 @@ describe("viewFromMessage focus (#569)", () => {
     expect(viewFromMessage({ origin: host, data: { type: "behold:view", focus: "" } }, host)).toEqual({ focus: null });
   });
 });
+
+describe("kioskQuietLine (behold#571)", () => {
+  it("leaves out a card's kind and meta lines in the kiosk's frame", () => {
+    for (const t of ["Component · chant", "terraform_data · terraform", "archetype: infra", "wave: 2", " root: app "]) expect(kioskQuietLine(t)).toBe(true);
+  });
+  it("keeps the names, the states and the reads", () => {
+    for (const t of ["network", "terraform_data.http_proxy_port", "waiting", "reads network · planned · 1 unknown", "wave 2 · planned", "", null]) expect(kioskQuietLine(t)).toBe(false);
+  });
+});

package/web/index.html

@@ -419,6 +419,28 @@
       .bare #app { grid-template-columns: 1fr 0 !important; }
       .bare #graph svg > rect[fill^="url(#pin-"] { display: none; }
       .bare #graph svg { cursor: default; }
+      /* behold#571: the marks drawn over a card let the pointer through to it, so pointing anywhere on the card opens its popover. */
+      .bare #graph text[data-tg-root], .bare #graph g[data-tg-root] { pointer-events: none; }
+      /* behold#571: the kiosk frame's popover, beside the card it describes. */
+      #k-pop { position: fixed; z-index: 50; max-width: min(30em, 46vw); padding: 0.7em 0.9em 0.6em; background: var(--panel); color: var(--fg);
+        border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 6px 22px color-mix(in srgb, var(--shadow) 70%, transparent);
+        font: 14px/1.4 var(--font-ui); pointer-events: auto; }
+      #k-pop[hidden] { display: none; }
+      #k-pop.k-pinned { border-color: var(--focus); }
+      #k-pop p { margin: 0.25em 0; }
+      .k-pop-addr { font: 700 1.05em var(--font-mono); overflow-wrap: anywhere; }
+      .k-pop-root { color: var(--muted); font-size: 0.92em; }
+      .k-pop-head { font-weight: 600; }
+      .k-pop-lines { list-style: none; margin: 0.2em 0 0.3em; padding: 0.35em 0.6em; background: var(--well); border-radius: 6px; font: 0.95em/1.45 var(--font-mono); }
+      .k-pop-lines li { overflow-wrap: anywhere; }
+      .k-pop-unknown, .k-pop-unknown.k-pop-state { color: var(--foreign); }
+      .k-pop-more { color: var(--muted); }
+      .k-pop-note { color: var(--muted); font-size: 0.92em; }
+      .k-pop-hint { color: var(--muted); font-size: 0.85em; border-top: 1px solid var(--rule); padding-top: 0.35em; margin-top: 0.4em !important; }
+      .k-pop-state { margin-left: 0.4em; font-family: var(--font-ui); font-weight: 600; white-space: nowrap; }
+      .k-pop-change { color: var(--pending); }
+      .k-pop-same { color: var(--muted); }
+      .k-root::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--k-root); margin: 0 0.3em 0.1em 0.05em; vertical-align: middle; }
       #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; }