From 7ed6e9c75f1c6ef9c9fc997c53bea8dc0e7dcb69 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 15:56:42 +0530
Subject: [PATCH 01/24] fix: update message handling in NewChatPage to
 conditionally set author_id based on chat visibility

---
 .../[search_space_id]/new-chat/[[...chat_id]]/page.tsx    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
index 9809c9b2e..1f9074793 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
@@ -218,13 +218,15 @@ export default function NewChatPage() {
 				return;
 			}
 
+			const isSharedChat = currentThread?.visibility === "SEARCH_SPACE";
+
 			setMessages((prev) => {
 				if (syncedMessages.length < prev.length) {
 					return prev;
 				}
 
 				return syncedMessages.map((msg) => {
-					const member = msg.author_id
+					const member = isSharedChat && msg.author_id
 						? membersData?.find((m) => m.user_id === msg.author_id)
 						: null;
 
@@ -239,7 +241,7 @@ export default function NewChatPage() {
 						thread_id: msg.thread_id,
 						role: msg.role.toLowerCase() as "user" | "assistant" | "system",
 						content: msg.content,
-						author_id: msg.author_id,
+						author_id: isSharedChat ? msg.author_id : null,
 						created_at: msg.created_at,
 						author_display_name: member?.user_display_name ?? existingAuthor?.displayName ?? null,
 						author_avatar_url: member?.user_avatar_url ?? existingAuthor?.avatarUrl ?? null,
@@ -247,7 +249,7 @@ export default function NewChatPage() {
 				});
 			});
 		},
-		[isRunning, membersData]
+		[isRunning, membersData, currentThread?.visibility]
 	);
 
 	useMessagesSync(threadId, handleSyncedMessagesUpdate);

From 75fd39c249ba8eba832e342ea8da9f7cc48c9a29 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 16:11:00 +0530
Subject: [PATCH 02/24] refactor: simplify author metadata handling in
 NewChatPage and UserMessage components

---
 .../new-chat/[[...chat_id]]/page.tsx          | 30 ++++++++-----------
 .../components/assistant-ui/user-message.tsx  |  5 +++-
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
index 1f9074793..5b35c0284 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
@@ -218,15 +218,13 @@ export default function NewChatPage() {
 				return;
 			}
 
-			const isSharedChat = currentThread?.visibility === "SEARCH_SPACE";
-
 			setMessages((prev) => {
 				if (syncedMessages.length < prev.length) {
 					return prev;
 				}
 
 				return syncedMessages.map((msg) => {
-					const member = isSharedChat && msg.author_id
+					const member = msg.author_id
 						? membersData?.find((m) => m.user_id === msg.author_id)
 						: null;
 
@@ -241,7 +239,7 @@ export default function NewChatPage() {
 						thread_id: msg.thread_id,
 						role: msg.role.toLowerCase() as "user" | "assistant" | "system",
 						content: msg.content,
-						author_id: isSharedChat ? msg.author_id : null,
+						author_id: msg.author_id,
 						created_at: msg.created_at,
 						author_display_name: member?.user_display_name ?? existingAuthor?.displayName ?? null,
 						author_avatar_url: member?.user_avatar_url ?? existingAuthor?.avatarUrl ?? null,
@@ -249,7 +247,7 @@ export default function NewChatPage() {
 				});
 			});
 		},
-		[isRunning, membersData, currentThread?.visibility]
+		[isRunning, membersData]
 	);
 
 	useMessagesSync(threadId, handleSyncedMessagesUpdate);
@@ -485,18 +483,17 @@ export default function NewChatPage() {
 			// Add user message to state
 			const userMsgId = `msg-user-${Date.now()}`;
 
-			// Include author metadata for shared chats
-			const authorMetadata =
-				currentThread?.visibility === "SEARCH_SPACE" && currentUser
-					? {
-							custom: {
-								author: {
-									displayName: currentUser.display_name ?? null,
-									avatarUrl: currentUser.avatar_url ?? null,
-								},
+			// Always include author metadata so the UI layer can decide visibility
+			const authorMetadata = currentUser
+				? {
+						custom: {
+							author: {
+								displayName: currentUser.display_name ?? null,
+								avatarUrl: currentUser.avatar_url ?? null,
 							},
-						}
-					: undefined;
+						},
+					}
+				: undefined;
 
 			const userMessage: ThreadMessageLike = {
 				id: userMsgId,
@@ -884,7 +881,6 @@ export default function NewChatPage() {
 			setMessageDocumentsMap,
 			setAgentCreatedDocuments,
 			queryClient,
-			currentThread,
 			currentUser,
 			disabledTools,
 			updateChatTabTitle,
diff --git a/surfsense_web/components/assistant-ui/user-message.tsx b/surfsense_web/components/assistant-ui/user-message.tsx
index 74461e760..34945c472 100644
--- a/surfsense_web/components/assistant-ui/user-message.tsx
+++ b/surfsense_web/components/assistant-ui/user-message.tsx
@@ -3,6 +3,7 @@ import { useAtomValue } from "jotai";
 import { CheckIcon, CopyIcon, FileText, Pen } from "lucide-react";
 import Image from "next/image";
 import { type FC, useState } from "react";
+import { currentThreadAtom } from "@/atoms/chat/current-thread.atom";
 import { messageDocumentsMapAtom } from "@/atoms/chat/mentioned-documents.atom";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 
@@ -51,6 +52,8 @@ export const UserMessage: FC = () => {
 	const mentionedDocs = messageId ? messageDocumentsMap[messageId] : undefined;
 	const metadata = useAuiState(({ message }) => message?.metadata);
 	const author = metadata?.custom?.author as AuthorMetadata | undefined;
+	const isSharedChat = useAtomValue(currentThreadAtom).visibility === "SEARCH_SPACE";
+	const showAvatar = isSharedChat && !!author;
 
 	return (
 		<MessagePrimitive.Root
@@ -81,7 +84,7 @@ export const UserMessage: FC = () => {
 							<UserActionBar />
 						</div>
 					</div>
-					{author && (
+					{showAvatar && (
 						<div className="shrink-0 mb-1.5">
 							<UserAvatar displayName={author.displayName} avatarUrl={author.avatarUrl} />
 						</div>

From fec5c005eb1c59b078c12397ed4c1f2ccc1a16c1 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 16:26:31 +0530
Subject: [PATCH 03/24] refactor: enhance button loading states in various
 components for improved user experience

---
 .../components/DocumentsTableShell.tsx        | 10 +++--
 .../components/PromptsContent.tsx             |  5 ++-
 .../assistant-ui/connector-popup.tsx          | 45 +------------------
 .../components/connector-card.tsx             | 27 ++++++-----
 .../layout/providers/LayoutDataProvider.tsx   | 41 +++++++----------
 .../layout/ui/sidebar/DocumentsSidebar.tsx    |  5 ++-
 6 files changed, 42 insertions(+), 91 deletions(-)

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 68d971fc4..918032acd 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
@@ -986,9 +986,10 @@ export function DocumentsTableShell({
 								handleDeleteFromMenu();
 							}}
 							disabled={isDeleting}
-							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+							className="relative bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
-							{isDeleting ? <Spinner size="sm" /> : "Delete"}
+							<span className={isDeleting ? "opacity-0" : ""}>Delete</span>
+							{isDeleting && <Spinner size="sm" className="absolute" />}
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>
@@ -1104,9 +1105,10 @@ export function DocumentsTableShell({
 								handleBulkDelete();
 							}}
 							disabled={isBulkDeleting}
-							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+							className="relative bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
-							{isBulkDeleting ? <Spinner size="sm" /> : "Delete"}
+							<span className={isBulkDeleting ? "opacity-0" : ""}>Delete</span>
+							{isBulkDeleting && <Spinner size="sm" className="absolute" />}
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
index 38ccafa94..104dc111f 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
@@ -165,8 +165,9 @@ export function PromptsContent() {
 						<Button variant="ghost" size="sm" onClick={handleCancel}>
 							Cancel
 						</Button>
-						<Button size="sm" onClick={handleSave} disabled={isSaving}>
-							{isSaving ? <Spinner className="size-3.5" /> : editingId ? "Update" : "Create"}
+						<Button size="sm" onClick={handleSave} disabled={isSaving} className="relative">
+							<span className={isSaving ? "opacity-0" : ""}>{editingId ? "Update" : "Create"}</span>
+							{isSaving && <Spinner className="size-3.5 absolute" />}
 						</Button>
 					</div>
 				</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index f1cf5ee4d..27868f5da 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtomValue, useSetAtom } from "jotai";
-import { AlertTriangle, Cable, Settings } from "lucide-react";
+import { AlertTriangle, Settings } from "lucide-react";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
@@ -12,17 +12,14 @@ import {
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
-import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
-import { Spinner } from "@/components/ui/spinner";
 import { Tabs, TabsContent } from "@/components/ui/tabs";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { useConnectorsSync } from "@/hooks/use-connectors-sync";
 import { PICKER_CLOSE_EVENT, PICKER_OPEN_EVENT } from "@/hooks/use-google-picker";
 import { useZeroDocumentTypeCounts } from "@/hooks/use-zero-document-type-counts";
-import { cn } from "@/lib/utils";
 import { ConnectorDialogHeader } from "./connector-popup/components/connector-dialog-header";
 import { ConnectorConnectView } from "./connector-popup/connector-configs/views/connector-connect-view";
 import { ConnectorEditView } from "./connector-popup/connector-configs/views/connector-edit-view";
@@ -47,7 +44,7 @@ interface ConnectorIndicatorProps {
 }
 
 export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, ConnectorIndicatorProps>(
-	({ showTrigger = true }, ref) => {
+	(_props, ref) => {
 		const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
 		const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
 		useAtomValue(currentUserAtom);
@@ -74,8 +71,6 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 
 		// Real-time document type counts via Zero (updates instantly as docs are indexed)
 		const documentTypeCounts = useZeroDocumentTypeCounts(searchSpaceId);
-		const documentTypesLoading = documentTypeCounts === undefined;
-
 		// Read status inbox items from shared atom (populated by LayoutDataProvider)
 		// instead of creating a duplicate useInbox("status") hook.
 		const statusInboxItems = useAtomValue(statusInboxItemsAtom);
@@ -178,8 +173,6 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 			inboxItems
 		);
 
-		const isLoading = connectorsLoading || documentTypesLoading;
-
 		// Get document types that have documents in the search space
 		const activeDocumentTypes = documentTypeCounts
 			? Object.entries(documentTypeCounts).filter(([, count]) => count > 0)
@@ -205,40 +198,6 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 
 		return (
 			<Dialog open={isOpen} modal={false} onOpenChange={handleOpenChange}>
-				{showTrigger && (
-					<TooltipIconButton
-						data-joyride="connector-icon"
-						tooltip={
-							hasConnectors ? `Manage ${activeConnectorsCount} connectors` : "Connect your data"
-						}
-						side="bottom"
-						className={cn(
-							"size-[34px] rounded-full p-1 flex items-center justify-center transition-colors relative",
-							"hover:bg-muted-foreground/15 dark:hover:bg-muted-foreground/30",
-							"outline-none focus:outline-none focus-visible:outline-none font-semibold text-xs",
-							"border-0 ring-0 focus:ring-0 shadow-none focus:shadow-none"
-						)}
-						aria-label={
-							hasConnectors
-								? `View ${activeConnectorsCount} connectors`
-								: "Add your first connector"
-						}
-						onClick={() => handleOpenChange(true)}
-					>
-						{isLoading ? (
-							<Spinner size="sm" />
-						) : (
-							<>
-								<Cable className="size-4 stroke-[1.5px]" />
-								{activeConnectorsCount > 0 && (
-									<span className="absolute -top-0.5 right-0 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-medium rounded-full bg-primary text-primary-foreground shadow-sm select-none">
-										{activeConnectorsCount > 99 ? "99+" : activeConnectorsCount}
-									</span>
-								)}
-							</>
-						)}
-					</TooltipIconButton>
-				)}
 
 				{isOpen &&
 					createPortal(
diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
index 4119b74cd..d24057b1c 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
@@ -143,7 +143,7 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 				size="sm"
 				variant={isConnected ? "secondary" : "default"}
 				className={cn(
-					"h-8 text-[11px] px-3 rounded-lg shrink-0 font-medium",
+					"relative h-8 text-[11px] px-3 rounded-lg shrink-0 font-medium items-center justify-center",
 					isConnected &&
 						"bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80",
 					!isConnected && "shadow-xs"
@@ -151,19 +151,18 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 				onClick={isConnected ? onManage : onConnect}
 				disabled={isConnecting || !isEnabled}
 			>
-				{isConnecting ? (
-					<Spinner size="xs" />
-				) : !isEnabled ? (
-					"Unavailable"
-				) : isConnected ? (
-					"Manage"
-				) : id === "youtube-crawler" ? (
-					"Add"
-				) : connectorType ? (
-					"Connect"
-				) : (
-					"Add"
-				)}
+				<span className={isConnecting ? "opacity-0" : ""}>
+					{!isEnabled
+						? "Unavailable"
+						: isConnected
+							? "Manage"
+							: id === "youtube-crawler"
+								? "Add"
+								: connectorType
+									? "Connect"
+									: "Add"}
+				</span>
+				{isConnecting && <Spinner size="xs" className="absolute" />}
 			</Button>
 		</div>
 	);
diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
index ef9ed1402..57a0f89cf 100644
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@@ -795,9 +795,10 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 								confirmDeleteChat();
 							}}
 							disabled={isDeletingChat}
-							className="bg-destructive text-destructive-foreground hover:bg-destructive/90 gap-2"
+							className="relative bg-destructive text-destructive-foreground hover:bg-destructive/90 items-center justify-center"
 						>
-							{isDeletingChat ? <Spinner size="sm" /> : tCommon("delete")}
+							<span className={isDeletingChat ? "opacity-0" : ""}>{tCommon("delete")}</span>
+							{isDeletingChat && <Spinner size="sm" className="absolute" />}
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>
@@ -835,15 +836,11 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 						<Button
 							onClick={confirmRenameChat}
 							disabled={isRenamingChat || !newChatTitle.trim()}
-							className="gap-2"
+							className="relative"
 						>
-							{isRenamingChat ? (
-								<>
-									<span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-									{tSidebar("renaming") || "Renaming"}
-								</>
-							) : (
-								tSidebar("rename") || "Rename"
+							<span className={isRenamingChat ? "opacity-0" : ""}>{tSidebar("rename") || "Rename"}</span>
+							{isRenamingChat && (
+								<span className="absolute h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
 							)}
 						</Button>
 					</DialogFooter>
@@ -869,15 +866,11 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 								confirmDeleteSearchSpace();
 							}}
 							disabled={isDeletingSearchSpace}
-							className="bg-destructive text-destructive-foreground hover:bg-destructive/90 gap-2"
+							className="relative bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
-							{isDeletingSearchSpace ? (
-								<>
-									<span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-									{t("deleting")}
-								</>
-							) : (
-								tCommon("delete")
+							<span className={isDeletingSearchSpace ? "opacity-0" : ""}>{tCommon("delete")}</span>
+							{isDeletingSearchSpace && (
+								<span className="absolute h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
 							)}
 						</AlertDialogAction>
 					</AlertDialogFooter>
@@ -903,15 +896,11 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 								confirmLeaveSearchSpace();
 							}}
 							disabled={isLeavingSearchSpace}
-							className="bg-destructive text-destructive-foreground hover:bg-destructive/90 gap-2"
+							className="relative bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
-							{isLeavingSearchSpace ? (
-								<>
-									<span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-									{t("leaving")}
-								</>
-							) : (
-								t("leave")
+							<span className={isLeavingSearchSpace ? "opacity-0" : ""}>{t("leave")}</span>
+							{isLeavingSearchSpace && (
+								<span className="absolute h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
 							)}
 						</AlertDialogAction>
 					</AlertDialogFooter>
diff --git a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
index da28c17e0..ede469039 100644
--- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
@@ -807,9 +807,10 @@ export function DocumentsSidebar({
 								handleBulkDeleteSelected();
 							}}
 							disabled={isBulkDeleting}
-							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+							className="relative bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
-							{isBulkDeleting ? <Spinner size="sm" /> : "Delete"}
+							<span className={isBulkDeleting ? "opacity-0" : ""}>Delete</span>
+							{isBulkDeleting && <Spinner size="sm" className="absolute" />}
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>

From db263735947f1bf84585ff0d55118fc7c5f42c15 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 16:33:15 +0530
Subject: [PATCH 04/24] refactor: update styling for button and command
 components in ImageModelManager for improved UI consistency

---
 surfsense_web/components/settings/image-model-manager.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx
index 877fa991c..74de7c28c 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -610,14 +610,14 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 										<Button
 											variant="outline"
 											role="combobox"
-											className="w-full justify-between font-normal"
+											className="w-full justify-between font-normal bg-transparent hover:bg-transparent hover:text-foreground"
 										>
 											{formData.model_name || "Select a model"}
 											<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 										</Button>
 									</PopoverTrigger>
 									<PopoverContent className="w-full p-0" align="start">
-										<Command>
+										<Command className="bg-transparent">
 											<CommandInput
 												placeholder="Search a model name"
 												value={formData.model_name}

From 430372a4ff12e884f6f9c8529bf61f2652de4dfa Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 17:02:20 +0530
Subject: [PATCH 05/24] refactor: move ImageConfigDialog to shared components
 and update imports in chat-header and image-model-manager for better
 organization

---
 .../image-gen-config-mutation.atoms.ts        |  12 +-
 .../components/new-chat/chat-header.tsx       |   2 +-
 .../new-chat/image-config-dialog.tsx          | 558 ------------------
 .../settings/image-model-manager.tsx          | 371 +-----------
 .../components/shared/image-config-dialog.tsx | 500 ++++++++++++++++
 5 files changed, 527 insertions(+), 916 deletions(-)
 delete mode 100644 surfsense_web/components/new-chat/image-config-dialog.tsx
 create mode 100644 surfsense_web/components/shared/image-config-dialog.tsx

diff --git a/surfsense_web/atoms/image-gen-config/image-gen-config-mutation.atoms.ts b/surfsense_web/atoms/image-gen-config/image-gen-config-mutation.atoms.ts
index dbaf441d0..dd8bcd324 100644
--- a/surfsense_web/atoms/image-gen-config/image-gen-config-mutation.atoms.ts
+++ b/surfsense_web/atoms/image-gen-config/image-gen-config-mutation.atoms.ts
@@ -24,13 +24,13 @@ export const createImageGenConfigMutationAtom = atomWithMutation((get) => {
 			return imageGenConfigApiService.createConfig(request);
 		},
 		onSuccess: () => {
-			toast.success("Image model configuration created");
+			toast.success("Image model created");
 			queryClient.invalidateQueries({
 				queryKey: cacheKeys.imageGenConfigs.all(Number(searchSpaceId)),
 			});
 		},
 		onError: (error: Error) => {
-			toast.error(error.message || "Failed to create image model configuration");
+			toast.error(error.message || "Failed to create image model");
 		},
 	};
 });
@@ -48,7 +48,7 @@ export const updateImageGenConfigMutationAtom = atomWithMutation((get) => {
 			return imageGenConfigApiService.updateConfig(request);
 		},
 		onSuccess: (_: UpdateImageGenConfigResponse, request: UpdateImageGenConfigRequest) => {
-			toast.success("Image model configuration updated");
+			toast.success("Image model updated");
 			queryClient.invalidateQueries({
 				queryKey: cacheKeys.imageGenConfigs.all(Number(searchSpaceId)),
 			});
@@ -57,7 +57,7 @@ export const updateImageGenConfigMutationAtom = atomWithMutation((get) => {
 			});
 		},
 		onError: (error: Error) => {
-			toast.error(error.message || "Failed to update image model configuration");
+			toast.error(error.message || "Failed to update image model");
 		},
 	};
 });
@@ -75,7 +75,7 @@ export const deleteImageGenConfigMutationAtom = atomWithMutation((get) => {
 			return imageGenConfigApiService.deleteConfig(id);
 		},
 		onSuccess: (_, id: number) => {
-			toast.success("Image model configuration deleted");
+			toast.success("Image model deleted");
 			queryClient.setQueryData(
 				cacheKeys.imageGenConfigs.all(Number(searchSpaceId)),
 				(oldData: GetImageGenConfigsResponse | undefined) => {
@@ -85,7 +85,7 @@ export const deleteImageGenConfigMutationAtom = atomWithMutation((get) => {
 			);
 		},
 		onError: (error: Error) => {
-			toast.error(error.message || "Failed to delete image model configuration");
+			toast.error(error.message || "Failed to delete image model");
 		},
 	};
 });
diff --git a/surfsense_web/components/new-chat/chat-header.tsx b/surfsense_web/components/new-chat/chat-header.tsx
index 45a07d5a1..06801372d 100644
--- a/surfsense_web/components/new-chat/chat-header.tsx
+++ b/surfsense_web/components/new-chat/chat-header.tsx
@@ -7,7 +7,7 @@ import type {
 	ImageGenerationConfig,
 	NewLLMConfigPublic,
 } from "@/contracts/types/new-llm-config.types";
-import { ImageConfigDialog } from "./image-config-dialog";
+import { ImageConfigDialog } from "@/components/shared/image-config-dialog";
 import { ModelConfigDialog } from "./model-config-dialog";
 import { ModelSelector } from "./model-selector";
 
diff --git a/surfsense_web/components/new-chat/image-config-dialog.tsx b/surfsense_web/components/new-chat/image-config-dialog.tsx
deleted file mode 100644
index 12263bdb1..000000000
--- a/surfsense_web/components/new-chat/image-config-dialog.tsx
+++ /dev/null
@@ -1,558 +0,0 @@
-"use client";
-
-import { useAtomValue } from "jotai";
-import { AlertCircle, Check, ChevronsUpDown, X } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { toast } from "sonner";
-import {
-	createImageGenConfigMutationAtom,
-	updateImageGenConfigMutationAtom,
-} from "@/atoms/image-gen-config/image-gen-config-mutation.atoms";
-import { updateLLMPreferencesMutationAtom } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-} from "@/components/ui/command";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { Spinner } from "@/components/ui/spinner";
-import { IMAGE_GEN_MODELS, IMAGE_GEN_PROVIDERS } from "@/contracts/enums/image-gen-providers";
-import type {
-	GlobalImageGenConfig,
-	ImageGenerationConfig,
-	ImageGenProvider,
-} from "@/contracts/types/new-llm-config.types";
-import { cn } from "@/lib/utils";
-
-interface ImageConfigDialogProps {
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	config: ImageGenerationConfig | GlobalImageGenConfig | null;
-	isGlobal: boolean;
-	searchSpaceId: number;
-	mode: "create" | "edit" | "view";
-}
-
-const INITIAL_FORM = {
-	name: "",
-	description: "",
-	provider: "",
-	model_name: "",
-	api_key: "",
-	api_base: "",
-	api_version: "",
-};
-
-export function ImageConfigDialog({
-	open,
-	onOpenChange,
-	config,
-	isGlobal,
-	searchSpaceId,
-	mode,
-}: ImageConfigDialogProps) {
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [mounted, setMounted] = useState(false);
-	const [formData, setFormData] = useState(INITIAL_FORM);
-	const [modelComboboxOpen, setModelComboboxOpen] = useState(false);
-	const [scrollPos, setScrollPos] = useState<"top" | "middle" | "bottom">("top");
-	const scrollRef = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		setMounted(true);
-	}, []);
-
-	useEffect(() => {
-		if (open) {
-			if (mode === "edit" && config && !isGlobal) {
-				setFormData({
-					name: config.name || "",
-					description: config.description || "",
-					provider: config.provider || "",
-					model_name: config.model_name || "",
-					api_key: (config as ImageGenerationConfig).api_key || "",
-					api_base: config.api_base || "",
-					api_version: config.api_version || "",
-				});
-			} else if (mode === "create") {
-				setFormData(INITIAL_FORM);
-			}
-			setScrollPos("top");
-		}
-	}, [open, mode, config, isGlobal]);
-
-	const { mutateAsync: createConfig } = useAtomValue(createImageGenConfigMutationAtom);
-	const { mutateAsync: updateConfig } = useAtomValue(updateImageGenConfigMutationAtom);
-	const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
-
-	useEffect(() => {
-		const handleEscape = (e: KeyboardEvent) => {
-			if (e.key === "Escape" && open) onOpenChange(false);
-		};
-		window.addEventListener("keydown", handleEscape);
-		return () => window.removeEventListener("keydown", handleEscape);
-	}, [open, onOpenChange]);
-
-	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-		const el = e.currentTarget;
-		const atTop = el.scrollTop <= 2;
-		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
-		setScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
-	}, []);
-
-	const isAutoMode = config && "is_auto_mode" in config && config.is_auto_mode;
-
-	const suggestedModels = useMemo(() => {
-		if (!formData.provider) return [];
-		return IMAGE_GEN_MODELS.filter((m) => m.provider === formData.provider);
-	}, [formData.provider]);
-
-	const getTitle = () => {
-		if (mode === "create") return "Add Image Model";
-		if (isAutoMode) return "Auto Mode (Fastest)";
-		if (isGlobal) return "View Global Image Model";
-		return "Edit Image Model";
-	};
-
-	const getSubtitle = () => {
-		if (mode === "create") return "Set up a new image generation provider";
-		if (isAutoMode) return "Automatically routes requests across providers";
-		if (isGlobal) return "Read-only global configuration";
-		return "Update your image model settings";
-	};
-
-	const handleSubmit = useCallback(async () => {
-		setIsSubmitting(true);
-		try {
-			if (mode === "create") {
-				const result = await createConfig({
-					name: formData.name,
-					provider: formData.provider as ImageGenProvider,
-					model_name: formData.model_name,
-					api_key: formData.api_key,
-					api_base: formData.api_base || undefined,
-					api_version: formData.api_version || undefined,
-					description: formData.description || undefined,
-					search_space_id: searchSpaceId,
-				});
-				if (result?.id) {
-					await updatePreferences({
-						search_space_id: searchSpaceId,
-						data: { image_generation_config_id: result.id },
-					});
-				}
-				toast.success("Image model created and assigned!");
-				onOpenChange(false);
-			} else if (!isGlobal && config) {
-				await updateConfig({
-					id: config.id,
-					data: {
-						name: formData.name,
-						description: formData.description || undefined,
-						provider: formData.provider as ImageGenProvider,
-						model_name: formData.model_name,
-						api_key: formData.api_key,
-						api_base: formData.api_base || undefined,
-						api_version: formData.api_version || undefined,
-					},
-				});
-				toast.success("Image model updated!");
-				onOpenChange(false);
-			}
-		} catch (error) {
-			console.error("Failed to save image config:", error);
-			toast.error("Failed to save image model");
-		} finally {
-			setIsSubmitting(false);
-		}
-	}, [
-		mode,
-		isGlobal,
-		config,
-		formData,
-		searchSpaceId,
-		createConfig,
-		updateConfig,
-		updatePreferences,
-		onOpenChange,
-	]);
-
-	const handleUseGlobalConfig = useCallback(async () => {
-		if (!config || !isGlobal) return;
-		setIsSubmitting(true);
-		try {
-			await updatePreferences({
-				search_space_id: searchSpaceId,
-				data: { image_generation_config_id: config.id },
-			});
-			toast.success(`Now using ${config.name}`);
-			onOpenChange(false);
-		} catch (error) {
-			console.error("Failed to set image model:", error);
-			toast.error("Failed to set image model");
-		} finally {
-			setIsSubmitting(false);
-		}
-	}, [config, isGlobal, searchSpaceId, updatePreferences, onOpenChange]);
-
-	const isFormValid = formData.name && formData.provider && formData.model_name && formData.api_key;
-	const selectedProvider = IMAGE_GEN_PROVIDERS.find((p) => p.value === formData.provider);
-
-	if (!mounted) return null;
-
-	const dialogContent = (
-		<AnimatePresence>
-			{open && (
-				<>
-					<motion.div
-						initial={{ opacity: 0 }}
-						animate={{ opacity: 1 }}
-						exit={{ opacity: 0 }}
-						transition={{ duration: 0.15 }}
-						className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
-						onClick={() => onOpenChange(false)}
-					/>
-
-					<motion.div
-						initial={{ opacity: 0, scale: 0.96 }}
-						animate={{ opacity: 1, scale: 1 }}
-						exit={{ opacity: 0, scale: 0.96 }}
-						transition={{ duration: 0.15, ease: "easeOut" }}
-						className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6"
-					>
-						<div
-							role="dialog"
-							aria-modal="true"
-							className={cn(
-								"relative w-full max-w-lg h-[85vh]",
-								"rounded-xl bg-background shadow-2xl",
-								"dark:bg-neutral-900",
-								"flex flex-col overflow-hidden"
-							)}
-							onClick={(e) => e.stopPropagation()}
-							onKeyDown={(e) => {
-								if (e.key === "Escape") onOpenChange(false);
-							}}
-						>
-							{/* Header */}
-							<div className="flex items-start justify-between px-6 pt-6 pb-4">
-								<div className="space-y-1 pr-8">
-									<div className="flex items-center gap-2">
-										<h2 className="text-lg font-semibold tracking-tight">{getTitle()}</h2>
-										{isAutoMode && (
-											<Badge variant="secondary" className="text-[10px]">
-												Recommended
-											</Badge>
-										)}
-										{isGlobal && !isAutoMode && mode !== "create" && (
-											<Badge variant="secondary" className="text-[10px]">
-												Global
-											</Badge>
-										)}
-									</div>
-									<p className="text-sm text-muted-foreground">{getSubtitle()}</p>
-									{config && !isAutoMode && mode !== "create" && (
-										<p className="text-xs font-mono text-muted-foreground/70">
-											{config.model_name}
-										</p>
-									)}
-								</div>
-								<Button
-									variant="ghost"
-									size="icon"
-									onClick={() => onOpenChange(false)}
-									className="absolute right-4 top-4 h-8 w-8 rounded-full text-muted-foreground hover:text-foreground"
-								>
-									<X className="h-4 w-4" />
-									<span className="sr-only">Close</span>
-								</Button>
-							</div>
-
-							{/* Scrollable content */}
-							<div
-								ref={scrollRef}
-								onScroll={handleScroll}
-								className="flex-1 overflow-y-auto px-6 py-5"
-								style={{
-									maskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
-									WebkitMaskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
-								}}
-							>
-								{isAutoMode && (
-									<Alert className="mb-5 border-violet-500/30 bg-violet-500/5">
-										<AlertDescription className="text-sm text-violet-700 dark:text-violet-400">
-											Auto mode distributes image generation requests across all configured
-											providers for optimal performance and rate limit protection.
-										</AlertDescription>
-									</Alert>
-								)}
-
-								{isGlobal && !isAutoMode && config && (
-									<>
-										<Alert className="mb-5 border-amber-500/30 bg-amber-500/5">
-											<AlertCircle className="size-4 text-amber-500" />
-											<AlertDescription className="text-sm text-amber-700 dark:text-amber-400">
-												Global configurations are read-only. To customize, create a new model.
-											</AlertDescription>
-										</Alert>
-										<div className="space-y-4">
-											<div className="grid gap-4 sm:grid-cols-2">
-												<div className="space-y-1.5">
-													<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-														Name
-													</div>
-													<p className="text-sm font-medium">{config.name}</p>
-												</div>
-												{config.description && (
-													<div className="space-y-1.5">
-														<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-															Description
-														</div>
-														<p className="text-sm text-muted-foreground">{config.description}</p>
-													</div>
-												)}
-											</div>
-											<Separator />
-											<div className="grid gap-4 sm:grid-cols-2">
-												<div className="space-y-1.5">
-													<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-														Provider
-													</div>
-													<p className="text-sm font-medium">{config.provider}</p>
-												</div>
-												<div className="space-y-1.5">
-													<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-														Model
-													</div>
-													<p className="text-sm font-medium font-mono">{config.model_name}</p>
-												</div>
-											</div>
-										</div>
-									</>
-								)}
-
-								{(mode === "create" || (mode === "edit" && !isGlobal)) && (
-									<div className="space-y-4">
-										<div className="space-y-2">
-											<Label className="text-sm font-medium">Name *</Label>
-											<Input
-												placeholder="e.g., My DALL-E 3"
-												value={formData.name}
-												onChange={(e) => setFormData((p) => ({ ...p, name: e.target.value }))}
-											/>
-										</div>
-
-										<div className="space-y-2">
-											<Label className="text-sm font-medium">Description</Label>
-											<Input
-												placeholder="Optional description"
-												value={formData.description}
-												onChange={(e) =>
-													setFormData((p) => ({ ...p, description: e.target.value }))
-												}
-											/>
-										</div>
-
-										<Separator />
-
-										<div className="space-y-2">
-											<Label className="text-sm font-medium">Provider *</Label>
-											<Select
-												value={formData.provider}
-												onValueChange={(val) =>
-													setFormData((p) => ({ ...p, provider: val, model_name: "" }))
-												}
-											>
-												<SelectTrigger>
-													<SelectValue placeholder="Select a provider" />
-												</SelectTrigger>
-												<SelectContent className="bg-muted dark:border-neutral-700">
-													{IMAGE_GEN_PROVIDERS.map((p) => (
-														<SelectItem key={p.value} value={p.value} description={p.example}>
-															{p.label}
-														</SelectItem>
-													))}
-												</SelectContent>
-											</Select>
-										</div>
-
-										<div className="space-y-2">
-											<Label className="text-sm font-medium">Model Name *</Label>
-											{suggestedModels.length > 0 ? (
-												<Popover open={modelComboboxOpen} onOpenChange={setModelComboboxOpen}>
-													<PopoverTrigger asChild>
-														<Button
-															variant="outline"
-															role="combobox"
-															className="w-full justify-between font-normal bg-transparent"
-														>
-															{formData.model_name || "Select or type a model..."}
-															<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-														</Button>
-													</PopoverTrigger>
-													<PopoverContent
-														className="w-full p-0 bg-muted dark:border-neutral-700"
-														align="start"
-													>
-														<Command className="bg-transparent">
-															<CommandInput
-																placeholder="Search or type model..."
-																value={formData.model_name}
-																onValueChange={(val) =>
-																	setFormData((p) => ({ ...p, model_name: val }))
-																}
-															/>
-															<CommandList>
-																<CommandEmpty>
-																	<span className="text-xs text-muted-foreground">
-																		Type a custom model name
-																	</span>
-																</CommandEmpty>
-																<CommandGroup>
-																	{suggestedModels.map((m) => (
-																		<CommandItem
-																			key={m.value}
-																			value={m.value}
-																			onSelect={() => {
-																				setFormData((p) => ({ ...p, model_name: m.value }));
-																				setModelComboboxOpen(false);
-																			}}
-																		>
-																			<Check
-																				className={cn(
-																					"mr-2 h-4 w-4",
-																					formData.model_name === m.value
-																						? "opacity-100"
-																						: "opacity-0"
-																				)}
-																			/>
-																			<span className="font-mono text-sm">{m.value}</span>
-																			<span className="ml-2 text-xs text-muted-foreground">
-																				{m.label}
-																			</span>
-																		</CommandItem>
-																	))}
-																</CommandGroup>
-															</CommandList>
-														</Command>
-													</PopoverContent>
-												</Popover>
-											) : (
-												<Input
-													placeholder="e.g., dall-e-3"
-													value={formData.model_name}
-													onChange={(e) =>
-														setFormData((p) => ({ ...p, model_name: e.target.value }))
-													}
-												/>
-											)}
-										</div>
-
-										<div className="space-y-2">
-											<Label className="text-sm font-medium">API Key *</Label>
-											<Input
-												type="password"
-												placeholder="sk-..."
-												value={formData.api_key}
-												onChange={(e) => setFormData((p) => ({ ...p, api_key: e.target.value }))}
-											/>
-										</div>
-
-										<div className="space-y-2">
-											<Label className="text-sm font-medium">API Base URL</Label>
-											<Input
-												placeholder={selectedProvider?.apiBase || "Optional"}
-												value={formData.api_base}
-												onChange={(e) => setFormData((p) => ({ ...p, api_base: e.target.value }))}
-											/>
-										</div>
-
-										{formData.provider === "AZURE_OPENAI" && (
-											<div className="space-y-2">
-												<Label className="text-sm font-medium">API Version (Azure)</Label>
-												<Input
-													placeholder="2024-02-15-preview"
-													value={formData.api_version}
-													onChange={(e) =>
-														setFormData((p) => ({ ...p, api_version: e.target.value }))
-													}
-												/>
-											</div>
-										)}
-									</div>
-								)}
-							</div>
-
-							{/* Fixed footer */}
-							<div className="shrink-0 px-6 py-4 flex items-center justify-end gap-3">
-								<Button
-									type="button"
-									variant="secondary"
-									onClick={() => onOpenChange(false)}
-									disabled={isSubmitting}
-									className="text-sm h-9"
-								>
-									Cancel
-								</Button>
-								{mode === "create" || (mode === "edit" && !isGlobal) ? (
-									<Button
-										onClick={handleSubmit}
-										disabled={isSubmitting || !isFormValid}
-										className="text-sm h-9 min-w-[120px]"
-									>
-										{isSubmitting ? (
-											<>
-												<Spinner size="sm" />
-												{mode === "edit" ? "Saving" : "Creating"}
-											</>
-										) : mode === "edit" ? (
-											"Save Changes"
-										) : (
-											"Create & Use"
-										)}
-									</Button>
-								) : isAutoMode ? (
-									<Button
-										className="text-sm h-9 gap-2 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700"
-										onClick={handleUseGlobalConfig}
-										disabled={isSubmitting}
-									>
-										{isSubmitting ? "Loading..." : "Use Auto Mode"}
-									</Button>
-								) : isGlobal && config ? (
-									<Button
-										className="text-sm h-9 gap-2"
-										onClick={handleUseGlobalConfig}
-										disabled={isSubmitting}
-									>
-										{isSubmitting ? "Loading..." : "Use This Model"}
-									</Button>
-								) : null}
-							</div>
-						</div>
-					</motion.div>
-				</>
-			)}
-		</AnimatePresence>
-	);
-
-	return typeof document !== "undefined" ? createPortal(dialogContent, document.body) : null;
-}
diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx
index 74de7c28c..7b0db5596 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -3,29 +3,22 @@
 import { useAtomValue } from "jotai";
 import {
 	AlertCircle,
-	Check,
-	ChevronsUpDown,
 	Edit3,
 	Info,
-	Key,
 	Plus,
 	RefreshCw,
 	Trash2,
 	Wand2,
 } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
-import { toast } from "sonner";
+import { useMemo, useState } from "react";
 import {
-	createImageGenConfigMutationAtom,
 	deleteImageGenConfigMutationAtom,
-	updateImageGenConfigMutationAtom,
 } from "@/atoms/image-gen-config/image-gen-config-mutation.atoms";
 import {
 	globalImageGenConfigsAtom,
 	imageGenConfigsAtom,
 } from "@/atoms/image-gen-config/image-gen-config-query.atoms";
 import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
-import { updateLLMPreferencesMutationAtom } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import {
 	AlertDialog,
@@ -40,43 +33,14 @@ import {
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-} from "@/components/ui/command";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import {
-	getImageGenModelsByProvider,
-	IMAGE_GEN_PROVIDERS,
-} from "@/contracts/enums/image-gen-providers";
 import type { ImageGenerationConfig } from "@/contracts/types/new-llm-config.types";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { getProviderIcon } from "@/lib/provider-icons";
 import { cn } from "@/lib/utils";
+import { ImageConfigDialog } from "@/components/shared/image-config-dialog";
 
 interface ImageModelManagerProps {
 	searchSpaceId: number;
@@ -92,23 +56,12 @@ function getInitials(name: string): string {
 
 export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 	const isDesktop = useMediaQuery("(min-width: 768px)");
-	// Image gen config atoms
-	const {
-		mutateAsync: createConfig,
-		isPending: isCreating,
-		error: createError,
-	} = useAtomValue(createImageGenConfigMutationAtom);
-	const {
-		mutateAsync: updateConfig,
-		isPending: isUpdating,
-		error: updateError,
-	} = useAtomValue(updateImageGenConfigMutationAtom);
+
 	const {
 		mutateAsync: deleteConfig,
 		isPending: isDeleting,
 		error: deleteError,
 	} = useAtomValue(deleteImageGenConfigMutationAtom);
-	const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
 
 	const {
 		data: userConfigs,
@@ -119,7 +72,6 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 	const { data: globalConfigs = [], isFetching: globalLoading } =
 		useAtomValue(globalImageGenConfigsAtom);
 
-	// Members for user resolution
 	const { data: members } = useAtomValue(membersAtom);
 	const memberMap = useMemo(() => {
 		const map = new Map<string, { name: string; email?: string; avatarUrl?: string }>();
@@ -135,7 +87,6 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 		return map;
 	}, [members]);
 
-	// Permissions
 	const { data: access } = useAtomValue(myAccessAtom);
 	const canCreate = useMemo(() => {
 		if (!access) return false;
@@ -147,92 +98,25 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 		if (access.is_owner) return true;
 		return access.permissions?.includes("image_generations:delete") ?? false;
 	}, [access]);
-	// Backend uses image_generations:create for update as well
 	const canUpdate = canCreate;
 	const isReadOnly = !canCreate && !canDelete;
 
-	// Local state
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
 	const [editingConfig, setEditingConfig] = useState<ImageGenerationConfig | null>(null);
 	const [configToDelete, setConfigToDelete] = useState<ImageGenerationConfig | null>(null);
 
-	const isSubmitting = isCreating || isUpdating;
 	const isLoading = configsLoading || globalLoading;
-	const errors = [createError, updateError, deleteError, fetchError].filter(Boolean) as Error[];
-
-	// Form state for create/edit dialog
-	const [formData, setFormData] = useState({
-		name: "",
-		description: "",
-		provider: "",
-		custom_provider: "",
-		model_name: "",
-		api_key: "",
-		api_base: "",
-		api_version: "",
-	});
-	const [modelComboboxOpen, setModelComboboxOpen] = useState(false);
+	const errors = [deleteError, fetchError].filter(Boolean) as Error[];
 
-	const resetForm = () => {
-		setFormData({
-			name: "",
-			description: "",
-			provider: "",
-			custom_provider: "",
-			model_name: "",
-			api_key: "",
-			api_base: "",
-			api_version: "",
-		});
+	const openEditDialog = (config: ImageGenerationConfig) => {
+		setEditingConfig(config);
+		setIsDialogOpen(true);
 	};
 
-	const handleFormSubmit = useCallback(async () => {
-		if (!formData.name || !formData.provider || !formData.model_name || !formData.api_key) {
-			toast.error("Please fill in all required fields");
-			return;
-		}
-		try {
-			if (editingConfig) {
-				await updateConfig({
-					id: editingConfig.id,
-					data: {
-						name: formData.name,
-						description: formData.description || undefined,
-						provider: formData.provider as any,
-						custom_provider: formData.custom_provider || undefined,
-						model_name: formData.model_name,
-						api_key: formData.api_key,
-						api_base: formData.api_base || undefined,
-						api_version: formData.api_version || undefined,
-					},
-				});
-			} else {
-				const result = await createConfig({
-					name: formData.name,
-					description: formData.description || undefined,
-					provider: formData.provider as any,
-					custom_provider: formData.custom_provider || undefined,
-					model_name: formData.model_name,
-					api_key: formData.api_key,
-					api_base: formData.api_base || undefined,
-					api_version: formData.api_version || undefined,
-					search_space_id: searchSpaceId,
-				});
-				// Auto-assign newly created config
-				if (result?.id) {
-					await updatePreferences({
-						search_space_id: searchSpaceId,
-						data: { image_generation_config_id: result.id },
-					});
-				}
-			}
-			setIsDialogOpen(false);
-			setEditingConfig(null);
-			resetForm();
-		} catch {
-			// Error handled by mutation
-		}
-	}, [editingConfig, formData, searchSpaceId, createConfig, updateConfig, updatePreferences]);
+	const openNewDialog = () => {
+		setEditingConfig(null);
+		setIsDialogOpen(true);
+	};
 
 	const handleDelete = async () => {
 		if (!configToDelete) return;
@@ -244,30 +128,6 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 		}
 	};
 
-	const openEditDialog = (config: ImageGenerationConfig) => {
-		setEditingConfig(config);
-		setFormData({
-			name: config.name,
-			description: config.description || "",
-			provider: config.provider,
-			custom_provider: config.custom_provider || "",
-			model_name: config.model_name,
-			api_key: config.api_key,
-			api_base: config.api_base || "",
-			api_version: config.api_version || "",
-		});
-		setIsDialogOpen(true);
-	};
-
-	const openNewDialog = () => {
-		setEditingConfig(null);
-		resetForm();
-		setIsDialogOpen(true);
-	};
-
-	const selectedProvider = IMAGE_GEN_PROVIDERS.find((p) => p.value === formData.provider);
-	const suggestedModels = getImageGenModelsByProvider(formData.provider);
-
 	return (
 		<div className="space-y-4 md:space-y-6">
 			{/* Header */}
@@ -348,31 +208,26 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 			{/* Loading Skeleton */}
 			{isLoading && (
 				<div className="space-y-4 md:space-y-6">
-					{/* Your Image Models Section Skeleton */}
 					<div className="space-y-4">
 						<div className="flex items-center justify-between">
 							<Skeleton className="h-6 md:h-7 w-40 md:w-48" />
 							<Skeleton className="h-8 md:h-9 w-32 md:w-36 rounded-md" />
 						</div>
 
-						{/* Cards Grid Skeleton */}
 						<div className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
 							{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
 								<Card key={key} className="border-border/60">
 									<CardContent className="p-4 flex flex-col gap-3">
-										{/* Header */}
 										<div className="flex items-start justify-between gap-2">
 											<div className="space-y-1.5 flex-1 min-w-0">
 												<Skeleton className="h-4 w-28 md:w-32" />
 												<Skeleton className="h-3 w-40 md:w-48" />
 											</div>
 										</div>
-										{/* Provider + Model */}
 										<div className="flex items-center gap-2">
 											<Skeleton className="h-5 w-16 rounded-full" />
 											<Skeleton className="h-5 w-24 rounded-md" />
 										</div>
-										{/* Footer */}
 										<div className="flex items-center gap-2 pt-2 border-t border-border/40">
 											<Skeleton className="h-3 w-20" />
 											<Skeleton className="h-4 w-4 rounded-full" />
@@ -529,204 +384,18 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 				</div>
 			)}
 
-			{/* Create/Edit Dialog */}
-			<Dialog
+			{/* Create/Edit Dialog — shared component */}
+			<ImageConfigDialog
 				open={isDialogOpen}
 				onOpenChange={(open) => {
-					if (!open) {
-						setIsDialogOpen(false);
-						setEditingConfig(null);
-						resetForm();
-					}
+					setIsDialogOpen(open);
+					if (!open) setEditingConfig(null);
 				}}
-			>
-				<DialogContent
-					className="max-w-lg max-h-[90vh] overflow-y-auto"
-					onOpenAutoFocus={(e) => e.preventDefault()}
-				>
-					<DialogHeader>
-						<DialogTitle>{editingConfig ? "Edit Image Model" : "Add Image Model"}</DialogTitle>
-						<DialogDescription>
-							{editingConfig
-								? "Update your image generation model"
-								: "Configure a new image generation model (DALL-E 3, GPT Image 1, etc.)"}
-						</DialogDescription>
-					</DialogHeader>
-
-					<div className="space-y-4 pt-2">
-						{/* Name */}
-						<div className="space-y-2">
-							<Label className="text-sm font-medium">Name *</Label>
-							<Input
-								placeholder="e.g., My DALL-E 3"
-								value={formData.name}
-								onChange={(e) => setFormData((p) => ({ ...p, name: e.target.value }))}
-							/>
-						</div>
-
-						{/* Description */}
-						<div className="space-y-2">
-							<Label className="text-sm font-medium">Description</Label>
-							<Input
-								placeholder="Optional description"
-								value={formData.description}
-								onChange={(e) => setFormData((p) => ({ ...p, description: e.target.value }))}
-							/>
-						</div>
-
-						<Separator />
-
-						{/* Provider */}
-						<div className="space-y-2">
-							<Label className="text-sm font-medium">Provider *</Label>
-							<Select
-								value={formData.provider}
-								onValueChange={(val) =>
-									setFormData((p) => ({ ...p, provider: val, model_name: "" }))
-								}
-							>
-								<SelectTrigger>
-									<SelectValue placeholder="Select a provider" />
-								</SelectTrigger>
-								<SelectContent>
-									{IMAGE_GEN_PROVIDERS.map((p) => (
-										<SelectItem key={p.value} value={p.value}>
-											<div className="flex flex-col">
-												<span className="font-medium">{p.label}</span>
-												<span className="text-xs text-muted-foreground">{p.example}</span>
-											</div>
-										</SelectItem>
-									))}
-								</SelectContent>
-							</Select>
-						</div>
-
-						{/* Model Name */}
-						<div className="space-y-2">
-							<Label className="text-sm font-medium">Model Name *</Label>
-							{suggestedModels.length > 0 ? (
-								<Popover open={modelComboboxOpen} onOpenChange={setModelComboboxOpen}>
-									<PopoverTrigger asChild>
-										<Button
-											variant="outline"
-											role="combobox"
-											className="w-full justify-between font-normal bg-transparent hover:bg-transparent hover:text-foreground"
-										>
-											{formData.model_name || "Select a model"}
-											<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-										</Button>
-									</PopoverTrigger>
-									<PopoverContent className="w-full p-0" align="start">
-										<Command className="bg-transparent">
-											<CommandInput
-												placeholder="Search a model name"
-												value={formData.model_name}
-												onValueChange={(val) => setFormData((p) => ({ ...p, model_name: val }))}
-											/>
-											<CommandList>
-												<CommandEmpty>
-													<span className="text-xs text-muted-foreground">
-														Type a custom model name
-													</span>
-												</CommandEmpty>
-												<CommandGroup>
-													{suggestedModels.map((m) => (
-														<CommandItem
-															key={m.value}
-															value={m.value}
-															onSelect={() => {
-																setFormData((p) => ({ ...p, model_name: m.value }));
-																setModelComboboxOpen(false);
-															}}
-														>
-															<Check
-																className={cn(
-																	"mr-2 h-4 w-4",
-																	formData.model_name === m.value ? "opacity-100" : "opacity-0"
-																)}
-															/>
-															<span className="font-mono text-sm">{m.value}</span>
-															<span className="ml-2 text-xs text-muted-foreground">{m.label}</span>
-														</CommandItem>
-													))}
-												</CommandGroup>
-											</CommandList>
-										</Command>
-									</PopoverContent>
-								</Popover>
-							) : (
-								<Input
-									placeholder="e.g., dall-e-3"
-									value={formData.model_name}
-									onChange={(e) => setFormData((p) => ({ ...p, model_name: e.target.value }))}
-								/>
-							)}
-						</div>
-
-						{/* API Key */}
-						<div className="space-y-2">
-							<Label className="text-sm font-medium flex items-center gap-1.5">
-								<Key className="h-3.5 w-3.5" /> API Key *
-							</Label>
-							<Input
-								type="password"
-								placeholder="sk-..."
-								value={formData.api_key}
-								onChange={(e) => setFormData((p) => ({ ...p, api_key: e.target.value }))}
-							/>
-						</div>
-
-						{/* API Base (optional) */}
-						<div className="space-y-2">
-							<Label className="text-sm font-medium">API Base URL</Label>
-							<Input
-								placeholder={selectedProvider?.apiBase || "Optional"}
-								value={formData.api_base}
-								onChange={(e) => setFormData((p) => ({ ...p, api_base: e.target.value }))}
-							/>
-						</div>
-
-						{/* API Version (Azure) */}
-						{formData.provider === "AZURE_OPENAI" && (
-							<div className="space-y-2">
-								<Label className="text-sm font-medium">API Version (Azure)</Label>
-								<Input
-									placeholder="2024-02-15-preview"
-									value={formData.api_version}
-									onChange={(e) => setFormData((p) => ({ ...p, api_version: e.target.value }))}
-								/>
-							</div>
-						)}
-
-						{/* Actions */}
-						<div className="flex justify-end gap-3 pt-4 border-t">
-							<Button
-								variant="secondary"
-								onClick={() => {
-									setIsDialogOpen(false);
-									setEditingConfig(null);
-									resetForm();
-								}}
-							>
-								Cancel
-							</Button>
-							<Button
-								onClick={handleFormSubmit}
-								disabled={
-									isSubmitting ||
-									!formData.name ||
-									!formData.provider ||
-									!formData.model_name ||
-									!formData.api_key
-								}
-							>
-								{isSubmitting ? <Spinner size="sm" className="mr-2" /> : null}
-								{editingConfig ? "Save Changes" : "Create & Use"}
-							</Button>
-						</div>
-					</div>
-				</DialogContent>
-			</Dialog>
+				config={editingConfig}
+				isGlobal={false}
+				searchSpaceId={searchSpaceId}
+				mode={editingConfig ? "edit" : "create"}
+			/>
 
 			{/* Delete Confirmation */}
 			<AlertDialog
diff --git a/surfsense_web/components/shared/image-config-dialog.tsx b/surfsense_web/components/shared/image-config-dialog.tsx
new file mode 100644
index 000000000..4a9c3862a
--- /dev/null
+++ b/surfsense_web/components/shared/image-config-dialog.tsx
@@ -0,0 +1,500 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import { AlertCircle, Check, ChevronsUpDown } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import {
+	createImageGenConfigMutationAtom,
+	updateImageGenConfigMutationAtom,
+} from "@/atoms/image-gen-config/image-gen-config-mutation.atoms";
+import { updateLLMPreferencesMutationAtom } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Spinner } from "@/components/ui/spinner";
+import { IMAGE_GEN_MODELS, IMAGE_GEN_PROVIDERS } from "@/contracts/enums/image-gen-providers";
+import type {
+	GlobalImageGenConfig,
+	ImageGenerationConfig,
+	ImageGenProvider,
+} from "@/contracts/types/new-llm-config.types";
+import { cn } from "@/lib/utils";
+
+interface ImageConfigDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	config: ImageGenerationConfig | GlobalImageGenConfig | null;
+	isGlobal: boolean;
+	searchSpaceId: number;
+	mode: "create" | "edit" | "view";
+}
+
+const INITIAL_FORM = {
+	name: "",
+	description: "",
+	provider: "",
+	model_name: "",
+	api_key: "",
+	api_base: "",
+	api_version: "",
+};
+
+export function ImageConfigDialog({
+	open,
+	onOpenChange,
+	config,
+	isGlobal,
+	searchSpaceId,
+	mode,
+}: ImageConfigDialogProps) {
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [formData, setFormData] = useState(INITIAL_FORM);
+	const [modelComboboxOpen, setModelComboboxOpen] = useState(false);
+	const [scrollPos, setScrollPos] = useState<"top" | "middle" | "bottom">("top");
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (open) {
+			if (mode === "edit" && config && !isGlobal) {
+				setFormData({
+					name: config.name || "",
+					description: config.description || "",
+					provider: config.provider || "",
+					model_name: config.model_name || "",
+					api_key: (config as ImageGenerationConfig).api_key || "",
+					api_base: config.api_base || "",
+					api_version: config.api_version || "",
+				});
+			} else if (mode === "create") {
+				setFormData(INITIAL_FORM);
+			}
+			setScrollPos("top");
+		}
+	}, [open, mode, config, isGlobal]);
+
+	const { mutateAsync: createConfig } = useAtomValue(createImageGenConfigMutationAtom);
+	const { mutateAsync: updateConfig } = useAtomValue(updateImageGenConfigMutationAtom);
+	const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
+
+	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		const el = e.currentTarget;
+		const atTop = el.scrollTop <= 2;
+		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
+		setScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
+	}, []);
+
+	const isAutoMode = config && "is_auto_mode" in config && config.is_auto_mode;
+
+	const suggestedModels = useMemo(() => {
+		if (!formData.provider) return [];
+		return IMAGE_GEN_MODELS.filter((m) => m.provider === formData.provider);
+	}, [formData.provider]);
+
+	const getTitle = () => {
+		if (mode === "create") return "Add Image Model";
+		if (isAutoMode) return "Auto Mode (Fastest)";
+		if (isGlobal) return "View Global Image Model";
+		return "Edit Image Model";
+	};
+
+	const getSubtitle = () => {
+		if (mode === "create") return "Set up a new image generation provider";
+		if (isAutoMode) return "Automatically routes requests across providers";
+		if (isGlobal) return "Read-only global configuration";
+		return "Update your image model settings";
+	};
+
+	const handleSubmit = useCallback(async () => {
+		setIsSubmitting(true);
+		try {
+			if (mode === "create") {
+				const result = await createConfig({
+					name: formData.name,
+					provider: formData.provider as ImageGenProvider,
+					model_name: formData.model_name,
+					api_key: formData.api_key,
+					api_base: formData.api_base || undefined,
+					api_version: formData.api_version || undefined,
+					description: formData.description || undefined,
+					search_space_id: searchSpaceId,
+				});
+				if (result?.id) {
+					await updatePreferences({
+						search_space_id: searchSpaceId,
+						data: { image_generation_config_id: result.id },
+					});
+				}
+				onOpenChange(false);
+			} else if (!isGlobal && config) {
+				await updateConfig({
+					id: config.id,
+					data: {
+						name: formData.name,
+						description: formData.description || undefined,
+						provider: formData.provider as ImageGenProvider,
+						model_name: formData.model_name,
+						api_key: formData.api_key,
+						api_base: formData.api_base || undefined,
+						api_version: formData.api_version || undefined,
+					},
+				});
+				onOpenChange(false);
+			}
+		} catch (error) {
+			console.error("Failed to save image config:", error);
+			toast.error("Failed to save image model");
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [
+		mode,
+		isGlobal,
+		config,
+		formData,
+		searchSpaceId,
+		createConfig,
+		updateConfig,
+		updatePreferences,
+		onOpenChange,
+	]);
+
+	const handleUseGlobalConfig = useCallback(async () => {
+		if (!config || !isGlobal) return;
+		setIsSubmitting(true);
+		try {
+			await updatePreferences({
+				search_space_id: searchSpaceId,
+				data: { image_generation_config_id: config.id },
+			});
+			toast.success(`Now using ${config.name}`);
+			onOpenChange(false);
+		} catch (error) {
+			console.error("Failed to set image model:", error);
+			toast.error("Failed to set image model");
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [config, isGlobal, searchSpaceId, updatePreferences, onOpenChange]);
+
+	const isFormValid = formData.name && formData.provider && formData.model_name && formData.api_key;
+	const selectedProvider = IMAGE_GEN_PROVIDERS.find((p) => p.value === formData.provider);
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent
+				className="max-w-lg h-[85vh] flex flex-col p-0 gap-0 overflow-hidden"
+				onOpenAutoFocus={(e) => e.preventDefault()}
+			>
+				<DialogTitle className="sr-only">{getTitle()}</DialogTitle>
+
+				{/* Header */}
+				<div className="flex items-start justify-between px-6 pt-6 pb-4 pr-14">
+					<div className="space-y-1">
+						<div className="flex items-center gap-2">
+							<h2 className="text-lg font-semibold tracking-tight">{getTitle()}</h2>
+							{isAutoMode && (
+								<Badge variant="secondary" className="text-[10px]">
+									Recommended
+								</Badge>
+							)}
+							{isGlobal && !isAutoMode && mode !== "create" && (
+								<Badge variant="secondary" className="text-[10px]">
+									Global
+								</Badge>
+							)}
+						</div>
+						<p className="text-sm text-muted-foreground">{getSubtitle()}</p>
+						{config && !isAutoMode && mode !== "create" && (
+							<p className="text-xs font-mono text-muted-foreground/70">
+								{config.model_name}
+							</p>
+						)}
+					</div>
+				</div>
+
+				{/* Scrollable content */}
+				<div
+					ref={scrollRef}
+					onScroll={handleScroll}
+					className="flex-1 overflow-y-auto px-6 py-5"
+					style={{
+						maskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
+						WebkitMaskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
+					}}
+				>
+					{isAutoMode && (
+						<Alert className="mb-5 border-violet-500/30 bg-violet-500/5">
+							<AlertDescription className="text-sm text-violet-700 dark:text-violet-400">
+								Auto mode distributes image generation requests across all configured
+								providers for optimal performance and rate limit protection.
+							</AlertDescription>
+						</Alert>
+					)}
+
+					{isGlobal && !isAutoMode && config && (
+						<>
+							<Alert className="mb-5 border-amber-500/30 bg-amber-500/5">
+								<AlertCircle className="size-4 text-amber-500" />
+								<AlertDescription className="text-sm text-amber-700 dark:text-amber-400">
+									Global configurations are read-only. To customize, create a new model.
+								</AlertDescription>
+							</Alert>
+							<div className="space-y-4">
+								<div className="grid gap-4 sm:grid-cols-2">
+									<div className="space-y-1.5">
+										<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+											Name
+										</div>
+										<p className="text-sm font-medium">{config.name}</p>
+									</div>
+									{config.description && (
+										<div className="space-y-1.5">
+											<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+												Description
+											</div>
+											<p className="text-sm text-muted-foreground">{config.description}</p>
+										</div>
+									)}
+								</div>
+								<Separator />
+								<div className="grid gap-4 sm:grid-cols-2">
+									<div className="space-y-1.5">
+										<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+											Provider
+										</div>
+										<p className="text-sm font-medium">{config.provider}</p>
+									</div>
+									<div className="space-y-1.5">
+										<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+											Model
+										</div>
+										<p className="text-sm font-medium font-mono">{config.model_name}</p>
+									</div>
+								</div>
+							</div>
+						</>
+					)}
+
+					{(mode === "create" || (mode === "edit" && !isGlobal)) && (
+						<div className="space-y-4">
+							<div className="space-y-2">
+								<Label className="text-sm font-medium">Name *</Label>
+								<Input
+									placeholder="e.g., My DALL-E 3"
+									value={formData.name}
+									onChange={(e) => setFormData((p) => ({ ...p, name: e.target.value }))}
+								/>
+							</div>
+
+							<div className="space-y-2">
+								<Label className="text-sm font-medium">Description</Label>
+								<Input
+									placeholder="Optional description"
+									value={formData.description}
+									onChange={(e) =>
+										setFormData((p) => ({ ...p, description: e.target.value }))
+									}
+								/>
+							</div>
+
+							<Separator />
+
+							<div className="space-y-2">
+								<Label className="text-sm font-medium">Provider *</Label>
+								<Select
+									value={formData.provider}
+									onValueChange={(val) =>
+										setFormData((p) => ({ ...p, provider: val, model_name: "" }))
+									}
+								>
+									<SelectTrigger>
+										<SelectValue placeholder="Select a provider" />
+									</SelectTrigger>
+									<SelectContent>
+										{IMAGE_GEN_PROVIDERS.map((p) => (
+											<SelectItem key={p.value} value={p.value} description={p.example}>
+												{p.label}
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+							</div>
+
+							<div className="space-y-2">
+								<Label className="text-sm font-medium">Model Name *</Label>
+								{suggestedModels.length > 0 ? (
+									<Popover open={modelComboboxOpen} onOpenChange={setModelComboboxOpen}>
+										<PopoverTrigger asChild>
+											<Button
+												variant="outline"
+												role="combobox"
+												className="w-full justify-between font-normal bg-transparent"
+											>
+												{formData.model_name || "Select or type a model..."}
+												<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+											</Button>
+										</PopoverTrigger>
+										<PopoverContent
+											className="w-full p-0"
+											align="start"
+										>
+											<Command className="bg-transparent">
+												<CommandInput
+													placeholder="Search or type model..."
+													value={formData.model_name}
+													onValueChange={(val) =>
+														setFormData((p) => ({ ...p, model_name: val }))
+													}
+												/>
+												<CommandList>
+													<CommandEmpty>
+														<span className="text-xs text-muted-foreground">
+															Type a custom model name
+														</span>
+													</CommandEmpty>
+													<CommandGroup>
+														{suggestedModels.map((m) => (
+															<CommandItem
+																key={m.value}
+																value={m.value}
+																onSelect={() => {
+																	setFormData((p) => ({ ...p, model_name: m.value }));
+																	setModelComboboxOpen(false);
+																}}
+															>
+																<Check
+																	className={cn(
+																		"mr-2 h-4 w-4",
+																		formData.model_name === m.value
+																			? "opacity-100"
+																			: "opacity-0"
+																	)}
+																/>
+																<span className="font-mono text-sm">{m.value}</span>
+																<span className="ml-2 text-xs text-muted-foreground">
+																	{m.label}
+																</span>
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</CommandList>
+											</Command>
+										</PopoverContent>
+									</Popover>
+								) : (
+									<Input
+										placeholder="e.g., dall-e-3"
+										value={formData.model_name}
+										onChange={(e) =>
+											setFormData((p) => ({ ...p, model_name: e.target.value }))
+										}
+									/>
+								)}
+							</div>
+
+							<div className="space-y-2">
+								<Label className="text-sm font-medium">API Key *</Label>
+								<Input
+									type="password"
+									placeholder="sk-..."
+									value={formData.api_key}
+									onChange={(e) => setFormData((p) => ({ ...p, api_key: e.target.value }))}
+								/>
+							</div>
+
+							<div className="space-y-2">
+								<Label className="text-sm font-medium">API Base URL</Label>
+								<Input
+									placeholder={selectedProvider?.apiBase || "Optional"}
+									value={formData.api_base}
+									onChange={(e) => setFormData((p) => ({ ...p, api_base: e.target.value }))}
+								/>
+							</div>
+
+							{formData.provider === "AZURE_OPENAI" && (
+								<div className="space-y-2">
+									<Label className="text-sm font-medium">API Version (Azure)</Label>
+									<Input
+										placeholder="2024-02-15-preview"
+										value={formData.api_version}
+										onChange={(e) =>
+											setFormData((p) => ({ ...p, api_version: e.target.value }))
+										}
+									/>
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+
+				{/* Fixed footer */}
+				<div className="shrink-0 px-6 py-4 flex items-center justify-end gap-3">
+					<Button
+						type="button"
+						variant="secondary"
+						onClick={() => onOpenChange(false)}
+						disabled={isSubmitting}
+						className="text-sm h-9"
+					>
+						Cancel
+					</Button>
+					{mode === "create" || (mode === "edit" && !isGlobal) ? (
+						<Button
+							onClick={handleSubmit}
+							disabled={isSubmitting || !isFormValid}
+							className="text-sm h-9 min-w-[120px]"
+						>
+							{isSubmitting ? (
+								<>
+									<Spinner size="sm" />
+									{mode === "edit" ? "Saving" : "Creating"}
+								</>
+							) : mode === "edit" ? (
+								"Save Changes"
+							) : (
+								"Create & Use"
+							)}
+						</Button>
+					) : isAutoMode ? (
+						<Button
+							className="text-sm h-9 gap-2 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700"
+							onClick={handleUseGlobalConfig}
+							disabled={isSubmitting}
+						>
+							{isSubmitting ? "Loading..." : "Use Auto Mode"}
+						</Button>
+					) : isGlobal && config ? (
+						<Button
+							className="text-sm h-9 gap-2"
+							onClick={handleUseGlobalConfig}
+							disabled={isSubmitting}
+						>
+							{isSubmitting ? "Loading..." : "Use This Model"}
+						</Button>
+					) : null}
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}

From f4adfb54fcd2964172c57ecdbdabc4d76db0c98d Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 17:16:40 +0530
Subject: [PATCH 06/24] refactor: update global image model and configuration
 messages for clarity and consistency across components

---
 .../settings/image-model-manager.tsx          |  6 +-----
 .../settings/model-config-manager.tsx         | 20 +++++++------------
 surfsense_web/messages/en.json                |  1 -
 surfsense_web/messages/es.json                |  1 -
 surfsense_web/messages/hi.json                |  1 -
 surfsense_web/messages/pt.json                |  1 -
 surfsense_web/messages/zh.json                |  1 -
 7 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx
index 7b0db5596..1c8394c9c 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -196,11 +196,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 				<Alert className="bg-muted/50 py-3">
 					<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
 					<AlertDescription className="text-xs md:text-sm">
-						<span className="font-medium">
-							{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length} global
-							image model(s)
-						</span>{" "}
-						available from your administrator.
+						<p><span className="font-medium">{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length} global image {globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length === 1 ? "model" : "models"}</span> available from your administrator. Use the model selector to view and select them.</p>
 					</AlertDescription>
 				</Alert>
 			)}
diff --git a/surfsense_web/components/settings/model-config-manager.tsx b/surfsense_web/components/settings/model-config-manager.tsx
index 80bfd8e31..64bd7455f 100644
--- a/surfsense_web/components/settings/model-config-manager.tsx
+++ b/surfsense_web/components/settings/model-config-manager.tsx
@@ -196,7 +196,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 						onClick={openNewDialog}
 						className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
 					>
-						Add Configuration
+						Add LLM Model
 					</Button>
 				)}
 			</div>
@@ -243,18 +243,12 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 
 			{/* Global Configs Info */}
 			{globalConfigs.length > 0 && (
-				<div>
-					<Alert className="bg-muted/50 py-3 md:py-4">
-						<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
-						<AlertDescription className="text-xs md:text-sm">
-							<span className="font-medium">{globalConfigs.length} global configuration(s)</span>{" "}
-							available from your administrator. These are pre-configured and ready to use.{" "}
-							<span className="text-muted-foreground">
-								Global configs: {globalConfigs.map((g) => g.name).join(", ")}
-							</span>
-						</AlertDescription>
-					</Alert>
-				</div>
+				<Alert className="bg-muted/50 py-3">
+					<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+					<AlertDescription className="text-xs md:text-sm">
+						<p><span className="font-medium">{globalConfigs.length} global {globalConfigs.length === 1 ? "model" : "models"}</span> available from your administrator. Use the model selector to view and select them.</p>
+					</AlertDescription>
+				</Alert>
 			)}
 
 			{/* Loading Skeleton */}
diff --git a/surfsense_web/messages/en.json b/surfsense_web/messages/en.json
index 22097b212..53f80ea5f 100644
--- a/surfsense_web/messages/en.json
+++ b/surfsense_web/messages/en.json
@@ -640,7 +640,6 @@
 		"active": "Active",
 		"your_configs": "Your Configurations",
 		"manage_configs": "Manage and configure your LLM providers",
-		"add_config": "Add Configuration",
 		"no_configs": "No Configurations Yet",
 		"no_configs_desc": "Add your own LLM provider configurations.",
 		"add_first_config": "Add First Configuration",
diff --git a/surfsense_web/messages/es.json b/surfsense_web/messages/es.json
index 83a00e721..36e627295 100644
--- a/surfsense_web/messages/es.json
+++ b/surfsense_web/messages/es.json
@@ -640,7 +640,6 @@
 		"active": "Activo",
 		"your_configs": "Tus configuraciones",
 		"manage_configs": "Administra y configura tus proveedores de LLM",
-		"add_config": "Agregar configuración",
 		"no_configs": "Aún no hay configuraciones",
 		"no_configs_desc": "Agrega tus propias configuraciones de proveedor de LLM.",
 		"add_first_config": "Agregar primera configuración",
diff --git a/surfsense_web/messages/hi.json b/surfsense_web/messages/hi.json
index ae3a77c2e..fd51acdc2 100644
--- a/surfsense_web/messages/hi.json
+++ b/surfsense_web/messages/hi.json
@@ -640,7 +640,6 @@
 		"active": "सक्रिय",
 		"your_configs": "आपकी कॉन्फ़िगरेशन",
 		"manage_configs": "अपने LLM प्रदाता प्रबंधित और कॉन्फ़िगर करें",
-		"add_config": "कॉन्फ़िगरेशन जोड़ें",
 		"no_configs": "अभी तक कोई कॉन्फ़िगरेशन नहीं",
 		"no_configs_desc": "अपनी LLM प्रदाता कॉन्फ़िगरेशन जोड़ें।",
 		"add_first_config": "पहली कॉन्फ़िगरेशन जोड़ें",
diff --git a/surfsense_web/messages/pt.json b/surfsense_web/messages/pt.json
index f622c0e51..e26499f90 100644
--- a/surfsense_web/messages/pt.json
+++ b/surfsense_web/messages/pt.json
@@ -640,7 +640,6 @@
 		"active": "Ativo",
 		"your_configs": "Suas configurações",
 		"manage_configs": "Gerencie e configure seus provedores de LLM",
-		"add_config": "Adicionar configuração",
 		"no_configs": "Nenhuma configuração ainda",
 		"no_configs_desc": "Adicione suas próprias configurações de provedor de LLM.",
 		"add_first_config": "Adicionar primeira configuração",
diff --git a/surfsense_web/messages/zh.json b/surfsense_web/messages/zh.json
index 2a1688b63..819432410 100644
--- a/surfsense_web/messages/zh.json
+++ b/surfsense_web/messages/zh.json
@@ -624,7 +624,6 @@
 		"active": "活跃",
 		"your_configs": "您的配置",
 		"manage_configs": "管理和配置您的 LLM 提供商",
-		"add_config": "添加配置",
 		"no_configs": "暂无配置",
 		"no_configs_desc": "添加您自己的 LLM 提供商配置。",
 		"add_first_config": "添加首个配置",

From d88236d43bc424c3b993f4984f797fd3288e4ae3 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 17:32:23 +0530
Subject: [PATCH 07/24] refactor: replace ModelConfigDialog with a shared
 component and update related imports for better organization and clarity

---
 .../new-llm-config-mutation.atoms.ts          |   6 +-
 .../components/new-chat/chat-header.tsx       |   2 +-
 .../new-chat/model-config-dialog.tsx          | 489 ------------------
 .../settings/model-config-manager.tsx         | 106 +---
 .../components/shared/model-config-dialog.tsx | 424 +++++++++++++++
 5 files changed, 441 insertions(+), 586 deletions(-)
 delete mode 100644 surfsense_web/components/new-chat/model-config-dialog.tsx
 create mode 100644 surfsense_web/components/shared/model-config-dialog.tsx

diff --git a/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts b/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts
index 8f81b7475..b3b9b2bab 100644
--- a/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts
+++ b/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts
@@ -26,7 +26,7 @@ export const createNewLLMConfigMutationAtom = atomWithMutation((get) => {
 			return newLLMConfigApiService.createConfig(request);
 		},
 		onSuccess: () => {
-			toast.success("Configuration created successfully");
+			toast.success("LLM model created");
 			queryClient.invalidateQueries({
 				queryKey: cacheKeys.newLLMConfigs.all(Number(searchSpaceId)),
 			});
@@ -50,7 +50,7 @@ export const updateNewLLMConfigMutationAtom = atomWithMutation((get) => {
 			return newLLMConfigApiService.updateConfig(request);
 		},
 		onSuccess: (_: UpdateNewLLMConfigResponse, request: UpdateNewLLMConfigRequest) => {
-			toast.success("Configuration updated successfully");
+			toast.success("LLM model updated");
 			queryClient.invalidateQueries({
 				queryKey: cacheKeys.newLLMConfigs.all(Number(searchSpaceId)),
 			});
@@ -77,7 +77,7 @@ export const deleteNewLLMConfigMutationAtom = atomWithMutation((get) => {
 			return newLLMConfigApiService.deleteConfig(request);
 		},
 		onSuccess: (_, request: DeleteNewLLMConfigRequest) => {
-			toast.success("Configuration deleted successfully");
+			toast.success("LLM model deleted");
 			queryClient.setQueryData(
 				cacheKeys.newLLMConfigs.all(Number(searchSpaceId)),
 				(oldData: GetNewLLMConfigsResponse | undefined) => {
diff --git a/surfsense_web/components/new-chat/chat-header.tsx b/surfsense_web/components/new-chat/chat-header.tsx
index 06801372d..5b7d3500c 100644
--- a/surfsense_web/components/new-chat/chat-header.tsx
+++ b/surfsense_web/components/new-chat/chat-header.tsx
@@ -8,7 +8,7 @@ import type {
 	NewLLMConfigPublic,
 } from "@/contracts/types/new-llm-config.types";
 import { ImageConfigDialog } from "@/components/shared/image-config-dialog";
-import { ModelConfigDialog } from "./model-config-dialog";
+import { ModelConfigDialog } from "@/components/shared/model-config-dialog";
 import { ModelSelector } from "./model-selector";
 
 interface ChatHeaderProps {
diff --git a/surfsense_web/components/new-chat/model-config-dialog.tsx b/surfsense_web/components/new-chat/model-config-dialog.tsx
deleted file mode 100644
index 06ec3b9b5..000000000
--- a/surfsense_web/components/new-chat/model-config-dialog.tsx
+++ /dev/null
@@ -1,489 +0,0 @@
-"use client";
-
-import { useAtomValue } from "jotai";
-import { AlertCircle, X, Zap } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { toast } from "sonner";
-import {
-	createNewLLMConfigMutationAtom,
-	updateLLMPreferencesMutationAtom,
-	updateNewLLMConfigMutationAtom,
-} from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
-import { LLMConfigForm, type LLMConfigFormData } from "@/components/shared/llm-config-form";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/spinner";
-import type {
-	GlobalNewLLMConfig,
-	LiteLLMProvider,
-	NewLLMConfigPublic,
-} from "@/contracts/types/new-llm-config.types";
-import { cn } from "@/lib/utils";
-
-interface ModelConfigDialogProps {
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	config: NewLLMConfigPublic | GlobalNewLLMConfig | null;
-	isGlobal: boolean;
-	searchSpaceId: number;
-	mode: "create" | "edit" | "view";
-}
-
-export function ModelConfigDialog({
-	open,
-	onOpenChange,
-	config,
-	isGlobal,
-	searchSpaceId,
-	mode,
-}: ModelConfigDialogProps) {
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [mounted, setMounted] = useState(false);
-	const [scrollPos, setScrollPos] = useState<"top" | "middle" | "bottom">("top");
-	const scrollRef = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		setMounted(true);
-	}, []);
-
-	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-		const el = e.currentTarget;
-		const atTop = el.scrollTop <= 2;
-		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
-		setScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
-	}, []);
-
-	const { mutateAsync: createConfig } = useAtomValue(createNewLLMConfigMutationAtom);
-	const { mutateAsync: updateConfig } = useAtomValue(updateNewLLMConfigMutationAtom);
-	const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
-
-	useEffect(() => {
-		const handleEscape = (e: KeyboardEvent) => {
-			if (e.key === "Escape" && open) {
-				onOpenChange(false);
-			}
-		};
-		window.addEventListener("keydown", handleEscape);
-		return () => window.removeEventListener("keydown", handleEscape);
-	}, [open, onOpenChange]);
-
-	const isAutoMode = config && "is_auto_mode" in config && config.is_auto_mode;
-
-	const getTitle = () => {
-		if (mode === "create") return "Add New Configuration";
-		if (isAutoMode) return "Auto Mode (Fastest)";
-		if (isGlobal) return "View Global Configuration";
-		return "Edit Configuration";
-	};
-
-	const getSubtitle = () => {
-		if (mode === "create") return "Set up a new LLM provider for this search space";
-		if (isAutoMode) return "Automatically routes requests across providers";
-		if (isGlobal) return "Read-only global configuration";
-		return "Update your configuration settings";
-	};
-
-	const handleSubmit = useCallback(
-		async (data: LLMConfigFormData) => {
-			setIsSubmitting(true);
-			try {
-				if (mode === "create") {
-					const result = await createConfig({
-						...data,
-						search_space_id: searchSpaceId,
-					});
-
-					if (result?.id) {
-						await updatePreferences({
-							search_space_id: searchSpaceId,
-							data: {
-								agent_llm_id: result.id,
-							},
-						});
-					}
-
-					toast.success("Configuration created and assigned!");
-					onOpenChange(false);
-				} else if (!isGlobal && config) {
-					await updateConfig({
-						id: config.id,
-						data: {
-							name: data.name,
-							description: data.description,
-							provider: data.provider,
-							custom_provider: data.custom_provider,
-							model_name: data.model_name,
-							api_key: data.api_key,
-							api_base: data.api_base,
-							litellm_params: data.litellm_params,
-							system_instructions: data.system_instructions,
-							use_default_system_instructions: data.use_default_system_instructions,
-							citations_enabled: data.citations_enabled,
-						},
-					});
-					toast.success("Configuration updated!");
-					onOpenChange(false);
-				}
-			} catch (error) {
-				console.error("Failed to save configuration:", error);
-				toast.error("Failed to save configuration");
-			} finally {
-				setIsSubmitting(false);
-			}
-		},
-		[
-			mode,
-			isGlobal,
-			config,
-			searchSpaceId,
-			createConfig,
-			updateConfig,
-			updatePreferences,
-			onOpenChange,
-		]
-	);
-
-	const handleUseGlobalConfig = useCallback(async () => {
-		if (!config || !isGlobal) return;
-		setIsSubmitting(true);
-		try {
-			await updatePreferences({
-				search_space_id: searchSpaceId,
-				data: {
-					agent_llm_id: config.id,
-				},
-			});
-			toast.success(`Now using ${config.name}`);
-			onOpenChange(false);
-		} catch (error) {
-			console.error("Failed to set model:", error);
-			toast.error("Failed to set model");
-		} finally {
-			setIsSubmitting(false);
-		}
-	}, [config, isGlobal, searchSpaceId, updatePreferences, onOpenChange]);
-
-	if (!mounted) return null;
-
-	const dialogContent = (
-		<AnimatePresence>
-			{open && (
-				<>
-					{/* Backdrop */}
-					<motion.div
-						initial={{ opacity: 0 }}
-						animate={{ opacity: 1 }}
-						exit={{ opacity: 0 }}
-						transition={{ duration: 0.15 }}
-						className="fixed inset-0 z-[24] bg-black/50 backdrop-blur-sm"
-						onClick={() => onOpenChange(false)}
-					/>
-
-					{/* Dialog */}
-					<motion.div
-						initial={{ opacity: 0, scale: 0.96 }}
-						animate={{ opacity: 1, scale: 1 }}
-						exit={{ opacity: 0, scale: 0.96 }}
-						transition={{ duration: 0.15, ease: "easeOut" }}
-						className="fixed inset-0 z-[25] flex items-center justify-center p-4 sm:p-6"
-					>
-						<div
-							role="dialog"
-							aria-modal="true"
-							className={cn(
-								"relative w-full max-w-lg h-[85vh]",
-								"rounded-xl bg-background shadow-2xl",
-								"dark:bg-neutral-900",
-								"flex flex-col overflow-hidden"
-							)}
-							onClick={(e) => e.stopPropagation()}
-							onKeyDown={(e) => {
-								if (e.key === "Escape") onOpenChange(false);
-							}}
-						>
-							{/* Header */}
-							<div className="flex items-start justify-between px-6 pt-6 pb-4">
-								<div className="space-y-1 pr-8">
-									<div className="flex items-center gap-2">
-										<h2 className="text-lg font-semibold tracking-tight">{getTitle()}</h2>
-										{isAutoMode && (
-											<Badge variant="secondary" className="text-[10px]">
-												Recommended
-											</Badge>
-										)}
-										{isGlobal && !isAutoMode && mode !== "create" && (
-											<Badge variant="secondary" className="text-[10px]">
-												Global
-											</Badge>
-										)}
-										{!isGlobal && mode !== "create" && !isAutoMode && (
-											<Badge variant="outline" className="text-[10px]">
-												Custom
-											</Badge>
-										)}
-									</div>
-									<p className="text-sm text-muted-foreground">{getSubtitle()}</p>
-									{config && !isAutoMode && mode !== "create" && (
-										<p className="text-xs font-mono text-muted-foreground/70">
-											{config.model_name}
-										</p>
-									)}
-								</div>
-								<Button
-									variant="ghost"
-									size="icon"
-									onClick={() => onOpenChange(false)}
-									className="absolute right-4 top-4 h-8 w-8 rounded-full text-muted-foreground hover:text-foreground"
-								>
-									<X className="h-4 w-4" />
-									<span className="sr-only">Close</span>
-								</Button>
-							</div>
-
-							{/* Scrollable content */}
-							<div
-								ref={scrollRef}
-								onScroll={handleScroll}
-								className="flex-1 overflow-y-auto px-6 py-5"
-								style={{
-									maskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
-									WebkitMaskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
-								}}
-							>
-								{isAutoMode && (
-									<Alert className="mb-5 border-violet-500/30 bg-violet-500/5">
-										<AlertDescription className="text-sm text-violet-700 dark:text-violet-400">
-											Auto mode automatically distributes requests across all available LLM
-											providers to optimize performance and avoid rate limits.
-										</AlertDescription>
-									</Alert>
-								)}
-
-								{isGlobal && !isAutoMode && mode !== "create" && (
-									<Alert className="mb-5 border-amber-500/30 bg-amber-500/5">
-										<AlertCircle className="size-4 text-amber-500" />
-										<AlertDescription className="text-sm text-amber-700 dark:text-amber-400">
-											Global configurations are read-only. To customize settings, create a new
-											configuration based on this template.
-										</AlertDescription>
-									</Alert>
-								)}
-
-								{mode === "create" ? (
-									<LLMConfigForm
-										searchSpaceId={searchSpaceId}
-										onSubmit={handleSubmit}
-										isSubmitting={isSubmitting}
-										mode="create"
-										formId="model-config-form"
-										hideActions
-									/>
-								) : isAutoMode && config ? (
-									<div className="space-y-6">
-										<div className="space-y-4">
-											<div className="space-y-1.5">
-												<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-													How It Works
-												</div>
-												<p className="text-sm text-muted-foreground">{config.description}</p>
-											</div>
-
-											<div className="h-px bg-border/50" />
-
-											<div className="space-y-3">
-												<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-													Key Benefits
-												</div>
-												<div className="space-y-2">
-													<div className="flex items-start gap-3 p-3 rounded-lg bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-800/50">
-														<Zap className="size-4 text-violet-600 dark:text-violet-400 mt-0.5 shrink-0" />
-														<div>
-															<p className="text-sm font-medium text-violet-900 dark:text-violet-100">
-																Automatic (Fastest)
-															</p>
-															<p className="text-xs text-violet-700 dark:text-violet-300">
-																Distributes requests across all configured LLM providers
-															</p>
-														</div>
-													</div>
-													<div className="flex items-start gap-3 p-3 rounded-lg bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-800/50">
-														<Zap className="size-4 text-violet-600 dark:text-violet-400 mt-0.5 shrink-0" />
-														<div>
-															<p className="text-sm font-medium text-violet-900 dark:text-violet-100">
-																Rate Limit Protection
-															</p>
-															<p className="text-xs text-violet-700 dark:text-violet-300">
-																Automatically handles rate limits with cooldowns and retries
-															</p>
-														</div>
-													</div>
-													<div className="flex items-start gap-3 p-3 rounded-lg bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-800/50">
-														<Zap className="size-4 text-violet-600 dark:text-violet-400 mt-0.5 shrink-0" />
-														<div>
-															<p className="text-sm font-medium text-violet-900 dark:text-violet-100">
-																Automatic Failover
-															</p>
-															<p className="text-xs text-violet-700 dark:text-violet-300">
-																Falls back to other providers if one becomes unavailable
-															</p>
-														</div>
-													</div>
-												</div>
-											</div>
-										</div>
-									</div>
-								) : isGlobal && config ? (
-									<div className="space-y-6">
-										<div className="space-y-4">
-											<div className="grid gap-4 sm:grid-cols-2">
-												<div className="space-y-1.5">
-													<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-														Configuration Name
-													</div>
-													<p className="text-sm font-medium">{config.name}</p>
-												</div>
-												{config.description && (
-													<div className="space-y-1.5">
-														<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-															Description
-														</div>
-														<p className="text-sm text-muted-foreground">{config.description}</p>
-													</div>
-												)}
-											</div>
-
-											<div className="h-px bg-border/50" />
-
-											<div className="grid gap-4 sm:grid-cols-2">
-												<div className="space-y-1.5">
-													<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-														Provider
-													</div>
-													<p className="text-sm font-medium">{config.provider}</p>
-												</div>
-												<div className="space-y-1.5">
-													<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-														Model
-													</div>
-													<p className="text-sm font-medium font-mono">{config.model_name}</p>
-												</div>
-											</div>
-
-											<div className="h-px bg-border/50" />
-
-											<div className="grid gap-4 sm:grid-cols-2">
-												<div className="space-y-2">
-													<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-														Citations
-													</div>
-													<Badge
-														variant={config.citations_enabled ? "default" : "secondary"}
-														className="w-fit"
-													>
-														{config.citations_enabled ? "Enabled" : "Disabled"}
-													</Badge>
-												</div>
-											</div>
-
-											{config.system_instructions && (
-												<>
-													<div className="h-px bg-border/50" />
-													<div className="space-y-1.5">
-														<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-															System Instructions
-														</div>
-														<div className="p-3 rounded-lg bg-muted/50 border border-border/50">
-															<p className="text-xs font-mono text-muted-foreground whitespace-pre-wrap line-clamp-10">
-																{config.system_instructions}
-															</p>
-														</div>
-													</div>
-												</>
-											)}
-										</div>
-									</div>
-								) : config ? (
-									<LLMConfigForm
-										searchSpaceId={searchSpaceId}
-										initialData={{
-											name: config.name,
-											description: config.description,
-											provider: config.provider as LiteLLMProvider,
-											custom_provider: config.custom_provider,
-											model_name: config.model_name,
-											api_key: "api_key" in config ? (config.api_key as string) : "",
-											api_base: config.api_base,
-											litellm_params: config.litellm_params,
-											system_instructions: config.system_instructions,
-											use_default_system_instructions: config.use_default_system_instructions,
-											citations_enabled: config.citations_enabled,
-											search_space_id: searchSpaceId,
-										}}
-										onSubmit={handleSubmit}
-										isSubmitting={isSubmitting}
-										mode="edit"
-										formId="model-config-form"
-										hideActions
-									/>
-								) : null}
-							</div>
-
-							{/* Fixed footer */}
-							<div className="shrink-0 px-6 py-4 flex items-center justify-end gap-3">
-								<Button
-									type="button"
-									variant="secondary"
-									onClick={() => onOpenChange(false)}
-									disabled={isSubmitting}
-									className="text-sm h-9"
-								>
-									Cancel
-								</Button>
-								{mode === "create" || (!isGlobal && !isAutoMode && config) ? (
-									<Button
-										type="submit"
-										form="model-config-form"
-										disabled={isSubmitting}
-										className="text-sm h-9 min-w-[120px]"
-									>
-										{isSubmitting ? (
-											<>
-												<Spinner size="sm" />
-												{mode === "edit" ? "Saving" : "Creating"}
-											</>
-										) : mode === "edit" ? (
-											"Save Changes"
-										) : (
-											"Create & Use"
-										)}
-									</Button>
-								) : isAutoMode ? (
-									<Button
-										className="text-sm h-9 gap-2 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700"
-										onClick={handleUseGlobalConfig}
-										disabled={isSubmitting}
-									>
-										{isSubmitting ? "Loading..." : "Use Auto Mode"}
-									</Button>
-								) : isGlobal && config ? (
-									<Button
-										className="text-sm h-9 gap-2"
-										onClick={handleUseGlobalConfig}
-										disabled={isSubmitting}
-									>
-										{isSubmitting ? "Loading..." : "Use This Model"}
-									</Button>
-								) : null}
-							</div>
-						</div>
-					</motion.div>
-				</>
-			)}
-		</AnimatePresence>
-	);
-
-	return typeof document !== "undefined" ? createPortal(dialogContent, document.body) : null;
-}
diff --git a/surfsense_web/components/settings/model-config-manager.tsx b/surfsense_web/components/settings/model-config-manager.tsx
index 64bd7455f..a20086492 100644
--- a/surfsense_web/components/settings/model-config-manager.tsx
+++ b/surfsense_web/components/settings/model-config-manager.tsx
@@ -12,18 +12,16 @@ import {
 	Trash2,
 	Wand2,
 } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
 import {
-	createNewLLMConfigMutationAtom,
 	deleteNewLLMConfigMutationAtom,
-	updateNewLLMConfigMutationAtom,
 } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
 import {
 	globalNewLLMConfigsAtom,
 	newLLMConfigsAtom,
 } from "@/atoms/new-llm-config/new-llm-config-query.atoms";
-import { LLMConfigForm, type LLMConfigFormData } from "@/components/shared/llm-config-form";
+import { ModelConfigDialog } from "@/components/shared/model-config-dialog";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import {
 	AlertDialog,
@@ -39,13 +37,6 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
@@ -69,12 +60,6 @@ function getInitials(name: string): string {
 export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 	const isDesktop = useMediaQuery("(min-width: 768px)");
 	// Mutations
-	const { mutateAsync: createConfig, isPending: isCreating } = useAtomValue(
-		createNewLLMConfigMutationAtom
-	);
-	const { mutateAsync: updateConfig, isPending: isUpdating } = useAtomValue(
-		updateNewLLMConfigMutationAtom
-	);
 	const { mutateAsync: deleteConfig, isPending: isDeleting } = useAtomValue(
 		deleteNewLLMConfigMutationAtom
 	);
@@ -128,29 +113,6 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 	const [editingConfig, setEditingConfig] = useState<NewLLMConfig | null>(null);
 	const [configToDelete, setConfigToDelete] = useState<NewLLMConfig | null>(null);
 
-	const isSubmitting = isCreating || isUpdating;
-
-	const handleFormSubmit = useCallback(
-		async (formData: LLMConfigFormData) => {
-			try {
-				if (editingConfig) {
-					const { search_space_id, ...updateData } = formData;
-					await updateConfig({
-						id: editingConfig.id,
-						data: updateData,
-					});
-				} else {
-					await createConfig(formData);
-				}
-				setIsDialogOpen(false);
-				setEditingConfig(null);
-			} catch {
-				// Error is displayed inside the dialog by the form
-			}
-		},
-		[editingConfig, createConfig, updateConfig]
-	);
-
 	const handleDelete = async () => {
 		if (!configToDelete) return;
 		try {
@@ -171,11 +133,6 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 		setIsDialogOpen(true);
 	};
 
-	const closeDialog = () => {
-		setIsDialogOpen(false);
-		setEditingConfig(null);
-	};
-
 	return (
 		<div className="space-y-5 md:space-y-6">
 			{/* Header actions */}
@@ -457,54 +414,17 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 			)}
 
 			{/* Add/Edit Configuration Dialog */}
-			<Dialog open={isDialogOpen} onOpenChange={(open) => !open && closeDialog()}>
-				<DialogContent
-					className="max-w-2xl max-h-[90vh] overflow-y-auto"
-					onOpenAutoFocus={(e) => e.preventDefault()}
-				>
-					<DialogHeader>
-						<DialogTitle>
-							{editingConfig ? "Edit Configuration" : "Create New Configuration"}
-						</DialogTitle>
-						<DialogDescription>
-							{editingConfig
-								? "Update your AI model and prompt configuration"
-								: "Set up a new AI model with custom prompts and citation settings"}
-						</DialogDescription>
-					</DialogHeader>
-
-					<LLMConfigForm
-						key={editingConfig ? `edit-${editingConfig.id}` : "create"}
-						searchSpaceId={searchSpaceId}
-						initialData={
-							editingConfig
-								? {
-										name: editingConfig.name,
-										description: editingConfig.description || "",
-										provider: editingConfig.provider,
-										custom_provider: editingConfig.custom_provider || "",
-										model_name: editingConfig.model_name,
-										api_key: editingConfig.api_key,
-										api_base: editingConfig.api_base || "",
-										litellm_params: editingConfig.litellm_params || {},
-										system_instructions: editingConfig.system_instructions || "",
-										use_default_system_instructions: editingConfig.use_default_system_instructions,
-										citations_enabled: editingConfig.citations_enabled,
-									}
-								: {
-										citations_enabled: true,
-										use_default_system_instructions: true,
-									}
-						}
-						onSubmit={handleFormSubmit}
-						onCancel={closeDialog}
-						isSubmitting={isSubmitting}
-						mode={editingConfig ? "edit" : "create"}
-						showAdvanced={true}
-						compact={true}
-					/>
-				</DialogContent>
-			</Dialog>
+			<ModelConfigDialog
+				open={isDialogOpen}
+				onOpenChange={(open) => {
+					setIsDialogOpen(open);
+					if (!open) setEditingConfig(null);
+				}}
+				config={editingConfig}
+				isGlobal={false}
+				searchSpaceId={searchSpaceId}
+				mode={editingConfig ? "edit" : "create"}
+			/>
 
 			{/* Delete Confirmation Dialog */}
 			<AlertDialog
diff --git a/surfsense_web/components/shared/model-config-dialog.tsx b/surfsense_web/components/shared/model-config-dialog.tsx
new file mode 100644
index 000000000..f4ea9ba2f
--- /dev/null
+++ b/surfsense_web/components/shared/model-config-dialog.tsx
@@ -0,0 +1,424 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import { AlertCircle, Zap } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
+import { toast } from "sonner";
+import {
+	createNewLLMConfigMutationAtom,
+	updateLLMPreferencesMutationAtom,
+	updateNewLLMConfigMutationAtom,
+} from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
+import { LLMConfigForm, type LLMConfigFormData } from "@/components/shared/llm-config-form";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/spinner";
+import type {
+	GlobalNewLLMConfig,
+	LiteLLMProvider,
+	NewLLMConfigPublic,
+} from "@/contracts/types/new-llm-config.types";
+
+interface ModelConfigDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	config: NewLLMConfigPublic | GlobalNewLLMConfig | null;
+	isGlobal: boolean;
+	searchSpaceId: number;
+	mode: "create" | "edit" | "view";
+}
+
+export function ModelConfigDialog({
+	open,
+	onOpenChange,
+	config,
+	isGlobal,
+	searchSpaceId,
+	mode,
+}: ModelConfigDialogProps) {
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [scrollPos, setScrollPos] = useState<"top" | "middle" | "bottom">("top");
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		const el = e.currentTarget;
+		const atTop = el.scrollTop <= 2;
+		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
+		setScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
+	}, []);
+
+	const { mutateAsync: createConfig } = useAtomValue(createNewLLMConfigMutationAtom);
+	const { mutateAsync: updateConfig } = useAtomValue(updateNewLLMConfigMutationAtom);
+	const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
+
+	const isAutoMode = config && "is_auto_mode" in config && config.is_auto_mode;
+
+	const getTitle = () => {
+		if (mode === "create") return "Add New Configuration";
+		if (isAutoMode) return "Auto Mode (Fastest)";
+		if (isGlobal) return "View Global Configuration";
+		return "Edit Configuration";
+	};
+
+	const getSubtitle = () => {
+		if (mode === "create") return "Set up a new LLM provider for this search space";
+		if (isAutoMode) return "Automatically routes requests across providers";
+		if (isGlobal) return "Read-only global configuration";
+		return "Update your configuration settings";
+	};
+
+	const handleSubmit = useCallback(
+		async (data: LLMConfigFormData) => {
+			setIsSubmitting(true);
+			try {
+				if (mode === "create") {
+					const result = await createConfig({
+						...data,
+						search_space_id: searchSpaceId,
+					});
+
+					if (result?.id) {
+						await updatePreferences({
+							search_space_id: searchSpaceId,
+							data: {
+								agent_llm_id: result.id,
+							},
+						});
+					}
+
+					onOpenChange(false);
+				} else if (!isGlobal && config) {
+					await updateConfig({
+						id: config.id,
+						data: {
+							name: data.name,
+							description: data.description,
+							provider: data.provider,
+							custom_provider: data.custom_provider,
+							model_name: data.model_name,
+							api_key: data.api_key,
+							api_base: data.api_base,
+							litellm_params: data.litellm_params,
+							system_instructions: data.system_instructions,
+							use_default_system_instructions: data.use_default_system_instructions,
+							citations_enabled: data.citations_enabled,
+						},
+					});
+					onOpenChange(false);
+				}
+			} catch (error) {
+				console.error("Failed to save configuration:", error);
+			} finally {
+				setIsSubmitting(false);
+			}
+		},
+		[
+			mode,
+			isGlobal,
+			config,
+			searchSpaceId,
+			createConfig,
+			updateConfig,
+			updatePreferences,
+			onOpenChange,
+		]
+	);
+
+	const handleUseGlobalConfig = useCallback(async () => {
+		if (!config || !isGlobal) return;
+		setIsSubmitting(true);
+		try {
+			await updatePreferences({
+				search_space_id: searchSpaceId,
+				data: {
+					agent_llm_id: config.id,
+				},
+			});
+			toast.success(`Now using ${config.name}`);
+			onOpenChange(false);
+		} catch (error) {
+			console.error("Failed to set model:", error);
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [config, isGlobal, searchSpaceId, updatePreferences, onOpenChange]);
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent
+				className="max-w-lg h-[85vh] flex flex-col p-0 gap-0 overflow-hidden"
+				onOpenAutoFocus={(e) => e.preventDefault()}
+			>
+				<DialogTitle className="sr-only">{getTitle()}</DialogTitle>
+
+				{/* Header */}
+				<div className="flex items-start justify-between px-6 pt-6 pb-4 pr-14">
+					<div className="space-y-1">
+						<div className="flex items-center gap-2">
+							<h2 className="text-lg font-semibold tracking-tight">{getTitle()}</h2>
+							{isAutoMode && (
+								<Badge variant="secondary" className="text-[10px]">
+									Recommended
+								</Badge>
+							)}
+							{isGlobal && !isAutoMode && mode !== "create" && (
+								<Badge variant="secondary" className="text-[10px]">
+									Global
+								</Badge>
+							)}
+							{!isGlobal && mode !== "create" && !isAutoMode && (
+								<Badge variant="outline" className="text-[10px]">
+									Custom
+								</Badge>
+							)}
+						</div>
+						<p className="text-sm text-muted-foreground">{getSubtitle()}</p>
+						{config && !isAutoMode && mode !== "create" && (
+							<p className="text-xs font-mono text-muted-foreground/70">
+								{config.model_name}
+							</p>
+						)}
+					</div>
+				</div>
+
+				{/* Scrollable content */}
+				<div
+					ref={scrollRef}
+					onScroll={handleScroll}
+					className="flex-1 overflow-y-auto px-6 py-5"
+					style={{
+						maskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
+						WebkitMaskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
+					}}
+				>
+					{isAutoMode && (
+						<Alert className="mb-5 border-violet-500/30 bg-violet-500/5">
+							<AlertDescription className="text-sm text-violet-700 dark:text-violet-400">
+								Auto mode automatically distributes requests across all available LLM
+								providers to optimize performance and avoid rate limits.
+							</AlertDescription>
+						</Alert>
+					)}
+
+					{isGlobal && !isAutoMode && mode !== "create" && (
+						<Alert className="mb-5 border-amber-500/30 bg-amber-500/5">
+							<AlertCircle className="size-4 text-amber-500" />
+							<AlertDescription className="text-sm text-amber-700 dark:text-amber-400">
+								Global configurations are read-only. To customize settings, create a new
+								configuration based on this template.
+							</AlertDescription>
+						</Alert>
+					)}
+
+					{mode === "create" ? (
+						<LLMConfigForm
+							searchSpaceId={searchSpaceId}
+							onSubmit={handleSubmit}
+							isSubmitting={isSubmitting}
+							mode="create"
+							formId="model-config-form"
+							hideActions
+						/>
+					) : isAutoMode && config ? (
+						<div className="space-y-6">
+							<div className="space-y-4">
+								<div className="space-y-1.5">
+									<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+										How It Works
+									</div>
+									<p className="text-sm text-muted-foreground">{config.description}</p>
+								</div>
+
+								<div className="h-px bg-border/50" />
+
+								<div className="space-y-3">
+									<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+										Key Benefits
+									</div>
+									<div className="space-y-2">
+										<div className="flex items-start gap-3 p-3 rounded-lg bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-800/50">
+											<Zap className="size-4 text-violet-600 dark:text-violet-400 mt-0.5 shrink-0" />
+											<div>
+												<p className="text-sm font-medium text-violet-900 dark:text-violet-100">
+													Automatic (Fastest)
+												</p>
+												<p className="text-xs text-violet-700 dark:text-violet-300">
+													Distributes requests across all configured LLM providers
+												</p>
+											</div>
+										</div>
+										<div className="flex items-start gap-3 p-3 rounded-lg bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-800/50">
+											<Zap className="size-4 text-violet-600 dark:text-violet-400 mt-0.5 shrink-0" />
+											<div>
+												<p className="text-sm font-medium text-violet-900 dark:text-violet-100">
+													Rate Limit Protection
+												</p>
+												<p className="text-xs text-violet-700 dark:text-violet-300">
+													Automatically handles rate limits with cooldowns and retries
+												</p>
+											</div>
+										</div>
+										<div className="flex items-start gap-3 p-3 rounded-lg bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-800/50">
+											<Zap className="size-4 text-violet-600 dark:text-violet-400 mt-0.5 shrink-0" />
+											<div>
+												<p className="text-sm font-medium text-violet-900 dark:text-violet-100">
+													Automatic Failover
+												</p>
+												<p className="text-xs text-violet-700 dark:text-violet-300">
+													Falls back to other providers if one becomes unavailable
+												</p>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					) : isGlobal && config ? (
+						<div className="space-y-6">
+							<div className="space-y-4">
+								<div className="grid gap-4 sm:grid-cols-2">
+									<div className="space-y-1.5">
+										<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+											Configuration Name
+										</div>
+										<p className="text-sm font-medium">{config.name}</p>
+									</div>
+									{config.description && (
+										<div className="space-y-1.5">
+											<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+												Description
+											</div>
+											<p className="text-sm text-muted-foreground">{config.description}</p>
+										</div>
+									)}
+								</div>
+
+								<div className="h-px bg-border/50" />
+
+								<div className="grid gap-4 sm:grid-cols-2">
+									<div className="space-y-1.5">
+										<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+											Provider
+										</div>
+										<p className="text-sm font-medium">{config.provider}</p>
+									</div>
+									<div className="space-y-1.5">
+										<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+											Model
+										</div>
+										<p className="text-sm font-medium font-mono">{config.model_name}</p>
+									</div>
+								</div>
+
+								<div className="h-px bg-border/50" />
+
+								<div className="grid gap-4 sm:grid-cols-2">
+									<div className="space-y-2">
+										<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+											Citations
+										</div>
+										<Badge
+											variant={config.citations_enabled ? "default" : "secondary"}
+											className="w-fit"
+										>
+											{config.citations_enabled ? "Enabled" : "Disabled"}
+										</Badge>
+									</div>
+								</div>
+
+								{config.system_instructions && (
+									<>
+										<div className="h-px bg-border/50" />
+										<div className="space-y-1.5">
+											<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+												System Instructions
+											</div>
+											<div className="p-3 rounded-lg bg-muted/50 border border-border/50">
+												<p className="text-xs font-mono text-muted-foreground whitespace-pre-wrap line-clamp-10">
+													{config.system_instructions}
+												</p>
+											</div>
+										</div>
+									</>
+								)}
+							</div>
+						</div>
+					) : config ? (
+						<LLMConfigForm
+							searchSpaceId={searchSpaceId}
+							initialData={{
+								name: config.name,
+								description: config.description,
+								provider: config.provider as LiteLLMProvider,
+								custom_provider: config.custom_provider,
+								model_name: config.model_name,
+								api_key: "api_key" in config ? (config.api_key as string) : "",
+								api_base: config.api_base,
+								litellm_params: config.litellm_params,
+								system_instructions: config.system_instructions,
+								use_default_system_instructions: config.use_default_system_instructions,
+								citations_enabled: config.citations_enabled,
+								search_space_id: searchSpaceId,
+							}}
+							onSubmit={handleSubmit}
+							isSubmitting={isSubmitting}
+							mode="edit"
+							formId="model-config-form"
+							hideActions
+						/>
+					) : null}
+				</div>
+
+				{/* Fixed footer */}
+				<div className="shrink-0 px-6 py-4 flex items-center justify-end gap-3">
+					<Button
+						type="button"
+						variant="secondary"
+						onClick={() => onOpenChange(false)}
+						disabled={isSubmitting}
+						className="text-sm h-9"
+					>
+						Cancel
+					</Button>
+					{mode === "create" || (!isGlobal && !isAutoMode && config) ? (
+						<Button
+							type="submit"
+							form="model-config-form"
+							disabled={isSubmitting}
+							className="text-sm h-9 min-w-[120px]"
+						>
+							{isSubmitting ? (
+								<>
+									<Spinner size="sm" />
+									{mode === "edit" ? "Saving" : "Creating"}
+								</>
+							) : mode === "edit" ? (
+								"Save Changes"
+							) : (
+								"Create & Use"
+							)}
+						</Button>
+					) : isAutoMode ? (
+						<Button
+							className="text-sm h-9 gap-2 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700"
+							onClick={handleUseGlobalConfig}
+							disabled={isSubmitting}
+						>
+							{isSubmitting ? "Loading..." : "Use Auto Mode"}
+						</Button>
+					) : isGlobal && config ? (
+						<Button
+							className="text-sm h-9 gap-2"
+							onClick={handleUseGlobalConfig}
+							disabled={isSubmitting}
+						>
+							{isSubmitting ? "Loading..." : "Use This Model"}
+						</Button>
+					) : null}
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}

From 32ff5f085c17b736839a3d4e936a17fe73901a1a Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 18:25:45 +0530
Subject: [PATCH 08/24] refactor: simplify onboarding page logic by temporarily
 disabling auto-configuration and redirect features for UI testing

---
 .../[search_space_id]/client-layout.tsx       |   4 +
 .../[search_space_id]/onboard/page.tsx        | 173 ++++++------------
 2 files changed, 57 insertions(+), 120 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx b/surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx
index 25e4e990b..1715e525f 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx
@@ -183,6 +183,10 @@ export function DashboardClientLayout({
 		);
 	}
 
+	if (isOnboardingPage) {
+		return <>{children}</>;
+	}
+
 	return (
 		<DocumentUploadDialogProvider>
 			<OnboardingTour />
diff --git a/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
index b188d7c8f..1d3ff3cfd 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { useAtomValue, useSetAtom } from "jotai";
-import { motion } from "motion/react";
+import { useAtomValue } from "jotai";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -13,10 +12,9 @@ import {
 	globalNewLLMConfigsAtom,
 	llmPreferencesAtom,
 } from "@/atoms/new-llm-config/new-llm-config-query.atoms";
-import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { Logo } from "@/components/Logo";
 import { LLMConfigForm, type LLMConfigFormData } from "@/components/shared/llm-config-form";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import { getBearerToken, redirectToLogin } from "@/lib/auth-utils";
 
@@ -24,8 +22,6 @@ export default function OnboardPage() {
 	const router = useRouter();
 	const params = useParams();
 	const searchSpaceId = Number(params.search_space_id);
-	const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
-
 	// Queries
 	const {
 		data: globalConfigs = [],
@@ -62,14 +58,12 @@ export default function OnboardPage() {
 		preferences.document_summary_llm_id !== null &&
 		preferences.document_summary_llm_id !== undefined;
 
-	// If onboarding is already complete, redirect immediately
 	useEffect(() => {
 		if (!preferencesLoading && isOnboardingComplete) {
 			router.push(`/dashboard/${searchSpaceId}/new-chat`);
 		}
 	}, [preferencesLoading, isOnboardingComplete, router, searchSpaceId]);
 
-	// Auto-configure if global configs are available
 	useEffect(() => {
 		const autoConfigureWithGlobal = async () => {
 			if (hasAttemptedAutoConfig.current) return;
@@ -77,7 +71,6 @@ export default function OnboardPage() {
 			if (!globalConfigsLoaded) return;
 			if (isOnboardingComplete) return;
 
-			// Only auto-configure if we have global configs
 			if (globalConfigs.length > 0) {
 				hasAttemptedAutoConfig.current = true;
 				setIsAutoConfiguring(true);
@@ -97,7 +90,6 @@ export default function OnboardPage() {
 						description: `Using ${firstGlobalConfig.name}. You can customize this later in Settings.`,
 					});
 
-					// Redirect to new-chat
 					router.push(`/dashboard/${searchSpaceId}/new-chat`);
 				} catch (error) {
 					console.error("Auto-configuration failed:", error);
@@ -119,13 +111,10 @@ export default function OnboardPage() {
 		router,
 	]);
 
-	// Handle form submission
 	const handleSubmit = async (formData: LLMConfigFormData) => {
 		try {
-			// Create the config
 			const newConfig = await createConfig(formData);
 
-			// Auto-assign to all roles
 			await updatePreferences({
 				search_space_id: searchSpaceId,
 				data: {
@@ -138,7 +127,6 @@ export default function OnboardPage() {
 				description: "Redirecting to chat...",
 			});
 
-			// Redirect to new-chat
 			router.push(`/dashboard/${searchSpaceId}/new-chat`);
 		} catch (error) {
 			console.error("Failed to create config:", error);
@@ -150,124 +138,69 @@ export default function OnboardPage() {
 
 	const isSubmitting = isCreating || isUpdatingPreferences;
 
-	// Loading state
 	if (globalConfigsLoading || preferencesLoading || isAutoConfiguring) {
 		return (
-			<div className="min-h-screen bg-gradient-to-b from-background to-muted/20 flex items-center justify-center">
-				<motion.div
-					initial={{ opacity: 0, scale: 0.95 }}
-					animate={{ opacity: 1, scale: 1 }}
-					className="text-center space-y-6"
-				>
-					<div className="relative">
-						<div className="absolute inset-0 blur-3xl bg-gradient-to-r from-violet-500/20 to-cyan-500/20 rounded-full" />
-						<div className="relative flex items-center justify-center w-24 h-24 mx-auto rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 shadow-2xl shadow-violet-500/25">
-							<Spinner size="xl" className="text-white" />
-						</div>
-					</div>
-					<div className="space-y-2">
-						<h2 className="text-2xl font-bold tracking-tight">
-							{isAutoConfiguring ? "Setting up your AI..." : "Loading..."}
-						</h2>
-						<p className="text-muted-foreground">
-							{isAutoConfiguring
-								? "Auto-configuring with available settings"
-								: "Please wait while we check your configuration"}
-						</p>
-					</div>
-					<div className="flex justify-center gap-1">
-						{[0, 1, 2].map((i) => (
-							<motion.div
-								key={i}
-								className="w-2 h-2 rounded-full bg-violet-500"
-								animate={{ scale: [1, 1.5, 1], opacity: [0.5, 1, 0.5] }}
-								transition={{ duration: 1, repeat: Infinity, delay: i * 0.2 }}
-							/>
-						))}
-					</div>
-				</motion.div>
+			<div className="h-screen flex items-center justify-center bg-background dark:bg-neutral-900">
+				<div className="text-center space-y-3">
+					<Spinner size="lg" className="mx-auto text-muted-foreground" />
+					<p className="text-sm text-muted-foreground">
+						{isAutoConfiguring ? "Setting up your AI..." : "Loading..."}
+					</p>
+				</div>
 			</div>
 		);
 	}
 
-	// If global configs exist but auto-config failed, show simple message
 	if (globalConfigs.length > 0 && !isAutoConfiguring) {
-		return null; // Will redirect via useEffect
+		return null;
 	}
 
-	// No global configs - show the config form
 	return (
-		<div className="min-h-screen bg-gradient-to-b from-background via-background to-muted/30">
-			<div className="container mx-auto px-4 py-8 md:py-12 max-w-3xl">
-				<motion.div
-					initial={{ opacity: 0, y: 20 }}
-					animate={{ opacity: 1, y: 0 }}
-					transition={{ duration: 0.5 }}
-					className="space-y-8"
-				>
-					{/* Header */}
-					<div className="text-center space-y-4">
-						<motion.div
-							initial={{ scale: 0 }}
-							animate={{ scale: 1 }}
-							transition={{ type: "spring", delay: 0.2 }}
-							className="relative inline-block"
-						>
-							<Logo className="w-20 h-20 mx-auto rounded-full" />
-						</motion.div>
-
-						<div className="space-y-2">
-							<h1 className="text-3xl font-bold tracking-tight">Configure Your AI</h1>
-							<p className="text-muted-foreground text-lg">
-								Add your LLM provider to get started with SurfSense
-							</p>
-						</div>
+		<div className="h-screen flex flex-col items-center p-4 bg-background dark:bg-neutral-900 select-none overflow-hidden">
+			<div className="w-full max-w-lg flex flex-col min-h-0 h-full gap-6 py-8">
+				{/* Header */}
+				<div className="text-center space-y-3 shrink-0">
+					<Logo className="w-12 h-12 mx-auto" />
+					<div className="space-y-1">
+						<h1 className="text-2xl font-semibold tracking-tight">Configure Your AI</h1>
+						<p className="text-sm text-muted-foreground">
+							Add your LLM provider to get started with SurfSense
+						</p>
 					</div>
-
-					{/* Config Form */}
-					<motion.div
-						initial={{ opacity: 0, y: 20 }}
-						animate={{ opacity: 1, y: 0 }}
-						transition={{ delay: 0.3 }}
-					>
-						<Card className="border-2 border-muted shadow-xl overflow-hidden">
-							<CardHeader className="pb-4">
-								<CardTitle className="text-xl">LLM Configuration</CardTitle>
-							</CardHeader>
-							<CardContent>
-								<LLMConfigForm
-									searchSpaceId={searchSpaceId}
-									onSubmit={handleSubmit}
-									isSubmitting={isSubmitting}
-									mode="create"
-									showAdvanced={true}
-									submitLabel="Start Using SurfSense"
-									initialData={{
-										citations_enabled: true,
-										use_default_system_instructions: true,
-									}}
-								/>
-							</CardContent>
-						</Card>
-					</motion.div>
-
-					{/* Footer note */}
-					<motion.p
-						initial={{ opacity: 0 }}
-						animate={{ opacity: 1 }}
-						transition={{ delay: 0.5 }}
-						className="text-center text-sm text-muted-foreground"
+				</div>
+
+				{/* Form card */}
+				<div className="rounded-xl border bg-background dark:bg-neutral-900 flex-1 min-h-0 overflow-y-auto px-6 py-6">
+					<LLMConfigForm
+						searchSpaceId={searchSpaceId}
+						onSubmit={handleSubmit}
+						isSubmitting={isSubmitting}
+						mode="create"
+						showAdvanced={true}
+						formId="onboard-config-form"
+						hideActions
+						initialData={{
+							citations_enabled: true,
+							use_default_system_instructions: true,
+						}}
+					/>
+				</div>
+
+				{/* Footer */}
+				<div className="text-center space-y-4 shrink-0">
+					<Button
+						type="submit"
+						form="onboard-config-form"
+						disabled={isSubmitting}
+						className="relative text-sm h-9 min-w-[180px]"
 					>
-						You can add more configurations and customize settings anytime in{" "}
-						<button
-							type="button"
-							onClick={() => setSearchSpaceSettingsDialog({ open: true, initialTab: "general" })}
-							className="text-violet-500 hover:underline"
-						>
-							Settings
-						</button>
-					</motion.p>
-				</motion.div>
+						<span className={isSubmitting ? "opacity-0" : ""}>Start Using SurfSense</span>
+						{isSubmitting && <Spinner size="sm" className="absolute" />}
+					</Button>
+					<p className="text-xs text-muted-foreground">
+						You can add more configurations later
+					</p>
+				</div>
 			</div>
 		</div>
 	);

From ba926bbcc97516a3dce73eb48a3d9d04ab5f7f34 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 18:46:01 +0530
Subject: [PATCH 09/24] refactor: integrate global loading effect into
 onboarding page and streamline LLMConfigForm usage for improved user
 experience

---
 .../[search_space_id]/onboard/page.tsx        |  33 ++--
 .../components/new-chat/model-selector.tsx    |   2 +-
 .../components/shared/llm-config-form.tsx     | 154 +++++-------------
 .../components/shared/model-config-dialog.tsx |  22 +--
 4 files changed, 67 insertions(+), 144 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
index 1d3ff3cfd..5e3f1cf7b 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
@@ -16,6 +16,7 @@ import { Logo } from "@/components/Logo";
 import { LLMConfigForm, type LLMConfigFormData } from "@/components/shared/llm-config-form";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
+import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
 import { getBearerToken, redirectToLogin } from "@/lib/auth-utils";
 
 export default function OnboardPage() {
@@ -138,17 +139,11 @@ export default function OnboardPage() {
 
 	const isSubmitting = isCreating || isUpdatingPreferences;
 
-	if (globalConfigsLoading || preferencesLoading || isAutoConfiguring) {
-		return (
-			<div className="h-screen flex items-center justify-center bg-background dark:bg-neutral-900">
-				<div className="text-center space-y-3">
-					<Spinner size="lg" className="mx-auto text-muted-foreground" />
-					<p className="text-sm text-muted-foreground">
-						{isAutoConfiguring ? "Setting up your AI..." : "Loading..."}
-					</p>
-				</div>
-			</div>
-		);
+	const isLoading = globalConfigsLoading || preferencesLoading || isAutoConfiguring;
+	useGlobalLoadingEffect(isLoading);
+
+	if (isLoading) {
+		return null;
 	}
 
 	if (globalConfigs.length > 0 && !isAutoConfiguring) {
@@ -171,15 +166,13 @@ export default function OnboardPage() {
 
 				{/* Form card */}
 				<div className="rounded-xl border bg-background dark:bg-neutral-900 flex-1 min-h-0 overflow-y-auto px-6 py-6">
-					<LLMConfigForm
-						searchSpaceId={searchSpaceId}
-						onSubmit={handleSubmit}
-						isSubmitting={isSubmitting}
-						mode="create"
-						showAdvanced={true}
-						formId="onboard-config-form"
-						hideActions
-						initialData={{
+				<LLMConfigForm
+					searchSpaceId={searchSpaceId}
+					onSubmit={handleSubmit}
+					mode="create"
+					showAdvanced={true}
+					formId="onboard-config-form"
+					initialData={{
 							citations_enabled: true,
 							use_default_system_instructions: true,
 						}}
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index 62e666001..7a2a471ba 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -498,7 +498,7 @@ export function ModelSelector({
 										}}
 									>
 										<Plus className="size-4 text-primary" />
-										<span className="text-sm font-medium">Add New Configuration</span>
+										<span className="text-sm font-medium">Add LLM Model</span>
 									</Button>
 								</div>
 							</CommandList>
diff --git a/surfsense_web/components/shared/llm-config-form.tsx b/surfsense_web/components/shared/llm-config-form.tsx
index 38c67cfa6..9fb8b9208 100644
--- a/surfsense_web/components/shared/llm-config-form.tsx
+++ b/surfsense_web/components/shared/llm-config-form.tsx
@@ -3,9 +3,8 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useAtomValue } from "jotai";
 import { Check, ChevronDown, ChevronsUpDown } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
+import { useForm, type Resolver } from "react-hook-form";
 import { z } from "zod";
 import {
 	defaultSystemInstructionsAtom,
@@ -41,7 +40,6 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
-import { Spinner } from "@/components/ui/spinner";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import { LLM_PROVIDERS } from "@/contracts/enums/llm-providers";
@@ -73,28 +71,18 @@ interface LLMConfigFormProps {
 	initialData?: Partial<LLMConfigFormData>;
 	searchSpaceId: number;
 	onSubmit: (data: LLMConfigFormData) => Promise<void>;
-	onCancel?: () => void;
-	isSubmitting?: boolean;
 	mode?: "create" | "edit";
-	submitLabel?: string;
 	showAdvanced?: boolean;
-	compact?: boolean;
 	formId?: string;
-	hideActions?: boolean;
 }
 
 export function LLMConfigForm({
 	initialData,
 	searchSpaceId,
 	onSubmit,
-	onCancel,
-	isSubmitting = false,
 	mode = "create",
-	submitLabel,
 	showAdvanced = true,
-	compact = false,
 	formId,
-	hideActions = false,
 }: LLMConfigFormProps) {
 	const { data: defaultInstructions, isSuccess: defaultInstructionsLoaded } = useAtomValue(
 		defaultSystemInstructionsAtom
@@ -105,8 +93,7 @@ export function LLMConfigForm({
 	const [systemInstructionsOpen, setSystemInstructionsOpen] = useState(false);
 
 	const form = useForm<FormValues>({
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		resolver: zodResolver(formSchema) as any,
+		resolver: zodResolver(formSchema) as Resolver<FormValues>,
 		defaultValues: {
 			name: initialData?.name ?? "",
 			description: initialData?.description ?? "",
@@ -232,34 +219,26 @@ export function LLMConfigForm({
 						)}
 					/>
 
-					{/* Custom Provider (conditional) */}
-					<AnimatePresence>
-						{watchProvider === "CUSTOM" && (
-							<motion.div
-								initial={{ opacity: 0, height: 0 }}
-								animate={{ opacity: 1, height: "auto" }}
-								exit={{ opacity: 0, height: 0 }}
-							>
-								<FormField
-									control={form.control}
-									name="custom_provider"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel className="text-xs sm:text-sm">Custom Provider Name</FormLabel>
-											<FormControl>
-												<Input
-													placeholder="my-custom-provider"
-													{...field}
-													value={field.value ?? ""}
-												/>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-							</motion.div>
+				{/* Custom Provider (conditional) */}
+				{watchProvider === "CUSTOM" && (
+					<FormField
+						control={form.control}
+						name="custom_provider"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel className="text-xs sm:text-sm">Custom Provider Name</FormLabel>
+								<FormControl>
+									<Input
+										placeholder="my-custom-provider"
+										{...field}
+										value={field.value ?? ""}
+									/>
+								</FormControl>
+								<FormMessage />
+							</FormItem>
 						)}
-					</AnimatePresence>
+					/>
+				)}
 
 					{/* Model Name with Combobox */}
 					<FormField
@@ -404,36 +383,29 @@ export function LLMConfigForm({
 						/>
 					</div>
 
-					{/* Ollama Quick Actions */}
-					<AnimatePresence>
-						{watchProvider === "OLLAMA" && (
-							<motion.div
-								initial={{ opacity: 0, height: 0 }}
-								animate={{ opacity: 1, height: "auto" }}
-								exit={{ opacity: 0, height: 0 }}
-								className="flex flex-wrap gap-2"
-							>
-								<Button
-									type="button"
-									variant="outline"
-									size="sm"
-									className="h-7 text-xs"
-									onClick={() => form.setValue("api_base", "http://localhost:11434")}
-								>
-									localhost:11434
-								</Button>
-								<Button
-									type="button"
-									variant="outline"
-									size="sm"
-									className="h-7 text-xs"
-									onClick={() => form.setValue("api_base", "http://host.docker.internal:11434")}
-								>
-									Docker
-								</Button>
-							</motion.div>
-						)}
-					</AnimatePresence>
+				{/* Ollama Quick Actions */}
+				{watchProvider === "OLLAMA" && (
+					<div className="flex flex-wrap gap-2">
+						<Button
+							type="button"
+							variant="outline"
+							size="sm"
+							className="h-7 text-xs"
+							onClick={() => form.setValue("api_base", "http://localhost:11434")}
+						>
+							localhost:11434
+						</Button>
+						<Button
+							type="button"
+							variant="outline"
+							size="sm"
+							className="h-7 text-xs"
+							onClick={() => form.setValue("api_base", "http://host.docker.internal:11434")}
+						>
+							Docker
+						</Button>
+					</div>
+				)}
 				</div>
 
 				{/* Advanced Parameters */}
@@ -554,44 +526,6 @@ export function LLMConfigForm({
 						/>
 					</CollapsibleContent>
 				</Collapsible>
-
-				{!hideActions && (
-					<div
-						className={cn(
-							"flex gap-3 pt-4",
-							compact ? "justify-end" : "justify-center sm:justify-end"
-						)}
-					>
-						{onCancel && (
-							<Button
-								type="button"
-								variant="secondary"
-								onClick={onCancel}
-								disabled={isSubmitting}
-								className="text-xs sm:text-sm h-9 sm:h-10"
-							>
-								Cancel
-							</Button>
-						)}
-						<Button
-							type="submit"
-							disabled={isSubmitting}
-							className="gap-2 min-w-[140px] sm:min-w-[160px] text-xs sm:text-sm h-9 sm:h-10"
-						>
-							{isSubmitting ? (
-								<>
-									<Spinner size="sm" />
-									{mode === "edit" ? "Updating..." : "Creating"}
-								</>
-							) : (
-								<>
-									{submitLabel ??
-										(mode === "edit" ? "Update Configuration" : "Create Configuration")}
-								</>
-							)}
-						</Button>
-					</div>
-				)}
 			</form>
 		</Form>
 	);
diff --git a/surfsense_web/components/shared/model-config-dialog.tsx b/surfsense_web/components/shared/model-config-dialog.tsx
index f4ea9ba2f..4dff5f173 100644
--- a/surfsense_web/components/shared/model-config-dialog.tsx
+++ b/surfsense_web/components/shared/model-config-dialog.tsx
@@ -213,14 +213,12 @@ export function ModelConfigDialog({
 					)}
 
 					{mode === "create" ? (
-						<LLMConfigForm
-							searchSpaceId={searchSpaceId}
-							onSubmit={handleSubmit}
-							isSubmitting={isSubmitting}
-							mode="create"
-							formId="model-config-form"
-							hideActions
-						/>
+					<LLMConfigForm
+						searchSpaceId={searchSpaceId}
+						onSubmit={handleSubmit}
+						mode="create"
+						formId="model-config-form"
+					/>
 					) : isAutoMode && config ? (
 						<div className="space-y-6">
 							<div className="space-y-4">
@@ -362,11 +360,9 @@ export function ModelConfigDialog({
 								citations_enabled: config.citations_enabled,
 								search_space_id: searchSpaceId,
 							}}
-							onSubmit={handleSubmit}
-							isSubmitting={isSubmitting}
-							mode="edit"
-							formId="model-config-form"
-							hideActions
+						onSubmit={handleSubmit}
+						mode="edit"
+						formId="model-config-form"
 						/>
 					) : null}
 				</div>

From a5f41cfd8e866b55fa8105cc6cc95af607a685db Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 19:04:09 +0530
Subject: [PATCH 10/24] refactor: update LLM configuration terminology and
 enhance user feedback messages for improved clarity

---
 docs/chinese-llm-setup.md                     |  2 +-
 .../new-llm-config-mutation.atoms.ts          | 22 +++----
 .../settings/model-config-manager.tsx         | 30 +++++-----
 .../components/shared/model-config-dialog.tsx | 58 +++++++++----------
 4 files changed, 53 insertions(+), 59 deletions(-)

diff --git a/docs/chinese-llm-setup.md b/docs/chinese-llm-setup.md
index 37042aa2f..1fb0ce2a1 100644
--- a/docs/chinese-llm-setup.md
+++ b/docs/chinese-llm-setup.md
@@ -24,7 +24,7 @@ SurfSense 现已支持以下国产 LLM：
 
 1. 登录 SurfSense Dashboard
 2. 进入 **Settings** → **API Keys** (或 **LLM Configurations**)
-3. 点击 **Add New Configuration**
+3. 点击 **Add LLM Model**
 4. 从 **Provider** 下拉菜单中选择你的国产 LLM 提供商
 5. 填写必填字段（见下方各提供商详细配置）
 6. 点击 **Save**
diff --git a/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts b/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts
index b3b9b2bab..00156b844 100644
--- a/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts
+++ b/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts
@@ -2,7 +2,9 @@ import { atomWithMutation } from "jotai-tanstack-query";
 import { toast } from "sonner";
 import type {
 	CreateNewLLMConfigRequest,
+	CreateNewLLMConfigResponse,
 	DeleteNewLLMConfigRequest,
+	DeleteNewLLMConfigResponse,
 	GetNewLLMConfigsResponse,
 	UpdateLLMPreferencesRequest,
 	UpdateNewLLMConfigRequest,
@@ -25,14 +27,14 @@ export const createNewLLMConfigMutationAtom = atomWithMutation((get) => {
 		mutationFn: async (request: CreateNewLLMConfigRequest) => {
 			return newLLMConfigApiService.createConfig(request);
 		},
-		onSuccess: () => {
-			toast.success("LLM model created");
+		onSuccess: (_: CreateNewLLMConfigResponse, request: CreateNewLLMConfigRequest) => {
+			toast.success(`${request.name} created`);
 			queryClient.invalidateQueries({
 				queryKey: cacheKeys.newLLMConfigs.all(Number(searchSpaceId)),
 			});
 		},
 		onError: (error: Error) => {
-			toast.error(error.message || "Failed to create configuration");
+			toast.error(error.message || "Failed to create LLM model");
 		},
 	};
 });
@@ -50,7 +52,7 @@ export const updateNewLLMConfigMutationAtom = atomWithMutation((get) => {
 			return newLLMConfigApiService.updateConfig(request);
 		},
 		onSuccess: (_: UpdateNewLLMConfigResponse, request: UpdateNewLLMConfigRequest) => {
-			toast.success("LLM model updated");
+			toast.success(`${request.data.name ?? "Configuration"} updated`);
 			queryClient.invalidateQueries({
 				queryKey: cacheKeys.newLLMConfigs.all(Number(searchSpaceId)),
 			});
@@ -59,7 +61,7 @@ export const updateNewLLMConfigMutationAtom = atomWithMutation((get) => {
 			});
 		},
 		onError: (error: Error) => {
-			toast.error(error.message || "Failed to update configuration");
+			toast.error(error.message || "Failed to update");
 		},
 	};
 });
@@ -73,11 +75,11 @@ export const deleteNewLLMConfigMutationAtom = atomWithMutation((get) => {
 	return {
 		mutationKey: ["new-llm-configs", "delete"],
 		enabled: !!searchSpaceId,
-		mutationFn: async (request: DeleteNewLLMConfigRequest) => {
-			return newLLMConfigApiService.deleteConfig(request);
+		mutationFn: async (request: DeleteNewLLMConfigRequest & { name: string }) => {
+			return newLLMConfigApiService.deleteConfig({ id: request.id });
 		},
-		onSuccess: (_, request: DeleteNewLLMConfigRequest) => {
-			toast.success("LLM model deleted");
+		onSuccess: (_: DeleteNewLLMConfigResponse, request: DeleteNewLLMConfigRequest & { name: string }) => {
+			toast.success(`${request.name} deleted`);
 			queryClient.setQueryData(
 				cacheKeys.newLLMConfigs.all(Number(searchSpaceId)),
 				(oldData: GetNewLLMConfigsResponse | undefined) => {
@@ -87,7 +89,7 @@ export const deleteNewLLMConfigMutationAtom = atomWithMutation((get) => {
 			);
 		},
 		onError: (error: Error) => {
-			toast.error(error.message || "Failed to delete configuration");
+			toast.error(error.message || "Failed to delete");
 		},
 	};
 });
diff --git a/surfsense_web/components/settings/model-config-manager.tsx b/surfsense_web/components/settings/model-config-manager.tsx
index a20086492..409aa4f3c 100644
--- a/surfsense_web/components/settings/model-config-manager.tsx
+++ b/surfsense_web/components/settings/model-config-manager.tsx
@@ -116,7 +116,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 	const handleDelete = async () => {
 		if (!configToDelete) return;
 		try {
-			await deleteConfig({ id: configToDelete.id });
+			await deleteConfig({ id: configToDelete.id, name: configToDelete.name });
 			setConfigToDelete(null);
 		} catch {
 			// Error handled by mutation state
@@ -431,12 +431,11 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 				open={!!configToDelete}
 				onOpenChange={(open) => !open && setConfigToDelete(null)}
 			>
-				<AlertDialogContent>
+				<AlertDialogContent className="select-none">
 					<AlertDialogHeader>
-						<AlertDialogTitle className="flex items-center gap-2">
-							<Trash2 className="h-5 w-5 text-destructive" />
-							Delete Configuration
-						</AlertDialogTitle>
+					<AlertDialogTitle>
+						Delete LLM Model
+					</AlertDialogTitle>
 						<AlertDialogDescription>
 							Are you sure you want to delete{" "}
 							<span className="font-semibold text-foreground">{configToDelete?.name}</span>? This
@@ -450,17 +449,14 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 							disabled={isDeleting}
 							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
-							{isDeleting ? (
-								<>
-									<Spinner size="sm" className="mr-2" />
-									Deleting
-								</>
-							) : (
-								<>
-									<Trash2 className="mr-2 h-4 w-4" />
-									Delete
-								</>
-							)}
+						{isDeleting ? (
+							<>
+								<Spinner size="sm" className="mr-2" />
+								Deleting
+							</>
+						) : (
+							"Delete"
+						)}
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>
diff --git a/surfsense_web/components/shared/model-config-dialog.tsx b/surfsense_web/components/shared/model-config-dialog.tsx
index 4dff5f173..f786ee2c1 100644
--- a/surfsense_web/components/shared/model-config-dialog.tsx
+++ b/surfsense_web/components/shared/model-config-dialog.tsx
@@ -379,39 +379,35 @@ export function ModelConfigDialog({
 						Cancel
 					</Button>
 					{mode === "create" || (!isGlobal && !isAutoMode && config) ? (
-						<Button
-							type="submit"
-							form="model-config-form"
-							disabled={isSubmitting}
-							className="text-sm h-9 min-w-[120px]"
-						>
-							{isSubmitting ? (
-								<>
-									<Spinner size="sm" />
-									{mode === "edit" ? "Saving" : "Creating"}
-								</>
-							) : mode === "edit" ? (
-								"Save Changes"
-							) : (
-								"Create & Use"
-							)}
-						</Button>
+					<Button
+						type="submit"
+						form="model-config-form"
+						disabled={isSubmitting}
+						className="relative text-sm h-9 min-w-[120px]"
+					>
+						<span className={isSubmitting ? "opacity-0" : ""}>
+							{mode === "edit" ? "Save Changes" : "Create & Use"}
+						</span>
+						{isSubmitting && <Spinner size="sm" className="absolute" />}
+					</Button>
 					) : isAutoMode ? (
-						<Button
-							className="text-sm h-9 gap-2 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700"
-							onClick={handleUseGlobalConfig}
-							disabled={isSubmitting}
-						>
-							{isSubmitting ? "Loading..." : "Use Auto Mode"}
-						</Button>
+					<Button
+						className="relative text-sm h-9 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700"
+						onClick={handleUseGlobalConfig}
+						disabled={isSubmitting}
+					>
+						<span className={isSubmitting ? "opacity-0" : ""}>Use Auto Mode</span>
+						{isSubmitting && <Spinner size="sm" className="absolute" />}
+					</Button>
 					) : isGlobal && config ? (
-						<Button
-							className="text-sm h-9 gap-2"
-							onClick={handleUseGlobalConfig}
-							disabled={isSubmitting}
-						>
-							{isSubmitting ? "Loading..." : "Use This Model"}
-						</Button>
+					<Button
+						className="relative text-sm h-9"
+						onClick={handleUseGlobalConfig}
+						disabled={isSubmitting}
+					>
+						<span className={isSubmitting ? "opacity-0" : ""}>Use This Model</span>
+						{isSubmitting && <Spinner size="sm" className="absolute" />}
+					</Button>
 					) : null}
 				</div>
 			</DialogContent>

From 4a05229476eb2c5daae09f72701dbccc1bcf8704 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 19:14:46 +0530
Subject: [PATCH 11/24] refactor: enhance image generation configuration
 handling and user feedback messages for improved clarity and consistency

---
 .../image-gen-config-mutation.atoms.ts        | 18 +++---
 .../settings/image-model-manager.tsx          | 38 +++++--------
 .../components/shared/image-config-dialog.tsx | 56 +++++++++----------
 3 files changed, 50 insertions(+), 62 deletions(-)

diff --git a/surfsense_web/atoms/image-gen-config/image-gen-config-mutation.atoms.ts b/surfsense_web/atoms/image-gen-config/image-gen-config-mutation.atoms.ts
index dd8bcd324..362c3a690 100644
--- a/surfsense_web/atoms/image-gen-config/image-gen-config-mutation.atoms.ts
+++ b/surfsense_web/atoms/image-gen-config/image-gen-config-mutation.atoms.ts
@@ -2,6 +2,8 @@ import { atomWithMutation } from "jotai-tanstack-query";
 import { toast } from "sonner";
 import type {
 	CreateImageGenConfigRequest,
+	CreateImageGenConfigResponse,
+	DeleteImageGenConfigResponse,
 	GetImageGenConfigsResponse,
 	UpdateImageGenConfigRequest,
 	UpdateImageGenConfigResponse,
@@ -23,8 +25,8 @@ export const createImageGenConfigMutationAtom = atomWithMutation((get) => {
 		mutationFn: async (request: CreateImageGenConfigRequest) => {
 			return imageGenConfigApiService.createConfig(request);
 		},
-		onSuccess: () => {
-			toast.success("Image model created");
+		onSuccess: (_: CreateImageGenConfigResponse, request: CreateImageGenConfigRequest) => {
+			toast.success(`${request.name} created`);
 			queryClient.invalidateQueries({
 				queryKey: cacheKeys.imageGenConfigs.all(Number(searchSpaceId)),
 			});
@@ -48,7 +50,7 @@ export const updateImageGenConfigMutationAtom = atomWithMutation((get) => {
 			return imageGenConfigApiService.updateConfig(request);
 		},
 		onSuccess: (_: UpdateImageGenConfigResponse, request: UpdateImageGenConfigRequest) => {
-			toast.success("Image model updated");
+			toast.success(`${request.data.name ?? "Configuration"} updated`);
 			queryClient.invalidateQueries({
 				queryKey: cacheKeys.imageGenConfigs.all(Number(searchSpaceId)),
 			});
@@ -71,16 +73,16 @@ export const deleteImageGenConfigMutationAtom = atomWithMutation((get) => {
 	return {
 		mutationKey: ["image-gen-configs", "delete"],
 		enabled: !!searchSpaceId,
-		mutationFn: async (id: number) => {
-			return imageGenConfigApiService.deleteConfig(id);
+		mutationFn: async (request: { id: number; name: string }) => {
+			return imageGenConfigApiService.deleteConfig(request.id);
 		},
-		onSuccess: (_, id: number) => {
-			toast.success("Image model deleted");
+		onSuccess: (_: DeleteImageGenConfigResponse, request: { id: number; name: string }) => {
+			toast.success(`${request.name} deleted`);
 			queryClient.setQueryData(
 				cacheKeys.imageGenConfigs.all(Number(searchSpaceId)),
 				(oldData: GetImageGenConfigsResponse | undefined) => {
 					if (!oldData) return oldData;
-					return oldData.filter((config) => config.id !== id);
+					return oldData.filter((config) => config.id !== request.id);
 				}
 			);
 		},
diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx
index 1c8394c9c..b5a98dcbe 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -121,7 +121,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 	const handleDelete = async () => {
 		if (!configToDelete) return;
 		try {
-			await deleteConfig(configToDelete.id);
+			await deleteConfig({ id: configToDelete.id, name: configToDelete.name });
 			setConfigToDelete(null);
 		} catch {
 			// Error handled by mutation
@@ -398,12 +398,11 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 				open={!!configToDelete}
 				onOpenChange={(open) => !open && setConfigToDelete(null)}
 			>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle className="flex items-center gap-2">
-							<Trash2 className="h-5 w-5 text-destructive" />
-							Delete Image Model
-						</AlertDialogTitle>
+				<AlertDialogContent className="select-none">
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Delete Image Model
+					</AlertDialogTitle>
 						<AlertDialogDescription>
 							Are you sure you want to delete{" "}
 							<span className="font-semibold text-foreground">{configToDelete?.name}</span>?
@@ -411,23 +410,14 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 					</AlertDialogHeader>
 					<AlertDialogFooter>
 						<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-						<AlertDialogAction
-							onClick={handleDelete}
-							disabled={isDeleting}
-							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-						>
-							{isDeleting ? (
-								<>
-									<Spinner size="sm" className="mr-2" />
-									Deleting
-								</>
-							) : (
-								<>
-									<Trash2 className="mr-2 h-4 w-4" />
-									Delete
-								</>
-							)}
-						</AlertDialogAction>
+					<AlertDialogAction
+						onClick={handleDelete}
+						disabled={isDeleting}
+						className="relative bg-destructive text-destructive-foreground hover:bg-destructive/90"
+					>
+						<span className={isDeleting ? "opacity-0" : ""}>Delete</span>
+						{isDeleting && <Spinner size="sm" className="absolute" />}
+					</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>
 			</AlertDialog>
diff --git a/surfsense_web/components/shared/image-config-dialog.tsx b/surfsense_web/components/shared/image-config-dialog.tsx
index 4a9c3862a..a364b6a64 100644
--- a/surfsense_web/components/shared/image-config-dialog.tsx
+++ b/surfsense_web/components/shared/image-config-dialog.tsx
@@ -460,38 +460,34 @@ export function ImageConfigDialog({
 						Cancel
 					</Button>
 					{mode === "create" || (mode === "edit" && !isGlobal) ? (
-						<Button
-							onClick={handleSubmit}
-							disabled={isSubmitting || !isFormValid}
-							className="text-sm h-9 min-w-[120px]"
-						>
-							{isSubmitting ? (
-								<>
-									<Spinner size="sm" />
-									{mode === "edit" ? "Saving" : "Creating"}
-								</>
-							) : mode === "edit" ? (
-								"Save Changes"
-							) : (
-								"Create & Use"
-							)}
-						</Button>
+					<Button
+						onClick={handleSubmit}
+						disabled={isSubmitting || !isFormValid}
+						className="relative text-sm h-9 min-w-[120px]"
+					>
+						<span className={isSubmitting ? "opacity-0" : ""}>
+							{mode === "edit" ? "Save Changes" : "Create & Use"}
+						</span>
+						{isSubmitting && <Spinner size="sm" className="absolute" />}
+					</Button>
 					) : isAutoMode ? (
-						<Button
-							className="text-sm h-9 gap-2 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700"
-							onClick={handleUseGlobalConfig}
-							disabled={isSubmitting}
-						>
-							{isSubmitting ? "Loading..." : "Use Auto Mode"}
-						</Button>
+					<Button
+						className="relative text-sm h-9 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700"
+						onClick={handleUseGlobalConfig}
+						disabled={isSubmitting}
+					>
+						<span className={isSubmitting ? "opacity-0" : ""}>Use Auto Mode</span>
+						{isSubmitting && <Spinner size="sm" className="absolute" />}
+					</Button>
 					) : isGlobal && config ? (
-						<Button
-							className="text-sm h-9 gap-2"
-							onClick={handleUseGlobalConfig}
-							disabled={isSubmitting}
-						>
-							{isSubmitting ? "Loading..." : "Use This Model"}
-						</Button>
+					<Button
+						className="relative text-sm h-9"
+						onClick={handleUseGlobalConfig}
+						disabled={isSubmitting}
+					>
+						<span className={isSubmitting ? "opacity-0" : ""}>Use This Model</span>
+						{isSubmitting && <Spinner size="sm" className="absolute" />}
+					</Button>
 					) : null}
 				</div>
 			</DialogContent>

From b5cc45e819acc8469fc0ce2a1f07fe3a6a023303 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 19:22:56 +0530
Subject: [PATCH 12/24] refactor: streamline image and model configuration
 dialogs by removing auto mode references for improved clarity and consistency

---
 .../components/shared/image-config-dialog.tsx | 35 +------
 .../components/shared/model-config-dialog.tsx | 97 ++-----------------
 2 files changed, 12 insertions(+), 120 deletions(-)

diff --git a/surfsense_web/components/shared/image-config-dialog.tsx b/surfsense_web/components/shared/image-config-dialog.tsx
index a364b6a64..fe8a73df6 100644
--- a/surfsense_web/components/shared/image-config-dialog.tsx
+++ b/surfsense_web/components/shared/image-config-dialog.tsx
@@ -104,8 +104,6 @@ export function ImageConfigDialog({
 		setScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
 	}, []);
 
-	const isAutoMode = config && "is_auto_mode" in config && config.is_auto_mode;
-
 	const suggestedModels = useMemo(() => {
 		if (!formData.provider) return [];
 		return IMAGE_GEN_MODELS.filter((m) => m.provider === formData.provider);
@@ -113,14 +111,12 @@ export function ImageConfigDialog({
 
 	const getTitle = () => {
 		if (mode === "create") return "Add Image Model";
-		if (isAutoMode) return "Auto Mode (Fastest)";
 		if (isGlobal) return "View Global Image Model";
 		return "Edit Image Model";
 	};
 
 	const getSubtitle = () => {
 		if (mode === "create") return "Set up a new image generation provider";
-		if (isAutoMode) return "Automatically routes requests across providers";
 		if (isGlobal) return "Read-only global configuration";
 		return "Update your image model settings";
 	};
@@ -213,19 +209,14 @@ export function ImageConfigDialog({
 					<div className="space-y-1">
 						<div className="flex items-center gap-2">
 							<h2 className="text-lg font-semibold tracking-tight">{getTitle()}</h2>
-							{isAutoMode && (
-								<Badge variant="secondary" className="text-[10px]">
-									Recommended
-								</Badge>
-							)}
-							{isGlobal && !isAutoMode && mode !== "create" && (
+							{isGlobal && mode !== "create" && (
 								<Badge variant="secondary" className="text-[10px]">
 									Global
 								</Badge>
 							)}
 						</div>
 						<p className="text-sm text-muted-foreground">{getSubtitle()}</p>
-						{config && !isAutoMode && mode !== "create" && (
+						{config && mode !== "create" && (
 							<p className="text-xs font-mono text-muted-foreground/70">
 								{config.model_name}
 							</p>
@@ -243,16 +234,7 @@ export function ImageConfigDialog({
 						WebkitMaskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
 					}}
 				>
-					{isAutoMode && (
-						<Alert className="mb-5 border-violet-500/30 bg-violet-500/5">
-							<AlertDescription className="text-sm text-violet-700 dark:text-violet-400">
-								Auto mode distributes image generation requests across all configured
-								providers for optimal performance and rate limit protection.
-							</AlertDescription>
-						</Alert>
-					)}
-
-					{isGlobal && !isAutoMode && config && (
+				{isGlobal && config && (
 						<>
 							<Alert className="mb-5 border-amber-500/30 bg-amber-500/5">
 								<AlertCircle className="size-4 text-amber-500" />
@@ -470,16 +452,7 @@ export function ImageConfigDialog({
 						</span>
 						{isSubmitting && <Spinner size="sm" className="absolute" />}
 					</Button>
-					) : isAutoMode ? (
-					<Button
-						className="relative text-sm h-9 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700"
-						onClick={handleUseGlobalConfig}
-						disabled={isSubmitting}
-					>
-						<span className={isSubmitting ? "opacity-0" : ""}>Use Auto Mode</span>
-						{isSubmitting && <Spinner size="sm" className="absolute" />}
-					</Button>
-					) : isGlobal && config ? (
+				) : isGlobal && config ? (
 					<Button
 						className="relative text-sm h-9"
 						onClick={handleUseGlobalConfig}
diff --git a/surfsense_web/components/shared/model-config-dialog.tsx b/surfsense_web/components/shared/model-config-dialog.tsx
index f786ee2c1..d5405574b 100644
--- a/surfsense_web/components/shared/model-config-dialog.tsx
+++ b/surfsense_web/components/shared/model-config-dialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { AlertCircle, Zap } from "lucide-react";
+import { AlertCircle } from "lucide-react";
 import { useCallback, useRef, useState } from "react";
 import { toast } from "sonner";
 import {
@@ -53,18 +53,14 @@ export function ModelConfigDialog({
 	const { mutateAsync: updateConfig } = useAtomValue(updateNewLLMConfigMutationAtom);
 	const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
 
-	const isAutoMode = config && "is_auto_mode" in config && config.is_auto_mode;
-
 	const getTitle = () => {
 		if (mode === "create") return "Add New Configuration";
-		if (isAutoMode) return "Auto Mode (Fastest)";
 		if (isGlobal) return "View Global Configuration";
 		return "Edit Configuration";
 	};
 
 	const getSubtitle = () => {
 		if (mode === "create") return "Set up a new LLM provider for this search space";
-		if (isAutoMode) return "Automatically routes requests across providers";
 		if (isGlobal) return "Read-only global configuration";
 		return "Update your configuration settings";
 	};
@@ -158,24 +154,19 @@ export function ModelConfigDialog({
 					<div className="space-y-1">
 						<div className="flex items-center gap-2">
 							<h2 className="text-lg font-semibold tracking-tight">{getTitle()}</h2>
-							{isAutoMode && (
-								<Badge variant="secondary" className="text-[10px]">
-									Recommended
-								</Badge>
-							)}
-							{isGlobal && !isAutoMode && mode !== "create" && (
+							{isGlobal && mode !== "create" && (
 								<Badge variant="secondary" className="text-[10px]">
 									Global
 								</Badge>
 							)}
-							{!isGlobal && mode !== "create" && !isAutoMode && (
+							{!isGlobal && mode !== "create" && (
 								<Badge variant="outline" className="text-[10px]">
 									Custom
 								</Badge>
 							)}
 						</div>
 						<p className="text-sm text-muted-foreground">{getSubtitle()}</p>
-						{config && !isAutoMode && mode !== "create" && (
+						{config && mode !== "create" && (
 							<p className="text-xs font-mono text-muted-foreground/70">
 								{config.model_name}
 							</p>
@@ -193,16 +184,7 @@ export function ModelConfigDialog({
 						WebkitMaskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
 					}}
 				>
-					{isAutoMode && (
-						<Alert className="mb-5 border-violet-500/30 bg-violet-500/5">
-							<AlertDescription className="text-sm text-violet-700 dark:text-violet-400">
-								Auto mode automatically distributes requests across all available LLM
-								providers to optimize performance and avoid rate limits.
-							</AlertDescription>
-						</Alert>
-					)}
-
-					{isGlobal && !isAutoMode && mode !== "create" && (
+				{isGlobal && mode !== "create" && (
 						<Alert className="mb-5 border-amber-500/30 bg-amber-500/5">
 							<AlertCircle className="size-4 text-amber-500" />
 							<AlertDescription className="text-sm text-amber-700 dark:text-amber-400">
@@ -219,61 +201,7 @@ export function ModelConfigDialog({
 						mode="create"
 						formId="model-config-form"
 					/>
-					) : isAutoMode && config ? (
-						<div className="space-y-6">
-							<div className="space-y-4">
-								<div className="space-y-1.5">
-									<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-										How It Works
-									</div>
-									<p className="text-sm text-muted-foreground">{config.description}</p>
-								</div>
-
-								<div className="h-px bg-border/50" />
-
-								<div className="space-y-3">
-									<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-										Key Benefits
-									</div>
-									<div className="space-y-2">
-										<div className="flex items-start gap-3 p-3 rounded-lg bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-800/50">
-											<Zap className="size-4 text-violet-600 dark:text-violet-400 mt-0.5 shrink-0" />
-											<div>
-												<p className="text-sm font-medium text-violet-900 dark:text-violet-100">
-													Automatic (Fastest)
-												</p>
-												<p className="text-xs text-violet-700 dark:text-violet-300">
-													Distributes requests across all configured LLM providers
-												</p>
-											</div>
-										</div>
-										<div className="flex items-start gap-3 p-3 rounded-lg bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-800/50">
-											<Zap className="size-4 text-violet-600 dark:text-violet-400 mt-0.5 shrink-0" />
-											<div>
-												<p className="text-sm font-medium text-violet-900 dark:text-violet-100">
-													Rate Limit Protection
-												</p>
-												<p className="text-xs text-violet-700 dark:text-violet-300">
-													Automatically handles rate limits with cooldowns and retries
-												</p>
-											</div>
-										</div>
-										<div className="flex items-start gap-3 p-3 rounded-lg bg-violet-50 dark:bg-violet-900/20 border border-violet-200 dark:border-violet-800/50">
-											<Zap className="size-4 text-violet-600 dark:text-violet-400 mt-0.5 shrink-0" />
-											<div>
-												<p className="text-sm font-medium text-violet-900 dark:text-violet-100">
-													Automatic Failover
-												</p>
-												<p className="text-xs text-violet-700 dark:text-violet-300">
-													Falls back to other providers if one becomes unavailable
-												</p>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					) : isGlobal && config ? (
+				) : isGlobal && config ? (
 						<div className="space-y-6">
 							<div className="space-y-4">
 								<div className="grid gap-4 sm:grid-cols-2">
@@ -378,7 +306,7 @@ export function ModelConfigDialog({
 					>
 						Cancel
 					</Button>
-					{mode === "create" || (!isGlobal && !isAutoMode && config) ? (
+					{mode === "create" || (!isGlobal && config) ? (
 					<Button
 						type="submit"
 						form="model-config-form"
@@ -390,16 +318,7 @@ export function ModelConfigDialog({
 						</span>
 						{isSubmitting && <Spinner size="sm" className="absolute" />}
 					</Button>
-					) : isAutoMode ? (
-					<Button
-						className="relative text-sm h-9 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700"
-						onClick={handleUseGlobalConfig}
-						disabled={isSubmitting}
-					>
-						<span className={isSubmitting ? "opacity-0" : ""}>Use Auto Mode</span>
-						{isSubmitting && <Spinner size="sm" className="absolute" />}
-					</Button>
-					) : isGlobal && config ? (
+				) : isGlobal && config ? (
 					<Button
 						className="relative text-sm h-9"
 						onClick={handleUseGlobalConfig}

From 7632291731e1703c2d8299c07547b17cdf05e1c9 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 21:27:10 +0530
Subject: [PATCH 13/24] refactor: improve UI consistency by standardizing
 header and sidebar component heights, and enhance right panel functionality
 with expanded button integration

---
 .../assistant-ui/thinking-steps.tsx           | 10 ++--
 .../components/layout/ui/header/Header.tsx    | 48 +++++++------------
 .../layout/ui/right-panel/RightPanel.tsx      |  2 +-
 .../layout/ui/shell/LayoutShell.tsx           | 24 +++++++++-
 .../layout/ui/sidebar/DocumentsSidebar.tsx    |  4 +-
 .../components/layout/ui/sidebar/Sidebar.tsx  |  6 +--
 .../components/layout/ui/tabs/TabBar.tsx      | 36 +++++++-------
 7 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/thinking-steps.tsx b/surfsense_web/components/assistant-ui/thinking-steps.tsx
index 900fc7b09..2c47b0006 100644
--- a/surfsense_web/components/assistant-ui/thinking-steps.tsx
+++ b/surfsense_web/components/assistant-ui/thinking-steps.tsx
@@ -20,8 +20,6 @@ export const ThinkingStepsDisplay: FC<{ steps: ThinkingStep[]; isThreadRunning?:
 	steps,
 	isThreadRunning = true,
 }) => {
-	const [isOpen, setIsOpen] = useState(true);
-
 	const getEffectiveStatus = useCallback(
 		(step: ThinkingStep): "pending" | "in_progress" | "completed" => {
 			if (step.status === "in_progress" && !isThreadRunning) {
@@ -38,12 +36,18 @@ export const ThinkingStepsDisplay: FC<{ steps: ThinkingStep[]; isThreadRunning?:
 		!isThreadRunning &&
 		steps.every((s) => getEffectiveStatus(s) === "completed");
 	const isProcessing = isThreadRunning && !allCompleted;
+	const [isOpen, setIsOpen] = useState(() => isProcessing);
 
 	useEffect(() => {
+		if (isProcessing) {
+			setIsOpen(true);
+			return;
+		}
+
 		if (allCompleted) {
 			setIsOpen(false);
 		}
-	}, [allCompleted]);
+	}, [allCompleted, isProcessing]);
 
 	if (steps.length === 0) return null;
 
diff --git a/surfsense_web/components/layout/ui/header/Header.tsx b/surfsense_web/components/layout/ui/header/Header.tsx
index d2077deb4..c28fecbbe 100644
--- a/surfsense_web/components/layout/ui/header/Header.tsx
+++ b/surfsense_web/components/layout/ui/header/Header.tsx
@@ -1,20 +1,20 @@
 "use client";
 
-import { useAtom, useAtomValue } from "jotai";
-import { PanelRight } from "lucide-react";
+import { useAtomValue } from "jotai";
 import { usePathname } from "next/navigation";
+import { hitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
 import { currentThreadAtom } from "@/atoms/chat/current-thread.atom";
 import { reportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
+import { editorPanelAtom } from "@/atoms/editor/editor-panel.atom";
 import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
-import { activeTabAtom } from "@/atoms/tabs/tabs.atom";
+import { activeTabAtom, tabsAtom } from "@/atoms/tabs/tabs.atom";
 import { ChatHeader } from "@/components/new-chat/chat-header";
 import { ChatShareButton } from "@/components/new-chat/chat-share-button";
-import { Button } from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useIsMobile } from "@/hooks/use-mobile";
 import type { ChatVisibility, ThreadRecord } from "@/lib/chat/thread-persistence";
+import { cn } from "@/lib/utils";
 
 interface HeaderProps {
 	mobileMenuTrigger?: React.ReactNode;
@@ -25,9 +25,20 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
 	const isMobile = useIsMobile();
 	const activeTab = useAtomValue(activeTabAtom);
+	const tabs = useAtomValue(tabsAtom);
+	const collapsed = useAtomValue(rightPanelCollapsedAtom);
+	const documentsOpen = useAtomValue(documentsSidebarOpenAtom);
+	const reportState = useAtomValue(reportPanelAtom);
+	const editorState = useAtomValue(editorPanelAtom);
+	const hitlEditState = useAtomValue(hitlEditPanelAtom);
 
 	const isChatPage = pathname?.includes("/new-chat") ?? false;
 	const isDocumentTab = activeTab?.type === "document";
+	const reportOpen = reportState.isOpen && !!reportState.reportId;
+	const editorOpen = editorState.isOpen && !!editorState.documentId;
+	const hitlEditOpen = hitlEditState.isOpen && !!hitlEditState.onSave;
+	const showExpandButton = !isMobile && collapsed && (documentsOpen || reportOpen || editorOpen || hitlEditOpen);
+	const hasTabBar = tabs.length > 1;
 
 	const currentThreadState = useAtomValue(currentThreadAtom);
 
@@ -49,15 +60,8 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
 
 	const handleVisibilityChange = (_visibility: ChatVisibility) => {};
 
-	const [collapsed, setCollapsed] = useAtom(rightPanelCollapsedAtom);
-	const documentsOpen = useAtomValue(documentsSidebarOpenAtom);
-	const reportState = useAtomValue(reportPanelAtom);
-	const reportOpen = reportState.isOpen && !!reportState.reportId;
-	const hasRightPanelContent = documentsOpen || reportOpen;
-	const showExpandButton = !isMobile && collapsed && hasRightPanelContent;
-
 	return (
-		<header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 bg-main-panel/95 backdrop-blur supports-backdrop-filter:bg-main-panel/60 px-4">
+		<header className="sticky top-0 z-10 flex h-12 shrink-0 items-center gap-2 bg-main-panel/95 backdrop-blur supports-backdrop-filter:bg-main-panel/60 px-4">
 			{/* Left side - Mobile menu trigger + Model selector */}
 			<div className="flex flex-1 items-center gap-2 min-w-0">
 				{mobileMenuTrigger}
@@ -67,26 +71,10 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
 			</div>
 
 			{/* Right side - Actions */}
-			<div className="flex items-center gap-2">
+			<div className={cn("ml-auto flex items-center gap-2", showExpandButton && !hasTabBar && "mr-10")}>
 				{hasThread && (
 					<ChatShareButton thread={threadForButton} onVisibilityChange={handleVisibilityChange} />
 				)}
-				{showExpandButton && (
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button
-								variant="ghost"
-								size="icon"
-								onClick={() => setCollapsed(false)}
-								className="h-8 w-8 shrink-0"
-							>
-								<PanelRight className="h-4 w-4" />
-								<span className="sr-only">Expand panel</span>
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent side="bottom">Expand panel</TooltipContent>
-					</Tooltip>
-				)}
 			</div>
 		</header>
 	);
diff --git a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
index 90cdde127..b92430607 100644
--- a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
+++ b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
@@ -55,7 +55,7 @@ export function RightPanelExpandButton() {
 	if (!collapsed || !hasContent) return null;
 
 	return (
-		<div className="absolute top-4 right-4 z-20">
+		<div className="absolute top-0 right-4 z-20 flex h-12 items-center">
 			<Tooltip>
 				<TooltipTrigger asChild>
 					<Button
diff --git a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
index 6b2d17702..8cf2984ea 100644
--- a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
+++ b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
@@ -3,6 +3,11 @@
 import { useAtomValue } from "jotai";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useMemo, useState } from "react";
+import { hitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
+import { reportPanelAtom } from "@/atoms/chat/report-panel.atom";
+import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
+import { editorPanelAtom } from "@/atoms/editor/editor-panel.atom";
+import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
 import { activeTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { InboxItem } from "@/hooks/use-inbox";
@@ -13,7 +18,7 @@ import { useSidebarResize } from "../../hooks/useSidebarResize";
 import type { ChatItem, NavItem, PageUsage, SearchSpace, User } from "../../types/layout.types";
 import { Header } from "../header";
 import { IconRail } from "../icon-rail";
-import { RightPanel } from "../right-panel/RightPanel";
+import { RightPanel, RightPanelExpandButton } from "../right-panel/RightPanel";
 import {
 	AllPrivateChatsSidebarContent,
 	AllSharedChatsSidebarContent,
@@ -116,11 +121,26 @@ function MainContentPanel({
 	children: React.ReactNode;
 }) {
 	const activeTab = useAtomValue(activeTabAtom);
+	const rightPanelCollapsed = useAtomValue(rightPanelCollapsedAtom);
+	const documentsOpen = useAtomValue(documentsSidebarOpenAtom);
+	const reportState = useAtomValue(reportPanelAtom);
+	const editorState = useAtomValue(editorPanelAtom);
+	const hitlEditState = useAtomValue(hitlEditPanelAtom);
 	const isDocumentTab = activeTab?.type === "document";
+	const reportOpen = reportState.isOpen && !!reportState.reportId;
+	const editorOpen = editorState.isOpen && !!editorState.documentId;
+	const hitlEditOpen = hitlEditState.isOpen && !!hitlEditState.onSave;
+	const showRightPanelExpandButton =
+		rightPanelCollapsed && (documentsOpen || reportOpen || editorOpen || hitlEditOpen);
 
 	return (
 		<div className="relative flex flex-1 flex-col rounded-xl border bg-main-panel overflow-hidden min-w-0">
-			<TabBar onTabSwitch={onTabSwitch} onNewChat={onNewChat} />
+			<RightPanelExpandButton />
+			<TabBar
+				onTabSwitch={onTabSwitch}
+				onNewChat={onNewChat}
+				className={showRightPanelExpandButton ? "pr-14" : undefined}
+			/>
 			<Header />
 
 			{isDocumentTab && activeTab.documentId && activeTab.searchSpaceId ? (
diff --git a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
index ede469039..09f603f0f 100644
--- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
@@ -557,7 +557,7 @@ export function DocumentsSidebar({
 
 	const documentsContent = (
 		<>
-			<div className="shrink-0 flex h-14 items-center px-4">
+			<div className="shrink-0 flex h-12 items-center px-4">
 				<div className="flex w-full items-center justify-between">
 					<div className="flex items-center gap-2">
 						{isMobile && (
@@ -609,7 +609,7 @@ export function DocumentsSidebar({
 			</div>
 
 			{/* Connected tools strip */}
-			<div className="shrink-0 mx-4 mt-2 mb-3 flex select-none items-center gap-2 rounded-lg border bg-muted/50 transition-colors hover:bg-muted/80">
+			<div className="shrink-0 mx-4 mt-4 mb-4 flex select-none items-center gap-2 rounded-lg border bg-muted/50 transition-colors hover:bg-muted/80">
 				<button
 					type="button"
 					onClick={() => setConnectorDialogOpen(true)}
diff --git a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
index 85d9cd799..db8b10fe9 100644
--- a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
@@ -105,15 +105,15 @@ export function Sidebar({
 		>
 			{/* Header - search space name or collapse button when collapsed */}
 			{isCollapsed ? (
-				<div className="flex h-14 shrink-0 items-center justify-center border-b">
-					<SidebarCollapseButton
+			<div className="flex h-12 shrink-0 items-center justify-center border-b">
+				<SidebarCollapseButton
 						isCollapsed={isCollapsed}
 						onToggle={onToggleCollapse ?? (() => {})}
 						disableTooltip={disableTooltips}
 					/>
 				</div>
 			) : (
-				<div className="flex h-14 shrink-0 items-center gap-0 px-1 border-b">
+				<div className="flex h-12 shrink-0 items-center gap-0 px-1 border-b">
 					<SidebarHeader
 						searchSpace={searchSpace}
 						isCollapsed={isCollapsed}
diff --git a/surfsense_web/components/layout/ui/tabs/TabBar.tsx b/surfsense_web/components/layout/ui/tabs/TabBar.tsx
index 14de3add6..c163d3e3f 100644
--- a/surfsense_web/components/layout/ui/tabs/TabBar.tsx
+++ b/surfsense_web/components/layout/ui/tabs/TabBar.tsx
@@ -58,8 +58,11 @@ export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
 	if (tabs.length <= 1) return null;
 
 	return (
-		<div className={cn("flex items-center shrink-0 border-b bg-main-panel", className)}>
-			<div ref={scrollRef} className="flex items-center flex-1 overflow-x-auto scrollbar-none">
+		<div className={cn("flex h-12 items-stretch shrink-0 border-b bg-main-panel", className)}>
+			<div
+				ref={scrollRef}
+				className="flex h-full items-stretch flex-1 overflow-x-auto overflow-y-hidden scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+			>
 				{tabs.map((tab) => {
 					const isActive = tab.id === activeTabId;
 					const Icon = tab.type === "document" ? FileText : MessageSquare;
@@ -71,10 +74,10 @@ export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
 							data-tab-id={tab.id}
 							onClick={() => handleTabClick(tab)}
 							className={cn(
-								"group relative flex items-center gap-1.5 px-3 h-9 min-w-0 max-w-[200px] text-xs font-medium border-r transition-colors shrink-0",
+								"group relative flex h-full items-center self-stretch gap-1.5 px-3 min-w-0 max-w-[200px] text-xs font-medium border-r transition-colors shrink-0",
 								isActive
-									? "bg-main-panel text-foreground"
-									: "bg-muted/30 text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+									? "bg-muted/40 text-foreground"
+									: "bg-transparent text-muted-foreground hover:bg-muted/25 hover:text-foreground"
 							)}
 						>
 							{isActive && <span className="absolute bottom-0 left-0 right-0 h-[2px] bg-primary" />}
@@ -103,18 +106,19 @@ export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
 						</button>
 					);
 				})}
+				{onNewChat && (
+					<div className="flex h-full items-center px-1.5 shrink-0">
+						<button
+							type="button"
+							onClick={onNewChat}
+							className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground hover:bg-muted/60"
+							title="New Chat"
+						>
+							<Plus className="size-3.5" />
+						</button>
+					</div>
+				)}
 			</div>
-
-			{onNewChat && (
-				<button
-					type="button"
-					onClick={onNewChat}
-					className="flex items-center justify-center size-9 shrink-0 text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors"
-					title="New Chat"
-				>
-					<Plus className="size-3.5" />
-				</button>
-			)}
 		</div>
 	);
 }

From b54aa517a8446c081402919c63b6125bffaf88a2 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 21:34:41 +0530
Subject: [PATCH 14/24] refactor: implement chat tab removal functionality and
 enhance tab title update logic for improved user experience

---
 surfsense_web/atoms/tabs/tabs.atom.ts         | 43 +++++++++++++++++++
 .../layout/providers/LayoutDataProvider.tsx   |  8 +++-
 .../ui/sidebar/AllPrivateChatsSidebar.tsx     |  6 ++-
 .../ui/sidebar/AllSharedChatsSidebar.tsx      |  6 ++-
 4 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/surfsense_web/atoms/tabs/tabs.atom.ts b/surfsense_web/atoms/tabs/tabs.atom.ts
index 7ba115a95..bb747f032 100644
--- a/surfsense_web/atoms/tabs/tabs.atom.ts
+++ b/surfsense_web/atoms/tabs/tabs.atom.ts
@@ -128,6 +128,21 @@ export const updateChatTabTitleAtom = atom(
 	(get, set, { chatId, title }: { chatId: number; title: string }) => {
 		const state = get(tabsStateAtom);
 		const tabId = makeChatTabId(chatId);
+		const hasExactTab = state.tabs.some((t) => t.id === tabId);
+
+		// During lazy thread creation, title updates can arrive before "chat-new"
+		// is swapped to chat-{id}. In that case, promote the active "chat-new" tab.
+		if (!hasExactTab && state.activeTabId === "chat-new") {
+			set(tabsStateAtom, {
+				...state,
+				activeTabId: tabId,
+				tabs: state.tabs.map((t) =>
+					t.id === "chat-new" ? { ...t, id: tabId, chatId, title } : t
+				),
+			});
+			return;
+		}
+
 		set(tabsStateAtom, {
 			...state,
 			tabs: state.tabs.map((t) => (t.id === tabId ? { ...t, title } : t)),
@@ -213,6 +228,34 @@ export const closeTabAtom = atom(null, (get, set, tabId: string) => {
 	return remaining.find((t) => t.id === newActiveId) ?? null;
 });
 
+/** Remove a chat tab by chat ID (used when a chat is deleted). */
+export const removeChatTabAtom = atom(null, (get, set, chatId: number) => {
+	const state = get(tabsStateAtom);
+	const tabId = makeChatTabId(chatId);
+	const idx = state.tabs.findIndex((t) => t.id === tabId);
+	if (idx === -1) return null;
+
+	const remaining = state.tabs.filter((t) => t.id !== tabId);
+
+	// Always keep at least one tab available.
+	if (remaining.length === 0) {
+		set(tabsStateAtom, {
+			tabs: [INITIAL_CHAT_TAB],
+			activeTabId: "chat-new",
+		});
+		return INITIAL_CHAT_TAB;
+	}
+
+	let newActiveId = state.activeTabId;
+	if (state.activeTabId === tabId) {
+		const newIdx = Math.min(idx, remaining.length - 1);
+		newActiveId = remaining[newIdx].id;
+	}
+
+	set(tabsStateAtom, { tabs: remaining, activeTabId: newActiveId });
+	return remaining.find((t) => t.id === newActiveId) ?? null;
+});
+
 /** Reset tabs when switching search spaces. */
 export const resetTabsAtom = atom(null, (_get, set) => {
 	set(tabsStateAtom, { ...initialState });
diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
index 57a0f89cf..f611c1861 100644
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@@ -20,7 +20,7 @@ import {
 	teamDialogAtom,
 	userSettingsDialogAtom,
 } from "@/atoms/settings/settings-dialog.atoms";
-import { resetTabsAtom, syncChatTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
+import { removeChatTabAtom, resetTabsAtom, syncChatTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { MorePagesDialog } from "@/components/settings/more-pages-dialog";
 import { SearchSpaceSettingsDialog } from "@/components/settings/search-space-settings-dialog";
@@ -103,6 +103,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	const resetCurrentThread = useSetAtom(resetCurrentThreadAtom);
 	const syncChatTab = useSetAtom(syncChatTabAtom);
 	const resetTabs = useSetAtom(resetTabsAtom);
+	const removeChatTab = useSetAtom(removeChatTabAtom);
 
 	// State for handling new chat navigation when router is out of sync
 	const [pendingNewChat, setPendingNewChat] = useState(false);
@@ -325,7 +326,8 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		const thread = threadsData?.threads?.find((t) => t.id === chatId);
 		syncChatTab({
 			chatId,
-			title: thread?.title || (chatId ? `Chat ${chatId}` : "New Chat"),
+			// Avoid overwriting live SSE-updated tab titles with fallback values.
+			title: chatId ? (thread?.title ?? undefined) : "New Chat",
 			chatUrl,
 		});
 	}, [currentChatId, searchSpaceId, threadsData?.threads, syncChatTab]);
@@ -637,6 +639,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		setIsDeletingChat(true);
 		try {
 			await deleteThread(chatToDelete.id);
+			removeChatTab(chatToDelete.id);
 			queryClient.invalidateQueries({ queryKey: ["threads", searchSpaceId] });
 			if (currentChatId === chatToDelete.id) {
 				resetCurrentThread();
@@ -664,6 +667,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		currentThreadState.id,
 		params?.chat_id,
 		router,
+		removeChatTab,
 	]);
 
 	// Rename handler
diff --git a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
index b00f701c4..4a359859a 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useSetAtom } from "jotai";
 import { format } from "date-fns";
 import {
 	ArchiveIcon,
@@ -41,6 +42,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useLongPress } from "@/hooks/use-long-press";
 import { useIsMobile } from "@/hooks/use-mobile";
+import { removeChatTabAtom } from "@/atoms/tabs/tabs.atom";
 import {
 	deleteThread,
 	fetchThreads,
@@ -70,6 +72,7 @@ export function AllPrivateChatsSidebarContent({
 	const params = useParams();
 	const queryClient = useQueryClient();
 	const isMobile = useIsMobile();
+	const removeChatTab = useSetAtom(removeChatTabAtom);
 
 	const currentChatId = Array.isArray(params.chat_id)
 		? Number(params.chat_id[0])
@@ -158,6 +161,7 @@ export function AllPrivateChatsSidebarContent({
 			setDeletingThreadId(threadId);
 			try {
 				await deleteThread(threadId);
+				removeChatTab(threadId);
 				toast.success(t("chat_deleted") || "Chat deleted successfully");
 				queryClient.invalidateQueries({ queryKey: ["all-threads", searchSpaceId] });
 				queryClient.invalidateQueries({ queryKey: ["search-threads", searchSpaceId] });
@@ -176,7 +180,7 @@ export function AllPrivateChatsSidebarContent({
 				setDeletingThreadId(null);
 			}
 		},
-		[queryClient, searchSpaceId, t, currentChatId, router, onOpenChange]
+		[queryClient, searchSpaceId, t, currentChatId, router, onOpenChange, removeChatTab]
 	);
 
 	const handleToggleArchive = useCallback(
diff --git a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
index d8289d1e9..6e7828116 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useSetAtom } from "jotai";
 import { format } from "date-fns";
 import {
 	ArchiveIcon,
@@ -41,6 +42,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useLongPress } from "@/hooks/use-long-press";
 import { useIsMobile } from "@/hooks/use-mobile";
+import { removeChatTabAtom } from "@/atoms/tabs/tabs.atom";
 import {
 	deleteThread,
 	fetchThreads,
@@ -70,6 +72,7 @@ export function AllSharedChatsSidebarContent({
 	const params = useParams();
 	const queryClient = useQueryClient();
 	const isMobile = useIsMobile();
+	const removeChatTab = useSetAtom(removeChatTabAtom);
 
 	const currentChatId = Array.isArray(params.chat_id)
 		? Number(params.chat_id[0])
@@ -158,6 +161,7 @@ export function AllSharedChatsSidebarContent({
 			setDeletingThreadId(threadId);
 			try {
 				await deleteThread(threadId);
+				removeChatTab(threadId);
 				toast.success(t("chat_deleted") || "Chat deleted successfully");
 				queryClient.invalidateQueries({ queryKey: ["all-threads", searchSpaceId] });
 				queryClient.invalidateQueries({ queryKey: ["search-threads", searchSpaceId] });
@@ -176,7 +180,7 @@ export function AllSharedChatsSidebarContent({
 				setDeletingThreadId(null);
 			}
 		},
-		[queryClient, searchSpaceId, t, currentChatId, router, onOpenChange]
+		[queryClient, searchSpaceId, t, currentChatId, router, onOpenChange, removeChatTab]
 	);
 
 	const handleToggleArchive = useCallback(

From 69b8eef5ce222cc58c2b11b9c3f10fc39be9d662 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 22:12:55 +0530
Subject: [PATCH 15/24] refactor: enhance chat tab management by implementing
 fallback navigation and preventing race conditions during deletion for
 improved user experience

---
 .../new-chat/[[...chat_id]]/page.tsx          | 16 +++-
 surfsense_web/atoms/tabs/tabs.atom.ts         | 11 +++
 .../layout/providers/LayoutDataProvider.tsx   | 16 ++--
 .../ui/sidebar/AllPrivateChatsSidebar.tsx     |  6 +-
 .../ui/sidebar/AllSharedChatsSidebar.tsx      |  6 +-
 .../layout/ui/sidebar/DocumentsSidebar.tsx    | 87 +++----------------
 .../components/layout/ui/tabs/TabBar.tsx      | 16 ++--
 7 files changed, 65 insertions(+), 93 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
index 5b35c0284..8fdd9eecb 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
@@ -33,7 +33,7 @@ import { closeReportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { type AgentCreatedDocument, agentCreatedDocumentsAtom } from "@/atoms/documents/ui.atoms";
 import { closeEditorPanelAtom } from "@/atoms/editor/editor-panel.atom";
 import { membersAtom } from "@/atoms/members/members-query.atoms";
-import { updateChatTabTitleAtom } from "@/atoms/tabs/tabs.atom";
+import { removeChatTabAtom, updateChatTabTitleAtom } from "@/atoms/tabs/tabs.atom";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { ThinkingStepsDataUI } from "@/components/assistant-ui/thinking-steps";
 import { Thread } from "@/components/assistant-ui/thread";
@@ -70,6 +70,7 @@ import {
 	getThreadMessages,
 	type ThreadRecord,
 } from "@/lib/chat/thread-persistence";
+import { NotFoundError } from "@/lib/error";
 import {
 	trackChatCreated,
 	trackChatError,
@@ -194,6 +195,7 @@ export default function NewChatPage() {
 	const closeReportPanel = useSetAtom(closeReportPanelAtom);
 	const closeEditorPanel = useSetAtom(closeEditorPanelAtom);
 	const updateChatTabTitle = useSetAtom(updateChatTabTitleAtom);
+	const removeChatTab = useSetAtom(removeChatTabAtom);
 	const setAgentCreatedDocuments = useSetAtom(agentCreatedDocumentsAtom);
 
 	// Get current user for author info in shared chats
@@ -323,6 +325,14 @@ export default function NewChatPage() {
 			// This improves UX (instant load) and avoids orphan threads
 		} catch (error) {
 			console.error("[NewChatPage] Failed to initialize thread:", error);
+			if (urlChatId > 0 && error instanceof NotFoundError) {
+				removeChatTab(urlChatId);
+				if (typeof window !== "undefined") {
+					window.history.replaceState(null, "", `/dashboard/${searchSpaceId}/new-chat`);
+				}
+				toast.error("This chat was deleted.");
+				return;
+			}
 			// Keep threadId as null - don't use Date.now() as it creates an invalid ID
 			// that will cause 404 errors on subsequent API calls
 			setThreadId(null);
@@ -338,12 +348,14 @@ export default function NewChatPage() {
 		setSidebarDocuments,
 		closeReportPanel,
 		closeEditorPanel,
+		removeChatTab,
+		searchSpaceId,
 	]);
 
 	// Initialize on mount, and re-init when switching search spaces (even if urlChatId is the same)
 	useEffect(() => {
 		initializeThread();
-	}, [initializeThread, searchSpaceId]);
+	}, [initializeThread]);
 
 	// Prefetch document titles for @ mention picker
 	// Runs when user lands on page so data is ready when they type @
diff --git a/surfsense_web/atoms/tabs/tabs.atom.ts b/surfsense_web/atoms/tabs/tabs.atom.ts
index bb747f032..2d462e4d5 100644
--- a/surfsense_web/atoms/tabs/tabs.atom.ts
+++ b/surfsense_web/atoms/tabs/tabs.atom.ts
@@ -33,6 +33,9 @@ const initialState: TabsState = {
 	activeTabId: "chat-new",
 };
 
+// Prevent race conditions where route-sync recreates a just-deleted chat tab.
+const deletedChatIdsAtom = atom<Set<number>>(new Set<number>());
+
 const sessionStorageAdapter = createJSONStorage<TabsState>(
 	() => (typeof window !== "undefined" ? sessionStorage : undefined) as Storage
 );
@@ -71,6 +74,10 @@ export const syncChatTabAtom = atom(
 		set,
 		{ chatId, title, chatUrl }: { chatId: number | null; title?: string; chatUrl?: string }
 	) => {
+		if (chatId && get(deletedChatIdsAtom).has(chatId)) {
+			return;
+		}
+
 		const state = get(tabsStateAtom);
 		const tabId = makeChatTabId(chatId);
 		const existing = state.tabs.find((t) => t.id === tabId);
@@ -235,6 +242,9 @@ export const removeChatTabAtom = atom(null, (get, set, chatId: number) => {
 	const idx = state.tabs.findIndex((t) => t.id === tabId);
 	if (idx === -1) return null;
 
+	const deletedChatIds = get(deletedChatIdsAtom);
+	set(deletedChatIdsAtom, new Set([...deletedChatIds, chatId]));
+
 	const remaining = state.tabs.filter((t) => t.id !== tabId);
 
 	// Always keep at least one tab available.
@@ -259,4 +269,5 @@ export const removeChatTabAtom = atom(null, (get, set, chatId: number) => {
 /** Reset tabs when switching search spaces. */
 export const resetTabsAtom = atom(null, (_get, set) => {
 	set(tabsStateAtom, { ...initialState });
+	set(deletedChatIdsAtom, new Set<number>());
 });
diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
index f611c1861..3db53285b 100644
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@@ -639,16 +639,20 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		setIsDeletingChat(true);
 		try {
 			await deleteThread(chatToDelete.id);
-			removeChatTab(chatToDelete.id);
+			const fallbackTab = removeChatTab(chatToDelete.id);
 			queryClient.invalidateQueries({ queryKey: ["threads", searchSpaceId] });
 			if (currentChatId === chatToDelete.id) {
 				resetCurrentThread();
-				const isOutOfSync = currentThreadState.id !== null && !params?.chat_id;
-				if (isOutOfSync) {
-					window.history.replaceState(null, "", `/dashboard/${searchSpaceId}/new-chat`);
-					setChatResetKey((k) => k + 1);
+				if (fallbackTab?.type === "chat" && fallbackTab.chatUrl) {
+					router.push(fallbackTab.chatUrl);
 				} else {
-					router.push(`/dashboard/${searchSpaceId}/new-chat`);
+					const isOutOfSync = currentThreadState.id !== null && !params?.chat_id;
+					if (isOutOfSync) {
+						window.history.replaceState(null, "", `/dashboard/${searchSpaceId}/new-chat`);
+						setChatResetKey((k) => k + 1);
+					} else {
+						router.push(`/dashboard/${searchSpaceId}/new-chat`);
+					}
 				}
 			}
 		} catch (error) {
diff --git a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
index 4a359859a..01e397309 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
@@ -161,7 +161,7 @@ export function AllPrivateChatsSidebarContent({
 			setDeletingThreadId(threadId);
 			try {
 				await deleteThread(threadId);
-				removeChatTab(threadId);
+				const fallbackTab = removeChatTab(threadId);
 				toast.success(t("chat_deleted") || "Chat deleted successfully");
 				queryClient.invalidateQueries({ queryKey: ["all-threads", searchSpaceId] });
 				queryClient.invalidateQueries({ queryKey: ["search-threads", searchSpaceId] });
@@ -170,6 +170,10 @@ export function AllPrivateChatsSidebarContent({
 				if (currentChatId === threadId) {
 					onOpenChange(false);
 					setTimeout(() => {
+						if (fallbackTab?.type === "chat" && fallbackTab.chatUrl) {
+							router.push(fallbackTab.chatUrl);
+							return;
+						}
 						router.push(`/dashboard/${searchSpaceId}/new-chat`);
 					}, 250);
 				}
diff --git a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
index 6e7828116..b13bf2ba3 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
@@ -161,7 +161,7 @@ export function AllSharedChatsSidebarContent({
 			setDeletingThreadId(threadId);
 			try {
 				await deleteThread(threadId);
-				removeChatTab(threadId);
+				const fallbackTab = removeChatTab(threadId);
 				toast.success(t("chat_deleted") || "Chat deleted successfully");
 				queryClient.invalidateQueries({ queryKey: ["all-threads", searchSpaceId] });
 				queryClient.invalidateQueries({ queryKey: ["search-threads", searchSpaceId] });
@@ -170,6 +170,10 @@ export function AllSharedChatsSidebarContent({
 				if (currentChatId === threadId) {
 					onOpenChange(false);
 					setTimeout(() => {
+						if (fallbackTab?.type === "chat" && fallbackTab.chatUrl) {
+							router.push(fallbackTab.chatUrl);
+							return;
+						}
 						router.push(`/dashboard/${searchSpaceId}/new-chat`);
 					}, 250);
 				}
diff --git a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
index 09f603f0f..2d3cbbe53 100644
--- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
@@ -7,16 +7,15 @@ import { useParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
-import { MarkdownViewer } from "@/components/markdown-viewer";
 import { DocumentsFilters } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters";
 import { sidebarSelectedDocumentsAtom } from "@/atoms/chat/mentioned-documents.atom";
 import { connectorDialogOpenAtom } from "@/atoms/connector-dialog/connector-dialog.atoms";
 import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
 import { deleteDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
+import { openEditorPanelAtom } from "@/atoms/editor/editor-panel.atom";
 import { expandedFolderIdsAtom } from "@/atoms/documents/folder.atoms";
 import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
 import { agentCreatedDocumentsAtom } from "@/atoms/documents/ui.atoms";
-import { openDocumentTabAtom } from "@/atoms/tabs/tabs.atom";
 import { CreateFolderDialog } from "@/components/documents/CreateFolderDialog";
 import type { DocumentNodeDoc } from "@/components/documents/DocumentNode";
 import type { FolderDisplay } from "@/components/documents/FolderNode";
@@ -35,22 +34,13 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
-import {
-	Drawer,
-	DrawerContent,
-	DrawerHandle,
-	DrawerHeader,
-	DrawerTitle,
-} from "@/components/ui/drawer";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { DocumentTypeEnum } from "@/contracts/types/document.types";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useMediaQuery } from "@/hooks/use-media-query";
-import { useIsMobile } from "@/hooks/use-mobile";
 import { foldersApiService } from "@/lib/apis/folders-api.service";
-import { documentsApiService } from "@/lib/apis/documents-api.service";
 import { authenticatedFetch } from "@/lib/auth-utils";
 import { queries } from "@/zero/queries/index";
 import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
@@ -95,12 +85,10 @@ export function DocumentsSidebar({
 	const searchSpaceId = Number(params.search_space_id);
 	const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom);
 	const setRightPanelCollapsed = useSetAtom(rightPanelCollapsedAtom);
-	const openDocumentTab = useSetAtom(openDocumentTabAtom);
+	const openEditorPanel = useSetAtom(openEditorPanelAtom);
 	const { data: connectors } = useAtomValue(connectorsAtom);
 	const connectorCount = connectors?.length ?? 0;
 
-	const isMobileLayout = useIsMobile();
-
 	const [search, setSearch] = useState("");
 	const debouncedSearch = useDebouncedValue(search, 250);
 	const [activeTypes, setActiveTypes] = useState<DocumentTypeEnum[]>([]);
@@ -374,31 +362,6 @@ export function DocumentsSidebar({
 		[]
 	);
 
-	// Document popup viewer state (for tree view "Open" and mobile preview)
-	const [viewingDoc, setViewingDoc] = useState<DocumentNodeDoc | null>(null);
-	const [viewingContent, setViewingContent] = useState<string>("");
-	const [viewingLoading, setViewingLoading] = useState(false);
-
-	const handleViewDocumentPopup = useCallback(async (doc: DocumentNodeDoc) => {
-		setViewingDoc(doc);
-		setViewingLoading(true);
-		try {
-			const fullDoc = await documentsApiService.getDocument({ id: doc.id });
-			setViewingContent(fullDoc.content);
-		} catch (err) {
-			console.error("[DocumentsSidebar] Failed to fetch document content:", err);
-			setViewingContent("Failed to load document content.");
-		} finally {
-			setViewingLoading(false);
-		}
-	}, []);
-
-	const handleCloseViewer = useCallback(() => {
-		setViewingDoc(null);
-		setViewingContent("");
-		setViewingLoading(false);
-	}, []);
-
 	const handleToggleChatMention = useCallback(
 		(doc: { id: number; title: string; document_type: string }, isMentioned: boolean) => {
 			if (isMentioned) {
@@ -716,24 +679,18 @@ export function DocumentsSidebar({
 					onCreateFolder={handleCreateFolder}
 					searchQuery={debouncedSearch.trim() || undefined}
 					onPreviewDocument={(doc) => {
-						if (isMobileLayout) {
-							handleViewDocumentPopup(doc);
-						} else {
-							openDocumentTab({
-								documentId: doc.id,
-								searchSpaceId,
-								title: doc.title,
-							});
-						}
+						openEditorPanel({
+							documentId: doc.id,
+							searchSpaceId,
+							title: doc.title,
+						});
 					}}
 					onEditDocument={(doc) => {
-						if (!isMobileLayout) {
-							openDocumentTab({
-								documentId: doc.id,
-								searchSpaceId,
-								title: doc.title,
-							});
-						}
+						openEditorPanel({
+							documentId: doc.id,
+							searchSpaceId,
+							title: doc.title,
+						});
 					}}
 					onDeleteDocument={(doc) => handleDeleteDocument(doc.id)}
 					onMoveDocument={handleMoveDocument}
@@ -761,26 +718,6 @@ export function DocumentsSidebar({
 				onConfirm={handleCreateFolderConfirm}
 			/>
 
-			<Drawer open={!!viewingDoc} onOpenChange={(open) => !open && handleCloseViewer()}>
-				<DrawerContent className="max-h-[85vh] flex flex-col">
-					<DrawerHandle />
-					<DrawerHeader className="text-left shrink-0">
-						<DrawerTitle className="text-base leading-tight break-words">
-							{viewingDoc?.title}
-						</DrawerTitle>
-					</DrawerHeader>
-					<div className="overflow-y-auto flex-1 min-h-0 px-4 pb-6 select-text text-xs [&_h1]:text-base! [&_h1]:mt-3! [&_h2]:text-sm! [&_h2]:mt-2! [&_h3]:text-xs! [&_h3]:mt-2!">
-						{viewingLoading ? (
-							<div className="flex items-center justify-center py-12">
-								<Spinner size="lg" className="text-muted-foreground" />
-							</div>
-						) : (
-							<MarkdownViewer content={viewingContent} />
-						)}
-					</div>
-				</DrawerContent>
-			</Drawer>
-
 			<AlertDialog
 				open={bulkDeleteConfirmOpen}
 				onOpenChange={(open) => !open && !isBulkDeleting && setBulkDeleteConfirmOpen(false)}
diff --git a/surfsense_web/components/layout/ui/tabs/TabBar.tsx b/surfsense_web/components/layout/ui/tabs/TabBar.tsx
index c163d3e3f..dc346b6cb 100644
--- a/surfsense_web/components/layout/ui/tabs/TabBar.tsx
+++ b/surfsense_web/components/layout/ui/tabs/TabBar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtomValue, useSetAtom } from "jotai";
-import { FileText, MessageSquare, Plus, X } from "lucide-react";
+import { Plus, X } from "lucide-react";
 import { useCallback, useEffect, useRef } from "react";
 import {
 	activeTabIdAtom,
@@ -65,7 +65,6 @@ export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
 			>
 				{tabs.map((tab) => {
 					const isActive = tab.id === activeTabId;
-					const Icon = tab.type === "document" ? FileText : MessageSquare;
 
 					return (
 						<button
@@ -74,15 +73,16 @@ export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
 							data-tab-id={tab.id}
 							onClick={() => handleTabClick(tab)}
 							className={cn(
-								"group relative flex h-full items-center self-stretch gap-1.5 px-3 min-w-0 max-w-[200px] text-xs font-medium border-r transition-colors shrink-0",
+								"group relative flex h-full w-[170px] items-center self-stretch px-3 min-w-0 overflow-hidden text-sm font-medium border-r transition-colors shrink-0",
 								isActive
 									? "bg-muted/40 text-foreground"
 									: "bg-transparent text-muted-foreground hover:bg-muted/25 hover:text-foreground"
 							)}
 						>
 							{isActive && <span className="absolute bottom-0 left-0 right-0 h-[2px] bg-primary" />}
-							<Icon className="size-3.5 shrink-0" />
-							<span className="truncate">{tab.title}</span>
+							<span className="block min-w-0 flex-1 truncate text-left transition-[padding-right] duration-150 group-hover:pr-5 group-focus-within:pr-5">
+								{tab.title}
+							</span>
 							{/* biome-ignore lint/a11y/useSemanticElements: cannot nest button inside button */}
 							<span
 								role="button"
@@ -95,10 +95,10 @@ export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
 									}
 								}}
 								className={cn(
-									"ml-auto shrink-0 rounded-sm p-0.5 transition-colors",
+									"absolute right-2 top-1/2 -translate-y-1/2 shrink-0 rounded-sm p-0.5 transition-colors",
 									isActive
-										? "opacity-60 hover:opacity-100 hover:bg-muted"
-										: "opacity-0 group-hover:opacity-60 hover:opacity-100! hover:bg-muted"
+										? "opacity-0 group-hover:opacity-70 group-focus-within:opacity-70 hover:opacity-100 hover:bg-muted"
+										: "opacity-0 group-hover:opacity-60 group-focus-within:opacity-60 hover:opacity-100! hover:bg-muted"
 								)}
 							>
 								<X className="size-3" />

From 38b77dfb6b7aa4453402bc55346e5d0d91c82ae9 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 22:29:40 +0530
Subject: [PATCH 16/24] refactor: update editable document types to include
 'FILE' and enhance related logic across components for improved functionality

---
 .../documents/(manage)/components/RowActions.tsx  |  2 +-
 .../components/documents/DocumentNode.tsx         |  6 +++++-
 .../components/editor-panel/editor-panel.tsx      | 15 +++++++++++++--
 .../layout/ui/tabs/DocumentTabContent.tsx         |  6 +++++-
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/RowActions.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/RowActions.tsx
index a8b85e20b..5b7451c61 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/RowActions.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/RowActions.tsx
@@ -24,7 +24,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import type { Document } from "./types";
 
-const EDITABLE_DOCUMENT_TYPES = ["NOTE"] as const;
+const EDITABLE_DOCUMENT_TYPES = ["FILE", "NOTE"] as const;
 
 // SURFSENSE_DOCS are system-managed and cannot be deleted
 const NON_DELETABLE_DOCUMENT_TYPES = ["SURFSENSE_DOCS"] as const;
diff --git a/surfsense_web/components/documents/DocumentNode.tsx b/surfsense_web/components/documents/DocumentNode.tsx
index a562703e8..79cf2233b 100644
--- a/surfsense_web/components/documents/DocumentNode.tsx
+++ b/surfsense_web/components/documents/DocumentNode.tsx
@@ -40,6 +40,8 @@ import type { DocumentTypeEnum } from "@/contracts/types/document.types";
 import { cn } from "@/lib/utils";
 import { DND_TYPES } from "./FolderNode";
 
+const EDITABLE_DOCUMENT_TYPES = new Set(["FILE", "NOTE"]);
+
 export interface DocumentNodeDoc {
 	id: number;
 	title: string;
@@ -78,7 +80,9 @@ export const DocumentNode = React.memo(function DocumentNode({
 	const statusState = doc.status?.state ?? "ready";
 	const isSelectable = statusState !== "pending" && statusState !== "processing";
 	const isEditable =
-		doc.document_type === "NOTE" && statusState !== "pending" && statusState !== "processing";
+		EDITABLE_DOCUMENT_TYPES.has(doc.document_type) &&
+		statusState !== "pending" &&
+		statusState !== "processing";
 
 	const handleCheckChange = useCallback(() => {
 		if (isSelectable) {
diff --git a/surfsense_web/components/editor-panel/editor-panel.tsx b/surfsense_web/components/editor-panel/editor-panel.tsx
index f2f66eb48..aff1367b0 100644
--- a/surfsense_web/components/editor-panel/editor-panel.tsx
+++ b/surfsense_web/components/editor-panel/editor-panel.tsx
@@ -5,6 +5,7 @@ import { AlertCircle, XIcon } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { closeEditorPanelAtom, editorPanelAtom } from "@/atoms/editor/editor-panel.atom";
+import { MarkdownViewer } from "@/components/markdown-viewer";
 import { PlateEditor } from "@/components/editor/plate-editor";
 import { Button } from "@/components/ui/button";
 import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
@@ -18,6 +19,8 @@ interface EditorContent {
 	source_markdown: string;
 }
 
+const EDITABLE_DOCUMENT_TYPES = new Set(["FILE", "NOTE"]);
+
 function EditorPanelSkeleton() {
 	return (
 		<div className="space-y-6 p-6">
@@ -165,12 +168,16 @@ export function EditorPanelContent({
 		}
 	}, [documentId, searchSpaceId]);
 
+	const isEditableType = editorDoc
+		? EDITABLE_DOCUMENT_TYPES.has(editorDoc.document_type ?? "")
+		: false;
+
 	return (
 		<>
 			<div className="flex items-center justify-between px-4 py-2 shrink-0 border-b">
 				<div className="flex-1 min-w-0">
 					<h2 className="text-sm font-semibold truncate">{displayTitle}</h2>
-					{editedMarkdown !== null && (
+					{isEditableType && editedMarkdown !== null && (
 						<p className="text-[10px] text-muted-foreground">Unsaved changes</p>
 					)}
 				</div>
@@ -193,7 +200,7 @@ export function EditorPanelContent({
 							<p className="text-sm text-red-500 mt-1">{error || "An unknown error occurred"}</p>
 						</div>
 					</div>
-				) : (
+				) : isEditableType ? (
 					<PlateEditor
 						key={documentId}
 						preset="full"
@@ -208,6 +215,10 @@ export function EditorPanelContent({
 						defaultEditing={true}
 						className="[&_[role=toolbar]]:!bg-sidebar"
 					/>
+				) : (
+					<div className="h-full overflow-y-auto px-5 py-4">
+						<MarkdownViewer content={editorDoc.source_markdown} />
+					</div>
 				)}
 			</div>
 		</>
diff --git a/surfsense_web/components/layout/ui/tabs/DocumentTabContent.tsx b/surfsense_web/components/layout/ui/tabs/DocumentTabContent.tsx
index 7cec16bfa..ac279cd4d 100644
--- a/surfsense_web/components/layout/ui/tabs/DocumentTabContent.tsx
+++ b/surfsense_web/components/layout/ui/tabs/DocumentTabContent.tsx
@@ -41,6 +41,8 @@ interface DocumentTabContentProps {
 	title?: string;
 }
 
+const EDITABLE_DOCUMENT_TYPES = new Set(["FILE", "NOTE"]);
+
 export function DocumentTabContent({ documentId, searchSpaceId, title }: DocumentTabContentProps) {
 	const [doc, setDoc] = useState<DocumentContent | null>(null);
 	const [isLoading, setIsLoading] = useState(true);
@@ -171,6 +173,8 @@ export function DocumentTabContent({ documentId, searchSpaceId, title }: Documen
 		);
 	}
 
+	const isEditable = EDITABLE_DOCUMENT_TYPES.has(doc.document_type ?? "");
+
 	if (isEditing) {
 		return (
 			<div className="flex flex-col h-full overflow-hidden">
@@ -218,7 +222,7 @@ export function DocumentTabContent({ documentId, searchSpaceId, title }: Documen
 				<h1 className="text-base font-semibold truncate flex-1 min-w-0">
 					{doc.title || title || "Untitled"}
 				</h1>
-				{doc.document_type === "NOTE" && (
+				{isEditable && (
 					<Button
 						variant="outline"
 						size="sm"

From 73016b4e82202d8393fc9f933477b1a7922cb578 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 23:01:41 +0530
Subject: [PATCH 17/24] refactor: enhance TabBar component with active tab
 highlighting and responsive design adjustments for improved user experience

---
 surfsense_web/components/layout/ui/tabs/TabBar.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/surfsense_web/components/layout/ui/tabs/TabBar.tsx b/surfsense_web/components/layout/ui/tabs/TabBar.tsx
index dc346b6cb..c38b84df9 100644
--- a/surfsense_web/components/layout/ui/tabs/TabBar.tsx
+++ b/surfsense_web/components/layout/ui/tabs/TabBar.tsx
@@ -58,7 +58,7 @@ export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
 	if (tabs.length <= 1) return null;
 
 	return (
-		<div className={cn("flex h-12 items-stretch shrink-0 border-b bg-main-panel", className)}>
+		<div className={cn("flex h-12 items-stretch shrink-0 border-b border-border/35 bg-main-panel", className)}>
 			<div
 				ref={scrollRef}
 				className="flex h-full items-stretch flex-1 overflow-x-auto overflow-y-hidden scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
@@ -73,13 +73,12 @@ export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
 							data-tab-id={tab.id}
 							onClick={() => handleTabClick(tab)}
 							className={cn(
-								"group relative flex h-full w-[170px] items-center self-stretch px-3 min-w-0 overflow-hidden text-sm font-medium border-r transition-colors shrink-0",
+								"group relative flex h-full w-[170px] items-center self-stretch px-3 min-w-0 overflow-hidden text-sm font-medium border-r border-border/35 transition-colors shrink-0",
 								isActive
-									? "bg-muted/40 text-foreground"
+									? "bg-muted/50 text-foreground"
 									: "bg-transparent text-muted-foreground hover:bg-muted/25 hover:text-foreground"
 							)}
 						>
-							{isActive && <span className="absolute bottom-0 left-0 right-0 h-[2px] bg-primary" />}
 							<span className="block min-w-0 flex-1 truncate text-left transition-[padding-right] duration-150 group-hover:pr-5 group-focus-within:pr-5">
 								{tab.title}
 							</span>
@@ -97,8 +96,8 @@ export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
 								className={cn(
 									"absolute right-2 top-1/2 -translate-y-1/2 shrink-0 rounded-sm p-0.5 transition-colors",
 									isActive
-										? "opacity-0 group-hover:opacity-70 group-focus-within:opacity-70 hover:opacity-100 hover:bg-muted"
-										: "opacity-0 group-hover:opacity-60 group-focus-within:opacity-60 hover:opacity-100! hover:bg-muted"
+										? "opacity-0 group-hover:opacity-70 group-focus-within:opacity-70 hover:opacity-100"
+										: "opacity-0 group-hover:opacity-60 group-focus-within:opacity-60 hover:opacity-100!"
 								)}
 							>
 								<X className="size-3" />

From 0e3f5d804c2aed45765c6e8c098f010d157365e8 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 29 Mar 2026 23:05:11 +0530
Subject: [PATCH 18/24] refactor: add OneDrive support to connector icons and
 types for enhanced integration

---
 surfsense_web/contracts/enums/toolIcons.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/surfsense_web/contracts/enums/toolIcons.tsx b/surfsense_web/contracts/enums/toolIcons.tsx
index 9c4512c2a..b90adf780 100644
--- a/surfsense_web/contracts/enums/toolIcons.tsx
+++ b/surfsense_web/contracts/enums/toolIcons.tsx
@@ -31,6 +31,7 @@ export const CONNECTOR_TOOL_ICON_PATHS: Record<string, { src: string; alt: strin
 	gmail: { src: "/connectors/google-gmail.svg", alt: "Gmail" },
 	google_calendar: { src: "/connectors/google-calendar.svg", alt: "Google Calendar" },
 	google_drive: { src: "/connectors/google-drive.svg", alt: "Google Drive" },
+	onedrive: { src: "/connectors/onedrive.svg", alt: "OneDrive" },
 	notion: { src: "/connectors/notion.svg", alt: "Notion" },
 	linear: { src: "/connectors/linear.svg", alt: "Linear" },
 	jira: { src: "/connectors/jira.svg", alt: "Jira" },
@@ -41,6 +42,7 @@ export const CONNECTOR_ICON_TO_TYPES: Record<string, string[]> = {
 	gmail: ["GOOGLE_GMAIL_CONNECTOR", "COMPOSIO_GMAIL_CONNECTOR"],
 	google_calendar: ["GOOGLE_CALENDAR_CONNECTOR", "COMPOSIO_GOOGLE_CALENDAR_CONNECTOR"],
 	google_drive: ["GOOGLE_DRIVE_CONNECTOR", "COMPOSIO_GOOGLE_DRIVE_CONNECTOR"],
+	onedrive: ["ONEDRIVE_CONNECTOR"],
 	notion: ["NOTION_CONNECTOR"],
 	linear: ["LINEAR_CONNECTOR"],
 	jira: ["JIRA_CONNECTOR"],

From 9eab427b56b074a979fee65458ae1f8cd659eb35 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 30 Mar 2026 01:38:00 +0530
Subject: [PATCH 19/24] feat: introduce citation components from tool-ui with
 hover popover functionality and schema validation for enhanced citation
 management

---
 .../components/tool-ui/citation/_adapter.tsx  |   8 +
 .../tool-ui/citation/citation-list.tsx        | 463 ++++++++++++++++++
 .../components/tool-ui/citation/citation.tsx  | 261 ++++++++++
 .../components/tool-ui/citation/index.ts      |   9 +
 .../components/tool-ui/citation/schema.ts     |  52 ++
 .../components/tool-ui/shared/contract.ts     |  19 +
 .../tool-ui/shared/media/aspect-ratio.ts      |  27 +
 .../tool-ui/shared/media/format-utils.ts      |  30 ++
 .../components/tool-ui/shared/media/index.ts  |  19 +
 .../tool-ui/shared/media/overlay-gradient.ts  |  19 +
 .../tool-ui/shared/media/safe-navigation.ts   |  23 +
 .../tool-ui/shared/media/sanitize-href.ts     |  28 ++
 .../components/tool-ui/shared/parse.ts        |  51 ++
 .../components/tool-ui/shared/schema.ts       | 159 ++++++
 14 files changed, 1168 insertions(+)
 create mode 100644 surfsense_web/components/tool-ui/citation/_adapter.tsx
 create mode 100644 surfsense_web/components/tool-ui/citation/citation-list.tsx
 create mode 100644 surfsense_web/components/tool-ui/citation/citation.tsx
 create mode 100644 surfsense_web/components/tool-ui/citation/index.ts
 create mode 100644 surfsense_web/components/tool-ui/citation/schema.ts
 create mode 100644 surfsense_web/components/tool-ui/shared/contract.ts
 create mode 100644 surfsense_web/components/tool-ui/shared/media/aspect-ratio.ts
 create mode 100644 surfsense_web/components/tool-ui/shared/media/format-utils.ts
 create mode 100644 surfsense_web/components/tool-ui/shared/media/index.ts
 create mode 100644 surfsense_web/components/tool-ui/shared/media/overlay-gradient.ts
 create mode 100644 surfsense_web/components/tool-ui/shared/media/safe-navigation.ts
 create mode 100644 surfsense_web/components/tool-ui/shared/media/sanitize-href.ts
 create mode 100644 surfsense_web/components/tool-ui/shared/parse.ts
 create mode 100644 surfsense_web/components/tool-ui/shared/schema.ts

diff --git a/surfsense_web/components/tool-ui/citation/_adapter.tsx b/surfsense_web/components/tool-ui/citation/_adapter.tsx
new file mode 100644
index 000000000..06ee62f6f
--- /dev/null
+++ b/surfsense_web/components/tool-ui/citation/_adapter.tsx
@@ -0,0 +1,8 @@
+"use client";
+
+export { cn } from "@/lib/utils";
+export {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
diff --git a/surfsense_web/components/tool-ui/citation/citation-list.tsx b/surfsense_web/components/tool-ui/citation/citation-list.tsx
new file mode 100644
index 000000000..34b995aae
--- /dev/null
+++ b/surfsense_web/components/tool-ui/citation/citation-list.tsx
@@ -0,0 +1,463 @@
+"use client";
+
+import * as React from "react";
+import type { LucideIcon } from "lucide-react";
+import {
+  FileText,
+  Globe,
+  Code2,
+  Newspaper,
+  Database,
+  File,
+  ExternalLink,
+} from "lucide-react";
+import { cn, Popover, PopoverContent, PopoverTrigger } from "./_adapter";
+import { Citation } from "./citation";
+import type {
+  SerializableCitation,
+  CitationType,
+  CitationVariant,
+} from "./schema";
+import {
+  openSafeNavigationHref,
+  resolveSafeNavigationHref,
+} from "../shared/media";
+
+const TYPE_ICONS: Record<CitationType, LucideIcon> = {
+  webpage: Globe,
+  document: FileText,
+  article: Newspaper,
+  api: Database,
+  code: Code2,
+  other: File,
+};
+
+function useHoverPopover(delay = 100) {
+  const [open, setOpen] = React.useState(false);
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  const handleMouseEnter = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setOpen(true), delay);
+  }, [delay]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setOpen(false), delay);
+  }, [delay]);
+
+  const handleFocus = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setOpen(true);
+  }, []);
+
+  const handleBlur = React.useCallback(
+    (e: React.FocusEvent) => {
+      const relatedTarget = e.relatedTarget as HTMLElement | null;
+      if (containerRef.current?.contains(relatedTarget)) {
+        return;
+      }
+      if (relatedTarget?.closest("[data-radix-popper-content-wrapper]")) {
+        return;
+      }
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setOpen(false), delay);
+    },
+    [delay],
+  );
+
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return {
+    open,
+    setOpen,
+    containerRef,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleFocus,
+    handleBlur,
+  };
+}
+
+export interface CitationListProps {
+  id: string;
+  citations: SerializableCitation[];
+  variant?: CitationVariant;
+  maxVisible?: number;
+  className?: string;
+  onNavigate?: (href: string, citation: SerializableCitation) => void;
+}
+
+export function CitationList(props: CitationListProps) {
+  const {
+    id,
+    citations,
+    variant = "default",
+    maxVisible,
+    className,
+    onNavigate,
+  } = props;
+
+  const shouldTruncate =
+    maxVisible !== undefined && citations.length > maxVisible;
+  const visibleCitations = shouldTruncate
+    ? citations.slice(0, maxVisible)
+    : citations;
+  const overflowCitations = shouldTruncate ? citations.slice(maxVisible) : [];
+  const overflowCount = overflowCitations.length;
+
+  const wrapperClass =
+    variant === "inline"
+      ? "flex flex-wrap items-center gap-1.5"
+      : "flex flex-col gap-2";
+
+  // Stacked variant: overlapping favicons with popover
+  if (variant === "stacked") {
+    return (
+      <StackedCitations
+        id={id}
+        citations={citations}
+        className={className}
+        onNavigate={onNavigate}
+      />
+    );
+  }
+
+  if (variant === "default") {
+    return (
+      <div
+        className={cn("isolate flex flex-col gap-4", className)}
+        data-tool-ui-id={id}
+        data-slot="citation-list"
+      >
+        {visibleCitations.map((citation) => (
+          <Citation
+            key={citation.id}
+            {...citation}
+            variant="default"
+            onNavigate={onNavigate}
+          />
+        ))}
+        {shouldTruncate && (
+          <OverflowIndicator
+            citations={overflowCitations}
+            count={overflowCount}
+            variant="default"
+            onNavigate={onNavigate}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn("isolate", wrapperClass, className)}
+      data-tool-ui-id={id}
+      data-slot="citation-list"
+    >
+      {visibleCitations.map((citation) => (
+        <Citation
+          key={citation.id}
+          {...citation}
+          variant={variant}
+          onNavigate={onNavigate}
+        />
+      ))}
+      {shouldTruncate && (
+        <OverflowIndicator
+          citations={overflowCitations}
+          count={overflowCount}
+          variant={variant}
+          onNavigate={onNavigate}
+        />
+      )}
+    </div>
+  );
+}
+
+interface OverflowIndicatorProps {
+  citations: SerializableCitation[];
+  count: number;
+  variant: CitationVariant;
+  onNavigate?: (href: string, citation: SerializableCitation) => void;
+}
+
+function OverflowIndicator({
+  citations,
+  count,
+  variant,
+  onNavigate,
+}: OverflowIndicatorProps) {
+  const { open, handleMouseEnter, handleMouseLeave } = useHoverPopover();
+
+  const handleClick = (citation: SerializableCitation) => {
+    const href = resolveSafeNavigationHref(citation.href);
+    if (!href) return;
+    if (onNavigate) {
+      onNavigate(href, citation);
+    } else {
+      openSafeNavigationHref(href);
+    }
+  };
+
+  const popoverContent = (
+    <div className="flex max-h-72 flex-col overflow-y-auto">
+      {citations.map((citation) => (
+        <OverflowItem
+          key={citation.id}
+          citation={citation}
+          onClick={() => handleClick(citation)}
+        />
+      ))}
+    </div>
+  );
+
+  if (variant === "inline") {
+    return (
+      <Popover open={open}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            className={cn(
+              "inline-flex items-center gap-1 rounded-md px-2 py-1",
+              "bg-muted/60 text-sm tabular-nums",
+              "transition-colors duration-150",
+              "hover:bg-muted",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+            )}
+          >
+            <span className="text-muted-foreground">+{count} more</span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          side="top"
+          align="start"
+          className="w-80 p-1"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          {popoverContent}
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  // Default variant
+  return (
+    <Popover open={open}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          className={cn(
+            "flex items-center justify-center rounded-xl px-4 py-3",
+            "border-border bg-card border border-dashed",
+            "transition-colors duration-150",
+            "hover:border-foreground/25 hover:bg-muted/50",
+            "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+          )}
+        >
+          <span className="text-muted-foreground text-sm tabular-nums">
+            +{count} more sources
+          </span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        side="bottom"
+        align="start"
+        className="w-80 p-1"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        {popoverContent}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface OverflowItemProps {
+  citation: SerializableCitation;
+  onClick: () => void;
+}
+
+function OverflowItem({ citation, onClick }: OverflowItemProps) {
+  const TypeIcon = TYPE_ICONS[citation.type ?? "webpage"] ?? Globe;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="group hover:bg-muted focus-visible:bg-muted flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left transition-colors focus-visible:outline-none"
+    >
+      {citation.favicon ? (
+        // biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain — next/image requires remotePatterns config
+        <img
+          src={citation.favicon}
+          alt=""
+          aria-hidden="true"
+          width={16}
+          height={16}
+          className="bg-muted size-4 shrink-0 rounded object-cover"
+        />
+      ) : (
+        <TypeIcon
+          className="text-muted-foreground size-4 shrink-0"
+          aria-hidden="true"
+        />
+      )}
+      <div className="min-w-0 flex-1">
+        <p className="group-hover:decoration-foreground/30 truncate text-sm font-medium group-hover:underline group-hover:underline-offset-2">
+          {citation.title}
+        </p>
+        <p className="text-muted-foreground truncate text-xs">
+          {citation.domain}
+        </p>
+      </div>
+      <ExternalLink className="text-muted-foreground mt-0.5 size-3.5 shrink-0 self-start opacity-0 transition-opacity group-hover:opacity-100" />
+    </button>
+  );
+}
+
+interface StackedCitationsProps {
+  id: string;
+  citations: SerializableCitation[];
+  className?: string;
+  onNavigate?: (href: string, citation: SerializableCitation) => void;
+}
+
+function StackedCitations({
+  id,
+  citations,
+  className,
+  onNavigate,
+}: StackedCitationsProps) {
+  const {
+    open,
+    setOpen,
+    containerRef,
+    handleMouseEnter,
+    handleMouseLeave,
+    handleBlur,
+  } = useHoverPopover();
+  const maxIcons = 4;
+  const visibleCitations = citations.slice(0, maxIcons);
+  const remainingCount = Math.max(0, citations.length - maxIcons);
+
+  const handleClick = (citation: SerializableCitation) => {
+    const href = resolveSafeNavigationHref(citation.href);
+    if (!href) return;
+    if (onNavigate) {
+      onNavigate(href, citation);
+    } else {
+      openSafeNavigationHref(href);
+    }
+  };
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: blur boundary for popover focus management
+    <div ref={containerRef} onBlur={handleBlur} className="inline-flex">
+      <Popover open={open}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            data-tool-ui-id={id}
+            data-slot="citation-list"
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+              }
+            }}
+            className={cn(
+              "isolate inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2",
+              "bg-muted/40 outline-none",
+              "transition-colors duration-150",
+              "hover:bg-muted/70",
+              "focus-visible:ring-ring focus-visible:ring-2",
+              className,
+            )}
+          >
+            <div className="flex items-center">
+              {visibleCitations.map((citation, index) => {
+                const TypeIcon =
+                  TYPE_ICONS[citation.type ?? "webpage"] ?? Globe;
+                return (
+                  <div
+                    key={citation.id}
+                    className={cn(
+                      "border-border bg-background dark:border-foreground/20 relative flex size-6 items-center justify-center rounded-full border shadow-xs",
+                      index > 0 && "-ml-2",
+                    )}
+                    style={{ zIndex: maxIcons - index }}
+                  >
+                    {citation.favicon ? (
+                      // biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain — next/image requires remotePatterns config
+                      <img
+                        src={citation.favicon}
+                        alt=""
+                        aria-hidden="true"
+                        width={18}
+                        height={18}
+                        className="size-4.5 rounded-full object-cover"
+                      />
+                    ) : (
+                      <TypeIcon
+                        className="text-muted-foreground size-3"
+                        aria-hidden="true"
+                      />
+                    )}
+                  </div>
+                );
+              })}
+              {remainingCount > 0 && (
+                <div
+                  className="border-border bg-background dark:border-foreground/20 relative -ml-2 flex size-6 items-center justify-center rounded-full border shadow-xs"
+                  style={{ zIndex: 0 }}
+                >
+                  <span className="text-muted-foreground text-[10px] font-medium tracking-tight">
+                    •••
+                  </span>
+                </div>
+              )}
+            </div>
+            <span className="text-muted-foreground text-sm tabular-nums">
+              {citations.length} source{citations.length !== 1 && "s"}
+            </span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          side="bottom"
+          align="start"
+          className="w-80 p-1"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onBlur={handleBlur}
+          onEscapeKeyDown={() => setOpen(false)}
+        >
+          <div className="flex max-h-72 flex-col overflow-y-auto">
+            {citations.map((citation) => (
+              <OverflowItem
+                key={citation.id}
+                citation={citation}
+                onClick={() => handleClick(citation)}
+              />
+            ))}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
diff --git a/surfsense_web/components/tool-ui/citation/citation.tsx b/surfsense_web/components/tool-ui/citation/citation.tsx
new file mode 100644
index 000000000..dcecb7fa3
--- /dev/null
+++ b/surfsense_web/components/tool-ui/citation/citation.tsx
@@ -0,0 +1,261 @@
+"use client";
+
+import * as React from "react";
+import type { LucideIcon } from "lucide-react";
+import {
+  FileText,
+  Globe,
+  Code2,
+  Newspaper,
+  Database,
+  File,
+  ExternalLink,
+} from "lucide-react";
+import { cn, Popover, PopoverContent, PopoverTrigger } from "./_adapter";
+
+import { openSafeNavigationHref, sanitizeHref } from "../shared/media";
+import type {
+  SerializableCitation,
+  CitationType,
+  CitationVariant,
+} from "./schema";
+
+const FALLBACK_LOCALE = "en-US";
+
+const TYPE_ICONS: Record<CitationType, LucideIcon> = {
+  webpage: Globe,
+  document: FileText,
+  article: Newspaper,
+  api: Database,
+  code: Code2,
+  other: File,
+};
+
+function extractDomain(url: string): string | undefined {
+  try {
+    const urlObj = new URL(url);
+    return urlObj.hostname.replace(/^www\./, "");
+  } catch {
+    return undefined;
+  }
+}
+
+function formatDate(isoString: string, locale: string): string {
+  try {
+    const date = new Date(isoString);
+    return date.toLocaleDateString(locale, {
+      year: "numeric",
+      month: "short",
+    });
+  } catch {
+    return isoString;
+  }
+}
+
+function useHoverPopover(delay = 100) {
+  const [open, setOpen] = React.useState(false);
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleMouseEnter = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setOpen(true), delay);
+  }, [delay]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setOpen(false), delay);
+  }, [delay]);
+
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return { open, setOpen, handleMouseEnter, handleMouseLeave };
+}
+
+export interface CitationProps extends SerializableCitation {
+  variant?: CitationVariant;
+  className?: string;
+  onNavigate?: (href: string, citation: SerializableCitation) => void;
+}
+
+export function Citation(props: CitationProps) {
+  const { variant = "default", className, onNavigate, ...serializable } = props;
+
+  const {
+    id,
+    href: rawHref,
+    title,
+    snippet,
+    domain: providedDomain,
+    favicon,
+    author,
+    publishedAt,
+    type = "webpage",
+    locale: providedLocale,
+  } = serializable;
+
+  const locale = providedLocale ?? FALLBACK_LOCALE;
+  const sanitizedHref = sanitizeHref(rawHref);
+  const domain = providedDomain ?? extractDomain(rawHref);
+
+  const citationData: SerializableCitation = {
+    ...serializable,
+    href: sanitizedHref ?? rawHref,
+    domain,
+    locale,
+  };
+
+  const TypeIcon = TYPE_ICONS[type] ?? Globe;
+
+  const handleClick = () => {
+    if (!sanitizedHref) return;
+    if (onNavigate) {
+      onNavigate(sanitizedHref, citationData);
+    } else {
+      openSafeNavigationHref(sanitizedHref);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (sanitizedHref && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  const iconElement = favicon ? (
+    // biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain — next/image requires remotePatterns config
+    <img
+      src={favicon}
+      alt=""
+      aria-hidden="true"
+      width={14}
+      height={14}
+      className="bg-muted size-3.5 shrink-0 rounded object-cover"
+    />
+  ) : (
+    <TypeIcon className="size-3.5 shrink-0 opacity-60" aria-hidden="true" />
+  );
+
+  const { open, handleMouseEnter, handleMouseLeave } = useHoverPopover();
+
+  // Inline variant: compact chip with hover popover
+  if (variant === "inline") {
+    return (
+      <Popover open={open}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            aria-label={title}
+            data-tool-ui-id={id}
+            data-slot="citation"
+            onClick={handleClick}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            className={cn(
+              "inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1",
+              "bg-muted/60 text-sm outline-none",
+              "transition-colors duration-150",
+              "hover:bg-muted",
+              "focus-visible:ring-ring focus-visible:ring-2",
+              className,
+            )}
+          >
+            {iconElement}
+            <span className="text-muted-foreground">{domain}</span>
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          side="top"
+          align="start"
+          className="w-72 cursor-pointer p-0"
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onCloseAutoFocus={(e) => e.preventDefault()}
+          onClick={handleClick}
+        >
+          <div className="hover:bg-muted/50 flex flex-col gap-2 p-3 transition-colors">
+            <div className="flex items-start gap-2">
+              {iconElement}
+              <span className="text-muted-foreground text-xs">{domain}</span>
+            </div>
+            <p className="text-sm leading-snug font-medium">{title}</p>
+            {snippet && (
+              <p className="text-muted-foreground line-clamp-2 text-xs leading-relaxed">
+                {snippet}
+              </p>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  }
+
+  // Default variant: full card
+  return (
+    <article
+      className={cn("relative w-full max-w-md min-w-72", className)}
+      lang={locale}
+      data-tool-ui-id={id}
+      data-slot="citation"
+    >
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: div receives role="link" conditionally when href is present */}
+      <div
+        className={cn(
+          "group @container relative isolate flex w-full min-w-0 flex-col overflow-hidden rounded-xl",
+          "border-border bg-card border text-sm shadow-xs",
+          "transition-colors duration-150",
+          sanitizedHref && [
+            "cursor-pointer",
+            "hover:border-foreground/25",
+            "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+          ],
+        )}
+        onClick={sanitizedHref ? handleClick : undefined}
+        role={sanitizedHref ? "link" : undefined}
+        tabIndex={sanitizedHref ? 0 : undefined}
+        onKeyDown={sanitizedHref ? handleKeyDown : undefined}
+      >
+        <div className="flex flex-col gap-2 p-4">
+          <div className="text-muted-foreground flex min-w-0 items-center justify-between gap-1.5 text-xs">
+            <div className="flex min-w-0 items-center gap-1.5">
+              {iconElement}
+              <span className="truncate font-medium">{domain}</span>
+              {(author || publishedAt) && (
+                <span className="opacity-70">
+                  <span className="opacity-60"> — </span>
+                  {author}
+                  {author && publishedAt && ", "}
+                  {publishedAt && (
+                    <time dateTime={publishedAt} className="tabular-nums">
+                      {formatDate(publishedAt, locale)}
+                    </time>
+                  )}
+                </span>
+              )}
+            </div>
+            {sanitizedHref && (
+              <ExternalLink className="size-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
+            )}
+          </div>
+
+          <h3 className="text-foreground text-[15px] leading-snug font-medium text-pretty">
+            <span className="group-hover:decoration-foreground/30 line-clamp-2 group-hover:underline group-hover:underline-offset-2">
+              {title}
+            </span>
+          </h3>
+
+          {snippet && (
+            <p className="text-muted-foreground text-[13px] leading-relaxed text-pretty">
+              <span className="line-clamp-3">{snippet}</span>
+            </p>
+          )}
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/surfsense_web/components/tool-ui/citation/index.ts b/surfsense_web/components/tool-ui/citation/index.ts
new file mode 100644
index 000000000..11df62e89
--- /dev/null
+++ b/surfsense_web/components/tool-ui/citation/index.ts
@@ -0,0 +1,9 @@
+export { Citation } from "./citation";
+export type { CitationProps } from "./citation";
+export { CitationList } from "./citation-list";
+export type { CitationListProps } from "./citation-list";
+export type {
+  SerializableCitation,
+  CitationType,
+  CitationVariant,
+} from "./schema";
diff --git a/surfsense_web/components/tool-ui/citation/schema.ts b/surfsense_web/components/tool-ui/citation/schema.ts
new file mode 100644
index 000000000..ffe8c9ce5
--- /dev/null
+++ b/surfsense_web/components/tool-ui/citation/schema.ts
@@ -0,0 +1,52 @@
+import { z } from "zod";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  ToolUIIdSchema,
+  ToolUIReceiptSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+export const CitationTypeSchema = z.enum([
+  "webpage",
+  "document",
+  "article",
+  "api",
+  "code",
+  "other",
+]);
+
+export type CitationType = z.infer<typeof CitationTypeSchema>;
+
+export const CitationVariantSchema = z.enum(["default", "inline", "stacked"]);
+
+export type CitationVariant = z.infer<typeof CitationVariantSchema>;
+
+export const SerializableCitationSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+  href: z.string().url(),
+  title: z.string(),
+  snippet: z.string().optional(),
+  domain: z.string().optional(),
+  favicon: z.string().url().optional(),
+  author: z.string().optional(),
+  publishedAt: z.string().datetime().optional(),
+  type: CitationTypeSchema.optional(),
+  locale: z.string().optional(),
+});
+
+export type SerializableCitation = z.infer<typeof SerializableCitationSchema>;
+
+const SerializableCitationSchemaContract = defineToolUiContract(
+  "Citation",
+  SerializableCitationSchema,
+);
+
+export const parseSerializableCitation: (
+  input: unknown,
+) => SerializableCitation = SerializableCitationSchemaContract.parse;
+
+export const safeParseSerializableCitation: (
+  input: unknown,
+) => SerializableCitation | null = SerializableCitationSchemaContract.safeParse;
diff --git a/surfsense_web/components/tool-ui/shared/contract.ts b/surfsense_web/components/tool-ui/shared/contract.ts
new file mode 100644
index 000000000..82bc05f18
--- /dev/null
+++ b/surfsense_web/components/tool-ui/shared/contract.ts
@@ -0,0 +1,19 @@
+import { z } from "zod";
+import { parseWithSchema, safeParseWithSchema } from "./parse";
+
+export interface ToolUiContract<T> {
+  schema: z.ZodType<T>;
+  parse: (input: unknown) => T;
+  safeParse: (input: unknown) => T | null;
+}
+
+export function defineToolUiContract<T>(
+  componentName: string,
+  schema: z.ZodType<T>,
+): ToolUiContract<T> {
+  return {
+    schema,
+    parse: (input: unknown) => parseWithSchema(schema, input, componentName),
+    safeParse: (input: unknown) => safeParseWithSchema(schema, input),
+  };
+}
diff --git a/surfsense_web/components/tool-ui/shared/media/aspect-ratio.ts b/surfsense_web/components/tool-ui/shared/media/aspect-ratio.ts
new file mode 100644
index 000000000..21352fd04
--- /dev/null
+++ b/surfsense_web/components/tool-ui/shared/media/aspect-ratio.ts
@@ -0,0 +1,27 @@
+import { z } from "zod";
+
+export const AspectRatioSchema = z
+  .enum(["auto", "1:1", "4:3", "16:9", "9:16"])
+  .default("auto");
+
+export type AspectRatio = z.infer<typeof AspectRatioSchema>;
+
+export const MediaFitSchema = z.enum(["cover", "contain"]).default("cover");
+
+export type MediaFit = z.infer<typeof MediaFitSchema>;
+
+export const RATIO_CLASS_MAP: Record<AspectRatio, string> = {
+  auto: "",
+  "1:1": "aspect-square",
+  "4:3": "aspect-[4/3]",
+  "16:9": "aspect-video",
+  "9:16": "aspect-[9/16]",
+};
+
+export function getRatioClass(ratio: AspectRatio): string {
+  return RATIO_CLASS_MAP[ratio];
+}
+
+export function getFitClass(fit: MediaFit): string {
+  return fit === "cover" ? "object-cover" : "object-contain";
+}
diff --git a/surfsense_web/components/tool-ui/shared/media/format-utils.ts b/surfsense_web/components/tool-ui/shared/media/format-utils.ts
new file mode 100644
index 000000000..b00757cb7
--- /dev/null
+++ b/surfsense_web/components/tool-ui/shared/media/format-utils.ts
@@ -0,0 +1,30 @@
+export function formatDuration(durationMs: number): string {
+  const totalSeconds = Math.round(durationMs / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds
+      .toString()
+      .padStart(2, "0")}`;
+  }
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Format file size in bytes to human-readable string.
+ * @example formatFileSize(1024) => "1 KB"
+ * @example formatFileSize(1536000) => "1.5 MB"
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let size = bytes / 1024;
+  let unit = 0;
+  while (size >= 1024 && unit < units.length - 1) {
+    size /= 1024;
+    unit += 1;
+  }
+  return `${size.toFixed(size >= 10 ? 0 : 1)} ${units[unit]}`;
+}
diff --git a/surfsense_web/components/tool-ui/shared/media/index.ts b/surfsense_web/components/tool-ui/shared/media/index.ts
new file mode 100644
index 000000000..5b655c708
--- /dev/null
+++ b/surfsense_web/components/tool-ui/shared/media/index.ts
@@ -0,0 +1,19 @@
+export {
+  AspectRatioSchema,
+  MediaFitSchema,
+  RATIO_CLASS_MAP,
+  getRatioClass,
+  getFitClass,
+  type AspectRatio,
+  type MediaFit,
+} from "./aspect-ratio";
+
+export { OVERLAY_GRADIENT } from "./overlay-gradient";
+
+export { formatDuration, formatFileSize } from "./format-utils";
+
+export { sanitizeHref } from "./sanitize-href";
+export {
+  resolveSafeNavigationHref,
+  openSafeNavigationHref,
+} from "./safe-navigation";
diff --git a/surfsense_web/components/tool-ui/shared/media/overlay-gradient.ts b/surfsense_web/components/tool-ui/shared/media/overlay-gradient.ts
new file mode 100644
index 000000000..f59aa44f4
--- /dev/null
+++ b/surfsense_web/components/tool-ui/shared/media/overlay-gradient.ts
@@ -0,0 +1,19 @@
+export const OVERLAY_GRADIENT = `linear-gradient(
+  to bottom,
+  hsl(0, 0%, 0%) 0%,
+  hsla(0, 0%, 0%, 0.987) 8.3%,
+  hsla(0, 0%, 0%, 0.951) 16.6%,
+  hsla(0, 0%, 0%, 0.896) 24.6%,
+  hsla(0, 0%, 0%, 0.825) 32.5%,
+  hsla(0, 0%, 0%, 0.741) 40.1%,
+  hsla(0, 0%, 0%, 0.648) 47.6%,
+  hsla(0, 0%, 0%, 0.55) 54.8%,
+  hsla(0, 0%, 0%, 0.45) 61.7%,
+  hsla(0, 0%, 0%, 0.352) 68.3%,
+  hsla(0, 0%, 0%, 0.259) 74.5%,
+  hsla(0, 0%, 0%, 0.175) 80.4%,
+  hsla(0, 0%, 0%, 0.104) 86%,
+  hsla(0, 0%, 0%, 0.049) 91.1%,
+  hsla(0, 0%, 0%, 0.013) 95.8%,
+  hsla(0, 0%, 0%, 0) 100%
+)` as const;
diff --git a/surfsense_web/components/tool-ui/shared/media/safe-navigation.ts b/surfsense_web/components/tool-ui/shared/media/safe-navigation.ts
new file mode 100644
index 000000000..b1f38bf48
--- /dev/null
+++ b/surfsense_web/components/tool-ui/shared/media/safe-navigation.ts
@@ -0,0 +1,23 @@
+import { sanitizeHref } from "./sanitize-href";
+
+export function resolveSafeNavigationHref(
+  ...candidates: Array<string | null | undefined>
+): string | undefined {
+  for (const candidate of candidates) {
+    const safeHref = sanitizeHref(candidate ?? undefined);
+    if (safeHref) {
+      return safeHref;
+    }
+  }
+
+  return undefined;
+}
+
+export function openSafeNavigationHref(href: string | undefined): boolean {
+  if (!href || typeof window === "undefined") {
+    return false;
+  }
+
+  window.open(href, "_blank", "noopener,noreferrer");
+  return true;
+}
diff --git a/surfsense_web/components/tool-ui/shared/media/sanitize-href.ts b/surfsense_web/components/tool-ui/shared/media/sanitize-href.ts
new file mode 100644
index 000000000..de7ced700
--- /dev/null
+++ b/surfsense_web/components/tool-ui/shared/media/sanitize-href.ts
@@ -0,0 +1,28 @@
+export function sanitizeHref(href?: string): string | undefined {
+  if (!href) return undefined;
+  const candidate = href.trim();
+  if (!candidate) return undefined;
+
+  if (
+    candidate.startsWith("/") ||
+    candidate.startsWith("./") ||
+    candidate.startsWith("../") ||
+    candidate.startsWith("?") ||
+    candidate.startsWith("#")
+  ) {
+    if (candidate.startsWith("//")) return undefined;
+    // eslint-disable-next-line no-control-regex -- intentionally matching control characters
+    if (/[\u0000-\u001F\u007F]/.test(candidate)) return undefined;
+    return candidate;
+  }
+
+  try {
+    const url = new URL(candidate);
+    if (url.protocol === "http:" || url.protocol === "https:") {
+      return url.toString();
+    }
+  } catch {
+    return undefined;
+  }
+  return undefined;
+}
diff --git a/surfsense_web/components/tool-ui/shared/parse.ts b/surfsense_web/components/tool-ui/shared/parse.ts
new file mode 100644
index 000000000..7214241a3
--- /dev/null
+++ b/surfsense_web/components/tool-ui/shared/parse.ts
@@ -0,0 +1,51 @@
+import { z } from "zod";
+
+function formatZodPath(path: Array<string | number | symbol>): string {
+  if (path.length === 0) return "root";
+  return path
+    .map((segment) =>
+      typeof segment === "number" ? `[${segment}]` : String(segment),
+    )
+    .join(".");
+}
+
+/**
+ * Format Zod errors into a compact `path: message` string.
+ */
+export function formatZodError(error: z.ZodError): string {
+  const parts = error.issues.map((issue) => {
+    const path = formatZodPath(issue.path);
+    return `${path}: ${issue.message}`;
+  });
+
+  return Array.from(new Set(parts)).join("; ");
+}
+
+/**
+ * Parse unknown input and throw a readable error.
+ */
+export function parseWithSchema<T>(
+  schema: z.ZodType<T>,
+  input: unknown,
+  name: string,
+): T {
+  const res = schema.safeParse(input);
+  if (!res.success) {
+    throw new Error(`Invalid ${name} payload: ${formatZodError(res.error)}`);
+  }
+  return res.data;
+}
+
+/**
+ * Parse unknown input, returning `null` instead of throwing on failure.
+ *
+ * Use this in assistant-ui `render` functions where `args` stream in
+ * incrementally and may be incomplete until the tool call finishes.
+ */
+export function safeParseWithSchema<T>(
+  schema: z.ZodType<T>,
+  input: unknown,
+): T | null {
+  const res = schema.safeParse(input);
+  return res.success ? res.data : null;
+}
diff --git a/surfsense_web/components/tool-ui/shared/schema.ts b/surfsense_web/components/tool-ui/shared/schema.ts
new file mode 100644
index 000000000..b19f4a3b7
--- /dev/null
+++ b/surfsense_web/components/tool-ui/shared/schema.ts
@@ -0,0 +1,159 @@
+import { z } from "zod";
+import type { ReactNode } from "react";
+
+/**
+ * Tool UI conventions:
+ * - Serializable schemas are JSON-safe (no callbacks/ReactNode/`className`).
+ * - Schema: `SerializableXSchema`
+ * - Parser: `parseSerializableX(input: unknown)` (throws on invalid)
+ * - Safe parser: `safeParseSerializableX(input: unknown)` (returns `null` on invalid)
+ * - Actions: `LocalActions` for non-receipt actions and `DecisionActions` for consequential actions
+ * - Root attrs: `data-tool-ui-id` + `data-slot`
+ */
+
+/**
+ * Schema for tool UI identity.
+ *
+ * Every tool UI should have a unique identifier that:
+ * - Is stable across re-renders
+ * - Is meaningful (not auto-generated)
+ * - Is unique within the conversation
+ *
+ * Format recommendation: `{component-type}-{semantic-identifier}`
+ * Examples: "data-table-expenses-q3", "option-list-deploy-target"
+ */
+export const ToolUIIdSchema = z.string().min(1);
+
+export type ToolUIId = z.infer<typeof ToolUIIdSchema>;
+
+/**
+ * Primary role of a Tool UI surface in a chat context.
+ */
+export const ToolUIRoleSchema = z.enum([
+  "information",
+  "decision",
+  "control",
+  "state",
+  "composite",
+]);
+
+export type ToolUIRole = z.infer<typeof ToolUIRoleSchema>;
+
+export const ToolUIReceiptOutcomeSchema = z.enum([
+  "success",
+  "partial",
+  "failed",
+  "cancelled",
+]);
+
+export type ToolUIReceiptOutcome = z.infer<typeof ToolUIReceiptOutcomeSchema>;
+
+/**
+ * Optional receipt metadata: a durable summary of an outcome.
+ */
+export const ToolUIReceiptSchema = z.object({
+  outcome: ToolUIReceiptOutcomeSchema,
+  summary: z.string().min(1),
+  identifiers: z.record(z.string(), z.string()).optional(),
+  at: z.string().datetime(),
+});
+
+export type ToolUIReceipt = z.infer<typeof ToolUIReceiptSchema>;
+
+/**
+ * Base schema for Tool UI payloads (id + optional role/receipt).
+ */
+export const ToolUISurfaceSchema = z.object({
+  id: ToolUIIdSchema,
+  role: ToolUIRoleSchema.optional(),
+  receipt: ToolUIReceiptSchema.optional(),
+});
+
+export type ToolUISurface = z.infer<typeof ToolUISurfaceSchema>;
+
+export const ActionSchema = z.object({
+  id: z.string().min(1),
+  label: z.string().min(1),
+  /**
+   * Canonical narration the assistant can use after this action is taken.
+   *
+   * Example: "I exported the table as CSV." / "I opened the link in a new tab."
+   */
+  sentence: z.string().optional(),
+  confirmLabel: z.string().optional(),
+  variant: z
+    .enum(["default", "destructive", "secondary", "ghost", "outline"])
+    .optional(),
+  icon: z.custom<ReactNode>().optional(),
+  loading: z.boolean().optional(),
+  disabled: z.boolean().optional(),
+  shortcut: z.string().optional(),
+});
+
+export type Action = z.infer<typeof ActionSchema>;
+export type LocalAction = Action;
+export type DecisionAction = Action;
+
+export const DecisionResultSchema = z.object({
+  kind: z.literal("decision"),
+  version: z.literal(1),
+  decisionId: z.string().min(1),
+  actionId: z.string().min(1),
+  actionLabel: z.string().min(1),
+  at: z.string().datetime(),
+  payload: z.record(z.string(), z.unknown()).optional(),
+});
+
+export type DecisionResult<
+  TPayload extends Record<string, unknown> = Record<string, unknown>,
+> = Omit<z.infer<typeof DecisionResultSchema>, "payload"> & {
+  payload?: TPayload;
+};
+
+export function createDecisionResult<
+  TPayload extends Record<string, unknown> = Record<string, unknown>,
+>(args: {
+  decisionId: string;
+  action: { id: string; label: string };
+  payload?: TPayload;
+}): DecisionResult<TPayload> {
+  return {
+    kind: "decision",
+    version: 1,
+    decisionId: args.decisionId,
+    actionId: args.action.id,
+    actionLabel: args.action.label,
+    at: new Date().toISOString(),
+    payload: args.payload,
+  };
+}
+
+export const ActionButtonsPropsSchema = z.object({
+  actions: z.array(ActionSchema).min(1),
+  align: z.enum(["left", "center", "right"]).optional(),
+  confirmTimeout: z.number().positive().optional(),
+  className: z.string().optional(),
+});
+
+export const SerializableActionSchema = ActionSchema.omit({ icon: true });
+export const SerializableActionsSchema = ActionButtonsPropsSchema.extend({
+  actions: z.array(SerializableActionSchema),
+}).omit({ className: true });
+
+export interface ActionsConfig {
+  items: Action[];
+  align?: "left" | "center" | "right";
+  confirmTimeout?: number;
+}
+
+export const SerializableActionsConfigSchema = z.object({
+  items: z.array(SerializableActionSchema).min(1),
+  align: z.enum(["left", "center", "right"]).optional(),
+  confirmTimeout: z.number().positive().optional(),
+});
+
+export type SerializableActionsConfig = z.infer<
+  typeof SerializableActionsConfigSchema
+>;
+
+export type SerializableAction = z.infer<typeof SerializableActionSchema>;

From 74826b371446911b5959dc9214ea22bd2d6682b8 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 30 Mar 2026 01:38:36 +0530
Subject: [PATCH 20/24] feat: enhance web search tool integration with citation
 management and UI enhancements

---
 .../app/tasks/chat/stream_new_chat.py         | 27 ++++++++
 .../new-chat/[[...chat_id]]/page.tsx          |  1 +
 .../assistant-ui/assistant-message.tsx        | 12 ++--
 .../citation-metadata-context.tsx             | 61 +++++++++++++++++++
 .../assistant-ui/inline-citation.tsx          | 25 ++++----
 .../components/public-chat/public-thread.tsx  | 42 +++++++------
 .../components/tool-ui/citation/schema.ts     | 14 -----
 .../components/tool-ui/shared/contract.ts     | 19 ------
 .../tool-ui/shared/media/aspect-ratio.ts      | 27 --------
 .../tool-ui/shared/media/format-utils.ts      | 30 ---------
 .../components/tool-ui/shared/media/index.ts  | 14 -----
 .../tool-ui/shared/media/overlay-gradient.ts  | 19 ------
 .../components/tool-ui/shared/parse.ts        | 51 ----------------
 13 files changed, 133 insertions(+), 209 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/citation-metadata-context.tsx
 delete mode 100644 surfsense_web/components/tool-ui/shared/contract.ts
 delete mode 100644 surfsense_web/components/tool-ui/shared/media/aspect-ratio.ts
 delete mode 100644 surfsense_web/components/tool-ui/shared/media/format-utils.ts
 delete mode 100644 surfsense_web/components/tool-ui/shared/media/overlay-gradient.ts
 delete mode 100644 surfsense_web/components/tool-ui/shared/parse.ts

diff --git a/surfsense_backend/app/tasks/chat/stream_new_chat.py b/surfsense_backend/app/tasks/chat/stream_new_chat.py
index c1ca089d0..9015f7e51 100644
--- a/surfsense_backend/app/tasks/chat/stream_new_chat.py
+++ b/surfsense_backend/app/tasks/chat/stream_new_chat.py
@@ -1075,6 +1075,33 @@ def complete_current_step() -> str | None:
                         "thread_id": thread_id_str,
                     },
                 )
+            elif tool_name == "web_search":
+                xml = tool_output.get("result", str(tool_output)) if isinstance(tool_output, dict) else str(tool_output)
+                citations: dict[str, dict[str, str]] = {}
+                for m in re.finditer(
+                    r"<title><!\[CDATA\[(.*?)\]\]></title>\s*<url><!\[CDATA\[(.*?)\]\]></url>",
+                    xml,
+                ):
+                    title, url = m.group(1).strip(), m.group(2).strip()
+                    if url.startswith("http") and url not in citations:
+                        citations[url] = {"title": title}
+                for m in re.finditer(
+                    r"<chunk\s+id='([^']*)'><!\[CDATA\[([\s\S]*?)\]\]></chunk>",
+                    xml,
+                ):
+                    chunk_url, content = m.group(1).strip(), m.group(2).strip()
+                    if (
+                        chunk_url.startswith("http")
+                        and chunk_url in citations
+                        and content
+                    ):
+                        citations[chunk_url]["snippet"] = (
+                            content[:200] + "…" if len(content) > 200 else content
+                        )
+                yield streaming_service.format_tool_output_available(
+                    tool_call_id,
+                    {"status": "completed", "citations": citations},
+                )
             else:
                 yield streaming_service.format_tool_output_available(
                     tool_call_id,
diff --git a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
index 8fdd9eecb..8c7b16c72 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
@@ -132,6 +132,7 @@ function extractMentionedDocuments(content: unknown): MentionedDocumentInfo[] {
  * Tools that should render custom UI in the chat.
  */
 const TOOLS_WITH_UI = new Set([
+	"web_search",
 	"generate_podcast",
 	"generate_report",
 	"generate_video_presentation",
diff --git a/surfsense_web/components/assistant-ui/assistant-message.tsx b/surfsense_web/components/assistant-ui/assistant-message.tsx
index abd70e3f4..2223ff5dd 100644
--- a/surfsense_web/components/assistant-ui/assistant-message.tsx
+++ b/surfsense_web/components/assistant-ui/assistant-message.tsx
@@ -12,6 +12,7 @@ import type { FC } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { commentsEnabledAtom, targetCommentIdAtom } from "@/atoms/chat/current-thread.atom";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import { CitationMetadataProvider } from "@/components/assistant-ui/citation-metadata-context";
 import { MarkdownText } from "@/components/assistant-ui/markdown-text";
 import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
@@ -78,7 +79,7 @@ export const MessageError: FC = () => {
 
 const AssistantMessageInner: FC = () => {
 	return (
-		<>
+		<CitationMetadataProvider>
 			<div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
 				<MessagePrimitive.Parts
 					components={{
@@ -116,9 +117,10 @@ const AssistantMessageInner: FC = () => {
 								create_confluence_page: CreateConfluencePageToolUI,
 								update_confluence_page: UpdateConfluencePageToolUI,
 								delete_confluence_page: DeleteConfluencePageToolUI,
-								link_preview: () => null,
-								multi_link_preview: () => null,
-								scrape_webpage: () => null,
+							web_search: () => null,
+							link_preview: () => null,
+							multi_link_preview: () => null,
+							scrape_webpage: () => null,
 							},
 							Fallback: ToolFallback,
 						},
@@ -130,7 +132,7 @@ const AssistantMessageInner: FC = () => {
 			<div className="aui-assistant-message-footer mt-1 mb-5 ml-2 flex">
 				<AssistantActionBar />
 			</div>
-		</>
+		</CitationMetadataProvider>
 	);
 };
 
diff --git a/surfsense_web/components/assistant-ui/citation-metadata-context.tsx b/surfsense_web/components/assistant-ui/citation-metadata-context.tsx
new file mode 100644
index 000000000..7502b6951
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/citation-metadata-context.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { useAuiState } from "@assistant-ui/react";
+import { createContext, type FC, type ReactNode, useContext, useMemo } from "react";
+
+export interface CitationMeta {
+	title: string;
+	snippet?: string;
+}
+
+type CitationMetadataMap = ReadonlyMap<string, CitationMeta>;
+
+const CitationMetadataContext = createContext<CitationMetadataMap>(new Map());
+
+interface ToolCallResult {
+	status?: string;
+	citations?: Record<string, { title: string; snippet?: string }>;
+}
+
+interface MessageContent {
+	type: string;
+	toolName?: string;
+	result?: unknown;
+}
+
+export const CitationMetadataProvider: FC<{ children: ReactNode }> = ({ children }) => {
+	const content = useAuiState(({ message }) => (message as { content?: MessageContent[] })?.content);
+
+	const metadataMap = useMemo<CitationMetadataMap>(() => {
+		if (!content || !Array.isArray(content)) return new Map();
+
+		const merged = new Map<string, CitationMeta>();
+
+		for (const part of content) {
+			if (part.type !== "tool-call" || part.toolName !== "web_search" || !part.result) {
+				continue;
+			}
+
+			const result = part.result as ToolCallResult;
+			const citations = result.citations;
+			if (!citations || typeof citations !== "object") continue;
+
+			for (const [url, meta] of Object.entries(citations)) {
+				if (url.startsWith("http") && meta.title && !merged.has(url)) {
+					merged.set(url, { title: meta.title, snippet: meta.snippet });
+				}
+			}
+		}
+
+		return merged;
+	}, [content]);
+
+	return (
+		<CitationMetadataContext.Provider value={metadataMap}>{children}</CitationMetadataContext.Provider>
+	);
+};
+
+export function useCitationMetadata(url: string): CitationMeta | undefined {
+	const map = useContext(CitationMetadataContext);
+	return map.get(url);
+}
diff --git a/surfsense_web/components/assistant-ui/inline-citation.tsx b/surfsense_web/components/assistant-ui/inline-citation.tsx
index 1c9fa6ba4..52c679c23 100644
--- a/surfsense_web/components/assistant-ui/inline-citation.tsx
+++ b/surfsense_web/components/assistant-ui/inline-citation.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { ExternalLink } from "lucide-react";
 import type { FC } from "react";
 import { useState } from "react";
+import { useCitationMetadata } from "@/components/assistant-ui/citation-metadata-context";
 import { SourceDetailPanel } from "@/components/new-chat/source-detail-panel";
+import { Citation } from "@/components/tool-ui/citation";
 
 interface InlineCitationProps {
 	chunkId: number;
@@ -55,21 +56,23 @@ interface UrlCitationProps {
 
 /**
  * Inline citation for live web search results (URL-based chunk IDs).
- * Renders a clickable badge showing the source domain that opens the URL in a new tab.
+ * Renders a compact chip with favicon + domain and a hover popover showing the
+ * page title and snippet (extracted deterministically from web_search tool results).
  */
 export const UrlCitation: FC<UrlCitationProps> = ({ url }) => {
 	const domain = extractDomain(url);
+	const meta = useCitationMetadata(url);
 
 	return (
-		<a
+		<Citation
+			id={`url-cite-${url}`}
 			href={url}
-			target="_blank"
-			rel="noopener noreferrer"
-			className="text-[10px] font-bold bg-primary/80 hover:bg-primary text-primary-foreground rounded-full h-4 px-1.5 inline-flex items-center gap-0.5 align-super cursor-pointer transition-colors ml-0.5 no-underline"
-			title={url}
-		>
-			<ExternalLink className="size-2.5 shrink-0" />
-			{domain}
-		</a>
+			title={meta?.title || domain}
+			snippet={meta?.snippet}
+			domain={domain}
+			favicon={`https://www.google.com/s2/favicons?domain=${domain}&sz=32`}
+			variant="inline"
+			type="webpage"
+		/>
 	);
 };
diff --git a/surfsense_web/components/public-chat/public-thread.tsx b/surfsense_web/components/public-chat/public-thread.tsx
index bee0496f6..837350a84 100644
--- a/surfsense_web/components/public-chat/public-thread.tsx
+++ b/surfsense_web/components/public-chat/public-thread.tsx
@@ -10,6 +10,7 @@ import {
 import { CheckIcon, CopyIcon } from "lucide-react";
 import Image from "next/image";
 import { type FC, type ReactNode, useState } from "react";
+import { CitationMetadataProvider } from "@/components/assistant-ui/citation-metadata-context";
 import { MarkdownText } from "@/components/assistant-ui/markdown-text";
 import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
@@ -142,30 +143,33 @@ const PublicAssistantMessage: FC = () => {
 			className="aui-assistant-message-root group fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150"
 			data-role="assistant"
 		>
-			<div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
-				<MessagePrimitive.Parts
-					components={{
-						Text: MarkdownText,
-						tools: {
-							by_name: {
-								generate_podcast: GeneratePodcastToolUI,
-								generate_report: GenerateReportToolUI,
-								generate_video_presentation: GenerateVideoPresentationToolUI,
-								display_image: GenerateImageToolUI,
-								generate_image: GenerateImageToolUI,
+			<CitationMetadataProvider>
+				<div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
+					<MessagePrimitive.Parts
+						components={{
+							Text: MarkdownText,
+							tools: {
+								by_name: {
+									generate_podcast: GeneratePodcastToolUI,
+									generate_report: GenerateReportToolUI,
+									generate_video_presentation: GenerateVideoPresentationToolUI,
+									display_image: GenerateImageToolUI,
+									generate_image: GenerateImageToolUI,
+								web_search: () => null,
 								link_preview: () => null,
 								multi_link_preview: () => null,
 								scrape_webpage: () => null,
+								},
+								Fallback: ToolFallback,
 							},
-							Fallback: ToolFallback,
-						},
-					}}
-				/>
-			</div>
+						}}
+					/>
+				</div>
 
-			<div className="aui-assistant-message-footer mt-1 mb-5 ml-2 flex">
-				<PublicAssistantActionBar />
-			</div>
+				<div className="aui-assistant-message-footer mt-1 mb-5 ml-2 flex">
+					<PublicAssistantActionBar />
+				</div>
+			</CitationMetadataProvider>
 		</MessagePrimitive.Root>
 	);
 };
diff --git a/surfsense_web/components/tool-ui/citation/schema.ts b/surfsense_web/components/tool-ui/citation/schema.ts
index ffe8c9ce5..d6db58018 100644
--- a/surfsense_web/components/tool-ui/citation/schema.ts
+++ b/surfsense_web/components/tool-ui/citation/schema.ts
@@ -1,5 +1,4 @@
 import { z } from "zod";
-import { defineToolUiContract } from "../shared/contract";
 import {
   ToolUIIdSchema,
   ToolUIReceiptSchema,
@@ -37,16 +36,3 @@ export const SerializableCitationSchema = z.object({
 });
 
 export type SerializableCitation = z.infer<typeof SerializableCitationSchema>;
-
-const SerializableCitationSchemaContract = defineToolUiContract(
-  "Citation",
-  SerializableCitationSchema,
-);
-
-export const parseSerializableCitation: (
-  input: unknown,
-) => SerializableCitation = SerializableCitationSchemaContract.parse;
-
-export const safeParseSerializableCitation: (
-  input: unknown,
-) => SerializableCitation | null = SerializableCitationSchemaContract.safeParse;
diff --git a/surfsense_web/components/tool-ui/shared/contract.ts b/surfsense_web/components/tool-ui/shared/contract.ts
deleted file mode 100644
index 82bc05f18..000000000
--- a/surfsense_web/components/tool-ui/shared/contract.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { z } from "zod";
-import { parseWithSchema, safeParseWithSchema } from "./parse";
-
-export interface ToolUiContract<T> {
-  schema: z.ZodType<T>;
-  parse: (input: unknown) => T;
-  safeParse: (input: unknown) => T | null;
-}
-
-export function defineToolUiContract<T>(
-  componentName: string,
-  schema: z.ZodType<T>,
-): ToolUiContract<T> {
-  return {
-    schema,
-    parse: (input: unknown) => parseWithSchema(schema, input, componentName),
-    safeParse: (input: unknown) => safeParseWithSchema(schema, input),
-  };
-}
diff --git a/surfsense_web/components/tool-ui/shared/media/aspect-ratio.ts b/surfsense_web/components/tool-ui/shared/media/aspect-ratio.ts
deleted file mode 100644
index 21352fd04..000000000
--- a/surfsense_web/components/tool-ui/shared/media/aspect-ratio.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { z } from "zod";
-
-export const AspectRatioSchema = z
-  .enum(["auto", "1:1", "4:3", "16:9", "9:16"])
-  .default("auto");
-
-export type AspectRatio = z.infer<typeof AspectRatioSchema>;
-
-export const MediaFitSchema = z.enum(["cover", "contain"]).default("cover");
-
-export type MediaFit = z.infer<typeof MediaFitSchema>;
-
-export const RATIO_CLASS_MAP: Record<AspectRatio, string> = {
-  auto: "",
-  "1:1": "aspect-square",
-  "4:3": "aspect-[4/3]",
-  "16:9": "aspect-video",
-  "9:16": "aspect-[9/16]",
-};
-
-export function getRatioClass(ratio: AspectRatio): string {
-  return RATIO_CLASS_MAP[ratio];
-}
-
-export function getFitClass(fit: MediaFit): string {
-  return fit === "cover" ? "object-cover" : "object-contain";
-}
diff --git a/surfsense_web/components/tool-ui/shared/media/format-utils.ts b/surfsense_web/components/tool-ui/shared/media/format-utils.ts
deleted file mode 100644
index b00757cb7..000000000
--- a/surfsense_web/components/tool-ui/shared/media/format-utils.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export function formatDuration(durationMs: number): string {
-  const totalSeconds = Math.round(durationMs / 1000);
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = totalSeconds % 60;
-
-  if (hours > 0) {
-    return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds
-      .toString()
-      .padStart(2, "0")}`;
-  }
-  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
-}
-
-/**
- * Format file size in bytes to human-readable string.
- * @example formatFileSize(1024) => "1 KB"
- * @example formatFileSize(1536000) => "1.5 MB"
- */
-export function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  const units = ["KB", "MB", "GB"];
-  let size = bytes / 1024;
-  let unit = 0;
-  while (size >= 1024 && unit < units.length - 1) {
-    size /= 1024;
-    unit += 1;
-  }
-  return `${size.toFixed(size >= 10 ? 0 : 1)} ${units[unit]}`;
-}
diff --git a/surfsense_web/components/tool-ui/shared/media/index.ts b/surfsense_web/components/tool-ui/shared/media/index.ts
index 5b655c708..5a3166335 100644
--- a/surfsense_web/components/tool-ui/shared/media/index.ts
+++ b/surfsense_web/components/tool-ui/shared/media/index.ts
@@ -1,17 +1,3 @@
-export {
-  AspectRatioSchema,
-  MediaFitSchema,
-  RATIO_CLASS_MAP,
-  getRatioClass,
-  getFitClass,
-  type AspectRatio,
-  type MediaFit,
-} from "./aspect-ratio";
-
-export { OVERLAY_GRADIENT } from "./overlay-gradient";
-
-export { formatDuration, formatFileSize } from "./format-utils";
-
 export { sanitizeHref } from "./sanitize-href";
 export {
   resolveSafeNavigationHref,
diff --git a/surfsense_web/components/tool-ui/shared/media/overlay-gradient.ts b/surfsense_web/components/tool-ui/shared/media/overlay-gradient.ts
deleted file mode 100644
index f59aa44f4..000000000
--- a/surfsense_web/components/tool-ui/shared/media/overlay-gradient.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export const OVERLAY_GRADIENT = `linear-gradient(
-  to bottom,
-  hsl(0, 0%, 0%) 0%,
-  hsla(0, 0%, 0%, 0.987) 8.3%,
-  hsla(0, 0%, 0%, 0.951) 16.6%,
-  hsla(0, 0%, 0%, 0.896) 24.6%,
-  hsla(0, 0%, 0%, 0.825) 32.5%,
-  hsla(0, 0%, 0%, 0.741) 40.1%,
-  hsla(0, 0%, 0%, 0.648) 47.6%,
-  hsla(0, 0%, 0%, 0.55) 54.8%,
-  hsla(0, 0%, 0%, 0.45) 61.7%,
-  hsla(0, 0%, 0%, 0.352) 68.3%,
-  hsla(0, 0%, 0%, 0.259) 74.5%,
-  hsla(0, 0%, 0%, 0.175) 80.4%,
-  hsla(0, 0%, 0%, 0.104) 86%,
-  hsla(0, 0%, 0%, 0.049) 91.1%,
-  hsla(0, 0%, 0%, 0.013) 95.8%,
-  hsla(0, 0%, 0%, 0) 100%
-)` as const;
diff --git a/surfsense_web/components/tool-ui/shared/parse.ts b/surfsense_web/components/tool-ui/shared/parse.ts
deleted file mode 100644
index 7214241a3..000000000
--- a/surfsense_web/components/tool-ui/shared/parse.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { z } from "zod";
-
-function formatZodPath(path: Array<string | number | symbol>): string {
-  if (path.length === 0) return "root";
-  return path
-    .map((segment) =>
-      typeof segment === "number" ? `[${segment}]` : String(segment),
-    )
-    .join(".");
-}
-
-/**
- * Format Zod errors into a compact `path: message` string.
- */
-export function formatZodError(error: z.ZodError): string {
-  const parts = error.issues.map((issue) => {
-    const path = formatZodPath(issue.path);
-    return `${path}: ${issue.message}`;
-  });
-
-  return Array.from(new Set(parts)).join("; ");
-}
-
-/**
- * Parse unknown input and throw a readable error.
- */
-export function parseWithSchema<T>(
-  schema: z.ZodType<T>,
-  input: unknown,
-  name: string,
-): T {
-  const res = schema.safeParse(input);
-  if (!res.success) {
-    throw new Error(`Invalid ${name} payload: ${formatZodError(res.error)}`);
-  }
-  return res.data;
-}
-
-/**
- * Parse unknown input, returning `null` instead of throwing on failure.
- *
- * Use this in assistant-ui `render` functions where `args` stream in
- * incrementally and may be incomplete until the tool call finishes.
- */
-export function safeParseWithSchema<T>(
-  schema: z.ZodType<T>,
-  input: unknown,
-): T | null {
-  const res = schema.safeParse(input);
-  return res.success ? res.data : null;
-}

From 04691d572baaa22d71dc30f23d02fffbaf20db02 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 30 Mar 2026 01:50:41 +0530
Subject: [PATCH 21/24] chore: ran linting

---
 .../alembic/versions/111_add_prompts_table.py |   4 +-
 .../new_chat/tools/onedrive/create_file.py    |  49 +-
 .../new_chat/tools/onedrive/trash_file.py     |  59 +-
 .../app/connectors/onedrive/client.py         |  22 +-
 .../connectors/onedrive/content_extractor.py  |  32 +-
 .../app/connectors/onedrive/folder_manager.py |   9 +-
 surfsense_backend/app/routes/__init__.py      |   4 +-
 .../routes/onedrive_add_connector_route.py    | 197 +++--
 .../routes/search_source_connectors_routes.py |  12 +-
 .../app/services/onedrive/kb_sync_service.py  |   8 +-
 .../app/tasks/chat/stream_new_chat.py         |   6 +-
 .../connector_indexers/onedrive_indexer.py    | 172 ++--
 .../test_onedrive_pipeline.py                 |  18 +-
 .../test_onedrive_parallel.py                 |  19 +-
 .../components/DocumentsTableShell.tsx        |   6 +-
 .../new-chat/[[...chat_id]]/page.tsx          | 272 +++----
 .../[search_space_id]/onboard/page.tsx        |  18 +-
 .../[search_space_id]/team/team-content.tsx   |   3 +-
 .../components/PromptsContent.tsx             |  16 +-
 .../new-llm-config-mutation.atoms.ts          |   5 +-
 surfsense_web/atoms/tabs/tabs.atom.ts         |   4 +-
 .../assistant-ui/assistant-message.tsx        |  22 +-
 .../citation-metadata-context.tsx             |   8 +-
 .../assistant-ui/connector-popup.tsx          |  11 +-
 .../components/onedrive-config.tsx            |   3 +-
 .../connector-configs/index.tsx               |   2 +-
 .../hooks/use-connector-dialog.ts             |  10 +-
 .../assistant-ui/inline-mention-editor.tsx    |  17 +-
 .../components/assistant-ui/markdown-text.tsx |   5 +-
 .../components/assistant-ui/thread.tsx        |  30 +-
 .../components/documents/FolderTreeView.tsx   |   4 +-
 .../components/editor-panel/editor-panel.tsx  |   2 +-
 .../layout/providers/LayoutDataProvider.tsx   |  11 +-
 .../components/layout/ui/header/Header.tsx    |   9 +-
 .../ui/sidebar/AllPrivateChatsSidebar.tsx     |   4 +-
 .../ui/sidebar/AllSharedChatsSidebar.tsx      |   4 +-
 .../layout/ui/sidebar/DocumentsSidebar.tsx    |   4 +-
 .../components/layout/ui/sidebar/Sidebar.tsx  |   4 +-
 .../components/layout/ui/tabs/TabBar.tsx      |   7 +-
 .../components/new-chat/chat-header.tsx       |   4 +-
 .../components/new-chat/prompt-picker.tsx     | 354 ++++----
 .../components/public-chat/public-thread.tsx  |   8 +-
 .../settings/image-model-manager.tsx          |  49 +-
 .../settings/model-config-manager.tsx         |  31 +-
 .../components/shared/image-config-dialog.tsx |  69 +-
 .../components/shared/llm-config-form.tsx     |  84 +-
 .../components/shared/model-config-dialog.tsx |  66 +-
 .../components/tool-ui/citation/_adapter.tsx  |   8 +-
 .../tool-ui/citation/citation-list.tsx        | 756 ++++++++----------
 .../components/tool-ui/citation/citation.tsx  | 461 ++++++-----
 .../components/tool-ui/citation/index.ts      |  10 +-
 .../components/tool-ui/citation/schema.ts     |  42 +-
 surfsense_web/components/tool-ui/index.ts     |   2 +-
 .../tool-ui/onedrive/create-file.tsx          |  88 +-
 .../tool-ui/onedrive/trash-file.tsx           | 177 +++-
 .../components/tool-ui/shared/media/index.ts  |   6 +-
 .../tool-ui/shared/media/safe-navigation.ts   |  26 +-
 .../tool-ui/shared/media/sanitize-href.ts     |  48 +-
 .../components/tool-ui/shared/schema.ts       | 138 ++--
 surfsense_web/lib/apis/prompts-api.service.ts |   2 +-
 surfsense_web/lib/chat/streaming-state.ts     |   5 +-
 61 files changed, 1986 insertions(+), 1540 deletions(-)

diff --git a/surfsense_backend/alembic/versions/111_add_prompts_table.py b/surfsense_backend/alembic/versions/111_add_prompts_table.py
index 7d4d69fd2..f61c4e298 100644
--- a/surfsense_backend/alembic/versions/111_add_prompts_table.py
+++ b/surfsense_backend/alembic/versions/111_add_prompts_table.py
@@ -42,7 +42,9 @@ def upgrade() -> None:
             )
         """)
         op.execute("CREATE INDEX ix_prompts_user_id ON prompts (user_id)")
-        op.execute("CREATE INDEX ix_prompts_search_space_id ON prompts (search_space_id)")
+        op.execute(
+            "CREATE INDEX ix_prompts_search_space_id ON prompts (search_space_id)"
+        )
 
 
 def downgrade() -> None:
diff --git a/surfsense_backend/app/agents/new_chat/tools/onedrive/create_file.py b/surfsense_backend/app/agents/new_chat/tools/onedrive/create_file.py
index a712c9a45..8dffb18dd 100644
--- a/surfsense_backend/app/agents/new_chat/tools/onedrive/create_file.py
+++ b/surfsense_backend/app/agents/new_chat/tools/onedrive/create_file.py
@@ -81,7 +81,8 @@ async def create_onedrive_file(
                 select(SearchSourceConnector).filter(
                     SearchSourceConnector.search_space_id == search_space_id,
                     SearchSourceConnector.user_id == user_id,
-                    SearchSourceConnector.connector_type == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
+                    SearchSourceConnector.connector_type
+                    == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
                 )
             )
             connectors = result.scalars().all()
@@ -95,12 +96,14 @@ async def create_onedrive_file(
             accounts = []
             for c in connectors:
                 cfg = c.config or {}
-                accounts.append({
-                    "id": c.id,
-                    "name": c.name,
-                    "user_email": cfg.get("user_email"),
-                    "auth_expired": cfg.get("auth_expired", False),
-                })
+                accounts.append(
+                    {
+                        "id": c.id,
+                        "name": c.name,
+                        "user_email": cfg.get("user_email"),
+                        "auth_expired": cfg.get("auth_expired", False),
+                    }
+                )
 
             if all(a.get("auth_expired") for a in accounts):
                 return {
@@ -119,16 +122,22 @@ async def create_onedrive_file(
                     client = OneDriveClient(session=db_session, connector_id=cid)
                     items, err = await client.list_children("root")
                     if err:
-                        logger.warning("Failed to list folders for connector %s: %s", cid, err)
+                        logger.warning(
+                            "Failed to list folders for connector %s: %s", cid, err
+                        )
                         parent_folders[cid] = []
                     else:
                         parent_folders[cid] = [
                             {"folder_id": item["id"], "name": item["name"]}
                             for item in items
-                            if item.get("folder") is not None and item.get("id") and item.get("name")
+                            if item.get("folder") is not None
+                            and item.get("id")
+                            and item.get("name")
                         ]
                 except Exception:
-                    logger.warning("Error fetching folders for connector %s", cid, exc_info=True)
+                    logger.warning(
+                        "Error fetching folders for connector %s", cid, exc_info=True
+                    )
                     parent_folders[cid] = []
 
             context: dict[str, Any] = {
@@ -152,8 +161,12 @@ async def create_onedrive_file(
                 }
             )
 
-            decisions_raw = approval.get("decisions", []) if isinstance(approval, dict) else []
-            decisions = decisions_raw if isinstance(decisions_raw, list) else [decisions_raw]
+            decisions_raw = (
+                approval.get("decisions", []) if isinstance(approval, dict) else []
+            )
+            decisions = (
+                decisions_raw if isinstance(decisions_raw, list) else [decisions_raw]
+            )
             decisions = [d for d in decisions if isinstance(d, dict)]
             if not decisions:
                 return {"status": "error", "message": "No approval decision received"}
@@ -192,7 +205,8 @@ async def create_onedrive_file(
                         SearchSourceConnector.id == final_connector_id,
                         SearchSourceConnector.search_space_id == search_space_id,
                         SearchSourceConnector.user_id == user_id,
-                        SearchSourceConnector.connector_type == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
+                        SearchSourceConnector.connector_type
+                        == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
                     )
                 )
                 connector = result.scalars().first()
@@ -200,7 +214,10 @@ async def create_onedrive_file(
                 connector = connectors[0]
 
             if not connector:
-                return {"status": "error", "message": "Selected OneDrive connector is invalid."}
+                return {
+                    "status": "error",
+                    "message": "Selected OneDrive connector is invalid.",
+                }
 
             docx_bytes = _markdown_to_docx(final_content or "")
 
@@ -212,7 +229,9 @@ async def create_onedrive_file(
                 mime_type=DOCX_MIME,
             )
 
-            logger.info(f"OneDrive file created: id={created.get('id')}, name={created.get('name')}")
+            logger.info(
+                f"OneDrive file created: id={created.get('id')}, name={created.get('name')}"
+            )
 
             kb_message_suffix = ""
             try:
diff --git a/surfsense_backend/app/agents/new_chat/tools/onedrive/trash_file.py b/surfsense_backend/app/agents/new_chat/tools/onedrive/trash_file.py
index ae7c5e306..79d8222fd 100644
--- a/surfsense_backend/app/agents/new_chat/tools/onedrive/trash_file.py
+++ b/surfsense_backend/app/agents/new_chat/tools/onedrive/trash_file.py
@@ -52,10 +52,15 @@ async def delete_onedrive_file(
             - If status is "not_found", relay the exact message to the user and ask them
               to verify the file name or check if it has been indexed.
         """
-        logger.info(f"delete_onedrive_file called: file_name='{file_name}', delete_from_kb={delete_from_kb}")
+        logger.info(
+            f"delete_onedrive_file called: file_name='{file_name}', delete_from_kb={delete_from_kb}"
+        )
 
         if db_session is None or search_space_id is None or user_id is None:
-            return {"status": "error", "message": "OneDrive tool not properly configured."}
+            return {
+                "status": "error",
+                "message": "OneDrive tool not properly configured.",
+            }
 
         try:
             doc_result = await db_session.execute(
@@ -89,8 +94,12 @@ async def delete_onedrive_file(
                             Document.search_space_id == search_space_id,
                             Document.document_type == DocumentType.ONEDRIVE_FILE,
                             func.lower(
-                                cast(Document.document_metadata["onedrive_file_name"], String)
-                            ) == func.lower(file_name),
+                                cast(
+                                    Document.document_metadata["onedrive_file_name"],
+                                    String,
+                                )
+                            )
+                            == func.lower(file_name),
                             SearchSourceConnector.user_id == user_id,
                         )
                     )
@@ -110,14 +119,20 @@ async def delete_onedrive_file(
                 }
 
             if not document.connector_id:
-                return {"status": "error", "message": "Document has no associated connector."}
+                return {
+                    "status": "error",
+                    "message": "Document has no associated connector.",
+                }
 
             meta = document.document_metadata or {}
             file_id = meta.get("onedrive_file_id")
             document_id = document.id
 
             if not file_id:
-                return {"status": "error", "message": "File ID is missing. Please re-index the file."}
+                return {
+                    "status": "error",
+                    "message": "File ID is missing. Please re-index the file.",
+                }
 
             conn_result = await db_session.execute(
                 select(SearchSourceConnector).filter(
@@ -125,13 +140,17 @@ async def delete_onedrive_file(
                         SearchSourceConnector.id == document.connector_id,
                         SearchSourceConnector.search_space_id == search_space_id,
                         SearchSourceConnector.user_id == user_id,
-                        SearchSourceConnector.connector_type == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
+                        SearchSourceConnector.connector_type
+                        == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
                     )
                 )
             )
             connector = conn_result.scalars().first()
             if not connector:
-                return {"status": "error", "message": "OneDrive connector not found or access denied."}
+                return {
+                    "status": "error",
+                    "message": "OneDrive connector not found or access denied.",
+                }
 
             cfg = connector.config or {}
             if cfg.get("auth_expired"):
@@ -170,8 +189,12 @@ async def delete_onedrive_file(
                 }
             )
 
-            decisions_raw = approval.get("decisions", []) if isinstance(approval, dict) else []
-            decisions = decisions_raw if isinstance(decisions_raw, list) else [decisions_raw]
+            decisions_raw = (
+                approval.get("decisions", []) if isinstance(approval, dict) else []
+            )
+            decisions = (
+                decisions_raw if isinstance(decisions_raw, list) else [decisions_raw]
+            )
             decisions = [d for d in decisions if isinstance(d, dict)]
             if not decisions:
                 return {"status": "error", "message": "No approval decision received"}
@@ -206,7 +229,8 @@ async def delete_onedrive_file(
                             SearchSourceConnector.id == final_connector_id,
                             SearchSourceConnector.search_space_id == search_space_id,
                             SearchSourceConnector.user_id == user_id,
-                            SearchSourceConnector.connector_type == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
+                            SearchSourceConnector.connector_type
+                            == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
                         )
                     )
                 )
@@ -224,10 +248,14 @@ async def delete_onedrive_file(
                 f"Deleting OneDrive file: file_id='{final_file_id}', connector={actual_connector_id}"
             )
 
-            client = OneDriveClient(session=db_session, connector_id=actual_connector_id)
+            client = OneDriveClient(
+                session=db_session, connector_id=actual_connector_id
+            )
             await client.trash_file(final_file_id)
 
-            logger.info(f"OneDrive file deleted (moved to recycle bin): file_id={final_file_id}")
+            logger.info(
+                f"OneDrive file deleted (moved to recycle bin): file_id={final_file_id}"
+            )
 
             trash_result: dict[str, Any] = {
                 "status": "success",
@@ -272,6 +300,9 @@ async def delete_onedrive_file(
             if isinstance(e, GraphInterrupt):
                 raise
             logger.error(f"Error deleting OneDrive file: {e}", exc_info=True)
-            return {"status": "error", "message": "Something went wrong while trashing the file. Please try again."}
+            return {
+                "status": "error",
+                "message": "Something went wrong while trashing the file. Please try again.",
+            }
 
     return delete_onedrive_file
diff --git a/surfsense_backend/app/connectors/onedrive/client.py b/surfsense_backend/app/connectors/onedrive/client.py
index cc118c0c9..37c5823a3 100644
--- a/surfsense_backend/app/connectors/onedrive/client.py
+++ b/surfsense_backend/app/connectors/onedrive/client.py
@@ -39,7 +39,9 @@ async def _get_valid_token(self) -> str:
 
         cfg = connector.config or {}
         is_encrypted = cfg.get("_token_encrypted", False)
-        token_encryption = TokenEncryption(config.SECRET_KEY) if config.SECRET_KEY else None
+        token_encryption = (
+            TokenEncryption(config.SECRET_KEY) if config.SECRET_KEY else None
+        )
 
         access_token = cfg.get("access_token", "")
         refresh_token = cfg.get("refresh_token")
@@ -206,18 +208,20 @@ async def download_file(self, item_id: str) -> tuple[bytes | None, str | None]:
     async def download_file_to_disk(self, item_id: str, dest_path: str) -> str | None:
         """Stream file content to disk. Returns error message on failure."""
         token = await self._get_valid_token()
-        async with httpx.AsyncClient(follow_redirects=True) as client:
-            async with client.stream(
+        async with (
+            httpx.AsyncClient(follow_redirects=True) as client,
+            client.stream(
                 "GET",
                 f"{GRAPH_API_BASE}/me/drive/items/{item_id}/content",
                 headers={"Authorization": f"Bearer {token}"},
                 timeout=120.0,
-            ) as resp:
-                if resp.status_code != 200:
-                    return f"Download failed: {resp.status_code}"
-                with open(dest_path, "wb") as f:
-                    async for chunk in resp.aiter_bytes(chunk_size=5 * 1024 * 1024):
-                        f.write(chunk)
+            ) as resp,
+        ):
+            if resp.status_code != 200:
+                return f"Download failed: {resp.status_code}"
+            with open(dest_path, "wb") as f:
+                async for chunk in resp.aiter_bytes(chunk_size=5 * 1024 * 1024):
+                    f.write(chunk)
         return None
 
     async def create_file(
diff --git a/surfsense_backend/app/connectors/onedrive/content_extractor.py b/surfsense_backend/app/connectors/onedrive/content_extractor.py
index 109a8cb15..8917ba1fd 100644
--- a/surfsense_backend/app/connectors/onedrive/content_extractor.py
+++ b/surfsense_backend/app/connectors/onedrive/content_extractor.py
@@ -5,6 +5,7 @@
 """
 
 import asyncio
+import contextlib
 import logging
 import os
 import tempfile
@@ -60,7 +61,9 @@ async def download_and_extract_content(
 
     temp_file_path = None
     try:
-        extension = Path(file_name).suffix or get_extension_from_mime(mime_type) or ".bin"
+        extension = (
+            Path(file_name).suffix or get_extension_from_mime(mime_type) or ".bin"
+        )
         with tempfile.NamedTemporaryFile(delete=False, suffix=extension) as tmp:
             temp_file_path = tmp.name
 
@@ -76,10 +79,8 @@ async def download_and_extract_content(
         return None, metadata, str(e)
     finally:
         if temp_file_path and os.path.exists(temp_file_path):
-            try:
+            with contextlib.suppress(Exception):
                 os.unlink(temp_file_path)
-            except Exception:
-                pass
 
 
 async def _parse_file_to_markdown(file_path: str, filename: str) -> str:
@@ -94,9 +95,10 @@ async def _parse_file_to_markdown(file_path: str, filename: str) -> str:
             return f.read()
 
     if lower.endswith((".mp3", ".mp4", ".mpeg", ".mpga", ".m4a", ".wav", ".webm")):
-        from app.config import config as app_config
         from litellm import atranscription
 
+        from app.config import config as app_config
+
         stt_service_type = (
             "local"
             if app_config.STT_SERVICE and app_config.STT_SERVICE.startswith("local/")
@@ -106,9 +108,13 @@ async def _parse_file_to_markdown(file_path: str, filename: str) -> str:
             from app.services.stt_service import stt_service
 
             t0 = time.monotonic()
-            logger.info(f"[local-stt] START file={filename} thread={threading.current_thread().name}")
+            logger.info(
+                f"[local-stt] START file={filename} thread={threading.current_thread().name}"
+            )
             result = await asyncio.to_thread(stt_service.transcribe_file, file_path)
-            logger.info(f"[local-stt] END file={filename} elapsed={time.monotonic() - t0:.2f}s")
+            logger.info(
+                f"[local-stt] END file={filename} elapsed={time.monotonic() - t0:.2f}s"
+            )
             text = result.get("text", "")
         else:
             with open(file_path, "rb") as audio_file:
@@ -150,7 +156,9 @@ async def _parse_file_to_markdown(file_path: str, filename: str) -> str:
             parse_with_llamacloud_retry,
         )
 
-        result = await parse_with_llamacloud_retry(file_path=file_path, estimated_pages=50)
+        result = await parse_with_llamacloud_retry(
+            file_path=file_path, estimated_pages=50
+        )
         markdown_documents = await result.aget_markdown_documents(split_by_page=False)
         if not markdown_documents:
             raise RuntimeError(f"LlamaCloud returned no documents for {filename}")
@@ -161,9 +169,13 @@ async def _parse_file_to_markdown(file_path: str, filename: str) -> str:
 
         converter = DocumentConverter()
         t0 = time.monotonic()
-        logger.info(f"[docling] START file={filename} thread={threading.current_thread().name}")
+        logger.info(
+            f"[docling] START file={filename} thread={threading.current_thread().name}"
+        )
         result = await asyncio.to_thread(converter.convert, file_path)
-        logger.info(f"[docling] END file={filename} elapsed={time.monotonic() - t0:.2f}s")
+        logger.info(
+            f"[docling] END file={filename} elapsed={time.monotonic() - t0:.2f}s"
+        )
         return result.document.export_to_markdown()
 
     raise RuntimeError(f"Unknown ETL_SERVICE: {app_config.ETL_SERVICE}")
diff --git a/surfsense_backend/app/connectors/onedrive/folder_manager.py b/surfsense_backend/app/connectors/onedrive/folder_manager.py
index 7f286453c..6fa725ca1 100644
--- a/surfsense_backend/app/connectors/onedrive/folder_manager.py
+++ b/surfsense_backend/app/connectors/onedrive/folder_manager.py
@@ -27,7 +27,10 @@ async def list_folder_contents(
             if item["isFolder"]:
                 item.setdefault("mimeType", "application/vnd.ms-folder")
             else:
-                item.setdefault("mimeType", item.get("file", {}).get("mimeType", "application/octet-stream"))
+                item.setdefault(
+                    "mimeType",
+                    item.get("file", {}).get("mimeType", "application/octet-stream"),
+                )
 
         items.sort(key=lambda x: (not x["isFolder"], x.get("name", "").lower()))
 
@@ -63,7 +66,9 @@ async def get_files_in_folder(
                         client, item["id"], include_subfolders=True
                     )
                     if sub_error:
-                        logger.warning(f"Error recursing into folder {item.get('name')}: {sub_error}")
+                        logger.warning(
+                            f"Error recursing into folder {item.get('name')}: {sub_error}"
+                        )
                         continue
                     files.extend(sub_files)
             elif not should_skip_file(item):
diff --git a/surfsense_backend/app/routes/__init__.py b/surfsense_backend/app/routes/__init__.py
index a2b7a154a..644ab07dc 100644
--- a/surfsense_backend/app/routes/__init__.py
+++ b/surfsense_backend/app/routes/__init__.py
@@ -33,9 +33,10 @@
 from .notes_routes import router as notes_router
 from .notifications_routes import router as notifications_router
 from .notion_add_connector_route import router as notion_add_connector_router
+from .onedrive_add_connector_route import router as onedrive_add_connector_router
 from .podcasts_routes import router as podcasts_router
-from .public_chat_routes import router as public_chat_router
 from .prompts_routes import router as prompts_router
+from .public_chat_routes import router as public_chat_router
 from .rbac_routes import router as rbac_router
 from .reports_routes import router as reports_router
 from .sandbox_routes import router as sandbox_router
@@ -44,7 +45,6 @@
 from .slack_add_connector_route import router as slack_add_connector_router
 from .surfsense_docs_routes import router as surfsense_docs_router
 from .teams_add_connector_route import router as teams_add_connector_router
-from .onedrive_add_connector_route import router as onedrive_add_connector_router
 from .video_presentations_routes import router as video_presentations_router
 from .youtube_routes import router as youtube_router
 
diff --git a/surfsense_backend/app/routes/onedrive_add_connector_route.py b/surfsense_backend/app/routes/onedrive_add_connector_route.py
index 19bcbe6ff..2f41efca7 100644
--- a/surfsense_backend/app/routes/onedrive_add_connector_route.py
+++ b/surfsense_backend/app/routes/onedrive_add_connector_route.py
@@ -79,9 +79,13 @@ async def connect_onedrive(space_id: int, user: User = Depends(current_active_us
         if not space_id:
             raise HTTPException(status_code=400, detail="space_id is required")
         if not config.MICROSOFT_CLIENT_ID:
-            raise HTTPException(status_code=500, detail="Microsoft OneDrive OAuth not configured.")
+            raise HTTPException(
+                status_code=500, detail="Microsoft OneDrive OAuth not configured."
+            )
         if not config.SECRET_KEY:
-            raise HTTPException(status_code=500, detail="SECRET_KEY not configured for OAuth security.")
+            raise HTTPException(
+                status_code=500, detail="SECRET_KEY not configured for OAuth security."
+            )
 
         state_manager = get_state_manager()
         state_encoded = state_manager.generate_secure_state(space_id, user.id)
@@ -96,14 +100,18 @@ async def connect_onedrive(space_id: int, user: User = Depends(current_active_us
         }
         auth_url = f"{AUTHORIZATION_URL}?{urlencode(auth_params)}"
 
-        logger.info("Generated OneDrive OAuth URL for user %s, space %s", user.id, space_id)
+        logger.info(
+            "Generated OneDrive OAuth URL for user %s, space %s", user.id, space_id
+        )
         return {"auth_url": auth_url}
 
     except HTTPException:
         raise
     except Exception as e:
         logger.error("Failed to initiate OneDrive OAuth: %s", str(e), exc_info=True)
-        raise HTTPException(status_code=500, detail=f"Failed to initiate OneDrive OAuth: {e!s}") from e
+        raise HTTPException(
+            status_code=500, detail=f"Failed to initiate OneDrive OAuth: {e!s}"
+        ) from e
 
 
 @router.get("/auth/onedrive/connector/reauth")
@@ -121,15 +129,20 @@ async def reauth_onedrive(
                 SearchSourceConnector.id == connector_id,
                 SearchSourceConnector.user_id == user.id,
                 SearchSourceConnector.search_space_id == space_id,
-                SearchSourceConnector.connector_type == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
+                SearchSourceConnector.connector_type
+                == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
             )
         )
         connector = result.scalars().first()
         if not connector:
-            raise HTTPException(status_code=404, detail="OneDrive connector not found or access denied")
+            raise HTTPException(
+                status_code=404, detail="OneDrive connector not found or access denied"
+            )
 
         if not config.SECRET_KEY:
-            raise HTTPException(status_code=500, detail="SECRET_KEY not configured for OAuth security.")
+            raise HTTPException(
+                status_code=500, detail="SECRET_KEY not configured for OAuth security."
+            )
 
         state_manager = get_state_manager()
         extra: dict = {"connector_id": connector_id}
@@ -148,14 +161,20 @@ async def reauth_onedrive(
         }
         auth_url = f"{AUTHORIZATION_URL}?{urlencode(auth_params)}"
 
-        logger.info("Initiating OneDrive re-auth for user %s, connector %s", user.id, connector_id)
+        logger.info(
+            "Initiating OneDrive re-auth for user %s, connector %s",
+            user.id,
+            connector_id,
+        )
         return {"auth_url": auth_url}
 
     except HTTPException:
         raise
     except Exception as e:
         logger.error("Failed to initiate OneDrive re-auth: %s", str(e), exc_info=True)
-        raise HTTPException(status_code=500, detail=f"Failed to initiate OneDrive re-auth: {e!s}") from e
+        raise HTTPException(
+            status_code=500, detail=f"Failed to initiate OneDrive re-auth: {e!s}"
+        ) from e
 
 
 @router.get("/auth/onedrive/connector/callback")
@@ -182,10 +201,14 @@ async def onedrive_callback(
                 return RedirectResponse(
                     url=f"{config.NEXT_FRONTEND_URL}/dashboard/{space_id}/connectors/callback?error=onedrive_oauth_denied"
                 )
-            return RedirectResponse(url=f"{config.NEXT_FRONTEND_URL}/dashboard?error=onedrive_oauth_denied")
+            return RedirectResponse(
+                url=f"{config.NEXT_FRONTEND_URL}/dashboard?error=onedrive_oauth_denied"
+            )
 
         if not code or not state:
-            raise HTTPException(status_code=400, detail="Missing required OAuth parameters")
+            raise HTTPException(
+                status_code=400, detail="Missing required OAuth parameters"
+            )
 
         state_manager = get_state_manager()
         try:
@@ -194,7 +217,9 @@ async def onedrive_callback(
             user_id = UUID(data["user_id"])
         except (HTTPException, ValueError, KeyError) as e:
             logger.error("Invalid OAuth state: %s", str(e))
-            return RedirectResponse(url=f"{config.NEXT_FRONTEND_URL}/dashboard?error=invalid_state")
+            return RedirectResponse(
+                url=f"{config.NEXT_FRONTEND_URL}/dashboard?error=invalid_state"
+            )
 
         reauth_connector_id = data.get("connector_id")
         reauth_return_url = data.get("return_url")
@@ -222,20 +247,26 @@ async def onedrive_callback(
                 error_detail = error_json.get("error_description", error_detail)
             except Exception:
                 pass
-            raise HTTPException(status_code=400, detail=f"Token exchange failed: {error_detail}")
+            raise HTTPException(
+                status_code=400, detail=f"Token exchange failed: {error_detail}"
+            )
 
         token_json = token_response.json()
         access_token = token_json.get("access_token")
         refresh_token = token_json.get("refresh_token")
 
         if not access_token:
-            raise HTTPException(status_code=400, detail="No access token received from Microsoft")
+            raise HTTPException(
+                status_code=400, detail="No access token received from Microsoft"
+            )
 
         token_encryption = get_token_encryption()
 
         expires_at = None
         if token_json.get("expires_in"):
-            expires_at = datetime.now(UTC) + timedelta(seconds=int(token_json["expires_in"]))
+            expires_at = datetime.now(UTC) + timedelta(
+                seconds=int(token_json["expires_in"])
+            )
 
         user_info: dict = {}
         try:
@@ -248,7 +279,8 @@ async def onedrive_callback(
                 if user_response.status_code == 200:
                     user_data = user_response.json()
                     user_info = {
-                        "user_email": user_data.get("mail") or user_data.get("userPrincipalName"),
+                        "user_email": user_data.get("mail")
+                        or user_data.get("userPrincipalName"),
                         "user_name": user_data.get("displayName"),
                     }
         except Exception as e:
@@ -256,7 +288,9 @@ async def onedrive_callback(
 
         connector_config = {
             "access_token": token_encryption.encrypt_token(access_token),
-            "refresh_token": token_encryption.encrypt_token(refresh_token) if refresh_token else None,
+            "refresh_token": token_encryption.encrypt_token(refresh_token)
+            if refresh_token
+            else None,
             "token_type": token_json.get("token_type", "Bearer"),
             "expires_in": token_json.get("expires_in"),
             "expires_at": expires_at.isoformat() if expires_at else None,
@@ -273,22 +307,36 @@ async def onedrive_callback(
                     SearchSourceConnector.id == reauth_connector_id,
                     SearchSourceConnector.user_id == user_id,
                     SearchSourceConnector.search_space_id == space_id,
-                    SearchSourceConnector.connector_type == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
+                    SearchSourceConnector.connector_type
+                    == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
                 )
             )
             db_connector = result.scalars().first()
             if not db_connector:
-                raise HTTPException(status_code=404, detail="Connector not found or access denied during re-auth")
+                raise HTTPException(
+                    status_code=404,
+                    detail="Connector not found or access denied during re-auth",
+                )
 
             existing_delta_link = db_connector.config.get("delta_link")
-            db_connector.config = {**connector_config, "delta_link": existing_delta_link, "auth_expired": False}
+            db_connector.config = {
+                **connector_config,
+                "delta_link": existing_delta_link,
+                "auth_expired": False,
+            }
             flag_modified(db_connector, "config")
             await session.commit()
             await session.refresh(db_connector)
 
-            logger.info("Re-authenticated OneDrive connector %s for user %s", db_connector.id, user_id)
+            logger.info(
+                "Re-authenticated OneDrive connector %s for user %s",
+                db_connector.id,
+                user_id,
+            )
             if reauth_return_url and reauth_return_url.startswith("/"):
-                return RedirectResponse(url=f"{config.NEXT_FRONTEND_URL}{reauth_return_url}")
+                return RedirectResponse(
+                    url=f"{config.NEXT_FRONTEND_URL}{reauth_return_url}"
+                )
             return RedirectResponse(
                 url=f"{config.NEXT_FRONTEND_URL}/dashboard/{space_id}/connectors/callback?success=true&connector=ONEDRIVE_CONNECTOR&connectorId={db_connector.id}"
             )
@@ -298,16 +346,26 @@ async def onedrive_callback(
             SearchSourceConnectorType.ONEDRIVE_CONNECTOR, connector_config
         )
         is_duplicate = await check_duplicate_connector(
-            session, SearchSourceConnectorType.ONEDRIVE_CONNECTOR, space_id, user_id, connector_identifier,
+            session,
+            SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
+            space_id,
+            user_id,
+            connector_identifier,
         )
         if is_duplicate:
-            logger.warning("Duplicate OneDrive connector for user %s, space %s", user_id, space_id)
+            logger.warning(
+                "Duplicate OneDrive connector for user %s, space %s", user_id, space_id
+            )
             return RedirectResponse(
                 url=f"{config.NEXT_FRONTEND_URL}/dashboard/{space_id}/connectors/callback?error=duplicate_account&connector=ONEDRIVE_CONNECTOR"
             )
 
         connector_name = await generate_unique_connector_name(
-            session, SearchSourceConnectorType.ONEDRIVE_CONNECTOR, space_id, user_id, connector_identifier,
+            session,
+            SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
+            space_id,
+            user_id,
+            connector_identifier,
         )
 
         new_connector = SearchSourceConnector(
@@ -323,20 +381,30 @@ async def onedrive_callback(
             session.add(new_connector)
             await session.commit()
             await session.refresh(new_connector)
-            logger.info("Successfully created OneDrive connector %s for user %s", new_connector.id, user_id)
+            logger.info(
+                "Successfully created OneDrive connector %s for user %s",
+                new_connector.id,
+                user_id,
+            )
             return RedirectResponse(
                 url=f"{config.NEXT_FRONTEND_URL}/dashboard/{space_id}/connectors/callback?success=true&connector=ONEDRIVE_CONNECTOR&connectorId={new_connector.id}"
             )
         except IntegrityError as e:
             await session.rollback()
-            logger.error("Database integrity error creating OneDrive connector: %s", str(e))
-            return RedirectResponse(url=f"{config.NEXT_FRONTEND_URL}/dashboard?error=connector_creation_failed")
+            logger.error(
+                "Database integrity error creating OneDrive connector: %s", str(e)
+            )
+            return RedirectResponse(
+                url=f"{config.NEXT_FRONTEND_URL}/dashboard?error=connector_creation_failed"
+            )
 
     except HTTPException:
         raise
     except (IntegrityError, ValueError) as e:
         logger.error("OneDrive OAuth callback error: %s", str(e), exc_info=True)
-        return RedirectResponse(url=f"{config.NEXT_FRONTEND_URL}/dashboard?error=onedrive_auth_error")
+        return RedirectResponse(
+            url=f"{config.NEXT_FRONTEND_URL}/dashboard?error=onedrive_auth_error"
+        )
 
 
 @router.get("/connectors/{connector_id}/onedrive/folders")
@@ -353,28 +421,44 @@ async def list_onedrive_folders(
             select(SearchSourceConnector).filter(
                 SearchSourceConnector.id == connector_id,
                 SearchSourceConnector.user_id == user.id,
-                SearchSourceConnector.connector_type == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
+                SearchSourceConnector.connector_type
+                == SearchSourceConnectorType.ONEDRIVE_CONNECTOR,
             )
         )
         connector = result.scalars().first()
         if not connector:
-            raise HTTPException(status_code=404, detail="OneDrive connector not found or access denied")
+            raise HTTPException(
+                status_code=404, detail="OneDrive connector not found or access denied"
+            )
 
         onedrive_client = OneDriveClient(session, connector_id)
         items, error = await list_folder_contents(onedrive_client, parent_id=parent_id)
 
         if error:
             error_lower = error.lower()
-            if "401" in error or "authentication expired" in error_lower or "invalid_grant" in error_lower:
+            if (
+                "401" in error
+                or "authentication expired" in error_lower
+                or "invalid_grant" in error_lower
+            ):
                 try:
                     if connector and not connector.config.get("auth_expired"):
                         connector.config = {**connector.config, "auth_expired": True}
                         flag_modified(connector, "config")
                         await session.commit()
                 except Exception:
-                    logger.warning("Failed to persist auth_expired for connector %s", connector_id, exc_info=True)
-                raise HTTPException(status_code=400, detail="OneDrive authentication expired. Please re-authenticate.")
-            raise HTTPException(status_code=500, detail=f"Failed to list folder contents: {error}")
+                    logger.warning(
+                        "Failed to persist auth_expired for connector %s",
+                        connector_id,
+                        exc_info=True,
+                    )
+                raise HTTPException(
+                    status_code=400,
+                    detail="OneDrive authentication expired. Please re-authenticate.",
+                )
+            raise HTTPException(
+                status_code=500, detail=f"Failed to list folder contents: {error}"
+            )
 
         return {"items": items}
 
@@ -391,8 +475,13 @@ async def list_onedrive_folders(
                     await session.commit()
             except Exception:
                 pass
-            raise HTTPException(status_code=400, detail="OneDrive authentication expired. Please re-authenticate.") from e
-        raise HTTPException(status_code=500, detail=f"Failed to list OneDrive contents: {e!s}") from e
+            raise HTTPException(
+                status_code=400,
+                detail="OneDrive authentication expired. Please re-authenticate.",
+            ) from e
+        raise HTTPException(
+            status_code=500, detail=f"Failed to list OneDrive contents: {e!s}"
+        ) from e
 
 
 async def refresh_onedrive_token(
@@ -410,10 +499,15 @@ async def refresh_onedrive_token(
             refresh_token = token_encryption.decrypt_token(refresh_token)
         except Exception as e:
             logger.error("Failed to decrypt refresh token: %s", str(e))
-            raise HTTPException(status_code=500, detail="Failed to decrypt stored refresh token") from e
+            raise HTTPException(
+                status_code=500, detail="Failed to decrypt stored refresh token"
+            ) from e
 
     if not refresh_token:
-        raise HTTPException(status_code=400, detail=f"No refresh token available for connector {connector.id}")
+        raise HTTPException(
+            status_code=400,
+            detail=f"No refresh token available for connector {connector.id}",
+        )
 
     refresh_data = {
         "client_id": config.MICROSOFT_CLIENT_ID,
@@ -425,8 +519,10 @@ async def refresh_onedrive_token(
 
     async with httpx.AsyncClient() as client:
         token_response = await client.post(
-            TOKEN_URL, data=refresh_data,
-            headers={"Content-Type": "application/x-www-form-urlencoded"}, timeout=30.0,
+            TOKEN_URL,
+            data=refresh_data,
+            headers={"Content-Type": "application/x-www-form-urlencoded"},
+            timeout=30.0,
         )
 
     if token_response.status_code != 200:
@@ -439,16 +535,27 @@ async def refresh_onedrive_token(
         except Exception:
             pass
         error_lower = (error_detail + error_code).lower()
-        if "invalid_grant" in error_lower or "expired" in error_lower or "revoked" in error_lower:
-            raise HTTPException(status_code=401, detail="OneDrive authentication failed. Please re-authenticate.")
-        raise HTTPException(status_code=400, detail=f"Token refresh failed: {error_detail}")
+        if (
+            "invalid_grant" in error_lower
+            or "expired" in error_lower
+            or "revoked" in error_lower
+        ):
+            raise HTTPException(
+                status_code=401,
+                detail="OneDrive authentication failed. Please re-authenticate.",
+            )
+        raise HTTPException(
+            status_code=400, detail=f"Token refresh failed: {error_detail}"
+        )
 
     token_json = token_response.json()
     access_token = token_json.get("access_token")
     new_refresh_token = token_json.get("refresh_token")
 
     if not access_token:
-        raise HTTPException(status_code=400, detail="No access token received from Microsoft refresh")
+        raise HTTPException(
+            status_code=400, detail="No access token received from Microsoft refresh"
+        )
 
     expires_at = None
     expires_in = token_json.get("expires_in")
diff --git a/surfsense_backend/app/routes/search_source_connectors_routes.py b/surfsense_backend/app/routes/search_source_connectors_routes.py
index 7e9ac1e59..d12fa3745 100644
--- a/surfsense_backend/app/routes/search_source_connectors_routes.py
+++ b/surfsense_backend/app/routes/search_source_connectors_routes.py
@@ -2567,8 +2567,12 @@ async def run_onedrive_indexing(
                 search_space_id=search_space_id,
                 folder_count=len(items_dict.get("folders", [])),
                 file_count=len(items_dict.get("files", [])),
-                folder_names=[f.get("name", "Unknown") for f in items_dict.get("folders", [])],
-                file_names=[f.get("name", "Unknown") for f in items_dict.get("files", [])],
+                folder_names=[
+                    f.get("name", "Unknown") for f in items_dict.get("folders", [])
+                ],
+                file_names=[
+                    f.get("name", "Unknown") for f in items_dict.get("files", [])
+                ],
             )
 
         if notification:
@@ -2593,7 +2597,9 @@ async def run_onedrive_indexing(
             )
             if _is_auth_error(error_message):
                 await _persist_auth_expired(session, connector_id)
-                error_message = "OneDrive authentication expired. Please re-authenticate."
+                error_message = (
+                    "OneDrive authentication expired. Please re-authenticate."
+                )
         else:
             if notification:
                 await session.refresh(notification)
diff --git a/surfsense_backend/app/services/onedrive/kb_sync_service.py b/surfsense_backend/app/services/onedrive/kb_sync_service.py
index 5e82950a5..962c19fc9 100644
--- a/surfsense_backend/app/services/onedrive/kb_sync_service.py
+++ b/surfsense_backend/app/services/onedrive/kb_sync_service.py
@@ -56,9 +56,7 @@ async def sync_after_create(
 
             indexable_content = (content or "").strip()
             if not indexable_content:
-                indexable_content = (
-                    f"OneDrive file: {file_name} (type: {mime_type})"
-                )
+                indexable_content = f"OneDrive file: {file_name} (type: {mime_type})"
 
             content_hash = generate_content_hash(indexable_content, search_space_id)
 
@@ -95,9 +93,7 @@ async def sync_after_create(
                 )
             else:
                 logger.warning("No LLM configured — using fallback summary")
-                summary_content = (
-                    f"OneDrive File: {file_name}\n\n{indexable_content}"
-                )
+                summary_content = f"OneDrive File: {file_name}\n\n{indexable_content}"
                 summary_embedding = embed_text(summary_content)
 
             chunks = await create_document_chunks(indexable_content)
diff --git a/surfsense_backend/app/tasks/chat/stream_new_chat.py b/surfsense_backend/app/tasks/chat/stream_new_chat.py
index 9015f7e51..4b37cb69e 100644
--- a/surfsense_backend/app/tasks/chat/stream_new_chat.py
+++ b/surfsense_backend/app/tasks/chat/stream_new_chat.py
@@ -1076,7 +1076,11 @@ def complete_current_step() -> str | None:
                     },
                 )
             elif tool_name == "web_search":
-                xml = tool_output.get("result", str(tool_output)) if isinstance(tool_output, dict) else str(tool_output)
+                xml = (
+                    tool_output.get("result", str(tool_output))
+                    if isinstance(tool_output, dict)
+                    else str(tool_output)
+                )
                 citations: dict[str, dict[str, str]] = {}
                 for m in re.finditer(
                     r"<title><!\[CDATA\[(.*?)\]\]></title>\s*<url><!\[CDATA\[(.*?)\]\]></url>",
diff --git a/surfsense_backend/app/tasks/connector_indexers/onedrive_indexer.py b/surfsense_backend/app/tasks/connector_indexers/onedrive_indexer.py
index e565f6a6a..748cb0988 100644
--- a/surfsense_backend/app/tasks/connector_indexers/onedrive_indexer.py
+++ b/surfsense_backend/app/tasks/connector_indexers/onedrive_indexer.py
@@ -45,6 +45,7 @@
 # Helpers
 # ---------------------------------------------------------------------------
 
+
 async def _should_skip_file(
     session: AsyncSession,
     file: dict,
@@ -186,9 +187,13 @@ async def _download_one(file: dict) -> ConnectorDocument | None:
                 logger.warning(f"Download/ETL failed for {file_name}: {reason}")
                 return None
             doc = _build_connector_doc(
-                file, markdown, od_metadata,
-                connector_id=connector_id, search_space_id=search_space_id,
-                user_id=user_id, enable_summary=enable_summary,
+                file,
+                markdown,
+                od_metadata,
+                connector_id=connector_id,
+                search_space_id=search_space_id,
+                user_id=user_id,
+                enable_summary=enable_summary,
             )
             async with hb_lock:
                 completed_count += 1
@@ -204,9 +209,7 @@ async def _download_one(file: dict) -> ConnectorDocument | None:
 
     failed = 0
     for outcome in outcomes:
-        if isinstance(outcome, Exception):
-            failed += 1
-        elif outcome is None:
+        if isinstance(outcome, Exception) or outcome is None:
             failed += 1
         else:
             results.append(outcome)
@@ -227,9 +230,12 @@ async def _download_and_index(
 ) -> tuple[int, int]:
     """Parallel download then parallel indexing. Returns (batch_indexed, total_failed)."""
     connector_docs, download_failed = await _download_files_parallel(
-        onedrive_client, files,
-        connector_id=connector_id, search_space_id=search_space_id,
-        user_id=user_id, enable_summary=enable_summary,
+        onedrive_client,
+        files,
+        connector_id=connector_id,
+        search_space_id=search_space_id,
+        user_id=user_id,
+        enable_summary=enable_summary,
         on_heartbeat=on_heartbeat,
     )
 
@@ -242,7 +248,9 @@ async def _get_llm(s):
             return await get_user_long_context_llm(s, user_id, search_space_id)
 
         _, batch_indexed, batch_failed = await pipeline.index_batch_parallel(
-            connector_docs, _get_llm, max_concurrency=3,
+            connector_docs,
+            _get_llm,
+            max_concurrency=3,
             on_heartbeat=on_heartbeat,
         )
 
@@ -305,10 +313,14 @@ async def _index_selected_files(
 
         files_to_download.append(file)
 
-    batch_indexed, failed = await _download_and_index(
-        onedrive_client, session, files_to_download,
-        connector_id=connector_id, search_space_id=search_space_id,
-        user_id=user_id, enable_summary=enable_summary,
+    batch_indexed, _failed = await _download_and_index(
+        onedrive_client,
+        session,
+        files_to_download,
+        connector_id=connector_id,
+        search_space_id=search_space_id,
+        user_id=user_id,
+        enable_summary=enable_summary,
         on_heartbeat=on_heartbeat,
     )
 
@@ -319,6 +331,7 @@ async def _index_selected_files(
 # Scan strategies
 # ---------------------------------------------------------------------------
 
+
 async def _index_full_scan(
     onedrive_client: OneDriveClient,
     session: AsyncSession,
@@ -338,7 +351,11 @@ async def _index_full_scan(
     await task_logger.log_task_progress(
         log_entry,
         f"Starting full scan of folder: {folder_name}",
-        {"stage": "full_scan", "folder_id": folder_id, "include_subfolders": include_subfolders},
+        {
+            "stage": "full_scan",
+            "folder_id": folder_id,
+            "include_subfolders": include_subfolders,
+        },
     )
 
     renamed_count = 0
@@ -346,12 +363,16 @@ async def _index_full_scan(
     files_to_download: list[dict] = []
 
     all_files, error = await get_files_in_folder(
-        onedrive_client, folder_id, include_subfolders=include_subfolders,
+        onedrive_client,
+        folder_id,
+        include_subfolders=include_subfolders,
     )
     if error:
         err_lower = error.lower()
         if "401" in error or "authentication expired" in err_lower:
-            raise Exception(f"OneDrive authentication failed. Please re-authenticate. (Error: {error})")
+            raise Exception(
+                f"OneDrive authentication failed. Please re-authenticate. (Error: {error})"
+            )
         raise Exception(f"Failed to list OneDrive files: {error}")
 
     for file in all_files[:max_files]:
@@ -365,14 +386,20 @@ async def _index_full_scan(
         files_to_download.append(file)
 
     batch_indexed, failed = await _download_and_index(
-        onedrive_client, session, files_to_download,
-        connector_id=connector_id, search_space_id=search_space_id,
-        user_id=user_id, enable_summary=enable_summary,
+        onedrive_client,
+        session,
+        files_to_download,
+        connector_id=connector_id,
+        search_space_id=search_space_id,
+        user_id=user_id,
+        enable_summary=enable_summary,
         on_heartbeat=on_heartbeat_callback,
     )
 
     indexed = renamed_count + batch_indexed
-    logger.info(f"Full scan complete: {indexed} indexed, {skipped} skipped, {failed} failed")
+    logger.info(
+        f"Full scan complete: {indexed} indexed, {skipped} skipped, {failed} failed"
+    )
     return indexed, skipped
 
 
@@ -392,7 +419,8 @@ async def _index_with_delta_sync(
 ) -> tuple[int, int, str | None]:
     """Delta sync using OneDrive change tracking. Returns (indexed, skipped, new_delta_link)."""
     await task_logger.log_task_progress(
-        log_entry, "Starting delta sync",
+        log_entry,
+        "Starting delta sync",
         {"stage": "delta_sync"},
     )
 
@@ -402,7 +430,9 @@ async def _index_with_delta_sync(
     if error:
         err_lower = error.lower()
         if "401" in error or "authentication expired" in err_lower:
-            raise Exception(f"OneDrive authentication failed. Please re-authenticate. (Error: {error})")
+            raise Exception(
+                f"OneDrive authentication failed. Please re-authenticate. (Error: {error})"
+            )
         raise Exception(f"Failed to fetch OneDrive changes: {error}")
 
     if not changes:
@@ -444,14 +474,20 @@ async def _index_with_delta_sync(
         files_to_download.append(change)
 
     batch_indexed, failed = await _download_and_index(
-        onedrive_client, session, files_to_download,
-        connector_id=connector_id, search_space_id=search_space_id,
-        user_id=user_id, enable_summary=enable_summary,
+        onedrive_client,
+        session,
+        files_to_download,
+        connector_id=connector_id,
+        search_space_id=search_space_id,
+        user_id=user_id,
+        enable_summary=enable_summary,
         on_heartbeat=on_heartbeat_callback,
     )
 
     indexed = renamed_count + batch_indexed
-    logger.info(f"Delta sync complete: {indexed} indexed, {skipped} skipped, {failed} failed")
+    logger.info(
+        f"Delta sync complete: {indexed} indexed, {skipped} skipped, {failed} failed"
+    )
     return indexed, skipped, new_delta_link
 
 
@@ -459,6 +495,7 @@ async def _index_with_delta_sync(
 # Public entry point
 # ---------------------------------------------------------------------------
 
+
 async def index_onedrive_files(
     session: AsyncSession,
     connector_id: int,
@@ -489,13 +526,20 @@ async def index_onedrive_files(
         )
         if not connector:
             error_msg = f"OneDrive connector with ID {connector_id} not found"
-            await task_logger.log_task_failure(log_entry, error_msg, None, {"error_type": "ConnectorNotFound"})
+            await task_logger.log_task_failure(
+                log_entry, error_msg, None, {"error_type": "ConnectorNotFound"}
+            )
             return 0, 0, error_msg
 
         token_encrypted = connector.config.get("_token_encrypted", False)
         if token_encrypted and not config.SECRET_KEY:
             error_msg = "SECRET_KEY not configured but credentials are encrypted"
-            await task_logger.log_task_failure(log_entry, error_msg, "Missing SECRET_KEY", {"error_type": "MissingSecretKey"})
+            await task_logger.log_task_failure(
+                log_entry,
+                error_msg,
+                "Missing SECRET_KEY",
+                {"error_type": "MissingSecretKey"},
+            )
             return 0, 0, error_msg
 
         connector_enable_summary = getattr(connector, "enable_summary", True)
@@ -513,10 +557,14 @@ async def index_onedrive_files(
         selected_files = items_dict.get("files", [])
         if selected_files:
             file_tuples = [(f["id"], f.get("name")) for f in selected_files]
-            indexed, skipped, errors = await _index_selected_files(
-                onedrive_client, session, file_tuples,
-                connector_id=connector_id, search_space_id=search_space_id,
-                user_id=user_id, enable_summary=connector_enable_summary,
+            indexed, skipped, _errors = await _index_selected_files(
+                onedrive_client,
+                session,
+                file_tuples,
+                connector_id=connector_id,
+                search_space_id=search_space_id,
+                user_id=user_id,
+                enable_summary=connector_enable_summary,
             )
             total_indexed += indexed
             total_skipped += skipped
@@ -534,8 +582,16 @@ async def index_onedrive_files(
             if can_use_delta:
                 logger.info(f"Using delta sync for folder {folder_name}")
                 indexed, skipped, new_delta_link = await _index_with_delta_sync(
-                    onedrive_client, session, connector_id, search_space_id, user_id,
-                    folder_id, delta_link, task_logger, log_entry, max_files,
+                    onedrive_client,
+                    session,
+                    connector_id,
+                    search_space_id,
+                    user_id,
+                    folder_id,
+                    delta_link,
+                    task_logger,
+                    log_entry,
+                    max_files,
                     enable_summary=connector_enable_summary,
                 )
                 total_indexed += indexed
@@ -550,18 +606,36 @@ async def index_onedrive_files(
 
                 # Reconciliation full scan
                 ri, rs = await _index_full_scan(
-                    onedrive_client, session, connector_id, search_space_id, user_id,
-                    folder_id, folder_name, task_logger, log_entry, max_files,
-                    include_subfolders, enable_summary=connector_enable_summary,
+                    onedrive_client,
+                    session,
+                    connector_id,
+                    search_space_id,
+                    user_id,
+                    folder_id,
+                    folder_name,
+                    task_logger,
+                    log_entry,
+                    max_files,
+                    include_subfolders,
+                    enable_summary=connector_enable_summary,
                 )
                 total_indexed += ri
                 total_skipped += rs
             else:
                 logger.info(f"Using full scan for folder {folder_name}")
                 indexed, skipped = await _index_full_scan(
-                    onedrive_client, session, connector_id, search_space_id, user_id,
-                    folder_id, folder_name, task_logger, log_entry, max_files,
-                    include_subfolders, enable_summary=connector_enable_summary,
+                    onedrive_client,
+                    session,
+                    connector_id,
+                    search_space_id,
+                    user_id,
+                    folder_id,
+                    folder_name,
+                    task_logger,
+                    log_entry,
+                    max_files,
+                    include_subfolders,
+                    enable_summary=connector_enable_summary,
                 )
                 total_indexed += indexed
                 total_skipped += skipped
@@ -585,22 +659,28 @@ async def index_onedrive_files(
             f"Successfully completed OneDrive indexing for connector {connector_id}",
             {"files_processed": total_indexed, "files_skipped": total_skipped},
         )
-        logger.info(f"OneDrive indexing completed: {total_indexed} indexed, {total_skipped} skipped")
+        logger.info(
+            f"OneDrive indexing completed: {total_indexed} indexed, {total_skipped} skipped"
+        )
         return total_indexed, total_skipped, None
 
     except SQLAlchemyError as db_error:
         await session.rollback()
         await task_logger.log_task_failure(
-            log_entry, f"Database error during OneDrive indexing for connector {connector_id}",
-            str(db_error), {"error_type": "SQLAlchemyError"},
+            log_entry,
+            f"Database error during OneDrive indexing for connector {connector_id}",
+            str(db_error),
+            {"error_type": "SQLAlchemyError"},
         )
         logger.error(f"Database error: {db_error!s}", exc_info=True)
         return 0, 0, f"Database error: {db_error!s}"
     except Exception as e:
         await session.rollback()
         await task_logger.log_task_failure(
-            log_entry, f"Failed to index OneDrive files for connector {connector_id}",
-            str(e), {"error_type": type(e).__name__},
+            log_entry,
+            f"Failed to index OneDrive files for connector {connector_id}",
+            str(e),
+            {"error_type": type(e).__name__},
         )
         logger.error(f"Failed to index OneDrive files: {e!s}", exc_info=True)
         return 0, 0, f"Failed to index OneDrive files: {e!s}"
diff --git a/surfsense_backend/tests/integration/indexing_pipeline/test_onedrive_pipeline.py b/surfsense_backend/tests/integration/indexing_pipeline/test_onedrive_pipeline.py
index ee83795a5..541e3a38e 100644
--- a/surfsense_backend/tests/integration/indexing_pipeline/test_onedrive_pipeline.py
+++ b/surfsense_backend/tests/integration/indexing_pipeline/test_onedrive_pipeline.py
@@ -13,7 +13,9 @@
 pytestmark = pytest.mark.integration
 
 
-def _onedrive_doc(*, unique_id: str, search_space_id: int, connector_id: int, user_id: str) -> ConnectorDocument:
+def _onedrive_doc(
+    *, unique_id: str, search_space_id: int, connector_id: int, user_id: str
+) -> ConnectorDocument:
     return ConnectorDocument(
         title=f"File {unique_id}.docx",
         source_markdown=f"## Document\n\nContent from {unique_id}",
@@ -32,7 +34,9 @@ def _onedrive_doc(*, unique_id: str, search_space_id: int, connector_id: int, us
     )
 
 
-@pytest.mark.usefixtures("patched_summarize", "patched_embed_texts", "patched_chunk_text")
+@pytest.mark.usefixtures(
+    "patched_summarize", "patched_embed_texts", "patched_chunk_text"
+)
 async def test_onedrive_pipeline_creates_ready_document(
     db_session, db_search_space, db_connector, db_user, mocker
 ):
@@ -61,7 +65,9 @@ async def test_onedrive_pipeline_creates_ready_document(
     assert DocumentStatus.is_state(row.status, DocumentStatus.READY)
 
 
-@pytest.mark.usefixtures("patched_summarize", "patched_embed_texts", "patched_chunk_text")
+@pytest.mark.usefixtures(
+    "patched_summarize", "patched_embed_texts", "patched_chunk_text"
+)
 async def test_onedrive_duplicate_content_skipped(
     db_session, db_search_space, db_connector, db_user, mocker
 ):
@@ -87,8 +93,6 @@ async def test_onedrive_duplicate_content_skipped(
     )
     first_doc = result.scalars().first()
     assert first_doc is not None
-    first_id = first_doc.id
-
     doc2 = _onedrive_doc(
         unique_id="od-dup-file",
         search_space_id=space_id,
@@ -97,4 +101,6 @@ async def test_onedrive_duplicate_content_skipped(
     )
 
     prepared2 = await service.prepare_for_indexing([doc2])
-    assert len(prepared2) == 0 or (len(prepared2) == 1 and prepared2[0].existing_document is not None)
+    assert len(prepared2) == 0 or (
+        len(prepared2) == 1 and prepared2[0].existing_document is not None
+    )
diff --git a/surfsense_backend/tests/unit/connector_indexers/test_onedrive_parallel.py b/surfsense_backend/tests/unit/connector_indexers/test_onedrive_parallel.py
index b5c774c6f..12a912b03 100644
--- a/surfsense_backend/tests/unit/connector_indexers/test_onedrive_parallel.py
+++ b/surfsense_backend/tests/unit/connector_indexers/test_onedrive_parallel.py
@@ -48,12 +48,14 @@ def _patch(side_effect=None, return_value=None):
             mock,
         )
         return mock
+
     return _patch
 
 
 # Slice 1: Tracer bullet
 async def test_single_file_returns_one_connector_document(
-    mock_onedrive_client, patch_extract,
+    mock_onedrive_client,
+    patch_extract,
 ):
     patch_extract(return_value=_mock_extract_ok("f1", "test.txt"))
 
@@ -75,7 +77,8 @@ async def test_single_file_returns_one_connector_document(
 
 # Slice 2: Multiple files all produce documents
 async def test_multiple_files_all_produce_documents(
-    mock_onedrive_client, patch_extract,
+    mock_onedrive_client,
+    patch_extract,
 ):
     files = [_make_file_dict(f"f{i}", f"file{i}.txt") for i in range(3)]
     patch_extract(
@@ -98,7 +101,8 @@ async def test_multiple_files_all_produce_documents(
 
 # Slice 3: Error isolation
 async def test_one_download_exception_does_not_block_others(
-    mock_onedrive_client, patch_extract,
+    mock_onedrive_client,
+    patch_extract,
 ):
     files = [_make_file_dict(f"f{i}", f"file{i}.txt") for i in range(3)]
     patch_extract(
@@ -125,7 +129,8 @@ async def test_one_download_exception_does_not_block_others(
 
 # Slice 4: ETL error counts as download failure
 async def test_etl_error_counts_as_download_failure(
-    mock_onedrive_client, patch_extract,
+    mock_onedrive_client,
+    patch_extract,
 ):
     files = [_make_file_dict("f0", "good.txt"), _make_file_dict("f1", "bad.txt")]
     patch_extract(
@@ -150,7 +155,8 @@ async def test_etl_error_counts_as_download_failure(
 
 # Slice 5: Semaphore bound
 async def test_concurrency_bounded_by_semaphore(
-    mock_onedrive_client, monkeypatch,
+    mock_onedrive_client,
+    monkeypatch,
 ):
     lock = asyncio.Lock()
     active = 0
@@ -190,7 +196,8 @@ async def _slow_extract(client, file):
 
 # Slice 6: Heartbeat fires
 async def test_heartbeat_fires_during_parallel_downloads(
-    mock_onedrive_client, monkeypatch,
+    mock_onedrive_client,
+    monkeypatch,
 ):
     import app.tasks.connector_indexers.onedrive_indexer as _mod
 
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 918032acd..92ced6e47 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
@@ -744,7 +744,11 @@ export function DocumentsTableShell({
 																</button>
 															</DropdownMenuTrigger>
 															<DropdownMenuContent align="end" className="w-48">
-																<DropdownMenuItem onClick={() => onOpenInTab ? onOpenInTab(doc) : handleViewDocument(doc)}>
+																<DropdownMenuItem
+																	onClick={() =>
+																		onOpenInTab ? onOpenInTab(doc) : handleViewDocument(doc)
+																	}
+																>
 																	<Eye className="h-4 w-4" />
 																	Open
 																</DropdownMenuItem>
diff --git a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
index 8c7b16c72..8928974d9 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
@@ -666,62 +666,62 @@ export default function NewChatPage() {
 				const scheduleFlush = () => batcher.schedule(flushMessages);
 
 				for await (const parsed of readSSEStream(response)) {
-				switch (parsed.type) {
-					case "text-delta":
-						appendText(contentPartsState, parsed.delta);
-						scheduleFlush();
-						break;
+					switch (parsed.type) {
+						case "text-delta":
+							appendText(contentPartsState, parsed.delta);
+							scheduleFlush();
+							break;
 
-					case "tool-input-start":
-						addToolCall(contentPartsState, TOOLS_WITH_UI, parsed.toolCallId, parsed.toolName, {});
-						batcher.flush();
-						break;
+						case "tool-input-start":
+							addToolCall(contentPartsState, TOOLS_WITH_UI, parsed.toolCallId, parsed.toolName, {});
+							batcher.flush();
+							break;
 
-					case "tool-input-available": {
-						if (toolCallIndices.has(parsed.toolCallId)) {
-							updateToolCall(contentPartsState, parsed.toolCallId, { args: parsed.input || {} });
-						} else {
-							addToolCall(
-								contentPartsState,
-								TOOLS_WITH_UI,
-								parsed.toolCallId,
-								parsed.toolName,
-								parsed.input || {}
-							);
+						case "tool-input-available": {
+							if (toolCallIndices.has(parsed.toolCallId)) {
+								updateToolCall(contentPartsState, parsed.toolCallId, { args: parsed.input || {} });
+							} else {
+								addToolCall(
+									contentPartsState,
+									TOOLS_WITH_UI,
+									parsed.toolCallId,
+									parsed.toolName,
+									parsed.input || {}
+								);
+							}
+							batcher.flush();
+							break;
 						}
-						batcher.flush();
-						break;
-					}
 
-					case "tool-output-available": {
-						updateToolCall(contentPartsState, parsed.toolCallId, { result: parsed.output });
-						markInterruptsCompleted(contentParts);
-						if (parsed.output?.status === "pending" && parsed.output?.podcast_id) {
-							const idx = toolCallIndices.get(parsed.toolCallId);
-							if (idx !== undefined) {
-								const part = contentParts[idx];
-								if (part?.type === "tool-call" && part.toolName === "generate_podcast") {
-									setActivePodcastTaskId(String(parsed.output.podcast_id));
+						case "tool-output-available": {
+							updateToolCall(contentPartsState, parsed.toolCallId, { result: parsed.output });
+							markInterruptsCompleted(contentParts);
+							if (parsed.output?.status === "pending" && parsed.output?.podcast_id) {
+								const idx = toolCallIndices.get(parsed.toolCallId);
+								if (idx !== undefined) {
+									const part = contentParts[idx];
+									if (part?.type === "tool-call" && part.toolName === "generate_podcast") {
+										setActivePodcastTaskId(String(parsed.output.podcast_id));
+									}
 								}
 							}
+							batcher.flush();
+							break;
 						}
-						batcher.flush();
-						break;
-					}
 
-					case "data-thinking-step": {
-						const stepData = parsed.data as ThinkingStepData;
-						if (stepData?.id) {
-							currentThinkingSteps.set(stepData.id, stepData);
-							const didUpdate = updateThinkingSteps(contentPartsState, currentThinkingSteps);
-							if (didUpdate) {
-								scheduleFlush();
+						case "data-thinking-step": {
+							const stepData = parsed.data as ThinkingStepData;
+							if (stepData?.id) {
+								currentThinkingSteps.set(stepData.id, stepData);
+								const didUpdate = updateThinkingSteps(contentPartsState, currentThinkingSteps);
+								if (didUpdate) {
+									scheduleFlush();
+								}
 							}
+							break;
 						}
-						break;
-					}
 
-					case "data-thread-title-update": {
+						case "data-thread-title-update": {
 							const titleData = parsed.data as { threadId: number; title: string };
 							if (titleData?.title && titleData?.threadId === currentThreadId) {
 								setCurrentThread((prev) => (prev ? { ...prev, title: titleData.title } : prev));
@@ -1012,7 +1012,7 @@ export default function NewChatPage() {
 					throw new Error(`Backend error: ${response.status}`);
 				}
 
-			const flushMessages = () => {
+				const flushMessages = () => {
 					setMessages((prev) =>
 						prev.map((m) =>
 							m.id === assistantMsgId
@@ -1024,55 +1024,55 @@ export default function NewChatPage() {
 				const scheduleFlush = () => batcher.schedule(flushMessages);
 
 				for await (const parsed of readSSEStream(response)) {
-				switch (parsed.type) {
-					case "text-delta":
-						appendText(contentPartsState, parsed.delta);
-						scheduleFlush();
-						break;
+					switch (parsed.type) {
+						case "text-delta":
+							appendText(contentPartsState, parsed.delta);
+							scheduleFlush();
+							break;
 
-					case "tool-input-start":
-						addToolCall(contentPartsState, TOOLS_WITH_UI, parsed.toolCallId, parsed.toolName, {});
-						batcher.flush();
-						break;
+						case "tool-input-start":
+							addToolCall(contentPartsState, TOOLS_WITH_UI, parsed.toolCallId, parsed.toolName, {});
+							batcher.flush();
+							break;
 
-					case "tool-input-available":
-						if (toolCallIndices.has(parsed.toolCallId)) {
+						case "tool-input-available":
+							if (toolCallIndices.has(parsed.toolCallId)) {
+								updateToolCall(contentPartsState, parsed.toolCallId, {
+									args: parsed.input || {},
+								});
+							} else {
+								addToolCall(
+									contentPartsState,
+									TOOLS_WITH_UI,
+									parsed.toolCallId,
+									parsed.toolName,
+									parsed.input || {}
+								);
+							}
+							batcher.flush();
+							break;
+
+						case "tool-output-available":
 							updateToolCall(contentPartsState, parsed.toolCallId, {
-								args: parsed.input || {},
+								result: parsed.output,
 							});
-						} else {
-							addToolCall(
-								contentPartsState,
-								TOOLS_WITH_UI,
-								parsed.toolCallId,
-								parsed.toolName,
-								parsed.input || {}
-							);
-						}
-						batcher.flush();
-						break;
-
-					case "tool-output-available":
-						updateToolCall(contentPartsState, parsed.toolCallId, {
-							result: parsed.output,
-						});
-						markInterruptsCompleted(contentParts);
-						batcher.flush();
-						break;
+							markInterruptsCompleted(contentParts);
+							batcher.flush();
+							break;
 
-					case "data-thinking-step": {
-						const stepData = parsed.data as ThinkingStepData;
-						if (stepData?.id) {
-							currentThinkingSteps.set(stepData.id, stepData);
-							const didUpdate = updateThinkingSteps(contentPartsState, currentThinkingSteps);
-							if (didUpdate) {
-								scheduleFlush();
+						case "data-thinking-step": {
+							const stepData = parsed.data as ThinkingStepData;
+							if (stepData?.id) {
+								currentThinkingSteps.set(stepData.id, stepData);
+								const didUpdate = updateThinkingSteps(contentPartsState, currentThinkingSteps);
+								if (didUpdate) {
+									scheduleFlush();
+								}
 							}
+							break;
 						}
-						break;
-					}
 
-					case "data-interrupt-request": {
+						case "data-interrupt-request": {
 							const interruptData = parsed.data as Record<string, unknown>;
 							const actionRequests = (interruptData.action_requests ?? []) as Array<{
 								name: string;
@@ -1330,7 +1330,7 @@ export default function NewChatPage() {
 					throw new Error(`Backend error: ${response.status}`);
 				}
 
-			const flushMessages = () => {
+				const flushMessages = () => {
 					setMessages((prev) =>
 						prev.map((m) =>
 							m.id === assistantMsgId
@@ -1342,63 +1342,63 @@ export default function NewChatPage() {
 				const scheduleFlush = () => batcher.schedule(flushMessages);
 
 				for await (const parsed of readSSEStream(response)) {
-				switch (parsed.type) {
-					case "text-delta":
-						appendText(contentPartsState, parsed.delta);
-						scheduleFlush();
-						break;
+					switch (parsed.type) {
+						case "text-delta":
+							appendText(contentPartsState, parsed.delta);
+							scheduleFlush();
+							break;
 
-					case "tool-input-start":
-						addToolCall(contentPartsState, TOOLS_WITH_UI, parsed.toolCallId, parsed.toolName, {});
-						batcher.flush();
-						break;
+						case "tool-input-start":
+							addToolCall(contentPartsState, TOOLS_WITH_UI, parsed.toolCallId, parsed.toolName, {});
+							batcher.flush();
+							break;
 
-					case "tool-input-available":
-						if (toolCallIndices.has(parsed.toolCallId)) {
-							updateToolCall(contentPartsState, parsed.toolCallId, { args: parsed.input || {} });
-						} else {
-							addToolCall(
-								contentPartsState,
-								TOOLS_WITH_UI,
-								parsed.toolCallId,
-								parsed.toolName,
-								parsed.input || {}
-							);
-						}
-						batcher.flush();
-						break;
+						case "tool-input-available":
+							if (toolCallIndices.has(parsed.toolCallId)) {
+								updateToolCall(contentPartsState, parsed.toolCallId, { args: parsed.input || {} });
+							} else {
+								addToolCall(
+									contentPartsState,
+									TOOLS_WITH_UI,
+									parsed.toolCallId,
+									parsed.toolName,
+									parsed.input || {}
+								);
+							}
+							batcher.flush();
+							break;
 
-					case "tool-output-available":
-						updateToolCall(contentPartsState, parsed.toolCallId, { result: parsed.output });
-						markInterruptsCompleted(contentParts);
-						if (parsed.output?.status === "pending" && parsed.output?.podcast_id) {
-							const idx = toolCallIndices.get(parsed.toolCallId);
-							if (idx !== undefined) {
-								const part = contentParts[idx];
-								if (part?.type === "tool-call" && part.toolName === "generate_podcast") {
-									setActivePodcastTaskId(String(parsed.output.podcast_id));
+						case "tool-output-available":
+							updateToolCall(contentPartsState, parsed.toolCallId, { result: parsed.output });
+							markInterruptsCompleted(contentParts);
+							if (parsed.output?.status === "pending" && parsed.output?.podcast_id) {
+								const idx = toolCallIndices.get(parsed.toolCallId);
+								if (idx !== undefined) {
+									const part = contentParts[idx];
+									if (part?.type === "tool-call" && part.toolName === "generate_podcast") {
+										setActivePodcastTaskId(String(parsed.output.podcast_id));
+									}
 								}
 							}
-						}
-						batcher.flush();
-						break;
+							batcher.flush();
+							break;
 
-					case "data-thinking-step": {
-						const stepData = parsed.data as ThinkingStepData;
-						if (stepData?.id) {
-							currentThinkingSteps.set(stepData.id, stepData);
-							const didUpdate = updateThinkingSteps(contentPartsState, currentThinkingSteps);
-							if (didUpdate) {
-								scheduleFlush();
+						case "data-thinking-step": {
+							const stepData = parsed.data as ThinkingStepData;
+							if (stepData?.id) {
+								currentThinkingSteps.set(stepData.id, stepData);
+								const didUpdate = updateThinkingSteps(contentPartsState, currentThinkingSteps);
+								if (didUpdate) {
+									scheduleFlush();
+								}
 							}
+							break;
 						}
-						break;
-					}
 
-					case "error":
-						throw new Error(parsed.errorText || "Server error");
+						case "error":
+							throw new Error(parsed.errorText || "Server error");
+					}
 				}
-			}
 
 				batcher.flush();
 
@@ -1547,4 +1547,4 @@ export default function NewChatPage() {
 			</div>
 		</AssistantRuntimeProvider>
 	);
-}
\ No newline at end of file
+}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
index 5e3f1cf7b..4dba3bbb6 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
@@ -166,13 +166,13 @@ export default function OnboardPage() {
 
 				{/* Form card */}
 				<div className="rounded-xl border bg-background dark:bg-neutral-900 flex-1 min-h-0 overflow-y-auto px-6 py-6">
-				<LLMConfigForm
-					searchSpaceId={searchSpaceId}
-					onSubmit={handleSubmit}
-					mode="create"
-					showAdvanced={true}
-					formId="onboard-config-form"
-					initialData={{
+					<LLMConfigForm
+						searchSpaceId={searchSpaceId}
+						onSubmit={handleSubmit}
+						mode="create"
+						showAdvanced={true}
+						formId="onboard-config-form"
+						initialData={{
 							citations_enabled: true,
 							use_default_system_instructions: true,
 						}}
@@ -190,9 +190,7 @@ export default function OnboardPage() {
 						<span className={isSubmitting ? "opacity-0" : ""}>Start Using SurfSense</span>
 						{isSubmitting && <Spinner size="sm" className="absolute" />}
 					</Button>
-					<p className="text-xs text-muted-foreground">
-						You can add more configurations later
-					</p>
+					<p className="text-xs text-muted-foreground">You can add more configurations later</p>
 				</div>
 			</div>
 		</div>
diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
index b6f008887..d9ca9efb3 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
@@ -308,7 +308,8 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
 				{invitesLoading ? (
 					<Skeleton className="h-9 w-32 rounded-md" />
 				) : (
-					canInvite && activeInvites.length > 0 && (
+					canInvite &&
+					activeInvites.length > 0 && (
 						<AllInvitesDialog invites={activeInvites} onRevokeInvite={handleRevokeInvite} />
 					)
 				)}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
index 104dc111f..c2d2c01de 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/PromptsContent.tsx
@@ -3,11 +3,11 @@
 import { PenLine, Plus, Sparkles, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
-import type { PromptRead } from "@/contracts/types/prompts.types";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Spinner } from "@/components/ui/spinner";
+import type { PromptRead } from "@/contracts/types/prompts.types";
 import { promptsApiService } from "@/lib/apis/prompts-api.service";
 
 interface PromptFormData {
@@ -99,7 +99,9 @@ export function PromptsContent() {
 		<div className="space-y-6 min-w-0 overflow-hidden">
 			<div className="flex items-center justify-between">
 				<p className="text-sm text-muted-foreground">
-					Create prompt templates triggered with <kbd className="rounded border bg-muted px-1.5 py-0.5 text-xs font-mono">/</kbd> in the chat composer.
+					Create prompt templates triggered with{" "}
+					<kbd className="rounded border bg-muted px-1.5 py-0.5 text-xs font-mono">/</kbd> in the
+					chat composer.
 				</p>
 				{!showForm && (
 					<Button
@@ -144,7 +146,11 @@ export function PromptsContent() {
 							className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none resize-none focus:ring-1 focus:ring-ring"
 						/>
 						<p className="text-xs text-muted-foreground">
-							Use <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px]">{"{selection}"}</code> to insert the input text. If omitted, the text is appended automatically.
+							Use{" "}
+							<code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px]">
+								{"{selection}"}
+							</code>{" "}
+							to insert the input text. If omitted, the text is appended automatically.
 						</p>
 					</div>
 
@@ -153,7 +159,9 @@ export function PromptsContent() {
 						<select
 							id="prompt-mode"
 							value={formData.mode}
-							onChange={(e) => setFormData((p) => ({ ...p, mode: e.target.value as "transform" | "explore" }))}
+							onChange={(e) =>
+								setFormData((p) => ({ ...p, mode: e.target.value as "transform" | "explore" }))
+							}
 							className="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-ring"
 						>
 							<option value="transform">Transform — rewrites or modifies your text</option>
diff --git a/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts b/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts
index 00156b844..861606f80 100644
--- a/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts
+++ b/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts
@@ -78,7 +78,10 @@ export const deleteNewLLMConfigMutationAtom = atomWithMutation((get) => {
 		mutationFn: async (request: DeleteNewLLMConfigRequest & { name: string }) => {
 			return newLLMConfigApiService.deleteConfig({ id: request.id });
 		},
-		onSuccess: (_: DeleteNewLLMConfigResponse, request: DeleteNewLLMConfigRequest & { name: string }) => {
+		onSuccess: (
+			_: DeleteNewLLMConfigResponse,
+			request: DeleteNewLLMConfigRequest & { name: string }
+		) => {
 			toast.success(`${request.name} deleted`);
 			queryClient.setQueryData(
 				cacheKeys.newLLMConfigs.all(Number(searchSpaceId)),
diff --git a/surfsense_web/atoms/tabs/tabs.atom.ts b/surfsense_web/atoms/tabs/tabs.atom.ts
index 2d462e4d5..22cc5373a 100644
--- a/surfsense_web/atoms/tabs/tabs.atom.ts
+++ b/surfsense_web/atoms/tabs/tabs.atom.ts
@@ -143,9 +143,7 @@ export const updateChatTabTitleAtom = atom(
 			set(tabsStateAtom, {
 				...state,
 				activeTabId: tabId,
-				tabs: state.tabs.map((t) =>
-					t.id === "chat-new" ? { ...t, id: tabId, chatId, title } : t
-				),
+				tabs: state.tabs.map((t) => (t.id === "chat-new" ? { ...t, id: tabId, chatId, title } : t)),
 			});
 			return;
 		}
diff --git a/surfsense_web/components/assistant-ui/assistant-message.tsx b/surfsense_web/components/assistant-ui/assistant-message.tsx
index 2223ff5dd..ba2753da8 100644
--- a/surfsense_web/components/assistant-ui/assistant-message.tsx
+++ b/surfsense_web/components/assistant-ui/assistant-message.tsx
@@ -7,7 +7,14 @@ import {
 	useAuiState,
 } from "@assistant-ui/react";
 import { useAtomValue } from "jotai";
-import { CheckIcon, ClipboardPaste, CopyIcon, DownloadIcon, MessageSquare, RefreshCwIcon } from "lucide-react";
+import {
+	CheckIcon,
+	ClipboardPaste,
+	CopyIcon,
+	DownloadIcon,
+	MessageSquare,
+	RefreshCwIcon,
+} from "lucide-react";
 import type { FC } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { commentsEnabledAtom, targetCommentIdAtom } from "@/atoms/chat/current-thread.atom";
@@ -41,10 +48,6 @@ import {
 	CreateGoogleDriveFileToolUI,
 	DeleteGoogleDriveFileToolUI,
 } from "@/components/tool-ui/google-drive";
-import {
-	CreateOneDriveFileToolUI,
-	DeleteOneDriveFileToolUI,
-} from "@/components/tool-ui/onedrive";
 import {
 	CreateJiraIssueToolUI,
 	DeleteJiraIssueToolUI,
@@ -60,6 +63,7 @@ import {
 	DeleteNotionPageToolUI,
 	UpdateNotionPageToolUI,
 } from "@/components/tool-ui/notion";
+import { CreateOneDriveFileToolUI, DeleteOneDriveFileToolUI } from "@/components/tool-ui/onedrive";
 import { SandboxExecuteToolUI } from "@/components/tool-ui/sandbox-execute";
 import { RecallMemoryToolUI, SaveMemoryToolUI } from "@/components/tool-ui/user-memory";
 import { GenerateVideoPresentationToolUI } from "@/components/tool-ui/video-presentation";
@@ -117,10 +121,10 @@ const AssistantMessageInner: FC = () => {
 								create_confluence_page: CreateConfluencePageToolUI,
 								update_confluence_page: UpdateConfluencePageToolUI,
 								delete_confluence_page: DeleteConfluencePageToolUI,
-							web_search: () => null,
-							link_preview: () => null,
-							multi_link_preview: () => null,
-							scrape_webpage: () => null,
+								web_search: () => null,
+								link_preview: () => null,
+								multi_link_preview: () => null,
+								scrape_webpage: () => null,
 							},
 							Fallback: ToolFallback,
 						},
diff --git a/surfsense_web/components/assistant-ui/citation-metadata-context.tsx b/surfsense_web/components/assistant-ui/citation-metadata-context.tsx
index 7502b6951..b14d9ba4f 100644
--- a/surfsense_web/components/assistant-ui/citation-metadata-context.tsx
+++ b/surfsense_web/components/assistant-ui/citation-metadata-context.tsx
@@ -24,7 +24,9 @@ interface MessageContent {
 }
 
 export const CitationMetadataProvider: FC<{ children: ReactNode }> = ({ children }) => {
-	const content = useAuiState(({ message }) => (message as { content?: MessageContent[] })?.content);
+	const content = useAuiState(
+		({ message }) => (message as { content?: MessageContent[] })?.content
+	);
 
 	const metadataMap = useMemo<CitationMetadataMap>(() => {
 		if (!content || !Array.isArray(content)) return new Map();
@@ -51,7 +53,9 @@ export const CitationMetadataProvider: FC<{ children: ReactNode }> = ({ children
 	}, [content]);
 
 	return (
-		<CitationMetadataContext.Provider value={metadataMap}>{children}</CitationMetadataContext.Provider>
+		<CitationMetadataContext.Provider value={metadataMap}>
+			{children}
+		</CitationMetadataContext.Provider>
 	);
 };
 
diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index 27868f5da..5a35016f5 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -198,7 +198,6 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 
 		return (
 			<Dialog open={isOpen} modal={false} onOpenChange={handleOpenChange}>
-
 				{isOpen &&
 					createPortal(
 						<div
@@ -299,11 +298,11 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 							onBack={handleBackFromEdit}
 							onQuickIndex={(() => {
 								const cfg = connectorConfig || editingConnector.config;
-							const isDriveOrOneDrive =
-								editingConnector.connector_type === "GOOGLE_DRIVE_CONNECTOR" ||
-								editingConnector.connector_type === "COMPOSIO_GOOGLE_DRIVE_CONNECTOR" ||
-								editingConnector.connector_type === "ONEDRIVE_CONNECTOR";
-							const hasDriveItems = isDriveOrOneDrive
+								const isDriveOrOneDrive =
+									editingConnector.connector_type === "GOOGLE_DRIVE_CONNECTOR" ||
+									editingConnector.connector_type === "COMPOSIO_GOOGLE_DRIVE_CONNECTOR" ||
+									editingConnector.connector_type === "ONEDRIVE_CONNECTOR";
+								const hasDriveItems = isDriveOrOneDrive
 									? ((cfg?.selected_folders as unknown[]) ?? []).length > 0 ||
 										((cfg?.selected_files as unknown[]) ?? []).length > 0
 									: true;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/onedrive-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/onedrive-config.tsx
index 250a353cd..dc8ec3ded 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/onedrive-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/onedrive-config.tsx
@@ -212,8 +212,7 @@ export const OneDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigCh
 
 				{isAuthExpired && (
 					<p className="text-xs text-amber-600 dark:text-amber-500">
-						Your OneDrive authentication has expired. Please re-authenticate using the button
-						below.
+						Your OneDrive authentication has expired. Please re-authenticate using the button below.
 					</p>
 				)}
 
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
index ba43ce823..605de93b7 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
@@ -19,9 +19,9 @@ import { LinkupApiConfig } from "./components/linkup-api-config";
 import { LumaConfig } from "./components/luma-config";
 import { MCPConfig } from "./components/mcp-config";
 import { ObsidianConfig } from "./components/obsidian-config";
+import { OneDriveConfig } from "./components/onedrive-config";
 import { SlackConfig } from "./components/slack-config";
 import { TavilyApiConfig } from "./components/tavily-api-config";
-import { OneDriveConfig } from "./components/onedrive-config";
 import { TeamsConfig } from "./components/teams-config";
 import { WebcrawlerConfig } from "./components/webcrawler-config";
 
diff --git a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
index 0ee34d7c2..e5ce803c1 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
@@ -779,11 +779,11 @@ export const useConnectorDialog = () => {
 					});
 				}
 
-			// Handle Google Drive / OneDrive folder selection (regular and Composio)
-			if (
-				(indexingConfig.connectorType === "GOOGLE_DRIVE_CONNECTOR" ||
-					indexingConfig.connectorType === "COMPOSIO_GOOGLE_DRIVE_CONNECTOR" ||
-					indexingConfig.connectorType === "ONEDRIVE_CONNECTOR") &&
+				// Handle Google Drive / OneDrive folder selection (regular and Composio)
+				if (
+					(indexingConfig.connectorType === "GOOGLE_DRIVE_CONNECTOR" ||
+						indexingConfig.connectorType === "COMPOSIO_GOOGLE_DRIVE_CONNECTOR" ||
+						indexingConfig.connectorType === "ONEDRIVE_CONNECTOR") &&
 					indexingConnectorConfig
 				) {
 					const selectedFolders = indexingConnectorConfig.selected_folders as
diff --git a/surfsense_web/components/assistant-ui/inline-mention-editor.tsx b/surfsense_web/components/assistant-ui/inline-mention-editor.tsx
index b8a0febbe..af7a8397c 100644
--- a/surfsense_web/components/assistant-ui/inline-mention-editor.tsx
+++ b/surfsense_web/components/assistant-ui/inline-mention-editor.tsx
@@ -544,7 +544,12 @@ export const InlineMentionEditor = forwardRef<InlineMentionEditorRef, InlineMent
 						}
 					}
 
-					if (slashIndex !== -1 && (slashIndex === 0 || textContent[slashIndex - 1] === " " || textContent[slashIndex - 1] === "\n")) {
+					if (
+						slashIndex !== -1 &&
+						(slashIndex === 0 ||
+							textContent[slashIndex - 1] === " " ||
+							textContent[slashIndex - 1] === "\n")
+					) {
 						const query = textContent.slice(slashIndex + 1, cursorPos);
 						if (!query.startsWith(" ")) {
 							shouldTriggerAction = true;
@@ -575,7 +580,15 @@ export const InlineMentionEditor = forwardRef<InlineMentionEditorRef, InlineMent
 
 			// Notify parent of change
 			onChange?.(text, Array.from(mentionedDocs.values()));
-		}, [getText, mentionedDocs, onChange, onMentionTrigger, onMentionClose, onActionTrigger, onActionClose]);
+		}, [
+			getText,
+			mentionedDocs,
+			onChange,
+			onMentionTrigger,
+			onMentionClose,
+			onActionTrigger,
+			onActionClose,
+		]);
 
 		// Handle keydown
 		const handleKeyDown = useCallback(
diff --git a/surfsense_web/components/assistant-ui/markdown-text.tsx b/surfsense_web/components/assistant-ui/markdown-text.tsx
index 192f46670..c308f8c05 100644
--- a/surfsense_web/components/assistant-ui/markdown-text.tsx
+++ b/surfsense_web/components/assistant-ui/markdown-text.tsx
@@ -395,7 +395,10 @@ const defaultComponents = memoizeMarkdownComponents({
 		if (!isCodeBlock) {
 			return (
 				<code
-					className={cn("aui-md-inline-code rounded-md border bg-muted px-1.5 py-0.5 font-mono text-[0.9em] font-normal", className)}
+					className={cn(
+						"aui-md-inline-code rounded-md border bg-muted px-1.5 py-0.5 font-mono text-[0.9em] font-normal",
+						className
+					)}
 					{...props}
 				>
 					{children}
diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 5d513a6ad..3826f8a80 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -61,11 +61,11 @@ import {
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { UserMessage } from "@/components/assistant-ui/user-message";
 import { SLIDEOUT_PANEL_OPENED_EVENT } from "@/components/layout/ui/sidebar/SidebarSlideOutPanel";
-import { PromptPicker, type PromptPickerRef } from "@/components/new-chat/prompt-picker";
 import {
 	DocumentMentionPicker,
 	type DocumentMentionPickerRef,
 } from "@/components/new-chat/document-mention-picker";
+import { PromptPicker, type PromptPickerRef } from "@/components/new-chat/prompt-picker";
 import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
@@ -356,7 +356,9 @@ const Composer: FC = () => {
 	const submitCleanupRef = useRef<(() => void) | null>(null);
 
 	useEffect(() => {
-		return () => { submitCleanupRef.current?.(); };
+		return () => {
+			submitCleanupRef.current?.();
+		};
 	}, []);
 
 	const [clipboardInitialText, setClipboardInitialText] = useState<string | undefined>();
@@ -498,7 +500,9 @@ const Composer: FC = () => {
 			}
 			const finalPrompt = action.prompt.includes("{selection}")
 				? action.prompt.replace("{selection}", () => userText)
-				: userText ? `${action.prompt}\n\n${userText}` : action.prompt;
+				: userText
+					? `${action.prompt}\n\n${userText}`
+					: action.prompt;
 			aui.composer().setText(finalPrompt);
 			aui.composer().send();
 			editorRef.current?.clear();
@@ -590,9 +594,7 @@ const Composer: FC = () => {
 		if (!showDocumentPopover && !showPromptPicker) {
 			if (clipboardInitialText) {
 				const userText = editorRef.current?.getText() ?? "";
-				const combined = userText
-					? `${userText}\n\n${clipboardInitialText}`
-					: clipboardInitialText;
+				const combined = userText ? `${userText}\n\n${clipboardInitialText}` : clipboardInitialText;
 				aui.composer().setText(combined);
 				setClipboardInitialText(undefined);
 			}
@@ -706,7 +708,7 @@ const Composer: FC = () => {
 	return (
 		<ComposerPrimitive.Root
 			className="aui-composer-root relative flex w-full flex-col gap-2"
-			style={(showPromptPicker && clipboardInitialText) ? { marginBottom: 220 } : undefined}
+			style={showPromptPicker && clipboardInitialText ? { marginBottom: 220 } : undefined}
 		>
 			<ChatSessionStatus
 				isAiResponding={isAiResponding}
@@ -714,7 +716,10 @@ const Composer: FC = () => {
 				currentUserId={currentUser?.id ?? null}
 				members={members ?? []}
 			/>
-			<div ref={composerBoxRef} className="aui-composer-attachment-dropzone flex w-full flex-col overflow-hidden rounded-2xl border-input bg-muted pt-2 outline-none transition-shadow">
+			<div
+				ref={composerBoxRef}
+				className="aui-composer-attachment-dropzone flex w-full flex-col overflow-hidden rounded-2xl border-input bg-muted pt-2 outline-none transition-shadow"
+			>
 				{clipboardInitialText && (
 					<ClipboardChip
 						text={clipboardInitialText}
@@ -777,10 +782,11 @@ const Composer: FC = () => {
 								position: "fixed",
 								...(clipboardInitialText && composerBoxRef.current
 									? { top: `${composerBoxRef.current.getBoundingClientRect().bottom + 8}px` }
-									: { bottom: editorContainerRef.current
-										? `${window.innerHeight - editorContainerRef.current.getBoundingClientRect().top + 8}px`
-										: "200px" }
-								),
+									: {
+											bottom: editorContainerRef.current
+												? `${window.innerHeight - editorContainerRef.current.getBoundingClientRect().top + 8}px`
+												: "200px",
+										}),
 								left: editorContainerRef.current
 									? `${editorContainerRef.current.getBoundingClientRect().left}px`
 									: "50%",
diff --git a/surfsense_web/components/documents/FolderTreeView.tsx b/surfsense_web/components/documents/FolderTreeView.tsx
index a8397e2b5..f63d5da5c 100644
--- a/surfsense_web/components/documents/FolderTreeView.tsx
+++ b/surfsense_web/components/documents/FolderTreeView.tsx
@@ -240,7 +240,9 @@ export function FolderTreeView({
 		return (
 			<div className="flex flex-1 flex-col items-center justify-center gap-1 px-4 py-12 text-muted-foreground">
 				<p className="text-sm font-medium">No documents found</p>
-				<p className="text-xs text-muted-foreground/70">Use the upload button or connect a source above</p>
+				<p className="text-xs text-muted-foreground/70">
+					Use the upload button or connect a source above
+				</p>
 			</div>
 		);
 	}
diff --git a/surfsense_web/components/editor-panel/editor-panel.tsx b/surfsense_web/components/editor-panel/editor-panel.tsx
index aff1367b0..308ad158b 100644
--- a/surfsense_web/components/editor-panel/editor-panel.tsx
+++ b/surfsense_web/components/editor-panel/editor-panel.tsx
@@ -5,8 +5,8 @@ import { AlertCircle, XIcon } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { closeEditorPanelAtom, editorPanelAtom } from "@/atoms/editor/editor-panel.atom";
-import { MarkdownViewer } from "@/components/markdown-viewer";
 import { PlateEditor } from "@/components/editor/plate-editor";
+import { MarkdownViewer } from "@/components/markdown-viewer";
 import { Button } from "@/components/ui/button";
 import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
 import { useMediaQuery } from "@/hooks/use-media-query";
diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
index 3db53285b..abc73425e 100644
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@@ -20,7 +20,12 @@ import {
 	teamDialogAtom,
 	userSettingsDialogAtom,
 } from "@/atoms/settings/settings-dialog.atoms";
-import { removeChatTabAtom, resetTabsAtom, syncChatTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
+import {
+	removeChatTabAtom,
+	resetTabsAtom,
+	syncChatTabAtom,
+	type Tab,
+} from "@/atoms/tabs/tabs.atom";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { MorePagesDialog } from "@/components/settings/more-pages-dialog";
 import { SearchSpaceSettingsDialog } from "@/components/settings/search-space-settings-dialog";
@@ -846,7 +851,9 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 							disabled={isRenamingChat || !newChatTitle.trim()}
 							className="relative"
 						>
-							<span className={isRenamingChat ? "opacity-0" : ""}>{tSidebar("rename") || "Rename"}</span>
+							<span className={isRenamingChat ? "opacity-0" : ""}>
+								{tSidebar("rename") || "Rename"}
+							</span>
 							{isRenamingChat && (
 								<span className="absolute h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
 							)}
diff --git a/surfsense_web/components/layout/ui/header/Header.tsx b/surfsense_web/components/layout/ui/header/Header.tsx
index c28fecbbe..cdf7a4fc4 100644
--- a/surfsense_web/components/layout/ui/header/Header.tsx
+++ b/surfsense_web/components/layout/ui/header/Header.tsx
@@ -2,8 +2,8 @@
 
 import { useAtomValue } from "jotai";
 import { usePathname } from "next/navigation";
-import { hitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
 import { currentThreadAtom } from "@/atoms/chat/current-thread.atom";
+import { hitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
 import { reportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
 import { editorPanelAtom } from "@/atoms/editor/editor-panel.atom";
@@ -37,7 +37,8 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
 	const reportOpen = reportState.isOpen && !!reportState.reportId;
 	const editorOpen = editorState.isOpen && !!editorState.documentId;
 	const hitlEditOpen = hitlEditState.isOpen && !!hitlEditState.onSave;
-	const showExpandButton = !isMobile && collapsed && (documentsOpen || reportOpen || editorOpen || hitlEditOpen);
+	const showExpandButton =
+		!isMobile && collapsed && (documentsOpen || reportOpen || editorOpen || hitlEditOpen);
 	const hasTabBar = tabs.length > 1;
 
 	const currentThreadState = useAtomValue(currentThreadAtom);
@@ -71,7 +72,9 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
 			</div>
 
 			{/* Right side - Actions */}
-			<div className={cn("ml-auto flex items-center gap-2", showExpandButton && !hasTabBar && "mr-10")}>
+			<div
+				className={cn("ml-auto flex items-center gap-2", showExpandButton && !hasTabBar && "mr-10")}
+			>
 				{hasThread && (
 					<ChatShareButton thread={threadForButton} onVisibilityChange={handleVisibilityChange} />
 				)}
diff --git a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
index 01e397309..1bc773374 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useSetAtom } from "jotai";
 import { format } from "date-fns";
+import { useSetAtom } from "jotai";
 import {
 	ArchiveIcon,
 	ChevronLeft,
@@ -19,6 +19,7 @@ import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import { removeChatTabAtom } from "@/atoms/tabs/tabs.atom";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/animated-tabs";
 import { Button } from "@/components/ui/button";
 import {
@@ -42,7 +43,6 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useLongPress } from "@/hooks/use-long-press";
 import { useIsMobile } from "@/hooks/use-mobile";
-import { removeChatTabAtom } from "@/atoms/tabs/tabs.atom";
 import {
 	deleteThread,
 	fetchThreads,
diff --git a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
index b13bf2ba3..b2ba86673 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useSetAtom } from "jotai";
 import { format } from "date-fns";
+import { useSetAtom } from "jotai";
 import {
 	ArchiveIcon,
 	ChevronLeft,
@@ -19,6 +19,7 @@ import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import { removeChatTabAtom } from "@/atoms/tabs/tabs.atom";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/animated-tabs";
 import { Button } from "@/components/ui/button";
 import {
@@ -42,7 +43,6 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useLongPress } from "@/hooks/use-long-press";
 import { useIsMobile } from "@/hooks/use-mobile";
-import { removeChatTabAtom } from "@/atoms/tabs/tabs.atom";
 import {
 	deleteThread,
 	fetchThreads,
diff --git a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
index 2d3cbbe53..a4661a860 100644
--- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
@@ -12,10 +12,10 @@ import { sidebarSelectedDocumentsAtom } from "@/atoms/chat/mentioned-documents.a
 import { connectorDialogOpenAtom } from "@/atoms/connector-dialog/connector-dialog.atoms";
 import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
 import { deleteDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
-import { openEditorPanelAtom } from "@/atoms/editor/editor-panel.atom";
 import { expandedFolderIdsAtom } from "@/atoms/documents/folder.atoms";
-import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
 import { agentCreatedDocumentsAtom } from "@/atoms/documents/ui.atoms";
+import { openEditorPanelAtom } from "@/atoms/editor/editor-panel.atom";
+import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
 import { CreateFolderDialog } from "@/components/documents/CreateFolderDialog";
 import type { DocumentNodeDoc } from "@/components/documents/DocumentNode";
 import type { FolderDisplay } from "@/components/documents/FolderNode";
diff --git a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
index db8b10fe9..f484ca5e5 100644
--- a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
@@ -105,8 +105,8 @@ export function Sidebar({
 		>
 			{/* Header - search space name or collapse button when collapsed */}
 			{isCollapsed ? (
-			<div className="flex h-12 shrink-0 items-center justify-center border-b">
-				<SidebarCollapseButton
+				<div className="flex h-12 shrink-0 items-center justify-center border-b">
+					<SidebarCollapseButton
 						isCollapsed={isCollapsed}
 						onToggle={onToggleCollapse ?? (() => {})}
 						disableTooltip={disableTooltips}
diff --git a/surfsense_web/components/layout/ui/tabs/TabBar.tsx b/surfsense_web/components/layout/ui/tabs/TabBar.tsx
index c38b84df9..0de438040 100644
--- a/surfsense_web/components/layout/ui/tabs/TabBar.tsx
+++ b/surfsense_web/components/layout/ui/tabs/TabBar.tsx
@@ -58,7 +58,12 @@ export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
 	if (tabs.length <= 1) return null;
 
 	return (
-		<div className={cn("flex h-12 items-stretch shrink-0 border-b border-border/35 bg-main-panel", className)}>
+		<div
+			className={cn(
+				"flex h-12 items-stretch shrink-0 border-b border-border/35 bg-main-panel",
+				className
+			)}
+		>
 			<div
 				ref={scrollRef}
 				className="flex h-full items-stretch flex-1 overflow-x-auto overflow-y-hidden scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
diff --git a/surfsense_web/components/new-chat/chat-header.tsx b/surfsense_web/components/new-chat/chat-header.tsx
index 5b7d3500c..3263a2b07 100644
--- a/surfsense_web/components/new-chat/chat-header.tsx
+++ b/surfsense_web/components/new-chat/chat-header.tsx
@@ -1,14 +1,14 @@
 "use client";
 
 import { useCallback, useState } from "react";
+import { ImageConfigDialog } from "@/components/shared/image-config-dialog";
+import { ModelConfigDialog } from "@/components/shared/model-config-dialog";
 import type {
 	GlobalImageGenConfig,
 	GlobalNewLLMConfig,
 	ImageGenerationConfig,
 	NewLLMConfigPublic,
 } from "@/contracts/types/new-llm-config.types";
-import { ImageConfigDialog } from "@/components/shared/image-config-dialog";
-import { ModelConfigDialog } from "@/components/shared/model-config-dialog";
 import { ModelSelector } from "./model-selector";
 
 interface ChatHeaderProps {
diff --git a/surfsense_web/components/new-chat/prompt-picker.tsx b/surfsense_web/components/new-chat/prompt-picker.tsx
index dee3eae32..7f0dab8a4 100644
--- a/surfsense_web/components/new-chat/prompt-picker.tsx
+++ b/surfsense_web/components/new-chat/prompt-picker.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useSetAtom } from "jotai";
 import {
 	BookOpen,
 	Check,
@@ -8,11 +9,10 @@ import {
 	List,
 	Minimize2,
 	PenLine,
+	Plus,
 	Search,
 	Zap,
-	Plus,
 } from "lucide-react";
-import { useSetAtom } from "jotai";
 import {
 	forwardRef,
 	useCallback,
@@ -53,113 +53,192 @@ const ICONS: Record<string, React.ReactNode> = {
 	zap: <Zap className="size-3.5" />,
 };
 
-const DEFAULT_ACTIONS: { name: string; prompt: string; mode: "transform" | "explore"; icon: string }[] = [
-	{ name: "Fix grammar", prompt: "Fix the grammar and spelling in the following text. Return only the corrected text, nothing else.\n\n{selection}", mode: "transform", icon: "check" },
-	{ name: "Make shorter", prompt: "Make the following text more concise while preserving its meaning. Return only the shortened text, nothing else.\n\n{selection}", mode: "transform", icon: "minimize" },
-	{ name: "Translate", prompt: "Translate the following text to English. If it is already in English, translate it to French. Return only the translation, nothing else.\n\n{selection}", mode: "transform", icon: "languages" },
-	{ name: "Rewrite", prompt: "Rewrite the following text to improve clarity and readability. Return only the rewritten text, nothing else.\n\n{selection}", mode: "transform", icon: "pen-line" },
-	{ name: "Summarize", prompt: "Summarize the following text concisely. Return only the summary, nothing else.\n\n{selection}", mode: "transform", icon: "list" },
-	{ name: "Explain", prompt: "Explain the following text in simple terms:\n\n{selection}", mode: "explore", icon: "book-open" },
-	{ name: "Ask my knowledge base", prompt: "Search my knowledge base for information related to:\n\n{selection}", mode: "explore", icon: "search" },
-	{ name: "Look up on the web", prompt: "Search the web for information about:\n\n{selection}", mode: "explore", icon: "globe" },
+const DEFAULT_ACTIONS: {
+	name: string;
+	prompt: string;
+	mode: "transform" | "explore";
+	icon: string;
+}[] = [
+	{
+		name: "Fix grammar",
+		prompt:
+			"Fix the grammar and spelling in the following text. Return only the corrected text, nothing else.\n\n{selection}",
+		mode: "transform",
+		icon: "check",
+	},
+	{
+		name: "Make shorter",
+		prompt:
+			"Make the following text more concise while preserving its meaning. Return only the shortened text, nothing else.\n\n{selection}",
+		mode: "transform",
+		icon: "minimize",
+	},
+	{
+		name: "Translate",
+		prompt:
+			"Translate the following text to English. If it is already in English, translate it to French. Return only the translation, nothing else.\n\n{selection}",
+		mode: "transform",
+		icon: "languages",
+	},
+	{
+		name: "Rewrite",
+		prompt:
+			"Rewrite the following text to improve clarity and readability. Return only the rewritten text, nothing else.\n\n{selection}",
+		mode: "transform",
+		icon: "pen-line",
+	},
+	{
+		name: "Summarize",
+		prompt:
+			"Summarize the following text concisely. Return only the summary, nothing else.\n\n{selection}",
+		mode: "transform",
+		icon: "list",
+	},
+	{
+		name: "Explain",
+		prompt: "Explain the following text in simple terms:\n\n{selection}",
+		mode: "explore",
+		icon: "book-open",
+	},
+	{
+		name: "Ask my knowledge base",
+		prompt: "Search my knowledge base for information related to:\n\n{selection}",
+		mode: "explore",
+		icon: "search",
+	},
+	{
+		name: "Look up on the web",
+		prompt: "Search the web for information about:\n\n{selection}",
+		mode: "explore",
+		icon: "globe",
+	},
 ];
 
-export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(
-	function PromptPicker({ onSelect, onDone, externalSearch = "", containerStyle }, ref) {
-		const setUserSettingsDialog = useSetAtom(userSettingsDialogAtom);
-		const [highlightedIndex, setHighlightedIndex] = useState(0);
-		const [customPrompts, setCustomPrompts] = useState<PromptRead[]>([]);
-		const scrollContainerRef = useRef<HTMLDivElement>(null);
-		const shouldScrollRef = useRef(false);
-		const itemRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
-
-		useEffect(() => {
-			promptsApiService.list().then(setCustomPrompts).catch(() => {});
-		}, []);
-
-		const allActions = useMemo(() => {
-			const customs = customPrompts.map((a) => ({
-				name: a.name,
-				prompt: a.prompt,
-				mode: a.mode as "transform" | "explore",
-				icon: a.icon || "zap",
-			}));
-			return [...DEFAULT_ACTIONS, ...customs];
-		}, [customPrompts]);
-
-		const filtered = useMemo(() => {
-			if (!externalSearch) return allActions;
-			return allActions.filter((a) =>
-				a.name.toLowerCase().includes(externalSearch.toLowerCase())
-			);
-		}, [allActions, externalSearch]);
-
-		// Reset highlight when results change
-		const prevSearchRef = useRef(externalSearch);
-		if (prevSearchRef.current !== externalSearch) {
-			prevSearchRef.current = externalSearch;
-			if (highlightedIndex !== 0) {
-				setHighlightedIndex(0);
-			}
+export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(function PromptPicker(
+	{ onSelect, onDone, externalSearch = "", containerStyle },
+	ref
+) {
+	const setUserSettingsDialog = useSetAtom(userSettingsDialogAtom);
+	const [highlightedIndex, setHighlightedIndex] = useState(0);
+	const [customPrompts, setCustomPrompts] = useState<PromptRead[]>([]);
+	const scrollContainerRef = useRef<HTMLDivElement>(null);
+	const shouldScrollRef = useRef(false);
+	const itemRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
+
+	useEffect(() => {
+		promptsApiService
+			.list()
+			.then(setCustomPrompts)
+			.catch(() => {});
+	}, []);
+
+	const allActions = useMemo(() => {
+		const customs = customPrompts.map((a) => ({
+			name: a.name,
+			prompt: a.prompt,
+			mode: a.mode as "transform" | "explore",
+			icon: a.icon || "zap",
+		}));
+		return [...DEFAULT_ACTIONS, ...customs];
+	}, [customPrompts]);
+
+	const filtered = useMemo(() => {
+		if (!externalSearch) return allActions;
+		return allActions.filter((a) => a.name.toLowerCase().includes(externalSearch.toLowerCase()));
+	}, [allActions, externalSearch]);
+
+	// Reset highlight when results change
+	const prevSearchRef = useRef(externalSearch);
+	if (prevSearchRef.current !== externalSearch) {
+		prevSearchRef.current = externalSearch;
+		if (highlightedIndex !== 0) {
+			setHighlightedIndex(0);
 		}
+	}
 
-		const handleSelect = useCallback(
-			(index: number) => {
-				const action = filtered[index];
-				if (!action) return;
-				onSelect({ name: action.name, prompt: action.prompt, mode: action.mode });
-			},
-			[filtered, onSelect]
-		);
-
-		// Auto-scroll highlighted item into view
-		useEffect(() => {
-			if (!shouldScrollRef.current) return;
-			shouldScrollRef.current = false;
-
-			const rafId = requestAnimationFrame(() => {
-				const item = itemRefs.current.get(highlightedIndex);
-				const container = scrollContainerRef.current;
-				if (item && container) {
-					const itemRect = item.getBoundingClientRect();
-					const containerRect = container.getBoundingClientRect();
-					if (itemRect.top < containerRect.top || itemRect.bottom > containerRect.bottom) {
-						item.scrollIntoView({ block: "nearest" });
-					}
+	const handleSelect = useCallback(
+		(index: number) => {
+			const action = filtered[index];
+			if (!action) return;
+			onSelect({ name: action.name, prompt: action.prompt, mode: action.mode });
+		},
+		[filtered, onSelect]
+	);
+
+	// Auto-scroll highlighted item into view
+	useEffect(() => {
+		if (!shouldScrollRef.current) return;
+		shouldScrollRef.current = false;
+
+		const rafId = requestAnimationFrame(() => {
+			const item = itemRefs.current.get(highlightedIndex);
+			const container = scrollContainerRef.current;
+			if (item && container) {
+				const itemRect = item.getBoundingClientRect();
+				const containerRect = container.getBoundingClientRect();
+				if (itemRect.top < containerRect.top || itemRect.bottom > containerRect.bottom) {
+					item.scrollIntoView({ block: "nearest" });
 				}
-			});
-
-			return () => cancelAnimationFrame(rafId);
-		}, [highlightedIndex]);
-
-		useImperativeHandle(
-			ref,
-			() => ({
-				selectHighlighted: () => handleSelect(highlightedIndex),
-				moveUp: () => {
-					shouldScrollRef.current = true;
-					setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filtered.length - 1));
-				},
-				moveDown: () => {
-					shouldScrollRef.current = true;
-					setHighlightedIndex((prev) => (prev < filtered.length - 1 ? prev + 1 : 0));
-				},
-			}),
-			[filtered.length, highlightedIndex, handleSelect]
-		);
-
-		if (filtered.length === 0) return null;
-
-		const defaultFiltered = filtered.filter((_, i) => i < DEFAULT_ACTIONS.length);
-		const customFiltered = filtered.filter((_, i) => i >= DEFAULT_ACTIONS.length);
-
-		return (
-			<div
-				className="w-64 rounded-lg border bg-popover shadow-lg overflow-hidden"
-				style={containerStyle}
-			>
-				<div ref={scrollContainerRef} className="max-h-48 overflow-y-auto py-1">
-					{defaultFiltered.map((action, index) => (
+			}
+		});
+
+		return () => cancelAnimationFrame(rafId);
+	}, [highlightedIndex]);
+
+	useImperativeHandle(
+		ref,
+		() => ({
+			selectHighlighted: () => handleSelect(highlightedIndex),
+			moveUp: () => {
+				shouldScrollRef.current = true;
+				setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filtered.length - 1));
+			},
+			moveDown: () => {
+				shouldScrollRef.current = true;
+				setHighlightedIndex((prev) => (prev < filtered.length - 1 ? prev + 1 : 0));
+			},
+		}),
+		[filtered.length, highlightedIndex, handleSelect]
+	);
+
+	if (filtered.length === 0) return null;
+
+	const defaultFiltered = filtered.filter((_, i) => i < DEFAULT_ACTIONS.length);
+	const customFiltered = filtered.filter((_, i) => i >= DEFAULT_ACTIONS.length);
+
+	return (
+		<div
+			className="w-64 rounded-lg border bg-popover shadow-lg overflow-hidden"
+			style={containerStyle}
+		>
+			<div ref={scrollContainerRef} className="max-h-48 overflow-y-auto py-1">
+				{defaultFiltered.map((action, index) => (
+					<button
+						key={action.name}
+						ref={(el) => {
+							if (el) itemRefs.current.set(index, el);
+							else itemRefs.current.delete(index);
+						}}
+						type="button"
+						onClick={() => handleSelect(index)}
+						onMouseEnter={() => setHighlightedIndex(index)}
+						className={cn(
+							"flex w-full items-center gap-2 px-3 py-1.5 text-sm cursor-pointer",
+							index === highlightedIndex ? "bg-accent" : "hover:bg-accent/50"
+						)}
+					>
+						<span className="text-muted-foreground">
+							{ICONS[action.icon] ?? <Zap className="size-3.5" />}
+						</span>
+						<span className="truncate">{action.name}</span>
+					</button>
+				))}
+
+				{customFiltered.length > 0 && <div className="my-1 h-px bg-border mx-2" />}
+
+				{customFiltered.map((action, i) => {
+					const index = defaultFiltered.length + i;
+					return (
 						<button
 							key={action.name}
 							ref={(el) => {
@@ -174,52 +253,27 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(
 								index === highlightedIndex ? "bg-accent" : "hover:bg-accent/50"
 							)}
 						>
-							<span className="text-muted-foreground">{ICONS[action.icon] ?? <Zap className="size-3.5" />}</span>
+							<span className="text-muted-foreground">
+								<Zap className="size-3.5" />
+							</span>
 							<span className="truncate">{action.name}</span>
 						</button>
-					))}
-
-					{customFiltered.length > 0 && (
-						<div className="my-1 h-px bg-border mx-2" />
-					)}
-
-					{customFiltered.map((action, i) => {
-						const index = defaultFiltered.length + i;
-						return (
-							<button
-								key={action.name}
-								ref={(el) => {
-									if (el) itemRefs.current.set(index, el);
-									else itemRefs.current.delete(index);
-								}}
-								type="button"
-								onClick={() => handleSelect(index)}
-								onMouseEnter={() => setHighlightedIndex(index)}
-								className={cn(
-									"flex w-full items-center gap-2 px-3 py-1.5 text-sm cursor-pointer",
-									index === highlightedIndex ? "bg-accent" : "hover:bg-accent/50"
-								)}
-							>
-								<span className="text-muted-foreground"><Zap className="size-3.5" /></span>
-								<span className="truncate">{action.name}</span>
-							</button>
-						);
-					})}
-
-					<div className="my-1 h-px bg-border mx-2" />
-					<button
-						type="button"
-						onClick={() => {
-							onDone();
-							setUserSettingsDialog({ open: true, initialTab: "prompts" });
-						}}
-						className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent/50 cursor-pointer"
-					>
-						<Plus className="size-3.5" />
-						<span>Create prompt</span>
-					</button>
-				</div>
+					);
+				})}
+
+				<div className="my-1 h-px bg-border mx-2" />
+				<button
+					type="button"
+					onClick={() => {
+						onDone();
+						setUserSettingsDialog({ open: true, initialTab: "prompts" });
+					}}
+					className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent/50 cursor-pointer"
+				>
+					<Plus className="size-3.5" />
+					<span>Create prompt</span>
+				</button>
 			</div>
-		);
-	}
-);
+		</div>
+	);
+});
diff --git a/surfsense_web/components/public-chat/public-thread.tsx b/surfsense_web/components/public-chat/public-thread.tsx
index 837350a84..8678cef52 100644
--- a/surfsense_web/components/public-chat/public-thread.tsx
+++ b/surfsense_web/components/public-chat/public-thread.tsx
@@ -155,10 +155,10 @@ const PublicAssistantMessage: FC = () => {
 									generate_video_presentation: GenerateVideoPresentationToolUI,
 									display_image: GenerateImageToolUI,
 									generate_image: GenerateImageToolUI,
-								web_search: () => null,
-								link_preview: () => null,
-								multi_link_preview: () => null,
-								scrape_webpage: () => null,
+									web_search: () => null,
+									link_preview: () => null,
+									multi_link_preview: () => null,
+									scrape_webpage: () => null,
 								},
 								Fallback: ToolFallback,
 							},
diff --git a/surfsense_web/components/settings/image-model-manager.tsx b/surfsense_web/components/settings/image-model-manager.tsx
index b5a98dcbe..8f08b7db3 100644
--- a/surfsense_web/components/settings/image-model-manager.tsx
+++ b/surfsense_web/components/settings/image-model-manager.tsx
@@ -1,24 +1,15 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import {
-	AlertCircle,
-	Edit3,
-	Info,
-	Plus,
-	RefreshCw,
-	Trash2,
-	Wand2,
-} from "lucide-react";
+import { AlertCircle, Edit3, Info, Plus, RefreshCw, Trash2, Wand2 } from "lucide-react";
 import { useMemo, useState } from "react";
-import {
-	deleteImageGenConfigMutationAtom,
-} from "@/atoms/image-gen-config/image-gen-config-mutation.atoms";
+import { deleteImageGenConfigMutationAtom } from "@/atoms/image-gen-config/image-gen-config-mutation.atoms";
 import {
 	globalImageGenConfigsAtom,
 	imageGenConfigsAtom,
 } from "@/atoms/image-gen-config/image-gen-config-query.atoms";
 import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
+import { ImageConfigDialog } from "@/components/shared/image-config-dialog";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import {
 	AlertDialog,
@@ -40,7 +31,6 @@ import type { ImageGenerationConfig } from "@/contracts/types/new-llm-config.typ
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { getProviderIcon } from "@/lib/provider-icons";
 import { cn } from "@/lib/utils";
-import { ImageConfigDialog } from "@/components/shared/image-config-dialog";
 
 interface ImageModelManagerProps {
 	searchSpaceId: number;
@@ -196,7 +186,16 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 				<Alert className="bg-muted/50 py-3">
 					<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
 					<AlertDescription className="text-xs md:text-sm">
-						<p><span className="font-medium">{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length} global image {globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length === 1 ? "model" : "models"}</span> available from your administrator. Use the model selector to view and select them.</p>
+						<p>
+							<span className="font-medium">
+								{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length}{" "}
+								global image{" "}
+								{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length === 1
+									? "model"
+									: "models"}
+							</span>{" "}
+							available from your administrator. Use the model selector to view and select them.
+						</p>
 					</AlertDescription>
 				</Alert>
 			)}
@@ -399,10 +398,8 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 				onOpenChange={(open) => !open && setConfigToDelete(null)}
 			>
 				<AlertDialogContent className="select-none">
-				<AlertDialogHeader>
-					<AlertDialogTitle>
-						Delete Image Model
-					</AlertDialogTitle>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete Image Model</AlertDialogTitle>
 						<AlertDialogDescription>
 							Are you sure you want to delete{" "}
 							<span className="font-semibold text-foreground">{configToDelete?.name}</span>?
@@ -410,14 +407,14 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 					</AlertDialogHeader>
 					<AlertDialogFooter>
 						<AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={handleDelete}
-						disabled={isDeleting}
-						className="relative bg-destructive text-destructive-foreground hover:bg-destructive/90"
-					>
-						<span className={isDeleting ? "opacity-0" : ""}>Delete</span>
-						{isDeleting && <Spinner size="sm" className="absolute" />}
-					</AlertDialogAction>
+						<AlertDialogAction
+							onClick={handleDelete}
+							disabled={isDeleting}
+							className="relative bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							<span className={isDeleting ? "opacity-0" : ""}>Delete</span>
+							{isDeleting && <Spinner size="sm" className="absolute" />}
+						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>
 			</AlertDialog>
diff --git a/surfsense_web/components/settings/model-config-manager.tsx b/surfsense_web/components/settings/model-config-manager.tsx
index 409aa4f3c..046288a96 100644
--- a/surfsense_web/components/settings/model-config-manager.tsx
+++ b/surfsense_web/components/settings/model-config-manager.tsx
@@ -14,9 +14,7 @@ import {
 } from "lucide-react";
 import { useMemo, useState } from "react";
 import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
-import {
-	deleteNewLLMConfigMutationAtom,
-} from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
+import { deleteNewLLMConfigMutationAtom } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
 import {
 	globalNewLLMConfigsAtom,
 	newLLMConfigsAtom,
@@ -203,7 +201,12 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 				<Alert className="bg-muted/50 py-3">
 					<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
 					<AlertDescription className="text-xs md:text-sm">
-						<p><span className="font-medium">{globalConfigs.length} global {globalConfigs.length === 1 ? "model" : "models"}</span> available from your administrator. Use the model selector to view and select them.</p>
+						<p>
+							<span className="font-medium">
+								{globalConfigs.length} global {globalConfigs.length === 1 ? "model" : "models"}
+							</span>{" "}
+							available from your administrator. Use the model selector to view and select them.
+						</p>
 					</AlertDescription>
 				</Alert>
 			)}
@@ -433,9 +436,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 			>
 				<AlertDialogContent className="select-none">
 					<AlertDialogHeader>
-					<AlertDialogTitle>
-						Delete LLM Model
-					</AlertDialogTitle>
+						<AlertDialogTitle>Delete LLM Model</AlertDialogTitle>
 						<AlertDialogDescription>
 							Are you sure you want to delete{" "}
 							<span className="font-semibold text-foreground">{configToDelete?.name}</span>? This
@@ -449,14 +450,14 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 							disabled={isDeleting}
 							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
-						{isDeleting ? (
-							<>
-								<Spinner size="sm" className="mr-2" />
-								Deleting
-							</>
-						) : (
-							"Delete"
-						)}
+							{isDeleting ? (
+								<>
+									<Spinner size="sm" className="mr-2" />
+									Deleting
+								</>
+							) : (
+								"Delete"
+							)}
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>
diff --git a/surfsense_web/components/shared/image-config-dialog.tsx b/surfsense_web/components/shared/image-config-dialog.tsx
index fe8a73df6..1cfbf8842 100644
--- a/surfsense_web/components/shared/image-config-dialog.tsx
+++ b/surfsense_web/components/shared/image-config-dialog.tsx
@@ -217,9 +217,7 @@ export function ImageConfigDialog({
 						</div>
 						<p className="text-sm text-muted-foreground">{getSubtitle()}</p>
 						{config && mode !== "create" && (
-							<p className="text-xs font-mono text-muted-foreground/70">
-								{config.model_name}
-							</p>
+							<p className="text-xs font-mono text-muted-foreground/70">{config.model_name}</p>
 						)}
 					</div>
 				</div>
@@ -234,7 +232,7 @@ export function ImageConfigDialog({
 						WebkitMaskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
 					}}
 				>
-				{isGlobal && config && (
+					{isGlobal && config && (
 						<>
 							<Alert className="mb-5 border-amber-500/30 bg-amber-500/5">
 								<AlertCircle className="size-4 text-amber-500" />
@@ -294,9 +292,7 @@ export function ImageConfigDialog({
 								<Input
 									placeholder="Optional description"
 									value={formData.description}
-									onChange={(e) =>
-										setFormData((p) => ({ ...p, description: e.target.value }))
-									}
+									onChange={(e) => setFormData((p) => ({ ...p, description: e.target.value }))}
 								/>
 							</div>
 
@@ -337,17 +333,12 @@ export function ImageConfigDialog({
 												<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 											</Button>
 										</PopoverTrigger>
-										<PopoverContent
-											className="w-full p-0"
-											align="start"
-										>
+										<PopoverContent className="w-full p-0" align="start">
 											<Command className="bg-transparent">
 												<CommandInput
 													placeholder="Search or type model..."
 													value={formData.model_name}
-													onValueChange={(val) =>
-														setFormData((p) => ({ ...p, model_name: val }))
-													}
+													onValueChange={(val) => setFormData((p) => ({ ...p, model_name: val }))}
 												/>
 												<CommandList>
 													<CommandEmpty>
@@ -368,9 +359,7 @@ export function ImageConfigDialog({
 																<Check
 																	className={cn(
 																		"mr-2 h-4 w-4",
-																		formData.model_name === m.value
-																			? "opacity-100"
-																			: "opacity-0"
+																		formData.model_name === m.value ? "opacity-100" : "opacity-0"
 																	)}
 																/>
 																<span className="font-mono text-sm">{m.value}</span>
@@ -388,9 +377,7 @@ export function ImageConfigDialog({
 									<Input
 										placeholder="e.g., dall-e-3"
 										value={formData.model_name}
-										onChange={(e) =>
-											setFormData((p) => ({ ...p, model_name: e.target.value }))
-										}
+										onChange={(e) => setFormData((p) => ({ ...p, model_name: e.target.value }))}
 									/>
 								)}
 							</div>
@@ -420,9 +407,7 @@ export function ImageConfigDialog({
 									<Input
 										placeholder="2024-02-15-preview"
 										value={formData.api_version}
-										onChange={(e) =>
-											setFormData((p) => ({ ...p, api_version: e.target.value }))
-										}
+										onChange={(e) => setFormData((p) => ({ ...p, api_version: e.target.value }))}
 									/>
 								</div>
 							)}
@@ -442,25 +427,25 @@ export function ImageConfigDialog({
 						Cancel
 					</Button>
 					{mode === "create" || (mode === "edit" && !isGlobal) ? (
-					<Button
-						onClick={handleSubmit}
-						disabled={isSubmitting || !isFormValid}
-						className="relative text-sm h-9 min-w-[120px]"
-					>
-						<span className={isSubmitting ? "opacity-0" : ""}>
-							{mode === "edit" ? "Save Changes" : "Create & Use"}
-						</span>
-						{isSubmitting && <Spinner size="sm" className="absolute" />}
-					</Button>
-				) : isGlobal && config ? (
-					<Button
-						className="relative text-sm h-9"
-						onClick={handleUseGlobalConfig}
-						disabled={isSubmitting}
-					>
-						<span className={isSubmitting ? "opacity-0" : ""}>Use This Model</span>
-						{isSubmitting && <Spinner size="sm" className="absolute" />}
-					</Button>
+						<Button
+							onClick={handleSubmit}
+							disabled={isSubmitting || !isFormValid}
+							className="relative text-sm h-9 min-w-[120px]"
+						>
+							<span className={isSubmitting ? "opacity-0" : ""}>
+								{mode === "edit" ? "Save Changes" : "Create & Use"}
+							</span>
+							{isSubmitting && <Spinner size="sm" className="absolute" />}
+						</Button>
+					) : isGlobal && config ? (
+						<Button
+							className="relative text-sm h-9"
+							onClick={handleUseGlobalConfig}
+							disabled={isSubmitting}
+						>
+							<span className={isSubmitting ? "opacity-0" : ""}>Use This Model</span>
+							{isSubmitting && <Spinner size="sm" className="absolute" />}
+						</Button>
 					) : null}
 				</div>
 			</DialogContent>
diff --git a/surfsense_web/components/shared/llm-config-form.tsx b/surfsense_web/components/shared/llm-config-form.tsx
index 9fb8b9208..732bf971e 100644
--- a/surfsense_web/components/shared/llm-config-form.tsx
+++ b/surfsense_web/components/shared/llm-config-form.tsx
@@ -4,7 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useAtomValue } from "jotai";
 import { Check, ChevronDown, ChevronsUpDown } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import { useForm, type Resolver } from "react-hook-form";
+import { type Resolver, useForm } from "react-hook-form";
 import { z } from "zod";
 import {
 	defaultSystemInstructionsAtom,
@@ -219,26 +219,22 @@ export function LLMConfigForm({
 						)}
 					/>
 
-				{/* Custom Provider (conditional) */}
-				{watchProvider === "CUSTOM" && (
-					<FormField
-						control={form.control}
-						name="custom_provider"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel className="text-xs sm:text-sm">Custom Provider Name</FormLabel>
-								<FormControl>
-									<Input
-										placeholder="my-custom-provider"
-										{...field}
-										value={field.value ?? ""}
-									/>
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-				)}
+					{/* Custom Provider (conditional) */}
+					{watchProvider === "CUSTOM" && (
+						<FormField
+							control={form.control}
+							name="custom_provider"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Custom Provider Name</FormLabel>
+									<FormControl>
+										<Input placeholder="my-custom-provider" {...field} value={field.value ?? ""} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					)}
 
 					{/* Model Name with Combobox */}
 					<FormField
@@ -383,29 +379,29 @@ export function LLMConfigForm({
 						/>
 					</div>
 
-				{/* Ollama Quick Actions */}
-				{watchProvider === "OLLAMA" && (
-					<div className="flex flex-wrap gap-2">
-						<Button
-							type="button"
-							variant="outline"
-							size="sm"
-							className="h-7 text-xs"
-							onClick={() => form.setValue("api_base", "http://localhost:11434")}
-						>
-							localhost:11434
-						</Button>
-						<Button
-							type="button"
-							variant="outline"
-							size="sm"
-							className="h-7 text-xs"
-							onClick={() => form.setValue("api_base", "http://host.docker.internal:11434")}
-						>
-							Docker
-						</Button>
-					</div>
-				)}
+					{/* Ollama Quick Actions */}
+					{watchProvider === "OLLAMA" && (
+						<div className="flex flex-wrap gap-2">
+							<Button
+								type="button"
+								variant="outline"
+								size="sm"
+								className="h-7 text-xs"
+								onClick={() => form.setValue("api_base", "http://localhost:11434")}
+							>
+								localhost:11434
+							</Button>
+							<Button
+								type="button"
+								variant="outline"
+								size="sm"
+								className="h-7 text-xs"
+								onClick={() => form.setValue("api_base", "http://host.docker.internal:11434")}
+							>
+								Docker
+							</Button>
+						</div>
+					)}
 				</div>
 
 				{/* Advanced Parameters */}
diff --git a/surfsense_web/components/shared/model-config-dialog.tsx b/surfsense_web/components/shared/model-config-dialog.tsx
index d5405574b..84ba821fc 100644
--- a/surfsense_web/components/shared/model-config-dialog.tsx
+++ b/surfsense_web/components/shared/model-config-dialog.tsx
@@ -167,9 +167,7 @@ export function ModelConfigDialog({
 						</div>
 						<p className="text-sm text-muted-foreground">{getSubtitle()}</p>
 						{config && mode !== "create" && (
-							<p className="text-xs font-mono text-muted-foreground/70">
-								{config.model_name}
-							</p>
+							<p className="text-xs font-mono text-muted-foreground/70">{config.model_name}</p>
 						)}
 					</div>
 				</div>
@@ -184,7 +182,7 @@ export function ModelConfigDialog({
 						WebkitMaskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
 					}}
 				>
-				{isGlobal && mode !== "create" && (
+					{isGlobal && mode !== "create" && (
 						<Alert className="mb-5 border-amber-500/30 bg-amber-500/5">
 							<AlertCircle className="size-4 text-amber-500" />
 							<AlertDescription className="text-sm text-amber-700 dark:text-amber-400">
@@ -195,13 +193,13 @@ export function ModelConfigDialog({
 					)}
 
 					{mode === "create" ? (
-					<LLMConfigForm
-						searchSpaceId={searchSpaceId}
-						onSubmit={handleSubmit}
-						mode="create"
-						formId="model-config-form"
-					/>
-				) : isGlobal && config ? (
+						<LLMConfigForm
+							searchSpaceId={searchSpaceId}
+							onSubmit={handleSubmit}
+							mode="create"
+							formId="model-config-form"
+						/>
+					) : isGlobal && config ? (
 						<div className="space-y-6">
 							<div className="space-y-4">
 								<div className="grid gap-4 sm:grid-cols-2">
@@ -288,9 +286,9 @@ export function ModelConfigDialog({
 								citations_enabled: config.citations_enabled,
 								search_space_id: searchSpaceId,
 							}}
-						onSubmit={handleSubmit}
-						mode="edit"
-						formId="model-config-form"
+							onSubmit={handleSubmit}
+							mode="edit"
+							formId="model-config-form"
 						/>
 					) : null}
 				</div>
@@ -307,26 +305,26 @@ export function ModelConfigDialog({
 						Cancel
 					</Button>
 					{mode === "create" || (!isGlobal && config) ? (
-					<Button
-						type="submit"
-						form="model-config-form"
-						disabled={isSubmitting}
-						className="relative text-sm h-9 min-w-[120px]"
-					>
-						<span className={isSubmitting ? "opacity-0" : ""}>
-							{mode === "edit" ? "Save Changes" : "Create & Use"}
-						</span>
-						{isSubmitting && <Spinner size="sm" className="absolute" />}
-					</Button>
-				) : isGlobal && config ? (
-					<Button
-						className="relative text-sm h-9"
-						onClick={handleUseGlobalConfig}
-						disabled={isSubmitting}
-					>
-						<span className={isSubmitting ? "opacity-0" : ""}>Use This Model</span>
-						{isSubmitting && <Spinner size="sm" className="absolute" />}
-					</Button>
+						<Button
+							type="submit"
+							form="model-config-form"
+							disabled={isSubmitting}
+							className="relative text-sm h-9 min-w-[120px]"
+						>
+							<span className={isSubmitting ? "opacity-0" : ""}>
+								{mode === "edit" ? "Save Changes" : "Create & Use"}
+							</span>
+							{isSubmitting && <Spinner size="sm" className="absolute" />}
+						</Button>
+					) : isGlobal && config ? (
+						<Button
+							className="relative text-sm h-9"
+							onClick={handleUseGlobalConfig}
+							disabled={isSubmitting}
+						>
+							<span className={isSubmitting ? "opacity-0" : ""}>Use This Model</span>
+							{isSubmitting && <Spinner size="sm" className="absolute" />}
+						</Button>
 					) : null}
 				</div>
 			</DialogContent>
diff --git a/surfsense_web/components/tool-ui/citation/_adapter.tsx b/surfsense_web/components/tool-ui/citation/_adapter.tsx
index 06ee62f6f..ba8ea5080 100644
--- a/surfsense_web/components/tool-ui/citation/_adapter.tsx
+++ b/surfsense_web/components/tool-ui/citation/_adapter.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-export { cn } from "@/lib/utils";
 export {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
 } from "@/components/ui/popover";
+export { cn } from "@/lib/utils";
diff --git a/surfsense_web/components/tool-ui/citation/citation-list.tsx b/surfsense_web/components/tool-ui/citation/citation-list.tsx
index 34b995aae..3151917b6 100644
--- a/surfsense_web/components/tool-ui/citation/citation-list.tsx
+++ b/surfsense_web/components/tool-ui/citation/citation-list.tsx
@@ -1,463 +1,395 @@
 "use client";
 
-import * as React from "react";
 import type { LucideIcon } from "lucide-react";
-import {
-  FileText,
-  Globe,
-  Code2,
-  Newspaper,
-  Database,
-  File,
-  ExternalLink,
-} from "lucide-react";
+import { Code2, Database, ExternalLink, File, FileText, Globe, Newspaper } from "lucide-react";
+import * as React from "react";
+import { openSafeNavigationHref, resolveSafeNavigationHref } from "../shared/media";
 import { cn, Popover, PopoverContent, PopoverTrigger } from "./_adapter";
 import { Citation } from "./citation";
-import type {
-  SerializableCitation,
-  CitationType,
-  CitationVariant,
-} from "./schema";
-import {
-  openSafeNavigationHref,
-  resolveSafeNavigationHref,
-} from "../shared/media";
+import type { CitationType, CitationVariant, SerializableCitation } from "./schema";
 
 const TYPE_ICONS: Record<CitationType, LucideIcon> = {
-  webpage: Globe,
-  document: FileText,
-  article: Newspaper,
-  api: Database,
-  code: Code2,
-  other: File,
+	webpage: Globe,
+	document: FileText,
+	article: Newspaper,
+	api: Database,
+	code: Code2,
+	other: File,
 };
 
 function useHoverPopover(delay = 100) {
-  const [open, setOpen] = React.useState(false);
-  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
+	const [open, setOpen] = React.useState(false);
+	const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+	const containerRef = React.useRef<HTMLDivElement>(null);
 
-  const handleMouseEnter = React.useCallback(() => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => setOpen(true), delay);
-  }, [delay]);
+	const handleMouseEnter = React.useCallback(() => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => setOpen(true), delay);
+	}, [delay]);
 
-  const handleMouseLeave = React.useCallback(() => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => setOpen(false), delay);
-  }, [delay]);
+	const handleMouseLeave = React.useCallback(() => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => setOpen(false), delay);
+	}, [delay]);
 
-  const handleFocus = React.useCallback(() => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    setOpen(true);
-  }, []);
+	const handleFocus = React.useCallback(() => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		setOpen(true);
+	}, []);
 
-  const handleBlur = React.useCallback(
-    (e: React.FocusEvent) => {
-      const relatedTarget = e.relatedTarget as HTMLElement | null;
-      if (containerRef.current?.contains(relatedTarget)) {
-        return;
-      }
-      if (relatedTarget?.closest("[data-radix-popper-content-wrapper]")) {
-        return;
-      }
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => setOpen(false), delay);
-    },
-    [delay],
-  );
+	const handleBlur = React.useCallback(
+		(e: React.FocusEvent) => {
+			const relatedTarget = e.relatedTarget as HTMLElement | null;
+			if (containerRef.current?.contains(relatedTarget)) {
+				return;
+			}
+			if (relatedTarget?.closest("[data-radix-popper-content-wrapper]")) {
+				return;
+			}
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+			timeoutRef.current = setTimeout(() => setOpen(false), delay);
+		},
+		[delay]
+	);
 
-  React.useEffect(() => {
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, []);
+	React.useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);
 
-  return {
-    open,
-    setOpen,
-    containerRef,
-    handleMouseEnter,
-    handleMouseLeave,
-    handleFocus,
-    handleBlur,
-  };
+	return {
+		open,
+		setOpen,
+		containerRef,
+		handleMouseEnter,
+		handleMouseLeave,
+		handleFocus,
+		handleBlur,
+	};
 }
 
 export interface CitationListProps {
-  id: string;
-  citations: SerializableCitation[];
-  variant?: CitationVariant;
-  maxVisible?: number;
-  className?: string;
-  onNavigate?: (href: string, citation: SerializableCitation) => void;
+	id: string;
+	citations: SerializableCitation[];
+	variant?: CitationVariant;
+	maxVisible?: number;
+	className?: string;
+	onNavigate?: (href: string, citation: SerializableCitation) => void;
 }
 
 export function CitationList(props: CitationListProps) {
-  const {
-    id,
-    citations,
-    variant = "default",
-    maxVisible,
-    className,
-    onNavigate,
-  } = props;
+	const { id, citations, variant = "default", maxVisible, className, onNavigate } = props;
 
-  const shouldTruncate =
-    maxVisible !== undefined && citations.length > maxVisible;
-  const visibleCitations = shouldTruncate
-    ? citations.slice(0, maxVisible)
-    : citations;
-  const overflowCitations = shouldTruncate ? citations.slice(maxVisible) : [];
-  const overflowCount = overflowCitations.length;
+	const shouldTruncate = maxVisible !== undefined && citations.length > maxVisible;
+	const visibleCitations = shouldTruncate ? citations.slice(0, maxVisible) : citations;
+	const overflowCitations = shouldTruncate ? citations.slice(maxVisible) : [];
+	const overflowCount = overflowCitations.length;
 
-  const wrapperClass =
-    variant === "inline"
-      ? "flex flex-wrap items-center gap-1.5"
-      : "flex flex-col gap-2";
+	const wrapperClass =
+		variant === "inline" ? "flex flex-wrap items-center gap-1.5" : "flex flex-col gap-2";
 
-  // Stacked variant: overlapping favicons with popover
-  if (variant === "stacked") {
-    return (
-      <StackedCitations
-        id={id}
-        citations={citations}
-        className={className}
-        onNavigate={onNavigate}
-      />
-    );
-  }
+	// Stacked variant: overlapping favicons with popover
+	if (variant === "stacked") {
+		return (
+			<StackedCitations
+				id={id}
+				citations={citations}
+				className={className}
+				onNavigate={onNavigate}
+			/>
+		);
+	}
 
-  if (variant === "default") {
-    return (
-      <div
-        className={cn("isolate flex flex-col gap-4", className)}
-        data-tool-ui-id={id}
-        data-slot="citation-list"
-      >
-        {visibleCitations.map((citation) => (
-          <Citation
-            key={citation.id}
-            {...citation}
-            variant="default"
-            onNavigate={onNavigate}
-          />
-        ))}
-        {shouldTruncate && (
-          <OverflowIndicator
-            citations={overflowCitations}
-            count={overflowCount}
-            variant="default"
-            onNavigate={onNavigate}
-          />
-        )}
-      </div>
-    );
-  }
+	if (variant === "default") {
+		return (
+			<div
+				className={cn("isolate flex flex-col gap-4", className)}
+				data-tool-ui-id={id}
+				data-slot="citation-list"
+			>
+				{visibleCitations.map((citation) => (
+					<Citation key={citation.id} {...citation} variant="default" onNavigate={onNavigate} />
+				))}
+				{shouldTruncate && (
+					<OverflowIndicator
+						citations={overflowCitations}
+						count={overflowCount}
+						variant="default"
+						onNavigate={onNavigate}
+					/>
+				)}
+			</div>
+		);
+	}
 
-  return (
-    <div
-      className={cn("isolate", wrapperClass, className)}
-      data-tool-ui-id={id}
-      data-slot="citation-list"
-    >
-      {visibleCitations.map((citation) => (
-        <Citation
-          key={citation.id}
-          {...citation}
-          variant={variant}
-          onNavigate={onNavigate}
-        />
-      ))}
-      {shouldTruncate && (
-        <OverflowIndicator
-          citations={overflowCitations}
-          count={overflowCount}
-          variant={variant}
-          onNavigate={onNavigate}
-        />
-      )}
-    </div>
-  );
+	return (
+		<div
+			className={cn("isolate", wrapperClass, className)}
+			data-tool-ui-id={id}
+			data-slot="citation-list"
+		>
+			{visibleCitations.map((citation) => (
+				<Citation key={citation.id} {...citation} variant={variant} onNavigate={onNavigate} />
+			))}
+			{shouldTruncate && (
+				<OverflowIndicator
+					citations={overflowCitations}
+					count={overflowCount}
+					variant={variant}
+					onNavigate={onNavigate}
+				/>
+			)}
+		</div>
+	);
 }
 
 interface OverflowIndicatorProps {
-  citations: SerializableCitation[];
-  count: number;
-  variant: CitationVariant;
-  onNavigate?: (href: string, citation: SerializableCitation) => void;
+	citations: SerializableCitation[];
+	count: number;
+	variant: CitationVariant;
+	onNavigate?: (href: string, citation: SerializableCitation) => void;
 }
 
-function OverflowIndicator({
-  citations,
-  count,
-  variant,
-  onNavigate,
-}: OverflowIndicatorProps) {
-  const { open, handleMouseEnter, handleMouseLeave } = useHoverPopover();
+function OverflowIndicator({ citations, count, variant, onNavigate }: OverflowIndicatorProps) {
+	const { open, handleMouseEnter, handleMouseLeave } = useHoverPopover();
 
-  const handleClick = (citation: SerializableCitation) => {
-    const href = resolveSafeNavigationHref(citation.href);
-    if (!href) return;
-    if (onNavigate) {
-      onNavigate(href, citation);
-    } else {
-      openSafeNavigationHref(href);
-    }
-  };
+	const handleClick = (citation: SerializableCitation) => {
+		const href = resolveSafeNavigationHref(citation.href);
+		if (!href) return;
+		if (onNavigate) {
+			onNavigate(href, citation);
+		} else {
+			openSafeNavigationHref(href);
+		}
+	};
 
-  const popoverContent = (
-    <div className="flex max-h-72 flex-col overflow-y-auto">
-      {citations.map((citation) => (
-        <OverflowItem
-          key={citation.id}
-          citation={citation}
-          onClick={() => handleClick(citation)}
-        />
-      ))}
-    </div>
-  );
+	const popoverContent = (
+		<div className="flex max-h-72 flex-col overflow-y-auto">
+			{citations.map((citation) => (
+				<OverflowItem key={citation.id} citation={citation} onClick={() => handleClick(citation)} />
+			))}
+		</div>
+	);
 
-  if (variant === "inline") {
-    return (
-      <Popover open={open}>
-        <PopoverTrigger asChild>
-          <button
-            type="button"
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-            className={cn(
-              "inline-flex items-center gap-1 rounded-md px-2 py-1",
-              "bg-muted/60 text-sm tabular-nums",
-              "transition-colors duration-150",
-              "hover:bg-muted",
-              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
-            )}
-          >
-            <span className="text-muted-foreground">+{count} more</span>
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          side="top"
-          align="start"
-          className="w-80 p-1"
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-        >
-          {popoverContent}
-        </PopoverContent>
-      </Popover>
-    );
-  }
+	if (variant === "inline") {
+		return (
+			<Popover open={open}>
+				<PopoverTrigger asChild>
+					<button
+						type="button"
+						onMouseEnter={handleMouseEnter}
+						onMouseLeave={handleMouseLeave}
+						className={cn(
+							"inline-flex items-center gap-1 rounded-md px-2 py-1",
+							"bg-muted/60 text-sm tabular-nums",
+							"transition-colors duration-150",
+							"hover:bg-muted",
+							"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
+						)}
+					>
+						<span className="text-muted-foreground">+{count} more</span>
+					</button>
+				</PopoverTrigger>
+				<PopoverContent
+					side="top"
+					align="start"
+					className="w-80 p-1"
+					onMouseEnter={handleMouseEnter}
+					onMouseLeave={handleMouseLeave}
+					onOpenAutoFocus={(e) => e.preventDefault()}
+				>
+					{popoverContent}
+				</PopoverContent>
+			</Popover>
+		);
+	}
 
-  // Default variant
-  return (
-    <Popover open={open}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          className={cn(
-            "flex items-center justify-center rounded-xl px-4 py-3",
-            "border-border bg-card border border-dashed",
-            "transition-colors duration-150",
-            "hover:border-foreground/25 hover:bg-muted/50",
-            "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
-          )}
-        >
-          <span className="text-muted-foreground text-sm tabular-nums">
-            +{count} more sources
-          </span>
-        </button>
-      </PopoverTrigger>
-      <PopoverContent
-        side="bottom"
-        align="start"
-        className="w-80 p-1"
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        onOpenAutoFocus={(e) => e.preventDefault()}
-      >
-        {popoverContent}
-      </PopoverContent>
-    </Popover>
-  );
+	// Default variant
+	return (
+		<Popover open={open}>
+			<PopoverTrigger asChild>
+				<button
+					type="button"
+					onMouseEnter={handleMouseEnter}
+					onMouseLeave={handleMouseLeave}
+					className={cn(
+						"flex items-center justify-center rounded-xl px-4 py-3",
+						"border-border bg-card border border-dashed",
+						"transition-colors duration-150",
+						"hover:border-foreground/25 hover:bg-muted/50",
+						"focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+					)}
+				>
+					<span className="text-muted-foreground text-sm tabular-nums">+{count} more sources</span>
+				</button>
+			</PopoverTrigger>
+			<PopoverContent
+				side="bottom"
+				align="start"
+				className="w-80 p-1"
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+				onOpenAutoFocus={(e) => e.preventDefault()}
+			>
+				{popoverContent}
+			</PopoverContent>
+		</Popover>
+	);
 }
 
 interface OverflowItemProps {
-  citation: SerializableCitation;
-  onClick: () => void;
+	citation: SerializableCitation;
+	onClick: () => void;
 }
 
 function OverflowItem({ citation, onClick }: OverflowItemProps) {
-  const TypeIcon = TYPE_ICONS[citation.type ?? "webpage"] ?? Globe;
+	const TypeIcon = TYPE_ICONS[citation.type ?? "webpage"] ?? Globe;
 
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="group hover:bg-muted focus-visible:bg-muted flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left transition-colors focus-visible:outline-none"
-    >
-      {citation.favicon ? (
-        // biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain — next/image requires remotePatterns config
-        <img
-          src={citation.favicon}
-          alt=""
-          aria-hidden="true"
-          width={16}
-          height={16}
-          className="bg-muted size-4 shrink-0 rounded object-cover"
-        />
-      ) : (
-        <TypeIcon
-          className="text-muted-foreground size-4 shrink-0"
-          aria-hidden="true"
-        />
-      )}
-      <div className="min-w-0 flex-1">
-        <p className="group-hover:decoration-foreground/30 truncate text-sm font-medium group-hover:underline group-hover:underline-offset-2">
-          {citation.title}
-        </p>
-        <p className="text-muted-foreground truncate text-xs">
-          {citation.domain}
-        </p>
-      </div>
-      <ExternalLink className="text-muted-foreground mt-0.5 size-3.5 shrink-0 self-start opacity-0 transition-opacity group-hover:opacity-100" />
-    </button>
-  );
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className="group hover:bg-muted focus-visible:bg-muted flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left transition-colors focus-visible:outline-none"
+		>
+			{citation.favicon ? (
+				// biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain — next/image requires remotePatterns config
+				<img
+					src={citation.favicon}
+					alt=""
+					aria-hidden="true"
+					width={16}
+					height={16}
+					className="bg-muted size-4 shrink-0 rounded object-cover"
+				/>
+			) : (
+				<TypeIcon className="text-muted-foreground size-4 shrink-0" aria-hidden="true" />
+			)}
+			<div className="min-w-0 flex-1">
+				<p className="group-hover:decoration-foreground/30 truncate text-sm font-medium group-hover:underline group-hover:underline-offset-2">
+					{citation.title}
+				</p>
+				<p className="text-muted-foreground truncate text-xs">{citation.domain}</p>
+			</div>
+			<ExternalLink className="text-muted-foreground mt-0.5 size-3.5 shrink-0 self-start opacity-0 transition-opacity group-hover:opacity-100" />
+		</button>
+	);
 }
 
 interface StackedCitationsProps {
-  id: string;
-  citations: SerializableCitation[];
-  className?: string;
-  onNavigate?: (href: string, citation: SerializableCitation) => void;
+	id: string;
+	citations: SerializableCitation[];
+	className?: string;
+	onNavigate?: (href: string, citation: SerializableCitation) => void;
 }
 
-function StackedCitations({
-  id,
-  citations,
-  className,
-  onNavigate,
-}: StackedCitationsProps) {
-  const {
-    open,
-    setOpen,
-    containerRef,
-    handleMouseEnter,
-    handleMouseLeave,
-    handleBlur,
-  } = useHoverPopover();
-  const maxIcons = 4;
-  const visibleCitations = citations.slice(0, maxIcons);
-  const remainingCount = Math.max(0, citations.length - maxIcons);
+function StackedCitations({ id, citations, className, onNavigate }: StackedCitationsProps) {
+	const { open, setOpen, containerRef, handleMouseEnter, handleMouseLeave, handleBlur } =
+		useHoverPopover();
+	const maxIcons = 4;
+	const visibleCitations = citations.slice(0, maxIcons);
+	const remainingCount = Math.max(0, citations.length - maxIcons);
 
-  const handleClick = (citation: SerializableCitation) => {
-    const href = resolveSafeNavigationHref(citation.href);
-    if (!href) return;
-    if (onNavigate) {
-      onNavigate(href, citation);
-    } else {
-      openSafeNavigationHref(href);
-    }
-  };
+	const handleClick = (citation: SerializableCitation) => {
+		const href = resolveSafeNavigationHref(citation.href);
+		if (!href) return;
+		if (onNavigate) {
+			onNavigate(href, citation);
+		} else {
+			openSafeNavigationHref(href);
+		}
+	};
 
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: blur boundary for popover focus management
-    <div ref={containerRef} onBlur={handleBlur} className="inline-flex">
-      <Popover open={open}>
-        <PopoverTrigger asChild>
-          <button
-            type="button"
-            data-tool-ui-id={id}
-            data-slot="citation-list"
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                setOpen(true);
-              }
-            }}
-            className={cn(
-              "isolate inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2",
-              "bg-muted/40 outline-none",
-              "transition-colors duration-150",
-              "hover:bg-muted/70",
-              "focus-visible:ring-ring focus-visible:ring-2",
-              className,
-            )}
-          >
-            <div className="flex items-center">
-              {visibleCitations.map((citation, index) => {
-                const TypeIcon =
-                  TYPE_ICONS[citation.type ?? "webpage"] ?? Globe;
-                return (
-                  <div
-                    key={citation.id}
-                    className={cn(
-                      "border-border bg-background dark:border-foreground/20 relative flex size-6 items-center justify-center rounded-full border shadow-xs",
-                      index > 0 && "-ml-2",
-                    )}
-                    style={{ zIndex: maxIcons - index }}
-                  >
-                    {citation.favicon ? (
-                      // biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain — next/image requires remotePatterns config
-                      <img
-                        src={citation.favicon}
-                        alt=""
-                        aria-hidden="true"
-                        width={18}
-                        height={18}
-                        className="size-4.5 rounded-full object-cover"
-                      />
-                    ) : (
-                      <TypeIcon
-                        className="text-muted-foreground size-3"
-                        aria-hidden="true"
-                      />
-                    )}
-                  </div>
-                );
-              })}
-              {remainingCount > 0 && (
-                <div
-                  className="border-border bg-background dark:border-foreground/20 relative -ml-2 flex size-6 items-center justify-center rounded-full border shadow-xs"
-                  style={{ zIndex: 0 }}
-                >
-                  <span className="text-muted-foreground text-[10px] font-medium tracking-tight">
-                    •••
-                  </span>
-                </div>
-              )}
-            </div>
-            <span className="text-muted-foreground text-sm tabular-nums">
-              {citations.length} source{citations.length !== 1 && "s"}
-            </span>
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          side="bottom"
-          align="start"
-          className="w-80 p-1"
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          onBlur={handleBlur}
-          onEscapeKeyDown={() => setOpen(false)}
-        >
-          <div className="flex max-h-72 flex-col overflow-y-auto">
-            {citations.map((citation) => (
-              <OverflowItem
-                key={citation.id}
-                citation={citation}
-                onClick={() => handleClick(citation)}
-              />
-            ))}
-          </div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
+	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: blur boundary for popover focus management
+		<div ref={containerRef} onBlur={handleBlur} className="inline-flex">
+			<Popover open={open}>
+				<PopoverTrigger asChild>
+					<button
+						type="button"
+						data-tool-ui-id={id}
+						data-slot="citation-list"
+						onMouseEnter={handleMouseEnter}
+						onMouseLeave={handleMouseLeave}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								setOpen(true);
+							}
+						}}
+						className={cn(
+							"isolate inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2",
+							"bg-muted/40 outline-none",
+							"transition-colors duration-150",
+							"hover:bg-muted/70",
+							"focus-visible:ring-ring focus-visible:ring-2",
+							className
+						)}
+					>
+						<div className="flex items-center">
+							{visibleCitations.map((citation, index) => {
+								const TypeIcon = TYPE_ICONS[citation.type ?? "webpage"] ?? Globe;
+								return (
+									<div
+										key={citation.id}
+										className={cn(
+											"border-border bg-background dark:border-foreground/20 relative flex size-6 items-center justify-center rounded-full border shadow-xs",
+											index > 0 && "-ml-2"
+										)}
+										style={{ zIndex: maxIcons - index }}
+									>
+										{citation.favicon ? (
+											// biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain — next/image requires remotePatterns config
+											<img
+												src={citation.favicon}
+												alt=""
+												aria-hidden="true"
+												width={18}
+												height={18}
+												className="size-4.5 rounded-full object-cover"
+											/>
+										) : (
+											<TypeIcon className="text-muted-foreground size-3" aria-hidden="true" />
+										)}
+									</div>
+								);
+							})}
+							{remainingCount > 0 && (
+								<div
+									className="border-border bg-background dark:border-foreground/20 relative -ml-2 flex size-6 items-center justify-center rounded-full border shadow-xs"
+									style={{ zIndex: 0 }}
+								>
+									<span className="text-muted-foreground text-[10px] font-medium tracking-tight">
+										•••
+									</span>
+								</div>
+							)}
+						</div>
+						<span className="text-muted-foreground text-sm tabular-nums">
+							{citations.length} source{citations.length !== 1 && "s"}
+						</span>
+					</button>
+				</PopoverTrigger>
+				<PopoverContent
+					side="bottom"
+					align="start"
+					className="w-80 p-1"
+					onMouseEnter={handleMouseEnter}
+					onMouseLeave={handleMouseLeave}
+					onBlur={handleBlur}
+					onEscapeKeyDown={() => setOpen(false)}
+				>
+					<div className="flex max-h-72 flex-col overflow-y-auto">
+						{citations.map((citation) => (
+							<OverflowItem
+								key={citation.id}
+								citation={citation}
+								onClick={() => handleClick(citation)}
+							/>
+						))}
+					</div>
+				</PopoverContent>
+			</Popover>
+		</div>
+	);
 }
diff --git a/surfsense_web/components/tool-ui/citation/citation.tsx b/surfsense_web/components/tool-ui/citation/citation.tsx
index dcecb7fa3..523169f49 100644
--- a/surfsense_web/components/tool-ui/citation/citation.tsx
+++ b/surfsense_web/components/tool-ui/citation/citation.tsx
@@ -1,261 +1,248 @@
 "use client";
 
-import * as React from "react";
 import type { LucideIcon } from "lucide-react";
-import {
-  FileText,
-  Globe,
-  Code2,
-  Newspaper,
-  Database,
-  File,
-  ExternalLink,
-} from "lucide-react";
-import { cn, Popover, PopoverContent, PopoverTrigger } from "./_adapter";
-
+import { Code2, Database, ExternalLink, File, FileText, Globe, Newspaper } from "lucide-react";
+import * as React from "react";
 import { openSafeNavigationHref, sanitizeHref } from "../shared/media";
-import type {
-  SerializableCitation,
-  CitationType,
-  CitationVariant,
-} from "./schema";
+import { cn, Popover, PopoverContent, PopoverTrigger } from "./_adapter";
+import type { CitationType, CitationVariant, SerializableCitation } from "./schema";
 
 const FALLBACK_LOCALE = "en-US";
 
 const TYPE_ICONS: Record<CitationType, LucideIcon> = {
-  webpage: Globe,
-  document: FileText,
-  article: Newspaper,
-  api: Database,
-  code: Code2,
-  other: File,
+	webpage: Globe,
+	document: FileText,
+	article: Newspaper,
+	api: Database,
+	code: Code2,
+	other: File,
 };
 
 function extractDomain(url: string): string | undefined {
-  try {
-    const urlObj = new URL(url);
-    return urlObj.hostname.replace(/^www\./, "");
-  } catch {
-    return undefined;
-  }
+	try {
+		const urlObj = new URL(url);
+		return urlObj.hostname.replace(/^www\./, "");
+	} catch {
+		return undefined;
+	}
 }
 
 function formatDate(isoString: string, locale: string): string {
-  try {
-    const date = new Date(isoString);
-    return date.toLocaleDateString(locale, {
-      year: "numeric",
-      month: "short",
-    });
-  } catch {
-    return isoString;
-  }
+	try {
+		const date = new Date(isoString);
+		return date.toLocaleDateString(locale, {
+			year: "numeric",
+			month: "short",
+		});
+	} catch {
+		return isoString;
+	}
 }
 
 function useHoverPopover(delay = 100) {
-  const [open, setOpen] = React.useState(false);
-  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const handleMouseEnter = React.useCallback(() => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => setOpen(true), delay);
-  }, [delay]);
-
-  const handleMouseLeave = React.useCallback(() => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => setOpen(false), delay);
-  }, [delay]);
-
-  React.useEffect(() => {
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, []);
-
-  return { open, setOpen, handleMouseEnter, handleMouseLeave };
+	const [open, setOpen] = React.useState(false);
+	const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	const handleMouseEnter = React.useCallback(() => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => setOpen(true), delay);
+	}, [delay]);
+
+	const handleMouseLeave = React.useCallback(() => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => setOpen(false), delay);
+	}, [delay]);
+
+	React.useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);
+
+	return { open, setOpen, handleMouseEnter, handleMouseLeave };
 }
 
 export interface CitationProps extends SerializableCitation {
-  variant?: CitationVariant;
-  className?: string;
-  onNavigate?: (href: string, citation: SerializableCitation) => void;
+	variant?: CitationVariant;
+	className?: string;
+	onNavigate?: (href: string, citation: SerializableCitation) => void;
 }
 
 export function Citation(props: CitationProps) {
-  const { variant = "default", className, onNavigate, ...serializable } = props;
-
-  const {
-    id,
-    href: rawHref,
-    title,
-    snippet,
-    domain: providedDomain,
-    favicon,
-    author,
-    publishedAt,
-    type = "webpage",
-    locale: providedLocale,
-  } = serializable;
-
-  const locale = providedLocale ?? FALLBACK_LOCALE;
-  const sanitizedHref = sanitizeHref(rawHref);
-  const domain = providedDomain ?? extractDomain(rawHref);
-
-  const citationData: SerializableCitation = {
-    ...serializable,
-    href: sanitizedHref ?? rawHref,
-    domain,
-    locale,
-  };
-
-  const TypeIcon = TYPE_ICONS[type] ?? Globe;
-
-  const handleClick = () => {
-    if (!sanitizedHref) return;
-    if (onNavigate) {
-      onNavigate(sanitizedHref, citationData);
-    } else {
-      openSafeNavigationHref(sanitizedHref);
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (sanitizedHref && (e.key === "Enter" || e.key === " ")) {
-      e.preventDefault();
-      handleClick();
-    }
-  };
-
-  const iconElement = favicon ? (
-    // biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain — next/image requires remotePatterns config
-    <img
-      src={favicon}
-      alt=""
-      aria-hidden="true"
-      width={14}
-      height={14}
-      className="bg-muted size-3.5 shrink-0 rounded object-cover"
-    />
-  ) : (
-    <TypeIcon className="size-3.5 shrink-0 opacity-60" aria-hidden="true" />
-  );
-
-  const { open, handleMouseEnter, handleMouseLeave } = useHoverPopover();
-
-  // Inline variant: compact chip with hover popover
-  if (variant === "inline") {
-    return (
-      <Popover open={open}>
-        <PopoverTrigger asChild>
-          <button
-            type="button"
-            aria-label={title}
-            data-tool-ui-id={id}
-            data-slot="citation"
-            onClick={handleClick}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-            className={cn(
-              "inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1",
-              "bg-muted/60 text-sm outline-none",
-              "transition-colors duration-150",
-              "hover:bg-muted",
-              "focus-visible:ring-ring focus-visible:ring-2",
-              className,
-            )}
-          >
-            {iconElement}
-            <span className="text-muted-foreground">{domain}</span>
-          </button>
-        </PopoverTrigger>
-        <PopoverContent
-          side="top"
-          align="start"
-          className="w-72 cursor-pointer p-0"
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-          onCloseAutoFocus={(e) => e.preventDefault()}
-          onClick={handleClick}
-        >
-          <div className="hover:bg-muted/50 flex flex-col gap-2 p-3 transition-colors">
-            <div className="flex items-start gap-2">
-              {iconElement}
-              <span className="text-muted-foreground text-xs">{domain}</span>
-            </div>
-            <p className="text-sm leading-snug font-medium">{title}</p>
-            {snippet && (
-              <p className="text-muted-foreground line-clamp-2 text-xs leading-relaxed">
-                {snippet}
-              </p>
-            )}
-          </div>
-        </PopoverContent>
-      </Popover>
-    );
-  }
-
-  // Default variant: full card
-  return (
-    <article
-      className={cn("relative w-full max-w-md min-w-72", className)}
-      lang={locale}
-      data-tool-ui-id={id}
-      data-slot="citation"
-    >
-      {/* biome-ignore lint/a11y/noStaticElementInteractions: div receives role="link" conditionally when href is present */}
-      <div
-        className={cn(
-          "group @container relative isolate flex w-full min-w-0 flex-col overflow-hidden rounded-xl",
-          "border-border bg-card border text-sm shadow-xs",
-          "transition-colors duration-150",
-          sanitizedHref && [
-            "cursor-pointer",
-            "hover:border-foreground/25",
-            "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
-          ],
-        )}
-        onClick={sanitizedHref ? handleClick : undefined}
-        role={sanitizedHref ? "link" : undefined}
-        tabIndex={sanitizedHref ? 0 : undefined}
-        onKeyDown={sanitizedHref ? handleKeyDown : undefined}
-      >
-        <div className="flex flex-col gap-2 p-4">
-          <div className="text-muted-foreground flex min-w-0 items-center justify-between gap-1.5 text-xs">
-            <div className="flex min-w-0 items-center gap-1.5">
-              {iconElement}
-              <span className="truncate font-medium">{domain}</span>
-              {(author || publishedAt) && (
-                <span className="opacity-70">
-                  <span className="opacity-60"> — </span>
-                  {author}
-                  {author && publishedAt && ", "}
-                  {publishedAt && (
-                    <time dateTime={publishedAt} className="tabular-nums">
-                      {formatDate(publishedAt, locale)}
-                    </time>
-                  )}
-                </span>
-              )}
-            </div>
-            {sanitizedHref && (
-              <ExternalLink className="size-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
-            )}
-          </div>
-
-          <h3 className="text-foreground text-[15px] leading-snug font-medium text-pretty">
-            <span className="group-hover:decoration-foreground/30 line-clamp-2 group-hover:underline group-hover:underline-offset-2">
-              {title}
-            </span>
-          </h3>
-
-          {snippet && (
-            <p className="text-muted-foreground text-[13px] leading-relaxed text-pretty">
-              <span className="line-clamp-3">{snippet}</span>
-            </p>
-          )}
-        </div>
-      </div>
-    </article>
-  );
+	const { variant = "default", className, onNavigate, ...serializable } = props;
+
+	const {
+		id,
+		href: rawHref,
+		title,
+		snippet,
+		domain: providedDomain,
+		favicon,
+		author,
+		publishedAt,
+		type = "webpage",
+		locale: providedLocale,
+	} = serializable;
+
+	const locale = providedLocale ?? FALLBACK_LOCALE;
+	const sanitizedHref = sanitizeHref(rawHref);
+	const domain = providedDomain ?? extractDomain(rawHref);
+
+	const citationData: SerializableCitation = {
+		...serializable,
+		href: sanitizedHref ?? rawHref,
+		domain,
+		locale,
+	};
+
+	const TypeIcon = TYPE_ICONS[type] ?? Globe;
+
+	const handleClick = () => {
+		if (!sanitizedHref) return;
+		if (onNavigate) {
+			onNavigate(sanitizedHref, citationData);
+		} else {
+			openSafeNavigationHref(sanitizedHref);
+		}
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (sanitizedHref && (e.key === "Enter" || e.key === " ")) {
+			e.preventDefault();
+			handleClick();
+		}
+	};
+
+	const iconElement = favicon ? (
+		// biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain — next/image requires remotePatterns config
+		<img
+			src={favicon}
+			alt=""
+			aria-hidden="true"
+			width={14}
+			height={14}
+			className="bg-muted size-3.5 shrink-0 rounded object-cover"
+		/>
+	) : (
+		<TypeIcon className="size-3.5 shrink-0 opacity-60" aria-hidden="true" />
+	);
+
+	const { open, handleMouseEnter, handleMouseLeave } = useHoverPopover();
+
+	// Inline variant: compact chip with hover popover
+	if (variant === "inline") {
+		return (
+			<Popover open={open}>
+				<PopoverTrigger asChild>
+					<button
+						type="button"
+						aria-label={title}
+						data-tool-ui-id={id}
+						data-slot="citation"
+						onClick={handleClick}
+						onMouseEnter={handleMouseEnter}
+						onMouseLeave={handleMouseLeave}
+						className={cn(
+							"inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1",
+							"bg-muted/60 text-sm outline-none",
+							"transition-colors duration-150",
+							"hover:bg-muted",
+							"focus-visible:ring-ring focus-visible:ring-2",
+							className
+						)}
+					>
+						{iconElement}
+						<span className="text-muted-foreground">{domain}</span>
+					</button>
+				</PopoverTrigger>
+				<PopoverContent
+					side="top"
+					align="start"
+					className="w-72 cursor-pointer p-0"
+					onMouseEnter={handleMouseEnter}
+					onMouseLeave={handleMouseLeave}
+					onOpenAutoFocus={(e) => e.preventDefault()}
+					onCloseAutoFocus={(e) => e.preventDefault()}
+					onClick={handleClick}
+				>
+					<div className="hover:bg-muted/50 flex flex-col gap-2 p-3 transition-colors">
+						<div className="flex items-start gap-2">
+							{iconElement}
+							<span className="text-muted-foreground text-xs">{domain}</span>
+						</div>
+						<p className="text-sm leading-snug font-medium">{title}</p>
+						{snippet && (
+							<p className="text-muted-foreground line-clamp-2 text-xs leading-relaxed">
+								{snippet}
+							</p>
+						)}
+					</div>
+				</PopoverContent>
+			</Popover>
+		);
+	}
+
+	// Default variant: full card
+	return (
+		<article
+			className={cn("relative w-full max-w-md min-w-72", className)}
+			lang={locale}
+			data-tool-ui-id={id}
+			data-slot="citation"
+		>
+			{/* biome-ignore lint/a11y/noStaticElementInteractions: div receives role="link" conditionally when href is present */}
+			<div
+				className={cn(
+					"group @container relative isolate flex w-full min-w-0 flex-col overflow-hidden rounded-xl",
+					"border-border bg-card border text-sm shadow-xs",
+					"transition-colors duration-150",
+					sanitizedHref && [
+						"cursor-pointer",
+						"hover:border-foreground/25",
+						"focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+					]
+				)}
+				onClick={sanitizedHref ? handleClick : undefined}
+				role={sanitizedHref ? "link" : undefined}
+				tabIndex={sanitizedHref ? 0 : undefined}
+				onKeyDown={sanitizedHref ? handleKeyDown : undefined}
+			>
+				<div className="flex flex-col gap-2 p-4">
+					<div className="text-muted-foreground flex min-w-0 items-center justify-between gap-1.5 text-xs">
+						<div className="flex min-w-0 items-center gap-1.5">
+							{iconElement}
+							<span className="truncate font-medium">{domain}</span>
+							{(author || publishedAt) && (
+								<span className="opacity-70">
+									<span className="opacity-60"> — </span>
+									{author}
+									{author && publishedAt && ", "}
+									{publishedAt && (
+										<time dateTime={publishedAt} className="tabular-nums">
+											{formatDate(publishedAt, locale)}
+										</time>
+									)}
+								</span>
+							)}
+						</div>
+						{sanitizedHref && (
+							<ExternalLink className="size-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
+						)}
+					</div>
+
+					<h3 className="text-foreground text-[15px] leading-snug font-medium text-pretty">
+						<span className="group-hover:decoration-foreground/30 line-clamp-2 group-hover:underline group-hover:underline-offset-2">
+							{title}
+						</span>
+					</h3>
+
+					{snippet && (
+						<p className="text-muted-foreground text-[13px] leading-relaxed text-pretty">
+							<span className="line-clamp-3">{snippet}</span>
+						</p>
+					)}
+				</div>
+			</div>
+		</article>
+	);
 }
diff --git a/surfsense_web/components/tool-ui/citation/index.ts b/surfsense_web/components/tool-ui/citation/index.ts
index 11df62e89..2abcc5746 100644
--- a/surfsense_web/components/tool-ui/citation/index.ts
+++ b/surfsense_web/components/tool-ui/citation/index.ts
@@ -1,9 +1,9 @@
-export { Citation } from "./citation";
 export type { CitationProps } from "./citation";
-export { CitationList } from "./citation-list";
+export { Citation } from "./citation";
 export type { CitationListProps } from "./citation-list";
+export { CitationList } from "./citation-list";
 export type {
-  SerializableCitation,
-  CitationType,
-  CitationVariant,
+	CitationType,
+	CitationVariant,
+	SerializableCitation,
 } from "./schema";
diff --git a/surfsense_web/components/tool-ui/citation/schema.ts b/surfsense_web/components/tool-ui/citation/schema.ts
index d6db58018..d03eb2d22 100644
--- a/surfsense_web/components/tool-ui/citation/schema.ts
+++ b/surfsense_web/components/tool-ui/citation/schema.ts
@@ -1,17 +1,13 @@
 import { z } from "zod";
-import {
-  ToolUIIdSchema,
-  ToolUIReceiptSchema,
-  ToolUIRoleSchema,
-} from "../shared/schema";
+import { ToolUIIdSchema, ToolUIReceiptSchema, ToolUIRoleSchema } from "../shared/schema";
 
 export const CitationTypeSchema = z.enum([
-  "webpage",
-  "document",
-  "article",
-  "api",
-  "code",
-  "other",
+	"webpage",
+	"document",
+	"article",
+	"api",
+	"code",
+	"other",
 ]);
 
 export type CitationType = z.infer<typeof CitationTypeSchema>;
@@ -21,18 +17,18 @@ export const CitationVariantSchema = z.enum(["default", "inline", "stacked"]);
 export type CitationVariant = z.infer<typeof CitationVariantSchema>;
 
 export const SerializableCitationSchema = z.object({
-  id: ToolUIIdSchema,
-  role: ToolUIRoleSchema.optional(),
-  receipt: ToolUIReceiptSchema.optional(),
-  href: z.string().url(),
-  title: z.string(),
-  snippet: z.string().optional(),
-  domain: z.string().optional(),
-  favicon: z.string().url().optional(),
-  author: z.string().optional(),
-  publishedAt: z.string().datetime().optional(),
-  type: CitationTypeSchema.optional(),
-  locale: z.string().optional(),
+	id: ToolUIIdSchema,
+	role: ToolUIRoleSchema.optional(),
+	receipt: ToolUIReceiptSchema.optional(),
+	href: z.string().url(),
+	title: z.string(),
+	snippet: z.string().optional(),
+	domain: z.string().optional(),
+	favicon: z.string().url().optional(),
+	author: z.string().optional(),
+	publishedAt: z.string().datetime().optional(),
+	type: CitationTypeSchema.optional(),
+	locale: z.string().optional(),
 });
 
 export type SerializableCitation = z.infer<typeof SerializableCitationSchema>;
diff --git a/surfsense_web/components/tool-ui/index.ts b/surfsense_web/components/tool-ui/index.ts
index 2e4ea82ef..517a8a290 100644
--- a/surfsense_web/components/tool-ui/index.ts
+++ b/surfsense_web/components/tool-ui/index.ts
@@ -17,7 +17,6 @@ export {
 export { GeneratePodcastToolUI } from "./generate-podcast";
 export { GenerateReportToolUI } from "./generate-report";
 export { CreateGoogleDriveFileToolUI, DeleteGoogleDriveFileToolUI } from "./google-drive";
-export { CreateOneDriveFileToolUI, DeleteOneDriveFileToolUI } from "./onedrive";
 export {
 	Image,
 	ImageErrorBoundary,
@@ -33,6 +32,7 @@ export {
 	UpdateLinearIssueToolUI,
 } from "./linear";
 export { CreateNotionPageToolUI, DeleteNotionPageToolUI, UpdateNotionPageToolUI } from "./notion";
+export { CreateOneDriveFileToolUI, DeleteOneDriveFileToolUI } from "./onedrive";
 export {
 	Plan,
 	PlanErrorBoundary,
diff --git a/surfsense_web/components/tool-ui/onedrive/create-file.tsx b/surfsense_web/components/tool-ui/onedrive/create-file.tsx
index c75be7f7f..d66f04d24 100644
--- a/surfsense_web/components/tool-ui/onedrive/create-file.tsx
+++ b/surfsense_web/components/tool-ui/onedrive/create-file.tsx
@@ -270,9 +270,7 @@ function ApprovalCard({
 								)}
 
 								<div className="space-y-2">
-									<p className="text-xs font-medium text-muted-foreground">
-										File Type
-									</p>
+									<p className="text-xs font-medium text-muted-foreground">File Type</p>
 									<Select value="docx" disabled>
 										<SelectTrigger className="w-full">
 											<SelectValue />
@@ -315,11 +313,25 @@ function ApprovalCard({
 			<div className="mx-5 h-px bg-border/50" />
 			<div className="px-5 pt-3">
 				{(pendingEdits?.name ?? args.name) != null && (
-					<p className="text-sm font-medium text-foreground">{String(pendingEdits?.name ?? args.name)}</p>
+					<p className="text-sm font-medium text-foreground">
+						{String(pendingEdits?.name ?? args.name)}
+					</p>
 				)}
 				{(pendingEdits?.content ?? args.content) != null && (
-					<div className="mt-2 max-h-[7rem] overflow-hidden text-sm" style={{ maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)", WebkitMaskImage: "linear-gradient(to bottom, black 50%, transparent 100%)" }}>
-						<PlateEditor markdown={String(pendingEdits?.content ?? args.content)} readOnly preset="readonly" editorVariant="none" className="h-auto [&_[data-slate-editor]]:!min-h-0 [&_[data-slate-editor]>*:first-child]:!mt-0" />
+					<div
+						className="mt-2 max-h-[7rem] overflow-hidden text-sm"
+						style={{
+							maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+							WebkitMaskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+						}}
+					>
+						<PlateEditor
+							markdown={String(pendingEdits?.content ?? args.content)}
+							readOnly
+							preset="readonly"
+							editorVariant="none"
+							className="h-auto [&_[data-slate-editor]]:!min-h-0 [&_[data-slate-editor]>*:first-child]:!mt-0"
+						/>
 					</div>
 				)}
 			</div>
@@ -329,12 +341,26 @@ function ApprovalCard({
 					<div className="mx-5 h-px bg-border/50" />
 					<div className="px-5 py-4 flex items-center gap-2 select-none">
 						{allowedDecisions.includes("approve") && (
-							<Button size="sm" className="rounded-lg gap-1.5" onClick={handleApprove} disabled={!canApprove || isPanelOpen}>
+							<Button
+								size="sm"
+								className="rounded-lg gap-1.5"
+								onClick={handleApprove}
+								disabled={!canApprove || isPanelOpen}
+							>
 								Approve <CornerDownLeftIcon className="size-3 opacity-60" />
 							</Button>
 						)}
 						{allowedDecisions.includes("reject") && (
-							<Button size="sm" variant="ghost" className="rounded-lg text-muted-foreground" disabled={isPanelOpen} onClick={() => { setRejected(); onDecision({ type: "reject", message: "User rejected the action." }); }}>
+							<Button
+								size="sm"
+								variant="ghost"
+								className="rounded-lg text-muted-foreground"
+								disabled={isPanelOpen}
+								onClick={() => {
+									setRejected();
+									onDecision({ type: "reject", message: "User rejected the action." });
+								}}
+							>
 								Reject
 							</Button>
 						)}
@@ -352,7 +378,9 @@ function ErrorCard({ result }: { result: ErrorResult }) {
 				<p className="text-sm font-semibold text-destructive">Failed to create OneDrive file</p>
 			</div>
 			<div className="mx-5 h-px bg-border/50" />
-			<div className="px-5 py-4"><p className="text-sm text-muted-foreground">{result.message}</p></div>
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
 		</div>
 	);
 }
@@ -364,7 +392,9 @@ function AuthErrorCard({ result }: { result: AuthErrorResult }) {
 				<p className="text-sm font-semibold text-destructive">OneDrive authentication expired</p>
 			</div>
 			<div className="mx-5 h-px bg-border/50" />
-			<div className="px-5 py-4"><p className="text-sm text-muted-foreground">{result.message}</p></div>
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
 		</div>
 	);
 }
@@ -373,7 +403,9 @@ function SuccessCard({ result }: { result: SuccessResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
 			<div className="px-5 pt-5 pb-4">
-				<p className="text-sm font-semibold text-foreground">{result.message || "OneDrive file created successfully"}</p>
+				<p className="text-sm font-semibold text-foreground">
+					{result.message || "OneDrive file created successfully"}
+				</p>
 			</div>
 			<div className="mx-5 h-px bg-border/50" />
 			<div className="px-5 py-4 space-y-2 text-xs">
@@ -383,7 +415,14 @@ function SuccessCard({ result }: { result: SuccessResult }) {
 				</div>
 				{result.web_url && (
 					<div>
-						<a href={result.web_url} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">Open in OneDrive</a>
+						<a
+							href={result.web_url}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-primary hover:underline"
+						>
+							Open in OneDrive
+						</a>
 					</div>
 				)}
 			</div>
@@ -391,12 +430,31 @@ function SuccessCard({ result }: { result: SuccessResult }) {
 	);
 }
 
-export const CreateOneDriveFileToolUI = ({ args, result }: ToolCallMessagePartProps<{ name: string; content?: string }, CreateOneDriveFileResult>) => {
+export const CreateOneDriveFileToolUI = ({
+	args,
+	result,
+}: ToolCallMessagePartProps<{ name: string; content?: string }, CreateOneDriveFileResult>) => {
 	if (!result) return null;
 	if (isInterruptResult(result)) {
-		return <ApprovalCard args={args} interruptData={result} onDecision={(decision) => { window.dispatchEvent(new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })); }} />;
+		return (
+			<ApprovalCard
+				args={args}
+				interruptData={result}
+				onDecision={(decision) => {
+					window.dispatchEvent(
+						new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
+					);
+				}}
+			/>
+		);
 	}
-	if (typeof result === "object" && result !== null && "status" in result && (result as { status: string }).status === "rejected") return null;
+	if (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as { status: string }).status === "rejected"
+	)
+		return null;
 	if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
 	if (isErrorResult(result)) return <ErrorCard result={result} />;
 	return <SuccessCard result={result as SuccessResult} />;
diff --git a/surfsense_web/components/tool-ui/onedrive/trash-file.tsx b/surfsense_web/components/tool-ui/onedrive/trash-file.tsx
index b5efd4fab..0b887865f 100644
--- a/surfsense_web/components/tool-ui/onedrive/trash-file.tsx
+++ b/surfsense_web/components/tool-ui/onedrive/trash-file.tsx
@@ -31,29 +31,76 @@ interface InterruptResult {
 	context?: { account?: OneDriveAccount; file?: OneDriveFile; error?: string };
 }
 
-interface SuccessResult { status: "success"; file_id: string; message?: string; deleted_from_kb?: boolean }
-interface ErrorResult { status: "error"; message: string }
-interface NotFoundResult { status: "not_found"; message: string }
-interface AuthErrorResult { status: "auth_error"; message: string; connector_type?: string }
+interface SuccessResult {
+	status: "success";
+	file_id: string;
+	message?: string;
+	deleted_from_kb?: boolean;
+}
+interface ErrorResult {
+	status: "error";
+	message: string;
+}
+interface NotFoundResult {
+	status: "not_found";
+	message: string;
+}
+interface AuthErrorResult {
+	status: "auth_error";
+	message: string;
+	connector_type?: string;
+}
 
-type DeleteOneDriveFileResult = InterruptResult | SuccessResult | ErrorResult | NotFoundResult | AuthErrorResult;
+type DeleteOneDriveFileResult =
+	| InterruptResult
+	| SuccessResult
+	| ErrorResult
+	| NotFoundResult
+	| AuthErrorResult;
 
 function isInterruptResult(result: unknown): result is InterruptResult {
-	return typeof result === "object" && result !== null && "__interrupt__" in result && (result as InterruptResult).__interrupt__ === true;
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"__interrupt__" in result &&
+		(result as InterruptResult).__interrupt__ === true
+	);
 }
 function isErrorResult(result: unknown): result is ErrorResult {
-	return typeof result === "object" && result !== null && "status" in result && (result as ErrorResult).status === "error";
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as ErrorResult).status === "error"
+	);
 }
 function isNotFoundResult(result: unknown): result is NotFoundResult {
-	return typeof result === "object" && result !== null && "status" in result && (result as NotFoundResult).status === "not_found";
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as NotFoundResult).status === "not_found"
+	);
 }
 function isAuthErrorResult(result: unknown): result is AuthErrorResult {
-	return typeof result === "object" && result !== null && "status" in result && (result as AuthErrorResult).status === "auth_error";
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as AuthErrorResult).status === "auth_error"
+	);
 }
 
-function ApprovalCard({ interruptData, onDecision }: {
+function ApprovalCard({
+	interruptData,
+	onDecision,
+}: {
 	interruptData: InterruptResult;
-	onDecision: (decision: { type: "approve" | "reject"; message?: string; edited_action?: { name: string; args: Record<string, unknown> } }) => void;
+	onDecision: (decision: {
+		type: "approve" | "reject";
+		message?: string;
+		edited_action?: { name: string; args: Record<string, unknown> };
+	}) => void;
 }) {
 	const { phase, setProcessing, setRejected } = useHitlPhase(interruptData);
 	const [deleteFromKb, setDeleteFromKb] = useState(false);
@@ -87,7 +134,11 @@ function ApprovalCard({ interruptData, onDecision }: {
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
 					<p className="text-sm font-semibold text-foreground">
-						{phase === "rejected" ? "OneDrive File Deletion Rejected" : phase === "processing" || phase === "complete" ? "OneDrive File Deletion Approved" : "Delete OneDrive File"}
+						{phase === "rejected"
+							? "OneDrive File Deletion Rejected"
+							: phase === "processing" || phase === "complete"
+								? "OneDrive File Deletion Approved"
+								: "Delete OneDrive File"}
 					</p>
 					{phase === "processing" ? (
 						<TextShimmerLoader text="Trashing file" size="sm" />
@@ -96,7 +147,9 @@ function ApprovalCard({ interruptData, onDecision }: {
 					) : phase === "rejected" ? (
 						<p className="text-xs text-muted-foreground mt-0.5">File deletion was cancelled</p>
 					) : (
-						<p className="text-xs text-muted-foreground mt-0.5">Requires your approval to proceed</p>
+						<p className="text-xs text-muted-foreground mt-0.5">
+							Requires your approval to proceed
+						</p>
 					)}
 				</div>
 			</div>
@@ -112,7 +165,9 @@ function ApprovalCard({ interruptData, onDecision }: {
 								{account && (
 									<div className="space-y-2">
 										<p className="text-xs font-medium text-muted-foreground">OneDrive Account</p>
-										<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm">{account.name}</div>
+										<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm">
+											{account.name}
+										</div>
 									</div>
 								)}
 								{file && (
@@ -121,7 +176,14 @@ function ApprovalCard({ interruptData, onDecision }: {
 										<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm space-y-0.5">
 											<div className="font-medium">{file.name}</div>
 											{file.web_url && (
-												<a href={file.web_url} target="_blank" rel="noopener noreferrer" className="text-xs text-primary hover:underline">Open in OneDrive</a>
+												<a
+													href={file.web_url}
+													target="_blank"
+													rel="noopener noreferrer"
+													className="text-xs text-primary hover:underline"
+												>
+													Open in OneDrive
+												</a>
 											)}
 										</div>
 									</div>
@@ -136,12 +198,21 @@ function ApprovalCard({ interruptData, onDecision }: {
 				<>
 					<div className="mx-5 h-px bg-border/50" />
 					<div className="px-5 py-4 space-y-3 select-none">
-						<p className="text-xs text-muted-foreground">The file will be moved to the OneDrive recycle bin. You can restore it within 93 days.</p>
+						<p className="text-xs text-muted-foreground">
+							The file will be moved to the OneDrive recycle bin. You can restore it within 93 days.
+						</p>
 						<div className="flex items-center gap-2.5">
-							<Checkbox id="od-delete-from-kb" checked={deleteFromKb} onCheckedChange={(v) => setDeleteFromKb(v === true)} className="shrink-0" />
+							<Checkbox
+								id="od-delete-from-kb"
+								checked={deleteFromKb}
+								onCheckedChange={(v) => setDeleteFromKb(v === true)}
+								className="shrink-0"
+							/>
 							<label htmlFor="od-delete-from-kb" className="flex-1 cursor-pointer">
 								<span className="text-sm text-foreground">Also remove from knowledge base</span>
-								<p className="text-xs text-muted-foreground mt-0.5">This will permanently delete the file from your knowledge base</p>
+								<p className="text-xs text-muted-foreground mt-0.5">
+									This will permanently delete the file from your knowledge base
+								</p>
 							</label>
 						</div>
 					</div>
@@ -152,8 +223,20 @@ function ApprovalCard({ interruptData, onDecision }: {
 				<>
 					<div className="mx-5 h-px bg-border/50" />
 					<div className="px-5 py-4 flex items-center gap-2 select-none">
-						<Button size="sm" className="rounded-lg gap-1.5" onClick={handleApprove}>Approve <CornerDownLeftIcon className="size-3 opacity-60" /></Button>
-						<Button size="sm" variant="ghost" className="rounded-lg text-muted-foreground" onClick={() => { setRejected(); onDecision({ type: "reject", message: "User rejected the action." }); }}>Reject</Button>
+						<Button size="sm" className="rounded-lg gap-1.5" onClick={handleApprove}>
+							Approve <CornerDownLeftIcon className="size-3 opacity-60" />
+						</Button>
+						<Button
+							size="sm"
+							variant="ghost"
+							className="rounded-lg text-muted-foreground"
+							onClick={() => {
+								setRejected();
+								onDecision({ type: "reject", message: "User rejected the action." });
+							}}
+						>
+							Reject
+						</Button>
 					</div>
 				</>
 			)}
@@ -164,9 +247,13 @@ function ApprovalCard({ interruptData, onDecision }: {
 function ErrorCard({ result }: { result: ErrorResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
-			<div className="px-5 pt-5 pb-4"><p className="text-sm font-semibold text-destructive">Failed to delete file</p></div>
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-destructive">Failed to delete file</p>
+			</div>
 			<div className="mx-5 h-px bg-border/50" />
-			<div className="px-5 py-4"><p className="text-sm text-muted-foreground">{result.message}</p></div>
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
 		</div>
 	);
 }
@@ -185,9 +272,13 @@ function NotFoundCard({ result }: { result: NotFoundResult }) {
 function AuthErrorCard({ result }: { result: AuthErrorResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
-			<div className="px-5 pt-5 pb-4"><p className="text-sm font-semibold text-destructive">OneDrive authentication expired</p></div>
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-destructive">OneDrive authentication expired</p>
+			</div>
 			<div className="mx-5 h-px bg-border/50" />
-			<div className="px-5 py-4"><p className="text-sm text-muted-foreground">{result.message}</p></div>
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
 		</div>
 	);
 }
@@ -195,23 +286,51 @@ function AuthErrorCard({ result }: { result: AuthErrorResult }) {
 function SuccessCard({ result }: { result: SuccessResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
-			<div className="px-5 pt-5 pb-4"><p className="text-sm font-semibold text-foreground">{result.message || "File moved to recycle bin"}</p></div>
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-foreground">
+					{result.message || "File moved to recycle bin"}
+				</p>
+			</div>
 			{result.deleted_from_kb && (
 				<>
 					<div className="mx-5 h-px bg-border/50" />
-					<div className="px-5 py-4 text-xs"><span className="text-green-600 dark:text-green-500">Also removed from knowledge base</span></div>
+					<div className="px-5 py-4 text-xs">
+						<span className="text-green-600 dark:text-green-500">
+							Also removed from knowledge base
+						</span>
+					</div>
 				</>
 			)}
 		</div>
 	);
 }
 
-export const DeleteOneDriveFileToolUI = ({ result }: ToolCallMessagePartProps<{ file_name: string; delete_from_kb?: boolean }, DeleteOneDriveFileResult>) => {
+export const DeleteOneDriveFileToolUI = ({
+	result,
+}: ToolCallMessagePartProps<
+	{ file_name: string; delete_from_kb?: boolean },
+	DeleteOneDriveFileResult
+>) => {
 	if (!result) return null;
 	if (isInterruptResult(result)) {
-		return <ApprovalCard interruptData={result} onDecision={(decision) => { window.dispatchEvent(new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })); }} />;
+		return (
+			<ApprovalCard
+				interruptData={result}
+				onDecision={(decision) => {
+					window.dispatchEvent(
+						new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
+					);
+				}}
+			/>
+		);
 	}
-	if (typeof result === "object" && result !== null && "status" in result && (result as { status: string }).status === "rejected") return null;
+	if (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as { status: string }).status === "rejected"
+	)
+		return null;
 	if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
 	if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
 	if (isErrorResult(result)) return <ErrorCard result={result} />;
diff --git a/surfsense_web/components/tool-ui/shared/media/index.ts b/surfsense_web/components/tool-ui/shared/media/index.ts
index 5a3166335..d08f59cec 100644
--- a/surfsense_web/components/tool-ui/shared/media/index.ts
+++ b/surfsense_web/components/tool-ui/shared/media/index.ts
@@ -1,5 +1,5 @@
-export { sanitizeHref } from "./sanitize-href";
 export {
-  resolveSafeNavigationHref,
-  openSafeNavigationHref,
+	openSafeNavigationHref,
+	resolveSafeNavigationHref,
 } from "./safe-navigation";
+export { sanitizeHref } from "./sanitize-href";
diff --git a/surfsense_web/components/tool-ui/shared/media/safe-navigation.ts b/surfsense_web/components/tool-ui/shared/media/safe-navigation.ts
index b1f38bf48..899c2d2b2 100644
--- a/surfsense_web/components/tool-ui/shared/media/safe-navigation.ts
+++ b/surfsense_web/components/tool-ui/shared/media/safe-navigation.ts
@@ -1,23 +1,23 @@
 import { sanitizeHref } from "./sanitize-href";
 
 export function resolveSafeNavigationHref(
-  ...candidates: Array<string | null | undefined>
+	...candidates: Array<string | null | undefined>
 ): string | undefined {
-  for (const candidate of candidates) {
-    const safeHref = sanitizeHref(candidate ?? undefined);
-    if (safeHref) {
-      return safeHref;
-    }
-  }
+	for (const candidate of candidates) {
+		const safeHref = sanitizeHref(candidate ?? undefined);
+		if (safeHref) {
+			return safeHref;
+		}
+	}
 
-  return undefined;
+	return undefined;
 }
 
 export function openSafeNavigationHref(href: string | undefined): boolean {
-  if (!href || typeof window === "undefined") {
-    return false;
-  }
+	if (!href || typeof window === "undefined") {
+		return false;
+	}
 
-  window.open(href, "_blank", "noopener,noreferrer");
-  return true;
+	window.open(href, "_blank", "noopener,noreferrer");
+	return true;
 }
diff --git a/surfsense_web/components/tool-ui/shared/media/sanitize-href.ts b/surfsense_web/components/tool-ui/shared/media/sanitize-href.ts
index de7ced700..19b18db28 100644
--- a/surfsense_web/components/tool-ui/shared/media/sanitize-href.ts
+++ b/surfsense_web/components/tool-ui/shared/media/sanitize-href.ts
@@ -1,28 +1,28 @@
 export function sanitizeHref(href?: string): string | undefined {
-  if (!href) return undefined;
-  const candidate = href.trim();
-  if (!candidate) return undefined;
+	if (!href) return undefined;
+	const candidate = href.trim();
+	if (!candidate) return undefined;
 
-  if (
-    candidate.startsWith("/") ||
-    candidate.startsWith("./") ||
-    candidate.startsWith("../") ||
-    candidate.startsWith("?") ||
-    candidate.startsWith("#")
-  ) {
-    if (candidate.startsWith("//")) return undefined;
-    // eslint-disable-next-line no-control-regex -- intentionally matching control characters
-    if (/[\u0000-\u001F\u007F]/.test(candidate)) return undefined;
-    return candidate;
-  }
+	if (
+		candidate.startsWith("/") ||
+		candidate.startsWith("./") ||
+		candidate.startsWith("../") ||
+		candidate.startsWith("?") ||
+		candidate.startsWith("#")
+	) {
+		if (candidate.startsWith("//")) return undefined;
+		// eslint-disable-next-line no-control-regex -- intentionally matching control characters
+		if (/[\u0000-\u001F\u007F]/.test(candidate)) return undefined;
+		return candidate;
+	}
 
-  try {
-    const url = new URL(candidate);
-    if (url.protocol === "http:" || url.protocol === "https:") {
-      return url.toString();
-    }
-  } catch {
-    return undefined;
-  }
-  return undefined;
+	try {
+		const url = new URL(candidate);
+		if (url.protocol === "http:" || url.protocol === "https:") {
+			return url.toString();
+		}
+	} catch {
+		return undefined;
+	}
+	return undefined;
 }
diff --git a/surfsense_web/components/tool-ui/shared/schema.ts b/surfsense_web/components/tool-ui/shared/schema.ts
index b19f4a3b7..01d5ab1f7 100644
--- a/surfsense_web/components/tool-ui/shared/schema.ts
+++ b/surfsense_web/components/tool-ui/shared/schema.ts
@@ -1,5 +1,5 @@
-import { z } from "zod";
 import type { ReactNode } from "react";
+import { z } from "zod";
 
 /**
  * Tool UI conventions:
@@ -30,21 +30,16 @@ export type ToolUIId = z.infer<typeof ToolUIIdSchema>;
  * Primary role of a Tool UI surface in a chat context.
  */
 export const ToolUIRoleSchema = z.enum([
-  "information",
-  "decision",
-  "control",
-  "state",
-  "composite",
+	"information",
+	"decision",
+	"control",
+	"state",
+	"composite",
 ]);
 
 export type ToolUIRole = z.infer<typeof ToolUIRoleSchema>;
 
-export const ToolUIReceiptOutcomeSchema = z.enum([
-  "success",
-  "partial",
-  "failed",
-  "cancelled",
-]);
+export const ToolUIReceiptOutcomeSchema = z.enum(["success", "partial", "failed", "cancelled"]);
 
 export type ToolUIReceiptOutcome = z.infer<typeof ToolUIReceiptOutcomeSchema>;
 
@@ -52,10 +47,10 @@ export type ToolUIReceiptOutcome = z.infer<typeof ToolUIReceiptOutcomeSchema>;
  * Optional receipt metadata: a durable summary of an outcome.
  */
 export const ToolUIReceiptSchema = z.object({
-  outcome: ToolUIReceiptOutcomeSchema,
-  summary: z.string().min(1),
-  identifiers: z.record(z.string(), z.string()).optional(),
-  at: z.string().datetime(),
+	outcome: ToolUIReceiptOutcomeSchema,
+	summary: z.string().min(1),
+	identifiers: z.record(z.string(), z.string()).optional(),
+	at: z.string().datetime(),
 });
 
 export type ToolUIReceipt = z.infer<typeof ToolUIReceiptSchema>;
@@ -64,30 +59,28 @@ export type ToolUIReceipt = z.infer<typeof ToolUIReceiptSchema>;
  * Base schema for Tool UI payloads (id + optional role/receipt).
  */
 export const ToolUISurfaceSchema = z.object({
-  id: ToolUIIdSchema,
-  role: ToolUIRoleSchema.optional(),
-  receipt: ToolUIReceiptSchema.optional(),
+	id: ToolUIIdSchema,
+	role: ToolUIRoleSchema.optional(),
+	receipt: ToolUIReceiptSchema.optional(),
 });
 
 export type ToolUISurface = z.infer<typeof ToolUISurfaceSchema>;
 
 export const ActionSchema = z.object({
-  id: z.string().min(1),
-  label: z.string().min(1),
-  /**
-   * Canonical narration the assistant can use after this action is taken.
-   *
-   * Example: "I exported the table as CSV." / "I opened the link in a new tab."
-   */
-  sentence: z.string().optional(),
-  confirmLabel: z.string().optional(),
-  variant: z
-    .enum(["default", "destructive", "secondary", "ghost", "outline"])
-    .optional(),
-  icon: z.custom<ReactNode>().optional(),
-  loading: z.boolean().optional(),
-  disabled: z.boolean().optional(),
-  shortcut: z.string().optional(),
+	id: z.string().min(1),
+	label: z.string().min(1),
+	/**
+	 * Canonical narration the assistant can use after this action is taken.
+	 *
+	 * Example: "I exported the table as CSV." / "I opened the link in a new tab."
+	 */
+	sentence: z.string().optional(),
+	confirmLabel: z.string().optional(),
+	variant: z.enum(["default", "destructive", "secondary", "ghost", "outline"]).optional(),
+	icon: z.custom<ReactNode>().optional(),
+	loading: z.boolean().optional(),
+	disabled: z.boolean().optional(),
+	shortcut: z.string().optional(),
 });
 
 export type Action = z.infer<typeof ActionSchema>;
@@ -95,65 +88,62 @@ export type LocalAction = Action;
 export type DecisionAction = Action;
 
 export const DecisionResultSchema = z.object({
-  kind: z.literal("decision"),
-  version: z.literal(1),
-  decisionId: z.string().min(1),
-  actionId: z.string().min(1),
-  actionLabel: z.string().min(1),
-  at: z.string().datetime(),
-  payload: z.record(z.string(), z.unknown()).optional(),
+	kind: z.literal("decision"),
+	version: z.literal(1),
+	decisionId: z.string().min(1),
+	actionId: z.string().min(1),
+	actionLabel: z.string().min(1),
+	at: z.string().datetime(),
+	payload: z.record(z.string(), z.unknown()).optional(),
 });
 
-export type DecisionResult<
-  TPayload extends Record<string, unknown> = Record<string, unknown>,
-> = Omit<z.infer<typeof DecisionResultSchema>, "payload"> & {
-  payload?: TPayload;
-};
+export type DecisionResult<TPayload extends Record<string, unknown> = Record<string, unknown>> =
+	Omit<z.infer<typeof DecisionResultSchema>, "payload"> & {
+		payload?: TPayload;
+	};
 
 export function createDecisionResult<
-  TPayload extends Record<string, unknown> = Record<string, unknown>,
+	TPayload extends Record<string, unknown> = Record<string, unknown>,
 >(args: {
-  decisionId: string;
-  action: { id: string; label: string };
-  payload?: TPayload;
+	decisionId: string;
+	action: { id: string; label: string };
+	payload?: TPayload;
 }): DecisionResult<TPayload> {
-  return {
-    kind: "decision",
-    version: 1,
-    decisionId: args.decisionId,
-    actionId: args.action.id,
-    actionLabel: args.action.label,
-    at: new Date().toISOString(),
-    payload: args.payload,
-  };
+	return {
+		kind: "decision",
+		version: 1,
+		decisionId: args.decisionId,
+		actionId: args.action.id,
+		actionLabel: args.action.label,
+		at: new Date().toISOString(),
+		payload: args.payload,
+	};
 }
 
 export const ActionButtonsPropsSchema = z.object({
-  actions: z.array(ActionSchema).min(1),
-  align: z.enum(["left", "center", "right"]).optional(),
-  confirmTimeout: z.number().positive().optional(),
-  className: z.string().optional(),
+	actions: z.array(ActionSchema).min(1),
+	align: z.enum(["left", "center", "right"]).optional(),
+	confirmTimeout: z.number().positive().optional(),
+	className: z.string().optional(),
 });
 
 export const SerializableActionSchema = ActionSchema.omit({ icon: true });
 export const SerializableActionsSchema = ActionButtonsPropsSchema.extend({
-  actions: z.array(SerializableActionSchema),
+	actions: z.array(SerializableActionSchema),
 }).omit({ className: true });
 
 export interface ActionsConfig {
-  items: Action[];
-  align?: "left" | "center" | "right";
-  confirmTimeout?: number;
+	items: Action[];
+	align?: "left" | "center" | "right";
+	confirmTimeout?: number;
 }
 
 export const SerializableActionsConfigSchema = z.object({
-  items: z.array(SerializableActionSchema).min(1),
-  align: z.enum(["left", "center", "right"]).optional(),
-  confirmTimeout: z.number().positive().optional(),
+	items: z.array(SerializableActionSchema).min(1),
+	align: z.enum(["left", "center", "right"]).optional(),
+	confirmTimeout: z.number().positive().optional(),
 });
 
-export type SerializableActionsConfig = z.infer<
-  typeof SerializableActionsConfigSchema
->;
+export type SerializableActionsConfig = z.infer<typeof SerializableActionsConfigSchema>;
 
 export type SerializableAction = z.infer<typeof SerializableActionSchema>;
diff --git a/surfsense_web/lib/apis/prompts-api.service.ts b/surfsense_web/lib/apis/prompts-api.service.ts
index 5c445c02a..307a9f597 100644
--- a/surfsense_web/lib/apis/prompts-api.service.ts
+++ b/surfsense_web/lib/apis/prompts-api.service.ts
@@ -4,8 +4,8 @@ import {
 	promptCreateRequest,
 	promptDeleteResponse,
 	promptRead,
-	promptUpdateRequest,
 	promptsListResponse,
+	promptUpdateRequest,
 } from "@/contracts/types/prompts.types";
 import { ValidationError } from "@/lib/error";
 import { baseApiService } from "./base-api.service";
diff --git a/surfsense_web/lib/chat/streaming-state.ts b/surfsense_web/lib/chat/streaming-state.ts
index 7894c8115..2f612a552 100644
--- a/surfsense_web/lib/chat/streaming-state.ts
+++ b/surfsense_web/lib/chat/streaming-state.ts
@@ -27,10 +27,7 @@ export interface ContentPartsState {
 	toolCallIndices: Map<string, number>;
 }
 
-function areThinkingStepsEqual(
-	current: ThinkingStepData[],
-	next: ThinkingStepData[]
-): boolean {
+function areThinkingStepsEqual(current: ThinkingStepData[], next: ThinkingStepData[]): boolean {
 	if (current.length !== next.length) return false;
 
 	for (let i = 0; i < current.length; i += 1) {

From cbcaa7aed8ad85b587202bc02eb1548685ae76eb Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 30 Mar 2026 02:06:57 +0530
Subject: [PATCH 22/24] feat: add mobile citation drawer and enhance citation
 metadata context for improved citation management

---
 .../assistant-ui/assistant-message.tsx        | 163 +++++++++++++++++-
 .../citation-metadata-context.tsx             |   4 +
 surfsense_web/components/ui/drawer.tsx        |   2 +-
 3 files changed, 166 insertions(+), 3 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/assistant-message.tsx b/surfsense_web/components/assistant-ui/assistant-message.tsx
index ba2753da8..1418cde98 100644
--- a/surfsense_web/components/assistant-ui/assistant-message.tsx
+++ b/surfsense_web/components/assistant-ui/assistant-message.tsx
@@ -12,19 +12,25 @@ import {
 	ClipboardPaste,
 	CopyIcon,
 	DownloadIcon,
+	ExternalLink,
+	Globe,
 	MessageSquare,
 	RefreshCwIcon,
 } from "lucide-react";
 import type { FC } from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { commentsEnabledAtom, targetCommentIdAtom } from "@/atoms/chat/current-thread.atom";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
-import { CitationMetadataProvider } from "@/components/assistant-ui/citation-metadata-context";
+import {
+	CitationMetadataProvider,
+	useAllCitationMetadata,
+} from "@/components/assistant-ui/citation-metadata-context";
 import { MarkdownText } from "@/components/assistant-ui/markdown-text";
 import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { CommentPanelContainer } from "@/components/chat-comments/comment-panel-container/comment-panel-container";
 import { CommentSheet } from "@/components/chat-comments/comment-sheet/comment-sheet";
+import type { SerializableCitation } from "@/components/tool-ui/citation";
 import {
 	CreateConfluencePageToolUI,
 	DeleteConfluencePageToolUI,
@@ -65,12 +71,157 @@ import {
 } from "@/components/tool-ui/notion";
 import { CreateOneDriveFileToolUI, DeleteOneDriveFileToolUI } from "@/components/tool-ui/onedrive";
 import { SandboxExecuteToolUI } from "@/components/tool-ui/sandbox-execute";
+import {
+	openSafeNavigationHref,
+	resolveSafeNavigationHref,
+} from "@/components/tool-ui/shared/media";
 import { RecallMemoryToolUI, SaveMemoryToolUI } from "@/components/tool-ui/user-memory";
 import { GenerateVideoPresentationToolUI } from "@/components/tool-ui/video-presentation";
+import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
 import { useComments } from "@/hooks/use-comments";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { cn } from "@/lib/utils";
 
+function extractDomain(url: string): string | undefined {
+	try {
+		return new URL(url).hostname.replace(/^www\./, "");
+	} catch {
+		return undefined;
+	}
+}
+
+function useCitationsFromMetadata(): SerializableCitation[] {
+	const allCitations = useAllCitationMetadata();
+	return useMemo(() => {
+		const result: SerializableCitation[] = [];
+		for (const [url, meta] of allCitations) {
+			const domain = extractDomain(url);
+			result.push({
+				id: `url-cite-${url}`,
+				href: url,
+				title: meta.title,
+				snippet: meta.snippet,
+				domain,
+				favicon: domain ? `https://www.google.com/s2/favicons?domain=${domain}&sz=32` : undefined,
+				type: "webpage",
+			});
+		}
+		return result;
+	}, [allCitations]);
+}
+
+const MobileCitationDrawer: FC = () => {
+	const [open, setOpen] = useState(false);
+	const citations = useCitationsFromMetadata();
+
+	if (citations.length === 0) return null;
+
+	const maxIcons = 4;
+	const visible = citations.slice(0, maxIcons);
+	const remainingCount = Math.max(0, citations.length - maxIcons);
+
+	const handleNavigate = (citation: SerializableCitation) => {
+		const href = resolveSafeNavigationHref(citation.href);
+		if (href) openSafeNavigationHref(href);
+	};
+
+	return (
+		<>
+			<button
+				type="button"
+				onClick={() => setOpen(true)}
+				className={cn(
+					"isolate inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2",
+					"bg-muted/40 outline-none",
+					"transition-colors duration-150",
+					"hover:bg-muted/70",
+					"focus-visible:ring-ring focus-visible:ring-2"
+				)}
+			>
+				<div className="flex items-center">
+					{visible.map((citation, index) => (
+						<div
+							key={citation.id}
+							className={cn(
+								"border-border bg-background dark:border-foreground/20 relative flex size-6 items-center justify-center rounded-full border shadow-xs",
+								index > 0 && "-ml-2"
+							)}
+							style={{ zIndex: maxIcons - index }}
+						>
+							{citation.favicon ? (
+								// biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain
+								<img
+									src={citation.favicon}
+									alt=""
+									aria-hidden="true"
+									width={18}
+									height={18}
+									className="size-4.5 rounded-full object-cover"
+								/>
+							) : (
+								<Globe className="text-muted-foreground size-3" aria-hidden="true" />
+							)}
+						</div>
+					))}
+					{remainingCount > 0 && (
+						<div
+							className="border-border bg-background dark:border-foreground/20 relative -ml-2 flex size-6 items-center justify-center rounded-full border shadow-xs"
+							style={{ zIndex: 0 }}
+						>
+							<span className="text-muted-foreground text-[10px] font-medium tracking-tight">
+								•••
+							</span>
+						</div>
+					)}
+				</div>
+				<span className="text-muted-foreground text-sm tabular-nums">
+					{citations.length} source{citations.length !== 1 && "s"}
+				</span>
+			</button>
+
+			<Drawer open={open} onOpenChange={setOpen}>
+				<DrawerContent className="max-h-[70dvh]">
+					<DrawerHandle />
+					<div className="flex items-center px-4 py-2">
+						<DrawerTitle className="text-sm font-medium">Sources</DrawerTitle>
+					</div>
+					<div className="overflow-y-auto px-1 pb-6">
+						{citations.map((citation) => (
+							<button
+								key={citation.id}
+								type="button"
+								onClick={() => handleNavigate(citation)}
+								className="group flex w-full items-center gap-2.5 rounded-md px-3 py-2.5 text-left transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none"
+							>
+								{citation.favicon ? (
+									// biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain
+									<img
+										src={citation.favicon}
+										alt=""
+										aria-hidden="true"
+										width={16}
+										height={16}
+										className="bg-muted size-4 shrink-0 rounded object-cover"
+									/>
+								) : (
+									<Globe className="text-muted-foreground size-4 shrink-0" aria-hidden="true" />
+								)}
+								<div className="min-w-0 flex-1">
+									<p className="truncate text-sm font-medium group-hover:underline group-hover:underline-offset-2">
+										{citation.title}
+									</p>
+									<p className="text-muted-foreground truncate text-xs">{citation.domain}</p>
+								</div>
+								<ExternalLink className="text-muted-foreground size-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
+							</button>
+						))}
+					</div>
+				</DrawerContent>
+			</Drawer>
+		</>
+	);
+};
+
 export const MessageError: FC = () => {
 	return (
 		<MessagePrimitive.Error>
@@ -82,6 +233,8 @@ export const MessageError: FC = () => {
 };
 
 const AssistantMessageInner: FC = () => {
+	const isMobile = !useMediaQuery("(min-width: 768px)");
+
 	return (
 		<CitationMetadataProvider>
 			<div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
@@ -133,6 +286,12 @@ const AssistantMessageInner: FC = () => {
 				<MessageError />
 			</div>
 
+			{isMobile && (
+				<div className="ml-2 mt-2">
+					<MobileCitationDrawer />
+				</div>
+			)}
+
 			<div className="aui-assistant-message-footer mt-1 mb-5 ml-2 flex">
 				<AssistantActionBar />
 			</div>
diff --git a/surfsense_web/components/assistant-ui/citation-metadata-context.tsx b/surfsense_web/components/assistant-ui/citation-metadata-context.tsx
index b14d9ba4f..0bf5dd946 100644
--- a/surfsense_web/components/assistant-ui/citation-metadata-context.tsx
+++ b/surfsense_web/components/assistant-ui/citation-metadata-context.tsx
@@ -63,3 +63,7 @@ export function useCitationMetadata(url: string): CitationMeta | undefined {
 	const map = useContext(CitationMetadataContext);
 	return map.get(url);
 }
+
+export function useAllCitationMetadata(): CitationMetadataMap {
+	return useContext(CitationMetadataContext);
+}
diff --git a/surfsense_web/components/ui/drawer.tsx b/surfsense_web/components/ui/drawer.tsx
index 67d4189e4..e5ab33c17 100644
--- a/surfsense_web/components/ui/drawer.tsx
+++ b/surfsense_web/components/ui/drawer.tsx
@@ -93,7 +93,7 @@ DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 function DrawerHandle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
 	return (
 		<div
-			className={cn("mx-auto mt-4 h-1.5 w-12 rounded-full bg-muted-foreground/40", className)}
+			className={cn("mx-auto mt-4 h-4 w-14 rounded-full bg-muted-foreground/40", className)}
 			{...props}
 		/>
 	);

From 411ea3e052781594e0db8344aaa13713ff8bef7b Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 30 Mar 2026 02:11:42 +0530
Subject: [PATCH 23/24] fix: adjust DrawerHandle dimensions for improved UI
 consistency

---
 surfsense_web/components/ui/drawer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/surfsense_web/components/ui/drawer.tsx b/surfsense_web/components/ui/drawer.tsx
index e5ab33c17..d02996d96 100644
--- a/surfsense_web/components/ui/drawer.tsx
+++ b/surfsense_web/components/ui/drawer.tsx
@@ -93,7 +93,7 @@ DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 function DrawerHandle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
 	return (
 		<div
-			className={cn("mx-auto mt-4 h-4 w-14 rounded-full bg-muted-foreground/40", className)}
+			className={cn("mx-auto mt-4 h-2 w-12 rounded-full bg-muted-foreground/40", className)}
 			{...props}
 		/>
 	);

From 46f855331110b4a7c850c339c35e17eb9bbffb7b Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 30 Mar 2026 02:22:35 +0530
Subject: [PATCH 24/24] feat: update MobileCitationDrawer layout and enhance
 DrawerHeader for improved UI presentation

---
 .../components/assistant-ui/assistant-message.tsx    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/assistant-message.tsx b/surfsense_web/components/assistant-ui/assistant-message.tsx
index 1418cde98..62407bbf7 100644
--- a/surfsense_web/components/assistant-ui/assistant-message.tsx
+++ b/surfsense_web/components/assistant-ui/assistant-message.tsx
@@ -77,7 +77,7 @@ import {
 } from "@/components/tool-ui/shared/media";
 import { RecallMemoryToolUI, SaveMemoryToolUI } from "@/components/tool-ui/user-memory";
 import { GenerateVideoPresentationToolUI } from "@/components/tool-ui/video-presentation";
-import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
+import { Drawer, DrawerContent, DrawerHandle, DrawerHeader, DrawerTitle } from "@/components/ui/drawer";
 import { useComments } from "@/hooks/use-comments";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { cn } from "@/lib/utils";
@@ -180,12 +180,12 @@ const MobileCitationDrawer: FC = () => {
 			</button>
 
 			<Drawer open={open} onOpenChange={setOpen}>
-				<DrawerContent className="max-h-[70dvh]">
+				<DrawerContent className="max-h-[85vh] flex flex-col">
 					<DrawerHandle />
-					<div className="flex items-center px-4 py-2">
-						<DrawerTitle className="text-sm font-medium">Sources</DrawerTitle>
-					</div>
-					<div className="overflow-y-auto px-1 pb-6">
+					<DrawerHeader className="text-left">
+						<DrawerTitle className="text-base font-semibold">Sources</DrawerTitle>
+					</DrawerHeader>
+					<div className="overflow-y-auto flex-1 min-h-0 px-1 pb-6">
 						{citations.map((citation) => (
 							<button
 								key={citation.id}