fix(web): recover stale thread routes

Author: redxzeta

apps/web/src/components/EventRouter.browser.tsx

@@ -351,13 +351,16 @@ const worker = setupWorker(
 );
 
 async function mountApp(options?: {
+  initialEntry?: string;
   routeThreadId?: ThreadId;
   waitForThreadId?: ThreadId | null;
-}): Promise<{ cleanup: () => Promise<void> }> {
+}): Promise<{ cleanup: () => Promise<void>; router: ReturnType<typeof getRouter> }> {
   const host = createFullscreenTestHost();
 
   const routeThreadId = options?.routeThreadId ?? THREAD_ID;
-  const router = getRouter(createMemoryHistory({ initialEntries: [`/${routeThreadId}`] }));
+  const router = getRouter(
+    createMemoryHistory({ initialEntries: [options?.initialEntry ?? `/${routeThreadId}`] }),
+  );
   const screen = await render(<RouterProvider router={router} />, { container: host });
 
   try {
@@ -391,6 +394,7 @@ async function mountApp(options?: {
   let cleanedUp = false;
 
   return {
+    router,
     cleanup: async () => {
       if (cleanedUp) return;
       cleanedUp = true;
@@ -522,6 +526,128 @@ describe("EventRouter scoped orchestration sync", () => {
     }
   });
 
+  it("recovers a stale remembered route without opening a missing detail subscription", async () => {
+    const staleThreadId = ThreadId.makeUnsafe("thread-stale-route");
+    localStorage.setItem(
+      "synara:sidebar-ui:v1",
+      JSON.stringify({
+        chatSectionExpanded: true,
+        chatThreadListExtraPages: 2,
+        projectThreadListExtraPagesByCwd: { "/repo/project": 1 },
+        dismissedThreadStatusKeyByThreadId: {},
+        lastThreadRoute: { threadId: staleThreadId },
+        activityViewEnabled: false,
+      }),
+    );
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+    const mounted = await mountApp({ routeThreadId: staleThreadId, waitForThreadId: null });
+
+    try {
+      await vi.waitFor(
+        () => {
+          expect(mounted.router.state.location.pathname).not.toBe(`/${staleThreadId}`);
+          expect(
+            JSON.parse(localStorage.getItem("synara:sidebar-ui:v1") ?? "null")?.lastThreadRoute,
+          ).toBeNull();
+        },
+        { timeout: 4_000, interval: 16 },
+      );
+      await new Promise((resolve) => window.setTimeout(resolve, 120));
+      expect(subscribeThreadRequestCountById.get(staleThreadId)).toBeUndefined();
+      expect(consoleError).not.toHaveBeenCalled();
+    } finally {
+      consoleError.mockRestore();
+      await mounted.cleanup();
+    }
+  });
+
+  it("restores a valid remembered thread from the root route", async () => {
+    localStorage.setItem(
+      "synara:sidebar-ui:v1",
+      JSON.stringify({
+        lastThreadRoute: { threadId: THREAD_ID },
+      }),
+    );
+    const mounted = await mountApp({ initialEntry: "/" });
+
+    try {
+      await vi.waitFor(
+        () => {
+          expect(mounted.router.state.location.pathname).toBe(`/${THREAD_ID}`);
+          expect(subscribeThreadRequestCountById.get(THREAD_ID)).toBeGreaterThanOrEqual(1);
+        },
+        { timeout: 4_000, interval: 16 },
+      );
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
+  it("clears a missing remembered thread while resolving the root route", async () => {
+    const staleThreadId = ThreadId.makeUnsafe("thread-stale-root-restore");
+    localStorage.setItem(
+      "synara:sidebar-ui:v1",
+      JSON.stringify({
+        chatSectionExpanded: true,
+        lastThreadRoute: { threadId: staleThreadId },
+      }),
+    );
+    const mounted = await mountApp({ initialEntry: "/", waitForThreadId: null });
+
+    try {
+      await vi.waitFor(
+        () => {
+          expect(
+            JSON.parse(localStorage.getItem("synara:sidebar-ui:v1") ?? "null")?.lastThreadRoute,
+          ).toBeNull();
+          expect(mounted.router.state.location.pathname).not.toBe(`/${staleThreadId}`);
+        },
+        { timeout: 4_000, interval: 16 },
+      );
+      expect(subscribeThreadRequestCountById.get(staleThreadId)).toBeUndefined();
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
+  it("stops leasing a deleted route and clears its remembered location after recovery", async () => {
+    localStorage.setItem(
+      "synara:sidebar-ui:v1",
+      JSON.stringify({
+        lastThreadRoute: { threadId: THREAD_ID },
+      }),
+    );
+    const mounted = await mountApp();
+
+    try {
+      const subscribeCountBeforeDelete = subscribeThreadRequestCountById.get(THREAD_ID) ?? 0;
+      fixture.snapshot = {
+        ...fixture.snapshot,
+        snapshotSequence: 2,
+        threads: [],
+      };
+      sendShellEventPush({
+        kind: "thread-removed",
+        sequence: 2,
+        threadId: THREAD_ID,
+      });
+
+      await vi.waitFor(
+        () => {
+          expect(mounted.router.state.location.pathname).not.toBe(`/${THREAD_ID}`);
+          expect(
+            JSON.parse(localStorage.getItem("synara:sidebar-ui:v1") ?? "null")?.lastThreadRoute,
+          ).toBeNull();
+        },
+        { timeout: 5_000, interval: 16 },
+      );
+      await new Promise((resolve) => window.setTimeout(resolve, 120));
+      expect(subscribeThreadRequestCountById.get(THREAD_ID)).toBe(subscribeCountBeforeDelete);
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
   it("drops duplicate thread events after the thread snapshot sequence advances", async () => {
     const mounted = await mountApp();
 

apps/web/src/components/RestoreOrCreateChatRoute.tsx

@@ -40,12 +40,15 @@ export type RestoreRouteResolver = (input: RestoreRouteResolverInput) => LastThr
 export function RestoreOrCreateChatRoute({
   resolveRestoreRoute,
   createFreshChat,
+  onUnrestorableRememberedRoute,
 }: {
   // Surface-specific policy for picking the thread route to restore (e.g. the last-visited route
   // for home chats, the latest Studio thread or draft for Studio). The remembered-route recovery
   // below still keys off the total thread count, which is shared across surfaces.
   readonly resolveRestoreRoute: RestoreRouteResolver;
   readonly createFreshChat: () => Promise<StartContainerChatResult>;
+  /** Called only after hydration/recovery has made fallback authoritative. */
+  readonly onUnrestorableRememberedRoute?: (route: LastThreadRoute) => void;
 }) {
   const navigate = useNavigate();
   const threadsHydrated = useStore((store) => store.threadsHydrated);
@@ -150,6 +153,9 @@ export function RestoreOrCreateChatRoute({
       if (cancelled || createFreshChatInFlightRef.current) {
         return;
       }
+      if (lastThreadRoute) {
+        onUnrestorableRememberedRoute?.(lastThreadRoute);
+      }
       createFreshChatInFlightRef.current = true;
       // .finally instead of try/finally: React Compiler does not yet support
       // try/finally and would skip optimizing this whole component.
@@ -170,6 +176,7 @@ export function RestoreOrCreateChatRoute({
     createFreshChat,
     emptyRestoreRecoveryState,
     navigate,
+    onUnrestorableRememberedRoute,
     resolveRestoreRoute,
     splitViewIds,
     splitViewsHydrated,

apps/web/src/components/Sidebar.uiState.test.ts

@@ -1,9 +1,11 @@
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 
 import {
+  clearLastThreadRouteIfMatches,
   normalizeSidebarProjectThreadListCwd,
   persistSidebarUiState,
   readSidebarUiState,
+  subscribeSidebarUiState,
 } from "./Sidebar.uiState";
 
 describe("Sidebar.uiState", () => {
@@ -14,6 +16,8 @@ describe("Sidebar.uiState", () => {
     Object.defineProperty(globalThis, "window", {
       configurable: true,
       value: {
+        addEventListener: () => {},
+        removeEventListener: () => {},
         localStorage: {
           clear: () => {
             storage.clear();
@@ -163,4 +167,48 @@ describe("Sidebar.uiState", () => {
       activityViewEnabled: false,
     });
   });
+
+  it("atomically clears only a matching remembered route and preserves unrelated state", () => {
+    persistSidebarUiState({
+      chatSectionExpanded: true,
+      chatThreadListExtraPages: 3,
+      projectThreadListExtraPagesByCwd: { "/repo": 2 },
+      dismissedThreadStatusKeyByThreadId: { "thread-other": "ready:turn-1" },
+      lastThreadRoute: { threadId: "thread-stale", splitViewId: "split-stale" },
+      activityViewEnabled: true,
+    });
+
+    expect(clearLastThreadRouteIfMatches("thread-other")).toBe(false);
+    expect(readSidebarUiState().lastThreadRoute?.threadId).toBe("thread-stale");
+    expect(clearLastThreadRouteIfMatches("thread-stale")).toBe(true);
+    expect(readSidebarUiState()).toEqual({
+      chatSectionExpanded: true,
+      chatThreadListExtraPages: 3,
+      projectThreadListExtraPagesByCwd: {
+        [normalizeSidebarProjectThreadListCwd("/repo")]: 2,
+      },
+      dismissedThreadStatusKeyByThreadId: { "thread-other": "ready:turn-1" },
+      lastThreadRoute: null,
+      activityViewEnabled: true,
+    });
+  });
+
+  it("notifies same-window sidebar consumers after a matching clear", () => {
+    persistSidebarUiState({
+      chatSectionExpanded: false,
+      chatThreadListExtraPages: 0,
+      projectThreadListExtraPagesByCwd: {},
+      dismissedThreadStatusKeyByThreadId: {},
+      lastThreadRoute: { threadId: "thread-stale" },
+      activityViewEnabled: false,
+    });
+    const observed: Array<ReturnType<typeof readSidebarUiState>> = [];
+    const unsubscribe = subscribeSidebarUiState((state) => observed.push(state));
+
+    expect(clearLastThreadRouteIfMatches("thread-stale")).toBe(true);
+    expect(observed).toHaveLength(1);
+    expect(observed[0]?.lastThreadRoute).toBeNull();
+
+    unsubscribe();
+  });
 });

apps/web/src/components/Sidebar.uiState.ts

@@ -18,6 +18,8 @@ export type SidebarUiState = {
   activityViewEnabled: boolean;
 };
 
+const sameWindowListeners = new Set<(state: SidebarUiState) => void>();
+
 const DEFAULT_SIDEBAR_UI_STATE: SidebarUiState = {
   chatSectionExpanded: false,
   chatThreadListExtraPages: 0,
@@ -153,13 +155,17 @@ export function subscribeSidebarUiState(listener: (state: SidebarUiState) => voi
     if (event.key !== SIDEBAR_UI_STATE_STORAGE_KEY) return;
     listener(readSidebarUiState());
   };
+  sameWindowListeners.add(listener);
   window.addEventListener("storage", handleStorage);
-  return () => window.removeEventListener("storage", handleStorage);
+  return () => {
+    sameWindowListeners.delete(listener);
+    window.removeEventListener("storage", handleStorage);
+  };
 }
 
-export function persistSidebarUiState(input: SidebarUiState): void {
+function writeSidebarUiState(input: SidebarUiState): boolean {
   if (typeof window === "undefined") {
-    return;
+    return false;
   }
 
   try {
@@ -187,7 +193,34 @@ export function persistSidebarUiState(input: SidebarUiState): void {
         activityViewEnabled: input.activityViewEnabled,
       }),
     );
+    return true;
   } catch {
     // Ignore storage errors so sidebar rendering keeps working when persistence is unavailable.
+    return false;
+  }
+}
+
+export function persistSidebarUiState(input: SidebarUiState): void {
+  writeSidebarUiState(input);
+}
+
+/**
+ * Atomically clears a stale remembered route without overwriting unrelated sidebar state.
+ * Storage events do not fire in the window that performed the write, so same-window consumers
+ * receive an explicit notification after the persisted compare-and-clear succeeds.
+ */
+export function clearLastThreadRouteIfMatches(threadId: string): boolean {
+  const current = readSidebarUiState();
+  if (current.lastThreadRoute?.threadId !== threadId) {
+    return false;
+  }
+
+  const next: SidebarUiState = { ...current, lastThreadRoute: null };
+  if (!writeSidebarUiState(next)) {
+    return false;
+  }
+  for (const listener of sameWindowListeners) {
+    listener(next);
   }
+  return true;
 }

apps/web/src/hooks/usePreloadRouteChunks.ts

@@ -17,12 +17,12 @@ export function usePreloadRouteChunks() {
     // New-task navigation is a primary startup action. Warm that route as soon
     // as the root commits so an immediate click never waits for the browser's
     // idle callback (which can be delayed for several seconds during hydration).
-    router.preloadRoute({ to: "/$threadId", params: { threadId: "chunk-preload" } }).catch(() => {
+    router.loadRouteChunk(router.routesByPath["/$threadId"]).catch(() => {
       // Preloading is best-effort; navigation falls back to loading on demand.
     });
 
     const preloadSettings = () => {
-      router.preloadRoute({ to: "/settings" }).catch(() => {
+      router.loadRouteChunk(router.routesByPath["/settings"]).catch(() => {
         // Preloading is best-effort; navigation falls back to loading on demand.
       });
     };

apps/web/src/routes/__root.tsx

@@ -1100,13 +1100,26 @@ function EventRouter() {
   );
   const retainedThreadIds = useRetainedThreadDetailIds();
   const serverThreadIdSet = useMemo(() => new Set(serverThreadIds), [serverThreadIds]);
+  const localDraftThreadIdKey = useComposerDraftStore((state) =>
+    Object.keys(state.draftThreadsByThreadId).join("\0"),
+  );
+  const localDraftThreadIdSet = useMemo(
+    () =>
+      new Set(
+        localDraftThreadIdKey.length === 0
+          ? []
+          : localDraftThreadIdKey.split("\0").map((threadId) => ThreadId.makeUnsafe(threadId)),
+      ),
+    [localDraftThreadIdKey],
+  );
   // Stabilize the lease array by content: `serverThreads` re-emits on every
   // streaming update, and an identity-changing lease list would enqueue a no-op
   // subscription reconcile per render onto the serialized subscribe chain.
   const nextSubscribedThreadIds = resolveThreadDetailSubscriptionLeaseIds({
     visibleThreadIds,
     retainedThreadIds,
     serverThreadIds: serverThreadIdSet,
+    localDraftThreadIds: localDraftThreadIdSet,
   });
   const subscribedThreadIdsRef = useRef(nextSubscribedThreadIds);
   const subscribedThreadIds = arraysShallowEqual(

apps/web/src/routes/_chat.$threadId.tsx

@@ -24,6 +24,7 @@ import { useStore } from "../store";
 import { createThreadExistsSelector, createThreadProjectIdSelector } from "../storeSelectors";
 import { SingleChatSurface } from "../components/chat/SingleChatSurface";
 import { SplitChatSurface } from "../components/chat/SplitChatSurface";
+import { clearLastThreadRouteIfMatches } from "../components/Sidebar.uiState";
 import { resolveSingleProjectId } from "./-chatThreadRoute.logic";
 
 function ChatThreadRouteView() {
@@ -150,6 +151,7 @@ function ChatThreadRouteView() {
     }
 
     if (!routeThreadExists) {
+      clearLastThreadRouteIfMatches(threadId);
       void navigate({ to: "/", replace: true });
     }
   }, [