@intentius/behold 0.22.0 → 0.23.0

package/example-choudoufu-estate/chant.workspace.json

@@ -4,7 +4,7 @@
   "pins": [
     {
       "package": "@intentius/chant-lexicon-terraform",
-      "version": "0.95.0"
+      "version": "0.102.0"
     }
   ],
   "members": [

package/example-terraform-estate/README.md

@@ -90,10 +90,20 @@ install them, so that every user who serves an ordinary chant project does not
 carry an HCL parser they will never run:
 
 ```sh
-npm install --no-save @intentius/chant-lexicon-terraform @cdktn/hcl2json
+npm install --no-save @intentius/chant-lexicon-terraform@^0.102.0 @cdktn/hcl2json@^0.24.0
 ```
 
-Without them the demo refuses with that exact line and says where it looked.
+Without them the demo refuses before it serves, naming both packages, the
+ranges behold declares, and where it looked.
+
+The estate is a declared chant workspace, and chant reads a member's kind from
+the packages `chant.workspace.json` pins, looked up from the workspace's own
+`node_modules` at exactly the pinned version. A demo copy has no
+`node_modules`, so `behold demo` links the lexicon behold resolved into the
+copy and sets the copy's pin to that version (#484). It says so as it loads:
+`linked @intentius/chant-lexicon-terraform 0.102.0 into the copy`. Serving
+your own declared workspace is different: install the pinned lexicon in its
+root, the way `chant workspace check` asks.
 
 ## Not the carve demo
 

package/example-terraform-estate/chant.workspace.json

@@ -4,7 +4,7 @@
   "pins": [
     {
       "package": "@intentius/chant-lexicon-terraform",
-      "version": "0.95.0"
+      "version": "0.102.0"
     }
   ],
   "members": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intentius/behold",
-  "version": "0.22.0",
+  "version": "0.23.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.",
@@ -35,19 +35,20 @@
     "smoke:ui": "tsx smoke/ui-smoke.mjs",
     "tsc": "tsc --noEmit",
     "test": "vitest run",
-    "build": "esbuild src/cli.ts --bundle --platform=node --format=esm --external:hono --external:@hono/node-server --external:@intentius/pinhole --external:@kubernetes/client-node --outfile=dist/cli.js && chmod +x dist/cli.js",
+    "build": "esbuild src/cli.ts --bundle --platform=node --format=esm --external:hono --external:@hono/node-server --external:@intentius/pinhole --external:@kubernetes/client-node --external:ajv --outfile=dist/cli.js && chmod +x dist/cli.js",
     "prepare": "npm run build",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
     "@hono/node-server": "^2.0.5",
-    "@intentius/chant": "^0.95.0",
-    "@intentius/chant-k8s-client": "^0.95.0",
+    "@intentius/chant": "^0.102.0",
+    "@intentius/chant-k8s-client": "^0.102.0",
     "@intentius/pinhole": "^0.3.8",
+    "ajv": "^8.20.0",
     "hono": "^4.12.34"
   },
   "peerDependencies": {
-    "@intentius/chant-lexicon-terraform": "^0.95.0",
+    "@intentius/chant-lexicon-terraform": "^0.102.0",
     "@cdktn/hcl2json": "^0.24.0"
   },
   "peerDependenciesMeta": {

package/web/app.js

@@ -12,6 +12,8 @@ import { createRefreshQueue } from "./refresh-queue.js";
 import { readViewQuery, writeViewQuery, settleView, settlePlace, refusalLine } from "./view-url.js";
 import { readEmbed, selectMessage, viewFromMessage } from "./embed.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 { seconds, whyQuery, whyView } from "./why.js";
 import { readCostLine } from "./read-cost.js";
 import { applyMemberFrame, pendingLine, stillPending } from "./pending.js";
 import { initTheme, setTheme, mountThemePicker, readableOn, colorForCategory, onThemeChange, getTokens, getTheme, pinTokensFor } from "./theme.js";
@@ -579,6 +581,194 @@ function renderDriftSection(section, r) {
   pr("rendered", `${p.renderedAt} · helm ${p.helmVersion} · chant ${p.chantVersion}`);
 }
 
+// ---------------------------------------------------------------------------
+// #471: the "why" of a member or a card in a declared workspace.
+//
+// Read on demand: `chant workspace graph --intent` walks git history and takes
+// seconds on a small workspace and tens of seconds on a large one, so nothing
+// asks for it until someone clicks. While it reads, the section says so with
+// the seconds counting and a Stop button; the rest of the page goes on as
+// before. Picking something else aborts the request, and the server's read
+// scheduler stops chant when nobody is waiting for it any more. In embed mode
+// the section is drawn the same; clicks on the graph still go to the host.
+// ---------------------------------------------------------------------------
+
+/** The member a card or a box belongs to, when the served workspace declares it. */
+function declaredMember(name) {
+  const ws = projectInfo && projectInfo.workspace;
+  return (ws && ws.members.find((m) => m.name === name)) || null;
+}
+
+/** Answers already read this session, by query. A source change clears them. */
+const whyAnswers = new Map();
+/** The read in flight, so a new pick can stop it. */
+let whyInFlight = null;
+
+function stopWhyRead() {
+  if (whyInFlight) whyInFlight.abort();
+  whyInFlight = null;
+}
+
+function renderWhySection(panel, ask) {
+  stopWhyRead();
+  if (staticMode) return;
+  const memberName = ask.member || nodeMember(ask.node || "");
+  if (!declaredMember(memberName)) return;
+  const query = whyQuery(ask);
+  const forId = panel.dataset.node;
+  const h = document.createElement("h3");
+  h.textContent = "why";
+  const box = document.createElement("div");
+  box.className = "why";
+  box.dataset.why = query;
+  panel.append(h, box);
+
+  const button = (label, title, onClick) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "why-read";
+    b.textContent = label;
+    b.title = title;
+    b.addEventListener("click", onClick);
+    return b;
+  };
+  const idle = (note) => {
+    box.replaceChildren();
+    const p = document.createElement("p");
+    p.className = "queried";
+    p.textContent = note || `The decisions that cover ${ask.node ? "this card" : `member ${memberName}`}, and the runs and commits behind it, from chant workspace graph --intent. Reading walks the repository's history; on a large one it takes a while.`;
+    box.append(p, button("Read why", "Ask chant now. Nothing is read until you click.", read));
+  };
+  const read = async () => {
+    stopWhyRead();
+    const controller = new AbortController();
+    whyInFlight = controller;
+    const started = Date.now();
+    box.replaceChildren();
+    const status = document.createElement("p");
+    status.className = "queried why-reading";
+    const tick = () => (status.textContent = `reading… ${seconds(Date.now() - started)}`);
+    tick();
+    const timer = setInterval(tick, 250);
+    box.append(status, button("Stop", "Stop the read; chant is stopped too when nothing else waits for it.", () => {
+      stopWhyRead();
+      idle("Stopped. Nothing was read.");
+    }));
+    let answer;
+    try {
+      answer = await fetch(query, { signal: controller.signal }).then((r) => r.json());
+    } catch (e) {
+      clearInterval(timer);
+      if (controller.signal.aborted) return;
+      answer = { error: `The why read failed: ${e.message}`, remedy: "" };
+    }
+    clearInterval(timer);
+    if (whyInFlight === controller) whyInFlight = null;
+    if (panel.dataset.node !== forId || !box.isConnected) return;
+    if (!answer.refusal && !answer.error) whyAnswers.set(query, answer);
+    paintWhy(box, answer, read);
+  };
+  const known = whyAnswers.get(query);
+  if (known) paintWhy(box, known, read);
+  else idle();
+}
+
+function paintWhy(box, answer, again) {
+  const v = whyView(answer);
+  box.replaceChildren();
+  const para = (text, cls) => {
+    const p = document.createElement("p");
+    if (cls) p.className = cls;
+    p.textContent = text;
+    box.appendChild(p);
+    return p;
+  };
+  const list = (title, rows, row) => {
+    if (!rows.length) return;
+    const t = document.createElement("div");
+    t.className = "why-head";
+    t.textContent = title;
+    const ul = document.createElement("ul");
+    ul.className = "why-list";
+    for (const r of rows) ul.appendChild(row(r));
+    box.append(t, ul);
+  };
+  const li = (lead, rest, meta) => {
+    const el = document.createElement("li");
+    const top = document.createElement("div");
+    top.append(lead);
+    if (rest) top.append(` ${rest}`);
+    el.appendChild(top);
+    if (meta) {
+      const m = document.createElement("div");
+      m.className = "why-meta";
+      m.textContent = meta;
+      el.appendChild(m);
+    }
+    return el;
+  };
+  if (v.refusal) {
+    para(v.refusal.error, "why-refusal");
+    if (v.refusal.remedy) para(v.refusal.remedy, "queried");
+  } else {
+    para(v.headline, "why-headline");
+    list("decisions", v.decisions, (d) => {
+      let lead;
+      if (d.href) {
+        lead = document.createElement("a");
+        lead.href = d.href;
+        lead.target = "_blank";
+        lead.rel = "noreferrer noopener";
+        lead.title = "Review this proposed decision in hud";
+      } else {
+        lead = document.createElement("code");
+      }
+      lead.textContent = d.id;
+      return li(lead, d.title, [d.meta, d.note].filter(Boolean).join(" · "));
+    });
+    list("runs", v.runs, (r) => {
+      const lead = document.createElement("code");
+      lead.textContent = r.id;
+      return li(lead, r.when ? r.when.slice(0, 10) : "", r.meta);
+    });
+    list(`commits${v.more ? ` · ${v.commits.length} of ${v.commits.length + v.more}` : ""}`, v.commits, (c) => {
+      const lead = document.createElement("code");
+      lead.textContent = c.sha;
+      return li(lead, c.subject, c.meta);
+    });
+    for (const g of v.gaps) para(g, "why-gap");
+  }
+  if (v.footer) para(v.footer, "queried");
+  const b = document.createElement("button");
+  b.type = "button";
+  b.className = "why-read";
+  b.textContent = "Read again";
+  b.title = "Ask chant again, for changes since this read.";
+  b.addEventListener("click", again);
+  box.appendChild(b);
+}
+
+/** A member's box was picked: what the declaration says of it, and its why. */
+function inspectMember(name) {
+  const m = declaredMember(name);
+  if (!m) return;
+  const panel = document.getElementById("inspect-body");
+  panel.innerHTML = "<h2>inspect</h2>";
+  panel.dataset.node = `member:${name}`;
+  const h = document.createElement("h3");
+  h.textContent = "member";
+  const dl = document.createElement("dl");
+  for (const [k, v] of [["name", m.name], ["dir", m.dir], ["kind", m.kind]]) {
+    const dt = document.createElement("dt");
+    dt.textContent = k;
+    const dd = document.createElement("dd");
+    dd.textContent = v;
+    dl.append(dt, dd);
+  }
+  panel.append(h, dl);
+  renderWhySection(panel, { member: name });
+}
+
 const RESILIENCE_WORD = { survives: "survives", degrades: "degrades", fails: "fails" };
 
 /**
@@ -693,6 +883,27 @@ function inspect(node) {
   if (node.runtimeOwner) id("runtime owner", node.runtimeOwner);
   if (node.sourceLoc && node.sourceLoc.file) id("source", node.sourceLoc.file);
 
+  // #490: what terragucci's reports found about this card, each dated and
+  // linked to its run. Not a status: the card's fill says nothing about it.
+  const tgMarks = tgAnswer && tgAnswer.cards && tgAnswer.cards[node.id];
+  if (tgMarks && tgMarks.length) {
+    const h = document.createElement("h3");
+    h.textContent = "terragucci reports (not live)";
+    panel.appendChild(h);
+    const now = new Date();
+    for (const m of tgMarks) {
+      const p = document.createElement("p");
+      p.className = "tg-inspect";
+      p.textContent = markLine(m, now) + " ";
+      p.title = m.addresses.join("\n");
+      p.appendChild(tgLink("report", tgHref(tgAnswer, m.run.report)));
+      if (m.run.job_url) p.append(" · ", tgLink("job", m.run.job_url));
+      if (m.run.pull_request_url) p.append(" · ", tgLink(`PR #${m.run.pull_request}`, m.run.pull_request_url));
+      if (m.run.trace_url) p.append(" · ", tgLink("trace", m.run.trace_url));
+      panel.appendChild(p);
+    }
+  }
+
   // Containment hierarchy: a resource shows its parent chain UP (composite →
   // component); a collapsed composite (detail 1: `attrs.members` is a count)
   // shows its member list DOWN. The parent chain is on the node itself
@@ -734,6 +945,9 @@ function inspect(node) {
     });
   }
 
+  // #471: why this card is the way it is, read from chant when asked.
+  renderWhySection(panel, { node: node.id });
+
   // #401: the behaviour block, field by field, with a badge on every figure.
   // The colour on the card carries one number at a time (whichever mode is
   // picked) and carries it as a hue; this is where the engine's whole
@@ -1259,6 +1473,7 @@ function wire(ir) {
       selectedNodeId = null;
       view.member = id;
       renderStatusbar();
+      inspectMember(id);
       embedSelected(id, null);
     });
   }
@@ -1312,6 +1527,9 @@ function bootZoom(memberKinds) {
 // 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;
+// #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;
 
 // The unified "zoom" control (one granularity axis, coarse → fine). Underlying
 // state stays (components, detail); zoom is just the single knob the header
@@ -2998,6 +3216,166 @@ function markDriftedCards(ir) {
   }
 }
 
+// --- #490: a terragucci estate, painted from its reports ----------------------
+// /api/terragucci answers each root's newest plan, drift and apply run, the
+// cards they flag and the waves waiting for an approval. Marks are dated
+// corner glyphs, never a fill: the fill is the live-status channel, and none
+// of this is live. A waiting wave offers its approve line to copy, no button.
+let tgAnswer = null;
+let tgHost = null;
+async function initTerragucci() {
+  const project = await apiFetch("/api/project").then((r) => r.json()).catch(() => ({}));
+  if (!project.terragucciReports) return;
+  await loadTerragucci();
+}
+async function loadTerragucci({ fresh = false } = {}) {
+  const answer = await apiFetch(`/api/terragucci${fresh ? "?fresh=1" : ""}`)
+    .then((r) => r.json())
+    .catch((e) => ({ error: String(e), code: "terragucci-report", remedy: "" }));
+  tgAnswer = answer;
+  renderTerragucciPanel();
+  markTerragucciCards();
+}
+function markTerragucciCards() {
+  const svg = document.querySelector("#graph svg");
+  if (!svg || !tgAnswer || !tgAnswer.cards) return;
+  const now = new Date();
+  for (const [id, marks] of Object.entries(tgAnswer.cards)) {
+    const g = svg.querySelector('[data-node-id="' + CSS.escape(id) + '"]');
+    if (!g || g.querySelector('[data-tg-mark="1"]')) continue;
+    const corner = cornerOf(marks);
+    g.classList.add("tg-marked", `tg-${corner.tone}`);
+    const rect = g.querySelector("rect");
+    const box = rect && rect.getBBox ? rect.getBBox() : null;
+    const tag = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    tag.setAttribute("data-tg-mark", "1");
+    tag.setAttribute("x", String((box ? box.x + box.width : 150) - 10));
+    tag.setAttribute("y", String((box ? box.y + box.height : 60) - 9));
+    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.textContent = `${corner.text} · ${markAge(marks)}`;
+    const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+    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);
+  }
+}
+function markAge(marks) {
+  const newest = marks.map((m) => m.run.finished).sort().pop();
+  const s = Math.max(0, (Date.now() - Date.parse(newest)) / 1000);
+  return s < 3600 ? `${Math.max(1, Math.round(s / 60))}m` : s < 172800 ? `${Math.round(s / 3600)}h` : `${Math.round(s / 86400)}d`;
+}
+function tgLink(text, href) {
+  const a = document.createElement("a");
+  a.textContent = text;
+  a.href = href;
+  a.target = "_blank";
+  a.rel = "noopener";
+  return a;
+}
+function renderTerragucciPanel() {
+  if (!tgHost) {
+    tgHost = addPanelTab("terragucci", "Terragucci", "What terragucci's reports found: each root's newest drift check, plan and apply wave, dated. Not live.");
+    if (!tgHost) return;
+    tgHost.id = "tab-terragucci";
+  }
+  const host = tgHost;
+  host.replaceChildren();
+  const a = tgAnswer;
+  if (!a || a.error) {
+    const err = document.createElement("div");
+    err.className = "tg-refusal";
+    err.textContent = a ? a.error : "terragucci reports not read";
+    if (a && a.remedy) err.title = a.remedy;
+    const fix = document.createElement("div");
+    fix.className = "tg-legend";
+    fix.textContent = (a && a.remedy) || "";
+    host.append(err, fix);
+    return;
+  }
+  const now = new Date();
+  const head = document.createElement("div");
+  head.className = "tg-legend";
+  const lg = tgLegend(a, now);
+  head.textContent = lg.text;
+  head.title = lg.title;
+  host.appendChild(head);
+  const est = estateLine(a);
+  if (est) {
+    const line = document.createElement("div");
+    line.className = "tg-estate";
+    line.appendChild(tgLink(est.text, est.href));
+    host.appendChild(line);
+  }
+  for (const w of waveCards(a, now)) {
+    const box = document.createElement("div");
+    box.className = "ws-gate tg-wave";
+    const title = document.createElement("div");
+    title.className = "ws-gate-title";
+    title.textContent = w.title;
+    const facts = document.createElement("div");
+    facts.className = "ws-gate-facts";
+    facts.textContent = w.facts;
+    box.append(title, facts);
+    for (const d of w.destroys) {
+      const row = document.createElement("div");
+      row.className = "ws-gate-note";
+      row.textContent = `destroys ${d}`;
+      box.appendChild(row);
+    }
+    const cmd = document.createElement("code");
+    cmd.className = "tg-command";
+    cmd.textContent = w.command;
+    const copy = button("Copy", "", () => copyToClipboard(w.command, copy));
+    copy.title = "Copy the line. Run it at your shell: the approval is yours, signed, in git.";
+    const note = document.createElement("div");
+    note.className = "ws-gate-note";
+    note.textContent = w.note;
+    const links = document.createElement("div");
+    links.className = "ws-gate-note";
+    links.appendChild(tgLink("report", w.report));
+    if (w.job) links.append(" · ", tgLink("job", w.job));
+    box.append(cmd, copy, note, links);
+    host.appendChild(box);
+  }
+  for (const r of tgRootRows(a, now)) {
+    const row = document.createElement("div");
+    row.className = "tg-root";
+    const path = document.createElement("div");
+    path.className = "tg-path";
+    path.textContent = r.path;
+    path.title = `${r.member}/${r.name}`;
+    const cells = document.createElement("div");
+    cells.className = "tg-cells";
+    for (const k of ["drift", "plan", "apply"]) {
+      const span = document.createElement("span");
+      span.className = `tg-${r[k].tone}`;
+      span.dataset.stage = k;
+      if (r[k].href) span.appendChild(tgLink(r[k].text, r[k].href));
+      else span.textContent = r[k].text;
+      if (r[k].title) span.title = r[k].title;
+      cells.appendChild(span);
+    }
+    row.append(path, cells);
+    host.appendChild(row);
+  }
+  if (a.unmatched && (a.unmatched.roots.length || a.unmatched.changes.length)) {
+    const um = document.createElement("div");
+    um.className = "tg-legend";
+    um.textContent = [
+      a.unmatched.roots.length ? `reported roots this checkout does not declare: ${a.unmatched.roots.join(", ")}` : "",
+      a.unmatched.changes.length ? `changes no card is: ${a.unmatched.changes.map((c) => `${c.root}: ${c.address}`).join(", ")}` : "",
+    ].filter(Boolean).join(" · ");
+    host.appendChild(um);
+  }
+  if (!staticMode) {
+    const again = button("Read the reports again", "", () => loadTerragucci({ fresh: true }));
+    host.appendChild(again);
+  }
+}
+initTerragucci();
+
 function renderPanelCarve() {
   if (!carveMode()) return;
   if (!carveHost) {
@@ -3414,7 +3792,7 @@ function mountOperator(host) {
     box,
     operatorState,
     {
-      approve: embedOpts.embed || previewMode || staticMode ? null : (op, gate) => approveConvergeGate(op, gate),
+      approve: embedOpts.embed || previewMode || staticMode || terragucciRepo ? null : (op, gate) => approveConvergeGate(op, gate),
       approver: projectInfo && projectInfo.approver,
       why: embedOpts.embed ? "host" : previewMode ? "preview" : "static",
       // A static export has no server to ask, so it gets no history affordance
@@ -3434,7 +3812,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 ? 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" : previewMode ? "preview" : "static" });
   host.appendChild(box);
 }
 
@@ -3902,6 +4280,7 @@ function render(ir, svg, m) {
   markOperatorCards(ir); // #234 free rider: same, for the operating loop's home
   markDriftedCards(ir); // #404: same, for a bound card the plan would change — after the carve/operator stamps, so it can see and yield to them
   markPendingCards(ir); // #422: and the cards whose member has not answered yet
+  markTerragucciCards(); // #490: and what terragucci's reports found, dated
   applyLayout(); // #228: last, so the hand-placed deltas ride on top of every other pass
   renderDial();
 }
@@ -5206,6 +5585,7 @@ events.addEventListener("member", (e) => {
 
 events.addEventListener("changed", () => {
   bulkDiffCache = null; // an op ran → per-node live state may have changed
+  whyAnswers.clear(); // #471: a why read before the change may no longer hold
   load();
   loadWorkspaceGates({ force: true });
   loadSubstrates(); // a bring-up (or any op) finished → re-detect readiness
@@ -5742,6 +6122,16 @@ async function initActions() {
   // them right now (`/api/project`'s executor block).
   executorInfo = project.executor || {};
   previewMode = staticMode || !!project.previewMode; // static ⇒ read-only, no writes at all
+  if (project.terragucci) {
+    terragucciRepo = project.terragucci;
+    previewMode = true;
+    const pill = document.createElement("span");
+    pill.textContent = "● applied by terragucci";
+    pill.title = `${project.terragucci.error}\n\n${project.terragucci.remedy}`;
+    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; // no Deploy, no Run, no Approve: the pipeline is the only way to apply
+  }
   const { ops, adoptLexicons, autoSync, local, applyProgress: apInit, runState: runInit, operatorState: opInit } = await apiFetch("/api/ops")
     .then((r) => r.json())
     .catch(() => ({ ops: [], adoptLexicons: [] }));
@@ -6087,7 +6477,7 @@ function paletteCommands() {
     c.push([`target: ${t.endpoint}` + (view.target === t.endpoint ? " ✓" : ""), () => { view.target = t.endpoint; resetDialCaches(); load(); }]);
   }
 
-  if (staticMode) return c.map(([label, run]) => ({ label, run })); // no writes at all in a static export
+  if (staticMode || terragucciRepo) return c.map(([label, run]) => ({ label, run })); // no writes at all in a static export 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/index.html

@@ -142,6 +142,25 @@
       #ws-gates .ws-gate-title { font-weight: 600; }
       #ws-gates .ws-gate-facts, #ws-gates .ws-gate-note { color: var(--muted); font-size: var(--t-caption); }
       #ws-gates .ws-gate button { margin-top: 4px; }
+      /* #490: terragucci's reports, dated. Never a fill. */
+      #panel-body #tab-terragucci.active { display: flex; flex-direction: column; gap: 8px; font-size: var(--t-caption); }
+      #tab-terragucci .tg-legend, #tab-terragucci .tg-estate { color: var(--muted); }
+      #tab-terragucci .tg-refusal { color: var(--degraded); font-weight: 600; }
+      #tab-terragucci .ws-gate { background: var(--panel); border: 1px solid var(--pending, var(--rule)); border-radius: var(--r-ctl); padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; }
+      #tab-terragucci .ws-gate-title { font-weight: 600; }
+      #tab-terragucci .ws-gate-facts, #tab-terragucci .ws-gate-note { color: var(--muted); overflow-wrap: anywhere; }
+      #inspect-body .tg-inspect { font-size: var(--t-caption); margin: 2px 0 6px; overflow-wrap: anywhere; }
+      #inspect-body .tg-inspect a { color: inherit; }
+      #tab-terragucci .tg-command { font-family: var(--font-mono); overflow-wrap: anywhere; }
+      #tab-terragucci .tg-root { border-top: 1px solid var(--rule); padding-top: 4px; }
+      #tab-terragucci .tg-path { font-family: var(--font-mono); }
+      #tab-terragucci .tg-cells { display: flex; flex-wrap: wrap; gap: 0 10px; }
+      #tab-terragucci .tg-cells > span::before { content: attr(data-stage) ": "; color: var(--muted); }
+      #tab-terragucci .tg-drift, #tab-terragucci .tg-failed { color: var(--degraded); }
+      #tab-terragucci .tg-wave { color: var(--pending); }
+      #tab-terragucci .tg-plan { color: var(--fg); }
+      #tab-terragucci .tg-none, #tab-terragucci .tg-ok { color: var(--muted); }
+      #tab-terragucci a { color: inherit; }
       /* Fit reset + a zoom hint, floating top-right of the graph pane. */
       #zoom-toggle { position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--panel);
         color: var(--muted); border: 1px solid var(--rule); border-radius: var(--r-ctl); padding: 4px 10px;
@@ -206,6 +225,16 @@
       #actions button:hover, #inspect button:hover { border-color: var(--focus); }
       #actions button.approve { border-color: var(--managed); color: var(--managed); }
       #inspect button { border-color: var(--foreign); color: var(--foreign); }
+      /* #471: the why section. Its buttons read, they change nothing, so they
+         don't wear the foreign hue the pane's write buttons do. */
+      #inspect button.why-read { border-color: var(--rule); color: var(--fg); margin: 6px 6px 0 0; }
+      #inspect .why-headline { margin: 0 0 6px; }
+      #inspect .why-head { color: var(--muted); font-size: var(--t-caption); margin-top: 10px; }
+      #inspect .why-list { list-style: none; margin: 2px 0 0; padding: 0; }
+      #inspect .why-list li { margin: 6px 0 0; font-size: var(--t-body); overflow-wrap: anywhere; }
+      #inspect .why-list code { font: var(--t-body)/1.45 var(--font-mono); }
+      #inspect .why-meta { color: var(--muted); font-size: var(--t-caption); }
+      #inspect .why-gap, #inspect .why-refusal { color: var(--pending); }
 
       /* ---- Collapsible JSON (#259) -----------------------------------------
          web/json-view.js builds this; nothing else styles it. Two colours and