@nanobpm/nano-workforce 0.120.1 → 0.121.0

package/openapi.yaml

@@ -1616,6 +1616,20 @@ components:
         diagram:
           type: string
           description: The mermaid flowchart of the compiled graph (preview).
+        humanNodes:
+          type: array
+          items:
+            $ref: "#/components/schemas/DeliveryHumanStop"
+          description: >-
+            The human stop-points the compiled graph parks on (preview) — where it waits for a person
+            (or an agent answering on their behalf), rendered by the Delivery Graphs page (#441).
+        sideEffects:
+          type: array
+          items:
+            $ref: "#/components/schemas/DeliverySideEffect"
+          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).
     ResolvedDeliveryNode:
       description: >-
         A normalised node in the compiled graph (ADR 0005 slice S1) — its `id`, `kind`, the

package/operations/compileDeliveryGraph.test.ts

@@ -29,6 +29,9 @@ test("compile-delivery-graph: a well-formed graph → 200 with the pure preview"
   assertEquals(res.status, 200);
   assertEquals(res.body.ok, true);
   assert(typeof res.body.bpmn === "string" && res.body.bpmn.length > 0);
+  // The compile preview must show what actually deploys — including the auto-laid-out diagram
+  // interchange (#440), so the process explorer can render the previewed graph.
+  assert(res.body.bpmn.includes("<bpmndi:BPMNDiagram"), "the previewed bpmn carries diagram interchange");
   assert(typeof res.body.diagram === "string" && res.body.diagram.length > 0);
   assertEquals(res.body.resolved.nodes.length, 2);
   assertEquals(res.body.humanNodes.length, 1);

package/operations/compileDeliveryGraph.ts

@@ -20,7 +20,7 @@ export default defineOperation("compileDeliveryGraph", async ({ body }, app) =>
   // the SEMANTIC checks (acyclicity, edge integrity, fact resolution) the schema cannot express. A
   // directly-invoked delegate could still pass `undefined` — the compiler reads its input as
   // `unknown` and maps that to a clean `ok:false`, never a 500.
-  const result = compileDeliveryGraph(body);
+  const result = await compileDeliveryGraph(body);
   if (!result.ok) {
     app.log.warn("compile-delivery-graph rejected", { errors: result.errors.length });
     return { status: 400, body: result };

package/operations/dispatchDeliveryGraph.ts

@@ -37,7 +37,7 @@ export default defineOperation("dispatchDeliveryGraph", async (input, app) => {
   // dispatches. A compile failure here surfaces as a clean 400 rather than reaching the start door.
   let approvalToken: string | undefined;
   if (approve) {
-    const compiled = compileDeliveryGraph(parsed.graph);
+    const compiled = await compileDeliveryGraph(parsed.graph);
     if (!compiled.ok) {
       app.log.warn("dispatch-delivery-graph rejected: compile", { errors: compiled.errors.length });
       return {

package/operations/previewDeliveryGraph.test.ts

@@ -35,6 +35,15 @@ test("preview-delivery-graph: a pasted well-formed graph → 200 summary with di
   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.
+  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");
+  assert(Array.isArray(res.body.sideEffects) && res.body.sideEffects.length === 1);
+  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);
 });
 
 test("preview-delivery-graph: is PURE — repeated previews return the identical digest", async () => {

package/operations/previewDeliveryGraph.ts

@@ -22,7 +22,7 @@ export default defineOperation("previewDeliveryGraph", async ({ body }, app) =>
     app.log.warn("preview-delivery-graph rejected: parse", { message: parsed.error });
     return { status: 400, body: { ok: false, error: parsed.error } };
   }
-  const compiled = compileDeliveryGraph(parsed.graph);
+  const compiled = await compileDeliveryGraph(parsed.graph);
   if (!compiled.ok) {
     app.log.warn("preview-delivery-graph rejected: compile", { errors: compiled.errors.length });
     return {
@@ -54,6 +54,12 @@ export default defineOperation("previewDeliveryGraph", async ({ body }, app) =>
       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 operator is being asked to approve (Decision 7). The Delivery
+      // Graphs page renders these lists so the operator sees WHERE it parks on a person and WHAT it
+      // will do before dispatching — the "preview before dispatch" principle made visible (#441).
+      humanNodes: compiled.humanNodes,
+      sideEffects: compiled.sideEffects,
     },
   };
 });

package/operations/startDeliveryGraph.ts

@@ -56,7 +56,7 @@ export default defineOperation("startDeliveryGraph", async ({ body }, app) => {
 
   // 2) Compile via S1. This yields the deterministic BPMN (→ the content digest / approval token) plus
   //    the graph's shape: its side effects (whether approval is required), human stops, and node count.
-  const compiled = compileDeliveryGraph(graph);
+  const compiled = await compileDeliveryGraph(graph);
   if (!compiled.ok) {
     app.log.warn("start-delivery-graph rejected: compile", { count: compiled.errors.length });
     return { status: 400, body: { ok: false, errors: compiled.errors } };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanobpm/nano-workforce",
-  "version": "0.120.1",
+  "version": "0.121.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",
@@ -59,7 +59,8 @@
   },
   "dependencies": {
     "@nanobpm/agentic": "^0.1.0",
-    "@nanobpm/urban": "^0.75.0"
+    "@nanobpm/urban": "^0.75.0",
+    "bpmn-auto-layout": "^2.0.0-alpha.2"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.11",

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

@@ -0,0 +1,273 @@
+:root {
+  color-scheme: dark;
+}
+
+.dg {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  color: #d7e0ea;
+  background: #0b0f14;
+  min-height: 100%;
+  box-sizing: border-box;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.dg .card {
+  background: #121821;
+  border: 1px solid #223042;
+  border-radius: 10px;
+  padding: 14px 16px;
+}
+
+.dg .card-warn {
+  border-color: rgba(210, 153, 34, 0.5);
+}
+
+.dg .card-err {
+  border-color: rgba(248, 81, 73, 0.5);
+}
+
+.dg .card-ok {
+  border-color: rgba(63, 185, 80, 0.5);
+}
+
+.dg h2 {
+  margin: 0 0 8px;
+  font-size: 15px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dg p {
+  margin: 6px 0;
+  font-size: 13px;
+}
+
+.dg .json {
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 200px;
+  resize: vertical;
+  background: #0d141d;
+  color: #d7e0ea;
+  border: 1px solid #223042;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+
+.dg .idem {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+.dg .input {
+  background: #0d141d;
+  color: #d7e0ea;
+  border: 1px solid #223042;
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 13px;
+}
+
+.dg .actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+
+.dg .btn {
+  background: #1c2735;
+  color: #d7e0ea;
+  border: 1px solid #2b3a4e;
+  border-radius: 7px;
+  padding: 7px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.dg .btn:hover {
+  background: #223042;
+}
+
+.dg .btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.dg .btn-primary {
+  background: #1f6feb;
+  border-color: #388bfd;
+  color: #fff;
+}
+
+.dg .btn-primary:hover {
+  background: #388bfd;
+}
+
+.dg .btn-ghost {
+  background: transparent;
+  border-color: #2b3a4e;
+  color: #8aa0b8;
+}
+
+.dg .status {
+  font-size: 12.5px;
+  color: #8aa0b8;
+}
+
+.dg .status-ok {
+  color: #56d364;
+}
+
+.dg .status-err {
+  color: #ff7b72;
+}
+
+.dg .status-warn {
+  color: #e3b341;
+}
+
+.dg .chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.dg .chip {
+  background: #0d141d;
+  border: 1px solid #223042;
+  border-radius: 999px;
+  padding: 3px 12px;
+  font-size: 12px;
+}
+
+.dg .count {
+  background: #0d141d;
+  border: 1px solid #223042;
+  border-radius: 999px;
+  padding: 0 9px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #8aa0b8;
+}
+
+.dg table.grid {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  margin-top: 4px;
+}
+
+.dg table.grid th,
+.dg table.grid td {
+  text-align: left;
+  padding: 6px 8px;
+  border-bottom: 1px solid #1c2735;
+  vertical-align: top;
+}
+
+.dg table.grid th {
+  color: #8aa0b8;
+  font-weight: 500;
+}
+
+.dg .diagram {
+  background: #0d141d;
+  border: 1px solid #223042;
+  border-radius: 8px;
+  padding: 12px;
+  overflow-x: auto;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: #b9c6d6;
+  margin: 0;
+}
+
+.dg .errors {
+  margin: 8px 0 0;
+  padding-left: 18px;
+  font-size: 13px;
+}
+
+.dg .errors li {
+  margin: 3px 0;
+}
+
+.dg code {
+  background: #0d141d;
+  border: 1px solid #223042;
+  border-radius: 4px;
+  padding: 1px 5px;
+  font-size: 12px;
+}
+
+.dg .muted {
+  color: #6b7f95;
+}
+
+.dg .ok {
+  color: #56d364;
+}
+
+.dg .warn {
+  color: #e3b341;
+}
+
+.dg .red {
+  color: #ff7b72;
+}
+
+.dg .pill {
+  display: inline-block;
+  border-radius: 999px;
+  padding: 1px 9px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.dg .pill-agent {
+  background: rgba(31, 111, 235, 0.18);
+  color: #58a6ff;
+  border: 1px solid rgba(31, 111, 235, 0.4);
+}
+
+.dg .pill-connector {
+  background: rgba(210, 153, 34, 0.18);
+  color: #e3b341;
+  border: 1px solid rgba(210, 153, 34, 0.4);
+}
+
+.dg .pill-wait {
+  background: rgba(63, 185, 80, 0.18);
+  color: #56d364;
+  border: 1px solid rgba(63, 185, 80, 0.4);
+}
+
+.dg .pill-human {
+  background: rgba(163, 113, 247, 0.18);
+  color: #bc8cff;
+  border: 1px solid rgba(163, 113, 247, 0.4);
+}
+
+.dg .pill-unknown {
+  background: rgba(139, 148, 158, 0.18);
+  color: #8b949e;
+  border: 1px solid rgba(139, 148, 158, 0.4);
+}

package/pages/delivery-graphs/embed.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Delivery graphs — compose · preview · dispatch (App View embed)</title>
+    <link rel="stylesheet" href="./delivery-graphs.css" />
+    <style>
+      html, body { margin: 0; height: 100%; background: #0b0f14; }
+    </style>
+  </head>
+  <body>
+    <!--
+      Console App-View embed (ADR 0057). The console loads this document into its App-View surface and
+      hands it a host element; we mount the SAME compose → preview → dispatch view via the SAME
+      ./mount.js as the standalone shell — only the host and the injected endpoint config differ, so the
+      view renders identically. When the console injects endpoint config via `window.__NANO_APP_VIEW__`,
+      it wins.
+    -->
+    <main id="delivery-graphs-root"></main>
+    <script type="module">
+      import { mountDeliveryGraphs } from "./mount.js";
+
+      const cfg = window.__NANO_APP_VIEW__ ?? {};
+      mountDeliveryGraphs(cfg.host ?? document.getElementById("delivery-graphs-root"), {
+        previewUrl: cfg.previewUrl,
+        dispatchUrl: cfg.dispatchUrl,
+        hookSecret: cfg.hookSecret,
+      });
+    </script>
+  </body>
+</html>