fix(ai): liste de modeles corrompue et cles i18n brutes (BUG-009)

Locales chargees en cache no-store + SW_VERSION v4 pour eviter les cles brutes (fr.json obsolete). Picker : styles critiques en ligne (popover/liste/options), plafond de 200 modeles avec indicateur, et non-chevauchement entre la liste de modeles et la bulle de capacites.

frontend/js/ai.js

@@ -39,6 +39,11 @@ const AI_CAPABILITY_KEYS = [
   'video', 'audio_speech', 'audio_transcription', 'vision',
 ];
 
+// Maximum number of model options rendered at once. Providers such as
+// OpenRouter expose hundreds of models; rendering them all makes the popover
+// heavy and hard to scan, so the search box is the primary way to narrow down.
+const MODEL_RENDER_LIMIT = 200;
+
 function _readPicker() {
   try {
     return JSON.parse(localStorage.getItem(PICKER_STORAGE_KEY) || '{}');
@@ -180,6 +185,11 @@ async function _buildPickerUI() {
 
   const modelPop = document.createElement('div');
   modelPop.className = 'ai-picker-model-pop hidden';
+  // Critical layout is applied inline too: if a stale stylesheet is served, the
+  // popover must still stack vertically instead of flowing as a block of text.
+  modelPop.style.cssText = 'position:absolute;top:calc(100% + 4px);left:0;z-index:60;'
+    + 'min-width:220px;max-width:320px;background:var(--bg-primary);border:1px solid var(--border);'
+    + 'border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.35);padding:6px;';
 
   const modelSearch = document.createElement('input');
   modelSearch.type = 'text';
@@ -187,10 +197,12 @@ async function _buildPickerUI() {
   modelSearch.autocomplete = 'off';
   modelSearch.placeholder = t('ai.model_search');
   modelSearch.setAttribute('aria-label', t('ai.model_search'));
+  modelSearch.style.cssText = 'width:100%;box-sizing:border-box;';
 
   const modelList = document.createElement('div');
   modelList.className = 'ai-picker-model-list';
   modelList.setAttribute('role', 'listbox');
+  modelList.style.cssText = 'max-height:200px;overflow-y:auto;display:flex;flex-direction:column;';
 
   modelPop.appendChild(modelSearch);
   modelPop.appendChild(modelList);
@@ -208,13 +220,20 @@ async function _buildPickerUI() {
   infoBtn.title = t('ai.model_info');
   const capsPop = document.createElement('div');
   capsPop.className = 'ai-picker-caps-pop hidden';
+  capsPop.style.cssText = 'position:absolute;top:calc(100% + 4px);right:0;z-index:60;'
+    + 'min-width:220px;max-width:300px;background:var(--bg-primary);border:1px solid var(--border);'
+    + 'border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.35);padding:8px 10px;';
   capsHost.appendChild(infoBtn);
   capsHost.appendChild(capsPop);
 
   let _hideCapsTimer = null;
   let _longPressTimer = null;
   let _longPressFired = false;
-  const showCaps = () => { clearTimeout(_hideCapsTimer); capsPop.classList.remove('hidden'); };
+  const showCaps = () => {
+    clearTimeout(_hideCapsTimer);
+    _closePop(); // never overlap the model dropdown
+    capsPop.classList.remove('hidden');
+  };
   const hideCaps = () => { _hideCapsTimer = setTimeout(() => capsPop.classList.add('hidden'), 140); };
   infoBtn.addEventListener('mouseenter', showCaps);
   infoBtn.addEventListener('focus', showCaps);
@@ -261,6 +280,7 @@ async function _buildPickerUI() {
   function _renderList() {
     const q = _normalizeText(modelSearch.value);
     const matches = _models.filter((m) => !q || _normalizeText(m).includes(q));
+    const shown = matches.slice(0, MODEL_RENDER_LIMIT);
     modelList.innerHTML = '';
     _activeIndex = -1;
     if (!matches.length) {
@@ -270,16 +290,24 @@ async function _buildPickerUI() {
       modelList.appendChild(empty);
       return;
     }
-    matches.forEach((model) => {
+    shown.forEach((model) => {
       const option = document.createElement('button');
       option.type = 'button';
       option.className = 'ai-picker-model-option';
       option.dataset.value = model;
       option.textContent = model || t('ai.model_default');
+      option.style.cssText = 'display:block;width:100%;text-align:left;';
       if (model === modelSelect.value) option.classList.add('active');
       option.addEventListener('mousedown', (e) => { e.preventDefault(); _pick(model); });
       modelList.appendChild(option);
     });
+    if (matches.length > shown.length) {
+      const more = document.createElement('div');
+      more.className = 'ai-picker-model-more';
+      more.textContent = t('ai.model_more', { count: matches.length - shown.length });
+      more.style.cssText = 'font-size:0.7rem;color:var(--text-secondary);padding:6px 8px;text-align:center;';
+      modelList.appendChild(more);
+    }
     _activeIndex = _visibleOptions().findIndex((el) => el.dataset.value === modelSelect.value);
   }
 
@@ -293,6 +321,7 @@ async function _buildPickerUI() {
   }
 
   function _openPop() {
+    capsPop.classList.add('hidden'); // never overlap the capability bubble
     modelPop.classList.remove('hidden');
     modelTrigger.setAttribute('aria-expanded', 'true');
     modelSearch.value = '';

frontend/js/i18n.js

@@ -136,7 +136,9 @@ export async function initI18n() {
 
 async function _fetchLocale(locale) {
   try {
-    const resp = await fetch('/static/locales/' + locale + '.json');
+    // ``no-store`` bypasses the HTTP cache: locale files are not content-hashed
+    // and a stale copy would surface raw keys in the UI (missing translations).
+    const resp = await fetch('/static/locales/' + locale + '.json', { cache: 'no-store' });
     if (!resp.ok) throw new Error('HTTP ' + resp.status);
     return await resp.json();
   } catch (err) {