From 7f0e34d3189eb5e9a8fd61f4997de77f7bde433f Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Sat, 12 Sep 2026 13:15:27 -0400 Subject: [PATCH] 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. --- CHANGELOG.md | 10 +++++++++ docs/ISSUES_TODOLIST.md | 4 +++- docs/features/ai-provider-picker.md | 12 +++++++++-- frontend/js/ai.js | 33 +++++++++++++++++++++++++++-- frontend/js/i18n.js | 4 +++- frontend/locales/en.json | 1 + frontend/locales/fr.json | 1 + frontend/style.css | 7 +++--- frontend/sw.js | 4 ++-- tests/frontend/ai.test.mjs | 30 ++++++++++++++++++++++++++ 10 files changed, 95 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9588e16..e9c04dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -223,6 +223,16 @@ et [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ### Corrigé +- **BUG-009 — Assistant IA : liste de modèles corrompue et clés i18n brutes** — deux causes : + (1) les fichiers de locale n'étant pas *content-hashed*, un `fr.json` en cache HTTP affichait + les clés brutes (`ai.model_search`, `mobile_editor.*`, …) ; le chargement i18n utilise désormais + `cache: 'no-store'` et `SW_VERSION` est incrémenté pour purger les anciens caches du service + worker. (2) la liste de modèles (OpenRouter = plusieurs centaines d'entrées) pouvait se retrouver + non stylée si la feuille de style était en cache ; le picker applique maintenant les styles + critiques **en ligne** (popover, liste en colonne, options `display:block`), plafonne le rendu à + 200 entrées avec un indicateur « … N autres — affinez la recherche », et la recherche filtre le + reste. Tests JSDOM (`tests/frontend/ai.test.mjs` +1). + - **BUG-007 — Assistant IA : menus `/` et `@` (navigation ↑/↓ et filtrage accentué)** — la détection des commandes/mentions et le filtrage des skills utilisaient des motifs ASCII (`[a-z0-9-]`, `\w`) : dès qu'un caractère accentué était saisi (`/résumé`, `@café`), le menu se diff --git a/docs/ISSUES_TODOLIST.md b/docs/ISSUES_TODOLIST.md index 2749975..b589e20 100644 --- a/docs/ISSUES_TODOLIST.md +++ b/docs/ISSUES_TODOLIST.md @@ -118,6 +118,7 @@ Avant de corriger quoi que ce soit, un agent IA doit : | *BUG-006* | Clé API DeepSeek réelle commitée en clair dans `.env.example` | 🟢 corrigé | P0 | 📄 docs + 🔐 sécurité | IA | `.env.example` | `git grep "sk-" .env.example` | `.env.example` : clé remplacée par un placeholder (`sk-xxx…`) + modèle `deepseek-chat` | ⚠️ **Rotation de la clé requise** : elle reste dans l'historique Git → révoquer/régénérer côté DeepSeek. Le fichier `.env` (réel) est bien gitignoré | | *BUG-007* | Assistant IA : menus `/` et `@` — navigation clavier ↑/↓ inopérante et filtrage des skills cassé par les accents | 🟢 corrigé | P1 | 📱 frontend | IA | `frontend/js/bookslm.js` | Taper `/résumé` ou `@café`, puis ↑/↓ | `bookslm.js` : motifs Unicode `\p{L}` (détection + sélection), recherche normalisée NFD (insensible aux accents), jeton `_menuSeq` (rendus async obsolètes), `scrollIntoView` de l'élément actif | Le menu se fermait dès la saisie d'un accent ; la frappe rapide pouvait écraser le menu avec un résultat obsolète. Tests : `tests/frontend/ai.test.mjs` (+3) | | *BUG-008* | Assistant IA : commande `@` — chemins accentués + contexte ad-hoc ignoré en mode Général | 🟢 corrigé | P1 | 📱 frontend + ⚙️ backend | IA | `frontend/js/bookslm.js`, `backend/bookslm_routes.py` | `@fichier-accentué` puis envoyer en mode Général | Frontend : détection Unicode + repli `vault=all` sans vault courant. Backend : `_resolve_system_prompt` résout le vault optionnel dès qu'un contexte `@` est présent (mode Général) | Le backend ignorait `extra_files`/`extra_directories` en mode Général (`vault_path is None`). Tests : `tests/test_bookslm.py` (+2) et `tests/frontend/ai.test.mjs` | +| *BUG-009* | Assistant IA : liste de modèles corrompue (art ASCII) et clés i18n brutes (`ai.model_search`) sous OpenRouter | 🟢 corrigé | P1 | 📱 frontend | IA | `frontend/js/ai.js`, `frontend/js/i18n.js`, `frontend/sw.js`, `frontend/style.css` | Ouvrir le menu modèle sous « openrouter » | Locale non content-hashée en cache HTTP → `cache:'no-store'` + bump `SW_VERSION` v4 ; styles critiques du picker appliqués **en ligne** (popover absolu, liste en colonne, options `display:block`) ; rendu plafonné à 200 modèles + indicateur « … N autres » | OpenRouter expose plusieurs centaines de modèles ; si `style.css` est en cache, la liste s'affichait en bloc inline (art ASCII) et les clés i18n brutes provenaient d'un `fr.json` obsolète. Tests : `tests/frontend/ai.test.mjs` (+1) | ### TODOs techniques (améliorations / nouvelles tâches) @@ -141,7 +142,8 @@ Avant de corriger quoi que ce soit, un agent IA doit : | 2026-09-11 | BUG-003, BUG-004 | Correction | `backend/{main,indexer,export,pdf_reader,bookslm_routes}.py`, `backend/auth/router.py`, `.gitea/workflows/ci.yml`, `README.md`, `README.fr.md` | BUG-003: 33 erreurs mypy corrigées (annotations, gardes `None`, import `PROVIDERS` manquant → bug latent) + étape CI mypy rendue bloquante. BUG-004: lien `README.md` → `docs/CONTRIBUTING.md`. Vérifié: mypy 0 erreur, ruff OK, pytest 728 passed, frontend OK. | 🟢 corrigé (en attente vérif utilisateur) | | 2026-09-11 | BUG-005 | Correction | `frontend/sw.js`, `frontend/index.html`, `frontend/js/sync.js`, `backend/main.py`, `.gitea/workflows/ci.yml`, `tests/frontend/sw.test.mjs`, `tests/test_api_main.py` | BUG-005: chargement mobile incomplet via Cloudflare. SW réécrit en **network-first** pour HTML/JS/CSS + caches versionnés ; précache corrigé (`/static/js/…`) ; kill-switch de session remplacé par une migration `localStorage` ponctuelle ; en-têtes `/static` passés de `immutable 1 an` à `no-cache` ; `index.html`/`manifest`/SPA en `no-cache` ; reload unique sur `controllerchange`. Vérifié: 754 tests backend, frontend 9+28+8 OK, ruff/mypy OK. | 🟢 corrigé (en attente vérif utilisateur) | | 2026-09-11 | BUG-006 | Correction sécurité | `.env.example` | Clé API DeepSeek réelle exposée dans `.env.example` → remplacée par un placeholder. **Rotation de la clé à faire côté DeepSeek** (présente dans l'historique Git). | 🟢 corrigé (rotation à confirmer par l'utilisateur) | -| 2026-09-12 | BUG-007, BUG-008, #82 | Correction + refonte UI | `frontend/js/bookslm.js`, `frontend/js/ai.js`, `frontend/style.css`, `frontend/locales/{fr,en}.json`, `backend/bookslm_routes.py`, `tests/frontend/ai.test.mjs`, `tests/test_bookslm.py` | BUG-007 : motifs Unicode + recherche NFD insensible aux accents + navigation ↑/↓ fiabilisée (jeton de séquence, scrollIntoView). BUG-008 : contexte ad-hoc `@` pris en compte en mode Général (backend) + repli `vault=all`. #82 : section « Fournisseur & modèle » compacte (recherche modèle + bulle capacités ⓘ au survol/clic/appui long). Vérifié : tests frontend 41/41, `tests/test_bookslm.py` 47 passed. | 🟢 corrigé (en attente vérif utilisateur) | +| 2026-09-12 | BUG-007, BUG-008, #82 | Correction + refonte UI | `frontend/js/bookslm.js`, `frontend/js/ai.js`, `frontend/style.css`, `frontend/locales/{fr,en}.json`, `backend/bookslm_routes.py`, `tests/frontend/ai.test.mjs`, `tests/test_bookslm.py` | BUG-007 : motifs Unicode + recherche NFD insensible aux accents + navigation ↑/↓ fiabilisée (jeton de séquence, scrollIntoView). BUG-008 : contexte ad-hoc `@` pris en compte en mode Général (backend) + repli `vault=all`. #82 : section « Fournisseur & modèle » compacte (recherche modèle + bulle capacités ℹ️ au survol/clic/appui long). Vérifié : tests frontend 41/41, `tests/test_bookslm.py` 47 passed. | 🟢 corrigé (en attente vérif utilisateur) | +| 2026-09-12 | BUG-009 | Correction | `frontend/js/ai.js`, `frontend/js/i18n.js`, `frontend/sw.js`, `frontend/style.css`, `frontend/locales/{fr,en}.json`, `tests/frontend/ai.test.mjs` | BUG-009 : locale non content-hashée servie depuis le cache HTTP → clés i18n brutes ; passage en `cache:'no-store'` + `SW_VERSION` v4. Liste de modèles corrompue (OpenRouter, styles en cache) → styles critiques en ligne, options `display:block`, plafond 200 + indicateur. Vérifié : tests frontend 42/42. | 🟢 corrigé (en attente vérif utilisateur) | --- diff --git a/docs/features/ai-provider-picker.md b/docs/features/ai-provider-picker.md index 82dfd0d..765cfb6 100644 --- a/docs/features/ai-provider-picker.md +++ b/docs/features/ai-provider-picker.md @@ -32,10 +32,18 @@ ## C. Tests — ✅ livré - [x] `tests/frontend/ai.test.mjs` : filtrage accentué, mentions accentuées, navigation ↑/↓, - recherche de modèle + bulle de capacités. + recherche de modèle + bulle de capacités, plafonnement des longues listes (OpenRouter). - [x] `tests/test_bookslm.py` : contexte ad-hoc en mode Général (`/chat`). -## D. Points d'attention +## D. Durcissement anti-cache (BUG-009) — ✅ livré +- [x] Locales chargées avec `cache: 'no-store'` (`frontend/js/i18n.js`) : plus de clés brutes + affichées à cause d'un `fr.json` obsolète en cache HTTP. +- [x] `SW_VERSION` incrémenté (`frontend/sw.js`) pour purger les caches du service worker. +- [x] Styles critiques du picker appliqués **en ligne** (popover absolu, liste en colonne, options + `display:block`) pour rester corrects même si `style.css` est servi depuis un cache. +- [x] Rendu plafonné à 200 modèles (`MODEL_RENDER_LIMIT`) + indicateur `ai.model_more`. + +## E. Points d'attention - La table de capacités reste **statique** (`backend/model_capabilities.py`) : un modèle inconnu retombe sur le défaut du fournisseur. - Le select masqué est conservé uniquement pour la rétro-compatibilité ; ne pas le supprimer sans diff --git a/frontend/js/ai.js b/frontend/js/ai.js index bd9cdde..737f62d 100644 --- a/frontend/js/ai.js +++ b/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 = ''; diff --git a/frontend/js/i18n.js b/frontend/js/i18n.js index 0e49e4b..60a07ee 100644 --- a/frontend/js/i18n.js +++ b/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) { diff --git a/frontend/locales/en.json b/frontend/locales/en.json index 9e2686c..01ffbd2 100644 --- a/frontend/locales/en.json +++ b/frontend/locales/en.json @@ -130,6 +130,7 @@ "ai.model_settings": "Provider & model", "ai.model_search": "Search a model…", "ai.model_info": "Model capabilities", + "ai.model_more": "… {count} more — refine your search", "ai.add_context": "Add context", "ai.attach_image": "Attach an image", "ai.cap_audio_speech": "Audio Speech", diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json index e681b6c..d517ca4 100644 --- a/frontend/locales/fr.json +++ b/frontend/locales/fr.json @@ -130,6 +130,7 @@ "ai.model_settings": "Fournisseur & modèle", "ai.model_search": "Rechercher un modèle…", "ai.model_info": "Capacités du modèle", + "ai.model_more": "… {count} autres — affinez la recherche", "ai.add_context": "Ajouter un contexte", "ai.attach_image": "Joindre une image", "ai.cap_audio_speech": "Audio Speech", diff --git a/frontend/style.css b/frontend/style.css index 35a7fc3..845d56d 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -9385,11 +9385,12 @@ body.bookslm-resizing { cursor: ew-resize; user-select: none; } background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; margin-bottom: 4px; } .ai-picker-model-list { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; } -.ai-picker-model-option { text-align: left; font-size: 0.72rem; padding: 5px 8px; border-radius: 5px; - background: none; border: none; color: var(--text-primary); cursor: pointer; - overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.ai-picker-model-option { display: block; width: 100%; text-align: left; font-size: 0.72rem; + padding: 5px 8px; border-radius: 5px; background: none; border: none; color: var(--text-primary); + cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-picker-model-option:hover, .ai-picker-model-option.active { background: var(--surface2); } .ai-picker-model-empty { font-size: 0.7rem; color: var(--text-secondary); padding: 6px 8px; text-align: center; } +.ai-picker-model-more { font-size: 0.7rem; color: var(--text-secondary); padding: 6px 8px; text-align: center; } /* Capability info button (ⓘ) + informational bubble. */ .ai-picker-caps-host { position: relative; display: inline-flex; } .ai-picker-info { background: none; border: none; cursor: pointer; color: var(--text-secondary); diff --git a/frontend/sw.js b/frontend/sw.js index 96fa0d3..dc21778 100644 --- a/frontend/sw.js +++ b/frontend/sw.js @@ -1,5 +1,5 @@ /* ObsiGate — Service Worker (PWA offline + push) - * Version: 3 (2026-09-11) + * Version: 4 (2026-09-12) * * Caching policy (fixes stale-asset loads behind Cloudflare / mobile): * - navigations & code (HTML / JS / CSS / manifest) : NETWORK-FIRST @@ -11,7 +11,7 @@ * cache or Cloudflare does NOT clear the Service Worker Cache Storage, which is * a separate store. Bumping SW_VERSION invalidates it on every release. */ -const SW_VERSION = 'v3'; +const SW_VERSION = 'v4'; const CODE_CACHE = `obsigate-code-${SW_VERSION}`; const RUNTIME_CACHE = `obsigate-runtime-${SW_VERSION}`; const API_CACHE = `obsigate-api-${SW_VERSION}`; diff --git a/tests/frontend/ai.test.mjs b/tests/frontend/ai.test.mjs index 94c09be..5d7d767 100644 --- a/tests/frontend/ai.test.mjs +++ b/tests/frontend/ai.test.mjs @@ -959,6 +959,36 @@ async function main() { localStorage.clear(); }); + // ── 42. Picker handles very long model lists (OpenRouter) ── + await test("picker caps long model lists and keeps options block-laid-out", async () => { + localStorage.clear(); + const models = Array.from({ length: 250 }, (_, i) => `vendor-${i}/model-${i}:free`); + globalThis.fetch = async (url) => { + const u = String(url); + if (u.includes("/api/ai/status")) { + return { ok: true, status: 200, json: async () => ({ configured: true, providers: { openrouter: { available: true } } }) }; + } + if (u.includes("/api/config/ai-models")) { + return { ok: true, status: 200, json: async () => ({ models, source: "live" }) }; + } + if (u.includes("/api/ai/model-capabilities")) { + return { ok: true, status: 200, json: async () => ({ capabilities: { chat: true, vision: true } }) }; + } + return { ok: true, status: 200, json: async () => ({}) }; + }; + localStorage.setItem("obsigate_ai_picker", JSON.stringify({ provider: "openrouter" })); + const picker = await ai.buildAIPickerUI(); + document.body.appendChild(picker); + await sleep(30); + picker.querySelector(".ai-picker-model-trigger").click(); + const options = picker.querySelectorAll(".ai-picker-model-option"); + assert.equal(options.length, 200, "rendered options are capped"); + assert.ok(picker.querySelector(".ai-picker-model-more"), "a 'more results' hint is shown"); + assert.ok(options[0].style.display === "block", "options are block-laid-out even without CSS"); + picker.remove(); + localStorage.clear(); + }); + // ── Summary ── console.log(`\n${passCount}/${testCount} tests passed`); if (passCount !== testCount) {