mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-01-30 06:12:06 +00:00
feat: Add global settings modal and simplify agent controls
Adds a settings system for global configuration with YOLO mode toggle and
model selection. Simplifies the agent control UI by removing redundant
status indicator and pause functionality.
## Settings System
- New SettingsModal with YOLO mode toggle and model selection
- Settings persisted in SQLite (registry.db) - shared across all projects
- Models fetched from API endpoint (/api/settings/models)
- Single source of truth for models in registry.py - easy to add new models
- Optimistic UI updates with rollback on error
## Agent Control Simplification
- Removed StatusIndicator ("STOPPED"/"RUNNING" label) - redundant
- Removed Pause/Resume buttons - just Start/Stop toggle now
- Start button shows flame icon with fiery gradient when YOLO mode enabled
## Code Review Fixes
- Added focus trap to SettingsModal for accessibility
- Fixed YOLO button color contrast (WCAG AA compliance)
- Added model validation to AgentStartRequest schema
- Added model to AgentStatus response
- Added aria-labels to all icon-only buttons
- Added role="radiogroup" to model selection
- Added loading indicator during settings save
- Added SQLite timeout (30s) and retry logic with exponential backoff
- Added thread-safe database engine initialization
- Added orphaned lock file cleanup on server startup
## Files Changed
- registry.py: Model config, Settings CRUD, SQLite improvements
- server/routers/settings.py: New settings API
- server/schemas.py: Settings schemas with validation
- server/services/process_manager.py: Model param, orphan cleanup
- ui/src/components/SettingsModal.tsx: New modal component
- ui/src/components/AgentControl.tsx: Simplified to Start/Stop only
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import * as api from '../lib/api'
|
||||
import type { FeatureCreate } from '../lib/types'
|
||||
import type { FeatureCreate, ModelsResponse, Settings, SettingsUpdate } from '../lib/types'
|
||||
|
||||
// ============================================================================
|
||||
// Projects
|
||||
@@ -200,3 +200,74 @@ export function useValidatePath() {
|
||||
mutationFn: (path: string) => api.validatePath(path),
|
||||
})
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Settings
|
||||
// ============================================================================
|
||||
|
||||
// Default models response for placeholder (until API responds)
|
||||
const DEFAULT_MODELS: ModelsResponse = {
|
||||
models: [
|
||||
{ id: 'claude-opus-4-5-20251101', name: 'Claude Opus 4.5' },
|
||||
{ id: 'claude-sonnet-4-5-20250929', name: 'Claude Sonnet 4.5' },
|
||||
],
|
||||
default: 'claude-opus-4-5-20251101',
|
||||
}
|
||||
|
||||
const DEFAULT_SETTINGS: Settings = {
|
||||
yolo_mode: false,
|
||||
model: 'claude-opus-4-5-20251101',
|
||||
}
|
||||
|
||||
export function useAvailableModels() {
|
||||
return useQuery({
|
||||
queryKey: ['available-models'],
|
||||
queryFn: api.getAvailableModels,
|
||||
staleTime: 300000, // Cache for 5 minutes - models don't change often
|
||||
retry: 1,
|
||||
placeholderData: DEFAULT_MODELS,
|
||||
})
|
||||
}
|
||||
|
||||
export function useSettings() {
|
||||
return useQuery({
|
||||
queryKey: ['settings'],
|
||||
queryFn: api.getSettings,
|
||||
staleTime: 60000, // Cache for 1 minute
|
||||
retry: 1,
|
||||
placeholderData: DEFAULT_SETTINGS,
|
||||
})
|
||||
}
|
||||
|
||||
export function useUpdateSettings() {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (settings: SettingsUpdate) => api.updateSettings(settings),
|
||||
onMutate: async (newSettings) => {
|
||||
// Cancel outgoing refetches
|
||||
await queryClient.cancelQueries({ queryKey: ['settings'] })
|
||||
|
||||
// Snapshot previous value
|
||||
const previous = queryClient.getQueryData<Settings>(['settings'])
|
||||
|
||||
// Optimistically update
|
||||
queryClient.setQueryData<Settings>(['settings'], (old) => ({
|
||||
...DEFAULT_SETTINGS,
|
||||
...old,
|
||||
...newSettings,
|
||||
}))
|
||||
|
||||
return { previous }
|
||||
},
|
||||
onError: (_err, _newSettings, context) => {
|
||||
// Rollback on error
|
||||
if (context?.previous) {
|
||||
queryClient.setQueryData(['settings'], context.previous)
|
||||
}
|
||||
},
|
||||
onSettled: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['settings'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user