feat(dashboard): implement paginated teams listing and enhance permission handling

- Introduced pagination for teams in the dashboard, allowing for efficient data retrieval and display.
- Updated permission definitions to include cursor-based pagination, improving user experience when navigating through permissions.
- Refactored various components to utilize the new paginated API, ensuring consistency across the application.
- Added error handling for pagination and improved loading states in user session replays and team member tables.
- Enhanced the data grid to support URL-synced state for column widths and visibility, improving user customization options.

This update significantly enhances the dashboard's performance and usability, particularly for users managing large teams and permissions.

Author: mantrakp04

apps/backend/prisma/schema.prisma

@@ -333,6 +333,9 @@ 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")
+  // ASC + DESC pair for lastActiveAt to match the createdAt/displayName
+  // convention above. signedUpAt remains ASC-only (legacy); revisit if its
+  // descending queries ever show up in slow-query logs.
   @@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")

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

@@ -1,3 +1,5 @@
+import { KnownErrors } from "@stackframe/stack-shared";
+
 type PermissionDefinition = {
   id: string,
   description?: string,
@@ -15,6 +17,12 @@ type ListQuery = {
  * 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.
+ *
+ * Cursor convention: `cursor` is the id of the last item returned on the
+ * previous page; the next page starts immediately after it. If the cursor
+ * isn't present in the filtered list (e.g. the caller's `query` filter
+ * changed across pages) we throw rather than silently returning an empty
+ * page — that way the caller learns to reset their pagination state.
  */
 export function paginatePermissionDefinitions(items: PermissionDefinition[], query: ListQuery) {
   const search = query.query?.trim().toLowerCase();
@@ -28,9 +36,14 @@ export function paginatePermissionDefinitions(items: PermissionDefinition[], que
     return { items: filtered, is_paginated: false as const };
   }
 
-  const startIdx = query.cursor
-    ? filtered.findIndex((p) => p.id === query.cursor) + 1 || filtered.length
-    : 0;
+  let startIdx = 0;
+  if (query.cursor) {
+    const cursorIdx = filtered.findIndex((p) => p.id === query.cursor);
+    if (cursorIdx === -1) {
+      throw new KnownErrors.ItemNotFound(query.cursor);
+    }
+    startIdx = cursorIdx + 1;
+  }
   const slice = filtered.slice(startIdx, startIdx + query.limit);
   const hasMore = startIdx + query.limit < filtered.length;
 

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

@@ -280,8 +280,28 @@ 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';
+
+    let queryFilter: Prisma.TeamWhereInput | undefined;
+    if (query.query) {
+      const sanitized = query.query.replace(/[^a-zA-Z0-9\-_.]/g, '');
+      queryFilter = {
+        OR: [
+          ...isUuid(sanitized) ? [{
+            teamId: {
+              equals: sanitized,
+            },
+          }] : [],
+          {
+            displayName: {
+              contains: query.query,
+              mode: 'insensitive' as const,
+            },
+          },
+        ],
+      };
+    }
+
     const db = await prisma.team.findMany({
       where: {
         tenancyId: auth.tenancy.id,
@@ -292,28 +312,18 @@ export const teamsCrudHandlers = createLazyProxy(() => createCrudHandlers(teamsC
             },
           },
         } : {},
-        ...query.query ? {
-          OR: [
-            ...isUuid(queryWithoutSpecialChars!) ? [{
-              teamId: {
-                equals: queryWithoutSpecialChars,
-              },
-            }] : [],
-            {
-              displayName: {
-                contains: query.query,
-                mode: 'insensitive' as const,
-              },
-            },
-          ],
-        } : {},
+        ...queryFilter ?? {},
       },
       orderBy: [
         { createdAt: sortDirection },
         { teamId: sortDirection },
       ],
       take: query.limit ? query.limit + 1 : undefined,
+      // Cursor convention: `cursor` is the id of the last item returned to
+      // the caller on the previous page. Prisma's cursor is inclusive, so we
+      // must `skip: 1` to exclude that row from the new page.
       ...query.cursor ? {
+        skip: 1,
         cursor: {
           tenancyId_teamId: {
             tenancyId: auth.tenancy.id,
@@ -325,11 +335,12 @@ export const teamsCrudHandlers = createLazyProxy(() => createCrudHandlers(teamsC
 
     if (query.limit) {
       const items = db.slice(0, query.limit).map(teamPrismaToCrud);
+      const hasMore = db.length > query.limit;
       return {
         items,
         is_paginated: true,
         pagination: {
-          next_cursor: db.length >= query.limit + 1 ? db[db.length - 1].teamId : null,
+          next_cursor: hasMore && items.length > 0 ? items[items.length - 1].id : null,
         },
       };
     }

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/teams/page-client.tsx

@@ -16,7 +16,7 @@ type CreateDialogProps = {
 
 export default function PageClient() {
   const stackAdminApp = useAdminApp();
-  const teams = stackAdminApp.useTeams({ limit: 1 });
+  const teams = stackAdminApp.useTeamsPaginated({ limit: 1 });
   const project = stackAdminApp.useProject();
 
   const [createTeamsOpen, setCreateTeamsOpen] = React.useState(false);

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx

@@ -202,9 +202,9 @@ function RestrictionDialog({
   open: boolean,
   onOpenChange: (open: boolean) => void,
 }) {
-  const restrictedByAdmin = (user as any).restrictedByAdmin ?? false;
-  const restrictedByAdminReason = (user as any).restrictedByAdminReason ?? null;
-  const restrictedByAdminPrivateDetails = (user as any).restrictedByAdminPrivateDetails ?? null;
+  const restrictedByAdmin = user.restrictedByAdmin;
+  const restrictedByAdminReason = user.restrictedByAdminReason;
+  const restrictedByAdminPrivateDetails = user.restrictedByAdminPrivateDetails;
 
   const [publicReason, setPublicReason] = useState(restrictedByAdminReason ?? '');
   const [privateDetails, setPrivateDetails] = useState(restrictedByAdminPrivateDetails ?? '');
@@ -227,7 +227,7 @@ function RestrictionDialog({
 
     setIsSaving(true);
     try {
-      await user.update({ restrictedByAdmin: true, restrictedByAdminReason: publicReason.trim() || null, restrictedByAdminPrivateDetails: privateDetails.trim() || null } as any);
+      await user.update({ restrictedByAdmin: true, restrictedByAdminReason: publicReason.trim() || null, restrictedByAdminPrivateDetails: privateDetails.trim() || null });
       onOpenChange(false);
     } catch (error) {
       captureError(`user-restriction-save-and-restrict-error`, new StackAssertionError(`Failed to save and restrict user ${user.id}`, { cause: error }));
@@ -243,7 +243,7 @@ function RestrictionDialog({
         restrictedByAdmin: false,
         restrictedByAdminReason: null,
         restrictedByAdminPrivateDetails: null,
-      } as any);
+      });
       onOpenChange(false);
     } finally {
       setIsSaving(false);
@@ -316,9 +316,9 @@ function RestrictionDialog({
 function RestrictionBanner({ user }: { user: ServerUser }) {
   if (!user.isRestricted) return null;
 
-  const restrictedByAdmin = (user as any).restrictedByAdmin ?? false;
-  const restrictedByAdminReason = (user as any).restrictedByAdminReason ?? null;
-  const restrictedByAdminPrivateDetails = (user as any).restrictedByAdminPrivateDetails ?? null;
+  const restrictedByAdmin = user.restrictedByAdmin;
+  const restrictedByAdminReason = user.restrictedByAdminReason;
+  const restrictedByAdminPrivateDetails = user.restrictedByAdminPrivateDetails;
   const reasonText = getRestrictionReasonText(user);
 
   return (

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/user-page-table-section.tsx

@@ -16,6 +16,10 @@ type UserPageTableSectionProps<TRow> = {
   onLoadMore?: () => void,
   onSortChange?: (model: DataGridSortModel) => void,
   paginated?: boolean,
+  /** True until the first request settles. When true and rows is empty, show a loading state instead of "empty". */
+  isInitialLoading?: boolean,
+  /** Non-null when the latest fetch failed. Rendered in place of empty/loading state. */
+  error?: ReactNode | null,
 };
 
 export function UserPageTableSection<TRow,>({
@@ -31,6 +35,8 @@ export function UserPageTableSection<TRow,>({
   onLoadMore,
   onSortChange,
   paginated,
+  isInitialLoading,
+  error,
 }: UserPageTableSectionProps<TRow>) {
   const [gridState, setGridState] = useState(() => createDefaultDataGridState(columns));
   const gridData = useDataSource({
@@ -81,7 +87,11 @@ export function UserPageTableSection<TRow,>({
             ))}
           </div>
           <div className="flex min-h-16 items-center justify-center py-4 text-sm font-medium text-muted-foreground">
-            {emptyLabel}
+            {error
+              ? error
+              : isInitialLoading
+                ? "Loading…"
+                : emptyLabel}
           </div>
         </div>
       ) : (

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/user-session-replays.tsx

@@ -42,6 +42,8 @@ export function UserSessionReplaysSection({ user }: { user: ServerUser }) {
   const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [hasMore, setHasMore] = useState(false);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
   const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
   const [searchInput, setSearchInput] = useState("");
   const [searchQuery, setSearchQuery] = useState("");
@@ -78,7 +80,14 @@ export function UserSessionReplaysSection({ user }: { user: ServerUser }) {
       setRows((prev) => (cursor ? [...prev, ...res.items] : res.items));
       setNextCursor(res.nextCursor);
       setHasMore(res.nextCursor !== null);
+      setError(null);
+    } catch (e) {
+      if (reqId !== requestIdRef.current) return;
+      setError(e instanceof Error ? e.message : "Failed to load session replays");
     } finally {
+      if (reqId === requestIdRef.current && cursor === null) {
+        setIsInitialLoading(false);
+      }
       if (cursor !== null) {
         loadingMoreRef.current = false;
         setIsLoadingMore(false);
@@ -91,6 +100,8 @@ export function UserSessionReplaysSection({ user }: { user: ServerUser }) {
     setRows([]);
     setNextCursor(null);
     setHasMore(false);
+    setIsInitialLoading(true);
+    setError(null);
     runAsynchronously(() => fetchPage(null), { noErrorLogging: true });
   }, [fetchPage]);
 
@@ -160,6 +171,8 @@ export function UserSessionReplaysSection({ user }: { user: ServerUser }) {
       rows={rows}
       getRowId={(replay) => replay.id}
       emptyLabel="No session replays for this user"
+      isInitialLoading={isInitialLoading}
+      error={error}
       onRowClick={(row) => navigateToReplay(row.id)}
       onSortChange={onSortChange}
       hasMore={hasMore}

apps/dashboard/src/components/data-table/team-member-table.tsx

@@ -24,7 +24,7 @@ import {
   type DataGridState,
 } from "@stackframe/dashboard-ui-components";
 import { CheckCircleIcon, CopyIcon, XCircleIcon } from "@phosphor-icons/react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDebounce } from "use-debounce";
 import * as yup from "yup";
 import { Link } from "../link";
@@ -212,7 +212,10 @@ function EditPermissionDialog(props: {
           return await props.user.revokePermission(props.team, p.id);
         }
       });
-      await Promise.allSettled(promises);
+      // Use Promise.all so a single failed grant/revoke aborts and the dialog
+      // stays open — otherwise users see "saved" while only some permissions
+      // were applied.
+      await Promise.all(promises);
       props.onSubmit();
     }}
     cancelButton
@@ -261,10 +264,32 @@ function Actions(props: {
   );
 }
 
+const PERMISSION_FETCH_TIMEOUT_MS = 10_000;
+
+function withTimeout<T>(promise: Promise<T>, ms: number, label: string): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error(`${label} timed out after ${ms}ms`)), ms);
+    promise.then(
+      (v) => {
+        clearTimeout(timer);
+        resolve(v);
+      },
+      (e) => {
+        clearTimeout(timer);
+        reject(e);
+      },
+    );
+  });
+}
+
 export function TeamMemberTable(props: { team: ServerTeam }) {
   const stackAdminApp = useAdminApp();
   const [updateCounter, setUpdateCounter] = useState(0);
   const [permissions, setPermissions] = useState<Map<string, string[]>>(new Map());
+  // Bumped each time we kick off a new generator request; setPermissions
+  // calls from older requests no-op so that a slow earlier fetch can't
+  // clobber the state of a fresh one.
+  const permissionRequestIdRef = useRef(0);
 
   const teamMemberColumns = useMemo<DataGridColumnDef<ExtendedServerUserForTeam>[]>(() => [
     {
@@ -366,6 +391,7 @@ export function TeamMemberTable(props: { team: ServerTeam }) {
 
   const dataSource = useMemo<DataGridDataSource<ExtendedServerUserForTeam>>(
     () => async function* (params) {
+      const reqId = ++permissionRequestIdRef.current;
       const activeSort = params.sorting.find((s) => s.columnId === "lastActiveAt");
       const sortDesc = activeSort?.direction !== "asc";
       const cursor = typeof params.cursor === "string" ? params.cursor : undefined;
@@ -383,12 +409,20 @@ export function TeamMemberTable(props: { team: ServerTeam }) {
         includeRestricted: true,
       });
       const extended = extendUsers(result);
+      // Bound each per-user permission fetch so a single slow user can't
+      // hang the whole grid page indefinitely.
       const permissionResults = await Promise.all(
         extended.map(async (user) => {
-          const perms = await user.listPermissions(props.team, { recursive: false });
+          const perms = await withTimeout(
+            user.listPermissions(props.team, { recursive: false }),
+            PERMISSION_FETCH_TIMEOUT_MS,
+            `listPermissions(${user.id})`,
+          );
           return [user.id, perms.map(p => p.id)] as const;
         })
       );
+      // Drop the result if a newer request started while we were fetching.
+      if (reqId !== permissionRequestIdRef.current) return;
       setPermissions((prev) => {
         const next = new Map(prev);
         for (const [id, perms] of permissionResults) next.set(id, perms);

apps/dashboard/src/components/data-table/team-table.tsx

@@ -169,7 +169,7 @@ export function TeamTable() {
       const search = typeof params.quickSearch === "string" && params.quickSearch.trim().length > 0
         ? params.quickSearch.trim()
         : undefined;
-      const result = await stackAdminApp.listTeams({
+      const result = await stackAdminApp.listTeamsPaginated({
         limit: PAGE_SIZE,
         orderBy: "createdAt",
         desc: sortDesc,

apps/e2e/tests/backend/endpoints/api/v1/teams.test.ts

@@ -83,6 +83,45 @@ it("lists all the teams the current user has on the server", async ({ expect })
   `);
 });
 
+it("paginates teams across two pages without duplicates or skips", async ({ expect }) => {
+  await Project.createAndSwitch();
+
+  // Create 5 teams. Use a stable, ordered display name so we can assert the
+  // sequence after pagination.
+  const teamCount = 5;
+  for (let i = 0; i < teamCount; i++) {
+    const createResponse = await niceBackendFetch("/api/v1/teams", {
+      accessType: "server",
+      method: "POST",
+      body: { display_name: `Pagination team ${i.toString().padStart(2, "0")}` },
+    });
+    expect(createResponse.status).toBe(201);
+  }
+
+  const limit = 3;
+  const page1 = await niceBackendFetch(`/api/v1/teams?limit=${limit}`, { accessType: "server" });
+  expect(page1.status).toBe(200);
+  expect(page1.body.is_paginated).toBe(true);
+  expect(page1.body.items).toHaveLength(limit);
+  const cursor = page1.body.pagination?.next_cursor;
+  expect(cursor).toEqual(expect.any(String));
+
+  // Cursor should be the id of the last item we received, not a peek-ahead.
+  expect(cursor).toBe(page1.body.items[limit - 1].id);
+
+  const page2 = await niceBackendFetch(`/api/v1/teams?limit=${limit}&cursor=${encodeURIComponent(cursor)}`, { accessType: "server" });
+  expect(page2.status).toBe(200);
+  expect(page2.body.items.length).toBe(teamCount - limit);
+
+  const page1Ids = new Set(page1.body.items.map((t: any) => t.id));
+  const page2Ids = page2.body.items.map((t: any) => t.id);
+  for (const id of page2Ids) {
+    expect(page1Ids.has(id)).toBe(false); // no duplicates across pages
+  }
+  expect(page1.body.items.length + page2.body.items.length).toBe(teamCount); // no skips
+  expect(page2.body.pagination?.next_cursor ?? null).toBeNull();
+});
+
 it("creates a team on the client", async ({ expect }) => {
   await Auth.fastSignUp();
   await Team.createWithCurrentAsCreator();