feat(codex): import provider credentials flexibly

README.md

@@ -82,7 +82,7 @@ responses retain their upstream wire shape.
 | Provider | Connection | Model catalog |
 | --- | --- | --- |
 | GitHub Copilot | GitHub device OAuth on `github.com` or a `*.ghe.com` tenant | Fetched live from Copilot |
-| Codex | ChatGPT subscription through the Codex CLI OAuth client | Live inference catalog plus the account's built-in GPT Image capability |
+| Codex | ChatGPT subscription: the Codex CLI OAuth client, a pasted credential JSON, or typed token fields | Fetched live from the Codex backend, plus the account's built-in GPT Image capability |
 | Claude Code | Claude.ai Pro, Max, Team, or Enterprise subscription through the Claude Code CLI OAuth client | Fetched live from Anthropic |
 | Custom | Configurable multi-protocol HTTP endpoint, credential, and per-header ingress passthrough/overwrite rules | Live `/models` (OpenAI, Anthropic, or superset shapes), manual models, or both |
 | Azure | Azure AI resource or Foundry project endpoint and API key | Configured models |

apps/web/src/components/upstream-editor/claude-code-account-card.tsx

@@ -3,7 +3,6 @@ import { ArrowClockwiseRegular } from '@fluentui/react-icons';
 import { fluentComponents } from '../../fluent';
 import { useTranslation } from '../../i18n/translation';
 import { dateTime, relativeTime } from '../../lib/format-time';
-import { clampPercent, percentText } from '../../lib/percent';
 import { useLocale } from '../../lib/use-locale';
 import { useNow } from '../../lib/use-now';
 import { StatusBadge } from '../ui/status-badge';
@@ -20,11 +19,12 @@ import {
   subscriptionLabel,
 } from '../upstreams/claude-code-account';
 import { ProviderIcon } from '../upstreams/provider-badge';
-import { quotaBarColor, WALL_CLOCK_REFRESH_MS } from '../upstreams/subscription-quota';
+import { QuotaProgressRow } from '../upstreams/quota-progress-row';
+import { WALL_CLOCK_REFRESH_MS } from '../upstreams/subscription-quota';
 
 const {
   Accordion, AccordionHeader, AccordionItem, AccordionPanel, Badge, Button,
-  MessageBar, MessageBarBody, ProgressBar, Spinner, Text, Tooltip,
+  MessageBar, MessageBarBody, Spinner, Text, Tooltip,
 } = fluentComponents;
 
 export function ClaudeCodeAccountCard({ onRefreshQuota, probing, record }: {
@@ -94,25 +94,20 @@ export function ClaudeCodeAccountCard({ onRefreshQuota, probing, record }: {
 
     {windows.length > 0 && <div className="grid gap-3">
       {windows.map(row => {
-        const percent = clampPercent(row.percent);
-        return <div key={row.key} className="grid gap-1">
-          <div className="flex items-baseline justify-between gap-3">
-            <Text size={200}>{t(`dashboard.upstreamEditor.claudeCode.window.${row.key}`)}</Text>
-            <div className="flex items-baseline gap-2">
-              <Text size={200} className="text-fui-fg2">{percentText(percent)}</Text>
-              {row.status && <Text size={200} className="text-fui-fg3">{row.status}</Text>}
-            </div>
-          </div>
-          <ProgressBar color={quotaBarColor(percent)} max={100} thickness="large" value={percent ?? undefined} />
-          <div className="flex flex-wrap items-baseline justify-between gap-x-3">
+        return <QuotaProgressRow
+          key={row.key}
+          label={t(`dashboard.upstreamEditor.claudeCode.window.${row.key}`)}
+          percent={row.percent}
+          right={row.status && <Text size={200} className="text-fui-fg3">{row.status}</Text>}
+          footer={<div className="flex flex-wrap items-baseline justify-between gap-x-3">
             {row.resetAt && <Text size={200} className="text-fui-fg3">
               {t('dashboard.upstreamEditor.claudeCode.resetsAt', { time: dateTime(row.resetAt, locale) })}
             </Text>}
             <Text size={200} className="text-fui-fg3">
               {t('dashboard.upstreamEditor.claudeCode.observed', { time: dateTime(row.fetchedAt, locale) })}
             </Text>
-          </div>
-        </div>;
+          </div>}
+        />;
       })}
     </div>}