@nwire/studio 0.12.1 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nwire/studio",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "description": "Nwire Studio — visual companion for the framework. Vue 3 + Vite + shadcn-vue + VueFlow. System topology, action runner, actor browser, projection viewer, DLQ inspector.",
   "keywords": [
     "devtools",
@@ -23,6 +23,7 @@
   "type": "module",
   "dependencies": {
     "@tailwindcss/vite": "^4.0.0",
+    "@tanstack/vue-query": "^5.62.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/controls": "^1.1.2",
@@ -40,7 +41,7 @@
     "vite": "npm:rolldown-vite@latest",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
-    "@nwire/supervisor": "0.12.1"
+    "@nwire/supervisor": "0.13.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.60.0",
@@ -51,7 +52,8 @@
     "storybook": "^10.4.0",
     "typescript": "^5.9.3",
     "vitest": "^4.1.6",
-    "vue-tsc": "^2.2.0"
+    "vue-tsc": "^2.2.0",
+    "@nwire/scan": "0.13.1"
   },
   "scripts": {
     "dev": "vite",

package/src/App.vue

@@ -14,15 +14,10 @@ import {
 import {
   Home,
   Network,
-  Boxes,
-  Zap,
-  Radio,
   GitBranch,
   Activity,
   RefreshCw,
-  Send,
   Waves,
-  Play,
   Workflow,
   Anchor,
   Puzzle,
@@ -30,17 +25,42 @@ import {
   Map,
   Wrench,
   Eye,
-  Database,
-  Search,
-  Terminal,
+  Bug,
 } from "lucide-vue-next";
-import { useCache } from "@/lib/cache";
+import { useManifest } from "@/composables/useManifest";
+import { useProject } from "@/composables/useProject";
+import { missingFields as detectMissingFields } from "@/lib/manifest-health";
 import { ErrorBoundary } from "@/components";
 import { Button } from "@/components/ui/button";
 
 const route = useRoute();
 const router = useRouter();
-const { cache, loading, error, missingFields, reload } = useCache();
+
+// Native manifest feed — the deep `.nwire/manifest.json` read directly. Drives
+// the footer counts, the built timestamp, the load/error states, and the
+// stale-manifest banner.
+const { activeCwd } = useProject();
+const { manifest, view, isLoading, error, refetch } = useManifest(activeCwd);
+
+/**
+ * Field paths the manifest is missing vs. the current scanner schema, plus a
+ * version mismatch. Drives the stale-manifest banner so an operator on an old
+ * `.nwire/manifest.json` is told exactly what to rebuild.
+ */
+const missingFields = computed(() => detectMissingFields(manifest.value));
+const isStale = computed(
+  () => missingFields.value.length > 0 || (view.value?.versionMismatch ?? false),
+);
+
+/**
+ * When the manifest was built — a runtime field the scanner stamps onto the
+ * JSON but not the typed `Manifest`, so read it tolerantly. `null` until the
+ * first fetch lands, which keeps the footer line hidden.
+ */
+const builtAt = computed(() => {
+  const stamp = (manifest.value as { generatedAt?: unknown } | undefined)?.generatedAt;
+  return typeof stamp === "string" ? stamp : null;
+});
 
 /**
  * The active project slug — read from the URL when present, falls back
@@ -89,7 +109,7 @@ const catalog = ref<Record<string, ProjectSnapshot>>({});
 
 async function bootProjects() {
   // Server-side registration happens in main.ts before mount (so the
-  // cache fetch has an accepted cwd). Here we resolve the active
+  // manifest fetch has an accepted cwd). Here we resolve the active
   // project's metadata + load the catalog into reactive state.
   catalog.value = loadCatalog();
   // If the URL carries a /projects/:slug, that's the source of truth —
@@ -169,8 +189,8 @@ onBeforeUnmount(() => {
 // Whenever the manifest finishes loading (initial fetch + reloads), update
 // this project's catalog snapshot so /projects shows fresh composition
 // counts the next time Studio opens. Project metadata might land before
-// the cache does, so we watch both.
-watch([project, cache], persistSnapshot);
+// the manifest does, so we watch both.
+watch([project, view], persistSnapshot);
 
 /**
  * One-shot URL upgrade — if the user landed on a bare path like
@@ -186,41 +206,32 @@ watch([project, () => route.path], ([_, currentPath]) => {
   // Don't fight a fresh navigation in flight.
   const target = currentPath === "/" ? `/projects/${slug}` : `/projects/${slug}${currentPath}`;
   if (target !== currentPath) {
-    void router.replace(target);
+    // Preserve query + hash — deep-links like /inspect?kind=event must survive
+    // the upgrade.
+    void router.replace({ path: target, query: route.query, hash: route.hash });
   }
 });
 
 function persistSnapshot() {
   if (!project.value) return;
-  const c = cache.value;
+  const v = view.value;
   upsertCurrent({
     cwd: project.value.cwd,
     name: project.value.name,
     lastVisited: new Date().toISOString(),
-    composition: c
+    composition: v
       ? {
-          apps: c.apps.length,
-          plugins: c.plugins.length,
-          actions: c.actions.length,
-          events: c.events.length,
-          resolvers: c.resolvers?.length ?? 0,
-          workflows: c.workflows?.length ?? 0,
+          apps: v.byKind("app").length,
+          plugins: v.byKind("plugin").length,
+          actions: v.byKind("action").length,
+          events: v.byKind("event").length,
+          resolvers: v.byKind("resolver").length,
+          workflows: v.byKind("workflow").length,
         }
       : undefined,
   });
 }
 
-async function rebuildCache() {
-  // Studio's runner-plugin exposes the CLI surface; "cache" rebuilds .nwire/.
-  await fetch("/__nwire/run/exec", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ command: "cache" }),
-  });
-  // Give the supervisor a beat to write the new manifest, then refresh.
-  setTimeout(() => void reload(), 800);
-}
-
 // Studio nav — three top-level surfaces:
 //
 //   Map     — the live system in motion (architecture, trace, stream)
@@ -239,31 +250,26 @@ const navGroups = [
     label: "Map",
     icon: Map,
     items: [
+      { to: "/map", label: "System Map", icon: Map }, // BC cards + inter-context flows (hero)
       { to: "/topology", label: "Topology", icon: Network }, // app+module shape
       { to: "/trace", label: "Trace", icon: Workflow }, // causal tree, one correlationId
-      { to: "/live", label: "Stream", icon: Waves }, // raw live event firehose
+      { to: "/errors", label: "Errors", icon: Bug }, // friendly RCA over failures
+      { to: "/streams", label: "Streams", icon: Waves }, // live telemetry firehose
     ],
   },
   {
     label: "Run",
     icon: Wrench,
     items: [
-      { to: "/dispatch", label: "Try", icon: Send }, // form-driven action dispatch
-      { to: "/run", label: "Processes", icon: Play }, // start/stop processes + logs
-      { to: "/commands", label: "Commands", icon: Terminal }, // please CLI surface
-      { to: "/workflows", label: "Workflows", icon: GitBranch }, // workflow defs + runs
+      { to: "/operate", label: "Operate", icon: Wrench }, // dispatch · run · commands (one view)
+      { to: "/inspect?kind=workflow", label: "Workflows", icon: GitBranch }, // workflow defs
     ],
   },
   {
     label: "Inspect",
     icon: Eye,
     items: [
-      { to: "/apps", label: "Apps", icon: Boxes }, // bounded contexts — one per app
-      { to: "/actions", label: "Actions", icon: Zap },
-      { to: "/events", label: "Events", icon: Radio },
-      { to: "/projections", label: "Projections", icon: Database },
-      { to: "/queries", label: "Queries", icon: Search },
-      { to: "/sinks", label: "Sinks", icon: Waves }, // outbound delivery chain
+      { to: "/inspect", label: "Browse", icon: Eye }, // unified per-kind browser (native manifest)
       { to: "/plugins", label: "Plugins", icon: Puzzle },
       { to: "/hooks", label: "Hooks", icon: Anchor },
     ],
@@ -369,18 +375,20 @@ const navGroups = [
         </div>
       </nav>
       <div class="border-t border-zinc-800 px-4 py-3 text-xs text-zinc-500 space-y-1">
-        <div v-if="cache" class="flex items-center justify-between">
-          <span>{{ cache.apps.length }} apps · {{ cache.plugins.length }} plugins</span>
+        <div v-if="view" class="flex items-center justify-between">
+          <span
+            >{{ view.byKind("app").length }} apps · {{ view.byKind("plugin").length }} plugins</span
+          >
           <button
             class="text-zinc-400 hover:text-zinc-100 transition-colors"
             title="Reload manifest"
-            @click="reload"
+            @click="refetch()"
           >
             <RefreshCw class="w-3 h-3" />
           </button>
         </div>
-        <div v-if="cache" class="text-zinc-600 text-[10px]">
-          built {{ new Date(cache.generatedAt).toLocaleString() }}
+        <div v-if="builtAt" class="text-zinc-600 text-[10px]">
+          built {{ new Date(builtAt).toLocaleString() }}
         </div>
       </div>
     </aside>
@@ -391,16 +399,14 @@ const navGroups = [
         class="m-6 p-4 rounded bg-red-950/50 border border-red-900 text-red-200"
         data-testid="cache-error"
       >
-        <div class="font-medium mb-1">Cache load error</div>
+        <div class="font-medium mb-1">Manifest load error</div>
         <div class="text-sm">{{ error }}</div>
-        <Button variant="secondary" size="sm" class="mt-3" @click="rebuildCache">
-          Rebuild cache
-        </Button>
+        <Button variant="secondary" size="sm" class="mt-3" @click="refetch()"> Retry </Button>
       </div>
-      <div v-else-if="loading && !cache" class="p-6 text-zinc-400">Loading manifest…</div>
+      <div v-else-if="isLoading && !manifest" class="p-6 text-zinc-400">Loading manifest…</div>
       <template v-else>
         <div
-          v-if="missingFields.length > 0"
+          v-if="isStale"
           class="m-4 p-3 rounded bg-amber-950/30 border border-amber-900 text-amber-200 text-xs flex items-center justify-between gap-3"
           data-testid="stale-cache-banner"
         >
@@ -409,7 +415,7 @@ const navGroups = [
               missingFields.join(", ")
             }}). Likely built with an older scanner — rebuild for the full picture.
           </div>
-          <Button variant="secondary" size="sm" @click="rebuildCache">Rebuild</Button>
+          <Button variant="secondary" size="sm" @click="refetch()">Reload</Button>
         </div>
         <ErrorBoundary>
           <RouterView />

package/src/components/BcCard.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import BcCard from "./BcCard.vue";
+import type { BcNode } from "@/lib/bc-graph";
+
+const orders: BcNode = {
+  name: "orders",
+  rows: [
+    { id: "action:orders.place", kind: "action", name: "orders.place", public: true },
+    { id: "action:orders.cancel", kind: "action", name: "orders.cancel" },
+    { id: "event:orders.placed", kind: "event", name: "orders.placed", public: true },
+    { id: "query:orders.list", kind: "query", name: "orders.list" },
+    { id: "workflow:orders.fulfil", kind: "workflow", name: "orders.fulfil" },
+    { id: "projection:orders.dashboard", kind: "projection", name: "orders.dashboard" },
+  ],
+};
+
+const meta: Meta<typeof BcCard> = {
+  title: "Map/BcCard",
+  component: BcCard,
+  tags: ["autodocs"],
+};
+export default meta;
+
+type Story = StoryObj<typeof BcCard>;
+
+export const Default: Story = {
+  render: () => ({
+    components: { BcCard },
+    setup: () => ({ orders }),
+    template: `<div class="w-[280px] bg-zinc-900 p-4"><BcCard :bc="orders" /></div>`,
+  }),
+};
+
+export const WithSelection: Story = {
+  render: () => ({
+    components: { BcCard },
+    setup: () => ({ orders }),
+    template: `<div class="w-[280px] bg-zinc-900 p-4"><BcCard :bc="orders" selected-id="event:orders.placed" /></div>`,
+  }),
+};
+
+export const Empty: Story = {
+  render: () => ({
+    components: { BcCard },
+    template: `<div class="w-[280px] bg-zinc-900 p-4"><BcCard :bc="{ name: 'billing', rows: [] }" /></div>`,
+  }),
+};

package/src/components/BcCard.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+/**
+ * `BcCard` — one bounded context (one area of the system) as a canvas card: a
+ * header with the area name, a health dot, and per-kind counts; an optional
+ * live metrics row (dispatches · errors · last activity) once telemetry flows;
+ * then its member primitives as selectable rows, each colour-keyed by kind. The
+ * Map renders these as the nodes of the system canvas; the same component works
+ * standalone (lists, Storybook) because it takes a plain `BcNode` and emits
+ * `select`. Metrics are optional, so non-Map consumers render unchanged.
+ */
+import { computed } from "vue";
+import { Globe } from "lucide-vue-next";
+import type { BcNode, BcRow } from "@/lib/bc-graph";
+import { kindColor } from "@/lib/kind-colors";
+import type { AppMetrics } from "@/lib/node-metrics";
+import { fmtCount } from "@/lib/node-metrics";
+
+const props = defineProps<{
+  bc: BcNode;
+  selectedId?: string | null;
+  /** Live per-area metrics, or undefined before any run (neutral placeholders). */
+  metrics?: AppMetrics;
+}>();
+
+const emit = defineEmits<{ (e: "select", row: BcRow): void }>();
+
+/** Per-kind counts, in a stable display order, for the header chips. */
+const KIND_ORDER = ["action", "query", "event", "actor", "workflow", "projection"];
+const counts = computed(() => {
+  const by = new Map<string, number>();
+  for (const r of props.bc.rows) by.set(r.kind, (by.get(r.kind) ?? 0) + 1);
+  return KIND_ORDER.filter((k) => by.has(k)).map((k) => ({ kind: k, n: by.get(k)! }));
+});
+
+/** Health: error if any failures, live if any traffic, else idle (pre-run). */
+const health = computed<"idle" | "live" | "error">(() => {
+  const m = props.metrics;
+  if (!m || m.total === 0) return "idle";
+  return m.errors > 0 ? "error" : "live";
+});
+const healthDot = computed(
+  () => ({ idle: "bg-zinc-600", live: "bg-emerald-400", error: "bg-rose-400" })[health.value],
+);
+
+/** "12:04:31" style local time for the last-activity stamp. */
+const lastActivity = computed(() => {
+  const ts = props.metrics?.lastTs;
+  if (!ts) return "—";
+  const d = new Date(ts);
+  return Number.isNaN(d.getTime()) ? "—" : d.toLocaleTimeString();
+});
+
+/** Drop the `${app}.` prefix so rows read short inside their own card. */
+function shortName(name: string): string {
+  const prefix = `${props.bc.name}.`;
+  return name.startsWith(prefix) ? name.slice(prefix.length) : name;
+}
+</script>
+
+<template>
+  <div
+    class="rounded-xl border bg-zinc-950 overflow-hidden flex flex-col w-full shadow-sm transition-colors"
+    :class="health === 'error' ? 'border-rose-900/60' : 'border-zinc-800'"
+    data-testid="bc-card"
+  >
+    <div class="px-3 py-2.5 border-b border-zinc-800 bg-zinc-900/50">
+      <div class="flex items-center gap-2">
+        <span
+          class="h-2 w-2 shrink-0 rounded-full"
+          :class="[healthDot, health === 'live' ? 'animate-pulse' : '']"
+          :data-status="health"
+          data-testid="bc-card-health"
+        />
+        <span class="font-mono text-sm text-zinc-100 truncate flex-1" data-testid="bc-card-name">
+          {{ bc.name }}
+        </span>
+        <span class="text-[10px] text-zinc-600">{{ bc.rows.length }}</span>
+      </div>
+      <div class="mt-1.5 flex flex-wrap gap-1.5">
+        <span
+          v-for="c in counts"
+          :key="c.kind"
+          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(c.kind) }" />
+          {{ c.n }} {{ c.kind }}
+        </span>
+      </div>
+
+      <!-- live metrics row -->
+      <div
+        class="mt-2 grid grid-cols-3 gap-1 rounded-md border border-zinc-800/80 bg-zinc-950/60 px-2 py-1.5"
+        data-testid="bc-card-metrics"
+      >
+        <div class="flex flex-col">
+          <span
+            class="font-mono text-[12px] tabular-nums text-zinc-200"
+            data-testid="bc-metric-dispatches"
+            >{{ fmtCount(metrics?.dispatches) }}</span
+          >
+          <span class="text-[8px] uppercase tracking-wide text-zinc-600">dispatches</span>
+        </div>
+        <div class="flex flex-col">
+          <span
+            class="font-mono text-[12px] tabular-nums"
+            :class="metrics && metrics.errors > 0 ? 'text-rose-300' : 'text-zinc-200'"
+            data-testid="bc-metric-errors"
+            >{{ fmtCount(metrics?.errors) }}</span
+          >
+          <span class="text-[8px] uppercase tracking-wide text-zinc-600">errors</span>
+        </div>
+        <div class="flex flex-col">
+          <span
+            class="font-mono text-[11px] tabular-nums text-zinc-300"
+            data-testid="bc-metric-last"
+            >{{ lastActivity }}</span
+          >
+          <span class="text-[8px] uppercase tracking-wide text-zinc-600">last</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex-1 overflow-y-auto max-h-[280px] py-1">
+      <button
+        v-for="row in bc.rows"
+        :key="row.id"
+        type="button"
+        class="w-full flex items-center gap-2 px-3 py-1 text-left hover:bg-zinc-900 transition-colors"
+        :class="{ 'bg-zinc-900': row.id === selectedId }"
+        :data-testid="`bc-row-${row.id}`"
+        @click.stop="emit('select', row)"
+      >
+        <span
+          class="h-2 w-2 rounded-full shrink-0"
+          :style="{ background: kindColor(row.kind) }"
+          :title="row.kind"
+        />
+        <span class="font-mono text-xs text-zinc-300 truncate flex-1">{{
+          shortName(row.name)
+        }}</span>
+        <Globe
+          v-if="row.public"
+          class="w-3 h-3 text-emerald-500 shrink-0"
+          data-testid="bc-row-public"
+        />
+      </button>
+      <div v-if="bc.rows.length === 0" class="px-3 py-2 text-[10px] text-zinc-600">
+        No primitives yet
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/DurationBar.stories.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { expect, within } from "storybook/test";
+import DurationBar from "./DurationBar.vue";
+
+const meta: Meta<typeof DurationBar> = {
+  title: "Flow/DurationBar",
+  component: DurationBar,
+  tags: ["autodocs"],
+};
+export default meta;
+
+type Story = StoryObj<typeof DurationBar>;
+
+export const UnderSla: Story = {
+  args: { ms: 12.4, max: 200, warnMs: 50, dangerMs: 100 },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement);
+    await expect(c.getByTestId("duration-value")).toHaveTextContent("12.4ms");
+    await expect(c.getByTestId("duration-bar")).toHaveAttribute("data-tone", "ok");
+  },
+};
+
+export const Warn: Story = {
+  args: { ms: 70, max: 200, warnMs: 50, dangerMs: 100 },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByTestId("duration-bar")).toHaveAttribute(
+      "data-tone",
+      "warn",
+    );
+  },
+};
+
+export const Danger: Story = {
+  args: { ms: 160, max: 200, warnMs: 50, dangerMs: 100 },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByTestId("duration-bar")).toHaveAttribute(
+      "data-tone",
+      "danger",
+    );
+  },
+};
+
+export const Scale: Story = {
+  render: () => ({
+    components: { DurationBar },
+    template: `
+      <div class="flex flex-col gap-2 bg-zinc-900 p-4 w-80">
+        <DurationBar :ms="4" :max="200" :warn-ms="50" :danger-ms="100" />
+        <DurationBar :ms="48" :max="200" :warn-ms="50" :danger-ms="100" />
+        <DurationBar :ms="92" :max="200" :warn-ms="50" :danger-ms="100" />
+        <DurationBar :ms="180" :max="200" :warn-ms="50" :danger-ms="100" />
+      </div>
+    `,
+  }),
+};

package/src/components/DurationBar.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * `DurationBar` — a horizontal bar sized by a duration in ms, coloured against
+ * SLA thresholds (green under `warnMs`, amber up to `dangerMs`, red beyond),
+ * with a right-aligned `N.Nms` label. Used in lists and the trace inspector to
+ * read latency at a glance.
+ *
+ *   <DurationBar :ms="12.4" :max="120" :warn-ms="50" :danger-ms="100" />
+ */
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    /** Duration in milliseconds. */
+    ms: number;
+    /** Full-scale value the bar fills against. Defaults to `ms` (always full). */
+    max?: number;
+    /** Amber at/above this. */
+    warnMs?: number;
+    /** Red at/above this. */
+    dangerMs?: number;
+  }>(),
+  { max: undefined, warnMs: undefined, dangerMs: undefined },
+);
+
+const widthPct = computed(() => {
+  const scale = props.max && props.max > 0 ? props.max : props.ms || 1;
+  return Math.max(2, Math.min(100, (props.ms / scale) * 100));
+});
+
+const tone = computed(() => {
+  if (props.dangerMs !== undefined && props.ms >= props.dangerMs) return "danger";
+  if (props.warnMs !== undefined && props.ms >= props.warnMs) return "warn";
+  return "ok";
+});
+
+const barClass = computed(
+  () =>
+    ({
+      ok: "bg-emerald-500/70",
+      warn: "bg-amber-500/80",
+      danger: "bg-rose-500/80",
+    })[tone.value],
+);
+const textClass = computed(
+  () =>
+    ({
+      ok: "text-emerald-300",
+      warn: "text-amber-300",
+      danger: "text-rose-300",
+    })[tone.value],
+);
+</script>
+
+<template>
+  <div class="flex items-center gap-2" data-testid="duration-bar" :data-tone="tone">
+    <div class="relative h-1.5 flex-1 rounded-full bg-zinc-800 overflow-hidden">
+      <div
+        class="absolute inset-y-0 left-0 rounded-full"
+        :class="barClass"
+        :style="{ width: widthPct + '%' }"
+      />
+    </div>
+    <span
+      class="text-[10px] tabular-nums shrink-0 w-14 text-right"
+      :class="textClass"
+      data-testid="duration-value"
+    >
+      {{ ms.toFixed(1) }}ms
+    </span>
+  </div>
+</template>