@hienlh/ppm 0.23.7 → 0.23.9

package/src/web/hooks/use-draft.ts

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { api, projectUrl } from "@/lib/api-client";
+import { getPrepare } from "@/lib/new-chat-prepare-client";
 
 export interface DraftAttachment {
   name: string;
@@ -71,10 +72,16 @@ export function useDraft(projectName: string, sessionId: string | null, tabId?:
     const releaseTimer = setTimeout(() => {
       if (!cancelled) setLoading(false);
     }, GATE_RELEASE_MS);
-    api
-      .get<DraftResult | null>(
-        `${projectUrl(projectName)}/chat/drafts/${encodeURIComponent(effectiveId)}`,
-      )
+    const fetchFromServer = () => api.get<DraftResult | null>(
+      `${projectUrl(projectName)}/chat/drafts/${encodeURIComponent(effectiveId)}`,
+    );
+    // A sessionless tab's `/chat/prepare` already read the `__new__` draft; joining it
+    // (rather than also GETting) only falls back to the plain fetch when the prepare
+    // request itself failed — a `draft: null` inside a settled response means "no draft"
+    // and is used as-is, the same as the GET path's own null case below.
+    const prepared = sessionId === null && tabId ? getPrepare(tabId) : undefined;
+    const request = prepared ? prepared.then((result) => result.draft, fetchFromServer) : fetchFromServer();
+    request
       .then((data) => {
         if (cancelled || keepRecoveredDraft || editRevision.current !== revision) return;
         if (data) {
@@ -91,7 +98,7 @@ export function useDraft(projectName: string, sessionId: string | null, tabId?:
         if (!cancelled) setLoading(false);
       });
     return () => { cancelled = true; clearTimeout(releaseTimer); };
-  }, [projectName, effectiveId]);
+  }, [projectName, effectiveId, tabId, sessionId]);
 
   // Debounced save (1s)
   const save = useCallback(

package/src/web/hooks/use-global-events.ts

@@ -4,6 +4,7 @@ import { getAuthToken } from "@/lib/api-client";
 import { useNotificationStore } from "@/stores/notification-store";
 import { useStreamingStore } from "@/stores/streaming-store";
 import { syncRunningSessions } from "@/lib/sync-running-sessions";
+import { syncAllKnownProjects } from "@/stores/session-list-sync-triggers";
 
 /**
  * App-wide event bus client (`/ws/global`).
@@ -63,6 +64,10 @@ export function useGlobalEvents(enabled: boolean, projectName?: string): void {
           client.send(JSON.stringify({ type: "watch", projectName: projectRef.current }));
         }
         void syncRunningSessions();
+        // Missed session/tag updates while the socket was down (another
+        // device renamed, pinned or deleted a session) — re-sync every
+        // project this browser already knows about.
+        syncAllKnownProjects();
         return;
       }
 

package/src/web/hooks/use-session-history.ts

@@ -1,8 +1,12 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { api, projectUrl } from "@/lib/api-client";
 import { openSessionInItsTab } from "@/lib/design/open-design-tab";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
-import { compareSessionsByActivity, type SessionInfo, type SessionListResponse, type ProjectTag } from "../../types/chat";
+import { projectCacheId } from "@/lib/browser-cache/cache-keys";
+import { useSessionListStore, EMPTY_SESSIONS, commitOptimistic } from "@/stores/session-list-store";
+import { projectRefForName, useProjectRef } from "@/stores/session-list-sync-triggers";
+import { sortSessions, removeSession, renameSession, setPinned, setSessionTag } from "@/lib/session-list-merge";
+import type { SessionInfo, SessionListResponse } from "../../types/chat";
 
 const PAGE_SIZE = 50;
 
@@ -18,8 +22,11 @@ export interface UseSessionHistoryOptions {
 
 /**
  * Shared chat-history state + mutations, extracted so the in-chat toolbar bar
- * and the sidebar History tab render identical behavior. Server-side title
- * search via `?q=`; tag filter is client-side.
+ * and the sidebar History tab render identical behavior. The default (no
+ * search) first page and the project tags come from the shared session-list
+ * store — one sync per project, shared with the welcome screen, tab bar and
+ * mobile nav. Server-side title search via `?q=` and "load more" beyond the
+ * store's first page stay local, on their own requests.
  */
 export function useSessionHistory({
   projectName,
@@ -27,75 +34,114 @@ export function useSessionHistory({
   onSelectSession,
   enableKeyboardShortcuts = false,
 }: UseSessionHistoryOptions) {
-  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const project = useProjectRef(projectName);
+  const id = project ? projectCacheId(project) : null;
+
+  useEffect(() => {
+    if (project) void useSessionListStore.getState().ensure(project);
+  }, [project]);
+  const storeSessions = useSessionListStore((s) => (id ? s.byProject[id]?.sessions : undefined) ?? EMPTY_SESSIONS);
+  const storeHasMore = useSessionListStore((s) => (id ? s.byProject[id]?.hasMore : undefined) ?? false);
+  const storeSyncing = useSessionListStore((s) => (id ? s.byProject[id]?.isSyncing : undefined) ?? false);
+  const tagsState = useSessionListStore((s) => (id ? s.byProject[id]?.tags : undefined) ?? null);
+
   const [loading, setLoading] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const debouncedSearch = useDebouncedValue(searchQuery, 300);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editingTitle, setEditingTitle] = useState("");
-  const [hasMore, setHasMore] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
-  const [projectTags, setProjectTags] = useState<ProjectTag[]>([]);
   const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
-  const [tagCounts, setTagCounts] = useState<Record<number, number>>({});
   const [showTagSettings, setShowTagSettings] = useState(false);
   const editInputRef = useRef<HTMLInputElement>(null);
 
+  // Rows beyond the store's first page ("Load more"), and the search result
+  // page when a query is active — both fetched directly, never written to
+  // the shared store.
+  const [pagedExtra, setPagedExtra] = useState<SessionInfo[]>([]);
+  const [pageHasMore, setPageHasMore] = useState<boolean | null>(null);
+  const [searchFirstPage, setSearchFirstPage] = useState<SessionInfo[] | null>(null);
+  const searchRequestRef = useRef(0);
+
+  const basePage = debouncedSearch ? (searchFirstPage ?? []) : storeSessions;
+  const sessions = sortSessions([...basePage, ...pagedExtra]);
+  const hasMore = pageHasMore ?? (debouncedSearch ? false : storeHasMore);
+  // "Loading" covers both an explicit refresh/search fetch and the store's
+  // own background sync, so a cold cache still shows a spinner instead of a
+  // premature "No sessions yet".
+  const effectiveLoading = loading || (!debouncedSearch && storeSyncing);
+
+  // Reset pagination and refetch the search page whenever the debounced
+  // query changes; clearing it falls back to the store's own first page.
+  useEffect(() => {
+    setPagedExtra([]);
+    setPageHasMore(null);
+    if (!projectName || !debouncedSearch) { setSearchFirstPage(null); return; }
+    const request = ++searchRequestRef.current;
+    setLoading(true);
+    (async () => {
+      try {
+        const params = new URLSearchParams({ limit: String(PAGE_SIZE), offset: "0", q: debouncedSearch });
+        const data = await api.get<SessionListResponse>(`${projectUrl(projectName)}/chat/sessions?${params}`);
+        if (request !== searchRequestRef.current) return;
+        setSearchFirstPage(data.sessions);
+        setPageHasMore(data.hasMore);
+      } catch {
+        // silent
+      } finally {
+        if (request === searchRequestRef.current) setLoading(false);
+      }
+    })();
+  }, [projectName, debouncedSearch]);
+
+  /** Explicit refresh (the toolbar's refresh button): re-syncs the store for
+   * the plain list, or re-runs the search for a filtered one. */
   const load = useCallback(async (query?: string) => {
+    setPagedExtra([]);
+    setPageHasMore(null);
     if (!projectName) return;
-    setLoading(true);
-    try {
-      const params = new URLSearchParams({ limit: String(PAGE_SIZE), offset: "0" });
-      if (query) params.set("q", query);
-      const data = await api.get<SessionListResponse>(`${projectUrl(projectName)}/chat/sessions?${params}`);
-      setSessions(data.sessions);
-      setHasMore(data.hasMore);
-    } catch {
-      // silent
-    } finally {
-      setLoading(false);
+    if (query) {
+      setLoading(true);
+      try {
+        const params = new URLSearchParams({ limit: String(PAGE_SIZE), offset: "0", q: query });
+        const data = await api.get<SessionListResponse>(`${projectUrl(projectName)}/chat/sessions?${params}`);
+        setSearchFirstPage(data.sessions);
+        setPageHasMore(data.hasMore);
+      } catch {
+        // silent
+      } finally {
+        setLoading(false);
+      }
+    } else if (project) {
+      setSearchFirstPage(null);
+      await useSessionListStore.getState().sync(project);
     }
-  }, [projectName]);
+  }, [projectName, project]);
 
   const loadMore = useCallback(async () => {
     if (!projectName || loadingMore || !hasMore) return;
     setLoadingMore(true);
     try {
-      // Offset by count of non-pinned sessions (pinned are injected separately by backend)
       const unpinnedCount = sessions.filter((s) => !s.pinned).length;
       const params = new URLSearchParams({ limit: String(PAGE_SIZE), offset: String(unpinnedCount) });
       if (debouncedSearch) params.set("q", debouncedSearch);
       const data = await api.get<SessionListResponse>(`${projectUrl(projectName)}/chat/sessions?${params}`);
-      setSessions((prev) => {
-        const existingIds = new Set(prev.map((s) => s.id));
-        const newSessions = data.sessions.filter((s) => !existingIds.has(s.id));
-        return [...prev, ...newSessions];
+      setPagedExtra((prev) => {
+        const existingIds = new Set([...basePage, ...prev].map((s) => s.id));
+        return [...prev, ...data.sessions.filter((s) => !existingIds.has(s.id))];
       });
-      setHasMore(data.hasMore);
+      setPageHasMore(data.hasMore);
     } catch {
       // silent
     } finally {
       setLoadingMore(false);
     }
-  }, [projectName, loadingMore, hasMore, sessions, debouncedSearch]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectName, loadingMore, hasMore, sessions, debouncedSearch, basePage]);
 
   const loadTags = useCallback(async () => {
-    if (!projectName) return;
-    try {
-      const data = await api.get<{ tags: ProjectTag[]; counts: Record<number, number> }>(
-        `${projectUrl(projectName)}/tags`,
-      );
-      setProjectTags(data.tags);
-      setTagCounts(data.counts);
-    } catch { /* silent */ }
-  }, [projectName]);
-
-  // Initial load + tags on mount.
-  useEffect(() => { load(); }, [load]);
-  useEffect(() => { if (projectName) loadTags(); }, [projectName, loadTags]);
-
-  // Re-fetch when debounced search changes (server-side title search).
-  useEffect(() => { load(debouncedSearch || undefined); }, [debouncedSearch]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (project) await useSessionListStore.getState().refreshTags(project);
+  }, [project]);
 
   function openSession(session: SessionInfo) {
     if (onSelectSession && !session.designSlug) {
@@ -118,12 +164,18 @@ export function useSessionHistory({
       setEditingId(null);
       return;
     }
-    try {
-      await api.patch(`${projectUrl(projectName)}/chat/sessions/${editingId}`, { title: editingTitle.trim() });
-      setSessions((prev) => prev.map((s) => s.id === editingId ? { ...s, title: editingTitle.trim() } : s));
-    } catch { /* silent */ }
+    const title = editingTitle.trim();
+    const sid = editingId;
+    const ref = project ?? projectRefForName(projectName);
+    // Optimistic: every list shows the new title now; a refused save re-syncs the store
+    // (`commitOptimistic`) and reloads this hook's own pages.
+    useSessionListStore.getState().renameSession(ref, sid, title);
+    setPagedExtra((prev) => renameSession(prev, sid, title));
+    setSearchFirstPage((prev) => prev ? renameSession(prev, sid, title) : prev);
     setEditingId(null);
-  }, [editingId, editingTitle, projectName]);
+    const ok = await commitOptimistic(ref, () => api.patch(`${projectUrl(projectName)}/chat/sessions/${sid}`, { title }));
+    if (!ok) void load(debouncedSearch || undefined);
+  }, [editingId, editingTitle, projectName, project, load, debouncedSearch]);
 
   const cancelEditing = useCallback(() => setEditingId(null), []);
 
@@ -131,33 +183,37 @@ export function useSessionHistory({
     e.stopPropagation();
     if (!projectName) return;
     const url = `${projectUrl(projectName)}/chat/sessions/${session.id}/pin`;
-    try {
-      if (session.pinned) {
-        await api.del(url);
-      } else {
-        await api.put(url);
-      }
-      setSessions((prev) => {
-        const updated = prev.map((s) => s.id === session.id ? { ...s, pinned: !s.pinned } : s);
-        return updated.sort(compareSessionsByActivity);
-      });
-    } catch { /* silent */ }
-  }, [projectName]);
+    const nextPinned = !session.pinned;
+    const ref = project ?? projectRefForName(projectName);
+    useSessionListStore.getState().setPinned(ref, session.id, nextPinned);
+    setPagedExtra((prev) => setPinned(prev, session.id, nextPinned));
+    setSearchFirstPage((prev) => prev ? setPinned(prev, session.id, nextPinned) : prev);
+    const ok = await commitOptimistic(ref, () => (nextPinned ? api.put(url) : api.del(url)));
+    if (!ok) void load(debouncedSearch || undefined);
+  }, [projectName, project, load, debouncedSearch]);
 
   const deleteSession = useCallback(async (e: React.MouseEvent, session: SessionInfo) => {
     e.stopPropagation();
     if (!projectName) return;
     if (!window.confirm("Delete this session? This cannot be undone.")) return;
-    try {
-      await api.del(`${projectUrl(projectName)}/chat/sessions/${session.id}?providerId=${session.providerId}`);
-      setSessions((prev) => prev.filter((s) => s.id !== session.id));
-    } catch { /* silent */ }
-  }, [projectName]);
+    const ref = project ?? projectRefForName(projectName);
+    useSessionListStore.getState().removeSession(ref, session.id);
+    setPagedExtra((prev) => removeSession(prev, session.id));
+    setSearchFirstPage((prev) => prev ? removeSession(prev, session.id) : prev);
+    const ok = await commitOptimistic(ref, () =>
+      api.del(`${projectUrl(projectName)}/chat/sessions/${session.id}?providerId=${session.providerId}`));
+    if (!ok) void load(debouncedSearch || undefined);
+  }, [projectName, project, load, debouncedSearch]);
 
+  /** Applies a tag change to every list at once — called before the request is sent
+   * (see `SessionContextMenu`), and again with the old tag if it is refused. */
   const handleTagChanged = useCallback((sid: string, tag: { id: number; name: string; color: string } | null) => {
-    setSessions((prev) => prev.map((s) => s.id === sid ? { ...s, tag } : s));
+    const ref = project ?? (projectName ? projectRefForName(projectName) : null);
+    if (ref) useSessionListStore.getState().setSessionTag(ref, sid, tag);
+    setPagedExtra((prev) => setSessionTag(prev, sid, tag));
+    setSearchFirstPage((prev) => prev ? setSessionTag(prev, sid, tag) : prev);
     loadTags(); // Refetch counts from API for accuracy
-  }, [loadTags]);
+  }, [loadTags, project, projectName]);
 
   const bulkDelete = useCallback(async () => {
     if (!projectName) return;
@@ -167,13 +223,17 @@ export function useSessionHistory({
     if (!num || num < 1) return;
     if (!window.confirm(`Delete all unpinned sessions older than ${num} days? This cannot be undone.`)) return;
     setLoading(true);
-    try {
-      await api.del(`${projectUrl(projectName)}/chat/sessions?olderThanDays=${num}`);
-      load(debouncedSearch || undefined);
-    } catch { /* silent */ }
-  }, [projectName, load, debouncedSearch]);
+    const ref = project ?? projectRefForName(projectName);
+    useSessionListStore.getState().removeOlderThan(ref, num);
+    await commitOptimistic(ref, () => api.del(`${projectUrl(projectName)}/chat/sessions?olderThanDays=${num}`));
+    // Reloaded either way: the local rule only approximates the server's, so even a
+    // successful delete is corrected by what the server says it kept.
+    await load(debouncedSearch || undefined);
+    setLoading(false);
+  }, [projectName, project, load, debouncedSearch]);
 
   // Keyboard shortcuts: 1–9 assign tags to the current session (bar only).
+  const projectTags = useMemo(() => tagsState?.tags ?? [], [tagsState]);
   useEffect(() => {
     if (!enableKeyboardShortcuts) return;
     const handler = (e: KeyboardEvent) => {
@@ -182,8 +242,9 @@ export function useSessionHistory({
       if (num >= 1 && num <= projectTags.length && sessionId) {
         const tag = projectTags[num - 1];
         if (tag) {
-          api.patch(`${projectUrl(projectName)}/chat/sessions/${sessionId}/tag`, { tagId: tag.id }).catch(() => {});
           handleTagChanged(sessionId, { id: tag.id, name: tag.name, color: tag.color });
+          void commitOptimistic(projectRefForName(projectName), () =>
+            api.patch(`${projectUrl(projectName)}/chat/sessions/${sessionId}/tag`, { tagId: tag.id }));
         }
       }
     };
@@ -197,10 +258,10 @@ export function useSessionHistory({
     : sessions;
 
   return {
-    sessions, filteredSessions, loading, hasMore, loadingMore,
+    sessions, filteredSessions, loading: effectiveLoading, hasMore, loadingMore,
     searchQuery, setSearchQuery,
     editingId, editingTitle, setEditingTitle, editInputRef,
-    projectTags, selectedTagId, setSelectedTagId, tagCounts,
+    projectTags, selectedTagId, setSelectedTagId, tagCounts: tagsState?.counts ?? {},
     showTagSettings, setShowTagSettings,
     load, loadMore, loadTags,
     openSession, startEditing, saveTitle, cancelEditing,

package/src/web/hooks/use-usage.ts

@@ -1,10 +1,37 @@
 import { useState, useCallback, useEffect, useRef } from "react";
 import { api, projectUrl } from "@/lib/api-client";
+import { getPrepare } from "@/lib/new-chat-prepare-client";
 import type { UsageInfo } from "../../types/chat";
 
 const POLL_INTERVAL = 120_000; // read cache every 2min
+/** A seed under this age is trusted over a redundant fetch once prepare settles. */
+const SEED_FRESH_MS = 30_000;
 type UsageSnapshot = { scope: string; usage: UsageInfo; fetchedAt: string | null };
 const usageCache = new Map<string, UsageSnapshot>();
+const seedTimestamps = new Map<string, number>();
+
+/** Same scope a fetch keys its cache entry under — exported so a seeder can populate
+ * the exact same slot the hook's own read will look at. */
+export function usageScopeKey(projectName: string, providerId: string, sessionId: string | undefined, pickedAccountId: string | undefined): string {
+  return JSON.stringify([projectName, providerId, sessionId, pickedAccountId]);
+}
+
+/** A usage reading only describes the scope it was asked for when it reports the
+ * account that scope previews; anything else is shown as empty rather than as some
+ * other account's figures. Shared by the hook's fetch and `seedUsage`. */
+function snapshotFor(scope: string, data: (UsageInfo & { lastFetchedAt?: string }) | null | undefined,
+  pickedAccountId: string | undefined, fetchedAt: string | null | undefined): UsageSnapshot {
+  const matchesAccount = !pickedAccountId || data?.activeAccountId === pickedAccountId;
+  return { scope, usage: matchesAccount ? data ?? {} : {}, fetchedAt: matchesAccount ? fetchedAt ?? null : null };
+}
+
+/** Populates the cache from a `/chat/prepare` response, ahead of the hook's own
+ * deferred fetch — see the `tabId` deferral below. Filtered by account exactly like
+ * the fetch, so a seed can never put a different account's figures under this scope. */
+export function seedUsage(scope: string, usage: UsageInfo, fetchedAt: string | null, pickedAccountId?: string): void {
+  usageCache.set(scope, snapshotFor(scope, usage, pickedAccountId, fetchedAt));
+  seedTimestamps.set(scope, Date.now());
+}
 
 interface UseUsageReturn {
   usageInfo: UsageInfo;
@@ -27,10 +54,23 @@ interface UseUsageReturn {
 /**
  * `sessionId` scopes the reported account to this session's binding. Without it the header
  * shows whichever account ran last across every open session, which is wrong for all but one.
+ *
+ * `tabId`, when given, defers the initial fetch until that tab's `/chat/prepare` (if any is
+ * in flight) settles — prepare already reads usage for the account it just picked, and a
+ * fresh seed from it is used in place of a redundant fetch.
  */
-export function useUsage(projectName: string, providerId = "claude", sessionId?: string, pickedAccountId?: string, enabled = true): UseUsageReturn {
-  const previewAccountId = providerId === "codex" && !sessionId ? pickedAccountId : undefined;
-  const scope = JSON.stringify([projectName, providerId, sessionId, pickedAccountId]);
+export function useUsage(
+  projectName: string,
+  providerId = "claude",
+  sessionId?: string,
+  pickedAccountId?: string,
+  enabled = true,
+  tabId?: string,
+): UseUsageReturn {
+  // Sessionless tabs preview the account prepare picked for them; a live session's own
+  // binding always wins once it exists, for either provider.
+  const previewAccountId = !sessionId ? pickedAccountId : undefined;
+  const scope = usageScopeKey(projectName, providerId, sessionId, pickedAccountId);
   const [snapshot, setSnapshot] = useState<UsageSnapshot | null>(null);
   const [usageLoading, setUsageLoading] = useState(false);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -52,8 +92,7 @@ export function useUsage(projectName: string, providerId = "claude", sessionId?:
         if (request !== requestRef.current) return;
         // Each response is a snapshot, not a patch. Missing fields must clear
         // old account labels/limits, especially when switching providers.
-        const matchesAccount = !pickedAccountId || data?.activeAccountId === pickedAccountId;
-        const next = { scope, usage: matchesAccount ? data ?? {} : {}, fetchedAt: matchesAccount ? data?.lastFetchedAt ?? null : null };
+        const next = snapshotFor(scope, data, pickedAccountId, data?.lastFetchedAt);
         usageCache.set(scope, next);
         setSnapshot(next);
       })
@@ -68,14 +107,35 @@ export function useUsage(projectName: string, providerId = "claude", sessionId?:
     setSnapshot(null);
     setUsageLoading(false);
     if (!enabled) return;
-    const initialTimer = setTimeout(() => doFetch(), 500);
+    let cancelled = false;
+    let initialTimer: ReturnType<typeof setTimeout> | undefined;
+    const schedule = () => { if (!cancelled) initialTimer = setTimeout(() => doFetch(), 500); };
+    const prepare = tabId ? getPrepare(tabId) : undefined;
+    if (prepare) {
+      prepare.then(
+        () => {
+          if (cancelled) return;
+          const seededAt = seedTimestamps.get(scope);
+          const seeded = usageCache.get(scope);
+          if (seeded && seededAt !== undefined && Date.now() - seededAt < SEED_FRESH_MS) {
+            setSnapshot(seeded);
+            return;
+          }
+          schedule();
+        },
+        () => { if (!cancelled) schedule(); },
+      );
+    } else {
+      schedule();
+    }
     timerRef.current = setInterval(() => doFetch(), POLL_INTERVAL);
     return () => {
+      cancelled = true;
       ++requestRef.current;
-      clearTimeout(initialTimer);
+      if (initialTimer) clearTimeout(initialTimer);
       if (timerRef.current) clearInterval(timerRef.current);
     };
-  }, [doFetch, enabled]);
+  }, [doFetch, enabled, tabId, scope]);
 
   /** Manual refresh — asks BE for fresh usage. */
   const refreshUsage = useCallback(() => doFetch(true), [doFetch]);

package/src/web/lib/api-client.ts

@@ -1,4 +1,5 @@
 import { toast } from "sonner";
+import { wipeBrowserCaches } from "./browser-cache/wipe-browser-caches";
 
 const TOKEN_KEY = "ppm-auth-token";
 const RELOAD_GUARD_KEY = "ppm-auth-reload-ts";
@@ -28,6 +29,20 @@ const pendingGets = new Map<string, { promise: Promise<unknown>; startedAt: numb
  */
 const RESPONSE_TIMEOUT_MS = 30_000;
 
+/**
+ * A request the server answered with a failure. The message is exactly what callers
+ * have always matched on; `status` is there for the ones that must tell "this resource
+ * is gone" (404) from any other failure whose wording happens to say "not found".
+ */
+export class ApiError extends Error {
+  readonly status: number;
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+  }
+}
+
 /** `reason` is only guaranteed on newer engines; never propagate `undefined`. */
 function abortReason(signal: AbortSignal): unknown {
   return signal.reason ?? new DOMException("Aborted", "AbortError");
@@ -168,7 +183,7 @@ export class ApiClient {
     warnOnAuditFailure(res);
 
     if (res.status === 401) {
-      localStorage.removeItem(TOKEN_KEY);
+      clearAuthToken();
       // Guard against infinite reload loops: skip reload if we already reloaded within 3s
       const lastReload = Number(sessionStorage.getItem(RELOAD_GUARD_KEY) || "0");
       if (Date.now() - lastReload > 3000) {
@@ -182,11 +197,11 @@ export class ApiClient {
     try {
       json = await res.json();
     } catch {
-      throw new Error(res.ok ? "Empty response from server" : `Server error (HTTP ${res.status})`);
+      throw new ApiError(res.ok ? "Empty response from server" : `Server error (HTTP ${res.status})`, res.status);
     }
 
     if (json.ok === false) {
-      throw new Error(json.error ?? `HTTP ${res.status}`);
+      throw new ApiError(json.error ?? `HTTP ${res.status}`, res.status);
     }
 
     return json.data as T;
@@ -204,8 +219,16 @@ export function setAuthToken(token: string) {
   localStorage.setItem(TOKEN_KEY, token);
 }
 
+/**
+ * Drops the auth token and wipes every browser cache built on top of it — the
+ * one path both the 401 handler above and a failed login (`login-screen.tsx`)
+ * go through, so neither leaves stale project data behind for the next user
+ * of this browser. The wipe itself is fire-and-forget: it never throws, and
+ * nothing here needs to wait on it (a 401 reloads the page moments later).
+ */
 export function clearAuthToken() {
   localStorage.removeItem(TOKEN_KEY);
+  void wipeBrowserCaches();
 }
 
 export function getAuthToken(): string | null {

package/src/web/lib/api-settings.ts

@@ -1,5 +1,6 @@
 import { api } from "./api-client";
 import { clearChatPreparationCache } from "./chat-preparation-cache";
+import { writeChatPreparationSettings } from "./chat-preference-local-cache";
 
 export interface OAuthProfileData {
   account?: {
@@ -84,9 +85,12 @@ export interface PickedAccount {
  *
  * Consumes a pick rather than previewing one, so call it once per tab and keep the answer.
  * Null means nothing is usable right now (Claude) or no managed account exists (Codex, which
- * then runs on the ambient ~/.codex login).
+ * then runs on the ambient ~/.codex login). Every other provider has no account pool at all,
+ * so it gets null without a request: sending it to Claude's `/pick` would advance Claude's
+ * round-robin for a chat that never runs on a Claude account.
  */
 export function pickAccountForTab(providerId: string, signal?: AbortSignal): Promise<PickedAccount | null> {
+  if (providerId !== "claude" && providerId !== "codex") return Promise.resolve(null);
   const path = providerId === "codex" ? "/api/codex-accounts/pick" : "/api/accounts/pick";
   return api.post<PickedAccount | null>(path, undefined, { signal });
 }
@@ -231,6 +235,9 @@ export function getAISettings(): Promise<AISettings> {
 export function updateAISettings(settings: Partial<AISettings>): Promise<AISettings> {
   return api.put<AISettings>("/api/settings/ai", settings).then((result) => {
     clearChatPreparationCache();
+    // Keep the local cache's answer in sync with what the server just accepted, so the
+    // next tab opened (even before a fresh `/chat/prepare` lands) resolves warm from it.
+    writeChatPreparationSettings(result);
     return result;
   });
 }

package/src/web/lib/browser-cache/cache-keys.ts

@@ -0,0 +1,60 @@
+/**
+ * Cache keys for the browser-side project cache.
+ *
+ * Every project-scoped key is built from a hash of the project's name AND
+ * path, never the name alone: a rename orphans the old key instead of
+ * colliding with it, and a new project that reuses an old name does not
+ * inherit its predecessor's cache. See `project-cache-hydration.ts` and
+ * `wipe-browser-caches.ts` for where those old keys get evicted.
+ */
+
+/** The minimal project shape every builder here needs. A call site that only
+ * has a project name (most do — see `use-*` hooks and store actions) must
+ * look up its `path` first, e.g. from `useProjectStore.getState().projects`. */
+export interface ProjectCacheRef {
+  name: string;
+  path: string;
+}
+
+/** FNV-1a, 32-bit, hex-encoded. Not cryptographic — it only needs to be
+ * short, stable across reloads, and collision-unlikely for the handful of
+ * projects one browser has open at a time. */
+function fnv1a(input: string): string {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return (hash >>> 0).toString(16).padStart(8, "0");
+}
+
+/** Short stable id for a project. `\0` cannot appear in a name or a
+ * filesystem path, so it safely separates the two fields being hashed. */
+export function projectCacheId(project: ProjectCacheRef): string {
+  return fnv1a(`${project.name}\0${project.path}`);
+}
+
+/** IndexedDB key for one provider's cached slash-command list. */
+export function slash(projectId: string, provider: string): string {
+  return `${projectId}:slash:${provider}`;
+}
+
+/** IndexedDB key for a project's cached recent-session list. */
+export function sessions(projectId: string): string {
+  return `${projectId}:sessions`;
+}
+
+/** IndexedDB key for a project's cached tag list. */
+export function tags(projectId: string): string {
+  return `${projectId}:tags`;
+}
+
+/** Every project's cached chat-provider list is a localStorage entry under
+ * this shared prefix, so a full wipe can remove them all without knowing
+ * which projects exist. */
+export const CHAT_PROVIDERS_KEY_PREFIX = "ppm-chat-providers:";
+
+/** localStorage key for a project's cached chat provider list. */
+export function providers(projectId: string): string {
+  return `${CHAT_PROVIDERS_KEY_PREFIX}${projectId}`;
+}