@nwire/studio 0.9.1

package/src/pages/Modules.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCache } from "@/lib/cache";
+import { Boxes, ArrowDownRight, ArrowUpRight } from "lucide-vue-next";
+
+const route = useRoute();
+const router = useRouter();
+const { cache } = useCache();
+
+/**
+ * Preselect — /modules?name=<moduleName>. The page is grid-of-cards (no
+ * master/detail), so "preselect" means: highlight the card + scroll it
+ * into view. First module with the matching name wins (modules are unique
+ * within an app, and module-name collisions across apps are rare in
+ * practice — if it ever happens the operator can disambiguate visually).
+ */
+const selected = ref<string | null>(null);
+
+function applyQueryPreselect(): Promise<void> | void {
+  const name = route.query.name;
+  if (typeof name !== "string" || name.length === 0) {
+    selected.value = null;
+    return;
+  }
+  const found = cache.value?.modules.find((m) => m.name === name);
+  if (!found) return;
+  const key = `${found.app}::${found.name}`;
+  selected.value = key;
+  return nextTick(() => {
+    const el = document.querySelector(`[data-module-key="${key}"]`);
+    if (el instanceof HTMLElement) {
+      el.scrollIntoView({ block: "center", behavior: "smooth" });
+    }
+  });
+}
+
+onMounted(() => {
+  void applyQueryPreselect();
+});
+watch(
+  () => route.query.name,
+  () => {
+    void applyQueryPreselect();
+  },
+);
+watch(
+  () => cache.value,
+  () => {
+    void applyQueryPreselect();
+  },
+);
+
+const moduleKey = (m: { app: string; name: string }) => `${m.app}::${m.name}`;
+
+function openEvent(name: string): void {
+  void router.push({ path: "/events", query: { name } });
+}
+function openAction(name: string): void {
+  void router.push({ path: "/actions", query: { name } });
+}
+</script>
+
+<template>
+  <div v-if="cache" class="p-6 space-y-3">
+    <div>
+      <h1 class="text-2xl font-semibold tracking-tight">Modules</h1>
+      <p class="text-sm text-zinc-500 mt-1">Bounded contexts and their dependency graph</p>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
+      <div
+        v-for="m in cache.modules"
+        :key="moduleKey(m)"
+        :data-module-key="moduleKey(m)"
+        :data-testid="`module-card-${m.name}`"
+        class="rounded-lg border bg-zinc-900/30 px-4 py-3 space-y-2 transition-colors"
+        :class="
+          selected === moduleKey(m)
+            ? 'border-emerald-500/70 ring-1 ring-emerald-500/40'
+            : 'border-zinc-800'
+        "
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <Boxes class="w-4 h-4 text-emerald-400" />
+            <span class="font-mono font-medium">{{ m.name }}</span>
+            <span
+              class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-400"
+            >
+              {{ m.app }}
+            </span>
+          </div>
+          <div class="text-xs text-zinc-500 tabular-nums" data-testid="module-counts">
+            {{ m.counts.actions }}A · {{ m.counts.events }}E · {{ m.counts.actors }}@ ·
+            {{ m.counts.projections }}P · {{ m.counts.queries }}Q · {{ m.counts.workflows }}W
+          </div>
+        </div>
+
+        <div v-if="m.provides.events.length || m.provides.actions.length" class="text-xs">
+          <div class="flex items-center gap-1 text-zinc-500 mb-1">
+            <ArrowUpRight class="w-3 h-3 text-emerald-400" />
+            Provides
+          </div>
+          <div class="flex flex-wrap gap-1 pl-4">
+            <button
+              v-for="e in m.provides.events"
+              :key="`p-e-${e}`"
+              type="button"
+              class="font-mono text-[10px] px-1.5 py-0.5 rounded bg-purple-950/30 border border-purple-900/50 text-purple-300 hover:bg-purple-900/40"
+              :data-testid="`event-link-${e}`"
+              @click="openEvent(e)"
+            >
+              {{ e }}
+            </button>
+            <button
+              v-for="a in m.provides.actions"
+              :key="`p-a-${a}`"
+              type="button"
+              class="font-mono text-[10px] px-1.5 py-0.5 rounded bg-amber-950/30 border border-amber-900/50 text-amber-300 hover:bg-amber-900/40"
+              :data-testid="`action-link-${a}`"
+              @click="openAction(a)"
+            >
+              {{ a }}
+            </button>
+          </div>
+        </div>
+
+        <div
+          v-if="m.needs.events.length || m.needs.externalEvents.length || m.needs.actions.length"
+          class="text-xs"
+        >
+          <div class="flex items-center gap-1 text-zinc-500 mb-1">
+            <ArrowDownRight class="w-3 h-3 text-blue-400" />
+            Needs
+          </div>
+          <div class="flex flex-wrap gap-1 pl-4">
+            <button
+              v-for="e in m.needs.events"
+              :key="`n-e-${e}`"
+              type="button"
+              class="font-mono text-[10px] px-1.5 py-0.5 rounded bg-zinc-900 border border-zinc-700 text-zinc-300 hover:bg-zinc-800"
+              :data-testid="`event-link-${e}`"
+              @click="openEvent(e)"
+            >
+              {{ e }}
+            </button>
+            <button
+              v-for="e in m.needs.externalEvents"
+              :key="`n-x-${e}`"
+              type="button"
+              class="font-mono text-[10px] px-1.5 py-0.5 rounded bg-blue-950/30 border border-blue-900/50 text-blue-300 hover:bg-blue-900/40"
+              :data-testid="`event-link-${e}`"
+              title="cross-service"
+              @click="openEvent(e)"
+            >
+              {{ e }} ⨯
+            </button>
+            <button
+              v-for="a in m.needs.actions"
+              :key="`n-a-${a}`"
+              type="button"
+              class="font-mono text-[10px] px-1.5 py-0.5 rounded bg-zinc-900 border border-zinc-700 text-zinc-300 hover:bg-zinc-800"
+              :data-testid="`action-link-${a}`"
+              @click="openAction(a)"
+            >
+              {{ a }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/pages/Overview.vue

@@ -0,0 +1,159 @@
+<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: "Modules", value: cache.value.modules.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.modules.length }} BCs </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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/pages/Plugins.stories.ts

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { createRouter, createMemoryHistory } from "vue-router";
+import Plugins from "./Plugins.vue";
+
+/**
+ * Storybook for the Plugins page. The manifest fetch + SSE will fail
+ * inside Storybook, so the page degrades to its empty / no-live state —
+ * which is exactly the surface we want to document.
+ */
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes: [
+    { path: "/plugins", name: "plugins", component: Plugins },
+    { path: "/hooks", name: "hooks", component: { template: "<div/>" } },
+  ],
+});
+
+const meta: Meta<typeof Plugins> = {
+  title: "Pages/Plugins",
+  component: Plugins,
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div class="h-screen bg-zinc-950 text-zinc-100"><story /></div>',
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    vueRouter: { router },
+  },
+  render: () => ({
+    components: { Plugins },
+    setup() {
+      return {};
+    },
+    template: "<Plugins />",
+  }),
+};
+export default meta;
+
+type Story = StoryObj<typeof Plugins>;
+
+/** Default: no wire running — empty cache + stream errored. */
+export const NoLiveData: Story = {};