Moteur : drapeaux de chargement à jour, -ngl auto ; dictée qui dit pourquoi

Les llama-server récents ont fusionné --mlock, --mmap et --no-mmap dans un
seul --load-mode, et refusent désormais d'ajuster les couches GPU dès qu'on
leur impose un nombre : « n_gpu_layers already set by user to 999, abort ».
Le moteur pousse alors tout sur le GPU et meurt en cudaMalloc, ou se replie
à moitié sur le CPU — débit effondré, GPU à 100 %.

- Traduction des drapeaux dépréciés AU LANCEMENT, pas dans le preset :
  --mlock → --load-mode mlock, --no-mmap → --load-mode none, --mmap →
  --load-mode mmap. Les interrupteurs de l'interface continuent d'écrire
  l'ancienne forme, et un moteur antérieur la reçoit telle quelle. Un
  --load-mode écrit à la main dans EXTRA_ARGS gagne sur tout.
- -ngl auto par défaut quand le moteur propose la valeur, 999 sinon (l'omettre
  sur un moteur ancien le ferait tourner 100 % CPU). NGL=<nombre> dans le
  preset reste souverain.
- --parallel et -ngl ne sont plus ajoutés en double quand EXTRA_ARGS les porte
  déjà : le moteur râlait (« specified multiple times ») et, pire, c'est la
  dernière occurrence qui gagne — le réglage explicite du preset était donc
  silencieusement écrasé par le défaut de Loki.
- Les capacités se lisent dans « <bin> --help », une seule fois par binaire
  (binHelp met en cache) au lieu d'un lancement par question.

Dictée : quand le téléchargement du modèle whisper échoue (conteneur sans
réseau, Hugging Face injoignable), le serveur renvoyait bien la raison mais
l'interface affichait quand même « téléchargement (0 %) ». L'erreur cachée
laissait cliquer indéfiniment sur un micro qui n'écrira jamais rien.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Dockerfile

@@ -31,6 +31,20 @@ RUN CGO_ENABLED=0 go build -trimpath -ldflags "-s -w" -o /out/loki ./cmd/loki
 # limité à cette étape de build.
 RUN GOBIN=/out GOTOOLCHAIN=auto go install golang.org/x/tools/gopls@latest
 
+# ── Étape 1 bis : whisper-cli (dictée vocale) ───────────────────────────
+# whisper.cpp compilé CPU seul, en statique : un binaire unique, aucune .so à
+# trimballer, et pas de compilation CUDA (des minutes de build pour un gain
+# nul sur des dictées de quelques secondes). Ubuntu 22.04 : glibc plus
+# ancienne que l'image runtime, donc compatible quoi qu'elle embarque.
+FROM ubuntu:22.04 AS whisperbuild
+RUN apt-get update && apt-get install -y --no-install-recommends \
+        build-essential cmake git ca-certificates \
+    && rm -rf /var/lib/apt/lists/*
+RUN git clone --depth 1 https://github.com/ggml-org/whisper.cpp /w \
+    && cmake -S /w -B /w/build -DCMAKE_BUILD_TYPE=Release \
+         -DBUILD_SHARED_LIBS=OFF -DWHISPER_BUILD_TESTS=OFF \
+    && cmake --build /w/build -j --target whisper-cli
+
 # ── Étape 2 : runtime sur l'image serveur CUDA officielle ───────────────
 FROM ${LLAMACPP_IMAGE} AS runtime
 
@@ -84,6 +98,9 @@ RUN if [ "$PLAYWRIGHT" = "1" ]; then \
 
 COPY --from=gobuild /out/loki /usr/local/bin/loki
 COPY --from=gobuild /out/gopls /usr/local/bin/gopls
+# Dictée vocale (POST /api/transcribe). Le modèle (~190 Mo) n'est PAS dans
+# l'image : téléchargé au premier usage dans /data/whisper/.
+COPY --from=whisperbuild /w/build/bin/whisper-cli /usr/local/bin/whisper-cli
 COPY docker-entrypoint.sh /usr/local/bin/docker-entrypoint.sh
 RUN chmod +x /usr/local/bin/docker-entrypoint.sh && mkdir -p /data /models
 
@@ -92,6 +109,7 @@ ENV LOKI_CONTAINER=1 \
     LOKI_HOME=/data \
     LOKI_MODEL_DIRS=/models \
     LOKI_ENGINE_BIN=/app/llama-server \
+    LOKI_WHISPER_BIN=/usr/local/bin/whisper-cli \
     LD_LIBRARY_PATH=/app \
     NVIDIA_VISIBLE_DEVICES=all \
     NVIDIA_DRIVER_CAPABILITIES=compute,utility

README.md

@@ -77,6 +77,22 @@ Le champ **Télécharger un modèle** reste disponible pour coller un lien direc
 (dépôt privé, fichier hors des conventions). Un dépôt à accès restreint demande
 la variable d'environnement `HF_TOKEN`.
 
+Certains dépôts sont **à accès restreint** (« gated ») : leur arborescence se lit
+sans rien, mais chaque `.gguf` répond `401` tant que les conditions du dépôt
+n'ont pas été acceptées sur huggingface.co **et** qu'un jeton n'est pas fourni.
+Loki les marque « accès restreint » dès la liste des résultats et rappelle le
+geste à faire, plutôt que de laisser choisir une quantification pour échouer au
+lancement du transfert.
+
+Le jeton se règle **dans l'interface** : éditeur de preset → *Modèle* → **Jeton
+Hugging Face**. Il est vérifié auprès de Hugging Face avant d'être enregistré
+(le compte associé s'affiche), rangé avec les autres secrets sous `/data` — donc
+il survit aux redémarrages et aux changements de preset — et il sert aussi bien à
+la recherche qu'au téléchargement. À défaut, la variable d'environnement
+`HF_TOKEN` reste lue comme avant ; le jeton enregistré dans l'interface a la
+priorité. Un jeton en **lecture** suffit (huggingface.co/settings/tokens), et il
+n'est envoyé qu'aux adresses Hugging Face.
+
 ## Installation sur Unraid
 
 L'image est construite et publiée par GitHub Actions sur GHCR
@@ -105,7 +121,7 @@ redémarrages (volume `/data`). Variables d'environnement du conteneur :
 | `LOKI_NGL` | couches GPU initiales | `999` (tout) |
 | `LOKI_HOME` | données (volume) | `/data` |
 | `LOKI_MODEL_DIRS` | dossiers .gguf additionnels | `/models` |
-| `HF_TOKEN` | jeton Hugging Face, pour les dépôts à accès restreint | — |
+| `HF_TOKEN` | jeton Hugging Face, pour les dépôts à accès restreint (repli : le jeton réglé dans l'UI prime) | — |
 
 En CLI dans le conteneur : `docker exec -it loki loki status` (aussi :
 `logs`, `restart`, `config`, `bench`, `test`…).
@@ -304,8 +320,24 @@ Ajoutées par ce fork :
   `AGENT_BUDGET=off` le désactive complètement.
 - **Identité** : ton prénom et un avatar emoji pour toi et pour Loki, affichés
   dans le fil.
-- **Paramètres** : les réglages d'application (identité, apparence, accès
-  OpenAI, actions) sont regroupés à part des réglages d'IA.
+- **Réglages en modale** : tous les réglages vivent dans une fenêtre à deux
+  volets — la nav des sections à gauche (IA, moteur, application), le panneau
+  choisi à droite. La barre latérale ne garde que les discussions (les plus
+  récentes en tête) et le moniteur machine.
+- **Nom du modèle sur chaque réponse** : une pastille à côté de « Loki » dit
+  quel modèle a produit la réponse. Elle est journalisée avec le tour : elle
+  survit au rechargement, et un vieux tour garde le modèle de l'époque.
+- **Dictée vocale** : un bouton micro dans la carte de saisie enregistre,
+  transcrit **en local** (whisper.cpp, compilé dans l'image ; modèle
+  `small-q5_1` multilingue ~190 Mo téléchargé au premier usage dans
+  `/data/whisper/`) et pose le texte dans le champ. ⚠️ le navigateur n'autorise
+  le micro qu'en **HTTPS** (ou sur `localhost`) — derrière un reverse proxy
+  TLS, rien à faire ; en `http://IP:8090`, le bouton l'explique.
+- **Cartes raisonnement/outils à hauteur bornée** : un long raisonnement ne
+  fait plus grandir la page de plusieurs écrans — la carte reste à taille fixe
+  et défile toute seule pendant la génération. Sur un raisonnement géant, seul
+  le bas du bloc est re-rendu en direct (le texte complet est posé à la fin) :
+  l'affichage ne se fige plus.
 
 Retirées par ce fork :
 

RELEASE_NOTES.md

@@ -1,19 +1,53 @@
-La grande nouveauté de cette version : AJEAN sait enfin voir les images.
+# Loki 0.12.0
 
-## La vision, configurable par preset
+Le sélecteur de modèle devient un vrai sélecteur, la dictée vocale arrive, et
+les cartes de raisonnement suivent l'écriture au lieu d'envahir la page.
 
-Jusqu'ici rien dans l'interface ne permettait de donner des yeux à un modèle. Il fallait glisser l'option `--mmproj` à la main dans la configuration brute, et son chemin n'était même pas résolu comme celui du modèle. L'éditeur de preset gagne un champ **Vision** : tu y choisis le projecteur multimodal (fichier `mmproj`) qui accompagne le modèle, et c'est tout. Au démarrage du moteur, AJEAN le charge tout seul.
+## Le sélecteur de l'en-tête charge vraiment un modèle
 
-Le champ ne liste que les projecteurs (les fichiers dont le nom contient `mmproj`), pas les modèles de plusieurs Go, pour que le choix reste lisible. Et s'il te manque un projecteur, le champ « télécharger un modèle » accepte aussi un lien vers un `mmproj` : une fois récupéré, il se place directement dans le champ Vision.
+Deux groupes : « Presets » et « Modèles (.gguf) » — tous les fichiers de
+`/models` et `/data/models`. Choisir un modèle le charge (seul `MODEL` change,
+contexte/NGL/échantillonnage conservés) et redémarre le moteur. Sans preset
+créé, le sélecteur n'offrait aucun choix.
 
-## Les images arrivent vraiment au modèle
+## Dictée vocale
 
-Avant, une image collée dans le chat était simplement déposée comme un fichier dans le dossier de travail, à charge pour le modèle de l'ouvrir avec ses outils (ce qui ne donnait qu'un tas d'octets illisibles). Désormais, quand un projecteur est configuré, l'image part au modèle en contenu multimodal : il la voit, et peut en parler.
+Un bouton micro dans la carte de saisie : tu parles, le texte s'écrit. La
+transcription est 100 % locale — whisper.cpp compilé dans l'image, modèle
+multilingue téléchargé au premier usage (~190 Mo, dans `/data/whisper/`).
+Le navigateur exige HTTPS (ou localhost) pour donner accès au micro.
+
+## Cartes raisonnement/outils : taille fixe, défilement qui suit
+
+Hauteur bornée (280 px) avec défilement interne collé au texte pendant la
+génération — remonter lire le début est respecté. Les cartes d'outil suivent
+la ligne en cours d'écriture puis remontent en tête une fois l'appel terminé.
+Sur un raisonnement géant, seul le bas du bloc est re-rendu en direct (le
+texte complet est posé à la fin) : l'affichage ne se fige plus.
+
+## Mesures
+
+- La carte du temps total affiche la **vitesse moyenne de la conversation**
+  (« en cours — 12 s · moy 21.3 tok/s »), rejouée au rechargement.
+- Le **pourcentage de chargement** du modèle bouge aussi sur un redémarrage à
+  chaud (modèle déjà dans le cache disque : on suit la mémoire résidente, plus
+  seulement les octets lus).
+
+## Interface
+
+- Discussions triées par date de **création** (récentes en tête) : une
+  discussion garde sa place, écrire dans un vieux fil ne le fait plus remonter.
+- Bouton **Réglages** ancré en pied de barre latérale, au-dessus du moniteur
+  Performance.
+
+## Rappel 0.11.0
+
+Réglages en modale à deux volets ; nom du modèle sur chaque réponse
+(journalisé, il survit au rechargement) ; jeton Hugging Face réglable dans
+l'interface ; tâches planifiées reprises de l'amont.
 
 ## Mise à jour
 
 ```
-ajean update
+docker compose pull && docker compose up -d
 ```
-
-Non vérifié sur cette version : le résultat final dépend d'un modèle vision et de son projecteur compatibles (Qwen2.5-VL, Gemma 3, etc.). À noter, l'image reste dans l'historique de la conversation et repart au moteur à chaque tour tant que la conversation dure.

cmd/loki/versioninfo.json

@@ -2,14 +2,14 @@
   "FixedFileInfo": {
     "FileVersion": {
       "Major": 0,
-      "Minor": 9,
-      "Patch": 4,
+      "Minor": 12,
+      "Patch": 3,
       "Build": 0
     },
     "ProductVersion": {
       "Major": 0,
-      "Minor": 9,
-      "Patch": 4,
+      "Minor": 12,
+      "Patch": 3,
       "Build": 0
     },
     "FileFlagsMask": "3f",
@@ -25,7 +25,7 @@
     "LegalCopyright": "Copyright (c) 2026 Loki contributors. MIT License.",
     "OriginalFilename": "loki.exe",
     "ProductName": "Loki",
-    "ProductVersion": "0.9.4",
+    "ProductVersion": "0.12.3",
     "Comments": "https://github.com/R0m1k3/Loki — projet open source (MIT)"
   },
   "VarFileInfo": {

internal/loki/backend_hf.go

@@ -67,6 +67,11 @@ type hfRepo struct {
 	ID        string `json:"id"`
 	Downloads int    `json:"downloads"`
 	Likes     int    `json:"likes"`
+	// Gated : le dépôt exige d'avoir accepté ses conditions ET un jeton. Il se
+	// LIT pourtant sans rien (arborescence en 200), et ne refuse qu'au moment du
+	// transfert : sans cette pastille, l'interface propose des quants avec leur
+	// verdict mémoire et le téléchargement échoue en 401 sans prévenir.
+	Gated bool `json:"gated"`
 }
 
 // hfEntry — un .gguf installable. Shards > 1 signale une famille de tranches :
@@ -85,6 +90,7 @@ type hfEntry struct {
 // hfListing — le contenu utile d'un dépôt, trié.
 type hfListing struct {
 	Repo       string    `json:"repo"`
+	Gated      bool      `json:"gated"`
 	Models     []hfEntry `json:"models"`
 	Projectors []hfEntry `json:"projectors"`
 	Drafts     []hfEntry `json:"drafts"`
@@ -95,13 +101,115 @@ type hfListing struct {
 // transfert : sans lui un dépôt gated répond 401 et Loki afficherait « aucun
 // résultat » là où il faudrait dire « dépôt à accès restreint ».
 func hfAuth(req *http.Request) {
-	if k := os.Getenv("HF_TOKEN"); k != "" {
+	if k := hfToken(); k != "" {
 		req.Header.Set("Authorization", "Bearer "+k)
 	}
 	req.Header.Set("User-Agent", "loki/"+Version)
 	req.Header.Set("Accept", "application/json")
 }
 
+// ---- Jeton Hugging Face -----------------------------------------------------
+//
+// Le jeton vivait UNIQUEMENT dans la variable d'environnement HF_TOKEN. En
+// conteneur, c'était l'exiger au mauvais moment : on découvre qu'un dépôt est
+// verrouillé depuis l'interface, et il faudrait éditer un docker-compose puis
+// recréer le conteneur pour y répondre. Il se règle donc aussi dans l'interface,
+// et se range là où sont déjà les secrets (base d'état) — pas dans config.env,
+// que le changement de preset réécrit en bloc.
+//
+// Priorité : le jeton enregistré d'abord, la variable d'environnement ensuite.
+// Rien d'enregistré = comportement d'avant, à l'octet près.
+
+// hfToken renvoie le jeton effectivement utilisé, ou "".
+func hfToken() string {
+	if t := strings.TrimSpace(getStr(bkState, "hf_token")); t != "" {
+		return t
+	}
+	return strings.TrimSpace(os.Getenv("HF_TOKEN"))
+}
+
+// hfTokenSource dit D'OÙ vient le jeton : « config » (enregistré ici), « env »
+// (HF_TOKEN du conteneur) ou "" (aucun). L'interface en a besoin pour ne pas
+// proposer d'effacer un jeton qu'elle ne peut pas effacer.
+func hfTokenSource() string {
+	switch {
+	case strings.TrimSpace(getStr(bkState, "hf_token")) != "":
+		return "config"
+	case strings.TrimSpace(os.Getenv("HF_TOKEN")) != "":
+		return "env"
+	}
+	return ""
+}
+
+// hfTokenSet dit si un jeton est disponible, pour que l'interface distingue
+// « il faut en poser un » de « celui qui est posé ne suffit pas ».
+func hfTokenSet() bool { return hfToken() != "" }
+
+// writeHFToken enregistre (ou efface, tok == "") le jeton. Le cache des réponses
+// Hugging Face est vidé au passage : il contient des listes obtenues SANS jeton,
+// où un dépôt verrouillé peut manquer ou paraître illisible.
+func writeHFToken(tok string) error {
+	if err := putStr(bkState, "hf_token", strings.TrimSpace(tok)); err != nil {
+		return err
+	}
+	hfCacheMu.Lock()
+	hfCache = map[string]hfCacheItem{}
+	hfCacheMu.Unlock()
+	return nil
+}
+
+// maskHFToken n'affiche qu'assez de caractères pour reconnaître le jeton posé.
+// Il n'est jamais renvoyé en clair : contrairement à la clé API du serveur,
+// personne n'a besoin de le recopier depuis Loki.
+func maskHFToken(t string) string {
+	t = strings.TrimSpace(t)
+	if t == "" {
+		return ""
+	}
+	if len(t) <= 8 {
+		return "…" + t[len(t)-2:]
+	}
+	return t[:3] + "…" + t[len(t)-4:]
+}
+
+// hfWhoAmI vérifie un jeton auprès de Hugging Face et renvoie le nom du compte.
+// Enregistrer un jeton sans le vérifier, c'est déplacer l'échec : on croirait le
+// problème réglé jusqu'au prochain 401, quinze minutes de téléchargement plus
+// tard.
+func hfWhoAmI(ctx context.Context, tok string) (string, error) {
+	ctx, cancel := context.WithTimeout(ctx, hfTimeout)
+	defer cancel()
+	req, err := http.NewRequestWithContext(ctx, "GET", hfHost+"/api/whoami-v2", nil)
+	if err != nil {
+		return "", err
+	}
+	req.Header.Set("Authorization", "Bearer "+strings.TrimSpace(tok))
+	req.Header.Set("User-Agent", "loki/"+Version)
+	req.Header.Set("Accept", "application/json")
+	resp, err := http.DefaultClient.Do(req)
+	if err != nil {
+		return "", fmt.Errorf("Hugging Face injoignable : %v", err)
+	}
+	defer resp.Body.Close()
+	if resp.StatusCode == 401 || resp.StatusCode == 403 {
+		return "", fmt.Errorf("jeton refusé par Hugging Face (expiré, révoqué ou mal copié)")
+	}
+	if resp.StatusCode != 200 {
+		return "", fmt.Errorf("Hugging Face a répondu %d", resp.StatusCode)
+	}
+	var who struct {
+		Name string `json:"name"`
+	}
+	raw, err := io.ReadAll(io.LimitReader(resp.Body, 1<<20))
+	if err != nil {
+		return "", err
+	}
+	if err := json.Unmarshal(raw, &who); err != nil {
+		return "", err
+	}
+	return who.Name, nil
+}
+
 // hfCache : mémo commun à la recherche et aux arborescences, clé = l'URL
 // appelée. Sans lui, chaque frappe au clavier dans le champ de recherche
 // produit une requête sortante.
@@ -172,29 +280,99 @@ func hfSearch(ctx context.Context, q string) ([]hfRepo, error) {
 	if len(q) > hfMaxQuery {
 		q = q[:hfMaxQuery]
 	}
+	// `expand[]` remplace les champs par défaut de la réponse : `gated` s'y
+	// ajoute, mais downloads et likes doivent alors être redemandés
+	// explicitement, sinon ils disparaissent et la liste perd son classement
+	// lisible.
 	endpoint := hfHost + "/api/models?" + url.Values{
 		"search":    {q},
 		"filter":    {"gguf"},
 		"limit":     {fmt.Sprint(hfMaxRepos)},
 		"sort":      {"downloads"},
 		"direction": {"-1"},
+		"expand[]":  {"gated", "downloads", "likes"},
 	}.Encode()
 
 	var raw []struct {
 		ID        string `json:"id"`
 		Downloads int    `json:"downloads"`
 		Likes     int    `json:"likes"`
+		Gated     any    `json:"gated"`
 	}
 	if err := hfGetJSON(ctx, endpoint, hfSearchTTL, &raw); err != nil {
 		return nil, err
 	}
 	out := make([]hfRepo, 0, len(raw))
 	for _, r := range raw {
-		out = append(out, hfRepo{ID: r.ID, Downloads: r.Downloads, Likes: r.Likes})
+		out = append(out, hfRepo{ID: r.ID, Downloads: r.Downloads, Likes: r.Likes, Gated: hfGatedFlag(r.Gated)})
 	}
 	return out, nil
 }
 
+// hfGatedFlag lit le champ `gated` de l'API, qui n'est PAS un booléen : il vaut
+// false, "auto" (accepter les conditions suffit) ou "manual" (l'auteur valide
+// chaque demande). Les deux dernières valeurs verrouillent le téléchargement de
+// la même façon ; seule la présence d'un verrou nous intéresse ici.
+func hfGatedFlag(v any) bool {
+	switch g := v.(type) {
+	case bool:
+		return g
+	case string:
+		switch strings.ToLower(strings.TrimSpace(g)) {
+		case "", "false", "none", "no":
+			return false
+		}
+		return true
+	}
+	return false
+}
+
+// hfRepoGated dit si un dépôt est verrouillé. L'arborescence (hfFiles) ne porte
+// pas l'information : elle se lit sur la fiche du dépôt, en un appel séparé et
+// mis en cache comme elle. Une erreur ici ne doit RIEN casser — au pire on
+// n'affiche pas l'avertissement, et le téléchargement dira lui-même pourquoi il
+// a été refusé.
+func hfRepoGated(ctx context.Context, repo string) bool {
+	var info struct {
+		Gated any `json:"gated"`
+	}
+	endpoint := hfHost + "/api/models/" + repo + "?" + url.Values{"expand[]": {"gated"}}.Encode()
+	if err := hfGetJSON(ctx, endpoint, hfFilesTTL, &info); err != nil {
+		return false
+	}
+	return hfGatedFlag(info.Gated)
+}
+
+// isHFHost dit si un hôte appartient à Hugging Face. Sert à décider qui a le
+// droit de recevoir le jeton.
+func isHFHost(host string) bool {
+	h := strings.ToLower(host)
+	if i := strings.IndexByte(h, ':'); i >= 0 {
+		h = h[:i]
+	}
+	return h == "huggingface.co" || strings.HasSuffix(h, ".huggingface.co") ||
+		h == "hf.co" || strings.HasSuffix(h, ".hf.co")
+}
+
+// hfRepoFromURL retrouve « auteur/dépôt » dans un lien de téléchargement
+// Hugging Face, pour pouvoir le nommer dans un message d'erreur. Renvoie "" si
+// le lien pointe ailleurs.
+func hfRepoFromURL(raw string) string {
+	u, err := url.Parse(raw)
+	if err != nil || !strings.Contains(u.Host, "huggingface.co") {
+		return ""
+	}
+	segs := strings.Split(strings.Trim(u.Path, "/"), "/")
+	if len(segs) < 4 || (segs[2] != "resolve" && segs[2] != "blob") {
+		return ""
+	}
+	repo := segs[0] + "/" + segs[1]
+	if !hfRepoRe.MatchString(repo) {
+		return ""
+	}
+	return repo
+}
+
 // hfFiles liste les .gguf d'un dépôt et les range par famille.
 //
 // `recursive=1` n'est pas un confort : les quants volumineux vivent dans des
@@ -229,7 +407,9 @@ func hfFiles(ctx context.Context, repo string) (hfListing, error) {
 		}
 		files = append(files, hfFile{Path: f.Path, Size: n})
 	}
-	return hfClassify(repo, files), nil
+	out := hfClassify(repo, files)
+	out.Gated = hfRepoGated(ctx, repo)
+	return out, nil
 }
 
 // hfFile — une entrée d'arborescence, réduite à ce dont le classement a besoin.

internal/loki/backend_hf_test.go

@@ -1,6 +1,10 @@
 package loki
 
 import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"net/http/httptest"
 	"strings"
 	"testing"
 )
@@ -205,3 +209,151 @@ func TestFitVerdict(t *testing.T) {
 		t.Errorf("le contexte ne change rien au verdict (%q dans les deux cas)", court)
 	}
 }
+
+// Le champ `gated` de l'API n'est pas un booléen : false, "auto" ou "manual".
+// Le lire comme un bool laissait passer les deux valeurs qui verrouillent
+// vraiment le téléchargement.
+func TestHFGatedFlag(t *testing.T) {
+	for _, c := range []struct {
+		in   any
+		want bool
+	}{
+		{nil, false},
+		{false, false},
+		{true, true},
+		{"auto", true},
+		{"manual", true},
+		{"false", false},
+		{"", false},
+	} {
+		if got := hfGatedFlag(c.in); got != c.want {
+			t.Errorf("hfGatedFlag(%#v) = %v, attendu %v", c.in, got, c.want)
+		}
+	}
+}
+
+// hfRepoFromURL sert à NOMMER le dépôt dans le message d'erreur : un lien qui
+// ne vient pas de Hugging Face ne doit rien produire plutôt qu'un nom inventé.
+func TestHFRepoFromURL(t *testing.T) {
+	for _, c := range []struct{ in, want string }{
+		{"https://huggingface.co/orcarouter/Qwen3.8-27B-Uncensored-GGUF/resolve/main/m.gguf", "orcarouter/Qwen3.8-27B-Uncensored-GGUF"},
+		{"https://huggingface.co/ggml-org/Qwen3.8-27B-GGUF/blob/main/sub/dir/m.gguf", "ggml-org/Qwen3.8-27B-GGUF"},
+		{"https://example.com/ggml-org/Qwen3.8-27B-GGUF/resolve/main/m.gguf", ""},
+		{"https://huggingface.co/ggml-org/Qwen3.8-27B-GGUF", ""},
+		{"pas une url", ""},
+	} {
+		if got := hfRepoFromURL(c.in); got != c.want {
+			t.Errorf("hfRepoFromURL(%q) = %q, attendu %q", c.in, got, c.want)
+		}
+	}
+}
+
+// Le jeton enregistré dans l'interface prime sur HF_TOKEN, et son absence
+// rend exactement le comportement d'avant : la variable d'environnement.
+func TestHFTokenPrecedence(t *testing.T) {
+	testHome(t)
+	t.Setenv("HF_TOKEN", "")
+	if hfToken() != "" || hfTokenSource() != "" || hfTokenSet() {
+		t.Fatalf("sans rien : jeton=%q source=%q", hfToken(), hfTokenSource())
+	}
+	t.Setenv("HF_TOKEN", "hf_env")
+	if hfToken() != "hf_env" || hfTokenSource() != "env" {
+		t.Fatalf("HF_TOKEN seul : jeton=%q source=%q", hfToken(), hfTokenSource())
+	}
+	if err := writeHFToken("  hf_enregistre  "); err != nil {
+		t.Fatal(err)
+	}
+	if hfToken() != "hf_enregistre" || hfTokenSource() != "config" {
+		t.Fatalf("jeton enregistré : jeton=%q source=%q", hfToken(), hfTokenSource())
+	}
+	// Retiré ici, la variable du conteneur reprend la main plutôt que de laisser
+	// Loki sans jeton alors que l'environnement en fournit un.
+	if err := writeHFToken(""); err != nil {
+		t.Fatal(err)
+	}
+	if hfToken() != "hf_env" || hfTokenSource() != "env" {
+		t.Fatalf("après retrait : jeton=%q source=%q", hfToken(), hfTokenSource())
+	}
+}
+
+// Le jeton ne doit jamais ressortir en clair de l'interface.
+func TestMaskHFToken(t *testing.T) {
+	if got := maskHFToken("hf_abcdefghijklmnop"); got != "hf_…mnop" {
+		t.Errorf("masque = %q", got)
+	}
+	if got := maskHFToken(""); got != "" {
+		t.Errorf("masque d'un jeton absent = %q", got)
+	}
+	if strings.Contains(maskHFToken("hf_abcdefghijklmnop"), "efghij") {
+		t.Error("le masque laisse voir le milieu du jeton")
+	}
+}
+
+// Un secret ne part QUE vers Hugging Face : un lien collé vers un autre
+// hébergeur ne doit pas recevoir le jeton du compte.
+func TestDLRequestTokenOnlyToHuggingFace(t *testing.T) {
+	testHome(t)
+	t.Setenv("HF_TOKEN", "hf_secret")
+	for _, c := range []struct {
+		url  string
+		want bool
+	}{
+		{"https://huggingface.co/a/b/resolve/main/m.gguf", true},
+		{"https://cdn-lfs.huggingface.co/a/b/m.gguf", true},
+		{"https://hf.co/a/b/resolve/main/m.gguf", true},
+		{"https://example.com/m.gguf", false},
+		{"https://huggingface.co.evil.example/m.gguf", false},
+	} {
+		req, err := dlRequest(context.Background(), c.url, "")
+		if err != nil {
+			t.Fatal(err)
+		}
+		if got := req.Header.Get("Authorization") != ""; got != c.want {
+			t.Errorf("%s : en-tête Authorization présent=%v, attendu %v", c.url, got, c.want)
+		}
+	}
+}
+
+// La route décrit le jeton sans jamais le rendre, et l'efface sans appeler
+// Hugging Face (un jeton vide n'a rien à vérifier).
+func TestHandleHFTokenGetAndClear(t *testing.T) {
+	testHome(t)
+	t.Setenv("HF_TOKEN", "")
+	if err := writeHFToken("hf_abcdefghijklmnop"); err != nil {
+		t.Fatal(err)
+	}
+
+	call := func(method, body string) map[string]any {
+		t.Helper()
+		r := httptest.NewRequest(method, "http://placeholder/api/hf/token", strings.NewReader(body))
+		w := httptest.NewRecorder()
+		handleHFToken(w, r)
+		if w.Code != 200 {
+			t.Fatalf("%s → HTTP %d : %s", method, w.Code, w.Body.String())
+		}
+		var out map[string]any
+		if err := json.Unmarshal(w.Body.Bytes(), &out); err != nil {
+			t.Fatal(err)
+		}
+		return out
+	}
+
+	got := call("GET", "")
+	if got["set"] != true || got["source"] != "config" {
+		t.Fatalf("état lu = %v", got)
+	}
+	if s, _ := got["masked"].(string); s == "" || strings.Contains(s, "efghij") {
+		t.Fatalf("masque inattendu : %q", s)
+	}
+	if strings.Contains(fmt.Sprint(got), "hf_abcdefghijklmnop") {
+		t.Fatalf("le jeton ressort en clair : %v", got)
+	}
+
+	got = call("POST", `{"token":""}`)
+	if got["set"] != false || got["source"] != "" {
+		t.Fatalf("après effacement = %v", got)
+	}
+	if hfToken() != "" {
+		t.Fatalf("jeton toujours présent : %q", hfToken())
+	}
+}

internal/loki/backend_models.go

@@ -489,8 +489,12 @@ func dlRequest(ctx context.Context, dlURL, rng string) (*http.Request, error) {
 	if err != nil {
 		return nil, err
 	}
-	// HF gated/private repos may need a token; reuse the same key store if set.
-	if k := os.Getenv("HF_TOKEN"); k != "" {
+	// Dépôt gated/privé : le jeton (réglage de l'interface, sinon HF_TOKEN) est
+	// ce qui débloque le transfert. Il n'accompagne QUE les liens Hugging Face :
+	// un lien collé vers un autre hébergeur n'a aucune raison de recevoir un
+	// secret, et le CDN vers lequel HF redirige est signé, donc n'en a pas besoin
+	// non plus (Go retire l'en-tête au changement de domaine).
+	if k := hfToken(); k != "" && isHFHost(req.URL.Host) {
 		req.Header.Set("Authorization", "Bearer "+k)
 	}
 	req.Header.Set("User-Agent", "loki/"+Version)
@@ -514,6 +518,75 @@ func contentRangeTotal(v string) int64 {
 	return n
 }
 
+// dlSourceError traduit un refus HTTP en phrase qui dit quoi faire.
+//
+// Vécu : un dépôt Hugging Face « gated » (conditions à accepter avant de
+// télécharger) répond 200 sur son arborescence — Loki liste donc tous ses
+// quants, avec leur verdict mémoire — puis 401 sur CHAQUE .gguf. « HTTP 401
+// depuis la source » ne dit alors ni que le dépôt est verrouillé, ni qu'il faut
+// un jeton, ni où l'accepter : l'utilisateur voit un modèle proposé comme
+// installable qui échoue sans raison.
+//
+// Hugging Face, lui, le dit — dans l'en-tête X-Error-Code (GatedRepo,
+// RepoNotFound, EntryNotFound…). On le traduit plutôt que de le recopier :
+// l'interface est en français, et le message d'origine (« Please log in »)
+// parle d'une session de navigateur qui n'existe pas ici.
+func dlSourceError(resp *http.Response, dlURL string) error {
+	code := resp.Header.Get("X-Error-Code")
+	switch resp.StatusCode {
+	case 401, 403:
+		return fmt.Errorf("%s%s", dlAccessReason(code, hfRepoFromURL(dlURL)), dlTokenHint())
+	case 404:
+		switch code {
+		case "EntryNotFound":
+			return fmt.Errorf("fichier absent du dépôt (HTTP 404) — la révision a pu être réécrite depuis que le lien a été copié")
+		case "RevisionNotFound":
+			return fmt.Errorf("révision introuvable dans le dépôt (HTTP 404)")
+		}
+		return fmt.Errorf("lien introuvable (HTTP 404)")
+	case 416:
+		return fmt.Errorf("la source refuse la plage d'octets demandée (HTTP 416) — fichier modifié pendant le transfert ?")
+	case 429:
+		return fmt.Errorf("trop de requêtes vers la source (HTTP 429) — réessaie dans quelques minutes")
+	}
+	if resp.StatusCode >= 500 {
+		return fmt.Errorf("la source est en panne (HTTP %d) — réessaie plus tard", resp.StatusCode)
+	}
+	return fmt.Errorf("HTTP %d depuis la source", resp.StatusCode)
+}
+
+// dlAccessReason nomme la raison du refus. repo vide = source hors Hugging Face
+// (lien direct vers un autre hébergeur) : on ne parle alors pas de conditions à
+// accepter, qui n'existent que là-bas.
+func dlAccessReason(code, repo string) string {
+	switch code {
+	case "GatedRepo":
+		if repo == "" {
+			return "dépôt à accès restreint : ses conditions doivent être acceptées sur huggingface.co"
+		}
+		return "dépôt à accès restreint : accepte ses conditions sur huggingface.co/" + repo
+	case "RepoNotFound":
+		if repo == "" {
+			return "dépôt privé ou inexistant"
+		}
+		return "dépôt privé ou inexistant : " + repo
+	}
+	if repo != "" {
+		return "accès refusé par Hugging Face sur " + repo
+	}
+	return "accès refusé par la source"
+}
+
+// dlTokenHint complète la raison par l'état du jeton. Deux situations opposées
+// se cachent derrière le même 401 : pas de jeton du tout, ou un jeton qui n'a
+// pas accès à CE dépôt — et le geste à faire n'est pas le même.
+func dlTokenHint() string {
+	if !hfTokenSet() {
+		return " — puis renseigne le jeton Hugging Face (réglage « Jeton Hugging Face », ou variable d'environnement HF_TOKEN)"
+	}
+	return " — le jeton Hugging Face enregistré n'y donne pas accès (expiré, ou conditions non acceptées avec ce compte)"
+}
+
 // dlProbe asks the server for the first byte to learn the total size and
 // whether ranges are supported (206 + Content-Range).
 func dlProbe(ctx context.Context, dlURL string) (total int64, ranged bool, err error) {
@@ -537,7 +610,7 @@ func dlProbe(ctx context.Context, dlURL string) (total int64, ranged bool, err e
 		// Server ignored the Range: single stream, ContentLength is the size.
 		return resp.ContentLength, false, nil
 	default:
-		return 0, false, fmt.Errorf("HTTP %d depuis la source", resp.StatusCode)
+		return 0, false, dlSourceError(resp, dlURL)
 	}
 }
 
@@ -763,8 +836,9 @@ func dlChunk(ctx context.Context, f *os.File, dlURL string, start, end int64, wh
 			continue
 		}
 		if resp.StatusCode != 200 && resp.StatusCode != 206 {
+			err := dlSourceError(resp, dlURL)
 			resp.Body.Close()
-			return fmt.Errorf("HTTP %d depuis la source", resp.StatusCode)
+			return err
 		}
 		if resp.StatusCode == 200 && pos > start {
 			// Resume refused: the body restarts from 0, rewind our bookkeeping.

internal/loki/backend_models_dl_test.go

@@ -9,6 +9,7 @@ import (
 	"os"
 	"path/filepath"
 	"strconv"
+	"strings"
 	"testing"
 	"time"
 )
@@ -135,3 +136,90 @@ func TestRunDownloadParallelAndFallback(t *testing.T) {
 		}
 	}
 }
+
+// Un dépôt Hugging Face verrouillé répond 401 sur le .gguf alors que son
+// arborescence se lit sans jeton. « HTTP 401 depuis la source » n'apprenait
+// rien : le message doit nommer le verrou, le dépôt, et le geste à faire.
+func TestDLSourceErrorExplainsGatedRepo(t *testing.T) {
+	const gated = "https://huggingface.co/orcarouter/Qwen3.8-27B-Uncensored-GGUF/resolve/main/m.gguf"
+	resp := func(status int, code string) *http.Response {
+		r := &http.Response{StatusCode: status, Header: http.Header{}}
+		if code != "" {
+			r.Header.Set("X-Error-Code", code)
+		}
+		return r
+	}
+	for _, c := range []struct {
+		name   string
+		token  string
+		resp   *http.Response
+		url    string
+		want   []string
+		absent []string
+	}{
+		{
+			name: "gated sans jeton", resp: resp(401, "GatedRepo"), url: gated,
+			want: []string{"accès restreint", "orcarouter/Qwen3.8-27B-Uncensored-GGUF", "HF_TOKEN"},
+		},
+		{
+			name: "gated avec jeton refusé", token: "hf_xxx", resp: resp(401, "GatedRepo"), url: gated,
+			want:   []string{"accès restreint", "n'y donne pas accès"},
+			absent: []string{"renseigne le jeton"},
+		},
+		{
+			name: "dépôt privé ou absent", resp: resp(401, "RepoNotFound"), url: gated,
+			want: []string{"privé ou inexistant", "HF_TOKEN"},
+		},
+		{
+			name: "fichier absent", resp: resp(404, "EntryNotFound"), url: gated,
+			want: []string{"absent du dépôt", "404"},
+		},
+		{
+			name: "source hors Hugging Face", resp: resp(403, ""), url: "https://example.com/m.gguf",
+			want:   []string{"accès refusé par la source"},
+			absent: []string{"huggingface.co"},
+		},
+		{
+			name: "panne de la source", resp: resp(503, ""), url: gated,
+			want: []string{"en panne", "503"},
+		},
+		{
+			name: "code inconnu", resp: resp(418, ""), url: gated,
+			want: []string{"HTTP 418 depuis la source"},
+		},
+	} {
+		t.Run(c.name, func(t *testing.T) {
+			t.Setenv("HF_TOKEN", c.token)
+			got := dlSourceError(c.resp, c.url).Error()
+			for _, w := range c.want {
+				if !strings.Contains(got, w) {
+					t.Errorf("message %q ne contient pas %q", got, w)
+				}
+			}
+			for _, a := range c.absent {
+				if strings.Contains(got, a) {
+					t.Errorf("message %q contient %q alors qu'il ne devrait pas", got, a)
+				}
+			}
+		})
+	}
+}
+
+// La sonde est le premier appel réseau d'une installation : c'est elle qui doit
+// remonter le refus expliqué, pas un code HTTP nu.
+func TestDLProbeSurfacesExplainedError(t *testing.T) {
+	t.Setenv("HF_TOKEN", "")
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("X-Error-Code", "GatedRepo")
+		w.WriteHeader(401)
+	}))
+	defer srv.Close()
+
+	_, _, err := dlProbe(context.Background(), srv.URL+"/m.gguf")
+	if err == nil {
+		t.Fatal("un 401 doit faire échouer la sonde")
+	}
+	if !strings.Contains(err.Error(), "HF_TOKEN") {
+		t.Errorf("message %q sans indication sur le jeton", err)
+	}
+}

internal/loki/backend_serve.go

@@ -8,6 +8,7 @@ import (
 	"os/exec"
 	"path/filepath"
 	"strings"
+	"sync"
 	"time"
 )
 
@@ -23,15 +24,128 @@ import (
 // échoue à s'exécuter (« libllama-common.so introuvable ») et on conclurait à
 // tort qu'il ne gère pas le drapeau.
 func binSupportsReasoningFlag(bin string) bool {
+	return strings.Contains(binHelp(bin), "--reasoning ")
+}
+
+// binHelp lit « <bin> --help » UNE fois par binaire et garde le texte. Plusieurs
+// capacités se déduisent de cette aide (--reasoning, --load-mode, « -ngl auto »)
+// et relancer le moteur à chaque question coûterait quelques secondes de plus au
+// démarrage. Aide illisible = chaîne vide : tous les tests de capacité répondent
+// « non », c'est-à-dire « ne prends aucun risque, garde la forme historique ».
+var (
+	helpMu    sync.Mutex
+	helpCache = map[string]string{}
+)
+
+func binHelp(bin string) string {
+	helpMu.Lock()
+	defer helpMu.Unlock()
+	if h, ok := helpCache[bin]; ok {
+		return h
+	}
 	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
 	defer cancel()
 	cmd := exec.CommandContext(ctx, bin, "--help")
 	var out bytes.Buffer
 	cmd.Stdout, cmd.Stderr = &out, &out
-	if err := cmd.Run(); err != nil && out.Len() == 0 {
-		return false // aide illisible : on ne prend pas le risque
+	h := ""
+	if err := cmd.Run(); err == nil || out.Len() > 0 {
+		h = out.String()
 	}
-	return strings.Contains(out.String(), "--reasoning ")
+	helpCache[bin] = h
+	return h
+}
+
+// binSupportsLoadMode : les moteurs récents ont fusionné --mlock, --mmap et
+// --no-mmap dans un seul --load-mode ; les anciens ne connaissent que les trois
+// drapeaux d'origine. On traduit donc à l'exécution, sans réécrire le preset :
+// le même EXTRA_ARGS reste lançable sur les deux générations de moteur.
+func binSupportsLoadMode(bin string) bool {
+	return strings.Contains(binHelp(bin), "--load-mode")
+}
+
+// binSupportsNGLAuto : « -ngl auto » laisse llama.cpp mesurer la VRAM libre et
+// choisir le nombre de couches. Imposer un nombre (999 compris) désarme ce
+// calcul — « n_gpu_layers already set by user to 999, abort » — et le moteur
+// tente alors de tout mettre sur le GPU, quitte à échouer en cudaMalloc.
+func binSupportsNGLAuto(bin string) bool {
+	h := binHelp(bin)
+	i := strings.Index(h, "--n-gpu-layers")
+	if i < 0 {
+		i = strings.Index(h, "-ngl")
+	}
+	if i < 0 {
+		return false
+	}
+	end := i + 400
+	if end > len(h) {
+		end = len(h)
+	}
+	return strings.Contains(h[i:end], "'auto'")
+}
+
+// hasAnyFlag dit si l'utilisateur a déjà posé l'un de ces drapeaux dans
+// EXTRA_ARGS. Loki ajoute plusieurs valeurs par défaut (--parallel, -ngl) : les
+// ajouter EN PLUS de celles de l'utilisateur fait râler le moteur (« argument
+// specified multiple times ») et, pire, c'est la DERNIÈRE occurrence qui gagne
+// — le réglage explicite du preset serait donc silencieusement écrasé par le
+// défaut de Loki. Quand l'utilisateur a tranché, on se tait.
+func hasAnyFlag(args []string, flags ...string) bool {
+	for _, a := range args {
+		name := a
+		if i := strings.IndexByte(name, '='); i > 0 {
+			name = name[:i]
+		}
+		for _, f := range flags {
+			if name == f {
+				return true
+			}
+		}
+	}
+	return false
+}
+
+// normalizeLoadFlags traduit les drapeaux de chargement dépréciés vers
+// --load-mode, sur les moteurs qui le connaissent :
+//
+//	--mlock    → --load-mode mlock   (garder le modèle en RAM)
+//	--no-mmap  → --load-mode none    (tout charger, pas de mmap)
+//	--mmap     → --load-mode mmap
+//
+// Les deux à la fois (--mlock --no-mmap) : mlock l'emporte, c'est l'intention la
+// plus forte (résident en RAM, jamais rendu au système). Un --load-mode déjà
+// écrit à la main dans EXTRA_ARGS gagne sur tout : on retire alors simplement
+// les vieux drapeaux. Sur un moteur ancien, rien n'est touché.
+func normalizeLoadFlags(args []string, supportsLoadMode bool) []string {
+	if !supportsLoadMode {
+		return args
+	}
+	explicit := hasAnyFlag(args, "--load-mode")
+	mlock, nommap, mmap := false, false, false
+	out := make([]string, 0, len(args)+2)
+	for _, a := range args {
+		switch a {
+		case "--mlock":
+			mlock = true
+		case "--no-mmap":
+			nommap = true
+		case "--mmap":
+			mmap = true
+		default:
+			out = append(out, a)
+		}
+	}
+	if explicit || !(mlock || nommap || mmap) {
+		return out
+	}
+	mode := "mmap"
+	switch {
+	case mlock:
+		mode = "mlock"
+	case nommap:
+		mode = "none"
+	}
+	return append(out, "--load-mode", mode)
 }
 
 // cmdServe replaces the historic start.sh: read config.env, build the
@@ -99,6 +213,12 @@ func cmdServe(args []string) error {
 	ktv := get("KV_TYPE_K", kv)
 	vtv := get("KV_TYPE_V", kv)
 
+	// EXTRA_ARGS est lu ICI, avant de composer la ligne de commande : ce que
+	// l'utilisateur a écrit à la main décide des défauts que Loki a le droit
+	// d'ajouter (voir hasAnyFlag). Il est aussi traduit vers les drapeaux de
+	// chargement actuels quand le moteur les attend (voir normalizeLoadFlags).
+	extra := normalizeLoadFlags(splitArgs(cfg["EXTRA_ARGS"]), binSupportsLoadMode(bin))
+
 	llmArgs := []string{bin,
 		"-m", model,
 		"-c", get("CTX", "32768"),
@@ -108,24 +228,43 @@ func cmdServe(args []string) error {
 		"-ub", get("UBATCH", "512"),
 		"--host", get("HOST", "0.0.0.0"),
 		"--port", get("PORT", "8080"),
-		// --parallel 1 EXPLICITE : les llama-server récents ouvrent 4 slots par
-		// défaut, soit des tampons de calcul GPU ×4 — pour un serveur mono-
-		// utilisateur comme Loki, c'est de la VRAM brûlée pour rien. Vécu : une
-		// config 27B/60k ctx qui tournait très bien est morte en « cudaMalloc
-		// failed: out of memory » après une mise à jour du moteur, uniquement à
-		// cause de ce nouveau défaut. PARALLEL=n dans le preset pour qui veut
-		// vraiment servir plusieurs requêtes à la fois.
-		"--parallel", get("PARALLEL", "1"),
 	}
-	// NGL=auto : on n'envoie PAS -ngl, et llama.cpp choisit lui-même combien de
-	// couches tiennent dans la VRAM libre (common_fit_params). Il s'en abstient
-	// dès que la valeur est imposée — « n_gpu_layers already set by user to 999,
-	// abort » — d'où des cudaMalloc en échec, un repli partiel sur le CPU et un
-	// débit effondré alors que le GPU tourne à 100 %.
-	// Le défaut reste 999 (tout sur le GPU) : omettre -ngl sur un llama.cpp
-	// antérieur à cet ajustement automatique le ferait tourner 100 % CPU.
-	if ngl := get("NGL", "999"); !strings.EqualFold(ngl, "auto") {
-		llmArgs = append(llmArgs, "-ngl", ngl)
+	// --parallel 1 EXPLICITE : les llama-server récents ouvrent plusieurs slots
+	// par défaut, soit des tampons de calcul GPU multipliés d'autant — pour un
+	// serveur mono-utilisateur comme Loki, c'est de la VRAM brûlée pour rien.
+	// Vécu : une config 27B/60k ctx qui tournait très bien est morte en
+	// « cudaMalloc failed: out of memory » après une mise à jour du moteur,
+	// uniquement à cause de ce nouveau défaut. PARALLEL=n dans le preset pour qui
+	// veut vraiment servir plusieurs requêtes à la fois — ou --parallel dans
+	// EXTRA_ARGS, auquel cas on ne redouble pas le drapeau.
+	if !hasAnyFlag(extra, "--parallel", "-np") {
+		llmArgs = append(llmArgs, "--parallel", get("PARALLEL", "1"))
+	}
+	// Couches GPU. Trois cas, dans cet ordre :
+	//
+	//   NGL=<nombre>  → -ngl <nombre>      (l'utilisateur tranche)
+	//   NGL=auto      → rien du tout       (compat : anciens presets)
+	//   clé absente   → -ngl auto si le moteur le propose, sinon -ngl 999
+	//
+	// Imposer un nombre désarme common_fit_params, qui mesure la VRAM libre et
+	// choisit combien de couches y tiennent : « n_gpu_layers already set by user
+	// to 999, abort ». Le moteur pousse alors tout sur le GPU, échoue en
+	// cudaMalloc ou se replie à moitié sur le CPU — débit effondré, GPU à 100 %.
+	// D'où « auto » par défaut dès que le moteur sait le faire. Sur un moteur
+	// plus ancien, qui ne connaît pas la valeur, on garde 999 : omettre -ngl le
+	// ferait tourner 100 % CPU.
+	if !hasAnyFlag(extra, "-ngl", "--n-gpu-layers", "--gpu-layers") {
+		ngl := get("NGL", "")
+		switch {
+		case strings.EqualFold(ngl, "auto"):
+			// rien : le moteur décide seul
+		case ngl != "":
+			llmArgs = append(llmArgs, "-ngl", ngl)
+		case binSupportsNGLAuto(bin):
+			llmArgs = append(llmArgs, "-ngl", "auto")
+		default:
+			llmArgs = append(llmArgs, "-ngl", "999")
+		}
 	}
 	if ktv != "" {
 		llmArgs = append(llmArgs, "-ctk", ktv)
@@ -187,9 +326,9 @@ func cmdServe(args []string) error {
 	if k, _ := effectiveAPIKeyErr(); k != "" {
 		llmArgs = append(llmArgs, "--api-key", k)
 	}
-	// EXTRA_ARGS is appended verbatim, split like the shell would — quotes kept
-	// together so a path with spaces stays one argument.
-	llmArgs = append(llmArgs, splitArgs(cfg["EXTRA_ARGS"])...)
+	// EXTRA_ARGS (déjà découpé plus haut comme le ferait le shell — les guillemets
+	// gardent ensemble un chemin qui contient des espaces) ferme la marche.
+	llmArgs = append(llmArgs, extra...)
 
 	// Working dir = LOKI_HOME so relative paths in EXTRA_ARGS (e.g. --mmproj
 	// mmproj-F16.gguf) still resolve.

internal/loki/backend_serve_flags_test.go

@@ -0,0 +1,58 @@
+package loki
+
+import (
+	"reflect"
+	"testing"
+)
+
+func TestHasAnyFlag(t *testing.T) {
+	args := []string{"--parallel", "4", "--load-mode=mlock", "-fa"}
+	if !hasAnyFlag(args, "--parallel", "-np") {
+		t.Fatal("--parallel devrait être détecté")
+	}
+	// Forme --clé=valeur : le nom seul compte.
+	if !hasAnyFlag(args, "--load-mode") {
+		t.Fatal("--load-mode=… devrait être détecté")
+	}
+	if hasAnyFlag(args, "-ngl", "--n-gpu-layers") {
+		t.Fatal("-ngl absent, ne devrait pas être détecté")
+	}
+	// Une VALEUR qui ressemble à un drapeau ne doit pas compter comme tel :
+	// ici "-ngl" n'est pas posé, seul --parallel l'est.
+	if hasAnyFlag(nil, "--parallel") {
+		t.Fatal("liste vide : rien à détecter")
+	}
+}
+
+func TestNormalizeLoadFlags(t *testing.T) {
+	cases := []struct {
+		name     string
+		in       []string
+		supports bool
+		want     []string
+	}{
+		{"moteur ancien : rien ne bouge", []string{"--mlock", "--no-mmap"}, false,
+			[]string{"--mlock", "--no-mmap"}},
+		{"mlock traduit", []string{"--mlock", "-fa"}, true,
+			[]string{"-fa", "--load-mode", "mlock"}},
+		{"no-mmap traduit", []string{"--no-mmap"}, true,
+			[]string{"--load-mode", "none"}},
+		{"mmap traduit", []string{"--mmap"}, true,
+			[]string{"--load-mode", "mmap"}},
+		{"mlock l'emporte sur no-mmap", []string{"--no-mmap", "--mlock"}, true,
+			[]string{"--load-mode", "mlock"}},
+		{"--load-mode explicite gagne, vieux drapeaux retirés",
+			[]string{"--mlock", "--load-mode", "dio"}, true,
+			[]string{"--load-mode", "dio"}},
+		{"rien à traduire", []string{"-fa", "--n-cpu-moe", "8"}, true,
+			[]string{"-fa", "--n-cpu-moe", "8"}},
+	}
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			got := normalizeLoadFlags(c.in, c.supports)
+			if !reflect.DeepEqual(got, c.want) {
+				t.Fatalf("got %q, want %q", got, c.want)
+			}
+		})
+	}
+}

internal/loki/chat_conversation.go

@@ -376,6 +376,13 @@ func (c *Conversation) StartTurn(text string, files []attachInfo, caps Caps, tem
 	// si le process meurt en pleine génération (crash, restart après MAJ), le
 	// message de l'utilisateur survit au lieu de disparaître avec le tour.
 	delta := map[string]any{"user": text}
+	// Nom du modèle qui va produire la réponse : journalisé avec la borne de
+	// tour, donc rejoué au chargement — la carte de réponse garde son modèle
+	// après un rafraîchissement, et un vieux tour garde le modèle de l'époque,
+	// pas celui chargé aujourd'hui.
+	if m := chatModelName(); m != "" {
+		delta["model"] = m
+	}
 	if len(files) > 0 {
 		delta["files"] = files
 	}
@@ -393,6 +400,22 @@ func (c *Conversation) StartTurn(text string, files []attachInfo, caps Caps, tem
 	return nil
 }
 
+// chatModelName renvoie le nom lisible du modèle configuré : fichier sans
+// dossier ni extension .gguf (même règle que modelLabel côté UI), "" si aucun.
+func chatModelName() string {
+	m := strings.TrimSpace(ReadConfig()["MODEL"])
+	if m == "" {
+		return ""
+	}
+	if i := strings.LastIndexAny(m, "/\\"); i >= 0 {
+		m = m[i+1:]
+	}
+	if strings.HasSuffix(strings.ToLower(m), ".gguf") {
+		m = m[:len(m)-len(".gguf")]
+	}
+	return m
+}
+
 // generate exécute un tour complet et journalise chaque événement. Détaché : la
 // fermeture du navigateur n'a aucun effet ici, seul /stop (cancel) l'interrompt.
 // epoch est capturé au StartTurn : si un Reset survient pendant la génération,

internal/loki/run.go

@@ -10,7 +10,7 @@ import (
 	"strings"
 )
 
-const Version = "0.9.4"
+const Version = "0.12.3"
 
 // Main est le vrai main() du binaire (cmd/loki ne fait que l'appeler).
 func Main() {

internal/loki/sys_loadpct_linux.go

@@ -20,6 +20,24 @@ import (
 	"strings"
 )
 
+// procVmRSS lit la mémoire résidente (octets) d'un process — /proc/<pid>/status,
+// ligne « VmRSS:  N kB ». 0 si illisible.
+func procVmRSS(pid int) int64 {
+	b, err := os.ReadFile("/proc/" + strconv.Itoa(pid) + "/status")
+	if err != nil {
+		return 0
+	}
+	for _, line := range strings.Split(string(b), "\n") {
+		if v, ok := strings.CutPrefix(line, "VmRSS:"); ok {
+			v = strings.TrimSpace(strings.TrimSuffix(strings.TrimSpace(v), "kB"))
+			if n, err := strconv.ParseInt(strings.TrimSpace(v), 10, 64); err == nil {
+				return n * 1024
+			}
+		}
+	}
+	return 0
+}
+
 // engineLoadPct renvoie le pourcentage estimé de chargement du modèle, ou -1
 // quand il n'est pas mesurable (pas de PID, /proc illisible, taille inconnue).
 func engineLoadPct() int {
@@ -54,6 +72,16 @@ func engineLoadPct() int {
 	if read < 0 {
 		return -1
 	}
+	// Modèle déjà dans le cache disque (redémarrage à chaud) : llama-server ne
+	// LIT plus rien sur le disque — les pages viennent du cache, read_bytes
+	// reste à zéro et le pourcentage restait figé à 0 jusqu'au « prêt ». La
+	// mémoire résidente (VmRSS), elle, grandit quoi qu'il arrive : les pages du
+	// .gguf touchées via mmap y comptent, cache ou pas. On prend le plus avancé
+	// des deux — approximatif (l'offload GPU peut relâcher des pages), mais le
+	// compteur BOUGE au lieu de mentir.
+	if rss := procVmRSS(pid); rss > read {
+		read = rss
+	}
 	pct := int(read * 100 / size)
 	if pct > 99 {
 		// 100 % n'existe pas ici : c'est /health qui dit « prêt ». Au-delà de 99

internal/loki/ui/src/index.tmpl.html

@@ -75,9 +75,193 @@ document.documentElement.setAttribute('data-side',localStorage.getItem('loki-sid
        latérale par défaut, c'est les discussions et la machine. Les sections
        ouvertes par programme (journal du moteur, installation llama.cpp)
        passent par openDetails(), qui déplie aussi les parents. -->
-  <details id="side-settings"><summary><span class="stitle">Réglages</span></summary>
-  <div class="sidegroup">
-  <details id="svc-log-box" ontoggle="if(this.open){loadSvcLog();showPaths()}"><summary><span class="stitle">Journal du moteur</span></summary>
+  </div><!-- /#side-scroll -->
+  <!-- Réglages : tout vit dans une modale (nav de sections à gauche, panneau à
+       droite) — voir js/22-settings-modal.js ; les ids historiques des sections
+       (svc-log-box, lc-details…) sont conservés sur les panneaux. Le bouton est
+       ANCRÉ en pied de barre, juste au-dessus du moniteur machine : toujours au
+       même endroit, quel que soit le nombre de discussions. -->
+  <button id="side-settings-btn" onclick="openSettings()" aria-haspopup="dialog">
+    <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1.03 1.56V21a2 2 0 1 1-4 0v-.09A1.7 1.7 0 0 0 9 19.35a1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.7 1.7 0 0 0 .34-1.87 1.7 1.7 0 0 0-1.56-1.03H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.65 9a1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.7 1.7 0 0 0 1.87.34H9a1.7 1.7 0 0 0 1.03-1.56V3a2 2 0 1 1 4 0v.09c0 .68.4 1.3 1.03 1.56a1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.7 1.7 0 0 0-.34 1.87v.06c.26.63.88 1.03 1.56 1.03H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.56 1.03z"/></svg>
+    <span>Paramètres</span>
+  </button>
+  <!-- Moniteur machine : charge GPU, VRAM et mémoire vive. Posé en pied, en
+       jauges fines — visible en permanence sans jamais disputer la place au
+       fil. Le détail chiffré (Gio, température) vit sous chaque jauge, et le
+       bloc entier se replie d'un clic. -->
+  <div id="side-perf">
+    <div class="perf-head"><span>Performance</span></div>
+    <div class="perf-body"><div id="vram">…</div><div id="ram-details"><div id="ram"></div></div></div>
+  </div>
+</div>
+<div class="main" style="position:relative">
+  <!-- Barre d'en-tête : de quoi on parle, et avec quel modèle. Le changement de
+       modèle demandait auparavant d'ouvrir la barre latérale et de descendre
+       jusqu'aux presets — trois clics pour un geste qu'on répète. -->
+  <header id="topbar">
+    <button id="sidetoggle" class="iconbtn" onclick="toggleSideCollapse()" title="afficher/masquer la barre latérale" aria-label="afficher ou masquer la barre latérale">
+      <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg>
+    </button>
+    <div id="topbar-title">Nouvelle discussion</div>
+    <select id="model-switch" onchange="onModelSwitch(this)" title="modèle actif — changer relance le moteur" aria-label="modèle actif"></select>
+    <button id="themebtn" class="iconbtn" onclick="toggleThemeQuick()" title="thème clair / sombre" aria-label="basculer le thème">
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
+    </button>
+  </header>
+  <div id="chat"></div>
+  <!-- Voile de chargement du fil : sans lui, une connexion lente donne un chat
+       VIDE indiscernable d'une conversation vide. Masqué au signal {caught_up}. -->
+  <div id="chat-loading"><span class="cl-dots"><span></span><span></span><span></span></span><span id="chat-loading-text">chargement de la conversation…</span></div>
+  <!-- Accueil : affiché UNIQUEMENT quand le fil est réellement vide (et une fois
+       le replay terminé, sinon il clignoterait au chargement de chaque page).
+       Le logo est cloné depuis #brand au démarrage — une seule source de vérité
+       pour le dessin des lettres. -->
+  <div id="chat-empty" aria-hidden="true">
+    <div id="ce-logo"></div>
+    <!-- Une seule ligne, NEUTRE en genre : l'UI est utilisée par tout le monde,
+         pas de civilité ni d'accord qui obligerait à deviner. -->
+    <div id="ce-title">On commence par quoi ?</div>
+  </div>
+  <button id="scrollbtn" onclick="jumpBottom()" title="aller en bas" aria-label="aller en bas"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M6 13l6 6 6-6"/></svg></button>
+  <!-- Voile de dépôt : révélé pendant qu'on survole la fenêtre avec un fichier. -->
+  <div id="dropveil" aria-hidden="true"><div>Déposer pour joindre au message</div></div>
+  <div id="composer">
+    <div id="ctxmeta">
+      <!-- Mode de la discussion : Chat (assistant généraliste) ou Code (agent
+           de code : critères, vérification, LSP). Dans le pied de carte, pas
+           dans la barre de saisie déjà chargée — ça se règle par discussion,
+           pas par message. -->
+      <div id="mode-seg" role="group" aria-label="Mode de la discussion">
+        <button type="button" data-mode="chat" class="on" onclick="setMode('chat')">Chat</button>
+        <button type="button" data-mode="code" onclick="setMode('code')">Code</button>
+      </div>
+      <div id="ctxtrack"><div id="ctx-fill"></div></div>
+      <span id="status-preset" class="muted" style="font-size:10px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"></span>
+      <!-- Pied de carte, à droite : le décompte de contexte, compacter, puis le
+           trombone — tous à la même échelle, c'est une seule ligne d'outils. -->
+      <span style="display:flex;align-items:center;gap:8px;margin-left:auto">
+        <span id="ctx-text" class="muted">0 / 0</span>
+        <button id="ctx-compact" onclick="compactContext()">compacter</button>
+      </span>
+    </div>
+    <!-- Pièces jointes en attente : remplie par addFiles(), vidée à l'envoi.
+         Petites bulles POSÉES AU-DESSUS de la carte, dans la bande de dégradé
+         qui la sépare du fil — la carte ne bouge donc pas d'un pixel. -->
+    <div id="attach-list"></div>
+    <div id="inputbar">
+      <textarea id="input" rows="1" placeholder="Message Loki…" onkeydown="onKey(event)" oninput="autoGrow(this)" onpaste="onPaste(event)"></textarea>
+      <input type="file" id="attach-input" multiple style="display:none" onchange="onAttachPick(event)">
+      <!-- Intensité du raisonnement : réglable ici parce que ça se décide au
+           moment d'écrire le message, pas dans un éditeur de preset. -->
+      <select id="think-effort" title="Intensité du raisonnement" aria-label="Intensité du raisonnement" onchange="setThinkEffort(this.value)">
+        <option value="">auto</option>
+        <option value="none">aucune</option>
+        <option value="low">basse</option>
+        <option value="medium">moyenne</option>
+        <option value="high">haute</option>
+        <option value="xhigh">maximale</option>
+      </select>
+      <!-- Dictée vocale : enregistre au micro, transcrit en local (whisper.cpp
+           côté serveur) et pose le texte dans le champ. Voir js/23-dictate.js.
+           Le navigateur n'autorise le micro qu'en HTTPS (ou localhost). -->
+      <button id="mic" onclick="dictateToggle()" title="dicter au micro" aria-label="dicter au micro">
+        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/></svg>
+      </button>
+      <!-- Joindre un fichier. Icône dessinée en SVG : pas de dépendance à une
+           police d'emoji, dont le rendu varie énormément d'un système à l'autre. -->
+      <button id="attach" onclick="document.getElementById('attach-input').click()" title="joindre un fichier" aria-label="joindre un fichier">
+        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V4"/><path d="m7.5 8.5 4.5-4.5 4.5 4.5"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/></svg>
+      </button>
+      <!-- Fichiers de la discussion : ouvre le panneau de droite. Même gabarit
+           que le dépôt — ce sont les deux faces du même sujet, ce qui entre et
+           ce qui sort. -->
+      <button id="files-btn" onclick="toggleFiles()" title="Fichiers de cette discussion" aria-label="Fichiers de cette discussion" aria-expanded="false">
+        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
+      </button>
+      <!-- Envoi : pastille ronde à flèche, comme la maquette. Le mot « Envoyer »
+           reste porté par aria-label et l'infobulle — l'action garde son nom
+           pour un lecteur d'écran, elle ne l'affiche simplement plus. -->
+      <button id="send" onclick="send()" title="Envoyer" aria-label="Envoyer">
+        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" stroke="none" aria-hidden="true"><path d="M3.4 20.4 21 12 3.4 3.6l.02 6.53L15.5 12 3.42 13.87z"/></svg>
+      </button>
+      <button id="stop" onclick="stopGen()" title="Arrêter la génération" aria-label="Arrêter la génération">
+        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" stroke="none" aria-hidden="true"><rect x="5" y="5" width="14" height="14" rx="3"/></svg>
+      </button>
+    </div>
+    <div id="sendhint" class="muted">Entrée pour envoyer · Maj+Entrée = nouvelle ligne</div>
+  </div>
+</div>
+<!-- Fichiers : ce qui appartient à la DISCUSSION ouverte — pièces jointes
+     déposées, captures, ce que l'agent y a écrit. Panneau de DROITE, symétrique
+     des réglages à gauche, ouvert et fermé par le bouton dossier du pied de
+     carte. Il ne se remplit qu'à l'ouverture (loadFiles) — un ReadDir à chaque
+     chargement de page pour un panneau fermé serait payé par tout le monde et
+     utile à personne. -->
+<div id="files-backdrop" onclick="toggleFiles()"></div>
+<aside id="files" aria-label="Fichiers de cette discussion">
+  <div class="files-head">
+    <!-- Titre court : le panneau est déjà nommé par son contexte, et le libellé
+         complet reste porté par l'aria-label de la section. -->
+    <span class="stitle">Fichiers</span>
+    <button id="files-refresh" onclick="loadFiles()" title="rafraîchir" aria-label="rafraîchir"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.5 12a8.5 8.5 0 1 1-2.5-6"/><path d="M20.5 3.5V9H15"/></svg></button>
+    <button id="files-close" onclick="toggleFiles()" title="fermer" aria-label="Fermer"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 6.5l11 11"/><path d="M17.5 6.5l-11 11"/></svg></button>
+  </div>
+  <!-- Fil d'Ariane : le dossier de la discussion a des sous-dossiers (uploads,
+       captures), il faut pouvoir y descendre et en remonter. -->
+  <div id="files-crumb" class="files-crumb"></div>
+  <div id="files-list" class="files-list"></div>
+  <div id="files-foot" class="files-foot muted"></div>
+</aside>
+<div id="toast"></div>
+<div id="bench-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:30;align-items:center;justify-content:center;padding:20px" onclick="if(event.target===this)closeBenchModal()">
+  <div style="background:var(--bg);border:1px solid var(--border);border-radius:4px;width:100%;max-width:480px;display:flex;flex-direction:column">
+    <div style="padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center">
+      <strong>Benchmark</strong>
+      <button onclick="closeBenchModal()" style="margin:0" title="fermer" aria-label="Fermer"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 6.5l11 11"/><path d="M17.5 6.5l-11 11"/></svg></button>
+    </div>
+    <div id="bench-body" style="padding:18px 20px;display:flex;flex-direction:column;gap:12px"></div>
+    <div style="padding:12px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:6px">
+      <button onclick="closeBenchModal()">fermer</button>
+      <button id="bench-rerun" onclick="runBenchUI()" style="border-color:var(--accent);color:var(--accent)">relancer</button>
+    </div>
+  </div>
+</div>
+<!-- Fenêtre d'export. Un fil relu pour retrouver une réponse n'a que faire des
+     mille lignes de raisonnement qui l'ont produite : on choisit ce qu'on
+     emporte plutôt que de tout prendre ou rien. Les options de CONTENU sont les
+     mêmes pour les deux formats : le format ne décide que du contenant. -->
+<!-- Réglages : modale à deux volets — nav de sections à gauche, LE panneau
+     choisi à droite. Chaque section d'antan (details de la barre latérale) est
+     devenue un panneau .set-pane ; les ids historiques (svc-log-box,
+     lc-details…) sont conservés — openDetails() les résout vers
+     openSettings(panneau), donc pastille d'état et jobs moteur rouvrent la
+     modale au bon endroit. -->
+<div id="settings-modal" class="modal-ov set-ov" style="display:none" onclick="if(event.target===this)closeSettings()">
+  <div class="modal-card set-card">
+    <div class="modal-head">
+      <strong>Paramètres</strong>
+      <button class="modal-x" onclick="closeSettings()" title="fermer" aria-label="Fermer"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 6.5l11 11"/><path d="M17.5 6.5l-11 11"/></svg></button>
+    </div>
+    <div class="set-shell">
+      <nav class="set-nav" id="set-nav" aria-label="sections des réglages">
+        <div class="set-nav-h">Intelligence artificielle</div>
+        <button data-pane="config" onclick="settingsShow('config')">Config active</button>
+        <button data-pane="presets" onclick="settingsShow('presets')">Presets</button>
+        <button data-pane="agent" onclick="settingsShow('agent')"><span>Mode agent</span><span id="agent-badge" class="sbadge"></span></button>
+        <button data-pane="tasks" onclick="settingsShow('tasks')"><span>Tâches planifiées</span><span id="tasks-badge" class="sbadge"></span></button>
+        <button data-pane="sysprompt" onclick="settingsShow('sysprompt')">System prompt</button>
+        <div class="set-nav-h">Moteur</div>
+        <button data-pane="engine" onclick="settingsShow('engine')">Moteur llama.cpp</button>
+        <button data-pane="engine-log" onclick="settingsShow('engine-log')">Journal du moteur</button>
+        <div class="set-nav-h">Application</div>
+        <button data-pane="identity" onclick="settingsShow('identity')">Identité</button>
+        <button data-pane="appearance" onclick="settingsShow('appearance')">Apparence</button>
+        <button data-pane="openai" onclick="settingsShow('openai')">Accès OpenAI</button>
+        <button data-pane="actions" onclick="settingsShow('actions')">Actions</button>
+      </nav>
+      <div class="set-body" id="set-body">
+  <section class="set-pane" data-pane="engine-log" id="svc-log-box">
+    <div class="set-pane-h"><span>Journal du moteur</span></div>
     <div class="row" style="justify-content:flex-end;align-items:center">
       <button onclick="loadSvcLog()" title="rafraîchir" aria-label="rafraîchir le journal"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.5 12a8.5 8.5 0 1 1-2.5-6"/><path d="M20.5 3.5V9H15"/></svg></button>
     </div>
@@ -88,14 +272,17 @@ document.documentElement.setAttribute('data-side',localStorage.getItem('loki-sid
       <span class="io-cap">Emplacements</span>
     </div>
     <div id="paths-msg" class="muted" style="font-size:10px;line-height:1.5"></div>
-  </details>
-  <details open id="cfg-details"><summary><span class="stitle">Config active</span></summary>
+  </section>
+  <section class="set-pane" data-pane="config" id="cfg-details">
+    <div class="set-pane-h"><span>Config active</span></div>
     <div id="cfg" class="slist">…</div>
-  </details>
-  <details><summary><span class="stitle">Presets</span><button class="preset-add" onclick="event.preventDefault();event.stopPropagation();openPreset('')" title="ajouter" aria-label="ajouter"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5.5v13"/><path d="M5.5 12h13"/></svg></button></summary>
+  </section>
+  <section class="set-pane" data-pane="presets">
+    <div class="set-pane-h"><span>Presets</span><button class="preset-add" onclick="event.preventDefault();event.stopPropagation();openPreset('')" title="ajouter" aria-label="ajouter"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5.5v13"/><path d="M5.5 12h13"/></svg></button></div>
     <div class="slist"><div id="presets" class="rowlist"></div></div>
-  </details>
-  <details><summary><span class="stitle">Mode agent</span><span id="agent-badge" class="sbadge"></span></summary>
+  </section>
+  <section class="set-pane" data-pane="agent">
+    <div class="set-pane-h"><span>Mode agent</span></div>
     <div class="slist"><label class="switchrow"><span class="switch"><input type="checkbox" id="agent-toggle" onchange="toggleAgent()"><span class="slider"></span></span> activer le mode agent<span class="help" tabindex="0" onclick="event.preventDefault();event.stopPropagation();this.classList.toggle('open')">?<span class="tip">⚠ active l'<b>accès machine</b> (shell complet via <b>bash</b> sur le serveur) — l'IA peut inspecter, lancer des scripts, écrire/lire/éditer des fichiers (timeout 30s, max 300s). Mémoire et accès internet ci-dessous ne fonctionnent que si le mode agent est activé.</span></span></label></div>
     <!-- Sous-réglages du mode agent. MÊME gabarit que « Machine » / « Apparence » :
          étiquette de groupe nue, puis UNE carte de lignes (.slist). Le groupe
@@ -181,8 +368,9 @@ document.documentElement.setAttribute('data-side',localStorage.getItem('loki-sid
         <label class="switchrow"><span class="switch"><input type="checkbox" id="compact-toggle" onchange="toggleCompact()"><span class="slider"></span></span> compactage automatique du contexte<span class="help" tabindex="0" onclick="event.preventDefault();event.stopPropagation();this.classList.toggle('open')">?<span class="tip">activé par défaut : quand la conversation approche de la limite de contexte, les vieux tours sont résumés automatiquement (façon Hermes) au lieu de t'imposer un « vider ». Discussions quasi illimitées sans perdre le fil.</span></span></label>
       </div>
     </div>
-  </details>
-  <details id="tasks-details"><summary><span class="stitle">Tâches planifiées</span><span id="tasks-badge" class="sbadge"></span></summary>
+  </section>
+  <section class="set-pane" data-pane="tasks" id="tasks-details">
+    <div class="set-pane-h"><span>Tâches planifiées</span></div>
     <!-- Tâches planifiées : l'IA exécute une consigne toute seule sur une
          fréquence réglable (voir tasks.go). Chaque tâche tourne ISOLÉE de la
          conversation — elle livre son résultat via les outils de l'IA (mail via
@@ -198,13 +386,15 @@ document.documentElement.setAttribute('data-side',localStorage.getItem('loki-sid
         <button class="addbtn" style="margin-top:6px" onclick="openTask('')">+ ajouter une tâche</button>
       </div>
     </div>
-  </details>
-  <details><summary><span class="stitle">System prompt</span></summary>
+  </section>
+  <section class="set-pane" data-pane="sysprompt">
+    <div class="set-pane-h"><span>System prompt</span></div>
     <div class="slist"><div class="rowbody">
       <textarea id="sysprompt" placeholder="(optionnel) ex: tu es un assistant concis en français" oninput="saveSys()" class="sctl"></textarea>
     </div></div>
-  </details>
-  <details id="lc-details"><summary><span class="stitle">Moteur</span></summary>
+  </section>
+  <section class="set-pane" data-pane="engine" id="lc-details">
+    <div class="set-pane-h"><span>Moteur</span></div>
     <!-- Une seule carte : état, choix du mode et journal d'installation sont le
          même sujet. Les trois modes sont des LIGNES de cette carte (elles
          étaient des cartes dans une carte). -->
@@ -220,9 +410,10 @@ document.documentElement.setAttribute('data-side',localStorage.getItem('loki-sid
         <div class="muted" style="margin-top:4px"><code id="lc-provided-bin" style="word-break:break-all"></code></div>
         <div id="eng-latest" style="margin-top:6px"></div>
         <div class="row" style="margin:8px 0 0">
-          <!-- Pas de bouton « vérifier la version » : la mise à jour fait sa
-               propre vérification et dit s'il n'y a rien de neuf. Un bouton de
-               moins pour la même information. -->
+          <!-- « vérifier » ne fait QUE regarder (aucun téléchargement, aucune
+               confirmation) ; « mettre à jour » télécharge et bascule. Les deux
+               gestes n'engagent pas pareil, chacun son bouton. -->
+          <button onclick="engCheck()">vérifier les mises à jour</button>
           <button onclick="engUpdate()">mettre à jour le moteur</button>
           <button id="eng-revert" style="display:none" onclick="engUse('image')">revenir au moteur de l'image</button>
         </div>
@@ -269,18 +460,16 @@ document.documentElement.setAttribute('data-side',localStorage.getItem('loki-sid
         <button onclick="act('stop')">arrêter</button>
       </div>
     </div></div>
-  </details>
-  </div><!-- /sidegroup -->
+  </section>
   <!-- ── PARAMÈTRES DE L'APPLICATION ────────────────────────────────────
        Séparés des réglages d'IA (Machine, Presets, Mode agent, System
        prompt, Moteur), qui restent au-dessus : ce qui suit ne concerne que
        l'application elle-même. -->
-  <div class="side-sep">Paramètres</div>
   <!-- sidegroup : plusieurs sections dans UNE carte. Une carte par section
        empilait 11 arrondis et autant de gouttières : la barre latérale ne
        tenait plus dans un écran, alors que ces lignes sont des titres repliés. -->
-  <div class="sidegroup">
-  <details id="ident-details"><summary><span class="stitle">Identité</span></summary>
+  <section class="set-pane" data-pane="identity" id="ident-details">
+    <div class="set-pane-h"><span>Identité</span></div>
     <div class="slist"><div class="rowbody">
       <div class="pe-row">
         <span class="pe-row-l">Ton prénom<span class="pe-sub">affiché sur tes messages</span></span>
@@ -300,8 +489,9 @@ document.documentElement.setAttribute('data-side',localStorage.getItem('loki-sid
         <div id="p-avatar-ai" class="avpick"></div>
       </div>
     </div></div>
-  </details>
-  <details><summary><span class="stitle">Apparence</span></summary>
+  </section>
+  <section class="set-pane" data-pane="appearance">
+    <div class="set-pane-h"><span>Apparence</span></div>
     <div class="slist">
       <label class="switchrow rev"><span>mode sombre</span>
         <span class="switch"><input type="checkbox" id="theme-dark" onchange="toggleThemeDark()"><span class="slider"></span></span>
@@ -314,8 +504,9 @@ document.documentElement.setAttribute('data-side',localStorage.getItem('loki-sid
     <label class="switchrow"><span class="switch"><input type="checkbox" id="view-fold-tools" onchange="toggleView('fold-tools')"><span class="slider"></span></span> garder les bulles repliées<span class="help" tabindex="0" onclick="event.preventDefault();event.stopPropagation();this.classList.toggle('open')">?<span class="tip">Les bulles de raisonnement et d'outil arrivent <b>déjà fermées</b> au lieu de s'ouvrir puis se refermer. Un clic sur leur étiquette les déplie.</span></span></label>
     <label class="switchrow"><span class="switch"><input type="checkbox" id="view-hide-stats" onchange="toggleView('hide-stats')"><span class="slider"></span></span> masquer la vitesse de génération<span class="help" tabindex="0" onclick="event.preventDefault();event.stopPropagation();this.classList.toggle('open')">?<span class="tip">Sous chaque réponse : <b>prefill</b> (lecture du contexte) et <b>decode</b> (écriture), en tokens et en tokens/seconde. Coche pour ne plus les afficher.</span></span></label>
     </div>
-  </details>
-  <details><summary><span class="stitle">Accès OpenAI</span></summary>
+  </section>
+  <section class="set-pane" data-pane="openai">
+    <div class="set-pane-h"><span>Accès OpenAI</span></div>
     <div class="subhead">Endpoint compatible OpenAI<span class="help" tabindex="0" onclick="event.preventDefault();event.stopPropagation();this.classList.toggle('open')">?<span class="tip">Branchez n'importe quel client compatible OpenAI (OpenCode, Continue, Cursor, Open WebUI…) sur cette adresse — le modèle s'y appelle <code>loki</code>. L'endpoint est servi par Loki <b>sur le port de cette interface</b> : aucun autre port à ouvrir. Si une clé est définie, le client doit envoyer <code>Authorization: Bearer &lt;clé&gt;</code>.</span></span></div>
     <div class="slist">
       <div class="rowbody">
@@ -351,8 +542,9 @@ document.documentElement.setAttribute('data-side',localStorage.getItem('loki-sid
         <button onclick="apiKeyAction('clear')">retirer</button>
       </div>
     </div></div>
-  </details>
-  <details id="upd-details"><summary><span class="stitle">Actions</span></summary>
+  </section>
+  <section class="set-pane" data-pane="actions" id="upd-details">
+    <div class="set-pane-h"><span>Actions</span></div>
     <div class="slist"><div class="rowbody">
       <!-- Ligne 1 : mise à jour + export du fil. Depuis la 0.8 la conversation vit
            dans loki.db (bbolt, verrouillé tant que le service tourne) : sans le
@@ -368,149 +560,11 @@ document.documentElement.setAttribute('data-side',localStorage.getItem('loki-sid
         <button onclick="resetChat()" title="vider la discussion"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16"/><path d="M9.5 7V4.5h5V7"/><path d="M6.5 7l1 12.5h9l1-12.5"/></svg><span>vider la discussion</span></button>
       </div>
     </div></div>
-  </details>
-  </div><!-- /sidegroup -->
-  </details><!-- /#side-settings -->
-  </div><!-- /#side-scroll -->
-  <!-- Moniteur machine : charge GPU, VRAM et mémoire vive. Posé en pied, en
-       jauges fines — visible en permanence sans jamais disputer la place au
-       fil. Le détail chiffré (Gio, température) vit sous chaque jauge, et le
-       bloc entier se replie d'un clic. -->
-  <div id="side-perf">
-    <div class="perf-head"><span>Performance</span></div>
-    <div class="perf-body"><div id="vram">…</div><div id="ram-details"><div id="ram"></div></div></div>
+  </section>
+      </div><!-- /.set-body -->
+    </div><!-- /.set-shell -->
   </div>
 </div>
-<div class="main" style="position:relative">
-  <!-- Barre d'en-tête : de quoi on parle, et avec quel modèle. Le changement de
-       modèle demandait auparavant d'ouvrir la barre latérale et de descendre
-       jusqu'aux presets — trois clics pour un geste qu'on répète. -->
-  <header id="topbar">
-    <button id="sidetoggle" class="iconbtn" onclick="toggleSideCollapse()" title="afficher/masquer la barre latérale" aria-label="afficher ou masquer la barre latérale">
-      <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></svg>
-    </button>
-    <div id="topbar-title">Nouvelle discussion</div>
-    <select id="model-switch" onchange="onModelSwitch(this)" title="modèle actif — changer relance le moteur" aria-label="modèle actif"></select>
-    <button id="themebtn" class="iconbtn" onclick="toggleThemeQuick()" title="thème clair / sombre" aria-label="basculer le thème">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
-    </button>
-  </header>
-  <div id="chat"></div>
-  <!-- Voile de chargement du fil : sans lui, une connexion lente donne un chat
-       VIDE indiscernable d'une conversation vide. Masqué au signal {caught_up}. -->
-  <div id="chat-loading"><span class="cl-dots"><span></span><span></span><span></span></span><span id="chat-loading-text">chargement de la conversation…</span></div>
-  <!-- Accueil : affiché UNIQUEMENT quand le fil est réellement vide (et une fois
-       le replay terminé, sinon il clignoterait au chargement de chaque page).
-       Le logo est cloné depuis #brand au démarrage — une seule source de vérité
-       pour le dessin des lettres. -->
-  <div id="chat-empty" aria-hidden="true">
-    <div id="ce-logo"></div>
-    <!-- Une seule ligne, NEUTRE en genre : l'UI est utilisée par tout le monde,
-         pas de civilité ni d'accord qui obligerait à deviner. -->
-    <div id="ce-title">On commence par quoi ?</div>
-  </div>
-  <button id="scrollbtn" onclick="jumpBottom()" title="aller en bas" aria-label="aller en bas"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"/><path d="M6 13l6 6 6-6"/></svg></button>
-  <!-- Voile de dépôt : révélé pendant qu'on survole la fenêtre avec un fichier. -->
-  <div id="dropveil" aria-hidden="true"><div>Déposer pour joindre au message</div></div>
-  <div id="composer">
-    <div id="ctxmeta">
-      <!-- Mode de la discussion : Chat (assistant généraliste) ou Code (agent
-           de code : critères, vérification, LSP). Dans le pied de carte, pas
-           dans la barre de saisie déjà chargée — ça se règle par discussion,
-           pas par message. -->
-      <div id="mode-seg" role="group" aria-label="Mode de la discussion">
-        <button type="button" data-mode="chat" class="on" onclick="setMode('chat')">Chat</button>
-        <button type="button" data-mode="code" onclick="setMode('code')">Code</button>
-      </div>
-      <div id="ctxtrack"><div id="ctx-fill"></div></div>
-      <span id="status-preset" class="muted" style="font-size:10px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"></span>
-      <!-- Pied de carte, à droite : le décompte de contexte, compacter, puis le
-           trombone — tous à la même échelle, c'est une seule ligne d'outils. -->
-      <span style="display:flex;align-items:center;gap:8px;margin-left:auto">
-        <span id="ctx-text" class="muted">0 / 0</span>
-        <button id="ctx-compact" onclick="compactContext()">compacter</button>
-      </span>
-    </div>
-    <!-- Pièces jointes en attente : remplie par addFiles(), vidée à l'envoi.
-         Petites bulles POSÉES AU-DESSUS de la carte, dans la bande de dégradé
-         qui la sépare du fil — la carte ne bouge donc pas d'un pixel. -->
-    <div id="attach-list"></div>
-    <div id="inputbar">
-      <textarea id="input" rows="1" placeholder="Message Loki…" onkeydown="onKey(event)" oninput="autoGrow(this)" onpaste="onPaste(event)"></textarea>
-      <input type="file" id="attach-input" multiple style="display:none" onchange="onAttachPick(event)">
-      <!-- Intensité du raisonnement : réglable ici parce que ça se décide au
-           moment d'écrire le message, pas dans un éditeur de preset. -->
-      <select id="think-effort" title="Intensité du raisonnement" aria-label="Intensité du raisonnement" onchange="setThinkEffort(this.value)">
-        <option value="">auto</option>
-        <option value="none">aucune</option>
-        <option value="low">basse</option>
-        <option value="medium">moyenne</option>
-        <option value="high">haute</option>
-        <option value="xhigh">maximale</option>
-      </select>
-      <!-- Joindre un fichier. Icône dessinée en SVG : pas de dépendance à une
-           police d'emoji, dont le rendu varie énormément d'un système à l'autre. -->
-      <button id="attach" onclick="document.getElementById('attach-input').click()" title="joindre un fichier" aria-label="joindre un fichier">
-        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V4"/><path d="m7.5 8.5 4.5-4.5 4.5 4.5"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/></svg>
-      </button>
-      <!-- Fichiers de la discussion : ouvre le panneau de droite. Même gabarit
-           que le dépôt — ce sont les deux faces du même sujet, ce qui entre et
-           ce qui sort. -->
-      <button id="files-btn" onclick="toggleFiles()" title="Fichiers de cette discussion" aria-label="Fichiers de cette discussion" aria-expanded="false">
-        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
-      </button>
-      <!-- Envoi : pastille ronde à flèche, comme la maquette. Le mot « Envoyer »
-           reste porté par aria-label et l'infobulle — l'action garde son nom
-           pour un lecteur d'écran, elle ne l'affiche simplement plus. -->
-      <button id="send" onclick="send()" title="Envoyer" aria-label="Envoyer">
-        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" stroke="none" aria-hidden="true"><path d="M3.4 20.4 21 12 3.4 3.6l.02 6.53L15.5 12 3.42 13.87z"/></svg>
-      </button>
-      <button id="stop" onclick="stopGen()" title="Arrêter la génération" aria-label="Arrêter la génération">
-        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" stroke="none" aria-hidden="true"><rect x="5" y="5" width="14" height="14" rx="3"/></svg>
-      </button>
-    </div>
-    <div id="sendhint" class="muted">Entrée pour envoyer · Maj+Entrée = nouvelle ligne</div>
-  </div>
-</div>
-<!-- Fichiers : ce qui appartient à la DISCUSSION ouverte — pièces jointes
-     déposées, captures, ce que l'agent y a écrit. Panneau de DROITE, symétrique
-     des réglages à gauche, ouvert et fermé par le bouton dossier du pied de
-     carte. Il ne se remplit qu'à l'ouverture (loadFiles) — un ReadDir à chaque
-     chargement de page pour un panneau fermé serait payé par tout le monde et
-     utile à personne. -->
-<div id="files-backdrop" onclick="toggleFiles()"></div>
-<aside id="files" aria-label="Fichiers de cette discussion">
-  <div class="files-head">
-    <!-- Titre court : le panneau est déjà nommé par son contexte, et le libellé
-         complet reste porté par l'aria-label de la section. -->
-    <span class="stitle">Fichiers</span>
-    <button id="files-refresh" onclick="loadFiles()" title="rafraîchir" aria-label="rafraîchir"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.5 12a8.5 8.5 0 1 1-2.5-6"/><path d="M20.5 3.5V9H15"/></svg></button>
-    <button id="files-close" onclick="toggleFiles()" title="fermer" aria-label="Fermer"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 6.5l11 11"/><path d="M17.5 6.5l-11 11"/></svg></button>
-  </div>
-  <!-- Fil d'Ariane : le dossier de la discussion a des sous-dossiers (uploads,
-       captures), il faut pouvoir y descendre et en remonter. -->
-  <div id="files-crumb" class="files-crumb"></div>
-  <div id="files-list" class="files-list"></div>
-  <div id="files-foot" class="files-foot muted"></div>
-</aside>
-<div id="toast"></div>
-<div id="bench-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:30;align-items:center;justify-content:center;padding:20px" onclick="if(event.target===this)closeBenchModal()">
-  <div style="background:var(--bg);border:1px solid var(--border);border-radius:4px;width:100%;max-width:480px;display:flex;flex-direction:column">
-    <div style="padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center">
-      <strong>Benchmark</strong>
-      <button onclick="closeBenchModal()" style="margin:0" title="fermer" aria-label="Fermer"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 6.5l11 11"/><path d="M17.5 6.5l-11 11"/></svg></button>
-    </div>
-    <div id="bench-body" style="padding:18px 20px;display:flex;flex-direction:column;gap:12px"></div>
-    <div style="padding:12px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:6px">
-      <button onclick="closeBenchModal()">fermer</button>
-      <button id="bench-rerun" onclick="runBenchUI()" style="border-color:var(--accent);color:var(--accent)">relancer</button>
-    </div>
-  </div>
-</div>
-<!-- Fenêtre d'export. Un fil relu pour retrouver une réponse n'a que faire des
-     mille lignes de raisonnement qui l'ont produite : on choisit ce qu'on
-     emporte plutôt que de tout prendre ou rien. Les options de CONTENU sont les
-     mêmes pour les deux formats : le format ne décide que du contenant. -->
 <div id="export-modal" class="modal-ov" style="display:none" onclick="if(event.target===this)closeExportModal()">
   <div class="modal-card" style="max-width:460px">
     <div class="modal-head">
@@ -864,6 +918,23 @@ document.documentElement.setAttribute('data-side',localStorage.getItem('loki-sid
               </div>
               <div class="pe-note">Ces dossiers servent aussi de destination de téléchargement.</div>
             </div>
+            <!-- Jeton Hugging Face. Replié comme « Dossiers de modèles » : on n'y
+                 touche qu'une fois, le jour où un dépôt à accès restreint refuse
+                 le téléchargement. Il vaut aussi pour la recherche, d'où sa place
+                 dans ce groupe plutôt qu'à côté de la clé API du serveur, qui ne
+                 parle pas du tout de la même chose. -->
+            <div id="m-hft-toggle" class="pe-row" style="cursor:pointer" onclick="toggleHFToken()">
+              <span class="pe-row-l">Jeton Hugging Face<span class="pe-sub">dépôts à accès restreint (« gated ») ou privés</span></span>
+              <span class="pe-row-c"><span id="m-hft-state" class="pe-sub"></span><span id="m-hft-caret" class="pe-caret"></span></span>
+            </div>
+            <div id="m-hft-body" class="pe-row stack" style="display:none">
+              <div class="pe-inpbtn">
+                <input id="m-hft-input" class="pe-inp" type="password" autocomplete="off" spellcheck="false" placeholder="hf_…" onkeydown="if(event.key==='Enter'){event.preventDefault();saveHFToken();}">
+                <button id="m-hft-save" onclick="saveHFToken()" title="Vérifier et enregistrer" aria-label="Enregistrer">✓</button>
+              </div>
+              <div id="m-hft-note" class="pe-note"></div>
+              <button id="m-hft-clear" class="pe-link" onclick="clearHFToken()" style="display:none">Retirer le jeton</button>
+            </div>
           </div>
         </div>
 

internal/loki/ui/src/js/06-settings.js

@@ -451,7 +451,7 @@ async function loadAll(){
   // MANQUANTE lève ici une ReferenceError qui est avalée en silence. Toute
   // suppression de module doit donc retirer son appel de cette ligne, et le test
   // navigateur écoute `pageerror` pour ne pas s'en apercevoir trop tard.
-  await Promise.allSettled([loadStatus(),loadVram(),loadRam(),loadCfg(),loadPresets(),loadConversations(),loadIdentity(),loadAgent(),loadInternet(),loadMCP(),loadApiKey(),loadPrefs(),loadLlamacpp(),loadThinkEffort(),loadTasks()]);
+  await Promise.allSettled([loadStatus(),loadVram(),loadRam(),loadCfg(),loadPresets(),loadModelSwitchFiles(),loadConversations(),loadIdentity(),loadAgent(),loadInternet(),loadMCP(),loadApiKey(),loadPrefs(),loadLlamacpp(),loadThinkEffort(),loadTasks()]);
   releaseHeights(); // tout est en place : on rend la main et on mesure pour la prochaine fois
 }
 async function act(a){ toast(a+'…'); await jpost('/api/'+a); setTimeout(loadAll,1500); }

internal/loki/ui/src/js/07-models.js

@@ -121,6 +121,10 @@ async function openItem(kind, key){
     // Dossiers de modèles : replié par défaut (réglage rare), chargé à l'ouverture.
     document.getElementById('m-dir-path').value = '';
     setModelDirsOpen(false);
+    // Jeton Hugging Face : même traitement, mais son ÉTAT est lu tout de suite —
+    // c'est lui qui s'affiche sur la ligne repliée (« aucun », « enregistré »).
+    setHFTokenOpen(false);
+    loadHFToken();
   } else {
     modelRow.style.display = 'none';
     settingsRow.style.display = 'none';
@@ -261,6 +265,70 @@ function setModelDirsOpen(open){
 function toggleModelDirs(){
   setModelDirsOpen(document.getElementById('m-dirs-body').style.display === 'none');
 }
+
+// ---- Jeton Hugging Face ----------------------------------------------------
+// Un dépôt « gated » se lit sans jeton mais ne se télécharge pas. Le jeton se
+// posait uniquement par la variable d'environnement HF_TOKEN : en conteneur, ça
+// voulait dire éditer un docker-compose et recréer le conteneur pour répondre à
+// un 401 découvert ici. Il se règle donc à l'endroit où le problème apparaît.
+function setHFTokenOpen(open){
+  const b = document.getElementById('m-hft-body');
+  const c = document.getElementById('m-hft-caret');
+  if(!b) return;
+  b.style.display = open ? '' : 'none';
+  if(c) c.classList.toggle('open', open);
+}
+function toggleHFToken(){
+  setHFTokenOpen(document.getElementById('m-hft-body').style.display === 'none');
+}
+async function loadHFToken(){
+  let d = {};
+  try{ d = await jget('/api/hf/token'); }catch(_){ return; }
+  renderHFToken(d);
+}
+// Le jeton n'est jamais renvoyé en clair par le serveur : on n'affiche que sa
+// forme masquée et sa provenance. « env » se signale à part — l'interface ne
+// peut pas effacer une variable du conteneur, promettre le contraire par un
+// bouton « Retirer » serait mentir.
+function renderHFToken(d){
+  const st = document.getElementById('m-hft-state');
+  const note = document.getElementById('m-hft-note');
+  const clear = document.getElementById('m-hft-clear');
+  const inp = document.getElementById('m-hft-input');
+  if(!st || !note || !clear || !inp) return;
+  inp.value = '';
+  const src = (d && d.source) || '';
+  st.textContent = src ? (d.masked || 'enregistré') : 'aucun';
+  clear.style.display = src === 'config' ? '' : 'none';
+  if(src === 'env'){
+    note.textContent = 'Jeton fourni par la variable d’environnement HF_TOKEN. En enregistrer un ici le remplacera.';
+  } else if(src === 'config'){
+    note.textContent = 'Jeton enregistré' + (d.account ? ' — compte ' + d.account : '')
+      + '. Un dépôt à accès restreint exige EN PLUS d’avoir accepté ses conditions sur huggingface.co avec ce compte.';
+  } else {
+    note.textContent = 'Sans jeton, les dépôts à accès restreint répondent 401 au téléchargement. Crée un jeton en lecture sur huggingface.co/settings/tokens, accepte les conditions du dépôt, puis colle-le ici.';
+  }
+}
+// Vérifié côté serveur AVANT d'être enregistré : un jeton mal collé accepté en
+// silence rendrait exactement le 401 qu'on cherche à expliquer.
+async function saveHFToken(){
+  const inp = document.getElementById('m-hft-input');
+  const tok = (inp.value || '').trim();
+  if(!tok){ toast('colle un jeton (hf_…)'); return; }
+  toast('vérification du jeton…');
+  const r = await jpost('/api/hf/token', {token: tok});
+  if(!r || !r.ok){ toast('jeton refusé : ' + ((r && r.error) || '')); return; }
+  renderHFToken(r);
+  toast(r.account ? 'jeton enregistré — compte ' + r.account : 'jeton enregistré');
+}
+async function clearHFToken(){
+  if(!await askConfirm('Les dépôts à accès restreint répondront de nouveau 401 au téléchargement.',
+      {title:'Retirer le jeton Hugging Face ?', okText:'Retirer'})) return;
+  const r = await jpost('/api/hf/token', {token: ''});
+  if(!r || !r.ok){ toast('erreur : ' + ((r && r.error) || '')); return; }
+  renderHFToken(r);
+  toast('jeton retiré');
+}
 async function populateModelDirs(){
   const box = document.getElementById('m-dirs-list');
   if(!box) return;
@@ -1093,11 +1161,29 @@ async function hfSearch(){
     const m = document.createElement('span'); m.className = 'hf-meta';
     m.textContent = fmtCount(rep.downloads)+' ↓';
     row.append(n, m);
+    // Dépôt verrouillé : il se LIT sans rien, mais chaque .gguf répond 401 au
+    // transfert. La pastille le dit dès la liste — sinon on choisit un quant,
+    // on lance 15 Go et l'erreur tombe à la fin de la sonde.
+    if(rep.gated){
+      const g = document.createElement('span');
+      g.className = 'hf-fit gated';
+      g.textContent = 'accès restreint';
+      g.title = hfGatedHint(r.hf_token);
+      row.appendChild(g);
+    }
     list.appendChild(row);
   }
   o.appendChild(list);
 }
 
+// Le geste à faire n'est pas le même selon qu'un jeton est configuré ou non :
+// sans jeton il en faut un, avec jeton c'est l'accès au dépôt qui manque.
+function hfGatedHint(hasToken){
+  return hasToken
+    ? 'Dépôt à accès restreint : le jeton enregistré sera utilisé. Si le téléchargement échoue en 401, accepte les conditions du dépôt sur huggingface.co avec le compte de ce jeton.'
+    : 'Dépôt à accès restreint : accepte ses conditions sur huggingface.co, puis enregistre un jeton dans « Jeton Hugging Face » plus bas. Sans jeton, le téléchargement échouera en 401.';
+}
+
 // Millions/milliers abrégés : un dépôt à 1 945 635 téléchargements dit surtout
 // « celui-là est le plus utilisé », pas son compte exact.
 function fmtCount(n){
@@ -1125,8 +1211,36 @@ async function hfPickRepo(repo){
   back.onclick = hfSearch;
   const title = document.createElement('span'); title.className = 'hf-name'; title.textContent = repo;
   head.append(back, title);
+  if(r.gated){
+    const g = document.createElement('span');
+    g.className = 'hf-fit gated'; g.textContent = 'accès restreint';
+    head.appendChild(g);
+  }
   o.appendChild(head);
 
+  // Avertissement en toutes lettres : la pastille seule ne dit pas quoi faire,
+  // et c'est ici que le téléchargement se déclenche.
+  if(r.gated){
+    const warn = document.createElement('div');
+    warn.className = 'pe-note';
+    warn.style.color = r.hf_token ? 'var(--warn)' : 'var(--err)';
+    warn.textContent = hfGatedHint(r.hf_token);
+    o.appendChild(warn);
+    // Le réglage est plus bas dans la même fenêtre : y mener directement évite
+    // de le chercher, et c'est le seul geste qui débloque ce dépôt.
+    if(!r.hf_token){
+      const go = document.createElement('button');
+      go.className = 'pe-link'; go.textContent = 'Renseigner un jeton Hugging Face';
+      go.onclick = ()=>{
+        setHFTokenOpen(true);
+        const inp = document.getElementById('m-hft-input');
+        document.getElementById('m-hft-toggle').scrollIntoView({block:'center', behavior:'smooth'});
+        if(inp) inp.focus();
+      };
+      o.appendChild(go);
+    }
+  }
+
   // Projecteur vision : proposé UNIQUEMENT s'il vient de ce dépôt. Un mmproj
   // encode dans l'espace latent de SON modèle ; en prendre un ailleurs donne un
   // moteur qui démarre et ne voit rien. Quand le dépôt n'en publie pas, on le

internal/loki/ui/src/js/08-chat-render.js

@@ -368,6 +368,11 @@ function renderToolMsg(el, tu){
     body.appendChild(wait);
   }
   addCopyButtons(body); scrollMaybe();
+  // Carte à hauteur bornée : tant que l'outil TRAVAILLE, on suit le bas (la
+  // ligne en cours d'écriture, la commande qui se tape). Terminé, on remonte en
+  // tête — c'est le résumé qu'on relit, pas la dernière ligne.
+  const bw = el.querySelector('.bodywrap');
+  if(bw){ bw.scrollTop = tu.done ? 0 : bw.scrollHeight; }
 }
 // Inject a "copier" button into every <pre> code block (idempotent).
 function addCopyButtons(root){

internal/loki/ui/src/js/09-stream.js

@@ -51,7 +51,7 @@ function confirmPending(text){
 let REPLAYING=true;
 // État de rendu du tour courant, délimité par les événements user / turn_done.
 let T=null;
-function newTurn(){ T={ reasonEl:null, contentEl:null, pendingToolEl:null, typingEl:null, fullContent:'', fullReason:'', turnCollapsibles:[], serverStats:null, reasonTok:0, contentTok:0, reasonFirstTs:0, reasonLastTs:0, contentFirstTs:0, contentLastTs:0, startTs:0, doneTs:0, speedText:'' }; }
+function newTurn(){ T={ reasonEl:null, contentEl:null, pendingToolEl:null, typingEl:null, fullContent:'', fullReason:'', turnCollapsibles:[], serverStats:null, reasonTok:0, contentTok:0, reasonFirstTs:0, reasonLastTs:0, contentFirstTs:0, contentLastTs:0, startTs:0, doneTs:0, speedText:'', model:'' }; }
 newTurn();
 
 // --- Temps de travail du tour ------------------------------------------------
@@ -89,9 +89,28 @@ function paintTurnClock(){
   }
   const ms = (T.doneTs || nowServer()) - T.startTs;
   if(!(ms > 0)){ el.remove(); return; }
-  el.textContent = (T.doneTs ? 'tour terminé en ' : 'en cours — ') + fmtDur(ms);
+  // Vitesse moyenne de la CONVERSATION à côté du temps du tour : le débit
+  // typique de ce modèle sur ce fil, toutes réponses confondues.
+  const avg = (CONV_MS > 1000 && CONV_TOK > 20)
+    ? '  ·  moy ' + (CONV_TOK / (CONV_MS/1000)).toFixed(1) + ' tok/s' : '';
+  el.textContent = (T.doneTs ? 'tour terminé en ' : 'en cours — ') + fmtDur(ms) + avg;
   el.classList.toggle('done', !!T.doneTs);
 }
+// --- Vitesse moyenne de la conversation --------------------------------------
+// Alimentée par les événements `stats` (journalisés, donc rejoués au
+// chargement : la moyenne survit au refresh). gen_tokens / gen_ms sont
+// CUMULATIFS au sein d'une complétion et retombent à la suivante : on n'ajoute
+// que le delta, et une valeur qui recule signale une nouvelle complétion.
+let CONV_TOK = 0, CONV_MS = 0, _cgTok = 0, _cgMs = 0;
+function feedConvSpeed(s){
+  const gt = s.gen_tokens || 0, gms = s.gen_ms || 0;
+  if(!gt) return;
+  if(gt < _cgTok){ _cgTok = 0; _cgMs = 0; }
+  CONV_TOK += gt - _cgTok;
+  CONV_MS  += Math.max(0, gms - _cgMs);
+  _cgTok = gt; _cgMs = gms;
+}
+function resetConvSpeed(){ CONV_TOK = 0; CONV_MS = 0; _cgTok = 0; _cgMs = 0; }
 // Le compteur se montre AUSSI sur l'indicateur « … » : pendant un appel d'outil
 // ou un long prefill il n'y a encore aucune réponse sous laquelle écrire, et
 // c'est précisément le moment où l'on se demande si ça avance.
@@ -227,6 +246,15 @@ function labelTokens(el, role, n, firstTs, lastTs){
   if(el.classList.contains('collapsible')) setLabel(el, [role].concat(d||[], m).join('  ·  '));
   else paintStats(el, m);
 }
+// Badge du modèle sur une bulle de réponse : le nom voyage avec la borne de
+// tour (T.model), on le dépose dans dataset.model pour qu'applyIdentity — qui
+// repeint les libellés de zéro — puisse le reposer (voir paintLabel).
+function tagModel(el){
+  if(!el || !T.model) return;
+  el.dataset.model = T.model;
+  const l = el.querySelector('.label');
+  if(l && !l.querySelector('.modelbadge') && typeof modelBadge==='function') l.appendChild(modelBadge(T.model));
+}
 // Pendant le replay on met à jour l'état `busy` mais on NE touche PAS aux boutons
 // (sinon user→stop puis turn_done→send à chaque tour rejoué = flottement visible).
 // L'état final est appliqué une seule fois au caught_up via syncSendBtn().
@@ -269,11 +297,15 @@ function syncSendBtn(){
 // garanti par flushRender(), appelé à chaque frontière de bloc (outil, fin de
 // tour, erreur, caught_up).
 let renderTimer=null, renderPending=null, lastRenderMs=0; // {el, text}
-function scheduleRender(el, text){
+function scheduleRender(el, text, final){
   // Changement de bloc en cours de route : on rend d'abord l'ancien à sa dernière
   // valeur, sinon son ultime bout de texte serait perdu.
   if(renderPending && renderPending.el!==el) flushRender();
-  renderPending={el, text};
+  // `final` voyage AVEC le rendu en attente : le timer déjà armé (qui passe
+  // final=false) peut être celui qui consommera ce rendu — sans le drapeau sur
+  // le pending, le rendu de FIN de bloc repassait par le chemin « queue seule »
+  // et le début du raisonnement n'était jamais posé.
+  renderPending={el, text, final:!!final};
   if(renderTimer) return;
   // Cadence ADAPTATIVE : on vise à ne pas passer plus d'~1/6 du temps à re-parser
   // le Markdown. Tant que le bloc est petit, un rendu coûte 1-2 ms → plancher
@@ -281,15 +313,34 @@ function scheduleRender(el, text){
   // devient énorme, le rendu coûte cher et on espace tout seul jusqu'à 500 ms :
   // le O(n²) est cassé sans jamais figer l'interface.
   const delay=Math.min(500, Math.max(16, lastRenderMs*6));
-  renderTimer=setTimeout(flushRender, delay);
+  renderTimer=setTimeout(()=>flushRender(false), delay);
 }
-function flushRender(){
+// Au-delà de cette taille, un raisonnement EN COURS n'est re-parsé que sur sa
+// fin : re-parser le bloc entier à chaque tick est en O(n²) et finissait par
+// figer l'affichage (le texte semblait s'arrêter alors que le moteur débitait).
+// La carte étant bornée en hauteur et collée en bas, on ne perd rien à l'écran ;
+// le texte COMPLET est posé au rendu final (frontière de bloc → final=true).
+const REASON_TAIL=6000;
+function flushRender(final){
   if(renderTimer){ clearTimeout(renderTimer); renderTimer=null; }
   const p=renderPending; renderPending=null;
   if(!p) return;
+  let text=p.text;
+  if(final===false && !p.final && text.length>REASON_TAIL+800 && p.el.closest('.msg.reasoning')){
+    let cut=text.length-REASON_TAIL;
+    const nl=text.indexOf('\n', cut); if(nl>-1 && nl<cut+400) cut=nl+1;
+    text='*… (début replié pendant la génération — le texte complet est posé à la fin)*\n\n'+text.slice(cut);
+  }
+  // Carte bornée (raisonnement/outil) : si on était collé en bas, on y reste —
+  // la carte suit la génération. Un défilement manuel vers le haut est respecté.
+  // ⚠️ p.el est la BULLE (.msg), pas .body : le bodywrap est dedans, pas au-dessus.
+  const bw=p.el.querySelector ? p.el.querySelector(':scope > .bodywrap') : null;
+  const scrollable=!!bw;
+  const stick=scrollable && bw.scrollTop+bw.clientHeight>=bw.scrollHeight-60;
   const t0=performance.now();
-  renderBody(p.el, p.text);
+  renderBody(p.el, text);
   lastRenderMs=performance.now()-t0;
+  if(scrollable && stick) bw.scrollTop=bw.scrollHeight;
 }
 // Annule le rendu en attente SANS le poser : le bloc visé disparaît (fil vidé,
 // raisonnement jeté), le rendre ensuite écrirait dans un élément détaché.
@@ -308,7 +359,7 @@ function smoothReset(){ if(smooth&&smooth.raf) cancelAnimationFrame(smooth.raf);
 // Solde le bloc courant : on affiche TOUT immédiatement. Appelé à chaque
 // frontière (fin de tour, outil, changement de bloc) — sinon l'ultime bout de
 // texte resterait en retard derrière le curseur de révélation.
-function smoothSnap(){ if(!smooth) return; const el=smooth.el, target=smooth.target; smoothReset(); scheduleRender(el, target); }
+function smoothSnap(){ if(!smooth) return; const el=smooth.el, target=smooth.target; smoothReset(); scheduleRender(el, target, true); }
 // Débit BASÉ SUR LE TEMPS (indépendant du taux de rafraîchissement). La vitesse
 // de révélation est proportionnelle au RETARD accumulé, avec une constante de
 // temps TAU : le curseur traîne volontairement ~TAU derrière l'arrivée, ce qui
@@ -366,7 +417,7 @@ function handleDelta(d){
   // serveur) : on nettoie l'écran et on resynchronise la liste, car la bascule
   // a pu être déclenchée depuis un autre appareil. Les fichiers suivent : ils
   // appartiennent à la discussion, le panneau doit changer avec elle.
-  if(d.reset!==undefined){ smoothReset(); cancelRender(); stopWorkTimer(); const tc=document.getElementById('turn-clock'); if(tc) tc.remove(); PENDING=null; document.getElementById('chat').innerHTML=''; newTurn(); setCtxUsed(0); lastSeq=0; setBusy(false); if(typeof loadConversations==='function') loadConversations(); if(typeof filesOnConvChange==='function') filesOnConvChange(); if(typeof modeOnConvChange==='function') modeOnConvChange(); return; }
+  if(d.reset!==undefined){ smoothReset(); cancelRender(); stopWorkTimer(); resetConvSpeed(); const tc=document.getElementById('turn-clock'); if(tc) tc.remove(); PENDING=null; document.getElementById('chat').innerHTML=''; newTurn(); setCtxUsed(0); lastSeq=0; setBusy(false); if(typeof loadConversations==='function') loadConversations(); if(typeof filesOnConvChange==='function') filesOnConvChange(); if(typeof modeOnConvChange==='function') modeOnConvChange(); return; }
   // --- Mode code (20-mode.js) -----------------------------------------------
   if(d.mode!==undefined){ if(typeof applyModeDelta==='function') applyModeDelta(d.mode); return; }
   if(d.code_hint){ if(typeof showCodeHint==='function') showCodeHint(); return; }
@@ -379,6 +430,10 @@ function handleDelta(d){
   if(d.verify_done){ if(typeof onVerifyDone==='function') onVerifyDone(d.verify_done); return; }
   if(d.user!==undefined){
     newTurn();
+    // Modèle du tour : posé par le serveur sur la borne de tour (journalisée),
+    // donc présent au rejeu comme en direct. Repris par tagModel sur chaque
+    // bulle de réponse du tour.
+    T.model = d.model || '';
     let el=PENDING;
     if(!confirmPending(d.user)) el=addMsg('user', d.user);
     // Pièces jointes du tour : rendues DANS la bulle. La bulle en attente en
@@ -410,7 +465,7 @@ function handleDelta(d){
   // une trace du fil et DOIT être rejouée.
   if(d.compact_noop){ setCompacting(false); if(!REPLAYING) toast('rien à compacter (contexte déjà minimal)'); return; }
   if(d.ctx_used!==undefined){ setCtxUsed(d.ctx_used); return; }
-  if(d.stats){ T.serverStats=d.stats;
+  if(d.stats){ T.serverStats=d.stats; feedConvSpeed(d.stats);
     // prompt_tokens_total = comptage exact du moteur (include_usage). Absent sur
     // certains llama-server récents : le serveur publie alors un `ctx_used`
     // estimé en fin de tour, traité plus bas — on ne remet donc PAS la jauge à
@@ -420,12 +475,24 @@ function handleDelta(d){
   if(d.tool_used){
     settleBlocks(); // le bloc texte précédent (raisonnement/contenu) est terminé
     killTyping('tool'); T.contentEl=null; T.reasonEl=null; const tu=d.tool_used;
+    // Une carte reste OUVERTE tant que SA section travaille (hauteur bornée à
+    // 280 px, défilement qui suit l'écriture), et se replie DÈS qu'elle est
+    // finie : l'outil à son résultat (tu.done, plus bas), le raisonnement quand
+    // le bloc suivant démarre (collapseAll à la création de la carte suivante).
     if(!T.pendingToolEl){ collapseAll(T.turnCollapsibles); T.pendingToolEl=addMsg('tool',''); if(REPLAYING||viewOn('fold-tools')) collapseInstant(T.pendingToolEl); T.turnCollapsibles.push(T.pendingToolEl); }
     renderToolMsg(T.pendingToolEl, tu);
     // Outils masqués : on garde l'indicateur même quand l'appel est terminé (le
     // tour continue, et rien d'autre n'est visible). Sinon, comportement inchangé.
     if(!tu.done || viewOn('hide-tools')) showTyping('tool');
-    if(tu.done){ T.pendingToolEl=null; if(tu.name==='mem_add'||tu.name==='mem_edit') loadMem(); }
+    // Résultat arrivé : la carte est finie, elle se replie tout de suite (en
+    // direct seulement — au rejeu elle est déjà née repliée). SAUF une capture
+    // d'écran : l'image EST le résultat, la replier la cacherait sitôt prise.
+    if(tu.done){
+      if(!REPLAYING && T.pendingToolEl && !tu.image) collapseBody(T.pendingToolEl);
+      // Carte à image : retirée de la liste du tour, sinon le repli de fin de
+      // tour (collapseAll) la fermerait quand même.
+      if(tu.image && T.pendingToolEl){ const i=T.turnCollapsibles.indexOf(T.pendingToolEl); if(i>=0) T.turnCollapsibles.splice(i,1); }
+      T.pendingToolEl=null; if(tu.name==='mem_add'||tu.name==='mem_edit') loadMem(); }
     return; }
   if(d.drop_reasoning){
     smoothReset(); cancelRender(); // le bloc raisonnement disparaît : rien à rendre
@@ -446,7 +513,7 @@ function handleDelta(d){
     return; }
   if(d.content){
     removeTyping();
-    if(!T.contentEl){ collapseAll(T.turnCollapsibles); T.contentEl=addMsg('assistant',''); T.fullContent=''; resetContentStats(); }
+    if(!T.contentEl){ collapseAll(T.turnCollapsibles); T.contentEl=addMsg('assistant',''); tagModel(T.contentEl); T.fullContent=''; resetContentStats(); }
     if(d.replace){ smoothSnap(); T.fullContent=''; resetContentStats(); }
     T.fullContent+=d.content; feedBlock(T.contentEl, T.fullContent);
     if(!T.contentFirstTs) T.contentFirstTs=d.ts0||d.ts||0; T.contentLastTs=d.ts||T.contentLastTs; T.contentTok+=(d.toks||1);

internal/loki/ui/src/js/16-conversations.js

@@ -24,6 +24,13 @@ async function loadConversations(){
   let r;
   try{ r = await jget('/api/conversations'); }catch(_){ return; }
   CONVS = r.conversations || [];
+  // Ordre de CRÉATION, la plus récente en tête : une discussion garde sa place
+  // dans la liste quoi qu'il arrive — écrire dans un vieux fil ne le fait pas
+  // remonter (le serveur, lui, trie par activité). Départage par l'ordre du
+  // fichier d'index pour les créations dans la même seconde.
+  const ord = new Map(CONVS.map((c, i) => [c.id, i]));
+  CONVS.sort((a, b) => (b.created || 0) - (a.created || 0)
+                    || ord.get(b.id) - ord.get(a.id));
   CONV_ACTIVE = r.active || '';
   CONV_BUSY = !!r.busy;
   renderConversations();

internal/loki/ui/src/js/17-identity.js

@@ -25,6 +25,21 @@ function paintLabel(label, role){
   const who = document.createElement('span'); who.className = 'who';
   who.textContent = role === 'user' ? (IDENT.name || 'toi') : 'Loki';
   label.appendChild(av); label.appendChild(who);
+  // Badge du modèle : quelle IA a produit CETTE réponse. Le nom vit dans
+  // dataset.model (posé par tagModel, 09-stream.js) — c'est ce qui le fait
+  // survivre au repeint des libellés lors d'un changement d'identité.
+  if(role === 'assistant' && label.parentElement && label.parentElement.dataset.model){
+    label.appendChild(modelBadge(label.parentElement.dataset.model));
+  }
+}
+
+// modelBadge fabrique la pastille du nom de modèle (partagée paintLabel/tagModel).
+function modelBadge(name){
+  const b = document.createElement('span');
+  b.className = 'modelbadge';
+  b.textContent = name;
+  b.title = 'modèle : ' + name;
+  return b;
 }
 
 async function loadIdentity(){

internal/loki/ui/src/js/18-shell.js

@@ -38,6 +38,12 @@ function openDetails(el){
   if(typeof el === 'string') el = document.getElementById(el);
   while(el){
     if(el.tagName === 'DETAILS') el.open = true;
+    // La cible vit dans un panneau de la modale de réglages : ouvrir la modale
+    // sur ce panneau. C'est ce qui garde tous les appelants historiques
+    // (pastille d'état, jobs moteur) valides depuis la refonte en modale.
+    if(el.classList && el.classList.contains('set-pane') && typeof openSettings === 'function'){
+      openSettings(el.dataset.pane);
+    }
     el = el.parentElement;
   }
 }
@@ -46,7 +52,14 @@ function openDetails(el){
 // à cliquer la ligne correspondante dans les réglages (switchTo demande
 // confirmation puis relance le moteur).
 function onModelSwitch(sel){
-  const n = parseInt(sel.value, 10);
+  const v = sel.value;
+  // Entrée du groupe « Modèles » : charger CE .gguf, sans preset — la config
+  // active garde son contexte et son échantillonnage, seul MODEL change.
+  if(v && v.startsWith('m:')){
+    switchModelFile(v.slice(2), sel.options[sel.selectedIndex].textContent);
+    return;
+  }
+  const n = parseInt(v, 10);
   if(!n) return;
   const name = sel.options[sel.selectedIndex].textContent;
   // La liste est repeinte par loadPresets() une fois la bascule faite (ou
@@ -55,6 +68,22 @@ function onModelSwitch(sel){
   switchTo(n, name);
 }
 
+// Bascule directe vers un fichier de modèle (POST /api/models/use) : confirme,
+// écrit MODEL, le service redémarre derrière. Annulé ou en échec, la sélection
+// revient sur le modèle réellement chargé.
+async function switchModelFile(value, name){
+  if(!await askConfirm('Charger « ' + name + ' » et redémarrer le moteur ?', {title:'Changer de modèle', okText:'Charger'})){
+    paintModelSwitch();
+    return;
+  }
+  toast('changement de modèle…');
+  let r = null;
+  try{ r = await jpost('/api/models/use', {value}); }catch(_){}
+  if(!r || !r.ok){ toast('erreur : ' + ((r && r.error) || 'réseau')); paintModelSwitch(); return; }
+  toast('modèle en cours de chargement…');
+  loadAll();
+}
+
 // Le sélecteur affiche LE MODÈLE CHARGÉ, pas seulement le preset actif.
 //
 // Les deux ne coïncident pas toujours : un preset n'est « actif » que si son
@@ -67,12 +96,22 @@ function onModelSwitch(sel){
 // Deux sources, deux moments : loadPresets() donne la liste, loadCfg() donne le
 // modèle. Chacune dépose ce qu'elle sait et redemande le dessin — elles partent
 // en parallèle (loadAll), aucun ordre n'est garanti.
-let MS_PRESETS = [], MS_ACTIVE = null, MS_MODEL = '';
+let MS_PRESETS = [], MS_ACTIVE = null, MS_MODEL = '', MS_FILES = [];
 
 function renderModelSwitch(presets, active){
   MS_PRESETS = presets || []; MS_ACTIVE = active || null;
   paintModelSwitch();
 }
+// Les fichiers .gguf découverts sur le disque : le sélecteur doit permettre de
+// CHARGER un modèle, pas seulement de rappeler un preset — sans preset créé,
+// il n'offrait aucun choix. Chargé par loadAll(), rafraîchi avec le reste.
+async function loadModelSwitchFiles(){
+  try{
+    const r = await jget('/api/models');
+    MS_FILES = Array.isArray(r) ? r : [];
+  }catch(_){ return; }
+  paintModelSwitch();
+}
 // Appelé par loadCfg avec la valeur MODEL de la configuration active.
 function setLoadedModel(name){
   MS_MODEL = (name || '').trim();
@@ -99,14 +138,31 @@ function paintModelSwitch(){
     o.selected = true;
     sel.appendChild(o);
   }
-  MS_PRESETS.forEach((p, i) => {
-    const o = document.createElement('option');
-    o.value = String(i + 1);
-    o.textContent = p.name;
-    if(MS_ACTIVE && p.id === MS_ACTIVE.id) o.selected = true;
-    sel.appendChild(o);
-  });
-  sel.disabled = !MS_PRESETS.length;
+  if(MS_PRESETS.length){
+    const g = document.createElement('optgroup'); g.label = 'Presets';
+    MS_PRESETS.forEach((p, i) => {
+      const o = document.createElement('option');
+      o.value = String(i + 1);
+      o.textContent = p.name;
+      if(MS_ACTIVE && p.id === MS_ACTIVE.id) o.selected = true;
+      g.appendChild(o);
+    });
+    sel.appendChild(g);
+  }
+  // Modèles du disque : en choisir un le CHARGE (voir switchModelFile). Un
+  // preset règle tout (contexte, sampling…) ; un modèle ne change que MODEL.
+  if(MS_FILES.length){
+    const g = document.createElement('optgroup'); g.label = 'Modèles (.gguf)';
+    for(const m of MS_FILES){
+      const o = document.createElement('option');
+      o.value = 'm:' + m.value;
+      o.textContent = modelLabel(m.name);
+      if(m.missing && m.missing.length) o.disabled = true; // tranches manquantes
+      g.appendChild(o);
+    }
+    sel.appendChild(g);
+  }
+  sel.disabled = !MS_PRESETS.length && !MS_FILES.length;
   sel.title = MS_MODEL
     ? 'modèle chargé : ' + MS_MODEL + ' — changer de preset relance le moteur'
     : 'aucun modèle configuré';

internal/loki/ui/src/js/22-settings-modal.js

@@ -0,0 +1,37 @@
+// ─── Réglages en modale ──────────────────────────────────────────────────────
+// Toutes les sections de réglages vivent dans une modale à deux volets : la nav
+// des sections à gauche, LE panneau choisi à droite. La barre latérale ne garde
+// que les discussions et le moniteur machine — visuellement plus simple, et
+// chaque section dispose enfin de toute la largeur.
+//
+// Les ids historiques des sections (svc-log-box, lc-details, tasks-details…)
+// sont posés sur les .set-pane : openDetails() (18-shell.js) les résout vers le
+// bon panneau, si bien que tous les chemins existants — pastille d'état du
+// moteur, pastille d'installation, jobs llama.cpp — rouvrent la modale au bon
+// endroit sans changer une ligne de leurs appelants.
+let SET_LAST = 'config';
+// Panneaux à contenu paresseux : chargés à l'affichage — l'équivalent de
+// l'ancien ontoggle des <details>.
+const SET_HOOKS = {
+  'engine-log': () => { loadSvcLog(); showPaths(); },
+};
+function openSettings(pane){
+  showModal('settings-modal');
+  settingsShow(pane || SET_LAST);
+}
+function closeSettings(){ hideModal('settings-modal'); }
+function settingsShow(pane){
+  SET_LAST = pane;
+  document.querySelectorAll('#set-nav [data-pane]').forEach(b => b.classList.toggle('active', b.dataset.pane === pane));
+  document.querySelectorAll('#set-body .set-pane').forEach(s => s.classList.toggle('active', s.dataset.pane === pane));
+  const body = document.getElementById('set-body');
+  if(body) body.scrollTop = 0;
+  const h = SET_HOOKS[pane]; if(h) h();
+}
+// Échap ferme la modale — capture:false, donc les modales à confirmation
+// (ask-modal, qui écoute en capture) gardent la main quand elles sont ouvertes.
+document.addEventListener('keydown', e => {
+  if(e.key !== 'Escape') return;
+  const m = document.getElementById('settings-modal');
+  if(m && m.classList.contains('show')) closeSettings();
+});

internal/loki/ui/src/js/23-dictate.js

@@ -0,0 +1,92 @@
+// ─── Dictée vocale ───────────────────────────────────────────────────────────
+// Bouton micro de la carte de saisie : un clic enregistre, un second arrête et
+// transcrit. La capture est encodée en WAV 16 kHz mono ICI, côté navigateur —
+// whisper.cpp ne lit que du PCM, et encoder au bon format évite d'embarquer
+// ffmpeg dans l'image. La transcription est locale (POST /api/transcribe →
+// whisper-cli). Le texte s'ajoute au champ sans écraser ce qui s'y trouve.
+//
+// ⚠️ Le micro n'est autorisé par le NAVIGATEUR qu'en contexte sécurisé (HTTPS
+// ou localhost) : servi en http://IP:8090, getUserMedia n'existe pas — on
+// l'explique plutôt que d'échouer en silence.
+let MIC = null; // {ctx, stream, src, node, chunks, rate, timer}
+
+async function dictateToggle(){
+  if(MIC){ dictateStop(); return; }
+  if(!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)){
+    toast('micro bloqué par le navigateur : il faut HTTPS (ou localhost)');
+    return;
+  }
+  let stream;
+  try{
+    stream = await navigator.mediaDevices.getUserMedia({audio:{channelCount:1, echoCancellation:true, noiseSuppression:true}});
+  }catch(e){ toast('accès au micro refusé'); return; }
+  const ctx = new (window.AudioContext||window.webkitAudioContext)();
+  const src = ctx.createMediaStreamSource(stream);
+  // ScriptProcessor : déprécié mais universel, et amplement suffisant pour
+  // copier des blocs de PCM (AudioWorklet demanderait un module séparé,
+  // impossible dans un fichier unique servi inline).
+  const node = ctx.createScriptProcessor(4096, 1, 1);
+  const chunks = [];
+  node.onaudioprocess = e => { chunks.push(new Float32Array(e.inputBuffer.getChannelData(0))); };
+  src.connect(node); node.connect(ctx.destination);
+  // Garde-fou : une dictée oubliée ne tourne pas des heures.
+  MIC = {ctx, stream, src, node, chunks, rate:ctx.sampleRate, timer:setTimeout(dictateStop, 90000)};
+  document.getElementById('mic').classList.add('rec');
+}
+
+async function dictateStop(){
+  const m = MIC; if(!m) return; MIC = null;
+  clearTimeout(m.timer);
+  try{ m.src.disconnect(); m.node.disconnect(); }catch(_){}
+  m.stream.getTracks().forEach(t => t.stop());
+  try{ m.ctx.close(); }catch(_){}
+  const btn = document.getElementById('mic');
+  btn.classList.remove('rec'); btn.classList.add('busy'); btn.disabled = true;
+  try{
+    const wav = encodeWav16k(m.chunks, m.rate);
+    if(wav.byteLength < 16000){ toast('rien entendu'); return; } // < 0,5 s
+    const r = await jfetch('/api/transcribe', {method:'POST', headers:{'Content-Type':'audio/wav'}, body:wav});
+    const j = await r.json().catch(()=>({}));
+    if(r.status === 503 && j.downloading){
+      // Le serveur relance le téléchargement à chaque tentative ; s'il a déjà
+      // échoué (conteneur sans accès réseau, Hugging Face injoignable), il nous
+      // renvoie la raison. La cacher derrière « 0 % » laissait l'utilisateur
+      // cliquer indéfiniment sur un micro qui n'écrira jamais rien.
+      toast(j.error ? 'modèle de dictée : échec du téléchargement — ' + j.error
+                    : 'modèle de dictée en téléchargement (' + (j.pct||0) + ' %) — réessaie dans un instant');
+      return;
+    }
+    if(!r.ok){ toast(j.error || 'échec de la transcription'); return; }
+    const text = (j.text||'').trim();
+    if(!text){ toast('rien compris — réessaie'); return; }
+    const ta = document.getElementById('input');
+    ta.value = ta.value.trim() ? ta.value.replace(/\s+$/,'') + ' ' + text : text;
+    autoGrow(ta); ta.focus();
+  }catch(_){ toast('erreur réseau'); }
+  finally{ btn.classList.remove('busy'); btn.disabled = false; }
+}
+
+// Ré-échantillonne le PCM capturé (44,1/48 kHz selon la machine) vers du WAV
+// 16 kHz mono 16 bits — le format d'entrée de whisper.cpp. Décimation simple :
+// pour de la voix ré-échantillonnée VERS LE BAS, largement suffisant.
+function encodeWav16k(chunks, fromRate){
+  const toRate = 16000;
+  let n = 0; for(const c of chunks) n += c.length;
+  const all = new Float32Array(n); let o = 0;
+  for(const c of chunks){ all.set(c, o); o += c.length; }
+  const ratio = fromRate / toRate, outN = Math.floor(n / ratio);
+  const pcm = new Int16Array(outN);
+  for(let i = 0; i < outN; i++){
+    const s = Math.max(-1, Math.min(1, all[Math.floor(i*ratio)] || 0));
+    pcm[i] = s < 0 ? s*0x8000 : s*0x7fff;
+  }
+  const buf = new ArrayBuffer(44 + pcm.length*2), v = new DataView(buf);
+  const wr = (off, s) => { for(let i = 0; i < s.length; i++) v.setUint8(off+i, s.charCodeAt(i)); };
+  wr(0,'RIFF'); v.setUint32(4, 36 + pcm.length*2, true); wr(8,'WAVEfmt ');
+  v.setUint32(16, 16, true); v.setUint16(20, 1, true); v.setUint16(22, 1, true);
+  v.setUint32(24, toRate, true); v.setUint32(28, toRate*2, true);
+  v.setUint16(32, 2, true); v.setUint16(34, 16, true);
+  wr(36,'data'); v.setUint32(40, pcm.length*2, true);
+  new Int16Array(buf, 44).set(pcm);
+  return buf;
+}

internal/loki/ui/src/styles.css

@@ -224,7 +224,9 @@ h1{margin:0;font-size:18px;color:var(--accent)}
 /* en-tête + bouton d'ajout de skill (toujours visible) */
 .skillshead{display:flex;align-items:center;justify-content:space-between;margin:12px 0 5px}
 .skillshead>span{font-size:11.5px;color:var(--dim);font-weight:600}
-.addbtn{font-size:11px;padding:4px 11px;background:var(--panel);color:var(--dim);border:1px solid var(--border);border-radius:999px;cursor:pointer;line-height:1.3;letter-spacing:.02em}
+/* Même gabarit que les autres boutons des panneaux (angle 3 px, 12 px) : la
+   pilule arrondie détonnait au milieu de boutons rectangulaires. */
+.addbtn{font-size:12px;padding:6px 10px;background:var(--panel);color:var(--dim);border:1px solid var(--border);border-radius:4px;cursor:pointer;line-height:1.3;letter-spacing:.02em}
 .addbtn:hover{border-color:var(--dim);color:var(--text);background:var(--accent-bg)}
 .mem-count{font-size:10px;color:var(--dim);font-weight:400;letter-spacing:0;text-transform:none;font-family:var(--font);margin-left:4px}
 /* Titre de sous-section (Mémoire / Accès internet) : simple libellé, PAS de trait
@@ -656,6 +658,16 @@ textarea.sctl{min-height:76px;resize:vertical;line-height:1.5}
 /* height ET width sont animées (en px, pilotées en JS via scrollHeight/scrollWidth)
    → repli/dépli fluide en diagonale. overflow:hidden clippe pendant l'animation. */
 .msg.collapsible .bodywrap{overflow:hidden;transition:height .42s cubic-bezier(.4,0,.2,1),width .42s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin-top .42s cubic-bezier(.4,0,.2,1);opacity:1;margin-top:4px}
+/* Raisonnement / outils : hauteur BORNÉE avec défilement interne. Un long
+   raisonnement (des milliers de tokens) faisait grandir la page de plusieurs
+   écrans ; la carte reste maintenant à taille fixe et suit la génération en
+   défilant toute seule (voir flushRender, 09-stream.js). L'animation de repli
+   garde son overflow:hidden via la hauteur inline — les deux cohabitent. */
+.msg.reasoning .bodywrap,.msg.tool .bodywrap{max-height:280px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
+/* Une capture d'écran ne se lit pas par le trou d'une serrure : la carte qui en
+   porte une échappe au plafond (l'image a déjà son propre max-height à 420 px,
+   cliquable plein écran via la visionneuse). */
+.msg.tool .bodywrap:has(.tool-shot){max-height:none}
 .msg.collapsible .bodywrap>.body{min-width:0}
 .msg.collapsible.collapsed .bodywrap{opacity:0;margin-top:0}
 /* Composer = un seul bloc cohérent : barre de contexte intégrée en tête (fine
@@ -1449,6 +1461,10 @@ button:hover{border-color:var(--dim);color:var(--text)}
 .hf-fit.ok{color:var(--ok);border-color:var(--ok)}
 .hf-fit.juste{color:var(--warn);border-color:var(--warn)}
 .hf-fit.trop{color:var(--err);border-color:var(--err)}
+/* Verrou d'accès : ce n'est pas un verdict mémoire, mais ça se lit au même
+   endroit et ça décide autant de la suite — un dépôt gated ne se télécharge
+   pas sans jeton. */
+.hf-fit.gated{color:var(--warn);border-color:var(--warn);text-transform:none}
 .hf-head{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:12px}
 .hf-mm{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;
   color:var(--dim);cursor:pointer}
@@ -1733,7 +1749,7 @@ button:active:not(:disabled){transform:translateY(1px)}
    ⚠️ Une seule règle pour les quatre. Il y en avait trois générations empilées
    (pilule large « Envoyer », aplat noir, aplat sauge) : chaque état tirait sa
    taille, sa forme et son alignement d'une couche différente. */
-#inputbar #attach,#inputbar #files-btn,#send,#stop{
+#inputbar #attach,#inputbar #files-btn,#inputbar #mic,#send,#stop{
   width:34px;height:34px;min-height:34px;flex:none;margin:0;padding:0;
   display:inline-flex;align-items:center;justify-content:center;align-self:center;
   border:0;border-radius:4px;background:transparent;color:var(--dim);
@@ -1744,8 +1760,8 @@ button:active:not(:disabled){transform:translateY(1px)}
 #stop{display:none}
 html[data-busy="1"] #send{display:none}
 html[data-busy="1"] #stop{display:inline-flex}
-#inputbar #attach svg,#inputbar #files-btn svg,#send svg,#stop svg{display:block;width:18px;height:18px}
-#inputbar #attach:hover,#inputbar #files-btn:hover{background:var(--row-bg-on);color:var(--text)}
+#inputbar #attach svg,#inputbar #files-btn svg,#inputbar #mic svg,#send svg,#stop svg{display:block;width:18px;height:18px}
+#inputbar #attach:hover,#inputbar #files-btn:hover,#inputbar #mic:hover{background:var(--row-bg-on);color:var(--text)}
 html[data-files="1"] #files-btn{color:var(--accent)}
 #send{color:var(--accent)}
 #send:hover:not(:disabled){background:var(--accent-bg);color:var(--accent);opacity:1;transform:none}
@@ -2017,6 +2033,55 @@ html[data-files="1"] #files-btn{color:var(--accent)}
 #criteria-list li.crit-pending{color:var(--dim)}
 
 .rolebadge{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--accent);border-radius:3px;color:var(--accent);font-size:9px;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle}
+
+/* Dictée : anneau rouge pulsé pendant l'enregistrement, estompé pendant la
+   transcription. Le gabarit (34 px, fond au survol) vient de la règle commune
+   des boutons de saisie — #mic y est listé avec #attach et #files-btn. */
+#mic.rec{color:var(--err);animation:micpulse 1.2s ease-in-out infinite}
+@keyframes micpulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--err) 25%,transparent)}}
+#mic.busy{opacity:.55}
+
+/* ── Réglages en modale ─────────────────────────────────────────────────────
+   Deux volets : nav des sections à gauche, LE panneau choisi à droite. Les
+   panneaux réutilisent tels quels les gabarits de la barre latérale (.slist,
+   .switchrow, .subhead…), seuls la coque et le routage sont neufs. */
+#side-settings-btn{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:10px 14px;flex:none;
+  background:none;border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none;
+  font-size:13px;color:var(--text);cursor:pointer;text-align:left}
+#side-settings-btn:hover{background:var(--bubble)}
+#side-settings-btn svg{flex:none;opacity:.7}
+.set-card{max-width:860px;height:min(660px,92vh)}
+.set-shell{display:flex;flex:1;min-height:0}
+.set-nav{flex:0 0 200px;border-right:1px solid var(--border);overflow-y:auto;
+  padding:10px 8px;display:flex;flex-direction:column;gap:2px}
+.set-nav-h{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:12px 8px 4px}
+.set-nav-h:first-child{margin-top:2px}
+.set-nav button{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:7px 10px;
+  background:none;border:0;border-radius:3px;box-shadow:none;
+  font-size:12.5px;color:var(--text);cursor:pointer;text-align:left}
+.set-nav button:hover{background:var(--bubble)}
+.set-nav button.active{background:var(--bubble);font-weight:600}
+.set-nav button .sbadge{margin-left:auto}
+.set-body{flex:1;min-width:0;overflow-y:auto;padding:16px}
+.set-pane{display:none}
+.set-pane.active{display:block}
+.set-pane-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin:0 0 12px}
+.set-pane-h>span:first-child{flex:1;min-width:0}
+/* Téléphone : la nav passe en rangée défilante au-dessus du panneau, et la
+   modale prend tout l'écran — un panneau de réglages ne se lit pas en timbre. */
+@media(max-width:720px){
+  .set-ov{padding:0}
+  .set-card{max-width:none;height:100vh;height:100dvh;max-height:none;border-radius:0;border:0}
+  .set-shell{flex-direction:column}
+  .set-nav{flex:none;flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;
+    border-right:0;border-bottom:1px solid var(--border);padding:8px;white-space:nowrap}
+  .set-nav-h{display:none}
+  .set-nav button{width:auto;flex:none}
+}
+/* Nom du modèle qui a produit la réponse, à côté de « Loki ». Discret (gris,
+   pas de capitales forcées) et borné : un nom de .gguf peut être très long,
+   il s'ellipse au lieu de pousser l'étiquette hors de la bulle. */
+.msg .label .modelbadge{display:inline-block;margin-left:6px;padding:0 5px;border:1px solid var(--border);border-radius:3px;color:var(--dim);font-size:9px;letter-spacing:.03em;text-transform:none;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
 .msg[data-agent-role="verifier"]{border-left:2px solid var(--accent)}
 
 .askcard .body{display:flex;flex-direction:column;gap:8px}

internal/loki/web_api.go

@@ -940,6 +940,38 @@ func handleMemDelete(w http.ResponseWriter, r *http.Request) {
 	sendJSON(w, 200, map[string]any{"ok": true})
 }
 
+// handleModelUse charge un MODÈLE précis (fichier .gguf) sans passer par un
+// preset : seul MODEL change dans la configuration active — contexte, NGL et
+// échantillonnage sont conservés — et le service redémarre en arrière-plan,
+// même contrat que handleSwitch. C'est ce qui rend le sélecteur de l'en-tête
+// utilisable même sans avoir créé de preset.
+func handleModelUse(w http.ResponseWriter, r *http.Request) {
+	var req struct {
+		Value string `json:"value"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil || strings.TrimSpace(req.Value) == "" {
+		sendJSON(w, 400, map[string]any{"ok": false, "error": "modèle manquant"})
+		return
+	}
+	// Le fichier doit exister AVANT d'écrire la config : une faute de frappe ne
+	// doit pas laisser un moteur qui boucle sur un modèle introuvable.
+	if _, err := resolveServeModelPath(req.Value); err != nil {
+		sendJSON(w, 400, map[string]any{"ok": false, "error": err.Error()})
+		return
+	}
+	if err := SetConfigKey("MODEL", req.Value); err != nil {
+		sendJSON(w, 500, map[string]any{"ok": false, "error": err.Error()})
+		return
+	}
+	fmt.Printf("%s MODEL <- %s\n", green("[ok]"), req.Value)
+	go func() {
+		if err := serviceAction("restart"); err != nil {
+			fmt.Println(red("[err] redémarrage : " + err.Error()))
+		}
+	}()
+	sendJSON(w, 200, map[string]any{"ok": true})
+}
+
 func handleSwitch(w http.ResponseWriter, r *http.Request) {
 	var req struct {
 		N int `json:"n"`

internal/loki/web_hf.go

@@ -4,12 +4,14 @@ package loki
 //
 //	GET /api/hf/search?q=…              dépôts GGUF correspondants
 //	GET /api/hf/files?repo=auteur/dépôt modèles, projecteurs et drafts du dépôt
+//	GET|POST /api/hf/token              jeton Hugging Face (dépôts verrouillés)
 //
 // Les deux renvoient aussi le matériel local, pour que l'interface n'ait pas à
 // le demander séparément et n'affiche jamais une liste de tailles sans le
 // budget en face.
 
 import (
+	"encoding/json"
 	"net/http"
 	"strconv"
 	"strings"
@@ -26,7 +28,7 @@ func handleHFSearch(w http.ResponseWriter, r *http.Request) {
 		sendJSON(w, 502, map[string]any{"ok": false, "error": err.Error()})
 		return
 	}
-	sendJSON(w, 200, map[string]any{"ok": true, "hardware": detectHardware(), "repos": repos})
+	sendJSON(w, 200, map[string]any{"ok": true, "hardware": detectHardware(), "repos": repos, "hf_token": hfTokenSet()})
 }
 
 // handleHFFiles liste les .gguf d'un dépôt, chaque modèle portant son verdict
@@ -67,10 +69,65 @@ func handleHFFiles(w http.ResponseWriter, r *http.Request) {
 	// mmproj dans CE dépôt, pas un tag Hugging Face — lequel manque sur des
 	// dépôts qui en publient pourtant un.
 	// Un projecteur ne reçoit pas de verdict : il ne se charge jamais seul.
+	// `gated` et `hf_token` servent le même but que `vision` : dire AVANT le
+	// téléchargement ce qui va se passer. Un dépôt verrouillé se lit sans jeton
+	// mais ne se télécharge pas — l'avertir ici évite de choisir un quant, de
+	// lancer 15 Go et de récolter un 401.
 	sendJSON(w, 200, map[string]any{
 		"ok": true, "hardware": hw, "ctx": ctxTokens,
 		"repo": list.Repo, "models": list.Models,
 		"projectors": list.Projectors, "drafts": list.Drafts,
-		"vision": len(list.Projectors) > 0,
+		"vision":   len(list.Projectors) > 0,
+		"gated":    list.Gated,
+		"hf_token": hfTokenSet(),
 	})
 }
+
+// handleHFToken lit et enregistre le jeton Hugging Face.
+//
+//	GET  → {ok, set, source:"config"|"env"|"", masked, account}
+//	POST {token:"hf_…"} → vérifie le jeton PUIS l'enregistre
+//	POST {token:""}     → efface le jeton enregistré
+//
+// Le jeton n'est jamais renvoyé en clair : il ne sert qu'ici, personne n'a
+// besoin de le recopier depuis Loki. Et il est vérifié AVANT d'être enregistré —
+// un jeton mal collé qu'on accepte silencieusement redonne exactement le 401
+// qu'on cherchait à expliquer.
+func handleHFToken(w http.ResponseWriter, r *http.Request) {
+	if r.Method == http.MethodPost {
+		var req struct {
+			Token string `json:"token"`
+		}
+		if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+			sendJSON(w, 400, map[string]any{"ok": false, "error": "requête illisible"})
+			return
+		}
+		tok := strings.TrimSpace(req.Token)
+		account := ""
+		if tok != "" {
+			var err error
+			if account, err = hfWhoAmI(r.Context(), tok); err != nil {
+				sendJSON(w, 400, map[string]any{"ok": false, "error": err.Error()})
+				return
+			}
+		}
+		if err := writeHFToken(tok); err != nil {
+			sendJSON(w, 500, map[string]any{"ok": false, "error": err.Error()})
+			return
+		}
+		sendJSON(w, 200, hfTokenState(account))
+		return
+	}
+	sendJSON(w, 200, hfTokenState(""))
+}
+
+// hfTokenState décrit le jeton pour l'interface. account n'est renseigné qu'au
+// retour d'un enregistrement : le vérifier à chaque affichage ferait un appel
+// sortant à l'ouverture de la fenêtre des réglages.
+func hfTokenState(account string) map[string]any {
+	src := hfTokenSource()
+	return map[string]any{
+		"ok": true, "set": src != "", "source": src,
+		"masked": maskHFToken(hfToken()), "account": account,
+	}
+}

internal/loki/web_server.go

@@ -168,6 +168,7 @@ func newWebMux() *http.ServeMux {
 	api := func(path string, h http.HandlerFunc) { mux.HandleFunc(path, requireWebAuth(h)) }
 	api("/api/ping", handlePing)
 	api("/api/status", handleStatus)
+	api("/api/transcribe", handleTranscribe)  // dictée vocale (whisper.cpp local)
 	api("/api/service/log", handleServiceLog) // journal du service pour diagnostiquer un modèle qui ne charge pas
 	api("/api/vram", handleVram)
 	api("/api/ram", handleRam)
@@ -178,12 +179,14 @@ func newWebMux() *http.ServeMux {
 	api("/api/models", handleModels)
 	api("/api/models/delete", handleModelDelete)
 	api("/api/models/dirs", handleModelDirs) // dossiers de modèles (disque externe…)
+	api("/api/models/use", handleModelUse)   // charger CE .gguf (sélecteur de l'en-tête)
 	api("/api/models/download", handleModelDownload)
 	api("/api/models/download/probe", handleModelDownloadProbe) // taille + espace libre avant de lancer
 	api("/api/models/download/status", handleModelDownloadStatus)
 	api("/api/models/download/cancel", handleModelDownloadCancel)
 	api("/api/hf/search", handleHFSearch) // chercher un modèle GGUF sur Hugging Face
 	api("/api/hf/files", handleHFFiles)   // quants et projecteurs d'un dépôt
+	api("/api/hf/token", handleHFToken)   // jeton pour les dépôts à accès restreint
 	api("/api/backends", handleBackends)
 	api("/api/backends/custom", handleBackendsCustom)                    // backends custom uniquement (hors ⚡/🔧)
 	api("/api/backends/devices", handleBackendDevices)                   // GPU vus par CE moteur (noms/ordre propres au backend)

internal/loki/web_transcribe.go

@@ -0,0 +1,191 @@
+// Dictée vocale — POST /api/transcribe : un WAV (16 kHz mono, encodé côté
+// navigateur) entre, le texte transcrit sort. La transcription est 100 % locale,
+// par whisper-cli (whisper.cpp, même famille que llama.cpp), compilé dans
+// l'image Docker. Le modèle (ggml-small-q5_1, ~190 Mo, multilingue) est
+// téléchargé au premier usage dans LOKI_HOME/whisper/ — comme le moteur, il ne
+// gonfle pas l'image et survit aux recréations du conteneur via /data.
+package loki
+
+import (
+	"context"
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"runtime"
+	"strconv"
+	"strings"
+	"sync"
+	"time"
+)
+
+const whisperModelURL = "https://huggingface.co/ggerganov/whisper.cpp/resolve/main/ggml-small-q5_1.bin"
+
+// whisperBin localise whisper-cli : variable d'environnement (posée par le
+// Dockerfile), sinon le PATH. Vide = dictée indisponible (image trop ancienne,
+// ou poste de dev sans whisper.cpp) — le handler le dit clairement.
+func whisperBin() string {
+	if p := os.Getenv("LOKI_WHISPER_BIN"); p != "" {
+		if _, err := os.Stat(p); err == nil {
+			return p
+		}
+	}
+	if p, err := exec.LookPath("whisper-cli"); err == nil {
+		return p
+	}
+	return ""
+}
+
+func whisperModelPath() string {
+	return filepath.Join(LokiHome(), "whisper", "ggml-small-q5_1.bin")
+}
+
+// Téléchargement du modèle : UNE goroutine, progression consultable. Le premier
+// POST le déclenche et répond 503 {downloading, pct} ; l'UI invite à réessayer.
+var wspMu sync.Mutex
+var wspDl struct {
+	running bool
+	pct     int
+	err     string
+}
+
+func whisperStartDownload() {
+	wspMu.Lock()
+	defer wspMu.Unlock()
+	if wspDl.running {
+		return
+	}
+	wspDl.running, wspDl.pct, wspDl.err = true, 0, ""
+	go func() {
+		err := whisperDownload()
+		wspMu.Lock()
+		wspDl.running = false
+		if err != nil {
+			wspDl.err = err.Error()
+		}
+		wspMu.Unlock()
+	}()
+}
+
+func whisperDownload() error {
+	dst := whisperModelPath()
+	if err := os.MkdirAll(filepath.Dir(dst), 0o755); err != nil {
+		return err
+	}
+	resp, err := http.Get(whisperModelURL)
+	if err != nil {
+		return err
+	}
+	defer resp.Body.Close()
+	if resp.StatusCode != 200 {
+		return fmt.Errorf("téléchargement du modèle whisper : HTTP %d", resp.StatusCode)
+	}
+	tmp := dst + ".part"
+	f, err := os.Create(tmp)
+	if err != nil {
+		return err
+	}
+	total := resp.ContentLength
+	var done int64
+	buf := make([]byte, 1<<20)
+	for {
+		n, rerr := resp.Body.Read(buf)
+		if n > 0 {
+			if _, werr := f.Write(buf[:n]); werr != nil {
+				f.Close()
+				os.Remove(tmp)
+				return werr
+			}
+			done += int64(n)
+			if total > 0 {
+				wspMu.Lock()
+				wspDl.pct = int(done * 100 / total)
+				wspMu.Unlock()
+			}
+		}
+		if rerr == io.EOF {
+			break
+		}
+		if rerr != nil {
+			f.Close()
+			os.Remove(tmp)
+			return rerr
+		}
+	}
+	if err := f.Close(); err != nil {
+		os.Remove(tmp)
+		return err
+	}
+	return os.Rename(tmp, dst)
+}
+
+func handleTranscribe(w http.ResponseWriter, r *http.Request) {
+	bin := whisperBin()
+	if bin == "" {
+		sendJSON(w, 501, map[string]any{"error": "dictée indisponible : whisper-cli absent (image à reconstruire, ou poste sans whisper.cpp)"})
+		return
+	}
+	model := whisperModelPath()
+	if _, err := os.Stat(model); err != nil {
+		wspMu.Lock()
+		derr := wspDl.err
+		pct := wspDl.pct
+		wspMu.Unlock()
+		if derr != "" {
+			// Échec précédent : on le dit ET on relance — un réseau revenu suffit.
+			wspMu.Lock()
+			wspDl.err = ""
+			wspMu.Unlock()
+			whisperStartDownload()
+			sendJSON(w, 503, map[string]any{"downloading": true, "pct": 0, "error": derr})
+			return
+		}
+		whisperStartDownload()
+		sendJSON(w, 503, map[string]any{"downloading": true, "pct": pct})
+		return
+	}
+
+	audio, err := io.ReadAll(http.MaxBytesReader(w, r.Body, 32<<20))
+	if err != nil || len(audio) < 1000 {
+		sendJSON(w, 400, map[string]any{"error": "audio vide ou trop court"})
+		return
+	}
+	tmp, err := os.CreateTemp("", "loki-dictee-*.wav")
+	if err != nil {
+		sendJSON(w, 500, map[string]any{"error": err.Error()})
+		return
+	}
+	tmpPath := tmp.Name()
+	defer os.Remove(tmpPath)
+	if _, err := tmp.Write(audio); err != nil {
+		tmp.Close()
+		sendJSON(w, 500, map[string]any{"error": err.Error()})
+		return
+	}
+	tmp.Close()
+
+	// -l auto : détection de langue (le français sort en français) ; -nt sans
+	// horodatages ; -np sans bavardage de chargement. CPU seul : une dictée de
+	// quelques dizaines de secondes se transcrit en 1-3 s avec small-q5_1.
+	threads := runtime.NumCPU()
+	if threads > 8 {
+		threads = 8
+	}
+	ctx, cancel := context.WithTimeout(r.Context(), 3*time.Minute)
+	defer cancel()
+	cmd := exec.CommandContext(ctx, bin, "-m", model, "-f", tmpPath, "-l", "auto", "-nt", "-np", "-t", strconv.Itoa(threads))
+	var stderr strings.Builder
+	cmd.Stderr = &stderr
+	out, err := cmd.Output()
+	if err != nil {
+		msg := strings.TrimSpace(stderr.String())
+		if msg == "" {
+			msg = err.Error()
+		}
+		sendJSON(w, 500, map[string]any{"error": "whisper-cli : " + msg})
+		return
+	}
+	sendJSON(w, 200, map[string]any{"text": strings.TrimSpace(string(out))})
+}