mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-01-30 14:22:04 +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:
Auto
@@ -16,7 +16,8 @@ import { DebugLogViewer } from './components/DebugLogViewer'
|
||||
import { AgentThought } from './components/AgentThought'
|
||||
import { AssistantFAB } from './components/AssistantFAB'
|
||||
import { AssistantPanel } from './components/AssistantPanel'
|
||||
import { Plus, Loader2 } from 'lucide-react'
|
||||
import { SettingsModal } from './components/SettingsModal'
|
||||
import { Plus, Loader2, Settings } from 'lucide-react'
|
||||
import type { Feature } from './lib/types'
|
||||
|
||||
function App() {
|
||||
@@ -34,10 +35,11 @@ function App() {
|
||||
const [debugOpen, setDebugOpen] = useState(false)
|
||||
const [debugPanelHeight, setDebugPanelHeight] = useState(288) // Default height
|
||||
const [assistantOpen, setAssistantOpen] = useState(false)
|
||||
const [showSettings, setShowSettings] = useState(false)
|
||||
|
||||
const { data: projects, isLoading: projectsLoading } = useProjects()
|
||||
const { data: features } = useFeatures(selectedProject)
|
||||
const { data: agentStatusData } = useAgentStatus(selectedProject)
|
||||
useAgentStatus(selectedProject) // Keep polling for status updates
|
||||
const wsState = useProjectWebSocket(selectedProject)
|
||||
|
||||
// Play sounds when features move between columns
|
||||
@@ -93,9 +95,17 @@ function App() {
|
||||
setAssistantOpen(prev => !prev)
|
||||
}
|
||||
|
||||
// , : Open settings
|
||||
if (e.key === ',') {
|
||||
e.preventDefault()
|
||||
setShowSettings(true)
|
||||
}
|
||||
|
||||
// Escape : Close modals
|
||||
if (e.key === 'Escape') {
|
||||
if (assistantOpen) {
|
||||
if (showSettings) {
|
||||
setShowSettings(false)
|
||||
} else if (assistantOpen) {
|
||||
setAssistantOpen(false)
|
||||
} else if (showAddFeature) {
|
||||
setShowAddFeature(false)
|
||||
@@ -109,7 +119,7 @@ function App() {
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}, [selectedProject, showAddFeature, selectedFeature, debugOpen, assistantOpen])
|
||||
}, [selectedProject, showAddFeature, selectedFeature, debugOpen, assistantOpen, showSettings])
|
||||
|
||||
// Combine WebSocket progress with feature data
|
||||
const progress = wsState.progress.total > 0 ? wsState.progress : {
|
||||
@@ -163,8 +173,16 @@ function App() {
|
||||
<AgentControl
|
||||
projectName={selectedProject}
|
||||
status={wsState.agentStatus}
|
||||
yoloMode={agentStatusData?.yolo_mode ?? false}
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={() => setShowSettings(true)}
|
||||
className="neo-btn text-sm py-2 px-3"
|
||||
title="Settings (,)"
|
||||
aria-label="Open Settings"
|
||||
>
|
||||
<Settings size={18} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@@ -270,6 +288,11 @@ function App() {
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Settings Modal */}
|
||||
{showSettings && (
|
||||
<SettingsModal onClose={() => setShowSettings(false)} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,170 +1,66 @@
|
||||
import { useState } from 'react'
|
||||
import { Play, Pause, Square, Loader2, Zap } from 'lucide-react'
|
||||
import { Play, Square, Loader2, Flame } from 'lucide-react'
|
||||
import {
|
||||
useStartAgent,
|
||||
useStopAgent,
|
||||
usePauseAgent,
|
||||
useResumeAgent,
|
||||
useSettings,
|
||||
} from '../hooks/useProjects'
|
||||
import type { AgentStatus } from '../lib/types'
|
||||
|
||||
interface AgentControlProps {
|
||||
projectName: string
|
||||
status: AgentStatus
|
||||
yoloMode?: boolean // From server status - whether currently running in YOLO mode
|
||||
}
|
||||
|
||||
export function AgentControl({ projectName, status, yoloMode = false }: AgentControlProps) {
|
||||
const [yoloEnabled, setYoloEnabled] = useState(false)
|
||||
export function AgentControl({ projectName, status }: AgentControlProps) {
|
||||
const { data: settings } = useSettings()
|
||||
const yoloMode = settings?.yolo_mode ?? false
|
||||
|
||||
const startAgent = useStartAgent(projectName)
|
||||
const stopAgent = useStopAgent(projectName)
|
||||
const pauseAgent = usePauseAgent(projectName)
|
||||
const resumeAgent = useResumeAgent(projectName)
|
||||
|
||||
const isLoading =
|
||||
startAgent.isPending ||
|
||||
stopAgent.isPending ||
|
||||
pauseAgent.isPending ||
|
||||
resumeAgent.isPending
|
||||
const isLoading = startAgent.isPending || stopAgent.isPending
|
||||
|
||||
const handleStart = () => startAgent.mutate(yoloEnabled)
|
||||
const handleStart = () => startAgent.mutate(yoloMode)
|
||||
const handleStop = () => stopAgent.mutate()
|
||||
const handlePause = () => pauseAgent.mutate()
|
||||
const handleResume = () => resumeAgent.mutate()
|
||||
|
||||
// Simplified: either show Start (when stopped/crashed) or Stop (when running/paused)
|
||||
const isStopped = status === 'stopped' || status === 'crashed'
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Status Indicator */}
|
||||
<StatusIndicator status={status} />
|
||||
|
||||
{/* YOLO Mode Indicator - shown when running in YOLO mode */}
|
||||
{(status === 'running' || status === 'paused') && yoloMode && (
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-[var(--color-neo-pending)] border-3 border-[var(--color-neo-border)]">
|
||||
<Zap size={14} className="text-yellow-900" />
|
||||
<span className="font-display font-bold text-xs uppercase text-yellow-900">
|
||||
YOLO
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{isStopped ? (
|
||||
<button
|
||||
onClick={handleStart}
|
||||
disabled={isLoading}
|
||||
className={`neo-btn text-sm py-2 px-3 ${
|
||||
yoloMode ? 'neo-btn-yolo' : 'neo-btn-success'
|
||||
}`}
|
||||
title={yoloMode ? 'Start Agent (YOLO Mode)' : 'Start Agent'}
|
||||
aria-label={yoloMode ? 'Start Agent in YOLO Mode' : 'Start Agent'}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : yoloMode ? (
|
||||
<Flame size={18} />
|
||||
) : (
|
||||
<Play size={18} />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleStop}
|
||||
disabled={isLoading}
|
||||
className="neo-btn neo-btn-danger text-sm py-2 px-3"
|
||||
title="Stop Agent"
|
||||
aria-label="Stop Agent"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<Square size={18} />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Control Buttons */}
|
||||
<div className="flex gap-1">
|
||||
{status === 'stopped' || status === 'crashed' ? (
|
||||
<>
|
||||
{/* YOLO Toggle - only shown when stopped */}
|
||||
<button
|
||||
onClick={() => setYoloEnabled(!yoloEnabled)}
|
||||
className={`neo-btn text-sm py-2 px-3 ${
|
||||
yoloEnabled ? 'neo-btn-warning' : 'neo-btn-secondary'
|
||||
}`}
|
||||
title="YOLO Mode: Skip testing for rapid prototyping"
|
||||
>
|
||||
<Zap size={18} className={yoloEnabled ? 'text-yellow-900' : ''} />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleStart}
|
||||
disabled={isLoading}
|
||||
className="neo-btn neo-btn-success text-sm py-2 px-3"
|
||||
title={yoloEnabled ? "Start Agent (YOLO Mode)" : "Start Agent"}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<Play size={18} />
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
) : status === 'running' ? (
|
||||
<>
|
||||
<button
|
||||
onClick={handlePause}
|
||||
disabled={isLoading}
|
||||
className="neo-btn neo-btn-warning text-sm py-2 px-3"
|
||||
title="Pause Agent"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<Pause size={18} />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleStop}
|
||||
disabled={isLoading}
|
||||
className="neo-btn neo-btn-danger text-sm py-2 px-3"
|
||||
title="Stop Agent"
|
||||
>
|
||||
<Square size={18} />
|
||||
</button>
|
||||
</>
|
||||
) : status === 'paused' ? (
|
||||
<>
|
||||
<button
|
||||
onClick={handleResume}
|
||||
disabled={isLoading}
|
||||
className="neo-btn neo-btn-success text-sm py-2 px-3"
|
||||
title="Resume Agent"
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 size={18} className="animate-spin" />
|
||||
) : (
|
||||
<Play size={18} />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleStop}
|
||||
disabled={isLoading}
|
||||
className="neo-btn neo-btn-danger text-sm py-2 px-3"
|
||||
title="Stop Agent"
|
||||
>
|
||||
<Square size={18} />
|
||||
</button>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StatusIndicator({ status }: { status: AgentStatus }) {
|
||||
const statusConfig = {
|
||||
stopped: {
|
||||
color: 'var(--color-neo-text-secondary)',
|
||||
label: 'Stopped',
|
||||
pulse: false,
|
||||
},
|
||||
running: {
|
||||
color: 'var(--color-neo-done)',
|
||||
label: 'Running',
|
||||
pulse: true,
|
||||
},
|
||||
paused: {
|
||||
color: 'var(--color-neo-pending)',
|
||||
label: 'Paused',
|
||||
pulse: false,
|
||||
},
|
||||
crashed: {
|
||||
color: 'var(--color-neo-danger)',
|
||||
label: 'Crashed',
|
||||
pulse: true,
|
||||
},
|
||||
}
|
||||
|
||||
const config = statusConfig[status]
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 px-3 py-2 bg-white border-3 border-[var(--color-neo-border)]">
|
||||
<span
|
||||
className={`w-3 h-3 rounded-full ${config.pulse ? 'animate-pulse' : ''}`}
|
||||
style={{ backgroundColor: config.color }}
|
||||
/>
|
||||
<span
|
||||
className="font-display font-bold text-sm uppercase"
|
||||
style={{ color: config.color }}
|
||||
>
|
||||
{config.label}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
213
ui/src/components/SettingsModal.tsx
Normal file
213
ui/src/components/SettingsModal.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { X, Loader2, AlertCircle } from 'lucide-react'
|
||||
import { useSettings, useUpdateSettings, useAvailableModels } from '../hooks/useProjects'
|
||||
|
||||
interface SettingsModalProps {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function SettingsModal({ onClose }: SettingsModalProps) {
|
||||
const { data: settings, isLoading, isError, refetch } = useSettings()
|
||||
const { data: modelsData } = useAvailableModels()
|
||||
const updateSettings = useUpdateSettings()
|
||||
const modalRef = useRef<HTMLDivElement>(null)
|
||||
const closeButtonRef = useRef<HTMLButtonElement>(null)
|
||||
|
||||
// Focus trap - keep focus within modal
|
||||
useEffect(() => {
|
||||
const modal = modalRef.current
|
||||
if (!modal) return
|
||||
|
||||
// Focus the close button when modal opens
|
||||
closeButtonRef.current?.focus()
|
||||
|
||||
const focusableElements = modal.querySelectorAll<HTMLElement>(
|
||||
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
|
||||
)
|
||||
const firstElement = focusableElements[0]
|
||||
const lastElement = focusableElements[focusableElements.length - 1]
|
||||
|
||||
const handleTabKey = (e: KeyboardEvent) => {
|
||||
if (e.key !== 'Tab') return
|
||||
|
||||
if (e.shiftKey) {
|
||||
if (document.activeElement === firstElement) {
|
||||
e.preventDefault()
|
||||
lastElement?.focus()
|
||||
}
|
||||
} else {
|
||||
if (document.activeElement === lastElement) {
|
||||
e.preventDefault()
|
||||
firstElement?.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', handleTabKey)
|
||||
document.addEventListener('keydown', handleEscape)
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleTabKey)
|
||||
document.removeEventListener('keydown', handleEscape)
|
||||
}
|
||||
}, [onClose])
|
||||
|
||||
const handleYoloToggle = () => {
|
||||
if (settings && !updateSettings.isPending) {
|
||||
updateSettings.mutate({ yolo_mode: !settings.yolo_mode })
|
||||
}
|
||||
}
|
||||
|
||||
const handleModelChange = (modelId: string) => {
|
||||
if (!updateSettings.isPending) {
|
||||
updateSettings.mutate({ model: modelId })
|
||||
}
|
||||
}
|
||||
|
||||
const models = modelsData?.models ?? []
|
||||
const isSaving = updateSettings.isPending
|
||||
|
||||
return (
|
||||
<div
|
||||
className="neo-modal-backdrop"
|
||||
onClick={onClose}
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
ref={modalRef}
|
||||
className="neo-modal w-full max-w-sm p-6"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-labelledby="settings-title"
|
||||
aria-modal="true"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 id="settings-title" className="font-display text-xl font-bold">
|
||||
Settings
|
||||
{isSaving && (
|
||||
<Loader2 className="inline-block ml-2 animate-spin" size={16} />
|
||||
)}
|
||||
</h2>
|
||||
<button
|
||||
ref={closeButtonRef}
|
||||
onClick={onClose}
|
||||
className="neo-btn neo-btn-ghost p-2"
|
||||
aria-label="Close settings"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Loading State */}
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="animate-spin" size={24} />
|
||||
<span className="ml-2">Loading settings...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error State */}
|
||||
{isError && (
|
||||
<div className="p-4 bg-[var(--color-neo-danger)] text-white border-3 border-[var(--color-neo-border)] mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertCircle size={18} />
|
||||
<span>Failed to load settings</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
className="mt-2 underline text-sm"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Settings Content */}
|
||||
{settings && !isLoading && (
|
||||
<div className="space-y-6">
|
||||
{/* YOLO Mode Toggle */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<label
|
||||
id="yolo-label"
|
||||
className="font-display font-bold text-base"
|
||||
>
|
||||
YOLO Mode
|
||||
</label>
|
||||
<p className="text-sm text-[var(--color-neo-text-secondary)] mt-1">
|
||||
Skip testing for rapid prototyping
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleYoloToggle}
|
||||
disabled={isSaving}
|
||||
className={`relative w-14 h-8 rounded-none border-3 border-[var(--color-neo-border)] transition-colors ${
|
||||
settings.yolo_mode
|
||||
? 'bg-[var(--color-neo-pending)]'
|
||||
: 'bg-white'
|
||||
} ${isSaving ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
role="switch"
|
||||
aria-checked={settings.yolo_mode}
|
||||
aria-labelledby="yolo-label"
|
||||
>
|
||||
<span
|
||||
className={`absolute top-1 w-5 h-5 bg-[var(--color-neo-border)] transition-transform ${
|
||||
settings.yolo_mode ? 'left-7' : 'left-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Model Selection - Radio Group */}
|
||||
<div>
|
||||
<label
|
||||
id="model-label"
|
||||
className="font-display font-bold text-base block mb-2"
|
||||
>
|
||||
Model
|
||||
</label>
|
||||
<div
|
||||
className="flex border-3 border-[var(--color-neo-border)]"
|
||||
role="radiogroup"
|
||||
aria-labelledby="model-label"
|
||||
>
|
||||
{models.map((model) => (
|
||||
<button
|
||||
key={model.id}
|
||||
onClick={() => handleModelChange(model.id)}
|
||||
disabled={isSaving}
|
||||
role="radio"
|
||||
aria-checked={settings.model === model.id}
|
||||
className={`flex-1 py-3 px-4 font-display font-bold text-sm transition-colors ${
|
||||
settings.model === model.id
|
||||
? 'bg-[var(--color-neo-accent)] text-white'
|
||||
: 'bg-white text-[var(--color-neo-text)] hover:bg-gray-100'
|
||||
} ${isSaving ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
{model.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Update Error */}
|
||||
{updateSettings.isError && (
|
||||
<div className="p-3 bg-red-50 border-3 border-red-200 text-red-700 text-sm">
|
||||
Failed to save settings. Please try again.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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'] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
@@ -16,6 +16,9 @@ import type {
|
||||
PathValidationResponse,
|
||||
AssistantConversation,
|
||||
AssistantConversationDetail,
|
||||
Settings,
|
||||
SettingsUpdate,
|
||||
ModelsResponse,
|
||||
} from './types'
|
||||
|
||||
const API_BASE = '/api'
|
||||
@@ -267,3 +270,22 @@ export async function deleteAssistantConversation(
|
||||
{ method: 'DELETE' }
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Settings API
|
||||
// ============================================================================
|
||||
|
||||
export async function getAvailableModels(): Promise<ModelsResponse> {
|
||||
return fetchJSON('/settings/models')
|
||||
}
|
||||
|
||||
export async function getSettings(): Promise<Settings> {
|
||||
return fetchJSON('/settings')
|
||||
}
|
||||
|
||||
export async function updateSettings(settings: SettingsUpdate): Promise<Settings> {
|
||||
return fetchJSON('/settings', {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(settings),
|
||||
})
|
||||
}
|
||||
|
||||
@@ -90,6 +90,7 @@ export interface AgentStatusResponse {
|
||||
pid: number | null
|
||||
started_at: string | null
|
||||
yolo_mode: boolean
|
||||
model: string | null // Model being used by running agent
|
||||
}
|
||||
|
||||
export interface AgentActionResponse {
|
||||
@@ -295,3 +296,27 @@ export type AssistantChatServerMessage =
|
||||
| AssistantChatErrorMessage
|
||||
| AssistantChatConversationCreatedMessage
|
||||
| AssistantChatPongMessage
|
||||
|
||||
// ============================================================================
|
||||
// Settings Types
|
||||
// ============================================================================
|
||||
|
||||
export interface ModelInfo {
|
||||
id: string
|
||||
name: string
|
||||
}
|
||||
|
||||
export interface ModelsResponse {
|
||||
models: ModelInfo[]
|
||||
default: string
|
||||
}
|
||||
|
||||
export interface Settings {
|
||||
yolo_mode: boolean
|
||||
model: string
|
||||
}
|
||||
|
||||
export interface SettingsUpdate {
|
||||
yolo_mode?: boolean
|
||||
model?: string
|
||||
}
|
||||
|
||||
@@ -163,6 +163,23 @@
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* YOLO Mode Button - Fiery gradient for when YOLO mode is enabled */
|
||||
/* Uses darker orange colors for better contrast with white text (WCAG AA) */
|
||||
.neo-btn-yolo {
|
||||
background: linear-gradient(135deg, #d64500, #e65c00);
|
||||
color: #ffffff;
|
||||
box-shadow:
|
||||
4px 4px 0 var(--color-neo-border),
|
||||
0 0 12px rgba(255, 84, 0, 0.4);
|
||||
}
|
||||
|
||||
.neo-btn-yolo:hover {
|
||||
background: linear-gradient(135deg, #ff5400, #ff6a00);
|
||||
box-shadow:
|
||||
6px 6px 0 var(--color-neo-border),
|
||||
0 0 16px rgba(255, 84, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Inputs */
|
||||
.neo-input {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user