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/claude-sdk.js

@@ -603,8 +603,7 @@ async function queryClaudeSDK(command, options = {}, ws) {
       const transformedMessage = transformMessage(message);
       ws.send({
         type: 'claude-response',
-        data: transformedMessage,
-        sessionId: capturedSessionId || sessionId || null
+        data: transformedMessage
       });
 
       // Extract and send token budget updates from result messages
@@ -614,8 +613,7 @@ async function queryClaudeSDK(command, options = {}, ws) {
           console.log('Token budget from modelUsage:', tokenBudget);
           ws.send({
             type: 'token-budget',
-            data: tokenBudget,
-            sessionId: capturedSessionId || sessionId || null
+            data: tokenBudget
           });
         }
       }
@@ -653,8 +651,7 @@ async function queryClaudeSDK(command, options = {}, ws) {
     // Send error to WebSocket
     ws.send({
       type: 'claude-error',
-      error: error.message,
-      sessionId: capturedSessionId || sessionId || null
+      error: error.message
     });
 
     throw error;

server/cursor-cli.js

@@ -114,8 +114,7 @@ async function spawnCursor(command, options = {}, ws) {
                 // Send system info to frontend
                 ws.send({
                   type: 'cursor-system',
-                  data: response,
-                  sessionId: capturedSessionId || sessionId || null
+                  data: response
                 });
               }
               break;
@@ -124,8 +123,7 @@ async function spawnCursor(command, options = {}, ws) {
               // Forward user message
               ws.send({
                 type: 'cursor-user',
-                data: response,
-                sessionId: capturedSessionId || sessionId || null
+                data: response
               });
               break;
               
@@ -144,8 +142,7 @@ async function spawnCursor(command, options = {}, ws) {
                       type: 'text_delta',
                       text: textContent
                     }
-                  },
-                  sessionId: capturedSessionId || sessionId || null
+                  }
                 });
               }
               break;
@@ -160,8 +157,7 @@ async function spawnCursor(command, options = {}, ws) {
                   type: 'claude-response',
                   data: {
                     type: 'content_block_stop'
-                  },
-                  sessionId: capturedSessionId || sessionId || null
+                  }
                 });
               }
               
@@ -178,8 +174,7 @@ async function spawnCursor(command, options = {}, ws) {
               // Forward any other message types
               ws.send({
                 type: 'cursor-response',
-                data: response,
-                sessionId: capturedSessionId || sessionId || null
+                data: response
               });
           }
         } catch (parseError) {
@@ -187,8 +182,7 @@ async function spawnCursor(command, options = {}, ws) {
           // If not JSON, send as raw text
           ws.send({
             type: 'cursor-output',
-            data: line,
-            sessionId: capturedSessionId || sessionId || null
+            data: line
           });
         }
       }
@@ -199,8 +193,7 @@ async function spawnCursor(command, options = {}, ws) {
       console.error('Cursor CLI stderr:', data.toString());
       ws.send({
         type: 'cursor-error',
-        error: data.toString(),
-        sessionId: capturedSessionId || sessionId || null
+        error: data.toString()
       });
     });
     
@@ -236,8 +229,7 @@ async function spawnCursor(command, options = {}, ws) {
 
       ws.send({
         type: 'cursor-error',
-        error: error.message,
-        sessionId: capturedSessionId || sessionId || null
+        error: error.message
       });
 
       reject(error);
@@ -272,4 +264,4 @@ export {
   abortCursorSession,
   isCursorSessionActive,
   getActiveCursorSessions
-};
+};

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 = [];

server/openai-codex.js

@@ -272,8 +272,7 @@ export async function queryCodex(command, options = {}, ws) {
           data: {
             used: totalTokens,
             total: 200000 // Default context window for Codex models
-          },
-          sessionId: currentSessionId
+          }
         });
       }
     }

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';
@@ -1894,9 +1895,6 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
   // Streaming throttle buffers
   const streamBufferRef = useRef('');
   const streamTimerRef = useRef(null);
-  // Track the session that this view expects when starting a brand‑new chat
-  // (prevents background sessions from streaming into a different view).
-  const pendingViewSessionRef = useRef(null);
   const commandQueryTimerRef = useRef(null);
   const [debouncedInput, setDebouncedInput] = useState('');
   const [showFileDropdown, setShowFileDropdown] = useState(false);
@@ -1918,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';
   });
@@ -1933,14 +1932,6 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
   // Track provider transitions so we only clear approvals when provider truly changes.
   // This does not sync with the backend; it just prevents UI prompts from disappearing.
   const lastProviderRef = useRef(provider);
-
-  const resetStreamingState = useCallback(() => {
-    if (streamTimerRef.current) {
-      clearTimeout(streamTimerRef.current);
-      streamTimerRef.current = null;
-    }
-    streamBufferRef.current = '';
-  }, []);
   // Load permission mode for the current session
   useEffect(() => {
     if (selectedSession?.id) {
@@ -3015,15 +3006,6 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
         const sessionChanged = currentSessionId !== null && currentSessionId !== selectedSession.id;
 
         if (sessionChanged) {
-          if (!isSystemSessionChange) {
-            // Clear any streaming leftovers from the previous session
-            resetStreamingState();
-            pendingViewSessionRef.current = null;
-            setChatMessages([]);
-            setSessionMessages([]);
-            setClaudeStatus(null);
-            setCanAbortSession(false);
-          }
           // Reset pagination state when switching sessions
           setMessagesOffset(0);
           setHasMoreMessages(false);
@@ -3093,22 +3075,17 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           }
         }
       } else {
-        // New session view (no selected session) - always reset UI state
-        if (!isSystemSessionChange) {
-          resetStreamingState();
-          pendingViewSessionRef.current = null;
+        // Only clear messages if this is NOT a system-initiated session change AND we're not loading
+        // During system session changes or while loading, preserve the chat messages
+        if (!isSystemSessionChange && !isLoading) {
           setChatMessages([]);
           setSessionMessages([]);
-          setClaudeStatus(null);
-          setCanAbortSession(false);
-          setIsLoading(false);
         }
         setCurrentSessionId(null);
         sessionStorage.removeItem('cursorSessionId');
         setMessagesOffset(0);
         setHasMoreMessages(false);
         setTotalMessages(0);
-        setTokenBudget(null);
       }
 
       // Mark loading as complete after messages are set
@@ -3119,7 +3096,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     };
 
     loadMessages();
-  }, [selectedSession, selectedProject, loadCursorSessionMessages, scrollToBottom, isSystemSessionChange, resetStreamingState]);
+  }, [selectedSession, selectedProject, loadCursorSessionMessages, scrollToBottom, isSystemSessionChange]);
 
   // External Message Update Handler: Reload messages when external CLI modifies current session
   // This triggers when App.jsx detects a JSONL file change for the currently-viewed session
@@ -3158,13 +3135,6 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     }
   }, [externalMessageUpdate, selectedSession, selectedProject, loadCursorSessionMessages, loadSessionMessages, isNearBottom, autoScrollToBottom, scrollToBottom]);
 
-  // When the user navigates to a specific session, clear any pending "new session" marker.
-  useEffect(() => {
-    if (selectedSession?.id) {
-      pendingViewSessionRef.current = null;
-    }
-  }, [selectedSession?.id]);
-
   // Update chatMessages when convertedMessages changes
   useEffect(() => {
     if (sessionMessages.length > 0) {
@@ -3229,77 +3199,17 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     // Handle WebSocket messages
     if (messages.length > 0) {
       const latestMessage = messages[messages.length - 1];
-      const messageData = latestMessage.data?.message || latestMessage.data;
 
       // Filter messages by session ID to prevent cross-session interference
       // Skip filtering for global messages that apply to all sessions
-      const globalMessageTypes = ['projects_updated', 'taskmaster-project-updated', 'session-created'];
+      const globalMessageTypes = ['projects_updated', 'taskmaster-project-updated', 'session-created', 'claude-complete', 'codex-complete'];
       const isGlobalMessage = globalMessageTypes.includes(latestMessage.type);
-      const lifecycleMessageTypes = new Set([
-        'claude-complete',
-        'codex-complete',
-        'cursor-result',
-        'session-aborted',
-        'claude-error',
-        'cursor-error',
-        'codex-error'
-      ]);
 
-      const isClaudeSystemInit = latestMessage.type === 'claude-response' &&
-        messageData &&
-        messageData.type === 'system' &&
-        messageData.subtype === 'init';
-      const isCursorSystemInit = latestMessage.type === 'cursor-system' &&
-        latestMessage.data &&
-        latestMessage.data.type === 'system' &&
-        latestMessage.data.subtype === 'init';
-
-      const systemInitSessionId = isClaudeSystemInit
-        ? messageData?.session_id
-        : isCursorSystemInit
-          ? latestMessage.data?.session_id
-          : null;
-
-      const activeViewSessionId = selectedSession?.id || currentSessionId || pendingViewSessionRef.current?.sessionId || null;
-      const isSystemInitForView = systemInitSessionId && (!activeViewSessionId || systemInitSessionId === activeViewSessionId);
-      const shouldBypassSessionFilter = isGlobalMessage || isSystemInitForView;
-      const isUnscopedError = !latestMessage.sessionId &&
-        pendingViewSessionRef.current &&
-        !pendingViewSessionRef.current.sessionId &&
-        (latestMessage.type === 'claude-error' || latestMessage.type === 'cursor-error' || latestMessage.type === 'codex-error');
-
-      const handleBackgroundLifecycle = (sessionId) => {
-        if (!sessionId) return;
-        if (onSessionInactive) {
-          onSessionInactive(sessionId);
-        }
-        if (onSessionNotProcessing) {
-          onSessionNotProcessing(sessionId);
-        }
-      };
-
-      if (!shouldBypassSessionFilter) {
-        if (!activeViewSessionId) {
-          // No session in view; ignore session-scoped traffic.
-          if (latestMessage.sessionId && lifecycleMessageTypes.has(latestMessage.type)) {
-            handleBackgroundLifecycle(latestMessage.sessionId);
-          }
-          if (!isUnscopedError) {
-            return;
-          }
-        }
-        if (!latestMessage.sessionId && !isUnscopedError) {
-          // Drop unscoped messages to prevent cross-session bleed.
-          return;
-        }
-        if (latestMessage.sessionId !== activeViewSessionId) {
-          if (latestMessage.sessionId && lifecycleMessageTypes.has(latestMessage.type)) {
-            handleBackgroundLifecycle(latestMessage.sessionId);
-          }
-          // Message is for a different session, ignore it
-          console.log('??-?,? Skipping message for different session:', latestMessage.sessionId, 'current:', activeViewSessionId);
-          return;
-        }
+      // For new sessions (currentSessionId is null), allow messages through
+      if (!isGlobalMessage && latestMessage.sessionId && currentSessionId && latestMessage.sessionId !== currentSessionId) {
+        // Message is for a different session, ignore it
+        console.log('⏭️ Skipping message for different session:', latestMessage.sessionId, 'current:', currentSessionId);
+        return;
       }
 
       switch (latestMessage.type) {
@@ -3308,9 +3218,6 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           // Store it temporarily until conversation completes (prevents premature session association)
           if (latestMessage.sessionId && !currentSessionId) {
             sessionStorage.setItem('pendingSessionId', latestMessage.sessionId);
-            if (pendingViewSessionRef.current && !pendingViewSessionRef.current.sessionId) {
-              pendingViewSessionRef.current.sessionId = latestMessage.sessionId;
-            }
             
             // Mark as system change to prevent clearing messages when session ID updates
             setIsSystemSessionChange(true);
@@ -3339,6 +3246,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           break;
 
         case 'claude-response':
+          const messageData = latestMessage.data.message || latestMessage.data;
           
           // Handle Cursor streaming format (content_block_delta / content_block_stop)
           if (messageData && typeof messageData === 'object' && messageData.type) {
@@ -3407,8 +3315,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
               latestMessage.data.subtype === 'init' && 
               latestMessage.data.session_id && 
               currentSessionId && 
-              latestMessage.data.session_id !== currentSessionId &&
-              isSystemInitForView) {
+              latestMessage.data.session_id !== currentSessionId) {
             
             console.log('🔄 Claude CLI session duplication detected:', {
               originalSession: currentSessionId,
@@ -3431,8 +3338,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           if (latestMessage.data.type === 'system' && 
               latestMessage.data.subtype === 'init' && 
               latestMessage.data.session_id && 
-              !currentSessionId &&
-              isSystemInitForView) {
+              !currentSessionId) {
             
             console.log('🔄 New session init detected:', {
               newSession: latestMessage.data.session_id
@@ -3453,8 +3359,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
               latestMessage.data.subtype === 'init' && 
               latestMessage.data.session_id && 
               currentSessionId && 
-              latestMessage.data.session_id === currentSessionId &&
-              isSystemInitForView) {
+              latestMessage.data.session_id === currentSessionId) {
             console.log('🔄 System init message for current session, ignoring');
             return; // Don't process the message further
           }
@@ -3622,9 +3527,6 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           try {
             const cdata = latestMessage.data;
             if (cdata && cdata.type === 'system' && cdata.subtype === 'init' && cdata.session_id) {
-              if (!isSystemInitForView) {
-                return;
-              }
               // If we already have a session and this differs, switch (duplication/redirect)
               if (currentSessionId && cdata.session_id !== currentSessionId) {
                 console.log('🔄 Cursor session switch detected:', { originalSession: currentSessionId, newSession: cdata.session_id });
@@ -4357,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) {
@@ -4416,11 +4325,6 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     // Session Protection: Mark session as active to prevent automatic project updates during conversation
     // Use existing session if available; otherwise a temporary placeholder until backend provides real ID
     const sessionToActivate = effectiveSessionId || `new-session-${Date.now()}`;
-    if (!effectiveSessionId && !selectedSession?.id) {
-      // We are starting a brand-new session in this view. Track it so we only
-      // accept streaming updates for this run.
-      pendingViewSessionRef.current = { sessionId: null, startedAt: Date.now() };
-    }
     if (onSessionActive) {
       onSessionActive(sessionToActivate);
     }
@@ -4501,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) {
@@ -5316,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 };