@intentius/behold 0.17.0 → 0.18.0

package/web/app.js

@@ -8,7 +8,31 @@
 // floating control panel's chrome (panel.js — drag/snap/collapse/tabs, persisted
 // position), and the theme picker into the panel's View-tab slot (a stable element
 // renderPanelView never rewrites, so the select mounts once and survives re-renders).
-import { initTheme, mountThemePicker, readableOn, colorForCategory, onThemeChange, getTokens } from "./theme.js";
+import { initTheme, mountThemePicker, readableOn, colorForCategory, onThemeChange, getTokens, getTheme, pinTokensFor } from "./theme.js";
+// #399 M2 / #401 M4 of #397: the colour-by modes' arithmetic and the
+// provenance badge's wording — every decision the behaviour overlay makes,
+// pure and unit-tested beside the file. This module owns the fetches, the SVG
+// and the panels; nothing below states a figure of its own.
+import {
+  COLOUR_MODES,
+  badgeFor,
+  blockOf,
+  countFigures,
+  countsText,
+  domainFor,
+  effectiveMode,
+  figureOf,
+  fillFor,
+  fmtCost,
+  fmtHeadroom,
+  headroomOf,
+  modeAvailability,
+  rampFor,
+  rampGradient,
+  scaleEnds,
+  totalsFor,
+  totalsText,
+} from "./behaviour-scale.js";
 import { addPanelTab, initPanel, setPanelTab, togglePanelCollapsed, isPanelCollapsed } from "./panel.js";
 // #254: the carve walkthrough's stepper — everything it DECIDES is a pure
 // function in there; this file owns the fetches, the graph selection, and the
@@ -56,6 +80,7 @@ import { hasOperator, renderOperator, APPROVED_SEMANTICS } from "./operator.js";
 // which commit, approved by whom — and, when the ledger's run id cannot be
 // followed, the reason in words rather than a guessed link.
 import { releaseRows } from "./release.js";
+import { comparisonRow, comparisonSummary } from "./cross-env.js";
 initTheme();
 initPanel();
 mountThemePicker(document.getElementById("panel-theme"));
@@ -65,16 +90,115 @@ mountThemePicker(document.getElementById("panel-theme"));
 // labels/icons get readable ink (black/white) on the category fill. Re-runs on theme switch,
 // since the categorical hues come from the active theme's palette.
 let lastGraphIr = null;
+
+// --- colour by drift, cost or headroom (#399, M2 of #397) -------------------
+//
+// The mode is CLIENT-SIDE state, deliberately. It changes no fetch: the server
+// hands the same overlay whichever mode is picked — `attrs._behaviour` rides
+// every priced card already (src/behaviour.ts explains why the block stays on
+// the node), so a mode switch is a repaint of the SVG that is already on
+// screen, with no round trip and nothing for a slow chant read to hold up. It
+// is therefore NOT in `LENS_PARAMS`/`canonicalKey`: a lens param there means "a
+// different snapshot comes back", and adding one would give a static export
+// three identical bundles of the same graph under three keys.
+//
+// It survives a reload the way the theme does, and for the same reason — the
+// colour you left the graph in is part of how you read it.
+const COLOUR_STORE_KEY = "behold.colourBy";
+let colourMode = "drift";
+try {
+  const saved = localStorage.getItem(COLOUR_STORE_KEY);
+  if (COLOUR_MODES.includes(saved)) colourMode = saved;
+} catch {
+  /* private mode */
+}
+
+const COLOUR_MODE_TITLE = {
+  drift: "Colour each card by what chant observed live — the overlay behold has always drawn",
+  cost: "Colour each card by the engine's cost per hour, low to high across this estate. An entity nothing priced draws neutral, never the cheap end.",
+  headroom: "Colour each card by how far it is from saturation — the LOWER of the axes the engine reported. An entity nothing priced draws neutral.",
+};
+
+/** `meta.behaviour` off the last render, or null. */
+function behaviourMeta() {
+  return (lastMeta && lastMeta.behaviour) || null;
+}
+
+/** The mode actually painted: the pick, unless this graph cannot serve it (no
+ * overlay, a refusal, an absence), in which case drift — which never depended
+ * on an engine. The PICK is kept either way, so switching back to a live env
+ * lands where you left off. */
+function activeColourMode() {
+  return effectiveMode(colourMode, lastMeta);
+}
+
+function setColourMode(mode) {
+  colourMode = mode;
+  try {
+    localStorage.setItem(COLOUR_STORE_KEY, mode);
+  } catch {
+    /* private mode */
+  }
+  // No load(): the mode changes nothing the server would answer differently,
+  // so the SVG already on screen is repainted in place. renderStatusbar() is
+  // the one entry point that redraws the strip AND all three panel tabs, which
+  // is exactly the surface a mode switch moves.
+  recolorNodesByCategory();
+  renderStatusbar();
+}
+
+/**
+ * What each card is painted, in the active mode.
+ *
+ * Drift keeps the categorical hue #62 gives a card (the drift state stays on
+ * the bar and the stroke, where pinhole puts it). The two behaviour modes
+ * replace the FILL with the mode's scale, so the drift bar underneath is
+ * untouched and both facts stay on the card at once.
+ *
+ * The scale's domain is taken over every entity in the graph that carries a
+ * figure — the same single walk of `ir.nodes` M1's design note promised, with
+ * no join against a second index.
+ */
+function colourPlan(graphIr) {
+  const mode = activeColourMode();
+  const tokens = getTokens();
+  const kindOf = new Map(graphIr.nodes.map((n) => [n.id, n.kind || n.lexicon || "node"]));
+  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
+  // entity nothing priced.
+  const neutralFill = theme ? pinTokensFor(theme).neutralFill : tokens.neutral;
+  const ramp = rampFor(mode, tokens);
+  const domain = domainFor(
+    mode,
+    graphIr.nodes.map((n) => figureOf(mode, blockOf(n))),
+  );
+  const figures = new Map(graphIr.nodes.map((n) => [n.id, figureOf(mode, blockOf(n))]));
+  return { mode, domain, ramp, fillOf: (id) => fillFor(figures.get(id), domain, ramp, neutralFill) };
+}
+
 function recolorNodesByCategory(ir) {
   if (ir) lastGraphIr = ir;
   const graphIr = ir || lastGraphIr;
   const svg = document.querySelector("#graph svg");
   if (!svg || !graphIr) return;
   const kindOf = new Map(graphIr.nodes.map((n) => [n.id, n.kind || n.lexicon || "node"]));
+  const plan = colourPlan(graphIr);
   for (const g of svg.querySelectorAll("[data-node-id]")) {
-    const kind = kindOf.get(g.getAttribute("data-node-id"));
+    const id = g.getAttribute("data-node-id");
+    const kind = kindOf.get(id);
     if (!kind) continue;
-    const cat = colorForCategory(kind), ink = readableOn(cat);
+    const paint = plan.fillOf(id);
+    const cat = paint.fill, ink = readableOn(cat);
+    // #399: an unpriced card is marked, not merely coloured — a hex cannot be
+    // read back out into "the engine did not price this", and the legend's
+    // unpriced count has to agree with what is on the canvas.
+    if (plan.mode !== "drift" && paint.unpriced) g.setAttribute("data-unpriced", "1");
+    else g.removeAttribute("data-unpriced");
     // Classify each element ONCE by the pinhole token it rode on (data-cat role), then apply
     // the role's colour on every pass. This is what makes it recolour on theme switch: after
     // the first pass the fill is a hex (not a --pin-* var), so we must key off the marker, not
@@ -158,7 +282,7 @@ if (staticMode) {
 
 /** Canonical key for a read URL — path + the lens params (whitelisted, sorted)
  * that select a distinct snapshot. MUST match src/export.ts `canonicalKey`. */
-const LENS_PARAMS = ["components", "detail", "env", "logical", "ops", "radial", "runtime", "tier"];
+const LENS_PARAMS = ["collapse", "components", "detail", "env", "logical", "ops", "radial", "runtime", "tier"];
 function canonicalKey(path, params) {
   // Components + logical + ops views ignore detail/radial — drop them so they
   // match the single captured snapshot (MUST match src/export.ts).
@@ -187,6 +311,32 @@ function apiFetch(url) {
 // reaches a declared entity — expected runtime (a Pod its Deployment
 // created), never foreign and never drift. Additive the same way.
 const STATUS_LABEL = { good: "managed", warn: "foreign", accent: "pending", neutral: "unobserved", runtime: "runtime child" };
+// #393 item 8: the same four colours, in the words of whatever the estate's
+// members ARE. The server derives the set from the member kinds and puts it on
+// the overlay meta (`vocabulary`, src/status-vocabulary.ts) — on a choudoufu
+// estate the legend reads bound / unowned / pending / not observed, which is
+// what choudoufu itself calls those states. A mixed estate keeps chant's words
+// and carries a `note` the legend shows as its tooltip. No meta, or a meta from
+// a behold that predates this: chant's words, exactly as before.
+function statusLabels() {
+  const v = lastMeta && lastMeta.vocabulary;
+  return (v && v.labels) || STATUS_LABEL;
+}
+function statusLabel(status) {
+  return statusLabels()[status];
+}
+function vocabularyNote() {
+  const v = lastMeta && lastMeta.vocabulary;
+  return (v && v.note) || "";
+}
+// #404: whether a plan was read for this overlay, and how many cards it would
+// change. `{read: false}` and `{read: true, drifted: 0}` are DIFFERENT answers
+// — "nobody looked" versus "looked, nothing drifted" — and the legend must not
+// print a count for the first one. Null from a behold that predates this, and
+// every reader below treats null as "not read".
+function driftMeta() {
+  return (lastMeta && lastMeta.drift) || null;
+}
 // M1.1 (#57), palette hardened M2 (#54): the component-DAG live-status join
 // paints the same `_status` vocabulary (good/warn/accent/neutral) but with
 // different meaning — a stack-health reading, not "managed" — so the inspect
@@ -384,6 +534,37 @@ function renderDriftSection(section, r) {
   pr("rendered", `${p.renderedAt} · helm ${p.helmVersion} · chant ${p.chantVersion}`);
 }
 
+const RESILIENCE_WORD = { survives: "survives", degrades: "degrades", fails: "fails" };
+
+/**
+ * The `behaviour` inspect section (#401, M4 of #397) — one entity's whole
+ * block, as rows, with the provenance badge beside every figure.
+ *
+ * Every row here is the engine's claim, echoed. The currency is the engine's
+ * (behold converts none), the traffic level is the string the engine named
+ * (there is no default one), a headroom axis the engine did not report is
+ * simply not a row, and `rightSize` appears only when the engine suggested
+ * something. The badge on each figure says who stated it, to what tolerance,
+ * and whether it was modeled from list prices or validated against a bill.
+ */
+function renderBehaviourSection(section, b) {
+  if (!b) return;
+  const meta = behaviourMeta();
+  const one = [b];
+  const add = section("behaviour");
+  add("at", b.at.traffic);
+  add("cost", figureWithBadge(fmtCost(b.cost.perHour, b.cost.currency), one, meta));
+  const axes = [];
+  if (typeof b.headroom.cpu === "number") axes.push(`cpu ${fmtHeadroom(b.headroom.cpu)}`);
+  if (typeof b.headroom.latency === "number") axes.push(`latency ${fmtHeadroom(b.headroom.latency)}`);
+  const worst = headroomOf(b);
+  add("headroom", figureWithBadge(`${axes.join(" · ")} — colours on ${fmtHeadroom(worst)}`, one, meta));
+  add("error rate", figureWithBadge(`${(b.errorRate * 100).toFixed(2)}% of requests at ${b.at.traffic}`, one, meta));
+  add("resilience", figureWithBadge(`${RESILIENCE_WORD[b.resilience.verdict] || b.resilience.verdict} — ${b.resilience.failure}`, one, meta));
+  if (b.resilience.note) add("resilience note", b.resilience.note);
+  if (b.rightSize) add("right-size", figureWithBadge(b.rightSize.suggestion + (b.rightSize.reason ? ` — ${b.rightSize.reason}` : ""), one, meta));
+}
+
 function inspect(node) {
   const panel = document.getElementById("inspect-body");
   panel.innerHTML = "<h2>inspect</h2>";
@@ -431,7 +612,7 @@ function inspect(node) {
       "status",
       driftLabel ||
         (node.lexicon === "op" ? opStatusLabel(node) : undefined) ||
-        (isArtifact ? ARTIFACT_STATUS_LABEL[st] : liveStatus || tickStatus ? COMPONENT_STATUS_LABEL[st] : STATUS_LABEL[st]) ||
+        (isArtifact ? ARTIFACT_STATUS_LABEL[st] : liveStatus || tickStatus ? COMPONENT_STATUS_LABEL[st] : statusLabel(st)) ||
         st,
     );
   if (node.attrs && node.attrs._artifact) {
@@ -508,6 +689,13 @@ function inspect(node) {
     });
   }
 
+  // #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
+  // statement about this entity is legible — and where a figure without its
+  // provenance would be visible as the contract violation it is.
+  renderBehaviourSection(section, blockOf(node));
+
   // Render diff (#146's deferred half): what `chant helm diff <digest> <env>
   // --live --json` said about this chart's PINNED render. Never rely on the
   // colour alone (#57's accessibility note) — and here that matters twice
@@ -638,7 +826,19 @@ function inspect(node) {
   const attrKeys = Object.keys(node.attrs || {}).filter((k) => !k.startsWith("_") && !(k === "release" && release));
   if (attrKeys.length) {
     const decl = section("declared");
-    for (const k of attrKeys) decl(k, fmtValue(node.attrs[k]));
+    // #393 item 10: an UNOWNED choudoufu card leads with the write that adopts
+    // the object — the two marker tags choudoufu named (`adopt_tofu_estate` /
+    // `adopt_tofu_address`), or its own one-line command if a release ever
+    // sends one. behold composes neither (src/choudoufu-live.ts); this puts
+    // the line first and makes it copyable, the way the moves panel already
+    // does for a `live-mv` line. The paragraph explaining the omission — which
+    // used to be the whole section, with the tags under it as JSON — follows.
+    const adoptable = node.lexicon === "choudoufu" && typeof node.attrs.adopt === "string" ? "adopt" : null;
+    if (adoptable) copyableRow(decl, adoptable, node.attrs.adopt, "Copy the tags that adopt this object");
+    for (const k of attrKeys) {
+      if (k === adoptable) continue;
+      decl(k, fmtValue(node.attrs[k]));
+    }
   }
 
   // CI projection facet (M1.2, #56/#58): loomster's GitLab CI is the SAME
@@ -738,6 +938,13 @@ function inspect(node) {
 // node is instant (no per-node query). Via apiFetch, so a static export replays
 // the captured snapshot. Cache is per env; cleared on lens change / after an op.
 let bulkDiffCache = null; // { env, nodes: { <id>: { observed, diff, health } } }
+// #404: ONE-SHOT. Set by the "Re-check live with plan" palette row and cleared
+// by the request that carries it, so `plan=1` is exactly as opt-in as the
+// person's keystroke — an ordinary load, a lens change or a reconnect never
+// spawns a plan. The server still serves the change set that read produced
+// from its own cache on the loads that follow, so the drift stays on screen
+// without anyone paying for a second full pass over the account.
+let planDriftOnce = false;
 async function loadNodeDiff(id) {
   if (!bulkDiffCache || bulkDiffCache.env !== view.env) {
     bulkDiffCache = null;
@@ -802,11 +1009,15 @@ function renderObserved(panel, o, health, healthDetail) {
     // sends the raw condition object gets the tree instead of `[object Object]`.
     for (const c of conditions) add("condition", valueCell(c), "var(--degraded)");
   }
+  // #393 item 10: the adoption line is a line to run, here as in the declared
+  // section — first, and with the same copy button.
+  if (typeof o.attributes?.adopt === "string") copyableRow(add, "adopt", o.attributes.adopt, "Copy the tags that adopt this object");
   // #259: an observed attribute is whatever the substrate reported — a k8s
   // `spec`, a nested `loadBalancer`, an array of ports. All of it collapsible
   // now, instead of one flat JSON.stringify line per key.
   for (const [k, v] of Object.entries(o.attributes || {})) {
     if (k === "conditions") continue; // rendered above, one line each
+    if (k === "adopt" && typeof v === "string") continue; // led with, above
     add(k, valueCell(v));
   }
   panel.appendChild(dl);
@@ -814,6 +1025,11 @@ function renderObserved(panel, o, health, healthDetail) {
 
 const DIFF_LABEL = {
   drifted: "drifted since snapshot",
+  // #404: a choudoufu member has no snapshot to drift FROM — the category is
+  // what a plan says it would do to the live object right now, so it does not
+  // borrow chant's "since snapshot" wording. The rows underneath are the same
+  // `{path, oldValue, newValue}` triples, printed `before → after`.
+  planned: "the plan would change this",
   missing: "declared, not in cloud",
   orphan: "in cloud, not declared",
   disappeared: "gone since snapshot",
@@ -987,7 +1203,7 @@ function wire(ir) {
 // null on a project that declares no `stacks[]` at all — the picker (and the
 // status strip's stack tag) then never renders. Every fetch reads this, so
 // the `changed` SSE re-pull and a palette lens change go through the same path.
-const view = { env: null, detail: 2, components: true, logical: false, runtime: false, ops: false, tier: null, target: null, stack: null, radial: false };
+const view = { env: 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
@@ -997,6 +1213,20 @@ const view = { env: null, detail: 2, components: true, logical: false, runtime:
 // or ⌘K) still shows the honest empty view + the server's note.
 let autoZoomFallback = true;
 
+// #393 item 1: for an estate whose members are NONE of them chant projects, the
+// fallback above is a round-trip too late and one degree too vague. The
+// components zoom is a chant projection of a chant project's own component DAG;
+// a choudoufu estate or a bare Terraform directory has no components to
+// project, so the first screen was "the components lens doesn't apply to a
+// composed estate yet" — an apology, every time, before the person had picked
+// anything. The kinds come from /api/project (`memberKinds`, in composition
+// order), so the decision is made from what the server already knows rather
+// than from a zero-node answer. A chant member anywhere in the estate keeps
+// #182's behaviour exactly, and picking components later still shows the note.
+function bootZoom(memberKinds) {
+  return memberKinds && memberKinds.length && !memberKinds.includes("chant") ? "resources" : "components";
+}
+
 // 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.
@@ -1034,11 +1264,19 @@ const ZOOM_DETAIL = { composites: 1, resources: 2, attributes: 3, runtime: 3 };
 /** How many emitted Ops the served estate has (0 = the stop doesn't exist).
  * Seeded from /api/project in initPickers(). */
 let opsAvailable = 0;
-/** The zoom stops this project can actually offer — `runtime` needs an env,
- * `ops` needs emitted op.json files. Both the panel and ⌘K read this, so a stop
- * never appears in one surface and not the other. */
+/** #393 item 2: whether ANY served member could have owner-referenced children
+ * — /api/project's `runtimeCapable`, decided from the members' declared
+ * lexicons (src/server.ts's RUNTIME_LEXICONS). Before this the stop needed only
+ * an env, so every choudoufu estate (which declares `live`) offered a
+ * Kubernetes tier that could only ever answer "nothing below the declaration
+ * boundary". */
+let runtimeCapable = false;
+/** The zoom stops this project can actually offer — `runtime` needs an env AND
+ * a member whose substrate has an owner chain, `ops` needs emitted op.json
+ * files. Both the panel and ⌘K read this, so a stop never appears in one
+ * surface and not the other. */
 function availableZooms() {
-  return ZOOM_OPTS.filter(([, z]) => (z === "runtime" ? Boolean(view.env) : z === "ops" ? opsAvailable > 0 : true));
+  return ZOOM_OPTS.filter(([, z]) => (z === "runtime" ? Boolean(view.env) && runtimeCapable : z === "ops" ? opsAvailable > 0 : true));
 }
 /** Current zoom value from (components, logical, ops, detail). */
 function zoomValue() {
@@ -1109,6 +1347,28 @@ function renderPanelView() {
       }),
     );
   }
+  // #399: the three-state colour switch, beside the zoom — the other thing
+  // this tab is for is "what am I looking at", and colour is half that answer.
+  // Sits below the stops because it is not a granularity: every zoom paints in
+  // whichever of the three you picked.
+  zoom.appendChild(panelHeading("colour by"));
+  for (const mode of COLOUR_MODES) {
+    const gate = mode === "drift" ? { available: true, reason: "" } : modeAvailability(lastMeta, mode);
+    const b = panelOpt(
+      mode,
+      mode === activeColourMode(),
+      () => {
+        if (!gate.available) return;
+        setColourMode(mode);
+      },
+      gate.available ? COLOUR_MODE_TITLE[mode] : gate.reason,
+    );
+    // #401: disabled VISIBLY, with the lexicon's own reason on it. A control
+    // greyed out is where a person asks "why not", so that is where the answer
+    // goes — never hidden, which would leave the question unasked.
+    if (!gate.available) b.disabled = true;
+    zoom.appendChild(b);
+  }
   // Radial toggle — entity zooms only, same gate the ⌘K entry has
   // (components/logical/ops all lay themselves out: waves / nested arch boxes /
   // phase boxes).
@@ -1270,6 +1530,154 @@ function renderCarveState(host, state) {
   host.appendChild(panelMuted(state.apply.note));
 }
 
+/**
+ * One inspect row whose value is a line to run: the line itself, monospaced,
+ * and a copy button beside it — the affordance the moves panel already gives a
+ * `live-mv` line (#371), reused here for the tags that adopt an unowned object
+ * (#393 item 10). `add` is a section's own row adder, so the row sits in the
+ * section it belongs to rather than in a box of its own.
+ */
+function copyableRow(add, key, text, title) {
+  const wrap = document.createElement("span");
+  wrap.style.cssText = "display:flex;gap:6px;align-items:baseline;min-width:0";
+  const line = document.createElement("code");
+  line.className = "grow";
+  line.style.cssText = "flex:1;min-width:0;overflow-wrap:anywhere";
+  line.textContent = text;
+  const copy = actButton("copy", () => copyToClipboard(text, copy), title);
+  wrap.append(line, copy);
+  add(key, wrap);
+}
+
+/** Copy `text` to the clipboard and say so on the button for a moment. */
+function copyToClipboard(text, el) {
+  const done = () => {
+    const was = el.textContent;
+    el.textContent = "copied ✓";
+    setTimeout(() => {
+      el.textContent = was;
+    }, 1200);
+  };
+  if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(text).then(done, done);
+  else done();
+}
+
+/**
+ * The choudoufu move plan (#371), as the scope panel shows it: one row per
+ * move (`address: from → to`), the line a person runs in the destination
+ * estate's directory with a copy button, and a link to the morph page. The
+ * plan is read from `/api/choudoufu/moves`, which previews with choudoufu's
+ * own `-dry-run` when asked and never runs the write — `apply.note` carries
+ * that sentence here verbatim. A no-op when no served member carries a
+ * `carve.json`.
+ */
+function renderChoudoufuMoves(host, info) {
+  if (!info || !info.plans || !info.plans.length || staticMode) return;
+  host.appendChild(panelHeading("moves (choudoufu)"));
+  for (const plan of info.plans) {
+    const head = document.createElement("div");
+    head.className = "count-row";
+    const label = document.createElement("span");
+    label.className = "grow";
+    label.textContent = plan;
+    const morph = document.createElement("a");
+    morph.className = "tag";
+    morph.textContent = "morph ↗";
+    morph.href = "/choudoufu/morph?plan=" + encodeURIComponent(plan);
+    morph.target = "_blank";
+    morph.title = "Every member a box, the moved cards gliding to their destination";
+    head.append(label, morph);
+    host.appendChild(head);
+    const rows = document.createElement("div");
+    host.appendChild(rows);
+    apiFetch("/api/choudoufu/moves?plan=" + encodeURIComponent(plan))
+      .then((r) => r.json())
+      .then((body) => {
+        if (!body || !Array.isArray(body.moves)) {
+          rows.appendChild(panelMuted((body && body.error) || "plan unreadable"));
+          return;
+        }
+        for (const m of body.moves) {
+          const row = document.createElement("div");
+          row.className = "count-row";
+          const name = document.createElement("span");
+          name.className = "grow";
+          name.textContent = m.address + (m.newAddress ? " → " + m.newAddress : "");
+          name.title = "run in " + m.runIn;
+          const tag = document.createElement("span");
+          tag.className = "tag";
+          tag.textContent = m.from + " → " + m.to;
+          const copy = actButton("copy", () => copyToClipboard(m.command, copy), "Copy the live-mv line to the clipboard");
+          row.append(name, tag, copy);
+          rows.appendChild(row);
+          rows.appendChild(panelMuted(m.command));
+        }
+        if (body.apply && body.apply.note) rows.appendChild(panelMuted(body.apply.note));
+      })
+      .catch(() => rows.appendChild(panelMuted("plan unreadable — is the behold server still running?")));
+  }
+}
+
+/**
+ * The totals, per box and per estate, in the active mode (#399).
+ *
+ * Sits in the Scope tab because Scope is already the tab that says what this
+ * estate IS — its members, its moves, its environments — and a per-box figure
+ * is a fact about a member, not about the picture.
+ *
+ * In `drift` mode there is no row at all. Drift counts states; a sum of states
+ * is not a thing, and the Model tab's legend already carries the counts.
+ *
+ * Where the figure comes from is on the row, every time. `cost` quotes the
+ * server: `meta.behaviour.boxes[<key>]` per box and `.sum` for the estate, both
+ * additions of engine figures — or `meta.behaviour.total`, the engine's own
+ * estate figure, which outranks the sum and is labelled "engine total" so the
+ * two can never be confused. `headroom` has no server-side aggregate, because
+ * no engine states one and adding fractions of capacity would mean nothing, so
+ * the SPA takes the worst and middle card of the scope itself and the row says
+ * "computed".
+ */
+function renderBehaviourTotals(host) {
+  const mode = activeColourMode();
+  if (mode === "drift") return;
+  const b = behaviourMeta();
+  const ir = lastGraphIr;
+  if (!b || !ir) return;
+  const byId = new Map(ir.nodes.map((n) => [n.id, n]));
+  const boxes = (ir.groups && ir.groups.byStack) || {};
+  host.appendChild(panelHeading(`${mode} totals`));
+
+  const row = (label, blocks, sum, engineTotal, title) => {
+    const totals = totalsFor(mode, blocks, sum, engineTotal);
+    if (!totals) return;
+    // Stacked, not a name/value row: the panel is 260px and one of these
+    // lines is "0.5669 USD/h · 41 priced · 4 unpriced" — side by side, the
+    // figure takes the width and the box's name ellipses away to nothing,
+    // which is the one part of the row that says WHAT is being totalled.
+    const r = document.createElement("div");
+    r.className = "behaviour-total";
+    const name = document.createElement("div");
+    name.className = "grow";
+    name.style.fontWeight = "600";
+    name.textContent = label;
+    if (title) name.title = title;
+    r.appendChild(name);
+    r.appendChild(figureWithBadge(totalsText(totals), blocks.filter(Boolean), b));
+    host.appendChild(r);
+  };
+
+  for (const [key, ids] of Object.entries(boxes).sort(([a], [c]) => a.localeCompare(c))) {
+    const blocks = ids.map((id) => blockOf(byId.get(id)));
+    row(key, blocks, (b.boxes || {})[key], undefined, `${ids.length} entities in this box`);
+  }
+  const all = ir.nodes.map((n) => blockOf(n));
+  // `total` is the engine's word and only ever holds an engine's own figure;
+  // `sum` is behold's addition. Passing both lets totalsFor apply #398's
+  // precedence in one place rather than at each call site.
+  row(b.total ? "estate · engine total" : "estate", all, b.sum, b.total, b.total ? "the engine stated this estate total itself; behold added nothing" : "behold's sum over the engine's per-entity figures");
+  if (mode === "headroom") host.appendChild(panelMuted("min and median computed by behold over the engine's per-entity figures — no engine states a headroom aggregate."));
+}
+
 function renderPanelScope() {
   const host = document.getElementById("tab-scope");
   if (!host) return;
@@ -1301,6 +1709,13 @@ function renderPanelScope() {
   // one — and it renders identically in carve mode and on an ordinary project
   // serve, because /api/project publishes one shape for both.
   renderCarveState(host, info.carve && info.carve.state);
+  // #399: what the estate costs, or how much room it has left, per member box
+  // and for the whole estate — right under the member list the figures are
+  // about, and above the moves that would change them.
+  renderBehaviourTotals(host);
+  // #371: a choudoufu member's move plan — the handoff lines with copy
+  // buttons, and the morph page. Read-only: behold never runs live-mv.
+  renderChoudoufuMoves(host, info.choudoufu);
   // #195: switching — recents first (server-persisted, validated), then a
   // free path input. Locked in preview mode (the demo's contract) and
   // meaningless in a static export.
@@ -1362,6 +1777,57 @@ function renderPanelScope() {
     );
   }
   if (!environments.length) host.appendChild(panelMuted("no environments declared"));
+
+  // #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.compareTo === view.env) view.compareTo = null; // env re-picked onto the compared one
+    host.appendChild(panelHeading("compare releases"));
+    const sel = document.createElement("select");
+    sel.add(new Option("(off)", "", view.compareTo == null, view.compareTo == null));
+    for (const e of environments) {
+      if (e === view.env) continue;
+      sel.add(new Option(`vs ${e}`, e, false, view.compareTo === e));
+    }
+    sel.title = "Compare this environment's recorded releases with another's — per component, on the comparable identity (inputs for pinned deploys)";
+    const result = document.createElement("div");
+    const render = (payload) => {
+      result.replaceChildren();
+      const s = comparisonSummary(payload);
+      const line = document.createElement("div");
+      line.style.cssText = `font-size:var(--t-caption);color:${COMPONENT_STATUS_VAR[s.tone === "warn" ? "warn" : s.tone === "good" ? "good" : "neutral"]};margin:4px 0`;
+      line.textContent = s.text;
+      result.appendChild(line);
+      for (const c of payload.comparisons || []) {
+        const r = comparisonRow(c);
+        const row = panelDotRow(COMPONENT_STATUS_VAR[r.tone === "warn" ? "warn" : r.tone === "good" ? "good" : "neutral"], r.component, r.verdict, () => selectNode(r.component));
+        row.title = r.detail;
+        result.appendChild(row);
+      }
+    };
+    sel.addEventListener("change", () => {
+      view.compareTo = sel.value || null;
+      result.replaceChildren();
+      if (!view.compareTo) return;
+      result.appendChild(panelMuted("comparing…"));
+      fetch(`/api/components/compare?env=${encodeURIComponent(view.env)}&to=${encodeURIComponent(view.compareTo)}`)
+        .then((r) => r.json())
+        .then((payload) => {
+          if (view.compareTo !== sel.value) return; // re-picked while loading
+          if (payload.error) {
+            result.replaceChildren(panelMuted(payload.error));
+            return;
+          }
+          render(payload);
+        })
+        .catch((err) => result.replaceChildren(panelMuted(`compare failed: ${err && err.message ? err.message : err}`)));
+    });
+    host.appendChild(sel);
+    host.appendChild(result);
+    // Restore an active comparison across panel re-renders.
+    if (view.compareTo) sel.dispatchEvent(new Event("change"));
+  }
   if (stacks.length) {
     host.appendChild(panelHeading("stack"));
     for (const s of stacks) {
@@ -1410,6 +1876,103 @@ function renderPanelScope() {
 const DRIFT_STATUS_VAR = { good: "var(--managed)", warn: "var(--foreign)", accent: "var(--pending)", neutral: "var(--muted)", runtime: "var(--runtime)" };
 const COMPONENT_STATUS_VAR = { good: "var(--managed)", accent: "var(--pending)", warn: "var(--degraded)", neutral: "var(--muted)" };
 
+/**
+ * The provenance badge (#401, M4 of #397) — `{engine} {version} · {tolerance}
+ * · {basis}`, beside a figure rather than once per page.
+ *
+ * #397's one prohibition is a prediction presented as a bill, and this element
+ * is where that is prevented: the word `modeled` is on the badge and the
+ * sentence "modeled, not billed" is on its hover, on every figure that carries
+ * one. `blocks` is the entities the figure was derived from — one for an
+ * inspect row, a whole box or estate for a totals row — because #398 puts
+ * provenance on the ENTITY, so a badge over a set can only say what the set
+ * agrees on (badgeFor says `mixed` where it does not).
+ */
+function badgeEl(blocks, meta) {
+  const b = badgeFor(blocks, meta);
+  if (!b) return null;
+  const el = document.createElement("span");
+  el.className = "tag behaviour-badge";
+  el.textContent = b.text;
+  el.title = b.title;
+  return el;
+}
+
+/** A figure and its badge on one line — the shape every behaviour figure the
+ * SPA shows takes, so none of them can end up without one. */
+function figureWithBadge(text, blocks, meta) {
+  const wrap = document.createElement("span");
+  wrap.style.cssText = "display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;min-width:0";
+  const val = document.createElement("span");
+  val.textContent = text;
+  wrap.appendChild(val);
+  const badge = badgeEl(blocks, meta);
+  if (badge) wrap.appendChild(badge);
+  return wrap;
+}
+
+/**
+ * One mode's legend (#399: one legend per mode).
+ *
+ * `drift` is not here — it keeps #393's vocabulary legend, the estate's own
+ * words for the four states, which is the whole point of that issue. The two
+ * behaviour modes get a ramp with its two ends labelled, the priced/unpriced
+ * split, the neutral swatch that says what an unpriced card is drawn in, and
+ * the badge for the figures the ramp spans.
+ */
+function renderBehaviourLegend(host, mode) {
+  const b = behaviourMeta();
+  const ir = lastGraphIr;
+  if (!b || !ir) return;
+  const blocks = ir.nodes.map((n) => blockOf(n));
+  const values = ir.nodes.map((n) => figureOf(mode, blockOf(n)));
+  const domain = domainFor(mode, values);
+  const tokens = getTokens();
+  const ramp = rampFor(mode, tokens);
+  const currency = (blocks.find((x) => x && x.cost) || { cost: {} }).cost.currency || "";
+  const heading = panelHeading(`${mode} · ${lastMeta.env}`);
+  heading.title = COLOUR_MODE_TITLE[mode];
+  host.appendChild(heading);
+
+  const bar = document.createElement("div");
+  bar.className = "behaviour-ramp";
+  bar.style.cssText = `height:10px;border-radius:5px;border:1px solid var(--line);background:${rampGradient(ramp)}`;
+  host.appendChild(bar);
+  const ends = scaleEnds(mode, domain, currency);
+  if (ends) {
+    const row = document.createElement("div");
+    row.className = "count-row";
+    const lo = document.createElement("span");
+    lo.className = "grow";
+    lo.textContent = ends.low;
+    const hi = document.createElement("span");
+    hi.className = "tag";
+    hi.textContent = ends.high;
+    row.append(lo, hi);
+    host.appendChild(row);
+  }
+
+  const counts = countFigures(mode, blocks);
+  const priced = blocks.filter((x) => x && figureOf(mode, x) !== undefined);
+  const line = document.createElement("div");
+  line.className = "count-row";
+  const txt = document.createElement("span");
+  txt.className = "grow";
+  txt.textContent = countsText(counts);
+  line.appendChild(txt);
+  const badge = badgeEl(priced, b);
+  if (badge) line.appendChild(badge);
+  host.appendChild(line);
+
+  // The neutral, spelled out. Without this row the grey cards read as a third
+  // band of the scale rather than as "nothing priced these".
+  const theme = getTheme();
+  host.appendChild(
+    panelDotRow(theme ? pinTokensFor(theme).neutralFill : "var(--muted)", "unpriced — no behaviour block", String(counts.unpriced)),
+  );
+  if (mode === "headroom") host.appendChild(panelMuted("the lower of the axes the engine reported; a missing axis is absent, not zero"));
+}
+
 function panelDotRow(color, main, tag, onClick) {
   const row = document.createElement("div");
   row.className = onClick ? "node-row" : "count-row";
@@ -1454,6 +2017,15 @@ function renderPanelModel() {
     host.appendChild(panelMuted("no graph loaded yet"));
     return;
   }
+  // #393 item 7: the note in full, where there is room for it. The strip may be
+  // showing the server's short form (a 260px strip cannot hold five root names,
+  // two skip reasons and five block counts), so the whole sentence has to be
+  // readable somewhere that is not a tooltip — and this tab is where the panel
+  // already explains the picture.
+  if (lastNote && lastNoteShort) {
+    host.appendChild(panelHeading("note"));
+    host.appendChild(panelMuted(lastNote));
+  }
   const drift = m.mode === "overlay" || (m.mode === "logical" && !!m.env);
   const componentStatus = m.mode === "component-status";
   const count = (statuses) => {
@@ -1475,15 +2047,38 @@ function renderPanelModel() {
       const s = n.attrs && n.attrs._status;
       host.appendChild(panelDotRow(COMPONENT_STATUS_VAR[s] || "var(--muted)", n.id, APPLY_STATUS_TAG[s] || "", () => selectNode(n.id)));
     }
+  } else if (drift && activeColourMode() !== "drift") {
+    // #399: one legend per mode. The drift legend below is #393's vocabulary
+    // legend and stays exactly as it was — this branch is the two behaviour
+    // modes, whose legend is a scale rather than a set of states.
+    renderBehaviourLegend(host, activeColourMode());
   } else if (drift) {
-    host.appendChild(panelHeading(`drift · ${m.env}`));
-    const c = count(STATUS_LABEL);
-    for (const [k, label] of Object.entries(STATUS_LABEL)) {
+    // #393 item 8: the legend proper. The heading carries the mixed-estate
+    // sentence as its tooltip — the one case where the words on these rows are
+    // not the words the members would use for themselves.
+    const heading = panelHeading(`drift · ${m.env}`);
+    const why = vocabularyNote();
+    if (why) heading.title = why;
+    host.appendChild(heading);
+    const words = statusLabels();
+    const c = count(words);
+    for (const [k, label] of Object.entries(words)) {
       // The additive buckets (chant#1168 unobserved, chant#1180 runtime) stay
       // hidden until a chant actually emits them — same as the old legend.
       if ((k === "neutral" || k === "runtime") && !c[k]) continue;
       host.appendChild(panelDotRow(DRIFT_STATUS_VAR[k], label, String(c[k])));
     }
+    // #404: attribute drift, on its own row under the ownership counts —
+    // beside them, never mixed into them, because a drifted card is still
+    // bound and is already counted on the row above. The row appears only when
+    // a plan was actually read; where it was not, the legend says so in words
+    // and prints no number, because "0 drifted" would be a claim nobody made.
+    const dm = driftMeta();
+    if (dm && dm.read) {
+      host.appendChild(panelDotRow("var(--degraded)", "drifted (the plan would change it)", String(dm.drifted)));
+    } else if (dm) {
+      host.appendChild(panelMuted("attribute drift not read — the overlay is ownership only. ⌘K → “Re-check live with plan”."));
+    }
     // The actionable nodes — foreign (adoptable) and pending (not applied yet).
     const attention = ir.nodes.filter((n) => {
       const s = n.attrs && n.attrs._status;
@@ -1493,7 +2088,7 @@ function renderPanelModel() {
       host.appendChild(panelHeading("needs attention"));
       for (const n of attention.slice(0, 40)) {
         const s = n.attrs._status;
-        host.appendChild(panelDotRow(DRIFT_STATUS_VAR[s], n.id, STATUS_LABEL[s], () => selectNode(n.id)));
+        host.appendChild(panelDotRow(DRIFT_STATUS_VAR[s], n.id, statusLabel(s), () => selectNode(n.id)));
       }
       if (attention.length > 40) host.appendChild(panelMuted(`+ ${attention.length - 40} more — click nodes in the graph`));
     }
@@ -1505,6 +2100,45 @@ function renderPanelModel() {
       host.appendChild(actButton("→ Scope", () => setPanelTab("scope")));
     }
   }
+  renderBehaviourRefusal(host);
+  renderBehaviourDiagnostics(host);
+}
+
+/**
+ * The refusal, where the legend would be (#401).
+ *
+ * The words are the lexicon's, in its own house style — an env-var chain and
+ * the variable it wants — and behold prints them as they came. It does not
+ * paraphrase them, does not soften them, and above all does not substitute a
+ * number: "a missing or unreachable engine means no overlay and a refusal that
+ * names why, never a locally faked number" is #397's rule, and this is the one
+ * surface where a person finds out it fired.
+ *
+ * An ABSENCE prints nothing here. Nothing was configured, so nothing refused —
+ * and a panel that announced every estate with no behavioural engine would be
+ * shouting about a feature nobody asked for. The absent line is on the disabled
+ * modes' tooltips instead, where the question actually gets asked.
+ */
+function renderBehaviourRefusal(host) {
+  const b = behaviourMeta();
+  if (!b || !b.refusal) return;
+  host.appendChild(panelHeading("behaviour — refused"));
+  const reason = panelMuted(b.refusal.reason);
+  reason.style.color = "var(--degraded)";
+  host.appendChild(reason);
+  host.appendChild(panelMuted(b.refusal.remedy));
+  host.appendChild(panelMuted("the drift overlay above is unaffected — it never depended on an engine."));
+}
+
+/** M1's diagnostics (`meta.behaviour.diagnostics`): every block behold dropped
+ * and every thing it could not reconcile, under the legend where the figures
+ * they are about are. They were reaching the wire and nothing was reading
+ * them. */
+function renderBehaviourDiagnostics(host) {
+  const b = behaviourMeta();
+  if (!b || !b.diagnostics || !b.diagnostics.length) return;
+  host.appendChild(panelHeading(`behaviour diagnostics · ${b.diagnostics.length}`));
+  for (const d of b.diagnostics) host.appendChild(panelMuted(d));
 }
 
 // ---------------------------------------------------------------------------
@@ -1811,6 +2445,58 @@ function markOperatorCards(ir) {
   }
 }
 
+/**
+ * #404: the second signal on a bound choudoufu card — the plan would change an
+ * attribute on a resource the estate demonstrably owns.
+ *
+ * The ownership verdict keeps the card's FILL: bound is still green, and this
+ * only adds a stroke and a corner glyph, the same post-render stamp
+ * `markCarvedCards`/`markOperatorCards` use (pinhole's SVG arrives from the
+ * server as a string and is replaced on every render, so a mark has to be
+ * re-applied here rather than asked for at layout time).
+ *
+ * `~` is OpenTofu's own symbol for update-in-place, so the card and the
+ * terminal read the same. The corner is the bottom-right one the carve and
+ * operator marks also use — a choudoufu card is never carved (that is chant
+ * source) and never the operating loop's home (that is Kubernetes), so on the
+ * estates this can appear on the corner is free; the guard below still skips a
+ * card that already carries one of those, rather than drawing over it.
+ */
+function markDriftedCards(ir) {
+  const svg = document.querySelector("#graph svg");
+  if (!svg) return;
+  for (const n of ir.nodes || []) {
+    const mark = n.attrs && n.attrs._planDrift;
+    if (!mark || !mark.attributes || !mark.attributes.length) continue;
+    const g = svg.querySelector('[data-node-id="' + CSS.escape(n.id) + '"]');
+    if (!g || g.querySelector('[data-plan-drift="1"]')) continue;
+    if (g.querySelector('[data-carved="1"]') || g.querySelector('[data-operator="1"]')) continue;
+    g.classList.add("plan-drifted");
+    // Measured, not read off attributes — markCarvedCards()'s note applies
+    // here verbatim (pinhole sizes a card from its content).
+    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-plan-drift", "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", "var(--degraded)");
+    // A COUNT, not the attribute names: a name like `image_tag_mutability` is
+    // wider than the corner and runs into the card's own subtitle (seen in the
+    // browser). The count is bounded whatever the provider calls its fields,
+    // and the names are one hover — or one click, in the pane — away.
+    const count_ = mark.attributes.length;
+    tag.textContent = `~ ${count_} attribute${count_ === 1 ? "" : "s"}`;
+    const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+    title.textContent = `The plan would ${(mark.actions || ["update"]).join("+")} this: ${mark.attributes.join(", ")}. Ownership is unchanged — the card's colour is still its ownership verdict.`;
+    g.appendChild(title);
+    g.appendChild(tag);
+  }
+}
+
 function renderPanelCarve() {
   if (!carveMode()) return;
   if (!carveHost) {
@@ -1866,6 +2552,10 @@ function renderStatusbar() {
   // Pure state — the strip echoes the axes whose controls live on the floating
   // panel and in ⌘K, so the current view stays legible with the panel collapsed.
   const parts = [`zoom: ${zoomValue()}`, view.env ? `env: ${view.env}` : "env: (source)"];
+  // #399: which colour the graph is in is state, not a control, so it belongs
+  // on the strip the same way the zoom and the env do. Only when it is not
+  // drift — drift is what the strip has always implied.
+  if (activeColourMode() !== "drift") parts.push(`colour: ${activeColourMode()}`);
   if (view.stack) parts.push(`stack: ${view.stack}`);
   if (axes.tier) parts.push(`tier: ${axes.tier}`);
   if (view.radial && !view.components && !view.logical && !view.ops) parts.push("radial");
@@ -1878,7 +2568,15 @@ function renderStatusbar() {
   if (lastNote) {
     const note = document.createElement("span");
     note.className = "statusbar-note";
-    note.textContent = " — " + lastNote;
+    // #393 item 7: the strip is a strip. A Terraform estate's note names every
+    // root, every skipped directory with its reason, and every block class the
+    // zoom left out — ~60 words, in a 260px panel, at every zoom. The server
+    // sends the short form beside the long one (`meta.noteShort`) when it has
+    // one; the full text stays one hover away here and is printed in full on
+    // the panel's Model tab. Nothing is truncated client-side: the SPA does not
+    // write notes, and a note with no short form is already a line.
+    note.textContent = " — " + (lastNoteShort || lastNote);
+    if (lastNoteShort) note.title = lastNote;
     el.appendChild(note);
   }
 }
@@ -1887,6 +2585,9 @@ function renderStatusbar() {
 // or null. Set on every load so a level that stops degrading stops explaining
 // itself.
 let lastNote = null;
+// #393 item 7: the same note as the strip can hold (`meta.noteShort`), or null
+// when the long one already fits. Never derived here — see renderStatusbar().
+let lastNoteShort = null;
 
 // The `meta` of the last rendered graph — the panel's Model tab reads its
 // mode/env to pick the status vocabulary (drift vs component live status).
@@ -2560,6 +3261,7 @@ function render(ir, svg, m) {
   // #131: set before anything can early-return, so a level that stopped
   // degrading stops explaining itself on the very next render.
   lastNote = m.note || null;
+  lastNoteShort = m.noteShort || null;
   // The panel's Model tab reads both of these via renderStatusbar() →
   // renderPanel() below — set them first so it renders THIS graph, not the
   // previous one (recolorNodesByCategory also sets lastGraphIr; harmless).
@@ -2606,9 +3308,18 @@ function render(ir, svg, m) {
       const s = n.attrs && n.attrs._status;
       if (s in c) c[s]++;
     }
-    tail = ` · ${c.good} managed · ${c.warn} foreign · ${c.accent} pending`;
-    if (c.neutral) tail += ` · ${c.neutral} unobserved`;
+    // #393 item 8: the estate's own words for these four colours — chant's
+    // managed/foreign/pending/unobserved on a chant estate, choudoufu's
+    // bound/unowned/pending/not observed on one whose members are choudoufu.
+    const w = statusLabels();
+    tail = ` · ${c.good} ${w.good} · ${c.warn} ${w.warn} · ${c.accent} ${w.accent}`;
+    if (c.neutral) tail += ` · ${c.neutral} ${w.neutral}`;
     if (c.runtime) tail += ` · ${c.runtime} runtime`;
+    // #404: beside the ownership counts, never folded into them — a drifted
+    // card is bound and is already inside `c.good`. Silent when no plan was
+    // read, so the strip never implies the question was asked and answered.
+    const dm = driftMeta();
+    if (dm && dm.read) tail += ` · ${dm.drifted} drifted`;
     // Nothing observed live in this env — explain the all-blue rather than let it
     // read as a bug (#32).
     if (c.good === 0 && c.warn === 0 && c.accent > 0) tail += ` — nothing deployed in ${m.env} yet`;
@@ -2625,8 +3336,9 @@ function render(ir, svg, m) {
   // Multi-estate (#31): note the composed project count; the graph draws one box per project.
   // #186: the meta line lives in the panel's 272px footer now — the directory
   // basename reads better than an absolute path (full path in the tooltip).
+  // #393 item 4: one member is a project, not "1 projects".
   const scope = m.estate
-    ? `estate of ${m.estate} projects`
+    ? `estate of ${m.estate} project${m.estate === 1 ? "" : "s"}`
     : String(m.projectDir || "").replace(/\/+$/, "").split("/").pop() || m.projectDir;
   // The deploy axes (#59 unify, M2 #54 lenses) — tier/target, kept in sync with
   // what this response actually observed (falls back to the launch-time value
@@ -2675,6 +3387,7 @@ function render(ir, svg, m) {
   markCarvedCards(); // #254: the SVG is replaced per render — re-stamp the marker
   markPlayhead(ir); // #284 item 2: same, for the step the run is sitting on
   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
   applyLayout(); // #228: last, so the hand-placed deltas ride on top of every other pass
   renderDial();
 }
@@ -2788,6 +3501,45 @@ function fitGraph() {
     applyVB();
   }
 }
+
+// How much of the viewBox one card should take when ⌘K lands on it (#393): the
+// window is this many card-widths across, so a 301-card estate arrives readable
+// rather than at whatever zoom the last gesture left. Never wider than the fit,
+// which is the whole graph — there is nothing beyond it to show.
+const REVEAL_CARDS_ACROSS = 9;
+
+/**
+ * Pan (and zoom) the graph so one card sits in the middle of the pane (#393
+ * item 4). The same viewBox the wheel/drag handlers drive and "⤢ fit" resets —
+ * there was no programmatic pan before this, only the reset.
+ *
+ * The card's rectangle comes from the DOM rather than from the IR: pinhole
+ * paints a card as a `<g data-node-id>` whose first `<rect>` carries absolute
+ * viewBox coordinates (no transform on the estate view, unlike the radial one),
+ * and `getBBox()` covers whichever it is. Returns false when there is no such
+ * card on the canvas — a node the current zoom elided — so the caller can say
+ * so instead of panning to nowhere.
+ */
+function revealNode(id) {
+  const svg = currentSvg();
+  if (!svg || !vb || !vbInit) return false;
+  const g = svg.querySelector(`[data-node-id="${CSS.escape(id)}"]`);
+  if (!g) return false;
+  let box;
+  try {
+    box = g.getBBox();
+  } catch {
+    const r = g.querySelector("rect");
+    if (!r) return false;
+    box = { x: +r.getAttribute("x"), y: +r.getAttribute("y"), width: +r.getAttribute("width"), height: +r.getAttribute("height") };
+  }
+  if (!box.width || !box.height) return false;
+  const w = Math.min(vbInit[2], Math.max(box.width * REVEAL_CARDS_ACROSS, vbInit[2] / 60));
+  const h = w * (vbInit[3] / vbInit[2]);
+  vb = [box.x + box.width / 2 - w / 2, box.y + box.height / 2 - h / 2, w, h];
+  applyVB();
+  return true;
+}
 function ensureZoomControls(host) {
   let btn = document.getElementById("zoom-toggle");
   if (!btn || btn.parentElement !== host) {
@@ -3516,9 +4268,20 @@ async function load(opts = {}) {
       // never in your source — so it rides the overlay and means nothing
       // without an env.
       if (view.runtime) q.set("runtime", "1");
+      // #404: the attribute-drift read, when this load is the one the person
+      // asked for it on. Consumed here — the next load goes without it.
+      if (planDriftOnce) {
+        q.set("plan", "1");
+        planDriftOnce = false;
+      }
     }
     // Radial layout (entity view only) — curl the wide DAG onto concentric rings.
     if (view.radial && !view.components && !view.logical && !view.ops) q.set("radial", "1");
+    // Collapse large boxes (#393): a member box over the server's limit draws
+    // as one card carrying its counts. An estate-box lens — the component DAG
+    // and the ops view have no member boxes to shut — and it rides both the
+    // source graph and the overlay, so picking an env doesn't undo it.
+    if (view.collapse && !view.components && !view.ops) q.set("collapse", "1");
     // The CI + resources facets are component-DAG-mode-only details. Load
     // both whenever components mode is on, env picked or not — #59 unifies
     // the CI facet (#58), the live-status join (#57), and resources (#59) so
@@ -3574,6 +4337,35 @@ async function load(opts = {}) {
   }
 }
 
+/**
+ * #404: re-read the overlay AND ask for the attribute-drift plan.
+ *
+ * A second row rather than a flag on `refresh()` above, for two reasons.
+ *
+ * The costs are different in kind. The ownership read a refresh already makes
+ * (`live-ls` + `live-plan`) is answered out of the account's tagging index —
+ * a handful of calls whatever the estate's size. `plan` refreshes every
+ * resource, which is one provider read per card: on the workbench's
+ * terralith-4 that is 301 reads for one keypress. Putting them on one button
+ * would make the cheap, repeatable "did anything move?" silently cost the
+ * expensive question every time.
+ *
+ * And they are not even the same request. `refresh()` is `POST /api/refresh`,
+ * which re-observes the PRIMARY project and captures a lanes frame; it never
+ * composes the estate. A choudoufu member is served through the estate branch
+ * of `GET /api/overlay`, which is where the drift read lives — so this row
+ * goes through `load()`, the path that actually renders those cards.
+ */
+async function refreshWithPlan() {
+  planDriftOnce = true;
+  bulkDiffCache = null; // the pane's rows come from /api/diff — re-fetch them against the new plan
+  nowline("↻ planning — a full read of the account…");
+  await load();
+  const dm = driftMeta();
+  if (dm && dm.read) nowline(dm.drifted ? `↻ plan read — ${dm.drifted} drifted` : "↻ plan read — nothing drifted");
+  else nowline("↻ the plan could not be read — the overlay is ownership only");
+}
+
 // Refresh (#24): re-check live drift now and capture a lanes frame, in one
 // round-trip. Renders the returned graph directly (no second pull); the server's
 // `frames` event updates the lanes view.
@@ -3638,6 +4430,15 @@ async function initPickers() {
   // way it gates `tiers`/`stacks`), so an unbuilt project or a chant < 0.50
   // never grows a stop that would refuse.
   opsAvailable = info.ops || 0;
+  // #393: whether the runtime stop exists here, and where this estate can
+  // honestly open. Both are read before the first load() below, so a non-chant
+  // estate never paints the components apology on its way to a picture.
+  runtimeCapable = !!info.runtimeCapable;
+  const boot = bootZoom(info.memberKinds);
+  if (boot !== "components") {
+    applyZoom(boot);
+    autoZoomFallback = false;
+  }
   // #254: carve mode declares itself here. The Carve tab is mounted at runtime
   // (panel.js's addPanelTab), so nothing else grows a dead tab.
   carveInfo = info.carve || null;
@@ -4409,6 +5210,17 @@ function paletteCommands() {
 
   // Reads — always available, even in a static export or the preview lock.
   if (!staticMode) 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) {
+    c.push(
+      view.env
+        ? ["Re-check live with plan (attribute drift) — a full read of the account", () => refreshWithPlan()]
+        : ["Re-check live with plan (attribute drift) — pick an environment first", () => showToast("attribute drift is read from a plan, which needs an environment to plan against", false)],
+    );
+  }
   c.push(["Fit graph to view", () => fitGraph()]);
   c.push(["Export: current graph as SVG", () => exportSvg()]);
   const inspectCollapsed = document.getElementById("app").classList.contains("inspect-collapsed");
@@ -4439,12 +5251,39 @@ function paletteCommands() {
   for (const [label, v] of availableZooms()) {
     c.push([label + (v === zoomValue() ? " ✓" : ""), () => { applyZoom(v); load(); }]);
   }
+  // #399: the colour-by modes, with the same ✓ every other lens row carries.
+  // A disabled mode is LISTED with its reason rather than hidden — same rule
+  // #254's blocked carve steps follow, and the same reason: "why can't I do
+  // that" is a question the palette should be able to answer.
+  for (const mode of COLOUR_MODES) {
+    const gate = mode === "drift" ? { available: true, reason: "" } : modeAvailability(lastMeta, mode);
+    const why = gate.available ? "" : ` — ${gate.reason}`;
+    c.push([
+      `colour by: ${mode}${mode === activeColourMode() ? " ✓" : ""}${why}`,
+      () => {
+        if (!gate.available) return showToast(gate.reason, false);
+        setColourMode(mode);
+      },
+    ]);
+  }
   // Radial toggle — entity zooms only, same gate the removed checkbox had
   // (components/logical/ops all lay themselves out: waves / nested arch boxes /
   // phase boxes).
   if (!view.components && !view.logical && !view.ops) {
     c.push([(view.radial ? "Disable" : "Enable") + " radial layout", () => { view.radial = !view.radial; load(); }]);
   }
+  // #393: 301 cards in one box read as a strip at any zoom. This shuts every
+  // box over the server's limit down to a card carrying its own counts, so an
+  // estate can be read at the level of its members first.
+  //
+  // Not in a static export: `captureKeys` (src/export.ts) captures the estate
+  // once, expanded, and a bundle that offers a stop it has no snapshot behind
+  // answers the click with "not in this static export". `collapse` is in
+  // `canonicalKey`'s LENS_PARAMS all the same, so the day a bundle does carry
+  // both, the two keys are already distinct.
+  if (!staticMode && !view.components && !view.ops) {
+    c.push([view.collapse ? "Expand all" : "Collapse large boxes", () => { view.collapse = !view.collapse; load(); }]);
+  }
 
   // Env/stack/tier/target selection — replaces the old header pickers.
   c.push(["env: (source)" + (!view.env ? " ✓" : ""), () => { view.env = null; resetDialCaches(); load(); }]);
@@ -4511,9 +5350,73 @@ function paletteCommands() {
   return c.map(([label, run]) => ({ label, run }));
 }
 
+// --- ⌘K takes an address (#393 item 4) ---------------------------------------
+// The audit's finding was that the palette had zoom, env, panel and deploy
+// commands and nothing that took a node. The SPA already holds the IR it
+// painted (`lastGraphIr`), so the whole feature is a filter over it.
+//
+// Built per keystroke rather than baked into `paletteCommands()` on open: a
+// 301-card estate would otherwise put 301 rows in front of somebody who typed
+// nothing, and push every command below them. Nothing at all until two
+// characters are typed, and at most {@link PAL_NODE_ROWS} rows after that.
+//
+// Outside `paletteCommands()` for a second reason: that function returns early
+// in a static export (no writes there at all), and finding a card is a READ.
+// Nothing below fetches anything — the IR is the one the page painted and the
+// pan is a viewBox — so a bundle answers ⌘K exactly as a served project does.
+
+/** How many node rows the palette will show. A cap, not a ranking: past a
+ * dozen the reader is scrolling a list rather than recognising a name, and the
+ * answer is a longer query. */
+const PAL_NODE_ROWS = 12;
+
+/** The address inside a composed id — `terralith-4/aws_iam_role.x` is the id,
+ * `aws_iam_role.x` is what a person types. A member name cannot hold a slash
+ * (composeStacks' `shortStackNames`), so the FIRST one splits it. */
+function nodeAddress(id) {
+  const slash = id.indexOf("/");
+  return slash >= 0 ? id.slice(slash + 1) : id;
+}
+function nodeMember(id) {
+  const slash = id.indexOf("/");
+  return slash >= 0 ? id.slice(0, slash) : "";
+}
+
+/** The node rows for a query: matches on the composed id and on the address,
+ * with anything that STARTS with the query first — typing `aws_iam_role.team_00`
+ * should reach `aws_iam_role.team_0007_role` before a card that merely mentions
+ * it. Stable within each half (the IR's own order), so the list does not
+ * reshuffle as a query grows. */
+function paletteNodes(q) {
+  if (!lastGraphIr || q.length < 2) return [];
+  const prefix = [];
+  const rest = [];
+  for (const n of lastGraphIr.nodes) {
+    const address = nodeAddress(n.id);
+    const id = n.id.toLowerCase();
+    const a = address.toLowerCase();
+    if (a.startsWith(q) || id.startsWith(q)) prefix.push({ n, address });
+    else if (a.includes(q) || id.includes(q)) rest.push({ n, address });
+    if (prefix.length >= PAL_NODE_ROWS) break;
+  }
+  return [...prefix, ...rest].slice(0, PAL_NODE_ROWS).map(({ n, address }) => ({
+    label: `node: ${address}`,
+    // What the address alone does not say: which member it is in, and what it
+    // is. Two members of one estate can declare the same address.
+    sub: [nodeMember(n.id), n.kind, n.lexicon].filter(Boolean).join(" · "),
+    run: () => {
+      selectNode(n.id); // the same path a graph click takes — inspect included
+      if (!revealNode(n.id)) showToast(`${address} is not on this view — it may be elided at this zoom`, false);
+    },
+  }));
+}
+
 function palRender() {
   const q = palInput.value.toLowerCase().trim();
-  palCurrent = q ? palCmds.filter((c) => c.label.toLowerCase().includes(q)) : palCmds;
+  const cmds = q ? palCmds.filter((c) => c.label.toLowerCase().includes(q)) : palCmds;
+  // Nodes first: a query that matches a card is nearly always somebody looking
+  // for that card, and a query that matches no card costs nothing.
+  palCurrent = [...paletteNodes(q), ...cmds];
   palSel = Math.max(0, Math.min(palSel, palCurrent.length - 1));
   palList.replaceChildren();
   if (!palCurrent.length) {
@@ -4527,6 +5430,12 @@ function palRender() {
     const d = document.createElement("div");
     d.className = "row" + (i === palSel ? " sel" : "");
     d.textContent = c.label;
+    if (c.sub) {
+      const sub = document.createElement("div");
+      sub.className = "sub";
+      sub.textContent = c.sub;
+      d.appendChild(sub);
+    }
     d.onmousedown = (ev) => {
       ev.preventDefault();
       closePalette();