feat: support complet des images — arborescence, visionneuse, indexation #108

docs/ROADMAP.md

@@ -1,6 +1,6 @@
 # ObsiGate — Roadmap
 
-> **Version :** 2.16.6 | **Dernière mise à jour :** 2026-09-22
+> **Version :** 2.17.0 | **Dernière mise à jour :** 2026-09-23
 > **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)**
@@ -82,60 +82,10 @@
 
 ## ⚪ Backlog — Média (images, audio, vidéo)
 
-### 108. Support complet des images — arborescence, visionneuse, indexation
-
-- **Effort :** 3-4 jours | **Impact :** 🟡 | **Zone :** backend (indexer, main) + frontend (viewer, utils)
-- **Statut :** ⚪ Prévu
-- **Description :** parité fonctionnelle des images avec les autres fichiers du vault : apparition dans l'arborescence, ouverture directe dans une visionneuse dédiée (zoom molette, pan, navigation dossier), indexation (nom + métadonnées), miniatures. Actuellement seul l'affichage *inline* dans un document markdown (`![[image.png]]`) fonctionne ; l'image isolée est invisible dans l'arborescence et son affichage standalone est cassé.
-- **Architecture actuelle (vérifiée sur `main` @ v2.16.6) :**
-  - `SUPPORTED_EXTENSIONS` (`backend/indexer.py:61`) : aucune extension image → images filtrées de l'arborescence et de l'index.
-  - `api_file_view()` (`backend/main.py:~2411`) : branche `IMAGE_EXTENSIONS` (`.png .jpg .jpeg .gif .svg .webp .bmp .ico`) qui retourne `is_image: true`, MAIS le `<img src>` généré pointe vers `/api/file/{vault}/raw?path=…` — un endpoint qui retourne du **JSON** (`FileRawResponse`, `main.py:1569`), pas des octets d'image. Affichage standalone cassé. Le frontend (`frontend/js/viewer.js:600`, branche `data.is_image`) reproduit la même URL cassée pour le bouton « Plein écran ».
-  - `/api/image/{vault}` (`backend/main.py:3160`) : endpoint existant et fonctionnel qui sert les octets avec le bon MIME type. C'est LUI que doivent utiliser le `<img>` backend et le frontend. L'auth navigateur fonctionne (middleware JWT avec fallback cookie `access_token`).
-  - `image_processor.py` + `attachment_indexer.py` : réécriture des 4 syntaxes Obsidian (`![[img]]`, `![alt](path)`…) vers `/api/image` avec résolution multi-stratégie → **l'inline markdown fonctionne déjà**, aucun changement requis.
-  - CSP : `img-src 'self' data: blob:` — compatible, rien à assouplir.
-- **Sous-tâches :**
-
-##### A. Backend — arborescence & indexation (1 j)
-  - [ ] **A1.** Créer `backend/media_types.py` : constantes partagées `IMAGE_EXTENSIONS`, `AUDIO_EXTENSIONS`, `VIDEO_EXTENSIONS` (réutilisées par #109) ; remplacer le set local de `api_file_view()`.
-  - [ ] **A2.** Intégrer les extensions images à `SUPPORTED_EXTENSIONS` (`indexer.py:61`) **avec branche binaire** : `index_document()` ne doit JAMAIS `read_text()`/`read_bytes()` une image — indexer nom/taille/mtime uniquement, `content: ""` pour que le TF-IDF reste propre.
-  - [ ] **A3.** Vérifier le reindex watchdog sur création/suppression d'image (même filtre d'extensions, couvert par A2).
-  - [ ] **A4.** Recherche : le nom de fichier est déjà indexé (`chatScreenshot.png` trouvable par « screenshot ») ; ajouter le filtre `ext:png`/`ext:jpg` (mécanisme des filtres `ext:` existants) ; comptabiliser les images à part dans les compteurs du dashboard (#11).
-
-##### B. Backend — correction affichage standalone (0,5 j)
-  - [ ] **B1.** Fix `<img>` cassé : `api_file_view()` → `src="/api/image/{vault}?path=…"` (URL encodée) ; idem `viewer.js:600` (bouton Plein écran).
-  - [ ] **B2.** Métadonnées : dimensions via `<img onload>` frontend (`naturalWidth/naturalHeight` — gratuit, recommandé ; Pillow seulement si C1 est retenu).
-  - [ ] **B3.** Sécurité SVG : sur `/api/image`, ajouter `Content-Security-Policy: sandbox` (ou `Content-Disposition: attachment`) quand `ext == .svg` — un SVG ouvert directement dans un onglet exécute son JS (XSS same-origin) ; dans une balise `<img>` il est inoffensif.
-
-##### C. Backend — miniatures (1 j, phase 2 tolérable)
-  - [ ] **C1.** Dépendance `pillow>=10.0` (wheels précompilés, rien de système dans `python:3.11-slim`).
-  - [ ] **C2.** `GET /api/media/{vault}/thumb` : miniature 256 px WebP, cache disque `/data/.obsigate-cache/thumbs/{sha1(path+mtime)}.webp` (invalidation naturelle par mtime). SVG : servir l'original. GIF animé : première frame.
-  - [ ] **C3.** Génération dans un thread pool (`run_in_executor`), fallback original si timeout 2 s.
-
-##### D. Frontend — visionneuse (1 j)
-  - [ ] **D1.** `EXT_ICONS` (`frontend/js/utils.js`) : extensions images → icône Lucide `image`.
-  - [ ] **D2.** Visionneuse digne de ce nom dans `viewer.js` : image centrée `object-fit:contain`, **zoom molette (0,1×–8×), pan au drag, double-clic reset**, boutons +/−/reset, badge de zoom.
-  - [ ] **D3.** Navigation ←/→ entre images du même dossier (données `list_directory` déjà disponibles) ; bouton « Ouvrir original » (nouvel onglet, `/api/image`).
-  - [ ] **D4.** Barre d'outils : Télécharger (déjà fonctionnel), lightbox plein viewport (fond `rgba(0,0,0,.9)`), panneau métadonnées repliable (dimensions, taille, type, date).
-  - [ ] **D5.** (Optionnel 🟢) Vue galerie vignettes pour les dossiers d'images via `/api/media/thumb`, `loading="lazy"`.
-  - [ ] **D6.** Split View (#75) : rendu dans `getContentArea()` du panneau actif ; vérifier le cache d'onglets.
-
-##### E. Tests (0,5 j)
-  - [ ] **E1.** `test_image_api.py` : `/api/image` octets + MIME ; SVG avec header sandbox ; `api_file_view` → `is_image: true` avec URL `/api/image` dans le html.
-  - [ ] **E2.** `test_image_indexing.py` : image visible dans `list_directory`, indexée avec contenu vide, watcher OK, rien de binaire dans le TF-IDF.
-  - [ ] **E3.** Playwright (#58) : clic sur une image de l'arborescence → visionneuse rendue ; zoom molette applique la transform.
-
-- **Points d'attention / risques**
-  - **Ne jamais lire les octets dans l'indexeur** — dérive n°1 d'un A2 bâclé (UnicodeDecodeError de masse dans les logs, TF-IDF pollué).
-  - **`_attachments/`** : les vaults Obsidian réels contiennent des milliers d'images → vérifier la fluidité de l'arborescence et le coût du scan d'index.
-  - **HEIC (iPhone)** : non décodable par les navigateurs → hors scope v1, documenter la limitation ; `pillow-heif` en v2 si demande.
-  - **Parité Obsidian Desktop** : la visionneuse D2 doit atteindre le même confort zoom/pan, sinon l'utilisateur repart sur le desktop.
-
----
-
 ### 109. Support audio & vidéo — lecteurs intégrés HTML5
 
 - **Effort :** 2-3 jours | **Impact :** 🟡 | **Zone :** backend (media streaming) + frontend (viewer)
-- **Statut :** ⚪ Prévu — dépend du socle `media_types.py` de #108-A1
+- **Statut :** ⚪ Prévu — s'appuie sur le socle `media_types.py` livré par #108
 - **Description :** prise en charge des fichiers audio (`.mp3 .m4a .aac .wav .ogg .oga .opus .flac`) et vidéo (`.mp4 .webm .mov .m4v`) avec la même parité que les autres fichiers : apparition dans l'arborescence, indexation du nom, lecture directe dans le viewer via les balises HTML5 `<audio>` / `<video>`. Actuellement ces fichiers tombent dans le chemin binaire « Ce fichier est binaire et ne peut pas être affiché » + bouton download (`frontend/js/viewer.js:622`).
 - **Choix technique — lecteurs HTML5 natifs, pas de transcodage :**
   - `<video>`/`<audio>` sont natifs partout (Chrome, Firefox, Edge, Safari, mobile) : play, scrub, volume, vitesse 0,25–2×, PiP, plein écran — sans une ligne de JS de contrôle.
@@ -286,6 +236,7 @@
 | 106 | Assistant IA — Actions instantanées contextuelles, catalogue « Toutes les actions » & frontmatter complet | 2.14.0 | [features/ai-quick-actions.md](./features/ai-quick-actions.md) |
 | 107 | Configuration — Gestion des clés API & MCP : création/révocation de jetons longue durée (1 j, 1 mois, 6 mois, 1 an, sans fin), une seule clé pour l'API REST et le serveur MCP, « dernière utilisation », store `data/api_tokens.json` sans secret persisté | 2.15.0 | [features/api-mcp-tokens-107.md](./features/api-mcp-tokens-107.md) |
 | 86 | Optimisation globale des performances (phase 3) — scan différentiel, excalidraw différé, garde-fou `replace` (inverted index / PDF lazy / caps regex déjà livrés via BUG-033/040/025) | 2.16.0 | [features/perf-phase3-86.md](./features/perf-phase3-86.md) |
+| 108 | Support complet des images — arborescence, visionneuse (zoom/pan/navigation/miniatures), indexation nom+métadonnées, `media_types.py`, filtre `ext:`, SVG sandbox | 2.17.0 | [features/image-support.md](./features/image-support.md) |
 
 ---
 
@@ -293,12 +244,12 @@
 
 | Priorité | Items | Effort total estimé |
 |---|---|---|
-| ✅ Complété | #1 → #59, #61–72, #74–76, #78–84, #86, #88–93, #94–100, #102–107, #92 | ~120 jours réalisés |
+| ✅ Complété | #1 → #59, #61–72, #74–76, #78–84, #86, #88–93, #94–100, #102–108, #92 | ~123 jours réalisés |
 | 🔵 P2 restant | #77 Desktop : signature de code (non retenue), 6 tests E2E **manuels** ([protocole](./DESKTOP_E2E_CHECKLIST.md)) | ~0,5-1 jour |
-| ⚪ Média | #108 Images (arborescence, visionneuse, indexation) + #109 Audio/vidéo (lecteurs HTML5, Range) | 5-7 jours |
+| ⚪ Média | #109 Audio/vidéo (lecteurs HTML5, Range) — s'appuie sur le socle média de #108 | 2-3 jours |
 | ⚪ P4 restant | #73 Sync (6-8j) | 6-8 jours |
 | ⚪ P0/P1 restant | #85, #87 Refonte architecturale, CI/CD (BUG-035 → BUG-040 corrigés, #86 livré) | ~11-17 jours |
-| **Total restant** | **8 items + finitions** | **~28-43 jours** |
+| **Total restant** | **7 items + finitions** | **~25-40 jours** |
 
 ---
 

docs/features/image-support.md

@@ -0,0 +1,96 @@
+# #108 — Support complet des images (arborescence, visionneuse, indexation)
+
+> **Version livrée :** 2.17.0 · **Statut :** ✅ · **Impact :** 🟡
+> **Zone :** backend (`indexer`, `main`, `media_types`, `media_thumbs`) + frontend
+> (`viewer.js`, `utils.js`, `style.css`).
+
+## Contexte
+
+Seul l'affichage *inline* dans un document markdown (`![[image.png]]`) fonctionnait.
+L'image isolée était **invisible dans l'arborescence** (filtrée par
+`SUPPORTED_EXTENSIONS`) et son **affichage standalone était cassé** : le `<img>`
+généré par `api_file_view()` pointait vers `/api/file/{vault}/raw`, un endpoint qui
+renvoie du **JSON** (`FileRawResponse`) et non des octets d'image.
+
+## Ce qui a été livré
+
+### A. Arborescence & indexation
+
+- **`backend/media_types.py`** (nouveau) : source unique des extensions
+  `IMAGE_EXTENSIONS`, `AUDIO_EXTENSIONS`, `VIDEO_EXTENSIONS` (+ helpers
+  `is_image`/`is_audio`/`is_video`/`is_media`/`media_mime_type`). Socle réutilisé
+  par #109. `attachment_indexer.py` et `api_file_view()` ne dupliquent plus la
+  liste.
+- Les extensions image sont intégrées à `SUPPORTED_EXTENSIONS`
+  (`indexer.py`) **avec une branche binaire** : `_scan_vault` et
+  `_index_single_file_sync` indexent **nom / taille / mtime** et ne lisent
+  **jamais** les octets (`content: ""`, `content_preview: ""`). Le TF-IDF reste
+  donc propre et aucune `UnicodeDecodeError` ne pollue les logs.
+- Le reindex **watchdog** suit automatiquement (même filtre d'extensions).
+- Le filtre `ext:png` / `ext:jpg` de la recherche avancée est opérationnel dès
+  lors que les images entrent dans l'index.
+- `/api/dashboard` expose `image_count` (par vault) et `total_images` (global),
+  séparés du `file_count` général.
+
+### B. Affichage standalone (correctif)
+
+- `api_file_view()` génère désormais
+  `src="/api/image/{vault}?path=…"` (chemin URL-encodé) au lieu de `/raw`.
+- `viewer.js` utilise le même endpoint (plus de bouton « Plein écran » cassé).
+- **Sécurité SVG** : `/api/image` (et le repli de `/api/media/.../thumb`) ajoute
+  `Content-Security-Policy: sandbox` pour les `.svg`, ce qui empêche
+  l'exécution du JavaScript embarqué quand le fichier est ouvert directement
+  dans un onglet (XSS same-origin). Dans une balise `<img>`, l'en-tête est sans
+  effet. Le middleware de sécurité ne remplace plus une politique stricte posée
+  par une route.
+
+### C. Miniatures
+
+- `GET /api/media/{vault}/thumb?path=…&size=…` : miniature **WebP** générée
+  avec `pillow>=10.0`, mise en cache sous
+  `<OBSIGATE_DATA_DIR>/.obsigate-cache/thumbs/{sha1}.webp`. La clé de cache
+  embarque **mtime + taille**, donc toute édition invalide naturellement la
+  vignette.
+- Génération dans un thread (`run_in_executor`) avec **timeout 2 s** ; repli sur
+  l'original en cas d'échec. SVG : l'original est servi tel quel (Pillow ne
+  décode pas le SVG) ; GIF/WebP animés : première frame.
+
+### D. Visionneuse
+
+`renderImageViewer()` (`frontend/js/viewer.js`) remplace l'ancien rendu minimal :
+
+- image centrée `object-fit: contain` ; **zoom molette 0,1×–8×**, **pan au
+  glisser** (Pointer Events), **double-clic = réinitialisation**, raccourcis
+  `+` / `-` / `0` ;
+- boutons +/−/reset et **badge de zoom** ;
+- **navigation ←/→** entre les images du même dossier (via `/api/browse`) et
+  **pellicule de miniatures** (`/api/media/.../thumb`, `loading="lazy"`) ;
+- barre d'outils : « Ouvrir l'original » (nouvel onglet `/api/image`),
+  téléchargement, **panneau métadonnées** repliable (dimensions via
+  `naturalWidth/Height`, taille, type MIME, chemin, date), **lightbox** plein
+  écran (fond `rgba(0,0,0,.9)`, `Échap` pour quitter) ;
+- `EXT_ICONS` : extensions image → icône Lucide `image` ;
+- compatible Split View (#75) : rendu dans `getContentArea()` du panneau actif.
+
+### E. Tests
+
+- `tests/test_image_api.py` : octets + MIME sur `/api/image`, en-tête `sandbox`
+  des SVG, URL `/api/image` dans le HTML de `api_file_view`, encodage des
+  chemins accentués, miniatures WebP + repli SVG + refus non-image.
+- `tests/test_image_indexing.py` : image présente dans `list_directory` et
+  `path_index`, indexée avec `content == ""`, pertinence watchdog, compteurs
+  dashboard, filtre `ext:png`.
+- `tests/frontend/image-viewer.test.mjs` : helpers purs (`clampImageZoom`,
+  `isImagePath`, `buildImageUrl`) + vérifications statiques (zoom/pan/nav,
+  absence de `/raw` dans la visionneuse, CSS, icônes).
+- `tests/e2e/image-viewer.spec.js` : ouverture d'une image depuis
+  l'arborescence, réponse `/api/image` en `image/png`, zoom molette, navigation
+  par la pellicule (fixtures `test_vault/sample-image.png` +
+  `sample-vector.svg`).
+
+## Limitations connues
+
+- **HEIC/HEIF** (iPhone) : non décodables par les navigateurs → hors scope ;
+  `pillow-heif` envisagé en v2.
+- Le SVG passe par l'original (pas de rendu bitmap côté serveur) : les
+  miniatures de dossiers SVG ne sont pas générées.