@nwire/studio 0.12.0 → 0.13.0

package/src/pages/Commands.vue

@@ -1,262 +0,0 @@
-<script setup lang="ts">
-/**
- * Commands panel — fires nwire CLI commands via the supervisor and
- * tails their stdout/stderr. Shares the same `/__nwire/run/*` surface
- * the Run page uses for topologies; the only difference is the start
- * payload (`{ command, args }` vs `{ topology, port }`).
- */
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
-import { useRoute } from "vue-router";
-import {
-  Play,
-  Square,
-  RefreshCw,
-  Trash2,
-  Terminal,
-  CircleDot,
-  Loader2,
-  AlertTriangle,
-  CheckCircle2,
-} from "lucide-vue-next";
-
-interface CommandEntry {
-  name: string;
-  description: string;
-}
-
-interface ManagedProcess {
-  id: string;
-  topology: string;
-  startedAt: string;
-  status: "idle" | "starting" | "running" | "stopping" | "exited" | "crashed";
-  pid?: number;
-  exitCode?: number | null;
-  signal?: string | null;
-  errorMessage?: string;
-}
-
-interface LogLine {
-  seq: number;
-  ts: string;
-  stream: "stdout" | "stderr";
-  line: string;
-}
-
-const route = useRoute();
-const commands = ref<CommandEntry[]>([]);
-const processes = ref<ManagedProcess[]>([]);
-const selectedId = ref<string | null>(null);
-/** Preselected command name from `?name=…` — highlights the row. */
-const selectedCommand = ref<string | null>(null);
-const argsInput = ref("");
-const startBusy = ref(false);
-const startError = ref<string | null>(null);
-const logs = ref<LogLine[]>([]);
-let es: EventSource | null = null;
-let processesPoll: ReturnType<typeof setInterval> | null = null;
-
-function applyQueryPreselect(): void {
-  const name = route.query.name;
-  selectedCommand.value = typeof name === "string" && name.length > 0 ? name : null;
-}
-watch(() => route.query.name, applyQueryPreselect);
-
-async function loadCommands() {
-  const res = await fetch("/__nwire/run/commands");
-  const data = (await res.json()) as { commands: CommandEntry[] };
-  commands.value = data.commands;
-}
-
-async function loadProcesses() {
-  const res = await fetch("/__nwire/run/processes");
-  const data = (await res.json()) as { processes: ManagedProcess[] };
-  // Filter to processes our panel started (topology label begins with "nwire ").
-  processes.value = data.processes.filter((p) => p.topology.startsWith("nwire "));
-}
-
-async function exec(name: string) {
-  startBusy.value = true;
-  startError.value = null;
-  try {
-    const argv = argsInput.value.trim().split(/\s+/).filter(Boolean);
-    const res = await fetch("/__nwire/run/exec", {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ command: name, args: argv }),
-    });
-    if (!res.ok) {
-      const data = (await res.json()) as { error?: string };
-      startError.value = data.error ?? `HTTP ${res.status}`;
-      return;
-    }
-    await loadProcesses();
-  } finally {
-    startBusy.value = false;
-  }
-}
-
-async function stop(id: string) {
-  await fetch(`/__nwire/run/stop/${encodeURIComponent(id)}`, { method: "POST" });
-  await loadProcesses();
-}
-
-async function forget(id: string) {
-  await fetch(`/__nwire/run/forget/${encodeURIComponent(id)}`, { method: "POST" });
-  if (selectedId.value === id) selectedId.value = null;
-  await loadProcesses();
-}
-
-function statusIcon(s: ManagedProcess["status"]) {
-  switch (s) {
-    case "running":
-      return { icon: CircleDot, color: "text-emerald-400" };
-    case "starting":
-      return { icon: Loader2, color: "text-amber-400 animate-spin" };
-    case "stopping":
-      return { icon: Loader2, color: "text-amber-400 animate-spin" };
-    case "exited":
-      return { icon: CheckCircle2, color: "text-zinc-500" };
-    case "crashed":
-      return { icon: AlertTriangle, color: "text-red-400" };
-    case "idle":
-      return { icon: Terminal, color: "text-zinc-500" };
-  }
-}
-
-watch(selectedId, (id) => {
-  if (es) {
-    es.close();
-    es = null;
-  }
-  logs.value = [];
-  if (!id) return;
-  es = new EventSource(`/__nwire/run/logs/${encodeURIComponent(id)}/stream`);
-  es.onmessage = (ev) => {
-    try {
-      const line = JSON.parse(ev.data) as LogLine;
-      logs.value = [...logs.value.slice(-1999), line];
-    } catch {
-      // ignore non-JSON keepalive comments
-    }
-  };
-});
-
-onMounted(async () => {
-  applyQueryPreselect();
-  await Promise.all([loadCommands(), loadProcesses()]);
-  processesPoll = setInterval(loadProcesses, 1500);
-});
-
-onUnmounted(() => {
-  if (es) es.close();
-  if (processesPoll) clearInterval(processesPoll);
-});
-
-const selectedProc = computed(() => processes.value.find((p) => p.id === selectedId.value) ?? null);
-</script>
-
-<template>
-  <div class="h-full flex">
-    <!-- Left: command picker -->
-    <div class="w-1/3 border-r border-zinc-800 flex flex-col">
-      <div class="border-b border-zinc-800 px-4 py-3">
-        <h1 class="text-lg font-semibold tracking-tight">Commands</h1>
-        <div class="mt-2">
-          <input
-            v-model="argsInput"
-            placeholder="extra args (optional, e.g. `units` for `nwire test units`)"
-            class="w-full bg-zinc-900 border border-zinc-800 rounded px-2 py-1.5 text-xs placeholder:text-zinc-600 focus:outline-none focus:border-zinc-600"
-          />
-        </div>
-        <div v-if="startError" class="text-xs text-red-400 mt-2">{{ startError }}</div>
-      </div>
-      <div class="flex-1 overflow-auto">
-        <button
-          v-for="c in commands"
-          :key="c.name"
-          class="w-full text-left px-4 py-2.5 border-b border-zinc-900 hover:bg-zinc-900/50 transition-colors"
-          :class="{ 'bg-zinc-900': selectedCommand === c.name }"
-          :data-testid="`command-row-${c.name}`"
-          :disabled="startBusy"
-          @click="exec(c.name)"
-        >
-          <div class="flex items-center gap-2">
-            <Play class="w-3 h-3 text-emerald-400 shrink-0" />
-            <span class="font-mono text-sm">nwire {{ c.name }}</span>
-          </div>
-          <div class="text-xs text-zinc-500 mt-1 ml-5">{{ c.description }}</div>
-        </button>
-      </div>
-    </div>
-
-    <!-- Middle: running processes -->
-    <div class="w-1/3 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="text-sm font-semibold tracking-tight">Active</h2>
-        <button class="text-xs text-zinc-500 hover:text-zinc-300" @click="loadProcesses">
-          <RefreshCw class="w-3 h-3 inline" />
-        </button>
-      </div>
-      <div class="flex-1 overflow-auto">
-        <div v-if="processes.length === 0" class="p-4 text-xs text-zinc-500">
-          Click a command on the left to launch it.
-        </div>
-        <button
-          v-for="p in processes"
-          :key="p.id"
-          class="w-full text-left px-4 py-2 border-b border-zinc-900 hover:bg-zinc-900/50"
-          :class="{ 'bg-zinc-900': selectedId === p.id }"
-          @click="selectedId = p.id"
-        >
-          <div class="flex items-center gap-2">
-            <component
-              :is="statusIcon(p.status).icon"
-              class="w-3 h-3 shrink-0"
-              :class="statusIcon(p.status).color"
-            />
-            <span class="font-mono text-sm truncate">{{ p.topology }}</span>
-          </div>
-          <div class="text-[10px] text-zinc-500 mt-1 ml-5">
-            {{ p.status }} · pid {{ p.pid ?? "—" }} · started {{ p.startedAt.slice(11, 19) }}
-          </div>
-        </button>
-      </div>
-    </div>
-
-    <!-- Right: live stdout -->
-    <div class="flex-1 flex flex-col">
-      <div class="border-b border-zinc-800 px-4 py-3 flex items-center justify-between">
-        <h2 class="text-sm font-semibold tracking-tight font-mono">
-          {{ selectedProc ? selectedProc.topology : "Output" }}
-        </h2>
-        <div v-if="selectedProc" class="flex items-center gap-2">
-          <button
-            v-if="selectedProc.status === 'running' || selectedProc.status === 'starting'"
-            class="text-xs text-zinc-400 hover:text-red-400"
-            @click="stop(selectedProc.id)"
-          >
-            <Square class="w-3 h-3 inline" /> stop
-          </button>
-          <button
-            class="text-xs text-zinc-400 hover:text-zinc-300"
-            @click="forget(selectedProc.id)"
-          >
-            <Trash2 class="w-3 h-3 inline" /> forget
-          </button>
-        </div>
-      </div>
-      <div class="flex-1 overflow-auto bg-zinc-950 font-mono text-xs p-4">
-        <div v-if="logs.length === 0" class="text-zinc-600">
-          Select a process to view its stdout.
-        </div>
-        <div
-          v-for="l in logs"
-          :key="l.seq"
-          :class="l.stream === 'stderr' ? 'text-red-400' : 'text-zinc-300'"
-        >
-          {{ l.line }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/src/pages/Events.vue

@@ -1,210 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useCache } from "@/lib/cache";
-import { Radio, Search, Lock, Globe, ArrowRight } from "lucide-vue-next";
-import { SchemaTree, SourcePill, SourceDrawer } from "@/components";
-
-const route = useRoute();
-const router = useRouter();
-const { cache } = useCache();
-const filter = ref("");
-const selected = ref<string | null>(null);
-const sourcePreview = ref<{ file: string; line: number; column?: number } | null>(null);
-
-function applyQueryPreselect(): void {
-  const name = route.query.name;
-  if (typeof name === "string" && name.length > 0) {
-    selected.value = name;
-  }
-}
-
-onMounted(applyQueryPreselect);
-watch(() => route.query.name, applyQueryPreselect);
-
-const filtered = computed(() => {
-  if (!cache.value) return [];
-  const q = filter.value.toLowerCase();
-  return cache.value.events.filter(
-    (e) =>
-      !q ||
-      e.name.toLowerCase().includes(q) ||
-      (e.description ?? "").toLowerCase().includes(q) ||
-      e.app.toLowerCase().includes(q),
-  );
-});
-
-const detail = computed(() => filtered.value.find((e) => e.name === selected.value) ?? null);
-
-/** Producers — graph edges where `to` is this event and via === "emits". */
-const producers = computed(() => {
-  if (!cache.value || !detail.value) return [];
-  return cache.value.graph.events
-    .filter((edge) => edge.to === detail.value!.name && edge.via === "emits")
-    .map((edge) => edge.from);
-});
-
-/** Consumers — graph edges where `from` is this event. */
-const consumers = computed(() => {
-  if (!cache.value || !detail.value) return [];
-  return cache.value.graph.events
-    .filter((edge) => edge.from === detail.value!.name)
-    .map((edge) => ({ name: edge.to, via: edge.via }));
-});
-
-function openProducer(name: string): void {
-  void router.push({ path: "/actions", query: { name } });
-}
-
-function openConsumer(c: { name: string; via: string }): void {
-  if (c.via === "folds") {
-    void router.push({ path: "/projections", query: { name: c.name } });
-  } else if (c.via === "subscribes") {
-    void router.push({ path: "/workflows", query: { name: c.name } });
-  } else if (c.via === "dispatches") {
-    void router.push({ path: "/actions", query: { name: c.name } });
-  }
-}
-
-/**
- * Payload schema — the scanner emits it on actions (`inputSchema`) but
- * not yet on events. Render whatever the manifest happens to carry
- * under `.schema` if anything; otherwise the SchemaTree slot just
- * doesn't render.
- */
-const detailSchema = computed<unknown>(() => {
-  const d = detail.value as { schema?: unknown } | null;
-  return d?.schema;
-});
-</script>
-
-<template>
-  <div v-if="cache" class="h-full flex">
-    <div class="w-2/5 border-r border-zinc-800 flex flex-col">
-      <div class="border-b border-zinc-800 px-4 py-3">
-        <h1 class="text-lg font-semibold tracking-tight">Events</h1>
-        <div class="relative mt-2">
-          <Search class="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500" />
-          <input
-            v-model="filter"
-            placeholder="filter…"
-            class="w-full bg-zinc-900 border border-zinc-800 rounded pl-7 pr-2 py-1.5 text-sm placeholder:text-zinc-600 focus:outline-none focus:border-zinc-600"
-          />
-        </div>
-        <div class="text-[10px] text-zinc-500 mt-1">
-          {{ filtered.length }} / {{ cache.events.length }}
-        </div>
-      </div>
-      <div class="flex-1 overflow-auto">
-        <button
-          v-for="e in filtered"
-          :key="`${e.app}::${e.name}`"
-          class="w-full text-left px-4 py-2.5 border-b border-zinc-900 hover:bg-zinc-900/50 transition-colors"
-          :class="{ 'bg-zinc-900': selected === e.name }"
-          @click="selected = e.name"
-        >
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-2 min-w-0">
-              <Radio class="w-3 h-3 text-purple-400 shrink-0" />
-              <span class="font-mono text-sm truncate">{{ e.name }}</span>
-            </div>
-            <component
-              :is="e.public ? Globe : Lock"
-              class="w-3 h-3 shrink-0"
-              :class="e.public ? 'text-emerald-400' : 'text-zinc-500'"
-              :title="e.public ? 'public — reaches outbound sinks' : 'private — stays in-process'"
-            />
-          </div>
-          <div v-if="e.description" class="text-xs text-zinc-500 mt-1 line-clamp-2 ml-5">
-            {{ e.description }}
-          </div>
-        </button>
-      </div>
-    </div>
-
-    <div class="flex-1 overflow-auto">
-      <div v-if="!detail" class="p-6 text-zinc-500 text-sm">Select an event to view its flow.</div>
-      <div v-else class="p-6 space-y-5">
-        <div>
-          <div class="text-[10px] uppercase tracking-wide text-zinc-500 flex items-center gap-2">
-            <span>{{ detail.app }}</span>
-            <span
-              class="px-1.5 py-0.5 rounded text-[10px] uppercase"
-              :class="
-                detail.public
-                  ? 'bg-emerald-950/50 border border-emerald-900 text-emerald-300'
-                  : 'bg-zinc-950/50 border border-zinc-800 text-zinc-400'
-              "
-            >
-              {{ detail.public ? "public" : "private" }}
-            </span>
-            <span v-if="detail.version" class="text-zinc-600">v{{ detail.version }}</span>
-          </div>
-          <h2 class="font-mono text-xl mt-1">{{ detail.name }}</h2>
-          <p v-if="detail.description" class="text-sm text-zinc-400 mt-2 max-w-2xl">
-            {{ detail.description }}
-          </p>
-        </div>
-
-        <div v-if="producers.length > 0 || consumers.length > 0">
-          <h3 class="text-xs uppercase tracking-wide text-zinc-500 mb-2">Flow</h3>
-          <div class="text-sm space-y-2">
-            <div v-if="producers.length > 0" class="flex items-start gap-2">
-              <span class="text-zinc-500 mt-0.5">Produced by:</span>
-              <div class="flex flex-wrap gap-1.5">
-                <button
-                  v-for="p in producers"
-                  :key="p"
-                  type="button"
-                  class="flex items-center gap-1 text-xs font-mono bg-zinc-900 border border-zinc-800 rounded px-1.5 py-0.5 hover:bg-zinc-800"
-                  @click="openProducer(p)"
-                >
-                  <ArrowRight class="w-2.5 h-2.5 text-amber-400" />
-                  {{ p }}
-                </button>
-              </div>
-            </div>
-            <div v-if="consumers.length > 0" class="flex items-start gap-2">
-              <span class="text-zinc-500 mt-0.5">Consumed by:</span>
-              <div class="flex flex-wrap gap-1.5">
-                <button
-                  v-for="(c, i) in consumers"
-                  :key="i"
-                  type="button"
-                  class="flex items-center gap-1 text-xs font-mono bg-zinc-900 border border-zinc-800 rounded px-1.5 py-0.5 hover:bg-zinc-800"
-                  @click="openConsumer(c)"
-                >
-                  <ArrowRight class="w-2.5 h-2.5 text-zinc-500" />
-                  {{ c.name }}
-                  <span class="text-[9px] uppercase text-zinc-500">{{ c.via }}</span>
-                </button>
-              </div>
-            </div>
-            <div
-              v-if="detail.audience && detail.audience.length > 0"
-              class="flex items-start gap-2"
-            >
-              <span class="text-zinc-500 mt-0.5">Audience:</span>
-              <div class="flex flex-wrap gap-1.5">
-                <span
-                  v-for="a in detail.audience"
-                  :key="a"
-                  class="text-xs font-mono bg-zinc-900 border border-zinc-800 rounded px-1.5 py-0.5"
-                >
-                  {{ a }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div v-if="detail.source" class="flex items-center gap-2">
-          <SourcePill :source="detail.source" @click="sourcePreview = detail.source!" />
-        </div>
-
-        <SchemaTree v-if="detailSchema" :schema="detailSchema" label="Payload schema" />
-      </div>
-    </div>
-    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
-  </div>
-</template>