[agent] feat: individual credit details with FIFO expiry display

- Add GET /api/codex-auth/reset-credits endpoint proxying
  /wham/rate-limit-reset-credits for individual credit details
- Popup now fetches and shows each credit with granted_at/expires_at
- Credits sorted FIFO (oldest first = next to use), first item
  highlighted with amber border + NEXT badge
- Days remaining shown per credit, red if <= 7 days
- Confirmation dialog shows which credit will be consumed
- 7 new i18n keys across en/ko/zh

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: lidge-jun

gui/src/i18n/en.ts

@@ -206,6 +206,13 @@ export const en = {
   "codexAuth.resetNothingToReset": "No rate-limit window needs resetting right now.",
   "codexAuth.resetNoCredit": "No reset credits available.",
   "codexAuth.resetError": "Failed to redeem reset credit. Please try again.",
+  "codexAuth.fifoNote": "The oldest credit is used first.",
+  "codexAuth.confirmWhichCredit": "Credit from {date} will be used.",
+  "codexAuth.creditNext": "Next to use",
+  "codexAuth.creditLabel": "Credit #{n}",
+  "codexAuth.creditNextBadge": "NEXT",
+  "codexAuth.creditGranted": "Granted {date}",
+  "codexAuth.creditExpires": "Expires {date} ({days}d left)",
 } as const;
 
 export type TKey = keyof typeof en;

gui/src/i18n/ko.ts

@@ -206,4 +206,11 @@ export const ko: Record<TKey, string> = {
   "codexAuth.resetNothingToReset": "현재 초기화할 사용량 윈도우가 없습니다.",
   "codexAuth.resetNoCredit": "사용 가능한 리셋 크레딧이 없습니다.",
   "codexAuth.resetError": "리셋 크레딧 사용에 실패했습니다. 다시 시도해 주세요.",
+  "codexAuth.fifoNote": "가장 오래된 크레딧부터 사용됩니다.",
+  "codexAuth.confirmWhichCredit": "{date}에 획득한 크레딧이 사용됩니다.",
+  "codexAuth.creditNext": "다음 사용 대상",
+  "codexAuth.creditLabel": "크레딧 #{n}",
+  "codexAuth.creditNextBadge": "NEXT",
+  "codexAuth.creditGranted": "획득 {date}",
+  "codexAuth.creditExpires": "만료 {date} ({days}일 남음)",
 };

gui/src/i18n/zh.ts

@@ -206,4 +206,11 @@ export const zh: Record<TKey, string> = {
   "codexAuth.resetNothingToReset": "当前没有需要重置的使用窗口。",
   "codexAuth.resetNoCredit": "没有可用的重置额度。",
   "codexAuth.resetError": "重置额度使用失败，请重试。",
+  "codexAuth.fifoNote": "最早获得的额度优先使用。",
+  "codexAuth.confirmWhichCredit": "将使用 {date} 获得的额度。",
+  "codexAuth.creditNext": "即将使用",
+  "codexAuth.creditLabel": "额度 #{n}",
+  "codexAuth.creditNextBadge": "NEXT",
+  "codexAuth.creditGranted": "获得 {date}",
+  "codexAuth.creditExpires": "过期 {date}（剩余 {days} 天）",
 };

gui/src/pages/CodexAuth.tsx

@@ -32,6 +32,8 @@ export default function CodexAuth({ apiBase }: { apiBase: string }) {
   const [resetPopup, setResetPopup] = useState<AccountEntry | null>(null);
   const [resetConfirm, setResetConfirm] = useState(false);
   const [redeeming, setRedeeming] = useState(false);
+  const [creditDetails, setCreditDetails] = useState<{ granted_at: string; expires_at: string }[] | null>(null);
+  const [creditDetailsLoading, setCreditDetailsLoading] = useState(false);
 
   const load = async (refreshQuota = false) => {
     try {
@@ -87,6 +89,24 @@ export default function CodexAuth({ apiBase }: { apiBase: string }) {
     }
   };
 
+  const openResetPopup = async (account: AccountEntry) => {
+    setResetPopup(account);
+    setResetConfirm(false);
+    setCreditDetails(null);
+    setCreditDetailsLoading(true);
+    try {
+      const resp = await fetch(`${apiBase}/api/codex-auth/reset-credits?accountId=${encodeURIComponent(account.id)}`);
+      if (resp.ok) {
+        const data = (await resp.json()) as { credits?: { granted_at: string; expires_at: string }[] };
+        const sorted = (data.credits ?? []).sort((a, b) =>
+          new Date(a.granted_at).getTime() - new Date(b.granted_at).getTime()
+        );
+        setCreditDetails(sorted);
+      }
+    } catch { /* detail fetch is non-blocking */ }
+    finally { setCreditDetailsLoading(false); }
+  };
+
   const handleRedeem = async (accountId: string) => {
     setRedeeming(true);
     try {
@@ -139,7 +159,7 @@ export default function CodexAuth({ apiBase }: { apiBase: string }) {
         <div className="card-head">
           <span className="dot dot-green" />
           <strong>{t("codexAuth.mainAccount")}</strong>
-          {main && <TicketBadge account={{ ...main, id: "__main__" } as AccountEntry} onClick={() => !isWorkspaceAccount(main?.plan) && setResetPopup({ ...main, id: "__main__" } as AccountEntry)} />}
+          {main && <TicketBadge account={{ ...main, id: "__main__" } as AccountEntry} onClick={() => !isWorkspaceAccount(main?.plan) && openResetPopup({ ...main, id: "__main__" } as AccountEntry)} />}
           <span className={`badge ${!activeId ? "badge-primary" : "badge-muted"}`}>
             {!activeId ? t("codexAuth.nextSession") : t("codexAuth.current")}
           </span>
@@ -166,7 +186,7 @@ export default function CodexAuth({ apiBase }: { apiBase: string }) {
             <span className={`dot ${a.needsReauth ? "dot-amber" : isNext(a.id) ? "dot-blue" : "dot-muted"}`} />
             <strong>{a.email}</strong>
             {a.plan && <span className="badge badge-green">{a.plan}</span>}
-            <TicketBadge account={a} onClick={() => !isWorkspaceAccount(a.plan) && setResetPopup(a)} />
+            <TicketBadge account={a} onClick={() => !isWorkspaceAccount(a.plan) && openResetPopup(a)} />
             {a.needsReauth && <span className="badge badge-amber">{t("codexAuth.needsReauth")}</span>}
             {isNext(a.id) && !a.needsReauth && <span className="badge badge-primary">{t("codexAuth.nextSession")}</span>}
             <button
@@ -218,7 +238,7 @@ export default function CodexAuth({ apiBase }: { apiBase: string }) {
       )}
 
       {resetPopup && (
-        <div className="modal-overlay" onClick={() => { setResetPopup(null); setResetConfirm(false); }}>
+        <div className="modal-overlay" onClick={() => { setResetPopup(null); setResetConfirm(false); setCreditDetails(null); }}>
           <div className="modal-card" onClick={e => e.stopPropagation()}>
             {!resetConfirm ? (
               <>
@@ -227,12 +247,20 @@ export default function CodexAuth({ apiBase }: { apiBase: string }) {
                 <div style={{ margin: "16px 0" }}>
                   {(resetPopup.quota?.resetCredits ?? 0) > 0 ? (
                     <>
-                      <p>{t("codexAuth.resetCreditsAvailable", { count: String(resetPopup.quota?.resetCredits ?? 0) })}</p>
-                      <p className="modal-desc">{t("codexAuth.resetCreditsDesc")}</p>
+                      <p style={{ marginBottom: 12 }}>{t("codexAuth.resetCreditsAvailable", { count: String(resetPopup.quota?.resetCredits ?? 0) })}</p>
+                      {creditDetailsLoading && <p className="faint" style={{ fontSize: 12 }}>Loading...</p>}
+                      {creditDetails && creditDetails.length > 0 && (
+                        <div className="credit-list">
+                          {creditDetails.map((c, i) => (
+                            <CreditItem key={i} index={i} grantedAt={c.granted_at} expiresAt={c.expires_at} isNext={i === 0} t={t} />
+                          ))}
+                        </div>
+                      )}
                       <button className="btn btn-primary" style={{ marginTop: 12, width: "100%" }}
                         onClick={() => setResetConfirm(true)} disabled={redeeming}>
                         {t("codexAuth.useOneCredit")}
                       </button>
+                      <p className="card-sub" style={{ fontSize: 11, marginTop: 8, textAlign: "center" }}>{t("codexAuth.fifoNote")}</p>
                     </>
                   ) : (
                     <>
@@ -241,14 +269,18 @@ export default function CodexAuth({ apiBase }: { apiBase: string }) {
                     </>
                   )}
                 </div>
-                <p className="card-sub" style={{ fontSize: 11 }}>{t("codexAuth.creditsExpireNote")}</p>
               </>
             ) : (
               <>
                 <div style={{ textAlign: "center", padding: "12px 0" }}>
                   <div className="confirm-icon"><IconAlert width={22} /></div>
                   <h3>{t("codexAuth.confirmResetTitle")}</h3>
                   <p className="modal-desc">{t("codexAuth.confirmResetDesc", { count: String(resetPopup.quota?.resetCredits ?? 0) })}</p>
+                  {creditDetails && creditDetails[0] && (
+                    <p className="faint" style={{ fontSize: 12 }}>
+                      {t("codexAuth.confirmWhichCredit", { date: formatCreditDate(creditDetails[0].granted_at) })}
+                    </p>
+                  )}
                   <p className="faint" style={{ fontSize: 12 }}>{t("codexAuth.irreversible")}</p>
                 </div>
                 <div className="modal-actions">
@@ -328,6 +360,37 @@ function QuotaRow({ label, percent, resetAt, threshold, t }: { label: string; pe
   );
 }
 
+function formatCreditDate(iso: string): string {
+  const d = new Date(iso);
+  return new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric", year: "numeric" }).format(d);
+}
+
+function daysUntil(iso: string): number {
+  return Math.max(0, Math.ceil((new Date(iso).getTime() - Date.now()) / 86_400_000));
+}
+
+function CreditItem({ index, grantedAt, expiresAt, isNext, t }: {
+  index: number; grantedAt: string; expiresAt: string; isNext: boolean; t: TFn;
+}) {
+  const days = daysUntil(expiresAt);
+  const urgent = days <= 7;
+  return (
+    <div className={`credit-item${isNext ? " credit-next" : ""}`}>
+      <div className="credit-item-head">
+        <IconTicket width={13} />
+        <span className="credit-item-label">
+          {isNext ? t("codexAuth.creditNext") : t("codexAuth.creditLabel", { n: String(index + 1) })}
+        </span>
+        {isNext && <span className="badge badge-amber" style={{ fontSize: 10, padding: "1px 6px" }}>{t("codexAuth.creditNextBadge")}</span>}
+      </div>
+      <div className="credit-item-dates">
+        <span>{t("codexAuth.creditGranted", { date: formatCreditDate(grantedAt) })}</span>
+        <span className={urgent ? "credit-urgent" : ""}>{t("codexAuth.creditExpires", { date: formatCreditDate(expiresAt), days: String(days) })}</span>
+      </div>
+    </div>
+  );
+}
+
 function isWorkspaceAccount(plan?: string): boolean {
   if (!plan) return false;
   return ["team", "business", "enterprise", "edu",

gui/src/styles.css

@@ -192,6 +192,13 @@ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
 .badge-clickable:hover { filter: brightness(1.1); }
 .badge-disabled { opacity: 0.5; cursor: default; }
 .confirm-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--amber-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: var(--amber); }
+.credit-list { display: flex; flex-direction: column; gap: 6px; }
+.credit-item { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--raised); transition: border-color 0.12s; }
+.credit-next { border-color: var(--amber); background: var(--amber-soft); }
+.credit-item-head { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 12px; font-weight: 600; margin-bottom: 3px; }
+.credit-item-head svg { color: var(--amber); flex-shrink: 0; }
+.credit-item-dates { display: flex; justify-content: space-between; font-size: 11px; font-family: var(--mono); color: var(--muted); }
+.credit-urgent { color: var(--red); font-weight: 600; }
 .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
 .dot-green { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
 .dot-red { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }

src/codex-auth-api.ts

@@ -297,6 +297,46 @@ export async function handleCodexAuthAPI(
     return jsonResponse({ quotas });
   }
 
+  if (url.pathname === "/api/codex-auth/reset-credits" && req.method === "GET") {
+    const accountId = url.searchParams.get("accountId");
+    if (!accountId) return jsonResponse({ error: "accountId required" }, 400);
+
+    const isMain = accountId === "__main__";
+    let accessToken: string;
+    let chatgptAccountId: string;
+
+    try {
+      if (isMain) {
+        const tokens = readCodexTokens();
+        if (!tokens) return jsonResponse({ error: "Main Codex account not logged in" }, 401);
+        accessToken = tokens.access_token;
+        chatgptAccountId = tokens.account_id;
+      } else {
+        const cred = await getValidCodexToken(accountId);
+        accessToken = cred.accessToken;
+        chatgptAccountId = cred.chatgptAccountId;
+      }
+
+      const resp = await fetch(
+        "https://chatgpt.com/backend-api/wham/rate-limit-reset-credits",
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "ChatGPT-Account-Id": chatgptAccountId,
+          },
+          signal: AbortSignal.timeout(8000),
+        },
+      );
+      if (!resp.ok) {
+        const text = await resp.text().catch(() => "");
+        return jsonResponse({ error: `Upstream error ${resp.status}`, detail: text }, resp.status);
+      }
+      return jsonResponse(await resp.json());
+    } catch (e) {
+      return jsonResponse({ error: String(e) }, 500);
+    }
+  }
+
   if (url.pathname === "/api/codex-auth/reset-credits/consume" && req.method === "POST") {
     const body = (await req.json().catch(() => ({}))) as { accountId?: string };
     if (!body.accountId) return jsonResponse({ error: "accountId required" }, 400);