@hexclave/next 1.0.13 → 1.0.15

package/src/in-page-ui/base-styles.ts

@@ -0,0 +1,171 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+// Shared design tokens + base reset for Hexclave's in-page UIs (the dev tool
+// and the standalone clickmap overlay). Each feature passes its own scope
+// selector so the two stylesheets never collide, while the tokens stay defined
+// in exactly one place. This module deliberately lives outside both feature
+// folders so either feature can be removed without affecting the other.
+
+export function getInPageUiBaseCSS(scopeSelector: string): string {
+  return `
+  ${scopeSelector} {
+    --sdt-bg: #0a0a0b;
+    --sdt-bg-elevated: #141416;
+    --sdt-bg-hover: #1c1c1f;
+    --sdt-bg-active: #232326;
+    --sdt-bg-subtle: #111113;
+    --sdt-border: #2a2a2e;
+    --sdt-border-subtle: #1e1e22;
+    --sdt-text: #ececef;
+    --sdt-text-secondary: #8b8b93;
+    --sdt-text-tertiary: #5c5c66;
+    --sdt-accent: #6366f1;
+    --sdt-accent-hover: #818cf8;
+    --sdt-accent-muted: rgba(99, 102, 241, 0.15);
+    --sdt-success: #22c55e;
+    --sdt-success-muted: rgba(34, 197, 94, 0.15);
+    --sdt-warning: #eab308;
+    --sdt-warning-muted: rgba(234, 179, 8, 0.15);
+    --sdt-error: #ef4444;
+    --sdt-error-muted: rgba(239, 68, 68, 0.15);
+    --sdt-info: #3b82f6;
+    --sdt-info-muted: rgba(59, 130, 246, 0.15);
+    --sdt-overlay-bg: rgba(17, 17, 19, 0.92);
+    --sdt-radius: 8px;
+    --sdt-radius-sm: 4px;
+    --sdt-radius-lg: 12px;
+    --sdt-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --sdt-font-mono: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
+    --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
+    --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
+
+    all: initial;
+    font-family: var(--sdt-font);
+    color: var(--sdt-text);
+    font-size: 13px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    box-sizing: border-box;
+  }
+
+  ${scopeSelector} *, ${scopeSelector} *::before, ${scopeSelector} *::after {
+    box-sizing: border-box;
+  }
+
+  /* Thin, unobtrusive scrollbars for every scroll container */
+  ${scopeSelector} * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--sdt-border) transparent;
+  }
+
+  ${scopeSelector} *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ${scopeSelector} *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ${scopeSelector} *::-webkit-scrollbar-thumb {
+    background: var(--sdt-border);
+    border-radius: 3px;
+  }
+
+  ${scopeSelector} *::-webkit-scrollbar-thumb:hover {
+    background: var(--sdt-text-tertiary);
+  }
+
+  ${scopeSelector} *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  /* --- Light theme: system preference fallback --- */
+  @media (prefers-color-scheme: light) {
+    ${scopeSelector} {
+      --sdt-bg: #ffffff;
+      --sdt-bg-elevated: #f8f8fa;
+      --sdt-bg-hover: #f0f0f3;
+      --sdt-bg-active: #e8e8ec;
+      --sdt-bg-subtle: #fafafa;
+      --sdt-border: #e0e0e5;
+      --sdt-border-subtle: #eaeaef;
+      --sdt-text: #111113;
+      --sdt-text-secondary: #6b6b73;
+      --sdt-text-tertiary: #9b9ba3;
+      --sdt-accent: #6366f1;
+      --sdt-accent-hover: #4f46e5;
+      --sdt-accent-muted: rgba(99, 102, 241, 0.1);
+      --sdt-success: #16a34a;
+      --sdt-success-muted: rgba(22, 163, 74, 0.1);
+      --sdt-warning: #ca8a04;
+      --sdt-warning-muted: rgba(202, 138, 4, 0.1);
+      --sdt-error: #dc2626;
+      --sdt-error-muted: rgba(220, 38, 38, 0.1);
+      --sdt-info: #2563eb;
+      --sdt-info-muted: rgba(37, 99, 235, 0.1);
+      --sdt-overlay-bg: rgba(255, 255, 255, 0.92);
+      --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
+      --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  /* --- Stack theme explicit overrides (take priority over system preference) --- */
+  html:has(head > [data-stack-theme="light"]) ${scopeSelector} {
+    --sdt-bg: #ffffff;
+    --sdt-bg-elevated: #f8f8fa;
+    --sdt-bg-hover: #f0f0f3;
+    --sdt-bg-active: #e8e8ec;
+    --sdt-bg-subtle: #fafafa;
+    --sdt-border: #e0e0e5;
+    --sdt-border-subtle: #eaeaef;
+    --sdt-text: #111113;
+    --sdt-text-secondary: #6b6b73;
+    --sdt-text-tertiary: #9b9ba3;
+    --sdt-accent: #6366f1;
+    --sdt-accent-hover: #4f46e5;
+    --sdt-accent-muted: rgba(99, 102, 241, 0.1);
+    --sdt-success: #16a34a;
+    --sdt-success-muted: rgba(22, 163, 74, 0.1);
+    --sdt-warning: #ca8a04;
+    --sdt-warning-muted: rgba(202, 138, 4, 0.1);
+    --sdt-error: #dc2626;
+    --sdt-error-muted: rgba(220, 38, 38, 0.1);
+    --sdt-info: #2563eb;
+    --sdt-info-muted: rgba(37, 99, 235, 0.1);
+    --sdt-overlay-bg: rgba(255, 255, 255, 0.92);
+    --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
+    --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
+  }
+
+  html:has(head > [data-stack-theme="dark"]) ${scopeSelector} {
+    --sdt-bg: #0a0a0b;
+    --sdt-bg-elevated: #141416;
+    --sdt-bg-hover: #1c1c1f;
+    --sdt-bg-active: #232326;
+    --sdt-bg-subtle: #111113;
+    --sdt-border: #2a2a2e;
+    --sdt-border-subtle: #1e1e22;
+    --sdt-text: #ececef;
+    --sdt-text-secondary: #8b8b93;
+    --sdt-text-tertiary: #5c5c66;
+    --sdt-accent: #6366f1;
+    --sdt-accent-hover: #818cf8;
+    --sdt-accent-muted: rgba(99, 102, 241, 0.15);
+    --sdt-success: #22c55e;
+    --sdt-success-muted: rgba(34, 197, 94, 0.15);
+    --sdt-warning: #eab308;
+    --sdt-warning-muted: rgba(234, 179, 8, 0.15);
+    --sdt-error: #ef4444;
+    --sdt-error-muted: rgba(239, 68, 68, 0.15);
+    --sdt-info: #3b82f6;
+    --sdt-info-muted: rgba(59, 130, 246, 0.15);
+    --sdt-overlay-bg: rgba(17, 17, 19, 0.92);
+    --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
+    --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
+  }
+`;
+}

package/src/in-page-ui/dom.ts

@@ -0,0 +1,80 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+// Tiny DOM helpers shared by Hexclave's in-page UIs (the dev tool and the
+// standalone clickmap overlay). This module deliberately lives outside both
+// feature folders so either feature can be removed without affecting the other.
+
+export function h<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  attrs?: Record<string, any> | null,
+  ...children: (string | Node | null | undefined)[]
+): HTMLElementTagNameMap[K] {
+  const el = document.createElement(tag);
+  if (attrs) {
+    for (const [k, v] of Object.entries(attrs)) {
+      if (v == null) continue;
+      if (k === 'className') {
+        el.className = v;
+      } else if (k === 'style' && typeof v === 'object') {
+        Object.assign(el.style, v);
+      } else if (k.startsWith('on') && typeof v === 'function') {
+        el.addEventListener(k.slice(2).toLowerCase(), v);
+      } else {
+        el.setAttribute(k, String(v));
+      }
+    }
+  }
+  for (const child of children) {
+    if (child == null) continue;
+    el.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
+  }
+  return el;
+}
+
+export function setHtml(el: HTMLElement, html: string) {
+  el.innerHTML = html;
+}
+
+export function hasAppendChild(value: unknown): value is { appendChild(node: Node): void } {
+  return typeof value === 'object' && value !== null && typeof Reflect.get(value, 'appendChild') === 'function';
+}
+
+export function canMountIntoDom(): boolean {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return false;
+  }
+  if (typeof document.createElement !== 'function') {
+    return false;
+  }
+  return hasAppendChild(Reflect.get(document, 'body'));
+}
+
+// ---------------------------------------------------------------------------
+// Window-global singleton slot, so remounts (e.g. across HMR or multiple app
+// instances) can tear down the previous instance before mounting a new one.
+// ---------------------------------------------------------------------------
+
+export type UiGlobalInstance = {
+  cleanup: () => void;
+};
+
+function isUiGlobalInstance(value: unknown): value is UiGlobalInstance {
+  return typeof value === 'object' && value !== null && typeof Reflect.get(value, 'cleanup') === 'function';
+}
+
+export function getGlobalUiInstance(key: string): UiGlobalInstance | null {
+  if (typeof window === 'undefined') return null;
+  const value: unknown = Reflect.get(window, key);
+  return isUiGlobalInstance(value) ? value : null;
+}
+
+export function setGlobalUiInstance(key: string, instance: UiGlobalInstance | null) {
+  if (typeof window === 'undefined') return;
+  if (instance === null) {
+    Reflect.deleteProperty(window, key);
+  } else {
+    Reflect.set(window, key, instance);
+  }
+}

package/src/lib/hexclave-app/apps/implementations/admin-app-impl.ts

@@ -5,7 +5,7 @@
 import { KnownErrors, HexclaveAdminInterface } from "@hexclave/shared";
 import { getProductionModeErrors } from "@hexclave/shared/dist/helpers/production-mode";
 import { InternalApiKeyCreateCrudResponse } from "@hexclave/shared/dist/interface/admin-interface";
-import type { MetricsResponse, MetricsUserCounts, UserActivityResponse } from "@hexclave/shared/dist/interface/admin-metrics";
+import type { AnalyticsClickmapOptions, AnalyticsClickmapResponse, AnalyticsClickmapTokenResponse, MetricsResponse, MetricsUserCounts, UserActivityResponse } from "@hexclave/shared/dist/interface/admin-metrics";
 import { AnalyticsQueryOptions, AnalyticsQueryResponse } from "@hexclave/shared/dist/interface/crud/analytics";
 import { EmailTemplateCrud } from "@hexclave/shared/dist/interface/crud/email-templates";
 import { InternalApiKeysCrud } from "@hexclave/shared/dist/interface/crud/internal-api-keys";
@@ -1151,6 +1151,28 @@ export class _HexclaveAdminAppImplIncomplete<HasTokenStore extends boolean, Proj
     return await this._interface.queryAnalytics(options);
   }
 
+  async getAnalyticsClickmap(options: AnalyticsClickmapOptions): Promise<AnalyticsClickmapResponse> {
+    return await this._interface.getAnalyticsClickmap({
+      kind: options.kind,
+      member_user_ids: options.memberUserIds,
+      route_path: options.routePath,
+      route_regex: options.routeRegex,
+      url_pattern: options.urlPattern,
+      user_id: options.userId,
+      replay_id: options.replayId,
+      device: options.device,
+      viewport_width_min: options.viewportWidthMin,
+      viewport_width_max: options.viewportWidthMax,
+      sampling: options.sampling,
+      since: options.since,
+      until: options.until,
+    });
+  }
+
+  async createAnalyticsClickmapToken(options: { origin: string }): Promise<AnalyticsClickmapTokenResponse> {
+    return await this._interface.createAnalyticsClickmapToken(options);
+  }
+
   async listSessionReplays(options?: ListSessionReplaysOptions): Promise<ListSessionReplaysResult> {
     const response = await this._interface.listSessionReplays({
       cursor: options?.cursor,

package/src/lib/hexclave-app/apps/implementations/client-app-impl.ts

@@ -70,6 +70,7 @@ import { subscribeSessionRefresh } from "./session-refresh-subscription";
 import { AnalyticsOptions, SessionRecorder, analyticsOptionsFromJson, analyticsOptionsToJson } from "./session-replay";
 
 import { useAsyncCache } from "./common";
+import { mountClickmapOverlay } from "../../../../clickmap";
 import { mountDevTool } from "../../../../dev-tool";
 
 let isReactServer = false;
@@ -702,6 +703,12 @@ export class _HexclaveClientAppImplIncomplete<HasTokenStore extends boolean, Pro
     if (isBrowserLike() && resolvedOptions.devTool !== false) {
       mountDevTool(this as any);
     }
+    if (isBrowserLike()) {
+      // Independent of the dev tool: the clickmap overlay only ever renders
+      // when a dashboard-minted token is handed over, so the listener is
+      // mounted unconditionally (the heavy UI is lazy-loaded on demand).
+      mountClickmapOverlay(this as any);
+    }
   }
 
   protected _initUniqueIdentifier() {

package/src/lib/hexclave-app/apps/implementations/event-tracker.test.ts

@@ -59,6 +59,8 @@ describe("EventTracker", () => {
 
       await advancePastFlush();
 
+      // Dead-click classification marks the buffered $click in place —
+      // exactly one click event either way.
       expect(getSentEventTypes(sentBodies)).toMatchInlineSnapshot(`
         [
           "$page-view",
@@ -70,6 +72,291 @@ describe("EventTracker", () => {
     }
   });
 
+  it("emits a PostHog-style elements_chain plus scaled pointer coords for $click", async () => {
+    vi.useFakeTimers();
+    document.body.innerHTML = `
+      <main>
+        <section class="card panel">
+          <button id="save-btn" data-testid="save" aria-label="Save project">Save changes</button>
+        </section>
+      </main>
+    `;
+
+    const sentBodies: string[] = [];
+    const tracker = new EventTracker({
+      projectId: "internal",
+      sendBatch: async (body) => {
+        sentBodies.push(body);
+        return Result.ok(new Response());
+      },
+    });
+
+    try {
+      tracker.start();
+      const button = document.querySelector("#save-btn");
+      if (button == null) throw new Error("button missing");
+      button.dispatchEvent(new MouseEvent("click", {
+        bubbles: true,
+        clientX: 100,
+        clientY: 200,
+      }));
+
+      await advancePastFlush();
+
+      const payload = JSON.parse(sentBodies[0] ?? "{}") as { events: { event_type: string, data: Record<string, unknown> }[] };
+      const click = payload.events.find((event) => event.event_type === "$click");
+      if (click == null) throw new Error("no $click event captured");
+
+      // elements_chain encodes the target leaf plus a few ancestors. Leaf is
+      // first; segments are `;`-delimited. Assert against substrings rather
+      // than the full string so jsdom layout quirks don't make this flaky.
+      const chain = click.data.elements_chain;
+      expect(typeof chain).toBe("string");
+      expect(chain).toContain('button');
+      expect(chain).toContain('attr__id="save-btn"');
+      expect(chain).toContain('attr__data-testid="save"');
+      expect(chain).toContain('attr__aria-label="Save project"');
+      expect(chain).toContain('text="Save changes"');
+      // Ancestor section is in the chain too.
+      expect(chain).toContain("section");
+
+      // Pre-scaled coords land in clickmap_events.pointer_*. SCALE_FACTOR=16.
+      expect(click.data.x_scaled).toBe(Math.round(100 / 16));
+      expect(click.data.y_scaled).toBe(Math.round(200 / 16));
+      expect(click.data.client_y_scaled).toBe(Math.round(200 / 16));
+      expect(click.data.scale_factor).toBe(16);
+      expect(click.data.pointer_relative_x).toBeCloseTo(100 / window.innerWidth, 4);
+      expect(click.data.pointer_target_fixed).toBe(0);
+
+      // Legacy CSS selector still emitted for back-compat. The builder prefers
+      // data-testid over id, so we assert against that anchor rather than #id.
+      expect(click.data.selector).toContain('data-testid="save"');
+      expect(click.data.tag_name).toBe("button");
+    } finally {
+      tracker.stop();
+    }
+  });
+
+  it("ignores clicks inside the Hexclave dev tool", async () => {
+    vi.useFakeTimers();
+    document.body.innerHTML = `
+      <div id="__hexclave-dev-tool-root">
+        <button>Clickmap toolbar control</button>
+      </div>
+    `;
+
+    const sentBodies: string[] = [];
+    const tracker = new EventTracker({
+      projectId: "internal",
+      sendBatch: async (body) => {
+        sentBodies.push(body);
+        return Result.ok(new Response());
+      },
+    });
+
+    try {
+      tracker.start();
+      document.querySelector("button")?.dispatchEvent(new MouseEvent("click", {
+        bubbles: true,
+        clientX: 100,
+        clientY: 200,
+      }));
+
+      await advancePastFlush();
+
+      expect(getSentEventTypes(sentBodies)).toMatchInlineSnapshot(`
+        [
+          "$page-view",
+        ]
+      `);
+    } finally {
+      tracker.stop();
+    }
+  });
+
+  it("flags pointer_target_fixed when the target sits under a fixed-position ancestor", async () => {
+    vi.useFakeTimers();
+    document.body.innerHTML = `
+      <header style="position: fixed; top: 0">
+        <button id="cta">Sign up</button>
+      </header>
+    `;
+
+    const sentBodies: string[] = [];
+    const tracker = new EventTracker({
+      projectId: "internal",
+      sendBatch: async (body) => {
+        sentBodies.push(body);
+        return Result.ok(new Response());
+      },
+    });
+
+    try {
+      tracker.start();
+      document.querySelector("#cta")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await advancePastFlush();
+
+      const payload = JSON.parse(sentBodies[0] ?? "{}") as { events: { event_type: string, data: Record<string, unknown> }[] };
+      const click = payload.events.find((event) => event.event_type === "$click");
+      expect(click?.data.pointer_target_fixed).toBe(1);
+    } finally {
+      tracker.stop();
+    }
+  });
+
+  it("flags a click with no observable effect as dead on its single $click event", async () => {
+    vi.useFakeTimers();
+    document.body.innerHTML = "<button id=\"dead\">Does nothing</button>";
+
+    const sentBodies: string[] = [];
+    const tracker = new EventTracker({
+      projectId: "internal",
+      sendBatch: async (body) => {
+        sentBodies.push(body);
+        return Result.ok(new Response());
+      },
+    });
+
+    try {
+      tracker.start();
+      const clickAtMs = Date.now();
+      document.querySelector("#dead")?.dispatchEvent(new MouseEvent("click", {
+        bubbles: true,
+        clientX: 10,
+        clientY: 20,
+      }));
+
+      await advancePastFlush();
+
+      const payload = JSON.parse(sentBodies[0] ?? "{}") as { events: { event_type: string, event_at_ms: number, data: Record<string, unknown> }[] };
+      const clicks = payload.events.filter((event) => event.event_type === "$click");
+      expect(clicks).toHaveLength(1);
+      const click = clicks[0];
+
+      // One event per physical click: the buffered $click is marked dead in
+      // place, still timestamped at the original click rather than at
+      // classification time (~3s later).
+      expect(click.data.dead).toBe(1);
+      expect(click.event_at_ms).toBe(clickAtMs);
+    } finally {
+      tracker.stop();
+    }
+  });
+
+  it("does not flag a click as dead when it mutates the DOM", async () => {
+    vi.useFakeTimers();
+    document.body.innerHTML = "<button id=\"live\">Adds content</button><div id=\"out\"></div>";
+
+    const sentBodies: string[] = [];
+    const tracker = new EventTracker({
+      projectId: "internal",
+      sendBatch: async (body) => {
+        sentBodies.push(body);
+        return Result.ok(new Response());
+      },
+    });
+
+    try {
+      tracker.start();
+      const button = document.querySelector("#live");
+      if (button == null) throw new Error("button missing");
+      button.addEventListener("click", () => {
+        document.querySelector("#out")?.appendChild(document.createElement("p"));
+      });
+      button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      // Let the MutationObserver microtask run so the mutation is recorded
+      // before the dead-click sweeps start.
+      await Promise.resolve();
+
+      await advancePastFlush();
+
+      const payload = JSON.parse(sentBodies[0] ?? "{}") as { events: { event_type: string, data: Record<string, unknown> }[] };
+      const clicks = payload.events.filter((event) => event.event_type === "$click");
+      expect(clicks).toHaveLength(1);
+      expect(clicks[0].data.dead).toBeUndefined();
+    } finally {
+      tracker.stop();
+    }
+  });
+
+  it("drains held clicks as alive on pagehide so navigation clicks are never lost", async () => {
+    vi.useFakeTimers();
+    document.body.innerHTML = "<a id=\"nav\" href=\"/pricing\">Pricing</a>";
+
+    const sentBodies: string[] = [];
+    const tracker = new EventTracker({
+      projectId: "internal",
+      sendBatch: async (body) => {
+        sentBodies.push(body);
+        return Result.ok(new Response());
+      },
+    });
+
+    try {
+      tracker.start();
+      const clickAtMs = Date.now();
+      document.querySelector("#nav")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+      // Navigation fires pagehide well before any classification sweep — the
+      // keepalive flush ships the still-unclassified click as a plain (alive)
+      // $click.
+      window.dispatchEvent(new Event("pagehide"));
+      await Promise.resolve();
+      await Promise.resolve();
+
+      const payload = JSON.parse(sentBodies[0] ?? "{}") as { events: { event_type: string, event_at_ms: number, data: Record<string, unknown> }[] };
+      const clicks = payload.events.filter((event) => event.event_type === "$click");
+      expect(clicks).toHaveLength(1);
+      expect(clicks[0].data.dead).toBeUndefined();
+      expect(clicks[0].event_at_ms).toBe(clickAtMs);
+    } finally {
+      tracker.stop();
+    }
+  });
+
+  it("holds an unclassified click out of a flush and ships it on the next one", async () => {
+    vi.useFakeTimers();
+    document.body.innerHTML = "<button id=\"late\">Late click</button>";
+
+    const sentBodies: string[] = [];
+    const tracker = new EventTracker({
+      projectId: "internal",
+      sendBatch: async (body) => {
+        sentBodies.push(body);
+        return Result.ok(new Response());
+      },
+    });
+
+    try {
+      tracker.start();
+      // Click 500ms before the 10s flush tick: classification cannot finish
+      // in time, so the flush must hold the click back rather than send it
+      // unclassified.
+      await vi.advanceTimersByTimeAsync(9_500);
+      document.querySelector("#late")?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await vi.advanceTimersByTimeAsync(500);
+
+      expect(getSentEventTypes(sentBodies)).toMatchInlineSnapshot(`
+        [
+          "$page-view",
+        ]
+      `);
+
+      // By the next flush the sweep has classified it (dead — nothing
+      // observable happened) and it ships marked.
+      await vi.advanceTimersByTimeAsync(10_000);
+      const second = JSON.parse(sentBodies[1] ?? "{}") as { events: { event_type: string, data: Record<string, unknown> }[] };
+      expect(second.events.map((event) => event.event_type)).toMatchInlineSnapshot(`
+        [
+          "$click",
+        ]
+      `);
+      expect(second.events[0].data.dead).toBe(1);
+    } finally {
+      tracker.stop();
+    }
+  });
+
   it("captures client-side navigations when history is exposed as an accessor descriptor", async () => {
     vi.useFakeTimers();