@hienlh/ppm 0.23.0 → 0.23.2

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

@@ -16,6 +16,8 @@ import { configService } from "./config.service.ts";
 import { encrypt, decrypt } from "../lib/account-crypto.ts";
 import { getOrFetchUsage } from "./provider-usage/usage-registry.ts";
 import { isCodexAccountUsageLimited } from "./codex-account-cooldown.ts";
+import { isCodexAccountAuthFailed } from "./codex-account-auth-state.ts";
+import { codexSignedOutMessage } from "../providers/codex-app-server/codex-auth-failure.ts";
 import { dailyGuardMessage, dailyGuardState } from "../shared/codex-daily-guard.ts";
 import type { UsageInfo } from "../providers/provider.interface.ts";
 
@@ -149,6 +151,35 @@ export function setCodexDailyGuard(id: string, enabled: boolean): CodexAccount |
 
 export class CodexDailyGuardError extends Error {}
 
+/** Every managed account that could serve is signed out. */
+export class CodexSignedOutError extends Error {}
+
+/**
+ * Accounts that can be handed a turn at all: switched on, and not known to be signed out.
+ *
+ * Both exclusions are hard. Off is the user's say-so; signed out is an account that will
+ * refuse every turn after ~24s of codex retrying, so handing it back "because nothing else
+ * was left" buys a slow failure instead of a fast one.
+ */
+function servableAccounts(): CodexAccount[] {
+  return listCodexAccounts().filter((a) => a.status !== "disabled" && !isCodexAccountAuthFailed(a.id));
+}
+
+/**
+ * Throw when accounts are enabled but every one of them is signed out.
+ *
+ * Without this the selector finds nothing, the caller falls back to the ambient ~/.codex
+ * login — usually absent or stale on a machine that manages accounts — and the turn fails
+ * with an error that names neither account.
+ */
+function assertSomeAccountSignedIn(): void {
+  const enabled = listCodexAccounts().filter((a) => a.status !== "disabled");
+  if (enabled.length === 0 || enabled.some((a) => !isCodexAccountAuthFailed(a.id))) return;
+  throw new CodexSignedOutError(enabled.length === 1
+    ? codexSignedOutMessage(enabled[0]!.label)
+    : `Every Codex account is signed out (${enabled.map((a) => a.label).join(", ")}). Press "Sign in again" on their cards in Settings → Accounts → Codex.`);
+}
+
 /** Remove the account row and its CODEX_HOME dir. */
 export function removeCodexAccount(id: string): void {
   const acct = getCodexAccount(id);
@@ -242,7 +273,7 @@ export function selectCodexAccount(opts?: { strategy?: CodexStrategy; usageOf?:
   // `exclude` is hard for the same reason: its only caller is the rotation away from an
   // account that just refused the turn, and falling back to it would rotate in a circle.
   const excluded = new Set(opts?.exclude ?? []);
-  const all = listCodexAccounts().filter((a) => a.status !== "disabled" && !excluded.has(a.id));
+  const all = servableAccounts().filter((a) => !excluded.has(a.id));
   if (all.length === 0) return null;
   if (all.length === 1) return all[0]!;
   const strategy = opts?.strategy ?? getCodexStrategy();
@@ -276,7 +307,7 @@ export function peekCodexAccount(): CodexAccount | null {
   // Status and the quota park are the two things this can filter on without going async, so
   // it does both. Usage lives behind a fetch and stays out of reach here; the consuming pick
   // endpoint reads it instead.
-  const accts = withQuotaLeft(listCodexAccounts().filter((a) => a.status !== "disabled"));
+  const accts = withQuotaLeft(servableAccounts());
   if (accts.length === 0) return null;
   if (accts.length === 1) return accts[0]!;
   return getCodexStrategy() === "fill-first" ? accts[0]! : null;
@@ -287,6 +318,11 @@ export async function resolveCodexAccountForSession(sessionId?: string): Promise
   // Session-less callers (the model list) have nothing sticky to honour and fall
   // straight through to the configured strategy.
   const sticky = sessionId ? getSessionCodexAccount(sessionId) : null;
+  // A signed-out account lets go of its sessions too: it would refuse the turn after
+  // codex's full retry loop, and there is no quota reset to wait for.
+  assertSomeAccountSignedIn();
+  const keepable = (a: CodexAccount | null): a is CodexAccount =>
+    !!a && a.status !== "disabled" && !isCodexAccountUsageLimited(a.id) && !isCodexAccountAuthFailed(a.id);
   // A binding is held for the prompt cache, not honoured unconditionally: an account the
   // user has switched off has to let go of the sessions sitting on it, or turning it off
   // would do nothing for exactly the conversations already using it. An account parked for
@@ -296,7 +332,7 @@ export async function resolveCodexAccountForSession(sessionId?: string): Promise
   // account able to serve it cannot. Parked accounts count as unable for the same reason
   // they are skipped below, so a pool of two where one is out of quota resolves without a
   // network read at all.
-  const usable = listCodexAccounts().filter((a) => a.status !== "disabled" && !isCodexAccountUsageLimited(a.id));
+  const usable = servableAccounts().filter((a) => !isCodexAccountUsageLimited(a.id));
   const guarded = usable.filter((a) => a.dailyGuardEnabled);
   if (guarded.length > 0) {
     const usages = await getAllCodexUsages();
@@ -309,8 +345,7 @@ export async function resolveCodexAccountForSession(sessionId?: string): Promise
     });
     if (blocked.length > 0) {
       const stickyAccount = sticky ? getCodexAccount(sticky) : null;
-      if (stickyAccount && !blocked.includes(stickyAccount.id)
-          && stickyAccount.status !== "disabled" && !isCodexAccountUsageLimited(stickyAccount.id)) return stickyAccount;
+      if (keepable(stickyAccount) && !blocked.includes(stickyAccount.id)) return stickyAccount;
       if (blocked.length === usable.length && sessionId) {
         const account = getCodexAccount(blocked[0]!);
         const usage = account ? usages[account.id] : undefined;
@@ -321,13 +356,13 @@ export async function resolveCodexAccountForSession(sessionId?: string): Promise
     }
     if (sticky) {
       const a = getCodexAccount(sticky);
-      if (a && a.status !== "disabled" && !isCodexAccountUsageLimited(a.id)) return a;
+      if (keepable(a)) return a;
     }
     return selectCodexAccount({ usageOf: (id) => codexUsageLevel(usages[id]) });
   }
   if (sticky) {
     const a = getCodexAccount(sticky);
-    if (a && a.status !== "disabled" && !isCodexAccountUsageLimited(a.id)) return a;
+    if (keepable(a)) return a;
   }
   if (usable.length <= 1) return selectCodexAccount();
   // Usage is read for every strategy, not just lowest-usage: it is also what lets the

package/src/services/proxy-agent-anthropic-bridge.ts

@@ -7,7 +7,7 @@
  * setting that base to `…/proxy/<provider>`.
  */
 import {
-  startAgentTurn, usageOf, resolveProvider, proxyableProviderIds,
+  startAgentTurn, usageOf, resolveProvider, proxyableProviderIds, turnFailureResponse,
 } from "./proxy-agent-turn.ts";
 import {
   buildPromptFromAnthropicMessages, hasUnsupportedAnthropicBlocks, messageResponse, anthropicError,
@@ -99,6 +99,6 @@ export async function forwardAgentMessages(
       ? await runStreaming(providerId, body)
       : await runNonStreaming(providerId, body);
   } catch (e) {
-    return anthropicError(502, (e as Error).message);
+    return turnFailureResponse(e, anthropicError);
   }
 }

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

@@ -15,7 +15,7 @@ import { mkdtempSync, writeFileSync, rmSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import {
-  startAgentTurn, usageOf, resolveProvider, proxyableProviderIds,
+  startAgentTurn, usageOf, resolveProvider, proxyableProviderIds, turnFailureResponse,
 } from "./proxy-agent-turn.ts";
 import { decodeImagePayload } from "./proxy-image-bridge.ts";
 import {
@@ -140,7 +140,7 @@ export async function forwardAgentChatCompletions(
       ? await runStreaming(providerId, body)
       : await runNonStreaming(providerId, body);
   } catch (e) {
-    return openAiError(502, (e as Error).message);
+    return turnFailureResponse(e, openAiError);
   }
 }
 

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