@nwire/studio 0.12.1 → 0.13.0

package/src/pages/Topology.vue

@@ -1,164 +1,346 @@
 <script setup lang="ts">
 /**
- * Topology — apps + plugins + event flow.
+ * Topology — the app's live service map, not a single rectangle.
  *
- * Each app is a node. Its installed plugins are listed inside the node;
- * its outbound sinks are listed below. Edges are event-flow edges from
- * the `graph.events` cache: producer-app → consumer-app per event,
- * coloured for cross-app vs in-app.
+ * The Wiring tab draws the real pipeline left→right: sources (routes / webhooks
+ * / crons) → handlers (actions / queries) → effects (events / external calls /
+ * workflows / actors / projections) → sinks. Each node is a rich `ServiceNode`
+ * card (kind icon, title, status dot, live metrics), accent-coloured by kind and
+ * positioned by the pure layered layout in `topology-graph`. Telemetry overlays
+ * per-node throughput / errors / p50 and animates the edges that carry traffic;
+ * before any run the metrics show neutral placeholders. Clicking a node opens
+ * the shared `NodeCard` detail. The Endpoints tab is the "what's exposed" view.
+ *
+ * Stability: node positions come from the manifest only (deterministic layout),
+ * so a telemetry refresh updates counts in place and never moves a node.
  */
 import { computed, ref } from "vue";
-import { VueFlow, type Node, type Edge, MarkerType } from "@vue-flow/core";
+import { VueFlow, type Node, type Edge, MarkerType, Position } from "@vue-flow/core";
 import { Background } from "@vue-flow/background";
 import { Controls } from "@vue-flow/controls";
-import { useCache } from "@/lib/cache";
+import { MiniMap } from "@vue-flow/minimap";
+import { Network } from "lucide-vue-next";
+import { useManifest } from "@/composables/useManifest";
+import { useProject } from "@/composables/useProject";
+import { useTelemetry } from "@/composables/useTelemetry";
+import {
+  buildWiringGraph,
+  layoutWiringGraph,
+  buildEndpoints,
+  type WiringLayer,
+} from "@/lib/topology-graph";
+import { nodeDetail, type BcNodeDetail } from "@/lib/bc-graph";
+import { kindColor, KIND_LEGEND } from "@/lib/kind-colors";
+import { rollupMetrics, edgeActivity } from "@/lib/node-metrics";
+import { NodeCard, EmptyState, SourceDrawer, ServiceNode } from "@/components";
 import "@vue-flow/core/dist/style.css";
 import "@vue-flow/core/dist/theme-default.css";
 import "@vue-flow/controls/dist/style.css";
+import "@vue-flow/minimap/dist/style.css";
 
-const { cache } = useCache();
-
-const NODE_W = 260;
-const NODE_GAP_X = 80;
-const NODE_GAP_Y = 80;
-const COLS = 3;
-
-const elements = computed<{ nodes: Node[]; edges: Edge[] }>(() => {
-  if (!cache.value) return { nodes: [], edges: [] };
-  const nodes: Node[] = [];
-
-  for (let i = 0; i < cache.value.apps.length; i++) {
-    const app = cache.value.apps[i]!;
-    const pluginsForApp = cache.value.plugins.filter((p) => p.app === app.name);
-    const sinksForApp = cache.value.sinks?.filter((s) => s.app === app.name) ?? [];
-    const actionsCount = cache.value.actions.filter((a) => a.app === app.name).length;
-    const eventsCount = cache.value.events.filter((e) => e.app === app.name).length;
-    const projectionsCount = cache.value.projections.filter((p) => p.app === app.name).length;
-
-    const col = i % COLS;
-    const row = Math.floor(i / COLS);
-    const height = 110 + pluginsForApp.length * 18 + sinksForApp.length * 18;
-
-    nodes.push({
-      id: `app:${app.name}`,
-      position: { x: 40 + col * (NODE_W + NODE_GAP_X), y: 40 + row * (height + NODE_GAP_Y) },
-      type: "default",
-      data: {
-        label: app.name,
-        plugins: pluginsForApp.map((p) => p.name),
-        sinks: sinksForApp.map((s) => `${s.position} · ${s.kind ?? s.name}`),
-        actionsCount,
-        eventsCount,
-        projectionsCount,
-      },
-      style: {
-        width: `${NODE_W}px`,
-        height: `${height}px`,
-        background: "#0a0a0a",
-        border: "1px solid rgb(34, 197, 94)",
-        color: "#e4e4e7",
-        borderRadius: "8px",
-        padding: "0",
-      },
-    });
-  }
-
-  // Edges from the event graph: producer-app → consumer-app.
-  const edges: Edge[] = [];
-  const eventLog = cache.value.graph?.events ?? [];
-  for (const edge of eventLog) {
-    const producer = (edge as { producer?: { app?: string } }).producer;
-    const consumers = (edge as { consumers?: { app?: string; via?: string }[] }).consumers ?? [];
-    const sourceAppName = producer?.app;
-    if (!sourceAppName) continue;
-    const sourceId = `app:${sourceAppName}`;
-    for (const cons of consumers) {
-      if (!cons.app) continue;
-      const targetId = `app:${cons.app}`;
-      if (sourceId === targetId) continue;
-      const eventName = (edge as { event?: string }).event ?? "";
-      edges.push({
-        id: `${sourceId}->${targetId}::${eventName}::${cons.via ?? "via"}`,
-        source: sourceId,
-        target: targetId,
-        label: eventName,
+const { activeCwd } = useProject();
+const { manifest, view, isLoading } = useManifest(activeCwd);
+
+// Live behaviour feed — overlaid as per-node metrics + edge animation.
+const { records } = useTelemetry(activeCwd);
+const metrics = computed(() => rollupMetrics(records.value));
+const hasRun = computed(() => metrics.value.total > 0);
+
+const tab = ref<"wiring" | "endpoints">("wiring");
+
+/** The full wiring graph, plus the apps present (for the per-app filter). */
+const fullGraph = computed(() => buildWiringGraph(view.value));
+const apps = computed(() => fullGraph.value.apps);
+
+/** When more than one app, scope the canvas to one at a time so the wiring reads. */
+const appFilter = ref<string | null>(null);
+const effectiveApp = computed(() =>
+  appFilter.value && apps.value.includes(appFilter.value)
+    ? appFilter.value
+    : apps.value.length === 1
+      ? apps.value[0]!
+      : null,
+);
+const graph = computed(() =>
+  effectiveApp.value ? buildWiringGraph(view.value, effectiveApp.value) : fullGraph.value,
+);
+
+const LAYER_LABEL: Record<WiringLayer, string> = {
+  source: "Sources",
+  handler: "Handlers",
+  effect: "Effects",
+  sink: "Sinks",
+};
+
+/**
+ * Node positions — from the manifest ONLY. This array's identity changes only
+ * when the wiring graph changes (manifest / app filter), so a telemetry tick
+ * never re-seeds VueFlow's positions: metrics ride the `data` object instead.
+ */
+const nodes = computed<Node[]>(() => {
+  const laid = layoutWiringGraph(graph.value, {
+    nodeWidth: 196,
+    nodeHeight: 84,
+    laneGap: 130,
+    rowGap: 34,
+  });
+  return laid.map((n) => ({
+    id: n.id,
+    type: "service",
+    position: { x: n.x, y: n.y },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+    data: { kind: n.kind, name: n.name, layer: n.layer, public: n.public },
+    style: { width: `${n.width}px` },
+  }));
+});
+
+const edges = computed<Edge[]>(() => {
+  const present = new Set(nodes.value.map((n) => n.id));
+  const live = edgeActivity(
+    metrics.value.byNode,
+    graph.value.edges.map((e) => ({ id: e.id, from: e.from, to: e.to })),
+  );
+  return graph.value.edges
+    .filter((e) => present.has(e.from) && present.has(e.to))
+    .map((e) => {
+      const act = live.get(e.id);
+      const color = e.back ? "#71717a" : "#a78bfa";
+      const volume = act?.volume ?? 0;
+      const label = volume > 0 ? `${e.type} · ${volume}` : e.type;
+      return {
+        id: e.id,
+        source: e.from,
+        target: e.to,
+        label,
         type: "smoothstep",
-        animated: true,
-        style: { stroke: "#a78bfa", strokeWidth: 2 },
-        labelStyle: { fontSize: "10px", fill: "#a1a1aa" },
+        animated: act?.active ?? false,
+        style: {
+          stroke: color,
+          strokeWidth: act?.active ? 2.5 : 1.5,
+          strokeDasharray: e.back ? "4 3" : undefined,
+          opacity: act?.active ? 1 : 0.7,
+        },
+        labelStyle: { fontSize: "9px", fill: act?.active ? "#e4e4e7" : "#a1a1aa" },
         labelBgStyle: { fill: "#18181b" },
-        labelBgPadding: [4, 2] as [number, number],
-        labelBgBorderRadius: 4,
-        markerEnd: { type: MarkerType.ArrowClosed, color: "#a78bfa" },
-      });
-    }
-  }
-
-  return { nodes, edges };
+        labelBgPadding: [3, 1] as [number, number],
+        labelBgBorderRadius: 3,
+        markerEnd: { type: MarkerType.ArrowClosed, color },
+      } satisfies Edge;
+    });
 });
 
-const showCrossOnly = ref(false);
-const filtered = computed(() => {
-  if (!showCrossOnly.value) return elements.value;
-  const edges = elements.value.edges.filter((e) => e.source !== e.target);
-  return { nodes: elements.value.nodes, edges };
+/** Lane headers drawn above the canvas (only lanes that hold nodes). */
+const lanes = computed<WiringLayer[]>(() => {
+  const present = new Set(graph.value.nodes.map((n) => n.layer));
+  return (["source", "handler", "effect", "sink"] as WiringLayer[]).filter((l) => present.has(l));
 });
+
+// Detail panel — reuses the Map's NodeCard + nodeDetail resolver.
+const selectedId = ref<string | null>(null);
+const detail = computed<BcNodeDetail | null>(() =>
+  nodeDetail(manifest.value ?? null, selectedId.value),
+);
+function onNodeClick(id: string): void {
+  selectedId.value = selectedId.value === id ? null : id;
+}
+const sourcePreview = ref<{ file: string; line?: number; column?: number } | null>(null);
+
+const endpoints = computed(() => buildEndpoints(view.value));
+
+const isEmpty = computed(() => !isLoading.value && fullGraph.value.nodes.length === 0);
+
+/** MiniMap node tint — accent by kind so the overview reads at a glance. */
+function miniColor(node: { data?: { kind?: string } }): string {
+  return kindColor(node.data?.kind);
+}
 </script>
 
 <template>
-  <div v-if="cache" class="h-full flex flex-col" data-testid="topology-page">
-    <div class="border-b border-zinc-800 px-6 py-3 flex items-center justify-between">
-      <div>
-        <h1 class="text-lg font-semibold tracking-tight">Topology</h1>
-        <p class="text-xs text-zinc-500">
-          Apps · plugins · sinks · cross-app event flows
-          <span class="ml-2">
-            <span class="inline-block w-3 h-0.5 bg-purple-400 align-middle mr-1"></span>
-            cross-app
+  <div class="h-full flex flex-col" data-testid="topology-page">
+    <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">Topology</h1>
+          <p class="text-xs text-zinc-500">
+            How the app is wired: source → handler → effect → sink
+          </p>
+        </div>
+        <div class="flex items-center gap-3">
+          <span
+            class="inline-flex items-center gap-1.5 text-[11px]"
+            :class="hasRun ? 'text-emerald-300' : 'text-zinc-500'"
+            data-testid="topology-live"
+          >
+            <span
+              class="h-2 w-2 rounded-full"
+              :class="hasRun ? 'bg-emerald-400 animate-pulse' : 'bg-zinc-600'"
+            />
+            {{ hasRun ? "Live" : "Idle" }}
+          </span>
+          <select
+            v-if="apps.length > 1 && tab === 'wiring'"
+            v-model="appFilter"
+            class="bg-zinc-900 border border-zinc-800 rounded text-xs text-zinc-300 px-2 py-1"
+            data-testid="topology-app-filter"
+          >
+            <option v-for="a in apps" :key="a" :value="a">{{ a }}</option>
+          </select>
+          <div class="flex rounded border border-zinc-800 overflow-hidden text-xs">
+            <button
+              class="px-3 py-1"
+              :class="tab === 'wiring' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400'"
+              data-testid="topology-tab-wiring"
+              @click="tab = 'wiring'"
+            >
+              Wiring
+            </button>
+            <button
+              class="px-3 py-1 border-l border-zinc-800"
+              :class="tab === 'endpoints' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400'"
+              data-testid="topology-tab-endpoints"
+              @click="tab = 'endpoints'"
+            >
+              Endpoints
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="isLoading" class="flex-1 grid place-items-center text-sm text-zinc-500">
+      Loading manifest…
+    </div>
+    <EmptyState
+      v-else-if="isEmpty"
+      :icon="Network"
+      title="No wiring discovered yet"
+      hint="Run nwire cache to build the manifest, then this maps the app's source → handler → effect → sink pipeline."
+      data-testid="topology-empty"
+    />
+
+    <!-- WIRING TAB -->
+    <div v-else-if="tab === 'wiring'" class="flex-1 flex min-h-0">
+      <div class="flex-1 relative min-w-0">
+        <!-- lane headers -->
+        <div
+          class="absolute top-0 left-0 right-0 z-10 flex pointer-events-none px-6 pt-2"
+          data-testid="topology-lanes"
+        >
+          <div
+            v-for="l in lanes"
+            :key="l"
+            class="flex-1 text-center text-[10px] uppercase tracking-wider text-zinc-600 font-medium"
+          >
+            {{ LAYER_LABEL[l] }}
+          </div>
+        </div>
+
+        <VueFlow
+          :nodes="nodes"
+          :edges="edges"
+          :fit-view-on-init="true"
+          :min-zoom="0.2"
+          :max-zoom="1.5"
+          :default-edge-options="{ type: 'smoothstep' }"
+          @node-click="onNodeClick($event.node.id)"
+        >
+          <template #node-service="{ data, id }">
+            <ServiceNode
+              :id="id"
+              :kind="data.kind"
+              :name="data.name"
+              :public="data.public"
+              :selected="selectedId === id"
+              :metrics="metrics.byNode.get(id)"
+            />
+          </template>
+          <Background :pattern-color="'#27272a'" :gap="22" :size="1.4" />
+          <MiniMap pannable zoomable :node-color="miniColor" class="!bg-zinc-950/80" />
+          <Controls />
+        </VueFlow>
+
+        <!-- kind 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 backdrop-blur"
+          data-testid="topology-legend"
+        >
+          <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>
-        </p>
+        </div>
       </div>
-      <label class="flex items-center gap-2 text-xs text-zinc-400">
-        <input v-model="showCrossOnly" type="checkbox" class="accent-purple-400" />
-        Cross-app only
-      </label>
+
+      <aside
+        v-if="selectedId"
+        class="w-96 shrink-0 border-l border-zinc-800 bg-zinc-950"
+        data-testid="topology-detail"
+      >
+        <NodeCard
+          :detail="detail"
+          @open-source="sourcePreview = $event"
+          @select-event="selectedId = `event:${$event}`"
+        />
+      </aside>
     </div>
 
-    <div class="flex-1 relative">
-      <VueFlow
-        :nodes="filtered.nodes"
-        :edges="filtered.edges"
-        :fit-view-on-init="true"
-        :min-zoom="0.2"
+    <!-- ENDPOINTS TAB -->
+    <div v-else class="flex-1 overflow-y-auto p-6" data-testid="topology-endpoints">
+      <div
+        v-if="endpoints.length === 0"
+        class="text-sm text-zinc-500 grid place-items-center h-full"
+        data-testid="endpoints-empty"
       >
-        <template #node-default="props">
-          <div class="px-3 py-2 text-left h-full flex flex-col gap-1">
-            <div class="font-mono text-sm text-emerald-300">{{ props.data.label }}</div>
-            <div class="text-[10px] text-zinc-500">
-              {{ props.data.actionsCount }}A · {{ props.data.eventsCount }}E ·
-              {{ props.data.projectionsCount }}P
-            </div>
-            <div v-if="props.data.plugins.length > 0" class="text-[10px] text-zinc-400 mt-1">
-              <div class="uppercase tracking-wider text-zinc-600">Plugins</div>
-              <div
-                v-for="p in props.data.plugins"
-                :key="p"
-                class="font-mono truncate text-zinc-300"
+        No routes exposed — this app has no HTTP surface.
+      </div>
+      <table v-else class="w-full text-sm">
+        <thead>
+          <tr
+            class="text-left text-[10px] uppercase tracking-wider text-zinc-600 border-b border-zinc-800"
+          >
+            <th class="py-2 pr-4 font-medium">Method</th>
+            <th class="py-2 pr-4 font-medium">Path</th>
+            <th class="py-2 pr-4 font-medium">Handler</th>
+            <th class="py-2 font-medium">App</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="ep in endpoints"
+            :key="ep.id"
+            class="border-b border-zinc-900 hover:bg-zinc-900/40"
+            data-testid="endpoint-row"
+          >
+            <td class="py-2 pr-4">
+              <span class="font-mono text-[11px] text-emerald-300">{{ ep.method }}</span>
+            </td>
+            <td class="py-2 pr-4 font-mono text-[12px] text-zinc-200">{{ ep.path }}</td>
+            <td class="py-2 pr-4">
+              <button
+                v-if="ep.handler"
+                type="button"
+                class="font-mono text-[11px] text-violet-300 hover:underline"
+                data-testid="endpoint-handler"
+                @click="
+                  tab = 'wiring';
+                  selectedId = ep.handler!.id;
+                "
               >
-                {{ p }}
-              </div>
-            </div>
-            <div v-if="props.data.sinks.length > 0" class="text-[10px] mt-1">
-              <div class="uppercase tracking-wider text-zinc-600">Sinks</div>
-              <div v-for="s in props.data.sinks" :key="s" class="font-mono truncate text-amber-200">
-                {{ s }}
-              </div>
-            </div>
-          </div>
-        </template>
-        <Background pattern-color="#27272a" />
-        <Controls />
-      </VueFlow>
+                {{ ep.handler.name }}
+              </button>
+              <span v-else class="text-[11px] text-zinc-600">—</span>
+            </td>
+            <td class="py-2 text-[11px] text-zinc-500">{{ ep.app }}</td>
+          </tr>
+        </tbody>
+      </table>
     </div>
+
+    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
   </div>
 </template>