ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-02 08:33:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Claude Compatible Providers System (#629)

Browse Source 
* feat: refactor Claude API Profiles to Claude Compatible Providers

- Rename ClaudeApiProfile to ClaudeCompatibleProvider with models[] array
- Each ProviderModel has mapsToClaudeModel field for Claude tier mapping
- Add providerType field for provider-specific icons (glm, minimax, openrouter)
- Add thinking level support for provider models in phase selectors
- Show all mapped Claude models per provider model (e.g., "Maps to Haiku, Sonnet, Opus")
- Add Bulk Replace feature to switch all phases to a provider at once
- Hide Bulk Replace button when no providers are enabled
- Fix project-level phaseModelOverrides not persisting after refresh
- Fix deleting last provider not persisting (remove empty array guard)
- Add getProviderByModelId() helper for all SDK routes
- Update all routes to pass provider config for provider models
- Update terminology from "profiles" to "providers" throughout UI
- Update documentation to reflect new provider system

* fix: atomic writer race condition and bulk replace reset to defaults

1. AtomicWriter Race Condition Fix (libs/utils/src/atomic-writer.ts):
   - Changed temp file naming from Date.now() to Date.now() + random hex
   - Uses crypto.randomBytes(4).toString('hex') for uniqueness
   - Prevents ENOENT errors when multiple concurrent writes happen
     within the same millisecond

2. Bulk Replace "Anthropic Direct" Reset (both dialogs):
   - When selecting "Anthropic Direct", now uses DEFAULT_PHASE_MODELS
   - Properly resets thinking levels and other settings to defaults
   - Added thinkingLevel to the change detection comparison
   - Affects both global and project-level bulk replace dialogs

* fix: update tests for new model resolver passthrough behavior

1. model-resolver tests:
   - Unknown models now pass through unchanged (provider model support)
   - Removed expectations for warnings on unknown models
   - Updated case sensitivity and edge case tests accordingly
   - Added tests for provider-like model names (GLM-4.7, MiniMax-M2.1)

2. atomic-writer tests:
   - Updated regex to match new temp file format with random suffix
   - Format changed from .tmp.{timestamp} to .tmp.{timestamp}.{hex}

* refactor: simplify getPhaseModelWithOverrides calls per code review

Address code review feedback on PR #629:
- Make settingsService parameter optional in getPhaseModelWithOverrides
- Function now handles undefined settingsService gracefully by returning defaults
- Remove redundant ternary checks in 4 call sites:
  - apps/server/src/routes/context/routes/describe-file.ts
  - apps/server/src/routes/context/routes/describe-image.ts
  - apps/server/src/routes/worktree/routes/generate-commit-message.ts
  - apps/server/src/services/auto-mode-service.ts
- Remove unused DEFAULT_PHASE_MODELS imports where applicable

* test: fix server tests for provider model passthrough behavior

- Update model-resolver.test.ts to expect unknown models to pass through
  unchanged (supports ClaudeCompatibleProvider models like GLM-4.7)
- Remove warning expectations for unknown models (valid for providers)
- Add missing getCredentials and getGlobalSettings mocks to
  ideation-service.test.ts for settingsService

* fix: address code review feedback for model providers

- Honor thinkingLevel in generate-commit-message.ts
- Pass claudeCompatibleProvider in ideation-service.ts for provider models
- Resolve provider configuration for model overrides in generate-suggestions.ts
- Update "Active Profile" to "Active Provider" label in project-claude-section
- Use substring instead of deprecated substr in api-profiles-section
- Preserve provider enabled state when editing in api-profiles-section

* fix: address CodeRabbit review issues for Claude Compatible Providers

- Fix TypeScript TS2339 error in generate-suggestions.ts where
  settingsService was narrowed to 'never' type in else branch
- Use DEFAULT_PHASE_MODELS per-phase defaults instead of hardcoded
  'sonnet' in settings-helpers.ts
- Remove duplicate eventHooks key in use-settings-migration.ts
- Add claudeCompatibleProviders to localStorage migration parsing
  and merging functions
- Handle canonical claude-* model IDs (claude-haiku, claude-sonnet,
  claude-opus) in project-models-section display names

This resolves the CI build failures and addresses code review feedback.

* fix: skip broken list-view-priority E2E test and add Priority column label

- Skip list-view-priority.spec.ts with TODO explaining the infrastructure
  issue: setupRealProject only sets localStorage but server settings
  take precedence with localStorageMigrated: true
- Add 'Priority' label to list-header.tsx for the priority column
  (was empty string, now shows proper header text)
- Increase column width to accommodate the label

The E2E test issue is that tests create features in a temp directory,
but the server loads from the E2E Test Project fixture path set in
setup-e2e-fixtures.mjs. Needs infrastructure fix to properly switch
projects or create features through UI instead of on disk.
This commit is contained in:
Stefan de Vogelaere
2026-01-20 20:57:23 +01:00
committed by GitHub
parent 8facdc66a9
commit a1f234c7e2
48 changed files with 3870 additions and 1089 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/ui/src/components/views/project-settings-view/config/navigation.ts
View File

@@ -1,5 +1,5 @@
import type { LucideIcon } from 'lucide-react';
import { User, GitBranch, Palette, AlertTriangle, Bot } from 'lucide-react';
import { User, GitBranch, Palette, AlertTriangle, Workflow } from 'lucide-react';
import type { ProjectSettingsViewId } from '../hooks/use-project-settings-view';
export interface ProjectNavigationItem {
@@ -12,6 +12,6 @@ export const PROJECT_SETTINGS_NAV_ITEMS: ProjectNavigationItem[] = [
{ id: 'identity', label: 'Identity', icon: User },
{ id: 'worktrees', label: 'Worktrees', icon: GitBranch },
{ id: 'theme', label: 'Theme', icon: Palette },
{ id: 'claude', label: 'Claude', icon: Bot },
{ id: 'claude', label: 'Models', icon: Workflow },
{ id: 'danger', label: 'Danger Zone', icon: AlertTriangle },
];

356
apps/ui/src/components/views/project-settings-view/project-bulk-replace-dialog.tsx Normal file
View File

@@ -0,0 +1,356 @@
import { useState, useMemo } from 'react';
import { useAppStore } from '@/store/app-store';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { ArrowRight, Cloud, Server, Check, AlertCircle } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { Project } from '@/lib/electron';
import type {
PhaseModelKey,
PhaseModelEntry,
ClaudeCompatibleProvider,
ClaudeModelAlias,
} from '@automaker/types';
import { DEFAULT_PHASE_MODELS } from '@automaker/types';
interface ProjectBulkReplaceDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
project: Project;
}
// Phase display names for preview
const PHASE_LABELS: Record<PhaseModelKey, string> = {
enhancementModel: 'Feature Enhancement',
fileDescriptionModel: 'File Descriptions',
imageDescriptionModel: 'Image Descriptions',
commitMessageModel: 'Commit Messages',
validationModel: 'GitHub Issue Validation',
specGenerationModel: 'App Specification',
featureGenerationModel: 'Feature Generation',
backlogPlanningModel: 'Backlog Planning',
projectAnalysisModel: 'Project Analysis',
suggestionsModel: 'AI Suggestions',
memoryExtractionModel: 'Memory Extraction',
};
const ALL_PHASES = Object.keys(PHASE_LABELS) as PhaseModelKey[];
// Claude model display names
const CLAUDE_MODEL_DISPLAY: Record<ClaudeModelAlias, string> = {
haiku: 'Claude Haiku',
sonnet: 'Claude Sonnet',
opus: 'Claude Opus',
};
export function ProjectBulkReplaceDialog({
open,
onOpenChange,
project,
}: ProjectBulkReplaceDialogProps) {
const { phaseModels, setProjectPhaseModelOverride, claudeCompatibleProviders } = useAppStore();
const [selectedProvider, setSelectedProvider] = useState<string>('anthropic');
// Get project-level overrides
const projectOverrides = project.phaseModelOverrides || {};
// Get enabled providers
const enabledProviders = useMemo(() => {
return (claudeCompatibleProviders || []).filter((p) => p.enabled !== false);
}, [claudeCompatibleProviders]);
// Build provider options for the dropdown
const providerOptions = useMemo(() => {
const options: Array<{ id: string; name: string; isNative: boolean }> = [
{ id: 'anthropic', name: 'Anthropic Direct', isNative: true },
];
enabledProviders.forEach((provider) => {
options.push({
id: provider.id,
name: provider.name,
isNative: false,
});
});
return options;
}, [enabledProviders]);
// Get the selected provider config (if custom)
const selectedProviderConfig = useMemo(() => {
if (selectedProvider === 'anthropic') return null;
return enabledProviders.find((p) => p.id === selectedProvider);
}, [selectedProvider, enabledProviders]);
// Get the Claude model alias from a PhaseModelEntry
const getClaudeModelAlias = (entry: PhaseModelEntry): ClaudeModelAlias => {
// Check if model string directly matches a Claude alias
if (entry.model === 'haiku' || entry.model === 'claude-haiku') return 'haiku';
if (entry.model === 'sonnet' || entry.model === 'claude-sonnet') return 'sonnet';
if (entry.model === 'opus' || entry.model === 'claude-opus') return 'opus';
// If it's a provider model, look up the mapping
if (entry.providerId) {
const provider = enabledProviders.find((p) => p.id === entry.providerId);
if (provider) {
const model = provider.models?.find((m) => m.id === entry.model);
if (model?.mapsToClaudeModel) {
return model.mapsToClaudeModel;
}
}
}
// Default to sonnet
return 'sonnet';
};
// Find the model from provider that maps to a specific Claude model
const findModelForClaudeAlias = (
provider: ClaudeCompatibleProvider | null,
claudeAlias: ClaudeModelAlias,
phase: PhaseModelKey
): PhaseModelEntry => {
if (!provider) {
// Anthropic Direct - reset to default phase model (includes correct thinking levels)
return DEFAULT_PHASE_MODELS[phase];
}
// Find model that maps to this Claude alias
const models = provider.models || [];
const match = models.find((m) => m.mapsToClaudeModel === claudeAlias);
if (match) {
return { providerId: provider.id, model: match.id };
}
// Fallback: use first model if no match
if (models.length > 0) {
return { providerId: provider.id, model: models[0].id };
}
// Ultimate fallback to native Claude model
return { model: claudeAlias };
};
// Generate preview of changes
const preview = useMemo(() => {
return ALL_PHASES.map((phase) => {
// Current effective value (project override or global)
const globalEntry = phaseModels[phase] ?? DEFAULT_PHASE_MODELS[phase];
const currentEntry = projectOverrides[phase] || globalEntry;
const claudeAlias = getClaudeModelAlias(currentEntry);
const newEntry = findModelForClaudeAlias(selectedProviderConfig, claudeAlias, phase);
// Get display names
const getCurrentDisplay = (): string => {
if (currentEntry.providerId) {
const provider = enabledProviders.find((p) => p.id === currentEntry.providerId);
if (provider) {
const model = provider.models?.find((m) => m.id === currentEntry.model);
return model?.displayName || currentEntry.model;
}
}
return CLAUDE_MODEL_DISPLAY[claudeAlias] || currentEntry.model;
};
const getNewDisplay = (): string => {
if (newEntry.providerId && selectedProviderConfig) {
const model = selectedProviderConfig.models?.find((m) => m.id === newEntry.model);
return model?.displayName || newEntry.model;
}
return CLAUDE_MODEL_DISPLAY[newEntry.model as ClaudeModelAlias] || newEntry.model;
};
const isChanged =
currentEntry.model !== newEntry.model ||
currentEntry.providerId !== newEntry.providerId ||
currentEntry.thinkingLevel !== newEntry.thinkingLevel;
return {
phase,
label: PHASE_LABELS[phase],
claudeAlias,
currentDisplay: getCurrentDisplay(),
newDisplay: getNewDisplay(),
newEntry,
isChanged,
};
});
}, [phaseModels, projectOverrides, selectedProviderConfig, enabledProviders]);
// Count how many will change
const changeCount = preview.filter((p) => p.isChanged).length;
// Apply the bulk replace as project overrides
const handleApply = () => {
preview.forEach(({ phase, newEntry, isChanged }) => {
if (isChanged) {
setProjectPhaseModelOverride(project.id, phase, newEntry);
}
});
onOpenChange(false);
};
// Check if provider has all 3 Claude model mappings
const providerModelCoverage = useMemo(() => {
if (selectedProvider === 'anthropic') {
return { hasHaiku: true, hasSonnet: true, hasOpus: true, complete: true };
}
if (!selectedProviderConfig) {
return { hasHaiku: false, hasSonnet: false, hasOpus: false, complete: false };
}
const models = selectedProviderConfig.models || [];
const hasHaiku = models.some((m) => m.mapsToClaudeModel === 'haiku');
const hasSonnet = models.some((m) => m.mapsToClaudeModel === 'sonnet');
const hasOpus = models.some((m) => m.mapsToClaudeModel === 'opus');
return { hasHaiku, hasSonnet, hasOpus, complete: hasHaiku && hasSonnet && hasOpus };
}, [selectedProvider, selectedProviderConfig]);
const providerHasModels =
selectedProvider === 'anthropic' ||
(selectedProviderConfig && selectedProviderConfig.models?.length > 0);
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
<DialogHeader>
<DialogTitle>Bulk Replace Models (Project Override)</DialogTitle>
<DialogDescription>
Set project-level overrides for all phases to use models from a specific provider. This
only affects this project.
</DialogDescription>
</DialogHeader>
<div className="space-y-6 py-4">
{/* Provider selector */}
<div className="space-y-2">
<label className="text-sm font-medium">Target Provider</label>
<Select value={selectedProvider} onValueChange={setSelectedProvider}>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select provider" />
</SelectTrigger>
<SelectContent>
{providerOptions.map((option) => (
<SelectItem key={option.id} value={option.id}>
<div className="flex items-center gap-2">
{option.isNative ? (
<Cloud className="w-4 h-4 text-brand-500" />
) : (
<Server className="w-4 h-4 text-muted-foreground" />
)}
<span>{option.name}</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* Warning if provider has no models */}
{!providerHasModels && (
<div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20 text-sm">
<div className="flex items-center gap-2 text-yellow-600 dark:text-yellow-400">
<AlertCircle className="w-4 h-4" />
<span>This provider has no models configured.</span>
</div>
</div>
)}
{/* Warning if provider doesn't have all 3 mappings */}
{providerHasModels && !providerModelCoverage.complete && (
<div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20 text-sm">
<div className="flex items-center gap-2 text-yellow-600 dark:text-yellow-400">
<AlertCircle className="w-4 h-4" />
<span>
This provider is missing mappings for:{' '}
{[
!providerModelCoverage.hasHaiku && 'Haiku',
!providerModelCoverage.hasSonnet && 'Sonnet',
!providerModelCoverage.hasOpus && 'Opus',
]
.filter(Boolean)
.join(', ')}
</span>
</div>
</div>
)}
{/* Preview of changes */}
{providerHasModels && (
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="text-sm font-medium">Preview Changes</label>
<span className="text-xs text-muted-foreground">
{changeCount} of {ALL_PHASES.length} will be overridden
</span>
</div>
<div className="border rounded-lg overflow-hidden max-h-[300px] overflow-y-auto">
<table className="w-full text-sm">
<thead className="bg-muted/50 sticky top-0">
<tr>
<th className="text-left p-2 font-medium text-muted-foreground">Phase</th>
<th className="text-left p-2 font-medium text-muted-foreground">Current</th>
<th className="p-2"></th>
<th className="text-left p-2 font-medium text-muted-foreground">
New Override
</th>
</tr>
</thead>
<tbody>
{preview.map(({ phase, label, currentDisplay, newDisplay, isChanged }) => (
<tr
key={phase}
className={cn(
'border-t border-border/50',
isChanged ? 'bg-brand-500/5' : 'opacity-50'
)}
>
<td className="p-2 font-medium">{label}</td>
<td className="p-2 text-muted-foreground">{currentDisplay}</td>
<td className="p-2 text-center">
{isChanged ? (
<ArrowRight className="w-4 h-4 text-brand-500 inline" />
) : (
<Check className="w-4 h-4 text-green-500 inline" />
)}
</td>
<td className="p-2">
<span className={cn(isChanged && 'text-brand-500 font-medium')}>
{newDisplay}
</span>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
)}
</div>
<DialogFooter>
<Button variant="outline" onClick={() => onOpenChange(false)}>
Cancel
</Button>
<Button onClick={handleApply} disabled={!providerHasModels || changeCount === 0}>
Apply Overrides ({changeCount})
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

12
apps/ui/src/components/views/project-settings-view/project-claude-section.tsx
View File

@@ -63,7 +63,7 @@ export function ProjectClaudeSection({ project }: ProjectClaudeSectionProps) {
<Bot className="w-12 h-12 mx-auto mb-3 opacity-50" />
<p className="text-sm">Claude not configured</p>
<p className="text-xs mt-1">
Enable Claude and configure API profiles in global settings to use per-project profiles.
Enable Claude and configure providers in global settings to use per-project overrides.
</p>
</div>
);
@@ -95,21 +95,19 @@ export function ProjectClaudeSection({ project }: ProjectClaudeSectionProps) {
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
<Bot className="w-5 h-5 text-brand-500" />
</div>
<h2 className="text-lg font-semibold text-foreground tracking-tight">
Claude API Profile
</h2>
<h2 className="text-lg font-semibold text-foreground tracking-tight">Claude Provider</h2>
</div>
<p className="text-sm text-muted-foreground/80 ml-12">
Override the Claude API profile for this project only.
Override the Claude provider for this project only.
</p>
</div>
<div className="p-6 space-y-4">
<div className="space-y-2">
<Label className="text-sm font-medium">Active Profile for This Project</Label>
<Label className="text-sm font-medium">Active Provider for This Project</Label>
<Select value={selectValue} onValueChange={handleChange}>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select profile" />
<SelectValue placeholder="Select provider" />
</SelectTrigger>
<SelectContent>
<SelectItem value="global">

365
apps/ui/src/components/views/project-settings-view/project-models-section.tsx Normal file
View File

@@ -0,0 +1,365 @@
import { useState } from 'react';
import { useAppStore } from '@/store/app-store';
import { Button } from '@/components/ui/button';
import { Workflow, RotateCcw, Globe, Check, Replace } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { Project } from '@/lib/electron';
import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
import { ProjectBulkReplaceDialog } from './project-bulk-replace-dialog';
import type { PhaseModelKey, PhaseModelEntry } from '@automaker/types';
import { DEFAULT_PHASE_MODELS } from '@automaker/types';
interface ProjectModelsSectionProps {
project: Project;
}
interface PhaseConfig {
key: PhaseModelKey;
label: string;
description: string;
}
const QUICK_TASKS: PhaseConfig[] = [
{
key: 'enhancementModel',
label: 'Feature Enhancement',
description: 'Improves feature names and descriptions',
},
{
key: 'fileDescriptionModel',
label: 'File Descriptions',
description: 'Generates descriptions for context files',
},
{
key: 'imageDescriptionModel',
label: 'Image Descriptions',
description: 'Analyzes and describes context images',
},
{
key: 'commitMessageModel',
label: 'Commit Messages',
description: 'Generates git commit messages from diffs',
},
];
const VALIDATION_TASKS: PhaseConfig[] = [
{
key: 'validationModel',
label: 'GitHub Issue Validation',
description: 'Validates and improves GitHub issues',
},
];
const GENERATION_TASKS: PhaseConfig[] = [
{
key: 'specGenerationModel',
label: 'App Specification',
description: 'Generates full application specifications',
},
{
key: 'featureGenerationModel',
label: 'Feature Generation',
description: 'Creates features from specifications',
},
{
key: 'backlogPlanningModel',
label: 'Backlog Planning',
description: 'Reorganizes and prioritizes backlog',
},
{
key: 'projectAnalysisModel',
label: 'Project Analysis',
description: 'Analyzes project structure for suggestions',
},
{
key: 'suggestionsModel',
label: 'AI Suggestions',
description: 'Model for feature, refactoring, security, and performance suggestions',
},
];
const MEMORY_TASKS: PhaseConfig[] = [
{
key: 'memoryExtractionModel',
label: 'Memory Extraction',
description: 'Extracts learnings from completed agent sessions',
},
];
const ALL_PHASES = [...QUICK_TASKS, ...VALIDATION_TASKS, ...GENERATION_TASKS, ...MEMORY_TASKS];
function PhaseOverrideItem({
phase,
project,
globalValue,
projectOverride,
}: {
phase: PhaseConfig;
project: Project;
globalValue: PhaseModelEntry;
projectOverride?: PhaseModelEntry;
}) {
const { setProjectPhaseModelOverride, claudeCompatibleProviders } = useAppStore();
const hasOverride = !!projectOverride;
const effectiveValue = projectOverride || globalValue;
// Get display name for a model
const getModelDisplayName = (entry: PhaseModelEntry): string => {
if (entry.providerId) {
const provider = (claudeCompatibleProviders || []).find((p) => p.id === entry.providerId);
if (provider) {
const model = provider.models?.find((m) => m.id === entry.model);
if (model) {
return `${model.displayName} (${provider.name})`;
}
}
}
// Default to model ID for built-in models (both short aliases and canonical IDs)
const modelMap: Record<string, string> = {
haiku: 'Claude Haiku',
sonnet: 'Claude Sonnet',
opus: 'Claude Opus',
'claude-haiku': 'Claude Haiku',
'claude-sonnet': 'Claude Sonnet',
'claude-opus': 'Claude Opus',
};
return modelMap[entry.model] || entry.model;
};
const handleClearOverride = () => {
setProjectPhaseModelOverride(project.id, phase.key, null);
};
const handleSetOverride = (entry: PhaseModelEntry) => {
setProjectPhaseModelOverride(project.id, phase.key, entry);
};
return (
<div
className={cn(
'flex items-center justify-between p-4 rounded-xl',
'bg-accent/20 border',
hasOverride ? 'border-brand-500/30 bg-brand-500/5' : 'border-border/30',
'hover:bg-accent/30 transition-colors'
)}
>
<div className="flex-1 pr-4">
<div className="flex items-center gap-2">
<h4 className="text-sm font-medium text-foreground">{phase.label}</h4>
{hasOverride ? (
<span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-brand-500/20 text-brand-500">
Override
</span>
) : (
<span className="flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground">
<Globe className="w-3 h-3" />
Global
</span>
)}
</div>
<p className="text-xs text-muted-foreground">{phase.description}</p>
{hasOverride && (
<p className="text-xs text-brand-500 mt-1">
Using: {getModelDisplayName(effectiveValue)}
</p>
)}
{!hasOverride && (
<p className="text-xs text-muted-foreground/70 mt-1">
Using global: {getModelDisplayName(globalValue)}
</p>
)}
</div>
<div className="flex items-center gap-2">
{hasOverride && (
<Button
variant="ghost"
size="sm"
onClick={handleClearOverride}
className="h-8 px-2 text-xs text-muted-foreground hover:text-foreground"
>
<RotateCcw className="w-3.5 h-3.5 mr-1" />
Reset
</Button>
)}
<PhaseModelSelector
compact
value={effectiveValue}
onChange={handleSetOverride}
align="end"
/>
</div>
</div>
);
}
function PhaseGroup({
title,
subtitle,
phases,
project,
}: {
title: string;
subtitle: string;
phases: PhaseConfig[];
project: Project;
}) {
const { phaseModels } = useAppStore();
const projectOverrides = project.phaseModelOverrides || {};
return (
<div className="space-y-4">
<div>
<h3 className="text-sm font-medium text-foreground">{title}</h3>
<p className="text-xs text-muted-foreground">{subtitle}</p>
</div>
<div className="space-y-3">
{phases.map((phase) => (
<PhaseOverrideItem
key={phase.key}
phase={phase}
project={project}
globalValue={phaseModels[phase.key] ?? DEFAULT_PHASE_MODELS[phase.key]}
projectOverride={projectOverrides[phase.key]}
/>
))}
</div>
</div>
);
}
export function ProjectModelsSection({ project }: ProjectModelsSectionProps) {
const { clearAllProjectPhaseModelOverrides, disabledProviders, claudeCompatibleProviders } =
useAppStore();
const [showBulkReplace, setShowBulkReplace] = useState(false);
// Count how many overrides are set
const overrideCount = Object.keys(project.phaseModelOverrides || {}).length;
// Check if Claude is available
const isClaudeDisabled = disabledProviders.includes('claude');
// Check if there are any enabled ClaudeCompatibleProviders
const hasEnabledProviders =
claudeCompatibleProviders && claudeCompatibleProviders.some((p) => p.enabled !== false);
if (isClaudeDisabled) {
return (
<div className="text-center py-12 text-muted-foreground">
<Workflow className="w-12 h-12 mx-auto mb-3 opacity-50" />
<p className="text-sm">Claude not configured</p>
<p className="text-xs mt-1">
Enable Claude in global settings to configure per-project model overrides.
</p>
</div>
);
}
const handleClearAll = () => {
clearAllProjectPhaseModelOverrides(project.id);
};
return (
<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'
)}
>
{/* Header */}
<div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
<Workflow className="w-5 h-5 text-brand-500" />
</div>
<div>
<h2 className="text-lg font-semibold text-foreground tracking-tight">
Model Overrides
</h2>
<p className="text-sm text-muted-foreground/80">
Override AI models for this project only
</p>
</div>
</div>
<div className="flex items-center gap-2">
{hasEnabledProviders && (
<Button
variant="outline"
size="sm"
onClick={() => setShowBulkReplace(true)}
className="gap-2"
>
<Replace className="w-3.5 h-3.5" />
Bulk Replace
</Button>
)}
{overrideCount > 0 && (
<Button variant="outline" size="sm" onClick={handleClearAll} className="gap-2">
<RotateCcw className="w-3.5 h-3.5" />
Reset All ({overrideCount})
</Button>
)}
</div>
</div>
</div>
{/* Bulk Replace Dialog */}
<ProjectBulkReplaceDialog
open={showBulkReplace}
onOpenChange={setShowBulkReplace}
project={project}
/>
{/* Info Banner */}
<div className="px-6 pt-6">
<div className="p-3 rounded-lg bg-brand-500/5 border border-brand-500/20 text-sm text-muted-foreground">
<div className="flex items-center gap-2 mb-1">
<Check className="w-4 h-4 text-brand-500" />
<span className="font-medium text-foreground">Per-Phase Overrides</span>
</div>
Override specific phases to use different models for this project. Phases without
overrides use the global settings.
</div>
</div>
{/* Content */}
<div className="p-6 space-y-8">
{/* Quick Tasks */}
<PhaseGroup
title="Quick Tasks"
subtitle="Fast models recommended for speed and cost savings"
phases={QUICK_TASKS}
project={project}
/>
{/* Validation Tasks */}
<PhaseGroup
title="Validation Tasks"
subtitle="Smart models recommended for accuracy"
phases={VALIDATION_TASKS}
project={project}
/>
{/* Generation Tasks */}
<PhaseGroup
title="Generation Tasks"
subtitle="Powerful models recommended for quality output"
phases={GENERATION_TASKS}
project={project}
/>
{/* Memory Tasks */}
<PhaseGroup
title="Memory Tasks"
subtitle="Fast models recommended for learning extraction"
phases={MEMORY_TASKS}
project={project}
/>
</div>
</div>
);
}

4
apps/ui/src/components/views/project-settings-view/project-settings-view.tsx
View File

@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
import { ProjectIdentitySection } from './project-identity-section';
import { ProjectThemeSection } from './project-theme-section';
import { WorktreePreferencesSection } from './worktree-preferences-section';
import { ProjectClaudeSection } from './project-claude-section';
import { ProjectModelsSection } from './project-models-section';
import { DangerZoneSection } from '../settings-view/danger-zone/danger-zone-section';
import { DeleteProjectDialog } from '../settings-view/components/delete-project-dialog';
import { ProjectSettingsNavigation } from './components/project-settings-navigation';
@@ -86,7 +86,7 @@ export function ProjectSettingsView() {
case 'worktrees':
return <WorktreePreferencesSection project={currentProject} />;
case 'claude':
return <ProjectClaudeSection project={currentProject} />;
return <ProjectModelsSection project={currentProject} />;
case 'danger':
return (
<DangerZoneSection