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

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) => {
-			router.push(`/dashboard/${searchSpaceId}/new-chat/${threadId}`);
+		(thread: ThreadListItem) => {
+			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)}