feat: Add thinking mode selector to chat interface

src/components/ChatInterface.jsx

@@ -24,6 +24,7 @@ import ClaudeLogo from './ClaudeLogo.jsx';
 import ClaudeStatus from './ClaudeStatus';
 import { MicButton } from './MicButton.jsx';
 import { api } from '../utils/api';
+import ThinkingModeSelector, { thinkingModes } from './ThinkingModeSelector.jsx';
 
 // Memoized message component to prevent unnecessary re-renders
 const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFileOpen, onShowSettings, autoExpandTools, showRawParameters }) => {
@@ -924,6 +925,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
   const [selectedCommandIndex, setSelectedCommandIndex] = useState(-1);
   const [slashPosition, setSlashPosition] = useState(-1);
   const [claudeStatus, setClaudeStatus] = useState(null);
+  const [thinkingMode, setThinkingMode] = useState('none');
 
 
   // Memoized diff calculation to prevent recalculating on every render
@@ -1624,6 +1626,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}`;
+    }
+
     const userMessage = {
       type: 'user',
       content: input,
@@ -1676,7 +1685,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     // Send command to Claude CLI via WebSocket
     sendMessage({
       type: 'claude-command',
-      command: input,
+      command: messageContent,
       options: {
         projectPath: selectedProject.path,
         cwd: selectedProject.fullPath,
@@ -1689,6 +1698,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
 
     setInput('');
     setIsTextareaExpanded(false);
+    setThinkingMode('none'); // Reset thinking mode after sending
     // Clear the saved draft since message was sent
     if (selectedProject) {
       localStorage.removeItem(`draft_input_${selectedProject.name}`);
@@ -1955,6 +1965,13 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
               </div>
             </button>
 
+            {/* Thinking Mode Selector */}
+            <ThinkingModeSelector
+              selectedMode={thinkingMode}
+              onModeChange={setThinkingMode}
+              className=""
+            />
+
             {/* Scroll to bottom button - positioned next to mode indicator */}
             {isUserScrolledUp && chatMessages.length > 0 && (
               <button

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 };