@nwire/studio 0.12.0 → 0.13.0

package/src/pages/Live.vue

@@ -1,249 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from "vue";
-import {
-  Radio,
-  PlayCircle,
-  PauseCircle,
-  Trash2,
-  Filter,
-  Network,
-  Globe,
-  Search,
-} from "lucide-vue-next";
-
-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;
-}
-
-const events = ref<BufferedEvent[]>([]);
-const paused = ref(false);
-const filter = ref("");
-const selectedCorrelation = ref<string | null>(null);
-const status = ref<"connecting" | "open" | "closed" | "error">("connecting");
-let es: EventSource | null = null;
-
-onMounted(() => {
-  connect();
-});
-
-onUnmounted(() => {
-  es?.close();
-});
-
-function connect() {
-  status.value = "connecting";
-  es?.close();
-  es = new EventSource("/_nwire/events/stream");
-  es.onopen = () => {
-    status.value = "open";
-  };
-  es.onerror = () => {
-    status.value = "error";
-  };
-  es.onmessage = (msg) => {
-    if (paused.value) return;
-    try {
-      const evt = JSON.parse(msg.data) as BufferedEvent;
-      events.value.unshift(evt);
-      if (events.value.length > 1000) events.value.pop();
-    } catch (err) {
-      console.error("bad event", err);
-    }
-  };
-}
-
-function reconnect() {
-  connect();
-}
-
-function clear() {
-  events.value = [];
-}
-
-const filtered = computed(() => {
-  const q = filter.value.toLowerCase();
-  return events.value.filter((e) => {
-    if (selectedCorrelation.value && e.envelope.correlationId !== selectedCorrelation.value) {
-      return false;
-    }
-    if (!q) return true;
-    return (
-      e.eventName.toLowerCase().includes(q) ||
-      e.envelope.messageId.toLowerCase().includes(q) ||
-      e.envelope.correlationId.toLowerCase().includes(q) ||
-      (e.envelope.tenant?.toLowerCase().includes(q) ?? false) ||
-      (e.envelope.userId?.toLowerCase().includes(q) ?? false)
-    );
-  });
-});
-
-const selectedTrace = computed(() => {
-  if (!selectedCorrelation.value) return [];
-  return events.value
-    .filter((e) => e.envelope.correlationId === selectedCorrelation.value)
-    .sort((a, b) => a.seq - b.seq);
-});
-
-function shortId(id: string): string {
-  return id.split("-")[0] ?? id.slice(0, 8);
-}
-</script>
-
-<template>
-  <div class="h-full flex">
-    <!-- Stream column -->
-    <div class="flex-1 flex flex-col border-r border-zinc-800 min-w-0">
-      <div class="border-b border-zinc-800 px-4 py-3 flex items-center justify-between gap-3">
-        <div class="flex items-center gap-3 min-w-0">
-          <Radio
-            class="w-5 h-5 shrink-0"
-            :class="{
-              'text-emerald-400 animate-pulse': status === 'open' && !paused,
-              'text-zinc-400': paused,
-              'text-amber-400': status === 'connecting',
-              'text-rose-400': status === 'error' || status === 'closed',
-            }"
-          />
-          <h1 class="font-semibold text-lg truncate">Live</h1>
-          <span
-            class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-zinc-900 text-zinc-400"
-          >
-            {{ status }}
-          </span>
-          <span class="text-xs text-zinc-500 tabular-nums"
-            >{{ filtered.length }} / {{ events.length }}</span
-          >
-        </div>
-        <div class="flex items-center gap-1 shrink-0">
-          <button
-            class="p-1.5 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100"
-            :title="paused ? 'Resume' : 'Pause'"
-            @click="paused = !paused"
-          >
-            <PlayCircle v-if="paused" class="w-4 h-4 text-emerald-400" />
-            <PauseCircle v-else class="w-4 h-4" />
-          </button>
-          <button
-            class="p-1.5 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100"
-            title="Clear"
-            @click="clear"
-          >
-            <Trash2 class="w-4 h-4" />
-          </button>
-          <button
-            v-if="status === 'error' || status === 'closed'"
-            class="px-2 py-1 rounded text-xs bg-zinc-800 hover:bg-zinc-700"
-            @click="reconnect"
-          >
-            Reconnect
-          </button>
-        </div>
-      </div>
-
-      <div class="px-4 py-2 border-b border-zinc-800 flex items-center gap-2">
-        <div class="relative flex-1">
-          <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 event name / id / tenant / user…"
-            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>
-        <button
-          v-if="selectedCorrelation"
-          class="text-xs px-2 py-1 rounded bg-purple-950/50 border border-purple-900 text-purple-300 hover:bg-purple-900/50"
-          @click="selectedCorrelation = null"
-        >
-          <Filter class="w-3 h-3 inline mr-1" />
-          clear trace filter
-        </button>
-      </div>
-
-      <div class="flex-1 overflow-auto">
-        <div v-if="filtered.length === 0" class="p-6 text-sm text-zinc-500">
-          {{ events.length === 0 ? "Waiting for events…" : "No events match the filter." }}
-        </div>
-        <button
-          v-for="evt in filtered"
-          :key="evt.seq"
-          class="w-full text-left px-4 py-2 border-b border-zinc-900 hover:bg-zinc-900/50 transition-colors"
-          :class="{
-            'bg-zinc-900/70':
-              selectedCorrelation && evt.envelope.correlationId === selectedCorrelation,
-          }"
-          @click="selectedCorrelation = evt.envelope.correlationId"
-        >
-          <div class="flex items-center justify-between gap-3">
-            <div class="flex items-center gap-2 min-w-0">
-              <component
-                :is="evt.source === 'external' ? Network : Globe"
-                class="w-3 h-3 shrink-0"
-                :class="evt.source === 'external' ? 'text-purple-400' : 'text-emerald-400'"
-              />
-              <span class="font-mono text-sm truncate">{{ evt.eventName }}</span>
-              <span class="text-[10px] text-zinc-500 shrink-0">{{ evt.appName }}</span>
-            </div>
-            <span class="text-[10px] text-zinc-500 tabular-nums shrink-0">
-              {{ new Date(evt.capturedAt).toLocaleTimeString() }}
-            </span>
-          </div>
-          <div class="text-[10px] text-zinc-500 font-mono mt-0.5 truncate">
-            msg {{ shortId(evt.envelope.messageId) }} · corr
-            {{ shortId(evt.envelope.correlationId) }}
-            <span v-if="evt.envelope.tenant">· tenant {{ evt.envelope.tenant }}</span>
-            <span v-if="evt.envelope.userId">· user {{ evt.envelope.userId }}</span>
-          </div>
-        </button>
-      </div>
-    </div>
-
-    <!-- Trace column -->
-    <div class="w-1/2 flex flex-col">
-      <div class="border-b border-zinc-800 px-4 py-3">
-        <h2 class="text-sm font-medium tracking-tight">
-          {{ selectedCorrelation ? "Trace" : "Details" }}
-        </h2>
-        <p v-if="selectedCorrelation" class="text-[10px] text-zinc-500 font-mono mt-0.5">
-          corr {{ selectedCorrelation }}
-        </p>
-        <p v-else class="text-xs text-zinc-500 mt-0.5">Click an event to see its causation tree.</p>
-      </div>
-      <div class="flex-1 overflow-auto p-4 space-y-2">
-        <div v-for="(evt, i) in selectedTrace" :key="evt.seq" class="relative pl-4">
-          <div
-            class="absolute left-1 top-0 bottom-0 w-px bg-zinc-800"
-            v-if="i < selectedTrace.length - 1"
-          ></div>
-          <div class="absolute left-0 top-2.5 w-2 h-2 rounded-full bg-emerald-400"></div>
-          <div class="rounded border border-zinc-800 bg-zinc-900/40 p-3">
-            <div class="flex items-center justify-between mb-1">
-              <span class="font-mono text-sm">{{ evt.eventName }}</span>
-              <span class="text-[10px] text-zinc-500">{{ evt.appName }}</span>
-            </div>
-            <div class="text-[10px] text-zinc-500 font-mono mb-2">
-              msg {{ shortId(evt.envelope.messageId) }} ← caused by
-              {{ shortId(evt.envelope.causationId) }}
-            </div>
-            <pre class="text-[11px] bg-zinc-950 border border-zinc-800 rounded p-2 overflow-auto">{{
-              JSON.stringify(evt.payload, null, 2)
-            }}</pre>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/src/pages/Overview.vue

@@ -1,161 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import { RouterLink } from "vue-router";
-import { useCache } from "@/lib/cache";
-import {
-  Boxes,
-  Zap,
-  Radio,
-  Layers,
-  Database,
-  GitBranch,
-  Network,
-  LayoutDashboard,
-  Waves,
-  Send,
-  Play,
-  Workflow,
-} from "lucide-vue-next";
-import { PageHeader, KindBadge } from "@/components";
-
-const { cache } = useCache();
-
-// "Daily" shortcuts — the high-frequency entry points.
-const quickActions = [
-  {
-    to: "/live",
-    label: "Trace",
-    desc: "Watch actions / events / workflows fire in real time",
-    icon: Waves,
-    color: "text-cyan-400",
-  },
-  {
-    to: "/dispatch",
-    label: "Try",
-    desc: "Dispatch any action with a form generated from its schema",
-    icon: Send,
-    color: "text-amber-400",
-  },
-  {
-    to: "/run",
-    label: "Processes",
-    desc: "Start, stop, and watch logs for your wires",
-    icon: Play,
-    color: "text-emerald-400",
-  },
-  {
-    to: "/eventstorm",
-    label: "Flow",
-    desc: "See the causal graph: action → event → workflow → action",
-    icon: Workflow,
-    color: "text-violet-400",
-  },
-];
-
-const hasData = computed(() => !!cache.value && cache.value.apps.length > 0);
-
-const stats = computed(() => {
-  if (!cache.value) return [];
-  return [
-    { label: "Apps", value: cache.value.apps.length, icon: Network, color: "text-blue-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" },
-    {
-      label: "Projections",
-      value: cache.value.projections.length,
-      icon: Database,
-      color: "text-cyan-400",
-    },
-    {
-      label: "Workflows",
-      value: cache.value.workflows.length,
-      icon: GitBranch,
-      color: "text-violet-400",
-    },
-    {
-      label: "Resolvers",
-      value: cache.value.resolvers.length,
-      icon: Network,
-      color: "text-rose-400",
-    },
-  ];
-});
-</script>
-
-<template>
-  <div v-if="cache" class="p-6 space-y-6" data-testid="overview-page">
-    <PageHeader
-      title="Overview"
-      :icon="LayoutDashboard"
-      icon-color="text-emerald-400"
-      :subtitle="
-        hasData
-          ? 'Snapshot from .nwire/manifest.json'
-          : 'No apps discovered yet — try the shortcuts below'
-      "
-    />
-
-    <!-- Quick actions — what you actually do here daily. -->
-    <div>
-      <h2 class="text-sm font-medium text-zinc-300 uppercase tracking-wide mb-3">Start here</h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
-        <RouterLink
-          v-for="a in quickActions"
-          :key="a.to"
-          :to="a.to"
-          class="rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3 hover:bg-zinc-900 hover:border-zinc-700 transition-colors block"
-        >
-          <div class="flex items-center gap-2 mb-1">
-            <component :is="a.icon" class="w-4 h-4" :class="a.color" />
-            <span class="font-medium text-zinc-100">{{ a.label }}</span>
-          </div>
-          <div class="text-xs text-zinc-400 leading-relaxed">{{ a.desc }}</div>
-        </RouterLink>
-      </div>
-    </div>
-
-    <div v-if="hasData" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-3">
-      <div
-        v-for="s in stats"
-        :key="s.label"
-        class="rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3"
-        data-testid="overview-stat"
-      >
-        <div class="flex items-center justify-between mb-1">
-          <span class="text-xs text-zinc-500 uppercase tracking-wide">{{ s.label }}</span>
-          <component :is="s.icon" class="w-3.5 h-3.5" :class="s.color" />
-        </div>
-        <div class="text-2xl font-semibold tabular-nums">{{ s.value }}</div>
-      </div>
-    </div>
-
-    <div v-if="hasData">
-      <h2 class="text-sm font-medium text-zinc-300 uppercase tracking-wide mb-3">Apps</h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-        <div
-          v-for="app in cache.apps"
-          :key="app.name"
-          class="rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3"
-          data-testid="overview-app-card"
-        >
-          <div class="flex items-center justify-between">
-            <span class="font-medium">{{ app.name }}</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="p in app.plugins" :key="p" variant="neutral">
-              {{ p }}
-            </KindBadge>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/src/pages/Projections.vue

@@ -1,148 +0,0 @@
-<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>