@nwire/studio 0.10.1 → 0.11.1

package/src/lib/cache.ts

@@ -18,14 +18,16 @@ export interface SourceLocationEntry {
 export interface ActionEntry {
   name: string;
   description?: string;
-  module: string;
   app: string;
-  schema: object;
+  /** Zod input schema serialized by the scanner. */
+  inputSchema?: unknown;
   retry?: object;
   policy?: string | readonly string[];
+  /** True when a handler was wired via defineAction({handler}). */
   hasInlineHandler: boolean;
+  /** Event names this action emits, in declaration order. */
   emits: string[];
-  /** True when the module's manifest marked this action `.public()`. */
+  /** True when the action def carries the `.public()` mark. */
   public?: boolean;
   persona?: string;
   journeyStep?: string;
@@ -38,61 +40,60 @@ export interface ActionEntry {
 export interface ExternalCallEntry {
   name: string;
   description?: string;
-  module: string;
   app: string;
-  target: { provider: string; endpoint: string; region?: string };
-  request: object;
+  target?: { provider: string; endpoint: string; region?: string };
+  request?: object;
   response?: object;
-  hasIdempotencyKey: boolean;
+  hasIdempotencyKey?: boolean;
   slo?: { p95LatencyMs?: number; successRate?: number };
   retry?: { max: number; backoff?: string };
   tags?: string[];
+  source?: SourceLocationEntry;
 }
 
 export interface InboundWebhookEntry {
   name: string;
   description?: string;
-  module: string;
   app: string;
-  source: string;
-  path: string;
-  hasSignatureVerifier: boolean;
+  source?: SourceLocationEntry;
+  path?: string;
+  hasSignatureVerifier?: boolean;
   dedupe?: { window: string };
-  discriminator: string;
-  routes: Record<string, string>;
+  discriminator?: string;
+  routes?: Record<string, string>;
   tags?: string[];
 }
 
 export interface OutboxEntry {
   name: string;
   description?: string;
-  module: string;
   app: string;
-  publishes: string[];
-  flushIntervalMs: number;
-  maxBatch: number;
+  publishes?: string[];
+  flushIntervalMs?: number;
+  maxBatch?: number;
   tags?: string[];
+  source?: SourceLocationEntry;
 }
 
 export interface InboxEntry {
   name: string;
   description?: string;
-  module: string;
   app: string;
-  window: string;
-  on: string[];
+  window?: string;
+  on?: string[];
   tags?: string[];
+  source?: SourceLocationEntry;
 }
 
 export interface CronEntry {
   name: string;
   description?: string;
-  module: string;
   app: string;
   schedule: string;
-  dispatches: string;
+  dispatches?: string;
   timezone?: string;
   tags?: string[];
+  source?: SourceLocationEntry;
 }
 
 /**
@@ -102,12 +103,13 @@ export interface CronEntry {
  */
 export interface WorkflowEntry {
   name: string;
-  module: string;
   app: string;
   description?: string;
+  /** Event names this workflow listens to. */
   subscribesTo: string[];
+  /** Action names this workflow dispatches inside its body. */
   dispatches: string[];
-  /** True when the module's manifest marked this workflow `.public()`. */
+  /** True when the workflow def carries the `.public()` mark. */
   public?: boolean;
   source?: SourceLocationEntry;
 }
@@ -115,43 +117,28 @@ export interface WorkflowEntry {
 export interface EventEntry {
   name: string;
   description?: string;
-  module: string;
   app: string;
-  visibility: "public" | "internal";
-  /** True when the module's manifest marked this event `.public()`. */
+  /** True when the event def carries the `.public()` mark — reaches outbound sinks. */
   public?: boolean;
-  schema: object;
-  outcome?: "success" | "failure" | "milestone" | "warning";
-  businessWeight?: number;
+  version?: number;
   audience?: string[];
   source?: SourceLocationEntry;
 }
 
 export interface ActorEntry {
   name: string;
-  module: string;
   app: string;
-  key: string;
-  initial: string;
-  states: Array<{
-    name: string;
-    final?: boolean;
-    on: Array<{ eventName: string; target?: string }>;
-    after: Array<{ timerName: string; action: string; delay: string }>;
-  }>;
-  methods: string[];
-  schema: object;
-  stuckThresholds?: Record<string, number>;
-  slas?: Record<string, { maxDurationMs: number; escalateTo?: string }>;
+  /** State names declared in the actor's `states` map. */
+  states: string[];
   source?: SourceLocationEntry;
 }
 
 export interface ProjectionEntry {
   name: string;
-  module: string;
   app: string;
-  listens: string[];
   description?: string;
+  /** Event names this projection folds in. */
+  listens: string[];
   freshness?: { p95MsBehindStream?: number };
   source?: SourceLocationEntry;
 }
@@ -159,52 +146,40 @@ export interface ProjectionEntry {
 export interface QueryEntry {
   name: string;
   description?: string;
-  module: string;
   app: string;
-  projection: string;
-  schema: object;
-  /** True when the module's manifest marked this query `.public()`. */
+  /** Backing projection name (projection-form queries only). */
+  projection?: string;
+  /** True when the query def carries the `.public()` mark. */
   public?: boolean;
   slo?: { p95LatencyMs?: number };
   cacheable?: boolean;
   source?: SourceLocationEntry;
 }
 
-export interface ModuleEntry {
-  name: string;
-  app: string;
-  provides: { events: string[]; actions: string[] };
-  needs: { events: string[]; externalEvents: string[]; actions: string[] };
-  counts: {
-    actions: number;
-    actors: number;
-    projections: number;
-    queries: number;
-    workflows: number;
-    events: number;
-    routes: number;
-  };
-  description?: string;
-  owners?: string[];
-  journey?: { id: string; label: string; description?: string }[];
-  source?: SourceLocationEntry;
-}
-
 export interface AppEntry {
   name: string;
   description?: string;
-  modules: string[];
+  /** Plugin names installed on this app, in install order. */
+  plugins: string[];
   tenantModel?: "single" | "per-org" | "per-account" | "per-workspace";
   tenantKey?: string;
 }
 
+export interface SinkEntry {
+  name: string;
+  app: string;
+  /** Adapter kind tag — "bullmq", "nats", "capture", etc. */
+  kind?: string;
+  position: "early" | "middle" | "terminal";
+  direction: "outbound";
+}
+
 export interface RouteEntry {
   method: string;
   path: string;
-  target: string;
-  targetKind: "action" | "query" | "resolver";
-  module: string;
-  app: string;
+  target?: string;
+  targetKind?: "action" | "query" | "resolver";
+  app?: string;
 }
 
 export interface ResolverEntry {
@@ -229,14 +204,17 @@ export interface ResolverEntry {
   sunsetDate?: string;
 }
 
+/**
+ * One directed edge in the static event graph as emitted by `@nwire/scan`.
+ * `from` and `to` are name identifiers (action / event / workflow /
+ * projection) per the `via` discriminator. Multiple edges share the
+ * same source or target — e.g. one event consumed by N projections
+ * shows up as N "folds" edges.
+ */
 export interface EventGraphEdge {
-  event: string;
-  producer: { app: string; module: string };
-  consumers: Array<{
-    app: string;
-    module: string;
-    via: "workflow" | "projection" | "actor" | "external";
-  }>;
+  from: string;
+  to: string;
+  via: "emits" | "folds" | "subscribes" | "dispatches";
 }
 
 export interface HookEntry {
@@ -270,7 +248,6 @@ export interface DIBindingEntry {
 export interface Cache {
   generatedAt: string;
   apps: AppEntry[];
-  modules: ModuleEntry[];
   actions: ActionEntry[];
   events: EventEntry[];
   actors: ActorEntry[];
@@ -286,6 +263,7 @@ export interface Cache {
   crons: CronEntry[];
   hooks: HookEntry[];
   plugins: PluginEntry[];
+  sinks: SinkEntry[];
   bindings: DIBindingEntry[];
   graph: { events: EventGraphEdge[] };
 }

package/src/lib/normalize-cache.ts

@@ -29,7 +29,6 @@ export interface NormalizeResult {
 
 const ARRAY_FIELDS = [
   "apps",
-  "modules",
   "actions",
   "events",
   "actors",
@@ -45,6 +44,7 @@ const ARRAY_FIELDS = [
   "crons",
   "hooks",
   "plugins",
+  "sinks",
   "bindings",
 ] as const;
 

package/src/lib/project-catalog.ts

@@ -28,7 +28,7 @@ export interface ProjectSnapshot {
    *  visits before scan finishes may not have them. */
   readonly composition?: {
     readonly apps: number;
-    readonly modules: number;
+    readonly plugins: number;
     readonly actions: number;
     readonly events: number;
     readonly resolvers?: number;
@@ -79,6 +79,8 @@ export function upsertCurrent(snapshot: ProjectSnapshot): void {
  * the launch-time project from `/__nwire/project`).
  */
 const ACTIVE_KEY = "nwire.activeProject";
+const ACTIVE_SLUG_KEY = "nwire.studio.activeSlug";
+
 export function getActiveProjectCwd(): string | null {
   if (typeof localStorage === "undefined") return null;
   try {
@@ -97,6 +99,42 @@ export function setActiveProjectCwd(cwd: string | null): void {
   }
 }
 
+/**
+ * Derive a stable URL slug from a project's package name (preferred) or
+ * the basename of its cwd (fallback). Slugs are kebab-cased, alphanum
+ * only — anything else collapses to `-`.
+ */
+export function projectSlug(snapshot: { name?: string; cwd: string }): string {
+  const raw = (
+    snapshot.name && snapshot.name.length > 0
+      ? snapshot.name
+      : (snapshot.cwd.split("/").filter(Boolean).pop() ?? "project")
+  )
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "");
+  return raw || "project";
+}
+
+/** Reverse-map a URL slug back to its cwd via the catalog. */
+export function cwdForSlug(slug: string): string | null {
+  const catalog = loadCatalog();
+  for (const snapshot of Object.values(catalog)) {
+    if (projectSlug(snapshot) === slug) return snapshot.cwd;
+  }
+  return null;
+}
+
+export function setActiveSlug(slug: string | null): void {
+  if (typeof localStorage === "undefined") return;
+  try {
+    if (slug) localStorage.setItem(ACTIVE_SLUG_KEY, slug);
+    else localStorage.removeItem(ACTIVE_SLUG_KEY);
+  } catch {
+    // ignore
+  }
+}
+
 /**
  * `fetch` wrapper that appends `?project=<cwd>` to every Studio-internal
  * URL. The server's `targetCwd(req)` reads this and serves the right

package/src/main.ts

@@ -52,7 +52,6 @@ import Topology from "./pages/Topology.vue";
 import Trace from "./pages/Trace.vue";
 import Actions from "./pages/Actions.vue";
 import Events from "./pages/Events.vue";
-import Modules from "./pages/Modules.vue";
 import Workflows from "./pages/Workflows.vue";
 import Hooks from "./pages/Hooks.vue";
 import Plugins from "./pages/Plugins.vue";
@@ -61,27 +60,64 @@ import Dispatch from "./pages/Dispatch.vue";
 import Run from "./pages/Run.vue";
 import Commands from "./pages/Commands.vue";
 import Projects from "./pages/Projects.vue";
+import Projections from "./pages/Projections.vue";
+import Queries from "./pages/Queries.vue";
+import Apps from "./pages/Apps.vue";
+import Sinks from "./pages/Sinks.vue";
+
+/**
+ * Routes are namespaced under `/projects/:slug` so every URL is
+ * project-pinned. Bookmarks and shared links carry the project
+ * identity; multiple Studio tabs can hold different projects without
+ * stomping each other.
+ *
+ * `/` and bare-page routes resolve the active project from
+ * localStorage and redirect into the slug-pinned route. The bare
+ * `/projects` catalog page is the one URL that's intentionally not
+ * project-pinned.
+ */
+const pageRoutes = [
+  { path: "", component: Home, name: "home" },
+  { path: "overview", component: Overview, name: "overview" },
+  { path: "topology", component: Topology, name: "topology" },
+  { path: "trace", component: Trace, name: "trace" },
+  { path: "apps", component: Apps, name: "apps" },
+  { path: "actions", component: Actions, name: "actions" },
+  { path: "events", component: Events, name: "events" },
+  { path: "workflows", component: Workflows, name: "workflows" },
+  { path: "hooks", component: Hooks, name: "hooks" },
+  { path: "plugins", component: Plugins, name: "plugins" },
+  { path: "projections", component: Projections, name: "projections" },
+  { path: "queries", component: Queries, name: "queries" },
+  { path: "sinks", component: Sinks, name: "sinks" },
+  { path: "dispatch", component: Dispatch, name: "dispatch" },
+  { path: "live", component: Live, name: "live" },
+  { path: "run", component: Run, name: "run" },
+  { path: "commands", component: Commands, name: "commands" },
+];
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
+    // Project catalog — global, not project-pinned.
+    { path: "/projects", component: Projects, name: "projects" },
+    // Project-pinned routes. Names get a `p-` prefix so they don't
+    // collide with the bare-path variants below.
+    {
+      path: "/projects/:slug",
+      children: pageRoutes.map((r) => ({ ...r, name: `p-${r.name}` })),
+    },
+    // Bare paths render the same pages. App.vue upgrades the URL to
+    // /projects/<slug>/... once the active project slug is known, so a
+    // user who lands on /actions ends up bookmark-friendly without
+    // breaking the load. Old bookmarks + CI test suites continue to
+    // work unchanged.
     { path: "/", component: Home, name: "home" },
-    { path: "/overview", component: Overview, name: "overview" },
-    { path: "/topology", component: Topology, name: "topology" },
-    { path: "/trace", component: Trace, name: "trace" },
-    // Back-compat redirect — the page formerly known as EventStorm.
+    ...pageRoutes
+      .filter((r) => r.path !== "")
+      .map((r) => ({ path: `/${r.path}`, component: r.component, name: r.name })),
     { path: "/eventstorm", redirect: "/trace" },
-    { path: "/modules", component: Modules, name: "modules" },
-    { path: "/actions", component: Actions, name: "actions" },
-    { path: "/events", component: Events, name: "events" },
-    { path: "/workflows", component: Workflows, name: "workflows" },
-    { path: "/hooks", component: Hooks, name: "hooks" },
-    { path: "/plugins", component: Plugins, name: "plugins" },
-    { path: "/dispatch", component: Dispatch, name: "dispatch" },
-    { path: "/live", component: Live, name: "live" },
-    { path: "/run", component: Run, name: "run" },
-    { path: "/commands", component: Commands, name: "commands" },
-    { path: "/projects", component: Projects, name: "projects" },
+    { path: "/modules", redirect: "/apps" },
   ],
 });
 

package/src/pages/Actions.vue

@@ -30,7 +30,6 @@ const filtered = computed(() => {
       !q ||
       a.name.toLowerCase().includes(q) ||
       (a.description ?? "").toLowerCase().includes(q) ||
-      a.module.toLowerCase().includes(q) ||
       a.app.toLowerCase().includes(q),
   );
 });
@@ -47,7 +46,7 @@ const detail = computed(() => filtered.value.find((a) => a.name === selected.val
           <Search class="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500" />
           <input
             v-model="filter"
-            placeholder="filter by name, module, app, description…"
+            placeholder="filter by name, app, description…"
             class="w-full bg-zinc-900 border border-zinc-800 rounded pl-7 pr-2 py-1.5 text-sm placeholder:text-zinc-600 focus:outline-none focus:border-zinc-600"
           />
         </div>
@@ -74,9 +73,7 @@ const detail = computed(() => filtered.value.find((a) => a.name === selected.val
                 :is="a.public ? Globe : Lock"
                 class="w-3 h-3"
                 :class="a.public ? 'text-emerald-400' : 'text-zinc-500'"
-                :title="
-                  a.public ? 'public — other modules may dispatch' : 'private — module-internal'
-                "
+                :title="a.public ? 'public — other apps may dispatch' : 'private — app-internal'"
               />
               <span class="text-[10px] text-zinc-500">{{ a.app }}</span>
             </div>
@@ -95,7 +92,7 @@ const detail = computed(() => filtered.value.find((a) => a.name === selected.val
       <div v-else class="p-6 space-y-5">
         <div>
           <div class="text-[10px] uppercase tracking-wide text-zinc-500">
-            {{ detail.app }} · {{ detail.module }}
+            {{ 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">
@@ -136,16 +133,10 @@ const detail = computed(() => filtered.value.find((a) => a.name === selected.val
         </div>
 
         <div v-if="detail.source" class="flex items-center gap-2">
-          <button
-            type="button"
-            class="inline-flex items-center"
-            @click="sourcePreview = detail.source!"
-          >
-            <SourcePill :source="detail.source" />
-          </button>
+          <SourcePill :source="detail.source" @click="sourcePreview = detail.source!" />
         </div>
 
-        <SchemaTree :schema="detail.schema" label="Input schema" />
+        <SchemaTree :schema="detail.inputSchema" label="Input schema" />
 
         <div class="flex flex-wrap gap-2">
           <button

package/src/pages/Apps.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+/**
+ * Apps — every App registered in this workspace. An App is the
+ * bounded-context unit; multi-app systems compose via
+ * `appCompose(a, b)` and run side-by-side under one endpoint.
+ */
+import { computed, ref } from "vue";
+import { useCache } from "@/lib/cache";
+import { Network, Puzzle } 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 filtered = computed(() => {
+  if (!cache.value) return [];
+  const q = filter.value.toLowerCase();
+  return cache.value.apps.filter(
+    (a) =>
+      !q || a.name.toLowerCase().includes(q) || (a.description ?? "").toLowerCase().includes(q),
+  );
+});
+
+const detail = computed(() => filtered.value.find((a) => a.name === selected.value) ?? null);
+
+function countFor(
+  appName: string,
+  kind: "actions" | "events" | "projections" | "queries" | "workflows",
+): number {
+  if (!cache.value) return 0;
+  return cache.value[kind].filter((x: { app: string }) => x.app === appName).length;
+}
+
+function pluginsFor(appName: string) {
+  if (!cache.value) return [];
+  return cache.value.plugins.filter((p) => p.app === appName);
+}
+
+function sinksFor(appName: string) {
+  if (!cache.value) return [];
+  return cache.value.sinks?.filter((s) => s.app === appName) ?? [];
+}
+</script>
+
+<template>
+  <div v-if="cache" class="h-full flex flex-col" data-testid="apps-page">
+    <div class="p-6 pb-3 border-b border-zinc-800">
+      <PageHeader
+        title="Apps"
+        subtitle="Every App registered in this workspace — its plugins, surface, and outbound sinks."
+        :icon="Network"
+        icon-color="text-emerald-400"
+        :count="filtered.length"
+        :total="cache.apps.length"
+      />
+    </div>
+
+    <EmptyState
+      v-if="cache.apps.length === 0"
+      title="No apps in cache"
+      hint="Apps are declared via createApp({appName, plugins}). Run `nwire cache` after adding one."
+      :icon="Network"
+    />
+
+    <MasterDetail v-else class="flex-1">
+      <template #listHeader>
+        <FilterInput v-model="filter" placeholder="filter by name…" />
+      </template>
+
+      <template #list>
+        <ListRow
+          v-for="app in filtered"
+          :key="app.name"
+          :selected="selected === app.name"
+          @click="selected = app.name"
+        >
+          <template #title>
+            <Network class="w-3 h-3 text-emerald-400 shrink-0" />
+            <span class="font-mono text-sm truncate">{{ app.name }}</span>
+          </template>
+          <template #meta>
+            <span class="text-[10px] text-zinc-500">
+              {{ app.plugins.length }} plugin{{ app.plugins.length === 1 ? "" : "s" }}
+            </span>
+          </template>
+          <template v-if="app.description" #description>
+            {{ app.description }}
+          </template>
+        </ListRow>
+      </template>
+
+      <template #empty
+        >Select an app to see its plugin stack, primitive counts, and sinks.</template
+      >
+
+      <template v-if="detail" #detail>
+        <div class="p-6 space-y-6" data-testid="app-detail">
+          <div>
+            <h2 class="font-mono text-xl">{{ 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="space-y-3">
+            <h3 class="text-xs uppercase tracking-wide text-zinc-500">Plugins</h3>
+            <div v-if="pluginsFor(detail.name).length === 0" class="text-xs text-zinc-600">
+              No plugins installed.
+            </div>
+            <div v-else class="flex flex-wrap gap-2">
+              <div
+                v-for="p in pluginsFor(detail.name)"
+                :key="p.name"
+                class="inline-flex items-center gap-1.5 rounded border border-zinc-800 bg-zinc-900/50 px-2.5 py-1 text-xs font-mono"
+              >
+                <Puzzle class="w-3 h-3 text-fuchsia-400" />
+                {{ p.name }}
+              </div>
+            </div>
+          </div>
+
+          <div class="space-y-3">
+            <h3 class="text-xs uppercase tracking-wide text-zinc-500">Outbound sinks</h3>
+            <div v-if="sinksFor(detail.name).length === 0" class="text-xs text-zinc-600">
+              No outbound sinks installed. Events stay in-process.
+            </div>
+            <div v-else class="space-y-1">
+              <div
+                v-for="s in sinksFor(detail.name)"
+                :key="s.name"
+                class="font-mono text-xs flex items-center gap-2"
+              >
+                <KindBadge variant="public">{{ s.position }}</KindBadge>
+                <span class="text-amber-200">{{ s.name }}</span>
+                <span v-if="s.kind" class="text-zinc-500">· {{ s.kind }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="space-y-3">
+            <h3 class="text-xs uppercase tracking-wide text-zinc-500">Surface</h3>
+            <div class="grid grid-cols-5 gap-3 text-sm">
+              <div>
+                <div class="text-zinc-500 text-[10px] uppercase">actions</div>
+                <div class="tabular-nums">{{ countFor(detail.name, "actions") }}</div>
+              </div>
+              <div>
+                <div class="text-zinc-500 text-[10px] uppercase">events</div>
+                <div class="tabular-nums">{{ countFor(detail.name, "events") }}</div>
+              </div>
+              <div>
+                <div class="text-zinc-500 text-[10px] uppercase">projections</div>
+                <div class="tabular-nums">{{ countFor(detail.name, "projections") }}</div>
+              </div>
+              <div>
+                <div class="text-zinc-500 text-[10px] uppercase">queries</div>
+                <div class="tabular-nums">{{ countFor(detail.name, "queries") }}</div>
+              </div>
+              <div>
+                <div class="text-zinc-500 text-[10px] uppercase">workflows</div>
+                <div class="tabular-nums">{{ countFor(detail.name, "workflows") }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </MasterDetail>
+  </div>
+</template>