style(ai): selecteurs Fournisseur/Modele alignes a droite et reordonnes (#82)

CHANGELOG.md

@@ -207,6 +207,12 @@ et [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Modifié
 
+- **#82 Assistant IA — sélecteurs Fournisseur/Modèle alignés à droite et réordonnés** — dans la
+  barre de l'assistant, le groupe de sélection est aligné sur le bord droit et l'ordre devient
+  **capacité du modèle (ⓘ) → fournisseur → modèle**. La bulle de capacités s'ouvre désormais vers
+  la droite (`left: 0`) pour ne pas déborder de la barre latérale. Tests JSDOM
+  (`tests/frontend/ai.test.mjs`).
+
 - **`scripts/bump_version.sh` — synchronisation de la version desktop** — le script met
   désormais à jour `desktop/tauri.conf.json`, `desktop/Cargo.toml` et `desktop/Cargo.lock`
   (`obsigate-desktop`) avant de créer un commit de release `chore(release): vX.Y.Z` puis le

docs/ISSUES_TODOLIST.md

@@ -155,6 +155,7 @@ Avant de corriger quoi que ce soit, un agent IA doit :
 | 2026-09-12 | BUG-013, BUG-014 | Correction | `frontend/js/bookslm.js`, `frontend/index.html`, `frontend/sw.js`, `tests/frontend/ai.test.mjs` | BUG-013 : liens fichiers/dossiers via `_activeVault()` (vault de contexte → sélection → premier vault). BUG-014 : navigation ↑/↓ gérée au niveau du panneau en phase de capture. Purge des caches élargie (`SW_VERSION` v6, migration `obsigate-*`). Vérifié : tests frontend 47/47, pytest 930. | 🟢 corrigé (en attente vérif utilisateur) |
 | 2026-09-12 | BUG-015, #82 | Correction + UX | `frontend/js/bookslm.js`, `frontend/style.css`, `tests/frontend/ai.test.mjs` | BUG-015 : sélection des menus `/` et `@` rendue visible (`--bg-hover` + barre d'accent à gauche) car `--surface2` = `--bg-primary`. #82 : retrait de l'indice clavier sous la zone de saisie. Vérifié Playwright (contraste `#1f2430` vs `#0f1117` + barre accent) et tests frontend 47/47. | 🟢 corrigé (en attente vérif utilisateur) |
 | 2026-09-12 | #82 | Amélioration perf + UX | `backend/services/search.py`, `backend/main.py`, `frontend/js/bookslm.js`, `frontend/js/ui.js`, `frontend/style.css`, `tests/test_api_main.py`, `tests/frontend/ai.test.mjs` | #82 : endpoint `GET /api/vault/{vault}/paths` + préchargement et filtrage client du menu `@` (instantané) ; sélecteurs Fournisseur/Modèle agrandis (0,8 rem / 34 px) ; « 🧠 BooksLM » ajouté au menu contextuel de la racine des vaults. Vérifié : pytest 151 (ciblés) + ruff/mypy, tests frontend 49/49. | ✅ livré (en attente vérif utilisateur) |
+| 2026-09-12 | #82 | UX | `frontend/js/ai.js`, `frontend/style.css`, `tests/frontend/ai.test.mjs` | Sélecteurs Fournisseur/Modèle alignés à droite dans la barre de l'assistant et réordonnés : capacité du modèle (ⓘ) → fournisseur → modèle. Bulle de capacités ouverte vers la droite (`left: 0`). Test JSDOM de l'ordre. Vérifié : tests frontend 49/49. | ✅ livré (en attente vérif utilisateur) |
 
 ---
 

docs/features/ai-provider-picker.md

@@ -86,6 +86,15 @@
       (police 0,8 rem, hauteur 34 px, rayon 6 px).
 - [x] Menu contextuel de la **racine d'une vault** : ajout de « 🧠 BooksLM » (`frontend/js/ui.js`).
 
+## J. Alignement à droite & ordre des sélecteurs (#82) — ✅ livré
+- [x] Le groupe de sélection Fournisseur/Modèle est **aligné sur le bord droit** de la barre
+      (`frontend/style.css` : `.bookslm-toolbar { justify-content: flex-end; }`).
+- [x] Ordre visuel : **capacité du modèle (ⓘ) → menu fournisseurs → menu des modèles**
+      (`frontend/js/ai.js`, ordre d'ajout dans `_buildPickerUI()`).
+- [x] La bulle de capacités s'ouvre vers la droite (`left: 0`, inline + CSS) pour rester dans la
+      barre latérale désormais que le bouton ⓘ est en tête de groupe.
+- [x] Test JSDOM : l'ordre des trois contrôles visibles est vérifié (`tests/frontend/ai.test.mjs`).
+
 ## I. 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.

frontend/js/ai.js

@@ -217,7 +217,7 @@ 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;'
+  capsPop.style.cssText = 'position:absolute;top:calc(100% + 4px);left: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);
@@ -442,10 +442,11 @@ async function _buildPickerUI() {
     _renderList();
   }
 
+  // Visual order: capability info, provider menu, model menu.
+  wrap.appendChild(capsHost);
   wrap.appendChild(providerSelect);
   wrap.appendChild(modelSelect);
   wrap.appendChild(combo);
-  wrap.appendChild(capsHost);
   return wrap;
 }
 

frontend/style.css

@@ -9187,8 +9187,9 @@ body.popup-mode .content-area {
   color: var(--text-secondary); padding: 5px; border-radius: 6px; display: flex; align-items: center; }
 .bookslm-header button:hover { background: var(--surface2); color: var(--text-primary); }
 /* Provider/model picker on its own row so the header actions never get hidden. */
-.bookslm-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+.bookslm-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
-  padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
+  flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border);
+  background: var(--bg-secondary); }
 .bookslm-toolbar-label { font-size: 11px; color: var(--text-secondary);
   text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
 .bookslm-toolbar .ai-picker { margin-left: 0; padding-left: 0; border-left: none;
@@ -9421,7 +9422,7 @@ body.bookslm-resizing { cursor: ew-resize; user-select: none; }
   font-size: 1rem; line-height: 1; padding: 5px 7px; border-radius: 6px; }
 .ai-picker-info:hover, .ai-picker-info:focus { color: var(--accent); }
 .ai-picker-info.hidden { display: none; }
-.ai-picker-caps-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
+.ai-picker-caps-pop { position: absolute; top: calc(100% + 4px); left: 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; }

tests/frontend/ai.test.mjs

@@ -962,6 +962,12 @@ async function main() {
     document.body.appendChild(picker);
     await sleep(30);
 
+    const visible = Array.from(picker.children).filter((el) => !el.hidden);
+    assert.equal(visible.length, 3, "three visible controls");
+    assert.ok(visible[0].classList.contains("ai-picker-caps-host"), "capability info comes first");
+    assert.ok(visible[1].classList.contains("ai-picker-select"), "provider menu comes second");
+    assert.ok(visible[2].classList.contains("ai-picker-model-combo"), "model menu comes third");
+
     const hidden = picker.querySelector(".ai-picker-model");
     assert.ok(hidden && hidden.hidden, "hidden native select kept for admin commands");
     assert.ok(hidden.querySelectorAll("option").length >= 4, "native select holds default + models");