feat(claude-binary): implement robust version selector with enhanced binary detection

This commit provides a comprehensive solution to Claude binary detection issues
by implementing a user-friendly version selector UI and improving the binary
discovery logic. It addresses all concerns raised in multiple PRs and comments.

Changes:
- Add ClaudeVersionSelector component for selecting from multiple installations
- Update ClaudeBinaryDialog to use version selector instead of manual path input
- Fix unused variable warning in production builds (claude.rs:442)
- Improve select_best_installation to handle production build restrictions
- Add listClaudeInstallations API endpoint to fetch all available installations
- Make Claude version indicator clickable to navigate to Settings
- Move Claude installation selector to General tab in Settings (per user request)
- Enhance dialog UX with loading states and clear installation instructions
- Add Radix UI radio-group dependency for version selector

Fixes:
- Production build warning about unused claude_path variable
- Version detection failures in production builds due to process restrictions
- Poor UX when Claude binary is not found (now shows helpful dialog)
- Inability to easily switch between multiple Claude installations

This implementation takes inspiration from:
- PR #3: Version selector dropdown approach (preferred by users)
- PR #4: Binary detection improvements and path validation
- PR #39: Additional detection methods and error handling
- Commit 5a29f9a: Shared claude binary detection module architecture

Addresses feedback from:
- #4 (comment): User preference for dropdown selector
- Production build restrictions that prevent version detection
- Need for better error handling when Claude is not installed

The solution provides a seamless experience whether Claude is installed via:
- npm/yarn/bun global installation
- nvm-managed Node.js versions
- Homebrew on macOS
- System-wide installation
- Local user installation (~/.local/bin, etc.)

Refs: #3, #4, #39, 5a29f9a

Author: mufeedvh

bun.lock

@@ -15,6 +15,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-select": "^2.1.3",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",

package.json

@@ -6,9 +6,10 @@ use log::{info, warn, debug, error};
 use anyhow::Result;
 use std::cmp::Ordering;
 use tauri::Manager;
+use serde::{Serialize, Deserialize};
 
 /// Represents a Claude installation with metadata
-#[derive(Debug, Clone)]
+#[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct ClaudeInstallation {
     /// Full path to the Claude binary
     pub path: String,
@@ -68,6 +69,55 @@ pub fn find_claude_binary(app_handle: &tauri::AppHandle) -> Result<String, Strin
     }
 }
 
+/// Discovers all available Claude installations and returns them for selection
+/// This allows UI to show a version selector
+pub fn discover_claude_installations() -> Vec<ClaudeInstallation> {
+    info!("Discovering all Claude installations...");
+    
+    let installations = discover_all_installations();
+    
+    // Sort by version (highest first), then by source preference
+    let mut sorted = installations;
+    sorted.sort_by(|a, b| {
+        match (&a.version, &b.version) {
+            (Some(v1), Some(v2)) => {
+                // Compare versions in descending order (newest first)
+                match compare_versions(v2, v1) {
+                    Ordering::Equal => {
+                        // If versions are equal, prefer by source
+                        source_preference(a).cmp(&source_preference(b))
+                    }
+                    other => other
+                }
+            }
+            (Some(_), None) => Ordering::Less, // Version comes before no version
+            (None, Some(_)) => Ordering::Greater,
+            (None, None) => source_preference(a).cmp(&source_preference(b))
+        }
+    });
+    
+    sorted
+}
+
+/// Returns a preference score for installation sources (lower is better)
+fn source_preference(installation: &ClaudeInstallation) -> u8 {
+    match installation.source.as_str() {
+        "which" => 1,
+        "homebrew" => 2,
+        "system" => 3,
+        source if source.starts_with("nvm") => 4,
+        "local-bin" => 5,
+        "claude-local" => 6,
+        "npm-global" => 7,
+        "yarn" | "yarn-global" => 8,
+        "bun" => 9,
+        "node-modules" => 10,
+        "home-bin" => 11,
+        "PATH" => 12,
+        _ => 13,
+    }
+}
+
 /// Discovers all Claude installations on the system
 fn discover_all_installations() -> Vec<ClaudeInstallation> {
     let mut installations = Vec::new();
@@ -263,19 +313,25 @@ fn extract_version_from_output(stdout: &[u8]) -> Option<String> {
 
 /// Select the best installation based on version
 fn select_best_installation(installations: Vec<ClaudeInstallation>) -> Option<ClaudeInstallation> {
+    // In production builds, version information may not be retrievable because
+    // spawning external processes can be restricted. We therefore no longer
+    // discard installations that lack a detected version – the mere presence
+    // of a readable binary on disk is enough to consider it valid. We still
+    // prefer binaries with version information when it is available so that
+    // in development builds we keep the previous behaviour of picking the
+    // most recent version.
     installations.into_iter()
-        .filter(|i| {
-            // Prefer installations with known versions
-            i.version.is_some() || i.path == "claude"
-        })
         .max_by(|a, b| {
-            // First compare by version presence
             match (&a.version, &b.version) {
+                // If both have versions, compare them semantically.
                 (Some(v1), Some(v2)) => compare_versions(v1, v2),
+                // Prefer the entry that actually has version information.
                 (Some(_), None) => Ordering::Greater,
                 (None, Some(_)) => Ordering::Less,
+                // Neither have version info: prefer the one that is not just
+                // the bare "claude" lookup from PATH, because that may fail
+                // at runtime if PATH is sandbox-stripped.
                 (None, None) => {
-                    // Both have no version, prefer non-PATH entries
                     if a.path == "claude" && b.path != "claude" {
                         Ordering::Less
                     } else if a.path != "claude" && b.path == "claude" {

src-tauri/src/claude_binary.rs

@@ -1807,6 +1807,18 @@ pub async fn set_claude_binary_path(db: State<'_, AgentDb>, path: String) -> Res
     Ok(())
 }
 
+/// List all available Claude installations on the system
+#[tauri::command]
+pub async fn list_claude_installations() -> Result<Vec<crate::claude_binary::ClaudeInstallation>, String> {
+    let installations = crate::claude_binary::discover_claude_installations();
+    
+    if installations.is_empty() {
+        return Err("No Claude Code installations found on the system".to_string());
+    }
+    
+    Ok(installations)
+}
+
 /// Helper function to create a tokio Command with proper environment variables
 /// This ensures commands like Claude can find Node.js and other dependencies
 fn create_command_with_env(program: &str) -> Command {

src-tauri/src/commands/agents.rs

@@ -440,6 +440,10 @@ pub async fn get_claude_settings() -> Result<ClaudeSettings, String> {
 pub async fn open_new_session(app: AppHandle, path: Option<String>) -> Result<String, String> {
     log::info!("Opening new Claude Code session at path: {:?}", path);
 
+    #[cfg(not(debug_assertions))]
+    let _claude_path = find_claude_binary(&app)?;
+    
+    #[cfg(debug_assertions)]
     let claude_path = find_claude_binary(&app)?;
 
     // In production, we can't use std::process::Command directly

src-tauri/src/commands/claude.rs

@@ -24,12 +24,12 @@ use commands::agents::{
     init_database, list_agents, create_agent, update_agent, delete_agent, 
     get_agent, execute_agent, list_agent_runs, get_agent_run, 
     get_agent_run_with_real_time_metrics, list_agent_runs_with_metrics, 
-    migrate_agent_runs_to_session_ids, list_running_sessions, kill_agent_session,
+    list_running_sessions, kill_agent_session,
     get_session_status, cleanup_finished_processes, get_session_output, 
     get_live_session_output, stream_session_output, get_claude_binary_path,
     set_claude_binary_path, export_agent, export_agent_to_file, import_agent,
     import_agent_from_file, fetch_github_agents, fetch_github_agent_content,
-    import_agent_from_github, AgentDb
+    import_agent_from_github, list_claude_installations, AgentDb
 };
 use commands::sandbox::{
     list_sandbox_profiles, create_sandbox_profile, update_sandbox_profile, delete_sandbox_profile,
@@ -139,19 +139,11 @@ fn main() {
             update_agent,
             delete_agent,
             get_agent,
-            export_agent,
-            export_agent_to_file,
-            import_agent,
-            import_agent_from_file,
-            fetch_github_agents,
-            fetch_github_agent_content,
-            import_agent_from_github,
             execute_agent,
             list_agent_runs,
             get_agent_run,
-            get_agent_run_with_real_time_metrics,
             list_agent_runs_with_metrics,
-            migrate_agent_runs_to_session_ids,
+            get_agent_run_with_real_time_metrics,
             list_running_sessions,
             kill_agent_session,
             get_session_status,
@@ -161,6 +153,14 @@ fn main() {
             stream_session_output,
             get_claude_binary_path,
             set_claude_binary_path,
+            list_claude_installations,
+            export_agent,
+            export_agent_to_file,
+            import_agent,
+            import_agent_from_file,
+            fetch_github_agents,
+            fetch_github_agent_content,
+            import_agent_from_github,
             list_sandbox_profiles,
             get_sandbox_profile,
             create_sandbox_profile,

src-tauri/src/main.rs

@@ -70,7 +70,7 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
   className,
 }) => {
   const [projectPath, setProjectPath] = useState("");
-  const [task, setTask] = useState("");
+  const [task, setTask] = useState(agent.default_task || "");
   const [model, setModel] = useState(agent.model || "sonnet");
   const [isRunning, setIsRunning] = useState(false);
   const [messages, setMessages] = useState<ClaudeStreamMessage[]>([]);
@@ -646,7 +646,7 @@ export const AgentExecution: React.FC<AgentExecutionProps> = ({
                 <Input
                   value={task}
                   onChange={(e) => setTask(e.target.value)}
-                  placeholder={agent.default_task || "Enter the task for the agent"}
+                  placeholder="Enter the task for the agent"
                   disabled={isRunning}
                   className="flex-1"
                   onKeyPress={(e) => {

src/components/AgentExecution.tsx

@@ -1,9 +1,9 @@
-import { useState } from "react";
-import { api } from "@/lib/api";
+import { useState, useEffect } from "react";
+import { api, type ClaudeInstallation } from "@/lib/api";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { ExternalLink, FileQuestion, Terminal } from "lucide-react";
+import { ExternalLink, FileQuestion, Terminal, AlertCircle, Loader2 } from "lucide-react";
+import { ClaudeVersionSelector } from "./ClaudeVersionSelector";
 
 interface ClaudeBinaryDialogProps {
   open: boolean;
@@ -13,18 +13,39 @@ interface ClaudeBinaryDialogProps {
 }
 
 export function ClaudeBinaryDialog({ open, onOpenChange, onSuccess, onError }: ClaudeBinaryDialogProps) {
-  const [binaryPath, setBinaryPath] = useState("");
+  const [selectedInstallation, setSelectedInstallation] = useState<ClaudeInstallation | null>(null);
   const [isValidating, setIsValidating] = useState(false);
+  const [hasInstallations, setHasInstallations] = useState(true);
+  const [checkingInstallations, setCheckingInstallations] = useState(true);
+
+  useEffect(() => {
+    if (open) {
+      checkInstallations();
+    }
+  }, [open]);
+
+  const checkInstallations = async () => {
+    try {
+      setCheckingInstallations(true);
+      const installations = await api.listClaudeInstallations();
+      setHasInstallations(installations.length > 0);
+    } catch (error) {
+      // If the API call fails, it means no installations found
+      setHasInstallations(false);
+    } finally {
+      setCheckingInstallations(false);
+    }
+  };
 
   const handleSave = async () => {
-    if (!binaryPath.trim()) {
-      onError("Please enter a valid path");
+    if (!selectedInstallation) {
+      onError("Please select a Claude installation");
       return;
     }
 
     setIsValidating(true);
     try {
-      await api.setClaudeBinaryPath(binaryPath.trim());
+      await api.setClaudeBinaryPath(selectedInstallation.path);
       onSuccess();
       onOpenChange(false);
     } catch (error) {
@@ -37,46 +58,58 @@ export function ClaudeBinaryDialog({ open, onOpenChange, onSuccess, onError }: C
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[500px]">
+      <DialogContent className="sm:max-w-[600px]">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <FileQuestion className="w-5 h-5" />
-            Couldn't locate Claude Code installation
+            Select Claude Code Installation
           </DialogTitle>
           <DialogDescription className="space-y-3 mt-4">
-            <p>
-              Claude Code was not found in any of the common installation locations. 
-              Please specify the path to the Claude binary manually.
-            </p>
-            <div className="flex items-center gap-2 p-3 bg-muted rounded-md">
-              <Terminal className="w-4 h-4 text-muted-foreground" />
-              <p className="text-sm text-muted-foreground">
-                <span className="font-medium">Tip:</span> Run{" "}
-                <code className="px-1 py-0.5 bg-black/10 dark:bg-white/10 rounded">which claude</code>{" "}
-                in your terminal to find the installation path
+            {checkingInstallations ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                <span className="ml-2 text-sm text-muted-foreground">Searching for Claude installations...</span>
+              </div>
+            ) : hasInstallations ? (
+              <p>
+                Multiple Claude Code installations were found on your system. 
+                Please select which one you'd like to use.
               </p>
-            </div>
+            ) : (
+              <>
+                <p>
+                  Claude Code was not found in any of the common installation locations. 
+                  Please install Claude Code to continue.
+                </p>
+                <div className="flex items-center gap-2 p-3 bg-muted rounded-md">
+                  <AlertCircle className="w-4 h-4 text-muted-foreground" />
+                  <p className="text-sm text-muted-foreground">
+                    <span className="font-medium">Searched locations:</span> PATH, /usr/local/bin, 
+                    /opt/homebrew/bin, ~/.nvm/versions/node/*/bin, ~/.claude/local, ~/.local/bin
+                  </p>
+                </div>
+              </>
+            )}
+            {!checkingInstallations && (
+              <div className="flex items-center gap-2 p-3 bg-muted rounded-md">
+                <Terminal className="w-4 h-4 text-muted-foreground" />
+                <p className="text-sm text-muted-foreground">
+                  <span className="font-medium">Tip:</span> You can install Claude Code using{" "}
+                  <code className="px-1 py-0.5 bg-black/10 dark:bg-white/10 rounded">npm install -g @claude</code>
+                </p>
+              </div>
+            )}
           </DialogDescription>
         </DialogHeader>
 
-        <div className="py-4">
-          <Input
-            type="text"
-            placeholder="/usr/local/bin/claude"
-            value={binaryPath}
-            onChange={(e) => setBinaryPath(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && !isValidating) {
-                handleSave();
-              }
-            }}
-            autoFocus
-            className="font-mono text-sm"
-          />
-          <p className="text-xs text-muted-foreground mt-2">
-            Common locations: /usr/local/bin/claude, /opt/homebrew/bin/claude, ~/.claude/local/claude
-          </p>
-        </div>
+        {!checkingInstallations && hasInstallations && (
+          <div className="py-4">
+            <ClaudeVersionSelector
+              onSelect={(installation) => setSelectedInstallation(installation)}
+              selectedPath={null}
+            />
+          </div>
+        )}
 
         <DialogFooter className="gap-3">
           <Button
@@ -94,8 +127,11 @@ export function ClaudeBinaryDialog({ open, onOpenChange, onSuccess, onError }: C
           >
             Cancel
           </Button>
-          <Button onClick={handleSave} disabled={isValidating || !binaryPath.trim()}>
-            {isValidating ? "Validating..." : "Save Path"}
+          <Button 
+            onClick={handleSave} 
+            disabled={isValidating || !selectedInstallation || !hasInstallations}
+          >
+            {isValidating ? "Validating..." : hasInstallations ? "Save Selection" : "No Installations Found"}
           </Button>
         </DialogFooter>
       </DialogContent>