@nwire/studio 0.12.1 → 0.13.1

package/src/pages/Errors.vue

@@ -0,0 +1,272 @@
+<script setup lang="ts">
+/**
+ * Errors / Debug — the friendly RCA surface.
+ *
+ *   /errors?correlationId=…
+ *
+ * Source picker at the top: Live (stream the current run) or a past run
+ * (static snapshot). Subscribes via `useTelemetry`, groups every failure
+ * into incidents (`groupIncidents`), and reads each one back in plain language:
+ *
+ *   - Left:   a KPI strip (incidents · critical · dead-lettered) over a list of
+ *             friendly ErrorCards, newest first, filterable by severity.
+ *   - Right:  the selected incident's RcaPanel (what happened · timeline ·
+ *             impact · evidence), with a SourceDrawer for the failing unit.
+ */
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { ShieldCheck, Bug, Filter, Clock } from "lucide-vue-next";
+import { useTelemetry, useRunList, type TelemetrySource } from "@/composables/useTelemetry";
+import { useManifest } from "@/composables/useManifest";
+import { groupIncidents, type Incident } from "@/lib/rca";
+import type { Severity } from "@/lib/error-friendly";
+import { ErrorCard, RcaPanel, StatusBadge, EmptyState, KpiTile, SourceDrawer } from "@/components";
+
+const route = useRoute();
+const router = useRouter();
+
+const { records, status, source, connect } = useTelemetry();
+const { runs } = useRunList();
+const { view } = useManifest();
+
+// ── Source picker ─────────────────────────────────────────────────────
+const isLive = computed(() => source.value === "live");
+
+function selectSource(s: TelemetrySource): void {
+  source.value = s;
+}
+
+function isActiveRun(runId: string): boolean {
+  if (isLive.value) return false;
+  const s = source.value;
+  return typeof s === "object" && s !== null && s.id === runId;
+}
+
+function formatRunId(id: string): string {
+  const m = /^(\d{4}-\d{2}-\d{2})T(\d{2}-\d{2}-\d{2})/.exec(id);
+  if (m) return `${m[1]} ${m[2]!.replaceAll("-", ":")}`;
+  return id;
+}
+
+// ── Connection state → StatusBadge ───────────────────────────────────
+const conn = computed(() => {
+  if (!isLive.value) return { status: "idle" as const, label: "history", pulse: false };
+  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 };
+  }
+});
+
+// ── Incidents (newest first) ─────────────────────────────────────────
+const allIncidents = computed(() => groupIncidents(records.value));
+
+const severityFilter = ref<Severity | "all">("all");
+const SEVERITIES: { id: Severity | "all"; label: string }[] = [
+  { id: "all", label: "All" },
+  { id: "critical", label: "Critical" },
+  { id: "high", label: "High" },
+  { id: "warning", label: "Warning" },
+];
+
+const incidents = computed(() =>
+  severityFilter.value === "all"
+    ? allIncidents.value
+    : allIncidents.value.filter((i) => i.severity === severityFilter.value),
+);
+
+const kpis = computed(() => {
+  const all = allIncidents.value;
+  return {
+    total: all.length,
+    critical: all.filter((i) => i.severity === "critical").length,
+    deadLettered: all.filter(
+      (i) => i.root.kind === "dlq.recorded" || i.root.kind === "reaction.exhausted",
+    ).length,
+  };
+});
+
+// ── Selection (deep-linkable by correlationId) ───────────────────────
+const selectedId = ref<string | undefined>(
+  route.query.correlationId ? String(route.query.correlationId) : undefined,
+);
+
+const selected = computed<Incident | undefined>(() => {
+  const list = incidents.value;
+  return list.find((i) => i.id === selectedId.value) ?? list[0];
+});
+
+function select(incident: Incident): void {
+  selectedId.value = incident.id;
+  if (incident.correlationId) {
+    void router.replace({ query: { ...route.query, correlationId: incident.correlationId } });
+  }
+}
+
+// Keep the URL's correlationId in sync if the list re-keys to a new default.
+watch(
+  () => route.query.correlationId,
+  (cid) => {
+    if (cid) selectedId.value = String(cid);
+  },
+);
+
+// ── Source of the failing unit, resolved from the manifest ───────────
+const NODE_KIND: Record<string, string> = { "external call": "externalCall", operation: "handler" };
+
+const selectedSource = computed(() => {
+  const s = selected.value?.friendly.subject;
+  if (!s || !view.value) return undefined;
+  const kind = NODE_KIND[s.kind] ?? s.kind;
+  return view.value.node(`${kind}:${s.name}`)?.source ?? undefined;
+});
+
+const drawerSource = ref<{ file: string; line?: number; column?: number } | null>(null);
+
+const loading = computed(() => status.value === "connecting" && records.value.length === 0);
+</script>
+
+<template>
+  <div class="h-full flex flex-col">
+    <!-- Source picker bar -->
+    <div
+      class="border-b border-zinc-800 px-4 py-2 flex items-center gap-2"
+      data-testid="errors-source-picker"
+    >
+      <button
+        class="h-7 px-2.5 rounded text-xs font-medium border transition-colors"
+        :class="
+          isLive
+            ? 'bg-sky-950/60 border-sky-800 text-sky-300'
+            : 'bg-zinc-900 border-zinc-800 text-zinc-400 hover:text-zinc-200'
+        "
+        data-testid="errors-source-live"
+        @click="selectSource('live')"
+      >
+        Live
+      </button>
+      <template v-if="runs.length > 0">
+        <div class="h-4 w-px bg-zinc-800" />
+        <Clock class="w-3 h-3 text-zinc-600 shrink-0" />
+        <button
+          v-for="run in runs"
+          :key="run.id"
+          class="h-7 px-2.5 rounded text-xs border transition-colors font-mono"
+          :class="
+            isActiveRun(run.id)
+              ? 'bg-zinc-700 border-zinc-600 text-zinc-100'
+              : 'bg-zinc-900 border-zinc-800 text-zinc-500 hover:text-zinc-200'
+          "
+          :data-testid="`errors-source-run-${run.id}`"
+          @click="selectSource(run)"
+        >
+          {{ formatRunId(run.id) }}
+        </button>
+      </template>
+    </div>
+
+    <!-- Main layout: left list + right panel -->
+    <div class="flex-1 flex min-h-0">
+      <!-- ── Left: KPI strip + incident list ──────────────────────────── -->
+      <aside class="w-[26rem] border-r border-zinc-800 flex flex-col shrink-0">
+        <header class="border-b border-zinc-800 px-4 py-3 flex items-center justify-between gap-2">
+          <div class="flex items-center gap-2">
+            <Bug class="w-4 h-4 text-rose-400" />
+            <h1 class="text-sm font-medium">Errors</h1>
+          </div>
+          <StatusBadge :status="conn.status" :label="conn.label" :pulse="conn.pulse" />
+        </header>
+
+        <div class="px-3 py-3 grid grid-cols-3 gap-2 border-b border-zinc-800">
+          <KpiTile label="Incidents" :value="kpis.total" />
+          <KpiTile
+            label="Critical"
+            :value="kpis.critical"
+            :accent="kpis.critical ? '#fb7185' : undefined"
+          />
+          <KpiTile
+            label="Dead-letter"
+            :value="kpis.deadLettered"
+            :accent="kpis.deadLettered ? '#fb7185' : undefined"
+          />
+        </div>
+
+        <div class="px-3 py-2 border-b border-zinc-800 flex items-center gap-1.5">
+          <Filter class="w-3 h-3 text-zinc-600" />
+          <button
+            v-for="s in SEVERITIES"
+            :key="s.id"
+            class="text-[11px] px-2 py-0.5 rounded transition-colors"
+            :class="
+              severityFilter === s.id
+                ? 'bg-zinc-800 text-zinc-100'
+                : 'text-zinc-500 hover:text-zinc-300'
+            "
+            :data-testid="`sev-filter-${s.id}`"
+            @click="severityFilter = s.id"
+          >
+            {{ s.label }}
+          </button>
+        </div>
+
+        <div class="flex-1 overflow-auto p-3 space-y-2">
+          <EmptyState
+            v-if="allIncidents.length === 0"
+            :icon="ShieldCheck"
+            title="All clear"
+            :hint="
+              loading
+                ? 'Connecting to the telemetry stream…'
+                : 'No failures on the stream. Trigger behavior and anything that breaks will show up here — explained, not just logged.'
+            "
+          />
+          <div v-else-if="incidents.length === 0" class="text-xs text-zinc-500 p-4 text-center">
+            No {{ severityFilter }} incidents.
+          </div>
+          <ErrorCard
+            v-for="incident in incidents"
+            :key="incident.id"
+            :record="incident.root"
+            :selected="incident.id === selected?.id"
+            @select="select(incident)"
+          />
+        </div>
+      </aside>
+
+      <!-- ── Right: RCA panel ─────────────────────────────────────────── -->
+      <main class="flex-1 flex flex-col min-w-0">
+        <RcaPanel
+          v-if="selected"
+          :incident="selected"
+          :source="selectedSource"
+          class="flex-1 min-h-0"
+          @open-source="drawerSource = $event"
+        />
+        <EmptyState
+          v-else
+          :icon="ShieldCheck"
+          title="Nothing to debug"
+          hint="When a failure lands, pick it on the left to open its root-cause analysis."
+          class="m-auto"
+        />
+      </main>
+
+      <SourceDrawer :source="drawerSource" @close="drawerSource = null" />
+
+      <!-- reconnect affordance when the stream drops (live mode only) -->
+      <button
+        v-if="isLive && status === 'closed'"
+        class="fixed bottom-4 right-4 text-xs px-3 py-1.5 rounded bg-zinc-800 text-orange-400 hover:bg-zinc-700"
+        @click="connect()"
+      >
+        Reconnect stream
+      </button>
+    </div>
+  </div>
+</template>

package/src/pages/Home.stories.ts

@@ -3,18 +3,17 @@ import { createRouter, createMemoryHistory } from "vue-router";
 import Home from "./Home.vue";
 
 /**
- * Storybook for the Home dashboard. We give it an in-memory router so
- * the "→ trace" / plugin-row links render without exploding, and let the
- * page try to fetch /__nwire/manifest.json + /_nwire/telemetry/* — in
- * Storybook those fail and the component degrades to its "no live data"
- * states, which is exactly what we want to document.
+ * Storybook for the Home discovery dashboard. The `/__nwire/*` fetches fail
+ * inside Storybook, so the discovered-projects grid degrades to its empty
+ * state — exactly the surface we want to document.
  */
 const router = createRouter({
   history: createMemoryHistory(),
   routes: [
     { path: "/", name: "home", component: Home },
     { path: "/trace", name: "trace", component: { template: "<div/>" } },
-    { path: "/hooks", name: "hooks", component: { template: "<div/>" } },
+    { path: "/streams", name: "streams", component: { template: "<div/>" } },
+    { path: "/projects/:slug/:page", name: "page", component: { template: "<div/>" } },
   ],
 });
 
@@ -43,5 +42,5 @@ export default meta;
 
 type Story = StoryObj<typeof Home>;
 
-/** Default: the wire isn't running — all three sections degrade gracefully. */
-export const NoLiveData: Story = {};
+/** Default: nothing reachable — the grid degrades to its empty state. */
+export const NoProjects: Story = {};