@nwire/studio 0.9.1

package/src/pages/Actions.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCache } from "@/lib/cache";
+import { Search, Zap, Shield, Globe, Lock, Anchor, Activity } 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.actions.filter(
+    (a) =>
+      !q ||
+      a.name.toLowerCase().includes(q) ||
+      (a.description ?? "").toLowerCase().includes(q) ||
+      a.module.toLowerCase().includes(q) ||
+      a.app.toLowerCase().includes(q),
+  );
+});
+
+const detail = computed(() => filtered.value.find((a) => a.name === selected.value) ?? null);
+</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">Actions</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 by name, module, app, description…"
+            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.actions.length }}
+        </div>
+      </div>
+      <div class="flex-1 overflow-auto">
+        <button
+          v-for="a in filtered"
+          :key="`${a.app}::${a.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 === a.name }"
+          @click="selected = a.name"
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2 min-w-0">
+              <Zap class="w-3 h-3 text-amber-400 shrink-0" />
+              <span class="font-mono text-sm truncate">{{ a.name }}</span>
+            </div>
+            <div class="flex items-center gap-1 shrink-0">
+              <Shield v-if="a.policy" class="w-3 h-3 text-blue-400" />
+              <component
+                :is="a.public ? Globe : Lock"
+                class="w-3 h-3"
+                :class="a.public ? 'text-emerald-400' : 'text-zinc-500'"
+                :title="
+                  a.public ? 'public — other modules may dispatch' : 'private — module-internal'
+                "
+              />
+              <span class="text-[10px] text-zinc-500">{{ a.app }}</span>
+            </div>
+          </div>
+          <div v-if="a.description" class="text-xs text-zinc-500 mt-1 line-clamp-2 ml-5">
+            {{ a.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 action to view its schema and metadata.
+      </div>
+      <div v-else class="p-6 space-y-5">
+        <div>
+          <div class="text-[10px] uppercase tracking-wide text-zinc-500">
+            {{ detail.app }} · {{ detail.module }}
+          </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 class="flex flex-wrap gap-2">
+          <span
+            v-if="detail.hasInlineHandler"
+            class="text-[10px] uppercase tracking-wide px-2 py-0.5 rounded bg-emerald-950/50 border border-emerald-900 text-emerald-300"
+          >
+            inline handler
+          </span>
+          <span
+            v-if="detail.retry"
+            class="text-[10px] uppercase tracking-wide px-2 py-0.5 rounded bg-amber-950/50 border border-amber-900 text-amber-300"
+          >
+            retry
+          </span>
+          <span
+            v-if="detail.policy"
+            class="text-[10px] uppercase tracking-wide px-2 py-0.5 rounded bg-blue-950/50 border border-blue-900 text-blue-300"
+          >
+            policy: {{ detail.policy }}
+          </span>
+        </div>
+
+        <div v-if="detail.persona || detail.journeyStep" class="text-xs space-y-1 text-zinc-400">
+          <div v-if="detail.persona" class="flex items-center gap-2">
+            <span class="text-zinc-500 w-24">Persona</span>
+            <span class="font-mono">{{ detail.persona }}</span>
+          </div>
+          <div v-if="detail.journeyStep" class="flex items-center gap-2">
+            <span class="text-zinc-500 w-24">Journey step</span>
+            <span class="font-mono">{{ detail.journeyStep }}</span>
+          </div>
+        </div>
+
+        <div v-if="detail.source" class="flex items-center gap-2">
+          <button
+            type="button"
+            class="inline-flex items-center"
+            @click="sourcePreview = detail.source!"
+          >
+            <SourcePill :source="detail.source" />
+          </button>
+        </div>
+
+        <SchemaTree :schema="detail.schema" label="Input schema" />
+
+        <div class="flex flex-wrap gap-2">
+          <button
+            type="button"
+            class="inline-flex items-center gap-1.5 text-xs px-2 py-1 rounded border border-zinc-800 bg-zinc-900/50 hover:bg-zinc-800/70 text-zinc-300"
+            :data-testid="`hooks-link-${detail.name}`"
+            @click="
+              router.push({ path: '/hooks', query: { name: `action.before:${detail.name}` } })
+            "
+          >
+            <Anchor class="w-3 h-3 text-zinc-500" />
+            View hooks
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center gap-1.5 text-xs px-2 py-1 rounded border border-zinc-800 bg-zinc-900/50 hover:bg-zinc-800/70 text-zinc-300"
+            :data-testid="`trace-link-${detail.name}`"
+            @click="router.push({ path: '/trace', query: { action: detail.name } })"
+          >
+            <Activity class="w-3 h-3 text-zinc-500" />
+            Recent traces of this
+          </button>
+        </div>
+
+        <div class="text-xs text-zinc-500">
+          Use the Try page for form-from-schema dispatch against the live runtime.
+        </div>
+      </div>
+    </div>
+    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
+  </div>
+</template>

package/src/pages/Commands.vue

@@ -0,0 +1,262 @@
+<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>