@intentius/behold 0.8.0 → 0.9.0

package/web/carve-steps.test.js

@@ -0,0 +1,233 @@
+// #254: the pure half of web/carve-steps.js, tested the way web/json-view.js
+// (#259) and web/layout-store.js (#245) are — no DOM, no jsdom, no browser.
+// Everything the stepper DECIDES (which step is reachable, what the Pick step
+// can honestly claim about the cut, which runbook lines are commands, what
+// `chant lint` reads as) is a function from data to data, so it is checkable
+// here; the DOM half — the buttons, the copy controls, the six-step walk — is
+// smoke/ui-smoke.mjs's job.
+import { describe, it, expect } from "vitest";
+import {
+  CARVE_STEPS,
+  blockedReason,
+  carveable,
+  completed,
+  cutSummary,
+  edgeLine,
+  initialCarveState,
+  lintVerdict,
+  pickFacts,
+  runbookCommands,
+  stepStatus,
+} from "./carve-steps.js";
+
+const BUCKET = {
+  address: "aws_s3_bucket.assets",
+  score: 88,
+  band: "clean leaf",
+  mapsTo: "AWS::S3::Bucket",
+  breakdown: { inbound: 1, outbound: 0, tier: 1 },
+};
+const NODE = { id: "aws_s3_bucket.assets", attrs: { arithmetic: "100 - 12x1 inbound = 88", score: 88, band: "clean leaf", tier: 1 } };
+
+const picked = () => ({ ...initialCarveState(), step: 1, pick: { node: NODE, resource: BUCKET } });
+
+describe("the six steps", () => {
+  it("are the six #254 names, in order", () => {
+    expect(CARVE_STEPS.map((s) => s.id)).toEqual(["advise", "pick", "emit", "bridge", "handoff", "done"]);
+  });
+});
+
+describe("blockedReason — the gates are real data dependencies", () => {
+  it("blocks emit until something is picked", () => {
+    expect(blockedReason(initialCarveState(), "emit")).toContain("Pick a resource first");
+    expect(blockedReason(picked(), "emit")).toBeNull();
+  });
+
+  it("blocks bridge until emit ran, and says why: the manifest emit leaves behind", () => {
+    expect(blockedReason(picked(), "bridge")).toContain("carve manifest");
+    expect(blockedReason({ ...picked(), emit: { ok: true } }, "bridge")).toBeNull();
+  });
+
+  it("blocks handoff until bridge wrote the runbook", () => {
+    const s = { ...picked(), emit: { ok: true } };
+    expect(blockedReason(s, "handoff")).toContain("Run Bridge first");
+    expect(blockedReason({ ...s, bridge: { ok: true } }, "handoff")).toBeNull();
+  });
+
+  it("never blocks advise or pick — the walkthrough always has a first frame", () => {
+    expect(blockedReason(initialCarveState(), "advise")).toBeNull();
+    expect(blockedReason(initialCarveState(), "pick")).toBeNull();
+  });
+});
+
+describe("completed / stepStatus", () => {
+  it("a fresh walkthrough is on advise, with everything past pick blocked", () => {
+    const s = initialCarveState();
+    expect(stepStatus(s, 0)).toBe("current");
+    expect(stepStatus(s, 1)).toBe("todo");
+    expect(stepStatus(s, 2)).toBe("blocked");
+    expect(stepStatus(s, 5)).toBe("blocked");
+  });
+
+  it("a step reads done from its RESULT, not from having walked past it", () => {
+    const s = { ...picked(), step: 3 };
+    expect(completed(s, "emit")).toBe(false);
+    expect(stepStatus(s, 2)).toBe("todo"); // stepped past emit without running it
+    expect(completed({ ...s, emit: { ok: true } }, "emit")).toBe(true);
+  });
+
+  it("done needs the handoff acknowledged AND the bridge run", () => {
+    const s = { ...picked(), emit: { ok: true }, bridge: { ok: true } };
+    expect(completed(s, "done")).toBe(false);
+    expect(completed({ ...s, handoff: true }, "done")).toBe(true);
+  });
+});
+
+describe("cutSummary — counts and edge lists are different claims", () => {
+  it("names the survivors when the report carries the edge lists (chant#1636)", () => {
+    const withEdges = {
+      ...BUCKET,
+      boundary: {
+        inbound: [
+          {
+            direction: "inbound",
+            survivor: "aws_lambda_function.api",
+            carved: "aws_s3_bucket.assets",
+            attrs: ["bucket"],
+            via: ["environment"],
+            bridge: "tf-data-source",
+            required: "immediately",
+          },
+        ],
+        outbound: [],
+      },
+    };
+    const cut = cutSummary(withEdges);
+    expect(cut.known).toBe(true);
+    expect(cut.items[0]).toContain("aws_lambda_function.api");
+    expect(cut.items[0]).toContain("data source");
+    expect(cut.note).toBeNull();
+  });
+
+  it("falls back to the counts, and SAYS the survivors aren't in this report", () => {
+    const cut = cutSummary(BUCKET);
+    expect(cut.known).toBe(false);
+    expect(cut.items[0]).toContain("1 inbound");
+    expect(cut.note).toContain("chant#1636");
+  });
+
+  it("distinguishes 'no edges' from 'not reported'", () => {
+    const clean = cutSummary({ ...BUCKET, breakdown: { inbound: 0, outbound: 0, tier: 1 } });
+    expect(clean.items[0]).toContain("No boundary edges at all");
+    expect(clean.note).toBeNull();
+  });
+
+  it("reads either shape of the boundary field", () => {
+    const flat = cutSummary({ ...BUCKET, boundary: [{ survivor: "a", carved: "b", direction: "outbound" }] });
+    expect(flat.known).toBe(true);
+  });
+
+  it("falls back to the IR node's own counts when the raw report isn't in hand", () => {
+    // The lens puts inbound/outbound on every card, so a pick made before the
+    // extra /api/carve fetch lands still says something true — rather than
+    // claiming "no boundary edges at all", which would be a different (and
+    // wrong) statement about the same resource.
+    const cut = cutSummary(null, { id: "aws_s3_bucket.assets", attrs: { inbound: 1, outbound: 0 } });
+    expect(cut.items[0]).toContain("1 inbound");
+    expect(cut.note).toContain("chant#1636");
+  });
+
+  it("still reads a genuine zero as zero, not as missing", () => {
+    const cut = cutSummary(null, { id: "x", attrs: { inbound: 0, outbound: 0 } });
+    expect(cut.items[0]).toContain("No boundary edges at all");
+  });
+});
+
+describe("edgeLine", () => {
+  it("reads an inbound edge as the survivor's problem and an outbound as ours", () => {
+    expect(edgeLine({ direction: "inbound", survivor: "lambda", carved: "bucket", attrs: ["bucket"] })).toContain("lambda reads bucket");
+    expect(edgeLine({ direction: "outbound", survivor: "vpc", carved: "sg", attrs: ["id"] })).toContain("from vpc");
+    expect(edgeLine({ direction: "outbound", survivor: "vpc", carved: "sg", bridge: "deferred-input" })).toContain("deploy-time input");
+  });
+});
+
+describe("pickFacts / carveable", () => {
+  it("shows the arithmetic the lens already spelled out", () => {
+    const facts = pickFacts(NODE, BUCKET);
+    expect(facts.map((f) => f.label)).toEqual(["address", "score", "arithmetic", "maps to", "tier"]);
+    expect(facts[2].value).toBe("100 - 12x1 inbound = 88");
+  });
+
+  it("says up front when a resource has no native mapping to carve into", () => {
+    expect(carveable(BUCKET, NODE)).toBeNull();
+    const unmappable = { address: "random_pet.suffix", score: 0, band: "leave in Terraform", breakdown: { tier: null } };
+    expect(carveable(unmappable, { id: "random_pet.suffix", attrs: { tier: "none" } })).toContain("no known native mapping");
+  });
+});
+
+describe("runbookCommands", () => {
+  // chant's own runbook shape (carve bridge, 0.44.4), trimmed.
+  const RUNBOOK = `# Carve-out: aws_s3_bucket.assets → chant   [observe-first, reversible]
+
+## 1. Review the emitted chant source
+    (produced by \`chant carve emit\` — confirm it builds to a spec-true template)
+
+## 2. Stop Terraform managing the resource (does NOT destroy it)
+    terraform state rm aws_s3_bucket.assets aws_s3_bucket_versioning.assets
+
+## 3. Confirm no destroy, then patch the survivors
+    terraform plan   # expect 0 to destroy
+    # the generated bridge patch removes the carved block(s)
+    terraform plan   # expect: in-place updates to the survivors only
+    terraform apply
+
+## Rollback (any time before apply-graduation)
+    terraform import aws_s3_bucket.assets <physical-id>
+`;
+
+  it("takes the indented commands, in order, under their own headings", () => {
+    const cmds = runbookCommands(RUNBOOK);
+    expect(cmds.map((c) => c.command)).toEqual([
+      "terraform state rm aws_s3_bucket.assets aws_s3_bucket_versioning.assets",
+      "terraform plan",
+      "terraform apply",
+      "terraform import aws_s3_bucket.assets <physical-id>",
+    ]);
+    expect(cmds[0].section).toContain("Stop Terraform managing");
+  });
+
+  it("drops annotations, keeps a trailing comment as the row's note, and dedupes", () => {
+    const cmds = runbookCommands(RUNBOOK);
+    expect(cmds.some((c) => c.command.startsWith("("))).toBe(false);
+    expect(cmds.some((c) => c.command.startsWith("#"))).toBe(false);
+    expect(cmds.filter((c) => c.command === "terraform plan")).toHaveLength(1);
+    expect(cmds[1].note).toBe("expect 0 to destroy");
+  });
+
+  it("survives an empty or missing runbook", () => {
+    expect(runbookCommands("")).toEqual([]);
+    expect(runbookCommands(null)).toEqual([]);
+  });
+});
+
+describe("lintVerdict", () => {
+  it("counts warnings off chant's SUMMARY line, not the column numbers above it", () => {
+    const output =
+      "     5:1    warning  Exported declarable 'assets' is never referenced.  COR004\n" +
+      "     5:23   warning  S3 Bucket created without encryption configuration.  WAW006\n" +
+      "     7:9    warning  Inline object in Declarable constructor.  COR001\n\n" +
+      "⚠ 3 warnings";
+    expect(lintVerdict({ ok: true, code: 0, output }).text).toBe("chant lint: passes, 3 warning(s)");
+  });
+
+  it("reads a clean run and a failing one", () => {
+    expect(lintVerdict({ ok: true, code: 0, output: "" }).text).toBe("chant lint: passes");
+    const bad = lintVerdict({ ok: false, code: 1, output: "✖ 2 errors" });
+    expect(bad.tone).toBe("bad");
+    expect(bad.text).toContain("exited 1");
+  });
+
+  it("is null with no lint at all — nothing to claim", () => {
+    expect(lintVerdict(null)).toBeNull();
+  });
+});

package/web/demos.js

@@ -0,0 +1,71 @@
+// The demo catalog in the switcher (#268) — the panel's half of `behold demo
+// --list`. The server (GET /api/demos) answers with the install's own bundled
+// catalog, each entry already carrying whether it can run on this machine
+// (doctor's PATH probes) and whether starting it reaches the network. This
+// module turns one of those rows into what a button says about it; app.js
+// builds the DOM with the panel's own helpers.
+//
+// A demo that can't run here is rendered disabled with its reason on its face,
+// never hidden: "k8s needs k3d" is a thing worth knowing, and a catalog that
+// silently shrinks to what happens to be installed teaches nothing.
+
+/** GET the catalog. Never throws and never rejects — a server too old to know
+ * the route (or an export with no server at all) is an empty catalog, and the
+ * demos group simply doesn't render. */
+export async function fetchDemos(fetchImpl) {
+  const get = fetchImpl || ((u) => fetch(u));
+  try {
+    const res = await get("/api/demos");
+    if (!res.ok) return [];
+    const body = await res.json();
+    return Array.isArray(body.demos) ? body.demos : [];
+  } catch {
+    return [];
+  }
+}
+
+/** `https://github.com/INTENTIUS/fountain-ops` → `github.com/INTENTIUS/fountain-ops`
+ * — a label wants the host and the path, not the scheme. */
+export function shortRepo(repo) {
+  return String(repo || "").replace(/^[a-z+]+:\/\//i, "").replace(/\.git$/, "");
+}
+
+/** The one thing worth saying about this demo beyond its name: why it can't
+ * run, that starting it clones from the network, or that it's already on disk. */
+export function demoNote(demo) {
+  if (!demo.satisfiable) return demo.reason || "unavailable here";
+  // #254: runnable, but not as an in-place switch — the carve walkthrough
+  // serves a report rather than a project, and a running server can't change
+  // into carve mode. Listed, disabled, with the command that does work.
+  if (demo.switchable === false) return demo.reason || "run it from a terminal";
+  if (demo.fetches) return demo.repo ? `clones ${shortRepo(demo.repo)}` : "clones from the network";
+  if (demo.loaded) return "loaded";
+  return "";
+}
+
+export function demoLabel(demo) {
+  const note = demoNote(demo);
+  return note ? `${demo.name} · ${note}` : demo.name;
+}
+
+/** The tooltip: what the demo is, then exactly what clicking it will do —
+ * including the fetch, before it happens. */
+export function demoTitle(demo) {
+  if (!demo.satisfiable) {
+    return `${demo.description}\n\nCan't run here — ${demo.reason || "a prerequisite is missing"}. Install it and reopen behold.`;
+  }
+  if (demo.switchable === false) {
+    return `${demo.description}\n\nNot a project switch — ${demo.reason || "run it from a terminal"}.`;
+  }
+  const source = demo.fetches
+    ? `Clones ${demo.repo || "a public repo"} into ${demo.target}`
+    : `${demo.loaded ? "Reuses" : "Copies the bundled example to"} ${demo.target}`;
+  const setup = ", installs its dependencies";
+  return `${demo.description}\n\n${source}${setup}, then serves it here. It's yours — edit it and the graph follows.`;
+}
+
+/** The loading line, said while it runs. Distinguishes the fetch from the copy
+ * for the same reason the button does. */
+export function demoProgress(demo) {
+  return `loading the ${demo.name} demo — ${demo.fetches ? "cloning" : "copying"}, installing…`;
+}

package/web/demos.test.js

@@ -0,0 +1,83 @@
+// #268: what the switcher's demo buttons say. Pure functions over one /api/demos
+// row, so they get unit tests next to them; the smoke covers the DOM they end up
+// in. The two rules worth pinning: a demo that can't run here says WHY (it is
+// rendered disabled, not dropped), and one that would clone from the network
+// says so on the button, before anyone clicks it.
+import { describe, it, expect } from "vitest";
+import { fetchDemos, shortRepo, demoNote, demoLabel, demoTitle, demoProgress } from "./demos.js";
+
+const row = (over = {}) => ({
+  name: "k8s",
+  description: "nginx on a throwaway k3d cluster.",
+  requires: ["docker", "k3d"],
+  source: "bundled",
+  fetches: false,
+  target: "/w/behold-demos/k8s",
+  loaded: false,
+  satisfiable: true,
+  ...over,
+});
+
+describe("the demo button's face", () => {
+  it("a runnable, unloaded demo is just its name", () => {
+    expect(demoLabel(row())).toBe("k8s");
+    expect(demoNote(row())).toBe("");
+  });
+
+  it("an unsatisfiable demo carries its reason — the disabled row still teaches", () => {
+    const blocked = row({ satisfiable: false, reason: "needs k3d on PATH" });
+    expect(demoLabel(blocked)).toBe("k8s · needs k3d on PATH");
+    expect(demoTitle(blocked)).toContain("Can't run here — needs k3d on PATH");
+    // A server that forgot the reason still says something honest.
+    expect(demoNote(row({ satisfiable: false }))).toBe("unavailable here");
+  });
+
+  it("a network-fetching demo names the repo it would clone", () => {
+    const remote = row({ name: "fountain", fetches: true, repo: "https://github.com/INTENTIUS/fountain-ops" });
+    expect(demoLabel(remote)).toBe("fountain · clones github.com/INTENTIUS/fountain-ops");
+    expect(demoTitle(remote)).toContain("Clones https://github.com/INTENTIUS/fountain-ops");
+    expect(demoProgress(remote)).toContain("cloning");
+    expect(demoProgress(row())).toContain("copying");
+    // The reason wins over the fetch note: it can't run at all.
+    expect(demoNote(row({ fetches: true, satisfiable: false, reason: "needs git on PATH" }))).toBe("needs git on PATH");
+  });
+
+  it("an already-copied demo says so, and its tooltip promises a reuse", () => {
+    expect(demoLabel(row({ loaded: true }))).toBe("k8s · loaded");
+    expect(demoTitle(row({ loaded: true }))).toContain("Reuses /w/behold-demos/k8s");
+    expect(demoTitle(row())).toContain("Copies the bundled example to /w/behold-demos/k8s");
+  });
+
+  it("a runnable demo that isn't a project switch says which command IS (#254)", () => {
+    const carve = row({ name: "carve", switchable: false, reason: "serves a carve report, not a project — run `behold demo carve`" });
+    expect(demoLabel(carve)).toBe("carve · serves a carve report, not a project — run `behold demo carve`");
+    expect(demoTitle(carve)).toContain("Not a project switch");
+    // Still satisfiable — the row is disabled for a different reason, and
+    // conflating the two would tell someone to install something they have.
+    expect(demoTitle(carve)).not.toContain("Can't run here");
+    expect(demoNote(row({ switchable: false }))).toBe("run it from a terminal");
+  });
+
+  it("shortRepo drops the scheme and the .git suffix", () => {
+    expect(shortRepo("https://github.com/INTENTIUS/fountain-ops.git")).toBe("github.com/INTENTIUS/fountain-ops");
+    expect(shortRepo(undefined)).toBe("");
+  });
+});
+
+describe("fetchDemos degrades to an empty catalog", () => {
+  const res = (body, ok = true) => ({ ok, json: async () => body });
+
+  it("returns the rows a server answers with", async () => {
+    expect(await fetchDemos(async () => res({ demos: [row()] }))).toHaveLength(1);
+  });
+
+  it("a 404 (an older server), a junk body, or a dead fetch is no group at all", async () => {
+    expect(await fetchDemos(async () => res({}, false))).toEqual([]);
+    expect(await fetchDemos(async () => res({ demos: "nope" }))).toEqual([]);
+    expect(
+      await fetchDemos(async () => {
+        throw new Error("offline");
+      }),
+    ).toEqual([]);
+  });
+});

package/web/index.html

@@ -174,12 +174,61 @@
       .precondition-error-message { color: var(--muted); white-space: pre-wrap; font: var(--t-body)/1.55 var(--font-mono); }
       .precondition-error-remedy { color: var(--pending); margin-top: 14px; font: var(--t-body)/1.5 var(--font-mono); }
       .precondition-error-remedy::before { content: "→ "; }
+      /* #259: the raw /api payload behind the card, collapsed. */
+      .precondition-error-raw { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; }
+      .precondition-error-rawlabel { color: var(--muted); font-size: var(--t-caption); text-transform: uppercase;
+        letter-spacing: var(--t-caps); margin-bottom: 5px; }
       #actions button, #inspect button { background: var(--panel); color: var(--fg); border: 1px solid var(--rule);
         border-radius: var(--r-ctl); padding: 4px 12px; font-size: var(--t-body); cursor: pointer; }
       #actions button:hover, #inspect button:hover { border-color: var(--focus); }
       #actions button.approve { border-color: var(--managed); color: var(--managed); }
       #inspect button { border-color: var(--foreign); color: var(--foreign); }
 
+      /* ---- Collapsible JSON (#259) -----------------------------------------
+         web/json-view.js builds this; nothing else styles it. Two colours and
+         one font: keys and scalars are --fg (the data), every bracket, comma,
+         chevron, count and affordance is --muted (the punctuation around it).
+         The status hues are deliberately NOT used — they carry meaning in this
+         pane, and unlike --fg/--muted they clear no contrast floor across the
+         552 palettes (#240), so a "strings are green" scheme would be
+         unreadable on some of them.
+         Indent is 2ch — the same two spaces the copied text carries — with a
+         --line rule down it so a deep tree still tracks by eye. */
+      .jsonv { font: var(--t-body)/1.5 var(--font-mono); color: var(--fg); overflow-wrap: anywhere; }
+      .jsonv-children { padding-left: 2ch; border-left: 1px solid var(--line); }
+      .jsonv-node[data-open="0"] > .jsonv-children,
+      .jsonv-node[data-open="0"] > .jsonv-tail { display: none; }
+      .jsonv-node[data-open="1"] > .jsonv-line .jsonv-summary,
+      .jsonv-node[data-open="1"] > .jsonv-line .jsonv-close-inline { display: none; }
+      .jsonv-key { color: var(--fg); }
+      .jsonv-punct, .jsonv-summary, .jsonv-toggle, .jsonv-null { color: var(--muted); }
+      .jsonv-head { cursor: pointer; border-radius: var(--r-ctl); }
+      .jsonv-head:hover .jsonv-toggle { color: var(--fg); }
+      .jsonv-toggle { display: inline-block; width: 1.2ch; user-select: none; }
+      /* The two affordances stay quiet until the row is under the pointer or a
+         keyboard focus is inside it — a tree of visible "copy" links reads as
+         chrome, not as data. */
+      .jsonv-copy, .jsonv-more { color: var(--muted); font-size: var(--t-caption); cursor: pointer;
+        margin-left: 8px; user-select: none; }
+      .jsonv-copy { opacity: 0; }
+      .jsonv-line:hover > .jsonv-copy, .jsonv-copy:focus-visible, .jsonv-copy[data-copied] { opacity: 1; }
+      .jsonv-copy:hover, .jsonv-more:hover { color: var(--fg); }
+      .jsonv-copy[data-copied="1"] { color: var(--managed); }
+      .jsonv-copy[data-copied="0"] { color: var(--degraded); }
+      .jsonv-head:focus-visible, .jsonv-copy:focus-visible, .jsonv-more:focus-visible {
+        outline: 1px solid var(--focus); outline-offset: 1px; }
+      /* In the inspect pane the tree replaces a <dd>'s text, so it inherits the
+         pane's own mono scale and needs no extra gap. */
+      #inspect dd > .jsonv { margin-top: 1px; }
+      /* A value PAIR (was/now, declared/live, baseline/live) whose sides are
+         trees rather than scalars — see pairCell() in app.js. */
+      #inspect .pair-row { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; }
+      #inspect .pair-row > .jsonv { flex: 1; min-width: 0; }
+      #inspect .pair-label { color: var(--muted); font-size: var(--t-caption); flex: none; }
+      /* The op log's JSON lines (#259): a report chant emitted as an object
+         reads as a tree in the now-line, not as one 900-column line. */
+      #nowline .jsonv { white-space: normal; margin: 2px 0; }
+
       /* ---- Floating control panel ------------------------------------------
          An Adobe-style palette holding the controls that used to line the
          header and its strips: zoom, scope lenses, substrate pills, the model
@@ -238,7 +287,10 @@
       #panel .opt { display: block; width: 100%; text-align: left; background: none;
         border: 1px solid transparent; border-radius: var(--r-ctl); color: var(--fg);
         font-size: var(--t-body); padding: 4px 8px; cursor: pointer; }
-      #panel .opt:hover { border-color: var(--line); }
+      #panel .opt:hover:not(:disabled) { border-color: var(--line); }
+      /* #268: a demo whose prerequisites are missing stays visible and says why
+         — dimmed and unclickable, not removed from the catalog. */
+      #panel .opt:disabled { opacity: .5; cursor: not-allowed; }
       #panel .opt.active { background: var(--active); border-color: var(--rule); color: var(--fg);
         box-shadow: inset 2px 0 0 var(--pending); }
       #panel select { width: 100%; background: var(--well); color: var(--fg); border: 1px solid var(--line);
@@ -295,6 +347,46 @@
       .dial-detail { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted);
         font: var(--t-caption)/1.6 var(--font-mono); }
 
+      /* The carve walkthrough (#254) — the panel's Carve tab. Six steps on the
+         same track the deploy dial uses, so "where am I in this" reads the same
+         way in both places; below it, the step's own panel. Every colour here is
+         a shared token, so all 552 palettes get it for free. */
+      #tab-carve { display: flex; flex-direction: column; gap: 10px; }
+      #tab-carve .dial-track { gap: 4px; }
+      .carve-step { padding: 3px 8px; font-size: var(--t-caption); }
+      .carve-step.done { color: var(--managed); border-color: color-mix(in srgb, var(--managed) 45%, var(--rule)); }
+      .carve-step.blocked { opacity: .55; }
+      .carve-body { display: flex; flex-direction: column; gap: 6px; }
+      /* Data — chant's output, a file, a command — is mono and boxed; prose
+         about it stays in the panel's own voice. */
+      .carve-pre { margin: 0; background: var(--well); border: 1px solid var(--line);
+        border-radius: var(--r-ctl); padding: 6px 8px; max-height: 240px; overflow: auto;
+        font: var(--t-caption)/1.5 var(--font-mono); color: var(--fg); white-space: pre-wrap;
+        overflow-wrap: anywhere; }
+      .carve-pre.carve-cmd { color: var(--muted); }
+      .carve-artifact { display: flex; flex-direction: column; gap: 3px; }
+      .carve-path { font: var(--t-caption)/1.5 var(--font-mono); overflow-wrap: anywhere; }
+      .carve-cut, .carve-honesty { margin: 2px 0; }
+      /* The one thing the walkthrough will not do for you, and the refusals it
+         hands back — same card, because they are the same kind of statement. */
+      .carve-refusal { border: 1px solid var(--degraded); border-left: 3px solid var(--degraded);
+        border-radius: var(--r-ctl); padding: 6px 8px; background: var(--well); }
+      .carve-refusal.carve-human { border-color: var(--pending); border-left-color: var(--pending); }
+      .carve-refusal-title { font-size: var(--t-body); margin-bottom: 2px; }
+      .carve-cmd-row { align-items: center; gap: 6px; }
+      .carve-cmd-text { font: var(--t-caption)/1.6 var(--font-mono); background: var(--well);
+        border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 3px 6px;
+        overflow-wrap: anywhere; }
+      .carve-cmd-note, .carve-section { margin: 2px 0; }
+      .carve-endcard { border: 1px solid var(--managed); border-left: 3px solid var(--managed);
+        border-radius: var(--r-ctl); padding: 6px 8px; background: var(--well); }
+      .carve-endcard-title { font-size: var(--t-body); margin-bottom: 2px; }
+      .carve-caveat > summary { cursor: pointer; color: var(--muted);
+        font: var(--t-caption)/1.6 var(--font-mono); }
+      /* The still frame of the morph the follow-up animates: a carved card
+         wears the managed edge its new owner paints everything with. */
+      #graph [data-node-id].carved rect:first-of-type { stroke: var(--managed); stroke-width: 2; }
+
       #nowline { grid-column: 1 / 3; grid-row: 2; margin: 0; max-height: 160px; overflow: auto; display: none;
         background: var(--well); border-top: 1px solid var(--rule); padding: 8px 12px;
         font: var(--t-caption)/1.6 var(--font-mono); color: var(--fg); white-space: pre-wrap; }