fix(accounts): show one codex plan badge

ui/src/components/setup/wizard/steps/account-step.tsx

@@ -5,7 +5,7 @@
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { ChevronRight, ArrowLeft, User, ExternalLink } from 'lucide-react';
-import { getAccountIdentityPresentation } from '@/lib/account-identity';
+import { getAccountIdentityPresentation, getCodexIdentityBadge } from '@/lib/account-identity';
 import { cn } from '@/lib/utils';
 import { PRIVACY_BLUR_CLASS } from '@/contexts/privacy-context';
 import type { AccountStepProps } from '../types';
@@ -30,6 +30,8 @@ export function AccountStep({
       <div className="grid gap-2 max-h-[320px] overflow-y-auto pr-1">
         {accounts.map((acc) => {
           const identity = getAccountIdentityPresentation(acc.id, acc.email, acc.tokenFile);
+          const codexBadge =
+            acc.provider?.toLowerCase() === 'codex' ? getCodexIdentityBadge(identity) : null;
           return (
             <button
               key={acc.id}
@@ -46,7 +48,21 @@ export function AccountStep({
                     {identity.email}
                   </div>
                   <div className="flex items-center gap-1.5 flex-wrap">
-                    {identity.audienceLabel && (
+                    {codexBadge?.label ? (
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          'text-[10px] h-4 px-1.5 border-transparent',
+                          codexBadge.audience === 'business'
+                            ? 'bg-sky-500/12 text-sky-700 dark:text-sky-300'
+                            : codexBadge.audience === 'free'
+                              ? 'bg-slate-200/70 text-slate-700 dark:bg-slate-700/40 dark:text-slate-200'
+                              : 'bg-emerald-500/12 text-emerald-700 dark:text-emerald-300'
+                        )}
+                      >
+                        {codexBadge.label}
+                      </Badge>
+                    ) : identity.audienceLabel ? (
                       <Badge
                         variant="outline"
                         className={cn(
@@ -60,8 +76,8 @@ export function AccountStep({
                       >
                         {identity.audienceLabel}
                       </Badge>
-                    )}
-                    {identity.detailLabel && (
+                    ) : null}
+                    {!codexBadge?.label && identity.detailLabel && (
                       <Badge variant="outline" className="text-[10px] h-4 px-1.5">
                         {identity.detailLabel}
                       </Badge>

ui/src/components/setup/wizard/steps/variant-step.tsx

@@ -7,7 +7,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { getAccountIdentityPresentation } from '@/lib/account-identity';
+import { getAccountIdentityPresentation, getCodexIdentityBadge } from '@/lib/account-identity';
 import {
   Select,
   SelectContent,
@@ -55,6 +55,10 @@ export function VariantStep({
         selectedAccount.tokenFile
       )
     : null;
+  const selectedCodexBadge =
+    selectedProvider === 'codex' && selectedAccountIdentity
+      ? getCodexIdentityBadge(selectedAccountIdentity)
+      : null;
 
   const handleModelSelect = (value: string) => {
     if (value === CUSTOM_MODEL_VALUE) {
@@ -80,7 +84,21 @@ export function VariantStep({
             </span>
             {(selectedAccountIdentity?.audienceLabel || selectedAccountIdentity?.detailLabel) && (
               <div className="flex items-center gap-1.5 flex-wrap">
-                {selectedAccountIdentity?.audienceLabel && (
+                {selectedCodexBadge?.label ? (
+                  <Badge
+                    variant="outline"
+                    className={cn(
+                      'text-[10px] h-4 px-1.5 border-transparent',
+                      selectedCodexBadge.audience === 'business'
+                        ? 'bg-sky-500/12 text-sky-700 dark:text-sky-300'
+                        : selectedCodexBadge.audience === 'free'
+                          ? 'bg-slate-200/70 text-slate-700 dark:bg-slate-700/40 dark:text-slate-200'
+                          : 'bg-emerald-500/12 text-emerald-700 dark:text-emerald-300'
+                    )}
+                  >
+                    {selectedCodexBadge.label}
+                  </Badge>
+                ) : selectedAccountIdentity?.audienceLabel ? (
                   <Badge
                     variant="outline"
                     className={cn(
@@ -94,8 +112,8 @@ export function VariantStep({
                   >
                     {selectedAccountIdentity.audienceLabel}
                   </Badge>
-                )}
-                {selectedAccountIdentity?.detailLabel && (
+                ) : null}
+                {!selectedCodexBadge?.label && selectedAccountIdentity?.detailLabel && (
                   <Badge variant="outline" className="text-[10px] h-4 px-1.5">
                     {selectedAccountIdentity.detailLabel}
                   </Badge>