@hienlh/ppm 0.23.1 → 0.23.2

package/src/services/proxy-agent-turn.ts

@@ -34,6 +34,54 @@ const PROXY_PERMISSION_MODE = "plan";
 const FIRST_EVENT_TIMEOUT_MS = 90_000;
 const IDLE_TIMEOUT_MS = 300_000;
 
+/**
+ * How many proxy turns may run at once, across every provider and dialect.
+ *
+ * Every turn is its own agent subprocess (codex: `bun x @openai/codex app-server`), and a
+ * client that retries on failure multiplies them: a batch script at concurrency 4 against
+ * a signed-out account kept a dozen app-servers starting and failing at once, and the
+ * server stopped answering its own health check until the supervisor killed it, over and
+ * over. Past this many, a request is refused at once with 429 + Retry-After — which every
+ * OpenAI/Anthropic SDK already backs off on — instead of queueing more subprocesses.
+ */
+export const MAX_CONCURRENT_PROXY_TURNS = 4;
+const BUSY_RETRY_AFTER_S = 5;
+let activeProxyTurns = 0;
+
+/** Refused because {@link MAX_CONCURRENT_PROXY_TURNS} turns are already running. */
+export class ProxyBusyError extends Error {}
+
+/** Current number of running proxy turns (for tests and diagnostics). */
+export function activeProxyTurnCount(): number {
+  return activeProxyTurns;
+}
+
+/** Take a turn slot, or throw {@link ProxyBusyError}. The returned release is idempotent. */
+function acquireTurnSlot(): () => void {
+  if (activeProxyTurns >= MAX_CONCURRENT_PROXY_TURNS) {
+    throw new ProxyBusyError(`Proxy busy: ${MAX_CONCURRENT_PROXY_TURNS} requests are already running. Retry in ${BUSY_RETRY_AFTER_S}s.`);
+  }
+  activeProxyTurns++;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    activeProxyTurns--;
+  };
+}
+
+/**
+ * The error response for a turn that could not run, in the caller's dialect.
+ * A busy refusal is a 429 with Retry-After so SDKs back off; anything else is a 502.
+ */
+export function turnFailureResponse(e: unknown, render: (status: number, message: string) => Response): Response {
+  const message = (e as Error)?.message ?? String(e);
+  if (!(e instanceof ProxyBusyError)) return render(502, message);
+  const res = render(429, message);
+  res.headers.set("Retry-After", String(BUSY_RETRY_AFTER_S));
+  return res;
+}
+
 /** Providers that exist in the registry but must never be exposed over HTTP. */
 const NOT_PROXYABLE = new Set(["mock"]);
 
@@ -133,26 +181,38 @@ export async function startAgentTurn(providerId: string, req: TurnRequest): Prom
   // instructions lead the turn instead.
   const message = req.systemPrompt ? `${req.systemPrompt}\n\n${req.prompt}` : req.prompt;
 
-  const session = await provider.createSession({
-    projectPath: proxyWorkspace(),
-    title: `[API] ${providerId}`,
-  });
-
-  const events = provider.sendMessage(session.id, message, {
-    permissionMode: PROXY_PERMISSION_MODE,
-    ...(req.model ? { model: req.model } : {}),
-    ...(req.imagePaths?.length ? { imagePaths: req.imagePaths } : {}),
-  });
-
-  return {
-    events: withTimeout(events),
-    cleanup: async () => {
-      // abortQuery is what kills the runtime; deleteSession alone may only drop
-      // the record, depending on the provider.
-      try { provider.abortQuery?.(session.id, "proxy"); } catch { /* best effort */ }
-      try { await provider.deleteSession(session.id); } catch { /* best effort */ }
-    },
-  };
+  // Held until cleanup, which every caller runs on every path — including a streaming
+  // response whose body outlives this function.
+  const release = acquireTurnSlot();
+  try {
+    const session = await provider.createSession({
+      projectPath: proxyWorkspace(),
+      title: `[API] ${providerId}`,
+    });
+
+    const events = provider.sendMessage(session.id, message, {
+      permissionMode: PROXY_PERMISSION_MODE,
+      ...(req.model ? { model: req.model } : {}),
+      ...(req.imagePaths?.length ? { imagePaths: req.imagePaths } : {}),
+    });
+
+    return {
+      events: withTimeout(events),
+      cleanup: async () => {
+        try {
+          // abortQuery is what kills the runtime; deleteSession alone may only drop
+          // the record, depending on the provider.
+          try { provider.abortQuery?.(session.id, "proxy"); } catch { /* best effort */ }
+          try { await provider.deleteSession(session.id); } catch { /* best effort */ }
+        } finally {
+          release();
+        }
+      },
+    };
+  } catch (e) {
+    release();
+    throw e;
+  }
 }
 
 /** `<provider>/v1/models` in OpenAI's list shape, so clients can discover models. */

package/src/services/proxy-image-bridge.ts

@@ -21,7 +21,7 @@ import { mkdtempSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, wr
 import { tmpdir } from "node:os";
 import { join, extname } from "node:path";
 import { resolveCodexAccountForSession } from "./codex-account.service.ts";
-import { startAgentTurn, resolveProvider } from "./proxy-agent-turn.ts";
+import { startAgentTurn, resolveProvider, turnFailureResponse } from "./proxy-agent-turn.ts";
 import { openAiError } from "./proxy-openai-format.ts";
 
 /** Providers whose agent can actually produce an image. */
@@ -149,7 +149,7 @@ export async function forwardImageGeneration(providerId: string, body: ImageGene
     const produced = await runImageTurn(providerId, generationPrompt(body), body.model, []);
     return imagesResponse(produced.slice(0, Math.min(Math.max(body.n ?? 1, 1), 4)));
   } catch (e) {
-    return openAiError(502, (e as Error).message);
+    return turnFailureResponse(e, openAiError);
   }
 }
 
@@ -179,7 +179,7 @@ export async function forwardImageEdit(providerId: string, body: ImageEditBody):
     const produced = await runImageTurn(providerId, prompt, body.model, [path]);
     return imagesResponse(produced.slice(0, Math.min(Math.max(body.n ?? 1, 1), 4)));
   } catch (e) {
-    return openAiError(502, (e as Error).message);
+    return turnFailureResponse(e, openAiError);
   } finally {
     try { rmSync(dir, { recursive: true, force: true }); } catch { /* best effort */ }
   }

package/src/services/proxy.service.ts

@@ -198,7 +198,7 @@ class ProxyService {
     insertProxyRequest({
       endpoint, model: parsed.model, accountLabel: providerId,
       callerIp: caller?.callerIp, callerUa: caller?.callerUa,
-      status: response.ok ? "success" : "error", durationMs,
+      status: response.ok ? "success" : response.status === 429 ? "rate_limited" : "error", durationMs,
     });
     console.log(`[proxy] POST ${endpoint} → ${response.status} ${durationMs}ms caller=${caller?.callerIp ?? "unknown"}`);
     return response;

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

@@ -25,7 +25,8 @@ import { codexPlanLabel } from "../../../shared/codex-plan-label.ts";
 import { dailyGuardState } from "../../../shared/codex-daily-guard.ts";
 import { UsagePanelShell } from "./usage-panel-shell";
 
-interface CodexAccount { id: string; label: string; type: string; planType?: string | null; status?: "active" | "disabled"; dailyGuardEnabled?: boolean }
+import { CODEX_SIGNED_OUT_HINT, type CodexAccount } from "@/components/settings/accounts/use-codex-accounts";
+import { CodexSignInAgainDialog } from "@/components/settings/accounts/codex-sign-in-again-dialog";
 type Usage = Pick<UsageInfo, "fiveHour" | "sevenDay" | "session" | "weekly">;
 
 /** Matches the whole-percent figure the bars show, so a refusal agrees with the card. */
@@ -66,6 +67,8 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
   const [selectingId, setSelectingId] = useState<string | null>(null);
   const [togglingId, setTogglingId] = useState<string | null>(null);
   const [panelError, setPanelError] = useState<string | null>(null);
+  /** The signed-out account whose "Sign in again" chip was pressed. */
+  const [signInAgain, setSignInAgain] = useState<CodexAccount | null>(null);
 
   const load = useCallback(async () => {
     setLoading(true);
@@ -98,6 +101,7 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
    */
   const unselectableReason = useCallback((account: CodexAccount, u: Usage): string | null => {
     if (account.status === "disabled") return "Disabled";
+    if (account.signedOut) return "Signed out — sign in again first";
     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;
@@ -175,6 +179,7 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
   );
 
   return (
+    <>
     <UsagePanelShell
       title="Codex Usage"
       onClose={onClose}
@@ -205,9 +210,16 @@ export function CodexUsagePanel({ onClose, usage, onReload, onSelectAccount, sel
             dailyGuard={guard ? { enabled: !!a.dailyGuardEnabled, state: guard } : undefined}
             onDailyGuardToggle={guard ? () => void handleDailyGuardToggle(a.id, !!a.dailyGuardEnabled) : undefined}
             dailyGuardToggling={togglingId === a.id}
+            reauthHint={a.signedOut ? CODEX_SIGNED_OUT_HINT : undefined}
+            // Only a ChatGPT sign-in can be renewed in place; a dead API key is replaced.
+            onReauth={a.type === "chatgpt" ? () => setSignInAgain(a) : undefined}
           />
         );
       })}
     </UsagePanelShell>
+    {signInAgain && (
+      <CodexSignInAgainDialog account={signInAgain} onClose={() => setSignInAgain(null)} onDone={() => void load()} />
+    )}
+    </>
   );
 }

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

@@ -25,6 +25,7 @@ import { AccountBucketRow } from "@/components/settings/accounts/account-bucket-
 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";
+import { AddAccountDialog } from "@/components/settings/accounts/account-add-dialog";
 
 /** Matches the whole-percent figure the usage bars show, so a refusal agrees with the card. */
 function atCap(util: number | null | undefined): boolean {
@@ -91,6 +92,8 @@ 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);
+  /** Label of the account whose "Sign in again" chip was pressed; opens the sign-in dialog. */
+  const [signInAgainFor, setSignInAgainFor] = useState<string | null>(null);
 
   if (!visible) return null;
 
@@ -159,6 +162,7 @@ export function UsageDetailPanel({
   const hasCost = usage.queryCostUsd != null || usage.totalCostUsd != null;
 
   return (
+    <>
     <UsagePanelShell
       title="Usage"
       meta={lastFetchedAt && (
@@ -220,9 +224,19 @@ export function UsageDetailPanel({
             selecting={selectingId === entry.accountId}
             onToggle={handleToggle}
             toggling={togglingId === entry.accountId}
+            onReauth={() => setSignInAgainFor(entry.accountLabel ?? entry.accountId.slice(0, 8))}
           />
         );
       })}
     </UsagePanelShell>
+    {signInAgainFor && (
+      <AddAccountDialog
+        open
+        onOpenChange={(v) => { if (!v) setSignInAgainFor(null); }}
+        onSuccess={(msg) => { setSignInAgainFor(null); void reload(); if (msg) setPanelError(msg); }}
+        signInAgainFor={signInAgainFor}
+      />
+    )}
+    </>
   );
 }

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

@@ -12,9 +12,14 @@ interface AddAccountDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSuccess: (msg?: string) => void;
+  /**
+   * The label of an account being signed in again. Only the wording changes: the add flow
+   * already updates an account it matches by email or profile id, clearing its re-auth flag.
+   */
+  signInAgainFor?: string;
 }
 
-export function AddAccountDialog({ open, onOpenChange, onSuccess }: AddAccountDialogProps) {
+export function AddAccountDialog({ open, onOpenChange, onSuccess, signInAgainFor }: AddAccountDialogProps) {
   const [newToken, setNewToken] = useState("");
   const [newLabel, setNewLabel] = useState("");
   const [adding, setAdding] = useState(false);
@@ -100,9 +105,11 @@ export function AddAccountDialog({ open, onOpenChange, onSuccess }: AddAccountDi
     <Dialog open={open} onOpenChange={(v) => { if (!v) handleClose(); }}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle className="text-sm">Add Claude Account</DialogTitle>
+          <DialogTitle className="text-sm">{signInAgainFor ? `Sign in again — ${signInAgainFor}` : "Add Claude Account"}</DialogTitle>
           <DialogDescription className="text-xs leading-relaxed">
-            Connect via OAuth (recommended) or paste a token manually.
+            {signInAgainFor
+              ? "Log in with the same Claude account. PPM matches it by email and renews the existing card instead of adding a new one."
+              : "Connect via OAuth (recommended) or paste a token manually."}
           </DialogDescription>
         </DialogHeader>
         <div className="space-y-3">

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

@@ -60,6 +60,15 @@ export interface AccountCardProps {
   dailyGuard?: { enabled: boolean; state: DailyGuardState };
   onDailyGuardToggle?: () => void;
   dailyGuardToggling?: boolean;
+  /**
+   * The server has seen this account refused for a revoked or expired login, explained in
+   * the provider's own terms. For accounts with no `accountInfo` to carry `reauthRequired`
+   * (Codex): its usage bars still show the last reading, so without this the card looked
+   * healthy while every turn on it failed.
+   */
+  reauthHint?: string;
+  /** Start signing this account in again. Makes the "Sign in again"/"Expired" chip a button. */
+  onReauth?: (id: string) => void;
 }
 
 // Fixed widths so a row scrolls instead of squeezing. Two of them: a read-only card holds a
@@ -70,7 +79,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, planLabel, dailyGuard, onDailyGuardToggle, dailyGuardToggling,
-  layout = "list",
+  reauthHint, onReauth, layout = "list",
 }: AccountCardProps) {
   const { usage } = entry;
   const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet;
@@ -83,7 +92,7 @@ export function AccountCard({
   // Distinct from isExpired: this account still holds a refresh token, it is just one the
   // server will not honour. Dim it like an expired card, but keep every control — signing
   // in again goes through the same add flow, and delete has to stay reachable.
-  const needsReauth = !!accountInfo?.reauthRequired;
+  const needsReauth = !!accountInfo?.reauthRequired || !!reauthHint;
   // A sign-in dies on a fixed schedule regardless of use, so the warning has to lead the
   // last stretch of it rather than appear once it is already too late.
   const grantExpiresAtMs = accountInfo?.grantExpiresAt ? accountInfo.grantExpiresAt * 1000 : null;
@@ -166,7 +175,8 @@ export function AccountCard({
         {isExpired && (
           <AccountHint
             className="text-[10px] text-error shrink-0 font-medium"
-            hint="This token has expired and carries no refresh token, so nothing can renew it. Add the account again."
+            hint="This token has expired and carries no refresh token, so nothing can renew it. Sign in again to replace it."
+            onClick={onReauth ? () => onReauth(entry.accountId) : undefined}
           >
             Expired
           </AccountHint>
@@ -174,7 +184,8 @@ export function AccountCard({
         {needsReauth && !isExpired && (
           <AccountHint
             className="text-[10px] text-error shrink-0 font-medium"
-            hint="Anthropic rejected this account's refresh token, so no turn can run on it. Signing in again is the only thing that restores it."
+            hint={reauthHint ?? "Anthropic rejected this account's refresh token, so no turn can run on it. Signing in again is the only thing that restores it."}
+            onClick={onReauth ? () => onReauth(entry.accountId) : undefined}
           >
             Sign in again
           </AccountHint>

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

@@ -15,13 +15,30 @@ export interface AccountHintProps {
   hint: ReactNode;
   className?: string;
   children: ReactNode;
+  /**
+   * Makes the chip an action as well as an explanation — "Sign in again" should do what it
+   * says rather than only describe it. The tooltip still opens on hover/focus.
+   */
+  onClick?: () => void;
 }
 
-export function AccountHint({ hint, className, children }: AccountHintProps) {
+export function AccountHint({ hint, className, children, onClick }: AccountHintProps) {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <button type="button" className={["cursor-help text-left", className].filter(Boolean).join(" ")}>
+        <button
+          type="button"
+          onClick={onClick}
+          className={[
+            // The invisible `after` box stretches the touch target to ~44px without growing
+            // the card header the chip sits in.
+            onClick
+              ? "relative cursor-pointer rounded px-1 -mx-1 underline decoration-dotted underline-offset-2 hover:bg-error/10 after:absolute after:-inset-x-2 after:-inset-y-3 after:content-['']"
+              : "cursor-help",
+            "text-left",
+            className,
+          ].filter(Boolean).join(" ")}
+        >
           {children}
         </button>
       </TooltipTrigger>

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

@@ -40,6 +40,8 @@ export function ClaudeAccountsSection() {
   const [profileView, setProfileView] = useState<{ profile: OAuthProfileData; accountId: string } | null>(null);
   const [exportPreselect, setExportPreselect] = useState<string | null>(null);
   const [dialog, setDialog] = useState<"add" | "export" | "import" | "rotation" | "token-test" | null>(null);
+  /** Label of the account whose "Sign in again" chip opened the add dialog. */
+  const [signInAgainFor, setSignInAgainFor] = useState<string | undefined>(undefined);
 
   function handleSuccess(msg?: string) {
     void reload();
@@ -84,7 +86,7 @@ export function ClaudeAccountsSection() {
         refreshing={refreshing}
         disabled={initialLoading}
         actions={<>
-          <Button size="sm" className="cursor-pointer gap-1.5" onClick={() => setDialog("add")}>
+          <Button size="sm" className="cursor-pointer gap-1.5" onClick={() => { setSignInAgainFor(undefined); setDialog("add"); }}>
             <Plus className="size-4" /> Add account
           </Button>
           <Button size="sm" variant="outline" className="cursor-pointer gap-1.5" onClick={() => { setExportPreselect(null); setDialog("export"); }}>
@@ -138,6 +140,7 @@ export function ClaudeAccountsSection() {
                 onDelete={(id, display) => setDeleteTarget({ id, display })}
                 onExport={(id) => { setExportPreselect(id); setDialog("export"); }}
                 onViewProfile={(profile, accountId) => setProfileView({ profile, accountId })}
+                onReauth={() => { setSignInAgainFor(entry.accountLabel ?? entry.accountId.slice(0, 8)); setDialog("add"); }}
                 flash={flashIds.has(entry.accountId)}
               />
             ))}
@@ -161,7 +164,12 @@ export function ClaudeAccountsSection() {
         />
       )}
 
-      <AddAccountDialog open={dialog === "add"} onOpenChange={(v) => setDialog(v ? "add" : null)} onSuccess={handleSuccess} />
+      <AddAccountDialog
+        open={dialog === "add"}
+        onOpenChange={(v) => { setDialog(v ? "add" : null); if (!v) setSignInAgainFor(undefined); }}
+        onSuccess={handleSuccess}
+        signInAgainFor={signInAgainFor}
+      />
       <ExportAccountsDialog
         open={dialog === "export"}
         onOpenChange={(v) => { setDialog(v ? "export" : null); if (!v) setExportPreselect(null); }}

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

@@ -25,7 +25,9 @@ import { CodexAddAccountDialog } from "./codex-add-account-dialog";
 import { CodexBackupDialog } from "./codex-backup-dialog";
 import { CodexRotationDialog } from "./codex-rotation-dialog";
 import { CodexUsageRows } from "./codex-usage-rows";
-import { useCodexAccounts } from "./use-codex-accounts";
+import { CODEX_SIGNED_OUT_HINT, useCodexAccounts, type CodexAccount } from "./use-codex-accounts";
+import { CodexSignInAgainDialog } from "./codex-sign-in-again-dialog";
+import { AccountHint } from "./account-hint";
 import { codexPlanLabel } from "../../../../shared/codex-plan-label.ts";
 import { dailyGuardState } from "../../../../shared/codex-daily-guard.ts";
 
@@ -34,6 +36,8 @@ import { dailyGuardState } from "../../../../shared/codex-daily-guard.ts";
 export function CodexAccountsSection() {
   const [dialog, setDialog] = useState<"add" | "export" | "import" | "rotation" | null>(null);
   const c = useCodexAccounts(() => setDialog(null));
+  /** The signed-out account whose "Sign in again" chip was pressed. */
+  const [signInAgain, setSignInAgain] = useState<CodexAccount | null>(null);
 
   return (
     <div className="space-y-4">
@@ -88,12 +92,21 @@ export function CodexAccountsSection() {
                   key={a.id}
                   dense
                   // Matches the Claude card that also carries a control beside the name.
-                  className="min-w-[300px] shrink-0 snap-start"
+                  className={`min-w-[300px] shrink-0 snap-start${a.signedOut ? " opacity-60" : ""}`}
                   data-testid="account-card"
                   data-account-id={a.id}
                 >
                   <div className="flex items-center gap-2">
                     <span className="text-sm font-medium truncate flex-1 min-w-0">{a.label}</span>
+                    {a.signedOut && (
+                      <AccountHint
+                        className="text-[10px] text-error shrink-0 font-medium"
+                        hint={CODEX_SIGNED_OUT_HINT}
+                        onClick={a.type === "chatgpt" ? () => setSignInAgain(a) : undefined}
+                      >
+                        Sign in again
+                      </AccountHint>
+                    )}
                     <span className="text-[10px] uppercase tracking-wide text-text-subtle border border-border rounded px-1 shrink-0">
                       {a.type}
                     </span>
@@ -199,6 +212,9 @@ export function CodexAccountsSection() {
         onImport={(f) => void c.doImport(f)}
         error={c.err}
       />
+      {signInAgain && (
+        <CodexSignInAgainDialog account={signInAgain} onClose={() => setSignInAgain(null)} onDone={() => void c.load()} />
+      )}
       <CodexRotationDialog
         open={dialog === "rotation"}
         onOpenChange={(v) => setDialog(v ? "rotation" : null)}

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

@@ -1,4 +1,8 @@
-/** Add a Codex account through browser login, device code, or an API key. */
+/**
+ * Add a Codex account through browser login, device code, or an API key — or, with
+ * `reloginLabel`, sign an existing ChatGPT account in again. That mode drops the label and
+ * API-key parts: the account keeps its name, and a key is not a sign-in to renew.
+ */
 
 import { ExternalLink, KeyRound, Loader2, MonitorSmartphone } from "@/lib/icons";
 import {
@@ -17,7 +21,10 @@ export function CodexAddAccountDialog({
   open, onOpenChange, label, onLabelChange, apiKey, onApiKeyChange,
   adding, onAddApiKey, deviceWaiting, onStartDevice, device, error,
   browser, onStartBrowser, loginStarting, callbackUrl, onCallbackUrlChange, submittingCallback, onSubmitCallback,
+  reloginLabel,
 }: {
+  /** Present when signing an existing account in again; names it in the title. */
+  reloginLabel?: string;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   label: string;
@@ -43,18 +50,22 @@ export function CodexAddAccountDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md max-h-[90dvh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="text-sm">Add Codex Account</DialogTitle>
+          <DialogTitle className="text-sm">{reloginLabel ? `Sign in again — ${reloginLabel}` : "Add Codex Account"}</DialogTitle>
           <DialogDescription className="text-xs leading-relaxed">
-            Choose browser login, a device code, or an OpenAI API key.
+            {reloginLabel
+              ? "Sign in with ChatGPT to renew this account. It keeps its name, its settings and the chats bound to it."
+              : "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>
+          {!reloginLabel && (
+            <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}>
@@ -108,23 +119,27 @@ export function CodexAddAccountDialog({
             )}
           </div>
 
-          <div className="flex items-center gap-2">
-            <div className="flex-1 border-t" />
-            <span className="text-[10px] text-muted-foreground">or paste an API key</span>
-            <div className="flex-1 border-t" />
-          </div>
+          {!reloginLabel && (
+            <>
+              <div className="flex items-center gap-2">
+                <div className="flex-1 border-t" />
+                <span className="text-[10px] text-muted-foreground">or paste an API key</span>
+                <div className="flex-1 border-t" />
+              </div>
 
-          <div className="space-y-1.5">
-            <Label htmlFor="codex-api-key" className="text-xs">OpenAI API key</Label>
-            <Input
-              id="codex-api-key"
-              type="password"
-              placeholder="sk-..."
-              value={apiKey}
-              onChange={(e) => onApiKeyChange(e.target.value)}
-              className="text-xs font-mono"
-            />
-          </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="codex-api-key" className="text-xs">OpenAI API key</Label>
+                <Input
+                  id="codex-api-key"
+                  type="password"
+                  placeholder="sk-..."
+                  value={apiKey}
+                  onChange={(e) => onApiKeyChange(e.target.value)}
+                  className="text-xs font-mono"
+                />
+              </div>
+            </>
+          )}
         </div>
 
         {loginStarting && <p role="status" className="text-xs">Starting login...</p>}
@@ -134,15 +149,17 @@ export function CodexAddAccountDialog({
           <Button size="sm" variant="outline" className="text-xs cursor-pointer" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
-          <Button
-            size="sm"
-            className="text-xs cursor-pointer gap-1.5"
-            onClick={onAddApiKey}
-            disabled={!apiKey.trim() || loginBusy}
-          >
-            {adding ? <Loader2 className="size-3.5 animate-spin" /> : <KeyRound className="size-3.5" />}
-            Add key
-          </Button>
+          {!reloginLabel && (
+            <Button
+              size="sm"
+              className="text-xs cursor-pointer gap-1.5"
+              onClick={onAddApiKey}
+              disabled={!apiKey.trim() || loginBusy}
+            >
+              {adding ? <Loader2 className="size-3.5 animate-spin" /> : <KeyRound className="size-3.5" />}
+              Add key
+            </Button>
+          )}
         </DialogFooter>
       </DialogContent>
     </Dialog>

package/src/web/components/settings/accounts/codex-sign-in-again-dialog.tsx

@@ -0,0 +1,47 @@
+/**
+ * Sign an existing Codex (ChatGPT) account in again, from wherever its "Sign in again" chip
+ * is — the Settings pane or the chat's usage panel.
+ *
+ * Self-contained on purpose: the chat panel has no login state of its own, and giving it a
+ * copy of the flow would be the drift the shared account card exists to prevent. It is the
+ * add-account dialog in its re-login mode, driven by the same hook, so the server signs the
+ * account in inside its own CODEX_HOME and keeps its id, sessions and settings.
+ *
+ * Mount it only while it is open: the hook loads the account list on mount.
+ */
+
+import { CodexAddAccountDialog } from "./codex-add-account-dialog";
+import { useCodexAccounts } from "./use-codex-accounts";
+
+export function CodexSignInAgainDialog({ account, onClose, onDone }: {
+  account: { id: string; label: string };
+  onClose: () => void;
+  /** Called once the account is signed in again, so the caller can reload what it shows. */
+  onDone: () => void;
+}) {
+  const c = useCodexAccounts(() => { onDone(); onClose(); });
+  return (
+    <CodexAddAccountDialog
+      open
+      onOpenChange={(v) => { if (!v) { c.cancelLogin(); onClose(); } }}
+      reloginLabel={account.label}
+      label={c.label}
+      onLabelChange={c.setLabel}
+      apiKey=""
+      onApiKeyChange={() => {}}
+      adding={false}
+      onAddApiKey={() => {}}
+      deviceWaiting={c.deviceWaiting}
+      onStartDevice={() => void c.startDevice(account.id)}
+      device={c.device}
+      browser={c.browser}
+      onStartBrowser={() => void c.startBrowser(account.id)}
+      loginStarting={c.loginStarting}
+      callbackUrl={c.callbackUrl}
+      onCallbackUrlChange={c.setCallbackUrl}
+      submittingCallback={c.submittingCallback}
+      onSubmitCallback={() => void c.submitCallback()}
+      error={c.err}
+    />
+  );
+}