@nwire/studio 0.9.1

package/src/pages/Run.vue

@@ -0,0 +1,479 @@
+<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;
+}
+
+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);
+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 res = await fetch("/__nwire/run/exec-script", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ script: name }),
+    });
+    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 }),
+    });
+    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 class="p-4 space-y-3">
+        <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>
+            <option v-if="topologies.length === 0" disabled>No topology files found</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>
+      <!-- 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">
+            <span class="uppercase">{{ p.status }}</span>
+            <span v-if="p.pid">pid {{ p.pid }}</span>
+            <span class="text-zinc-600">{{ shortId(p.id) }}</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>

package/src/pages/Topology.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { VueFlow, type Node, type Edge, MarkerType } from "@vue-flow/core";
+import { Background } from "@vue-flow/background";
+import { Controls } from "@vue-flow/controls";
+import { useCache } from "@/lib/cache";
+import "@vue-flow/core/dist/style.css";
+import "@vue-flow/core/dist/theme-default.css";
+import "@vue-flow/controls/dist/style.css";
+
+const { cache } = useCache();
+
+// App-level lane layout: each app gets a row; its modules sit on that row.
+const COLS_PER_ROW = 4;
+const NODE_W = 220;
+const NODE_H = 100;
+const COL_GAP = 60;
+const ROW_GAP = 140;
+
+const elements = computed<{ nodes: Node[]; edges: Edge[] }>(() => {
+  if (!cache.value) return { nodes: [], edges: [] };
+
+  const nodes: Node[] = [];
+  let y = 40;
+
+  for (const app of cache.value.apps) {
+    // App banner / header
+    nodes.push({
+      id: `app:${app.name}`,
+      position: { x: 20, y },
+      type: "default",
+      data: { label: app.name },
+      style: {
+        width: `${COLS_PER_ROW * (NODE_W + COL_GAP) + 80}px`,
+        height: "44px",
+        background: "rgba(34, 197, 94, 0.10)",
+        border: "1px solid rgb(34, 197, 94)",
+        color: "rgb(134, 239, 172)",
+        fontWeight: "600",
+        fontSize: "13px",
+        textAlign: "left",
+        padding: "10px 16px",
+        borderRadius: "8px",
+      },
+      selectable: false,
+      draggable: false,
+    });
+
+    let col = 0;
+    let row = 0;
+    const moduleY = y + 60;
+    for (const moduleName of app.modules) {
+      const mod = cache.value.modules.find((m) => m.name === moduleName && m.app === app.name);
+      const x = 40 + col * (NODE_W + COL_GAP);
+      const ny = moduleY + row * (NODE_H + ROW_GAP * 0.5);
+      nodes.push({
+        id: `${app.name}:${moduleName}`,
+        position: { x, y: ny },
+        data: {
+          label: moduleName,
+          subtitle: mod
+            ? `${mod.counts.actions}A · ${mod.counts.events}E · ${mod.counts.actors}@`
+            : "",
+        },
+        style: {
+          width: `${NODE_W}px`,
+          height: `${NODE_H}px`,
+          background: "#18181b",
+          border: "1px solid #3f3f46",
+          color: "#fafafa",
+          padding: "10px",
+          borderRadius: "6px",
+        },
+        type: "default",
+      });
+      col++;
+      if (col >= COLS_PER_ROW) {
+        col = 0;
+        row++;
+      }
+    }
+    const totalRows = Math.max(1, Math.ceil(app.modules.length / COLS_PER_ROW));
+    y = moduleY + totalRows * (NODE_H + ROW_GAP * 0.5) + 30;
+  }
+
+  // Edges: every event-graph edge from producer-module → each consumer-module.
+  const edges: Edge[] = [];
+  for (const edge of cache.value.graph.events) {
+    const sourceId = `${edge.producer.app}:${edge.producer.module}`;
+    for (const cons of edge.consumers) {
+      const targetId = `${cons.app}:${cons.module}`;
+      if (sourceId === targetId) continue; // skip self-loops for readability
+      const cross = cons.app !== edge.producer.app;
+      edges.push({
+        id: `${sourceId}->${targetId}::${edge.event}::${cons.via}`,
+        source: sourceId,
+        target: targetId,
+        label: edge.event,
+        type: "smoothstep",
+        animated: cross,
+        style: { stroke: cross ? "#a78bfa" : "#3f3f46", strokeWidth: cross ? 2 : 1 },
+        labelStyle: { fontSize: "10px", fill: "#a1a1aa" },
+        labelBgStyle: { fill: "#18181b" },
+        labelBgPadding: [4, 2] as [number, number],
+        labelBgBorderRadius: 4,
+        markerEnd: { type: MarkerType.ArrowClosed, color: cross ? "#a78bfa" : "#71717a" },
+      });
+    }
+  }
+
+  return { nodes, edges };
+});
+
+const showCrossOnly = ref(false);
+const filtered = computed(() => {
+  if (!showCrossOnly.value) return elements.value;
+  const edges = elements.value.edges.filter((e) => {
+    const src = (e.source as string).split(":")[0];
+    const tgt = (e.target as string).split(":")[0];
+    return src !== tgt;
+  });
+  return { nodes: elements.value.nodes, edges };
+});
+</script>
+
+<template>
+  <div v-if="cache" class="h-full flex flex-col">
+    <div class="border-b border-zinc-800 px-6 py-3 flex items-center justify-between">
+      <div>
+        <h1 class="text-lg font-semibold tracking-tight">Topology</h1>
+        <p class="text-xs text-zinc-500">
+          Apps · bounded contexts · event flows
+          <span class="ml-2">
+            <span class="inline-block w-3 h-0.5 bg-purple-400 align-middle mr-1"></span>
+            cross-service
+          </span>
+          <span class="ml-3">
+            <span class="inline-block w-3 h-0.5 bg-zinc-600 align-middle mr-1"></span>
+            in-process
+          </span>
+        </p>
+      </div>
+      <label class="flex items-center gap-2 text-xs text-zinc-400">
+        <input type="checkbox" v-model="showCrossOnly" class="accent-purple-400" />
+        Cross-service only
+      </label>
+    </div>
+    <div class="flex-1">
+      <VueFlow
+        :nodes="filtered.nodes"
+        :edges="filtered.edges"
+        :default-viewport="{ x: 0, y: 0, zoom: 0.85 }"
+        :min-zoom="0.3"
+        :max-zoom="2"
+        :fit-view-on-init="true"
+        :nodes-draggable="false"
+        :nodes-connectable="false"
+      >
+        <Background pattern-color="#3f3f46" :gap="20" />
+        <Controls />
+      </VueFlow>
+    </div>
+  </div>
+</template>