@intentius/behold 0.28.0 → 0.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentius/behold",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "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,6 +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 { 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";
@@ -305,6 +306,10 @@ function markStatusChanges(ir, statusVar) {
 // replay every read from `snapshots/` — the graph, zoom dial, radial, inspect,
 // and env/tier pickers all work; live observe + all writes are off.
 const staticMode = !!window.__BEHOLD_STATIC__;
+// #569: `behold serve --public` injects this flag into the page it serves. The
+// reads stay live (the SSE stream, the polls); every control that writes is
+// hidden, and the server refuses every method but GET, HEAD and OPTIONS anyway.
+const publicMode = !!window.__BEHOLD_PUBLIC__;
 let manifest = null;
 if (staticMode) {
   try {
@@ -620,6 +625,7 @@ function stopWhyRead() {
 }
 
 function renderWhySection(panel, ask) {
+  if (publicMode) return; // #569: /api/workspace/why is refused in a public view
   stopWhyRead();
   if (staticMode) return;
   const memberName = ask.member || nodeMember(ask.node || "");
@@ -941,6 +947,21 @@ function inspect(node) {
       panel.appendChild(p);
     }
   }
+  // #568: the reads this card's root makes or answers, from the pull
+  // request's plan or the run view, dated by its run.
+  const tgReadRoot = tgAnswer && !tgAnswer.error && tgRootOfCard(tgAnswer, node.id);
+  const tgReads = tgReadRoot ? tgReadEdges(tgAnswer, tgProgress).filter((e) => e.from === tgReadRoot || e.to === tgReadRoot) : [];
+  if (tgReads.length) {
+    const h = document.createElement("h3");
+    h.textContent = "terragucci reads between roots (not live)";
+    panel.appendChild(h);
+    for (const e of tgReads) {
+      const p = document.createElement("p");
+      p.className = "tg-inspect";
+      p.textContent = tgReadLine(e);
+      panel.appendChild(p);
+    }
+  }
   // #506: the audit record's entries for this card's root (the record names
   // roots, never a resource), newest first.
   const tgRoot = tgTimeline && tgRootOfCard(tgAnswer, node.id);
@@ -1280,6 +1301,7 @@ let bulkDiffCache = null; // { env, nodes: { <id>: { observed, diff, health } }
 // without anyone paying for a second full pass over the account.
 let planDriftOnce = false;
 async function loadNodeDiff(id) {
+  if (publicMode) return null; // #569: /api/diff is refused in a public view
   if (!bulkDiffCache || bulkDiffCache.env !== view.env) {
     bulkDiffCache = null;
     try {
@@ -1585,7 +1607,7 @@ function bootZoom(memberKinds) {
 // v0.1.0 preview lock (set from /api/project in initActions): hides the git/PR
 // write ops (Rollback, Sync, Adopt, Run ▾) — the server also 403s them. Local
 // deploy (Apply all / dial), Reset, Bring up, Approve, and reads stay on.
-let previewMode = false;
+let previewMode = publicMode; // #569: a public view hides what preview hides, and more
 // #489: set when /api/project says the repo is a terragucci repo — applied by
 // its pipeline only, so the page offers no write at all.
 let terragucciRepo = null;
@@ -1957,7 +1979,7 @@ function copyToClipboard(text, el) {
  * `carve.json`.
  */
 function renderChoudoufuMoves(host, info) {
-  if (!info || !info.plans || !info.plans.length || staticMode) return;
+  if (!info || !info.plans || !info.plans.length || staticMode || publicMode) return;
   host.appendChild(panelHeading("moves (choudoufu)"));
   for (const plan of info.plans) {
     const head = document.createElement("div");
@@ -2112,7 +2134,7 @@ function renderPanelScope() {
     name.textContent = pathBasename(dir) + (estateDirs.length > 1 && dir === info.projectDir ? " · primary" : "");
     name.title = dir;
     row.appendChild(name);
-    if (!staticMode) row.appendChild(actButton("⌖ reveal", () => revealProject(dir), "Open this project's folder in your file manager"));
+    if (!staticMode && !publicMode) row.appendChild(actButton("⌖ reveal", () => revealProject(dir), "Open this project's folder in your file manager"));
     host.appendChild(row);
     host.appendChild(panelMuted(dir));
   }
@@ -2195,7 +2217,7 @@ function renderPanelScope() {
   // #234's last remainder — "is prod running what staging tested". Only when
   // an env is picked and there is another to compare against; ledger-only, so
   // it never adds a cloud read to opening the panel (fetch happens on pick).
-  if (view.env && environments.length > 1 && !staticMode) {
+  if (view.env && environments.length > 1 && !staticMode && !publicMode) {
     if (view.compareTo === view.env) view.compareTo = null; // env re-picked onto the compared one
     host.appendChild(panelHeading("compare releases"));
     const sel = document.createElement("select");
@@ -2517,7 +2539,7 @@ function gatesEnv() {
   return view.gates || view.env || "";
 }
 function loadWorkspaceGates({ force = false } = {}) {
-  if (staticMode) return;
+  if (staticMode || publicMode) return;
   const env = gatesEnv();
   if (!force && wsGates.env === env) return paintWorkspaceGates();
   // Every read is numbered; only the newest one paints, so an answer for an
@@ -3388,8 +3410,89 @@ async function loadTgProgress({ fresh = false } = {}) {
 }
 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.
+function drawTgReads() {
+  const svg = document.querySelector("#graph svg");
+  if (!svg) return;
+  for (const old of svg.querySelectorAll("[data-tg-reads]")) old.remove();
+  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();
+  // A card's box in the svg's own coordinates, whatever transform a layout put on it.
+  const boxOf = (g) => {
+    let b;
+    try {
+      b = g.getBBox();
+    } catch {
+      return null;
+    }
+    const ctm = g.getScreenCTM && g.getScreenCTM();
+    if (!ctm || !b.width) return null;
+    const m = inv.multiply(ctm);
+    const pts = [[b.x, b.y], [b.x + b.width, b.y + b.height]].map(([x, y]) => new DOMPoint(x, y).matrixTransform(m));
+    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 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));
+  };
+  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");
+  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);
+    if (card) {
+      const tag = document.createElementNS(NS, "text");
+      tag.setAttribute("data-tg-reads", "tag");
+      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);
+    }
+    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);
+    layer.appendChild(line);
+  }
+  // Behind every card: first in the svg.
+  svg.insertBefore(layer, svg.firstChild);
+}
 function markTerragucciCards() {
   const svg = document.querySelector("#graph svg");
   tgStampProgress(svg, tgProgress, new Date()); // #511
@@ -3419,6 +3522,7 @@ function markTerragucciCards() {
     title.textContent = marks.map((m) => markLine(m, now)).join("\n") + "\n(from terragucci reports, not live: the Terragucci tab links each run)";
     g.append(title, tag);
   }
+  drawTgReads(); // #568
 }
 function markAge(marks) {
   const newest = marks.map((m) => m.run.finished).sort().pop();
@@ -3470,6 +3574,7 @@ function renderTerragucciPanel() {
   }
   renderTerragucciLane(host, now);
   if (tgProgress) host.appendChild(tgProgressSection(tgProgress, now, tgLink)); // #511
+  host.appendChild(tgChangeSection(a, tgProgress, now, { link: tgLink, button, copy: copyToClipboard })); // #568
   for (const w of waveCards(a, now)) {
     const box = document.createElement("div");
     box.className = "ws-gate tg-wave";
@@ -3708,6 +3813,7 @@ initYodelReport();
 // the gate ledgers' history (#522). Read-only and dated; never live.
 let ylHost = null;
 async function initYodelLane() {
+  if (publicMode) return; // #569: /api/sql-yodeler/lifecycle is refused in a public view
   // #537: a static export carries the lane as a snapshot (src/export.ts), so it draws here too.
   const project = await apiFetch("/api/project").then((r) => r.json()).catch(() => ({}));
   if (!project.sqlYodeler) return;
@@ -3872,6 +3978,7 @@ let ciByComponent = new Map();
 let ciForge = null; // the forge the pipeline was generated for (#164) — heads the inspect section
 
 async function loadCi() {
+  if (publicMode) return; // #569: /api/ci is refused in a public view
   try {
     const q = lensParams(new URLSearchParams(view.env ? { env: view.env } : {}));
     const res = await apiFetch(`/api/ci?${q}`);
@@ -3896,6 +4003,7 @@ async function loadCi() {
 let resourcesByComponent = {};
 
 async function loadResources() {
+  if (publicMode) return; // #569: /api/resources is refused in a public view
   try {
     const q = lensParams(new URLSearchParams(view.env ? { env: view.env } : {}));
     const res = await apiFetch(`/api/resources?${q}`);
@@ -4116,7 +4224,7 @@ function renderDial() {
   // Apply is the write step — omitted in a static export (observe + reconcile
   // above are reads and stay).
   const applying = applyProgress && applyProgress.status === "running";
-  if (!staticMode) {
+  if (!staticMode && !publicMode) {
     track.appendChild(dialArrow());
     const applyBtn = button(
       applying ? "apply · running…" : "apply",
@@ -4134,7 +4242,7 @@ function renderDial() {
 
   host.appendChild(track);
   if (reconcileCache) host.appendChild(renderReconcileDetail(reconcileCache));
-  if (applyPicker && !applying && !staticMode) host.appendChild(renderApplyPicker());
+  if (applyPicker && !applying && !staticMode && !publicMode) host.appendChild(renderApplyPicker());
   if (applyProgress && applyProgress.waves.length) host.appendChild(renderApplyProgress(applyProgress));
   mountOperator(host);
   mountPlayhead(host);
@@ -4154,7 +4262,7 @@ function mountOperator(host) {
     {
       approve: embedOpts.embed || previewMode || staticMode || terragucciRepo ? null : (op, gate) => approveConvergeGate(op, gate),
       approver: projectInfo && projectInfo.approver,
-      why: embedOpts.embed ? "host" : previewMode ? "preview" : "static",
+      why: embedOpts.embed ? "host" : publicMode ? "public" : previewMode ? "preview" : "static",
       // A static export has no server to ask, so it gets no history affordance
       // at all rather than a button that can only fail.
       ...(staticMode ? {} : { history: () => toggleOperatorHistory() }),
@@ -4172,7 +4280,7 @@ function mountPlayhead(host) {
   if (!hasPlayhead(runState)) return;
   const box = document.createElement("div");
   box.className = "run-playhead";
-  renderPlayhead(box, runState, gateCard, { approve: embedOpts.embed || previewMode || staticMode || terragucciRepo ? null : (op, gate) => signal(op, gate), approver: projectInfo && projectInfo.approver, why: embedOpts.embed ? "host" : previewMode ? "preview" : "static" });
+  renderPlayhead(box, runState, gateCard, { approve: embedOpts.embed || previewMode || staticMode || terragucciRepo ? null : (op, gate) => signal(op, gate), approver: projectInfo && projectInfo.approver, why: embedOpts.embed ? "host" : publicMode ? "public" : previewMode ? "preview" : "static" });
   host.appendChild(box);
 }
 
@@ -4409,6 +4517,7 @@ function renderReconcileDetail(r) {
 }
 
 async function loadReconcile() {
+  if (publicMode) return; // #569: /api/reconcile is refused in a public view
   try {
     const q = lensParams(new URLSearchParams({ env: view.env }));
     const res = await apiFetch(`/api/reconcile?${q}`);
@@ -4659,6 +4768,7 @@ function render(ir, svg, m) {
   markTerragucciCards(); // #490: and what terragucci's reports found, dated
   markYodelCards(); // #526: and SQL Yodeler's drift, dated
   applyLayout(); // #228: last, so the hand-placed deltas ride on top of every other pass
+  drawTgReads(); // #568: after the layout, so the reads lines meet the cards where they now sit
   renderDial();
 }
 
@@ -5472,7 +5582,7 @@ async function pullServerLayout(lens) {
  * read-only project, older behold) simply never pushes, and a failed push is
  * not reported — the localStorage tier already has it. */
 const pushServerLayout = debounce((lens, deltas) => {
-  if (staticMode || !layoutServer.writable || layoutServer.lens !== lens) return;
+  if (staticMode || publicMode || !layoutServer.writable || layoutServer.lens !== lens) return;
   postServerLayout((url, init) => fetch(url, init), lens, deltas);
 }, 600);
 // A reload (or a tab closing) within the debounce window would otherwise drop
@@ -5980,6 +6090,7 @@ events.addEventListener("changed", () => {
 // status dot + name + state, with the bring-up/reset/pipeline actions inline
 // again (#73 moved those into ⌘K; they remain there too, via lastSubstrates).
 async function loadSubstrates() {
+  if (publicMode) return; // #569: /api/substrates is refused in a public view
   try {
     const { substrates } = await apiFetch("/api/substrates").then((r) => r.json());
     renderSubstrates(substrates || []);
@@ -6022,7 +6133,7 @@ function renderSubstrates(subs) {
     row.append(dot, name, status);
     // Writes — none in a static export; the GitHub dispatch also respects the
     // preview lock, mirroring paletteCommands()'s gating exactly.
-    if (!staticMode) {
+    if (!staticMode && !publicMode) {
       if (s.bringUp) row.appendChild(actButton("bring up", () => bringUpSubstrate(s)));
       if (s.name === "floci" && s.status === "up")
         row.appendChild(actButton("reset", () => resetLocal(), "Reset the local emulator — wipes every stack, reboots, redeploys clean"));
@@ -6142,7 +6253,7 @@ function hideLoading() {
 // ask. Without this guard the bundle logs a 404 on every page load and relies on
 // the fetch failing to stay silent, which is an outcome rather than a rule.
 async function refreshReadCost() {
-  if (staticMode) return;
+  if (staticMode || publicMode) return; // #569: /api/doctor is refused in a public view
   try {
     const res = await fetch("/api/doctor?reads=1");
     if (!res.ok) return;
@@ -6263,7 +6374,7 @@ function runStatusTarget() {
   return opsApply && opsApply.gate ? opsApply.name : null;
 }
 function pollRunStatus() {
-  if (staticMode || runStatusInFlight) return;
+  if (staticMode || publicMode || runStatusInFlight) return; // #569: a public serve refuses the op tools
   const name = runStatusTarget();
   if (!name) return;
   // Only a durable run has gate state at all. A local run's playhead is
@@ -6292,7 +6403,7 @@ function pollRunStatus() {
  * strip standing in for "behold couldn't ask".
  */
 function pollOperatorStatus() {
-  if (staticMode || operatorInFlight) return;
+  if (staticMode || publicMode || operatorInFlight) return;
   operatorInFlight = true;
   apiFetch("/api/operator/status")
     .then((r) => r.json())
@@ -6332,7 +6443,7 @@ function toggleOperatorHistory() {
  * empty timeline must never stand in for "behold couldn't ask".
  */
 function loadOperatorHistory() {
-  if (staticMode || operatorHistory.loading) return;
+  if (staticMode || publicMode || operatorHistory.loading) return;
   operatorHistory = { ...operatorHistory, loading: true, error: null };
   apiFetch("/api/operator/log")
     .then((r) => r.json())
@@ -6506,7 +6617,7 @@ async function initActions() {
   // #165: which envs deploy through a forge, and whether Deploy can dispatch
   // them right now (`/api/project`'s executor block).
   executorInfo = project.executor || {};
-  previewMode = staticMode || !!project.previewMode; // static ⇒ read-only, no writes at all
+  previewMode = staticMode || publicMode || !!project.previewMode; // static ⇒ read-only, no writes at all
   // #517: a SQL Yodeler repo is guarded the same way.
   const guarded = project.terragucci || project.sqlYodeler;
   if (guarded) {
@@ -6519,6 +6630,16 @@ async function initActions() {
     bar.appendChild(pill);
     return; // no Deploy, no Run, no Approve: the pipeline is the only way to apply
   }
+  // #569: a public view. Nothing in the bar writes; the pill says why.
+  if (publicMode || project.publicMode) {
+    previewMode = true;
+    const pill = document.createElement("span");
+    pill.textContent = "● public view, read-only";
+    pill.title = "behold serve --public: this page reads and follows; it starts nothing and approves nothing.";
+    pill.style.cssText = "align-self:center;font:var(--t-caption)/1.4 var(--font-mono);color:var(--muted);border:1px solid var(--line);border-radius:var(--r-ctl);padding:2px 8px";
+    bar.appendChild(pill);
+    return;
+  }
   const { ops, adoptLexicons, autoSync, local, applyProgress: apInit, runState: runInit, operatorState: opInit } = await apiFetch("/api/ops")
     .then((r) => r.json())
     .catch(() => ({ ops: [], adoptLexicons: [] }));
@@ -6762,12 +6883,13 @@ function paletteCommands() {
   const c = [];
 
   // Reads — always available, even in a static export or the preview lock.
-  if (!staticMode) c.push(["Re-check live (refresh drift)", () => refresh()]);
+  // #569: not in a public view — Refresh is a POST.
+  if (!staticMode && !publicMode) c.push(["Re-check live (refresh drift)", () => refresh()]);
   // #404: the expensive sibling, listed beside it and named for what it costs.
   // Offered only with an env picked — there is no overlay to plan against
   // without one — and disabled-with-its-reason otherwise, the convention the
   // colour-mode and carve rows below already follow.
-  if (!staticMode) {
+  if (!staticMode && !publicMode) {
     c.push(
       view.env
         ? ["Re-check live with plan (attribute drift) — a full read of the account", () => refreshWithPlan()]
@@ -6864,7 +6986,7 @@ function paletteCommands() {
     c.push([`target: ${t.endpoint}` + (view.target === t.endpoint ? " ✓" : ""), () => { view.target = t.endpoint; resetDialCaches(); load(); }]);
   }
 
-  if (staticMode || terragucciRepo) return c.map(([label, run]) => ({ label, run })); // no writes at all in a static export or a terragucci repo
+  if (staticMode || publicMode || terragucciRepo) return c.map(([label, run]) => ({ label, run })); // no writes at all in a static export, a public view (#569) or a terragucci repo
 
   // Deploy / write actions — previewMode hides exactly the git/PR write
   // affordances the toolbar hid (Rollback, Sync, Run <op>); Apply all, Reset,

package/web/kiosk.html

@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>behold kiosk</title>
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23a6adc8' stroke-width='1.6'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='%23a6adc8'/%3E%3C/svg%3E"
+    />
+    <style>
+      /* #569 step 2. The pre-paint fallback is index.html's: the default
+         theme's tokens, which initTheme() replaces with the viewer's theme. */
+      :root {
+        --bg: #1e1e2e; --panel: #2e2f40; --line: #3b3c4a; --fg: #cdd6f4; --muted: #777a8c;
+        --edge: #56596d; --managed: #a6e3a1; --foreign: #f9e2af; --pending: #89b4fa;
+        --degraded: #f38ba8; --neutral: #6d7187; --runtime: #94e2d5;
+        --rule: #4e4f64; --focus: #a3b4d0; --active: #3d4660; --well: #11101f; --shadow: #050507;
+        --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      }
+      * { box-sizing: border-box; }
+      html, body { margin: 0; background: var(--bg); color: var(--fg); font: 18px/1.45 var(--font-ui); }
+      #kiosk { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem 3rem; display: grid; gap: 1.25rem; }
+      .k-kicker { font: 600 0.8rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
+      .k-title { margin: 0.2rem 0; font-size: 2rem; line-height: 1.2; }
+      .k-muted { color: var(--muted); margin: 0.25rem 0; }
+      section { background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 1rem 1.25rem; }
+      .k-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
+      .k-stop { font: 0.85rem var(--font-mono); padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--muted); }
+      .k-done { color: var(--fg); border-color: var(--managed); }
+      .k-current { color: var(--bg); background: var(--pending); border-color: var(--pending); font-weight: 600; }
+      .k-failed { color: var(--bg); background: var(--degraded); border-color: var(--degraded); font-weight: 600; }
+      .k-label { font-size: 1.35rem; margin: 0.4rem 0 0; }
+      .k-step-waiting { border-color: var(--foreign); }
+      .k-step-failed, .k-step-stalled { border-color: var(--degraded); }
+      .k-step-applied { border-color: var(--managed); }
+      .k-next-line { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; margin: 0.4rem 0 0; font-size: 1.2rem; }
+      .k-action { font-family: var(--font-mono); }
+      .k-when { color: var(--foreign); font-family: var(--font-mono); }
+      .k-approve { margin-top: 0.75rem; }
+      .k-command { display: block; padding: 0.6rem 0.8rem; background: var(--well); border-radius: 6px; font: 0.95rem var(--font-mono); overflow-wrap: anywhere; user-select: none; }
+      .k-read { font-family: var(--font-mono); font-size: 0.95rem; margin: 0.3rem 0; }
+      .k-unknown { color: var(--foreign); }
+      .k-unreviewed { margin: 0.4rem 0; padding-left: 0.6rem; border-left: 3px solid var(--foreign); }
+      .k-waves { list-style: none; padding: 0; margin: 0.6rem 0; display: grid; gap: 0.5rem; }
+      .k-wave { border: 1px solid var(--rule); border-left-width: 4px; border-radius: 6px; padding: 0.5rem 0.8rem; background: var(--bg); }
+      .k-wave-title { font-family: var(--font-mono); }
+      .k-wave-fact { color: var(--muted); font-size: 0.9rem; }
+      .k-tone-ok { border-left-color: var(--managed); }
+      .k-tone-wave { border-left-color: var(--foreign); }
+      .k-tone-failed { border-left-color: var(--degraded); }
+      .k-tone-plan { border-left-color: var(--pending); }
+      .k-tone-none { border-left-color: var(--neutral); }
+      .k-foot { font-size: 0.8rem; }
+    </style>
+  </head>
+  <body>
+    <main id="kiosk" aria-live="polite"></main>
+    <script type="module">
+      import { initTheme } from "/theme.js";
+      import { startKiosk } from "/kiosk.js";
+      initTheme();
+      startKiosk(document.getElementById("kiosk"));
+    </script>
+  </body>
+</html>