fix: AI profile display issues for Codex models

- Fix Codex profiles showing as 'Claude Sonnet' in UI - Add proper Codex model display in profile cards and selectors - Add useEffect to sync profile form data when editing profiles - Update provider badges to show 'Codex' with OpenAI icon - Enhance profile selection validation across feature dialogs - Add getCodexModelLabel support to display functions The issue was that profile display functions only handled Claude and Cursor providers, causing Codex profiles to fallback to 'sonnet' display.
2026-01-31 06:42:03 +00:00 · 2026-01-08 17:13:45 +05:30
parent d253d494ba
commit 8a9715adef
9 changed files with 122 additions and 20 deletions
--- a/apps/ui/src/components/ui/provider-icon.tsx
+++ b/apps/ui/src/components/ui/provider-icon.tsx
@@ -20,8 +20,9 @@ interface ProviderIconDefinition {

 const PROVIDER_ICON_DEFINITIONS: Record<ProviderIconKey, ProviderIconDefinition> = {
  anthropic: {
-    viewBox: '0 0 24 24',
-    path: 'M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z',
+    viewBox: '0 0 248 248',
+    // Official Claude logo from claude.ai favicon
+    path: 'M52.4285 162.873L98.7844 136.879L99.5485 134.602L98.7844 133.334H96.4921L88.7237 132.862L62.2346 132.153L39.3113 131.207L17.0249 130.026L11.4214 128.844L6.2 121.873L6.7094 118.447L11.4214 115.257L18.171 115.847L33.0711 116.911L55.485 118.447L71.6586 119.392L95.728 121.873H99.5485L100.058 120.337L98.7844 119.392L97.7656 118.447L74.5877 102.732L49.4995 86.1905L36.3823 76.62L29.3779 71.7757L25.8121 67.2858L24.2839 57.3608L30.6515 50.2716L39.3113 50.8623L41.4763 51.4531L50.2636 58.1879L68.9842 72.7209L93.4357 90.6804L97.0015 93.6343L98.4374 92.6652L98.6571 91.9801L97.0015 89.2625L83.757 65.2772L69.621 40.8192L63.2534 30.6579L61.5978 24.632C60.9565 22.1032 60.579 20.0111 60.579 17.4246L67.8381 7.49965L71.9133 6.19995L81.7193 7.49965L85.7946 11.0443L91.9074 24.9865L101.714 46.8451L116.996 76.62L121.453 85.4816L123.873 93.6343L124.764 96.1155H126.292V94.6976L127.566 77.9197L129.858 57.3608L132.15 30.8942L132.915 23.4505L136.608 14.4708L143.994 9.62643L149.725 12.344L154.437 19.0788L153.8 23.4505L150.998 41.6463L145.522 70.1215L141.957 89.2625H143.994L146.414 86.7813L156.093 74.0206L172.266 53.698L179.398 45.6635L187.803 36.802L193.152 32.5484H203.34L210.726 43.6549L207.415 55.1159L196.972 68.3492L188.312 79.5739L175.896 96.2095L168.191 109.585L168.882 110.689L170.738 110.53L198.755 104.504L213.91 101.787L231.994 98.7149L240.144 102.496L241.036 106.395L237.852 114.311L218.495 119.037L195.826 123.645L162.07 131.592L161.696 131.893L162.137 132.547L177.36 133.925L183.855 134.279H199.774L229.447 136.524L237.215 141.605L241.8 147.867L241.036 152.711L229.065 158.737L213.019 154.956L175.45 145.977L162.587 142.787H160.805V143.85L171.502 154.366L191.242 172.089L215.82 195.011L217.094 200.682L213.91 205.172L210.599 204.699L188.949 188.394L180.544 181.069L161.696 165.118H160.422V166.772L164.752 173.152L187.803 207.771L188.949 218.405L187.294 221.832L181.308 223.959L174.813 222.777L161.187 203.754L147.305 182.486L136.098 163.345L134.745 164.2L128.075 235.42L125.019 239.082L117.887 241.8L111.902 237.31L108.718 229.984L111.902 215.452L115.722 196.547L118.779 181.541L121.58 162.873L123.291 156.636L123.14 156.219L121.773 156.449L107.699 175.752L86.304 204.699L69.3663 222.777L65.291 224.431L58.2867 220.768L58.9235 214.27L62.8713 208.48L86.304 178.705L100.44 160.155L109.551 149.507L109.462 147.967L108.959 147.924L46.6977 188.512L35.6182 189.93L30.7788 185.44L31.4156 178.115L33.7079 175.752L52.4285 162.873Z',
  },
  openai: {
    viewBox: '0 0 158.7128 157.296',
--- a/apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx
+++ b/apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx
@@ -368,11 +368,23 @@ export function AddFeatureDialog({
        thinkingLevel: 'none', // Cursor handles thinking internally
      });
    } else {
-      // Claude profile
+      // Claude profile - ensure model is always set from profile
+      const profileModel = profile.model;
+      if (!profileModel || !['haiku', 'sonnet', 'opus'].includes(profileModel)) {
+        console.warn(
+          `[ProfileSelect] Invalid or missing model "${profileModel}" for profile "${profile.name}", defaulting to sonnet`
+        );
+      }
      setNewFeature({
        ...newFeature,
-        model: profile.model || 'sonnet',
-        thinkingLevel: profile.thinkingLevel || 'none',
+        model:
+          profileModel && ['haiku', 'sonnet', 'opus'].includes(profileModel)
+            ? profileModel
+            : 'sonnet',
+        thinkingLevel:
+          profile.thinkingLevel && profile.thinkingLevel !== 'none'
+            ? profile.thinkingLevel
+            : 'none',
      });
    }
  };
--- a/apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
+++ b/apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
@@ -256,11 +256,23 @@ export function EditFeatureDialog({
        thinkingLevel: 'none', // Cursor handles thinking internally
      });
    } else {
-      // Claude profile
+      // Claude profile - ensure model is always set from profile
+      const profileModel = profile.model;
+      if (!profileModel || !['haiku', 'sonnet', 'opus'].includes(profileModel)) {
+        console.warn(
+          `[ProfileSelect] Invalid or missing model "${profileModel}" for profile "${profile.name}", defaulting to sonnet`
+        );
+      }
      setEditingFeature({
        ...editingFeature,
-        model: profile.model || 'sonnet',
-        thinkingLevel: profile.thinkingLevel || 'none',
+        model:
+          profileModel && ['haiku', 'sonnet', 'opus'].includes(profileModel)
+            ? profileModel
+            : 'sonnet',
+        thinkingLevel:
+          profile.thinkingLevel && profile.thinkingLevel !== 'none'
+            ? profile.thinkingLevel
+            : 'none',
      });
    }
  };
--- a/apps/ui/src/components/views/board-view/shared/model-constants.ts
+++ b/apps/ui/src/components/views/board-view/shared/model-constants.ts
@@ -2,6 +2,7 @@ import type { ModelAlias } from '@/store/app-store';
 import type { ModelProvider, ThinkingLevel, ReasoningEffort } from '@automaker/types';
 import { CURSOR_MODEL_MAP, CODEX_MODEL_MAP } from '@automaker/types';
 import { Brain, Zap, Scale, Cpu, Rocket, Sparkles } from 'lucide-react';
+import { AnthropicIcon, CursorIcon, OpenAIIcon } from '@/components/ui/provider-icon';

 export type ModelOption = {
  id: string; // Claude models use ModelAlias, Cursor models use "cursor-{id}"
@@ -142,4 +143,7 @@ export const PROFILE_ICONS: Record<string, React.ComponentType<{ className?: str
  Cpu,
  Rocket,
  Sparkles,
+  Anthropic: AnthropicIcon,
+  Cursor: CursorIcon,
+  Codex: OpenAIIcon,
 };
--- a/apps/ui/src/components/views/board-view/shared/profile-quick-select.tsx
+++ b/apps/ui/src/components/views/board-view/shared/profile-quick-select.tsx
@@ -2,7 +2,12 @@ import { Label } from '@/components/ui/label';
 import { Brain, UserCircle, Terminal } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { ModelAlias, ThinkingLevel, AIProfile, CursorModelId } from '@automaker/types';
-import { CURSOR_MODEL_MAP, profileHasThinking, PROVIDER_PREFIXES } from '@automaker/types';
+import {
+  CURSOR_MODEL_MAP,
+  profileHasThinking,
+  PROVIDER_PREFIXES,
+  getCodexModelLabel,
+} from '@automaker/types';
 import { PROFILE_ICONS } from './model-constants';

 /**
@@ -14,6 +19,9 @@ function getProfileModelDisplay(profile: AIProfile): string {
    const modelConfig = CURSOR_MODEL_MAP[cursorModel];
    return modelConfig?.label || cursorModel;
  }
+  if (profile.provider === 'codex') {
+    return getCodexModelLabel(profile.codexModel || 'gpt-5.2-codex');
+  }
  // Claude
  return profile.model || 'sonnet';
 }
@@ -26,6 +34,10 @@ function getProfileThinkingDisplay(profile: AIProfile): string | null {
    // For Cursor, thinking is embedded in the model
    return profileHasThinking(profile) ? 'thinking' : null;
  }
+  if (profile.provider === 'codex') {
+    // For Codex, thinking is embedded in the model
+    return profileHasThinking(profile) ? 'thinking' : null;
+  }
  // Claude
  return profile.thinkingLevel && profile.thinkingLevel !== 'none' ? profile.thinkingLevel : null;
 }
--- a/apps/ui/src/components/views/board-view/shared/profile-select.tsx
+++ b/apps/ui/src/components/views/board-view/shared/profile-select.tsx
@@ -8,7 +8,12 @@ import {
 import { Brain, Terminal } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { ModelAlias, ThinkingLevel, AIProfile, CursorModelId } from '@automaker/types';
-import { CURSOR_MODEL_MAP, profileHasThinking, PROVIDER_PREFIXES } from '@automaker/types';
+import {
+  CURSOR_MODEL_MAP,
+  profileHasThinking,
+  PROVIDER_PREFIXES,
+  getCodexModelLabel,
+} from '@automaker/types';
 import { PROFILE_ICONS } from './model-constants';

 /**
@@ -20,6 +25,9 @@ function getProfileModelDisplay(profile: AIProfile): string {
    const modelConfig = CURSOR_MODEL_MAP[cursorModel];
    return modelConfig?.label || cursorModel;
  }
+  if (profile.provider === 'codex') {
+    return getCodexModelLabel(profile.codexModel || 'gpt-5.2-codex');
+  }
  // Claude
  return profile.model || 'sonnet';
 }
@@ -32,6 +40,10 @@ function getProfileThinkingDisplay(profile: AIProfile): string | null {
    // For Cursor, thinking is embedded in the model
    return profileHasThinking(profile) ? 'thinking' : null;
  }
+  if (profile.provider === 'codex') {
+    // For Codex, thinking is embedded in the model
+    return profileHasThinking(profile) ? 'thinking' : null;
+  }
  // Claude
  return profile.thinkingLevel && profile.thinkingLevel !== 'none' ? profile.thinkingLevel : null;
 }
--- a/apps/ui/src/components/views/profiles-view/components/profile-form.tsx
+++ b/apps/ui/src/components/views/profiles-view/components/profile-form.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { HotkeyButton } from '@/components/ui/hotkey-button';
 import { Input } from '@/components/ui/input';
@@ -53,15 +53,33 @@ export function ProfileForm({
    icon: profile.icon || 'Brain',
  });

+  // Sync formData with profile prop when it changes
+  useEffect(() => {
+    setFormData({
+      name: profile.name || '',
+      description: profile.description || '',
+      provider: (profile.provider || 'claude') as ModelProvider,
+      // Claude-specific
+      model: profile.model || ('sonnet' as ModelAlias),
+      thinkingLevel: profile.thinkingLevel || ('none' as ThinkingLevel),
+      // Cursor-specific
+      cursorModel: profile.cursorModel || ('auto' as CursorModelId),
+      // Codex-specific - use a valid CodexModelId from CODEX_MODEL_MAP
+      codexModel: profile.codexModel || (CODEX_MODEL_MAP.gpt52Codex as CodexModelId),
+      icon: profile.icon || 'Brain',
+    });
+  }, [profile]);
+
  const supportsThinking = formData.provider === 'claude' && modelSupportsThinking(formData.model);

  const handleProviderChange = (provider: ModelProvider) => {
    setFormData({
      ...formData,
      provider,
-      // Reset to defaults when switching providers
+      // Only reset Claude fields when switching TO Claude; preserve otherwise
      model: provider === 'claude' ? 'sonnet' : formData.model,
      thinkingLevel: provider === 'claude' ? 'none' : formData.thinkingLevel,
+      // Reset cursor/codex models when switching to that provider
      cursorModel: provider === 'cursor' ? 'auto' : formData.cursorModel,
      codexModel:
        provider === 'codex' ? (CODEX_MODEL_MAP.gpt52Codex as CodexModelId) : formData.codexModel,
@@ -95,6 +113,15 @@ export function ProfileForm({
      return;
    }

+    // Ensure model is always set for Claude profiles
+    const validModels: ModelAlias[] = ['haiku', 'sonnet', 'opus'];
+    const finalModel =
+      formData.provider === 'claude'
+        ? validModels.includes(formData.model)
+          ? formData.model
+          : 'sonnet'
+        : undefined;
+
    const baseProfile = {
      name: formData.name.trim(),
      description: formData.description.trim(),
@@ -116,7 +143,7 @@ export function ProfileForm({
    } else {
      onSave({
        ...baseProfile,
-        model: formData.model,
+        model: finalModel as ModelAlias,
        thinkingLevel: supportsThinking ? formData.thinkingLevel : 'none',
      });
    }
--- a/apps/ui/src/components/views/profiles-view/components/sortable-profile-card.tsx
+++ b/apps/ui/src/components/views/profiles-view/components/sortable-profile-card.tsx
@@ -1,11 +1,12 @@
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
-import { GripVertical, Lock, Pencil, Trash2, Brain, Bot, Terminal } from 'lucide-react';
+import { GripVertical, Lock, Pencil, Trash2 } from 'lucide-react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import type { AIProfile } from '@automaker/types';
-import { CURSOR_MODEL_MAP, profileHasThinking } from '@automaker/types';
+import { CURSOR_MODEL_MAP, profileHasThinking, getCodexModelLabel } from '@automaker/types';
 import { PROFILE_ICONS } from '../constants';
+import { AnthropicIcon, CursorIcon, OpenAIIcon } from '@/components/ui/provider-icon';

 interface SortableProfileCardProps {
  profile: AIProfile;
@@ -24,7 +25,13 @@ export function SortableProfileCard({ profile, onEdit, onDelete }: SortableProfi
    opacity: isDragging ? 0.5 : 1,
  };

-  const IconComponent = profile.icon ? PROFILE_ICONS[profile.icon] : Brain;
+  const getDefaultIcon = () => {
+    if (profile.provider === 'cursor') return CursorIcon;
+    if (profile.provider === 'codex') return OpenAIIcon;
+    return AnthropicIcon;
+  };
+
+  const IconComponent = profile.icon ? PROFILE_ICONS[profile.icon] : getDefaultIcon();

  return (
    <div
@@ -72,11 +79,17 @@ export function SortableProfileCard({ profile, onEdit, onDelete }: SortableProfi
          {/* Provider badge */}
          <span className="text-xs px-2 py-0.5 rounded-full border border-border text-muted-foreground bg-muted/50 flex items-center gap-1">
            {profile.provider === 'cursor' ? (
-              <Terminal className="w-3 h-3" />
+              <CursorIcon className="w-3 h-3" />
+            ) : profile.provider === 'codex' ? (
+              <OpenAIIcon className="w-3 h-3" />
            ) : (
-              <Bot className="w-3 h-3" />
+              <AnthropicIcon className="w-3 h-3" />
            )}
-            {profile.provider === 'cursor' ? 'Cursor' : 'Claude'}
+            {profile.provider === 'cursor'
+              ? 'Cursor'
+              : profile.provider === 'codex'
+                ? 'Codex'
+                : 'Claude'}
          </span>

          {/* Model badge */}
@@ -85,7 +98,9 @@ export function SortableProfileCard({ profile, onEdit, onDelete }: SortableProfi
              ? CURSOR_MODEL_MAP[profile.cursorModel || 'auto']?.label ||
                profile.cursorModel ||
                'auto'
-              : profile.model || 'sonnet'}
+              : profile.provider === 'codex'
+                ? getCodexModelLabel(profile.codexModel || 'gpt-5.2-codex')
+                : profile.model || 'sonnet'}
          </span>

          {/* Thinking badge - works for both providers */}
--- a/apps/ui/src/components/views/profiles-view/constants.ts
+++ b/apps/ui/src/components/views/profiles-view/constants.ts
@@ -1,5 +1,6 @@
 import { Brain, Zap, Scale, Cpu, Rocket, Sparkles } from 'lucide-react';
 import type { ModelAlias, ThinkingLevel } from '@/store/app-store';
+import { AnthropicIcon, CursorIcon, OpenAIIcon } from '@/components/ui/provider-icon';

 // Icon mapping for profiles
 export const PROFILE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -9,6 +10,9 @@ export const PROFILE_ICONS: Record<string, React.ComponentType<{ className?: str
  Cpu,
  Rocket,
  Sparkles,
+  Anthropic: AnthropicIcon,
+  Cursor: CursorIcon,
+  Codex: OpenAIIcon,
 };

 // Available icons for selection
@@ -19,6 +23,9 @@ export const ICON_OPTIONS = [
  { name: 'Cpu', icon: Cpu },
  { name: 'Rocket', icon: Rocket },
  { name: 'Sparkles', icon: Sparkles },
+  { name: 'Anthropic', icon: AnthropicIcon },
+  { name: 'Cursor', icon: CursorIcon },
+  { name: 'Codex', icon: OpenAIIcon },
 ];

 // Model options for the form