@nwire/studio 0.12.1 → 0.13.0

package/src/pages/Run.vue

@@ -1,618 +0,0 @@
-<script setup lang="ts">
-/**
- * Studio-as-runner — the Processes panel.
- *
- * Three columns: topology picker (left), running processes (middle),
- * live stdout for the selected process (right). Drives the `/__nwire/run/*`
- * supervisor surface served by Studio's Vite middleware.
- */
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
-import {
-  Play,
-  Square,
-  RefreshCw,
-  Trash2,
-  CircleDot,
-  Circle,
-  Loader2,
-  AlertTriangle,
-  CheckCircle2,
-  Terminal,
-} from "lucide-vue-next";
-
-type ProcessStatus = "idle" | "starting" | "running" | "stopping" | "exited" | "crashed";
-
-interface ManagedProcess {
-  id: string;
-  topology: string;
-  port?: number;
-  startedAt: string;
-  status: ProcessStatus;
-  pid?: number;
-  exitCode?: number | null;
-  signal?: string | null;
-  errorMessage?: string;
-  /** "studio" — spawned via this Studio session.
-   *  "external" — discovered from .nwire/processes/*.json (e.g. nwire dev). */
-  source?: "studio" | "external";
-  env?: Record<string, string>;
-}
-
-interface LogLine {
-  seq: number;
-  ts: string;
-  stream: "stdout" | "stderr";
-  line: string;
-}
-
-const topologies = ref<string[]>([]);
-const scripts = ref<Array<{ name: string; command: string }>>([]);
-const scriptBusy = ref<string | null>(null);
-const processes = ref<ManagedProcess[]>([]);
-const selectedId = ref<string | null>(null);
-const startTopology = ref<string>("");
-const startPort = ref<number>(3000);
-const startBusy = ref(false);
-const startError = ref<string | null>(null);
-
-/** KEY=value lines the operator typed; parsed on submit. */
-const envInput = ref<string>("");
-const envOpen = ref(false);
-
-function parseEnvInput(raw: string): Record<string, string> {
-  const out: Record<string, string> = {};
-  for (const line of raw.split(/\r?\n/)) {
-    const trimmed = line.trim();
-    if (!trimmed || trimmed.startsWith("#")) continue;
-    const eq = trimmed.indexOf("=");
-    if (eq < 1) continue;
-    const k = trimmed.slice(0, eq).trim();
-    const v = trimmed.slice(eq + 1).trim();
-    if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(k)) continue;
-    // Strip matching surrounding quotes — "value" or 'value'.
-    const dequoted =
-      (v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))
-        ? v.slice(1, -1)
-        : v;
-    out[k] = dequoted;
-  }
-  return out;
-}
-const autoScroll = ref(true);
-const filterStream = ref<"all" | "stdout" | "stderr">("all");
-
-const logs = ref<LogLine[]>([]);
-let es: EventSource | null = null;
-let processesPoll: ReturnType<typeof setInterval> | null = null;
-
-async function loadTopologies() {
-  try {
-    const res = await fetch("/__nwire/run/topologies");
-    const body = (await res.json()) as { topologies: string[] };
-    topologies.value = body.topologies;
-    if (!startTopology.value && body.topologies[0]) startTopology.value = body.topologies[0];
-  } catch {
-    topologies.value = [];
-  }
-}
-
-async function loadScripts() {
-  try {
-    const res = await fetch("/__nwire/run/scripts");
-    const body = (await res.json()) as { scripts: Array<{ name: string; command: string }> };
-    scripts.value = body.scripts;
-  } catch {
-    scripts.value = [];
-  }
-}
-
-/**
- * Display ordering for package.json scripts:
- *
- *   1. `nwire`-prefixed first (alphabetical) — these are the framework's own
- *      shorthands (`nwire:dev`, `nwire:cache`, etc.) and operators reach for
- *      them most often.
- *   2. Everything else (alphabetical).
- *
- * Computed off `scripts.value` so refresh updates the order without churn.
- */
-const sortedScripts = computed(() => {
-  const nwirePrefixed = scripts.value
-    .filter((s) => s.name.startsWith("nwire"))
-    .sort((a, b) => a.name.localeCompare(b.name));
-  const others = scripts.value
-    .filter((s) => !s.name.startsWith("nwire"))
-    .sort((a, b) => a.name.localeCompare(b.name));
-  return [...nwirePrefixed, ...others];
-});
-
-async function runScript(name: string) {
-  scriptBusy.value = name;
-  startError.value = null;
-  try {
-    const env = parseEnvInput(envInput.value);
-    const port = startPort.value > 0 ? startPort.value : undefined;
-    const res = await fetch("/__nwire/run/exec-script", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ script: name, port, env: Object.keys(env).length ? env : undefined }),
-    });
-    const body = (await res.json()) as { process?: ManagedProcess; error?: string };
-    if (!res.ok) {
-      startError.value = body.error ?? `run failed (${res.status})`;
-      return;
-    }
-    if (body.process) {
-      processes.value = [...processes.value, body.process];
-      selectedId.value = body.process.id;
-    }
-  } catch (err) {
-    startError.value = (err as Error).message;
-  } finally {
-    scriptBusy.value = null;
-  }
-}
-
-async function loadProcesses() {
-  try {
-    const res = await fetch("/__nwire/run/processes");
-    const body = (await res.json()) as { processes: ManagedProcess[] };
-    processes.value = body.processes;
-    // If selection died, keep the id but show last logs.
-    if (selectedId.value && !body.processes.some((p) => p.id === selectedId.value)) {
-      selectedId.value = null;
-    }
-  } catch {
-    /* ignore */
-  }
-}
-
-async function start() {
-  if (!startTopology.value) return;
-  startBusy.value = true;
-  startError.value = null;
-  try {
-    const res = await fetch("/__nwire/run/start", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        topology: startTopology.value,
-        port: startPort.value,
-        env: (() => {
-          const e = parseEnvInput(envInput.value);
-          return Object.keys(e).length ? e : undefined;
-        })(),
-      }),
-    });
-    const body = (await res.json()) as { process?: ManagedProcess; error?: string };
-    if (!res.ok) {
-      startError.value = body.error ?? `start failed (${res.status})`;
-      return;
-    }
-    if (body.process) {
-      processes.value = [...processes.value, body.process];
-      selectedId.value = body.process.id;
-    }
-  } catch (err) {
-    startError.value = (err as Error).message;
-  } finally {
-    startBusy.value = false;
-  }
-}
-
-async function stop(id: string) {
-  try {
-    await fetch(`/__nwire/run/stop/${id}`, { method: "POST" });
-  } catch {
-    /* ignore */
-  }
-  await loadProcesses();
-}
-
-async function forget(id: string) {
-  try {
-    await fetch(`/__nwire/run/forget/${id}`, { method: "POST" });
-    if (selectedId.value === id) selectedId.value = null;
-  } catch {
-    /* ignore */
-  }
-  await loadProcesses();
-}
-
-function connectLogStream(id: string | null) {
-  es?.close();
-  es = null;
-  logs.value = [];
-  if (!id) return;
-  es = new EventSource(`/__nwire/run/logs/${id}/stream`);
-  es.onmessage = (msg) => {
-    try {
-      const line = JSON.parse(msg.data) as LogLine;
-      logs.value.push(line);
-      if (logs.value.length > 5000) logs.value.shift();
-    } catch {
-      /* ignore */
-    }
-  };
-  es.onerror = () => {
-    // SSE auto-reconnects; nothing to do.
-  };
-}
-
-watch(selectedId, (id) => connectLogStream(id));
-
-onMounted(() => {
-  void loadTopologies();
-  void loadScripts();
-  void loadProcesses();
-  processesPoll = setInterval(loadProcesses, 2000);
-});
-
-onUnmounted(() => {
-  es?.close();
-  if (processesPoll) clearInterval(processesPoll);
-});
-
-const filteredLogs = computed(() => {
-  if (filterStream.value === "all") return logs.value;
-  return logs.value.filter((l) => l.stream === filterStream.value);
-});
-
-const selectedProcess = computed(() => processes.value.find((p) => p.id === selectedId.value));
-
-/**
- * The process Studio's `/_nwire/*` proxy currently routes to — the most
- * recently started running process. Surface it in the header so the user
- * knows which wire Live / Dispatch / EventStorm are pointing at.
- */
-const activeProcess = computed<ManagedProcess | undefined>(() => {
-  const running = processes.value.filter((p) => p.status === "running");
-  if (running.length === 0) return undefined;
-  return [...running].sort((a, b) => b.startedAt.localeCompare(a.startedAt))[0];
-});
-
-function shortId(id: string): string {
-  return id.split("-")[0] ?? id.slice(0, 8);
-}
-
-function timeAgo(iso: string): string {
-  const s = Math.max(0, Math.floor((Date.now() - new Date(iso).getTime()) / 1000));
-  if (s < 60) return `${s}s ago`;
-  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
-  return `${Math.floor(s / 3600)}h ago`;
-}
-</script>
-
-<template>
-  <div class="h-full flex">
-    <!-- Topology picker -->
-    <div class="w-72 border-r border-zinc-800 flex flex-col">
-      <div class="border-b border-zinc-800 px-4 py-3">
-        <h1 class="font-semibold text-lg tracking-tight">Run</h1>
-        <p class="text-xs text-zinc-500 mt-0.5">Spawn a wire from a topology manifest.</p>
-        <div v-if="activeProcess" class="mt-2 flex items-center gap-1.5 text-[10px] font-mono">
-          <span class="inline-block w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
-          <span class="text-emerald-300">/_nwire/* → :{{ activeProcess.port }}</span>
-          <span class="text-zinc-600">({{ activeProcess.topology }})</span>
-        </div>
-        <div v-else class="mt-2 text-[10px] font-mono text-zinc-600">
-          /_nwire/* → static fallback
-        </div>
-      </div>
-      <div
-        v-if="topologies.length === 0 && scripts.length === 0"
-        class="p-4 text-xs text-zinc-400 space-y-2 border-b border-zinc-800"
-      >
-        <div class="flex items-start gap-2 text-amber-300">
-          <AlertTriangle class="w-3.5 h-3.5 mt-0.5 shrink-0" />
-          <div class="space-y-1">
-            <div class="font-medium">No way to start this project</div>
-            <div class="text-zinc-500">
-              Studio looks for two things:
-              <ul class="list-disc list-inside mt-1 space-y-0.5">
-                <li>
-                  <code class="text-zinc-300">apps/topologies/*.topology.ts</code> — multi-app
-                  projects
-                </li>
-                <li>
-                  <code class="text-zinc-300">package.json</code> scripts (<code>dev</code>,
-                  <code>start</code>) — single-app projects
-                </li>
-              </ul>
-            </div>
-            <div class="text-zinc-500 mt-2">
-              Most projects use <code>pnpm dev</code>. Add a <code>"dev"</code> script to your
-              package.json and refresh.
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        v-else-if="topologies.length === 0 && scripts.length > 0"
-        class="p-3 text-[11px] text-zinc-500 border-b border-zinc-800"
-      >
-        <div class="flex items-start gap-1.5">
-          <CircleDot class="w-3 h-3 mt-0.5 text-emerald-400 shrink-0" />
-          <div>
-            No topology files. Use the
-            <span class="text-zinc-300">package.json scripts</span> below — usually
-            <code class="text-zinc-300">dev</code> is what you want.
-          </div>
-        </div>
-      </div>
-      <div class="p-4 space-y-3" v-if="topologies.length > 0">
-        <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"
-          @click="start"
-        >
-          <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="startError"
-          class="text-xs text-rose-300 bg-rose-950/40 border border-rose-900 rounded p-2 flex items-start gap-2"
-        >
-          <AlertTriangle class="w-3 h-3 mt-0.5 shrink-0" />
-          {{ startError }}
-        </div>
-        <button
-          class="w-full text-[10px] text-zinc-500 hover:text-zinc-300 flex items-center justify-center gap-1"
-          @click="loadTopologies"
-        >
-          <RefreshCw class="w-3 h-3" />
-          refresh topologies
-        </button>
-      </div>
-      <!-- Env vars + port shared between topology start and script run.
-           Collapsed by default. Lines like `PORT=4000`, `LOG_LEVEL=debug`
-           are forwarded to the child process. -->
-      <div
-        class="border-t border-zinc-800 px-4 py-3"
-        v-if="scripts.length > 0 || topologies.length > 0"
-      >
-        <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 class="flex items-center gap-1.5">
-            <span
-              :class="
-                envOpen
-                  ? 'rotate-90 inline-block transition-transform'
-                  : 'inline-block transition-transform'
-              "
-              >▸</span
-            >
-            env + port overrides
-          </span>
-          <span
-            v-if="Object.keys(parseEnvInput(envInput)).length > 0"
-            class="text-emerald-300 normal-case"
-          >
-            {{ Object.keys(parseEnvInput(envInput)).length }} var(s) set
-          </span>
-        </button>
-        <div v-if="envOpen" class="mt-2 space-y-2">
-          <div>
-            <label class="text-[10px] uppercase tracking-wide text-zinc-500">Port (PORT env)</label>
-            <input
-              v-model.number="startPort"
-              type="number"
-              placeholder="auto"
-              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>
-          <div>
-            <label class="text-[10px] uppercase tracking-wide text-zinc-500"
-              >Other env (KEY=value, one per line)</label
-            >
-            <textarea
-              v-model="envInput"
-              rows="4"
-              placeholder="LOG_LEVEL=debug&#10;NODE_ENV=development"
-              class="w-full mt-1 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 class="text-[10px] text-zinc-600 mt-1">
-              Applied to both topology starts and script runs.
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- package.json scripts — fallback for single-app projects without
-           apps/topologies/. Always shown so multi-app projects can also
-           use it for one-shot `pnpm test`, `pnpm build`, etc. -->
-      <div class="border-t border-zinc-800 px-4 py-3" v-if="scripts.length > 0">
-        <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 p-0.5 rounded"
-            @click="loadScripts"
-            title="Refresh"
-          >
-            <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"
-            @click="runScript(s.name)"
-            :title="s.command"
-          >
-            <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">
-        <div>
-          <h2 class="font-medium text-sm tracking-tight">Processes</h2>
-          <p class="text-[10px] text-zinc-500">{{ processes.length }} managed</p>
-        </div>
-        <button
-          class="text-zinc-500 hover:text-zinc-200 p-1 rounded"
-          @click="loadProcesses"
-          title="Refresh"
-        >
-          <RefreshCw class="w-3.5 h-3.5" />
-        </button>
-      </div>
-      <div class="flex-1 overflow-auto">
-        <div v-if="processes.length === 0" class="p-6 text-sm text-zinc-500">
-          No processes. Pick a topology and click <span class="text-zinc-300">Start</span>.
-        </div>
-        <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 }"
-          @click="selectedId = p.id"
-        >
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-2 min-w-0">
-              <CircleDot v-if="p.status === 'running'" class="w-3 h-3 text-emerald-400 shrink-0" />
-              <Loader2
-                v-else-if="p.status === 'starting' || p.status === 'stopping'"
-                class="w-3 h-3 text-amber-400 animate-spin shrink-0"
-              />
-              <AlertTriangle
-                v-else-if="p.status === 'crashed'"
-                class="w-3 h-3 text-rose-400 shrink-0"
-              />
-              <CheckCircle2
-                v-else-if="p.status === 'exited'"
-                class="w-3 h-3 text-zinc-400 shrink-0"
-              />
-              <Circle v-else class="w-3 h-3 text-zinc-500 shrink-0" />
-              <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">{{ timeAgo(p.startedAt) }}</span>
-          </div>
-          <div class="text-[10px] text-zinc-500 mt-0.5 font-mono flex items-center gap-2 flex-wrap">
-            <span class="uppercase">{{ p.status }}</span>
-            <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 py-0 rounded bg-amber-950/40 text-amber-300 border border-amber-900"
-              title="Discovered from .nwire/processes/*.json — started outside Studio"
-              >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-3 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>
-            <template v-else>
-              <span class="text-zinc-500">Select a process</span>
-            </template>
-          </h2>
-        </div>
-        <div class="flex items-center gap-2">
-          <select
-            v-model="filterStream"
-            class="bg-zinc-900 border border-zinc-800 rounded px-2 py-1 text-xs text-zinc-200"
-          >
-            <option value="all">all</option>
-            <option value="stdout">stdout</option>
-            <option value="stderr">stderr</option>
-          </select>
-          <label class="flex items-center gap-1 text-[10px] text-zinc-400">
-            <input type="checkbox" v-model="autoScroll" class="accent-emerald-400" />
-            tail
-          </label>
-          <button
-            v-if="
-              selectedProcess &&
-              (selectedProcess.status === 'running' || selectedProcess.status === 'starting')
-            "
-            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-if="
-              selectedProcess &&
-              (selectedProcess.status === 'exited' || selectedProcess.status === 'crashed')
-            "
-            class="text-xs px-2 py-1 rounded bg-zinc-800 hover:bg-zinc-700 text-zinc-300 flex items-center gap-1"
-            @click="forget(selectedProcess.id)"
-          >
-            <Trash2 class="w-3 h-3" /> clear
-          </button>
-        </div>
-      </div>
-      <div
-        ref="(el) => el && autoScroll && (el.scrollTop = el.scrollHeight)"
-        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 on the left to view its stdout/stderr.
-        </div>
-        <div v-else-if="filteredLogs.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="log in filteredLogs"
-            :key="log.seq"
-            class="flex gap-2"
-            :class="log.stream === 'stderr' ? 'text-rose-200' : 'text-zinc-300'"
-          >
-            <span class="text-zinc-600 tabular-nums shrink-0">
-              {{ new Date(log.ts).toLocaleTimeString() }}
-            </span>
-            <span class="whitespace-pre-wrap break-all">{{ log.line }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>