@workflow/web 5.0.0-beta.5 → 5.0.0-beta.50

package/build/server/index.js

@@ -1,6 +1,53 @@
-import { n } from "./assets/app-L1V62FgT.js";
+import { createRequire as __wkfCreateRequire } from "node:module";
+if (typeof require === "undefined") {
+  globalThis.require = __wkfCreateRequire(import.meta.url);
+}
+import { bu, bv } from "./assets/app-CBtZR8rR.js";
 import "express";
+import "node:stream";
 import "stream";
+import "util";
+import "crypto";
+import "async_hooks";
+import "node:crypto";
+import "node:process";
+import "node:path";
+import "node:url";
+import "module";
+import "node:fs/promises";
+import "node:module";
+import "node:util";
+import "node:async_hooks";
+import "node:fs";
+import "node:os";
+import "node:child_process";
+import "node:timers/promises";
+import "node:buffer";
+import "node:http";
+import "node:https";
+import "node:zlib";
+import "events";
+import "node:assert";
+import "node:net";
+import "node:querystring";
+import "node:events";
+import "node:diagnostics_channel";
+import "node:tls";
+import "node:perf_hooks";
+import "node:util/types";
+import "node:sqlite";
+import "node:worker_threads";
+import "node:console";
+import "node:timers";
+import "node:dns";
+import "path";
+import "fs";
+import "constants";
+import "assert";
+import "os";
+import "net";
+import "node:assert/strict";
 export {
-  n as app
+  bu as app,
+  bv as createFetchHandler
 };

package/handler.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Options for {@link createWorkflowWebHandler}.
+ */
+export interface CreateWorkflowWebHandlerOptions {
+  /**
+   * Mount path the dashboard is served under (e.g. `"/_workflow"`). Routing and
+   * asset URLs are reprefixed to this base. Defaults to `"/"` (root).
+   */
+  basename?: string;
+}
+
+/**
+ * Create a framework-agnostic Web `Request` -> `Response` handler that serves
+ * the Workflow observability UI (static client assets + React Router SSR)
+ * in-process, suitable for mounting inside another server under `basename`.
+ *
+ * Requires `@workflow/web` to have been built (`build/` must exist); throws
+ * otherwise.
+ */
+export function createWorkflowWebHandler(
+  options?: CreateWorkflowWebHandlerOptions
+): Promise<(request: Request) => Promise<Response>>;

package/handler.js

@@ -0,0 +1,186 @@
+/**
+ * Framework-agnostic, in-process entry point for @workflow/web.
+ *
+ * Unlike `server.js` (which starts a standalone Express HTTP server), this
+ * exports a single Web-standard fetch handler that another server can mount
+ * under an arbitrary base path — e.g. `@workflow/nitro` mounting the dashboard
+ * at `/_workflow` without spawning a second server/port.
+ *
+ *   import { createWorkflowWebHandler } from "@workflow/web/handler";
+ *   const handler = await createWorkflowWebHandler({ basename: "/_workflow" });
+ *   const response = await handler(request); // (request: Request) => Response
+ *
+ * The handler serves both the prebuilt static client assets (from `build/client`)
+ * and the React Router SSR app. It reads the prebuilt `build/` as-is in every
+ * mode (it never runs Vite), so consumers must have built @workflow/web first
+ * (the published package ships `build/`).
+ */
+
+import { existsSync } from 'node:fs';
+import { readFile, stat } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { recordDashboard } from './registry.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const buildDir = path.resolve(__dirname, 'build');
+const clientDir = path.join(buildDir, 'client');
+const serverEntry = path.join(buildDir, 'server', 'index.js');
+
+// Minimal extension -> MIME map for serving the static client build. A wrong
+// Content-Type on the entry module breaks the whole app, so be explicit.
+const MIME_TYPES = {
+  '.js': 'text/javascript',
+  '.mjs': 'text/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.map': 'application/json',
+  '.html': 'text/html',
+  '.ico': 'image/x-icon',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.webp': 'image/webp',
+  '.avif': 'image/avif',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.otf': 'font/otf',
+  '.txt': 'text/plain',
+  '.wasm': 'application/wasm',
+};
+
+/** Normalize a mount path: `/` or empty -> "" (root); otherwise strip trailing slash. */
+function normalizeBasename(basename) {
+  if (!basename || basename === '/') return '';
+  return basename.endsWith('/') ? basename.slice(0, -1) : basename;
+}
+
+// One handler per basename, lazily constructed and memoized so repeated
+// requests reuse the same React Router handler and module import.
+const handlerCache = new Map();
+
+/**
+ * @param {{ basename?: string }} [options]
+ * @returns {Promise<(request: Request) => Promise<Response>>}
+ */
+export async function createWorkflowWebHandler(options = {}) {
+  const basename = normalizeBasename(options.basename ?? '/');
+  let promise = handlerCache.get(basename);
+  if (!promise) {
+    promise = buildHandler(basename).catch((err) => {
+      handlerCache.delete(basename);
+      throw err;
+    });
+    handlerCache.set(basename, promise);
+  }
+  return promise;
+}
+
+async function buildHandler(basename) {
+  if (!existsSync(serverEntry) || !existsSync(clientDir)) {
+    throw new Error(
+      '@workflow/web has not been built (missing build/). ' +
+        'Run `pnpm --filter @workflow/web build` before embedding the dashboard.'
+    );
+  }
+
+  const mod = await import(pathToFileURL(serverEntry).href);
+  if (typeof mod.createFetchHandler !== 'function') {
+    throw new Error(
+      '@workflow/web build does not export createFetchHandler; rebuild the package.'
+    );
+  }
+  const ssr = mod.createFetchHandler(basename || '/');
+
+  return async (request) => {
+    // Advertise this dashboard so the CLI can defer to it (best-effort, once).
+    // Done on first request because that's when the public origin is known.
+    try {
+      const origin = new URL(request.url).origin;
+      recordDashboard({
+        url: origin + basename,
+        basename,
+        world:
+          process.env.WORKFLOW_TARGET_WORLD ||
+          (process.env.VERCEL_DEPLOYMENT_ID ? 'vercel' : 'local'),
+      });
+    } catch {
+      // ignore — registration must never affect request handling
+    }
+
+    const staticResponse = await tryServeStatic(request, basename);
+    if (staticResponse) return staticResponse;
+    return ssr(request);
+  };
+}
+
+/**
+ * Resolve a request to a path-within-the-client-build (relative to `clientDir`),
+ * stripping `basename` and guarding against traversal. Returns null when the
+ * request can't map to a client file (so it should fall through to the SSR
+ * handler) — e.g. the index, a directory, or an out-of-tree path.
+ */
+function resolveClientFile(request, basename) {
+  if (request.method !== 'GET' && request.method !== 'HEAD') return null;
+
+  let pathname;
+  try {
+    pathname = decodeURIComponent(new URL(request.url).pathname);
+  } catch {
+    return null;
+  }
+
+  if (basename) {
+    if (!pathname.startsWith(`${basename}/`)) return null; // index/other -> SSR
+    pathname = pathname.slice(basename.length);
+  }
+
+  const relative = pathname.replace(/^\/+/, '');
+  if (!relative || relative.endsWith('/')) return null;
+
+  const filePath = path.join(clientDir, relative);
+  // Guard against path traversal escaping the client build directory.
+  if (filePath !== clientDir && !filePath.startsWith(clientDir + path.sep)) {
+    return null;
+  }
+  return { filePath, relative };
+}
+
+/**
+ * Serve a file from the prebuilt client bundle if the request maps to one;
+ * otherwise return null so the request falls through to the SSR handler.
+ */
+async function tryServeStatic(request, basename) {
+  const resolved = resolveClientFile(request, basename);
+  if (!resolved) return null;
+  const { filePath, relative } = resolved;
+
+  let stats;
+  try {
+    stats = await stat(filePath);
+  } catch {
+    return null;
+  }
+  if (!stats.isFile()) return null;
+
+  const ext = path.extname(filePath).toLowerCase();
+  const headers = new Headers({
+    'Content-Type': MIME_TYPES[ext] ?? 'application/octet-stream',
+    // Hashed assets are content-addressed and safe to cache forever; other
+    // client files (e.g. favicon) get a short cache.
+    'Cache-Control': relative.startsWith('assets/')
+      ? 'public, max-age=31536000, immutable'
+      : 'public, max-age=3600',
+  });
+
+  if (request.method === 'HEAD') {
+    headers.set('Content-Length', String(stats.size));
+    return new Response(null, { status: 200, headers });
+  }
+
+  const body = await readFile(filePath);
+  return new Response(body, { status: 200, headers });
+}

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@workflow/web",
   "description": "Workflow Observability UI",
-  "version": "5.0.0-beta.5",
+  "version": "5.0.0-beta.50",
   "type": "module",
   "private": false,
   "files": [
     "build",
     "server.js",
     "server.d.ts",
+    "handler.js",
+    "handler.d.ts",
+    "registry.js",
+    "registry.d.ts",
     "package.json"
   ],
   "exports": {
@@ -15,6 +19,14 @@
       "types": "./server.d.ts",
       "default": "./server.js"
     },
+    "./handler": {
+      "types": "./handler.d.ts",
+      "default": "./handler.js"
+    },
+    "./registry": {
+      "types": "./registry.d.ts",
+      "default": "./registry.js"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -27,10 +39,11 @@
     "directory": "packages/web"
   },
   "dependencies": {
-    "express": "^4.21.0"
+    "@workflow/world-local": "5.0.0-beta.43",
+    "express": "^5.2.1",
+    "swr": "^2.3.6"
   },
   "devDependencies": {
-    "@testing-library/react": "^16.3.0",
     "@biomejs/biome": "^2.4.4",
     "@radix-ui/react-alert-dialog": "1.1.5",
     "@radix-ui/react-checkbox": "1.1.4",
@@ -45,12 +58,19 @@
     "@react-router/dev": "7.13.1",
     "@react-router/express": "7.13.1",
     "@react-router/node": "7.13.1",
-    "@vercel/react-router": "1.2.6",
     "@tailwindcss/vite": "4",
+    "@testing-library/react": "^16.3.0",
     "@types/express": "^5",
     "@types/node": "22.19.0",
     "@types/react": "19",
     "@types/react-dom": "19",
+    "@vercel/react-router": "1.2.6",
+    "@workflow/core": "5.0.0-beta.50",
+    "@workflow/errors": "5.0.0-beta.21",
+    "@workflow/utils": "5.0.0-beta.10",
+    "@workflow/web-shared": "5.0.0-beta.50",
+    "@workflow/world": "5.0.0-beta.34",
+    "@workflow/world-vercel": "5.0.0-beta.45",
     "@xyflow/react": "12.10.1",
     "cbor-x": "^1",
     "class-variance-authority": "0.7.1",
@@ -59,6 +79,7 @@
     "date-fns": "4.1.0",
     "geist": "^1.7.0",
     "isbot": "^5",
+    "jsdom": "^26",
     "lucide-react": "0.575.0",
     "next-themes": "0.4.6",
     "react": "19.1.0",
@@ -68,16 +89,9 @@
     "sonner": "2.0.7",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
     "vite": "^6",
-    "vitest": "^3",
-    "jsdom": "^26",
-    "@workflow/core": "5.0.0-beta.5",
-    "@workflow/errors": "5.0.0-beta.2",
-    "@workflow/utils": "5.0.0-beta.2",
-    "@workflow/web-shared": "5.0.0-beta.5",
-    "@workflow/world": "5.0.0-beta.2",
-    "@workflow/world-vercel": "5.0.0-beta.4"
+    "vitest": "^3.2.7"
   },
   "scripts": {
     "dev": "react-router dev",

package/registry.d.ts

@@ -0,0 +1,29 @@
+/** A recorded embedded-dashboard instance. */
+export interface DashboardRegistryEntry {
+  /** Public base URL the dashboard is reachable at (e.g. `http://localhost:3000/_workflow`). */
+  url: string;
+  /** Mount path the dashboard is served under (e.g. `/_workflow`; `""` at root). */
+  basename: string;
+  /** World backend identifier, for display (e.g. `local`, `@workflow/world-postgres`). */
+  world: string;
+  /** PID of the process hosting the dashboard. */
+  pid: number;
+  /** ISO timestamp the entry was recorded. */
+  startedAt: string;
+}
+
+/** Absolute path of the registry file for the current working directory. */
+export function dashboardRegistryPath(): string;
+
+/** Read the registry entries (always returns an array; never throws). */
+export function readDashboardRegistry(): DashboardRegistryEntry[];
+
+/**
+ * Record this process's embedded dashboard (idempotent per process). Entirely
+ * best-effort — never throws.
+ */
+export function recordDashboard(entry: {
+  url: string;
+  basename?: string;
+  world?: string;
+}): void;

package/registry.js

@@ -0,0 +1,89 @@
+/**
+ * Best-effort registry of live, embedded observability dashboards.
+ *
+ * When the dashboard is embedded in another server (e.g. `@workflow/nitro` at
+ * `/_workflow`), the running process records its public URL here. The CLI
+ * (`workflow web` / `inspect … --web`) reads this so it can point the user at
+ * an already-running dashboard instead of spawning a redundant standalone
+ * server on a fixed port.
+ *
+ * This is a coordination hint, never a source of truth: entries may be stale
+ * (a SIGKILL'd dev server can't clean up), so consumers MUST health-check a URL
+ * before trusting it. A missing or corrupt registry is treated as "none".
+ *
+ * The file is keyed by the current working directory so multiple projects don't
+ * collide, while multiple dev servers for the same project share one file
+ * (keyed by pid within it).
+ */
+
+import { createHash } from 'node:crypto';
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+/** Absolute path of the registry file for the current working directory. */
+export function dashboardRegistryPath() {
+  const key = createHash('sha256')
+    .update(process.cwd())
+    .digest('hex')
+    .slice(0, 16);
+  return path.join(os.tmpdir(), 'workflow-observability', `${key}.json`);
+}
+
+/** Read the registry entries (always returns an array; never throws). */
+export function readDashboardRegistry() {
+  try {
+    const parsed = JSON.parse(readFileSync(dashboardRegistryPath(), 'utf8'));
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeEntries(entries) {
+  const file = dashboardRegistryPath();
+  mkdirSync(path.dirname(file), { recursive: true });
+  writeFileSync(file, JSON.stringify(entries));
+}
+
+let recorded = false;
+
+/**
+ * Record this process's embedded dashboard in the registry (idempotent per
+ * process). Call once the public origin is known (e.g. from the first request).
+ * Entirely best-effort — never throws.
+ *
+ * @param {{ url: string, basename?: string, world?: string }} entry
+ */
+export function recordDashboard(entry) {
+  if (recorded) return;
+  recorded = true;
+  try {
+    const others = readDashboardRegistry().filter(
+      (e) => e && e.pid !== process.pid
+    );
+    others.push({
+      url: entry.url,
+      basename: entry.basename ?? '',
+      world: entry.world ?? '',
+      pid: process.pid,
+      startedAt: new Date().toISOString(),
+    });
+    writeEntries(others);
+    // Best-effort cleanup on normal exit. Signal-terminated processes (Ctrl+C,
+    // SIGKILL) won't run this — consumers prune via health checks instead. We
+    // intentionally don't hook SIGINT/SIGTERM so we don't interfere with the
+    // host framework's own shutdown handling.
+    process.once('exit', () => {
+      try {
+        writeEntries(
+          readDashboardRegistry().filter((e) => e && e.pid !== process.pid)
+        );
+      } catch {
+        // ignore
+      }
+    });
+  } catch {
+    // best-effort: a failed write must never break request handling
+  }
+}

package/build/client/assets/encryption-CEh0YXii.js

@@ -1,28 +0,0 @@
-import { W as WorkflowRuntimeError } from "./index-B4xuge0I.js";
-import "./index-BsV8i_Jn.js";
-const NONCE_LENGTH = 12;
-const TAG_LENGTH = 128;
-const KEY_LENGTH = 32;
-async function importKey(raw) {
-  if (raw.byteLength !== KEY_LENGTH) {
-    throw new WorkflowRuntimeError(`Encryption key must be exactly ${KEY_LENGTH} bytes, got ${raw.byteLength}`);
-  }
-  return globalThis.crypto.subtle.importKey("raw", raw, "AES-GCM", false, [
-    "encrypt",
-    "decrypt"
-  ]);
-}
-async function decrypt(key, data) {
-  const minLength = NONCE_LENGTH + TAG_LENGTH / 8;
-  if (data.byteLength < minLength) {
-    throw new WorkflowRuntimeError(`Encrypted data too short: expected at least ${minLength} bytes, got ${data.byteLength}`);
-  }
-  const nonce = data.subarray(0, NONCE_LENGTH);
-  const ciphertext = data.subarray(NONCE_LENGTH);
-  const plaintext = await globalThis.crypto.subtle.decrypt({ name: "AES-GCM", iv: nonce, tagLength: TAG_LENGTH }, key, ciphertext);
-  return new Uint8Array(plaintext);
-}
-export {
-  decrypt,
-  importKey
-};