@nwire/studio 0.12.1 → 0.13.0

package/src/pages/Inspect.vue

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+/**
+ * Inspect — the unified per-kind browser. One surface over the deep manifest
+ * (`useManifest`, native — no adapter): a kind switcher (what's present +
+ * counts) → a filterable node list → the selected node's full detail
+ * (`NodeCard`: intent · schema · emits · source) plus its graph relationships.
+ *
+ *   /inspect?kind=action&id=action:moderation.submit-post
+ *
+ * Replaces the per-kind pages (Actions/Events/Queries/…); those routes
+ * redirect here. Resilient: loading / error / empty on every panel.
+ */
+import { computed, ref, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Search, RefreshCw, Send, ArrowUpRight } from "lucide-vue-next";
+import { useManifest } from "@/composables/useManifest";
+import {
+  inspectKinds,
+  nodesOfKind,
+  matchesNode,
+  nodeToDetail,
+  relationships,
+  kindLabel,
+  isDispatchable,
+} from "@/lib/inspect";
+import { kindColor } from "@/lib/kind-colors";
+import {
+  NodeCard,
+  StatusBadge,
+  EmptyState,
+  SourceDrawer,
+  KindBadge,
+  FilterInput,
+} from "@/components";
+
+const route = useRoute();
+const router = useRouter();
+const { manifest, view, isLoading, isFetching, isError, error, refetch } = useManifest();
+
+const kinds = computed(() => inspectKinds(view.value));
+
+// Active kind: from the URL, else the first present kind.
+const activeKind = ref<string>((route.query.kind as string) ?? "");
+watch(
+  [kinds, () => route.query.kind],
+  ([list, urlKind]) => {
+    const wanted = (urlKind as string) ?? activeKind.value;
+    if (wanted && list.some((k) => k.kind === wanted)) activeKind.value = wanted;
+    else if (!list.some((k) => k.kind === activeKind.value)) activeKind.value = list[0]?.kind ?? "";
+  },
+  { immediate: true },
+);
+
+const filter = ref("");
+const nodes = computed(() => nodesOfKind(view.value, activeKind.value));
+const filtered = computed(() => nodes.value.filter((n) => matchesNode(n, filter.value)));
+
+const selectedId = ref<string | null>((route.query.id as string) ?? null);
+
+// Keep a valid selection as the kind/filter changes.
+watch([activeKind, filtered], () => {
+  if (!selectedId.value || !filtered.value.some((n) => n.id === selectedId.value)) {
+    selectedId.value = filtered.value[0]?.id ?? null;
+  }
+});
+onMounted(() => {
+  if (!selectedId.value) selectedId.value = filtered.value[0]?.id ?? null;
+});
+
+// Mirror kind + selection into the URL (shareable deep-links).
+watch([activeKind, selectedId], ([kind, id]) => {
+  void router.replace({
+    query: { ...route.query, kind: kind || undefined, id: id || undefined },
+  });
+});
+
+const selectedNode = computed(() => filtered.value.find((n) => n.id === selectedId.value) ?? null);
+const detail = computed(() => nodeToDetail(view.value, manifest.value ?? null, selectedNode.value));
+const relations = computed(() => relationships(view.value, selectedId.value));
+
+function pickKind(kind: string): void {
+  activeKind.value = kind;
+  filter.value = "";
+}
+function goRelated(id: string): void {
+  const kind = id.slice(0, id.indexOf(":"));
+  if (kinds.value.some((k) => k.kind === kind)) {
+    activeKind.value = kind;
+    selectedId.value = id;
+  }
+}
+function dispatchSelected(): void {
+  if (detail.value) void router.push({ path: "/dispatch", query: { name: detail.value.name } });
+}
+
+const sourcePreview = ref<{ file: string; line?: number; column?: number } | null>(null);
+const health = computed(() => (isFetching.value ? "live" : "ok") as "live" | "ok");
+</script>
+
+<template>
+  <div class="h-full flex flex-col" data-testid="inspect-page">
+    <div class="border-b border-zinc-800 px-4 py-3 flex items-center gap-3">
+      <h1 class="font-semibold text-lg">Inspect</h1>
+      <StatusBadge :status="health" :label="isFetching ? 'refreshing' : 'manifest'" />
+      <button
+        class="ml-auto p-1.5 rounded hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100"
+        title="Refetch manifest"
+        data-testid="inspect-refetch"
+        @click="() => refetch()"
+      >
+        <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isFetching }" />
+      </button>
+    </div>
+
+    <div v-if="isError" class="p-6">
+      <EmptyState
+        title="Couldn't load the manifest"
+        :hint="error ?? 'Run `nwire cache` to build .nwire/manifest.json.'"
+      />
+    </div>
+
+    <div v-else class="flex-1 flex min-h-0">
+      <!-- Kind switcher -->
+      <nav
+        class="w-44 shrink-0 border-r border-zinc-800 overflow-y-auto py-2"
+        data-testid="kind-rail"
+      >
+        <button
+          v-for="k in kinds"
+          :key="k.kind"
+          class="w-full flex items-center gap-2 px-3 py-1.5 text-sm transition-colors"
+          :class="
+            k.kind === activeKind
+              ? 'bg-zinc-900 text-zinc-100'
+              : 'text-zinc-400 hover:bg-zinc-900/50 hover:text-zinc-200'
+          "
+          :data-testid="`kind-${k.kind}`"
+          @click="pickKind(k.kind)"
+        >
+          <span class="w-2 h-2 rounded-full shrink-0" :style="{ background: kindColor(k.kind) }" />
+          <span class="truncate">{{ k.label }}</span>
+          <span class="ml-auto text-[10px] text-zinc-600 tabular-nums">{{ k.count }}</span>
+        </button>
+        <div v-if="!kinds.length && !isLoading" class="px-3 py-4 text-xs text-zinc-600">
+          Nothing in the manifest yet.
+        </div>
+      </nav>
+
+      <!-- Node list -->
+      <div class="w-72 shrink-0 border-r border-zinc-800 flex flex-col min-h-0">
+        <div class="p-2 border-b border-zinc-800">
+          <FilterInput
+            v-model="filter"
+            :placeholder="`filter ${kindLabel(activeKind).toLowerCase()}…`"
+          />
+        </div>
+        <div class="flex-1 overflow-y-auto">
+          <button
+            v-for="n in filtered"
+            :key="n.id"
+            class="w-full text-left px-3 py-2 border-b border-zinc-900 transition-colors"
+            :class="n.id === selectedId ? 'bg-zinc-900/80' : 'hover:bg-zinc-900/40'"
+            data-testid="inspect-row"
+            @click="selectedId = n.id"
+          >
+            <div class="font-mono text-[13px] text-zinc-200 truncate">{{ n.name }}</div>
+            <div v-if="n.intent?.description" class="text-[11px] text-zinc-500 truncate">
+              {{ n.intent.description }}
+            </div>
+          </button>
+          <div v-if="!filtered.length" class="px-3 py-4 text-xs text-zinc-600">
+            {{ nodes.length ? "No matches." : "None of this kind." }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Detail + relationships -->
+      <div class="flex-1 min-w-0 flex flex-col min-h-0" data-testid="inspect-detail">
+        <div v-if="detail" class="flex-1 flex flex-col min-h-0">
+          <div
+            v-if="isDispatchable(detail.kind)"
+            class="px-4 py-2 border-b border-zinc-800 flex items-center gap-2"
+          >
+            <button
+              class="inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded bg-zinc-900 border border-zinc-800 text-zinc-300 hover:border-zinc-700"
+              data-testid="dispatch-link"
+              @click="dispatchSelected"
+            >
+              <Send class="w-3 h-3" /> Dispatch
+            </button>
+          </div>
+          <div class="flex-1 min-h-0 overflow-hidden flex flex-col">
+            <div class="flex-1 min-h-0">
+              <NodeCard
+                :detail="detail"
+                @open-source="sourcePreview = $event"
+                @select-event="goRelated(`event:${$event}`)"
+              />
+            </div>
+            <!-- Relationships -->
+            <div
+              v-if="relations.length"
+              class="border-t border-zinc-800 p-4 space-y-3 max-h-64 overflow-y-auto"
+              data-testid="relationships"
+            >
+              <h3 class="text-xs uppercase tracking-wide text-zinc-500">Relationships</h3>
+              <div v-for="g in relations" :key="g.label" class="space-y-1">
+                <div class="text-[10px] uppercase tracking-wide text-zinc-600">{{ g.label }}</div>
+                <div class="flex flex-wrap gap-1.5">
+                  <button
+                    v-for="item in g.items"
+                    :key="item.id"
+                    class="inline-flex items-center gap-1 font-mono text-[11px] px-2 py-0.5 rounded border border-zinc-800 bg-zinc-900 text-zinc-300 hover:border-zinc-700"
+                    :data-testid="`relation-${item.id}`"
+                    @click="goRelated(item.id)"
+                  >
+                    <span
+                      class="w-1.5 h-1.5 rounded-full"
+                      :style="{ background: kindColor(item.kind) }"
+                    />
+                    {{ item.name }}
+                    <ArrowUpRight class="w-3 h-3 text-zinc-600" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <EmptyState
+          v-else
+          :icon="Search"
+          title="Select something to inspect"
+          hint="Pick a kind on the left, then a node — its intent, schema, source, and wiring show here."
+        />
+      </div>
+    </div>
+
+    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
+  </div>
+</template>

package/src/pages/Map.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+/**
+ * Map — the hero view. Reads the deep manifest natively (`useManifest`) and
+ * renders the system as bounded-context cards connected by inter-BC flows
+ * (`GraphCanvas`), a KPI strip across the top, and a `NodeCard` detail panel
+ * that opens when you select a primitive. Structure only — behaviour lives in
+ * Trace/Streams. Resilient: loading / error / empty states, tolerant of a
+ * flat or deep manifest (see `buildBcGraph`).
+ */
+import { computed, ref } from "vue";
+import { RefreshCw, Boxes } from "lucide-vue-next";
+import { useManifest } from "@/composables/useManifest";
+import { useProject } from "@/composables/useProject";
+import { useTelemetry } from "@/composables/useTelemetry";
+import { buildBcGraph, nodeDetail, type BcRow, type BcNodeDetail } from "@/lib/bc-graph";
+import { kindColor, KIND_LEGEND } from "@/lib/kind-colors";
+import { rollupMetrics, fmtCount } from "@/lib/node-metrics";
+import {
+  KpiTile,
+  StatusBadge,
+  GraphCanvas,
+  NodeCard,
+  EmptyState,
+  SourceDrawer,
+} from "@/components";
+
+const { activeCwd } = useProject();
+const { manifest, view, isLoading, isFetching, isError, error, refetch } = useManifest(activeCwd);
+
+// Live behaviour feed — overlaid as per-area metrics + flow animation.
+const { records } = useTelemetry(activeCwd);
+const metrics = computed(() => rollupMetrics(records.value));
+const hasRun = computed(() => metrics.value.total > 0);
+
+const graph = computed(() => buildBcGraph(manifest.value ?? null));
+
+/** KPI strip — totals straight off the manifest's flat arrays. */
+function count(key: string): number {
+  const arr = (manifest.value as unknown as Record<string, unknown>)?.[key];
+  return Array.isArray(arr) ? arr.length : 0;
+}
+/** Live totals across every area — the system's current pulse. */
+const liveTotals = computed(() => {
+  let dispatches = 0;
+  let errors = 0;
+  for (const m of metrics.value.byApp.values()) {
+    dispatches += m.dispatches;
+    errors += m.errors;
+  }
+  return { dispatches, errors };
+});
+
+const kpis = computed(() => [
+  { label: "Areas", value: graph.value.bcs.length, kind: "app" },
+  { label: "Actions", value: count("actions"), kind: "action" },
+  { label: "Events", value: count("events"), kind: "event" },
+  { label: "Queries", value: count("queries"), kind: "query" },
+  { label: "Projections", value: count("projections"), kind: "projection" },
+  { label: "Flows", value: graph.value.edges.length, kind: "listener" },
+  {
+    label: "Dispatches",
+    value: fmtCount(liveTotals.value.dispatches),
+    kind: "action",
+    live: true,
+  },
+  { label: "Errors", value: fmtCount(liveTotals.value.errors), kind: "workflow", live: true },
+]);
+
+const selectedId = ref<string | null>(null);
+const detail = computed<BcNodeDetail | null>(() =>
+  nodeDetail(manifest.value ?? null, selectedId.value),
+);
+
+function onSelect(row: BcRow): void {
+  selectedId.value = selectedId.value === row.id ? null : row.id;
+}
+
+const sourcePreview = ref<{ file: string; line?: number; column?: number } | null>(null);
+
+const isEmpty = computed(() => !isLoading.value && graph.value.bcs.length === 0);
+</script>
+
+<template>
+  <div class="h-full flex flex-col" data-testid="map-page">
+    <!-- header + KPI strip -->
+    <div class="border-b border-zinc-800 px-6 py-3">
+      <div class="flex items-center justify-between">
+        <div>
+          <h1 class="text-lg font-semibold tracking-tight">Map</h1>
+          <p class="text-xs text-zinc-500">Bounded contexts and the flows between them</p>
+        </div>
+        <div class="flex items-center gap-3">
+          <StatusBadge
+            :status="hasRun ? 'live' : 'idle'"
+            :pulse="hasRun"
+            :label="hasRun ? 'Live traffic' : 'Idle'"
+          />
+          <button
+            class="text-zinc-400 hover:text-zinc-100 transition-colors"
+            title="Refresh manifest"
+            data-testid="map-refresh"
+            @click="refetch()"
+          >
+            <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isFetching }" />
+          </button>
+        </div>
+      </div>
+
+      <div v-if="view?.versionMismatch" class="mt-2 text-[11px] text-amber-300">
+        Manifest version differs from this Studio build — some fields may be missing.
+      </div>
+
+      <div class="mt-3 flex flex-wrap gap-3">
+        <KpiTile
+          v-for="k in kpis"
+          :key="k.label"
+          :label="k.label"
+          :value="k.value"
+          :accent="kindColor(k.kind)"
+        />
+      </div>
+    </div>
+
+    <!-- canvas + detail -->
+    <div class="flex-1 flex min-h-0">
+      <div class="flex-1 relative min-w-0">
+        <div
+          v-if="isError"
+          class="absolute inset-0 flex items-center justify-center p-8 text-center"
+          data-testid="map-error"
+        >
+          <div>
+            <p class="text-sm text-rose-300">{{ error }}</p>
+            <button
+              class="mt-3 text-xs text-zinc-400 hover:text-zinc-100 underline"
+              @click="refetch()"
+            >
+              Retry
+            </button>
+          </div>
+        </div>
+        <div v-else-if="isLoading" class="p-6 text-zinc-400 text-sm">Loading manifest…</div>
+        <EmptyState
+          v-else-if="isEmpty"
+          :icon="Boxes"
+          title="No bounded contexts yet"
+          hint="Once your app registers handlers, its bounded contexts and their flows appear here."
+        />
+        <template v-else>
+          <GraphCanvas
+            :graph="graph"
+            :selected-id="selectedId"
+            :metrics="metrics.byApp"
+            @select="onSelect"
+          />
+          <!-- legend -->
+          <div
+            class="absolute bottom-3 left-3 flex flex-wrap gap-x-3 gap-y-1 rounded-md border border-zinc-800 bg-zinc-950/90 px-3 py-2"
+          >
+            <span
+              v-for="k in KIND_LEGEND"
+              :key="k"
+              class="inline-flex items-center gap-1 text-[10px] text-zinc-400"
+            >
+              <span class="h-1.5 w-1.5 rounded-full" :style="{ background: kindColor(k) }" />
+              {{ k }}
+            </span>
+          </div>
+        </template>
+      </div>
+
+      <aside
+        v-if="selectedId"
+        class="w-96 shrink-0 border-l border-zinc-800 bg-zinc-950"
+        data-testid="map-detail"
+      >
+        <NodeCard
+          :detail="detail"
+          @open-source="sourcePreview = $event"
+          @select-event="selectedId = `event:${$event}`"
+        />
+      </aside>
+    </div>
+
+    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
+  </div>
+</template>

package/src/pages/Operate.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+/**
+ * Operate — the one place you drive the system: dispatch a handler, run a
+ * topology/script, fire a CLI command. Three modes behind `?mode=`; each is a
+ * focused panel. Replaces the former Dispatch / Run / Commands pages.
+ */
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Send, Play, Terminal, Wrench } from "lucide-vue-next";
+import DispatchPanel from "./operate/DispatchPanel.vue";
+import RunPanel from "./operate/RunPanel.vue";
+import CommandsPanel from "./operate/CommandsPanel.vue";
+import EndpointPicker from "./operate/EndpointPicker.vue";
+
+type Mode = "dispatch" | "run" | "commands";
+
+const route = useRoute();
+const router = useRouter();
+
+const tabs: { mode: Mode; label: string; icon: typeof Send }[] = [
+  { mode: "dispatch", label: "Dispatch", icon: Send },
+  { mode: "run", label: "Run", icon: Play },
+  { mode: "commands", label: "Commands", icon: Terminal },
+];
+
+const mode = computed<Mode>(() => {
+  const m = route.query.mode;
+  return m === "run" || m === "commands" ? m : "dispatch";
+});
+
+function select(m: Mode): void {
+  if (m === mode.value) return;
+  // Drop mode-specific query (e.g. a command `?name=`) when switching tabs.
+  void router.replace({ query: { mode: m } });
+}
+</script>
+
+<template>
+  <div class="h-full flex flex-col" data-testid="operate-page">
+    <div class="border-b border-zinc-800 px-4 py-3 flex items-center gap-3">
+      <Wrench class="w-5 h-5 text-emerald-400 shrink-0" />
+      <h1 class="font-semibold text-lg">Operate</h1>
+      <div class="ml-2 flex items-center gap-1" role="tablist">
+        <button
+          v-for="t in tabs"
+          :key="t.mode"
+          class="flex items-center gap-1.5 px-3 py-1.5 rounded text-sm transition-colors"
+          :class="
+            mode === t.mode
+              ? 'bg-zinc-800 text-zinc-100'
+              : 'text-zinc-400 hover:text-zinc-100 hover:bg-zinc-900'
+          "
+          role="tab"
+          :aria-selected="mode === t.mode"
+          :data-testid="`operate-tab-${t.mode}`"
+          @click="select(t.mode)"
+        >
+          <component :is="t.icon" class="w-3.5 h-3.5" />
+          {{ t.label }}
+        </button>
+      </div>
+      <!-- Endpoint picker — appears only when the dev host exposes multiple endpoints. -->
+      <div class="ml-auto">
+        <EndpointPicker />
+      </div>
+    </div>
+
+    <div class="flex-1 min-h-0">
+      <DispatchPanel v-if="mode === 'dispatch'" />
+      <RunPanel v-else-if="mode === 'run'" />
+      <CommandsPanel v-else />
+    </div>
+  </div>
+</template>

package/src/pages/Plugins.stories.ts

@@ -3,7 +3,7 @@ import { createRouter, createMemoryHistory } from "vue-router";
 import Plugins from "./Plugins.vue";
 
 /**
- * Storybook for the Plugins page. The manifest fetch + SSE will fail
+ * Storybook for the Plugins page. The manifest fetch + telemetry stream fail
  * inside Storybook, so the page degrades to its empty / no-live state —
  * which is exactly the surface we want to document.
  */