@nwire/studio 0.9.1

package/src/pages/Workflows.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+/**
+ * Workflows — the unified event-driven side-effect primitive (reactions,
+ * translators, sagas; one shape). Each row in `cache.workflows` shows
+ * which events it subscribes to and which actions it dispatches.
+ */
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCache } from "@/lib/cache";
+import { GitBranch, Zap, ArrowRight, 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;
+  // Match by workflow name across (app, module). First match wins.
+  const found = cache.value?.workflows.find((w) => w.name === name);
+  if (found) selected.value = `${found.app}::${found.module}::${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.workflows.filter(
+    (w) =>
+      !q ||
+      w.name.toLowerCase().includes(q) ||
+      w.module.toLowerCase().includes(q) ||
+      w.app.toLowerCase().includes(q) ||
+      w.subscribesTo.some((e) => e.toLowerCase().includes(q)) ||
+      w.dispatches.some((a) => a.toLowerCase().includes(q)) ||
+      (w.description ?? "").toLowerCase().includes(q),
+  );
+});
+
+const key = (w: { app: string; module: string; name: string }) =>
+  `${w.app}::${w.module}::${w.name}`;
+const detail = computed(() => filtered.value.find((w) => key(w) === selected.value) ?? null);
+</script>
+
+<template>
+  <div v-if="cache" class="h-full flex flex-col" data-testid="workflows-page">
+    <div class="p-6 pb-3 border-b border-zinc-800">
+      <PageHeader
+        title="Workflows"
+        subtitle="Event-driven side effects — reactions, translators, sagas. One primitive."
+        :icon="GitBranch"
+        icon-color="text-violet-400"
+        :count="filtered.length"
+        :total="cache.workflows.length"
+      />
+    </div>
+
+    <EmptyState
+      v-if="cache.workflows.length === 0"
+      title="No workflows in cache"
+      hint="Workflows are declared via defineWorkflow(name, ({ on, send }) => ...). Run `nwire cache` after adding one."
+      :icon="GitBranch"
+    />
+
+    <MasterDetail v-else class="flex-1">
+      <template #listHeader>
+        <FilterInput v-model="filter" placeholder="filter by name, module, event, action…" />
+      </template>
+
+      <template #list>
+        <ListRow
+          v-for="w in filtered"
+          :key="key(w)"
+          :selected="selected === key(w)"
+          @click="selected = key(w)"
+        >
+          <template #title>
+            <GitBranch class="w-3 h-3 text-violet-400 shrink-0" />
+            <span class="font-mono text-sm truncate">{{ w.name }}</span>
+          </template>
+          <template #meta>
+            <component
+              :is="w.public ? Globe : Lock"
+              class="w-3 h-3"
+              :class="w.public ? 'text-emerald-400' : 'text-zinc-500'"
+              :title="w.public ? 'public — exposed across modules' : 'private — module-internal'"
+            />
+            <span class="text-[10px] text-zinc-500">{{ w.app }} · {{ w.module }}</span>
+          </template>
+          <template v-if="w.description || w.subscribesTo.length > 0" #description>
+            <div v-if="w.description">{{ w.description }}</div>
+            <div v-if="w.subscribesTo.length > 0" class="text-zinc-600 mt-0.5">
+              <span class="text-zinc-500">on</span>
+              {{ w.subscribesTo.slice(0, 2).join(", ") }}
+              <span v-if="w.subscribesTo.length > 2">+{{ w.subscribesTo.length - 2 }}</span>
+            </div>
+          </template>
+        </ListRow>
+      </template>
+
+      <template #empty>Select a workflow to view its event subscriptions and dispatches.</template>
+
+      <template v-if="detail" #detail>
+        <div class="p-6 space-y-5" data-testid="workflow-detail">
+          <div>
+            <div class="text-[10px] uppercase tracking-wide text-zinc-500">
+              {{ detail.app }} · {{ detail.module }}
+            </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 class="space-y-3">
+            <h3 class="text-xs uppercase tracking-wide text-zinc-500">Listens to</h3>
+            <div v-if="detail.subscribesTo.length === 0" class="text-xs text-zinc-600">
+              No event subscriptions declared.
+            </div>
+            <div v-else class="space-y-1">
+              <button
+                v-for="ev in detail.subscribesTo"
+                :key="ev"
+                type="button"
+                class="flex items-center gap-2 font-mono text-sm text-left hover:text-cyan-300"
+                :data-testid="`event-link-${ev}`"
+                @click="router.push({ path: '/events', query: { name: ev } })"
+              >
+                <ArrowRight class="w-3.5 h-3.5 text-cyan-400" />
+                <span class="underline-offset-2 hover:underline">{{ ev }}</span>
+              </button>
+            </div>
+          </div>
+
+          <div class="space-y-3">
+            <h3 class="text-xs uppercase tracking-wide text-zinc-500">Dispatches</h3>
+            <div v-if="detail.dispatches.length === 0" class="text-xs text-zinc-600">
+              Pure observer — no action dispatches.
+            </div>
+            <div v-else class="space-y-1">
+              <button
+                v-for="action in detail.dispatches"
+                :key="action"
+                type="button"
+                class="flex items-center gap-2 font-mono text-sm text-left hover:text-amber-300"
+                :data-testid="`action-link-${action}`"
+                @click="router.push({ path: '/actions', query: { name: action } })"
+              >
+                <Zap class="w-3.5 h-3.5 text-amber-400" />
+                <span class="underline-offset-2 hover:underline">{{ action }}</span>
+              </button>
+            </div>
+          </div>
+
+          <div v-if="detail.source" class="pt-2">
+            <button
+              type="button"
+              class="inline-flex items-center"
+              @click="sourcePreview = detail.source!"
+            >
+              <SourcePill :source="detail.source" />
+            </button>
+          </div>
+        </div>
+      </template>
+    </MasterDetail>
+    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
+  </div>
+</template>

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

@@ -0,0 +1,98 @@
+/**
+ * Actions page deep-link test — verifies that `/actions?name=<actionName>`
+ * preselects the matching action and that the cross-link buttons to
+ * /hooks and /trace are rendered with the right router destinations.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createRouter, createMemoryHistory } from "vue-router";
+import Actions from "../Actions.vue";
+
+const fakeAction = {
+  name: "submitAssignment",
+  description: "Student submits an assignment.",
+  module: "submissions",
+  app: "learnflow",
+  schema: { type: "object" },
+  hasInlineHandler: true,
+  emits: ["AssignmentSubmitted"],
+  public: true,
+};
+
+beforeEach(() => {
+  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: [fakeAction],
+            events: [],
+            actors: [],
+            projections: [],
+            queries: [],
+            resolvers: [],
+            routes: [],
+            workflows: [],
+            externalCalls: [],
+            inboundWebhooks: [],
+            outboxes: [],
+            inboxes: [],
+            crons: [],
+            hooks: [],
+            plugins: [],
+            graph: { events: [] },
+          }),
+          { status: 200 },
+        ),
+      );
+    }
+    return Promise.resolve(new Response("", { status: 404 }));
+  }) as typeof fetch;
+});
+
+function makeRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: "/actions", name: "actions", component: Actions },
+      { path: "/hooks", name: "hooks", component: { template: "<div/>" } },
+      { path: "/trace", name: "trace", component: { template: "<div/>" } },
+    ],
+  });
+}
+
+describe("Actions deep-links", () => {
+  it("preselects the action when ?name=… is in the URL", async () => {
+    const router = makeRouter();
+    await router.push("/actions?name=submitAssignment");
+    const wrapper = mount(Actions, { global: { plugins: [router] } });
+    // Wait for cache fetch + onMounted preselect + computed re-render.
+    await flushPromises();
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("submitAssignment");
+    // Schema heading is only shown when an action is selected.
+    expect(wrapper.text()).toContain("Input schema");
+    // Cross-link buttons rendered.
+    expect(wrapper.find("[data-testid=hooks-link-submitAssignment]").exists()).toBe(true);
+    expect(wrapper.find("[data-testid=trace-link-submitAssignment]").exists()).toBe(true);
+  });
+
+  it("clicking 'View hooks' navigates to /hooks?name=action.before:<name>", async () => {
+    const router = makeRouter();
+    await router.push("/actions?name=submitAssignment");
+    const wrapper = mount(Actions, { global: { plugins: [router] } });
+    await flushPromises();
+    await flushPromises();
+
+    await wrapper.find("[data-testid=hooks-link-submitAssignment]").trigger("click");
+    await flushPromises();
+
+    expect(router.currentRoute.value.path).toBe("/hooks");
+    expect(router.currentRoute.value.query.name).toBe("action.before:submitAssignment");
+  });
+});

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

@@ -0,0 +1,98 @@
+/**
+ * Home page mount test — verifies graceful empty rendering when:
+ *   - the manifest is empty
+ *   - the live telemetry stream errors immediately (no wire running)
+ *
+ * All three sections should still render with their empty-state messages.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createRouter, createMemoryHistory } from "vue-router";
+import Home from "../Home.vue";
+
+// Stub EventSource so we don't try to open a real connection.
+class FakeEventSource {
+  onopen: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  onmessage: ((m: { data: string }) => void) | null = null;
+  constructor(public readonly url: string) {
+    queueMicrotask(() => this.onerror?.());
+  }
+  close(): void {}
+}
+
+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/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 (u.includes("/_nwire/telemetry/recent")) {
+      return Promise.resolve(new Response("", { status: 502 }));
+    }
+    return Promise.resolve(new Response("", { status: 404 }));
+  }) as typeof fetch;
+});
+
+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/>" } },
+    ],
+  });
+}
+
+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();
+
+    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);
+  });
+});

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

@@ -0,0 +1,119 @@
+/**
+ * Hooks page deep-link test — verifies:
+ *   1. /hooks?name=<hookName> preselects the matching hook by id.
+ *   2. When the hook is a `plugin.boot:<n>` / `plugin.shutdown:<n>` hook,
+ *      a "Registered by" link is rendered that navigates to
+ *      /plugins?name=<n>.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createRouter, createMemoryHistory } from "vue-router";
+import Hooks from "../Hooks.vue";
+
+class FakeEventSource {
+  onopen: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  onmessage: ((m: { data: string }) => void) | null = null;
+  constructor(public readonly url: string) {
+    queueMicrotask(() => this.onerror?.());
+  }
+  close(): void {}
+}
+
+const pluginBootHook = {
+  id: "h-1",
+  name: "plugin.boot:auth",
+  chain: 2,
+  listeners: 1,
+};
+const otherHook = {
+  id: "h-2",
+  name: "action.before:submitAssignment",
+  chain: 1,
+  listeners: 0,
+};
+
+beforeEach(() => {
+  (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: [pluginBootHook, otherHook],
+            plugins: [],
+            graph: { events: [] },
+          }),
+          { status: 200 },
+        ),
+      );
+    }
+    return Promise.resolve(new Response("", { status: 404 }));
+  }) as typeof fetch;
+});
+
+function makeRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: "/hooks", name: "hooks", component: Hooks },
+      { path: "/plugins", name: "plugins", component: { template: "<div/>" } },
+    ],
+  });
+}
+
+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] } });
+    await flushPromises();
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("plugin.boot:auth");
+    expect(wrapper.find("[data-testid=plugin-link-auth]").exists()).toBe(true);
+  });
+
+  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] } });
+    await flushPromises();
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("action.before:submitAssignment");
+    expect(wrapper.find("[data-testid^=plugin-link-]").exists()).toBe(false);
+  });
+
+  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] } });
+    await flushPromises();
+    await flushPromises();
+
+    await wrapper.find("[data-testid=plugin-link-auth]").trigger("click");
+    await flushPromises();
+
+    expect(router.currentRoute.value.path).toBe("/plugins");
+    expect(router.currentRoute.value.query.name).toBe("auth");
+  });
+});

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

@@ -0,0 +1,80 @@
+/**
+ * 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.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createRouter, createMemoryHistory } from "vue-router";
+import Plugins from "../Plugins.vue";
+
+class FakeEventSource {
+  onopen: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  onmessage: ((m: { data: string }) => void) | null = null;
+  constructor(public readonly url: string) {
+    queueMicrotask(() => this.onerror?.());
+  }
+  close(): void {}
+}
+
+beforeEach(() => {
+  (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 },
+        ),
+      );
+    }
+    return Promise.resolve(new Response("", { status: 404 }));
+  }) as typeof fetch;
+});
+
+function makeRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: "/plugins", name: "plugins", component: Plugins },
+      { path: "/hooks", name: "hooks", component: { template: "<div/>" } },
+    ],
+  });
+}
+
+describe("Plugins", () => {
+  it("renders the empty state when cache.plugins is empty", async () => {
+    const router = makeRouter();
+    const wrapper = mount(Plugins, { global: { plugins: [router] } });
+    await flushPromises();
+
+    expect(wrapper.find("[data-testid=plugins-page]").exists()).toBe(true);
+    expect(wrapper.find("[data-testid=plugins-empty]").exists()).toBe(true);
+    // No list / detail / tap-list when empty.
+    expect(wrapper.find("[data-testid=plugins-list]").exists()).toBe(false);
+    expect(wrapper.find("[data-testid=plugins-detail]").exists()).toBe(false);
+  });
+});

package/src/style.css

@@ -0,0 +1,40 @@
+@import "tailwindcss";
+
+@theme {
+  --color-background: #09090b;
+  --color-foreground: #fafafa;
+  --color-card: #18181b;
+  --color-card-foreground: #fafafa;
+  --color-border: #27272a;
+  --color-input: #27272a;
+  --color-ring: #d4d4d8;
+  --color-muted: #27272a;
+  --color-muted-foreground: #a1a1aa;
+  --color-accent: #27272a;
+  --color-accent-foreground: #fafafa;
+  --color-primary: #fafafa;
+  --color-primary-foreground: #18181b;
+  --color-destructive: #7f1d1d;
+  --color-destructive-foreground: #fafafa;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+/* Tighter VueFlow defaults for our canvas. */
+.vue-flow__background {
+  background-color: #09090b;
+}
+.vue-flow__node {
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": { "@/*": ["./src/*"] },
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}