From a1da657dd990a04b7c8452fff433aa75df001896 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 17 Feb 2026 14:07:11 -0800
Subject: [PATCH 01/21] fix replay pausing issue

---
 .../analytics/replays/session-replay-machine.test.ts      | 8 ++++++--
 .../analytics/replays/session-replay-machine.ts           | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/session-replay-machine.test.ts b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/session-replay-machine.test.ts
index 889b7ec320..5b748078a0 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/session-replay-machine.test.ts
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/session-replay-machine.test.ts
@@ -557,16 +557,18 @@ describe("session-replay-machine", () => {
 
   describe("TOGGLE_PLAY_PAUSE", () => {
     it("pauses from playing", () => {
-      const state = twoTabReadyState({ playbackMode: "playing" });
+      const state = twoTabReadyState({ playbackMode: "playing", currentGlobalTimeMsForUi: 2500 });
       const { state: s, effects } = dispatch(state, { type: "TOGGLE_PLAY_PAUSE", nowMs: 1000 });
       expect(s.playbackMode).toBe("paused");
+      expect(s.pausedAtGlobalMs).toBe(2500);
       expect(hasEffect(effects, "pause_all")).toBe(true);
     });
 
     it("pauses from gap_fast_forward", () => {
-      const state = twoTabReadyState({ playbackMode: "gap_fast_forward" });
+      const state = twoTabReadyState({ playbackMode: "gap_fast_forward", currentGlobalTimeMsForUi: 3000 });
       const { state: s } = dispatch(state, { type: "TOGGLE_PLAY_PAUSE", nowMs: 1000 });
       expect(s.playbackMode).toBe("paused");
+      expect(s.pausedAtGlobalMs).toBe(3000);
       expect(s.gapFastForward).toBeNull();
     });
 
@@ -575,9 +577,11 @@ describe("session-replay-machine", () => {
         playbackMode: "buffering",
         bufferingAtGlobalMs: 1000,
         autoResumeAfterBuffering: true,
+        currentGlobalTimeMsForUi: 1500,
       });
       const { state: s } = dispatch(state, { type: "TOGGLE_PLAY_PAUSE", nowMs: 1000 });
       expect(s.playbackMode).toBe("paused");
+      expect(s.pausedAtGlobalMs).toBe(1500);
       expect(s.bufferingAtGlobalMs).toBeNull();
       expect(s.autoResumeAfterBuffering).toBe(false);
     });
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/session-replay-machine.ts b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/session-replay-machine.ts
index 2d3ec80809..30cbff6525 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/session-replay-machine.ts
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/session-replay-machine.ts
@@ -761,6 +761,7 @@ export function replayReducer(state: ReplayState, action: ReplayAction): Reducer
           state: {
             ...state,
             playbackMode: "paused",
+            pausedAtGlobalMs: state.currentGlobalTimeMsForUi,
             gapFastForward: null,
             bufferingAtGlobalMs: null,
             autoResumeAfterBuffering: false,

From 39ca118771d2611dfea4c43173942143fff57534 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 17 Feb 2026 15:20:24 -0800
Subject: [PATCH 02/21] analytics event tracking

---
 apps/backend/scripts/clickhouse-migrations.ts |   2 +
 .../latest/analytics/events/batch/route.tsx   | 102 ++++
 .../latest/session-replays/batch/route.tsx    |  20 +-
 apps/backend/src/lib/session-replays.tsx      |  23 +
 .../api/v1/analytics-events-batch.test.ts     | 435 ++++++++++++++++++
 .../src/interface/client-interface.ts         |  22 +
 .../apps/implementations/client-app-impl.ts   |  21 +
 .../apps/implementations/event-tracker.ts     | 279 +++++++++++
 .../apps/implementations/session-replay.ts    |  10 +-
 .../stack-app/apps/interfaces/client-app.ts   |   1 +
 10 files changed, 892 insertions(+), 23 deletions(-)
 create mode 100644 apps/backend/src/app/api/latest/analytics/events/batch/route.tsx
 create mode 100644 apps/backend/src/lib/session-replays.tsx
 create mode 100644 apps/e2e/tests/backend/endpoints/api/v1/analytics-events-batch.test.ts
 create mode 100644 packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts

diff --git a/apps/backend/scripts/clickhouse-migrations.ts b/apps/backend/scripts/clickhouse-migrations.ts
index 8f3f15c5a0..d94f84baa0 100644
--- a/apps/backend/scripts/clickhouse-migrations.ts
+++ b/apps/backend/scripts/clickhouse-migrations.ts
@@ -20,6 +20,8 @@ export async function runClickhouseMigrations() {
   await client.exec({ query: TOKEN_REFRESH_EVENT_ROW_FORMAT_MUTATION_SQL });
   await client.exec({ query: BACKFILL_REFRESH_TOKEN_ID_COLUMN_SQL });
   await client.exec({ query: SIGN_UP_RULE_TRIGGER_EVENT_ROW_FORMAT_MUTATION_SQL });
+  // Recreate the events view so SELECT * picks up columns added by EVENTS_ADD_REPLAY_COLUMNS_SQL
+  await client.exec({ query: EVENTS_VIEW_SQL });
   const queries = [
     "REVOKE ALL PRIVILEGES ON *.* FROM limited_user;",
     "REVOKE ALL FROM limited_user;",
diff --git a/apps/backend/src/app/api/latest/analytics/events/batch/route.tsx b/apps/backend/src/app/api/latest/analytics/events/batch/route.tsx
new file mode 100644
index 0000000000..bc4e2df581
--- /dev/null
+++ b/apps/backend/src/app/api/latest/analytics/events/batch/route.tsx
@@ -0,0 +1,102 @@
+import { getClickhouseAdminClient } from "@/lib/clickhouse";
+import { findRecentSessionReplay } from "@/lib/session-replays";
+import { getPrismaClientForTenancy } from "@/prisma-client";
+import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
+import { KnownErrors } from "@stackframe/stack-shared";
+import { adaptSchema, clientOrHigherAuthTypeSchema, yupArray, yupMixed, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
+
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+const MAX_EVENTS = 500;
+
+export const POST = createSmartRouteHandler({
+  metadata: {
+    summary: "Upload analytics event batch",
+    description: "Uploads a batch of auto-captured analytics events ($page-view, $click).",
+    tags: ["Analytics Events"],
+    hidden: true,
+  },
+  request: yupObject({
+    auth: yupObject({
+      type: clientOrHigherAuthTypeSchema,
+      tenancy: adaptSchema,
+      user: adaptSchema,
+      refreshTokenId: adaptSchema,
+    }).defined(),
+    body: yupObject({
+      session_replay_segment_id: yupString().defined().matches(UUID_RE, "Invalid session_replay_segment_id"),
+      batch_id: yupString().defined().matches(UUID_RE, "Invalid batch_id"),
+      sent_at_ms: yupNumber().defined().integer().min(0),
+      events: yupArray(
+        yupObject({
+          event_type: yupString().defined().oneOf(["$page-view", "$click"]),
+          event_at_ms: yupNumber().defined().integer().min(0),
+          data: yupMixed().defined(),
+        }).defined(),
+      ).defined().min(1).max(MAX_EVENTS),
+    }).defined(),
+  }),
+  response: yupObject({
+    statusCode: yupNumber().oneOf([200]).defined(),
+    bodyType: yupString().oneOf(["json"]).defined(),
+    body: yupObject({
+      inserted: yupNumber().defined(),
+    }).defined(),
+  }),
+  async handler({ auth, body }) {
+    if (!auth.tenancy.config.apps.installed["analytics"]?.enabled) {
+      return {
+        statusCode: 200,
+        bodyType: "json",
+        body: { inserted: 0 },
+      };
+    }
+    if (!auth.user) {
+      throw new KnownErrors.UserAuthenticationRequired();
+    }
+    if (!auth.refreshTokenId) {
+      throw new StatusError(StatusError.BadRequest, "A refresh token is required for analytics events");
+    }
+
+    const projectId = auth.tenancy.project.id;
+    const branchId = auth.tenancy.branchId;
+    const userId = auth.user.id;
+    const refreshTokenId = auth.refreshTokenId;
+    const tenancyId = auth.tenancy.id;
+
+    const prisma = await getPrismaClientForTenancy(auth.tenancy);
+    const recentSession = await findRecentSessionReplay(prisma, { tenancyId, refreshTokenId });
+
+    const clickhouseClient = getClickhouseAdminClient();
+
+    const rows = body.events.map((event) => ({
+      event_type: event.event_type,
+      event_at: new Date(event.event_at_ms),
+      data: event.data as Record<string, unknown>,
+      project_id: projectId,
+      branch_id: branchId,
+      user_id: userId,
+      team_id: null,
+      refresh_token_id: refreshTokenId,
+      session_replay_id: recentSession?.id ?? null,
+      session_replay_segment_id: body.session_replay_segment_id,
+    }));
+
+    await clickhouseClient.insert({
+      table: "analytics_internal.events",
+      values: rows,
+      format: "JSONEachRow",
+      clickhouse_settings: {
+        date_time_input_format: "best_effort",
+        async_insert: 1,
+      },
+    });
+
+    return {
+      statusCode: 200,
+      bodyType: "json",
+      body: { inserted: body.events.length },
+    };
+  },
+});
diff --git a/apps/backend/src/app/api/latest/session-replays/batch/route.tsx b/apps/backend/src/app/api/latest/session-replays/batch/route.tsx
index 3ec4c6d0cf..e4af4323b8 100644
--- a/apps/backend/src/app/api/latest/session-replays/batch/route.tsx
+++ b/apps/backend/src/app/api/latest/session-replays/batch/route.tsx
@@ -2,6 +2,7 @@ import { getPrismaClientForTenancy } from "@/prisma-client";
 import { uploadBytes } from "@/s3";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
 import { Prisma } from "@/generated/prisma/client";
+import { findRecentSessionReplay } from "@/lib/session-replays";
 import { KnownErrors } from "@stackframe/stack-shared";
 import { adaptSchema, clientOrHigherAuthTypeSchema, yupArray, yupMixed, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
@@ -15,8 +16,6 @@ const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0
 
 const MAX_BODY_BYTES = 5_000_000;
 const MAX_EVENTS = 5_000;
-const SESSION_IDLE_TIMEOUT_MS = 3 * 60 * 1000;
-const MAX_SESSION_DURATION_MS = 12 * 60 * 60 * 1000;
 
 function extractEventTimesMs(events: unknown[], fallbackMs: number) {
   let minTs = Infinity;
@@ -114,22 +113,7 @@ export const POST = createSmartRouteHandler({
     const { firstMs, lastMs } = extractEventTimesMs(body.events, body.sent_at_ms);
 
     const prisma = await getPrismaClientForTenancy(auth.tenancy);
-
-    // Find a recent session replay for this refresh token (temporal grouping).
-    // If the last batch arrived within SESSION_IDLE_TIMEOUT_MS, reuse that replay.
-    // Also enforce a max session duration so replays don't grow indefinitely.
-    const cutoff = new Date(Date.now() - SESSION_IDLE_TIMEOUT_MS);
-    const maxDurationCutoff = new Date(Date.now() - MAX_SESSION_DURATION_MS);
-    const recentSession = await prisma.sessionReplay.findFirst({
-      where: {
-        tenancyId,
-        refreshTokenId,
-        updatedAt: { gte: cutoff },
-        startedAt: { gte: maxDurationCutoff },
-      },
-      orderBy: { updatedAt: "desc" },
-      select: { id: true, startedAt: true, lastEventAt: true },
-    });
+    const recentSession = await findRecentSessionReplay(prisma, { tenancyId, refreshTokenId });
 
     const replayId = recentSession?.id ?? randomUUID();
     const s3Key = `session-replays/${projectId}/${branchId}/${replayId}/${batchId}.json.gz`;
diff --git a/apps/backend/src/lib/session-replays.tsx b/apps/backend/src/lib/session-replays.tsx
new file mode 100644
index 0000000000..e6b653b446
--- /dev/null
+++ b/apps/backend/src/lib/session-replays.tsx
@@ -0,0 +1,23 @@
+import { PrismaClient } from "@/generated/prisma/client";
+import { PrismaClientWithReplica } from "@/prisma-client";
+
+export const SESSION_IDLE_TIMEOUT_MS = 3 * 60 * 1000;
+export const MAX_SESSION_DURATION_MS = 12 * 60 * 60 * 1000;
+
+export async function findRecentSessionReplay(prisma: PrismaClientWithReplica<PrismaClient>, options: {
+  tenancyId: string,
+  refreshTokenId: string,
+}) {
+  const cutoff = new Date(Date.now() - SESSION_IDLE_TIMEOUT_MS);
+  const maxDurationCutoff = new Date(Date.now() - MAX_SESSION_DURATION_MS);
+  return await prisma.sessionReplay.findFirst({
+    where: {
+      tenancyId: options.tenancyId,
+      refreshTokenId: options.refreshTokenId,
+      updatedAt: { gte: cutoff },
+      startedAt: { gte: maxDurationCutoff },
+    },
+    orderBy: { updatedAt: "desc" },
+    select: { id: true, startedAt: true, lastEventAt: true },
+  });
+}
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/analytics-events-batch.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/analytics-events-batch.test.ts
new file mode 100644
index 0000000000..7ec66f7b6a
--- /dev/null
+++ b/apps/e2e/tests/backend/endpoints/api/v1/analytics-events-batch.test.ts
@@ -0,0 +1,435 @@
+import { randomUUID } from "node:crypto";
+import { wait } from "@stackframe/stack-shared/dist/utils/promises";
+import { it } from "../../../../helpers";
+import { Auth, Project, backendContext, niceBackendFetch } from "../../../backend-helpers";
+
+async function uploadEventBatch(options: {
+  sessionReplaySegmentId: string,
+  batchId: string,
+  sentAtMs: number,
+  events: { event_type: string, event_at_ms: number, data: unknown }[],
+}) {
+  return await niceBackendFetch("/api/v1/analytics/events/batch", {
+    method: "POST",
+    accessType: "client",
+    body: {
+      session_replay_segment_id: options.sessionReplaySegmentId,
+      batch_id: options.batchId,
+      sent_at_ms: options.sentAtMs,
+      events: options.events,
+    },
+  });
+}
+
+it("requires a user token", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+  backendContext.set({ userAuth: null });
+
+  const res = await niceBackendFetch("/api/v1/analytics/events/batch", {
+    method: "POST",
+    accessType: "client",
+    body: {
+      session_replay_segment_id: randomUUID(),
+      batch_id: randomUUID(),
+      sent_at_ms: Date.now(),
+      events: [{ event_type: "$page-view", event_at_ms: Date.now(), data: {} }],
+    },
+  });
+
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 401,
+      "body": {
+        "code": "USER_AUTHENTICATION_REQUIRED",
+        "error": "User authentication required for this endpoint.",
+      },
+      "headers": Headers {
+        "x-stack-known-error": "USER_AUTHENTICATION_REQUIRED",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
+});
+
+it("returns 200 no-op when analytics is not enabled", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  // Analytics is disabled by default - do NOT call Project.updateConfig
+  await Auth.Otp.signIn();
+
+  const res = await uploadEventBatch({
+    sessionReplaySegmentId: randomUUID(),
+    batchId: randomUUID(),
+    sentAtMs: Date.now(),
+    events: [{ event_type: "$page-view", event_at_ms: Date.now(), data: {} }],
+  });
+
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": { "inserted": 0 },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
+it("accepts valid $page-view events", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+  await Auth.Otp.signIn();
+
+  const now = Date.now();
+  const res = await uploadEventBatch({
+    sessionReplaySegmentId: randomUUID(),
+    batchId: randomUUID(),
+    sentAtMs: now,
+    events: [
+      {
+        event_type: "$page-view",
+        event_at_ms: now - 100,
+        data: {
+          url: "https://example.com/page",
+          path: "/page",
+          referrer: "",
+          title: "Test Page",
+          entry_type: "initial",
+          viewport_width: 1920,
+          viewport_height: 1080,
+          screen_width: 1920,
+          screen_height: 1080,
+        },
+      },
+      {
+        event_type: "$page-view",
+        event_at_ms: now - 50,
+        data: {
+          url: "https://example.com/other",
+          path: "/other",
+          referrer: "https://example.com/page",
+          title: "Other Page",
+          entry_type: "push",
+          viewport_width: 1920,
+          viewport_height: 1080,
+          screen_width: 1920,
+          screen_height: 1080,
+        },
+      },
+    ],
+  });
+
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": { "inserted": 2 },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
+it("accepts valid $click events", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+  await Auth.Otp.signIn();
+
+  const now = Date.now();
+  const res = await uploadEventBatch({
+    sessionReplaySegmentId: randomUUID(),
+    batchId: randomUUID(),
+    sentAtMs: now,
+    events: [
+      {
+        event_type: "$click",
+        event_at_ms: now - 50,
+        data: {
+          tag_name: "button",
+          text: "Submit",
+          href: null,
+          selector: "div > form > button.submit-btn",
+          x: 100,
+          y: 200,
+          page_x: 100,
+          page_y: 500,
+          viewport_width: 1920,
+          viewport_height: 1080,
+        },
+      },
+    ],
+  });
+
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": { "inserted": 1 },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
+it("rejects empty events array", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+  await Auth.Otp.signIn();
+
+  const res = await uploadEventBatch({
+    sessionReplaySegmentId: randomUUID(),
+    batchId: randomUUID(),
+    sentAtMs: Date.now(),
+    events: [],
+  });
+
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": {
+        "code": "SCHEMA_ERROR",
+        "details": {
+          "message": deindent\`
+            Request validation failed on POST /api/v1/analytics/events/batch:
+              - body.events field must have at least 1 items
+          \`,
+        },
+        "error": deindent\`
+          Request validation failed on POST /api/v1/analytics/events/batch:
+            - body.events field must have at least 1 items
+        \`,
+      },
+      "headers": Headers {
+        "x-stack-known-error": "SCHEMA_ERROR",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
+});
+
+it("rejects too many events (>500)", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+  await Auth.Otp.signIn();
+
+  const tooManyEvents = Array.from({ length: 501 }, (_, i) => ({
+    event_type: "$page-view",
+    event_at_ms: 1_700_000_000_000 + i,
+    data: { url: `https://example.com/page-${i}`, path: `/page-${i}` },
+  }));
+
+  const res = await uploadEventBatch({
+    sessionReplaySegmentId: randomUUID(),
+    batchId: randomUUID(),
+    sentAtMs: 1_700_000_000_100,
+    events: tooManyEvents,
+  });
+
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": {
+        "code": "SCHEMA_ERROR",
+        "details": {
+          "message": deindent\`
+            Request validation failed on POST /api/v1/analytics/events/batch:
+              - body.events field must have less than or equal to 500 items
+          \`,
+        },
+        "error": deindent\`
+          Request validation failed on POST /api/v1/analytics/events/batch:
+            - body.events field must have less than or equal to 500 items
+        \`,
+      },
+      "headers": Headers {
+        "x-stack-known-error": "SCHEMA_ERROR",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
+});
+
+it("rejects invalid session_replay_segment_id", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+  await Auth.Otp.signIn();
+
+  const res = await niceBackendFetch("/api/v1/analytics/events/batch", {
+    method: "POST",
+    accessType: "client",
+    body: {
+      session_replay_segment_id: "not-a-uuid",
+      batch_id: randomUUID(),
+      sent_at_ms: Date.now(),
+      events: [{ event_type: "$page-view", event_at_ms: Date.now(), data: {} }],
+    },
+  });
+
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": {
+        "code": "SCHEMA_ERROR",
+        "details": {
+          "message": deindent\`
+            Request validation failed on POST /api/v1/analytics/events/batch:
+              - Invalid session_replay_segment_id
+          \`,
+        },
+        "error": deindent\`
+          Request validation failed on POST /api/v1/analytics/events/batch:
+            - Invalid session_replay_segment_id
+        \`,
+      },
+      "headers": Headers {
+        "x-stack-known-error": "SCHEMA_ERROR",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
+});
+
+it("rejects invalid batch_id", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+  await Auth.Otp.signIn();
+
+  const res = await niceBackendFetch("/api/v1/analytics/events/batch", {
+    method: "POST",
+    accessType: "client",
+    body: {
+      session_replay_segment_id: randomUUID(),
+      batch_id: "not-a-uuid",
+      sent_at_ms: Date.now(),
+      events: [{ event_type: "$page-view", event_at_ms: Date.now(), data: {} }],
+    },
+  });
+
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": {
+        "code": "SCHEMA_ERROR",
+        "details": {
+          "message": deindent\`
+            Request validation failed on POST /api/v1/analytics/events/batch:
+              - Invalid batch_id
+          \`,
+        },
+        "error": deindent\`
+          Request validation failed on POST /api/v1/analytics/events/batch:
+            - Invalid batch_id
+        \`,
+      },
+      "headers": Headers {
+        "x-stack-known-error": "SCHEMA_ERROR",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
+});
+
+it("rejects invalid event_type", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+  await Auth.Otp.signIn();
+
+  const res = await niceBackendFetch("/api/v1/analytics/events/batch", {
+    method: "POST",
+    accessType: "client",
+    body: {
+      session_replay_segment_id: randomUUID(),
+      batch_id: randomUUID(),
+      sent_at_ms: Date.now(),
+      events: [{ event_type: "$invalid-type", event_at_ms: Date.now(), data: {} }],
+    },
+  });
+
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": {
+        "code": "SCHEMA_ERROR",
+        "details": {
+          "message": deindent\`
+            Request validation failed on POST /api/v1/analytics/events/batch:
+              - body.events[0].event_type must be one of the following values: $page-view, $click
+          \`,
+        },
+        "error": deindent\`
+          Request validation failed on POST /api/v1/analytics/events/batch:
+            - body.events[0].event_type must be one of the following values: $page-view, $click
+        \`,
+      },
+      "headers": Headers {
+        "x-stack-known-error": "SCHEMA_ERROR",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
+});
+
+it("inserted events are queryable via analytics query endpoint", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+  await Auth.Otp.signIn();
+
+  const sessionReplaySegmentId = randomUUID();
+  const now = Date.now();
+
+  const uploadRes = await uploadEventBatch({
+    sessionReplaySegmentId,
+    batchId: randomUUID(),
+    sentAtMs: now,
+    events: [
+      {
+        event_type: "$page-view",
+        event_at_ms: now - 200,
+        data: { url: "https://example.com/test-query", path: "/test-query" },
+      },
+      {
+        event_type: "$click",
+        event_at_ms: now - 100,
+        data: { tag_name: "a", text: "Link", selector: "a.link" },
+      },
+    ],
+  });
+  expect(uploadRes).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": { "inserted": 2 },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+
+  // Retry query because async inserts may have a flush delay
+  let queryRes;
+  for (let attempt = 0; attempt < 15; attempt++) {
+    await wait(500);
+    queryRes = await niceBackendFetch("/api/v1/internal/analytics/query", {
+      method: "POST",
+      accessType: "admin",
+      body: {
+        query: "SELECT event_type, session_replay_segment_id FROM events WHERE session_replay_segment_id = {segId:String} ORDER BY event_at",
+        params: { segId: sessionReplaySegmentId },
+      },
+    });
+    if (queryRes.status === 200 && queryRes.body?.result?.length === 2) {
+      break;
+    }
+  }
+
+  expect(queryRes).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": {
+        "query_id": "<stripped UUID>:main:<stripped UUID>",
+        "result": [
+          {
+            "event_type": "$page-view",
+            "session_replay_segment_id": "<stripped UUID>",
+          },
+          {
+            "event_type": "$click",
+            "session_replay_segment_id": "<stripped UUID>",
+          },
+        ],
+      },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
diff --git a/packages/stack-shared/src/interface/client-interface.ts b/packages/stack-shared/src/interface/client-interface.ts
index 23419b4fcf..11441fefc1 100644
--- a/packages/stack-shared/src/interface/client-interface.ts
+++ b/packages/stack-shared/src/interface/client-interface.ts
@@ -266,6 +266,28 @@ export class StackClientInterface {
     }
   }
 
+  async sendAnalyticsEventBatch(
+    body: string,
+    session: InternalSession | null,
+    options: { keepalive: boolean },
+  ): Promise<Result<Response, Error>> {
+    try {
+      const response = await this.sendClientRequest(
+        "/analytics/events/batch",
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body,
+          keepalive: options.keepalive,
+        },
+        session,
+      );
+      return Result.ok(response);
+    } catch (e) {
+      return Result.error(e instanceof Error ? e : new Error(String(e)));
+    }
+  }
+
   protected async sendClientRequestAndCatchKnownError<E extends typeof KnownErrors[keyof KnownErrors]>(
     path: string,
     requestOptions: RequestInit,
diff --git a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
index 2c9d8e3b44..9c6387c6ce 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
@@ -53,6 +53,7 @@ import { ActiveSession, Auth, BaseUser, CurrentUser, InternalUserExtra, OAuthPro
 import { StackClientApp, StackClientAppConstructorOptions, StackClientAppJson } from "../interfaces/client-app";
 import { _StackAdminAppImplIncomplete } from "./admin-app-impl";
 import { TokenObject, clientVersion, createCache, createCacheBySession, createEmptyTokenStore, getBaseUrl, getDefaultExtraRequestHeaders, getDefaultProjectId, getDefaultPublishableClientKey, getUrls, resolveConstructorOptions } from "./common";
+import { EventTracker } from "./event-tracker";
 import { AnalyticsOptions, SessionRecorder, analyticsOptionsFromJson, analyticsOptionsToJson } from "./session-replay";
 
 // IF_PLATFORM react-like
@@ -98,6 +99,7 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
 
   private readonly _analyticsOptions: AnalyticsOptions | undefined;
   private _sessionRecorder: SessionRecorder | null = null;
+  private _eventTracker: EventTracker | null = null;
 
   private __DEMO_ENABLE_SLIGHT_FETCH_DELAY = false;
   private readonly _ownedAdminApps = new DependenciesMap<[InternalSession, string], _StackAdminAppImplIncomplete<false, string>>();
@@ -451,6 +453,22 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
       }, this._analyticsOptions.replays);
       this._sessionRecorder.start();
     }
+
+    // for now we only track events for internal project
+    if (isBrowserLike() && this.projectId === "internal") {
+      this._eventTracker = new EventTracker({
+        projectId: this.projectId,
+        getAccessToken: async () => {
+          const session = await this._getSession();
+          const tokens = await session.getOrFetchLikelyValidTokens(20_000, 75_000);
+          return tokens?.accessToken.token ?? null;
+        },
+        sendBatch: async (body, opts) => {
+          return await this._interface.sendAnalyticsEventBatch(body, await this._getSession(), opts);
+        },
+      });
+      this._eventTracker.start();
+    }
   }
 
   protected _initUniqueIdentifier() {
@@ -2856,6 +2874,9 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
       sendSessionReplayBatch: async (body: string, options: { keepalive: boolean }) => {
         return await this._interface.sendSessionReplayBatch(body, await this._getSession(), options);
       },
+      sendAnalyticsEventBatch: async (body: string, options: { keepalive: boolean }) => {
+        return await this._interface.sendAnalyticsEventBatch(body, await this._getSession(), options);
+      },
       sendRequest: async (
         path: string,
         requestOptions: RequestInit,
diff --git a/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts b/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts
new file mode 100644
index 0000000000..74ec6d710d
--- /dev/null
+++ b/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts
@@ -0,0 +1,279 @@
+import { isBrowserLike } from "@stackframe/stack-shared/dist/utils/env";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { Result } from "@stackframe/stack-shared/dist/utils/results";
+import { generateUuid } from "./session-replay";
+
+const FLUSH_INTERVAL_MS = 10_000;
+const MAX_EVENTS_PER_BATCH = 50;
+const MAX_APPROX_BYTES_PER_BATCH = 64_000;
+
+const MAX_PREAUTH_BUFFER_EVENTS = 500;
+const MAX_PREAUTH_BUFFER_BYTES = 500_000;
+
+export type EventTrackerDeps = {
+  projectId: string,
+  getAccessToken: () => Promise<string | null>,
+  sendBatch: (body: string, options: { keepalive: boolean }) => Promise<Result<Response, Error>>,
+};
+
+type TrackedEvent = {
+  event_type: "$page-view" | "$click",
+  event_at_ms: number,
+  data: Record<string, unknown>,
+};
+
+export class EventTracker {
+  private _started = false;
+  private _cancelled = false;
+  private _detachListeners: (() => void) | null = null;
+  private _flushTimer: ReturnType<typeof setInterval> | null = null;
+  private _events: TrackedEvent[] = [];
+  private _approxBytes = 0;
+  private _lastKnownAccessToken: string | null = null;
+  private _wasAuthenticated = false;
+  private _lastUrl: string | null = null;
+  private readonly _sessionReplaySegmentId: string;
+  private readonly _deps: EventTrackerDeps;
+
+  private _originalPushState: typeof history.pushState | null = null;
+  private _originalReplaceState: typeof history.replaceState | null = null;
+
+  constructor(deps: EventTrackerDeps) {
+    this._deps = deps;
+    this._sessionReplaySegmentId = generateUuid();
+  }
+
+  start() {
+    if (this._started) return;
+    if (!isBrowserLike()) return;
+    this._started = true;
+
+    this._setupPageViewCapture();
+    this._setupClickCapture();
+    this._setupPageHideListeners();
+
+    this._flushTimer = setInterval(() => this._tick(), FLUSH_INTERVAL_MS);
+  }
+
+  stop() {
+    this._cancelled = true;
+    if (this._flushTimer !== null) {
+      clearInterval(this._flushTimer);
+      this._flushTimer = null;
+    }
+    runAsynchronously(() => this._flush({ keepalive: true }), { noErrorLogging: true });
+    this._teardown();
+  }
+
+  private _pushEvent(event: TrackedEvent) {
+    this._events.push(event);
+    this._approxBytes += JSON.stringify(event).length;
+    if (this._events.length >= MAX_EVENTS_PER_BATCH || this._approxBytes >= MAX_APPROX_BYTES_PER_BATCH) {
+      runAsynchronously(() => this._flush({ keepalive: false }), { noErrorLogging: true });
+    }
+
+    // Cap pre-auth buffer
+    if (!this._lastKnownAccessToken && (this._events.length > MAX_PREAUTH_BUFFER_EVENTS || this._approxBytes > MAX_PREAUTH_BUFFER_BYTES)) {
+      this._events = [];
+      this._approxBytes = 0;
+    }
+  }
+
+  private _capturePageView(entryType: "initial" | "push" | "replace" | "pop") {
+    const url = window.location.href;
+    if (url === this._lastUrl && entryType !== "initial") return;
+    this._lastUrl = url;
+
+    this._pushEvent({
+      event_type: "$page-view",
+      event_at_ms: Date.now(),
+      data: {
+        url,
+        path: window.location.pathname,
+        referrer: document.referrer,
+        title: document.title,
+        entry_type: entryType,
+        viewport_width: window.innerWidth,
+        viewport_height: window.innerHeight,
+        screen_width: window.screen.width,
+        screen_height: window.screen.height,
+      },
+    });
+  }
+
+  private _setupPageViewCapture() {
+    // Fire initial page-view
+    this._capturePageView("initial");
+
+    // Monkey-patch history.pushState
+    this._originalPushState = history.pushState.bind(history);
+    history.pushState = (...args: Parameters<typeof history.pushState>) => {
+      this._originalPushState!(...args);
+      this._capturePageView("push");
+    };
+
+    // Monkey-patch history.replaceState
+    this._originalReplaceState = history.replaceState.bind(history);
+    history.replaceState = (...args: Parameters<typeof history.replaceState>) => {
+      this._originalReplaceState!(...args);
+      this._capturePageView("replace");
+    };
+
+    // Listen for popstate (back/forward navigation)
+    window.addEventListener("popstate", this._onPopState);
+  }
+
+  private readonly _onPopState = () => {
+    this._capturePageView("pop");
+  };
+
+  private _buildSelector(element: Element): string {
+    const parts: string[] = [];
+    let current: Element | null = element;
+    let depth = 0;
+
+    while (current && depth < 5) {
+      let part = current.tagName.toLowerCase();
+      if (current.id) {
+        part += `#${current.id}`;
+        parts.unshift(part);
+        break;
+      }
+      if (current.className && typeof current.className === "string") {
+        const classes = current.className.trim().split(/\s+/).filter(Boolean);
+        if (classes.length > 0) {
+          part += `.${classes.join(".")}`;
+        }
+      }
+      parts.unshift(part);
+      current = current.parentElement;
+      depth++;
+    }
+
+    return parts.join(" > ");
+  }
+
+  private _findNearestAnchorHref(element: Element): string | null {
+    let current: Element | null = element;
+    while (current) {
+      if (current.tagName === "A" && current.hasAttribute("href")) {
+        return current.getAttribute("href");
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+
+  private readonly _onClickCapture = (event: MouseEvent) => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+
+    this._pushEvent({
+      event_type: "$click",
+      event_at_ms: Date.now(),
+      data: {
+        tag_name: target.tagName.toLowerCase(),
+        text: target.textContent?.trim().substring(0, 200) ?? null,
+        href: this._findNearestAnchorHref(target),
+        selector: this._buildSelector(target),
+        x: event.clientX,
+        y: event.clientY,
+        page_x: event.pageX,
+        page_y: event.pageY,
+        viewport_width: window.innerWidth,
+        viewport_height: window.innerHeight,
+      },
+    });
+  };
+
+  private _setupClickCapture() {
+    document.addEventListener("click", this._onClickCapture, { capture: true });
+  }
+
+  private readonly _onPageHide = () => {
+    runAsynchronously(() => this._flush({ keepalive: true }), { noErrorLogging: true });
+  };
+
+  private _setupPageHideListeners() {
+    window.addEventListener("pagehide", this._onPageHide);
+    document.addEventListener("visibilitychange", this._onPageHide);
+    this._detachListeners = () => {
+      window.removeEventListener("pagehide", this._onPageHide);
+      document.removeEventListener("visibilitychange", this._onPageHide);
+    };
+  }
+
+  private _teardown() {
+    if (this._detachListeners) {
+      this._detachListeners();
+      this._detachListeners = null;
+    }
+
+    // Restore history methods
+    if (this._originalPushState) {
+      history.pushState = this._originalPushState;
+      this._originalPushState = null;
+    }
+    if (this._originalReplaceState) {
+      history.replaceState = this._originalReplaceState;
+      this._originalReplaceState = null;
+    }
+
+    window.removeEventListener("popstate", this._onPopState);
+    document.removeEventListener("click", this._onClickCapture, { capture: true });
+
+    this._events = [];
+    this._approxBytes = 0;
+  }
+
+  private async _flush(options: { keepalive: boolean }) {
+    if (!this._lastKnownAccessToken) return;
+    if (this._events.length === 0) return;
+
+    const nowMs = Date.now();
+
+    const batchId = generateUuid();
+    const payload = {
+      session_replay_segment_id: this._sessionReplaySegmentId,
+      batch_id: batchId,
+      sent_at_ms: nowMs,
+      events: this._events,
+    };
+
+    this._events = [];
+    this._approxBytes = 0;
+
+    const res = await this._deps.sendBatch(
+      JSON.stringify(payload),
+      { keepalive: options.keepalive },
+    );
+
+    if (res.status === "error") {
+      console.warn("EventTracker flush failed:", res.error);
+      return;
+    }
+
+    if (!res.data.ok) {
+      console.warn("EventTracker flush failed:", res.data.status, await res.data.text());
+    }
+  }
+
+  private _tick() {
+    if (this._cancelled) return;
+
+    runAsynchronously(async () => {
+      this._lastKnownAccessToken = await this._deps.getAccessToken();
+    }, { noErrorLogging: true });
+
+    const hasAuth = !!this._lastKnownAccessToken;
+    // Clear buffer on logout to prevent cross-user event leakage
+    if (this._wasAuthenticated && !hasAuth) {
+      this._events = [];
+      this._approxBytes = 0;
+    }
+    this._wasAuthenticated = hasAuth;
+    if (hasAuth && this._events.length > 0) {
+      runAsynchronously(() => this._flush({ keepalive: false }), { noErrorLogging: true });
+    }
+  }
+}
diff --git a/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts b/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
index 70bd146c16..e7f0b4db6c 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
@@ -89,13 +89,13 @@ const MAX_APPROX_BYTES_PER_BATCH = 512_000;
 const MAX_PREAUTH_BUFFER_EVENTS = 10_000;
 const MAX_PREAUTH_BUFFER_BYTES = 5_000_000;
 
-type StoredSession = {
+export type StoredSession = {
   session_id: string,
   created_at_ms: number,
   last_activity_ms: number,
 };
 
-function safeParseStoredSession(raw: string | null): StoredSession | null {
+export function safeParseStoredSession(raw: string | null): StoredSession | null {
   if (!raw) return null;
   try {
     const parsed = JSON.parse(raw);
@@ -109,15 +109,15 @@ function safeParseStoredSession(raw: string | null): StoredSession | null {
   }
 }
 
-function makeStorageKey(projectId: string) {
+export function makeStorageKey(projectId: string) {
   return `${LOCAL_STORAGE_PREFIX}:${projectId}`;
 }
 
-function generateUuid() {
+export function generateUuid() {
   return crypto.randomUUID();
 }
 
-function getOrRotateSession(options: { key: string, nowMs: number }): StoredSession {
+export function getOrRotateSession(options: { key: string, nowMs: number }): StoredSession {
   const existing = safeParseStoredSession(localStorage.getItem(options.key));
   if (existing && options.nowMs - existing.last_activity_ms <= IDLE_TTL_MS) {
     return existing;
diff --git a/packages/template/src/lib/stack-app/apps/interfaces/client-app.ts b/packages/template/src/lib/stack-app/apps/interfaces/client-app.ts
index 79006b412e..f2f0910d0f 100644
--- a/packages/template/src/lib/stack-app/apps/interfaces/client-app.ts
+++ b/packages/template/src/lib/stack-app/apps/interfaces/client-app.ts
@@ -101,6 +101,7 @@ export type StackClientApp<HasTokenStore extends boolean = boolean, ProjectId ex
       setCurrentUser(userJsonPromise: Promise<CurrentUserCrud['Client']['Read'] | null>): void,
       getConstructorOptions(): StackClientAppConstructorOptions<HasTokenStore, ProjectId> & { inheritsFrom?: undefined },
       sendSessionReplayBatch(body: string, options: { keepalive: boolean }): Promise<Result<Response, Error>>,
+      sendAnalyticsEventBatch(body: string, options: { keepalive: boolean }): Promise<Result<Response, Error>>,
     },
   }
   & AsyncStoreProperty<"project", [], Project, false>

From f1fde88d6b58f51df60aa7d83fe3340fe1f99aca Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 17 Feb 2026 15:43:31 -0800
Subject: [PATCH 03/21] fix test, remove type cast

---
 .../app/api/latest/analytics/events/batch/route.tsx |  2 +-
 apps/e2e/tests/js/cookies.test.ts                   | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/apps/backend/src/app/api/latest/analytics/events/batch/route.tsx b/apps/backend/src/app/api/latest/analytics/events/batch/route.tsx
index bc4e2df581..c97e207da4 100644
--- a/apps/backend/src/app/api/latest/analytics/events/batch/route.tsx
+++ b/apps/backend/src/app/api/latest/analytics/events/batch/route.tsx
@@ -73,7 +73,7 @@ export const POST = createSmartRouteHandler({
     const rows = body.events.map((event) => ({
       event_type: event.event_type,
       event_at: new Date(event.event_at_ms),
-      data: event.data as Record<string, unknown>,
+      data: event.data,
       project_id: projectId,
       branch_id: branchId,
       user_id: userId,
diff --git a/apps/e2e/tests/js/cookies.test.ts b/apps/e2e/tests/js/cookies.test.ts
index cde4c6a233..820e310795 100644
--- a/apps/e2e/tests/js/cookies.test.ts
+++ b/apps/e2e/tests/js/cookies.test.ts
@@ -17,6 +17,7 @@ type BrowserEnv = {
     hostname: string,
     href: string,
     origin: string,
+    pathname: string,
     protocol: string,
   },
 };
@@ -42,16 +43,27 @@ function setupBrowserCookieEnv(options: BrowserEnvOptions = {}): BrowserEnv {
     hostname: host,
     href: `${protocol}//${host}/`,
     origin: `${protocol}//${host}`,
+    pathname: "/",
     protocol,
   };
 
+  const noop = () => {};
   const fakeWindow = {
     location,
     sessionStorage: fakeSessionStorage,
+    screen: { width: 1920, height: 1080 },
+    innerWidth: 1920,
+    innerHeight: 1080,
+    addEventListener: noop,
+    removeEventListener: noop,
   } as any;
 
   const fakeDocument: any = {
     createElement: () => ({}),
+    referrer: "",
+    title: "",
+    addEventListener: noop,
+    removeEventListener: noop,
   };
   Object.defineProperty(fakeDocument, "cookie", {
     configurable: true,
@@ -76,6 +88,7 @@ function setupBrowserCookieEnv(options: BrowserEnvOptions = {}): BrowserEnv {
   vi.stubGlobal("window", fakeWindow);
   vi.stubGlobal("document", fakeDocument);
   vi.stubGlobal("sessionStorage", fakeSessionStorage);
+  vi.stubGlobal("history", { pushState: noop, replaceState: noop });
 
   return {
     cookieStore,

From fb49d119acbf41d2e9a5e68fe34a7168c7a35534 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 17 Feb 2026 16:17:34 -0800
Subject: [PATCH 04/21] analytics domain override

---
 .../src/interface/client-interface.ts             | 15 +++++++++++++--
 .../apps/implementations/client-app-impl.ts       |  3 ++-
 .../lib/stack-app/apps/implementations/common.ts  |  5 +++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/stack-shared/src/interface/client-interface.ts b/packages/stack-shared/src/interface/client-interface.ts
index 11441fefc1..e2aadd837a 100644
--- a/packages/stack-shared/src/interface/client-interface.ts
+++ b/packages/stack-shared/src/interface/client-interface.ts
@@ -36,6 +36,7 @@ export type ClientInterfaceOptions = {
   clientVersion: string,
   // This is a function instead of a string because it might be different based on the environment (for example client vs server)
   getBaseUrl: () => string,
+  getAnalyticsBaseUrl?: () => string,
   extraRequestHeaders: Record<string, string>,
   projectId: string,
   prepareRequest?: () => Promise<void>,
@@ -60,6 +61,10 @@ export class StackClientInterface {
     return this.options.getBaseUrl() + "/api/v1";
   }
 
+  getAnalyticsApiUrl() {
+    return (this.options.getAnalyticsBaseUrl ?? this.options.getBaseUrl)() + "/api/v1";
+  }
+
   public async runNetworkDiagnostics(session?: InternalSession | null, requestType?: "client" | "server" | "admin") {
     if (this.pendingNetworkDiagnostics) {
       return await this.pendingNetworkDiagnostics;
@@ -224,13 +229,14 @@ export class StackClientInterface {
     requestOptions: RequestInit,
     session: InternalSession | null,
     requestType: "client" | "server" | "admin" = "client",
+    apiUrlOverride?: string,
   ) {
     session ??= this.createSession({
       refreshToken: null,
     });
 
     return await this._networkRetry(
-      () => this.sendClientRequestInner(path, requestOptions, session!, requestType),
+      () => this.sendClientRequestInner(path, requestOptions, session!, requestType, apiUrlOverride),
       session,
       requestType,
     );
@@ -259,6 +265,8 @@ export class StackClientInterface {
           keepalive: options.keepalive,
         },
         session,
+        "client",
+        this.getAnalyticsApiUrl(),
       );
       return Result.ok(response);
     } catch (e) {
@@ -281,6 +289,8 @@ export class StackClientInterface {
           keepalive: options.keepalive,
         },
         session,
+        "client",
+        this.getAnalyticsApiUrl(),
       );
       return Result.ok(response);
     } catch (e) {
@@ -319,6 +329,7 @@ export class StackClientInterface {
     options: RequestInit,
     session: InternalSession,
     requestType: "client" | "server" | "admin",
+    apiUrlOverride?: string,
   ): Promise<Result<Response & {
     usedTokens: {
       accessToken: AccessToken,
@@ -353,7 +364,7 @@ export class StackClientInterface {
     // all requests should be dynamic to prevent Next.js caching
     await this.options.prepareRequest?.();
 
-    let url = this.getApiUrl() + path;
+    let url = (apiUrlOverride ?? this.getApiUrl()) + path;
     if (url.endsWith("/")) {
       url = url.slice(0, -1);
     }
diff --git a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
index 9c6387c6ce..2fc45d7ede 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
@@ -52,7 +52,7 @@ import { EditableTeamMemberProfile, Team, TeamCreateOptions, TeamInvitation, Tea
 import { ActiveSession, Auth, BaseUser, CurrentUser, InternalUserExtra, OAuthProvider, ProjectCurrentUser, SyncedPartialUser, TokenPartialUser, UserExtra, UserUpdateOptions, userUpdateOptionsToCrud, withUserDestructureGuard } from "../../users";
 import { StackClientApp, StackClientAppConstructorOptions, StackClientAppJson } from "../interfaces/client-app";
 import { _StackAdminAppImplIncomplete } from "./admin-app-impl";
-import { TokenObject, clientVersion, createCache, createCacheBySession, createEmptyTokenStore, getBaseUrl, getDefaultExtraRequestHeaders, getDefaultProjectId, getDefaultPublishableClientKey, getUrls, resolveConstructorOptions } from "./common";
+import { TokenObject, clientVersion, createCache, createCacheBySession, createEmptyTokenStore, getAnalyticsBaseUrl, getBaseUrl, getDefaultExtraRequestHeaders, getDefaultProjectId, getDefaultPublishableClientKey, getUrls, resolveConstructorOptions } from "./common";
 import { EventTracker } from "./event-tracker";
 import { AnalyticsOptions, SessionRecorder, analyticsOptionsFromJson, analyticsOptionsToJson } from "./session-replay";
 
@@ -417,6 +417,7 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
     } else {
       this._interface = new StackClientInterface({
         getBaseUrl: () => getBaseUrl(resolvedOptions.baseUrl),
+        getAnalyticsBaseUrl: () => getAnalyticsBaseUrl(getBaseUrl(resolvedOptions.baseUrl)),
         extraRequestHeaders: resolvedOptions.extraRequestHeaders ?? getDefaultExtraRequestHeaders(),
         projectId,
         clientVersion,
diff --git a/packages/template/src/lib/stack-app/apps/implementations/common.ts b/packages/template/src/lib/stack-app/apps/implementations/common.ts
index 1960ab6539..b67e1184e2 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/common.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/common.ts
@@ -144,6 +144,11 @@ export function getBaseUrl(userSpecifiedBaseUrl: string | { browser: string, ser
   return replaceStackPortPrefix(url.endsWith('/') ? url.slice(0, -1) : url);
 }
 export const defaultBaseUrl = "https://api.stack-auth.com";
+export const defaultAnalyticsBaseUrl = "https://r.stack-auth.com";
+
+export function getAnalyticsBaseUrl(regularBaseUrl: string): string {
+  return regularBaseUrl === defaultBaseUrl ? defaultAnalyticsBaseUrl : regularBaseUrl;
+}
 
 export type TokenObject = {
   accessToken: string | null,

From 2aadf87ade82675b096c321c95fcbe9c0674ccc4 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 17 Feb 2026 17:44:01 -0800
Subject: [PATCH 05/21] fix light mode replays page height

---
 .../projects/[projectId]/analytics/replays/page-client.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
index e0a4a3b771..98ff4e60fa 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
@@ -1149,7 +1149,7 @@ export default function PageClient() {
   return (
     <AppEnabledGuard appId="analytics">
       <PageLayout title="Session Replays" fillWidth>
-        <PanelGroup direction="horizontal" className="h-[calc(100vh-180px)] min-h-[520px] rounded-xl border border-border/40 overflow-hidden bg-background">
+        <PanelGroup direction="horizontal" className="!h-[calc(100vh-180px)] min-h-[520px] rounded-xl border border-border/40 overflow-hidden bg-background">
           <Panel defaultSize={25} minSize={16}>
             <div className="h-full flex flex-col">
               <div className="shrink-0 px-3 py-2 border-b border-border/30 flex items-center h-10">

From 97055c9a101b193397859b6bf6fdcbe0b3401d4d Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 17 Feb 2026 18:05:26 -0800
Subject: [PATCH 06/21] known errors for analytics disabled

---
 .../app/api/latest/analytics/events/batch/route.tsx   |  6 +-----
 .../app/api/latest/session-replays/batch/route.tsx    | 11 +----------
 .../endpoints/api/v1/analytics-events-batch.test.ts   | 11 +++--------
 .../backend/endpoints/api/v1/session-replays.test.ts  |  7 +++----
 packages/stack-shared/src/known-errors.tsx            | 11 +++++++++++
 5 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/apps/backend/src/app/api/latest/analytics/events/batch/route.tsx b/apps/backend/src/app/api/latest/analytics/events/batch/route.tsx
index c97e207da4..683b1d8bc7 100644
--- a/apps/backend/src/app/api/latest/analytics/events/batch/route.tsx
+++ b/apps/backend/src/app/api/latest/analytics/events/batch/route.tsx
@@ -46,11 +46,7 @@ export const POST = createSmartRouteHandler({
   }),
   async handler({ auth, body }) {
     if (!auth.tenancy.config.apps.installed["analytics"]?.enabled) {
-      return {
-        statusCode: 200,
-        bodyType: "json",
-        body: { inserted: 0 },
-      };
+      throw new KnownErrors.AnalyticsNotEnabled();
     }
     if (!auth.user) {
       throw new KnownErrors.UserAuthenticationRequired();
diff --git a/apps/backend/src/app/api/latest/session-replays/batch/route.tsx b/apps/backend/src/app/api/latest/session-replays/batch/route.tsx
index e4af4323b8..c9313bec62 100644
--- a/apps/backend/src/app/api/latest/session-replays/batch/route.tsx
+++ b/apps/backend/src/app/api/latest/session-replays/batch/route.tsx
@@ -71,16 +71,7 @@ export const POST = createSmartRouteHandler({
   }),
   async handler({ auth, body }, fullReq) {
     if (!auth.tenancy.config.apps.installed["analytics"]?.enabled) {
-      return {
-        statusCode: 200,
-        bodyType: "json",
-        body: {
-          session_replay_id: "",
-          batch_id: body.batch_id,
-          s3_key: "",
-          deduped: false,
-        },
-      };
+      throw new KnownErrors.AnalyticsNotEnabled();
     }
     if (!auth.user) {
       throw new KnownErrors.UserAuthenticationRequired();
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/analytics-events-batch.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/analytics-events-batch.test.ts
index 7ec66f7b6a..5813cd96d2 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/analytics-events-batch.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/analytics-events-batch.test.ts
@@ -52,7 +52,7 @@ it("requires a user token", async ({ expect }) => {
   `);
 });
 
-it("returns 200 no-op when analytics is not enabled", async ({ expect }) => {
+it("throws error when analytics is not enabled", async ({ expect }) => {
   await Project.createAndSwitch({ config: { magic_link_enabled: true } });
   // Analytics is disabled by default - do NOT call Project.updateConfig
   await Auth.Otp.signIn();
@@ -64,13 +64,8 @@ it("returns 200 no-op when analytics is not enabled", async ({ expect }) => {
     events: [{ event_type: "$page-view", event_at_ms: Date.now(), data: {} }],
   });
 
-  expect(res).toMatchInlineSnapshot(`
-    NiceResponse {
-      "status": 200,
-      "body": { "inserted": 0 },
-      "headers": Headers { <some fields may have been hidden> },
-    }
-  `);
+  expect(res.status).toBe(400);
+  expect(res.body?.code).toBe("ANALYTICS_NOT_ENABLED");
 });
 
 it("accepts valid $page-view events", async ({ expect }) => {
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts
index a01ce8312b..c2ac2fda03 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts
@@ -46,7 +46,7 @@ it("requires a user token", async ({ expect }) => {
   expect(res.status).toBeLessThan(500);
 });
 
-it("returns 200 no-op when analytics is not enabled", async ({ expect }) => {
+it("throws error when analytics is not enabled", async ({ expect }) => {
   await Project.createAndSwitch({ config: { magic_link_enabled: true } });
   // Analytics is disabled by default - do NOT call Project.updateConfig
   await Auth.Otp.signIn();
@@ -64,9 +64,8 @@ it("returns 200 no-op when analytics is not enabled", async ({ expect }) => {
     },
   });
 
-  expect(res.status).toBe(200);
-  expect(res.body?.session_replay_id).toBe("");
-  expect(res.body?.s3_key).toBe("");
+  expect(res.status).toBe(400);
+  expect(res.body?.code).toBe("ANALYTICS_NOT_ENABLED");
 });
 
 it("stores session replay batch metadata and dedupes by (session_replay_id, batch_id)", async ({ expect }) => {
diff --git a/packages/stack-shared/src/known-errors.tsx b/packages/stack-shared/src/known-errors.tsx
index 10b5a42971..bd31d18b55 100644
--- a/packages/stack-shared/src/known-errors.tsx
+++ b/packages/stack-shared/src/known-errors.tsx
@@ -1736,6 +1736,16 @@ const AnalyticsQueryError = createKnownErrorConstructor(
   (json) => [json.error] as const,
 );
 
+const AnalyticsNotEnabled = createKnownErrorConstructor(
+  KnownError,
+  "ANALYTICS_NOT_ENABLED",
+  () => [
+    400,
+    "Analytics is not enabled for this project.",
+  ] as const,
+  () => [] as const,
+);
+
 const DefaultPaymentMethodRequired = createKnownErrorConstructor(
   KnownError,
   "DEFAULT_PAYMENT_METHOD_REQUIRED",
@@ -1900,6 +1910,7 @@ export const KnownErrors = {
   DataVaultStoreHashedKeyDoesNotExist,
   AnalyticsQueryTimeout,
   AnalyticsQueryError,
+  AnalyticsNotEnabled,
 } satisfies Record<string, KnownErrorConstructor<any, any>>;
 
 

From cb17836f2a674af8d5cb319f41c4f8cc3c273bb4 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 17 Feb 2026 18:42:07 -0800
Subject: [PATCH 07/21] working replay event markers

---
 .../analytics/replays/page-client.tsx         | 223 ++++++++++++++----
 1 file changed, 181 insertions(+), 42 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
index 98ff4e60fa..813e1cff3c 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Alert, Button, Dialog, DialogContent, DialogHeader, DialogTitle, Skeleton, Switch, Typography } from "@/components/ui";
+import { Alert, Button, Dialog, DialogContent, DialogHeader, DialogTitle, Skeleton, Switch, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography } from "@/components/ui";
 import { useFromNow } from "@/hooks/use-from-now";
 import {
   getDesiredGlobalOffsetFromPlaybackState,
@@ -16,7 +16,7 @@ import {
 import { cn } from "@/lib/utils";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
 import { stringCompare } from "@stackframe/stack-shared/dist/utils/strings";
-import { ArrowsClockwiseIcon, FastForwardIcon, GearIcon, MonitorPlayIcon, PauseIcon, PlayIcon } from "@phosphor-icons/react";
+import { ArrowsClockwiseIcon, CursorClickIcon, FastForwardIcon, GearIcon, MonitorPlayIcon, PauseIcon, PlayIcon } from "@phosphor-icons/react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AppEnabledGuard } from "../../app-enabled-guard";
@@ -113,6 +113,32 @@ function formatTimelineMs(ms: number) {
   return `${m}:${s.toString().padStart(2, "0")}`;
 }
 
+type TimelineEvent = {
+  eventType: string,
+  eventAtMs: number,
+  data: Record<string, unknown>,
+};
+
+type TimelineMarker = {
+  timeMs: number,
+  eventType: string,
+  label: string,
+};
+
+function formatEventTooltip(event: TimelineEvent): string {
+  const d = event.data;
+  if (event.eventType === "$click") {
+    const tag = (d.tag_name as string) || "element";
+    return `Clicked ${tag}`;
+  }
+  if (event.eventType === "$page-view") {
+    const path = (d.path as string | undefined) ?? (d.url as string | undefined) ?? "/";
+    const truncated = path.length > 30 ? path.slice(0, 27) + "..." : path;
+    return truncated;
+  }
+  return event.eventType;
+}
+
 function DisplayDate({ date }: { date: Date }) {
   const fromNow = useFromNow(date);
   return <span>{fromNow}</span>;
@@ -175,6 +201,7 @@ function Timeline({
   onSeek,
   playerSpeed,
   onSpeedChange,
+  markers,
 }: {
   getCurrentTimeMs: () => number,
   playerIsPlaying: boolean,
@@ -183,6 +210,7 @@ function Timeline({
   onSeek: (timeOffset: number) => void,
   playerSpeed: number,
   onSpeedChange: (speed: number) => void,
+  markers?: TimelineMarker[],
 }) {
   const [currentTime, setCurrentTime] = useState(0);
   const trackRef = useRef<HTMLDivElement | null>(null);
@@ -209,48 +237,84 @@ function Timeline({
   }, [totalTimeMs, onSeek]);
 
   return (
-    <div className="border-t border-border/30 bg-background px-3 py-2 flex items-center gap-3">
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-7 w-7 shrink-0"
-        onClick={onTogglePlayPause}
-      >
-        {playerIsPlaying ? <PauseIcon className="h-4 w-4" /> : <PlayIcon className="h-4 w-4" />}
-      </Button>
-
-      <span className="text-xs text-muted-foreground tabular-nums w-10 shrink-0 text-right">
-        {formatTimelineMs(currentTime)}
-      </span>
+    <TooltipProvider>
+      <div className="border-t border-border/30 bg-background px-3 py-2 flex items-center gap-3">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 shrink-0"
+          onClick={onTogglePlayPause}
+        >
+          {playerIsPlaying ? <PauseIcon className="h-4 w-4" /> : <PlayIcon className="h-4 w-4" />}
+        </Button>
+
+        <span className="text-xs text-muted-foreground tabular-nums w-10 shrink-0 text-right">
+          {formatTimelineMs(currentTime)}
+        </span>
+
+        <div
+          ref={trackRef}
+          onClick={handleTrackClick}
+          className="flex-1 h-5 flex items-center cursor-pointer group"
+        >
+          <div className="w-full h-1.5 rounded-full bg-muted relative overflow-visible">
+            {/* Progress fill (clipped) */}
+            <div className="absolute inset-0 overflow-hidden rounded-full">
+              <div
+                className="absolute inset-y-0 left-0 bg-foreground/60 group-hover:bg-foreground/80 rounded-full transition-colors"
+                style={{ width: `${progress * 100}%` }}
+              />
+            </div>
 
-      <div
-        ref={trackRef}
-        onClick={handleTrackClick}
-        className="flex-1 h-5 flex items-center cursor-pointer group"
-      >
-        <div className="w-full h-1.5 rounded-full bg-muted relative overflow-hidden">
-          <div
-            className="absolute inset-y-0 left-0 bg-foreground/60 group-hover:bg-foreground/80 rounded-full transition-colors"
-            style={{ width: `${progress * 100}%` }}
-          />
+            {/* Event markers */}
+            {markers?.map((marker, i) => {
+              const left = totalTimeMs > 0 ? (marker.timeMs / totalTimeMs) * 100 : 0;
+              if (left < 0 || left > 100) return null;
+              const isClick = marker.eventType === "$click";
+              return (
+                <Tooltip key={i}>
+                  <TooltipTrigger asChild>
+                    <div
+                      className={cn(
+                        "absolute top-1/2 -translate-y-1/2 w-[3px] h-3 rounded-sm cursor-pointer z-10",
+                        "transition-colors",
+                        isClick
+                          ? "bg-blue-500/70 hover:bg-blue-400"
+                          : "bg-emerald-500/70 hover:bg-emerald-400",
+                      )}
+                      style={{ left: `${left}%`, marginLeft: "-1.5px" }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onSeek(marker.timeMs);
+                      }}
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent side="top" className="text-xs max-w-52">
+                    <div>{marker.label}</div>
+                    <div className="text-[10px] opacity-70">{formatTimelineMs(marker.timeMs)}</div>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
         </div>
-      </div>
-
-      <span className="text-xs text-muted-foreground tabular-nums w-10 shrink-0">
-        {formatTimelineMs(totalTimeMs)}
-      </span>
 
-      <select
-        className="h-7 rounded-md border border-border/40 bg-background px-1.5 text-xs"
-        value={playerSpeed}
-        onChange={(e) => onSpeedChange(Number(e.target.value))}
-      >
-        <option value={0.5}>0.5x</option>
-        <option value={1}>1x</option>
-        <option value={2}>2x</option>
-        <option value={4}>4x</option>
-      </select>
-    </div>
+        <span className="text-xs text-muted-foreground tabular-nums w-10 shrink-0">
+          {formatTimelineMs(totalTimeMs)}
+        </span>
+
+        <select
+          className="h-7 rounded-md border border-border/40 bg-background px-1.5 text-xs"
+          value={playerSpeed}
+          onChange={(e) => onSpeedChange(Number(e.target.value))}
+        >
+          <option value={0.5}>0.5x</option>
+          <option value={1}>1x</option>
+          <option value={2}>2x</option>
+          <option value={4}>4x</option>
+        </select>
+      </div>
+    </TooltipProvider>
   );
 }
 
@@ -346,6 +410,8 @@ export default function PageClient() {
   const [loadingInitial, setLoadingInitial] = useState(true);
   const [loadingMore, setLoadingMore] = useState(false);
   const [listError, setListError] = useState<string | null>(null);
+  const [clickCountsByReplayId, setClickCountsByReplayId] = useState<Map<string, number>>(new Map());
+  const [timelineEvents, setTimelineEvents] = useState<TimelineEvent[]>([]);
 
   const listBoxRef = useRef<HTMLDivElement | null>(null);
 
@@ -392,6 +458,28 @@ export default function PageClient() {
     runAsynchronously(() => loadPage(null), { noErrorLogging: true });
   }, [loadPage]);
 
+  useEffect(() => {
+    if (recordings.length === 0) return;
+    const ids = recordings.map(r => r.id);
+    runAsynchronously(async () => {
+      const res = await adminApp.queryAnalytics({
+        query: `SELECT session_replay_id, count() as cnt
+                FROM default.events
+                WHERE event_type = '$click'
+                  AND session_replay_id IN ({ids:Array(String)})
+                GROUP BY session_replay_id`,
+        params: { ids },
+        include_all_branches: false,
+        timeout_ms: 15000,
+      });
+      const map = new Map<string, number>();
+      for (const row of res.result) {
+        map.set(row.session_replay_id as string, Number(row.cnt));
+      }
+      setClickCountsByReplayId(map);
+    }, { noErrorLogging: true });
+  }, [recordings, adminApp]);
+
   const onListScroll = useCallback(() => {
     const el = listBoxRef.current;
     if (!el) return;
@@ -967,6 +1055,41 @@ export default function PageClient() {
     runAsynchronously(() => loadChunksAndDownload(selectedRecordingId), { noErrorLogging: true });
   }, [loadChunksAndDownload, selectedRecordingId, selectedRecording]);
 
+  useEffect(() => {
+    if (!selectedRecordingId) {
+      setTimelineEvents([]);
+      return;
+    }
+    let cancelled = false;
+    setTimelineEvents([]);
+    runAsynchronously(async () => {
+      const res = await adminApp.queryAnalytics({
+        query: `SELECT event_type,
+                       toUnixTimestamp64Milli(event_at) as event_at_ms,
+                       data
+                FROM default.events
+                WHERE session_replay_id = {id:String}
+                  AND event_type IN ('$click', '$page-view')
+                ORDER BY event_at ASC
+                LIMIT 2000`,
+        params: { id: selectedRecordingId },
+        include_all_branches: false,
+        timeout_ms: 15000,
+      });
+      if (cancelled) return;
+      setTimelineEvents(res.result.map((r: any) => ({
+        eventType: r.event_type as string,
+        eventAtMs: Number(r.event_at_ms),
+        data: typeof r.data === "string"
+          ? JSON.parse(r.data)
+          : (r.data ?? {}),
+      })));
+    }, { noErrorLogging: true });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedRecordingId, adminApp]);
+
   useEffect(() => {
     return () => {
       genCounterRef.current += 1;
@@ -1144,6 +1267,15 @@ export default function PageClient() {
 
   const showMainTabLabel = renderableStreamCount > 1;
 
+  const timelineMarkers = useMemo(() => {
+    if (timelineEvents.length === 0 || ms.globalTotalMs <= 0) return [];
+    return timelineEvents.map((e): TimelineMarker => ({
+      timeMs: e.eventAtMs - ms.globalStartTs,
+      eventType: e.eventType,
+      label: formatEventTooltip(e),
+    })).filter(m => m.timeMs >= 0 && m.timeMs <= ms.globalTotalMs);
+  }, [timelineEvents, ms.globalStartTs, ms.globalTotalMs]);
+
   // ---- Rendering ----
 
   return (
@@ -1208,8 +1340,14 @@ export default function PageClient() {
                               {duration}
                             </span>
                           </div>
-                          <div className="text-xs text-muted-foreground">
+                          <div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">
                             <DisplayDate date={r.lastEventAt} />
+                            {(clickCountsByReplayId.get(r.id) ?? 0) > 0 && (
+                              <span className="flex items-center gap-0.5 text-[10px] text-muted-foreground/70">
+                                <CursorClickIcon className="h-3 w-3" />
+                                {clickCountsByReplayId.get(r.id)}
+                              </span>
+                            )}
                           </div>
                         </button>
                       );
@@ -1430,6 +1568,7 @@ export default function PageClient() {
                         onSeek={handleSeek}
                         playerSpeed={ms.settings.playerSpeed}
                         onSpeedChange={updateSpeed}
+                        markers={timelineMarkers}
                       />
                     )}
                   </div>

From 0349c8c92041de6e4ff243c75f9efd1eeb31e32c Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 17 Feb 2026 19:10:31 -0800
Subject: [PATCH 08/21] moved marker, fixed tooltips

---
 .../analytics/replays/page-client.tsx         | 146 ++++++++++--------
 1 file changed, 80 insertions(+), 66 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
index 813e1cff3c..14f503db06 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Alert, Button, Dialog, DialogContent, DialogHeader, DialogTitle, Skeleton, Switch, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography } from "@/components/ui";
+import { Alert, Button, Dialog, DialogContent, DialogHeader, DialogTitle, Skeleton, Switch, Typography } from "@/components/ui";
 import { useFromNow } from "@/hooks/use-from-now";
 import {
   getDesiredGlobalOffsetFromPlaybackState,
@@ -213,6 +213,7 @@ function Timeline({
   markers?: TimelineMarker[],
 }) {
   const [currentTime, setCurrentTime] = useState(0);
+  const [hoveredMarkerIndex, setHoveredMarkerIndex] = useState<number | null>(null);
   const trackRef = useRef<HTMLDivElement | null>(null);
   const rafRef = useRef<number>(0);
 
@@ -236,85 +237,98 @@ function Timeline({
     onSeek(timeOffset);
   }, [totalTimeMs, onSeek]);
 
-  return (
-    <TooltipProvider>
-      <div className="border-t border-border/30 bg-background px-3 py-2 flex items-center gap-3">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7 shrink-0"
-          onClick={onTogglePlayPause}
-        >
-          {playerIsPlaying ? <PauseIcon className="h-4 w-4" /> : <PlayIcon className="h-4 w-4" />}
-        </Button>
+  const hasMarkers = (markers?.length ?? 0) > 0;
+  const hoveredMarker = hoveredMarkerIndex !== null ? markers?.[hoveredMarkerIndex] ?? null : null;
 
-        <span className="text-xs text-muted-foreground tabular-nums w-10 shrink-0 text-right">
-          {formatTimelineMs(currentTime)}
-        </span>
+  return (
+    <div className={cn("border-t border-border/30 bg-background px-3 flex items-center gap-3", hasMarkers ? "py-1.5" : "py-2")}>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7 shrink-0"
+        onClick={onTogglePlayPause}
+      >
+        {playerIsPlaying ? <PauseIcon className="h-4 w-4" /> : <PlayIcon className="h-4 w-4" />}
+      </Button>
 
-        <div
-          ref={trackRef}
-          onClick={handleTrackClick}
-          className="flex-1 h-5 flex items-center cursor-pointer group"
-        >
-          <div className="w-full h-1.5 rounded-full bg-muted relative overflow-visible">
-            {/* Progress fill (clipped) */}
-            <div className="absolute inset-0 overflow-hidden rounded-full">
-              <div
-                className="absolute inset-y-0 left-0 bg-foreground/60 group-hover:bg-foreground/80 rounded-full transition-colors"
-                style={{ width: `${progress * 100}%` }}
-              />
-            </div>
+      <span className="text-xs text-muted-foreground tabular-nums w-10 shrink-0 text-right">
+        {formatTimelineMs(currentTime)}
+      </span>
 
-            {/* Event markers */}
+      <div className="flex-1 flex flex-col justify-center">
+        {/* Event markers lane */}
+        {hasMarkers && (
+          <div className="relative h-3.5 mb-0.5">
             {markers?.map((marker, i) => {
               const left = totalTimeMs > 0 ? (marker.timeMs / totalTimeMs) * 100 : 0;
               if (left < 0 || left > 100) return null;
               const isClick = marker.eventType === "$click";
               return (
-                <Tooltip key={i}>
-                  <TooltipTrigger asChild>
-                    <div
-                      className={cn(
-                        "absolute top-1/2 -translate-y-1/2 w-[3px] h-3 rounded-sm cursor-pointer z-10",
-                        "transition-colors",
-                        isClick
-                          ? "bg-blue-500/70 hover:bg-blue-400"
-                          : "bg-emerald-500/70 hover:bg-emerald-400",
-                      )}
-                      style={{ left: `${left}%`, marginLeft: "-1.5px" }}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onSeek(marker.timeMs);
-                      }}
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent side="top" className="text-xs max-w-52">
-                    <div>{marker.label}</div>
-                    <div className="text-[10px] opacity-70">{formatTimelineMs(marker.timeMs)}</div>
-                  </TooltipContent>
-                </Tooltip>
+                <div
+                  key={i}
+                  className={cn(
+                    "absolute bottom-0 w-[3px] h-3 rounded-sm cursor-pointer",
+                    "transition-colors",
+                    isClick
+                      ? "bg-blue-500/70 hover:bg-blue-400"
+                      : "bg-emerald-500/70 hover:bg-emerald-400",
+                  )}
+                  style={{ left: `${left}%`, marginLeft: "-1.5px" }}
+                  onMouseEnter={() => setHoveredMarkerIndex(i)}
+                  onMouseLeave={() => setHoveredMarkerIndex((prev) => prev === i ? null : prev)}
+                  onClick={() => onSeek(marker.timeMs)}
+                />
               );
             })}
-          </div>
-        </div>
 
-        <span className="text-xs text-muted-foreground tabular-nums w-10 shrink-0">
-          {formatTimelineMs(totalTimeMs)}
-        </span>
+            {/* Custom tooltip */}
+            {hoveredMarker && (() => {
+              const left = totalTimeMs > 0 ? (hoveredMarker.timeMs / totalTimeMs) * 100 : 0;
+              return (
+                <div
+                  className="absolute bottom-full mb-1.5 -translate-x-1/2 pointer-events-none z-50"
+                  style={{ left: `${left}%` }}
+                >
+                  <div className="rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground whitespace-nowrap max-w-52">
+                    <div className="truncate">{hoveredMarker.label}</div>
+                    <div className="text-[10px] opacity-70">{formatTimelineMs(hoveredMarker.timeMs)}</div>
+                  </div>
+                </div>
+              );
+            })()}
+          </div>
+        )}
 
-        <select
-          className="h-7 rounded-md border border-border/40 bg-background px-1.5 text-xs"
-          value={playerSpeed}
-          onChange={(e) => onSpeedChange(Number(e.target.value))}
+        {/* Progress bar track (clickable) */}
+        <div
+          ref={trackRef}
+          onClick={handleTrackClick}
+          className="h-5 flex items-center cursor-pointer group"
         >
-          <option value={0.5}>0.5x</option>
-          <option value={1}>1x</option>
-          <option value={2}>2x</option>
-          <option value={4}>4x</option>
-        </select>
+          <div className="w-full h-1.5 rounded-full bg-muted relative overflow-hidden">
+            <div
+              className="absolute inset-y-0 left-0 bg-foreground/60 group-hover:bg-foreground/80 rounded-full transition-colors"
+              style={{ width: `${progress * 100}%` }}
+            />
+          </div>
+        </div>
       </div>
-    </TooltipProvider>
+
+      <span className="text-xs text-muted-foreground tabular-nums w-10 shrink-0">
+        {formatTimelineMs(totalTimeMs)}
+      </span>
+
+      <select
+        className="h-7 rounded-md border border-border/40 bg-background px-1.5 text-xs"
+        value={playerSpeed}
+        onChange={(e) => onSpeedChange(Number(e.target.value))}
+      >
+        <option value={0.5}>0.5x</option>
+        <option value={1}>1x</option>
+        <option value={2}>2x</option>
+        <option value={4}>4x</option>
+      </select>
+    </div>
   );
 }
 

From e7a050a70e7ac3ce073435e054b3223e60c68142 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 17 Feb 2026 20:26:34 -0800
Subject: [PATCH 09/21] session replay missing snapshot fix

---
 .../apps/implementations/session-replay.ts    | 57 ++++++++++++++-----
 1 file changed, 44 insertions(+), 13 deletions(-)

diff --git a/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts b/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
index e7f0b4db6c..1e90b8e7e5 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
@@ -148,6 +148,9 @@ export class SessionRecorder {
   private _lastPersistActivity = 0;
   private _recording = false;
   private _rrwebModule: typeof import("rrweb") | null = null;
+  private _lastBrowserSessionId: string | null = null;
+  private _takingSnapshot = false;
+  private _flushInProgress = false;
   private _lastKnownAccessToken: string | null = null;
   private _wasAuthenticated = false;
   private readonly _sessionReplaySegmentId: string;
@@ -188,17 +191,24 @@ export class SessionRecorder {
     this._stopCurrentRecording();
   }
 
-  private _persistActivity(nowMs: number) {
+  private _persistActivity(nowMs: number): StoredSession {
     const stored = getOrRotateSession({ key: this._storageKey, nowMs });
-    if (nowMs - this._lastPersistActivity < 5_000) return;
+    if (nowMs - this._lastPersistActivity < 5_000) return stored;
     this._lastPersistActivity = nowMs;
     const updated: StoredSession = { ...stored, last_activity_ms: nowMs };
     localStorage.setItem(this._storageKey, JSON.stringify(updated));
+    return stored;
   }
 
   private async _flush(options: { keepalive: boolean }) {
     if (!this._lastKnownAccessToken) return;
     if (this._events.length === 0) return;
+    // Prevent concurrent in-flight HTTP requests. When a flush is already
+    // in-flight, a second batch could race on the server (both call
+    // findRecentSessionReplay before either upsert commits) and create
+    // duplicate SessionReplay records. Events stay in _events and will be
+    // picked up by the next tick or batch-size check.
+    if (this._flushInProgress) return;
 
     const nowMs = Date.now();
     const stored = getOrRotateSession({ key: this._storageKey, nowMs });
@@ -216,18 +226,23 @@ export class SessionRecorder {
     this._events = [];
     this._approxBytes = 0;
 
-    const res = await this._deps.sendBatch(
-      JSON.stringify(payload),
-      { keepalive: options.keepalive },
-    );
+    this._flushInProgress = true;
+    try {
+      const res = await this._deps.sendBatch(
+        JSON.stringify(payload),
+        { keepalive: options.keepalive },
+      );
 
-    if (res.status === "error") {
-      console.warn("SessionRecorder flush failed:", res.error);
-      return;
-    }
+      if (res.status === "error") {
+        console.warn("SessionRecorder flush failed:", res.error);
+        return;
+      }
 
-    if (!res.data.ok) {
-      console.warn("SessionRecorder flush failed:", res.data.status, await res.data.text());
+      if (!res.data.ok) {
+        console.warn("SessionRecorder flush failed:", res.data.status, await res.data.text());
+      }
+    } finally {
+      this._flushInProgress = false;
     }
   }
 
@@ -250,7 +265,23 @@ export class SessionRecorder {
     this._stopRecording = this._rrwebModule.record({
       emit: (event) => {
         const nowMs = Date.now();
-        this._persistActivity(nowMs);
+        const stored = this._persistActivity(nowMs);
+
+        // Detect session rotation: after 3+ minutes idle, getOrRotateSession
+        // creates a new session ID. We need to inject a FullSnapshot so the
+        // new server-side SessionReplay record is playable.
+        if (this._lastBrowserSessionId === null) {
+          this._lastBrowserSessionId = stored.session_id;
+        } else if (stored.session_id !== this._lastBrowserSessionId && !this._takingSnapshot) {
+          this._lastBrowserSessionId = stored.session_id;
+          // Inject a FullSnapshot for the new session (calls emit synchronously)
+          this._takingSnapshot = true;
+          try {
+            this._rrwebModule!.record.takeFullSnapshot();
+          } finally {
+            this._takingSnapshot = false;
+          }
+        }
 
         this._events.push(event);
         this._approxBytes += JSON.stringify(event).length;

From e545adc3d460e047cd3fc6b6fa1087b3e320fcfd Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Wed, 18 Feb 2026 11:17:01 -0800
Subject: [PATCH 10/21] analytics-anon-users

---
 .../apps/implementations/client-app-impl.ts   | 35 +++++++++++++------
 .../apps/implementations/event-tracker.ts     | 16 +--------
 .../apps/implementations/session-replay.ts    | 16 +--------
 3 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
index 5a6b9b8f6a..6fa9c50e5a 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
@@ -443,14 +443,30 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
     }
 
     this._analyticsOptions = resolvedOptions.analytics;
+    const getAnalyticsAccessToken = async (): Promise<string | null> => {
+      const session = await this._getSession();
+      const tokens = await session.getOrFetchLikelyValidTokens(20_000, 75_000);
+      if (tokens?.accessToken.token) {
+        return tokens.accessToken.token;
+      }
+      // No token — create anonymous user so pre-login events aren't lost
+      if (this._hasPersistentTokenStore()) {
+        try {
+          await this._signUpAnonymously();
+          const retrySession = await this._getSession();
+          const retryTokens = await retrySession.getOrFetchLikelyValidTokens(20_000, 75_000);
+          return retryTokens?.accessToken.token ?? null;
+        } catch {
+          return null;
+        }
+      }
+      return null;
+    };
+
     if (isBrowserLike() && this._analyticsOptions?.replays?.enabled === true) {
       this._sessionRecorder = new SessionRecorder({
         projectId: this.projectId,
-        getAccessToken: async () => {
-          const session = await this._getSession();
-          const tokens = await session.getOrFetchLikelyValidTokens(20_000, 75_000);
-          return tokens?.accessToken.token ?? null;
-        },
+        getAccessToken: getAnalyticsAccessToken,
         sendBatch: async (body, opts) => {
           return await this._interface.sendSessionReplayBatch(body, await this._getSession(), opts);
         },
@@ -462,11 +478,7 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
     if (isBrowserLike() && this.projectId === "internal") {
       this._eventTracker = new EventTracker({
         projectId: this.projectId,
-        getAccessToken: async () => {
-          const session = await this._getSession();
-          const tokens = await session.getOrFetchLikelyValidTokens(20_000, 75_000);
-          return tokens?.accessToken.token ?? null;
-        },
+        getAccessToken: getAnalyticsAccessToken,
         sendBatch: async (body, opts) => {
           return await this._interface.sendAnalyticsEventBatch(body, await this._getSession(), opts);
         },
@@ -2204,7 +2216,8 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
         case undefined:
         case "anonymous-if-exists[deprecated]":
         case "return-null": {
-          // do nothing
+          crud = null;
+          break;
         }
       }
     }
diff --git a/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts b/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts
index 74ec6d710d..e17d39f89b 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts
@@ -7,9 +7,6 @@ const FLUSH_INTERVAL_MS = 10_000;
 const MAX_EVENTS_PER_BATCH = 50;
 const MAX_APPROX_BYTES_PER_BATCH = 64_000;
 
-const MAX_PREAUTH_BUFFER_EVENTS = 500;
-const MAX_PREAUTH_BUFFER_BYTES = 500_000;
-
 export type EventTrackerDeps = {
   projectId: string,
   getAccessToken: () => Promise<string | null>,
@@ -30,7 +27,6 @@ export class EventTracker {
   private _events: TrackedEvent[] = [];
   private _approxBytes = 0;
   private _lastKnownAccessToken: string | null = null;
-  private _wasAuthenticated = false;
   private _lastUrl: string | null = null;
   private readonly _sessionReplaySegmentId: string;
   private readonly _deps: EventTrackerDeps;
@@ -72,11 +68,7 @@ export class EventTracker {
       runAsynchronously(() => this._flush({ keepalive: false }), { noErrorLogging: true });
     }
 
-    // Cap pre-auth buffer
-    if (!this._lastKnownAccessToken && (this._events.length > MAX_PREAUTH_BUFFER_EVENTS || this._approxBytes > MAX_PREAUTH_BUFFER_BYTES)) {
-      this._events = [];
-      this._approxBytes = 0;
-    }
+
   }
 
   private _capturePageView(entryType: "initial" | "push" | "replace" | "pop") {
@@ -266,12 +258,6 @@ export class EventTracker {
     }, { noErrorLogging: true });
 
     const hasAuth = !!this._lastKnownAccessToken;
-    // Clear buffer on logout to prevent cross-user event leakage
-    if (this._wasAuthenticated && !hasAuth) {
-      this._events = [];
-      this._approxBytes = 0;
-    }
-    this._wasAuthenticated = hasAuth;
     if (hasAuth && this._events.length > 0) {
       runAsynchronously(() => this._flush({ keepalive: false }), { noErrorLogging: true });
     }
diff --git a/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts b/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
index 1e90b8e7e5..f4ac43fa78 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
@@ -86,9 +86,6 @@ const FLUSH_INTERVAL_MS = 5_000;
 const MAX_EVENTS_PER_BATCH = 200;
 const MAX_APPROX_BYTES_PER_BATCH = 512_000;
 
-const MAX_PREAUTH_BUFFER_EVENTS = 10_000;
-const MAX_PREAUTH_BUFFER_BYTES = 5_000_000;
-
 export type StoredSession = {
   session_id: string,
   created_at_ms: number,
@@ -152,7 +149,6 @@ export class SessionRecorder {
   private _takingSnapshot = false;
   private _flushInProgress = false;
   private _lastKnownAccessToken: string | null = null;
-  private _wasAuthenticated = false;
   private readonly _sessionReplaySegmentId: string;
   private readonly _storageKey: string;
   private readonly _deps: SessionRecorderDeps;
@@ -289,11 +285,7 @@ export class SessionRecorder {
           runAsynchronously(() => this._flush({ keepalive: false }), { noErrorLogging: true });
         }
 
-        // Cap pre-auth buffer to prevent unbounded memory growth
-        if (!this._lastKnownAccessToken && (this._events.length > MAX_PREAUTH_BUFFER_EVENTS || this._approxBytes > MAX_PREAUTH_BUFFER_BYTES)) {
-          this._events = [];
-          this._approxBytes = 0;
-        }
+
       },
       maskAllInputs: this._replayOptions.maskAllInputs ?? true,
       ...(this._replayOptions.blockClass !== undefined ? { blockClass: this._replayOptions.blockClass } : {}),
@@ -336,12 +328,6 @@ export class SessionRecorder {
     }, { noErrorLogging: true });
 
     const hasAuth = !!this._lastKnownAccessToken;
-    // Clear buffer on logout to prevent cross-user event leakage
-    if (this._wasAuthenticated && !hasAuth) {
-      this._events = [];
-      this._approxBytes = 0;
-    }
-    this._wasAuthenticated = hasAuth;
     if (hasAuth && this._events.length > 0) {
       runAsynchronously(() => this._flush({ keepalive: false }), { noErrorLogging: true });
     }

From 644f34182b8869cdb8e93d9d3f88de2929d9f9f2 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Wed, 18 Feb 2026 11:47:11 -0800
Subject: [PATCH 11/21] clear buffer on sign out

---
 .../lib/stack-app/apps/implementations/client-app-impl.ts  | 4 ++++
 .../lib/stack-app/apps/implementations/event-tracker.ts    | 7 +++++--
 .../lib/stack-app/apps/implementations/session-replay.ts   | 7 +++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
index 6fa9c50e5a..c2965251b5 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
@@ -2715,6 +2715,10 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
   }
 
   protected async _signOut(session: InternalSession, options?: { redirectUrl?: URL | string }): Promise<void> {
+    // Clear analytics buffers before sign-out to prevent cross-user event leakage
+    this._eventTracker?.clearBuffer();
+    this._sessionRecorder?.clearBuffer();
+
     await storeLock.withWriteLock(async () => {
       await this._interface.signOut(session);
       if (options?.redirectUrl) {
diff --git a/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts b/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts
index e17d39f89b..bf48d4b23e 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts
@@ -61,14 +61,17 @@ export class EventTracker {
     this._teardown();
   }
 
+  clearBuffer() {
+    this._events = [];
+    this._approxBytes = 0;
+  }
+
   private _pushEvent(event: TrackedEvent) {
     this._events.push(event);
     this._approxBytes += JSON.stringify(event).length;
     if (this._events.length >= MAX_EVENTS_PER_BATCH || this._approxBytes >= MAX_APPROX_BYTES_PER_BATCH) {
       runAsynchronously(() => this._flush({ keepalive: false }), { noErrorLogging: true });
     }
-
-
   }
 
   private _capturePageView(entryType: "initial" | "push" | "replace" | "pop") {
diff --git a/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts b/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
index f4ac43fa78..2eb497bca6 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
@@ -187,6 +187,11 @@ export class SessionRecorder {
     this._stopCurrentRecording();
   }
 
+  clearBuffer() {
+    this._events = [];
+    this._approxBytes = 0;
+  }
+
   private _persistActivity(nowMs: number): StoredSession {
     const stored = getOrRotateSession({ key: this._storageKey, nowMs });
     if (nowMs - this._lastPersistActivity < 5_000) return stored;
@@ -284,8 +289,6 @@ export class SessionRecorder {
         if (this._events.length >= MAX_EVENTS_PER_BATCH || this._approxBytes >= MAX_APPROX_BYTES_PER_BATCH) {
           runAsynchronously(() => this._flush({ keepalive: false }), { noErrorLogging: true });
         }
-
-
       },
       maskAllInputs: this._replayOptions.maskAllInputs ?? true,
       ...(this._replayOptions.blockClass !== undefined ? { blockClass: this._replayOptions.blockClass } : {}),

From e10cf165ee732a51270b7cc7093a62dcd53e4f5e Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Wed, 18 Feb 2026 17:44:30 -0800
Subject: [PATCH 12/21] analytics replay filters

---
 .../latest/internal/session-replays/route.tsx | 222 +++++++---
 .../analytics/replays/page-client.tsx         | 396 +++++++++++++++++-
 .../data-table/user-search-picker.tsx         | 103 +++++
 .../src/interface/admin-interface.ts          |   7 +
 .../src/interface/crud/session-replays.ts     |   7 +
 .../apps/implementations/admin-app-impl.ts    |   7 +
 .../lib/stack-app/session-replays/index.ts    |   7 +
 7 files changed, 676 insertions(+), 73 deletions(-)
 create mode 100644 apps/dashboard/src/components/data-table/user-search-picker.tsx

diff --git a/apps/backend/src/app/api/latest/internal/session-replays/route.tsx b/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
index 45f45290b6..647ec16fce 100644
--- a/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
+++ b/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
@@ -1,11 +1,65 @@
+import { getClickhouseAdminClient } from "@/lib/clickhouse";
+import { BooleanTrue, Prisma } from "@/generated/prisma/client";
 import { getPrismaClientForTenancy } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
-import { BooleanTrue, Prisma } from "@/generated/prisma/client";
 import { KnownErrors } from "@stackframe/stack-shared";
 import { adaptSchema, adminAuthTypeSchema, yupArray, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
 
 const DEFAULT_LIMIT = 50;
 const MAX_LIMIT = 200;
+const DURATION_OVERFETCH_MULTIPLIER = 5;
+
+function parseCsvIds(raw: string | undefined): string[] {
+  if (!raw) return [];
+  return raw.split(",").map(s => s.trim()).filter(Boolean);
+}
+
+function parseNonNegativeInt(name: string, raw: string | undefined): number | null {
+  if (!raw) return null;
+  const value = Number(raw);
+  if (!Number.isInteger(value) || value < 0) {
+    throw new StatusError(StatusError.BadRequest, `${name} must be a non-negative integer`);
+  }
+  return value;
+}
+
+function parseMillis(name: string, raw: string | undefined): Date | null {
+  if (!raw) return null;
+  const value = Number(raw);
+  if (!Number.isFinite(value) || value < 0) {
+    throw new StatusError(StatusError.BadRequest, `${name} must be a non-negative timestamp in milliseconds`);
+  }
+  return new Date(value);
+}
+
+async function loadClickQualifiedReplayIds(options: {
+  projectId: string,
+  branchId: string,
+  clickCountMin: number,
+}): Promise<string[]> {
+  const clickhouseClient = getClickhouseAdminClient();
+  const result = await clickhouseClient.query({
+    query: `
+      SELECT session_replay_id
+      FROM analytics_internal.events
+      WHERE project_id = {projectId:String}
+        AND branch_id = {branchId:String}
+        AND event_type = '$click'
+      GROUP BY session_replay_id
+      HAVING count() >= {clickCountMin:UInt64}
+    `,
+    query_params: {
+      projectId: options.projectId,
+      branchId: options.branchId,
+      clickCountMin: options.clickCountMin,
+    },
+    format: "JSONEachRow",
+  });
+
+  const rows = await result.json() as Array<{ session_replay_id: string }>;
+  return rows.map((row) => row.session_replay_id);
+}
 
 export const GET = createSmartRouteHandler({
   metadata: { hidden: true },
@@ -17,6 +71,13 @@ export const GET = createSmartRouteHandler({
     query: yupObject({
       cursor: yupString().optional(),
       limit: yupString().optional(),
+      user_ids: yupString().optional(),
+      team_ids: yupString().optional(),
+      duration_ms_min: yupString().optional(),
+      duration_ms_max: yupString().optional(),
+      last_event_at_from_millis: yupString().optional(),
+      last_event_at_to_millis: yupString().optional(),
+      click_count_min: yupString().optional(),
     }).optional(),
   }),
   response: yupObject({
@@ -47,64 +108,134 @@ export const GET = createSmartRouteHandler({
     const parsedLimit = Number.parseInt(rawLimit, 10);
     const limit = Math.max(1, Math.min(MAX_LIMIT, Number.isFinite(parsedLimit) ? parsedLimit : DEFAULT_LIMIT));
 
+    const userIdsFilter = parseCsvIds(query.user_ids);
+    const teamIdsFilter = parseCsvIds(query.team_ids);
+    const durationMsMin = parseNonNegativeInt("duration_ms_min", query.duration_ms_min);
+    const durationMsMax = parseNonNegativeInt("duration_ms_max", query.duration_ms_max);
+    const clickCountMin = parseNonNegativeInt("click_count_min", query.click_count_min);
+    const lastEventAtFrom = parseMillis("last_event_at_from_millis", query.last_event_at_from_millis);
+    const lastEventAtTo = parseMillis("last_event_at_to_millis", query.last_event_at_to_millis);
+
+    if (durationMsMin !== null && durationMsMax !== null && durationMsMin > durationMsMax) {
+      throw new StatusError(StatusError.BadRequest, "duration_ms_min must be less than or equal to duration_ms_max");
+    }
+    if (lastEventAtFrom && lastEventAtTo && lastEventAtFrom.getTime() > lastEventAtTo.getTime()) {
+      throw new StatusError(StatusError.BadRequest, "last_event_at_from_millis must be less than or equal to last_event_at_to_millis");
+    }
+
+    // If click filter is active, get qualifying replay IDs from ClickHouse in one query
+    const clickQualifiedIds = clickCountMin && clickCountMin > 0
+      ? await loadClickQualifiedReplayIds({
+        projectId: auth.tenancy.project.id,
+        branchId: auth.tenancy.branchId,
+        clickCountMin,
+      })
+      : null;
+
+    if (clickQualifiedIds && clickQualifiedIds.length === 0) {
+      return {
+        statusCode: 200,
+        bodyType: "json",
+        body: { items: [], pagination: { next_cursor: null } },
+      };
+    }
+
+    // Build WHERE with all filters that can be pushed to the DB
+    const baseWhere: Prisma.SessionReplayWhereInput = {
+      tenancyId: auth.tenancy.id,
+      ...(userIdsFilter.length > 0 ? { projectUserId: { in: userIdsFilter } } : {}),
+      ...((lastEventAtFrom || lastEventAtTo) ? {
+        lastEventAt: {
+          ...(lastEventAtFrom ? { gte: lastEventAtFrom } : {}),
+          ...(lastEventAtTo ? { lte: lastEventAtTo } : {}),
+        },
+      } : {}),
+      ...(teamIdsFilter.length > 0 ? {
+        projectUser: {
+          teamMembers: {
+            some: {
+              teamId: { in: teamIdsFilter },
+            },
+          },
+        },
+      } : {}),
+      ...(clickQualifiedIds ? { id: { in: clickQualifiedIds } } : {}),
+    };
+
+    // Handle cursor-based pagination
     const cursorId = query.cursor;
-    let cursorPivot: { lastEventAt: Date } | null = null;
+    let cursorWhere: Prisma.SessionReplayWhereInput = {};
     if (cursorId) {
-      cursorPivot = await prisma.sessionReplay.findUnique({
+      const cursorPivot = await prisma.sessionReplay.findUnique({
         where: { tenancyId_id: { tenancyId: auth.tenancy.id, id: cursorId } },
-        select: { lastEventAt: true },
+        select: { id: true, lastEventAt: true },
       });
       if (!cursorPivot) {
         throw new KnownErrors.ItemNotFound(cursorId);
       }
+      cursorWhere = {
+        OR: [
+          { lastEventAt: { lt: cursorPivot.lastEventAt } },
+          { AND: [{ lastEventAt: { equals: cursorPivot.lastEventAt } }, { id: { lt: cursorId } }] },
+        ],
+      };
     }
 
-    const where: Prisma.SessionReplayWhereInput = cursorId && cursorPivot ? {
-      OR: [
-        { lastEventAt: { lt: cursorPivot.lastEventAt } },
-        { AND: [{ lastEventAt: { equals: cursorPivot.lastEventAt } }, { id: { lt: cursorId } }] },
-      ],
-    } : {};
+    const finalWhere: Prisma.SessionReplayWhereInput = cursorId
+      ? { AND: [baseWhere, cursorWhere] }
+      : baseWhere;
+
+    // Overfetch when duration filter is active since it must be applied in memory
+    const hasDurationFilter = durationMsMin !== null || durationMsMax !== null;
+    const fetchSize = hasDurationFilter
+      ? Math.min((limit + 1) * DURATION_OVERFETCH_MULTIPLIER, MAX_LIMIT * DURATION_OVERFETCH_MULTIPLIER)
+      : limit + 1;
 
     const sessions = await prisma.sessionReplay.findMany({
-      where: { tenancyId: auth.tenancy.id, ...where },
+      where: finalWhere,
       orderBy: [{ lastEventAt: "desc" }, { id: "desc" }],
-      take: limit + 1,
+      take: fetchSize,
       select: {
         id: true,
         projectUserId: true,
         startedAt: true,
         lastEventAt: true,
+        projectUser: {
+          select: {
+            displayName: true,
+            contactChannels: {
+              where: { type: "EMAIL", isPrimary: BooleanTrue.TRUE },
+              select: { value: true },
+              take: 1,
+            },
+          },
+        },
       },
     });
 
-    const hasMore = sessions.length > limit;
-    const page = hasMore ? sessions.slice(0, limit) : sessions;
-    const nextCursor = hasMore ? page[page.length - 1]!.id : null;
+    // Apply duration filter in memory (only filter that can't be pushed to the DB)
+    const filtered = hasDurationFilter
+      ? sessions.filter((row) => {
+        const durationMs = row.lastEventAt.getTime() - row.startedAt.getTime();
+        if (durationMsMin !== null && durationMs < durationMsMin) return false;
+        if (durationMsMax !== null && durationMs > durationMsMax) return false;
+        return true;
+      })
+      : sessions;
 
-    const sessionIds = page.map(s => s.id);
-    const userIds = [...new Set(page.map(s => s.projectUserId))];
+    const hasMore = filtered.length > limit || (hasDurationFilter && sessions.length === fetchSize);
+    const page = filtered.slice(0, limit);
+    const nextCursor = hasMore && page.length > 0 ? page[page.length - 1]!.id : null;
 
-    const [chunkAggs, users] = await Promise.all([
-      sessionIds.length ? prisma.sessionReplayChunk.groupBy({
+    const sessionIds = page.map((row) => row.id);
+    const chunkAggs = sessionIds.length
+      ? await prisma.sessionReplayChunk.groupBy({
         by: ["sessionReplayId"],
         where: { tenancyId: auth.tenancy.id, sessionReplayId: { in: sessionIds } },
         _count: { _all: true },
         _sum: { eventCount: true },
-      }) : Promise.resolve([] as Array<{ sessionReplayId: string, _count: { _all: number }, _sum: { eventCount: number | null } }>),
-      userIds.length ? prisma.projectUser.findMany({
-        where: { tenancyId: auth.tenancy.id, projectUserId: { in: userIds } },
-        select: {
-          projectUserId: true,
-          displayName: true,
-          contactChannels: {
-            where: { type: "EMAIL", isPrimary: BooleanTrue.TRUE },
-            select: { value: true },
-            take: 1,
-          },
-        },
-      }) : Promise.resolve([] as Array<{ projectUserId: string, displayName: string | null, contactChannels: Array<{ value: string }> }>),
-    ]);
+      })
+      : [];
 
     const aggBySessionId = new Map<string, { chunkCount: number, eventCount: number }>();
     for (const a of chunkAggs) {
@@ -114,30 +245,21 @@ export const GET = createSmartRouteHandler({
       });
     }
 
-    const userById = new Map<string, { displayName: string | null, primaryEmail: string | null }>();
-    for (const u of users) {
-      userById.set(u.projectUserId, {
-        displayName: u.displayName,
-        primaryEmail: u.contactChannels[0]?.value ?? null,
-      });
-    }
-
     return {
       statusCode: 200,
       bodyType: "json",
       body: {
-        items: page.map((s) => {
-          const user = userById.get(s.projectUserId);
-          const agg = aggBySessionId.get(s.id) ?? { chunkCount: 0, eventCount: 0 };
+        items: page.map((row) => {
+          const agg = aggBySessionId.get(row.id) ?? { chunkCount: 0, eventCount: 0 };
           return {
-            id: s.id,
+            id: row.id,
             project_user: {
-              id: s.projectUserId,
-              display_name: user?.displayName ?? null,
-              primary_email: user?.primaryEmail ?? null,
+              id: row.projectUserId,
+              display_name: row.projectUser?.displayName ?? null,
+              primary_email: row.projectUser?.contactChannels[0]?.value ?? null,
             },
-            started_at_millis: s.startedAt.getTime(),
-            last_event_at_millis: s.lastEventAt.getTime(),
+            started_at_millis: row.startedAt.getTime(),
+            last_event_at_millis: row.lastEventAt.getTime(),
             chunk_count: agg.chunkCount,
             event_count: agg.eventCount,
           };
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
index 14f503db06..56dd44d432 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Alert, Button, Dialog, DialogContent, DialogHeader, DialogTitle, Skeleton, Switch, Typography } from "@/components/ui";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { useFromNow } from "@/hooks/use-from-now";
 import {
   getDesiredGlobalOffsetFromPlaybackState,
@@ -16,9 +17,11 @@ import {
 import { cn } from "@/lib/utils";
 import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
 import { stringCompare } from "@stackframe/stack-shared/dist/utils/strings";
-import { ArrowsClockwiseIcon, CursorClickIcon, FastForwardIcon, GearIcon, MonitorPlayIcon, PauseIcon, PlayIcon } from "@phosphor-icons/react";
+import { ArrowsClockwiseIcon, CursorClickIcon, FastForwardIcon, FunnelSimpleIcon, GearIcon, MonitorPlayIcon, PauseIcon, PlayIcon, XIcon } from "@phosphor-icons/react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { UserSearchPicker } from "@/components/data-table/user-search-picker";
+import { TeamSearchTable } from "@/components/data-table/team-search-table";
 import { AppEnabledGuard } from "../../app-enabled-guard";
 import { PageLayout } from "../../page-layout";
 import { useAdminApp } from "../../use-admin-app";
@@ -69,7 +72,17 @@ type ChunkRow = {
 };
 
 type AdminAppWithSessionReplays = ReturnType<typeof useAdminApp> & {
-  listSessionReplays: (options?: { limit?: number, cursor?: string }) => Promise<{
+  listSessionReplays: (options?: {
+    limit?: number,
+    cursor?: string,
+    userIds?: string[],
+    teamIds?: string[],
+    durationMsMin?: number,
+    durationMsMax?: number,
+    lastEventAtFromMillis?: number,
+    lastEventAtToMillis?: number,
+    clickCountMin?: number,
+  }) => Promise<{
     items: RecordingRow[],
     nextCursor: string | null,
   }>,
@@ -79,6 +92,28 @@ type AdminAppWithSessionReplays = ReturnType<typeof useAdminApp> & {
   }>,
 };
 
+type ReplayFilters = {
+  userId: string,
+  userLabel: string,
+  teamId: string,
+  teamLabel: string,
+  durationMinSeconds: string,
+  durationMaxSeconds: string,
+  lastActivePreset: "" | "24h" | "7d" | "30d",
+  clickCountMin: string,
+};
+
+const EMPTY_FILTERS: ReplayFilters = {
+  userId: "",
+  userLabel: "",
+  teamId: "",
+  teamLabel: "",
+  durationMinSeconds: "",
+  durationMaxSeconds: "",
+  lastActivePreset: "",
+  clickCountMin: "",
+};
+
 function coerceRrwebEvents(raw: unknown[]): RrwebEventWithTime[] {
   const filtered: Array<{ timestamp: number }> = [];
   for (const e of raw) {
@@ -113,6 +148,16 @@ function formatTimelineMs(ms: number) {
   return `${m}:${s.toString().padStart(2, "0")}`;
 }
 
+function filtersActiveCount(filters: ReplayFilters): number {
+  let count = 0;
+  if (filters.userId) count += 1;
+  if (filters.teamId) count += 1;
+  if (filters.durationMinSeconds || filters.durationMaxSeconds) count += 1;
+  if (filters.lastActivePreset) count += 1;
+  if (filters.clickCountMin) count += 1;
+  return count;
+}
+
 type TimelineEvent = {
   eventType: string,
   eventAtMs: number,
@@ -417,13 +462,16 @@ function useReplayMachine(initialSettings: ReplaySettings) {
 export default function PageClient() {
   const adminApp = useAdminApp() as AdminAppWithSessionReplays;
 
-  // ---- Recording list state (unchanged from original) ----
+  // ---- Recording list + filters ----
 
   const [recordings, setRecordings] = useState<RecordingRow[]>([]);
   const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [loadingInitial, setLoadingInitial] = useState(true);
   const [loadingMore, setLoadingMore] = useState(false);
   const [listError, setListError] = useState<string | null>(null);
+  const [activeFilterDialog, setActiveFilterDialog] = useState<null | "user" | "team" | "duration" | "lastActive" | "clicks">(null);
+  const [appliedFilters, setAppliedFilters] = useState<ReplayFilters>(EMPTY_FILTERS);
+  const [draftFilters, setDraftFilters] = useState<ReplayFilters>(EMPTY_FILTERS);
   const [clickCountsByReplayId, setClickCountsByReplayId] = useState<Map<string, number>>(new Map());
   const [timelineEvents, setTimelineEvents] = useState<TimelineEvent[]>([]);
 
@@ -436,39 +484,57 @@ export default function PageClient() {
   );
 
   const hasAutoSelectedRef = useRef(false);
-  const hasFetchedInitialRef = useRef(false);
+  const loadingMoreRef = useRef(false);
 
   const loadPage = useCallback(async (cursor: string | null) => {
-    if (cursor === null && hasFetchedInitialRef.current) return;
-    if (cursor === null) hasFetchedInitialRef.current = true;
-    if (cursor !== null && loadingMore) return;
+    if (cursor !== null && loadingMoreRef.current) return;
 
     if (cursor === null) {
       setLoadingInitial(true);
     } else {
+      loadingMoreRef.current = true;
       setLoadingMore(true);
     }
     setListError(null);
 
     try {
-      const res = await adminApp.listSessionReplays({ limit: PAGE_SIZE, cursor: cursor ?? undefined });
-      const items = cursor ? [...recordings, ...res.items] : res.items;
-      setRecordings(items);
+      const presetMs: Record<string, number> = { "24h": 86_400_000, "7d": 604_800_000, "30d": 2_592_000_000 };
+      const lastActiveFromMillis = appliedFilters.lastActivePreset && presetMs[appliedFilters.lastActivePreset]
+        ? Date.now() - presetMs[appliedFilters.lastActivePreset]
+        : undefined;
+
+      const res = await adminApp.listSessionReplays({
+        limit: PAGE_SIZE,
+        cursor: cursor ?? undefined,
+        userIds: appliedFilters.userId ? [appliedFilters.userId] : undefined,
+        teamIds: appliedFilters.teamId ? [appliedFilters.teamId] : undefined,
+        durationMsMin: appliedFilters.durationMinSeconds ? Number(appliedFilters.durationMinSeconds) * 1000 : undefined,
+        durationMsMax: appliedFilters.durationMaxSeconds ? Number(appliedFilters.durationMaxSeconds) * 1000 : undefined,
+        lastEventAtFromMillis: lastActiveFromMillis,
+        clickCountMin: appliedFilters.clickCountMin ? Number(appliedFilters.clickCountMin) : undefined,
+      });
+      setRecordings((prev) => {
+        const items = cursor ? [...prev, ...res.items] : res.items;
+        if (!cursor && !hasAutoSelectedRef.current && items.length > 0) {
+          hasAutoSelectedRef.current = true;
+          setSelectedRecordingId(items[0].id);
+        }
+        return items;
+      });
       setNextCursor(res.nextCursor);
-
-      if (!cursor && !hasAutoSelectedRef.current && items.length > 0) {
-        hasAutoSelectedRef.current = true;
-        setSelectedRecordingId(items[0].id);
-      }
     } catch (e: any) {
       setListError(e?.message ?? "Failed to load session recordings.");
     } finally {
       setLoadingInitial(false);
+      loadingMoreRef.current = false;
       setLoadingMore(false);
     }
-  }, [adminApp, loadingMore, recordings]);
+  }, [adminApp, appliedFilters]);
 
   useEffect(() => {
+    setRecordings([]);
+    setNextCursor(null);
+    hasAutoSelectedRef.current = false;
     runAsynchronously(() => loadPage(null), { noErrorLogging: true });
   }, [loadPage]);
 
@@ -498,12 +564,12 @@ export default function PageClient() {
     const el = listBoxRef.current;
     if (!el) return;
     if (!nextCursor) return;
-    if (loadingMore || loadingInitial) return;
+    if (loadingMoreRef.current || loadingInitial) return;
     const remaining = el.scrollHeight - el.scrollTop - el.clientHeight;
     if (remaining < 200) {
       runAsynchronously(() => loadPage(nextCursor), { noErrorLogging: true });
     }
-  }, [loadingInitial, loadingMore, loadPage, nextCursor]);
+  }, [loadingInitial, loadPage, nextCursor]);
 
   // ---- Replay state machine ----
 
@@ -617,6 +683,7 @@ export default function PageClient() {
         root: rootEl,
         speed: msRef.current.settings.playerSpeed,
         skipInactive: msRef.current.settings.skipInactivity,
+        triggerFocus: false,
       });
 
       rootEl.style.position = "relative";
@@ -1290,6 +1357,27 @@ export default function PageClient() {
     })).filter(m => m.timeMs >= 0 && m.timeMs <= ms.globalTotalMs);
   }, [timelineEvents, ms.globalStartTs, ms.globalTotalMs]);
 
+  const activeFilterCount = useMemo(() => filtersActiveCount(appliedFilters), [appliedFilters]);
+
+  const openFilterDialog = useCallback((dialog: "user" | "team" | "duration" | "lastActive" | "clicks") => {
+    setDraftFilters(appliedFilters);
+    setActiveFilterDialog(dialog);
+  }, [appliedFilters]);
+
+  const applyDraftFilters = useCallback(() => {
+    setAppliedFilters(draftFilters);
+    setActiveFilterDialog(null);
+  }, [draftFilters]);
+
+  useEffect(() => {
+    if (recordings.length === 0) {
+      setSelectedRecordingId(null);
+      return;
+    }
+    if (selectedRecordingId && recordings.some((r) => r.id === selectedRecordingId)) return;
+    setSelectedRecordingId(recordings[0]?.id ?? null);
+  }, [recordings, selectedRecordingId]);
+
   // ---- Rendering ----
 
   return (
@@ -1298,12 +1386,274 @@ export default function PageClient() {
         <PanelGroup direction="horizontal" className="!h-[calc(100vh-180px)] min-h-[520px] rounded-xl border border-border/40 overflow-hidden bg-background">
           <Panel defaultSize={25} minSize={16}>
             <div className="h-full flex flex-col">
-              <div className="shrink-0 px-3 py-2 border-b border-border/30 flex items-center h-10">
-                <Typography className="text-sm font-medium">
-                  Sessions{!loadingInitial && recordings.length > 0 ? ` (${recordings.length}${nextCursor ? "+" : ""})` : ""}
-                </Typography>
+              <div className="shrink-0 px-3 py-2 border-b border-border/30 space-y-2">
+                <div className="flex items-center justify-between gap-2 h-8">
+                  <Typography className="text-sm font-medium">
+                    Sessions{!loadingInitial && recordings.length > 0 ? ` (${recordings.length}${nextCursor ? "+" : ""})` : ""}
+                  </Typography>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-7 px-2.5"
+                      >
+                        <FunnelSimpleIcon className="h-3.5 w-3.5 mr-1" />
+                        Filters
+                        {activeFilterCount > 0 && (
+                          <span className="ml-1 rounded-full bg-foreground/10 px-1.5 py-0 text-[10px]">
+                            {activeFilterCount}
+                          </span>
+                        )}
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      align="end"
+                      className="w-48"
+                      onCloseAutoFocus={(e) => e.preventDefault()}
+                    >
+                      <DropdownMenuItem onClick={() => requestAnimationFrame(() => openFilterDialog("user"))}>
+                        User
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => requestAnimationFrame(() => openFilterDialog("team"))}>
+                        Team
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => requestAnimationFrame(() => openFilterDialog("duration"))}>
+                        Duration
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => requestAnimationFrame(() => openFilterDialog("lastActive"))}>
+                        Last active
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => requestAnimationFrame(() => openFilterDialog("clicks"))}>
+                        Click count
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+
+                {activeFilterCount > 0 && (
+                  <div className="flex flex-wrap items-center gap-1.5">
+                    {appliedFilters.userId && (
+                      <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
+                        user:{appliedFilters.userLabel || "selected"}
+                      </span>
+                    )}
+                    {appliedFilters.teamId && (
+                      <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
+                        team:{appliedFilters.teamLabel || "selected"}
+                      </span>
+                    )}
+                    {(appliedFilters.durationMinSeconds || appliedFilters.durationMaxSeconds) && (
+                      <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
+                        duration
+                      </span>
+                    )}
+                    {appliedFilters.lastActivePreset && (
+                      <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
+                        last active: {appliedFilters.lastActivePreset}
+                      </span>
+                    )}
+                    {appliedFilters.clickCountMin && (
+                      <span className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px]">
+                        clicks
+                      </span>
+                    )}
+                    <button
+                      className="inline-flex items-center gap-1 rounded-full border border-border/60 px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground transition-colors hover:transition-none"
+                      onClick={() => setAppliedFilters(EMPTY_FILTERS)}
+                    >
+                      <XIcon className="h-2.5 w-2.5" />
+                      clear
+                    </button>
+                  </div>
+                )}
               </div>
 
+              <Dialog open={activeFilterDialog === "user"} onOpenChange={(open) => setActiveFilterDialog(open ? "user" : null)}>
+                <DialogContent className="max-w-md">
+                  <DialogHeader>
+                    <DialogTitle>User Filter</DialogTitle>
+                  </DialogHeader>
+                  <div className="space-y-3">
+                    <UserSearchPicker
+                      action={(user) => (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            setAppliedFilters((prev) => ({
+                              ...prev,
+                              userId: user.id,
+                              userLabel: user.displayName ?? user.primaryEmail ?? user.id,
+                            }));
+                            setActiveFilterDialog(null);
+                          }}
+                        >
+                          Select
+                        </Button>
+                      )}
+                    />
+                    <div className="flex items-center justify-end gap-2">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8"
+                        onClick={() => {
+                          setAppliedFilters((prev) => ({ ...prev, userId: "", userLabel: "" }));
+                          setActiveFilterDialog(null);
+                        }}
+                      >
+                        Clear
+                      </Button>
+                    </div>
+                  </div>
+                </DialogContent>
+              </Dialog>
+
+              <Dialog open={activeFilterDialog === "team"} onOpenChange={(open) => setActiveFilterDialog(open ? "team" : null)}>
+                <DialogContent className="max-w-3xl">
+                  <DialogHeader>
+                    <DialogTitle>Team Filter</DialogTitle>
+                  </DialogHeader>
+                  <div className="space-y-3 pt-2">
+                    <TeamSearchTable
+                      action={(team) => (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            setAppliedFilters((prev) => ({
+                              ...prev,
+                              teamId: team.id,
+                              teamLabel: team.displayName,
+                            }));
+                            setActiveFilterDialog(null);
+                          }}
+                        >
+                          Select
+                        </Button>
+                      )}
+                    />
+                    <div className="flex items-center justify-end gap-2">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8"
+                        onClick={() => {
+                          setAppliedFilters((prev) => ({ ...prev, teamId: "", teamLabel: "" }));
+                          setActiveFilterDialog(null);
+                        }}
+                      >
+                        Clear
+                      </Button>
+                    </div>
+                  </div>
+                </DialogContent>
+              </Dialog>
+
+              <Dialog open={activeFilterDialog === "duration"} onOpenChange={(open) => setActiveFilterDialog(open ? "duration" : null)}>
+                <DialogContent className="max-w-md">
+                  <DialogHeader>
+                    <DialogTitle>Duration Filter</DialogTitle>
+                  </DialogHeader>
+                  <form onSubmit={(e) => {
+                    e.preventDefault();
+                    applyDraftFilters();
+                  }}>
+                    <div className="grid grid-cols-2 gap-3 pt-2">
+                      <label className="space-y-1">
+                        <Typography className="text-xs text-muted-foreground">Min (seconds)</Typography>
+                        <input
+                          type="number"
+                          min={0}
+                          className="h-8 w-full rounded-md border border-border/50 bg-background px-2 text-xs"
+                          value={draftFilters.durationMinSeconds}
+                          onChange={(e) => setDraftFilters((prev) => ({ ...prev, durationMinSeconds: e.target.value }))}
+                        />
+                      </label>
+                      <label className="space-y-1">
+                        <Typography className="text-xs text-muted-foreground">Max (seconds)</Typography>
+                        <input
+                          type="number"
+                          min={0}
+                          className="h-8 w-full rounded-md border border-border/50 bg-background px-2 text-xs"
+                          value={draftFilters.durationMaxSeconds}
+                          onChange={(e) => setDraftFilters((prev) => ({ ...prev, durationMaxSeconds: e.target.value }))}
+                        />
+                      </label>
+                    </div>
+                    <div className="pt-3 flex items-center justify-end gap-2">
+                      <Button type="button" variant="ghost" size="sm" className="h-8" onClick={() => setActiveFilterDialog(null)}>Cancel</Button>
+                      <Button type="submit" size="sm" className="h-8">Apply</Button>
+                    </div>
+                  </form>
+                </DialogContent>
+              </Dialog>
+
+              <Dialog open={activeFilterDialog === "lastActive"} onOpenChange={(open) => setActiveFilterDialog(open ? "lastActive" : null)}>
+                <DialogContent className="max-w-md">
+                  <DialogHeader>
+                    <DialogTitle>Last Active Filter</DialogTitle>
+                  </DialogHeader>
+                  <div className="flex flex-wrap gap-2 pt-2">
+                    {([["24h", "Last 24 hours"], ["7d", "Last 7 days"], ["30d", "Last 30 days"]] as const).map(([value, label]) => (
+                      <Button
+                        key={value}
+                        variant={appliedFilters.lastActivePreset === value ? "default" : "outline"}
+                        size="sm"
+                        className="h-8"
+                        onClick={() => {
+                          setAppliedFilters((prev) => ({ ...prev, lastActivePreset: value }));
+                          setActiveFilterDialog(null);
+                        }}
+                      >
+                        {label}
+                      </Button>
+                    ))}
+                  </div>
+                  <div className="pt-1 flex items-center justify-end gap-2">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8"
+                      onClick={() => {
+                        setAppliedFilters((prev) => ({ ...prev, lastActivePreset: "" }));
+                        setActiveFilterDialog(null);
+                      }}
+                    >
+                      Clear
+                    </Button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+
+              <Dialog open={activeFilterDialog === "clicks"} onOpenChange={(open) => setActiveFilterDialog(open ? "clicks" : null)}>
+                <DialogContent className="max-w-md">
+                  <DialogHeader>
+                    <DialogTitle>Click Count Filter</DialogTitle>
+                  </DialogHeader>
+                  <form onSubmit={(e) => {
+                    e.preventDefault();
+                    applyDraftFilters();
+                  }}>
+                    <div className="space-y-3 pt-2">
+                      <input
+                        type="number"
+                        min={0}
+                        className="h-8 w-full rounded-md border border-border/50 bg-background px-2 text-xs"
+                        value={draftFilters.clickCountMin}
+                        onChange={(e) => setDraftFilters((prev) => ({ ...prev, clickCountMin: e.target.value }))}
+                        placeholder="Minimum click count"
+                      />
+                    </div>
+                    <div className="pt-3 flex items-center justify-end gap-2">
+                      <Button type="button" variant="ghost" size="sm" className="h-8" onClick={() => setActiveFilterDialog(null)}>Cancel</Button>
+                      <Button type="submit" size="sm" className="h-8">Apply</Button>
+                    </div>
+                  </form>
+                </DialogContent>
+              </Dialog>
+
               {listError && (
                 <div className="p-3">
                   <Alert variant="destructive">{listError}</Alert>
@@ -1327,7 +1677,7 @@ export default function PageClient() {
                 ) : recordings.length === 0 ? (
                   <div className="p-6 text-center">
                     <Typography className="text-sm text-muted-foreground">
-                      No replays yet.
+                      {activeFilterCount > 0 ? "No replays match these filters." : "No replays yet."}
                     </Typography>
                   </div>
                 ) : (
diff --git a/apps/dashboard/src/components/data-table/user-search-picker.tsx b/apps/dashboard/src/components/data-table/user-search-picker.tsx
new file mode 100644
index 0000000000..d23c74bec1
--- /dev/null
+++ b/apps/dashboard/src/components/data-table/user-search-picker.tsx
@@ -0,0 +1,103 @@
+'use client';
+import { useAdminApp } from '@/app/(main)/(protected)/projects/[projectId]/use-admin-app';
+import { DataTableColumnHeader, DataTableManualPagination, Input, Skeleton, TextCell } from "@/components/ui";
+import { ServerUser } from '@stackframe/stack';
+import { ColumnDef, ColumnFiltersState, SortingState } from "@tanstack/react-table";
+import React, { Suspense, useCallback, useEffect, useMemo, useState } from "react";
+import { extendUsers } from "./user-table";
+
+const SEARCH_DEBOUNCE_MS = 250;
+const PAGE_SIZE = 5;
+
+function UserSearchTable(props: {
+  query: string,
+  action: (user: ServerUser) => React.ReactNode,
+}) {
+  const stackAdminApp = useAdminApp();
+  const [filters, setFilters] = useState<Parameters<typeof stackAdminApp.listUsers>[0]>({
+    limit: PAGE_SIZE,
+    query: props.query || undefined,
+  });
+
+  // Reset filters when query changes
+  useEffect(() => {
+    setFilters({ limit: PAGE_SIZE, query: props.query || undefined });
+  }, [props.query]);
+
+  const users = extendUsers(stackAdminApp.useUsers(filters));
+
+  const { action } = props;
+  const columns: ColumnDef<ServerUser>[] = useMemo(() => [
+    {
+      accessorKey: "displayName",
+      header: ({ column }) => <DataTableColumnHeader column={column} columnTitle="Display Name" />,
+      cell: ({ row }) => <TextCell size={100}><span className={row.original.displayName === null ? 'text-slate-400' : ''}>{row.original.displayName ?? '–'}</span></TextCell>,
+      enableSorting: false,
+    },
+    {
+      accessorKey: "primaryEmail",
+      header: ({ column }) => <DataTableColumnHeader column={column} columnTitle="Primary Email" />,
+      cell: ({ row }) => <TextCell size={150}>{row.original.primaryEmail}</TextCell>,
+      enableSorting: false,
+    },
+    {
+      id: "actions",
+      cell: ({ row }) => action(row.original),
+    },
+  ], [action]);
+
+  const onUpdate = useCallback(async (options: {
+    cursor: string,
+    limit: number,
+    sorting: SortingState,
+    columnFilters: ColumnFiltersState,
+    globalFilters: any,
+  }) => {
+    const newFilters: Parameters<typeof stackAdminApp.listUsers>[0] = {
+      cursor: options.cursor,
+      limit: options.limit,
+      query: props.query || undefined,
+    };
+
+    setFilters(newFilters);
+    const result = await stackAdminApp.listUsers(newFilters);
+    return { nextCursor: result.nextCursor };
+  }, [stackAdminApp, props.query]);
+
+  return <DataTableManualPagination
+    showDefaultToolbar={false}
+    columns={columns}
+    data={users}
+    onUpdate={onUpdate}
+    defaultColumnFilters={[]}
+    defaultSorting={[]}
+  />;
+}
+
+export function UserSearchPicker(props: {
+  action: (user: ServerUser) => React.ReactNode,
+}) {
+  const [searchInput, setSearchInput] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedQuery(searchInput.trim());
+    }, SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(handle);
+  }, [searchInput]);
+
+  return (
+    <div className="space-y-3 pt-2">
+      <Input
+        placeholder="Search users..."
+        value={searchInput}
+        onChange={(e) => setSearchInput(e.target.value)}
+        className="h-8 text-xs"
+      />
+      <Suspense fallback={<div className="space-y-2 p-2"><Skeleton className="h-8 w-full" /><Skeleton className="h-8 w-full" /><Skeleton className="h-8 w-full" /></div>}>
+        <UserSearchTable query={debouncedQuery} action={props.action} />
+      </Suspense>
+    </div>
+  );
+}
diff --git a/packages/stack-shared/src/interface/admin-interface.ts b/packages/stack-shared/src/interface/admin-interface.ts
index 0c10351d31..cdb202a781 100644
--- a/packages/stack-shared/src/interface/admin-interface.ts
+++ b/packages/stack-shared/src/interface/admin-interface.ts
@@ -787,6 +787,13 @@ export class StackAdminInterface extends StackServerInterface {
     const qs = new URLSearchParams();
     if (params?.cursor) qs.set("cursor", params.cursor);
     if (typeof params?.limit === "number") qs.set("limit", String(params.limit));
+    if (params?.user_ids && params.user_ids.length > 0) qs.set("user_ids", params.user_ids.join(","));
+    if (params?.team_ids && params.team_ids.length > 0) qs.set("team_ids", params.team_ids.join(","));
+    if (typeof params?.duration_ms_min === "number") qs.set("duration_ms_min", String(params.duration_ms_min));
+    if (typeof params?.duration_ms_max === "number") qs.set("duration_ms_max", String(params.duration_ms_max));
+    if (typeof params?.last_event_at_from_millis === "number") qs.set("last_event_at_from_millis", String(params.last_event_at_from_millis));
+    if (typeof params?.last_event_at_to_millis === "number") qs.set("last_event_at_to_millis", String(params.last_event_at_to_millis));
+    if (typeof params?.click_count_min === "number") qs.set("click_count_min", String(params.click_count_min));
     const response = await this.sendAdminRequest(
       `/internal/session-replays${qs.size ? `?${qs.toString()}` : ""}`,
       { method: "GET" },
diff --git a/packages/stack-shared/src/interface/crud/session-replays.ts b/packages/stack-shared/src/interface/crud/session-replays.ts
index 4c7faee297..4027800ca4 100644
--- a/packages/stack-shared/src/interface/crud/session-replays.ts
+++ b/packages/stack-shared/src/interface/crud/session-replays.ts
@@ -1,6 +1,13 @@
 export type AdminListSessionReplaysOptions = {
   limit?: number,
   cursor?: string,
+  user_ids?: string[],
+  team_ids?: string[],
+  duration_ms_min?: number,
+  duration_ms_max?: number,
+  last_event_at_from_millis?: number,
+  last_event_at_to_millis?: number,
+  click_count_min?: number,
 };
 
 export type AdminListSessionReplaysResponse = {
diff --git a/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts
index 389f53db74..fdc35b9531 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/admin-app-impl.ts
@@ -1046,6 +1046,13 @@ export class _StackAdminAppImplIncomplete<HasTokenStore extends boolean, Project
     const response = await this._interface.listSessionReplays({
       cursor: options?.cursor,
       limit: options?.limit,
+      user_ids: options?.userIds,
+      team_ids: options?.teamIds,
+      duration_ms_min: options?.durationMsMin,
+      duration_ms_max: options?.durationMsMax,
+      last_event_at_from_millis: options?.lastEventAtFromMillis,
+      last_event_at_to_millis: options?.lastEventAtToMillis,
+      click_count_min: options?.clickCountMin,
     });
 
     const items: AdminSessionReplay[] = response.items.map((r) => ({
diff --git a/packages/template/src/lib/stack-app/session-replays/index.ts b/packages/template/src/lib/stack-app/session-replays/index.ts
index 781cb86012..b9d406af4e 100644
--- a/packages/template/src/lib/stack-app/session-replays/index.ts
+++ b/packages/template/src/lib/stack-app/session-replays/index.ts
@@ -26,6 +26,13 @@ export type AdminSessionReplayChunk = {
 export type ListSessionReplaysOptions = {
   limit?: number,
   cursor?: string,
+  userIds?: string[],
+  teamIds?: string[],
+  durationMsMin?: number,
+  durationMsMax?: number,
+  lastEventAtFromMillis?: number,
+  lastEventAtToMillis?: number,
+  clickCountMin?: number,
 };
 
 export type ListSessionReplaysResult = {

From 58b3905679a14e5f3c6fe57171115c9383b99493 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Wed, 18 Feb 2026 18:13:34 -0800
Subject: [PATCH 13/21] fix lint and typecheck, add session-replay tests

---
 .../latest/internal/session-replays/route.tsx |   4 +-
 .../analytics/replays/page-client.tsx         |  10 +-
 .../endpoints/api/v1/session-replays.test.ts  | 361 +++++++++++++++++-
 3 files changed, 367 insertions(+), 8 deletions(-)

diff --git a/apps/backend/src/app/api/latest/internal/session-replays/route.tsx b/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
index 647ec16fce..1513a5a090 100644
--- a/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
+++ b/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
@@ -255,8 +255,8 @@ export const GET = createSmartRouteHandler({
             id: row.id,
             project_user: {
               id: row.projectUserId,
-              display_name: row.projectUser?.displayName ?? null,
-              primary_email: row.projectUser?.contactChannels[0]?.value ?? null,
+              display_name: row.projectUser.displayName ?? null,
+              primary_email: row.projectUser.contactChannels[0]?.value ?? null,
             },
             started_at_millis: row.startedAt.getTime(),
             last_event_at_millis: row.lastEventAt.getTime(),
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
index 56dd44d432..9ca2e81ce2 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
@@ -1412,19 +1412,19 @@ export default function PageClient() {
                       className="w-48"
                       onCloseAutoFocus={(e) => e.preventDefault()}
                     >
-                      <DropdownMenuItem onClick={() => requestAnimationFrame(() => openFilterDialog("user"))}>
+                      <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("user")); }}>
                         User
                       </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => requestAnimationFrame(() => openFilterDialog("team"))}>
+                      <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("team")); }}>
                         Team
                       </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => requestAnimationFrame(() => openFilterDialog("duration"))}>
+                      <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("duration")); }}>
                         Duration
                       </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => requestAnimationFrame(() => openFilterDialog("lastActive"))}>
+                      <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("lastActive")); }}>
                         Last active
                       </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => requestAnimationFrame(() => openFilterDialog("clicks"))}>
+                      <DropdownMenuItem onClick={() => { requestAnimationFrame(() => openFilterDialog("clicks")); }}>
                         Click count
                       </DropdownMenuItem>
                     </DropdownMenuContent>
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts
index c2ac2fda03..b10b0fdfd2 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts
@@ -1,6 +1,7 @@
 import { randomUUID } from "node:crypto";
+import { wait } from "@stackframe/stack-shared/dist/utils/promises";
 import { it } from "../../../../helpers";
-import { Auth, Project, backendContext, niceBackendFetch } from "../../../backend-helpers";
+import { Auth, Project, Team, backendContext, bumpEmailAddress, niceBackendFetch } from "../../../backend-helpers";
 
 async function uploadBatch(options: {
   browserSessionId: string,
@@ -603,3 +604,361 @@ it("groups batches from same refresh token into one session replay", async ({ ex
   // Same refresh token within idle timeout → same session replay
   expect(upload1.body?.session_replay_id).toBe(upload2.body?.session_replay_id);
 });
+
+async function uploadEventBatch(options: {
+  sessionReplaySegmentId: string,
+  batchId: string,
+  sentAtMs: number,
+  events: { event_type: string, event_at_ms: number, data: unknown }[],
+}) {
+  return await niceBackendFetch("/api/v1/analytics/events/batch", {
+    method: "POST",
+    accessType: "client",
+    body: {
+      session_replay_segment_id: options.sessionReplaySegmentId,
+      batch_id: options.batchId,
+      sent_at_ms: options.sentAtMs,
+      events: options.events,
+    },
+  });
+}
+
+async function listReplays(queryParams: Record<string, string> = {}) {
+  const params = new URLSearchParams(queryParams);
+  const qs = params.toString();
+  return await niceBackendFetch(`/api/v1/internal/session-replays${qs ? `?${qs}` : ""}`, {
+    method: "GET",
+    accessType: "admin",
+  });
+}
+
+it("admin list session replays filters by user_ids", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+
+  // User A
+  const userA = await Auth.Otp.signIn();
+  const uploadA = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    startedAtMs: 1_700_000_000_000,
+    sentAtMs: 1_700_000_000_500,
+    events: [{ type: 1, timestamp: 1_700_000_000_100 }],
+  });
+  expect(uploadA.status).toBe(200);
+
+  // User B
+  await bumpEmailAddress();
+  const userB = await Auth.Otp.signIn();
+  const uploadB = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    startedAtMs: 1_700_000_000_000,
+    sentAtMs: 1_700_000_000_600,
+    events: [{ type: 1, timestamp: 1_700_000_000_200 }],
+  });
+  expect(uploadB.status).toBe(200);
+
+  // Filter by user A only
+  const resA = await listReplays({ user_ids: userA.userId });
+  expect(resA.status).toBe(200);
+  expect(resA.body?.items?.length).toBe(1);
+  expect(resA.body?.items?.[0]?.project_user?.id).toBe(userA.userId);
+
+  // Filter by user B only
+  const resB = await listReplays({ user_ids: userB.userId });
+  expect(resB.status).toBe(200);
+  expect(resB.body?.items?.length).toBe(1);
+  expect(resB.body?.items?.[0]?.project_user?.id).toBe(userB.userId);
+
+  // Filter by both users
+  const resBoth = await listReplays({ user_ids: `${userA.userId},${userB.userId}` });
+  expect(resBoth.status).toBe(200);
+  expect(resBoth.body?.items?.length).toBe(2);
+
+  // Filter by nonexistent user
+  const resNone = await listReplays({ user_ids: randomUUID() });
+  expect(resNone.status).toBe(200);
+  expect(resNone.body?.items?.length).toBe(0);
+});
+
+it("admin list session replays filters by team_ids", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+
+  // User A — member of a team
+  const userA = await Auth.Otp.signIn();
+  const uploadA = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    startedAtMs: 1_700_000_000_000,
+    sentAtMs: 1_700_000_000_500,
+    events: [{ type: 1, timestamp: 1_700_000_000_100 }],
+  });
+  expect(uploadA.status).toBe(200);
+
+  const { teamId } = await Team.create({ accessType: "server", creatorUserId: userA.userId });
+
+  // User B — not in any team
+  await bumpEmailAddress();
+  await Auth.Otp.signIn();
+  const uploadB = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    startedAtMs: 1_700_000_000_000,
+    sentAtMs: 1_700_000_000_600,
+    events: [{ type: 1, timestamp: 1_700_000_000_200 }],
+  });
+  expect(uploadB.status).toBe(200);
+
+  // Filter by team → only user A's replay
+  const resTeam = await listReplays({ team_ids: teamId });
+  expect(resTeam.status).toBe(200);
+  expect(resTeam.body?.items?.length).toBe(1);
+  expect(resTeam.body?.items?.[0]?.project_user?.id).toBe(userA.userId);
+
+  // Nonexistent team → empty
+  const resNone = await listReplays({ team_ids: randomUUID() });
+  expect(resNone.status).toBe(200);
+  expect(resNone.body?.items?.length).toBe(0);
+});
+
+it("admin list session replays filters by duration range", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+
+  const baseTime = 1_700_000_000_000;
+
+  // Short replay: 5 seconds (first event → last event = 5000ms)
+  await Auth.Otp.signIn();
+  const uploadShort = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    startedAtMs: baseTime,
+    sentAtMs: baseTime + 5500,
+    events: [
+      { type: 1, timestamp: baseTime },
+      { type: 1, timestamp: baseTime + 5000 },
+    ],
+  });
+  expect(uploadShort.status).toBe(200);
+  const shortId = uploadShort.body?.session_replay_id;
+
+  // Long replay: 30 seconds (first event → last event = 30000ms)
+  await bumpEmailAddress();
+  await Auth.Otp.signIn();
+  const uploadLong = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    startedAtMs: baseTime,
+    sentAtMs: baseTime + 30500,
+    events: [
+      { type: 1, timestamp: baseTime },
+      { type: 1, timestamp: baseTime + 30000 },
+    ],
+  });
+  expect(uploadLong.status).toBe(200);
+  const longId = uploadLong.body?.session_replay_id;
+
+  // duration_ms_min=10000 → only long replay
+  const resMin = await listReplays({ duration_ms_min: "10000" });
+  expect(resMin.status).toBe(200);
+  expect(resMin.body?.items?.length).toBe(1);
+  expect(resMin.body?.items?.[0]?.id).toBe(longId);
+
+  // duration_ms_max=10000 → only short replay
+  const resMax = await listReplays({ duration_ms_max: "10000" });
+  expect(resMax.status).toBe(200);
+  expect(resMax.body?.items?.length).toBe(1);
+  expect(resMax.body?.items?.[0]?.id).toBe(shortId);
+
+  // duration range that includes both: 0–50000
+  const resBoth = await listReplays({ duration_ms_min: "0", duration_ms_max: "50000" });
+  expect(resBoth.status).toBe(200);
+  expect(resBoth.body?.items?.length).toBe(2);
+
+  // duration range that includes neither: 10000–20000
+  const resNeither = await listReplays({ duration_ms_min: "10000", duration_ms_max: "20000" });
+  expect(resNeither.status).toBe(200);
+  expect(resNeither.body?.items?.length).toBe(0);
+});
+
+it("admin list session replays filters by last_event_at time range", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+
+  const earlyTime = 1_700_000_000_000;
+  const lateTime = 1_700_000_100_000; // 100 seconds later
+
+  // Early replay
+  await Auth.Otp.signIn();
+  const uploadEarly = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    startedAtMs: earlyTime,
+    sentAtMs: earlyTime + 500,
+    events: [{ type: 1, timestamp: earlyTime + 100 }],
+  });
+  expect(uploadEarly.status).toBe(200);
+  const earlyId = uploadEarly.body?.session_replay_id;
+
+  // Late replay
+  await bumpEmailAddress();
+  await Auth.Otp.signIn();
+  const uploadLate = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    startedAtMs: lateTime,
+    sentAtMs: lateTime + 500,
+    events: [{ type: 1, timestamp: lateTime + 100 }],
+  });
+  expect(uploadLate.status).toBe(200);
+  const lateId = uploadLate.body?.session_replay_id;
+
+  // Filter from midpoint → only late replay
+  const midpoint = earlyTime + 50_000;
+  const resFrom = await listReplays({ last_event_at_from_millis: String(midpoint) });
+  expect(resFrom.status).toBe(200);
+  expect(resFrom.body?.items?.length).toBe(1);
+  expect(resFrom.body?.items?.[0]?.id).toBe(lateId);
+
+  // Filter to midpoint → only early replay
+  const resTo = await listReplays({ last_event_at_to_millis: String(midpoint) });
+  expect(resTo.status).toBe(200);
+  expect(resTo.body?.items?.length).toBe(1);
+  expect(resTo.body?.items?.[0]?.id).toBe(earlyId);
+
+  // Filter range that includes both
+  const resBoth = await listReplays({
+    last_event_at_from_millis: String(earlyTime),
+    last_event_at_to_millis: String(lateTime + 200),
+  });
+  expect(resBoth.status).toBe(200);
+  expect(resBoth.body?.items?.length).toBe(2);
+});
+
+it("admin list session replays filters by click_count_min", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+
+  const now = Date.now();
+
+  // Replay A: user with 3 clicks
+  await Auth.Otp.signIn();
+  const segmentIdA = randomUUID();
+  const uploadA = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    sessionReplaySegmentId: segmentIdA,
+    startedAtMs: now,
+    sentAtMs: now + 500,
+    events: [{ type: 1, timestamp: now + 100 }],
+  });
+  expect(uploadA.status).toBe(200);
+  const replayIdA = uploadA.body?.session_replay_id;
+
+  const clickData = {
+    tag_name: "button",
+    text: "Click",
+    href: null,
+    selector: "button",
+    x: 10,
+    y: 20,
+    page_x: 10,
+    page_y: 20,
+    viewport_width: 1920,
+    viewport_height: 1080,
+  };
+
+  const eventBatchA = await uploadEventBatch({
+    sessionReplaySegmentId: segmentIdA,
+    batchId: randomUUID(),
+    sentAtMs: now + 600,
+    events: [
+      { event_type: "$click", event_at_ms: now + 100, data: clickData },
+      { event_type: "$click", event_at_ms: now + 200, data: clickData },
+      { event_type: "$click", event_at_ms: now + 300, data: clickData },
+    ],
+  });
+  expect(eventBatchA.status).toBe(200);
+
+  // Replay B: user with 1 click
+  await bumpEmailAddress();
+  await Auth.Otp.signIn();
+  const segmentIdB = randomUUID();
+  const uploadB = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    sessionReplaySegmentId: segmentIdB,
+    startedAtMs: now,
+    sentAtMs: now + 500,
+    events: [{ type: 1, timestamp: now + 100 }],
+  });
+  expect(uploadB.status).toBe(200);
+  const replayIdB = uploadB.body?.session_replay_id;
+
+  const eventBatchB = await uploadEventBatch({
+    sessionReplaySegmentId: segmentIdB,
+    batchId: randomUUID(),
+    sentAtMs: now + 600,
+    events: [
+      { event_type: "$click", event_at_ms: now + 100, data: clickData },
+    ],
+  });
+  expect(eventBatchB.status).toBe(200);
+
+  // Retry loop for ClickHouse eventual consistency
+  let foundOnlyA = false;
+  for (let i = 0; i < 15; i++) {
+    const res = await listReplays({ click_count_min: "2" });
+    expect(res.status).toBe(200);
+    if (res.body?.items?.length === 1 && res.body?.items?.[0]?.id === replayIdA) {
+      foundOnlyA = true;
+      break;
+    }
+    await wait(500);
+  }
+  expect(foundOnlyA).toBe(true);
+
+  // click_count_min=0 should return both (no-op filter)
+  const resAll = await listReplays({ click_count_min: "0" });
+  expect(resAll.status).toBe(200);
+  expect(resAll.body?.items?.length).toBeGreaterThanOrEqual(2);
+});
+
+it("admin list session replays rejects invalid filter parameters", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Auth.Otp.signIn();
+
+  // Non-integer duration_ms_min
+  const res1 = await listReplays({ duration_ms_min: "abc" });
+  expect(res1.status).toBe(400);
+
+  // Negative duration_ms_min
+  const res2 = await listReplays({ duration_ms_min: "-1" });
+  expect(res2.status).toBe(400);
+
+  // Non-integer duration_ms_max
+  const res3 = await listReplays({ duration_ms_max: "12.5" });
+  expect(res3.status).toBe(400);
+
+  // Inverted duration range (min > max)
+  const res4 = await listReplays({ duration_ms_min: "5000", duration_ms_max: "1000" });
+  expect(res4.status).toBe(400);
+
+  // NaN timestamp
+  const res5 = await listReplays({ last_event_at_from_millis: "not-a-number" });
+  expect(res5.status).toBe(400);
+
+  // Inverted time range (from > to)
+  const res6 = await listReplays({ last_event_at_from_millis: "2000", last_event_at_to_millis: "1000" });
+  expect(res6.status).toBe(400);
+
+  // Non-integer click_count_min
+  const res7 = await listReplays({ click_count_min: "1.5" });
+  expect(res7.status).toBe(400);
+
+  // Negative click_count_min
+  const res8 = await listReplays({ click_count_min: "-3" });
+  expect(res8.status).toBe(400);
+});

From 137c4eaabafee127e504565eba71d085c0cf9d50 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Wed, 18 Feb 2026 18:42:48 -0800
Subject: [PATCH 14/21] simplify getAnalyticsAccessToken

---
 .../apps/implementations/client-app-impl.ts   | 19 ++-----------------
 1 file changed, 2 insertions(+), 17 deletions(-)

diff --git a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
index c2965251b5..edc9c057b1 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
@@ -444,23 +444,8 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
 
     this._analyticsOptions = resolvedOptions.analytics;
     const getAnalyticsAccessToken = async (): Promise<string | null> => {
-      const session = await this._getSession();
-      const tokens = await session.getOrFetchLikelyValidTokens(20_000, 75_000);
-      if (tokens?.accessToken.token) {
-        return tokens.accessToken.token;
-      }
-      // No token — create anonymous user so pre-login events aren't lost
-      if (this._hasPersistentTokenStore()) {
-        try {
-          await this._signUpAnonymously();
-          const retrySession = await this._getSession();
-          const retryTokens = await retrySession.getOrFetchLikelyValidTokens(20_000, 75_000);
-          return retryTokens?.accessToken.token ?? null;
-        } catch {
-          return null;
-        }
-      }
-      return null;
+      this._ensurePersistentTokenStore();
+      return await (await this.getUser({ or: "anonymous" })).getAccessToken();
     };
 
     if (isBrowserLike() && this._analyticsOptions?.replays?.enabled === true) {

From d59020799b7962b258db3f76f18f427113463f7f Mon Sep 17 00:00:00 2001
From: BilalG1 <bg2002@gmail.com>
Date: Wed, 18 Feb 2026 19:33:25 -0800
Subject: [PATCH 15/21] analytics: use anonymous users (#1211)

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->
---
 .../apps/implementations/client-app-impl.ts   | 24 ++++++++++---------
 .../apps/implementations/event-tracker.ts     | 21 ++++------------
 .../apps/implementations/session-replay.ts    | 21 ++++------------
 3 files changed, 23 insertions(+), 43 deletions(-)

diff --git a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
index 0050335d80..0b11de4632 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/client-app-impl.ts
@@ -532,14 +532,15 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
     }
 
     this._analyticsOptions = resolvedOptions.analytics;
+    const getAnalyticsAccessToken = async (): Promise<string | null> => {
+      this._ensurePersistentTokenStore();
+      return await (await this.getUser({ or: "anonymous" })).getAccessToken();
+    };
+
     if (isBrowserLike() && this._analyticsOptions?.replays?.enabled === true) {
       this._sessionRecorder = new SessionRecorder({
         projectId: this.projectId,
-        getAccessToken: async () => {
-          const session = await this._getSession();
-          const tokens = await session.getOrFetchLikelyValidTokens(20_000, 75_000);
-          return tokens?.accessToken.token ?? null;
-        },
+        getAccessToken: getAnalyticsAccessToken,
         sendBatch: async (body, opts) => {
           return await this._interface.sendSessionReplayBatch(body, await this._getSession(), opts);
         },
@@ -551,11 +552,7 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
     if (isBrowserLike() && this.projectId === "internal") {
       this._eventTracker = new EventTracker({
         projectId: this.projectId,
-        getAccessToken: async () => {
-          const session = await this._getSession();
-          const tokens = await session.getOrFetchLikelyValidTokens(20_000, 75_000);
-          return tokens?.accessToken.token ?? null;
-        },
+        getAccessToken: getAnalyticsAccessToken,
         sendBatch: async (body, opts) => {
           return await this._interface.sendAnalyticsEventBatch(body, await this._getSession(), opts);
         },
@@ -2392,7 +2389,8 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
         case undefined:
         case "anonymous-if-exists[deprecated]":
         case "return-null": {
-          // do nothing
+          crud = null;
+          break;
         }
       }
     }
@@ -2890,6 +2888,10 @@ export class _StackClientAppImplIncomplete<HasTokenStore extends boolean, Projec
   }
 
   protected async _signOut(session: InternalSession, options?: { redirectUrl?: URL | string }): Promise<void> {
+    // Clear analytics buffers before sign-out to prevent cross-user event leakage
+    this._eventTracker?.clearBuffer();
+    this._sessionRecorder?.clearBuffer();
+
     await storeLock.withWriteLock(async () => {
       await this._interface.signOut(session);
       if (options?.redirectUrl) {
diff --git a/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts b/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts
index 74ec6d710d..bf48d4b23e 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/event-tracker.ts
@@ -7,9 +7,6 @@ const FLUSH_INTERVAL_MS = 10_000;
 const MAX_EVENTS_PER_BATCH = 50;
 const MAX_APPROX_BYTES_PER_BATCH = 64_000;
 
-const MAX_PREAUTH_BUFFER_EVENTS = 500;
-const MAX_PREAUTH_BUFFER_BYTES = 500_000;
-
 export type EventTrackerDeps = {
   projectId: string,
   getAccessToken: () => Promise<string | null>,
@@ -30,7 +27,6 @@ export class EventTracker {
   private _events: TrackedEvent[] = [];
   private _approxBytes = 0;
   private _lastKnownAccessToken: string | null = null;
-  private _wasAuthenticated = false;
   private _lastUrl: string | null = null;
   private readonly _sessionReplaySegmentId: string;
   private readonly _deps: EventTrackerDeps;
@@ -65,18 +61,17 @@ export class EventTracker {
     this._teardown();
   }
 
+  clearBuffer() {
+    this._events = [];
+    this._approxBytes = 0;
+  }
+
   private _pushEvent(event: TrackedEvent) {
     this._events.push(event);
     this._approxBytes += JSON.stringify(event).length;
     if (this._events.length >= MAX_EVENTS_PER_BATCH || this._approxBytes >= MAX_APPROX_BYTES_PER_BATCH) {
       runAsynchronously(() => this._flush({ keepalive: false }), { noErrorLogging: true });
     }
-
-    // Cap pre-auth buffer
-    if (!this._lastKnownAccessToken && (this._events.length > MAX_PREAUTH_BUFFER_EVENTS || this._approxBytes > MAX_PREAUTH_BUFFER_BYTES)) {
-      this._events = [];
-      this._approxBytes = 0;
-    }
   }
 
   private _capturePageView(entryType: "initial" | "push" | "replace" | "pop") {
@@ -266,12 +261,6 @@ export class EventTracker {
     }, { noErrorLogging: true });
 
     const hasAuth = !!this._lastKnownAccessToken;
-    // Clear buffer on logout to prevent cross-user event leakage
-    if (this._wasAuthenticated && !hasAuth) {
-      this._events = [];
-      this._approxBytes = 0;
-    }
-    this._wasAuthenticated = hasAuth;
     if (hasAuth && this._events.length > 0) {
       runAsynchronously(() => this._flush({ keepalive: false }), { noErrorLogging: true });
     }
diff --git a/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts b/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
index 1e90b8e7e5..2eb497bca6 100644
--- a/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
+++ b/packages/template/src/lib/stack-app/apps/implementations/session-replay.ts
@@ -86,9 +86,6 @@ const FLUSH_INTERVAL_MS = 5_000;
 const MAX_EVENTS_PER_BATCH = 200;
 const MAX_APPROX_BYTES_PER_BATCH = 512_000;
 
-const MAX_PREAUTH_BUFFER_EVENTS = 10_000;
-const MAX_PREAUTH_BUFFER_BYTES = 5_000_000;
-
 export type StoredSession = {
   session_id: string,
   created_at_ms: number,
@@ -152,7 +149,6 @@ export class SessionRecorder {
   private _takingSnapshot = false;
   private _flushInProgress = false;
   private _lastKnownAccessToken: string | null = null;
-  private _wasAuthenticated = false;
   private readonly _sessionReplaySegmentId: string;
   private readonly _storageKey: string;
   private readonly _deps: SessionRecorderDeps;
@@ -191,6 +187,11 @@ export class SessionRecorder {
     this._stopCurrentRecording();
   }
 
+  clearBuffer() {
+    this._events = [];
+    this._approxBytes = 0;
+  }
+
   private _persistActivity(nowMs: number): StoredSession {
     const stored = getOrRotateSession({ key: this._storageKey, nowMs });
     if (nowMs - this._lastPersistActivity < 5_000) return stored;
@@ -288,12 +289,6 @@ export class SessionRecorder {
         if (this._events.length >= MAX_EVENTS_PER_BATCH || this._approxBytes >= MAX_APPROX_BYTES_PER_BATCH) {
           runAsynchronously(() => this._flush({ keepalive: false }), { noErrorLogging: true });
         }
-
-        // Cap pre-auth buffer to prevent unbounded memory growth
-        if (!this._lastKnownAccessToken && (this._events.length > MAX_PREAUTH_BUFFER_EVENTS || this._approxBytes > MAX_PREAUTH_BUFFER_BYTES)) {
-          this._events = [];
-          this._approxBytes = 0;
-        }
       },
       maskAllInputs: this._replayOptions.maskAllInputs ?? true,
       ...(this._replayOptions.blockClass !== undefined ? { blockClass: this._replayOptions.blockClass } : {}),
@@ -336,12 +331,6 @@ export class SessionRecorder {
     }, { noErrorLogging: true });
 
     const hasAuth = !!this._lastKnownAccessToken;
-    // Clear buffer on logout to prevent cross-user event leakage
-    if (this._wasAuthenticated && !hasAuth) {
-      this._events = [];
-      this._approxBytes = 0;
-    }
-    this._wasAuthenticated = hasAuth;
     if (hasAuth && this._events.length > 0) {
       runAsynchronously(() => this._flush({ keepalive: false }), { noErrorLogging: true });
     }

From 91f1eed1379a67bfd7d1da59cd9dc4dda1425d0d Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Thu, 19 Feb 2026 09:58:23 -0800
Subject: [PATCH 16/21] use external clickhouse user

---
 .../app/api/latest/internal/session-replays/route.tsx  | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/backend/src/app/api/latest/internal/session-replays/route.tsx b/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
index 1513a5a090..7bb636ac43 100644
--- a/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
+++ b/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
@@ -1,4 +1,4 @@
-import { getClickhouseAdminClient } from "@/lib/clickhouse";
+import { getClickhouseExternalClient } from "@/lib/clickhouse";
 import { BooleanTrue, Prisma } from "@/generated/prisma/client";
 import { getPrismaClientForTenancy } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
@@ -38,11 +38,11 @@ async function loadClickQualifiedReplayIds(options: {
   branchId: string,
   clickCountMin: number,
 }): Promise<string[]> {
-  const clickhouseClient = getClickhouseAdminClient();
+  const clickhouseClient = getClickhouseExternalClient();
   const result = await clickhouseClient.query({
     query: `
       SELECT session_replay_id
-      FROM analytics_internal.events
+      FROM default.events
       WHERE project_id = {projectId:String}
         AND branch_id = {branchId:String}
         AND event_type = '$click'
@@ -54,6 +54,10 @@ async function loadClickQualifiedReplayIds(options: {
       branchId: options.branchId,
       clickCountMin: options.clickCountMin,
     },
+    clickhouse_settings: {
+      SQL_project_id: options.projectId,
+      SQL_branch_id: options.branchId,
+    },
     format: "JSONEachRow",
   });
 

From 58b5a56c8c170d1f3757cb0fe1f568c4acbf4480 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Thu, 19 Feb 2026 10:50:08 -0800
Subject: [PATCH 17/21] single query

---
 .../latest/internal/session-replays/route.tsx | 139 ++++++++----------
 1 file changed, 61 insertions(+), 78 deletions(-)

diff --git a/apps/backend/src/app/api/latest/internal/session-replays/route.tsx b/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
index 7bb636ac43..0133544489 100644
--- a/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
+++ b/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
@@ -1,6 +1,6 @@
 import { getClickhouseExternalClient } from "@/lib/clickhouse";
-import { BooleanTrue, Prisma } from "@/generated/prisma/client";
-import { getPrismaClientForTenancy } from "@/prisma-client";
+import { Prisma } from "@/generated/prisma/client";
+import { getPrismaClientForTenancy, getPrismaSchemaForTenancy, sqlQuoteIdent } from "@/prisma-client";
 import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
 import { KnownErrors } from "@stackframe/stack-shared";
 import { adaptSchema, adminAuthTypeSchema, yupArray, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
@@ -8,7 +8,7 @@ import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
 
 const DEFAULT_LIMIT = 50;
 const MAX_LIMIT = 200;
-const DURATION_OVERFETCH_MULTIPLIER = 5;
+const CLICK_FILTER_ID_CAP = 1000;
 
 function parseCsvIds(raw: string | undefined): string[] {
   if (!raw) return [];
@@ -48,11 +48,13 @@ async function loadClickQualifiedReplayIds(options: {
         AND event_type = '$click'
       GROUP BY session_replay_id
       HAVING count() >= {clickCountMin:UInt64}
+      LIMIT {cap:UInt64}
     `,
     query_params: {
       projectId: options.projectId,
       branchId: options.branchId,
       clickCountMin: options.clickCountMin,
+      cap: CLICK_FILTER_ID_CAP,
     },
     clickhouse_settings: {
       SQL_project_id: options.projectId,
@@ -107,6 +109,7 @@ export const GET = createSmartRouteHandler({
   }),
   async handler({ auth, query }) {
     const prisma = await getPrismaClientForTenancy(auth.tenancy);
+    const schema = await getPrismaSchemaForTenancy(auth.tenancy);
 
     const rawLimit = query.limit ?? String(DEFAULT_LIMIT);
     const parsedLimit = Number.parseInt(rawLimit, 10);
@@ -144,92 +147,72 @@ export const GET = createSmartRouteHandler({
       };
     }
 
-    // Build WHERE with all filters that can be pushed to the DB
-    const baseWhere: Prisma.SessionReplayWhereInput = {
-      tenancyId: auth.tenancy.id,
-      ...(userIdsFilter.length > 0 ? { projectUserId: { in: userIdsFilter } } : {}),
-      ...((lastEventAtFrom || lastEventAtTo) ? {
-        lastEventAt: {
-          ...(lastEventAtFrom ? { gte: lastEventAtFrom } : {}),
-          ...(lastEventAtTo ? { lte: lastEventAtTo } : {}),
-        },
-      } : {}),
-      ...(teamIdsFilter.length > 0 ? {
-        projectUser: {
-          teamMembers: {
-            some: {
-              teamId: { in: teamIdsFilter },
-            },
-          },
-        },
-      } : {}),
-      ...(clickQualifiedIds ? { id: { in: clickQualifiedIds } } : {}),
-    };
-
     // Handle cursor-based pagination
     const cursorId = query.cursor;
-    let cursorWhere: Prisma.SessionReplayWhereInput = {};
+    let cursorPivot: { id: string, lastEventAt: Date } | null = null;
     if (cursorId) {
-      const cursorPivot = await prisma.sessionReplay.findUnique({
+      cursorPivot = await prisma.sessionReplay.findUnique({
         where: { tenancyId_id: { tenancyId: auth.tenancy.id, id: cursorId } },
         select: { id: true, lastEventAt: true },
       });
       if (!cursorPivot) {
         throw new KnownErrors.ItemNotFound(cursorId);
       }
-      cursorWhere = {
-        OR: [
-          { lastEventAt: { lt: cursorPivot.lastEventAt } },
-          { AND: [{ lastEventAt: { equals: cursorPivot.lastEventAt } }, { id: { lt: cursorId } }] },
-        ],
-      };
     }
 
-    const finalWhere: Prisma.SessionReplayWhereInput = cursorId
-      ? { AND: [baseWhere, cursorWhere] }
-      : baseWhere;
-
-    // Overfetch when duration filter is active since it must be applied in memory
-    const hasDurationFilter = durationMsMin !== null || durationMsMax !== null;
-    const fetchSize = hasDurationFilter
-      ? Math.min((limit + 1) * DURATION_OVERFETCH_MULTIPLIER, MAX_LIMIT * DURATION_OVERFETCH_MULTIPLIER)
-      : limit + 1;
-
-    const sessions = await prisma.sessionReplay.findMany({
-      where: finalWhere,
-      orderBy: [{ lastEventAt: "desc" }, { id: "desc" }],
-      take: fetchSize,
-      select: {
-        id: true,
-        projectUserId: true,
-        startedAt: true,
-        lastEventAt: true,
-        projectUser: {
-          select: {
-            displayName: true,
-            contactChannels: {
-              where: { type: "EMAIL", isPrimary: BooleanTrue.TRUE },
-              select: { value: true },
-              take: 1,
-            },
-          },
-        },
-      },
-    });
+    type ReplayRow = {
+      id: string,
+      projectUserId: string,
+      startedAt: Date,
+      lastEventAt: Date,
+      projectUserDisplayName: string | null,
+      primaryEmail: string | null,
+    };
 
-    // Apply duration filter in memory (only filter that can't be pushed to the DB)
-    const filtered = hasDurationFilter
-      ? sessions.filter((row) => {
-        const durationMs = row.lastEventAt.getTime() - row.startedAt.getTime();
-        if (durationMsMin !== null && durationMs < durationMsMin) return false;
-        if (durationMsMax !== null && durationMs > durationMsMax) return false;
-        return true;
-      })
-      : sessions;
+    const rows = await prisma.$queryRaw<ReplayRow[]>`
+      SELECT
+        sr."id",
+        sr."projectUserId",
+        sr."startedAt",
+        sr."lastEventAt",
+        pu."displayName" AS "projectUserDisplayName",
+        (
+          SELECT cc."value"
+          FROM ${sqlQuoteIdent(schema)}."ContactChannel" cc
+          WHERE cc."projectUserId" = sr."projectUserId"
+            AND cc."tenancyId" = sr."tenancyId"
+            AND cc."type" = 'EMAIL'
+            AND cc."isPrimary" = 'TRUE'::"BooleanTrue"
+          LIMIT 1
+        ) AS "primaryEmail"
+      FROM ${sqlQuoteIdent(schema)}."SessionReplay" sr
+      JOIN ${sqlQuoteIdent(schema)}."ProjectUser" pu
+        ON pu."projectUserId" = sr."projectUserId"
+        AND pu."tenancyId" = sr."tenancyId"
+      WHERE sr."tenancyId" = ${auth.tenancy.id}::UUID
+        ${userIdsFilter.length > 0 ? Prisma.sql`AND sr."projectUserId" IN (${Prisma.join(userIdsFilter)})` : Prisma.empty}
+        ${lastEventAtFrom ? Prisma.sql`AND sr."lastEventAt" >= ${lastEventAtFrom}` : Prisma.empty}
+        ${lastEventAtTo ? Prisma.sql`AND sr."lastEventAt" <= ${lastEventAtTo}` : Prisma.empty}
+        ${teamIdsFilter.length > 0 ? Prisma.sql`AND EXISTS (
+          SELECT 1 FROM ${sqlQuoteIdent(schema)}."TeamMember" tm
+          WHERE tm."projectUserId" = sr."projectUserId"
+            AND tm."tenancyId" = sr."tenancyId"
+            AND tm."teamId" IN (${Prisma.join(teamIdsFilter)})
+        )` : Prisma.empty}
+        ${clickQualifiedIds ? Prisma.sql`AND sr."id" IN (${Prisma.join(clickQualifiedIds)})` : Prisma.empty}
+        ${durationMsMin !== null ? Prisma.sql`AND EXTRACT(EPOCH FROM (sr."lastEventAt" - sr."startedAt")) * 1000 >= ${durationMsMin}` : Prisma.empty}
+        ${durationMsMax !== null ? Prisma.sql`AND EXTRACT(EPOCH FROM (sr."lastEventAt" - sr."startedAt")) * 1000 <= ${durationMsMax}` : Prisma.empty}
+        ${cursorPivot ? Prisma.sql`AND (
+          sr."lastEventAt" < ${cursorPivot.lastEventAt}
+          OR (sr."lastEventAt" = ${cursorPivot.lastEventAt} AND sr."id" < ${cursorId})
+        )` : Prisma.empty}
+      ORDER BY sr."lastEventAt" DESC, sr."id" DESC
+      LIMIT ${limit + 1}
+    `;
 
-    const hasMore = filtered.length > limit || (hasDurationFilter && sessions.length === fetchSize);
-    const page = filtered.slice(0, limit);
-    const nextCursor = hasMore && page.length > 0 ? page[page.length - 1]!.id : null;
+    const hasMore = rows.length > limit;
+    const page = hasMore ? rows.slice(0, limit) : rows;
+    const nextCursor = hasMore ? page[page.length - 1]!.id : null;
 
     const sessionIds = page.map((row) => row.id);
     const chunkAggs = sessionIds.length
@@ -259,8 +242,8 @@ export const GET = createSmartRouteHandler({
             id: row.id,
             project_user: {
               id: row.projectUserId,
-              display_name: row.projectUser.displayName ?? null,
-              primary_email: row.projectUser.contactChannels[0]?.value ?? null,
+              display_name: row.projectUserDisplayName ?? null,
+              primary_email: row.primaryEmail ?? null,
             },
             started_at_millis: row.startedAt.getTime(),
             last_event_at_millis: row.lastEventAt.getTime(),

From bd2d0539aaf9491909a59a0c54a8d21d25e9dc90 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Thu, 19 Feb 2026 11:41:05 -0800
Subject: [PATCH 18/21] add replays link to source user

---
 .../[projectId]/analytics/replays/page-client.tsx  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
index 9ca2e81ce2..c3c5de0fc5 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/analytics/replays/page-client.tsx
@@ -2,6 +2,7 @@
 
 import { Alert, Button, Dialog, DialogContent, DialogHeader, DialogTitle, Skeleton, Switch, Typography } from "@/components/ui";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { StyledLink } from "@/components/link";
 import { useFromNow } from "@/hooks/use-from-now";
 import {
   getDesiredGlobalOffsetFromPlaybackState,
@@ -1741,9 +1742,16 @@ export default function PageClient() {
               )}
 
               <div className="shrink-0 px-3 py-2 border-b border-border/30 flex items-center justify-between gap-3 h-10">
-                <Typography className="text-sm font-medium truncate">
-                  {selectedRecording ? getRecordingTitle(selectedRecording) : ""}
-                </Typography>
+                {selectedRecording ? (
+                  <StyledLink
+                    href={`/projects/${encodeURIComponent(adminApp.projectId)}/users/${encodeURIComponent(selectedRecording.projectUser.id)}`}
+                    className="text-sm font-medium truncate"
+                  >
+                    {getRecordingTitle(selectedRecording)}
+                  </StyledLink>
+                ) : (
+                  <Typography className="text-sm font-medium truncate" />
+                )}
                 <ReplaySettingsButton
                   settings={ms.settings}
                   onSettingsChange={(updates) => actRef.current({ type: "UPDATE_SETTINGS", updates })}

From 68eecc66f22a6819b66624985a1cd6b828c51d0a Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Thu, 19 Feb 2026 12:08:44 -0800
Subject: [PATCH 19/21] add / fix session replay tests

---
 .../latest/internal/session-replays/route.tsx |  15 +-
 .../endpoints/api/v1/session-replays.test.ts  | 524 ++++++++++++++++--
 2 files changed, 485 insertions(+), 54 deletions(-)

diff --git a/apps/backend/src/app/api/latest/internal/session-replays/route.tsx b/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
index 0133544489..e1f69c8482 100644
--- a/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
+++ b/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
@@ -9,12 +9,23 @@ import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
 const DEFAULT_LIMIT = 50;
 const MAX_LIMIT = 200;
 const CLICK_FILTER_ID_CAP = 1000;
+const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
 
 function parseCsvIds(raw: string | undefined): string[] {
   if (!raw) return [];
   return raw.split(",").map(s => s.trim()).filter(Boolean);
 }
 
+function parseCsvUuids(name: string, raw: string | undefined): string[] {
+  const values = parseCsvIds(raw);
+  for (const value of values) {
+    if (!UUID_PATTERN.test(value)) {
+      throw new StatusError(StatusError.BadRequest, `${name} must contain valid UUID values`);
+    }
+  }
+  return values;
+}
+
 function parseNonNegativeInt(name: string, raw: string | undefined): number | null {
   if (!raw) return null;
   const value = Number(raw);
@@ -115,8 +126,8 @@ export const GET = createSmartRouteHandler({
     const parsedLimit = Number.parseInt(rawLimit, 10);
     const limit = Math.max(1, Math.min(MAX_LIMIT, Number.isFinite(parsedLimit) ? parsedLimit : DEFAULT_LIMIT));
 
-    const userIdsFilter = parseCsvIds(query.user_ids);
-    const teamIdsFilter = parseCsvIds(query.team_ids);
+    const userIdsFilter = parseCsvUuids("user_ids", query.user_ids);
+    const teamIdsFilter = parseCsvUuids("team_ids", query.team_ids);
     const durationMsMin = parseNonNegativeInt("duration_ms_min", query.duration_ms_min);
     const durationMsMax = parseNonNegativeInt("duration_ms_max", query.duration_ms_max);
     const clickCountMin = parseNonNegativeInt("click_count_min", query.click_count_min);
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts
index b10b0fdfd2..4357f9655f 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts
@@ -43,8 +43,19 @@ it("requires a user token", async ({ expect }) => {
     },
   });
 
-  expect(res.status).toBeGreaterThanOrEqual(400);
-  expect(res.status).toBeLessThan(500);
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 401,
+      "body": {
+        "code": "USER_AUTHENTICATION_REQUIRED",
+        "error": "User authentication required for this endpoint.",
+      },
+      "headers": Headers {
+        "x-stack-known-error": "USER_AUTHENTICATION_REQUIRED",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
 });
 
 it("throws error when analytics is not enabled", async ({ expect }) => {
@@ -65,8 +76,19 @@ it("throws error when analytics is not enabled", async ({ expect }) => {
     },
   });
 
-  expect(res.status).toBe(400);
-  expect(res.body?.code).toBe("ANALYTICS_NOT_ENABLED");
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": {
+        "code": "ANALYTICS_NOT_ENABLED",
+        "error": "Analytics is not enabled for this project.",
+      },
+      "headers": Headers {
+        "x-stack-known-error": "ANALYTICS_NOT_ENABLED",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
 });
 
 it("stores session replay batch metadata and dedupes by (session_replay_id, batch_id)", async ({ expect }) => {
@@ -95,13 +117,19 @@ it("stores session replay batch metadata and dedupes by (session_replay_id, batc
     },
   });
 
-  expect(first.status).toBe(200);
+  expect(first).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": {
+        "batch_id": "<stripped UUID>",
+        "deduped": false,
+        "s3_key": "session-replays/<stripped UUID>/main/<stripped UUID>/<stripped UUID>.json.gz",
+        "session_replay_id": "<stripped UUID>",
+      },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
   expect(typeof first.body?.session_replay_id).toBe("string");
-  expect(first.body).toMatchObject({
-    batch_id: batchId,
-    deduped: false,
-  });
-  expect(typeof first.body?.s3_key).toBe("string");
 
   const recordingId = first.body?.session_replay_id;
 
@@ -118,12 +146,19 @@ it("stores session replay batch metadata and dedupes by (session_replay_id, batc
     },
   });
 
-  expect(second.status).toBe(200);
-  expect(second.body).toMatchObject({
-    session_replay_id: recordingId,
-    batch_id: batchId,
-    deduped: true,
-  });
+  expect(second).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": {
+        "batch_id": "<stripped UUID>",
+        "deduped": true,
+        "s3_key": "session-replays/<stripped UUID>/main/<stripped UUID>/<stripped UUID>.json.gz",
+        "session_replay_id": "<stripped UUID>",
+      },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+  expect(second.body?.session_replay_id).toBe(recordingId);
 });
 
 it("rejects empty events", async ({ expect }) => {
@@ -144,8 +179,13 @@ it("rejects empty events", async ({ expect }) => {
     },
   });
 
-  expect(res.status).toBeGreaterThanOrEqual(400);
-  expect(res.status).toBeLessThan(500);
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "events must not be empty",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
 });
 
 it("rejects too many events", async ({ expect }) => {
@@ -168,8 +208,13 @@ it("rejects too many events", async ({ expect }) => {
     },
   });
 
-  expect(res.status).toBeGreaterThanOrEqual(400);
-  expect(res.status).toBeLessThan(500);
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "Too many events (max 5000)",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
 });
 
 it("rejects invalid browser_session_id", async ({ expect }) => {
@@ -190,8 +235,28 @@ it("rejects invalid browser_session_id", async ({ expect }) => {
     },
   });
 
-  expect(res.status).toBeGreaterThanOrEqual(400);
-  expect(res.status).toBeLessThan(500);
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": {
+        "code": "SCHEMA_ERROR",
+        "details": {
+          "message": deindent\`
+            Request validation failed on POST /api/v1/session-replays/batch:
+              - Invalid browser_session_id
+          \`,
+        },
+        "error": deindent\`
+          Request validation failed on POST /api/v1/session-replays/batch:
+            - Invalid browser_session_id
+        \`,
+      },
+      "headers": Headers {
+        "x-stack-known-error": "SCHEMA_ERROR",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
 });
 
 it("rejects invalid batch_id", async ({ expect }) => {
@@ -212,8 +277,28 @@ it("rejects invalid batch_id", async ({ expect }) => {
     },
   });
 
-  expect(res.status).toBeGreaterThanOrEqual(400);
-  expect(res.status).toBeLessThan(500);
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": {
+        "code": "SCHEMA_ERROR",
+        "details": {
+          "message": deindent\`
+            Request validation failed on POST /api/v1/session-replays/batch:
+              - Invalid batch_id
+          \`,
+        },
+        "error": deindent\`
+          Request validation failed on POST /api/v1/session-replays/batch:
+            - Invalid batch_id
+        \`,
+      },
+      "headers": Headers {
+        "x-stack-known-error": "SCHEMA_ERROR",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
 });
 
 it("rejects invalid session_replay_segment_id", async ({ expect }) => {
@@ -234,8 +319,28 @@ it("rejects invalid session_replay_segment_id", async ({ expect }) => {
     },
   });
 
-  expect(res.status).toBeGreaterThanOrEqual(400);
-  expect(res.status).toBeLessThan(500);
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": {
+        "code": "SCHEMA_ERROR",
+        "details": {
+          "message": deindent\`
+            Request validation failed on POST /api/v1/session-replays/batch:
+              - Invalid session_replay_segment_id
+          \`,
+        },
+        "error": deindent\`
+          Request validation failed on POST /api/v1/session-replays/batch:
+            - Invalid session_replay_segment_id
+        \`,
+      },
+      "headers": Headers {
+        "x-stack-known-error": "SCHEMA_ERROR",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
 });
 
 it("accepts events without timestamps (falls back to sent_at_ms)", async ({ expect }) => {
@@ -259,12 +364,19 @@ it("accepts events without timestamps (falls back to sent_at_ms)", async ({ expe
     },
   });
 
-  expect(res.status).toBe(200);
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 200,
+      "body": {
+        "batch_id": "<stripped UUID>",
+        "deduped": false,
+        "s3_key": "session-replays/<stripped UUID>/main/<stripped UUID>/<stripped UUID>.json.gz",
+        "session_replay_id": "<stripped UUID>",
+      },
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
   expect(typeof res.body?.session_replay_id).toBe("string");
-  expect(res.body).toMatchObject({
-    batch_id: batchId,
-    deduped: false,
-  });
 });
 
 it("rejects non-integer started_at_ms", async ({ expect }) => {
@@ -285,8 +397,28 @@ it("rejects non-integer started_at_ms", async ({ expect }) => {
     },
   });
 
-  expect(res.status).toBeGreaterThanOrEqual(400);
-  expect(res.status).toBeLessThan(500);
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": {
+        "code": "SCHEMA_ERROR",
+        "details": {
+          "message": deindent\`
+            Request validation failed on POST /api/v1/session-replays/batch:
+              - body.started_at_ms must be an integer
+          \`,
+        },
+        "error": deindent\`
+          Request validation failed on POST /api/v1/session-replays/batch:
+            - body.started_at_ms must be an integer
+        \`,
+      },
+      "headers": Headers {
+        "x-stack-known-error": "SCHEMA_ERROR",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
 });
 
 it("rejects oversized payloads", async ({ expect }) => {
@@ -310,7 +442,13 @@ it("rejects oversized payloads", async ({ expect }) => {
     },
   });
 
-  expect(res.status).toBe(413);
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 413,
+      "body": "Request body too large (max 5000000 bytes)",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
 });
 
 it("admin can list session replays, list chunks, and fetch events", async ({ expect }) => {
@@ -425,8 +563,20 @@ it("admin list session replays rejects unknown cursor", async ({ expect }) => {
     accessType: "admin",
   });
 
-  expect(res.status).toBe(404);
-  expect(res.body?.code).toBe("ITEM_NOT_FOUND");
+  expect(res).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 404,
+      "body": {
+        "code": "ITEM_NOT_FOUND",
+        "details": { "item_id": "<stripped UUID>" },
+        "error": "Item with ID \\"<stripped UUID>\\" not found.",
+      },
+      "headers": Headers {
+        "x-stack-known-error": "ITEM_NOT_FOUND",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
 });
 
 it("admin list chunks paginates and rejects a cursor from another session", async ({ expect }) => {
@@ -504,8 +654,20 @@ it("admin list chunks paginates and rejects a cursor from another session", asyn
     method: "GET",
     accessType: "admin",
   });
-  expect(bad.status).toBe(404);
-  expect(bad.body?.code).toBe("ITEM_NOT_FOUND");
+  expect(bad).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 404,
+      "body": {
+        "code": "ITEM_NOT_FOUND",
+        "details": { "item_id": "<stripped UUID>" },
+        "error": "Item with ID \\"<stripped UUID>\\" not found.",
+      },
+      "headers": Headers {
+        "x-stack-known-error": "ITEM_NOT_FOUND",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
 });
 
 it("admin events endpoint does not allow fetching a chunk via the wrong session id", async ({ expect }) => {
@@ -552,8 +714,20 @@ it("admin events endpoint does not allow fetching a chunk via the wrong session
     method: "GET",
     accessType: "admin",
   });
-  expect(wrong.status).toBe(404);
-  expect(wrong.body?.code).toBe("ITEM_NOT_FOUND");
+  expect(wrong).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 404,
+      "body": {
+        "code": "ITEM_NOT_FOUND",
+        "details": { "item_id": "<stripped UUID>" },
+        "error": "Item with ID \\"<stripped UUID>\\" not found.",
+      },
+      "headers": Headers {
+        "x-stack-known-error": "ITEM_NOT_FOUND",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
 });
 
 it("non-admin access cannot call internal session replays endpoints", async ({ expect }) => {
@@ -564,15 +738,45 @@ it("non-admin access cannot call internal session replays endpoints", async ({ e
     method: "GET",
     accessType: "client",
   });
-  expect(clientRes.status).toBeGreaterThanOrEqual(400);
-  expect(clientRes.status).toBeLessThan(500);
+  expect(clientRes).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 401,
+      "body": {
+        "code": "INSUFFICIENT_ACCESS_TYPE",
+        "details": {
+          "actual_access_type": "client",
+          "allowed_access_types": ["admin"],
+        },
+        "error": "The x-stack-access-type header must be 'admin', but was 'client'.",
+      },
+      "headers": Headers {
+        "x-stack-known-error": "INSUFFICIENT_ACCESS_TYPE",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
 
   const serverRes = await niceBackendFetch("/api/v1/internal/session-replays", {
     method: "GET",
     accessType: "server",
   });
-  expect(serverRes.status).toBeGreaterThanOrEqual(400);
-  expect(serverRes.status).toBeLessThan(500);
+  expect(serverRes).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 401,
+      "body": {
+        "code": "INSUFFICIENT_ACCESS_TYPE",
+        "details": {
+          "actual_access_type": "server",
+          "allowed_access_types": ["admin"],
+        },
+        "error": "The x-stack-access-type header must be 'admin', but was 'server'.",
+      },
+      "headers": Headers {
+        "x-stack-known-error": "INSUFFICIENT_ACCESS_TYPE",
+        <some fields may have been hidden>,
+      },
+    }
+  `);
 });
 
 it("groups batches from same refresh token into one session replay", async ({ expect }) => {
@@ -926,39 +1130,255 @@ it("admin list session replays filters by click_count_min", async ({ expect }) =
   expect(resAll.body?.items?.length).toBeGreaterThanOrEqual(2);
 });
 
+it("admin list session replays rejects invalid UUID values in user_ids and team_ids", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Auth.Otp.signIn();
+
+  const invalidUserIds = await listReplays({ user_ids: "not-a-uuid" });
+  expect(invalidUserIds).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "user_ids must contain valid UUID values",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+
+  const invalidTeamIds = await listReplays({ team_ids: "not-a-uuid" });
+  expect(invalidTeamIds).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "team_ids must contain valid UUID values",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
+});
+
+it("admin list session replays paginates correctly when last_event_at timestamps are identical", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+
+  const baseTime = 1_700_000_000_000;
+
+  await Auth.Otp.signIn();
+  const uploadA = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    startedAtMs: baseTime,
+    sentAtMs: baseTime + 500,
+    events: [{ type: 1, timestamp: baseTime + 100 }],
+  });
+  expect(uploadA.status).toBe(200);
+  const replayIdA = uploadA.body?.session_replay_id;
+
+  await bumpEmailAddress();
+  await Auth.Otp.signIn();
+  const uploadB = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    startedAtMs: baseTime,
+    sentAtMs: baseTime + 500,
+    events: [{ type: 1, timestamp: baseTime + 100 }],
+  });
+  expect(uploadB.status).toBe(200);
+  const replayIdB = uploadB.body?.session_replay_id;
+
+  const first = await listReplays({ limit: "1" });
+  expect(first.status).toBe(200);
+  expect(first.body?.items?.length).toBe(1);
+  const firstId = first.body?.items?.[0]?.id;
+  expect([replayIdA, replayIdB]).toContain(firstId);
+
+  const nextCursor = first.body?.pagination?.next_cursor;
+  expect(typeof nextCursor).toBe("string");
+  if (typeof nextCursor !== "string") {
+    throw new Error("Expected next_cursor to be a string.");
+  }
+
+  const second = await listReplays({ limit: "1", cursor: nextCursor });
+  expect(second.status).toBe(200);
+  expect(second.body?.items?.length).toBe(1);
+  const secondId = second.body?.items?.[0]?.id;
+  expect([replayIdA, replayIdB]).toContain(secondId);
+  expect(secondId).not.toBe(firstId);
+});
+
+it("admin list session replays combines filters with AND semantics", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+
+  const userA = await Auth.Otp.signIn();
+  const uploadA = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    startedAtMs: 1_700_000_000_000,
+    sentAtMs: 1_700_000_000_500,
+    events: [{ type: 1, timestamp: 1_700_000_000_100 }],
+  });
+  expect(uploadA.status).toBe(200);
+  const { teamId } = await Team.create({ accessType: "server", creatorUserId: userA.userId });
+
+  await bumpEmailAddress();
+  const userB = await Auth.Otp.signIn();
+  const uploadB = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    startedAtMs: 1_700_000_000_000,
+    sentAtMs: 1_700_000_000_600,
+    events: [{ type: 1, timestamp: 1_700_000_000_200 }],
+  });
+  expect(uploadB.status).toBe(200);
+
+  const matchingIntersection = await listReplays({ user_ids: userA.userId, team_ids: teamId });
+  expect(matchingIntersection.status).toBe(200);
+  expect(matchingIntersection.body?.items?.length).toBe(1);
+  expect(matchingIntersection.body?.items?.[0]?.project_user?.id).toBe(userA.userId);
+
+  const nonMatchingIntersection = await listReplays({ user_ids: userB.userId, team_ids: teamId });
+  expect(nonMatchingIntersection.status).toBe(200);
+  expect(nonMatchingIntersection.body?.items?.length).toBe(0);
+});
+
+it("admin list session replays returns empty page with null next_cursor when click_count_min has no matches", async ({ expect }) => {
+  await Project.createAndSwitch({ config: { magic_link_enabled: true } });
+  await Project.updateConfig({ apps: { installed: { analytics: { enabled: true } } } });
+
+  const now = Date.now();
+  await Auth.Otp.signIn();
+  const segmentId = randomUUID();
+
+  const upload = await uploadBatch({
+    browserSessionId: randomUUID(),
+    batchId: randomUUID(),
+    sessionReplaySegmentId: segmentId,
+    startedAtMs: now,
+    sentAtMs: now + 500,
+    events: [{ type: 1, timestamp: now + 100 }],
+  });
+  expect(upload.status).toBe(200);
+
+  const eventBatch = await uploadEventBatch({
+    sessionReplaySegmentId: segmentId,
+    batchId: randomUUID(),
+    sentAtMs: now + 600,
+    events: [{
+      event_type: "$click",
+      event_at_ms: now + 120,
+      data: {
+        tag_name: "button",
+        text: "Click",
+        href: null,
+        selector: "button",
+        x: 10,
+        y: 20,
+        page_x: 10,
+        page_y: 20,
+        viewport_width: 1920,
+        viewport_height: 1080,
+      },
+    }],
+  });
+  expect(eventBatch.status).toBe(200);
+
+  // Wait until click data is visible, then assert a no-match threshold.
+  let clickVisible = false;
+  for (let i = 0; i < 15; i++) {
+    const res = await listReplays({ click_count_min: "1" });
+    expect(res.status).toBe(200);
+    if ((res.body?.items?.length ?? 0) >= 1) {
+      clickVisible = true;
+      break;
+    }
+    await wait(500);
+  }
+  expect(clickVisible).toBe(true);
+
+  const noMatch = await listReplays({ click_count_min: "9999" });
+  expect(noMatch.status).toBe(200);
+  expect(noMatch.body?.items).toEqual([]);
+  expect(noMatch.body?.pagination?.next_cursor).toBeNull();
+});
+
 it("admin list session replays rejects invalid filter parameters", async ({ expect }) => {
   await Project.createAndSwitch({ config: { magic_link_enabled: true } });
   await Auth.Otp.signIn();
 
   // Non-integer duration_ms_min
   const res1 = await listReplays({ duration_ms_min: "abc" });
-  expect(res1.status).toBe(400);
+  expect(res1).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "duration_ms_min must be a non-negative integer",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
 
   // Negative duration_ms_min
   const res2 = await listReplays({ duration_ms_min: "-1" });
-  expect(res2.status).toBe(400);
+  expect(res2).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "duration_ms_min must be a non-negative integer",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
 
   // Non-integer duration_ms_max
   const res3 = await listReplays({ duration_ms_max: "12.5" });
-  expect(res3.status).toBe(400);
+  expect(res3).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "duration_ms_max must be a non-negative integer",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
 
   // Inverted duration range (min > max)
   const res4 = await listReplays({ duration_ms_min: "5000", duration_ms_max: "1000" });
-  expect(res4.status).toBe(400);
+  expect(res4).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "duration_ms_min must be less than or equal to duration_ms_max",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
 
   // NaN timestamp
   const res5 = await listReplays({ last_event_at_from_millis: "not-a-number" });
-  expect(res5.status).toBe(400);
+  expect(res5).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "last_event_at_from_millis must be a non-negative timestamp in milliseconds",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
 
   // Inverted time range (from > to)
   const res6 = await listReplays({ last_event_at_from_millis: "2000", last_event_at_to_millis: "1000" });
-  expect(res6.status).toBe(400);
+  expect(res6).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "last_event_at_from_millis must be less than or equal to last_event_at_to_millis",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
 
   // Non-integer click_count_min
   const res7 = await listReplays({ click_count_min: "1.5" });
-  expect(res7.status).toBe(400);
+  expect(res7).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "click_count_min must be a non-negative integer",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
 
   // Negative click_count_min
   const res8 = await listReplays({ click_count_min: "-3" });
-  expect(res8.status).toBe(400);
+  expect(res8).toMatchInlineSnapshot(`
+    NiceResponse {
+      "status": 400,
+      "body": "click_count_min must be a non-negative integer",
+      "headers": Headers { <some fields may have been hidden> },
+    }
+  `);
 });

From 5120e08ce8f3a07e9efe88afa386e98b01048a30 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Thu, 19 Feb 2026 16:28:18 -0800
Subject: [PATCH 20/21] import stack-shared uuid check

---
 .../src/app/api/latest/internal/session-replays/route.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/backend/src/app/api/latest/internal/session-replays/route.tsx b/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
index e1f69c8482..e3c3d3b9b9 100644
--- a/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
+++ b/apps/backend/src/app/api/latest/internal/session-replays/route.tsx
@@ -5,11 +5,11 @@ import { createSmartRouteHandler } from "@/route-handlers/smart-route-handler";
 import { KnownErrors } from "@stackframe/stack-shared";
 import { adaptSchema, adminAuthTypeSchema, yupArray, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
+import { isUuid } from "@stackframe/stack-shared/dist/utils/uuids";
 
 const DEFAULT_LIMIT = 50;
 const MAX_LIMIT = 200;
 const CLICK_FILTER_ID_CAP = 1000;
-const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
 
 function parseCsvIds(raw: string | undefined): string[] {
   if (!raw) return [];
@@ -19,7 +19,7 @@ function parseCsvIds(raw: string | undefined): string[] {
 function parseCsvUuids(name: string, raw: string | undefined): string[] {
   const values = parseCsvIds(raw);
   for (const value of values) {
-    if (!UUID_PATTERN.test(value)) {
+    if (!isUuid(value)) {
       throw new StatusError(StatusError.BadRequest, `${name} must contain valid UUID values`);
     }
   }

From 51299e4063052601e4d7b49b837c78779bc6d9b3 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Tue, 24 Feb 2026 12:31:10 -0800
Subject: [PATCH 21/21] fix test

---
 apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts
index 5c49d5d684..0c699b5a1c 100644
--- a/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts
+++ b/apps/e2e/tests/backend/endpoints/api/v1/session-replays.test.ts
@@ -445,7 +445,7 @@ it("rejects oversized payloads", async ({ expect }) => {
   expect(res).toMatchInlineSnapshot(`
     NiceResponse {
       "status": 413,
-      "body": "Request body too large (max 5000000 bytes)",
+      "body": "Request body too large (max 1000000 bytes)",
       "headers": Headers { <some fields may have been hidden> },
     }
   `);