Merge remote-tracking branch 'upstream/dev' into feat/azure-ocr

2026-05-04 21:32:39 +02:00 · 2026-04-08 05:00:32 +05:30 · 2026-04-08 05:00:32 +05:30 · 6038f6dfc0
commit 6038f6dfc0
parent d264aec57d 65c05008e0
84 changed files with 6041 additions and 1065 deletions
--- a/surfsense_web/components/TokenHandler.tsx
+++ b/surfsense_web/components/TokenHandler.tsx
@ -2,6 +2,7 @@

 import { useEffect } from "react";
 import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
+import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
 import { getAndClearRedirectPath, setBearerToken, setRefreshToken } from "@/lib/auth-utils";
 import { trackLoginSuccess } from "@/lib/posthog/events";

@ -29,52 +30,54 @@ const TokenHandler = ({
 	useGlobalLoadingEffect(true);

 	useEffect(() => {
-		// Only run on client-side
 		if (typeof window === "undefined") return;

-		// Read tokens from URL at mount time — no subscription needed.
-		// TokenHandler only runs once after an auth redirect, so a stale read
-		// is impossible and useSearchParams() would add a pointless subscription.
-		// (Vercel Best Practice: rerender-defer-reads 5.2)
-		const params = new URLSearchParams(window.location.search);
-		const token = params.get(tokenParamName);
-		const refreshToken = params.get("refresh_token");
+		const run = async () => {
+			const params = new URLSearchParams(window.location.search);
+			const token = params.get(tokenParamName);
+			const refreshToken = params.get("refresh_token");

-		if (token) {
-			try {
-				// Track login success for OAuth flows (e.g., Google)
-				// Local login already tracks success before redirecting here
-				const alreadyTracked = sessionStorage.getItem("login_success_tracked");
-				if (!alreadyTracked) {
-					// This is an OAuth flow (Google login) - track success
-					trackLoginSuccess("google");
+			if (token) {
+				try {
+					const alreadyTracked = sessionStorage.getItem("login_success_tracked");
+					if (!alreadyTracked) {
+						trackLoginSuccess("google");
+					}
+					sessionStorage.removeItem("login_success_tracked");
+
+					localStorage.setItem(storageKey, token);
+					setBearerToken(token);
+
+					if (refreshToken) {
+						setRefreshToken(refreshToken);
+					}
+
+					// Auto-set active search space in desktop if not already set
+					if (window.electronAPI?.getActiveSearchSpace) {
+						try {
+							const stored = await window.electronAPI.getActiveSearchSpace();
+							if (!stored) {
+								const spaces = await searchSpacesApiService.getSearchSpaces();
+								if (spaces?.length) {
+									await window.electronAPI.setActiveSearchSpace?.(String(spaces[0].id));
+								}
+							}
+						} catch {
+							// non-critical
+						}
+					}
+
+					const savedRedirectPath = getAndClearRedirectPath();
+					const finalRedirectPath = savedRedirectPath || redirectPath;
+					window.location.href = finalRedirectPath;
+				} catch (error) {
+					console.error("Error storing token in localStorage:", error);
+					window.location.href = redirectPath;
 				}
-				// Clear the flag for future logins
-				sessionStorage.removeItem("login_success_tracked");
-
-				// Store access token in localStorage using both methods for compatibility
-				localStorage.setItem(storageKey, token);
-				setBearerToken(token);
-
-				// Store refresh token if provided
-				if (refreshToken) {
-					setRefreshToken(refreshToken);
-				}
-
-				// Check if there's a saved redirect path from before the auth flow
-				const savedRedirectPath = getAndClearRedirectPath();
-
-				// Use the saved path if available, otherwise use the default redirectPath
-				const finalRedirectPath = savedRedirectPath || redirectPath;
-
-				// Redirect to the appropriate path
-				window.location.href = finalRedirectPath;
-			} catch (error) {
-				console.error("Error storing token in localStorage:", error);
-				// Even if there's an error, try to redirect to the default path
-				window.location.href = redirectPath;
 			}
-		}
+		};
+
+		run();
 	}, [tokenParamName, storageKey, redirectPath]);

 	// Return null - the global provider handles the loading UI
--- a/surfsense_web/components/UserDropdown.tsx
+++ b/surfsense_web/components/UserDropdown.tsx
@ -15,7 +15,7 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Spinner } from "@/components/ui/spinner";
-import { logout } from "@/lib/auth-utils";
+import { getLoginPath, logout } from "@/lib/auth-utils";
 import { resetUser, trackLogout } from "@/lib/posthog/events";

 export function UserDropdown({
@ -33,22 +33,19 @@ export function UserDropdown({
 		if (isLoggingOut) return;
 		setIsLoggingOut(true);
 		try {
-			// Track logout event and reset PostHog identity
 			trackLogout();
 			resetUser();

-			// Revoke refresh token on server and clear all tokens from localStorage
 			await logout();

 			if (typeof window !== "undefined") {
-				window.location.href = "/";
+				window.location.href = getLoginPath();
 			}
 		} catch (error) {
 			console.error("Error during logout:", error);
-			// Even if there's an error, try to clear tokens and redirect
 			await logout();
 			if (typeof window !== "undefined") {
-				window.location.href = "/";
+				window.location.href = getLoginPath();
 			}
 		}
 	};
--- a/surfsense_web/components/assistant-ui/assistant-message.tsx
+++ b/surfsense_web/components/assistant-ui/assistant-message.tsx
@ -87,8 +87,14 @@ import {
 } from "@/components/ui/drawer";
 import { useComments } from "@/hooks/use-comments";
 import { useMediaQuery } from "@/hooks/use-media-query";
+import { useElectronAPI } from "@/hooks/use-platform";
 import { cn } from "@/lib/utils";

+// Captured once at module load — survives client-side navigations that strip the query param.
+const IS_QUICK_ASSIST_WINDOW =
+	typeof window !== "undefined" &&
+	new URLSearchParams(window.location.search).get("quickAssist") === "true";
+
 // Dynamically import video presentation tool to avoid loading Babel and Remotion in main bundle
 const GenerateVideoPresentationToolUI = dynamic(
 	() =>
@ -463,16 +469,9 @@ export const AssistantMessage: FC = () => {
 const AssistantActionBar: FC = () => {
 	const isLast = useAuiState((s) => s.message.isLast);
 	const aui = useAui();
-	const [quickAskMode, setQuickAskMode] = useState("");
+	const api = useElectronAPI();

-	useEffect(() => {
-		if (!isLast || !window.electronAPI?.getQuickAskMode) return;
-		window.electronAPI.getQuickAskMode().then((mode) => {
-			if (mode) setQuickAskMode(mode);
-		});
-	}, [isLast]);
-
-	const isTransform = isLast && !!window.electronAPI?.replaceText && quickAskMode === "transform";
+	const isQuickAssist = !!api?.replaceText && IS_QUICK_ASSIST_WINDOW;

 	return (
 		<ActionBarPrimitive.Root
@ -482,7 +481,7 @@ const AssistantActionBar: FC = () => {
 			className="aui-assistant-action-bar-root -ml-1 col-start-3 row-start-2 flex gap-1 text-muted-foreground md:data-floating:absolute md:data-floating:rounded-md md:data-floating:p-1 [&>button]:opacity-100 md:[&>button]:opacity-[var(--aui-button-opacity,1)]"
 		>
 			<ActionBarPrimitive.Copy asChild>
-				<TooltipIconButton tooltip="Copy">
+				<TooltipIconButton tooltip="Copy to clipboard">
 					<AuiIf condition={({ message }) => message.isCopied}>
 						<CheckIcon />
 					</AuiIf>
@ -492,29 +491,27 @@ const AssistantActionBar: FC = () => {
 				</TooltipIconButton>
 			</ActionBarPrimitive.Copy>
 			<ActionBarPrimitive.ExportMarkdown asChild>
-				<TooltipIconButton tooltip="Download">
+				<TooltipIconButton tooltip="Download as Markdown">
 					<DownloadIcon />
 				</TooltipIconButton>
 			</ActionBarPrimitive.ExportMarkdown>
 			{isLast && (
 				<ActionBarPrimitive.Reload asChild>
-					<TooltipIconButton tooltip="Refresh">
+					<TooltipIconButton tooltip="Regenerate response">
 						<RefreshCwIcon />
 					</TooltipIconButton>
 				</ActionBarPrimitive.Reload>
 			)}
-			{isTransform && (
-				<button
-					type="button"
+			{isQuickAssist && (
+				<TooltipIconButton
+					tooltip="Paste back into source app"
 					onClick={() => {
 						const text = aui.message().getCopyText();
-						window.electronAPI?.replaceText(text);
+						api?.replaceText(text);
 					}}
-					className="ml-1 inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
 				>
-					<ClipboardPaste className="size-3.5" />
-					Paste back
-				</button>
+					<ClipboardPaste />
+				</TooltipIconButton>
 			)}
 		</ActionBarPrimitive.Root>
 	);
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@ -4,6 +4,7 @@ import { Search } from "lucide-react";
 import type { FC } from "react";
 import { EnumConnectorName } from "@/contracts/enums/connector";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { usePlatform } from "@/hooks/use-platform";
 import { isSelfHosted } from "@/lib/env-config";
 import { ConnectorCard } from "../components/connector-card";
 import {
@ -75,9 +76,8 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 	onManage,
 	onViewAccountsList,
 }) => {
-	// Check if self-hosted mode (for showing self-hosted only connectors)
 	const selfHosted = isSelfHosted();
-	const isDesktop = typeof window !== "undefined" && !!window.electronAPI;
+	const { isDesktop } = usePlatform();

 	const matchesSearch = (title: string, description: string) =>
 		title.toLowerCase().includes(searchQuery.toLowerCase()) ||
--- a/surfsense_web/components/assistant-ui/inline-mention-editor.tsx
+++ b/surfsense_web/components/assistant-ui/inline-mention-editor.tsx
@ -24,6 +24,7 @@ export interface MentionedDocument {
 export interface InlineMentionEditorRef {
 	focus: () => void;
 	clear: () => void;
+	setText: (text: string) => void;
 	getText: () => string;
 	getMentionedDocuments: () => MentionedDocument[];
 	insertDocumentChip: (doc: Pick<Document, "id" | "title" | "document_type">) => void;
@ -397,6 +398,19 @@ export const InlineMentionEditor = forwardRef<InlineMentionEditorRef, InlineMent
 			}
 		}, []);

+		// Replace editor content with plain text and place cursor at end
+		const setText = useCallback(
+			(text: string) => {
+				if (!editorRef.current) return;
+				editorRef.current.innerText = text;
+				const empty = text.length === 0;
+				setIsEmpty(empty);
+				onChange?.(text, Array.from(mentionedDocs.values()));
+				focusAtEnd();
+			},
+			[focusAtEnd, onChange, mentionedDocs]
+		);
+
 		const setDocumentChipStatus = useCallback(
 			(
 				docId: number,
@ -469,6 +483,7 @@ export const InlineMentionEditor = forwardRef<InlineMentionEditorRef, InlineMent
 		useImperativeHandle(ref, () => ({
 			focus: () => editorRef.current?.focus(),
 			clear,
+			setText,
 			getText,
 			getMentionedDocuments,
 			insertDocumentChip,
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@ -89,17 +89,10 @@ import type { Document } from "@/contracts/types/document.types";
 import { useBatchCommentsPreload } from "@/hooks/use-comments";
 import { useCommentsSync } from "@/hooks/use-comments-sync";
 import { useMediaQuery } from "@/hooks/use-media-query";
+import { useElectronAPI } from "@/hooks/use-platform";
 import { cn } from "@/lib/utils";

-/** Placeholder texts that cycle in new chats when input is empty */
-const CYCLING_PLACEHOLDERS = [
-	"Ask SurfSense anything or @mention docs",
-	"Generate a podcast from my vacation ideas in Notion",
-	"Sum up last week's meeting notes from Drive in a bulleted list",
-	"Give me a brief overview of the most urgent tickets in Jira and Linear",
-	"Briefly, what are today's top ten important emails and calendar events?",
-	"Check if this week's Slack messages reference any GitHub issues",
-];
+const COMPOSER_PLACEHOLDER = "Ask anything · Type / for prompts · Type @ to mention docs";

 export const Thread: FC = () => {
 	return <ThreadContent />;
@ -362,45 +355,23 @@ const Composer: FC = () => {
 		};
 	}, []);

+	const electronAPI = useElectronAPI();
 	const [clipboardInitialText, setClipboardInitialText] = useState<string | undefined>();
 	const clipboardLoadedRef = useRef(false);
 	useEffect(() => {
-		if (!window.electronAPI || clipboardLoadedRef.current) return;
+		if (!electronAPI || clipboardLoadedRef.current) return;
 		clipboardLoadedRef.current = true;
-		window.electronAPI.getQuickAskText().then((text) => {
+		electronAPI.getQuickAskText().then((text) => {
 			if (text) {
 				setClipboardInitialText(text);
-				setShowPromptPicker(true);
 			}
 		});
-	}, []);
+	}, [electronAPI]);

 	const isThreadEmpty = useAuiState(({ thread }) => thread.isEmpty);
 	const isThreadRunning = useAuiState(({ thread }) => thread.isRunning);

-	// Cycling placeholder state - only cycles in new chats
-	const [placeholderIndex, setPlaceholderIndex] = useState(0);
-
-	// Cycle through placeholders every 4 seconds when thread is empty (new chat)
-	useEffect(() => {
-		// Only cycle when thread is empty (new chat)
-		if (!isThreadEmpty) {
-			// Reset to first placeholder when chat becomes active
-			setPlaceholderIndex(0);
-			return;
-		}
-
-		const intervalId = setInterval(() => {
-			setPlaceholderIndex((prev) => (prev + 1) % CYCLING_PLACEHOLDERS.length);
-		}, 6000);
-
-		return () => clearInterval(intervalId);
-	}, [isThreadEmpty]);
-
-	// Compute current placeholder - only cycle in new chats
-	const currentPlaceholder = isThreadEmpty
-		? CYCLING_PLACEHOLDERS[placeholderIndex]
-		: CYCLING_PLACEHOLDERS[0];
+	const currentPlaceholder = COMPOSER_PLACEHOLDER;

 	// Live collaboration state
 	const { data: currentUser } = useAtomValue(currentUserAtom);
@ -504,34 +475,28 @@ const Composer: FC = () => {
 				: userText
 					? `${action.prompt}\n\n${userText}`
 					: action.prompt;
+			editorRef.current?.setText(finalPrompt);
 			aui.composer().setText(finalPrompt);
-			aui.composer().send();
-			editorRef.current?.clear();
 			setShowPromptPicker(false);
 			setActionQuery("");
-			setMentionedDocuments([]);
-			setSidebarDocs([]);
 		},
-		[actionQuery, aui, setMentionedDocuments, setSidebarDocs]
+		[actionQuery, aui]
 	);

 	const handleQuickAskSelect = useCallback(
 		(action: { name: string; prompt: string; mode: "transform" | "explore" }) => {
 			if (!clipboardInitialText) return;
-			window.electronAPI?.setQuickAskMode(action.mode);
+			electronAPI?.setQuickAskMode(action.mode);
 			const finalPrompt = action.prompt.includes("{selection}")
 				? action.prompt.replace("{selection}", () => clipboardInitialText)
 				: `${action.prompt}\n\n${clipboardInitialText}`;
+			editorRef.current?.setText(finalPrompt);
 			aui.composer().setText(finalPrompt);
-			aui.composer().send();
-			editorRef.current?.clear();
 			setShowPromptPicker(false);
 			setActionQuery("");
 			setClipboardInitialText(undefined);
-			setMentionedDocuments([]);
-			setSidebarDocs([]);
 		},
-		[clipboardInitialText, aui, setMentionedDocuments, setSidebarDocs]
+		[clipboardInitialText, electronAPI, aui]
 	);

 	// Keyboard navigation for document/action picker (arrow keys, Enter, Escape)
--- a/surfsense_web/components/desktop/shortcut-recorder.tsx
+++ b/surfsense_web/components/desktop/shortcut-recorder.tsx
@ -0,0 +1,163 @@
+"use client";
+
+import { RotateCcw } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+// ---------------------------------------------------------------------------
+// Accelerator <-> display helpers
+// ---------------------------------------------------------------------------
+
+export function keyEventToAccelerator(e: React.KeyboardEvent): string | null {
+	const parts: string[] = [];
+	if (e.ctrlKey || e.metaKey) parts.push("CommandOrControl");
+	if (e.altKey) parts.push("Alt");
+	if (e.shiftKey) parts.push("Shift");
+
+	const key = e.key;
+	if (["Control", "Meta", "Alt", "Shift"].includes(key)) return null;
+
+	if (key === " ") parts.push("Space");
+	else if (key.length === 1) parts.push(key.toUpperCase());
+	else parts.push(key);
+
+	if (parts.length < 2) return null;
+	return parts.join("+");
+}
+
+export function acceleratorToDisplay(accel: string): string[] {
+	if (!accel) return [];
+	return accel.split("+").map((part) => {
+		if (part === "CommandOrControl") return "Ctrl";
+		if (part === "Space") return "Space";
+		return part;
+	});
+}
+
+export const DEFAULT_SHORTCUTS = {
+	generalAssist: "CommandOrControl+Shift+S",
+	quickAsk: "CommandOrControl+Alt+S",
+	autocomplete: "CommandOrControl+Shift+Space",
+};
+
+// ---------------------------------------------------------------------------
+// Kbd pill component
+// ---------------------------------------------------------------------------
+
+export function Kbd({ keys, className }: { keys: string[]; className?: string }) {
+	return (
+		<span className={cn("inline-flex items-center gap-0.5", className)}>
+			{keys.map((key, i) => (
+				<kbd
+					key={`${key}-${i}`}
+					className={cn(
+						"inline-flex h-6 min-w-6 items-center justify-center rounded border bg-muted px-1 font-mono text-[11px] font-medium text-muted-foreground",
+						key.length > 3 && "px-1.5"
+					)}
+				>
+					{key}
+				</kbd>
+			))}
+		</span>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Shortcut recorder component
+// ---------------------------------------------------------------------------
+
+export function ShortcutRecorder({
+	value,
+	onChange,
+	onReset,
+	defaultValue,
+	label,
+	description,
+	icon: Icon,
+}: {
+	value: string;
+	onChange: (accelerator: string) => void;
+	onReset: () => void;
+	defaultValue: string;
+	label: string;
+	description: string;
+	icon: React.ElementType;
+}) {
+	const [recording, setRecording] = useState(false);
+	const inputRef = useRef<HTMLButtonElement>(null);
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent) => {
+			if (!recording) return;
+			e.preventDefault();
+			e.stopPropagation();
+
+			if (e.key === "Escape") {
+				setRecording(false);
+				return;
+			}
+
+			const accel = keyEventToAccelerator(e);
+			if (accel) {
+				onChange(accel);
+				setRecording(false);
+			}
+		},
+		[recording, onChange]
+	);
+
+	const displayKeys = acceleratorToDisplay(value);
+	const isDefault = value === defaultValue;
+
+	return (
+		<div className="group flex items-center gap-3 rounded-lg border border-border/60 bg-card px-3 py-2.5 transition-colors hover:border-border">
+			{/* Icon */}
+			<div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+				<Icon className="size-4" />
+			</div>
+
+			{/* Label + description */}
+			<div className="min-w-0 flex-1">
+				<p className="text-[13px] font-medium leading-none">{label}</p>
+				<p className="mt-1 text-[11px] leading-snug text-muted-foreground">{description}</p>
+			</div>
+
+			{/* Actions */}
+			<div className="flex shrink-0 items-center gap-1">
+				{!isDefault && (
+					<Button
+						variant="ghost"
+						size="icon"
+						className="size-6 opacity-0 group-hover:opacity-100 transition-opacity"
+						onClick={onReset}
+						title="Reset to default"
+					>
+						<RotateCcw className="size-3" />
+					</Button>
+				)}
+				<button
+					ref={inputRef}
+					type="button"
+					onClick={() => setRecording(true)}
+					onKeyDown={handleKeyDown}
+					onBlur={() => setRecording(false)}
+					className={cn(
+						"flex h-7 items-center gap-0.5 rounded-md border px-2 transition-all focus:outline-none",
+						recording
+							? "border-primary bg-primary/5 ring-2 ring-primary/20"
+							: "border-input bg-muted/40 hover:bg-muted"
+					)}
+				>
+					{recording ? (
+						<span className="text-[11px] text-primary animate-pulse whitespace-nowrap">
+							Press keys…
+						</span>
+					) : (
+						<Kbd keys={displayKeys} />
+					)}
+				</button>
+			</div>
+		</div>
+	);
+}
--- a/surfsense_web/components/homepage/hero-section.tsx
+++ b/surfsense_web/components/homepage/hero-section.tsx
@ -1,39 +1,15 @@
 "use client";
+import { Monitor } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import dynamic from "next/dynamic";
 import Link from "next/link";
-import type React from "react";
-import { useEffect, useRef, useState } from "react";
+import React, { memo, useCallback, useEffect, useRef, useState } from "react";
 import Balancer from "react-wrap-balancer";
+import { ExpandedMediaOverlay, useExpandedMedia } from "@/components/ui/expanded-gif-overlay";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { AUTH_TYPE, BACKEND_URL } from "@/lib/env-config";
 import { trackLoginAttempt } from "@/lib/posthog/events";
 import { cn } from "@/lib/utils";

-const HeroCarousel = dynamic(
-	() => import("@/components/ui/hero-carousel").then((m) => ({ default: m.HeroCarousel })),
-	{
-		ssr: false,
-		loading: () => (
-			<div className="w-full py-4 sm:py-8">
-				<div className="mx-auto w-full max-w-[900px]">
-					<div className="overflow-hidden rounded-2xl border border-neutral-200/60 bg-white shadow-xl sm:rounded-3xl dark:border-neutral-700/60 dark:bg-neutral-900">
-						<div className="flex items-center gap-3 border-b border-neutral-200/60 px-4 py-3 sm:px-6 sm:py-4 dark:border-neutral-700/60">
-							<div className="min-w-0 flex-1">
-								<div className="h-5 w-32 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700" />
-								<div className="mt-2 h-4 w-64 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-							</div>
-						</div>
-						<div className="bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950">
-							<div className="aspect-video w-full animate-pulse rounded-lg bg-neutral-100 sm:rounded-xl dark:bg-neutral-800" />
-						</div>
-					</div>
-				</div>
-			</div>
-		),
-	}
-);
-
-// Official Google "G" logo with brand colors
 const GoogleLogo = ({ className }: { className?: string }) => (
 	<svg
 		className={className}
@ -62,87 +38,99 @@ const GoogleLogo = ({ className }: { className?: string }) => (
 	</svg>
 );

-function useIsDesktop(breakpoint = 1024) {
-	const [isDesktop, setIsDesktop] = useState(false);
-	useEffect(() => {
-		const mql = window.matchMedia(`(min-width: ${breakpoint}px)`);
-		setIsDesktop(mql.matches);
-		const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
-		mql.addEventListener("change", handler);
-		return () => mql.removeEventListener("change", handler);
-	}, [breakpoint]);
-	return isDesktop;
-}
+const TAB_ITEMS = [
+	{
+		title: "Connect & Sync",
+		description:
+			"Connect data sources like Notion, Drive and Gmail. Automatically sync to keep them updated.",
+		src: "/homepage/hero_tutorial/ConnectorFlowGif.mp4",
+		featured: true,
+	},
+	{
+		title: "Upload Documents",
+		description: "Upload documents directly, from images to massive PDFs.",
+		src: "/homepage/hero_tutorial/DocUploadGif.mp4",
+		featured: true,
+	},
+	{
+		title: "Search & Citation",
+		description: "Ask questions and get cited responses from your knowledge base.",
+		src: "/homepage/hero_tutorial/BSNCGif.mp4",
+		featured: false,
+	},
+	{
+		title: "Document Q&A",
+		description: "Mention specific documents in chat for targeted answers.",
+		src: "/homepage/hero_tutorial/BQnaGif_compressed.mp4",
+		featured: false,
+	},
+	{
+		title: "Reports",
+		description: "Generate reports from your sources in many formats.",
+		src: "/homepage/hero_tutorial/ReportGenGif_compressed.mp4",
+		featured: false,
+	},
+	{
+		title: "Podcasts",
+		description: "Turn anything into a podcast in under 20 seconds.",
+		src: "/homepage/hero_tutorial/PodcastGenGif.mp4",
+		featured: false,
+	},
+	{
+		title: "Image Generation",
+		description: "Generate high-quality images easily from your conversations.",
+		src: "/homepage/hero_tutorial/ImageGenGif.mp4",
+		featured: false,
+	},
+	{
+		title: "Collaborative Chat",
+		description: "Collaborate on AI-powered conversations in realtime with your team.",
+		src: "/homepage/hero_realtime/RealTimeChatGif.mp4",
+		featured: false,
+	},
+	{
+		title: "Comments",
+		description: "Add comments and tag teammates on any message.",
+		src: "/homepage/hero_realtime/RealTimeCommentsFlow.mp4",
+		featured: false,
+	},
+	{
+		title: "Video Generation",
+		description: "Create short videos with AI-generated visuals and narration from your sources.",
+		src: "/homepage/hero_tutorial/video_gen_surf.mp4",
+		featured: false,
+	},
+] as const;

 export function HeroSection() {
-	const containerRef = useRef<HTMLDivElement>(null);
-	const parentRef = useRef<HTMLDivElement>(null);
-	const isDesktop = useIsDesktop();
-
 	return (
-		<div
-			ref={parentRef}
-			className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-24 md:px-8 md:py-48"
-		>
-			<BackgroundGrids />
-			{isDesktop && (
-				<>
-					<CollisionMechanism
-						parentRef={parentRef}
-						beamOptions={{
-							initialX: -400,
-							translateX: 600,
-							duration: 7,
-							repeatDelay: 3,
-						}}
-					/>
-					<CollisionMechanism
-						parentRef={parentRef}
-						beamOptions={{
-							initialX: -200,
-							translateX: 800,
-							duration: 4,
-							repeatDelay: 3,
-						}}
-					/>
-					<CollisionMechanism
-						parentRef={parentRef}
-						beamOptions={{
-							initialX: 200,
-							translateX: 1200,
-							duration: 5,
-							repeatDelay: 3,
-						}}
-					/>
-					<CollisionMechanism
-						parentRef={parentRef}
-						beamOptions={{
-							initialX: 400,
-							translateX: 1400,
-							duration: 6,
-							repeatDelay: 3,
-						}}
-					/>
-				</>
-			)}
+		<div className="mx-auto w-full max-w-7xl min-w-0 pt-36">
+			<div className="mt-4 flex w-full min-w-0 flex-col items-start px-2 md:px-8 xl:px-0">
+				<h1
+					className={cn(
+						"relative mt-4 max-w-7xl text-left text-4xl font-bold tracking-tight text-balance text-neutral-900 sm:text-5xl md:text-6xl xl:text-8xl dark:text-neutral-50"
+					)}
+				>
+					<Balancer>NotebookLM for Teams</Balancer>
+				</h1>
+				<div className="mt-4 flex w-full flex-col items-start justify-between gap-4 md:mt-12 md:flex-row md:items-end md:gap-10">
+					<div>
+						<h2
+							className={cn(
+								"relative mb-8 max-w-2xl text-left text-sm tracking-wide text-neutral-600 antialiased sm:text-base md:text-xl dark:text-neutral-400"
+							)}
+						>
+							An open source, privacy focused alternative to NotebookLM for teams with no data
+							limits.
+						</h2>

-			<h2 className="relative z-50 mx-auto mb-4 mt-8 max-w-4xl text-balance text-center text-3xl font-semibold tracking-tight text-gray-700 md:text-7xl dark:text-neutral-300">
-				<div className="relative mx-auto inline-block w-max filter-[drop-shadow(0px_1px_3px_rgba(27,37,80,0.14))]">
-					<div className="text-black [text-shadow:0_0_rgba(0,0,0,0.1)] dark:text-white">
-						<Balancer>NotebookLM for Teams</Balancer>
+						<div className="relative mb-4 flex w-full flex-col justify-center gap-y-2 sm:flex-row sm:justify-start sm:space-y-0 sm:space-x-4">
+							<GetStartedButton />
+						</div>
 					</div>
+					<DownloadApp />
 				</div>
-			</h2>
-			<p className="relative z-50 mx-auto mt-4 max-w-lg px-6 text-center text-sm leading-relaxed text-gray-600 sm:text-base sm:leading-relaxed md:max-w-xl md:text-lg md:leading-relaxed dark:text-gray-200">
-				Connect any LLM to your internal knowledge sources and chat with it in real time alongside
-				your team.
-			</p>
-			<div className="mb-6 mt-6 flex w-full flex-col items-center justify-center gap-4 px-8 sm:flex-row md:mb-10">
-				<GetStartedButton />
-				{/* <ContactSalesButton /> */}
-			</div>
-			<div ref={containerRef} className="relative w-full z-51">
-				<HeroCarousel />
+				<BrowserWindow />
 			</div>
 		</div>
 	);
@ -158,256 +146,247 @@ function GetStartedButton() {

 	if (isGoogleAuth) {
 		return (
-			<motion.button
+			<button
 				type="button"
 				onClick={handleGoogleLogin}
-				whileHover="hover"
-				whileTap={{ scale: 0.98 }}
-				initial="idle"
-				className="group relative z-20 flex h-11 w-full cursor-pointer items-center justify-center gap-3 overflow-hidden rounded-xl bg-white px-6 py-2.5 text-sm font-semibold text-neutral-700 shadow-lg ring-1 ring-neutral-200/50 transition-shadow duration-300 hover:shadow-xl sm:w-56 dark:bg-neutral-900 dark:text-neutral-200 dark:ring-neutral-700/50"
-				variants={{
-					idle: { scale: 1, y: 0 },
-					hover: { scale: 1.02, y: -2 },
-				}}
+				className="flex h-14 w-full cursor-pointer items-center justify-center gap-3 rounded-lg bg-white text-center text-base font-medium text-neutral-700 shadow-sm ring-1 shadow-black/10 ring-black/10 transition duration-150 active:scale-98 hover:bg-neutral-50 sm:w-56 dark:bg-neutral-900 dark:text-neutral-200 dark:ring-neutral-700/50 dark:hover:bg-neutral-800"
 			>
-				{/* Animated gradient background on hover */}
-				<motion.div
-					className="absolute inset-0 bg-linear-to-r from-blue-50 via-green-50 to-yellow-50 dark:from-blue-950/30 dark:via-green-950/30 dark:to-yellow-950/30"
-					variants={{
-						idle: { opacity: 0 },
-						hover: { opacity: 1 },
-					}}
-					transition={{ duration: 0.3 }}
-				/>
-				{/* Google logo with subtle animation */}
-				<motion.div
-					className="relative"
-					variants={{
-						idle: { rotate: 0 },
-						hover: { rotate: [0, -8, 8, 0] },
-					}}
-					transition={{ duration: 0.4, ease: "easeInOut" }}
-				>
-					<GoogleLogo className="h-5 w-5" />
-				</motion.div>
-				<span className="relative">Continue with Google</span>
-			</motion.button>
+				<GoogleLogo className="h-5 w-5" />
+				<span>Continue with Google</span>
+			</button>
 		);
 	}

 	return (
-		<motion.div whileHover={{ scale: 1.02, y: -2 }} whileTap={{ scale: 0.98 }}>
-			<Link
-				href="/login"
-				className="group relative z-20 flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-black px-6 py-2.5 text-sm font-semibold text-white shadow-lg transition-shadow duration-300 hover:shadow-xl sm:w-56 dark:bg-white dark:text-black"
-			>
-				Get Started
-			</Link>
-		</motion.div>
+		<Link
+			href="/login"
+			className="flex h-14 w-full items-center justify-center rounded-lg bg-black text-center text-base font-medium text-white shadow-sm ring-1 shadow-black/10 ring-black/10 transition duration-150 active:scale-98 sm:w-52 dark:bg-white dark:text-black"
+		>
+			Get Started
+		</Link>
 	);
 }

-const BackgroundGrids = () => {
-	return (
-		<div className="pointer-events-none absolute inset-0 z-0 grid h-screen w-full -rotate-45 transform select-none grid-cols-2 gap-10 md:grid-cols-4">
-			<div className="relative h-full w-full">
-				<GridLineVertical className="left-0" />
-				<GridLineVertical className="left-auto right-0" />
-			</div>
-			<div className="relative h-full w-full">
-				<GridLineVertical className="left-0" />
-				<GridLineVertical className="left-auto right-0" />
-			</div>
-			<div className="relative h-full w-full bg-linear-to-b from-transparent via-neutral-100 to-transparent dark:via-neutral-800">
-				<GridLineVertical className="left-0" />
-				<GridLineVertical className="left-auto right-0" />
-			</div>
-			<div className="relative h-full w-full">
-				<GridLineVertical className="left-0" />
-				<GridLineVertical className="left-auto right-0" />
-			</div>
-		</div>
-	);
-};
-
-const CollisionMechanism = ({
-	parentRef,
-	beamOptions = {},
-}: {
-	parentRef: React.RefObject<HTMLDivElement | null>;
-	beamOptions?: {
-		initialX?: number;
-		translateX?: number;
-		initialY?: number;
-		translateY?: number;
-		rotate?: number;
-		className?: string;
-		duration?: number;
-		delay?: number;
-		repeatDelay?: number;
-	};
-}) => {
-	const beamRef = useRef<HTMLDivElement>(null);
-	const [collision, setCollision] = useState<{
-		detected: boolean;
-		coordinates: { x: number; y: number } | null;
-	}>({ detected: false, coordinates: null });
-	const [beamKey, setBeamKey] = useState(0);
-	const [cycleCollisionDetected, setCycleCollisionDetected] = useState(false);
-
-	useEffect(() => {
-		const checkCollision = () => {
-			if (beamRef.current && parentRef.current && !cycleCollisionDetected) {
-				const beamRect = beamRef.current.getBoundingClientRect();
-				const parentRect = parentRef.current.getBoundingClientRect();
-				const rightEdge = parentRect.right;
-
-				if (beamRect.right >= rightEdge - 20) {
-					const relativeX = parentRect.width - 20;
-					const relativeY = beamRect.top - parentRect.top + beamRect.height / 2;
-
-					setCollision({
-						detected: true,
-						coordinates: { x: relativeX, y: relativeY },
-					});
-					setCycleCollisionDetected(true);
-					if (beamRef.current) {
-						beamRef.current.style.opacity = "0";
-					}
-				}
-			}
-		};
-
-		const animationInterval = setInterval(checkCollision, 100);
-
-		return () => clearInterval(animationInterval);
-	}, [cycleCollisionDetected, parentRef]);
-
-	useEffect(() => {
-		if (!collision.detected || !collision.coordinates) return;
-
-		const timer1 = setTimeout(() => {
-			setCollision({ detected: false, coordinates: null });
-			setCycleCollisionDetected(false);
-			if (beamRef.current) {
-				beamRef.current.style.opacity = "1";
-			}
-		}, 2000);
-
-		const timer2 = setTimeout(() => {
-			setBeamKey((prevKey) => prevKey + 1);
-		}, 2000);
-
-		return () => {
-			clearTimeout(timer1);
-			clearTimeout(timer2);
-		};
-	}, [collision]);
+const BrowserWindow = () => {
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const selectedItem = TAB_ITEMS[selectedIndex];
+	const { expanded, open, close } = useExpandedMedia();

 	return (
 		<>
-			<motion.div
-				key={beamKey}
-				ref={beamRef}
-				animate="animate"
-				initial={{
-					translateY: beamOptions.initialY || "-200px",
-					translateX: beamOptions.initialX || "0px",
-					rotate: beamOptions.rotate || -45,
-				}}
-				variants={{
-					animate: {
-						translateY: beamOptions.translateY || "800px",
-						translateX: beamOptions.translateX || "700px",
-						rotate: beamOptions.rotate || -45,
-					},
-				}}
-				transition={{
-					duration: beamOptions.duration || 8,
-					repeat: Infinity,
-					repeatType: "loop",
-					ease: "linear",
-					delay: beamOptions.delay || 0,
-					repeatDelay: beamOptions.repeatDelay || 0,
-				}}
-				className={cn(
-					"absolute left-96 top-20 m-auto h-14 w-px rounded-full bg-linear-to-t from-orange-500 via-yellow-500 to-transparent will-change-transform",
-					beamOptions.className
-				)}
-			/>
+			<motion.div className="relative my-4 flex w-full flex-col items-start justify-start overflow-hidden rounded-2xl shadow-2xl md:my-12">
+				<div className="flex w-full items-center justify-start overflow-hidden bg-gray-200 py-4 pl-4 dark:bg-neutral-800">
+					<div className="mr-6 flex items-center gap-2">
+						<div className="size-3 rounded-full bg-red-500" />
+						<div className="size-3 rounded-full bg-yellow-500" />
+						<div className="size-3 rounded-full bg-green-500" />
+					</div>
+					<div className="no-visible-scrollbar flex min-w-0 shrink flex-row items-center justify-start gap-2 overflow-x-auto mask-l-from-98% py-0.5 pr-2 pl-2 md:pl-4">
+						{TAB_ITEMS.map((item, index) => (
+							<React.Fragment key={item.title}>
+								<button
+									type="button"
+									onClick={() => setSelectedIndex(index)}
+									className={cn(
+										"flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-xs transition duration-150 hover:bg-white sm:text-sm dark:hover:bg-neutral-950",
+										selectedIndex === index &&
+											!item.featured &&
+											"bg-white shadow ring-1 shadow-black/10 ring-black/10 dark:bg-neutral-900",
+										selectedIndex === index &&
+											item.featured &&
+											"bg-amber-50 shadow ring-1 shadow-amber-200/50 ring-amber-400/60 dark:bg-amber-950/40 dark:shadow-amber-900/30 dark:ring-amber-500/50",
+										item.featured &&
+											selectedIndex !== index &&
+											"hover:bg-amber-50 dark:hover:bg-amber-950/30"
+									)}
+								>
+									{item.title}
+									{item.featured && (
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<span className="inline-flex shrink-0 items-center justify-center rounded border border-amber-300 bg-amber-100 p-0.5 text-amber-700 dark:border-amber-700 dark:bg-amber-900/50 dark:text-amber-400">
+													<Monitor className="size-3" />
+												</span>
+											</TooltipTrigger>
+											<TooltipContent side="bottom">Desktop app only</TooltipContent>
+										</Tooltip>
+									)}
+								</button>
+								{index !== TAB_ITEMS.length - 1 && (
+									<div className="h-4 w-px shrink-0 rounded-full bg-neutral-300 dark:bg-neutral-700" />
+								)}
+							</React.Fragment>
+						))}
+					</div>
+				</div>
+				<div className="w-full overflow-hidden bg-gray-100/50 px-4 pt-4 perspective-distant dark:bg-neutral-950">
+					<AnimatePresence mode="wait">
+						<motion.div
+							initial={{
+								opacity: 0,
+								scale: 0.99,
+								filter: "blur(10px)",
+							}}
+							animate={{
+								opacity: 1,
+								scale: 1,
+								filter: "blur(0px)",
+							}}
+							exit={{
+								opacity: 0,
+								scale: 0.98,
+								filter: "blur(10px)",
+							}}
+							transition={{
+								duration: 0.3,
+								ease: "easeOut",
+							}}
+							key={selectedItem.title}
+							className="relative overflow-hidden rounded-tl-xl rounded-tr-xl bg-white shadow-sm ring-1 shadow-black/10 ring-black/10 will-change-transform dark:bg-neutral-950"
+						>
+							<div className="flex items-center gap-3 border-b border-neutral-200/60 px-4 py-3 sm:px-6 sm:py-4 dark:border-neutral-700/60">
+								<div className="min-w-0">
+									<h3 className="truncate text-base font-semibold text-neutral-900 sm:text-lg dark:text-white">
+										{selectedItem.title}
+									</h3>
+									<p className="text-sm text-neutral-500 dark:text-neutral-400">
+										{selectedItem.description}
+									</p>
+								</div>
+							</div>
+							<button
+								type="button"
+								className="cursor-pointer bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950 w-full"
+								onClick={open}
+							>
+								<TabVideo src={selectedItem.src} />
+							</button>
+						</motion.div>
+					</AnimatePresence>
+				</div>
+			</motion.div>
+
 			<AnimatePresence>
-				{collision.detected && collision.coordinates && (
-					<Explosion
-						key={`${collision.coordinates.x}-${collision.coordinates.y}`}
-						className=""
-						style={{
-							left: `${collision.coordinates.x + 20}px`,
-							top: `${collision.coordinates.y}px`,
-							transform: "translate(-50%, -50%)",
-						}}
-					/>
+				{expanded && (
+					<ExpandedMediaOverlay src={selectedItem.src} alt={selectedItem.title} onClose={close} />
 				)}
 			</AnimatePresence>
 		</>
 	);
 };

-const Explosion = ({ ...props }: React.HTMLProps<HTMLDivElement>) => {
-	const spans = Array.from({ length: 20 }, (_, index) => ({
-		id: index,
-		initialX: 0,
-		initialY: 0,
-		directionX: Math.floor(Math.random() * 80 - 40),
-		directionY: Math.floor(Math.random() * -50 - 10),
-	}));
+const TabVideo = memo(function TabVideo({ src }: { src: string }) {
+	const videoRef = useRef<HTMLVideoElement>(null);
+	const [hasLoaded, setHasLoaded] = useState(false);
+
+	useEffect(() => {
+		setHasLoaded(false);
+		const video = videoRef.current;
+		if (!video) return;
+		video.currentTime = 0;
+		video.play().catch(() => {});
+	}, [src]);
+
+	const handleCanPlay = useCallback(() => {
+		setHasLoaded(true);
+	}, []);

 	return (
-		<div {...props} className={cn("absolute z-50 h-2 w-2", props.className)}>
-			<motion.div
-				initial={{ opacity: 0 }}
-				animate={{ opacity: [0, 1, 0] }}
-				exit={{ opacity: 0 }}
-				transition={{ duration: 1, ease: "easeOut" }}
-				className="absolute -inset-x-10 top-0 m-auto h-[4px] w-10 rounded-full bg-linear-to-r from-transparent via-orange-500 to-transparent blur-sm"
-			></motion.div>
-			{spans.map((span) => (
-				<motion.span
-					key={span.id}
-					initial={{ x: span.initialX, y: span.initialY, opacity: 1 }}
-					animate={{ x: span.directionX, y: span.directionY, opacity: 0 }}
-					transition={{ duration: Math.random() * 1.5 + 0.5, ease: "easeOut" }}
-					className="absolute h-1 w-1 rounded-full bg-linear-to-b from-orange-500 to-yellow-500"
-				/>
-			))}
+		<div className="relative">
+			<video
+				ref={videoRef}
+				key={src}
+				src={src}
+				preload="auto"
+				loop
+				muted
+				playsInline
+				onCanPlay={handleCanPlay}
+				className="aspect-video w-full rounded-lg sm:rounded-xl"
+			/>
+			{!hasLoaded && (
+				<div className="absolute inset-0 aspect-video w-full animate-pulse rounded-lg bg-neutral-100 sm:rounded-xl dark:bg-neutral-800" />
+			)}
 		</div>
 	);
-};
+});

-const GridLineVertical = ({ className, offset }: { className?: string; offset?: string }) => {
+const GITHUB_RELEASES_URL = "https://github.com/MODSetter/SurfSense/releases/latest";
+
+const DownloadApp = memo(function DownloadApp() {
 	return (
-		<div
-			style={
-				{
-					"--background": "#ffffff",
-					"--color": "rgba(0, 0, 0, 0.2)",
-					"--height": "5px",
-					"--width": "1px",
-					"--fade-stop": "90%",
-					"--offset": offset || "150px", //-100px if you want to keep the line inside
-					"--color-dark": "rgba(255, 255, 255, 0.3)",
-					maskComposite: "exclude",
-				} as React.CSSProperties
-			}
-			className={cn(
-				"absolute top-[calc(var(--offset)/2*-1)] h-[calc(100%+var(--offset))] w-(--width)",
-				"bg-[linear-gradient(to_bottom,var(--color),var(--color)_50%,transparent_0,transparent)]",
-				"bg-size-[var(--width)_var(--height)]",
-				"[mask:linear-gradient(to_top,var(--background)_var(--fade-stop),transparent),linear-gradient(to_bottom,var(--background)_var(--fade-stop),transparent),linear-gradient(black,black)]",
-				"mask-exclude",
-				"z-30",
-				"dark:bg-[linear-gradient(to_bottom,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]",
-				className
-			)}
-		></div>
+		<div className="flex flex-col items-start justify-start">
+			<p className="mb-4 text-left text-sm text-neutral-500 lg:text-lg dark:text-neutral-400">
+				Download the desktop app
+			</p>
+			<div className="mb-2 flex flex-row flex-wrap items-center gap-3">
+				<a
+					href={GITHUB_RELEASES_URL}
+					target="_blank"
+					rel="noopener noreferrer"
+					className="flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800"
+				>
+					<svg
+						className="size-4"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						aria-label="Download for macOS"
+					>
+						<path d="M12 17V3" />
+						<path d="m6 11 6 6 6-6" />
+						<path d="M19 21H5" />
+					</svg>
+					macOS
+				</a>
+				<a
+					href={GITHUB_RELEASES_URL}
+					target="_blank"
+					rel="noopener noreferrer"
+					className="flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800"
+				>
+					<svg
+						className="size-4"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						aria-label="Download for Windows"
+					>
+						<path d="M12 17V3" />
+						<path d="m6 11 6 6 6-6" />
+						<path d="M19 21H5" />
+					</svg>
+					Windows
+				</a>
+				<a
+					href={GITHUB_RELEASES_URL}
+					target="_blank"
+					rel="noopener noreferrer"
+					className="flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800"
+				>
+					<svg
+						className="size-4"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						aria-label="Download for Linux"
+					>
+						<path d="M12 17V3" />
+						<path d="m6 11 6 6 6-6" />
+						<path d="M19 21H5" />
+					</svg>
+					Linux
+				</a>
+			</div>
+		</div>
 	);
-};
+});
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@ -55,7 +55,7 @@ import { useInbox } from "@/hooks/use-inbox";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { notificationsApiService } from "@/lib/apis/notifications-api.service";
 import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
-import { logout } from "@/lib/auth-utils";
+import { getLoginPath, logout } from "@/lib/auth-utils";
 import { deleteThread, fetchThreads, updateThread } from "@/lib/chat/thread-persistence";
 import { resetUser, trackLogout } from "@/lib/posthog/events";
 import { cacheKeys } from "@/lib/query-client/cache-keys";
@ -603,12 +603,12 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 			await logout();

 			if (typeof window !== "undefined") {
-				router.push("/");
+				router.push(getLoginPath());
 			}
 		} catch (error) {
 			console.error("Error during logout:", error);
 			await logout();
-			router.push("/");
+			router.push(getLoginPath());
 		}
 	}, [router]);

--- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
@ -42,6 +42,7 @@ import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { DocumentTypeEnum } from "@/contracts/types/document.types";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useMediaQuery } from "@/hooks/use-media-query";
+import { useElectronAPI } from "@/hooks/use-platform";
 import { documentsApiService } from "@/lib/apis/documents-api.service";
 import { foldersApiService } from "@/lib/apis/folders-api.service";
 import { authenticatedFetch } from "@/lib/auth-utils";
@ -85,6 +86,7 @@ export function DocumentsSidebar({
 	const tSidebar = useTranslations("sidebar");
 	const params = useParams();
 	const isMobile = !useMediaQuery("(min-width: 640px)");
+	const electronAPI = useElectronAPI();
 	const searchSpaceId = Number(params.search_space_id);
 	const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom);
 	const setRightPanelCollapsed = useSetAtom(rightPanelCollapsedAtom);
@ -114,11 +116,11 @@ export function DocumentsSidebar({
 	}, []);

 	useEffect(() => {
-		const api = typeof window !== "undefined" ? window.electronAPI : null;
-		if (!api?.getWatchedFolders) return;
+		if (!electronAPI?.getWatchedFolders) return;
+		const api = electronAPI;

 		async function loadWatchedIds() {
-			const folders = await api!.getWatchedFolders();
+			const folders = await api.getWatchedFolders();

 			if (folders.length === 0) {
 				try {
@ -126,7 +128,7 @@ export function DocumentsSidebar({
 					for (const bf of backendFolders) {
 						const meta = bf.metadata as Record<string, unknown> | null;
 						if (!meta?.watched || !meta.folder_path) continue;
-						await api!.addWatchedFolder({
+						await api.addWatchedFolder({
 							path: meta.folder_path as string,
 							name: bf.name,
 							rootFolderId: bf.id,
@ -136,7 +138,7 @@ export function DocumentsSidebar({
 							active: true,
 						});
 					}
-					const recovered = await api!.getWatchedFolders();
+					const recovered = await api.getWatchedFolders();
 					const ids = new Set(
 						recovered.filter((f) => f.rootFolderId != null).map((f) => f.rootFolderId as number)
 					);
@ -154,7 +156,7 @@ export function DocumentsSidebar({
 		}

 		loadWatchedIds();
-	}, [searchSpaceId]);
+	}, [searchSpaceId, electronAPI]);
 	const { mutateAsync: deleteDocumentMutation } = useAtomValue(deleteDocumentMutationAtom);

 	const [sidebarDocs, setSidebarDocs] = useAtom(sidebarSelectedDocumentsAtom);
@ -293,10 +295,9 @@ export function DocumentsSidebar({

 	const handleRescanFolder = useCallback(
 		async (folder: FolderDisplay) => {
-			const api = window.electronAPI;
-			if (!api) return;
+			if (!electronAPI) return;

-			const watchedFolders = await api.getWatchedFolders();
+			const watchedFolders = await electronAPI.getWatchedFolders();
 			const matched = watchedFolders.find((wf) => wf.rootFolderId === folder.id);
 			if (!matched) {
 				toast.error("This folder is not being watched");
@ -316,28 +317,30 @@ export function DocumentsSidebar({
 				toast.error((err as Error)?.message || "Failed to re-scan folder");
 			}
 		},
-		[searchSpaceId]
+		[searchSpaceId, electronAPI]
 	);

-	const handleStopWatching = useCallback(async (folder: FolderDisplay) => {
-		const api = window.electronAPI;
-		if (!api) return;
+	const handleStopWatching = useCallback(
+		async (folder: FolderDisplay) => {
+			if (!electronAPI) return;

-		const watchedFolders = await api.getWatchedFolders();
-		const matched = watchedFolders.find((wf) => wf.rootFolderId === folder.id);
-		if (!matched) {
-			toast.error("This folder is not being watched");
-			return;
-		}
+			const watchedFolders = await electronAPI.getWatchedFolders();
+			const matched = watchedFolders.find((wf) => wf.rootFolderId === folder.id);
+			if (!matched) {
+				toast.error("This folder is not being watched");
+				return;
+			}

-		await api.removeWatchedFolder(matched.path);
-		try {
-			await foldersApiService.stopWatching(folder.id);
-		} catch (err) {
-			console.error("[DocumentsSidebar] Failed to clear watched metadata:", err);
-		}
-		toast.success(`Stopped watching: ${matched.name}`);
-	}, []);
+			await electronAPI.removeWatchedFolder(matched.path);
+			try {
+				await foldersApiService.stopWatching(folder.id);
+			} catch (err) {
+				console.error("[DocumentsSidebar] Failed to clear watched metadata:", err);
+			}
+			toast.success(`Stopped watching: ${matched.name}`);
+		},
+		[electronAPI]
+	);

 	const handleRenameFolder = useCallback(async (folder: FolderDisplay, newName: string) => {
 		try {
@ -348,23 +351,25 @@ export function DocumentsSidebar({
 		}
 	}, []);

-	const handleDeleteFolder = useCallback(async (folder: FolderDisplay) => {
-		if (!confirm(`Delete folder "${folder.name}" and all its contents?`)) return;
-		try {
-			const api = window.electronAPI;
-			if (api) {
-				const watchedFolders = await api.getWatchedFolders();
-				const matched = watchedFolders.find((wf) => wf.rootFolderId === folder.id);
-				if (matched) {
-					await api.removeWatchedFolder(matched.path);
+	const handleDeleteFolder = useCallback(
+		async (folder: FolderDisplay) => {
+			if (!confirm(`Delete folder "${folder.name}" and all its contents?`)) return;
+			try {
+				if (electronAPI) {
+					const watchedFolders = await electronAPI.getWatchedFolders();
+					const matched = watchedFolders.find((wf) => wf.rootFolderId === folder.id);
+					if (matched) {
+						await electronAPI.removeWatchedFolder(matched.path);
+					}
 				}
+				await foldersApiService.deleteFolder(folder.id);
+				toast.success("Folder deleted");
+			} catch (e: unknown) {
+				toast.error((e as Error)?.message || "Failed to delete folder");
 			}
-			await foldersApiService.deleteFolder(folder.id);
-			toast.success("Folder deleted");
-		} catch (e: unknown) {
-			toast.error((e as Error)?.message || "Failed to delete folder");
-		}
-	}, []);
+		},
+		[electronAPI]
+	);

 	const handleMoveFolder = useCallback(
 		(folder: FolderDisplay) => {
--- a/surfsense_web/components/new-chat/chat-header.tsx
+++ b/surfsense_web/components/new-chat/chat-header.tsx
@ -3,11 +3,14 @@
 import { useCallback, useState } from "react";
 import { ImageConfigDialog } from "@/components/shared/image-config-dialog";
 import { ModelConfigDialog } from "@/components/shared/model-config-dialog";
+import { VisionConfigDialog } from "@/components/shared/vision-config-dialog";
 import type {
 	GlobalImageGenConfig,
 	GlobalNewLLMConfig,
+	GlobalVisionLLMConfig,
 	ImageGenerationConfig,
 	NewLLMConfigPublic,
+	VisionLLMConfig,
 } from "@/contracts/types/new-llm-config.types";
 import { ModelSelector } from "./model-selector";

@ -33,6 +36,14 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
 	const [isImageGlobal, setIsImageGlobal] = useState(false);
 	const [imageDialogMode, setImageDialogMode] = useState<"create" | "edit" | "view">("view");

+	// Vision config dialog state
+	const [visionDialogOpen, setVisionDialogOpen] = useState(false);
+	const [selectedVisionConfig, setSelectedVisionConfig] = useState<
+		VisionLLMConfig | GlobalVisionLLMConfig | null
+	>(null);
+	const [isVisionGlobal, setIsVisionGlobal] = useState(false);
+	const [visionDialogMode, setVisionDialogMode] = useState<"create" | "edit" | "view">("view");
+
 	// LLM handlers
 	const handleEditLLMConfig = useCallback(
 		(config: NewLLMConfigPublic | GlobalNewLLMConfig, global: boolean) => {
@ -79,6 +90,29 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
 		if (!open) setSelectedImageConfig(null);
 	}, []);

+	// Vision model handlers
+	const handleAddVisionModel = useCallback(() => {
+		setSelectedVisionConfig(null);
+		setIsVisionGlobal(false);
+		setVisionDialogMode("create");
+		setVisionDialogOpen(true);
+	}, []);
+
+	const handleEditVisionConfig = useCallback(
+		(config: VisionLLMConfig | GlobalVisionLLMConfig, global: boolean) => {
+			setSelectedVisionConfig(config);
+			setIsVisionGlobal(global);
+			setVisionDialogMode(global ? "view" : "edit");
+			setVisionDialogOpen(true);
+		},
+		[]
+	);
+
+	const handleVisionDialogClose = useCallback((open: boolean) => {
+		setVisionDialogOpen(open);
+		if (!open) setSelectedVisionConfig(null);
+	}, []);
+
 	return (
 		<div className="flex items-center gap-2">
 			<ModelSelector
@ -86,6 +120,8 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
 				onAddNewLLM={handleAddNewLLM}
 				onEditImage={handleEditImageConfig}
 				onAddNewImage={handleAddImageModel}
+				onEditVision={handleEditVisionConfig}
+				onAddNewVision={handleAddVisionModel}
 				className={className}
 			/>
 			<ModelConfigDialog
@ -104,6 +140,14 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
 				searchSpaceId={searchSpaceId}
 				mode={imageDialogMode}
 			/>
+			<VisionConfigDialog
+				open={visionDialogOpen}
+				onOpenChange={handleVisionDialogClose}
+				config={selectedVisionConfig}
+				isGlobal={isVisionGlobal}
+				searchSpaceId={searchSpaceId}
+				mode={visionDialogMode}
+			/>
 		</div>
 	);
 }
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@ -1,7 +1,7 @@
 "use client";

 import { useAtomValue } from "jotai";
-import { Bot, Check, ChevronDown, Edit3, ImageIcon, Plus, Search, Zap } from "lucide-react";
+import { Bot, Check, ChevronDown, Edit3, Eye, ImageIcon, Plus, Search, Zap } from "lucide-react";
 import { type UIEvent, useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
@ -15,6 +15,10 @@ import {
 	newLLMConfigsAtom,
 } from "@/atoms/new-llm-config/new-llm-config-query.atoms";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import {
+	globalVisionLLMConfigsAtom,
+	visionLLMConfigsAtom,
+} from "@/atoms/vision-llm-config/vision-llm-config-query.atoms";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@ -32,8 +36,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type {
 	GlobalImageGenConfig,
 	GlobalNewLLMConfig,
+	GlobalVisionLLMConfig,
 	ImageGenerationConfig,
 	NewLLMConfigPublic,
+	VisionLLMConfig,
 } from "@/contracts/types/new-llm-config.types";
 import { getProviderIcon } from "@/lib/provider-icons";
 import { cn } from "@/lib/utils";
@ -43,6 +49,8 @@ interface ModelSelectorProps {
 	onAddNewLLM: () => void;
 	onEditImage?: (config: ImageGenerationConfig | GlobalImageGenConfig, isGlobal: boolean) => void;
 	onAddNewImage?: () => void;
+	onEditVision?: (config: VisionLLMConfig | GlobalVisionLLMConfig, isGlobal: boolean) => void;
+	onAddNewVision?: () => void;
 	className?: string;
 }

@ -51,14 +59,18 @@ export function ModelSelector({
 	onAddNewLLM,
 	onEditImage,
 	onAddNewImage,
+	onEditVision,
+	onAddNewVision,
 	className,
 }: ModelSelectorProps) {
 	const [open, setOpen] = useState(false);
-	const [activeTab, setActiveTab] = useState<"llm" | "image">("llm");
+	const [activeTab, setActiveTab] = useState<"llm" | "image" | "vision">("llm");
 	const [llmSearchQuery, setLlmSearchQuery] = useState("");
 	const [imageSearchQuery, setImageSearchQuery] = useState("");
+	const [visionSearchQuery, setVisionSearchQuery] = useState("");
 	const [llmScrollPos, setLlmScrollPos] = useState<"top" | "middle" | "bottom">("top");
 	const [imageScrollPos, setImageScrollPos] = useState<"top" | "middle" | "bottom">("top");
+	const [visionScrollPos, setVisionScrollPos] = useState<"top" | "middle" | "bottom">("top");
 	const handleListScroll = useCallback(
 		(setter: typeof setLlmScrollPos) => (e: UIEvent<HTMLDivElement>) => {
 			const el = e.currentTarget;
@ -82,8 +94,21 @@ export function ModelSelector({
 		useAtomValue(globalImageGenConfigsAtom);
 	const { data: imageUserConfigs, isLoading: imageUserLoading } = useAtomValue(imageGenConfigsAtom);

+	// Vision data
+	const { data: visionGlobalConfigs, isLoading: visionGlobalLoading } = useAtomValue(
+		globalVisionLLMConfigsAtom
+	);
+	const { data: visionUserConfigs, isLoading: visionUserLoading } =
+		useAtomValue(visionLLMConfigsAtom);
+
 	const isLoading =
-		llmUserLoading || llmGlobalLoading || prefsLoading || imageGlobalLoading || imageUserLoading;
+		llmUserLoading ||
+		llmGlobalLoading ||
+		prefsLoading ||
+		imageGlobalLoading ||
+		imageUserLoading ||
+		visionGlobalLoading ||
+		visionUserLoading;

 	// ─── LLM current config ───
 	const currentLLMConfig = useMemo(() => {
@ -116,6 +141,24 @@ export function ModelSelector({
 		);
 	}, [currentImageConfig]);

+	// ─── Vision current config ───
+	const currentVisionConfig = useMemo(() => {
+		if (!preferences) return null;
+		const id = preferences.vision_llm_config_id;
+		if (id === null || id === undefined) return null;
+		const globalMatch = visionGlobalConfigs?.find((c) => c.id === id);
+		if (globalMatch) return globalMatch;
+		return visionUserConfigs?.find((c) => c.id === id) ?? null;
+	}, [preferences, visionGlobalConfigs, visionUserConfigs]);
+
+	const isVisionAutoMode = useMemo(() => {
+		return (
+			currentVisionConfig &&
+			"is_auto_mode" in currentVisionConfig &&
+			currentVisionConfig.is_auto_mode
+		);
+	}, [currentVisionConfig]);
+
 	// ─── LLM filtering ───
 	const filteredLLMGlobal = useMemo(() => {
 		if (!llmGlobalConfigs) return [];
@ -170,6 +213,33 @@ export function ModelSelector({

 	const totalImageModels = (imageGlobalConfigs?.length ?? 0) + (imageUserConfigs?.length ?? 0);

+	// ─── Vision filtering ───
+	const filteredVisionGlobal = useMemo(() => {
+		if (!visionGlobalConfigs) return [];
+		if (!visionSearchQuery) return visionGlobalConfigs;
+		const q = visionSearchQuery.toLowerCase();
+		return visionGlobalConfigs.filter(
+			(c) =>
+				c.name.toLowerCase().includes(q) ||
+				c.model_name.toLowerCase().includes(q) ||
+				c.provider.toLowerCase().includes(q)
+		);
+	}, [visionGlobalConfigs, visionSearchQuery]);
+
+	const filteredVisionUser = useMemo(() => {
+		if (!visionUserConfigs) return [];
+		if (!visionSearchQuery) return visionUserConfigs;
+		const q = visionSearchQuery.toLowerCase();
+		return visionUserConfigs.filter(
+			(c) =>
+				c.name.toLowerCase().includes(q) ||
+				c.model_name.toLowerCase().includes(q) ||
+				c.provider.toLowerCase().includes(q)
+		);
+	}, [visionUserConfigs, visionSearchQuery]);
+
+	const totalVisionModels = (visionGlobalConfigs?.length ?? 0) + (visionUserConfigs?.length ?? 0);
+
 	// ─── Handlers ───
 	const handleSelectLLM = useCallback(
 		async (config: NewLLMConfigPublic | GlobalNewLLMConfig) => {
@ -229,6 +299,30 @@ export function ModelSelector({
 		[currentImageConfig, searchSpaceId, updatePreferences]
 	);

+	const handleSelectVision = useCallback(
+		async (configId: number) => {
+			if (currentVisionConfig?.id === configId) {
+				setOpen(false);
+				return;
+			}
+			if (!searchSpaceId) {
+				toast.error("No search space selected");
+				return;
+			}
+			try {
+				await updatePreferences({
+					search_space_id: Number(searchSpaceId),
+					data: { vision_llm_config_id: configId },
+				});
+				toast.success("Vision model updated");
+				setOpen(false);
+			} catch {
+				toast.error("Failed to switch vision model");
+			}
+		},
+		[currentVisionConfig, searchSpaceId, updatePreferences]
+	);
+
 	return (
 		<Popover open={open} onOpenChange={setOpen}>
 			<PopoverTrigger asChild>
@ -282,6 +376,23 @@ export function ModelSelector({
 							) : (
 								<ImageIcon className="size-4 text-muted-foreground" />
 							)}
+
+							{/* Divider */}
+							<div className="h-4 w-px bg-border/60 dark:bg-white/10 mx-0.5" />
+
+							{/* Vision section */}
+							{currentVisionConfig ? (
+								<>
+									{getProviderIcon(currentVisionConfig.provider, {
+										isAutoMode: isVisionAutoMode ?? false,
+									})}
+									<span className="max-w-[80px] md:max-w-[100px] truncate hidden md:inline">
+										{currentVisionConfig.name}
+									</span>
+								</>
+							) : (
+								<Eye className="size-4 text-muted-foreground" />
+							)}
 						</>
 					)}
 					<ChevronDown className="h-3.5 w-3.5 text-muted-foreground ml-1 shrink-0" />
@ -295,25 +406,32 @@ export function ModelSelector({
 			>
 				<Tabs
 					value={activeTab}
-					onValueChange={(v) => setActiveTab(v as "llm" | "image")}
+					onValueChange={(v) => setActiveTab(v as "llm" | "image" | "vision")}
 					className="w-full"
 				>
 					<div className="border-b border-border/80 dark:border-neutral-800">
-						<TabsList className="w-full grid grid-cols-2 rounded-none rounded-t-lg bg-transparent h-11 p-0 gap-0">
+						<TabsList className="w-full grid grid-cols-3 rounded-none rounded-t-lg bg-transparent h-11 p-0 gap-0">
 							<TabsTrigger
 								value="llm"
-								className="gap-2 text-sm font-medium rounded-none text-muted-foreground transition-all duration-200 h-full bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white data-[state=active]:text-foreground"
+								className="gap-1.5 text-sm font-medium rounded-none text-muted-foreground transition-all duration-200 h-full bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white data-[state=active]:text-foreground"
 							>
-								<Zap className="size-4" />
+								<Zap className="size-3.5" />
 								LLM
 							</TabsTrigger>
 							<TabsTrigger
 								value="image"
-								className="gap-2 text-sm font-medium rounded-none text-muted-foreground transition-all duration-200 h-full bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white data-[state=active]:text-foreground"
+								className="gap-1.5 text-sm font-medium rounded-none text-muted-foreground transition-all duration-200 h-full bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white data-[state=active]:text-foreground"
 							>
-								<ImageIcon className="size-4" />
+								<ImageIcon className="size-3.5" />
 								Image
 							</TabsTrigger>
+							<TabsTrigger
+								value="vision"
+								className="gap-1.5 text-sm font-medium rounded-none text-muted-foreground transition-all duration-200 h-full bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white data-[state=active]:text-foreground"
+							>
+								<Eye className="size-3.5" />
+								Vision
+							</TabsTrigger>
 						</TabsList>
 					</div>

@ -676,6 +794,174 @@ export function ModelSelector({
 							</CommandList>
 						</Command>
 					</TabsContent>
+
+					{/* ─── Vision Tab ─── */}
+					<TabsContent value="vision" className="mt-0">
+						<Command
+							shouldFilter={false}
+							className="rounded-none rounded-b-lg dark:bg-neutral-900 [&_[data-slot=command-input-wrapper]]:border-0 [&_[data-slot=command-input-wrapper]]:px-0 [&_[data-slot=command-input-wrapper]]:gap-2"
+						>
+							{totalVisionModels > 3 && (
+								<div className="px-2 md:px-3 py-1.5 md:py-2">
+									<CommandInput
+										placeholder="Search vision models"
+										value={visionSearchQuery}
+										onValueChange={setVisionSearchQuery}
+										className="h-7 md:h-8 w-full text-xs md:text-sm border-0 bg-transparent focus:ring-0 placeholder:text-muted-foreground/60"
+									/>
+								</div>
+							)}
+							<CommandList
+								className="max-h-[300px] md:max-h-[400px] overflow-y-auto"
+								onScroll={handleListScroll(setVisionScrollPos)}
+								style={{
+									maskImage: `linear-gradient(to bottom, ${visionScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${visionScrollPos === "bottom" ? "black" : "transparent"})`,
+									WebkitMaskImage: `linear-gradient(to bottom, ${visionScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${visionScrollPos === "bottom" ? "black" : "transparent"})`,
+								}}
+							>
+								<CommandEmpty className="py-8 text-center">
+									<div className="flex flex-col items-center gap-2">
+										<Search className="size-8 text-muted-foreground" />
+										<p className="text-sm text-muted-foreground">No vision models found</p>
+										<p className="text-xs text-muted-foreground/60">Try a different search term</p>
+									</div>
+								</CommandEmpty>
+
+								{filteredVisionGlobal.length > 0 && (
+									<CommandGroup>
+										<div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground tracking-wider">
+											Global Vision Models
+										</div>
+										{filteredVisionGlobal.map((config) => {
+											const isSelected = currentVisionConfig?.id === config.id;
+											const isAuto = "is_auto_mode" in config && config.is_auto_mode;
+											return (
+												<CommandItem
+													key={`vis-g-${config.id}`}
+													value={`vis-g-${config.id}`}
+													onSelect={() => handleSelectVision(config.id)}
+													className={cn(
+														"mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50 dark:hover:bg-white/[0.06]",
+														isSelected && "bg-accent/80 dark:bg-white/[0.06]"
+													)}
+												>
+													<div className="flex items-center gap-3 min-w-0 flex-1">
+														<div className="shrink-0">
+															{getProviderIcon(config.provider, { isAutoMode: isAuto })}
+														</div>
+														<div className="min-w-0 flex-1">
+															<div className="flex items-center gap-2">
+																<span className="font-medium truncate">{config.name}</span>
+																{isAuto && (
+																	<Badge
+																		variant="secondary"
+																		className="text-[9px] px-1 py-0 h-3.5 bg-violet-800 text-white dark:bg-violet-800 dark:text-white border-0"
+																	>
+																		Recommended
+																	</Badge>
+																)}
+																{isSelected && <Check className="size-3.5 text-primary shrink-0" />}
+															</div>
+															<span className="text-xs text-muted-foreground truncate block">
+																{isAuto ? "Auto Mode" : config.model_name}
+															</span>
+														</div>
+														{onEditVision && !isAuto && (
+															<Button
+																variant="ghost"
+																size="icon"
+																className="size-7 shrink-0 rounded-md hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity"
+																onClick={(e) => {
+																	e.stopPropagation();
+																	setOpen(false);
+																	onEditVision(config as VisionLLMConfig, true);
+																}}
+															>
+																<Edit3 className="size-3.5 text-muted-foreground" />
+															</Button>
+														)}
+													</div>
+												</CommandItem>
+											);
+										})}
+									</CommandGroup>
+								)}
+
+								{filteredVisionUser.length > 0 && (
+									<>
+										{filteredVisionGlobal.length > 0 && (
+											<CommandSeparator className="my-1 mx-4 bg-border/60" />
+										)}
+										<CommandGroup>
+											<div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground tracking-wider">
+												Your Vision Models
+											</div>
+											{filteredVisionUser.map((config) => {
+												const isSelected = currentVisionConfig?.id === config.id;
+												return (
+													<CommandItem
+														key={`vis-u-${config.id}`}
+														value={`vis-u-${config.id}`}
+														onSelect={() => handleSelectVision(config.id)}
+														className={cn(
+															"mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50 dark:hover:bg-white/[0.06]",
+															isSelected && "bg-accent/80 dark:bg-white/[0.06]"
+														)}
+													>
+														<div className="flex items-center gap-3 min-w-0 flex-1">
+															<div className="shrink-0">{getProviderIcon(config.provider)}</div>
+															<div className="min-w-0 flex-1">
+																<div className="flex items-center gap-2">
+																	<span className="font-medium truncate">{config.name}</span>
+																	{isSelected && (
+																		<Check className="size-3.5 text-primary shrink-0" />
+																	)}
+																</div>
+																<span className="text-xs text-muted-foreground truncate block">
+																	{config.model_name}
+																</span>
+															</div>
+															{onEditVision && (
+																<Button
+																	variant="ghost"
+																	size="icon"
+																	className="h-7 w-7 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+																	onClick={(e) => {
+																		e.stopPropagation();
+																		setOpen(false);
+																		onEditVision(config, false);
+																	}}
+																>
+																	<Edit3 className="size-3.5 text-muted-foreground" />
+																</Button>
+															)}
+														</div>
+													</CommandItem>
+												);
+											})}
+										</CommandGroup>
+									</>
+								)}
+
+								{onAddNewVision && (
+									<div className="p-2 bg-muted/20 dark:bg-neutral-900">
+										<Button
+											variant="ghost"
+											size="sm"
+											className="w-full justify-start gap-2 h-9 rounded-lg hover:bg-accent/50 dark:hover:bg-white/[0.06]"
+											onClick={() => {
+												setOpen(false);
+												onAddNewVision();
+											}}
+										>
+											<Plus className="size-4 text-primary" />
+											<span className="text-sm font-medium">Add Vision Model</span>
+										</Button>
+									</div>
+								)}
+							</CommandList>
+						</Command>
+					</TabsContent>
 				</Tabs>
 			</PopoverContent>
 		</Popover>
--- a/surfsense_web/components/platform-gate.tsx
+++ b/surfsense_web/components/platform-gate.tsx
@ -0,0 +1,16 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { usePlatform } from "@/hooks/use-platform";
+
+export function DesktopOnly({ children }: { children: ReactNode }) {
+	const { isDesktop } = usePlatform();
+	if (!isDesktop) return null;
+	return <>{children}</>;
+}
+
+export function WebOnly({ children }: { children: ReactNode }) {
+	const { isWeb } = usePlatform();
+	if (!isWeb) return null;
+	return <>{children}</>;
+}
--- a/surfsense_web/components/settings/llm-role-manager.tsx
+++ b/surfsense_web/components/settings/llm-role-manager.tsx
@ -24,6 +24,10 @@ import {
 	llmPreferencesAtom,
 	newLLMConfigsAtom,
 } from "@/atoms/new-llm-config/new-llm-config-query.atoms";
+import {
+	globalVisionLLMConfigsAtom,
+	visionLLMConfigsAtom,
+} from "@/atoms/vision-llm-config/vision-llm-config-query.atoms";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@ -77,8 +81,8 @@ const ROLE_DESCRIPTIONS = {
 		description: "Vision-capable model for screenshot analysis and context extraction",
 		color: "text-amber-600 dark:text-amber-400",
 		bgColor: "bg-amber-500/10",
-		prefKey: "vision_llm_id" as const,
-		configType: "llm" as const,
+		prefKey: "vision_llm_config_id" as const,
+		configType: "vision" as const,
 	},
 };

@ -112,6 +116,18 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 		error: globalImageConfigsError,
 	} = useAtomValue(globalImageGenConfigsAtom);

+	// Vision LLM configs
+	const {
+		data: userVisionConfigs = [],
+		isFetching: visionConfigsLoading,
+		error: visionConfigsError,
+	} = useAtomValue(visionLLMConfigsAtom);
+	const {
+		data: globalVisionConfigs = [],
+		isFetching: globalVisionConfigsLoading,
+		error: globalVisionConfigsError,
+	} = useAtomValue(globalVisionLLMConfigsAtom);
+
 	// Preferences
 	const {
 		data: preferences = {},
@ -125,7 +141,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 		agent_llm_id: preferences.agent_llm_id ?? "",
 		document_summary_llm_id: preferences.document_summary_llm_id ?? "",
 		image_generation_config_id: preferences.image_generation_config_id ?? "",
-		vision_llm_id: preferences.vision_llm_id ?? "",
+		vision_llm_config_id: preferences.vision_llm_config_id ?? "",
 	}));

 	const [savingRole, setSavingRole] = useState<string | null>(null);
@ -137,14 +153,14 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 				agent_llm_id: preferences.agent_llm_id ?? "",
 				document_summary_llm_id: preferences.document_summary_llm_id ?? "",
 				image_generation_config_id: preferences.image_generation_config_id ?? "",
-				vision_llm_id: preferences.vision_llm_id ?? "",
+				vision_llm_config_id: preferences.vision_llm_config_id ?? "",
 			});
 		}
 	}, [
 		preferences?.agent_llm_id,
 		preferences?.document_summary_llm_id,
 		preferences?.image_generation_config_id,
-		preferences?.vision_llm_id,
+		preferences?.vision_llm_config_id,
 	]);

 	const handleRoleAssignment = useCallback(
@ -181,6 +197,14 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 		...(userImageConfigs ?? []).filter((config) => config.id && config.id.toString().trim() !== ""),
 	];

+	// Combine global and custom vision LLM configs
+	const allVisionConfigs = [
+		...globalVisionConfigs.map((config) => ({ ...config, is_global: true })),
+		...(userVisionConfigs ?? []).filter(
+			(config) => config.id && config.id.toString().trim() !== ""
+		),
+	];
+
 	const isAssignmentComplete =
 		allLLMConfigs.some((c) => c.id === assignments.agent_llm_id) &&
 		allLLMConfigs.some((c) => c.id === assignments.document_summary_llm_id) &&
@ -191,13 +215,17 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 		preferencesLoading ||
 		globalConfigsLoading ||
 		imageConfigsLoading ||
-		globalImageConfigsLoading;
+		globalImageConfigsLoading ||
+		visionConfigsLoading ||
+		globalVisionConfigsLoading;
 	const hasError =
 		configsError ||
 		preferencesError ||
 		globalConfigsError ||
 		imageConfigsError ||
-		globalImageConfigsError;
+		globalImageConfigsError ||
+		visionConfigsError ||
+		globalVisionConfigsError;
 	const hasAnyConfigs = allLLMConfigs.length > 0 || allImageConfigs.length > 0;

 	return (
@ -291,15 +319,27 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 				<div className="grid gap-4 grid-cols-1 lg:grid-cols-2">
 					{Object.entries(ROLE_DESCRIPTIONS).map(([key, role]) => {
 						const IconComponent = role.icon;
-						const isImageRole = role.configType === "image";
 						const currentAssignment = assignments[role.prefKey as keyof typeof assignments];

 						// Pick the right config lists based on role type
-						const roleGlobalConfigs = isImageRole ? globalImageConfigs : globalConfigs;
-						const roleUserConfigs = isImageRole
-							? (userImageConfigs ?? []).filter((c) => c.id && c.id.toString().trim() !== "")
-							: newLLMConfigs.filter((c) => c.id && c.id.toString().trim() !== "");
-						const roleAllConfigs = isImageRole ? allImageConfigs : allLLMConfigs;
+						const roleGlobalConfigs =
+							role.configType === "image"
+								? globalImageConfigs
+								: role.configType === "vision"
+									? globalVisionConfigs
+									: globalConfigs;
+						const roleUserConfigs =
+							role.configType === "image"
+								? (userImageConfigs ?? []).filter((c) => c.id && c.id.toString().trim() !== "")
+								: role.configType === "vision"
+									? (userVisionConfigs ?? []).filter((c) => c.id && c.id.toString().trim() !== "")
+									: newLLMConfigs.filter((c) => c.id && c.id.toString().trim() !== "");
+						const roleAllConfigs =
+							role.configType === "image"
+								? allImageConfigs
+								: role.configType === "vision"
+									? allVisionConfigs
+									: allLLMConfigs;

 						const assignedConfig = roleAllConfigs.find((config) => config.id === currentAssignment);
 						const isAssigned = !!assignedConfig;
--- a/surfsense_web/components/settings/search-space-settings-dialog.tsx
+++ b/surfsense_web/components/settings/search-space-settings-dialog.tsx
@ -1,7 +1,7 @@
 "use client";

 import { useAtom } from "jotai";
-import { Bot, Brain, FileText, Globe, ImageIcon, MessageSquare, Shield } from "lucide-react";
+import { Bot, Brain, Eye, FileText, Globe, ImageIcon, MessageSquare, Shield } from "lucide-react";
 import { useTranslations } from "next-intl";
 import type React from "react";
 import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
@ -13,6 +13,7 @@ import { ModelConfigManager } from "@/components/settings/model-config-manager";
 import { PromptConfigManager } from "@/components/settings/prompt-config-manager";
 import { RolesManager } from "@/components/settings/roles-manager";
 import { SettingsDialog } from "@/components/settings/settings-dialog";
+import { VisionModelManager } from "@/components/settings/vision-model-manager";

 interface SearchSpaceSettingsDialogProps {
 	searchSpaceId: number;
@ -31,6 +32,11 @@ export function SearchSpaceSettingsDialog({ searchSpaceId }: SearchSpaceSettings
 			label: t("nav_image_models"),
 			icon: <ImageIcon className="h-4 w-4" />,
 		},
+		{
+			value: "vision-models",
+			label: t("nav_vision_models"),
+			icon: <Eye className="h-4 w-4" />,
+		},
 		{ value: "team-roles", label: t("nav_team_roles"), icon: <Shield className="h-4 w-4" /> },
 		{
 			value: "prompts",
@ -45,6 +51,7 @@ export function SearchSpaceSettingsDialog({ searchSpaceId }: SearchSpaceSettings
 		models: <ModelConfigManager searchSpaceId={searchSpaceId} />,
 		roles: <LLMRoleManager searchSpaceId={searchSpaceId} />,
 		"image-models": <ImageModelManager searchSpaceId={searchSpaceId} />,
+		"vision-models": <VisionModelManager searchSpaceId={searchSpaceId} />,
 		"team-roles": <RolesManager searchSpaceId={searchSpaceId} />,
 		prompts: <PromptConfigManager searchSpaceId={searchSpaceId} />,
 		"public-links": <PublicChatSnapshotsManager searchSpaceId={searchSpaceId} />,
--- a/surfsense_web/components/settings/user-settings-dialog.tsx
+++ b/surfsense_web/components/settings/user-settings-dialog.tsx
@ -3,6 +3,7 @@
 import { useAtom } from "jotai";
 import { Globe, KeyRound, Monitor, Receipt, Sparkles, User } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useMemo } from "react";
 import { ApiKeyContent } from "@/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent";
 import { CommunityPromptsContent } from "@/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent";
 import { DesktopContent } from "@/app/dashboard/[search_space_id]/user-settings/components/DesktopContent";
@ -11,37 +12,42 @@ import { PromptsContent } from "@/app/dashboard/[search_space_id]/user-settings/
 import { PurchaseHistoryContent } from "@/app/dashboard/[search_space_id]/user-settings/components/PurchaseHistoryContent";
 import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { SettingsDialog } from "@/components/settings/settings-dialog";
+import { usePlatform } from "@/hooks/use-platform";

 export function UserSettingsDialog() {
 	const t = useTranslations("userSettings");
 	const [state, setState] = useAtom(userSettingsDialogAtom);
+	const { isDesktop } = usePlatform();

-	const navItems = [
-		{ value: "profile", label: t("profile_nav_label"), icon: <User className="h-4 w-4" /> },
-		{
-			value: "api-key",
-			label: t("api_key_nav_label"),
-			icon: <KeyRound className="h-4 w-4" />,
-		},
-		{
-			value: "prompts",
-			label: "My Prompts",
-			icon: <Sparkles className="h-4 w-4" />,
-		},
-		{
-			value: "community-prompts",
-			label: "Community Prompts",
-			icon: <Globe className="h-4 w-4" />,
-		},
-		{
-			value: "purchases",
-			label: "Purchase History",
-			icon: <Receipt className="h-4 w-4" />,
-		},
-		...(typeof window !== "undefined" && window.electronAPI
-			? [{ value: "desktop", label: "Desktop", icon: <Monitor className="h-4 w-4" /> }]
-			: []),
-	];
+	const navItems = useMemo(
+		() => [
+			{ value: "profile", label: t("profile_nav_label"), icon: <User className="h-4 w-4" /> },
+			{
+				value: "api-key",
+				label: t("api_key_nav_label"),
+				icon: <KeyRound className="h-4 w-4" />,
+			},
+			{
+				value: "prompts",
+				label: "My Prompts",
+				icon: <Sparkles className="h-4 w-4" />,
+			},
+			{
+				value: "community-prompts",
+				label: "Community Prompts",
+				icon: <Globe className="h-4 w-4" />,
+			},
+			{
+				value: "purchases",
+				label: "Purchase History",
+				icon: <Receipt className="h-4 w-4" />,
+			},
+			...(isDesktop
+				? [{ value: "desktop", label: "Desktop", icon: <Monitor className="h-4 w-4" /> }]
+				: []),
+		],
+		[t, isDesktop]
+	);

 	return (
 		<SettingsDialog
--- a/surfsense_web/components/settings/vision-model-manager.tsx
+++ b/surfsense_web/components/settings/vision-model-manager.tsx
@ -0,0 +1,401 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import { AlertCircle, Dot, Edit3, Info, RefreshCw, Trash2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
+import { deleteVisionLLMConfigMutationAtom } from "@/atoms/vision-llm-config/vision-llm-config-mutation.atoms";
+import {
+	globalVisionLLMConfigsAtom,
+	visionLLMConfigsAtom,
+} from "@/atoms/vision-llm-config/vision-llm-config-query.atoms";
+import { VisionConfigDialog } from "@/components/shared/vision-config-dialog";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/spinner";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import type { VisionLLMConfig } from "@/contracts/types/new-llm-config.types";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { getProviderIcon } from "@/lib/provider-icons";
+import { cn } from "@/lib/utils";
+
+interface VisionModelManagerProps {
+	searchSpaceId: number;
+}
+
+function getInitials(name: string): string {
+	const parts = name.trim().split(/\s+/);
+	if (parts.length >= 2) {
+		return (parts[0][0] + parts[1][0]).toUpperCase();
+	}
+	return name.slice(0, 2).toUpperCase();
+}
+
+export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
+	const isDesktop = useMediaQuery("(min-width: 768px)");
+
+	const {
+		mutateAsync: deleteConfig,
+		isPending: isDeleting,
+		error: deleteError,
+	} = useAtomValue(deleteVisionLLMConfigMutationAtom);
+
+	const {
+		data: userConfigs,
+		isFetching: configsLoading,
+		error: fetchError,
+		refetch: refreshConfigs,
+	} = useAtomValue(visionLLMConfigsAtom);
+	const { data: globalConfigs = [], isFetching: globalLoading } = useAtomValue(
+		globalVisionLLMConfigsAtom
+	);
+
+	const { data: members } = useAtomValue(membersAtom);
+	const memberMap = useMemo(() => {
+		const map = new Map<string, { name: string; email?: string; avatarUrl?: string }>();
+		if (members) {
+			for (const m of members) {
+				map.set(m.user_id, {
+					name: m.user_display_name || m.user_email || "Unknown",
+					email: m.user_email || undefined,
+					avatarUrl: m.user_avatar_url || undefined,
+				});
+			}
+		}
+		return map;
+	}, [members]);
+
+	const { data: access } = useAtomValue(myAccessAtom);
+	const canCreate = useMemo(() => {
+		if (!access) return false;
+		if (access.is_owner) return true;
+		return access.permissions?.includes("vision_configs:create") ?? false;
+	}, [access]);
+	const canDelete = useMemo(() => {
+		if (!access) return false;
+		if (access.is_owner) return true;
+		return access.permissions?.includes("vision_configs:delete") ?? false;
+	}, [access]);
+	const canUpdate = canCreate;
+	const isReadOnly = !canCreate && !canDelete;
+
+	const [isDialogOpen, setIsDialogOpen] = useState(false);
+	const [editingConfig, setEditingConfig] = useState<VisionLLMConfig | null>(null);
+	const [configToDelete, setConfigToDelete] = useState<VisionLLMConfig | null>(null);
+
+	const isLoading = configsLoading || globalLoading;
+	const errors = [deleteError, fetchError].filter(Boolean) as Error[];
+
+	const openEditDialog = (config: VisionLLMConfig) => {
+		setEditingConfig(config);
+		setIsDialogOpen(true);
+	};
+
+	const openNewDialog = () => {
+		setEditingConfig(null);
+		setIsDialogOpen(true);
+	};
+
+	const handleDelete = async () => {
+		if (!configToDelete) return;
+		try {
+			await deleteConfig({ id: configToDelete.id, name: configToDelete.name });
+			setConfigToDelete(null);
+		} catch {
+			// Error handled by mutation
+		}
+	};
+
+	return (
+		<div className="space-y-4 md:space-y-6">
+			<div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+				<Button
+					variant="secondary"
+					size="sm"
+					onClick={() => refreshConfigs()}
+					disabled={isLoading}
+					className="gap-2"
+				>
+					<RefreshCw className={cn("h-3.5 w-3.5", configsLoading && "animate-spin")} />
+					Refresh
+				</Button>
+				{canCreate && (
+					<Button
+						variant="outline"
+						onClick={openNewDialog}
+						className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
+					>
+						Add Vision Model
+					</Button>
+				)}
+			</div>
+
+			{errors.map((err) => (
+				<div key={err?.message}>
+					<Alert variant="destructive" className="py-3">
+						<AlertCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+						<AlertDescription className="text-xs md:text-sm">{err?.message}</AlertDescription>
+					</Alert>
+				</div>
+			))}
+
+			{access && !isLoading && isReadOnly && (
+				<div>
+					<Alert className="bg-muted/50 py-3 md:py-4">
+						<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+						<AlertDescription className="text-xs md:text-sm">
+							You have <span className="font-medium">read-only</span> access to vision model
+							configurations. Contact a space owner to request additional permissions.
+						</AlertDescription>
+					</Alert>
+				</div>
+			)}
+			{access && !isLoading && !isReadOnly && (!canCreate || !canDelete) && (
+				<div>
+					<Alert className="bg-muted/50 py-3 md:py-4">
+						<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+						<AlertDescription className="text-xs md:text-sm">
+							You can{" "}
+							{[canCreate && "create and edit", canDelete && "delete"]
+								.filter(Boolean)
+								.join(" and ")}{" "}
+							vision model configurations
+							{!canDelete && ", but cannot delete them"}.
+						</AlertDescription>
+					</Alert>
+				</div>
+			)}
+
+			{globalConfigs.filter((g) => !("is_auto_mode" in g && g.is_auto_mode)).length > 0 && (
+				<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 vision{" "}
+								{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>
+			)}
+
+			{isLoading && (
+				<div className="space-y-4 md:space-y-6">
+					<div className="space-y-4">
+						<div className="flex items-center justify-between">
+							<Skeleton className="h-6 md:h-7 w-40 md:w-48" />
+							<Skeleton className="h-8 md:h-9 w-32 md:w-36 rounded-md" />
+						</div>
+						<div className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
+							{["skeleton-a", "skeleton-b", "skeleton-c"].map((key) => (
+								<Card key={key} className="border-border/60">
+									<CardContent className="p-4 flex flex-col gap-3">
+										<div className="flex items-start justify-between gap-2">
+											<div className="space-y-1.5 flex-1 min-w-0">
+												<Skeleton className="h-4 w-28 md:w-32" />
+												<Skeleton className="h-3 w-40 md:w-48" />
+											</div>
+										</div>
+										<div className="flex items-center gap-2">
+											<Skeleton className="h-5 w-16 rounded-full" />
+											<Skeleton className="h-5 w-24 rounded-md" />
+										</div>
+										<div className="flex items-center gap-2 pt-2 border-t border-border/40">
+											<Skeleton className="h-3 w-20" />
+											<Skeleton className="h-4 w-4 rounded-full" />
+											<Skeleton className="h-3 w-16" />
+										</div>
+									</CardContent>
+								</Card>
+							))}
+						</div>
+					</div>
+				</div>
+			)}
+
+			{!isLoading && (
+				<div className="space-y-4 md:space-y-6">
+					{(userConfigs?.length ?? 0) === 0 ? (
+						<Card className="border-0 bg-transparent shadow-none">
+							<CardContent className="flex flex-col items-center justify-center py-10 md:py-16 text-center">
+								<h3 className="text-sm md:text-base font-semibold mb-2">No Vision Models Yet</h3>
+								<p className="text-[11px] md:text-xs text-muted-foreground max-w-sm mb-4">
+									{canCreate
+										? "Add your own vision-capable model (GPT-4o, Claude, Gemini, etc.)"
+										: "No vision models have been added to this space yet. Contact a space owner to add one."}
+								</p>
+							</CardContent>
+						</Card>
+					) : (
+						<div className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
+							{userConfigs?.map((config) => {
+								const member = config.user_id ? memberMap.get(config.user_id) : null;
+
+								return (
+									<div key={config.id}>
+										<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
+											<CardContent className="p-4 flex flex-col gap-3 h-full">
+												<div className="flex items-start justify-between gap-2">
+													<div className="min-w-0 flex-1">
+														<h4 className="text-sm font-semibold tracking-tight truncate">
+															{config.name}
+														</h4>
+														{config.description && (
+															<p className="text-[11px] text-muted-foreground/70 truncate mt-0.5">
+																{config.description}
+															</p>
+														)}
+													</div>
+													{(canUpdate || canDelete) && (
+														<div className="flex items-center gap-0.5 shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-150">
+															{canUpdate && (
+																<TooltipProvider>
+																	<Tooltip open={isDesktop ? undefined : false}>
+																		<TooltipTrigger asChild>
+																			<Button
+																				variant="ghost"
+																				size="icon"
+																				onClick={() => openEditDialog(config)}
+																				className="h-7 w-7 text-muted-foreground hover:text-foreground"
+																			>
+																				<Edit3 className="h-3 w-3" />
+																			</Button>
+																		</TooltipTrigger>
+																		<TooltipContent>Edit</TooltipContent>
+																	</Tooltip>
+																</TooltipProvider>
+															)}
+															{canDelete && (
+																<TooltipProvider>
+																	<Tooltip open={isDesktop ? undefined : false}>
+																		<TooltipTrigger asChild>
+																			<Button
+																				variant="ghost"
+																				size="icon"
+																				onClick={() => setConfigToDelete(config)}
+																				className="h-7 w-7 text-muted-foreground hover:text-destructive"
+																			>
+																				<Trash2 className="h-3 w-3" />
+																			</Button>
+																		</TooltipTrigger>
+																		<TooltipContent>Delete</TooltipContent>
+																	</Tooltip>
+																</TooltipProvider>
+															)}
+														</div>
+													)}
+												</div>
+
+												<div className="flex items-center gap-2 flex-wrap">
+													{getProviderIcon(config.provider, {
+														className: "size-3.5 shrink-0",
+													})}
+													<code className="text-[11px] font-mono text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-md truncate max-w-[160px]">
+														{config.model_name}
+													</code>
+												</div>
+
+												<div className="flex items-center gap-2 pt-2 border-t border-border/40 mt-auto">
+													<span className="text-[11px] text-muted-foreground/60">
+														{new Date(config.created_at).toLocaleDateString(undefined, {
+															year: "numeric",
+															month: "short",
+															day: "numeric",
+														})}
+													</span>
+													{member && (
+														<>
+															<Dot className="h-4 w-4 text-muted-foreground/30" />
+															<TooltipProvider>
+																<Tooltip open={isDesktop ? undefined : false}>
+																	<TooltipTrigger asChild>
+																		<div className="flex items-center gap-1.5 cursor-default">
+																			<Avatar className="size-4.5 shrink-0">
+																				{member.avatarUrl && (
+																					<AvatarImage src={member.avatarUrl} alt={member.name} />
+																				)}
+																				<AvatarFallback className="text-[9px]">
+																					{getInitials(member.name)}
+																				</AvatarFallback>
+																			</Avatar>
+																			<span className="text-[11px] text-muted-foreground/60 truncate max-w-[120px]">
+																				{member.name}
+																			</span>
+																		</div>
+																	</TooltipTrigger>
+																	<TooltipContent side="bottom">
+																		{member.email || member.name}
+																	</TooltipContent>
+																</Tooltip>
+															</TooltipProvider>
+														</>
+													)}
+												</div>
+											</CardContent>
+										</Card>
+									</div>
+								);
+							})}
+						</div>
+					)}
+				</div>
+			)}
+
+			<VisionConfigDialog
+				open={isDialogOpen}
+				onOpenChange={(open) => {
+					setIsDialogOpen(open);
+					if (!open) setEditingConfig(null);
+				}}
+				config={editingConfig}
+				isGlobal={false}
+				searchSpaceId={searchSpaceId}
+				mode={editingConfig ? "edit" : "create"}
+			/>
+
+			<AlertDialog
+				open={!!configToDelete}
+				onOpenChange={(open) => !open && setConfigToDelete(null)}
+			>
+				<AlertDialogContent className="select-none">
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete Vision Model</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete{" "}
+							<span className="font-semibold text-foreground">{configToDelete?.name}</span>?
+						</AlertDialogDescription>
+					</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>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</div>
+	);
+}
--- a/surfsense_web/components/shared/vision-config-dialog.tsx
+++ b/surfsense_web/components/shared/vision-config-dialog.tsx
@ -0,0 +1,481 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import { AlertCircle, Check, ChevronsUpDown } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { updateLLMPreferencesMutationAtom } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
+import {
+	createVisionLLMConfigMutationAtom,
+	updateVisionLLMConfigMutationAtom,
+} from "@/atoms/vision-llm-config/vision-llm-config-mutation.atoms";
+import { visionModelListAtom } from "@/atoms/vision-llm-config/vision-llm-config-query.atoms";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Spinner } from "@/components/ui/spinner";
+import { VISION_PROVIDERS } from "@/contracts/enums/vision-providers";
+import type {
+	GlobalVisionLLMConfig,
+	VisionLLMConfig,
+	VisionProvider,
+} from "@/contracts/types/new-llm-config.types";
+import { cn } from "@/lib/utils";
+
+interface VisionConfigDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	config: VisionLLMConfig | GlobalVisionLLMConfig | null;
+	isGlobal: boolean;
+	searchSpaceId: number;
+	mode: "create" | "edit" | "view";
+}
+
+const INITIAL_FORM = {
+	name: "",
+	description: "",
+	provider: "",
+	model_name: "",
+	api_key: "",
+	api_base: "",
+	api_version: "",
+};
+
+export function VisionConfigDialog({
+	open,
+	onOpenChange,
+	config,
+	isGlobal,
+	searchSpaceId,
+	mode,
+}: VisionConfigDialogProps) {
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [formData, setFormData] = useState(INITIAL_FORM);
+	const [scrollPos, setScrollPos] = useState<"top" | "middle" | "bottom">("top");
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (open) {
+			if (mode === "edit" && config && !isGlobal) {
+				setFormData({
+					name: config.name || "",
+					description: config.description || "",
+					provider: config.provider || "",
+					model_name: config.model_name || "",
+					api_key: (config as VisionLLMConfig).api_key || "",
+					api_base: config.api_base || "",
+					api_version: (config as VisionLLMConfig).api_version || "",
+				});
+			} else if (mode === "create") {
+				setFormData(INITIAL_FORM);
+			}
+			setScrollPos("top");
+		}
+	}, [open, mode, config, isGlobal]);
+
+	const { mutateAsync: createConfig } = useAtomValue(createVisionLLMConfigMutationAtom);
+	const { mutateAsync: updateConfig } = useAtomValue(updateVisionLLMConfigMutationAtom);
+	const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
+
+	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		const el = e.currentTarget;
+		const atTop = el.scrollTop <= 2;
+		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
+		setScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
+	}, []);
+
+	const getTitle = () => {
+		if (mode === "create") return "Add Vision Model";
+		if (isGlobal) return "View Global Vision Model";
+		return "Edit Vision Model";
+	};
+
+	const getSubtitle = () => {
+		if (mode === "create") return "Set up a new vision-capable LLM provider";
+		if (isGlobal) return "Read-only global configuration";
+		return "Update your vision model settings";
+	};
+
+	const handleSubmit = useCallback(async () => {
+		setIsSubmitting(true);
+		try {
+			if (mode === "create") {
+				const result = await createConfig({
+					name: formData.name,
+					provider: formData.provider as VisionProvider,
+					model_name: formData.model_name,
+					api_key: formData.api_key,
+					api_base: formData.api_base || undefined,
+					api_version: formData.api_version || undefined,
+					description: formData.description || undefined,
+					search_space_id: searchSpaceId,
+				});
+				if (result?.id) {
+					await updatePreferences({
+						search_space_id: searchSpaceId,
+						data: { vision_llm_config_id: result.id },
+					});
+				}
+				onOpenChange(false);
+			} else if (!isGlobal && config) {
+				await updateConfig({
+					id: config.id,
+					data: {
+						name: formData.name,
+						description: formData.description || undefined,
+						provider: formData.provider as VisionProvider,
+						model_name: formData.model_name,
+						api_key: formData.api_key,
+						api_base: formData.api_base || undefined,
+						api_version: formData.api_version || undefined,
+					},
+				});
+				onOpenChange(false);
+			}
+		} catch (error) {
+			console.error("Failed to save vision config:", error);
+			toast.error("Failed to save vision model");
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [
+		mode,
+		isGlobal,
+		config,
+		formData,
+		searchSpaceId,
+		createConfig,
+		updateConfig,
+		updatePreferences,
+		onOpenChange,
+	]);
+
+	const handleUseGlobalConfig = useCallback(async () => {
+		if (!config || !isGlobal) return;
+		setIsSubmitting(true);
+		try {
+			await updatePreferences({
+				search_space_id: searchSpaceId,
+				data: { vision_llm_config_id: config.id },
+			});
+			toast.success(`Now using ${config.name}`);
+			onOpenChange(false);
+		} catch (error) {
+			console.error("Failed to set vision model:", error);
+			toast.error("Failed to set vision model");
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [config, isGlobal, searchSpaceId, updatePreferences, onOpenChange]);
+
+	const { data: dynamicModels } = useAtomValue(visionModelListAtom);
+	const [modelComboboxOpen, setModelComboboxOpen] = useState(false);
+
+	const availableModels = useMemo(
+		() => (dynamicModels ?? []).filter((m) => m.provider === formData.provider),
+		[dynamicModels, formData.provider]
+	);
+
+	const isFormValid = formData.name && formData.provider && formData.model_name && formData.api_key;
+	const selectedProvider = VISION_PROVIDERS.find((p) => p.value === formData.provider);
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent
+				className="max-w-lg h-[85vh] flex flex-col p-0 gap-0 overflow-hidden"
+				onOpenAutoFocus={(e) => e.preventDefault()}
+			>
+				<DialogTitle className="sr-only">{getTitle()}</DialogTitle>
+
+				<div className="flex items-start justify-between px-6 pt-6 pb-4 pr-14">
+					<div className="space-y-1">
+						<div className="flex items-center gap-2">
+							<h2 className="text-lg font-semibold tracking-tight">{getTitle()}</h2>
+							{isGlobal && mode !== "create" && (
+								<Badge variant="secondary" className="text-[10px]">
+									Global
+								</Badge>
+							)}
+						</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>
+						)}
+					</div>
+				</div>
+
+				<div
+					ref={scrollRef}
+					onScroll={handleScroll}
+					className="flex-1 overflow-y-auto px-6 py-5"
+					style={{
+						maskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
+						WebkitMaskImage: `linear-gradient(to bottom, ${scrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${scrollPos === "bottom" ? "black" : "transparent"})`,
+					}}
+				>
+					{isGlobal && config && (
+						<>
+							<Alert className="mb-5 border-amber-500/30 bg-amber-500/5">
+								<AlertCircle className="size-4 text-amber-500" />
+								<AlertDescription className="text-sm text-amber-700 dark:text-amber-400">
+									Global configurations are read-only. To customize, create a new model.
+								</AlertDescription>
+							</Alert>
+							<div className="space-y-4">
+								<div className="grid gap-4 sm:grid-cols-2">
+									<div className="space-y-1.5">
+										<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+											Name
+										</div>
+										<p className="text-sm font-medium">{config.name}</p>
+									</div>
+									{config.description && (
+										<div className="space-y-1.5">
+											<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+												Description
+											</div>
+											<p className="text-sm text-muted-foreground">{config.description}</p>
+										</div>
+									)}
+								</div>
+								<Separator />
+								<div className="grid gap-4 sm:grid-cols-2">
+									<div className="space-y-1.5">
+										<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+											Provider
+										</div>
+										<p className="text-sm font-medium">{config.provider}</p>
+									</div>
+									<div className="space-y-1.5">
+										<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+											Model
+										</div>
+										<p className="text-sm font-medium font-mono">{config.model_name}</p>
+									</div>
+								</div>
+							</div>
+						</>
+					)}
+
+					{(mode === "create" || (mode === "edit" && !isGlobal)) && (
+						<div className="space-y-4">
+							<div className="space-y-2">
+								<Label className="text-sm font-medium">Name *</Label>
+								<Input
+									placeholder="e.g., My GPT-4o Vision"
+									value={formData.name}
+									onChange={(e) => setFormData((p) => ({ ...p, name: e.target.value }))}
+								/>
+							</div>
+
+							<div className="space-y-2">
+								<Label className="text-sm font-medium">Description</Label>
+								<Input
+									placeholder="Optional description"
+									value={formData.description}
+									onChange={(e) => setFormData((p) => ({ ...p, description: e.target.value }))}
+								/>
+							</div>
+
+							<Separator />
+
+							<div className="space-y-2">
+								<Label className="text-sm font-medium">Provider *</Label>
+								<Select
+									value={formData.provider}
+									onValueChange={(val) =>
+										setFormData((p) => ({ ...p, provider: val, model_name: "" }))
+									}
+								>
+									<SelectTrigger>
+										<SelectValue placeholder="Select a provider" />
+									</SelectTrigger>
+									<SelectContent>
+										{VISION_PROVIDERS.map((p) => (
+											<SelectItem key={p.value} value={p.value} description={p.example}>
+												{p.label}
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+							</div>
+
+							<div className="space-y-2">
+								<Label className="text-sm font-medium">Model Name *</Label>
+								<Popover open={modelComboboxOpen} onOpenChange={setModelComboboxOpen}>
+									<PopoverTrigger asChild>
+										<Button
+											variant="outline"
+											role="combobox"
+											aria-expanded={modelComboboxOpen}
+											className={cn(
+												"w-full justify-between font-normal bg-transparent",
+												!formData.model_name && "text-muted-foreground"
+											)}
+										>
+											{formData.model_name || "Select a model"}
+											<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+										</Button>
+									</PopoverTrigger>
+									<PopoverContent
+										className="w-full p-0 bg-muted dark:border-neutral-700"
+										align="start"
+									>
+										<Command shouldFilter={false} className="bg-transparent">
+											<CommandInput
+												placeholder={selectedProvider?.example || "Search model name"}
+												value={formData.model_name}
+												onValueChange={(val) =>
+													setFormData((p) => ({ ...p, model_name: val }))
+												}
+											/>
+											<CommandList className="max-h-[300px]">
+												<CommandEmpty>
+													<div className="py-3 text-center text-sm text-muted-foreground">
+														{formData.model_name
+															? `Using: "${formData.model_name}"`
+															: "Type your model name"}
+													</div>
+												</CommandEmpty>
+												{availableModels.length > 0 && (
+													<CommandGroup heading="Suggested Models">
+														{availableModels
+															.filter(
+																(model) =>
+																	!formData.model_name ||
+																	model.value
+																		.toLowerCase()
+																		.includes(formData.model_name.toLowerCase()) ||
+																	model.label
+																		.toLowerCase()
+																		.includes(formData.model_name.toLowerCase())
+															)
+															.slice(0, 50)
+															.map((model) => (
+																<CommandItem
+																	key={model.value}
+																	value={model.value}
+																	onSelect={(value) => {
+																		setFormData((p) => ({
+																			...p,
+																			model_name: value,
+																		}));
+																		setModelComboboxOpen(false);
+																	}}
+																	className="py-2"
+																>
+																	<Check
+																		className={cn(
+																			"mr-2 h-4 w-4",
+																			formData.model_name === model.value
+																				? "opacity-100"
+																				: "opacity-0"
+																		)}
+																	/>
+																	<div>
+																		<div className="font-medium">{model.label}</div>
+																		{model.contextWindow && (
+																			<div className="text-xs text-muted-foreground">
+																				Context: {model.contextWindow}
+																			</div>
+																		)}
+																	</div>
+																</CommandItem>
+															))}
+													</CommandGroup>
+												)}
+											</CommandList>
+										</Command>
+									</PopoverContent>
+								</Popover>
+							</div>
+
+							<div className="space-y-2">
+								<Label className="text-sm font-medium">API Key *</Label>
+								<Input
+									type="password"
+									placeholder="sk-..."
+									value={formData.api_key}
+									onChange={(e) => setFormData((p) => ({ ...p, api_key: e.target.value }))}
+								/>
+							</div>
+
+							<div className="space-y-2">
+								<Label className="text-sm font-medium">API Base URL</Label>
+								<Input
+									placeholder={selectedProvider?.apiBase || "Optional"}
+									value={formData.api_base}
+									onChange={(e) => setFormData((p) => ({ ...p, api_base: e.target.value }))}
+								/>
+							</div>
+
+							{formData.provider === "AZURE_OPENAI" && (
+								<div className="space-y-2">
+									<Label className="text-sm font-medium">API Version (Azure)</Label>
+									<Input
+										placeholder="2024-02-15-preview"
+										value={formData.api_version}
+										onChange={(e) => setFormData((p) => ({ ...p, api_version: e.target.value }))}
+									/>
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+
+				<div className="shrink-0 px-6 py-4 flex items-center justify-end gap-3">
+					<Button
+						type="button"
+						variant="secondary"
+						onClick={() => onOpenChange(false)}
+						disabled={isSubmitting}
+						className="text-sm h-9"
+					>
+						Cancel
+					</Button>
+					{mode === "create" || (mode === "edit" && !isGlobal) ? (
+						<Button
+							onClick={handleSubmit}
+							disabled={isSubmitting || !isFormValid}
+							className="relative text-sm h-9 min-w-[120px]"
+						>
+							<span className={isSubmitting ? "opacity-0" : ""}>
+								{mode === "edit" ? "Save Changes" : "Add Model"}
+							</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>
+		</Dialog>
+	);
+}
--- a/surfsense_web/components/sources/DocumentUploadTab.tsx
+++ b/surfsense_web/components/sources/DocumentUploadTab.tsx
@ -25,6 +25,7 @@ import {
 import { Progress } from "@/components/ui/progress";
 import { Spinner } from "@/components/ui/spinner";
 import { Switch } from "@/components/ui/switch";
+import { useElectronAPI } from "@/hooks/use-platform";
 import { getAcceptedFileTypes, getSupportedExtensions, getSupportedExtensionsSet } from "@/lib/supported-extensions";
 import {
 	trackDocumentUploadFailure,
@ -73,7 +74,8 @@ export function DocumentUploadTab({
 		};
 	}, []);

-	const isElectron = typeof window !== "undefined" && !!window.electronAPI?.browseFiles;
+	const electronAPI = useElectronAPI();
+	const isElectron = !!electronAPI?.browseFiles;

 	const acceptedFileTypes = useMemo(() => getAcceptedFileTypes(), []);
 	const supportedExtensions = useMemo(
@ -129,14 +131,13 @@ export function DocumentUploadTab({
 	}, []);

 	const handleBrowseFiles = useCallback(async () => {
-		const api = window.electronAPI;
-		if (!api?.browseFiles) return;
+		if (!electronAPI?.browseFiles) return;

-		const paths = await api.browseFiles();
+		const paths = await electronAPI.browseFiles();
 		if (!paths || paths.length === 0) return;

-		const fileDataList = await api.readLocalFiles(paths);
-		const filtered = fileDataList.filter((fd) => {
+		const fileDataList = await electronAPI.readLocalFiles(paths);
+		const filtered = fileDataList.filter((fd: { name: string; data: ArrayBuffer; mimeType: string }) => {
 			const ext = fd.name.includes(".") ? `.${fd.name.split(".").pop()?.toLowerCase()}` : "";
 			return ext !== "" && supportedExtensionsSet.has(ext);
 		});
@ -146,12 +147,12 @@ export function DocumentUploadTab({
 			return;
 		}

-		const newFiles: FileWithId[] = filtered.map((fd) => ({
+		const newFiles: FileWithId[] = filtered.map((fd: { name: string; data: ArrayBuffer; mimeType: string }) => ({
 			id: crypto.randomUUID?.() ?? `file-${Date.now()}-${Math.random().toString(36)}`,
 			file: new File([fd.data], fd.name, { type: fd.mimeType }),
 		}));
 		setFiles((prev) => [...prev, ...newFiles]);
-	}, [supportedExtensionsSet, t]);
+	}, [electronAPI, supportedExtensionsSet, t]);

 	const handleFolderChange = useCallback(
 		(e: ChangeEvent<HTMLInputElement>) => {