@hienlh/ppm 0.20.0 → 0.20.2

package/src/web/components/chat/usage-badge.tsx

@@ -17,14 +17,14 @@
  */
 
 import { useState } from "react";
-import { Activity, ExternalLink, Maximize2, Minimize2, RefreshCw, X } from "lucide-react";
+import { Activity, RefreshCw } from "lucide-react";
 import type { UsageInfo } from "../../../types/chat";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { openSettings } from "@/components/settings/open-settings";
 import { AccountCard } from "@/components/settings/accounts/account-card";
 import { AccountBucketRow } from "@/components/settings/accounts/account-bucket-row";
 import { useAccountsData } from "@/components/settings/accounts/use-accounts-data";
 import { formatLastUpdated, formatResetTime, pctColor } from "@/components/settings/accounts/account-usage-format";
+import { UsagePanelShell } from "./usage-panel-shell";
 
 /** Matches the whole-percent figure the usage bars show, so a refusal agrees with the card. */
 function atCap(util: number | null | undefined): boolean {
@@ -91,7 +91,6 @@ export function UsageDetailPanel({
   // One strip for anything that went wrong in this panel — a refused switch or a refused
   // toggle. Two separate messages in two places would be harder to notice, not clearer.
   const [panelError, setPanelError] = useState<string | null>(null);
-  const [isFullscreen, setIsFullscreen] = useState(false);
 
   if (!visible) return null;
 
@@ -158,131 +157,21 @@ export function UsageDetailPanel({
   }
 
   const hasCost = usage.queryCostUsd != null || usage.totalCostUsd != null;
-  const hasPerAccountUsage = usages.length > 0;
-
-  // Roughly square, so the cards fill the viewport instead of leaving a long empty column.
-  const fsCount = usages.length || 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">Usage</span>
-          {lastFetchedAt && (
-            <span className="text-[10px] text-text-subtle">{formatLastUpdated(new Date(lastFetchedAt).getTime())}</span>
-          )}
-        </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>
-          {hasPerAccountUsage && (
-            <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(); void reload(); }}
-                  disabled={loading || refreshing}
-                  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 ${(loading || refreshing) ? "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 "this login was rejected, sign in again" from "could not
-          reach Anthropic, try shortly", and the difference decides what the user should do.
-          Showing its words verbatim is the only way that survives to them. */}
-      {panelError && (
-        <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">{panelError}</span>
-          <button
-            onClick={() => setPanelError(null)}
-            className="shrink-0 text-error/70 hover:text-error cursor-pointer"
-            aria-label="Dismiss"
-          >
-            <X className="size-3" />
-          </button>
-        </div>
+    <UsagePanelShell
+      title="Usage"
+      meta={lastFetchedAt && (
+        <span className="text-[10px] text-text-subtle">{formatLastUpdated(new Date(lastFetchedAt).getTime())}</span>
       )}
-
-      {hasPerAccountUsage || initialLoading ? (
-        <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}
-        >
-          {initialLoading ? (
-            <p className="text-[10px] text-text-subtle">Loading...</p>
-          ) : (
-            usages.map((entry) => {
-              const info = accountMap.get(entry.accountId);
-              return (
-                <AccountCard
-                  key={entry.accountId}
-                  entry={entry}
-                  // What is serving THIS chat, not what the rotation would pick next —
-                  // those differ the moment a session is bound to an account.
-                  isActive={entry.accountId === (selectedAccountId ?? usage.activeAccountId ?? activeAccountId)}
-                  accountInfo={info}
-                  flash={flashIds.has(entry.accountId)}
-                  layout={isFullscreen ? "grid" : "strip"}
-                  onSelect={onSelectAccount ? handleSelect : undefined}
-                  unselectableReason={unselectableReason(info, entry)}
-                  selecting={selectingId === entry.accountId}
-                  onToggle={handleToggle}
-                  toggling={togglingId === entry.accountId}
-                />
-              );
-            })
-          )}
-        </div>
+      onClose={onClose}
+      onReload={onReload ? () => { onReload(); void reload(); } : undefined}
+      reloading={loading || refreshing}
+      error={panelError}
+      onDismissError={() => setPanelError(null)}
+      cardCount={usages.length}
+      fallback={initialLoading ? (
+        <p className="text-[10px] text-text-subtle">Loading...</p>
       ) : usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet ? (
         <div className="space-y-2.5">
           <AccountBucketRow label="5-Hour Session" bucket={usage.session} />
@@ -293,8 +182,7 @@ export function UsageDetailPanel({
       ) : (
         <p className="text-xs text-text-subtle">No usage data available</p>
       )}
-
-      {hasCost && (
+      footer={hasCost ? (
         <div className="border-t border-border pt-2 space-y-1">
           {usage.queryCostUsd != null && (
             <div className="flex items-center justify-between text-xs">
@@ -313,7 +201,28 @@ export function UsageDetailPanel({
             </div>
           )}
         </div>
-      )}
-    </div>
+      ) : undefined}
+    >
+      {(layout) => usages.map((entry) => {
+        const info = accountMap.get(entry.accountId);
+        return (
+          <AccountCard
+            key={entry.accountId}
+            entry={entry}
+            // What is serving THIS chat, not what the rotation would pick next —
+            // those differ the moment a session is bound to an account.
+            isActive={entry.accountId === (selectedAccountId ?? usage.activeAccountId ?? activeAccountId)}
+            accountInfo={info}
+            flash={flashIds.has(entry.accountId)}
+            layout={layout}
+            onSelect={onSelectAccount ? handleSelect : undefined}
+            unselectableReason={unselectableReason(info, entry)}
+            selecting={selectingId === entry.accountId}
+            onToggle={handleToggle}
+            toggling={togglingId === entry.accountId}
+          />
+        );
+      })}
+    </UsagePanelShell>
   );
 }

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>
   );
 }