feat: Enhance AutoModeService and UI for Cursor model support

- Updated AutoModeService to track model and provider for running features, improving logging and state management.
- Modified AddFeatureDialog to handle model selection for both Claude and Cursor, adjusting thinking level logic accordingly.
- Expanded ModelSelector to allow provider selection and dynamically display models based on the selected provider.
- Introduced new model constants for Cursor models, integrating them into the existing model management structure.
- Updated README and project plan to reflect the completion of task execution integration for Cursor models.

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

@@ -1,54 +1,178 @@
 import { Label } from '@/components/ui/label';
-import { Brain } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Brain, Bot, Terminal } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { AgentModel } from '@/store/app-store';
-import { CLAUDE_MODELS, ModelOption } from './model-constants';
+import type { AgentModel } from '@/store/app-store';
+import type { ModelProvider } from '@automaker/types';
+import { CLAUDE_MODELS, CURSOR_MODELS, ModelOption } from './model-constants';
 
 interface ModelSelectorProps {
-  selectedModel: AgentModel;
-  onModelSelect: (model: AgentModel) => void;
+  selectedModel: string; // Can be AgentModel or "cursor-{id}"
+  onModelSelect: (model: string) => void;
   testIdPrefix?: string;
 }
 
+/**
+ * Get the provider from a model string
+ */
+function getProviderFromModelString(model: string): ModelProvider {
+  if (model.startsWith('cursor-')) {
+    return 'cursor';
+  }
+  return 'claude';
+}
+
 export function ModelSelector({
   selectedModel,
   onModelSelect,
   testIdPrefix = 'model-select',
 }: ModelSelectorProps) {
+  const selectedProvider = getProviderFromModelString(selectedModel);
+
+  const handleProviderChange = (provider: ModelProvider) => {
+    if (provider === 'cursor' && selectedProvider !== 'cursor') {
+      // Switch to Cursor's default model
+      onModelSelect('cursor-auto');
+    } else if (provider === 'claude' && selectedProvider !== 'claude') {
+      // Switch to Claude's default model
+      onModelSelect('sonnet');
+    }
+  };
+
   return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between">
-        <Label className="flex items-center gap-2">
-          <Brain className="w-4 h-4 text-primary" />
-          Claude (SDK)
-        </Label>
-        <span className="text-[11px] px-2 py-0.5 rounded-full border border-primary/40 text-primary">
-          Native
-        </span>
-      </div>
-      <div className="flex gap-2 flex-wrap">
-        {CLAUDE_MODELS.map((option) => {
-          const isSelected = selectedModel === option.id;
-          const shortName = option.label.replace('Claude ', '');
-          return (
-            <button
-              key={option.id}
-              type="button"
-              onClick={() => onModelSelect(option.id)}
-              title={option.description}
-              className={cn(
-                'flex-1 min-w-[80px] px-3 py-2 rounded-md border text-sm font-medium transition-colors',
-                isSelected
-                  ? 'bg-primary text-primary-foreground border-primary'
-                  : 'bg-background hover:bg-accent border-input'
-              )}
-              data-testid={`${testIdPrefix}-${option.id}`}
-            >
-              {shortName}
-            </button>
-          );
-        })}
+    <div className="space-y-4">
+      {/* Provider Selection */}
+      <div className="space-y-2">
+        <Label>AI Provider</Label>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={() => handleProviderChange('claude')}
+            className={cn(
+              'flex-1 px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-center gap-2',
+              selectedProvider === 'claude'
+                ? 'bg-primary text-primary-foreground border-primary'
+                : 'bg-background hover:bg-accent border-border'
+            )}
+            data-testid={`${testIdPrefix}-provider-claude`}
+          >
+            <Bot className="w-4 h-4" />
+            Claude
+          </button>
+          <button
+            type="button"
+            onClick={() => handleProviderChange('cursor')}
+            className={cn(
+              'flex-1 px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-center gap-2',
+              selectedProvider === 'cursor'
+                ? 'bg-primary text-primary-foreground border-primary'
+                : 'bg-background hover:bg-accent border-border'
+            )}
+            data-testid={`${testIdPrefix}-provider-cursor`}
+          >
+            <Terminal className="w-4 h-4" />
+            Cursor CLI
+          </button>
+        </div>
       </div>
+
+      {/* Claude Models */}
+      {selectedProvider === 'claude' && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Label className="flex items-center gap-2">
+              <Brain className="w-4 h-4 text-primary" />
+              Claude Model
+            </Label>
+            <span className="text-[11px] px-2 py-0.5 rounded-full border border-primary/40 text-primary">
+              Native SDK
+            </span>
+          </div>
+          <div className="flex gap-2 flex-wrap">
+            {CLAUDE_MODELS.map((option) => {
+              const isSelected = selectedModel === option.id;
+              const shortName = option.label.replace('Claude ', '');
+              return (
+                <button
+                  key={option.id}
+                  type="button"
+                  onClick={() => onModelSelect(option.id)}
+                  title={option.description}
+                  className={cn(
+                    'flex-1 min-w-[80px] px-3 py-2 rounded-md border text-sm font-medium transition-colors',
+                    isSelected
+                      ? 'bg-primary text-primary-foreground border-primary'
+                      : 'bg-background hover:bg-accent border-input'
+                  )}
+                  data-testid={`${testIdPrefix}-${option.id}`}
+                >
+                  {shortName}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Cursor Models */}
+      {selectedProvider === 'cursor' && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Label className="flex items-center gap-2">
+              <Terminal className="w-4 h-4 text-primary" />
+              Cursor Model
+            </Label>
+            <span className="text-[11px] px-2 py-0.5 rounded-full border border-amber-500/40 text-amber-600 dark:text-amber-400">
+              CLI
+            </span>
+          </div>
+          <div className="flex flex-col gap-2">
+            {CURSOR_MODELS.map((option) => {
+              const isSelected = selectedModel === option.id;
+              return (
+                <button
+                  key={option.id}
+                  type="button"
+                  onClick={() => onModelSelect(option.id)}
+                  title={option.description}
+                  className={cn(
+                    'w-full px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-between',
+                    isSelected
+                      ? 'bg-primary text-primary-foreground border-primary'
+                      : 'bg-background hover:bg-accent border-border'
+                  )}
+                  data-testid={`${testIdPrefix}-${option.id}`}
+                >
+                  <span>{option.label}</span>
+                  <div className="flex gap-1">
+                    {option.hasThinking && (
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          'text-xs',
+                          isSelected
+                            ? 'border-primary-foreground/50 text-primary-foreground'
+                            : 'border-amber-500/50 text-amber-600 dark:text-amber-400'
+                        )}
+                      >
+                        Thinking
+                      </Badge>
+                    )}
+                    {option.tier && (
+                      <Badge
+                        variant={option.tier === 'free' ? 'default' : 'secondary'}
+                        className={cn('text-xs', isSelected && 'bg-primary-foreground/20')}
+                      >
+                        {option.tier}
+                      </Badge>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
     </div>
   );
 }