@nwire/studio 0.9.1

package/src/pages/Home.vue

@@ -0,0 +1,485 @@
+<script setup lang="ts">
+/**
+ * Home — the operational dashboard.
+ *
+ * This is the page someone actually opens Studio for: "what just broke?",
+ * "is anything on fire right now?", "what's hot?". It's a thin orchestrator
+ * over three data sources:
+ *
+ *   1. Recent failures   — telemetry stream + /_nwire/telemetry/recent
+ *   2. Live metrics      — derived from events + telemetry over a 60s window
+ *   3. Composition+boot  — manifest (useCache) + lifecycle records
+ *
+ * When the wire isn't running (proxy 502 / SSE error), the live panels mark
+ * themselves "no live data" and the composition panel still renders from the
+ * static manifest.
+ */
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import {
+  Home as HomeIcon,
+  AlertTriangle,
+  Activity,
+  Boxes,
+  Flame,
+  CheckCircle2,
+  WifiOff,
+} from "lucide-vue-next";
+import { useCache } from "@/lib/cache";
+import { PageHeader, EmptyState } from "@/components";
+
+// ── Telemetry record subset we care about ─────────────────────────────
+interface BaseRecord {
+  readonly kind: string;
+  readonly appName?: string;
+  readonly ts: string;
+}
+interface FailureRecord extends BaseRecord {
+  readonly kind: "action.failed" | "dlq.recorded" | "reaction.failed";
+  readonly action?: string;
+  readonly sourceEvent?: string;
+  readonly error?: { message?: string };
+  readonly envelope?: { correlationId?: string };
+}
+interface ActionDispatched extends BaseRecord {
+  readonly kind: "action.dispatched";
+  readonly action: string;
+  readonly envelope?: { correlationId?: string };
+}
+interface ActionFailed extends BaseRecord {
+  readonly kind: "action.failed";
+  readonly action: string;
+  readonly envelope?: { correlationId?: string };
+}
+interface HookStep extends BaseRecord {
+  readonly kind: "hook.step";
+  readonly hookName: string;
+  readonly phase: "start" | "end" | "error";
+}
+interface LifecycleRecord extends BaseRecord {
+  readonly kind: "lifecycle";
+  readonly event: string;
+  readonly payload: { pluginName?: string; durationMs?: number; kind?: "plugin" | "module" };
+}
+
+type TelemetryLike =
+  | FailureRecord
+  | ActionDispatched
+  | ActionFailed
+  | HookStep
+  | LifecycleRecord
+  | BaseRecord;
+
+const router = useRouter();
+const { cache } = useCache();
+
+// ── Live data buffers ─────────────────────────────────────────────────
+const failures = ref<FailureRecord[]>([]);
+const dispatched = ref<ActionDispatched[]>([]);
+const actionFailed = ref<ActionFailed[]>([]);
+const hookSteps = ref<HookStep[]>([]);
+const lifecycle = ref<LifecycleRecord[]>([]);
+
+const telemetryStatus = ref<"connecting" | "open" | "closed" | "error">("connecting");
+const recentLoaded = ref(false);
+const recentFailed = ref(false);
+
+let es: EventSource | null = null;
+
+// Re-render metrics each second so the rolling window slides smoothly.
+const now = ref(Date.now());
+let nowTimer: ReturnType<typeof setInterval> | null = null;
+
+onMounted(() => {
+  connect();
+  void loadRecent();
+  nowTimer = setInterval(() => {
+    now.value = Date.now();
+  }, 1000);
+});
+
+onUnmounted(() => {
+  es?.close();
+  if (nowTimer) clearInterval(nowTimer);
+});
+
+function connect(): void {
+  telemetryStatus.value = "connecting";
+  es?.close();
+  es = new EventSource("/_nwire/telemetry/stream");
+  es.onopen = () => {
+    telemetryStatus.value = "open";
+  };
+  es.onerror = () => {
+    telemetryStatus.value = "error";
+  };
+  es.onmessage = (m) => {
+    try {
+      const rec = JSON.parse(m.data) as TelemetryLike;
+      ingest(rec);
+    } catch {
+      /* ignore non-JSON */
+    }
+  };
+}
+
+async function loadRecent(): Promise<void> {
+  try {
+    const res = await fetch("/_nwire/telemetry/recent?limit=500");
+    if (!res.ok) {
+      recentFailed.value = true;
+      return;
+    }
+    const rows = (await res.json()) as TelemetryLike[];
+    for (const r of rows) ingest(r);
+    recentLoaded.value = true;
+  } catch {
+    recentFailed.value = true;
+  }
+}
+
+function ingest(rec: TelemetryLike): void {
+  switch (rec.kind) {
+    case "action.failed":
+    case "dlq.recorded":
+    case "reaction.failed":
+      failures.value.unshift(rec as FailureRecord);
+      if (failures.value.length > 200) failures.value.length = 200;
+      if (rec.kind === "action.failed") {
+        actionFailed.value.push(rec as ActionFailed);
+        if (actionFailed.value.length > 2000) actionFailed.value.splice(0, 500);
+      }
+      break;
+    case "action.dispatched":
+      dispatched.value.push(rec as ActionDispatched);
+      if (dispatched.value.length > 2000) dispatched.value.splice(0, 500);
+      break;
+    case "hook.step":
+      hookSteps.value.push(rec as HookStep);
+      if (hookSteps.value.length > 2000) hookSteps.value.splice(0, 500);
+      break;
+    case "lifecycle":
+      lifecycle.value.push(rec as LifecycleRecord);
+      if (lifecycle.value.length > 500) lifecycle.value.splice(0, 100);
+      break;
+  }
+}
+
+// ── Section 1: recent failures (last 10) ──────────────────────────────
+const recentFailures = computed(() => failures.value.slice(0, 10));
+
+function failureLabel(f: FailureRecord): string {
+  return f.action ?? f.sourceEvent ?? f.kind;
+}
+function failureError(f: FailureRecord): string {
+  const m = f.error?.message ?? "";
+  return m.length > 80 ? `${m.slice(0, 80)}…` : m;
+}
+function openTrace(f: FailureRecord): void {
+  const id = f.envelope?.correlationId;
+  if (!id) return;
+  void router.push({ path: "/trace", query: { correlationId: id } });
+}
+
+// ── Section 2: live metrics (rolling 60s) ─────────────────────────────
+const WINDOW_MS = 60_000;
+
+function inWindow(rec: { ts: string }): boolean {
+  return now.value - new Date(rec.ts).getTime() <= WINDOW_MS;
+}
+
+const reqPerSec = computed(() => {
+  const n = dispatched.value.filter(inWindow).length;
+  return (n / 60).toFixed(2);
+});
+
+const errorRate = computed(() => {
+  const recentDispatched = dispatched.value.filter(inWindow);
+  if (recentDispatched.length === 0) return "0.0";
+  const failedCorr = new Set(
+    actionFailed.value
+      .filter(inWindow)
+      .map((f) => f.envelope?.correlationId)
+      .filter((x): x is string => !!x),
+  );
+  let bad = 0;
+  for (const d of recentDispatched) {
+    const id = d.envelope?.correlationId;
+    if (id && failedCorr.has(id)) bad++;
+  }
+  return ((bad / recentDispatched.length) * 100).toFixed(1);
+});
+
+const hottestHooks = computed(() => {
+  const counts = new Map<string, number>();
+  for (const s of hookSteps.value) {
+    if (s.phase !== "end") continue;
+    if (!inWindow(s)) continue;
+    counts.set(s.hookName, (counts.get(s.hookName) ?? 0) + 1);
+  }
+  return [...counts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 3)
+    .map(([name, count]) => ({ name, count }));
+});
+
+const hasLiveData = computed(() => telemetryStatus.value === "open" || recentLoaded.value);
+
+// ── Section 3: composition + boot phases ──────────────────────────────
+const pluginsBootedRecords = computed(() =>
+  lifecycle.value.filter((l) => l.event === "nwire.plugin.booted"),
+);
+
+const bootSummary = computed(() => {
+  const recs = pluginsBootedRecords.value;
+  if (recs.length === 0) return null;
+  let plugins = 0;
+  let modules = 0;
+  let totalMs = 0;
+  for (const r of recs) {
+    totalMs += r.payload.durationMs ?? 0;
+    if (r.payload.kind === "module") modules++;
+    else plugins++;
+  }
+  return { total: recs.length, plugins, modules, totalMs };
+});
+
+const compositionStats = computed(() => {
+  if (!cache.value) return null;
+  return {
+    apps: cache.value.apps.length,
+    modules: cache.value.modules.length,
+    plugins: cache.value.plugins.length,
+    actions: cache.value.actions.length,
+    events: cache.value.events.length,
+  };
+});
+
+function openPluginHook(name: string): void {
+  void router.push({ path: "/hooks", query: { name: `plugin.boot:${name}` } });
+}
+
+function shortTime(ts: string): string {
+  return new Date(ts).toLocaleTimeString(undefined, { hour12: false });
+}
+</script>
+
+<template>
+  <div class="p-6 space-y-6" data-testid="home-page">
+    <PageHeader
+      title="Home"
+      :icon="HomeIcon"
+      icon-color="text-emerald-400"
+      :subtitle="
+        hasLiveData
+          ? 'Live system snapshot — failures, throughput, and what got booted'
+          : 'Wire not reporting — showing static composition only'
+      "
+    />
+
+    <!-- Section 1: Recent failures ─────────────────────────────────── -->
+    <section data-testid="home-failures">
+      <div class="flex items-center justify-between mb-2">
+        <h2
+          class="text-sm font-medium text-zinc-300 uppercase tracking-wide flex items-center gap-2"
+        >
+          <AlertTriangle class="w-4 h-4 text-rose-400" />
+          Recent failures
+        </h2>
+        <span class="text-[10px] text-zinc-500 tabular-nums">
+          {{ recentFailures.length }} shown · {{ failures.length }} total
+        </span>
+      </div>
+
+      <div
+        v-if="!hasLiveData && recentFailed"
+        class="rounded border border-zinc-800 bg-zinc-900/40 px-4 py-6 text-sm text-zinc-500 flex items-center gap-2"
+        data-testid="home-failures-no-live"
+      >
+        <WifiOff class="w-4 h-4" /> No live data — the wire isn't reporting.
+      </div>
+      <div
+        v-else-if="recentFailures.length === 0"
+        class="rounded border border-zinc-800 bg-zinc-900/40 px-4 py-6 text-sm text-zinc-400 flex items-center gap-2"
+        data-testid="home-failures-empty"
+      >
+        <CheckCircle2 class="w-4 h-4 text-emerald-400" />
+        No failures in the last 10 minutes
+      </div>
+      <ul v-else class="rounded border border-zinc-800 divide-y divide-zinc-900">
+        <li
+          v-for="(f, i) in recentFailures"
+          :key="`${f.ts}-${i}`"
+          class="px-4 py-2 flex items-center gap-3 hover:bg-zinc-900/40 font-mono text-xs"
+          data-testid="home-failure-row"
+        >
+          <span class="text-zinc-600 tabular-nums w-20 shrink-0">
+            {{ shortTime(f.ts) }}
+          </span>
+          <span
+            class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded shrink-0"
+            :class="{
+              'bg-rose-950/40 text-rose-300': f.kind === 'action.failed',
+              'bg-orange-950/40 text-orange-300': f.kind === 'dlq.recorded',
+              'bg-amber-950/40 text-amber-300': f.kind === 'reaction.failed',
+            }"
+            >{{ f.kind.replace(/\..*$/, "") }}</span
+          >
+          <span class="text-zinc-100 truncate flex-1">{{ failureLabel(f) }}</span>
+          <span class="text-red-400 truncate max-w-[40%]">{{ failureError(f) }}</span>
+          <button
+            v-if="f.envelope?.correlationId"
+            type="button"
+            class="text-xs text-emerald-400 hover:text-emerald-300 shrink-0"
+            @click="openTrace(f)"
+          >
+            → trace
+          </button>
+        </li>
+      </ul>
+    </section>
+
+    <!-- Section 2: Live metrics ────────────────────────────────────── -->
+    <section data-testid="home-metrics">
+      <div class="flex items-center justify-between mb-2">
+        <h2
+          class="text-sm font-medium text-zinc-300 uppercase tracking-wide flex items-center gap-2"
+        >
+          <Activity class="w-4 h-4 text-emerald-400" />
+          Live metrics
+          <span class="text-[10px] text-zinc-500 normal-case tracking-normal">(rolling 60s)</span>
+        </h2>
+        <span
+          class="text-[9px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-zinc-900 text-zinc-400"
+          data-testid="home-metrics-status"
+        >
+          stream {{ telemetryStatus }}
+        </span>
+      </div>
+
+      <div
+        v-if="!hasLiveData"
+        class="rounded border border-zinc-800 bg-zinc-900/40 px-4 py-6 text-sm text-zinc-500 flex items-center gap-2"
+        data-testid="home-metrics-no-live"
+      >
+        <WifiOff class="w-4 h-4" /> No live data — start the wire and metrics will flow here.
+      </div>
+      <div v-else class="grid grid-cols-1 md:grid-cols-3 gap-3">
+        <div
+          class="rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3"
+          data-testid="home-metric-rps"
+        >
+          <div class="text-[11px] uppercase tracking-wide text-zinc-500">req/s</div>
+          <div class="text-2xl font-semibold tabular-nums mt-1">{{ reqPerSec }}</div>
+          <div class="text-[10px] text-zinc-500 mt-1">actions dispatched ÷ 60</div>
+        </div>
+        <div
+          class="rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3"
+          data-testid="home-metric-error-rate"
+        >
+          <div class="text-[11px] uppercase tracking-wide text-zinc-500">error rate</div>
+          <div
+            class="text-2xl font-semibold tabular-nums mt-1"
+            :class="Number(errorRate) > 0 ? 'text-rose-300' : 'text-emerald-300'"
+          >
+            {{ errorRate }}%
+          </div>
+          <div class="text-[10px] text-zinc-500 mt-1">dispatched → failed by correlationId</div>
+        </div>
+        <div
+          class="rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3"
+          data-testid="home-metric-hot-hooks"
+        >
+          <div class="text-[11px] uppercase tracking-wide text-zinc-500 flex items-center gap-1">
+            <Flame class="w-3 h-3 text-amber-400" /> hottest hooks
+          </div>
+          <ul v-if="hottestHooks.length > 0" class="mt-1 space-y-0.5">
+            <li
+              v-for="h in hottestHooks"
+              :key="h.name"
+              class="flex items-center justify-between font-mono text-xs"
+            >
+              <span class="truncate">{{ h.name }}</span>
+              <span class="text-zinc-500 tabular-nums">{{ h.count }}</span>
+            </li>
+          </ul>
+          <div v-else class="text-[11px] text-zinc-500 mt-2">No hook activity in window.</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Section 3: composition + boot ─────────────────────────────── -->
+    <section data-testid="home-composition">
+      <div class="flex items-center justify-between mb-2">
+        <h2
+          class="text-sm font-medium text-zinc-300 uppercase tracking-wide flex items-center gap-2"
+        >
+          <Boxes class="w-4 h-4 text-cyan-400" />
+          Composition
+        </h2>
+      </div>
+
+      <EmptyState
+        v-if="!cache"
+        title="No manifest yet"
+        hint="Run `nwire cache` in your project to populate Studio."
+      />
+      <div v-else class="space-y-3">
+        <div
+          v-if="bootSummary"
+          class="rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3 text-sm"
+          data-testid="home-boot-summary"
+        >
+          Booted <span class="font-semibold">{{ bootSummary.total }}</span> plugins (<span
+            class="tabular-nums"
+            >{{ bootSummary.modules }}</span
+          >
+          modules + <span class="tabular-nums">{{ bootSummary.plugins }}</span> plugins) in
+          <span class="tabular-nums">{{ bootSummary.totalMs.toFixed(0) }}</span> ms
+        </div>
+        <div
+          v-else-if="compositionStats"
+          class="rounded-lg border border-zinc-800 bg-zinc-900/50 px-4 py-3 text-sm text-zinc-400"
+          data-testid="home-boot-static"
+        >
+          <span class="tabular-nums">{{ compositionStats.apps }}</span> app(s),
+          <span class="tabular-nums">{{ compositionStats.modules }}</span> module(s),
+          <span class="tabular-nums">{{ compositionStats.plugins }}</span> plugin(s) ·
+          <span class="tabular-nums">{{ compositionStats.actions }}</span> actions ·
+          <span class="tabular-nums">{{ compositionStats.events }}</span> events
+          <div v-if="!hasLiveData" class="text-[11px] text-zinc-500 mt-1">
+            Boot timings appear once the wire is running.
+          </div>
+        </div>
+
+        <ul
+          v-if="pluginsBootedRecords.length > 0"
+          class="rounded border border-zinc-800 divide-y divide-zinc-900"
+          data-testid="home-boot-list"
+        >
+          <li
+            v-for="(p, i) in pluginsBootedRecords"
+            :key="`${p.payload.pluginName ?? 'plugin'}-${i}`"
+            class="px-4 py-1.5 flex items-center gap-3 font-mono text-xs hover:bg-zinc-900/40"
+          >
+            <span
+              class="text-[10px] uppercase tracking-wide w-14 shrink-0"
+              :class="p.payload.kind === 'module' ? 'text-cyan-400' : 'text-violet-400'"
+              >{{ p.payload.kind ?? "plugin" }}</span
+            >
+            <button
+              type="button"
+              class="flex-1 text-left text-zinc-100 truncate hover:text-emerald-300"
+              @click="openPluginHook(p.payload.pluginName ?? 'unknown')"
+            >
+              {{ p.payload.pluginName ?? "(unnamed)" }}
+            </button>
+            <span class="text-zinc-500 tabular-nums shrink-0">
+              {{ (p.payload.durationMs ?? 0).toFixed(1) }} ms
+            </span>
+          </li>
+        </ul>
+      </div>
+    </section>
+  </div>
+</template>