@hienlh/ppm 0.20.1 → 0.20.2

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

@@ -0,0 +1,153 @@
+/**
+ * The chrome shared by the chat header's usage panels.
+ *
+ * Both providers' panels answer the same two questions — how much quota is left, and which
+ * account should serve this chat — so they are the same panel with a different source of
+ * accounts behind them. Keeping the frame here is what stops that from drifting: the Codex
+ * panel used to draw its own header and stack its cards vertically, so comparing two
+ * accounts meant scrolling past the first, while the Claude panel had had a sideways strip
+ * and a fullscreen grid for exactly that reason.
+ *
+ * Fullscreen lives here rather than in either caller because the layout it switches to is a
+ * property of the frame, and the cards only need to be told which shape to take.
+ */
+
+import { useState, type ReactNode } from "react";
+import { ExternalLink, Maximize2, Minimize2, RefreshCw, X } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { openSettings } from "@/components/settings/open-settings";
+
+export interface UsagePanelShellProps {
+  title: string;
+  /** A note beside the title — when the numbers were last read, typically. */
+  meta?: ReactNode;
+  onClose: () => void;
+  onReload?: () => void;
+  reloading?: boolean;
+  /** One strip for anything that went wrong in the panel. Two messages in two places
+   *  would be harder to notice, not clearer. */
+  error?: string | null;
+  onDismissError?: () => void;
+  /** How many cards `children` will render. Zero shows `fallback` and hides fullscreen,
+   *  which has nothing to lay out. */
+  cardCount: number;
+  /** The cards, told which shape to take. */
+  children: (layout: "strip" | "grid") => ReactNode;
+  /** Shown in place of the cards when there are none. */
+  fallback?: ReactNode;
+  /** Anything below the cards — costs, hints. Hidden in fullscreen, which is for comparing. */
+  footer?: ReactNode;
+}
+
+export function UsagePanelShell({
+  title, meta, onClose, onReload, reloading, error, onDismissError,
+  cardCount, children, fallback, footer,
+}: UsagePanelShellProps) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  // Roughly square, so the cards fill the viewport instead of leaving a long empty column.
+  const fsCount = cardCount || 1;
+  const fsCols = Math.ceil(Math.sqrt(fsCount));
+  const fsRows = Math.ceil(fsCount / fsCols);
+
+  return (
+    <div
+      className={`relative border-b border-border bg-surface px-3 py-2.5 ${
+        isFullscreen
+          ? "fixed inset-0 z-50 flex flex-col gap-2.5 overflow-hidden"
+          : "space-y-2.5 max-h-[350px] overflow-y-auto"
+      }`}
+    >
+      <div className="flex items-center justify-between shrink-0">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-semibold text-text-primary">{title}</span>
+          {meta}
+        </div>
+        <div className="flex items-center gap-1">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => openSettings("accounts")}
+                className="flex items-center gap-1 text-[10px] text-text-subtle hover:text-text-primary px-1 cursor-pointer"
+              >
+                Manage accounts <ExternalLink className="size-3" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="top">Add, remove or rotate accounts</TooltipContent>
+          </Tooltip>
+          {cardCount > 0 && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => setIsFullscreen((v) => !v)}
+                  className="text-xs text-text-subtle hover:text-text-primary px-1 cursor-pointer"
+                  aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen view"}
+                >
+                  {isFullscreen ? <Minimize2 className="size-3" /> : <Maximize2 className="size-3" />}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top">{isFullscreen ? "Exit fullscreen" : "Fullscreen view"}</TooltipContent>
+            </Tooltip>
+          )}
+          {onReload && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={onReload}
+                  disabled={reloading}
+                  className="text-xs text-text-subtle hover:text-text-primary px-1 disabled:opacity-50 cursor-pointer"
+                  aria-label="Refresh usage"
+                >
+                  <RefreshCw className={`size-3 ${reloading ? "animate-spin" : ""}`} />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top">Refresh</TooltipContent>
+            </Tooltip>
+          )}
+          <button
+            onClick={() => { setIsFullscreen(false); onClose(); }}
+            className="text-xs text-text-subtle hover:text-text-primary px-1 cursor-pointer"
+            aria-label="Close usage panel"
+          >
+            <X className="size-3" />
+          </button>
+        </div>
+      </div>
+
+      {/* The server distinguishes a login it rejected from a provider it could not reach, and
+          the difference decides what the user should do. Showing its words verbatim is the
+          only way that survives to them. */}
+      {error && (
+        <div className="shrink-0 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">{error}</span>
+          {onDismissError && (
+            <button
+              onClick={onDismissError}
+              className="shrink-0 text-error/70 hover:text-error cursor-pointer"
+              aria-label="Dismiss"
+            >
+              <X className="size-3" />
+            </button>
+          )}
+        </div>
+      )}
+
+      {cardCount > 0 ? (
+        <div
+          className={isFullscreen
+            ? "flex-1 min-h-0 grid gap-2 overflow-hidden"
+            // Same classes as AccountCardRow, with the panel's wider padding to clear.
+            : "flex gap-2 overflow-x-auto pb-1 -mx-3 px-3 snap-x snap-mandatory scrollbar-thin"}
+          style={isFullscreen ? {
+            gridTemplateColumns: `repeat(${fsCols}, minmax(0, 1fr))`,
+            gridTemplateRows: `repeat(${fsRows}, minmax(0, 1fr))`,
+          } : undefined}
+        >
+          {children(isFullscreen ? "grid" : "strip")}
+        </div>
+      ) : fallback}
+
+      {footer && !isFullscreen && footer}
+    </div>
+  );
+}

package/src/web/components/settings/accounts/account-card.tsx

@@ -51,6 +51,10 @@ export interface AccountCardProps {
   /** `list` fills the width, `strip` is a fixed-width card in a sideways scroller, `grid`
    *  fills a cell of the fullscreen grid. */
   layout?: "list" | "strip" | "grid";
+  /** The subscription tier this account is on, when the provider reports one. Codex names
+   *  a plan ("plus", "team") and that decides which quota windows the account even has, so
+   *  it belongs on the card; Claude reports none and the badge simply does not appear. */
+  planLabel?: string | null;
 }
 
 // Fixed widths so a row scrolls instead of squeezing. Two of them: a read-only card holds a
@@ -60,7 +64,7 @@ const STRIP_WIDTH = { readOnly: "min-w-[220px]", withActions: "min-w-[300px]" }
 
 export function AccountCard({
   entry, isActive, accountInfo, onToggle, toggling, onDelete, onExport, onViewProfile, flash,
-  onSelect, unselectableReason, selecting,
+  onSelect, unselectableReason, selecting, planLabel,
   layout = "list",
 }: AccountCardProps) {
   const { usage } = entry;
@@ -83,8 +87,13 @@ export function AccountCard({
   // restates what the sign-in chip beside it implies. That leaves the two states nothing
   // else announces: a temporary token with no way to renew, and one that has lapsed but
   // still has a refresh token behind it.
-  const showTokenStatus = ts.label === "temp" || ts.label === "unknown"
-    || (ts.label === "expired" && !isExpired && !needsReauth);
+  //
+  // Gated on there being an `accountInfo` at all. Without one `tokenStatus` reports
+  // "unknown", which reads as a warning about this account's token — and a Codex card has
+  // no token to warn about, because its credentials live in a CODEX_HOME the server
+  // authenticates against rather than in a grant with an expiry.
+  const showTokenStatus = !!accountInfo && (ts.label === "temp" || ts.label === "unknown"
+    || (ts.label === "expired" && !isExpired && !needsReauth));
   const grantExpiresOn = grantExpiresAtMs
     ? new Date(grantExpiresAtMs).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })
     : null;
@@ -173,6 +182,14 @@ export function AccountCard({
             API key
           </AccountHint>
         )}
+        {planLabel && (
+          <AccountHint
+            className="text-[10px] uppercase tracking-wide text-text-subtle shrink-0"
+            hint="The subscription this account is on. It decides which quota windows the account has — some plans have a weekly limit and no shorter one."
+          >
+            {planLabel}
+          </AccountHint>
+        )}
 
         <div className="flex items-center gap-0.5 shrink-0">
           {!isExpired && onViewProfile && accountInfo?.profileData && (

package/src/web/components/settings/accounts/codex-accounts-section.tsx

@@ -19,7 +19,7 @@ import { CodexUsageRows } from "./codex-usage-rows";
 import { useCodexAccounts } from "./use-codex-accounts";
 
 /** Codex multi-account management, separate from Claude accounts because codex auth is owned
- *  by the app-server per CODEX_HOME. Added by API key or ChatGPT device code. */
+ *  by the app-server per CODEX_HOME. Added by API key, browser login, or ChatGPT device code. */
 export function CodexAccountsSection() {
   const [dialog, setDialog] = useState<"add" | "export" | "import" | "rotation" | null>(null);
   const c = useCodexAccounts(() => setDialog(null));
@@ -120,7 +120,7 @@ export function CodexAccountsSection() {
 
       <CodexAddAccountDialog
         open={dialog === "add"}
-        onOpenChange={(v) => setDialog(v ? "add" : null)}
+        onOpenChange={(v) => { if (!v) c.cancelLogin(); setDialog(v ? "add" : null); }}
         label={c.label}
         onLabelChange={c.setLabel}
         apiKey={c.apiKey}
@@ -130,6 +130,13 @@ export function CodexAccountsSection() {
         deviceWaiting={c.deviceWaiting}
         onStartDevice={() => void c.startDevice()}
         device={c.device}
+        browser={c.browser}
+        onStartBrowser={() => void c.startBrowser()}
+        loginStarting={c.loginStarting}
+        callbackUrl={c.callbackUrl}
+        onCallbackUrlChange={c.setCallbackUrl}
+        submittingCallback={c.submittingCallback}
+        onSubmitCallback={() => void c.submitCallback()}
         error={c.err}
       />
       <CodexBackupDialog

package/src/web/components/settings/accounts/codex-add-account-dialog.tsx

@@ -1,13 +1,4 @@
-/**
- * Add a Codex account: sign in with ChatGPT, or paste an API key.
- *
- * Presentational only — every piece of state and each handler stays in the pane. The
- * device-code login owns a server-side app-server that has to be released if the user walks
- * away, and the pane's unmount effect is what does that; moving the flow's state in here
- * would tie that release to closing a dialog instead.
- *
- * Mirrors the Claude add dialog: recommended sign-in first, divider, manual key below.
- */
+/** Add a Codex account through browser login, device code, or an API key. */
 
 import { ExternalLink, KeyRound, Loader2, MonitorSmartphone } from "lucide-react";
 import {
@@ -25,6 +16,7 @@ export interface CodexDevicePrompt {
 export function CodexAddAccountDialog({
   open, onOpenChange, label, onLabelChange, apiKey, onApiKeyChange,
   adding, onAddApiKey, deviceWaiting, onStartDevice, device, error,
+  browser, onStartBrowser, loginStarting, callbackUrl, onCallbackUrlChange, submittingCallback, onSubmitCallback,
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -38,29 +30,66 @@ export function CodexAddAccountDialog({
   onStartDevice: () => void;
   device: CodexDevicePrompt | null;
   error: string | null;
+  browser: { authUrl: string } | null;
+  onStartBrowser: () => void;
+  loginStarting: boolean;
+  callbackUrl: string;
+  onCallbackUrlChange: (value: string) => void;
+  submittingCallback: boolean;
+  onSubmitCallback: () => void;
 }) {
+  const loginBusy = loginStarting || deviceWaiting || !!browser || adding;
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
+      <DialogContent className="sm:max-w-md max-h-[90dvh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle className="text-sm">Add Codex Account</DialogTitle>
           <DialogDescription className="text-xs leading-relaxed">
-            Each account keeps its own login (its own <code>CODEX_HOME</code>).
+            Choose browser login, a device code, or an OpenAI API key.
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-3">
+          <div className="space-y-1.5">
+            <Label htmlFor="codex-label" className="text-xs">Label (optional)</Label>
+            <Input id="codex-label" placeholder="e.g. Personal, Work" value={label}
+              onChange={(e) => onLabelChange(e.target.value)} disabled={loginBusy} className="text-xs" />
+          </div>
+          <div className="rounded-md border p-3 space-y-2">
+            <p className="text-[11px] font-medium">Browser login</p>
+            <Button size="sm" className="w-full cursor-pointer gap-1.5" onClick={onStartBrowser} disabled={loginBusy}>
+              <ExternalLink className="size-4" /> Sign in with browser
+            </Button>
+            {browser && (
+              <div className="space-y-2 text-xs">
+                <a href={browser.authUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 text-primary hover:underline">
+                  <ExternalLink className="size-3" /> Open ChatGPT sign-in
+                </a>
+                <p>Sign in, then copy the full localhost callback URL from the address bar and paste it below. On a phone, copy it even if the page fails to load.</p>
+                <Label htmlFor="codex-callback-url">Callback URL</Label>
+                <Input id="codex-callback-url" type="password" autoComplete="off" spellCheck={false}
+                  placeholder="http://localhost:.../auth/callback?..." value={callbackUrl}
+                  onChange={(e) => onCallbackUrlChange(e.target.value)} disabled={submittingCallback} />
+                <Button size="sm" onClick={onSubmitCallback} disabled={!callbackUrl.trim() || submittingCallback}>
+                  {submittingCallback && <Loader2 className="size-3 animate-spin" />} Submit callback URL
+                </Button>
+                <p role="status" className="flex items-center gap-1.5 text-muted-foreground">
+                  <Loader2 className="size-3 animate-spin" /> Waiting for authorization. This may complete automatically on this computer.
+                </p>
+              </div>
+            )}
+          </div>
           <div className="rounded-md border p-3 space-y-2">
-            <p className="text-[11px] font-medium">Recommended: sign in with ChatGPT</p>
+            <p className="text-[11px] font-medium">Device code</p>
             <Button
               size="sm"
               className="w-full cursor-pointer gap-1.5"
               onClick={onStartDevice}
-              disabled={deviceWaiting}
+              disabled={loginBusy}
             >
               {deviceWaiting
                 ? <><Loader2 className="size-4 animate-spin" /> Waiting for authorization...</>
-                : <><MonitorSmartphone className="size-4" /> Sign in with ChatGPT</>}
+                : <><MonitorSmartphone className="size-4" /> Sign in with device code</>}
             </Button>
 
             {device && (
@@ -96,19 +125,10 @@ export function CodexAddAccountDialog({
               className="text-xs font-mono"
             />
           </div>
-          <div className="space-y-1.5">
-            <Label htmlFor="codex-label" className="text-xs">Label (optional)</Label>
-            <Input
-              id="codex-label"
-              placeholder="e.g. Personal, Work"
-              value={label}
-              onChange={(e) => onLabelChange(e.target.value)}
-              className="text-xs"
-            />
-          </div>
         </div>
 
-        {error && <div className="text-[11px] p-2 rounded bg-error/10 text-error">{error}</div>}
+        {loginStarting && <p role="status" className="text-xs">Starting login...</p>}
+        {error && <div role="alert" className="text-[11px] p-2 rounded bg-error/10 text-error">{error}</div>}
 
         <DialogFooter>
           <Button size="sm" variant="outline" className="text-xs cursor-pointer" onClick={() => onOpenChange(false)}>
@@ -118,7 +138,7 @@ export function CodexAddAccountDialog({
             size="sm"
             className="text-xs cursor-pointer gap-1.5"
             onClick={onAddApiKey}
-            disabled={!apiKey.trim() || adding}
+            disabled={!apiKey.trim() || loginBusy}
           >
             {adding ? <Loader2 className="size-3.5 animate-spin" /> : <KeyRound className="size-3.5" />}
             Add key

package/src/web/components/settings/accounts/codex-usage-rows.tsx

@@ -1,12 +1,17 @@
 /**
- * The two quota rows of a Codex account card.
+ * The quota rows of a Codex account card.
  *
  * Split out so the wiring is testable on its own: the reset clock is the part that keeps
  * getting dropped, because the percentages render fine without it.
  *
- * Unlike the Claude card's `AccountBucketRow`, a row here stays on screen with an em dash
- * when the quota read failed instead of disappearing — a card that silently loses half its
- * height reads as a broken account rather than as missing data.
+ * Which rows appear follows what the account reports, because not every plan has the same
+ * windows. A Plus account has a 5-hour quota and a weekly one; a ChatGPT Business account
+ * has the weekly quota alone, and drawing an empty "5-Hour" row for it claimed a limit that
+ * does not exist.
+ *
+ * A read that returned nothing at all is a different thing, and still shows both rows with
+ * an em dash: a card that silently loses all its height reads as a broken account rather
+ * than as missing data.
  */
 
 import { AccountUsageBar } from "./account-bucket-row";
@@ -17,10 +22,16 @@ import type { Usage } from "./use-codex-accounts";
 function toPct(v?: number): number | null { return v != null ? Math.round(v * 100) : null; }
 
 export function CodexUsageRows({ usage }: { usage: Usage }) {
+  // Nothing was read — show the shape of the answer rather than an empty card.
+  const unread = usage.session == null && usage.weekly == null;
   return (
     <div className="space-y-2">
-      <AccountUsageBar label="5-Hour Session" pct={toPct(usage.fiveHour)} reset={formatResetTime(usage.session)} resetsAt={usage.session?.resetsAt} />
-      <AccountUsageBar label="Weekly" pct={toPct(usage.sevenDay)} reset={formatResetTime(usage.weekly)} resetsAt={usage.weekly?.resetsAt} />
+      {(unread || usage.session != null) && (
+        <AccountUsageBar label="5-Hour Session" pct={toPct(usage.fiveHour)} reset={formatResetTime(usage.session)} resetsAt={usage.session?.resetsAt} />
+      )}
+      {(unread || usage.weekly != null) && (
+        <AccountUsageBar label="Weekly" pct={toPct(usage.sevenDay)} reset={formatResetTime(usage.weekly)} resetsAt={usage.weekly?.resetsAt} />
+      )}
     </div>
   );
 }

package/src/web/components/settings/accounts/use-codex-accounts.ts

@@ -1,13 +1,4 @@
-/**
- * State and requests for the Codex accounts pane.
- *
- * Split from the pane the way `use-accounts-data` is on the Claude side, so both panes are
- * render-only and the two providers stay comparable.
- *
- * The device-code login is the reason the cleanup here matters: it holds a server-side
- * app-server until it resolves, so leaving the pane has to release it rather than let it age
- * out. That cleanup belongs to the pane's lifetime, not to a dialog being closed.
- */
+/** State and requests for the Codex accounts pane, including cancellable login flows. */
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { api, getAuthToken } from "@/lib/api-client";
@@ -28,6 +19,8 @@ export interface Usage {
   weekly?: LimitBucket;
 }
 interface DevicePending { id: string; userCode: string; verificationUrl: string }
+interface BrowserPending { id: string; authUrl: string }
+type LoginMethod = "device" | "browser";
 type DeviceStatus = { state: "pending" } | { state: "done" } | { state: "error"; error: string };
 
 /** Gap between status polls. Each poll answers immediately, so a request lost to
@@ -48,13 +41,23 @@ export function useCodexAccounts(onDone: () => void) {
   const [err, setErr] = useState<string | null>(null);
   const [device, setDevice] = useState<DevicePending | null>(null);
   const [deviceWaiting, setDeviceWaiting] = useState(false);
+  const [browser, setBrowser] = useState<BrowserPending | null>(null);
+  const [loginStarting, setLoginStarting] = useState(false);
+  const [callbackUrl, setCallbackUrl] = useState("");
+  const [submittingCallback, setSubmittingCallback] = useState(false);
   const [backupPassword, setBackupPassword] = useState("");
   const [exporting, setExporting] = useState(false);
   const [importing, setImporting] = useState(false);
   const [msg, setMsg] = useState<string | null>(null);
   const stopPollRef = useRef<(() => void) | null>(null);
   /** Id of the login still owed a result, so unmount can release it. */
-  const devicePendingIdRef = useRef<string | null>(null);
+  const pendingLoginRef = useRef<{ id: string; method: LoginMethod } | null>(null);
+  const loginGenerationRef = useRef(0);
+  const startingRef = useRef(false);
+  const addingRef = useRef(false);
+  const submittingRef = useRef(false);
+  const onDoneRef = useRef(onDone);
+  onDoneRef.current = onDone;
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -68,53 +71,95 @@ export function useCodexAccounts(onDone: () => void) {
   useEffect(() => { load(); }, [load]);
 
   const addApiKey = async () => {
-    if (!apiKey.trim()) return;
+    if (!apiKey.trim() || addingRef.current || startingRef.current || pendingLoginRef.current) return;
+    addingRef.current = true;
     setAdding(true); setErr(null);
     try {
       await api.post("/api/codex-accounts/api-key", { apiKey: apiKey.trim(), label: label.trim() || undefined });
       setApiKey(""); setLabel(""); onDone(); await load();
-    } catch (e) { setErr((e as Error).message); } finally { setAdding(false); }
+    } catch (e) { setErr((e as Error).message); } finally { addingRef.current = false; setAdding(false); }
   };
 
-  const pollDevice = useCallback((id: string) => {
-    const deadline = Date.now() + DEVICE_POLL_DEADLINE_MS;
+  const releaseLogin = useCallback(() => {
+    loginGenerationRef.current += 1;
+    startingRef.current = false;
+    submittingRef.current = false;
+    stopPollRef.current?.();
+    stopPollRef.current = null;
+    const pending = pendingLoginRef.current;
+    pendingLoginRef.current = null;
+    if (pending) void api.del(`/api/codex-accounts/${pending.method}-login/${pending.id}`).catch(() => {});
+  }, []);
+
+  const cancelLogin = useCallback(() => {
+    releaseLogin();
+    setDevice(null); setDeviceWaiting(false); setBrowser(null);
+    setLoginStarting(false); setCallbackUrl(""); setSubmittingCallback(false);
+  }, [releaseLogin]);
+
+  const pollLogin = useCallback((id: string, method: LoginMethod) => {
+    const deadline = Date.now() + (method === "browser" ? 610_000 : DEVICE_POLL_DEADLINE_MS);
     let stopped = false;
-    stopPollRef.current = () => { stopped = true; };
-    const finish = (message?: string) => {
-      stopped = true; stopPollRef.current = null; devicePendingIdRef.current = null;
-      if (message) setErr(message);
-      setDevice(null); setDeviceWaiting(false);
-    };
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    stopPollRef.current = () => { stopped = true; clearTimeout(timer); };
     const tick = async () => {
       if (stopped) return;
-      let s: DeviceStatus | null = null;
-      // A failed poll is not a failed login — the outcome is held server-side,
-      // so keep asking until the deadline instead of aborting the flow.
-      try { s = await api.get<DeviceStatus>(`/api/codex-accounts/device-login/${id}/status`); } catch { /* retry */ }
+      let status: DeviceStatus | null = null;
+      // Transient network failures must not discard an authorization in progress.
+      try { status = await api.get<DeviceStatus>(`/api/codex-accounts/${method}-login/${id}/status`); } catch { /* retry */ }
       if (stopped) return;
-      if (s?.state === "done") { finish(); setLabel(""); onDone(); await load(); return; }
-      if (s?.state === "error") { finish(s.error); return; }
-      if (Date.now() > deadline) { finish("Device login timed out."); return; }
-      setTimeout(tick, DEVICE_POLL_MS);
+      if (status?.state === "done") {
+        cancelLogin(); setLabel(""); onDoneRef.current(); await load(); return;
+      }
+      if (status?.state === "error" || Date.now() > deadline) {
+        cancelLogin();
+        setErr(status?.state === "error" ? status.error : `${method === "browser" ? "Browser" : "Device"} login timed out.`);
+        return;
+      }
+      timer = setTimeout(tick, DEVICE_POLL_MS);
     };
     void tick();
-  }, [load]);
+  }, [cancelLogin, load]);
 
-  // Abandoning the panel mid-login stops the polling and releases the
-  // server-side app-server instead of leaving it to age out.
-  useEffect(() => () => {
-    stopPollRef.current?.();
-    const id = devicePendingIdRef.current;
-    if (id) api.del(`/api/codex-accounts/device-login/${id}`).catch(() => {});
-  }, []);
+  useEffect(() => releaseLogin, [releaseLogin]);
 
-  const startDevice = async () => {
-    setErr(null);
+  const startLogin = async (method: LoginMethod) => {
+    if (startingRef.current || pendingLoginRef.current || addingRef.current) return;
+    startingRef.current = true;
+    const generation = ++loginGenerationRef.current;
+    setLoginStarting(true); setErr(null);
     try {
-      const d = await api.post<DevicePending>("/api/codex-accounts/device-login", { label: label.trim() || undefined });
-      setDevice(d); setDeviceWaiting(true); devicePendingIdRef.current = d.id;
-      pollDevice(d.id);
-    } catch (e) { setErr((e as Error).message); }
+      const result = await api.post<DevicePending | BrowserPending>(`/api/codex-accounts/${method}-login`, { label: label.trim() || undefined });
+      // Closing the dialog while startup is in flight still owes the server a cancel.
+      if (generation !== loginGenerationRef.current) {
+        void api.del(`/api/codex-accounts/${method}-login/${result.id}`).catch(() => {});
+        return;
+      }
+      pendingLoginRef.current = { id: result.id, method };
+      if (method === "device") { setDevice(result as DevicePending); setDeviceWaiting(true); }
+      else setBrowser(result as BrowserPending);
+      pollLogin(result.id, method);
+    } catch (e) {
+      if (generation === loginGenerationRef.current) setErr((e as Error).message);
+    } finally {
+      if (generation === loginGenerationRef.current) { startingRef.current = false; setLoginStarting(false); }
+    }
+  };
+
+  const submitCallback = async () => {
+    const pending = pendingLoginRef.current;
+    if (pending?.method !== "browser" || !callbackUrl.trim() || submittingRef.current) return;
+    const generation = loginGenerationRef.current;
+    submittingRef.current = true; setSubmittingCallback(true); setErr(null);
+    const submittedUrl = callbackUrl.trim();
+    setCallbackUrl("");
+    try {
+      await api.post(`/api/codex-accounts/browser-login/${pending.id}/callback`, { callbackUrl: submittedUrl });
+    } catch (e) {
+      if (generation === loginGenerationRef.current) setErr((e as Error).message);
+    } finally {
+      if (generation === loginGenerationRef.current) { submittingRef.current = false; setSubmittingCallback(false); }
+    }
   };
 
   const remove = async (id: string) => { await api.del(`/api/codex-accounts/${id}`); await load(); };
@@ -179,6 +224,7 @@ export function useCodexAccounts(onDone: () => void) {
     err, setErr, device, deviceWaiting, backupPassword, setBackupPassword,
     exporting, importing, msg, setMsg,
     toggling,
-    load, addApiKey, startDevice, remove, toggle, changeStrategy, doExport, doImport,
+    load, addApiKey, startDevice: () => startLogin("device"), startBrowser: () => startLogin("browser"),
+    browser, loginStarting, callbackUrl, setCallbackUrl, submittingCallback, submitCallback, cancelLogin, remove, toggle, changeStrategy, doExport, doImport,
   };
 }

package/src/web/components/ui/tooltip.tsx

@@ -19,10 +19,23 @@ function TooltipProvider({
   )
 }
 
+/**
+ * Carries its own provider, so a tooltip works wherever it is rendered.
+ *
+ * Radix throws outright — not a warning, a thrown error — when a Tooltip has no provider
+ * above it. That made any component holding one unrenderable outside the app shell: three
+ * component tests went red the moment a shared usage bar gained a tooltip, and nothing about
+ * the failure pointed at the tooltip. Nesting is cheap and supported; an outer provider still
+ * governs timing for everything beneath it.
+ */
 function Tooltip({
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
 }
 
 function TooltipTrigger({

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

@@ -10,6 +10,16 @@ interface UseUsageReturn {
   /** ISO timestamp from BE — when usage was actually fetched. */
   lastFetchedAt: string | null;
   refreshUsage: () => void;
+  /**
+   * Re-read without forcing the provider to go back to its source.
+   *
+   * For the caller that has just changed WHICH account this session reports on, rather than
+   * wanting fresher numbers for the same one. The new account's quota is already cached —
+   * it is what the account panel was showing a moment ago — so `refresh=1` would drop every
+   * account's cached value and re-read them all to display one figure that was already
+   * known.
+   */
+  reloadUsage: () => void;
 }
 
 /**
@@ -61,8 +71,10 @@ export function useUsage(projectName: string, providerId = "claude", sessionId?:
 
   /** Manual refresh — asks BE for fresh usage. */
   const refreshUsage = useCallback(() => doFetch(true), [doFetch]);
+  /** Re-read the cached value, for when the session's account changed underneath it. */
+  const reloadUsage = useCallback(() => doFetch(), [doFetch]);
 
   // Hide the previous scope synchronously, before the new effect runs.
   const current = snapshot?.scope === scope ? snapshot : null;
-  return { usageInfo: current?.usage ?? {}, usageLoading, lastFetchedAt: current?.fetchedAt ?? null, refreshUsage };
+  return { usageInfo: current?.usage ?? {}, usageLoading, lastFetchedAt: current?.fetchedAt ?? null, refreshUsage, reloadUsage };
 }