@nwire/studio 0.12.0 → 0.13.0

package/src/components/ErrorCard.stories.ts

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { expect, within } from "storybook/test";
+import { createRouter, createMemoryHistory } from "vue-router";
+import ErrorCard from "./ErrorCard.vue";
+
+// A throwaway router so the correlation chip's RouterLink resolves in the
+// iframe instead of rendering as an unresolved element.
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes: [{ path: "/trace", component: { template: "<div/>" } }],
+});
+
+const meta: Meta<typeof ErrorCard> = {
+  title: "Errors/ErrorCard",
+  component: ErrorCard,
+  tags: ["autodocs"],
+  parameters: { vueRouter: { router } },
+};
+export default meta;
+
+type Story = StoryObj<typeof ErrorCard>;
+
+const env = (corr: string) => ({ messageId: "m-1", causationId: "m-1", correlationId: corr });
+
+export const DeadLettered: Story = {
+  args: {
+    record: {
+      kind: "dlq.recorded",
+      action: "orders.ship",
+      attempts: 5,
+      ts: "2026-01-01T12:30:00.000Z",
+      error: { name: "TypeError", message: "Cannot read properties of undefined (reading 'sku')" },
+      envelope: env("c-9f8e21"),
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement);
+    await expect(c.getByTestId("error-title")).toHaveTextContent("Dead-lettered");
+    await expect(c.getByTestId("error-card")).toHaveAttribute("data-severity", "critical");
+    await expect(c.getByTestId("error-summary")).toHaveTextContent("orders.ship");
+  },
+};
+
+export const Declined: Story = {
+  args: {
+    record: {
+      kind: "action.failed",
+      action: "billing.charge",
+      attempt: 1,
+      maxAttempts: 1,
+      willRetry: false,
+      ts: "2026-01-01T12:31:00.000Z",
+      error: { name: "PaymentDeclined", message: "card declined", code: 402 },
+      envelope: env("c-aa11bb"),
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement);
+    await expect(c.getByTestId("error-card")).toHaveAttribute("data-category", "declined");
+    await expect(c.getByTestId("error-severity")).toHaveTextContent("Warning");
+  },
+};
+
+export const Retrying: Story = {
+  args: {
+    record: {
+      kind: "action.failed",
+      action: "inventory.reserve",
+      attempt: 2,
+      maxAttempts: 3,
+      willRetry: true,
+      ts: "2026-01-01T12:32:00.000Z",
+      error: { name: "TimeoutError", message: "upstream timed out" },
+      envelope: env("c-cc22dd"),
+    },
+  },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByTestId("error-retry")).toHaveTextContent(
+      "attempt 2 of 3",
+    );
+  },
+};
+
+export const ExternalCall: Story = {
+  args: {
+    record: {
+      kind: "external.call.failed",
+      call: "stripe.charge",
+      target: "https://api.stripe.com/v1/charges",
+      attempt: 1,
+      willRetry: false,
+      ts: "2026-01-01T12:33:00.000Z",
+      error: { name: "FetchError", message: "ECONNREFUSED" },
+    },
+  },
+};
+
+export const Gallery: Story = {
+  render: () => ({
+    components: { ErrorCard },
+    setup: () => ({
+      records: [
+        {
+          kind: "dlq.recorded",
+          action: "orders.ship",
+          attempts: 5,
+          error: { name: "TypeError", message: "boom" },
+        },
+        {
+          kind: "action.failed",
+          action: "billing.charge",
+          willRetry: false,
+          error: { name: "PaymentDeclined", message: "declined", code: 402 },
+        },
+        {
+          kind: "action.failed",
+          action: "inventory.reserve",
+          attempt: 2,
+          maxAttempts: 3,
+          willRetry: true,
+          error: { name: "TimeoutError", message: "timed out" },
+        },
+        {
+          kind: "projection.failed",
+          projection: "orders.summary",
+          event: "OrderPlaced",
+          error: { name: "RangeError", message: "bad index" },
+        },
+      ],
+    }),
+    template: `<div class="flex flex-col gap-2 max-w-xl"><ErrorCard v-for="(r,i) in records" :key="i" :record="r" :show-correlation="false" /></div>`,
+  }),
+};

package/src/components/ErrorCard.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+/**
+ * `ErrorCard` — one failure, read like a sentence. Severity stripe + icon, a
+ * plain-language title and summary (from `explainError`), the failing unit, the
+ * retry/dead-letter state, when it happened, and a correlation chip to jump to
+ * the trace. Click selects it (the Errors view opens the RcaPanel). Purely
+ * presentational — all the humanising lives in `lib/error-friendly`.
+ *
+ *   <ErrorCard :record="failure" :selected="id === sel" @select="sel = id" />
+ */
+import { computed } from "vue";
+import { AlertOctagon, AlertTriangle, Info, Clock, Repeat, Skull } from "lucide-vue-next";
+import { explainError, retryNarrative, type Severity } from "@/lib/error-friendly";
+import { kindVariant } from "@/lib/kind-colors";
+import type { TelemetryRecord } from "@/lib/telemetry";
+import KindBadge from "./KindBadge.vue";
+
+const props = withDefaults(
+  defineProps<{
+    record: TelemetryRecord;
+    selected?: boolean;
+    /** Show the correlation chip (default true). */
+    showCorrelation?: boolean;
+  }>(),
+  { selected: false, showCorrelation: true },
+);
+
+defineEmits<{ (e: "select"): void }>();
+
+const friendly = computed(() => explainError(props.record));
+const retry = computed(() => retryNarrative(props.record));
+
+const correlation = computed(() => props.record.envelope?.correlationId);
+const shortCorr = computed(() =>
+  correlation.value ? (correlation.value.split("-")[0] ?? correlation.value.slice(0, 8)) : null,
+);
+
+const when = computed(() => {
+  const ts = props.record.ts;
+  if (!ts) return null;
+  const d = new Date(ts);
+  return Number.isNaN(d.getTime()) ? null : d.toLocaleTimeString();
+});
+
+const SEVERITY_STYLE: Record<
+  Severity,
+  { stripe: string; icon: string; chip: string; label: string }
+> = {
+  critical: {
+    stripe: "bg-rose-500",
+    icon: "text-rose-400",
+    chip: "bg-rose-500/15 text-rose-300 border-rose-500/30",
+    label: "Critical",
+  },
+  high: {
+    stripe: "bg-orange-500",
+    icon: "text-orange-400",
+    chip: "bg-orange-500/15 text-orange-300 border-orange-500/30",
+    label: "High",
+  },
+  warning: {
+    stripe: "bg-amber-500",
+    icon: "text-amber-400",
+    chip: "bg-amber-500/15 text-amber-300 border-amber-500/30",
+    label: "Warning",
+  },
+  info: {
+    stripe: "bg-sky-500",
+    icon: "text-sky-400",
+    chip: "bg-sky-500/15 text-sky-300 border-sky-500/30",
+    label: "Info",
+  },
+};
+
+const style = computed(() => SEVERITY_STYLE[friendly.value.severity]);
+
+const icon = computed(() => {
+  if (friendly.value.attempt.terminal) return Skull;
+  switch (friendly.value.severity) {
+    case "critical":
+      return AlertOctagon;
+    case "high":
+      return AlertTriangle;
+    case "warning":
+      return AlertTriangle;
+    default:
+      return Info;
+  }
+});
+</script>
+
+<template>
+  <button
+    type="button"
+    class="group relative w-full text-left rounded-lg border bg-zinc-950 pl-4 pr-3 py-3 transition-colors hover:border-zinc-700"
+    :class="selected ? 'border-zinc-600 bg-zinc-900/60' : 'border-zinc-800'"
+    data-testid="error-card"
+    :data-severity="friendly.severity"
+    :data-category="friendly.category"
+    @click="$emit('select')"
+  >
+    <!-- severity stripe -->
+    <span class="absolute inset-y-2 left-0 w-1 rounded-full" :class="style.stripe" />
+
+    <div class="flex items-start gap-2.5">
+      <component :is="icon" class="w-4 h-4 mt-0.5 shrink-0" :class="style.icon" />
+      <div class="min-w-0 flex-1">
+        <div class="flex items-center gap-2">
+          <span class="text-sm font-medium text-zinc-100 truncate" data-testid="error-title">
+            {{ friendly.title }}
+          </span>
+          <span
+            class="text-[10px] uppercase tracking-wide rounded border px-1.5 py-0.5 shrink-0"
+            :class="style.chip"
+            data-testid="error-severity"
+          >
+            {{ style.label }}
+          </span>
+        </div>
+
+        <p class="mt-1 text-xs text-zinc-400 leading-relaxed" data-testid="error-summary">
+          {{ friendly.summary }}
+        </p>
+
+        <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-zinc-500">
+          <KindBadge :variant="kindVariant(friendly.subject.kind)">{{
+            friendly.subject.kind
+          }}</KindBadge>
+          <span class="font-mono text-zinc-400 truncate max-w-[16rem]">{{
+            friendly.subject.name
+          }}</span>
+          <span v-if="retry" class="inline-flex items-center gap-1" data-testid="error-retry">
+            <Repeat class="w-3 h-3" />
+            {{ retry }}
+          </span>
+          <span v-if="when" class="inline-flex items-center gap-1">
+            <Clock class="w-3 h-3" />
+            {{ when }}
+          </span>
+          <RouterLink
+            v-if="showCorrelation && shortCorr && correlation"
+            :to="{ path: '/trace', query: { correlationId: correlation } }"
+            class="ml-auto font-mono text-zinc-500 hover:text-orange-400 transition-colors"
+            data-testid="error-correlation"
+            @click.stop
+          >
+            corr {{ shortCorr }} →
+          </RouterLink>
+        </div>
+      </div>
+    </div>
+  </button>
+</template>

package/src/components/GraphCanvas.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import GraphCanvas from "./GraphCanvas.vue";
+import type { BcGraph } from "@/lib/bc-graph";
+
+const graph: BcGraph = {
+  bcs: [
+    {
+      name: "orders",
+      rows: [
+        { id: "action:orders.place", kind: "action", name: "orders.place", public: true },
+        { id: "event:orders.placed", kind: "event", name: "orders.placed", public: true },
+        { id: "query:orders.list", kind: "query", name: "orders.list" },
+      ],
+    },
+    {
+      name: "billing",
+      rows: [
+        { id: "action:billing.charge", kind: "action", name: "billing.charge" },
+        { id: "event:billing.charged", kind: "event", name: "billing.charged" },
+      ],
+    },
+    {
+      name: "shipping",
+      rows: [{ id: "workflow:shipping.dispatch", kind: "workflow", name: "shipping.dispatch" }],
+    },
+  ],
+  edges: [
+    { from: "orders", to: "billing", label: "delivers" },
+    { from: "billing", to: "shipping", label: "delivers" },
+  ],
+};
+
+const meta: Meta<typeof GraphCanvas> = {
+  title: "Map/GraphCanvas",
+  component: GraphCanvas,
+  tags: ["autodocs"],
+};
+export default meta;
+
+type Story = StoryObj<typeof GraphCanvas>;
+
+export const ThreeContexts: Story = {
+  render: () => ({
+    components: { GraphCanvas },
+    setup: () => ({ graph }),
+    template: `<div class="h-[560px] w-full bg-zinc-950"><GraphCanvas :graph="graph" /></div>`,
+  }),
+};

package/src/components/GraphCanvas.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+/**
+ * `GraphCanvas` — the Map's hero surface: system-area (bounded-context) cards
+ * laid out on a pan/zoom canvas, connected by inter-area flow edges. Thin
+ * wrapper over VueFlow — layout is the pure `layoutBcGraph` (unit-tested), each
+ * node renders a `BcCard`, and row selection bubbles up as `select`. Per-area
+ * live metrics (when given) overlay each card and animate the flows between
+ * active areas. Node positions come from the manifest only, so a metrics tick
+ * updates cards in place and never moves a card.
+ */
+import { computed } from "vue";
+import { VueFlow, type Node, type Edge, MarkerType } from "@vue-flow/core";
+import { Background } from "@vue-flow/background";
+import { Controls } from "@vue-flow/controls";
+import { MiniMap } from "@vue-flow/minimap";
+import type { BcGraph, BcNode, BcRow } from "@/lib/bc-graph";
+import { layoutBcGraph } from "@/lib/bc-graph";
+import type { AppMetrics } from "@/lib/node-metrics";
+import BcCard from "./BcCard.vue";
+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 props = defineProps<{
+  graph: BcGraph;
+  selectedId?: string | null;
+  /** app name → live metrics; empty before any run. */
+  metrics?: ReadonlyMap<string, AppMetrics>;
+}>();
+
+const emit = defineEmits<{ (e: "select", row: BcRow): void }>();
+
+const CARD_W = 280;
+
+const nodes = computed<Node[]>(() =>
+  layoutBcGraph(props.graph, { width: CARD_W, columns: 3, gapX: 64, gapY: 64 }).map((n) => ({
+    id: `bc:${n.name}`,
+    type: "bc",
+    position: { x: n.x, y: n.y },
+    data: { bc: { name: n.name, rows: n.rows } as BcNode },
+    style: { width: `${n.width}px` },
+  })),
+);
+
+/** An area is active when it saw any traffic — drives edge animation. */
+function active(app: string): boolean {
+  return (props.metrics?.get(app)?.total ?? 0) > 0;
+}
+
+const edges = computed<Edge[]>(() =>
+  props.graph.edges.map((e) => {
+    const live = active(e.from) || active(e.to);
+    return {
+      id: `${e.from}->${e.to}`,
+      source: `bc:${e.from}`,
+      target: `bc:${e.to}`,
+      label: e.label,
+      type: "smoothstep",
+      animated: live,
+      style: { stroke: "#a78bfa", strokeWidth: live ? 2.5 : 2, opacity: live ? 1 : 0.75 },
+      labelStyle: { fontSize: "10px", fill: "#a1a1aa" },
+      labelBgStyle: { fill: "#18181b" },
+      labelBgPadding: [4, 2] as [number, number],
+      labelBgBorderRadius: 4,
+      markerEnd: { type: MarkerType.ArrowClosed, color: "#a78bfa" },
+    } satisfies Edge;
+  }),
+);
+</script>
+
+<template>
+  <div class="h-full w-full" data-testid="graph-canvas">
+    <VueFlow :nodes="nodes" :edges="edges" :fit-view-on-init="true" :min-zoom="0.2" :max-zoom="1.5">
+      <template #node-bc="{ data }">
+        <BcCard
+          :bc="data.bc"
+          :selected-id="selectedId"
+          :metrics="metrics?.get(data.bc.name)"
+          @select="emit('select', $event)"
+        />
+      </template>
+      <Background :pattern-color="'#27272a'" :gap="22" :size="1.4" />
+      <MiniMap pannable zoomable class="!bg-zinc-950/80" />
+      <Controls />
+    </VueFlow>
+  </div>
+</template>

package/src/components/KpiTile.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import KpiTile from "./KpiTile.vue";
+import { kindColor } from "@/lib/kind-colors";
+
+const meta: Meta<typeof KpiTile> = {
+  title: "Map/KpiTile",
+  component: KpiTile,
+  tags: ["autodocs"],
+};
+export default meta;
+
+type Story = StoryObj<typeof KpiTile>;
+
+export const Default: Story = {
+  args: { label: "Actions", value: 12, sub: "3 public" },
+};
+
+export const Strip: Story = {
+  render: () => ({
+    components: { KpiTile },
+    setup: () => ({ kindColor }),
+    template: `
+      <div class="flex gap-3 bg-zinc-900 p-4">
+        <KpiTile label="Apps" :value="2" />
+        <KpiTile label="Actions" :value="12" :accent="kindColor('action')" />
+        <KpiTile label="Events" :value="8" :accent="kindColor('event')" />
+        <KpiTile label="Queries" :value="5" :accent="kindColor('query')" />
+        <KpiTile label="Workflows" :value="1" :accent="kindColor('workflow')" />
+      </div>
+    `,
+  }),
+};

package/src/components/KpiTile.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+/**
+ * `KpiTile` — one stat in the Map's header strip: a big value, a label, an
+ * optional sub-line, and an optional accent colour for the value (used to
+ * tint a count by the kind it represents). Icon goes in the default slot.
+ *
+ *   <KpiTile label="Actions" :value="12" :accent="kindColor('action')" />
+ */
+withDefaults(
+  defineProps<{
+    label: string;
+    value: string | number;
+    sub?: string;
+    /** Hex colour for the value text — defaults to the foreground. */
+    accent?: string;
+  }>(),
+  { accent: undefined },
+);
+</script>
+
+<template>
+  <div
+    class="rounded-lg border border-zinc-800 bg-zinc-950 px-4 py-3 flex flex-col gap-0.5 min-w-[112px]"
+    data-testid="kpi-tile"
+  >
+    <div class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-zinc-500">
+      <slot name="icon" />
+      {{ label }}
+    </div>
+    <div
+      class="text-2xl font-semibold tabular-nums leading-tight"
+      :style="accent ? { color: accent } : undefined"
+      data-testid="kpi-value"
+    >
+      {{ value }}
+    </div>
+    <div v-if="sub" class="text-[10px] text-zinc-600">{{ sub }}</div>
+  </div>
+</template>

package/src/components/LiveTable.stories.ts

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { expect, userEvent, within } from "storybook/test";
+import LiveTable from "./LiveTable.vue";
+import type { TelemetryRecord } from "@/lib/telemetry";
+
+const t = (s: number) => new Date(Date.UTC(2026, 0, 1, 0, 0, s)).toISOString();
+const env = (messageId: string, correlationId: string) => ({
+  messageId,
+  correlationId,
+  causationId: messageId,
+});
+
+const rows: TelemetryRecord[] = [
+  { kind: "action.dispatched", action: "orders.place", ts: t(0), envelope: env("m1", "c-1a2b") },
+  {
+    kind: "action.completed",
+    action: "orders.place",
+    durationMs: 36,
+    ts: t(1),
+    envelope: env("m2", "c-1a2b"),
+  },
+  {
+    kind: "event.published",
+    event: { name: "orders.placed" },
+    ts: t(1),
+    appName: "orders",
+    envelope: env("m3", "c-1a2b"),
+  },
+  {
+    kind: "query.executed",
+    query: "orders.by-id",
+    durationMs: 4,
+    ts: t(2),
+    envelope: env("m4", "c-9z8y"),
+  },
+  {
+    kind: "action.failed",
+    action: "billing.charge",
+    error: { name: "Error", message: "card declined" },
+    ts: t(3),
+    envelope: env("m5", "c-9z8y"),
+  },
+];
+
+const meta: Meta<typeof LiveTable> = {
+  title: "Streams/LiveTable",
+  component: LiveTable,
+  tags: ["autodocs"],
+  render: (args) => ({
+    components: { LiveTable },
+    setup: () => ({ args }),
+    template: `<div class="bg-zinc-950 h-[320px] w-[760px]"><LiveTable v-bind="args" /></div>`,
+  }),
+};
+export default meta;
+
+type Story = StoryObj<typeof LiveTable>;
+
+export const Default: Story = {
+  args: { rows },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement);
+    await expect(c.getAllByTestId("live-row")).toHaveLength(5);
+    // Default sort = time desc → the failed billing charge (latest) leads.
+    await expect(c.getAllByTestId("live-row")[0]!).toHaveTextContent("billing.charge");
+    // Clicking a header re-sorts by subject.
+    await userEvent.click(c.getByTestId("col-subject"));
+    await expect(c.getAllByTestId("live-row")[0]!).toHaveTextContent("billing.charge");
+  },
+};
+
+export const Selected: Story = {
+  args: { rows, selectedIndex: 1 },
+};
+
+export const Empty: Story = {
+  args: { rows: [] },
+};