@hienlh/ppm 0.23.2 → 0.23.3

package/src/web/components/explorer/file-tree.tsx

@@ -358,7 +358,8 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
     savePersistedExpanded(activeProject.name, useFileStore.getState().expandedPaths);
   }, [expandedPaths, activeProject?.name]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Handle WS file:changed → invalidate folder + index
+  // Index invalidation is app-wide so it also works with this drawer closed.
+  // The mounted tree only refreshes the affected folder.
   useEffect(() => {
     if (!activeProject) return;
     const projectName = activeProject.name;
@@ -375,8 +376,6 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
         const parentPath = changedPath.includes("/")
           ? changedPath.slice(0, changedPath.lastIndexOf("/"))
           : "";
-        store.invalidateIndex();
-        store.loadIndex(projectName);
         store.invalidateFolder(projectName, parentPath);
       }, 300);
     };
@@ -399,8 +398,6 @@ export function FileTree({ onFileOpen }: FileTreeProps = {}) {
       const relative = relativeProjectPath(root, absoluteDir);
       if (relative == null) return; // outside this project — not the tree's concern
       const store = useFileStore.getState();
-      store.invalidateIndex();
-      store.loadIndex(projectName);
       store.invalidateFolder(projectName, relative);
     });
   }, [activeProject]);

package/src/web/components/layout/command-palette.tsx

@@ -128,6 +128,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
   const activeProject = useProjectStore((s) => s.activeProject);
   const fileIndex = useFileStore((s) => s.fileIndex);
   const indexStatus = useFileStore((s) => s.indexStatus);
+  const indexProjectName = useFileStore((s) => s.indexProjectName);
   const loadIndex = useFileStore((s) => s.loadIndex);
   const fileTree = useFileStore((s) => s.tree);
   const setSidebarActiveTab = useSettingsStore((s) => s.setSidebarActiveTab);
@@ -336,7 +337,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
     const projectId = activeProject?.name ?? null;
     const meta = activeProject ? { projectName: activeProject.name } : undefined;
     // Filter index to files only — directories are in the index for palette "open folder" affordances but not for file-open commands
-    const files = indexStatus === "ready" ? fileIndex.filter((e) => e.type === "file") : flattenFiles(fileTree);
+    const files = indexStatus === "ready" && indexProjectName === activeProject?.name ? fileIndex.filter((e) => e.type === "file") : flattenFiles(fileTree);
 
     return files.map((f) => ({
       id: `file:${f.path}`,
@@ -349,7 +350,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
       isIgnored: ("isIgnored" in f ? f.isIgnored : undefined) as boolean | undefined,
       action: () => openFileTab(f.path, f.name, projectId, meta),
     }));
-  }, [indexStatus, fileIndex, fileTree, activeProject, openFileTab]);
+  }, [indexStatus, indexProjectName, fileIndex, fileTree, activeProject, openFileTab]);
 
   // Filesystem commands — from cached API results
   const fsCommands = useMemo<CommandItem[]>(() => {
@@ -474,10 +475,10 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
 
   // Auto-load file index when palette opens and index isn't ready
   useEffect(() => {
-    if (open && indexStatus === "idle" && activeProject) {
+    if (open && activeProject && (indexStatus === "idle" || indexProjectName !== activeProject.name)) {
       loadIndex(activeProject.name);
     }
-  }, [open, indexStatus, activeProject, loadIndex]);
+  }, [open, indexStatus, indexProjectName, activeProject, loadIndex]);
 
   // Reset state when opening
   useEffect(() => {

package/src/web/components/layout/mobile-drawer.tsx

@@ -174,7 +174,7 @@ export function MobileDrawer({ isOpen, onClose, initialTab }: MobileDrawerProps)
           {activeTab === "designs" && (activeProject
             ? <Suspense fallback={null}><DesignsSidebarPanel onNavigate={onClose} /></Suspense>
             : noProject)}
-          {activeTab === "explorer" && (activeProject ? <FileTree onFileOpen={onClose} /> : noProject)}
+          {isOpen && activeTab === "explorer" && (activeProject ? <FileTree onFileOpen={onClose} /> : noProject)}
           {isOpen && activeTab === "search" && <SearchPanel onNavigate={onClose} />}
           {isOpen && activeTab === "git" && <GitStatusPanel metadata={{ projectName: activeProject?.name }} onNavigate={onClose} />}
           {activeTab === "database" && <DatabaseSidebar />}

package/src/web/components/settings/accounts/account-card.tsx

@@ -27,6 +27,8 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { AccountCardShell } from "./accounts-pane-header";
 import { formatExpiry, formatLastUpdated, tokenStatus } from "./account-usage-format";
 import type { DailyGuardState } from "../../../../shared/codex-daily-guard.ts";
+import type { ResetCredits } from "../../../../types/chat";
+import { ResetCreditsChip, ScopedBucketRows } from "./account-usage-extras";
 
 export interface AccountCardProps {
   entry: AccountUsageEntry;
@@ -69,6 +71,8 @@ export interface AccountCardProps {
   reauthHint?: string;
   /** Start signing this account in again. Makes the "Sign in again"/"Expired" chip a button. */
   onReauth?: (id: string) => void;
+  /** Codex's free rate-limit resets for this account, shown in the footer. */
+  resetCredits?: ResetCredits;
 }
 
 // Fixed widths so a row scrolls instead of squeezing. Two of them: a read-only card holds a
@@ -79,10 +83,10 @@ const STRIP_WIDTH = { readOnly: "min-w-[220px]", withActions: "min-w-[300px]" }
 export function AccountCard({
   entry, isActive, accountInfo, onToggle, toggling, onDelete, onExport, onViewProfile, flash,
   onSelect, unselectableReason, selecting, planLabel, dailyGuard, onDailyGuardToggle, dailyGuardToggling,
-  reauthHint, onReauth, layout = "list",
+  reauthHint, onReauth, resetCredits, layout = "list",
 }: AccountCardProps) {
   const { usage } = entry;
-  const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet;
+  const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet || usage.weeklyScoped?.length;
   const status = accountInfo?.status ?? entry.accountStatus;
   const isExpired = !!(
     accountInfo && !accountInfo.hasRefreshToken && accountInfo.expiresAt
@@ -268,6 +272,7 @@ export function AccountCard({
           <AccountBucketRow label="Weekly" bucket={usage.weekly} />
           <AccountBucketRow label="Weekly (Opus)" bucket={usage.weeklyOpus} />
           <AccountBucketRow label="Weekly (Sonnet)" bucket={usage.weeklySonnet} />
+          <ScopedBucketRows buckets={usage.weeklyScoped} />
         </div>
       ) : (
         <p className="text-xs text-text-subtle">
@@ -312,6 +317,7 @@ export function AccountCard({
       )}
 
       <div className="flex items-center gap-2 text-[10px] text-text-subtle flex-wrap">
+        <ResetCreditsChip credits={resetCredits} />
         {usage.lastFetchedAt && (
           <AccountHint
             className="inline-flex items-center gap-1"

package/src/web/components/settings/accounts/account-usage-extras.tsx

@@ -0,0 +1,43 @@
+/**
+ * The two usage details that are not one of the fixed buckets, shared by every account card
+ * so Settings and the chat panels cannot drift apart:
+ *
+ * - `ScopedBucketRows` — a model's own weekly limit (Claude's "Fable"), one bar per model,
+ *   labelled with the name the provider gives it.
+ * - `ResetCreditsChip` — how many free rate-limit resets Codex has granted the account and
+ *   when the next one lapses. PPM only reports these; they are spent from Codex itself.
+ */
+
+import { RotateCcw } from "@/lib/icons";
+import type { ResetCredits, ScopedLimitBucket } from "../../../../types/chat";
+import { AccountBucketRow } from "./account-bucket-row";
+import { AccountHint } from "./account-hint";
+
+export function ScopedBucketRows({ buckets }: { buckets?: ScopedLimitBucket[] }) {
+  if (!buckets?.length) return null;
+  return <>{buckets.map((b) => <AccountBucketRow key={b.label} label={`Weekly (${b.label})`} bucket={b} />)}</>;
+}
+
+/** "3 Nov" — the expiry is weeks out, so the time of day is noise. */
+function shortDate(iso: string): string {
+  return new Date(iso).toLocaleDateString(undefined, { day: "numeric", month: "short" });
+}
+
+export function ResetCreditsChip({ credits }: { credits?: ResetCredits }) {
+  if (!credits) return null;
+  const n = credits.available;
+  const label = n === 0 ? "No free resets" : `${n} free reset${n === 1 ? "" : "s"}`;
+  const hint = n === 0
+    ? "Codex has no free rate-limit resets left for this account."
+    : `Codex has granted this account ${n} free rate-limit reset${n === 1 ? "" : "s"}`
+      + `${credits.title ? ` (${credits.title})` : ""}.`
+      + `${credits.nextExpiresAt ? ` The next one expires on ${new Date(credits.nextExpiresAt).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })}.` : ""}`
+      + " Use one from the Codex app when a limit is reached — PPM only shows the count.";
+  return (
+    <AccountHint className={`inline-flex items-center gap-1 ${n > 0 ? "text-primary" : ""}`} hint={hint}>
+      <RotateCcw className="size-3 shrink-0" aria-hidden />
+      {label}
+      {n > 0 && credits.nextExpiresAt && <span className="text-text-subtle">· until {shortDate(credits.nextExpiresAt)}</span>}
+    </AccountHint>
+  );
+}

package/src/web/components/settings/accounts/codex-accounts-section.tsx

@@ -27,6 +27,7 @@ import { CodexRotationDialog } from "./codex-rotation-dialog";
 import { CodexUsageRows } from "./codex-usage-rows";
 import { CODEX_SIGNED_OUT_HINT, useCodexAccounts, type CodexAccount } from "./use-codex-accounts";
 import { CodexSignInAgainDialog } from "./codex-sign-in-again-dialog";
+import { ResetCreditsChip } from "./account-usage-extras";
 import { AccountHint } from "./account-hint";
 import { codexPlanLabel } from "../../../../shared/codex-plan-label.ts";
 import { dailyGuardState } from "../../../../shared/codex-daily-guard.ts";
@@ -135,6 +136,11 @@ export function CodexAccountsSection() {
                     </Tooltip>
                   </div>
                   <CodexUsageRows usage={u} />
+                  {u.resetCredits && (
+                    <div className="text-[10px] text-text-subtle">
+                      <ResetCreditsChip credits={u.resetCredits} />
+                    </div>
+                  )}
                   {u.session == null && (() => {
                     const guard = dailyGuardState(u.weekly);
                     return guard ? (

package/src/web/components/settings/accounts/use-accounts-data.ts

@@ -31,7 +31,10 @@ export interface AccountsData {
 /** Utilisation across all four buckets, as a comparable string. */
 function utilisationKey(entry: AccountUsageEntry): string {
   const u = entry.usage;
-  return [u.session?.utilization, u.weekly?.utilization, u.weeklyOpus?.utilization, u.weeklySonnet?.utilization].join("|");
+  return [
+    u.session?.utilization, u.weekly?.utilization, u.weeklyOpus?.utilization, u.weeklySonnet?.utilization,
+    ...(u.weeklyScoped ?? []).map((b) => `${b.label}:${b.utilization}`),
+  ].join("|");
 }
 
 export function useAccountsData(enabled = true): AccountsData {

package/src/web/components/settings/accounts/use-codex-accounts.ts

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { api, getAuthToken } from "@/lib/api-client";
-import type { LimitBucket } from "../../../../types/chat";
+import type { LimitBucket, ResetCredits } from "../../../../types/chat";
 import type { CodexStrategy } from "./codex-rotation-dialog";
 
 export type Strategy = CodexStrategy;
@@ -25,6 +25,8 @@ export interface Usage {
   sevenDay?: number;
   session?: LimitBucket;
   weekly?: LimitBucket;
+  /** Free rate-limit resets Codex has granted the account. */
+  resetCredits?: ResetCredits;
 }
 interface DevicePending { id: string; userCode: string; verificationUrl: string }
 interface BrowserPending { id: string; authUrl: string }

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

@@ -226,6 +226,7 @@ export function useChat(
   const replayTurnUserMsgRef = useRef<string | null>(null);
   /** When the last full-transcript fetch completed — guards redundant idle refetches */
   const historyLoadedAtRef = useRef(0);
+  const initialHistoryPendingRef = useRef(false);
   const sessionIdRef = useRef(sessionId);
   sessionIdRef.current = sessionId;
   // Held in a ref so the socket handler always calls the latest callback without
@@ -560,6 +561,18 @@ export function useChat(
           if (routeToFinalizedParent(ev as ChatEvent, pid)) { /* nested */ }
           break;
         }
+        // Background Codex agents can finish after the root answer. Update the
+        // finalized card without flushing empty streaming refs over history.
+        if (phaseRef.current === "idle" && trId?.startsWith("subagent-")) {
+          setMessages(prev => prev.map(message => {
+            if (!message.events?.some(e => e.type === "tool_use" && e.toolUseId === trId)) return message;
+            return { ...message, events: message.events.map(e =>
+              e.type === "tool_use" && e.toolUseId === trId
+                ? { ...e, result: { output: ev.output, isError: ev.isError, exitCode: ev.exitCode } }
+                : e) };
+          }));
+          break;
+        }
         upsertStreamingEvent((e) => !!trId && e.type === "tool_result" && (e as any).toolUseId === trId);
         syncMessages();
         break;
@@ -629,6 +642,11 @@ export function useChat(
       }
 
       case "error": {
+        if (ev.parentToolUseId) {
+          if (routeToParent(ev as ChatEvent, ev.parentToolUseId)) syncMessages();
+          else routeToFinalizedParent(ev as ChatEvent, ev.parentToolUseId);
+          break;
+        }
         if (!isReplayingRef.current) attemptRef.current?.fail();
         setMessages((prev) => {
           const last = prev[prev.length - 1];
@@ -724,6 +742,8 @@ export function useChat(
       }
 
       case "done": {
+        // A nested completion must never finalize or reset the root stream.
+        if (ev.parentToolUseId) break;
         if (!isReplayingRef.current) attemptRef.current?.finish(!!streamingContentRef.current.trim());
         // Idempotent: may receive duplicate done (provider + stream loop finally)
         if (phaseRef.current === "idle") break;
@@ -976,7 +996,7 @@ export function useChat(
         resyncInFlightRef.current = false;
         replayTruncatedRef.current = false;
         const historyFresh = Date.now() - historyLoadedAtRef.current < 5000;
-        if (replayWasTruncated || !(wasIdle && historyFresh)) refetchRef.current?.();
+        if (replayWasTruncated || !(wasIdle && (historyFresh || initialHistoryPendingRef.current))) refetchRef.current?.();
         setIsReconnecting(false);
       }
       // If streaming, turn_events message will follow
@@ -1173,6 +1193,7 @@ export function useChat(
     const staleIds = new Set(messagesRef.current.map((m) => m.id));
 
     if (sessionId && projectName) {
+      initialHistoryPendingRef.current = true;
       setMessagesLoading(true);
       // Via api.get, not raw fetch: the loading screen is gated on this settling,
       // and a stalled request would otherwise hold the transcript hostage until
@@ -1220,7 +1241,10 @@ export function useChat(
           }
         })
         .finally(() => {
-          if (!cancelled) setMessagesLoading(false);
+          if (!cancelled) {
+            initialHistoryPendingRef.current = false;
+            setMessagesLoading(false);
+          }
         });
     } else {
       setMessages([]);
@@ -1228,6 +1252,7 @@ export function useChat(
 
     return () => {
       cancelled = true;
+      initialHistoryPendingRef.current = false;
       historyRequestRef.current?.abort();
       historyRequestRef.current = null;
       if (syncRafRef.current) clearTimeout(syncRafRef.current);

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

@@ -24,8 +24,25 @@ interface DraftResult {
   updatedAt: string;
 }
 
-export function useDraft(projectName: string, sessionId: string | null) {
-  const [draft, setDraft] = useState<DraftState | null>(null);
+export function useDraft(projectName: string, sessionId: string | null, tabId?: string) {
+  // The server save is debounced and can fail while offline. Keep the visible
+  // composer's draft in this browser tab too, including across a recovery reload.
+  const keyForSession = useCallback((id: string | null) =>
+    `ppm-chat-draft:${JSON.stringify([projectName, tabId ?? null, id ?? "__new__"])}`, [projectName, tabId]);
+  const localKey = keyForSession(sessionId);
+  const [recoveredDraft] = useState<DraftState | null>(() => {
+    try {
+      const value = JSON.parse(sessionStorage.getItem(localKey) ?? "null");
+      if (typeof value?.content !== "string" || !Array.isArray(value.attachments)) return null;
+      return { content: value.content, attachments: value.attachments.filter(
+        (a: DraftAttachment) => typeof a?.name === "string" && typeof a?.path === "string",
+      ) };
+    } catch { return null; }
+  });
+  const recoveryRef = useRef({ projectName, sessionId, draft: recoveredDraft });
+  const localKeyRef = useRef(localKey);
+  localKeyRef.current = localKey;
+  const [draft, setDraft] = useState<DraftState | null>(recoveredDraft);
   const [loading, setLoading] = useState(true);
   const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const sessionRef = useRef(sessionId);
@@ -40,6 +57,12 @@ export function useDraft(projectName: string, sessionId: string | null) {
       return;
     }
     let cancelled = false;
+    // StrictMode repeats mount effects. Keep the recovered value for both
+    // runs, but never reuse it after navigating to another conversation.
+    if (recoveryRef.current.projectName !== projectName || recoveryRef.current.sessionId !== sessionId) {
+      recoveryRef.current.draft = null;
+    }
+    const keepRecoveredDraft = recoveryRef.current.draft !== null;
     setLoading(true);
     // Releasing the gate only reveals the composer; a draft arriving afterwards
     // is still applied, and MessageInput refuses to overwrite typed text.
@@ -51,7 +74,7 @@ export function useDraft(projectName: string, sessionId: string | null) {
         `${projectUrl(projectName)}/chat/drafts/${encodeURIComponent(effectiveId)}`,
       )
       .then((data) => {
-        if (cancelled) return;
+        if (cancelled || keepRecoveredDraft) return;
         if (data) {
           let attachments: DraftAttachment[] = [];
           try { attachments = JSON.parse(data.attachments); } catch { /* ignore */ }
@@ -60,7 +83,7 @@ export function useDraft(projectName: string, sessionId: string | null) {
           setDraft(null);
         }
       })
-      .catch(() => { if (!cancelled) setDraft(null); })
+      .catch(() => { if (!cancelled && !keepRecoveredDraft) setDraft(null); })
       .finally(() => {
         clearTimeout(releaseTimer);
         if (!cancelled) setLoading(false);
@@ -72,6 +95,9 @@ export function useDraft(projectName: string, sessionId: string | null) {
   const save = useCallback(
     (content: string, attachments?: DraftAttachment[]) => {
       if (!projectName) return;
+      try {
+        sessionStorage.setItem(localKeyRef.current, JSON.stringify({ content, attachments: attachments ?? [] }));
+      } catch { /* Storage may be unavailable; the server draft still applies. */ }
       if (timerRef.current) clearTimeout(timerRef.current);
       timerRef.current = setTimeout(() => {
         const id = sessionRef.current ?? "__new__";
@@ -99,6 +125,21 @@ export function useDraft(projectName: string, sessionId: string | null) {
     timerRef.current = undefined;
   }, []);
 
+  // Only explicit create/fork transitions move the unsent draft. Picking an
+  // unrelated history session must leave its draft under the original owner.
+  const moveDraft = useCallback((nextSessionId: string) => {
+    const oldKey = localKeyRef.current;
+    const nextKey = keyForSession(nextSessionId);
+    if (oldKey === nextKey) return;
+    try {
+      const value = sessionStorage.getItem(oldKey);
+      if (value !== null) {
+        sessionStorage.setItem(nextKey, value);
+        sessionStorage.removeItem(oldKey);
+      }
+    } catch { /* Preserve the old copy if the new write fails. */ }
+  }, [keyForSession]);
+
   /**
    * Clear the draft once its message has actually been handed to the socket.
    *
@@ -110,13 +151,18 @@ export function useDraft(projectName: string, sessionId: string | null) {
    */
   const clear = useCallback((draftId?: string) => {
     if (!projectName) return;
+    recoveryRef.current.draft = null;
+    try {
+      sessionStorage.removeItem(localKeyRef.current);
+      if (draftId) sessionStorage.removeItem(keyForSession(draftId === "__new__" ? null : draftId));
+    } catch { /* Storage unavailable. */ }
     if (timerRef.current) clearTimeout(timerRef.current);
     const id = draftId ?? sessionRef.current ?? "__new__";
     api
       .del(`${projectUrl(projectName)}/chat/drafts/${encodeURIComponent(id)}`)
       .catch(() => {});
     setDraft(null);
-  }, [projectName]);
+  }, [projectName, keyForSession]);
 
   // Cleanup timer on unmount
   useEffect(() => {
@@ -125,5 +171,5 @@ export function useDraft(projectName: string, sessionId: string | null) {
     };
   }, []);
 
-  return { draft, draftLoading: loading, saveDraft: save, clearDraft: clear, cancelPendingSave };
+  return { draft, draftLoading: loading, saveDraft: save, clearDraft: clear, cancelPendingSave, moveDraft };
 }

package/src/web/hooks/use-file-index-invalidation.ts

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+import { useProjectStore } from "@/stores/project-store";
+import { useFileStore, relativeProjectPath } from "@/stores/file-store";
+import { onFsChanged } from "@/components/os-explorer/explorer-store";
+
+/** Keep on-demand indexes fresh even while the mobile file drawer is closed. */
+export function useFileIndexInvalidation(): void {
+  useEffect(() => {
+    const changed = (event: Event) => {
+      const projectName = (event as CustomEvent).detail?.projectName;
+      const store = useFileStore.getState();
+      if (projectName && projectName === store.indexProjectName) store.invalidateIndex();
+    };
+    window.addEventListener("file:changed", changed);
+    const unsubscribeFs = onFsChanged((directory) => {
+      const store = useFileStore.getState();
+      const project = useProjectStore.getState().projects.find((p) => p.name === store.indexProjectName);
+      if (project && relativeProjectPath(project.path, directory) !== null) store.invalidateIndex();
+    });
+    const unsubscribeProject = useProjectStore.subscribe((state, previous) => {
+      if (state.activeProject?.name !== previous.activeProject?.name) useFileStore.getState().reset();
+    });
+    return () => {
+      window.removeEventListener("file:changed", changed);
+      unsubscribeFs();
+      unsubscribeProject();
+    };
+  }, []);
+}

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

@@ -121,6 +121,8 @@ export interface AccountUsageEntry {
     weekly?: import("../../types/chat").LimitBucket;
     weeklyOpus?: import("../../types/chat").LimitBucket;
     weeklySonnet?: import("../../types/chat").LimitBucket;
+    /** Per-model weekly limits ("Fable", …). */
+    weeklyScoped?: import("../../types/chat").ScopedLimitBucket[];
   };
 }
 

package/src/web/stores/file-store.ts

@@ -84,6 +84,7 @@ interface FileStore {
    */
   inflight: Map<string, InflightLoad>;
   indexStatus: "idle" | "loading" | "ready" | "error";
+  indexProjectName: string | null;
   selectedFiles: string[];
   inlineAction: InlineAction | null;
   clipboard: ClipboardState | null;
@@ -142,6 +143,7 @@ interface InflightLoad {
   prefetch: boolean;
 }
 
+let indexRequest = 0;
 export const useFileStore = create<FileStore>((set, get) => ({
   tree: [],
   fileIndex: [],
@@ -151,6 +153,7 @@ export const useFileStore = create<FileStore>((set, get) => ({
   loadedPaths: new Set<string>(),
   inflight: new Map<string, InflightLoad>(),
   indexStatus: "idle",
+  indexProjectName: null,
   selectedFiles: [],
   inlineAction: null,
   clipboard: null,
@@ -292,19 +295,21 @@ export const useFileStore = create<FileStore>((set, get) => ({
   },
 
   loadIndex: async (projectName: string) => {
-    set({ indexStatus: "loading" });
+    const request = ++indexRequest;
+    set({ indexStatus: "loading", indexProjectName: projectName, fileIndex: [] });
     try {
       const data = await api.get<FileEntry[]>(
         `${projectUrl(projectName)}/files/index`,
       );
-      set({ fileIndex: data, indexStatus: "ready" });
+      if (request === indexRequest) set({ fileIndex: data, indexStatus: "ready" });
     } catch {
-      set({ indexStatus: "error" });
+      if (request === indexRequest) set({ indexStatus: "error" });
     }
   },
 
   invalidateIndex: () => {
-    set({ indexStatus: "idle", fileIndex: [] });
+    ++indexRequest;
+    set({ indexStatus: "idle", fileIndex: [], indexProjectName: null });
   },
 
   invalidateFolder: async (projectName: string, folderPath: string) => {
@@ -370,6 +375,7 @@ export const useFileStore = create<FileStore>((set, get) => ({
   clearSelection: () => set({ selectedFiles: [] }),
 
   reset: () => {
+    ++indexRequest;
     cancelPrefetch();
     // Abort all in-flight requests
     for (const load of get().inflight.values()) load.controller.abort();
@@ -382,6 +388,7 @@ export const useFileStore = create<FileStore>((set, get) => ({
       loadedPaths: new Set(),
       inflight: new Map(),
       indexStatus: "idle",
+      indexProjectName: null,
       selectedFiles: [],
       inlineAction: null,
       clipboard: null,

package/src/web/theme/adapters/monaco-adapter.ts

@@ -56,9 +56,8 @@ loader.config({ paths: { vs: "/assets/monaco/vs" } });
 
 let monacoRef: typeof import("monaco-editor") | null = null;
 
-async function ensureDefined(theme: PpmTheme): Promise<string> {
+function ensureDefined(monaco: typeof import("monaco-editor"), theme: PpmTheme): string {
   const name = monacoThemeName(theme);
-  const monaco = monacoRef ?? (monacoRef = await loader.init());
   monaco.editor.defineTheme(name, {
     base: theme.mode === "dark" ? "vs-dark" : "vs",
     inherit: true,
@@ -78,18 +77,25 @@ function currentTheme(): PpmTheme {
 
 let subscribed = false;
 
+function applyCurrentTheme(): void {
+  // Theme changes on chat-only sessions must not download the editor runtime.
+  if (!monacoRef) return;
+  monacoRef.editor.setTheme(ensureDefined(monacoRef, currentTheme()));
+}
+
+/** Register the current theme before an Editor or DiffEditor creates its model. */
+export function prepareMonacoTheme(monaco: typeof import("monaco-editor")): void {
+  monacoRef = monaco;
+  initMonacoThemeSync();
+  applyCurrentTheme();
+}
+
 /**
- * Define + activate the Monaco theme for the current app theme, and keep it in
- * sync on theme changes. `monaco.editor.setTheme` applies globally to every
- * mounted editor. Idempotent.
+ * Subscribe without loading Monaco. Once an editor calls prepareMonacoTheme,
+ * theme changes apply globally to all mounted editors. Idempotent.
  */
 export function initMonacoThemeSync(): void {
   if (subscribed || typeof window === "undefined") return;
   subscribed = true;
-  const apply = async () => {
-    const name = await ensureDefined(currentTheme());
-    (monacoRef ?? (monacoRef = await loader.init())).editor.setTheme(name);
-  };
-  window.addEventListener(THEME_CHANGE_EVENT, () => void apply());
-  void apply();
+  window.addEventListener(THEME_CHANGE_EVENT, applyCurrentTheme);
 }

package/src/web/theme/adapters/shiki-adapter.ts

@@ -36,6 +36,7 @@ let highlighterPromise: Promise<Highlighter> | null = null;
 // createHighlighter settles (kicked off early via warmShiki).
 let readyHighlighter: Highlighter | null = null;
 let activeThemeName = "github-dark-dimmed";
+let pendingTheme: string | Record<string, unknown> = activeThemeName;
 const loadedLangs = new Set(PRELOAD_LANGS);
 const loadedThemes = new Set(BUILTIN_SHIKI_THEMES);
 
@@ -56,10 +57,22 @@ function cacheSet(key: string, html: string): void {
 
 function getHighlighter(): Promise<Highlighter> {
   if (!highlighterPromise) {
+    const requestedTheme = pendingTheme;
     highlighterPromise = createHighlighter({
       themes: BUILTIN_SHIKI_THEMES,
       langs: PRELOAD_LANGS,
-    }).then((hl) => {
+    }).then(async (hl) => {
+      const name = typeof requestedTheme === "string" ? requestedTheme : requestedTheme.name;
+      if (typeof name === "string" && !loadedThemes.has(name)) {
+        try {
+          await hl.loadTheme(requestedTheme as never);
+          loadedThemes.add(name);
+        } catch {
+          // A broken imported theme must not leave a rejected singleton and
+          // disable code highlighting for the rest of the browser session.
+          if (activeThemeName === name) activeThemeName = "github-dark-dimmed";
+        }
+      }
       readyHighlighter = hl;
       return hl;
     });
@@ -131,6 +144,12 @@ export function getActiveShikiTheme(): string {
  * JSON (imported themes, Phase 3). Returns the resolved theme name.
  */
 async function setActiveShikiTheme(shikiTheme: string | Record<string, unknown>): Promise<void> {
+  pendingTheme = shikiTheme;
+  if (!highlighterPromise) {
+    const name = typeof shikiTheme === "string" ? shikiTheme : shikiTheme.name;
+    if (typeof name === "string") activeThemeName = name;
+    return;
+  }
   const hl = await getHighlighter();
   if (typeof shikiTheme === "string") {
     if (!loadedThemes.has(shikiTheme)) {

package/vite.config.ts

@@ -67,7 +67,9 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks(id: string) {
-          if (id.includes("node_modules/mermaid")) return "vendor-mermaid";
+          // Let the dynamic Mermaid import own its dependencies. A manual
+          // vendor group absorbs shared helpers and makes Markdown import the
+          // entire diagram engine even when the transcript contains no diagram.
           if (id.includes("node_modules/@xterm")) return "vendor-xterm";
           if (
             id.includes("node_modules/react-markdown") ||