fix(codex-auth): keep tickets beside next-session badge

Author: lidge-jun

devlog/290_rate-limit-reset-credits/02_ui-spec.md

@@ -248,6 +248,8 @@ function TicketBadge({ account, onClick }: { account: AccountEntry; onClick: ()
 Uses `<button>` instead of `<span>` for accessibility (keyboard focus, screen reader).
 The `badge-clickable` class must not override `background`, `border`, or `font`;
 the visual badge variant (`badge-amber`, `badge-muted`, `badge-primary`) owns those styles.
+Ticket, plan, and session-state badges must render inside the same `card-badges`
+inline-flex group, so a reset ticket never replaces or overlaps `NEXT SESSION`.
 
 ### Reset Credit Popup (new modal, after existing confirm modal)
 

gui/src/pages/CodexAuth.tsx

@@ -159,9 +159,11 @@ 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={() => openResetPopup({ ...main, id: "__main__" } as AccountEntry)} />}
-          <span className={`badge ${!activeId ? "badge-primary" : "badge-muted"}`}>
-            {!activeId ? t("codexAuth.nextSession") : t("codexAuth.current")}
+          <span className="card-badges">
+            {main && <TicketBadge account={{ ...main, id: "__main__" } as AccountEntry} onClick={() => openResetPopup({ ...main, id: "__main__" } as AccountEntry)} />}
+            <span className={`badge ${!activeId ? "badge-primary" : "badge-muted"}`}>
+              {!activeId ? t("codexAuth.nextSession") : t("codexAuth.current")}
+            </span>
           </span>
           <span className="card-right"><IconLock width={14} /> {t("codexAuth.appLogin")}</span>
         </div>
@@ -185,10 +187,12 @@ export default function CodexAuth({ apiBase }: { apiBase: string }) {
           <div className="card-head">
             <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={() => 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>}
+            <span className="card-badges">
+              {a.plan && <span className="badge badge-green">{a.plan}</span>}
+              <TicketBadge account={a} onClick={() => 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>}
+            </span>
             <button
               className="btn-icon btn-icon-danger card-right"
               aria-label={t("common.remove")}

gui/src/styles.css

@@ -191,6 +191,8 @@ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
 .badge-clickable { cursor: pointer; transition: filter 0.12s; appearance: none; }
 .badge-clickable:hover { filter: brightness(1.1); }
 .badge-disabled { opacity: 0.5; cursor: default; }
+.card-badges { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
+.card-badges .badge { flex-shrink: 0; }
 .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; }

tests/rate-limit-reset-credits.test.ts

@@ -107,6 +107,16 @@ describe("rate-limit reset credits", () => {
       expect(match![1]).not.toContain("border: none");
       expect(styles).toContain("border: 1px solid transparent");
     });
+
+    it("renders reset tickets beside next-session badges instead of replacing them", async () => {
+      const source = await Bun.file("gui/src/pages/CodexAuth.tsx").text();
+      expect(source).toContain("className=\"card-badges\"");
+      expect(source).toContain("<TicketBadge account={a} onClick={() => openResetPopup(a)} />");
+      expect(source).toContain("{isNext(a.id) && !a.needsReauth && <span className=\"badge badge-primary\">{t(\"codexAuth.nextSession\")}</span>}");
+      const styles = await Bun.file("gui/src/styles.css").text();
+      expect(styles).toContain(".card-badges { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }");
+      expect(styles).toContain(".card-badges .badge { flex-shrink: 0; }");
+    });
   });
 
   describe("updateAccountQuota resetCredits", () => {