Merge branch 'v0.9.0rc' into opencode-support

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

@@ -1,110 +1,37 @@
 import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
-import { FileCode, ShieldCheck, Globe, ImageIcon } from 'lucide-react';
+import { FileCode, Globe, ImageIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import type { CodexApprovalPolicy, CodexSandboxMode } from '@automaker/types';
 import { OpenAIIcon } from '@/components/ui/provider-icon';
 
 interface CodexSettingsProps {
   autoLoadCodexAgents: boolean;
-  codexSandboxMode: CodexSandboxMode;
-  codexApprovalPolicy: CodexApprovalPolicy;
   codexEnableWebSearch: boolean;
   codexEnableImages: boolean;
   onAutoLoadCodexAgentsChange: (enabled: boolean) => void;
-  onCodexSandboxModeChange: (mode: CodexSandboxMode) => void;
-  onCodexApprovalPolicyChange: (policy: CodexApprovalPolicy) => void;
   onCodexEnableWebSearchChange: (enabled: boolean) => void;
   onCodexEnableImagesChange: (enabled: boolean) => void;
 }
 
 const CARD_TITLE = 'Codex CLI Settings';
-const CARD_SUBTITLE = 'Configure Codex instructions, capabilities, and execution safety defaults.';
+const CARD_SUBTITLE = 'Configure Codex instructions and capabilities.';
 const AGENTS_TITLE = 'Auto-load AGENTS.md Instructions';
 const AGENTS_DESCRIPTION = 'Automatically inject project instructions from';
 const AGENTS_PATH = '.codex/AGENTS.md';
 const AGENTS_SUFFIX = 'on each Codex run.';
 const WEB_SEARCH_TITLE = 'Enable Web Search';
-const WEB_SEARCH_DESCRIPTION =
-  'Allow Codex to search the web for current information using --search flag.';
+const WEB_SEARCH_DESCRIPTION = 'Allow Codex to search the web for current information.';
 const IMAGES_TITLE = 'Enable Image Support';
-const IMAGES_DESCRIPTION = 'Allow Codex to process images attached to prompts using -i flag.';
-const SANDBOX_TITLE = 'Sandbox Policy';
-const APPROVAL_TITLE = 'Approval Policy';
-const SANDBOX_SELECT_LABEL = 'Select sandbox policy';
-const APPROVAL_SELECT_LABEL = 'Select approval policy';
-
-const SANDBOX_OPTIONS: Array<{
-  value: CodexSandboxMode;
-  label: string;
-  description: string;
-}> = [
-  {
-    value: 'read-only',
-    label: 'Read-only',
-    description: 'Only allow safe, non-mutating commands.',
-  },
-  {
-    value: 'workspace-write',
-    label: 'Workspace write',
-    description: 'Allow file edits inside the project workspace.',
-  },
-  {
-    value: 'danger-full-access',
-    label: 'Full access',
-    description: 'Allow unrestricted commands (use with care).',
-  },
-];
-
-const APPROVAL_OPTIONS: Array<{
-  value: CodexApprovalPolicy;
-  label: string;
-  description: string;
-}> = [
-  {
-    value: 'untrusted',
-    label: 'Untrusted',
-    description: 'Ask for approval for most commands.',
-  },
-  {
-    value: 'on-failure',
-    label: 'On failure',
-    description: 'Ask only if a command fails in the sandbox.',
-  },
-  {
-    value: 'on-request',
-    label: 'On request',
-    description: 'Let the agent decide when to ask.',
-  },
-  {
-    value: 'never',
-    label: 'Never',
-    description: 'Never ask for approval (least restrictive).',
-  },
-];
+const IMAGES_DESCRIPTION = 'Allow Codex to process images attached to prompts.';
 
 export function CodexSettings({
   autoLoadCodexAgents,
-  codexSandboxMode,
-  codexApprovalPolicy,
   codexEnableWebSearch,
   codexEnableImages,
   onAutoLoadCodexAgentsChange,
-  onCodexSandboxModeChange,
-  onCodexApprovalPolicyChange,
   onCodexEnableWebSearchChange,
   onCodexEnableImagesChange,
 }: CodexSettingsProps) {
-  const sandboxOption = SANDBOX_OPTIONS.find((option) => option.value === codexSandboxMode);
-  const approvalOption = APPROVAL_OPTIONS.find((option) => option.value === codexApprovalPolicy);
-
   return (
     <div
       className={cn(
@@ -189,61 +116,6 @@ export function CodexSettings({
             <p className="text-xs text-muted-foreground/80 leading-relaxed">{IMAGES_DESCRIPTION}</p>
           </div>
         </div>
-
-        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
-          <div className="w-10 h-10 mt-0.5 rounded-xl flex items-center justify-center shrink-0 bg-brand-500/10">
-            <ShieldCheck className="w-5 h-5 text-brand-500" />
-          </div>
-          <div className="flex-1 space-y-4">
-            <div className="flex items-center justify-between gap-4">
-              <div>
-                <Label className="text-foreground font-medium">{SANDBOX_TITLE}</Label>
-                <p className="text-xs text-muted-foreground/80 leading-relaxed">
-                  {sandboxOption?.description}
-                </p>
-              </div>
-              <Select
-                value={codexSandboxMode}
-                onValueChange={(value) => onCodexSandboxModeChange(value as CodexSandboxMode)}
-              >
-                <SelectTrigger className="w-[180px] h-8" data-testid="codex-sandbox-select">
-                  <SelectValue aria-label={SANDBOX_SELECT_LABEL} />
-                </SelectTrigger>
-                <SelectContent>
-                  {SANDBOX_OPTIONS.map((option) => (
-                    <SelectItem key={option.value} value={option.value}>
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex items-center justify-between gap-4">
-              <div>
-                <Label className="text-foreground font-medium">{APPROVAL_TITLE}</Label>
-                <p className="text-xs text-muted-foreground/80 leading-relaxed">
-                  {approvalOption?.description}
-                </p>
-              </div>
-              <Select
-                value={codexApprovalPolicy}
-                onValueChange={(value) => onCodexApprovalPolicyChange(value as CodexApprovalPolicy)}
-              >
-                <SelectTrigger className="w-[180px] h-8" data-testid="codex-approval-select">
-                  <SelectValue aria-label={APPROVAL_SELECT_LABEL} />
-                </SelectTrigger>
-                <SelectContent>
-                  {APPROVAL_OPTIONS.map((option) => (
-                    <SelectItem key={option.value} value={option.value}>
-                      {option.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   );

apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx

@@ -4,9 +4,11 @@ import { useAppStore } from '@/store/app-store';
 import type {
   ModelAlias,
   CursorModelId,
+  CodexModelId,
   GroupedModel,
   PhaseModelEntry,
   ThinkingLevel,
+  ReasoningEffort,
 } from '@automaker/types';
 import {
   stripProviderPrefix,
@@ -15,6 +17,7 @@ import {
   isGroupSelected,
   getSelectedVariant,
   isCursorModel,
+  codexModelHasThinking,
 } from '@automaker/types';
 import {
   CLAUDE_MODELS,
@@ -22,6 +25,8 @@ import {
   CODEX_MODELS,
   THINKING_LEVELS,
   THINKING_LEVEL_LABELS,
+  REASONING_EFFORT_LEVELS,
+  REASONING_EFFORT_LABELS,
 } from '@/components/views/board-view/shared/model-constants';
 import { Check, ChevronsUpDown, Star, ChevronRight } from 'lucide-react';
 import { AnthropicIcon, CursorIcon, OpenAIIcon } from '@/components/ui/provider-icon';
@@ -69,14 +74,17 @@ export function PhaseModelSelector({
   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();
 
-  // Extract model and thinking level from value
+  // Extract model and thinking/reasoning levels from value
   const selectedModel = value.model;
   const selectedThinkingLevel = value.thinkingLevel || 'none';
+  const selectedReasoningEffort = value.reasoningEffort || 'none';
 
   // Close expanded group when trigger scrolls out of view
   React.useEffect(() => {
@@ -124,6 +132,29 @@ export function PhaseModelSelector({
     return () => observer.disconnect();
   }, [expandedClaudeModel]);
 
+  // Close expanded Codex model popover when trigger scrolls out of view
+  React.useEffect(() => {
+    const triggerElement = expandedCodexTriggerRef.current;
+    const listElement = commandListRef.current;
+    if (!triggerElement || !listElement || !expandedCodexModel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry.isIntersecting) {
+          setExpandedCodexModel(null);
+        }
+      },
+      {
+        root: listElement,
+        threshold: 0.1,
+      }
+    );
+
+    observer.observe(triggerElement);
+    return () => observer.disconnect();
+  }, [expandedCodexModel]);
+
   // Filter Cursor models to only show enabled ones
   const availableCursorModels = CURSOR_MODELS.filter((model) => {
     const cursorId = stripProviderPrefix(model.id) as CursorModelId;
@@ -241,55 +272,183 @@ export function PhaseModelSelector({
     return { favorites: favs, claude: cModels, cursor: curModels, codex: codModels };
   }, [favoriteModels, availableCursorModels]);
 
-  // Render Codex model item (no thinking level needed)
+  // Render Codex model item with secondary popover for reasoning effort (only for models that support it)
   const renderCodexModelItem = (model: (typeof CODEX_MODELS)[0]) => {
     const isSelected = selectedModel === model.id;
     const isFavorite = favoriteModels.includes(model.id);
+    const hasReasoning = codexModelHasThinking(model.id as CodexModelId);
+    const isExpanded = expandedCodexModel === model.id;
+    const currentReasoning = isSelected ? selectedReasoningEffort : 'none';
 
+    // If model doesn't support reasoning, render as simple selector (like Cursor models)
+    if (!hasReasoning) {
+      return (
+        <CommandItem
+          key={model.id}
+          value={model.label}
+          onSelect={() => {
+            onChange({ model: model.id as CodexModelId });
+            setOpen(false);
+          }}
+          className="group flex items-center justify-between py-2"
+        >
+          <div className="flex items-center gap-3 overflow-hidden">
+            <OpenAIIcon
+              className={cn(
+                'h-4 w-4 shrink-0',
+                isSelected ? 'text-primary' : 'text-muted-foreground'
+              )}
+            />
+            <div className="flex flex-col truncate">
+              <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+                {model.label}
+              </span>
+              <span className="truncate text-xs text-muted-foreground">{model.description}</span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1 ml-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn(
+                'h-6 w-6 hover:bg-transparent hover:text-yellow-500 focus:ring-0',
+                isFavorite
+                  ? 'text-yellow-500 opacity-100'
+                  : 'opacity-0 group-hover:opacity-100 text-muted-foreground'
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleFavoriteModel(model.id);
+              }}
+            >
+              <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
+            </Button>
+            {isSelected && <Check className="h-4 w-4 text-primary shrink-0" />}
+          </div>
+        </CommandItem>
+      );
+    }
+
+    // Model supports reasoning - show popover with reasoning effort options
     return (
       <CommandItem
         key={model.id}
         value={model.label}
-        onSelect={() => {
-          onChange({ model: model.id });
-          setOpen(false);
-        }}
-        className="group flex items-center justify-between py-2"
+        onSelect={() => setExpandedCodexModel(isExpanded ? null : (model.id as CodexModelId))}
+        className="p-0 data-[selected=true]:bg-transparent"
       >
-        <div className="flex items-center gap-3 overflow-hidden">
-          <OpenAIIcon
-            className={cn(
-              'h-4 w-4 shrink-0',
-              isSelected ? 'text-primary' : 'text-muted-foreground'
-            )}
-          />
-          <div className="flex flex-col truncate">
-            <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
-              {model.label}
-            </span>
-            <span className="truncate text-xs text-muted-foreground">{model.description}</span>
-          </div>
-        </div>
+        <Popover
+          open={isExpanded}
+          onOpenChange={(isOpen) => {
+            if (!isOpen) {
+              setExpandedCodexModel(null);
+            }
+          }}
+        >
+          <PopoverTrigger asChild>
+            <div
+              ref={isExpanded ? expandedCodexTriggerRef : undefined}
+              className={cn(
+                'w-full group flex items-center justify-between py-2 px-2 rounded-sm cursor-pointer',
+                'hover:bg-accent',
+                isExpanded && 'bg-accent'
+              )}
+            >
+              <div className="flex items-center gap-3 overflow-hidden">
+                <OpenAIIcon
+                  className={cn(
+                    'h-4 w-4 shrink-0',
+                    isSelected ? 'text-primary' : 'text-muted-foreground'
+                  )}
+                />
+                <div className="flex flex-col truncate">
+                  <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+                    {model.label}
+                  </span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {isSelected && currentReasoning !== 'none'
+                      ? `Reasoning: ${REASONING_EFFORT_LABELS[currentReasoning]}`
+                      : model.description}
+                  </span>
+                </div>
+              </div>
 
-        <div className="flex items-center gap-1 ml-2">
-          <Button
-            variant="ghost"
-            size="icon"
-            className={cn(
-              'h-6 w-6 hover:bg-transparent hover:text-yellow-500 focus:ring-0',
-              isFavorite
-                ? 'text-yellow-500 opacity-100'
-                : 'opacity-0 group-hover:opacity-100 text-muted-foreground'
-            )}
-            onClick={(e) => {
-              e.stopPropagation();
-              toggleFavoriteModel(model.id);
-            }}
+              <div className="flex items-center gap-1 ml-2">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={cn(
+                    'h-6 w-6 hover:bg-transparent hover:text-yellow-500 focus:ring-0',
+                    isFavorite
+                      ? 'text-yellow-500 opacity-100'
+                      : 'opacity-0 group-hover:opacity-100 text-muted-foreground'
+                  )}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    toggleFavoriteModel(model.id);
+                  }}
+                >
+                  <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
+                </Button>
+                {isSelected && <Check className="h-4 w-4 text-primary shrink-0" />}
+                <ChevronRight
+                  className={cn(
+                    'h-4 w-4 text-muted-foreground transition-transform',
+                    isExpanded && 'rotate-90'
+                  )}
+                />
+              </div>
+            </div>
+          </PopoverTrigger>
+          <PopoverContent
+            side="right"
+            align="start"
+            className="w-[220px] p-1"
+            sideOffset={8}
+            collisionPadding={16}
+            onCloseAutoFocus={(e) => e.preventDefault()}
           >
-            <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
-          </Button>
-          {isSelected && <Check className="h-4 w-4 text-primary shrink-0" />}
-        </div>
+            <div className="space-y-1">
+              <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground border-b border-border/50 mb-1">
+                Reasoning Effort
+              </div>
+              {REASONING_EFFORT_LEVELS.map((effort) => (
+                <button
+                  key={effort}
+                  onClick={() => {
+                    onChange({
+                      model: model.id as CodexModelId,
+                      reasoningEffort: effort,
+                    });
+                    setExpandedCodexModel(null);
+                    setOpen(false);
+                  }}
+                  className={cn(
+                    'w-full flex items-center justify-between px-2 py-2 rounded-sm text-sm',
+                    'hover:bg-accent cursor-pointer transition-colors',
+                    isSelected && currentReasoning === effort && 'bg-accent text-accent-foreground'
+                  )}
+                >
+                  <div className="flex flex-col items-start">
+                    <span className="font-medium">{REASONING_EFFORT_LABELS[effort]}</span>
+                    <span className="text-xs text-muted-foreground">
+                      {effort === 'none' && 'No reasoning capability'}
+                      {effort === 'minimal' && 'Minimal reasoning'}
+                      {effort === 'low' && 'Light reasoning'}
+                      {effort === 'medium' && 'Moderate reasoning'}
+                      {effort === 'high' && 'Deep reasoning'}
+                      {effort === 'xhigh' && 'Maximum reasoning'}
+                    </span>
+                  </div>
+                  {isSelected && currentReasoning === effort && (
+                    <Check className="h-3.5 w-3.5 text-primary" />
+                  )}
+                </button>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
       </CommandItem>
     );
   };

apps/ui/src/components/views/settings-view/providers/codex-model-configuration.tsx

@@ -27,35 +27,30 @@ interface CodexModelInfo {
 }
 
 const CODEX_MODEL_INFO: Record<CodexModelId, CodexModelInfo> = {
-  'gpt-5.2-codex': {
-    id: 'gpt-5.2-codex',
+  'codex-gpt-5.2-codex': {
+    id: 'codex-gpt-5.2-codex',
     label: 'GPT-5.2-Codex',
     description: 'Most advanced agentic coding model for complex software engineering',
   },
-  'gpt-5-codex': {
-    id: 'gpt-5-codex',
-    label: 'GPT-5-Codex',
-    description: 'Purpose-built for Codex CLI with versatile tool use',
+  'codex-gpt-5.1-codex-max': {
+    id: 'codex-gpt-5.1-codex-max',
+    label: 'GPT-5.1-Codex-Max',
+    description: 'Optimized for long-horizon, agentic coding tasks in Codex',
   },
-  'gpt-5-codex-mini': {
-    id: 'gpt-5-codex-mini',
-    label: 'GPT-5-Codex-Mini',
-    description: 'Faster workflows optimized for low-latency code Q&A and editing',
+  'codex-gpt-5.1-codex-mini': {
+    id: 'codex-gpt-5.1-codex-mini',
+    label: 'GPT-5.1-Codex-Mini',
+    description: 'Smaller, more cost-effective version for faster workflows',
   },
-  'codex-1': {
-    id: 'codex-1',
-    label: 'Codex-1',
-    description: 'Version of o3 optimized for software engineering',
+  'codex-gpt-5.2': {
+    id: 'codex-gpt-5.2',
+    label: 'GPT-5.2',
+    description: 'Best general agentic model for tasks across industries and domains',
   },
-  'codex-mini-latest': {
-    id: 'codex-mini-latest',
-    label: 'Codex-Mini-Latest',
-    description: 'Version of o4-mini for Codex, optimized for faster workflows',
-  },
-  'gpt-5': {
-    id: 'gpt-5',
-    label: 'GPT-5',
-    description: 'GPT-5 base flagship model',
+  'codex-gpt-5.1': {
+    id: 'codex-gpt-5.1',
+    label: 'GPT-5.1',
+    description: 'Great for coding and agentic tasks across domains',
   },
 };
 
@@ -164,6 +159,11 @@ export function CodexModelConfiguration({
 }
 
 function supportsReasoningEffort(modelId: string): boolean {
-  const reasoningModels = ['gpt-5.2-codex', 'gpt-5-codex', 'gpt-5', 'codex-1'];
+  const reasoningModels = [
+    'codex-gpt-5.2-codex',
+    'codex-gpt-5.1-codex-max',
+    'codex-gpt-5.2',
+    'codex-gpt-5.1',
+  ];
   return reasoningModels.includes(modelId);
 }

apps/ui/src/components/views/settings-view/providers/codex-settings-tab.tsx

@@ -181,13 +181,9 @@ export function CodexSettingsTab() {
 
       <CodexSettings
         autoLoadCodexAgents={codexAutoLoadAgents}
-        codexSandboxMode={codexSandboxMode}
-        codexApprovalPolicy={codexApprovalPolicy}
         codexEnableWebSearch={codexEnableWebSearch}
         codexEnableImages={codexEnableImages}
         onAutoLoadCodexAgentsChange={setCodexAutoLoadAgents}
-        onCodexSandboxModeChange={setCodexSandboxMode}
-        onCodexApprovalPolicyChange={setCodexApprovalPolicy}
         onCodexEnableWebSearchChange={setCodexEnableWebSearch}
         onCodexEnableImagesChange={setCodexEnableImages}
       />