@hienlh/ppm 0.23.2 → 0.23.4

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

@@ -13,7 +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, pickAccountForTab } from "@/lib/api-settings";
+import { getAISettings } from "@/lib/api-settings";
+import { useChatAccountClaim } from "@/hooks/use-chat-account-claim";
 import { MessageList } from "./message-list";
 import { BackgroundCommandBar } from "./background-command-bar";
 import { TeamWorkingBar } from "./team-working-bar";
@@ -23,7 +24,8 @@ import { MessageInput, type ChatAttachment, type MessagePriority } from "./messa
 import { SlashCommandPicker, type SlashItem } from "./slash-command-picker";
 import { FilePicker } from "./file-picker";
 import { ChatHistoryBar } from "./chat-history-bar";
-import { NewChatProviderGate } from "./new-chat-provider-gate";
+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";
 
@@ -71,6 +73,9 @@ export function ChatTab(props: ChatTabProps) {
 }
 
 function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }: ChatTabProps) {
+  const preparation = useNewChatPreparation();
+  const metadataRef = useRef(metadata);
+  metadataRef.current = metadata;
   // A design chat is created with its slug and keeps the design's name as its tab title.
   const designSlug = typeof metadata?.designSlug === "string" && metadata.designSlug ? metadata.designSlug : undefined;
   const [sessionId, setSessionId] = useState<string | null>(
@@ -91,9 +96,10 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
   const handleSessionMigrated = useCallback((newSessionId: string) => {
     setSessionId(newSessionId);
   }, []);
-  const [providerId, setProviderId] = useState<string>(
+  const [providerOverride, setProviderId] = useState<string>(
     (metadata?.providerId as string) ?? "claude",
   );
+  const providerId = !sessionId && preparation.providerId ? preparation.providerId : providerOverride;
 
   // Slash picker state
   const [slashItems, setSlashItems] = useState<SlashItem[]>([]);
@@ -112,6 +118,12 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
   const [permissionMode, setPermissionMode] = useState<string | undefined>(
     (metadata?.permissionMode as string) ?? undefined,
   );
+  useEffect(() => {
+    if (!preparation?.pending && !sessionId && metadata?.providerId) {
+      setProviderId(metadata.providerId as string);
+      setPermissionMode(metadata.permissionMode as string | undefined);
+    }
+  }, [preparation?.pending, metadata?.providerId, metadata?.permissionMode, sessionId]);
 
   // Pending message to send after WS connects (replaces unreliable setTimeout).
   // `draftId` is the draft it was composed under, deleted only once the message has
@@ -142,14 +154,14 @@ 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);
+      metadata?.pickedAccountProvider === providerId ? metadata?.pickedAccountId as string | undefined : undefined, !preparation?.pending);
 
   // 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(() => {
-    if (permissionMode) return;
+    if (permissionMode || preparation?.pending) return;
     getAISettings().then((s) => {
       const provider = s.providers[providerId];
       setPermissionMode(provider?.permission_mode ?? "bypassPermissions");
@@ -211,21 +223,8 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
    * mind about who is answering. The claim is consumed — several tabs opened in a row
    * deliberately spread across the pool, and are allowed to collide.
    */
-  useEffect(() => {
-    if (!tabId || sessionId || claimMatchesProvider) return;
-    let cancelled = false;
-    pickAccountForTab(providerId)
-      .then((picked) => {
-        if (cancelled || !picked) return;
-        patchTabMetadata(tabId, {
-          pickedAccountId: picked.id,
-          pickedAccountLabel: picked.label,
-          pickedAccountProvider: providerId,
-        });
-      })
-      .catch(() => { /* leave the chip blank rather than naming an account we did not get */ });
-    return () => { cancelled = true; };
-  }, [tabId, sessionId, providerId, claimMatchesProvider]); // eslint-disable-line react-hooks/exhaustive-deps
+  const ensureAccountClaim = useChatAccountClaim(tabId, providerId,
+    !sessionId && !preparation?.pending && !claimMatchesProvider);
 
   /**
    * Move this chat onto an account the user picked in the panel.
@@ -402,6 +401,13 @@ 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);
+  const [firstSendPreview, setFirstSendPreview] = useState<{ content: string; timestamp: string } | null>(null);
+  const firstSendAttempt = useRef(0);
+  const firstSendLocked = useRef(false);
+  const firstSendContent = useRef<string | null>(null);
 
   /**
    * A message that could not be sent, on its way back into the composer. A nonce
@@ -427,6 +433,10 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
    * nothing at all.
    */
   const restoreUnsentMessage = useCallback((content: string, reason: string) => {
+    firstSendLocked.current = false;
+    firstSendContent.current = null;
+    setFirstSendPreview(null);
+    setFirstSendPending(false);
     setRestore({ text: content, nonce: Date.now() });
     toast.error("Message not sent", { description: `${reason} Your text is back in the input.` });
   }, []);
@@ -439,10 +449,18 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
    * behind would prefill the next new tab with this message as well.
    */
   const abandonPendingSend = useCallback((reason: string) => {
+    const preparingContent = firstSendContent.current;
+    ++firstSendAttempt.current;
+    firstSendLocked.current = false;
+    setFirstSendPending(false);
+    setFirstSendPreview(null);
     if (pendingSendTimerRef.current) { clearTimeout(pendingSendTimerRef.current); pendingSendTimerRef.current = null; }
     setEditForking(false);
     const pending = pendingSendRef.current;
-    if (!pending) return;
+    if (!pending) {
+      if (preparingContent) restoreUnsentMessage(preparingContent, reason);
+      return;
+    }
     pendingSendRef.current = null;
     clearDraft(pending.draftId);
     restoreUnsentMessage(pending.content, reason);
@@ -469,6 +487,10 @@ 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 }) });
+      firstSendLocked.current = false;
+      firstSendContent.current = null;
+      setFirstSendPreview(null);
+      setFirstSendPending(false);
       clearDraft(draftId);
     }
   }, [isConnected, sendMessage, clearDraft]);
@@ -476,6 +498,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
   // A closed tab takes its pending message with it; the timer must not fire into an
   // unmounted component.
   useEffect(() => () => {
+    ++firstSendAttempt.current;
     if (pendingSendTimerRef.current) clearTimeout(pendingSendTimerRef.current);
   }, []);
   // Pending edit: when set, the next send forks at `anchorMsgId` and continues
@@ -495,13 +518,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
     if (prevMsgsLoadingRef.current && !messagesLoading) setStaleSwap(false);
     prevMsgsLoadingRef.current = !!messagesLoading;
   }, [messagesLoading]);
-  // Input mounts once the first draft load settles, then STAYS mounted across
-  // same-tab session swaps — unmounting would flash and lose typed text.
-  // Per-session drafts still apply via MessageInput's initialValue effect.
-  const [inputReady, setInputReady] = useState(false);
-  useEffect(() => {
-    if (!draftLoading) setInputReady(true);
-  }, [draftLoading]);
+  // The composer stays mounted from the first paint; drafts hydrate in the background.
   useEffect(() => {
     if (forkDraft && isConnected && sessionId && tabId) {
       // Clear from tab metadata once consumed
@@ -620,6 +637,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 +656,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,7 +729,24 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       if (!fullContent.trim() && images.length === 0) return;
 
       if (!sessionId) {
+        if (firstSendLocked.current) return;
+        firstSendLocked.current = true;
+        firstSendContent.current = fullContent;
+        const attempt = ++firstSendAttempt.current;
+        setFirstSendPending(true);
+        setFirstSendPreview({ content: fullContent, timestamp: new Date().toISOString() });
         try {
+          const prepared = preparation?.pending ? await preparation.prepare() : null;
+          if (attempt !== firstSendAttempt.current) return;
+          const selectedProvider = prepared?.providerId ?? providerId;
+          const selectedPermission = prepared?.permissionMode ?? permissionMode ?? preparation.permissionMode;
+          setProviderId(selectedProvider);
+          setPermissionMode(selectedPermission);
+          const picked = await ensureAccountClaim(selectedProvider);
+          if (attempt !== firstSendAttempt.current) return;
+          const latest = metadataRef.current;
+          const accountId = latest?.pickedAccountProvider === selectedProvider
+            ? latest.pickedAccountId as string | undefined : picked?.id;
           const pName = projectName;
           // Bounded: the composer is already empty by now, and a create call that hangs
           // (a stale tunnel connection after a long idle is the usual way) would otherwise
@@ -719,24 +754,27 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
           // Accepted cost: a create the server completed after the abort leaves one empty
           // session behind, which the retry does not reuse.
           const session = await api.post<Session>(`${projectUrl(pName)}/chat/sessions`, {
-            providerId,
+            providerId: selectedProvider,
             title: content.slice(0, 50),
             // Set by /clear — the session only exists now, so persist the lineage here.
             clearedFrom: metadata?.clearedFrom as string | undefined,
             // The account this tab claimed on open and has been displaying since. Redeeming
             // it here is what makes that display true rather than a guess.
-            accountId: pickedAccountId,
+            accountId,
             // Fixed at creation: the server gives every turn of this session the design's
             // instructions and the design permission default.
             ...(designSlug && { designSlug }),
           }, { signal: AbortSignal.timeout(SESSION_CREATE_TIMEOUT_MS) });
+          if (attempt !== firstSendAttempt.current) return;
+          moveDraft(session.id);
           setSessionId(session.id);
           setProviderId(session.providerId);
           // Queue message — will be sent by effect when WS reports isConnected. It was
           // composed under the new-tab draft, which is what to clear once it goes.
-          queuePendingSend({ content: fullContent, draftId: "__new__", permissionMode, images, imagePaths });
+          queuePendingSend({ content: fullContent, draftId: "__new__", permissionMode: selectedPermission, images, imagePaths });
           return;
         } catch (e) {
+          if (attempt !== firstSendAttempt.current) return;
           console.error("Failed to create session:", e);
           const msg = (e as Error)?.name === "TimeoutError"
             ? "The server did not answer in time."
@@ -749,7 +787,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, queuePendingSend, restoreUnsentMessage, clearDraft, designSlug, moveDraft, preparation, ensureAccountClaim],
   );
 
   // Read through a ref so handleInputSend keeps a stable identity — it is passed to
@@ -774,7 +812,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 +822,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 +834,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 +1006,15 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
       <BackgroundCommandBar shells={backgroundShells} onKill={killBackgroundShell} />
 
       {/* Messages */}
-      <MessageList
+      {firstSendPending ? (
+        <div className="flex-1 overflow-y-auto p-4">
+          {firstSendPreview && <UserBubble content={firstSendPreview.content} timestamp={firstSendPreview.timestamp} projectName={projectName} />}
+          <div role="status" className="flex items-center gap-2 pt-3 text-sm text-text-secondary">
+            <Loader2 className="size-4 animate-spin" />
+            <span>Starting conversation...</span>
+          </div>
+        </div>
+      ) : <MessageList
         messages={renderedMessages}
         onExpandCompact={expandCompact}
         isCompactExpanded={isCompactExpanded}
@@ -988,7 +1039,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} />
@@ -1010,7 +1061,7 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
           providerId={providerId}
           pickedAccountLabel={servingAccount?.label ?? (claimMatchesProvider ? pickedAccountLabel : null)}
           pickedAccountId={servingAccount?.id ?? (claimMatchesProvider ? pickedAccountId ?? null : null)}
-          onSelectAccount={handleSelectAccount}
+          onSelectAccount={!preparation.pending && !firstSendPending ? handleSelectAccount : undefined}
           onSelectSession={handleSelectSession}
           historyFilter={historyFilter}
           onBugReport={sessionId ? () => openBugReportPopup(version, { sessionId, projectName }) : undefined}
@@ -1067,12 +1118,14 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
           </div>
         )}
 
-        {/* Input — gate on first draft load to avoid empty→filled flash, then keep mounted */}
-        {(inputReady || !draftLoading) && (
+        {/* Input is available immediately; network preparation never gates typing. */}
+        {(
           <MessageInput
             draftReady={!draftLoading}
+            configurationPending={preparation.pending}
             tabId={tabId}
             onSend={handleInputSend}
+            disabled={firstSendPending}
             isStreaming={isStreaming}
             onCancel={cancelStreaming}
             autoFocus={!(metadata?.sessionId) || !!forkDraft}
@@ -1093,14 +1146,14 @@ function ChatTabContent({ metadata, tabId, onNewSession, onFork, historyFilter }
             onContentChange={handleContentChange}
             getUserHistory={getUserHistory}
             permissionMode={permissionMode}
-            onModeChange={setPermissionMode}
-            providerId={providerId}
+            onModeChange={!preparation?.pending && !firstSendPending ? setPermissionMode : undefined}
+            providerId={preparation?.providerId ?? providerId}
             sessionId={sessionId ?? undefined}
             // A design chat's provider was chosen among those that carry design instructions;
             // the composer's picker offers every provider, so it is not offered here.
-            onProviderChange={!sessionId && !designSlug ? handleProviderChange : undefined}
+            onProviderChange={!sessionId && !designSlug && !preparation?.pending && !firstSendPending ? handleProviderChange : undefined}
             model={model}
-            onModelChange={setModel}
+            onModelChange={!preparation?.pending && !firstSendPending ? setModel : undefined}
             effort={effort}
             onEffortChange={setEffort}
             thinking={thinking}

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

@@ -27,7 +27,7 @@ import { UsagePanelShell } from "./usage-panel-shell";
 
 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">;
+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 {
@@ -211,6 +211,7 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
             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}
           />

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";
@@ -76,6 +77,8 @@ interface MessageInputProps {
   isStreaming?: boolean;
   onCancel?: () => void;
   disabled?: boolean;
+  /** Input is usable while provider-dependent controls are still preparing. */
+  configurationPending?: boolean;
   projectName?: string;
   /** Slash picker state change */
   onSlashStateChange?: (visible: boolean, filter: string) => void;
@@ -169,6 +172,7 @@ export const MessageInput = memo(function MessageInput({
   onEffortChange,
   thinking,
   onThinkingChange,
+  configurationPending = false,
 }: MessageInputProps) {
   // Uncontrolled textarea: value lives in DOM + ref, not React state.
   // Only `hasText` state triggers re-renders (empty↔non-empty for send button).
@@ -323,10 +327,11 @@ export const MessageInput = memo(function MessageInput({
     if (initialValue && !valueRef.current) {
       writeTextareas(initialValue);
       // Focus and move cursor to end
-      setTimeout(() => {
+      const timer = setTimeout(() => {
         const ta = textareaRef.current;
         if (ta) { ta.focus(); ta.selectionStart = ta.selectionEnd = ta.value.length; }
       }, 50);
+      return () => clearTimeout(timer);
     }
   }, [initialValue]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -364,20 +369,23 @@ export const MessageInput = memo(function MessageInput({
     const next = current.trim() ? `${current}\n\n${restore.text}` : restore.text;
     writeTextareas(next);
     onContentChange?.(next, attachments.filter((a) => a.status === "ready" && a.serverPath).map((a) => ({ name: a.name, path: a.serverPath! })));
-    setTimeout(() => {
+    const timer = setTimeout(() => {
       const ta = getVisibleTextarea();
       if (ta) { ta.focus(); ta.selectionStart = ta.selectionEnd = ta.value.length; }
     }, 50);
+    return () => clearTimeout(timer);
   }, [restore?.nonce]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Auto-focus on mount when requested
   useEffect(() => {
     if (!autoFocus) return;
-    setTimeout(() => { getVisibleTextarea()?.focus(); }, 100);
+    const timer = setTimeout(() => { getVisibleTextarea()?.focus(); }, 100);
+    return () => clearTimeout(timer);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Cache per project/provider/session, with a TTL for externally installed skills.
   const loadSlashItems = useCallback(() => {
+    if (configurationPending) return;
     if (!projectName) {
       slashItemsRef.current = [];
       onSlashItemsLoaded?.([], []);
@@ -392,10 +400,14 @@ export const MessageInput = memo(function MessageInput({
         slashItemsRef.current = [];
         onSlashItemsLoaded?.([], []);
       });
-  }, [projectName, providerId, sessionId, onSlashItemsLoaded]);
+  }, [projectName, providerId, sessionId, onSlashItemsLoaded, configurationPending]);
+
+  useEffect(() => {
+    if (!configurationPending && slashPickerOpenRef.current) loadSlashItems();
+  }, [configurationPending, loadSlashItems]);
 
-  // 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 +431,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 +777,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 +790,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 +806,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 */
@@ -913,6 +934,7 @@ export const MessageInput = memo(function MessageInput({
         <AttachmentChips attachments={attachments} onRemove={removeAttachment} />
         {/* Mobile: mode chip + provider selector row */}
         <div className="flex items-center gap-1 px-2 pt-2 md:hidden relative">
+          {!configurationPending && <>
           <ModeChip
             mode={permissionMode ?? "bypassPermissions"}
             onClick={() => setModeSelectorOpen((v) => !v)}
@@ -923,6 +945,7 @@ export const MessageInput = memo(function MessageInput({
             open={modeSelectorOpen}
             onOpenChange={setModeSelectorOpen}
           />
+          </>}
           {onProviderChange && projectName && (
             <ProviderSelector
               value={providerId ?? "claude"}
@@ -1009,7 +1032,7 @@ export const MessageInput = memo(function MessageInput({
         <div className="hidden md:block">
           <div className="flex items-center gap-1.5 px-2.5 pt-2.5">
             {/* Mode indicator chip */}
-            <div className="relative">
+            {!configurationPending && <div className="relative">
               <ModeChip
                 mode={permissionMode ?? "bypassPermissions"}
                 onClick={() => setModeSelectorOpen((v) => !v)}
@@ -1020,7 +1043,7 @@ export const MessageInput = memo(function MessageInput({
                 open={modeSelectorOpen}
                 onOpenChange={setModeSelectorOpen}
               />
-            </div>
+            </div>}
             {/* Provider selector — only when no active session */}
             {onProviderChange && projectName && (
               <ProviderSelector

package/src/web/components/chat/model-thinking-selector.tsx

@@ -72,7 +72,7 @@ export function ModelThinkingSelector({
   useEffect(() => {
     let active = true;
     setModelResult(null);
-    if (!projectName || !providerId) return;
+    if (!open || !projectName || !providerId) return;
     const entry = modelCache.get(cacheKey);
     if (entry && Date.now() < entry.expiry) return;
     api
@@ -87,7 +87,7 @@ export function ModelThinkingSelector({
         if (active) setModelResult({ projectName, providerId, models: entry?.models ?? [], error: !entry });
       });
     return () => { active = false; };
-  }, [projectName, providerId, cacheKey]);
+  }, [projectName, providerId, cacheKey, open]);
 
   useEffect(() => {
     if (disabled) setOpen(false);
@@ -107,7 +107,7 @@ export function ModelThinkingSelector({
   }, [open, isMobile]);
 
   const current = models.find((m) => m.value === model);
-  const modelDisplay = loading ? "Loading models..." : current ? shortLabel(current.label) : "Model";
+  const modelDisplay = current ? shortLabel(current.label) : model ? shortLabel(model) : "Model";
   const effortValue = effort ?? DEFAULT_EFFORT;
   const showModelList = models.length > 0 || Boolean(modelStatus);
   const chipText = chipLabel(modelDisplay, effortValue);