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.
2026-01-31 06:42:03 +00:00 · 2026-01-10 14:33:55 +01:00
parent eb94e4de72
commit 99b05d35a2
16 changed files with 981 additions and 409 deletions
--- a/apps/ui/src/components/views/board-view/shared/model-selector.tsx
+++ b/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>
--- a/apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx
+++ b/apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '@/lib/utils';
 import { useAppStore } from '@/store/app-store';
 import type {
@@ -8,8 +8,6 @@ import type {
  OpencodeModelId,
  GroupedModel,
  PhaseModelEntry,
-  ThinkingLevel,
-  ReasoningEffort,
 } from '@automaker/types';
 import {
  stripProviderPrefix,
@@ -17,13 +15,11 @@ import {
  getModelGroup,
  isGroupSelected,
  getSelectedVariant,
-  isCursorModel,
  codexModelHasThinking,
 } from '@automaker/types';
 import {
  CLAUDE_MODELS,
  CURSOR_MODELS,
-  CODEX_MODELS,
  OPENCODE_MODELS,
  THINKING_LEVELS,
  THINKING_LEVEL_LABELS,
@@ -73,23 +69,39 @@ export function PhaseModelSelector({
  align = 'end',
  disabled = false,
 }: PhaseModelSelectorProps) {
-  const [open, setOpen] = React.useState(false);
-  const [expandedGroup, setExpandedGroup] = React.useState<string | null>(null);
-  const [expandedClaudeModel, setExpandedClaudeModel] = React.useState<ModelAlias | null>(null);
-  const [expandedCodexModel, setExpandedCodexModel] = React.useState<CodexModelId | null>(null);
-  const commandListRef = React.useRef<HTMLDivElement>(null);
-  const expandedTriggerRef = React.useRef<HTMLDivElement>(null);
-  const expandedClaudeTriggerRef = React.useRef<HTMLDivElement>(null);
-  const expandedCodexTriggerRef = React.useRef<HTMLDivElement>(null);
-  const { enabledCursorModels, favoriteModels, toggleFavoriteModel } = useAppStore();
+  const [open, setOpen] = useState(false);
+  const [expandedGroup, setExpandedGroup] = useState<string | null>(null);
+  const [expandedClaudeModel, setExpandedClaudeModel] = useState<ModelAlias | null>(null);
+  const [expandedCodexModel, setExpandedCodexModel] = useState<CodexModelId | null>(null);
+  const commandListRef = useRef<HTMLDivElement>(null);
+  const expandedTriggerRef = useRef<HTMLDivElement>(null);
+  const expandedClaudeTriggerRef = useRef<HTMLDivElement>(null);
+  const expandedCodexTriggerRef = useRef<HTMLDivElement>(null);
+  const {
+    enabledCursorModels,
+    favoriteModels,
+    toggleFavoriteModel,
+    codexModels,
+    codexModelsLoading,
+    fetchCodexModels,
+  } = useAppStore();

  // Extract model and thinking/reasoning levels from value
  const selectedModel = value.model;
  const selectedThinkingLevel = value.thinkingLevel || 'none';
  const selectedReasoningEffort = value.reasoningEffort || 'none';

+  // Fetch Codex models on mount
+  useEffect(() => {
+    if (codexModels.length === 0 && !codexModelsLoading) {
+      fetchCodexModels().catch(() => {
+        // Silently fail - user will see empty Codex section
+      });
+    }
+  }, [codexModels.length, codexModelsLoading, fetchCodexModels]);
+
  // Close expanded group when trigger scrolls out of view
-  React.useEffect(() => {
+  useEffect(() => {
    const triggerElement = expandedTriggerRef.current;
    const listElement = commandListRef.current;
    if (!triggerElement || !listElement || !expandedGroup) return;
@@ -112,7 +124,7 @@ export function PhaseModelSelector({
  }, [expandedGroup]);

  // Close expanded Claude model popover when trigger scrolls out of view
-  React.useEffect(() => {
+  useEffect(() => {
    const triggerElement = expandedClaudeTriggerRef.current;
    const listElement = commandListRef.current;
    if (!triggerElement || !listElement || !expandedClaudeModel) return;
@@ -135,7 +147,7 @@ export function PhaseModelSelector({
  }, [expandedClaudeModel]);

  // Close expanded Codex model popover when trigger scrolls out of view
-  React.useEffect(() => {
+  useEffect(() => {
    const triggerElement = expandedCodexTriggerRef.current;
    const listElement = commandListRef.current;
    if (!triggerElement || !listElement || !expandedCodexModel) return;
@@ -157,6 +169,17 @@ export function PhaseModelSelector({
    return () => observer.disconnect();
  }, [expandedCodexModel]);

+  // Transform dynamic Codex models from store to component format
+  const transformedCodexModels = useMemo(() => {
+    return codexModels.map((model) => ({
+      id: model.id,
+      label: model.label,
+      description: model.description,
+      provider: 'codex' as const,
+      badge: model.tier === 'premium' ? 'Premium' : model.tier === 'basic' ? 'Speed' : undefined,
+    }));
+  }, [codexModels]);
+
  // Filter Cursor models to only show enabled ones
  const availableCursorModels = CURSOR_MODELS.filter((model) => {
    const cursorId = stripProviderPrefix(model.id) as CursorModelId;
@@ -164,7 +187,7 @@ export function PhaseModelSelector({
  });

  // Helper to find current selected model details
-  const currentModel = React.useMemo(() => {
+  const currentModel = useMemo(() => {
    const claudeModel = CLAUDE_MODELS.find((m) => m.id === selectedModel);
    if (claudeModel) {
      // Add thinking level to label if not 'none'
@@ -198,7 +221,7 @@ export function PhaseModelSelector({
    }

    // Check Codex models
-    const codexModel = CODEX_MODELS.find((m) => m.id === selectedModel);
+    const codexModel = transformedCodexModels.find((m) => m.id === selectedModel);
    if (codexModel) return { ...codexModel, icon: OpenAIIcon };

    // Check OpenCode models
@@ -206,10 +229,10 @@ export function PhaseModelSelector({
    if (opencodeModel) return { ...opencodeModel, icon: OpenCodeIcon };

    return null;
-  }, [selectedModel, selectedThinkingLevel, availableCursorModels]);
+  }, [selectedModel, selectedThinkingLevel, availableCursorModels, transformedCodexModels]);

  // Compute grouped vs standalone Cursor models
-  const { groupedModels, standaloneCursorModels } = React.useMemo(() => {
+  const { groupedModels, standaloneCursorModels } = useMemo(() => {
    const grouped: GroupedModel[] = [];
    const standalone: typeof CURSOR_MODELS = [];
    const seenGroups = new Set<string>();
@@ -242,11 +265,11 @@ export function PhaseModelSelector({
  }, [availableCursorModels, enabledCursorModels]);

  // Group models
-  const { favorites, claude, cursor, codex, opencode } = React.useMemo(() => {
+  const { favorites, claude, cursor, codex, opencode } = useMemo(() => {
    const favs: typeof CLAUDE_MODELS = [];
    const cModels: typeof CLAUDE_MODELS = [];
    const curModels: typeof CURSOR_MODELS = [];
-    const codModels: typeof CODEX_MODELS = [];
+    const codModels: typeof transformedCodexModels = [];
    const ocModels: typeof OPENCODE_MODELS = [];

    // Process Claude Models
@@ -268,7 +291,7 @@ export function PhaseModelSelector({
    });

    // Process Codex Models
-    CODEX_MODELS.forEach((model) => {
+    transformedCodexModels.forEach((model) => {
      if (favoriteModels.includes(model.id)) {
        favs.push(model);
      } else {
@@ -292,10 +315,10 @@ export function PhaseModelSelector({
      codex: codModels,
      opencode: ocModels,
    };
-  }, [favoriteModels, availableCursorModels]);
+  }, [favoriteModels, availableCursorModels, transformedCodexModels]);

  // Render Codex model item with secondary popover for reasoning effort (only for models that support it)
-  const renderCodexModelItem = (model: (typeof CODEX_MODELS)[0]) => {
+  const renderCodexModelItem = (model: (typeof transformedCodexModels)[0]) => {
    const isSelected = selectedModel === model.id;
    const isFavorite = favoriteModels.includes(model.id);
    const hasReasoning = codexModelHasThinking(model.id as CodexModelId);
@@ -919,7 +942,7 @@ export function PhaseModelSelector({
                    }
                    // Codex model
                    if (model.provider === 'codex') {
-                      return renderCodexModelItem(model);
+                      return renderCodexModelItem(model as (typeof transformedCodexModels)[0]);
                    }
                    // OpenCode model
                    if (model.provider === 'opencode') {
--- a/apps/ui/src/lib/electron.ts
+++ b/apps/ui/src/lib/electron.ts
@@ -727,6 +727,20 @@ export interface ElectronAPI {
  ideation?: IdeationAPI;
  codex?: {
    getUsage: () => Promise<CodexUsageResponse>;
+    getModels: (refresh?: boolean) => Promise<{
+      success: boolean;
+      models?: Array<{
+        id: string;
+        label: string;
+        description: string;
+        hasThinking: boolean;
+        supportsVision: boolean;
+        tier: 'premium' | 'standard' | 'basic';
+        isDefault: boolean;
+      }>;
+      cachedAt?: number;
+      error?: string;
+    }>;
  };
  settings?: {
    getStatus: () => Promise<{
--- a/apps/ui/src/lib/http-api-client.ts
+++ b/apps/ui/src/lib/http-api-client.ts
@@ -2056,6 +2056,25 @@ export class HttpApiClient implements ElectronAPI {
  // Codex API
  codex = {
    getUsage: (): Promise<CodexUsageResponse> => this.get('/api/codex/usage'),
+    getModels: (
+      refresh = false
+    ): Promise<{
+      success: boolean;
+      models?: Array<{
+        id: string;
+        label: string;
+        description: string;
+        hasThinking: boolean;
+        supportsVision: boolean;
+        tier: 'premium' | 'standard' | 'basic';
+        isDefault: boolean;
+      }>;
+      cachedAt?: number;
+      error?: string;
+    }> => {
+      const url = `/api/codex/models${refresh ? '?refresh=true' : ''}`;
+      return this.get(url);
+    },
  };

  // Context API
--- a/apps/ui/src/routes/__root.tsx
+++ b/apps/ui/src/routes/__root.tsx
@@ -68,8 +68,9 @@ function RootLayoutContent() {
    getEffectiveTheme,
    skipSandboxWarning,
    setSkipSandboxWarning,
+    fetchCodexModels,
  } = useAppStore();
-  const { setupComplete } = useSetupStore();
+  const { setupComplete, codexCliStatus } = useSetupStore();
  const navigate = useNavigate();
  const [isMounted, setIsMounted] = useState(false);
  const [streamerPanelOpen, setStreamerPanelOpen] = useState(false);
@@ -431,6 +432,20 @@ function RootLayoutContent() {
    }
  }, [isMounted, currentProject, location.pathname, navigate]);

+  // Bootstrap Codex models on app startup (after auth completes)
+  useEffect(() => {
+    // Only fetch if authenticated and Codex CLI is available
+    if (!authChecked || !isAuthenticated) return;
+
+    const isCodexAvailable = codexCliStatus?.installed && codexCliStatus?.auth?.authenticated;
+    if (!isCodexAvailable) return;
+
+    // Fetch models in the background
+    fetchCodexModels().catch((error) => {
+      logger.warn('Failed to bootstrap Codex models:', error);
+    });
+  }, [authChecked, isAuthenticated, codexCliStatus, fetchCodexModels]);
+
  // Apply theme class to document - use deferred value to avoid blocking UI
  useEffect(() => {
    const root = document.documentElement;
--- a/apps/ui/src/store/app-store.ts
+++ b/apps/ui/src/store/app-store.ts
@@ -1,6 +1,7 @@
 import { create } from 'zustand';
 // Note: persist middleware removed - settings now sync via API (use-settings-sync.ts)
 import type { Project, TrashedProject } from '@/lib/electron';
+import { getElectronAPI } from '@/lib/electron';
 import { createLogger } from '@automaker/utils/logger';
 import { setItem, getItem } from '@/lib/storage';
 import type {
@@ -652,6 +653,20 @@ export interface AppState {
  codexUsage: CodexUsage | null;
  codexUsageLastUpdated: number | null;

+  // Codex Models (dynamically fetched)
+  codexModels: Array<{
+    id: string;
+    label: string;
+    description: string;
+    hasThinking: boolean;
+    supportsVision: boolean;
+    tier: 'premium' | 'standard' | 'basic';
+    isDefault: boolean;
+  }>;
+  codexModelsLoading: boolean;
+  codexModelsError: string | null;
+  codexModelsLastFetched: number | null;
+
  // Pipeline Configuration (per-project, keyed by project path)
  pipelineConfigByProject: Record<string, PipelineConfig>;

@@ -1093,6 +1108,20 @@ export interface AppActions {
  // Codex Usage Tracking actions
  setCodexUsage: (usage: CodexUsage | null) => void;

+  // Codex Models actions
+  fetchCodexModels: (forceRefresh?: boolean) => Promise<void>;
+  setCodexModels: (
+    models: Array<{
+      id: string;
+      label: string;
+      description: string;
+      hasThinking: boolean;
+      supportsVision: boolean;
+      tier: 'premium' | 'standard' | 'basic';
+      isDefault: boolean;
+    }>
+  ) => void;
+
  // Reset
  reset: () => void;
 }
@@ -1233,6 +1262,10 @@ const initialState: AppState = {
  claudeUsageLastUpdated: null,
  codexUsage: null,
  codexUsageLastUpdated: null,
+  codexModels: [],
+  codexModelsLoading: false,
+  codexModelsError: null,
+  codexModelsLastFetched: null,
  pipelineConfigByProject: {},
  // UI State (previously in localStorage, now synced via API)
  worktreePanelCollapsed: false,
@@ -3016,6 +3049,53 @@ export const useAppStore = create<AppState & AppActions>()((set, get) => ({
      codexUsageLastUpdated: usage ? Date.now() : null,
    }),

+  // Codex Models actions
+  fetchCodexModels: async (forceRefresh = false) => {
+    const { codexModelsLastFetched, codexModelsLoading } = get();
+
+    // Skip if already loading
+    if (codexModelsLoading) return;
+
+    // Skip if recently fetched (< 5 minutes ago) and not forcing refresh
+    if (!forceRefresh && codexModelsLastFetched && Date.now() - codexModelsLastFetched < 300000) {
+      return;
+    }
+
+    set({ codexModelsLoading: true, codexModelsError: null });
+
+    try {
+      const api = getElectronAPI();
+      if (!api.codex) {
+        throw new Error('Codex API not available');
+      }
+
+      const result = await api.codex.getModels(forceRefresh);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch Codex models');
+      }
+
+      set({
+        codexModels: result.models || [],
+        codexModelsLastFetched: Date.now(),
+        codexModelsLoading: false,
+        codexModelsError: null,
+      });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      set({
+        codexModelsError: errorMessage,
+        codexModelsLoading: false,
+      });
+    }
+  },
+
+  setCodexModels: (models) =>
+    set({
+      codexModels: models,
+      codexModelsLastFetched: Date.now(),
+    }),
+
  // Pipeline actions
  setPipelineConfig: (projectPath, config) => {
    set({