From 72a8925cb4628e6d05886c65ac7a964662735639 Mon Sep 17 00:00:00 2001
From: Loki <loki@local>
Date: Sat, 15 Aug 2026 13:10:02 +0000
Subject: [PATCH] =?UTF-8?q?Avatars=20et=20pr=C3=A9noms=20:=20les=20affiche?=
 =?UTF-8?q?r=20pour=20de=20bon=20(ils=20=C3=A9taient=20masqu=C3=A9s=20par?=
 =?UTF-8?q?=20le=20CSS)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Les libellés étaient bien construits — mon test précédent vérifiait le HTML
produit, pas le style appliqué — mais la feuille de style les masquait tous :

  #chat .msg .label{display:none}

C'était un choix justifié de l'amont, où le libellé ne disait que « user » ou
« assistant », deux mots que l'alignement des bulles rend redondants. Depuis
qu'ils portent un avatar et un prénom, ils identifient réellement
l'interlocuteur : on les réaffiche pour user et assistant, en ligne et
discrets, aligné à droite côté question. Les bulles techniques non repliables
restent muettes.

Vérifié dans un navigateur : display=flex, boîte non vide, textes rendus
« 🙂 Michael » et « 🦊 Loki » — cette fois sur le style calculé et sur une
capture d'écran, pas seulement sur le DOM.
---
 internal/loki/ui/index.html     | 10 ++++++++--
 internal/loki/ui/src/styles.css | 10 ++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/internal/loki/ui/index.html b/internal/loki/ui/index.html
index 07c8338..c6f2a55 100644
--- a/internal/loki/ui/index.html
+++ b/internal/loki/ui/index.html
@@ -1005,10 +1005,16 @@ h1{color:var(--text);font-weight:600;letter-spacing:-.01em}
 /* Question : pastille arrondie à droite, texte lisible sur fond clair OU sombre. */
 #chat .msg.user{background:var(--bubble);color:var(--text);border-radius:20px;padding:11px 18px;max-width:75%;line-height:1.6}
 #chat .msg.user .label{color:var(--dim)}
-/* Étiquettes VOUS / Loki : inutiles ici (l'alignement suffit), sauf pour les
-   bulles repliables (raisonnement / outils) où le label est le bouton de repli. */
+/* Libellés : l'amont les masquait tous ici, les mots « user » / « assistant »
+   n'ajoutant rien à l'alignement. Ils portent désormais un avatar et un prénom
+   (voir 17-identity.js), qui eux identifient vraiment l'interlocuteur — on les
+   réaffiche donc, en ligne et discrets. Restent masqués les libellés SANS
+   avatar, c'est-à-dire les bulles techniques non repliables. */
 #chat .msg .label{display:none}
 #chat .msg.collapsible .label{display:block}
+#chat .msg.user .label,#chat .msg.assistant .label{display:flex;align-items:center;gap:0;opacity:.85}
+/* Côté question, le libellé s'aligne à droite comme la bulle. */
+#chat .msg.user .label{justify-content:flex-end}
 /* Mesures de génération sous la réponse (prefill / decode). Assez discrètes pour
    ne pas concurrencer le texte, assez lisibles pour être utiles. Escamotables
    depuis Apparence → Affichage. */
diff --git a/internal/loki/ui/src/styles.css b/internal/loki/ui/src/styles.css
index f63b244..3f57e70 100644
--- a/internal/loki/ui/src/styles.css
+++ b/internal/loki/ui/src/styles.css
@@ -979,10 +979,16 @@ h1{color:var(--text);font-weight:600;letter-spacing:-.01em}
 /* Question : pastille arrondie à droite, texte lisible sur fond clair OU sombre. */
 #chat .msg.user{background:var(--bubble);color:var(--text);border-radius:20px;padding:11px 18px;max-width:75%;line-height:1.6}
 #chat .msg.user .label{color:var(--dim)}
-/* Étiquettes VOUS / Loki : inutiles ici (l'alignement suffit), sauf pour les
-   bulles repliables (raisonnement / outils) où le label est le bouton de repli. */
+/* Libellés : l'amont les masquait tous ici, les mots « user » / « assistant »
+   n'ajoutant rien à l'alignement. Ils portent désormais un avatar et un prénom
+   (voir 17-identity.js), qui eux identifient vraiment l'interlocuteur — on les
+   réaffiche donc, en ligne et discrets. Restent masqués les libellés SANS
+   avatar, c'est-à-dire les bulles techniques non repliables. */
 #chat .msg .label{display:none}
 #chat .msg.collapsible .label{display:block}
+#chat .msg.user .label,#chat .msg.assistant .label{display:flex;align-items:center;gap:0;opacity:.85}
+/* Côté question, le libellé s'aligne à droite comme la bulle. */
+#chat .msg.user .label{justify-content:flex-end}
 /* Mesures de génération sous la réponse (prefill / decode). Assez discrètes pour
    ne pas concurrencer le texte, assez lisibles pour être utiles. Escamotables
    depuis Apparence → Affichage. */