@intentius/behold 0.2.2

package/web/app.js

@@ -0,0 +1,2352 @@
+// behold SPA. Fetches the read-only graph from the server — chant's IR + pinhole's
+// rendered SVG — inlines the SVG and wires click-inspect. The visual is pinhole's
+// mature painter (themes, icons, `_status` drift colouring); behold owns the data,
+// the inspect panel, and (later) the lanes + delegated actions.
+
+// Ghostty colour themes (#62): apply the persisted/default theme's tokens as CSS vars
+// before first paint (so the whole graph + chrome recolour from one source), then mount
+// the theme picker into the header's #pickers slot.
+import { initTheme, mountThemePicker, readableOn, colorForCategory, onThemeChange, getTokens } from "./theme.js";
+initTheme();
+mountThemePicker(document.getElementById("pickers"));
+
+// Colour node fills by category/kind using the theme's FULL palette (spicypath-style, so the
+// graph shows the theme's many colours), while pinhole's drift stays on the bar/stroke. Node
+// 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;
+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"]));
+  for (const g of svg.querySelectorAll("[data-node-id]")) {
+    const kind = kindOf.get(g.getAttribute("data-node-id"));
+    if (!kind) continue;
+    const cat = colorForCategory(kind), ink = readableOn(cat);
+    // 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
+    // the token. Roles: fill=card background (→ category hue), bg=foreignObject background,
+    // inkf/inks=label/icon (→ readable ink). The drift bar (--pin-*Bar) is never classified.
+    for (const el of g.querySelectorAll("*")) {
+      let role = el.getAttribute("data-cat");
+      if (!role) {
+        const f = el.getAttribute("fill") || "", s = el.getAttribute("stroke") || "", st = el.getAttribute("style") || "";
+        if (/--pin-\w+Fill\b/.test(f)) role = "fill";
+        else if (/--pin-\w+Fill\b/.test(st)) role = "bg";
+        else if (/--pin-text/.test(f)) role = "inkf";
+        else if (/--pin-text/.test(s)) role = "inks";
+        if (role) el.setAttribute("data-cat", role);
+      }
+      if (role === "fill") el.setAttribute("fill", cat);
+      else if (role === "bg") el.setAttribute("style", (el.getAttribute("style") || "").replace(/background:[^;]*/, "background:" + cat));
+      else if (role === "inkf") el.setAttribute("fill", ink);
+      else if (role === "inks") el.setAttribute("stroke", ink);
+    }
+  }
+  // Runtime children get their bar coloured here (#144): pinhole's status
+  // palette has no `runtime` token, so chant's `_status: runtime` falls through
+  // to the neutral bar and a Pod reads exactly like an unobserved node. The bar
+  // is the 4px rect pinhole draws second inside each node group.
+  const statusOf = new Map(graphIr.nodes.map((n) => [n.id, n.attrs && n.attrs._status]));
+  for (const g of svg.querySelectorAll("[data-node-id]")) {
+    if (statusOf.get(g.getAttribute("data-node-id")) !== "runtime") continue;
+    const bar = g.querySelector('rect[width="4"]');
+    if (bar) bar.setAttribute("fill", "var(--runtime)");
+  }
+}
+onThemeChange(() => recolorNodesByCategory());
+
+// Static-export mode (`behold export`): the SPA runs off a pre-captured bundle
+// with no backend. Detect the flag the export injects, load its manifest, and
+// replay every read from `snapshots/` — the graph, zoom dial, radial, inspect,
+// and env/tier pickers all work; live observe + all writes are off.
+const staticMode = !!window.__BEHOLD_STATIC__;
+let manifest = null;
+if (staticMode) {
+  try {
+    manifest = await fetch("./manifest.json").then((r) => r.json());
+  } catch {
+    /* no manifest → apiFetch falls back to a not-captured error */
+  }
+}
+
+/** 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", "radial", "runtime", "tier"];
+function canonicalKey(path, params) {
+  // Components + logical 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";
+  const q = LENS_PARAMS.filter((k) => params.has(k) && !(flat && (k === "detail" || k === "radial")))
+    .map((k) => `${k}=${params.get(k)}`)
+    .join("&");
+  return q ? `${path}?${q}` : path;
+}
+
+/** Fetch a read endpoint — live `fetch` normally; in static mode, resolve the
+ * canonical key against the manifest and load the captured snapshot instead. */
+function apiFetch(url) {
+  if (!staticMode) return fetch(url);
+  const u = new URL(url, location.origin);
+  const key = canonicalKey(u.pathname, u.searchParams);
+  const file = manifest && manifest.keyToFile[key];
+  if (!file) return Promise.resolve(new Response(JSON.stringify({ error: `not in this static export: ${key}` }), { status: 404, headers: { "content-type": "application/json" } }));
+  return fetch("./" + file);
+}
+
+// `neutral` (chant#1168, #1089): a declared node chant could not read live
+// state for — distinct from `accent`/"pending" (provider confirmed it
+// absent). Additive: a chant predating #1168 never emits `neutral` here.
+// `runtime` (chant#1180, #1077): a live, undeclared node whose owner chain
+// 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" };
+// 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
+// panel picks this label set for a node that carries `_liveStatus` (see
+// joinComponentStatus, src/component-status.ts). `accent` (pinhole's blue
+// paint — there's no separate amber token) reads as "in progress" here,
+// distinct from the entity overlay's "pending" meaning for the same colour.
+const COMPONENT_STATUS_LABEL = { good: "healthy", accent: "in progress", warn: "rollback / failed", neutral: "not deployed" };
+// behold#146: the artifact-presence join (src/helm-artifacts.ts) paints
+// Helm::Chart nodes with the same palette but the 2-way ARTIFACT vocabulary —
+// a release is "installed", never "managed": chant's docs are explicit that
+// artifacts have no declared axis to classify against. `_artifact`'s presence
+// (or an artifact-flavoured `_unobserved`) picks this label set.
+const ARTIFACT_STATUS_LABEL = { good: "installed", warn: "installed, not healthy", accent: "not installed", neutral: "unobserved" };
+
+// A declared attribute value may be a cross-resource reference ({$ref:"x.y"}) —
+// the "static infra refs" — rather than a concrete value. Render those readably;
+// concrete values (present once a resource is provisioned) show as-is.
+function fmtValue(v) {
+  if (v && typeof v === "object") {
+    if (typeof v.$ref === "string") return "→ " + v.$ref;
+    return JSON.stringify(v);
+  }
+  return String(v);
+}
+
+function inspect(node) {
+  const panel = document.getElementById("inspect-body");
+  panel.innerHTML = "<h2>inspect</h2>";
+  panel.dataset.node = node.id; // so async sections can verify this node is still shown
+  const section = (title) => {
+    const h = document.createElement("h3");
+    h.textContent = title;
+    h.style.cssText = "font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:14px 0 6px";
+    panel.appendChild(h);
+    const dl = document.createElement("dl");
+    panel.appendChild(dl);
+    return (k, v) => {
+      const dt = document.createElement("dt");
+      dt.textContent = k;
+      const dd = document.createElement("dd");
+      dd.textContent = v;
+      dl.append(dt, dd);
+    };
+  };
+
+  const id = section("identity");
+  id("id", node.id);
+  id("kind", node.kind);
+  id("lexicon", node.lexicon);
+  const st = node.attrs && node.attrs._status;
+  // Component-DAG live status (#57): `_liveStatus` is only ever set by
+  // joinComponentStatus, so its presence picks the component-status label set
+  // over the entity overlay's managed/foreign/pending.
+  const liveStatus = node.attrs && node.attrs._liveStatus;
+  // behold#146: a Helm chart's status is artifact presence, not management —
+  // the join sets `_artifact` on a match, and every Helm::Chart in an overlay
+  // went through it, so the kind alone is the reliable picker.
+  const isArtifact = node.kind === "Helm::Chart";
+  if (st) id("status", (isArtifact ? ARTIFACT_STATUS_LABEL[st] : liveStatus ? COMPONENT_STATUS_LABEL[st] : STATUS_LABEL[st]) || st);
+  if (node.attrs && node.attrs._artifact) {
+    const a = node.attrs._artifact;
+    if (a.release) id("release", a.release);
+    if (a.status) id("release status", a.status);
+    if (a.revision) id("revision", a.revision);
+    if (a.chart) id("chart", a.chart);
+  }
+  // chant#1168 (#1089): `_unobserved` carries WHY chant couldn't read this
+  // entity's live state — only ever set alongside the entity overlay's
+  // `_status: "neutral"` (never the component-status join's own, unrelated
+  // `neutral` = "not deployed"), so it's safe to show unconditionally here.
+  if (node.attrs && node.attrs._unobserved) id("unobserved reason", node.attrs._unobserved);
+  // chant#1180 (#1077): `runtimeOwner` is a first-class IR field (like
+  // `ownership`/`physicalId`), not an `attrs` tag — the declared entity this
+  // live, undeclared node's owner chain resolves to. Shown immediately from
+  // the graph node itself, no diff fetch needed.
+  if (node.runtimeOwner) id("runtime owner", node.runtimeOwner);
+  if (node.sourceLoc && node.sourceLoc.file) id("source", node.sourceLoc.file);
+
+  // Containment hierarchy: a resource shows its parent chain UP (composite →
+  // component); a collapsed composite (detail 1: `attrs.members` is a count)
+  // shows its member list DOWN. The parent chain is on the node itself
+  // (compositeInstance/compositeParent + the src/<component>/ path) — no fetch.
+  const sp = ((node.sourceLoc && node.sourceLoc.file) || "").split("/");
+  const component = sp[0] === "src" && sp[1] === "examples" ? "examples/" + (sp[2] || "") : sp[0] === "src" && sp.length >= 3 ? sp[1] : null;
+  const isComposite = node.attrs && typeof node.attrs.members === "number";
+  if (!isComposite && (node.compositeInstance || (component && node.kind !== "Component"))) {
+    const bt = section("belongs to");
+    if (component) bt("component", component);
+    if (node.compositeInstance) bt("composite", node.compositeParent ? `${node.compositeInstance} · ${node.compositeParent}` : node.compositeInstance);
+  }
+  if (isComposite) {
+    const h = document.createElement("h3");
+    h.textContent = `members · ${node.attrs.members}`;
+    h.style.cssText = "font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:14px 0 6px";
+    panel.appendChild(h);
+    const loading = document.createElement("p");
+    loading.style.color = "var(--muted)";
+    loading.textContent = "loading…";
+    panel.appendChild(loading);
+    const dl = document.createElement("dl");
+    panel.appendChild(dl);
+    const forId = node.id;
+    getCompositeMembers(node.id).then((members) => {
+      if (panel.dataset.node !== forId) return; // selection changed while loading
+      loading.remove();
+      if (!members.length) {
+        loading.textContent = "(no members found)";
+        panel.insertBefore(loading, dl);
+        return;
+      }
+      for (const m of members) {
+        const dt = document.createElement("dt");
+        dt.textContent = m.kind;
+        const dd = document.createElement("dd");
+        dd.textContent = m.id;
+        dl.append(dt, dd);
+      }
+    });
+  }
+
+  // Live state: what chant observed in the cloud. Only managed (provisioned)
+  // nodes carry it — pending nodes have none because they aren't deployed yet.
+  if (node.physicalId || node.ownership) {
+    const live = section("live");
+    if (node.physicalId) live("physical id", node.physicalId);
+    if (node.ownership) live("ownership", node.ownership);
+  } 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
+    // note): reconciliation is the raw `chant components status` verdict
+    // (reconciled/unrecorded/stale/drifted/unknown), detail is chant's own
+    // human-readable explanation. M2 (#54, chant 0.18.29): when present, the
+    // raw stack — the actual signal the palette painted from — backs it up
+    // with the provider-native fact (e.g. loom-db's UPDATE_ROLLBACK_COMPLETE).
+    const live = section("live status");
+    live("reconciliation", liveStatus.reconciliation);
+    if (liveStatus.detail) live("detail", liveStatus.detail);
+    if (liveStatus.stack) {
+      live("stack", liveStatus.stack.name);
+      if (liveStatus.stack.status) live("stack status", liveStatus.stack.status);
+      if (liveStatus.stack.healthy !== undefined) live("healthy", String(liveStatus.stack.healthy));
+    }
+  } else if (st === "accent") {
+    const live = section("live");
+    live("", "not provisioned yet (pending) — no live state");
+  } else if (st === "runtime") {
+    // chant#1180 (#1077): a runtime child rarely carries physicalId/ownership
+    // today (it's not chant-owned in the marker sense), so make sure
+    // something explains the node rather than showing an empty "live" gap.
+    const live = section("live");
+    live("", `runtime child — owned by ${node.runtimeOwner || "its declared parent"}, not itself declared`);
+  }
+
+  // Declared attributes — the source-of-truth values / cross-resource refs.
+  const attrKeys = Object.keys(node.attrs || {}).filter((k) => !k.startsWith("_"));
+  if (attrKeys.length) {
+    const decl = section("declared");
+    for (const k of attrKeys) decl(k, fmtValue(node.attrs[k]));
+  }
+
+  // CI projection facet (M1.2, #56/#58): loomster's GitLab CI is the SAME
+  // component DAG projected — waves = stages, components = jobs, `dependsOn` =
+  // `needs:`. Read one way it's the deployment, read the other it's the
+  // pipeline. A read-only per-node detail hanging off the component by name —
+  // no topology change. Only present for component nodes, and only once the
+  // facet loaded (component-DAG mode; see loadCi()).
+  const job = node.kind === "Component" ? ciByComponent.get(node.id) : undefined;
+  if (job) {
+    // The heading names the forge the pipeline was actually generated for
+    // (#164) — it used to say GitLab whatever the project targeted.
+    const ci = section(`CI (${{ gitlab: "GitLab", github: "GitHub Actions", forgejo: "Forgejo" }[ciForge] || ciForge || "pipeline"})`);
+    ci("stage", job.stage);
+    ci("needs", job.needs.length ? job.needs.join(", ") : "(none)");
+    ci("runs", job.script.length ? job.script.join(" && ") : `chant run --components ${node.id}`);
+    // The last pipeline run of this session, when one touched this component
+    // (#164) — the server joins it as `_ciJob`/`ci` on the node.
+    if (node.attrs && node.attrs._ciJob) ci("last run", `${node.attrs._ciJob}: ${node.attrs.ci}`);
+  }
+
+  // Resources facet (#59 unify) — a best-effort slice of the DoD's "its
+  // stack, and its resources": the AWS resources declared under this
+  // component's own source directory (see loadResources(); src/server.ts
+  // `/api/resources` documents why this is resources-by-source-location, not
+  // a literal CFN stack lookup, and a pre-existing chant gap — verified
+  // against loomster/Floci — that leaves physicalId/ownership usually empty
+  // even in live mode: kind/id are always the real declared shape; treat
+  // physicalId as a bonus when chant happens to supply it, not a given).
+  const resources = node.kind === "Component" ? resourcesByComponent[node.id] : undefined;
+  if (resources) {
+    const res = section("resources");
+    if (!resources.length) {
+      res("", "(none found under this component's source directory)");
+    } else {
+      for (const r of resources) {
+        res(r.kind, r.physicalId ? `${r.id} (${r.physicalId})` : r.id);
+      }
+    }
+  }
+
+  // A foreign node on a live-import substrate can be pulled into typed source:
+  // Adopt triggers the ReconcileOp (cloud → code), which opens a reviewable PR.
+  // behold never writes source — a human merges. Managed/pending nodes and
+  // substrates with no live-import path show nothing.
+  if (adoptable(node) && !previewMode) {
+    const b = button("Adopt", "", () => runOp(adopt.reconcile.name));
+    b.title = `Reconcile ${node.id} into source via ${adopt.reconcile.name} (opens a PR)`;
+    const wrap = document.createElement("p");
+    wrap.style.marginTop = "12px";
+    wrap.appendChild(b);
+    panel.appendChild(wrap);
+  }
+
+  // Live state for this node (#27/#30): a node that's already been observed
+  // (managed=good or foreign=warn — that's why it's coloured) auto-loads its
+  // observed state + drift, so a click shows it without a second click. Cached
+  // per node (loadNodeDiff) so re-clicks are instant. A live diff is a build +
+  // cloud query, so we only fire it for observed nodes, and never in static.
+  //
+  // chant#1168 (#1089): the entity overlay's `neutral` means "chant couldn't
+  // read this" — worth a diff fetch too, since `/api/diff`'s `unobserved`
+  // entries carry the richer reason/detail this panel can show (see
+  // renderDiff). Guarded to `!liveStatus` so this doesn't also fire for the
+  // component-status join's unrelated `neutral` ("not deployed" — no entity
+  // name for `/api/diff` to match against).
+  // chant#1180 (#1077): `runtime` is worth a diff fetch too — `/api/diff`'s
+  // `observed` map already carries a runtime child (chant's describeResources
+  // reports it the same as any other resource it found), and its own
+  // `fieldDrift` may apply too on a substrate with per-field ownership.
+  const observed = st === "good" || st === "warn" || st === "runtime" || (st === "neutral" && !liveStatus);
+  if (view.env && observed) {
+    const forId = node.id;
+    const loading = document.createElement("p");
+    loading.style.cssText = "color:var(--muted);margin-top:12px";
+    loading.textContent = "loading live state…";
+    panel.appendChild(loading);
+    loadNodeDiff(node.id).then((j) => {
+      if (panel.dataset.node !== forId) return; // reselected while loading
+      loading.remove();
+      if (!j) {
+        const p = document.createElement("p");
+        p.style.cssText = "color:var(--muted);margin-top:12px";
+        p.textContent = "live state unavailable";
+        panel.appendChild(p);
+        return;
+      }
+      renderObserved(panel, j.observed, j.health); // #30 observed state + #26 health
+      renderDiff(panel, j.diff); // #27 — drift since snapshot
+      renderFieldDrift(panel, j.fieldDrift); // #87 — field-level (per-manager) drift
+    });
+  }
+}
+
+// Bulk per-node live state — ONE `chant lifecycle diff --live` sliced for every
+// node (/api/diff), fetched once per env and cached, so inspecting an observed
+// 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 } } }
+async function loadNodeDiff(id) {
+  if (!bulkDiffCache || bulkDiffCache.env !== view.env) {
+    bulkDiffCache = null;
+    try {
+      const res = await apiFetch(`/api/diff?env=${encodeURIComponent(view.env)}`);
+      if (res.ok) bulkDiffCache = await res.json();
+    } catch {
+      /* leave null → empty below */
+    }
+    if (!bulkDiffCache || !bulkDiffCache.nodes) bulkDiffCache = { env: view.env, nodes: {} };
+  }
+  return bulkDiffCache.nodes[id] || null;
+}
+
+const HEALTH_COLOR = {
+  healthy: "var(--managed)",
+  progressing: "var(--pending)",
+  degraded: "var(--degraded)",
+  unknown: "var(--muted)",
+};
+
+// Render a node's observed live state (#30) + health verdict (#26).
+function renderObserved(panel, o, health) {
+  if (!o) return; // pending/foreign nodes have no observed record in the diff
+  const h = document.createElement("h3");
+  h.textContent = "observed";
+  h.style.cssText = "font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:14px 0 6px";
+  panel.appendChild(h);
+  const dl = document.createElement("dl");
+  const add = (k, v, color) => {
+    const dt = document.createElement("dt");
+    dt.textContent = k;
+    const dd = document.createElement("dd");
+    dd.textContent = v;
+    if (color) dd.style.color = color;
+    dl.append(dt, dd);
+  };
+  // Health first — the "is it well?" verdict, distinct from drift. Absent when
+  // the substrate reports no status (not fabricated).
+  if (health && health !== "unknown") add("health", health, HEALTH_COLOR[health]);
+  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.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,
+  // because it is the line that says what to DO: `Unschedulable` is the reason,
+  // "0/3 nodes are available: 1 node(s) had untolerated taint" is the answer.
+  // chant only sends conditions that are NOT in their happy state, so anything
+  // here is worth reading; the field is absent on every substrate that records
+  // none.
+  const conditions = o.attributes?.conditions;
+  if (Array.isArray(conditions)) {
+    for (const c of conditions) add("condition", String(c), "var(--degraded)");
+  }
+  for (const [k, v] of Object.entries(o.attributes || {})) {
+    if (k === "conditions") continue; // rendered above, one line each
+    add(k, typeof v === "object" ? JSON.stringify(v) : String(v));
+  }
+  panel.appendChild(dl);
+}
+
+const DIFF_LABEL = {
+  drifted: "drifted since snapshot",
+  missing: "declared, not in cloud",
+  orphan: "in cloud, not declared",
+  disappeared: "gone since snapshot",
+  newlyObserved: "live — no snapshot baseline",
+  unchanged: "in sync",
+  // chant#1168 (#1089): its own category — chant couldn't read this entity's
+  // live state at all, so this is neither drift nor a confirmed absence.
+  unobserved: "chant could not read live state",
+  // chant#1180 (#1077): its own category too — expected runtime, never drift
+  // and never orphan/adopt.
+  runtime: "expected runtime child",
+};
+
+// Render a node's live-diff into the inspect panel (#27).
+function renderDiff(panel, diff) {
+  const h = document.createElement("h3");
+  h.textContent = "drift";
+  h.style.cssText = "font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:14px 0 6px";
+  panel.appendChild(h);
+  if (!diff) {
+    const p = document.createElement("p");
+    p.style.color = "var(--muted)";
+    p.textContent = "not present in the live diff";
+    panel.appendChild(p);
+    return;
+  }
+  const cat = document.createElement("p");
+  cat.textContent = DIFF_LABEL[diff.category] || diff.category;
+  panel.appendChild(cat);
+  // chant#1168 (#1089): show WHY chant couldn't look, instead of the
+  // "no field changes" text below — that phrasing implies a comparison ran
+  // and found nothing, which is exactly the wrong read for a hole in the
+  // observation.
+  if (diff.category === "unobserved") {
+    const p = document.createElement("p");
+    p.style.color = "var(--muted)";
+    p.textContent = diff.unobservedReason
+      ? `reason: ${diff.unobservedReason}${diff.unobservedDetail ? " — " + diff.unobservedDetail : ""}`
+      : "chant did not report why";
+    panel.appendChild(p);
+    return;
+  }
+  // chant#1180 (#1077): never call this "drift" — it's the runtime doing its
+  // job (a Pod its Deployment created); deleting it just gets it recreated.
+  if (diff.category === "runtime") {
+    const p = document.createElement("p");
+    p.style.color = "var(--runtime)";
+    p.textContent = diff.runtimeOwner
+      ? `owned by ${diff.runtimeOwner} — created by its controller, not drift`
+      : "created by its controller, not drift";
+    panel.appendChild(p);
+    return;
+  }
+  if (!diff.changes.length) {
+    const p = document.createElement("p");
+    p.style.color = "var(--muted)";
+    p.textContent =
+      diff.category === "newlyObserved"
+        ? "no field diff yet — take a snapshot (chant lifecycle snapshot) to track changes"
+        : "no field changes";
+    panel.appendChild(p);
+    return;
+  }
+  const dl = document.createElement("dl");
+  for (const ch of diff.changes) {
+    const dt = document.createElement("dt");
+    dt.textContent = ch.path;
+    const dd = document.createElement("dd");
+    dd.textContent = `${JSON.stringify(ch.oldValue)} → ${JSON.stringify(ch.newValue)}`;
+    dl.append(dt, dd);
+  }
+  panel.appendChild(dl);
+}
+
+// Field-level ownership colouring (#87, chant#1076/#1181): per-field drift
+// derived from k8s managed-fields pruning — additive, only present when
+// chant's `lifecycle diff --live --json` carried a `deep` section for this
+// entity's lexicon (src/diff.ts's `nodeFieldDrift`). `null` on a substrate/
+// chant with no deep reader — the whole-object `drift` section above is
+// unaffected, per #87's fallback acceptance criterion.
+//
+// chant's wire contract doesn't carry a field-MANAGER name (which manager
+// currently owns a path) — only whether the path is `changed` (a real
+// deviation from what chant declared, whether purely chant-owned or
+// contested by a foreign manager — chant's own pruning already drops a
+// confidently foreign-owned, undeclared field before this ever runs),
+// `undeclared` (present live, chant's source says nothing about it — the
+// closest available signal to "foreign"), or `absent` (declared, not present
+// live). These three are the closest honest mapping to "chant-owned vs
+// foreign vs contested" the current wire data supports.
+const FIELD_KIND_LABEL = { changed: "drifted", undeclared: "foreign (not declared)", absent: "declared, not present live" };
+const FIELD_KIND_COLOR = { changed: "var(--degraded)", undeclared: "var(--foreign)", absent: "var(--muted)" };
+
+function renderFieldDrift(panel, fieldDrift) {
+  if (!fieldDrift) return; // no lexicon in this diff ran a deep (field-level) read
+  if (!fieldDrift.drifted.length && !fieldDrift.accepted.length) return; // deep ran, nothing to report for this node
+  const h = document.createElement("h3");
+  h.textContent = "field ownership";
+  h.style.cssText = "font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:14px 0 6px";
+  panel.appendChild(h);
+  const dl = document.createElement("dl");
+  for (const ch of fieldDrift.drifted) {
+    const dt = document.createElement("dt");
+    dt.textContent = ch.path;
+    dt.style.color = FIELD_KIND_COLOR[ch.kind] || "";
+    const dd = document.createElement("dd");
+    // The owning manager (#87, chant#1189) leads, because it is the part that
+    // decides what to do about the field: `hpa-controller` holding
+    // `spec.replicas` is a controller doing its job; `kubectl-client-side-apply`
+    // holding it is somebody editing around the pipeline. Both are `changed`.
+    // Absent on every substrate but k8s, where the line reads as it always did.
+    const owned = ch.owner ? `owned by ${ch.owner} — ` : "";
+    dd.textContent = `${owned}${FIELD_KIND_LABEL[ch.kind] || ch.kind} — declared: ${JSON.stringify(ch.declared)} · live: ${JSON.stringify(ch.live)}`;
+    dl.append(dt, dd);
+  }
+  for (const ch of fieldDrift.accepted) {
+    const dt = document.createElement("dt");
+    dt.textContent = ch.path;
+    dt.style.color = "var(--muted)";
+    const dd = document.createElement("dd");
+    dd.textContent = `accepted deviation — baseline: ${JSON.stringify(ch.baseline)} · live: ${JSON.stringify(ch.live)}`;
+    dl.append(dt, dd);
+  }
+  panel.appendChild(dl);
+}
+
+function wire(ir) {
+  const byId = new Map(ir.nodes.map((n) => [n.id, n]));
+  const host = document.getElementById("graph");
+  for (const g of host.querySelectorAll("[data-node-id]")) {
+    const node = byId.get(g.getAttribute("data-node-id"));
+    if (!node) continue;
+    g.style.cursor = "pointer";
+    g.addEventListener("click", () => {
+      if (panMoved) return; // a drag-pan ended here — don't also select
+      host.querySelectorAll(".sel").forEach((n) => n.classList.remove("sel"));
+      g.classList.add("sel");
+      inspect(node);
+    });
+  }
+}
+
+// View state driven by the ⌘K palette's lens commands (#17, moved off the
+// header pickers in #73 — see paletteCommands()). env=null → the declared
+// source graph; env set → the live overlay for that env (needs cloud creds).
+// detail is chant's --detail tier. components (#56) toggles the component-DAG
+// projection (nodes=components, wave-laned, dependsOn edges) in place of the
+// AWS entity graph. With an env picked too, components mode gets its own live
+// status join (#57, per-component AWS reconciliation) instead of the entity
+// overlay — see load()'s endpoint choice. tier/target (M2, #54) are the two
+// new lenses: a picked tier overrides LOOM_TIER, a picked target overrides
+// AWS_ENDPOINT_URL, for every chant shell-out this page's fetches trigger (see
+// lensParams()). stack (#76, follow-up to #71) is a THIRD kind of lens: a
+// multi-stack project's `chant.config.ts` `stacks[]` names an independently-
+// deployed source tree — picking one re-points the graph at that stack's
+// source (chant.ts's `graphPath`), not an env override like tier/target.
+// 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, tier: null, target: null, stack: null, radial: false };
+
+// v0.1.0 preview lock (set from /api/project in initActions): hides the git/PR
+// write ops (Rollback, Sync, Adopt, Run ▾) — the server also 403s them. Local
+// deploy (Apply all / dial), Reset, Bring up, Approve, and reads stay on.
+let previewMode = false;
+
+// The unified "zoom" control (one granularity axis, coarse → fine). Underlying
+// state stays (components, detail); zoom is just the single knob the header
+// exposes, mapping "components" → the wave/component view and composites/
+// resources/attributes → the entity graph at detail 1/2/3. (detail 0 / per-
+// lexicon "stacks" is dropped from the UI — niche; the API still accepts it.)
+// "logical" (#63) is a re-projection, not a granularity stop like the others —
+// a traditional AWS architecture diagram: nested VPC/subnet ⊃ component boxes.
+// region/VPC/subnet boxes with topology nodes only — but it rides the same dial
+// as the coarse "infrastructure overview" the way a traditional AWS diagram sits
+// beside the resource views.
+const ZOOM_OPTS = [
+  ["zoom: components", "components"],
+  ["zoom: logical", "logical"],
+  ["zoom: composites", "composites"],
+  ["zoom: resources", "resources"],
+  ["zoom: attributes", "attributes"],
+  // Below the declaration boundary (#86): the owner-referenced children the
+  // cluster maintains — the Pods under a Deployment. Its own stop rather than a
+  // detail level, because it is a different axis: every tier above shows what
+  // you declared, and this one shows what your declaration produced.
+  ["zoom: runtime", "runtime"],
+];
+const ZOOM_DETAIL = { composites: 1, resources: 2, attributes: 3, runtime: 3 };
+/** Current zoom value from (components, logical, detail). */
+function zoomValue() {
+  if (view.components) return "components";
+  if (view.logical) return "logical";
+  if (view.runtime) return "runtime";
+  return { 1: "composites", 2: "resources", 3: "attributes" }[view.detail] ?? "resources";
+}
+/** Apply a zoom value back onto (components, logical, detail). */
+function applyZoom(z) {
+  view.components = z === "components";
+  view.logical = z === "logical";
+  view.runtime = z === "runtime";
+  if (z !== "components" && z !== "logical") view.detail = ZOOM_DETAIL[z] ?? 2;
+}
+
+// #73 "hide controls, never state": zoom/env/tier/radial used to live in
+// header <select>s; the pickers moved into the ⌘K palette (paletteCommands()
+// below), but the CURRENT value must stay visible without opening it — this
+// is the one place that reads. Called after every render() and once before
+// the first load (initPickers()). stack (#76) joins the strip the same way —
+// only ever truthy on a project that declares `stacks[]` (initPickers seeds
+// `view.stack` from `info.stacks`; a project with none leaves it null), so a
+// single-stack project's strip is unaffected.
+// The zoom picker, back in the header as a control you can see and click.
+//
+// #73 moved the pickers into ⌘K and left the current value on the strip, on the
+// principle "hide controls, never state". That reads well until someone opens
+// behold for the first time: the strip says "zoom: components", it looks like a
+// dropdown because it is a value next to other values, and clicking it does
+// nothing — renderStatusbar() only ever sets textContent. The discoverable path
+// to the single most useful control is a keyboard shortcut hinted by a "⌘K"
+// glyph at the far end of the header.
+//
+// So zoom gets a real <select> and the palette keeps its entry. The other axes
+// stay where #73 put them: zoom is the one you reach for constantly, and one
+// visible control is not the header of selects that issue was about.
+function renderZoomPicker() {
+  // #zoom-slot, top-left after the brand — not #pickers on the far right,
+  // where it sat beside the theme select and read as chrome rather than as the
+  // control. Falls back to #pickers so a static export built from older markup
+  // still gets a picker rather than none.
+  const slot = document.getElementById("zoom-slot") || document.getElementById("pickers");
+  if (!slot) return;
+  let sel = document.getElementById("zoom-picker");
+  if (!sel) {
+    sel = document.createElement("select");
+    sel.id = "zoom-picker";
+    sel.title = "Zoom — components, logical, composites, resources, attributes, runtime (also ⌘K)";
+    sel.addEventListener("change", () => {
+      applyZoom(sel.value);
+      renderStatusbar();
+      load();
+    });
+    // Before the theme picker, which mounts into the same slot at load.
+    slot.insertBefore(sel, slot.firstChild);
+  }
+  const current = zoomValue();
+  // Rebuilt each render because runtime is only meaningful with an env: it
+  // descends below the declaration boundary to owner-referenced children,
+  // which exist in a cluster and never in your source.
+  const opts = ZOOM_OPTS.filter(([, v]) => v !== "runtime" || view.env);
+  const want = opts.map(([label, v]) => `${v}:${label}`).join("|") + "@" + current;
+  if (sel.dataset.built !== want) {
+    sel.innerHTML = "";
+    for (const [label, v] of opts) {
+      const o = document.createElement("option");
+      o.value = v;
+      o.textContent = label;
+      if (v === current) o.selected = true;
+      sel.appendChild(o);
+    }
+    sel.dataset.built = want;
+  }
+  sel.value = current;
+}
+
+function renderStatusbar() {
+  renderZoomPicker();
+  const el = document.getElementById("statusbar");
+  if (!el) return;
+  // The strip looks clickable whether or not it is, so make it act like it:
+  // clicking opens the palette rather than doing nothing. env, stack and tier
+  // live only there, and this is the only affordance pointing at them.
+  if (!el.dataset.clickable) {
+    el.dataset.clickable = "1";
+    el.style.cursor = "pointer";
+    el.title = "env · stack · tier — click, or ⌘K, to change";
+    el.addEventListener("click", () => openPalette());
+  }
+  // No zoom here any more. #73 put the current zoom on the strip because the
+  // control had moved into the palette; with a real picker two slots along,
+  // the same value in both places reads as two pickers, one of which does not
+  // work — which is exactly how it was reported. The strip keeps the axes that
+  // still have no on-screen control.
+  const parts = [view.env ? `env: ${view.env}` : "env: (source)"];
+  if (view.stack) parts.push(`stack: ${view.stack}`);
+  if (axes.tier) parts.push(`tier: ${axes.tier}`);
+  if (view.radial && !view.components && !view.logical) parts.push("radial");
+  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
+  // describes the graph that actually came back. Appended rather than mixed
+  // into `parts` so it can carry its own emphasis without the zoom/env strip
+  // changing shape when there is nothing to say.
+  if (lastNote) {
+    const note = document.createElement("span");
+    note.className = "statusbar-note";
+    note.textContent = " — " + lastNote;
+    el.appendChild(note);
+  }
+}
+
+// The note from the last /api/graph or /api/overlay response (`meta.note`),
+// or null. Set on every load so a level that stops degrading stops explaining
+// itself.
+let lastNote = null;
+
+// The deploy axes as currently displayed in the header (#59 unify, M2 #54
+// lenses) — seeded once from /api/project (server-derived from the process
+// env at launch; see deployAxes() in src/server.ts), then kept in sync with
+// whatever the last /api/graph response actually observed (its `meta.tier`/
+// `meta.target`, since a picked lens can differ from the launch-time default).
+let axes = { tier: null, target: null };
+
+// Query params for the tier/target lenses (M2, #54) — shared by every fetch
+// this page makes, so picking a lens re-parameterizes the component graph,
+// its CI/resources facets, and the reconcile summary all the same way.
+// stack (#76) rides along too — server.ts's `optsFromQuery` parses `?stack=`
+// the same way, but only `graphPath`'s callers (the graph/overlay fetches in
+// load()) actually consult it; the CI/resources/reconcile facets don't take a
+// source path at all, so they ignore an extra `stack=` harmlessly.
+function lensParams(params) {
+  if (view.tier) params.set("tier", view.tier);
+  if (view.target) params.set("target", view.target);
+  if (view.stack) params.set("stack", view.stack);
+  return params;
+}
+
+// CI projection facet (M1.2, #58): the component DAG's GitLab CI reading —
+// component name → {jobName, stage, needs, script}, from `/api/ci` (`chant
+// build --components --generate gitlab`). Loaded once per components-mode
+// load() and cached here so inspect() (fired per click, not per fetch) reads
+// it synchronously. Component-DAG mode only — cleared otherwise.
+let ciByComponent = new Map();
+let ciForge = null; // the forge the pipeline was generated for (#164) — heads the inspect section
+
+async function loadCi() {
+  try {
+    const q = lensParams(new URLSearchParams(view.env ? { env: view.env } : {}));
+    const res = await apiFetch(`/api/ci?${q}`);
+    const j = await res.json();
+    if (!res.ok) throw new Error(j.error || res.statusText);
+    ciByComponent = new Map((j.jobs || []).map((job) => [job.component, job]));
+    ciForge = j.forge || null;
+  } catch {
+    // Non-fatal: the component DAG still renders without the CI facet (e.g. a
+    // served chant predating generate mode) — inspect() just omits the section.
+    ciByComponent = new Map();
+    ciForge = null;
+  }
+}
+
+// Resources facet (#59 unify) — component name -> its AWS resources, from
+// `/api/resources` (src/server.ts documents what this is and isn't: a
+// source-location convention match, not the literal CFN stack — chant's own
+// `groups.byStack` is lexicon-only today, not per-stack). Loaded once per
+// components-mode load(), same caching shape as `ciByComponent`; a click
+// reads it synchronously.
+let resourcesByComponent = {};
+
+async function loadResources() {
+  try {
+    const q = lensParams(new URLSearchParams(view.env ? { env: view.env } : {}));
+    const res = await apiFetch(`/api/resources?${q}`);
+    const j = await res.json();
+    if (!res.ok) throw new Error(j.error || res.statusText);
+    resourcesByComponent = j.byComponent || {};
+  } catch {
+    // Non-fatal, same rationale as loadCi(): the DAG and its other facets
+    // still render without the resources facet.
+    resourcesByComponent = {};
+  }
+}
+
+// The observe → reconcile → apply dial (M2 #54 observe/reconcile, M3 #54
+// apply): where the selected target sits on the lifecycle progression, per
+// the epic's design. `observe` is always live already — it's the
+// component-status view above (render()'s `componentStatus` branch IS
+// observe); clicking the step just switches into it. `reconcile` is a
+// click-to-fetch summary (`/api/reconcile`, a full build + cloud query — on
+// demand, like #27's live diff), cached until the env/tier/target lens
+// changes. `apply` (M3) is a REAL delegated write: click opens a small
+// component/all picker, confirm triggers `POST /api/apply`
+// (`chant run <target> --components --env <env> --progress-json` — behold
+// triggers, chant executes), and the structured wave/phase progress it
+// streams back (see applyProgressReducer in src/apply.ts, broadcast as the
+// `apply` SSE event) renders live below the dial — the primary surface for
+// an apply, not the raw now-line.
+let reconcileCache = null; // last ReconcileSummary for the current env/tier/target, or null
+let applyProgress = null; // last ApplyProgressState (src/apply.ts) for the current env, or null — hydrated from /api/ops on load, then kept live by the `apply` SSE event
+let applyPicker = false; // whether the inline "apply <component|all> →" prompt is open
+let componentChoices = []; // component names for the apply picker — loaded lazily (independent of whether the graph pane is currently in components mode)
+let componentStatusById = {}; // id -> _status ("good"|"accent"|"warn"|"neutral"), populated alongside componentChoices — lets the picker show which stacks are already applied
+
+// How a component's live status reads in the apply picker (and the apply-all
+// summary): a glyph + words, so "which stacks are applied" is legible at a
+// glance rather than a bare name list. Mirrors COMPONENT_STATUS_LABEL's buckets.
+const APPLY_STATUS_TAG = {
+  good: "✓ deployed",
+  accent: "⋯ in progress",
+  warn: "⚠ rolled back / failed",
+  neutral: "○ not deployed",
+};
+function applyOptionLabel(name) {
+  const tag = APPLY_STATUS_TAG[componentStatusById[name]];
+  return tag ? `${name} — ${tag}` : name;
+}
+
+// Reset the dial's per-target caches (reconcile summary, apply picker/progress,
+// component-name list) when the env/tier/target lens changes — all three are
+// scoped to "whatever target is currently picked", so switching targets must
+// not show a stale reconcile count or a finished apply's progress from a
+// DIFFERENT target as if it were current.
+function resetDialCaches() {
+  reconcileCache = null;
+  applyProgress = null;
+  applyPicker = false;
+  componentChoices = [];
+  componentStatusById = {};
+  compositeMembersCache = null;
+  bulkDiffCache = null;
+}
+
+// Composite → member list, for the inspect pane. Derived once from the base
+// (attribute-tier) source graph, where every node carries its `compositeInstance`
+// — then a detail-1 composite node lists what it expands to. Cached per lens
+// (reset in resetDialCaches); structural, so no live/env call needed.
+let compositeMembersCache = null;
+async function getCompositeMembers(instanceId) {
+  if (!compositeMembersCache) {
+    compositeMembersCache = {};
+    try {
+      const q = lensParams(new URLSearchParams({ detail: "3" }));
+      const j = await apiFetch(`/api/graph?${q}`).then((r) => r.json());
+      for (const n of (j.ir && j.ir.nodes) || []) {
+        if (n.compositeInstance) (compositeMembersCache[n.compositeInstance] ||= []).push({ id: n.id, kind: n.kind });
+      }
+    } catch {
+      /* leave the cache empty — the members section shows "(no members found)" */
+    }
+  }
+  return compositeMembersCache[instanceId] || [];
+}
+
+function dialArrow() {
+  const s = document.createElement("span");
+  s.className = "dial-arrow";
+  s.textContent = "→";
+  return s;
+}
+
+function renderDial() {
+  const host = document.getElementById("dial");
+  if (!view.env) {
+    // The dial used to vanish entirely here, with nothing saying why — someone
+    // who launched without --env saw no observe/reconcile/apply path at all.
+    // Say what's missing instead (a static export keeps the old silence: there
+    // is genuinely nothing to offer).
+    host.innerHTML = "";
+    if (staticMode || !environments.length) {
+      host.style.display = "none";
+      return;
+    }
+    host.style.display = "flex";
+    const hint = document.createElement("span");
+    hint.style.cssText = "font-size:11px;color:var(--muted);align-self:center";
+    hint.textContent = "observe → reconcile → apply needs an environment — pick one in ⌘K (env: …)";
+    host.appendChild(hint);
+    // A pipeline run (#163) is env-less — its progress still belongs here.
+    if (applyProgress && applyProgress.waves.length) host.appendChild(renderApplyProgress(applyProgress));
+    return;
+  }
+  host.style.display = "flex";
+  host.innerHTML = "";
+
+  const track = document.createElement("div");
+  track.className = "dial-track";
+
+  const observeBtn = button("observe", "dial-step" + (view.components ? " active" : ""), () => {
+    view.components = true;
+    load();
+  });
+  observeBtn.title = `Live per-component status for ${view.env} (chant components status --live) — the palette this graph paints when "components" is on.`;
+  track.appendChild(observeBtn);
+  track.appendChild(dialArrow());
+
+  // chant#1168 (#1089): `unobserved` is its own count, appended rather than
+  // folded into "pending" — reconcileCache.unobserved is 0 against an older
+  // chant, so this is a no-op suffix until #1168 ships.
+  // chant#1180 (#1077): `runtime` gets the identical treatment — its own
+  // count, 0 against a chant predating it.
+  const reconcileBtn = button(
+    reconcileCache
+      ? `reconcile · ${reconcileCache.total} pending` +
+        (reconcileCache.unobserved ? ` · ${reconcileCache.unobserved} unobserved` : "") +
+        (reconcileCache.runtime ? ` · ${reconcileCache.runtime} runtime` : "")
+      : "reconcile",
+    "dial-step",
+    loadReconcile,
+  );
+  reconcileBtn.title = `Pending change set for ${view.env} (chant lifecycle plan --live, read-only) — click to load.`;
+  track.appendChild(reconcileBtn);
+
+  // Apply is the write step — omitted in a static export (observe + reconcile
+  // above are reads and stay).
+  const applying = applyProgress && applyProgress.status === "running";
+  if (!staticMode) {
+    track.appendChild(dialArrow());
+    const applyBtn = button(
+      applying ? "apply · running…" : "apply",
+      "dial-step" + (applyPicker || applying ? " active" : ""),
+      () => {
+        if (applying) return; // a run is already in flight — its progress is on screen below
+        applyPicker = !applyPicker;
+        if (applyPicker) loadComponentChoices().then(renderDial);
+        renderDial();
+      },
+    );
+    applyBtn.title = `Delegated write: chant run <component|all> --components --env ${view.env} --progress-json — behold triggers, chant executes.`;
+    track.appendChild(applyBtn);
+  }
+
+  host.appendChild(track);
+  if (reconcileCache) host.appendChild(renderReconcileDetail(reconcileCache));
+  if (applyPicker && !applying && !staticMode) host.appendChild(renderApplyPicker());
+  if (applyProgress && applyProgress.waves.length) host.appendChild(renderApplyProgress(applyProgress));
+}
+
+// Apply picker (M3): "which component(s)?" prompt for the dial's apply step —
+// mirrors openRollback's inline select+confirm+cancel shape. Defaults to "all
+// components" (chant's own `run --components all` selector); loadComponentChoices()
+// supplies the individual names regardless of the graph pane's current mode.
+function renderApplyPicker() {
+  const wrap = document.createElement("div");
+  wrap.className = "dial-detail";
+  wrap.style.gap = "6px";
+  const sel = document.createElement("select");
+  sel.style.cssText =
+    "background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-size:12px";
+  sel.add(new Option("all components", "all"));
+  for (const name of componentChoices) sel.add(new Option(applyOptionLabel(name), name));
+  const go = button("Apply →", "", () => {
+    const component = sel.value;
+    const what = component === "all" ? "ALL components" : component;
+    if (!window.confirm(`Apply ${what} to ${view.env}?\nThis is a real write — chant run --components --progress-json.`)) return;
+    applyPicker = false;
+    runApply(component);
+  });
+  const cancel = button("✕", "", () => {
+    applyPicker = false;
+    renderDial();
+  });
+  wrap.append(sel, go, cancel);
+  return wrap;
+}
+
+async function loadComponentChoices() {
+  if (componentChoices.length) return componentChoices;
+  try {
+    const q = lensParams(new URLSearchParams({ components: "1", ...(view.env ? { env: view.env } : {}) }));
+    const res = await apiFetch(`/api/graph?${q}`);
+    const j = await res.json();
+    const nodes = (j.ir && j.ir.nodes ? j.ir.nodes : []).filter((n) => n.kind === "Component");
+    componentChoices = nodes.map((n) => n.id);
+    // Per-component live status for the picker labels — only present when an env
+    // is picked (the status join needs one); source-only graphs leave it blank.
+    componentStatusById = {};
+    for (const n of nodes) if (n.attrs && n.attrs._status) componentStatusById[n.id] = n.attrs._status;
+  } catch {
+    componentChoices = []; // the picker still offers "all components" — just no per-name list
+    componentStatusById = {};
+  }
+  return componentChoices;
+}
+
+// "Apply all" from the header (M3): the discoverable equivalent of Sync when a
+// project has no committed ApplyOp — deploy every component. Uses the current
+// env (kept live by the picker); confirms since it's a real write. The dial's
+// structured progress then renders the run.
+async function confirmApplyAll() {
+  const env = view.env;
+  if (!env) {
+    nowline("✗ apply all: pick an env first (env drives the target)");
+    return;
+  }
+  // Route around Floci #16 (github.com/lex00/floci/issues/16): re-applying an
+  // already-deployed stack collides on its fixed-name resources ("... already
+  // exists") and rolls the stack back — the emulator can't no-op an unchanged
+  // resource on update. So the honest states, from the accurate per-component
+  // live status (the stack-status seam):
+  //   all healthy      -> nothing to apply; re-apply would only break things.
+  //   some undeployed  -> apply is fine for a fresh emulator.
+  //   some rolled-back -> re-apply won't recover them; a reset is the clean path.
+  let deployed = 0;
+  let total = 0;
+  let rolledBack = 0;
+  try {
+    const j = await apiFetch(`/api/graph?components=1&env=${encodeURIComponent(env)}`).then((r) => r.json());
+    const nodes = (j.ir && j.ir.nodes) || [];
+    total = nodes.length;
+    deployed = nodes.filter((n) => n.attrs && n.attrs._status === "good").length;
+    rolledBack = nodes.filter((n) => n.attrs && n.attrs._status === "warn").length;
+  } catch {
+    /* couldn't check — fall through to the plain confirm */
+  }
+  // The Floci #16 story (re-apply collides on the emulator's fixed-name
+  // resources) only exists where applies actually hit Floci. On a k8s/helm
+  // estate a re-apply is the normal sync gesture, and warning about an
+  // emulator the project doesn't use was wrong twice over — the server's
+  // /api/apply pre-flight is gated the same way.
+  const onFloci = lastSubstrates.some((s) => s.name === "floci" && s.status === "up");
+  if (onFloci && total > 0 && deployed === total) {
+    showToast(`✓ nothing to apply — all ${total} components are already deployed & in sync (re-applying would collide on Floci #16)`, true);
+    return;
+  }
+  const brokenNote = onFloci && rolledBack > 0
+    ? `⚠ ${rolledBack} component(s) are rolled back. Re-applying WON'T recover them on the emulator — their fixed-name resources still exist (Floci #16). Use the "Reset" button on the Floci substrate pill — it reboots the emulator and redeploys clean (don't apply after).\n\n`
+    : "";
+  const reapplyNote = onFloci && deployed > 0
+    ? `Note: ${deployed} of ${total} are already deployed and will be re-applied — that can fail on the local emulator (Floci #16).\n\n`
+    : "";
+  if (
+    !window.confirm(
+      `${brokenNote}${reapplyNote}Apply ALL components to ${env}?\nReal write — chant run --components all --env ${env} --progress-json.\nLive progress appears in the dial.`,
+    )
+  )
+    return;
+  runApply("all");
+}
+
+function runApply(component) {
+  const q = new URLSearchParams({ env: view.env, component });
+  fetch(`/api/apply?${q}`, { method: "POST" })
+    .then((r) => r.json())
+    .then((j) => {
+      if (j.error) {
+        showToast(`✗ apply: ${j.error}`, false);
+        nowline("✗ apply: " + j.error);
+      } else {
+        showToast(`▶ applying ${component} → ${view.env} — progress on the dial`, true);
+        nowline(`▶ apply ${component} → ${view.env}`);
+      }
+      renderDial();
+    });
+}
+
+// Structured wave/phase progress (M3): the primary surface for an apply — an
+// ordered list of waves, each showing its components' current phase/step and
+// status, coloured the same way the rest of the SPA colours health (managed=
+// ok, pending=running, degraded=failed, muted=not-yet-reached). Replaces the
+// raw-log-tail now-line as the thing you actually watch during a deploy; the
+// now-line still gets chant's human summary + any non-progress line as a
+// fallback (src/op-runner.ts's apply() only filters OUT recognized
+// RunProgressEvent lines from that channel).
+const APPLY_STATUS_COLOR = { pending: "var(--muted)", running: "var(--pending)", ok: "var(--managed)", failed: "var(--degraded)" };
+
+function renderApplyProgress(state) {
+  const wrap = document.createElement("div");
+  wrap.style.cssText = "display:flex;flex-direction:column;gap:6px;width:100%;margin-top:4px";
+  const summary = document.createElement("div");
+  summary.style.cssText = `font-size:11px;color:${APPLY_STATUS_COLOR[state.status] || "var(--muted)"}`;
+  // A pipeline run (#163) reuses this whole panel — same shape, different
+  // executor — and says so instead of claiming to be an apply.
+  summary.textContent = `${state.kind || "apply"}: ${state.status}`;
+  wrap.appendChild(summary);
+  for (const w of state.waves) {
+    const row = document.createElement("div");
+    row.style.cssText = "display:flex;align-items:center;gap:8px;flex-wrap:wrap";
+    const label = document.createElement("span");
+    label.style.cssText = `font-size:11px;color:${APPLY_STATUS_COLOR[w.status] || "var(--muted)"};min-width:52px`;
+    label.textContent = `wave ${w.wave}`;
+    row.appendChild(label);
+    for (const cname of w.components) {
+      const c = (state.components || []).find((x) => x.component === cname) || { status: "pending" };
+      const color = APPLY_STATUS_COLOR[c.status] || "var(--muted)";
+      const chip = document.createElement("span");
+      chip.style.cssText = `border:1px solid ${color};color:${color};border-radius:6px;padding:2px 8px;font-size:11px`;
+      const detail = [c.phase, c.step].filter(Boolean).join(" · ");
+      chip.textContent = `${cname}${detail ? " · " + detail : ""} (${c.status})`;
+      if (c.error) chip.title = c.error;
+      row.appendChild(chip);
+    }
+    wrap.appendChild(row);
+  }
+  return wrap;
+}
+
+function renderReconcileDetail(r) {
+  const wrap = document.createElement("div");
+  wrap.className = "dial-detail";
+  const rows = Object.entries(r.byComponent).sort((a, b) => b[1] - a[1]);
+  // chant#1168 (#1089): `unobserved` is its own category — a plan that's ALL
+  // unobserved (nothing pending, nothing uncorrelated) must not read as
+  // "no pending changes", which would claim everything's confirmed in sync.
+  const hasUnobserved = !!r.unobserved;
+  // chant#1180 (#1077): `runtime` gets the identical treatment.
+  const hasRuntime = !!r.runtime;
+  if (!rows.length && !r.uncorrelated && !hasUnobserved && !hasRuntime) {
+    wrap.textContent = "no pending changes";
+    return wrap;
+  }
+  for (const [component, count] of rows) {
+    const span = document.createElement("span");
+    span.textContent = `${component}: ${count}`;
+    wrap.appendChild(span);
+  }
+  if (r.uncorrelated) {
+    const span = document.createElement("span");
+    span.textContent = `${r.uncorrelated} uncorrelated`;
+    span.title = "Pending changes that couldn't be mapped to a component by source location.";
+    wrap.appendChild(span);
+  }
+  if (hasUnobserved) {
+    const span = document.createElement("span");
+    span.style.color = "var(--muted)";
+    span.textContent = `${r.unobserved} unobserved`;
+    span.title = "Declared entities chant could not read live state for — not a pending change, not confirmed in sync.";
+    wrap.appendChild(span);
+  }
+  if (hasRuntime) {
+    const span = document.createElement("span");
+    span.style.color = "var(--runtime)";
+    span.textContent = `${r.runtime} runtime`;
+    span.title = "Live, undeclared resources whose owner chain reaches a declared entity — expected runtime, not a pending change.";
+    wrap.appendChild(span);
+  }
+  return wrap;
+}
+
+async function loadReconcile() {
+  try {
+    const q = lensParams(new URLSearchParams({ env: view.env }));
+    const res = await apiFetch(`/api/reconcile?${q}`);
+    const j = await res.json();
+    // #72: the structured {error, code, remedy} src/server.ts's errorResponse
+    // now sends for every classified failure (tier included — `error` already
+    // carries the full tier-scoped message, replacing the old `tierNote`).
+    if (!res.ok) throw new Error(j.error || res.statusText);
+    reconcileCache = j;
+    renderDial();
+  } catch (e) {
+    nowline("✗ reconcile: " + e.message);
+  }
+}
+
+// Edge hover-highlight (helps trace one edge through an overlapping bundle — see
+// index.html's `.pin-edge-line` rules). pinhole already paints a fat transparent
+// hit-path per edge, so the CSS `:hover` does the visual work; this adds two
+// things CSS can't: raise the hovered edge to the top of the paint order (SVG has
+// no z-index) so it's not buried, and light up every edge touching a hovered node
+// (the `.edge-hi` class) so hovering a card traces all its connections.
+// Human-readable "why does this edge exist" from the IR edge's `viaAttr`
+// (src/logical.ts tags them). Shown as a native SVG <title> tooltip on hover;
+// the value also drives a dashed style for data-dependency links (index.html).
+const EDGE_REASON = {
+  "security-group ingress": "security-group ingress — traffic is allowed here",
+  "data dependency": "data dependency — reads/uses this store",
+};
+function wireEdgeHighlight(svgEl, ir) {
+  const edges = [...svgEl.querySelectorAll("g[data-edge-from]")];
+  if (!edges.length) return;
+  // Reason per edge, keyed by from|to (and its reverse, since pinhole may paint
+  // an edge in either direction relative to the IR).
+  const viaOf = new Map();
+  for (const e of ir.edges || []) {
+    if (!e.viaAttr) continue;
+    viaOf.set(`${e.from}|${e.to}`, e.viaAttr);
+    viaOf.set(`${e.to}|${e.from}`, e.viaAttr);
+  }
+  for (const g of edges) {
+    const from = g.getAttribute("data-edge-from");
+    const to = g.getAttribute("data-edge-to");
+    const via = viaOf.get(`${from}|${to}`);
+    if (via) g.setAttribute("data-edge-via", via); // drives the dashed style
+    const title = document.createElementNS(SVGNS, "title");
+    title.textContent = `${from} → ${to}${via ? "\n" + (EDGE_REASON[via] || via) : ""}`;
+    g.insertBefore(title, g.firstChild);
+  }
+  const raise = (g) => g.parentNode && g.parentNode.appendChild(g);
+  // Delegated: raise whichever edge the pointer is over (its hit-path catches it).
+  svgEl.addEventListener("mouseover", (e) => {
+    const g = e.target.closest && e.target.closest("g[data-edge-from]");
+    if (g) raise(g);
+  });
+  // Hovering a node lights (and raises) every edge on it.
+  for (const card of svgEl.querySelectorAll("[data-node-id]")) {
+    const id = card.getAttribute("data-node-id");
+    const touching = edges.filter((g) => g.getAttribute("data-edge-from") === id || g.getAttribute("data-edge-to") === id);
+    if (!touching.length) continue;
+    card.addEventListener("mouseenter", () => touching.forEach((g) => (g.classList.add("edge-hi"), raise(g))));
+    card.addEventListener("mouseleave", () => touching.forEach((g) => g.classList.remove("edge-hi")));
+  }
+}
+
+// GitLab's tanuki, one filled silhouette (the widely-used single-path mark),
+// scaled into a small badge. Self-contained (no external URL) so it survives the
+// static export + the CSP.
+const GITLAB_TANUKI =
+  "M23.6004 9.5927l-.0337-.0862L20.3.9814a.851.851 0 00-.3362-.405.8748.8748 0 00-.9997.0539.8748.8748 0 00-.29.4399l-2.2055 6.748H7.5375l-2.2055-6.748a.8573.8573 0 00-.29-.4412.8748.8748 0 00-.9997-.0537.8585.8585 0 00-.3362.405L.4332 9.5065l-.0325.0862a6.0657 6.0657 0 002.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 001.2197 0l1.4995-1.1321 2.462-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 002.0094-7.003z";
+const SVGNS = "http://www.w3.org/2000/svg";
+
+// Stamp a GitLab tanuki in the top-right corner of each wave lane — a visual cue
+// that the waves ARE the GitLab CI pipeline's stages (job `stage` = `wave-N`).
+// Post-processes the inlined SVG: each wave box is a `<rect>` immediately
+// followed by its `<text>wave-N</text>` title, so the rect gives the corner.
+function addGitlabWaveBadges(svgEl) {
+  const SIZE = 17;
+  for (const text of svgEl.querySelectorAll("text")) {
+    if (!/^wave-/i.test((text.textContent || "").trim())) continue;
+    const rect = text.previousElementSibling;
+    if (!rect || rect.tagName.toLowerCase() !== "rect") continue;
+    const rx = parseFloat(rect.getAttribute("x"));
+    const ry = parseFloat(rect.getAttribute("y"));
+    const rw = parseFloat(rect.getAttribute("width"));
+    const g = document.createElementNS(SVGNS, "g");
+    g.setAttribute("class", "gitlab-wave-badge");
+    g.setAttribute("transform", `translate(${rx + rw - SIZE - 12}, ${ry + 10}) scale(${SIZE / 24})`);
+    const path = document.createElementNS(SVGNS, "path");
+    path.setAttribute("d", GITLAB_TANUKI);
+    path.setAttribute("fill", "#FC6D26"); // GitLab brand orange
+    const title = document.createElementNS(SVGNS, "title");
+    title.textContent = "This wave is a GitLab CI stage (chant → GitLab pipeline)";
+    g.append(title, path);
+    rect.parentNode.insertBefore(g, text);
+  }
+}
+
+// Paint a fetched graph: the SVG, the meta line (with a drift summary in overlay
+// mode), the legend, and click-inspect wiring. Shared by load() and refresh().
+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;
+  const overlay = m.mode === "overlay";
+  // Logical/architecture lens (#63): its own mode, but when an env is picked the
+  // projected nodes still carry the drift `_status`, so it reads as a drift view
+  // (same summary + legend as the entity overlay).
+  const logical = m.mode === "logical";
+  const drift = overlay || (logical && !!m.env);
+  // M1.1 (#57): the component DAG's live per-component AWS status — a
+  // different join than the entity overlay (see server's /api/graph), so it
+  // gets its own summary + legend rather than reusing `overlay`'s.
+  const componentStatus = m.mode === "component-status";
+  let tail = ` · ${ir.edges.length} edges`;
+  if (drift) {
+    // Summarise drift so "everything's blue" reads as "N pending". `neutral`
+    // (chant#1168, #1089) is its own bucket — a declared node chant couldn't
+    // read live state for is neither managed, foreign, nor (confirmed)
+    // pending, and folding it into any of those would misreport a hole in
+    // the observation as a verdict. Additive: a chant predating #1168 never
+    // tags a node `neutral` here, so `c.neutral` stays 0 against an older chant.
+    // `runtime` (chant#1180, #1077) is its own bucket too — a live,
+    // undeclared node whose owner chain reaches a declared entity is neither
+    // managed, foreign, nor pending; folding it into any of those would
+    // misreport expected runtime as drift or as a proposed create. Additive
+    // the same way — `c.runtime` stays 0 against a chant predating #1180.
+    const c = { good: 0, warn: 0, accent: 0, neutral: 0, runtime: 0 };
+    for (const n of ir.nodes) {
+      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`;
+    if (c.runtime) tail += ` · ${c.runtime} runtime`;
+    // 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`;
+  } else if (componentStatus) {
+    // M2 (#54): 4 buckets now (good/accent/warn/neutral) — see
+    // COMPONENT_STATUS_LABEL and src/component-status.ts's palette doc comment.
+    const c = { good: 0, accent: 0, warn: 0, neutral: 0 };
+    for (const n of ir.nodes) {
+      const s = n.attrs && n.attrs._status;
+      if (s in c) c[s]++;
+    }
+    tail = ` · ${c.good} healthy · ${c.accent} in progress · ${c.warn} rollback/failed · ${c.neutral} not deployed`;
+  }
+  // Multi-estate (#31): note the composed project count; the graph draws one box per project.
+  const scope = m.estate ? `estate of ${m.estate} projects` : 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
+  // from /api/project when a route doesn't echo them, e.g. /api/overlay).
+  if (m.tier !== undefined) axes.tier = m.tier;
+  if (m.target !== undefined) axes.target = m.target;
+  const axesTail = `${axes.tier ? " · tier " + axes.tier : ""}${axes.target ? " · target " + axes.target : ""}`;
+  document.getElementById("meta").textContent =
+    `${scope}${m.env ? " · env " + m.env : ""}${axesTail}${overlay ? " · overlay" : ""}${logical ? " · logical" : ""}${m.components ? " · components" : ""}${componentStatus ? " · live status" : ""} · ${ir.nodes.length} nodes${tail}`;
+  document.getElementById("legend").style.display = drift ? "flex" : "none";
+  document.getElementById("component-legend").style.display = componentStatus ? "flex" : "none";
+  // Keep the persistent state strip in sync — zoom/env/tier/radial are picked
+  // via the ⌘K palette now (#73), but stay visible here regardless (radial
+  // only applies to the entity zooms; renderStatusbar() drops it for
+  // components/logical, both of which lay themselves out: waves / nested
+  // architecture boxes).
+  renderStatusbar();
+  const g = document.getElementById("graph");
+  // Ghostty theming (#62): strip pinhole's baked-in `:root{--pin-*}` defaults from the
+  // inlined SVG so its var(--pin-*) fills resolve from behold's live documentElement tokens
+  // (theme.js applyTheme), not the frozen dark palette. Without this, every theme renders
+  // green — the SVG's own :root shadows behold's override within the graph subtree.
+  g.innerHTML = svg.replace(/:root\s*\{[^{}]*--pin-[^{}]*\}/g, "");
+  recolorNodesByCategory(ir); // #62: category-hued fills from the theme's full palette
+  const svgEl = g.querySelector("svg");
+  if (svgEl) {
+    // Drop pinhole's fixed pixel size so the viewBox drives sizing; behold then
+    // pans/zooms by mutating the viewBox (setupGraphViewBox + the wheel/drag
+    // handlers). Starts fit-to-pane, then pinch / ⌘+scroll zooms, drag pans.
+    svgEl.removeAttribute("width");
+    svgEl.removeAttribute("height");
+    svgEl.setAttribute("preserveAspectRatio", "xMidYMid meet");
+    setupGraphViewBox(svgEl);
+    wireEdgeHighlight(svgEl, ir);
+    // Mark each wave lane as a GitLab CI stage when the CI projection is loaded
+    // (components view only) — waves ARE the pipeline's stages (`chant build
+    // --components --generate gitlab`, see loadCi / #58).
+    if (view.components && ciByComponent.size) addGitlabWaveBadges(svgEl);
+  }
+  ensureZoomControls(g);
+  ensureBackToInfra(g);
+  wire(ir);
+  if (view.radial && !view.components && !view.logical) addRadialLabels(ir);
+  renderDial();
+}
+
+// The radial layout clusters each component into an angular wedge, but nothing
+// says which wedge is which. Label each: read every node's position from its
+// `data-node-id` transform (SVG/viewBox coords, so labels pan/zoom with the
+// graph), group by component, and drop the component name just outside its
+// wedge at its mean angle. Cue only — pointer-events off so clicks pass through.
+function radialGroupOf(node) {
+  const p = (node.sourceLoc?.file || "").split("/");
+  if (p[0] === "src" && p[1] === "examples") return "examples";
+  if (p[0] === "src" && p.length >= 3) return p[1];
+  return node.lexicon || "other";
+}
+function addRadialLabels(ir) {
+  const svg = document.querySelector("#graph svg");
+  if (!svg) return;
+  const groupOf = new Map(ir.nodes.map((n) => [n.id, radialGroupOf(n)]));
+  const pos = new Map();
+  for (const g of svg.querySelectorAll("[data-node-id]")) {
+    const m = (g.getAttribute("transform") || "").match(/translate\(\s*([-\d.]+)[\s,]+([-\d.]+)/);
+    if (m) pos.set(g.getAttribute("data-node-id"), { x: +m[1], y: +m[2] });
+  }
+  if (pos.size < 2) return;
+  let cx = 0, cy = 0;
+  pos.forEach((p) => { cx += p.x; cy += p.y; });
+  cx /= pos.size; cy /= pos.size;
+  const groups = new Map(); // key -> {sx,sy,n,maxR}
+  pos.forEach((p, id) => {
+    const k = groupOf.get(id);
+    if (!k) return;
+    const dx = p.x - cx, dy = p.y - cy;
+    const g = groups.get(k) || { sx: 0, sy: 0, n: 0, maxR: 0 };
+    g.sx += dx; g.sy += dy; g.n++; g.maxR = Math.max(g.maxR, Math.hypot(dx, dy));
+    groups.set(k, g);
+  });
+  const NS = "http://www.w3.org/2000/svg";
+  const layer = document.createElementNS(NS, "g");
+  layer.setAttribute("id", "radial-labels");
+  layer.setAttribute("pointer-events", "none");
+  const vb = (svg.getAttribute("viewBox") || "0 0 1000 1000").split(/\s+/).map(Number);
+  const fontSize = Math.max(18, Math.round(vb[2] / 60));
+  groups.forEach((g, key) => {
+    const ang = Math.atan2(g.sy, g.sx);
+    const r = g.maxR + fontSize * 2.2;
+    const x = cx + r * Math.cos(ang), y = cy + r * Math.sin(ang);
+    const t = document.createElementNS(NS, "text");
+    t.setAttribute("x", x);
+    t.setAttribute("y", y);
+    t.setAttribute("text-anchor", Math.abs(Math.cos(ang)) < 0.4 ? "middle" : Math.cos(ang) < 0 ? "end" : "start");
+    t.setAttribute("dominant-baseline", "middle");
+    t.setAttribute("fill", "var(--fg)");
+    t.setAttribute("opacity", "0.72");
+    t.setAttribute("font-size", String(fontSize));
+    t.setAttribute("font-weight", "700");
+    t.textContent = key;
+    layer.appendChild(t);
+  });
+  svg.appendChild(layer);
+}
+
+// When observe (or the zoom picker) drops you into the components view, float a
+// "zoom in ⤢" link on the graph itself — the exit where the eye already is, not
+// buried in the toolbar. Zooms one step finer (components → resources). Shown
+// only in the components view.
+function ensureBackToInfra(host) {
+  let link = document.getElementById("back-to-infra");
+  if (!link) {
+    link = document.createElement("button");
+    link.id = "back-to-infra";
+    link.textContent = "zoom in ⤢ resources";
+    link.title = "Zoom finer — from components to the resource graph.";
+    link.addEventListener("click", (e) => {
+      e.stopPropagation();
+      applyZoom("resources");
+      load();
+    });
+    host.appendChild(link);
+  }
+  link.style.display = view.components ? "" : "none";
+}
+
+// --- Graph zoom/pan, driven by the SVG viewBox (works for a 7-node DAG or a
+// 180-node estate alike: fit-to-pane by default, then zoom IN to read). Pinch
+// or ⌘/Ctrl+scroll zooms at the cursor; drag pans; "⤢ fit" resets. ---
+let vb = null; // current viewBox [x,y,w,h]
+let vbInit = null; // the graph's natural viewBox (fit)
+let panMoved = false; // true once a drag moved — suppresses the node click on release
+let zoomWired = false;
+
+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();
+  } else {
+    vbInit = vb = null;
+  }
+}
+function currentSvg() {
+  return document.querySelector("#graph svg");
+}
+function applyVB() {
+  const s = currentSvg();
+  if (s && vb) s.setAttribute("viewBox", vb.join(" "));
+}
+function fitGraph() {
+  if (vbInit) {
+    vb = vbInit.slice();
+    applyVB();
+  }
+}
+function ensureZoomControls(host) {
+  let btn = document.getElementById("zoom-toggle");
+  if (!btn || btn.parentElement !== host) {
+    btn = document.createElement("button");
+    btn.id = "zoom-toggle";
+    btn.textContent = "⤢ fit";
+    btn.title = "Reset to fit. Pinch or ⌘/Ctrl+scroll to zoom at the cursor; drag to pan.";
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      fitGraph();
+    });
+    host.appendChild(btn);
+  }
+  if (zoomWired) return;
+  zoomWired = true;
+  host.addEventListener(
+    "wheel",
+    (e) => {
+      // Trackpad pinch fires wheel+ctrlKey; ⌘/Ctrl+scroll is the explicit gesture.
+      // Plain scroll is left alone (nothing to scroll when fit).
+      if (!vb || !(e.ctrlKey || e.metaKey)) return;
+      e.preventDefault();
+      const s = currentSvg();
+      if (!s) return;
+      const r = s.getBoundingClientRect();
+      const cx = vb[0] + ((e.clientX - r.left) / r.width) * vb[2];
+      const cy = vb[1] + ((e.clientY - r.top) / r.height) * vb[3];
+      const f = Math.exp(e.deltaY * 0.0025); // scroll up → f<1 → zoom in
+      const minW = vbInit[2] / 60;
+      const maxW = vbInit[2] * 3;
+      const nw = Math.min(maxW, Math.max(minW, vb[2] * f));
+      const nh = nw * (vb[3] / vb[2]);
+      vb[0] = cx - ((cx - vb[0]) * nw) / vb[2];
+      vb[1] = cy - ((cy - vb[1]) * nh) / vb[3];
+      vb[2] = nw;
+      vb[3] = nh;
+      applyVB();
+    },
+    { passive: false },
+  );
+  let drag = false;
+  let px = 0;
+  let py = 0;
+  host.addEventListener("mousedown", (e) => {
+    if (!vb) return;
+    drag = true;
+    panMoved = false;
+    px = e.clientX;
+    py = e.clientY;
+  });
+  window.addEventListener("mousemove", (e) => {
+    if (!drag || !vb) return;
+    const s = currentSvg();
+    if (!s) return;
+    const r = s.getBoundingClientRect();
+    const dx = e.clientX - px;
+    const dy = e.clientY - py;
+    if (Math.abs(dx) + Math.abs(dy) > 3) {
+      panMoved = true;
+      s.classList.add("grabbing");
+    }
+    vb[0] -= (dx / r.width) * vb[2];
+    vb[1] -= (dy / r.height) * vb[3];
+    px = e.clientX;
+    py = e.clientY;
+    applyVB();
+  });
+  window.addEventListener("mouseup", () => {
+    drag = false;
+    const s = currentSvg();
+    if (s) s.classList.remove("grabbing");
+  });
+}
+
+// Precondition-failure codes (#72) → a short, human title for the entry/error
+// screen below. Mirrors every `code` a read route's structured error can
+// carry (src/server.ts RouteErrorCode: chant.ts's lint/not-installed/eval,
+// plus "tier" — a picked tier that needs creds this host lacks, M2 #54).
+const PRECONDITION_TITLE = {
+  lint: "This project doesn't pass chant lint",
+  "not-installed": "This project isn't installed",
+  tier: "This tier needs credentials",
+  eval: "chant couldn't evaluate this project",
+};
+
+// A precondition failure — the lint gate, a not-installed/no-typegen project,
+// or a tier that needs credentials (#72) — gets a readable card with chant's
+// own message and a suggested remedy, not a blank canvas or a raw stack
+// trace. Generalizes what used to be a tier-only `tierNote` (the server now
+// sends the same structured {error, code, remedy} for every classified
+// failure — src/server.ts errorResponse). Text content only (never
+// innerHTML) — `error` embeds chant's own stderr verbatim.
+function renderPreconditionError(body) {
+  const host = document.getElementById("graph");
+  host.innerHTML = "";
+  const card = document.createElement("div");
+  card.className = "precondition-error";
+  const title = document.createElement("div");
+  title.className = "precondition-error-title";
+  title.textContent = PRECONDITION_TITLE[body.code] || "chant couldn't evaluate this project";
+  card.appendChild(title);
+  if (body.error) {
+    const message = document.createElement("div");
+    message.className = "precondition-error-message";
+    message.textContent = body.error;
+    card.appendChild(message);
+  }
+  if (body.remedy) {
+    const remedy = document.createElement("div");
+    remedy.className = "precondition-error-remedy";
+    remedy.textContent = body.remedy;
+    card.appendChild(remedy);
+  }
+  host.appendChild(card);
+  document.getElementById("legend").style.display = "none";
+  document.getElementById("component-legend").style.display = "none";
+}
+
+// Fetch the current view (source graph, or the picked env's live overlay).
+async function load(opts = {}) {
+  const meta = document.getElementById("meta");
+  // A background settle re-pull (post-apply) shouldn't flash the meta/overlay.
+  if (!opts.quiet) {
+    meta.textContent = view.env ? `loading overlay for ${view.env}…` : "loading…";
+    // A view change shells chant live (seconds on a slow box) — cover the UI with
+    // a blocking overlay so clicks can't queue a second pull mid-flight.
+    showLoading(`loading ${zoomValue()}${view.env ? " · " + view.env : ""}…`);
+  }
+  try {
+    const q = lensParams(new URLSearchParams({ detail: String(view.detail) }));
+    let endpoint = "/api/graph";
+    if (view.components) {
+      // M1.1 (#57): the component DAG stays on /api/graph even with an env
+      // picked — the server joins live per-component status onto it there
+      // (component name -> CFN stack), instead of routing to /api/overlay's
+      // cross-substrate entity overlay, which components never use.
+      q.set("components", "1");
+      if (view.env) q.set("env", view.env);
+    } else if (view.logical) {
+      // Logical/architecture lens (#63): the server re-projects at detail 3
+      // regardless of the dial, so detail/radial don't apply. With an env it
+      // projects the live overlay (drift colours preserved), else the source.
+      q.set("logical", "1");
+      if (view.env) {
+        endpoint = "/api/overlay";
+        q.set("env", view.env);
+      }
+    } else if (view.env) {
+      endpoint = "/api/overlay";
+      q.set("env", view.env);
+      // 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");
+    }
+    // Radial layout (entity view only) — curl the wide DAG onto concentric rings.
+    if (view.radial && !view.components && !view.logical) q.set("radial", "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
+    // a component node's inspect panel shows all of them at once, not just one.
+    if (view.components) {
+      await Promise.all([loadCi(), loadResources()]);
+    } else {
+      ciByComponent = new Map();
+      resourcesByComponent = {};
+    }
+    const res = await apiFetch(`${endpoint}?${q}`);
+    const body = await res.json();
+    if (!res.ok) {
+      // #72: a classified precondition failure (lint gate, not installed, a
+      // tier that needs credentials) gets the calmer entry/error card instead
+      // of the generic red error box — see renderPreconditionError().
+      if (body.code) {
+        renderPreconditionError(body);
+        meta.textContent = body.code === "tier" ? `tier ${view.tier} unavailable here` : "error";
+        renderDial();
+        return;
+      }
+      throw new Error(body.error || res.statusText);
+    }
+    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) {
+      document.getElementById("graph").innerHTML = `<div class="err">graph failed: ${err.message}</div>`;
+      meta.textContent = "error";
+    }
+  } finally {
+    if (!opts.quiet) hideLoading();
+  }
+}
+
+// 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.
+async function refresh() {
+  const meta = document.getElementById("meta");
+  const prev = meta.textContent;
+  meta.textContent = "refreshing…";
+  showLoading("refreshing live state…");
+  try {
+    // Carry the active zoom's runtime flag so a refresh from the resources
+    // tier doesn't come back wearing the runtime tier's Pods (#144).
+    const runtime = zoomValue() === "runtime" ? "&runtime=1" : "";
+    const q = view.env ? `?env=${encodeURIComponent(view.env)}${runtime}` : "";
+    const res = await fetch(`/api/refresh${q}`, { method: "POST" });
+    if (!res.ok) throw new Error((await res.json()).error || res.statusText);
+    const { ir, svg, meta: m, captured } = await res.json();
+    render(ir, svg, m);
+    nowline(captured ? "↻ refreshed — new lanes frame" : "↻ refreshed — no change");
+  } catch (err) {
+    meta.textContent = prev;
+    nowline("✗ refresh: " + err.message);
+  } finally {
+    hideLoading();
+  }
+}
+
+// The env/tier/target/stack lenses (M2 #54; stack #76) — used to be header
+// <select>s; #73 moved picking them into the ⌘K palette (paletteCommands()
+// reads these lists), so they're module-level now instead of local to the
+// picker-building closure that used to render them. Populated once in
+// initPickers().
+let environments = [];
+let tiers = [];
+let targets = [];
+let stacks = [];
+
+// Fetch the project once, seed view/axes + the lens lists above, then do the
+// first load. previously also built the header's env/zoom/radial/tier/target
+// controls; those are now ⌘K palette commands (#73) — renderStatusbar() is
+// what keeps their CURRENT value visible without opening the palette.
+async function initPickers() {
+  const info = await apiFetch("/api/project")
+    .then((r) => r.json())
+    .catch(() => ({ environments: [], currentEnv: null }));
+  view.env = info.currentEnv || null;
+  view.tier = info.tier || null;
+  view.target = (info.targets && info.targets[0] && info.targets[0].endpoint) || null;
+  // The stack picker's default (#76, design: "default = the FIRST stack when
+  // the project declares stacks[] and none is selected") — mirrors `target`
+  // above, which defaults to its own first option the same way. `info.stacks`
+  // is only present at all when `chant.config.ts` declares `stacks[]` (see
+  // server.ts's `/api/project`, gated on `info.stacks?.length`), so a project
+  // with none leaves `view.stack` (and the picker + status tag) null.
+  stacks = info.stacks || [];
+  view.stack = stacks[0] || null;
+  axes = { tier: info.tier || null, target: info.target || null };
+  environments = info.environments || [];
+  tiers = info.tiers || [];
+  targets = info.targets || [];
+  renderStatusbar();
+  load();
+}
+initPickers();
+
+// Live updates (#3): re-pull when the server signals the served source changed.
+// EventSource reconnects on its own if the server restarts.
+// 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));
+}
+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 strip (M5, #54): is each substrate the project needs
+// actually up? Poll /api/substrates, render status pills — pure state (#73:
+// the "Bring up" / "Reset" affordances that used to sit inside each pill moved
+// into the ⌘K palette; see paletteCommands()'s use of lastSubstrates below).
+async function loadSubstrates() {
+  try {
+    const { substrates } = await apiFetch("/api/substrates").then((r) => r.json());
+    renderSubstrates(substrates || []);
+  } catch {
+    /* transient — leave whatever's shown */
+  }
+}
+
+// The last substrates list — read by paletteCommands() to build "Bring up
+// <label>" / "Reset local emulator" entries with the same gating renderSubstrates()
+// used to apply to its now-removed inline buttons.
+let lastSubstrates = [];
+
+function renderSubstrates(subs) {
+  lastSubstrates = subs;
+  const host = document.getElementById("substrates");
+  if (!subs.length) {
+    host.style.display = "none";
+    return;
+  }
+  host.style.display = "flex";
+  host.innerHTML = "";
+  const lbl = document.createElement("span");
+  lbl.className = "label";
+  lbl.textContent = "substrates:";
+  host.appendChild(lbl);
+  for (const s of subs) {
+    const pill = document.createElement("span");
+    pill.className = `sub ${s.status}`;
+    pill.title = s.bringUp || s.name === "floci" ? `${s.detail} (⌘K for actions)` : s.detail;
+    const dot = document.createElement("span");
+    dot.className = "dot";
+    pill.appendChild(dot);
+    const name = document.createElement("span");
+    name.textContent = s.label;
+    pill.appendChild(name);
+    host.appendChild(pill);
+  }
+}
+
+function resetLocal() {
+  if (
+    !window.confirm(
+      "Reset the local emulator?\nRuns local-down + local-up: wipes every stack, reboots the emulator, and redeploys all components clean.\nThis is the recovery for rolled-back stacks (Floci #16) — do NOT apply afterward (that re-apply is what collides).\n\nOutput streams in the log below; takes a few minutes.",
+    )
+  )
+    return;
+  nowline("▶ resetting local emulator (local-down + local-up, redeploys clean) …");
+  fetch("/api/local/reset", { method: "POST" })
+    .then((r) => r.json())
+    .then((j) => nowline(j.error ? "✗ " + j.error : `▶ reset: ${j.ran} — reboots + redeploys; watch the log, no apply needed`))
+    .catch((e) => nowline("✗ reset: " + e.message));
+}
+
+function bringUpSubstrate(s) {
+  if (
+    !window.confirm(
+      `Bring up ${s.label}?\nRuns: ${s.bringUp.cmd} ${s.bringUp.args.join(" ")}\nOutput streams in the log below — this can take a minute.`,
+    )
+  )
+    return;
+  nowline(`▶ bringing up ${s.label} …`);
+  fetch(`/api/substrates/${encodeURIComponent(s.name)}/up`, { method: "POST" })
+    .then((r) => r.json())
+    .then((j) => nowline(j.error ? "✗ " + j.error : `▶ ${s.label}: ${j.ran}`))
+    .catch((e) => nowline("✗ bring up: " + e.message));
+}
+
+loadSubstrates();
+// Poll readiness so pills update as things come up on their own (Docker
+// starting, a bring-up provisioning) without needing a `changed` event.
+setInterval(loadSubstrates, 5000);
+
+// Delegated writes (#7 Sync / #8 Adopt). behold never mutates — these buttons
+// trigger the project's committed Ops on the executor; the now-line streams phases.
+// A blocking load overlay (#slow-box): a live view change shells chant and can
+// take seconds. Cover the whole app with a scrim + spinner so a stray click
+// 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;
+function showLoading(msg) {
+  loadingDepth++;
+  const o = document.getElementById("loading-overlay");
+  if (!o) return;
+  document.getElementById("loading-msg").textContent = msg || "loading…";
+  o.hidden = false;
+}
+function hideLoading() {
+  loadingDepth = Math.max(0, loadingDepth - 1);
+  if (loadingDepth > 0) return;
+  const o = document.getElementById("loading-overlay");
+  if (o) o.hidden = true;
+}
+
+function nowline(line) {
+  const p = document.getElementById("nowline");
+  p.style.display = "block";
+  const d = document.createElement("div");
+  d.textContent = line;
+  p.appendChild(d);
+  p.scrollTop = p.scrollHeight;
+}
+events.addEventListener("op", (e) => nowline(e.data));
+
+// Transient toast for action feedback. The now-line is a bottom log pane that
+// is display:none until something writes to it and may be scrolled out of
+// view — an error that only lands there after the palette closed is an error
+// nobody sees. Errors get BOTH: the toast for now, the now-line for the
+// record. Auto-dismisses; click to dismiss sooner.
+function showToast(msg, ok) {
+  let host = document.getElementById("toasts");
+  if (!host) {
+    host = document.createElement("div");
+    host.id = "toasts";
+    host.style.cssText = "position:fixed;top:52px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:60;max-width:420px";
+    document.body.appendChild(host);
+  }
+  const t = document.createElement("div");
+  const color = ok ? "var(--managed)" : "var(--degraded)";
+  t.style.cssText = `background:var(--panel);color:var(--fg);border:1px solid ${color};border-left:4px solid ${color};border-radius:8px;padding:8px 12px;font-size:12px;box-shadow:0 4px 16px rgba(0,0,0,.35);cursor:pointer;white-space:pre-wrap`;
+  t.textContent = msg;
+  t.onclick = () => t.remove();
+  host.appendChild(t);
+  setTimeout(() => t.remove(), ok ? 5000 : 10000);
+}
+
+// Structured apply progress (M3, #54): the server broadcasts the full
+// ApplyProgressState (src/apply.ts) after every recognized RunProgressEvent —
+// see src/op-runner.ts's apply(). Re-render the dial's progress panel each
+// time; renderDial() is cheap (rebuilds a small DOM subtree) so no diffing.
+events.addEventListener("apply", (e) => {
+  try {
+    applyProgress = JSON.parse(e.data);
+  } catch {
+    return;
+  }
+  renderDial();
+});
+
+function button(label, cls, onClick) {
+  const b = document.createElement("button");
+  b.textContent = label;
+  if (cls) b.className = cls;
+  b.addEventListener("click", onClick);
+  return b;
+}
+function runOp(name) {
+  fetch(`/api/ops/${encodeURIComponent(name)}/run`, { method: "POST" })
+    .then((r) => r.json())
+    .then((j) => {
+      if (j.error) {
+        showToast(`✗ ${name}: ${j.error}`, false);
+        nowline("✗ " + j.error);
+      } else {
+        showToast(`▶ running ${name} — output streams in the log below`, true);
+      }
+    });
+}
+function signal(name, gate) {
+  fetch(`/api/ops/${encodeURIComponent(name)}/signal/${encodeURIComponent(gate)}`, { method: "POST" })
+    .then((r) => r.json())
+    .then((j) => {
+      if (j.error) {
+        showToast(`✗ approve ${gate}: ${j.error}`, false);
+        nowline("✗ " + j.error);
+      } else {
+        showToast(`✓ approved ${gate}`, true);
+      }
+    });
+}
+// Adopt is a per-node gesture (a *foreign* node → ReconcileOp → PR), so it lives
+// in the inspect panel, not the global bar. Stash the reconcile op + the
+// live-import lexicons the server allows so inspect() can gate the button.
+let adopt = { reconcile: null, lexicons: [] };
+function adoptable(node) {
+  // `warn` is chant's overlay tag for foreign — "foreign" is only ever the
+  // display label (STATUS_LABEL above), never the attr's value (#145).
+  return (
+    adopt.reconcile &&
+    node.attrs &&
+    node.attrs._status === "warn" &&
+    adopt.lexicons.includes(node.lexicon)
+  );
+}
+
+// Rollback (#28): fetch recent source commits, let the user pick one, and trigger
+// the delegated rollback (opens a PR). Replaces the button with a picker + confirm.
+async function openRollback(btn) {
+  const commits = await fetch("/api/history")
+    .then((r) => r.json())
+    .then((j) => j.commits)
+    .catch(() => []);
+  if (!commits.length) {
+    nowline("rollback: no git history found");
+    return;
+  }
+  const wrap = document.createElement("span");
+  wrap.style.cssText = "display:flex;gap:6px;align-self:center";
+  const sel = document.createElement("select");
+  sel.style.cssText =
+    "background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:12px;max-width:340px";
+  for (const c of commits) sel.add(new Option(`${c.sha} · ${c.subject} (${c.date})`, c.sha));
+  const go = button("Roll back →", "", () => {
+    const to = sel.value;
+    if (!window.confirm(`Open a rollback PR restoring source to ${to}?\nA human reviews + merges, then Sync applies it.`)) return;
+    fetch(`/api/rollback?to=${encodeURIComponent(to)}`, { method: "POST" })
+      .then((r) => r.json())
+      .then((j) => nowline(j.error ? "✗ " + j.error : `▶ rollback → ${to} (opening PR…)`));
+    wrap.remove();
+  });
+  const cancel = button("✕", "", () => wrap.remove());
+  wrap.append(sel, go, cancel);
+  btn.replaceWith(wrap);
+}
+
+// #73: Rollback used to be a permanent toolbar button (openRollback(rb) swapped
+// it for the picker, then restored it after). Triggered from the ⌘K palette
+// instead now — there's no permanent button to restore, so this drops a
+// throwaway one into the (now otherwise action-free) actions bar just to host
+// the inline picker; openRollback's own wrap.remove() above cleans it up.
+function paletteRollback() {
+  const bar = document.getElementById("actions");
+  const rb = button("Rollback", "", () => {});
+  bar.appendChild(rb);
+  openRollback(rb);
+}
+
+// Deploy/ops state for the ⌘K palette (#73) — populated once in initActions(),
+// which used to turn each of these straight into a toolbar button. previewMode
+// (declared above, near view) is what the palette gates on: it hides exactly
+// the git/PR write actions the buttons hid (Rollback, Sync, Run <op>) — Apply
+// all, Reset, Bring up, Approve, and every read stay reachable in preview,
+// same as before.
+let opsApply = null; // the committed ApplyOp ({name, gate}), or null
+let opsRunnable = []; // generic Ops (backup/restore/audit/…) for "Run: <name>"
+let opsInitialEnv = null; // env behold launched with — gates "Apply all"
+
+async function initActions() {
+  const bar = document.getElementById("actions");
+  if (staticMode) {
+    // A frozen snapshot — no live actions at all. Show when it was captured.
+    const pill = document.createElement("span");
+    pill.textContent = `● static snapshot${manifest && manifest.capturedAt ? " · " + manifest.capturedAt.slice(0, 16).replace("T", " ") : ""}`;
+    pill.title = "An exported, read-only snapshot — no live observe or deploy.";
+    pill.style.cssText = "align-self:center;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 8px";
+    bar.appendChild(pill);
+    previewMode = true;
+    return; // nothing else in the bar is a read
+  }
+  // The env behold launched with (reliable regardless of picker-init ordering) —
+  // gates the first-class "Apply all" affordance below; also carries the preview
+  // lock that hides the git/PR ops.
+  const project = await apiFetch("/api/project").then((r) => r.json()).catch(() => ({}));
+  opsInitialEnv = project.currentEnv || null;
+  previewMode = staticMode || !!project.previewMode; // static ⇒ read-only, no writes at all
+  const { ops, adoptLexicons, autoSync, local, applyProgress: apInit } = await apiFetch("/api/ops")
+    .then((r) => r.json())
+    .catch(() => ({ ops: [], adoptLexicons: [] }));
+  // M3 (#54): hydrate the dial's apply progress from the server's last known
+  // state — a page load (or reload) mid-apply picks up the structured view
+  // instead of starting blank; the `apply` SSE listener keeps it live from here.
+  if (apInit && apInit.waves && apInit.waves.length) {
+    applyProgress = apInit;
+    renderDial();
+  }
+  // Local-mode banner (#46) — the emulator(s) behold booted with --local, so it's
+  // obvious deploys/overlay hit them (no cloud creds), not a real account.
+  if (local && local.emulators && local.emulators.length) {
+    const pill = document.createElement("span");
+    const names = local.emulators.map((e) => e.name).join(", ");
+    pill.textContent = `● local · ${names} up`;
+    pill.title =
+      "Emulator(s) booted by --local: " +
+      local.emulators.map((e) => `${e.lexicon} ${e.name} @ ${e.endpoint}`).join("; ") +
+      ". Deploys and the overlay observe them — no cloud creds.";
+    pill.style.cssText =
+      "align-self:center;font-size:11px;color:var(--managed);border:1px solid var(--managed);border-radius:6px;padding:2px 8px";
+    bar.appendChild(pill);
+  }
+  // Auto-sync banner (#29) — make an active self-heal loop visible, not silent.
+  if (autoSync && autoSync !== "off") {
+    const pill = document.createElement("span");
+    pill.textContent = `⟳ auto-sync: ${autoSync}`;
+    pill.title = `On polled drift, behold triggers the ${autoSync === "apply" ? "ApplyOp (heal)" : "ReconcileOp (adopt)"}. Gated applies still wait for Approve.`;
+    pill.style.cssText =
+      "align-self:center;font-size:11px;color:var(--pending);border:1px solid var(--pending);border-radius:6px;padding:2px 8px";
+    bar.appendChild(pill);
+  }
+  opsApply = ops.find((o) => o.kind === "apply") ?? null;
+  adopt = { reconcile: ops.find((o) => o.kind === "reconcile") ?? null, lexicons: adoptLexicons ?? [] };
+  // Generic Ops (backup, restore, seed, watch, teardown, …) — "Run: <name>" in
+  // the palette, same set the old "Run ▾" dropdown offered.
+  opsRunnable = ops.filter((o) => o.kind === "op" || o.kind === "audit");
+
+  // The one visible deploy affordance (#73 follow-up). Moving every write into
+  // the ⌘K palette left the header with zero action buttons — behold looked
+  // read-only unless you happened to press ⌘K, and the docs' "click Run/Sync"
+  // still described the old toolbar. The PRIMARY deploy gesture gets a real
+  // button back; everything else stays in the palette. One intent, one word:
+  // the button says Deploy whether the project routes it through a committed
+  // ApplyOp or a raw `chant run --components` — the tooltip carries the
+  // mechanism.
+  if (opsApply && !previewMode) {
+    const deploy = button(`▶ Deploy (${opsApply.name})`, "", () => {
+      if (window.confirm(`Run the committed ApplyOp "${opsApply.name}"?\nDelegated write: behold triggers, chant's executor applies.`)) runOp(opsApply.name);
+    });
+    deploy.title = `chant run ${opsApply.name} — the committed ApplyOp (Build → Plan → Apply). Also in ⌘K as "Deploy: Sync".`;
+    bar.appendChild(deploy);
+    if (opsApply.gate) {
+      const approve = button(`Approve ${opsApply.gate}`, "approve", () => signal(opsApply.name, opsApply.gate));
+      approve.title = `chant run signal ${opsApply.name} ${opsApply.gate} — releases the Op's human gate.`;
+      bar.appendChild(approve);
+    }
+  } else if (opsInitialEnv || view.env) {
+    const deploy = button("▶ Deploy…", "", () => {
+      if (!view.env) {
+        showToast("Deploy needs an environment — pick one in ⌘K (env: …)", false);
+        return;
+      }
+      applyPicker = true;
+      loadComponentChoices().then(renderDial);
+      renderDial();
+      document.getElementById("dial").scrollIntoView({ block: "nearest" });
+    });
+    deploy.title = `chant run <component|all> --components --env ${view.env || opsInitialEnv} --progress-json — opens the component picker on the dial. behold triggers, chant executes.`;
+    bar.appendChild(deploy);
+  }
+
+  // Only complain when there's genuinely nothing to do (never in the preview —
+  // its deploy path is Apply all, not committed Ops).
+  if (ops.length === 0 && !previewMode && !opsInitialEnv) {
+    const hint = document.createElement("span");
+    hint.style.cssText = "color:var(--muted);font-size:11px;align-self:center";
+    hint.textContent = "no Ops — commit an *.op.ts (ApplyOp / ReconcileOp / any deploy Op) to act";
+    hint.title = "behold triggers committed Ops on your executor. Add one to enable Deploy / Adopt / Run.";
+    bar.appendChild(hint);
+  }
+}
+initActions();
+initInspectPane();
+
+// Inspect pane chrome (#15): collapse (chevron / edge tab) + drag-to-resize, with
+// the width and collapsed state persisted so the layout survives reloads.
+// setInspectCollapsed/toggleInspect are module-level (not local to initInspectPane)
+// so the ⌘K palette (#73) can drive the same collapse/reopen the chevron does.
+function setInspectCollapsed(on) {
+  document.getElementById("app").classList.toggle("inspect-collapsed", on);
+  localStorage.setItem("behold.inspectCollapsed", on ? "1" : "0");
+}
+function toggleInspect() {
+  setInspectCollapsed(!document.getElementById("app").classList.contains("inspect-collapsed"));
+}
+
+function initInspectPane() {
+  const app = document.getElementById("app");
+  const pane = document.getElementById("inspect");
+  const MIN = 240, MAX = 720;
+  // Restore persisted width + collapsed state.
+  const savedW = Number(localStorage.getItem("behold.inspectW"));
+  if (savedW >= MIN && savedW <= MAX) document.documentElement.style.setProperty("--inspect-w", savedW + "px");
+  if (localStorage.getItem("behold.inspectCollapsed") === "1") app.classList.add("inspect-collapsed");
+
+  document.getElementById("inspect-collapse").addEventListener("click", () => setInspectCollapsed(true));
+  document.getElementById("inspect-reopen").addEventListener("click", () => setInspectCollapsed(false));
+
+  // Drag the left edge to resize; width grows as the handle moves left.
+  const handle = document.getElementById("inspect-resize");
+  handle.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startW = pane.getBoundingClientRect().width;
+    document.body.style.cursor = "col-resize";
+    const onMove = (ev) => {
+      const w = Math.min(MAX, Math.max(MIN, startW + (startX - ev.clientX)));
+      document.documentElement.style.setProperty("--inspect-w", w + "px");
+    };
+    const onUp = () => {
+      document.body.style.cursor = "";
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+      const w = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--inspect-w"));
+      if (w) localStorage.setItem("behold.inspectW", String(w));
+      // Graph viewBox is pane-relative; refit so nothing clips after a resize.
+      if (typeof fitGraph === "function") fitGraph();
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  });
+}
+
+// The opened PR (chant #841 surfaces it as a ReconcileOp outcome). Link it in the
+// now-line and pin it in the header so the review target is one click away.
+events.addEventListener("pr", (e) => {
+  const url = e.data;
+  nowline("→ opened PR: " + url);
+  let slot = document.getElementById("pr-link");
+  if (!slot) {
+    slot = document.createElement("a");
+    slot.id = "pr-link";
+    slot.target = "_blank";
+    slot.rel = "noopener";
+    slot.style.cssText = "color:var(--managed);text-decoration:none;font-size:12px;align-self:center";
+    document.getElementById("actions").after(slot);
+  }
+  slot.href = url;
+  slot.textContent = "PR opened →";
+});
+
+// Export the current graph as a standalone SVG file — the inlined pinhole SVG
+// already IS the full rendered graph (see render()), so this is a pure client-
+// side download, no server round-trip. Works in a static export too.
+function exportSvg() {
+  const svg = currentSvg();
+  if (!svg) {
+    nowline("✗ export: no graph loaded yet");
+    return;
+  }
+  const blob = new Blob([svg.outerHTML], { type: "image/svg+xml" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `behold-${zoomValue()}${view.env ? "-" + view.env : ""}.svg`;
+  a.style.display = "none";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+  nowline(`↓ exported ${a.download}`);
+}
+
+// --- Command palette (⌘K / Ctrl+K, #73) -----------------------------------
+// Ported from spicypath's FG-036 pattern (../spicypath/src/index.html: search
+// `#palette`, `paletteCommands`, `openPalette`) — same shape (module-level
+// palCmds/palSel/palCurrent, paletteCommands() rebuilding a fresh {label, run}
+// list from live state on every open, palRender() filtering + repainting,
+// openPalette()/closePalette() toggling the `.on` class), retargeted at
+// behold's own handlers instead of spicypath's. "Hide controls, never state"
+// (spicypath's own design rule, carried over): every action this moves out of
+// the toolbar is still reachable here; zoom/env/tier/drift/substrates stay
+// visible in the header regardless (renderStatusbar(), #substrates pills,
+// #meta) — see index.html's #statusbar comment.
+const palette = document.getElementById("palette");
+const palInput = document.getElementById("pal-input");
+const palList = document.getElementById("pal-list");
+let palCmds = [], palSel = 0, palCurrent = [];
+
+// Builds the live command list fresh on every open, so it always reflects
+// current state (which env is picked, whether the inspect pane is collapsed,
+// what previewMode hides) rather than a snapshot from page load.
+function paletteCommands() {
+  const c = [];
+
+  // Reads — always available, even in a static export or the preview lock.
+  if (!staticMode) c.push(["Re-check live (refresh drift)", () => refresh()]);
+  c.push(["Fit graph to view", () => fitGraph()]);
+  c.push(["Export: current graph as SVG", () => exportSvg()]);
+  const inspectCollapsed = document.getElementById("app").classList.contains("inspect-collapsed");
+  c.push([inspectCollapsed ? "Show inspect panel" : "Hide inspect panel", () => toggleInspect()]);
+
+  // Lens/zoom switches (#56, #63) — replaces the old header zoom picker.
+  for (const [label, v] of ZOOM_OPTS) {
+    c.push([label + (v === zoomValue() ? " ✓" : ""), () => { applyZoom(v); load(); }]);
+  }
+  // Radial toggle — entity zooms only, same gate the removed checkbox had
+  // (components/logical both lay themselves out: waves / nested arch boxes).
+  if (!view.components && !view.logical) {
+    c.push([(view.radial ? "Disable" : "Enable") + " radial layout", () => { view.radial = !view.radial; load(); }]);
+  }
+
+  // Env/stack/tier/target selection — replaces the old header pickers.
+  c.push(["env: (source)" + (!view.env ? " ✓" : ""), () => { view.env = null; resetDialCaches(); load(); }]);
+  for (const e of environments) {
+    c.push([`env: ${e}` + (view.env === e ? " ✓" : ""), () => { view.env = e; resetDialCaches(); load(); }]);
+  }
+  // The stack picker (#76, follow-up to #71) — only ever populated (`stacks`,
+  // seeded in initPickers()) when the served project declares `chant.config.
+  // ts`'s `stacks[]`; empty on every single-stack/sourceDir-only/legacy
+  // project, so this loop (and the status strip's `stack:` tag) is a no-op
+  // there. No "stack: (none)" escape hatch like env's "(source)" above —
+  // the design's locked default is always the first declared stack, never "no
+  // stack selected".
+  for (const s of stacks) {
+    c.push([`stack: ${s}` + (view.stack === s ? " ✓" : ""), () => { view.stack = s; resetDialCaches(); load(); }]);
+  }
+  for (const t of tiers) {
+    c.push([`tier: ${t}` + (view.tier === t ? " ✓" : ""), () => { view.tier = t; resetDialCaches(); load(); }]);
+  }
+  for (const t of targets) {
+    c.push([`target: ${t.endpoint}` + (view.target === t.endpoint ? " ✓" : ""), () => { view.target = t.endpoint; resetDialCaches(); load(); }]);
+  }
+
+  if (staticMode) return c.map(([label, run]) => ({ label, run })); // no writes at all in a static export
+
+  // Deploy / write actions — previewMode hides exactly the git/PR write
+  // affordances the toolbar hid (Rollback, Sync, Run <op>); Apply all, Reset,
+  // Bring up, and Approve stay reachable, mirroring initActions()'s and
+  // renderSubstrates()'s previous button-gating precisely.
+  if (!previewMode) {
+    if (opsApply) {
+      c.push([`Deploy: Sync (${opsApply.name})`, () => runOp(opsApply.name)]);
+      if (opsApply.gate) c.push([`Approve ${opsApply.gate}`, () => signal(opsApply.name, opsApply.gate)]);
+    }
+    c.push(["Rollback to a prior revision…", () => paletteRollback()]);
+    for (const op of opsRunnable) {
+      c.push([`Run: ${op.name}`, () => { if (window.confirm(`Run Op "${op.name}"?`)) runOp(op.name); }]);
+    }
+  }
+  // No committed ApplyOp, but there's an env → "Apply all" is the equivalent
+  // deploy action (M3) — stays available in preview (a local write, not git/PR).
+  if (!opsApply && opsInitialEnv) c.push([`Deploy: Apply all → ${opsInitialEnv}`, () => confirmApplyAll()]);
+
+  for (const s of lastSubstrates) {
+    if (s.bringUp) c.push([`Bring up ${s.label}`, () => bringUpSubstrate(s)]);
+    if (s.name === "floci" && s.status === "up") c.push(["Reset local emulator (Floci)", () => resetLocal()]);
+    // Dispatch a GitHub Actions run (#164) — through the operator's own `gh`
+    // login. Offered whenever the pill exists; the server refuses honestly
+    // (no gh, unauthenticated, no matching workflow_dispatch workflow) and
+    // the reason lands as a toast.
+    if (s.name === "github" && !previewMode) {
+      c.push([
+        "Run pipeline: GitHub Actions",
+        () => {
+          if (!window.confirm("Dispatch the GitHub Actions pipeline?\nRuns via YOUR gh login (gh workflow run); behold follows the run on the dial.")) return;
+          fetch("/api/ci/dispatch", { method: "POST" })
+            .then((r) => r.json())
+            .then((j) => {
+              if (j.error) {
+                showToast(`✗ dispatch: ${j.error}`, false);
+                nowline("✗ dispatch: " + j.error);
+              } else {
+                showToast(`▶ dispatched ${j.workflow} @ ${j.ref} (${j.jobs} jobs) — following on the dial`, true);
+              }
+            });
+        },
+      ]);
+    }
+  }
+
+  return c.map(([label, run]) => ({ label, run }));
+}
+
+function palRender() {
+  const q = palInput.value.toLowerCase().trim();
+  palCurrent = q ? palCmds.filter((c) => c.label.toLowerCase().includes(q)) : palCmds;
+  palSel = Math.max(0, Math.min(palSel, palCurrent.length - 1));
+  palList.replaceChildren();
+  if (!palCurrent.length) {
+    const e = document.createElement("div");
+    e.className = "empty";
+    e.textContent = "no matching command";
+    palList.appendChild(e);
+    return;
+  }
+  palCurrent.forEach((c, i) => {
+    const d = document.createElement("div");
+    d.className = "row" + (i === palSel ? " sel" : "");
+    d.textContent = c.label;
+    d.onmousedown = (ev) => {
+      ev.preventDefault();
+      closePalette();
+      c.run();
+    };
+    palList.appendChild(d);
+  });
+}
+function openPalette() {
+  palCmds = paletteCommands();
+  palSel = 0;
+  palInput.value = "";
+  palRender();
+  palette.classList.add("on");
+  palInput.focus();
+}
+function closePalette() {
+  palette.classList.remove("on");
+}
+palInput.oninput = () => { palSel = 0; palRender(); };
+palInput.onkeydown = (e) => {
+  if (e.key === "ArrowDown") { palSel++; palRender(); e.preventDefault(); }
+  else if (e.key === "ArrowUp") { palSel--; palRender(); e.preventDefault(); }
+  else if (e.key === "Enter") { const c = palCurrent[palSel]; closePalette(); if (c) c.run(); e.preventDefault(); }
+  else if (e.key === "Escape") { closePalette(); e.stopPropagation(); e.preventDefault(); }
+};
+palette.onmousedown = (e) => { if (e.target === palette) closePalette(); }; // backdrop click
+document.getElementById("hintk").addEventListener("click", openPalette);
+
+// Global ⌘K / Ctrl+K toggle — fires even while focus is inside another input
+// (e.g. an apply-picker <select>), matching spicypath's own keymap.
+window.addEventListener("keydown", (e) => {
+  const mod = e.metaKey || e.ctrlKey;
+  if (mod && (e.key === "k" || e.key === "K")) {
+    e.preventDefault();
+    palette.classList.contains("on") ? closePalette() : openPalette();
+  }
+});
+
+// Readable text on the accent-filled selected row (spicypath's --on-accent),
+// across all 552 Ghostty themes — behold has no static equivalent since
+// --pending's lightness varies per theme, so this reuses theme.js's own
+// contrast helper (the same one recolorNodesByCategory() uses for node labels)
+// instead of assuming light-on-dark or dark-on-light.
+function applyPaletteContrast() {
+  const t = getTokens();
+  if (t) document.documentElement.style.setProperty("--pal-sel-fg", readableOn(t.pending));
+}
+applyPaletteContrast();
+onThemeChange(applyPaletteContrast);