chore: ran linting

2026-05-01 20:03:30 +02:00 · 2026-03-30 01:50:41 +05:30 · 2026-03-30 01:50:41 +05:30 · 04691d572b
commit 04691d572b
parent 74826b3714
61 changed files with 1962 additions and 1516 deletions
--- 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,
 						},
--- 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>
 	);
 };

--- 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;
--- 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>
 				)}

--- 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";

--- 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
--- 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(
--- 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}
--- 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%",
--- 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>
 		);
 	}
--- 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";
--- 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" />
 							)}
--- 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} />
 				)}
--- 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,
--- 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,
--- 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";
--- 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}
--- 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"
--- 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 {
--- 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());
+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(() => {});
-		}, []);
+	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 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]);
+	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);
-			}
+	// 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]
-		);
+	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;
+	// 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 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]);
+		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]
-		);
+	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;
+	if (filtered.length === 0) return null;

-		const defaultFiltered = filtered.filter((_, i) => i < DEFAULT_ACTIONS.length);
-		const customFiltered = filtered.filter((_, i) => i >= DEFAULT_ACTIONS.length);
+	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 (
+		<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>
+	);
+});
--- 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,
 							},
--- 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>
--- 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>
--- 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>
--- 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 */}
--- 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>
--- 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";
--- 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>
+	);
 }
--- 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 [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 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]);

-  React.useEffect(() => {
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, []);
+	React.useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);

-  return { open, setOpen, handleMouseEnter, handleMouseLeave };
+	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 { variant = "default", className, onNavigate, ...serializable } = props;

-  const {
-    id,
-    href: rawHref,
-    title,
-    snippet,
-    domain: providedDomain,
-    favicon,
-    author,
-    publishedAt,
-    type = "webpage",
-    locale: providedLocale,
-  } = serializable;
+	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 locale = providedLocale ?? FALLBACK_LOCALE;
+	const sanitizedHref = sanitizeHref(rawHref);
+	const domain = providedDomain ?? extractDomain(rawHref);

-  const citationData: SerializableCitation = {
-    ...serializable,
-    href: sanitizedHref ?? rawHref,
-    domain,
-    locale,
-  };
+	const citationData: SerializableCitation = {
+		...serializable,
+		href: sanitizedHref ?? rawHref,
+		domain,
+		locale,
+	};

-  const TypeIcon = TYPE_ICONS[type] ?? Globe;
+	const TypeIcon = TYPE_ICONS[type] ?? Globe;

-  const handleClick = () => {
-    if (!sanitizedHref) return;
-    if (onNavigate) {
-      onNavigate(sanitizedHref, citationData);
-    } else {
-      openSafeNavigationHref(sanitizedHref);
-    }
-  };
+	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 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 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();
+	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>
-    );
-  }
+	// 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>
+	// 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>
+					<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>
-  );
+					{snippet && (
+						<p className="text-muted-foreground text-[13px] leading-relaxed text-pretty">
+							<span className="line-clamp-3">{snippet}</span>
+						</p>
+					)}
+				</div>
+			</div>
+		</article>
+	);
 }
--- 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";
--- 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>;
--- 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,
--- 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} />;
--- 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} />;
--- 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";
--- 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;
 }
--- 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;
 }
--- 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>;