@hienlh/ppm 0.20.1 → 0.20.3

package/src/services/codex-account-login.ts

@@ -1,7 +1,7 @@
 /**
  * Codex account login orchestration. Logs codex into a per-account CODEX_HOME
  * via a short-lived app-server, verifies with account/read, then persists the
- * account. Two headless paths:
+ * account. Supports API keys, device codes and browser OAuth callbacks.
  *   - apiKey: instant (account/login/start stores the key; validated on first use).
  *   - chatgptDeviceCode: returns a user-code + URL; the app-server's
  *     account/login/completed notification finalizes the account in the
@@ -15,7 +15,8 @@
  */
 import { randomUUID } from "node:crypto";
 import { mkdirSync, rmSync } from "node:fs";
-import { CodexJsonRpcClient } from "../providers/codex-app-server/codex-jsonrpc-client.ts";
+import { buildCodexCallback, checkCodexLoginPort, parseBrowserLogin, type BrowserLoginCallback } from "./codex-login-callback.ts";
+import { CodexJsonRpcClient, CONTROL_REQUEST_TIMEOUT_MS } from "../providers/codex-app-server/codex-jsonrpc-client.ts";
 import { codexAccountHome, createCodexAccount, type CodexAccount } from "./codex-account.service.ts";
 
 const CLIENT_INFO = { name: "ppm", title: "PPM", version: "0.0.0" };
@@ -29,13 +30,13 @@ export interface LoginClient {
   start(opts?: { cwd?: string; codexHome?: string }): void;
   onNotification(fn: (n: { method: string; params?: unknown }) => void): void;
   onClose(fn: (code: number | null) => void): void;
-  request<T = unknown>(method: string, params?: unknown): Promise<T>;
+  request<T = unknown>(method: string, params?: unknown, timeoutMs?: number): Promise<T>;
   notify(method: string, params?: unknown): void;
   close(): void;
 }
 
 async function handshake(c: LoginClient): Promise<void> {
-  await c.request("initialize", { clientInfo: CLIENT_INFO, capabilities: CAPABILITIES });
+  await c.request("initialize", { clientInfo: CLIENT_INFO, capabilities: CAPABILITIES }, CONTROL_REQUEST_TIMEOUT_MS);
   c.notify("initialized");
 }
 
@@ -72,7 +73,10 @@ export type DeviceLoginStatus =
   | { state: "done"; account: CodexAccount }
   | { state: "error"; error: string };
 
-interface DeviceLogin {
+interface ChatGptLogin {
+  method: "device" | "browser";
+  browser?: BrowserLoginCallback;
+  callbackAbort?: AbortController;
   client: LoginClient; home: string; label?: string;
   status: DeviceLoginStatus;
   timer: ReturnType<typeof setTimeout>;
@@ -80,10 +84,14 @@ interface DeviceLogin {
    * home must survive this window even if the browser walks away. */
   finalizing: boolean;
 }
-const deviceLogins = new Map<string, DeviceLogin>();
+const pendingLogins = new Map<string, ChatGptLogin>();
+
+type ChatGptLoginStart = { id: string; userCode: string; verificationUrl: string; authUrl: string };
+type CompletionNotification = { success?: boolean; error?: string | null };
 
 /** How long an unfinished authorization may sit before it is reaped. */
 const DEVICE_LOGIN_TTL = 200_000;
+const BROWSER_LOGIN_TTL = 600_000;
 /** How long a finished result stays readable for the polling browser. */
 const RESULT_GRACE_MS = 120_000;
 
@@ -92,12 +100,21 @@ function unref(t: ReturnType<typeof setTimeout>): ReturnType<typeof setTimeout>
   return t;
 }
 
+function hasPendingBrowserLogin(): boolean {
+  return [...pendingLogins.values()].some((p) => p.method === "browser" && p.status.state === "pending");
+}
+
+function isCurrentPendingLogin(id: string, p: ChatGptLogin): boolean {
+  return pendingLogins.get(id) === p && p.status.state === "pending" && !p.finalizing;
+}
+
 /** Forget a flow entirely: stop its app-server, optionally drop its home. */
-function disposeDeviceLogin(id: string, rmHome: boolean): void {
-  const p = deviceLogins.get(id);
+function disposeLogin(id: string, rmHome: boolean): void {
+  const p = pendingLogins.get(id);
   if (!p) return;
-  deviceLogins.delete(id);
+  pendingLogins.delete(id);
   clearTimeout(p.timer);
+  p.callbackAbort?.abort();
   try { p.client.close(); } catch { /* ignore */ }
   if (rmHome) { try { rmSync(p.home, { recursive: true, force: true }); } catch { /* ignore */ } }
 }
@@ -106,26 +123,30 @@ function disposeDeviceLogin(id: string, rmHome: boolean): void {
  * event that trails a success cannot overwrite it. The entry lingers for
  * RESULT_GRACE_MS — that window is what makes a lost poll response harmless. */
 function settle(id: string, status: Exclude<DeviceLoginStatus, { state: "pending" }>): void {
-  const p = deviceLogins.get(id);
+  const p = pendingLogins.get(id);
   if (!p || p.status.state !== "pending") return;
   p.status = status;
   clearTimeout(p.timer);
+  p.callbackAbort?.abort();
   try { p.client.close(); } catch { /* ignore */ }
   // A failure leaves no account owning the dir, so the half-built home goes now.
   // A success must keep it: createCodexAccount adopted it as the account's home.
   if (status.state === "error") { try { rmSync(p.home, { recursive: true, force: true }); } catch { /* ignore */ } }
-  p.timer = unref(setTimeout(() => { deviceLogins.delete(id); }, RESULT_GRACE_MS));
+  p.timer = unref(setTimeout(() => { pendingLogins.delete(id); }, RESULT_GRACE_MS));
 }
 
 /** Turn the app-server's completion notification into a persisted account. */
-async function finalizeDeviceLogin(id: string, notif: { success?: boolean; error?: string | null }): Promise<void> {
-  const p = deviceLogins.get(id);
-  if (!p || p.status.state !== "pending") return;
-  if (!notif?.success) { settle(id, { state: "error", error: notif?.error || "login not completed" }); return; }
+async function finalizeLogin(id: string, notif: CompletionNotification): Promise<void> {
+  const p = pendingLogins.get(id);
+  if (!p || p.status.state !== "pending" || p.finalizing) return;
+  if (!notif?.success) { settle(id, { state: "error", error: p.method === "browser" ? "ChatGPT sign-in failed. Start a new browser login and try again." : notif?.error || "login not completed" }); return; }
   p.finalizing = true;
+  // Authorization has completed; account/read has its own bounded timeout.
+  clearTimeout(p.timer);
   try {
-    const read = await p.client.request<AccountRead>("account/read", {});
+    const read = await p.client.request<AccountRead>("account/read", {}, CONTROL_REQUEST_TIMEOUT_MS);
     if (!read?.account) throw new Error("login completed but account is empty");
+    if (p.status.state !== "pending") return;
     const account = createCodexAccount({
       id, label: p.label || read.account.email || "ChatGPT", type: "chatgpt",
       planType: read.account.planType ?? null,
@@ -138,43 +159,97 @@ async function finalizeDeviceLogin(id: string, notif: { success?: boolean; error
 
 /** Begin a ChatGPT device-code login. Returns the code/URL the user enters in a
  * browser; the caller then polls getDeviceLoginStatus. */
-export async function startDeviceLogin(
-  label?: string,
-  makeClient: () => LoginClient = () => new CodexJsonRpcClient(),
-): Promise<{ id: string; userCode: string; verificationUrl: string }> {
+async function startChatGptLogin(
+  method: "device" | "browser",
+  label: string | undefined,
+  makeClient: () => LoginClient,
+): Promise<ChatGptLoginStart> {
+  if (method === "browser" && hasPendingBrowserLogin()) {
+    throw new Error("A browser login is already in progress. Finish or cancel it first.");
+  }
   const id = randomUUID();
   const home = codexAccountHome(id);
   mkdirSync(home, { recursive: true, mode: 0o700 });
   const client = makeClient();
   client.onNotification((n) => {
     if (n.method === "account/login/completed") {
-      void finalizeDeviceLogin(id, (n.params ?? {}) as { success?: boolean; error?: string | null });
+      void finalizeLogin(id, (n.params ?? {}) as CompletionNotification);
     }
   });
   client.onClose(() => settle(id, { state: "error", error: "login process exited" }));
-  // Never cleared by a poll: an abandoned browser cannot leak the subprocess or
-  // the half-built home the way a request-scoped timer could.
-  const timer = unref(setTimeout(() => settle(id, { state: "error", error: "timed out" }), DEVICE_LOGIN_TTL));
-  // Registered before the first I/O so a notification (or an immediate exit)
-  // arriving mid-handshake still finds its entry.
-  deviceLogins.set(id, { client, home, label, status: { state: "pending" }, timer, finalizing: false });
+  const timer = unref(setTimeout(() => settle(id, { state: "error", error: "timed out" }), method === "browser" ? BROWSER_LOGIN_TTL : DEVICE_LOGIN_TTL));
+  const pending: ChatGptLogin = { method, client, home, label, status: { state: "pending" }, timer, finalizing: false };
+  pendingLogins.set(id, pending);
   try {
+    if (method === "browser") await checkCodexLoginPort();
     client.start({ codexHome: home });
     await handshake(client);
-    const start = await client.request<{ userCode?: string; verificationUrl?: string }>(
-      "account/login/start", { type: "chatgptDeviceCode" },
+    const start = await client.request<{ userCode?: string; verificationUrl?: string; authUrl?: string }>(
+      "account/login/start", { type: method === "browser" ? "chatgpt" : "chatgptDeviceCode" }, CONTROL_REQUEST_TIMEOUT_MS,
     );
-    return { id, userCode: start?.userCode ?? "", verificationUrl: start?.verificationUrl ?? "" };
+    if (method === "browser") pending.browser = parseBrowserLogin(start.authUrl ?? "");
+    return { id, userCode: start?.userCode ?? "", verificationUrl: start?.verificationUrl ?? "", authUrl: start?.authUrl ?? "" };
   } catch (e) {
-    disposeDeviceLogin(id, true);
+    disposeLogin(id, true);
     throw e;
   }
 }
 
+export async function startDeviceLogin(label?: string, makeClient: () => LoginClient = () => new CodexJsonRpcClient()) {
+  const { id, userCode, verificationUrl } = await startChatGptLogin("device", label, makeClient);
+  return { id, userCode, verificationUrl };
+}
+
+export async function startBrowserLogin(label?: string, makeClient: () => LoginClient = () => new CodexJsonRpcClient()) {
+  const { id, authUrl } = await startChatGptLogin("browser", label, makeClient);
+  return { id, authUrl };
+}
+
+/** Submission is acknowledged immediately. Only the app-server notification and
+ * account/read determine success, even if the forwarding HTTP request drops. */
+export function submitBrowserCallback(id: string, callbackUrl: string, send: typeof fetch = fetch): void {
+  const p = pendingLogins.get(id);
+  if (!p || p.method !== "browser" || !p.browser) throw new Error("No browser login found. Start a new login.");
+  if (p.status.state === "done" || p.finalizing) return;
+  if (p.status.state === "error") throw new Error(p.status.error);
+  const browser = p.browser;
+  const target = buildCodexCallback(callbackUrl, browser);
+  if (browser.submitted) return;
+  browser.submitted = true;
+  const controller = new AbortController();
+  p.callbackAbort = controller;
+  const timeout = unref(setTimeout(() => controller.abort(), 30_000));
+  void (async () => {
+    try {
+      const response = await send(target, { redirect: "manual", signal: controller.signal });
+      // Do not render or log the OAuth response body or follow its redirect.
+      await response.body?.cancel();
+      if (response.status >= 400 && isCurrentPendingLogin(id, p)) {
+        settle(id, { state: "error", error: "Codex rejected the callback. Start a new browser login." });
+      }
+    } catch {
+      // A closed callback socket may mean successful login. Polling owns the result.
+      if (isCurrentPendingLogin(id, p)) browser.submitted = false;
+    } finally {
+      clearTimeout(timeout);
+      if (p.callbackAbort === controller) p.callbackAbort = undefined;
+    }
+  })();
+}
+
+export function getBrowserLoginStatus(id: string): DeviceLoginStatus {
+  const p = pendingLogins.get(id);
+  return p?.method === "browser" ? p.status : { state: "error", error: "no pending browser login for that id" };
+}
+
+export function cancelBrowserLogin(id: string): void {
+  if (pendingLogins.get(id)?.method === "browser") cancelDeviceLogin(id);
+}
+
 /** Read a device-code flow's outcome. Idempotent — repeat polls are free and a
  * dropped response costs one tick, not the flow. */
 export function getDeviceLoginStatus(id: string): DeviceLoginStatus {
-  return deviceLogins.get(id)?.status ?? { state: "error", error: "no pending device login for that id" };
+  return pendingLogins.get(id)?.status ?? { state: "error", error: "no pending device login for that id" };
 }
 
 /** Abandon a flow the user cancelled. A login already being written is left
@@ -182,7 +257,7 @@ export function getDeviceLoginStatus(id: string): DeviceLoginStatus {
  * authorization the user completed. A finished one keeps its home: an account
  * owns it now. */
 export function cancelDeviceLogin(id: string): void {
-  const p = deviceLogins.get(id);
+  const p = pendingLogins.get(id);
   if (!p || p.finalizing) return;
-  disposeDeviceLogin(id, p.status.state !== "done");
+  disposeLogin(id, p.status.state !== "done");
 }

package/src/services/codex-account.service.ts

@@ -15,6 +15,7 @@ import { getPpmDir } from "./ppm-dir.ts";
 import { configService } from "./config.service.ts";
 import { encrypt, decrypt } from "../lib/account-crypto.ts";
 import { getOrFetchUsage } from "./provider-usage/usage-registry.ts";
+import { isCodexAccountUsageLimited } from "./codex-account-cooldown.ts";
 import type { UsageInfo } from "../providers/provider.interface.ts";
 
 export type CodexStrategy = "round-robin" | "fill-first" | "lowest-usage";
@@ -162,6 +163,22 @@ export function setCodexStrategy(strategy: CodexStrategy): void {
 /** Five-hour utilisation at or above which an account is skipped while others have room. */
 const FIVE_HOUR_SKIP_THRESHOLD = 0.95;
 
+/**
+ * The utilisation an account should be judged on, as a 0-1 fraction.
+ *
+ * Not every plan has a short window. A ChatGPT Business account reports a weekly quota and
+ * nothing else, so reading `fiveHour` alone finds nothing there and reports the account as
+ * unreadable — which sends it to the back of `lowest-usage` and exempts it from the cap
+ * skip, for an account whose usage is in fact perfectly well known. Falling through to the
+ * weekly figure judges it on the only limit it actually has.
+ *
+ * `Infinity` still means genuinely unreadable: a failed fetch de-prioritises the account
+ * rather than reading as a flattering 0%.
+ */
+export function codexUsageLevel(usage?: UsageInfo): number {
+  return usage?.fiveHour ?? usage?.sevenDay ?? Number.POSITIVE_INFINITY;
+}
+
 /**
  * Drop accounts with no five-hour room left, unless that would leave nothing.
  *
@@ -183,6 +200,20 @@ function withFiveHourRoom(
   return room.length > 0 ? room : accts;
 }
 
+/**
+ * Drop accounts Codex itself refused for an exhausted quota, unless that would leave nothing.
+ *
+ * Complements the five-hour skip rather than repeating it. That one reads a usage figure
+ * served from a two-minute cache, so an account that hit its cap moments ago still looks
+ * like it has room; this one reads the refusal Codex just gave us, which is current by
+ * definition. Soft for the same reason as the skip above: a park is a guess at when the
+ * quota returns, and handing back a parked account beats handing back nothing.
+ */
+function withQuotaLeft(accts: CodexAccount[]): CodexAccount[] {
+  const usable = accts.filter((a) => !isCodexAccountUsageLimited(a.id));
+  return usable.length > 0 ? usable : accts;
+}
+
 /**
  * Pick an account by strategy. `usageOf` (optional, from P4) enables lowest-usage;
  * without it lowest-usage falls back to round-robin.
@@ -190,16 +221,20 @@ function withFiveHourRoom(
  * `usageOf` also drives the five-hour skip, so a caller that supplies it gets an account
  * with room rather than merely the least-used one among several that are all capped.
  */
-export function selectCodexAccount(opts?: { strategy?: CodexStrategy; usageOf?: (id: string) => number }): CodexAccount | null {
+export function selectCodexAccount(opts?: { strategy?: CodexStrategy; usageOf?: (id: string) => number; exclude?: string[] }): CodexAccount | null {
   // Disabled is a hard exclusion with no fallback, unlike the five-hour skip below. Being
   // capped means a slower turn; being switched off is the user saying don't use this, and
   // handing it back anyway because nothing else was left would ignore them.
-  const all = listCodexAccounts().filter((a) => a.status !== "disabled");
+  //
+  // `exclude` is hard for the same reason: its only caller is the rotation away from an
+  // account that just refused the turn, and falling back to it would rotate in a circle.
+  const excluded = new Set(opts?.exclude ?? []);
+  const all = listCodexAccounts().filter((a) => a.status !== "disabled" && !excluded.has(a.id));
   if (all.length === 0) return null;
   if (all.length === 1) return all[0]!;
   const strategy = opts?.strategy ?? getCodexStrategy();
   const usageOf = opts?.usageOf;
-  const accts = withFiveHourRoom(all, usageOf);
+  const accts = withFiveHourRoom(withQuotaLeft(all), usageOf);
   if (accts.length === 1) return accts[0]!;
   if (strategy === "fill-first") return accts[0]!;
   if (strategy === "lowest-usage" && usageOf) {
@@ -225,9 +260,10 @@ export function selectCodexAccount(opts?: { strategy?: CodexStrategy; usageOf?:
  * null rather than guessing at one.
  */
 export function peekCodexAccount(): CodexAccount | null {
-  // Status is the one thing this can filter on without going async, so it does. Usage lives
-  // behind a fetch and stays out of reach here; the consuming pick endpoint reads it instead.
-  const accts = listCodexAccounts().filter((a) => a.status !== "disabled");
+  // Status and the quota park are the two things this can filter on without going async, so
+  // it does both. Usage lives behind a fetch and stays out of reach here; the consuming pick
+  // endpoint reads it instead.
+  const accts = withQuotaLeft(listCodexAccounts().filter((a) => a.status !== "disabled"));
   if (accts.length === 0) return null;
   if (accts.length === 1) return accts[0]!;
   return getCodexStrategy() === "fill-first" ? accts[0]! : null;
@@ -240,9 +276,19 @@ export async function resolveCodexAccountForSession(sessionId?: string): Promise
   const sticky = sessionId ? getSessionCodexAccount(sessionId) : null;
   // A binding is held for the prompt cache, not honoured unconditionally: an account the
   // user has switched off has to let go of the sessions sitting on it, or turning it off
-  // would do nothing for exactly the conversations already using it.
-  if (sticky) { const a = getCodexAccount(sticky); if (a && a.status !== "disabled") return a; }
-  if (listCodexAccounts().filter((a) => a.status !== "disabled").length <= 1) return selectCodexAccount();
+  // would do nothing for exactly the conversations already using it. An account parked for
+  // an exhausted quota lets go for a different reason — it would refuse the turn, and
+  // spending one to rediscover that is worse than starting on an account that can answer.
+  if (sticky) {
+    const a = getCodexAccount(sticky);
+    if (a && a.status !== "disabled" && !isCodexAccountUsageLimited(a.id)) return a;
+  }
+  // Usage is only worth fetching when it can change the answer, and with at most one
+  // account able to serve it cannot. Parked accounts count as unable for the same reason
+  // they are skipped below, so a pool of two where one is out of quota resolves without a
+  // network read at all.
+  const usable = listCodexAccounts().filter((a) => a.status !== "disabled" && !isCodexAccountUsageLimited(a.id));
+  if (usable.length <= 1) return selectCodexAccount();
   // Usage is read for every strategy, not just lowest-usage: it is also what lets the
   // selector skip an account with no five-hour room left. Reading it only for lowest-usage
   // left that skip inert under round-robin, which is the default — sessions kept landing on
@@ -252,7 +298,7 @@ export async function resolveCodexAccountForSession(sessionId?: string): Promise
   // A failed usage fetch (broken/expired account) yields {} → treat as +Infinity so
   // lowest-usage de-prioritizes it instead of preferring it as "0% used".
   const usages = await getAllCodexUsages();
-  return selectCodexAccount({ usageOf: (id) => usages[id]?.fiveHour ?? Number.POSITIVE_INFINITY });
+  return selectCodexAccount({ usageOf: (id) => codexUsageLevel(usages[id]) });
 }
 
 // ── Usage (per account) ──

package/src/services/codex-login-callback.ts

@@ -0,0 +1,57 @@
+import { createServer } from "node:net";
+
+export interface BrowserLoginCallback {
+  redirectUri: string;
+  state: string;
+  submitted: boolean;
+}
+
+/** Codex may cancel an existing listener on its preferred port when starting.
+ * Refuse an occupied port instead of interrupting another application's login. */
+export async function checkCodexLoginPort(): Promise<void> {
+  await new Promise<void>((resolve, reject) => {
+    const server = createServer();
+    server.once("error", () => reject(new Error("Codex login port 1455 is busy. Finish the other browser login or use device code.")));
+    server.listen(1455, "127.0.0.1", () => server.close(() => resolve()));
+  });
+}
+
+export function parseBrowserLogin(authUrl: string): BrowserLoginCallback {
+  const auth = new URL(authUrl);
+  if (auth.protocol !== "https:" || !["auth.openai.com", "chatgpt.com"].includes(auth.hostname) || auth.username || auth.password) {
+    throw new Error("Codex returned an unsupported login URL.");
+  }
+  const redirect = new URL(auth.searchParams.get("redirect_uri") ?? "");
+  if (redirect.protocol !== "http:" || redirect.hostname !== "localhost" || !["1455", "1457"].includes(redirect.port)
+    || redirect.pathname !== "/auth/callback" || redirect.search || redirect.hash || redirect.username || redirect.password) {
+    throw new Error("Codex returned an unsupported callback URL.");
+  }
+  const state = auth.searchParams.get("state");
+  if (!state) throw new Error("Codex returned a login URL without state.");
+  return { redirectUri: redirect.href, state, submitted: false };
+}
+
+/** Never fetch the user-supplied URL. Validate it against this pending login,
+ * then rebuild a request to the fixed loopback listener using only code/state. */
+export function buildCodexCallback(callbackUrl: string, login: BrowserLoginCallback): URL {
+  if (typeof callbackUrl !== "string" || callbackUrl.length > 16_384) throw new Error("Paste the full localhost callback URL.");
+  let url: URL;
+  try { url = new URL(callbackUrl.trim()); } catch { throw new Error("Paste the full localhost callback URL."); }
+  const expected = new URL(login.redirectUri);
+  if (url.origin !== expected.origin || url.pathname !== expected.pathname || url.username || url.password || url.hash) {
+    throw new Error("Use the localhost callback URL from this Codex login.");
+  }
+  const state = url.searchParams.get("state");
+  // Codex also accepts this exact onboarding suffix; it still binds to the original state.
+  if (url.searchParams.getAll("state").length !== 1 || (state !== login.state && state !== `${login.state}.onboarding_entrypoint=life_sciences`)) {
+    throw new Error("This URL belongs to a different login. Use the latest sign-in link.");
+  }
+  const code = url.searchParams.get("code");
+  if (url.searchParams.has("error") || !code || url.searchParams.getAll("code").length !== 1) {
+    throw new Error("This URL has no authorization code. Complete ChatGPT sign-in first.");
+  }
+  expected.hostname = "127.0.0.1";
+  expected.searchParams.set("code", code);
+  expected.searchParams.set("state", state!);
+  return expected;
+}

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

@@ -89,7 +89,7 @@ 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 } =
+  const { usageInfo, usageLoading, lastFetchedAt, refreshUsage, reloadUsage } =
     useUsage(projectName, providerId, sessionId ?? undefined);
 
   // Draft auto-save/restore
@@ -183,6 +183,12 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         // other source is the usage endpoint on a two-minute poll — so without this the badge
         // sits on the old account long after the switch, which reads as the button not working.
         setServingAccount({ id: accountId, label });
+        // The header chip reports the account BOUND to this session, and that binding has
+        // just changed — so re-read it now instead of leaving the chip on the previous
+        // account's figures for up to the two-minute poll. Before the first message a
+        // session has no binding at all, so those figures were blank, and the chip sat at
+        // "--%" beside a panel already showing the chosen account's quota.
+        void reloadUsage();
         // Switching costs a full prompt-cache write, so it is worth saying out loud rather
         // than letting the chip quietly change.
         toast.success("This chat will use the selected account from the next message.");
@@ -198,7 +204,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
       metadata: { ...metadata, pickedAccountId: accountId, pickedAccountLabel: label, pickedAccountProvider: providerId },
     });
     return null;
-  }, [sessionId, projectName, tabId, metadata, providerId, updateTab]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [sessionId, projectName, tabId, metadata, providerId, updateTab, reloadUsage]); // eslint-disable-line react-hooks/exhaustive-deps
 
   /**
    * The account this chat is on, as far as the UI can tell.