From 2381631df0498e5efae94853aad83f04cfb431a7 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Fri, 12 Dec 2025 15:17:44 +0000
Subject: [PATCH] fix(ui): Move Auto-Fix Model selector next to Auto-Fix toggle

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).
---
 .../src/components/Settings/AISettings.tsx    | 82 +++++++++----------
 1 file changed, 40 insertions(+), 42 deletions(-)

diff --git a/frontend-modern/src/components/Settings/AISettings.tsx b/frontend-modern/src/components/Settings/AISettings.tsx
index 698c9f0..e048eb1 100644
--- a/frontend-modern/src/components/Settings/AISettings.tsx
+++ b/frontend-modern/src/components/Settings/AISettings.tsx
@@ -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>