@nwire/studio 0.12.0 → 0.13.0

package/src/pages/Hooks.stories.ts

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { createRouter, createMemoryHistory } from "vue-router";
+import Hooks from "./Hooks.vue";
+
+/**
+ * Storybook for the Hooks page. The manifest fetch + telemetry stream fail
+ * inside Storybook, so the page degrades to its empty / no-live-tap state —
+ * exactly the surface we want to document.
+ */
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes: [
+    { path: "/hooks", name: "hooks", component: Hooks },
+    { path: "/plugins", name: "plugins", component: { template: "<div/>" } },
+  ],
+});
+
+const meta: Meta<typeof Hooks> = {
+  title: "Pages/Hooks",
+  component: Hooks,
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div class="h-screen bg-zinc-950 text-zinc-100"><story /></div>',
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    vueRouter: { router },
+  },
+  render: () => ({
+    components: { Hooks },
+    setup() {
+      return {};
+    },
+    template: "<Hooks />",
+  }),
+};
+export default meta;
+
+type Story = StoryObj<typeof Hooks>;
+
+/** Default: no wire running — empty registry + idle tap. */
+export const NoLiveData: Story = {};

package/src/pages/Hooks.vue

@@ -1,127 +1,108 @@
 <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")`.
+ * Hooks — the unified extension-point primitive every nwire substrate collapses
+ * onto. Each row is one named hook from the deep manifest's runtime topology
+ * (`topology.hooks`: name + chain/listener counts), read natively via
+ * `useManifest`.
  *
- * 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"`.
+ * Detail pane shows steady-state metadata (MetadataInspector) plus the LIVE
+ * hook-tap: per-hook fire activity sourced from `hook.step` telemetry
+ * (`useTelemetry`), keyed by hook name. A `plugin.boot:<n>` / `plugin.shutdown:<n>`
+ * hook cross-links to `/plugins?name=<n>` ("Registered by").
  */
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, onMounted, 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;
-}
+import { useManifest } from "@/composables/useManifest";
+import { useProject } from "@/composables/useProject";
+import { useTelemetry } from "@/composables/useTelemetry";
+import { hookRegistry, registeringPlugin, liveFireTally, type HookRow } from "@/lib/topology-view";
+import { MetadataInspector, SourcePill, SourceDrawer } from "@/components";
 
 const route = useRoute();
 const router = useRouter();
-const { cache } = useCache();
+const { activeCwd } = useProject();
+const { view, isError, error, refetch } = useManifest(activeCwd);
+const { records, status: streamStatus, recent } = useTelemetry(activeCwd);
+
 const filter = ref("");
 const selected = ref<string | null>(null);
-const sourcePreview = ref<{ file: string; line: number; column?: number } | null>(null);
+const sourcePreview = ref<{ file: string; line?: number; column?: number } | null>(null);
+
+const hooks = computed<HookRow[]>(() => hookRegistry(view.value));
+
+const filteredHooks = computed<HookRow[]>(() => {
+  const q = filter.value.toLowerCase();
+  return hooks.value.filter((h) => !q || h.name.toLowerCase().includes(q));
+});
 
+const detail = computed<HookRow | null>(
+  () => hooks.value.find((h) => h.id === selected.value) ?? null,
+);
+
+// ── Deep-link preselect: /hooks?name=<hookName> → first name match. ───────
 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);
+  const found = hooks.value.find((h) => h.name === name);
   if (found) selected.value = found.id;
 }
-
 onMounted(applyQueryPreselect);
 watch(() => route.query.name, applyQueryPreselect);
-watch(() => cache.value, applyQueryPreselect);
+watch(hooks, 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();
-});
+// ── Live hook-tap: fire tally per hook name, from `hook.step` telemetry. ──
+const fireTally = computed(() => liveFireTally(records.value));
 
-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 */
-    }
-  };
+function firesFor(name: string): number {
+  return fireTally.value.get(name)?.fires ?? 0;
 }
+function lastFiredFor(name: string): string | undefined {
+  return fireTally.value.get(name)?.lastTs;
+}
+const totalFires = computed(() => recent("hook.step").length);
 
-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[]>(() => {
+// The selected hook's recent live steps, newest first.
+const detailSteps = computed(() => {
   if (!detail.value) return [];
-  return liveSteps.value
-    .filter((s) => s.hookName === detail.value!.name)
+  const name = detail.value.name;
+  return recent("hook.step")
+    .filter((r) => (r as Record<string, unknown>).hookName === 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;
-});
+const registeredBy = computed<string | null>(() => registeringPlugin(detail.value?.name));
 
-watch(detail, () => {
-  /* allow new selection to redraw */
+const detailMeta = computed(() => {
+  if (!detail.value) return null;
+  return {
+    name: detail.value.name,
+    id: detail.value.id,
+    chainSteps: detail.value.chain,
+    listeners: detail.value.listeners,
+    liveFires: firesFor(detail.value.name),
+    lastFired: lastFiredFor(detail.value.name) ?? null,
+  };
 });
+
+function fmtTime(ts: string | undefined): string {
+  if (!ts) return "—";
+  const d = new Date(ts);
+  return Number.isNaN(d.getTime()) ? "—" : d.toLocaleTimeString(undefined, { hour12: false });
+}
+function stepField(rec: unknown, key: string): string {
+  const v = (rec as Record<string, unknown>)[key];
+  return v == null ? "" : String(v);
+}
+function durationMsOf(rec: unknown): number | null {
+  const v = (rec as Record<string, unknown>).durationMs;
+  return typeof v === "number" ? v : null;
+}
 </script>
 
 <template>
-  <div v-if="cache" class="h-full flex flex-col" data-testid="hooks-page">
+  <div 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>
@@ -129,13 +110,20 @@ watch(detail, () => {
           <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 }}
+            {{ filteredHooks.length }} / {{ 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 }}
+            tap {{ streamStatus }}
+          </span>
+          <span
+            v-if="totalFires > 0"
+            class="text-[9px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-emerald-950 text-emerald-300"
+            data-testid="hooks-total-fires"
+          >
+            {{ totalFires }} live fires
           </span>
         </div>
         <p class="text-xs text-zinc-500 mt-1">
@@ -145,15 +133,20 @@ watch(detail, () => {
       </div>
       <button
         class="p-1 rounded hover:bg-zinc-800 text-zinc-400"
-        title="Reconnect stream"
-        @click="connect"
+        title="Refetch manifest"
+        @click="() => refetch()"
       >
         <RefreshCw class="w-3.5 h-3.5" />
       </button>
     </div>
 
+    <!-- Error -->
+    <div v-if="isError" class="p-6 text-xs text-zinc-500" data-testid="hooks-error">
+      {{ error ?? "Couldn't load the manifest. Run `nwire cache` to build it." }}
+    </div>
+
     <!-- Master / detail -->
-    <div class="flex-1 flex min-h-0">
+    <div v-else 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">
@@ -162,6 +155,7 @@ watch(detail, () => {
             <input
               v-model="filter"
               placeholder="filter…"
+              data-testid="hooks-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>
@@ -169,12 +163,12 @@ watch(detail, () => {
 
         <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?"
+            hooks.length === 0
+              ? "No hooks in the manifest. Did you rebuild after adding hook() calls?"
               : "No hooks match the filter."
           }}
         </div>
-        <div v-else class="flex-1 overflow-auto">
+        <div v-else class="flex-1 overflow-auto" data-testid="hooks-list">
           <button
             v-for="h in filteredHooks"
             :key="h.id"
@@ -182,7 +176,18 @@ watch(detail, () => {
             :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="flex items-center gap-2">
+              <span class="font-mono text-xs text-zinc-100 truncate flex-1">{{ h.name }}</span>
+              <span
+                v-if="firesFor(h.name) > 0"
+                class="inline-flex items-center gap-1 text-[10px] text-emerald-400 tabular-nums shrink-0"
+                :data-testid="`hook-fires-${h.name}`"
+                title="live fires observed"
+              >
+                <Activity class="w-3 h-3" />
+                {{ firesFor(h.name) }}
+              </span>
+            </div>
             <div class="text-[10px] text-zinc-500 tabular-nums mt-0.5 flex gap-2">
               <span>chain {{ h.chain }}</span>
               <span>·</span>
@@ -195,93 +200,89 @@ watch(detail, () => {
       <!-- 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.
+          Select a hook to view its surface + live tap.
         </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>
-              <span v-if="detail.source" class="ml-auto inline-flex">
-                <SourcePill :source="detail.source" @click="sourcePreview = detail.source!" />
-              </span>
             </div>
-            <div class="text-[11px] text-zinc-500 mt-2 flex gap-4 tabular-nums">
+            <div class="text-[11px] text-zinc-500 mt-2 flex gap-4 items-center tabular-nums">
               <span>{{ detail.chain }} chain step{{ detail.chain === 1 ? "" : "s" }}</span>
               <span>{{ detail.listeners }} listener{{ detail.listeners === 1 ? "" : "s" }}</span>
+              <SourcePill
+                v-if="detail.source"
+                :source="detail.source"
+                compact
+                @click="sourcePreview = detail.source ?? null"
+              />
             </div>
-            <div v-if="registeringPlugin" class="mt-2 flex items-center gap-2 text-xs">
+            <div v-if="registeredBy" 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 } })"
+                :data-testid="`plugin-link-${registeredBy}`"
+                @click="router.push({ path: '/plugins', query: { name: registeredBy } })"
               >
                 <Puzzle class="w-3 h-3" />
-                {{ registeringPlugin }}
+                {{ registeredBy }}
               </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
+            <!-- Steady-state metadata -->
+            <section class="border-b border-zinc-900">
+              <MetadataInspector :data="detailMeta" label="Hook" />
+            </section>
+
+            <!-- Live hook-tap -->
+            <section>
+              <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 tap</h3>
+                <span class="text-[10px] text-zinc-500 tabular-nums">
+                  {{ firesFor(detail.name) }} fire{{ firesFor(detail.name) === 1 ? "" : "s" }} ·
+                  last {{ fmtTime(lastFiredFor(detail.name)) }}
                 </span>
-                <span
-                  v-if="s.error"
-                  class="text-red-400 truncate max-w-40 shrink-0"
-                  :title="s.error.message"
+              </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 fire activity 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="i"
+                  class="px-6 py-1.5 flex items-center gap-3 font-mono text-[11px] hover:bg-zinc-900/30"
                 >
-                  {{ s.error.message }}
-                </span>
-                <span class="text-zinc-600 text-[10px] tabular-nums shrink-0">
-                  run {{ s.runId.split("-")[0] }}
-                </span>
-              </li>
-            </ul>
+                  <span class="text-zinc-600 tabular-nums w-20 shrink-0">
+                    {{ fmtTime(stepField(s, "ts")) }}
+                  </span>
+                  <span
+                    class="w-12 text-[10px] uppercase tracking-wide shrink-0"
+                    :class="{
+                      'text-zinc-400': stepField(s, 'phase') === 'start',
+                      'text-emerald-400': stepField(s, 'phase') === 'end',
+                      'text-red-400': stepField(s, 'phase') === 'error',
+                    }"
+                    >{{ stepField(s, "phase") || "step" }}</span
+                  >
+                  <span class="text-zinc-200 truncate flex-1">
+                    {{ stepField(s, "stepName") || `#${stepField(s, "stepId")}` }}
+                  </span>
+                  <span v-if="durationMsOf(s) !== null" class="text-zinc-500 tabular-nums shrink-0">
+                    {{ durationMsOf(s)!.toFixed(1) }} ms
+                  </span>
+                </li>
+              </ul>
+            </section>
           </div>
         </div>
       </main>