@nanobpm/nano-workforce 0.136.0 → 0.138.0

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.136.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>