feat(shell): restore the selected project after reload

Reloading `/` dropped the selected project: the sidebar highlight and the
composer landing were gone, and only `/session/:id` came back with its
context, because it reads it from the URL. The shell store now remembers
the selected project's id in localStorage, alongside the active tab, and
`useProjectsState` restores it once the project list has loaded - only on
`/`, and only if the project is still in the list, so a remembered id for a
deleted project leaves the choice to the user. Deleting the selected
project forgets it. Routing is unchanged.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: devswha

src/hooks/useProjectsState.query.dom.bun.test.tsx

@@ -99,6 +99,8 @@ const installFetch = (responses: Array<{ status?: number; body: unknown }>) => {
 
 afterEach(() => {
   cleanup();
+  // The lone project selects itself and is remembered; do not hand that to the next suite.
+  localStorage.clear();
   resetAppShellStore();
 });
 

src/hooks/useProjectsState.restore.dom.bun.test.tsx

@@ -0,0 +1,144 @@
+import assert from 'node:assert/strict';
+import { afterEach, beforeEach, test } from 'node:test';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, cleanup, render, waitFor } from '@testing-library/react';
+import { createElement } from 'react';
+
+import type { Project } from '../types/app';
+import { resetAppShellStore } from '../stores/useAppShellStore';
+
+import { useProjectsState } from './useProjectsState';
+
+/*
+ * The selected project survives a reload of `/`.
+ *
+ * `/session/:id` restores its context from the URL, but `/` used to come back
+ * to "pick a project" every time. The last selection is remembered and
+ * restored when the list has loaded - and only if the project is still in it.
+ */
+
+const project = (projectId: string, displayName: string): Project => ({
+  projectId,
+  path: `/workspace/${projectId}`,
+  fullPath: `/workspace/${projectId}`,
+  displayName,
+  origin: 'explicit',
+  isStarred: false,
+  sessions: [],
+  sessionMeta: { hasMore: false, total: 0 },
+});
+
+// Two projects, so the "a lone project selects itself" rule stays out of the way.
+const twoProjects = [project('project-1', 'Project one'), project('project-2', 'Project two')];
+
+type HookState = ReturnType<typeof useProjectsState>;
+
+/** One page load: a fresh query cache and shell store, the same localStorage. */
+const mountApp = (route: { sessionId?: string | null } = {}) => {
+  let state: HookState | null = null;
+  const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false } } });
+  const Harness = () => {
+    state = useProjectsState({
+      sessionId: route.sessionId ?? null,
+      navigate: (() => undefined) as never,
+      subscribe: () => () => undefined,
+      isMobile: false,
+      activeSessions: new Map(),
+    });
+    return null;
+  };
+  const view = render(createElement(QueryClientProvider, { client: queryClient }, createElement(Harness)));
+  return {
+    getState: () => {
+      assert.ok(state, 'hook state is available after rendering');
+      return state;
+    },
+    reload: () => {
+      view.unmount();
+      resetAppShellStore();
+    },
+  };
+};
+
+const serveProjects = (projects: Project[]) => {
+  const originalFetch = globalThis.fetch;
+  globalThis.fetch = async () => new Response(JSON.stringify(projects), { status: 200 });
+  return () => { globalThis.fetch = originalFetch; };
+};
+
+// Suites share one window here, so a remembered id from another file must not
+// leak into a "first visit".
+beforeEach(() => {
+  localStorage.clear();
+  resetAppShellStore();
+});
+
+afterEach(() => {
+  cleanup();
+  localStorage.clear();
+  resetAppShellStore();
+});
+
+test('the project selected before a reload is selected again after it', async () => {
+  const restore = serveProjects(twoProjects);
+  try {
+    const first = mountApp();
+    await waitFor(() => assert.equal(first.getState().projects.length, 2));
+    assert.equal(first.getState().selectedProject, null, 'nothing is chosen for the user on a first visit');
+
+    act(() => { first.getState().handleProjectSelect(twoProjects[1]); });
+    assert.equal(first.getState().selectedProject?.projectId, 'project-2');
+
+    first.reload();
+    const second = mountApp();
+    await waitFor(() => assert.equal(second.getState().selectedProject?.projectId, 'project-2'));
+  } finally {
+    restore();
+  }
+});
+
+test('a remembered project that no longer exists is ignored', async () => {
+  localStorage.setItem('selectedProjectId', 'project-deleted');
+  const restore = serveProjects(twoProjects);
+  try {
+    const app = mountApp();
+    await waitFor(() => assert.equal(app.getState().projects.length, 2));
+    // Give the restore effect a turn; a stale id must not select anything.
+    await act(async () => { await Promise.resolve(); });
+    assert.equal(app.getState().selectedProject, null);
+  } finally {
+    restore();
+  }
+});
+
+test('deleting the selected project forgets it, so a reload does not bring it back', async () => {
+  // Three, so that two remain and neither selects itself as a lone project.
+  const restore = serveProjects([...twoProjects, project('project-3', 'Project three')]);
+  try {
+    const app = mountApp();
+    await waitFor(() => assert.equal(app.getState().projects.length, 3));
+    act(() => { app.getState().handleProjectSelect(twoProjects[0]); });
+    assert.equal(localStorage.getItem('selectedProjectId'), 'project-1');
+
+    act(() => { app.getState().handleProjectDelete('project-1'); });
+    await act(async () => { await Promise.resolve(); });
+    assert.equal(localStorage.getItem('selectedProjectId'), null);
+    assert.equal(app.getState().selectedProject, null);
+  } finally {
+    restore();
+  }
+});
+
+test('a session route restores from the URL and leaves the remembered project alone', async () => {
+  localStorage.setItem('selectedProjectId', 'project-2');
+  const restore = serveProjects(twoProjects);
+  try {
+    const app = mountApp({ sessionId: 'session-elsewhere' });
+    await waitFor(() => assert.equal(app.getState().projects.length, 2));
+    await act(async () => { await Promise.resolve(); });
+    assert.equal(app.getState().selectedProject, null, 'the URL owns the context on /session/:id');
+  } finally {
+    restore();
+  }
+});

src/hooks/useProjectsState.ts

@@ -4,7 +4,7 @@ import type { NavigateFunction } from 'react-router-dom';
 
 import type { ServerEvent } from '../contexts/WebSocketContext';
 import { api } from '../utils/api';
-import { useAppShellStore } from '../stores/useAppShellStore';
+import { readPersistedProjectId, useAppShellStore } from '../stores/useAppShellStore';
 import { useSessionAttentionStore } from '../stores/useSessionAttentionStore';
 import type { LLMProvider, LoadingProgress, Project, ProjectSession } from '../types/app';
 
@@ -149,8 +149,19 @@ export function useProjectsState({ sessionId, navigate, subscribe, isMobile, act
     setSelectedProject((current) => reconcileSelectedProject(current, query.data ?? []));
   }, [query.data, setSelectedProject]);
 
+  // On `/` with nothing selected: a lone project selects itself, otherwise the
+  // project the user last worked in comes back - but only if it still exists,
+  // so a remembered id for a deleted project leaves the choice to the user.
+  // `/session/:id` restores its context from the URL and is left alone.
   useEffect(() => {
-    if (!query.isLoading && projects.length === 1 && !selectedProject && !sessionId) setSelectedProject(projects[0]);
+    if (query.isLoading || selectedProject || sessionId) return;
+    if (projects.length === 1) {
+      setSelectedProject(projects[0]);
+      return;
+    }
+    const rememberedId = readPersistedProjectId();
+    const remembered = rememberedId ? projects.find((project) => project.projectId === rememberedId) : undefined;
+    if (remembered) setSelectedProject(remembered);
   }, [projects, query.isLoading, selectedProject, sessionId, setSelectedProject]);
 
   useEffect(() => {

src/stores/useAppShellStore.dom.bun.test.tsx

@@ -70,6 +70,19 @@ test('invalid persisted tabs fall back to chat and tab updates persist', () => {
   assert.equal(localStorage.getItem('activeTab'), 'tasks');
 });
 
+test('the selected project id is remembered, and forgotten when the selection clears', () => {
+  const project = { projectId: 'project-1', displayName: 'One' } as Project;
+  useAppShellStore.getState().setSelectedProject(project);
+  assert.equal(localStorage.getItem('selectedProjectId'), 'project-1');
+
+  // Reconciling the same project with fresh data is not a new choice.
+  useAppShellStore.getState().setSelectedProject((previous) => previous ? { ...previous, displayName: 'One (renamed)' } : previous);
+  assert.equal(localStorage.getItem('selectedProjectId'), 'project-1');
+
+  useAppShellStore.getState().setSelectedProject(null);
+  assert.equal(localStorage.getItem('selectedProjectId'), null);
+});
+
 test('openSettings defaults to tools and shows the settings modal', () => {
   useAppShellStore.getState().openSettings();
 

src/stores/useAppShellStore.ts

@@ -41,6 +41,33 @@ const readPersistedTab = (): AppTab => {
   return 'chat';
 };
 
+const SELECTED_PROJECT_KEY = 'selectedProjectId';
+
+/**
+ * The project the user last worked in. `/session/:id` restores its own
+ * context from the URL; this is what lets `/` come back to the same project
+ * after a reload instead of the empty "pick a project" state.
+ */
+export const readPersistedProjectId = (): string | null => {
+  try {
+    return localStorage.getItem(SELECTED_PROJECT_KEY);
+  } catch {
+    return null;
+  }
+};
+
+const persistProjectId = (projectId: string | null) => {
+  try {
+    if (projectId) {
+      localStorage.setItem(SELECTED_PROJECT_KEY, projectId);
+    } else {
+      localStorage.removeItem(SELECTED_PROJECT_KEY);
+    }
+  } catch {
+    // Silently ignore storage errors
+  }
+};
+
 const resolve = <T,>(next: T | ((prev: T) => T), prev: T): T =>
   typeof next === 'function' ? (next as (prev: T) => T)(prev) : next;
 
@@ -63,9 +90,14 @@ const createInitialState = (): AppShellState => ({
 
 export const useAppShellStore = create<AppShellState>()((set) => ({
   ...createInitialState(),
-  setSelectedProject: (next) => set((state) => ({
-    selectedProject: resolve(next, state.selectedProject),
-  })),
+  setSelectedProject: (next) => set((state) => {
+    const selectedProject = resolve(next, state.selectedProject);
+    // Reconciliation re-sets the same project on every fetch; only a change
+    // of project is worth a storage write.
+    const projectId = selectedProject?.projectId ?? null;
+    if (projectId !== (state.selectedProject?.projectId ?? null)) persistProjectId(projectId);
+    return { selectedProject };
+  }),
   setSelectedSession: (next) => set((state) => ({
     selectedSession: resolve(next, state.selectedSession),
   })),