Merge remote-tracking branch 'upstream/dev' into feat/unified-etl-pipeline

surfsense_web/app/(home)/login/page.tsx

@@ -115,7 +115,7 @@ function LoginContent() {
 		<div className="relative w-full overflow-hidden">
 			<AmbientBackground />
 			<div className="mx-auto flex h-screen max-w-lg flex-col items-center justify-center">
-				<Logo className="h-16 w-16 md:h-32 md:w-32 rounded-md transition-all" />
+				<Logo priority className="h-16 w-16 md:h-32 md:w-32 rounded-md transition-all" />
 				<h1 className="mt-4 mb-6 text-xl font-bold text-neutral-800 dark:text-neutral-100 md:mt-8 md:mb-8 md:text-3xl lg:text-4xl transition-all">
 					{t("sign_in")}
 				</h1>

surfsense_web/app/(home)/register/page.tsx

@@ -160,7 +160,7 @@ export default function RegisterPage() {
 		<div className="relative w-full overflow-hidden">
 			<AmbientBackground />
 			<div className="mx-auto flex h-screen max-w-lg flex-col items-center justify-center px-6 md:px-0">
-				<Logo className="h-16 w-16 md:h-32 md:w-32 rounded-md transition-all" />
+				<Logo priority className="h-16 w-16 md:h-32 md:w-32 rounded-md transition-all" />
 				<h1 className="mt-4 mb-6 text-xl font-bold text-neutral-800 dark:text-neutral-100 md:mt-8 md:mb-8 md:text-3xl lg:text-4xl transition-all">
 					{t("create_account")}
 				</h1>

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx

@@ -267,12 +267,23 @@ export function DocumentsTableShell({
 	const [metadataJson, setMetadataJson] = useState<Record<string, unknown> | null>(null);
 	const [metadataLoading, setMetadataLoading] = useState(false);
 	const [previewScrollPos, setPreviewScrollPos] = useState<"top" | "middle" | "bottom">("top");
+	const previewRafRef = useRef<number>();
 	const handlePreviewScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
 		const el = e.currentTarget;
-		const atTop = el.scrollTop <= 2;
-		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
-		setPreviewScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
+		if (previewRafRef.current) return;
+		previewRafRef.current = requestAnimationFrame(() => {
+			const atTop = el.scrollTop <= 2;
+			const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
+			setPreviewScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
+			previewRafRef.current = undefined;
+		});
 	}, []);
+	useEffect(
+		() => () => {
+			if (previewRafRef.current) cancelAnimationFrame(previewRafRef.current);
+		},
+		[]
+	);
 
 	const [deleteDoc, setDeleteDoc] = useState<Document | null>(null);
 	const [isDeleting, setIsDeleting] = useState(false);

surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Spinner } from "@/components/ui/spinner";
+
+export function DesktopContent() {
+	const [isElectron, setIsElectron] = useState(false);
+	const [loading, setLoading] = useState(true);
+	const [enabled, setEnabled] = useState(true);
+
+	useEffect(() => {
+		if (!window.electronAPI) {
+			setLoading(false);
+			return;
+		}
+		setIsElectron(true);
+
+		window.electronAPI.getAutocompleteEnabled().then((val) => {
+			setEnabled(val);
+			setLoading(false);
+		});
+	}, []);
+
+	if (!isElectron) {
+		return (
+			<div className="flex flex-col items-center justify-center py-12 text-center">
+				<p className="text-sm text-muted-foreground">
+					Desktop settings are only available in the SurfSense desktop app.
+				</p>
+			</div>
+		);
+	}
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center py-12">
+				<Spinner size="md" className="text-muted-foreground" />
+			</div>
+		);
+	}
+
+	const handleToggle = async (checked: boolean) => {
+		setEnabled(checked);
+		await window.electronAPI!.setAutocompleteEnabled(checked);
+	};
+
+	return (
+		<div className="space-y-4 md:space-y-6">
+			<Card>
+				<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
+					<CardTitle className="text-base md:text-lg">Autocomplete</CardTitle>
+					<CardDescription className="text-xs md:text-sm">
+						Get inline writing suggestions powered by your knowledge base as you type in any app.
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="px-3 md:px-6 pb-3 md:pb-6">
+					<div className="flex items-center justify-between rounded-lg border p-4">
+						<div className="space-y-0.5">
+							<Label htmlFor="autocomplete-toggle" className="text-sm font-medium cursor-pointer">
+								Enable autocomplete
+							</Label>
+							<p className="text-xs text-muted-foreground">
+								Show suggestions while typing in other applications.
+							</p>
+						</div>
+						<Switch
+							id="autocomplete-toggle"
+							checked={enabled}
+							onCheckedChange={handleToggle}
+						/>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

surfsense_web/app/desktop/permissions/page.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Logo } from "@/components/Logo";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+
+type PermissionStatus = "authorized" | "denied" | "not determined" | "restricted" | "limited";
+
+interface PermissionsStatus {
+	accessibility: PermissionStatus;
+	screenRecording: PermissionStatus;
+}
+
+const STEPS = [
+	{
+		id: "screen-recording",
+		title: "Screen Recording",
+		description: "Lets SurfSense capture your screen to understand context and provide smart writing suggestions.",
+		action: "requestScreenRecording",
+		field: "screenRecording" as const,
+	},
+	{
+		id: "accessibility",
+		title: "Accessibility",
+		description: "Lets SurfSense insert suggestions seamlessly, right where you\u2019re typing.",
+		action: "requestAccessibility",
+		field: "accessibility" as const,
+	},
+];
+
+function StatusBadge({ status }: { status: PermissionStatus }) {
+	if (status === "authorized") {
+		return (
+			<span className="inline-flex items-center gap-1.5 text-xs font-medium text-green-700 dark:text-green-400">
+				<span className="h-2 w-2 rounded-full bg-green-500" />
+				Granted
+			</span>
+		);
+	}
+	if (status === "denied") {
+		return (
+			<span className="inline-flex items-center gap-1.5 text-xs font-medium text-amber-700 dark:text-amber-400">
+				<span className="h-2 w-2 rounded-full bg-amber-500" />
+				Denied
+			</span>
+		);
+	}
+	return (
+		<span className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+			<span className="h-2 w-2 rounded-full bg-muted-foreground/40" />
+			Pending
+		</span>
+	);
+}
+
+export default function DesktopPermissionsPage() {
+	const router = useRouter();
+	const [permissions, setPermissions] = useState<PermissionsStatus | null>(null);
+	const [isElectron, setIsElectron] = useState(false);
+
+	useEffect(() => {
+		if (!window.electronAPI) return;
+		setIsElectron(true);
+
+		let interval: ReturnType<typeof setInterval> | null = null;
+
+		const isResolved = (s: string) => s === "authorized" || s === "restricted";
+
+		const poll = async () => {
+			const status = await window.electronAPI!.getPermissionsStatus();
+			setPermissions(status);
+
+			if (isResolved(status.accessibility) && isResolved(status.screenRecording)) {
+				if (interval) clearInterval(interval);
+			}
+		};
+
+		poll();
+		interval = setInterval(poll, 2000);
+		return () => { if (interval) clearInterval(interval); };
+	}, []);
+
+	if (!isElectron) {
+		return (
+			<div className="h-screen flex items-center justify-center bg-background">
+				<p className="text-muted-foreground">This page is only available in the desktop app.</p>
+			</div>
+		);
+	}
+
+	if (!permissions) {
+		return (
+			<div className="h-screen flex items-center justify-center bg-background">
+				<Spinner size="lg" />
+			</div>
+		);
+	}
+
+	const allGranted = permissions.accessibility === "authorized" && permissions.screenRecording === "authorized";
+
+	const handleRequest = async (action: string) => {
+		if (action === "requestScreenRecording") {
+			await window.electronAPI!.requestScreenRecording();
+		} else if (action === "requestAccessibility") {
+			await window.electronAPI!.requestAccessibility();
+		}
+	};
+
+	const handleContinue = () => {
+		if (allGranted) {
+			window.electronAPI!.restartApp();
+		}
+	};
+
+	const handleSkip = () => {
+		router.push("/dashboard");
+	};
+
+	return (
+		<div className="h-screen flex flex-col items-center p-4 bg-background dark:bg-neutral-900 select-none overflow-hidden">
+			<div className="w-full max-w-lg flex flex-col min-h-0 h-full gap-6 py-8">
+				{/* Header */}
+				<div className="text-center space-y-3 shrink-0">
+					<Logo className="w-12 h-12 mx-auto" />
+					<div className="space-y-1">
+						<h1 className="text-2xl font-semibold tracking-tight">System Permissions</h1>
+						<p className="text-sm text-muted-foreground">
+							SurfSense needs two macOS permissions to provide context-aware writing suggestions.
+						</p>
+					</div>
+				</div>
+
+				{/* Steps */}
+				<div className="rounded-xl border bg-background dark:bg-neutral-900 flex-1 min-h-0 overflow-y-auto px-6 py-6 space-y-6">
+					{STEPS.map((step, index) => {
+						const status = permissions[step.field];
+						const isGranted = status === "authorized";
+
+						return (
+							<div
+								key={step.id}
+								className={`rounded-lg border p-4 transition-colors ${
+									isGranted
+										? "border-green-200 bg-green-50/50 dark:border-green-900 dark:bg-green-950/20"
+										: "border-border"
+								}`}
+							>
+								<div className="flex items-start justify-between gap-3">
+									<div className="flex items-start gap-3">
+										<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
+											{isGranted ? "\u2713" : index + 1}
+										</span>
+										<div className="space-y-1">
+											<h3 className="text-sm font-medium">{step.title}</h3>
+											<p className="text-xs text-muted-foreground">{step.description}</p>
+										</div>
+									</div>
+									<StatusBadge status={status} />
+								</div>
+								{!isGranted && (
+									<div className="mt-3 pl-10 space-y-2">
+										<Button
+											size="sm"
+											variant="outline"
+											onClick={() => handleRequest(step.action)}
+											className="text-xs"
+										>
+											Open System Settings
+										</Button>
+										{status === "denied" && (
+											<p className="text-xs text-amber-700 dark:text-amber-400">
+												Toggle SurfSense on in System Settings to continue.
+											</p>
+										)}
+										<p className="text-xs text-muted-foreground">
+											If SurfSense doesn&apos;t appear in the list, click <strong>+</strong> and select it from Applications.
+										</p>
+									</div>
+								)}
+							</div>
+						);
+					})}
+				</div>
+
+				{/* Footer */}
+				<div className="text-center space-y-3 shrink-0">
+					{allGranted ? (
+						<>
+							<Button onClick={handleContinue} className="text-sm h-9 min-w-[180px]">
+								Restart &amp; Get Started
+							</Button>
+							<p className="text-xs text-muted-foreground">
+								A restart is needed for permissions to take effect.
+							</p>
+						</>
+					) : (
+						<>
+							<Button disabled className="text-sm h-9 min-w-[180px]">
+								Grant permissions to continue
+							</Button>
+							<button
+								onClick={handleSkip}
+								className="block mx-auto text-xs text-muted-foreground hover:text-foreground transition-colors"
+							>
+								Skip for now
+							</button>
+						</>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

surfsense_web/app/desktop/suggestion/layout.tsx

@@ -0,0 +1,13 @@
+import "./suggestion.css";
+
+export const metadata = {
+	title: "SurfSense Suggestion",
+};
+
+export default function SuggestionLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return <div className="suggestion-body">{children}</div>;
+}

surfsense_web/app/desktop/suggestion/page.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getBearerToken } from "@/lib/auth-utils";
+
+type SSEEvent =
+	| { type: "text-delta"; id: string; delta: string }
+	| { type: "text-start"; id: string }
+	| { type: "text-end"; id: string }
+	| { type: "start"; messageId: string }
+	| { type: "finish" }
+	| { type: "error"; errorText: string };
+
+function friendlyError(raw: string | number): string {
+	if (typeof raw === "number") {
+		if (raw === 401) return "Please sign in to use suggestions.";
+		if (raw === 403) return "You don\u2019t have permission for this.";
+		if (raw === 404) return "Suggestion service not found. Is the backend running?";
+		if (raw >= 500) return "Something went wrong on the server. Try again.";
+		return "Something went wrong. Try again.";
+	}
+	const lower = raw.toLowerCase();
+	if (lower.includes("not authenticated") || lower.includes("unauthorized"))
+		return "Please sign in to use suggestions.";
+	if (lower.includes("no vision llm configured") || lower.includes("no llm configured"))
+		return "No Vision LLM configured. Set one in search space settings.";
+	if (lower.includes("does not support vision"))
+		return "Selected model doesn\u2019t support vision. Set a vision-capable model in settings.";
+	if (lower.includes("fetch") || lower.includes("network") || lower.includes("econnrefused"))
+		return "Can\u2019t reach the server. Check your connection.";
+	return "Something went wrong. Try again.";
+}
+
+const AUTO_DISMISS_MS = 3000;
+
+export default function SuggestionPage() {
+	const [suggestion, setSuggestion] = useState("");
+	const [isLoading, setIsLoading] = useState(true);
+	const [isDesktop, setIsDesktop] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const abortRef = useRef<AbortController | null>(null);
+
+	useEffect(() => {
+		if (!window.electronAPI?.onAutocompleteContext) {
+			setIsDesktop(false);
+			setIsLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		if (!error) return;
+		const timer = setTimeout(() => {
+			window.electronAPI?.dismissSuggestion?.();
+		}, AUTO_DISMISS_MS);
+		return () => clearTimeout(timer);
+	}, [error]);
+
+	const fetchSuggestion = useCallback(
+		async (screenshot: string, searchSpaceId: string, appName?: string, windowTitle?: string) => {
+			abortRef.current?.abort();
+			const controller = new AbortController();
+			abortRef.current = controller;
+
+			setIsLoading(true);
+			setSuggestion("");
+			setError(null);
+
+			const token = getBearerToken();
+			if (!token) {
+				setError(friendlyError("not authenticated"));
+				setIsLoading(false);
+				return;
+			}
+
+			const backendUrl =
+				process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL || "http://localhost:8000";
+
+			try {
+				const response = await fetch(
+					`${backendUrl}/api/v1/autocomplete/vision/stream`,
+					{
+						method: "POST",
+						headers: {
+							Authorization: `Bearer ${token}`,
+							"Content-Type": "application/json",
+						},
+						body: JSON.stringify({
+							screenshot,
+							search_space_id: parseInt(searchSpaceId, 10),
+							app_name: appName || "",
+							window_title: windowTitle || "",
+						}),
+						signal: controller.signal,
+					},
+				);
+
+				if (!response.ok) {
+					setError(friendlyError(response.status));
+					setIsLoading(false);
+					return;
+				}
+
+				if (!response.body) {
+					setError(friendlyError("network error"));
+					setIsLoading(false);
+					return;
+				}
+
+				const reader = response.body.getReader();
+				const decoder = new TextDecoder();
+				let buffer = "";
+
+				while (true) {
+					const { done, value } = await reader.read();
+					if (done) break;
+
+					buffer += decoder.decode(value, { stream: true });
+					const events = buffer.split(/\r?\n\r?\n/);
+					buffer = events.pop() || "";
+
+					for (const event of events) {
+						const lines = event.split(/\r?\n/);
+						for (const line of lines) {
+							if (!line.startsWith("data: ")) continue;
+							const data = line.slice(6).trim();
+							if (!data || data === "[DONE]") continue;
+
+							try {
+								const parsed: SSEEvent = JSON.parse(data);
+								if (parsed.type === "text-delta") {
+									setSuggestion((prev) => prev + parsed.delta);
+								} else if (parsed.type === "error") {
+									setError(friendlyError(parsed.errorText));
+								}
+							} catch {
+								continue;
+							}
+						}
+					}
+				}
+			} catch (err) {
+				if (err instanceof DOMException && err.name === "AbortError") return;
+				setError(friendlyError("network error"));
+			} finally {
+				setIsLoading(false);
+			}
+		},
+		[],
+	);
+
+	useEffect(() => {
+		if (!window.electronAPI?.onAutocompleteContext) return;
+
+		const cleanup = window.electronAPI.onAutocompleteContext((data) => {
+			const searchSpaceId = data.searchSpaceId || "1";
+			if (data.screenshot) {
+				fetchSuggestion(data.screenshot, searchSpaceId, data.appName, data.windowTitle);
+			}
+		});
+
+		return cleanup;
+	}, [fetchSuggestion]);
+
+	if (!isDesktop) {
+		return (
+			<div className="suggestion-tooltip">
+				<span className="suggestion-error-text">
+					This page is only available in the SurfSense desktop app.
+				</span>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="suggestion-tooltip suggestion-error">
+				<span className="suggestion-error-text">{error}</span>
+			</div>
+		);
+	}
+
+	if (isLoading && !suggestion) {
+		return (
+			<div className="suggestion-tooltip">
+				<div className="suggestion-loading">
+					<span className="suggestion-dot" />
+					<span className="suggestion-dot" />
+					<span className="suggestion-dot" />
+				</div>
+			</div>
+		);
+	}
+
+	const handleAccept = () => {
+		if (suggestion) {
+			window.electronAPI?.acceptSuggestion?.(suggestion);
+		}
+	};
+
+	const handleDismiss = () => {
+		window.electronAPI?.dismissSuggestion?.();
+	};
+
+	if (!suggestion) return null;
+
+	return (
+		<div className="suggestion-tooltip">
+			<p className="suggestion-text">{suggestion}</p>
+			<div className="suggestion-actions">
+				<button className="suggestion-btn suggestion-btn-accept" onClick={handleAccept}>
+					Accept
+				</button>
+				<button className="suggestion-btn suggestion-btn-dismiss" onClick={handleDismiss}>
+					Dismiss
+				</button>
+			</div>
+		</div>
+	);
+}

surfsense_web/app/desktop/suggestion/suggestion.css

@@ -0,0 +1,121 @@
+html:has(.suggestion-body),
+body:has(.suggestion-body) {
+  margin: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+  overflow: hidden !important;
+  height: auto !important;
+  width: 100% !important;
+}
+
+.suggestion-body {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+  -webkit-app-region: no-drag;
+}
+
+.suggestion-tooltip {
+  background: #1e1e1e;
+  border: 1px solid #3c3c3c;
+  border-radius: 8px;
+  padding: 8px 12px;
+  margin: 4px;
+  max-width: 400px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+}
+
+.suggestion-text {
+  color: #d4d4d4;
+  font-size: 13px;
+  line-height: 1.45;
+  margin: 0 0 6px 0;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.suggestion-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 4px;
+  border-top: 1px solid #2a2a2a;
+  padding-top: 6px;
+}
+
+.suggestion-btn {
+  padding: 2px 8px;
+  border-radius: 3px;
+  border: 1px solid #3c3c3c;
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  line-height: 16px;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.suggestion-btn-accept {
+  background: #2563eb;
+  border-color: #3b82f6;
+  color: #fff;
+}
+
+.suggestion-btn-accept:hover {
+  background: #1d4ed8;
+}
+
+.suggestion-btn-dismiss {
+  background: #2a2a2a;
+  color: #999;
+}
+
+.suggestion-btn-dismiss:hover {
+  background: #333;
+  color: #ccc;
+}
+
+.suggestion-error {
+  border-color: #5c2626;
+}
+
+.suggestion-error-text {
+  color: #f48771;
+  font-size: 12px;
+}
+
+.suggestion-loading {
+  display: flex;
+  gap: 5px;
+  padding: 2px 0;
+  justify-content: center;
+}
+
+.suggestion-dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #666;
+  animation: suggestion-pulse 1.2s infinite ease-in-out;
+}
+
+.suggestion-dot:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.suggestion-dot:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes suggestion-pulse {
+  0%, 80%, 100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}

surfsense_web/components/Logo.tsx

@@ -5,9 +5,11 @@ import { cn } from "@/lib/utils";
 export const Logo = ({
 	className,
 	disableLink = false,
+	priority = false,
 }: {
 	className?: string;
 	disableLink?: boolean;
+	priority?: boolean;
 }) => {
 	const image = (
 		<Image
@@ -16,6 +18,7 @@ export const Logo = ({
 			alt="logo"
 			width={128}
 			height={128}
+			priority={priority}
 		/>
 	);
 

surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/circleback-config.tsx

@@ -34,9 +34,12 @@ export const CirclebackConfig: FC<CirclebackConfigProps> = ({ connector, onNameC
 	const [isLoading, setIsLoading] = useState(true);
 	const [copied, setCopied] = useState(false);
 
+	// Fetch webhook info
 	// Fetch webhook info
 	useEffect(() => {
-		const fetchWebhookInfo = async () => {
+		const controller = new AbortController();
+
+		const doFetch = async () => {
 			if (!connector.search_space_id) return;
 
 			const baseUrl = process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL;
@@ -49,8 +52,11 @@ export const CirclebackConfig: FC<CirclebackConfigProps> = ({ connector, onNameC
 			setIsLoading(true);
 			try {
 				const response = await authenticatedFetch(
-					`${baseUrl}/api/v1/webhooks/circleback/${connector.search_space_id}/info`
+					`${baseUrl}/api/v1/webhooks/circleback/${connector.search_space_id}/info`,
+					{ signal: controller.signal }
 				);
+				if (controller.signal.aborted) return;
+
 				if (response.ok) {
 					const data: unknown = await response.json();
 					// Runtime validation with zod schema
@@ -59,16 +65,18 @@ export const CirclebackConfig: FC<CirclebackConfigProps> = ({ connector, onNameC
 					setWebhookUrl(validatedData.webhook_url);
 				}
 			} catch (error) {
+				if (controller.signal.aborted) return;
 				console.error("Failed to fetch webhook info:", error);
 				// Reset state on error
 				setWebhookInfo(null);
 				setWebhookUrl("");
 			} finally {
-				setIsLoading(false);
+				if (!controller.signal.aborted) setIsLoading(false);
 			}
 		};
 
-		fetchWebhookInfo();
+		doFetch().catch(() => {});
+		return () => controller.abort();
 	}, [connector.search_space_id]);
 
 	const handleNameChange = (value: string) => {

surfsense_web/components/assistant-ui/image.tsx

@@ -6,6 +6,7 @@ import { ImageIcon, ImageOffIcon } from "lucide-react";
 import { memo, type PropsWithChildren, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "@/lib/utils";
+import NextImage from 'next/image';
 
 const imageVariants = cva("aui-image-root relative overflow-hidden rounded-lg", {
 	variants: {
@@ -86,23 +87,57 @@ function ImagePreview({
 				>
 					<ImageOffIcon className="size-8 text-muted-foreground" />
 				</div>
-			) : (
+			) : isDataOrBlobUrl(src) ? (
+                // biome-ignore lint/performance/noImgElement: data/blob URLs need plain img
+                <img
+                    ref={imgRef}
+                    src={src}
+                    alt={alt}
+                    className={cn("block h-auto w-full object-contain", !loaded && "invisible", className)}
+                    onLoad={(e) => {
+                        if (typeof src === "string") setLoadedSrc(src);
+                        onLoad?.(e);
+                    }}
+                    onError={(e) => {
+                        if (typeof src === "string") setErrorSrc(src);
+                        onError?.(e);
+                    }}
+                    {...props}
+                />
+            ) : (
 				// biome-ignore lint/performance/noImgElement: intentional for dynamic external URLs
-				<img
-					ref={imgRef}
-					src={src}
-					alt={alt}
-					className={cn("block h-auto w-full object-contain", !loaded && "invisible", className)}
-					onLoad={(e) => {
-						if (typeof src === "string") setLoadedSrc(src);
-						onLoad?.(e);
-					}}
-					onError={(e) => {
-						if (typeof src === "string") setErrorSrc(src);
-						onError?.(e);
-					}}
-					{...props}
-				/>
+				// <img
+				// 	ref={imgRef}
+				// 	src={src}
+				// 	alt={alt}
+				// 	className={cn("block h-auto w-full object-contain", !loaded && "invisible", className)}
+				// 	onLoad={(e) => {
+				// 		if (typeof src === "string") setLoadedSrc(src);
+				// 		onLoad?.(e);
+				// 	}}
+				// 	onError={(e) => {
+				// 		if (typeof src === "string") setErrorSrc(src);
+				// 		onError?.(e);
+				// 	}}
+				// 	{...props}
+				// />
+				<NextImage
+				fill
+				src={src || ""}
+				alt={alt}
+				sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 60vw"
+				className={cn("block object-contain", !loaded && "invisible", className)}
+				onLoad={() => {
+					if (typeof src === "string") setLoadedSrc(src);
+					onLoad?.();
+				}}
+				onError={() => {
+					if (typeof src === "string") setErrorSrc(src);
+					onError?.();
+				}}
+				unoptimized={false}
+				{...props}
+			/>
 			)}
 		</div>
 	);
@@ -126,7 +161,10 @@ type ImageZoomProps = PropsWithChildren<{
 	src: string;
 	alt?: string;
 }>;
-
+function isDataOrBlobUrl(src: string | undefined): boolean {
+    if (!src || typeof src !== "string") return false;
+    return src.startsWith("data:") || src.startsWith("blob:");
+}
 function ImageZoom({ src, alt = "Image preview", children }: ImageZoomProps) {
 	const [isMounted, setIsMounted] = useState(false);
 	const [isOpen, setIsOpen] = useState(false);
@@ -177,22 +215,39 @@ function ImageZoom({ src, alt = "Image preview", children }: ImageZoomProps) {
 						aria-label="Close zoomed image"
 					>
 						{/** biome-ignore lint/performance/noImgElement: <explanation> */}
-						<img
-							data-slot="image-zoom-content"
-							src={src}
-							alt={alt}
-							className="aui-image-zoom-content fade-in zoom-in-95 max-h-[90vh] max-w-[90vw] animate-in object-contain duration-200"
-							onClick={(e) => {
-								e.stopPropagation();
-								handleClose();
-							}}
-							onKeyDown={(e) => {
-								if (e.key === "Enter") {
-									e.stopPropagation();
-									handleClose();
-								}
-							}}
-						/>
+						{isDataOrBlobUrl(src) ? (
+                            // biome-ignore lint/performance/noImgElement: data/blob URLs need plain img
+                            <img
+                                data-slot="image-zoom-content"
+                                src={src}
+                                alt={alt}
+                                className="aui-image-zoom-content fade-in zoom-in-95 max-h-[90vh] max-w-[90vw] animate-in object-contain duration-200"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleClose();
+                                }}
+                                onKeyDown={(e) => {
+                                    if (e.key === "Enter") {
+                                        e.stopPropagation();
+                                        handleClose();
+                                    }
+                                }}
+                            />
+                        ) : (
+							<NextImage
+                                data-slot="image-zoom-content"
+                                fill
+                                src={src}
+                                alt={alt}
+                                sizes="90vw"
+                                className="aui-image-zoom-content fade-in zoom-in-95 object-contain duration-200"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleClose();
+                                }}
+                                unoptimized={false}
+                            />
+                        )}
 					</button>,
 					document.body
 				)}

surfsense_web/components/assistant-ui/thread-list.tsx

@@ -9,7 +9,7 @@ import {
 	TrashIcon,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { memo, useCallback, useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
 	DropdownMenu,
@@ -224,6 +224,11 @@ const ThreadListItemComponent = memo(function ThreadListItemComponent({
 	onUnarchive,
 	onDelete,
 }: ThreadListItemComponentProps) {
+	const relativeTime = useMemo(
+		() => formatRelativeTime(new Date(thread.updatedAt)),
+		[thread.updatedAt]
+	);
+
 	return (
 		<button
 			type="button"
@@ -237,7 +242,7 @@ const ThreadListItemComponent = memo(function ThreadListItemComponent({
 			<div className="flex-1 min-w-0">
 				<p className="truncate text-sm font-medium">{thread.title || "New Chat"}</p>
 				<p className="truncate text-xs text-muted-foreground">
-					{formatRelativeTime(new Date(thread.updatedAt))}
+					{relativeTime}
 				</p>
 			</div>
 			<DropdownMenu>

surfsense_web/components/assistant-ui/thread.tsx

@@ -817,12 +817,23 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 	const isDesktop = useMediaQuery("(min-width: 640px)");
 	const { openDialog: openUploadDialog } = useDocumentUploadDialog();
 	const [toolsScrollPos, setToolsScrollPos] = useState<"top" | "middle" | "bottom">("top");
+	const toolsRafRef = useRef<number>();
 	const handleToolsScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
 		const el = e.currentTarget;
-		const atTop = el.scrollTop <= 2;
-		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
-		setToolsScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
+		if (toolsRafRef.current) return;
+		toolsRafRef.current = requestAnimationFrame(() => {
+			const atTop = el.scrollTop <= 2;
+			const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
+			setToolsScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
+			toolsRafRef.current = undefined;
+		});
 	}, []);
+	useEffect(
+		() => () => {
+			if (toolsRafRef.current) cancelAnimationFrame(toolsRafRef.current);
+		},
+		[]
+	);
 	const isComposerTextEmpty = useAuiState(({ composer }) => {
 		const text = composer.text?.trim() || "";
 		return text.length === 0;

surfsense_web/components/assistant-ui/tool-fallback.tsx

@@ -1,6 +1,6 @@
 import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, XCircleIcon } from "lucide-react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { getToolIcon } from "@/contracts/enums/toolIcons";
 import { cn } from "@/lib/utils";
 
@@ -19,17 +19,28 @@ export const ToolFallback: ToolCallMessagePartComponent = ({
 	const isCancelled = status?.type === "incomplete" && status.reason === "cancelled";
 	const isError = status?.type === "incomplete" && status.reason === "error";
 	const isRunning = status?.type === "running" || status?.type === "requires-action";
+	const errorData = status?.type === "incomplete" ? status.error : undefined;
+	const serializedError = useMemo(
+		() => (errorData && typeof errorData !== "string" ? JSON.stringify(errorData) : null),
+		[errorData]
+	);
+
+	const serializedResult = useMemo(
+		() => (result !== undefined && typeof result !== "string" ? JSON.stringify(result, null, 2) : null),
+		[result]
+	);
+
 	const cancelledReason =
 		isCancelled && status.error
 			? typeof status.error === "string"
 				? status.error
-				: JSON.stringify(status.error)
+				: serializedError
 			: null;
 	const errorReason =
 		isError && status.error
 			? typeof status.error === "string"
 				? status.error
-				: JSON.stringify(status.error)
+				: serializedError
 			: null;
 
 	const Icon = getToolIcon(toolName);
@@ -122,7 +133,7 @@ export const ToolFallback: ToolCallMessagePartComponent = ({
 								<div>
 									<p className="text-xs font-medium text-muted-foreground mb-1">Result</p>
 									<pre className="text-xs text-foreground/80 whitespace-pre-wrap break-all">
-										{typeof result === "string" ? result : JSON.stringify(result, null, 2)}
+										{typeof result === "string" ? result : serializedResult}
 									</pre>
 								</div>
 							</>

surfsense_web/components/editor-panel/editor-panel.tsx

@@ -79,7 +79,7 @@ export function EditorPanelContent({
 	const isLargeDocument = (editorDoc?.content_size_bytes ?? 0) > LARGE_DOCUMENT_THRESHOLD;
 
 	useEffect(() => {
-		let cancelled = false;
+		const controller = new AbortController();
 		setIsLoading(true);
 		setError(null);
 		setEditorDoc(null);
@@ -87,7 +87,7 @@ export function EditorPanelContent({
 		initialLoadDone.current = false;
 		changeCountRef.current = 0;
 
-		const fetchContent = async () => {
+		const doFetch = async () => {
 			const token = getBearerToken();
 			if (!token) {
 				redirectToLogin();
@@ -102,7 +102,7 @@ export function EditorPanelContent({
 
 				const response = await authenticatedFetch(url.toString(), { method: "GET" });
 
-				if (cancelled) return;
+				if (controller.signal.aborted) return;
 
 				if (!response.ok) {
 					const errorData = await response
@@ -126,18 +126,16 @@ export function EditorPanelContent({
 				setEditorDoc(data);
 				initialLoadDone.current = true;
 			} catch (err) {
-				if (cancelled) return;
+				if (controller.signal.aborted) return;
 				console.error("Error fetching document:", err);
 				setError(err instanceof Error ? err.message : "Failed to fetch document");
 			} finally {
-				if (!cancelled) setIsLoading(false);
+				if (!controller.signal.aborted) setIsLoading(false);
 			}
 		};
 
-		fetchContent();
-		return () => {
-			cancelled = true;
-		};
+		doFetch().catch(() => {});
+		return () => controller.abort();
 	}, [documentId, searchSpaceId, title]);
 
 	const handleMarkdownChange = useCallback((md: string) => {

surfsense_web/components/editor/plate-editor.tsx

@@ -158,14 +158,16 @@ export function PlateEditor({
 	// When not forced read-only, the user can toggle between editing/viewing.
 	const canToggleMode = !readOnly;
 
+	const contextProviderValue = useMemo(()=> ({
+		onSave,
+		hasUnsavedChanges,
+		isSaving,
+		canToggleMode,
+	}), [onSave, hasUnsavedChanges, isSaving, canToggleMode]);
+
 	return (
 		<EditorSaveContext.Provider
-			value={{
-				onSave,
-				hasUnsavedChanges,
-				isSaving,
-				canToggleMode,
-			}}
+			value={contextProviderValue}
 		>
 			<Plate
 				editor={editor}

surfsense_web/components/homepage/features-bento-grid.tsx

@@ -408,6 +408,7 @@ const AudioCommentIllustration = () => (
 			src="/homepage/comments-audio.webp"
 			alt="Audio Comment Illustration"
 			fill
+			sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
 			className="object-cover"
 		/>
 	</div>

surfsense_web/components/homepage/navbar.tsx

@@ -32,7 +32,7 @@ export const Navbar = ({ scrolledBgClassName }: NavbarProps = {}) => {
 		};
 
 		handleScroll();
-		window.addEventListener("scroll", handleScroll);
+		window.addEventListener("scroll", handleScroll, { passive: true });
 		return () => window.removeEventListener("scroll", handleScroll);
 	}, []);
 
@@ -132,7 +132,7 @@ const MobileNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
 		};
 
 		document.addEventListener("mousedown", handleClickOutside);
-		document.addEventListener("touchstart", handleClickOutside);
+		document.addEventListener("touchstart", handleClickOutside, { passive: true });
 		return () => {
 			document.removeEventListener("mousedown", handleClickOutside);
 			document.removeEventListener("touchstart", handleClickOutside);
@@ -143,7 +143,6 @@ const MobileNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
 		<motion.div
 			ref={navRef}
 			animate={{ borderRadius: open ? "4px" : "2rem" }}
-			key={String(open)}
 			className={cn(
 				"relative mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-col items-center justify-between px-4 py-2 lg:hidden transition-all duration-300",
 				isScrolled

surfsense_web/components/homepage/use-cases-grid.tsx

@@ -1,4 +1,5 @@
 "use client";
+import Image from 'next/image';
 
 import { AnimatePresence, motion } from "motion/react";
 import { ExpandedGifOverlay, useExpandedGif } from "@/components/ui/expanded-gif-overlay";
@@ -81,6 +82,15 @@ function UseCaseCard({
 						alt={title}
 						className="w-full rounded-xl object-cover transition-transform duration-500 group-hover:scale-[1.02]"
 					/>
+					<div className="relative w-full h-48">
+					<Image
+						src={src}
+						alt={title}
+						fill
+						className="rounded-xl object-cover transition-transform duration-500 group-hover:scale-[1.02]"
+						unoptimized={src.endsWith('.gif')}
+					/>
+					</div>
 				</div>
 				<div className="px-5 py-4">
 					<h3 className="text-base font-semibold text-neutral-900 dark:text-white">{title}</h3>

surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx

@@ -109,6 +109,7 @@ export function AllPrivateChatsSidebarContent({
 		queryKey: ["all-threads", searchSpaceId],
 		queryFn: () => fetchThreads(Number(searchSpaceId)),
 		enabled: !!searchSpaceId && !isSearchMode,
+		placeholderData: () => queryClient.getQueryData(["threads", searchSpaceId, { limit: 40 }]),
 	});
 
 	const {

surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx

@@ -178,12 +178,23 @@ export function InboxSidebarContent({
 	const [mounted, setMounted] = useState(false);
 	const [openDropdown, setOpenDropdown] = useState<"filter" | null>(null);
 	const [connectorScrollPos, setConnectorScrollPos] = useState<"top" | "middle" | "bottom">("top");
+	const connectorRafRef = useRef<number>();
 	const handleConnectorScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
 		const el = e.currentTarget;
-		const atTop = el.scrollTop <= 2;
-		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
-		setConnectorScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
+		if (connectorRafRef.current) return;
+		connectorRafRef.current = requestAnimationFrame(() => {
+			const atTop = el.scrollTop <= 2;
+			const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
+			setConnectorScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
+			connectorRafRef.current = undefined;
+		});
 	}, []);
+	useEffect(
+		() => () => {
+			if (connectorRafRef.current) cancelAnimationFrame(connectorRafRef.current);
+		},
+		[]
+	);
 	const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);
 	const [markingAsReadId, setMarkingAsReadId] = useState<number | null>(null);
 

surfsense_web/components/layout/ui/tabs/DocumentTabContent.tsx

@@ -64,7 +64,7 @@ export function DocumentTabContent({ documentId, searchSpaceId, title }: Documen
 	const isLargeDocument = (doc?.content_size_bytes ?? 0) > LARGE_DOCUMENT_THRESHOLD;
 
 	useEffect(() => {
-		let cancelled = false;
+		const controller = new AbortController();
 		setIsLoading(true);
 		setError(null);
 		setDoc(null);
@@ -73,7 +73,7 @@ export function DocumentTabContent({ documentId, searchSpaceId, title }: Documen
 		initialLoadDone.current = false;
 		changeCountRef.current = 0;
 
-		const fetchContent = async () => {
+		const doFetch = async () => {
 			const token = getBearerToken();
 			if (!token) {
 				redirectToLogin();
@@ -88,7 +88,7 @@ export function DocumentTabContent({ documentId, searchSpaceId, title }: Documen
 
 				const response = await authenticatedFetch(url.toString(), { method: "GET" });
 
-				if (cancelled) return;
+				if (controller.signal.aborted) return;
 
 				if (!response.ok) {
 					const errorData = await response
@@ -109,18 +109,16 @@ export function DocumentTabContent({ documentId, searchSpaceId, title }: Documen
 				setDoc(data);
 				initialLoadDone.current = true;
 			} catch (err) {
-				if (cancelled) return;
+				if (controller.signal.aborted) return;
 				console.error("Error fetching document:", err);
 				setError(err instanceof Error ? err.message : "Failed to fetch document");
 			} finally {
-				if (!cancelled) setIsLoading(false);
+				if (!controller.signal.aborted) setIsLoading(false);
 			}
 		};
 
-		fetchContent();
-		return () => {
-			cancelled = true;
-		};
+		doFetch().catch(() => {});
+		return () => controller.abort();
 	}, [documentId, searchSpaceId]);
 
 	const handleMarkdownChange = useCallback((md: string) => {

surfsense_web/components/markdown-viewer.tsx

@@ -3,6 +3,8 @@ import { createMathPlugin } from "@streamdown/math";
 import { Streamdown, type StreamdownProps } from "streamdown";
 import "katex/dist/katex.min.css";
 import { cn } from "@/lib/utils";
+import Image from 'next/image';
+import { is } from "drizzle-orm";
 
 const code = createCodePlugin({
 	themes: ["nord", "nord"],
@@ -127,16 +129,31 @@ export function MarkdownViewer({ content, className, maxLength }: MarkdownViewer
 			<blockquote className="border-l-4 border-muted pl-4 italic my-2" {...props} />
 		),
 		hr: ({ ...props }) => <hr className="my-4 border-muted" {...props} />,
-		img: ({ src, alt, width: _w, height: _h, ...props }) => (
-			// eslint-disable-next-line @next/next/no-img-element
-			<img
-				className="max-w-full h-auto my-4 rounded"
-				alt={alt || "markdown image"}
-				src={typeof src === "string" ? src : ""}
-				loading="lazy"
-				{...props}
-			/>
-		),
+		img: ({ src, alt, width: _w, height: _h, ...props }) => {
+    	const isDataOrUnknownUrl = typeof src === "string" && (src.startsWith("data:") || !src.startsWith("http"));
+
+    return isDataOrUnknownUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+            className="max-w-full h-auto my-4 rounded"
+            alt={alt || "markdown image"}
+            src={src}
+            loading="lazy"
+            {...props}
+        />
+    ) : (
+        <Image
+            className="max-w-full h-auto my-4 rounded"
+            alt={alt || "markdown image"}
+            src={typeof src === "string" ? src : ""}
+            width={_w || 800}
+            height={_h || 600}
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw"
+            unoptimized={isDataOrUnknownUrl}
+            {...props}
+        />
+    );
+},
 		table: ({ ...props }) => (
 			<div className="overflow-x-auto my-4 rounded-lg border border-border w-full">
 				<table className="w-full divide-y divide-border" {...props} />

surfsense_web/components/onboarding-tour.tsx

@@ -429,6 +429,7 @@ export function OnboardingTour() {
 	const pathname = usePathname();
 	const retryCountRef = useRef(0);
 	const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const startCheckTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 	const maxRetries = 10;
 	// Track previous user ID to detect user changes
 	const previousUserIdRef = useRef<string | null>(null);
@@ -439,8 +440,8 @@ export function OnboardingTour() {
 
 	// Fetch threads data
 	const { data: threadsData } = useQuery({
-		queryKey: ["threads", searchSpaceId, { limit: 1 }],
-		queryFn: () => fetchThreads(Number(searchSpaceId), 1), // Only need to check if any exist
+		queryKey: ["threads", searchSpaceId, { limit: 40 }], // Same key as layout
+		queryFn: () => fetchThreads(Number(searchSpaceId), 40),
 		enabled: !!searchSpaceId,
 	});
 
@@ -460,6 +461,7 @@ export function OnboardingTour() {
 
 	// Find and track target element with retry logic
 	const updateTarget = useCallback(() => {
+		if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
 		if (!currentStep) return;
 
 		const el = document.querySelector(currentStep.target);
@@ -480,11 +482,13 @@ export function OnboardingTour() {
 				}
 			}, 200);
 		}
+	}, [currentStep]);
 
+	useEffect(() => {
 		return () => {
 			if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
 		};
-	}, [currentStep]);
+	}, []);
 
 	// Check if tour should run: localStorage + data validation with user ID tracking
 	useEffect(() => {
@@ -573,15 +577,15 @@ export function OnboardingTour() {
 				setPosition(calculatePosition(connectorEl, TOUR_STEPS[0].placement));
 			} else {
 				// Retry after delay
-				setTimeout(checkAndStartTour, 200);
+				startCheckTimerRef.current = setTimeout(checkAndStartTour, 200);
 			}
 		};
 
 		// Start checking after initial delay
-		const timer = setTimeout(checkAndStartTour, 500);
+		startCheckTimerRef.current = setTimeout(checkAndStartTour, 500);
 		return () => {
 			cancelled = true;
-			clearTimeout(timer);
+			if (startCheckTimerRef.current) clearTimeout(startCheckTimerRef.current);
 		};
 	}, [mounted, user?.id, searchSpaceId, pathname, threadsData, documentTypeCounts, connectors]);
 
@@ -598,11 +602,11 @@ export function OnboardingTour() {
 		};
 
 		window.addEventListener("resize", handleUpdate);
-		window.addEventListener("scroll", handleUpdate, true);
+		window.addEventListener("scroll", handleUpdate, { capture: true, passive: true });
 
 		return () => {
 			window.removeEventListener("resize", handleUpdate);
-			window.removeEventListener("scroll", handleUpdate, true);
+			window.removeEventListener("scroll", handleUpdate, { capture: true });
 		};
 	}, [isActive, targetEl, currentStep?.placement]);
 

surfsense_web/components/report-panel/report-panel.tsx

@@ -123,6 +123,13 @@ export function ReportPanelContent({
 	const [copied, setCopied] = useState(false);
 	const [exporting, setExporting] = useState<string | null>(null);
 	const [saving, setSaving] = useState(false);
+	const copyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+	useEffect(() => {
+		return () => {
+			if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+		};
+	}, []);
 
 	// Editor state — tracks the latest markdown from the Plate editor
 	const [editedMarkdown, setEditedMarkdown] = useState<string | null>(null);
@@ -197,7 +204,8 @@ export function ReportPanelContent({
 		try {
 			await navigator.clipboard.writeText(currentMarkdown);
 			setCopied(true);
-			setTimeout(() => setCopied(false), 2000);
+			if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+			copyTimerRef.current = setTimeout(() => setCopied(false), 2000);
 		} catch (err) {
 			console.error("Failed to copy:", err);
 		}

surfsense_web/components/settings/llm-role-manager.tsx

@@ -6,6 +6,7 @@ import {
 	Bot,
 	CircleCheck,
 	CircleDashed,
+	Eye,
 	FileText,
 	ImageIcon,
 	RefreshCw,
@@ -70,6 +71,15 @@ const ROLE_DESCRIPTIONS = {
 		prefKey: "image_generation_config_id" as const,
 		configType: "image" as const,
 	},
+	vision: {
+		icon: Eye,
+		title: "Vision LLM",
+		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,
+	},
 };
 
 interface LLMRoleManagerProps {
@@ -115,6 +125,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 ?? "",
 	}));
 
 	const [savingRole, setSavingRole] = useState<string | null>(null);
@@ -126,12 +137,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 ?? "",
 			});
 		}
 	}, [
 		preferences?.agent_llm_id,
 		preferences?.document_summary_llm_id,
 		preferences?.image_generation_config_id,
+		preferences?.vision_llm_id,
 	]);
 
 	const handleRoleAssignment = useCallback(

surfsense_web/components/settings/user-settings-dialog.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { useAtom } from "jotai";
-import { Globe, KeyRound, Receipt, Sparkles, User } from "lucide-react";
+import { Globe, KeyRound, Monitor, Receipt, Sparkles, User } from "lucide-react";
 import { useTranslations } from "next-intl";
 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 { ProfileContent } from "@/app/dashboard/[search_space_id]/user-settings/components/ProfileContent";
 import { PromptsContent } from "@/app/dashboard/[search_space_id]/user-settings/components/PromptsContent";
 import { PurchaseHistoryContent } from "@/app/dashboard/[search_space_id]/user-settings/components/PurchaseHistoryContent";
+import { DesktopContent } from "@/app/dashboard/[search_space_id]/user-settings/components/DesktopContent";
 import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { SettingsDialog } from "@/components/settings/settings-dialog";
 
@@ -37,6 +38,9 @@ export function UserSettingsDialog() {
 			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" /> }]
+			: []),
 	];
 
 	return (
@@ -54,6 +58,7 @@ export function UserSettingsDialog() {
 				{state.initialTab === "prompts" && <PromptsContent />}
 				{state.initialTab === "community-prompts" && <CommunityPromptsContent />}
 				{state.initialTab === "purchases" && <PurchaseHistoryContent />}
+				{state.initialTab === "desktop" && <DesktopContent />}
 			</div>
 		</SettingsDialog>
 	);

surfsense_web/components/sources/DocumentUploadTab.tsx

@@ -4,7 +4,7 @@ import { useAtom } from "jotai";
 import { ChevronDown, Dot, File as FileIcon, FolderOpen, Upload, X } from "lucide-react";
 
 import { useTranslations } from "next-intl";
-import { type ChangeEvent, useCallback, useMemo, useRef, useState } from "react";
+import { type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { toast } from "sonner";
 import { uploadDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
@@ -141,6 +141,15 @@ export function DocumentUploadTab({
 	const { mutate: uploadDocuments, isPending: isUploading } = uploadDocumentMutation;
 	const fileInputRef = useRef<HTMLInputElement>(null);
 	const folderInputRef = useRef<HTMLInputElement>(null);
+	const progressIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+	useEffect(() => {
+		return () => {
+			if (progressIntervalRef.current) {
+				clearInterval(progressIntervalRef.current);
+			}
+		};
+	}, []);
 
 	const [selectedFolder, setSelectedFolder] = useState<SelectedFolder | null>(null);
 	const [watchFolder, setWatchFolder] = useState(true);
@@ -329,7 +338,7 @@ export function DocumentUploadTab({
 		setUploadProgress(0);
 		trackDocumentUploadStarted(Number(searchSpaceId), files.length, totalFileSize);
 
-		const progressInterval = setInterval(() => {
+		progressIntervalRef.current = setInterval(() => {
 			setUploadProgress((prev) => (prev >= 90 ? prev : prev + Math.random() * 10));
 		}, 200);
 
@@ -342,14 +351,14 @@ export function DocumentUploadTab({
 			},
 			{
 				onSuccess: () => {
-					clearInterval(progressInterval);
+					if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
 					setUploadProgress(100);
 					trackDocumentUploadSuccess(Number(searchSpaceId), files.length);
 					toast(t("upload_initiated"), { description: t("upload_initiated_desc") });
 					onSuccess?.();
 				},
 				onError: (error: unknown) => {
-					clearInterval(progressInterval);
+					if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
 					setUploadProgress(0);
 					const message = error instanceof Error ? error.message : "Upload failed";
 					trackDocumentUploadFailure(Number(searchSpaceId), message);

surfsense_web/components/tool-ui/citation/citation-list.tsx

@@ -7,6 +7,8 @@ import { openSafeNavigationHref, resolveSafeNavigationHref } from "../shared/med
 import { cn, Popover, PopoverContent, PopoverTrigger } from "./_adapter";
 import { Citation } from "./citation";
 import type { CitationType, CitationVariant, SerializableCitation } from "./schema";
+import NextImage from 'next/image';
+
 
 const TYPE_ICONS: Record<CitationType, LucideIcon> = {
 	webpage: Globe,
@@ -253,18 +255,18 @@ function OverflowItem({ citation, onClick }: OverflowItemProps) {
 			className="group hover:bg-muted focus-visible:bg-muted flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left transition-colors focus-visible:outline-none"
 		>
 			{citation.favicon ? (
-				// biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain — next/image requires remotePatterns config
-				<img
+				<NextImage
 					src={citation.favicon}
 					alt=""
 					aria-hidden="true"
-					width={16}
-					height={16}
-					className="bg-muted size-4 shrink-0 rounded object-cover"
+					width={18}
+					height={18}
+					className="size-4.5 rounded-full object-cover"
+					unoptimized={true}
 				/>
-			) : (
-				<TypeIcon className="text-muted-foreground size-4 shrink-0" aria-hidden="true" />
-			)}
+				) : (
+				<TypeIcon className="text-muted-foreground size-3" aria-hidden="true" />
+				)}
 			<div className="min-w-0 flex-1">
 				<p className="group-hover:decoration-foreground/30 truncate text-sm font-medium group-hover:underline group-hover:underline-offset-2">
 					{citation.title}
@@ -339,18 +341,18 @@ function StackedCitations({ id, citations, className, onNavigate }: StackedCitat
 										style={{ zIndex: maxIcons - index }}
 									>
 										{citation.favicon ? (
-											// biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain — next/image requires remotePatterns config
-											<img
-												src={citation.favicon}
-												alt=""
-												aria-hidden="true"
-												width={18}
-												height={18}
-												className="size-4.5 rounded-full object-cover"
-											/>
-										) : (
-											<TypeIcon className="text-muted-foreground size-3" aria-hidden="true" />
-										)}
+										<NextImage
+											src={citation.favicon}
+											alt=""
+											aria-hidden="true"
+											width={18}
+											height={18}
+											className="size-4.5 rounded-full object-cover"
+											unoptimized={true}
+										/>
+									) : (
+										<TypeIcon className="text-muted-foreground size-3" aria-hidden="true" />
+									)}	
 									</div>
 								);
 							})}

surfsense_web/components/tool-ui/citation/citation.tsx

@@ -6,6 +6,7 @@ import * as React from "react";
 import { openSafeNavigationHref, sanitizeHref } from "../shared/media";
 import { cn, Popover, PopoverContent, PopoverTrigger } from "./_adapter";
 import type { CitationType, CitationVariant, SerializableCitation } from "./schema";
+import NextImage from 'next/image';
 
 const FALLBACK_LOCALE = "en-US";
 
@@ -114,18 +115,18 @@ export function Citation(props: CitationProps) {
 	};
 
 	const iconElement = favicon ? (
-		// biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain — next/image requires remotePatterns config
-		<img
-			src={favicon}
-			alt=""
-			aria-hidden="true"
-			width={14}
-			height={14}
-			className="bg-muted size-3.5 shrink-0 rounded object-cover"
-		/>
-	) : (
-		<TypeIcon className="size-3.5 shrink-0 opacity-60" aria-hidden="true" />
-	);
+    <NextImage
+        src={favicon}
+        alt=""
+        aria-hidden="true"
+        width={16}
+        height={16}
+        className="bg-muted size-3.5 shrink-0 rounded object-cover"
+        unoptimized={true}
+    />
+) : (
+    <TypeIcon className="size-3.5 shrink-0 opacity-60" aria-hidden="true" />
+);
 
 	const { open, handleMouseEnter, handleMouseLeave } = useHoverPopover();
 

surfsense_web/components/tool-ui/image/index.tsx

@@ -307,6 +307,7 @@ export function Image({
 							src={src}
 							alt={alt}
 							fill
+							sizes="(max-width: 512px) 100vw, 512px"
 							className={cn(
 								"transition-transform duration-300",
 								fit === "cover" ? "object-cover" : "object-contain",

surfsense_web/components/ui/animated-tabs.tsx

@@ -7,6 +7,7 @@ import React, {
 	useCallback,
 	useContext,
 	useEffect,
+	useMemo,
 	useRef,
 	useState,
 } from "react";
@@ -201,9 +202,9 @@ const Tabs = forwardRef<
 		},
 		[onValueChange, value]
 	);
-
+	const contextValue = useMemo(() => ({ activeValue, onValueChange: handleValueChange }), [activeValue, handleValueChange]);
 	return (
-		<TabsContext.Provider value={{ activeValue, onValueChange: handleValueChange }}>
+		<TabsContext.Provider value={contextValue}>
 			<div ref={ref} className={cn("tabs-container", className)} {...props}>
 				{children}
 			</div>

surfsense_web/components/ui/toggle-group.tsx

@@ -5,6 +5,7 @@ import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { toggleVariants } from "@/components/ui/toggle";
 import { cn } from "@/lib/utils";
+import { useMemo } from "react";
 
 const ToggleGroupContext = React.createContext<
 	VariantProps<typeof toggleVariants> & {
@@ -27,6 +28,8 @@ function ToggleGroup({
 	VariantProps<typeof toggleVariants> & {
 		spacing?: number;
 	}) {
+	const contextValue = useMemo(() => ({variant, size, spacing }), [variant, size, spacing]);
+	
 	return (
 		<ToggleGroupPrimitive.Root
 			data-slot="toggle-group"
@@ -40,7 +43,7 @@ function ToggleGroup({
 			)}
 			{...props}
 		>
-			<ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+			<ToggleGroupContext.Provider value={contextValue}>
 				{children}
 			</ToggleGroupContext.Provider>
 		</ToggleGroupPrimitive.Root>

surfsense_web/contexts/LocaleContext.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import type React from "react";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import enMessages from "../messages/en.json";
 import esMessages from "../messages/es.json";
 import hiMessages from "../messages/hi.json";
 import ptMessages from "../messages/pt.json";
 import zhMessages from "../messages/zh.json";
+import { set } from "zod";
 
 type Locale = "en" | "es" | "pt" | "hi" | "zh";
 
@@ -49,14 +50,14 @@ export function LocaleProvider({ children }: { children: React.ReactNode }) {
 	}, []);
 
 	// Update locale and persist to localStorage
-	const setLocale = (newLocale: Locale) => {
+	const setLocale = useCallback((newLocale: Locale) => {
 		setLocaleState(newLocale);
 		if (typeof window !== "undefined") {
 			localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);
 			// Update HTML lang attribute
 			document.documentElement.lang = newLocale;
 		}
-	};
+	}, []);
 
 	// Set HTML lang attribute when locale changes
 	useEffect(() => {
@@ -65,8 +66,10 @@ export function LocaleProvider({ children }: { children: React.ReactNode }) {
 		}
 	}, [locale, mounted]);
 
+	const contextValue = useMemo(() => ({ locale, messages, setLocale }), [locale, messages, setLocale]);
+
 	return (
-		<LocaleContext.Provider value={{ locale, messages, setLocale }}>
+		<LocaleContext.Provider value={contextValue}>
 			{children}
 		</LocaleContext.Provider>
 	);

surfsense_web/contracts/types/new-llm-config.types.ts

@@ -264,9 +264,11 @@ export const llmPreferences = z.object({
 	agent_llm_id: z.union([z.number(), z.null()]).optional(),
 	document_summary_llm_id: z.union([z.number(), z.null()]).optional(),
 	image_generation_config_id: z.union([z.number(), z.null()]).optional(),
+	vision_llm_id: z.union([z.number(), z.null()]).optional(),
 	agent_llm: z.union([z.record(z.string(), z.unknown()), z.null()]).optional(),
 	document_summary_llm: z.union([z.record(z.string(), z.unknown()), z.null()]).optional(),
 	image_generation_config: z.union([z.record(z.string(), z.unknown()), z.null()]).optional(),
+	vision_llm: z.union([z.record(z.string(), z.unknown()), z.null()]).optional(),
 });
 
 /**
@@ -287,6 +289,7 @@ export const updateLLMPreferencesRequest = z.object({
 		agent_llm_id: true,
 		document_summary_llm_id: true,
 		image_generation_config_id: true,
+		vision_llm_id: true,
 	}),
 });
 

surfsense_web/hooks/use-api-key.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { getBearerToken } from "@/lib/auth-utils";
 import { copyToClipboard as copyToClipboardUtil } from "@/lib/utils";
@@ -14,6 +14,13 @@ export function useApiKey(): UseApiKeyReturn {
 	const [apiKey, setApiKey] = useState<string | null>(null);
 	const [copied, setCopied] = useState(false);
 	const [isLoading, setIsLoading] = useState(true);
+	const copyTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+	useEffect(() => {
+		return () => {
+			if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+		};
+	}, []);
 
 	useEffect(() => {
 		// Load API key from localStorage
@@ -41,7 +48,8 @@ export function useApiKey(): UseApiKeyReturn {
 		if (success) {
 			setCopied(true);
 			toast.success("API key copied to clipboard");
-			setTimeout(() => {
+			if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+			copyTimerRef.current = setTimeout(() => {
 				setCopied(false);
 			}, 2000);
 		} else {

surfsense_web/mdx-components.tsx

@@ -15,8 +15,9 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
 		img: ({ className, alt, ...props }: React.ComponentProps<"img">) => (
 			<Image
 				{...(props as ImageProps)}
-				className={cn("rounded-md border", className)}
 				alt={alt ?? ""}
+				sizes="(max-width: 768px) 100vw, 896px"
+				className={cn("rounded-md border", className)}
 			/>
 		),
 		Video: ({ className, ...props }: React.ComponentProps<"video">) => (

surfsense_web/types/window.d.ts

@@ -48,6 +48,20 @@ interface ElectronAPI {
 	setQuickAskMode: (mode: string) => Promise<void>;
 	getQuickAskMode: () => Promise<string>;
 	replaceText: (text: string) => Promise<void>;
+	// Permissions
+	getPermissionsStatus: () => Promise<{
+		accessibility: 'authorized' | 'denied' | 'not determined' | 'restricted' | 'limited';
+		screenRecording: 'authorized' | 'denied' | 'not determined' | 'restricted' | 'limited';
+	}>;
+	requestAccessibility: () => Promise<void>;
+	requestScreenRecording: () => Promise<void>;
+	restartApp: () => Promise<void>;
+	// Autocomplete
+	onAutocompleteContext: (callback: (data: { screenshot: string; searchSpaceId?: string; appName?: string; windowTitle?: string }) => void) => () => void;
+	acceptSuggestion: (text: string) => Promise<void>;
+	dismissSuggestion: () => Promise<void>;
+	setAutocompleteEnabled: (enabled: boolean) => Promise<void>;
+	getAutocompleteEnabled: () => Promise<boolean>;
 	// Folder sync
 	selectFolder: () => Promise<string | null>;
 	addWatchedFolder: (config: WatchedFolderConfig) => Promise<WatchedFolderConfig[]>;