feat(ai): menu @ instantane, selecteurs agrandis et BooksLM racine (#82)

Nouvel endpoint GET /api/vault/{vault}/paths + prechargement et filtrage client du menu @ (affichage instantane des fichiers/repertoires). Selecteurs Fournisseur/Modele agrandis (0,8rem / 34px) pour s'aligner sur le reste du site. Ajout de BooksLM au menu contextuel de la racine des vaults.

frontend/js/bookslm.js

@@ -109,6 +109,10 @@ class BooksLM {
     this._menuSeq = 0;
     // Timer that hides the "done" activity indicator after a short delay.
     this._activityHideTimer = null;
+    // Cache of every indexed path per vault, backing instant `@` filtering.
+    this._pathCache = null;
+    this._pathCacheVault = null;
+    this._pathCachePromise = null;
   }
 
   _readAgentMode() {
@@ -214,6 +218,8 @@ class BooksLM {
 
     await this._loadContext();
     this._isLoading = false;
+    // Warm the `@` path cache so the mention menu appears instantly.
+    this._ensurePaths().catch(() => { /* best effort */ });
   }
 
   /** Backwards-compatible helper: open the assistant on a directory. */
@@ -349,6 +355,31 @@ class BooksLM {
     return (first && (first.name || first)) || null;
   }
 
+  /**
+   * Fetch (once per vault) the flat list of indexed paths so the `@` menu can
+   * filter files/directories instantly on the client. Falls back to an empty
+   * list on failure; callers then use the tree-search endpoint.
+   */
+  async _ensurePaths() {
+    const vault = this._activeVault();
+    if (!vault) return [];
+    if (this._pathCache && this._pathCacheVault === vault) return this._pathCache;
+    if (this._pathCachePromise && this._pathCacheVault === vault) return this._pathCachePromise;
+    this._pathCacheVault = vault;
+    this._pathCachePromise = api(`/api/vault/${encodeURIComponent(vault)}/paths?limit=5000`)
+      .then((data) => {
+        const paths = Array.isArray(data.results) ? data.results : [];
+        this._pathCache = paths;
+        return paths;
+      })
+      .catch(() => {
+        this._pathCache = [];
+        return [];
+      })
+      .finally(() => { this._pathCachePromise = null; });
+    return this._pathCachePromise;
+  }
+
   /** Open a file mentioned in an assistant answer in the main viewer. */
   async _openFileLink(path) {
     const vault = this._activeVault();
@@ -856,9 +887,19 @@ class BooksLM {
     if (!this._panel) return;
     const seq = ++this._menuSeq;
     const vault = this._activeVault();
+    const q = normalizeSearch(query);
     try {
       let results = [];
-      if (query) {
+      // Fast path: filter the prefetched flat path list on the client so the
+      // menu updates instantly while typing.
+      const cached = await this._ensurePaths();
+      if (seq !== this._menuSeq) return;
+      if (cached.length) {
+        const matches = q
+          ? cached.filter((p) => normalizeSearch(p.path).includes(q))
+          : cached;
+        results = matches.slice(0, 20);
+      } else if (query) {
         const searchVault = vault || 'all';
         const data = await api(
           `/api/tree-search?q=${encodeURIComponent(query)}&vault=${encodeURIComponent(searchVault)}`

frontend/js/ui.js

@@ -1705,6 +1705,8 @@ export const ContextMenuManager = {
     if (type === 'vault') {
       this._addItem('folder-plus', 'Nouveau dossier', () => this._createDirectory(), isReadonly);
       this._addItem('file-plus', 'Nouveau fichier', () => this._createFile(), isReadonly);
+      this._addSeparator();
+      this._addItem('brain', '🧠 BooksLM', () => { import('./bookslm.js').then(m => m.default.open(this._targetVault, '')); }, false);
     } else if (type === 'directory') {
       this._addItem('folder-plus', 'Nouveau sous-dossier', () => this._createDirectory(), isReadonly);
       this._addItem('file-plus', 'Nouveau fichier ici', () => this._createFile(), isReadonly);

frontend/style.css

@@ -9193,7 +9193,7 @@ body.popup-mode .content-area {
   text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
 .bookslm-toolbar .ai-picker { margin-left: 0; padding-left: 0; border-left: none;
   flex-wrap: wrap; row-gap: 4px; }
-.bookslm-toolbar .ai-picker select { max-width: 200px; }
+.bookslm-toolbar .ai-picker select { max-width: 220px; }
 .bookslm-panel.fullscreen { width: 100vw; }
 .bookslm-status { padding: 6px 16px; font-size: 12px; color: var(--text-secondary);
   border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: center; }
@@ -9380,40 +9380,45 @@ body.bookslm-resizing { cursor: ew-resize; user-select: none; }
 .bookslm-modal-actions button { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border);
   background: var(--surface); color: var(--text-primary); cursor: pointer; font-size: 13px; }
 .bookslm-modal-actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
-/* ── Provider/model picker (compact, shared by assistant + editor) ── */
-.ai-picker { display: inline-flex; align-items: center; gap: 6px;
-  font-size: 0.7rem; color: var(--text-secondary); flex-shrink: 0; position: relative; }
+/* ── Provider/model picker (shared by assistant + editor) ── */
+.ai-picker { display: inline-flex; align-items: center; gap: 8px;
+  font-size: 0.8rem; color: var(--text-secondary); flex-shrink: 0; position: relative; }
 .ai-picker-label { white-space: nowrap; }
-.ai-picker select { font-size: 0.7rem; background: var(--surface); color: var(--text-primary);
-  border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px; cursor: pointer; }
+.ai-picker select { font-size: 0.8rem; background: var(--surface); color: var(--text-primary);
+  border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; cursor: pointer;
+  min-height: 34px; }
+.ai-picker select:hover { border-color: var(--accent); }
+.ai-picker select:focus { border-color: var(--accent); outline: none; }
 /* Searchable model combobox. */
 .ai-picker-model-combo { position: relative; display: inline-flex; }
-.ai-picker-model-trigger { display: inline-flex; align-items: center; gap: 4px; max-width: 220px;
-  font-size: 0.7rem; background: var(--surface); color: var(--text-primary);
-  border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; cursor: pointer; }
-.ai-picker-model-trigger:hover { border-color: var(--accent); }
+.ai-picker-model-trigger { display: inline-flex; align-items: center; justify-content: space-between;
+  gap: 6px; max-width: 240px; min-width: 120px; min-height: 34px;
+  font-size: 0.8rem; background: var(--surface); color: var(--text-primary);
+  border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
+.ai-picker-model-trigger:hover, .ai-picker-model-trigger:focus { border-color: var(--accent); outline: none; }
 .ai-picker-model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ai-picker-model-chevron { opacity: 0.6; font-size: 0.6rem; }
+.ai-picker-model-chevron { opacity: 0.6; font-size: 0.7rem; flex-shrink: 0; }
 .ai-picker-model-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
   min-width: 220px; width: 340px; max-width: calc(100vw - 24px); 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; }
 .ai-picker-model-pop.hidden { display: none; }
-.ai-picker-model-search { width: 100%; box-sizing: border-box; font-size: 0.72rem;
+.ai-picker-model-search { width: 100%; box-sizing: border-box; font-size: 0.8rem;
   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: 240px; overflow-y: auto; display: flex; flex-direction: column; }
-.ai-picker-model-option { display: block; width: 100%; text-align: left; font-size: 0.78rem;
-  line-height: 1.3; padding: 5px 8px; border-radius: 5px; background: none; border: none;
+  border-radius: 6px; padding: 7px 10px; margin-bottom: 4px; }
+.ai-picker-model-search:focus { border-color: var(--accent); outline: none; }
+.ai-picker-model-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; }
+.ai-picker-model-option { display: block; width: 100%; text-align: left; font-size: 0.8rem;
+  line-height: 1.35; padding: 7px 10px; border-radius: 5px; background: none; border: none;
   color: var(--text-primary); cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
 .ai-picker-model-option:hover { background: var(--bg-hover); }
 .ai-picker-model-option.active { background: var(--bg-hover); box-shadow: inset 3px 0 0 var(--accent); }
-.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; }
+.ai-picker-model-empty { font-size: 0.78rem; color: var(--text-secondary); padding: 8px 10px; text-align: center; }
+.ai-picker-model-more { font-size: 0.78rem; color: var(--text-secondary); padding: 8px 10px; 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);
-  font-size: 0.85rem; line-height: 1; padding: 2px 4px; border-radius: 4px; }
+  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;