@nwire/studio 0.12.0 → 0.13.0

package/src/pages/__tests__/Home.test.ts

@@ -1,16 +1,41 @@
 /**
- * Home page mount test — verifies graceful empty rendering when:
- *   - the manifest is empty
- *   - the live telemetry stream errors immediately (no wire running)
+ * Home page mount test — the discovery dashboard over native data
+ * (`useDiscovery` + `useManifest` + `useTelemetry` + `useProject`).
  *
- * All three sections should still render with their empty-state messages.
+ * Covers: the discovered-projects grid renders from the catalog + live status;
+ * a card shows its health + composition stats; the active-project quick-stats
+ * strip derives counts from the manifest; the empty state shows when the
+ * catalog is empty.
  */
-import { describe, it, expect, beforeEach, vi } from "vitest";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
 import { mount, flushPromises } from "@vue/test-utils";
 import { createRouter, createMemoryHistory } from "vue-router";
+import { VueQueryPlugin } from "@tanstack/vue-query";
 import Home from "../Home.vue";
 
-// Stub EventSource so we don't try to open a real connection.
+const CWD = "/repo/orders";
+
+const manifest = {
+  version: 3,
+  model: {
+    nodes: [
+      { id: "action:orders.place", kind: "action", name: "orders.place" },
+      { id: "action:orders.cancel", kind: "action", name: "orders.cancel" },
+      { id: "event:orders.placed", kind: "event", name: "orders.placed" },
+      { id: "projection:orders.summary", kind: "projection", name: "orders.summary" },
+      { id: "app:orders", kind: "app", name: "orders" },
+    ],
+    edges: [],
+  },
+};
+
+const status = {
+  [CWD]: {
+    hasManifest: true,
+    processes: [{ id: "p1", pid: 123, port: 4000, status: "running", startedAt: "x" }],
+  },
+};
+
 class FakeEventSource {
   onopen: (() => void) | null = null;
   onerror: (() => void) | null = null;
@@ -21,78 +46,108 @@ class FakeEventSource {
   close(): void {}
 }
 
+function seedCatalog(empty = false): void {
+  if (empty) {
+    localStorage.clear();
+    return;
+  }
+  localStorage.setItem(
+    "nwire.projects",
+    JSON.stringify({
+      [CWD]: {
+        cwd: CWD,
+        name: "orders",
+        lastVisited: "2026-01-01T00:00:00.000Z",
+        composition: { apps: 1, plugins: 2, actions: 2, events: 1, resolvers: 0, workflows: 1 },
+      },
+    }),
+  );
+  localStorage.setItem("nwire.activeProject", CWD);
+}
+
 beforeEach(() => {
-  // jsdom/happy-dom doesn't ship EventSource — install our stub.
   (globalThis as unknown as { EventSource: typeof FakeEventSource }).EventSource = FakeEventSource;
-
-  // Mock fetch — manifest call returns empty cache; telemetry/recent fails.
   globalThis.fetch = vi.fn((url: string | URL) => {
     const u = String(url);
+    if (u.includes("/__nwire/projects/status")) {
+      return Promise.resolve(new Response(JSON.stringify(status), { status: 200 }));
+    }
     if (u.includes("/__nwire/manifest.json")) {
-      return Promise.resolve(
-        new Response(
-          JSON.stringify({
-            generatedAt: new Date().toISOString(),
-            apps: [],
-            modules: [],
-            actions: [],
-            events: [],
-            actors: [],
-            projections: [],
-            queries: [],
-            resolvers: [],
-            routes: [],
-            workflows: [],
-            externalCalls: [],
-            inboundWebhooks: [],
-            outboxes: [],
-            inboxes: [],
-            crons: [],
-            hooks: [],
-            plugins: [],
-            graph: { events: [] },
-          }),
-          { status: 200 },
-        ),
-      );
+      return Promise.resolve(new Response(JSON.stringify(manifest), { status: 200 }));
     }
     if (u.includes("/_nwire/telemetry/recent")) {
-      return Promise.resolve(new Response("", { status: 502 }));
+      return Promise.resolve(new Response("[]", { status: 200 }));
     }
     return Promise.resolve(new Response("", { status: 404 }));
   }) as typeof fetch;
 });
 
+afterEach(() => {
+  localStorage.clear();
+});
+
 function makeRouter() {
   return createRouter({
     history: createMemoryHistory(),
     routes: [
       { path: "/", name: "home", component: Home },
       { path: "/trace", name: "trace", component: { template: "<div/>" } },
-      { path: "/hooks", name: "hooks", component: { template: "<div/>" } },
+      { path: "/streams", name: "streams", component: { template: "<div/>" } },
+      { path: "/projects", name: "projects", component: { template: "<div/>" } },
+      { path: "/projects/:slug/:page", name: "page", component: { template: "<div/>" } },
     ],
   });
 }
 
+async function mountHome() {
+  const router = makeRouter();
+  const wrapper = mount(Home, { global: { plugins: [router, VueQueryPlugin] } });
+  await flushPromises();
+  await flushPromises();
+  return { wrapper, router };
+}
+
 describe("Home", () => {
-  it("mounts and renders all three sections with empty/no-live states", async () => {
-    const router = makeRouter();
-    const wrapper = mount(Home, { global: { plugins: [router] } });
-    await flushPromises();
+  it("renders the discovered-projects grid from the catalog + live status", async () => {
+    seedCatalog();
+    const { wrapper } = await mountHome();
 
     expect(wrapper.find("[data-testid=home-page]").exists()).toBe(true);
-    expect(wrapper.find("[data-testid=home-failures]").exists()).toBe(true);
-    expect(wrapper.find("[data-testid=home-metrics]").exists()).toBe(true);
-    expect(wrapper.find("[data-testid=home-composition]").exists()).toBe(true);
-
-    // SSE errored → metrics panel shows the no-live-data degrade message.
-    expect(wrapper.find("[data-testid=home-metrics-no-live]").exists()).toBe(true);
-
-    // Failures: zero rows arrived; we show the "no failures" recovery line.
-    // (recent fetch returned 502 so we are in the no-live-data branch.)
-    expect(
-      wrapper.find("[data-testid=home-failures-no-live]").exists() ||
-        wrapper.find("[data-testid=home-failures-empty]").exists(),
-    ).toBe(true);
+    const cards = wrapper.findAll("[data-testid=home-project-card]");
+    expect(cards).toHaveLength(1);
+    expect(wrapper.find("[data-testid=home-project-name]").text()).toBe("orders");
+    // Running health (a live process is registered).
+    expect(wrapper.find("[data-testid=home-project-health]").text()).toContain("Running");
+    // Composition stats from the snapshot are present (not pending).
+    expect(wrapper.find("[data-testid=home-project-stats]").exists()).toBe(true);
+  });
+
+  it("derives the active-project quick stats from the manifest", async () => {
+    seedCatalog();
+    const { wrapper } = await mountHome();
+
+    const strip = wrapper.find("[data-testid=home-quickstats]");
+    expect(strip.exists()).toBe(true);
+    const values = strip.findAll("[data-testid=kpi-value]").map((n) => n.text());
+    // Nodes=5, Actions=2, Events=1, Projections=1, Errors=0 (telemetry empty).
+    expect(values).toEqual(["5", "2", "1", "1", "0"]);
+  });
+
+  it("jumps into a project's map, switching the active project without reload", async () => {
+    seedCatalog();
+    const { wrapper, router } = await mountHome();
+
+    await wrapper.find("[data-testid=home-jump-map]").trigger("click");
+    await flushPromises();
+
+    expect(router.currentRoute.value.fullPath).toBe("/projects/orders/map");
+  });
+
+  it("shows the empty state when no projects are discovered", async () => {
+    seedCatalog(true);
+    const { wrapper } = await mountHome();
+
+    expect(wrapper.find("[data-testid=home-projects-empty]").exists()).toBe(true);
+    expect(wrapper.find("[data-testid=home-project-card]").exists()).toBe(false);
   });
 });

package/src/pages/__tests__/Hooks.test.ts

@@ -8,6 +8,7 @@
 import { describe, it, expect, beforeEach, vi } from "vitest";
 import { mount, flushPromises } from "@vue/test-utils";
 import { createRouter, createMemoryHistory } from "vue-router";
+import { VueQueryPlugin } from "@tanstack/vue-query";
 import Hooks from "../Hooks.vue";
 
 class FakeEventSource {
@@ -58,8 +59,7 @@ beforeEach(() => {
             outboxes: [],
             inboxes: [],
             crons: [],
-            hooks: [pluginBootHook, otherHook],
-            plugins: [],
+            topology: { hooks: [pluginBootHook, otherHook], plugins: [] },
             graph: { events: [] },
           }),
           { status: 200 },
@@ -84,7 +84,7 @@ describe("Hooks deep-links", () => {
   it("preselects a hook by name and shows the 'Registered by' plugin link", async () => {
     const router = makeRouter();
     await router.push("/hooks?name=plugin.boot:auth");
-    const wrapper = mount(Hooks, { global: { plugins: [router] } });
+    const wrapper = mount(Hooks, { global: { plugins: [router, VueQueryPlugin] } });
     await flushPromises();
     await flushPromises();
 
@@ -95,7 +95,7 @@ describe("Hooks deep-links", () => {
   it("does not render the plugin link for non-plugin hooks", async () => {
     const router = makeRouter();
     await router.push("/hooks?name=action.before:submitAssignment");
-    const wrapper = mount(Hooks, { global: { plugins: [router] } });
+    const wrapper = mount(Hooks, { global: { plugins: [router, VueQueryPlugin] } });
     await flushPromises();
     await flushPromises();
 
@@ -106,7 +106,7 @@ describe("Hooks deep-links", () => {
   it("clicking the plugin link navigates to /plugins?name=<n>", async () => {
     const router = makeRouter();
     await router.push("/hooks?name=plugin.boot:auth");
-    const wrapper = mount(Hooks, { global: { plugins: [router] } });
+    const wrapper = mount(Hooks, { global: { plugins: [router, VueQueryPlugin] } });
     await flushPromises();
     await flushPromises();
 

package/src/pages/__tests__/Inspect.test.ts

@@ -0,0 +1,111 @@
+/**
+ * Inspect page — verifies the unified per-kind browser over the native deep
+ * manifest: the kind rail lists present kinds with counts, the node list
+ * filters, and selecting a node renders its detail + relationships.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createRouter, createMemoryHistory } from "vue-router";
+import { VueQueryPlugin } from "@tanstack/vue-query";
+import Inspect from "../Inspect.vue";
+
+const manifest = {
+  version: 3,
+  actions: [
+    {
+      name: "orders.place",
+      app: "orders",
+      public: true,
+      description: "Place an order",
+      inputSchema: { type: "object" },
+      emits: ["orders.placed"],
+      source: { file: "orders/place.ts", line: 3 },
+    },
+  ],
+  events: [{ name: "orders.placed", app: "orders" }],
+  model: {
+    nodes: [
+      {
+        id: "action:orders.place",
+        kind: "action",
+        name: "orders.place",
+        intent: { description: "Place an order", public: true },
+        data: { emits: ["orders.placed"] },
+      },
+      { id: "event:orders.placed", kind: "event", name: "orders.placed" },
+    ],
+    edges: [{ from: "action:orders.place", to: "event:orders.placed", type: "emits" }],
+  },
+};
+
+beforeEach(() => {
+  globalThis.fetch = vi.fn((url: string | URL) => {
+    if (String(url).includes("/__nwire/manifest.json")) {
+      return Promise.resolve(new Response(JSON.stringify(manifest), { status: 200 }));
+    }
+    return Promise.resolve(new Response("", { status: 404 }));
+  }) as typeof fetch;
+});
+
+function makeRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: "/inspect", name: "inspect", component: Inspect },
+      { path: "/dispatch", name: "dispatch", component: { template: "<div/>" } },
+    ],
+  });
+}
+
+async function mountInspect(query = "") {
+  const router = makeRouter();
+  await router.push(`/inspect${query}`);
+  const wrapper = mount(Inspect, { global: { plugins: [router, VueQueryPlugin] } });
+  await flushPromises();
+  await flushPromises();
+  return { wrapper, router };
+}
+
+describe("Inspect page", () => {
+  it("lists present kinds with counts in the rail", async () => {
+    const { wrapper } = await mountInspect();
+    const rail = wrapper.get('[data-testid="kind-rail"]');
+    expect(rail.text()).toContain("Actions");
+    expect(rail.text()).toContain("Events");
+    expect(wrapper.find('[data-testid="kind-action"]').exists()).toBe(true);
+  });
+
+  it("auto-selects the first node and renders its detail", async () => {
+    const { wrapper } = await mountInspect();
+    expect(wrapper.get('[data-testid="inspect-detail"]').text()).toContain("orders.place");
+    // dispatchable kind → the Dispatch link shows
+    expect(wrapper.find('[data-testid="dispatch-link"]').exists()).toBe(true);
+  });
+
+  it("shows relationships for the selected node", async () => {
+    const { wrapper } = await mountInspect();
+    const rel = wrapper.find('[data-testid="relationships"]');
+    expect(rel.exists()).toBe(true);
+    expect(rel.text()).toContain("orders.placed");
+  });
+
+  it("switches kinds when a rail entry is clicked", async () => {
+    const { wrapper } = await mountInspect();
+    await wrapper.get('[data-testid="kind-event"]').trigger("click");
+    await flushPromises();
+    expect(wrapper.get('[data-testid="inspect-detail"]').text()).toContain("orders.placed");
+  });
+
+  it("honors ?kind= + ?id= deep-links", async () => {
+    const { wrapper } = await mountInspect("?kind=event&id=event:orders.placed");
+    expect(wrapper.get('[data-testid="inspect-detail"]').text()).toContain("orders.placed");
+  });
+
+  it("filters the node list", async () => {
+    const { wrapper } = await mountInspect();
+    const input = wrapper.get('[data-testid="filter-input"]');
+    await input.setValue("zzz");
+    await flushPromises();
+    expect(wrapper.findAll('[data-testid="inspect-row"]')).toHaveLength(0);
+  });
+});

package/src/pages/__tests__/Plugins.test.ts

@@ -1,11 +1,14 @@
 /**
- * Plugins page mount test — verifies the empty-state renders when the
- * manifest has zero plugins, and the SSE stream is stubbed so we don't try
- * to open a real connection in jsdom.
+ * Plugins page tests — native topology. Verifies:
+ *   1. The empty-state renders when the topology has zero plugins.
+ *   2. A populated topology lists plugins, and /plugins?name=<n> preselects one,
+ *      surfacing its lifecycle hooks with a cross-link to /hooks?name=<hookName>.
+ * The SSE stream is stubbed (FakeEventSource) so jsdom opens no real connection.
  */
 import { describe, it, expect, beforeEach, vi } from "vitest";
 import { mount, flushPromises } from "@vue/test-utils";
 import { createRouter, createMemoryHistory } from "vue-router";
+import { VueQueryPlugin } from "@tanstack/vue-query";
 import Plugins from "../Plugins.vue";
 
 class FakeEventSource {
@@ -18,41 +21,54 @@ class FakeEventSource {
   close(): void {}
 }
 
-beforeEach(() => {
-  (globalThis as unknown as { EventSource: typeof FakeEventSource }).EventSource = FakeEventSource;
+const EMPTY_TOPOLOGY = { hooks: [], plugins: [] };
+const POPULATED_TOPOLOGY = {
+  plugins: [{ name: "auth" }, { name: "storage" }],
+  hooks: [
+    { name: "plugin.boot:auth", chain: 2, listeners: 1 },
+    { name: "plugin.shutdown:auth", chain: 1, listeners: 0 },
+    { name: "plugin.boot:storage", chain: 1, listeners: 0 },
+  ],
+  capabilities: [],
+  ctxByKind: {},
+};
+
+function manifestWith(topology: object) {
+  return {
+    version: 3,
+    generatedAt: new Date().toISOString(),
+    apps: [],
+    actions: [],
+    events: [],
+    actors: [],
+    projections: [],
+    queries: [],
+    resolvers: [],
+    routes: [],
+    workflows: [],
+    externalCalls: [],
+    inboundWebhooks: [],
+    outboxes: [],
+    inboxes: [],
+    crons: [],
+    graph: { events: [] },
+    topology,
+    model: { nodes: [], edges: [] },
+  };
+}
 
+function stubManifest(topology: object): void {
+  (globalThis as unknown as { EventSource: typeof FakeEventSource }).EventSource = FakeEventSource;
   globalThis.fetch = vi.fn((url: string | URL) => {
-    const u = String(url);
-    if (u.includes("/__nwire/manifest.json")) {
-      return Promise.resolve(
-        new Response(
-          JSON.stringify({
-            generatedAt: new Date().toISOString(),
-            apps: [],
-            modules: [],
-            actions: [],
-            events: [],
-            actors: [],
-            projections: [],
-            queries: [],
-            resolvers: [],
-            routes: [],
-            workflows: [],
-            externalCalls: [],
-            inboundWebhooks: [],
-            outboxes: [],
-            inboxes: [],
-            crons: [],
-            hooks: [],
-            plugins: [],
-            graph: { events: [] },
-          }),
-          { status: 200 },
-        ),
-      );
+    if (String(url).includes("/__nwire/manifest.json")) {
+      return Promise.resolve(new Response(JSON.stringify(manifestWith(topology)), { status: 200 }));
     }
     return Promise.resolve(new Response("", { status: 404 }));
   }) as typeof fetch;
+}
+
+beforeEach(() => {
+  stubManifest(EMPTY_TOPOLOGY);
 });
 
 function makeRouter() {
@@ -66,9 +82,10 @@ function makeRouter() {
 }
 
 describe("Plugins", () => {
-  it("renders the empty state when cache.plugins is empty", async () => {
+  it("renders the empty state when the topology has no plugins", async () => {
     const router = makeRouter();
-    const wrapper = mount(Plugins, { global: { plugins: [router] } });
+    const wrapper = mount(Plugins, { global: { plugins: [router, VueQueryPlugin] } });
+    await flushPromises();
     await flushPromises();
 
     expect(wrapper.find("[data-testid=plugins-page]").exists()).toBe(true);
@@ -77,4 +94,37 @@ describe("Plugins", () => {
     expect(wrapper.find("[data-testid=plugins-list]").exists()).toBe(false);
     expect(wrapper.find("[data-testid=plugins-detail]").exists()).toBe(false);
   });
+
+  it("lists plugins from native topology", async () => {
+    stubManifest(POPULATED_TOPOLOGY);
+    const router = makeRouter();
+    const wrapper = mount(Plugins, { global: { plugins: [router, VueQueryPlugin] } });
+    await flushPromises();
+    await flushPromises();
+
+    expect(wrapper.find("[data-testid=plugins-empty]").exists()).toBe(false);
+    expect(wrapper.find("[data-testid=plugins-list]").exists()).toBe(true);
+    expect(wrapper.text()).toContain("auth");
+    expect(wrapper.text()).toContain("storage");
+  });
+
+  it("preselects via /plugins?name=<n> and shows lifecycle hooks linking to /hooks", async () => {
+    stubManifest(POPULATED_TOPOLOGY);
+    const router = makeRouter();
+    await router.push("/plugins?name=auth");
+    const wrapper = mount(Plugins, { global: { plugins: [router, VueQueryPlugin] } });
+    await flushPromises();
+    await flushPromises();
+
+    const detail = wrapper.find("[data-testid=plugins-detail]");
+    expect(detail.exists()).toBe(true);
+    // The two auth lifecycle hooks render as cross-links to /hooks.
+    expect(wrapper.find("[data-testid='hook-link-plugin.boot:auth']").exists()).toBe(true);
+    expect(wrapper.find("[data-testid='hook-link-plugin.shutdown:auth']").exists()).toBe(true);
+
+    await wrapper.find("[data-testid='hook-link-plugin.boot:auth']").trigger("click");
+    await flushPromises();
+    expect(router.currentRoute.value.path).toBe("/hooks");
+    expect(router.currentRoute.value.query.name).toBe("plugin.boot:auth");
+  });
 });

package/src/pages/__tests__/Trace.test.ts

@@ -0,0 +1,117 @@
+/**
+ * Flow / Trace page — verifies the telemetry-driven waterfall: backfilled
+ * records group into a trace, render as a depth-ordered waterfall with a
+ * failure badge, and selecting a span drives the metadata inspector.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createRouter, createMemoryHistory } from "vue-router";
+import Trace from "../Trace.vue";
+
+const env = (messageId: string, causationId: string) => ({
+  messageId,
+  causationId,
+  correlationId: "c1",
+});
+
+const backfill = [
+  { kind: "action.dispatched", name: "orders.place", durationMs: 10, envelope: env("m1", "m1") },
+  { kind: "query.executed", name: "orders.lookup", durationMs: 90, envelope: env("m2", "m1") },
+  {
+    kind: "action.failed",
+    name: "orders.charge",
+    error: { name: "E", message: "declined" },
+    envelope: env("m3", "m1"),
+  },
+];
+
+// What the SSE stream replays on open. The server backfills the current run
+// over the live stream (no separate `/recent` fetch), so the fake emits these
+// as `message` events once the page has wired its `onmessage`.
+let streamRecords: unknown[] = [];
+
+// A fake live stream — on connect it replays `streamRecords` as message events,
+// mirroring `/__nwire/telemetry/live`'s open-time backfill.
+class FakeEventSource {
+  onopen: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  onmessage: ((m: { data: string }) => void) | null = null;
+  listeners: Record<string, Array<(ev: { data: string }) => void>> = {};
+  constructor(public readonly url: string) {
+    queueMicrotask(() => {
+      this.onopen?.();
+      for (const rec of streamRecords) this.onmessage?.({ data: JSON.stringify(rec) });
+    });
+  }
+  addEventListener(type: string, fn: (ev: { data: string }) => void): void {
+    (this.listeners[type] ??= []).push(fn);
+  }
+  removeEventListener(): void {}
+  close(): void {}
+}
+
+beforeEach(() => {
+  streamRecords = backfill;
+  (globalThis as unknown as { EventSource: typeof FakeEventSource }).EventSource = FakeEventSource;
+  // Live mode backfills over SSE; the only fetch is the run-list for the picker.
+  globalThis.fetch = vi.fn((url: string | URL) => {
+    const u = String(url);
+    if (u.includes("/__nwire/telemetry/runs")) {
+      return Promise.resolve(new Response(JSON.stringify({ runs: [] }), { status: 200 }));
+    }
+    return Promise.resolve(new Response("", { status: 404 }));
+  }) as typeof fetch;
+});
+
+function makeRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: "/trace", name: "trace", component: Trace },
+      { path: "/", name: "home", component: { template: "<div/>" } },
+    ],
+  });
+}
+
+describe("Flow / Trace", () => {
+  it("renders the trace picker with a failure count and a waterfall row per span", async () => {
+    const router = makeRouter();
+    router.push("/trace?correlationId=c1");
+    await router.isReady();
+
+    const wrapper = mount(Trace, { global: { plugins: [router] } });
+    await flushPromises();
+
+    expect(wrapper.find('[data-testid="trace-row"]').exists()).toBe(true);
+    expect(wrapper.get('[data-testid="trace-failures"]').text()).toContain("1");
+    expect(wrapper.findAll('[data-testid="waterfall-row"]')).toHaveLength(3);
+    // The failed span gets the red treatment.
+    expect(wrapper.find('[data-failed="true"]').exists()).toBe(true);
+  });
+
+  it("drives the metadata inspector from the selected span", async () => {
+    const router = makeRouter();
+    router.push("/trace?correlationId=c1");
+    await router.isReady();
+
+    const wrapper = mount(Trace, { global: { plugins: [router] } });
+    await flushPromises();
+
+    await wrapper.findAll('[data-testid="waterfall-row"]')[1]!.trigger("click");
+    const inspector = wrapper.get('[data-testid="metadata-inspector"]');
+    expect(inspector.text()).toContain("orders.lookup");
+    expect(inspector.text()).toContain("envelope.messageId");
+  });
+
+  it("shows the empty state when no trace is selected", async () => {
+    const router = makeRouter();
+    router.push("/trace");
+    await router.isReady();
+    streamRecords = [];
+
+    const wrapper = mount(Trace, { global: { plugins: [router] } });
+    await flushPromises();
+
+    expect(wrapper.find('[data-testid="empty-state"]').exists()).toBe(true);
+  });
+});