@intentius/behold 0.19.0 → 0.21.0

package/web/app.js

@@ -9,9 +9,12 @@
 // position), and the theme picker into the panel's View-tab slot (a stable element
 // renderPanelView never rewrites, so the select mounts once and survives re-renders).
 import { createRefreshQueue } from "./refresh-queue.js";
+import { readViewQuery, writeViewQuery, settleView, settlePlace, refusalLine } from "./view-url.js";
+import { readEmbed, selectMessage, viewFromMessage } from "./embed.js";
+import { gateCards } from "./workspace-gates.js";
 import { readCostLine } from "./read-cost.js";
 import { applyMemberFrame, pendingLine, stillPending } from "./pending.js";
-import { initTheme, mountThemePicker, readableOn, colorForCategory, onThemeChange, getTokens, getTheme, pinTokensFor } from "./theme.js";
+import { initTheme, setTheme, mountThemePicker, readableOn, colorForCategory, onThemeChange, getTokens, getTheme, pinTokensFor } from "./theme.js";
 // #399 M2 / #401 M4 of #397: the colour-by modes' arithmetic and the
 // provenance badge's wording — every decision the behaviour overlay makes,
 // pure and unit-tested beside the file. This module owns the fetches, the SVG
@@ -35,6 +38,7 @@ import {
   scaleEnds,
   totalsFor,
   totalsText,
+  deltaRows,
 } from "./behaviour-scale.js";
 import { addPanelTab, initPanel, setPanelTab, togglePanelCollapsed, isPanelCollapsed } from "./panel.js";
 // #254: the carve walkthrough's stepper — everything it DECIDES is a pure
@@ -85,7 +89,13 @@ import { hasOperator, renderOperator, APPROVED_SEMANTICS } from "./operator.js";
 import { releaseRows } from "./release.js";
 import { comparisonRow, comparisonSummary } from "./cross-env.js";
 initTheme();
-initPanel();
+// #476: framed in a host pane. The flag is a class on <html>, so the CSS that
+// folds the chrome away needs no JS, and the theme is the host's for this
+// frame only.
+const embedOpts = readEmbed(location.search);
+if (embedOpts.theme && !setTheme(embedOpts.theme, { persist: false })) console.warn(`behold: no theme named ${embedOpts.theme}`);
+if (embedOpts.embed) document.documentElement.classList.add("embed");
+initPanel({ embed: embedOpts.embed });
 mountThemePicker(document.getElementById("panel-theme"));
 
 // Colour node fills by category/kind using the theme's FULL palette (spicypath-style, so the
@@ -115,6 +125,8 @@ try {
 } catch {
   /* private mode */
 }
+// #475: what a load with no `lens=` would paint, so the URL carries any other.
+let savedColourMode = colourMode;
 
 const COLOUR_MODE_TITLE = {
   drift: "Colour each card by what chant observed live — the overlay behold has always drawn",
@@ -139,6 +151,7 @@ function setColourMode(mode) {
   colourMode = mode;
   try {
     localStorage.setItem(COLOUR_STORE_KEY, mode);
+    savedColourMode = mode;
   } catch {
     /* private mode */
   }
@@ -727,6 +740,15 @@ function inspect(node) {
   // statement about this entity is legible — and where a figure without its
   // provenance would be visible as the contract violation it is.
   renderBehaviourSection(section, blockOf(node));
+  // #402: what the FILE says this entity costs, beside what the account does.
+  // On a card the account no longer holds this is the only behaviour row, and
+  // it says so rather than reading as the card's cost.
+  const declared = node.attrs && node.attrs._behaviourDeclared;
+  if (declared && declared.cost) {
+    const add = section("behaviour · declared");
+    add("cost", figureWithBadge(fmtCost(declared.cost.perHour, declared.cost.currency), [declared], behaviourMeta()));
+    if (!blockOf(node)) add("live", "no live figure — the prediction of the account does not include this entity");
+  }
 
   // Render diff (#146's deferred half): what `chant helm diff <digest> <env>
   // --live --json` said about this chart's PINNED render. Never rely on the
@@ -858,15 +880,22 @@ function inspect(node) {
   const attrKeys = Object.keys(node.attrs || {}).filter((k) => !k.startsWith("_") && !(k === "release" && release));
   if (attrKeys.length) {
     const decl = section("declared");
-    // #393 item 10: an UNOWNED choudoufu card leads with the write that adopts
-    // the object — the two marker tags choudoufu named (`adopt_tofu_estate` /
-    // `adopt_tofu_address`), or its own one-line command if a release ever
-    // sends one. behold composes neither (src/choudoufu-live.ts); this puts
-    // the line first and makes it copyable, the way the moves panel already
-    // does for a `live-mv` line. The paragraph explaining the omission — which
-    // used to be the whole section, with the tags under it as JSON — follows.
+    // #393 item 10: a choudoufu card that can be adopted leads with the write
+    // that does it — the two marker tags choudoufu named (`adopt_tofu_estate` /
+    // `adopt_tofu_address`), or its own one-line command when it sends one.
+    // behold composes neither (src/choudoufu-live.ts); this puts the line
+    // first and makes it copyable, the way the moves panel already does for a
+    // `live-mv` line. The paragraph explaining the omission follows.
+    //
+    // #413: both kinds reach here now. An UNOWNED row carries the marker pair,
+    // and an adoptable one carries choudoufu's own command — so the tooltip
+    // says which of the two this is rather than claiming tags either way.
     const adoptable = node.lexicon === "choudoufu" && typeof node.attrs.adopt === "string" ? "adopt" : null;
-    if (adoptable) copyableRow(decl, adoptable, node.attrs.adopt, "Copy the tags that adopt this object");
+    if (adoptable) {
+      const isCommand = /\s/.test(node.attrs.adopt.trim()) && !node.attrs.adopt.startsWith("tofu-estate=");
+      copyableRow(decl, adoptable, node.attrs.adopt,
+        isCommand ? "Copy the command that adopts this object" : "Copy the tags that adopt this object");
+    }
     for (const k of attrKeys) {
       if (k === adoptable) continue;
       decl(k, fmtValue(node.attrs[k]));
@@ -1210,12 +1239,29 @@ function wire(ir) {
       host.querySelectorAll(".sel").forEach((n) => n.classList.remove("sel"));
       g.classList.add("sel");
       inspect(node);
+      noteSelection(node.id);
       // #254: in carve mode a click is also the walkthrough's Pick step — the
       // inspect pane already shows the score arithmetic the lens spelled out,
       // and the stepper picks up the same node.
       carvePick(node);
     });
   }
+  // #475/#476: a member's box picks the member. Only boxes that are members
+  // (a wave or a VPC box is not one), and only a click on the box itself, not
+  // on a card inside it or after a drag-pan.
+  const members = new Set(ir.nodes.map((n) => nodeMember(n.id)).filter(Boolean));
+  for (const rect of host.querySelectorAll("rect[data-group-id]")) {
+    const id = rect.getAttribute("data-group-id");
+    if (!members.has(id)) continue;
+    rect.addEventListener("click", (e) => {
+      if (panMoved || e.target !== rect) return;
+      host.querySelectorAll(".sel").forEach((n) => n.classList.remove("sel"));
+      selectedNodeId = null;
+      view.member = id;
+      renderStatusbar();
+      embedSelected(id, null);
+    });
+  }
 }
 
 // View state driven by the ⌘K palette's lens commands (#17, moved off the
@@ -1235,7 +1281,10 @@ function wire(ir) {
 // null on a project that declares no `stacks[]` at all — the picker (and the
 // status strip's stack tag) then never renders. Every fetch reads this, so
 // the `changed` SSE re-pull and a palette lens change go through the same path.
-const view = { env: null, detail: 2, components: true, logical: false, runtime: false, ops: false, tier: null, target: null, stack: null, radial: false, collapse: false, compareTo: null };
+// member (#475) is the estate member the view is on: a host opens behold with
+// ?member=, and picking a card or a member box moves it. It changes no fetch;
+// the graph is the whole estate, framed on that member's box.
+const view = { member: null, env: null, detail: 2, components: true, logical: false, runtime: false, ops: false, tier: null, target: null, stack: null, radial: false, collapse: false, compareTo: null };
 
 // #182: `components` is the boot default, but a project that declares no
 // components renders it as ZERO nodes — the first screen was a blank graph
@@ -1735,6 +1784,35 @@ function renderBehaviourTotals(host) {
   // precedence in one place rather than at each call site.
   row(b.total ? "estate · engine total" : "estate", all, b.sum, b.total, b.total ? "the engine stated this estate total itself; behold added nothing" : "behold's sum over the engine's per-entity figures");
   if (mode === "headroom") host.appendChild(panelMuted("min and median computed by behold over the engine's per-entity figures — no engine states a headroom aggregate."));
+  if (mode === "cost") renderBehaviourDelta(host, b);
+}
+
+/**
+ * Live versus declared (#402): what the account costs as it stands, what the
+ * file says it should, and the difference. Present only when the overlay was
+ * asked for at a traffic level, because both figures are predictions *at* one.
+ * The wording of every row is `deltaRows`' (web/behaviour-scale.js).
+ */
+function renderBehaviourDelta(host, b) {
+  const rows = deltaRows(b);
+  if (!rows.length) return;
+  host.appendChild(panelHeading(`live versus declared${b.at ? ` · at ${b.at.traffic}` : ""}`));
+  for (const t of rows) {
+    const r = document.createElement("div");
+    r.className = "behaviour-total";
+    const name = document.createElement("div");
+    name.className = "grow";
+    name.style.fontWeight = "600";
+    name.textContent = t.label;
+    r.appendChild(name);
+    for (const [word, text] of [["live", t.live], ["declared", t.declared], ["delta", t.delta]]) {
+      const line = document.createElement("div");
+      line.textContent = `${word} ${text}`;
+      r.appendChild(line);
+    }
+    host.appendChild(r);
+  }
+  host.appendChild(panelMuted("delta is live minus declared. A negative one means the account holds less than the file declares."));
 }
 
 function renderPanelScope() {
@@ -2053,9 +2131,318 @@ function panelDotRow(color, main, tag, onClick) {
   return row;
 }
 
+// --- #475: the view in the URL -----------------------------------------------
+// The query is read once, at boot (openFromQuery), and written back with
+// history.replaceState from renderStatusbar(), which every view change already
+// runs through. member and node can only be checked once a graph is on screen,
+// so they wait in `pendingPlace` for the first paint (afterPaint). What the
+// link asked for and behold could not open is said on the now line.
+let pendingPlace = null;
+let urlRefusals = [];
+let selectedNodeId = null;
+
+let viewUrlReady = false; // nothing is written back until the link has been read
+function openFromQuery() {
+  viewUrlReady = true;
+  applyWantedView(readViewQuery(location.search));
+}
+
+/**
+ * Move the view to what a link or the host asked for. Values the estate can't
+ * honour are kept in `urlRefusals` for the now line; member and node wait in
+ * `pendingPlace` for a graph to check them against. Returns whether the
+ * fetch-shaping part of the view moved (a re-read is needed).
+ */
+function applyWantedView(want) {
+  if (!Object.keys(want).length) return false;
+  const before = fetchKey();
+  // env first: whether the runtime stop exists depends on it.
+  const first = settleView("env" in want ? { env: want.env } : {}, { envs: environments });
+  if ("env" in first.apply) view.env = first.apply.env;
+  const { env: _env, ...rest } = want;
+  const { apply, refused } = settleView(rest, {
+    zooms: availableZooms().map(([, z]) => z),
+    tiers,
+    lenses: COLOUR_MODES,
+  });
+  urlRefusals.push(...first.refused, ...refused);
+  if (apply.tier) view.tier = apply.tier;
+  if (apply.zoom) {
+    applyZoom(apply.zoom);
+    autoZoomFallback = false; // the link chose the zoom; an empty one is said, not swapped
+  }
+  if (apply.lens) colourMode = apply.lens; // not written to localStorage: the link's pick, not yours
+  if ("radial" in apply) view.radial = apply.radial;
+  if (want.member === null) {
+    view.member = null;
+    selectedNodeId = null;
+  }
+  if (apply.member && !apply.node && selectedNodeId && nodeMember(selectedNodeId) !== apply.member) {
+    // Another member, and no card named in it: the old pick goes.
+    selectedNodeId = null;
+    document.querySelectorAll("#graph .sel").forEach((n) => n.classList.remove("sel"));
+  }
+  if (apply.member || apply.node) pendingPlace = { member: apply.member || null, node: apply.node || null };
+  return fetchKey() !== before;
+}
+function fetchKey() {
+  return [view.env, zoomValue(), view.tier, view.radial].join("|");
+}
+
+// #476: the host moves the view with a `behold:view` message carrying the same
+// fields as the URL. Only from the host's origin (viewFromMessage).
+window.addEventListener("message", (e) => {
+  const want = viewFromMessage(e, embedOpts.host);
+  if (!want) return;
+  const lensBefore = colourMode;
+  if (applyWantedView(want)) {
+    resetDialCaches();
+    renderStatusbar();
+    load();
+    return;
+  }
+  if (colourMode !== lensBefore) recolorNodesByCategory();
+  if (pendingPlace && lastGraphIr) afterPaint(lastGraphIr);
+  else if (want.member === null) fitGraph();
+  const line = refusalLine(urlRefusals);
+  urlRefusals = [];
+  if (line) nowline(line);
+  renderStatusbar();
+});
+
+/** Tell the host what was picked: a card (member + node) or a member's box. */
+function embedSelected(member, node) {
+  if (embedOpts.embed && member) setInspectCollapsed(!node);
+  if (!embedOpts.host || window.parent === window) return;
+  try {
+    window.parent.postMessage(selectMessage(member, node), embedOpts.host);
+  } catch {
+    /* the parent went away */
+  }
+}
+
+// --- #477: a declared workspace's waiting gates --------------------------------
+// Read when the env changes and when the server says something moved (the
+// `changed` event, which a host's POST /api/refresh?notify=1 also sends).
+// Framed, the cards carry no button: the host approves (workspace-gates.js).
+let wsGates = { env: undefined, answer: null, seq: 0 };
+// ?gates=<env> (#477): the env the gate strip reads, apart from the graph's.
+// A host that opens behold on the source graph still wants the gates of the
+// env its block watches.
+const gatesEnvParam = new URLSearchParams(location.search).get("gates") || "";
+function gatesEnv() {
+  return gatesEnvParam || view.env || "";
+}
+function loadWorkspaceGates({ force = false } = {}) {
+  if (staticMode) return;
+  const env = gatesEnv();
+  if (!force && wsGates.env === env) return paintWorkspaceGates();
+  // Every read is numbered; only the newest one paints, so an answer for an
+  // env the view has left never lands under the one it moved to.
+  const seq = ++wsGates.seq;
+  wsGates.env = env;
+  fetch(`/api/workspace/gates${env ? `?env=${encodeURIComponent(env)}` : ""}`)
+    .then((r) => r.json())
+    .then((j) => {
+      if (seq === wsGates.seq) wsGates.answer = j;
+    })
+    .catch(() => {
+      if (seq === wsGates.seq) wsGates.answer = null;
+    })
+    .finally(() => {
+      if (seq === wsGates.seq) paintWorkspaceGates();
+    });
+}
+function paintWorkspaceGates() {
+  const host = document.getElementById("ws-gates");
+  if (!host) return;
+  const answer = wsGates.answer;
+  host.replaceChildren();
+  if (!answer || !answer.workspace) {
+    host.hidden = true;
+    return;
+  }
+  const { cards, elsewhere, refusal } = gateCards(answer, { embed: embedOpts.embed, member: embedOpts.embed ? view.member : null });
+  for (const c of cards) {
+    const box = document.createElement("div");
+    box.className = "ws-gate";
+    box.dataset.gate = c.key;
+    const title = document.createElement("div");
+    title.className = "ws-gate-title";
+    title.textContent = c.title;
+    const facts = document.createElement("div");
+    facts.className = "ws-gate-facts";
+    facts.textContent = c.facts;
+    facts.title = c.command;
+    box.append(title, facts);
+    if (c.note) {
+      const note = document.createElement("div");
+      note.className = "ws-gate-note";
+      note.textContent = c.note;
+      box.appendChild(note);
+    }
+    if (c.button && !previewMode && !staticMode) {
+      const b = button(c.button.label, "approve", () => approveWorkspaceGate(c.key, b));
+      b.title = c.button.title;
+      box.appendChild(b);
+    }
+    host.appendChild(box);
+  }
+  if (elsewhere) {
+    const more = document.createElement("div");
+    more.className = "ws-gate ws-gate-note";
+    more.textContent = `${elsewhere} more gate${elsewhere === 1 ? "" : "s"} waiting in other members`;
+    host.appendChild(more);
+  }
+  if (refusal) {
+    const err = document.createElement("div");
+    err.className = "ws-gate ws-gate-note";
+    err.textContent = `gates unread: ${refusal.error}`;
+    err.title = refusal.remedy || "";
+    host.appendChild(err);
+  }
+  host.hidden = !host.children.length;
+}
+function approveWorkspaceGate(key, btn) {
+  if (btn) btn.disabled = true;
+  fetch("/api/workspace/gates/approve", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ key, env: wsGates.answer && wsGates.answer.env }) })
+    .then((r) => r.json())
+    .then((j) => {
+      if (j.error) {
+        showToast(`✗ approve ${key}: ${j.error}`, false);
+        nowline("✗ " + j.error);
+      } else {
+        showToast(`✓ ${key} approved as ${j.approver}`, true);
+      }
+      loadWorkspaceGates({ force: true });
+    })
+    .catch((e) => showToast(`✗ approve ${key}: ${e}`, false))
+    .finally(() => {
+      if (btn) btn.disabled = false;
+    });
+}
+
+/** The member names a graph shows: its member boxes, and the first segment of
+ * each composed node id. */
+function membersOf(ir) {
+  const out = new Set();
+  for (const n of (ir && ir.nodes) || []) {
+    const m = nodeMember(n.id);
+    if (m) out.add(m);
+  }
+  const svg = currentSvg();
+  if (svg && out.size) for (const r of svg.querySelectorAll("rect[data-group-id]")) out.add(r.getAttribute("data-group-id"));
+  return out;
+}
+
+/** After every paint: place the view where the link (or the last pick) put it. */
+function afterPaint(ir) {
+  const ids = new Set(((ir && ir.nodes) || []).map((n) => n.id));
+  if (pendingPlace) {
+    const place = settlePlace(pendingPlace, membersOf(ir), ids);
+    pendingPlace = null;
+    urlRefusals.push(...place.refused);
+    if (place.apply.member) view.member = place.apply.member;
+    if (place.apply.node) {
+      selectNode(place.apply.node, { quiet: true });
+      revealNode(place.apply.node);
+    }
+    renderStatusbar();
+  } else if (selectedNodeId && !ids.has(selectedNodeId)) {
+    // The pick isn't on this view any more; the URL stops naming it.
+    selectedNodeId = null;
+    syncViewUrl();
+  }
+  if (view.member && !selectedNodeId) revealMember(view.member);
+  const line = refusalLine(urlRefusals);
+  urlRefusals = [];
+  if (line) nowline(line);
+}
+
+/** A card was picked (graph click, panel row, palette, the link). */
+function noteSelection(id, { quiet = false } = {}) {
+  selectedNodeId = id;
+  const m = nodeMember(id);
+  if (m) view.member = m;
+  syncViewUrl();
+  // A pick the link or the host made isn't a click: the host isn't told.
+  if (!quiet) embedSelected(view.member, id);
+}
+
+/** Frame one member's box, or the cards in it when the zoom draws no boxes. */
+function revealMember(member) {
+  const svg = currentSvg();
+  if (!svg || !vbInit) return false;
+  let box = null;
+  const rect = svg.querySelector(`rect[data-group-id="${CSS.escape(member)}"]`);
+  if (rect) {
+    box = boxInSvg(svg, rect);
+  } else {
+    for (const g of svg.querySelectorAll("[data-node-id]")) {
+      if (nodeMember(g.getAttribute("data-node-id")) !== member) continue;
+      const b = boxInSvg(svg, g);
+      if (b) box = box ? union(box, b) : b;
+    }
+  }
+  if (!box || !(box.width > 0) || !(box.height > 0)) return false;
+  const pad = 0.06;
+  const aspect = vbInit[3] / vbInit[2];
+  let w = box.width * (1 + 2 * pad);
+  let h = box.height * (1 + 2 * pad);
+  if (h / w > aspect) w = h / aspect;
+  else h = w * aspect;
+  vb = [box.x + box.width / 2 - w / 2, box.y + box.height / 2 - h / 2, w, h];
+  vbAtFit = false;
+  applyVB();
+  return true;
+}
+/** An element's box in the svg's user units, after every transform on the way
+ * (a dragged box is a `translate` on its wrapper, #228). */
+function boxInSvg(svg, el) {
+  try {
+    const b = el.getBBox();
+    const m = svg.getScreenCTM() && el.getScreenCTM() ? svg.getScreenCTM().inverse().multiply(el.getScreenCTM()) : null;
+    if (!m) return { x: b.x, y: b.y, width: b.width, height: b.height };
+    const pts = [[b.x, b.y], [b.x + b.width, b.y], [b.x, b.y + b.height], [b.x + b.width, b.y + b.height]].map(([x, y]) => new DOMPoint(x, y).matrixTransform(m));
+    const xs = pts.map((p) => p.x);
+    const ys = pts.map((p) => p.y);
+    return { x: Math.min(...xs), y: Math.min(...ys), width: Math.max(...xs) - Math.min(...xs), height: Math.max(...ys) - Math.min(...ys) };
+  } catch {
+    return null;
+  }
+}
+function union(a, b) {
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  return { x, y, width: Math.max(a.x + a.width, b.x + b.width) - x, height: Math.max(a.y + a.height, b.y + b.height) - y };
+}
+
+/** Write the view into the address bar, keeping every other parameter. */
+function syncViewUrl() {
+  if (!viewUrlReady) return;
+  const place = pendingPlace || {};
+  const state = {
+    member: place.member || view.member,
+    zoom: zoomValue(),
+    env: view.env,
+    tier: view.tier,
+    lens: colourMode,
+    node: place.node || selectedNodeId,
+    radial: view.radial && !view.components && !view.logical && !view.ops,
+  };
+  const defaults = { env: (projectInfo && projectInfo.currentEnv) || null, lens: savedColourMode };
+  const next = location.pathname + writeViewQuery(location.search, state, defaults) + location.hash;
+  if (next === location.pathname + location.search + location.hash) return;
+  try {
+    history.replaceState(history.state, "", next);
+  } catch {
+    /* a sandboxed frame may refuse; the view still works */
+  }
+}
+
 // Select a node from a panel row the same way a graph click would: highlight
 // its card (when it's in the current SVG) and open its inspect panel.
-function selectNode(id) {
+function selectNode(id, { quiet = false } = {}) {
   const node = lastGraphIr && lastGraphIr.nodes.find((n) => n.id === id);
   if (!node) return;
   const host = document.getElementById("graph");
@@ -2063,6 +2450,7 @@ function selectNode(id) {
   const g = host.querySelector(`[data-node-id="${CSS.escape(id)}"]`);
   if (g) g.classList.add("sel");
   inspect(node);
+  noteSelection(node.id, { quiet });
   carvePick(node);
 }
 
@@ -2658,6 +3046,7 @@ function renderStatusbar() {
   // Pure state — the strip echoes the axes whose controls live on the floating
   // panel and in ⌘K, so the current view stays legible with the panel collapsed.
   const parts = [`zoom: ${zoomValue()}`, view.env ? `env: ${view.env}` : "env: (source)"];
+  if (view.member) parts.unshift(`member: ${view.member}`);
   // #399: which colour the graph is in is state, not a control, so it belongs
   // on the strip the same way the zoom and the env do. Only when it is not
   // drift — drift is what the strip has always implied.
@@ -2671,6 +3060,10 @@ function renderStatusbar() {
   const stillReading = pendingLine(pendingMembers, pendingTotal);
   if (stillReading) parts.push(stillReading);
   el.textContent = parts.join(" · ");
+  syncViewUrl();
+  // #477: gates don't wait on the graph (a member that fails to draw can still
+  // have a gate waiting). Re-read only when the env moved; `changed` forces it.
+  if (projectInfo) loadWorkspaceGates();
   // #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
@@ -3014,7 +3407,9 @@ function mountOperator(host) {
     box,
     operatorState,
     {
-      approve: (op, gate) => approveConvergeGate(op, gate),
+      approve: embedOpts.embed || previewMode || staticMode ? null : (op, gate) => approveConvergeGate(op, gate),
+      approver: projectInfo && projectInfo.approver,
+      why: embedOpts.embed ? "host" : previewMode ? "preview" : "static",
       // A static export has no server to ask, so it gets no history affordance
       // at all rather than a button that can only fail.
       ...(staticMode ? {} : { history: () => toggleOperatorHistory() }),
@@ -3032,7 +3427,7 @@ function mountPlayhead(host) {
   if (!hasPlayhead(runState)) return;
   const box = document.createElement("div");
   box.className = "run-playhead";
-  renderPlayhead(box, runState, gateCard, { approve: (op, gate) => signal(op, gate) });
+  renderPlayhead(box, runState, gateCard, { approve: embedOpts.embed || previewMode || staticMode ? null : (op, gate) => signal(op, gate), approver: projectInfo && projectInfo.approver, why: embedOpts.embed ? "host" : previewMode ? "preview" : "static" });
   host.appendChild(box);
 }
 
@@ -4628,6 +5023,7 @@ async function loadOnce(opts = {}, isCurrent = () => true) {
     pendingMembers = body.meta && body.meta.mode === "progressive" ? [...(body.meta.pending || [])] : [];
     pendingTotal = pendingMembers.length;
     render(body.ir, body.svg, body.meta);
+    afterPaint(body.ir);
   } catch (err) {
     // A background settle poll must not blow away a good graph on a transient error.
     if (!opts.quiet && isCurrent()) {
@@ -4761,6 +5157,7 @@ async function initPickers() {
   environments = info.environments || [];
   tiers = info.tiers || [];
   targets = info.targets || [];
+  openFromQuery();
   renderStatusbar();
   load();
 }
@@ -4803,6 +5200,7 @@ events.addEventListener("member", (e) => {
 events.addEventListener("changed", () => {
   bulkDiffCache = null; // an op ran → per-node live state may have changed
   load();
+  loadWorkspaceGates({ force: true });
   loadSubstrates(); // a bring-up (or any op) finished → re-detect readiness
 });
 
@@ -5454,6 +5852,8 @@ async function initActions() {
   }
 }
 initActions();
+// #476: a frame keeps its own inspect state, folded until something is picked.
+const INSPECT_COLLAPSED_KEY = embedOpts.embed ? "behold.inspectCollapsed.embed" : "behold.inspectCollapsed";
 initInspectPane();
 
 // Inspect pane chrome (#15): collapse (chevron / edge tab) + drag-to-resize, with
@@ -5462,7 +5862,11 @@ 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");
+  try {
+    localStorage.setItem(INSPECT_COLLAPSED_KEY, on ? "1" : "0");
+  } catch {
+    /* private mode */
+  }
 }
 function toggleInspect() {
   setInspectCollapsed(!document.getElementById("app").classList.contains("inspect-collapsed"));
@@ -5475,7 +5879,13 @@ function initInspectPane() {
   // 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");
+  let folded = null;
+  try {
+    folded = localStorage.getItem(INSPECT_COLLAPSED_KEY);
+  } catch {
+    /* private mode */
+  }
+  if (folded === "1" || (folded === null && embedOpts.embed)) app.classList.add("inspect-collapsed");
 
   document.getElementById("inspect-collapse").addEventListener("click", () => setInspectCollapsed(true));
   document.getElementById("inspect-reopen").addEventListener("click", () => setInspectCollapsed(false));
@@ -5645,6 +6055,10 @@ function paletteCommands() {
   }
 
   // Env/stack/tier/target selection — replaces the old header pickers.
+  if (view.member) c.push([`member: whole estate (leave ${view.member})`, () => { view.member = null; selectedNodeId = null; renderStatusbar(); fitGraph(); }]);
+  for (const m of lastGraphIr ? membersOf(lastGraphIr) : []) {
+    if (m !== view.member) c.push([`member: ${m}`, () => { view.member = m; selectedNodeId = null; renderStatusbar(); revealMember(m); }]);
+  }
   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(); }]);
@@ -5676,7 +6090,7 @@ function paletteCommands() {
     if (opsApply) {
       // #165: not for a designated env — its ApplyOp is refused server-side too.
       if (!designatedFor(view.env || opsInitialEnv)) c.push([`Deploy: Sync (${opsApply.name})`, () => runOp(opsApply.name)]);
-      if (opsApply.gate) c.push([`Approve ${opsApply.gate}`, () => signal(opsApply.name, opsApply.gate)]);
+      if (opsApply.gate && !embedOpts.embed) c.push([`Approve ${opsApply.gate}`, () => signal(opsApply.name, opsApply.gate)]);
     }
     // #165: a designated env's applies happen on the forge, so a rollback PR
     // opened from here would have nothing local to land — hidden, as designed.

package/web/behaviour-scale.js

@@ -199,6 +199,38 @@ export function fmtCost(perHour, currency) {
 }
 
 /** A headroom fraction as the percentage of capacity still free. */
+/** A signed delta, in the engine's own currency: the sign is the statement. */
+export function fmtDelta(perHour, currency) {
+  const figure = fmtCost(Math.abs(perHour), currency);
+  if (perHour === 0) return `${figure}, no difference`;
+  return `${perHour > 0 ? "+" : "-"}${figure}`;
+}
+
+/**
+ * Live versus declared (#402), as the rows the Scope panel prints: one triple
+ * for the estate, one per member that has a side. Empty when the payload
+ * carries neither figure, which is a request that named no traffic level.
+ *
+ * Each figure says whose it is. `total` is the engine's own statement and
+ * `sum` is behold adding the engine's per-entity figures; the delta is always
+ * behold's subtraction of the two beside it, and a missing side is said, not
+ * left blank, so a reader never takes an absent live figure for a zero.
+ */
+export function deltaRows(meta) {
+  if (!meta || (!meta.live && !meta.declared)) return [];
+  const whose = (f) => (f.basis === "total" ? "engine total" : "behold's sum");
+  const side = (f, missing) => (f ? `${fmtCost(f.perHour, f.currency)} · ${whose(f)}` : missing);
+  const triple = (label, t) => ({
+    label,
+    live: side(t.live, "no live figure"),
+    declared: side(t.declared, "no declared figure"),
+    delta: t.delta ? fmtDelta(t.delta.perHour, t.delta.currency) : "no delta, see diagnostics",
+  });
+  const rows = [triple("estate", meta)];
+  for (const [name, t] of Object.entries(meta.members || {}).sort(([a], [b]) => a.localeCompare(b))) rows.push(triple(name, t));
+  return rows;
+}
+
 export function fmtHeadroom(v) {
   return typeof v === "number" && Number.isFinite(v) ? `${Math.round(v * 100)}% free` : "—";
 }