Merge branch 'main' into feature/add-thinking-mode-selector-to-chat-interface

- Added ThinkingModeSelector component with 5 thinking modes
- Integrated selector into chat header next to permission mode
- Automatically prefixes messages with thinking instructions
- Resets to default mode after sending message

server/index.js

@@ -496,13 +496,7 @@ app.get('/api/browse-filesystem', authenticateToken, async (req, res) => {
                 name: item.name,
                 type: 'directory'
             }))
-            .sort((a, b) => {
-                const aHidden = a.name.startsWith('.');
-                const bHidden = b.name.startsWith('.');
-                if (aHidden && !bHidden) return 1;
-                if (!aHidden && bHidden) return -1;
-                return a.name.localeCompare(b.name);
-            });
+            .slice(0, 20); // Limit results
             
         // Add common directories if browsing home directory
         const suggestions = [];

src/components/ChatInterface.jsx

@@ -35,6 +35,7 @@ import ClaudeStatus from './ClaudeStatus';
 import TokenUsagePie from './TokenUsagePie';
 import { MicButton } from './MicButton.jsx';
 import { api, authenticatedFetch } from '../utils/api';
+import ThinkingModeSelector, { thinkingModes } from './ThinkingModeSelector.jsx';
 import Fuse from 'fuse.js';
 import CommandMenu from './CommandMenu';
 import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS } from '../../shared/modelConstants';
@@ -1915,6 +1916,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
   const [slashPosition, setSlashPosition] = useState(-1);
   const [visibleMessageCount, setVisibleMessageCount] = useState(100);
   const [claudeStatus, setClaudeStatus] = useState(null);
+  const [thinkingMode, setThinkingMode] = useState('none');
   const [provider, setProvider] = useState(() => {
     return localStorage.getItem('selected-provider') || 'claude';
   });
@@ -4257,6 +4259,13 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     e.preventDefault();
     if (!input.trim() || isLoading || !selectedProject) return;
 
+    // Apply thinking mode prefix if selected
+    let messageContent = input;
+    const selectedThinkingMode = thinkingModes.find(mode => mode.id === thinkingMode);
+    if (selectedThinkingMode && selectedThinkingMode.prefix) {
+      messageContent = `${selectedThinkingMode.prefix}: ${input}`;
+    }
+
     // Upload images first if any
     let uploadedImages = [];
     if (attachedImages.length > 0) {
@@ -4396,6 +4405,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     setUploadingImages(new Map());
     setImageErrors(new Map());
     setIsTextareaExpanded(false);
+    setThinkingMode('none'); // Reset thinking mode after sending
 
     // Reset textarea height
     if (textareaRef.current) {
@@ -5211,6 +5221,17 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                 </span>
               </div>
             </button>
+            
+              {/* Thinking Mode Selector */}
+              {
+                provider === 'claude' && (
+
+                  <ThinkingModeSelector
+                    selectedMode={thinkingMode}
+                    onModeChange={setThinkingMode}
+                    className=""
+                  />
+                )}
             {/* Token usage pie chart - positioned next to mode indicator */}
             <TokenUsagePie
               used={tokenBudget?.used || 0}

src/components/ProjectCreationWizard.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { X, FolderPlus, GitBranch, Key, ChevronRight, ChevronLeft, Check, Loader2, AlertCircle, FolderOpen, Eye, EyeOff } from 'lucide-react';
+import { X, FolderPlus, GitBranch, Key, ChevronRight, ChevronLeft, Check, Loader2, AlertCircle } from 'lucide-react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { api } from '../utils/api';
@@ -7,7 +7,7 @@ import { api } from '../utils/api';
 const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
   // Wizard state
   const [step, setStep] = useState(1); // 1: Choose type, 2: Configure, 3: Confirm
-  const [workspaceType, setWorkspaceType] = useState('existing'); // 'existing' or 'new' - default to 'existing'
+  const [workspaceType, setWorkspaceType] = useState(null); // 'existing' or 'new'
 
   // Form state
   const [workspacePath, setWorkspacePath] = useState('');
@@ -23,11 +23,6 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
   const [loadingTokens, setLoadingTokens] = useState(false);
   const [pathSuggestions, setPathSuggestions] = useState([]);
   const [showPathDropdown, setShowPathDropdown] = useState(false);
-  const [showFolderBrowser, setShowFolderBrowser] = useState(false);
-  const [browserCurrentPath, setBrowserCurrentPath] = useState('~');
-  const [browserFolders, setBrowserFolders] = useState([]);
-  const [loadingFolders, setLoadingFolders] = useState(false);
-  const [showHiddenFolders, setShowHiddenFolders] = useState(false);
 
   // Load available GitHub tokens when needed
   useEffect(() => {
@@ -160,37 +155,6 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
     setShowPathDropdown(false);
   };
 
-  const openFolderBrowser = async () => {
-    setShowFolderBrowser(true);
-    await loadBrowserFolders('~');
-  };
-
-  const loadBrowserFolders = async (path) => {
-    try {
-      setLoadingFolders(true);
-      setBrowserCurrentPath(path);
-      const response = await api.browseFilesystem(path);
-      const data = await response.json();
-      setBrowserFolders(data.suggestions || []);
-    } catch (error) {
-      console.error('Error loading folders:', error);
-    } finally {
-      setLoadingFolders(false);
-    }
-  };
-
-  const selectFolder = (folderPath, advanceToConfirm = false) => {
-    setWorkspacePath(folderPath);
-    setShowFolderBrowser(false);
-    if (advanceToConfirm) {
-      setStep(3);
-    }
-  };
-
-  const navigateToFolder = async (folderPath) => {
-    await loadBrowserFolders(folderPath);
-  };
-
   return (
     <div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-0 sm:p-4">
       <div className="bg-white dark:bg-gray-800 rounded-none sm:rounded-lg shadow-xl w-full h-full sm:h-auto sm:max-w-2xl border-0 sm:border border-gray-200 dark:border-gray-700 overflow-y-auto">
@@ -326,39 +290,28 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                 <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                   {workspaceType === 'existing' ? 'Workspace Path' : 'Where should the workspace be created?'}
                 </label>
-                <div className="relative flex gap-2">
-                  <div className="flex-1 relative">
-                    <Input
-                      type="text"
-                      value={workspacePath}
-                      onChange={(e) => setWorkspacePath(e.target.value)}
-                      placeholder={workspaceType === 'existing' ? '/path/to/existing/workspace' : '/path/to/new/workspace'}
-                      className="w-full"
-                    />
-                    {showPathDropdown && pathSuggestions.length > 0 && (
-                      <div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                        {pathSuggestions.map((suggestion, index) => (
-                          <button
-                            key={index}
-                            onClick={() => selectPathSuggestion(suggestion)}
-                            className="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-sm"
-                          >
-                            <div className="font-medium text-gray-900 dark:text-white">{suggestion.name}</div>
-                            <div className="text-xs text-gray-500 dark:text-gray-400">{suggestion.path}</div>
-                          </button>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={openFolderBrowser}
-                    className="px-3"
-                    title="Browse folders"
-                  >
-                    <FolderOpen className="w-4 h-4" />
-                  </Button>
+                <div className="relative">
+                  <Input
+                    type="text"
+                    value={workspacePath}
+                    onChange={(e) => setWorkspacePath(e.target.value)}
+                    placeholder={workspaceType === 'existing' ? '/path/to/existing/workspace' : '/path/to/new/workspace'}
+                    className="w-full"
+                  />
+                  {showPathDropdown && pathSuggestions.length > 0 && (
+                    <div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+                      {pathSuggestions.map((suggestion, index) => (
+                        <button
+                          key={index}
+                          onClick={() => selectPathSuggestion(suggestion)}
+                          className="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-sm"
+                        >
+                          <div className="font-medium text-gray-900 dark:text-white">{suggestion.name}</div>
+                          <div className="text-xs text-gray-500 dark:text-gray-400">{suggestion.path}</div>
+                        </button>
+                      ))}
+                    </div>
+                  )}
                 </div>
                 <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                   {workspaceType === 'existing'
@@ -610,121 +563,6 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
           </Button>
         </div>
       </div>
-
-      {/* Folder Browser Modal */}
-      {showFolderBrowser && (
-        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[70] p-4">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] border border-gray-200 dark:border-gray-700 flex flex-col">
-            {/* Browser Header */}
-            <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-              <div className="flex items-center gap-3">
-                <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
-                  <FolderOpen className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-                </div>
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                  Select Folder
-                </h3>
-              </div>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={() => setShowHiddenFolders(!showHiddenFolders)}
-                  className={`p-2 rounded-md transition-colors ${
-                    showHiddenFolders
-                      ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
-                      : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
-                  }`}
-                  title={showHiddenFolders ? 'Hide hidden folders' : 'Show hidden folders'}
-                >
-                  {showHiddenFolders ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
-                </button>
-                <button
-                  onClick={() => setShowFolderBrowser(false)}
-                  className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-                >
-                  <X className="w-5 h-5" />
-                </button>
-              </div>
-            </div>
-
-            {/* Folder List */}
-            <div className="flex-1 overflow-y-auto p-4">
-              {loadingFolders ? (
-                <div className="flex items-center justify-center py-8">
-                  <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
-                </div>
-              ) : browserFolders.length === 0 ? (
-                <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-                  No folders found
-                </div>
-              ) : (
-                <div className="space-y-1">
-                  {/* Parent Directory */}
-                  {browserCurrentPath !== '~' && browserCurrentPath !== '/' && (
-                    <button
-                      onClick={() => {
-                        const parentPath = browserCurrentPath.substring(0, browserCurrentPath.lastIndexOf('/')) || '/';
-                        navigateToFolder(parentPath);
-                      }}
-                      className="w-full px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
-                    >
-                      <FolderOpen className="w-5 h-5 text-gray-400" />
-                      <span className="font-medium text-gray-700 dark:text-gray-300">..</span>
-                    </button>
-                  )}
-
-                  {/* Folders */}
-                  {browserFolders
-                    .filter(folder => showHiddenFolders || !folder.name.startsWith('.'))
-                    .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
-                    .map((folder, index) => (
-                    <div key={index} className="flex items-center gap-2">
-                      <button
-                        onClick={() => navigateToFolder(folder.path)}
-                        className="flex-1 px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
-                      >
-                        <FolderPlus className="w-5 h-5 text-blue-500" />
-                        <span className="font-medium text-gray-900 dark:text-white">{folder.name}</span>
-                      </button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => selectFolder(folder.path, true)}
-                        className="text-xs px-3"
-                      >
-                        Select
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            {/* Browser Footer with Current Path */}
-            <div className="border-t border-gray-200 dark:border-gray-700">
-              <div className="px-4 py-3 bg-gray-50 dark:bg-gray-900/50 flex items-center gap-2">
-                <span className="text-sm text-gray-600 dark:text-gray-400">Path:</span>
-                <code className="text-sm font-mono text-gray-900 dark:text-white flex-1 truncate">
-                  {browserCurrentPath}
-                </code>
-              </div>
-              <div className="flex items-center justify-end gap-2 p-4">
-                <Button
-                  variant="outline"
-                  onClick={() => setShowFolderBrowser(false)}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  variant="outline"
-                  onClick={() => selectFolder(browserCurrentPath, true)}
-                >
-                  Use this folder
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 };

src/components/ThinkingModeSelector.jsx

@@ -0,0 +1,164 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Brain, Zap, Sparkles, Atom, X } from 'lucide-react';
+
+const thinkingModes = [
+  {
+    id: 'none',
+    name: 'Standard',
+    description: 'Regular Claude response',
+    icon: null,
+    prefix: '',
+    color: 'text-gray-600'
+  },
+  {
+    id: 'think',
+    name: 'Think',
+    description: 'Basic extended thinking',
+    icon: Brain,
+    prefix: 'think',
+    color: 'text-blue-600'
+  },
+  {
+    id: 'think-hard',
+    name: 'Think Hard',
+    description: 'More thorough evaluation',
+    icon: Zap,
+    prefix: 'think hard',
+    color: 'text-purple-600'
+  },
+  {
+    id: 'think-harder',
+    name: 'Think Harder',
+    description: 'Deep analysis with alternatives',
+    icon: Sparkles,
+    prefix: 'think harder',
+    color: 'text-indigo-600'
+  },
+  {
+    id: 'ultrathink',
+    name: 'Ultrathink',
+    description: 'Maximum thinking budget',
+    icon: Atom,
+    prefix: 'ultrathink',
+    color: 'text-red-600'
+  }
+];
+
+function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className = '' }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        if (onClose) onClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [onClose]);
+
+  const currentMode = thinkingModes.find(mode => mode.id === selectedMode) || thinkingModes[0];
+  const IconComponent = currentMode.icon || Brain;
+
+  return (
+    <div className={`relative ${className}`} ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={`w-10 h-10 sm:w-10 sm:h-10 rounded-full flex items-center justify-center transition-all duration-200 ${
+          selectedMode === 'none' 
+            ? 'bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600' 
+            : 'bg-blue-100 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800'
+        }`}
+        title={`Thinking mode: ${currentMode.name}`}
+      >
+        <IconComponent className={`w-5 h-5 ${currentMode.color}`} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute bottom-full right-0 mb-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+          <div className="p-3 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
+                Thinking Mode
+              </h3>
+              <button
+                onClick={() => {
+                  setIsOpen(false);
+                  if (onClose) onClose();
+                }}
+                className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+              >
+                <X className="w-4 h-4 text-gray-500" />
+              </button>
+            </div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              Extended thinking gives Claude more time to evaluate alternatives
+            </p>
+          </div>
+          
+          <div className="py-1">
+            {thinkingModes.map((mode) => {
+              const ModeIcon = mode.icon;
+              const isSelected = mode.id === selectedMode;
+              
+              return (
+                <button
+                  key={mode.id}
+                  onClick={() => {
+                    onModeChange(mode.id);
+                    setIsOpen(false);
+                    if (onClose) onClose();
+                  }}
+                  className={`w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors ${
+                    isSelected ? 'bg-gray-50 dark:bg-gray-700' : ''
+                  }`}
+                >
+                  <div className="flex items-start gap-3">
+                    <div className={`mt-0.5 ${mode.icon ? mode.color : 'text-gray-400'}`}>
+                      {ModeIcon ? <ModeIcon className="w-5 h-5" /> : <div className="w-5 h-5" />}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className={`font-medium text-sm ${
+                          isSelected ? 'text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300'
+                        }`}>
+                          {mode.name}
+                        </span>
+                        {isSelected && (
+                          <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-2 py-0.5 rounded">
+                            Active
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                        {mode.description}
+                      </p>
+                      {mode.prefix && (
+                        <code className="text-xs bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded mt-1 inline-block">
+                          {mode.prefix}
+                        </code>
+                      )}
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+          
+          <div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+            <p className="text-xs text-gray-600 dark:text-gray-400">
+              <strong>Tip:</strong> Higher thinking modes take more time but provide more thorough analysis
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ThinkingModeSelector;
+export { thinkingModes };