@intentius/behold 0.20.0 → 0.22.0

package/web/index.html

@@ -132,6 +132,16 @@
          either for the full reason (native SVG <title>). */
       #graph g[data-edge-via="data dependency"] .pin-edge-line { stroke-dasharray: 6 5; }
       #graph g[data-edge-from][data-edge-via] { cursor: help; }
+      /* #477: a declared workspace's waiting gates, over the top of the graph
+         pane (same grid cell, so #graph's re-renders never take it with them). */
+      #ws-gates { grid-row: 1; grid-column: 1; align-self: start; justify-self: center; z-index: 3; margin-top: 8px;
+        max-width: min(560px, 70%); display: flex; flex-direction: column; gap: 6px; }
+      #ws-gates[hidden] { display: none; }
+      #ws-gates .ws-gate { background: var(--panel); border: 1px solid var(--warn, var(--rule)); border-radius: var(--r-ctl);
+        padding: 6px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
+      #ws-gates .ws-gate-title { font-weight: 600; }
+      #ws-gates .ws-gate-facts, #ws-gates .ws-gate-note { color: var(--muted); font-size: var(--t-caption); }
+      #ws-gates .ws-gate button { margin-top: 4px; }
       /* Fit reset + a zoom hint, floating top-right of the graph pane. */
       #zoom-toggle { position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--panel);
         color: var(--muted); border: 1px solid var(--rule); border-radius: var(--r-ctl); padding: 4px 10px;
@@ -279,6 +289,15 @@
         color: var(--muted); font: var(--t-caption)/1 var(--font-ui); padding: 6px 0; cursor: pointer; }
       #panel-tabs button[data-tab]:hover { color: var(--fg); }
       #panel-tabs button[data-tab].active { color: var(--fg); background: var(--active); font-weight: 600; }
+      /* #476: framed in a host pane. Deploying and the theme are the host's
+         business; the panel and the inspect pane start folded (app.js). */
+      .embed #panel-tabs button[data-tab="deploy"], .embed #panel-body section[data-tab="deploy"],
+      .embed #panel-body section[data-tab="view"] > h3:has(+ #panel-theme), .embed #panel-theme { display: none !important; }
+      /* Folded in a frame, the panel is a small pill (⌘K and the expand
+         chevron) in the corner, so the graph has the pane to itself. */
+      .embed #panel.collapsed #panel-tabs button[data-tab] { display: none; }
+      .embed #panel.collapsed { width: auto; }
+      .embed #panel.collapsed #panel-tabs { gap: 4px; padding: 2px 4px; }
       #panel-tabs #hintk { flex: none; align-self: center; padding: 2px 6px; margin-left: 2px; }
       #panel-collapse { flex: none; align-self: center; background: none; border: none; color: var(--muted);
         font-size: var(--t-body); cursor: pointer; line-height: 1; padding: 2px 4px; }
@@ -585,6 +604,7 @@
     </div>
     <div id="app">
       <div id="graph"></div>
+      <div id="ws-gates" hidden></div>
       <aside id="inspect">
         <div id="inspect-resize" title="Drag to resize"></div>
         <button id="inspect-collapse" title="Collapse panel">›</button>

package/web/operator.js

@@ -26,6 +26,13 @@
  */
 import { waitingFor } from "./run-playhead.js";
 
+// #477: why a gate card has no approve button.
+const NO_APPROVE = {
+  host: "approve in the host that framed this graph",
+  preview: "approving is off in preview",
+  static: "a snapshot: approve where behold runs",
+};
+
 /** How a lease reads. `expired` is its own tone, not a shade of `free`: a lapsed
  * lease means the holder stopped renewing and the next round reclaims it, which
  * is a different statement from "nobody has ever held it". */
@@ -459,7 +466,13 @@ export function renderConvergeGateCard(gate, actions = {}) {
   if (at) box.appendChild(at);
 
   const command = (gate.approve && gate.approve.command) || `chant approve ${gate.op} ${gate.gate}`;
-  const approve = el("button", "approve", "Record approval");
+  // #477: framed in a host, the host approves; the gate is drawn, not offered.
+  if (!actions.approve) {
+    box.appendChild(el("div", "run-gate-meta", NO_APPROVE[actions.why] || NO_APPROVE.host));
+    return box;
+  }
+  // Standalone, chant records whoever runs behold. Said before the click.
+  const approve = el("button", "approve", actions.approver ? `Record approval as ${actions.approver}` : "Record approval");
   approve.title =
     `${(gate.approve && gate.approve.method) || "POST"} ${(gate.approve && gate.approve.path) || ""} — ` +
     `${command}. ${gate.semantics || APPROVE_SEMANTICS} behold never approves on its own.`;

package/web/panel.js

@@ -6,7 +6,9 @@
 // browser JS, no build step, themed entirely by the shared CSS vars — same
 // rules as app.js.
 
-const STORE_KEY = "behold.panel";
+// #476: a framed behold keeps its own panel state, folded to start with, so a
+// host pane and a full window never fight over one saved position.
+let STORE_KEY = "behold.panel";
 const MARGIN = 12; // gap kept between a snapped panel and the viewport edge
 const SNAP = 32; // released within this many px of an edge → dock to it
 
@@ -168,9 +170,14 @@ export function isPanelCollapsed() {
   return !!state.collapsed;
 }
 
-export function initPanel() {
+export function initPanel({ embed = false } = {}) {
   panel = document.getElementById("panel");
   if (!panel) return;
+  if (embed) {
+    STORE_KEY = "behold.panel.embed";
+    state.collapsed = true;
+    state.y = 12;
+  }
   state = loadState();
   const bar = document.getElementById("panel-tabs");
   initDrag(bar);
@@ -182,7 +189,8 @@ export function initPanel() {
   for (const b of panel.querySelectorAll("#panel-tabs button[data-tab]")) b.addEventListener("click", () => setPanelTab(b.dataset.tab));
   const known = [...panel.querySelectorAll("#panel-tabs button[data-tab]")].map((b) => b.dataset.tab);
   setCollapsed(state.collapsed);
-  setPanelTab(known.includes(state.tab) ? state.tab : known[0], { expand: false });
+  const hidden = embed ? ["deploy"] : [];
+  setPanelTab(known.includes(state.tab) && !hidden.includes(state.tab) ? state.tab : known[0], { expand: false });
   window.addEventListener("resize", applyPosition);
   // Tab-content re-renders change the panel's height — a bottom-snapped panel
   // must stay flush through them.

package/web/run-playhead.js

@@ -186,9 +186,21 @@ export function renderGateCard(gate, actions = {}) {
   );
   if (gate.guards) box.appendChild(el("div", "run-gate-meta", `holds back: ${gate.guards}`));
 
-  const approve = el("button", "approve", `Approve ${gate.signalName}`);
+  // #477: framed in a host, the host approves; the gate is drawn, not offered.
+  if (!actions.approve) {
+    box.appendChild(el("div", "run-gate-meta", NO_APPROVE[actions.why] || NO_APPROVE.host));
+    return box;
+  }
+  const approve = el("button", "approve", actions.approver ? `Approve ${gate.signalName} as ${actions.approver}` : `Approve ${gate.signalName}`);
   approve.title = `${gate.approve.method} ${gate.approve.path} — the same delegated signal as chant run signal ${gate.op} ${gate.signalName}. behold never approves on its own.`;
   approve.addEventListener("click", () => actions.approve?.(gate.op, gate.signalName));
   box.appendChild(approve);
   return box;
 }
+
+// #477: why a gate card has no approve button.
+const NO_APPROVE = {
+  host: "approve in the host that framed this graph",
+  preview: "approving is off in preview",
+  static: "a snapshot: approve where behold runs",
+};

package/web/view-url.js

@@ -0,0 +1,151 @@
+// #475: the view in the URL. A host (arugula's workspace block) opens behold
+// at `?member=delivery&zoom=components&env=prod`, a reload keeps the view, and a
+// person can send the link to what they are looking at.
+//
+// Pure logic, no DOM: app.js reads the query once at boot, settles it against
+// what the served estate offers, and writes the view back with
+// history.replaceState as it changes. The static export runs the same SPA, so
+// it takes the same parameters against its captured lens matrix.
+
+/** The view's keys, in the order they are written back. Anything else in the
+ * query (embed, theme, host, #476) is left where it is. `gates` is the env the
+ * gate strip reads when it isn't the graph's (#477); it is the view's because
+ * a host can move it with `behold:view`, and a reload has to keep that. */
+export const VIEW_KEYS = ["member", "zoom", "env", "tier", "lens", "node", "radial", "gates"];
+
+/** An env name as the server takes one (src/workspace-gates.ts isEnvName). */
+export function isEnvName(env) {
+  return typeof env === "string" && /^[A-Za-z0-9][A-Za-z0-9._-]*$/.test(env);
+}
+
+/** The colour lenses (web/behaviour-scale.js COLOUR_MODES). `lens` in the URL
+ * is the colour the graph is painted in. */
+export const LENSES = ["drift", "cost", "headroom"];
+
+/**
+ * The view a query asks for. Only the keys present come back; `radial` is a
+ * boolean (`1`/`true` on, `0`/`false` off). An empty value is the same as an
+ * absent one, except `env=` which asks for the source graph (null).
+ */
+export function readViewQuery(search) {
+  const q = new URLSearchParams(search || "");
+  const want = {};
+  for (const k of VIEW_KEYS) {
+    if (!q.has(k)) continue;
+    const v = (q.get(k) || "").trim();
+    if (k === "radial") {
+      if (/^(1|true|on|yes)$/i.test(v)) want.radial = true;
+      else if (/^(0|false|off|no)$/i.test(v)) want.radial = false;
+      else want.radial = v; // left for settleView to name
+      continue;
+    }
+    if (k === "env") {
+      want.env = v || null;
+      continue;
+    }
+    if (v) want[k] = v;
+  }
+  return want;
+}
+
+/**
+ * The query string for a view, keeping every parameter that isn't a view key.
+ * Defaults are left out so a plain view keeps a plain URL. `defaults` says
+ * what a load with no parameter would give: the env behold was started with
+ * (so the source graph under `--env` is written `env=`, or a reload would
+ * open live), and the lens saved in this browser (so a link carries a lens
+ * that differs from it, drift included).
+ */
+export function writeViewQuery(search, state, defaults = {}) {
+  const q = new URLSearchParams(search || "");
+  for (const k of VIEW_KEYS) q.delete(k);
+  const s = state || {};
+  const envDefault = defaults.env || null;
+  const lensDefault = defaults.lens || "drift";
+  if (s.member) q.set("member", s.member);
+  if (s.zoom) q.set("zoom", s.zoom);
+  if (s.env) q.set("env", s.env);
+  else if (envDefault) q.set("env", "");
+  if (s.tier) q.set("tier", s.tier);
+  if (s.lens && s.lens !== lensDefault) q.set("lens", s.lens);
+  if (s.node) q.set("node", s.node);
+  if (s.radial) q.set("radial", "1");
+  if (s.gates) q.set("gates", s.gates);
+  const out = q.toString();
+  return out ? `?${out}` : "";
+}
+
+/**
+ * Split what a query asks for into what this estate can honour and what it
+ * can't, with the reason. `offer` lists what the served estate has:
+ * `{ zooms, envs, tiers, lenses }`. member and node are checked later, against
+ * the first graph (they are only known once it is read), so they pass through.
+ * A value behold can't honour is named, never dropped without a word.
+ */
+export function settleView(want, offer) {
+  const apply = {};
+  const refused = [];
+  const o = offer || {};
+  if ("zoom" in want) {
+    if ((o.zooms || []).includes(want.zoom)) apply.zoom = want.zoom;
+    else refused.push({ key: "zoom", value: want.zoom, reason: `this estate offers ${listOr(o.zooms)}` });
+  }
+  if ("env" in want) {
+    if (want.env === null || (o.envs || []).includes(want.env)) apply.env = want.env;
+    else refused.push({ key: "env", value: want.env, reason: (o.envs || []).length ? `this estate declares ${listOr(o.envs)}` : "this estate declares no environments" });
+  }
+  if ("tier" in want) {
+    if ((o.tiers || []).includes(want.tier)) apply.tier = want.tier;
+    else refused.push({ key: "tier", value: want.tier, reason: (o.tiers || []).length ? `this project offers ${listOr(o.tiers)}` : "this project offers no tiers" });
+  }
+  if ("lens" in want) {
+    const lenses = o.lenses || LENSES;
+    if (lenses.includes(want.lens)) apply.lens = want.lens;
+    else refused.push({ key: "lens", value: want.lens, reason: `the lenses are ${listOr(lenses)}` });
+  }
+  if ("radial" in want) {
+    if (typeof want.radial === "boolean") apply.radial = want.radial;
+    else refused.push({ key: "radial", value: want.radial, reason: "radial is 1 or 0" });
+  }
+  if ("gates" in want) {
+    // null: the gate strip follows the graph's env again.
+    if (want.gates === null || isEnvName(want.gates)) apply.gates = want.gates;
+    else refused.push({ key: "gates", value: want.gates, reason: "an env name is letters, digits, '.', '_' and '-'" });
+  }
+  if (want.member) apply.member = want.member;
+  if (want.node) apply.node = want.node;
+  return { apply, refused };
+}
+
+/**
+ * member and node, checked against a graph that came back. `members` is the
+ * set of member names in it, `nodes` the set of node ids. A node in another
+ * member than the one asked for is refused; so is one the zoom elided.
+ */
+export function settlePlace(want, members, nodes) {
+  const apply = {};
+  const refused = [];
+  if (want.member) {
+    if (members.has(want.member)) apply.member = want.member;
+    else refused.push({ key: "member", value: want.member, reason: members.size ? `the members here are ${listOr([...members])}` : "this estate has no members" });
+  }
+  if (want.node) {
+    if (!nodes.has(want.node)) refused.push({ key: "node", value: want.node, reason: "it isn't on this view; the zoom may elide it" });
+    else if (apply.member && !want.node.startsWith(`${apply.member}/`)) refused.push({ key: "node", value: want.node, reason: `it isn't in member ${apply.member}` });
+    else apply.node = want.node;
+  }
+  return { apply, refused };
+}
+
+/** One line for the now line: what the URL asked for that behold didn't do. */
+export function refusalLine(refused) {
+  if (!refused.length) return "";
+  return "from the link: " + refused.map((r) => `${r.key}=${r.value} not opened, ${r.reason}`).join("; ");
+}
+
+function listOr(xs) {
+  const a = (xs || []).filter(Boolean);
+  if (!a.length) return "nothing";
+  if (a.length > 8) return a.slice(0, 8).join(", ") + ", …";
+  return a.join(", ");
+}

package/web/view-url.test.js

@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import { readViewQuery, writeViewQuery, settleView, settlePlace, refusalLine, isEnvName } from "./view-url.js";
+
+describe("readViewQuery (#475)", () => {
+  it("reads the view keys and nothing else", () => {
+    expect(readViewQuery("?member=delivery&zoom=components&env=prod&node=delivery/appService&embed=1")).toEqual({
+      member: "delivery",
+      zoom: "components",
+      env: "prod",
+      node: "delivery/appService",
+    });
+  });
+  it("reads radial as a boolean, and an empty env as the source graph", () => {
+    expect(readViewQuery("?radial=1&env=")).toEqual({ radial: true, env: null });
+    expect(readViewQuery("?radial=0")).toEqual({ radial: false });
+  });
+  it("drops empty values", () => {
+    expect(readViewQuery("?member=&zoom=")).toEqual({});
+  });
+});
+
+describe("writeViewQuery (#475)", () => {
+  it("keeps parameters that are not the view's, and leaves defaults out", () => {
+    const q = writeViewQuery("?embed=1&host=http%3A%2F%2Fa&member=old", { member: "delivery", zoom: "resources", env: null, lens: "drift", radial: false, node: null });
+    expect(q).toBe("?embed=1&host=http%3A%2F%2Fa&member=delivery&zoom=resources");
+  });
+  it("round-trips through readViewQuery", () => {
+    const state = { member: "delivery", zoom: "components", env: "prod", tier: "local", lens: "cost", node: "delivery/appService", radial: true };
+    expect(readViewQuery(writeViewQuery("", state))).toEqual(state);
+  });
+  it("writes env= for the source graph when behold was started on an env, so a reload doesn't open live", () => {
+    expect(writeViewQuery("", { zoom: "resources", env: null }, { env: "prod" })).toBe("?zoom=resources&env=");
+    expect(readViewQuery("?zoom=resources&env=")).toEqual({ zoom: "resources", env: null });
+  });
+  it("writes a lens that differs from the saved one, drift included", () => {
+    expect(writeViewQuery("", { lens: "drift" }, { lens: "cost" })).toBe("?lens=drift");
+    expect(writeViewQuery("", { lens: "cost" }, { lens: "cost" })).toBe("");
+  });
+  it("writes nothing for an empty view", () => {
+    expect(writeViewQuery("", {})).toBe("");
+  });
+});
+
+describe("settleView (#475)", () => {
+  const offer = { zooms: ["components", "resources"], envs: ["prod"], tiers: [], lenses: ["drift", "cost", "headroom"] };
+  it("applies what the estate offers", () => {
+    expect(settleView({ zoom: "resources", env: "prod", lens: "cost", radial: true, member: "m" }, offer)).toEqual({
+      apply: { zoom: "resources", env: "prod", lens: "cost", radial: true, member: "m" },
+      refused: [],
+    });
+  });
+  it("names what it can't honour, with the reason", () => {
+    const { apply, refused } = settleView({ zoom: "ops", env: "staging", tier: "aws", radial: "maybe" }, offer);
+    expect(apply).toEqual({});
+    expect(refused.map((r) => r.key)).toEqual(["zoom", "env", "tier", "radial"]);
+    expect(refused[1].reason).toBe("this estate declares prod");
+    expect(refused[2].reason).toBe("this project offers no tiers");
+  });
+  it("takes env= as the source graph", () => {
+    expect(settleView({ env: null }, offer).apply).toEqual({ env: null });
+  });
+});
+
+describe("gates, the gate strip's env (#477)", () => {
+  it("reads gates from the query, and an empty one as no override", () => {
+    expect(readViewQuery("?gates=prod&env=")).toEqual({ env: null, gates: "prod" });
+    expect(readViewQuery("?gates=")).toEqual({});
+  });
+  it("owns gates on write-back: written when set, dropped when cleared", () => {
+    expect(writeViewQuery("?embed=1&gates=old", { zoom: "resources", gates: "prod" })).toBe("?embed=1&zoom=resources&gates=prod");
+    expect(writeViewQuery("?embed=1&gates=old", { zoom: "resources", gates: null })).toBe("?embed=1&zoom=resources");
+  });
+  it("round-trips through readViewQuery", () => {
+    expect(readViewQuery(writeViewQuery("", { gates: "staging" }))).toEqual({ gates: "staging" });
+  });
+  it("takes an env name or null, and refuses anything chant would read as a flag", () => {
+    expect(settleView({ gates: "prod" }, {}).apply).toEqual({ gates: "prod" });
+    expect(settleView({ gates: null }, {}).apply).toEqual({ gates: null });
+    const { apply, refused } = settleView({ gates: "--sign" }, {});
+    expect(apply).toEqual({});
+    expect(refused).toEqual([{ key: "gates", value: "--sign", reason: "an env name is letters, digits, '.', '_' and '-'" }]);
+  });
+  it("matches the server's env-name check", () => {
+    for (const ok of ["local", "prod-eu", "a.b_c", "0"]) expect(isEnvName(ok)).toBe(true);
+    for (const bad of ["", "-x", ".x", "a b", "a/b", null]) expect(isEnvName(bad)).toBe(false);
+  });
+});
+
+describe("settlePlace (#475)", () => {
+  const members = new Set(["delivery", "app"]);
+  const nodes = new Set(["delivery/appService", "app/x"]);
+  it("opens a member and a node in it", () => {
+    expect(settlePlace({ member: "delivery", node: "delivery/appService" }, members, nodes)).toEqual({
+      apply: { member: "delivery", node: "delivery/appService" },
+      refused: [],
+    });
+  });
+  it("refuses an unknown member, an absent node, and a node in another member", () => {
+    expect(settlePlace({ member: "nope" }, members, nodes).refused[0].reason).toBe("the members here are delivery, app");
+    expect(settlePlace({ node: "delivery/gone" }, members, nodes).refused[0].key).toBe("node");
+    expect(settlePlace({ member: "delivery", node: "app/x" }, members, nodes).refused[0].reason).toBe("it isn't in member delivery");
+  });
+  it("says it in one line", () => {
+    expect(refusalLine([{ key: "zoom", value: "ops", reason: "this estate offers components" }])).toBe(
+      "from the link: zoom=ops not opened, this estate offers components",
+    );
+    expect(refusalLine([])).toBe("");
+  });
+});

package/web/workspace-gates.js

@@ -0,0 +1,44 @@
+// #477: a declared workspace's waiting gates, as cards. Pure: app.js fetches
+// /api/workspace/gates and paints what gateCards returns.
+//
+// One approve path per gate. Framed in a host (#476), behold draws the gate
+// and no button: the host knows who is looking and records it. Standalone, the
+// button stays, and the card says the approval is recorded as the user running
+// behold, since behold has no other identity to give chant.
+
+/** The words a framed card uses instead of a button. */
+export const HOST_APPROVES = "approve in the host that framed this graph";
+
+/**
+ * Cards for a gates answer. `embed` is whether behold is framed; `member`
+ * narrows to one member's gates when a host opened behold on it (the rest are
+ * counted, not hidden without a word).
+ */
+export function gateCards(answer, { embed = false, member = null } = {}) {
+  const all = (answer && answer.gates) || [];
+  const shown = member ? all.filter((g) => g.member === member) : all;
+  const cards = shown.map((g) => {
+    const facts = [`${g.approvals.length} of ${g.needed} approval${g.needed === 1 ? "" : "s"}`];
+    if (g.env) facts.push(`env ${g.env}`);
+    if (g.planDigest) facts.push(`plan ${shortDigest(g.planDigest)}`);
+    if (g.approvals.length) facts.push(`approved by ${g.approvals.map((a) => a.principal).join(", ")}`);
+    const card = {
+      key: g.key,
+      member: g.member,
+      title: `${g.member}: ${g.op} waits at gate ${g.gate}`,
+      facts: facts.join(" · "),
+      command: g.approve,
+    };
+    if (embed) card.note = HOST_APPROVES;
+    else if (g.signed) card.note = `wants a signed approval; run ${g.approve}`;
+    else card.button = { label: `Approve as ${answer.approver || "you"}`, title: `${g.approve}, run by behold. chant records the approval as ${answer.approver || "the user running behold"}.` };
+    return card;
+  });
+  const elsewhere = all.length - shown.length;
+  return { cards, elsewhere, refusal: (answer && answer.refusal) || null };
+}
+
+function shortDigest(d) {
+  const s = String(d).replace(/^sha256:/, "");
+  return s.length > 12 ? s.slice(0, 12) : s;
+}

package/web/workspace-gates.test.js

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { gateCards, HOST_APPROVES } from "./workspace-gates.js";
+
+const answer = {
+  workspace: true,
+  env: "local",
+  approver: "alex",
+  gates: [
+    { key: "delivery/ship/approve-ship", member: "delivery", op: "ship", gate: "approve-ship", env: null, planDigest: null, approvals: [], needed: 1, signed: false, approve: "chant approve ship approve-ship" },
+    { key: "infra/deploy/go", member: "infra", op: "deploy", gate: "go", env: "prod", planDigest: "sha256:0123456789abcdef", approvals: [{ principal: "jake" }], needed: 2, signed: false, approve: "chant approve deploy go --env prod" },
+  ],
+};
+
+describe("gateCards (#477)", () => {
+  it("offers approve standalone, and says who chant records", () => {
+    const { cards } = gateCards(answer);
+    expect(cards[0]).toMatchObject({ title: "delivery: ship waits at gate approve-ship", facts: "0 of 1 approval", button: { label: "Approve as alex" } });
+    expect(cards[1].facts).toBe("1 of 2 approvals · env prod · plan 0123456789ab · approved by jake");
+  });
+  it("draws the gate and no button when framed", () => {
+    const { cards } = gateCards(answer, { embed: true });
+    expect(cards.every((c) => !c.button && c.note === HOST_APPROVES)).toBe(true);
+  });
+  it("narrows to one member and counts the rest", () => {
+    const { cards, elsewhere } = gateCards(answer, { embed: true, member: "delivery" });
+    expect(cards.map((c) => c.key)).toEqual(["delivery/ship/approve-ship"]);
+    expect(elsewhere).toBe(1);
+  });
+  it("sends a signed gate to the command line", () => {
+    const { cards } = gateCards({ ...answer, gates: [{ ...answer.gates[0], signed: true, approve: "chant approve ship approve-ship --sign" }] });
+    expect(cards[0].button).toBeUndefined();
+    expect(cards[0].note).toBe("wants a signed approval; run chant approve ship approve-ship --sign");
+  });
+});