feat: update Codex services and UI components for enhanced model management

- Bumped version numbers for @automaker/server and @automaker/ui to 0.9.0 in package-lock.json.
- Introduced CodexAppServerService and CodexModelCacheService to manage communication with the Codex CLI's app-server and cache model data.
- Updated CodexUsageService to utilize app-server for fetching usage data.
- Enhanced Codex routes to support fetching available models and integrated model caching.
- Improved UI components to dynamically load and display Codex models, including error handling and loading states.
- Added new API methods for fetching Codex models and integrated them into the app store for state management.

These changes improve the overall functionality and user experience of the Codex integration, ensuring efficient model management and data retrieval.

apps/ui/src/components/views/board-view/shared/model-selector.tsx

@@ -9,7 +9,9 @@ import { useAppStore } from '@/store/app-store';
 import { useSetupStore } from '@/store/setup-store';
 import { getModelProvider, PROVIDER_PREFIXES, stripProviderPrefix } from '@automaker/types';
 import type { ModelProvider } from '@automaker/types';
-import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS, ModelOption } from './model-constants';
+import { CLAUDE_MODELS, CURSOR_MODELS, ModelOption } from './model-constants';
+import { useEffect } from 'react';
+import { RefreshCw } from 'lucide-react';
 
 interface ModelSelectorProps {
   selectedModel: string; // Can be ModelAlias or "cursor-{id}"
@@ -22,7 +24,14 @@ export function ModelSelector({
   onModelSelect,
   testIdPrefix = 'model-select',
 }: ModelSelectorProps) {
-  const { enabledCursorModels, cursorDefaultModel } = useAppStore();
+  const {
+    enabledCursorModels,
+    cursorDefaultModel,
+    codexModels,
+    codexModelsLoading,
+    codexModelsError,
+    fetchCodexModels,
+  } = useAppStore();
   const { cursorCliStatus, codexCliStatus } = useSetupStore();
 
   const selectedProvider = getModelProvider(selectedModel);
@@ -33,6 +42,31 @@ export function ModelSelector({
   // Check if Codex CLI is available
   const isCodexAvailable = codexCliStatus?.installed && codexCliStatus?.auth?.authenticated;
 
+  // Fetch Codex models on mount
+  useEffect(() => {
+    if (isCodexAvailable && codexModels.length === 0 && !codexModelsLoading) {
+      fetchCodexModels();
+    }
+  }, [isCodexAvailable, codexModels.length, codexModelsLoading, fetchCodexModels]);
+
+  // Transform codex models from store to ModelOption format
+  const dynamicCodexModels: ModelOption[] = codexModels.map((model) => {
+    // Infer badge based on tier
+    let badge: string | undefined;
+    if (model.tier === 'premium') badge = 'Premium';
+    else if (model.tier === 'basic') badge = 'Speed';
+    else if (model.tier === 'standard') badge = 'Balanced';
+
+    return {
+      id: model.id,
+      label: model.label,
+      description: model.description,
+      badge,
+      provider: 'codex' as ModelProvider,
+      hasThinking: model.hasThinking,
+    };
+  });
+
   // Filter Cursor models based on enabled models from global settings
   const filteredCursorModels = CURSOR_MODELS.filter((model) => {
     // Extract the cursor model ID from the prefixed ID (e.g., "cursor-auto" -> "auto")
@@ -45,8 +79,10 @@ export function ModelSelector({
       // Switch to Cursor's default model (from global settings)
       onModelSelect(`${PROVIDER_PREFIXES.cursor}${cursorDefaultModel}`);
     } else if (provider === 'codex' && selectedProvider !== 'codex') {
-      // Switch to Codex's default model (codex-gpt-5.2-codex)
-      onModelSelect('codex-gpt-5.2-codex');
+      // Switch to Codex's default model (use isDefault flag from dynamic models)
+      const defaultModel = codexModels.find((m) => m.isDefault);
+      const defaultModelId = defaultModel?.id || codexModels[0]?.id || 'codex-gpt-5.2-codex';
+      onModelSelect(defaultModelId);
     } else if (provider === 'claude' && selectedProvider !== 'claude') {
       // Switch to Claude's default model
       onModelSelect('sonnet');
@@ -234,41 +270,91 @@ export function ModelSelector({
               CLI
             </span>
           </div>
-          <div className="flex flex-col gap-2">
-            {CODEX_MODELS.map((option) => {
-              const isSelected = selectedModel === option.id;
-              return (
+
+          {/* Loading state */}
+          {codexModelsLoading && dynamicCodexModels.length === 0 && (
+            <div className="flex items-center justify-center gap-2 p-6 text-sm text-muted-foreground">
+              <RefreshCw className="w-4 h-4 animate-spin" />
+              Loading models...
+            </div>
+          )}
+
+          {/* Error state */}
+          {codexModelsError && !codexModelsLoading && (
+            <div className="flex items-start gap-2 p-3 rounded-lg bg-red-500/10 border border-red-500/20">
+              <AlertTriangle className="w-4 h-4 text-red-400 mt-0.5 shrink-0" />
+              <div className="space-y-1">
+                <div className="text-sm text-red-400">Failed to load Codex models</div>
                 <button
-                  key={option.id}
                   type="button"
-                  onClick={() => onModelSelect(option.id)}
-                  title={option.description}
-                  className={cn(
-                    'w-full px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-between',
-                    isSelected
-                      ? 'bg-primary text-primary-foreground border-primary'
-                      : 'bg-background hover:bg-accent border-border'
-                  )}
-                  data-testid={`${testIdPrefix}-${option.id}`}
+                  onClick={() => fetchCodexModels(true)}
+                  className="text-xs text-red-400 underline hover:no-underline"
                 >
-                  <span>{option.label}</span>
-                  {option.badge && (
-                    <Badge
-                      variant="outline"
-                      className={cn(
-                        'text-xs',
-                        isSelected
-                          ? 'border-primary-foreground/50 text-primary-foreground'
-                          : 'border-muted-foreground/50 text-muted-foreground'
-                      )}
-                    >
-                      {option.badge}
-                    </Badge>
-                  )}
+                  Retry
                 </button>
-              );
-            })}
-          </div>
+              </div>
+            </div>
+          )}
+
+          {/* Model list */}
+          {!codexModelsLoading && !codexModelsError && dynamicCodexModels.length === 0 && (
+            <div className="text-sm text-muted-foreground p-3 border border-dashed rounded-md text-center">
+              No Codex models available
+            </div>
+          )}
+
+          {!codexModelsLoading && dynamicCodexModels.length > 0 && (
+            <div className="flex flex-col gap-2">
+              {dynamicCodexModels.map((option) => {
+                const isSelected = selectedModel === option.id;
+                return (
+                  <button
+                    key={option.id}
+                    type="button"
+                    onClick={() => onModelSelect(option.id)}
+                    title={option.description}
+                    className={cn(
+                      'w-full px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-between',
+                      isSelected
+                        ? 'bg-primary text-primary-foreground border-primary'
+                        : 'bg-background hover:bg-accent border-border'
+                    )}
+                    data-testid={`${testIdPrefix}-${option.id}`}
+                  >
+                    <span>{option.label}</span>
+                    <div className="flex gap-1">
+                      {option.hasThinking && (
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            'text-xs',
+                            isSelected
+                              ? 'border-primary-foreground/50 text-primary-foreground'
+                              : 'border-emerald-500/50 text-emerald-600 dark:text-emerald-400'
+                          )}
+                        >
+                          Thinking
+                        </Badge>
+                      )}
+                      {option.badge && (
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            'text-xs',
+                            isSelected
+                              ? 'border-primary-foreground/50 text-primary-foreground'
+                              : 'border-muted-foreground/50 text-muted-foreground'
+                          )}
+                        >
+                          {option.badge}
+                        </Badge>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
         </div>
       )}
     </div>