Add Query tab pagination and format large numbers in pagination displays

- Add pagination to Explore > Query tab to prevent browser crashes from large result sets
  - Results paginated with 25 rows per page
  - User-specified LIMIT/OFFSET clauses respected when paginating
  - Count queries correctly handle user's limit/offset via subquery
  - Empty results show "No results found" message
- Add new backend endpoints: /api/query/fetch_override and /api/query/count_raw
- Format large numbers with thousand separators across all pagination displays
  - Applied to: Explore tabs, Alerts, Scan History, Search Results, Roots, Schedules

Author: gtunes-dev

CHANGELOG.md

@@ -7,9 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+- **Query tab pagination**: Added pagination support to the Explore > Query tab to prevent browser crashes from large result sets
+  - Results are now paginated with 25 rows per page
+  - User-specified LIMIT and OFFSET clauses are respected when paginating through results
+  - Count queries correctly account for user's limit/offset to show accurate total counts
+  - Empty result sets display "No results found" message
+
 ### Changed
 - **Explore page**: Tab state is now preserved when switching between tabs (filters, sort, column visibility/order, pagination)
   - Added reset button to restore columns to default settings
+- **Number formatting**: Large numbers in pagination displays now show thousand separators (e.g., "1,205,980" instead of "1205980")
+  - Applied consistently across all paginated views: Explore tabs, Alerts, Scan History, Search Results, Roots, and Schedules
 
 ### Fixed
 - **Item detail sheet**: Fixed calendar widget appearing over modification date entries in History card

frontend/src/pages/alerts/AlertsPage.tsx

@@ -460,7 +460,7 @@ export function AlertsPage() {
           {/* Pagination */}
           <div className="flex items-center justify-between">
             <div className="text-sm text-muted-foreground whitespace-nowrap">
-              Showing {totalCount > 0 ? start : 0} - {end} of {totalCount} alerts
+              Showing {(totalCount > 0 ? start : 0).toLocaleString()} - {end.toLocaleString()} of {totalCount.toLocaleString()} alerts
             </div>
             <div className="flex gap-2">
               <Button

frontend/src/pages/browse/SearchResultsList.tsx

@@ -159,7 +159,7 @@ export function SearchResultsList({ rootId, searchQuery, showTombstones }: Searc
       {/* Results count and pagination info */}
       <div className="flex items-center justify-between px-4 py-2 text-sm text-muted-foreground border-b">
         <span>
-          {totalCount} result{totalCount !== 1 ? 's' : ''} found
+          {totalCount.toLocaleString()} result{totalCount !== 1 ? 's' : ''} found
         </span>
         {totalPages > 1 && (
           <span>

frontend/src/pages/explore/DataExplorerView.tsx

@@ -414,8 +414,8 @@ export function DataExplorerView({ domain }: DataExplorerViewProps) {
               {/* Pagination */}
               <div className="flex items-center justify-between p-4 border-t border-border">
                 <div className="text-sm text-muted-foreground">
-                  Showing {(currentPage - 1) * ITEMS_PER_PAGE + 1} to{' '}
-                  {Math.min(currentPage * ITEMS_PER_PAGE, totalCount)} of {totalCount}
+                  Showing {((currentPage - 1) * ITEMS_PER_PAGE + 1).toLocaleString()} to{' '}
+                  {Math.min(currentPage * ITEMS_PER_PAGE, totalCount).toLocaleString()} of {totalCount.toLocaleString()}
                 </div>
                 <div className="flex items-center gap-2">
                   <button

frontend/src/pages/explore/QueryView.tsx

@@ -17,6 +17,8 @@ interface QueryResult {
   alignments: Alignment[]
 }
 
+const ITEMS_PER_PAGE = 25
+
 const SAMPLE_QUERIES = [
   {
     label: 'Basic',
@@ -58,6 +60,30 @@ export function QueryView() {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [result, setResult] = useState<QueryResult | null>(null)
+  const [totalCount, setTotalCount] = useState(0)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [executedQuery, setExecutedQuery] = useState('')
+
+  const fetchPage = async (queryStr: string, page: number) => {
+    const response = await fetch('/api/query/fetch_override', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        query: queryStr,
+        limit_override: ITEMS_PER_PAGE,
+        offset_add: (page - 1) * ITEMS_PER_PAGE,
+      }),
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      throw new Error(errorText || 'Query execution failed')
+    }
+
+    return response.json()
+  }
 
   const handleExecuteQuery = async () => {
     if (!query.trim()) {
@@ -69,24 +95,49 @@ export function QueryView() {
     setError(null)
 
     try {
-      const response = await fetch('/api/query/execute', {
+      // Get count first
+      const countResponse = await fetch('/api/query/count_raw', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({ query: query.trim() }),
       })
 
-      if (!response.ok) {
-        const errorText = await response.text()
-        throw new Error(errorText || 'Query execution failed')
+      if (!countResponse.ok) {
+        const errorText = await countResponse.text()
+        throw new Error(errorText || 'Count query failed')
       }
 
-      const data = await response.json()
+      const countData = await countResponse.json()
+      setTotalCount(countData.count)
+      setExecutedQuery(query.trim())
+      setCurrentPage(1)
+
+      // Fetch first page
+      const data = await fetchPage(query.trim(), 1)
       setResult(data)
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to execute query')
       setResult(null)
+      setTotalCount(0)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handlePageChange = async (newPage: number) => {
+    if (!executedQuery) return
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const data = await fetchPage(executedQuery, newPage)
+      setResult(data)
+      setCurrentPage(newPage)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch page')
     } finally {
       setLoading(false)
     }
@@ -96,6 +147,8 @@ export function QueryView() {
     setQuery(sampleQuery)
     setError(null)
     setResult(null)
+    setTotalCount(0)
+    setCurrentPage(1)
   }
 
   return (
@@ -178,35 +231,69 @@ export function QueryView() {
       {result && (
         <Card>
           <CardContent className="p-0">
-            <div className="overflow-auto">
-              <table className="w-full border-collapse">
-                <thead className="bg-muted sticky top-0">
-                  <tr>
-                    {result.columns.map((col, index) => (
-                      <th
-                        key={index}
-                        className="border border-border px-4 py-2 font-medium text-center uppercase text-xs tracking-wide"
-                      >
-                        {col}
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {result.rows.map((row, rowIndex) => (
-                    <tr key={rowIndex} className="hover:bg-muted/50">
-                      {row.map((cell, cellIndex) => (
-                        <td
-                          key={cellIndex}
-                          className={`border border-border px-4 py-2 ${getAlignmentClass(result.alignments[cellIndex])}`}
-                        >
-                          {cell}
-                        </td>
+            <div className="flex flex-col h-full">
+              {result.rows.length > 0 ? (
+                <div className="overflow-auto">
+                  <table className="w-full border-collapse">
+                    <thead className="bg-muted sticky top-0">
+                      <tr>
+                        {result.columns.map((col, index) => (
+                          <th
+                            key={index}
+                            className="border border-border px-4 py-2 font-medium text-center uppercase text-xs tracking-wide"
+                          >
+                            {col}
+                          </th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {result.rows.map((row, rowIndex) => (
+                        <tr key={rowIndex} className="hover:bg-muted/50">
+                          {row.map((cell, cellIndex) => (
+                            <td
+                              key={cellIndex}
+                              className={`border border-border px-4 py-2 ${getAlignmentClass(result.alignments[cellIndex])}`}
+                            >
+                              {cell}
+                            </td>
+                          ))}
+                        </tr>
                       ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+                    </tbody>
+                  </table>
+                </div>
+              ) : (
+                <div className="p-8 text-center text-muted-foreground">
+                  No results found
+                </div>
+              )}
+
+              {/* Pagination */}
+              {totalCount > 0 && (
+                <div className="flex items-center justify-between p-4 border-t border-border">
+                  <div className="text-sm text-muted-foreground">
+                    Showing {((currentPage - 1) * ITEMS_PER_PAGE + 1).toLocaleString()} to{' '}
+                    {Math.min(currentPage * ITEMS_PER_PAGE, totalCount).toLocaleString()} of {totalCount.toLocaleString()}
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() => currentPage > 1 && handlePageChange(currentPage - 1)}
+                      disabled={currentPage === 1 || loading}
+                      className="px-3 py-1.5 border border-border rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-accent hover:text-accent-foreground transition-colors"
+                    >
+                      Previous
+                    </button>
+                    <button
+                      onClick={() => currentPage * ITEMS_PER_PAGE < totalCount && handlePageChange(currentPage + 1)}
+                      disabled={currentPage * ITEMS_PER_PAGE >= totalCount || loading}
+                      className="px-3 py-1.5 border border-border rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-accent hover:text-accent-foreground transition-colors"
+                    >
+                      Next
+                    </button>
+                  </div>
+                </div>
+              )}
             </div>
           </CardContent>
         </Card>

frontend/src/pages/monitor/RootsTable.tsx

@@ -341,7 +341,7 @@ export function RootsTable({ onAddRoot, onScheduleCreated, externalReloadTrigger
           {totalCount > ITEMS_PER_PAGE && (
             <div className="flex items-center justify-between pt-4">
               <div className="text-sm text-muted-foreground">
-                Showing {startIndex + 1} - {endIndex} of {totalCount} roots
+                Showing {(startIndex + 1).toLocaleString()} - {endIndex.toLocaleString()} of {totalCount.toLocaleString()} roots
               </div>
               <div className="flex items-center gap-2">
                 <Button

frontend/src/pages/monitor/SchedulesTable.tsx

@@ -307,7 +307,7 @@ export const SchedulesTable = forwardRef<SchedulesTableRef, SchedulesTableProps>
               {totalCount > ITEMS_PER_PAGE && (
                 <div className="flex items-center justify-between pt-4">
                   <div className="text-sm text-muted-foreground">
-                    Showing {startIndex + 1} - {endIndex} of {totalCount} schedules
+                    Showing {(startIndex + 1).toLocaleString()} - {endIndex.toLocaleString()} of {totalCount.toLocaleString()} schedules
                   </div>
                   <div className="flex items-center gap-2">
                     <Button

frontend/src/pages/scans/ScanHistoryTable.tsx

@@ -377,7 +377,7 @@ export function ScanHistoryTable() {
           {totalCount > ITEMS_PER_PAGE && (
             <div className="flex items-center justify-between">
               <div className="text-sm text-muted-foreground whitespace-nowrap">
-                Showing {totalCount > 0 ? start : 0} - {end} of {totalCount} scans
+                Showing {(totalCount > 0 ? start : 0).toLocaleString()} - {end.toLocaleString()} of {totalCount.toLocaleString()} scans
               </div>
               <div className="flex gap-2">
                 <Button

src/api/routes/query.rs

@@ -67,10 +67,18 @@ pub struct MetadataResponse {
     pub columns: Vec<ColumnMetadata>,
 }
 
+/// Request structure for raw query count (for Query tab)
+#[derive(Debug, Deserialize)]
+pub struct RawCountRequest {
+    pub query: String,
+}
+
 /// Request structure for raw query execution (for Query tab)
 #[derive(Debug, Deserialize)]
 pub struct RawQueryRequest {
     pub query: String,
+    pub limit_override: i64,
+    pub offset_add: i64,
 }
 
 /// Response structure for raw query results
@@ -215,19 +223,20 @@ pub async fn fetch_query(
     }
 }
 
-/// POST /api/query/execute
-/// Accepts raw FsPulse query text and executes it (for Query tab)
-pub async fn execute_raw_query(
+/// POST /api/query/fetch_override
+/// Accepts raw FsPulse query text and executes it with limit/offset overrides (for Query tab)
+pub async fn fetch_override_query(
     Json(req): Json<RawQueryRequest>,
 ) -> Result<Json<RawQueryResponse>, (StatusCode, String)> {
     let db = Database::new().map_err(|e| {
         error!("Database connection failed: {}", e);
         (StatusCode::INTERNAL_SERVER_ERROR, "Database connection failed".to_string())
     })?;
 
-    debug!("Executing raw query: {}", req.query);
+    debug!("Executing raw query: {} (limit_override: {}, offset_add: {})",
+           req.query, req.limit_override, req.offset_add);
 
-    match QueryProcessor::execute_query(&db, &req.query) {
+    match QueryProcessor::execute_query_override(&db, &req.query, req.limit_override, req.offset_add) {
         Ok((rows, column_headers, alignments)) => {
             Ok(Json(RawQueryResponse {
                 columns: column_headers,
@@ -243,6 +252,28 @@ pub async fn execute_raw_query(
     }
 }
 
+/// POST /api/query/count_raw
+/// Returns count for a raw FsPulse query (for Query tab)
+pub async fn count_raw_query(
+    Json(req): Json<RawCountRequest>,
+) -> Result<Json<CountResponse>, (StatusCode, String)> {
+    let db = Database::new().map_err(|e| {
+        error!("Database connection failed: {}", e);
+        (StatusCode::INTERNAL_SERVER_ERROR, "Database connection failed".to_string())
+    })?;
+
+    debug!("Counting raw query: {}", req.query);
+
+    match QueryProcessor::execute_query_count(&db, &req.query) {
+        Ok(count) => Ok(Json(CountResponse { count })),
+        Err(e) => {
+            let error_msg = e.to_string();
+            error!("Raw count query failed: {}", error_msg);
+            Err((StatusCode::BAD_REQUEST, error_msg))
+        }
+    }
+}
+
 /// POST /api/validate-filter
 /// Validates a filter value for a given column in a domain
 pub async fn validate_filter(