feat: redesign UI section Cles API IA - recherche, carte defaut, cartes depliables, footer sticky (#104)

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-<provider>-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é

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*

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*

VERSION

@@ -1 +1 @@
-2.11.6
+2.12.0

desktop/Cargo.lock

@@ -2626,7 +2626,7 @@ dependencies = [
 
 [[package]]
 name = "obsigate-desktop"
-version = "2.11.6"
+version = "2.12.0"
 dependencies = [
  "chrono",
  "env_logger",

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"

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",

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.
 

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)**

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-<provider>-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-<provider>-key`, `cfg-<provider>-model`, `cfg-<provider>-badge`,
+  `cfg-<provider>-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.

frontend/index.html

@@ -2038,210 +2038,95 @@
                                 </button>
                             </section>
 
-                            <!-- Cles API AI -->
+                            <!-- Cles API AI (#104 — accordéon fournisseurs) -->
                             <section
                                 class="config-section help-section"
                                 id="cfg-ai"
                             >
-                                <h2>🤖 Cles API Intelligence Artificielle</h2>
+                                <div class="ai-keys-header">
-                                <p class="config-description">
+                                    <div class="ai-keys-header-text">
-                                    Configurez vos cles API. Cliquez sur
+                                        <h2 data-i18n="config.section_cles-api-intelligence-artificielle">🤖 Cles API Intelligence Artificielle</h2>
-                                    <strong data-i18n="config.test">Tester</strong> pour charger les
+                                        <p class="config-description" data-i18n="config.ai_header_desc">
-                                    modeles.
+                                            Configurez vos cles API fournisseur par fournisseur. Dépliez une carte pour saisir une
-                                </p>
+                                            clé, puis cliquez sur <strong data-i18n="config.test">Tester</strong> pour charger les
-                                <div class="config-row">
+                                            modeles.
-                                    <label
+                                        </p>
-                                        class="config-label"
+                                    </div>
-                                        for="cfg-ai-default-provider"
+                                    <div class="ai-keys-search">
-                                        data-i18n="config.ai_default_provider"
+                                        <i data-lucide="search" class="icon"></i>
-                                        >Fournisseur par defaut</label
+                                        <input
-                                    >
+                                            type="search"
-                                    <select
+                                            id="cfg-ai-search"
-                                        id="cfg-ai-default-provider"
+                                            data-i18n-placeholder="config.ai_search_placeholder"
-                                        class="config-select"
+                                            placeholder="Rechercher un fournisseur…"
-                                        style="width: 200px"
+                                            autocomplete="off"
-                                    >
+                                        />
-                                        <option value="">--</option>
+                                    </div>
-                                    </select>
                                 </div>
-                                <div class="config-row">
+
-                                    <label
+                                <div class="ai-default-card">
-                                        class="config-label"
+                                    <div class="ai-card-title" data-i18n="config.ai_default_section">Configuration par defaut</div>
-                                        for="cfg-ai-default-model"
+                                    <div class="ai-default-grid">
-                                        data-i18n="config.ai_default_model"
+                                        <div class="ai-field">
-                                        >Modele par defaut</label
+                                            <label
-                                    >
+                                                class="ai-field-label"
-                                    <select
+                                                for="cfg-ai-default-provider"
-                                        id="cfg-ai-default-model"
+                                                data-i18n="config.ai_default_provider"
-                                        class="config-select"
+                                                >Fournisseur par defaut</label
-                                        style="width: 220px"
+                                            >
-                                    >
+                                            <select
-                                        <option value="">--</option>
+                                                id="cfg-ai-default-provider"
-                                    </select>
+                                                class="config-select"
+                                            >
+                                                <option value="">--</option>
+                                            </select>
+                                        </div>
+                                        <div class="ai-field">
+                                            <label
+                                                class="ai-field-label"
+                                                for="cfg-ai-default-model"
+                                                data-i18n="config.ai_default_model"
+                                                >Modele par defaut</label
+                                            >
+                                            <select
+                                                id="cfg-ai-default-model"
+                                                class="config-select"
+                                            >
+                                                <option value="">--</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                    <div class="ai-field">
+                                        <span
+                                            class="ai-field-label"
+                                            data-i18n="config.ai_capabilities"
+                                            >Capacites du modele</span
+                                        >
+                                        <div
+                                            id="cfg-ai-default-model-caps"
+                                            class="ai-caps-badges"
+                                        ></div>
+                                    </div>
                                 </div>
-                                <div class="config-row" style="align-items: flex-start">
+
-                                    <label
+                                <div class="ai-providers-header">
-                                        class="config-label"
+                                    <h3
-                                        data-i18n="config.ai_capabilities"
+                                        class="ai-card-title"
-                                        >Capacites du modele</label
+                                        data-i18n="config.ai_providers_title"
                                     >
-                                    <div
+                                        Fournisseurs d'API
-                                        id="cfg-ai-default-model-caps"
+                                    </h3>
-                                        class="ai-picker-caps"
-                                        style="flex: 1"
-                                    ></div>
-                                </div>
-                                <div class="config-row">
-                                    <label
-                                        class="config-label"
-                                        for="cfg-deepseek-key"
-                                        >DeepSeek API Key</label
-                                    >
-                                    <input
-                                        type="password"
-                                        id="cfg-deepseek-key"
-                                        class="config-input"
-                                        placeholder="sk-..."
-                                        autocomplete="off"
-                                    />
-                                    <select
-                                        id="cfg-deepseek-model"
-                                        class="config-select"
-                                        style="width: 200px"
-                                    >
-                                        <option value="">-- Modele --</option>
-                                    </select>
-                                </div>
-                                <div class="config-row">
-                                    <label
-                                        class="config-label"
-                                        for="cfg-openrouter-key"
-                                        >OpenRouter API Key</label
-                                    >
-                                    <input
-                                        type="password"
-                                        id="cfg-openrouter-key"
-                                        class="config-input"
-                                        placeholder="sk-or-..."
-                                        autocomplete="off"
-                                    />
-                                    <select
-                                        id="cfg-openrouter-model"
-                                        class="config-select"
-                                        style="width: 200px"
-                                    >
-                                        <option value="">-- Modele --</option>
-                                    </select>
-                                </div>
-                                <div class="config-row">
-                                    <label
-                                        class="config-label"
-                                        for="cfg-gemini-key"
-                                        >Gemini API Key</label
-                                    >
-                                    <input
-                                        type="password"
-                                        id="cfg-gemini-key"
-                                        class="config-input"
-                                        placeholder="AIza..."
-                                        autocomplete="off"
-                                    />
-                                    <select
-                                        id="cfg-gemini-model"
-                                        class="config-select"
-                                        style="width: 200px"
-                                    >
-                                        <option value="">-- Modele --</option>
-                                    </select>
-                                </div>
-                                <div class="config-row">
-                                    <label
-                                        class="config-label"
-                                        for="cfg-nvidia-key"
-                                        >NVIDIA API Key</label
-                                    >
-                                    <input
-                                        type="password"
-                                        id="cfg-nvidia-key"
-                                        class="config-input"
-                                        placeholder="nvapi-..."
-                                        autocomplete="off"
-                                    />
-                                    <select
-                                        id="cfg-nvidia-model"
-                                        class="config-select"
-                                        style="width: 200px"
-                                    >
-                                        <option value="">-- Modele --</option>
-                                    </select>
-                                </div>
-                                <div class="config-row">
-                                    <label
-                                        class="config-label"
-                                        for="cfg-qwencloud-key"
-                                        >QwenCloud API Key</label
-                                    >
-                                    <input
-                                        type="password"
-                                        id="cfg-qwencloud-key"
-                                        class="config-input"
-                                        placeholder="sk-..."
-                                        autocomplete="off"
-                                    />
-                                    <select
-                                        id="cfg-qwencloud-model"
-                                        class="config-select"
-                                        style="width: 200px"
-                                    >
-                                        <option value="">-- Modele --</option>
-                                    </select>
-                                </div>
-                                <div class="config-row">
-                                    <label
-                                        class="config-label"
-                                        for="cfg-xiaomi-key"
-                                        >Xiaomi API Key</label
-                                    >
-                                    <input
-                                        type="password"
-                                        id="cfg-xiaomi-key"
-                                        class="config-input"
-                                        placeholder="xm-..."
-                                        autocomplete="off"
-                                    />
-                                    <select
-                                        id="cfg-xiaomi-model"
-                                        class="config-select"
-                                        style="width: 200px"
-                                    >
-                                        <option value="">-- Modele --</option>
-                                    </select>
-                                </div>
-                                <div class="config-row">
-                                    <label
-                                        class="config-label"
-                                        for="cfg-mistral-key"
-                                        >Mistral API Key</label
-                                    >
-                                    <input
-                                        type="password"
-                                        id="cfg-mistral-key"
-                                        class="config-input"
-                                        placeholder="sk-..."
-                                        autocomplete="off"
-                                    />
-                                    <select
-                                        id="cfg-mistral-model"
-                                        class="config-select"
-                                        style="width: 200px"
-                                    >
-                                        <option value="">-- Modele --</option>
-                                    </select>
                                 </div>
+                                <div id="cfg-ai-providers" class="ai-providers-list"></div>
                                 <div
-                                    class="config-actions-row"
+                                    id="cfg-ai-providers-empty"
-                                    style="margin-top: 16px"
+                                    class="ai-providers-empty hidden"
+                                    data-i18n="config.ai_providers_empty"
                                 >
+                                    Aucun fournisseur ne correspond
+                                </div>
+
+                                <div class="ai-keys-footer">
                                     <button class="config-btn-save"
                                         id="cfg-save-ai-keys" data-i18n="help.shortcut_save">
                                         Sauvegarder
@@ -2252,11 +2137,7 @@
                                     </button>
                                     <span
                                         id="cfg-ai-status"
-                                        style="
+                                        class="ai-keys-status"
-                                            font-size: 12px;
-                                            color: var(--text-muted);
-                                            margin-left: 12px;
-                                        "
                                     ></span>
                                 </div>
                             </section>

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,

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() {
+// Display metadata for the provider accordion cards (#104).
-  for (const [inputId] of Object.entries(AI_KEY_MAP)) {
+const AI_PROVIDER_META = {
-    const input = document.getElementById(inputId);
+  deepseek:   { name: "DeepSeek",   placeholder: "sk-..." },
-    if (!input) continue;
+  openrouter: { name: "OpenRouter", placeholder: "sk-or-..." },
-    const row = input.closest(".config-row");
+  gemini:     { name: "Gemini",     placeholder: "AIza..." },
-    if (!row || row.dataset.enhanced) continue;
+  nvidia:     { name: "NVIDIA",     placeholder: "nvapi-..." },
-    row.dataset.enhanced = "1";
+  qwencloud:  { name: "QwenCloud",  placeholder: "sk-..." },
-    row.style.cssText += "display:flex;align-items:center;gap:8px;flex-wrap:wrap;";
+  xiaomi:     { name: "Xiaomi",     placeholder: "xm-..." },
-    const badge = document.createElement("span");
+  mistral:    { name: "Mistral",    placeholder: "sk-..." },
-    badge.id = inputId.replace("-key", "-badge");
+};
-    badge.style.cssText = "font-size:11px;padding:2px 8px;border-radius:10px;white-space:nowrap;";
+
-    row.appendChild(badge);
+function _renderAIProviderCards() {
-    const delBtn = document.createElement("button");
+  const host = document.getElementById("cfg-ai-providers");
-    delBtn.type = "button";
+  if (!host) return;
-    delBtn.id = inputId.replace("-key", "-delete");
+  host.innerHTML = "";
-    delBtn.className = "config-btn-secondary";
+  for (const p of AI_PROVIDER_NAMES) {
-    delBtn.style.cssText = "font-size:11px;padding:4px 10px;color:var(--danger,#e74c3c);border-color:var(--danger,#e74c3c);cursor:pointer;display:none;";
+    const meta = AI_PROVIDER_META[p] || { name: p, placeholder: "sk-..." };
-    delBtn.textContent = "\u00d7 Supprimer";
+    const card = el("div", { class: "ai-provider-card", "data-provider": p });
-    delBtn.addEventListener("click", () => deleteAIKey(inputId));
+
-    row.appendChild(delBtn);
+    // 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 = '<option value="">-- Modele --</option>';
+    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 provider = inputId.replace("-key", "");
-  const delBtn = document.getElementById(inputId.replace("-key", "-delete"));
+  const badge = document.getElementById(`${provider}-badge`);
+  const delBtn = document.getElementById(`${provider}-delete`);
   if (badge) {
-    if (hasKey) {
+    badge.textContent = hasKey
-      badge.textContent = "\u2713 Configur\u00e9";
+      ? "\u2713 " + t("config.ai_status_configured")
-      badge.style.background = "var(--success-bg, #27ae6022)";
+      : t("config.ai_status_not_configured");
-      badge.style.color = "var(--success, #27ae60)";
+    badge.classList.toggle("configured", !!hasKey);
-      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)";
-    }
   }
-  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)

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.",

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.",

frontend/style.css

@@ -1474,10 +1474,11 @@ select {
   max-width: 1200px;
 }
 
-/* Full-bleed viewers (PDF, images) must use the whole width when the
+/* Full-bleed viewers (PDF, images, Excalidraw) must use the whole width when
-   navigation sidebar is hidden instead of the centered reading column. */
+   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);

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}`;

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": {

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(
+  `<!DOCTYPE html>
+<html><body>
+  <section id="cfg-ai" class="config-section">
+    <input type="search" id="cfg-ai-search" />
+    <select id="cfg-ai-default-provider"><option value="">--</option></select>
+    <select id="cfg-ai-default-model"><option value="">--</option></select>
+    <div id="cfg-ai-default-model-caps"></div>
+    <div id="cfg-ai-providers" class="ai-providers-list"></div>
+    <div id="cfg-ai-providers-empty" class="ai-providers-empty hidden"></div>
+    <button id="cfg-save-ai-keys">Sauvegarder</button>
+    <button id="cfg-test-ai-keys">Tester</button>
+    <span id="cfg-ai-status"></span>
+  </section>
+</body></html>`,
+  { 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);
+}