From 798cf788f5f541fb8cdb2ab87601289ab0269fc6 Mon Sep 17 00:00:00 2001
From: sanwalsulehri <sanwalsulehri077@gmail.com>
Date: Fri, 19 Sep 2025 16:04:22 +0500
Subject: [PATCH] fix(ui): Fix pagination for documents #320 fixed

---
 .../[search_space_id]/chats/chats-client.tsx  |   9 +-
 .../connectors/(manage)/page.tsx              |  12 +-
 .../add/airtable-connector/page.tsx           |   2 +-
 .../connectors/add/github-connector/page.tsx  |   2 +-
 .../add/google-calendar-connector/page.tsx    |   7 +-
 .../add/google-gmail-connector/page.tsx       |   7 +-
 .../components/DocumentsTableShell.tsx        |  11 +-
 .../documents/(manage)/page.tsx               |  74 +++++-----
 .../documents/webpage/page.tsx                |   2 +-
 .../documents/youtube/page.tsx                |   2 +-
 .../app/dashboard/[search_space_id]/page.tsx  |   2 +-
 .../podcasts/podcasts-client.tsx              |   2 +-
 .../researcher/[[...chat_id]]/page.tsx        |  15 ++-
 surfsense_web/biome.json                      |   2 +-
 .../components/chat/ChatCitation.tsx          |   2 +-
 .../components/chat/ChatInputGroup.tsx        |   8 +-
 .../components/chat/DocumentsDataTable.tsx    |   6 +-
 .../components/onboard/assign-roles-step.tsx  |   8 +-
 .../components/settings/llm-role-manager.tsx  |   8 +-
 surfsense_web/eslint.config.mjs               |   4 +-
 surfsense_web/hooks/use-documents.ts          | 126 ++++++++++--------
 surfsense_web/hooks/use-llm-configs.ts        |   4 +-
 surfsense_web/hooks/use-logs.ts               |   2 +-
 .../hooks/useSearchSourceConnectors.ts        |  88 ++++++------
 24 files changed, 218 insertions(+), 187 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/chats/chats-client.tsx b/surfsense_web/app/dashboard/[search_space_id]/chats/chats-client.tsx
index 1222733d0..419b68cb2 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/chats/chats-client.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/chats/chats-client.tsx
@@ -15,7 +15,7 @@ import {
 	Trash2,
 } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -84,6 +84,7 @@ const MotionCard = motion(Card);
 
 export default function ChatsPageClient({ searchSpaceId }: ChatsPageClientProps) {
 	const router = useRouter();
+	const podcastTitleId = useId();
 	const [chats, setChats] = useState<Chat[]>([]);
 	const [filteredChats, setFilteredChats] = useState<Chat[]>([]);
 	const [isLoading, setIsLoading] = useState(true);
@@ -280,7 +281,7 @@ export default function ChatsPageClient({ searchSpaceId }: ChatsPageClientProps)
 			const payload = {
 				type: "CHAT",
 				ids: [currentChatId], // Single chat ID
-				search_space_id: parseInt(searchSpaceId),
+				search_space_id: parseInt(searchSpaceId, 10),
 				podcast_title: currentTitle,
 			};
 
@@ -830,9 +831,9 @@ export default function ChatsPageClient({ searchSpaceId }: ChatsPageClientProps)
 
 					<div className="space-y-4 py-2">
 						<div className="space-y-2">
-							<Label htmlFor="podcast-title">Podcast Title</Label>
+							<Label htmlFor={podcastTitleId}>Podcast Title</Label>
 							<Input
-								id="podcast-title"
+								id={podcastTitleId}
 								placeholder="Enter podcast title"
 								value={podcastTitle}
 								onChange={(e) => updateCurrentChatTitle(e.target.value)}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/(manage)/page.tsx
index fb803790b..4bbb9afd2 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/(manage)/page.tsx
@@ -4,7 +4,7 @@ import { format } from "date-fns";
 import { motion } from "framer-motion";
 import { Calendar as CalendarIcon, Edit, Plus, RefreshCw, Trash2 } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { toast } from "sonner";
 import {
 	AlertDialog,
@@ -63,6 +63,8 @@ export default function ConnectorsPage() {
 	const params = useParams();
 	const searchSpaceId = params.search_space_id as string;
 	const today = new Date();
+	const startDateId = useId();
+	const endDateId = useId();
 
 	const { connectors, isLoading, error, deleteConnector, indexConnector } =
 		useSearchSourceConnectors();
@@ -346,11 +348,11 @@ export default function ConnectorsPage() {
 					<div className="grid gap-4 py-4">
 						<div className="grid grid-cols-2 gap-4">
 							<div className="space-y-2">
-								<Label htmlFor="start-date">Start Date</Label>
+								<Label htmlFor={startDateId}>Start Date</Label>
 								<Popover>
 									<PopoverTrigger asChild>
 										<Button
-											id="start-date"
+											id={startDateId}
 											variant="outline"
 											className={cn(
 												"w-full justify-start text-left font-normal",
@@ -373,11 +375,11 @@ export default function ConnectorsPage() {
 								</Popover>
 							</div>
 							<div className="space-y-2">
-								<Label htmlFor="end-date">End Date</Label>
+								<Label htmlFor={endDateId}>End Date</Label>
 								<Popover>
 									<PopoverTrigger asChild>
 										<Button
-											id="end-date"
+											id={endDateId}
 											variant="outline"
 											className={cn(
 												"w-full justify-start text-left font-normal",
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/airtable-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/airtable-connector/page.tsx
index b787374ef..d74a50d04 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/airtable-connector/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/airtable-connector/page.tsx
@@ -41,7 +41,7 @@ export default function AirtableConnectorPage() {
 				setDoesConnectorExist(true);
 			}
 		});
-	}, []);
+	}, [fetchConnectors]);
 
 	const handleConnectAirtable = async () => {
 		setIsConnecting(true);
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/github-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/github-connector/page.tsx
index 4fc8e1f41..8a688cada 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/github-connector/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/github-connector/page.tsx
@@ -2,7 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { motion } from "framer-motion";
-import { ArrowLeft, Check, CircleAlert, Github, Info, ListChecks, Loader2 } from "lucide-react";
+import { ArrowLeft, Check, CircleAlert, Info, ListChecks, Loader2 } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-calendar-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-calendar-connector/page.tsx
index b04a5eddc..37cda08bb 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-calendar-connector/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-calendar-connector/page.tsx
@@ -1,14 +1,11 @@
 "use client";
 
-import { zodResolver } from "@hookform/resolvers/zod";
 import { motion } from "framer-motion";
 import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
 import Link from "next/link";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -44,7 +41,7 @@ export default function GoogleCalendarConnectorPage() {
 				setDoesConnectorExist(true);
 			}
 		});
-	}, []);
+	}, [fetchConnectors]);
 
 	// Handle Google OAuth connection
 	const handleConnectGoogle = async () => {
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-gmail-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-gmail-connector/page.tsx
index 43123ec4b..d8bbdd20a 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-gmail-connector/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-gmail-connector/page.tsx
@@ -1,14 +1,11 @@
 "use client";
 
-import { zodResolver } from "@hookform/resolvers/zod";
 import { motion } from "framer-motion";
 import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
 import Link from "next/link";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -43,7 +40,7 @@ export default function GoogleGmailConnectorPage() {
 				setDoesConnectorExist(true);
 			}
 		});
-	}, []);
+	}, [fetchConnectors]);
 
 	// Handle Google OAuth connection
 	const handleConnectGoogle = async () => {
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
index d9f9bb251..296d79201 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
@@ -76,8 +76,15 @@ export function DocumentsTableShell({
 
 	const toggleAll = (checked: boolean) => {
 		const next = new Set(selectedIds);
-		if (checked) sorted.forEach((d) => next.add(d.id));
-		else sorted.forEach((d) => next.delete(d.id));
+		if (checked) {
+			sorted.forEach((d) => {
+				next.add(d.id);
+			});
+		} else {
+			sorted.forEach((d) => {
+				next.delete(d.id);
+			});
+		}
 		setSelectedIds(next);
 	};
 
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
index a0a2e4d92..e526969e1 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
@@ -26,11 +26,13 @@ export default function DocumentsTable() {
 	const params = useParams();
 	const searchSpaceId = Number(params.search_space_id);
 
-    const [pageIndex, setPageIndex] = useState(0);
-    const [pageSize, setPageSize] = useState(10);
+	const [pageIndex, setPageIndex] = useState(0);
+	const [pageSize, setPageSize] = useState(10);
 
-    const { documents, loading, error, refreshDocuments, deleteDocument, hasMore } =
-        useDocuments(searchSpaceId, { pageIndex, pageSize });
+	const { documents, loading, error, refreshDocuments, deleteDocument, hasMore } = useDocuments(
+		searchSpaceId,
+		{ pageIndex, pageSize }
+	);
 
 	const [data, setData] = useState<Document[]>([]);
 	const [search, setSearch] = useState("");
@@ -42,7 +44,7 @@ export default function DocumentsTable() {
 		content: true,
 		created_at: true,
 	});
-    // pageIndex/pageSize state moved above to feed the hook
+	// pageIndex/pageSize state moved above to feed the hook
 	const [sortKey, setSortKey] = useState<SortKey>("title");
 	const [sortDesc, setSortDesc] = useState(false);
 	const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
@@ -63,11 +65,11 @@ export default function DocumentsTable() {
 		return result;
 	}, [data, debouncedSearch, activeTypes]);
 
-    // Server-side pagination: we filter only the current page's data client-side
-    const pageDocs = filtered;
-    const total = pageIndex * pageSize + pageDocs.length + (hasMore ? 1 : 0) - 1;
-    const pageStart = pageIndex * pageSize;
-    const pageEnd = pageStart + pageDocs.length;
+	// Server-side pagination: we filter only the current page's data client-side
+	const pageDocs = filtered;
+	const total = pageIndex * pageSize + pageDocs.length + (hasMore ? 1 : 0) - 1;
+	const pageStart = pageIndex * pageSize;
+	const _pageEnd = pageStart + pageDocs.length;
 
 	const onToggleType = (type: string, checked: boolean) => {
 		setActiveTypes((prev) => (checked ? [...prev, type] : prev.filter((t) => t !== type)));
@@ -154,32 +156,32 @@ export default function DocumentsTable() {
 				pageIndex={pageIndex}
 				pageSize={pageSize}
 				total={total}
-                onPageSizeChange={async (s) => {
-                    setPageIndex(0);
-                    setPageSize(s);
-                    await refreshDocuments?.({ pageIndex: 0, pageSize: s });
-                }}
-                onFirst={async () => {
-                    setPageIndex(0);
-                    await refreshDocuments?.({ pageIndex: 0, pageSize });
-                }}
-                onPrev={async () => {
-                    const next = Math.max(0, pageIndex - 1);
-                    if (next !== pageIndex) {
-                        setPageIndex(next);
-                        await refreshDocuments?.({ pageIndex: next, pageSize });
-                    }
-                }}
-                onNext={async () => {
-                    if (hasMore) {
-                        const next = pageIndex + 1;
-                        setPageIndex(next);
-                        await refreshDocuments?.({ pageIndex: next, pageSize });
-                    }
-                }}
-                onLast={() => {}}
-                canPrev={pageIndex > 0}
-                canNext={hasMore}
+				onPageSizeChange={async (s) => {
+					setPageIndex(0);
+					setPageSize(s);
+					await refreshDocuments?.({ pageIndex: 0, pageSize: s });
+				}}
+				onFirst={async () => {
+					setPageIndex(0);
+					await refreshDocuments?.({ pageIndex: 0, pageSize });
+				}}
+				onPrev={async () => {
+					const next = Math.max(0, pageIndex - 1);
+					if (next !== pageIndex) {
+						setPageIndex(next);
+						await refreshDocuments?.({ pageIndex: next, pageSize });
+					}
+				}}
+				onNext={async () => {
+					if (hasMore) {
+						const next = pageIndex + 1;
+						setPageIndex(next);
+						await refreshDocuments?.({ pageIndex: next, pageSize });
+					}
+				}}
+				onLast={() => {}}
+				canPrev={pageIndex > 0}
+				canNext={hasMore}
 				id={id}
 			/>
 		</motion.div>
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/webpage/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/webpage/page.tsx
index 4b9d4a770..a4f009eb0 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/webpage/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/webpage/page.tsx
@@ -72,7 +72,7 @@ export default function WebpageCrawler() {
 					body: JSON.stringify({
 						document_type: "CRAWLED_URL",
 						content: urls,
-						search_space_id: parseInt(search_space_id),
+						search_space_id: parseInt(search_space_id, 10),
 					}),
 				}
 			);
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/youtube/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/youtube/page.tsx
index 494420585..bc9a4e20e 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/youtube/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/youtube/page.tsx
@@ -81,7 +81,7 @@ export default function YouTubeVideoAdder() {
 					body: JSON.stringify({
 						document_type: "YOUTUBE_VIDEO",
 						content: videoUrls,
-						search_space_id: parseInt(search_space_id),
+						search_space_id: parseInt(search_space_id, 10),
 					}),
 				}
 			);
diff --git a/surfsense_web/app/dashboard/[search_space_id]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/page.tsx
index cd697db21..f32a936f1 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/page.tsx
@@ -9,7 +9,7 @@ export default function SearchSpaceDashboardPage() {
 
 	useEffect(() => {
 		router.push(`/dashboard/${search_space_id}/chats`);
-	}, []);
+	}, [router.push, search_space_id]);
 
 	return <></>;
 }
diff --git a/surfsense_web/app/dashboard/[search_space_id]/podcasts/podcasts-client.tsx b/surfsense_web/app/dashboard/[search_space_id]/podcasts/podcasts-client.tsx
index 7dd95f04f..21d52cfc8 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/podcasts/podcasts-client.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/podcasts/podcasts-client.tsx
@@ -175,7 +175,7 @@ export default function PodcastsPageClient({ searchSpaceId }: PodcastsPageClient
 		}
 
 		// Filter by search space
-		result = result.filter((podcast) => podcast.search_space_id === parseInt(searchSpaceId));
+		result = result.filter((podcast) => podcast.search_space_id === parseInt(searchSpaceId, 10));
 
 		// Sort podcasts
 		result.sort((a, b) => {
diff --git a/surfsense_web/app/dashboard/[search_space_id]/researcher/[[...chat_id]]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/researcher/[[...chat_id]]/page.tsx
index a867f5f84..ff412cf8a 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/researcher/[[...chat_id]]/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/researcher/[[...chat_id]]/page.tsx
@@ -101,7 +101,7 @@ export default function ResearcherPage() {
 
 	const customHandlerAppend = async (
 		message: Message | CreateMessage,
-		chatRequestOptions?: { data?: any }
+		_chatRequestOptions?: { data?: any }
 	) => {
 		const newChatId = await createChat(message.content, researchMode, selectedConnectors);
 		if (newChatId) {
@@ -122,7 +122,7 @@ export default function ResearcherPage() {
 			setIsLoading(true);
 			loadChatData(chatIdParam);
 		}
-	}, [token, isNewChat, chatIdParam]);
+	}, [token, isNewChat, chatIdParam, loadChatData, setIsLoading]);
 
 	// Restore chat state from localStorage on page load
 	useEffect(() => {
@@ -142,6 +142,7 @@ export default function ResearcherPage() {
 		setSelectedConnectors,
 		setSearchMode,
 		setResearchMode,
+		restoreChatState,
 	]);
 
 	const loadChatData = async (chatId: string) => {
@@ -187,7 +188,15 @@ export default function ResearcherPage() {
 		) {
 			updateChat(chatIdParam, handler.messages, researchMode, selectedConnectors);
 		}
-	}, [handler.messages, handler.status, chatIdParam, isNewChat]);
+	}, [
+		handler.messages,
+		handler.status,
+		chatIdParam,
+		isNewChat,
+		researchMode,
+		selectedConnectors,
+		updateChat,
+	]);
 
 	if (isLoading) {
 		return (
diff --git a/surfsense_web/biome.json b/surfsense_web/biome.json
index 6e17e7f14..91841b675 100644
--- a/surfsense_web/biome.json
+++ b/surfsense_web/biome.json
@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.1.2/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",
diff --git a/surfsense_web/components/chat/ChatCitation.tsx b/surfsense_web/components/chat/ChatCitation.tsx
index fe3c2b993..64f712b38 100644
--- a/surfsense_web/components/chat/ChatCitation.tsx
+++ b/surfsense_web/components/chat/ChatCitation.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronDown, ChevronUp, ExternalLink, FileText, Loader2 } from "lucide-react";
+import { ChevronDown, ChevronUp, ExternalLink, Loader2 } from "lucide-react";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
 import { MarkdownViewer } from "@/components/markdown-viewer";
diff --git a/surfsense_web/components/chat/ChatInputGroup.tsx b/surfsense_web/components/chat/ChatInputGroup.tsx
index 1f5cc6d31..2e100e58d 100644
--- a/surfsense_web/components/chat/ChatInputGroup.tsx
+++ b/surfsense_web/components/chat/ChatInputGroup.tsx
@@ -40,10 +40,10 @@ const DocumentSelector = React.memo(
 		const { search_space_id } = useParams();
 		const [isOpen, setIsOpen] = useState(false);
 
-		const { documents, loading, isLoaded, fetchDocuments } = useDocuments(
-			Number(search_space_id),
-			true
-		);
+		const { documents, loading, isLoaded, fetchDocuments } = useDocuments(Number(search_space_id), {
+			lazy: true,
+			pageSize: 50,
+		});
 
 		const handleOpenChange = useCallback(
 			(open: boolean) => {
diff --git a/surfsense_web/components/chat/DocumentsDataTable.tsx b/surfsense_web/components/chat/DocumentsDataTable.tsx
index 79b6216b3..d416987c6 100644
--- a/surfsense_web/components/chat/DocumentsDataTable.tsx
+++ b/surfsense_web/components/chat/DocumentsDataTable.tsx
@@ -206,14 +206,14 @@ export function DocumentsDataTable({
 		if (hasChanges && Object.keys(initialRowSelection).length > 0) {
 			setRowSelection(initialRowSelection);
 		}
-	}, [initialRowSelection]);
+	}, [initialRowSelection, rowSelection]);
 
 	// Initialize row selection on mount
 	useEffect(() => {
 		if (Object.keys(rowSelection).length === 0 && Object.keys(initialRowSelection).length > 0) {
 			setRowSelection(initialRowSelection);
 		}
-	}, []);
+	}, [initialRowSelection, rowSelection]);
 
 	const filteredDocuments = useMemo(() => {
 		if (documentTypeFilter === "ALL") return documents;
@@ -240,7 +240,7 @@ export function DocumentsDataTable({
 		const selectedRows = table.getFilteredSelectedRowModel().rows;
 		const selectedDocuments = selectedRows.map((row) => row.original);
 		onSelectionChange(selectedDocuments);
-	}, [rowSelection, onSelectionChange, table]);
+	}, [onSelectionChange, table]);
 
 	const handleClearAll = () => setRowSelection({});
 
diff --git a/surfsense_web/components/onboard/assign-roles-step.tsx b/surfsense_web/components/onboard/assign-roles-step.tsx
index 2a7b25288..bfc4eccef 100644
--- a/surfsense_web/components/onboard/assign-roles-step.tsx
+++ b/surfsense_web/components/onboard/assign-roles-step.tsx
@@ -65,7 +65,7 @@ export function AssignRolesStep({ onPreferencesUpdated }: AssignRolesStepProps)
 	const handleRoleAssignment = async (role: string, configId: string) => {
 		const newAssignments = {
 			...assignments,
-			[role]: configId === "" ? "" : parseInt(configId),
+			[role]: configId === "" ? "" : parseInt(configId, 10),
 		};
 
 		setAssignments(newAssignments);
@@ -80,15 +80,15 @@ export function AssignRolesStep({ onPreferencesUpdated }: AssignRolesStepProps)
 			const numericAssignments = {
 				long_context_llm_id:
 					typeof newAssignments.long_context_llm_id === "string"
-						? parseInt(newAssignments.long_context_llm_id)
+						? parseInt(newAssignments.long_context_llm_id, 10)
 						: newAssignments.long_context_llm_id,
 				fast_llm_id:
 					typeof newAssignments.fast_llm_id === "string"
-						? parseInt(newAssignments.fast_llm_id)
+						? parseInt(newAssignments.fast_llm_id, 10)
 						: newAssignments.fast_llm_id,
 				strategic_llm_id:
 					typeof newAssignments.strategic_llm_id === "string"
-						? parseInt(newAssignments.strategic_llm_id)
+						? parseInt(newAssignments.strategic_llm_id, 10)
 						: newAssignments.strategic_llm_id,
 			};
 
diff --git a/surfsense_web/components/settings/llm-role-manager.tsx b/surfsense_web/components/settings/llm-role-manager.tsx
index d1e7ae98d..2ddf38b8d 100644
--- a/surfsense_web/components/settings/llm-role-manager.tsx
+++ b/surfsense_web/components/settings/llm-role-manager.tsx
@@ -93,7 +93,7 @@ export function LLMRoleManager() {
 	const handleRoleAssignment = (role: string, configId: string) => {
 		const newAssignments = {
 			...assignments,
-			[role]: configId === "unassigned" ? "" : parseInt(configId),
+			[role]: configId === "unassigned" ? "" : parseInt(configId, 10),
 		};
 
 		setAssignments(newAssignments);
@@ -121,19 +121,19 @@ export function LLMRoleManager() {
 			long_context_llm_id:
 				typeof assignments.long_context_llm_id === "string"
 					? assignments.long_context_llm_id
-						? parseInt(assignments.long_context_llm_id)
+						? parseInt(assignments.long_context_llm_id, 10)
 						: undefined
 					: assignments.long_context_llm_id,
 			fast_llm_id:
 				typeof assignments.fast_llm_id === "string"
 					? assignments.fast_llm_id
-						? parseInt(assignments.fast_llm_id)
+						? parseInt(assignments.fast_llm_id, 10)
 						: undefined
 					: assignments.fast_llm_id,
 			strategic_llm_id:
 				typeof assignments.strategic_llm_id === "string"
 					? assignments.strategic_llm_id
-						? parseInt(assignments.strategic_llm_id)
+						? parseInt(assignments.strategic_llm_id, 10)
 						: undefined
 					: assignments.strategic_llm_id,
 		};
diff --git a/surfsense_web/eslint.config.mjs b/surfsense_web/eslint.config.mjs
index 530b65478..6dbd78659 100644
--- a/surfsense_web/eslint.config.mjs
+++ b/surfsense_web/eslint.config.mjs
@@ -1,6 +1,6 @@
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
 import { FlatCompat } from "@eslint/eslintrc";
-import { dirname } from "path";
-import { fileURLToPath } from "url";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
diff --git a/surfsense_web/hooks/use-documents.ts b/surfsense_web/hooks/use-documents.ts
index bca27c25b..faebe7e39 100644
--- a/surfsense_web/hooks/use-documents.ts
+++ b/surfsense_web/hooks/use-documents.ts
@@ -30,69 +30,81 @@ export type DocumentType =
 	| "AIRTABLE_CONNECTOR";
 
 export function useDocuments(
-    searchSpaceId: number,
-    optionsOrLazy?: boolean | { pageIndex?: number; pageSize?: number; lazy?: boolean }
+	searchSpaceId: number,
+	optionsOrLazy?: boolean | { pageIndex?: number; pageSize?: number; lazy?: boolean }
 ) {
-    const lazy = typeof optionsOrLazy === "boolean" ? optionsOrLazy : optionsOrLazy?.lazy ?? false;
-    const pageIndex = typeof optionsOrLazy === "object" && optionsOrLazy?.pageIndex !== undefined ? optionsOrLazy.pageIndex : 0;
-    const pageSize = typeof optionsOrLazy === "object" && optionsOrLazy?.pageSize !== undefined ? optionsOrLazy.pageSize : 50;
+	const lazy = typeof optionsOrLazy === "boolean" ? optionsOrLazy : (optionsOrLazy?.lazy ?? false);
+	const pageIndex =
+		typeof optionsOrLazy === "object" && optionsOrLazy?.pageIndex !== undefined
+			? optionsOrLazy.pageIndex
+			: 0;
+	const pageSize =
+		typeof optionsOrLazy === "object" && optionsOrLazy?.pageSize !== undefined
+			? optionsOrLazy.pageSize
+			: 50;
 
-    const [documents, setDocuments] = useState<Document[]>([]);
-    const [loading, setLoading] = useState(!lazy);
-    const [error, setError] = useState<string | null>(null);
-    const [isLoaded, setIsLoaded] = useState(false);
-    const [hasMore, setHasMore] = useState(false);
+	const [documents, setDocuments] = useState<Document[]>([]);
+	const [loading, setLoading] = useState(!lazy);
+	const [error, setError] = useState<string | null>(null);
+	const [isLoaded, setIsLoaded] = useState(false);
+	const [hasMore, setHasMore] = useState(false);
 
-    const fetchDocuments = useCallback(async (override?: { pageIndex?: number; pageSize?: number }) => {
-        if (isLoaded && lazy && !override) return;
+	const fetchDocuments = useCallback(
+		async (override?: { pageIndex?: number; pageSize?: number }) => {
+			if (isLoaded && lazy && !override) return;
 
-        const effectivePageIndex = override?.pageIndex ?? pageIndex;
-        const effectivePageSize = override?.pageSize ?? pageSize;
-        const skip = effectivePageIndex * effectivePageSize;
-        const limit = effectivePageSize;
+			const effectivePageIndex = override?.pageIndex ?? pageIndex;
+			const effectivePageSize = override?.pageSize ?? pageSize;
+			const skip = effectivePageIndex * effectivePageSize;
+			const limit = effectivePageSize;
 
-        try {
-            setLoading(true);
-            const url = new URL(`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents`);
-            if (searchSpaceId) url.searchParams.set("search_space_id", String(searchSpaceId));
-            url.searchParams.set("skip", String(skip));
-            url.searchParams.set("limit", String(limit));
+			try {
+				setLoading(true);
+				const url = new URL(`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents`);
+				if (searchSpaceId) url.searchParams.set("search_space_id", String(searchSpaceId));
+				url.searchParams.set("skip", String(skip));
+				url.searchParams.set("limit", String(limit));
 
-            const response = await fetch(url.toString(), {
-                headers: {
-                    Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
-                },
-                method: "GET",
-            });
+				const response = await fetch(url.toString(), {
+					headers: {
+						Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
+					},
+					method: "GET",
+				});
 
-            if (!response.ok) {
-                toast.error("Failed to fetch documents");
-                throw new Error("Failed to fetch documents");
-            }
+				if (!response.ok) {
+					toast.error("Failed to fetch documents");
+					throw new Error("Failed to fetch documents");
+				}
 
-            const data = await response.json();
-            setDocuments(data);
-            setHasMore(Array.isArray(data) && data.length === effectivePageSize);
-            setError(null);
-            setIsLoaded(true);
-        } catch (err: any) {
-            setError(err.message || "Failed to fetch documents");
-            console.error("Error fetching documents:", err);
-        } finally {
-            setLoading(false);
-        }
-    }, [searchSpaceId, isLoaded, lazy, pageIndex, pageSize]);
+				const data = await response.json();
+				setDocuments(data);
+				setHasMore(Array.isArray(data) && data.length === effectivePageSize);
+				setError(null);
+				setIsLoaded(true);
+			} catch (err: any) {
+				setError(err.message || "Failed to fetch documents");
+				console.error("Error fetching documents:", err);
+			} finally {
+				setLoading(false);
+			}
+		},
+		[searchSpaceId, isLoaded, lazy, pageIndex, pageSize]
+	);
 
-    useEffect(() => {
-        if (!lazy && searchSpaceId !== undefined && searchSpaceId !== null) {
-            fetchDocuments();
-        }
-    }, [searchSpaceId, lazy, fetchDocuments, pageIndex, pageSize]);
+	useEffect(() => {
+		if (!lazy && searchSpaceId !== undefined && searchSpaceId !== null) {
+			fetchDocuments();
+		}
+	}, [searchSpaceId, lazy, fetchDocuments]);
 
-    const refreshDocuments = useCallback(async (override?: { pageIndex?: number; pageSize?: number }) => {
-        setIsLoaded(false);
-        await fetchDocuments(override);
-    }, [fetchDocuments]);
+	const refreshDocuments = useCallback(
+		async (override?: { pageIndex?: number; pageSize?: number }) => {
+			setIsLoaded(false);
+			await fetchDocuments(override);
+		},
+		[fetchDocuments]
+	);
 
 	// Function to delete a document
 	const deleteDocument = useCallback(
@@ -133,9 +145,9 @@ export function useDocuments(
 		isLoaded,
 		fetchDocuments, // Manual fetch function for lazy mode
 		refreshDocuments,
-        deleteDocument,
-        hasMore,
-        pageIndex,
-        pageSize,
+		deleteDocument,
+		hasMore,
+		pageIndex,
+		pageSize,
 	};
 }
diff --git a/surfsense_web/hooks/use-llm-configs.ts b/surfsense_web/hooks/use-llm-configs.ts
index ccb3a5bc9..9fe7580d8 100644
--- a/surfsense_web/hooks/use-llm-configs.ts
+++ b/surfsense_web/hooks/use-llm-configs.ts
@@ -79,7 +79,7 @@ export function useLLMConfigs() {
 
 	useEffect(() => {
 		fetchLLMConfigs();
-	}, []);
+	}, [fetchLLMConfigs]);
 
 	const createLLMConfig = async (config: CreateLLMConfig): Promise<LLMConfig | null> => {
 		try {
@@ -216,7 +216,7 @@ export function useLLMPreferences() {
 
 	useEffect(() => {
 		fetchPreferences();
-	}, []);
+	}, [fetchPreferences]);
 
 	const updatePreferences = async (newPreferences: Partial<LLMPreferences>): Promise<boolean> => {
 		try {
diff --git a/surfsense_web/hooks/use-logs.ts b/surfsense_web/hooks/use-logs.ts
index 551c034eb..ff7b465a2 100644
--- a/surfsense_web/hooks/use-logs.ts
+++ b/surfsense_web/hooks/use-logs.ts
@@ -54,7 +54,7 @@ export function useLogs(searchSpaceId?: number, filters: LogFilters = {}) {
 	const [error, setError] = useState<string | null>(null);
 
 	// Memoize filters to prevent infinite re-renders
-	const memoizedFilters = useMemo(() => filters, [JSON.stringify(filters)]);
+	const memoizedFilters = useMemo(() => filters, [filters]);
 
 	const buildQueryParams = useCallback(
 		(customFilters: LogFilters = {}) => {
diff --git a/surfsense_web/hooks/useSearchSourceConnectors.ts b/surfsense_web/hooks/useSearchSourceConnectors.ts
index 0c59a3bf0..91c2b92bb 100644
--- a/surfsense_web/hooks/useSearchSourceConnectors.ts
+++ b/surfsense_web/hooks/useSearchSourceConnectors.ts
@@ -53,6 +53,47 @@ export const useSearchSourceConnectors = (lazy: boolean = false) => {
 		},
 	]);
 
+	// Update connector source items when connectors change
+	const updateConnectorSourceItems = useCallback((currentConnectors: SearchSourceConnector[]) => {
+		// Start with the default hardcoded connectors
+		const defaultConnectors: ConnectorSourceItem[] = [
+			{
+				id: 1,
+				name: "Crawled URL",
+				type: "CRAWLED_URL",
+				sources: [],
+			},
+			{
+				id: 2,
+				name: "File",
+				type: "FILE",
+				sources: [],
+			},
+			{
+				id: 3,
+				name: "Extension",
+				type: "EXTENSION",
+				sources: [],
+			},
+			{
+				id: 4,
+				name: "Youtube Video",
+				type: "YOUTUBE_VIDEO",
+				sources: [],
+			},
+		];
+
+		// Add the API connectors
+		const apiConnectors: ConnectorSourceItem[] = currentConnectors.map((connector, index) => ({
+			id: 1000 + index, // Use a high ID to avoid conflicts with hardcoded IDs
+			name: connector.name,
+			type: connector.connector_type,
+			sources: [],
+		}));
+
+		setConnectorSourceItems([...defaultConnectors, ...apiConnectors]);
+	}, []);
+
 	const fetchConnectors = useCallback(async () => {
 		if (isLoaded && lazy) return; // Avoid redundant calls in lazy mode
 
@@ -94,7 +135,11 @@ export const useSearchSourceConnectors = (lazy: boolean = false) => {
 		} finally {
 			setIsLoading(false);
 		}
-	}, [isLoaded, lazy]);
+	}, [
+		isLoaded,
+		lazy, // Update connector source items when connectors change
+		updateConnectorSourceItems,
+	]);
 
 	useEffect(() => {
 		if (!lazy) {
@@ -108,47 +153,6 @@ export const useSearchSourceConnectors = (lazy: boolean = false) => {
 		await fetchConnectors();
 	}, [fetchConnectors]);
 
-	// Update connector source items when connectors change
-	const updateConnectorSourceItems = (currentConnectors: SearchSourceConnector[]) => {
-		// Start with the default hardcoded connectors
-		const defaultConnectors: ConnectorSourceItem[] = [
-			{
-				id: 1,
-				name: "Crawled URL",
-				type: "CRAWLED_URL",
-				sources: [],
-			},
-			{
-				id: 2,
-				name: "File",
-				type: "FILE",
-				sources: [],
-			},
-			{
-				id: 3,
-				name: "Extension",
-				type: "EXTENSION",
-				sources: [],
-			},
-			{
-				id: 4,
-				name: "Youtube Video",
-				type: "YOUTUBE_VIDEO",
-				sources: [],
-			},
-		];
-
-		// Add the API connectors
-		const apiConnectors: ConnectorSourceItem[] = currentConnectors.map((connector, index) => ({
-			id: 1000 + index, // Use a high ID to avoid conflicts with hardcoded IDs
-			name: connector.name,
-			type: connector.connector_type,
-			sources: [],
-		}));
-
-		setConnectorSourceItems([...defaultConnectors, ...apiConnectors]);
-	};
-
 	/**
 	 * Create a new search source connector
 	 */