@nwire/studio 0.12.1 → 0.13.1

package/src/pages/Trace.vue

@@ -1,303 +1,138 @@
 <script setup lang="ts">
 /**
- * Trace — visualize one correlationId's full causal tree.
+ * Flow / Trace — the live causation waterfall.
  *
  *   /trace?correlationId=…
  *
- * Pulls events from the running wire's `/_nwire/events/{recent,stream}`
- * SSE surface, groups them by `correlationId`, and renders the causation
- * forest as a vertical tree (each `causationId` is an edge from parent
- * `messageId` → child).
+ * Subscribes to the telemetry stream (`useTelemetry`), groups records by
+ * correlation, and renders the selected chain as a time-positioned waterfall
+ * (tree depth + critical path + kind colours). The right rail is a flat,
+ * copyable metadata inspector for the selected span. A replay control scrubs
+ * the chain so you can watch a trace unfold span by span.
  *
- *   - Left:   trace picker — recent correlation ids, with the count of
- *             events under each. Click → loads.
- *   - Middle: the causation tree. Each node is an event card with name,
- *             timestamp, payload (collapsed), source location pill.
- *   - Right:  context explorer — modules touched, apps participating,
- *             unique events fired, total span, error count. The "who
- *             touched this trace?" answer.
+ *   - Left:   trace picker — recent correlations, newest first, with span +
+ *             failure counts. Connection state lives in the header.
+ *   - Middle: the waterfall + replay (play / pause / restart / scrub).
+ *   - Right:  metadata inspector for the selected span.
  */
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, ref, watch, onUnmounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import {
-  Activity,
-  Boxes,
-  Clock,
-  Globe,
-  Network,
-  RefreshCw,
-  Search,
-  Workflow,
-  Zap,
-} from "lucide-vue-next";
-import { useCache } from "@/lib/cache";
-import { SourceDrawer } from "@/components";
-import TraceNode from "./TraceNode.vue";
-
-interface BufferedEvent {
-  seq: number;
-  eventName?: string;
-  payload: unknown;
-  envelope: {
-    messageId: string;
-    correlationId: string;
-    causationId: string;
-    tenant?: string;
-    userId?: string;
-    timestamp: string;
-    version: number;
-  };
-  source: "in-process" | "external";
-  appName: string;
-  capturedAt: string;
-}
+import { Activity, Play, Pause, RotateCcw, Workflow } from "lucide-vue-next";
+import { useTelemetry } from "@/composables/useTelemetry";
+import { buildCorrelationTree, isFailure, type TelemetryRecord } from "@/lib/telemetry";
+import { buildWaterfall, type WaterfallRow } from "@/lib/waterfall";
+import { StatusBadge, Waterfall, MetadataInspector, EmptyState } from "@/components";
 
 const route = useRoute();
 const router = useRouter();
-const { cache } = useCache();
-
-const events = ref<BufferedEvent[]>([]);
-const status = ref<"connecting" | "open" | "closed" | "error">("connecting");
-const expanded = ref<Record<string, boolean>>({});
-const filter = ref("");
-const sourcePreview = ref<{ file: string; line: number; column?: number } | null>(null);
 
-let es: EventSource | null = null;
-
-const selectedCorrelation = computed<string | undefined>({
-  get: () => (route.query.correlationId as string | undefined) ?? recentCorrelations.value[0],
-  set: (id) => {
-    // Preserve the action filter when the user picks a trace.
-    const q: Record<string, string> = {};
-    if (id) q.correlationId = id;
-    if (typeof route.query.action === "string" && route.query.action) {
-      q.action = route.query.action;
-    }
-    router.replace({ path: "/trace", query: q });
-  },
-});
-
-/**
- * `?action=<name>` seeds the search filter on first paint so the operator
- * lands on traces whose events were emitted by (or named after) the action.
- * It is a non-destructive seed — the user can clear it. The existing
- * `?correlationId` deep-link path is untouched and still wins selection.
- */
-function applyActionFilter(): void {
-  const action = route.query.action;
-  if (typeof action === "string" && action.length > 0) {
-    filter.value = action;
+const { records, status, byCorrelation, connect } = useTelemetry();
+
+// ── Connection state → StatusBadge ───────────────────────────────────
+const conn = computed(() => {
+  switch (status.value) {
+    case "open":
+      return { status: "live" as const, label: "live", pulse: true };
+    case "connecting":
+    case "reconnecting":
+      return { status: "warn" as const, label: status.value, pulse: false };
+    case "closed":
+      return { status: "error" as const, label: "closed", pulse: false };
+    default:
+      return { status: "idle" as const, label: "idle", pulse: false };
   }
-}
-
-onMounted(() => {
-  applyActionFilter();
-  void start();
 });
-watch(() => route.query.action, applyActionFilter);
-onUnmounted(() => es?.close());
 
-async function start() {
-  await loadRecent();
-  connectStream();
+// ── Correlations, newest first ───────────────────────────────────────
+interface TraceSummary {
+  readonly id: string;
+  readonly count: number;
+  readonly failures: number;
+  readonly lastIndex: number;
 }
 
-async function loadRecent() {
-  try {
-    const r = await fetch("/_nwire/events/recent?limit=500");
-    if (!r.ok) return;
-    const json = (await r.json()) as BufferedEvent[];
-    events.value = json.slice().reverse(); // oldest first
-  } catch {
-    // Wire not reachable yet — connectStream() will retry.
+const traces = computed<TraceSummary[]>(() => {
+  const lastIndex = new Map<string, number>();
+  records.value.forEach((r, i) => {
+    const cid = r.envelope?.correlationId;
+    if (cid) lastIndex.set(cid, i);
+  });
+  const out: TraceSummary[] = [];
+  for (const [id, recs] of byCorrelation.value) {
+    if (!id) continue; // skip the envelope-less bucket
+    out.push({
+      id,
+      count: recs.length,
+      failures: recs.filter(isFailure).length,
+      lastIndex: lastIndex.get(id) ?? -1,
+    });
   }
-}
-
-function connectStream() {
-  status.value = "connecting";
-  es?.close();
-  es = new EventSource("/_nwire/events/stream");
-  es.onopen = () => {
-    status.value = "open";
-  };
-  es.onerror = () => {
-    status.value = "error";
-  };
-  es.onmessage = (m) => {
-    try {
-      const evt = JSON.parse(m.data) as BufferedEvent;
-      events.value.push(evt);
-      if (events.value.length > 2000) events.value.splice(0, 500);
-    } catch {
-      /* ignore */
-    }
-  };
-}
-
-function reconnect() {
-  connectStream();
-}
-function refresh() {
-  void loadRecent();
-}
+  return out.sort((a, b) => b.lastIndex - a.lastIndex);
+});
 
-// ── Recent correlation ids (newest first), bucketed by activity ──────
-const recentCorrelations = computed<readonly string[]>(() => {
-  const seen = new Map<string, number>(); // id → last seq
-  for (const e of events.value) {
-    seen.set(e.envelope.correlationId, e.seq);
-  }
-  return Array.from(seen.entries())
-    .sort((a, b) => b[1] - a[1])
-    .map(([id]) => id);
+const selectedCorrelation = computed<string | undefined>({
+  get: () => (route.query.correlationId as string | undefined) ?? traces.value[0]?.id,
+  set: (id) => router.replace({ path: "/trace", query: id ? { correlationId: id } : {} }),
 });
 
-const filteredCorrelations = computed<readonly string[]>(() => {
-  const q = filter.value.toLowerCase();
-  if (!q) return recentCorrelations.value;
-  return recentCorrelations.value.filter((id) => {
-    if (id.toLowerCase().includes(q)) return true;
-    // Filter on event names + tenant within the trace too.
-    const traceEvents = events.value.filter((e) => e.envelope.correlationId === id);
-    return traceEvents.some(
-      (e) =>
-        e.eventName?.toLowerCase().includes(q) ||
-        e.envelope.tenant?.toLowerCase().includes(q) ||
-        e.envelope.userId?.toLowerCase().includes(q),
-    );
-  });
+const forest = computed(() => {
+  const id = selectedCorrelation.value;
+  if (!id) return [];
+  return buildCorrelationTree(byCorrelation.value.get(id) ?? []);
 });
 
-function correlationLabel(id: string): string {
+function shortId(id: string): string {
   return id.split("-")[0] ?? id.slice(0, 8);
 }
-function correlationCount(id: string): number {
-  let n = 0;
-  for (const e of events.value) if (e.envelope.correlationId === id) n++;
-  return n;
-}
-
-// ── The causal tree for the selected correlation ─────────────────────
-interface TraceNode {
-  evt: BufferedEvent;
-  children: TraceNode[];
-}
 
-const selectedTraceEvents = computed<readonly BufferedEvent[]>(() => {
-  if (!selectedCorrelation.value) return [];
-  return events.value
-    .filter((e) => e.envelope.correlationId === selectedCorrelation.value)
-    .sort((a, b) => a.seq - b.seq);
-});
-
-const causalForest = computed<TraceNode[]>(() => {
-  const evts = selectedTraceEvents.value;
-  if (evts.length === 0) return [];
-  const byMsg = new Map<string, TraceNode>();
-  for (const evt of evts) byMsg.set(evt.envelope.messageId, { evt, children: [] });
-
-  const roots: TraceNode[] = [];
-  for (const node of byMsg.values()) {
-    const cid = node.evt.envelope.causationId;
-    if (!cid || cid === node.evt.envelope.messageId) {
-      roots.push(node);
-      continue;
-    }
-    const parent = byMsg.get(cid);
-    if (parent) parent.children.push(node);
-    else roots.push(node);
-  }
-  return roots;
+// ── Selected span → inspector ────────────────────────────────────────
+const selectedKey = ref<string | undefined>(undefined);
+const rows = computed(() => buildWaterfall(forest.value).rows);
+const selectedRecord = computed<TelemetryRecord | undefined>(() => {
+  const rs = rows.value;
+  return (rs.find((r) => r.key === selectedKey.value) ?? rs[0])?.record;
 });
-
-// ── Index by name for cross-linking to /actions, /events, etc. ───────
-const eventIndex = computed(() => {
-  const m = new Map<
-    string,
-    { app: string; source?: { file: string; line: number; column?: number } }
-  >();
-  if (cache.value) {
-    for (const e of cache.value.events) {
-      m.set(e.name, { app: e.app, source: e.source });
-    }
-  }
-  return m;
-});
-
-// ── Context explorer ─────────────────────────────────────────────────
-interface ContextDigest {
-  apps: Set<string>;
-  uniqueEvents: Set<string>;
-  startedAt: string;
-  endedAt: string;
-  spanMs: number;
-  total: number;
-  inProcess: number;
-  external: number;
-  tenants: Set<string>;
-  users: Set<string>;
+function onSelect(row: WaterfallRow): void {
+  selectedKey.value = row.key;
 }
 
-const context = computed<ContextDigest | undefined>(() => {
-  const evts = selectedTraceEvents.value;
-  if (evts.length === 0) return undefined;
-  const apps = new Set<string>();
-  const unique = new Set<string>();
-  const tenants = new Set<string>();
-  const users = new Set<string>();
-  let inProc = 0;
-  let external = 0;
+// ── Replay scrub ─────────────────────────────────────────────────────
+const reveal = ref<number | undefined>(undefined); // undefined = show all
+let timer: ReturnType<typeof setInterval> | null = null;
+const playing = ref(false);
 
-  for (const e of evts) {
-    apps.add(e.appName);
-    if (e.eventName) {
-      unique.add(e.eventName);
-    }
-    if (e.envelope.tenant) tenants.add(e.envelope.tenant);
-    if (e.envelope.userId) users.add(e.envelope.userId);
-    if (e.source === "external") external++;
-    else inProc++;
-  }
-
-  const startedAt = evts[0]!.capturedAt;
-  const endedAt = evts[evts.length - 1]!.capturedAt;
-  const spanMs = new Date(endedAt).getTime() - new Date(startedAt).getTime();
-
-  return {
-    apps,
-    uniqueEvents: unique,
-    startedAt,
-    endedAt,
-    spanMs,
-    total: evts.length,
-    inProcess: inProc,
-    external,
-    tenants,
-    users,
-  };
-});
-
-function isExpanded(id: string): boolean {
-  return expanded.value[id] !== false; // default expanded
-}
-function toggle(id: string): void {
-  expanded.value[id] = !isExpanded(id);
+function stop(): void {
+  if (timer) clearInterval(timer);
+  timer = null;
+  playing.value = false;
 }
-function formatTime(iso: string): string {
-  return new Date(iso).toLocaleTimeString(undefined, { hour12: false });
+function play(): void {
+  stop();
+  const total = rows.value.length;
+  if (total === 0) return;
+  reveal.value = reveal.value && reveal.value < total ? reveal.value : 0;
+  playing.value = true;
+  timer = setInterval(() => {
+    reveal.value = (reveal.value ?? 0) + 1;
+    if ((reveal.value ?? 0) >= total) {
+      reveal.value = undefined; // settle to "all"
+      stop();
+    }
+  }, 350);
 }
-function payloadPreview(p: unknown): string {
-  if (p === undefined || p === null) return "—";
-  const s = JSON.stringify(p);
-  return s.length > 80 ? s.slice(0, 80) + "…" : s;
+function restart(): void {
+  stop();
+  reveal.value = undefined;
 }
 
-watch(
-  () => selectedCorrelation.value,
-  () => {
-    expanded.value = {};
-  },
-);
+// Reset selection + replay when the trace changes.
+watch(selectedCorrelation, () => {
+  selectedKey.value = undefined;
+  restart();
+});
+onUnmounted(stop);
+
+const loading = computed(() => status.value === "connecting" && records.value.length === 0);
 </script>
 
 <template>
@@ -308,185 +143,112 @@ watch(
         <div class="flex items-center gap-2 min-w-0">
           <Workflow class="w-4 h-4 text-orange-400" />
           <h1 class="text-sm font-medium truncate">Traces</h1>
-          <span
-            class="text-[9px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-zinc-900 text-zinc-400"
-          >
-            {{ status }}
-          </span>
         </div>
-        <button
-          class="p-1 rounded hover:bg-zinc-800 text-zinc-400"
-          title="Refresh"
-          @click="refresh"
-        >
-          <RefreshCw class="w-3.5 h-3.5" />
-        </button>
+        <StatusBadge :status="conn.status" :label="conn.label" :pulse="conn.pulse" />
       </header>
 
-      <div class="px-3 py-2 border-b border-zinc-800">
-        <div class="relative">
-          <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 text-xs placeholder:text-zinc-600 focus:outline-none focus:border-zinc-600"
-          />
-        </div>
-        <div class="text-[10px] text-zinc-500 mt-1">
-          {{ filteredCorrelations.length }} traces · {{ events.length }} events
-        </div>
+      <div class="px-3 py-2 border-b border-zinc-800 text-[10px] text-zinc-500">
+        {{ traces.length }} traces · {{ records.length }} records
       </div>
 
       <div class="flex-1 overflow-auto">
-        <div v-if="filteredCorrelations.length === 0" class="p-4 text-xs text-zinc-500">
-          {{ events.length === 0 ? "Waiting for events…" : "No traces match the filter." }}
+        <div v-if="traces.length === 0" class="p-4 text-xs text-zinc-500">
+          {{ loading ? "Connecting…" : "Waiting for behavior…" }}
           <button
-            v-if="status === 'error' || status === 'closed'"
+            v-if="status === 'closed'"
             class="block mt-2 text-orange-400 hover:underline"
-            @click="reconnect"
+            @click="connect()"
           >
             Reconnect
           </button>
         </div>
         <button
-          v-for="id in filteredCorrelations"
-          :key="id"
+          v-for="t in traces"
+          :key="t.id"
           class="w-full text-left px-3 py-2 border-b border-zinc-900 hover:bg-zinc-900/50 transition-colors"
-          :class="{ 'bg-zinc-900/70': id === selectedCorrelation }"
-          @click="selectedCorrelation = id"
+          :class="{ 'bg-zinc-900/70': t.id === selectedCorrelation }"
+          data-testid="trace-row"
+          @click="selectedCorrelation = t.id"
         >
           <div class="flex items-center justify-between gap-2">
-            <span class="font-mono text-xs text-zinc-200 truncate">
-              {{ correlationLabel(id) }}
-            </span>
-            <span class="text-[10px] text-zinc-500 tabular-nums shrink-0">
-              {{ correlationCount(id) }} ev
+            <span class="font-mono text-xs text-zinc-200 truncate">{{ shortId(t.id) }}</span>
+            <span class="flex items-center gap-2 shrink-0">
+              <span
+                v-if="t.failures"
+                class="text-[10px] text-rose-400 tabular-nums"
+                data-testid="trace-failures"
+                >{{ t.failures }} ✕</span
+              >
+              <span class="text-[10px] text-zinc-500 tabular-nums">{{ t.count }}</span>
             </span>
           </div>
         </button>
       </div>
     </aside>
 
-    <!-- ── Middle: causal tree ──────────────────────────────────────── -->
+    <!-- ── Middle: waterfall + replay ───────────────────────────────── -->
     <main class="flex-1 flex flex-col min-w-0">
       <header class="border-b border-zinc-800 px-4 py-3 flex items-center gap-3">
         <Activity class="w-4 h-4 text-emerald-400" />
-        <h2 class="text-sm font-medium">Causal trace</h2>
+        <h2 class="text-sm font-medium">Causal waterfall</h2>
         <span v-if="selectedCorrelation" class="text-xs font-mono text-zinc-500">
-          corr {{ correlationLabel(selectedCorrelation) }}
+          corr {{ shortId(selectedCorrelation) }}
         </span>
-        <span v-else class="text-xs text-zinc-500">No trace selected.</span>
+        <div v-if="forest.length" class="ml-auto flex items-center gap-1.5">
+          <button
+            class="p-1 rounded hover:bg-zinc-800 text-zinc-400"
+            :title="playing ? 'Pause' : 'Play trace'"
+            data-testid="replay-toggle"
+            @click="playing ? stop() : play()"
+          >
+            <component :is="playing ? Pause : Play" class="w-3.5 h-3.5" />
+          </button>
+          <button
+            class="p-1 rounded hover:bg-zinc-800 text-zinc-400"
+            title="Restart"
+            data-testid="replay-restart"
+            @click="restart"
+          >
+            <RotateCcw class="w-3.5 h-3.5" />
+          </button>
+          <input
+            type="range"
+            min="0"
+            :max="rows.length"
+            :value="reveal ?? rows.length"
+            class="w-28 accent-orange-400"
+            data-testid="replay-scrub"
+            @input="reveal = Number(($event.target as HTMLInputElement).value)"
+          />
+        </div>
       </header>
 
-      <div class="flex-1 overflow-auto p-4">
-        <div
-          v-if="!selectedCorrelation || causalForest.length === 0"
-          class="text-xs text-zinc-500 italic"
-        >
-          Pick a trace from the left to see its causation tree.
-        </div>
-        <ul v-else class="space-y-3">
-          <li v-for="root in causalForest" :key="root.evt.envelope.messageId">
-            <TraceNode
-              :node="root"
-              :depth="0"
-              :event-index="eventIndex"
-              :is-expanded="isExpanded"
-              :toggle="toggle"
-              :format-time="formatTime"
-              :payload-preview="payloadPreview"
-              @open-source="(s) => (sourcePreview = s)"
-            />
-          </li>
-        </ul>
+      <div class="flex-1 overflow-auto">
+        <EmptyState
+          v-if="!selectedCorrelation || forest.length === 0"
+          :icon="Activity"
+          title="No trace selected"
+          hint="Pick a trace on the left to see its causation waterfall, or trigger behavior to populate the stream."
+        />
+        <Waterfall
+          v-else
+          :forest="forest"
+          :selected-key="selectedRecord ? (selectedKey ?? rows[0]?.key) : undefined"
+          :reveal="reveal"
+          @select="onSelect"
+        />
       </div>
     </main>
 
-    <!-- ── Right: context explorer ──────────────────────────────────── -->
+    <!-- ── Right: metadata inspector ────────────────────────────────── -->
     <aside class="w-80 border-l border-zinc-800 flex flex-col shrink-0">
-      <header class="border-b border-zinc-800 px-4 py-3 flex items-center gap-2">
-        <Boxes class="w-4 h-4 text-violet-400" />
-        <h2 class="text-sm font-medium">Context</h2>
-      </header>
-      <div v-if="!context" class="p-4 text-xs text-zinc-500 italic">
-        Context appears once a trace is selected.
-      </div>
-      <div v-else class="overflow-auto divide-y divide-zinc-800">
-        <section class="px-4 py-3">
-          <h3 class="text-[10px] uppercase tracking-wide text-zinc-500 mb-2">Span</h3>
-          <div class="flex items-center gap-2 text-xs">
-            <Clock class="w-3.5 h-3.5 text-zinc-500" />
-            <span class="font-mono">{{ context.spanMs }} ms</span>
-            <span class="text-zinc-600">·</span>
-            <span class="font-mono text-zinc-400">{{ context.total }} events</span>
-          </div>
-          <div class="text-[10px] text-zinc-500 font-mono mt-1">
-            {{ formatTime(context.startedAt) }} → {{ formatTime(context.endedAt) }}
-          </div>
-        </section>
-
-        <section class="px-4 py-3">
-          <h3 class="text-[10px] uppercase tracking-wide text-zinc-500 mb-2">Apps</h3>
-          <div class="flex flex-wrap gap-1">
-            <span
-              v-for="a in [...context.apps]"
-              :key="a"
-              class="inline-flex items-center gap-1 text-xs font-mono bg-zinc-900 border border-zinc-800 rounded px-1.5 py-0.5"
-            >
-              <Globe class="w-3 h-3 text-emerald-400" />
-              {{ a }}
-            </span>
-          </div>
-        </section>
-
-        <section v-if="context.uniqueEvents.size" class="px-4 py-3">
-          <h3 class="text-[10px] uppercase tracking-wide text-zinc-500 mb-2">Distinct events</h3>
-          <ul class="space-y-1">
-            <li
-              v-for="ev in [...context.uniqueEvents]"
-              :key="ev"
-              class="flex items-center gap-2 text-xs font-mono"
-            >
-              <Zap class="w-3 h-3 text-amber-400" />
-              {{ ev }}
-            </li>
-          </ul>
-        </section>
-
-        <section v-if="context.external > 0" class="px-4 py-3">
-          <h3 class="text-[10px] uppercase tracking-wide text-zinc-500 mb-2">Origin</h3>
-          <div class="text-xs space-y-0.5">
-            <div class="flex items-center gap-2">
-              <Globe class="w-3 h-3 text-emerald-400" />
-              <span class="text-zinc-400">in-process</span>
-              <span class="ml-auto font-mono">{{ context.inProcess }}</span>
-            </div>
-            <div class="flex items-center gap-2">
-              <Network class="w-3 h-3 text-violet-400" />
-              <span class="text-zinc-400">external (bus)</span>
-              <span class="ml-auto font-mono">{{ context.external }}</span>
-            </div>
-          </div>
-        </section>
-
-        <section v-if="context.tenants.size || context.users.size" class="px-4 py-3">
-          <h3 class="text-[10px] uppercase tracking-wide text-zinc-500 mb-2">Actor / scope</h3>
-          <div v-if="context.tenants.size" class="text-xs space-y-0.5">
-            <div class="text-zinc-500">Tenants</div>
-            <div v-for="t in [...context.tenants]" :key="t" class="font-mono">
-              {{ t }}
-            </div>
-          </div>
-          <div v-if="context.users.size" class="text-xs space-y-0.5 mt-2">
-            <div class="text-zinc-500">Users</div>
-            <div v-for="u in [...context.users]" :key="u" class="font-mono truncate">
-              {{ u }}
-            </div>
-          </div>
-        </section>
-      </div>
+      <MetadataInspector
+        v-if="selectedRecord"
+        :data="selectedRecord"
+        :label="`Span · ${selectedRecord.kind}`"
+        class="h-full"
+      />
+      <div v-else class="p-4 text-xs text-zinc-500 italic">Select a span to inspect it.</div>
     </aside>
-
-    <SourceDrawer :source="sourcePreview" @close="sourcePreview = null" />
   </div>
 </template>