@nwire/studio 0.10.0 → 0.11.0

package/src/pages/Dispatch.vue

@@ -35,7 +35,7 @@ const filtered = computed(() => {
     (a) =>
       !q ||
       a.name.toLowerCase().includes(q) ||
-      a.module.toLowerCase().includes(q) ||
+      a.app.toLowerCase().includes(q) ||
       (a.description ?? "").toLowerCase().includes(q),
   );
 });
@@ -57,7 +57,7 @@ interface SchemaField {
 const schemaFields = computed<SchemaField[]>(() => {
   if (!selected.value) return [];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const schema = selected.value.schema as any;
+  const schema = selected.value.inputSchema as any;
   if (!schema?.properties) return [];
   const required = new Set<string>(Array.isArray(schema.required) ? schema.required : []);
   const out: SchemaField[] = [];
@@ -83,7 +83,7 @@ watch(selectedName, () => {
   result.value = null;
   if (!selected.value) return;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const schema = selected.value.schema as any;
+  const schema = selected.value.inputSchema as any;
   const scaffold: Record<string, unknown> = {};
   if (schema?.properties) {
     for (const [key, prop] of Object.entries(schema.properties)) {
@@ -223,7 +223,7 @@ async function dispatch() {
       <div v-else class="p-6 space-y-5">
         <div>
           <div class="text-[10px] uppercase tracking-wide text-zinc-500">
-            {{ selected.app }} · {{ selected.module }}
+            {{ selected.app }}
           </div>
           <h2 class="font-mono text-xl mt-1">{{ selected.name }}</h2>
           <p v-if="selected.description" class="text-sm text-zinc-400 mt-2 max-w-2xl">

package/src/pages/Events.vue

@@ -22,10 +22,6 @@ function applyQueryPreselect(): void {
 onMounted(applyQueryPreselect);
 watch(() => route.query.name, applyQueryPreselect);
 
-function openModule(name: string): void {
-  void router.push({ path: "/modules", query: { name } });
-}
-
 const filtered = computed(() => {
   if (!cache.value) return [];
   const q = filter.value.toLowerCase();
@@ -34,15 +30,51 @@ const filtered = computed(() => {
       !q ||
       e.name.toLowerCase().includes(q) ||
       (e.description ?? "").toLowerCase().includes(q) ||
-      e.module.toLowerCase().includes(q),
+      e.app.toLowerCase().includes(q),
   );
 });
 
 const detail = computed(() => filtered.value.find((e) => e.name === selected.value) ?? null);
 
-const detailEdge = computed(() => {
-  if (!cache.value || !detail.value) return null;
-  return cache.value.graph.events.find((e) => e.event === detail.value!.name);
+/** Producers — graph edges where `to` is this event and via === "emits". */
+const producers = computed(() => {
+  if (!cache.value || !detail.value) return [];
+  return cache.value.graph.events
+    .filter((edge) => edge.to === detail.value!.name && edge.via === "emits")
+    .map((edge) => edge.from);
+});
+
+/** Consumers — graph edges where `from` is this event. */
+const consumers = computed(() => {
+  if (!cache.value || !detail.value) return [];
+  return cache.value.graph.events
+    .filter((edge) => edge.from === detail.value!.name)
+    .map((edge) => ({ name: edge.to, via: edge.via }));
+});
+
+function openProducer(name: string): void {
+  void router.push({ path: "/actions", query: { name } });
+}
+
+function openConsumer(c: { name: string; via: string }): void {
+  if (c.via === "folds") {
+    void router.push({ path: "/projections", query: { name: c.name } });
+  } else if (c.via === "subscribes") {
+    void router.push({ path: "/workflows", query: { name: c.name } });
+  } else if (c.via === "dispatches") {
+    void router.push({ path: "/actions", query: { name: c.name } });
+  }
+}
+
+/**
+ * Payload schema — the scanner emits it on actions (`inputSchema`) but
+ * not yet on events. Render whatever the manifest happens to carry
+ * under `.schema` if anything; otherwise the SchemaTree slot just
+ * doesn't render.
+ */
+const detailSchema = computed<unknown>(() => {
+  const d = detail.value as { schema?: unknown } | null;
+  return d?.schema;
 });
 </script>
 
@@ -77,11 +109,10 @@ const detailEdge = computed(() => {
               <span class="font-mono text-sm truncate">{{ e.name }}</span>
             </div>
             <component
-              :is="(e.public ?? e.visibility === 'public') ? Globe : Lock"
+              :is="e.public ? Globe : Lock"
               class="w-3 h-3 shrink-0"
-              :class="
-                (e.public ?? e.visibility === 'public') ? 'text-emerald-400' : 'text-zinc-500'
-              "
+              :class="e.public ? 'text-emerald-400' : 'text-zinc-500'"
+              :title="e.public ? 'public — reaches outbound sinks' : 'private — stays in-process'"
             />
           </div>
           <div v-if="e.description" class="text-xs text-zinc-500 mt-1 line-clamp-2 ml-5">
@@ -96,17 +127,18 @@ const detailEdge = computed(() => {
       <div v-else class="p-6 space-y-5">
         <div>
           <div class="text-[10px] uppercase tracking-wide text-zinc-500 flex items-center gap-2">
-            <span>{{ detail.app }} · {{ detail.module }}</span>
+            <span>{{ detail.app }}</span>
             <span
               class="px-1.5 py-0.5 rounded text-[10px] uppercase"
               :class="
-                (detail.public ?? detail.visibility === 'public')
+                detail.public
                   ? 'bg-emerald-950/50 border border-emerald-900 text-emerald-300'
                   : 'bg-zinc-950/50 border border-zinc-800 text-zinc-400'
               "
             >
-              {{ (detail.public ?? detail.visibility === "public") ? "public" : "private" }}
+              {{ detail.public ? "public" : "private" }}
             </span>
+            <span v-if="detail.version" class="text-zinc-600">v{{ detail.version }}</span>
           </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">
@@ -114,51 +146,63 @@ const detailEdge = computed(() => {
           </p>
         </div>
 
-        <div v-if="detailEdge">
+        <div v-if="producers.length > 0 || consumers.length > 0">
           <h3 class="text-xs uppercase tracking-wide text-zinc-500 mb-2">Flow</h3>
-          <div class="text-sm space-y-1">
-            <div class="flex items-center gap-2">
-              <span class="text-zinc-500">Produced by:</span>
-              <button
-                type="button"
-                class="font-mono underline-offset-2 hover:underline text-zinc-200"
-                :data-testid="`module-link-${detailEdge.producer.module}`"
-                @click="openModule(detailEdge.producer.module)"
-              >
-                {{ detailEdge.producer.app }}/{{ detailEdge.producer.module }}
-              </button>
+          <div class="text-sm space-y-2">
+            <div v-if="producers.length > 0" class="flex items-start gap-2">
+              <span class="text-zinc-500 mt-0.5">Produced by:</span>
+              <div class="flex flex-wrap gap-1.5">
+                <button
+                  v-for="p in producers"
+                  :key="p"
+                  type="button"
+                  class="flex items-center gap-1 text-xs font-mono bg-zinc-900 border border-zinc-800 rounded px-1.5 py-0.5 hover:bg-zinc-800"
+                  @click="openProducer(p)"
+                >
+                  <ArrowRight class="w-2.5 h-2.5 text-amber-400" />
+                  {{ p }}
+                </button>
+              </div>
             </div>
-            <div class="flex items-start gap-2">
+            <div v-if="consumers.length > 0" class="flex items-start gap-2">
               <span class="text-zinc-500 mt-0.5">Consumed by:</span>
               <div class="flex flex-wrap gap-1.5">
                 <button
-                  v-for="(c, i) in detailEdge.consumers"
+                  v-for="(c, i) in consumers"
                   :key="i"
                   type="button"
                   class="flex items-center gap-1 text-xs font-mono bg-zinc-900 border border-zinc-800 rounded px-1.5 py-0.5 hover:bg-zinc-800"
-                  :data-testid="`module-link-${c.module}`"
-                  @click="openModule(c.module)"
+                  @click="openConsumer(c)"
                 >
                   <ArrowRight class="w-2.5 h-2.5 text-zinc-500" />
-                  {{ c.app }}/{{ c.module }}
+                  {{ c.name }}
                   <span class="text-[9px] uppercase text-zinc-500">{{ c.via }}</span>
                 </button>
               </div>
             </div>
+            <div
+              v-if="detail.audience && detail.audience.length > 0"
+              class="flex items-start gap-2"
+            >
+              <span class="text-zinc-500 mt-0.5">Audience:</span>
+              <div class="flex flex-wrap gap-1.5">
+                <span
+                  v-for="a in detail.audience"
+                  :key="a"
+                  class="text-xs font-mono bg-zinc-900 border border-zinc-800 rounded px-1.5 py-0.5"
+                >
+                  {{ a }}
+                </span>
+              </div>
+            </div>
           </div>
         </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="Payload schema" />
+        <SchemaTree v-if="detailSchema" :schema="detailSchema" label="Payload schema" />
       </div>
     </div>
     <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />

package/src/pages/Home.vue

@@ -24,6 +24,7 @@ import {
   Flame,
   CheckCircle2,
   WifiOff,
+  Cigarette,
 } from "lucide-vue-next";
 import { useCache } from "@/lib/cache";
 import { PageHeader, EmptyState } from "@/components";
@@ -234,24 +235,22 @@ const bootSummary = computed(() => {
   const recs = pluginsBootedRecords.value;
   if (recs.length === 0) return null;
   let plugins = 0;
-  let modules = 0;
   let totalMs = 0;
   for (const r of recs) {
     totalMs += r.payload.durationMs ?? 0;
-    if (r.payload.kind === "module") modules++;
-    else plugins++;
+    plugins++;
   }
-  return { total: recs.length, plugins, modules, totalMs };
+  return { total: recs.length, plugins, totalMs };
 });
 
 const compositionStats = computed(() => {
   if (!cache.value) return null;
   return {
     apps: cache.value.apps.length,
-    modules: cache.value.modules.length,
     plugins: cache.value.plugins.length,
     actions: cache.value.actions.length,
     events: cache.value.events.length,
+    sinks: cache.value.sinks?.length ?? 0,
   };
 });
 
@@ -262,20 +261,135 @@ function openPluginHook(name: string): void {
 function shortTime(ts: string): string {
   return new Date(ts).toLocaleTimeString(undefined, { hour12: false });
 }
+
+// ─── Smoke ────────────────────────────────────────────────────────────
+//
+// Generate sample dispatches against the live wire so the Stream, Trace,
+// Home metrics, and Run logs panels actually have something to render
+// the first time a user opens Studio. We walk the action manifest, build
+// a best-effort payload from each action's inputSchema (filling required
+// fields with type-appropriate defaults), and POST `/_nwire/dispatch` for
+// each one a few times.
+//
+// All work is fire-and-forget — failures count as "smoke" too (they show
+// up on the failures panel). The button only renders when the cache has
+// actions and the live wire seems reachable.
+
+const smokeBusy = ref(false);
+const smokeError = ref<string | null>(null);
+const smokeResult = ref<{ fired: number; failed: number } | null>(null);
+
+function sampleFromSchema(schema: unknown): unknown {
+  if (!schema || typeof schema !== "object") return {};
+  const s = schema as {
+    type?: string;
+    properties?: Record<string, unknown>;
+    required?: string[];
+    enum?: unknown[];
+  };
+  if (s.enum && Array.isArray(s.enum) && s.enum.length > 0) return s.enum[0];
+  switch (s.type) {
+    case "string":
+      return "sample";
+    case "number":
+      return 1;
+    case "boolean":
+      return true;
+    case "array":
+      return [];
+    case "object": {
+      const out: Record<string, unknown> = {};
+      const props = s.properties ?? {};
+      const required = new Set(s.required ?? []);
+      for (const [key, raw] of Object.entries(props)) {
+        // Always include required; otherwise skip — best-effort.
+        if (required.has(key)) out[key] = sampleFromSchema(raw);
+      }
+      return out;
+    }
+    default:
+      return null;
+  }
+}
+
+async function runSmoke(): Promise<void> {
+  if (!cache.value) return;
+  smokeBusy.value = true;
+  smokeError.value = null;
+  smokeResult.value = null;
+  let fired = 0;
+  let failed = 0;
+  try {
+    const actions = cache.value.actions;
+    if (actions.length === 0) {
+      smokeError.value = "No actions in the manifest — nothing to dispatch.";
+      return;
+    }
+    // Fire each action once with sample input; for the first one fire
+    // twice so there's at least one repeat in the stream.
+    for (let i = 0; i < actions.length; i++) {
+      const a = actions[i]!;
+      const input = sampleFromSchema(a.inputSchema);
+      const repeats = i === 0 ? 2 : 1;
+      for (let r = 0; r < repeats; r++) {
+        try {
+          const res = await fetch("/_nwire/dispatch", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ handler: a.name, input }),
+          });
+          if (res.ok) fired++;
+          else failed++;
+        } catch {
+          failed++;
+        }
+      }
+    }
+    smokeResult.value = { fired, failed };
+  } catch (err) {
+    smokeError.value = (err as Error).message;
+  } finally {
+    smokeBusy.value = false;
+  }
+}
 </script>
 
 <template>
   <div class="p-6 space-y-6" data-testid="home-page">
-    <PageHeader
-      title="Home"
-      :icon="HomeIcon"
-      icon-color="text-emerald-400"
-      :subtitle="
-        hasLiveData
-          ? 'Live system snapshot — failures, throughput, and what got booted'
-          : 'Wire not reporting — showing static composition only'
-      "
-    />
+    <div class="flex items-start justify-between gap-6">
+      <PageHeader
+        title="Home"
+        :icon="HomeIcon"
+        icon-color="text-emerald-400"
+        :subtitle="
+          hasLiveData
+            ? 'Live system snapshot — failures, throughput, and what got booted'
+            : 'Wire not reporting — showing static composition only'
+        "
+      />
+      <div class="flex flex-col items-end gap-1.5 pt-1" data-testid="home-smoke">
+        <button
+          type="button"
+          class="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900 hover:bg-zinc-800 px-3 py-1.5 text-xs font-medium text-zinc-200 transition-colors disabled:opacity-50"
+          :disabled="smokeBusy || !cache || cache.actions.length === 0"
+          :title="
+            !cache || cache.actions.length === 0
+              ? 'No actions in the manifest yet.'
+              : 'Fire a sample dispatch against every action so the live panels populate.'
+          "
+          @click="runSmoke"
+        >
+          <Cigarette class="w-3.5 h-3.5 text-amber-400" />
+          {{ smokeBusy ? "Smoking…" : "Smoke" }}
+        </button>
+        <div v-if="smokeResult" class="text-[10px] text-zinc-500 tabular-nums">
+          fired {{ smokeResult.fired }} · failed {{ smokeResult.failed }}
+        </div>
+        <div v-if="smokeError" class="text-[10px] text-rose-300 max-w-[200px] text-right">
+          {{ smokeError }}
+        </div>
+      </div>
+    </div>
 
     <!-- Section 1: Recent failures ─────────────────────────────────── -->
     <section data-testid="home-failures">
@@ -432,9 +546,9 @@ function shortTime(ts: string): string {
         >
           Booted <span class="font-semibold">{{ bootSummary.total }}</span> plugins (<span
             class="tabular-nums"
-            >{{ bootSummary.modules }}</span
+            >{{ bootSummary.plugins }}</span
           >
-          modules + <span class="tabular-nums">{{ bootSummary.plugins }}</span> plugins) in
+          plugins recorded) in
           <span class="tabular-nums">{{ bootSummary.totalMs.toFixed(0) }}</span> ms
         </div>
         <div
@@ -443,10 +557,10 @@ function shortTime(ts: string): string {
           data-testid="home-boot-static"
         >
           <span class="tabular-nums">{{ compositionStats.apps }}</span> app(s),
-          <span class="tabular-nums">{{ compositionStats.modules }}</span> module(s),
           <span class="tabular-nums">{{ compositionStats.plugins }}</span> plugin(s) ·
           <span class="tabular-nums">{{ compositionStats.actions }}</span> actions ·
-          <span class="tabular-nums">{{ compositionStats.events }}</span> events
+          <span class="tabular-nums">{{ compositionStats.events }}</span> events ·
+          <span class="tabular-nums">{{ compositionStats.sinks }}</span> sinks
           <div v-if="!hasLiveData" class="text-[11px] text-zinc-500 mt-1">
             Boot timings appear once the wire is running.
           </div>

package/src/pages/Hooks.vue

@@ -202,14 +202,9 @@ watch(detail, () => {
             <div class="flex items-center gap-3 flex-wrap">
               <h2 class="font-mono text-xl">{{ detail.name }}</h2>
               <span class="text-[10px] text-zinc-500 font-mono">{{ detail.id }}</span>
-              <button
-                v-if="detail.source"
-                type="button"
-                class="ml-auto inline-flex items-center"
-                @click="sourcePreview = detail.source!"
-              >
-                <SourcePill :source="detail.source" />
-              </button>
+              <span v-if="detail.source" class="ml-auto inline-flex">
+                <SourcePill :source="detail.source" @click="sourcePreview = detail.source!" />
+              </span>
             </div>
             <div class="text-[11px] text-zinc-500 mt-2 flex gap-4 tabular-nums">
               <span>{{ detail.chain }} chain step{{ detail.chain === 1 ? "" : "s" }}</span>

package/src/pages/Overview.vue

@@ -58,7 +58,7 @@ const stats = computed(() => {
   if (!cache.value) return [];
   return [
     { label: "Apps", value: cache.value.apps.length, icon: Network, color: "text-blue-400" },
-    { label: "Modules", value: cache.value.modules.length, icon: Boxes, color: "text-emerald-400" },
+    { label: "Plugins", value: cache.value.plugins.length, icon: Boxes, color: "text-emerald-400" },
     { label: "Actions", value: cache.value.actions.length, icon: Zap, color: "text-amber-400" },
     { label: "Events", value: cache.value.events.length, icon: Radio, color: "text-purple-400" },
     { label: "Actors", value: cache.value.actors.length, icon: Layers, color: "text-pink-400" },
@@ -142,14 +142,16 @@ const stats = computed(() => {
         >
           <div class="flex items-center justify-between">
             <span class="font-medium">{{ app.name }}</span>
-            <span class="text-xs text-zinc-500 tabular-nums"> {{ app.modules.length }} BCs </span>
+            <span class="text-xs text-zinc-500 tabular-nums">
+              {{ app.plugins.length }} plugin(s)
+            </span>
           </div>
           <div v-if="app.description" class="text-sm text-zinc-400 mt-1">
             {{ app.description }}
           </div>
           <div class="mt-2 flex flex-wrap gap-1">
-            <KindBadge v-for="m in app.modules" :key="m" variant="neutral">
-              {{ m }}
+            <KindBadge v-for="p in app.plugins" :key="p" variant="neutral">
+              {{ p }}
             </KindBadge>
           </div>
         </div>

package/src/pages/Plugins.vue

@@ -309,14 +309,9 @@ function openHook(hookName: string): void {
                 {{ detail.kind }}
               </KindBadge>
               <span class="text-[10px] text-zinc-500 font-mono">{{ detail.app }}</span>
-              <button
-                v-if="detail.source"
-                type="button"
-                class="ml-auto inline-flex items-center"
-                @click="sourcePreview = detail.source!"
-              >
-                <SourcePill :source="detail.source" />
-              </button>
+              <span v-if="detail.source" class="ml-auto inline-flex">
+                <SourcePill :source="detail.source" @click="sourcePreview = detail.source!" />
+              </span>
             </div>
           </div>
 

package/src/pages/Projections.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+/**
+ * Projections — CQRS read models. Each fold takes (state, event) → state;
+ * the projection store is keyed by projection name + tenant. Studio shows
+ * the registered projections and which events they listen to.
+ */
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCache } from "@/lib/cache";
+import { Database, ArrowRight } from "lucide-vue-next";
+import {
+  PageHeader,
+  FilterInput,
+  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?.projections.find((p) => p.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.projections.filter(
+    (p) => !q || p.name.toLowerCase().includes(q) || p.app.toLowerCase().includes(q),
+  );
+});
+
+const key = (p: { app: string; name: string }) => `${p.app}::${p.name}`;
+const detail = computed(() => filtered.value.find((p) => key(p) === selected.value) ?? null);
+
+/**
+ * Cross-reference: which queries read from this projection? Studio
+ * doesn't yet know the projection→query edge directly (the scanner
+ * emits queries with their projection name when set), so we filter by
+ * name match.
+ */
+const queriesForDetail = computed(() => {
+  if (!detail.value || !cache.value) return [];
+  return cache.value.queries.filter(
+    (q) => (q as { projection?: string }).projection === detail.value!.name,
+  );
+});
+</script>
+
+<template>
+  <div v-if="cache" class="h-full flex flex-col" data-testid="projections-page">
+    <div class="p-6 pb-3 border-b border-zinc-800">
+      <PageHeader
+        title="Projections"
+        subtitle="CQRS read models — every fold from event stream to materialised state."
+        :icon="Database"
+        icon-color="text-cyan-400"
+        :count="filtered.length"
+        :total="cache.projections.length"
+      />
+    </div>
+
+    <EmptyState
+      v-if="cache.projections.length === 0"
+      title="No projections in cache"
+      hint="Projections are declared via defineProjection(name, { listens, initial, on }). Run `nwire cache` after adding one."
+      :icon="Database"
+    />
+
+    <MasterDetail v-else class="flex-1">
+      <template #listHeader>
+        <FilterInput v-model="filter" placeholder="filter by name or app…" />
+      </template>
+
+      <template #list>
+        <ListRow
+          v-for="p in filtered"
+          :key="key(p)"
+          :selected="selected === key(p)"
+          @click="selected = key(p)"
+        >
+          <template #title>
+            <Database class="w-3 h-3 text-cyan-400 shrink-0" />
+            <span class="font-mono text-sm truncate">{{ p.name }}</span>
+          </template>
+          <template #meta>
+            <span class="text-[10px] text-zinc-500">{{ p.app }}</span>
+          </template>
+        </ListRow>
+      </template>
+
+      <template #empty
+        >Select a projection to view its event subscriptions and reading queries.</template
+      >
+
+      <template v-if="detail" #detail>
+        <div class="p-6 space-y-5" data-testid="projection-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="space-y-3">
+            <h3 class="text-xs uppercase tracking-wide text-zinc-500">
+              Queries on this projection
+            </h3>
+            <div v-if="queriesForDetail.length === 0" class="text-xs text-zinc-600">
+              No queries registered against this projection yet.
+            </div>
+            <div v-else class="space-y-1">
+              <button
+                v-for="q in queriesForDetail"
+                :key="q.name"
+                type="button"
+                class="flex items-center gap-2 font-mono text-sm text-left hover:text-emerald-300"
+                @click="router.push({ path: '/queries', query: { name: q.name } })"
+              >
+                <ArrowRight class="w-3.5 h-3.5 text-emerald-400" />
+                <span class="underline-offset-2 hover:underline">{{ q.name }}</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/Projects.vue

@@ -199,8 +199,8 @@ onMounted(() => {
               <div>{{ p.composition.apps }}</div>
             </div>
             <div>
-              <div class="text-zinc-600 text-[10px] uppercase tracking-wide">modules</div>
-              <div>{{ p.composition.modules }}</div>
+              <div class="text-zinc-600 text-[10px] uppercase tracking-wide">plugins</div>
+              <div>{{ p.composition.plugins }}</div>
             </div>
             <div>
               <div class="text-zinc-600 text-[10px] uppercase tracking-wide">actions</div>