@nwire/studio 0.9.1

package/src/pages/Hooks.vue

@@ -0,0 +1,297 @@
+<script setup lang="ts">
+/**
+ * Hooks — the unified extension-point primitive every nwire substrate now
+ * collapses onto. Each row in `cache.hooks` is one named hook with its
+ * chain + listener counts and the source location of `hook("name")`.
+ *
+ * Detail pane shows steady-state metadata + the live tap stream (last-N
+ * step observations) for the selected hook, fed by the running wire's
+ * `/_nwire/events/stream` channel under `kind: "hook.step"`.
+ */
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCache, type HookEntry } from "@/lib/cache";
+import { Activity, Boxes, Puzzle, RefreshCw, Search } from "lucide-vue-next";
+import { SourcePill, SourceDrawer } from "@/components";
+
+interface StepRecord {
+  readonly kind: "hook.step";
+  readonly hookName: string;
+  readonly hookId: string;
+  readonly runId: string;
+  readonly parentRunId?: string;
+  readonly stepId: number;
+  readonly stepKind: "chain" | "listener";
+  readonly stepName?: string;
+  readonly phase: "start" | "end" | "error";
+  readonly durationMs?: number;
+  readonly error?: { message?: string };
+  readonly ts: string;
+}
+
+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;
+  // Hooks select by id; query is by hook name. First name match wins.
+  const found = cache.value?.hooks.find((h) => h.name === name);
+  if (found) selected.value = found.id;
+}
+
+onMounted(applyQueryPreselect);
+watch(() => route.query.name, applyQueryPreselect);
+watch(() => cache.value, applyQueryPreselect);
+
+// ── Live tap stream ───────────────────────────────────────────────────
+const liveSteps = ref<StepRecord[]>([]);
+const streamStatus = ref<"connecting" | "open" | "closed" | "error">("connecting");
+let es: EventSource | null = null;
+
+onMounted(() => {
+  connect();
+});
+onUnmounted(() => {
+  es?.close();
+});
+
+function connect(): void {
+  streamStatus.value = "connecting";
+  es?.close();
+  es = new EventSource("/_nwire/telemetry/stream");
+  es.onopen = () => {
+    streamStatus.value = "open";
+  };
+  es.onerror = () => {
+    streamStatus.value = "error";
+  };
+  es.onmessage = (m) => {
+    try {
+      const rec = JSON.parse(m.data) as { kind?: string };
+      if (rec.kind !== "hook.step") return;
+      liveSteps.value.push(rec as StepRecord);
+      if (liveSteps.value.length > 500) liveSteps.value.splice(0, 200);
+    } catch {
+      /* ignore non-JSON frames */
+    }
+  };
+}
+
+const filteredHooks = computed<HookEntry[]>(() => {
+  if (!cache.value) return [];
+  const q = filter.value.toLowerCase();
+  return cache.value.hooks.filter(
+    (h) => !q || h.name.toLowerCase().includes(q) || h.id.toLowerCase().includes(q),
+  );
+});
+
+const detail = computed<HookEntry | null>(
+  () => cache.value?.hooks.find((h) => h.id === selected.value) ?? null,
+);
+
+const detailSteps = computed<StepRecord[]>(() => {
+  if (!detail.value) return [];
+  return liveSteps.value
+    .filter((s) => s.hookName === detail.value!.name)
+    .slice(-50)
+    .reverse();
+});
+
+/**
+ * Parse `plugin.boot:<name>` / `plugin.shutdown:<name>` → `<name>`.
+ * Used by the "Registered by" cross-link to /plugins?name=…
+ */
+const registeringPlugin = computed<string | null>(() => {
+  const n = detail.value?.name;
+  if (!n) return null;
+  for (const prefix of ["plugin.boot:", "plugin.shutdown:"]) {
+    if (n.startsWith(prefix)) return n.slice(prefix.length);
+  }
+  return null;
+});
+
+watch(detail, () => {
+  /* allow new selection to redraw */
+});
+</script>
+
+<template>
+  <div v-if="cache" class="h-full flex flex-col" data-testid="hooks-page">
+    <!-- Header -->
+    <div class="p-6 pb-3 border-b border-zinc-800 flex items-center justify-between">
+      <div>
+        <div class="flex items-center gap-2">
+          <Boxes class="w-4 h-4 text-orange-400" />
+          <h1 class="text-lg font-medium">Hooks</h1>
+          <span class="text-[10px] text-zinc-500">
+            {{ filteredHooks.length }} / {{ cache.hooks.length }}
+          </span>
+          <span
+            class="ml-2 text-[9px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-zinc-900 text-zinc-400"
+            data-testid="stream-status"
+          >
+            stream {{ streamStatus }}
+          </span>
+        </div>
+        <p class="text-xs text-zinc-500 mt-1">
+          Every extension point — middleware, lifecycle, listeners — built on one named hook. Live
+          taps stream from the running wire.
+        </p>
+      </div>
+      <button
+        class="p-1 rounded hover:bg-zinc-800 text-zinc-400"
+        title="Reconnect stream"
+        @click="connect"
+      >
+        <RefreshCw class="w-3.5 h-3.5" />
+      </button>
+    </div>
+
+    <!-- Master / detail -->
+    <div class="flex-1 flex min-h-0">
+      <!-- Master -->
+      <aside class="w-80 border-r border-zinc-800 flex flex-col shrink-0">
+        <div class="px-3 py-2 border-b border-zinc-800">
+          <div class="relative">
+            <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 text-xs placeholder:text-zinc-600 focus:outline-none focus:border-zinc-600"
+            />
+          </div>
+        </div>
+
+        <div v-if="filteredHooks.length === 0" class="p-4 text-xs text-zinc-500">
+          {{
+            cache.hooks.length === 0
+              ? "No hooks in cache. Did you rebuild after adding hook() calls?"
+              : "No hooks match the filter."
+          }}
+        </div>
+        <div v-else class="flex-1 overflow-auto">
+          <button
+            v-for="h in filteredHooks"
+            :key="h.id"
+            class="w-full text-left px-3 py-2 border-b border-zinc-900 hover:bg-zinc-900/50 transition-colors"
+            :class="{ 'bg-zinc-900/70': h.id === selected }"
+            @click="selected = h.id"
+          >
+            <div class="font-mono text-xs text-zinc-100 truncate">{{ h.name }}</div>
+            <div class="text-[10px] text-zinc-500 tabular-nums mt-0.5 flex gap-2">
+              <span>chain {{ h.chain }}</span>
+              <span>·</span>
+              <span>listeners {{ h.listeners }}</span>
+            </div>
+          </button>
+        </div>
+      </aside>
+
+      <!-- Detail -->
+      <main class="flex-1 flex flex-col min-w-0">
+        <div v-if="!detail" class="p-8 text-sm text-zinc-500 italic">
+          Select a hook to view its surface + live tap stream.
+        </div>
+        <div v-else class="flex-1 flex flex-col overflow-hidden">
+          <div class="px-6 py-5 border-b border-zinc-800">
+            <div class="flex items-center gap-3 flex-wrap">
+              <h2 class="font-mono text-xl">{{ detail.name }}</h2>
+              <span class="text-[10px] text-zinc-500 font-mono">{{ detail.id }}</span>
+              <button
+                v-if="detail.source"
+                type="button"
+                class="ml-auto inline-flex items-center"
+                @click="sourcePreview = detail.source!"
+              >
+                <SourcePill :source="detail.source" />
+              </button>
+            </div>
+            <div class="text-[11px] text-zinc-500 mt-2 flex gap-4 tabular-nums">
+              <span>{{ detail.chain }} chain step{{ detail.chain === 1 ? "" : "s" }}</span>
+              <span>{{ detail.listeners }} listener{{ detail.listeners === 1 ? "" : "s" }}</span>
+            </div>
+            <div v-if="registeringPlugin" class="mt-2 flex items-center gap-2 text-xs">
+              <span class="text-zinc-500">Registered by</span>
+              <button
+                type="button"
+                class="inline-flex items-center gap-1 font-mono text-fuchsia-300 hover:underline"
+                :data-testid="`plugin-link-${registeringPlugin}`"
+                @click="router.push({ path: '/plugins', query: { name: registeringPlugin } })"
+              >
+                <Puzzle class="w-3 h-3" />
+                {{ registeringPlugin }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Live tap stream -->
+          <div class="flex-1 overflow-auto">
+            <div class="px-6 py-3 border-b border-zinc-900 flex items-center gap-2">
+              <Activity class="w-3.5 h-3.5 text-emerald-400" />
+              <h3 class="text-xs uppercase tracking-wide text-zinc-400">Live taps</h3>
+              <span class="text-[10px] text-zinc-500 tabular-nums">
+                {{ detailSteps.length }} recent
+              </span>
+            </div>
+            <div
+              v-if="detailSteps.length === 0"
+              class="p-6 text-xs text-zinc-500 italic"
+              data-testid="hooks-empty-tap"
+            >
+              No tap data yet. Trigger an action through the running wire and observations will
+              appear here.
+            </div>
+            <ul v-else class="divide-y divide-zinc-900" data-testid="hooks-tap-list">
+              <li
+                v-for="(s, i) in detailSteps"
+                :key="`${s.runId}:${s.stepId}:${s.phase}:${i}`"
+                class="px-6 py-1.5 flex items-center gap-3 font-mono text-[11px] hover:bg-zinc-900/30"
+              >
+                <span class="text-zinc-600 tabular-nums w-20 shrink-0">
+                  {{ new Date(s.ts).toLocaleTimeString(undefined, { hour12: false }) }}
+                </span>
+                <span
+                  class="w-12 text-[10px] uppercase tracking-wide shrink-0"
+                  :class="{
+                    'text-zinc-400': s.phase === 'start',
+                    'text-emerald-400': s.phase === 'end',
+                    'text-red-400': s.phase === 'error',
+                  }"
+                  >{{ s.phase }}</span
+                >
+                <span
+                  class="w-16 text-[10px] uppercase tracking-wide shrink-0"
+                  :class="s.stepKind === 'chain' ? 'text-cyan-400' : 'text-amber-400'"
+                  >{{ s.stepKind }}</span
+                >
+                <span class="text-zinc-200 truncate flex-1">
+                  {{ s.stepName ?? `#${s.stepId}` }}
+                </span>
+                <span v-if="s.durationMs !== undefined" class="text-zinc-500 tabular-nums shrink-0">
+                  {{ s.durationMs.toFixed(1) }} ms
+                </span>
+                <span
+                  v-if="s.error"
+                  class="text-red-400 truncate max-w-40 shrink-0"
+                  :title="s.error.message"
+                >
+                  {{ s.error.message }}
+                </span>
+                <span class="text-zinc-600 text-[10px] tabular-nums shrink-0">
+                  run {{ s.runId.split("-")[0] }}
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
+  </div>
+</template>

package/src/pages/Live.vue

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import {
+  Radio,
+  PlayCircle,
+  PauseCircle,
+  Trash2,
+  Filter,
+  Network,
+  Globe,
+  Search,
+} from "lucide-vue-next";
+
+interface BufferedEvent {
+  seq: number;
+  eventName: string;
+  payload: unknown;
+  envelope: {
+    messageId: string;
+    correlationId: string;
+    causationId: string;
+    tenant?: string;
+    userId?: string;
+    timestamp: string;
+    version: number;
+  };
+  source: "in-process" | "external";
+  appName: string;
+  capturedAt: string;
+}
+
+const events = ref<BufferedEvent[]>([]);
+const paused = ref(false);
+const filter = ref("");
+const selectedCorrelation = ref<string | null>(null);
+const status = ref<"connecting" | "open" | "closed" | "error">("connecting");
+let es: EventSource | null = null;
+
+onMounted(() => {
+  connect();
+});
+
+onUnmounted(() => {
+  es?.close();
+});
+
+function connect() {
+  status.value = "connecting";
+  es?.close();
+  es = new EventSource("/_nwire/events/stream");
+  es.onopen = () => {
+    status.value = "open";
+  };
+  es.onerror = () => {
+    status.value = "error";
+  };
+  es.onmessage = (msg) => {
+    if (paused.value) return;
+    try {
+      const evt = JSON.parse(msg.data) as BufferedEvent;
+      events.value.unshift(evt);
+      if (events.value.length > 1000) events.value.pop();
+    } catch (err) {
+      console.error("bad event", err);
+    }
+  };
+}
+
+function reconnect() {
+  connect();
+}
+
+function clear() {
+  events.value = [];
+}
+
+const filtered = computed(() => {
+  const q = filter.value.toLowerCase();
+  return events.value.filter((e) => {
+    if (selectedCorrelation.value && e.envelope.correlationId !== selectedCorrelation.value) {
+      return false;
+    }
+    if (!q) return true;
+    return (
+      e.eventName.toLowerCase().includes(q) ||
+      e.envelope.messageId.toLowerCase().includes(q) ||
+      e.envelope.correlationId.toLowerCase().includes(q) ||
+      (e.envelope.tenant?.toLowerCase().includes(q) ?? false) ||
+      (e.envelope.userId?.toLowerCase().includes(q) ?? false)
+    );
+  });
+});
+
+const selectedTrace = computed(() => {
+  if (!selectedCorrelation.value) return [];
+  return events.value
+    .filter((e) => e.envelope.correlationId === selectedCorrelation.value)
+    .sort((a, b) => a.seq - b.seq);
+});
+
+function shortId(id: string): string {
+  return id.split("-")[0] ?? id.slice(0, 8);
+}
+</script>
+
+<template>
+  <div class="h-full flex">
+    <!-- Stream column -->
+    <div class="flex-1 flex flex-col border-r border-zinc-800 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">
+          <Radio
+            class="w-5 h-5 shrink-0"
+            :class="{
+              'text-emerald-400 animate-pulse': status === 'open' && !paused,
+              'text-zinc-400': paused,
+              'text-amber-400': status === 'connecting',
+              'text-rose-400': status === 'error' || status === 'closed',
+            }"
+          />
+          <h1 class="font-semibold text-lg truncate">Live</h1>
+          <span
+            class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-zinc-900 text-zinc-400"
+          >
+            {{ status }}
+          </span>
+          <span class="text-xs text-zinc-500 tabular-nums"
+            >{{ filtered.length }} / {{ events.length }}</span
+          >
+        </div>
+        <div class="flex items-center gap-1 shrink-0">
+          <button
+            class="p-1.5 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100"
+            :title="paused ? 'Resume' : 'Pause'"
+            @click="paused = !paused"
+          >
+            <PlayCircle v-if="paused" class="w-4 h-4 text-emerald-400" />
+            <PauseCircle v-else class="w-4 h-4" />
+          </button>
+          <button
+            class="p-1.5 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100"
+            title="Clear"
+            @click="clear"
+          >
+            <Trash2 class="w-4 h-4" />
+          </button>
+          <button
+            v-if="status === 'error' || status === 'closed'"
+            class="px-2 py-1 rounded text-xs bg-zinc-800 hover:bg-zinc-700"
+            @click="reconnect"
+          >
+            Reconnect
+          </button>
+        </div>
+      </div>
+
+      <div class="px-4 py-2 border-b border-zinc-800 flex items-center gap-2">
+        <div class="relative flex-1">
+          <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 event name / id / tenant / user…"
+            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>
+        <button
+          v-if="selectedCorrelation"
+          class="text-xs px-2 py-1 rounded bg-purple-950/50 border border-purple-900 text-purple-300 hover:bg-purple-900/50"
+          @click="selectedCorrelation = null"
+        >
+          <Filter class="w-3 h-3 inline mr-1" />
+          clear trace filter
+        </button>
+      </div>
+
+      <div class="flex-1 overflow-auto">
+        <div v-if="filtered.length === 0" class="p-6 text-sm text-zinc-500">
+          {{ events.length === 0 ? "Waiting for events…" : "No events match the filter." }}
+        </div>
+        <button
+          v-for="evt in filtered"
+          :key="evt.seq"
+          class="w-full text-left px-4 py-2 border-b border-zinc-900 hover:bg-zinc-900/50 transition-colors"
+          :class="{
+            'bg-zinc-900/70':
+              selectedCorrelation && evt.envelope.correlationId === selectedCorrelation,
+          }"
+          @click="selectedCorrelation = evt.envelope.correlationId"
+        >
+          <div class="flex items-center justify-between gap-3">
+            <div class="flex items-center gap-2 min-w-0">
+              <component
+                :is="evt.source === 'external' ? Network : Globe"
+                class="w-3 h-3 shrink-0"
+                :class="evt.source === 'external' ? 'text-purple-400' : 'text-emerald-400'"
+              />
+              <span class="font-mono text-sm truncate">{{ evt.eventName }}</span>
+              <span class="text-[10px] text-zinc-500 shrink-0">{{ evt.appName }}</span>
+            </div>
+            <span class="text-[10px] text-zinc-500 tabular-nums shrink-0">
+              {{ new Date(evt.capturedAt).toLocaleTimeString() }}
+            </span>
+          </div>
+          <div class="text-[10px] text-zinc-500 font-mono mt-0.5 truncate">
+            msg {{ shortId(evt.envelope.messageId) }} · corr
+            {{ shortId(evt.envelope.correlationId) }}
+            <span v-if="evt.envelope.tenant">· tenant {{ evt.envelope.tenant }}</span>
+            <span v-if="evt.envelope.userId">· user {{ evt.envelope.userId }}</span>
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- Trace column -->
+    <div class="w-1/2 flex flex-col">
+      <div class="border-b border-zinc-800 px-4 py-3">
+        <h2 class="text-sm font-medium tracking-tight">
+          {{ selectedCorrelation ? "Trace" : "Details" }}
+        </h2>
+        <p v-if="selectedCorrelation" class="text-[10px] text-zinc-500 font-mono mt-0.5">
+          corr {{ selectedCorrelation }}
+        </p>
+        <p v-else class="text-xs text-zinc-500 mt-0.5">Click an event to see its causation tree.</p>
+      </div>
+      <div class="flex-1 overflow-auto p-4 space-y-2">
+        <div v-for="(evt, i) in selectedTrace" :key="evt.seq" class="relative pl-4">
+          <div
+            class="absolute left-1 top-0 bottom-0 w-px bg-zinc-800"
+            v-if="i < selectedTrace.length - 1"
+          ></div>
+          <div class="absolute left-0 top-2.5 w-2 h-2 rounded-full bg-emerald-400"></div>
+          <div class="rounded border border-zinc-800 bg-zinc-900/40 p-3">
+            <div class="flex items-center justify-between mb-1">
+              <span class="font-mono text-sm">{{ evt.eventName }}</span>
+              <span class="text-[10px] text-zinc-500">{{ evt.appName }}</span>
+            </div>
+            <div class="text-[10px] text-zinc-500 font-mono mb-2">
+              msg {{ shortId(evt.envelope.messageId) }} ← caused by
+              {{ shortId(evt.envelope.causationId) }}
+            </div>
+            <pre class="text-[11px] bg-zinc-950 border border-zinc-800 rounded p-2 overflow-auto">{{
+              JSON.stringify(evt.payload, null, 2)
+            }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>