Cache session replay on client

frontend/app/components/assistant-ui/threadlist-sidebar.tsx

@@ -14,12 +14,12 @@ import {
 } from "lucide-react";
 import { Popover as PopoverPrimitive } from "radix-ui";
 import type * as React from "react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { ClawAccount } from "@/app/claw-account-gate";
 import { ClawLlmSettings } from "@/app/claw-llm-settings";
 import { ClawThemeSwitcher } from "@/app/claw-theme-switcher";
 import {
-	fetchLatestRunStatus,
+	type ClawRunStatus,
 	ThreadList,
 	toReplayRepository,
 } from "@/components/assistant-ui/thread-list";
@@ -49,6 +49,10 @@ import {
 	readActiveSessionId,
 	writeActiveSessionId,
 } from "@/lib/claw-active-session";
+import {
+	fetchSessionReplaySnapshot,
+	readCachedSessionReplay,
+} from "@/lib/claw-session-cache";
 import { useClawSessionReplay } from "@/lib/claw-session-replay";
 import { pushHomeUrl, pushSessionUrl } from "@/lib/claw-session-url";
 
@@ -384,6 +388,8 @@ function SessionResultButton({
 function useSidebarSessions(open: boolean) {
 	const [sessions, setSessions] = useState<SidebarSession[]>([]);
 	const [loadingSessionId, setLoadingSessionId] = useState<string | null>(null);
+	const openRequestRef = useRef(0);
+	const openAbortRef = useRef<AbortController | null>(null);
 
 	useEffect(() => {
 		if (!open) return;
@@ -417,22 +423,54 @@ function useSidebarSessions(open: boolean) {
 	) {
 		const cleanSessionId = normalizeSessionId(sessionId);
 		if (!cleanSessionId) return;
+		const requestId = openRequestRef.current + 1;
+		openRequestRef.current = requestId;
+		openAbortRef.current?.abort();
+		const abortController = new AbortController();
+		openAbortRef.current = abortController;
+		const cached = readCachedSessionReplay<ReplaySessionPayload, ClawRunStatus>(
+			cleanSessionId,
+		);
 		writeActiveSessionId(cleanSessionId);
 		pushSessionUrl(cleanSessionId);
-		setLoadingSessionId(sessionId);
-		try {
-			const response = await fetch(`/api/claw/sessions/${cleanSessionId}`, {
-				cache: "no-store",
-			});
-			if (!response.ok) return;
-			const payload = (await response.json()) as ReplaySessionPayload;
-			const runStatus = await fetchLatestRunStatus(cleanSessionId);
+		if (cached) {
 			replaySession(
 				cleanSessionId,
-				toReplayRepository(payload, cleanSessionId, runStatus),
+				toReplayRepository(cached.session, cleanSessionId, cached.runStatus),
 			);
-		} finally {
 			setLoadingSessionId(null);
+		} else {
+			setLoadingSessionId(sessionId);
+		}
+		try {
+			const snapshot = await fetchSessionReplaySnapshot<
+				ReplaySessionPayload,
+				ClawRunStatus
+			>(cleanSessionId, { signal: abortController.signal });
+			if (requestId !== openRequestRef.current) return;
+			if (readActiveSessionId() !== cleanSessionId) return;
+			if (!snapshot) return;
+			if (!cached || snapshot.signature !== cached.signature) {
+				replaySession(
+					cleanSessionId,
+					toReplayRepository(
+						snapshot.session,
+						cleanSessionId,
+						snapshot.runStatus,
+					),
+				);
+			}
+		} catch (error) {
+			if (!(error instanceof DOMException && error.name === "AbortError")) {
+				console.warn("[sidebar] failed to open session", error);
+			}
+		} finally {
+			if (requestId === openRequestRef.current) {
+				setLoadingSessionId(null);
+			}
+			if (openAbortRef.current === abortController) {
+				openAbortRef.current = null;
+			}
 		}
 	}