Settings: show codex account email + subscription expiry (#45)

- Extract email and chatgpt_subscription_last_checked from codex JWT in
  addition to plan_type and subscription_active_until.
- Settings → 계정 row now displays: email · plan badge · expiry badge
  with active/soon/expired color coding (green/amber/red).
- Fix codex/.codex-accounts directory scan picking up sibling dirs like
  "1.bak-..." and double-counting an index (require dirname to be
  fully numeric).

Motivation: rotation was landing on accounts whose Pro/Team subscription
had silently expired, causing OpenAI to reject upper-tier models with
a misleading "model not supported" error. Surface expiry in the UI so
the user can see at a glance which accounts need renewal.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

apps/dashboard/src/App.tsx

@@ -1234,6 +1234,34 @@ function ModelSettings({ onRestartStack }: { onRestartStack: () => void }) {
   );
 }
 
+function formatExpiry(
+  iso: string | null,
+): { label: string; cls: string } | null {
+  if (!iso) return null;
+  const dt = new Date(iso);
+  if (Number.isNaN(dt.getTime())) return null;
+  const days = (dt.getTime() - Date.now()) / 86400000;
+  const dateStr = dt.toLocaleDateString('ko-KR', {
+    year: '2-digit',
+    month: '2-digit',
+    day: '2-digit',
+  });
+  if (days < 0) {
+    const ago = Math.ceil(-days);
+    return { label: `${dateStr} 만료 (${ago}일 전)`, cls: 'is-expired' };
+  }
+  if (days < 7) {
+    return {
+      label: `${dateStr}까지 (${Math.floor(days)}일)`,
+      cls: 'is-soon',
+    };
+  }
+  return {
+    label: `${dateStr}까지 (${Math.floor(days)}일)`,
+    cls: 'is-active',
+  };
+}
+
 function AccountSettings({ onRestartStack }: { onRestartStack: () => void }) {
   const [data, setData] = useState<{
     claude: ClaudeAccountSummary[];
@@ -1309,29 +1337,39 @@ function AccountSettings({ onRestartStack }: { onRestartStack: () => void }) {
           <p className="settings-hint">계정 없음</p>
         ) : (
           <ul className="settings-account-list">
-            {data.claude.map((acc) => (
-              <li key={acc.index} className="settings-account-row">
-                <span className="settings-account-tag">#{acc.index}</span>
-                <span className="settings-account-meta">
-                  {acc.subscriptionType ?? 'unknown'}
-                  {acc.expiresAt
-                    ? ` · 만료 ${new Date(acc.expiresAt).toLocaleDateString()}`
-                    : ''}
-                </span>
-                {acc.index > 0 ? (
-                  <button
-                    className="settings-delete"
-                    disabled={busy}
-                    onClick={() => void handleDelete('claude', acc.index)}
-                    type="button"
-                  >
-                    삭제
-                  </button>
-                ) : (
-                  <span className="settings-account-default">기본</span>
-                )}
-              </li>
-            ))}
+            {data.claude.map((acc) => {
+              const expiry = formatExpiry(
+                acc.expiresAt ? new Date(acc.expiresAt).toISOString() : null,
+              );
+              return (
+                <li key={acc.index} className="settings-account-row">
+                  <div className="settings-account-main">
+                    <span className="settings-account-tag">#{acc.index}</span>
+                    <span className="settings-account-email">
+                      {acc.subscriptionType ?? 'unknown'}
+                      {acc.rateLimitTier ? ` · ${acc.rateLimitTier}` : ''}
+                    </span>
+                    {expiry ? (
+                      <span className={`settings-account-badge ${expiry.cls}`}>
+                        {expiry.label}
+                      </span>
+                    ) : null}
+                  </div>
+                  {acc.index > 0 ? (
+                    <button
+                      className="settings-delete"
+                      disabled={busy}
+                      onClick={() => void handleDelete('claude', acc.index)}
+                      type="button"
+                    >
+                      삭제
+                    </button>
+                  ) : (
+                    <span className="settings-account-default">기본</span>
+                  )}
+                </li>
+              );
+            })}
           </ul>
         )}
         <div className="settings-add-token">
@@ -1359,29 +1397,51 @@ function AccountSettings({ onRestartStack }: { onRestartStack: () => void }) {
           <p className="settings-hint">계정 없음</p>
         ) : (
           <ul className="settings-account-list">
-            {data.codex.map((acc) => (
-              <li key={acc.index} className="settings-account-row">
-                <span className="settings-account-tag">#{acc.index}</span>
-                <span className="settings-account-meta">
-                  {acc.planType ?? 'unknown'}
-                  {acc.subscriptionUntil
-                    ? ` · ${acc.subscriptionUntil}까지`
-                    : ''}
-                </span>
-                {acc.index > 0 ? (
-                  <button
-                    className="settings-delete"
-                    disabled={busy}
-                    onClick={() => void handleDelete('codex', acc.index)}
-                    type="button"
-                  >
-                    삭제
-                  </button>
-                ) : (
-                  <span className="settings-account-default">기본</span>
-                )}
-              </li>
-            ))}
+            {data.codex.map((acc) => {
+              const expiry = formatExpiry(acc.subscriptionUntil);
+              return (
+                <li key={acc.index} className="settings-account-row">
+                  <div className="settings-account-main">
+                    <span className="settings-account-tag">#{acc.index}</span>
+                    {acc.email ? (
+                      <span
+                        className="settings-account-email"
+                        title={acc.email}
+                      >
+                        {acc.email}
+                      </span>
+                    ) : null}
+                    <span className="settings-account-plan">
+                      {acc.planType ?? 'unknown'}
+                    </span>
+                    {expiry ? (
+                      <span
+                        className={`settings-account-badge ${expiry.cls}`}
+                        title={
+                          acc.subscriptionLastChecked
+                            ? `last checked: ${acc.subscriptionLastChecked.slice(0, 10)}`
+                            : undefined
+                        }
+                      >
+                        {expiry.label}
+                      </span>
+                    ) : null}
+                  </div>
+                  {acc.index > 0 ? (
+                    <button
+                      className="settings-delete"
+                      disabled={busy}
+                      onClick={() => void handleDelete('codex', acc.index)}
+                      type="button"
+                    >
+                      삭제
+                    </button>
+                  ) : (
+                    <span className="settings-account-default">기본</span>
+                  )}
+                </li>
+              );
+            })}
           </ul>
         )}
         <p className="settings-hint">

apps/dashboard/src/api.ts

@@ -355,8 +355,10 @@ export interface ClaudeAccountSummary {
 export interface CodexAccountSummary {
   index: number;
   accountId: string | null;
+  email: string | null;
   planType: string | null;
   subscriptionUntil: string | null;
+  subscriptionLastChecked: string | null;
   exists: boolean;
 }
 

apps/dashboard/src/styles.css

@@ -864,21 +864,74 @@ button:disabled {
 
 .settings-account-row {
   display: grid;
-  grid-template-columns: 40px minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 10px;
   align-items: center;
-  padding: 6px 8px;
+  padding: 8px 10px;
   border: 1px solid var(--panel-border);
-  border-radius: 6px;
+  border-radius: 8px;
   background: rgba(255, 255, 255, 0.02);
 }
 
+.settings-account-main {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  align-items: center;
+  min-width: 0;
+}
+
 .settings-account-tag {
+  flex: none;
   font-family: 'JetBrains Mono', ui-monospace, monospace;
   font-size: 11px;
   color: var(--muted);
 }
 
+.settings-account-email {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--bg-ink);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.settings-account-plan {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--muted);
+}
+
+.settings-account-badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-variant-numeric: tabular-nums;
+}
+
+.settings-account-badge.is-active {
+  background: rgba(80, 180, 130, 0.14);
+  color: #6dc89a;
+}
+
+.settings-account-badge.is-soon {
+  background: rgba(214, 170, 60, 0.16);
+  color: #e0bc5b;
+}
+
+.settings-account-badge.is-expired {
+  background: rgba(224, 100, 75, 0.16);
+  color: var(--status-critical, #e0644b);
+}
+
 .settings-account-meta {
   font-size: 12px;
   color: var(--bg-ink);