feat: integrate thinking level support across agent and UI components

- Enhanced the agent service and request handling to include an optional thinking level parameter, improving the configurability of model interactions.
- Updated the UI components to manage and display the selected model along with its thinking level, ensuring a cohesive user experience.
- Refactored the model selector and input controls to accommodate the new model selection structure, enhancing usability and clarity.
- Adjusted the Electron API and HTTP client to support the new thinking level parameter in requests, ensuring consistent data handling across the application.

This update significantly improves the agent's ability to adapt its reasoning capabilities based on user-defined thinking levels, enhancing overall performance and user satisfaction.

apps/ui/src/components/views/agent-view/input-area/agent-input-area.tsx

@@ -1,6 +1,6 @@
 import { ImageDropZone } from '@/components/ui/image-drop-zone';
-import type { ImageAttachment, TextFileAttachment, ModelAlias } from '@/store/app-store';
-import type { CursorModelId } from '@automaker/types';
+import type { ImageAttachment, TextFileAttachment } from '@/store/app-store';
+import type { PhaseModelEntry } from '@automaker/types';
 import { FilePreview } from './file-preview';
 import { QueueDisplay } from './queue-display';
 import { InputControls } from './input-controls';
@@ -16,8 +16,10 @@ interface AgentInputAreaProps {
   onInputChange: (value: string) => void;
   onSend: () => void;
   onStop: () => void;
-  selectedModel: ModelAlias | CursorModelId;
-  onModelSelect: (model: ModelAlias | CursorModelId) => void;
+  /** Current model selection (model + optional thinking level) */
+  modelSelection: PhaseModelEntry;
+  /** Callback when model is selected */
+  onModelSelect: (entry: PhaseModelEntry) => void;
   isProcessing: boolean;
   isConnected: boolean;
   // File attachments
@@ -48,7 +50,7 @@ export function AgentInputArea({
   onInputChange,
   onSend,
   onStop,
-  selectedModel,
+  modelSelection,
   onModelSelect,
   isProcessing,
   isConnected,
@@ -113,7 +115,7 @@ export function AgentInputArea({
         onStop={onStop}
         onToggleImageDropZone={onToggleImageDropZone}
         onPaste={onPaste}
-        selectedModel={selectedModel}
+        modelSelection={modelSelection}
         onModelSelect={onModelSelect}
         isProcessing={isProcessing}
         isConnected={isConnected}

apps/ui/src/components/views/agent-view/input-area/input-controls.tsx

@@ -4,8 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { cn } from '@/lib/utils';
 import { AgentModelSelector } from '../shared/agent-model-selector';
-import type { ModelAlias } from '@/store/app-store';
-import type { CursorModelId } from '@automaker/types';
+import type { PhaseModelEntry } from '@automaker/types';
 
 interface InputControlsProps {
   input: string;
@@ -14,8 +13,10 @@ interface InputControlsProps {
   onStop: () => void;
   onToggleImageDropZone: () => void;
   onPaste: (e: React.ClipboardEvent) => Promise<void>;
-  selectedModel: ModelAlias | CursorModelId;
-  onModelSelect: (model: ModelAlias | CursorModelId) => void;
+  /** Current model selection (model + optional thinking level) */
+  modelSelection: PhaseModelEntry;
+  /** Callback when model is selected */
+  onModelSelect: (entry: PhaseModelEntry) => void;
   isProcessing: boolean;
   isConnected: boolean;
   hasFiles: boolean;
@@ -37,7 +38,7 @@ export function InputControls({
   onStop,
   onToggleImageDropZone,
   onPaste,
-  selectedModel,
+  modelSelection,
   onModelSelect,
   isProcessing,
   isConnected,
@@ -125,8 +126,8 @@ export function InputControls({
 
         {/* Model Selector */}
         <AgentModelSelector
-          selectedModel={selectedModel}
-          onModelSelect={onModelSelect}
+          value={modelSelection}
+          onChange={onModelSelect}
           disabled={!isConnected}
         />
 

apps/ui/src/components/views/agent-view/shared/agent-model-selector.tsx

@@ -1,127 +1,25 @@
-import { ChevronDown, AlertCircle } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { cn } from '@/lib/utils';
-import { useAppStore, type ModelAlias } from '@/store/app-store';
-import { useSetupStore } from '@/store/setup-store';
-import { CLAUDE_MODELS, CURSOR_MODELS } from '@/components/views/board-view/shared/model-constants';
-import type { CursorModelId } from '@automaker/types';
-import { getModelProvider, stripProviderPrefix } from '@automaker/types';
+/**
+ * Re-export PhaseModelSelector in compact mode for use in agent chat view.
+ * This ensures we have a single source of truth for model selection logic.
+ */
+
+import { PhaseModelSelector } from '@/components/views/settings-view/phase-models/phase-model-selector';
+import type { PhaseModelEntry } from '@automaker/types';
+
+// Re-export types for convenience
+export type { PhaseModelEntry };
 
 interface AgentModelSelectorProps {
-  selectedModel: ModelAlias | CursorModelId;
-  onModelSelect: (model: ModelAlias | CursorModelId) => void;
+  /** Current model selection (model + optional thinking level) */
+  value: PhaseModelEntry;
+  /** Callback when model is selected */
+  onChange: (entry: PhaseModelEntry) => void;
+  /** Disabled state */
   disabled?: boolean;
 }
 
-export function AgentModelSelector({
-  selectedModel,
-  onModelSelect,
-  disabled,
-}: AgentModelSelectorProps) {
-  const { enabledCursorModels } = useAppStore();
-  const { cursorCliStatus } = useSetupStore();
-
-  // Check if Cursor CLI is available
-  const isCursorAvailable = cursorCliStatus?.installed && cursorCliStatus?.auth?.authenticated;
-
-  // Filter cursor models by enabled settings
-  const filteredCursorModels = CURSOR_MODELS.filter((model) => {
-    const modelId = stripProviderPrefix(model.id) as CursorModelId;
-    return enabledCursorModels.includes(modelId);
-  });
-
-  // Determine current provider and display label
-  const currentProvider = getModelProvider(selectedModel);
-  const currentModel =
-    currentProvider === 'cursor'
-      ? CURSOR_MODELS.find((m) => m.id === selectedModel)
-      : CLAUDE_MODELS.find((m) => m.id === selectedModel);
-
-  // Get display label (strip "Claude " prefix for brevity)
-  const displayLabel = currentModel?.label.replace('Claude ', '') || 'Sonnet';
-
+export function AgentModelSelector({ value, onChange, disabled }: AgentModelSelectorProps) {
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          className="h-11 gap-1 text-xs font-medium rounded-xl border-border px-2.5"
-          disabled={disabled}
-          data-testid="model-selector"
-        >
-          {currentProvider === 'cursor' && (
-            <span className="w-2 h-2 rounded-full bg-purple-500 mr-1" />
-          )}
-          {displayLabel}
-          <ChevronDown className="w-3 h-3 opacity-50" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-72 max-h-80 overflow-y-auto">
-        {/* Claude Models Section */}
-        <DropdownMenuLabel className="text-xs text-muted-foreground">Claude</DropdownMenuLabel>
-        {CLAUDE_MODELS.map((model) => (
-          <DropdownMenuItem
-            key={model.id}
-            onClick={() => onModelSelect(model.id as ModelAlias)}
-            className={cn('cursor-pointer', selectedModel === model.id && 'bg-accent')}
-            data-testid={`model-option-${model.id}`}
-          >
-            <div className="flex flex-col">
-              <span className="font-medium">{model.label}</span>
-              <span className="text-xs text-muted-foreground">{model.description}</span>
-            </div>
-          </DropdownMenuItem>
-        ))}
-
-        {/* Cursor Models Section */}
-        {filteredCursorModels.length > 0 && (
-          <>
-            <DropdownMenuSeparator />
-            <DropdownMenuLabel className="text-xs text-muted-foreground flex items-center gap-2">
-              Cursor CLI
-              {!isCursorAvailable && (
-                <span className="text-amber-500 flex items-center gap-1 ml-auto">
-                  <AlertCircle className="w-3 h-3" />
-                  Setup required
-                </span>
-              )}
-            </DropdownMenuLabel>
-            {filteredCursorModels.map((model) => (
-              <DropdownMenuItem
-                key={model.id}
-                onClick={() => onModelSelect(model.id as CursorModelId)}
-                className={cn(
-                  'cursor-pointer',
-                  selectedModel === model.id && 'bg-accent',
-                  !isCursorAvailable && 'opacity-50'
-                )}
-                disabled={!isCursorAvailable}
-                data-testid={`model-option-${model.id}`}
-              >
-                <div className="flex flex-col flex-1">
-                  <div className="flex items-center gap-2">
-                    <span className="font-medium">{model.label}</span>
-                    {model.hasThinking && (
-                      <span className="text-[10px] px-1.5 py-0.5 rounded bg-purple-500/10 text-purple-600 dark:text-purple-400">
-                        Thinking
-                      </span>
-                    )}
-                  </div>
-                  <span className="text-xs text-muted-foreground">{model.description}</span>
-                </div>
-              </DropdownMenuItem>
-            ))}
-          </>
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <PhaseModelSelector value={value} onChange={onChange} disabled={disabled} compact align="end" />
   );
 }