@nwire/studio 0.10.0 → 0.11.0

package/src/pages/Topology.vue

@@ -1,4 +1,12 @@
 <script setup lang="ts">
+/**
+ * Topology — apps + plugins + event flow.
+ *
+ * Each app is a node. Its installed plugins are listed inside the node;
+ * its outbound sinks are listed below. Edges are event-flow edges from
+ * the `graph.events` cache: producer-app → consumer-app per event,
+ * coloured for cross-app vs in-app.
+ */
 import { computed, ref } from "vue";
 import { VueFlow, type Node, type Edge, MarkerType } from "@vue-flow/core";
 import { Background } from "@vue-flow/background";
@@ -10,100 +18,78 @@ import "@vue-flow/controls/dist/style.css";
 
 const { cache } = useCache();
 
-// App-level lane layout: each app gets a row; its modules sit on that row.
-const COLS_PER_ROW = 4;
-const NODE_W = 220;
-const NODE_H = 100;
-const COL_GAP = 60;
-const ROW_GAP = 140;
+const NODE_W = 260;
+const NODE_GAP_X = 80;
+const NODE_GAP_Y = 80;
+const COLS = 3;
 
 const elements = computed<{ nodes: Node[]; edges: Edge[] }>(() => {
   if (!cache.value) return { nodes: [], edges: [] };
-
   const nodes: Node[] = [];
-  let y = 40;
 
-  for (const app of cache.value.apps) {
-    // App banner / header
+  for (let i = 0; i < cache.value.apps.length; i++) {
+    const app = cache.value.apps[i]!;
+    const pluginsForApp = cache.value.plugins.filter((p) => p.app === app.name);
+    const sinksForApp = cache.value.sinks?.filter((s) => s.app === app.name) ?? [];
+    const actionsCount = cache.value.actions.filter((a) => a.app === app.name).length;
+    const eventsCount = cache.value.events.filter((e) => e.app === app.name).length;
+    const projectionsCount = cache.value.projections.filter((p) => p.app === app.name).length;
+
+    const col = i % COLS;
+    const row = Math.floor(i / COLS);
+    const height = 110 + pluginsForApp.length * 18 + sinksForApp.length * 18;
+
     nodes.push({
       id: `app:${app.name}`,
-      position: { x: 20, y },
+      position: { x: 40 + col * (NODE_W + NODE_GAP_X), y: 40 + row * (height + NODE_GAP_Y) },
       type: "default",
-      data: { label: app.name },
+      data: {
+        label: app.name,
+        plugins: pluginsForApp.map((p) => p.name),
+        sinks: sinksForApp.map((s) => `${s.position} · ${s.kind ?? s.name}`),
+        actionsCount,
+        eventsCount,
+        projectionsCount,
+      },
       style: {
-        width: `${COLS_PER_ROW * (NODE_W + COL_GAP) + 80}px`,
-        height: "44px",
-        background: "rgba(34, 197, 94, 0.10)",
+        width: `${NODE_W}px`,
+        height: `${height}px`,
+        background: "#0a0a0a",
         border: "1px solid rgb(34, 197, 94)",
-        color: "rgb(134, 239, 172)",
-        fontWeight: "600",
-        fontSize: "13px",
-        textAlign: "left",
-        padding: "10px 16px",
+        color: "#e4e4e7",
         borderRadius: "8px",
+        padding: "0",
       },
-      selectable: false,
-      draggable: false,
     });
-
-    let col = 0;
-    let row = 0;
-    const moduleY = y + 60;
-    for (const moduleName of app.modules) {
-      const mod = cache.value.modules.find((m) => m.name === moduleName && m.app === app.name);
-      const x = 40 + col * (NODE_W + COL_GAP);
-      const ny = moduleY + row * (NODE_H + ROW_GAP * 0.5);
-      nodes.push({
-        id: `${app.name}:${moduleName}`,
-        position: { x, y: ny },
-        data: {
-          label: moduleName,
-          subtitle: mod
-            ? `${mod.counts.actions}A · ${mod.counts.events}E · ${mod.counts.actors}@`
-            : "",
-        },
-        style: {
-          width: `${NODE_W}px`,
-          height: `${NODE_H}px`,
-          background: "#18181b",
-          border: "1px solid #3f3f46",
-          color: "#fafafa",
-          padding: "10px",
-          borderRadius: "6px",
-        },
-        type: "default",
-      });
-      col++;
-      if (col >= COLS_PER_ROW) {
-        col = 0;
-        row++;
-      }
-    }
-    const totalRows = Math.max(1, Math.ceil(app.modules.length / COLS_PER_ROW));
-    y = moduleY + totalRows * (NODE_H + ROW_GAP * 0.5) + 30;
   }
 
-  // Edges: every event-graph edge from producer-module → each consumer-module.
+  // Edges from the event graph: producer-app → consumer-app.
   const edges: Edge[] = [];
-  for (const edge of cache.value.graph.events) {
-    const sourceId = `${edge.producer.app}:${edge.producer.module}`;
-    for (const cons of edge.consumers) {
-      const targetId = `${cons.app}:${cons.module}`;
-      if (sourceId === targetId) continue; // skip self-loops for readability
-      const cross = cons.app !== edge.producer.app;
+  const eventLog = cache.value.graph?.events ?? [];
+  for (const edge of eventLog) {
+    const producer = (edge as { producer?: { app?: string } }).producer;
+    const consumers = (edge as { consumers?: { app?: string; via?: string }[] }).consumers ?? [];
+    const sourceAppName = producer?.app;
+    if (!sourceAppName) continue;
+    const sourceId = `app:${sourceAppName}`;
+    for (const cons of consumers) {
+      if (!cons.app) continue;
+      const targetId = `app:${cons.app}`;
+      if (sourceId === targetId) continue;
+      const eventName = (edge as { event?: string }).event ?? "";
       edges.push({
-        id: `${sourceId}->${targetId}::${edge.event}::${cons.via}`,
+        id: `${sourceId}->${targetId}::${eventName}::${cons.via ?? "via"}`,
         source: sourceId,
         target: targetId,
-        label: edge.event,
+        label: eventName,
         type: "smoothstep",
-        animated: cross,
-        style: { stroke: cross ? "#a78bfa" : "#3f3f46", strokeWidth: cross ? 2 : 1 },
+        animated: true,
+        style: { stroke: "#a78bfa", strokeWidth: 2 },
         labelStyle: { fontSize: "10px", fill: "#a1a1aa" },
         labelBgStyle: { fill: "#18181b" },
         labelBgPadding: [4, 2] as [number, number],
         labelBgBorderRadius: 4,
-        markerEnd: { type: MarkerType.ArrowClosed, color: cross ? "#a78bfa" : "#71717a" },
+        markerEnd: { type: MarkerType.ArrowClosed, color: "#a78bfa" },
       });
     }
   }
@@ -114,49 +100,63 @@ const elements = computed<{ nodes: Node[]; edges: Edge[] }>(() => {
 const showCrossOnly = ref(false);
 const filtered = computed(() => {
   if (!showCrossOnly.value) return elements.value;
-  const edges = elements.value.edges.filter((e) => {
-    const src = (e.source as string).split(":")[0];
-    const tgt = (e.target as string).split(":")[0];
-    return src !== tgt;
-  });
+  const edges = elements.value.edges.filter((e) => e.source !== e.target);
   return { nodes: elements.value.nodes, edges };
 });
 </script>
 
 <template>
-  <div v-if="cache" class="h-full flex flex-col">
+  <div v-if="cache" class="h-full flex flex-col" data-testid="topology-page">
     <div class="border-b border-zinc-800 px-6 py-3 flex items-center justify-between">
       <div>
         <h1 class="text-lg font-semibold tracking-tight">Topology</h1>
         <p class="text-xs text-zinc-500">
-          Apps · bounded contexts · event flows
+          Apps · plugins · sinks · cross-app event flows
           <span class="ml-2">
             <span class="inline-block w-3 h-0.5 bg-purple-400 align-middle mr-1"></span>
-            cross-service
-          </span>
-          <span class="ml-3">
-            <span class="inline-block w-3 h-0.5 bg-zinc-600 align-middle mr-1"></span>
-            in-process
+            cross-app
           </span>
         </p>
       </div>
       <label class="flex items-center gap-2 text-xs text-zinc-400">
-        <input type="checkbox" v-model="showCrossOnly" class="accent-purple-400" />
-        Cross-service only
+        <input v-model="showCrossOnly" type="checkbox" class="accent-purple-400" />
+        Cross-app only
       </label>
     </div>
-    <div class="flex-1">
+
+    <div class="flex-1 relative">
       <VueFlow
         :nodes="filtered.nodes"
         :edges="filtered.edges"
-        :default-viewport="{ x: 0, y: 0, zoom: 0.85 }"
-        :min-zoom="0.3"
-        :max-zoom="2"
         :fit-view-on-init="true"
-        :nodes-draggable="false"
-        :nodes-connectable="false"
+        :min-zoom="0.2"
       >
-        <Background pattern-color="#3f3f46" :gap="20" />
+        <template #node-default="props">
+          <div class="px-3 py-2 text-left h-full flex flex-col gap-1">
+            <div class="font-mono text-sm text-emerald-300">{{ props.data.label }}</div>
+            <div class="text-[10px] text-zinc-500">
+              {{ props.data.actionsCount }}A · {{ props.data.eventsCount }}E ·
+              {{ props.data.projectionsCount }}P
+            </div>
+            <div v-if="props.data.plugins.length > 0" class="text-[10px] text-zinc-400 mt-1">
+              <div class="uppercase tracking-wider text-zinc-600">Plugins</div>
+              <div
+                v-for="p in props.data.plugins"
+                :key="p"
+                class="font-mono truncate text-zinc-300"
+              >
+                {{ p }}
+              </div>
+            </div>
+            <div v-if="props.data.sinks.length > 0" class="text-[10px] mt-1">
+              <div class="uppercase tracking-wider text-zinc-600">Sinks</div>
+              <div v-for="s in props.data.sinks" :key="s" class="font-mono truncate text-amber-200">
+                {{ s }}
+              </div>
+            </div>
+          </div>
+        </template>
+        <Background pattern-color="#27272a" />
         <Controls />
       </VueFlow>
     </div>

package/src/pages/Trace.vue

@@ -214,11 +214,11 @@ const causalForest = computed<TraceNode[]>(() => {
 const eventIndex = computed(() => {
   const m = new Map<
     string,
-    { module: string; app: string; source?: { file: string; line: number; column?: number } }
+    { app: string; source?: { file: string; line: number; column?: number } }
   >();
   if (cache.value) {
     for (const e of cache.value.events) {
-      m.set(e.name, { module: e.module, app: e.app, source: e.source });
+      m.set(e.name, { app: e.app, source: e.source });
     }
   }
   return m;
@@ -227,7 +227,6 @@ const eventIndex = computed(() => {
 // ── Context explorer ─────────────────────────────────────────────────
 interface ContextDigest {
   apps: Set<string>;
-  modules: Set<string>;
   uniqueEvents: Set<string>;
   startedAt: string;
   endedAt: string;
@@ -243,7 +242,6 @@ const context = computed<ContextDigest | undefined>(() => {
   const evts = selectedTraceEvents.value;
   if (evts.length === 0) return undefined;
   const apps = new Set<string>();
-  const modules = new Set<string>();
   const unique = new Set<string>();
   const tenants = new Set<string>();
   const users = new Set<string>();
@@ -254,8 +252,6 @@ const context = computed<ContextDigest | undefined>(() => {
     apps.add(e.appName);
     if (e.eventName) {
       unique.add(e.eventName);
-      const meta = eventIndex.value.get(e.eventName);
-      if (meta) modules.add(`${meta.app}/${meta.module}`);
     }
     if (e.envelope.tenant) tenants.add(e.envelope.tenant);
     if (e.envelope.userId) users.add(e.envelope.userId);
@@ -269,7 +265,6 @@ const context = computed<ContextDigest | undefined>(() => {
 
   return {
     apps,
-    modules,
     uniqueEvents: unique,
     startedAt,
     endedAt,
@@ -444,20 +439,6 @@ watch(
           </div>
         </section>
 
-        <section v-if="context.modules.size" class="px-4 py-3">
-          <h3 class="text-[10px] uppercase tracking-wide text-zinc-500 mb-2">Modules touched</h3>
-          <ul class="space-y-1">
-            <li
-              v-for="m in [...context.modules]"
-              :key="m"
-              class="flex items-center gap-2 text-xs font-mono"
-            >
-              <Boxes class="w-3 h-3 text-violet-400" />
-              {{ m }}
-            </li>
-          </ul>
-        </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">

package/src/pages/TraceNode.vue

@@ -45,7 +45,7 @@ interface SourceLoc {
 const props = defineProps<{
   node: TraceNode;
   depth: number;
-  eventIndex: Map<string, { module: string; app: string; source?: SourceLoc }>;
+  eventIndex: Map<string, { app: string; source?: SourceLoc }>;
   isExpanded: (id: string) => boolean;
   toggle: (id: string) => void;
   formatTime: (iso: string) => string;
@@ -115,9 +115,7 @@ function open(s: SourceLoc | undefined) {
             <span class="text-[10px] text-zinc-500 tabular-nums">
               {{ formatTime(node.evt.capturedAt) }}
             </span>
-            <span v-if="meta" class="text-[10px] text-zinc-500 font-mono">
-              · {{ meta.app }}/{{ meta.module }}
-            </span>
+            <span v-if="meta" class="text-[10px] text-zinc-500 font-mono"> · {{ meta.app }} </span>
             <button v-if="source" type="button" class="ml-auto" @click="open(source)">
               <SourcePill :source="source" compact />
             </button>

package/src/pages/Workflows.vue

@@ -29,9 +29,8 @@ const sourcePreview = ref<{ file: string; line: number; column?: number } | null
 function applyQueryPreselect(): void {
   const name = route.query.name;
   if (typeof name !== "string" || name.length === 0) return;
-  // Match by workflow name across (app, module). First match wins.
   const found = cache.value?.workflows.find((w) => w.name === name);
-  if (found) selected.value = `${found.app}::${found.module}::${found.name}`;
+  if (found) selected.value = `${found.app}::${found.name}`;
 }
 
 onMounted(applyQueryPreselect);
@@ -45,16 +44,14 @@ const filtered = computed(() => {
     (w) =>
       !q ||
       w.name.toLowerCase().includes(q) ||
-      w.module.toLowerCase().includes(q) ||
       w.app.toLowerCase().includes(q) ||
-      w.subscribesTo.some((e) => e.toLowerCase().includes(q)) ||
-      w.dispatches.some((a) => a.toLowerCase().includes(q)) ||
+      (w.subscribesTo ?? []).some((e) => e.toLowerCase().includes(q)) ||
+      (w.dispatches ?? []).some((a) => a.toLowerCase().includes(q)) ||
       (w.description ?? "").toLowerCase().includes(q),
   );
 });
 
-const key = (w: { app: string; module: string; name: string }) =>
-  `${w.app}::${w.module}::${w.name}`;
+const key = (w: { app: string; name: string }) => `${w.app}::${w.name}`;
 const detail = computed(() => filtered.value.find((w) => key(w) === selected.value) ?? null);
 </script>
 
@@ -80,7 +77,7 @@ const detail = computed(() => filtered.value.find((w) => key(w) === selected.val
 
     <MasterDetail v-else class="flex-1">
       <template #listHeader>
-        <FilterInput v-model="filter" placeholder="filter by name, module, event, action…" />
+        <FilterInput v-model="filter" placeholder="filter by name, app, event, action…" />
       </template>
 
       <template #list>
@@ -99,16 +96,18 @@ const detail = computed(() => filtered.value.find((w) => key(w) === selected.val
               :is="w.public ? Globe : Lock"
               class="w-3 h-3"
               :class="w.public ? 'text-emerald-400' : 'text-zinc-500'"
-              :title="w.public ? 'public — exposed across modules' : 'private — module-internal'"
+              :title="w.public ? 'public — exposed across apps' : 'private — app-internal'"
             />
-            <span class="text-[10px] text-zinc-500">{{ w.app }} · {{ w.module }}</span>
+            <span class="text-[10px] text-zinc-500">{{ w.app }}</span>
           </template>
-          <template v-if="w.description || w.subscribesTo.length > 0" #description>
+          <template v-if="w.description || (w.subscribesTo ?? []).length > 0" #description>
             <div v-if="w.description">{{ w.description }}</div>
-            <div v-if="w.subscribesTo.length > 0" class="text-zinc-600 mt-0.5">
+            <div v-if="(w.subscribesTo ?? []).length > 0" class="text-zinc-600 mt-0.5">
               <span class="text-zinc-500">on</span>
-              {{ w.subscribesTo.slice(0, 2).join(", ") }}
-              <span v-if="w.subscribesTo.length > 2">+{{ w.subscribesTo.length - 2 }}</span>
+              {{ (w.subscribesTo ?? []).slice(0, 2).join(", ") }}
+              <span v-if="(w.subscribesTo ?? []).length > 2">
+                +{{ (w.subscribesTo ?? []).length - 2 }}
+              </span>
             </div>
           </template>
         </ListRow>
@@ -120,7 +119,7 @@ const detail = computed(() => filtered.value.find((w) => key(w) === selected.val
         <div class="p-6 space-y-5" data-testid="workflow-detail">
           <div>
             <div class="text-[10px] uppercase tracking-wide text-zinc-500">
-              {{ detail.app }} · {{ detail.module }}
+              {{ detail.app }}
             </div>
             <h2 class="font-mono text-xl mt-1">{{ detail.name }}</h2>
             <p v-if="detail.description" class="text-sm text-zinc-400 mt-2 max-w-2xl">
@@ -136,12 +135,12 @@ const detail = computed(() => filtered.value.find((w) => key(w) === selected.val
 
           <div class="space-y-3">
             <h3 class="text-xs uppercase tracking-wide text-zinc-500">Listens to</h3>
-            <div v-if="detail.subscribesTo.length === 0" class="text-xs text-zinc-600">
+            <div v-if="(detail.subscribesTo ?? []).length === 0" class="text-xs text-zinc-600">
               No event subscriptions declared.
             </div>
             <div v-else class="space-y-1">
               <button
-                v-for="ev in detail.subscribesTo"
+                v-for="ev in detail.subscribesTo ?? []"
                 :key="ev"
                 type="button"
                 class="flex items-center gap-2 font-mono text-sm text-left hover:text-cyan-300"
@@ -156,12 +155,12 @@ const detail = computed(() => filtered.value.find((w) => key(w) === selected.val
 
           <div class="space-y-3">
             <h3 class="text-xs uppercase tracking-wide text-zinc-500">Dispatches</h3>
-            <div v-if="detail.dispatches.length === 0" class="text-xs text-zinc-600">
+            <div v-if="(detail.dispatches ?? []).length === 0" class="text-xs text-zinc-600">
               Pure observer — no action dispatches.
             </div>
             <div v-else class="space-y-1">
               <button
-                v-for="action in detail.dispatches"
+                v-for="action in detail.dispatches ?? []"
                 :key="action"
                 type="button"
                 class="flex items-center gap-2 font-mono text-sm text-left hover:text-amber-300"
@@ -175,13 +174,7 @@ const detail = computed(() => filtered.value.find((w) => key(w) === selected.val
           </div>
 
           <div v-if="detail.source" class="pt-2">
-            <button
-              type="button"
-              class="inline-flex items-center"
-              @click="sourcePreview = detail.source!"
-            >
-              <SourcePill :source="detail.source" />
-            </button>
+            <SourcePill :source="detail.source" @click="sourcePreview = detail.source!" />
           </div>
         </div>
       </template>

package/src/pages/__tests__/Projections.test.ts

@@ -0,0 +1,90 @@
+/**
+ * Projections page — renders the list from cache and cross-links to
+ * each query that reads the projection.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createRouter, createMemoryHistory } from "vue-router";
+import Projections from "../Projections.vue";
+
+const counterProjection = {
+  name: "counter-total",
+  app: "shop",
+};
+const counterQuery = {
+  name: "counter.get-count",
+  app: "shop",
+  public: false,
+  projection: "counter-total",
+};
+
+beforeEach(() => {
+  globalThis.fetch = vi.fn((url: string | URL) => {
+    const u = String(url);
+    if (u.includes("/__nwire/manifest.json")) {
+      return Promise.resolve(
+        new Response(
+          JSON.stringify({
+            generatedAt: new Date().toISOString(),
+            apps: [],
+            modules: [],
+            actions: [],
+            events: [],
+            actors: [],
+            projections: [counterProjection],
+            queries: [counterQuery],
+            resolvers: [],
+            routes: [],
+            workflows: [],
+            externalCalls: [],
+            inboundWebhooks: [],
+            outboxes: [],
+            inboxes: [],
+            crons: [],
+            hooks: [],
+            plugins: [],
+            bindings: [],
+            graph: { events: [] },
+          }),
+          { status: 200 },
+        ),
+      );
+    }
+    return Promise.resolve(new Response("", { status: 404 }));
+  }) as typeof fetch;
+});
+
+function makeRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: "/projections", name: "projections", component: Projections },
+      { path: "/queries", name: "queries", component: { template: "<div/>" } },
+    ],
+  });
+}
+
+describe("Projections", () => {
+  it("renders projections from the cache", async () => {
+    const router = makeRouter();
+    await router.push("/projections");
+    const wrapper = mount(Projections, { global: { plugins: [router] } });
+    await flushPromises();
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("counter-total");
+    expect(wrapper.find("[data-testid=projections-page]").exists()).toBe(true);
+  });
+
+  it("deep-links via ?name=… and shows linked queries", async () => {
+    const router = makeRouter();
+    await router.push("/projections?name=counter-total");
+    const wrapper = mount(Projections, { global: { plugins: [router] } });
+    await flushPromises();
+    await flushPromises();
+
+    const detail = wrapper.find("[data-testid=projection-detail]");
+    expect(detail.exists()).toBe(true);
+    expect(detail.text()).toContain("counter.get-count");
+  });
+});

package/src/pages/__tests__/Queries.test.ts

@@ -0,0 +1,86 @@
+/**
+ * Queries page — renders the list from cache and cross-links to the
+ * backing projection when the query is projection-form.
+ */
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createRouter, createMemoryHistory } from "vue-router";
+import Queries from "../Queries.vue";
+
+const counterQuery = {
+  name: "counter.get-count",
+  app: "shop",
+  public: true,
+  projection: "counter-total",
+};
+
+beforeEach(() => {
+  globalThis.fetch = vi.fn((url: string | URL) => {
+    const u = String(url);
+    if (u.includes("/__nwire/manifest.json")) {
+      return Promise.resolve(
+        new Response(
+          JSON.stringify({
+            generatedAt: new Date().toISOString(),
+            apps: [],
+            modules: [],
+            actions: [],
+            events: [],
+            actors: [],
+            projections: [],
+            queries: [counterQuery],
+            resolvers: [],
+            routes: [],
+            workflows: [],
+            externalCalls: [],
+            inboundWebhooks: [],
+            outboxes: [],
+            inboxes: [],
+            crons: [],
+            hooks: [],
+            plugins: [],
+            bindings: [],
+            graph: { events: [] },
+          }),
+          { status: 200 },
+        ),
+      );
+    }
+    return Promise.resolve(new Response("", { status: 404 }));
+  }) as typeof fetch;
+});
+
+function makeRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: "/queries", name: "queries", component: Queries },
+      { path: "/projections", name: "projections", component: { template: "<div/>" } },
+    ],
+  });
+}
+
+describe("Queries", () => {
+  it("renders queries from the cache", async () => {
+    const router = makeRouter();
+    await router.push("/queries");
+    const wrapper = mount(Queries, { global: { plugins: [router] } });
+    await flushPromises();
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("counter.get-count");
+    expect(wrapper.find("[data-testid=queries-page]").exists()).toBe(true);
+  });
+
+  it("deep-links via ?name=… and shows the backing projection", async () => {
+    const router = makeRouter();
+    await router.push("/queries?name=counter.get-count");
+    const wrapper = mount(Queries, { global: { plugins: [router] } });
+    await flushPromises();
+    await flushPromises();
+
+    const detail = wrapper.find("[data-testid=query-detail]");
+    expect(detail.exists()).toBe(true);
+    expect(detail.text()).toContain("counter-total");
+  });
+});