@hienlh/ppm 0.23.7 → 0.23.9

package/src/web/components/chat/chat-tab.tsx

@@ -13,8 +13,8 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { usePanelStore } from "@/stores/panel-store";
 import { useNotificationStore } from "@/stores/notification-store";
 import { openBugReportPopup } from "@/lib/report-bug";
-import { getAISettings } from "@/lib/api-settings";
 import { useChatAccountClaim } from "@/hooks/use-chat-account-claim";
+import { startPrepare, getPrepare, isPrepared, forgetPrepare } from "@/lib/new-chat-prepare-client";
 import { MessageList } from "./message-list";
 import { BackgroundCommandBar } from "./background-command-bar";
 import { TeamWorkingBar } from "./team-working-bar";
@@ -27,7 +27,9 @@ import { ChatHistoryBar } from "./chat-history-bar";
 import { NewChatProviderGate, useNewChatPreparation } from "./new-chat-provider-gate";
 import { UserBubble } from "./message-user-bubble";
 import { useDraft, type DraftAttachment } from "@/hooks/use-draft";
-import { patchTabMetadata } from "@/lib/patch-tab-metadata";
+import { currentTabMetadata, patchTabMetadata } from "@/lib/patch-tab-metadata";
+import { useSessionListStore } from "@/stores/session-list-store";
+import { projectRefForName } from "@/stores/session-list-sync-triggers";
 
 import type { DragEvent } from "react";
 import type { FileNode } from "../../../types/project";
@@ -81,6 +83,8 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
   const [sessionId, setSessionId] = useState<string | null>(
     (metadata?.sessionId as string) ?? null,
   );
+  const sessionIdRef = useRef(sessionId);
+  sessionIdRef.current = sessionId;
 
   /**
    * Follow the session id when the provider adopts its own.
@@ -94,6 +98,12 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
    * reload rather than only lasting the turn.
    */
   const handleSessionMigrated = useCallback((newSessionId: string) => {
+    // Read from the metadata ref, not the `projectName` const below — this
+    // callback is created before that binding exists in this function body.
+    const pn = metadataRef.current?.projectName as string | undefined;
+    if (sessionIdRef.current && pn) {
+      useSessionListStore.getState().replaceSessionId(projectRefForName(pn), sessionIdRef.current, newSessionId);
+    }
     setSessionId(newSessionId);
   }, []);
   const [providerOverride, setProviderId] = useState<string>(
@@ -118,6 +128,29 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
   const [permissionMode, setPermissionMode] = useState<string | undefined>(
     (metadata?.permissionMode as string) ?? undefined,
   );
+  /**
+   * Whether prepare's fresh permission may replace the one this tab carries.
+   *
+   * Only a mode that came from the local cache (`permissionModeSource: "cache"`), or no
+   * mode at all, is a placeholder for the server's answer. A mode the user picked by hand
+   * ("user") or one the tab inherited from a session it already ran ("inherited" — a
+   * design tab's `/clear` remounts this component with the previous session's mode still
+   * in metadata) is a decision, and a fresh default must not quietly loosen it. A mode
+   * with no recorded source predates the distinction and is kept for the same reason.
+   * The source lives in metadata rather than in component state so it survives exactly
+   * that remount; the ref covers a tab the panel store does not know.
+   */
+  const permissionChosenByUser = useRef(false);
+  const permissionReplaceable = useCallback((): boolean => {
+    if (permissionChosenByUser.current) return false;
+    const current = (tabId ? currentTabMetadata(tabId) : undefined) ?? metadataRef.current;
+    return !current?.permissionMode || current.permissionModeSource === "cache";
+  }, [tabId]);
+  const handleModeChange = useCallback((mode: string) => {
+    permissionChosenByUser.current = true;
+    setPermissionMode(mode);
+    if (tabId) patchTabMetadata(tabId, { permissionMode: mode, permissionModeSource: "user" });
+  }, [tabId]);
   useEffect(() => {
     if (!preparation?.pending && !sessionId && metadata?.providerId) {
       setProviderId(metadata.providerId as string);
@@ -146,6 +179,62 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
 
   // Use tab's own project, not global activeProject (keep-alive: hidden tabs must not react to switches)
   const projectName = (metadata?.projectName as string) ?? "";
+
+  /**
+   * Every sessionless chat tab (new, `/clear`, a design's chat, a reload mid-resolution)
+   * fires one `/chat/prepare`, kept per tab id by the prepare client. Started from a lazy
+   * state initializer — during this component's first render, not inside an effect —
+   * because a child's own mount effect (the composer's slash-item load, a few lines of
+   * JSX down) would otherwise run first and never get the chance to join it: on mount,
+   * effects fire child-before-parent, but a component's own render always completes, for
+   * its whole subtree, before any of them run at all.
+   *
+   * Once per mounted instance, never per render: a re-render after the client's join
+   * window must not POST again. A remount only prepares again when this sessionless
+   * stretch was never prepared successfully, and the pick is skipped whenever the tab
+   * already holds a claim, so one tab never consumes two accounts.
+   */
+  useState(() => {
+    if (!tabId || sessionId || !projectName || isPrepared(tabId)) return null;
+    const pendingOnOpen = metadata?.providerPending === true;
+    const openedOn = pendingOnOpen ? undefined : metadata?.providerId as string | undefined;
+    const claimedFor = typeof metadata?.pickedAccountId === "string" ? metadata.pickedAccountProvider : undefined;
+    startPrepare(tabId, projectRefForName(projectName), {
+      ...(pendingOnOpen
+        ? { focusedProvider: metadata?.focusedProviderOnOpen as string | undefined }
+        : { providerId: openedOn }),
+      // A pending tab does not know its provider yet, so any claim it carries counts.
+      skipPick: claimedFor !== undefined && (pendingOnOpen || claimedFor === openedOn),
+    });
+    return null;
+  });
+
+  // Once the tab has a session nothing may join its old prepare again — a design tab's
+  // `/clear` remounts under this same tab id, and would otherwise restore the draft that
+  // was just sent along with the settings it was prepared with.
+  useEffect(() => {
+    if (tabId && sessionId) forgetPrepare(tabId);
+  }, [tabId, sessionId]);
+
+  // The chip shown before any message is sent should reflect the account's real
+  // permission as soon as prepare answers, not only once the user finally sends —
+  // unless the mode the tab carries is a decision rather than a cached default.
+  useEffect(() => {
+    if (!tabId || sessionId) return;
+    const prepared = getPrepare(tabId);
+    if (!prepared) return;
+    let cancelled = false;
+    prepared.then((result) => {
+      if (cancelled || !permissionReplaceable()) return;
+      const fresh = result.settings.providers[result.providerId]?.permission_mode ?? "bypassPermissions";
+      if (fresh !== metadataRef.current?.permissionMode) {
+        setPermissionMode(fresh);
+        patchTabMetadata(tabId, { permissionMode: fresh, permissionModeSource: "cache" });
+      }
+    }).catch(() => {});
+    return () => { cancelled = true; };
+  }, [tabId, sessionId, permissionReplaceable]);
+
   useDesignSessionRedirect({ tabId, sessionId, designSlug, projectName, providerId });
   const updateTab = useTabStore((s) => s.updateTab);
   const version = useSettingsStore((s) => s.version);
@@ -154,20 +243,12 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
   // account shown is the one bound to it, not whichever session ran most recently.
   const { usageInfo, usageLoading, lastFetchedAt, refreshUsage, reloadUsage } =
     useUsage(projectName, providerId, sessionId ?? undefined,
-      metadata?.pickedAccountProvider === providerId ? metadata?.pickedAccountId as string | undefined : undefined, !preparation?.pending);
+      metadata?.pickedAccountProvider === providerId ? metadata?.pickedAccountId as string | undefined : undefined,
+      !preparation?.pending, tabId);
 
   // Draft auto-save/restore
   const { draft, draftLoading, saveDraft, clearDraft, cancelPendingSave, moveDraft } = useDraft(projectName, sessionId, tabId);
 
-  // Load global default permission mode on mount (if no per-session override)
-  useEffect(() => {
-    if (permissionMode || preparation?.pending) return;
-    getAISettings().then((s) => {
-      const provider = s.providers[providerId];
-      setPermissionMode(provider?.permission_mode ?? "bypassPermissions");
-    }).catch(() => {});
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
   // Persist sessionId, providerId, and permissionMode to tab metadata.
   //
   // The claimed account is dropped at the same moment: once a session exists, its binding
@@ -178,12 +259,17 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
   // Merged into the metadata the store holds now, never the `metadata` prop: the prop is
   // whatever this component last rendered with, and spreading it back would revert keys a
   // host (a design tab) or the panel store wrote in the meantime.
+  //
+  // A mode a session ran with is no longer a cached default: if this tab goes sessionless
+  // again (a design `/clear`), its next session keeps it rather than taking prepare's.
   useEffect(() => {
     if (!tabId || !sessionId) return;
+    const source = currentTabMetadata(tabId)?.permissionModeSource === "user" ? "user" : "inherited";
     patchTabMetadata(tabId, {
       sessionId,
       providerId,
       permissionMode,
+      permissionModeSource: permissionMode ? source : undefined,
       pickedAccountId: undefined,
       pickedAccountLabel: undefined,
       pickedAccountProvider: undefined,
@@ -392,6 +478,9 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
     if (tabId && sessionTitle && !designSlug) {
       updateTab(tabId, { title: sessionTitle });
     }
+    if (sessionId && projectName && sessionTitle) {
+      useSessionListStore.getState().renameSession(projectRefForName(projectName), sessionId, sessionTitle);
+    }
   }, [sessionTitle]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Pending fork message — show in input for user to edit, not auto-send
@@ -544,14 +633,21 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       onNewSession(clearedFrom);
       return;
     }
+    // The new tab starts from the global default like any new chat, so this tab's mode is
+    // handed over only as a cached placeholder: it keeps the chip from opening blank, and
+    // both the local cache (`openTab`) and the fresh prepare still replace it.
     useTabStore.getState().openTab({
       type: "chat",
       title: title || "AI Chat",
-      metadata: { projectName, providerId, ...(clearedFrom && { clearedFrom }) },
+      metadata: {
+        projectName, providerId,
+        ...(permissionMode && { permissionMode, permissionModeSource: "cache" }),
+        ...(clearedFrom && { clearedFrom }),
+      },
       projectId: projectName || null,
       closable: true,
     });
-  }, [projectName, providerId, onNewSession]);
+  }, [projectName, providerId, permissionMode, onNewSession]);
 
   const handleSelectSession = useCallback((session: SessionInfo) => {
     // A message still waiting for its own session's socket must not ride the
@@ -574,6 +670,11 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         `${projectUrl(projectName)}/chat/sessions/${sessionId}/fork?providerId=${providerId}`,
         { messageId },
       );
+      useSessionListStore.getState().upsertSession(projectRefForName(projectName), {
+        id: forked.id, providerId, title: userMessage.slice(0, 50), createdAt: new Date().toISOString(),
+        // A fork keeps its design, so a design tab's history list still shows it.
+        ...(designSlug && { designSlug }),
+      });
       // A host that keeps the conversation in place takes the fork over; otherwise open a
       // new chat tab with the forked session — it will send userMessage on connect.
       if (onFork) {
@@ -599,7 +700,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
           : msg,
       });
     }
-  }, [sessionId, projectName, providerId, onFork]);
+  }, [sessionId, projectName, providerId, onFork, designSlug]);
 
   /** Edit a user message: prefill input + arm same-tab fork on next send */
   const handleEdit = useCallback((userMessage: string, messageId?: string, ownMsgId?: string) => {
@@ -631,6 +732,10 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
           { messageId: anchorMsgId },
           { signal: AbortSignal.timeout(SESSION_CREATE_TIMEOUT_MS) },
         );
+        useSessionListStore.getState().upsertSession(projectRefForName(projectName), {
+          id: forked.id, providerId, title: fullContent.slice(0, 50), createdAt: new Date().toISOString(),
+          ...(designSlug && { designSlug }),
+        });
         // The tree gained a sibling. Swapping sessionId below refetches
         // /messages, which carries a fresh versionMap, so the switcher's n/m
         // counts update without any cache to invalidate.
@@ -657,7 +762,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         setRestore({ text: fullContent, nonce: Date.now() });
       }
     },
-    [sessionId, projectName, providerId, permissionMode, tabId, queuePendingSend, moveDraft],
+    [sessionId, projectName, providerId, permissionMode, tabId, queuePendingSend, moveDraft, designSlug],
   );
 
   /** Swap THIS tab to another version's session (version switcher prev/next) */
@@ -737,12 +842,23 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         setFirstSendPending(true);
         setFirstSendPreview({ content: fullContent, timestamp: new Date().toISOString() });
         try {
-          const prepared = preparation?.pending ? await preparation.prepare() : null;
+          const resolved = preparation?.pending ? await preparation.prepare() : null;
+          if (attempt !== firstSendAttempt.current) return;
+          const selectedProvider = resolved?.providerId ?? providerId;
+          let selectedPermission = resolved?.permissionMode ?? permissionMode ?? preparation.permissionMode;
+
+          // The tab's own `/chat/prepare` may still be running (a send within the first
+          // second) or may already carry a fresher permission than the one the tab opened
+          // with — bounded by the promise's own request timeout, so a dead server never
+          // holds up a send: on failure the values already resolved above are used as-is.
+          const prepared = tabId ? await getPrepare(tabId)?.catch(() => undefined) : undefined;
           if (attempt !== firstSendAttempt.current) return;
-          const selectedProvider = prepared?.providerId ?? providerId;
-          const selectedPermission = prepared?.permissionMode ?? permissionMode ?? preparation.permissionMode;
+          if (prepared && permissionReplaceable()) {
+            selectedPermission = prepared.settings.providers[selectedProvider]?.permission_mode ?? selectedPermission;
+          }
           setProviderId(selectedProvider);
           setPermissionMode(selectedPermission);
+          if (tabId) patchTabMetadata(tabId, { permissionMode: selectedPermission });
           const picked = await ensureAccountClaim(selectedProvider);
           if (attempt !== firstSendAttempt.current) return;
           const latest = metadataRef.current;
@@ -767,6 +883,10 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
             ...(designSlug && { designSlug }),
           }, { signal: AbortSignal.timeout(SESSION_CREATE_TIMEOUT_MS) });
           if (attempt !== firstSendAttempt.current) return;
+          useSessionListStore.getState().upsertSession(projectRefForName(pName), {
+            id: session.id, providerId: session.providerId, title: session.title, createdAt: session.createdAt,
+            ...(designSlug && { designSlug }),
+          });
           moveDraft(session.id);
           setSessionId(session.id);
           setProviderId(session.providerId);
@@ -788,7 +908,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       // Only now: the message is on (or queued for) a live session's socket.
       clearDraft();
     },
-    [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode, metadata, queuePendingSend, restoreUnsentMessage, clearDraft, designSlug, moveDraft, preparation, ensureAccountClaim],
+    [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode, metadata, queuePendingSend, restoreUnsentMessage, clearDraft, designSlug, moveDraft, preparation, ensureAccountClaim, tabId, permissionReplaceable],
   );
 
   // Read through a ref so handleInputSend keeps a stable identity — it is passed to
@@ -1148,7 +1268,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
             onContentChange={handleContentChange}
             getUserHistory={getUserHistory}
             permissionMode={permissionMode}
-            onModeChange={!preparation?.pending && !firstSendPending ? setPermissionMode : undefined}
+            onModeChange={!preparation?.pending && !firstSendPending ? handleModeChange : undefined}
             providerId={preparation?.providerId ?? providerId}
             sessionId={sessionId ?? undefined}
             // A design chat's provider was chosen among those that carry design instructions;

package/src/web/components/chat/codex-usage-panel.tsx

@@ -12,7 +12,7 @@
  * all — so the quota rows follow what the account actually reports.
  */
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { Loader2 } from "@/lib/icons";
 import { api } from "@/lib/api-client";
 import { AccountCard } from "@/components/settings/accounts/account-card";
@@ -68,29 +68,47 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
   const [selectingId, setSelectingId] = useState<string | null>(null);
   const [togglingId, setTogglingId] = useState<string | null>(null);
   const [panelError, setPanelError] = useState<string | null>(null);
+  const requestRef = useRef(0);
+  const refreshingRef = useRef(false);
   /** The signed-out account whose "Sign in again" chip was pressed. */
   const [signInAgain, setSignInAgain] = useState<CodexAccount | null>(null);
 
   const load = useCallback(async () => {
+    if (refreshingRef.current) return;
+    const request = ++requestRef.current;
     setLoading(true);
     try {
       const d = await api.get<{ accounts: CodexAccount[] }>("/api/codex-accounts");
+      if (request !== requestRef.current) return;
       setAccounts(d.accounts);
       const u = await api.get<Record<string, Usage>>("/api/codex-accounts/usage");
-      setUsages(u);
-    } catch { /* ignore */ } finally { setLoading(false); }
+      if (request === requestRef.current) setUsages(u);
+    } catch { /* ignore */ } finally {
+      if (request === requestRef.current) setLoading(false);
+    }
   }, []);
-  useEffect(() => { load(); }, [load]);
+  useEffect(() => {
+    void load();
+    // The server refreshes quota every five minutes. Keep open cards in sync
+    // by re-reading its cache on the same cadence as the chat header.
+    const timer = setInterval(() => { void load(); }, 120_000);
+    return () => { clearInterval(timer); ++requestRef.current; };
+  }, [load]);
 
   const reload = useCallback(async () => {
+    const request = ++requestRef.current;
+    refreshingRef.current = true;
     setLoading(true);
     try {
-      // Unlike the account-list endpoint, the chat refresh carries refresh=1
-      // and invalidates Codex's five-minute provider-usage cache first.
+      // The chat refresh carries refresh=1 and fetches every Codex account
+      // live before this cached account-list read.
       await onReload?.();
       const u = await api.get<Record<string, Usage>>("/api/codex-accounts/usage");
-      setUsages(u);
-    } catch { /* retain the last successful reading */ } finally { setLoading(false); }
+      if (request === requestRef.current) setUsages(u);
+    } catch { /* retain the last successful reading */ } finally {
+      refreshingRef.current = false;
+      if (request === requestRef.current) setLoading(false);
+    }
   }, [onReload]);
 
   /**

package/src/web/components/chat/message-input.tsx

@@ -19,7 +19,7 @@ import { ModeSelector, getModeLabel, getModeIcon } from "./mode-selector";
 import { ProviderSelector } from "./provider-selector";
 import { ModelThinkingSelector } from "./model-thinking-selector";
 import type { SlashItem } from "./slash-command-picker";
-import { fetchSlashItems, clearSlashItemsCache } from "@/lib/slash-items-cache";
+import { fetchSlashItems, getCachedSlashItems, subscribeSlashItems, SLASH_ITEMS_TTL_MS } from "@/lib/slash-items-cache";
 import type { FileNode } from "../../../types/project";
 import { useFileStore } from "@/stores/file-store";
 import { PromptCacheChip } from "./prompt-cache-chip";
@@ -405,36 +405,47 @@ export const MessageInput = memo(function MessageInput({
     return () => clearTimeout(timer);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Cache per project/provider/session, with a TTL for externally installed skills.
+  // Reuse provider skills immediately and refresh project overrides in the background.
+  const slashLoadRef = useRef(0);
   const loadSlashItems = useCallback(() => {
+    const request = ++slashLoadRef.current;
     if (configurationPending) return;
     if (!projectName) {
       slashItemsRef.current = [];
       onSlashItemsLoaded?.([], []);
       return;
     }
+    const cached = getCachedSlashItems(projectName, providerId);
+    slashItemsRef.current = cached?.items ?? [];
+    onSlashItemsLoaded?.(cached?.items ?? [], cached?.recentNames ?? []);
     fetchSlashItems(projectName, providerId, sessionId)
       .then((data) => {
+        if (request !== slashLoadRef.current) return;
         slashItemsRef.current = data.items;
         onSlashItemsLoaded?.(data.items, data.recentNames);
       })
-      .catch(() => {
-        slashItemsRef.current = [];
-        onSlashItemsLoaded?.([], []);
-      });
+      .catch(() => { /* Keep usable skills when a refresh fails. */ });
   }, [projectName, providerId, sessionId, onSlashItemsLoaded, configurationPending]);
 
   useEffect(() => {
-    if (!configurationPending && slashPickerOpenRef.current) loadSlashItems();
-  }, [configurationPending, loadSlashItems]);
+    loadSlashItems();
+    const unsubscribe = subscribeSlashItems(() => {
+      if (!projectName) return;
+      const cached = getCachedSlashItems(projectName, providerId);
+      if (cached && !configurationPending) {
+        slashItemsRef.current = cached.items;
+        onSlashItemsLoaded?.(cached.items, cached.recentNames);
+      }
+    });
+    const timer = setInterval(loadSlashItems, SLASH_ITEMS_TTL_MS);
+    return () => { ++slashLoadRef.current; unsubscribe(); clearInterval(timer); };
+  }, [loadSlashItems, projectName, providerId, onSlashItemsLoaded, configurationPending]);
 
-  // Load on the first slash interaction below. Opening a transcript should
-  // not enumerate skills (or start a provider CLI) before the user needs them.
+  // Warm the catalog on mount so the first slash interaction need not wait.
 
   // Refresh button invalidated the server cache — drop ours too, then refetch.
   useEffect(() => {
     const handler = () => {
-      clearSlashItemsCache(projectName);
       loadSlashItems();
     };
     window.addEventListener("ppm:slash-items-refresh", handler);

package/src/web/components/chat/new-chat-provider-gate.tsx

@@ -1,8 +1,12 @@
-import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from "react";
 import type { AISettings } from "@/lib/api-settings";
 import { chatPreparationGeneration, clearChatPreparationCache, getChatPreparationSettings, getChatProviders, type ChatProviderInfo } from "@/lib/chat-preparation-cache";
 import { resolveNewChatProvider } from "@/lib/new-chat-provider";
+import { readChatPreparationSettings, readChatProviders } from "@/lib/chat-preference-local-cache";
+import { projectCacheId } from "@/lib/browser-cache/cache-keys";
+import { getPrepare } from "@/lib/new-chat-prepare-client";
 import { usePanelStore } from "@/stores/panel-store";
+import { projectRefForName } from "@/stores/session-list-sync-triggers";
 
 interface PreparedChat { providerId: string; permissionMode?: string }
 interface NewChatPreparation {
@@ -43,9 +47,12 @@ export function NewChatProviderGate({ tabId, metadata, children }: {
     if (!current.providerPending && typeof current.providerId === "string") {
       return { providerId: current.providerId, permissionMode: current.permissionMode as string | undefined };
     }
-    const result = { providerId, permissionMode: (current.permissionMode as string | undefined)
-      ?? settings.providers[providerId]?.permission_mode ?? "bypassPermissions" };
-    const next = { ...current, ...result, providerPending: undefined, focusedProviderOnOpen: undefined };
+    const carried = current.permissionMode as string | undefined;
+    const result = { providerId, permissionMode: carried ?? settings.providers[providerId]?.permission_mode ?? "bypassPermissions" };
+    // A mode taken from settings here is a default the tab's prepare may still refresh;
+    // one the tab already carried keeps whatever source it came with.
+    const next = { ...current, ...result, providerPending: undefined, focusedProviderOnOpen: undefined,
+      ...(carried ? {} : { permissionModeSource: "cache" }) };
     latest.current = next;
     usePanelStore.getState().updateTab(tabId, { metadata: next });
     return result;
@@ -63,17 +70,28 @@ export function NewChatProviderGate({ tabId, metadata, children }: {
     setUnavailable(null);
     const projectName = current.projectName as string | undefined;
     const generation = chatPreparationGeneration();
-    const request = Promise.all([
+    const focusedProvider = current.focusedProviderOnOpen as string | undefined;
+    const legacyFetch = () => Promise.all([
       getChatPreparationSettings(projectName),
       projectName ? getChatProviders(projectName) : Promise.resolve(null),
-    ]).then(([settings, providers]) => {
+    ]).then(([settings, providers]) => ({ settings, providers, providerId: resolveNewChatProvider(settings, focusedProvider) }));
+    // The tab's own mount already started `/chat/prepare` (see chat-tab.tsx) — join it
+    // instead of the settings + providers pair this gate used to fetch itself. A failed
+    // prepare request (not merely an unavailable provider, handled below) falls back to
+    // that original pair rather than leaving the tab stuck.
+    const tabPrepare = getPrepare(tabId);
+    const settled = tabPrepare
+      ? tabPrepare.then((prepared) => ({
+          settings: prepared.settings, providers: prepared.providers, providerId: prepared.resolvedProviderId,
+        })).catch(legacyFetch)
+      : legacyFetch();
+    const request = settled.then(({ settings, providers, providerId }) => {
       if (!active.current) throw new Error("Chat was closed.");
       if (generation !== chatPreparationGeneration()) throw new Error("Chat settings changed. Please retry.");
       const now = currentMetadata();
       if (!now.providerPending && typeof now.providerId === "string") {
         return { providerId: now.providerId, permissionMode: now.permissionMode as string | undefined };
       }
-      const providerId = resolveNewChatProvider(settings, current.focusedProviderOnOpen as string | undefined);
       if (providers && !providers.some((provider) => provider.id === providerId)) {
         setUnavailable({ provider: providerId, settings, alternatives: providers });
         throw new Error(`${providerId} is not available. Choose a provider for this chat.`);
@@ -85,10 +103,30 @@ export function NewChatProviderGate({ tabId, metadata, children }: {
     }).finally(() => { if (inFlight.current === request) inFlight.current = null; });
     inFlight.current = request;
     return request;
-  }, [currentMetadata, selectProvider]);
+  }, [currentMetadata, selectProvider, tabId]);
 
   useEffect(() => { active.current = true; return () => { active.current = false; }; }, []);
   useEffect(() => { if (pending) void prepare().catch(() => {}); }, [pending, prepare]);
+
+  // A tab restored from a reload never passes through `panel-store.openTab`'s warm
+  // resolution, so it can still be `providerPending` even with a warm local cache. This
+  // resolves synchronously before paint, so the first frame is never "Preparing chat…"
+  // for a cache that already has the answer — `prepare()` above still runs, but its
+  // `selectProvider` call becomes a no-op once metadata is already resolved.
+  useLayoutEffect(() => {
+    const current = currentMetadata();
+    if (!current.providerPending) return;
+    const projectName = current.projectName as string | undefined;
+    if (!projectName) return;
+    const settings = readChatPreparationSettings();
+    if (!settings) return;
+    const cachedProviders = readChatProviders(projectCacheId(projectRefForName(projectName)));
+    const resolvedProviderId = resolveNewChatProvider(settings, current.focusedProviderOnOpen as string | undefined);
+    if (!cachedProviders?.some((provider) => provider.id === resolvedProviderId)) return;
+    selectProvider(resolvedProviderId, settings);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const retry = () => { clearChatPreparationCache(); void prepare().catch(() => {}); };
 
   return <PreparationContext.Provider value={{ pending, providerId: metadata.providerId as string | undefined,

package/src/web/components/chat/session-context-menu.tsx

@@ -7,6 +7,8 @@ import {
 } from "@/components/ui/context-menu";
 import { api, projectUrl } from "@/lib/api-client";
 import { useNotificationStore } from "@/stores/notification-store";
+import { commitOptimistic } from "@/stores/session-list-store";
+import { projectRefForName } from "@/stores/session-list-sync-triggers";
 import type { SessionInfo, ProjectTag } from "../../../types/chat";
 
 interface SessionContextMenuProps {
@@ -26,18 +28,19 @@ export function SessionContextMenu({
 }: SessionContextMenuProps) {
   const markUnread = useNotificationStore((s) => s.markUnread);
   const isUnread = useNotificationStore((s) => s.notifications.has(session.id));
+  // Optimistic: the row shows the new tag before the request goes out. A refused change
+  // puts the previous tag back in the lists this menu was opened from, and
+  // `commitOptimistic` re-syncs the shared store from the server.
   const assignTag = useCallback(async (tagId: number | null) => {
-    try {
-      if (tagId) {
-        await api.patch(`${projectUrl(projectName)}/chat/sessions/${session.id}/tag`, { tagId });
-        const tag = projectTags.find((t) => t.id === tagId);
-        if (tag) onTagChanged(session.id, { id: tag.id, name: tag.name, color: tag.color });
-      } else {
-        await api.del(`${projectUrl(projectName)}/chat/sessions/${session.id}/tag`);
-        onTagChanged(session.id, null);
-      }
-    } catch { /* silent */ }
-  }, [session.id, projectName, projectTags, onTagChanged]);
+    const found = tagId ? projectTags.find((t) => t.id === tagId) : undefined;
+    if (tagId && !found) return;
+    const previous = session.tag ?? null;
+    onTagChanged(session.id, found ? { id: found.id, name: found.name, color: found.color } : null);
+    const url = `${projectUrl(projectName)}/chat/sessions/${session.id}/tag`;
+    const ok = await commitOptimistic(projectRefForName(projectName),
+      () => (tagId ? api.patch(url, { tagId }) : api.del(url)));
+    if (!ok) onTagChanged(session.id, previous);
+  }, [session.id, session.tag, projectName, projectTags, onTagChanged]);
 
   return (
     <ContextMenu>

package/src/web/components/chat/session-history-list.tsx

@@ -10,6 +10,8 @@ import { ProviderBadge } from "./provider-selector";
 import { SearchSnippet } from "./search-snippet";
 import { useSessionHistory } from "@/hooks/use-session-history";
 import { useChatSearch } from "@/hooks/use-chat-search";
+import { SessionListSyncIndicator } from "./session-list-sync-indicator";
+import { useProjectRef } from "@/stores/session-list-sync-triggers";
 import type { SessionInfo, ChatSearchResult } from "../../../types/chat";
 
 /** Sidebar search-results list (unified title + content matches with snippets). */
@@ -74,6 +76,7 @@ export function SessionHistoryList({ projectName, variant, sessionId, onSelectSe
   });
   const notifications = useNotificationStore((s) => s.notifications);
 
+  const project = useProjectRef(projectName);
   const isSidebar = variant === "sidebar";
   // Content-aware unified search is a sidebar affordance; the bar keeps its
   // lightweight title-only filter.
@@ -96,7 +99,11 @@ export function SessionHistoryList({ projectName, variant, sessionId, onSelectSe
   return (
     <div className={cn(isSidebar ? "flex flex-col h-full min-h-0" : "border-t border-border/30 bg-surface", className)}>
       {/* Header (sidebar only — the bar variant already sits under its own toolbar) */}
-      {isSidebar && <SidebarHeader icon={BotMessageSquare} title="Chat History" />}
+      {isSidebar && (
+        <SidebarHeader icon={BotMessageSquare} title="Chat History">
+          {project && <SessionListSyncIndicator project={project} />}
+        </SidebarHeader>
+      )}
 
       {/* Search + bulk delete + refresh */}
       <div className="flex items-center gap-1 px-2 py-2 shrink-0">