fix(editor): stabilize image workflows and editing controls

static/js/editor/ai-settings.js

@@ -5,6 +5,9 @@
  * "Double-check AI edits" toggle. Opened from the Quick Edit gear button and
  * from the editor setup checklist; keeps the Quick Edit box itself uncluttered.
  */
+import { readImagePreferences, saveImagePreferences } from '../settings/imagePreferences.js';
+import { updateFooterEditModel } from './ai-models.js';
+
 export function createAiSettings({ container }) {
   const el = document.createElement('div');
   el.className = 'ge-ai-settings';
@@ -19,11 +22,14 @@ export function createAiSettings({ container }) {
         <button type="button" class="ge-ai-settings-close" data-ai-settings-close aria-label="Close">×</button>
       </div>
       <div class="ge-ai-settings-body">
+        <label class="ge-ai-settings-label" for="ge-ai-model">Image generation model</label>
+        <select class="ge-ai-command-model" id="ge-ai-model" title="Image generation model" aria-label="Image generation model"></select>
         <label class="ge-ai-settings-label" for="ge-ai-command-model">Image edit model</label>
         <select class="ge-ai-command-model" id="ge-ai-command-model" title="Image edit model" aria-label="Image edit model"></select>
         <label class="ge-ai-settings-label" for="ge-ai-command-agent-model">AI agent (vision) model</label>
         <select class="ge-ai-command-model" id="ge-ai-command-agent-model" title="Quick Edit agent model" aria-label="Quick Edit agent model"></select>
         <p class="ge-ai-settings-note">Recommended, not required — the vision agent plans edits and can double-check results.</p>
+        <p class="ge-ai-settings-note" id="ge-ai-settings-save-status" role="status"></p>
         <label class="ge-ai-settings-label" for="ge-look-strength">Look strength</label>
         <div class="ge-ai-settings-strength">
           <input type="range" id="ge-look-strength" min="0.5" max="2" step="0.1" value="1.4" aria-label="Look grade strength" />
@@ -41,6 +47,7 @@ export function createAiSettings({ container }) {
 
   function open(focusId) {
     el.hidden = false;
+    syncModels();
     if (focusId) {
       const target = document.getElementById(focusId);
       if (target) {
@@ -56,10 +63,59 @@ export function createAiSettings({ container }) {
       close();
     }
   });
-  const onKey = (e) => { if (e.key === 'Escape' && !el.hidden) close(); };
-  document.addEventListener('keydown', onKey);
+  const onKey = (e) => {
+    if (e.key !== 'Escape' || el.hidden) return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    close();
+  };
+  window.addEventListener('keydown', onKey, true);
 
   container.appendChild(el);
+  const status = el.querySelector('#ge-ai-settings-save-status');
+  const modelFields = [['ge-ai-model', 'image_model'], ['ge-ai-command-model', 'image_edit_model']];
+  function applyModels(settings) {
+    for (const [id, key] of modelFields) {
+      if (!(key in settings)) continue;
+      const select = el.querySelector(`#${id}`);
+      const model = settings[key] || '';
+      let option = [...select.options].find(option => {
+        const value = option.value;
+        return model ? value.slice(value.indexOf('::') + 2) === model : value === '';
+      });
+      if (!option && model && select.options.length) {
+        option = document.createElement('option');
+        option.value = `::${model}`;
+        option.textContent = `${model} (unavailable)`;
+        option.disabled = true;
+        select.append(option);
+      }
+      if (option) select.value = option.value;
+    }
+    updateFooterEditModel();
+  }
+  async function syncModels() {
+    try { applyModels(await readImagePreferences()); }
+    catch (error) { status.textContent = error.message; }
+  }
+  for (const [id, key] of modelFields) {
+    el.querySelector(`#${id}`).addEventListener('change', async (event) => {
+      const raw = event.target.value;
+      if (raw === '__serve_cookbook__') return;
+      const model = raw.includes('::') ? raw.slice(raw.indexOf('::') + 2) : '';
+      try {
+        status.textContent = 'Saving…';
+        await saveImagePreferences({ [key]: model });
+        status.textContent = 'Saved';
+      } catch (error) {
+        await syncModels();
+        status.textContent = error.message;
+      }
+    });
+  }
+  const onPreferencesChanged = event => applyModels(event.detail);
+  window.addEventListener('image-preferences-changed', onPreferencesChanged);
+  container.addEventListener('ge-image-models-ready', syncModels);
 
   const strengthInput = el.querySelector('#ge-look-strength');
   const strengthVal = el.querySelector('#ge-look-strength-val');
@@ -77,7 +133,9 @@ export function createAiSettings({ container }) {
   }
 
   function destroy() {
-    document.removeEventListener('keydown', onKey);
+    window.removeEventListener('keydown', onKey, true);
+    window.removeEventListener('image-preferences-changed', onPreferencesChanged);
+    container.removeEventListener('ge-image-models-ready', syncModels);
     el.remove();
   }