@hienlh/ppm 0.23.1 → 0.23.3

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

@@ -27,6 +27,8 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { AccountCardShell } from "./accounts-pane-header";
 import { formatExpiry, formatLastUpdated, tokenStatus } from "./account-usage-format";
 import type { DailyGuardState } from "../../../../shared/codex-daily-guard.ts";
+import type { ResetCredits } from "../../../../types/chat";
+import { ResetCreditsChip, ScopedBucketRows } from "./account-usage-extras";
 
 export interface AccountCardProps {
   entry: AccountUsageEntry;
@@ -60,6 +62,17 @@ 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;
+  /** Codex's free rate-limit resets for this account, shown in the footer. */
+  resetCredits?: ResetCredits;
 }
 
 // Fixed widths so a row scrolls instead of squeezing. Two of them: a read-only card holds a
@@ -70,10 +83,10 @@ 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, resetCredits, layout = "list",
 }: AccountCardProps) {
   const { usage } = entry;
-  const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet;
+  const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet || usage.weeklyScoped?.length;
   const status = accountInfo?.status ?? entry.accountStatus;
   const isExpired = !!(
     accountInfo && !accountInfo.hasRefreshToken && accountInfo.expiresAt
@@ -83,7 +96,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 +179,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 +188,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>
@@ -257,6 +272,7 @@ export function AccountCard({
           <AccountBucketRow label="Weekly" bucket={usage.weekly} />
           <AccountBucketRow label="Weekly (Opus)" bucket={usage.weeklyOpus} />
           <AccountBucketRow label="Weekly (Sonnet)" bucket={usage.weeklySonnet} />
+          <ScopedBucketRows buckets={usage.weeklyScoped} />
         </div>
       ) : (
         <p className="text-xs text-text-subtle">
@@ -301,6 +317,7 @@ export function AccountCard({
       )}
 
       <div className="flex items-center gap-2 text-[10px] text-text-subtle flex-wrap">
+        <ResetCreditsChip credits={resetCredits} />
         {usage.lastFetchedAt && (
           <AccountHint
             className="inline-flex items-center gap-1"

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/account-usage-extras.tsx

@@ -0,0 +1,43 @@
+/**
+ * The two usage details that are not one of the fixed buckets, shared by every account card
+ * so Settings and the chat panels cannot drift apart:
+ *
+ * - `ScopedBucketRows` — a model's own weekly limit (Claude's "Fable"), one bar per model,
+ *   labelled with the name the provider gives it.
+ * - `ResetCreditsChip` — how many free rate-limit resets Codex has granted the account and
+ *   when the next one lapses. PPM only reports these; they are spent from Codex itself.
+ */
+
+import { RotateCcw } from "@/lib/icons";
+import type { ResetCredits, ScopedLimitBucket } from "../../../../types/chat";
+import { AccountBucketRow } from "./account-bucket-row";
+import { AccountHint } from "./account-hint";
+
+export function ScopedBucketRows({ buckets }: { buckets?: ScopedLimitBucket[] }) {
+  if (!buckets?.length) return null;
+  return <>{buckets.map((b) => <AccountBucketRow key={b.label} label={`Weekly (${b.label})`} bucket={b} />)}</>;
+}
+
+/** "3 Nov" — the expiry is weeks out, so the time of day is noise. */
+function shortDate(iso: string): string {
+  return new Date(iso).toLocaleDateString(undefined, { day: "numeric", month: "short" });
+}
+
+export function ResetCreditsChip({ credits }: { credits?: ResetCredits }) {
+  if (!credits) return null;
+  const n = credits.available;
+  const label = n === 0 ? "No free resets" : `${n} free reset${n === 1 ? "" : "s"}`;
+  const hint = n === 0
+    ? "Codex has no free rate-limit resets left for this account."
+    : `Codex has granted this account ${n} free rate-limit reset${n === 1 ? "" : "s"}`
+      + `${credits.title ? ` (${credits.title})` : ""}.`
+      + `${credits.nextExpiresAt ? ` The next one expires on ${new Date(credits.nextExpiresAt).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })}.` : ""}`
+      + " Use one from the Codex app when a limit is reached — PPM only shows the count.";
+  return (
+    <AccountHint className={`inline-flex items-center gap-1 ${n > 0 ? "text-primary" : ""}`} hint={hint}>
+      <RotateCcw className="size-3 shrink-0" aria-hidden />
+      {label}
+      {n > 0 && credits.nextExpiresAt && <span className="text-text-subtle">· until {shortDate(credits.nextExpiresAt)}</span>}
+    </AccountHint>
+  );
+}

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,10 @@ 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 { ResetCreditsChip } from "./account-usage-extras";
+import { AccountHint } from "./account-hint";
 import { codexPlanLabel } from "../../../../shared/codex-plan-label.ts";
 import { dailyGuardState } from "../../../../shared/codex-daily-guard.ts";
 
@@ -34,6 +37,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 +93,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>
@@ -122,6 +136,11 @@ export function CodexAccountsSection() {
                     </Tooltip>
                   </div>
                   <CodexUsageRows usage={u} />
+                  {u.resetCredits && (
+                    <div className="text-[10px] text-text-subtle">
+                      <ResetCreditsChip credits={u.resetCredits} />
+                    </div>
+                  )}
                   {u.session == null && (() => {
                     const guard = dailyGuardState(u.weekly);
                     return guard ? (
@@ -199,6 +218,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}
+    />
+  );
+}

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

@@ -31,7 +31,10 @@ export interface AccountsData {
 /** Utilisation across all four buckets, as a comparable string. */
 function utilisationKey(entry: AccountUsageEntry): string {
   const u = entry.usage;
-  return [u.session?.utilization, u.weekly?.utilization, u.weeklyOpus?.utilization, u.weeklySonnet?.utilization].join("|");
+  return [
+    u.session?.utilization, u.weekly?.utilization, u.weeklyOpus?.utilization, u.weeklySonnet?.utilization,
+    ...(u.weeklyScoped ?? []).map((b) => `${b.label}:${b.utilization}`),
+  ].join("|");
 }
 
 export function useAccountsData(enabled = true): AccountsData {

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

@@ -2,11 +2,19 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { api, getAuthToken } from "@/lib/api-client";
-import type { LimitBucket } from "../../../../types/chat";
+import type { LimitBucket, ResetCredits } from "../../../../types/chat";
 import type { CodexStrategy } from "./codex-rotation-dialog";
 
 export type Strategy = CodexStrategy;
-export interface CodexAccount { id: string; label: string; type: string; planType?: string | null; status?: "active" | "disabled"; dailyGuardEnabled?: boolean }
+export interface CodexAccount {
+  id: string; label: string; type: string; planType?: string | null; status?: "active" | "disabled"; dailyGuardEnabled?: boolean;
+  /** The server saw this account's login refused (revoked or expired). Live, not stored. */
+  signedOut?: boolean;
+}
+
+/** Why a signed-out Codex card is dimmed, and what the chip does when pressed. */
+export const CODEX_SIGNED_OUT_HINT =
+  "Codex rejected this account's login (revoked or expired), so no turn can run on it and it is skipped. The usage shown is the last reading. Click to sign in again — the account keeps its settings and chats.";
 /**
  * One account's quota. The two percentages are what the bars read; the buckets carry the
  * reset clock the server already sends, so the Codex card can show "resets in" the way the
@@ -17,6 +25,8 @@ export interface Usage {
   sevenDay?: number;
   session?: LimitBucket;
   weekly?: LimitBucket;
+  /** Free rate-limit resets Codex has granted the account. */
+  resetCredits?: ResetCredits;
 }
 interface DevicePending { id: string; userCode: string; verificationUrl: string }
 interface BrowserPending { id: string; authUrl: string }
@@ -123,13 +133,17 @@ export function useCodexAccounts(onDone: () => void) {
 
   useEffect(() => releaseLogin, [releaseLogin]);
 
-  const startLogin = async (method: LoginMethod) => {
+  /** `reloginAccountId` signs that existing account in again rather than adding a new one. */
+  const startLogin = async (method: LoginMethod, reloginAccountId?: string) => {
     if (startingRef.current || pendingLoginRef.current || addingRef.current) return;
     startingRef.current = true;
     const generation = ++loginGenerationRef.current;
     setLoginStarting(true); setErr(null);
     try {
-      const result = await api.post<DevicePending | BrowserPending>(`/api/codex-accounts/${method}-login`, { label: label.trim() || undefined });
+      const result = await api.post<DevicePending | BrowserPending>(`/api/codex-accounts/${method}-login`, {
+        label: label.trim() || undefined,
+        ...(reloginAccountId ? { accountId: reloginAccountId } : {}),
+      });
       // Closing the dialog while startup is in flight still owes the server a cancel.
       if (generation !== loginGenerationRef.current) {
         void api.del(`/api/codex-accounts/${method}-login/${result.id}`).catch(() => {});
@@ -236,7 +250,9 @@ export function useCodexAccounts(onDone: () => void) {
     err, setErr, device, deviceWaiting, backupPassword, setBackupPassword,
     exporting, importing, msg, setMsg,
     toggling,
-    load, addApiKey, startDevice: () => startLogin("device"), startBrowser: () => startLogin("browser"),
+    load, addApiKey,
+    startDevice: (reloginAccountId?: string) => startLogin("device", reloginAccountId),
+    startBrowser: (reloginAccountId?: string) => startLogin("browser", reloginAccountId),
     browser, loginStarting, callbackUrl, setCallbackUrl, submittingCallback, submitCallback, cancelLogin, remove, toggle, toggleDailyGuard, changeStrategy, doExport, doImport,
   };
 }

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

@@ -226,6 +226,7 @@ export function useChat(
   const replayTurnUserMsgRef = useRef<string | null>(null);
   /** When the last full-transcript fetch completed — guards redundant idle refetches */
   const historyLoadedAtRef = useRef(0);
+  const initialHistoryPendingRef = useRef(false);
   const sessionIdRef = useRef(sessionId);
   sessionIdRef.current = sessionId;
   // Held in a ref so the socket handler always calls the latest callback without
@@ -560,6 +561,18 @@ export function useChat(
           if (routeToFinalizedParent(ev as ChatEvent, pid)) { /* nested */ }
           break;
         }
+        // Background Codex agents can finish after the root answer. Update the
+        // finalized card without flushing empty streaming refs over history.
+        if (phaseRef.current === "idle" && trId?.startsWith("subagent-")) {
+          setMessages(prev => prev.map(message => {
+            if (!message.events?.some(e => e.type === "tool_use" && e.toolUseId === trId)) return message;
+            return { ...message, events: message.events.map(e =>
+              e.type === "tool_use" && e.toolUseId === trId
+                ? { ...e, result: { output: ev.output, isError: ev.isError, exitCode: ev.exitCode } }
+                : e) };
+          }));
+          break;
+        }
         upsertStreamingEvent((e) => !!trId && e.type === "tool_result" && (e as any).toolUseId === trId);
         syncMessages();
         break;
@@ -629,6 +642,11 @@ export function useChat(
       }
 
       case "error": {
+        if (ev.parentToolUseId) {
+          if (routeToParent(ev as ChatEvent, ev.parentToolUseId)) syncMessages();
+          else routeToFinalizedParent(ev as ChatEvent, ev.parentToolUseId);
+          break;
+        }
         if (!isReplayingRef.current) attemptRef.current?.fail();
         setMessages((prev) => {
           const last = prev[prev.length - 1];
@@ -724,6 +742,8 @@ export function useChat(
       }
 
       case "done": {
+        // A nested completion must never finalize or reset the root stream.
+        if (ev.parentToolUseId) break;
         if (!isReplayingRef.current) attemptRef.current?.finish(!!streamingContentRef.current.trim());
         // Idempotent: may receive duplicate done (provider + stream loop finally)
         if (phaseRef.current === "idle") break;
@@ -976,7 +996,7 @@ export function useChat(
         resyncInFlightRef.current = false;
         replayTruncatedRef.current = false;
         const historyFresh = Date.now() - historyLoadedAtRef.current < 5000;
-        if (replayWasTruncated || !(wasIdle && historyFresh)) refetchRef.current?.();
+        if (replayWasTruncated || !(wasIdle && (historyFresh || initialHistoryPendingRef.current))) refetchRef.current?.();
         setIsReconnecting(false);
       }
       // If streaming, turn_events message will follow
@@ -1173,6 +1193,7 @@ export function useChat(
     const staleIds = new Set(messagesRef.current.map((m) => m.id));
 
     if (sessionId && projectName) {
+      initialHistoryPendingRef.current = true;
       setMessagesLoading(true);
       // Via api.get, not raw fetch: the loading screen is gated on this settling,
       // and a stalled request would otherwise hold the transcript hostage until
@@ -1220,7 +1241,10 @@ export function useChat(
           }
         })
         .finally(() => {
-          if (!cancelled) setMessagesLoading(false);
+          if (!cancelled) {
+            initialHistoryPendingRef.current = false;
+            setMessagesLoading(false);
+          }
         });
     } else {
       setMessages([]);
@@ -1228,6 +1252,7 @@ export function useChat(
 
     return () => {
       cancelled = true;
+      initialHistoryPendingRef.current = false;
       historyRequestRef.current?.abort();
       historyRequestRef.current = null;
       if (syncRafRef.current) clearTimeout(syncRafRef.current);