Avatars et prénoms : les afficher pour de bon (ils étaient masqués par le CSS)

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

@@ -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. */

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. */