@nwire/studio 0.12.1 → 0.13.0

package/src/components/index.ts

@@ -15,3 +15,16 @@ export { default as SchemaTree } from "./SchemaTree.vue";
 export { default as SchemaNode } from "./SchemaNode.vue";
 export { default as MonacoViewer } from "./MonacoViewer.vue";
 export { default as SourceDrawer } from "./SourceDrawer.vue";
+export { default as KpiTile } from "./KpiTile.vue";
+export { default as StatusBadge } from "./StatusBadge.vue";
+export { default as DurationBar } from "./DurationBar.vue";
+export { default as MetadataInspector } from "./MetadataInspector.vue";
+export { default as Waterfall } from "./Waterfall.vue";
+export { default as WaterfallRow } from "./WaterfallRow.vue";
+export { default as BcCard } from "./BcCard.vue";
+export { default as ServiceNode } from "./ServiceNode.vue";
+export { default as NodeCard } from "./NodeCard.vue";
+export { default as GraphCanvas } from "./GraphCanvas.vue";
+export { default as ErrorCard } from "./ErrorCard.vue";
+export { default as RcaPanel } from "./RcaPanel.vue";
+export { default as LiveTable } from "./LiveTable.vue";

package/src/composables/__tests__/composables-context.test.ts

@@ -0,0 +1,107 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { defineComponent, h } from "vue";
+import { mount, flushPromises } from "@vue/test-utils";
+import { VueQueryPlugin, QueryClient } from "@tanstack/vue-query";
+import { useManifest } from "../useManifest";
+import { useDiscovery } from "../useDiscovery";
+import { useProject } from "../useProject";
+
+/** Mount a component that runs `fn()` in setup and capture its return. */
+function withQuery<T>(fn: () => T): { result: T; unmount: () => void } {
+  let result!: T;
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  const wrapper = mount(
+    defineComponent({
+      setup() {
+        result = fn();
+        return () => h("div");
+      },
+    }),
+    { global: { plugins: [[VueQueryPlugin, { queryClient: client }]] } },
+  );
+  return { result, unmount: () => wrapper.unmount() };
+}
+
+const MANIFEST = {
+  version: 3,
+  model: {
+    nodes: [{ id: "action:a", kind: "action", name: "a" }],
+    edges: [],
+  },
+};
+
+beforeEach(() => {
+  localStorage.clear();
+  localStorage.setItem("nwire.activeProject", "/proj");
+  localStorage.setItem(
+    "nwire.projects",
+    JSON.stringify({ "/proj": { cwd: "/proj", name: "proj", lastVisited: "2026-01-01" } }),
+  );
+});
+afterEach(() => {
+  vi.unstubAllGlobals();
+  localStorage.clear();
+});
+
+describe("useManifest", () => {
+  it("fetches the manifest and exposes a native view", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({ ok: true, json: async () => MANIFEST }) as unknown as Response),
+    );
+    const { result, unmount } = withQuery(() => useManifest());
+    await flushPromises();
+    expect(result.view.value?.byKind("action").map((n) => n.name)).toEqual(["a"]);
+    expect(result.error.value).toBeNull();
+    unmount();
+  });
+
+  it("surfaces a friendly error when the fetch fails", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({ ok: false, status: 404 }) as unknown as Response),
+    );
+    const { result, unmount } = withQuery(() => useManifest());
+    await flushPromises();
+    expect(result.error.value).toMatch(/Manifest fetch failed \(404\)/);
+    unmount();
+  });
+});
+
+describe("useDiscovery", () => {
+  it("merges the catalog with live status + marks the active project", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(
+        async () =>
+          ({
+            ok: true,
+            json: async () => ({ "/proj": { running: true, port: 3000 } }),
+          }) as unknown as Response,
+      ),
+    );
+    const { result, unmount } = withQuery(() => useDiscovery({ intervalMs: 999_999 }));
+    await flushPromises();
+    expect(result.projects.value).toHaveLength(1);
+    expect(result.projects.value[0]!.active).toBe(true);
+    expect(result.projects.value[0]!.status?.running).toBe(true);
+    expect(result.runningCount.value).toBe(1);
+    unmount();
+  });
+});
+
+describe("useProject", () => {
+  it("reads the active project and switches without reload", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({ ok: true, json: async () => ({}) }) as unknown as Response),
+    );
+    const { result, unmount } = withQuery(() => useProject());
+    expect(result.activeCwd.value).toBe("/proj");
+    expect(result.activeName.value).toBe("proj");
+    result.switchTo("/other");
+    expect(result.activeCwd.value).toBe("/other");
+    expect(localStorage.getItem("nwire.activeProject")).toBe("/other");
+    unmount();
+  });
+});

package/src/composables/__tests__/useTelemetry.test.ts

@@ -0,0 +1,104 @@
+/**
+ * useTelemetry — live-mode behavior (SSE tail of /__nwire/telemetry/live).
+ * History mode is covered in useTelemetryRuns.test.ts.
+ */
+import { describe, it, expect, vi } from "vitest";
+import { effectScope } from "vue";
+import { useTelemetry, type EventSourceLike } from "../useTelemetry";
+
+class FakeES implements EventSourceLike {
+  onmessage: ((ev: { data: string }) => void) | null = null;
+  onerror: ((ev?: unknown) => void) | null = null;
+  onopen: ((ev?: unknown) => void) | null = null;
+  closed = false;
+  listeners: Record<string, Array<(ev: { data: string }) => void>> = {};
+  lastUrl: string;
+  constructor(url: string) {
+    this.lastUrl = url;
+  }
+  addEventListener(type: string, listener: (ev: { data: string }) => void): void {
+    (this.listeners[type] ??= []).push(listener);
+  }
+  close() {
+    this.closed = true;
+  }
+}
+
+const flush = () => new Promise((r) => setTimeout(r, 5));
+const rec = (kind: string, messageId = "m1", correlationId = "c1") =>
+  JSON.stringify({ kind, envelope: { messageId, causationId: messageId, correlationId } });
+
+function harness(opts: Parameters<typeof useTelemetry>[1] = {}) {
+  const created: FakeES[] = [];
+  const factory = (url: string) => {
+    const es = new FakeES(url);
+    created.push(es);
+    return es;
+  };
+  const fetchFn = vi.fn(
+    async () => ({ ok: true, json: async () => ({ runs: [] }) }) as unknown as Response,
+  );
+  const scope = effectScope();
+  const api = scope.run(() =>
+    useTelemetry(() => "proj", { eventSourceFactory: factory, fetchFn, reconnectMs: 1, ...opts }),
+  )!;
+  return { api, created, fetchFn, scope };
+}
+
+describe("useTelemetry", () => {
+  it("opens an SSE connection to /__nwire/telemetry/live and streams records", async () => {
+    const { api, created } = harness({ limit: 10 });
+    await flush();
+    // Live mode opens an SSE — no fetch for backfill (server does the backfill over SSE).
+    expect(created).toHaveLength(1);
+    expect(created[0]!.lastUrl).toBe("/__nwire/telemetry/live");
+
+    created[0]!.onopen?.();
+    expect(api.status.value).toBe("open");
+
+    created[0]!.onmessage?.({ data: rec("event.published", "m2") });
+    created[0]!.onmessage?.({ data: rec("listener.fired", "m3") });
+    expect(api.records.value.map((r) => r.kind)).toEqual(["event.published", "listener.fired"]);
+    expect(api.recent("event.published")).toHaveLength(1);
+  });
+
+  it("caps the ring buffer at `limit`", async () => {
+    const { api, created } = harness({ limit: 2 });
+    await flush();
+    for (let i = 0; i < 5; i++) created[0]!.onmessage?.({ data: rec("event.published", `m${i}`) });
+    expect(api.records.value).toHaveLength(2);
+  });
+
+  it("reconnects on error (closes the dead source, opens a fresh one)", async () => {
+    const { api, created } = harness();
+    await flush();
+    expect(created).toHaveLength(1);
+    created[0]!.onerror?.();
+    expect(created[0]!.closed).toBe(true);
+    expect(api.status.value).toBe("reconnecting");
+    await flush();
+    expect(created.length).toBeGreaterThanOrEqual(2); // a new source was opened
+  });
+
+  it("disconnect() closes the source and stops", async () => {
+    const { api, created } = harness();
+    await flush();
+    api.disconnect();
+    expect(created[0]!.closed).toBe(true);
+    expect(api.status.value).toBe("closed");
+  });
+
+  it("derives the correlation tree from buffered records", async () => {
+    const { api, created } = harness();
+    await flush();
+    created[0]!.onmessage?.({ data: rec("action.dispatched", "m1") });
+    created[0]!.onmessage?.({
+      data: JSON.stringify({
+        kind: "event.published",
+        envelope: { messageId: "m2", causationId: "m1", correlationId: "c1" },
+      }),
+    });
+    expect(api.tree.value).toHaveLength(1);
+    expect(api.tree.value[0]!.children).toHaveLength(1);
+  });
+});

package/src/composables/__tests__/useTelemetryRuns.test.ts

@@ -0,0 +1,282 @@
+/**
+ * useTelemetry + useRunList — source-picker behavior.
+ *
+ * Tests the repointed endpoints (/__nwire/telemetry/live SSE tail + runs API)
+ * and the live-vs-history mode switch.
+ */
+import { describe, it, expect, vi } from "vitest";
+import { effectScope, nextTick, ref } from "vue";
+import {
+  useTelemetry,
+  useRunList,
+  type EventSourceLike,
+  type TelemetryRunMeta,
+  RUNS_URL,
+} from "../useTelemetry";
+
+// ── Fake EventSource ──────────────────────────────────────────────────────────
+
+class FakeES implements EventSourceLike {
+  onmessage: ((ev: { data: string }) => void) | null = null;
+  onerror: ((ev?: unknown) => void) | null = null;
+  onopen: ((ev?: unknown) => void) | null = null;
+  closed = false;
+  listeners: Record<string, Array<(ev: { data: string }) => void>> = {};
+  lastUrl: string;
+  constructor(url: string) {
+    this.lastUrl = url;
+  }
+  addEventListener(type: string, listener: (ev: { data: string }) => void): void {
+    (this.listeners[type] ??= []).push(listener);
+  }
+  emit(type: string, data: unknown): void {
+    for (const l of this.listeners[type] ?? []) {
+      l({ data: JSON.stringify(data) });
+    }
+  }
+  close(): void {
+    this.closed = true;
+  }
+}
+
+const flush = () => new Promise((r) => setTimeout(r, 10));
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+const REC = (kind: string, n = "1") =>
+  JSON.stringify({
+    kind,
+    envelope: { messageId: `m${n}`, causationId: `m${n}`, correlationId: "c1" },
+  });
+
+const RUN_META: TelemetryRunMeta = {
+  id: "2026-06-18T20-00-00-000Z-abcdef",
+  size: 100,
+  mtime: "2026-06-18T20:00:00.000Z",
+};
+
+function makeFetch(runsResp?: TelemetryRunMeta[], runRecords?: unknown[]) {
+  return vi.fn(async (url: string) => {
+    if (url.startsWith(RUNS_URL + "/")) {
+      return {
+        ok: true,
+        json: async () => ({ id: "2026-06-18T20-00-00-000Z-abcdef", records: runRecords ?? [] }),
+      } as unknown as Response;
+    }
+    if (url === RUNS_URL || url.startsWith(RUNS_URL + "?")) {
+      return {
+        ok: true,
+        json: async () => ({ runs: runsResp ?? [] }),
+      } as unknown as Response;
+    }
+    return { ok: false, status: 404, json: async () => ({}) } as unknown as Response;
+  });
+}
+
+function liveTelemetryHarness(opts: Parameters<typeof useTelemetry>[1] = {}) {
+  const created: FakeES[] = [];
+  const factory = (url: string) => {
+    const es = new FakeES(url);
+    created.push(es);
+    return es;
+  };
+  const scope = effectScope();
+  const api = scope.run(() =>
+    useTelemetry(undefined, {
+      eventSourceFactory: factory,
+      fetchFn: makeFetch(),
+      reconnectMs: 1,
+      ...opts,
+    }),
+  )!;
+  return { api, created, scope };
+}
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe("useTelemetry — live mode (default)", () => {
+  it("opens an SSE connection to /__nwire/telemetry/live", async () => {
+    const { api, created, scope } = liveTelemetryHarness();
+    await flush();
+    expect(created).toHaveLength(1);
+    expect(created[0]!.lastUrl).toBe("/__nwire/telemetry/live");
+    expect(api.source.value).toBe("live");
+    scope.stop();
+  });
+
+  it("pushes default-event records into the ring buffer", async () => {
+    const { api, created, scope } = liveTelemetryHarness();
+    await flush();
+    created[0]!.onmessage?.({ data: REC("action.completed") });
+    expect(api.records.value).toHaveLength(1);
+    expect(api.records.value[0]!.kind).toBe("action.completed");
+    scope.stop();
+  });
+
+  it("stores the runId from the run-meta SSE event", async () => {
+    const { api, created, scope } = liveTelemetryHarness();
+    await flush();
+    created[0]!.emit("run", RUN_META);
+    expect(api.currentRunId.value).toBe(RUN_META.id);
+    scope.stop();
+  });
+
+  it("reconnects on error", async () => {
+    const { api, created, scope } = liveTelemetryHarness();
+    await flush();
+    created[0]!.onerror?.();
+    expect(created[0]!.closed).toBe(true);
+    expect(api.status.value).toBe("reconnecting");
+    await flush();
+    expect(created.length).toBeGreaterThanOrEqual(2);
+    scope.stop();
+  });
+
+  it("caps the ring buffer at limit", async () => {
+    const { api, created, scope } = liveTelemetryHarness({ limit: 3 });
+    await flush();
+    for (let i = 0; i < 6; i++)
+      created[0]!.onmessage?.({ data: REC("event.published", String(i)) });
+    expect(api.records.value).toHaveLength(3);
+    scope.stop();
+  });
+});
+
+describe("useTelemetry — history mode", () => {
+  it("fetches run records when source is set to a TelemetryRunMeta", async () => {
+    const runRecords = [
+      {
+        kind: "action.completed",
+        envelope: { messageId: "m1", causationId: "m1", correlationId: "c1" },
+      },
+      {
+        kind: "event.published",
+        envelope: { messageId: "m2", causationId: "m1", correlationId: "c1" },
+      },
+    ];
+    const fetchFn = makeFetch([], runRecords);
+    const created: FakeES[] = [];
+    const scope = effectScope();
+    const api = scope.run(() =>
+      useTelemetry(undefined, {
+        eventSourceFactory: (url) => {
+          const es = new FakeES(url);
+          created.push(es);
+          return es;
+        },
+        fetchFn,
+        reconnectMs: 1,
+      }),
+    )!;
+
+    await flush();
+    // Switch to history mode.
+    api.source.value = RUN_META;
+    await flush();
+
+    expect(fetchFn).toHaveBeenCalledWith(
+      expect.stringContaining(`${RUNS_URL}/${encodeURIComponent(RUN_META.id)}`),
+    );
+    expect(api.records.value).toHaveLength(2);
+    expect(api.records.value[0]!.kind).toBe("action.completed");
+    expect(api.status.value).toBe("open");
+    expect(api.currentRunId.value).toBe(RUN_META.id);
+    scope.stop();
+  });
+
+  it("switches back to live mode when source is set to 'live'", async () => {
+    const fetchFn = makeFetch([], [{ kind: "hook.step" }]);
+    const created: FakeES[] = [];
+    const scope = effectScope();
+    const api = scope.run(() =>
+      useTelemetry(undefined, {
+        eventSourceFactory: (url) => {
+          const es = new FakeES(url);
+          created.push(es);
+          return es;
+        },
+        fetchFn,
+        reconnectMs: 1,
+      }),
+    )!;
+
+    await flush();
+    const liveCount = created.length;
+
+    // Switch to history.
+    api.source.value = RUN_META;
+    await flush();
+    expect(api.records.value).toHaveLength(1);
+
+    // Switch back to live.
+    api.source.value = "live";
+    await flush();
+    expect(api.records.value).toHaveLength(0); // cleared on switch
+    expect(created.length).toBeGreaterThan(liveCount); // new SSE opened
+    scope.stop();
+  });
+
+  it("sets status to closed when history fetch fails", async () => {
+    const fetchFn = vi.fn(async () => ({ ok: false, status: 404 }) as unknown as Response);
+    const scope = effectScope();
+    const api = scope.run(() =>
+      useTelemetry(undefined, {
+        eventSourceFactory: (url) => new FakeES(url),
+        fetchFn,
+        reconnectMs: 1,
+        autoConnect: false,
+      }),
+    )!;
+
+    api.source.value = RUN_META;
+    await nextTick();
+    api.connect();
+    await flush();
+
+    expect(api.status.value).toBe("closed");
+    scope.stop();
+  });
+});
+
+describe("useRunList", () => {
+  it("fetches runs on mount and exposes them", async () => {
+    const fetchFn = makeFetch([RUN_META]);
+    const scope = effectScope();
+    const { runs, loading, error } = scope.run(() => useRunList(undefined, { fetchFn }))!;
+
+    expect(loading.value).toBe(true);
+    await flush();
+    expect(loading.value).toBe(false);
+    expect(error.value).toBeNull();
+    expect(runs.value).toHaveLength(1);
+    expect(runs.value[0]!.id).toBe(RUN_META.id);
+    scope.stop();
+  });
+
+  it("sets error when fetch fails", async () => {
+    const fetchFn = vi.fn(async () => ({ ok: false, status: 500 }) as unknown as Response);
+    const scope = effectScope();
+    const { error, loading } = scope.run(() => useRunList(undefined, { fetchFn }))!;
+
+    await flush();
+    expect(loading.value).toBe(false);
+    expect(error.value).toMatch(/500/);
+    scope.stop();
+  });
+
+  it("re-fetches when project changes", async () => {
+    const fetchFn = makeFetch([RUN_META]);
+    const proj = ref("proj-a");
+    const scope = effectScope();
+    scope.run(() => useRunList(proj, { fetchFn }))!;
+
+    await flush();
+    expect(fetchFn).toHaveBeenCalledTimes(1);
+
+    proj.value = "proj-b";
+    await nextTick();
+    await flush();
+    expect(fetchFn).toHaveBeenCalledTimes(2);
+    scope.stop();
+  });
+});

package/src/composables/useDiscovery.ts

@@ -0,0 +1,73 @@
+/**
+ * `useDiscovery` — discovered projects + live health. Posts the known cwds to
+ * `/__nwire/projects/status` on a TanStack poll, merged with the local catalog
+ * so a project shows even when its process is down.
+ */
+import { computed } from "vue";
+import { useQuery } from "@tanstack/vue-query";
+import { loadCatalog, getActiveProjectCwd, type ProjectSnapshot } from "../lib/project-catalog";
+
+const STATUS_URL = "/__nwire/projects/status";
+
+/** Per-project live status from the server (process up? port? pid?). Shape is server-owned. */
+export interface ProjectStatus {
+  readonly running?: boolean;
+  readonly port?: number;
+  readonly pid?: number;
+  readonly [k: string]: unknown;
+}
+export type StatusMap = Record<string, ProjectStatus>;
+
+/** A discovered project: its catalog snapshot + (best-effort) live status. */
+export interface DiscoveredProject {
+  readonly cwd: string;
+  readonly snapshot: ProjectSnapshot;
+  readonly status?: ProjectStatus;
+  readonly active: boolean;
+}
+
+export function useDiscovery(options: { intervalMs?: number } = {}) {
+  const query = useQuery({
+    queryKey: ["discovery"],
+    queryFn: async (): Promise<StatusMap> => {
+      const cwds = Object.keys(loadCatalog());
+      if (cwds.length === 0) return {};
+      const res = await fetch(STATUS_URL, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cwds }),
+      });
+      if (!res.ok) return {};
+      return (await res.json()) as StatusMap;
+    },
+    refetchInterval: options.intervalMs ?? 5_000,
+    placeholderData: (prev) => prev,
+  });
+
+  const projects = computed<DiscoveredProject[]>(() => {
+    const catalog = loadCatalog();
+    const active = getActiveProjectCwd();
+    const statuses = query.data.value ?? {};
+    return Object.values(catalog)
+      .map((snapshot) => ({
+        cwd: snapshot.cwd,
+        snapshot,
+        status: statuses[snapshot.cwd],
+        active: snapshot.cwd === active,
+      }))
+      .sort(
+        (a, b) =>
+          Number(b.active) - Number(a.active) || a.snapshot.name.localeCompare(b.snapshot.name),
+      );
+  });
+
+  const runningCount = computed(() => projects.value.filter((p) => p.status?.running).length);
+
+  return {
+    projects,
+    runningCount,
+    isLoading: query.isLoading,
+    isError: query.isError,
+    refetch: query.refetch,
+  };
+}

package/src/composables/useEndpoints.ts

@@ -0,0 +1,94 @@
+/**
+ * `useEndpoints` — reactive endpoint list for the active-front picker.
+ *
+ * Fetches `/__nwire/endpoints` on mount and provides a `setActive` helper
+ * that POSTs `/__nwire/endpoints/active` and refreshes the list.
+ *
+ * In a single-endpoint project the list has one entry and the picker is
+ * a no-op — the call still works, the UI just shows one option already
+ * marked active.
+ */
+
+import { ref, onMounted } from "vue";
+
+export const ENDPOINTS_URL = "/__nwire/endpoints";
+export const ENDPOINTS_ACTIVE_URL = "/__nwire/endpoints/active";
+
+export interface EndpointInfo {
+  /** Endpoint name — from `endpoint("name")`. */
+  readonly name: string;
+  /** True when this is the currently active HTTP front. */
+  readonly active: boolean;
+  /** True when this endpoint registered at least one HTTP handler. */
+  readonly hasHttp: boolean;
+}
+
+export interface UseEndpointsOptions {
+  /** Inject fetch (tests). Default: global `fetch`. */
+  readonly fetchFn?: typeof fetch;
+}
+
+export function useEndpoints(options: UseEndpointsOptions = {}) {
+  const doFetch = options.fetchFn ?? ((...a: Parameters<typeof fetch>) => fetch(...a));
+
+  const endpoints = ref<EndpointInfo[]>([]);
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+  const switching = ref(false);
+
+  async function refresh(): Promise<void> {
+    loading.value = true;
+    error.value = null;
+    try {
+      const res = await doFetch(ENDPOINTS_URL);
+      if (!res.ok) {
+        // 501 = route not yet supported (standalone Studio or older host).
+        // Treat as empty — the picker simply won't appear.
+        if (res.status === 501) {
+          endpoints.value = [];
+          return;
+        }
+        error.value = `Failed to load endpoints (${res.status})`;
+        return;
+      }
+      const body = (await res.json()) as { endpoints?: EndpointInfo[] };
+      endpoints.value = body.endpoints ?? [];
+    } catch (err) {
+      error.value = (err as Error).message;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * Switch the active HTTP front. Refreshes the list after a successful switch.
+   * In a single-endpoint project this is a no-op from the server's perspective
+   * (you can only select the one endpoint that is already active).
+   */
+  async function setActive(name: string): Promise<void> {
+    switching.value = true;
+    error.value = null;
+    try {
+      const res = await doFetch(ENDPOINTS_ACTIVE_URL, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name }),
+      });
+      if (!res.ok) {
+        const body = (await res.json().catch(() => ({}))) as { error?: string };
+        error.value = body.error ?? `Switch failed (${res.status})`;
+        return;
+      }
+      // Refresh to get the updated active flag.
+      await refresh();
+    } catch (err) {
+      error.value = (err as Error).message;
+    } finally {
+      switching.value = false;
+    }
+  }
+
+  onMounted(refresh);
+
+  return { endpoints, loading, error, switching, refresh, setActive };
+}