From ab766862a3f106a8a59f30bd95304b671ebee59d Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Fri, 18 Sep 2026 09:01:17 -0400 Subject: [PATCH] feat: redesign UI section Cles API IA - recherche, carte defaut, cartes depliables, footer sticky (#104) --- CHANGELOG.md | 34 ++- README.fr.md | 6 +- README.md | 6 +- VERSION | 2 +- desktop/Cargo.lock | 2 +- desktop/Cargo.toml | 2 +- desktop/tauri.conf.json | 2 +- docs/AI_ARCHITECTURE_GUIDE.md | 2 +- docs/ROADMAP.md | 2 +- docs/features/ai-keys-ui.md | 88 ++++++++ frontend/index.html | 279 +++++++------------------ frontend/js/ai.js | 19 ++ frontend/js/config.js | 168 +++++++++++---- frontend/locales/en.json | 8 + frontend/locales/fr.json | 8 + frontend/style.css | 259 ++++++++++++++++++++++- frontend/sw.js | 2 +- package.json | 2 +- tests/frontend/config-ai-keys.test.mjs | 241 +++++++++++++++++++++ 19 files changed, 876 insertions(+), 256 deletions(-) create mode 100644 docs/features/ai-keys-ui.md create mode 100644 tests/frontend/config-ai-keys.test.mjs diff --git a/CHANGELOG.md b/CHANGELOG.md index 334944c..396ab0a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ Format basé sur [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/), et [Semantic Versioning](https://semver.org/spec/v2.0.0.html). > **En cours de développement** : les changements à venir sont listés dans la section -> [Unreleased](#unreleased). La dernière version livrée est **2.11.6**. +> [Unreleased](#unreleased). La dernière version livrée est **2.12.0**. --- @@ -14,6 +14,38 @@ et [Semantic Versioning](https://semver.org/spec/v2.0.0.html). --- +## [2.12.0] — 2026-09-18 + +### Ajouté + +- **#104 - Configuration : redesign UI de la section « 🤖 Clés API Intelligence Artificielle »** : + la longue liste plate de champs devient une interface structurée et dépliable — + 1. **En-tête de section** : titre + sous-titre explicatifs et une **barre de recherche** + (`#cfg-ai-search`) pour filtrer les fournisseurs (normalisée, insensible à la casse et aux + accents), avec état vide « Aucun fournisseur ne correspond ». + 2. **Carte « Configuration par défaut »** visuellement distincte : grille **2 colonnes** + fournisseur / modèle par défaut, et **capacités du modèle rendues en badges colorés** + (nouveau `renderCapabilityBadges()` dans `frontend/js/ai.js`, uniquement les capacités + actives) au lieu des cases à cocher. + 3. **Fournisseurs d'API en cartes dépliables** (rendu dynamique depuis `AI_PROVIDER_NAMES` par + `_renderAIProviderCards()`, `frontend/js/config.js`) : état replié = logo (initiale), nom, + **badge de statut** (« Configuré » vert / « Non configuré » gris) et **corbeille discrète** + pour supprimer la clé (visible uniquement si configurée, confirmation conservée) ; état + déplié = libellés au-dessus des champs, **API key à 60 % / modèle à 40 %** (grille `3fr 2fr`). + Les boutons « Configuré/Supprimer » redondants à l'intérieur des champs disparaissent — le + statut vit désormais uniquement dans l'en-tête de la carte. + 4. **Barre d'actions** : « Sauvegarder » (primaire) et « Tester » (outline) dans un footer + **sticky** en bas de section, toujours accessible pendant le défilement, avec le statut de + test à côté. + Styles `.ai-keys-*` / `.ai-provider-*` en variables CSS (profondeur fond/carte, espacement + généreux, chevron animé, focus visible, responsive 1 colonne < 600 px) ; textes i18n FR/EN + (`config.ai_*`). Les ID d'éléments (`cfg--key/model/badge/delete`) et le + comportement de sauvegarde/test/suppression restent inchangés (rétrocompatible pickers IA). + Tests : `tests/frontend/config-ai-keys.test.mjs` (7 — rendu, badges, bascule, filtre, save, + suppression, badges de capacités). + +--- + ## [2.11.6] — 2026-09-18 ### Corrigé diff --git a/README.fr.md b/README.fr.md index e46a0cf..6d13bbd 100644 --- a/README.fr.md +++ b/README.fr.md @@ -4,7 +4,7 @@ **Porte d'entrée web ultra-léger pour vos vaults Obsidian** — Accédez, naviguez et recherchez dans toutes vos notes Obsidian depuis n'importe quel appareil via une interface web moderne et responsive. -[![Version](https://img.shields.io/badge/Version-2.11.6-blue.svg)]() +[![Version](https://img.shields.io/badge/Version-2.12.0-blue.svg)]() [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Docker](https://img.shields.io/badge/Docker-Ready-blue.svg)](https://www.docker.com/) [![Python](https://img.shields.io/badge/Python-3.11+-green.svg)](https://www.python.org/) @@ -926,8 +926,8 @@ Ce projet est sous licence **MIT** — voir le fichier [LICENSE](LICENSE) pour l ## 📝 Changelog -Consultez le [CHANGELOG.md](./CHANGELOG.md) pour l'historique complet de toutes les versions (v1.0.0 → v2.11.6). +Consultez le [CHANGELOG.md](./CHANGELOG.md) pour l'historique complet de toutes les versions (v1.0.0 → v2.12.0). --- -*Projet : ObsiGate | Version : 2.11.6 | Dernière mise à jour : Juin 2026* +*Projet : ObsiGate | Version : 2.12.0 | Dernière mise à jour : Juin 2026* diff --git a/README.md b/README.md index f3b3769..d400e66 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ **Ultra-light web gateway for your Obsidian vaults** — Access, browse, and search all your Obsidian notes from any device via a modern, responsive web interface. -[![Version](https://img.shields.io/badge/Version-2.11.6-blue.svg)]() +[![Version](https://img.shields.io/badge/Version-2.12.0-blue.svg)]() [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Docker](https://img.shields.io/badge/Docker-Ready-blue.svg)](https://www.docker.com/) [![Python](https://img.shields.io/badge/Python-3.11+-green.svg)](https://www.python.org/) @@ -1095,8 +1095,8 @@ This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) ## 📝 Changelog -See [CHANGELOG.md](./CHANGELOG.md) for the complete version history (v1.0.0 → v2.11.6). +See [CHANGELOG.md](./CHANGELOG.md) for the complete version history (v1.0.0 → v2.12.0). --- -*Project: ObsiGate | Version: 2.11.6 | Last updated: May 2026* +*Project: ObsiGate | Version: 2.12.0 | Last updated: May 2026* diff --git a/VERSION b/VERSION index 03b7bd6..d8b6989 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -2.11.6 +2.12.0 diff --git a/desktop/Cargo.lock b/desktop/Cargo.lock index 57b374c..68101e8 100644 --- a/desktop/Cargo.lock +++ b/desktop/Cargo.lock @@ -2626,7 +2626,7 @@ dependencies = [ [[package]] name = "obsigate-desktop" -version = "2.11.6" +version = "2.12.0" dependencies = [ "chrono", "env_logger", diff --git a/desktop/Cargo.toml b/desktop/Cargo.toml index 242d961..d512a6e 100644 --- a/desktop/Cargo.toml +++ b/desktop/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "obsigate-desktop" -version = "2.11.6" +version = "2.12.0" description = "ObsiGate Desktop — Porte d'entrée native pour vos vaults Obsidian" authors = ["Bruno Charest"] edition = "2021" diff --git a/desktop/tauri.conf.json b/desktop/tauri.conf.json index 100f855..890879d 100644 --- a/desktop/tauri.conf.json +++ b/desktop/tauri.conf.json @@ -1,7 +1,7 @@ { "$schema": "https://raw.githubusercontent.com/nicedoc/obsigate/main/desktop/tauri.conf.schema.json", "productName": "ObsiGate", - "version": "2.11.6", + "version": "2.12.0", "identifier": "com.obsigate.desktop", "build": { "frontendDist": "../frontend", diff --git a/docs/AI_ARCHITECTURE_GUIDE.md b/docs/AI_ARCHITECTURE_GUIDE.md index 1c05e37..98556c0 100644 --- a/docs/AI_ARCHITECTURE_GUIDE.md +++ b/docs/AI_ARCHITECTURE_GUIDE.md @@ -308,7 +308,7 @@ Pour répondre au besoin de cibler un fournisseur/modèle sans dépendre uniquem - Lecture : `backend/ai.py` (`_read_app_config`, `get_default_provider`, `_load_provider_keys`). - Écriture : `POST /api/config` (admin) — clés ajoutées à `_DEFAULT_CONFIG` (`backend/main.py:4270`). - Rechargement à chaud : `reload_ai_config()` met à jour `PROVIDERS` **en place** (les imports existants restent valides). -- UI : section « Clés API Intelligence Artificielle » (`frontend/index.html` `#cfg-ai`), sélecteurs « Fournisseur par défaut » + « Modèle par défaut », sauvegardés par `saveAIKeys()` (`frontend/js/config.js`). +- UI : section « Clés API Intelligence Artificielle » (`frontend/index.html` `#cfg-ai`, cartes dépliables par fournisseur — #104), sélecteurs « Fournisseur par défaut » + « Modèle par défaut », sauvegardés par `saveAIKeys()` (`frontend/js/config.js`). **Précédence de résolution du modèle** : override par requête > `ai_default_models[provider]` > variable d'environnement `*_MODEL` > défaut codé en dur. diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md index 639be3d..dd7db96 100644 --- a/docs/ROADMAP.md +++ b/docs/ROADMAP.md @@ -1,6 +1,6 @@ # ObsiGate — Roadmap -> **Version :** 2.11.6 | **Dernière mise à jour :** 2026-09-18 +> **Version :** 2.12.0 | **Dernière mise à jour :** 2026-09-18 > **Ce fichier ne contient que le travail à venir** (🔵 En cours + ⚪ Backlog) et un index compact > vers les fonctionnalités livrées. > - **Méthode de livraison à appliquer pour toute tâche : [DELIVERY_WORKFLOW.md](./DELIVERY_WORKFLOW.md)** diff --git a/docs/features/ai-keys-ui.md b/docs/features/ai-keys-ui.md new file mode 100644 index 0000000..f60cc6e --- /dev/null +++ b/docs/features/ai-keys-ui.md @@ -0,0 +1,88 @@ +# #104 — Configuration : Redesign UI de la section « Clés API Intelligence Artificielle » + +> **Statut :** ✅ livré (v2.12.0) · **Zone :** `frontend/index.html`, `frontend/js/config.js`, +> `frontend/js/ai.js`, `frontend/style.css`, `frontend/locales/{fr,en}.json` + +## Problème + +La section « 🤖 Clés API IA » du panneau de configuration était une longue liste plate de +champs de saisie (DeepSeek, OpenRouter, Gemini, NVIDIA, QwenCloud, Xiaomi, Mistral) sans +structure ni hiérarchie visuelle : les sélecteurs défaut, les clés et les modèles se +cotoyaient au même niveau, les badges « Configuré » étaient collés à chaque champ, et les +boutons d'action se perdaient en milieu de section. + +## Objectifs + +Interface plus professionnelle, mieux structurée, moins fatigante visuellement (style +SaaS moderne, dark mode, cartes + accordéons), et qui reste utilisable quand la liste de +fournisseurs s'allonge. + +## Structure livrée + +### 1. En-tête de section + +- Titre + sous-titre explicatif (i18n `config.ai_header_desc`). +- **Barre de recherche** (`#cfg-ai-search`) filtrant les cartes fournisseurs via + `filterAIProviders()` — normalisation insensible à la casse **et aux accents** + (`_sidebarNorm`), correspondance sur le nom affiché ou l'identifiant. État vide + « Aucun fournisseur ne correspond » (`#cfg-ai-providers-empty`). + +### 2. Carte « Configuration par défaut » + +- Carte visuellement distincte (`.ai-default-card`) : titre en petites capitales. +- Grille **2 colonnes** : « Fournisseur par défaut » / « Modèle par défaut » + (`#cfg-ai-default-provider`, `#cfg-ai-default-model`). +- **Capacités du modèle en badges colorés** : nouveau + `renderCapabilityBadges(caps)` (`frontend/js/ai.js`) qui n'affiche que les capacités + actives sous forme de tags (`.ai-cap-badge`), au lieu de la checklist ☑/□ + (`renderCapabilityList`, conservée pour les pickers de l'assistant). + +### 3. Fournisseurs d'API — cartes dépliables + +Rendu dynamique par `_renderAIProviderCards()` depuis `AI_PROVIDER_NAMES` + nouveau +`AI_PROVIDER_META` (nom affiché, placeholder spécifique au fournisseur). Par carte : + +- **Replié** : logo (initiale dans une pastille), nom, **badge de statut** + (« Configuré » vert / « Non configuré » gris, `.ai-provider-badge.configured`) et + **corbeille discrète** (`cfg--delete`, visible uniquement si une clé existe ; + `stopPropagation` pour ne pas déplier la carte ; confirmation conservée). +- **Déplié** : libellés **au-dessus** des champs (`.ai-field-label`), **API key à 60 % / + modèle à 40 %** (grille `3fr 2fr`), placeholder par fournisseur. +- Accessibilité : en-tête en `role="button"` + `tabindex="0"` (clavier Entrée/Espace), + `aria-expanded` synchronisé, chevron animé, focus visible. +- Les boutons « Configuré / × Supprimer » redondants dans les champs sont supprimés — + le statut vit dans l'en-tête de la carte. + +### 4. Barre d'actions + +- Footer **sticky** en bas de section (`.ai-keys-footer`) : « Sauvegarder » (primaire + `.config-btn-save`) et « Tester » (outline `.config-btn-secondary`), plus le span de + statut du test. Toujours accessible pendant le défilement du panneau. + +## Compatibilité + +- Les ID `cfg--key`, `cfg--model`, `cfg--badge`, + `cfg--delete`, `cfg-ai-default-*`, `cfg-ai-status` sont conservés : + `saveAIKeys()`, `testAIKeys()`, `deleteAIKey()` et le câblage des événements de + `initConfigModal()` ne changent pas, ni la resynchronisation des pickers IA + (`refreshAIPickers()` après save/suppression, BUG-043). +- i18n : nouvelles clés `config.ai_header_desc`, `config.ai_search_placeholder`, + `config.ai_default_section`, `config.ai_providers_title`, `config.ai_providers_empty`, + `config.ai_status_configured`, `config.ai_status_not_configured`, + `config.ai_delete_key_title` (FR + EN). + +## Styles + +`.ai-keys-*`, `.ai-provider-*`, `.ai-cap-badge`, `.ai-field*` — uniquement des variables +CSS existantes (`--surface`, `--bg-secondary`, `--border`, `--accent`, `--success`, +`--danger`, `--accent-bg`…), focus visibles, responsive 1 colonne < 600 px. + +## Tests + +- `tests/frontend/config-ai-keys.test.mjs` (JSDOM, 7 tests) : rendu des 7 cartes, + badges de statut selon les clés masquées renvoyées par `GET /api/config/ai-keys`, + bascule replié/déplié (classe `open` + `aria-expanded`), filtre de recherche + (casse/accents + état vide), collecte et POST des clés saisies par `saveAIKeys()`, + suppression avec confirmation (DELETE sur l'env name), badges de capacités. +- Suites existantes (38 modules, validate-imports, ai.test.mjs, sidebar-filters…) : vertes. +- E2E Playwright (chromium-desktop) : 91 passed / 3 skipped, 100 % sans retries. diff --git a/frontend/index.html b/frontend/index.html index 21db46f..2c4c0db 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2038,210 +2038,95 @@ - +
-

🤖 Cles API Intelligence Artificielle

-

- Configurez vos cles API. Cliquez sur - Tester pour charger les - modeles. -

-
- - +
+
+

🤖 Cles API Intelligence Artificielle

+

+ Configurez vos cles API fournisseur par fournisseur. Dépliez une carte pour saisir une + clé, puis cliquez sur Tester pour charger les + modeles. +

+
+
+ + +
-
- - + +
+
Configuration par defaut
+
+
+ + +
+
+ + +
+
+
+ Capacites du modele +
+
-
- +

-
-

-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - + Fournisseurs d'API +
+
+ Aucun fournisseur ne correspond +
+ +
diff --git a/frontend/js/ai.js b/frontend/js/ai.js index 3e92744..c2f88ab 100644 --- a/frontend/js/ai.js +++ b/frontend/js/ai.js @@ -82,6 +82,24 @@ function renderCapabilityList(caps) { return box; } +/** + * Render only the *enabled* capabilities as colored tags (#104). Used by the + * config panel where a compact read-only summary reads better than checkboxes. + */ +function renderCapabilityBadges(caps) { + const box = document.createElement('div'); + box.className = 'ai-caps-badges'; + if (!caps) return box; + AI_CAPABILITY_KEYS.forEach((key) => { + if (!caps[key]) return; + const item = document.createElement('span'); + item.className = 'ai-cap-badge'; + item.textContent = t(`ai.cap_${key}`); + box.appendChild(item); + }); + return box; +} + /** Accent-insensitive, case-insensitive normalization for model search. */ function _normalizeText(value) { return String(value || '') @@ -1019,6 +1037,7 @@ export { AI_CAPABILITY_KEYS, getModelCapabilities, renderCapabilityList, + renderCapabilityBadges, _buildPickerUI as buildAIPickerUI, refreshAIPickers, PICKER_SLOT_CLASS, diff --git a/frontend/js/config.js b/frontend/js/config.js index 80ab54c..c1ebe77 100644 --- a/frontend/js/config.js +++ b/frontend/js/config.js @@ -6,7 +6,7 @@ import { syncVaultSelectors, setSelectedVaultContext, refreshSidebarForContext, import { escapeHtml, safeCreateIcons } from './utils.js'; import { showToast, closeHeaderMenu, closeMobileSidebar } from './ui.js'; import { t, setLocale, getLocale } from './i18n.js'; -import { getModelCapabilities, renderCapabilityList, refreshAIPickers } from './ai.js'; +import { getModelCapabilities, renderCapabilityBadges, refreshAIPickers } from './ai.js'; let _recentTimestampTimer = null; let _recentFilesCache = []; @@ -766,6 +766,11 @@ function initConfigModal() { if (saveAIKeysBtn) saveAIKeysBtn.addEventListener("click", saveAIKeys); const testAIKeysBtn = document.getElementById("cfg-test-ai-keys"); if (testAIKeysBtn) testAIKeysBtn.addEventListener("click", testAIKeys); + // Provider search filter (#104) + const aiProviderSearch = document.getElementById("cfg-ai-search"); + if (aiProviderSearch) { + aiProviderSearch.addEventListener("input", () => filterAIProviders(aiProviderSearch.value)); + } // Tool & connected-source keys (#103) const saveToolKeysBtn = document.getElementById("cfg-save-tool-keys"); if (saveToolKeysBtn) saveToolKeysBtn.addEventListener("click", saveToolKeys); @@ -1510,7 +1515,7 @@ function updateRegexPreview() { } -// ── AI Keys management ── +// ── AI Keys management (#104 — accordion redesign) ── const AI_KEY_MAP = { "cfg-deepseek-key": "DEEPSEEK_API_KEY", "cfg-openrouter-key": "OPENROUTER_API_KEY", @@ -1522,57 +1527,140 @@ const AI_KEY_MAP = { }; const AI_PROVIDER_NAMES = ["deepseek","openrouter","gemini","nvidia","qwencloud","xiaomi","mistral"]; -function _ensureAIKeyUI() { - for (const [inputId] of Object.entries(AI_KEY_MAP)) { - const input = document.getElementById(inputId); - if (!input) continue; - const row = input.closest(".config-row"); - if (!row || row.dataset.enhanced) continue; - row.dataset.enhanced = "1"; - row.style.cssText += "display:flex;align-items:center;gap:8px;flex-wrap:wrap;"; - const badge = document.createElement("span"); - badge.id = inputId.replace("-key", "-badge"); - badge.style.cssText = "font-size:11px;padding:2px 8px;border-radius:10px;white-space:nowrap;"; - row.appendChild(badge); - const delBtn = document.createElement("button"); - delBtn.type = "button"; - delBtn.id = inputId.replace("-key", "-delete"); - delBtn.className = "config-btn-secondary"; - delBtn.style.cssText = "font-size:11px;padding:4px 10px;color:var(--danger,#e74c3c);border-color:var(--danger,#e74c3c);cursor:pointer;display:none;"; - delBtn.textContent = "\u00d7 Supprimer"; - delBtn.addEventListener("click", () => deleteAIKey(inputId)); - row.appendChild(delBtn); +// Display metadata for the provider accordion cards (#104). +const AI_PROVIDER_META = { + deepseek: { name: "DeepSeek", placeholder: "sk-..." }, + openrouter: { name: "OpenRouter", placeholder: "sk-or-..." }, + gemini: { name: "Gemini", placeholder: "AIza..." }, + nvidia: { name: "NVIDIA", placeholder: "nvapi-..." }, + qwencloud: { name: "QwenCloud", placeholder: "sk-..." }, + xiaomi: { name: "Xiaomi", placeholder: "xm-..." }, + mistral: { name: "Mistral", placeholder: "sk-..." }, +}; + +function _renderAIProviderCards() { + const host = document.getElementById("cfg-ai-providers"); + if (!host) return; + host.innerHTML = ""; + for (const p of AI_PROVIDER_NAMES) { + const meta = AI_PROVIDER_META[p] || { name: p, placeholder: "sk-..." }; + const card = el("div", { class: "ai-provider-card", "data-provider": p }); + + // Header row (div + role=button so the per-provider delete button can + // live inside without nesting two interactive elements). + const head = el("div", { + class: "ai-provider-head", + role: "button", + tabindex: "0", + "aria-expanded": "false", + }); + head.appendChild(el("span", { class: "ai-provider-logo", "aria-hidden": "true" }, [document.createTextNode(meta.name.charAt(0))])); + head.appendChild(el("span", { class: "ai-provider-name" }, [document.createTextNode(meta.name)])); + head.appendChild(el("span", { class: "ai-provider-badge", id: `cfg-${p}-badge` })); + const delBtn = el("button", { + type: "button", + class: "ai-provider-delete", + id: `cfg-${p}-delete`, + title: t("config.ai_delete_key_title"), + }); + delBtn.style.display = "none"; + delBtn.appendChild(icon("trash-2", 14)); + delBtn.addEventListener("click", (e) => { + e.stopPropagation(); + deleteAIKey(`cfg-${p}-key`); + }); + head.appendChild(delBtn); + const chevron = icon("chevron-down", 16); + chevron.classList.add("ai-provider-chevron"); + head.appendChild(chevron); + + const toggle = () => _toggleAICard(card); + head.addEventListener("click", toggle); + head.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); } + }); + + // Collapsible body: API key (60%) + model (40%), labels above inputs. + const body = el("div", { class: "ai-provider-body hidden" }); + const fields = el("div", { class: "ai-provider-fields" }); + + const keyField = el("div", { class: "ai-field ai-field-key" }); + keyField.appendChild(el("label", { class: "ai-field-label", for: `cfg-${p}-key` }, [document.createTextNode(`${meta.name} API Key`)])); + const keyInput = document.createElement("input"); + keyInput.type = "password"; + keyInput.id = `cfg-${p}-key`; + keyInput.className = "config-input"; + keyInput.placeholder = meta.placeholder; + keyInput.autocomplete = "off"; + keyField.appendChild(keyInput); + + const modelField = el("div", { class: "ai-field ai-field-model" }); + modelField.appendChild(el("label", { class: "ai-field-label", for: `cfg-${p}-model` }, [document.createTextNode(t("config.ai_model"))])); + const modelSel = document.createElement("select"); + modelSel.id = `cfg-${p}-model`; + modelSel.className = "config-select"; + modelSel.innerHTML = ''; + modelField.appendChild(modelSel); + + fields.appendChild(keyField); + fields.appendChild(modelField); + body.appendChild(fields); + + card.appendChild(head); + card.appendChild(body); + host.appendChild(card); } + safeCreateIcons(); +} + +function _toggleAICard(card) { + const open = card.classList.toggle("open"); + const body = card.querySelector(".ai-provider-body"); + if (body) body.classList.toggle("hidden", !open); + const head = card.querySelector(".ai-provider-head"); + if (head) head.setAttribute("aria-expanded", open ? "true" : "false"); +} + +/** Filter the provider accordion cards by the section search input (#104). */ +export function filterAIProviders(query) { + const host = document.getElementById("cfg-ai-providers"); + const emptyMsg = document.getElementById("cfg-ai-providers-empty"); + if (!host) return; + const q = _sidebarNorm(query); + let visible = 0; + host.querySelectorAll(".ai-provider-card").forEach((card) => { + const p = card.dataset.provider; + const meta = AI_PROVIDER_META[p] || { name: p }; + const match = !q || _sidebarNorm(meta.name).includes(q) || p.includes(q); + card.style.display = match ? "" : "none"; + if (match) visible++; + }); + if (emptyMsg) emptyMsg.classList.toggle("hidden", visible > 0); } function _setAIKeyBadge(inputId, hasKey) { - const badge = document.getElementById(inputId.replace("-key", "-badge")); - const delBtn = document.getElementById(inputId.replace("-key", "-delete")); + const provider = inputId.replace("-key", ""); + const badge = document.getElementById(`${provider}-badge`); + const delBtn = document.getElementById(`${provider}-delete`); if (badge) { - if (hasKey) { - badge.textContent = "\u2713 Configur\u00e9"; - badge.style.background = "var(--success-bg, #27ae6022)"; - badge.style.color = "var(--success, #27ae60)"; - badge.style.border = "1px solid var(--success, #27ae60)"; - } else { - badge.textContent = "Non configur\u00e9"; - badge.style.background = "var(--muted-bg, #ffffff10)"; - badge.style.color = "var(--text-muted, #888)"; - badge.style.border = "1px solid var(--border, #444)"; - } + badge.textContent = hasKey + ? "\u2713 " + t("config.ai_status_configured") + : t("config.ai_status_not_configured"); + badge.classList.toggle("configured", !!hasKey); } - if (delBtn) delBtn.style.display = hasKey ? "inline-block" : "none"; + if (delBtn) delBtn.style.display = hasKey ? "inline-flex" : "none"; } async function loadAIKeys() { - _ensureAIKeyUI(); + _renderAIProviderCards(); try { const data = await api("/api/config/ai-keys"); for (const [inputId, envName] of Object.entries(AI_KEY_MAP)) { const input = document.getElementById(inputId); const val = data[envName] || ""; if (input) { - input.placeholder = val || (inputId.includes("gemini") ? "AIza..." : inputId.includes("openrouter") ? "sk-or-..." : "sk-..."); + const meta = AI_PROVIDER_META[inputId.replace("-key", "")] || {}; + input.placeholder = val || meta.placeholder || "sk-..."; } _setAIKeyBadge(inputId, !!val); } @@ -1626,7 +1714,7 @@ async function _renderConfigModelCaps(provider, model) { if (!provider || !model) return; const caps = await getModelCapabilities(provider, model); if (!caps) return; - host.appendChild(renderCapabilityList(caps)); + host.appendChild(renderCapabilityBadges(caps)); } async function saveAIKeys() { @@ -1830,6 +1918,8 @@ export { initProfile, switchSidebarTab, populateVersions, + loadAIKeys, + saveAIKeys, }; // Populate every version display (header badge, About modal, help guide footer) diff --git a/frontend/locales/en.json b/frontend/locales/en.json index 9103940..a7a58cc 100644 --- a/frontend/locales/en.json +++ b/frontend/locales/en.json @@ -363,6 +363,14 @@ "config.ai_keys_desc": "Configure API keys for the AI editor.", "config.ai_model": "Model", "config.ai_openrouter_label": "OpenRouter API Key", + "config.ai_header_desc": "Configure your API keys provider by provider. Expand a card to enter a key, then click Test to load the models.", + "config.ai_search_placeholder": "Search a provider…", + "config.ai_default_section": "Default configuration", + "config.ai_providers_title": "API providers", + "config.ai_providers_empty": "No matching provider", + "config.ai_status_configured": "Configured", + "config.ai_status_not_configured": "Not configured", + "config.ai_delete_key_title": "Delete the API key", "config.api_keys_saved": "API keys saved", "config.section_sources": "🔗 Connected sources & search", "config.sources_desc": "Keys used by the AI assistant tools (keyed web search: Tavily, Brave, SerpAPI, Exa; connected sources: Gitea, GitHub). They are stored server-side and take precedence over environment variables.", diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json index aa37ede..0a506fc 100644 --- a/frontend/locales/fr.json +++ b/frontend/locales/fr.json @@ -363,6 +363,14 @@ "config.ai_keys_desc": "Configurez les clés API pour l'éditeur IA.", "config.ai_model": "Modèle", "config.ai_openrouter_label": "OpenRouter API Key", + "config.ai_header_desc": "Configurez vos clés API fournisseur par fournisseur. Dépliez une carte pour saisir une clé, puis cliquez sur Tester pour charger les modèles.", + "config.ai_search_placeholder": "Rechercher un fournisseur…", + "config.ai_default_section": "Configuration par défaut", + "config.ai_providers_title": "Fournisseurs d'API", + "config.ai_providers_empty": "Aucun fournisseur ne correspond", + "config.ai_status_configured": "Configuré", + "config.ai_status_not_configured": "Non configuré", + "config.ai_delete_key_title": "Supprimer la clé API", "config.api_keys_saved": "Clés API sauvegardées", "config.section_sources": "🔗 Sources connectées & recherche", "config.sources_desc": "Clés utilisées par les outils de l'Assistant IA (recherche web à clé : Tavily, Brave, SerpAPI, Exa ; sources connectées : Gitea, GitHub). Elles sont stockées sur le serveur et priment sur les variables d'environnement.", diff --git a/frontend/style.css b/frontend/style.css index 7599197..05748c0 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -1474,10 +1474,11 @@ select { max-width: 1200px; } -/* Full-bleed viewers (PDF, images) must use the whole width when the - navigation sidebar is hidden instead of the centered reading column. */ +/* Full-bleed viewers (PDF, images, Excalidraw) must use the whole width when + the navigation sidebar is hidden instead of the centered reading column. */ .sidebar.hidden ~ .content-wrapper .content-area:has(.pdf-viewer-container), -.sidebar.hidden ~ .content-wrapper .content-area:has(.image-viewer-container) { +.sidebar.hidden ~ .content-wrapper .content-area:has(.image-viewer-container), +.sidebar.hidden ~ .content-wrapper .content-area:has(iframe[src*="excalidraw-editor.html"]) { margin: 0; max-width: none; } @@ -4346,6 +4347,258 @@ body.resizing-v { background: var(--bg-hover); } +/* --- AI keys section: accordion redesign (#104) --- */ +.ai-keys-header { + display: flex; + flex-wrap: wrap; + gap: 12px; + align-items: flex-start; + justify-content: space-between; + margin-bottom: 18px; +} +.ai-keys-header-text { + flex: 1 1 320px; + min-width: 0; +} +.ai-keys-header-text h2 { + margin-bottom: 4px; +} +.ai-keys-search { + position: relative; + flex: 0 1 260px; + min-width: 200px; +} +.ai-keys-search .icon { + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + width: 14px; + height: 14px; + color: var(--text-muted); + pointer-events: none; +} +.ai-keys-search input { + width: 100%; + padding: 8px 12px 8px 32px; + border: 1px solid var(--border); + border-radius: 8px; + background: var(--bg-secondary); + color: var(--text-primary); + font-size: 0.8rem; + outline: none; + transition: border-color 150ms ease; +} +.ai-keys-search input:focus { + border-color: var(--accent); +} + +.ai-card-title { + font-size: 0.72rem; + font-weight: 600; + letter-spacing: 0.6px; + text-transform: uppercase; + color: var(--text-secondary); +} + +.ai-default-card { + background: var(--surface, #1e1e24); + border: 1px solid var(--border); + border-radius: 10px; + padding: 16px 18px; + margin-bottom: 22px; +} +.ai-default-card > .ai-card-title { + margin-bottom: 12px; +} +.ai-default-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; + margin-bottom: 12px; +} + +.ai-field { + display: flex; + flex-direction: column; + gap: 6px; + min-width: 0; +} +.ai-field-label { + font-size: 0.75rem; + font-weight: 500; + color: var(--text-secondary); + letter-spacing: 0.2px; +} +.ai-field .config-select, +.ai-field .config-input { + width: 100%; +} +.ai-caps-badges { + display: flex; + flex-wrap: wrap; + gap: 6px; + min-height: 22px; +} +.ai-cap-badge { + display: inline-flex; + align-items: center; + padding: 3px 10px; + border-radius: 999px; + font-size: 0.7rem; + font-weight: 600; + background: var(--accent-bg); + color: var(--accent); + border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); +} + +.ai-providers-header { + margin: 0 0 10px; +} +.ai-providers-list { + display: flex; + flex-direction: column; + gap: 8px; +} +.ai-provider-card { + background: var(--surface, #1e1e24); + border: 1px solid var(--border); + border-radius: 10px; + transition: border-color 150ms ease; +} +.ai-provider-card:hover { + border-color: var(--border-md); +} +.ai-provider-card.open { + border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); +} +.ai-provider-head { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 14px; + cursor: pointer; + user-select: none; + border-radius: 10px; +} +.ai-provider-head:focus-visible { + outline: 2px solid var(--accent); + outline-offset: -2px; +} +.ai-provider-logo { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border-radius: 8px; + background: var(--accent-bg); + color: var(--accent); + font-weight: 700; + font-size: 0.85rem; + flex: none; +} +.ai-provider-name { + flex: 1; + font-size: 0.88rem; + font-weight: 600; + color: var(--text-primary); + min-width: 0; +} +.ai-provider-badge { + font-size: 0.68rem; + padding: 2px 9px; + border-radius: 999px; + white-space: nowrap; + background: var(--muted-bg, rgba(255, 255, 255, 0.06)); + color: var(--text-muted); + border: 1px solid var(--border); +} +.ai-provider-badge.configured { + background: var(--success-bg); + color: var(--success); + border-color: color-mix(in srgb, var(--success) 40%, transparent); +} +.ai-provider-delete { + display: inline-flex; + align-items: center; + justify-content: center; + width: 26px; + height: 26px; + border: none; + border-radius: 6px; + background: transparent; + color: var(--text-muted); + cursor: pointer; + flex: none; + transition: color 150ms ease, background 150ms ease; +} +.ai-provider-delete:hover { + color: var(--danger); + background: var(--danger-bg); +} +.ai-provider-chevron { + flex: none; + color: var(--text-muted); + transition: transform 200ms ease; +} +.ai-provider-card.open .ai-provider-chevron { + transform: rotate(180deg); +} +.ai-provider-body { + padding: 0 14px 14px; +} +.ai-provider-body.hidden { + display: none; +} +.ai-provider-fields { + display: grid; + grid-template-columns: 3fr 2fr; + gap: 12px; + padding-top: 12px; + border-top: 1px solid var(--border); +} +.ai-providers-empty { + padding: 14px; + text-align: center; + color: var(--text-muted); + font-size: 0.8rem; + border: 1px dashed var(--border); + border-radius: 10px; +} +.ai-keys-footer { + position: sticky; + bottom: 0; + z-index: 5; + display: flex; + align-items: center; + gap: 12px; + flex-wrap: wrap; + margin-top: 20px; + padding: 12px 16px; + background: var(--surface, #1e1e24); + border: 1px solid var(--border); + border-radius: 10px; + box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25); +} +.ai-keys-status { + flex: 1; + font-size: 0.75rem; + color: var(--text-muted); + min-width: 0; +} + +@media (max-width: 600px) { + .ai-default-grid, + .ai-provider-fields { + grid-template-columns: 1fr; + } + .ai-keys-search { + flex: 1 1 100%; + } +} + + /* --- Config diagnostics panel --- */ .config-diagnostics { background: var(--code-bg); diff --git a/frontend/sw.js b/frontend/sw.js index caa78fe..b594cb2 100644 --- a/frontend/sw.js +++ b/frontend/sw.js @@ -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 = 'v20'; +const SW_VERSION = 'v21'; const CODE_CACHE = `obsigate-code-${SW_VERSION}`; const RUNTIME_CACHE = `obsigate-runtime-${SW_VERSION}`; const API_CACHE = `obsigate-api-${SW_VERSION}`; diff --git a/package.json b/package.json index 6d6e880..41b5cdb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "obsigate", - "version": "2.11.6", + "version": "2.12.0", "description": "**Porte d'entrée web ultra-léger pour vos vaults Obsidian** — Accédez, naviguez et recherchez dans toutes vos notes Obsidian depuis n'importe quel appareil via une interface web moderne et responsive.", "main": "patch.js", "directories": { diff --git a/tests/frontend/config-ai-keys.test.mjs b/tests/frontend/config-ai-keys.test.mjs new file mode 100644 index 0000000..e589753 --- /dev/null +++ b/tests/frontend/config-ai-keys.test.mjs @@ -0,0 +1,241 @@ +#!/usr/bin/env node +/** + * ObsiGate - JSDOM tests for the AI keys section redesign in the config + * panel (#104): provider accordion cards, status badges, delete button, + * provider search filter, save collection and capability badges. + * + * Usage: node tests/frontend/config-ai-keys.test.mjs + */ + +import { strict as assert } from "node:assert"; +import { JSDOM } from "jsdom"; +import { readFileSync } from "node:fs"; +import { fileURLToPath, pathToFileURL } from "node:url"; +import path from "node:path"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +const JS_DIR = path.resolve(__dirname, "..", "..", "frontend", "js"); + +const dom = new JSDOM( + ` + +
+ + + +
+
+ + + + +
+`, + { url: "http://localhost/", pretendToBeVisual: true }, +); + +const w = dom.window; +globalThis.window = w; +globalThis.document = w.document; +globalThis.HTMLElement = w.HTMLElement; +globalThis.Element = w.Element; +globalThis.Node = w.Node; +globalThis.Event = w.Event; +globalThis.CustomEvent = w.CustomEvent; +globalThis.KeyboardEvent = w.KeyboardEvent; +globalThis.localStorage = w.localStorage; +globalThis.sessionStorage = w.sessionStorage; +Object.defineProperty(globalThis, "navigator", { + value: w.navigator, + configurable: true, + writable: true, +}); +globalThis.MutationObserver = w.MutationObserver; +globalThis.getComputedStyle = w.getComputedStyle.bind(w); +globalThis.requestAnimationFrame = (cb) => setTimeout(cb, 0); +globalThis.cancelAnimationFrame = (id) => clearTimeout(id); + +let testCount = 0; +let passCount = 0; + +async function test(name, fn) { + testCount++; + try { + await fn(); + passCount++; + console.log(` ✓ ${name}`); + } catch (err) { + console.error(` ✗ ${name}\n ${err.message}`); + process.exitCode = 1; + } +} + +// ── Fetch mocks ──────────────────────────────────────────────────────────── +const POSTS = []; +const MASKED_KEYS = { + DEEPSEEK_API_KEY: "sk-…abcd", + MISTRAL_API_KEY: "sk-…mist", +}; +// Real FR locale served for /static/locales/fr.json so t() assertions work. +const FR_LOCALE = JSON.parse( + readFileSync(path.resolve(JS_DIR, "..", "locales", "fr.json"), "utf8"), +); + +globalThis.fetch = async (url, opts = {}) => { + const u = String(url); + const method = (opts.method || "GET").toUpperCase(); + if (method === "POST") POSTS.push({ url: u, body: opts.body || "" }); + if (u.includes("/static/locales/fr.json")) { + return { ok: true, status: 200, json: async () => FR_LOCALE }; + } + if (u.includes("/api/config/ai-keys/test")) { + return { ok: true, status: 200, json: async () => ({}) }; + } + if (u.includes("/api/config/ai-keys")) { + return { ok: true, status: 200, json: async () => MASKED_KEYS }; + } + if (u.endsWith("/api/config") && method === "GET") { + return { + ok: true, + status: 200, + json: async () => ({ ai_default_provider: "deepseek", ai_default_models: {} }), + }; + } + if (u.includes("/api/config/ai-models")) { + return { + ok: true, + status: 200, + json: async () => ({ models: ["deepseek-chat", "deepseek-reasoner"] }), + }; + } + if (u.includes("/api/ai/model-capabilities")) { + return { + ok: true, + status: 200, + json: async () => ({ capabilities: { chat: true, vision: true, embeddings: false } }), + }; + } + return { ok: true, status: 200, json: async () => ({}) }; +}; + +const configMod = await import(pathToFileURL(path.join(JS_DIR, "config.js")).href); +const aiMod = await import(pathToFileURL(path.join(JS_DIR, "ai.js")).href); +const i18nMod = await import(pathToFileURL(path.join(JS_DIR, "i18n.js")).href); +await i18nMod.initI18n(); +const { loadAIKeys, saveAIKeys, filterAIProviders } = configMod; +const { renderCapabilityBadges } = aiMod; + +const cards = () => Array.from(document.querySelectorAll("#cfg-ai-providers .ai-provider-card")); +const visibleCards = () => cards().filter((c) => c.style.display !== "none"); + +console.log("AI keys section redesign (#104) — accordion, badges, filter, save"); + +await test("loadAIKeys renders one accordion card per provider", async () => { + await loadAIKeys(); + assert.equal(cards().length, 7, "seven provider cards rendered"); + assert.equal( + document.querySelector('[data-provider="deepseek"] .ai-provider-name').textContent, + "DeepSeek", + "display name rendered in the card header", + ); + assert.equal( + document.querySelector('[data-provider="deepseek"] .ai-provider-logo').textContent, + "D", + "logo shows the provider initial", + ); + assert.ok( + document.getElementById("cfg-deepseek-key") && + document.getElementById("cfg-deepseek-model"), + "key input and model select are rendered inside the card body", + ); +}); + +await test("status badges reflect the stored keys (header only)", async () => { + const okBadge = document.getElementById("cfg-deepseek-badge"); + const koBadge = document.getElementById("cfg-gemini-badge"); + assert.ok(okBadge.textContent.includes("Configuré"), "configured label shown"); + assert.ok(okBadge.classList.contains("configured"), "configured badge styled"); + assert.ok(koBadge.textContent.includes("Non configuré"), "not-configured label shown"); + assert.ok(!koBadge.classList.contains("configured"), "not-configured badge neutral"); + const del = document.getElementById("cfg-deepseek-delete"); + const delKo = document.getElementById("cfg-gemini-delete"); + assert.equal(del.style.display, "inline-flex", "trash visible when configured"); + assert.equal(delKo.style.display, "none", "trash hidden when not configured"); +}); + +await test("clicking a card header toggles its body", async () => { + const card = document.querySelector('[data-provider="gemini"]'); + const head = card.querySelector(".ai-provider-head"); + const body = card.querySelector(".ai-provider-body"); + assert.ok(body.classList.contains("hidden"), "body collapsed by default"); + head.dispatchEvent(new w.Event("click", { bubbles: true })); + assert.ok(!body.classList.contains("hidden"), "body expanded after click"); + assert.equal(card.classList.contains("open"), true, "card flagged open"); + assert.equal(head.getAttribute("aria-expanded"), "true", "aria-expanded synced"); + head.dispatchEvent(new w.Event("click", { bubbles: true })); + assert.ok(body.classList.contains("hidden"), "body collapsed again"); +}); + +await test("filterAIProviders narrows cards case/accent-insensitively", async () => { + filterAIProviders("MISTRAL"); + assert.equal(visibleCards().length, 1, "one card matches 'MISTRAL'"); + filterAIProviders("qwencloud"); + assert.equal(visibleCards().length, 1, "one card matches 'qwencloud'"); + filterAIProviders("zzz-inexistant"); + assert.equal(visibleCards().length, 0, "no card matches"); + assert.ok( + !document.getElementById("cfg-ai-providers-empty").classList.contains("hidden"), + "empty-state message shown when nothing matches", + ); + filterAIProviders(""); + assert.equal(visibleCards().length, 7, "clearing restores all cards"); + assert.ok( + document.getElementById("cfg-ai-providers-empty").classList.contains("hidden"), + "empty-state message hidden again", + ); +}); + +await test("saveAIKeys collects typed keys and posts them", async () => { + POSTS.length = 0; + const geminiInput = document.getElementById("cfg-gemini-key"); + geminiInput.value = " test-gemini-key "; + await saveAIKeys(); + const aiPost = POSTS.find((p) => p.url.includes("/api/config/ai-keys") && p.url.includes("/test") === false); + assert.ok(aiPost, "a POST was sent to /api/config/ai-keys"); + const sent = JSON.parse(aiPost.body); + assert.equal(sent.GEMINI_API_KEY, "test-gemini-key", "trimmed key sent under its env name"); + assert.ok(!sent.DEEPSEEK_API_KEY, "empty inputs are not re-sent"); +}); + +await test("delete button calls deleteAIKey with confirmation", async () => { + let deleted = null; + let confirmed = false; + globalThis.confirm = () => { confirmed = true; return true; }; + const origFetch = globalThis.fetch; + globalThis.fetch = async (url, opts = {}) => { + const u = String(url); + if ((opts.method || "").toUpperCase() === "DELETE" && u.includes("/api/config/ai-keys/")) { + deleted = u; + return { ok: true, status: 200, json: async () => ({}) }; + } + return origFetch(url, opts); + }; + document.getElementById("cfg-deepseek-delete").click(); + assert.ok(confirmed, "a confirmation was requested"); + assert.ok(deleted && deleted.includes("DEEPSEEK_API_KEY"), "DELETE sent for the provider env key"); + globalThis.fetch = origFetch; +}); + +await test("renderCapabilityBadges renders only enabled capabilities", () => { + const box = renderCapabilityBadges({ chat: true, vision: true, embeddings: false }); + const badges = Array.from(box.querySelectorAll(".ai-cap-badge")); + assert.equal(badges.length, 2, "only enabled capabilities rendered"); + assert.equal(box.className, "ai-caps-badges", "badge box class applied"); +}); + +// ── Summary ── +console.log(`\n${passCount}/${testCount} tests passed`); +if (passCount !== testCount) { + process.exit(1); +}