@nwire/studio 0.10.0 → 0.11.0

package/vite.config.ts

@@ -3,7 +3,15 @@ import { resolve, dirname, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 import vue from "@vitejs/plugin-vue";
 import tailwindcss from "@tailwindcss/vite";
-import { readFileSync, existsSync, readdirSync } from "node:fs";
+import {
+  closeSync,
+  existsSync,
+  openSync,
+  readdirSync,
+  readFileSync,
+  readSync,
+  statSync,
+} from "node:fs";
 import { spawnSync } from "node:child_process";
 import { RunnerSupervisor, inspectHealthCheck } from "@nwire/supervisor";
 import type { IncomingMessage, ServerResponse } from "node:http";
@@ -46,6 +54,141 @@ function isPidAlive(pid: number): boolean {
   }
 }
 
+interface ExternalProcessRecord {
+  id: string;
+  topology: string;
+  port?: number;
+  startedAt: string;
+  cwd: string;
+  pid: number;
+  status: "starting" | "running" | "stopping" | "exited" | "crashed";
+  logPath: string;
+}
+
+/**
+ * Read `.nwire/processes/*.json` for the given cwd and project each
+ * `ProcessRecord` (written by `nwire dev`) into the shape Studio's Run
+ * endpoint returns. Dead pids are filtered. Used to surface processes
+ * the user started in another terminal alongside Studio-spawned ones.
+ */
+interface ExternalLogLine {
+  seq: number;
+  ts: string;
+  stream: "stdout";
+  line: string;
+}
+
+/**
+ * Read the last N lines of a process log file. Each line becomes one
+ * `ExternalLogLine` so the SSE consumer sees the same shape Studio's
+ * supervisor emits for in-process children.
+ */
+function tailLogFile(path: string, n: number): ExternalLogLine[] {
+  if (!path || !existsSync(path)) return [];
+  try {
+    const text = readFileSync(path, "utf8");
+    const lines = text.split(/\r?\n/).filter(Boolean);
+    const tail = lines.slice(-n);
+    const out: ExternalLogLine[] = [];
+    const now = new Date().toISOString();
+    for (let i = 0; i < tail.length; i++) {
+      out.push({ seq: i, ts: now, stream: "stdout", line: tail[i]! });
+    }
+    return out;
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Poll a log file for new content and call `onLine` with each newly
+ * appended line. Returns a stop handle to clean up. Used to live-tail
+ * external `nwire dev` processes — we don't own their stdout so we
+ * watch the disk file they tee into.
+ */
+function openLogTail(path: string, onLine: (line: ExternalLogLine) => void): { stop: () => void } {
+  if (!path || !existsSync(path)) return { stop: () => {} };
+  let offset = 0;
+  try {
+    offset = statSync(path).size;
+  } catch {
+    offset = 0;
+  }
+  let seq = 0;
+  let stopped = false;
+  const poll = setInterval(() => {
+    if (stopped) return;
+    try {
+      const size = statSync(path).size;
+      if (size <= offset) return;
+      const fd = openSync(path, "r");
+      try {
+        const buf = Buffer.alloc(size - offset);
+        readSync(fd, buf, 0, buf.length, offset);
+        offset = size;
+        const text = buf.toString("utf8");
+        for (const raw of text.split(/\r?\n/)) {
+          if (!raw) continue;
+          onLine({ seq: seq++, ts: new Date().toISOString(), stream: "stdout", line: raw });
+        }
+      } finally {
+        closeSync(fd);
+      }
+    } catch {
+      // file rotated or removed — surrender quietly
+    }
+  }, 500);
+  return {
+    stop: () => {
+      stopped = true;
+      clearInterval(poll);
+    },
+  };
+}
+
+function readExternalProcesses(cwd: string): ExternalProcessRecord[] {
+  const dir = resolve(cwd, ".nwire", "processes");
+  if (!existsSync(dir)) return [];
+  const out: ExternalProcessRecord[] = [];
+  let entries: string[];
+  try {
+    entries = readdirSync(dir);
+  } catch {
+    return [];
+  }
+  for (const f of entries) {
+    if (!f.endsWith(".json")) continue;
+    try {
+      const rec = JSON.parse(readFileSync(resolve(dir, f), "utf8")) as {
+        id?: string;
+        name?: string;
+        pid?: number;
+        port?: number;
+        status?: string;
+        startedAt?: string;
+        cwd?: string;
+        logPath?: string;
+      };
+      if (typeof rec.pid !== "number" || rec.pid <= 0) continue;
+      if (!isPidAlive(rec.pid)) continue;
+      out.push({
+        id: rec.id ?? f.replace(/\.json$/, ""),
+        topology: rec.name ?? "external",
+        port: typeof rec.port === "number" ? rec.port : undefined,
+        startedAt: rec.startedAt ?? new Date(0).toISOString(),
+        cwd: rec.cwd ?? cwd,
+        pid: rec.pid,
+        status:
+          (rec.status as ExternalProcessRecord["status"]) === "running" ? "running" : "running",
+        logPath: rec.logPath ?? "",
+      });
+    } catch {
+      // malformed entry — skip
+    }
+  }
+  return out;
+}
+
 /**
  * Set of CWDs the frontend has registered as "known projects." Populated by
  * POST /__nwire/projects/register (called on Studio mount with every cwd
@@ -68,24 +211,35 @@ function targetCwd(req: IncomingMessage): string | null {
 }
 
 /**
- * Build the `.nwire/` cache on demand by running the CLI's cache-runner in
- * the consumer's project. Returns true if the manifest is present after the
- * attempt. Synchronous so the Vite middleware can serve the freshly built
+ * Build the `.nwire/` cache on demand, or refresh it when source changed.
+ * Uses the CLI's fingerprint cheap-path (a SHA over the apps entry +
+ * package.json + workspace handshake) so re-running is free when nothing
+ * moved. Synchronous so the Vite middleware can serve the freshly built
  * file on the same request.
+ *
+ * Studio calls this on every `GET /__nwire/manifest.json` so a user
+ * editing source never sees stale data — the cache rebuilds itself on
+ * the next page load.
  */
-function ensureCacheBuilt(cwd: string = consumerCwd): boolean {
+function ensureCacheBuilt(cwd: string = consumerCwd, opts: { force?: boolean } = {}): boolean {
   const manifestPath = resolve(cwd, ".nwire", "manifest.json");
-  if (existsSync(manifestPath)) return true;
-  const cacheRunnerPath = resolve(here, "..", "nwire-cli", "dist", "cache-runner.js");
-  if (!existsSync(cacheRunnerPath)) return false;
-  const result = spawnSync("pnpm", ["exec", "vite-node", cacheRunnerPath], {
+  const cliPath = resolve(here, "..", "nwire-cli", "dist", "cli.js");
+  if (!existsSync(cliPath)) {
+    return existsSync(manifestPath);
+  }
+  // `nwire cache --if-stale` uses the CLI's fingerprint cheap-path —
+  // when nothing changed it's a few ms; when source moved it rebuilds
+  // before returning. `--quiet` keeps Studio's dev-server log clean.
+  const args = ["exec", "node", cliPath, "cache", "--quiet"];
+  if (!opts.force) args.push("--if-stale");
+  const result = spawnSync("pnpm", args, {
     cwd,
     stdio: "inherit",
     // Windows: `pnpm` resolves to a `.cmd` shim; `shell:true` is needed
     // for `spawn` to find it. POSIX is unaffected.
     shell: process.platform === "win32",
   });
-  if (result.status !== 0) return false;
+  if (result.status !== 0) return existsSync(manifestPath);
   return existsSync(manifestPath);
 }
 
@@ -237,7 +391,16 @@ function nwireDataPlugin() {
           return;
         }
         const manifestPath = resolve(cwd, ".nwire", "manifest.json");
-        if (!existsSync(manifestPath) && !ensureCacheBuilt(cwd)) {
+        // Always run the if-stale path. When the fingerprint matches,
+        // the CLI exits in a few ms with no spawn cost beyond its own
+        // bootstrap; when source moved, the manifest is rebuilt before
+        // we serve it. That's how Studio stays honest while a user is
+        // actively editing.
+        //
+        // `?force=true` is the manual override for the Rebuild button.
+        const u = new URL(req.url ?? "/", "http://localhost");
+        const force = u.searchParams.get("force") === "true";
+        if (!ensureCacheBuilt(cwd, { force })) {
           res.statusCode = 404;
           res.end(
             JSON.stringify({
@@ -513,6 +676,21 @@ function nwireProxyPlugin() {
           res.end(JSON.stringify({ error: "unknown project" }));
           return;
         }
+        // Read the body up-front. If we issue the upstream request before
+        // the body is in hand, Node flushes the proxy headers on the next
+        // tick and the wire waits forever for Content-Length bytes that
+        // arrive too late, surfacing here as "socket hang up". For SSE we
+        // skip body collection entirely (the stream IS the body).
+        const method = (req.method ?? "GET").toUpperCase();
+        const hasBody = method !== "GET" && method !== "HEAD" && method !== "DELETE";
+        const body: Buffer = hasBody
+          ? await new Promise<Buffer>((resolveBody, rejectBody) => {
+              const chunks: Buffer[] = [];
+              req.on("data", (chunk: Buffer) => chunks.push(chunk));
+              req.on("end", () => resolveBody(Buffer.concat(chunks)));
+              req.on("error", rejectBody);
+            })
+          : Buffer.alloc(0);
         const port = await activeProcessPort(cwd);
         if (!port) {
           // No managed process — let Vite's static proxy take it.
@@ -565,16 +743,8 @@ function nwireProxyPlugin() {
             }),
           );
         });
-        // GET / DELETE / HEAD have no body — calling pipe() on a Vite-parsed
-        // IncomingMessage that's already been consumed by upstream middleware
-        // can hang upstream waiting for bytes that never arrive. End directly
-        // for bodyless methods.
-        const method = (req.method ?? "GET").toUpperCase();
-        if (method === "GET" || method === "HEAD" || method === "DELETE") {
-          upstream.end();
-        } else {
-          req.pipe(upstream);
-        }
+        if (body.length > 0) upstream.write(body);
+        upstream.end();
         // SSE / long-lived: tear down upstream when client disconnects.
         req.on("close", () => upstream.destroy());
       });
@@ -690,24 +860,31 @@ function nwireRunnerPlugin() {
 
         if (method === "POST" && pathname === "/__nwire/run/exec-script") {
           // Launch `pnpm run <script>` from the active project's cwd via
-          // the shared supervisor. The `topology` label becomes `pnpm
+          // the shared supervisor. Body:
+          //   { script, port?, env? }
+          //
+          // `port` defaults to an auto-allocated free port; pass an
+          // explicit number to pin a specific port. `env` is forwarded
+          // to the child process and merged into the existing env, so
+          // user overrides win. The `topology` label becomes `pnpm
           // <script>` so the existing UI renders it interchangeably with
           // topology + nwire-command rows.
           void (async () => {
-            const body = (await readBody(req)) as { script?: string } | undefined;
+            const body = (await readBody(req)) as
+              | { script?: string; port?: number; env?: Record<string, string> }
+              | undefined;
             if (!body?.script) {
               return send(res, 400, { error: "body.script required" });
             }
             try {
-              // Same auto-port story as topology start. Scripts that read
-              // process.env.PORT pick it up; scripts that don't ignore it
-              // harmlessly.
-              const port = await findFreePort();
+              const port =
+                typeof body.port === "number" && body.port > 0 ? body.port : await findFreePort();
               const proc = await supervisor.start({
                 topology: `pnpm ${body.script}`,
                 cwd,
                 command: ["pnpm", "run", body.script],
                 port,
+                env: body.env,
               });
               return send(res, 200, { process: proc });
             } catch (err) {
@@ -737,15 +914,39 @@ function nwireRunnerPlugin() {
         }
 
         if (method === "GET" && pathname === "/__nwire/run/processes") {
-          // Scoped to active project — users see only processes started
-          // from this project's cwd (managed via Studio's Run page).
-          const processes = supervisor.list().filter((p) => (p as { cwd?: string }).cwd === cwd);
-          return send(res, 200, { processes });
+          // Scoped to active project. Two sources are merged so the user
+          // sees one panel for every running process they care about:
+          //
+          //   1. Studio's in-process supervisor — anything started via the
+          //      Run page in *this* Studio session.
+          //   2. The project's `.nwire/processes/*.json` registry — written
+          //      by `nwire dev` from another terminal. We dedup by pid, so
+          //      a process Studio spawned isn't listed twice.
+          //
+          // External records are surfaced with `source: "external"` so
+          // the UI can show "started outside Studio" hints and SSE-stream
+          // log tailing reads the log file on disk for those.
+          const local = supervisor.list().filter((p) => p.cwd === cwd);
+          const localPids = new Set(local.map((p) => p.pid).filter((x): x is number => !!x));
+          const external = readExternalProcesses(cwd).filter(
+            (p) => p.pid > 0 && !localPids.has(p.pid),
+          );
+          const combined = [
+            ...local.map((p) => ({ ...p, source: "studio" as const })),
+            ...external.map((p) => ({ ...p, source: "external" as const })),
+          ];
+          return send(res, 200, { processes: combined });
         }
 
         if (method === "POST" && pathname === "/__nwire/run/start") {
           void (async () => {
-            const body = (await readBody(req)) as { topology?: string; port?: number } | undefined;
+            const body = (await readBody(req)) as
+              | {
+                  topology?: string;
+                  port?: number;
+                  env?: Record<string, string>;
+                }
+              | undefined;
             if (!body?.topology) {
               return send(res, 400, { error: "body.topology required" });
             }
@@ -758,6 +959,7 @@ function nwireRunnerPlugin() {
                 topology: body.topology,
                 port,
                 cwd,
+                env: body.env,
                 healthCheck: inspectHealthCheck(port),
                 healthIntervalMs: 400,
                 healthTimeoutMs: 60_000,
@@ -824,7 +1026,16 @@ function nwireRunnerPlugin() {
           const id = logsRecentMatch[1]!;
           const search = new URL(url, "http://x").searchParams;
           const limit = search.get("limit") ? Number(search.get("limit")) : undefined;
-          return send(res, 200, { logs: supervisor.recentLogs(id, limit) });
+          // Studio-spawned: read the in-memory ring buffer.
+          // External (from `nwire dev`): tail the log file from disk.
+          if (supervisor.get(id)) {
+            return send(res, 200, { logs: supervisor.recentLogs(id, limit) });
+          }
+          const ext = readExternalProcesses(cwd).find((p) => p.id === id);
+          if (ext) {
+            return send(res, 200, { logs: tailLogFile(ext.logPath, limit ?? 200) });
+          }
+          return send(res, 404, { error: "unknown process id" });
         }
 
         const logsStreamMatch = /^\/__nwire\/run\/logs\/([^/]+)\/stream$/.exec(pathname);
@@ -834,7 +1045,37 @@ function nwireRunnerPlugin() {
           res.setHeader("Content-Type", "text/event-stream");
           res.setHeader("Cache-Control", "no-cache, no-transform");
           res.setHeader("Connection", "keep-alive");
-          // Backfill.
+
+          // External processes have no supervisor event source — we tail
+          // the log file by polling its size. Studio-spawned processes
+          // stream via the supervisor's `log` event.
+          const ext = readExternalProcesses(cwd).find((p) => p.id === id);
+          if (ext) {
+            for (const line of tailLogFile(ext.logPath, 200)) {
+              res.write(`data: ${JSON.stringify(line)}\n\n`);
+            }
+            const tail = openLogTail(ext.logPath, (line) => {
+              try {
+                res.write(`data: ${JSON.stringify(line)}\n\n`);
+              } catch {
+                // socket gone
+              }
+            });
+            const keepalive = setInterval(() => {
+              try {
+                res.write(": keepalive\n\n");
+              } catch {
+                // socket gone
+              }
+            }, 25_000);
+            req.on("close", () => {
+              tail.stop();
+              clearInterval(keepalive);
+            });
+            return;
+          }
+
+          // Studio-spawned path.
           for (const line of supervisor.recentLogs(id, 200)) {
             res.write(`data: ${JSON.stringify(line)}\n\n`);
           }

package/src/pages/Modules.vue

@@ -1,174 +0,0 @@
-<script setup lang="ts">
-import { nextTick, onMounted, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useCache } from "@/lib/cache";
-import { Boxes, ArrowDownRight, ArrowUpRight } from "lucide-vue-next";
-
-const route = useRoute();
-const router = useRouter();
-const { cache } = useCache();
-
-/**
- * Preselect — /modules?name=<moduleName>. The page is grid-of-cards (no
- * master/detail), so "preselect" means: highlight the card + scroll it
- * into view. First module with the matching name wins (modules are unique
- * within an app, and module-name collisions across apps are rare in
- * practice — if it ever happens the operator can disambiguate visually).
- */
-const selected = ref<string | null>(null);
-
-function applyQueryPreselect(): Promise<void> | void {
-  const name = route.query.name;
-  if (typeof name !== "string" || name.length === 0) {
-    selected.value = null;
-    return;
-  }
-  const found = cache.value?.modules.find((m) => m.name === name);
-  if (!found) return;
-  const key = `${found.app}::${found.name}`;
-  selected.value = key;
-  return nextTick(() => {
-    const el = document.querySelector(`[data-module-key="${key}"]`);
-    if (el instanceof HTMLElement) {
-      el.scrollIntoView({ block: "center", behavior: "smooth" });
-    }
-  });
-}
-
-onMounted(() => {
-  void applyQueryPreselect();
-});
-watch(
-  () => route.query.name,
-  () => {
-    void applyQueryPreselect();
-  },
-);
-watch(
-  () => cache.value,
-  () => {
-    void applyQueryPreselect();
-  },
-);
-
-const moduleKey = (m: { app: string; name: string }) => `${m.app}::${m.name}`;
-
-function openEvent(name: string): void {
-  void router.push({ path: "/events", query: { name } });
-}
-function openAction(name: string): void {
-  void router.push({ path: "/actions", query: { name } });
-}
-</script>
-
-<template>
-  <div v-if="cache" class="p-6 space-y-3">
-    <div>
-      <h1 class="text-2xl font-semibold tracking-tight">Modules</h1>
-      <p class="text-sm text-zinc-500 mt-1">Bounded contexts and their dependency graph</p>
-    </div>
-
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
-      <div
-        v-for="m in cache.modules"
-        :key="moduleKey(m)"
-        :data-module-key="moduleKey(m)"
-        :data-testid="`module-card-${m.name}`"
-        class="rounded-lg border bg-zinc-900/30 px-4 py-3 space-y-2 transition-colors"
-        :class="
-          selected === moduleKey(m)
-            ? 'border-emerald-500/70 ring-1 ring-emerald-500/40'
-            : 'border-zinc-800'
-        "
-      >
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <Boxes class="w-4 h-4 text-emerald-400" />
-            <span class="font-mono font-medium">{{ m.name }}</span>
-            <span
-              class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-400"
-            >
-              {{ m.app }}
-            </span>
-          </div>
-          <div class="text-xs text-zinc-500 tabular-nums" data-testid="module-counts">
-            {{ m.counts.actions }}A · {{ m.counts.events }}E · {{ m.counts.actors }}@ ·
-            {{ m.counts.projections }}P · {{ m.counts.queries }}Q · {{ m.counts.workflows }}W
-          </div>
-        </div>
-
-        <div v-if="m.provides.events.length || m.provides.actions.length" class="text-xs">
-          <div class="flex items-center gap-1 text-zinc-500 mb-1">
-            <ArrowUpRight class="w-3 h-3 text-emerald-400" />
-            Provides
-          </div>
-          <div class="flex flex-wrap gap-1 pl-4">
-            <button
-              v-for="e in m.provides.events"
-              :key="`p-e-${e}`"
-              type="button"
-              class="font-mono text-[10px] px-1.5 py-0.5 rounded bg-purple-950/30 border border-purple-900/50 text-purple-300 hover:bg-purple-900/40"
-              :data-testid="`event-link-${e}`"
-              @click="openEvent(e)"
-            >
-              {{ e }}
-            </button>
-            <button
-              v-for="a in m.provides.actions"
-              :key="`p-a-${a}`"
-              type="button"
-              class="font-mono text-[10px] px-1.5 py-0.5 rounded bg-amber-950/30 border border-amber-900/50 text-amber-300 hover:bg-amber-900/40"
-              :data-testid="`action-link-${a}`"
-              @click="openAction(a)"
-            >
-              {{ a }}
-            </button>
-          </div>
-        </div>
-
-        <div
-          v-if="m.needs.events.length || m.needs.externalEvents.length || m.needs.actions.length"
-          class="text-xs"
-        >
-          <div class="flex items-center gap-1 text-zinc-500 mb-1">
-            <ArrowDownRight class="w-3 h-3 text-blue-400" />
-            Needs
-          </div>
-          <div class="flex flex-wrap gap-1 pl-4">
-            <button
-              v-for="e in m.needs.events"
-              :key="`n-e-${e}`"
-              type="button"
-              class="font-mono text-[10px] px-1.5 py-0.5 rounded bg-zinc-900 border border-zinc-700 text-zinc-300 hover:bg-zinc-800"
-              :data-testid="`event-link-${e}`"
-              @click="openEvent(e)"
-            >
-              {{ e }}
-            </button>
-            <button
-              v-for="e in m.needs.externalEvents"
-              :key="`n-x-${e}`"
-              type="button"
-              class="font-mono text-[10px] px-1.5 py-0.5 rounded bg-blue-950/30 border border-blue-900/50 text-blue-300 hover:bg-blue-900/40"
-              :data-testid="`event-link-${e}`"
-              title="cross-service"
-              @click="openEvent(e)"
-            >
-              {{ e }} ⨯
-            </button>
-            <button
-              v-for="a in m.needs.actions"
-              :key="`n-a-${a}`"
-              type="button"
-              class="font-mono text-[10px] px-1.5 py-0.5 rounded bg-zinc-900 border border-zinc-700 text-zinc-300 hover:bg-zinc-800"
-              :data-testid="`action-link-${a}`"
-              @click="openAction(a)"
-            >
-              {{ a }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>