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