feat: Enhance Cursor model selection and profile handling

- Updated AddFeatureDialog to support both Cursor and Claude profiles, allowing for dynamic model and thinking level selection based on the chosen profile. - Modified ModelSelector to filter available Cursor models based on global settings and display a warning if the Cursor CLI is not available. - Enhanced ProfileQuickSelect to handle both profile types and improve selection logic for Cursor profiles. - Refactored CursorSettingsTab to manage global settings for enabled Cursor models and default model selection, streamlining the configuration process. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
2026-01-31 06:42:03 +00:00 · 2025-12-29 22:17:07 +01:00
parent fa23a7b8e2
commit 8e10f522c0
6 changed files with 184 additions and 154 deletions
--- a/apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx
+++ b/apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx
@@ -327,12 +327,23 @@ export function AddFeatureDialog({
    });
  };

-  const handleProfileSelect = (model: AgentModel, thinkingLevel: ThinkingLevel) => {
-    setNewFeature({
-      ...newFeature,
-      model,
-      thinkingLevel,
-    });
+  const handleProfileSelect = (profile: AIProfile) => {
+    if (profile.provider === 'cursor') {
+      // Cursor profile - set cursor model
+      const cursorModel = `cursor-${profile.cursorModel || 'auto'}`;
+      setNewFeature({
+        ...newFeature,
+        model: cursorModel as AgentModel,
+        thinkingLevel: 'none', // Cursor handles thinking internally
+      });
+    } else {
+      // Claude profile
+      setNewFeature({
+        ...newFeature,
+        model: profile.model || 'sonnet',
+        thinkingLevel: profile.thinkingLevel || 'none',
+      });
+    }
  };

  // Cursor models handle thinking internally, so only show thinking selector for Claude models
@@ -529,6 +540,7 @@ export function AddFeatureDialog({
              profiles={aiProfiles}
              selectedModel={newFeature.model}
              selectedThinkingLevel={newFeature.thinkingLevel}
+              selectedCursorModel={isCursorModel ? newFeature.model : undefined}
              onSelect={handleProfileSelect}
              showManageLink
              onManageLinkClick={() => {
--- a/apps/ui/src/components/views/board-view/shared/model-selector.tsx
+++ b/apps/ui/src/components/views/board-view/shared/model-selector.tsx
@@ -1,8 +1,10 @@
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
-import { Brain, Bot, Terminal } from 'lucide-react';
+import { Brain, Bot, Terminal, AlertTriangle } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { AgentModel } from '@/store/app-store';
+import { useAppStore } from '@/store/app-store';
+import { useSetupStore } from '@/store/setup-store';
 import type { ModelProvider } from '@automaker/types';
 import { CLAUDE_MODELS, CURSOR_MODELS, ModelOption } from './model-constants';

@@ -27,12 +29,25 @@ export function ModelSelector({
  onModelSelect,
  testIdPrefix = 'model-select',
 }: ModelSelectorProps) {
+  const { enabledCursorModels, cursorDefaultModel } = useAppStore();
+  const { cursorCliStatus } = useSetupStore();
+
  const selectedProvider = getProviderFromModelString(selectedModel);

+  // Check if Cursor CLI is available
+  const isCursorAvailable = cursorCliStatus?.installed && cursorCliStatus?.auth?.authenticated;
+
+  // Filter Cursor models based on enabled models from global settings
+  const filteredCursorModels = CURSOR_MODELS.filter((model) => {
+    // Extract the cursor model ID from the prefixed ID (e.g., "cursor-auto" -> "auto")
+    const cursorModelId = model.id.replace('cursor-', '');
+    return enabledCursorModels.includes(cursorModelId as any);
+  });
+
  const handleProviderChange = (provider: ModelProvider) => {
    if (provider === 'cursor' && selectedProvider !== 'cursor') {
-      // Switch to Cursor's default model
-      onModelSelect('cursor-auto');
+      // Switch to Cursor's default model (from global settings)
+      onModelSelect(`cursor-${cursorDefaultModel}`);
    } else if (provider === 'claude' && selectedProvider !== 'claude') {
      // Switch to Claude's default model
      onModelSelect('sonnet');
@@ -117,6 +132,17 @@ export function ModelSelector({
      {/* Cursor Models */}
      {selectedProvider === 'cursor' && (
        <div className="space-y-3">
+          {/* Warning when Cursor CLI is not available */}
+          {!isCursorAvailable && (
+            <div className="flex items-start gap-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20">
+              <AlertTriangle className="w-4 h-4 text-amber-400 mt-0.5 shrink-0" />
+              <div className="text-sm text-amber-400">
+                Cursor CLI is not installed or authenticated. Configure it in Settings → AI
+                Providers.
+              </div>
+            </div>
+          )}
+
          <div className="flex items-center justify-between">
            <Label className="flex items-center gap-2">
              <Terminal className="w-4 h-4 text-primary" />
@@ -127,49 +153,55 @@ export function ModelSelector({
            </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>
+            {filteredCursorModels.length === 0 ? (
+              <div className="text-sm text-muted-foreground p-3 border border-dashed rounded-md text-center">
+                No Cursor models enabled. Enable models in Settings → AI Providers.
+              </div>
+            ) : (
+              filteredCursorModels.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'
                    )}
-                    {option.tier && (
-                      <Badge
-                        variant={option.tier === 'free' ? 'default' : 'secondary'}
-                        className={cn('text-xs', isSelected && 'bg-primary-foreground/20')}
-                      >
-                        {option.tier}
-                      </Badge>
-                    )}
-                  </div>
-                </button>
-              );
-            })}
+                    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>
      )}
--- a/apps/ui/src/components/views/board-view/shared/profile-quick-select.tsx
+++ b/apps/ui/src/components/views/board-view/shared/profile-quick-select.tsx
@@ -1,5 +1,5 @@
 import { Label } from '@/components/ui/label';
-import { Brain, UserCircle } from 'lucide-react';
+import { Brain, UserCircle, Terminal } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { AgentModel, ThinkingLevel, AIProfile } from '@automaker/types';
 import { CURSOR_MODEL_MAP, profileHasThinking } from '@automaker/types';
@@ -34,7 +34,8 @@ interface ProfileQuickSelectProps {
  profiles: AIProfile[];
  selectedModel: AgentModel;
  selectedThinkingLevel: ThinkingLevel;
-  onSelect: (model: AgentModel, thinkingLevel: ThinkingLevel) => void;
+  selectedCursorModel?: string; // For detecting cursor profile selection
+  onSelect: (profile: AIProfile) => void; // Changed to pass full profile
  testIdPrefix?: string;
  showManageLink?: boolean;
  onManageLinkClick?: () => void;
@@ -44,19 +45,30 @@ export function ProfileQuickSelect({
  profiles,
  selectedModel,
  selectedThinkingLevel,
+  selectedCursorModel,
  onSelect,
  testIdPrefix = 'profile-quick-select',
  showManageLink = false,
  onManageLinkClick,
 }: ProfileQuickSelectProps) {
-  // Filter to only Claude profiles for now - Cursor profiles will be supported
-  // when features support provider selection (Phase 9)
-  const claudeProfiles = profiles.filter((p) => p.provider === 'claude');
+  // Show both Claude and Cursor profiles
+  const allProfiles = profiles;

-  if (claudeProfiles.length === 0) {
+  if (allProfiles.length === 0) {
    return null;
  }

+  // Check if a profile is selected
+  const isProfileSelected = (profile: AIProfile): boolean => {
+    if (profile.provider === 'cursor') {
+      // For cursor profiles, check if cursor model matches
+      const profileCursorModel = `cursor-${profile.cursorModel || 'auto'}`;
+      return selectedCursorModel === profileCursorModel;
+    }
+    // For Claude profiles
+    return selectedModel === profile.model && selectedThinkingLevel === profile.thinkingLevel;
+  };
+
  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
@@ -69,15 +81,16 @@ export function ProfileQuickSelect({
        </span>
      </div>
      <div className="grid grid-cols-2 gap-2">
-        {claudeProfiles.slice(0, 6).map((profile) => {
+        {allProfiles.slice(0, 6).map((profile) => {
          const IconComponent = profile.icon ? PROFILE_ICONS[profile.icon] : Brain;
-          const isSelected =
-            selectedModel === profile.model && selectedThinkingLevel === profile.thinkingLevel;
+          const isSelected = isProfileSelected(profile);
+          const isCursorProfile = profile.provider === 'cursor';
+
          return (
            <button
              key={profile.id}
              type="button"
-              onClick={() => onSelect(profile.model!, profile.thinkingLevel!)}
+              onClick={() => onSelect(profile)}
              className={cn(
                'flex items-center gap-2 p-2 rounded-lg border text-left transition-all',
                isSelected
@@ -86,8 +99,17 @@ export function ProfileQuickSelect({
              )}
              data-testid={`${testIdPrefix}-${profile.id}`}
            >
-              <div className="w-7 h-7 rounded flex items-center justify-center shrink-0 bg-primary/10">
-                {IconComponent && <IconComponent className="w-4 h-4 text-primary" />}
+              <div
+                className={cn(
+                  'w-7 h-7 rounded flex items-center justify-center shrink-0',
+                  isCursorProfile ? 'bg-amber-500/10' : 'bg-primary/10'
+                )}
+              >
+                {isCursorProfile ? (
+                  <Terminal className="w-4 h-4 text-amber-500" />
+                ) : (
+                  IconComponent && <IconComponent className="w-4 h-4 text-primary" />
+                )}
              </div>
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium truncate">{profile.name}</p>
--- a/apps/ui/src/components/views/settings-view/providers/cursor-settings-tab.tsx
+++ b/apps/ui/src/components/views/settings-view/providers/cursor-settings-tab.tsx
@@ -14,7 +14,7 @@ import { toast } from 'sonner';
 import { getHttpApiClient } from '@/lib/http-api-client';
 import { useAppStore } from '@/store/app-store';
 import { cn } from '@/lib/utils';
-import type { CursorModelId, CursorModelConfig, CursorCliConfig } from '@automaker/types';
+import type { CursorModelId, CursorModelConfig } from '@automaker/types';
 import { CURSOR_MODEL_MAP } from '@automaker/types';
 import {
  CursorCliStatus,
@@ -30,13 +30,17 @@ interface CursorStatus {
 }

 export function CursorSettingsTab() {
-  const { currentProject } = useAppStore();
+  // Global settings from store
+  const { enabledCursorModels, cursorDefaultModel, setCursorDefaultModel, toggleCursorModel } =
+    useAppStore();
+
  const [status, setStatus] = useState<CursorStatus | null>(null);
-  const [config, setConfig] = useState<CursorCliConfig | null>(null);
-  const [availableModels, setAvailableModels] = useState<CursorModelConfig[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);

+  // All available models from the model map
+  const availableModels: CursorModelConfig[] = Object.values(CURSOR_MODEL_MAP);
+
  const loadData = useCallback(async () => {
    setIsLoading(true);
    try {
@@ -51,59 +55,23 @@ export function CursorSettingsTab() {
          method: statusResult.auth?.method,
        });
      }
-
-      // Only load config if we have a project path
-      if (currentProject?.path) {
-        const configResult = await api.setup.getCursorConfig(currentProject.path);
-        if (configResult.success) {
-          setConfig({
-            defaultModel: configResult.config?.defaultModel as CursorModelId | undefined,
-            models: configResult.config?.models as CursorModelId[] | undefined,
-            mcpServers: configResult.config?.mcpServers,
-            rules: configResult.config?.rules,
-          });
-          if (configResult.availableModels) {
-            setAvailableModels(configResult.availableModels as CursorModelConfig[]);
-          } else {
-            setAvailableModels(Object.values(CURSOR_MODEL_MAP));
-          }
-        } else {
-          // Set defaults if no config
-          setAvailableModels(Object.values(CURSOR_MODEL_MAP));
-        }
-      } else {
-        // No project, just show available models
-        setAvailableModels(Object.values(CURSOR_MODEL_MAP));
-      }
    } catch (error) {
      console.error('Failed to load Cursor settings:', error);
      toast.error('Failed to load Cursor settings');
    } finally {
      setIsLoading(false);
    }
-  }, [currentProject?.path]);
+  }, []);

  useEffect(() => {
    loadData();
  }, [loadData]);

-  const handleDefaultModelChange = async (model: CursorModelId) => {
-    if (!currentProject?.path) {
-      toast.error('No project selected');
-      return;
-    }
-
+  const handleDefaultModelChange = (model: CursorModelId) => {
    setIsSaving(true);
    try {
-      const api = getHttpApiClient();
-      const result = await api.setup.setCursorDefaultModel(currentProject.path, model);
-
-      if (result.success) {
-        setConfig((prev) => (prev ? { ...prev, defaultModel: model } : { defaultModel: model }));
-        toast.success('Default model updated');
-      } else {
-        toast.error(result.error || 'Failed to update default model');
-      }
+      setCursorDefaultModel(model);
+      toast.success('Default model updated');
    } catch (error) {
      toast.error('Failed to update default model');
    } finally {
@@ -111,27 +79,10 @@ export function CursorSettingsTab() {
    }
  };

-  const handleModelToggle = async (model: CursorModelId, enabled: boolean) => {
-    if (!currentProject?.path) {
-      toast.error('No project selected');
-      return;
-    }
-
-    const currentModels = config?.models || ['auto'];
-    const newModels = enabled
-      ? [...currentModels, model]
-      : currentModels.filter((m) => m !== model);
-
+  const handleModelToggle = (model: CursorModelId, enabled: boolean) => {
    setIsSaving(true);
    try {
-      const api = getHttpApiClient();
-      const result = await api.setup.setCursorModels(currentProject.path, newModels);
-
-      if (result.success) {
-        setConfig((prev) => (prev ? { ...prev, models: newModels } : { models: newModels }));
-      } else {
-        toast.error(result.error || 'Failed to update models');
-      }
+      toggleCursorModel(model, enabled);
    } catch (error) {
      toast.error('Failed to update models');
    } finally {
@@ -174,8 +125,8 @@ export function CursorSettingsTab() {
      {/* CLI Status */}
      <CursorCliStatus status={status} isChecking={isLoading} onRefresh={loadData} />

-      {/* Model Configuration */}
-      {status?.installed && currentProject && (
+      {/* Model Configuration - Always show (global settings) */}
+      {status?.installed && (
        <div
          className={cn(
            'rounded-2xl overflow-hidden',
@@ -194,7 +145,7 @@ export function CursorSettingsTab() {
              </h2>
            </div>
            <p className="text-sm text-muted-foreground/80 ml-12">
-              Configure which Cursor models are available and set the default
+              Configure which Cursor models are available in the feature modal
            </p>
          </div>
          <div className="p-6 space-y-6">
@@ -202,7 +153,7 @@ export function CursorSettingsTab() {
            <div className="space-y-2">
              <Label>Default Model</Label>
              <Select
-                value={config?.defaultModel || 'auto'}
+                value={cursorDefaultModel}
                onValueChange={(v) => handleDefaultModelChange(v as CursorModelId)}
                disabled={isSaving}
              >
@@ -210,8 +161,8 @@ export function CursorSettingsTab() {
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
-                  {(config?.models || ['auto']).map((modelId) => {
-                    const model = CURSOR_MODEL_MAP[modelId as CursorModelId];
+                  {enabledCursorModels.map((modelId) => {
+                    const model = CURSOR_MODEL_MAP[modelId];
                    if (!model) return null;
                    return (
                      <SelectItem key={modelId} value={modelId}>
@@ -235,7 +186,7 @@ export function CursorSettingsTab() {
              <Label>Available Models</Label>
              <div className="grid gap-3">
                {availableModels.map((model) => {
-                  const isEnabled = config?.models?.includes(model.id) ?? model.id === 'auto';
+                  const isEnabled = enabledCursorModels.includes(model.id);
                  const isAuto = model.id === 'auto';

                  return (
@@ -272,26 +223,6 @@ export function CursorSettingsTab() {
          </div>
        </div>
      )}
-
-      {/* No Project Selected */}
-      {status?.installed && !currentProject && (
-        <div
-          className={cn(
-            'rounded-2xl overflow-hidden',
-            'border border-border/50',
-            'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
-            'shadow-sm shadow-black/5'
-          )}
-        >
-          <div className="p-8 text-center text-muted-foreground">
-            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500/10 to-brand-600/5 flex items-center justify-center border border-brand-500/10 mx-auto mb-4">
-              <Terminal className="w-6 h-6 text-brand-500/50" />
-            </div>
-            <p className="font-medium">No project selected</p>
-            <p className="text-sm mt-2">Select a project to configure Cursor models.</p>
-          </div>
-        </div>
-      )}
    </div>
  );
 }
--- a/apps/ui/src/store/app-store.ts
+++ b/apps/ui/src/store/app-store.ts
@@ -7,7 +7,9 @@ import type {
  AgentModel,
  PlanningMode,
  AIProfile,
+  CursorModelId,
 } from '@automaker/types';
+import { getAllCursorModelIds } from '@automaker/types';

 // Re-export ThemeMode for convenience
 export type { ThemeMode };
@@ -478,6 +480,10 @@ export interface AppState {
  // Validation Model Settings
  validationModel: AgentModel; // Model used for GitHub issue validation (default: opus)

+  // Cursor CLI Settings (global)
+  enabledCursorModels: CursorModelId[]; // Which Cursor models are available in feature modal
+  cursorDefaultModel: CursorModelId; // Default Cursor model selection
+
  // Claude Agent SDK Settings
  autoLoadClaudeMd: boolean; // Auto-load CLAUDE.md files using SDK's settingSources option

@@ -754,6 +760,11 @@ export interface AppActions {
  // Validation Model actions
  setValidationModel: (model: AgentModel) => void;

+  // Cursor CLI Settings actions
+  setEnabledCursorModels: (models: CursorModelId[]) => void;
+  setCursorDefaultModel: (model: CursorModelId) => void;
+  toggleCursorModel: (model: CursorModelId, enabled: boolean) => void;
+
  // Claude Agent SDK Settings actions
  setAutoLoadClaudeMd: (enabled: boolean) => Promise<void>;

@@ -957,6 +968,8 @@ const initialState: AppState = {
  muteDoneSound: false, // Default to sound enabled (not muted)
  enhancementModel: 'sonnet', // Default to sonnet for feature enhancement
  validationModel: 'opus', // Default to opus for GitHub issue validation
+  enabledCursorModels: getAllCursorModelIds(), // All Cursor models enabled by default
+  cursorDefaultModel: 'auto', // Default to auto selection
  autoLoadClaudeMd: false, // Default to disabled (user must opt-in)
  aiProfiles: DEFAULT_AI_PROFILES,
  projectAnalysis: null,
@@ -1583,6 +1596,16 @@ export const useAppStore = create<AppState & AppActions>()(
      // Validation Model actions
      setValidationModel: (model) => set({ validationModel: model }),

+      // Cursor CLI Settings actions
+      setEnabledCursorModels: (models) => set({ enabledCursorModels: models }),
+      setCursorDefaultModel: (model) => set({ cursorDefaultModel: model }),
+      toggleCursorModel: (model, enabled) =>
+        set((state) => ({
+          enabledCursorModels: enabled
+            ? [...state.enabledCursorModels, model]
+            : state.enabledCursorModels.filter((m) => m !== model),
+        })),
+
      // Claude Agent SDK Settings actions
      setAutoLoadClaudeMd: async (enabled) => {
        set({ autoLoadClaudeMd: enabled });
@@ -2734,6 +2757,8 @@ export const useAppStore = create<AppState & AppActions>()(
          muteDoneSound: state.muteDoneSound,
          enhancementModel: state.enhancementModel,
          validationModel: state.validationModel,
+          enabledCursorModels: state.enabledCursorModels,
+          cursorDefaultModel: state.cursorDefaultModel,
          autoLoadClaudeMd: state.autoLoadClaudeMd,
          // Profiles and sessions
          aiProfiles: state.aiProfiles,
--- a/libs/types/src/settings.ts
+++ b/libs/types/src/settings.ts
@@ -8,7 +8,7 @@

 import type { AgentModel } from './model.js';
 import type { CursorModelId } from './cursor-models.js';
-import { CURSOR_MODEL_MAP } from './cursor-models.js';
+import { CURSOR_MODEL_MAP, getAllCursorModelIds } from './cursor-models.js';

 // Re-export AgentModel for convenience
 export type { AgentModel };
@@ -304,6 +304,12 @@ export interface GlobalSettings {
  /** Which model to use for GitHub issue validation */
  validationModel: AgentModel;

+  // Cursor CLI Settings (global)
+  /** Which Cursor models are available in feature modal (empty = all) */
+  enabledCursorModels: CursorModelId[];
+  /** Default Cursor model selection when switching to Cursor CLI */
+  cursorDefaultModel: CursorModelId;
+
  // Input Configuration
  /** User's keyboard shortcut bindings */
  keyboardShortcuts: KeyboardShortcuts;
@@ -488,6 +494,8 @@ export const DEFAULT_GLOBAL_SETTINGS: GlobalSettings = {
  muteDoneSound: false,
  enhancementModel: 'sonnet',
  validationModel: 'opus',
+  enabledCursorModels: getAllCursorModelIds(),
+  cursorDefaultModel: 'auto',
  keyboardShortcuts: DEFAULT_KEYBOARD_SHORTCUTS,
  aiProfiles: [],
  projects: [],