@nwire/studio 0.9.1

package/src/pages/Dispatch.vue

@@ -0,0 +1,431 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useCache } from "@/lib/cache";
+import { Zap, Search, Send, CheckCircle2, XCircle } from "lucide-vue-next";
+
+const { cache } = useCache();
+const filter = ref("");
+const selectedName = ref<string | null>(null);
+const input = ref<string>("{}");
+const tenant = ref("");
+const userId = ref("");
+/**
+ * Two ways to author the payload:
+ *
+ *   - "form" — inline inputs derived from the OpenAPI schema (strings,
+ *     numbers, booleans, enums). Best for happy-path dispatches.
+ *   - "json" — raw textarea. Fallback for nested objects/arrays or when
+ *     the operator wants full control.
+ *
+ * The two views read+write the same `input` JSON string so toggling
+ * keeps the value in sync.
+ */
+const inputMode = ref<"form" | "json">("form");
+const result = ref<
+  | { ok: true; envelope: { messageId: string; correlationId: string }; result: unknown }
+  | { ok: false; error: string }
+  | null
+>(null);
+const busy = ref(false);
+
+const filtered = computed(() => {
+  if (!cache.value) return [];
+  const q = filter.value.toLowerCase();
+  return cache.value.actions.filter(
+    (a) =>
+      !q ||
+      a.name.toLowerCase().includes(q) ||
+      a.module.toLowerCase().includes(q) ||
+      (a.description ?? "").toLowerCase().includes(q),
+  );
+});
+
+const selected = computed(() => filtered.value.find((a) => a.name === selectedName.value) ?? null);
+
+// Schema field list for the visible "Expected input" panel. Reads
+// JSON-Schema-shape properties out of the cached action and produces a
+// flat row per top-level field: name, type, required flag, default,
+// enum options. Nested objects show their type as "object" — the user
+// edits them in the JSON textarea.
+interface SchemaField {
+  name: string;
+  type: string;
+  required: boolean;
+  default?: unknown;
+  enum?: string[];
+}
+const schemaFields = computed<SchemaField[]>(() => {
+  if (!selected.value) return [];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const schema = selected.value.schema as any;
+  if (!schema?.properties) return [];
+  const required = new Set<string>(Array.isArray(schema.required) ? schema.required : []);
+  const out: SchemaField[] = [];
+  for (const [name, raw] of Object.entries(schema.properties)) {
+    const p = raw as {
+      type?: string | string[];
+      default?: unknown;
+      enum?: unknown[];
+      format?: string;
+    };
+    const t = Array.isArray(p.type) ? p.type.join(" | ") : (p.type ?? "any");
+    const field: SchemaField = { name, type: t, required: required.has(name) };
+    if (p.default !== undefined) field.default = p.default;
+    if (Array.isArray(p.enum)) field.enum = p.enum.map(String);
+    out.push(field);
+  }
+  return out;
+});
+
+// When a different action is picked, seed a sensible input scaffold from
+// the schema's required fields.
+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 scaffold: Record<string, unknown> = {};
+  if (schema?.properties) {
+    for (const [key, prop] of Object.entries(schema.properties)) {
+      const p = prop as { type?: string | string[]; default?: unknown };
+      if (p.default !== undefined) {
+        scaffold[key] = p.default;
+        continue;
+      }
+      const t = Array.isArray(p.type) ? p.type[0] : p.type;
+      switch (t) {
+        case "string":
+          scaffold[key] = "";
+          break;
+        case "number":
+          scaffold[key] = 0;
+          break;
+        case "boolean":
+          scaffold[key] = false;
+          break;
+        case "array":
+          scaffold[key] = [];
+          break;
+        case "object":
+          scaffold[key] = {};
+          break;
+        default:
+          scaffold[key] = null;
+      }
+    }
+  }
+  input.value = JSON.stringify(scaffold, null, 2);
+});
+
+/**
+ * Inline form mode reads + writes individual fields of the parsed input
+ * JSON. We work off a single source of truth (`input` JSON string) and
+ * project per-field getters/setters so the form view stays consistent
+ * with the textarea when the operator toggles between them.
+ */
+function parsedInput(): Record<string, unknown> {
+  try {
+    const parsed = JSON.parse(input.value);
+    return typeof parsed === "object" && parsed !== null ? (parsed as Record<string, unknown>) : {};
+  } catch {
+    return {};
+  }
+}
+
+function setField(name: string, value: unknown): void {
+  const obj = parsedInput();
+  obj[name] = value;
+  input.value = JSON.stringify(obj, null, 2);
+}
+
+function getField(name: string): unknown {
+  return parsedInput()[name];
+}
+
+/**
+ * Fields the inline form can render. Anything else (nested objects,
+ * arrays of objects, unions) falls back to the JSON textarea.
+ */
+function isInlineRenderable(field: SchemaField): boolean {
+  const t = field.type.split(" | ")[0];
+  return t === "string" || t === "number" || t === "integer" || t === "boolean";
+}
+
+const allFieldsInlineRenderable = computed(
+  () => schemaFields.value.length > 0 && schemaFields.value.every(isInlineRenderable),
+);
+
+async function dispatch() {
+  if (!selected.value) return;
+  busy.value = true;
+  result.value = null;
+  try {
+    const parsed = JSON.parse(input.value);
+    const res = await fetch("/_nwire/dispatch", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        action: selected.value.name,
+        input: parsed,
+        tenant: tenant.value || undefined,
+        userId: userId.value || undefined,
+      }),
+    });
+    result.value = (await res.json()) as typeof result.value;
+  } catch (err) {
+    result.value = { ok: false, error: (err as Error).message };
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <div v-if="cache" class="h-full flex">
+    <!-- Action picker -->
+    <div class="w-2/5 border-r border-zinc-800 flex flex-col">
+      <div class="border-b border-zinc-800 px-4 py-3">
+        <h1 class="text-lg font-semibold tracking-tight">Dispatch</h1>
+        <div class="relative mt-2">
+          <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="pick an action…"
+            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>
+      </div>
+      <div class="flex-1 overflow-auto">
+        <button
+          v-for="a in filtered"
+          :key="`${a.app}::${a.name}`"
+          class="w-full text-left px-4 py-2.5 border-b border-zinc-900 hover:bg-zinc-900/50 transition-colors"
+          :class="{ 'bg-zinc-900': selectedName === a.name }"
+          @click="selectedName = a.name"
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2 min-w-0">
+              <Zap class="w-3 h-3 text-amber-400 shrink-0" />
+              <span class="font-mono text-sm truncate">{{ a.name }}</span>
+            </div>
+            <span class="text-[10px] text-zinc-500">{{ a.app }}</span>
+          </div>
+          <div v-if="a.description" class="text-[10px] text-zinc-500 ml-5 mt-0.5 line-clamp-1">
+            {{ a.description }}
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- Form + result -->
+    <div class="flex-1 overflow-auto">
+      <div v-if="!selected" class="p-6 text-zinc-500 text-sm">Pick an action to dispatch.</div>
+      <div v-else class="p-6 space-y-5">
+        <div>
+          <div class="text-[10px] uppercase tracking-wide text-zinc-500">
+            {{ selected.app }} · {{ selected.module }}
+          </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">
+            {{ selected.description }}
+          </p>
+        </div>
+
+        <div class="grid grid-cols-2 gap-3">
+          <div>
+            <label class="text-[10px] uppercase tracking-wide text-zinc-500"
+              >Tenant (optional)</label
+            >
+            <input
+              v-model="tenant"
+              placeholder="school-tlv"
+              class="w-full mt-1 bg-zinc-900 border border-zinc-800 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-zinc-600"
+            />
+          </div>
+          <div>
+            <label class="text-[10px] uppercase tracking-wide text-zinc-500"
+              >User id (optional)</label
+            >
+            <input
+              v-model="userId"
+              placeholder="student-avi-9"
+              class="w-full mt-1 bg-zinc-900 border border-zinc-800 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-zinc-600"
+            />
+          </div>
+        </div>
+
+        <div v-if="schemaFields.length > 0">
+          <label class="text-[10px] uppercase tracking-wide text-zinc-500 mb-1 block">
+            Expected input schema
+          </label>
+          <div
+            class="rounded border border-zinc-800 bg-zinc-950/50 divide-y divide-zinc-800"
+            data-testid="schema-panel"
+          >
+            <div
+              v-for="f in schemaFields"
+              :key="f.name"
+              class="px-3 py-2 flex items-center justify-between gap-3 text-xs"
+            >
+              <div class="flex items-center gap-2 min-w-0">
+                <span class="font-mono text-zinc-200">{{ f.name }}</span>
+                <span
+                  v-if="f.required"
+                  class="text-[9px] uppercase tracking-wider text-amber-400"
+                  title="required"
+                  >req</span
+                >
+                <span v-else class="text-[9px] uppercase tracking-wider text-zinc-600">opt</span>
+              </div>
+              <div class="flex items-center gap-2 text-zinc-500 shrink-0">
+                <code class="text-[10px] bg-zinc-900 px-1.5 py-0.5 rounded">{{ f.type }}</code>
+                <span v-if="f.default !== undefined" class="text-[10px]">
+                  = <code class="text-zinc-400">{{ JSON.stringify(f.default) }}</code>
+                </span>
+                <span v-if="f.enum" class="text-[10px]">
+                  : <code class="text-zinc-400">{{ f.enum.join(" | ") }}</code>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <label
+            class="text-[10px] uppercase tracking-wide text-zinc-500 flex items-center justify-between mb-1"
+          >
+            <span>Input</span>
+            <span class="flex items-center gap-2">
+              <button
+                v-if="allFieldsInlineRenderable"
+                class="text-[10px] px-2 py-0.5 rounded border border-zinc-800 normal-case tracking-normal"
+                :class="{
+                  'bg-zinc-800 text-zinc-100': inputMode === 'form',
+                  'text-zinc-500': inputMode !== 'form',
+                }"
+                @click="inputMode = 'form'"
+                data-testid="dispatch-mode-form"
+              >
+                Form
+              </button>
+              <button
+                class="text-[10px] px-2 py-0.5 rounded border border-zinc-800 normal-case tracking-normal"
+                :class="{
+                  'bg-zinc-800 text-zinc-100': inputMode === 'json',
+                  'text-zinc-500': inputMode !== 'json',
+                }"
+                @click="inputMode = 'json'"
+                data-testid="dispatch-mode-json"
+              >
+                JSON
+              </button>
+            </span>
+          </label>
+          <!-- Form view — one input per schema field, primitive types only. -->
+          <div
+            v-if="inputMode === 'form' && allFieldsInlineRenderable"
+            class="space-y-2 rounded border border-zinc-800 bg-zinc-950/50 p-3"
+            data-testid="dispatch-form"
+          >
+            <div v-for="f in schemaFields" :key="f.name" class="flex flex-col gap-1">
+              <label
+                class="text-[10px] uppercase tracking-wide text-zinc-500 flex items-center gap-2"
+              >
+                <span class="font-mono text-zinc-300 normal-case tracking-normal">{{
+                  f.name
+                }}</span>
+                <span v-if="f.required" class="text-[9px] uppercase tracking-wider text-amber-400"
+                  >req</span
+                >
+              </label>
+              <!-- enum → select -->
+              <select
+                v-if="f.enum"
+                class="bg-zinc-900 border border-zinc-800 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-zinc-600"
+                :value="getField(f.name)"
+                @input="setField(f.name, ($event.target as HTMLSelectElement).value)"
+              >
+                <option v-for="e in f.enum" :key="e" :value="e">{{ e }}</option>
+              </select>
+              <!-- boolean → checkbox -->
+              <label
+                v-else-if="f.type.startsWith('boolean')"
+                class="flex items-center gap-2 text-sm"
+              >
+                <input
+                  type="checkbox"
+                  :checked="Boolean(getField(f.name))"
+                  @change="setField(f.name, ($event.target as HTMLInputElement).checked)"
+                />
+                <span class="text-zinc-400">{{ getField(f.name) ? "true" : "false" }}</span>
+              </label>
+              <!-- number/integer → number input -->
+              <input
+                v-else-if="f.type.startsWith('number') || f.type.startsWith('integer')"
+                type="number"
+                class="bg-zinc-900 border border-zinc-800 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-zinc-600"
+                :value="getField(f.name) as number"
+                @input="setField(f.name, Number(($event.target as HTMLInputElement).value))"
+              />
+              <!-- string → text input -->
+              <input
+                v-else
+                type="text"
+                class="bg-zinc-900 border border-zinc-800 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-zinc-600"
+                :value="getField(f.name) as string"
+                @input="setField(f.name, ($event.target as HTMLInputElement).value)"
+              />
+            </div>
+          </div>
+          <!-- JSON view — raw textarea fallback for nested/complex shapes. -->
+          <textarea
+            v-else
+            v-model="input"
+            rows="10"
+            spellcheck="false"
+            class="w-full bg-zinc-950 border border-zinc-800 rounded p-3 font-mono text-xs focus:outline-none focus:border-zinc-600"
+          ></textarea>
+        </div>
+
+        <button
+          class="px-4 py-2 rounded bg-emerald-700 hover:bg-emerald-600 disabled:opacity-50 text-sm font-medium flex items-center gap-2"
+          :disabled="busy"
+          @click="dispatch"
+        >
+          <Send class="w-4 h-4" />
+          {{ busy ? "Dispatching…" : "Dispatch" }}
+        </button>
+
+        <div v-if="result">
+          <div
+            v-if="result.ok"
+            class="rounded border border-emerald-900 bg-emerald-950/30 p-3 space-y-2"
+          >
+            <div class="flex items-center gap-2 text-emerald-300">
+              <CheckCircle2 class="w-4 h-4" />
+              <span class="font-medium">Accepted</span>
+            </div>
+            <div class="text-[10px] font-mono text-zinc-400">
+              msg {{ result.envelope.messageId }}
+              <br />
+              corr {{ result.envelope.correlationId }}
+            </div>
+            <pre class="text-[11px] bg-zinc-950 border border-zinc-800 rounded p-2 overflow-auto">{{
+              JSON.stringify(result.result, null, 2)
+            }}</pre>
+          </div>
+          <div
+            v-else
+            class="rounded border border-rose-900 bg-rose-950/30 p-3 flex items-start gap-2"
+          >
+            <XCircle class="w-4 h-4 text-rose-400 mt-0.5" />
+            <div>
+              <div class="font-medium text-rose-300">Rejected</div>
+              <div class="text-sm text-rose-200 mt-1 font-mono">{{ result.error }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/pages/Events.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCache } from "@/lib/cache";
+import { Radio, Search, Lock, Globe, ArrowRight } from "lucide-vue-next";
+import { SchemaTree, SourcePill, SourceDrawer } 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) {
+    selected.value = name;
+  }
+}
+
+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();
+  return cache.value.events.filter(
+    (e) =>
+      !q ||
+      e.name.toLowerCase().includes(q) ||
+      (e.description ?? "").toLowerCase().includes(q) ||
+      e.module.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);
+});
+</script>
+
+<template>
+  <div v-if="cache" class="h-full flex">
+    <div class="w-2/5 border-r border-zinc-800 flex flex-col">
+      <div class="border-b border-zinc-800 px-4 py-3">
+        <h1 class="text-lg font-semibold tracking-tight">Events</h1>
+        <div class="relative mt-2">
+          <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…"
+            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>
+        <div class="text-[10px] text-zinc-500 mt-1">
+          {{ filtered.length }} / {{ cache.events.length }}
+        </div>
+      </div>
+      <div class="flex-1 overflow-auto">
+        <button
+          v-for="e in filtered"
+          :key="`${e.app}::${e.name}`"
+          class="w-full text-left px-4 py-2.5 border-b border-zinc-900 hover:bg-zinc-900/50 transition-colors"
+          :class="{ 'bg-zinc-900': selected === e.name }"
+          @click="selected = e.name"
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2 min-w-0">
+              <Radio class="w-3 h-3 text-purple-400 shrink-0" />
+              <span class="font-mono text-sm truncate">{{ e.name }}</span>
+            </div>
+            <component
+              :is="(e.public ?? e.visibility === 'public') ? Globe : Lock"
+              class="w-3 h-3 shrink-0"
+              :class="
+                (e.public ?? e.visibility === 'public') ? 'text-emerald-400' : 'text-zinc-500'
+              "
+            />
+          </div>
+          <div v-if="e.description" class="text-xs text-zinc-500 mt-1 line-clamp-2 ml-5">
+            {{ e.description }}
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <div class="flex-1 overflow-auto">
+      <div v-if="!detail" class="p-6 text-zinc-500 text-sm">Select an event to view its flow.</div>
+      <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
+              class="px-1.5 py-0.5 rounded text-[10px] uppercase"
+              :class="
+                (detail.public ?? detail.visibility === '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" }}
+            </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">
+            {{ detail.description }}
+          </p>
+        </div>
+
+        <div v-if="detailEdge">
+          <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>
+            <div 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"
+                  :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)"
+                >
+                  <ArrowRight class="w-2.5 h-2.5 text-zinc-500" />
+                  {{ c.app }}/{{ c.module }}
+                  <span class="text-[9px] uppercase text-zinc-500">{{ c.via }}</span>
+                </button>
+              </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>
+        </div>
+
+        <SchemaTree :schema="detail.schema" label="Payload schema" />
+      </div>
+    </div>
+    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
+  </div>
+</template>

package/src/pages/Home.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { createRouter, createMemoryHistory } from "vue-router";
+import Home from "./Home.vue";
+
+/**
+ * Storybook for the Home dashboard. We give it an in-memory router so
+ * the "→ trace" / plugin-row links render without exploding, and let the
+ * page try to fetch /__nwire/manifest.json + /_nwire/telemetry/* — in
+ * Storybook those fail and the component degrades to its "no live data"
+ * states, which is exactly what we want to document.
+ */
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes: [
+    { path: "/", name: "home", component: Home },
+    { path: "/trace", name: "trace", component: { template: "<div/>" } },
+    { path: "/hooks", name: "hooks", component: { template: "<div/>" } },
+  ],
+});
+
+const meta: Meta<typeof Home> = {
+  title: "Pages/Home",
+  component: Home,
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div class="h-screen bg-zinc-950 text-zinc-100"><story /></div>',
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    vueRouter: { router },
+  },
+  render: () => ({
+    components: { Home },
+    setup() {
+      return {};
+    },
+    template: "<Home />",
+  }),
+};
+export default meta;
+
+type Story = StoryObj<typeof Home>;
+
+/** Default: the wire isn't running — all three sections degrade gracefully. */
+export const NoLiveData: Story = {};