@nanobpm/nano-workforce 0.137.0 → 0.138.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [0.138.0](https://github.com/nanobpm/nano-workforce/compare/v0.137.0...v0.138.0) (2026-08-24)
+
+### Features
+
+* **delivery-graphs:** split preview from stage + collapsible compose + fix example ([#517](https://github.com/nanobpm/nano-workforce/issues/517)) ([abb4a10](https://github.com/nanobpm/nano-workforce/commit/abb4a10e9a8f7f53be40488d9991a3660a9f7518)), closes [#516](https://github.com/nanobpm/nano-workforce/issues/516) [#460](https://github.com/nanobpm/nano-workforce/issues/460) [#516](https://github.com/nanobpm/nano-workforce/issues/516)
+
 ## [0.137.0](https://github.com/nanobpm/nano-workforce/compare/v0.136.0...v0.137.0) (2026-08-24)
 
 ### Features

package/app/deliveryGraphTextIngress.ts

@@ -0,0 +1,94 @@
+// app/deliveryGraphTextIngress.ts — the shared PARSE → COMPILE → PROJECT pipeline behind the two
+// human-facing delivery-graph text-ingress doors (issue #516):
+//   • `previewDeliveryGraph`  — PURE preview: compile + project, NO staging.
+//   • `stageDeliveryGraph`    — compile + project + STAGE a proposal for operator dispatch.
+//
+// Splitting preview from staging means both doors run the IDENTICAL parse+compile+project step and
+// differ ONLY in whether they persist a staged proposal. That step therefore lives here ONCE
+// (derivation over duplication) rather than being copied per door — the previous single door inlined
+// it, and forking it would have created two drift-prone compile paths. Neither door dispatches; the
+// #460 boundary (dispatch is an operator action on a staged proposal) is untouched.
+
+import type { DeliveryGraphTextResult } from "../nano-generated/api-io.d.ts";
+import { compileDeliveryGraph } from "./deliveryGraphCompiler.ts";
+import { proposalReviewUrl } from "./deliveryGraphProposals.ts";
+import { parseDeliveryGraphText } from "./deliveryGraphText.ts";
+import { deliveryGraphDigest } from "./deliveryRunner.ts";
+
+type CompileResult = Awaited<ReturnType<typeof compileDeliveryGraph>>;
+type CompiledOk = Extract<CompileResult, { ok: true }>;
+type CompileErrors = Extract<CompileResult, { ok: false }>["errors"];
+
+/** A parse/validation failure, already shaped as the door's 400 response. */
+export interface TextIngressFailure {
+  ok: false;
+  status: 400;
+  body: { ok: false; error: string; errors?: CompileErrors };
+}
+
+/** A well-formed, compiled graph ready to project (and, for the stage door, to persist). */
+export interface TextIngressOk {
+  ok: true;
+  graph: unknown;
+  compiled: CompiledOk;
+  digest: string;
+  name: string | null;
+}
+
+export type TextIngressResult = TextIngressOk | TextIngressFailure;
+
+/** Parse a UI JSON-paste body (`{ graphJson }`), then run the SAME pure compiler the agent door uses.
+ * A blank/invalid paste or a graph that fails validation is returned as a ready-to-send 400; success
+ * carries the compiled graph plus its content `digest` and human `name`. Never throws / never a 500. */
+export async function parseAndCompileText(body: unknown): Promise<TextIngressResult> {
+  const parsed = parseDeliveryGraphText(body);
+  if (!parsed.ok) {
+    return { ok: false, status: 400, body: { ok: false, error: parsed.error } };
+  }
+  const compiled = await compileDeliveryGraph(parsed.graph);
+  if (!compiled.ok) {
+    return {
+      ok: false,
+      status: 400,
+      body: {
+        ok: false,
+        error: `graph failed validation: ${compiled.errors.length} error(s)`,
+        errors: compiled.errors,
+      },
+    };
+  }
+  const digest = deliveryGraphDigest(compiled.bpmn);
+  const name =
+    typeof compiled.resolved.name === "string" && compiled.resolved.name.trim() !== ""
+      ? compiled.resolved.name.trim()
+      : null;
+  return { ok: true, graph: parsed.graph, compiled, digest, name };
+}
+
+/** Project a compiled graph into the shared `DeliveryGraphTextResult` 200 body both doors return: the
+ * `digest`, node/human/side-effect counts, the mermaid `diagram`, and the full human-stop / side-effect
+ * detail the Delivery Graphs page renders (#441). `staged` records whether a proposal was persisted;
+ * `includeBpmn` attaches the compiled BPMN (with DI) so the PURE preview door can drive the host
+ * explorer's DI preview WITHOUT staging (the stage door omits it — the staged grid recompiles by
+ * digest). */
+export function buildTextPreviewBody(
+  ok: TextIngressOk,
+  opts: { staged: boolean; includeBpmn?: boolean },
+): DeliveryGraphTextResult {
+  const { compiled, digest, name } = ok;
+  return {
+    ok: true,
+    staged: opts.staged,
+    digest,
+    reviewUrl: proposalReviewUrl(digest),
+    ...(name !== null ? { title: name } : {}),
+    sideEffecting: compiled.sideEffects.length > 0,
+    nodeCount: compiled.resolved.nodes.length,
+    humanNodeCount: compiled.humanNodes.length,
+    sideEffectCount: compiled.sideEffects.length,
+    diagram: compiled.diagram,
+    humanNodes: compiled.humanNodes,
+    sideEffects: compiled.sideEffects,
+    ...(opts.includeBpmn ? { bpmn: compiled.bpmn } : {}),
+  };
+}

package/openapi.yaml

@@ -1590,12 +1590,30 @@ components:
         message:
           type: string
           description: Human-actionable description of the failure.
-    DeliveryGraphTextSubmit:
+    DeliveryGraphPreviewSubmit:
       description: >-
-        The human-facing UI JSON-paste PREVIEW request (issue #386). The Delivery Graphs page's text
-        field cannot submit a structured object, so the operator's pasted delivery-graph is carried as
+        The human-facing UI JSON-paste PREVIEW request (issues #386 + #516). The Delivery Graphs page's
+        "Preview" action cannot submit a structured object, so the operator's pasted delivery-graph is
+        carried as a raw JSON STRING (`graphJson`), parsed server-side and handed to the SAME pure
+        `compileDeliveryGraph` compiler the agent-facing door uses. Preview compiles WITHOUT persisting.
+        Per-operation schema (not shared with the stage door) so each door's request stays independently
+        evolvable.
+      type: object
+      additionalProperties: false
+      required:
+        - graphJson
+      properties:
+        graphJson:
+          type: string
+          description: The pasted delivery-graph JSON (a serialised `DeliveryGraph`), parsed server-side.
+    DeliveryGraphStageSubmit:
+      description: >-
+        The human-facing UI JSON-paste STAGE request (issue #516) — the commit half of the preview/stage
+        split. The Delivery Graphs page's "Stage" action carries the operator's pasted delivery-graph as
         a raw JSON STRING (`graphJson`), parsed server-side and handed to the SAME pure
-        `compileDeliveryGraph` compiler the agent-facing door uses. No parallel compile path.
+        `compileDeliveryGraph` compiler the preview/agent doors use, then persisted as a `staged`
+        proposal. Per-operation schema (not shared with the preview door) so each door's request stays
+        independently evolvable.
       type: object
       additionalProperties: false
       required:
@@ -1820,6 +1838,13 @@ components:
           description: >-
             The side-effecting (`agent`/`connector`) actions the compiled graph WILL perform (preview)
             — what an approval authorises (Decision 7), rendered by the Delivery Graphs page (#441).
+        bpmn:
+          type: string
+          description: >-
+            The compiled BPMN 2.0 XML INCLUDING diagram interchange (`bpmndi:BPMNDiagram`) — returned by
+            the PURE preview door (`previewDeliveryGraph`) only, so the Delivery Graphs page can render
+            the laid-out BPMN in the host explorer WITHOUT staging (#516). Byte-identical to what a
+            dispatch would deploy. Omitted by the stage/dispatch outcomes.
     ResolvedDeliveryNode:
       description: >-
         A normalised node in the compiled graph (ADR 0005 slice S1) — its `id`, `kind`, the
@@ -2887,24 +2912,56 @@ paths:
   /actions/delivery-graph/preview:
     post:
       operationId: previewDeliveryGraph
-      summary: UI JSON-paste PREVIEW+STAGE — parse a pasted delivery-graph JSON string, compile it and stage it for operator dispatch. (ADR 0005 Decision 7 / #460)
+      summary: UI JSON-paste PURE PREVIEW — parse a pasted delivery-graph JSON string and compile it, without staging. (ADR 0005 Decision 7 / #460 / #516)
+      description: >-
+        The human-facing UI JSON-paste PURE PREVIEW ingress. The Delivery Graphs page's "Preview"
+        action posts the operator's pasted JSON as a STRING; this door parses it and runs the SAME
+        `compileDeliveryGraph` compiler the agent-facing door uses, but — unlike the compile/stage doors
+        — it does NOT persist anything (#516: preview and staging are separate operator actions). It
+        returns a compact preview summary (`staged:false`, the `digest`, node/human/side-effect counts,
+        the mermaid `diagram`, the human stops and side effects) PLUS the compiled `bpmn` (with diagram
+        interchange) so the page can render the laid-out BPMN in the host explorer without staging. It
+        never deploys, stages or dispatches. A blank/invalid JSON string, or a graph that fails
+        validation, is a 400 carrying a human `error` (and path-qualified `errors` for a compile failure).
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/DeliveryGraphPreviewSubmit"
+      responses:
+        "200":
+          description: The pasted graph parsed, validated and compiled — the preview summary and compiled BPMN are returned; nothing is staged.
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/DeliveryGraphTextResult"
+        "400":
+          description: The pasted text was not valid JSON, or the graph failed validation/compilation.
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/DeliveryGraphTextResult"
+  /actions/delivery-graph/stage:
+    post:
+      operationId: stageDeliveryGraph
+      summary: UI JSON-paste STAGE — parse a pasted delivery-graph JSON string, compile it and stage it for operator dispatch. (ADR 0005 Decision 7 / #460 / #516)
       description: >-
-        The human-facing UI JSON-paste PREVIEW+STAGE ingress. The Delivery Graphs page's "Preview &
-        stage" action posts the operator's pasted JSON as a STRING; this door parses it and runs the
-        SAME `compileDeliveryGraph` compiler the agent-facing door uses, and — like the agent compile
-        door (issue #460) — persists the compiled graph as a `staged` proposal (content-addressed by its
-        `digest`). It returns a compact preview summary (the `digest`, node/human/side-effect counts,
-        the mermaid `diagram`, the human stops and side effects) plus a navigational `reviewUrl`. It
-        never deploys or dispatches — dispatch is a separate operator action on the staged proposal
-        (the Dispatch button on the staged-proposals grid). A blank/invalid JSON string, or a graph that
-        fails validation, is a 400 carrying a human `error` (and path-qualified `errors` for a compile
-        failure); nothing is staged.
+        The human-facing UI JSON-paste STAGE ingress — the deliberate commit half of the preview/stage
+        split (#516). The Delivery Graphs page's "Stage" action posts the operator's pasted JSON as a
+        STRING; this door parses it, runs the SAME `compileDeliveryGraph` compiler the preview/agent
+        doors use, and — on success — persists the compiled graph as a `staged` proposal
+        (content-addressed by its `digest`). It returns the same preview summary as the preview door but
+        with `staged:true`. It never deploys or dispatches — dispatch is a separate operator action on
+        the staged proposal (the Dispatch button on the staged-proposals grid). A blank/invalid JSON
+        string, or a graph that fails validation, is a 400 carrying a human `error` (and path-qualified
+        `errors` for a compile failure); nothing is staged.
       requestBody:
         required: true
         content:
           application/json:
             schema:
-              $ref: "#/components/schemas/DeliveryGraphTextSubmit"
+              $ref: "#/components/schemas/DeliveryGraphStageSubmit"
       responses:
         "200":
           description: The pasted graph parsed, validated and compiled — staged for operator dispatch; the preview summary is returned.

package/operations/previewDeliveryGraph.test.ts

@@ -1,9 +1,9 @@
 // Tests for the POST /app/api/actions/delivery-graph/preview operation `previewDeliveryGraph` (ADR
-// 0005 Decision 7, issue #460) — the human-facing UI JSON-paste PREVIEW+STAGE ingress. It parses the
-// operator's pasted JSON STRING, runs the SAME `compileDeliveryGraph` compiler the agent door uses,
-// and — like the agent compile door — persists the compiled graph as a `staged` proposal, returning a
-// compact summary (200, `staged:true` + `reviewUrl`) or a human `error` + path-qualified `errors`
-// (400). It never dispatches — that is a separate operator action on the staged proposal.
+// 0005 Decision 7, issues #460 + #516) — the human-facing UI JSON-paste PURE PREVIEW ingress. It
+// parses the operator's pasted JSON STRING, runs the SAME `compileDeliveryGraph` compiler the agent
+// door uses, and returns a compact summary (200, `staged:false`, + the compiled `bpmn`) or a human
+// `error` + path-qualified `errors` (400). Unlike the stage door it persists NOTHING — preview and
+// staging are separate operator actions (#516).
 import { mkdtempSync, rmSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join, resolve } from "node:path";
@@ -42,12 +42,13 @@ const GOOD = JSON.stringify({
   edges: [{ from: "a", to: "b" }],
 });
 
-test("preview-delivery-graph: a pasted well-formed graph → 200 summary, staged, with digest + counts", async () => {
+test("preview-delivery-graph: a pasted well-formed graph → 200 summary, NOT staged, with digest + counts + bpmn", async () => {
   await withApp(async (app, data) => {
     const res = await call(app, { graphJson: GOOD });
     assertEquals(res.status, 200);
     assertEquals(res.body.ok, true);
-    assertEquals(res.body.staged, true);
+    // #516: preview is PURE — it compiles but never stages.
+    assertEquals(res.body.staged, false);
     assert(typeof res.body.digest === "string" && res.body.digest.length > 0);
     assert(typeof res.body.reviewUrl === "string" && res.body.reviewUrl.length > 0);
     assertEquals(res.body.nodeCount, 2);
@@ -56,8 +57,9 @@ test("preview-delivery-graph: a pasted well-formed graph → 200 summary, staged
     assertEquals(res.body.sideEffecting, true);
     assert(typeof res.body.diagram === "string" && res.body.diagram.length > 0);
     assertEquals(res.body.title, "runbook");
-    // The FULL preview detail (#441) — the human stop-points and side-effecting actions the page
-    // renders, not just the counts. `a` is the side-effecting agent node; `b` is the human stop.
+    // The PURE preview returns the laid-out BPMN so the page can render the DI without staging (#516).
+    assert(typeof res.body.bpmn === "string" && res.body.bpmn.includes("bpmndi:BPMNDiagram"));
+    // The FULL preview detail (#441) — the human stop-points and side-effecting actions the page renders.
     assert(Array.isArray(res.body.humanNodes) && res.body.humanNodes.length === 1);
     assertEquals(res.body.humanNodes[0].nodeId, "b");
     assertEquals(res.body.humanNodes[0].prompt, "do X");
@@ -65,19 +67,19 @@ test("preview-delivery-graph: a pasted well-formed graph → 200 summary, staged
     assertEquals(res.body.sideEffects[0].nodeId, "a");
     assertEquals(res.body.sideEffects[0].kind, "agent");
     assert(typeof res.body.sideEffects[0].description === "string" && res.body.sideEffects[0].description.length > 0);
-    // A staged proposal now exists for the operator to dispatch — and NO dispatch handle came back.
-    assertEquals((await deliveryGraphProposals(data).get(res.body.digest))?.status, "staged");
+    // NOTHING was staged, and no dispatch handle came back.
+    assertEquals((await deliveryGraphProposals(data).all()).length, 0);
     assertEquals(res.body.runKey, undefined);
     assertEquals(res.body.processInstanceKey, undefined);
   });
 });
 
-test("preview-delivery-graph: repeated previews stage the identical digest idempotently (one live row)", async () => {
+test("preview-delivery-graph: repeated previews are pure — the identical digest, still nothing staged", async () => {
   await withApp(async (app, data) => {
     const a = await call(app, { graphJson: GOOD });
     const b = await call(app, { graphJson: GOOD });
     assertEquals(a.body.digest, b.body.digest);
-    assertEquals((await deliveryGraphProposals(data).find({ digest: a.body.digest })).length, 1);
+    assertEquals((await deliveryGraphProposals(data).all()).length, 0);
   });
 });
 

package/operations/previewDeliveryGraph.ts

@@ -1,92 +1,34 @@
 // POST /app/api/actions/delivery-graph/preview → operationId `previewDeliveryGraph` (ADR 0005
-// Decision 7, issue #460). The human-facing UI JSON-paste PREVIEW+STAGE ingress: the Delivery Graphs
-// page's "Preview & stage" action posts the operator's pasted delivery-graph as a raw JSON STRING;
-// this door parses it (`parseDeliveryGraphText`) and runs the SAME `compileDeliveryGraph` compiler the
-// agent-facing door uses, and — like the agent compile door — persists the compiled graph as a
-// `staged` proposal (content-addressed by its `digest`).
+// Decision 7, issues #460 + #516). The human-facing UI JSON-paste PURE PREVIEW ingress: the Delivery
+// Graphs page's "Preview" action posts the operator's pasted delivery-graph as a raw JSON STRING; this
+// door parses it (`parseDeliveryGraphText`) and runs the SAME `compileDeliveryGraph` compiler the
+// agent-facing door uses — but, unlike the compile/stage doors, it does NOT persist anything. It is a
+// side-effect-free compile: preview and STAGING are now separate operator actions (#516), so an
+// operator can compile-and-inspect a graph (its diagram, human stop-points, side-effects) and iterate
+// before committing it to the staged-proposals list via the separate "Stage" action (stageDeliveryGraph).
 //
-// It returns a compact preview summary (the `digest`, node/human/side-effect counts, the mermaid
-// `diagram`, and the full human-stop / side-effect detail) plus a navigational `reviewUrl`. It never
-// deploys or dispatches — dispatch is a separate OPERATOR action on the staged proposal (the Dispatch
-// button on the staged-proposals grid). A blank/invalid paste, or a graph that fails validation, is a
-// 400 carrying a human `error` (and path-qualified `errors` for a compile failure); nothing is staged.
+// It returns a compact preview summary (`staged:false`, the `digest`, node/human/side-effect counts,
+// the mermaid `diagram`, the human stops and side effects) PLUS the compiled `bpmn` (with diagram
+// interchange) so the page can render the laid-out BPMN in the host explorer WITHOUT staging. It never
+// deploys or dispatches — dispatch is a separate operator action on a staged proposal. A blank/invalid
+// JSON string, or a graph that fails validation, is a 400 carrying a human `error` (and path-qualified
+// `errors` for a compile failure); nothing is compiled past the failure.
 
-import { compileDeliveryGraph } from "../app/deliveryGraphCompiler.ts";
-import {
-  buildProposalPreview,
-  buildProposalRow,
-  proposalLogicalKey,
-  proposalReviewUrl,
-  stageProposal,
-} from "../app/deliveryGraphProposals.ts";
-import { parseDeliveryGraphText } from "../app/deliveryGraphText.ts";
-import { deliveryGraphDigest } from "../app/deliveryRunner.ts";
+import { buildTextPreviewBody, parseAndCompileText } from "../app/deliveryGraphTextIngress.ts";
 import { defineOperation } from "../nano-generated/operations.ts";
 
 export default defineOperation("previewDeliveryGraph", async ({ body }, app) => {
-  const parsed = parseDeliveryGraphText(body);
-  if (!parsed.ok) {
-    app.log.warn("preview-delivery-graph rejected: parse", { message: parsed.error });
-    return { status: 400, body: { ok: false, error: parsed.error } };
+  const ingress = await parseAndCompileText(body);
+  if (!ingress.ok) {
+    app.log.warn("preview-delivery-graph rejected", { message: ingress.body.error });
+    return { status: ingress.status, body: ingress.body };
   }
-  const compiled = await compileDeliveryGraph(parsed.graph);
-  if (!compiled.ok) {
-    app.log.warn("preview-delivery-graph rejected: compile", { errors: compiled.errors.length });
-    return {
-      status: 400,
-      body: {
-        ok: false,
-        error: `graph failed validation: ${compiled.errors.length} error(s)`,
-        errors: compiled.errors,
-      },
-    };
-  }
-
-  const digest = deliveryGraphDigest(compiled.bpmn);
-  const name =
-    typeof compiled.resolved.name === "string" && compiled.resolved.name.trim() !== ""
-      ? compiled.resolved.name.trim()
-      : null;
-  const preview = buildProposalPreview(compiled);
-  await stageProposal(
-    app.data,
-    buildProposalRow({
-      digest,
-      logicalKey: proposalLogicalKey(name, digest),
-      title: name,
-      graphJson: JSON.stringify(parsed.graph),
-      preview,
-      nodeCount: compiled.resolved.nodes.length,
-      humanNodeCount: compiled.humanNodes.length,
-      sideEffectCount: compiled.sideEffects.length,
-      sideEffecting: compiled.sideEffects.length > 0,
-    }),
-  );
 
-  app.log.info("preview-delivery-graph staged", {
-    nodes: compiled.resolved.nodes.length,
-    humanNodes: compiled.humanNodes.length,
-    sideEffects: compiled.sideEffects.length,
-    digest,
+  app.log.info("preview-delivery-graph compiled (not staged)", {
+    nodes: ingress.compiled.resolved.nodes.length,
+    humanNodes: ingress.compiled.humanNodes.length,
+    sideEffects: ingress.compiled.sideEffects.length,
+    digest: ingress.digest,
   });
-  return {
-    status: 200,
-    body: {
-      ok: true,
-      staged: true,
-      digest,
-      reviewUrl: proposalReviewUrl(digest),
-      ...(name !== null ? { title: name } : {}),
-      sideEffecting: compiled.sideEffects.length > 0,
-      nodeCount: compiled.resolved.nodes.length,
-      humanNodeCount: compiled.humanNodes.length,
-      sideEffectCount: compiled.sideEffects.length,
-      diagram: compiled.diagram,
-      // The FULL extracted preview detail (not just the counts): the human stop-points and the
-      // side-effecting actions. The Delivery Graphs page renders these so the operator sees WHERE it
-      // parks on a person and WHAT it will do — the "preview before dispatch" principle made visible.
-      humanNodes: compiled.humanNodes,
-      sideEffects: compiled.sideEffects,
-    },
-  };
+  return { status: 200, body: buildTextPreviewBody(ingress, { staged: false, includeBpmn: true }) };
 });

package/operations/stageDeliveryGraph.test.ts

@@ -0,0 +1,106 @@
+// Tests for the POST /app/api/actions/delivery-graph/stage operation `stageDeliveryGraph` (ADR 0005
+// Decision 7, issues #460 + #516) — the STAGE half of the preview/stage split. It parses the
+// operator's pasted JSON STRING, runs the SAME compiler the preview/agent doors use, and — on success
+// — persists the compiled graph as a `staged` proposal (200, `staged:true`). Unlike the pure preview
+// door it PERSISTS; unlike dispatch it never launches (no run key / instance key comes back).
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join, resolve } from "node:path";
+import { test } from "node:test";
+import { assert, assertEquals } from "#test-assert";
+import type { AppApi, DataLayer } from "@nanobpm/urban";
+import { bootTestApp } from "@nanobpm/urban-testkit";
+import { deliveryGraphProposals } from "../app/deliveryGraphProposals.ts";
+import { noopLog } from "../test/log.ts";
+import handler from "./stageDeliveryGraph.ts";
+
+const APP_ROOT = resolve(import.meta.dirname, "..");
+
+async function withApp(fn: (app: AppApi, data: DataLayer) => Promise<void>): Promise<void> {
+  const dir = mkdtempSync(join(tmpdir(), "nwf-dgstage-"));
+  const app = await bootTestApp(APP_ROOT, { env: { NANO_APP_DB_URL: `file:${join(dir, "app.db")}` } });
+  try {
+    const edge = { data: app.db, log: noopLog() } as unknown as AppApi;
+    await fn(edge, app.db);
+  } finally {
+    await app.stop?.();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}
+
+async function call(app: AppApi, body: unknown) {
+  return (await handler({ req: {} as any, params: {}, query: {}, body } as any, app)) as any;
+}
+
+const GOOD = JSON.stringify({
+  name: "runbook",
+  nodes: [
+    { id: "a", kind: "agent", agent: { jobType: "senior:feature" } },
+    { id: "b", kind: "human", human: { prompt: "do X" } },
+  ],
+  edges: [{ from: "a", to: "b" }],
+});
+
+test("stage-delivery-graph: a pasted well-formed graph → 200, staged, with digest + counts", async () => {
+  await withApp(async (app, data) => {
+    const res = await call(app, { graphJson: GOOD });
+    assertEquals(res.status, 200);
+    assertEquals(res.body.ok, true);
+    assertEquals(res.body.staged, true);
+    assert(typeof res.body.digest === "string" && res.body.digest.length > 0);
+    assert(typeof res.body.reviewUrl === "string" && res.body.reviewUrl.length > 0);
+    assertEquals(res.body.nodeCount, 2);
+    assertEquals(res.body.humanNodeCount, 1);
+    assertEquals(res.body.sideEffectCount, 1);
+    assertEquals(res.body.sideEffecting, true);
+    assertEquals(res.body.title, "runbook");
+    // Full preview detail is still returned so the page renders the same summary as preview.
+    assert(Array.isArray(res.body.humanNodes) && res.body.humanNodes.length === 1);
+    assert(Array.isArray(res.body.sideEffects) && res.body.sideEffects.length === 1);
+    // The stage door persists a `staged` proposal — and returns NO dispatch handle (#460).
+    assertEquals((await deliveryGraphProposals(data).get(res.body.digest))?.status, "staged");
+    assertEquals(res.body.runKey, undefined);
+    assertEquals(res.body.processInstanceKey, undefined);
+    // The stage summary omits the heavy BPMN (the staged grid recompiles by digest for its DI preview).
+    assertEquals(res.body.bpmn, undefined);
+  });
+});
+
+test("stage-delivery-graph: repeated stages of the same graph → one live row (idempotent on digest)", async () => {
+  await withApp(async (app, data) => {
+    const a = await call(app, { graphJson: GOOD });
+    const b = await call(app, { graphJson: GOOD });
+    assertEquals(a.body.digest, b.body.digest);
+    assertEquals((await deliveryGraphProposals(data).find({ digest: a.body.digest })).length, 1);
+  });
+});
+
+test("stage-delivery-graph: text that is not valid JSON → 400, nothing staged", async () => {
+  await withApp(async (app, data) => {
+    const res = await call(app, { graphJson: "{ not json" });
+    assertEquals(res.status, 400);
+    assertEquals(res.body.ok, false);
+    assert(typeof res.body.error === "string" && res.body.error.includes("not valid JSON"));
+    assertEquals((await deliveryGraphProposals(data).all()).length, 0);
+  });
+});
+
+test("stage-delivery-graph: a valid-JSON but malformed graph → 400 with path-qualified errors, nothing staged", async () => {
+  await withApp(async (app, data) => {
+    const res = await call(app, {
+      graphJson: JSON.stringify({ nodes: [{ id: "a", kind: "agent", agent: { jobType: "j" } }], edges: [{ from: "a", to: "ghost" }] }),
+    });
+    assertEquals(res.status, 400);
+    assertEquals(res.body.ok, false);
+    assert(Array.isArray(res.body.errors) && res.body.errors.length > 0);
+    assertEquals((await deliveryGraphProposals(data).all()).length, 0);
+  });
+});
+
+test("stage-delivery-graph: a blank paste → 400, never a 500", async () => {
+  await withApp(async (app) => {
+    const res = await call(app, { graphJson: "   " });
+    assertEquals(res.status, 400);
+    assertEquals(res.body.ok, false);
+  });
+});

package/operations/stageDeliveryGraph.ts

@@ -0,0 +1,53 @@
+// POST /app/api/actions/delivery-graph/stage → operationId `stageDeliveryGraph` (ADR 0005 Decision 7,
+// issues #460 + #516). The human-facing UI JSON-paste STAGE ingress: the Delivery Graphs page's
+// "Stage" action posts the operator's pasted delivery-graph as a raw JSON STRING; this door parses it,
+// runs the SAME `compileDeliveryGraph` compiler the preview/agent doors use, and — on success —
+// persists the compiled graph as a `staged` proposal (content-addressed by its `digest`) for an
+// operator to dispatch from the Staged proposals grid.
+//
+// It is the STAGE half of the preview/stage split (#516): preview (`previewDeliveryGraph`) compiles
+// WITHOUT persisting; this door is the deliberate commit step. It never deploys or dispatches —
+// dispatch is a separate OPERATOR action on the staged proposal (the Dispatch button on the
+// staged-proposals grid, #460). A blank/invalid JSON string, or a graph that fails validation, is a
+// 400 carrying a human `error` (and path-qualified `errors` for a compile failure); nothing is staged.
+
+import {
+  buildProposalPreview,
+  buildProposalRow,
+  proposalLogicalKey,
+  stageProposal,
+} from "../app/deliveryGraphProposals.ts";
+import { buildTextPreviewBody, parseAndCompileText } from "../app/deliveryGraphTextIngress.ts";
+import { defineOperation } from "../nano-generated/operations.ts";
+
+export default defineOperation("stageDeliveryGraph", async ({ body }, app) => {
+  const ingress = await parseAndCompileText(body);
+  if (!ingress.ok) {
+    app.log.warn("stage-delivery-graph rejected", { message: ingress.body.error });
+    return { status: ingress.status, body: ingress.body };
+  }
+
+  const { compiled, digest, name, graph } = ingress;
+  await stageProposal(
+    app.data,
+    buildProposalRow({
+      digest,
+      logicalKey: proposalLogicalKey(name, digest),
+      title: name,
+      graphJson: JSON.stringify(graph),
+      preview: buildProposalPreview(compiled),
+      nodeCount: compiled.resolved.nodes.length,
+      humanNodeCount: compiled.humanNodes.length,
+      sideEffectCount: compiled.sideEffects.length,
+      sideEffecting: compiled.sideEffects.length > 0,
+    }),
+  );
+
+  app.log.info("stage-delivery-graph staged", {
+    nodes: compiled.resolved.nodes.length,
+    humanNodes: compiled.humanNodes.length,
+    sideEffects: compiled.sideEffects.length,
+    digest,
+  });
+  return { status: 200, body: buildTextPreviewBody(ingress, { staged: true }) };
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanobpm/nano-workforce",
-  "version": "0.137.0",
+  "version": "0.138.0",
   "description": "Nano Workforce — an Agent Graph Orchestration application for Agentic SDLC: durable BPMN processes that coordinate a graph of AI agents across the software delivery lifecycle.",
   "type": "module",
   "main": "main.ts",
@@ -66,12 +66,12 @@
     "@biomejs/biome": "^2.4.11",
     "@nanobpm/urban-testkit": "^0.13.1",
     "@nanobpm/workflow": "^0.14.0",
-    "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/changelog": "^7.0.0",
+    "@semantic-release/git": "^11.0.0",
     "@semantic-release/npm": "^13.1.5",
-    "@types/node": "^22",
+    "@types/node": "^24.0.0",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "semantic-release": "^24.2.9",
+    "semantic-release": "^25.0.0",
     "typescript": "^5.6.0"
   },
   "overrides": {

package/pages/delivery-graphs/delivery-graphs.css

@@ -33,6 +33,53 @@
   border-color: rgba(63, 185, 80, 0.5);
 }
 
+/* The compose panel is a native <details> so it can collapse (#516). Its <summary> is the disclosure
+   header; the caret rotates on open, and the body hides when collapsed (the textarea keeps its value). */
+.dg .compose > summary {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  font-size: 15px;
+  font-weight: 600;
+  user-select: none;
+}
+
+.dg .compose > summary::-webkit-details-marker {
+  display: none;
+}
+
+.dg .compose > summary::before {
+  content: "\25B6";
+  font-size: 10px;
+  color: #8aa0b8;
+  transition: transform 0.15s ease;
+}
+
+.dg .compose[open] > summary::before {
+  transform: rotate(90deg);
+}
+
+.dg .compose > summary:focus-visible {
+  outline: 2px solid #388bfd;
+  outline-offset: 3px;
+  border-radius: 4px;
+}
+
+.dg .compose > summary .hint {
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.dg .compose[open] > summary .hint {
+  display: none;
+}
+
+.dg .compose-body {
+  margin-top: 12px;
+}
+
 .dg h2 {
   margin: 0 0 8px;
   font-size: 15px;

package/pages/delivery-graphs/embed.html

@@ -24,7 +24,7 @@
       const cfg = window.__NANO_APP_VIEW__ ?? {};
       mountDeliveryGraphs(cfg.host ?? document.getElementById("delivery-graphs-root"), {
         previewUrl: cfg.previewUrl,
-        dispatchUrl: cfg.dispatchUrl,
+        stageUrl: cfg.stageUrl,
         hookSecret: cfg.hookSecret,
       });
     </script>

package/pages/delivery-graphs/mount.js

@@ -1,42 +1,35 @@
-// pages/delivery-graphs/mount.js — the Delivery Graphs compose → preview → STAGE view (ADR 0005,
-// issues #441 + #460). The human front door for a delivery graph: author/paste a `DeliveryGraph` JSON
-// and PREVIEW it — a compile that renders the plan (mermaid `diagram`, the `humanNodes[]` stop-points,
-// the `sideEffects[]` a dispatch will perform) AND stages it as a proposal for dispatch.
+// pages/delivery-graphs/mount.js — the Delivery Graphs COMPOSE → PREVIEW / STAGE view (ADR 0005,
+// issues #441 + #460 + #516). The human front door for a delivery graph: author/paste a `DeliveryGraph`
+// JSON, PREVIEW it (a pure compile that renders the plan — mermaid `diagram`, the `humanNodes[]`
+// stop-points, the `sideEffects[]` a dispatch will perform — and the laid-out BPMN in the host
+// explorer), and, as a SEPARATE deliberate action, STAGE it as a proposal for dispatch.
 //
-// Dispatch is deliberately NOT here (issue #460): it is an OPERATOR action on the **Staged proposals**
-// grid on the same page (the Dispatch row-action, which posts the proposal's `digest`). Removing the
-// dispatch affordance from every agent-reachable seam closes the self-approval hole the old replayable
-// approval token (a content digest handed back to the same caller) left open — this view only ever
-// stages, never launches.
+// Preview and Stage are separate (issue #516): Preview compiles WITHOUT persisting, so an operator can
+// inspect and iterate on a graph before committing it to the Staged-proposals list. Dispatch is NOT
+// here (issue #460): it is an OPERATOR action on the **Staged proposals** grid on the same page.
+// Removing the dispatch affordance from every agent-reachable seam closes the self-approval hole the
+// old replayable approval token left open — this view only ever previews/stages, never launches.
 //
 // A self-contained, dependency-free renderer in the SAME shape as the demand×supply board
 // (pages/board/mount.js) and the agent cockpit: the SAME module mounts embedded in the console (App
 // View) and standalone on a phone — only the host element and injected endpoint config differ. The app
-// has no browser build step, so this consumes the preview door straight off the wire.
-//
-// It is a THIN UI over the EXISTING door — there is no parallel compile/stage path:
-//   • PREVIEW & STAGE → POST previewUrl (previewDeliveryGraph) — renders the mermaid `diagram`, the
-//     `humanNodes[]` stop-points, the `sideEffects[]` a dispatch will perform, and path-qualified
-//     validation `errors[]` inline for a 400 (the fix-and-recompile loop); on success the compiled
-//     graph is STAGED as a proposal (an operator dispatches it from the Staged proposals grid below).
+// has no browser build step, so this consumes the preview/stage doors straight off the wire.
 
 const DEFAULT_PREVIEW_URL = "app/api/actions/delivery-graph/preview";
-// The read-only DI preview door: recompiles a staged proposal's BPMN (with diagram interchange) so its
-// generated diagram can be rendered in the host explorer BEFORE dispatch. No deploy, no dispatch.
-const DEFAULT_PROPOSAL_BPMN_URL = "app/api/actions/delivery-graph/proposal-bpmn";
+const DEFAULT_STAGE_URL = "app/api/actions/delivery-graph/stage";
 
-// A bounded timeout for every door request. Without it a hung preview endpoint leaves the fetch
-// promise pending forever, so the busy() lock never clears and the UI is stranded (buttons disabled,
-// status stuck) with no way to retry. On timeout the AbortController rejects the fetch, which surfaces
-// as an error banner and re-enables the controls via the callers' finally blocks.
+// A bounded timeout for every door request. Without it a hung endpoint leaves the fetch promise pending
+// forever, so the busy() lock never clears and the UI is stranded (buttons disabled, status stuck) with
+// no way to retry. On timeout the AbortController rejects the fetch, which surfaces as an error banner
+// and re-enables the controls via the callers' finally blocks.
 const REQUEST_TIMEOUT_MS = 30000;
 
-const EXAMPLE_GRAPH = JSON.stringify(
+export const EXAMPLE_GRAPH = JSON.stringify(
   {
     name: "example-runbook",
     nodes: [
       { id: "build", kind: "agent", agent: { jobType: "senior:feature" }, emits: [{ name: "pr", type: "url" }] },
-      { id: "soak", kind: "wait", wait: { target: "checks-green" } },
+      { id: "soak", kind: "wait", wait: { kind: "pr", target: "owner/repo#123", match: { prState: "checks-green" } } },
       { id: "signoff", kind: "human", human: { prompt: "Review the PR and approve the release." } },
       { id: "publish", kind: "connector", connector: { target: "publish-package", dedupeKey: "example-runbook-publish" } },
     ],
@@ -128,15 +121,19 @@ function renderErrors(message, errors) {
   </section>`;
 }
 
-/** Render the successful preview: the staged banner, summary chips, the human/side-effect tables, and
- * the mermaid source. Dispatch is NOT offered here — the operator dispatches the staged proposal from
- * the Staged proposals grid below (issue #460). */
-function renderPreview(result) {
+/** Render the successful result: the preview/staged banner, summary chips, the human/side-effect
+ * tables, and the mermaid source. When `staged` is false (a pure Preview, #516) the banner offers
+ * "Preview generated DI" (the door returns the laid-out BPMN, so it renders WITHOUT staging) and a
+ * reminder that nothing is staged yet. When `staged` is true the banner points the operator at the
+ * Staged proposals grid below, where the per-row Dispatch (and DI preview) live (#460 + #513). */
+function renderPreview(result, staged) {
   const title = result.title ? `<code>${esc(result.title)}</code>` : '<span class="muted">(unnamed)</span>';
   const gate = result.sideEffecting
     ? '<span class="pill pill-connector">side-effecting</span>'
     : '<span class="pill pill-wait">no side effects</span>';
-  const summary = `<section class="card card-ok">
+  const canPreviewDi = typeof result.bpmn === "string" && result.bpmn.trim() !== "";
+  const summary = staged
+    ? `<section class="card card-ok">
     <h2>Staged ${gate}</h2>
     <p class="ok">Compiled and staged as a proposal. Dispatch is an operator action — review it in the <b>Staged proposals</b> grid below and click <b>Dispatch</b> on the one you approve.</p>
     <div class="chips">
@@ -146,23 +143,38 @@ function renderPreview(result) {
       <span class="chip">Side effects <b>${esc(result.sideEffectCount)}</b></span>
       <span class="chip">Digest <code>${esc(result.digest)}</code></span>
     </div>
-    <div class="actions">
-      <button class="btn btn-ghost" type="button" data-preview-di="${esc(result.digest)}">Preview generated DI</button>
-      <span class="muted">the real laid-out BPMN, exactly as a dispatch would run it</span>
+  </section>`
+    : `<section class="card card-ok">
+    <h2>Previewed ${gate}</h2>
+    <p class="ok">Compiled — <b>not staged yet</b>. Review the plan below, then click <b>Stage</b> to add it to the Staged proposals for dispatch.</p>
+    <div class="chips">
+      <span class="chip">Graph ${title}</span>
+      <span class="chip">Nodes <b>${esc(result.nodeCount)}</b></span>
+      <span class="chip">Human <b>${esc(result.humanNodeCount)}</b></span>
+      <span class="chip">Side effects <b>${esc(result.sideEffectCount)}</b></span>
+      <span class="chip">Digest <code>${esc(result.digest)}</code></span>
     </div>
+    ${
+      canPreviewDi
+        ? `<div class="actions">
+      <button class="btn btn-ghost" type="button" data-preview-di>Preview generated DI</button>
+      <span class="muted">the real laid-out BPMN, exactly as a dispatch would run it</span>
+    </div>`
+        : ""
+    }
   </section>`;
   const diagram = `<section class="card">
     <h2>Diagram <span class="muted">(mermaid flowchart source)</span></h2>
-    <p class="muted">The resolved graph as a mermaid <code>flowchart</code>. Paste it into any mermaid renderer, or click <b>Preview generated DI</b> above to render the laid-out BPMN in the process explorer.</p>
+    <p class="muted">The resolved graph as a mermaid <code>flowchart</code>. Paste it into any mermaid renderer${staged ? "" : ", or click <b>Preview generated DI</b> above to render the laid-out BPMN in the process explorer"}.</p>
     <pre class="diagram">${esc(result.diagram)}</pre>
   </section>`;
   return summary + renderSideEffects(result.sideEffects) + renderHumanNodes(result.humanNodes) + diagram;
 }
 
 /**
- * Mount the compose → preview → stage view into `host`.
+ * Mount the compose → preview / stage view into `host`.
  * @param {Element|null} host — the element to render into (or null → look up #delivery-graphs-root).
- * @param {{previewUrl?:string, proposalBpmnUrl?:string, hookSecret?:string}} [config]
+ * @param {{previewUrl?:string, stageUrl?:string, hookSecret?:string}} [config]
  */
 export function mountDeliveryGraphs(host, config = {}) {
   const isElement = host != null && host.nodeType === 1 && typeof host.innerHTML === "string";
@@ -170,25 +182,30 @@ export function mountDeliveryGraphs(host, config = {}) {
   if (!root) return () => {};
 
   const previewUrl = config.previewUrl ?? DEFAULT_PREVIEW_URL;
-  const proposalBpmnUrl = config.proposalBpmnUrl ?? DEFAULT_PROPOSAL_BPMN_URL;
+  const stageUrl = config.stageUrl ?? DEFAULT_STAGE_URL;
   const headers = () => ({
     "content-type": "application/json",
     ...(config.hookSecret ? { "x-hook-secret": config.hookSecret } : {}),
   });
 
-  // The static compose shell. The <textarea> is a real element (its value must survive re-renders of
-  // the output panes), so it is created once and never clobbered.
+  // The static compose shell. The compose card is a native <details> so an operator can COLLAPSE the
+  // large paste panel (#516) and focus on the Staged / in-flight grids, expanding it only to author.
+  // The <textarea> is a real element (its value must survive re-renders of the output panes, and it is
+  // only HIDDEN — never destroyed — when the panel collapses), so it is created once and never clobbered.
   root.innerHTML = `<div class="dg">
-    <section class="card">
-      <h2>1 · Compose</h2>
-      <p class="muted">Paste or author a <code>DeliveryGraph</code> JSON (nodes/edges over the closed <code>agent</code>/<code>wait</code>/<code>human</code>/<code>connector</code> vocabulary).</p>
-      <textarea id="dg-json" class="json" spellcheck="false" placeholder='{ "name": "…", "nodes": [ … ], "edges": [ … ] }'></textarea>
-      <div class="actions">
-        <button id="dg-preview" class="btn btn-primary" type="button">Preview &amp; stage</button>
-        <button id="dg-example" class="btn btn-ghost" type="button">Load example</button>
-        <span id="dg-status" class="status"></span>
+    <details id="dg-compose" class="compose card" open>
+      <summary><span class="step">1 · Compose</span><span class="hint muted">paste a DeliveryGraph, then Preview or Stage</span></summary>
+      <div class="compose-body">
+        <p class="muted">Paste or author a <code>DeliveryGraph</code> JSON (nodes/edges over the closed <code>agent</code>/<code>wait</code>/<code>human</code>/<code>connector</code> vocabulary).</p>
+        <textarea id="dg-json" class="json" spellcheck="false" placeholder='{ "name": "…", "nodes": [ … ], "edges": [ … ] }'></textarea>
+        <div class="actions">
+          <button id="dg-preview" class="btn btn-primary" type="button">Preview</button>
+          <button id="dg-stage" class="btn" type="button">Stage</button>
+          <button id="dg-example" class="btn btn-ghost" type="button">Load example</button>
+          <span id="dg-status" class="status"></span>
+        </div>
       </div>
-    </section>
+    </details>
     <div id="dg-output"></div>
   </div>`;
 
@@ -196,8 +213,14 @@ export function mountDeliveryGraphs(host, config = {}) {
   const statusEl = root.querySelector("#dg-status");
   const outputEl = root.querySelector("#dg-output");
   const previewBtn = root.querySelector("#dg-preview");
+  const stageBtn = root.querySelector("#dg-stage");
   const exampleBtn = root.querySelector("#dg-example");
 
+  // The most recent successful PREVIEW's laid-out BPMN — bridged to the host explorer on demand (the
+  // preview door returns it, so DI preview needs no staging, #516). Cleared whenever the composed graph
+  // changes so a stale diagram can never be shown against edited JSON.
+  let lastBpmn = "";
+
   function setStatus(text, tone) {
     statusEl.textContent = text || "";
     statusEl.className = "status" + (tone ? " status-" + tone : "");
@@ -205,6 +228,7 @@ export function mountDeliveryGraphs(host, config = {}) {
 
   function busy(on) {
     previewBtn.disabled = on;
+    stageBtn.disabled = on;
     exampleBtn.disabled = on;
   }
 
@@ -236,78 +260,77 @@ export function mountDeliveryGraphs(host, config = {}) {
     return jsonEl.value;
   }
 
-  async function doPreview() {
+  /** Shared compile driver for both Preview (stage=false) and Stage (stage=true). Both POST the pasted
+   * JSON to their door and render the SAME summary; only the banner and whether a proposal was
+   * persisted differ. */
+  async function submit(url, staged) {
     if (graphJson().trim() === "") {
-      setStatus("Paste a delivery-graph JSON to preview.", "err");
+      setStatus(`Paste a delivery-graph JSON to ${staged ? "stage" : "preview"}.`, "err");
       return;
     }
     busy(true);
-    setStatus("Compiling & staging…");
+    setStatus(staged ? "Compiling & staging…" : "Compiling…");
     try {
-      const { status, body } = await post(previewUrl, { graphJson: graphJson() });
+      const { status, body } = await post(url, { graphJson: graphJson() });
       if (status === 200 && body.ok) {
-        outputEl.innerHTML = renderPreview(body);
-        setStatus("\u2713 Staged — dispatch it from the Staged proposals grid below.", "ok");
+        lastBpmn = !staged && typeof body.bpmn === "string" ? body.bpmn : lastBpmn;
+        outputEl.innerHTML = renderPreview(body, staged);
+        setStatus(
+          staged ? "\u2713 Staged — dispatch it from the Staged proposals grid below." : "\u2713 Previewed — Stage it when you're ready.",
+          "ok",
+        );
       } else {
         outputEl.innerHTML = renderErrors(body.error, body.errors);
-        setStatus("Preview failed — fix the errors and re-preview.", "err");
+        setStatus(`${staged ? "Stage" : "Preview"} failed — fix the errors and retry.`, "err");
       }
     } catch (err) {
       outputEl.innerHTML = renderErrors(err && err.message ? err.message : String(err), []);
-      setStatus("Preview request failed.", "err");
+      setStatus(`${staged ? "Stage" : "Preview"} request failed.`, "err");
     } finally {
       busy(false);
     }
   }
 
-  previewBtn.addEventListener("click", doPreview);
+  previewBtn.addEventListener("click", () => submit(previewUrl, false));
+  stageBtn.addEventListener("click", () => submit(stageUrl, true));
   exampleBtn.addEventListener("click", () => {
     jsonEl.value = EXAMPLE_GRAPH;
+    lastBpmn = "";
     outputEl.innerHTML = "";
-    setStatus("Example loaded — Preview & stage it.", "");
+    setStatus("Example loaded — Preview or Stage it.", "");
+  });
+  // Any edit invalidates the previewed BPMN so "Preview generated DI" can't show a stale diagram.
+  jsonEl.addEventListener("input", () => {
+    lastBpmn = "";
   });
 
-  // "Preview generated DI": recompile the staged proposal's BPMN (with diagram interchange) and hand it
-  // to the host console's process explorer, which renders it read-only in a definition-preview view.
-  // We run inside the console App-View iframe, so we fetch from our OWN nwf door (same origin as this
-  // app) and pass the XML UP to the console over the nano-navigate bridge — the XML is far larger than a
-  // URL budget, so it travels in the message, not the path. Standalone (not embedded) there is no host
-  // explorer to drive, so we say so instead of failing silently.
+  // "Preview generated DI": hand the previewed proposal's laid-out BPMN (returned by the preview door,
+  // #516) to the host console's process explorer, which renders it read-only in a definition-preview
+  // view. We run inside the console App-View iframe, so we pass the XML UP to the console over the
+  // nano-navigate bridge — the XML is far larger than a URL budget, so it travels in the message, not
+  // the path. Standalone (not embedded) there is no host explorer to drive, so we say so instead of
+  // failing silently.
   const isEmbedded = typeof window !== "undefined" && window.parent && window.parent !== window;
-  async function doPreviewDi(digest) {
-    const staged = typeof digest === "string" ? digest.trim() : "";
-    if (staged === "") {
-      setStatus("No staged proposal to preview yet — Preview & stage a graph first.", "err");
+  function doPreviewDi() {
+    if (lastBpmn.trim() === "") {
+      setStatus("Preview a graph first — the laid-out BPMN comes from the preview.", "err");
       return;
     }
     if (!isEmbedded) {
       setStatus("Open this page inside the console cockpit to preview the generated DI.", "err");
       return;
     }
-    busy(true);
-    setStatus("Compiling DI…");
-    try {
-      const { status, body } = await post(proposalBpmnUrl, { digest: staged });
-      if (status === 200 && body.ok && typeof body.bpmn === "string" && body.bpmn.trim() !== "") {
-        window.parent.postMessage(
-          { type: "nano-navigate", target: "definitionPreview", params: { xml: body.bpmn } },
-          window.location.origin,
-        );
-        setStatus("\u2713 Opening the generated DI in the process explorer…", "ok");
-      } else {
-        setStatus(body && body.error ? body.error : "Could not compile the DI for this proposal.", "err");
-      }
-    } catch (err) {
-      setStatus(err && err.message ? err.message : "DI preview request failed.", "err");
-    } finally {
-      busy(false);
-    }
+    window.parent.postMessage(
+      { type: "nano-navigate", target: "definitionPreview", params: { xml: lastBpmn } },
+      window.location.origin,
+    );
+    setStatus("\u2713 Opening the generated DI in the process explorer…", "ok");
   }
   outputEl.addEventListener("click", (ev) => {
     const btn = ev.target && ev.target.closest ? ev.target.closest("[data-preview-di]") : null;
     if (!btn) return;
     ev.preventDefault();
-    doPreviewDi(btn.getAttribute("data-preview-di"));
+    doPreviewDi();
   });
 
   return () => {

package/pages/delivery-graphs/standalone.html

@@ -30,7 +30,7 @@
       }
       mountDeliveryGraphs(document.getElementById("delivery-graphs-root"), {
         previewUrl: params.get("preview") ?? undefined,
-        dispatchUrl: params.get("dispatch") ?? undefined,
+        stageUrl: params.get("stage") ?? undefined,
         hookSecret,
       });
     </script>

package/test/delivery-graphs-embed.test.ts

@@ -1,25 +1,30 @@
-// Contract guard for the Delivery Graphs compose → preview → STAGE App View (issues #441 + #460).
+// Contract guard for the Delivery Graphs compose → PREVIEW / STAGE App View (issues #441 + #460 + #516).
 //
 // The rich compile preview (mermaid diagram + humanNodes[] stop-points + sideEffects[] + inline
-// path-qualified errors) is surfaced by an `appView` embed (pages/delivery-graphs/) over the EXISTING
-// previewDeliveryGraph door — a bare `actionForm` discards its response and so can render none of that.
-// Dispatch is deliberately NOT in this view (issue #460): it is an OPERATOR row-action on the Staged
-// proposals grid on the same page. This test pins the wiring so it can't silently regress: the
-// sidecars exist, mount.js hits the preview door with a base-relative default (the #279 App-View
-// resolution class — a leading-slash path 404s through the console iframe), it renders each preview
-// facet, and it exposes NO dispatch/approval affordance (the self-approval hole #460 closes).
+// path-qualified errors) is surfaced by an `appView` embed (pages/delivery-graphs/) over the preview /
+// stage doors — a bare `actionForm` discards its response and so can render none of that. Preview and
+// Stage are SEPARATE operator actions (#516): Preview compiles without persisting; Stage persists a
+// proposal. Dispatch is deliberately NOT in this view (issue #460): it is an OPERATOR row-action on the
+// Staged proposals grid on the same page. This test pins the wiring so it can't silently regress: the
+// sidecars exist, mount.js hits the preview + stage doors with base-relative defaults (the #279
+// App-View resolution class — a leading-slash path 404s), it renders each preview facet, its compose
+// panel is collapsible, and it exposes NO dispatch/approval affordance (the self-approval hole #460
+// closes).
 import { test } from "node:test";
 import { assert } from "#test-assert";
 import { readFileSync } from "node:fs";
+import { parseAndCompileText } from "../app/deliveryGraphTextIngress.ts";
+import { EXAMPLE_GRAPH } from "../pages/delivery-graphs/mount.js";
 
 const ROOT = decodeURIComponent(new URL("../", import.meta.url).pathname);
 const DIR = `${ROOT}pages/delivery-graphs`;
 const MOUNT_JS = readFileSync(`${DIR}/mount.js`, "utf8");
 const EMBED_HTML = readFileSync(`${DIR}/embed.html`, "utf8");
 const STANDALONE_HTML = readFileSync(`${DIR}/standalone.html`, "utf8");
+const CSS = readFileSync(`${DIR}/delivery-graphs.css`, "utf8");
 const PAGE_JSON = readFileSync(`${ROOT}pages/delivery-graphs.page.json`, "utf8");
 
-// Pull the string default out of `const <name> = config.<name> ?? "<default>";` (or a module const).
+// Pull the string default out of `const <name> = config.<name> ?? <CONST>;` (a module const).
 function defaultUrl(name: string): string {
   const m = MOUNT_JS.match(new RegExp(`${name}\\s*=\\s*config\\.\\w+\\s*\\?\\?\\s*(\\w+);`));
   assert(m, `mount.js must default ${name} from config with a fallback constant`);
@@ -36,33 +41,39 @@ test("#441: the delivery-graphs App View mounts the same module standalone and e
   }
 });
 
-test("#441: mount.js wires the preview+stage door", () => {
+test("#516: mount.js wires SEPARATE preview and stage doors (base-relative)", () => {
   const previewUrl = defaultUrl("previewUrl");
   assert(previewUrl.endsWith("actions/delivery-graph/preview"), `previewUrl default "${previewUrl}" must hit the previewDeliveryGraph door`);
+  assert(!previewUrl.startsWith("/"), `default previewUrl "${previewUrl}" must be base-relative (App-View #279 resolution class)`);
+  const stageUrl = defaultUrl("stageUrl");
+  assert(stageUrl.endsWith("actions/delivery-graph/stage"), `stageUrl default "${stageUrl}" must hit the stageDeliveryGraph door`);
+  assert(!stageUrl.startsWith("/"), `default stageUrl "${stageUrl}" must be base-relative (App-View #279 resolution class)`);
+  // Preview and Stage are distinct buttons wired to distinct actions.
+  assert(/id="dg-preview"/.test(MOUNT_JS) && /id="dg-stage"/.test(MOUNT_JS), "mount.js must render distinct Preview and Stage buttons");
+  assert(/submit\(previewUrl,\s*false\)/.test(MOUNT_JS), "the Preview button must submit to the preview door WITHOUT staging");
+  assert(/submit\(stageUrl,\s*true\)/.test(MOUNT_JS), "the Stage button must submit to the stage door");
 });
 
-test("DI preview: mount.js wires the proposal-bpmn door (base-relative) and hands the XML to the host explorer", () => {
-  const url = defaultUrl("proposalBpmnUrl");
-  assert(url.endsWith("actions/delivery-graph/proposal-bpmn"), `proposalBpmnUrl default "${url}" must hit the previewProposalBpmn door`);
-  assert(!url.startsWith("/"), `default proposalBpmnUrl "${url}" must be base-relative (App-View #279 resolution class)`);
-  // The staged banner exposes a Preview-DI affordance, and clicking it hands the compiled XML to the
-  // host console over the nano-navigate bridge with the definitionPreview target (never a dispatch).
-  assert(/data-preview-di=/.test(MOUNT_JS), "mount.js must render a Preview-DI affordance carrying the proposal digest");
-  assert(/target:\s*"definitionPreview"/.test(MOUNT_JS), "mount.js must post nano-navigate to the definitionPreview target");
-  assert(/params:\s*\{\s*xml:/.test(MOUNT_JS), "mount.js must carry the compiled BPMN xml in the bridge message");
+test("#516: the compose panel is collapsible", () => {
+  // Native <details> disclosure: keyboard-accessible, and the textarea is only hidden (never destroyed)
+  // when collapsed, so its value survives.
+  assert(/<details[^>]*class="[^"]*\bcompose\b/.test(MOUNT_JS), "the compose panel must be a collapsible <details class=compose>");
+  assert(/<summary>/.test(MOUNT_JS), "the collapsible compose panel must have a <summary> disclosure header");
+  assert(/\.compose\[open\]/.test(CSS), "the CSS must style the open/closed disclosure state");
 });
 
-// The #279 App-View resolution class: a default endpoint must be BASE-RELATIVE (no leading slash) so
-// it resolves under the console app-view base, not the console origin root (which 404s the door).
-test("#441/#279: default previewUrl is base-relative (no leading slash)", () => {
-  const def = defaultUrl("previewUrl");
-  assert(!def.startsWith("/"), `default previewUrl "${def}" must not start with "/" — a leading-slash path resolves against the console iframe ORIGIN, not the app-view base, so the door 404s`);
+test("#516 DI preview: the compose view bridges the previewed BPMN to the host explorer WITHOUT staging", () => {
+  // The pure preview door returns the laid-out `bpmn`, so DI preview needs no proposal-bpmn round-trip
+  // (and therefore no staging). The compose view stashes the previewed BPMN and hands it to the host
+  // console over the nano-navigate bridge with the definitionPreview target (never a dispatch).
+  assert(!/proposal-bpmn/.test(MOUNT_JS), "mount.js must NOT round-trip the proposal-bpmn door — the preview door returns the BPMN directly (#516)");
+  assert(/lastBpmn/.test(MOUNT_JS), "mount.js must stash the previewed BPMN to bridge on demand");
+  assert(/data-preview-di/.test(MOUNT_JS), "mount.js must render a Preview-DI affordance");
+  assert(/target:\s*"definitionPreview"/.test(MOUNT_JS), "mount.js must post nano-navigate to the definitionPreview target");
+  assert(/params:\s*\{\s*xml:\s*lastBpmn\s*\}/.test(MOUNT_JS), "mount.js must carry the previewed BPMN xml in the bridge message");
 });
 
 test("#441: the preview render consumes every compile facet the door returns", () => {
-  // The whole point of #441: the preview data (diagram / humanNodes / sideEffects / errors) is rich
-  // but was consumed by nothing. Assert the renderer touches each facet at a CONCRETE call site (not a
-  // bare word, which a comment/string could satisfy) so a renderer that stops reading a field fails.
   const facetUse: Record<string, RegExp> = {
     diagram: /esc\(result\.diagram\)/,
     humanNodes: /renderHumanNodes\(result\.humanNodes\)/,
@@ -74,10 +85,16 @@ test("#441: the preview render consumes every compile facet the door returns", (
   }
 });
 
+test("#516: the built-in 'Load example' graph compiles clean (regression: it used to fail)", async () => {
+  // The example shipped a `soak` wait node missing its required `wait.kind`, so 'Load example' →
+  // Preview always 400'd. Drive the EXACT string the button injects through the SAME compiler the
+  // preview/stage doors use, and assert it is accepted — so a future edit to EXAMPLE_GRAPH can't
+  // silently re-break the one graph an operator reaches for first.
+  const result = await parseAndCompileText({ graphJson: EXAMPLE_GRAPH });
+  assert(result.ok, result.ok ? "" : `the built-in example must compile, got: ${JSON.stringify(result.body)}`);
+});
+
 test("#460: the compose view exposes NO dispatch or approval affordance — it only previews + stages", () => {
-  // Issue #460 removes the agent-reachable dispatch door. The compose view must not smuggle it back:
-  // no dispatch door wiring, no approval two-step, no replayable approvalToken. Dispatch is the
-  // operator's Staged-proposals row-action instead.
   assert(!/dispatchUrl/.test(MOUNT_JS), "mount.js must NOT wire a dispatch door (dispatch is an operator row-action, issue #460)");
   assert(!/delivery-graph\/dispatch/.test(MOUNT_JS), "mount.js must NOT post to the dispatch door");
   assert(!/awaiting-approval/.test(MOUNT_JS), "mount.js must NOT implement the removed awaiting-approval two-step");
@@ -85,11 +102,6 @@ test("#460: the compose view exposes NO dispatch or approval affordance — it o
 });
 
 test("#460/#511: dispatch is the operator's action on the Staged-proposals App-View", () => {
-  // Dispatch is NOT in the compose view (asserted above). It lives on the Staged-proposals surface,
-  // which is now an App-View (issue #511) rather than a declarative grid: a grid row-action can POST but
-  // cannot hand the recompiled BPMN up to the host explorer, so a staged proposal had a Dispatch button
-  // but no way to SEE the graph. The App-View carries BOTH Preview-DI and Dispatch. The wiring itself
-  // (which doors staged.mount.js posts to) is pinned by delivery-graphs-staged-embed.test.ts.
   const page = JSON.parse(PAGE_JSON) as { nodes: Array<Record<string, any>> };
   const staged = page.nodes.find((n) => n.id === "delivery-graphs-staged");
   assert(staged, "the page must carry a Staged proposals surface");