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

CHANGELOG.md

@@ -6,7 +6,7 @@ Format basé sur [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/),
 et [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 > **En cours de développement** : les changements à venir sont listés dans la section
-> [Unreleased](#unreleased). La dernière version livrée est **2.16.6**.
+> [Unreleased](#unreleased). La dernière version livrée est **2.17.0**.
 
 ---
 
@@ -14,6 +14,38 @@ et [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [2.17.0] — 2026-09-23
+
+### Ajouté
+
+- **#108 — Support complet des images (arborescence, visionneuse, indexation)** :
+  les images (`.png .jpg .jpeg .gif .svg .webp .bmp .ico`) apparaissent désormais
+  dans l'arborescence et l'index comme les autres fichiers — nom/taille/date
+  uniquement, jamais les octets (contenu indexé vide, TF-IDF préservé). Nouveau
+  module partagé `backend/media_types.py` (extensions + MIME, socle réutilisé par
+  #109). Visionneuse dédiée : zoom molette 0,1×–8×, pan au glisser, double-clic
+  pour réinitialiser, boutons +/−/reset et badge de zoom, navigation ←/→ entre
+  les images du dossier avec pellicule de miniatures, panneau métadonnées
+  (dimensions, taille, type, chemin, date), lightbox plein écran, « Ouvrir
+  l'original » et téléchargement. Endpoint `GET /api/media/{vault}/thumb`
+  (miniature WebP 256 px, cache disque invalidé par mtime, repli sur l'original
+  pour le SVG, `pillow>=10.0`). Filtre `ext:png`/`ext:jpg` opérationnel ;
+  compteurs d'images séparés dans `/api/dashboard` (`image_count`/`total_images`).
+  Fiche : [docs/features/image-support.md](docs/features/image-support.md).
+
+### Corrigé
+
+- **#108-B1 — Affichage isolé d'une image** : le `<img>` généré par
+  `api_file_view()` pointait vers `/api/file/{vault}/raw` (qui renvoie du JSON)
+  au lieu de `/api/image/{vault}` (octets + MIME correct). Corrigé côté backend
+  et dans `viewer.js` (bouton Plein écran), avec encodage d'URL des chemins.
+- **#108-B3 — XSS via SVG** : `/api/image` (et le repli miniatures) pose
+  `Content-Security-Policy: sandbox` sur les SVG ouverts directement, pour
+  empêcher l'exécution du JavaScript embarqué ; le middleware n'écrase plus une
+  politique stricte posée par une route.
+
+---
+
 ## [2.16.6] — 2026-09-22
 
 ### Ajouté

README.fr.md

@@ -4,7 +4,7 @@
 
 **Porte d'entrée web ultra-léger pour vos vaults Obsidian** — Accédez, naviguez et recherchez dans toutes vos notes Obsidian depuis n'importe quel appareil via une interface web moderne et responsive.
 
-[![Version](https://img.shields.io/badge/Version-2.16.6-blue.svg)]()
+[![Version](https://img.shields.io/badge/Version-2.17.0-blue.svg)]()
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Docker](https://img.shields.io/badge/Docker-Ready-blue.svg)](https://www.docker.com/)
 [![Python](https://img.shields.io/badge/Python-3.11+-green.svg)](https://www.python.org/)
@@ -406,6 +406,18 @@ ObsiGate supporte **toutes les syntaxes d'images Obsidian** avec résolution int
 6. Index de démarrage (match le plus proche)
 7. Fallback : placeholder stylisé `[image not found: filename.ext]`
 
+### Visionneuse & arborescence
+
+Les images sont de plein droit des fichiers du vault : elles apparaissent dans
+l'arborescence, sont indexées (nom + métadonnées, **jamais les octets**) et
+s'ouvrent dans une **visionneuse dédiée** — zoom molette 0,1×–8×, pan au
+glisser, double-clic pour réinitialiser, navigation ←/→ entre les images du
+dossier (avec pellicule de miniatures WebP), panneau de métadonnées, lightbox
+plein écran, ouverture de l'original et téléchargement. Le filtre de recherche
+`ext:png`/`ext:jpg` est disponible. Formats décodables : PNG, JPEG, GIF, WebP,
+BMP, ICO, SVG (SVG servi avec une politique CSP `sandbox`). **HEIC/HEIF**
+(iPhone) n'est pas décodable par les navigateurs et n'est pas pris en charge.
+
 ### Configuration
 
 ```yaml
@@ -637,6 +649,7 @@ ObsiGate expose une API REST complète :
 | `/api/events` | Flux SSE temps réel | GET | Oui |
 | `/api/vaults/add` / `/api/vaults/{name}` | Gestion dynamique des vaults | POST/DELETE | Admin |
 | `/api/image/{vault}?path=` | Servir une image | GET | Oui |
+| `/api/media/{vault}/thumb?path=&size=` | Miniature WebP (cache disque) | GET | Oui |
 | `/api/config` | Lire / écrire la configuration | GET/POST | Oui/Admin |
 | `/api/diagnostics` | Statistiques index et mémoire | GET | Admin |
 
@@ -951,8 +964,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.16.6).
+Consultez le [CHANGELOG.md](./CHANGELOG.md) pour l'historique complet de toutes les versions (v1.0.0 → v2.17.0).
 
 ---
 
-*Projet : ObsiGate | Version : 2.16.6 | Dernière mise à jour : Septembre 2026*
+*Projet : ObsiGate | Version : 2.17.0 | Dernière mise à jour : Septembre 2026*

README.md

@@ -2,7 +2,7 @@
 
 **Ultra-light web gateway for your Obsidian vaults** — Access, browse, and search all your Obsidian notes from any device via a modern, responsive web interface.
 
-[![Version](https://img.shields.io/badge/Version-2.16.6-blue.svg)]()
+[![Version](https://img.shields.io/badge/Version-2.17.0-blue.svg)]()
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Docker](https://img.shields.io/badge/Docker-Ready-blue.svg)](https://www.docker.com/)
 [![Python](https://img.shields.io/badge/Python-3.11+-green.svg)](https://www.python.org/)
@@ -516,6 +516,17 @@ ObsiGate uses 7 resolution strategies in order of priority:
 6. **Startup index (closest match)** : If multiple files have the same name
 7. **Fallback** : Display a styled placeholder `[image not found: filename.ext]`
 
+### Viewer & file tree
+
+Images are first-class vault files: they appear in the tree, are indexed (name +
+metadata, **never the bytes**) and open in a **dedicated viewer** — wheel zoom
+0.1×–8×, drag pan, double-click to reset, ←/→ navigation between images in the
+same folder (WebP thumbnail filmstrip), metadata panel, full-screen lightbox,
+open original and download. The `ext:png`/`ext:jpg` search filter is available.
+Decodable formats: PNG, JPEG, GIF, WebP, BMP, ICO, SVG (SVG served with a
+`sandbox` CSP). **HEIC/HEIF** (iPhone) is not decodable by browsers and is not
+supported.
+
 ### Configuration
 
 To optimize resolution, configure the attachments folder for each vault:
@@ -756,6 +767,7 @@ ObsiGate exposes a complete REST API :
 | `/api/events` | Real-time SSE stream | GET | Yes |
 | `/api/vaults/add` / `/api/vaults/{name}` | Dynamic vault management | POST/DELETE | Admin |
 | `/api/image/{vault}?path=` | Serve an image | GET | Yes |
+| `/api/media/{vault}/thumb?path=&size=` | WebP thumbnail (disk cache) | GET | Yes |
 | `/api/config` | Read / write configuration | GET/POST | Yes/Admin |
 | `/api/diagnostics` | Index and memory statistics | GET | Admin |
 
@@ -1128,8 +1140,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.16.6).
+See [CHANGELOG.md](./CHANGELOG.md) for the complete version history (v1.0.0 → v2.17.0).
 
 ---
 
-*Project: ObsiGate | Version: 2.16.6 | Last updated: September 2026*
+*Project: ObsiGate | Version: 2.17.0 | Last updated: September 2026*

VERSION

@@ -1 +1 @@
-2.16.6
+2.17.0

backend/attachment_indexer.py

@@ -4,10 +4,9 @@ import threading
 from pathlib import Path
 from typing import Any
 
-logger = logging.getLogger("obsigate.attachment_indexer")
+from backend.media_types import IMAGE_EXTENSIONS
 
-# Image file extensions to index
-IMAGE_EXTENSIONS = {".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".bmp", ".ico"}
+logger = logging.getLogger("obsigate.attachment_indexer")
 
 # Global attachment index: {vault_name: {filename_lower: [absolute_path, ...]}}
 attachment_index: dict[str, dict[str, list[Path]]] = {}

backend/indexer.py

@@ -11,6 +11,8 @@ from typing import Any
 
 import frontmatter
 
+from backend.media_types import IMAGE_EXTENSIONS, is_media
+
 logger = logging.getLogger("obsigate.indexer")
 
 # Global in-memory index
@@ -69,7 +71,7 @@ SUPPORTED_EXTENSIONS = {
     ".dockerfile", ".makefile", ".cmake",
     ".excalidraw",
     ".excalidraw.md",
-}
+} | set(IMAGE_EXTENSIONS)
 
 
 # Ignored directories (configurable via OBSIGATE_IGNORED_DIRS env var)
@@ -550,6 +552,13 @@ def _scan_vault(
                     title = fpath.stem.replace(".excalidraw", "").replace("-", " ").replace("_", " ")
                     content_preview = ""
                     excalidraw_text_pending = True
+                elif is_media(ext):
+                    # #108 — images (and future media, #109) are binary: index
+                    # name/size/mtime only and never read the bytes. ``content``
+                    # stays empty so the TF-IDF index remains clean.
+                    raw = ""
+                    title = fpath.stem.replace("-", " ").replace("_", " ")
+                    content_preview = ""
                 else:
                     raw = fpath.read_text(encoding="utf-8", errors="replace")
                     title = fpath.stem.replace("-", " ").replace("_", " ")
@@ -934,6 +943,10 @@ def _index_single_file_sync(vault_name: str, vault_path: str, file_path: str, va
             raw = extract_excalidraw_indexable(raw)
             title = fpath.stem.replace(".excalidraw", "").replace("-", " ").replace("_", " ")
             content_preview = raw[:200].strip()
+        elif is_media(ext):
+            # #108 — binary media: metadata only, never read the bytes.
+            raw = ""
+            content_preview = ""
         else:
             raw = fpath.read_text(encoding="utf-8", errors="replace")
             content_preview = raw[:200].strip()

backend/main.py

@@ -2,7 +2,6 @@ import asyncio
 import html as html_mod
 import json as _json
 import logging
-import mimetypes
 import os
 import re
 import secrets
@@ -16,6 +15,7 @@ from datetime import datetime, timezone
 from functools import partial
 from pathlib import Path
 from typing import Any
+from urllib.parse import quote
 
 import frontmatter
 import mistune
@@ -52,6 +52,8 @@ from backend.indexer import (
     remove_vault_from_index,
     update_single_file,
 )
+from backend.media_thumbs import generate_thumbnail, is_decodable
+from backend.media_types import IMAGE_EXTENSIONS, is_image, media_mime_type
 from backend.openapi_docs import (
     API_DESCRIPTION,
     TAGS_METADATA,
@@ -699,6 +701,9 @@ class SecurityHeadersMiddleware(BaseHTTPMiddleware):
         response.headers["X-Frame-Options"] = "SAMEORIGIN"
         response.headers["X-XSS-Protection"] = "1; mode=block"
         response.headers["Referrer-Policy"] = "strict-origin-when-cross-origin"
+        # A route may set a stricter per-response policy (e.g. ``sandbox`` for
+        # standalone SVG, #108-B3); keep it instead of overwriting it.
+        if "Content-Security-Policy" not in response.headers:
             response.headers["Content-Security-Policy"] = (
                 "default-src 'self'; "
                 "script-src 'self' 'unsafe-inline' blob: https://cdnjs.cloudflare.com https://unpkg.com https://esm.sh https://cdn.jsdelivr.net https://static.cloudflareinsights.com; "
@@ -2409,19 +2414,18 @@ async def api_file(vault_name: str, path: str = Query(..., description="Relative
             raise HTTPException(status_code=500, detail=f"Error reading PDF: {e!s}")
 
     # === Images: return as viewable image ===
-    IMAGE_EXTENSIONS = {".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".bmp", ".ico"}
-    if ext in IMAGE_EXTENSIONS:
+    if is_image(ext):
         size = file_path.stat().st_size
-        mime_map = {
-            ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg",
-            ".gif": "image/gif", ".svg": "image/svg+xml", ".webp": "image/webp",
-            ".bmp": "image/bmp", ".ico": "image/x-icon",
-        }
-        mime = mime_map.get(ext, "application/octet-stream")
+        mime = media_mime_type(str(file_path))
+        # #108-B1 — the raw endpoint returns JSON (FileRawResponse), so the
+        # standalone <img> must point to /api/image, which serves the bytes
+        # with the right MIME type. Paths are URL-encoded (accents, spaces).
+        img_url = f"/api/image/{quote(vault_name, safe='')}?path={quote(path, safe='')}"
         html = (
             f'<div class="image-viewer">'
-            f'<img src="/api/file/{vault_name}/raw?path={path}" '
-            f'alt="{file_path.name}" style="max-width:100%;max-height:80vh;object-fit:contain" />'
+            f'<img src="{img_url}" '
+            f'alt="{html_mod.escape(file_path.name, quote=True)}" '
+            f'style="max-width:100%;max-height:80vh;object-fit:contain" />'
             f'</div>'
         )
         return {
@@ -3183,16 +3187,19 @@ async def api_image(vault_name: str, path: str = Query(..., description="Relativ
     if not file_path.exists() or not file_path.is_file():
         raise HTTPException(status_code=404, detail=f"Image not found: {path}")
 
-    # Determine MIME type
-    mime_type, _ = mimetypes.guess_type(str(file_path))
-    if not mime_type:
-        # Default to octet-stream if unknown
-        mime_type = "application/octet-stream"
+    mime_type = media_mime_type(str(file_path))
+
+    # #108-B3 — a standalone SVG opened in a tab executes its embedded JS
+    # (same-origin XSS). ``sandbox`` forces a unique opaque origin with no
+    # script execution; inside an <img> tag the header is irrelevant.
+    headers = {"X-Content-Type-Options": "nosniff"}
+    if file_path.suffix.lower() == ".svg":
+        headers["Content-Security-Policy"] = "sandbox"
 
     try:
         # Read and return the image file
         content = file_path.read_bytes()
-        return Response(content=content, media_type=mime_type)
+        return Response(content=content, media_type=mime_type, headers=headers)
     except PermissionError:
         raise HTTPException(status_code=403, detail="Permission denied")
     except Exception as e:
@@ -3200,6 +3207,55 @@ async def api_image(vault_name: str, path: str = Query(..., description="Relativ
         raise HTTPException(status_code=500, detail=f"Error serving image: {e!s}")
 
 
+@app.get("/api/media/{vault_name}/thumb", response_class=FileResponse)
+async def api_media_thumb(
+    vault_name: str,
+    path: str = Query(..., description="Relative path to image"),
+    size: int = Query(256, ge=32, le=1024, description="Max thumbnail edge in pixels"),
+    current_user=Depends(require_auth),
+):
+    """Serve a cached WebP thumbnail of an image (roadmap #108-C).
+
+    SVG (and any format Pillow cannot decode) falls back to the original
+    bytes. Generation runs in a thread and is capped at 2 s; on timeout or
+    failure the original is served so the UI never breaks.
+    """
+    if not check_vault_access(vault_name, current_user):
+        raise HTTPException(status_code=403, detail=f"Accès refusé à la vault '{vault_name}'")
+    vault_data = get_vault_data(vault_name)
+    if not vault_data:
+        raise HTTPException(status_code=404, detail=f"Vault '{vault_name}' not found")
+
+    vault_root = Path(vault_data["path"])
+    file_path = _resolve_safe_path(vault_root, path)
+    if not file_path.exists() or not file_path.is_file():
+        raise HTTPException(status_code=404, detail=f"Image not found: {path}")
+    if not is_image(file_path.suffix.lower()):
+        raise HTTPException(status_code=400, detail="Not an image file")
+
+    mime_type = media_mime_type(str(file_path))
+    if not is_decodable(file_path):
+        # SVG: never let a standalone navigation execute embedded JS (#108-B3).
+        svg_headers = {"X-Content-Type-Options": "nosniff"}
+        if file_path.suffix.lower() == ".svg":
+            svg_headers["Content-Security-Policy"] = "sandbox"
+        return FileResponse(str(file_path), media_type=mime_type, headers=svg_headers)
+
+    loop = asyncio.get_running_loop()
+    thumb: Path | None = None
+    try:
+        thumb = await asyncio.wait_for(
+            loop.run_in_executor(None, generate_thumbnail, file_path, size),
+            timeout=2.0,
+        )
+    except Exception:
+        thumb = None
+
+    if thumb is not None and thumb.exists():
+        return FileResponse(str(thumb), media_type="image/webp")
+    return FileResponse(str(file_path), media_type=mime_type)
+
+
 @app.post("/api/attachments/rescan/{vault_name}", response_model=AttachmentRescanResponse)
 async def api_rescan_attachments(vault_name: str, current_user=Depends(require_admin)):
     """Rescan attachments for a specific vault.
@@ -4092,6 +4148,7 @@ async def api_dashboard(current_user=Depends(require_auth)):
     total_files = 0
     total_tags = set()
     total_size = 0
+    total_images = 0
     for vname, vdata in index.items():
         if "*" not in user_vaults and vname not in user_vaults:
             continue
@@ -4100,13 +4157,26 @@ async def api_dashboard(current_user=Depends(require_auth)):
         total_files += fc
         vtags = set()
         vsize = 0
+        vimages = 0
         for f in files:
             vtags.update(f.get("tags", []))
             vsize += f.get("size", 0)
+            if (f.get("extension") or "").lower() in IMAGE_EXTENSIONS:
+                vimages += 1
         total_tags.update(vtags)
         total_size += vsize
-        vault_stats.append({"name": vname, "file_count": fc, "tag_count": len(vtags), "total_size_bytes": vsize})
-    return {"vaults": vault_stats, "total_files": total_files, "total_tags": len(total_tags), "total_size_bytes": total_size}
+        total_images += vimages
+        vault_stats.append({
+            "name": vname, "file_count": fc, "tag_count": len(vtags),
+            "total_size_bytes": vsize, "image_count": vimages,
+        })
+    return {
+        "vaults": vault_stats,
+        "total_files": total_files,
+        "total_tags": len(total_tags),
+        "total_size_bytes": total_size,
+        "total_images": total_images,
+    }
 
 
 # ---------------------------------------------------------------------------

backend/media_thumbs.py

@@ -0,0 +1,74 @@
+"""Image thumbnail generation and disk cache (roadmap #108-C).
+
+Thumbnails are generated on demand with Pillow and cached under
+``<OBSIGATE_DATA_DIR>/.obsigate-cache/thumbs/<sha1>.webp``. The cache key
+embeds the source path, mtime (ns) and size, so an edited image naturally
+invalidates its stale thumbnail without any explicit cleanup.
+"""
+
+from __future__ import annotations
+
+import hashlib
+import os
+from pathlib import Path
+
+DEFAULT_THUMB_SIZE = 256
+
+# Extensions Pillow cannot decode without extra native libraries: served as-is.
+_UNDECODABLE = {".svg"}
+
+
+def thumbs_cache_dir() -> Path:
+    """Return (and create) the thumbnail cache directory."""
+    base = Path(os.environ.get("OBSIGATE_DATA_DIR", "data")) / ".obsigate-cache" / "thumbs"
+    base.mkdir(parents=True, exist_ok=True)
+    return base
+
+
+def thumb_cache_path(file_path: Path, size: int) -> Path:
+    """Compute the deterministic cache path for *file_path* at *size*."""
+    try:
+        st = file_path.stat()
+        stamp = f"{st.st_mtime_ns}:{st.st_size}"
+    except OSError:
+        stamp = "0:0"
+    key = hashlib.sha1(f"{file_path}:{stamp}:{size}".encode()).hexdigest()
+    return thumbs_cache_dir() / f"{key}.webp"
+
+
+def is_decodable(file_path: Path) -> bool:
+    """True when Pillow can be expected to decode *file_path*."""
+    return file_path.suffix.lower() not in _UNDECODABLE
+
+
+def generate_thumbnail(file_path: Path, size: int = DEFAULT_THUMB_SIZE) -> Path | None:
+    """Generate (or reuse) a WebP thumbnail and return its path.
+
+    Returns ``None`` when the file cannot be decoded (e.g. SVG) or Pillow is
+    unavailable, so the caller can fall back to serving the original.
+    """
+    cache_path = thumb_cache_path(file_path, size)
+    if cache_path.exists():
+        return cache_path
+
+    try:
+        from PIL import Image, ImageOps
+    except Exception:  # pragma: no cover - Pillow is an optional runtime dep
+        return None
+
+    try:
+        with Image.open(file_path) as opened:
+            # Animated formats: keep only the first frame.
+            if getattr(opened, "is_animated", False):
+                opened.seek(0)
+            img = ImageOps.exif_transpose(opened) or opened
+            if img.mode not in ("RGB", "RGBA"):
+                img = img.convert("RGBA")
+            img.thumbnail((size, size))
+
+            tmp = cache_path.with_suffix(".tmp")
+            img.save(tmp, "WEBP", quality=80)
+        os.replace(tmp, cache_path)
+        return cache_path
+    except Exception:
+        return None

backend/media_types.py

@@ -0,0 +1,76 @@
+"""Shared media type constants and helpers.
+
+Single source of truth for the file extensions and MIME types handled by the
+image support (roadmap #108) and reused by the audio/video players (#109).
+Keeping these sets here avoids the previous duplication (``indexer.py``,
+``attachment_indexer.py`` and ``main.py`` each carried their own copy).
+"""
+
+from __future__ import annotations
+
+import mimetypes
+
+# Image extensions viewable in the browser (HEIC/HEIF deliberately excluded —
+# no browser decodes them natively; see roadmap #108).
+IMAGE_EXTENSIONS: frozenset[str] = frozenset({
+    ".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".bmp", ".ico",
+})
+
+# Audio extensions (socle for #109, not wired into the index yet).
+AUDIO_EXTENSIONS: frozenset[str] = frozenset({
+    ".mp3", ".m4a", ".aac", ".wav", ".ogg", ".oga", ".opus", ".flac",
+})
+
+# Video extensions (socle for #109, not wired into the index yet).
+VIDEO_EXTENSIONS: frozenset[str] = frozenset({
+    ".mp4", ".webm", ".mov", ".m4v",
+})
+
+MEDIA_EXTENSIONS: frozenset[str] = IMAGE_EXTENSIONS | AUDIO_EXTENSIONS | VIDEO_EXTENSIONS
+
+# Explicit MIME types for extensions ``mimetypes`` gets wrong or does not know.
+_MIME_OVERRIDES: dict[str, str] = {
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".svg": "image/svg+xml",
+    ".ico": "image/x-icon",
+    ".webp": "image/webp",
+    ".m4a": "audio/mp4",
+    ".oga": "audio/ogg",
+    ".opus": "audio/ogg",
+    ".mov": "video/quicktime",
+    ".m4v": "video/mp4",
+}
+
+
+def is_image(ext: str) -> bool:
+    """Return True when *ext* (with leading dot, any case) is an image."""
+    return ext.lower() in IMAGE_EXTENSIONS
+
+
+def is_audio(ext: str) -> bool:
+    """Return True when *ext* is an audio extension."""
+    return ext.lower() in AUDIO_EXTENSIONS
+
+
+def is_video(ext: str) -> bool:
+    """Return True when *ext* is a video extension."""
+    return ext.lower() in VIDEO_EXTENSIONS
+
+
+def is_media(ext: str) -> bool:
+    """Return True when *ext* is any supported image/audio/video extension."""
+    return ext.lower() in MEDIA_EXTENSIONS
+
+
+def media_mime_type(path: str) -> str:
+    """Return the best MIME type for *path* (extension based).
+
+    Falls back to ``application/octet-stream`` when the type is unknown.
+    """
+    lower = path.lower()
+    for ext, mime in _MIME_OVERRIDES.items():
+        if lower.endswith(ext):
+            return mime
+    guessed, _ = mimetypes.guess_type(path)
+    return guessed or "application/octet-stream"

backend/requirements.txt

@@ -24,3 +24,4 @@ sse-starlette==2.1.3
 openpyxl>=3.1
 python-docx>=1.1
 reportlab>=4.0
+pillow>=10.0

backend/schemas.py

@@ -395,6 +395,7 @@ class DashboardVaultStat(BaseModel):
     file_count: int
     tag_count: int
     total_size_bytes: int
+    image_count: int = 0
 
 
 class DashboardResponse(BaseModel):
@@ -404,6 +405,7 @@ class DashboardResponse(BaseModel):
     total_files: int
     total_tags: int
     total_size_bytes: int
+    total_images: int = 0
 
 
 # ---------------------------------------------------------------------------

desktop/Cargo.lock

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

desktop/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "obsigate-desktop"
-version = "2.16.6"
+version = "2.17.0"
 description = "ObsiGate Desktop — Porte d'entrée native pour vos vaults Obsidian"
 authors = ["Bruno Charest"]
 edition = "2021"

desktop/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/nicedoc/obsigate/main/desktop/tauri.conf.schema.json",
   "productName": "ObsiGate",
-  "version": "2.16.6",
+  "version": "2.17.0",
   "identifier": "com.obsigate.desktop",
   "build": {
     "frontendDist": "../frontend",

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.

frontend/js/utils.js

@@ -201,17 +201,17 @@ const EXT_ICONS = {
   ".tex": "file-text",
   ".latex": "file-text",
 
-  // Image files
-  ".png": "file-image",
-  ".jpg": "file-image",
-  ".jpeg": "file-image",
-  ".gif": "file-image",
-  ".svg": "file-image",
-  ".webp": "file-image",
-  ".bmp": "file-image",
-  ".ico": "file-image",
-  ".tiff": "file-image",
-  ".tif": "file-image",
+  // Image files (roadmap #108-D1)
+  ".png": "image",
+  ".jpg": "image",
+  ".jpeg": "image",
+  ".gif": "image",
+  ".svg": "image",
+  ".webp": "image",
+  ".bmp": "image",
+  ".ico": "image",
+  ".tiff": "image",
+  ".tif": "image",
 
   // Audio files
   ".mp3": "file-music",

frontend/js/viewer.js

@@ -540,12 +540,257 @@ export function navigatePdfToPage(area, page) {
   iframe.src = `${base}${sep}_pdfpage=${Date.now()}#page=${page}`;
 }
 
+// ---------------------------------------------------------------------------
+// Image viewer (roadmap #108-D)
+// ---------------------------------------------------------------------------
+const IMAGE_EXTS = new Set([".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".bmp", ".ico"]);
+const IMAGE_ZOOM_MIN = 0.1;
+const IMAGE_ZOOM_MAX = 8;
+let _imageViewerCleanup = null;
+
+/** Clamp a zoom factor into the supported [0.1, 8] range. */
+export function clampImageZoom(value) {
+  if (!Number.isFinite(value)) return 1;
+  return Math.min(IMAGE_ZOOM_MAX, Math.max(IMAGE_ZOOM_MIN, value));
+}
+
+/** True when *p* has a viewable image extension. */
+export function isImagePath(p) {
+  const lower = (p || "").toLowerCase();
+  const dot = lower.lastIndexOf(".");
+  return dot !== -1 && IMAGE_EXTS.has(lower.slice(dot));
+}
+
+/** Build the byte-serving URL used by <img> / thumbnails. */
+export function buildImageUrl(vault, path) {
+  return `/api/image/${encodeURIComponent(vault)}?path=${encodeURIComponent(path)}`;
+}
+
+function buildThumbUrl(vault, path, size) {
+  return `/api/media/${encodeURIComponent(vault)}/thumb?path=${encodeURIComponent(path)}&size=${size}`;
+}
+
+function formatBytes(n) {
+  if (!n && n !== 0) return "";
+  if (n < 1024) return `${n} o`;
+  if (n < 1048576) return `${(n / 1024).toFixed(1)} Ko`;
+  return `${(n / 1048576).toFixed(1)} Mo`;
+}
+
+/**
+ * Render a full image viewer: centered image, wheel zoom (0.1×–8×), drag pan,
+ * double-click reset, ←/→ navigation between siblings, thumbnail filmstrip,
+ * collapsible metadata panel and a full-viewport lightbox.
+ */
+export function renderImageViewer(area, data) {
+  const vault = data.vault;
+  const path = data.path;
+  const fileName = (path || "").split("/").pop();
+  const imgUrl = buildImageUrl(vault, path);
+
+  area.innerHTML = "";
+  const container = el("div", { class: "image-viewer-container", tabindex: "0" });
+
+  // ── Toolbar ────────────────────────────────────────────────────────────
+  const toolbar = el("div", { class: "image-toolbar" });
+  toolbar.appendChild(el("span", { class: "image-title", title: path }, [
+    document.createTextNode(data.title || fileName),
+  ]));
+  toolbar.appendChild(el("div", { class: "image-toolbar-spacer" }));
+
+  const zoomBadge = el("span", { class: "image-zoom-badge" }, [document.createTextNode("100%")]);
+  toolbar.appendChild(zoomBadge);
+
+  const mkBtn = (iconName, label, cls) => {
+    const b = el("button", { class: `btn-action${cls ? " " + cls : ""}`, type: "button", title: label, "aria-label": label }, [icon(iconName, 14)]);
+    return b;
+  };
+
+  const zoomOutBtn = mkBtn("zoom-out", t("viewer.image_zoom_out"));
+  const zoomInBtn = mkBtn("zoom-in", t("viewer.image_zoom_in"));
+  const zoomResetBtn = mkBtn("rotate-ccw", t("viewer.image_zoom_reset"));
+  const prevBtn = mkBtn("chevron-left", t("viewer.image_prev"));
+  const nextBtn = mkBtn("chevron-right", t("viewer.image_next"));
+  const originalBtn = mkBtn("external-link", t("viewer.image_open_original"));
+  const downloadBtn = mkBtn("download", t("viewer.download"));
+  const metaBtn = mkBtn("info", t("viewer.image_metadata"));
+  const lightboxBtn = mkBtn("maximize", t("viewer.image_fullscreen"));
+  [prevBtn, nextBtn, zoomOutBtn, zoomInBtn, zoomResetBtn, metaBtn, originalBtn, downloadBtn, lightboxBtn]
+    .forEach((b) => toolbar.appendChild(b));
+  container.appendChild(toolbar);
+
+  // ── Stage (image + pan/zoom) ───────────────────────────────────────────
+  const stage = el("div", { class: "image-stage" });
+  const img = el("img", { class: "image-main", src: imgUrl, alt: data.title || fileName, draggable: "false" });
+  stage.appendChild(img);
+  container.appendChild(stage);
+
+  // ── Thumbnail filmstrip (navigation) ───────────────────────────────────
+  const strip = el("div", { class: "image-nav-strip", hidden: true });
+  container.appendChild(strip);
+
+  // ── Metadata panel ─────────────────────────────────────────────────────
+  const metaPanel = el("div", { class: "image-meta-panel" });
+  metaPanel.hidden = true;
+  container.appendChild(metaPanel);
+
+  let scale = 1;
+  let tx = 0;
+  let ty = 0;
+
+  const applyTransform = () => {
+    img.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
+    zoomBadge.textContent = `${Math.round(scale * 100)}%`;
+  };
+  const resetView = () => { scale = 1; tx = 0; ty = 0; applyTransform(); };
+  const setZoom = (next) => {
+    scale = clampImageZoom(next);
+    if (scale === 1) { tx = 0; ty = 0; }
+    applyTransform();
+  };
+
+  const renderMeta = () => {
+    const rows = [
+      [t("viewer.image_type"), data.image_mime || ""],
+      [t("viewer.image_dimensions"), img.naturalWidth ? `${img.naturalWidth} × ${img.naturalHeight}` : ""],
+      [t("viewer.metadata_size"), formatBytes(data.size_bytes)],
+      [t("viewer.metadata_path"), path],
+    ];
+    if (data.modified) rows.push([t("viewer.metadata_modified"), data.modified]);
+    metaPanel.innerHTML = "";
+    const dl = el("dl", {});
+    rows.forEach(([k, v]) => {
+      dl.appendChild(el("dt", {}, [document.createTextNode(k)]));
+      dl.appendChild(el("dd", {}, [document.createTextNode(v || "—")]));
+    });
+    metaPanel.appendChild(dl);
+  };
+
+  // ── Sibling navigation ─────────────────────────────────────────────────
+  let siblings = [];
+  let currentIndex = -1;
+
+  const go = (delta) => {
+    if (siblings.length < 2 || currentIndex < 0) return;
+    const next = (currentIndex + delta + siblings.length) % siblings.length;
+    openFile(vault, siblings[next].path);
+  };
+
+  const renderStrip = () => {
+    if (siblings.length < 2) { strip.hidden = true; return; }
+    strip.hidden = false;
+    strip.innerHTML = "";
+    siblings.forEach((s, i) => {
+      const thumb = el("img", {
+        class: `image-thumb${i === currentIndex ? " active" : ""}`,
+        src: buildThumbUrl(vault, s.path, 96),
+        alt: s.name,
+        title: s.name,
+        loading: "lazy",
+      });
+      thumb.addEventListener("click", () => { if (s.path !== path) openFile(vault, s.path); });
+      strip.appendChild(thumb);
+    });
+  };
+
+  (async () => {
+    try {
+      const dir = path.includes("/") ? path.slice(0, path.lastIndexOf("/")) : "";
+      const res = await api(`/api/browse/${encodeURIComponent(vault)}?path=${encodeURIComponent(dir)}`);
+      siblings = (res.items || []).filter((it) => it.type === "file" && isImagePath(it.path));
+      currentIndex = siblings.findIndex((it) => it.path === path);
+      prevBtn.disabled = nextBtn.disabled = siblings.length < 2;
+      renderStrip();
+    } catch (_) { /* navigation is best-effort */ }
+  })();
+
+  // ── Interactions ───────────────────────────────────────────────────────
+  stage.addEventListener("wheel", (e) => {
+    e.preventDefault();
+    const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+    setZoom(scale * factor);
+  }, { passive: false });
+
+  let dragging = false;
+  let startX = 0;
+  let startY = 0;
+  let startTx = 0;
+  let startTy = 0;
+  stage.addEventListener("pointerdown", (e) => {
+    if (e.button !== 0) return;
+    dragging = true;
+    startX = e.clientX; startY = e.clientY; startTx = tx; startTy = ty;
+    stage.classList.add("panning");
+    if (stage.setPointerCapture) stage.setPointerCapture(e.pointerId);
+  });
+  stage.addEventListener("pointermove", (e) => {
+    if (!dragging) return;
+    tx = startTx + (e.clientX - startX);
+    ty = startTy + (e.clientY - startY);
+    applyTransform();
+  });
+  const endDrag = (e) => {
+    dragging = false;
+    stage.classList.remove("panning");
+    if (stage.releasePointerCapture && e.pointerId != null) {
+      try { stage.releasePointerCapture(e.pointerId); } catch (_) { /* already released */ }
+    }
+  };
+  stage.addEventListener("pointerup", endDrag);
+  stage.addEventListener("pointercancel", endDrag);
+  stage.addEventListener("dblclick", resetView);
+
+  zoomInBtn.addEventListener("click", () => setZoom(scale * 1.25));
+  zoomOutBtn.addEventListener("click", () => setZoom(scale / 1.25));
+  zoomResetBtn.addEventListener("click", resetView);
+  prevBtn.addEventListener("click", () => go(-1));
+  nextBtn.addEventListener("click", () => go(1));
+  originalBtn.addEventListener("click", () => window.open(imgUrl, "_blank"));
+  downloadBtn.addEventListener("click", () => {
+    const dlUrl = `/api/file/${encodeURIComponent(vault)}/download?path=${encodeURIComponent(path)}`;
+    window.open(dlUrl, "_blank");
+  });
+  metaBtn.addEventListener("click", () => {
+    metaPanel.hidden = !metaPanel.hidden;
+    if (!metaPanel.hidden) renderMeta();
+  });
+  lightboxBtn.addEventListener("click", () => {
+    container.classList.toggle("lightbox");
+    lightboxBtn.setAttribute("aria-pressed", container.classList.contains("lightbox") ? "true" : "false");
+  });
+
+  img.addEventListener("load", () => { if (!metaPanel.hidden) renderMeta(); });
+  img.addEventListener("error", () => {
+    stage.innerHTML = "";
+    stage.appendChild(el("div", { class: "image-error" }, [document.createTextNode(t("viewer.image_error"))]));
+  });
+
+  const onKey = (e) => {
+    if (e.key === "ArrowLeft") { e.preventDefault(); go(-1); }
+    else if (e.key === "ArrowRight") { e.preventDefault(); go(1); }
+    else if (e.key === "+" || e.key === "=") { e.preventDefault(); setZoom(scale * 1.25); }
+    else if (e.key === "-") { e.preventDefault(); setZoom(scale / 1.25); }
+    else if (e.key === "0") { e.preventDefault(); resetView(); }
+    else if (e.key === "Escape") { container.classList.remove("lightbox"); }
+  };
+  document.addEventListener("keydown", onKey);
+  _imageViewerCleanup = () => document.removeEventListener("keydown", onKey);
+
+  area.appendChild(container);
+  safeCreateIcons();
+  applyTransform();
+  try { container.focus({ preventScroll: true }); } catch (_) { /* non-fatal */ }
+}
+
 export function renderFile(data) {
   // #93 — An inline edition session (#editor-container mounted in the content
   // area) is destroyed by this very re-render: release it first so the editor
   // state (CodeMirror view, Forge iframe, Yjs session) is torn down cleanly
   // instead of being wiped mid-session by a tab switch / sidebar click.
   if (isInlineEditorActive()) detachInlineEditor();
+  // #108 — release the image viewer's document-level shortcuts before swapping
+  // the content area (otherwise they leak on every re-render).
+  if (_imageViewerCleanup) { _imageViewerCleanup(); _imageViewerCleanup = null; }
   const area = getContentArea();
 
   // Handle PDF files — render in iframe with TOC sidebar
@@ -596,25 +841,9 @@ export function renderFile(data) {
     return;
   }
 
-  // Handle images
+  // Handle images — dedicated zoom/pan viewer (roadmap #108-D)
   if (data.is_image) {
-    const imgUrl = `/api/file/${encodeURIComponent(data.vault)}/raw?path=${encodeURIComponent(data.path)}`;
-    area.innerHTML = `
-      <div class="image-viewer-container">
-        <div class="file-toolbar">
-          <span class="file-info">${escapeHtml(data.title)}</span>
-          <button class="btn-action" onclick="window.open('${imgUrl}', '_blank')">
-            <i data-lucide="maximize" style="width:14px;height:14px"></i> Plein écran
-          </button>
-          <button class="btn-action" onclick="window.open('/api/file/${encodeURIComponent(data.vault)}/download?path=${encodeURIComponent(data.path)}', '_blank')">
-            <i data-lucide="download" style="width:14px;height:14px"></i> Télécharger
-          </button>
-        </div>
-        <div class="image-viewer-body">
-          ${data.html}
-        </div>
-      </div>`;
-    lucide.createIcons();
+    renderImageViewer(area, data);
     return;
   }
 

frontend/locales/en.json

@@ -1823,6 +1823,17 @@
   "viewer.export_title": "Export document",
   "viewer.forge_brand": "Forge",
   "viewer.forge_title": "Forge (new editor)",
+  "viewer.image_dimensions": "Dimensions",
+  "viewer.image_error": "Unable to load the image",
+  "viewer.image_fullscreen": "Full screen (lightbox)",
+  "viewer.image_metadata": "Metadata",
+  "viewer.image_next": "Next image",
+  "viewer.image_open_original": "Open original",
+  "viewer.image_prev": "Previous image",
+  "viewer.image_type": "Type",
+  "viewer.image_zoom_in": "Zoom in",
+  "viewer.image_zoom_out": "Zoom out",
+  "viewer.image_zoom_reset": "Reset zoom",
   "viewer.index_start": "Starting index...",
   "viewer.index_updated": "Updated",
   "viewer.loaded_from_cache": "File loaded from offline cache",
@@ -2116,7 +2127,7 @@
     "guide105.lib_h3_conflicts": "Sync conflicts",
     "guide105.lib_conflicts": "If you sync the vault with Syncthing, ObsiGate detects conflict files (\"sync-conflict\" copies) and offers to compare then resolve them from a dedicated page in the Options menu.",
     "guide105.lib_h3_attach": "Attachments & media",
-    "guide105.lib_attach": "Inline <code>![[image.png]]</code> images, attachments and media (audio, video, embedded PDFs) are rendered in the viewer and indexed for search; the \"Rescan attachments\" button in Configuration rebuilds the attachment index.",
+    "guide105.lib_attach": "Inline <code>![[image.png]]</code> images, attachments and media (audio, video, embedded PDFs) are rendered in the viewer and indexed for search. Images also appear in the file tree and open in a dedicated viewer (wheel zoom, pan, navigation between images in the folder, thumbnails, metadata, lightbox); the \"Rescan attachments\" button in Configuration rebuilds the attachment index.",
     "guide105.off_pwa": "ObsiGate is a PWA: install it (install icon in the address bar) to open it like an app. The service worker caches the UI and your recently viewed documents.",
     "guide105.off_edit": "Offline you can read cached documents and even edit them: changes are queued in IndexedDB.",
     "guide105.off_sync": "When back online the queue replays automatically (sync badge in the header). If the server version diverged meanwhile, the file is flagged as conflict and the server copy is kept as a backup.",

frontend/locales/fr.json

@@ -1823,6 +1823,17 @@
   "viewer.export_title": "Exporter le document",
   "viewer.forge_brand": "Forge",
   "viewer.forge_title": "Forge (nouvel éditeur)",
+  "viewer.image_dimensions": "Dimensions",
+  "viewer.image_error": "Impossible de charger l'image",
+  "viewer.image_fullscreen": "Plein écran (lightbox)",
+  "viewer.image_metadata": "Métadonnées",
+  "viewer.image_next": "Image suivante",
+  "viewer.image_open_original": "Ouvrir l'original",
+  "viewer.image_prev": "Image précédente",
+  "viewer.image_type": "Type",
+  "viewer.image_zoom_in": "Zoom avant",
+  "viewer.image_zoom_out": "Zoom arrière",
+  "viewer.image_zoom_reset": "Réinitialiser le zoom",
   "viewer.index_start": "Démarrage index.",
   "viewer.index_updated": "Mise à jour",
   "viewer.loaded_from_cache": "Fichier chargé depuis le cache hors-ligne",
@@ -2116,7 +2127,7 @@
     "guide105.lib_h3_conflicts": "Conflits de synchronisation",
     "guide105.lib_conflicts": "Si vous synchronisez le vault avec Syncthing, ObsiGate détecte les fichiers de conflit (copies « sync-conflict ») et propose de les comparer puis résoudre depuis la page dédiée du menu Options.",
     "guide105.lib_h3_attach": "Fichiers joints & médias",
-    "guide105.lib_attach": "Les images <code>![[image.png]]</code>, pièces jointes et médias (audio, vidéo, PDF intégrés) dans les notes sont rendus dans le viewer et indexés pour la recherche ; le bouton « Rescan attachments » de la configuration recrée l'index des pièces jointes.",
+    "guide105.lib_attach": "Les images <code>![[image.png]]</code>, pièces jointes et médias (audio, vidéo, PDF intégrés) dans les notes sont rendus dans le viewer et indexés pour la recherche. Les images apparaissent aussi dans l'arborescence et s'ouvrent dans une visionneuse dédiée (zoom molette, pan, navigation entre images du dossier, miniatures, métadonnées, lightbox) ; le bouton « Rescan attachments » de la configuration recrée l'index des pièces jointes.",
     "guide105.off_pwa": "ObsiGate est une PWA : installez-la (icône d'installation de la barre d'adresse) pour l'ouvrir comme une application. Le service worker met en cache l'interface et vos derniers documents consultés.",
     "guide105.off_edit": "Hors-ligne, vous pouvez lire les documents en cache et même les éditer : les modifications sont mises en file d'attente dans IndexedDB.",
     "guide105.off_sync": "Au retour en ligne, la file se rejoue automatiquement (badge de synchronisation dans l'en-tête). Si la version serveur a divergé entre-temps, le fichier est marqué en conflit et la version serveur est préservée en backup.",

frontend/style.css

@@ -9639,6 +9639,133 @@ body.desktop-mode .editor-container {
   box-shadow: 0 2px 12px rgba(0,0,0,0.15);
 }
 
+/* #108-D — dedicated image viewer: zoom, pan, filmstrip, metadata, lightbox */
+.image-viewer-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  outline: none;
+}
+.image-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--surface1);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.image-toolbar .image-title {
+  color: var(--text);
+  font-size: 0.85rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 40%;
+}
+.image-toolbar-spacer {
+  flex: 1;
+}
+.image-zoom-badge {
+  font-variant-numeric: tabular-nums;
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  min-width: 46px;
+  text-align: center;
+}
+.image-stage {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  background: var(--surface2);
+  cursor: grab;
+  touch-action: none;
+}
+.image-stage.panning {
+  cursor: grabbing;
+}
+.image-main {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  transform-origin: center center;
+  user-select: none;
+  -webkit-user-drag: none;
+  will-change: transform;
+}
+.image-error {
+  color: var(--text-dim);
+  font-size: 0.9rem;
+}
+.image-nav-strip {
+  display: flex;
+  gap: 6px;
+  padding: 8px;
+  overflow-x: auto;
+  background: var(--surface1);
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.image-nav-strip[hidden] {
+  display: none;
+}
+.image-thumb {
+  width: 72px;
+  height: 72px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  opacity: 0.65;
+  flex-shrink: 0;
+}
+.image-thumb:hover {
+  opacity: 1;
+}
+.image-thumb.active {
+  border-color: var(--accent);
+  opacity: 1;
+}
+.image-meta-panel {
+  padding: 10px 16px;
+  background: var(--surface1);
+  border-top: 1px solid var(--border);
+  font-size: 0.8rem;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+.image-meta-panel[hidden] {
+  display: none;
+}
+.image-meta-panel dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 12px;
+  margin: 0;
+}
+.image-meta-panel dt {
+  color: var(--text-dim);
+}
+.image-meta-panel dd {
+  margin: 0;
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+.image-viewer-container.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  background: rgba(0, 0, 0, 0.9);
+}
+.image-viewer-container.lightbox .image-nav-strip,
+.image-viewer-container.lightbox .image-meta-panel {
+  display: none;
+}
+
 /* ── Text / CSV Viewer ── */
 .text-viewer-container {
   display: flex;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "obsigate",
-  "version": "2.16.6",
+  "version": "2.17.0",
   "description": "**Porte d'entrée web ultra-léger pour vos vaults Obsidian** — Accédez, naviguez et recherchez dans toutes vos notes Obsidian depuis n'importe quel appareil via une interface web moderne et responsive.",
   "main": "patch.js",
   "directories": {

test_vault/sample-vector.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="64" viewBox="0 0 96 64">
+  <rect width="96" height="64" fill="#2a7de1" />
+  <circle cx="48" cy="32" r="20" fill="#ffc828" />
+</svg>

tests/conftest.py

@@ -94,6 +94,18 @@ def test_vault_dir(tmp_path: Path) -> str:
     # Non-markdown file
     (vault / "config.json").write_text('{"key": "value"}', encoding="utf-8")
 
+    # Image attachments (roadmap #108) — indexed as metadata-only binaries and
+    # listed in the tree / browse endpoint.
+    import base64
+
+    (vault / "chatScreenshot.png").write_bytes(base64.b64decode(
+        "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAen63NgAAAAASUVORK5CYII="
+    ))
+    (vault / "vector-icon.svg").write_text(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"></svg>',
+        encoding="utf-8",
+    )
+
     # File with accents in title
     (vault / "café_crème.md").write_text(
         "---\ntitle: Café Crème\n---\n# Café Crème\nUn bon café.\n",

tests/e2e/image-viewer.spec.js

@@ -0,0 +1,98 @@
+/**
+ * E2E tests for the ObsiGate image viewer (roadmap #108).
+ *
+ * Fixtures : `test_vault/sample-image.png` (96x64) + `test_vault/sample-vector.svg`.
+ *
+ * Run (local):
+ *   BASE_URL=http://localhost:2029 npx playwright test tests/e2e/image-viewer.spec.js
+ *   BASE_URL=http://localhost:2029 npx playwright test tests/e2e/image-viewer.spec.js --headed
+ */
+
+import { test, expect } from '@playwright/test';
+
+const BASE = process.env.BASE_URL || 'http://localhost:2029';
+
+const CREDS = {
+  username: process.env.OBSIGATE_USER || 'admin',
+  password: process.env.OBSIGATE_PASS || 'test123',
+};
+
+async function login(page) {
+  await page.goto(BASE);
+  const loginForm = page.locator('#login-screen');
+  await expect(loginForm).toBeVisible({ timeout: 5000 }).catch(() => {});
+  if (await loginForm.isVisible()) {
+    await page.fill('#login-username', CREDS.username);
+    await page.fill('#login-password', CREDS.password);
+    await page.click('#login-btn');
+  }
+  await page.waitForFunction(() => window.__OBSIGATE_BOOTED === true, { timeout: 20000 });
+}
+
+async function openFile(page, vault, filePath) {
+  const treeItem = page.locator(`.tree-item[data-vault="${vault}"][data-path="${filePath}"]`);
+  if (!(await treeItem.count())) {
+    await page.locator(`.tree-item.vault-item[data-vault="${vault}"]`).first().click();
+    await treeItem.waitFor({ state: 'attached', timeout: 8000 });
+  }
+  await treeItem.dblclick({ timeout: 5000 });
+}
+
+test.describe('Image viewer — zoom / pan / navigation (#108)', () => {
+
+  test('affiche l\'image dans la visionneuse dédiée (URL /api/image)', async ({ page }) => {
+    // #108-B1 — l'image isolée doit pointer vers /api/image (octets), pas /raw (JSON).
+    const imageResponsePromise = page.waitForResponse(
+      (r) => r.url().includes('/api/image/') && r.status() === 200,
+      { timeout: 15000 },
+    );
+
+    await login(page);
+    await openFile(page, 'TestVault', 'sample-image.png');
+
+    const main = page.locator('#content-area .image-viewer-container img.image-main');
+    await expect(main).toBeVisible({ timeout: 10000 });
+    await expect(main).toHaveAttribute('src', /\/api\/image\/TestVault\?path=/);
+
+    const resp = await imageResponsePromise;
+    expect(resp.headers()['content-type']).toContain('image/png');
+
+    // Le badge de zoom démarre à 100 %.
+    await expect(page.locator('#content-area .image-zoom-badge')).toHaveText('100%');
+  });
+
+  test('le zoom molette et le reset modifient la transform', async ({ page }) => {
+    await login(page);
+    await openFile(page, 'TestVault', 'sample-image.png');
+    await expect(page.locator('#content-area .image-stage')).toBeVisible({ timeout: 10000 });
+
+    const badge = page.locator('#content-area .image-zoom-badge');
+    await expect(badge).toHaveText('100%');
+
+    await page.locator('#content-area .image-stage').hover();
+    await page.mouse.wheel(0, -240);
+    await expect(badge).not.toHaveText('100%', { timeout: 5000 });
+
+    const transform = await page.locator('#content-area img.image-main').evaluate(
+      (el) => getComputedStyle(el).transform,
+    );
+    expect(transform).not.toBe('none');
+
+    // Double-clic = réinitialisation.
+    await page.locator('#content-area .image-stage').dblclick();
+    await expect(badge).toHaveText('100%');
+  });
+
+  test('navigue entre les images du dossier via la pellicule', async ({ page }) => {
+    await login(page);
+    await openFile(page, 'TestVault', 'sample-image.png');
+
+    const strip = page.locator('#content-area .image-nav-strip');
+    await expect(strip).toBeVisible({ timeout: 10000 });
+    // sample-image.png et sample-vector.svg partagent le dossier racine.
+    await expect(strip.locator('img.image-thumb')).toHaveCount(2);
+
+    await page.locator('#content-area .image-nav-strip img.image-thumb').first().click();
+    await expect(page.locator('#content-area .image-title')).toBeVisible();
+  });
+});

tests/frontend/image-viewer.test.mjs

@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+/**
+ * ObsiGate — Image viewer tests (roadmap #108-D).
+ *
+ * Pure helpers (clampImageZoom / isImagePath / buildImageUrl) are evaluated in
+ * a VM sandbox to avoid importing the full browser-only viewer chain. The rest
+ * are static checks on the source and CSS.
+ *
+ * Usage: node tests/frontend/image-viewer.test.mjs
+ */
+
+import { strict as assert } from "node:assert";
+import { readFileSync } from "node:fs";
+import vm from "node:vm";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.join(__dirname, "..", "..");
+
+const viewer = readFileSync(path.join(ROOT, "frontend", "js", "viewer.js"), "utf8");
+const utils = readFileSync(path.join(ROOT, "frontend", "js", "utils.js"), "utf8");
+const css = readFileSync(path.join(ROOT, "frontend", "style.css"), "utf8");
+const main = readFileSync(path.join(ROOT, "backend", "main.py"), "utf8");
+
+function test(label, fn) {
+  try {
+    fn();
+    console.log("  \u2713 " + label);
+  } catch (err) {
+    console.error("  \u2717 " + label + "\n    " + String(err.message).slice(0, 300));
+    process.exitCode = 1;
+  }
+}
+
+// ── Pure helpers (VM sandbox) ──────────────────────────────────────────────
+const begin = viewer.indexOf("const IMAGE_EXTS");
+const end = viewer.indexOf("function formatBytes");
+assert.ok(begin !== -1 && end !== -1, "image viewer helper block not found");
+const sandbox = {};
+vm.createContext(sandbox);
+vm.runInContext(
+  `${viewer.slice(begin, end).replace(/\bexport /g, "")}\nglobalThis.clampImageZoom = clampImageZoom; globalThis.isImagePath = isImagePath; globalThis.buildImageUrl = buildImageUrl;`,
+  sandbox,
+);
+const { clampImageZoom, isImagePath, buildImageUrl } = sandbox;
+
+test("clampImageZoom bounds to [0.1, 8]", () => {
+  assert.equal(clampImageZoom(0.01), 0.1);
+  assert.equal(clampImageZoom(100), 8);
+  assert.equal(clampImageZoom(2), 2);
+  assert.equal(clampImageZoom(NaN), 1);
+});
+
+test("isImagePath recognises image extensions (case-insensitive)", () => {
+  for (const p of ["a.png", "a.JPG", "dir/b.jpeg", "x/y/z.svg", "p.webp", "q.bmp", "r.ico", "g.gif"]) {
+    assert.equal(isImagePath(p), true, p);
+  }
+  for (const p of ["a.md", "a.txt", "noext", "a.PDF", ""]) {
+    assert.equal(isImagePath(p), false, p);
+  }
+});
+
+test("buildImageUrl encodes vault and path", () => {
+  const url = buildImageUrl("My Vault", "café image.png");
+  assert.equal(url, "/api/image/My%20Vault?path=caf%C3%A9%20image.png");
+});
+
+// ── Static checks: viewer wiring ───────────────────────────────────────────
+test("viewer.js dispatches is_image to renderImageViewer", () => {
+  assert.match(viewer, /if \(data\.is_image\) \{\s*renderImageViewer\(area, data\);/);
+});
+
+test("renderImageViewer never uses the JSON raw endpoint as an image src", () => {
+  const start = viewer.indexOf("export function renderImageViewer");
+  const stop = viewer.indexOf("export function renderFile");
+  assert.ok(start !== -1 && stop > start, "renderImageViewer block not found");
+  const block = viewer.slice(start, stop);
+  assert.doesNotMatch(block, /\/raw\?path=/, "images must be served by /api/image, not /raw");
+  assert.match(block, /buildImageUrl\(vault, path\)/);
+});
+
+test("image viewer supports wheel zoom, drag pan and double-click reset", () => {
+  assert.match(viewer, /stage\.addEventListener\("wheel"/);
+  assert.match(viewer, /stage\.addEventListener\("pointerdown"/);
+  assert.match(viewer, /stage\.addEventListener\("dblclick", resetView\)/);
+  assert.match(viewer, /renderImageViewer/);
+});
+
+test("image viewer exposes thumbnail navigation via /api/media thumb", () => {
+  assert.match(viewer, /\/api\/media\/\$\{encodeURIComponent\(vault\)\}\/thumb\?path=/);
+  assert.match(viewer, /let siblings = \[\]/);
+  assert.match(viewer, /siblings = \(res\.items \|\| \[\]\)/);
+});
+
+// ── Static checks: CSS ─────────────────────────────────────────────────────
+test("style.css defines the image viewer layout + lightbox", () => {
+  assert.match(css, /\.image-stage\s*\{/);
+  assert.match(css, /\.image-nav-strip\s*\{/);
+  assert.match(css, /\.image-meta-panel\s*\{/);
+  assert.match(css, /\.image-viewer-container\.lightbox\s*\{/);
+});
+
+// ── Static checks: icon mapping + backend ──────────────────────────────────
+test("utils.js maps image extensions to the Lucide 'image' icon", () => {
+  assert.match(utils, /"\.png": "image"/);
+  assert.match(utils, /"\.svg": "image"/);
+});
+
+test("backend api_file_view points <img> at /api/image", () => {
+  assert.match(main, /img_url = f"\/api\/image\//);
+  assert.match(main, /f'<img src="\{img_url\}"/);
+});
+
+if (process.exitCode) {
+  console.error("\nImage viewer tests FAILED");
+} else {
+  console.log("\nAll image viewer tests passed.");
+}

tests/test_image_api.py

@@ -0,0 +1,109 @@
+# tests/test_image_api.py — Image serving & viewer API (roadmap #108-B/C)
+import base64
+from pathlib import Path
+
+import pytest
+
+PNG_1x1 = base64.b64decode(
+    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAen63NgAAAAASUVORK5CYII="
+)
+SVG_DOC = b'<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2"><script>alert(1)</script></svg>'
+
+
+def _write_image(vault_dir: str, name: str, content: bytes) -> None:
+    (Path(vault_dir) / name).write_bytes(content)
+
+
+# ═══════════════════════════════════════════════════════════════════
+# /api/image — byte serving (BUG fixed in #108-B1)
+# ═══════════════════════════════════════════════════════════════════
+
+class TestImageEndpoint:
+    def test_serves_bytes_and_mime(self, client, test_vault_dir):
+        _write_image(test_vault_dir, "pic.png", PNG_1x1)
+        resp = client.get("/api/image/TestVault", params={"path": "pic.png"})
+        assert resp.status_code == 200
+        assert resp.headers["content-type"].startswith("image/png")
+        assert resp.content == PNG_1x1
+
+    def test_missing_image_404(self, client):
+        resp = client.get("/api/image/TestVault", params={"path": "nope.png"})
+        assert resp.status_code == 404
+
+    def test_svg_gets_sandbox_header(self, client, test_vault_dir):
+        _write_image(test_vault_dir, "vector.svg", SVG_DOC)
+        resp = client.get("/api/image/TestVault", params={"path": "vector.svg"})
+        assert resp.status_code == 200
+        assert resp.headers.get("content-security-policy") == "sandbox"
+        assert resp.headers.get("x-content-type-options") == "nosniff"
+        assert resp.content == SVG_DOC
+
+    def test_png_keeps_the_global_csp(self, client, test_vault_dir):
+        _write_image(test_vault_dir, "pic2.png", PNG_1x1)
+        resp = client.get("/api/image/TestVault", params={"path": "pic2.png"})
+        csp = resp.headers.get("content-security-policy", "")
+        assert csp != "sandbox"
+        assert "default-src" in csp
+
+
+# ═══════════════════════════════════════════════════════════════════
+# /api/file — standalone image view points at /api/image, not /raw
+# ═══════════════════════════════════════════════════════════════════
+
+class TestImageViewMetadata:
+    def test_file_view_uses_image_endpoint(self, client):
+        resp = client.get("/api/file/TestVault", params={"path": "chatScreenshot.png"})
+        assert resp.status_code == 200
+        data = resp.json()
+        assert data["is_image"] is True
+        assert data["image_mime"] == "image/png"
+        assert data["size_bytes"] > 0
+        assert "/api/image/TestVault?path=chatScreenshot.png" in data["html"]
+        # The JSON raw endpoint must NOT be used as an <img> source.
+        assert "/raw?path=" not in data["html"]
+
+    def test_file_view_url_encoded(self, client, test_vault_dir):
+        _write_image(test_vault_dir, "café image.png", PNG_1x1)
+        resp = client.get("/api/file/TestVault", params={"path": "café image.png"})
+        assert resp.status_code == 200
+        html = resp.json()["html"]
+        assert "/api/image/TestVault?path=caf%C3%A9%20image.png" in html
+
+
+# ═══════════════════════════════════════════════════════════════════
+# /api/media/{vault}/thumb — thumbnails (roadmap #108-C)
+# ═══════════════════════════════════════════════════════════════════
+
+class TestThumbnailEndpoint:
+    def test_png_thumbnail_is_webp(self, client, tmp_path, monkeypatch):
+        pytest.importorskip("PIL")
+        monkeypatch.setenv("OBSIGATE_DATA_DIR", str(tmp_path / "data"))
+        resp = client.get(
+            "/api/media/TestVault/thumb",
+            params={"path": "chatScreenshot.png", "size": 64},
+        )
+        assert resp.status_code == 200
+        assert resp.headers["content-type"].startswith("image/webp")
+
+    def test_svg_thumbnail_falls_back_to_original(self, client, tmp_path, monkeypatch):
+        monkeypatch.setenv("OBSIGATE_DATA_DIR", str(tmp_path / "data"))
+        resp = client.get(
+            "/api/media/TestVault/thumb",
+            params={"path": "vector-icon.svg"},
+        )
+        assert resp.status_code == 200
+        assert "svg" in resp.headers["content-type"]
+
+    def test_thumb_rejects_non_image(self, client):
+        resp = client.get(
+            "/api/media/TestVault/thumb",
+            params={"path": "config.json"},
+        )
+        assert resp.status_code == 400
+
+    def test_missing_thumb_404(self, client):
+        resp = client.get(
+            "/api/media/TestVault/thumb",
+            params={"path": "nope.png"},
+        )
+        assert resp.status_code == 404

tests/test_image_indexing.py

@@ -0,0 +1,105 @@
+# tests/test_image_indexing.py — Images in the tree & index (roadmap #108-A)
+import asyncio
+import base64
+from pathlib import Path
+
+from backend.indexer import _index_single_file_sync, _scan_vault
+from backend.services.vaults import browse_directory
+from backend.watcher import VaultEventHandler
+
+PNG_1x1 = base64.b64decode(
+    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAen63NgAAAAASUVORK5CYII="
+)
+
+
+def _make_vault(tmp_path: Path) -> Path:
+    vault = tmp_path / "Vault"
+    vault.mkdir()
+    (vault / "note.md").write_text("# Note\n", encoding="utf-8")
+    (vault / "chatScreenshot.png").write_bytes(PNG_1x1)
+    assets = vault / "assets"
+    assets.mkdir()
+    (assets / "photo.jpg").write_bytes(PNG_1x1)
+    return vault
+
+
+class TestScanVaultImages:
+    def test_image_indexed_without_content(self, tmp_path):
+        vault = _make_vault(tmp_path)
+        result = _scan_vault("V", str(vault))
+        by_path = {f["path"]: f for f in result["files"]}
+        assert "chatScreenshot.png" in by_path
+        image = by_path["chatScreenshot.png"]
+        assert image["content"] == ""  # never read the bytes (#108-A2)
+        assert image["content_preview"] == ""
+        assert image["extension"] == ".png"
+        assert image["size"] > 0
+        assert "assets/photo.jpg" in by_path
+
+    def test_images_present_in_paths(self, tmp_path):
+        vault = _make_vault(tmp_path)
+        result = _scan_vault("V", str(vault))
+        files = {p["path"] for p in result["paths"] if p["type"] == "file"}
+        assert "chatScreenshot.png" in files
+        assert "assets/photo.jpg" in files
+
+    def test_no_binary_content_leaks(self, tmp_path):
+        vault = _make_vault(tmp_path)
+        result = _scan_vault("V", str(vault))
+        for f in result["files"]:
+            if f["extension"] in (".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".bmp", ".ico"):
+                assert f["content"] == ""
+
+
+class TestSingleFileImage:
+    def test_metadata_only(self, tmp_path):
+        vault = _make_vault(tmp_path)
+        info = _index_single_file_sync(
+            "V", str(vault), str(vault / "chatScreenshot.png")
+        )
+        assert info is not None
+        assert info["content"] == ""
+        assert info["extension"] == ".png"
+        assert info["path"] == "chatScreenshot.png"
+
+
+class TestWatcherRelevance:
+    def test_image_extensions_relevant(self, tmp_path):
+        handler = VaultEventHandler("V", asyncio.Queue(), asyncio.new_event_loop())
+        assert handler._is_relevant(str(tmp_path / "a.png")) is True
+        assert handler._is_relevant(str(tmp_path / "a.jpg")) is True
+        assert handler._is_relevant(str(tmp_path / "a.svg")) is True
+        assert handler._is_relevant(str(tmp_path / "a.exe")) is False
+
+
+class TestBrowseAndDashboard:
+    def test_browse_lists_image(self, client):
+        resp = client.get("/api/browse/TestVault")
+        assert resp.status_code == 200
+        items = resp.json()["items"]
+        names = {i["name"]: i for i in items}
+        assert "chatScreenshot.png" in names
+        assert names["chatScreenshot.png"]["type"] == "file"
+        assert names["chatScreenshot.png"]["extension"] == ".png"
+
+    def test_dashboard_counts_images(self, client):
+        resp = client.get("/api/dashboard")
+        assert resp.status_code == 200
+        data = resp.json()
+        assert data["total_images"] >= 2
+        vault = next(v for v in data["vaults"] if v["name"] == "TestVault")
+        assert vault["image_count"] >= 2
+
+    def test_ext_filter_returns_images(self, client):
+        resp = client.get("/api/search/advanced", params={"q": "ext:png"})
+        assert resp.status_code == 200
+        paths = [r["path"] for r in resp.json()["results"]]
+        assert any(p.endswith(".png") for p in paths)
+
+
+class TestBrowseService:
+    def test_browse_directory_service(self, app_with_vault, test_vault_dir):
+        # The shared index is populated by the app_with_vault fixture.
+        data = browse_directory("TestVault", "")
+        names = [i["name"] for i in data["items"]]
+        assert "chatScreenshot.png" in names

tests/test_indexer.py

@@ -160,9 +160,15 @@ class TestSupportedExtensions:
         for ext in [".json", ".yaml", ".yml", ".toml", ".ini", ".cfg", ".conf"]:
             assert ext in SUPPORTED_EXTENSIONS, f"{ext} should be supported"
 
+    def test_image_extensions_supported(self):
+        # #108 — images are indexed (name/size/mtime, empty content) so they
+        # show up in the tree and in file listings.
+        for ext in [".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".bmp", ".ico"]:
+            assert ext in SUPPORTED_EXTENSIONS, f"{ext} should be supported"
+
     def test_binary_not_supported(self):
-        assert ".png" not in SUPPORTED_EXTENSIONS
         assert ".exe" not in SUPPORTED_EXTENSIONS
+        assert ".zip" not in SUPPORTED_EXTENSIONS
 
 
 # ═══════════════════════════════════════════════════════════════════

tests/test_indexer_advanced.py

@@ -70,11 +70,20 @@ class TestFileCRUD:
         assert info is None
 
     def test_index_single_file_sync_unsupported(self, test_vault_dir):
-        bin_file = Path(test_vault_dir) / "test_image.png"
-        bin_file.write_bytes(b"fake png data")
+        bin_file = Path(test_vault_dir) / "test_binary.exe"
+        bin_file.write_bytes(b"fake exe data")
         info = _index_single_file_sync("TestVault", test_vault_dir, str(bin_file))
         assert info is None
 
+    def test_index_single_file_sync_image_metadata_only(self, test_vault_dir):
+        # #108-A2 — images are indexed (name/size/mtime) but never read.
+        img_file = Path(test_vault_dir) / "test_image.png"
+        img_file.write_bytes(b"fake png data")
+        info = _index_single_file_sync("TestVault", test_vault_dir, str(img_file))
+        assert info is not None
+        assert info["extension"] == ".png"
+        assert info["content"] == ""
+
     def test_add_and_remove_file(self, client):
         path = "crud_test_unique_12345.md"
         file_info = {