@nwire/studio 0.12.1 → 0.13.0

package/src/pages/operate/EndpointPicker.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+/**
+ * Operate › EndpointPicker — switch the active HTTP front.
+ *
+ * Fetches `/__nwire/endpoints` and renders a compact selector. In a
+ * single-endpoint project the picker collapses to a plain label (one entry,
+ * already active — no action needed). In multi-endpoint projects it lets you
+ * choose which endpoint fronts the HTTP surface via `/__nwire/endpoints/active`.
+ *
+ * Hidden entirely when the host reports no endpoints (e.g. standalone Studio
+ * where the route returns 501 and the composable yields an empty list).
+ */
+import { computed } from "vue";
+import { Loader2, Radio } from "lucide-vue-next";
+import { useEndpoints } from "@/composables/useEndpoints";
+
+const { endpoints, loading, error, switching, setActive } = useEndpoints();
+
+/** True when there is more than one endpoint — only then is the picker interactive. */
+const hasChoice = computed(() => endpoints.value.length > 1);
+const activeName = computed(() => endpoints.value.find((e) => e.active)?.name ?? null);
+</script>
+
+<template>
+  <!-- Hidden when the host returned no endpoints (standalone Studio / unsupported host). -->
+  <div v-if="endpoints.length > 0 || loading" class="flex items-center gap-2 min-w-0">
+    <Radio class="w-3.5 h-3.5 text-zinc-500 shrink-0" />
+
+    <!-- Single endpoint — just a label, no interaction. -->
+    <span v-if="!hasChoice && activeName" class="text-xs text-zinc-400 font-mono truncate">
+      {{ activeName }}
+    </span>
+
+    <!-- Multi-endpoint — a native select (lean, no custom dropdown needed). -->
+    <select
+      v-else-if="hasChoice"
+      class="bg-zinc-900 border border-zinc-800 rounded px-2 py-1 text-xs font-mono text-zinc-200 focus:outline-none focus:border-zinc-600 disabled:opacity-50 cursor-pointer"
+      :disabled="switching"
+      :value="activeName"
+      data-testid="endpoint-picker-select"
+      @change="setActive(($event.target as HTMLSelectElement).value)"
+    >
+      <option
+        v-for="ep in endpoints"
+        :key="ep.name"
+        :value="ep.name"
+        :class="ep.hasHttp ? '' : 'text-zinc-500'"
+      >
+        {{ ep.name }}{{ ep.hasHttp ? "" : " (no HTTP)" }}
+      </option>
+    </select>
+
+    <Loader2 v-if="switching || loading" class="w-3 h-3 animate-spin text-zinc-500 shrink-0" />
+    <span v-if="error" class="text-[10px] text-rose-400 truncate">{{ error }}</span>
+  </div>
+</template>

package/src/pages/operate/RunPanel.vue

@@ -0,0 +1,316 @@
+<script setup lang="ts">
+/**
+ * Operate › Run — spawn a wire from a topology manifest or a package script,
+ * watch the managed-process table, tail the selected process's stdout.
+ *
+ * Process lifecycle rides `useProcesses`; the log tail rides `useLogTail`;
+ * the maths (env parse, script order, status tone, active wire) live in
+ * `lib/operate`. The panel owns only the topology/script catalogs + layout.
+ */
+import { computed, onMounted, ref } from "vue";
+import { Play, Square, RefreshCw, Trash2, Loader2, AlertTriangle, Terminal } from "lucide-vue-next";
+import { StatusBadge, EmptyState } from "@/components";
+import { useProcesses } from "@/composables/useProcesses";
+import { useLogTail } from "@/composables/useLogTail";
+import {
+  parseEnvInput,
+  sortScripts,
+  statusTone,
+  shortId,
+  timeAgo,
+  isActive,
+  activeProcess,
+  type ScriptEntry,
+} from "@/lib/operate";
+
+const { processes, error: procError, load, start, execScript, stop, forget } = useProcesses();
+
+const topologies = ref<string[]>([]);
+const scripts = ref<ScriptEntry[]>([]);
+const scriptBusy = ref<string | null>(null);
+const startTopology = ref<string>("");
+const startPort = ref<number>(3000);
+const startBusy = ref(false);
+const envInput = ref<string>("");
+const envOpen = ref(false);
+
+const selectedId = ref<string | null>(null);
+const { logs } = useLogTail(selectedId);
+
+const sortedScripts = computed(() => sortScripts(scripts.value));
+const selectedProcess = computed(() => processes.value.find((p) => p.id === selectedId.value));
+const active = computed(() => activeProcess(processes.value));
+const envCount = computed(() => Object.keys(parseEnvInput(envInput.value)).length);
+
+async function loadCatalogs(): Promise<void> {
+  try {
+    const [t, s] = await Promise.all([
+      fetch("/__nwire/run/topologies").then((r) => r.json()),
+      fetch("/__nwire/run/scripts").then((r) => r.json()),
+    ]);
+    topologies.value = (t as { topologies: string[] }).topologies ?? [];
+    scripts.value = (s as { scripts: ScriptEntry[] }).scripts ?? [];
+    if (!startTopology.value && topologies.value[0]) startTopology.value = topologies.value[0];
+  } catch {
+    topologies.value = [];
+    scripts.value = [];
+  }
+}
+
+function env(): Record<string, string> | undefined {
+  const e = parseEnvInput(envInput.value);
+  return Object.keys(e).length ? e : undefined;
+}
+
+async function onStart(): Promise<void> {
+  if (!startTopology.value) return;
+  startBusy.value = true;
+  const proc = await start({
+    topology: startTopology.value,
+    port: startPort.value,
+    env: env(),
+  });
+  if (proc) selectedId.value = proc.id;
+  startBusy.value = false;
+}
+
+async function onRunScript(name: string): Promise<void> {
+  scriptBusy.value = name;
+  const proc = await execScript({
+    script: name,
+    port: startPort.value > 0 ? startPort.value : undefined,
+    env: env(),
+  });
+  if (proc) selectedId.value = proc.id;
+  scriptBusy.value = null;
+}
+
+async function onForget(id: string): Promise<void> {
+  if (selectedId.value === id) selectedId.value = null;
+  await forget(id);
+}
+
+onMounted(loadCatalogs);
+</script>
+
+<template>
+  <div class="h-full flex" data-testid="run-panel">
+    <!-- Launcher -->
+    <div class="w-72 border-r border-zinc-800 flex flex-col overflow-auto">
+      <div class="border-b border-zinc-800 px-4 py-3">
+        <p class="text-xs text-zinc-500">Spawn a wire from a topology or script.</p>
+        <div class="mt-2 flex items-center gap-1.5 text-[10px] font-mono">
+          <template v-if="active">
+            <span class="inline-block w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+            <span class="text-emerald-300">/_nwire/* → :{{ active.port }}</span>
+            <span class="text-zinc-600">({{ active.topology }})</span>
+          </template>
+          <span v-else class="text-zinc-600">/_nwire/* → static fallback</span>
+        </div>
+      </div>
+
+      <div
+        v-if="topologies.length === 0 && scripts.length === 0"
+        class="p-4 text-xs text-amber-300 flex items-start gap-2 border-b border-zinc-800"
+      >
+        <AlertTriangle class="w-3.5 h-3.5 mt-0.5 shrink-0" />
+        <div>
+          <div class="font-medium">No way to start this project</div>
+          <div class="text-zinc-500 mt-1">
+            Add a <code class="text-zinc-300">dev</code> script to package.json, or an
+            <code class="text-zinc-300">apps/topologies/*.topology.ts</code>, then refresh.
+          </div>
+        </div>
+      </div>
+
+      <div v-if="topologies.length > 0" class="p-4 space-y-3 border-b border-zinc-800">
+        <div>
+          <label class="text-[10px] uppercase tracking-wide text-zinc-500">Topology</label>
+          <select
+            v-model="startTopology"
+            class="w-full mt-1 bg-zinc-900 border border-zinc-800 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-zinc-600"
+          >
+            <option v-for="t in topologies" :key="t" :value="t">{{ t }}</option>
+          </select>
+        </div>
+        <div>
+          <label class="text-[10px] uppercase tracking-wide text-zinc-500">Port</label>
+          <input
+            v-model.number="startPort"
+            type="number"
+            class="w-full mt-1 bg-zinc-900 border border-zinc-800 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-zinc-600"
+          />
+        </div>
+        <button
+          class="w-full px-3 py-2 rounded bg-emerald-700 hover:bg-emerald-600 disabled:opacity-50 text-sm font-medium flex items-center justify-center gap-2"
+          :disabled="startBusy || !startTopology"
+          data-testid="run-start"
+          @click="onStart"
+        >
+          <Loader2 v-if="startBusy" class="w-4 h-4 animate-spin" />
+          <Play v-else class="w-4 h-4" />
+          {{ startBusy ? "Starting…" : "Start" }}
+        </button>
+        <div
+          v-if="procError"
+          class="text-xs text-rose-300 bg-rose-950/40 border border-rose-900 rounded p-2"
+        >
+          {{ procError }}
+        </div>
+      </div>
+
+      <!-- Env overrides -->
+      <div v-if="scripts.length || topologies.length" class="border-b border-zinc-800 px-4 py-3">
+        <button
+          class="w-full flex items-center justify-between text-[10px] uppercase tracking-wide text-zinc-500 hover:text-zinc-300"
+          @click="envOpen = !envOpen"
+        >
+          <span>env + port overrides</span>
+          <span v-if="envCount" class="text-emerald-300 normal-case">{{ envCount }} set</span>
+        </button>
+        <textarea
+          v-if="envOpen"
+          v-model="envInput"
+          rows="4"
+          placeholder="LOG_LEVEL=debug&#10;NODE_ENV=development"
+          class="w-full mt-2 bg-zinc-900 border border-zinc-800 rounded px-2 py-1.5 text-xs font-mono focus:outline-none focus:border-zinc-600"
+        ></textarea>
+      </div>
+
+      <!-- package.json scripts -->
+      <div v-if="scripts.length" class="px-4 py-3">
+        <div class="flex items-center justify-between mb-2">
+          <label class="text-[10px] uppercase tracking-wide text-zinc-500"
+            >package.json scripts</label
+          >
+          <button class="text-zinc-500 hover:text-zinc-200" title="Refresh" @click="loadCatalogs">
+            <RefreshCw class="w-3 h-3" />
+          </button>
+        </div>
+        <div class="space-y-1">
+          <button
+            v-for="s in sortedScripts"
+            :key="s.name"
+            class="w-full text-left px-2 py-1.5 rounded hover:bg-zinc-900/70 disabled:opacity-50 flex items-center gap-2 group"
+            :disabled="scriptBusy === s.name"
+            :title="s.command"
+            @click="onRunScript(s.name)"
+          >
+            <Loader2 v-if="scriptBusy === s.name" class="w-3 h-3 animate-spin text-emerald-400" />
+            <Play v-else class="w-3 h-3 text-zinc-600 group-hover:text-emerald-400" />
+            <span class="text-xs font-mono text-zinc-200">{{ s.name }}</span>
+            <span class="text-[10px] text-zinc-600 truncate flex-1 text-right">{{
+              s.command
+            }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Processes -->
+    <div class="w-96 border-r border-zinc-800 flex flex-col">
+      <div class="border-b border-zinc-800 px-4 py-3 flex items-center justify-between">
+        <h2 class="font-medium text-sm tracking-tight">Processes</h2>
+        <button class="text-zinc-500 hover:text-zinc-200" title="Refresh" @click="load">
+          <RefreshCw class="w-3.5 h-3.5" />
+        </button>
+      </div>
+      <div class="flex-1 overflow-auto">
+        <EmptyState
+          v-if="processes.length === 0"
+          :icon="Play"
+          title="No processes"
+          hint="Pick a topology or script and start it — the managed process shows up here."
+        />
+        <button
+          v-for="p in processes"
+          :key="p.id"
+          class="w-full text-left px-4 py-3 border-b border-zinc-900 hover:bg-zinc-900/50 transition-colors"
+          :class="{ 'bg-zinc-900/70': selectedId === p.id }"
+          data-testid="process-row"
+          @click="selectedId = p.id"
+        >
+          <div class="flex items-center justify-between gap-2">
+            <div class="flex items-center gap-2 min-w-0">
+              <StatusBadge
+                :status="statusTone(p.status)"
+                :label="p.status"
+                :pulse="p.status === 'running'"
+              />
+              <span class="font-mono text-sm truncate">{{ p.topology }}</span>
+              <span v-if="p.port" class="text-[10px] text-zinc-500">:{{ p.port }}</span>
+            </div>
+            <span class="text-[10px] text-zinc-500 shrink-0">{{
+              timeAgo(p.startedAt, Date.now())
+            }}</span>
+          </div>
+          <div class="text-[10px] text-zinc-500 mt-1 font-mono flex items-center gap-2 flex-wrap">
+            <span v-if="p.pid">pid {{ p.pid }}</span>
+            <span class="text-zinc-600">{{ shortId(p.id) }}</span>
+            <span
+              v-if="p.source === 'external'"
+              class="text-[9px] uppercase tracking-wider px-1 rounded bg-amber-950/40 text-amber-300 border border-amber-900"
+              >external</span
+            >
+          </div>
+          <div v-if="p.errorMessage" class="text-[10px] text-rose-300 mt-1">
+            {{ p.errorMessage }}
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- Logs -->
+    <div class="flex-1 flex flex-col min-w-0">
+      <div class="border-b border-zinc-800 px-4 py-3 flex items-center justify-between gap-3">
+        <div class="flex items-center gap-2 min-w-0">
+          <Terminal class="w-4 h-4 text-zinc-400 shrink-0" />
+          <h2 class="font-medium text-sm tracking-tight truncate">
+            <template v-if="selectedProcess">
+              {{ selectedProcess.topology }}
+              <span class="text-zinc-500 font-mono text-xs">{{ shortId(selectedProcess.id) }}</span>
+            </template>
+            <span v-else class="text-zinc-500">Select a process</span>
+          </h2>
+        </div>
+        <div v-if="selectedProcess" class="flex items-center gap-2">
+          <button
+            v-if="isActive(selectedProcess.status)"
+            class="text-xs px-2 py-1 rounded bg-rose-900/40 border border-rose-900 hover:bg-rose-900/70 text-rose-200 flex items-center gap-1"
+            @click="stop(selectedProcess.id)"
+          >
+            <Square class="w-3 h-3" /> stop
+          </button>
+          <button
+            v-else
+            class="text-xs px-2 py-1 rounded bg-zinc-800 hover:bg-zinc-700 text-zinc-300 flex items-center gap-1"
+            @click="onForget(selectedProcess.id)"
+          >
+            <Trash2 class="w-3 h-3" /> clear
+          </button>
+        </div>
+      </div>
+      <div class="flex-1 overflow-auto bg-zinc-950 font-mono text-[11px] leading-tight">
+        <div v-if="!selectedId" class="p-6 text-zinc-500 text-sm font-sans">
+          Pick a process to view its stdout/stderr.
+        </div>
+        <div v-else-if="logs.length === 0" class="p-6 text-zinc-500 text-sm font-sans">
+          Waiting for output…
+        </div>
+        <div v-else class="p-3 space-y-0.5">
+          <div
+            v-for="l in logs"
+            :key="l.seq"
+            class="flex gap-2"
+            :class="l.stream === 'stderr' ? 'text-rose-200' : 'text-zinc-300'"
+          >
+            <span class="text-zinc-600 tabular-nums shrink-0">
+              {{ new Date(l.ts).toLocaleTimeString() }}
+            </span>
+            <span class="whitespace-pre-wrap break-all">{{ l.line }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/server/__tests__/nwire-read.test.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { mkdirSync, writeFileSync, rmSync } from "node:fs";
+import { resolve } from "node:path";
+import { tmpdir } from "node:os";
+// Telemetry-run readers (listTelemetryRuns / readTelemetryRun) are re-exported
+// from `@nwire/scan` and covered by that package's telemetry-runs test. This
+// file covers nwire-read's own surface: readManifest + foldTopology.
+import { readManifest, foldTopology } from "../nwire-read";
+
+// ── fixture helpers ───────────────────────────────────────────────────────────
+
+let tmp: string;
+
+function nwireDir(): string {
+  return resolve(tmp, ".nwire");
+}
+
+function writeManifest(content: string): void {
+  mkdirSync(nwireDir(), { recursive: true });
+  writeFileSync(resolve(nwireDir(), "manifest.json"), content, "utf8");
+}
+
+beforeEach(() => {
+  tmp = resolve(tmpdir(), `nwire-read-test-${process.pid}-${Date.now()}`);
+  mkdirSync(tmp, { recursive: true });
+});
+
+afterEach(() => {
+  rmSync(tmp, { recursive: true, force: true });
+});
+
+// ── readManifest ─────────────────────────────────────────────────────────────
+
+describe("readManifest", () => {
+  it("returns null when .nwire/ does not exist", () => {
+    expect(readManifest(tmp)).toBeNull();
+  });
+
+  it("returns null when manifest.json is missing", () => {
+    mkdirSync(nwireDir(), { recursive: true });
+    expect(readManifest(tmp)).toBeNull();
+  });
+
+  it("returns the raw JSON string when file is present", () => {
+    const raw = JSON.stringify({ apps: [], actions: [] });
+    writeManifest(raw);
+    expect(readManifest(tmp)).toBe(raw);
+  });
+
+  it("preserves exact bytes — no re-serialisation", () => {
+    const raw = '{"apps":[],"note":"trailing-space"   }';
+    writeManifest(raw);
+    expect(readManifest(tmp)).toBe(raw);
+  });
+});
+
+// ── foldTopology ─────────────────────────────────────────────────────────────
+
+describe("foldTopology", () => {
+  it("returns null for null input", () => {
+    expect(foldTopology(null, tmp)).toBeNull();
+  });
+
+  it("returns null for invalid JSON", () => {
+    expect(foldTopology("{broken json", tmp)).toBeNull();
+  });
+
+  it("parses and returns the manifest object", () => {
+    const obj = { apps: [{ name: "orders" }], actions: [] };
+    const result = foldTopology(JSON.stringify(obj), tmp) as typeof obj;
+    expect(result).toEqual(obj);
+  });
+
+  it("round-trips through readManifest correctly", () => {
+    const obj = { apps: [{ name: "billing" }], actions: [], events: [] };
+    writeManifest(JSON.stringify(obj));
+    const raw = readManifest(tmp);
+    expect(foldTopology(raw, tmp)).toEqual(obj);
+  });
+});

package/src/server/nwire-read.ts

@@ -0,0 +1,63 @@
+/**
+ * Pure, disk-read helpers for the standalone Studio Vite middleware.
+ *
+ * `readManifest` / `foldTopology` are the Studio-side manifest readers (raw
+ * string + parse). The telemetry-run readers are re-exported from `@nwire/scan`
+ * (the shared home — see the re-export below), so the CLI dev host and Studio
+ * run identical code without either package importing the other.
+ *
+ * All functions are synchronous, have no side effects beyond filesystem reads,
+ * and accept an explicit `cwd` so callers can target any project root without
+ * touching process state.
+ */
+
+import { existsSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+// Telemetry-run readers live in `@nwire/scan` so the standalone Studio Vite
+// middleware and the CLI dev host share one implementation (both depend on
+// scan; neither imports the other). Re-exported here so the local callers keep
+// a single `nwire-read` import.
+export { listTelemetryRuns, readTelemetryRun, type TelemetryRunMeta } from "@nwire/scan";
+
+// ── readManifest ─────────────────────────────────────────────────────────────
+
+/**
+ * Read `.nwire/manifest.json` from `cwd` and return the raw JSON string.
+ *
+ * Returns `null` when the file does not exist or cannot be read. Callers that
+ * need the parsed object can `JSON.parse` the result; returning the raw string
+ * lets the Vite middleware forward bytes without a round-trip through JSON.
+ */
+export function readManifest(cwd: string): string | null {
+  const manifestPath = resolve(cwd, ".nwire", "manifest.json");
+  if (!existsSync(manifestPath)) return null;
+  try {
+    return readFileSync(manifestPath, "utf8");
+  } catch {
+    return null;
+  }
+}
+
+// ── foldTopology ─────────────────────────────────────────────────────────────
+
+/**
+ * Parse the manifest JSON from disk and (in future increments) fold in live
+ * runtime topology data from the running app.
+ *
+ * Today: parses and returns the disk manifest as-is. The "fold" step — merging
+ * live handler registrations from a running runtime so the manifest stays
+ * accurate during HMR — is reserved for a future increment. The function
+ * signature is sealed now so both callers can adopt it without a breaking
+ * change later.
+ *
+ * Returns `null` when no manifest is present or the file is not valid JSON.
+ */
+export function foldTopology(manifest: string | null, _cwd: string): unknown | null {
+  if (manifest === null) return null;
+  try {
+    return JSON.parse(manifest) as unknown;
+  } catch {
+    return null;
+  }
+}