feat: made agent file sytem optimized

2026-04-29 02:46:25 +02:00 · 2026-03-28 16:39:46 -07:00 · 2026-03-28 16:39:46 -07:00 · 2cc2d339e6
commit 2cc2d339e6
parent ee0b59c0fa
67 changed files with 8011 additions and 5591 deletions
--- 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 { useZeroDocumentTypeCounts } from "@/hooks/use-zero-document-type-counts";
 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";
--- a/surfsense_web/components/assistant-ui/markdown-text.tsx
+++ b/surfsense_web/components/assistant-ui/markdown-text.tsx
@ -421,7 +421,9 @@ 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";
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@ -109,7 +109,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 />
@ -1062,7 +1062,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/documents/CreateFolderDialog.tsx
+++ b/surfsense_web/components/documents/CreateFolderDialog.tsx
@ -69,7 +69,9 @@ export function CreateFolderDialog({

 				<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>
+						<Label htmlFor="folder-name" className="text-sm">
+							Folder name
+						</Label>
 						<Input
 							ref={inputRef}
 							id="folder-name"
@ -91,11 +93,7 @@ export function CreateFolderDialog({
 						>
 							Cancel
 						</Button>
-						<Button
-							type="submit"
-							disabled={!name.trim()}
-							className="h-8 sm:h-9 text-xs sm:text-sm"
-						>
+						<Button type="submit" disabled={!name.trim()} className="h-8 sm:h-9 text-xs sm:text-sm">
 							Create
 						</Button>
 					</DialogFooter>
--- a/surfsense_web/components/documents/DocumentNode.tsx
+++ b/surfsense_web/components/documents/DocumentNode.tsx
@ -1,6 +1,15 @@
 "use client";

-import { AlertCircle, Clock, Download, Eye, MoreHorizontal, Move, PenLine, Trash2 } from "lucide-react";
+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";
@ -112,14 +121,15 @@ export const DocumentNode = React.memo(function DocumentNode({
 	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"
+						"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}
@ -130,54 +140,54 @@ export const DocumentNode = React.memo(function DocumentNode({
 						}
 					}}
 				>
-				{(() => {
-					if (statusState === "pending") {
+					{(() => {
+						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 (
-							<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>
+							<Checkbox
+								checked={isMentioned}
+								onCheckedChange={handleCheckChange}
+								onClick={(e) => e.stopPropagation()}
+								className="h-3.5 w-3.5 shrink-0"
+							/>
 						);
-					}
-					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>

@ -188,17 +198,19 @@ export const DocumentNode = React.memo(function DocumentNode({
 						)}
 					</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()}
-						>
+					<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>
--- a/surfsense_web/components/documents/FolderNode.tsx
+++ b/surfsense_web/components/documents/FolderNode.tsx
@ -15,7 +15,6 @@ 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 type { FolderSelectionState } from "./FolderTreeView";
 import {
 	ContextMenu,
 	ContextMenuContent,
@ -29,6 +28,7 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
+import type { FolderSelectionState } from "./FolderTreeView";

 export const DND_TYPES = {
 	FOLDER: "FOLDER",
@ -263,7 +263,9 @@ export const FolderNode = React.memo(function FolderNode({
 					</span>

 					<Checkbox
-						checked={selectionState === "all" ? true : selectionState === "some" ? "indeterminate" : false}
+						checked={
+							selectionState === "all" ? true : selectionState === "some" ? "indeterminate" : false
+						}
 						onCheckedChange={handleCheckChange}
 						onClick={(e) => e.stopPropagation()}
 						className="h-3.5 w-3.5 shrink-0"
--- a/surfsense_web/components/documents/FolderTreeView.tsx
+++ b/surfsense_web/components/documents/FolderTreeView.tsx
@ -33,6 +33,7 @@ interface FolderTreeViewProps {
 	onMoveDocument: (doc: DocumentNodeDoc) => void;
 	onExportDocument?: (doc: DocumentNodeDoc, format: string) => void;
 	activeTypes: DocumentTypeEnum[];
+	searchQuery?: string;
 	onDropIntoFolder?: (
 		itemType: "folder" | "document",
 		itemId: number,
@ -69,6 +70,7 @@ export function FolderTreeView({
 	onMoveDocument,
 	onExportDocument,
 	activeTypes,
+	searchQuery,
 	onDropIntoFolder,
 	onReorderFolder,
 }: FolderTreeViewProps) {
@ -97,13 +99,13 @@ export function FolderTreeView({
 	const handleCancelRename = useCallback(() => setRenamingFolderId(null), [setRenamingFolderId]);

 	const hasDescendantMatch = useMemo(() => {
-		if (activeTypes.length === 0) return null;
+		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.includes(d.document_type as DocumentTypeEnum)
+			const childDocs = (docsByFolder[folderId] ?? []).some(
+				(d) => activeTypes.length === 0 || activeTypes.includes(d.document_type as DocumentTypeEnum)
 			);
 			if (childDocs) {
 				match[folderId] = true;
@ -124,7 +126,7 @@ export function FolderTreeView({
 			check(f.id);
 		}
 		return match;
-	}, [folders, docsByFolder, foldersByParent, activeTypes]);
+	}, [folders, docsByFolder, foldersByParent, activeTypes, searchQuery]);

 	const folderSelectionStates = useMemo(() => {
 		const states: Record<number, FolderSelectionState> = {};
@ -177,12 +179,15 @@ export function FolderTreeView({
 				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={expandedIds.has(f.id)}
+					isExpanded={isExpanded}
 					isRenaming={renamingFolderId === f.id}
 					childCount={folderChildCounts[f.id] ?? 0}
 					selectionState={folderSelectionStates[f.id] ?? "none"}
@ -202,7 +207,7 @@ export function FolderTreeView({
 				/>
 			);

-			if (expandedIds.has(f.id)) {
+			if (isExpanded) {
 				nodes.push(...renderLevel(f.id, depth + 1));
 			}
 		}
@ -240,7 +245,7 @@ export function FolderTreeView({
 		);
 	}

-	if (treeNodes.length === 0 && activeTypes.length > 0) {
+	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" />
--- a/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
@ -2,42 +2,50 @@

 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 { EXPORT_FILE_EXTENSIONS } from "@/components/shared/ExportMenuItems";
 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" },
@ -82,8 +90,6 @@ export function DocumentsSidebar({
 	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);
@ -110,6 +116,7 @@ export function DocumentsSidebar({
 	// 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(
 		() =>
@ -123,19 +130,41 @@ export function DocumentsSidebar({
 		[zeroFolders]
 	);

-	const treeDocuments: DocumentNodeDoc[] = useMemo(
-		() =>
-			(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,
-				})),
-		[zeroAllDocs]
-	);
+	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[]> = {};
@ -355,7 +384,7 @@ export function DocumentsSidebar({
 					(d) =>
 						d.folderId === parentId &&
 						d.status?.state !== "pending" &&
-						d.status?.state !== "processing",
+						d.status?.state !== "processing"
 				);
 				const childFolders = foldersByParent[String(parentId)] ?? [];
 				const descendantDocs = childFolders.flatMap((cf) => collectSubtreeDocs(cf.id));
@ -382,38 +411,72 @@ export function DocumentsSidebar({
 				setSidebarDocs((prev) => prev.filter((d) => !idsToRemove.has(d.id)));
 			}
 		},
-		[treeDocuments, foldersByParent, setSidebarDocs],
+		[treeDocuments, foldersByParent, setSidebarDocs]
 	);

-	const isSearchMode = !!debouncedSearch.trim();
+	const searchFilteredDocuments = useMemo(() => {
+		const query = debouncedSearch.trim().toLowerCase();
+		if (!query) return treeDocuments;
+		return treeDocuments.filter((d) => d.title.toLowerCase().includes(query));
+	}, [treeDocuments, debouncedSearch]);

-	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 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 {
-		documents: searchDocuments,
-		loading: searchLoading,
-		loadingMore: searchLoadingMore,
-		hasMore: searchHasMore,
-		loadMore: searchLoadMore,
-		error: searchError,
-		removeItems: searchRemoveItems,
-	} = useDocumentSearch(searchSpaceId, debouncedSearch, activeTypes, isSearchMode && open);
+	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 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 [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) => {
@ -430,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) {
@ -627,7 +636,7 @@ 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}
@ -636,59 +645,54 @@ export function DocumentsSidebar({
 					/>
 				</div>

-				{isSearchMode ? (
-					<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}
-						mentionedDocIds={mentionedDocIds}
-						onToggleChatMention={handleToggleChatMention}
-						isSearchMode={isSearchMode || activeTypes.length > 0}
-					/>
-				) : (
-					<FolderTreeView
-						folders={treeFolders}
-						documents={treeDocuments}
-						expandedIds={expandedIds}
-						onToggleExpand={toggleFolderExpand}
-						mentionedDocIds={mentionedDocIds}
-						onToggleChatMention={handleToggleChatMention}
-						onToggleFolderSelect={handleToggleFolderSelect}
-						onRenameFolder={handleRenameFolder}
-						onDeleteFolder={handleDeleteFolder}
-						onMoveFolder={handleMoveFolder}
-						onCreateFolder={handleCreateFolder}
-						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}
-					/>
+				{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}
+					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
@ -707,6 +711,40 @@ export function DocumentsSidebar({
 				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/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 { useZeroDocumentTypeCounts } from "@/hooks/use-zero-document-type-counts";
 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 {
--- a/surfsense_web/components/report-panel/report-panel.tsx
+++ b/surfsense_web/components/report-panel/report-panel.tsx
@ -9,6 +9,7 @@ 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 {
@ -17,7 +18,6 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { ExportDropdownItems, EXPORT_FILE_EXTENSIONS } from "@/components/shared/ExportMenuItems";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { baseApiService } from "@/lib/apis/base-api.service";
 import { authenticatedFetch } from "@/lib/auth-utils";
--- a/surfsense_web/components/shared/ExportMenuItems.tsx
+++ b/surfsense_web/components/shared/ExportMenuItems.tsx
@ -1,8 +1,12 @@
 "use client";

 import { Loader2 } from "lucide-react";
-import { DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
 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",
@ -36,9 +40,7 @@ export function ExportDropdownItems({
 		<>
 			{showAllFormats && (
 				<>
-					<DropdownMenuLabel className="text-xs text-muted-foreground">
-						Documents
-					</DropdownMenuLabel>
+					<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)
--- a/surfsense_web/components/tool-ui/google-calendar/update-event.tsx
+++ b/surfsense_web/components/tool-ui/google-calendar/update-event.tsx
@ -287,13 +287,9 @@ function ApprovalCard({
 						? pendingEdits.end_datetime
 						: null,
 				new_location:
-					pendingEdits.location !== (event?.location ?? "")
-						? pendingEdits.location || null
-						: null,
+					pendingEdits.location !== (event?.location ?? "") ? pendingEdits.location || null : null,
 				new_attendees:
-					attendeesArr && attendeesArr.join(",") !== origAttendees.join(",")
-						? attendeesArr
-						: null,
+					attendeesArr && attendeesArr.join(",") !== origAttendees.join(",") ? attendeesArr : null,
 			};
 		}
 		return {