@nanobpm/nano-workforce 0.137.0 → 0.138.1

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/resources/processes/readiness-gate.bpmn

@@ -50,6 +50,7 @@
           <nano:extend name="detail" type="string" optional="true" />
           <nano:extend name="resolvedArtifact" type="string" optional="true" />
           <nano:extend name="mergedSha" type="string" optional="true" />
+          <nano:extend name="observed" type="string" optional="true" />
         </nano:shape>
         <nano:shape id="ReadinessReady" name="readiness-ready message payload">
           <nano:extend name="ready" type="boolean" />

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");

package/workers/readiness-probe/worker.test.ts

@@ -23,11 +23,12 @@ function execReturning(seq: Array<HttpResponse>, counts: { http: number } = { ht
 const httpProbe = (poll?: ReadinessProbe["poll"]): ReadinessProbe =>
   parseProbe({ kind: "http", target: "https://x/health?token=s3cr3t", poll });
 
-test("safeBind: strips reserved keys (ready/detail) so a bind can only ADD outputs, never shadow the payload", () => {
-  const cleaned = safeBind({ resolvedArtifact: "@nanobpm/urban@0.54.0", ready: "false", detail: "spoofed" });
+test("safeBind: strips reserved keys (ready/detail/observed) so a bind can only ADD outputs, never shadow the payload", () => {
+  const cleaned = safeBind({ resolvedArtifact: "@nanobpm/urban@0.54.0", ready: "false", detail: "spoofed", observed: "spoofed" });
   assertEquals(cleaned.resolvedArtifact, "@nanobpm/urban@0.54.0");
   assertEquals("ready" in cleaned, false, "a bound 'ready' can never override the canonical payload");
   assertEquals("detail" in cleaned, false, "a bound 'detail' can never override the canonical payload");
+  assertEquals("observed" in cleaned, false, "a bound 'observed' can never clobber the top-level diagnostic summary");
   assertEquals(Object.keys(safeBind(undefined)).length, 0, "an absent bind yields an empty object");
 });
 
@@ -121,6 +122,59 @@ test("probeSingleShot: inconclusive lastAttempt fallback surfaces its redacted d
   assert(res.detail.includes("fallback: still nothing"), "the fallback diagnostic is preserved");
 });
 
+test("#514 Defect A probeSingleShot: a not-ready capability at the boundary emits a structured WARN with the probe detail + observed releases, and threads `observed` to the return", async () => {
+  // Red before the fix: the boundary last-attempt returned a contextless "gate boundary reached" with
+  // no warn and no observed-release context, so an escalated false-negative was undiagnosable.
+  const capProbe = parseProbe({
+    kind: "capability",
+    target: "github-releases:nanobpm/nano-ide",
+    match: { package: "@nanobpm/urban", capabilityRef: "#468" },
+  });
+  // A live @nanobpm/urban release exists, but its provenance body does NOT (yet) reference #468 — the
+  // exact transient false-negative shape from the incident.
+  const releasesJson = JSON.stringify([
+    [{ tag_name: "@nanobpm/urban@0.82.0", body: "## Provenance\n- #200\n" }],
+  ]);
+  const exec: ProbeExec = {
+    async httpGet(): Promise<HttpResponse> {
+      throw new Error("unused");
+    },
+    async run(): Promise<CommandResult> {
+      return { code: 0, stdout: releasesJson, stderr: "" };
+    },
+  };
+  const warns: string[] = [];
+  let publishes = 0;
+  const res = await probeSingleShot({
+    probe: capProbe,
+    exec,
+    env: {},
+    lastAttempt: true,
+    publish: async () => {
+      publishes += 1;
+    },
+    warn: (msg) => warns.push(msg),
+  });
+  assert(!res.ready, "the boundary attempt is still not-ready");
+  assertEquals(publishes, 0, "a not-ready boundary never publishes readiness-ready");
+  assertEquals(warns.length, 1, "exactly one structured warn is emitted at the boundary last attempt");
+  assert(warns[0].includes("escalating"), "the warn says the gate is escalating");
+  assert(warns[0].includes("capability #468 not published"), "the warn carries the probe's last detail");
+  assert(warns[0].includes("@nanobpm/urban@0.82.0 no #468"), "the warn carries the observed candidate releases");
+  assert((res.observed ?? "").includes("@nanobpm/urban@0.82.0 no #468"), "the observed summary is threaded to the return for the escalation task");
+  // The return `detail` must carry the probe's actual last matcher detail — NOT a generic "gate boundary
+  // reached" string — because the wait-gate seeds `probeDetail` and the escalation context FEEL from it.
+  assert(
+    res.detail.includes("capability #468 not published"),
+    "the boundary return `detail` carries the probe's diagnostic last detail, keeping the escalation diagnostic",
+  );
+  assert(
+    !res.detail.includes("gate boundary reached"),
+    "the boundary return no longer clobbers `detail` with a generic contextless string",
+  );
+});
+
+
 test("probeSingleShot: forwards a matcher's bind through publish into the message variables (#274 Gap B)", async () => {
   const published: Array<{ detail: string; bind?: Record<string, string> }> = [];
   const payload = JSON.stringify([{ tag_name: "@nanobpm/urban@0.54.0", body: "## Provenance\n- #274\n" }]);

package/workers/readiness-probe/worker.ts

@@ -35,7 +35,7 @@ export { READINESS_READY_MESSAGE };
  * kind-agnostic emit primitive (#274 Gap B), but it flows from matcher output into both the
  * `readiness-ready` message variables and the worker output — so a matcher that binds `ready`/`detail`
  * could shadow the canonical payload and break the gate contract. */
-const RESERVED_BIND_KEYS: ReadonlySet<string> = new Set(["ready", "detail"]);
+const RESERVED_BIND_KEYS: ReadonlySet<string> = new Set(["ready", "detail", "observed"]);
 export function safeBind(bind?: Record<string, string>): Record<string, string> {
   if (!bind) return {};
   const out: Record<string, string> = {};
@@ -60,6 +60,7 @@ export async function probeSingleShot(deps: {
   lastAttempt?: boolean;
   fallback?: () => Promise<ProbeResult | null>;
   log?: (msg: string) => void;
+  warn?: (msg: string) => void;
 }): Promise<ProbeResult> {
   const label = redactTarget(deps.probe);
   const res: ProbeResult = await probeOnce(deps.probe, deps.exec, deps.env).catch((err) => ({
@@ -84,9 +85,25 @@ export async function probeSingleShot(deps: {
     await deps.publish(settled.detail, settled.bind);
     return settled;
   }
+  // Boundary last attempt and STILL not ready: this is the escalation trigger. Surface a structured
+  // warn (issue #514 Defect A) carrying the probe's last detail + what it OBSERVED, so a false-negative
+  // (a matching release was live but its provenance body was momentarily empty) is diagnosable from the
+  // logs — not just a contextless "escalated". `observed` is diagnostic-only and secret-free.
+  const failingDetail = settled ? `${res.detail} (fallback: ${settled.detail})` : res.detail;
+  const observed = settled?.observed ?? res.observed;
+  deps.warn?.(
+    `readiness gate escalating ${label}: not ready at boundary — ${failingDetail}` +
+      (observed ? `; observed: ${observed}` : ""),
+  );
+  // Return the actual failing probe detail (not a generic "gate boundary reached" string): downstream
+  // the wait-gate seeds `probeDetail` and the escalation context FEEL from `detail`, so overwriting it
+  // here would make the escalation non-diagnostic — the very defect this change fixes. The fact that the
+  // boundary/timeout was reached is already communicated by the escalation context ("exceeded its SLA …
+  // before its ReadinessProbe went green") and the structured WARN above.
   return {
     ready: false,
-    detail: settled ? `gate boundary reached (fallback: ${settled.detail})` : "gate boundary reached",
+    detail: failingDetail,
+    observed,
   };
 }
 
@@ -149,8 +166,14 @@ const handler: AppJobHandler<In, Out> = async (job, app) => {
       });
     },
     log: (msg) => app.log.info(msg),
+    warn: (msg) => app.log.warn(msg),
   });
-  return { ready: result.ready, detail: result.detail, ...safeBind(result.bind) };
+  return {
+    ready: result.ready,
+    detail: result.detail,
+    ...(result.observed !== undefined ? { observed: result.observed } : {}),
+    ...safeBind(result.bind),
+  };
 };
 
 export default handler;