@hienlh/ppm 0.20.0 → 0.20.2

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.

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

@@ -1,11 +1,27 @@
+/**
+ * The chat header's Codex usage panel.
+ *
+ * Deliberately the same panel as the Claude one, not a lookalike: the frame comes from
+ * `UsagePanelShell` and every card is the `AccountCard` that Settings renders. It used to
+ * draw both itself, which is how the two ended up with cards of different shapes stacked in
+ * different directions — the drift the shared Settings layout exists to stop.
+ *
+ * What stays Codex-specific is only what genuinely differs: its accounts come from
+ * `/api/codex-accounts` rather than the Claude pool, an account is a CODEX_HOME rather than
+ * an OAuth grant so there is no token to expire, and a plan may have no 5-hour window at
+ * all — so the quota rows follow what the account actually reports.
+ */
+
 import { useState, useEffect, useCallback } from "react";
-import { X, Loader2, RefreshCw } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { api } from "@/lib/api-client";
-import { Switch } from "@/components/ui/switch";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { AccountUsageBar } from "@/components/settings/accounts/account-bucket-row";
+import { AccountCard } from "@/components/settings/accounts/account-card";
+import { AccountCardShell } from "@/components/settings/accounts/accounts-pane-header";
+import { AccountBucketRow } from "@/components/settings/accounts/account-bucket-row";
 import { formatResetTime } from "@/components/settings/accounts/account-usage-format";
+import type { AccountUsageEntry } from "@/lib/api-settings";
 import type { UsageInfo } from "../../../types/chat";
+import { UsagePanelShell } from "./usage-panel-shell";
 
 interface CodexAccount { id: string; label: string; type: string; planType?: string | null; status?: "active" | "disabled" }
 type Usage = Pick<UsageInfo, "fiveHour" | "sevenDay" | "session" | "weekly">;
@@ -15,20 +31,23 @@ function atCap(util: number | null | undefined): boolean {
   return Math.round((util ?? 0) * 100) >= 100;
 }
 
-function UsageBar({ label, frac, bucket }: {
-  label: string;
-  frac?: number;
-  bucket?: UsageInfo["session"];
-}) {
-  const pct = frac != null ? Math.round(frac * 100) : null;
-  return <AccountUsageBar label={label} pct={pct} reset={formatResetTime(bucket)} resetsAt={bucket?.resetsAt} />;
+/**
+ * A Codex account in the shape every account card speaks.
+ *
+ * `isOAuth` carries the account kind rather than an OAuth fact: a `chatgpt` account is a
+ * sign-in and an `apiKey` one is a static key, which is exactly the distinction the card's
+ * "API key" badge already draws.
+ */
+function toEntry(account: CodexAccount, usage: Usage): AccountUsageEntry {
+  return {
+    accountId: account.id,
+    accountLabel: account.label,
+    accountStatus: account.status ?? "active",
+    isOAuth: account.type !== "apiKey",
+    usage: { session: usage.session, weekly: usage.weekly },
+  };
 }
 
-/** Read-only usage panel opened from the chat toolbar badge (Claude parity).
- * Shows every managed Codex account's 5h/weekly utilization. When no managed
- * accounts exist, chats run on the ambient ~/.codex login — its usage comes
- * from the session `usage` prop. Login/management lives in Settings → AI
- * Provider → Codex. */
 export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, selectedAccountId }: {
   onClose: () => void;
   usage: UsageInfo;
@@ -44,43 +63,7 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
   const [loading, setLoading] = useState(false);
   const [selectingId, setSelectingId] = useState<string | null>(null);
   const [togglingId, setTogglingId] = useState<string | null>(null);
-  const [toggleError, setToggleError] = useState<string | null>(null);
-
-  // This panel draws its own cards rather than reusing Settings' AccountCard, so the
-  // selection control is rebuilt here. Kept visually the same as the Claude panel's on
-  // purpose — the two sub-tabs drifting apart is the thing the shared Settings layout was
-  // introduced to stop, and a differently-shaped button here would start it again.
-  const select = useCallback(async (id: string, label: string, refused: string | null) => {
-    if (!onSelectAccount) return;
-    // Refuse here rather than leaving the button inert: the user pressed something and is
-    // owed the reason. The server checks again, which catches an account that became
-    // unusable between this render and the click.
-    if (refused) { setToggleError(`Cannot switch to this account — ${refused}`); return; }
-    setSelectingId(id);
-    setToggleError(null);
-    try { setToggleError((await onSelectAccount(id, label)) ?? null); } finally { setSelectingId(null); }
-  }, [onSelectAccount]);
-
-  /**
-   * Switch a Codex account on or off without leaving the chat.
-   *
-   * No pending-token dance like the Claude side: the Codex route answers immediately because
-   * there is no refresh token to prove. The pending id is still tracked so the switch cannot
-   * be double-fired on a slow connection.
-   */
-  const toggle = useCallback(async (id: string, status: string) => {
-    setTogglingId(id);
-    setToggleError(null);
-    try {
-      await api.patch(`/api/codex-accounts/${id}`, { status: status === "disabled" ? "active" : "disabled" });
-      const d = await api.get<{ accounts: CodexAccount[] }>("/api/codex-accounts");
-      setAccounts(d.accounts);
-    } catch (e) {
-      setToggleError((e as Error).message || "Could not change the account");
-    } finally {
-      setTogglingId(null);
-    }
-  }, []);
+  const [panelError, setPanelError] = useState<string | null>(null);
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -104,126 +87,107 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
     } catch { /* retain the last successful reading */ } finally { setLoading(false); }
   }, [onReload]);
 
-  return (
-    <div className="border-t border-border bg-surface px-3 py-2.5 space-y-2.5 max-h-[350px] overflow-y-auto">
-      <div className="flex items-center justify-between">
-        <span className="text-xs font-semibold text-text-primary">Codex Usage</span>
-        <div className="flex items-center gap-1">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={reload}
-                disabled={loading}
-                className="text-text-subtle hover:text-text-primary px-1 cursor-pointer disabled:opacity-50"
-                aria-label="Refresh usage"
-              >
-                <RefreshCw className={`size-3 ${loading ? "animate-spin" : ""}`} />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="top">Refresh</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={onClose}
-                className="text-text-subtle hover:text-text-primary px-1 cursor-pointer"
-                aria-label="Close usage panel"
-              >
-                <X className="size-3" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="top">Close</TooltipContent>
-          </Tooltip>
-        </div>
-      </div>
+  /**
+   * Why an account cannot take this chat, in the words the card shows.
+   *
+   * Reached, not approaching: an account at 96% still answers, one at 100% does not. Both
+   * windows are checked because a plan may have only one of them, and whichever it has is
+   * the one that refuses the turn.
+   */
+  const unselectableReason = useCallback((account: CodexAccount, u: Usage): string | null => {
+    if (account.status === "disabled") return "Disabled";
+    if (atCap(u.fiveHour)) return `5-hour limit reached${u.session?.resetsAt ? ` — resets ${formatResetTime(u.session)}` : ""}`;
+    if (atCap(u.sevenDay)) return `Weekly limit reached${u.weekly?.resetsAt ? ` — resets ${formatResetTime(u.weekly)}` : ""}`;
+    return null;
+  }, []);
 
-      {toggleError && (
-        <div className="flex items-start gap-2 rounded border border-error/40 bg-error/10 px-2 py-1.5 text-[11px] text-error">
-          <span className="flex-1">{toggleError}</span>
-          <button onClick={() => setToggleError(null)} className="shrink-0 text-error/70 hover:text-error cursor-pointer" aria-label="Dismiss">
-            <X className="size-3" />
-          </button>
-        </div>
-      )}
+  const handleSelect = useCallback(async (accountId: string) => {
+    if (!onSelectAccount) return;
+    const account = accounts.find((a) => a.id === accountId);
+    if (!account) return;
+    // Refuse here rather than leaving the button inert: the user pressed something and is
+    // owed the reason. The server checks again, which catches an account that became
+    // unusable between this render and the click.
+    const refused = unselectableReason(account, usages[accountId] ?? {});
+    if (refused) { setPanelError(`Cannot switch to this account — ${refused.toLowerCase()}.`); return; }
+    setSelectingId(accountId);
+    setPanelError(null);
+    try { setPanelError((await onSelectAccount(accountId, account.label)) ?? null); }
+    finally { setSelectingId(null); }
+  }, [onSelectAccount, accounts, usages, unselectableReason]);
 
-      {loading && accounts.length === 0 && (
-        <div className="text-xs text-text-subtle flex items-center gap-2"><Loader2 className="size-3 animate-spin" /> Loading…</div>
-      )}
+  /**
+   * Switch a Codex account on or off without leaving the chat.
+   *
+   * No pending-token dance like the Claude side: the Codex route answers immediately because
+   * there is no refresh token to prove. The pending id is still tracked so the switch cannot
+   * be double-fired on a slow connection.
+   */
+  const handleToggle = useCallback(async (id: string, status: string) => {
+    setTogglingId(id);
+    setPanelError(null);
+    try {
+      await api.patch(`/api/codex-accounts/${id}`, { status: status === "disabled" ? "active" : "disabled" });
+      const d = await api.get<{ accounts: CodexAccount[] }>("/api/codex-accounts");
+      setAccounts(d.accounts);
+    } catch (e) {
+      setPanelError((e as Error).message || "Could not change the account");
+    } finally {
+      setTogglingId(null);
+    }
+  }, []);
 
-      {/* No managed accounts → chat runs on the ambient ~/.codex login; show its usage */}
-      {!loading && accounts.length === 0 && (
-        <>
-          <div className="rounded-md border border-border/50 bg-surface/40 p-2.5 space-y-2">
-            <div className="flex items-center gap-2">
-              <span className="text-sm text-text-primary truncate flex-1 min-w-0">{usage.activeAccountLabel || "Default login"}</span>
-              <span className="text-[10px] uppercase tracking-wide text-text-subtle border border-border rounded px-1">~/.codex</span>
-            </div>
-            <UsageBar label="5-Hour" frac={usage.fiveHour} bucket={usage.session} />
-            <UsageBar label="Weekly" frac={usage.sevenDay} bucket={usage.weekly} />
-          </div>
-          <p className="text-[11px] text-text-subtle">Using your default <code>~/.codex</code> login. Add managed accounts in Settings → AI Provider → Codex.</p>
-        </>
-      )}
+  /* No managed accounts → chats run on the ambient ~/.codex login, whose usage arrives on
+     the session prop rather than from the accounts endpoint. */
+  const ambient = loading && accounts.length === 0 ? (
+    <div className="text-xs text-text-subtle flex items-center gap-2"><Loader2 className="size-3 animate-spin" /> Loading…</div>
+  ) : (
+    <>
+      <AccountCardShell active={false}>
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-text-primary truncate flex-1 min-w-0">{usage.activeAccountLabel || "Default login"}</span>
+          <span className="text-[10px] uppercase tracking-wide text-text-subtle border border-border rounded px-1 shrink-0">~/.codex</span>
+        </div>
+        <div className="space-y-2">
+          <AccountBucketRow label="5-Hour Session" bucket={usage.session} />
+          <AccountBucketRow label="Weekly" bucket={usage.weekly} />
+          {!usage.session && !usage.weekly && <p className="text-xs text-text-subtle">No usage data yet</p>}
+        </div>
+      </AccountCardShell>
+      <p className="text-[11px] text-text-subtle">Using your default <code>~/.codex</code> login. Add managed accounts in Settings → AI Provider → Codex.</p>
+    </>
+  );
 
-      {accounts.map((a) => {
+  return (
+    <UsagePanelShell
+      title="Codex Usage"
+      onClose={onClose}
+      onReload={onReload ? () => void reload() : undefined}
+      reloading={loading}
+      error={panelError}
+      onDismissError={() => setPanelError(null)}
+      cardCount={accounts.length}
+      fallback={ambient}
+    >
+      {(layout) => accounts.map((a) => {
         const u = usages[a.id] ?? {};
-        const isServing = a.id === (selectedAccountId ?? usage.activeAccountId);
-        // Reached, not approaching: an account at 96% still answers, one at 100% does not.
-        const refused = a.status === "disabled"
-          ? "it is switched off."
-          : atCap(u.fiveHour)
-            ? "it has reached its 5-hour limit."
-            : atCap(u.sevenDay)
-              ? "it has reached its weekly limit."
-              : null;
         return (
-          <div
+          <AccountCard
             key={a.id}
-            className={`rounded-md border bg-surface/40 p-2.5 space-y-2 ${isServing ? "border-primary/30 bg-primary/5" : "border-border/50"}`}
-          >
-            <div className="flex items-center gap-2">
-              <span className="text-sm text-text-primary truncate flex-1 min-w-0">{a.label}</span>
-              {isServing && <span className="text-[10px] text-primary shrink-0 font-medium">Active</span>}
-              {/* Same slot as the Active badge, so every card keeps one header row and the
-                  panel does not grow taller just to carry a button. */}
-              {onSelectAccount && !isServing && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      type="button"
-                      onClick={() => select(a.id, a.label, refused)}
-                      disabled={selectingId === a.id}
-                      className={[
-                        "shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors cursor-pointer disabled:cursor-wait",
-                        refused
-                          ? "text-text-subtle hover:text-error hover:bg-error/10"
-                          : "text-text-secondary hover:text-foreground hover:bg-surface-elevated",
-                      ].join(" ")}
-                    >
-                      {selectingId === a.id ? "Switching…" : "Use"}
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">
-                    {refused ? `Cannot use this account — ${refused}` : "Use this account for this chat"}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-              {a.status === "disabled" && <span className="text-[10px] text-text-subtle shrink-0">Off</span>}
-              <span className="text-[10px] uppercase tracking-wide text-text-subtle border border-border rounded px-1">{a.type}</span>
-              {a.planType && <span className="text-[10px] text-text-subtle">{a.planType}</span>}
-              <Switch
-                checked={a.status !== "disabled"}
-                onCheckedChange={() => void toggle(a.id, a.status ?? "active")}
-                disabled={togglingId === a.id}
-                aria-label={a.status === "disabled" ? "Enable account" : "Disable account"}
-                className="cursor-pointer shrink-0"
-              />
-            </div>
-            <UsageBar label="5-Hour" frac={u.fiveHour} bucket={u.session} />
-            <UsageBar label="Weekly" frac={u.sevenDay} bucket={u.weekly} />
-          </div>
+            entry={toEntry(a, u)}
+            // What is serving THIS chat, not what the rotation would pick next —
+            // those differ the moment a session is bound to an account.
+            isActive={a.id === (selectedAccountId ?? usage.activeAccountId)}
+            layout={layout}
+            planLabel={a.planType}
+            onSelect={onSelectAccount ? handleSelect : undefined}
+            unselectableReason={unselectableReason(a, u)}
+            selecting={selectingId === a.id}
+            onToggle={handleToggle}
+            toggling={togglingId === a.id}
+          />
         );
       })}
-    </div>
+    </UsagePanelShell>
   );
 }

package/src/web/components/chat/edit-diff-preview.tsx

@@ -22,16 +22,23 @@ export default function EditDiffPreview({ oldStr, newStr, filePath, maxLines = 1
     [oldStr, newStr, maxLines],
   );
 
+  // The `{ __html }` objects live inside the memo on purpose. React 19 compares that prop by
+  // identity, not by the string inside, so an inline `{{ __html: html }}` re-parses and
+  // rebuilds every line's subtree on every render of this card — and a card re-renders on
+  // each flush of the streaming turn it sits in. Measured at ~20 identical rewrites per line
+  // per turn (tests/e2e/chat-dom-leak-trace.mjs), all of it garbage for the DOM allocator.
   const lines = useMemo(
     () =>
       rows.map((row) => ({
         row,
-        html: renderLine(
-          row.text,
-          language,
-          row.kind === "equal" ? [] : row.ranges,
-          row.kind === "del" ? "bg-diff-removed-word" : "bg-diff-added-word",
-        ),
+        html: {
+          __html: renderLine(
+            row.text,
+            language,
+            row.kind === "equal" ? [] : row.ranges,
+            row.kind === "del" ? "bg-diff-removed-word" : "bg-diff-added-word",
+          ),
+        },
       })),
     [rows, language],
   );
@@ -51,7 +58,7 @@ export default function EditDiffPreview({ oldStr, newStr, filePath, maxLines = 1
             <span className={`select-none shrink-0 w-3 pl-1.5 ${s.gutter}`}>{s.prefix}</span>
             <code
               className="whitespace-pre-wrap break-all text-text-primary pr-1.5"
-              dangerouslySetInnerHTML={{ __html: html }}
+              dangerouslySetInnerHTML={html}
             />
           </div>
         );