Merge pull request #400 from AutoMaker-Org/feat/codex-usage

feat: improve codex plan and usage detection

apps/ui/src/components/views/settings-view/codex/codex-usage-section.tsx

@@ -6,7 +6,6 @@ import { OpenAIIcon } from '@/components/ui/provider-icon';
 import { cn } from '@/lib/utils';
 import { getElectronAPI } from '@/lib/electron';
 import {
-  formatCodexCredits,
   formatCodexPlanType,
   formatCodexResetTime,
   getCodexWindowLabel,
@@ -25,7 +24,6 @@ const UPDATED_LABEL = 'Updated';
 const CODEX_FETCH_ERROR = 'Failed to fetch usage';
 const CODEX_REFRESH_LABEL = 'Refresh Codex usage';
 const PLAN_LABEL = 'Plan';
-const CREDITS_LABEL = 'Credits';
 const WARNING_THRESHOLD = 75;
 const CAUTION_THRESHOLD = 50;
 const MAX_PERCENTAGE = 100;
@@ -49,7 +47,6 @@ export function CodexUsageSection() {
   const rateLimits = codexUsage?.rateLimits ?? null;
   const primary = rateLimits?.primary ?? null;
   const secondary = rateLimits?.secondary ?? null;
-  const credits = rateLimits?.credits ?? null;
   const planType = rateLimits?.planType ?? null;
   const rateLimitWindows = [primary, secondary].filter(isRateLimitWindow);
   const hasMetrics = rateLimitWindows.length > 0;
@@ -206,20 +203,11 @@ export function CodexUsageSection() {
             })}
           </div>
         )}
-        {(planType || credits) && (
+        {planType && (
           <div className="rounded-xl border border-border/60 bg-secondary/20 p-4 text-xs text-muted-foreground">
-            {planType && (
-              <div>
-                {PLAN_LABEL}:{' '}
-                <span className="text-foreground">{formatCodexPlanType(planType)}</span>
-              </div>
-            )}
-            {credits && (
-              <div>
-                {CREDITS_LABEL}:{' '}
-                <span className="text-foreground">{formatCodexCredits(credits)}</span>
-              </div>
-            )}
+            <div>
+              {PLAN_LABEL}: <span className="text-foreground">{formatCodexPlanType(planType)}</span>
+            </div>
           </div>
         )}
         {!hasMetrics && !error && canFetchUsage && !isLoading && (

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') {