refactor(dashboard): data-grid overhaul + session-replays / team-payments surfaces

- Rewrite data-grid with URL-synced state, new sizing logic, tests
- Move analytics/replays → session-replays; add per-user session replays card
- Add team-analytics and team-payments to team detail page
- Add project_user.last_active_at index + permission-definitions pagination
- Various editable-input / inline-save-discard / settings polish

Author: mantrakp04

AGENTS.md

@@ -95,7 +95,8 @@ To see all development ports, refer to the index.html of `apps/dev-launchpad/pub
 - When building internal tools for Stack Auth developers (eg. internal interfaces like the WAL info log etc.): Make the interfaces look very concise, assume the user is a pro-user. This only applies to internal tools that are used primarily by Stack Auth developers.
 - The dev server already builds the packages in the background whenever you update a file. If you run into issues with typechecking or linting in a dependency after updating something in a package, just wait a few seconds, and then try again, and they will likely be resolved.
 - When asked to review PR comments, you can use `gh pr status` to get the current pull request you're working on.
-- NEVER EVER AUTOMATICALLY COMMIT OR STAGE ANY CHANGES — DON'T MODIFY GIT WITHOUT USER CONSENT!
+- NEVER EVER AUTOMATICALLY COMMIT OR STAGE ANY CHANGES — DON'T MODIFY GIT WITHOUT USER CONSENT! if its already staged and you didnt do it then dont unstage it.
+- NEVER run destructive or working-tree-mutating git operations without EXPLICIT user permission in the current turn. This includes (non-exhaustive): `git stash` / `stash pop` / `stash drop` / `stash clear`, `git reset` (any flag), `git checkout -- <path>` / `git restore`, `git clean`, `git rebase`, `git revert`, `git commit --amend`, `git push --force` / `--force-with-lease`, `git branch -D`, `git tag -d`, `git filter-branch`, `git update-ref`. Read-only inspection (`git status`, `git diff`, `git log`, `git blame`, `git show`, `git show HEAD:path`) is fine. If you think a destructive op is the right move, describe it and wait for a yes — do NOT run it to "verify" or "clean up".
 - When building frontend or React code for the dashboard, refer to DESIGN-GUIDE.md.
 - NEVER implement a hacky solution without EXPLICIT approval from the user. Always go the extra mile to make sure the solution is clean, maintainable, and robust.
 - Fail early, fail loud. Fail fast with an error instead of silently continuing.

apps/backend/package.json

@@ -12,6 +12,7 @@
     "with-env:prod": "dotenv -c production --",
     "with-env:test": "dotenv -c test --",
     "dev": "BACKEND_PORT=${STACK_DEV_FALLBACK_BACKEND:+${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}10} && BACKEND_PORT=${BACKEND_PORT:-${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}02} && concurrently -n \"dev,codegen,prisma-studio,email-queue,cron-jobs,bulldozer-studio\" -k \"STACK_DISABLE_REACT_ASYNC_DEBUG_INFO=${STACK_DISABLE_REACT_ASYNC_DEBUG_INFO:-true} next dev --port $BACKEND_PORT ${STACK_BACKEND_DEV_EXTRA_ARGS:-}\" \"pnpm run codegen:watch\" \"pnpm run prisma-studio\" \"pnpm run run-email-queue\" \"pnpm run run-cron-jobs\" \"pnpm run run-bulldozer-studio\"",
+    "dev:tui": "pnpm run dev",
     "dev:inspect": "STACK_BACKEND_DEV_EXTRA_ARGS=\"--inspect\" pnpm run dev",
     "dev:profile": "STACK_BACKEND_DEV_EXTRA_ARGS=\"--experimental-cpu-prof\" pnpm run dev",
     "build": "pnpm run codegen && next build",

apps/backend/prisma/migrations/20260507000000_add_project_user_last_active_at_idx/migration.sql

@@ -0,0 +1,11 @@
+-- SPLIT_STATEMENT_SENTINEL
+-- SINGLE_STATEMENT_SENTINEL
+-- RUN_OUTSIDE_TRANSACTION_SENTINEL
+CREATE INDEX CONCURRENTLY IF NOT EXISTS "ProjectUser_lastActiveAt_asc"
+  ON "ProjectUser"("tenancyId", "isAnonymous", "lastActiveAt" ASC);
+
+-- SPLIT_STATEMENT_SENTINEL
+-- SINGLE_STATEMENT_SENTINEL
+-- RUN_OUTSIDE_TRANSACTION_SENTINEL
+CREATE INDEX CONCURRENTLY IF NOT EXISTS "ProjectUser_lastActiveAt_desc"
+  ON "ProjectUser"("tenancyId", "isAnonymous", "lastActiveAt" DESC);

apps/backend/prisma/schema.prisma

@@ -333,6 +333,8 @@ model ProjectUser {
   @@index([tenancyId, createdAt(sort: Asc)], name: "ProjectUser_createdAt_asc")
   @@index([tenancyId, createdAt(sort: Desc)], name: "ProjectUser_createdAt_desc")
   @@index([tenancyId, isAnonymous, signedUpAt(sort: Asc)], name: "ProjectUser_signedUpAt_asc")
+  @@index([tenancyId, isAnonymous, lastActiveAt(sort: Asc)], name: "ProjectUser_lastActiveAt_asc")
+  @@index([tenancyId, isAnonymous, lastActiveAt(sort: Desc)], name: "ProjectUser_lastActiveAt_desc")
   @@index([tenancyId, isAnonymous, signUpIp, signedUpAt], name: "ProjectUser_signUpIp_recent_idx")
   @@index([tenancyId, isAnonymous, signUpEmailNormalized, signedUpAt], name: "ProjectUser_signUpEmailNormalized_recent_idx")
   @@index([tenancyId, isAnonymous, signUpEmailBase, signedUpAt], name: "ProjectUser_signUpEmailBase_recent_idx")

apps/backend/src/app/api/latest/internal/session-replays/route.tsx

@@ -100,6 +100,8 @@ export const GET = createSmartRouteHandler({
       last_event_at_from_millis: yupString().optional(),
       last_event_at_to_millis: yupString().optional(),
       click_count_min: yupString().optional(),
+      sort_direction: yupString().oneOf(["asc", "desc"]).optional(),
+      q: yupString().optional(),
     }).optional(),
   }),
   response: yupObject({
@@ -138,6 +140,8 @@ export const GET = createSmartRouteHandler({
     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);
+    const sortDirection: "asc" | "desc" = query.sort_direction === "asc" ? "asc" : "desc";
+    const searchQuery = query.q?.trim() || null;
 
     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");
@@ -176,6 +180,24 @@ export const GET = createSmartRouteHandler({
       }
     }
 
+    const cursorComparator = sortDirection === "asc"
+      ? cursorPivot
+        ? Prisma.sql`AND (
+            sr."lastEventAt" > ${cursorPivot.lastEventAt}
+            OR (sr."lastEventAt" = ${cursorPivot.lastEventAt} AND sr."id" > ${cursorId})
+          )`
+        : Prisma.empty
+      : cursorPivot
+        ? Prisma.sql`AND (
+            sr."lastEventAt" < ${cursorPivot.lastEventAt}
+            OR (sr."lastEventAt" = ${cursorPivot.lastEventAt} AND sr."id" < ${cursorId})
+          )`
+        : Prisma.empty;
+
+    const orderBySql = sortDirection === "asc"
+      ? Prisma.sql`ORDER BY sr."lastEventAt" ASC, sr."id" ASC`
+      : Prisma.sql`ORDER BY sr."lastEventAt" DESC, sr."id" DESC`;
+
     const suffixSql = Prisma.sql`
         ${userIdsFilter.length > 0 ? Prisma.sql`AND sr."projectUserId" IN (${Prisma.join(userIdsFilter)})` : Prisma.empty}
         ${lastEventAtFrom ? Prisma.sql`AND sr."lastEventAt" >= ${lastEventAtFrom}` : Prisma.empty}
@@ -189,11 +211,12 @@ export const GET = createSmartRouteHandler({
         ${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})
+        ${searchQuery ? Prisma.sql`AND (
+          sr."id"::text ILIKE ${`%${searchQuery}%`}
+          OR pu."displayName" ILIKE ${`%${searchQuery}%`}
         )` : Prisma.empty}
-      ORDER BY sr."lastEventAt" DESC, sr."id" DESC
+        ${cursorComparator}
+      ${orderBySql}
       LIMIT ${limit + 1}
     `;
 

apps/backend/src/app/api/latest/permission-definitions-pagination.ts

@@ -0,0 +1,44 @@
+type PermissionDefinition = {
+  id: string,
+  description?: string,
+  contained_permission_ids: string[],
+};
+
+type ListQuery = {
+  limit?: number,
+  cursor?: string,
+  query?: string,
+};
+
+/**
+ * Permission definitions live in tenancy config rather than a DB table, so
+ * paginating them means filtering and slicing the in-memory list returned by
+ * `listPermissionDefinitions`. The list is already sorted by id, which makes
+ * the id a stable cursor.
+ */
+export function paginatePermissionDefinitions(items: PermissionDefinition[], query: ListQuery) {
+  const search = query.query?.trim().toLowerCase();
+  const filtered = search
+    ? items.filter((p) =>
+      p.id.toLowerCase().includes(search)
+      || (p.description?.toLowerCase().includes(search) ?? false))
+    : items;
+
+  if (query.limit === undefined) {
+    return { items: filtered, is_paginated: false as const };
+  }
+
+  const startIdx = query.cursor
+    ? filtered.findIndex((p) => p.id === query.cursor) + 1 || filtered.length
+    : 0;
+  const slice = filtered.slice(startIdx, startIdx + query.limit);
+  const hasMore = startIdx + query.limit < filtered.length;
+
+  return {
+    items: slice,
+    is_paginated: true as const,
+    pagination: {
+      next_cursor: hasMore && slice.length > 0 ? slice[slice.length - 1].id : null,
+    },
+  };
+}

apps/backend/src/app/api/latest/project-permission-definitions/crud.tsx

@@ -2,14 +2,20 @@ import { createPermissionDefinition, deletePermissionDefinition, listPermissionD
 import { getPrismaClientForTenancy, globalPrismaClient } from "@/prisma-client";
 import { createCrudHandlers } from "@/route-handlers/crud-handler";
 import { projectPermissionDefinitionsCrud } from '@stackframe/stack-shared/dist/interface/crud/project-permissions';
-import { permissionDefinitionIdSchema, yupObject } from "@stackframe/stack-shared/dist/schema-fields";
+import { permissionDefinitionIdSchema, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { createLazyProxy } from "@stackframe/stack-shared/dist/utils/proxies";
+import { paginatePermissionDefinitions } from "../permission-definitions-pagination";
 
 
 export const projectPermissionDefinitionsCrudHandlers = createLazyProxy(() => createCrudHandlers(projectPermissionDefinitionsCrud, {
   paramsSchema: yupObject({
     permission_id: permissionDefinitionIdSchema.defined(),
   }),
+  querySchema: yupObject({
+    limit: yupNumber().integer().min(1).optional().meta({ openapiField: { onlyShowInOperations: ['List'], description: "Maximum number of items to return. When set, the response is paginated via cursor." } }),
+    cursor: yupString().optional().meta({ openapiField: { onlyShowInOperations: ['List'], description: "Cursor (permission id) to start the next page from." } }),
+    query: yupString().optional().meta({ openapiField: { onlyShowInOperations: ['List'], description: "Free-text filter applied to permission id and description (case-insensitive)." } }),
+  }),
   async onCreate({ auth, data }) {
     return await createPermissionDefinition(
       globalPrismaClient,
@@ -45,13 +51,11 @@ export const projectPermissionDefinitionsCrudHandlers = createLazyProxy(() => cr
       }
     );
   },
-  async onList({ auth }) {
-    return {
-      items: await listPermissionDefinitions({
-        scope: "project",
-        tenancy: auth.tenancy,
-      }),
-      is_paginated: false,
-    };
+  async onList({ auth, query }) {
+    const all = await listPermissionDefinitions({
+      scope: "project",
+      tenancy: auth.tenancy,
+    });
+    return paginatePermissionDefinitions(all, query);
   },
 }));

apps/backend/src/app/api/latest/team-permission-definitions/crud.tsx

@@ -2,13 +2,19 @@ import { createPermissionDefinition, deletePermissionDefinition, listPermissionD
 import { getPrismaClientForTenancy, globalPrismaClient } from "@/prisma-client";
 import { createCrudHandlers } from "@/route-handlers/crud-handler";
 import { teamPermissionDefinitionsCrud } from '@stackframe/stack-shared/dist/interface/crud/team-permissions';
-import { permissionDefinitionIdSchema, yupObject } from "@stackframe/stack-shared/dist/schema-fields";
+import { permissionDefinitionIdSchema, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { createLazyProxy } from "@stackframe/stack-shared/dist/utils/proxies";
+import { paginatePermissionDefinitions } from "../permission-definitions-pagination";
 
 export const teamPermissionDefinitionsCrudHandlers = createLazyProxy(() => createCrudHandlers(teamPermissionDefinitionsCrud, {
   paramsSchema: yupObject({
     permission_id: permissionDefinitionIdSchema.defined(),
   }),
+  querySchema: yupObject({
+    limit: yupNumber().integer().min(1).optional().meta({ openapiField: { onlyShowInOperations: ['List'], description: "Maximum number of items to return. When set, the response is paginated via cursor." } }),
+    cursor: yupString().optional().meta({ openapiField: { onlyShowInOperations: ['List'], description: "Cursor (permission id) to start the next page from." } }),
+    query: yupString().optional().meta({ openapiField: { onlyShowInOperations: ['List'], description: "Free-text filter applied to permission id and description (case-insensitive)." } }),
+  }),
   async onCreate({ auth, data }) {
     return await createPermissionDefinition(
       globalPrismaClient,
@@ -48,13 +54,11 @@ export const teamPermissionDefinitionsCrudHandlers = createLazyProxy(() => creat
       }
     );
   },
-  async onList({ auth }) {
-    return {
-      items: await listPermissionDefinitions({
-        scope: "team",
-        tenancy: auth.tenancy,
-      }),
-      is_paginated: false,
-    };
+  async onList({ auth, query }) {
+    const all = await listPermissionDefinitions({
+      scope: "team",
+      tenancy: auth.tenancy,
+    });
+    return paginatePermissionDefinitions(all, query);
   },
 }));

apps/backend/src/app/api/latest/teams/crud.tsx

@@ -10,11 +10,12 @@ import { runAsynchronouslyAndWaitUntil } from "@/utils/background-tasks";
 import { Prisma, PurchaseCreationSource } from "@/generated/prisma/client";
 import { KnownErrors } from "@stackframe/stack-shared";
 import { teamsCrud } from "@stackframe/stack-shared/dist/interface/crud/teams";
-import { userIdOrMeSchema, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { userIdOrMeSchema, yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { validateBase64Image } from "@stackframe/stack-shared/dist/utils/base64";
 import { StatusError, throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { getOrUndefined } from "@stackframe/stack-shared/dist/utils/objects";
 import { createLazyProxy } from "@stackframe/stack-shared/dist/utils/proxies";
+import { isUuid } from "@stackframe/stack-shared/dist/utils/uuids";
 import { addUserToTeam } from "../team-memberships/crud";
 
 
@@ -35,6 +36,11 @@ export const teamsCrudHandlers = createLazyProxy(() => createCrudHandlers(teamsC
     user_id: userIdOrMeSchema.optional().meta({ openapiField: { onlyShowInOperations: ['List'], description: 'Filter for the teams that the user is a member of. Can be either `me` or an ID. Must be `me` in the client API', exampleValue: 'me' } }),
     /** @deprecated use creator_user_id in the body instead */
     add_current_user: yupString().oneOf(["true", "false"]).optional().meta({ openapiField: { onlyShowInOperations: ['Create'], hidden: true } }),
+    order_by: yupString().oneOf(["createdAt"]).optional().meta({ openapiField: { onlyShowInOperations: ['List'], description: 'Field to order results by. Currently only `createdAt` is supported.', exampleValue: 'createdAt' } }),
+    desc: yupString().oneOf(["true", "false"]).optional().meta({ openapiField: { onlyShowInOperations: ['List'], description: 'Whether to order results in descending order. Defaults to false (ascending).', exampleValue: 'false' } }),
+    limit: yupNumber().integer().min(1).optional().meta({ openapiField: { onlyShowInOperations: ['List'], description: 'The maximum number of items to return.' } }),
+    cursor: yupString().uuid().optional().meta({ openapiField: { onlyShowInOperations: ['List'], description: 'The cursor to start the result set from.' } }),
+    query: yupString().optional().meta({ openapiField: { onlyShowInOperations: ['List'], description: "A search query to filter the results by. Free-text search applied to the team's id (exact-match) and display name." } }),
   }),
   paramsSchema: yupObject({
     team_id: yupString().uuid().defined(),
@@ -274,6 +280,8 @@ export const teamsCrudHandlers = createLazyProxy(() => createCrudHandlers(teamsC
     }
 
     const prisma = await getPrismaClientForTenancy(auth.tenancy);
+    const queryWithoutSpecialChars = query.query?.replace(/[^a-zA-Z0-9\-_.]/g, '');
+    const sortDirection = query.desc === 'true' ? 'desc' : 'asc';
     const db = await prisma.team.findMany({
       where: {
         tenancyId: auth.tenancy.id,
@@ -284,12 +292,48 @@ export const teamsCrudHandlers = createLazyProxy(() => createCrudHandlers(teamsC
             },
           },
         } : {},
+        ...query.query ? {
+          OR: [
+            ...isUuid(queryWithoutSpecialChars!) ? [{
+              teamId: {
+                equals: queryWithoutSpecialChars,
+              },
+            }] : [],
+            {
+              displayName: {
+                contains: query.query,
+                mode: 'insensitive' as const,
+              },
+            },
+          ],
+        } : {},
       },
-      orderBy: {
-        createdAt: 'asc',
-      },
+      orderBy: [
+        { createdAt: sortDirection },
+        { teamId: sortDirection },
+      ],
+      take: query.limit ? query.limit + 1 : undefined,
+      ...query.cursor ? {
+        cursor: {
+          tenancyId_teamId: {
+            tenancyId: auth.tenancy.id,
+            teamId: query.cursor,
+          },
+        },
+      } : {},
     });
 
+    if (query.limit) {
+      const items = db.slice(0, query.limit).map(teamPrismaToCrud);
+      return {
+        items,
+        is_paginated: true,
+        pagination: {
+          next_cursor: db.length >= query.limit + 1 ? db[db.length - 1].teamId : null,
+        },
+      };
+    }
+
     return {
       items: db.map(teamPrismaToCrud),
       is_paginated: false,

apps/backend/src/app/api/latest/users/crud.tsx

@@ -522,7 +522,7 @@ export const usersCrudHandlers = createLazyProxy(() => createCrudHandlers(usersC
     team_id: yupString().uuid().optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "Only return users who are members of the given team" } }),
     limit: yupNumber().integer().min(1).optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "The maximum number of items to return" } }),
     cursor: yupString().uuid().optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "The cursor to start the result set from." } }),
-    order_by: yupString().oneOf(['signed_up_at']).optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "The field to sort the results by. Defaults to signed_up_at" } }),
+    order_by: yupString().oneOf(['signed_up_at', 'last_active_at']).optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "The field to sort the results by. Defaults to signed_up_at" } }),
     desc: yupString().oneOf(["true", "false"]).optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "Whether to sort the results in descending order. Defaults to false" } }),
     query: yupString().optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "A search query to filter the results by. This is a free-text search that is applied to the user's id (exact-match only), display name and primary email." } }),
     include_anonymous: yupString().oneOf(["true", "false"]).optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "Whether to include anonymous users in the results. When true, also includes restricted users. Defaults to false" } }),
@@ -624,6 +624,7 @@ export const usersCrudHandlers = createLazyProxy(() => createCrudHandlers(usersC
         {
           [({
             signed_up_at: 'signedUpAt',
+            last_active_at: 'lastActiveAt',
           } as const)[query.order_by ?? 'signed_up_at']]: sortDirection,
         },
         { projectUserId: sortDirection },