@nwire/studio 0.12.1 → 0.13.0

package/src/components/WaterfallRow.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+/**
+ * `WaterfallRow` — one row of the trace waterfall: a depth-indented gutter
+ * (kind dot + label + kind), and a time-lane bar positioned by `offsetPct` /
+ * `widthPct`. Critical-path rows get a brighter bar; failures go red; the
+ * selected row is highlighted. Purely presentational — `Waterfall` owns layout.
+ */
+import { computed } from "vue";
+import { kindColor, recordColorKey } from "@/lib/kind-colors";
+import type { WaterfallRow } from "@/lib/waterfall";
+
+const props = withDefaults(
+  defineProps<{
+    row: WaterfallRow;
+    selected?: boolean;
+    /** Rows beyond the replay cursor render dimmed. */
+    dimmed?: boolean;
+  }>(),
+  { selected: false, dimmed: false },
+);
+
+const emit = defineEmits<{ (e: "select", row: WaterfallRow): void }>();
+
+const color = computed(() => kindColor(recordColorKey(props.row.record.kind)));
+</script>
+
+<template>
+  <button
+    class="group flex w-full items-center gap-2 px-2 py-1 text-left transition-colors"
+    :class="[selected ? 'bg-zinc-800/80' : 'hover:bg-zinc-900/60', dimmed ? 'opacity-30' : '']"
+    data-testid="waterfall-row"
+    :data-critical="row.critical ? 'true' : undefined"
+    :data-failed="row.failed ? 'true' : undefined"
+    @click="emit('select', row)"
+  >
+    <!-- Gutter: indent + dot + label -->
+    <div
+      class="flex items-center gap-1.5 w-1/2 min-w-0"
+      :style="{ paddingLeft: row.depth * 14 + 'px' }"
+    >
+      <span class="h-2 w-2 rounded-full shrink-0" :style="{ backgroundColor: color }" />
+      <span
+        class="font-mono text-xs truncate"
+        :class="row.failed ? 'text-rose-300' : 'text-zinc-200'"
+        data-testid="waterfall-label"
+      >
+        {{ row.label }}
+      </span>
+      <span class="text-[10px] text-zinc-600 truncate shrink-0">{{ row.record.kind }}</span>
+    </div>
+
+    <!-- Time lane -->
+    <div class="relative h-3 flex-1">
+      <span
+        class="absolute top-1/2 -translate-y-1/2 h-1.5 rounded-full"
+        :class="[
+          row.failed ? 'bg-rose-500/80' : '',
+          row.critical && !row.failed ? 'ring-1 ring-white/40' : '',
+        ]"
+        :style="{
+          left: row.offsetPct + '%',
+          width: row.widthPct + '%',
+          backgroundColor: row.failed ? undefined : color,
+          opacity: row.critical || row.failed ? 1 : 0.55,
+        }"
+        data-testid="waterfall-bar"
+      />
+    </div>
+
+    <span class="text-[10px] tabular-nums text-zinc-500 w-14 text-right shrink-0">
+      {{ row.durationMs.toFixed(1) }}ms
+    </span>
+  </button>
+</template>

package/src/components/__tests__/BcCard.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import BcCard from "../BcCard.vue";
+import type { BcNode } from "@/lib/bc-graph";
+
+const bc: BcNode = {
+  name: "orders",
+  rows: [
+    { id: "action:orders.place", kind: "action", name: "orders.place", public: true },
+    { id: "event:orders.placed", kind: "event", name: "orders.placed" },
+    { id: "query:orders.list", kind: "query", name: "orders.list" },
+  ],
+};
+
+describe("BcCard", () => {
+  it("shows the app name and member count", () => {
+    const w = mount(BcCard, { props: { bc } });
+    expect(w.get('[data-testid="bc-card-name"]').text()).toBe("orders");
+    expect(w.text()).toContain("3");
+  });
+
+  it("renders per-kind count chips", () => {
+    const w = mount(BcCard, { props: { bc } });
+    expect(w.text()).toContain("1 action");
+    expect(w.text()).toContain("1 event");
+    expect(w.text()).toContain("1 query");
+  });
+
+  it("strips the app prefix from row names", () => {
+    const w = mount(BcCard, { props: { bc } });
+    const row = w.get('[data-testid="bc-row-action:orders.place"]');
+    expect(row.text()).toContain("place");
+    expect(row.text()).not.toContain("orders.place");
+  });
+
+  it("marks public rows and emits select with the row on click", async () => {
+    const w = mount(BcCard, { props: { bc } });
+    const row = w.get('[data-testid="bc-row-action:orders.place"]');
+    expect(row.find('[data-testid="bc-row-public"]').exists()).toBe(true);
+    await row.trigger("click");
+    expect(w.emitted("select")?.[0]?.[0]).toMatchObject({ id: "action:orders.place" });
+  });
+
+  it("highlights the selected row", () => {
+    const w = mount(BcCard, { props: { bc, selectedId: "event:orders.placed" } });
+    expect(w.get('[data-testid="bc-row-event:orders.placed"]').classes()).toContain("bg-zinc-900");
+  });
+
+  it("shows an empty hint when the BC has no primitives", () => {
+    const w = mount(BcCard, { props: { bc: { name: "empty", rows: [] } } });
+    expect(w.text()).toContain("No primitives yet");
+  });
+});

package/src/components/__tests__/DurationBar.test.ts

@@ -0,0 +1,31 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import DurationBar from "../DurationBar.vue";
+
+describe("DurationBar", () => {
+  it("renders the duration label with one decimal", () => {
+    const w = mount(DurationBar, { props: { ms: 12.34 } });
+    expect(w.get('[data-testid="duration-value"]').text()).toBe("12.3ms");
+  });
+
+  it("is green under the warn threshold", () => {
+    const w = mount(DurationBar, { props: { ms: 10, warnMs: 50, dangerMs: 100 } });
+    expect(w.get('[data-testid="duration-bar"]').attributes("data-tone")).toBe("ok");
+  });
+
+  it("turns amber at the warn threshold", () => {
+    const w = mount(DurationBar, { props: { ms: 60, warnMs: 50, dangerMs: 100 } });
+    expect(w.get('[data-testid="duration-bar"]').attributes("data-tone")).toBe("warn");
+  });
+
+  it("turns red at the danger threshold", () => {
+    const w = mount(DurationBar, { props: { ms: 120, warnMs: 50, dangerMs: 100 } });
+    expect(w.get('[data-testid="duration-bar"]').attributes("data-tone")).toBe("danger");
+  });
+
+  it("scales the bar width against max", () => {
+    const w = mount(DurationBar, { props: { ms: 25, max: 100 } });
+    const bar = w.get('[data-testid="duration-bar"] > div > div');
+    expect(bar.attributes("style")).toContain("width: 25%");
+  });
+});

package/src/components/__tests__/ErrorCard.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import ErrorCard from "../ErrorCard.vue";
+import type { TelemetryRecord } from "@/lib/telemetry";
+
+const stubs = { RouterLink: { template: "<a data-stub-link><slot /></a>" } };
+
+const mountCard = (record: TelemetryRecord, props: Record<string, unknown> = {}) =>
+  mount(ErrorCard, { props: { record, ...props }, global: { stubs } });
+
+describe("ErrorCard", () => {
+  it("renders the friendly title + summary and tags the severity", () => {
+    const w = mountCard({
+      kind: "dlq.recorded",
+      action: "orders.ship",
+      attempts: 5,
+      error: { name: "TypeError", message: "boom" },
+      ts: "2026-01-01T00:00:00.000Z",
+      envelope: { messageId: "m", causationId: "m", correlationId: "c-123" },
+    });
+    expect(w.get('[data-testid="error-title"]').text()).toBe("Dead-lettered");
+    expect(w.get('[data-testid="error-summary"]').text()).toContain("orders.ship");
+    expect(w.get('[data-testid="error-card"]').attributes("data-severity")).toBe("critical");
+    expect(w.get('[data-testid="error-severity"]').text()).toBe("Critical");
+  });
+
+  it("shows the retry narrative when the record carries attempts", () => {
+    const w = mountCard({
+      kind: "action.failed",
+      action: "orders.charge",
+      attempt: 2,
+      maxAttempts: 3,
+      willRetry: true,
+      error: { name: "E", message: "x" },
+    });
+    expect(w.get('[data-testid="error-retry"]').text()).toContain("attempt 2 of 3");
+  });
+
+  it("renders a correlation chip linking to the trace", () => {
+    const w = mountCard({
+      kind: "action.failed",
+      action: "a",
+      error: { name: "E", message: "x" },
+      envelope: { messageId: "m", causationId: "m", correlationId: "c-abcdef-1" },
+    });
+    expect(w.get('[data-testid="error-correlation"]').text()).toContain("c");
+  });
+
+  it("emits select on click and reflects the selected state", async () => {
+    const w = mountCard(
+      { kind: "action.failed", action: "a", error: { name: "E", message: "x" } },
+      { selected: true },
+    );
+    await w.get('[data-testid="error-card"]').trigger("click");
+    expect(w.emitted("select")).toBeTruthy();
+    expect(w.get('[data-testid="error-card"]').classes()).toContain("border-zinc-600");
+  });
+
+  it("hides the correlation chip when asked", () => {
+    const w = mountCard(
+      {
+        kind: "action.failed",
+        action: "a",
+        error: { name: "E", message: "x" },
+        envelope: { messageId: "m", causationId: "m", correlationId: "c-1" },
+      },
+      { showCorrelation: false },
+    );
+    expect(w.find('[data-testid="error-correlation"]').exists()).toBe(false);
+  });
+});

package/src/components/__tests__/KpiTile.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import KpiTile from "../KpiTile.vue";
+
+describe("KpiTile", () => {
+  it("renders label, value and sub", () => {
+    const w = mount(KpiTile, { props: { label: "Actions", value: 12, sub: "3 public" } });
+    expect(w.text()).toContain("Actions");
+    expect(w.get('[data-testid="kpi-value"]').text()).toBe("12");
+    expect(w.text()).toContain("3 public");
+  });
+
+  it("applies the accent colour to the value", () => {
+    const w = mount(KpiTile, { props: { label: "Events", value: 4, accent: "#c08bff" } });
+    expect(w.get('[data-testid="kpi-value"]').attributes("style")).toContain("#c08bff");
+  });
+
+  it("omits the sub line when not given", () => {
+    const w = mount(KpiTile, { props: { label: "Queries", value: 0 } });
+    expect(w.text()).toContain("Queries");
+    expect(w.text()).toContain("0");
+  });
+});

package/src/components/__tests__/LiveTable.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import LiveTable from "../LiveTable.vue";
+import type { TelemetryRecord } from "@/lib/telemetry";
+
+function rec(over: Partial<TelemetryRecord> & { kind: string }): TelemetryRecord {
+  return over as TelemetryRecord;
+}
+
+const rows: TelemetryRecord[] = [
+  rec({
+    kind: "action.dispatched",
+    action: "shop.place-order",
+    ts: "2026-06-15T10:00:00.000Z",
+    envelope: { messageId: "m1", correlationId: "c-abc-1", causationId: "m1" },
+  }),
+  rec({
+    kind: "action.completed",
+    action: "shop.place-order",
+    durationMs: 37,
+    ts: "2026-06-15T10:00:01.000Z",
+    envelope: { messageId: "m2", correlationId: "c-abc-1", causationId: "m1" },
+  }),
+  rec({
+    kind: "query.executed",
+    query: "shop.order-by-id",
+    durationMs: 4,
+    ts: "2026-06-15T10:00:02.000Z",
+    envelope: { messageId: "m3", correlationId: "c-def-2", causationId: "m1" },
+  }),
+];
+
+describe("LiveTable", () => {
+  it("renders a row per record, newest first by default", () => {
+    const w = mount(LiveTable, { props: { rows } });
+    const cells = w.findAll('[data-testid="live-row"]');
+    expect(cells).toHaveLength(3);
+    // default sort is time desc → query.executed (10:00:02) leads
+    expect(cells[0]!.text()).toContain("query.executed");
+  });
+
+  it("shows subject, duration and short correlation", () => {
+    const w = mount(LiveTable, { props: { rows } });
+    const text = w.text();
+    expect(text).toContain("shop.place-order");
+    expect(text).toContain("37ms");
+    expect(text).toContain("c"); // shortId("c-abc-1") → "c"
+  });
+
+  it("toggles sort direction when a header is clicked", async () => {
+    const w = mount(LiveTable, { props: { rows } });
+    await w.find('[data-testid="col-time"]').trigger("click"); // time → asc
+    const cells = w.findAll('[data-testid="live-row"]');
+    expect(cells[0]!.text()).toContain("action.dispatched"); // oldest first now
+  });
+
+  it("re-sorts by a different column on header click", async () => {
+    const w = mount(LiveTable, { props: { rows } });
+    await w.find('[data-testid="col-subject"]').trigger("click"); // subject asc
+    const cells = w.findAll('[data-testid="live-row"]');
+    // "shop.order-by-id" < "shop.place-order"
+    expect(cells[0]!.text()).toContain("shop.order-by-id");
+  });
+
+  it("emits select + update:selectedIndex on row click", async () => {
+    const w = mount(LiveTable, { props: { rows } });
+    await w.findAll('[data-testid="live-row"]')[0]!.trigger("click");
+    expect(w.emitted("select")).toBeTruthy();
+    const idx = w.emitted("update:selectedIndex");
+    expect(idx).toBeTruthy();
+    expect(idx![0]![0]).toBe(0);
+  });
+
+  it("walks selection with ArrowDown / ArrowUp", async () => {
+    const w = mount(LiveTable, { props: { rows, selectedIndex: -1 } });
+    const grid = w.find('[data-testid="live-table"]');
+    await grid.trigger("keydown", { key: "ArrowDown" });
+    expect(w.emitted("update:selectedIndex")!.at(-1)![0]).toBe(0);
+
+    await w.setProps({ selectedIndex: 0 });
+    await grid.trigger("keydown", { key: "ArrowDown" });
+    expect(w.emitted("update:selectedIndex")!.at(-1)![0]).toBe(1);
+
+    await w.setProps({ selectedIndex: 1 });
+    await grid.trigger("keydown", { key: "ArrowUp" });
+    expect(w.emitted("update:selectedIndex")!.at(-1)![0]).toBe(0);
+  });
+
+  it("opens the selected row on Enter", async () => {
+    const w = mount(LiveTable, { props: { rows, selectedIndex: 0 } });
+    await w.find('[data-testid="live-table"]').trigger("keydown", { key: "Enter" });
+    expect(w.emitted("select")).toBeTruthy();
+  });
+
+  it("marks the selected row with aria-selected", () => {
+    const w = mount(LiveTable, { props: { rows, selectedIndex: 1 } });
+    const selected = w.findAll('[data-testid="live-row"]')[1]!;
+    expect(selected.attributes("aria-selected")).toBe("true");
+  });
+});

package/src/components/__tests__/MetadataInspector.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import MetadataInspector from "../MetadataInspector.vue";
+
+describe("MetadataInspector", () => {
+  it("renders one row per flattened leaf", () => {
+    const w = mount(MetadataInspector, {
+      props: { data: { kind: "action.completed", envelope: { messageId: "m1" } } },
+    });
+    const rows = w.findAll('[data-testid="meta-row"]');
+    expect(rows).toHaveLength(2);
+    expect(w.text()).toContain("envelope.messageId");
+    expect(w.text()).toContain("m1");
+  });
+
+  it("shows an empty hint for an empty object", () => {
+    const w = mount(MetadataInspector, { props: { data: {} } });
+    expect(w.find('[data-testid="meta-empty"]').exists()).toBe(true);
+  });
+
+  it("copies a value to the clipboard on row click", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal("navigator", { clipboard: { writeText } });
+    const w = mount(MetadataInspector, { props: { data: { id: "abc" } } });
+    await w.get('[data-testid="meta-row"]').trigger("click");
+    expect(writeText).toHaveBeenCalledWith("abc");
+    vi.unstubAllGlobals();
+  });
+
+  it("copies the whole payload as JSON from the header", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal("navigator", { clipboard: { writeText } });
+    const w = mount(MetadataInspector, { props: { data: { a: 1 }, label: "Span" } });
+    await w.get('[data-testid="meta-copy-all"]').trigger("click");
+    expect(writeText).toHaveBeenCalledWith(JSON.stringify({ a: 1 }, null, 2));
+    vi.unstubAllGlobals();
+  });
+});

package/src/components/__tests__/NodeCard.test.ts

@@ -0,0 +1,116 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import NodeCard from "../NodeCard.vue";
+import type { BcNodeDetail } from "@/lib/bc-graph";
+
+const detail: BcNodeDetail = {
+  id: "action:orders.place",
+  kind: "action",
+  name: "orders.place",
+  app: "orders",
+  description: "Place an order.",
+  public: true,
+  source: { file: "/app/actions.ts", line: 12, column: 4 },
+  schema: { type: "object", properties: { id: { type: "string" } } },
+  emits: ["orders.placed"],
+  extra: { retry: 3 },
+};
+
+describe("NodeCard", () => {
+  it("renders the empty state with no detail", () => {
+    const w = mount(NodeCard, { props: { detail: null } });
+    expect(w.find('[data-testid="node-card-empty"]').exists()).toBe(true);
+    expect(w.find('[data-testid="node-card"]').exists()).toBe(false);
+  });
+
+  it("renders kind, name, app and description", () => {
+    const w = mount(NodeCard, { props: { detail } });
+    expect(w.text()).toContain("action");
+    expect(w.text()).toContain("orders.place");
+    expect(w.text()).toContain("orders");
+    expect(w.text()).toContain("Place an order.");
+  });
+
+  it("shows the public marker for public nodes", () => {
+    const w = mount(NodeCard, { props: { detail } });
+    expect(w.find('[data-testid="node-public"]').exists()).toBe(true);
+    const priv = mount(NodeCard, { props: { detail: { ...detail, public: false } } });
+    expect(priv.find('[data-testid="node-private"]').exists()).toBe(true);
+  });
+
+  it("emits select-event when an emitted event chip is clicked", async () => {
+    const w = mount(NodeCard, { props: { detail } });
+    await w.get('[data-testid="emits-orders.placed"]').trigger("click");
+    expect(w.emitted("select-event")?.[0]).toEqual(["orders.placed"]);
+  });
+
+  it("emits open-source when the source pill is clicked", async () => {
+    const w = mount(NodeCard, { props: { detail } });
+    await w.get('[data-testid="source-pill"]').trigger("click");
+    expect(w.emitted("open-source")?.[0]?.[0]).toMatchObject({ line: 12 });
+  });
+
+  it("renders a Business rules section listing each invariant message + rule", () => {
+    const withRules: BcNodeDetail = {
+      ...detail,
+      invariants: [
+        {
+          rule: '(i) => i.by.length > 0 || "Must name the moderator"',
+          message: "Must name the moderator",
+        },
+        { rule: "(i) => i.ok" },
+      ],
+    };
+    const w = mount(NodeCard, { props: { detail: withRules } });
+    const panel = w.find('[data-testid="business-rules"]');
+    expect(panel.exists()).toBe(true);
+    expect(panel.text()).toContain("Business rules");
+    expect(panel.text()).toContain("Must name the moderator");
+    expect(panel.text()).toContain('(i) => i.by.length > 0 || "Must name the moderator"');
+    // A rule with no message still shows its source plus the placeholder.
+    expect(panel.text()).toContain("(i) => i.ok");
+    expect(panel.text()).toContain("no stated message");
+  });
+
+  it("omits the Business rules section when there are no invariants", () => {
+    const w = mount(NodeCard, { props: { detail } });
+    expect(w.find('[data-testid="business-rules"]').exists()).toBe(false);
+  });
+
+  const appDetail: BcNodeDetail = {
+    id: "app:moderation",
+    kind: "app",
+    name: "moderation",
+    description: "Moderation BC.",
+    env: ["MODERATION_AUTO_THRESHOLD", "PORT"],
+    config: [{ file: "/abs/app/config/moderation.ts", keys: ["moderation", "spamMarker"] }],
+    extra: { plugins: ["forge.actions"] },
+  };
+
+  it("renders an Environment section listing each env var the app reads", () => {
+    const w = mount(NodeCard, { props: { detail: appDetail } });
+    const panel = w.find('[data-testid="environment"]');
+    expect(panel.exists()).toBe(true);
+    expect(panel.text()).toContain("Environment");
+    expect(w.find('[data-testid="env-PORT"]').exists()).toBe(true);
+    expect(w.find('[data-testid="env-MODERATION_AUTO_THRESHOLD"]').exists()).toBe(true);
+  });
+
+  it("renders a Config section with each module's file (config-relative) + keys", () => {
+    const w = mount(NodeCard, { props: { detail: appDetail } });
+    const panel = w.find('[data-testid="config"]');
+    expect(panel.exists()).toBe(true);
+    expect(panel.text()).toContain("Config");
+    // Path is shown from the config/ segment, not the absolute prefix.
+    expect(panel.text()).toContain("config/moderation.ts");
+    expect(panel.text()).not.toContain("/abs/app");
+    expect(panel.text()).toContain("moderation");
+    expect(panel.text()).toContain("spamMarker");
+  });
+
+  it("omits Environment + Config sections when absent", () => {
+    const w = mount(NodeCard, { props: { detail } });
+    expect(w.find('[data-testid="environment"]').exists()).toBe(false);
+    expect(w.find('[data-testid="config"]').exists()).toBe(false);
+  });
+});

package/src/components/__tests__/RcaPanel.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import RcaPanel from "../RcaPanel.vue";
+import { groupIncidents } from "@/lib/rca";
+import type { TelemetryRecord } from "@/lib/telemetry";
+
+const env = (m: string, c: string, corr: string) => ({
+  messageId: m,
+  causationId: c,
+  correlationId: corr,
+});
+
+const RECORDS: TelemetryRecord[] = [
+  {
+    kind: "action.dispatched",
+    action: "orders.charge",
+    appName: "billing",
+    ts: "2026-01-01T00:00:00.000Z",
+    envelope: env("m1", "m1", "c1"),
+  },
+  {
+    kind: "action.failed",
+    action: "orders.charge",
+    appName: "billing",
+    attempt: 1,
+    maxAttempts: 3,
+    willRetry: true,
+    ts: "2026-01-01T00:00:00.050Z",
+    error: { name: "TimeoutError", message: "timed out", stack: "at chargeCard (billing.ts:42)" },
+    envelope: env("m2", "m1", "c1"),
+  },
+  {
+    kind: "dlq.recorded",
+    action: "orders.charge",
+    appName: "billing",
+    attempts: 3,
+    ts: "2026-01-01T00:00:00.300Z",
+    error: { name: "TimeoutError", message: "timed out" },
+    envelope: env("m3", "m1", "c1"),
+  },
+];
+
+const incident = groupIncidents(RECORDS)[0]!;
+
+describe("RcaPanel", () => {
+  it("opens on the 'What happened' tab with the suggested fix", () => {
+    const w = mount(RcaPanel, { props: { incident } });
+    expect(w.get('[data-testid="rca-what"]').exists()).toBe(true);
+    expect(w.get('[data-testid="rca-suggestion"]').text().length).toBeGreaterThan(0);
+  });
+
+  it("switches to the timeline and lists the whole chain with failures flagged", async () => {
+    const w = mount(RcaPanel, { props: { incident } });
+    await w.get('[data-testid="rca-tab-timeline"]').trigger("click");
+    const rows = w.findAll('[data-testid="rca-timeline-row"]');
+    expect(rows).toHaveLength(3);
+    expect(rows.filter((r) => r.attributes("data-failure") === "true")).toHaveLength(2);
+  });
+
+  it("shows the blast radius on the impact tab", async () => {
+    const w = mount(RcaPanel, { props: { incident } });
+    await w.get('[data-testid="rca-tab-impact"]').trigger("click");
+    const impact = w.get('[data-testid="rca-impact"]');
+    expect(impact.text()).toContain("billing");
+    expect(impact.text()).toContain("Yes"); // dead-lettered
+  });
+
+  it("shows the root error + stack on the evidence tab", async () => {
+    const w = mount(RcaPanel, { props: { incident } });
+    await w.get('[data-testid="rca-tab-evidence"]').trigger("click");
+    expect(w.get('[data-testid="rca-evidence"]').text()).toContain("TimeoutError");
+    expect(w.get('[data-testid="rca-stack"]').text()).toContain("chargeCard");
+  });
+
+  it("emits open-source when the source pill is clicked", async () => {
+    const source = { file: "apps/billing/orders.charge.ts", line: 42 };
+    const w = mount(RcaPanel, { props: { incident, source } });
+    await w.get('[data-testid="source-pill"]').trigger("click");
+    expect(w.emitted("open-source")?.[0]?.[0]).toEqual(source);
+  });
+});

package/src/components/__tests__/StatusBadge.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import StatusBadge from "../StatusBadge.vue";
+
+describe("StatusBadge", () => {
+  it("renders the label", () => {
+    const w = mount(StatusBadge, { props: { status: "ok", label: "Healthy" } });
+    expect(w.text()).toContain("Healthy");
+  });
+
+  it("colours the dot by status", () => {
+    expect(mount(StatusBadge, { props: { status: "error" } }).html()).toContain("bg-rose-400");
+    expect(mount(StatusBadge, { props: { status: "warn" } }).html()).toContain("bg-amber-400");
+    expect(mount(StatusBadge, { props: { status: "idle" } }).html()).toContain("bg-zinc-600");
+  });
+
+  it("shows the pulse ring only when pulse is set", () => {
+    const off = mount(StatusBadge, { props: { status: "live" } });
+    expect(off.find('[data-testid="status-pulse"]').exists()).toBe(false);
+    const on = mount(StatusBadge, { props: { status: "live", pulse: true } });
+    expect(on.find('[data-testid="status-pulse"]').exists()).toBe(true);
+  });
+});

package/src/components/__tests__/Waterfall.test.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import Waterfall from "../Waterfall.vue";
+import type { TelemetryRecord, TraceNode } from "@/lib/telemetry";
+
+const env = (messageId: string, causationId: string) => ({
+  messageId,
+  causationId,
+  correlationId: "c",
+});
+function node(record: TelemetryRecord, children: TraceNode[] = []): TraceNode {
+  return { record, children };
+}
+
+const forest: TraceNode[] = [
+  node({ kind: "action.dispatched", name: "place", durationMs: 10, envelope: env("m1", "m1") }, [
+    node({ kind: "query.executed", name: "lookup", durationMs: 90, envelope: env("m2", "m1") }),
+    node({
+      kind: "action.failed",
+      name: "charge",
+      error: { name: "E", message: "x" },
+      envelope: env("m3", "m1"),
+    }),
+  ]),
+];
+
+describe("Waterfall", () => {
+  it("renders a row per node", () => {
+    const w = mount(Waterfall, { props: { forest } });
+    expect(w.findAll('[data-testid="waterfall-row"]')).toHaveLength(3);
+  });
+
+  it("marks the critical path and failed rows", () => {
+    const w = mount(Waterfall, { props: { forest } });
+    expect(w.findAll('[data-critical="true"]').length).toBeGreaterThan(0);
+    expect(w.find('[data-failed="true"]').exists()).toBe(true);
+  });
+
+  it("emits select with the clicked row's record", async () => {
+    const w = mount(Waterfall, { props: { forest } });
+    await w.findAll('[data-testid="waterfall-row"]')[1]!.trigger("click");
+    const ev = w.emitted("select");
+    expect(ev).toBeTruthy();
+    expect((ev![0]![0] as { record: TelemetryRecord }).record.name).toBe("lookup");
+  });
+
+  it("dims rows beyond the replay cursor", () => {
+    const w = mount(Waterfall, { props: { forest, reveal: 1 } });
+    const rows = w.findAll('[data-testid="waterfall-row"]');
+    expect(rows[0]!.classes()).not.toContain("opacity-30");
+    expect(rows[1]!.classes()).toContain("opacity-30");
+    expect(rows[2]!.classes()).toContain("opacity-30");
+  });
+});