@hienlh/ppm 0.22.1 → 0.22.2

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

@@ -20,6 +20,7 @@ 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 { useDraft, type DraftAttachment } from "@/hooks/use-draft";
 
 import type { DragEvent } from "react";
@@ -31,7 +32,24 @@ interface ChatTabProps {
   tabId?: string;
 }
 
+/**
+ * How long a first message may wait for its session to be created, and then for the
+ * new socket to report connected, before it is handed back to the user. Generous
+ * because a codex app-server cold start alone takes ~30 s; the point is only that
+ * "forever, silently" is not an option.
+ */
+const SESSION_CREATE_TIMEOUT_MS = 30_000;
+const PENDING_SEND_TIMEOUT_MS = 45_000;
+
 export function ChatTab({ metadata, tabId }: ChatTabProps) {
+  return tabId && metadata ? (
+    <NewChatProviderGate tabId={tabId} metadata={metadata}>
+      <ChatTabContent metadata={metadata} tabId={tabId} />
+    </NewChatProviderGate>
+  ) : <ChatTabContent metadata={metadata} tabId={tabId} />;
+}
+
+function ChatTabContent({ metadata, tabId }: ChatTabProps) {
   const [sessionId, setSessionId] = useState<string | null>(
     (metadata?.sessionId as string) ?? null,
   );
@@ -72,8 +90,17 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     (metadata?.permissionMode as string) ?? undefined,
   );
 
-  // Pending message to send after WS connects (replaces unreliable setTimeout)
-  const pendingSendRef = useRef<{ content: string; permissionMode?: string; images?: Array<{ data: string; mediaType: string }>; imagePaths?: string[] } | null>(null);
+  // Pending message to send after WS connects (replaces unreliable setTimeout).
+  // `draftId` is the draft it was composed under, deleted only once the message has
+  // really been handed to the socket; until then that row is the only other copy.
+  const pendingSendRef = useRef<{
+    content: string;
+    draftId: string;
+    permissionMode?: string;
+    images?: Array<{ data: string; mediaType: string }>;
+    imagePaths?: string[];
+  } | null>(null);
+  const pendingSendTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Drag-and-drop state
   const [isDragging, setIsDragging] = useState(false);
@@ -90,16 +117,17 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   // Usage runs independently — auto-refreshes on interval. Scoped to this session so the
   // 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);
+    useUsage(projectName, providerId, sessionId ?? undefined,
+      metadata?.pickedAccountProvider === providerId ? metadata?.pickedAccountId as string | undefined : undefined);
 
   // Draft auto-save/restore
-  const { draft, draftLoading, saveDraft, clearDraft } = useDraft(projectName, sessionId);
+  const { draft, draftLoading, saveDraft, clearDraft, cancelPendingSave } = useDraft(projectName, sessionId);
 
   // Load global default permission mode on mount (if no per-session override)
   useEffect(() => {
     if (permissionMode) return;
     getAISettings().then((s) => {
-      const provider = s.providers[s.default_provider ?? "claude"];
+      const provider = s.providers[providerId];
       setPermissionMode(provider?.permission_mode ?? "bypassPermissions");
     }).catch(() => {});
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -291,15 +319,6 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const primaryTeam = teamActivity?.teamNames?.[0] ?? "";
   const { members: teamMembers } = useTeamActivityFeed(primaryTeam, !!primaryTeam);
 
-  // Flush pending message once WS connects (replaces unreliable setTimeout)
-  useEffect(() => {
-    if (isConnected && pendingSendRef.current) {
-      const { content, permissionMode: pm, images: pendingImages, imagePaths: pendingPaths } = pendingSendRef.current;
-      pendingSendRef.current = null;
-      sendMessage(content, { permissionMode: pm, ...(pendingImages?.length && { images: pendingImages }), ...(pendingPaths?.length && { imagePaths: pendingPaths }) });
-    }
-  }, [isConnected, sendMessage]);
-
   // Auto-clear notification badge when this tab is active and document is visible.
   // Checks ALL panels (not just focused) so split-panel scenarios also clear.
   useEffect(() => {
@@ -335,20 +354,92 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
 
   // Pending fork message — show in input for user to edit, not auto-send
   const [forkDraft, setForkDraft] = useState<string | undefined>(metadata?.pendingMessage as string | undefined);
-  // Pending edit: when set, the next send forks at `anchorMsgId` and continues
-  // in THIS tab (swap sessionId) instead of opening a new tab.
-  // anchorMsgId = fork anchor (prev message); ownMsgId = the edited message itself (for highlight).
-  const [editFork, setEditFork] = useState<{ anchorMsgId?: string; ownMsgId?: string } | null>(null);
-  // Local echo of a just-sent edited message. The forked session's WS connect can
-  // be slow (codex app-server cold start ~30s), and the real optimistic message is
-  // only added after `isConnected`. Show this immediately so the edit doesn't
-  // vanish while the new session spins up; cleared once the real message arrives.
   // True from the moment an edit is submitted until the forked session starts
   // responding. Drives a "working" indicator so the ~10s fork + codex connect
   // doesn't leave the user staring at a frozen screen. (No optimistic message
   // 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);
+
+  /**
+   * A message that could not be sent, on its way back into the composer. A nonce
+   * rather than the bare string: the text is often identical to the draft the
+   * composer was prefilled with, and a value that does not change applies nothing.
+   */
+  const [restore, setRestore] = useState<{ text: string; nonce: number } | null>(null);
+
+  /**
+   * Give an unsent message back to the user.
+   *
+   * The composer empties itself the moment Enter is pressed, and the first send of a
+   * new tab still has a session to create and a socket to open before anything leaves
+   * the browser. Whichever of those fails, the text goes back into the input — the
+   * composer re-saves it as the draft so a reload keeps it — and the failure is said
+   * out loud: a cleared input over an unchanged transcript reads as nothing having
+   * happened at all.
+   *
+   * What comes back is the full message as it would have been sent, attachment
+   * markers included. The files themselves are already uploaded and the markers name
+   * them, so re-sending still hands the model every file; the composer has no way to
+   * re-attach them as chips, and a picture-only message would otherwise come back as
+   * nothing at all.
+   */
+  const restoreUnsentMessage = useCallback((content: string, reason: string) => {
+    setRestore({ text: content, nonce: Date.now() });
+    toast.error("Message not sent", { description: `${reason} Your text is back in the input.` });
+  }, []);
+
+  /**
+   * Drop a pending send that never got its socket; hand the text back.
+   *
+   * The draft it was composed under is cleared first: the composer re-saves the
+   * restored text under the session the tab is on now, and leaving the old row
+   * behind would prefill the next new tab with this message as well.
+   */
+  const abandonPendingSend = useCallback((reason: string) => {
+    if (pendingSendTimerRef.current) { clearTimeout(pendingSendTimerRef.current); pendingSendTimerRef.current = null; }
+    setEditForking(false);
+    const pending = pendingSendRef.current;
+    if (!pending) return;
+    pendingSendRef.current = null;
+    clearDraft(pending.draftId);
+    restoreUnsentMessage(pending.content, reason);
+  }, [restoreUnsentMessage, clearDraft]);
+
+  /**
+   * Queue a message for the moment the (new) session's socket reports connected.
+   * Bounded: a socket that never says hello would otherwise keep the text in a ref
+   * with nothing on screen, for as long as the tab lives.
+   */
+  const queuePendingSend = useCallback((pending: NonNullable<typeof pendingSendRef.current>) => {
+    pendingSendRef.current = pending;
+    if (pendingSendTimerRef.current) clearTimeout(pendingSendTimerRef.current);
+    pendingSendTimerRef.current = setTimeout(
+      () => abandonPendingSend("The chat did not connect in time."),
+      PENDING_SEND_TIMEOUT_MS,
+    );
+  }, [abandonPendingSend]);
+
+  // Flush pending message once WS connects (replaces unreliable setTimeout)
+  useEffect(() => {
+    if (isConnected && pendingSendRef.current) {
+      const { content, draftId, permissionMode: pm, images: pendingImages, imagePaths: pendingPaths } = pendingSendRef.current;
+      pendingSendRef.current = null;
+      if (pendingSendTimerRef.current) { clearTimeout(pendingSendTimerRef.current); pendingSendTimerRef.current = null; }
+      sendMessage(content, { permissionMode: pm, ...(pendingImages?.length && { images: pendingImages }), ...(pendingPaths?.length && { imagePaths: pendingPaths }) });
+      clearDraft(draftId);
+    }
+  }, [isConnected, sendMessage, clearDraft]);
+
+  // A closed tab takes its pending message with it; the timer must not fire into an
+  // unmounted component.
+  useEffect(() => () => {
+    if (pendingSendTimerRef.current) clearTimeout(pendingSendTimerRef.current);
+  }, []);
+  // Pending edit: when set, the next send forks at `anchorMsgId` and continues
+  // in THIS tab (swap sessionId) instead of opening a new tab.
+  // anchorMsgId = fork anchor (prev message); ownMsgId = the edited message itself (for highlight).
+  const [editFork, setEditFork] = useState<{ anchorMsgId?: string; ownMsgId?: string } | null>(null);
   // Bumped to tell MessageInput to clear its textarea when an edit is cancelled.
   const [clearInputSignal, setClearInputSignal] = useState(0);
   // True while a same-tree version swap loads: versions share an identical prefix,
@@ -399,13 +490,16 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   }, [projectName, providerId]);
 
   const handleSelectSession = useCallback((session: SessionInfo) => {
-    setEditForking(false);
+    // A message still waiting for its own session's socket must not ride the
+    // connect of the one picked here: `isConnected` is session-scoped, so the flush
+    // would fire on the selected conversation and post it there.
+    abandonPendingSend("You switched to another chat before it connected.");
     setSessionId(session.id);
     setProviderId(session.providerId);
     if (tabId) updateTab(tabId, { title: session.title || "Chat" });
     // Immediately clear notification for the selected session
     useNotificationStore.getState().clearForSession(session.id);
-  }, [tabId, updateTab]);
+  }, [tabId, updateTab, abandonPendingSend]);
 
   /** Fork current session and open new tab with the forked session, resending userMessage */
   const handleFork = useCallback(async (userMessage: string, messageId?: string) => {
@@ -461,43 +555,52 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
       // session's codex connect can take ~10s; don't await in silence.
       setEditForking(true);
       try {
+        // Bounded like session creation below, and with the same accepted cost: a
+        // fork the server finished after the abort is a stray sibling in the tree.
         const forked = await api.post<{ id: string }>(
           `${projectUrl(projectName)}/chat/sessions/${sessionId}/fork?providerId=${providerId}&mode=edit`,
           { messageId: anchorMsgId },
+          { signal: AbortSignal.timeout(SESSION_CREATE_TIMEOUT_MS) },
         );
         // The tree gained a sibling. Swapping sessionId below refetches
         // /messages, which carries a fresh versionMap, so the switcher's n/m
         // counts update without any cache to invalidate.
         // Queue the edited message — flushed by the connect effect once the WS
-        // reconnects to the forked session.
-        pendingSendRef.current = { content: fullContent, permissionMode };
+        // 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 });
         // Swap the current tab to the forked session (no new tab).
         setStaleSwap(true);
         if (tabId) updateTab(tabId, { metadata: { ...metadata, sessionId: forked.id } });
         setSessionId(forked.id);
       } catch (e) {
         setEditForking(false);
-        const msg = (e as Error)?.message || "Unknown error";
+        const msg = (e as Error)?.name === "TimeoutError"
+          ? "The server did not answer in time."
+          : (e as Error)?.message || "Unknown error";
         toast.error("Cannot edit from this message", {
           description: msg.includes("not found") || msg.includes("Invalid upToMessageId")
             ? "The original message is no longer available in the session transcript."
             : msg,
         });
+        // The edited text was cleared from the composer on Enter — put it back.
+        setRestore({ text: fullContent, nonce: Date.now() });
       }
     },
-    [sessionId, projectName, providerId, permissionMode, tabId, updateTab, metadata],
+    [sessionId, projectName, providerId, permissionMode, tabId, updateTab, metadata, queuePendingSend],
   );
 
   /** Swap THIS tab to another version's session (version switcher prev/next) */
   const handleSwitchVersion = useCallback(
     (targetSessionId: string) => {
       if (!targetSessionId || targetSessionId === sessionId) return;
-      setEditForking(false);
+      // Same as handleSelectSession: a queued edit must not land in the version switched to.
+      abandonPendingSend("You switched to another version before it connected.");
       setStaleSwap(true);
       if (tabId) updateTab(tabId, { metadata: { ...metadata, sessionId: targetSessionId } });
       setSessionId(targetSessionId);
     },
-    [sessionId, tabId, updateTab, metadata],
+    [sessionId, tabId, updateTab, metadata, abandonPendingSend],
   );
 
   /** Build message content with file references and inline text snippets prepended */
@@ -559,6 +662,11 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
       if (!sessionId) {
         try {
           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
+          // leave it empty over an unchanged transcript for as long as the tab lives.
+          // 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,
             title: content.slice(0, 50),
@@ -567,20 +675,27 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
             // 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,
-          });
+          }, { signal: AbortSignal.timeout(SESSION_CREATE_TIMEOUT_MS) });
           setSessionId(session.id);
           setProviderId(session.providerId);
-          // Queue message — will be sent by effect when WS reports isConnected
-          pendingSendRef.current = { content: fullContent, permissionMode, images, imagePaths };
+          // 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 });
           return;
         } catch (e) {
           console.error("Failed to create session:", e);
+          const msg = (e as Error)?.name === "TimeoutError"
+            ? "The server did not answer in time."
+            : `Could not start the chat: ${(e as Error)?.message || "unknown error"}.`;
+          restoreUnsentMessage(fullContent, msg);
           return;
         }
       }
       sendMessage(fullContent, { permissionMode, priority, ...(images.length > 0 && { images }), ...(imagePaths.length > 0 && { imagePaths }) });
+      // Only now: the message is on (or queued for) a live session's socket.
+      clearDraft();
     },
-    [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode, metadata],
+    [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments, permissionMode, metadata, pickedAccountId, queuePendingSend, restoreUnsentMessage, clearDraft],
   );
 
   // Read through a ref so handleInputSend keeps a stable identity — it is passed to
@@ -588,7 +703,15 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const slashItemsRef = useRef(slashItems);
   slashItemsRef.current = slashItems;
 
-  /** Stable wrapper for MessageInput onSend — clears forkDraft + draft and delegates to handleSend */
+  /**
+   * Stable wrapper for MessageInput onSend — drops the prefill and delegates.
+   *
+   * The draft is NOT deleted here. The composer has already emptied itself, so the
+   * saved draft is the only other copy of the text until the send actually happens;
+   * each send path deletes it at the moment the message reaches a socket, and puts
+   * the text back when it cannot. Only the save still waiting on its debounce is
+   * dropped, or it would land under whichever session the tab is on a second later.
+   */
   const handleInputSend = useCallback(
     (content: string, attachments: ChatAttachment[], priority?: MessagePriority) => {
       // Client-handled built-ins act on the UI, so they must not reach the SDK.
@@ -605,16 +728,16 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
       }
 
       setForkDraft(undefined);
-      clearDraft();
+      cancelPendingSave();
       if (editFork && sessionId && projectName) {
         const anchor = editFork.anchorMsgId;
         setEditFork(null);
         void handleEditSend(buildMessageWithAttachments(content, attachments), anchor);
         return;
       }
-      handleSend(content, attachments, priority);
+      void handleSend(content, attachments, priority);
     },
-    [handleSend, clearDraft, editFork, sessionId, projectName, handleEditSend, buildMessageWithAttachments, handleNewSession],
+    [handleSend, clearDraft, cancelPendingSave, editFork, sessionId, projectName, handleEditSend, buildMessageWithAttachments, handleNewSession],
   );
 
   // Past user messages for the composer's ArrowUp/Down recall. Read through a ref
@@ -894,6 +1017,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
             autoFocus={!(metadata?.sessionId) || !!forkDraft}
             initialValue={forkDraft ?? draft?.content}
             clearSignal={clearInputSignal}
+            restore={restore}
             projectName={projectName}
             onSlashStateChange={handleSlashStateChange}
             onSlashItemsLoaded={handleSlashItemsLoaded}

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

@@ -95,6 +95,13 @@ interface MessageInputProps {
   initialValue?: string;
   /** Bumping this counter clears the textarea (e.g. parent cancels an edit). */
   clearSignal?: number;
+  /**
+   * A message that could not be sent, handed back. A fresh `nonce` applies it even
+   * when `text` equals the last one — `initialValue` cannot do this, because it only
+   * reacts to a *changed* value, and the text of a failed send is often exactly the
+   * draft the composer was already prefilled with.
+   */
+  restore?: { text: string; nonce: number } | null;
   /** Called on content change for draft auto-save */
   onContentChange?: (content: string, attachments?: Array<{ name: string; path: string }>) => void;
   /** Returns this session's user messages, oldest first — powers ArrowUp/Down recall */
@@ -144,6 +151,7 @@ export const MessageInput = memo(function MessageInput({
   onExternalPathsConsumed,
   initialValue,
   clearSignal,
+  restore,
   onContentChange,
   getUserHistory,
   autoFocus,
@@ -317,6 +325,22 @@ export const MessageInput = memo(function MessageInput({
     if (clearSignal) writeTextareas("");
   }, [clearSignal]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // An unsent message coming back. The send can fail up to ~45 s after Enter, by which
+  // time the user may be typing something new — so the text goes AFTER what is there
+  // rather than over it. Reported as a content change so it is saved as the draft
+  // again; `writeTextareas` alone tells nobody.
+  useEffect(() => {
+    if (!restore?.nonce || !restore.text) return;
+    const current = valueRef.current;
+    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 ta = getVisibleTextarea();
+      if (ta) { ta.focus(); ta.selectionStart = ta.selectionEnd = ta.value.length; }
+    }, 50);
+  }, [restore?.nonce]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // Auto-focus on mount when requested
   useEffect(() => {
     if (!autoFocus) return;

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

@@ -46,17 +46,36 @@ export function ModelThinkingSelector({
   providerId,
   disabled,
 }: ModelThinkingSelectorProps) {
-  const [models, setModels] = useState<ModelOption[]>([]);
+  const [modelResult, setModelResult] = useState<{
+    projectName: string;
+    providerId: string;
+    models: ModelOption[];
+    error?: boolean;
+  } | null>(null);
+  // Never render another provider/project's options, even before effects run.
+  const result = modelResult?.projectName === projectName && modelResult.providerId === providerId
+    ? modelResult : null;
+  const models = result?.models ?? [];
+  const loading = Boolean(projectName && providerId && !result);
+  const modelStatus = loading ? "Loading models..." : result?.error
+    ? "Unable to load models" : models.length === 0 ? "No models available" : null;
   const [open, setOpen] = useState(false);
   const panelRef = useRef<HTMLDivElement>(null);
   const isMobile = useIsMobile();
 
   useEffect(() => {
+    let active = true;
+    setModelResult(null);
     if (!projectName || !providerId) return;
     api
       .get<ModelOption[]>(`${projectUrl(projectName)}/chat/providers/${providerId}/models`)
-      .then(setModels)
-      .catch(() => {});
+      .then((models) => {
+        if (active) setModelResult({ projectName, providerId, models });
+      })
+      .catch(() => {
+        if (active) setModelResult({ projectName, providerId, models: [], error: true });
+      });
+    return () => { active = false; };
   }, [projectName, providerId]);
 
   useEffect(() => {
@@ -77,9 +96,9 @@ export function ModelThinkingSelector({
   }, [open, isMobile]);
 
   const current = models.find((m) => m.value === model);
-  const modelDisplay = current ? shortLabel(current.label) : model ? shortLabel(model) : "Model";
+  const modelDisplay = loading ? "Loading models..." : current ? shortLabel(current.label) : "Model";
   const effortValue = effort ?? DEFAULT_EFFORT;
-  const showModelList = models.length > 1;
+  const showModelList = models.length > 0 || Boolean(modelStatus);
   const chipText = chipLabel(modelDisplay, effortValue);
 
   const pick = (fn: () => void) => {
@@ -93,6 +112,7 @@ export function ModelThinkingSelector({
       {showModelList && (
         <div className="flex-1 min-w-0 py-1">
           <SectionLabel>Model</SectionLabel>
+          {modelStatus && <div role="status" className="px-3 py-2 text-xs text-text-secondary">{modelStatus}</div>}
           {models.map((m) => (
             <OptionRow key={m.value} active={m.value === model} onClick={() => pick(() => onModelChange(m.value))}>
               <span className="flex-1 truncate">{shortLabel(m.label)}</span>

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

@@ -0,0 +1,68 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { getAISettings, type AISettings } from "@/lib/api-settings";
+import { api, projectUrl } from "@/lib/api-client";
+import { resolveNewChatProvider } from "@/lib/new-chat-provider";
+import { usePanelStore } from "@/stores/panel-store";
+
+/** Do not mount chat (or claim an account) until its initial provider is known. */
+export function NewChatProviderGate({ tabId, metadata, children }: {
+  tabId: string;
+  metadata: Record<string, unknown>;
+  children: ReactNode;
+}) {
+  const [error, setError] = useState(false);
+  const [attempt, setAttempt] = useState(0);
+  const [unavailable, setUnavailable] = useState<{
+    provider: string; settings: AISettings; alternatives: Array<{ id: string; name: string }>;
+  } | null>(null);
+  const pending = metadata.providerPending === true;
+  const source = metadata.focusedProviderOnOpen as string | undefined;
+  const projectName = metadata.projectName as string | undefined;
+
+  function selectProvider(providerId: string, settings: AISettings) {
+    const store = usePanelStore.getState();
+    const tab = store.getPanelForTab(tabId)?.tabs.find((t) => t.id === tabId);
+    if (!tab?.metadata?.providerPending) return;
+    store.updateTab(tabId, { metadata: {
+      ...tab.metadata,
+      providerId,
+      providerPending: undefined,
+      focusedProviderOnOpen: undefined,
+      permissionMode: tab.metadata.permissionMode ?? settings.providers[providerId]?.permission_mode ?? "bypassPermissions",
+    } });
+  }
+
+  useEffect(() => {
+    if (!pending) return;
+    let cancelled = false;
+    setError(false);
+    setUnavailable(null);
+    Promise.all([
+      getAISettings(),
+      projectName ? api.get<Array<{ id: string; name: string }>>(`${projectUrl(projectName)}/chat/providers`) : Promise.resolve(null),
+    ]).then(([settings, providers]) => {
+      if (cancelled) return;
+      const providerId = resolveNewChatProvider(settings, source);
+      if (providers && !providers.some((p) => p.id === providerId)) {
+        setUnavailable({ provider: providerId, settings, alternatives: providers });
+        return;
+      }
+      selectProvider(providerId, settings);
+    }).catch(() => { if (!cancelled) setError(true); });
+    return () => { cancelled = true; };
+  }, [pending, source, projectName, tabId, attempt]);
+
+  if (!pending) return children;
+  if (unavailable) return <div className="flex h-full flex-col items-center justify-center gap-3 p-4 text-sm text-muted-foreground" role="status">
+    <p>{unavailable.provider} is not available. Choose a provider for this chat.</p>
+    {unavailable.alternatives.map((p) => <button key={p.id} className="text-primary underline"
+      onClick={() => selectProvider(p.id, unavailable.settings)}>Use {p.name}</button>)}
+    <button className="text-primary underline" onClick={() => setAttempt((n) => n + 1)}>Check again</button>
+  </div>;
+  return <div className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground" role="status">
+    {error ? <>
+      Could not load chat settings.
+      <button className="text-primary underline" onClick={() => setAttempt((n) => n + 1)}>Retry</button>
+    </> : "Preparing chat…"}
+  </div>;
+}

package/src/web/components/layout/editor-panel.tsx

@@ -54,7 +54,7 @@ export function EditorPanel({ panelId, projectName }: EditorPanelProps) {
         panelCount > 1 && "border border-transparent",
         panelCount > 1 && isFocused && "border-primary/30",
       )}
-      onMouseDown={() => { if (usePanelStore.getState().focusedPanelId !== panelId) usePanelStore.getState().setFocusedPanel(panelId); }}
+      onMouseDown={() => { if (usePanelStore.getState().focusedPanelId !== panelId) usePanelStore.getState().setFocusedPanel(panelId, false); }}
     >
       <TabBar panelId={panelId} />
 

package/src/web/components/layout/reparenting-tab.tsx

@@ -65,9 +65,11 @@ export function ReparentingTab({
       if (pid === DOCK_PANEL_ID || isWindowPanelId(pid)) return;
       usePanelStore.getState().setFocusedPanel(pid);
     };
-    wrapper.addEventListener("mousedown", onMouseDown, true);
+    wrapper.addEventListener("pointerdown", onMouseDown, true);
+    wrapper.addEventListener("focusin", onMouseDown, true);
     return () => {
-      wrapper.removeEventListener("mousedown", onMouseDown, true);
+      wrapper.removeEventListener("pointerdown", onMouseDown, true);
+      wrapper.removeEventListener("focusin", onMouseDown, true);
       wrapper.remove();
     };
   }, [wrapper, hiddenContainer]);

package/src/web/components/layout/tab-bar.tsx

@@ -448,6 +448,7 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
                   metadata: project ? { projectName: project.name } : undefined,
                 });
               } else {
+                usePanelStore.getState().setFocusedPanel(effectivePanelId, false);
                 openCommandPalette();
               }
             }}
@@ -503,4 +504,3 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
     </>
   );
 });
-

package/src/web/components/settings/ai-settings-section.tsx

@@ -120,6 +120,42 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
     <div className={gapSize}>
       <h3 className={`${headingSize} font-medium text-text-secondary`}>AI Settings</h3>
 
+      <div className={fieldGap}>
+        <Label htmlFor="ai-new-chat-provider" className={compact ? labelSize : undefined}>New chat provider</Label>
+        <Select
+          value={settings.new_chat_provider_mode ?? "default"}
+          disabled={saving}
+          onValueChange={(value) => handleSettingsSave({ new_chat_provider_mode: value as "default" | "follow-focus" })}
+        >
+          <SelectTrigger id="ai-new-chat-provider" className={`w-full ${compact ? "h-7 text-[11px]" : ""}`}><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="follow-focus">Follow last focused chat</SelectItem>
+            <SelectItem value="default">Always use default provider</SelectItem>
+          </SelectContent>
+        </Select>
+        <p className={`${compact ? "text-[9px]" : "text-[11px]"} text-muted-foreground`}>
+          {settings.new_chat_provider_mode === "follow-focus"
+            ? "New tabs follow the last chat you focused in this project, across panels. Existing tabs keep their provider."
+            : "New tabs always use the default provider. Existing tabs keep their provider."}
+        </p>
+      </div>
+
+      <div className={fieldGap}>
+        <Label htmlFor="ai-default-provider" className={compact ? labelSize : undefined}>Default provider</Label>
+        <Select value={settings.default_provider} disabled={saving}
+          onValueChange={(default_provider) => handleSettingsSave({ default_provider })}>
+          <SelectTrigger id="ai-default-provider" className={`w-full ${compact ? "h-7 text-[11px]" : ""}`}><SelectValue /></SelectTrigger>
+          <SelectContent>
+            {providerTabs.map((p) => <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>)}
+          </SelectContent>
+        </Select>
+        {settings.new_chat_provider_mode === "follow-focus" && (
+          <p className={`${compact ? "text-[9px]" : "text-[11px]"} text-muted-foreground`}>
+            Used when no chat has been focused in this project yet.
+          </p>
+        )}
+      </div>
+
       <div className="flex items-start justify-between gap-3 rounded-md border border-border p-3">
         <div className={fieldGap}>
           <Label htmlFor="ai-share-provider-context" className={compact ? labelSize : undefined}>

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

@@ -86,11 +86,32 @@ export function useDraft(projectName: string, sessionId: string | null) {
     [projectName],
   );
 
-  // Clear draft (on send)
-  const clear = useCallback(() => {
+  /**
+   * Drop a save that is still waiting on the debounce, without touching the server.
+   *
+   * Called at Enter. The save runs against whatever session the tab is on when the
+   * timer fires — and the first send of a new tab swaps the tab onto its new session
+   * within that second, so a save left armed would write the message just sent as the
+   * new session's draft, to reappear in the composer on the next mount as if unsent.
+   */
+  const cancelPendingSave = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = undefined;
+  }, []);
+
+  /**
+   * Clear the draft once its message has actually been handed to the socket.
+   *
+   * `draftId` names the draft the message was composed under. The first send of a
+   * new tab creates the session and only then sends, so by the time the send
+   * happens `sessionRef` already points at the new session while the draft still
+   * lives under `__new__` — deleting by the current session id would leave it
+   * behind and restore it into the next new tab.
+   */
+  const clear = useCallback((draftId?: string) => {
     if (!projectName) return;
     if (timerRef.current) clearTimeout(timerRef.current);
-    const id = sessionRef.current ?? "__new__";
+    const id = draftId ?? sessionRef.current ?? "__new__";
     api
       .del(`${projectUrl(projectName)}/chat/drafts/${encodeURIComponent(id)}`)
       .catch(() => {});
@@ -104,5 +125,5 @@ export function useDraft(projectName: string, sessionId: string | null) {
     };
   }, []);
 
-  return { draft, draftLoading: loading, saveDraft: save, clearDraft: clear };
+  return { draft, draftLoading: loading, saveDraft: save, clearDraft: clear, cancelPendingSave };
 }