Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 bruno
|
82f6b4a791 | ||
|
bruno
|
7e1f5d6852 | ||
|
bruno
|
ab766862a3 |
+51
-1
@@ -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.2**.
|
||||
|
||||
---
|
||||
|
||||
@@ -14,6 +14,56 @@ et [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
---
|
||||
|
||||
## [2.12.2] — 2026-09-18
|
||||
|
||||
### Corrigé
|
||||
|
||||
- **BUG-066 — Configuration : icônes manquantes dans la table des matières** :
|
||||
les entrées « Fichiers cachés » et « Partages publics » du sommaire de la page de
|
||||
configuration n'affichaient pas d'icône (les titres de section, eux, en avaient une).
|
||||
Les libellés i18n `config.section_hidden` (🗂️) et `config.section_shares` (📤) sont
|
||||
alignés sur leurs titres de section, en FR **et** EN. Test de non-régression ajouté
|
||||
dans `tests/frontend/unit.test.mjs` (toutes les entrées du sommaire doivent porter une
|
||||
icône dans les deux langues).
|
||||
|
||||
---
|
||||
|
||||
## [2.12.1] — 2026-09-18
|
||||
|
||||
---
|
||||
|
||||
## [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é
|
||||
|
||||
+3
-3
@@ -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.
|
||||
|
||||
[]()
|
||||
[]()
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://www.docker.com/)
|
||||
[](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.2).
|
||||
|
||||
---
|
||||
|
||||
*Projet : ObsiGate | Version : 2.11.6 | Dernière mise à jour : Juin 2026*
|
||||
*Projet : ObsiGate | Version : 2.12.2 | Dernière mise à jour : Juin 2026*
|
||||
|
||||
@@ -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.
|
||||
|
||||
[]()
|
||||
[]()
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://www.docker.com/)
|
||||
[](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.2).
|
||||
|
||||
---
|
||||
|
||||
*Project: ObsiGate | Version: 2.11.6 | Last updated: May 2026*
|
||||
*Project: ObsiGate | Version: 2.12.2 | Last updated: May 2026*
|
||||
|
||||
Generated
+1
-1
@@ -2626,7 +2626,7 @@ dependencies = [
|
||||
|
||||
[[package]]
|
||||
name = "obsigate-desktop"
|
||||
version = "2.11.6"
|
||||
version = "2.12.2"
|
||||
dependencies = [
|
||||
"chrono",
|
||||
"env_logger",
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
[package]
|
||||
name = "obsigate-desktop"
|
||||
version = "2.11.6"
|
||||
version = "2.12.2"
|
||||
description = "ObsiGate Desktop — Porte d'entrée native pour vos vaults Obsidian"
|
||||
authors = ["Bruno Charest"]
|
||||
edition = "2021"
|
||||
|
||||
@@ -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.2",
|
||||
"identifier": "com.obsigate.desktop",
|
||||
"build": {
|
||||
"frontendDist": "../frontend",
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -174,6 +174,7 @@ Avant de corriger quoi que ce soit, un agent IA doit :
|
||||
| *BUG-063* | [🟡 IMPORTANT] Viewer PDF : la table des matières s'affiche mais ne navigue pas | 🟢 corrigé | P1 | 📱 frontend | IA | `frontend/js/viewer.js`, `tests/frontend/pdf-viewer.test.mjs`, `tests/e2e/pdf-viewer.spec.js` (fixture `test_vault/sample-pdf-toc.pdf`) | Ouvrir un PDF avec signets, puis cliquer une entrée de la TOC | Deux causes : (1) `contentWindow.location.hash='page=N'` n'atteint pas le document (lecteur PDF natif dans une fenêtre `about:blank`) ; (2) un simple changement de fragment sur `iframe.src` est une navigation same-document **ignorée** par le lecteur natif. `navigatePdfToPage()` (liens `data-page` + listeners, plus d'`onclick` inline) recharge réellement l'iframe via un paramètre de query qui change (`&_pdfpage=<ts>#page=N`). Test E2E : `src` finit par `&_pdfpage=<n>#page=3`. Vérifié en Chrome *headful* : page 1 → page 8 → page 1 (captures identiques au retour) | Le fragment seul ne suffisait pas : Chrome applique `#page=N` au **chargement**, pas lors d'un changement de fragment |
|
||||
| *BUG-064* | [🟡 IMPORTANT] Éditeur Excalidraw : le diagramme ne s'affiche jamais (canvas vide), pour tout fichier `.excalidraw` / `.excalidraw.md` | 🟢 corrigé | P1 | 📱 frontend + ⚙️ backend | IA | `frontend/excalidraw-editor.html`, `backend/main.py`, `tests/frontend/excalidraw-viewer.test.mjs`, `tests/test_security_hardening.py`, `tests/e2e/excalidraw.spec.js`, `test_vault/diagram-app-export.excalidraw` | Ouvrir un `.excalidraw` (ou `.excalidraw.md`) dans ObsiGate | Deux causes : (1) la feuille de style d'Excalidraw n'était jamais chargée → éditeur non stylisé + `.excalidraw` sans hauteur fixe → boucle de resize jusqu'au plafond `2^25` (33 554 432 px) → scène blanche. Correctif : `<link>` CSS depuis esm.sh + `style-src` CSP autorisant `https://esm.sh`. (2) `appState.collaborators` objet JSON → `collaborators.forEach is not a function` ; `sanitizeAppState()` reconvertit en `Map` et écarte `width/height/offsetLeft/offsetTop`. | Vérifié navigateur : hauteur canvas 525 px (avant 33 554 432), dessin affiché, UI stylisée, 0 erreur. E2E + tests statiques CSP/CSS ajoutés. |
|
||||
| *BUG-065* | [🟡 IMPORTANT] Éditeur Excalidraw : l'auto-save recharge la page en pleine édition | 🟢 corrigé | P1 | 📱 frontend | IA | `frontend/js/excalidraw-viewer.js`, `frontend/js/utils.js`, `frontend/excalidraw-editor.html`, `tests/frontend/excalidraw-viewer.test.mjs` | Ouvrir un `.excalidraw` puis modifier un élément : au bout de 2 s la vue se recharge | Chaque modification déclenchait un `PUT save` 2 s plus tard → SSE `index_updated` → `reloadExternalWrite` → `openFile` → **recréation de l'iframe** (refresh visible). Auto-save supprimée : sauvegarde explicite (bouton 💾 / Ctrl+S). `reloadExternalWrite` ignore le fichier si un iframe Excalidraw est ouvert (`iframe[data-excalidraw-vault/path]`). Le badge « Modified » ne réagit plus aux changements d'`appState` (resize/zoom) mais à la signature des éléments. | Vérifié Playwright : plus de refresh, badge stable après bascule plein écran. Test statique (absence de `requestSave`/`saveTimer`). |
|
||||
| *BUG-066* | [🔵 MINEUR] Configuration : icônes manquantes dans la table des matières (« Fichiers cachés », « Partages publics ») | 🟢 corrigé | P3 | 📱 frontend | IA | `frontend/locales/{fr,en}.json` | Ouvrir Configuration → observer le sommaire : les entrées « Fichiers cachés » et « Partages publics » n'ont pas d'icône | `config.section_hidden` → « 🗂️ Fichiers cachés » / « 🗂️ Hidden files », `config.section_shares` → « 📤 Partages publics » (EN avait déjà l'icône). Test : `tests/frontend/unit.test.mjs` (+1 : toutes les entrées du sommaire portent une icône FR/EN) | Les libellés du sommaire utilisent des clés i18n distinctes des titres de section (`auto.f8ba6127`, `config.section_partages-publics`) qui, elles, avaient l'icône |
|
||||
| | | | | | | | | | | |
|
||||
|
||||
### TODOs techniques (améliorations / nouvelles tâches)
|
||||
@@ -244,6 +245,7 @@ Avant de corriger quoi que ce soit, un agent IA doit :
|
||||
| 2026-09-17 | BUG-064 (complément) | Correction | `frontend/style.css`, `tests/frontend/excalidraw-viewer.test.mjs`, `CHANGELOG.md`, `docs/ISSUES_TODOLIST.md` | **BUG-064 (complément)** : quand la barre de navigation gauche est masquée, le viewer Excalidraw restait borné à la colonne de lecture centrée de 1200 px. La règle `.sidebar.hidden ~ .content-wrapper .content-area { max-width: 1200px }` s'appliquait au viewer comme aux notes. Ajout de `.content-area:has(iframe[src*="excalidraw-editor.html"])` en `max-width: none; margin: 0` (même traitement que les viewers PDF/image, BUG-062). Vérifié Playwright (viewport 1400 px) : contenu 1115 → 1400 px, iframe 1035 → 1320 px, `max-width` calculé `none`. Test statique ajouté (`excalidraw-viewer.test.mjs` 9/9). | 🟢 corrigé (en attente vérif utilisateur) |
|
||||
| 2026-09-17 | BUG-065, #78 (complément) | Correction + feature | `frontend/js/excalidraw-viewer.js`, `frontend/js/utils.js`, `frontend/excalidraw-editor.html`, `tests/frontend/excalidraw-viewer.test.mjs`, `docs/features/excalidraw.md`, `CHANGELOG.md`, `docs/ISSUES_TODOLIST.md` | **BUG-065** : l'auto-save Excalidraw (débounce 2 s) déclenchait `PUT save` → SSE `index_updated` → `reloadExternalWrite` → `openFile` → recréation de l'iframe = refresh visible pendant le dessin. Auto-save retirée (`excalidraw-viewer.js` : plus de `requestSave`/`saveTimer`), sauvegarde explicite (bouton 💾 / Ctrl+S) ; `reloadExternalWrite` (utils.js) court-circuite le re-rendu si un iframe Excalidraw est ouvert sur ce fichier (attributs `data-excalidraw-vault`/`data-excalidraw-path`) ; le badge « Modified » suit désormais une signature des éléments (`id:versionNonce`) au lieu de tout `onChange` — resize/zoom/plein écran ne marquent plus le fichier modifié. **#78 (complément)** : bouton **plein écran** `#btn-fullscreen` dans la barre d'outils de l'éditeur (`requestFullscreen` sur le document de l'iframe) + iframe créée avec `allow="fullscreen" allowfullscreen`. Vérifié Playwright : bascule plein écran OK (`document.fullscreenElement` true→false), badge non modifié après bascule ; tests statiques `excalidraw-viewer.test.mjs` 12/12, validate-imports 38 modules, unit 9/9. | 🟢 corrigé (en attente vérif utilisateur) |
|
||||
| 2026-09-17 | #78 (complément) | UI | `frontend/excalidraw-editor.html`, `docs/features/excalidraw.md`, `CHANGELOG.md` | **#78 (complément)** : la barre d'outils de l'éditeur Excalidraw passe en **colonne d'icônes** (34×34 px, SVG seuls), **collée au bord droit** (`right: 0` ; `top: 45%` ; empilement vertical), avec `title`/`aria-label`. L'icône du bouton Save est remplacée par une coche pendant 1,2 s après une sauvegarde réussie. Badge « Modifié » réduit à une pastille. Vérifié Playwright : bord droit au bord de l'iframe, haut 45 %, 4 boutons empilés ; bascule plein écran OK, cycle d'icône Save + `PUT save` observés. | 🟢 livré (en attente vérif utilisateur) |
|
||||
| 2026-09-18 | BUG-066 | Correction | `frontend/locales/fr.json`, `frontend/locales/en.json`, `tests/frontend/unit.test.mjs`, `CHANGELOG.md`, `docs/ISSUES_TODOLIST.md` | **BUG-066** : la table des matières de la page de configuration n'affichait aucune icône pour « Fichiers cachés » et « Partages publics ». Les libellés du sommaire proviennent de clés i18n (`config.section_hidden`, `config.section_shares`) distinctes des titres de section qui, eux, portaient déjà l'icône. Alignement : 🗂️ / 📤 en FR **et** EN. Test de non-régression : `unit.test.mjs` vérifie que **toutes** les entrées `.help-nav-link` du sommaire portent une icône dans les deux langues (17/17). Vérifié : `unit.test.mjs` 10/10, `validate-imports` 38 modules. | 🟢 corrigé (en attente vérif utilisateur) |
|
||||
|
||||
---
|
||||
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
# ObsiGate — Roadmap
|
||||
|
||||
> **Version :** 2.11.6 | **Dernière mise à jour :** 2026-09-18
|
||||
> **Version :** 2.12.2 | **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)**
|
||||
|
||||
@@ -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.
|
||||
+80
-199
@@ -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>
|
||||
<p class="config-description">
|
||||
Configurez vos cles API. Cliquez sur
|
||||
<strong data-i18n="config.test">Tester</strong> pour charger les
|
||||
modeles.
|
||||
</p>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-label"
|
||||
for="cfg-ai-default-provider"
|
||||
data-i18n="config.ai_default_provider"
|
||||
>Fournisseur par defaut</label
|
||||
>
|
||||
<select
|
||||
id="cfg-ai-default-provider"
|
||||
class="config-select"
|
||||
style="width: 200px"
|
||||
>
|
||||
<option value="">--</option>
|
||||
</select>
|
||||
<div class="ai-keys-header">
|
||||
<div class="ai-keys-header-text">
|
||||
<h2 data-i18n="config.section_cles-api-intelligence-artificielle">🤖 Cles API Intelligence Artificielle</h2>
|
||||
<p class="config-description" data-i18n="config.ai_header_desc">
|
||||
Configurez vos cles API fournisseur par fournisseur. Dépliez une carte pour saisir une
|
||||
clé, puis cliquez sur <strong data-i18n="config.test">Tester</strong> pour charger les
|
||||
modeles.
|
||||
</p>
|
||||
</div>
|
||||
<div class="ai-keys-search">
|
||||
<i data-lucide="search" class="icon"></i>
|
||||
<input
|
||||
type="search"
|
||||
id="cfg-ai-search"
|
||||
data-i18n-placeholder="config.ai_search_placeholder"
|
||||
placeholder="Rechercher un fournisseur…"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label
|
||||
class="config-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"
|
||||
style="width: 220px"
|
||||
>
|
||||
<option value="">--</option>
|
||||
</select>
|
||||
|
||||
<div class="ai-default-card">
|
||||
<div class="ai-card-title" data-i18n="config.ai_default_section">Configuration par defaut</div>
|
||||
<div class="ai-default-grid">
|
||||
<div class="ai-field">
|
||||
<label
|
||||
class="ai-field-label"
|
||||
for="cfg-ai-default-provider"
|
||||
data-i18n="config.ai_default_provider"
|
||||
>Fournisseur par defaut</label
|
||||
>
|
||||
<select
|
||||
id="cfg-ai-default-provider"
|
||||
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
|
||||
class="config-label"
|
||||
data-i18n="config.ai_capabilities"
|
||||
>Capacites du modele</label
|
||||
|
||||
<div class="ai-providers-header">
|
||||
<h3
|
||||
class="ai-card-title"
|
||||
data-i18n="config.ai_providers_title"
|
||||
>
|
||||
<div
|
||||
id="cfg-ai-default-model-caps"
|
||||
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>
|
||||
Fournisseurs d'API
|
||||
</h3>
|
||||
</div>
|
||||
<div id="cfg-ai-providers" class="ai-providers-list"></div>
|
||||
<div
|
||||
class="config-actions-row"
|
||||
style="margin-top: 16px"
|
||||
id="cfg-ai-providers-empty"
|
||||
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="
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-left: 12px;
|
||||
"
|
||||
class="ai-keys-status"
|
||||
></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -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,
|
||||
|
||||
+129
-39
@@ -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 = '<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 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)
|
||||
|
||||
@@ -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.",
|
||||
@@ -488,7 +496,7 @@
|
||||
"config.section_fonctionnalites": "Features",
|
||||
"config.section_format-du-payload": "Format du payload",
|
||||
"config.section_gestion-des-onglets": "📑 Gestion des onglets",
|
||||
"config.section_hidden": "Hidden files",
|
||||
"config.section_hidden": "🗂️ Hidden files",
|
||||
"config.section_historique-recent-redemarrage-non-requis": "📋 Recent History\n No restart required",
|
||||
"config.section_indicateurs-visuels": "Indicateurs visuels",
|
||||
"config.section_intelligence-artificielle-dans-l-editeur": "🤖 AI in the Editor",
|
||||
|
||||
@@ -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.",
|
||||
@@ -488,7 +496,7 @@
|
||||
"config.section_fonctionnalites": "Fonctionnalités",
|
||||
"config.section_format-du-payload": "Format du payload",
|
||||
"config.section_gestion-des-onglets": "📑 Gestion des onglets",
|
||||
"config.section_hidden": "Fichiers cachés",
|
||||
"config.section_hidden": "🗂️ Fichiers cachés",
|
||||
"config.section_historique-recent-redemarrage-non-requis": "📋 Historique récent\n Redémarrage non requis",
|
||||
"config.section_indicateurs-visuels": "Indicateurs visuels",
|
||||
"config.section_intelligence-artificielle-dans-l-editeur": "🤖 Intelligence Artificielle dans l'Éditeur",
|
||||
@@ -531,7 +539,7 @@
|
||||
"config.section_securite-signature-hmac-sha256": "Sécurité : signature HMAC-SHA256",
|
||||
"config.section_selection-de-vault": "Sélection de vault",
|
||||
"config.section_server": "Serveur",
|
||||
"config.section_shares": "Partages publics",
|
||||
"config.section_shares": "📤 Partages publics",
|
||||
"config.section_sidebar-barre-laterale": "Sidebar (barre latérale)",
|
||||
"config.section_synchronisation-automatique": "Synchronisation automatique",
|
||||
"config.section_tag-cloud": "Tag cloud",
|
||||
|
||||
+256
-3
@@ -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);
|
||||
|
||||
+1
-1
@@ -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}`;
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "obsigate",
|
||||
"version": "2.11.6",
|
||||
"version": "2.12.2",
|
||||
"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": {
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"type": "excalidraw",
|
||||
"version": 2,
|
||||
"elements": [
|
||||
{
|
||||
"id": "app-rect-1",
|
||||
"type": "rectangle",
|
||||
"x": 100,
|
||||
"y": 100,
|
||||
"width": 300,
|
||||
"height": 150,
|
||||
"angle": 0,
|
||||
"strokeColor": "#1e1e1e",
|
||||
"backgroundColor": "transparent",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"frameId": null,
|
||||
"index": "a0",
|
||||
"roundness": { "type": 3 },
|
||||
"seed": 975148614,
|
||||
"version": 73,
|
||||
"versionNonce": 1826427930,
|
||||
"isDeleted": false,
|
||||
"boundElements": [],
|
||||
"updated": 1789695570496,
|
||||
"created": 1789695569357,
|
||||
"link": null,
|
||||
"locked": false
|
||||
}
|
||||
],
|
||||
"appState": {
|
||||
"showWelcomeScreen": false,
|
||||
"theme": "dark",
|
||||
"collaborators": {},
|
||||
"currentChartType": "bar",
|
||||
"currentItemBackgroundColor": "transparent",
|
||||
"currentItemEndArrowhead": "arrow",
|
||||
"currentItemFillStyle": "solid",
|
||||
"currentItemFontFamily": 5,
|
||||
"currentItemFontSize": 20,
|
||||
"currentItemOpacity": 100,
|
||||
"currentItemRoughness": 1,
|
||||
"currentItemStartArrowhead": null,
|
||||
"currentItemStrokeColor": "#1e1e1e",
|
||||
"currentItemRoundness": "round",
|
||||
"currentItemArrowType": "round",
|
||||
"currentItemStrokeStyle": "solid",
|
||||
"currentItemStrokeWidth": 2,
|
||||
"currentItemTextAlign": "left",
|
||||
"cursorButton": "up",
|
||||
"activeTool": {
|
||||
"type": "selection",
|
||||
"customType": null,
|
||||
"locked": false,
|
||||
"lastActiveTool": null
|
||||
},
|
||||
"penMode": false,
|
||||
"penDetected": false,
|
||||
"errorMessage": null,
|
||||
"exportBackground": true,
|
||||
"exportScale": 1,
|
||||
"exportEmbedScene": false,
|
||||
"exportWithDarkMode": false,
|
||||
"gridSize": 20,
|
||||
"gridStep": 5,
|
||||
"gridModeEnabled": false,
|
||||
"isBindingEnabled": true,
|
||||
"isLoading": false,
|
||||
"isResizing": false,
|
||||
"isRotating": false,
|
||||
"name": "App Export Fixture",
|
||||
"previousSelectedElementIds": {},
|
||||
"scrollX": 0,
|
||||
"scrollY": 0,
|
||||
"selectedElementIds": {},
|
||||
"selectedGroupIds": {},
|
||||
"viewBackgroundColor": "#ffffff",
|
||||
"zenModeEnabled": false,
|
||||
"zoom": { "value": 1 },
|
||||
"viewModeEnabled": false
|
||||
},
|
||||
"files": {}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -189,6 +189,38 @@ function testAdminModuleSyntax() {
|
||||
console.log(' ✓ admin.js parses without syntax errors');
|
||||
}
|
||||
|
||||
// ── Test config TOC icons ─────────────────────────────────────────────────
|
||||
const FRONTEND_DIR = join(__dirname, '../../frontend');
|
||||
const INDEX_HTML = join(FRONTEND_DIR, 'index.html');
|
||||
const ICON_RE = /^\p{Extended_Pictographic}/u;
|
||||
|
||||
function testConfigTocIcons() {
|
||||
const html = readFileSync(INDEX_HTML, 'utf-8');
|
||||
const keys = [
|
||||
...html.matchAll(
|
||||
/<a\s+href="#cfg-[^"]*"\s+class="help-nav-link"\s+data-i18n="([^"]+)"/g,
|
||||
),
|
||||
].map((m) => m[1]);
|
||||
assert.ok(keys.length > 0, 'config TOC links found in index.html');
|
||||
|
||||
for (const lang of ['fr', 'en']) {
|
||||
const locale = JSON.parse(
|
||||
readFileSync(join(FRONTEND_DIR, 'locales', `${lang}.json`), 'utf-8'),
|
||||
);
|
||||
for (const key of keys) {
|
||||
const value = locale[key];
|
||||
assert.ok(value, `${lang}: missing TOC label for ${key}`);
|
||||
assert.ok(
|
||||
ICON_RE.test(value),
|
||||
`${lang}: TOC label for ${key} has no icon ("${value}")`,
|
||||
);
|
||||
}
|
||||
}
|
||||
console.log(
|
||||
` ✓ config TOC labels (${keys.length}) all carry an icon in FR and EN`,
|
||||
);
|
||||
}
|
||||
|
||||
// ── Test ai-fab.js (FAB — Floating Action Button) ─────────────────────────
|
||||
const AIFAB_PATH = join(JS_DIR, 'ai-fab.js');
|
||||
|
||||
@@ -222,6 +254,7 @@ async function main() {
|
||||
['admin module syntax', testAdminModuleSyntax],
|
||||
['ai-fab module exists', testAIFabModuleExists],
|
||||
['ai-fab module exports', testAIFabModuleExports],
|
||||
['config TOC icons', testConfigTocIcons],
|
||||
];
|
||||
|
||||
for (const [name, fn] of tests) {
|
||||
|
||||
Reference in New Issue
Block a user