Merge remote-tracking branch 'upstream/dev' into electon-desktop

2026-05-05 05:42:39 +02:00 · 2026-03-29 03:10:51 +02:00 · 2026-03-29 03:10:51 +02:00 · b8a1d1f594
commit b8a1d1f594
parent cfddfa54c6 cae4262e35
165 changed files with 17921 additions and 8767 deletions
--- a/surfsense_web/components/Logo.tsx
+++ b/surfsense_web/components/Logo.tsx
@ -1,5 +1,3 @@
-"use client";
-
 import Image from "next/image";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
--- a/surfsense_web/components/UserDropdown.tsx
+++ b/surfsense_web/components/UserDropdown.tsx
@ -1,7 +1,7 @@
 "use client";

 import { BadgeCheck, LogOut } from "lucide-react";
-import { useRouter } from "next/navigation";
+import Link from "next/link";
 import { useState } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
@ -27,7 +27,6 @@ export function UserDropdown({
 		avatar: string;
 	};
 }) {
-	const router = useRouter();
 	const [isLoggingOut, setIsLoggingOut] = useState(false);

 	const handleLogout = async () => {
@ -75,12 +74,11 @@ export function UserDropdown({
 				</DropdownMenuLabel>
 				<DropdownMenuSeparator />
 				<DropdownMenuGroup>
-					<DropdownMenuItem
-						onClick={() => router.push(`/dashboard/api-key`)}
-						className="text-xs md:text-sm"
-					>
-						<BadgeCheck className="mr-2 h-3.5 w-3.5 md:h-4 md:w-4" />
-						API Key
+					<DropdownMenuItem asChild className="text-xs md:text-sm">
+						<Link href="/dashboard/api-key">
+							<BadgeCheck className="mr-2 h-3.5 w-3.5 md:h-4 md:w-4" />
+							API Key
+						</Link>
 					</DropdownMenuItem>
 				</DropdownMenuGroup>
 				<DropdownMenuSeparator />
--- a/surfsense_web/components/announcements/AnnouncementToastProvider.tsx
+++ b/surfsense_web/components/announcements/AnnouncementToastProvider.tsx
@ -34,7 +34,7 @@ function showAnnouncementToast(announcement: Announcement) {
 					label: announcement.link.label,
 					onClick: () => {
 						if (announcement.link?.url.startsWith("http")) {
-							window.open(announcement.link.url, "_blank");
+							window.open(announcement.link.url, "_blank", "noopener,noreferrer");
 						} else if (announcement.link?.url) {
 							window.location.href = announcement.link.url;
 						}
--- a/surfsense_web/components/announcements/AnnouncementsEmptyState.tsx
+++ b/surfsense_web/components/announcements/AnnouncementsEmptyState.tsx
@ -1,5 +1,3 @@
-"use client";
-
 import { BellOff } from "lucide-react";

 export function AnnouncementsEmptyState() {
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@ -4,7 +4,6 @@ import { useAtomValue, useSetAtom } from "jotai";
 import { AlertTriangle, Cable, Settings } from "lucide-react";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
-import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
 import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
 import {
 	globalNewLLMConfigsAtom,
@ -22,6 +21,7 @@ import { Tabs, TabsContent } from "@/components/ui/tabs";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { useConnectorsSync } from "@/hooks/use-connectors-sync";
 import { PICKER_CLOSE_EVENT, PICKER_OPEN_EVENT } from "@/hooks/use-google-picker";
+import { useZeroDocumentTypeCounts } from "@/hooks/use-zero-document-type-counts";
 import { cn } from "@/lib/utils";
 import { ConnectorDialogHeader } from "./connector-popup/components/connector-dialog-header";
 import { ConnectorConnectView } from "./connector-popup/connector-configs/views/connector-connect-view";
@ -72,9 +72,9 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector

 		const llmConfigLoading = preferencesLoading || globalConfigsLoading;

-		// Fetch document type counts via the lightweight /type-counts endpoint (cached 10 min)
-		const { data: documentTypeCounts, isFetching: documentTypesLoading } =
-			useAtomValue(documentTypeCountsAtom);
+		// Real-time document type counts via Zero (updates instantly as docs are indexed)
+		const documentTypeCounts = useZeroDocumentTypeCounts(searchSpaceId);
+		const documentTypesLoading = documentTypeCounts === undefined;

 		// Read status inbox items from shared atom (populated by LayoutDataProvider)
 		// instead of creating a duplicate useInbox("status") hook.
--- a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
@ -867,6 +867,9 @@ export const useConnectorDialog = () => {

 				setIsOpen(false);
 				setIsFromOAuth(false);
+				setIndexingConfig(null);
+				setIndexingConnector(null);
+				setIndexingConnectorConfig(null);

 				refreshConnectors();
 				queryClient.invalidateQueries({
@ -898,6 +901,9 @@ export const useConnectorDialog = () => {
 	const handleSkipIndexing = useCallback(() => {
 		setIsOpen(false);
 		setIsFromOAuth(false);
+		setIndexingConfig(null);
+		setIndexingConnector(null);
+		setIndexingConnectorConfig(null);
 	}, [setIsOpen]);

 	// Handle starting edit mode
--- a/surfsense_web/components/assistant-ui/inline-citation.tsx
+++ b/surfsense_web/components/assistant-ui/inline-citation.tsx
@ -28,16 +28,14 @@ export const InlineCitation: FC<InlineCitationProps> = ({ chunkId, isDocsChunk =
 			url=""
 			isDocsChunk={isDocsChunk}
 		>
-			<span
+			<button
+				type="button"
 				onClick={() => setIsOpen(true)}
-				onKeyDown={(e) => e.key === "Enter" && setIsOpen(true)}
 				className="text-[10px] font-bold bg-primary/80 hover:bg-primary text-primary-foreground rounded-full min-w-4 h-4 px-1 inline-flex items-center justify-center align-super cursor-pointer transition-colors ml-0.5"
 				title={`View source chunk #${chunkId}`}
-				role="button"
-				tabIndex={0}
 			>
 				{chunkId}
-			</span>
+			</button>
 		</SourceDetailPanel>
 	);
 };
--- a/surfsense_web/components/assistant-ui/markdown-code-block.tsx
+++ b/surfsense_web/components/assistant-ui/markdown-code-block.tsx
@ -0,0 +1,104 @@
+"use client";
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+import type { CSSProperties } from "react";
+import { memo, useEffect, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { materialDark, materialLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn, copyToClipboard } from "@/lib/utils";
+
+type MarkdownCodeBlockProps = {
+	className?: string;
+	language: string;
+	codeText: string;
+	isDarkMode: boolean;
+};
+
+function stripThemeBackgrounds(
+	theme: Record<string, CSSProperties>
+): Record<string, CSSProperties> {
+	const cleaned: Record<string, CSSProperties> = {};
+	for (const key of Object.keys(theme)) {
+		const { background, backgroundColor, ...rest } = theme[key] as CSSProperties & {
+			background?: string;
+			backgroundColor?: string;
+		};
+		cleaned[key] = rest;
+	}
+	return cleaned;
+}
+
+const cleanMaterialDark = stripThemeBackgrounds(materialDark);
+const cleanMaterialLight = stripThemeBackgrounds(materialLight);
+
+function MarkdownCodeBlockComponent({
+	className,
+	language,
+	codeText,
+	isDarkMode,
+}: MarkdownCodeBlockProps) {
+	const [hasCopied, setHasCopied] = useState(false);
+
+	useEffect(() => {
+		if (!hasCopied) return;
+		const timer = setTimeout(() => setHasCopied(false), 2000);
+		return () => clearTimeout(timer);
+	}, [hasCopied]);
+
+	return (
+		<div className="mt-4 overflow-hidden rounded-2xl" style={{ background: "var(--syntax-bg)" }}>
+			<div className="flex items-center justify-between gap-4 px-4 py-2 font-semibold text-muted-foreground text-sm">
+				<span className="lowercase text-xs">{language}</span>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-8 w-8 p-0"
+					type="button"
+					onClick={async () => {
+						const ok = await copyToClipboard(codeText);
+						if (ok) setHasCopied(true);
+					}}
+					aria-label={hasCopied ? "Copied code" : "Copy code"}
+				>
+					<span className="sr-only">Copy</span>
+					{hasCopied ? <CheckIcon className="!size-3" /> : <CopyIcon className="!size-3" />}
+				</Button>
+			</div>
+
+			<SyntaxHighlighter
+				style={isDarkMode ? cleanMaterialDark : cleanMaterialLight}
+				language={language}
+				PreTag="div"
+				customStyle={{ margin: 0, background: "transparent" }}
+				className={cn(className)}
+			>
+				{codeText}
+			</SyntaxHighlighter>
+		</div>
+	);
+}
+
+export const MarkdownCodeBlock = memo(MarkdownCodeBlockComponent);
+
+export function MarkdownCodeBlockSkeleton() {
+	return (
+		<div
+			className="mt-4 overflow-hidden rounded-2xl border"
+			style={{ background: "var(--syntax-bg)" }}
+		>
+			<div className="flex items-center justify-between gap-4 border-b px-4 py-2">
+				<Skeleton className="h-3 w-16" />
+				<Skeleton className="h-8 w-8 rounded-md" />
+			</div>
+			<div className="space-y-2 p-4">
+				<Skeleton className="h-4 w-11/12" />
+				<Skeleton className="h-4 w-10/12" />
+				<Skeleton className="h-4 w-8/12" />
+				<Skeleton className="h-4 w-9/12" />
+			</div>
+		</div>
+	);
+}
--- a/surfsense_web/components/assistant-ui/markdown-text.tsx
+++ b/surfsense_web/components/assistant-ui/markdown-text.tsx
@ -7,19 +7,17 @@ import {
 	unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
 	useIsMarkdownCodeBlock,
 } from "@assistant-ui/react-markdown";
-import { CheckIcon, CopyIcon, ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon } from "lucide-react";
+import dynamic from "next/dynamic";
 import { useTheme } from "next-themes";
-import type { CSSProperties } from "react";
-import { type FC, memo, type ReactNode, useState } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { materialDark, materialLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { memo, type ReactNode } from "react";
 import rehypeKatex from "rehype-katex";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import { ImagePreview, ImageRoot, ImageZoom } from "@/components/assistant-ui/image";
 import "katex/dist/katex.min.css";
 import { InlineCitation, UrlCitation } from "@/components/assistant-ui/inline-citation";
-import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Table,
 	TableBody,
@ -30,22 +28,32 @@ import {
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";

-function stripThemeBackgrounds(
-	theme: Record<string, CSSProperties>
-): Record<string, CSSProperties> {
-	const cleaned: Record<string, CSSProperties> = {};
-	for (const key of Object.keys(theme)) {
-		const { background, backgroundColor, ...rest } = theme[key] as CSSProperties & {
-			background?: string;
-			backgroundColor?: string;
-		};
-		cleaned[key] = rest;
-	}
-	return cleaned;
+function MarkdownCodeBlockSkeleton() {
+	return (
+		<div
+			className="mt-4 overflow-hidden rounded-2xl border"
+			style={{ background: "var(--syntax-bg)" }}
+		>
+			<div className="flex items-center justify-between gap-4 border-b px-4 py-2">
+				<Skeleton className="h-3 w-16" />
+				<Skeleton className="h-8 w-8 rounded-md" />
+			</div>
+			<div className="space-y-2 p-4">
+				<Skeleton className="h-4 w-11/12" />
+				<Skeleton className="h-4 w-10/12" />
+				<Skeleton className="h-4 w-8/12" />
+				<Skeleton className="h-4 w-9/12" />
+			</div>
+		</div>
+	);
 }

-const cleanMaterialDark = stripThemeBackgrounds(materialDark);
-const cleanMaterialLight = stripThemeBackgrounds(materialLight);
+const LazyMarkdownCodeBlock = dynamic(
+	() => import("./markdown-code-block").then((mod) => mod.MarkdownCodeBlock),
+	{
+		loading: () => <MarkdownCodeBlockSkeleton />,
+	}
+);

 // Storage for URL citations replaced during preprocess to avoid GFM autolink interference.
 // Populated in preprocessMarkdown, consumed in parseTextWithCitations.
@ -178,39 +186,6 @@ const MarkdownTextImpl = () => {

 export const MarkdownText = memo(MarkdownTextImpl);

-const InlineCodeHeader: FC<{ language: string; code: string }> = ({ language, code }) => {
-	const { isCopied, copyToClipboard } = useCopyToClipboard();
-	const onCopy = () => {
-		if (!code || isCopied) return;
-		copyToClipboard(code);
-	};
-
-	return (
-		<div className="flex items-center justify-between gap-4 px-4 py-2 font-semibold text-muted-foreground text-sm">
-			<span className="lowercase text-xs">{language}</span>
-			<TooltipIconButton tooltip="Copy" onClick={onCopy}>
-				{!isCopied && <CopyIcon />}
-				{isCopied && <CheckIcon />}
-			</TooltipIconButton>
-		</div>
-	);
-};
-
-const useCopyToClipboard = ({ copiedDuration = 3000 }: { copiedDuration?: number } = {}) => {
-	const [isCopied, setIsCopied] = useState<boolean>(false);
-
-	const copyToClipboard = (value: string) => {
-		if (!value) return;
-
-		navigator.clipboard.writeText(value).then(() => {
-			setIsCopied(true);
-			setTimeout(() => setIsCopied(false), copiedDuration);
-		});
-	};
-
-	return { isCopied, copyToClipboard };
-};
-
 /**
 * Helper to process children and replace citation patterns with components
 */
@ -421,24 +396,20 @@ const defaultComponents = memoizeMarkdownComponents({
 				<code
 					className={cn("aui-md-inline-code rounded border bg-muted font-semibold", className)}
 					{...props}
-				/>
+				>
+					{children}
+				</code>
 			);
 		}
 		const language = /language-(\w+)/.exec(className || "")?.[1] ?? "text";
 		const codeString = String(children).replace(/\n$/, "");
-		const syntaxStyle = resolvedTheme === "dark" ? cleanMaterialDark : cleanMaterialLight;
 		return (
-			<div className="mt-4 overflow-hidden rounded-2xl" style={{ background: "var(--syntax-bg)" }}>
-				<InlineCodeHeader language={language} code={codeString} />
-				<SyntaxHighlighter
-					style={syntaxStyle}
-					language={language}
-					PreTag="div"
-					customStyle={{ margin: 0, background: "transparent" }}
-				>
-					{codeString}
-				</SyntaxHighlighter>
-			</div>
+			<LazyMarkdownCodeBlock
+				className={className}
+				language={language}
+				codeText={codeString}
+				isDarkMode={resolvedTheme === "dark"}
+			/>
 		);
 	},
 	strong: ({ className, children, ...props }) => (
--- a/surfsense_web/components/assistant-ui/thread-list.tsx
+++ b/surfsense_web/components/assistant-ui/thread-list.tsx
@ -225,17 +225,13 @@ function ThreadListItemComponent({
 	onDelete,
 }: ThreadListItemComponentProps) {
 	return (
-		<div
+		<button
+			type="button"
 			className={cn(
-				"group flex items-center gap-2 rounded-lg px-3 py-2 transition-colors cursor-pointer",
+				"group flex w-full items-center gap-2 rounded-lg px-3 py-2 transition-colors cursor-pointer text-left",
 				isActive ? "bg-accent text-accent-foreground" : "hover:bg-muted/50"
 			)}
 			onClick={onClick}
-			onKeyDown={(e) => {
-				if (e.key === "Enter" || e.key === " ") onClick();
-			}}
-			role="button"
-			tabIndex={0}
 		>
 			<MessageSquareIcon className="size-4 shrink-0 text-muted-foreground" />
 			<div className="flex-1 min-w-0">
@ -274,7 +270,7 @@ function ThreadListItemComponent({
 					</DropdownMenuItem>
 				</DropdownMenuContent>
 			</DropdownMenu>
-		</div>
+		</button>
 	);
 }

--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@ -113,7 +113,7 @@ const ThreadContent: FC = () => {
 		>
 			<ThreadPrimitive.Viewport
 				turnAnchor="top"
-				className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 pt-4"
+				className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-scroll px-4 pt-4"
 			>
 				<AuiIf condition={({ thread }) => thread.isEmpty}>
 					<ThreadWelcome />
@ -1119,6 +1119,8 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 				{hasWebSearchTool && (
 					<button
 						type="button"
+						aria-label={isWebSearchEnabled ? "Disable web search" : "Enable web search"}
+						aria-pressed={isWebSearchEnabled}
 						onClick={() => toggleTool("web_search")}
 						className={cn(
 							"rounded-full transition-all flex items-center gap-1 px-2 py-1 border h-8 select-none",
@ -1237,7 +1239,7 @@ interface ToolGroup {
 const TOOL_GROUPS: ToolGroup[] = [
 	{
 		label: "Research",
-		tools: ["search_knowledge_base", "search_surfsense_docs", "scrape_webpage"],
+		tools: ["search_surfsense_docs", "scrape_webpage"],
 	},
 	{
 		label: "Generate",
--- a/surfsense_web/components/auth/sign-in-button.tsx
+++ b/surfsense_web/components/auth/sign-in-button.tsx
@ -8,7 +8,14 @@ import { cn } from "@/lib/utils";

 // Official Google "G" logo with brand colors
 const GoogleLogo = ({ className }: { className?: string }) => (
-	<svg className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<svg
+		className={className}
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-label="Google logo"
+	>
+		<title>Google logo</title>
 		<path
 			d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
 			fill="#4285F4"
--- a/surfsense_web/components/contact/contact-form.tsx
+++ b/surfsense_web/components/contact/contact-form.tsx
@ -185,7 +185,20 @@ export const Grid = ({ pattern, size }: { pattern?: [number, number][]; size?: n
 	);
 };

-export function GridPattern({ width, height, x, y, squares, ...props }: React.ComponentProps<"svg"> & { width: number; height: number; x: string | number; y: string | number; squares?: [number, number][] }) {
+export function GridPattern({
+	width,
+	height,
+	x,
+	y,
+	squares,
+	...props
+}: React.ComponentProps<"svg"> & {
+	width: number;
+	height: number;
+	x: string | number;
+	y: string | number;
+	squares?: [number, number][];
+}) {
 	const patternId = useId();

 	return (
--- a/surfsense_web/components/documents/CreateFolderDialog.tsx
+++ b/surfsense_web/components/documents/CreateFolderDialog.tsx
@ -0,0 +1,104 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+interface CreateFolderDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	parentFolderName?: string | null;
+	onConfirm: (name: string) => void;
+}
+
+export function CreateFolderDialog({
+	open,
+	onOpenChange,
+	parentFolderName,
+	onConfirm,
+}: CreateFolderDialogProps) {
+	const [name, setName] = useState("");
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		if (open) {
+			setName("");
+			setTimeout(() => inputRef.current?.focus(), 0);
+		}
+	}, [open]);
+
+	const handleSubmit = useCallback(
+		(e?: React.FormEvent) => {
+			e?.preventDefault();
+			const trimmed = name.trim();
+			if (!trimmed) return;
+			onConfirm(trimmed);
+			onOpenChange(false);
+		},
+		[name, onConfirm, onOpenChange]
+	);
+
+	const isSubfolder = !!parentFolderName;
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
+				<DialogHeader className="space-y-2 pb-2">
+					<div className="flex items-center gap-2 sm:gap-3">
+						<div className="flex-1 min-w-0">
+							<DialogTitle className="text-base sm:text-lg">
+								{isSubfolder ? "New subfolder" : "New folder"}
+							</DialogTitle>
+							<DialogDescription className="text-xs sm:text-sm mt-0.5">
+								{isSubfolder
+									? `Create a new folder inside "${parentFolderName}".`
+									: "Create a new folder at the root level."}
+							</DialogDescription>
+						</div>
+					</div>
+				</DialogHeader>
+
+				<form onSubmit={handleSubmit} className="flex flex-col gap-3 sm:gap-4">
+					<div className="flex flex-col gap-2">
+						<Label htmlFor="folder-name" className="text-sm">
+							Folder name
+						</Label>
+						<Input
+							ref={inputRef}
+							id="folder-name"
+							placeholder="e.g. Research, Notes, Archive…"
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+							maxLength={255}
+							autoComplete="off"
+							className="text-sm h-9 sm:h-10"
+						/>
+					</div>
+
+					<DialogFooter className="flex-row justify-end gap-2 pt-2 sm:pt-3">
+						<Button
+							type="button"
+							variant="secondary"
+							onClick={() => onOpenChange(false)}
+							className="h-8 sm:h-9 text-xs sm:text-sm"
+						>
+							Cancel
+						</Button>
+						<Button type="submit" disabled={!name.trim()} className="h-8 sm:h-9 text-xs sm:text-sm">
+							Create
+						</Button>
+					</DialogFooter>
+				</form>
+			</DialogContent>
+		</Dialog>
+	);
+}
--- a/surfsense_web/components/documents/DocumentNode.tsx
+++ b/surfsense_web/components/documents/DocumentNode.tsx
@ -0,0 +1,295 @@
+"use client";
+
+import {
+	AlertCircle,
+	Clock,
+	Download,
+	Eye,
+	MoreHorizontal,
+	Move,
+	PenLine,
+	Trash2,
+} from "lucide-react";
+import React, { useCallback, useRef, useState } from "react";
+import { useDrag } from "react-dnd";
+import { getDocumentTypeIcon } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
+import { ExportContextItems, ExportDropdownItems } from "@/components/shared/ExportMenuItems";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuSub,
+	ContextMenuSubContent,
+	ContextMenuSubTrigger,
+	ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Spinner } from "@/components/ui/spinner";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import type { DocumentTypeEnum } from "@/contracts/types/document.types";
+import { cn } from "@/lib/utils";
+import { DND_TYPES } from "./FolderNode";
+
+export interface DocumentNodeDoc {
+	id: number;
+	title: string;
+	document_type: string;
+	folderId: number | null;
+	status?: { state: string; reason?: string | null };
+}
+
+interface DocumentNodeProps {
+	doc: DocumentNodeDoc;
+	depth: number;
+	isMentioned: boolean;
+	onToggleChatMention: (doc: DocumentNodeDoc, isMentioned: boolean) => void;
+	onPreview: (doc: DocumentNodeDoc) => void;
+	onEdit: (doc: DocumentNodeDoc) => void;
+	onDelete: (doc: DocumentNodeDoc) => void;
+	onMove: (doc: DocumentNodeDoc) => void;
+	onExport?: (doc: DocumentNodeDoc, format: string) => void;
+	contextMenuOpen?: boolean;
+	onContextMenuOpenChange?: (open: boolean) => void;
+}
+
+export const DocumentNode = React.memo(function DocumentNode({
+	doc,
+	depth,
+	isMentioned,
+	onToggleChatMention,
+	onPreview,
+	onEdit,
+	onDelete,
+	onMove,
+	onExport,
+	contextMenuOpen,
+	onContextMenuOpenChange,
+}: DocumentNodeProps) {
+	const statusState = doc.status?.state ?? "ready";
+	const isSelectable = statusState !== "pending" && statusState !== "processing";
+	const isEditable =
+		doc.document_type === "NOTE" && statusState !== "pending" && statusState !== "processing";
+
+	const handleCheckChange = useCallback(() => {
+		if (isSelectable) {
+			onToggleChatMention(doc, isMentioned);
+		}
+	}, [doc, isMentioned, isSelectable, onToggleChatMention]);
+
+	const [{ isDragging }, drag] = useDrag(
+		() => ({
+			type: DND_TYPES.DOCUMENT,
+			item: { id: doc.id },
+			collect: (monitor) => ({ isDragging: monitor.isDragging() }),
+		}),
+		[doc.id]
+	);
+
+	const isProcessing = statusState === "pending" || statusState === "processing";
+	const [dropdownOpen, setDropdownOpen] = useState(false);
+	const [exporting, setExporting] = useState<string | null>(null);
+	const rowRef = useRef<HTMLDivElement>(null);
+
+	const handleExport = useCallback(
+		(format: string) => {
+			if (!onExport) return;
+			setExporting(format);
+			onExport(doc, format);
+			setTimeout(() => setExporting(null), 2000);
+		},
+		[doc, onExport]
+	);
+
+	const attachRef = useCallback(
+		(node: HTMLDivElement | null) => {
+			(rowRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+			drag(node);
+		},
+		[drag]
+	);
+
+	return (
+		<ContextMenu onOpenChange={onContextMenuOpenChange}>
+			<ContextMenuTrigger asChild>
+				{/* biome-ignore lint/a11y/useSemanticElements: contains nested interactive children (Checkbox) that render as <button>, making a semantic <button> wrapper invalid */}
+				<div
+					role="button"
+					tabIndex={0}
+					ref={attachRef}
+					className={cn(
+						"group flex h-8 w-full items-center gap-2.5 rounded-md px-1 text-sm hover:bg-accent/50 cursor-pointer select-none text-left",
+						isMentioned && "bg-accent/30",
+						isDragging && "opacity-40"
+					)}
+					style={{ paddingLeft: `${depth * 16 + 4}px` }}
+					onClick={handleCheckChange}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							handleCheckChange();
+						}
+					}}
+				>
+					{(() => {
+						if (statusState === "pending") {
+							return (
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+											<Clock className="h-3.5 w-3.5 text-muted-foreground/60" />
+										</span>
+									</TooltipTrigger>
+									<TooltipContent side="top">Pending - waiting to be synced</TooltipContent>
+								</Tooltip>
+							);
+						}
+						if (statusState === "processing") {
+							return (
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+											<Spinner size="xs" className="text-primary" />
+										</span>
+									</TooltipTrigger>
+									<TooltipContent side="top">Syncing</TooltipContent>
+								</Tooltip>
+							);
+						}
+						if (statusState === "failed") {
+							return (
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+											<AlertCircle className="h-3.5 w-3.5 text-destructive" />
+										</span>
+									</TooltipTrigger>
+									<TooltipContent side="top" className="max-w-xs">
+										{doc.status?.reason || "Processing failed"}
+									</TooltipContent>
+								</Tooltip>
+							);
+						}
+						return (
+							<Checkbox
+								checked={isMentioned}
+								onCheckedChange={handleCheckChange}
+								onClick={(e) => e.stopPropagation()}
+								className="h-3.5 w-3.5 shrink-0"
+							/>
+						);
+					})()}
+
+					<span className="flex-1 min-w-0 truncate">{doc.title}</span>
+
+					<span className="shrink-0">
+						{getDocumentTypeIcon(
+							doc.document_type as DocumentTypeEnum,
+							"h-3.5 w-3.5 text-muted-foreground"
+						)}
+					</span>
+
+					<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+						<DropdownMenuTrigger asChild>
+							<Button
+								variant="ghost"
+								size="icon"
+								className={cn(
+									"hidden sm:inline-flex h-6 w-6 shrink-0 hover:bg-transparent",
+									dropdownOpen
+										? "opacity-100 bg-accent hover:bg-accent"
+										: "opacity-0 group-hover:opacity-100"
+								)}
+								onClick={(e) => e.stopPropagation()}
+							>
+								<MoreHorizontal className="h-3.5 w-3.5" />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end" className="w-40">
+							<DropdownMenuItem onClick={() => onPreview(doc)}>
+								<Eye className="mr-2 h-4 w-4" />
+								Open
+							</DropdownMenuItem>
+							{isEditable && (
+								<DropdownMenuItem onClick={() => onEdit(doc)}>
+									<PenLine className="mr-2 h-4 w-4" />
+									Edit
+								</DropdownMenuItem>
+							)}
+							<DropdownMenuItem onClick={() => onMove(doc)}>
+								<Move className="mr-2 h-4 w-4" />
+								Move to...
+							</DropdownMenuItem>
+							{onExport && (
+								<DropdownMenuSub>
+									<DropdownMenuSubTrigger>
+										<Download className="mr-2 h-4 w-4" />
+										Export
+									</DropdownMenuSubTrigger>
+									<DropdownMenuSubContent className="min-w-[180px]">
+										<ExportDropdownItems onExport={handleExport} exporting={exporting} />
+									</DropdownMenuSubContent>
+								</DropdownMenuSub>
+							)}
+							<DropdownMenuItem
+								className="text-destructive focus:text-destructive"
+								disabled={isProcessing}
+								onClick={() => onDelete(doc)}
+							>
+								<Trash2 className="mr-2 h-4 w-4" />
+								Delete
+							</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</div>
+			</ContextMenuTrigger>
+
+			{contextMenuOpen && (
+				<ContextMenuContent className="w-40">
+					<ContextMenuItem onClick={() => onPreview(doc)}>
+						<Eye className="mr-2 h-4 w-4" />
+						Open
+					</ContextMenuItem>
+					{isEditable && (
+						<ContextMenuItem onClick={() => onEdit(doc)}>
+							<PenLine className="mr-2 h-4 w-4" />
+							Edit
+						</ContextMenuItem>
+					)}
+					<ContextMenuItem onClick={() => onMove(doc)}>
+						<Move className="mr-2 h-4 w-4" />
+						Move to...
+					</ContextMenuItem>
+					{onExport && (
+						<ContextMenuSub>
+							<ContextMenuSubTrigger>
+								<Download className="mr-2 h-4 w-4" />
+								Export
+							</ContextMenuSubTrigger>
+							<ContextMenuSubContent className="min-w-[180px]">
+								<ExportContextItems onExport={handleExport} exporting={exporting} />
+							</ContextMenuSubContent>
+						</ContextMenuSub>
+					)}
+					<ContextMenuItem
+						className="text-destructive focus:text-destructive"
+						disabled={isProcessing}
+						onClick={() => onDelete(doc)}
+					>
+						<Trash2 className="mr-2 h-4 w-4" />
+						Delete
+					</ContextMenuItem>
+				</ContextMenuContent>
+			)}
+		</ContextMenu>
+	);
+});
--- a/surfsense_web/components/documents/FolderNode.tsx
+++ b/surfsense_web/components/documents/FolderNode.tsx
@ -0,0 +1,379 @@
+"use client";
+
+import {
+	ChevronDown,
+	ChevronRight,
+	Folder,
+	FolderOpen,
+	FolderPlus,
+	MoreHorizontal,
+	Move,
+	PenLine,
+	Trash2,
+} from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useDrag, useDrop } from "react-dnd";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import type { FolderSelectionState } from "./FolderTreeView";
+
+export const DND_TYPES = {
+	FOLDER: "FOLDER",
+	DOCUMENT: "DOCUMENT",
+} as const;
+
+type DropZone = "top" | "middle" | "bottom";
+
+export interface FolderDisplay {
+	id: number;
+	name: string;
+	position: string;
+	parentId: number | null;
+	searchSpaceId: number;
+}
+
+interface FolderNodeProps {
+	folder: FolderDisplay;
+	depth: number;
+	isExpanded: boolean;
+	isRenaming: boolean;
+	childCount: number;
+	selectionState: FolderSelectionState;
+	onToggleSelect: (folderId: number, selectAll: boolean) => void;
+	onToggleExpand: (folderId: number) => void;
+	onRename: (folder: FolderDisplay, newName: string) => void;
+	onStartRename: (folderId: number) => void;
+	onCancelRename: () => void;
+	onDelete: (folder: FolderDisplay) => void;
+	onMove: (folder: FolderDisplay) => void;
+	onCreateSubfolder: (parentId: number) => void;
+	onDropIntoFolder?: (
+		itemType: "folder" | "document",
+		itemId: number,
+		targetFolderId: number
+	) => void;
+	onReorderFolder?: (folderId: number, beforePos: string | null, afterPos: string | null) => void;
+	siblingPositions?: { before: string | null; after: string | null };
+	disabledDropIds?: Set<number>;
+	contextMenuOpen?: boolean;
+	onContextMenuOpenChange?: (open: boolean) => void;
+}
+
+function getDropZone(
+	monitor: { getClientOffset: () => { y: number } | null },
+	element: HTMLElement
+): DropZone {
+	const offset = monitor.getClientOffset();
+	if (!offset) return "middle";
+	const rect = element.getBoundingClientRect();
+	const y = offset.y - rect.top;
+	const pct = y / rect.height;
+	if (pct < 0.25) return "top";
+	if (pct > 0.75) return "bottom";
+	return "middle";
+}
+
+export const FolderNode = React.memo(function FolderNode({
+	folder,
+	depth,
+	isExpanded,
+	isRenaming,
+	childCount,
+	selectionState,
+	onToggleSelect,
+	onToggleExpand,
+	onRename,
+	onStartRename,
+	onCancelRename,
+	onDelete,
+	onMove,
+	onCreateSubfolder,
+	onDropIntoFolder,
+	onReorderFolder,
+	siblingPositions,
+	disabledDropIds,
+	contextMenuOpen,
+	onContextMenuOpenChange,
+}: FolderNodeProps) {
+	const [renameValue, setRenameValue] = useState(folder.name);
+	const inputRef = useRef<HTMLInputElement>(null);
+	const rowRef = useRef<HTMLDivElement>(null);
+	const [dropZone, setDropZone] = useState<DropZone | null>(null);
+
+	const [{ isDragging }, drag] = useDrag(
+		() => ({
+			type: DND_TYPES.FOLDER,
+			item: { id: folder.id, position: folder.position, parentId: folder.parentId },
+			collect: (monitor) => ({ isDragging: monitor.isDragging() }),
+		}),
+		[folder.id, folder.position, folder.parentId]
+	);
+
+	const [{ isOver, canDrop }, drop] = useDrop(
+		() => ({
+			accept: [DND_TYPES.FOLDER, DND_TYPES.DOCUMENT],
+			canDrop: (item: { id: number }) => {
+				if (item.id === folder.id) return false;
+				if (disabledDropIds?.has(item.id)) return false;
+				return true;
+			},
+			hover: (_item, monitor) => {
+				if (!rowRef.current || !monitor.isOver({ shallow: true })) {
+					setDropZone(null);
+					return;
+				}
+				setDropZone(getDropZone(monitor, rowRef.current));
+			},
+			drop: (item: { id: number }, monitor) => {
+				if (!rowRef.current) return;
+				const zone = getDropZone(monitor, rowRef.current);
+				const type = monitor.getItemType();
+
+				if (zone === "middle") {
+					if (type === DND_TYPES.FOLDER) {
+						onDropIntoFolder?.("folder", item.id, folder.id);
+					} else {
+						onDropIntoFolder?.("document", item.id, folder.id);
+					}
+				} else if (type === DND_TYPES.FOLDER && onReorderFolder && siblingPositions) {
+					if (zone === "top") {
+						onReorderFolder(item.id, siblingPositions.before, folder.position);
+					} else {
+						onReorderFolder(item.id, folder.position, siblingPositions.after);
+					}
+				}
+				setDropZone(null);
+			},
+			collect: (monitor) => ({
+				isOver: monitor.isOver({ shallow: true }),
+				canDrop: monitor.canDrop(),
+			}),
+		}),
+		[
+			folder.id,
+			folder.position,
+			disabledDropIds,
+			onDropIntoFolder,
+			onReorderFolder,
+			siblingPositions,
+		]
+	);
+
+	useEffect(() => {
+		if (!isOver) setDropZone(null);
+	}, [isOver]);
+
+	const attachRef = useCallback(
+		(node: HTMLDivElement | null) => {
+			rowRef.current = node;
+			drag(drop(node));
+		},
+		[drag, drop]
+	);
+
+	useEffect(() => {
+		if (isRenaming && inputRef.current) {
+			inputRef.current.focus();
+			inputRef.current.select();
+		}
+	}, [isRenaming]);
+
+	const handleRenameSubmit = useCallback(() => {
+		const trimmed = renameValue.trim();
+		if (trimmed && trimmed !== folder.name) {
+			onRename(folder, trimmed);
+		}
+		onCancelRename();
+	}, [renameValue, folder, onRename, onCancelRename]);
+
+	const handleRenameKeyDown = useCallback(
+		(e: React.KeyboardEvent) => {
+			if (e.key === "Enter") {
+				e.preventDefault();
+				handleRenameSubmit();
+			} else if (e.key === "Escape") {
+				e.preventDefault();
+				setRenameValue(folder.name);
+				onCancelRename();
+			}
+		},
+		[handleRenameSubmit, folder.name, onCancelRename]
+	);
+
+	const startRename = useCallback(() => {
+		setRenameValue(folder.name);
+		onStartRename(folder.id);
+	}, [folder, onStartRename]);
+
+	const handleCheckChange = useCallback(() => {
+		onToggleSelect(folder.id, selectionState !== "all");
+	}, [folder.id, selectionState, onToggleSelect]);
+
+	const FolderIcon = isExpanded ? FolderOpen : Folder;
+
+	return (
+		<ContextMenu onOpenChange={onContextMenuOpenChange}>
+			<ContextMenuTrigger asChild disabled={isRenaming}>
+				{/* biome-ignore lint/a11y/useSemanticElements: div required for drag/drop refs */}
+				<div
+					ref={attachRef}
+					role="button"
+					tabIndex={0}
+					className={cn(
+						"group relative flex h-8 items-center gap-1 rounded-md px-1 text-sm hover:bg-accent/50 cursor-pointer select-none",
+						isExpanded && "font-medium",
+						isDragging && "opacity-40",
+						isOver && canDrop && dropZone === "middle" && "bg-accent ring-1 ring-primary/40",
+						isOver && canDrop && dropZone === "top" && "border-t-2 border-primary",
+						isOver && canDrop && dropZone === "bottom" && "border-b-2 border-primary",
+						isOver && !canDrop && "cursor-not-allowed"
+					)}
+					style={{ paddingLeft: `${depth * 16 + 4}px` }}
+					onClick={() => onToggleExpand(folder.id)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							onToggleExpand(folder.id);
+						}
+					}}
+					onDoubleClick={(e) => {
+						e.stopPropagation();
+						startRename();
+					}}
+				>
+					<span className="flex h-4 w-4 shrink-0 items-center justify-center">
+						{isExpanded ? (
+							<ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+						) : (
+							<ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+						)}
+					</span>
+
+					<Checkbox
+						checked={
+							selectionState === "all" ? true : selectionState === "some" ? "indeterminate" : false
+						}
+						onCheckedChange={handleCheckChange}
+						onClick={(e) => e.stopPropagation()}
+						className="h-3.5 w-3.5 shrink-0"
+					/>
+
+					<FolderIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
+
+					{isRenaming ? (
+						<input
+							ref={inputRef}
+							type="text"
+							value={renameValue}
+							onChange={(e) => setRenameValue(e.target.value)}
+							onBlur={handleRenameSubmit}
+							onKeyDown={handleRenameKeyDown}
+							onClick={(e) => e.stopPropagation()}
+							placeholder="Enter folder name"
+							className="flex-1 min-w-0 bg-transparent px-1 py-0.5 text-sm outline-none caret-primary placeholder:text-muted-foreground/50"
+						/>
+					) : (
+						<span className="flex-1 min-w-0 truncate">{folder.name}</span>
+					)}
+
+					{!isRenaming && childCount > 0 && (
+						<span className="shrink-0 text-[10px] text-muted-foreground tabular-nums">
+							{childCount}
+						</span>
+					)}
+
+					{!isRenaming && (
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="hidden sm:inline-flex h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+									onClick={(e) => e.stopPropagation()}
+								>
+									<MoreHorizontal className="h-3.5 w-3.5" />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="end" className="w-40">
+								<DropdownMenuItem
+									onClick={(e) => {
+										e.stopPropagation();
+										onCreateSubfolder(folder.id);
+									}}
+								>
+									<FolderPlus className="mr-2 h-4 w-4" />
+									New subfolder
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									onClick={(e) => {
+										e.stopPropagation();
+										startRename();
+									}}
+								>
+									<PenLine className="mr-2 h-4 w-4" />
+									Rename
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									onClick={(e) => {
+										e.stopPropagation();
+										onMove(folder);
+									}}
+								>
+									<Move className="mr-2 h-4 w-4" />
+									Move to...
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									className="text-destructive focus:text-destructive"
+									onClick={(e) => {
+										e.stopPropagation();
+										onDelete(folder);
+									}}
+								>
+									<Trash2 className="mr-2 h-4 w-4" />
+									Delete
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					)}
+				</div>
+			</ContextMenuTrigger>
+
+			{!isRenaming && contextMenuOpen && (
+				<ContextMenuContent className="w-40">
+					<ContextMenuItem onClick={() => onCreateSubfolder(folder.id)}>
+						<FolderPlus className="mr-2 h-4 w-4" />
+						New subfolder
+					</ContextMenuItem>
+					<ContextMenuItem onClick={() => startRename()}>
+						<PenLine className="mr-2 h-4 w-4" />
+						Rename
+					</ContextMenuItem>
+					<ContextMenuItem onClick={() => onMove(folder)}>
+						<Move className="mr-2 h-4 w-4" />
+						Move to...
+					</ContextMenuItem>
+					<ContextMenuItem
+						className="text-destructive focus:text-destructive"
+						onClick={() => onDelete(folder)}
+					>
+						<Trash2 className="mr-2 h-4 w-4" />
+						Delete
+					</ContextMenuItem>
+				</ContextMenuContent>
+			)}
+		</ContextMenu>
+	);
+});
--- a/surfsense_web/components/documents/FolderPickerDialog.tsx
+++ b/surfsense_web/components/documents/FolderPickerDialog.tsx
@ -0,0 +1,173 @@
+"use client";
+
+import { ChevronDown, ChevronRight, Folder, FolderOpen, Home } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import type { FolderDisplay } from "./FolderNode";
+
+interface FolderPickerDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	folders: FolderDisplay[];
+	title: string;
+	description?: string;
+	disabledFolderIds?: Set<number>;
+	onSelect: (folderId: number | null) => void;
+}
+
+export function FolderPickerDialog({
+	open,
+	onOpenChange,
+	folders,
+	title,
+	description,
+	disabledFolderIds,
+	onSelect,
+}: FolderPickerDialogProps) {
+	const [selectedId, setSelectedId] = useState<number | null>(null);
+	const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
+
+	useEffect(() => {
+		if (open) {
+			setSelectedId(null);
+			setExpandedIds(new Set());
+		}
+	}, [open]);
+
+	const foldersByParent = useMemo(() => {
+		const map: Record<string, FolderDisplay[]> = {};
+		for (const f of folders) {
+			const key = f.parentId ?? "root";
+			if (!map[key]) map[key] = [];
+			map[key].push(f);
+		}
+		return map;
+	}, [folders]);
+
+	const toggleExpand = useCallback((id: number) => {
+		setExpandedIds((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+
+	const handleConfirm = useCallback(() => {
+		onSelect(selectedId);
+		onOpenChange(false);
+	}, [selectedId, onSelect, onOpenChange]);
+
+	function renderPickerLevel(parentId: number | null, depth: number): React.ReactNode[] {
+		const key = parentId ?? "root";
+		const children = (foldersByParent[key] ?? [])
+			.slice()
+			.sort((a, b) => a.position.localeCompare(b.position));
+
+		return children.flatMap((f) => {
+			const isDisabled = disabledFolderIds?.has(f.id) ?? false;
+			const isExpanded = expandedIds.has(f.id);
+			const hasChildren = (foldersByParent[f.id] ?? []).length > 0;
+			const isSelected = selectedId === f.id;
+			const FolderIcon = isExpanded ? FolderOpen : Folder;
+
+			return [
+				<button
+					key={f.id}
+					type="button"
+					disabled={isDisabled}
+					className={cn(
+						"flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors",
+						isSelected && "bg-accent text-accent-foreground",
+						!isSelected && !isDisabled && "hover:bg-accent/50",
+						isDisabled && "cursor-not-allowed opacity-40"
+					)}
+					style={{ paddingLeft: `${depth * 16 + 8}px` }}
+					onClick={() => {
+						if (!isDisabled) setSelectedId(f.id);
+					}}
+				>
+					{hasChildren ? (
+						<button
+							type="button"
+							className="flex h-4 w-4 shrink-0 items-center justify-center"
+							onClick={(e) => {
+								e.stopPropagation();
+								toggleExpand(f.id);
+							}}
+						>
+							{isExpanded ? (
+								<ChevronDown className="h-3.5 w-3.5" />
+							) : (
+								<ChevronRight className="h-3.5 w-3.5" />
+							)}
+						</button>
+					) : (
+						<span className="h-4 w-4 shrink-0" />
+					)}
+					<FolderIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
+					<span className="truncate">{f.name}</span>
+				</button>,
+				...(isExpanded ? renderPickerLevel(f.id, depth + 1) : []),
+			];
+		});
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
+				<DialogHeader className="space-y-2 pb-2">
+					<div className="flex items-center gap-2 sm:gap-3">
+						<div className="flex-1 min-w-0">
+							<DialogTitle className="text-base sm:text-lg">{title}</DialogTitle>
+							{description && (
+								<DialogDescription className="text-xs sm:text-sm mt-0.5">
+									{description}
+								</DialogDescription>
+							)}
+						</div>
+					</div>
+				</DialogHeader>
+
+				<div className="max-h-[300px] overflow-y-auto rounded-md border p-1">
+					<button
+						type="button"
+						className={cn(
+							"flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors",
+							selectedId === null && "bg-accent text-accent-foreground",
+							selectedId !== null && "hover:bg-accent/50"
+						)}
+						onClick={() => setSelectedId(null)}
+					>
+						<span className="h-4 w-4 shrink-0" />
+						<Home className="h-4 w-4 shrink-0 text-muted-foreground" />
+						<span>Root</span>
+					</button>
+					{renderPickerLevel(null, 1)}
+				</div>
+
+				<DialogFooter className="flex-row justify-end gap-2 pt-2 sm:pt-3">
+					<Button
+						variant="secondary"
+						onClick={() => onOpenChange(false)}
+						className="h-8 sm:h-9 text-xs sm:text-sm"
+					>
+						Cancel
+					</Button>
+					<Button onClick={handleConfirm} className="h-8 sm:h-9 text-xs sm:text-sm">
+						Move here
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
--- a/surfsense_web/components/documents/FolderTreeView.tsx
+++ b/surfsense_web/components/documents/FolderTreeView.tsx
@ -0,0 +1,262 @@
+"use client";
+
+import { useAtom } from "jotai";
+import { CirclePlus } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { renamingFolderIdAtom } from "@/atoms/documents/folder.atoms";
+import type { DocumentTypeEnum } from "@/contracts/types/document.types";
+import { DocumentNode, type DocumentNodeDoc } from "./DocumentNode";
+import { type FolderDisplay, FolderNode } from "./FolderNode";
+
+export type FolderSelectionState = "all" | "some" | "none";
+
+interface FolderTreeViewProps {
+	folders: FolderDisplay[];
+	documents: DocumentNodeDoc[];
+	expandedIds: Set<number>;
+	onToggleExpand: (folderId: number) => void;
+	mentionedDocIds: Set<number>;
+	onToggleChatMention: (
+		doc: { id: number; title: string; document_type: string },
+		isMentioned: boolean
+	) => void;
+	onToggleFolderSelect: (folderId: number, selectAll: boolean) => void;
+	onRenameFolder: (folder: FolderDisplay, newName: string) => void;
+	onDeleteFolder: (folder: FolderDisplay) => void;
+	onMoveFolder: (folder: FolderDisplay) => void;
+	onCreateFolder: (parentId: number | null) => void;
+	onPreviewDocument: (doc: DocumentNodeDoc) => void;
+	onEditDocument: (doc: DocumentNodeDoc) => void;
+	onDeleteDocument: (doc: DocumentNodeDoc) => void;
+	onMoveDocument: (doc: DocumentNodeDoc) => void;
+	onExportDocument?: (doc: DocumentNodeDoc, format: string) => void;
+	activeTypes: DocumentTypeEnum[];
+	searchQuery?: string;
+	onDropIntoFolder?: (
+		itemType: "folder" | "document",
+		itemId: number,
+		targetFolderId: number | null
+	) => void;
+	onReorderFolder?: (folderId: number, beforePos: string | null, afterPos: string | null) => void;
+}
+
+function groupBy<T>(items: T[], keyFn: (item: T) => string | number): Record<string | number, T[]> {
+	const result: Record<string | number, T[]> = {};
+	for (const item of items) {
+		const key = keyFn(item);
+		if (!result[key]) result[key] = [];
+		result[key].push(item);
+	}
+	return result;
+}
+
+export function FolderTreeView({
+	folders,
+	documents,
+	expandedIds,
+	onToggleExpand,
+	mentionedDocIds,
+	onToggleChatMention,
+	onToggleFolderSelect,
+	onRenameFolder,
+	onDeleteFolder,
+	onMoveFolder,
+	onCreateFolder,
+	onPreviewDocument,
+	onEditDocument,
+	onDeleteDocument,
+	onMoveDocument,
+	onExportDocument,
+	activeTypes,
+	searchQuery,
+	onDropIntoFolder,
+	onReorderFolder,
+}: FolderTreeViewProps) {
+	const foldersByParent = useMemo(() => groupBy(folders, (f) => f.parentId ?? "root"), [folders]);
+
+	const docsByFolder = useMemo(() => groupBy(documents, (d) => d.folderId ?? "root"), [documents]);
+
+	const folderChildCounts = useMemo(() => {
+		const counts: Record<number, number> = {};
+		for (const f of folders) {
+			const children = foldersByParent[f.id] ?? [];
+			const docs = docsByFolder[f.id] ?? [];
+			counts[f.id] = children.length + docs.length;
+		}
+		return counts;
+	}, [folders, foldersByParent, docsByFolder]);
+
+	const [openContextMenuId, setOpenContextMenuId] = useState<string | null>(null);
+
+	// Single subscription for rename state — derived boolean passed to each FolderNode
+	const [renamingFolderId, setRenamingFolderId] = useAtom(renamingFolderIdAtom);
+	const handleStartRename = useCallback(
+		(folderId: number) => setRenamingFolderId(folderId),
+		[setRenamingFolderId]
+	);
+	const handleCancelRename = useCallback(() => setRenamingFolderId(null), [setRenamingFolderId]);
+
+	const hasDescendantMatch = useMemo(() => {
+		if (activeTypes.length === 0 && !searchQuery) return null;
+		const match: Record<number, boolean> = {};
+
+		function check(folderId: number): boolean {
+			if (match[folderId] !== undefined) return match[folderId];
+			const childDocs = (docsByFolder[folderId] ?? []).some(
+				(d) => activeTypes.length === 0 || activeTypes.includes(d.document_type as DocumentTypeEnum)
+			);
+			if (childDocs) {
+				match[folderId] = true;
+				return true;
+			}
+			const childFolders = foldersByParent[folderId] ?? [];
+			for (const cf of childFolders) {
+				if (check(cf.id)) {
+					match[folderId] = true;
+					return true;
+				}
+			}
+			match[folderId] = false;
+			return false;
+		}
+
+		for (const f of folders) {
+			check(f.id);
+		}
+		return match;
+	}, [folders, docsByFolder, foldersByParent, activeTypes, searchQuery]);
+
+	const folderSelectionStates = useMemo(() => {
+		const states: Record<number, FolderSelectionState> = {};
+		const isSelectable = (d: DocumentNodeDoc) =>
+			d.status?.state !== "pending" && d.status?.state !== "processing";
+
+		function compute(folderId: number): { selected: number; total: number } {
+			const directDocs = (docsByFolder[folderId] ?? []).filter(isSelectable);
+			let selected = directDocs.filter((d) => mentionedDocIds.has(d.id)).length;
+			let total = directDocs.length;
+
+			for (const child of foldersByParent[folderId] ?? []) {
+				const sub = compute(child.id);
+				selected += sub.selected;
+				total += sub.total;
+			}
+
+			if (total === 0) states[folderId] = "none";
+			else if (selected === total) states[folderId] = "all";
+			else if (selected > 0) states[folderId] = "some";
+			else states[folderId] = "none";
+
+			return { selected, total };
+		}
+
+		for (const f of folders) {
+			if (states[f.id] === undefined) compute(f.id);
+		}
+		return states;
+	}, [folders, docsByFolder, foldersByParent, mentionedDocIds]);
+
+	function renderLevel(parentId: number | null, depth: number): React.ReactNode[] {
+		const key = parentId ?? "root";
+		const childFolders = (foldersByParent[key] ?? [])
+			.slice()
+			.sort((a, b) => a.position.localeCompare(b.position));
+		const visibleFolders = hasDescendantMatch
+			? childFolders.filter((f) => hasDescendantMatch[f.id])
+			: childFolders;
+		const childDocs = (docsByFolder[key] ?? []).filter(
+			(d) => activeTypes.length === 0 || activeTypes.includes(d.document_type as DocumentTypeEnum)
+		);
+
+		const nodes: React.ReactNode[] = [];
+
+		for (let i = 0; i < visibleFolders.length; i++) {
+			const f = visibleFolders[i];
+			const siblingPositions = {
+				before: i > 0 ? visibleFolders[i - 1].position : null,
+				after: i < visibleFolders.length - 1 ? visibleFolders[i + 1].position : null,
+			};
+
+			const isAutoExpanded = !!searchQuery && !!hasDescendantMatch?.[f.id];
+			const isExpanded = expandedIds.has(f.id) || isAutoExpanded;
+
+			nodes.push(
+				<FolderNode
+					key={`folder-${f.id}`}
+					folder={f}
+					depth={depth}
+					isExpanded={isExpanded}
+					isRenaming={renamingFolderId === f.id}
+					childCount={folderChildCounts[f.id] ?? 0}
+					selectionState={folderSelectionStates[f.id] ?? "none"}
+					onToggleSelect={onToggleFolderSelect}
+					onToggleExpand={onToggleExpand}
+					onRename={onRenameFolder}
+					onStartRename={handleStartRename}
+					onCancelRename={handleCancelRename}
+					onDelete={onDeleteFolder}
+					onMove={onMoveFolder}
+					onCreateSubfolder={onCreateFolder}
+					onDropIntoFolder={onDropIntoFolder}
+					onReorderFolder={onReorderFolder}
+					siblingPositions={siblingPositions}
+					contextMenuOpen={openContextMenuId === `folder-${f.id}`}
+					onContextMenuOpenChange={(open) => setOpenContextMenuId(open ? `folder-${f.id}` : null)}
+				/>
+			);
+
+			if (isExpanded) {
+				nodes.push(...renderLevel(f.id, depth + 1));
+			}
+		}
+
+		for (const d of childDocs) {
+			nodes.push(
+				<DocumentNode
+					key={`doc-${d.id}`}
+					doc={d}
+					depth={depth}
+					isMentioned={mentionedDocIds.has(d.id)}
+					onToggleChatMention={onToggleChatMention}
+					onPreview={onPreviewDocument}
+					onEdit={onEditDocument}
+					onDelete={onDeleteDocument}
+					onMove={onMoveDocument}
+					onExport={onExportDocument}
+					contextMenuOpen={openContextMenuId === `doc-${d.id}`}
+					onContextMenuOpenChange={(open) => setOpenContextMenuId(open ? `doc-${d.id}` : null)}
+				/>
+			);
+		}
+
+		return nodes;
+	}
+
+	const treeNodes = renderLevel(null, 0);
+
+	if (treeNodes.length === 0 && folders.length === 0 && documents.length === 0) {
+		return (
+			<div className="flex flex-1 flex-col items-center justify-center gap-3 px-4 py-12 text-muted-foreground">
+				<CirclePlus className="h-10 w-10 rotate-45" />
+				<p className="text-sm">No documents yet</p>
+			</div>
+		);
+	}
+
+	if (treeNodes.length === 0 && (activeTypes.length > 0 || searchQuery)) {
+		return (
+			<div className="flex flex-1 flex-col items-center justify-center gap-3 px-4 py-12 text-muted-foreground">
+				<CirclePlus className="h-10 w-10 rotate-45" />
+				<p className="text-sm">No matching documents</p>
+			</div>
+		);
+	}
+
+	return (
+		<DndProvider backend={HTML5Backend}>
+			<div className="flex-1 min-h-0 overflow-y-auto px-2 py-1">{treeNodes}</div>
+		</DndProvider>
+	);
+}
--- a/surfsense_web/components/hitl-edit-panel/hitl-edit-panel.tsx
+++ b/surfsense_web/components/hitl-edit-panel/hitl-edit-panel.tsx
@ -185,7 +185,7 @@ function DateTimePickerField({
 				type="time"
 				value={time}
 				onChange={handleTimeChange}
-				className="w-[120px] text-sm shrink-0 pl-1.5 [&::-webkit-calendar-picker-indicator]:order-first [&::-webkit-calendar-picker-indicator]:mr-1"
+				className="w-[120px] text-sm shrink-0 appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
 			/>
 		</div>
 	);
--- a/surfsense_web/components/homepage/github-stars-badge.tsx
+++ b/surfsense_web/components/homepage/github-stars-badge.tsx
@ -3,6 +3,7 @@
 import { IconBrandGithub } from "@tabler/icons-react";
 import { motion, useMotionValue, useSpring } from "motion/react";
 import * as React from "react";
+import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";

 // ---------------------------------------------------------------------------
@ -277,12 +278,16 @@ function NavbarGitHubStars({
 			)}
 		>
 			<IconBrandGithub className="h-5 w-5 text-neutral-700 dark:text-neutral-300 shrink-0" />
-			<AnimatedStarCount
-				value={isLoading ? 10000 : stars}
-				itemSize={ITEM_SIZE}
-				isRolling={isLoading}
-				className="text-sm font-semibold tabular-nums text-neutral-700 dark:text-neutral-300 group-hover:text-neutral-900 dark:group-hover:text-neutral-100 transition-colors"
-			/>
+			{isLoading ? (
+				<Skeleton className="h-4 w-10" />
+			) : (
+				<AnimatedStarCount
+					value={stars}
+					itemSize={ITEM_SIZE}
+					isRolling={false}
+					className="text-sm font-semibold tabular-nums text-neutral-700 dark:text-neutral-300 group-hover:text-neutral-900 dark:group-hover:text-neutral-100 transition-colors"
+				/>
+			)}
 		</a>
 	);
 }
--- a/surfsense_web/components/homepage/hero-section.tsx
+++ b/surfsense_web/components/homepage/hero-section.tsx
@ -35,7 +35,14 @@ const HeroCarousel = dynamic(

 // Official Google "G" logo with brand colors
 const GoogleLogo = ({ className }: { className?: string }) => (
-	<svg className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<svg
+		className={className}
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		role="img"
+		aria-label="Google logo"
+	>
+		<title>Google logo</title>
 		<path
 			d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
 			fill="#4285F4"
--- a/surfsense_web/components/homepage/use-cases-grid.tsx
+++ b/surfsense_web/components/homepage/use-cases-grid.tsx
@ -63,9 +63,18 @@ function UseCaseCard({
 				transition={{ duration: 0.5, ease: "easeOut" }}
 				className={`group overflow-hidden rounded-2xl border border-neutral-200/60 bg-white shadow-sm transition-shadow duration-300 hover:shadow-xl dark:border-neutral-700/60 dark:bg-neutral-900 ${className ?? ""}`}
 			>
+				{/* biome-ignore lint/a11y/useSemanticElements: div wraps img, button would break layout */}
 				<div
+					role="button"
+					tabIndex={0}
 					className="cursor-pointer overflow-hidden bg-neutral-50 p-2 dark:bg-neutral-950"
 					onClick={open}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							open();
+						}
+					}}
 				>
 					<img
 						src={src}
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@ -20,6 +20,7 @@ import {
 	teamDialogAtom,
 	userSettingsDialogAtom,
 } from "@/atoms/settings/settings-dialog.atoms";
+import { resetTabsAtom, syncChatTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { MorePagesDialog } from "@/components/settings/more-pages-dialog";
 import { SearchSpaceSettingsDialog } from "@/components/settings/search-space-settings-dialog";
@ -100,6 +101,8 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	const { mutateAsync: deleteSearchSpace } = useAtomValue(deleteSearchSpaceMutationAtom);
 	const currentThreadState = useAtomValue(currentThreadAtom);
 	const resetCurrentThread = useSetAtom(resetCurrentThreadAtom);
+	const syncChatTab = useSetAtom(syncChatTabAtom);
+	const resetTabs = useSetAtom(resetTabsAtom);

 	// State for handling new chat navigation when router is out of sync
 	const [pendingNewChat, setPendingNewChat] = useState(false);
@ -264,10 +267,16 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		}
 	}, [pendingNewChat, params?.chat_id, router, searchSpaceId, resetCurrentThread]);

-	// Reset transient slide-out panels when switching search spaces.
+	// Reset transient slide-out panels and tabs when switching search spaces.
+	// Use a ref to skip the initial mount — only reset when the space actually changes.
+	const prevSearchSpaceIdRef = useRef(searchSpaceId);
 	useEffect(() => {
-		setActiveSlideoutPanel(null);
-	}, [searchSpaceId]);
+		if (prevSearchSpaceIdRef.current !== searchSpaceId) {
+			prevSearchSpaceIdRef.current = searchSpaceId;
+			setActiveSlideoutPanel(null);
+			resetTabs();
+		}
+	}, [searchSpaceId, resetTabs]);

 	const searchSpaces: SearchSpace[] = useMemo(() => {
 		if (!searchSpacesData || !Array.isArray(searchSpacesData)) return [];
@ -307,6 +316,20 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		router,
 	]);

+	// Sync current chat route with tab state
+	useEffect(() => {
+		const chatId = currentChatId ?? null;
+		const chatUrl = chatId
+			? `/dashboard/${searchSpaceId}/new-chat/${chatId}`
+			: `/dashboard/${searchSpaceId}/new-chat`;
+		const thread = threadsData?.threads?.find((t) => t.id === chatId);
+		syncChatTab({
+			chatId,
+			title: thread?.title || (chatId ? `Chat ${chatId}` : "New Chat"),
+			chatUrl,
+		});
+	}, [currentChatId, searchSpaceId, threadsData?.threads, syncChatTab]);
+
 	// Transform and split chats into private and shared based on visibility
 	const { myChats, sharedChats } = useMemo(() => {
 		if (!threadsData?.threads) return { myChats: [], sharedChats: [] };
@ -473,6 +496,17 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		}
 	}, [searchSpaceToLeave, refetchSearchSpaces, searchSpaceId, router, t]);

+	const handleTabSwitch = useCallback(
+		(tab: Tab) => {
+			if (tab.type === "chat") {
+				const url = tab.chatUrl || `/dashboard/${searchSpaceId}/new-chat`;
+				router.push(url);
+			}
+			// Document tabs are handled in-place by LayoutShell — no navigation needed
+		},
+		[router, searchSpaceId]
+	);
+
 	const handleNavItemClick = useCallback(
 		(item: NavItem) => {
 			if (item.url === "#inbox") {
@ -738,6 +772,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 					isDocked: isDocumentsDocked,
 					onDockedChange: setIsDocumentsDocked,
 				}}
+				onTabSwitch={handleTabSwitch}
 			>
 				<Fragment key={chatResetKey}>{children}</Fragment>
 			</LayoutShell>
--- a/surfsense_web/components/layout/ui/header/Header.tsx
+++ b/surfsense_web/components/layout/ui/header/Header.tsx
@ -8,6 +8,7 @@ import { reportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
 import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import { activeTabAtom } from "@/atoms/tabs/tabs.atom";
 import { ChatHeader } from "@/components/new-chat/chat-header";
 import { ChatShareButton } from "@/components/new-chat/chat-share-button";
 import { Button } from "@/components/ui/button";
@ -23,12 +24,14 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
 	const pathname = usePathname();
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
 	const isMobile = useIsMobile();
+	const activeTab = useAtomValue(activeTabAtom);

 	const isChatPage = pathname?.includes("/new-chat") ?? false;
+	const isDocumentTab = activeTab?.type === "document";

 	const currentThreadState = useAtomValue(currentThreadAtom);

-	const hasThread = isChatPage && currentThreadState.id !== null;
+	const hasThread = isChatPage && !isDocumentTab && currentThreadState.id !== null;

 	const threadForButton: ThreadRecord | null =
 		hasThread && currentThreadState.id !== null
@ -58,7 +61,7 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
 			{/* Left side - Mobile menu trigger + Model selector */}
 			<div className="flex flex-1 items-center gap-2 min-w-0">
 				{mobileMenuTrigger}
-				{isChatPage && searchSpaceId && (
+				{isChatPage && !isDocumentTab && searchSpaceId && (
 					<ChatHeader searchSpaceId={Number(searchSpaceId)} className="md:h-9 md:px-4 md:text-sm" />
 				)}
 			</div>
--- a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
+++ b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
@ -1,7 +1,9 @@
 "use client";

+import { useAtomValue } from "jotai";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useMemo, useState } from "react";
+import { activeTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { InboxItem } from "@/hooks/use-inbox";
 import { useIsMobile } from "@/hooks/use-mobile";
@ -23,6 +25,8 @@ import {
 	Sidebar,
 } from "../sidebar";
 import { SidebarSlideOutPanel } from "../sidebar/SidebarSlideOutPanel";
+import { DocumentTabContent } from "../tabs/DocumentTabContent";
+import { TabBar } from "../tabs/TabBar";

 // Per-tab data source
 interface TabDataSource {
@ -97,6 +101,44 @@ interface LayoutShellProps {
 		isDocked?: boolean;
 		onDockedChange?: (docked: boolean) => void;
 	};
+	onTabSwitch?: (tab: Tab) => void;
+}
+
+function MainContentPanel({
+	isChatPage,
+	onTabSwitch,
+	onNewChat,
+	children,
+}: {
+	isChatPage: boolean;
+	onTabSwitch?: (tab: Tab) => void;
+	onNewChat?: () => void;
+	children: React.ReactNode;
+}) {
+	const activeTab = useAtomValue(activeTabAtom);
+	const isDocumentTab = activeTab?.type === "document";
+
+	return (
+		<div className="relative flex flex-1 flex-col rounded-xl border bg-main-panel overflow-hidden min-w-0">
+			<TabBar onTabSwitch={onTabSwitch} onNewChat={onNewChat} />
+			<Header />
+
+			{isDocumentTab && activeTab.documentId && activeTab.searchSpaceId ? (
+				<div className="flex-1 overflow-hidden">
+					<DocumentTabContent
+						key={activeTab.documentId}
+						documentId={activeTab.documentId}
+						searchSpaceId={activeTab.searchSpaceId}
+						title={activeTab.title}
+					/>
+				</div>
+			) : (
+				<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
+					{children}
+				</div>
+			)}
+		</div>
+	);
 }

 export function LayoutShell({
@ -138,6 +180,7 @@ export function LayoutShell({
 	allSharedChatsPanel,
 	allPrivateChatsPanel,
 	documentsPanel,
+	onTabSwitch,
 }: LayoutShellProps) {
 	const isMobile = useIsMobile();
 	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@ -455,13 +498,9 @@ export function LayoutShell({
 					)}

 					{/* Main content panel */}
-					<div className="relative flex flex-1 flex-col rounded-xl border bg-main-panel overflow-hidden min-w-0">
-						<Header />
-
-						<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
-							{children}
-						</div>
-					</div>
+					<MainContentPanel isChatPage={isChatPage} onTabSwitch={onTabSwitch} onNewChat={onNewChat}>
+						{children}
+					</MainContentPanel>

 					{/* Right panel — tabbed Sources/Report (desktop only) */}
 					{documentsPanel && (
--- a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
@ -396,10 +396,13 @@ export function AllPrivateChatsSidebarContent({
 												variant="ghost"
 												size="icon"
 												className={cn(
-													"h-6 w-6 shrink-0",
+													"h-6 w-6 shrink-0 hover:bg-transparent",
 													isMobile
 														? "opacity-0 pointer-events-none absolute"
-														: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
+														: openDropdownId === thread.id
+															? "opacity-100"
+															: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
+													openDropdownId === thread.id && "bg-accent hover:bg-accent",
 													"transition-opacity"
 												)}
 												disabled={isBusy}
--- a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
@ -396,10 +396,13 @@ export function AllSharedChatsSidebarContent({
 												variant="ghost"
 												size="icon"
 												className={cn(
-													"h-6 w-6 shrink-0",
+													"h-6 w-6 shrink-0 hover:bg-transparent",
 													isMobile
 														? "opacity-0 pointer-events-none absolute"
-														: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
+														: openDropdownId === thread.id
+															? "opacity-100"
+															: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
+													openDropdownId === thread.id && "bg-accent hover:bg-accent",
 													"transition-opacity"
 												)}
 												disabled={isBusy}
--- a/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
@ -79,14 +79,21 @@ export function ChatListItem({
 						: "bg-gradient-to-l from-sidebar from-60% to-transparent group-hover/item:from-accent",
 					isMobile
 						? "opacity-0"
-						: isActive
+						: isActive || dropdownOpen
 							? "opacity-100"
 							: "opacity-0 group-hover/item:opacity-100"
 				)}
 			>
 				<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
 					<DropdownMenuTrigger asChild>
-						<Button variant="ghost" size="icon" className="pointer-events-auto h-6 w-6">
+						<Button
+							variant="ghost"
+							size="icon"
+							className={cn(
+								"pointer-events-auto h-6 w-6 hover:bg-transparent",
+								dropdownOpen && "bg-accent hover:bg-accent"
+							)}
+						>
 							<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
 							<span className="sr-only">{t("more_options")}</span>
 						</Button>
--- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
@ -1,31 +1,51 @@
 "use client";

+import { useQuery } from "@rocicorp/zero/react";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { ChevronLeft, ChevronRight, Unplug } from "lucide-react";
+import { ChevronLeft, ChevronRight, Trash2, Unplug } from "lucide-react";
 import { useParams } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { DocumentsFilters } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters";
-import {
-	DocumentsTableShell,
-	type SortKey,
-} from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell";
 import { sidebarSelectedDocumentsAtom } from "@/atoms/chat/mentioned-documents.atom";
 import { connectorDialogOpenAtom } from "@/atoms/connector-dialog/connector-dialog.atoms";
 import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
 import { deleteDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
+import { expandedFolderIdsAtom } from "@/atoms/documents/folder.atoms";
+import { agentCreatedDocumentsAtom } from "@/atoms/documents/ui.atoms";
+import { openDocumentTabAtom } from "@/atoms/tabs/tabs.atom";
+import { CreateFolderDialog } from "@/components/documents/CreateFolderDialog";
+import type { DocumentNodeDoc } from "@/components/documents/DocumentNode";
+import type { FolderDisplay } from "@/components/documents/FolderNode";
+import { FolderPickerDialog } from "@/components/documents/FolderPickerDialog";
+import { FolderTreeView } from "@/components/documents/FolderTreeView";
+import { EXPORT_FILE_EXTENSIONS } from "@/components/shared/ExportMenuItems";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { DocumentTypeEnum } from "@/contracts/types/document.types";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
-import { useDocumentSearch } from "@/hooks/use-document-search";
-import { useDocuments } from "@/hooks/use-documents";
 import { useMediaQuery } from "@/hooks/use-media-query";
+import { foldersApiService } from "@/lib/apis/folders-api.service";
+import { authenticatedFetch } from "@/lib/auth-utils";
+import { queries } from "@/zero/queries/index";
 import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";

+const NON_DELETABLE_DOCUMENT_TYPES: readonly string[] = ["SURFSENSE_DOCS"];
+
 const SHOWCASE_CONNECTORS = [
 	{ type: "GOOGLE_DRIVE_CONNECTOR", label: "Google Drive" },
 	{ type: "GOOGLE_GMAIL_CONNECTOR", label: "Gmail" },
@ -63,19 +83,283 @@ export function DocumentsSidebar({
 	const isMobile = !useMediaQuery("(min-width: 640px)");
 	const searchSpaceId = Number(params.search_space_id);
 	const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom);
+	const openDocumentTab = useSetAtom(openDocumentTabAtom);
 	const { data: connectors } = useAtomValue(connectorsAtom);
 	const connectorCount = connectors?.length ?? 0;

 	const [search, setSearch] = useState("");
 	const debouncedSearch = useDebouncedValue(search, 250);
 	const [activeTypes, setActiveTypes] = useState<DocumentTypeEnum[]>([]);
-	const [sortKey, setSortKey] = useState<SortKey>("created_at");
-	const [sortDesc, setSortDesc] = useState(true);
 	const { mutateAsync: deleteDocumentMutation } = useAtomValue(deleteDocumentMutationAtom);

 	const [sidebarDocs, setSidebarDocs] = useAtom(sidebarSelectedDocumentsAtom);
 	const mentionedDocIds = useMemo(() => new Set(sidebarDocs.map((d) => d.id)), [sidebarDocs]);

+	// Folder state
+	const [expandedFolderMap, setExpandedFolderMap] = useAtom(expandedFolderIdsAtom);
+	const expandedIds = useMemo(
+		() => new Set(expandedFolderMap[searchSpaceId] ?? []),
+		[expandedFolderMap, searchSpaceId]
+	);
+	const toggleFolderExpand = useCallback(
+		(folderId: number) => {
+			setExpandedFolderMap((prev) => {
+				const current = new Set(prev[searchSpaceId] ?? []);
+				if (current.has(folderId)) current.delete(folderId);
+				else current.add(folderId);
+				return { ...prev, [searchSpaceId]: [...current] };
+			});
+		},
+		[searchSpaceId, setExpandedFolderMap]
+	);
+
+	// Zero queries for tree data
+	const [zeroFolders] = useQuery(queries.folders.bySpace({ searchSpaceId }));
+	const [zeroAllDocs] = useQuery(queries.documents.bySpace({ searchSpaceId }));
+	const [agentCreatedDocs, setAgentCreatedDocs] = useAtom(agentCreatedDocumentsAtom);
+
+	const treeFolders: FolderDisplay[] = useMemo(
+		() =>
+			(zeroFolders ?? []).map((f) => ({
+				id: f.id,
+				name: f.name,
+				position: f.position,
+				parentId: f.parentId ?? null,
+				searchSpaceId: f.searchSpaceId,
+			})),
+		[zeroFolders]
+	);
+
+	const treeDocuments: DocumentNodeDoc[] = useMemo(() => {
+		const zeroDocs = (zeroAllDocs ?? [])
+			.filter((d) => d.title && d.title.trim() !== "")
+			.map((d) => ({
+				id: d.id,
+				title: d.title,
+				document_type: d.documentType,
+				folderId: (d as { folderId?: number | null }).folderId ?? null,
+				status: d.status as { state: string; reason?: string | null } | undefined,
+			}));
+
+		const zeroIds = new Set(zeroDocs.map((d) => d.id));
+
+		const pendingAgentDocs = agentCreatedDocs
+			.filter((d) => d.searchSpaceId === searchSpaceId && !zeroIds.has(d.id))
+			.map((d) => ({
+				id: d.id,
+				title: d.title,
+				document_type: d.documentType,
+				folderId: d.folderId ?? null,
+				status: { state: "ready" } as { state: string; reason?: string | null },
+			}));
+
+		return [...pendingAgentDocs, ...zeroDocs];
+	}, [zeroAllDocs, agentCreatedDocs, searchSpaceId]);
+
+	// Prune agent-created docs once Zero has caught up
+	useEffect(() => {
+		if (!zeroAllDocs?.length || !agentCreatedDocs.length) return;
+		const zeroIds = new Set(zeroAllDocs.map((d) => d.id));
+		const remaining = agentCreatedDocs.filter((d) => !zeroIds.has(d.id));
+		if (remaining.length < agentCreatedDocs.length) {
+			setAgentCreatedDocs(remaining);
+		}
+	}, [zeroAllDocs, agentCreatedDocs, setAgentCreatedDocs]);
+
+	const foldersByParent = useMemo(() => {
+		const map: Record<string, FolderDisplay[]> = {};
+		for (const f of treeFolders) {
+			const key = String(f.parentId ?? "root");
+			if (!map[key]) map[key] = [];
+			map[key].push(f);
+		}
+		return map;
+	}, [treeFolders]);
+
+	// Folder actions
+	const [folderPickerOpen, setFolderPickerOpen] = useState(false);
+	const [folderPickerTarget, setFolderPickerTarget] = useState<{
+		type: "folder" | "document";
+		id: number;
+		disabledIds?: Set<number>;
+	} | null>(null);
+
+	// Create-folder dialog state
+	const [createFolderOpen, setCreateFolderOpen] = useState(false);
+	const [createFolderParentId, setCreateFolderParentId] = useState<number | null>(null);
+
+	const createFolderParentName = useMemo(() => {
+		if (createFolderParentId === null) return null;
+		return treeFolders.find((f) => f.id === createFolderParentId)?.name ?? null;
+	}, [createFolderParentId, treeFolders]);
+
+	const handleCreateFolder = useCallback((parentId: number | null) => {
+		setCreateFolderParentId(parentId);
+		setCreateFolderOpen(true);
+	}, []);
+
+	const handleCreateFolderConfirm = useCallback(
+		async (name: string) => {
+			try {
+				await foldersApiService.createFolder({
+					name,
+					parent_id: createFolderParentId,
+					search_space_id: searchSpaceId,
+				});
+				toast.success("Folder created");
+				if (createFolderParentId !== null) {
+					setExpandedFolderMap((prev) => {
+						const current = new Set(prev[searchSpaceId] ?? []);
+						current.add(createFolderParentId);
+						return { ...prev, [searchSpaceId]: [...current] };
+					});
+				}
+			} catch (e: unknown) {
+				toast.error((e as Error)?.message || "Failed to create folder");
+			}
+		},
+		[createFolderParentId, searchSpaceId, setExpandedFolderMap]
+	);
+
+	const handleRenameFolder = useCallback(async (folder: FolderDisplay, newName: string) => {
+		try {
+			await foldersApiService.updateFolder(folder.id, { name: newName });
+			toast.success("Folder renamed");
+		} catch (e: unknown) {
+			toast.error((e as Error)?.message || "Failed to rename folder");
+		}
+	}, []);
+
+	const handleDeleteFolder = useCallback(async (folder: FolderDisplay) => {
+		if (!confirm(`Delete folder "${folder.name}" and all its contents?`)) return;
+		try {
+			await foldersApiService.deleteFolder(folder.id);
+			toast.success("Folder deleted");
+		} catch (e: unknown) {
+			toast.error((e as Error)?.message || "Failed to delete folder");
+		}
+	}, []);
+
+	const handleMoveFolder = useCallback(
+		(folder: FolderDisplay) => {
+			const subtreeIds = new Set<number>();
+			function collectSubtree(id: number) {
+				subtreeIds.add(id);
+				for (const child of foldersByParent[String(id)] ?? []) {
+					collectSubtree(child.id);
+				}
+			}
+			collectSubtree(folder.id);
+			setFolderPickerTarget({
+				type: "folder",
+				id: folder.id,
+				disabledIds: subtreeIds,
+			});
+			setFolderPickerOpen(true);
+		},
+		[foldersByParent]
+	);
+
+	const handleMoveDocument = useCallback((doc: DocumentNodeDoc) => {
+		setFolderPickerTarget({ type: "document", id: doc.id });
+		setFolderPickerOpen(true);
+	}, []);
+
+	const handleExportDocument = useCallback(
+		async (doc: DocumentNodeDoc, format: string) => {
+			const safeTitle =
+				doc.title
+					.replace(/[^a-zA-Z0-9 _-]/g, "_")
+					.trim()
+					.slice(0, 80) || "document";
+			const ext = EXPORT_FILE_EXTENSIONS[format] ?? format;
+
+			try {
+				const response = await authenticatedFetch(
+					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${doc.id}/export?format=${format}`,
+					{ method: "GET" }
+				);
+
+				if (!response.ok) {
+					const errorData = await response.json().catch(() => ({ detail: "Export failed" }));
+					throw new Error(errorData.detail || "Export failed");
+				}
+
+				const blob = await response.blob();
+				const url = URL.createObjectURL(blob);
+				const a = document.createElement("a");
+				a.href = url;
+				a.download = `${safeTitle}.${ext}`;
+				document.body.appendChild(a);
+				a.click();
+				document.body.removeChild(a);
+				URL.revokeObjectURL(url);
+			} catch (err) {
+				console.error(`Export ${format} failed:`, err);
+				toast.error(err instanceof Error ? err.message : `Export failed`);
+			}
+		},
+		[searchSpaceId]
+	);
+
+	const handleFolderPickerSelect = useCallback(
+		async (targetFolderId: number | null) => {
+			if (!folderPickerTarget) return;
+			try {
+				if (folderPickerTarget.type === "folder") {
+					await foldersApiService.moveFolder(folderPickerTarget.id, {
+						new_parent_id: targetFolderId,
+					});
+					toast.success("Folder moved");
+				} else {
+					await foldersApiService.moveDocument(folderPickerTarget.id, {
+						folder_id: targetFolderId,
+					});
+					toast.success("Document moved");
+				}
+			} catch (e: unknown) {
+				toast.error((e as Error)?.message || "Failed to move item");
+			}
+			setFolderPickerTarget(null);
+		},
+		[folderPickerTarget]
+	);
+
+	const handleDropIntoFolder = useCallback(
+		async (itemType: "folder" | "document", itemId: number, targetFolderId: number | null) => {
+			try {
+				if (itemType === "folder") {
+					await foldersApiService.moveFolder(itemId, {
+						new_parent_id: targetFolderId,
+					});
+					toast.success("Folder moved");
+				} else {
+					await foldersApiService.moveDocument(itemId, {
+						folder_id: targetFolderId,
+					});
+					toast.success("Document moved");
+				}
+			} catch (e: unknown) {
+				toast.error((e as Error)?.message || "Failed to move item");
+			}
+		},
+		[]
+	);
+
+	const handleReorderFolder = useCallback(
+		async (folderId: number, beforePos: string | null, afterPos: string | null) => {
+			try {
+				await foldersApiService.reorderFolder(folderId, {
+					before_position: beforePos,
+					after_position: afterPos,
+				});
+			} catch (e: unknown) {
+				toast.error((e as Error)?.message || "Failed to reorder folder");
+			}
+		},
+		[]
+	);
+
 	const handleToggleChatMention = useCallback(
 		(doc: { id: number; title: string; document_type: string }, isMentioned: boolean) => {
 			if (isMentioned) {
@ -93,44 +377,115 @@ export function DocumentsSidebar({
 		[setSidebarDocs]
 	);

-	const isSearchMode = !!debouncedSearch.trim();
+	const handleToggleFolderSelect = useCallback(
+		(folderId: number, selectAll: boolean) => {
+			function collectSubtreeDocs(parentId: number): DocumentNodeDoc[] {
+				const directDocs = (treeDocuments ?? []).filter(
+					(d) =>
+						d.folderId === parentId &&
+						d.status?.state !== "pending" &&
+						d.status?.state !== "processing"
+				);
+				const childFolders = foldersByParent[String(parentId)] ?? [];
+				const descendantDocs = childFolders.flatMap((cf) => collectSubtreeDocs(cf.id));
+				return [...directDocs, ...descendantDocs];
+			}

-	const {
-		documents: realtimeDocuments,
-		typeCounts: realtimeTypeCounts,
-		loading: realtimeLoading,
-		loadingMore: realtimeLoadingMore,
-		hasMore: realtimeHasMore,
-		loadMore: realtimeLoadMore,
-		removeItems: realtimeRemoveItems,
-		error: realtimeError,
-	} = useDocuments(searchSpaceId, activeTypes, sortKey, sortDesc ? "desc" : "asc");
+			const subtreeDocs = collectSubtreeDocs(folderId);
+			if (subtreeDocs.length === 0) return;

-	const {
-		documents: searchDocuments,
-		loading: searchLoading,
-		loadingMore: searchLoadingMore,
-		hasMore: searchHasMore,
-		loadMore: searchLoadMore,
-		error: searchError,
-		removeItems: searchRemoveItems,
-	} = useDocumentSearch(searchSpaceId, debouncedSearch, activeTypes, isSearchMode && open);
+			if (selectAll) {
+				setSidebarDocs((prev) => {
+					const existingIds = new Set(prev.map((d) => d.id));
+					const newDocs = subtreeDocs
+						.filter((d) => !existingIds.has(d.id))
+						.map((d) => ({
+							id: d.id,
+							title: d.title,
+							document_type: d.document_type as DocumentTypeEnum,
+						}));
+					return newDocs.length > 0 ? [...prev, ...newDocs] : prev;
+				});
+			} else {
+				const idsToRemove = new Set(subtreeDocs.map((d) => d.id));
+				setSidebarDocs((prev) => prev.filter((d) => !idsToRemove.has(d.id)));
+			}
+		},
+		[treeDocuments, foldersByParent, setSidebarDocs]
+	);

-	const displayDocs = isSearchMode ? searchDocuments : realtimeDocuments;
-	const loading = isSearchMode ? searchLoading : realtimeLoading;
-	const error = isSearchMode ? searchError : !!realtimeError;
-	const hasMore = isSearchMode ? searchHasMore : realtimeHasMore;
-	const loadingMore = isSearchMode ? searchLoadingMore : realtimeLoadingMore;
-	const onLoadMore = isSearchMode ? searchLoadMore : realtimeLoadMore;
+	const searchFilteredDocuments = useMemo(() => {
+		const query = debouncedSearch.trim().toLowerCase();
+		if (!query) return treeDocuments;
+		return treeDocuments.filter((d) => d.title.toLowerCase().includes(query));
+	}, [treeDocuments, debouncedSearch]);

-	const onToggleType = (type: DocumentTypeEnum, checked: boolean) => {
+	const typeCounts = useMemo(() => {
+		const counts: Partial<Record<string, number>> = {};
+		for (const d of treeDocuments) {
+			counts[d.document_type] = (counts[d.document_type] || 0) + 1;
+		}
+		return counts;
+	}, [treeDocuments]);
+
+	const deletableSelectedIds = useMemo(() => {
+		const treeDocMap = new Map(treeDocuments.map((d) => [d.id, d]));
+		return sidebarDocs
+			.filter((doc) => {
+				const fullDoc = treeDocMap.get(doc.id);
+				if (!fullDoc) return false;
+				const state = fullDoc.status?.state ?? "ready";
+				return (
+					state !== "pending" &&
+					state !== "processing" &&
+					!NON_DELETABLE_DOCUMENT_TYPES.includes(doc.document_type)
+				);
+			})
+			.map((doc) => doc.id);
+	}, [sidebarDocs, treeDocuments]);
+
+	const [bulkDeleteConfirmOpen, setBulkDeleteConfirmOpen] = useState(false);
+	const [isBulkDeleting, setIsBulkDeleting] = useState(false);
+
+	const handleBulkDeleteSelected = useCallback(async () => {
+		if (deletableSelectedIds.length === 0) return;
+		setIsBulkDeleting(true);
+		try {
+			const results = await Promise.allSettled(
+				deletableSelectedIds.map(async (id) => {
+					await deleteDocumentMutation({ id });
+					return id;
+				})
+			);
+			const successIds = results
+				.filter((r): r is PromiseFulfilledResult<number> => r.status === "fulfilled")
+				.map((r) => r.value);
+			const failed = results.length - successIds.length;
+			if (successIds.length > 0) {
+				setSidebarDocs((prev) => {
+					const idSet = new Set(successIds);
+					return prev.filter((d) => !idSet.has(d.id));
+				});
+				toast.success(`Deleted ${successIds.length} document${successIds.length !== 1 ? "s" : ""}`);
+			}
+			if (failed > 0) {
+				toast.error(`Failed to delete ${failed} document${failed !== 1 ? "s" : ""}`);
+			}
+		} catch {
+			toast.error("Failed to delete documents");
+		}
+		setIsBulkDeleting(false);
+		setBulkDeleteConfirmOpen(false);
+	}, [deletableSelectedIds, deleteDocumentMutation, setSidebarDocs]);
+
+	const onToggleType = useCallback((type: DocumentTypeEnum, checked: boolean) => {
 		setActiveTypes((prev) => {
 			if (checked) {
 				return prev.includes(type) ? prev : [...prev, type];
 			}
 			return prev.filter((t) => t !== type);
 		});
-	};
+	}, []);

 	const handleDeleteDocument = useCallback(
 		async (id: number): Promise<boolean> => {
@ -138,69 +493,15 @@ export function DocumentsSidebar({
 				await deleteDocumentMutation({ id });
 				toast.success(t("delete_success") || "Document deleted");
 				setSidebarDocs((prev) => prev.filter((d) => d.id !== id));
-				realtimeRemoveItems([id]);
-				if (isSearchMode) {
-					searchRemoveItems([id]);
-				}
 				return true;
 			} catch (e) {
 				console.error("Error deleting document:", e);
 				return false;
 			}
 		},
-		[
-			deleteDocumentMutation,
-			isSearchMode,
-			t,
-			searchRemoveItems,
-			realtimeRemoveItems,
-			setSidebarDocs,
-		]
+		[deleteDocumentMutation, t, setSidebarDocs]
 	);

-	const handleBulkDeleteDocuments = useCallback(
-		async (ids: number[]): Promise<{ success: number; failed: number }> => {
-			const successIds: number[] = [];
-			const results = await Promise.allSettled(
-				ids.map(async (id) => {
-					await deleteDocumentMutation({ id });
-					successIds.push(id);
-				})
-			);
-			if (successIds.length > 0) {
-				setSidebarDocs((prev) => prev.filter((d) => !successIds.includes(d.id)));
-				realtimeRemoveItems(successIds);
-				if (isSearchMode) {
-					searchRemoveItems(successIds);
-				}
-			}
-			const success = results.filter((r) => r.status === "fulfilled").length;
-			const failed = results.filter((r) => r.status === "rejected").length;
-			return { success, failed };
-		},
-		[deleteDocumentMutation, isSearchMode, searchRemoveItems, realtimeRemoveItems, setSidebarDocs]
-	);
-
-	const sortKeyRef = useRef(sortKey);
-	const sortDescRef = useRef(sortDesc);
-	sortKeyRef.current = sortKey;
-	sortDescRef.current = sortDesc;
-
-	const handleSortChange = useCallback((key: SortKey) => {
-		const currentKey = sortKeyRef.current;
-		const currentDesc = sortDescRef.current;
-
-		if (currentKey === key && currentDesc) {
-			setSortKey("created_at");
-			setSortDesc(true);
-		} else if (currentKey === key) {
-			setSortDesc(true);
-		} else {
-			setSortKey(key);
-			setSortDesc(false);
-		}
-	}, []);
-
 	useEffect(() => {
 		const handleEscape = (e: KeyboardEvent) => {
 			if (e.key === "Escape" && open) {
@ -335,32 +636,115 @@ export function DocumentsSidebar({
 			<div className="flex-1 min-h-0 overflow-x-hidden pt-0 flex flex-col">
 				<div className="px-4 pb-2">
 					<DocumentsFilters
-						typeCounts={realtimeTypeCounts}
+						typeCounts={typeCounts}
 						onSearch={setSearch}
 						searchValue={search}
 						onToggleType={onToggleType}
 						activeTypes={activeTypes}
+						onCreateFolder={() => handleCreateFolder(null)}
 					/>
 				</div>

-				<DocumentsTableShell
-					documents={displayDocs}
-					loading={!!loading}
-					error={!!error}
-					sortKey={sortKey}
-					sortDesc={sortDesc}
-					onSortChange={handleSortChange}
-					deleteDocument={handleDeleteDocument}
-					bulkDeleteDocuments={handleBulkDeleteDocuments}
-					searchSpaceId={String(searchSpaceId)}
-					hasMore={hasMore}
-					loadingMore={loadingMore}
-					onLoadMore={onLoadMore}
+				{deletableSelectedIds.length > 0 && (
+					<div className="shrink-0 flex items-center justify-center px-4 py-1.5 animate-in fade-in duration-150">
+						<button
+							type="button"
+							onClick={() => setBulkDeleteConfirmOpen(true)}
+							className="flex items-center gap-1.5 px-3 py-1 rounded-md bg-destructive text-destructive-foreground shadow-sm text-xs font-medium hover:bg-destructive/90 transition-colors"
+						>
+							<Trash2 size={12} />
+							Delete {deletableSelectedIds.length}{" "}
+							{deletableSelectedIds.length === 1 ? "item" : "items"}
+						</button>
+					</div>
+				)}
+
+				<FolderTreeView
+					folders={treeFolders}
+					documents={searchFilteredDocuments}
+					expandedIds={expandedIds}
+					onToggleExpand={toggleFolderExpand}
 					mentionedDocIds={mentionedDocIds}
 					onToggleChatMention={handleToggleChatMention}
-					isSearchMode={isSearchMode || activeTypes.length > 0}
+					onToggleFolderSelect={handleToggleFolderSelect}
+					onRenameFolder={handleRenameFolder}
+					onDeleteFolder={handleDeleteFolder}
+					onMoveFolder={handleMoveFolder}
+					onCreateFolder={handleCreateFolder}
+					searchQuery={debouncedSearch.trim() || undefined}
+					onPreviewDocument={(doc) => {
+						openDocumentTab({
+							documentId: doc.id,
+							searchSpaceId,
+							title: doc.title,
+						});
+					}}
+					onEditDocument={(doc) => {
+						openDocumentTab({
+							documentId: doc.id,
+							searchSpaceId,
+							title: doc.title,
+						});
+					}}
+					onDeleteDocument={(doc) => handleDeleteDocument(doc.id)}
+					onMoveDocument={handleMoveDocument}
+					onExportDocument={handleExportDocument}
+					activeTypes={activeTypes}
+					onDropIntoFolder={handleDropIntoFolder}
+					onReorderFolder={handleReorderFolder}
 				/>
 			</div>
+
+			<FolderPickerDialog
+				open={folderPickerOpen}
+				onOpenChange={setFolderPickerOpen}
+				folders={treeFolders}
+				title={folderPickerTarget?.type === "folder" ? "Move folder to" : "Move document to"}
+				description="Select a destination folder, or choose Root to move to the top level."
+				disabledFolderIds={folderPickerTarget?.disabledIds}
+				onSelect={handleFolderPickerSelect}
+			/>
+
+			<CreateFolderDialog
+				open={createFolderOpen}
+				onOpenChange={setCreateFolderOpen}
+				parentFolderName={createFolderParentName}
+				onConfirm={handleCreateFolderConfirm}
+			/>
+
+			<AlertDialog
+				open={bulkDeleteConfirmOpen}
+				onOpenChange={(open) => !open && !isBulkDeleting && setBulkDeleteConfirmOpen(false)}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>
+							Delete {deletableSelectedIds.length} document
+							{deletableSelectedIds.length !== 1 ? "s" : ""}?
+						</AlertDialogTitle>
+						<AlertDialogDescription>
+							This action cannot be undone.{" "}
+							{deletableSelectedIds.length === 1
+								? "This document"
+								: `These ${deletableSelectedIds.length} documents`}{" "}
+							will be permanently deleted from your search space.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel disabled={isBulkDeleting}>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={(e) => {
+								e.preventDefault();
+								handleBulkDeleteSelected();
+							}}
+							disabled={isBulkDeleting}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							{isBulkDeleting ? <Spinner size="sm" /> : "Delete"}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</>
 	);

--- a/surfsense_web/components/layout/ui/tabs/DocumentTabContent.tsx
+++ b/surfsense_web/components/layout/ui/tabs/DocumentTabContent.tsx
@ -0,0 +1,240 @@
+"use client";
+
+import { AlertCircle, Pencil } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { PlateEditor } from "@/components/editor/plate-editor";
+import { MarkdownViewer } from "@/components/markdown-viewer";
+import { Button } from "@/components/ui/button";
+import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
+
+interface DocumentContent {
+	document_id: number;
+	title: string;
+	document_type?: string;
+	source_markdown: string;
+}
+
+function DocumentSkeleton() {
+	return (
+		<div className="space-y-6 p-8 max-w-4xl mx-auto">
+			<div className="h-8 w-3/4 rounded-md bg-muted/60 animate-pulse" />
+			<div className="space-y-3">
+				<div className="h-4 w-full rounded-md bg-muted/60 animate-pulse" />
+				<div className="h-4 w-[95%] rounded-md bg-muted/60 animate-pulse [animation-delay:100ms]" />
+				<div className="h-4 w-[88%] rounded-md bg-muted/60 animate-pulse [animation-delay:200ms]" />
+				<div className="h-4 w-[60%] rounded-md bg-muted/60 animate-pulse [animation-delay:300ms]" />
+			</div>
+			<div className="h-6 w-2/5 rounded-md bg-muted/60 animate-pulse [animation-delay:400ms]" />
+			<div className="space-y-3">
+				<div className="h-4 w-full rounded-md bg-muted/60 animate-pulse [animation-delay:500ms]" />
+				<div className="h-4 w-[92%] rounded-md bg-muted/60 animate-pulse [animation-delay:600ms]" />
+				<div className="h-4 w-[75%] rounded-md bg-muted/60 animate-pulse [animation-delay:700ms]" />
+			</div>
+		</div>
+	);
+}
+
+interface DocumentTabContentProps {
+	documentId: number;
+	searchSpaceId: number;
+	title?: string;
+}
+
+export function DocumentTabContent({ documentId, searchSpaceId, title }: DocumentTabContentProps) {
+	const [doc, setDoc] = useState<DocumentContent | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [isEditing, setIsEditing] = useState(false);
+	const [saving, setSaving] = useState(false);
+	const [editedMarkdown, setEditedMarkdown] = useState<string | null>(null);
+	const markdownRef = useRef<string>("");
+	const initialLoadDone = useRef(false);
+	const changeCountRef = useRef(0);
+
+	useEffect(() => {
+		let cancelled = false;
+		setIsLoading(true);
+		setError(null);
+		setDoc(null);
+		setIsEditing(false);
+		setEditedMarkdown(null);
+		initialLoadDone.current = false;
+		changeCountRef.current = 0;
+
+		const fetchContent = async () => {
+			const token = getBearerToken();
+			if (!token) {
+				redirectToLogin();
+				return;
+			}
+
+			try {
+				const response = await authenticatedFetch(
+					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${documentId}/editor-content`,
+					{ method: "GET" }
+				);
+
+				if (cancelled) return;
+
+				if (!response.ok) {
+					const errorData = await response
+						.json()
+						.catch(() => ({ detail: "Failed to fetch document" }));
+					throw new Error(errorData.detail || "Failed to fetch document");
+				}
+
+				const data = await response.json();
+
+				if (data.source_markdown === undefined || data.source_markdown === null) {
+					setError("This document does not have viewable content.");
+					setIsLoading(false);
+					return;
+				}
+
+				markdownRef.current = data.source_markdown;
+				setDoc(data);
+				initialLoadDone.current = true;
+			} catch (err) {
+				if (cancelled) return;
+				console.error("Error fetching document:", err);
+				setError(err instanceof Error ? err.message : "Failed to fetch document");
+			} finally {
+				if (!cancelled) setIsLoading(false);
+			}
+		};
+
+		fetchContent();
+		return () => {
+			cancelled = true;
+		};
+	}, [documentId, searchSpaceId]);
+
+	const handleMarkdownChange = useCallback((md: string) => {
+		markdownRef.current = md;
+		if (!initialLoadDone.current) return;
+		changeCountRef.current += 1;
+		if (changeCountRef.current <= 1) return;
+		setEditedMarkdown(md);
+	}, []);
+
+	const handleSave = useCallback(async () => {
+		const token = getBearerToken();
+		if (!token) {
+			toast.error("Please login to save");
+			redirectToLogin();
+			return;
+		}
+
+		setSaving(true);
+		try {
+			const response = await authenticatedFetch(
+				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${documentId}/save`,
+				{
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({ source_markdown: markdownRef.current }),
+				}
+			);
+
+			if (!response.ok) {
+				const errorData = await response
+					.json()
+					.catch(() => ({ detail: "Failed to save document" }));
+				throw new Error(errorData.detail || "Failed to save document");
+			}
+
+			setDoc((prev) => (prev ? { ...prev, source_markdown: markdownRef.current } : prev));
+			setEditedMarkdown(null);
+			toast.success("Document saved! Reindexing in background...");
+		} catch (err) {
+			console.error("Error saving document:", err);
+			toast.error(err instanceof Error ? err.message : "Failed to save document");
+		} finally {
+			setSaving(false);
+		}
+	}, [documentId, searchSpaceId]);
+
+	if (isLoading) return <DocumentSkeleton />;
+
+	if (error || !doc) {
+		return (
+			<div className="flex flex-1 flex-col items-center justify-center gap-3 p-6 text-center">
+				<AlertCircle className="size-10 text-destructive" />
+				<div>
+					<p className="font-medium text-foreground text-lg">Failed to load document</p>
+					<p className="text-sm text-muted-foreground mt-1">
+						{error || "An unknown error occurred"}
+					</p>
+				</div>
+			</div>
+		);
+	}
+
+	if (isEditing) {
+		return (
+			<div className="flex flex-col h-full overflow-hidden">
+				<div className="flex items-center justify-between px-6 py-3 border-b shrink-0">
+					<div className="flex-1 min-w-0">
+						<h1 className="text-base font-semibold truncate">{doc.title || title || "Untitled"}</h1>
+						{editedMarkdown !== null && (
+							<p className="text-xs text-muted-foreground">Unsaved changes</p>
+						)}
+					</div>
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() => {
+							setIsEditing(false);
+							setEditedMarkdown(null);
+							changeCountRef.current = 0;
+						}}
+					>
+						Done editing
+					</Button>
+				</div>
+				<div className="flex-1 overflow-hidden">
+					<PlateEditor
+						key={`edit-${documentId}`}
+						preset="full"
+						markdown={doc.source_markdown}
+						onMarkdownChange={handleMarkdownChange}
+						readOnly={false}
+						placeholder="Start writing..."
+						editorVariant="default"
+						onSave={handleSave}
+						hasUnsavedChanges={editedMarkdown !== null}
+						isSaving={saving}
+						defaultEditing={true}
+					/>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col h-full overflow-hidden">
+			<div className="flex items-center justify-between px-6 py-3 border-b shrink-0">
+				<h1 className="text-base font-semibold truncate flex-1 min-w-0">
+					{doc.title || title || "Untitled"}
+				</h1>
+				{doc.document_type === "NOTE" && (
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() => setIsEditing(true)}
+						className="gap-1.5"
+					>
+						<Pencil className="size-3.5" />
+						Edit
+					</Button>
+				)}
+			</div>
+			<div className="flex-1 overflow-auto">
+				<div className="max-w-4xl mx-auto px-6 py-6">
+					<MarkdownViewer content={doc.source_markdown} />
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/surfsense_web/components/layout/ui/tabs/TabBar.tsx
+++ b/surfsense_web/components/layout/ui/tabs/TabBar.tsx
@ -0,0 +1,120 @@
+"use client";
+
+import { useAtomValue, useSetAtom } from "jotai";
+import { FileText, MessageSquare, Plus, X } from "lucide-react";
+import { useCallback, useEffect, useRef } from "react";
+import {
+	activeTabIdAtom,
+	closeTabAtom,
+	switchTabAtom,
+	type Tab,
+	tabsAtom,
+} from "@/atoms/tabs/tabs.atom";
+import { cn } from "@/lib/utils";
+
+interface TabBarProps {
+	onTabSwitch?: (tab: Tab) => void;
+	onNewChat?: () => void;
+	className?: string;
+}
+
+export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
+	const tabs = useAtomValue(tabsAtom);
+	const activeTabId = useAtomValue(activeTabIdAtom);
+	const switchTab = useSetAtom(switchTabAtom);
+	const closeTab = useSetAtom(closeTabAtom);
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	const handleTabClick = useCallback(
+		(tab: Tab) => {
+			if (tab.id === activeTabId) return;
+			switchTab(tab.id);
+			onTabSwitch?.(tab);
+		},
+		[activeTabId, switchTab, onTabSwitch]
+	);
+
+	const handleTabClose = useCallback(
+		(e: React.MouseEvent, tabId: string) => {
+			e.stopPropagation();
+			const fallback = closeTab(tabId);
+			if (fallback) {
+				onTabSwitch?.(fallback);
+			}
+		},
+		[closeTab, onTabSwitch]
+	);
+
+	// Scroll active tab into view
+	useEffect(() => {
+		if (!scrollRef.current || !activeTabId) return;
+		const activeEl = scrollRef.current.querySelector(`[data-tab-id="${activeTabId}"]`);
+		if (activeEl) {
+			activeEl.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+		}
+	}, [activeTabId]);
+
+	// Only show tab bar when there's more than one tab
+	if (tabs.length <= 1) return null;
+
+	return (
+		<div className={cn("flex items-center shrink-0 border-b bg-main-panel", className)}>
+			<div ref={scrollRef} className="flex items-center flex-1 overflow-x-auto scrollbar-none">
+				{tabs.map((tab) => {
+					const isActive = tab.id === activeTabId;
+					const Icon = tab.type === "document" ? FileText : MessageSquare;
+
+					return (
+						<button
+							key={tab.id}
+							type="button"
+							data-tab-id={tab.id}
+							onClick={() => handleTabClick(tab)}
+							className={cn(
+								"group relative flex items-center gap-1.5 px-3 h-9 min-w-0 max-w-[200px] text-xs font-medium border-r transition-colors shrink-0",
+								isActive
+									? "bg-main-panel text-foreground"
+									: "bg-muted/30 text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+							)}
+						>
+							{isActive && <span className="absolute bottom-0 left-0 right-0 h-[2px] bg-primary" />}
+							<Icon className="size-3.5 shrink-0" />
+							<span className="truncate">{tab.title}</span>
+							{/* biome-ignore lint/a11y/useSemanticElements: cannot nest button inside button */}
+							<span
+								role="button"
+								tabIndex={0}
+								onClick={(e) => handleTabClose(e, tab.id)}
+								onKeyDown={(e) => {
+									if (e.key === "Enter" || e.key === " ") {
+										e.preventDefault();
+										handleTabClose(e as unknown as React.MouseEvent, tab.id);
+									}
+								}}
+								className={cn(
+									"ml-auto shrink-0 rounded-sm p-0.5 transition-colors",
+									isActive
+										? "opacity-60 hover:opacity-100 hover:bg-muted"
+										: "opacity-0 group-hover:opacity-60 hover:opacity-100! hover:bg-muted"
+								)}
+							>
+								<X className="size-3" />
+							</span>
+						</button>
+					);
+				})}
+			</div>
+
+			{onNewChat && (
+				<button
+					type="button"
+					onClick={onNewChat}
+					className="flex items-center justify-center size-9 shrink-0 text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors"
+					title="New Chat"
+				>
+					<Plus className="size-3.5" />
+				</button>
+			)}
+		</div>
+	);
+}
--- a/surfsense_web/components/new-chat/chat-share-button.tsx
+++ b/surfsense_web/components/new-chat/chat-share-button.tsx
@ -199,7 +199,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 									className={cn(
 										"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
 										"hover:bg-accent/50 dark:hover:bg-white/10 cursor-pointer",
-										"focus:outline-none",
+										"focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
 										isSelected && "bg-accent/80 dark:bg-white/10"
 									)}
 								>
@ -248,7 +248,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 									className={cn(
 										"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
 										"hover:bg-accent/50 dark:hover:bg-white/10 cursor-pointer",
-										"focus:outline-none",
+										"focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
 										"disabled:opacity-50 disabled:cursor-not-allowed"
 									)}
 								>
--- a/surfsense_web/components/onboarding-tour.tsx
+++ b/surfsense_web/components/onboarding-tour.tsx
@ -7,10 +7,10 @@ import { useTheme } from "next-themes";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
-import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { useIsMobile } from "@/hooks/use-mobile";
+import { useZeroDocumentTypeCounts } from "@/hooks/use-zero-document-type-counts";
 import { fetchThreads } from "@/lib/chat/thread-persistence";

 interface TourStep {
@ -160,6 +160,8 @@ function TourTooltip({
 	onPrev,
 	onSkip,
 	isDarkMode,
+	shouldAnimate,
+	onAnimationEnd,
 }: {
 	step: TourStep;
 	stepIndex: number;
@ -170,23 +172,12 @@ function TourTooltip({
 	onPrev: () => void;
 	onSkip: () => void;
 	isDarkMode: boolean;
+	shouldAnimate: boolean;
+	onAnimationEnd: () => void;
 }) {
-	const [contentKey, setContentKey] = useState(stepIndex);
-	const [shouldAnimate, setShouldAnimate] = useState(false);
-	const prevStepIndexRef = useRef(stepIndex);
 	const isLastStep = stepIndex === totalSteps - 1;
 	const isFirstStep = stepIndex === 0;

-	// Update content key when step changes to trigger animation
-	// Only animate if stepIndex actually changes (not on initial mount)
-	useEffect(() => {
-		if (prevStepIndexRef.current !== stepIndex) {
-			setShouldAnimate(true);
-			setContentKey(stepIndex);
-			prevStepIndexRef.current = stepIndex;
-		}
-	}, [stepIndex]);
-
 	const bgColor = isDarkMode ? "#27272a" : "#ffffff";
 	const textColor = isDarkMode ? "#ffffff" : "#18181b";
 	const mutedTextColor = isDarkMode ? "#a1a1aa" : "#71717a";
@ -358,11 +349,11 @@ function TourTooltip({
 			>
 				{/* Content */}
 				<div
-					key={contentKey}
+					key={stepIndex}
 					style={{
 						animation: shouldAnimate ? "fadeInSlide 0.3s ease-out" : "none",
 					}}
-					onAnimationEnd={() => setShouldAnimate(false)}
+					onAnimationEnd={onAnimationEnd}
 				>
 					<h3 id="tour-title" className="text-sm font-semibold mb-1.5" style={{ color: textColor }}>
 						{step.title}
@ -427,6 +418,7 @@ export function OnboardingTour() {
 	const isMobile = useIsMobile();
 	const [isActive, setIsActive] = useState(false);
 	const [stepIndex, setStepIndex] = useState(0);
+	const [shouldAnimate, setShouldAnimate] = useState(false);
 	const [targetEl, setTargetEl] = useState<Element | null>(null);
 	const [spotlightTargetEl, setSpotlightTargetEl] = useState<Element | null>(null);
 	const [spotlightStepTarget, setSpotlightStepTarget] = useState<string | null>(null);
@ -436,6 +428,7 @@ export function OnboardingTour() {
 	const { resolvedTheme } = useTheme();
 	const pathname = usePathname();
 	const retryCountRef = useRef(0);
+	const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 	const maxRetries = 10;
 	// Track previous user ID to detect user changes
 	const previousUserIdRef = useRef<string | null>(null);
@ -451,8 +444,8 @@ export function OnboardingTour() {
 		enabled: !!searchSpaceId,
 	});

-	// Get document type counts
-	const { data: documentTypeCounts } = useAtomValue(documentTypeCountsAtom);
+	// Real-time document type counts via Zero
+	const documentTypeCounts = useZeroDocumentTypeCounts(searchSpaceId);

 	// Get connectors
 	const { data: connectors = [] } = useAtomValue(connectorsAtom);
@ -477,7 +470,7 @@ export function OnboardingTour() {
 			retryCountRef.current = 0;
 		} else if (retryCountRef.current < maxRetries) {
 			retryCountRef.current++;
-			setTimeout(() => {
+			retryTimerRef.current = setTimeout(() => {
 				const retryEl = document.querySelector(currentStep.target);
 				if (retryEl) {
 					setTargetEl(retryEl);
@ -487,6 +480,10 @@ export function OnboardingTour() {
 				}
 			}, 200);
 		}
+
+		return () => {
+			if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+		};
 	}, [currentStep]);

 	// Check if tour should run: localStorage + data validation with user ID tracking
@ -556,7 +553,11 @@ export function OnboardingTour() {
 		}

 		// User is new and hasn't seen tour - wait for DOM elements and start tour
+		let cancelled = false;
+
 		const checkAndStartTour = () => {
+			if (cancelled) return;
+
 			// Check if all required elements exist
 			const connectorEl = document.querySelector(TOUR_STEPS[0].target);
 			const documentsEl = document.querySelector(TOUR_STEPS[1].target);
@ -578,7 +579,10 @@ export function OnboardingTour() {

 		// Start checking after initial delay
 		const timer = setTimeout(checkAndStartTour, 500);
-		return () => clearTimeout(timer);
+		return () => {
+			cancelled = true;
+			clearTimeout(timer);
+		};
 	}, [mounted, user?.id, searchSpaceId, pathname, threadsData, documentTypeCounts, connectors]);

 	// Update position on resize/scroll
@ -664,6 +668,7 @@ export function OnboardingTour() {
 	const handleNext = useCallback(() => {
 		if (stepIndex < TOUR_STEPS.length - 1) {
 			retryCountRef.current = 0;
+			setShouldAnimate(true);
 			setStepIndex(stepIndex + 1);
 		} else {
 			// Tour completed - save to localStorage
@ -678,6 +683,7 @@ export function OnboardingTour() {
 	const handlePrev = useCallback(() => {
 		if (stepIndex > 0) {
 			retryCountRef.current = 0;
+			setShouldAnimate(true);
 			setStepIndex(stepIndex - 1);
 		}
 	}, [stepIndex]);
@ -701,6 +707,10 @@ export function OnboardingTour() {
 		setIsActive(false);
 	}, [user?.id]);

+	const handleAnimationEnd = useCallback(() => {
+		setShouldAnimate(false);
+	}, []);
+
 	// Handle escape key
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
@ -772,6 +782,8 @@ export function OnboardingTour() {
 							onPrev={handlePrev}
 							onSkip={handleSkip}
 							isDarkMode={isDarkMode}
+							shouldAnimate={shouldAnimate}
+							onAnimationEnd={handleAnimationEnd}
 						/>
 					</>
 				)}
--- a/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-empty-state.tsx
+++ b/surfsense_web/components/public-chat-snapshots/public-chat-snapshots-empty-state.tsx
@ -1,5 +1,3 @@
-"use client";
-
 import { Link2Off } from "lucide-react";

 interface PublicChatSnapshotsEmptyStateProps {
--- a/surfsense_web/components/report-panel/report-panel.tsx
+++ b/surfsense_web/components/report-panel/report-panel.tsx
@ -9,14 +9,13 @@ import { currentThreadAtom } from "@/atoms/chat/current-thread.atom";
 import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { PlateEditor } from "@/components/editor/plate-editor";
 import { MarkdownViewer } from "@/components/markdown-viewer";
+import { EXPORT_FILE_EXTENSIONS, ExportDropdownItems } from "@/components/shared/ExportMenuItems";
 import { Button } from "@/components/ui/button";
 import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useMediaQuery } from "@/hooks/use-media-query";
@ -198,19 +197,6 @@ export function ReportPanelContent({
 		}
 	}, [currentMarkdown]);

-	// Maps backend format values to download file extensions
-	const FILE_EXTENSIONS: Record<string, string> = {
-		pdf: "pdf",
-		docx: "docx",
-		html: "html",
-		latex: "tex",
-		epub: "epub",
-		odt: "odt",
-		plain: "txt",
-		md: "md",
-	};
-
-	// Export report
 	const handleExport = useCallback(
 		async (format: string) => {
 			setExporting(format);
@ -219,7 +205,7 @@ export function ReportPanelContent({
 					.replace(/[^a-zA-Z0-9 _-]/g, "_")
 					.trim()
 					.slice(0, 80) || "report";
-			const ext = FILE_EXTENSIONS[format] ?? format;
+			const ext = EXPORT_FILE_EXTENSIONS[format] ?? format;
 			try {
 				if (format === "md") {
 					if (!currentMarkdown) return;
@ -329,68 +315,11 @@ export function ReportPanelContent({
 							align="start"
 							className={`min-w-[200px] select-none${insideDrawer ? " z-[100]" : ""}`}
 						>
-							{!shareToken && (
-								<>
-									<DropdownMenuLabel className="text-xs text-muted-foreground">
-										Documents
-									</DropdownMenuLabel>
-									<DropdownMenuItem
-										onClick={() => handleExport("pdf")}
-										disabled={exporting !== null}
-									>
-										PDF (.pdf)
-									</DropdownMenuItem>
-									<DropdownMenuItem
-										onClick={() => handleExport("docx")}
-										disabled={exporting !== null}
-									>
-										Word (.docx)
-									</DropdownMenuItem>
-									<DropdownMenuItem
-										onClick={() => handleExport("odt")}
-										disabled={exporting !== null}
-									>
-										OpenDocument (.odt)
-									</DropdownMenuItem>
-									<DropdownMenuSeparator />
-									<DropdownMenuLabel className="text-xs text-muted-foreground">
-										Web &amp; E-Book
-									</DropdownMenuLabel>
-									<DropdownMenuItem
-										onClick={() => handleExport("html")}
-										disabled={exporting !== null}
-									>
-										HTML (.html)
-									</DropdownMenuItem>
-									<DropdownMenuItem
-										onClick={() => handleExport("epub")}
-										disabled={exporting !== null}
-									>
-										EPUB (.epub)
-									</DropdownMenuItem>
-									<DropdownMenuSeparator />
-									<DropdownMenuLabel className="text-xs text-muted-foreground">
-										Source &amp; Plain
-									</DropdownMenuLabel>
-									<DropdownMenuItem
-										onClick={() => handleExport("latex")}
-										disabled={exporting !== null}
-									>
-										LaTeX (.tex)
-									</DropdownMenuItem>
-								</>
-							)}
-							<DropdownMenuItem onClick={() => handleExport("md")} disabled={exporting !== null}>
-								Markdown (.md)
-							</DropdownMenuItem>
-							{!shareToken && (
-								<DropdownMenuItem
-									onClick={() => handleExport("plain")}
-									disabled={exporting !== null}
-								>
-									Plain Text (.txt)
-								</DropdownMenuItem>
-							)}
+							<ExportDropdownItems
+								onExport={handleExport}
+								exporting={exporting}
+								showAllFormats={!shareToken}
+							/>
 						</DropdownMenuContent>
 					</DropdownMenu>

--- a/surfsense_web/components/settings/general-settings-manager.tsx
+++ b/surfsense_web/components/settings/general-settings-manager.tsx
@ -15,6 +15,7 @@ import { Label } from "@/components/ui/label";
 import { Skeleton } from "@/components/ui/skeleton";
 import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
 import { cacheKeys } from "@/lib/query-client/cache-keys";
+import { Spinner } from "../ui/spinner";

 interface GeneralSettingsManagerProps {
 	searchSpaceId: number;
@ -26,6 +27,7 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
 	const {
 		data: searchSpace,
 		isLoading: loading,
+		isError,
 		refetch: fetchSearchSpace,
 	} = useQuery({
 		queryKey: cacheKeys.searchSpaces.detail(searchSpaceId.toString()),
@ -81,6 +83,11 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
 		}
 	};

+	const onSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+		handleSave();
+	};
+
 	if (loading) {
 		return (
 			<div className="space-y-4 md:space-y-6">
@ -98,6 +105,17 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
 		);
 	}

+	if (isError) {
+		return (
+			<div className="flex flex-col items-center justify-center gap-3 py-8 text-center">
+				<p className="text-sm text-destructive">Failed to load settings.</p>
+				<Button variant="outline" size="sm" onClick={() => fetchSearchSpace()}>
+					Retry
+				</Button>
+			</div>
+		);
+	}
+
 	return (
 		<div className="space-y-4 md:space-y-6">
 			<Alert className="bg-muted/50 py-3 md:py-4">
@ -109,60 +127,66 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
 			</Alert>

 			{/* Search Space Details Card */}
-			<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">Search Space Details</CardTitle>
-					<CardDescription className="text-xs md:text-sm">
-						Manage the basic information for this search space.
-					</CardDescription>
-				</CardHeader>
-				<CardContent className="space-y-4 md:space-y-5 px-3 md:px-6 pb-3 md:pb-6">
-					<div className="space-y-1.5 md:space-y-2">
-						<Label htmlFor="search-space-name" className="text-sm md:text-base font-medium">
-							{t("general_name_label")}
-						</Label>
-						<Input
-							id="search-space-name"
-							placeholder={t("general_name_placeholder")}
-							value={name}
-							onChange={(e) => setName(e.target.value)}
-							className="text-sm md:text-base h-9 md:h-10"
-						/>
-						<p className="text-[10px] md:text-xs text-muted-foreground">
-							{t("general_name_description")}
-						</p>
-					</div>
+			<form onSubmit={onSubmit} 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">Search Space Details</CardTitle>
+						<CardDescription className="text-xs md:text-sm">
+							Manage the basic information for this search space.
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-4 md:space-y-5 px-3 md:px-6 pb-3 md:pb-6">
+						<div className="space-y-1.5 md:space-y-2">
+							<Label htmlFor="search-space-name" className="text-sm md:text-base font-medium">
+								{t("general_name_label")}
+							</Label>
+							<Input
+								id="search-space-name"
+								placeholder={t("general_name_placeholder")}
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								className="text-sm md:text-base h-9 md:h-10"
+							/>
+							<p className="text-[10px] md:text-xs text-muted-foreground">
+								{t("general_name_description")}
+							</p>
+						</div>

-					<div className="space-y-1.5 md:space-y-2">
-						<Label htmlFor="search-space-description" className="text-sm md:text-base font-medium">
-							{t("general_description_label")}{" "}
-							<span className="text-muted-foreground font-normal">({tCommon("optional")})</span>
-						</Label>
-						<Input
-							id="search-space-description"
-							placeholder={t("general_description_placeholder")}
-							value={description}
-							onChange={(e) => setDescription(e.target.value)}
-							className="text-sm md:text-base h-9 md:h-10"
-						/>
-						<p className="text-[10px] md:text-xs text-muted-foreground">
-							{t("general_description_description")}
-						</p>
-					</div>
-				</CardContent>
-			</Card>
+						<div className="space-y-1.5 md:space-y-2">
+							<Label
+								htmlFor="search-space-description"
+								className="text-sm md:text-base font-medium"
+							>
+								{t("general_description_label")}{" "}
+								<span className="text-muted-foreground font-normal">({tCommon("optional")})</span>
+							</Label>
+							<Input
+								id="search-space-description"
+								placeholder={t("general_description_placeholder")}
+								value={description}
+								onChange={(e) => setDescription(e.target.value)}
+								className="text-sm md:text-base h-9 md:h-10"
+							/>
+							<p className="text-[10px] md:text-xs text-muted-foreground">
+								{t("general_description_description")}
+							</p>
+						</div>
+					</CardContent>
+				</Card>

-			{/* Action Buttons */}
-			<div className="flex justify-end pt-3 md:pt-4">
-				<Button
-					variant="outline"
-					onClick={handleSave}
-					disabled={!hasChanges || saving || !name.trim()}
-					className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
-				>
-					{saving ? t("general_saving") : t("general_save")}
-				</Button>
-			</div>
+				{/* Action Buttons */}
+				<div className="flex justify-end pt-3 md:pt-4">
+					<Button
+						type="submit"
+						variant="outline"
+						disabled={!hasChanges || saving || !name.trim()}
+						className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
+					>
+						{saving ? <Spinner size="sm" /> : null}
+						{saving ? t("general_saving") : t("general_save")}
+					</Button>
+				</div>
+			</form>
 		</div>
 	);
 }
--- a/surfsense_web/components/settings/prompt-config-manager.tsx
+++ b/surfsense_web/components/settings/prompt-config-manager.tsx
@ -13,6 +13,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
 import { authenticatedFetch } from "@/lib/auth-utils";
 import { cacheKeys } from "@/lib/query-client/cache-keys";
+import { Spinner } from "../ui/spinner";

 interface PromptConfigManagerProps {
 	searchSpaceId: number;
@ -83,6 +84,11 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 		}
 	};

+	const onSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+		handleSave();
+	};
+
 	if (loading) {
 		return (
 			<div className="space-y-4 md:space-y-6">
@ -124,69 +130,73 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
 			</Alert>

 			{/* System Instructions Card */}
-			<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">Custom System Instructions</CardTitle>
-					<CardDescription className="text-xs md:text-sm">
-						Provide specific guidelines for how you want the AI to respond. These instructions will
-						be applied to all answers in this search space.
-					</CardDescription>
-				</CardHeader>
-				<CardContent className="space-y-3 md:space-y-4 px-3 md:px-6 pb-3 md:pb-6">
-					<div className="space-y-1.5 md:space-y-2">
-						<Label
-							htmlFor="custom-instructions-settings"
-							className="text-sm md:text-base font-medium"
-						>
-							Your Instructions
-						</Label>
-						<Textarea
-							id="custom-instructions-settings"
-							placeholder="E.g., Always provide practical examples, be concise, focus on technical details, use simple language, respond in a specific format..."
-							value={customInstructions}
-							onChange={(e) => setCustomInstructions(e.target.value)}
-							rows={10}
-							className="resize-none font-mono text-xs md:text-sm"
-						/>
-						<div className="flex items-center justify-between">
-							<p className="text-[10px] md:text-xs text-muted-foreground">
-								{customInstructions.length} characters
-							</p>
-							{customInstructions.length > 0 && (
-								<Button
-									variant="ghost"
-									size="sm"
-									onClick={() => setCustomInstructions("")}
-									className="h-auto py-0.5 md:py-1 px-1.5 md:px-2 text-[10px] md:text-xs"
-								>
-									Clear
-								</Button>
-							)}
+			<form onSubmit={onSubmit} 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">Custom System Instructions</CardTitle>
+						<CardDescription className="text-xs md:text-sm">
+							Provide specific guidelines for how you want the AI to respond. These instructions
+							will be applied to all answers in this search space.
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-3 md:space-y-4 px-3 md:px-6 pb-3 md:pb-6">
+						<div className="space-y-1.5 md:space-y-2">
+							<Label
+								htmlFor="custom-instructions-settings"
+								className="text-sm md:text-base font-medium"
+							>
+								Your Instructions
+							</Label>
+							<Textarea
+								id="custom-instructions-settings"
+								placeholder="E.g., Always provide practical examples, be concise, focus on technical details, use simple language, respond in a specific format..."
+								value={customInstructions}
+								onChange={(e) => setCustomInstructions(e.target.value)}
+								rows={10}
+								className="resize-none font-mono text-xs md:text-sm"
+							/>
+							<div className="flex items-center justify-between">
+								<p className="text-[10px] md:text-xs text-muted-foreground">
+									{customInstructions.length} characters
+								</p>
+								{customInstructions.length > 0 && (
+									<Button
+										type="button"
+										variant="ghost"
+										size="sm"
+										onClick={() => setCustomInstructions("")}
+										className="h-auto py-0.5 md:py-1 px-1.5 md:px-2 text-[10px] md:text-xs"
+									>
+										Clear
+									</Button>
+								)}
+							</div>
 						</div>
-					</div>

-					{customInstructions.trim().length === 0 && (
-						<Alert className="py-2 md:py-3">
-							<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
-							<AlertDescription className="text-xs md:text-sm">
-								No system instructions are currently set. The AI will use default behavior.
-							</AlertDescription>
-						</Alert>
-					)}
-				</CardContent>
-			</Card>
+						{customInstructions.trim().length === 0 && (
+							<Alert className="py-2 md:py-3">
+								<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+								<AlertDescription className="text-xs md:text-sm">
+									No system instructions are currently set. The AI will use default behavior.
+								</AlertDescription>
+							</Alert>
+						)}
+					</CardContent>
+				</Card>

-			{/* Action Buttons */}
-			<div className="flex justify-end pt-3 md:pt-4">
-				<Button
-					variant="outline"
-					onClick={handleSave}
-					disabled={!hasChanges || saving}
-					className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
-				>
-					{saving ? "Saving" : "Save Instructions"}
-				</Button>
-			</div>
+				{/* Action Buttons */}
+				<div className="flex justify-end pt-3 md:pt-4">
+					<Button
+						type="submit"
+						variant="outline"
+						disabled={!hasChanges || saving}
+						className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
+					>
+						{saving ? <Spinner size="sm" /> : null}
+						{saving ? "Saving" : "Save Instructions"}
+					</Button>
+				</div>
+			</form>
 		</div>
 	);
 }
--- a/surfsense_web/components/shared/ExportMenuItems.tsx
+++ b/surfsense_web/components/shared/ExportMenuItems.tsx
@ -0,0 +1,144 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { ContextMenuItem } from "@/components/ui/context-menu";
+import {
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+
+export const EXPORT_FILE_EXTENSIONS: Record<string, string> = {
+	pdf: "pdf",
+	docx: "docx",
+	html: "html",
+	latex: "tex",
+	epub: "epub",
+	odt: "odt",
+	plain: "txt",
+	md: "md",
+};
+
+interface ExportMenuItemsProps {
+	onExport: (format: string) => void;
+	exporting: string | null;
+	/** Hide server-side formats (PDF, DOCX, etc.) — only show md */
+	showAllFormats?: boolean;
+}
+
+export function ExportDropdownItems({
+	onExport,
+	exporting,
+	showAllFormats = true,
+}: ExportMenuItemsProps) {
+	const handle = (format: string) => (e: React.MouseEvent) => {
+		e.stopPropagation();
+		onExport(format);
+	};
+
+	return (
+		<>
+			{showAllFormats && (
+				<>
+					<DropdownMenuLabel className="text-xs text-muted-foreground">Documents</DropdownMenuLabel>
+					<DropdownMenuItem onClick={handle("pdf")} disabled={exporting !== null}>
+						{exporting === "pdf" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+						PDF (.pdf)
+					</DropdownMenuItem>
+					<DropdownMenuItem onClick={handle("docx")} disabled={exporting !== null}>
+						{exporting === "docx" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+						Word (.docx)
+					</DropdownMenuItem>
+					<DropdownMenuItem onClick={handle("odt")} disabled={exporting !== null}>
+						{exporting === "odt" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+						OpenDocument (.odt)
+					</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					<DropdownMenuLabel className="text-xs text-muted-foreground">
+						Web &amp; E-Book
+					</DropdownMenuLabel>
+					<DropdownMenuItem onClick={handle("html")} disabled={exporting !== null}>
+						{exporting === "html" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+						HTML (.html)
+					</DropdownMenuItem>
+					<DropdownMenuItem onClick={handle("epub")} disabled={exporting !== null}>
+						{exporting === "epub" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+						EPUB (.epub)
+					</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					<DropdownMenuLabel className="text-xs text-muted-foreground">
+						Source &amp; Plain
+					</DropdownMenuLabel>
+					<DropdownMenuItem onClick={handle("latex")} disabled={exporting !== null}>
+						{exporting === "latex" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+						LaTeX (.tex)
+					</DropdownMenuItem>
+				</>
+			)}
+			<DropdownMenuItem onClick={handle("md")} disabled={exporting !== null}>
+				{exporting === "md" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+				Markdown (.md)
+			</DropdownMenuItem>
+			{showAllFormats && (
+				<DropdownMenuItem onClick={handle("plain")} disabled={exporting !== null}>
+					{exporting === "plain" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+					Plain Text (.txt)
+				</DropdownMenuItem>
+			)}
+		</>
+	);
+}
+
+export function ExportContextItems({
+	onExport,
+	exporting,
+	showAllFormats = true,
+}: ExportMenuItemsProps) {
+	const handle = (format: string) => (e: React.MouseEvent) => {
+		e.stopPropagation();
+		onExport(format);
+	};
+
+	return (
+		<>
+			{showAllFormats && (
+				<>
+					<ContextMenuItem onClick={handle("pdf")} disabled={exporting !== null}>
+						{exporting === "pdf" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+						PDF (.pdf)
+					</ContextMenuItem>
+					<ContextMenuItem onClick={handle("docx")} disabled={exporting !== null}>
+						{exporting === "docx" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+						Word (.docx)
+					</ContextMenuItem>
+					<ContextMenuItem onClick={handle("odt")} disabled={exporting !== null}>
+						{exporting === "odt" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+						OpenDocument (.odt)
+					</ContextMenuItem>
+					<ContextMenuItem onClick={handle("html")} disabled={exporting !== null}>
+						{exporting === "html" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+						HTML (.html)
+					</ContextMenuItem>
+					<ContextMenuItem onClick={handle("epub")} disabled={exporting !== null}>
+						{exporting === "epub" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+						EPUB (.epub)
+					</ContextMenuItem>
+					<ContextMenuItem onClick={handle("latex")} disabled={exporting !== null}>
+						{exporting === "latex" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+						LaTeX (.tex)
+					</ContextMenuItem>
+				</>
+			)}
+			<ContextMenuItem onClick={handle("md")} disabled={exporting !== null}>
+				{exporting === "md" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+				Markdown (.md)
+			</ContextMenuItem>
+			{showAllFormats && (
+				<ContextMenuItem onClick={handle("plain")} disabled={exporting !== null}>
+					{exporting === "plain" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+					Plain Text (.txt)
+				</ContextMenuItem>
+			)}
+		</>
+	);
+}
--- a/surfsense_web/components/theme/theme-toggle.tsx
+++ b/surfsense_web/components/theme/theme-toggle.tsx
@ -215,7 +215,7 @@ export const createAnimation = (
      `,
 		};
 	}
-	if (variant === "circle" && start == "center") {
+	if (variant === "circle" && start === "center") {
 		return {
 			name: `${variant}-${start}${blur ? "-blur" : ""}`,
 			css: `
--- a/surfsense_web/components/tool-ui/google-calendar/update-event.tsx
+++ b/surfsense_web/components/tool-ui/google-calendar/update-event.tsx
@ -253,6 +253,12 @@ function ApprovalCard({
 		String(effectiveNewDescription ?? "") !== (event?.description ?? "");

 	const buildFinalArgs = useCallback(() => {
+		const base = {
+			event_id: event?.event_id,
+			document_id: event?.document_id,
+			connector_id: account?.id,
+		};
+
 		if (pendingEdits) {
 			const attendeesArr = pendingEdits.attendees
 				? pendingEdits.attendees
@ -260,22 +266,34 @@ function ApprovalCard({
 						.map((e) => e.trim())
 						.filter(Boolean)
 				: null;
+			const origAttendees = event?.attendees?.map((a) => a.email) ?? [];
+
 			return {
-				event_id: event?.event_id,
-				document_id: event?.document_id,
-				connector_id: account?.id,
-				new_summary: pendingEdits.summary || null,
-				new_description: pendingEdits.description || null,
-				new_start_datetime: pendingEdits.start_datetime || null,
-				new_end_datetime: pendingEdits.end_datetime || null,
-				new_location: pendingEdits.location || null,
-				new_attendees: attendeesArr,
+				...base,
+				new_summary:
+					pendingEdits.summary && pendingEdits.summary !== (event?.summary ?? "")
+						? pendingEdits.summary
+						: null,
+				new_description:
+					pendingEdits.description !== (event?.description ?? "")
+						? pendingEdits.description || null
+						: null,
+				new_start_datetime:
+					pendingEdits.start_datetime && pendingEdits.start_datetime !== (event?.start ?? "")
+						? pendingEdits.start_datetime
+						: null,
+				new_end_datetime:
+					pendingEdits.end_datetime && pendingEdits.end_datetime !== (event?.end ?? "")
+						? pendingEdits.end_datetime
+						: null,
+				new_location:
+					pendingEdits.location !== (event?.location ?? "") ? pendingEdits.location || null : null,
+				new_attendees:
+					attendeesArr && attendeesArr.join(",") !== origAttendees.join(",") ? attendeesArr : null,
 			};
 		}
 		return {
-			event_id: event?.event_id,
-			document_id: event?.document_id,
-			connector_id: account?.id,
+			...base,
 			new_summary: actionArgs.new_summary ?? null,
 			new_description: actionArgs.new_description ?? null,
 			new_start_datetime: actionArgs.new_start_datetime ?? null,
--- a/surfsense_web/components/tool-ui/sandbox-execute.tsx
+++ b/surfsense_web/components/tool-ui/sandbox-execute.tsx
@ -67,13 +67,14 @@ const SANDBOX_FILE_RE = /^SANDBOX_FILE:\s*(.+)$/gm;

 function extractSandboxFiles(text: string): SandboxFile[] {
 	const files: SandboxFile[] = [];
-	let match: RegExpExecArray | null;
-	while ((match = SANDBOX_FILE_RE.exec(text)) !== null) {
+	let match: RegExpExecArray | null = SANDBOX_FILE_RE.exec(text);
+	while (match !== null) {
 		const filePath = match[1].trim();
 		if (filePath) {
 			const name = filePath.includes("/") ? filePath.split("/").pop() || filePath : filePath;
 			files.push({ path: filePath, name });
 		}
+		match = SANDBOX_FILE_RE.exec(text);
 	}
 	SANDBOX_FILE_RE.lastIndex = 0;
 	return files;
@ -148,7 +149,7 @@ function parseExecuteResult(result: ExecuteResult): ParsedOutput {

 function truncateCommand(command: string, maxLen = 80): string {
 	if (command.length <= maxLen) return command;
-	return command.slice(0, maxLen) + "…";
+	return `${command.slice(0, maxLen)}…`;
 }

 // ============================================================================
--- a/surfsense_web/components/ui/block-draggable.tsx
+++ b/surfsense_web/components/ui/block-draggable.tsx
@ -18,7 +18,7 @@ import {
 import * as React from "react";

 import { Button } from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";

 const UNDRAGGABLE_KEYS = [KEYS.column, KEYS.tr, KEYS.td];
@ -94,23 +94,24 @@ function Draggable(props: PlateElementProps) {
 	};

 	// clear up virtual multiple preview when drag end
+	// biome-ignore lint/correctness/useExhaustiveDependencies: resetPreview is stable; intentionally only run on isDragging change
 	React.useEffect(() => {
 		if (!isDragging) {
 			resetPreview();
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isDragging]);

+	// biome-ignore lint/correctness/useExhaustiveDependencies: previewRef is a stable ref; only run on isAboutToDrag change
 	React.useEffect(() => {
 		if (isAboutToDrag) {
 			previewRef.current?.classList.remove("opacity-0");
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isAboutToDrag]);

 	const [dragButtonTop, setDragButtonTop] = React.useState(0);

 	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: plate editor block wrapper requires mouse events
 		<div
 			className={cn(
 				"relative",
@ -158,6 +159,7 @@ function Draggable(props: PlateElementProps) {
 				contentEditable={false}
 			/>

+			{/* biome-ignore lint/a11y/noStaticElementInteractions: plate editor context menu handler */}
 			<div
 				ref={nodeRef}
 				className="slate-blockWrapper flow-root"
@ -215,8 +217,10 @@ const DragHandle = React.memo(function DragHandle({
 	return (
 		<Tooltip>
 			<TooltipTrigger asChild>
+				{/* biome-ignore lint/a11y/useSemanticElements: drag handle requires div for plate editor integration */}
 				<div
 					className="flex size-full items-center justify-center"
+					tabIndex={0}
 					onClick={(e) => {
 						e.preventDefault();
 						editor.getApi(BlockSelectionPlugin).blockSelection.focus();
@ -291,6 +295,12 @@ const DragHandle = React.memo(function DragHandle({
 					onMouseUp={() => {
 						resetPreview();
 					}}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							editor.getApi(BlockSelectionPlugin).blockSelection.focus();
+						}
+					}}
 					data-plate-prevent-deselect
 					role="button"
 				>
--- a/surfsense_web/components/ui/equation-node.tsx
+++ b/surfsense_web/components/ui/equation-node.tsx
@ -43,10 +43,16 @@ export function EquationElement({ children, ...props }: PlateElementProps<TEquat
 				props.className
 			)}
 		>
+			{/* biome-ignore lint/a11y/useSemanticElements: contentEditable context requires div */}
 			<div
+				role="button"
+				tabIndex={0}
 				className="flex cursor-pointer items-center justify-center"
 				contentEditable={false}
 				onDoubleClick={() => setIsEditing(true)}
+				onKeyDown={(e) => {
+					if (e.key === "Enter") setIsEditing(true);
+				}}
 			>
 				{element.texExpression ? (
 					<div ref={katexRef} className="text-center" />
@ -123,10 +129,16 @@ export function InlineEquationElement({ children, ...props }: PlateElementProps<
 			as="span"
 			className={cn("inline rounded-sm px-0.5", selected && "bg-brand/15", props.className)}
 		>
+			{/* biome-ignore lint/a11y/useSemanticElements: inline contentEditable context requires span */}
 			<span
+				role="button"
+				tabIndex={0}
 				className="cursor-pointer"
 				contentEditable={false}
 				onDoubleClick={() => setIsEditing(true)}
+				onKeyDown={(e) => {
+					if (e.key === "Enter") setIsEditing(true);
+				}}
 			>
 				{element.texExpression ? (
 					<span ref={katexRef} />
--- a/surfsense_web/components/ui/expanded-gif-overlay.tsx
+++ b/surfsense_web/components/ui/expanded-gif-overlay.tsx
@ -1,7 +1,7 @@
 "use client";

 import { AnimatePresence, motion } from "motion/react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";

 function isVideoSrc(src: string) {
@ -17,6 +17,12 @@ function ExpandedMediaOverlay({
 	alt: string;
 	onClose: () => void;
 }) {
+	const overlayRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		overlayRef.current?.focus();
+	}, []);
+
 	useEffect(() => {
 		const handleKey = (e: KeyboardEvent) => {
 			if (e.key === "Escape") onClose();
@ -52,12 +58,20 @@ function ExpandedMediaOverlay({

 	return createPortal(
 		<motion.div
+			role="dialog"
+			aria-modal="true"
+			aria-label="Expanded media view"
+			tabIndex={-1}
+			ref={overlayRef}
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
 			exit={{ opacity: 0 }}
 			transition={{ duration: 0.2 }}
 			className="fixed inset-0 z-100 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm sm:p-8"
 			onClick={onClose}
+			onKeyDown={(e) => {
+				if (e.key === "Escape") onClose();
+			}}
 		>
 			{mediaElement}
 		</motion.div>,
--- a/surfsense_web/components/ui/hero-carousel.tsx
+++ b/surfsense_web/components/ui/hero-carousel.tsx
@ -97,7 +97,7 @@ function HeroCarouselCard({
 		observer.observe(video);

 		return () => observer.disconnect();
-	}, [src]);
+	}, []);

 	const handleCanPlay = useCallback(() => {
 		setHasLoaded(true);
@ -114,7 +114,19 @@ function HeroCarouselCard({
 						<p className="text-sm text-neutral-500 dark:text-neutral-400">{description}</p>
 					</div>
 				</div>
-				<div className="cursor-pointer bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950" onClick={open}>
+				{/* biome-ignore lint/a11y/useSemanticElements: div wraps video element, button would break layout */}
+				<div
+					role="button"
+					tabIndex={0}
+					className="cursor-pointer bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950"
+					onClick={open}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							open();
+						}
+					}}
+				>
 					<div className="relative">
 						<video
 							ref={videoRef}
@ -145,21 +157,26 @@ function HeroCarousel() {
 	const [isGifExpanded, setIsGifExpanded] = useState(false);
 	const directionRef = useRef<"forward" | "backward">("forward");

-	const goTo = useCallback(
-		(newIndex: number) => {
-			directionRef.current = newIndex >= activeIndex ? "forward" : "backward";
-			setActiveIndex(newIndex);
-		},
-		[activeIndex]
-	);
+	const goTo = useCallback((newIndex: number) => {
+		setActiveIndex((prev) => {
+			directionRef.current = newIndex >= prev ? "forward" : "backward";
+			return newIndex;
+		});
+	}, []);

 	const goToPrev = useCallback(() => {
-		goTo(activeIndex <= 0 ? carouselItems.length - 1 : activeIndex - 1);
-	}, [activeIndex, goTo]);
+		setActiveIndex((prev) => {
+			directionRef.current = "backward";
+			return prev <= 0 ? carouselItems.length - 1 : prev - 1;
+		});
+	}, []);

 	const goToNext = useCallback(() => {
-		goTo(activeIndex >= carouselItems.length - 1 ? 0 : activeIndex + 1);
-	}, [activeIndex, goTo]);
+		setActiveIndex((prev) => {
+			directionRef.current = "forward";
+			return prev >= carouselItems.length - 1 ? 0 : prev + 1;
+		});
+	}, []);

 	const item = carouselItems[activeIndex];
 	const isForward = directionRef.current === "forward";
@ -185,45 +202,45 @@ function HeroCarousel() {
 				</AnimatePresence>
 			</div>

-		<div className="relative z-5 mt-4 flex items-center justify-center gap-2">
-			<button
-				type="button"
-				onClick={() => !isGifExpanded && goToPrev()}
-				className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
-				aria-label="Previous slide"
-			>
-				<ChevronLeft className="size-5" />
-			</button>
+			<div className="relative z-5 mt-4 flex items-center justify-center gap-2">
+				<button
+					type="button"
+					onClick={() => !isGifExpanded && goToPrev()}
+					className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
+					aria-label="Previous slide"
+				>
+					<ChevronLeft className="size-5" />
+				</button>

-			<div className="flex items-center">
-				{carouselItems.map((_, i) => (
-					<button
-						key={`dot_${i}`}
-						type="button"
-						onClick={() => !isGifExpanded && goTo(i)}
-						className="flex h-11 min-w-[28px] items-center justify-center touch-manipulation"
-						aria-label={`Go to slide ${i + 1}`}
-					>
-						<span
-							className={`block h-2.5 rounded-full transition-all duration-300 ${
-								i === activeIndex
-									? "w-6 bg-neutral-900 dark:bg-white"
-									: "w-2.5 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500"
-							}`}
-						/>
-					</button>
-				))}
+				<div className="flex items-center">
+					{carouselItems.map((_, i) => (
+						<button
+							key={`dot_${i}`}
+							type="button"
+							onClick={() => !isGifExpanded && goTo(i)}
+							className="flex h-11 min-w-[28px] items-center justify-center touch-manipulation"
+							aria-label={`Go to slide ${i + 1}`}
+						>
+							<span
+								className={`block h-2.5 rounded-full transition-all duration-300 ${
+									i === activeIndex
+										? "w-6 bg-neutral-900 dark:bg-white"
+										: "w-2.5 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500"
+								}`}
+							/>
+						</button>
+					))}
+				</div>
+
+				<button
+					type="button"
+					onClick={() => !isGifExpanded && goToNext()}
+					className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
+					aria-label="Next slide"
+				>
+					<ChevronRight className="size-5" />
+				</button>
 			</div>
-
-			<button
-				type="button"
-				onClick={() => !isGifExpanded && goToNext()}
-				className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
-				aria-label="Next slide"
-			>
-				<ChevronRight className="size-5" />
-			</button>
-		</div>
 		</div>
 	);
 }
--- a/surfsense_web/components/ui/link-toolbar.tsx
+++ b/surfsense_web/components/ui/link-toolbar.tsx
@ -160,22 +160,21 @@ function LinkOpenButton() {
 	const editor = useEditorRef();
 	const selection = useEditorSelection();

-	const attributes = React.useMemo(
-		() => {
-			const entry = editor.api.node<TLinkElement>({
-				match: { type: editor.getType(KEYS.link) },
-			});
-			if (!entry) {
-				return {};
-			}
-			const [element] = entry;
-			return getLinkAttributes(editor, element);
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[editor, selection]
-	);
+	// biome-ignore lint/correctness/useExhaustiveDependencies: selection triggers recalculation of link attributes
+	const attributes = React.useMemo(() => {
+		const entry = editor.api.node<TLinkElement>({
+			match: { type: editor.getType(KEYS.link) },
+		});
+		if (!entry) {
+			return {};
+		}
+		const [element] = entry;
+		return getLinkAttributes(editor, element);
+	}, [editor, selection]);

 	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: <a> with spread attributes has dynamic href
+		// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label needed for icon-only link
 		<a
 			{...attributes}
 			className={buttonVariants({
@ -185,6 +184,9 @@ function LinkOpenButton() {
 			onMouseOver={(e) => {
 				e.stopPropagation();
 			}}
+			onFocus={(e) => {
+				e.stopPropagation();
+			}}
 			aria-label="Open link in a new tab"
 			target="_blank"
 			rel="noopener noreferrer"
--- a/surfsense_web/components/ui/toolbar.tsx
+++ b/surfsense_web/components/ui/toolbar.tsx
@ -219,7 +219,8 @@ export function ToolbarSplitButtonSecondary({
 	...props
 }: React.ComponentPropsWithoutRef<"span"> & VariantProps<typeof dropdownArrowVariants>) {
 	return (
-		<span
+		<button
+			type="button"
 			className={cn(
 				dropdownArrowVariants({
 					size,
@ -229,11 +230,10 @@ export function ToolbarSplitButtonSecondary({
 				className
 			)}
 			onClick={(e) => e.stopPropagation()}
-			role="button"
-			{...props}
+			{...(props as React.ComponentPropsWithoutRef<"button">)}
 		>
 			<ChevronDown className="size-3.5 text-muted-foreground" data-icon />
-		</span>
+		</button>
 	);
 }