@intentius/behold 0.17.0 → 0.19.0

package/web/app.js

@@ -8,7 +8,34 @@
 // 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 { createRefreshQueue } from "./refresh-queue.js";
+import { readCostLine } from "./read-cost.js";
+import { applyMemberFrame, pendingLine, stillPending } from "./pending.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 +83,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 +93,121 @@ 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");
+    // #429: and the card an overlay never observed because its member has no
+    // live half. Only on an overlay: on the source graph NO card has a status
+    // and the mark would be on every one of them, saying nothing.
+    const onOverlay = !!(lastMeta && lastMeta.env);
+    const node = graphIr.nodes.find((n) => n.id === id);
+    g.toggleAttribute("data-no-live", onOverlay && !!node && !(node.attrs && node.attrs._status));
     // 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,11 +291,11 @@ 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", "stacks", "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).
-  const flat = params.get("components") === "1" || params.get("logical") === "1" || params.get("ops") === "1";
+  const flat = params.get("components") === "1" || params.get("logical") === "1" || params.get("ops") === "1" || params.get("stacks") === "1";
   const q = LENS_PARAMS.filter((k) => params.has(k) && !(flat && (k === "detail" || k === "radial")))
     .map((k) => `${k}=${params.get(k)}`)
     .join("&");
@@ -187,6 +320,55 @@ 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) || "";
+}
+// #396 item 5: the inspect pane's LIVE section prints `ownership` raw, and
+// `ownership` is a word two different readers write into the same field.
+// chant's live reader answers it from the resource's own marker — `owned` /
+// `foreign`, which is chant's contract for that field (chant graph-ir.d.ts).
+// src/choudoufu-live.ts has no marker to read: it writes the same two words for
+// choudoufu's `bound[]` and `unowned[]`, so an unowned card read `status:
+// unowned` and, two rows below it, `ownership: foreign` — chant's word for
+// choudoufu's state, the last of the four #393 item 8 did not reach.
+//
+// So this row joins the legend, the counts and the status row in being rendered
+// through the estate's own vocabulary rather than printed. Translated ONLY when
+// the estate's members are all of a kind that has its own words for these
+// colours (`vocabulary.of`): on a chant estate, and on a mixed one — which
+// keeps chant's words on the legend by design and says so in its tooltip — the
+// value is printed exactly as it is today, which is the point. The mapping is
+// value → the colour that value means → that colour's word, so it needs no
+// table of its own beyond the two words chant's field can hold.
+const OWNERSHIP_STATUS = { owned: "good", foreign: "warn" };
+function ownershipLabel(value) {
+  const v = lastMeta && lastMeta.vocabulary;
+  if (!v || !v.labels || !v.of || v.of === "chant" || v.of === "mixed") return value;
+  return v.labels[OWNERSHIP_STATUS[value]] || value;
+}
+// #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 +566,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 +644,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 +721,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
@@ -520,7 +740,7 @@ function inspect(node) {
   if (node.physicalId || node.ownership) {
     const live = section("live");
     if (node.physicalId) live("physical id", node.physicalId);
-    if (node.ownership) live("ownership", node.ownership);
+    if (node.ownership) live("ownership", ownershipLabel(node.ownership)); // #396 item 5: the estate's own word for it
   } else if (liveStatus) {
     // The colour alone doesn't carry chant's verdict or its reasoning — spell
     // both out here (never rely on the node's colour alone, #57 accessibility
@@ -638,7 +858,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 +970,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;
@@ -787,7 +1026,7 @@ function renderObserved(panel, o, health, healthDetail) {
   if (o.type) add("type", o.type);
   if (o.status) add("status", o.status, HEALTH_COLOR[health] || undefined);
   if (o.physicalId) add("physical id", o.physicalId);
-  if (o.ownership) add("ownership", o.ownership);
+  if (o.ownership) add("ownership", ownershipLabel(o.ownership)); // #396 item 5: same, off /api/diff
   if (o.lastUpdated) add("last updated", o.lastUpdated);
   // What the object's own controller says is wrong with it (#86, chant#1401).
   // Placed with health and status rather than among the attributes below,
@@ -802,11 +1041,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 +1057,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 +1235,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 +1245,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.
@@ -1029,22 +1291,47 @@ const ZOOM_OPTS = [
   // same chant source), so it sits last, and only appears when the served
   // estate has actually emitted Ops — `opsAvailable`, from /api/project.
   ["zoom: ops", "ops"],
+  // The apply order (#426): the cross-stack ordering chant already computes at
+  // synthesis — which lexicon partition must apply before which. A different
+  // axis again, like `ops`: neither coarser nor finer than a resource, and the
+  // only stop whose edges are about TIME rather than reference. Single-project
+  // only and gated on `stacksCapable`, because two members' `aws` stacks are
+  // not one stack.
+  ["zoom: apply order", "stacks"],
 ];
 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;
+/** #422: the members whose live read has not landed yet, off the progressive
+ * overlay's `meta.pending`. Empty on every non-progressive load, which is every
+ * single-project serve and every static snapshot. */
+let pendingMembers = [];
+let pendingTotal = 0;
+/** #426: whether the apply-order stop is worth offering — /api/project's
+ * `stacksCapable`, which is false for an estate and for a single-lexicon
+ * project, where the answer could only ever be one box. */
+let stacksCapable = 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 : z === "stacks" ? stacksCapable : true));
 }
 /** Current zoom value from (components, logical, ops, detail). */
 function zoomValue() {
   if (view.components) return "components";
   if (view.logical) return "logical";
   if (view.ops) return "ops";
+  if (view.stacks) return "stacks";
   if (view.runtime) return "runtime";
   return { 1: "composites", 2: "resources", 3: "attributes" }[view.detail] ?? "resources";
 }
@@ -1053,8 +1340,9 @@ function applyZoom(z) {
   view.components = z === "components";
   view.logical = z === "logical";
   view.ops = z === "ops";
+  view.stacks = z === "stacks";
   view.runtime = z === "runtime";
-  if (z !== "components" && z !== "logical" && z !== "ops") view.detail = ZOOM_DETAIL[z] ?? 2;
+  if (z !== "components" && z !== "logical" && z !== "ops" && z !== "stacks") view.detail = ZOOM_DETAIL[z] ?? 2;
 }
 
 // --- Floating control panel content ---------------------------------------
@@ -1109,6 +1397,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 +1580,163 @@ 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");
+  // `center`, not `baseline`: an `overflow: hidden` flex item takes its bottom
+  // margin edge as its baseline, so the clipped line below would have dragged
+  // the copy button down with it.
+  wrap.style.cssText = "display:flex;gap:6px;align-items:center;min-width:0";
+  const line = document.createElement("code");
+  line.className = "grow";
+  // #396 item 7c: ONE line, clipped. `tofu-estate=… tofu-address=…` wrapped
+  // onto three lines in the 260px pane and pushed everything the card had to
+  // say off the bottom — for a string nobody reads off the screen anyway,
+  // because the copy button beside it is how it gets used. The whole of it is
+  // on this row's tooltip, on the button's, and in the clipboard.
+  line.style.cssText = "flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis";
+  line.textContent = text;
+  line.title = text;
+  const copy = actButton("copy", () => copyToClipboard(text, copy), title ? `${title}:\n${text}` : text);
+  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 +1768,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 +1836,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 +1935,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 +2076,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 +2106,55 @@ 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.
+    // #429: a card with NO `_status` at all. pinhole's painter falls back to
+    // `neutral` for an unrecognised value, `undefined` included, so a member
+    // with no live half — a Terraform root, whose `live`/`overlay`/`env` are
+    // stripped in src/terraform-member.ts — paints exactly like a card behold
+    // looked at and could not see. It is in no legend bucket either, so the
+    // colour claimed 37 unobserved cards on an estate whose legend counted 2.
+    //
+    // Named rather than folded into `unobserved`, because they are different
+    // claims: "I looked and could not see" against "there is nothing here to
+    // look at". Same argument #399 makes for an unpriced card, and the same
+    // answer — mark it, do not merely colour it.
+    const noLive = ir.nodes.filter((n) => !(n.attrs && n.attrs._status)).length;
+    if (noLive) {
+      const row = panelDotRow("var(--muted)", "no live half", String(noLive));
+      row.title = "These members declare no live half, so nothing observed them — which is not the same as unobserved, and not the same as absent.";
+      host.appendChild(row);
+    }
+    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 +2164,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 +2176,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 +2521,88 @@ 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.
+ */
+/**
+ * The cards whose member is still being read (#422).
+ *
+ * The same post-render stamp `markCarvedCards`/`markDriftedCards` use, and for
+ * the same reason: pinhole's SVG arrives as a string and is replaced on every
+ * render, so a mark is re-applied here rather than asked for at layout time.
+ *
+ * A dashed outline and a muted corner rather than a fill, because the fill is
+ * the status channel and this card HAS no status yet — painting one would be
+ * the claim the whole milestone exists to avoid. `_pendingRead` rides its own
+ * attr for the same reason: a fifth `_status` value falls back to neutral in
+ * pinhole's painter, which reads as "unobserved", which is a different and
+ * wrong thing.
+ */
+function markPendingCards(ir) {
+  const svg = document.querySelector("#graph svg");
+  if (!svg) return;
+  for (const n of (ir && ir.nodes) || []) {
+    const g = svg.querySelector('[data-node-id="' + CSS.escape(n.id) + '"]');
+    if (!g) continue;
+    const pending = !!(n.attrs && n.attrs._pendingRead);
+    g.toggleAttribute("data-pending-read", pending);
+    if (pending && !g.querySelector("title")) {
+      const t = document.createElementNS("http://www.w3.org/2000/svg", "title");
+      t.textContent = "still reading this member — not yet observed";
+      g.appendChild(t);
+    }
+  }
+}
+
+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,9 +2658,18 @@ 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");
+  // #422: what the picture is still waiting on, while it is waiting. Ahead of
+  // the zoom note, because a half-read estate is the more urgent fact about
+  // what is on screen.
+  const stillReading = pendingLine(pendingMembers, pendingTotal);
+  if (stillReading) parts.push(stillReading);
   el.textContent = parts.join(" · ");
   // #131: why this level rendered empty, or as the one below it. The server
   // decides (src/zoom-notes.ts) — the SPA never infers it, so the note always
@@ -1878,7 +2679,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 +2696,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 +3372,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 +3419,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 +3447,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 +3498,8 @@ 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
+  markPendingCards(ir); // #422: and the cards whose member has not answered yet
   applyLayout(); // #228: last, so the hand-placed deltas ride on top of every other pass
   renderDial();
 }
@@ -2770,7 +3595,13 @@ function setupGraphViewBox(svg) {
   const a = (svg.getAttribute("viewBox") || "").split(/\s+/).map(Number);
   if (a.length === 4 && a.every((n) => !Number.isNaN(n))) {
     vbInit = a.slice();
-    vb = a.slice();
+    // #396 item 2: land on the fit that keeps the panel's footprint clear, not
+    // on the raw box — a re-render (a zoom change, an env change, the SSE
+    // re-pull) goes through here and never through fitGraph, so the first
+    // column would slide back under the panel at every one of them.
+    vb = fittedViewBox() || a.slice();
+    vbAtFit = true;
+    applyVB();
   } else {
     vbInit = vb = null;
   }
@@ -2781,12 +3612,219 @@ function currentSvg() {
 function applyVB() {
   const s = currentSvg();
   if (s && vb) s.setAttribute("viewBox", vb.join(" "));
+  scaleBoxLabels(); // #396 item 7b: box titles/badges keep a legible size at every zoom
+}
+
+// #396 item 2: the panel is `position: fixed` and floats OVER the graph pane
+// (index.html), so "fit the pane" put the leftmost column of cards underneath
+// it — a whole column of the terralith, half waterpark's `github` box — at
+// boot and after every re-render. The panel is furniture the reader cannot see
+// through, so the fit's target is the pane MINUS whatever the panel is
+// currently covering.
+//
+// Read at fit time, never remembered: the panel drags, docks to either side and
+// collapses to its tab bar, and a fit computed against where it used to be is
+// the same bug with a different offset. Collapsed or hidden → no footprint, and
+// the fit is the whole pane exactly as before.
+//
+// Horizontal only. The panel is a tall palette that docks left or right; a
+// top/bottom dock still leaves the full width, and insetting vertically for it
+// would shrink the graph for a strip the cards mostly clear anyway.
+const FIT_PANEL_MAX = 0.45; // the panel can never claim more than this of the pane
+
+function panelInsets(pane) {
+  const none = { left: 0, right: 0 };
+  const p = document.getElementById("panel");
+  if (!p || p.classList.contains("collapsed")) return none;
+  const cs = getComputedStyle(p);
+  if (cs.display === "none" || cs.visibility === "hidden" || Number(cs.opacity) === 0) return none;
+  const r = p.getBoundingClientRect();
+  if (!r.width || !r.height) return none;
+  // Nothing to inset for a panel that has been dragged clear of the graph pane.
+  if (r.bottom <= pane.top || r.top >= pane.bottom || r.right <= pane.left || r.left >= pane.right) return none;
+  const cap = pane.width * FIT_PANEL_MAX;
+  // Whichever side it is nearer to is the side it eats.
+  return (r.left + r.right) / 2 < (pane.left + pane.right) / 2
+    ? { left: Math.min(cap, Math.max(0, r.right - pane.left)), right: 0 }
+    : { left: 0, right: Math.min(cap, Math.max(0, pane.right - r.left)) };
+}
+
+/**
+ * The viewBox that fits the whole graph into the pane's UNCOVERED part.
+ *
+ * The returned box is given the pane's own aspect ratio, so `xMidYMid meet`
+ * letterboxes nothing and the pane's pixels map to viewBox units at one known
+ * scale: the graph is then placed by arithmetic — centred inside the band
+ * between the insets, centred vertically — instead of wherever `meet` would
+ * have dropped it. With no insets the result is pixel-identical to the old
+ * `vb = vbInit`, which is why nothing without a panel over it moves.
+ */
+function fittedViewBox() {
+  if (!vbInit) return null;
+  const host = document.getElementById("graph");
+  if (!host) return null;
+  const pane = host.getBoundingClientRect();
+  const [x0, y0, w0, h0] = vbInit;
+  if (!(pane.width > 0 && pane.height > 0 && w0 > 0 && h0 > 0)) return null;
+  const { left, right } = panelInsets(pane);
+  const band = Math.max(1, pane.width - left - right);
+  const s = Math.min(band / w0, pane.height / h0);
+  const vw = pane.width / s;
+  const vh = pane.height / s;
+  return [x0 - left / s - (band / s - w0) / 2, y0 - (vh - h0) / 2, vw, vh];
 }
+
 function fitGraph() {
-  if (vbInit) {
-    vb = vbInit.slice();
-    applyVB();
+  if (!vbInit) return;
+  vb = fittedViewBox() || vbInit.slice();
+  vbAtFit = true;
+  applyVB();
+}
+
+// #396 item 2: the fit now depends on the pane — its size, and what the panel
+// covers of it — where `vbInit` alone depended on neither, so a graph sitting
+// at fit has to be re-fitted when the pane moves under it. It moves more often
+// than a window resize: the statusbar's note wraps onto a second line, the
+// inspect pane is dragged wider, a panel tab's content grows. Only while the
+// view IS the fit: a pan or a zoom takes ownership of the viewBox, and nothing
+// here may pull it back out from under the reader's hands.
+let vbAtFit = false;
+function watchPaneForFit(host) {
+  if (typeof ResizeObserver === "undefined") return;
+  new ResizeObserver(() => {
+    if (vbAtFit) fitGraph();
+  }).observe(host);
+}
+
+// --- #396 item 7b: box titles and badges that survive the fit ---------------
+//
+// pinhole draws a group box's title at a flat `font-size="12"` and its badge at
+// `11`, in viewBox UNITS. That reads as 12px on a graph whose fit is 1:1 and as
+// 7px on terralith-4, whose box is 8000 units wide — the one label that says
+// which member 301 cards belong to, and the one that counts them, are the two
+// things on the canvas a person cannot read at the zoom they arrive at.
+//
+// So the label is given a floor in SCREEN pixels: its size in units is raised
+// by the inverse of the current scale until it renders at its natural size, and
+// never below it, so anything already legible is untouched (zoomed IN, the
+// attribute is left at 12 and grows with the graph, exactly as before). The
+// anchor never moves — x, y and `text-anchor` are pinhole's — so a title stays
+// welded to its box's top-left corner and a badge to its top-right through
+// every pan and zoom; only the type gets bigger.
+//
+// The floor yields to the box: a label may not grow past a fraction of the
+// box's height, nor past its width. A sub-box too small to hold readable type
+// at this zoom says so by staying small, rather than by writing across its
+// neighbours.
+const BOX_LABEL_GUTTER = 34; // units below a box's top edge that the title row occupies
+const BOX_LABEL_MAX_H = 8; // a label may be at most box height / this
+const BOX_LABEL_EM = 0.62; // rough advance width per char, as a fraction of the size
+
+let boxLabelCache = { svg: null, labels: [] };
+let boxLabelScale = null;
+
+/** The `<text>` elements pinhole put in each group box's title gutter, with the
+ * box they belong to and the size it drew them at. Matched by geometry rather
+ * than by sibling order: a box's optional identity mark sits between the title
+ * and the badge, and #228's layout pass lifts the rect and its title into a
+ * wrapper `<g>` after the render, so neither order nor a common parent holds.
+ * What geometry alone would let through — a card's own text, an edge chip's —
+ * is excluded by the ancestor it sits under. */
+function boxLabelsOf(svg) {
+  if (boxLabelCache.svg === svg) return boxLabelCache.labels;
+  const labels = [];
+  const boxes = [];
+  for (const rect of svg.querySelectorAll("rect[data-group-id]")) {
+    const b = {
+      x: parseFloat(rect.getAttribute("x")),
+      y: parseFloat(rect.getAttribute("y")),
+      w: parseFloat(rect.getAttribute("width")),
+      h: parseFloat(rect.getAttribute("height")),
+    };
+    if ([b.x, b.y, b.w, b.h].every((n) => Number.isFinite(n))) boxes.push(b);
+  }
+  if (boxes.length) {
+    for (const t of svg.querySelectorAll("text")) {
+      const x = parseFloat(t.getAttribute("x"));
+      const y = parseFloat(t.getAttribute("y"));
+      // pinhole's own size, stashed the first time so a re-index can never
+      // read a size this pass already raised as if it were the natural one.
+      const base = parseFloat(t.dataset.pinFont ?? t.getAttribute("font-size"));
+      if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(base)) continue;
+      // Not a card's own text (inside its `g[data-node-id]`), not an edge
+      // chip's (inside the edge's `g`), not a radial wedge label behold adds
+      // itself. What is left at a box's title row IS the box's title row.
+      if (t.closest("[data-node-id], [data-edge-from], [data-edge-to], #radial-labels")) continue;
+      const box = boxes.find((b) => y > b.y && y <= b.y + BOX_LABEL_GUTTER && x >= b.x - 2 && x <= b.x + b.w + 2);
+      if (!box) continue;
+      t.dataset.pinFont = String(base);
+      labels.push({ el: t, box, base });
+    }
   }
+  boxLabelCache = { svg, labels };
+  boxLabelScale = null;
+  return labels;
+}
+
+/** Re-size every box label for the current zoom. Cheap and idempotent: the
+ * scale is remembered, so the pan handler's stream of `applyVB` calls (which
+ * move the viewBox without changing its width) touches no attribute at all. */
+function scaleBoxLabels() {
+  const svg = currentSvg();
+  if (!svg || !vb) return;
+  const labels = boxLabelsOf(svg);
+  if (!labels.length) return;
+  const pane = svg.getBoundingClientRect();
+  if (!(pane.width > 0 && pane.height > 0)) return;
+  const scale = Math.min(pane.width / vb[2], pane.height / vb[3]);
+  if (!(scale > 0) || scale === boxLabelScale) return;
+  boxLabelScale = scale;
+  for (const l of labels) {
+    const chars = Math.max(4, (l.el.textContent || "").length);
+    const cap = Math.max(l.base, Math.min(l.box.h / BOX_LABEL_MAX_H, l.box.w / (chars * BOX_LABEL_EM)));
+    const size = Math.max(l.base, Math.min(l.base / scale, cap));
+    l.el.setAttribute("font-size", String(Math.round(size * 10) / 10));
+  }
+}
+
+// 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];
+  vbAtFit = false;
+  applyVB();
+  return true;
 }
 function ensureZoomControls(host) {
   let btn = document.getElementById("zoom-toggle");
@@ -2803,6 +3841,7 @@ function ensureZoomControls(host) {
   }
   if (zoomWired) return;
   zoomWired = true;
+  watchPaneForFit(host);
   host.addEventListener(
     "wheel",
     (e) => {
@@ -2824,6 +3863,7 @@ function ensureZoomControls(host) {
       vb[1] = cy - ((cy - vb[1]) * nh) / vb[3];
       vb[2] = nw;
       vb[3] = nh;
+      vbAtFit = false;
       applyVB();
     },
     { passive: false },
@@ -2856,6 +3896,7 @@ function ensureZoomControls(host) {
     }
     vb[0] -= (dx / r.width) * vb[2];
     vb[1] -= (dy / r.height) * vb[3];
+    vbAtFit = false;
     px = e.clientX;
     py = e.clientY;
     applyVB();
@@ -3459,7 +4500,8 @@ function renderPreconditionError(body) {
 }
 
 // Fetch the current view (source graph, or the picked env's live overlay).
-async function load(opts = {}) {
+const load = createRefreshQueue(loadOnce);
+async function loadOnce(opts = {}, isCurrent = () => true) {
   const meta = document.getElementById("meta");
   // A background settle re-pull (post-apply) shouldn't flash the meta/overlay.
   if (!opts.quiet) {
@@ -3478,6 +4520,14 @@ async function load(opts = {}) {
       // cross-substrate entity overlay, which components never use.
       q.set("components", "1");
       if (view.env) q.set("env", view.env);
+    } else if (view.stacks) {
+      // The apply-order lens (#426): chant's cross-stack ordering, built fresh
+      // for the same reason the ops lens is — it reads none of the entity
+      // knobs. No env (it is computed at synthesis, with no substrate), no
+      // detail, no radial. Tier rides along because a project's source can
+      // branch on one, which can change which lexicons it partitions into.
+      q = new URLSearchParams({ stacks: "1" });
+      if (view.tier) q.set("tier", view.tier);
     } else if (view.ops) {
       // The ops lens (#284): the declared Ops, read from each Op's emitted
       // op.json. Built fresh rather than layered onto the entity lenses,
@@ -3511,14 +4561,30 @@ async function load(opts = {}) {
     } else if (view.env) {
       endpoint = "/api/overlay";
       q.set("env", view.env);
+      // #422: draw the estate from source at once and recolour each member as
+      // its own live read lands, instead of a blank canvas until the slowest
+      // one finishes. The server only honours it for a composed estate, and
+      // never in a static snapshot, where there is no stream to follow.
+      if (!staticMode) q.set("progressive", "1");
       // The runtime tier (#86) descends below the declaration boundary. It is
       // live-only by nature — owner-referenced children exist in the cluster,
       // 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
@@ -3531,6 +4597,7 @@ async function load(opts = {}) {
     }
     const res = await apiFetch(`${endpoint}?${q}`);
     const body = await res.json();
+    if (!isCurrent()) return; // a newer view/event is pending; do not paint the old result
     if (!res.ok) {
       // #72: a classified precondition failure (lint gate, not installed, a
       // tier that needs credentials) gets the calmer entry/error card instead
@@ -3551,13 +4618,19 @@ async function load(opts = {}) {
       autoZoomFallback = false;
       applyZoom("resources");
       renderStatusbar();
-      return load(opts);
+      return loadOnce(opts, isCurrent);
     }
     autoZoomFallback = false;
+    // #422: a progressive answer names the members it is still reading, and
+    // the `member` stream above clears them one at a time. Any other answer
+    // resets it, so a switch away from a progressive load never leaves a stale
+    // "still reading" claim on screen.
+    pendingMembers = body.meta && body.meta.mode === "progressive" ? [...(body.meta.pending || [])] : [];
+    pendingTotal = pendingMembers.length;
     render(body.ir, body.svg, body.meta);
   } catch (err) {
     // A background settle poll must not blow away a good graph on a transient error.
-    if (!opts.quiet) {
+    if (!opts.quiet && isCurrent()) {
       // Text, never innerHTML — `err.message` embeds chant's own stderr, which
       // is not ours to interpolate as markup (the sibling precondition card has
       // said so since #72; this branch had been left behind).
@@ -3574,6 +4647,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 +4740,16 @@ 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;
+  stacksCapable = !!info.stacksCapable;
+  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;
@@ -3659,20 +4771,39 @@ initPickers();
 // No backend in a static export → no live event stream; a no-op keeps the
 // `events.addEventListener(...)` wiring below harmless.
 const events = staticMode ? { addEventListener() {} } : new EventSource("/api/events");
-// Post-op settle re-pull: an apply's CLI can exit while the last stacks are still
-// flipping to *_COMPLETE, so the immediate reload catches a few components mid-
-// deploy ("all done, 3 still pending"). Quietly re-pull a couple more times so
-// the graph lands on the final colours without a manual Re-check live.
-let settleTimers = [];
-function scheduleSettle() {
-  settleTimers.forEach(clearTimeout);
-  settleTimers = [3000, 8000, 15000].map((ms) => setTimeout(() => load({ quiet: true }), ms));
-}
+// One notification requests one refresh. Further notifications during a slow
+// read collapse to one follow-up; no wall-clock timers multiply estate scans.
+// #422: one frame per member as its live read settles. Payload-carrying, like
+// `apply` and `run` — the node set is already on screen, so this is id ->
+// status and the client repaints in place. Nothing is re-fetched: a refetch
+// here would re-run the whole estate read this stream exists to narrate.
+events.addEventListener("member", (e) => {
+  let frame;
+  try {
+    frame = JSON.parse(e.data);
+  } catch {
+    return;
+  }
+  // The live pass itself failed. Say so on the now-line and stop claiming the
+  // remaining members are still arriving, because nothing more is coming.
+  if (frame.error) {
+    pendingMembers = [];
+    nowline(`the estate read failed — ${frame.error}`);
+    renderStatusbar();
+    return;
+  }
+  if (!lastGraphIr) return;
+  const moved = applyMemberFrame(lastGraphIr, frame);
+  pendingMembers = stillPending(pendingMembers, frame);
+  if (moved.length) recolorNodesByCategory(lastGraphIr);
+  markPendingCards(lastGraphIr);
+  renderStatusbar();
+});
+
 events.addEventListener("changed", () => {
   bulkDiffCache = null; // an op ran → per-node live state may have changed
   load();
   loadSubstrates(); // a bring-up (or any op) finished → re-detect readiness
-  scheduleSettle();
 });
 
 // Substrate readiness (M5, #54): is each substrate the project needs actually
@@ -3809,11 +4940,19 @@ setInterval(() => {
 // can't fire a second pull while one's in flight. Ref-counted — nested loads
 // (graph + CI + resources) only lift the scrim when the last finishes.
 let loadingDepth = 0;
+// #421: what the LAST read cost, shown while this one runs. The person watching
+// the scrim wants to know whether to wait or go away, and behold has never told
+// them. Fetched after a load settles rather than during one — asking the server
+// how slow it is while it is being slow helps nobody — so the line always
+// describes the previous read and never guesses at this one.
+let lastReadCost = null;
 function showLoading(msg) {
   loadingDepth++;
   const o = document.getElementById("loading-overlay");
   if (!o) return;
   document.getElementById("loading-msg").textContent = msg || "loading…";
+  const cost = document.getElementById("loading-cost");
+  if (cost) cost.textContent = lastReadCost || "";
   o.hidden = false;
 }
 function hideLoading() {
@@ -3821,6 +4960,27 @@ function hideLoading() {
   if (loadingDepth > 0) return;
   const o = document.getElementById("loading-overlay");
   if (o) o.hidden = true;
+  void refreshReadCost();
+}
+
+// One cheap call on counters, never on the read path. `?reads=1` is what makes
+// that true: the bare route also runs the full doctor diagnosis, whose substrate
+// probes spawn docker/gh/helm/k3d with no timeout, and this runs after every
+// load settles. A cost line is never worth breaking a load over, so every
+// failure here leaves the previous line standing.
+//
+// A static export has no backend to ask and no reads to report, so it does not
+// ask. Without this guard the bundle logs a 404 on every page load and relies on
+// the fetch failing to stay silent, which is an outcome rather than a rule.
+async function refreshReadCost() {
+  if (staticMode) return;
+  try {
+    const res = await fetch("/api/doctor?reads=1");
+    if (!res.ok) return;
+    lastReadCost = readCostLine((await res.json()).reads);
+  } catch {
+    /* no line rather than a wrong one */
+  }
 }
 
 // #259: the op stream is chant's own stdout, and an Op that reports as JSON
@@ -4409,6 +5569,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 +5610,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 +5709,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 +5789,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();