add pagination

netlify/functions/get-upload-details.ts

···
 import { getDbClient } from './db';
 import cookie from 'cookie';
 
+const DEFAULT_PAGE_SIZE = 50;
+const MAX_PAGE_SIZE = 100;
+
 export const handler: Handler = async (event: HandlerEvent): Promise<HandlerResponse> => {
   try {
     const uploadId = event.queryStringParameters?.uploadId;
+    const page = parseInt(event.queryStringParameters?.page || '1');
+    const pageSize = Math.min(
+      parseInt(event.queryStringParameters?.pageSize || String(DEFAULT_PAGE_SIZE)),
+      MAX_PAGE_SIZE
+    );
 
     if (!uploadId) {
       return {
···
       };
     }
 
+    if (page < 1 || pageSize < 1) {
+      return {
+        statusCode: 400,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ error: 'Invalid page or pageSize parameters' }),
+      };
+    }
+
     // Get session from cookie
     const cookies = event.headers.cookie ? cookie.parse(event.headers.cookie) : {};
     const sessionId = cookies.atlast_session;
···
 
     const sql = getDbClient();
 
-    // Verify upload belongs to user
+    // Verify upload belongs to user and get total count
     const uploadCheck = await sql`
-      SELECT upload_id FROM user_uploads
+      SELECT upload_id, total_users FROM user_uploads
       WHERE upload_id = ${uploadId} AND did = ${userSession.did}
     `;
 
···
       };
     }
 
-    // Fetch detailed results for this upload
+    const totalUsers = (uploadCheck as any[])[0].total_users;
+    const totalPages = Math.ceil(totalUsers / pageSize);
+    const offset = (page - 1) * pageSize;
+
+    // Fetch paginated results with optimized query
     const results = await sql`
       SELECT 
         sa.source_username,
···
       LEFT JOIN user_match_status ums ON am.id = ums.atproto_match_id AND ums.did = ${userSession.did}
       WHERE usf.upload_id = ${uploadId}
       ORDER BY sa.source_username
+      LIMIT ${pageSize}
+      OFFSET ${offset}
     `;
 
     // Group results by source username
···
       headers: {
         'Content-Type': 'application/json',
         'Access-Control-Allow-Origin': '*',
+        'Cache-Control': 'private, max-age=600', // 10 minute browser cache
       },
-      body: JSON.stringify({ results: searchResults }),
+      body: JSON.stringify({ 
+        results: searchResults,
+        pagination: {
+          page,
+          pageSize,
+          totalPages,
+          totalUsers,
+          hasNextPage: page < totalPages,
+          hasPrevPage: page > 1
+        }
+      }),
     };
 
   } catch (error) {

src/lib/apiClient.ts

···
     return data;
   },
 
-  async getUploadDetails(uploadId: string): Promise<{
+  async getUploadDetails(
+    uploadId: string, 
+    page: number = 1, 
+    pageSize: number = 50
+  ): Promise<{
     results: SearchResult[];
+    pagination?: {
+      page: number;
+      pageSize: number;
+      totalPages: number;
+      totalUsers: number;
+      hasNextPage: boolean;
+      hasPrevPage: boolean;
+    };
   }> {
-    // Check cache first
-    const cacheKey = `upload-details-${uploadId}`;
-    const cached = cache.get<any>(cacheKey, 10 * 60 * 1000); // 10 minute cache for specific upload
+    // Check cache first (cache by page)
+    const cacheKey = `upload-details-${uploadId}-p${page}-s${pageSize}`;
+    const cached = cache.get<any>(cacheKey, 10 * 60 * 1000);
     if (cached) {
-      console.log('Returning cached upload details for', uploadId);
+      console.log('Returning cached upload details for', uploadId, 'page', page);
       return cached;
     }
 
-    const res = await fetch(`/.netlify/functions/get-upload-details?uploadId=${uploadId}`, {
-      credentials: 'include'
-    });
+    const res = await fetch(
+      `/.netlify/functions/get-upload-details?uploadId=${uploadId}&page=${page}&pageSize=${pageSize}`, 
+      { credentials: 'include' }
+    );
 
     if (!res.ok) {
       throw new Error('Failed to fetch upload details');
···
 
     const data = await res.json();
     
-    // Cache upload details for 10 minutes
+    // Cache upload details page for 10 minutes
     cache.set(cacheKey, data, 10 * 60 * 1000);
     
     return data;
   },
 
+  // Helper to load all pages (for backwards compatibility)
+  async getAllUploadDetails(uploadId: string): Promise<{ results: SearchResult[] }> {
+    const firstPage = await this.getUploadDetails(uploadId, 1, 100);
+    
+    if (!firstPage.pagination || firstPage.pagination.totalPages === 1) {
+      return { results: firstPage.results };
+    }
+
+    // Load remaining pages
+    const allResults = [...firstPage.results];
+    const promises = [];
+    
+    for (let page = 2; page <= firstPage.pagination.totalPages; page++) {
+      promises.push(this.getUploadDetails(uploadId, page, 100));
+    }
+
+    const remainingPages = await Promise.all(promises);
+    for (const pageData of remainingPages) {
+      allResults.push(...pageData.results);
+    }
+
+    return { results: allResults };
+  },
+
   // Search Operations
   async batchSearchActors(usernames: string[]): Promise<{ results: BatchSearchResult[] }> {
     // Create cache key from sorted usernames (so order doesn't matter)
     const cacheKey = `search-${usernames.slice().sort().join(',')}`;
-    const cached = cache.get<any>(cacheKey, 10 * 60 * 1000); // 10 minute cache for search results
+    const cached = cache.get<any>(cacheKey, 10 * 60 * 1000);
     if (cached) {
       console.log('Returning cached search results for', usernames.length, 'users');
       return cached;
···
 
     const data = await res.json();
     
+    // Invalidate uploads cache after following
+    cache.invalidate('uploads');
+    cache.invalidatePattern('upload-details');
+    
     return data;
   },
 
···
         const data = await res.json();
         console.log(`Successfully saved ${data.matchedUsers} matches`);
         
-        // Invalidate uploads cache after saving
+        // Invalidate caches after saving
         cache.invalidate('uploads');
-        cache.set(`upload-details-${uploadId}`, { results }, 10 * 60 * 1000);
+        cache.invalidatePattern('upload-details');
         
         return data;
       } else {