feat(chat): add cached thread prefetching for faster navigation

surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx

@@ -51,6 +51,7 @@ import {
 	TokenUsageProvider,
 } from "@/components/assistant-ui/token-usage-context";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
 	type HitlDecision,
 	PendingInterruptProvider,
@@ -65,6 +66,7 @@ import {
 } from "@/hooks/use-agent-actions-query";
 import { useChatSessionStateSync } from "@/hooks/use-chat-session-state";
 import { useMessagesSync } from "@/hooks/use-messages-sync";
+import { useThreadDetail, useThreadMessages } from "@/hooks/use-thread-queries";
 import { getAgentFilesystemSelection } from "@/lib/agent-filesystem";
 import { documentsApiService } from "@/lib/apis/documents-api.service";
 import { getBearerToken } from "@/lib/auth-utils";
@@ -101,8 +103,6 @@ import {
 	appendMessage,
 	createThread,
 	getRegenerateUrl,
-	getThreadFull,
-	getThreadMessages,
 	type ThreadListItem,
 	type ThreadListResponse,
 	type ThreadRecord,
@@ -120,7 +120,7 @@ import {
 	trackChatMessageSent,
 	trackChatResponseReceived,
 } from "@/lib/posthog/events";
-import Loading from "../loading";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
 
 const MobileEditorPanel = dynamic(
 	() =>
@@ -288,11 +288,78 @@ function computeFallbackTurnCancellingRetryDelay(attempt: number): number {
 	return Math.min(raw, TURN_CANCELLING_MAX_DELAY_MS);
 }
 
+function parseUrlChatId(id: string | string[] | undefined): number {
+	let parsed = 0;
+	if (Array.isArray(id) && id.length > 0) {
+		parsed = Number.parseInt(id[0], 10);
+	} else if (typeof id === "string") {
+		parsed = Number.parseInt(id, 10);
+	}
+	return Number.isNaN(parsed) ? 0 : parsed;
+}
+
+function ThreadMessagesSkeleton() {
+	return (
+		<div
+			className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-panel"
+			style={{
+				["--thread-max-width" as string]: "42rem",
+			}}
+		>
+			<div
+				className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 scroll-smooth"
+				style={{ scrollbarGutter: "stable" }}
+			>
+				<div
+					aria-hidden
+					className="aui-chat-viewport-top-fade pointer-events-none sticky top-0 z-10 -mx-4 h-2 shrink-0 bg-gradient-to-b from-panel from-20% to-transparent"
+				/>
+				<div className="mx-auto w-full max-w-(--thread-max-width) flex flex-1 flex-col gap-6 py-8">
+					<div className="flex justify-end">
+						<Skeleton className="h-12 w-[65%] max-w-56 rounded-2xl" />
+					</div>
+
+					<div className="flex flex-col gap-2">
+						<Skeleton className="h-4 w-full" />
+						<Skeleton className="h-4 w-[85%]" />
+						<Skeleton className="h-18 w-[40%]" />
+					</div>
+
+					<div className="flex gap-2 justify-end">
+						<Skeleton className="h-12 w-[78%] max-w-72 rounded-2xl" />
+					</div>
+
+					<div className="flex flex-col gap-2">
+						<Skeleton className="h-10 w-[30%]" />
+						<Skeleton className="h-4 w-[90%]" />
+						<Skeleton className="h-6 w-[60%]" />
+					</div>
+
+					<div className="flex gap-2 justify-end">
+						<Skeleton className="h-12 w-[85%] max-w-96 rounded-2xl" />
+					</div>
+				</div>
+
+				<div
+					className="aui-chat-composer-footer sticky bottom-0 z-20 -mx-4 mt-auto flex flex-col items-stretch bg-gradient-to-t from-panel from-60% to-transparent px-4 pt-6"
+					style={{ paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" }}
+				>
+					<div className="aui-chat-composer-area relative mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-3 overflow-visible">
+						<Skeleton className="h-28 w-full rounded-3xl" />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
 export default function NewChatPage() {
 	const params = useParams();
 	const queryClient = useQueryClient();
-	const [isInitializing, setIsInitializing] = useState(true);
+	const urlChatId = useMemo(() => parseUrlChatId(params.chat_id), [params.chat_id]);
-	const [threadId, setThreadId] = useState<number | null>(null);
+	const [threadId, setThreadId] = useState<number | null>(() => (urlChatId > 0 ? urlChatId : null));
+	const activeThreadId = urlChatId > 0 ? urlChatId : threadId;
+	const handledLoadErrorThreadRef = useRef<number | null>(null);
 	const [currentThread, setCurrentThread] = useState<ThreadRecord | null>(null);
 	const [messages, setMessages] = useState<ThreadMessageLike[]>([]);
 	const [isRunning, setIsRunning] = useState(false);
@@ -404,9 +471,11 @@ export default function NewChatPage() {
 	const { data: currentUser } = useAtomValue(currentUserAtom);
 	const { data: agentFlags } = useAtomValue(agentFlagsAtom);
 	const localFilesystemEnabled = agentFlags?.enable_desktop_local_filesystem === true;
+	const threadDetailQuery = useThreadDetail(activeThreadId);
+	const threadMessagesQuery = useThreadMessages(activeThreadId);
 
 	// Live collaboration: sync session state and messages via Zero
-	useChatSessionStateSync(threadId);
+	useChatSessionStateSync(activeThreadId);
 	const { data: membersData } = useAtomValue(membersAtom);
 
 	const handleSyncedMessagesUpdate = useCallback(
@@ -467,7 +536,7 @@ export default function NewChatPage() {
 		[isRunning, membersData]
 	);
 
-	useMessagesSync(threadId, handleSyncedMessagesUpdate);
+	useMessagesSync(activeThreadId, handleSyncedMessagesUpdate);
 
 	// Extract search_space_id from URL params
 	const searchSpaceId = useMemo(() => {
@@ -481,19 +550,7 @@ export default function NewChatPage() {
 	// per-turn Revert button all read). Hydrates from
 	// ``GET /threads/{id}/actions`` and is updated incrementally by the
 	// SSE handlers + revert-batch results below — no atom side-channel.
-	const { items: agentActionItems } = useAgentActionsQuery(threadId);
+	const { items: agentActionItems } = useAgentActionsQuery(activeThreadId);
-
-	// Extract chat_id from URL params
-	const urlChatId = useMemo(() => {
-		const id = params.chat_id;
-		let parsed = 0;
-		if (Array.isArray(id) && id.length > 0) {
-			parsed = Number.parseInt(id[0], 10);
-		} else if (typeof id === "string") {
-			parsed = Number.parseInt(id, 10);
-		}
-		return Number.isNaN(parsed) ? 0 : parsed;
-	}, [params.chat_id]);
 
 	const handleChatFailure = useCallback(
 		async ({
@@ -632,14 +689,19 @@ export default function NewChatPage() {
 		});
 	}, []);
 
-	// Initialize thread and load messages
+	const hydratedMessagesRef = useRef<{
-	// For new chats (no urlChatId), we use lazy creation - thread is created on first message
+		threadId: number | null;
-	const initializeThread = useCallback(async () => {
+		data: typeof threadMessagesQuery.data;
-		setIsInitializing(true);
+	}>({ threadId: null, data: undefined });
 
-		// Reset all state when switching between chats/search spaces to prevent stale data
+	// Reset thread-local runtime state on route/search-space changes. Data fetching
+	// is handled by React Query below so the chat shell can render immediately.
+	useEffect(() => {
+		const nextThreadId = urlChatId > 0 ? urlChatId : null;
+		handledLoadErrorThreadRef.current = null;
+		hydratedMessagesRef.current = { threadId: null, data: undefined };
+		setThreadId(nextThreadId);
 		setMessages([]);
-		setThreadId(null);
 		setCurrentThread(null);
 		setMentionedDocuments([]);
 		tokenUsageStore.clear();
@@ -649,82 +711,96 @@ export default function NewChatPage() {
 		closeEditorPanel();
 		// Note: agent-action data is keyed by threadId in react-query so
 		// switching threads naturally swaps caches; no explicit reset.
-
-		try {
-			if (urlChatId > 0) {
-				// Thread exists - load thread data and messages
-				setThreadId(urlChatId);
-
-				// Load thread data (for visibility info) and messages in parallel
-				const [threadData, messagesResponse] = await Promise.all([
-					getThreadFull(urlChatId),
-					getThreadMessages(urlChatId),
-				]);
-
-				setCurrentThread(threadData);
-
-				if (messagesResponse.messages && messagesResponse.messages.length > 0) {
-					const loadedMessages = reconcileInterruptedAssistantMessages(
-						messagesResponse.messages
-					).map(convertToThreadMessage);
-					setMessages(loadedMessages);
-
-					for (const msg of messagesResponse.messages) {
-						if (msg.token_usage) {
-							tokenUsageStore.set(`msg-${msg.id}`, msg.token_usage as TokenUsageData);
-						}
-					}
-
-					const restoredDocsMap: Record<string, MentionedDocumentInfo[]> = {};
-					for (const msg of messagesResponse.messages) {
-						if (msg.role === "user") {
-							const docs = extractMentionedDocuments(msg.content);
-							if (docs.length > 0) {
-								restoredDocsMap[`msg-${msg.id}`] = docs;
-							}
-						}
-					}
-					if (Object.keys(restoredDocsMap).length > 0) {
-						setMessageDocumentsMap(restoredDocsMap);
-					}
-				}
-			}
-			// For new chats (urlChatId === 0), don't create thread yet
-			// Thread will be created lazily when user sends first message
-			// This improves UX (instant load) and avoids orphan threads
-		} catch (error) {
-			console.error("[NewChatPage] Failed to initialize thread:", error);
-			if (urlChatId > 0 && error instanceof NotFoundError) {
-				removeChatTab(urlChatId);
-				if (typeof window !== "undefined") {
-					window.history.replaceState(null, "", `/dashboard/${searchSpaceId}/new-chat`);
-				}
-				toast.error("This chat was deleted.");
-				return;
-			}
-			// Keep threadId as null - don't use Date.now() as it creates an invalid ID
-			// that will cause 404 errors on subsequent API calls
-			setThreadId(null);
-			setCurrentThread(null);
-			toast.error("Failed to load chat. Please try again.");
-		} finally {
-			setIsInitializing(false);
-		}
 	}, [
 		urlChatId,
-		setMessageDocumentsMap,
 		setMentionedDocuments,
+		setMessageDocumentsMap,
+		tokenUsageStore,
 		closeReportPanel,
 		closeEditorPanel,
-		removeChatTab,
+	]);
-		searchSpaceId,
+
+	useEffect(() => {
+		if (!activeThreadId) {
+			setCurrentThread(null);
+			return;
+		}
+		if (threadDetailQuery.data?.id === activeThreadId) {
+			setCurrentThread(threadDetailQuery.data);
+		}
+	}, [activeThreadId, threadDetailQuery.data]);
+
+	useEffect(() => {
+		const messagesResponse = threadMessagesQuery.data;
+		if (!activeThreadId || !messagesResponse) return;
+
+		if (
+			hydratedMessagesRef.current.threadId === activeThreadId &&
+			hydratedMessagesRef.current.data === messagesResponse
+		) {
+			return;
+		}
+
+		if (isRunning) {
+			return;
+		}
+
+		const loadedMessages = reconcileInterruptedAssistantMessages(messagesResponse.messages).map(
+			convertToThreadMessage
+		);
+		setMessages(loadedMessages);
+
+		tokenUsageStore.clear();
+		const restoredDocsMap: Record<string, MentionedDocumentInfo[]> = {};
+		for (const msg of messagesResponse.messages) {
+			if (msg.token_usage) {
+				tokenUsageStore.set(`msg-${msg.id}`, msg.token_usage as TokenUsageData);
+			}
+			if (msg.role === "user") {
+				const docs = extractMentionedDocuments(msg.content);
+				if (docs.length > 0) {
+					restoredDocsMap[`msg-${msg.id}`] = docs;
+				}
+			}
+		}
+		setMessageDocumentsMap(restoredDocsMap);
+		hydratedMessagesRef.current = { threadId: activeThreadId, data: messagesResponse };
+	}, [
+		activeThreadId,
+		isRunning,
+		setMessageDocumentsMap,
+		threadMessagesQuery.data,
 		tokenUsageStore,
 	]);
 
-	// Initialize on mount, and re-init when switching search spaces (even if urlChatId is the same)
 	useEffect(() => {
-		initializeThread();
+		const loadError = threadDetailQuery.error ?? threadMessagesQuery.error;
-	}, [initializeThread]);
+		if (!activeThreadId || !loadError) return;
+		if (handledLoadErrorThreadRef.current === activeThreadId) return;
+
+		handledLoadErrorThreadRef.current = activeThreadId;
+		console.error("[NewChatPage] Failed to load thread:", loadError);
+
+		if (loadError instanceof NotFoundError) {
+			removeChatTab(activeThreadId);
+			if (typeof window !== "undefined") {
+				window.history.replaceState(null, "", `/dashboard/${searchSpaceId}/new-chat`);
+			}
+			setThreadId(null);
+			setCurrentThread(null);
+			setMessages([]);
+			toast.error("This chat was deleted.");
+			return;
+		}
+
+		toast.error("Failed to load chat. Please try again.");
+	}, [
+		activeThreadId,
+		removeChatTab,
+		searchSpaceId,
+		threadDetailQuery.error,
+		threadMessagesQuery.error,
+	]);
 
 	// Prefetch document titles for @ mention picker
 	// Runs when user lands on page so data is ready when they type @
@@ -752,7 +828,7 @@ export default function NewChatPage() {
 		const readAndApplyCommentId = () => {
 			const params = new URLSearchParams(window.location.search);
 			const raw = params.get("commentId");
-			if (raw && !isInitializing) {
+			if (raw && activeThreadId) {
 				const commentId = Number.parseInt(raw, 10);
 				if (!Number.isNaN(commentId)) {
 					setTargetCommentId(commentId);
@@ -770,11 +846,14 @@ export default function NewChatPage() {
 			window.removeEventListener("popstate", readAndApplyCommentId);
 			clearTargetCommentId();
 		};
-	}, [isInitializing, setTargetCommentId, clearTargetCommentId]);
+	}, [activeThreadId, setTargetCommentId, clearTargetCommentId]);
 
 	// Sync current thread state to atom
 	useEffect(() => {
 		if (!currentThread) {
+			if (activeThreadId) {
+				return;
+			}
 			setCurrentThreadMetadata({
 				id: null,
 				visibility: null,
@@ -794,6 +873,7 @@ export default function NewChatPage() {
 			hasComments: currentThread.has_comments ?? false,
 		});
 	}, [
+		activeThreadId,
 		currentThread,
 		currentThreadState.id,
 		currentThreadState.visibility,
@@ -882,6 +962,8 @@ export default function NewChatPage() {
 					setThreadId(currentThreadId);
 					// Set currentThread so share button in header appears immediately
 					setCurrentThread(newThread);
+					queryClient.setQueryData(cacheKeys.threads.detail(newThread.id), newThread);
+					queryClient.setQueryData(cacheKeys.threads.messages(newThread.id), { messages: [] });
 
 					// Track chat creation
 					trackChatCreated(searchSpaceId, currentThreadId);
@@ -1389,6 +1471,14 @@ export default function NewChatPage() {
 			} finally {
 				setIsRunning(false);
 				abortControllerRef.current = null;
+				if (currentThreadId) {
+					void queryClient.invalidateQueries({
+						queryKey: cacheKeys.threads.messages(currentThreadId),
+					});
+					void queryClient.invalidateQueries({
+						queryKey: cacheKeys.threads.detail(currentThreadId),
+					});
+				}
 			}
 		},
 		[
@@ -1737,6 +1827,12 @@ export default function NewChatPage() {
 			} finally {
 				setIsRunning(false);
 				abortControllerRef.current = null;
+				void queryClient.invalidateQueries({
+					queryKey: cacheKeys.threads.messages(resumeThreadId),
+				});
+				void queryClient.invalidateQueries({
+					queryKey: cacheKeys.threads.detail(resumeThreadId),
+				});
 			}
 		},
 		[
@@ -2230,6 +2326,12 @@ export default function NewChatPage() {
 			} finally {
 				setIsRunning(false);
 				abortControllerRef.current = null;
+				void queryClient.invalidateQueries({
+					queryKey: cacheKeys.threads.messages(threadId),
+				});
+				void queryClient.invalidateQueries({
+					queryKey: cacheKeys.threads.detail(threadId),
+				});
 			}
 		},
 		[
@@ -2416,22 +2518,25 @@ export default function NewChatPage() {
 		onCancel: cancelRun,
 	});
 
-	// Show loading state only when loading an existing thread
+	const threadLoadError = activeThreadId
-	if (isInitializing) {
+		? (threadDetailQuery.error ?? threadMessagesQuery.error)
-		return <Loading />;
+		: null;
-	}
+	const shouldShowThreadLoadError =
+		!!threadLoadError && !!activeThreadId && !currentThread && messages.length === 0;
+	const isThreadMessagesLoading =
+		!!activeThreadId &&
+		threadMessagesQuery.isPending &&
+		messages.length === 0 &&
+		!threadMessagesQuery.error;
 
-	// Show error state only if we tried to load an existing thread but failed
+	if (shouldShowThreadLoadError) {
-	// For new chats (urlChatId === 0), threadId being null is expected (lazy creation)
-	if (!threadId && urlChatId > 0) {
 		return (
 			<div className="flex h-full flex-col items-center justify-center gap-4">
 				<div className="text-destructive">Failed to load chat</div>
 				<Button
 					type="button"
 					onClick={() => {
-						setIsInitializing(true);
+						void Promise.all([threadDetailQuery.refetch(), threadMessagesQuery.refetch()]);
-						initializeThread();
 					}}
 				>
 					Try Again
@@ -2450,8 +2555,13 @@ export default function NewChatPage() {
 					onSubmit={handleApprovalSubmit}
 				>
 					<div key={searchSpaceId} className="flex h-full overflow-hidden">
-						<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+						<div className="relative flex-1 flex flex-col min-w-0 overflow-hidden">
 							<Thread />
+							{isThreadMessagesLoading ? (
+								<div className="absolute inset-0 z-10 bg-panel">
+									<ThreadMessagesSkeleton />
+								</div>
+							) : null}
 						</div>
 						<MobileReportPanel />
 						<MobileEditorPanel />

surfsense_web/components/assistant-ui/inline-citation.tsx

@@ -3,7 +3,7 @@
 import { useSetAtom } from "jotai";
 import { FileText } from "lucide-react";
 import type { FC } from "react";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { openCitationPanelAtom } from "@/atoms/citation/citation-panel.atom";
 import { useCitationMetadata } from "@/components/assistant-ui/citation-metadata-context";
 import { CitationPanelContent } from "@/components/citation-panel/citation-panel";
@@ -120,12 +120,14 @@ interface UrlCitationProps {
  * page title and snippet (extracted deterministically from web_search tool results).
  */
 export const UrlCitation: FC<UrlCitationProps> = ({ url }) => {
+	const reactId = useId();
+	const citationInstanceId = `url-cite-${reactId.replace(/:/g, "")}`;
 	const domain = tryGetHostname(url) ?? url;
 	const meta = useCitationMetadata(url);
 
 	return (
 		<Citation
-			id={`url-cite-${url}`}
+			id={citationInstanceId}
 			href={url}
 			title={meta?.title || domain}
 			snippet={meta?.snippet}

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -8,7 +8,11 @@ import { useTranslations } from "next-intl";
 import { useTheme } from "next-themes";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
-import { currentThreadAtom, resetCurrentThreadAtom } from "@/atoms/chat/current-thread.atom";
+import {
+	currentThreadAtom,
+	resetCurrentThreadAtom,
+	setCurrentThreadMetadataAtom,
+} from "@/atoms/chat/current-thread.atom";
 import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
 import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
 import { announcementsDialogAtom } from "@/atoms/layout/dialogs.atom";
@@ -94,6 +98,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	const { mutateAsync: deleteSearchSpace } = useAtomValue(deleteSearchSpaceMutationAtom);
 	const currentThreadState = useAtomValue(currentThreadAtom);
 	const resetCurrentThread = useSetAtom(resetCurrentThreadAtom);
+	const setCurrentThreadMetadata = useSetAtom(setCurrentThreadMetadataAtom);
 	const syncChatTab = useSetAtom(syncChatTabAtom);
 	const removeChatTab = useSetAtom(removeChatTabAtom);
 	const { mutateAsync: archiveThread } = useArchiveThread(searchSpaceId);
@@ -521,9 +526,20 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 
 	const handleChatSelect = useCallback(
 		(chat: ChatItem) => {
+			syncChatTab({
+				chatId: chat.id,
+				title: chat.name,
+				chatUrl: chat.url,
+				searchSpaceId: Number(searchSpaceId),
+			});
+			setCurrentThreadMetadata({
+				id: chat.id,
+				visibility: chat.visibility ?? "PRIVATE",
+				hasComments: false,
+			});
 			router.push(chat.url);
 		},
-		[router]
+		[router, searchSpaceId, setCurrentThreadMetadata, syncChatTab]
 	);
 
 	const handleChatDelete = useCallback((chat: ChatItem) => {

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

@@ -19,7 +19,8 @@ import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
-import { removeChatTabAtom } from "@/atoms/tabs/tabs.atom";
+import { setCurrentThreadMetadataAtom } from "@/atoms/chat/current-thread.atom";
+import { removeChatTabAtom, syncChatTabAtom } from "@/atoms/tabs/tabs.atom";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/animated-tabs";
 import { Button } from "@/components/ui/button";
 import {
@@ -44,7 +45,8 @@ import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useLongPress } from "@/hooks/use-long-press";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { useArchiveThread, useDeleteThread, useRenameThread } from "@/hooks/use-thread-mutations";
-import { fetchThreads, searchThreads } from "@/lib/chat/thread-persistence";
+import { prefetchThreadData } from "@/hooks/use-thread-queries";
+import { fetchThreads, searchThreads, type ThreadListItem } from "@/lib/chat/thread-persistence";
 import { formatThreadTimestamp } from "@/lib/format-date";
 import { cn } from "@/lib/utils";
 import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
@@ -70,6 +72,8 @@ export function AllChatsSidebarContent({
 	const queryClient = useQueryClient();
 	const isMobile = useIsMobile();
 	const removeChatTab = useSetAtom(removeChatTabAtom);
+	const syncChatTab = useSetAtom(syncChatTabAtom);
+	const setCurrentThreadMetadata = useSetAtom(setCurrentThreadMetadataAtom);
 	const { mutateAsync: deleteThread } = useDeleteThread(searchSpaceId);
 	const { mutateAsync: archiveThread } = useArchiveThread(searchSpaceId);
 	const { mutateAsync: renameThread } = useRenameThread(searchSpaceId);
@@ -141,12 +145,31 @@ export function AllChatsSidebarContent({
 	const threads = showArchived ? archivedChats : activeChats;
 
 	const handleThreadClick = useCallback(
-		(threadId: number) => {
+		(thread: ThreadListItem) => {
-			router.push(`/dashboard/${searchSpaceId}/new-chat/${threadId}`);
+			const chatUrl = `/dashboard/${searchSpaceId}/new-chat/${thread.id}`;
+			syncChatTab({
+				chatId: thread.id,
+				title: thread.title || "New Chat",
+				chatUrl,
+				searchSpaceId: Number(searchSpaceId),
+			});
+			setCurrentThreadMetadata({
+				id: thread.id,
+				visibility: thread.visibility,
+				hasComments: false,
+			});
+			router.push(chatUrl);
 			onOpenChange(false);
 			onCloseMobileSidebar?.();
 		},
-		[router, onOpenChange, searchSpaceId, onCloseMobileSidebar]
+		[
+			router,
+			onOpenChange,
+			searchSpaceId,
+			onCloseMobileSidebar,
+			setCurrentThreadMetadata,
+			syncChatTab,
+		]
 	);
 
 	const handleDeleteThread = useCallback(
@@ -337,8 +360,10 @@ export function AllChatsSidebarContent({
 											variant="ghost"
 											onClick={() => {
 												if (wasLongPress()) return;
-												handleThreadClick(thread.id);
+												handleThreadClick(thread);
 											}}
+											onMouseEnter={() => prefetchThreadData(queryClient, thread.id)}
+											onFocus={() => prefetchThreadData(queryClient, thread.id)}
 											onTouchStart={() => {
 												pendingThreadIdRef.current = thread.id;
 												longPressHandlers.onTouchStart();
@@ -363,7 +388,9 @@ export function AllChatsSidebarContent({
 												<Button
 													type="button"
 													variant="ghost"
-													onClick={() => handleThreadClick(thread.id)}
+													onClick={() => handleThreadClick(thread)}
+													onMouseEnter={() => prefetchThreadData(queryClient, thread.id)}
+													onFocus={() => prefetchThreadData(queryClient, thread.id)}
 													disabled={isBusy}
 													className={cn(
 														"h-auto w-full justify-start gap-2 overflow-hidden px-2 py-1.5 text-left font-normal",

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

@@ -23,6 +23,7 @@ interface ChatListItemProps {
 	dropdownOpen?: boolean;
 	onDropdownOpenChange?: (open: boolean) => void;
 	onClick?: () => void;
+	onPrefetch?: () => void;
 	onRename?: () => void;
 	onArchive?: () => void;
 	onDelete?: () => void;
@@ -35,6 +36,7 @@ export function ChatListItem({
 	dropdownOpen: controlledOpen,
 	onDropdownOpenChange,
 	onClick,
+	onPrefetch,
 	onRename,
 	onArchive,
 	onDelete,
@@ -61,6 +63,8 @@ export function ChatListItem({
 				type="button"
 				variant="ghost"
 				onClick={handleClick}
+				onMouseEnter={onPrefetch}
+				onFocus={onPrefetch}
 				{...(isMobile ? longPressHandlers : {})}
 				className={cn(
 					"h-auto w-full justify-start gap-2 overflow-hidden px-2 py-1.5 text-left font-normal",

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useQueryClient } from "@tanstack/react-query";
 import { CreditCard, Dot, SquarePen, Zap } from "lucide-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -10,6 +11,7 @@ import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useIsAnonymous } from "@/contexts/anonymous-mode";
+import { prefetchThreadData } from "@/hooks/use-thread-queries";
 import { cn } from "@/lib/utils";
 import { SIDEBAR_MIN_WIDTH } from "../../hooks/useSidebarResize";
 import type { ChatItem, NavItem, PageUsage, SearchSpace, User } from "../../types/layout.types";
@@ -132,6 +134,7 @@ export function Sidebar({
 	collapsedHeaderContent,
 }: SidebarProps) {
 	const t = useTranslations("sidebar");
+	const queryClient = useQueryClient();
 	const [openDropdownChatId, setOpenDropdownChatId] = useState<number | null>(null);
 
 	// Inbox, Automations, and Documents are rendered explicitly right below
@@ -293,6 +296,7 @@ export function Sidebar({
 											dropdownOpen={openDropdownChatId === chat.id}
 											onDropdownOpenChange={(open) => setOpenDropdownChatId(open ? chat.id : null)}
 											onClick={() => onChatSelect(chat)}
+											onPrefetch={() => prefetchThreadData(queryClient, chat.id)}
 											onRename={() => onChatRename?.(chat)}
 											onArchive={() => onChatArchive?.(chat)}
 											onDelete={() => onChatDelete?.(chat)}

surfsense_web/hooks/use-thread-queries.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { type QueryClient, useQuery } from "@tanstack/react-query";
+import {
+	getThreadFull,
+	getThreadMessages,
+	type ThreadHistoryLoadResponse,
+	type ThreadRecord,
+} from "@/lib/chat/thread-persistence";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
+
+const THREAD_DETAIL_STALE_TIME_MS = 60 * 1000;
+const THREAD_MESSAGES_STALE_TIME_MS = 30 * 1000;
+
+function isValidThreadId(threadId: number | null | undefined): threadId is number {
+	return typeof threadId === "number" && threadId > 0;
+}
+
+export function useThreadDetail(threadId: number | null | undefined) {
+	return useQuery<ThreadRecord>({
+		queryKey: cacheKeys.threads.detail(threadId ?? 0),
+		queryFn: () => getThreadFull(threadId as number),
+		enabled: isValidThreadId(threadId),
+		staleTime: THREAD_DETAIL_STALE_TIME_MS,
+	});
+}
+
+export function useThreadMessages(threadId: number | null | undefined) {
+	return useQuery<ThreadHistoryLoadResponse>({
+		queryKey: cacheKeys.threads.messages(threadId ?? 0),
+		queryFn: () => getThreadMessages(threadId as number),
+		enabled: isValidThreadId(threadId),
+		staleTime: THREAD_MESSAGES_STALE_TIME_MS,
+	});
+}
+
+export function prefetchThreadData(queryClient: QueryClient, threadId: number): void {
+	if (!isValidThreadId(threadId)) return;
+
+	void Promise.all([
+		queryClient.prefetchQuery({
+			queryKey: cacheKeys.threads.detail(threadId),
+			queryFn: () => getThreadFull(threadId),
+			staleTime: THREAD_DETAIL_STALE_TIME_MS,
+		}),
+		queryClient.prefetchQuery({
+			queryKey: cacheKeys.threads.messages(threadId),
+			queryFn: () => getThreadMessages(threadId),
+			staleTime: THREAD_MESSAGES_STALE_TIME_MS,
+		}),
+	]);
+}

surfsense_web/lib/chat/thread-cache.ts

@@ -115,17 +115,23 @@ function searchThreadsQueryFilter(searchSpaceId: SearchSpaceKey) {
 	};
 }
 
-function threadDetailQueryFilter(searchSpaceId: SearchSpaceKey, threadId: number) {
+function threadDetailQueryFilter(threadId: number) {
 	return {
 		predicate: ({ queryKey }: { queryKey: QueryKey }) =>
 			Array.isArray(queryKey) &&
-			((queryKey[0] === "threads" &&
+			queryKey[0] === "threads" &&
-				queryKey[1] === "detail" &&
+			queryKey[1] === "detail" &&
-				Number(queryKey[2]) === threadId) ||
+			Number(queryKey[2]) === threadId,
-				(queryKey[0] === "threads" &&
+	};
-					isSameSearchSpace(queryKey[1], searchSpaceId) &&
+}
-					queryKey[2] === "detail" &&
+
-					Number(queryKey[3]) === threadId)),
+function threadMessagesQueryFilter(threadId: number) {
+	return {
+		predicate: ({ queryKey }: { queryKey: QueryKey }) =>
+			Array.isArray(queryKey) &&
+			queryKey[0] === "threads" &&
+			queryKey[1] === "messages" &&
+			Number(queryKey[2]) === threadId,
 	};
 }
 
@@ -155,13 +161,10 @@ export function patchThreadEverywhere(
 		return patchThreadListItems(old, threadId, patch);
 	});
 
-	queryClient.setQueriesData<ThreadRecord>(
+	queryClient.setQueriesData<ThreadRecord>(threadDetailQueryFilter(threadId), (old) => {
-		threadDetailQueryFilter(searchSpaceId, threadId),
+		if (!old) return old;
-		(old) => {
+		return patchThreadRecord(old, threadId, patch);
-			if (!old) return old;
+	});
-			return patchThreadRecord(old, threadId, patch);
-		}
-	);
 }
 
 export function replaceThreadEverywhere(
@@ -198,7 +201,8 @@ export function removeThreadEverywhere(
 		if (!isThreadListItemArray(old)) return old;
 		return old.filter((thread) => thread.id !== threadId);
 	});
-	queryClient.removeQueries(threadDetailQueryFilter(searchSpaceId, threadId));
+	queryClient.removeQueries(threadDetailQueryFilter(threadId));
+	queryClient.removeQueries(threadMessagesQueryFilter(threadId));
 }
 
 export function moveThreadArchiveState(
@@ -239,11 +243,8 @@ export function moveThreadArchiveState(
 		if (!isThreadListItemArray(old)) return old;
 		return old.map((thread) => (thread.id === threadId ? { ...thread, archived } : thread));
 	});
-	queryClient.setQueriesData<ThreadRecord>(
+	queryClient.setQueriesData<ThreadRecord>(threadDetailQueryFilter(threadId), (old) => {
-		threadDetailQueryFilter(searchSpaceId, threadId),
+		if (!old || old.id !== threadId) return old;
-		(old) => {
+		return { ...old, archived };
-			if (!old || old.id !== threadId) return old;
+	});
-			return { ...old, archived };
-		}
-	);
 }

surfsense_web/lib/query-client/cache-keys.ts

@@ -21,6 +21,7 @@ export const cacheKeys = {
 	threads: {
 		list: (searchSpaceId: number) => ["threads", searchSpaceId] as const,
 		detail: (threadId: number) => ["threads", "detail", threadId] as const,
+		messages: (threadId: number) => ["threads", "messages", threadId] as const,
 		search: (searchSpaceId: number, query: string) =>
 			["threads", "search", searchSpaceId, query] as const,
 	},