@smithers-orchestrator/server 0.20.4 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smithers-orchestrator/server",
-  "version": "0.20.4",
+  "version": "0.21.0",
   "description": "HTTP, WebSocket, gateway, cron, webhook, and metrics servers for Smithers",
   "type": "module",
   "sideEffects": false,
@@ -26,24 +26,24 @@
     "effect": "^3.21.1",
     "hono": "^4.12.14",
     "ws": "^8.20.0",
-    "@smithers-orchestrator/components": "0.20.4",
-    "@smithers-orchestrator/db": "0.20.4",
-    "@smithers-orchestrator/devtools": "0.20.4",
-    "@smithers-orchestrator/engine": "0.20.4",
-    "@smithers-orchestrator/errors": "0.20.4",
-    "@smithers-orchestrator/observability": "0.20.4",
-    "@smithers-orchestrator/scheduler": "0.20.4",
-    "@smithers-orchestrator/gateway": "0.20.4",
-    "@smithers-orchestrator/time-travel": "0.20.4",
-    "@smithers-orchestrator/driver": "0.20.4",
-    "@smithers-orchestrator/protocol": "0.20.4"
+    "@smithers-orchestrator/db": "0.21.0",
+    "@smithers-orchestrator/devtools": "0.21.0",
+    "@smithers-orchestrator/components": "0.21.0",
+    "@smithers-orchestrator/driver": "0.21.0",
+    "@smithers-orchestrator/errors": "0.21.0",
+    "@smithers-orchestrator/engine": "0.21.0",
+    "@smithers-orchestrator/gateway": "0.21.0",
+    "@smithers-orchestrator/observability": "0.21.0",
+    "@smithers-orchestrator/protocol": "0.21.0",
+    "@smithers-orchestrator/scheduler": "0.21.0",
+    "@smithers-orchestrator/time-travel": "0.21.0"
   },
   "devDependencies": {
     "@types/bun": "latest",
     "react": "^19.2.5",
     "typescript": "~5.9.3",
     "zod": "^4.3.6",
-    "@smithers-orchestrator/graph": "0.20.4"
+    "@smithers-orchestrator/graph": "0.21.0"
   },
   "scripts": {
     "test": "bun test tests",

package/src/GatewayOperatorUiConfig.ts

@@ -0,0 +1,15 @@
+export type GatewayOperatorUiConfig = {
+  /**
+   * URL path for the built-in operator console.
+   * @default "/console"
+   */
+  path?: string;
+  /**
+   * Document title for the generated HTML shell.
+   */
+  title?: string;
+  /**
+   * JSON-serializable boot data exposed to the browser.
+   */
+  props?: Record<string, unknown>;
+};

package/src/GatewayOptions.ts

@@ -1,5 +1,6 @@
 import type { GatewayAuthConfig } from "./GatewayAuthConfig.js";
 import type { GatewayDefaults } from "./GatewayDefaults.js";
+import type { GatewayOperatorUiConfig } from "./GatewayOperatorUiConfig.js";
 import type { GatewayUiConfig } from "./GatewayUiConfig.js";
 
 export type GatewayOptions = {
@@ -8,6 +9,11 @@ export type GatewayOptions = {
   heartbeatMs?: number;
   auth?: GatewayAuthConfig;
   ui?: GatewayUiConfig;
+  /**
+   * Built-in browser console for operators. Set to false to disable it.
+   * @default { path: "/console" }
+   */
+  operatorUi?: GatewayOperatorUiConfig | false;
   defaults?: GatewayDefaults;
   maxBodyBytes?: number;
   maxPayload?: number;

package/src/GatewayUiConfig.ts

@@ -1,7 +1,8 @@
-export type GatewayUiConfig = {
+export type GatewayUiConfig = true | {
   /**
    * Browser entry module for the React app. Smithers bundles this with Bun and
-   * serves it from the Gateway origin.
+   * serves it from the Gateway origin. Pass `true` to mount the built-in
+   * operator console.
    */
   entry: string;
   /**

package/src/gateway.js

@@ -40,10 +40,15 @@ import { recoverInProgressRewindAudits } from "@smithers-orchestrator/time-trave
 import { GATEWAY_EVENT_WINDOW_DEFAULT, SMITHERS_API_VERSION, getRequiredScopeForGatewayMethod, } from "@smithers-orchestrator/gateway/rpc";
 import { hasGatewayScope } from "@smithers-orchestrator/gateway/auth/scopes";
 import { createGatewayUiApp } from "./gatewayUi/createGatewayUiApp.js";
+import { renderDefaultConsoleClient } from "./gatewayUi/defaultConsole.js";
+import { authorizeGatewayUiRequest } from "./gatewayUi/auth.js";
+import { bundleGatewayUiEntry } from "./gatewayUi/bundle.js";
+import { DEFAULT_OPERATOR_UI_ENTRY } from "./gatewayUi/defaultOperatorUi.js";
 /** @typedef {import("./GatewayWebhookRunConfig.js").GatewayWebhookRunConfig} GatewayWebhookRunConfig */
 /** @typedef {import("./GatewayWebhookSignalConfig.js").GatewayWebhookSignalConfig} GatewayWebhookSignalConfig */
 /** @typedef {import("./ConnectRequest.js").ConnectRequest} ConnectRequest */
 /** @typedef {import("./GatewayAuthConfig.js").GatewayAuthConfig} GatewayAuthConfig */
+/** @typedef {import("./GatewayOperatorUiConfig.js").GatewayOperatorUiConfig} GatewayOperatorUiConfig */
 /** @typedef {import("./GatewayOptions.js").GatewayOptions} GatewayOptions */
 /** @typedef {import("./GatewayWebhookConfig.js").GatewayWebhookConfig} GatewayWebhookConfig */
 /** @typedef {import("node:http").IncomingMessage} IncomingMessage */
@@ -111,11 +116,12 @@ import { createGatewayUiApp } from "./gatewayUi/createGatewayUiApp.js";
  *   path: string;
  *   title?: string;
  *   props?: Record<string, unknown>;
+ *   builtin?: "operator";
  * }} ResolvedGatewayUiConfig
  */
 /**
  * @typedef {{
- *   kind: "gateway" | "workflow";
+ *   kind: "gateway" | "workflow" | "operator";
  *   workflowKey: string | null;
  *   config: ResolvedGatewayUiConfig;
  * }} GatewayUiMount
@@ -195,6 +201,15 @@ function resolveGatewayUiConfig(ui, fallbackPath) {
     if (!ui) {
         return null;
     }
+    if (ui === true) {
+        return {
+            entry: DEFAULT_OPERATOR_UI_ENTRY,
+            path: normalizeUiMountPath(fallbackPath === "/" ? "/console" : fallbackPath, fallbackPath),
+            title: "Smithers Operator Console",
+            builtin: "operator",
+            props: {},
+        };
+    }
     if (typeof ui.entry !== "string" || !ui.entry.trim()) {
         throw new SmithersError("INVALID_INPUT", "Gateway UI config requires a non-empty entry path.");
     }
@@ -207,6 +222,25 @@ function resolveGatewayUiConfig(ui, fallbackPath) {
             : {}),
     };
 }
+/**
+ * @param {GatewayOperatorUiConfig | false | undefined} ui
+ * @returns {ResolvedGatewayUiConfig | null}
+ */
+function resolveDefaultOperatorUiConfig(ui) {
+    if (ui === false) {
+        return null;
+    }
+    const config = ui && typeof ui === "object" && !Array.isArray(ui) ? ui : {};
+    return {
+        entry: DEFAULT_OPERATOR_UI_ENTRY,
+        path: normalizeUiMountPath(config.path, "/console"),
+        title: typeof config.title === "string" ? config.title : "Smithers Operator Console",
+        props: config.props && typeof config.props === "object" && !Array.isArray(config.props)
+            ? config.props
+            : {},
+        builtin: "operator",
+    };
+}
 
 /**
  * @param {import("node:http").IncomingHttpHeaders} headers
@@ -1197,6 +1231,7 @@ export class Gateway {
     requestTimeout;
     auth;
     ui;
+    operatorUi;
     uiApp;
     defaults;
     workflows = new Map();
@@ -1243,6 +1278,7 @@ export class Gateway {
             : Math.floor(assertPositiveFiniteInteger("requestTimeout", Number(options.requestTimeout)));
         this.auth = options.auth;
         this.ui = resolveGatewayUiConfig(options.ui, "/");
+        this.operatorUi = resolveDefaultOperatorUiConfig(options.operatorUi);
         this.uiApp = createGatewayUiApp({
             resolveMatch: (pathname) => this.resolveUiMatch(pathname),
             renderIndex: (match) => this.renderUiIndex(match),
@@ -1256,7 +1292,14 @@ export class Gateway {
     getUiMounts() {
         const mounts = [];
         if (this.ui) {
-            mounts.push({ kind: "gateway", workflowKey: null, config: this.ui });
+            mounts.push({
+                kind: this.ui.builtin === "operator" ? "operator" : "gateway",
+                workflowKey: null,
+                config: this.ui,
+            });
+        }
+        if (this.operatorUi && (!this.ui || this.ui.path !== this.operatorUi.path)) {
+            mounts.push({ kind: "operator", workflowKey: null, config: this.operatorUi });
         }
         for (const [workflowKey, entry] of this.workflows.entries()) {
             if (entry.ui) {
@@ -1341,47 +1384,19 @@ export class Gateway {
         if (match.assetPath !== "client.js") {
             return null;
         }
-        const body = await this.bundleUiEntry(match.config.config);
+        if (match.config.config.builtin === "operator") {
+            return {
+                body: renderDefaultConsoleClient(),
+                contentType: "text/javascript; charset=utf-8",
+            };
+        }
+        const body = await bundleGatewayUiEntry(match.config.config, this.uiAssetCache);
         return {
             body,
             contentType: "text/javascript; charset=utf-8",
         };
     }
     /**
-   * @param {ResolvedGatewayUiConfig} config
-   * @returns {Promise<string>}
-   */
-    async bundleUiEntry(config) {
-        const cached = this.uiAssetCache.get(config.entry);
-        if (cached) {
-            return cached;
-        }
-        if (typeof Bun === "undefined" || typeof Bun.build !== "function") {
-            throw new SmithersError("INVALID_INPUT", "Gateway UI bundling requires Bun.build.");
-        }
-        const result = await Bun.build({
-            entrypoints: [config.entry],
-            root: process.cwd(),
-            target: "browser",
-            format: "esm",
-            sourcemap: "inline",
-            minify: false,
-            jsx: {
-                runtime: "automatic",
-                importSource: "react",
-            },
-        });
-        if (!result.success) {
-            const message = result.logs?.map((entry) => entry.message).filter(Boolean).join("\n")
-                || `Failed to build Gateway UI entry ${config.entry}`;
-            throw new SmithersError("INVALID_INPUT", message);
-        }
-        const output = result.outputs.find((entry) => entry.path.endsWith(".js")) ?? result.outputs[0];
-        const body = await output.text();
-        this.uiAssetCache.set(config.entry, body);
-        return body;
-    }
-    /**
    * @param {IncomingMessage} req
    * @param {ServerResponse} res
    */
@@ -1390,6 +1405,21 @@ export class Gateway {
             return false;
         }
         const host = headerValue(req, "host") ?? "127.0.0.1";
+        const url = new URL(`http://${host}${req.url ?? "/"}`);
+        const uiMatch = this.resolveUiMatch(url.pathname);
+        if (!uiMatch) {
+            return false;
+        }
+        const uiAuthFailure = await authorizeGatewayUiRequest({
+            match: uiMatch,
+            authMode: gatewayAuthMode(this.auth),
+            token: bearerTokenFromHeaders(req),
+            authenticate: (token) => this.authenticateRequest(req, token),
+        });
+        if (uiAuthFailure) {
+            sendJson(res, statusForRpcError(uiAuthFailure.code), responseError(randomUUID(), uiAuthFailure.code, uiAuthFailure.message, uiAuthFailure.details));
+            return true;
+        }
         const request = new Request(`http://${host}${req.url ?? "/"}`, {
             method: "GET",
             headers: nodeHeadersToFetchHeaders(req.headers),

package/src/gatewayUi/auth.js

@@ -0,0 +1,16 @@
+/**
+ * @param {{
+ *   match: { config: { kind: string; config: Record<string, unknown> } };
+ *   authMode: string;
+ *   token: string | null;
+ *   authenticate: (token: string | null) => Promise<{ ok: true } | { ok: false; code: string; message: string; details?: Record<string, unknown> }>;
+ * }} options
+ */
+export async function authorizeGatewayUiRequest(options) {
+    const isBuiltinOperator = options.match.config.config.builtin === "operator";
+    if (!isBuiltinOperator || options.authMode === "none") {
+        return null;
+    }
+    const authResult = await options.authenticate(options.token);
+    return authResult.ok === false ? authResult : null;
+}

package/src/gatewayUi/bundle.js

@@ -0,0 +1,36 @@
+import { SmithersError } from "@smithers-orchestrator/errors/SmithersError";
+
+/**
+ * @param {Record<string, unknown>} config
+ * @param {Map<string, string>} cache
+ */
+export async function bundleGatewayUiEntry(config, cache) {
+    const cached = cache.get(String(config.entry));
+    if (cached) {
+        return cached;
+    }
+    if (typeof Bun === "undefined" || typeof Bun.build !== "function") {
+        throw new SmithersError("INVALID_INPUT", "Gateway UI bundling requires Bun.build.");
+    }
+    const result = await Bun.build({
+        entrypoints: [String(config.entry)],
+        root: process.cwd(),
+        target: "browser",
+        format: "esm",
+        sourcemap: "inline",
+        minify: false,
+        jsx: {
+            runtime: "automatic",
+            importSource: "react",
+        },
+    });
+    if (!result.success) {
+        const message = result.logs?.map((entry) => entry.message).filter(Boolean).join("\n")
+            || `Failed to build Gateway UI entry ${config.entry}`;
+        throw new SmithersError("INVALID_INPUT", message);
+    }
+    const output = result.outputs.find((entry) => entry.path.endsWith(".js")) ?? result.outputs[0];
+    const body = await output.text();
+    cache.set(String(config.entry), body);
+    return body;
+}

package/src/gatewayUi/defaultConsole.js

@@ -0,0 +1,5 @@
+import { DEFAULT_OPERATOR_UI_CLIENT_JS } from "./defaultOperatorUi.js";
+
+export function renderDefaultConsoleClient() {
+    return DEFAULT_OPERATOR_UI_CLIENT_JS;
+}

package/src/gatewayUi/defaultOperatorUi.js

@@ -0,0 +1,469 @@
+export const DEFAULT_OPERATOR_UI_ENTRY = "smithers:default-operator-ui";
+
+function defaultOperatorUiClient() {
+const boot = globalThis.__SMITHERS_GATEWAY_UI__ ?? {};
+const root = document.getElementById("root");
+const storageKey = "smithers.gateway.console.token";
+function readStoredToken() {
+  try {
+    return sessionStorage.getItem(storageKey) ?? "";
+  } catch {
+    return "";
+  }
+}
+function writeStoredToken(value) {
+  try {
+    if (value) {
+      sessionStorage.setItem(storageKey, value);
+    } else {
+      sessionStorage.removeItem(storageKey);
+    }
+  } catch {
+    // Some embedded browsers disable Web Storage; the in-memory token remains usable.
+  }
+}
+const state = {
+  token: readStoredToken(),
+  health: null,
+  workflows: [],
+  runs: [],
+  approvals: [],
+  selectedWorkflow: "",
+  runInput: "{}",
+  status: "Loading",
+  error: "",
+  busy: false,
+};
+
+const css = `
+:root {
+  color-scheme: light;
+  --ink: #161616;
+  --muted: #6f6a61;
+  --line: #ded8ce;
+  --surface: #f7f3ec;
+  --panel: #fffaf2;
+  --accent: #235c58;
+  --accent-strong: #17413e;
+  --danger: #9f2e24;
+  --ok: #2f6b3f;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  background: var(--surface);
+  color: var(--ink);
+}
+button, input, textarea, select { font: inherit; }
+button {
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  color: white;
+  min-height: 34px;
+  padding: 0 12px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+button.secondary {
+  background: transparent;
+  color: var(--accent);
+}
+button.danger {
+  background: transparent;
+  color: var(--danger);
+  border-color: var(--danger);
+}
+button:disabled { opacity: 0.55; cursor: not-allowed; }
+.shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr) 360px;
+}
+.nav {
+  border-right: 1px solid var(--line);
+  padding: 22px 18px;
+}
+.brand {
+  font-size: 24px;
+  font-weight: 760;
+  letter-spacing: 0;
+  margin-bottom: 24px;
+}
+.nav-section {
+  display: grid;
+  gap: 10px;
+  margin-top: 24px;
+}
+.label {
+  color: var(--muted);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.token {
+  width: 100%;
+  border: 1px solid var(--line);
+  background: white;
+  border-radius: 6px;
+  min-height: 34px;
+  padding: 0 10px;
+}
+.main {
+  padding: 24px;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 18px;
+}
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+.title {
+  font-size: 22px;
+  font-weight: 720;
+}
+.meta {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.pill {
+  min-height: 28px;
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 0 10px;
+  color: var(--muted);
+  background: rgba(255,255,255,0.5);
+  font-size: 13px;
+}
+.pill.ok { color: var(--ok); border-color: rgba(47,107,63,0.35); }
+.pill.warn { color: var(--danger); border-color: rgba(159,46,36,0.35); }
+.launch {
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  padding: 16px 0;
+  display: grid;
+  grid-template-columns: minmax(180px, 260px) minmax(260px, 1fr) auto;
+  gap: 12px;
+  align-items: end;
+}
+.field {
+  display: grid;
+  gap: 6px;
+}
+.field select, .field textarea {
+  border: 1px solid var(--line);
+  background: white;
+  border-radius: 6px;
+  padding: 9px 10px;
+}
+.field textarea {
+  min-height: 72px;
+  resize: vertical;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+}
+.runs {
+  overflow: auto;
+  display: grid;
+  align-content: start;
+}
+.run-row {
+  display: grid;
+  grid-template-columns: minmax(160px, 1.2fr) 120px 140px 1fr;
+  gap: 12px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--line);
+}
+.run-id {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+}
+.muted { color: var(--muted); }
+.side {
+  border-left: 1px solid var(--line);
+  background: var(--panel);
+  padding: 22px 18px;
+  display: grid;
+  align-content: start;
+  gap: 18px;
+}
+.side h2 {
+  font-size: 15px;
+  margin: 0;
+}
+.approval {
+  border-top: 1px solid var(--line);
+  padding-top: 14px;
+  display: grid;
+  gap: 10px;
+}
+.approval-title {
+  font-weight: 680;
+}
+.approval-actions {
+  display: flex;
+  gap: 8px;
+}
+.empty {
+  color: var(--muted);
+  padding: 18px 0;
+}
+.error {
+  color: var(--danger);
+  min-height: 20px;
+}
+@media (max-width: 960px) {
+  .shell { grid-template-columns: 1fr; }
+  .nav, .side { border: 0; border-bottom: 1px solid var(--line); }
+  .main { padding: 18px; }
+  .launch { grid-template-columns: 1fr; }
+  .run-row { grid-template-columns: 1fr; }
+}
+`;
+
+function installStyles() {
+  const style = document.createElement("style");
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+
+function setToken(value) {
+  state.token = value;
+  writeStoredToken(value);
+}
+
+async function rpc(method, params = {}) {
+  const headers = new Headers({ "content-type": "application/json" });
+  if (state.token) {
+    headers.set("authorization", "Bearer " + state.token);
+  }
+  const response = await fetch((boot.rpcPath ?? "/v1/rpc") + "/" + method, {
+    method: "POST",
+    headers,
+    body: JSON.stringify(params),
+  });
+  const frame = await response.json().catch(() => null);
+  if (!response.ok || !frame?.ok) {
+    throw new Error(frame?.error?.message ?? "Gateway request failed");
+  }
+  return frame.payload;
+}
+
+function statusClass(status) {
+  if (status === "finished") return "ok";
+  if (status === "failed" || status === "cancelled") return "warn";
+  return "";
+}
+
+function formatAge(ms) {
+  if (!ms) return "unknown";
+  const seconds = Math.max(0, Math.floor((Date.now() - ms) / 1000));
+  if (seconds < 60) return seconds + "s ago";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return minutes + "m ago";
+  return Math.floor(minutes / 60) + "h ago";
+}
+
+function escapeText(value) {
+  return String(value ?? "").replace(/[&<>"']/g, (char) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+  })[char]);
+}
+
+function renderRuns() {
+  if (state.runs.length === 0) {
+    return '<div class="empty">No runs found.</div>';
+  }
+  return state.runs.map((run) => `
+    <div class="run-row">
+      <div>
+        <div class="run-id">${escapeText(run.runId)}</div>
+        <div class="muted">${escapeText(run.workflowKey ?? run.workflowName ?? "workflow")}</div>
+      </div>
+      <div><span class="pill ${statusClass(run.status)}">${escapeText(run.status)}</span></div>
+      <div class="muted">${escapeText(formatAge(run.createdAtMs))}</div>
+      <div class="muted">${escapeText(run.triggeredBy ?? run.auth?.triggeredBy ?? "")}</div>
+    </div>
+  `).join("");
+}
+
+function renderApprovals() {
+  if (state.approvals.length === 0) {
+    return '<div class="empty">No pending approvals.</div>';
+  }
+  return state.approvals.map((approval, index) => `
+    <section class="approval">
+      <div>
+        <div class="approval-title">${escapeText(approval.requestTitle ?? approval.nodeId)}</div>
+        <div class="muted">${escapeText(approval.workflowKey)} / ${escapeText(approval.runId)}</div>
+      </div>
+      <div class="approval-actions">
+        <button data-approve="${index}">Approve</button>
+        <button class="danger" data-deny="${index}">Deny</button>
+      </div>
+    </section>
+  `).join("");
+}
+
+function renderWorkflows() {
+  const options = state.workflows.map((workflow) => {
+    const selected = workflow.key === state.selectedWorkflow ? " selected" : "";
+    return `<option value="${escapeText(workflow.key)}"${selected}>${escapeText(workflow.readableName ?? workflow.key)}</option>`;
+  }).join("");
+  return `<select id="workflow">${options || '<option value="">No workflows</option>'}</select>`;
+}
+
+function render() {
+  const activeRuns = state.runs.filter((run) => ["running", "waiting-approval", "waiting-event", "waiting-timer"].includes(run.status)).length;
+  root.innerHTML = `
+    <div class="shell">
+      <aside class="nav">
+        <div class="brand">Smithers Console</div>
+        <div class="nav-section">
+          <div class="label">Gateway</div>
+          <span class="pill ${state.health ? "ok" : "warn"}">${state.health ? "online" : "checking"}</span>
+          <span class="pill">${escapeText(state.health?.features?.join(", ") ?? "features pending")}</span>
+        </div>
+        <div class="nav-section">
+          <label class="label" for="token">Bearer token</label>
+          <input class="token" id="token" value="${escapeText(state.token)}" type="password" autocomplete="off">
+        </div>
+      </aside>
+      <main class="main">
+        <div class="topbar">
+          <div>
+            <div class="title">Operations</div>
+            <div class="muted">${escapeText(state.status)}</div>
+          </div>
+          <div class="meta">
+            <span class="pill">${state.workflows.length} workflows</span>
+            <span class="pill">${activeRuns} active</span>
+            <span class="pill">${state.approvals.length} approvals</span>
+            <button class="secondary" id="refresh">Refresh</button>
+          </div>
+        </div>
+        <form class="launch" id="launch">
+          <label class="field">
+            <span class="label">Workflow</span>
+            ${renderWorkflows()}
+          </label>
+          <label class="field">
+            <span class="label">Input JSON</span>
+            <textarea id="run-input" spellcheck="false">${escapeText(state.runInput)}</textarea>
+          </label>
+          <button type="submit" ${state.busy ? "disabled" : ""}>Launch</button>
+        </form>
+        <section class="runs">${renderRuns()}</section>
+      </main>
+      <aside class="side">
+        <div>
+          <h2>Pending Approvals</h2>
+          <div class="error">${escapeText(state.error)}</div>
+        </div>
+        ${renderApprovals()}
+      </aside>
+    </div>
+  `;
+  bind();
+}
+
+function bind() {
+  document.getElementById("token")?.addEventListener("input", (event) => {
+    setToken(event.target.value);
+  });
+  document.getElementById("workflow")?.addEventListener("change", (event) => {
+    state.selectedWorkflow = event.target.value;
+  });
+  document.getElementById("run-input")?.addEventListener("input", (event) => {
+    state.runInput = event.target.value;
+  });
+  document.getElementById("refresh")?.addEventListener("click", () => refresh());
+  document.getElementById("launch")?.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    await launchRun();
+  });
+  for (const button of document.querySelectorAll("[data-approve]")) {
+    button.addEventListener("click", () => decideApproval(Number(button.dataset.approve), true));
+  }
+  for (const button of document.querySelectorAll("[data-deny]")) {
+    button.addEventListener("click", () => decideApproval(Number(button.dataset.deny), false));
+  }
+}
+
+async function refresh() {
+  state.error = "";
+  try {
+    const [health, workflows, runs, approvals] = await Promise.all([
+      rpc("health"),
+      rpc("listWorkflows", { limit: 100 }),
+      rpc("listRuns", { limit: 100 }),
+      rpc("listApprovals", { limit: 50 }),
+    ]);
+    state.health = health;
+    state.workflows = workflows;
+    state.runs = runs;
+    state.approvals = approvals;
+    if (!state.selectedWorkflow && workflows[0]) {
+      state.selectedWorkflow = workflows[0].key;
+    }
+    state.status = "Updated " + new Date().toLocaleTimeString();
+  } catch (error) {
+    state.error = error instanceof Error ? error.message : String(error);
+    state.status = "Refresh failed";
+  }
+  render();
+}
+
+async function launchRun() {
+  state.busy = true;
+  state.error = "";
+  render();
+  try {
+    const input = JSON.parse(state.runInput || "{}");
+    await rpc("launchRun", { workflow: state.selectedWorkflow, input });
+    state.status = "Run launched";
+    await refresh();
+  } catch (error) {
+    state.error = error instanceof Error ? error.message : String(error);
+    state.busy = false;
+    render();
+  }
+  state.busy = false;
+}
+
+async function decideApproval(index, approved) {
+  const approval = state.approvals[index];
+  if (!approval) return;
+  state.error = "";
+  try {
+    await rpc("submitApproval", {
+      runId: approval.runId,
+      nodeId: approval.nodeId,
+      iteration: approval.iteration ?? 0,
+      approved,
+      decision: { approved },
+    });
+    await refresh();
+  } catch (error) {
+    state.error = error instanceof Error ? error.message : String(error);
+    render();
+  }
+}
+
+installStyles();
+render();
+refresh();
+setInterval(refresh, 5000);
+}
+
+export const DEFAULT_OPERATOR_UI_CLIENT_JS = `(${defaultOperatorUiClient.toString()})();\n`;

package/src/index.d.ts

@@ -119,10 +119,27 @@ type GatewayDefaults$1 = {
     cliAgentTools?: "all" | "explicit-only";
 };
 
-type GatewayUiConfig$1 = {
+type GatewayOperatorUiConfig$1 = {
+    /**
+     * URL path for the built-in operator console.
+     * @default "/console"
+     */
+    path?: string;
+    /**
+     * Document title for the generated HTML shell.
+     */
+    title?: string;
+    /**
+     * JSON-serializable boot data exposed to the browser.
+     */
+    props?: Record<string, unknown>;
+};
+
+type GatewayUiConfig$1 = true | {
     /**
      * Browser entry module for the React app. Smithers bundles this with Bun and
-     * serves it from the Gateway origin.
+     * serves it from the Gateway origin. Pass `true` to mount the built-in
+     * operator console.
      */
     entry: string;
     /**
@@ -146,6 +163,11 @@ type GatewayOptions$1 = {
     heartbeatMs?: number;
     auth?: GatewayAuthConfig$1;
     ui?: GatewayUiConfig$1;
+    /**
+     * Built-in browser console for operators. Set to false to disable it.
+     * @default { path: "/console" }
+     */
+    operatorUi?: GatewayOperatorUiConfig$1 | false;
     defaults?: GatewayDefaults$1;
     maxBodyBytes?: number;
     maxPayload?: number;
@@ -267,6 +289,7 @@ declare class Gateway {
     requestTimeout: number;
     auth: GatewayAuthConfig$1 | undefined;
     ui: ResolvedGatewayUiConfig | null;
+    operatorUi: ResolvedGatewayUiConfig | null;
     uiApp: hono.Hono<hono_types.BlankEnv, hono_types.BlankSchema, "/">;
     defaults: GatewayDefaults$1 | undefined;
     workflows: Map<any, any>;
@@ -309,7 +332,7 @@ declare class Gateway {
    */
     uiBootConfig(mount: GatewayUiMount): {
         apiVersion: "v1";
-        kind: "workflow" | "gateway";
+        kind: "workflow" | "gateway" | "operator";
         workflowKey: string | null;
         mountPath: string;
         rpcPath: string;
@@ -334,11 +357,6 @@ declare class Gateway {
         contentType: string;
     } | null>;
     /**
-   * @param {ResolvedGatewayUiConfig} config
-   * @returns {Promise<string>}
-   */
-    bundleUiEntry(config: ResolvedGatewayUiConfig): Promise<string>;
-    /**
    * @param {IncomingMessage} req
    * @param {ServerResponse} res
    */
@@ -727,6 +745,7 @@ type GatewayWebhookRunConfig = GatewayWebhookRunConfig$1;
 type GatewayWebhookSignalConfig = GatewayWebhookSignalConfig$1;
 type ConnectRequest = ConnectRequest$1;
 type GatewayAuthConfig = GatewayAuthConfig$1;
+type GatewayOperatorUiConfig = GatewayOperatorUiConfig$1;
 type GatewayOptions = GatewayOptions$1;
 type GatewayWebhookConfig = GatewayWebhookConfig$1;
 type IncomingMessage = node_http.IncomingMessage;
@@ -783,9 +802,10 @@ type ResolvedGatewayUiConfig = {
     path: string;
     title?: string;
     props?: Record<string, unknown>;
+    builtin?: "operator";
 };
 type GatewayUiMount = {
-    kind: "gateway" | "workflow";
+    kind: "gateway" | "workflow" | "operator";
     workflowKey: string | null;
     config: ResolvedGatewayUiConfig;
 };
@@ -1175,4 +1195,4 @@ type RunRow = _smithers_orchestrator_db_adapter_RunRow.RunRow;
 type ServerResponse = node_http.ServerResponse;
 type ServerOptions = ServerOptions$1;
 
-export { type AttemptRow, type ConnectRequest, type ConnectionState, DEVTOOLS_BACKPRESSURE_LIMIT, DEVTOOLS_EMPTY_ROOT_ID, DEVTOOLS_MAX_FRAME_NO, DEVTOOLS_POLL_INTERVAL_MS, DEVTOOLS_REBASELINE_INTERVAL, DEVTOOLS_RUN_ID_PATTERN, DEVTOOLS_TREE_MAX_DEPTH, type DevToolsEvent, type DevToolsNode, type DevToolsNodeType, DevToolsRouteError, type DiffSummary, type EventFrame, GATEWAY_FRAME_ID_MAX_LENGTH, GATEWAY_METHOD_NAME_MAX_LENGTH, GATEWAY_RPC_INPUT_MAX_BYTES, GATEWAY_RPC_INPUT_MAX_DEPTH, GATEWAY_RPC_MAX_ARRAY_LENGTH, GATEWAY_RPC_MAX_DEPTH, GATEWAY_RPC_MAX_PAYLOAD_BYTES, GATEWAY_RPC_MAX_STRING_LENGTH, Gateway, type GatewayAuthConfig, type GatewayDefaults, type GatewayMetricLabels, type GatewayOptions, type GatewayRegisterOptions, type GatewayRequestContext, type GatewayTokenGrant, type GatewayTransport, type GatewayUiConfig, type GatewayUiMount, type GatewayWebhookConfig, type GatewayWebhookRunConfig, type GatewayWebhookSignalConfig, type GetNodeDiffRouteResult, type HelloResponse, ITERATION_MAX, type IncomingMessage, type JumpResult, NODE_ID_PATTERN, NODE_OUTPUT_MAX_BYTES, NODE_OUTPUT_WARN_BYTES, type NodeOutputErrorCode, type NodeOutputResponse, NodeOutputRouteError, RUN_ID_PATTERN, type RegisteredWorkflow, type RequestFrame, type ResolvedGatewayUiConfig, type ResolvedRun, type ResponseFrame, type RunRow, type RunStartAuthContext, type ServeOptions, type ServerOptions, type ServerResponse, type SmithersWorkflow, assertGatewayInputDepthWithinBounds, createServeApp, emptyDevToolsRoot, getDevToolsSnapshotRoute, getGatewayInputDepth, getNodeDiffRoute, getNodeOutputRoute, jumpToFrameRoute, parseGatewayRequestFrame, parseXmlToDevToolsRoot, runFork, runPromise, runSync, snapshotFromFrameRow, startServer, startServerEffect, statusForRpcError, streamDevToolsRoute, summarizeBundle, validateFrameNoInput, validateFromSeqInput, validateGatewayMethodName, validateRequestedFrameNo, validateRunId };
+export { type AttemptRow, type ConnectRequest, type ConnectionState, DEVTOOLS_BACKPRESSURE_LIMIT, DEVTOOLS_EMPTY_ROOT_ID, DEVTOOLS_MAX_FRAME_NO, DEVTOOLS_POLL_INTERVAL_MS, DEVTOOLS_REBASELINE_INTERVAL, DEVTOOLS_RUN_ID_PATTERN, DEVTOOLS_TREE_MAX_DEPTH, type DevToolsEvent, type DevToolsNode, type DevToolsNodeType, DevToolsRouteError, type DiffSummary, type EventFrame, GATEWAY_FRAME_ID_MAX_LENGTH, GATEWAY_METHOD_NAME_MAX_LENGTH, GATEWAY_RPC_INPUT_MAX_BYTES, GATEWAY_RPC_INPUT_MAX_DEPTH, GATEWAY_RPC_MAX_ARRAY_LENGTH, GATEWAY_RPC_MAX_DEPTH, GATEWAY_RPC_MAX_PAYLOAD_BYTES, GATEWAY_RPC_MAX_STRING_LENGTH, Gateway, type GatewayAuthConfig, type GatewayDefaults, type GatewayMetricLabels, type GatewayOperatorUiConfig, type GatewayOptions, type GatewayRegisterOptions, type GatewayRequestContext, type GatewayTokenGrant, type GatewayTransport, type GatewayUiConfig, type GatewayUiMount, type GatewayWebhookConfig, type GatewayWebhookRunConfig, type GatewayWebhookSignalConfig, type GetNodeDiffRouteResult, type HelloResponse, ITERATION_MAX, type IncomingMessage, type JumpResult, NODE_ID_PATTERN, NODE_OUTPUT_MAX_BYTES, NODE_OUTPUT_WARN_BYTES, type NodeOutputErrorCode, type NodeOutputResponse, NodeOutputRouteError, RUN_ID_PATTERN, type RegisteredWorkflow, type RequestFrame, type ResolvedGatewayUiConfig, type ResolvedRun, type ResponseFrame, type RunRow, type RunStartAuthContext, type ServeOptions, type ServerOptions, type ServerResponse, type SmithersWorkflow, assertGatewayInputDepthWithinBounds, createServeApp, emptyDevToolsRoot, getDevToolsSnapshotRoute, getGatewayInputDepth, getNodeDiffRoute, getNodeOutputRoute, jumpToFrameRoute, parseGatewayRequestFrame, parseXmlToDevToolsRoot, runFork, runPromise, runSync, snapshotFromFrameRow, startServer, startServerEffect, statusForRpcError, streamDevToolsRoute, summarizeBundle, validateFrameNoInput, validateFromSeqInput, validateGatewayMethodName, validateRequestedFrameNo, validateRunId };