@nanobpm/nano-workforce 0.168.0 → 0.168.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [0.168.1](https://github.com/nanobpm/nano-workforce/compare/v0.168.0...v0.168.1) (2026-08-31)
+
+### Bug Fixes
+
+* **cockpit:** render the agentic transcript beneath the supply table ([#660](https://github.com/nanobpm/nano-workforce/issues/660)) ([#662](https://github.com/nanobpm/nano-workforce/issues/662)) ([ed2c041](https://github.com/nanobpm/nano-workforce/commit/ed2c041e0e4508e825324ed2b398bf64b5c66c37))
+
 ## [0.168.0](https://github.com/nanobpm/nano-workforce/compare/v0.167.4...v0.168.0) (2026-08-31)
 
 ### Features

package/app/agentic/cockpit/cockpit-browser-bundle.test.ts

@@ -0,0 +1,102 @@
+// #660 — the browser transcript bundle is DERIVED from the typed core, and it RENDERS (never dumps raw
+// `nwfTranscriptEvent` JSON).
+//
+// Two guarantees:
+//  1. Drift guard — the committed `pages/cockpit/generated/*.js` is byte-identical to a fresh transpile
+//     of the `.ts` core, so the deployed browser render path can never silently drift from the typed,
+//     tested source (the exact failure mode #660 was: a hand-copy that lost the render path).
+//  2. Behaviour — importing the GENERATED module the browser actually loads and rendering it into the
+//     DOM double proves a `nwfTranscriptEvent` chunk is surfaced as derived turns/tool/diff/permission
+//     cards, and NEVER verbatim.
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { test } from "node:test";
+import { assert, assertEquals } from "#test-assert";
+import { cockpitBrowserBundle } from "../../../scripts/build-cockpit-browser.ts";
+import { FakeDocument, FakeElement } from "../../../test/agentic-cockpit-doubles.ts";
+import { TRANSCRIPT_EVENT_MARKER, TRANSCRIPT_EVENT_VERSION } from "../transcript-events.ts";
+// The module under test is the GENERATED browser artifact the deployed cockpit imports — NOT the .ts
+// source — so this exercises exactly the code path the browser runs.
+import { renderDerivedTranscript } from "../../../pages/cockpit/generated/transcript-derive.js";
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "../../..");
+
+test("the committed browser bundle is byte-identical to its typed source (no drift surface)", () => {
+  for (const { out, content } of cockpitBrowserBundle()) {
+    const committed = readFileSync(resolve(repoRoot, out), "utf8");
+    assertEquals(
+      committed,
+      content,
+      `${out} is stale — regenerate with: node --experimental-strip-types scripts/build-cockpit-browser.ts`,
+    );
+  }
+});
+
+const doc = new FakeDocument();
+
+function env(kind: string, extra: Record<string, unknown> = {}): string {
+  return JSON.stringify({ [TRANSCRIPT_EVENT_MARKER]: TRANSCRIPT_EVENT_VERSION, kind, ...extra });
+}
+
+/** A page whose chunks are `nwfTranscriptEvent` envelopes: messages, a tool call/result diff, a permission prompt. */
+function report(): {
+  stream: string;
+  from: number;
+  gap: boolean;
+  nextOffset: number;
+  entries: Array<{ offset: number; chunk: string }>;
+} {
+  const chunks = [
+    env("turn", { index: 0 }),
+    env("message", { role: "user", text: "please build it" }),
+    env("tool-call", { name: "edit", callId: "c1", args: { path: "a.txt", oldText: "one\n", newText: "two\n" } }),
+    env("tool-result", { callId: "c1", ok: true, content: "done" }),
+    env("message", { role: "assistant", text: "built it" }),
+    env("permission", {
+      phase: "request",
+      callId: "p1",
+      policy: "escalate",
+      title: "Run shell?",
+      toolName: "bash",
+      options: [
+        { optionId: "ok", name: "Allow", kind: "allow-once" },
+        { optionId: "no", name: "Deny", kind: "reject-once" },
+      ],
+    }),
+  ];
+  return { stream: "job:1", from: 0, gap: false, nextOffset: chunks.length, entries: chunks.map((chunk, offset) => ({ offset, chunk })) };
+}
+
+test("regression: a nwfTranscriptEvent chunk is rendered as derived cards, NEVER surfaced verbatim", () => {
+  const host = new FakeElement("div");
+  renderDerivedTranscript(host as never, doc, report() as never);
+  // The rendered structured view exists…
+  assertEquals(host.byClass("cockpit-transcript-derived").length, 1);
+  // …and the raw envelope marker is nowhere in the rendered text (the #660 bug: raw JSON echoed).
+  assert(!host.text().includes(TRANSCRIPT_EVENT_MARKER), "rendered transcript must not contain the raw nwfTranscriptEvent marker");
+});
+
+test("feature: messages coalesce into one turn, tool/diff card renders, permission prompt renders", () => {
+  const host = new FakeElement("div");
+  renderDerivedTranscript(host as never, doc, report() as never);
+
+  // Message coalescing: both the user and assistant messages fold under a SINGLE derived turn section.
+  const turns = host.byClass("cockpit-transcript-turn");
+  assertEquals(turns.length, 1);
+  const roles = turns[0]?.byClass("cockpit-transcript-message").map((n) => n.getAttribute("data-role")) ?? [];
+  assertEquals(roles, ["user", "assistant"]);
+
+  // Tool card with a synthesized diff (structured edit args → add/del lines).
+  const tool = host.byData("tool", "edit")[0];
+  assert(tool !== undefined, "the tool card is rendered");
+  assertEquals(tool?.getAttribute("data-tool-kind"), "diff");
+  const diffKinds = host.byClass("cockpit-transcript-diff-line").map((n) => n.getAttribute("data-diff-line"));
+  assert(diffKinds.includes("add") && diffKinds.includes("del"), "the diff shows add + del lines");
+
+  // Permission prompt with interactive Allow/Deny options.
+  const perm = host.byData("permission", "request")[0];
+  assert(perm !== undefined, "the permission prompt is rendered");
+  assertEquals(perm?.getAttribute("data-status"), "pending");
+  assertEquals(host.byClass("cockpit-transcript-permission-option").length, 2);
+});

package/app/agentic/cockpit/mount.test.ts

@@ -0,0 +1,162 @@
+// #660 — the DEPLOYED browser adapter (pages/cockpit/mount.js) renders the transcript for BOTH a live
+// drill and a past-session replay, and NEVER surfaces a raw `nwfTranscriptEvent` chunk verbatim.
+//
+// This drives mount.js end-to-end on Node against a real (linkedom) DOM, a stub relay WebSocket, and a
+// stub `fetch`, so it exercises the actual live-drill sink wiring and the replay fetch→render path — the
+// two seams that used to write relay chunks straight to xterm. It also asserts the rendered transcript
+// region sits directly beneath the Workers — supply table.
+import { test } from "node:test";
+import { assert, assertEquals } from "#test-assert";
+import { encodeFrame } from "@nanobpm/agentic/protocol";
+import { parseHTML } from "linkedom";
+import { TRANSCRIPT_EVENT_MARKER, TRANSCRIPT_EVENT_VERSION } from "../transcript-events.ts";
+
+function envChunk(kind: string, extra: Record<string, unknown> = {}): string {
+  return JSON.stringify({ [TRANSCRIPT_EVENT_MARKER]: TRANSCRIPT_EVENT_VERSION, kind, ...extra });
+}
+
+/** A stub browser WebSocket that records instances and lets a test drive open + inbound frames by hand. */
+class StubWebSocket {
+  static readonly instances: StubWebSocket[] = [];
+  binaryType = "";
+  readonly url: string;
+  readonly #listeners = new Map<string, Array<(event: unknown) => void>>();
+  constructor(url: string) {
+    this.url = url;
+    StubWebSocket.instances.push(this);
+  }
+  addEventListener(type: string, handler: (event: unknown) => void): void {
+    const list = this.#listeners.get(type) ?? [];
+    list.push(handler);
+    this.#listeners.set(type, list);
+  }
+  send(): void {}
+  close(): void {}
+  fireOpen(): void {
+    for (const h of this.#listeners.get("open") ?? []) h({});
+  }
+  /** Deliver one relay frame (as the browser would: an ArrayBuffer message event). */
+  deliver(frame: unknown): void {
+    const bytes = encodeFrame(frame as never);
+    for (const h of this.#listeners.get("message") ?? []) h({ data: bytes.buffer });
+  }
+}
+
+/** Install a linkedom DOM + stub WebSocket/fetch as globals mount.js reads; returns a cleanup fn. */
+function installEnv(fetchImpl: (url: string) => Promise<unknown>): () => void {
+  const { window, document } = parseHTML("<!doctype html><html><body><main id='root'></main></body></html>");
+  const g = globalThis as Record<string, unknown>;
+  const saved = {
+    window: g.window,
+    document: g.document,
+    location: g.location,
+    WebSocket: g.WebSocket,
+    fetch: g.fetch,
+  };
+  g.window = window;
+  g.document = document;
+  g.location = { hash: "", href: "http://app.test/cockpit/", pathname: "/cockpit/", search: "" };
+  g.WebSocket = StubWebSocket;
+  g.fetch = (url: unknown) => fetchImpl(String(url));
+  StubWebSocket.instances.length = 0;
+  return () => {
+    g.window = saved.window;
+    g.document = saved.document;
+    g.location = saved.location;
+    g.WebSocket = saved.WebSocket;
+    g.fetch = saved.fetch;
+  };
+}
+
+const SUPPLY = { leaves: [], correlations: [] };
+
+/** A fetch stub answering the supply poll, the past-sessions list, and a single-stream replay. */
+function fetchStub(replay?: unknown) {
+  return (url: string): Promise<unknown> => {
+    const ok = (body: unknown) => Promise.resolve({ ok: true, status: 200, json: async () => body });
+    if (url.includes("/supply")) return ok(SUPPLY);
+    if (replay !== undefined && /\/transcripts\/[^/]+$/.test(url)) return ok(replay);
+    if (url.includes("/transcripts")) return ok({ sessions: [] });
+    return Promise.resolve({ ok: false, status: 404, json: async () => ({}) });
+  };
+}
+
+const OPTS = {
+  reportUrl: "http://app.test/app/api/agentic/supply",
+  transcriptsUrl: "http://app.test/app/api/agentic/transcripts",
+  relayUrl: "ws://app.test/agentic",
+  refreshMs: 1_000_000, // effectively disable the self-scheduling poll; we dispose() at the end.
+};
+
+test("the rendered transcript region sits directly beneath the Workers — supply table", async () => {
+  const restore = installEnv(fetchStub());
+  try {
+    const { mountCockpit } = await import("../../../pages/cockpit/mount.js");
+    const handle = mountCockpit(document.getElementById("root"), OPTS);
+    const shell = document.querySelector(".cockpit-shell");
+    const order = [...(shell?.children ?? [])].map((c: { className: string }) => c.className);
+    assertEquals(order, ["cockpit-supply-region", "cockpit-terminal", "cockpit-past-region"]);
+    handle.dispose();
+  } finally {
+    restore();
+  }
+});
+
+test("live drill renders the transcript — a nwfTranscriptEvent chunk is never surfaced verbatim", async () => {
+  const restore = installEnv(fetchStub());
+  try {
+    const { mountCockpit } = await import("../../../pages/cockpit/mount.js");
+    const handle = mountCockpit(document.getElementById("root"), OPTS);
+    handle.drill("job:live");
+    const socket = StubWebSocket.instances[0];
+    assert(socket !== undefined, "a relay socket was opened for the drill");
+    socket.fireOpen();
+    socket.deliver({ lane: "control", family: "relay", seq: 0, payload: { op: "subscribed", stream: "job:live", gap: false, nextOffset: 0 } });
+    socket.deliver({
+      lane: "bulk",
+      family: "relay",
+      seq: 1,
+      payload: { stream: "job:live", offset: 0, chunk: envChunk("message", { role: "assistant", text: "hello from the agent" }) },
+    });
+
+    const host = document.querySelector('[data-terminal="host"]');
+    const rendered = host?.querySelector(".cockpit-transcript-derived");
+    assert(rendered != null, "the derived transcript is rendered into the terminal host");
+    assert((host?.textContent ?? "").includes("hello from the agent"), "the message text is rendered");
+    assert(!(host?.textContent ?? "").includes(TRANSCRIPT_EVENT_MARKER), "the raw nwfTranscriptEvent marker is never shown");
+    assertEquals(document.querySelector(".cockpit-terminal")?.getAttribute("data-terminal-mode"), "live");
+    handle.dispose();
+  } finally {
+    restore();
+  }
+});
+
+test("replay renders a past session's transcript — never a raw nwfTranscriptEvent dump", async () => {
+  const replay = {
+    stream: "job:past",
+    from: 0,
+    gap: false,
+    nextOffset: 3,
+    entries: [
+      { offset: 0, chunk: envChunk("message", { role: "user", text: "kick off" }) },
+      { offset: 1, chunk: envChunk("tool-call", { name: "grep", callId: "c1" }) },
+      { offset: 2, chunk: envChunk("tool-result", { callId: "c1", ok: true, content: "match" }) },
+    ],
+  };
+  const restore = installEnv(fetchStub(replay));
+  try {
+    const { mountCockpit } = await import("../../../pages/cockpit/mount.js");
+    const handle = mountCockpit(document.getElementById("root"), OPTS);
+    await handle.replay("job:past");
+
+    const host = document.querySelector('[data-terminal="host"]');
+    assert(host?.querySelector(".cockpit-transcript-derived") != null, "the derived transcript is rendered on replay");
+    assert((host?.textContent ?? "").includes("kick off"), "the message text is rendered");
+    assert(host?.querySelector('[data-tool="grep"]') != null, "the tool card is rendered");
+    assert(!(host?.textContent ?? "").includes(TRANSCRIPT_EVENT_MARKER), "the raw nwfTranscriptEvent marker is never shown");
+    assertEquals(document.querySelector(".cockpit-terminal")?.getAttribute("data-terminal-mode"), "replay");
+    handle.dispose();
+  } finally {
+    restore();
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanobpm/nano-workforce",
-  "version": "0.168.0",
+  "version": "0.168.1",
   "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",
@@ -51,6 +51,8 @@
     "sync:nav:check": "node --experimental-strip-types scripts/sync-nav.ts --check",
     "gen:mcp-bodies": "node --experimental-strip-types scripts/inline-mcp-bodies.ts",
     "check:mcp-bodies": "node --experimental-strip-types scripts/inline-mcp-bodies.ts --check",
+    "gen:cockpit-browser": "node --experimental-strip-types scripts/build-cockpit-browser.ts",
+    "check:cockpit-browser": "node --experimental-strip-types scripts/build-cockpit-browser.ts --check",
     "dev": "urban dev",
     "pretest": "urban gen",
     "test": "node --experimental-strip-types --test",

package/pages/cockpit/cockpit.css

@@ -305,3 +305,121 @@
 .cockpit-terminal[data-terminal-mode="live"] .cockpit-panel-title {
   color: var(--cockpit-green);
 }
+
+/* ── Rendered transcript (#660): the derived message turns + tool/diff/permission cards the Worker ──
+   terminal shows for both a live drill and a past-session replay, in place of a raw nwfTranscriptEvent
+   dump. Mounted into `.cockpit-terminal-host` by renderDerivedTranscript(). */
+
+.cockpit-transcript-derived {
+  display: grid;
+  gap: 12px;
+  padding: 8px;
+  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+  max-height: 60vh;
+  overflow: auto;
+}
+
+.cockpit-transcript-empty {
+  color: var(--cockpit-muted);
+  font-style: italic;
+  padding: 8px;
+}
+
+.cockpit-transcript-turn {
+  display: grid;
+  gap: 8px;
+  border-left: 2px solid var(--cockpit-edge);
+  padding-left: 10px;
+}
+
+.cockpit-transcript-turn-title {
+  font-size: 11px;
+  margin: 0;
+  color: var(--cockpit-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.cockpit-transcript-message {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: rgba(34, 48, 65, 0.35);
+}
+
+.cockpit-transcript-message[data-role="user"] { border-left: 3px solid #58a6ff; }
+.cockpit-transcript-message[data-role="assistant"] { border-left: 3px solid var(--cockpit-green); }
+.cockpit-transcript-message[data-role="system"],
+.cockpit-transcript-message[data-role="tool"] { border-left: 3px solid var(--cockpit-muted); color: var(--cockpit-muted); }
+
+.cockpit-transcript-tool {
+  border: 1px solid var(--cockpit-edge);
+  border-radius: 6px;
+  padding: 8px;
+  background: rgba(19, 26, 34, 0.6);
+}
+
+.cockpit-transcript-tool-name {
+  font-weight: 600;
+  color: #b392f0;
+}
+
+.cockpit-transcript-tool[data-status="error"] .cockpit-transcript-tool-name { color: var(--cockpit-red); }
+.cockpit-transcript-tool[data-status="ok"] .cockpit-transcript-tool-name::after { content: " ✓"; color: var(--cockpit-green); }
+
+.cockpit-transcript-tool-args,
+.cockpit-transcript-tool-result,
+.cockpit-transcript-diff {
+  margin: 6px 0 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background: #05080b;
+  border-radius: 4px;
+  padding: 6px 8px;
+}
+
+.cockpit-transcript-diff-line[data-diff-line="add"] { color: var(--cockpit-green); }
+.cockpit-transcript-diff-line[data-diff-line="del"] { color: var(--cockpit-red); }
+.cockpit-transcript-diff-line[data-diff-line="ctx"] { color: var(--cockpit-muted); }
+
+.cockpit-transcript-permission {
+  border: 1px solid var(--cockpit-amber);
+  border-radius: 6px;
+  padding: 8px;
+  background: rgba(210, 153, 34, 0.08);
+}
+
+.cockpit-transcript-permission-title { font-weight: 600; }
+.cockpit-transcript-permission-reason,
+.cockpit-transcript-permission-note { color: var(--cockpit-muted); font-size: 12px; }
+
+.cockpit-transcript-permission[data-status="allowed"] { border-color: var(--cockpit-green); }
+.cockpit-transcript-permission[data-status="denied"] { border-color: var(--cockpit-red); }
+
+.cockpit-transcript-permission-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.cockpit-transcript-permission-option {
+  cursor: pointer;
+  font: inherit;
+  color: var(--cockpit-text);
+  background: var(--cockpit-panel);
+  border: 1px solid var(--cockpit-edge);
+  border-radius: 6px;
+  padding: 4px 10px;
+}
+
+.cockpit-transcript-permission-option[data-allowed="true"]:hover { border-color: var(--cockpit-green); }
+.cockpit-transcript-permission-option[data-allowed="false"]:hover { border-color: var(--cockpit-red); }
+
+.cockpit-transcript-raw {
+  color: var(--cockpit-muted);
+  font-size: 11px;
+  border-top: 1px solid var(--cockpit-edge);
+  padding-top: 6px;
+}

package/pages/cockpit/embed.html

@@ -5,15 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Agent cockpit — supply (App View embed)</title>
     <link rel="stylesheet" href="./cockpit.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5/css/xterm.min.css" />
     <style>
       html, body { margin: 0; height: 100%; background: #0b0f14; }
     </style>
     <script type="importmap">
       {
         "imports": {
-          "@nanobpm/agentic/cockpit": "https://cdn.jsdelivr.net/npm/@nanobpm/agentic@0.1.0/dist/cockpit/index.js",
-          "@xterm/xterm": "https://cdn.jsdelivr.net/npm/@xterm/xterm@5/+esm"
+          "@nanobpm/agentic/cockpit": "https://cdn.jsdelivr.net/npm/@nanobpm/agentic@0.1.0/dist/cockpit/index.js"
         }
       }
     </script>