feat: add ReasoningEffortSelector component and integrate reasoning effort into chat functionality

- Introduced ReasoningEffortSelector for selecting reasoning effort levels (high, medium, low).
- Updated ChatInput and ChatInterface components to include the new ReasoningEffortSelector.
- Enhanced ModelStore to manage reasoning effort state.
- Modified sessionManager and CodexConfig to accommodate reasoning effort in session handling.

🤖 Generated with [Claude Code](https://claude.ai/code)

Author: milisp

src-tauri/src/codex_client/command_builder.rs

@@ -199,6 +199,14 @@ impl CommandBuilder {
             cmd.arg("-c").arg(sandbox_config);
         }
 
+        // Add reasoning effort parameter
+        if let Some(reasoning_effort) = &config.reasoning_effort {
+            if !reasoning_effort.is_empty() {
+                cmd.arg("-c")
+                    .arg(format!("model_reasoning_effort={}", reasoning_effort));
+            }
+        }
+
         // Enable streaming by setting show_raw_agent_reasoning=true
         // This is required for agent_message_delta events to be generated
         cmd.arg("-c").arg("show_raw_agent_reasoning=true");

src-tauri/src/protocol.rs

@@ -151,4 +151,5 @@ pub struct CodexConfig {
     pub sandbox_mode: String,
     pub codex_path: Option<String>,
     pub api_key: Option<String>,
+    pub reasoning_effort: Option<String>,
 }

src/components/chat/ChatInput.tsx

@@ -5,6 +5,7 @@ import { Send, Square } from 'lucide-react';
 import { useChatInputStore } from '@/stores/chatInputStore';
 import { MediaSelector } from './MediaSelector';
 import { ModelSelector } from './ModelSelector';
+import { ReasoningEffortSelector } from './ReasoningEffortSelector';
 import { FileReferenceList } from './FileReferenceList';
 import { MediaAttachmentList } from './MediaAttachmentList';
 
@@ -127,9 +128,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           <MediaSelector />
         </div>
 
-        {/* Model Selector and Send Button - bottom right inside textarea */}
+        {/* Reasoning Effort, Model Selector and Send Button - bottom right inside textarea */}
         <div className="absolute right-2 bottom-2 flex items-center gap-1">
           <ModelSelector />
+          <ReasoningEffortSelector />
           {isLoading ? (
             <Button
               onClick={handleStopStreaming}

src/components/chat/ChatInterface.tsx

@@ -34,7 +34,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
   selectedConversation = null,
 }) => {
   const { inputValue, setInputValue } = useChatInputStore();
-  const { currentModel, currentProvider } = useModelStore();
+  const { currentModel, currentProvider, reasoningEffort } = useModelStore();
   const [pendingApproval, setPendingApproval] =
     useState<ApprovalRequest | null>(null);
   const [isConnected, setIsConnected] = useState(false);
@@ -152,6 +152,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
                   model: currentModel,
                   provider: currentProvider,
                   useOss: currentProvider.toLowerCase() === "ollama",
+                  reasoningEffort,
                 };
                 await sessionManager.ensureSessionRunning(
                   sessionId,
@@ -265,6 +266,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({
           model: currentModel,
           provider: currentProvider,
           useOss: currentProvider.toLowerCase() === "ollama",
+          reasoningEffort,
         };
         await sessionManager.ensureSessionRunning(
           actualSessionId,

src/components/chat/ModelSelector.tsx

@@ -106,7 +106,7 @@ export const ModelSelector: React.FC = () => {
   }, [modelsByProvider, searchTerm]);
 
   return (
-    <div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
+    <div className="flex items-center justify-between border-t border-gray-100">
       <Popover open={isModelPopoverOpen} onOpenChange={(open) => {
         setIsModelPopoverOpen(open);
         if (!open) {
@@ -115,7 +115,7 @@ export const ModelSelector: React.FC = () => {
       }}>
         <PopoverTrigger asChild>
           <div className="flex items-center gap-2 text-xs text-gray-500">
-            <Badge variant="outline" className="text-xs cursor-pointer hover:bg-gray-100">
+            <Badge variant="outline" className="text-xs cursor-pointer hover:bg-gray-100 h-6 px-2">
               {currentProvider}/{currentModel}
             </Badge>
           </div>

src/components/chat/ReasoningEffortSelector.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { ChevronDown } from 'lucide-react';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../ui/popover';
+import { useModelStore } from '@/stores/ModelStore';
+
+export const ReasoningEffortSelector: React.FC = () => {
+  const { reasoningEffort, setReasoningEffort } = useModelStore();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const efforts = [
+    { value: 'high', label: 'High' },
+    { value: 'medium', label: 'Medium' },
+    { value: 'low', label: 'Low' },
+  ] as const;
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Badge
+          variant="outline"
+          className="text-xs cursor-pointer hover:bg-gray-100 h-6 px-2 gap-1"
+        >
+          <span className="capitalize">{reasoningEffort}</span>
+          <ChevronDown className="w-3 h-3" />
+        </Badge>
+      </PopoverTrigger>
+      <PopoverContent className="w-36 p-2" align="start">
+        <div className="space-y-1">
+          <div className="text-xs font-medium text-gray-700 px-2 py-1">
+            Reasoning Effort
+          </div>
+          {efforts.map((effort) => (
+            <Button
+              key={effort.value}
+              variant={reasoningEffort === effort.value ? "default" : "ghost"}
+              size="sm"
+              className="w-full justify-start text-left p-2"
+              onClick={() => {
+                setReasoningEffort(effort.value);
+                setIsOpen(false);
+              }}
+            >
+              {effort.label}
+            </Button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

src/services/sessionManager.ts

@@ -53,6 +53,7 @@ class SessionManager {
           approval_policy: config.approvalPolicy,
           sandbox_mode: config.sandboxMode,
           api_key: apiKey,
+          reasoning_effort: config.reasoningEffort,
         },
       });
 

src/stores/ModelStore.ts

@@ -1,19 +1,26 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
+type ReasoningEffort = 'high' | 'medium' | 'low';
+
 interface ModelStore {
   currentModel: string;
   currentProvider: string;
+  reasoningEffort: ReasoningEffort;
   setCurrentModel: (model: string, provider: string) => void;
+  setReasoningEffort: (effort: ReasoningEffort) => void;
 }
 
 export const useModelStore = create<ModelStore>()(
   persist(
     (set) => ({
       currentModel: 'gpt-5',
       currentProvider: 'openai',
+      reasoningEffort: 'medium',
       setCurrentModel: (model: string, provider: string) =>
         set({ currentModel: model, currentProvider: provider }),
+      setReasoningEffort: (effort: ReasoningEffort) =>
+        set({ reasoningEffort: effort }),
     }),
     {
       name: "model-storage",

src/types/codex.ts

@@ -59,6 +59,7 @@ export interface CodexConfig {
   approvalPolicy: 'untrusted' | 'on-failure' | 'on-request' | 'never';
   sandboxMode: 'read-only' | 'workspace-write' | 'danger-full-access';
   codexPath?: string;
+  reasoningEffort?: 'high' | 'medium' | 'low';
 }
 
 export const DEFAULT_CONFIG: CodexConfig = {