feat: add Claude Haiku model support and fix WSL binary path validation

jms830 · jms830 · commit e6337eff22cd · 2025-12-07T23:24:07.000-05:00
- Add Haiku as third model option in model selector, agent execution, and queue
- Update model display names to simplified 'Claude Sonnet/Opus/Haiku' format
- Fix WSL binary path validation by skipping checks for WSL environment
  (Linux paths like /home/user/.nvm/.../claude don't exist from Windows)
diff --git a/src-tauri/src/commands/agents.rs b/src-tauri/src/commands/agents.rs
@@ -1598,21 +1598,35 @@ pub async fn get_claude_binary_path(db: State<'_, AgentDb>) -> Result<Option<Str
 pub async fn set_claude_binary_path(db: State<'_, AgentDb>, path: String) -> Result<(), String> {
     let conn = db.0.lock().map_err(|e| e.to_string())?;
 
-    // Validate that the path exists and is executable
-    let path_buf = std::path::PathBuf::from(&path);
-    if !path_buf.exists() {
-        return Err(format!("File does not exist: {}", path));
-    }
+    // Check if shell environment is WSL - skip validation for WSL paths
+    // since Linux paths won't exist on the Windows filesystem
+    let is_wsl_environment = conn
+        .query_row(
+            "SELECT value FROM app_settings WHERE key = 'shell_environment'",
+            [],
+            |row| row.get::<_, String>(0),
+        )
+        .map(|env| env == "wsl")
+        .unwrap_or(false);
+
+    // Only validate path exists if not using WSL environment
+    // WSL paths like /home/user/.nvm/.../claude won't exist from Windows perspective
+    if !is_wsl_environment {
+        let path_buf = std::path::PathBuf::from(&path);
+        if !path_buf.exists() {
+            return Err(format!("File does not exist: {}", path));
+        }
 
-    // Check if it's executable (on Unix systems)
-    #[cfg(unix)]
-    {
-        use std::os::unix::fs::PermissionsExt;
-        let metadata = std::fs::metadata(&path_buf)
-            .map_err(|e| format!("Failed to read file metadata: {}", e))?;
-        let permissions = metadata.permissions();
-        if permissions.mode() & 0o111 == 0 {
-            return Err(format!("File is not executable: {}", path));
+        // Check if it's executable (on Unix systems)
+        #[cfg(unix)]
+        {
+            use std::os::unix::fs::PermissionsExt;
+            let metadata = std::fs::metadata(&path_buf)
+                .map_err(|e| format!("Failed to read file metadata: {}", e))?;
+            let permissions = metadata.permissions();
+            if permissions.mode() & 0o111 == 0 {
+                return Err(format!("File is not executable: {}", path));
+            }
         }
     }
 
diff --git a/src/components/AgentExecution.tsx b/src/components/AgentExecution.tsx
@@ -469,7 +469,7 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
   const handleCopyAsMarkdown = async () => {
     let markdown = `# Agent Execution: ${agent.name}\n\n`;
     markdown += `**Task:** ${task}\n`;
-    markdown += `**Model:** ${model === 'opus' ? 'Claude 4 Opus' : 'Claude 4 Sonnet'}\n`;
+    markdown += `**Model:** ${model === 'opus' ? 'Claude Opus' : model === 'haiku' ? 'Claude Haiku' : 'Claude Sonnet'}\n`;
     markdown += `**Date:** ${new Date().toISOString()}\n\n`;
     markdown += `---\n\n`;
 
@@ -553,7 +553,7 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
               <div>
                 <h1 className="text-heading-1">{agent.name}</h1>
                 <p className="mt-1 text-body-small text-muted-foreground">
-                  {isRunning ? 'Running' : messages.length > 0 ? 'Complete' : 'Ready'} • {model === 'opus' ? 'Claude 4 Opus' : 'Claude 4 Sonnet'}
+                  {isRunning ? 'Running' : messages.length > 0 ? 'Complete' : 'Ready'} • {model === 'opus' ? 'Claude Opus' : model === 'haiku' ? 'Claude Haiku' : 'Claude Sonnet'}
                 </p>
               </div>
             </div>
@@ -616,10 +616,10 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
                         <div className="w-2 h-2 rounded-full bg-primary" />
                       )}
                     </div>
-                    <div className="text-left">
-                      <div className="text-body-small font-medium">Claude 4 Sonnet</div>
-                      <div className="text-caption text-muted-foreground">Faster, efficient</div>
-                    </div>
+<div className="text-left">
+                                      <div className="text-body-small font-medium">Claude Sonnet</div>
+                                      <div className="text-caption text-muted-foreground">Balanced performance</div>
+                                    </div>
                   </div>
                 </motion.button>
                 
@@ -646,9 +646,39 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
                         <div className="w-2 h-2 rounded-full bg-primary" />
                       )}
                     </div>
+<div className="text-left">
+                                      <div className="text-body-small font-medium">Claude Opus</div>
+                                      <div className="text-caption text-muted-foreground">Most capable</div>
+                                    </div>
+                  </div>
+                </motion.button>
+                
+                <motion.button
+                  type="button"
+                  onClick={() => !isRunning && setModel("haiku")}
+                  whileTap={{ scale: 0.97 }}
+                  transition={{ duration: 0.15 }}
+                  className={cn(
+                    "flex-1 px-4 py-3 rounded-md border transition-all",
+                    model === "haiku" 
+                      ? "border-primary bg-primary/10 text-primary" 
+                      : "border-border hover:border-primary/50 hover:bg-accent",
+                    isRunning && "opacity-50 cursor-not-allowed"
+                  )}
+                  disabled={isRunning}
+                >
+                  <div className="flex items-center gap-3">
+                    <div className={cn(
+                      "w-4 h-4 rounded-full border-2 flex items-center justify-center",
+                      model === "haiku" ? "border-primary" : "border-muted-foreground"
+                    )}>
+                      {model === "haiku" && (
+                        <div className="w-2 h-2 rounded-full bg-primary" />
+                      )}
+                    </div>
                     <div className="text-left">
-                      <div className="text-body-small font-medium">Claude 4 Opus</div>
-                      <div className="text-caption text-muted-foreground">More capable</div>
+                      <div className="text-body-small font-medium">Claude Haiku</div>
+                      <div className="text-caption text-muted-foreground">Fast & efficient</div>
                     </div>
                   </div>
                 </motion.button>
diff --git a/src/components/AgentRunOutputViewer.tsx b/src/components/AgentRunOutputViewer.tsx
@@ -330,7 +330,7 @@ export function AgentRunOutputViewer({
     if (!run) return;
     let markdown = `# Agent Execution: ${run.agent_name}\n\n`;
     markdown += `**Task:** ${run.task}\n`;
-    markdown += `**Model:** ${run.model === 'opus' ? 'Claude 4 Opus' : 'Claude 4 Sonnet'}\n`;
+    markdown += `**Model:** ${run.model === 'opus' ? 'Claude Opus' : run.model === 'haiku' ? 'Claude Haiku' : 'Claude Sonnet'}\n`;
     markdown += `**Date:** ${formatISOTimestamp(run.created_at)}\n`;
     if (run.metrics?.duration_ms) markdown += `**Duration:** ${(run.metrics.duration_ms / 1000).toFixed(2)}s\n`;
     if (run.metrics?.total_tokens) markdown += `**Total Tokens:** ${run.metrics.total_tokens}\n`;
@@ -566,7 +566,7 @@ export function AgentRunOutputViewer({
                   </p>
                   <div className="flex items-center gap-3 text-xs text-muted-foreground mt-2">
                     <Badge variant="outline" className="text-xs">
-                      {run.model === 'opus' ? 'Claude 4 Opus' : 'Claude 4 Sonnet'}
+                      {run.model === 'opus' ? 'Claude Opus' : run.model === 'haiku' ? 'Claude Haiku' : 'Claude Sonnet'}
                     </Badge>
                     <div className="flex items-center gap-1">
                       <Clock className="h-3 w-3" />
diff --git a/src/components/AgentRunView.tsx b/src/components/AgentRunView.tsx
@@ -327,7 +327,7 @@ export const AgentRunView: React.FC<AgentRunViewProps> = ({
                 <h3 className="text-sm font-medium">Task:</h3>
                 <p className="text-sm text-muted-foreground flex-1">{run.task}</p>
                 <Badge variant="outline" className="text-xs">
-                  {run.model === 'opus' ? 'Claude 4 Opus' : 'Claude 4 Sonnet'}
+                  {run.model === 'opus' ? 'Claude Opus' : run.model === 'haiku' ? 'Claude Haiku' : 'Claude Sonnet'}
                 </Badge>
               </div>
               
diff --git a/src/components/AgentsModal.tsx b/src/components/AgentsModal.tsx
@@ -378,7 +378,7 @@ export const AgentsModal: React.FC<AgentsModalProps> = ({ open, onOpenChange })
                               <div className="flex items-center gap-4 mt-2 text-xs text-muted-foreground">
                                 <span>Started: {formatISOTimestamp(run.created_at)}</span>
                                 <Badge variant="outline" className="text-xs">
-                                  {run.model === 'opus' ? 'Claude 4 Opus' : 'Claude 4 Sonnet'}
+                                  {run.model === 'opus' ? 'Claude Opus' : run.model === 'haiku' ? 'Claude Haiku' : 'Claude Sonnet'}
                                 </Badge>
                               </div>
                             </div>
diff --git a/src/components/ClaudeCodeSession.refactored.tsx b/src/components/ClaudeCodeSession.refactored.tsx
@@ -51,7 +51,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
   const [showSlashCommandsSettings, setShowSlashCommandsSettings] = useState(false);
   const [forkCheckpointId, setForkCheckpointId] = useState<string | null>(null);
   const [forkSessionName, setForkSessionName] = useState("");
-  const [queuedPrompts, setQueuedPrompts] = useState<Array<{ id: string; prompt: string; model: "sonnet" | "opus" }>>([]);
+  const [queuedPrompts, setQueuedPrompts] = useState<Array<{ id: string; prompt: string; model: "sonnet" | "opus" | "haiku" }>>([]);
   const [showPreview, setShowPreview] = useState(false);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [isPreviewMaximized, setIsPreviewMaximized] = useState(false);
@@ -106,7 +106,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
   };
 
   // Handle sending prompts
-  const handleSendPrompt = useCallback(async (prompt: string, model: "sonnet" | "opus") => {
+  const handleSendPrompt = useCallback(async (prompt: string, model: "sonnet" | "opus" | "haiku") => {
     console.log('[TRACE] handleSendPrompt called:');
     console.log('[TRACE]   prompt length:', prompt.length);
     console.log('[TRACE]   model:', model);
diff --git a/src/components/ClaudeCodeSession.tsx b/src/components/ClaudeCodeSession.tsx
@@ -124,7 +124,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
   const [forkSessionName, setForkSessionName] = useState("");
   
   // Queued prompts state
-  const [queuedPrompts, setQueuedPrompts] = useState<Array<{ id: string; prompt: string; model: "sonnet" | "opus" }>>([]);
+  const [queuedPrompts, setQueuedPrompts] = useState<Array<{ id: string; prompt: string; model: "sonnet" | "opus" | "haiku" }>>([]);
   
   // New state for preview feature
   const [showPreview, setShowPreview] = useState(false);
@@ -140,7 +140,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
   const unlistenRefs = useRef<UnlistenFn[]>([]);
   const hasActiveSessionRef = useRef(false);
   const floatingPromptRef = useRef<FloatingPromptInputRef>(null);
-  const queuedPromptsRef = useRef<Array<{ id: string; prompt: string; model: "sonnet" | "opus" }>>([]);
+  const queuedPromptsRef = useRef<Array<{ id: string; prompt: string; model: "sonnet" | "opus" | "haiku" }>>([]);
   const isMountedRef = useRef(true);
   const isListeningRef = useRef(false);
   const sessionStartTime = useRef<number>(Date.now());
@@ -486,7 +486,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
 
   // Project path selection handled by parent tab controls
 
-  const handleSendPrompt = async (prompt: string, model: "sonnet" | "opus") => {
+  const handleSendPrompt = async (prompt: string, model: "sonnet" | "opus" | "haiku") => {
     console.log('[ClaudeCodeSession] handleSendPrompt called with:', { prompt, model, projectPath, claudeSessionId, effectiveSession });
     
     if (!projectPath) {
diff --git a/src/components/CreateAgent.tsx b/src/components/CreateAgent.tsx
@@ -257,8 +257,8 @@ export const CreateAgent: React.FC<CreateAgentProps> = ({
                         model === "sonnet" ? "text-primary" : "text-muted-foreground"
                       )} />
                       <div className="text-left">
-                        <div className="text-body-small font-medium">Claude 4 Sonnet</div>
-                        <div className="text-caption text-muted-foreground">Faster, efficient for most tasks</div>
+                        <div className="text-body-small font-medium">Claude Sonnet</div>
+                        <div className="text-caption text-muted-foreground">Balanced performance</div>
                       </div>
                     </div>
                   </motion.button>
@@ -281,8 +281,32 @@ export const CreateAgent: React.FC<CreateAgentProps> = ({
                         model === "opus" ? "text-primary" : "text-muted-foreground"
                       )} />
                       <div className="text-left">
-                        <div className="text-body-small font-medium">Claude 4 Opus</div>
-                        <div className="text-caption text-muted-foreground">More capable, better for complex tasks</div>
+                        <div className="text-body-small font-medium">Claude Opus</div>
+                        <div className="text-caption text-muted-foreground">Most capable, complex tasks</div>
+                      </div>
+                    </div>
+                  </motion.button>
+                  
+                  <motion.button
+                    type="button"
+                    onClick={() => setModel("haiku")}
+                    whileTap={{ scale: 0.97 }}
+                    transition={{ duration: 0.15 }}
+                    className={cn(
+                      "flex-1 px-4 py-3 rounded-md border transition-all",
+                      model === "haiku" 
+                        ? "border-primary bg-primary/10 text-primary" 
+                        : "border-border hover:border-primary/50 hover:bg-accent"
+                    )}
+                  >
+                    <div className="flex items-center gap-3">
+                      <Zap className={cn(
+                        "h-4 w-4",
+                        model === "haiku" ? "text-primary" : "text-muted-foreground"
+                      )} />
+                      <div className="text-left">
+                        <div className="text-body-small font-medium">Claude Haiku</div>
+                        <div className="text-caption text-muted-foreground">Fast & efficient</div>
                       </div>
                     </div>
                   </motion.button>
diff --git a/src/components/FloatingPromptInput.tsx b/src/components/FloatingPromptInput.tsx
@@ -41,7 +41,7 @@ interface FloatingPromptInputProps {
   /**
    * Callback when prompt is sent
    */
-  onSend: (prompt: string, model: "sonnet" | "opus") => void;
+  onSend: (prompt: string, model: "sonnet" | "opus" | "haiku") => void;
   /**
    * Whether the input is loading
    */
@@ -53,7 +53,7 @@ interface FloatingPromptInputProps {
   /**
    * Default model to select
    */
-  defaultModel?: "sonnet" | "opus";
+  defaultModel?: "sonnet" | "opus" | "haiku";
   /**
    * Project path for file picker
    */
@@ -173,7 +173,7 @@ const ThinkingModeIndicator: React.FC<{ level: number; color?: string }> = ({ le
 };
 
 type Model = {
-  id: "sonnet" | "opus";
+  id: "sonnet" | "opus" | "haiku";
   name: string;
   description: string;
   icon: React.ReactNode;
@@ -184,19 +184,27 @@ type Model = {
 const MODELS: Model[] = [
   {
     id: "sonnet",
-    name: "Claude 4 Sonnet",
-    description: "Faster, efficient for most tasks",
+    name: "Claude Sonnet",
+    description: "Best balance of speed and capability",
     icon: <Zap className="h-3.5 w-3.5" />,
     shortName: "S",
     color: "text-primary"
   },
   {
     id: "opus",
-    name: "Claude 4 Opus",
-    description: "More capable, better for complex tasks",
+    name: "Claude Opus",
+    description: "Most capable, best for complex tasks",
     icon: <Zap className="h-3.5 w-3.5" />,
     shortName: "O",
     color: "text-primary"
+  },
+  {
+    id: "haiku",
+    name: "Claude Haiku",
+    description: "Fastest, best for simple tasks",
+    icon: <Zap className="h-3.5 w-3.5" />,
+    shortName: "H",
+    color: "text-primary"
   }
 ];
 
@@ -225,7 +233,7 @@ const FloatingPromptInputInner = (
   ref: React.Ref<FloatingPromptInputRef>,
 ) => {
   const [prompt, setPrompt] = useState("");
-  const [selectedModel, setSelectedModel] = useState<"sonnet" | "opus">(defaultModel);
+  const [selectedModel, setSelectedModel] = useState<"sonnet" | "opus" | "haiku">(defaultModel);
   const [selectedThinkingMode, setSelectedThinkingMode] = useState<ThinkingMode>("auto");
   const [isExpanded, setIsExpanded] = useState(false);
   const [modelPickerOpen, setModelPickerOpen] = useState(false);
diff --git a/src/components/claude-code-session/PromptQueue.tsx b/src/components/claude-code-session/PromptQueue.tsx
@@ -8,7 +8,7 @@ import { cn } from '@/lib/utils';
 interface QueuedPrompt {
   id: string;
   prompt: string;
-  model: "sonnet" | "opus";
+  model: "sonnet" | "opus" | "haiku";
 }
 
 interface PromptQueueProps {
@@ -62,7 +62,7 @@ export const PromptQueue: React.FC<PromptQueueProps> = React.memo(({
                 <div className="flex-1 min-w-0">
                   <p className="text-sm truncate">{queuedPrompt.prompt}</p>
                   <span className="text-xs text-muted-foreground">
-                    {queuedPrompt.model === "opus" ? "Opus" : "Sonnet"}
+                    {queuedPrompt.model === "opus" ? "Opus" : queuedPrompt.model === "haiku" ? "Haiku" : "Sonnet"}
                   </span>
                 </div>
                 
