@nanobpm/nano-workforce 0.54.0 → 0.55.0

package/operations/getAgenticSupply.ts

@@ -0,0 +1,59 @@
+// GET /app/api/agentic/supply → operationId `getAgenticSupply` (ADR 0058/0059 OpenAPI surface, mounted
+// under base /app/api). The SUPPLY-ONLY visibility report the H5 cockpit page (#148) polls: the live
+// worker list — family, host, current jobs, liveness — grouped by leaf token, sourced from the H1
+// presence registry (#144). Read-only projection; it NEVER gates control flow (advisory-only, ADR 0056).
+//
+// This is the supply half of the visibility plane only. The demand×supply matrix, missing-agent-type
+// reds, and diversity-SLO lights are DE-SCOPED to the enrolment epic #152 — this report carries no
+// demand-side fields, and the cockpit renders none.
+//
+// The optional shared-secret guard stays HERE (the runtime does not enforce OpenAPI `security`): when
+// NANO_PR_WEBHOOK_SECRET is set, callers must present it via the x-hook-secret header. Unset → open.
+
+import { currentPresenceRegistry, type SupplyWorker } from "../app/agentic/families/presence.family.ts";
+import { envVar } from "../app/version.ts";
+import type { AgenticSupplyReport, AgenticSupplyWorker } from "../nano-generated/api-io.d.ts";
+import { defineOperation } from "../nano-generated/operations.ts";
+
+// The optional shared-secret guard: when NANO_PR_WEBHOOK_SECRET is set, callers must present it via
+// the x-hook-secret header. Captured once, at module load.
+const SECRET = envVar("NANO_PR_WEBHOOK_SECRET") ?? "";
+
+// The relay stream id to subscribe when drilling into a worker's terminal. Presence keys the relay by
+// worker instance; the H6 correlation slice (#149) may repoint this at a jobKey-scoped stream.
+function toWorker(w: SupplyWorker): AgenticSupplyWorker {
+  const out: AgenticSupplyWorker = {
+    instance: w.instance,
+    identity: w.identity,
+    stream: w.instance,
+    jobKeys: [...w.jobKeys],
+    live: w.live,
+    staleMs: w.staleMs,
+  };
+  if (w.family !== undefined) out.family = w.family;
+  if (w.host !== undefined) out.host = w.host;
+  return out;
+}
+
+export default defineOperation("getAgenticSupply", async ({ req }, app) => {
+  if (SECRET && req.headers.get("x-hook-secret") !== SECRET) {
+    app.log.warn("getAgenticSupply rejected: missing/invalid shared secret");
+    return { status: 401, body: { error: "unauthorized" } };
+  }
+
+  const registry = currentPresenceRegistry();
+  if (!registry) {
+    // The presence family has not mounted (or has torn down) — no supply to report, not an error.
+    const empty: AgenticSupplyReport = { count: 0, generatedAt: new Date().toISOString(), workers: [], leaves: [] };
+    return { status: 200, body: empty };
+  }
+
+  const snapshot = registry.snapshot();
+  const report: AgenticSupplyReport = {
+    count: snapshot.count,
+    generatedAt: new Date().toISOString(),
+    workers: snapshot.workers.map(toWorker),
+    leaves: snapshot.leaves.map((leaf) => ({ token: leaf.token, workers: leaf.workers.map(toWorker) })),
+  };
+  return { status: 200, body: report };
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanobpm/nano-workforce",
-  "version": "0.54.0",
+  "version": "0.55.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",

package/pages/cockpit/cockpit.css

@@ -0,0 +1,145 @@
+/* The SUPPLY cockpit stylesheet (H5 / #148) — a compact, phone-friendly dark cockpit shared by the
+   standalone shell and the console App-View embed, so the two render identically. The three-state
+   liveness dot keys off `data-liveness` (live | stale | down). It styles the SUPPLY worker list only
+   — no demand×supply matrix / diversity-SLO light (deferred to enrolment epic #152). */
+
+:root {
+  --cockpit-bg: #0b0f14;
+  --cockpit-panel: #131a22;
+  --cockpit-edge: #223041;
+  --cockpit-text: #e6edf3;
+  --cockpit-muted: #8b98a5;
+  --cockpit-green: #2ea043;
+  --cockpit-amber: #d29922;
+  --cockpit-red: #f85149;
+}
+
+.cockpit-shell {
+  color: var(--cockpit-text);
+  background: var(--cockpit-bg);
+  font: 14px/1.4 ui-sans-serif, system-ui, sans-serif;
+  display: grid;
+  gap: 12px;
+  padding: 12px;
+  min-height: 100%;
+}
+
+.cockpit-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+
+.cockpit-title {
+  font-size: 16px;
+  margin: 0;
+}
+
+.cockpit-supply-summary {
+  color: var(--cockpit-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.cockpit-supply-region,
+.cockpit-terminal {
+  background: var(--cockpit-panel);
+  border: 1px solid var(--cockpit-edge);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.cockpit-panel-title {
+  font-size: 13px;
+  margin: 0 0 8px;
+  color: var(--cockpit-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.cockpit-leaf {
+  margin-bottom: 12px;
+}
+
+.cockpit-leaf-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 6px;
+}
+
+.cockpit-leaf-name {
+  font-weight: 600;
+}
+
+.cockpit-leaf-count {
+  color: var(--cockpit-muted);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.cockpit-supply-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+
+.cockpit-th {
+  text-align: left;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--cockpit-muted);
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--cockpit-edge);
+}
+
+.cockpit-td {
+  padding: 6px 8px;
+  border-bottom: 1px solid rgba(34, 48, 65, 0.5);
+}
+
+.cockpit-supply-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cockpit-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  flex: 0 0 auto;
+  background: var(--cockpit-muted);
+}
+
+.cockpit-dot[data-liveness="live"] { background: var(--cockpit-green); }
+.cockpit-dot[data-liveness="stale"] { background: var(--cockpit-amber); }
+.cockpit-dot[data-liveness="down"] { background: var(--cockpit-red); }
+
+.cockpit-worker {
+  background: none;
+  border: none;
+  color: var(--cockpit-text);
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.cockpit-worker:hover { color: #58a6ff; }
+
+.cockpit-supply-liveness { color: var(--cockpit-muted); }
+
+.cockpit-supply-empty {
+  color: var(--cockpit-muted);
+  padding: 8px 0;
+}
+
+.cockpit-terminal-host {
+  min-height: 220px;
+  background: #05080b;
+  border-radius: 6px;
+}

package/pages/cockpit/embed.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <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"
+        }
+      }
+    </script>
+  </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 supply cockpit via the SAME ./mount.js as the
+      standalone shell — only the host and the injected endpoints differ, so the page renders
+      identically. When the console injects endpoint config via `window.__NANO_APP_VIEW__`, it wins.
+    -->
+    <main id="cockpit-root"></main>
+    <script type="module">
+      import { mountCockpit } from "./mount.js";
+
+      const cfg = window.__NANO_APP_VIEW__ ?? {};
+      mountCockpit(cfg.host ?? document.getElementById("cockpit-root"), {
+        reportUrl: cfg.reportUrl,
+        relayUrl: cfg.relayUrl,
+        hookSecret: cfg.hookSecret,
+        relayToken: cfg.relayToken,
+        relayCapability: cfg.relayCapability,
+      });
+    </script>
+  </body>
+</html>

package/pages/cockpit/mount.js

@@ -0,0 +1,331 @@
+// Browser adapter for the SUPPLY-only agentic cockpit (H5 / #148).
+//
+// This is the ONE wiring both the standalone shell and the console App-View embed call — they differ
+// only in the host element they pass, so the supply cockpit renders identically embedded and
+// standalone. It supplies the browser capabilities the injection-based core needs: the real
+// `document`, a `fetch`-based supply report source, a `WebSocket` relay socket factory, and an
+// xterm.js terminal sink.
+//
+// The genuinely reusable, correctness-critical parts — the relay client and the resume-from-offset
+// terminal session — are REUSED from `@nanobpm/agentic/cockpit` (resolved via the host page's import
+// map). Only the SUPPLY projection + render + poll orchestration the package does NOT provide is
+// re-expressed here in plain browser ESM (the app has no build step, so the typed core under
+// `app/agentic/cockpit/` cannot be imported directly by the browser). It is kept faithful to that
+// tested TypeScript core: same DOM shape (`data-worker`, `data-liveness`, `data-stream`, …), same
+// liveness grading, same self-scheduling poll + persistent-terminal discipline.
+//
+// It renders the SUPPLY worker list ONLY — NOT the packaged demand×supply matrix / missing-agent reds
+// / diversity-SLO light (deferred to enrolment epic #152).
+import { RelayChannelClient, TerminalSession } from "@nanobpm/agentic/cockpit";
+import { Terminal } from "@xterm/xterm";
+
+const DEFAULT_REFRESH_MS = 2000;
+const DEFAULT_STALE_AFTER_MS = 15_000;
+
+function isPosInt(value) {
+  return Number.isSafeInteger(value) && value > 0;
+}
+
+// ── supply projection (mirrors app/agentic/cockpit/supply-view.ts) ─────────────────────────────
+
+function liveness(worker, staleAfterMs) {
+  if (!worker.live) return "down";
+  return worker.staleMs >= staleAfterMs ? "stale" : "live";
+}
+
+function workerView(worker, staleAfterMs) {
+  const jobKeys = [...(worker.jobKeys ?? [])].sort((a, b) => a.localeCompare(b));
+  return {
+    instance: worker.instance,
+    identity: worker.identity,
+    stream: worker.stream,
+    family: worker.family ?? "\u2014",
+    host: worker.host ?? "\u2014",
+    jobKeys,
+    jobs: jobKeys.length,
+    liveness: liveness(worker, staleAfterMs),
+    staleMs: worker.staleMs,
+  };
+}
+
+function supplyView(report, staleAfterMs) {
+  const byInstance = (a, b) => a.instance.localeCompare(b.instance);
+  const leaves = (report.leaves ?? [])
+    .map((leaf) => {
+      const workers = leaf.workers.map((w) => workerView(w, staleAfterMs)).sort(byInstance);
+      return {
+        token: leaf.token,
+        workers,
+        liveCount: workers.filter((w) => w.liveness === "live").length,
+        total: workers.length,
+      };
+    })
+    .sort((a, b) => a.token.localeCompare(b.token));
+  const workers = (report.workers ?? []).map((w) => workerView(w, staleAfterMs)).sort(byInstance);
+  return { leaves, workers, count: workers.length, live: workers.filter((w) => w.liveness === "live").length };
+}
+
+// ── supply render (mirrors app/agentic/cockpit/supply-render.ts) ───────────────────────────────
+
+function el(doc, tag, className, text) {
+  const node = doc.createElement(tag);
+  if (className !== undefined) node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+function dot(doc, live) {
+  const node = el(doc, "span", "cockpit-dot");
+  node.setAttribute("data-liveness", live);
+  return node;
+}
+
+function workerRow(doc, worker, onDrill) {
+  const row = el(doc, "tr", "cockpit-supply-worker");
+  row.setAttribute("data-worker", worker.instance);
+  row.setAttribute("data-liveness", worker.liveness);
+  row.setAttribute("data-stream", worker.stream);
+
+  const nameCell = el(doc, "td", "cockpit-td cockpit-supply-name");
+  nameCell.appendChild(dot(doc, worker.liveness));
+  const button = el(doc, "button", "cockpit-worker", worker.instance);
+  button.setAttribute("type", "button");
+  button.setAttribute("data-stream", worker.stream);
+  if (onDrill) button.addEventListener("click", () => onDrill(worker.stream));
+  nameCell.appendChild(button);
+  row.appendChild(nameCell);
+
+  row.appendChild(el(doc, "td", "cockpit-td cockpit-supply-family", worker.family));
+  row.appendChild(el(doc, "td", "cockpit-td cockpit-supply-host", worker.host));
+  const jobsCell = el(doc, "td", "cockpit-td cockpit-supply-jobs", worker.jobs === 0 ? "\u2014" : worker.jobKeys.join(", "));
+  jobsCell.setAttribute("data-jobs", String(worker.jobs));
+  row.appendChild(jobsCell);
+  const livenessCell = el(doc, "td", "cockpit-td cockpit-supply-liveness", worker.liveness);
+  livenessCell.setAttribute("data-liveness", worker.liveness);
+  row.appendChild(livenessCell);
+  return row;
+}
+
+function leafSection(doc, leaf, onDrill) {
+  const section = el(doc, "section", "cockpit-leaf");
+  section.setAttribute("data-leaf", leaf.token);
+  const header = el(doc, "div", "cockpit-leaf-head");
+  header.appendChild(el(doc, "span", "cockpit-leaf-name", leaf.token));
+  header.appendChild(el(doc, "span", "cockpit-leaf-count", `${leaf.liveCount}/${leaf.total} live`));
+  section.appendChild(header);
+  const table = el(doc, "table", "cockpit-supply-table");
+  const thead = el(doc, "thead", "cockpit-supply-thead");
+  const head = el(doc, "tr", "cockpit-supply-head");
+  for (const label of ["worker", "family", "host", "jobs", "liveness"]) head.appendChild(el(doc, "th", "cockpit-th", label));
+  thead.appendChild(head);
+  table.appendChild(thead);
+  const tbody = el(doc, "tbody", "cockpit-supply-tbody");
+  for (const worker of leaf.workers) tbody.appendChild(workerRow(doc, worker, onDrill));
+  table.appendChild(tbody);
+  section.appendChild(table);
+  return section;
+}
+
+function renderSupply(host, doc, view, onDrill) {
+  host.replaceChildren();
+  const root = el(doc, "div", "cockpit-supply");
+  root.setAttribute("data-worker-count", String(view.count));
+  root.setAttribute("data-live-count", String(view.live));
+  const header = el(doc, "header", "cockpit-header");
+  header.appendChild(el(doc, "h1", "cockpit-title", "Workers — supply"));
+  const summary = el(doc, "span", "cockpit-supply-summary", `${view.live}/${view.count} live`);
+  summary.setAttribute("data-summary", "supply");
+  header.appendChild(summary);
+  root.appendChild(header);
+  if (view.count === 0) {
+    const empty = el(doc, "div", "cockpit-supply-empty", "No workers connected.");
+    empty.setAttribute("data-empty", "true");
+    root.appendChild(empty);
+    host.appendChild(root);
+    return;
+  }
+  const list = el(doc, "div", "cockpit-supply-list");
+  for (const leaf of view.leaves) list.appendChild(leafSection(doc, leaf, onDrill));
+  root.appendChild(list);
+  host.appendChild(root);
+}
+
+// ── boot orchestration (mirrors app/agentic/cockpit/supply-boot.ts) ────────────────────────────
+
+/** An xterm.js-backed terminal sink mounted into `host`. */
+function xtermSink(host) {
+  const term = new Terminal({ convertEol: true, fontFamily: "ui-monospace, monospace", fontSize: 13 });
+  term.open(host);
+  return { write: (chunk) => term.write(chunk), dispose: () => term.dispose() };
+}
+
+/** A WebSocket relay socket factory for the agentic channel at `url`. */
+function relaySocketFactory(url) {
+  return () => {
+    const ws = new WebSocket(url);
+    ws.binaryType = "arraybuffer";
+    return {
+      send: (bytes) => ws.send(bytes),
+      close: () => ws.close(),
+      onMessage: (cb) => ws.addEventListener("message", (event) => cb(new Uint8Array(event.data))),
+      onOpen: (cb) => ws.addEventListener("open", () => cb()),
+      onClose: (cb) => ws.addEventListener("close", () => cb()),
+    };
+  };
+}
+
+/**
+ * Mount the SUPPLY cockpit into `host` and start polling.
+ *
+ * @param {Element} host — where the cockpit renders (standalone: document.body; embedded: the App-View host).
+ * @param {object} [opts]
+ * @param {string} [opts.reportUrl] — the supply JSON endpoint the app serves.
+ * @param {string} [opts.relayUrl]  — the agentic channel WebSocket URL (with auth token + capability query).
+ * @param {string} [opts.hookSecret] — shared secret sent as `x-hook-secret` on the report fetch when the
+ *   app's supply endpoint is guarded by NANO_PR_WEBHOOK_SECRET (omit for open deployments).
+ * @param {string} [opts.relayToken] — identity token appended to the default relay URL as `?token=…`.
+ * @param {string} [opts.relayCapability] — capability credential appended to the default relay URL as `&capability=…`.
+ * @param {number} [opts.refreshMs] — poll interval (default 2000).
+ * @param {number} [opts.staleAfterMs] — a worker is rendered "stale" once its last heartbeat is at
+ *   least this many ms old (default 15000).
+ * @returns a handle with `.dispose()`.
+ */
+export function mountCockpit(host, opts = {}) {
+  if (host == null || typeof host.replaceChildren !== "function") {
+    throw new Error(
+      `mountCockpit(host): host must be a mounted DOM element (got ${host === null ? "null" : typeof host}).`,
+    );
+  }
+  const doc = document;
+  const reportUrl = opts.reportUrl ?? "/app/api/agentic/supply";
+  const hookSecret = opts.hookSecret;
+  const relayUrl = opts.relayUrl ?? defaultRelayUrl(opts.relayToken, opts.relayCapability);
+  const refreshMs = opts.refreshMs ?? DEFAULT_REFRESH_MS;
+  // refreshMs feeds setTimeout as a poll delay. A negative/NaN/fractional/unsafe value silently
+  // collapses to a ~0ms delay, turning the poll into a hot loop that hammers the supply endpoint.
+  // Require a positive safe integer up-front (mirroring the TS boot layer) so a bad opt fails loudly.
+  if (!isPosInt(refreshMs)) {
+    throw new RangeError(`mountCockpit(opts.refreshMs): must be a positive safe integer, got ${refreshMs}.`);
+  }
+  const staleAfterMs = opts.staleAfterMs ?? DEFAULT_STALE_AFTER_MS;
+  const connectRelay = relaySocketFactory(relayUrl);
+  const onError = (err) => console.error("[cockpit]", err);
+
+  // Stable skeleton: a volatile list region the poll re-renders + a PERSISTENT terminal region a
+  // refresh never touches (so a drilled-in terminal survives a list refresh).
+  host.replaceChildren();
+  const shell = el(doc, "div", "cockpit-shell");
+  const listRegion = el(doc, "div", "cockpit-supply-region");
+  const terminalPanel = el(doc, "section", "cockpit-terminal");
+  terminalPanel.appendChild(el(doc, "h2", "cockpit-panel-title", "Worker terminal"));
+  const terminalHost = el(doc, "div", "cockpit-terminal-host");
+  terminalHost.setAttribute("data-terminal", "host");
+  terminalPanel.appendChild(terminalHost);
+  shell.appendChild(listRegion);
+  shell.appendChild(terminalPanel);
+  host.appendChild(shell);
+
+  let running = false;
+  let disposed = false;
+  let timer;
+  let generation = 0;
+  let drill; // { stream, client }
+  let terminal; // the current xterm sink
+
+  function drillInto(stream) {
+    if (disposed || drill?.stream === stream) return;
+    drill?.client.close();
+    drill = undefined;
+    terminal?.dispose?.();
+    terminal = undefined;
+    try {
+      terminalHost.replaceChildren();
+      const sink = xtermSink(terminalHost);
+      terminal = sink;
+      let session;
+      const client = new RelayChannelClient({
+        connect: connectRelay,
+        onRelay: (message) => session?.handle(message),
+        onOpen: () => session?.attach(),
+        onError,
+      });
+      session = new TerminalSession({ stream, sink, send: (message) => client.sendRelay(message) });
+      client.open();
+      drill = { stream, client };
+    } catch (err) {
+      onError(err);
+    }
+  }
+
+  async function refresh() {
+    if (disposed) return;
+    let report;
+    try {
+      const headers = { accept: "application/json" };
+      if (hookSecret) headers["x-hook-secret"] = hookSecret;
+      const res = await fetch(reportUrl, { headers });
+      if (!res.ok) throw new Error(`supply fetch failed: ${res.status}`);
+      report = await res.json();
+    } catch (err) {
+      onError(err);
+      return;
+    }
+    if (disposed) return;
+    try {
+      renderSupply(listRegion, doc, supplyView(report, staleAfterMs), drillInto);
+    } catch (err) {
+      onError(err);
+    }
+  }
+
+  function tick(gen) {
+    void refresh().finally(() => {
+      if (gen !== generation || !running || disposed) return;
+      timer = setTimeout(() => tick(gen), refreshMs);
+    });
+  }
+
+  function start() {
+    if (disposed || running) return;
+    running = true;
+    tick(++generation);
+  }
+  function stop() {
+    running = false;
+    generation++;
+    if (timer !== undefined) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  }
+  function dispose() {
+    if (disposed) return;
+    disposed = true;
+    stop();
+    drill?.client.close();
+    drill = undefined;
+    terminal?.dispose?.();
+    terminal = undefined;
+  }
+
+  start();
+  return { start, stop, dispose, refresh, drill: drillInto };
+}
+
+/**
+ * Derive the channel WebSocket URL from the current origin (path `/agentic`).
+ *
+ * The agentic hub authenticates upgrades with `sharedSecretAuthenticator({ requireCredential: true })`,
+ * so a bare `ws(s)://host/agentic` is rejected (4401/4403). When a `token` (and optional `capability`)
+ * are supplied, they are appended as the `?token=…&capability=…` query the hub requires; without them
+ * the default URL cannot authenticate and drill-in will be refused — pass credentials (or an explicit
+ * `relayUrl`) for secured deployments.
+ */
+function defaultRelayUrl(token, capability) {
+  const proto = location.protocol === "https:" ? "wss:" : "ws:";
+  const base = `${proto}//${location.host}/agentic`;
+  if (!token) return base;
+  const query = new URLSearchParams({ token });
+  if (capability) query.set("capability", capability);
+  return `${base}?${query}`;
+}

package/pages/cockpit/standalone.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>Agent cockpit — supply</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>
+    <!--
+      Resolve the reusable cockpit ESM (the relay client + resume-from-offset terminal session) and
+      xterm.js. Only these correctness-critical primitives are imported from the package; the supply
+      projection/render/poll lives inline in ./mount.js (the app has no build step to share its typed
+      core with the browser). The SAME ./mount.js the console App-View embed uses is loaded here, so
+      the standalone phone view and the embedded console view render identically.
+    -->
+    <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"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <main id="cockpit-root"></main>
+    <script type="module">
+      import { mountCockpit } from "./mount.js";
+
+      // Standalone: mount into the page body. Endpoints default to the current origin; override via
+      // ?report= and ?relay= for a remote app. For a secured deployment, pass the report guard secret
+      // via ?secret= (sent as x-hook-secret) and the relay credentials via ?token= and ?capability=.
+      const params = new URLSearchParams(location.search);
+      mountCockpit(document.getElementById("cockpit-root"), {
+        reportUrl: params.get("report") ?? undefined,
+        relayUrl: params.get("relay") ?? undefined,
+        hookSecret: params.get("secret") ?? undefined,
+        relayToken: params.get("token") ?? undefined,
+        relayCapability: params.get("capability") ?? undefined,
+      });
+    </script>
+  </body>
+</html>

package/pages/cockpit.page.json

@@ -0,0 +1,46 @@
+{
+  "schemaVersion": "1.0",
+  "title": "Cockpit",
+  "nodes": [
+    {
+      "type": "nav",
+      "id": "nav",
+      "props": {
+        "variant": "bar",
+        "title": "Nano Workforce",
+        "items": [
+          { "label": "Convergence", "page": "home" },
+          { "label": "Epics", "page": "epic" },
+          { "label": "Cockpit", "page": "cockpit" }
+        ],
+        "sticky": true
+      }
+    },
+    {
+      "type": "text",
+      "id": "title",
+      "props": {
+        "text": "Agent cockpit — live supply",
+        "variant": "heading"
+      }
+    },
+    {
+      "type": "text",
+      "id": "intro",
+      "props": {
+        "text": "The live worker/supply view: every connected worker grouped by leaf token, with family, host, current jobs, and liveness — sourced from the agentic presence registry. Drill into a worker to stream its terminal live over the relay; the terminal stays mounted across a list refresh and re-attaches (resume-from-offset) on reconnect. The same view renders embedded here (App View) and standalone on a phone. (The demand×supply matrix, missing-agent-type lights, and the diversity SLO are the enrolment epic's board — not shown here.)",
+        "variant": "sub"
+      }
+    },
+    {
+      "type": "appView",
+      "id": "cockpit",
+      "props": {
+        "title": "Live supply",
+        "embed": "./cockpit/embed.html",
+        "standalone": "./cockpit/standalone.html",
+        "fill": true
+      }
+    }
+  ]
+}