danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): Move Auto-Fix Model selector next to Auto-Fix toggle

Browse source 
UX improvement: The Auto-Fix Model dropdown was too far from the
Patrol Auto-Fix toggle, making it hard to find.

Now the flow is:
1. Scroll to 'AI Patrol Behavior' section
2. Check the acknowledgement checkbox
3. Enable 'Patrol Auto-Fix' toggle
4. Model selector appears RIGHT BELOW the toggle

The model dropdown only appears when auto-fix is enabled (since
it's irrelevant otherwise).
This commit is contained in:
rcourtman 2025-12-12 15:17:44 +00:00
parent 878eb937f3
commit 2381631df0
1 changed files with 40 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
frontend-modern/src/components/Settings/AISettings.tsx
View file

@ -614,48 +614,6 @@ export const AISettings: Component = () => {
</p>
</div>
{/* Auto-Fix Model Override */}
<Show when={form.patrolAutoFix}>
<div class={formField}>
<label class={labelClass()}>Auto-Fix Model (Remediation)</label>
<Show when={availableModels().length > 0} fallback={
<input
type="text"
value={form.autoFixModel}
onInput={(e) => setForm('autoFixModel', e.currentTarget.value)}
placeholder="Leave empty to use patrol model"
class={controlClass()}
disabled={saving()}
/>
}>
<select
value={form.autoFixModel}
onChange={(e) => setForm('autoFixModel', e.currentTarget.value)}
class={controlClass()}
disabled={saving()}
>
<option value="">Use patrol model ({form.patrolModel || form.model || 'not set'})</option>
<For each={Array.from(groupModelsByProvider(availableModels()).entries())}>
{([provider, models]) => (
<optgroup label={PROVIDER_DISPLAY_NAMES[provider] || provider}>
<For each={models}>
{(model) => (
<option value={model.id}>
{model.name || model.id.split(':').pop()}
</option>
)}
</For>
</optgroup>
)}
</For>
</select>
</Show>
<p class={formHelpText}>
Model for automatic remediation actions. Consider a more capable model since it takes action.
</p>
</div>
</Show>
{/* AI Provider Configuration - Configure API keys for all providers */}
<div class={`${formField} p-4 rounded-lg border bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-purple-900/20 dark:to-indigo-900/20 border-purple-200 dark:border-purple-800`}>
<div class="mb-3">
@ -1120,6 +1078,46 @@ export const AISettings: Component = () => {
</div>
</div>
</div>
{/* Auto-Fix Model Selector - shown when auto-fix is enabled */}
<div class="mt-3">
<label class={labelClass()}>Auto-Fix Model (Remediation)</label>
<Show when={availableModels().length > 0} fallback={
<input
type="text"
value={form.autoFixModel}
onInput={(e) => setForm('autoFixModel', e.currentTarget.value)}
placeholder="Leave empty to use patrol model"
class={controlClass()}
disabled={saving()}
/>
}>
<select
value={form.autoFixModel}
onChange={(e) => setForm('autoFixModel', e.currentTarget.value)}
class={controlClass()}
disabled={saving()}
>
<option value="">Use patrol model ({form.patrolModel || form.model || 'not set'})</option>
<For each={Array.from(groupModelsByProvider(availableModels()).entries())}>
{([provider, models]) => (
<optgroup label={PROVIDER_DISPLAY_NAMES[provider] || provider}>
<For each={models}>
{(model) => (
<option value={model.id}>
{model.name || model.id.split(':').pop()}
</option>
)}
</For>
</optgroup>
)}
</For>
</select>
</Show>
<p class={formHelpText}>
Model for automatic remediation. Use a more capable model for better fix accuracy.
</p>
</div>
</Show>
</div>
</div>