@hienlh/ppm 0.23.1 → 0.23.3

package/src/web/app.tsx

@@ -15,7 +15,7 @@ import { useTabStore } from "@/stores/tab-store";
 import { hydrateWorkspaceFromServer } from "@/stores/panel-utils";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useTheme } from "@/theme/use-theme";
-import { initShikiThemeSync, warmShiki } from "@/theme/adapters/shiki-adapter";
+import { initShikiThemeSync } from "@/theme/adapters/shiki-adapter";
 import { initMonacoThemeSync } from "@/theme/adapters/monaco-adapter";
 import { getAuthToken } from "@/lib/api-client";
 import { useUrlSync, parseUrlState, autoOpenFromUrl } from "@/hooks/use-url-sync";
@@ -24,6 +24,7 @@ import { useNotificationBadge } from "@/hooks/use-notification-badge";
 import { useWakeLock } from "@/hooks/use-wake-lock";
 import { WakeLockMobileBadge } from "@/components/layout/wake-lock-indicator";
 import { useTabPrefetch } from "@/hooks/use-tab-prefetch";
+import { useFileIndexInvalidation } from "@/hooks/use-file-index-invalidation";
 import { useGlobalEvents } from "@/hooks/use-global-events";
 import { useServerReload } from "@/hooks/use-server-reload";
 import { CommandPalette } from "@/components/layout/command-palette";
@@ -59,6 +60,7 @@ const RemoteDesktopMobileSheet = lazy(() =>
 type AuthState = "checking" | "authenticated" | "unauthenticated";
 
 export function App() {
+  useFileIndexInvalidation();
   const [authState, setAuthState] = useState<AuthState>("checking");
   const isMobileViewport = useIsMobile();
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -70,10 +72,9 @@ export function App() {
   );
   // Resolves the active theme from the store and applies CSS vars to <html>.
   useTheme();
-  // Sync Shiki syntax highlighting to the active theme + warm the highlighter.
+  // Subscribe to themes without downloading either editor engine at startup.
   useEffect(() => {
     initShikiThemeSync();
-    warmShiki();
     initMonacoThemeSync();
   }, []);
   const deviceName = useSettingsStore((s) => s.deviceName);
@@ -307,7 +308,7 @@ export function App() {
         {/* Main layout */}
         <div className="flex flex-1 overflow-hidden">
           {/* Desktop unified nav rail (wordmark + project switcher + section rail + panel) */}
-          <Sidebar />
+          {!isMobileViewport && <Sidebar />}
 
           {/* Content area — keep-alive per project. `relative` is the positioning context
               the floating window layer measures and clamps its windows against. */}

package/src/web/components/ai-resources/ai-resource-editor.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState, useCallback, useRef } from "react";
 import Editor from "@monaco-editor/react";
 import { Save, Undo2, Loader2, AlertTriangle, Lock } from "@/lib/icons";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
 import { useAiResourcesStore } from "@/stores/ai-resources-store";
 import { readAiResource, writeAiResource, type AiResourceType, type AiResourceScope } from "@/lib/api-ai-resources";
 import { ScopeBadge, TYPE_ICON } from "./resource-visuals";
@@ -132,6 +133,7 @@ export function AiResourceEditor({ metadata }: AiResourceEditorProps) {
           <div className="p-6 text-center text-sm text-destructive">{error}</div>
         ) : (
           <Editor
+            beforeMount={prepareMonacoTheme}
             height="100%"
             language="markdown"
             theme={monacoTheme}

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

@@ -145,7 +145,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       metadata?.pickedAccountProvider === providerId ? metadata?.pickedAccountId as string | undefined : undefined);
 
   // Draft auto-save/restore
-  const { draft, draftLoading, saveDraft, clearDraft, cancelPendingSave } = useDraft(projectName, sessionId);
+  const { draft, draftLoading, saveDraft, clearDraft, cancelPendingSave, moveDraft } = useDraft(projectName, sessionId, tabId);
 
   // Load global default permission mode on mount (if no per-session override)
   useEffect(() => {
@@ -402,6 +402,9 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
   // echo — appending it to the still-visible source transcript would render the
   // edit in the wrong place; the real message appears once the fork loads.)
   const [editForking, setEditForking] = useState(false);
+  // Covers session creation AND the wait for its socket greeting. Streaming
+  // starts only after the queued first message reaches that socket.
+  const [firstSendPending, setFirstSendPending] = useState(false);
 
   /**
    * A message that could not be sent, on its way back into the composer. A nonce
@@ -427,6 +430,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
    * nothing at all.
    */
   const restoreUnsentMessage = useCallback((content: string, reason: string) => {
+    setFirstSendPending(false);
     setRestore({ text: content, nonce: Date.now() });
     toast.error("Message not sent", { description: `${reason} Your text is back in the input.` });
   }, []);
@@ -469,6 +473,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       pendingSendRef.current = null;
       if (pendingSendTimerRef.current) { clearTimeout(pendingSendTimerRef.current); pendingSendTimerRef.current = null; }
       sendMessage(content, { permissionMode: pm, ...(pendingImages?.length && { images: pendingImages }), ...(pendingPaths?.length && { imagePaths: pendingPaths }) });
+      setFirstSendPending(false);
       clearDraft(draftId);
     }
   }, [isConnected, sendMessage, clearDraft]);
@@ -620,6 +625,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         // reconnects to the forked session. The draft was composed under the
         // source session, so that is the one to clear when it goes.
         queuePendingSend({ content: fullContent, draftId: sessionId, permissionMode });
+        moveDraft(forked.id);
         // Swap the current tab to the forked session (no new tab).
         setStaleSwap(true);
         if (tabId) patchTabMetadata(tabId, { sessionId: forked.id });
@@ -638,7 +644,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         setRestore({ text: fullContent, nonce: Date.now() });
       }
     },
-    [sessionId, projectName, providerId, permissionMode, tabId, queuePendingSend],
+    [sessionId, projectName, providerId, permissionMode, tabId, queuePendingSend, moveDraft],
   );
 
   /** Swap THIS tab to another version's session (version switcher prev/next) */
@@ -711,6 +717,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       if (!fullContent.trim() && images.length === 0) return;
 
       if (!sessionId) {
+        setFirstSendPending(true);
         try {
           const pName = projectName;
           // Bounded: the composer is already empty by now, and a create call that hangs
@@ -730,6 +737,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
             // instructions and the design permission default.
             ...(designSlug && { designSlug }),
           }, { signal: AbortSignal.timeout(SESSION_CREATE_TIMEOUT_MS) });
+          moveDraft(session.id);
           setSessionId(session.id);
           setProviderId(session.providerId);
           // Queue message — will be sent by effect when WS reports isConnected. It was
@@ -749,7 +757,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, pickedAccountId, queuePendingSend, restoreUnsentMessage, clearDraft, designSlug],
+    [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode, metadata, pickedAccountId, queuePendingSend, restoreUnsentMessage, clearDraft, designSlug, moveDraft],
   );
 
   // Read through a ref so handleInputSend keeps a stable identity — it is passed to
@@ -774,7 +782,9 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         const item = slashItemsRef.current.find(
           (i) => i.handler === "client" && (i.name === slash[1] || i.aliases?.includes(slash[1]!)),
         );
-        if (item?.name === "clear") {
+        // This local action must also work before the lazily loaded picker
+        // catalog arrives (for example, paste /clear and immediately submit).
+        if (slash[1] === "clear" || item?.name === "clear") {
           clearDraft();
           handleNewSession(slash[2]?.trim(), sessionId ?? undefined);
           return;
@@ -782,6 +792,9 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       }
 
       setForkDraft(undefined);
+      // Save synchronously in this browser tab before the composer clears. A
+      // recovery reload can happen before either the POST or draft debounce ends.
+      saveDraft(content, attachments.filter((a) => a.serverPath).map((a) => ({ name: a.name, path: a.serverPath! })));
       cancelPendingSave();
       if (editFork && sessionId && projectName) {
         const anchor = editFork.anchorMsgId;
@@ -791,7 +804,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       }
       void handleSend(content, attachments, priority);
     },
-    [handleSend, clearDraft, cancelPendingSave, editFork, sessionId, projectName, handleEditSend, buildMessageWithAttachments, handleNewSession],
+    [handleSend, clearDraft, saveDraft, cancelPendingSave, editFork, sessionId, projectName, handleEditSend, buildMessageWithAttachments, handleNewSession],
   );
 
   // Past user messages for the composer's ArrowUp/Down recall. Read through a ref
@@ -963,7 +976,12 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       <BackgroundCommandBar shells={backgroundShells} onKill={killBackgroundShell} />
 
       {/* Messages */}
-      <MessageList
+      {firstSendPending ? (
+        <div role="status" className="flex flex-1 items-center justify-center gap-2 text-sm text-text-secondary">
+          <Loader2 className="size-4 animate-spin" />
+          <span>Starting conversation...</span>
+        </div>
+      ) : <MessageList
         messages={renderedMessages}
         onExpandCompact={expandCompact}
         isCompactExpanded={isCompactExpanded}
@@ -988,7 +1006,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
         onDismissMessage={dismissMessage}
         onClearErrors={clearErrors}
         bashPartialOutput={bashPartialOutput}
-      />
+      />}
 
       {/* Teammates still working — pinned here so it is the last thing under the conversation */}
       <TeamWorkingBar teamName={primaryTeam} members={teamMembers} projectName={projectName} />
@@ -1073,6 +1091,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
             draftReady={!draftLoading}
             tabId={tabId}
             onSend={handleInputSend}
+            disabled={firstSendPending}
             isStreaming={isStreaming}
             onCancel={cancelStreaming}
             autoFocus={!(metadata?.sessionId) || !!forkDraft}

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

@@ -25,8 +25,9 @@ import { codexPlanLabel } from "../../../shared/codex-plan-label.ts";
 import { dailyGuardState } from "../../../shared/codex-daily-guard.ts";
 import { UsagePanelShell } from "./usage-panel-shell";
 
-interface CodexAccount { id: string; label: string; type: string; planType?: string | null; status?: "active" | "disabled"; dailyGuardEnabled?: boolean }
-type Usage = Pick<UsageInfo, "fiveHour" | "sevenDay" | "session" | "weekly">;
+import { CODEX_SIGNED_OUT_HINT, type CodexAccount } from "@/components/settings/accounts/use-codex-accounts";
+import { CodexSignInAgainDialog } from "@/components/settings/accounts/codex-sign-in-again-dialog";
+type Usage = Pick<UsageInfo, "fiveHour" | "sevenDay" | "session" | "weekly" | "resetCredits">;
 
 /** Matches the whole-percent figure the bars show, so a refusal agrees with the card. */
 function atCap(util: number | null | undefined): boolean {
@@ -66,6 +67,8 @@ 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);
+  /** The signed-out account whose "Sign in again" chip was pressed. */
+  const [signInAgain, setSignInAgain] = useState<CodexAccount | null>(null);
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -98,6 +101,7 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
    */
   const unselectableReason = useCallback((account: CodexAccount, u: Usage): string | null => {
     if (account.status === "disabled") return "Disabled";
+    if (account.signedOut) return "Signed out — sign in again first";
     if (atCap(u.fiveHour)) return `5-hour limit reached${u.session?.resetsAt ? ` — resets ${formatResetTime(u.session)}` : ""}`;
     if (atCap(u.sevenDay)) return `Weekly limit reached${u.weekly?.resetsAt ? ` — resets ${formatResetTime(u.weekly)}` : ""}`;
     return null;
@@ -175,6 +179,7 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
   );
 
   return (
+    <>
     <UsagePanelShell
       title="Codex Usage"
       onClose={onClose}
@@ -205,9 +210,17 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
             dailyGuard={guard ? { enabled: !!a.dailyGuardEnabled, state: guard } : undefined}
             onDailyGuardToggle={guard ? () => void handleDailyGuardToggle(a.id, !!a.dailyGuardEnabled) : undefined}
             dailyGuardToggling={togglingId === a.id}
+            reauthHint={a.signedOut ? CODEX_SIGNED_OUT_HINT : undefined}
+            resetCredits={u.resetCredits}
+            // Only a ChatGPT sign-in can be renewed in place; a dead API key is replaced.
+            onReauth={a.type === "chatgpt" ? () => setSignInAgain(a) : undefined}
           />
         );
       })}
     </UsagePanelShell>
+    {signInAgain && (
+      <CodexSignInAgainDialog account={signInAgain} onClose={() => setSignInAgain(null)} onDone={() => void load()} />
+    )}
+    </>
   );
 }

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

@@ -1,4 +1,5 @@
 import { usePanelStore } from "@/stores/panel-store";
+import { useProjectStore } from "@/stores/project-store";
 import { useState, useRef, useCallback, useEffect, memo, type KeyboardEvent, type DragEvent, type ClipboardEvent } from "react";
 import { ArrowUp, Square, Paperclip, Loader2, Mic, MicOff, Zap, ListOrdered, Clock, Bot, X } from "@/lib/icons";
 import { useVoiceInput } from "@/hooks/use-voice-input";
@@ -394,8 +395,8 @@ export const MessageInput = memo(function MessageInput({
       });
   }, [projectName, providerId, sessionId, onSlashItemsLoaded]);
 
-  // Load when projectName changes (cache hit after the first tab in a project)
-  useEffect(() => { loadSlashItems(); }, [loadSlashItems]);
+  // Load on the first slash interaction below. Opening a transcript should
+  // not enumerate skills (or start a provider CLI) before the user needs them.
 
   // Refresh button invalidated the server cache — drop ours too, then refetch.
   useEffect(() => {
@@ -419,7 +420,12 @@ export const MessageInput = memo(function MessageInput({
       // Share the store's array rather than mapping it: every mounted chat tab runs this,
       // and a project index can hold tens of thousands of entries, so a per-tab copy
       // kept one full duplicate alive for each open chat. Consumers only read it.
-      const nodes: FileNode[] = useFileStore.getState().fileIndex;
+      const files = useFileStore.getState();
+      if (filePickerOpenRef.current && files.indexStatus === "idle" && useProjectStore.getState().activeProject?.name === projectName) {
+        void files.loadIndex(projectName);
+        return;
+      }
+      const nodes: FileNode[] = files.indexProjectName === projectName ? files.fileIndex : [];
       fileItemsRef.current = nodes;
       onFileItemsLoaded?.(nodes);
     };
@@ -760,7 +766,7 @@ export const MessageInput = memo(function MessageInput({
       // Check for slash anywhere in text (after whitespace or at start)
       if (hasSlash) {
         const slashMatch = textBefore.match(/(?:^|\s)\/(\S*)$/);
-        if (slashMatch && slashItemsRef.current.length > 0) {
+        if (slashMatch) {
           if (!slashPickerOpenRef.current) loadSlashItems();
           const filter = slashMatch[1] ?? "";
           onSlashStateChange?.(true, filter);
@@ -773,7 +779,11 @@ export const MessageInput = memo(function MessageInput({
       // Check for @ anywhere in text (after whitespace or at start)
       if (hasAt) {
         const atMatch = textBefore.match(/@(\S*)$/);
-        if (atMatch && fileItemsRef.current.length > 0) {
+        if (atMatch) {
+          const files = useFileStore.getState();
+          if (projectName && (files.indexProjectName !== projectName || files.indexStatus === "idle" || files.indexStatus === "error")) {
+            void files.loadIndex(projectName);
+          }
           onFileStateChange?.(true, atMatch[1] ?? "");
           filePickerOpenRef.current = true;
           if (slashPickerOpenRef.current) { onSlashStateChange?.(false, ""); slashPickerOpenRef.current = false; }
@@ -785,7 +795,7 @@ export const MessageInput = memo(function MessageInput({
       if (slashPickerOpenRef.current) { onSlashStateChange?.(false, ""); slashPickerOpenRef.current = false; }
       if (filePickerOpenRef.current) { onFileStateChange?.(false, ""); filePickerOpenRef.current = false; }
     },
-    [onSlashStateChange, onFileStateChange, loadSlashItems],
+    [onSlashStateChange, onFileStateChange, loadSlashItems, projectName],
   );
 
   /** Unified onChange for both textareas — updates ref, syncs other textarea, triggers picker */

package/src/web/components/chat/usage-badge.tsx

@@ -25,6 +25,8 @@ import { AccountBucketRow } from "@/components/settings/accounts/account-bucket-
 import { useAccountsData } from "@/components/settings/accounts/use-accounts-data";
 import { formatLastUpdated, formatResetTime, pctColor } from "@/components/settings/accounts/account-usage-format";
 import { UsagePanelShell } from "./usage-panel-shell";
+import { AddAccountDialog } from "@/components/settings/accounts/account-add-dialog";
+import { ScopedBucketRows } from "@/components/settings/accounts/account-usage-extras";
 
 /** Matches the whole-percent figure the usage bars show, so a refusal agrees with the card. */
 function atCap(util: number | null | undefined): boolean {
@@ -91,6 +93,8 @@ export function UsageDetailPanel({
   // One strip for anything that went wrong in this panel — a refused switch or a refused
   // toggle. Two separate messages in two places would be harder to notice, not clearer.
   const [panelError, setPanelError] = useState<string | null>(null);
+  /** Label of the account whose "Sign in again" chip was pressed; opens the sign-in dialog. */
+  const [signInAgainFor, setSignInAgainFor] = useState<string | null>(null);
 
   if (!visible) return null;
 
@@ -159,6 +163,7 @@ export function UsageDetailPanel({
   const hasCost = usage.queryCostUsd != null || usage.totalCostUsd != null;
 
   return (
+    <>
     <UsagePanelShell
       title="Usage"
       meta={lastFetchedAt && (
@@ -172,12 +177,13 @@ export function UsageDetailPanel({
       cardCount={usages.length}
       fallback={initialLoading ? (
         <p className="text-[10px] text-text-subtle">Loading...</p>
-      ) : usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet ? (
+      ) : usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet || usage.weeklyScoped?.length ? (
         <div className="space-y-2.5">
           <AccountBucketRow label="5-Hour Session" bucket={usage.session} />
           <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">No usage data available</p>
@@ -220,9 +226,19 @@ export function UsageDetailPanel({
             selecting={selectingId === entry.accountId}
             onToggle={handleToggle}
             toggling={togglingId === entry.accountId}
+            onReauth={() => setSignInAgainFor(entry.accountLabel ?? entry.accountId.slice(0, 8))}
           />
         );
       })}
     </UsagePanelShell>
+    {signInAgainFor && (
+      <AddAccountDialog
+        open
+        onOpenChange={(v) => { if (!v) setSignInAgainFor(null); }}
+        onSuccess={(msg) => { setSignInAgainFor(null); void reload(); if (msg) setPanelError(msg); }}
+        signInAgainFor={signInAgainFor}
+      />
+    )}
+    </>
   );
 }

package/src/web/components/database/glide-data-preview-panel.tsx

@@ -3,6 +3,7 @@ import { Eye, Sparkles, WrapText, ExternalLink, X, GripHorizontal } from "@/lib/
 import Editor from "@monaco-editor/react";
 import { Loader2 } from "@/lib/icons";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
 
 export interface PreviewData {
   title: string;
@@ -94,6 +95,7 @@ export function GlideDataPreviewPanel({ data, onClose, onOpenInTab }: PreviewPan
       </div>
       <div className="flex-1 min-h-0">
         <Editor
+          beforeMount={prepareMonacoTheme}
           height="100%"
           language={data.language === "plaintext" ? undefined : data.language}
           value={displayContent}

package/src/web/components/database/sql-query-editor.tsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import Editor, { type OnMount } from "@monaco-editor/react";
 import type * as MonacoType from "monaco-editor";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
 import { createSqlCompletionProvider, clearCompletionCache, type SchemaInfo } from "./sql-completion-provider";
 import { getStatementAtCursor } from "./split-sql-statements";
 
@@ -73,6 +74,7 @@ export function SqlQueryEditor({ onExecute, loading, defaultValue = "SELECT * FR
   return (
     <div className="h-full overflow-hidden">
       <Editor
+        beforeMount={prepareMonacoTheme}
         height="100%"
         language="sql"
         theme={monacoTheme}

package/src/web/components/editor/code-editor.tsx

@@ -10,6 +10,7 @@ import { OnboardingRunDocumentPreview } from "@/components/onboarding/onboarding
 import { useSettingsStore } from "@/stores/settings-store";
 import { basename } from "@/lib/utils";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
 import { useInlineBlame } from "@/hooks/use-inline-blame";
 import { applyBuiltinTypeScript } from "@/lib/lsp/monaco-builtin-typescript";
 import { useIsMobile, isMobileDevice } from "@/hooks/use-is-mobile";
@@ -928,7 +929,10 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
             // Before, not on, mount: the model is created with its language
             // id first, and a model created against an unregistered id is
             // plaintext for good.
-            beforeMount={registerDotenvLanguage}
+            beforeMount={(monaco) => {
+              prepareMonacoTheme(monaco);
+              registerDotenvLanguage(monaco);
+            }}
             value={content ?? ""}
             onChange={inlineContent != null ? undefined : handleChange}
             onMount={handleEditorMount}

package/src/web/components/editor/conflict-editor.tsx

@@ -6,6 +6,7 @@ import { useShallow } from "zustand/react/shallow";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
 import { EDITOR_FONT_FAMILY, EDITOR_FONT_LIGATURES, EDITOR_FONT_SIZE } from "@/lib/editor-font";
 import { onHostResize } from "@/components/floating-window/pip/pip-resize-signal";
 import { Loader2 } from "@/lib/icons";
@@ -360,7 +361,10 @@ export function ConflictEditor({ metadata }: ConflictEditorProps) {
           <Editor
             height={containerHeight}
             language={language}
-            beforeMount={registerDotenvLanguage}
+            beforeMount={(monaco) => {
+              prepareMonacoTheme(monaco);
+              registerDotenvLanguage(monaco);
+            }}
             value={content}
             onMount={handleMount}
             theme={monacoTheme}

package/src/web/components/editor/diff-viewer.tsx

@@ -4,6 +4,7 @@ import { api, projectUrl } from "@/lib/api-client";
 import { useShallow } from "zustand/react/shallow";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { prepareMonacoTheme } from "@/theme/adapters/monaco-adapter";
 import { EDITOR_FONT_FAMILY, EDITOR_FONT_LIGATURES, EDITOR_FONT_SIZE } from "@/lib/editor-font";
 import { useGitRepo } from "@/hooks/use-git-repo";
 import { onHostResize } from "@/components/floating-window/pip/pip-resize-signal";
@@ -362,7 +363,10 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
           <DiffEditor
             height={containerHeight}
             language={language}
-            beforeMount={registerDotenvLanguage}
+            beforeMount={(monaco) => {
+              prepareMonacoTheme(monaco);
+              registerDotenvLanguage(monaco);
+            }}
             original={original}
             modified={modified}
             theme={monacoTheme}

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-add-dialog.tsx

@@ -12,9 +12,14 @@ interface AddAccountDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSuccess: (msg?: string) => void;
+  /**
+   * The label of an account being signed in again. Only the wording changes: the add flow
+   * already updates an account it matches by email or profile id, clearing its re-auth flag.
+   */
+  signInAgainFor?: string;
 }
 
-export function AddAccountDialog({ open, onOpenChange, onSuccess }: AddAccountDialogProps) {
+export function AddAccountDialog({ open, onOpenChange, onSuccess, signInAgainFor }: AddAccountDialogProps) {
   const [newToken, setNewToken] = useState("");
   const [newLabel, setNewLabel] = useState("");
   const [adding, setAdding] = useState(false);
@@ -100,9 +105,11 @@ export function AddAccountDialog({ open, onOpenChange, onSuccess }: AddAccountDi
     <Dialog open={open} onOpenChange={(v) => { if (!v) handleClose(); }}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle className="text-sm">Add Claude Account</DialogTitle>
+          <DialogTitle className="text-sm">{signInAgainFor ? `Sign in again — ${signInAgainFor}` : "Add Claude Account"}</DialogTitle>
           <DialogDescription className="text-xs leading-relaxed">
-            Connect via OAuth (recommended) or paste a token manually.
+            {signInAgainFor
+              ? "Log in with the same Claude account. PPM matches it by email and renews the existing card instead of adding a new one."
+              : "Connect via OAuth (recommended) or paste a token manually."}
           </DialogDescription>
         </DialogHeader>
         <div className="space-y-3">