@nwire/studio 0.10.0 → 0.11.0

package/src/pages/Queries.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+/**
+ * Queries — read endpoints over the CQRS surface. Each query reads from
+ * a projection (eventually consistent over events) or runs a handler
+ * (anything outside the projection store).
+ */
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCache } from "@/lib/cache";
+import { Search, Database, Globe, Lock } from "lucide-vue-next";
+import {
+  PageHeader,
+  FilterInput,
+  KindBadge,
+  EmptyState,
+  MasterDetail,
+  SourcePill,
+  SourceDrawer,
+  ListRow,
+} 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) return;
+  const found = cache.value?.queries.find((q) => q.name === name);
+  if (found) selected.value = `${found.app}::${found.name}`;
+}
+
+onMounted(applyQueryPreselect);
+watch(() => route.query.name, applyQueryPreselect);
+watch(() => cache.value, applyQueryPreselect);
+
+const filtered = computed(() => {
+  if (!cache.value) return [];
+  const q = filter.value.toLowerCase();
+  return cache.value.queries.filter(
+    (qe) =>
+      !q ||
+      qe.name.toLowerCase().includes(q) ||
+      qe.app.toLowerCase().includes(q) ||
+      (qe.projection ?? "").toLowerCase().includes(q),
+  );
+});
+
+const key = (q: { app: string; name: string }) => `${q.app}::${q.name}`;
+const detail = computed(() => filtered.value.find((q) => key(q) === selected.value) ?? null);
+</script>
+
+<template>
+  <div v-if="cache" class="h-full flex flex-col" data-testid="queries-page">
+    <div class="p-6 pb-3 border-b border-zinc-800">
+      <PageHeader
+        title="Queries"
+        subtitle="Read endpoints — projection-backed or direct-handler."
+        :icon="Search"
+        icon-color="text-emerald-400"
+        :count="filtered.length"
+        :total="cache.queries.length"
+      />
+    </div>
+
+    <EmptyState
+      v-if="cache.queries.length === 0"
+      title="No queries in cache"
+      hint="Queries are declared via defineQuery(projection, { name, input, execute }) or defineQuery({ name, input, handler })."
+      :icon="Search"
+    />
+
+    <MasterDetail v-else class="flex-1">
+      <template #listHeader>
+        <FilterInput v-model="filter" placeholder="filter by name, app, projection…" />
+      </template>
+
+      <template #list>
+        <ListRow
+          v-for="q in filtered"
+          :key="key(q)"
+          :selected="selected === key(q)"
+          @click="selected = key(q)"
+        >
+          <template #title>
+            <Search class="w-3 h-3 text-emerald-400 shrink-0" />
+            <span class="font-mono text-sm truncate">{{ q.name }}</span>
+          </template>
+          <template #meta>
+            <component
+              :is="q.public ? Globe : Lock"
+              class="w-3 h-3"
+              :class="q.public ? 'text-emerald-400' : 'text-zinc-500'"
+              :title="q.public ? 'public — exposed across the system' : 'private'"
+            />
+            <span class="text-[10px] text-zinc-500">{{ q.app }}</span>
+          </template>
+          <template v-if="q.projection" #description>
+            <div>
+              <span class="text-zinc-500">reads</span>
+              <span class="font-mono ml-1">{{ q.projection }}</span>
+            </div>
+          </template>
+        </ListRow>
+      </template>
+
+      <template #empty>Select a query to view its projection and source.</template>
+
+      <template v-if="detail" #detail>
+        <div class="p-6 space-y-5" data-testid="query-detail">
+          <div>
+            <div class="text-[10px] uppercase tracking-wide text-zinc-500">{{ detail.app }}</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">
+            <KindBadge :variant="detail.public ? 'public' : 'private'">
+              {{ detail.public ? "public" : "private" }}
+            </KindBadge>
+          </div>
+
+          <div v-if="detail.projection" class="space-y-3">
+            <h3 class="text-xs uppercase tracking-wide text-zinc-500">Reads from</h3>
+            <button
+              type="button"
+              class="flex items-center gap-2 font-mono text-sm text-left hover:text-cyan-300"
+              @click="router.push({ path: '/projections', query: { name: detail.projection } })"
+            >
+              <Database class="w-3.5 h-3.5 text-cyan-400" />
+              <span class="underline-offset-2 hover:underline">{{ detail.projection }}</span>
+            </button>
+          </div>
+
+          <div v-if="detail.source" class="pt-2">
+            <SourcePill :source="detail.source" @click="sourcePreview = detail.source!" />
+          </div>
+        </div>
+      </template>
+    </MasterDetail>
+    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
+  </div>
+</template>

package/src/pages/Run.vue

@@ -32,6 +32,10 @@ interface ManagedProcess {
   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 {
@@ -50,6 +54,30 @@ 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");
 
@@ -102,10 +130,12 @@ 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 }),
+      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) {
@@ -145,7 +175,14 @@ async function start() {
     const res = await fetch("/__nwire/run/start", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ topology: startTopology.value, port: startPort.value }),
+      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) {
@@ -262,7 +299,48 @@ function timeAgo(iso: string): string {
           /_nwire/* → static fallback
         </div>
       </div>
-      <div class="p-4 space-y-3">
+      <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
@@ -270,7 +348,6 @@ function timeAgo(iso: string): string {
             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>
@@ -305,6 +382,62 @@ function timeAgo(iso: string): string {
           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. -->
@@ -388,10 +521,16 @@ function timeAgo(iso: string): string {
             </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">
+          <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 }}

package/src/pages/Sinks.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+/**
+ * Sinks — outbound delivery surface. Each sink is a stage on the
+ * runtime's outbound chain (early → middle → terminal). Endpoint
+ * adapters install them at boot via `ctx.installSinkStage`.
+ */
+import { computed, ref } from "vue";
+import { useCache } from "@/lib/cache";
+import { Waves, ArrowRight } from "lucide-vue-next";
+import {
+  PageHeader,
+  FilterInput,
+  EmptyState,
+  MasterDetail,
+  KindBadge,
+  ListRow,
+} from "@/components";
+
+const { cache } = useCache();
+const filter = ref("");
+const selected = ref<string | null>(null);
+
+const sinks = computed(() => cache.value?.sinks ?? []);
+
+const filtered = computed(() => {
+  if (!cache.value) return [];
+  const q = filter.value.toLowerCase();
+  return sinks.value.filter(
+    (s) =>
+      !q ||
+      s.name.toLowerCase().includes(q) ||
+      s.app.toLowerCase().includes(q) ||
+      (s.kind ?? "").toLowerCase().includes(q),
+  );
+});
+
+const key = (s: { app: string; name: string }) => `${s.app}::${s.name}`;
+const detail = computed(() => filtered.value.find((s) => key(s) === selected.value) ?? null);
+
+const positionVariant = (p: "early" | "middle" | "terminal") =>
+  p === "terminal" ? "public" : p === "middle" ? "neutral" : "private";
+</script>
+
+<template>
+  <div v-if="cache" class="h-full flex flex-col" data-testid="sinks-page">
+    <div class="p-6 pb-3 border-b border-zinc-800">
+      <PageHeader
+        title="Sinks"
+        subtitle="Outbound stages — every step in the runtime's outbound delivery chain."
+        :icon="Waves"
+        icon-color="text-amber-400"
+        :count="filtered.length"
+        :total="sinks.length"
+      />
+    </div>
+
+    <EmptyState
+      v-if="sinks.length === 0"
+      title="No outbound sinks installed"
+      hint="Outbound adapters (queue publisher, NATS, webhook, OTLP) install sinks at endpoint boot via ctx.installSinkStage. Apps without one keep events in-process."
+      :icon="Waves"
+    />
+
+    <MasterDetail v-else class="flex-1">
+      <template #listHeader>
+        <FilterInput v-model="filter" placeholder="filter by name, app, kind…" />
+      </template>
+
+      <template #list>
+        <ListRow
+          v-for="s in filtered"
+          :key="key(s)"
+          :selected="selected === key(s)"
+          @click="selected = key(s)"
+        >
+          <template #title>
+            <Waves class="w-3 h-3 text-amber-400 shrink-0" />
+            <span class="font-mono text-sm truncate">{{ s.name }}</span>
+          </template>
+          <template #meta>
+            <KindBadge :variant="positionVariant(s.position)">{{ s.position }}</KindBadge>
+            <span class="text-[10px] text-zinc-500">{{ s.app }}</span>
+          </template>
+          <template v-if="s.kind" #description>
+            <span class="text-zinc-500">kind</span>
+            <span class="ml-1 font-mono">{{ s.kind }}</span>
+          </template>
+        </ListRow>
+      </template>
+
+      <template #empty>Select a sink to see its position and adapter kind.</template>
+
+      <template v-if="detail" #detail>
+        <div class="p-6 space-y-5" data-testid="sink-detail">
+          <div>
+            <div class="text-[10px] uppercase tracking-wide text-zinc-500">{{ detail.app }}</div>
+            <h2 class="font-mono text-xl mt-1">{{ detail.name }}</h2>
+          </div>
+
+          <div class="flex flex-wrap gap-2">
+            <KindBadge :variant="positionVariant(detail.position)">
+              {{ detail.position }}
+            </KindBadge>
+            <KindBadge variant="neutral">{{ detail.direction }}</KindBadge>
+            <KindBadge v-if="detail.kind" variant="neutral">kind: {{ detail.kind }}</KindBadge>
+          </div>
+
+          <div class="text-xs text-zinc-400 max-w-xl space-y-2">
+            <p>
+              <ArrowRight class="w-3 h-3 inline mr-1 text-amber-400" />
+              Every public event the App publishes runs through the outbound chain in
+              <em>position</em> order: early → middle → terminal. Terminal stages do the transport
+              delivery; early/middle do logging, metrics, routing.
+            </p>
+            <p v-if="detail.position === 'terminal'">
+              Only one terminal stage per <em>kind</em> is allowed — the runtime rejects a second
+              registration. Swap implementations by installing a different kind.
+            </p>
+          </div>
+        </div>
+      </template>
+    </MasterDetail>
+  </div>
+</template>