UI : anneau d'activité dans la liste des discussions, temps de travail sous les réponses

Deux manques dans la présentation d'un tour :

1. Rien ne disait sur QUELLE discussion un agent était en train de
   travailler. La ligne concernée porte maintenant un anneau qui tourne,
   à gauche du titre — et l'en-tête aussi, puisque la barre latérale est
   escamotée sur téléphone. L'état vient de deux sources : le flux SSE
   (instantané) et /api/conversations, qui expose désormais `busy` pour
   que la page ouverte en cours de génération s'anime sans attendre le
   rejeu du journal. L'indicateur est posé et retiré SANS redessiner la
   liste : un redessin relancerait l'animation à chaque événement.

2. Le pied des réponses ne montrait que la vitesse du moteur, jamais le
   temps que le tour avait pris. Il porte maintenant « travail 1 min 04 s »
   — de la question envoyée à la fin du tour, raisonnement, appels
   d'outils et attentes compris. La durée avance à la seconde pendant le
   tour et se fige au turn_done ; elle apparaît aussi sur l'indicateur
   « … », là où il n'y a pas encore de réponse sous laquelle écrire.
   La bulle de raisonnement gagne au passage sa propre durée.

La mesure est prise sur les HORODATAGES SERVEUR (événements `user` et
`turn_done`) : elle est donc juste en direct comme au rejeu, où tout
arrive d'un bloc côté client. Le compteur vivant se recale sur l'écart
entre l'horloge du navigateur et celle du serveur, réévalué à chaque
événement reçu en direct — un téléphone n'est pas à la même heure que la
machine.

« Masquer la vitesse de génération » ne masque plus que la vitesse : la
durée n'est pas une mesure de moteur, c'est ce que la réponse a coûté.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01J5UndZ9DedRXPuAoRXbmDb

internal/loki/ui/src/styles.css

@@ -444,7 +444,12 @@ button:disabled{opacity:.5;cursor:not-allowed}
    mini-bannière au-dessus de la saisie doublonnait les 3 points animés — deux
    éléments pour un seul état d'attente. Ici les points passent en accent et un
    libellé apparaît à côté : un seul objet à l'écran, au bon endroit. */
-.msg.typing.compacting span:not(.tlabel){background:var(--accent)}
+.msg.typing.compacting span:not(.tlabel):not(.wclock){background:var(--accent)}
+/* Compteur de travail sur l'indicateur « … » : il annule la mise en forme de
+   pastille que `.msg.typing span` applique à TOUT span de la bulle. */
+.msg.typing .wclock{width:auto;height:auto;border-radius:0;background:none;animation:none;
+  font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--dim);
+  margin-left:7px;white-space:nowrap}
 .msg.typing .tlabel{width:auto;height:auto;border-radius:0;background:none;animation:tlabelfade 1.6s ease-in-out infinite;font-size:12px;color:var(--accent);margin-left:3px;white-space:nowrap}
 @keyframes tlabelfade{0%,100%{opacity:.6}50%{opacity:1}}
 /* Trace laissée DANS le fil quand le contexte a été compacté : un séparateur
@@ -1079,7 +1084,12 @@ h1{color:var(--text);font-weight:600;letter-spacing:-.01em}
 #chat .msg .statline{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;
   color:var(--dim);opacity:.75}
 #chat .msg .statline:empty{display:none}
-html[data-hide-stats="1"] #chat .msg .statline{display:none}
+/* « Masquer la vitesse de génération » ne masque QUE la vitesse : le temps de
+   travail du tour (.worktime) n'est pas une mesure de moteur, c'est ce que la
+   réponse a coûté. Une ligne qui ne portait que de la vitesse disparaît en
+   entier — sans .has-work il ne resterait qu'un blanc. */
+html[data-hide-stats="1"] #chat .msg .statline>.spd{display:none}
+html[data-hide-stats="1"] #chat .msg .statline:not(.has-work){display:none}
 /* Arrivée en fondu montant plutôt qu'un surgissement sec. L'opacité finale (.75)
    est celle de la règle ci-dessus : l'animation doit y ATTERRIR, sinon la ligne
    clignote en repassant à sa valeur de repos. */
@@ -1614,6 +1624,25 @@ html[data-files="1"] #files-btn{color:var(--accent)}
   color:var(--dim);letter-spacing:-.01em;overflow:visible}
 .side .preset:hover .conv-when{opacity:0}
 .conv-empty{font-size:12px;color:var(--dim);padding:8px 11px}
+/* Discussion au travail : un anneau qui tourne, à gauche du titre. C'est le seul
+   élément animé de la liste — il désigne sans ambiguïté le fil sur lequel un
+   agent est en train de travailler, y compris depuis un autre appareil. */
+/* ⚠️ Sélecteur en DEUX classes : `.preset>span` (plus haut) pose flex:1 sur tout
+   span enfant d'une ligne — l'anneau prenait sinon la moitié de la largeur et
+   écrasait le titre, exactement comme l'heure avant lui. */
+.preset>.conv-spin,#topbar>.conv-spin{flex:none;display:inline-flex;align-items:center;
+  justify-content:center;line-height:0;color:var(--accent)}
+.conv-spin svg{animation:conv-spin 900ms linear infinite}
+@keyframes conv-spin{to{transform:rotate(360deg)}}
+/* Mouvement réduit : l'anneau ne tourne plus mais respire — l'information reste,
+   le mouvement de rotation disparaît. */
+@media (prefers-reduced-motion:reduce){
+  .conv-spin svg{animation:conv-breathe 1.6s ease-in-out infinite}
+  @keyframes conv-breathe{0%,100%{opacity:1}50%{opacity:.25}}
+}
+/* Dans l'en-tête, l'anneau précède le titre : même gabarit que les boutons
+   voisins pour ne pas décaler la ligne quand il apparaît et disparaît. */
+#topbar>.conv-spin{width:18px}
 /* Repli des réglages : tout ce qui n'est pas la conversation tient sous cette
    seule ligne, pour que la barre latérale de la maquette (discussions +
    machine) reste la vue par défaut. */