From 0833cf616775e98517e4a11f81f06aee1da92491 Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Mon, 23 Mar 2026 11:35:42 -0400
Subject: [PATCH] feat: add Prev/Next pagination bar to session history

Made-with: Cursor
---
 frontend/src/pages/History.jsx | 36 ++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/frontend/src/pages/History.jsx b/frontend/src/pages/History.jsx
index 5db64bf..8ff8b1c 100644
--- a/frontend/src/pages/History.jsx
+++ b/frontend/src/pages/History.jsx
@@ -371,6 +371,42 @@ function History() {
           </div>
         )}
 
+        {/* Pagination bar */}
+        {limit !== 'all' && (() => {
+          const limitNum = parseInt(limit, 10);
+          const totalPages = Math.ceil(totalCount / limitNum);
+          if (totalPages <= 1) return null;
+          return (
+            <div className="flex justify-center items-center gap-4 py-3 mt-3 border-t border-gray-200 dark:border-gray-700">
+              <button
+                onClick={() => { setPage(p => p - 1); setSelectedIds(new Set()); }}
+                disabled={page <= 1}
+                className={`px-4 py-1.5 rounded-md text-sm font-medium transition ${
+                  page <= 1
+                    ? 'bg-gray-600 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed'
+                    : 'bg-indigo-600 text-white hover:bg-indigo-700'
+                }`}
+              >
+                ← Prev
+              </button>
+              <span className="text-sm text-gray-500 dark:text-gray-400">
+                Page {page} of {totalPages}
+              </span>
+              <button
+                onClick={() => { setPage(p => p + 1); setSelectedIds(new Set()); }}
+                disabled={page >= totalPages}
+                className={`px-4 py-1.5 rounded-md text-sm font-medium transition ${
+                  page >= totalPages
+                    ? 'bg-gray-600 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed'
+                    : 'bg-indigo-600 text-white hover:bg-indigo-700'
+                }`}
+              >
+                Next →
+              </button>
+            </div>
+          );
+        })()}
+
         {/* Multi-select Action Bar */}
         {selectMode && selectedIds.size > 0 && (
           <div className="sticky bottom-4 mt-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-4 flex justify-between items-center">