feat: barre d'outils de lecture epinglee, coloration syntaxique des fichiers de code et avatars predefinis (#115, #117, BUG-078)

docs/ISSUES_TODOLIST.md

@@ -187,6 +187,7 @@ Avant de corriger quoi que ce soit, un agent IA doit :
 | *BUG-075* | [🟡 IMPORTANT] Assistant IA : chaque action mutatrice demande son propre « Appliquer » — aucun résumé des actions en attente ni approbation globale | 🟢 corrigé | P1 | ⚙️ backend + 📱 frontend | IA | `backend/agent/loop.py`, `backend/bookslm_routes.py`, `frontend/js/bookslm.js` | Mode agent : demander une structure de répertoires multi-fichiers → valider une action après l'autre | `backend/agent/loop.py` (`pending.actions`, lot exécuté au resume) ; `backend/bookslm_routes.py` (`confirm_all` → `ctx.confirmed`) ; `frontend/js/bookslm.js` (carte multi-actions + « Tout approuver (N) »). Tests : `tests/test_agent_loop.py`, `tests/test_bookslm.py`, `tests/frontend/ai.test.mjs` | La pause de confirmation ne capture que le **premier** appel mutateur du lot (les suivants sont `deferred`) ; carte unique sans liste ; nouveau `confirm_all` à ajouter pour autoriser la suite de l'exécution en une approbation |
 | *BUG-076* | [🟡 IMPORTANT] Assistant IA : après une action de l'agent, l'arborescence et le document ouvert ne sont pas rafraîchis dynamiquement | 🟢 corrigé | P1 | 📱 frontend | IA | `frontend/js/bookslm.js` | Mode agent : créer/supprimer un fichier ou dossier, modifier le document ouvert → l'UI ne bouge pas | `frontend/js/bookslm.js` : `MUTATING_TOOLS`/`FILE_WRITE_TOOLS`, refresh d'arborescence débouncé sur event `tool`, `_notifyFileWritten` étendu (xlsx/docx/csv/pdf). Tests : `tests/frontend/ai.test.mjs`, `tests/frontend/editor-inline.test.mjs` | Aucun refresh explicite sur les événements `tool` mutateurs (repose uniquement sur le watcher SSE) ; `_notifyFileWritten` ignore les créations de documents (xlsx/docx/csv/pdf) |
 | *BUG-077* | [🟡 IMPORTANT] Assistant IA : aucun bouton « Stop » pour arrêter l'exécution de l'agent à tout moment | 🟢 corrigé | P1 | 📱 frontend | IA | `frontend/js/bookslm.js` | Mode agent : lancer une longue tâche → le bouton Envoyer est désactivé, impossible d'arrêter (seule la fermeture du panneau abort) | `frontend/js/bookslm.js` + `frontend/style.css` : bouton d'envoi → Stop (`_syncSendButton`/`_stopGeneration`/`_markStopped`), i18n `ai.stop`/`ai.stopped`. Tests : `tests/frontend/ai.test.mjs` (+2) | `_abortCtrl` n'est déclenché que par `close()` ; aucun signal d'arrêt côté client pendant le stream |
+| *BUG-078* | [🟡 IMPORTANT] Fichiers de code : la coloration syntaxique (highlight.js) disparaît — les feuilles de thème sont basculées à partir de la **clé** de thème au lieu du **mode** | 🟢 corrigé | P1 | 📱 frontend | IA | `frontend/js/themes.js`, `frontend/js/ui.js`, `tests/frontend/unit.test.mjs` | Ouvrir un fichier `.py`/`.sh`/`.ps1`/`.yml` : le code s'affiche en texte brut, sans couleurs | `frontend/js/themes.js` : `applyTheme` bascule `hljs-theme-dark`/`hljs-theme-light` selon le **mode** (`isDark`). `frontend/js/ui.js` : `initTheme`/`applyTheme` résolvent le mode persisté (`obsigate-theme-mode`) au lieu de traiter la clé (`defaut-obsigate`) comme un mode. Test : `unit.test.mjs` (+1). | Les deux feuilles étaient désactivées car `defaut-obsigate !== "dark"` et `!== "light"` ; résultat **non déterministe** selon l'ordre `UI.initTheme()` (clé) / `Sync.init()` → `themes.initThemes()` (mode). Vérifié Playwright : 5/5 chargements colorés (`.py`), sépia/contraste élevé sur la palette claire |
 
 ### TODOs techniques (améliorations / nouvelles tâches)
 
@@ -269,6 +270,8 @@ Avant de corriger quoi que ce soit, un agent IA doit :
 | 2026-09-24 | #114 | Feature | `frontend/index.html`, `frontend/js/config.js`, `frontend/style.css`, `frontend/locales/{fr,en}.json`, `tests/frontend/config-mobile.test.mjs`, `tests/e2e/config-mobile.spec.js`, `docs/features/settings-mobile-114.md` (nouvelle), `docs/ROADMAP.md`, `CHANGELOG.md`, `docs/ISSUES_TODOLIST.md` | **#114 — Configuration, refonte mobile-responsive (≤768px)**. (1) **Drawer sommaire** : `#config-nav` en panneau `position: fixed` (`min(320px, 88vw)`, z-index 40) sous backdrop `#config-modal.config-toc-open::before` (z-index 35) ; bouton `#config-toc-close` ; backdrop/Échap ferment le drawer d'abord puis la modale ; `_setConfigNav` bascule la classe + conserve le `display` inline de reset. (2) **Modale plein écran** : `100dvh` + `padding: 0`, `border-radius: 0`. (3) **Tactile** : boutons/liens ≥44px, inputs/selects `16px` + `min-height: 44px` (anti-zoom iOS, scopé `#config-modal`), rangée `.config-actions-row` sticky column + safe-area, formulaires 1 colonne, MFA 1 colonne + code full-width, wrap webhook/token/share/diag/avatar/webauthn. (4) **Dettes HTML/i18n** : `.config-actions-row` replacée dans `#cfg-backend-settings` (`</section>` orphelin supprimé), id dupliqué `cfg-partages-publics` retiré du `<h2>`, `#plugins-settings-container` supprimé, doublons `.config-btn-add` + règle morte `.mfa-recovery-input` purgés, `#mt-explorer` → `data-i18n="settings.explorer"` ; i18n : clés mortes `settings.{backend,backend_hint,restart_badge,save,plugins}` supprimées, `settings.explorer` + `config.toc_close` ajoutées, `settings.tabs` FR = « Onglets ». Vérifié : `config-mobile.test.mjs` 27/27 (au CI), unit 11/11, validate-imports 40 modules, pytest 1302 passed / 6 skipped, ruff/mypy 0, E2E `chromium-mobile` 5/5. | ✅ livré (en attente vérif utilisateur) |
 | 2026-09-24 | BUG-074 → BUG-077 | Correction | `backend/agent/loop.py`, `backend/bookslm_routes.py`, `frontend/js/bookslm.js`, `frontend/style.css`, `frontend/index.html`, `frontend/locales/{fr,en}.json`, `frontend/sw.js`, `tests/test_agent_loop.py`, `tests/test_bookslm.py`, `tests/frontend/ai.test.mjs`, `tests/frontend/editor-inline.test.mjs`, `CHANGELOG.md`, `docs/ISSUES_TODOLIST.md` | **Lot assistant IA (mode agent)** : (BUG-075) confirmation par lot — `pending.actions` regroupe toutes les mutations d'un tour LLM, un unique bouton « Tout approuver (N) » envoie `confirm_all` (`ToolContext.confirmed`) et n'interrompt plus à chaque action ; les lectures du lot s'exécutent aussitôt. (BUG-074) résumé du bloc d'étapes avec titre de la 1re action + compteur limité aux actions, reprise diffusée dans le même message (fini le « 1 étape » fragmenté). (BUG-076) refresh de l'arborescence débouncé sur les events `tool` mutateurs + `_notifyFileWritten` étendu aux documents (xlsx/docx/csv/pdf). (BUG-077) le bouton d'envoi devient « Stop » pendant le stream (abort SSE, tâche serveur annulée à la déconnexion, marqueur « Exécution arrêtée. »). Guide/i18n FR/EN + `ai.stop`/`ai.stopped`/`ai.confirm_actions`/`ai.action_apply_all` ; `SW_VERSION` v25. Vérifié : pytest 1304 passed / 6 skipped, ruff/mypy 0, validate-imports 40 modules, unit 11/11, ai 100/100, editor-inline 44/44, mobile-editor 35/35, ai-sidebar 6/6, forge 32/32, pane-manager 9/9, sw 8/8. | 🟢 corrigé (en attente vérif utilisateur) |
 
+| 2026-09-24 | #115, #117, BUG-078 | Feature + correction | `frontend/js/themes.js`, `frontend/js/ui.js`, `frontend/js/viewer.js`, `frontend/js/config.js`, `frontend/index.html`, `frontend/style.css`, `frontend/popout.html`, `frontend/locales/{fr,en}.json`, `frontend/icons/avatar/*` (nouveau), `tests/frontend/unit.test.mjs`, `tests/frontend/toolbar-order.test.mjs`, `tests/frontend/settings-order-avatar.test.mjs`, `docs/features/viewer-toolbar-highlight-avatars.md` (nouvelle), `docs/ROADMAP.md`, `CHANGELOG.md` | **#115** barre d'outils de lecture épinglée : `viewer.js`/`popout.html` sortent `.file-actions` de `.file-header` dans un `.file-toolbar` enfant direct de `.content-area` (`position: sticky; top: 0`), masqué en mode lecture. **BUG-078** coloration syntaxique : le basculement des feuilles highlight.js suit le **mode** (`themes.applyTheme` + `ui.initTheme/applyTheme` lisent `obsigate-theme-mode`) au lieu de la clé de thème qui désactivait les deux feuilles. **#117** avatars prédéfinis : galerie de 12 images (`frontend/icons/avatar/`) dans `#cfg-profile`, clic → recadrage 256 px (pipeline import) + `PATCH /api/auth/me`, avatars actifs surlignés (`obsigate-avatar-preset`), import personnalisé et suppression conservés. Vérifié : Playwright (coloration 5/5 déterministe, toolbar épinglée à `barTop` constant au défilement), `unit.test.mjs` 12/12, `toolbar-order` 13/13, `settings-order-avatar` 12/12, JSDOM editor-inline/pane-manager/mobile-editor/image-viewer/pdf-viewer/config-mobile/media-viewer/excalidraw verts, pytest 1304 passed / 6 skipped, ruff/mypy 0, validate-imports 40 modules. | 🟢 corrigé (en attente vérif utilisateur) |
+
 ---
 
 ## 📜 Historique des bugs résolus

docs/ROADMAP.md

@@ -1,6 +1,6 @@
 # ObsiGate — Roadmap
 
-> **Version :** 2.24.0 | **Dernière mise à jour :** 2026-09-24
+> **Version :** 2.25.0 | **Dernière mise à jour :** 2026-09-24
 > **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)**
@@ -189,6 +189,9 @@
 | 112 | En-tête allégé & compte en sidebar — version dans le menu Options, retrait utilisateur/déconnexion du header, section compte en bas de la sidebar, pellicule d'images défilable (molette + flèches) | 2.21.0 | [features/header-user-sidebar-112.md](./features/header-user-sidebar-112.md) |
 | 113 | Configuration — ordre naturel des sections (Profil 1er, À propos dernier, TOC = page) & avatar utilisateur (import PNG/JPG/WEBP, persistance serveur, cercle sidebar) | 2.22.0 | [features/settings-order-avatar-113.md](./features/settings-order-avatar-113.md) |
 | 114 | Configuration — refonte mobile-responsive (modale plein écran 100dvh, sommaire en drawer coulissant, cibles tactiles ≥ 44 px, inputs 16 px anti-zoom, sauvegarde sticky, MFA 1 colonne, purge i18n/HTML) | 2.23.0 | [features/settings-mobile-114.md](./features/settings-mobile-114.md) |
+| BUG-078 | Fichiers de code — coloration syntaxique restaurée (feuilles highlight.js basculées sur le mode de thème et non la clé) | 2.25.0 | [features/viewer-toolbar-highlight-avatars.md](./features/viewer-toolbar-highlight-avatars.md) |
+| 115 | Viewer — barre d'outils de lecture épinglée au défilement | 2.25.0 | [features/viewer-toolbar-highlight-avatars.md](./features/viewer-toolbar-highlight-avatars.md) |
+| 117 | Configuration — avatars prédéfinis dans le profil utilisateur (12 images) | 2.25.0 | [features/viewer-toolbar-highlight-avatars.md](./features/viewer-toolbar-highlight-avatars.md) |
 
 ---
 

docs/features/viewer-toolbar-highlight-avatars.md

@@ -0,0 +1,122 @@
+# #115 / BUG-078 / #117 — Barre d'outils épinglée, coloration syntaxique des fichiers de code & avatars prédéfinis
+
+> **Statut :** 🟢 livré (en attente vérification utilisateur)
+> **Impact :** 🟡 (#115, BUG-078) · 🟢 (#117)
+> **Zone :** frontend (`frontend/js/viewer.js`, `frontend/js/themes.js`,
+> `frontend/js/ui.js`, `frontend/js/config.js`, `frontend/index.html`,
+> `frontend/style.css`, `frontend/popout.html`, `frontend/locales/fr.json`,
+> `frontend/locales/en.json`, `frontend/icons/avatar/*`)
+
+Trois demandes traitées dans la même livraison, toutes côté frontend.
+
+## #115 — Barre d'outils de lecture toujours visible
+
+### Problème
+
+La barre d'actions d'un document (pop-out, bookmark, Editer, Source, Copier, PDF, Export,
+Partager…) était rendue **dans** `.file-header`, un conteneur court placé en haut de la
+zone de lecture. Or un élément `position: sticky` reste borné par son parent : dès que
+`.file-header` sortait de l'écran au défilement d'un document long, la barre disparaissait.
+
+### Correctif
+
+- `frontend/js/viewer.js` et `frontend/popout.html` sortent la barre d'actions de
+  `.file-header` et la placent dans un nouveau conteneur `.file-toolbar`, **enfant direct
+  de `.content-area`** (le conteneur de défilement). La barre peut donc se coller au haut
+  de la zone de lecture pour toute la hauteur du document.
+- `frontend/style.css` :
+
+  ```css
+  .file-toolbar {
+    position: sticky;
+    top: 0;
+    z-index: 30;
+    margin: 0 0 16px;
+    padding: 8px 0;
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border);
+  }
+  ```
+
+  Le fond est opaque pour qu'aucun texte ne transparaisse dessous.
+- `body.reading-mode .file-toolbar { display: none }` : la barre reste masquée en mode
+  lecture, comme les autres actions.
+
+## BUG-078 — Coloration syntaxique des fichiers de code
+
+### Problème
+
+Les fichiers `.py`, `.sh`, `.ps1`, `.yml`, `.json`… (et les blocs de code Markdown)
+s'affichaient en **texte brut**, sans couleurs. Le code était pourtant correctement
+généré côté backend (`<pre><code class="language-python">…`) et `safeHighlight()` appelait
+bien `hljs.highlightElement()`.
+
+La cause était ailleurs : les deux feuilles de style de highlight.js (`#hljs-theme-dark`
+et `#hljs-theme-light`, chargées depuis le CDN dans `index.html`) étaient basculées à
+partir de la **clé de thème** persistée (`obsigate-theme` = `defaut-obsigate`, …) :
+
+```js
+darkSheet.disabled = theme !== "dark";    // "defaut-obsigate" !== "dark" → true
+lightSheet.disabled = theme !== "light";  // "defaut-obsigate" !== "light" → true
+```
+
+Les deux feuilles finissaient donc désactivées, privant tous les tokens de leurs couleurs.
+Le résultat dépendait de l'ordre de deux initialisations concurrentes — `UI.initTheme()`
+(clé de thème) au démarrage et `themes.initThemes()` (mode) via `Sync.init()` — d'où un
+comportement **non déterministe** (parfois coloré, le plus souvent non).
+
+### Correctif
+
+- `frontend/js/themes.js` — `applyTheme(themeKey, mode)` bascule désormais les feuilles
+  highlight.js selon le **mode** :
+
+  ```js
+  var isDark = mode === 'dark';
+  darkSheet.disabled = !isDark;
+  lightSheet.disabled = isDark;
+  ```
+
+  (`sepia` et `high-contrast` réutilisent la palette claire.)
+- `frontend/js/ui.js` — `initTheme()` lit le **mode** persisté (`obsigate-theme-mode`) et
+  `applyTheme()` résout un mode avant de fixer `data-theme` et de basculer les feuilles,
+  au lieu de comparer la clé de thème à `"dark"`/`"light"`.
+
+Le basculement est ainsi **déterministe** dès le premier rendu et à chaque changement de
+mode.
+
+## #117 — Avatars prédéfinis dans le profil
+
+### Ce qui a été livré
+
+- **Galerie de 12 avatars** dans la section `Profil` (`#cfg-profile`), servis depuis
+  `frontend/icons/avatar/` (`/static/icons/avatar/<fichier>.jpg`) : Chat, chien, elephan,
+  hibou, koala, lapin, lion, ours, penda, pingouin, raton, tigre.
+- Un clic charge l'image, la fait passer par le **même pipeline que l'import** (recadrage
+  carré central, redimensionnement 256 px, export JPEG 0,85) et l'enregistre via
+  `PATCH /api/auth/me` — aucune modification backend n'a été nécessaire, la validation
+  data-URL PNG/JPEG/WebP existante (BUG-113) s'applique telle quelle.
+- L'avatar actif est **surligné** ; le choix est mémorisé dans `localStorage`
+  (`obsigate-avatar-preset`) et purgé dès qu'on importe une photo personnalisée ou qu'on
+  supprime l'avatar.
+- L'import d'une photo et la suppression restent disponibles.
+- i18n : nouvelle clé `config.avatar_presets_label` (FR/EN).
+
+## Tests
+
+- `tests/frontend/unit.test.mjs` — `syntax highlight theme` (BUG-078) : `themes.applyTheme`
+  bascule les feuilles selon le mode et `ui.js` ne compare plus la clé au mode.
+- `tests/frontend/toolbar-order.test.mjs` — #115 : `.file-toolbar` dans `viewer.js` et
+  `popout.html`, règle CSS `position: sticky; top: 0`, masquage en mode lecture.
+- `tests/frontend/settings-order-avatar.test.mjs` — #117 : 12 avatars présents dans
+  `#cfg-profile`, fichiers d'images existants, pipeline `config.js`, règles CSS, clé i18n
+  FR/EN.
+- Vérification Playwright (instance locale, auth désactivée) : coloration déterministe sur
+  5 chargements successifs d'un `.py` ; `.file-toolbar` dont le `top` ne bouge plus après
+  défilement (épinglage effectif).
+
+## Limitations
+
+- L'avatar reste stocké en data-URL 256 px dans `data/users.json` (comportement #113
+  conservé).
+- Le mode `high-contrast`/`sepia` utilise le thème highlight.js **clair** (pas de palette
+  dédiée).