@nwire/studio 0.12.1 → 0.13.0

package/src/pages/Sinks.vue

@@ -1,124 +0,0 @@
-<script setup lang="ts">
-/**
- * Sinks — outbound delivery surface. Each sink is a stage on the
- * runtime's outbound chain (early → middle → terminal). Endpoint
- * adapters install them at boot via `ctx.installSinkStage`.
- */
-import { computed, ref } from "vue";
-import { useCache } from "@/lib/cache";
-import { Waves, ArrowRight } from "lucide-vue-next";
-import {
-  PageHeader,
-  FilterInput,
-  EmptyState,
-  MasterDetail,
-  KindBadge,
-  ListRow,
-} from "@/components";
-
-const { cache } = useCache();
-const filter = ref("");
-const selected = ref<string | null>(null);
-
-const sinks = computed(() => cache.value?.sinks ?? []);
-
-const filtered = computed(() => {
-  if (!cache.value) return [];
-  const q = filter.value.toLowerCase();
-  return sinks.value.filter(
-    (s) =>
-      !q ||
-      s.name.toLowerCase().includes(q) ||
-      s.app.toLowerCase().includes(q) ||
-      (s.kind ?? "").toLowerCase().includes(q),
-  );
-});
-
-const key = (s: { app: string; name: string }) => `${s.app}::${s.name}`;
-const detail = computed(() => filtered.value.find((s) => key(s) === selected.value) ?? null);
-
-const positionVariant = (p: "early" | "middle" | "terminal") =>
-  p === "terminal" ? "public" : p === "middle" ? "neutral" : "private";
-</script>
-
-<template>
-  <div v-if="cache" class="h-full flex flex-col" data-testid="sinks-page">
-    <div class="p-6 pb-3 border-b border-zinc-800">
-      <PageHeader
-        title="Sinks"
-        subtitle="Outbound stages — every step in the runtime's outbound delivery chain."
-        :icon="Waves"
-        icon-color="text-amber-400"
-        :count="filtered.length"
-        :total="sinks.length"
-      />
-    </div>
-
-    <EmptyState
-      v-if="sinks.length === 0"
-      title="No outbound sinks installed"
-      hint="Outbound adapters (queue publisher, NATS, webhook, OTLP) install sinks at endpoint boot via ctx.installSinkStage. Apps without one keep events in-process."
-      :icon="Waves"
-    />
-
-    <MasterDetail v-else class="flex-1">
-      <template #listHeader>
-        <FilterInput v-model="filter" placeholder="filter by name, app, kind…" />
-      </template>
-
-      <template #list>
-        <ListRow
-          v-for="s in filtered"
-          :key="key(s)"
-          :selected="selected === key(s)"
-          @click="selected = key(s)"
-        >
-          <template #title>
-            <Waves class="w-3 h-3 text-amber-400 shrink-0" />
-            <span class="font-mono text-sm truncate">{{ s.name }}</span>
-          </template>
-          <template #meta>
-            <KindBadge :variant="positionVariant(s.position)">{{ s.position }}</KindBadge>
-            <span class="text-[10px] text-zinc-500">{{ s.app }}</span>
-          </template>
-          <template v-if="s.kind" #description>
-            <span class="text-zinc-500">kind</span>
-            <span class="ml-1 font-mono">{{ s.kind }}</span>
-          </template>
-        </ListRow>
-      </template>
-
-      <template #empty>Select a sink to see its position and adapter kind.</template>
-
-      <template v-if="detail" #detail>
-        <div class="p-6 space-y-5" data-testid="sink-detail">
-          <div>
-            <div class="text-[10px] uppercase tracking-wide text-zinc-500">{{ detail.app }}</div>
-            <h2 class="font-mono text-xl mt-1">{{ detail.name }}</h2>
-          </div>
-
-          <div class="flex flex-wrap gap-2">
-            <KindBadge :variant="positionVariant(detail.position)">
-              {{ detail.position }}
-            </KindBadge>
-            <KindBadge variant="neutral">{{ detail.direction }}</KindBadge>
-            <KindBadge v-if="detail.kind" variant="neutral">kind: {{ detail.kind }}</KindBadge>
-          </div>
-
-          <div class="text-xs text-zinc-400 max-w-xl space-y-2">
-            <p>
-              <ArrowRight class="w-3 h-3 inline mr-1 text-amber-400" />
-              Every public event the App publishes runs through the outbound chain in
-              <em>position</em> order: early → middle → terminal. Terminal stages do the transport
-              delivery; early/middle do logging, metrics, routing.
-            </p>
-            <p v-if="detail.position === 'terminal'">
-              Only one terminal stage per <em>kind</em> is allowed — the runtime rejects a second
-              registration. Swap implementations by installing a different kind.
-            </p>
-          </div>
-        </div>
-      </template>
-    </MasterDetail>
-  </div>
-</template>

package/src/pages/TraceNode.vue

@@ -1,164 +0,0 @@
-<script setup lang="ts">
-/**
- * One node in the trace tree. Renders the event card and (when expanded)
- * recursively renders its causation children.
- *
- * Indentation comes from `depth`. The collapsed/expanded state lives in
- * the parent page (`expanded` ref keyed by messageId) so it survives
- * re-renders.
- */
-import { computed } from "vue";
-import { useRouter } from "vue-router";
-import { ChevronDown, ChevronRight, Globe, Network, Zap } from "lucide-vue-next";
-import { useCache } from "@/lib/cache";
-import SourcePill from "@/components/SourcePill.vue";
-
-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;
-}
-
-interface TraceNode {
-  evt: BufferedEvent;
-  children: TraceNode[];
-}
-
-interface SourceLoc {
-  file: string;
-  line: number;
-  column?: number;
-}
-
-const props = defineProps<{
-  node: TraceNode;
-  depth: number;
-  eventIndex: Map<string, { app: string; source?: SourceLoc }>;
-  isExpanded: (id: string) => boolean;
-  toggle: (id: string) => void;
-  formatTime: (iso: string) => string;
-  payloadPreview: (p: unknown) => string;
-}>();
-
-const emit = defineEmits<{ (e: "openSource", source: SourceLoc): void }>();
-
-const router = useRouter();
-const { cache } = useCache();
-
-const displayName = props.node.evt.eventName ?? "(framework lifecycle)";
-const meta = props.node.evt.eventName ? props.eventIndex.get(props.node.evt.eventName) : undefined;
-const source = meta?.source;
-
-/**
- * The action whose handler emitted this event, if any. We look it up by
- * scanning cache.actions for one whose `emits` list contains this event
- * name. First match wins. Used to render the "Action: <name>" deep link
- * back to /actions?name=<name>.
- */
-const dispatchingAction = computed<string | null>(() => {
-  const evtName = props.node.evt.eventName;
-  if (!evtName || !cache.value) return null;
-  const found = cache.value.actions.find((a) => a.emits.includes(evtName));
-  return found?.name ?? null;
-});
-
-function openAction(name: string): void {
-  void router.push({ path: "/actions", query: { name } });
-}
-
-function open(s: SourceLoc | undefined) {
-  if (s) emit("openSource", s);
-}
-</script>
-
-<template>
-  <div :style="{ paddingLeft: `${depth * 16}px` }">
-    <div class="flex items-start gap-2">
-      <button
-        type="button"
-        class="mt-1.5 text-zinc-500 hover:text-zinc-300 shrink-0"
-        :class="{ invisible: node.children.length === 0 }"
-        @click="toggle(node.evt.envelope.messageId)"
-      >
-        <ChevronDown v-if="isExpanded(node.evt.envelope.messageId)" class="w-3.5 h-3.5" />
-        <ChevronRight v-else class="w-3.5 h-3.5" />
-      </button>
-
-      <div class="flex-1 min-w-0">
-        <div
-          class="rounded border border-zinc-800 bg-zinc-900/30 hover:bg-zinc-900/60 transition-colors p-3"
-        >
-          <div class="flex items-center gap-2 flex-wrap">
-            <component
-              :is="node.evt.source === 'external' ? Network : Globe"
-              class="w-3.5 h-3.5"
-              :class="node.evt.source === 'external' ? 'text-violet-400' : 'text-emerald-400'"
-            />
-            <span
-              class="font-mono text-sm truncate"
-              :class="node.evt.eventName ? 'text-zinc-100' : 'text-zinc-500 italic'"
-            >
-              {{ displayName }}
-            </span>
-            <span class="text-[10px] text-zinc-500 tabular-nums">
-              {{ formatTime(node.evt.capturedAt) }}
-            </span>
-            <span v-if="meta" class="text-[10px] text-zinc-500 font-mono"> · {{ meta.app }} </span>
-            <button v-if="source" type="button" class="ml-auto" @click="open(source)">
-              <SourcePill :source="source" compact />
-            </button>
-          </div>
-          <div class="text-[10px] text-zinc-500 font-mono mt-1 truncate">
-            msg {{ node.evt.envelope.messageId.split("-")[0] }} ← caused by
-            {{ node.evt.envelope.causationId.split("-")[0] }}
-          </div>
-          <div v-if="dispatchingAction" class="text-[10px] mt-1">
-            <button
-              type="button"
-              class="inline-flex items-center gap-1 font-mono text-amber-300 hover:underline"
-              :data-testid="`action-link-${dispatchingAction}`"
-              @click="openAction(dispatchingAction)"
-            >
-              <Zap class="w-3 h-3 text-amber-400" />
-              Action: {{ dispatchingAction }}
-            </button>
-          </div>
-          <div v-if="node.evt.payload" class="text-[11px] font-mono text-zinc-400 mt-1.5 truncate">
-            <Zap class="inline w-3 h-3 text-amber-400 mr-1" />
-            {{ payloadPreview(node.evt.payload) }}
-          </div>
-        </div>
-
-        <div
-          v-if="isExpanded(node.evt.envelope.messageId) && node.children.length"
-          class="mt-2 space-y-2"
-        >
-          <TraceNode
-            v-for="child in node.children"
-            :key="child.evt.envelope.messageId"
-            :node="child"
-            :depth="depth + 1"
-            :event-index="eventIndex"
-            :is-expanded="isExpanded"
-            :toggle="toggle"
-            :format-time="formatTime"
-            :payload-preview="payloadPreview"
-            @open-source="emit('openSource', $event)"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/src/pages/Workflows.vue

@@ -1,184 +0,0 @@
-<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;
-  const found = cache.value?.workflows.find((w) => w.name === name);
-  if (found) selected.value = `${found.app}::${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.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; name: string }) => `${w.app}::${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, app, 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 apps' : 'private — app-internal'"
-            />
-            <span class="text-[10px] text-zinc-500">{{ w.app }}</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 }}
-            </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">
-            <SourcePill :source="detail.source" @click="sourcePreview = detail.source!" />
-          </div>
-        </div>
-      </template>
-    </MasterDetail>
-    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
-  </div>
-</template>

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

@@ -1,98 +0,0 @@
-/**
- * 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__/Projections.test.ts

@@ -1,90 +0,0 @@
-/**
- * Projections page — renders the list from cache and cross-links to
- * each query that reads the projection.
- */
-import { describe, it, expect, beforeEach, vi } from "vitest";
-import { mount, flushPromises } from "@vue/test-utils";
-import { createRouter, createMemoryHistory } from "vue-router";
-import Projections from "../Projections.vue";
-
-const counterProjection = {
-  name: "counter-total",
-  app: "shop",
-};
-const counterQuery = {
-  name: "counter.get-count",
-  app: "shop",
-  public: false,
-  projection: "counter-total",
-};
-
-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: [],
-            events: [],
-            actors: [],
-            projections: [counterProjection],
-            queries: [counterQuery],
-            resolvers: [],
-            routes: [],
-            workflows: [],
-            externalCalls: [],
-            inboundWebhooks: [],
-            outboxes: [],
-            inboxes: [],
-            crons: [],
-            hooks: [],
-            plugins: [],
-            bindings: [],
-            graph: { events: [] },
-          }),
-          { status: 200 },
-        ),
-      );
-    }
-    return Promise.resolve(new Response("", { status: 404 }));
-  }) as typeof fetch;
-});
-
-function makeRouter() {
-  return createRouter({
-    history: createMemoryHistory(),
-    routes: [
-      { path: "/projections", name: "projections", component: Projections },
-      { path: "/queries", name: "queries", component: { template: "<div/>" } },
-    ],
-  });
-}
-
-describe("Projections", () => {
-  it("renders projections from the cache", async () => {
-    const router = makeRouter();
-    await router.push("/projections");
-    const wrapper = mount(Projections, { global: { plugins: [router] } });
-    await flushPromises();
-    await flushPromises();
-
-    expect(wrapper.text()).toContain("counter-total");
-    expect(wrapper.find("[data-testid=projections-page]").exists()).toBe(true);
-  });
-
-  it("deep-links via ?name=… and shows linked queries", async () => {
-    const router = makeRouter();
-    await router.push("/projections?name=counter-total");
-    const wrapper = mount(Projections, { global: { plugins: [router] } });
-    await flushPromises();
-    await flushPromises();
-
-    const detail = wrapper.find("[data-testid=projection-detail]");
-    expect(detail.exists()).toBe(true);
-    expect(detail.text()).toContain("counter.get-count");
-  });
-});