feat: add pagination state and offset to session API calls

Made-with: Cursor

frontend/src/pages/History.jsx

@@ -15,6 +15,8 @@ function History() {
   const [loading, setLoading] = useState(true);
   const [totalCount, setTotalCount] = useState(0);
   const [absoluteTotal, setAbsoluteTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [prevLastDate, setPrevLastDate] = useState(null);
   const [closingSession, setClosingSession] = useState(null);
 
   const [filter, setFilter] = useState(() => localStorage.getItem(prefixKey(adminName, 'history-filter')) || 'default');
@@ -29,18 +31,26 @@ function History() {
 
   const loadSessions = useCallback(async () => {
     try {
+      const limitNum = limit === 'all' ? null : parseInt(limit, 10);
+      const offset = limitNum ? (page - 1) * limitNum : 0;
+
       const response = await api.get('/sessions', {
-        params: { filter, limit }
+        params: { filter, limit, offset: offset || undefined }
       });
       setSessions(response.data);
       setTotalCount(parseInt(response.headers['x-total-count'] || '0', 10));
       setAbsoluteTotal(parseInt(response.headers['x-absolute-total'] || '0', 10));
+      setPrevLastDate(response.headers['x-prev-last-date'] || null);
+
+      if (response.data.length === 0 && offset > 0) {
+        setPage(1);
+      }
     } catch (err) {
       console.error('Failed to load sessions', err);
     } finally {
       setLoading(false);
     }
-  }, [filter, limit]);
+  }, [filter, limit, page]);
 
   useEffect(() => {
     loadSessions();
@@ -66,12 +76,14 @@ function History() {
     setFilter(newFilter);
     localStorage.setItem(prefixKey(adminName, 'history-filter'), newFilter);
     setSelectedIds(new Set());
+    setPage(1);
   };
 
   const handleLimitChange = (newLimit) => {
     setLimit(newLimit);
     localStorage.setItem(prefixKey(adminName, 'history-show-limit'), newLimit);
     setSelectedIds(new Set());
+    setPage(1);
   };
 
   const handleCloseSession = async (sessionId, notes) => {
@@ -102,6 +114,7 @@ function History() {
     setSelectMode(false);
     setSelectedIds(new Set());
     setShowBulkDeleteConfirm(false);
+    setPage(1);
   };
 
   const handlePointerDown = (sessionId) => {
@@ -111,6 +124,7 @@ function History() {
       longPressFired.current = true;
       setSelectMode(true);
       setSelectedIds(new Set([sessionId]));
+      setPage(1);
     }, 500);
   };
 
@@ -188,7 +202,7 @@ function History() {
             </span>
             {isAuthenticated && (
               <button
-                onClick={selectMode ? exitSelectMode : () => setSelectMode(true)}
+                onClick={selectMode ? exitSelectMode : () => { setSelectMode(true); setPage(1); }}
                 className={`px-3 py-1.5 rounded text-sm font-medium transition ${
                   selectMode
                     ? 'bg-indigo-600 dark:bg-indigo-700 text-white hover:bg-indigo-700 dark:hover:bg-indigo-800'