@imenam/mcp-messenger 1.0.23 → 1.0.24

package/README.md

@@ -391,7 +391,9 @@ correspondants et l'état de lecture :
   **replié par défaut**, et sélectionner un agent n'ouvre rien. Recliquer ne relâche rien
   non plus : on revient à la vue générale par « Tous les agents », en tête de colonne. La
   colonne se replie sur les seuls avatars d'agents quand la place manque, son bouton de
-  repli restant en place : c'est lui qui la rouvre.
+  repli restant en place : c'est lui qui la rouvre. **Repliée, elle garde deux signes
+  distincts** : l'anneau désigne l'agent sélectionné, la pastille bleue dit qu'il reste du
+  non-lu — la même convention que le point de la liste des fils.
 
   **Le classement se fait en deux temps : d'abord ce qui a servi, ensuite ce qui est
   vide ; puis, dans chacun des deux, la dernière activité, la plus récente en tête.** Une
@@ -418,7 +420,13 @@ correspondants et l'état de lecture :
 - **trois puces** au-dessus de la liste : tous, non lus, priorité haute ;
 - **le lecteur du fil** : la conversation entière dans l'ordre, un bloc par message, avec
   qui écrit à qui — en clair, pas en adresses — et une pastille disant si le destinataire
-  l'a lu. **Le corps d'un message est rendu comme du markdown** : titres, listes,
+  l'a lu. **Les messages s'ouvrent repliés** : chacun tient alors sur sa ligne d'identité —
+  pastille, qui écrit à qui, heure — et sur **l'objet du message**, qui est ce qui
+  l'identifie. Les deux forment le bandeau qui l'ouvre et le referme, cliquable d'un bout à
+  l'autre et grisé au survol pour se donner à voir comme une cible. Ouvrir un message ne
+  change rien à ce bandeau : le corps vient simplement se poser dessous.
+  Un fil se parcourt avant de se lire, et le rafraîchissement automatique ne referme pas
+  ce qui est en train d'être lu. **Le corps d'un message est rendu comme du markdown** : titres, listes,
   citations, tableaux, blocs de code, emphase et liens. C'est la langue dans laquelle les
   agents s'écrivent, la console la lit donc ainsi plutôt que d'afficher sa syntaxe. Le
   rendu construit des nœuds un par un et n'insère jamais de HTML : rien de ce qu'un agent
@@ -630,7 +638,7 @@ test/                   # store, config, API HTTP, outils MCP, binaire réel
 
 ### Tests
 
-274 tests couvrant : les suppressions de boîtes commandées depuis la console — une boîte
+284 tests couvrant : les suppressions de boîtes commandées depuis la console — une boîte
 désignée à la main, les vides, celles sans activité depuis une date — avec leur aperçu,
 leur double confirmation et le refus nominatif d'une boîte qui ne répond plus au critère, la reprise de la boîte d'une session interrompue (clé de session de
 l'hôte, boîte orpheline, boîte d'une session vivante jamais reprise), le rendu markdown des messages et l'aplatissement des aperçus (dont

package/dist/src/server/ui/app.js

@@ -54,6 +54,11 @@ const state = {
   threadId: null,
   /** Message dont le volet de détail est ouvert, ou null si le volet est fermé. */
   messageId: null,
+  /**
+   * Messages dépliés dans le lecteur, par identifiant. Vide au départ : un fil s'ouvre
+   * replié, et se parcourt avant de se lire.
+   */
+  openMessages: new Set(),
   collapsed: false,
   /** Annuaire des boîtes, indexé par adresse : rempli par chaque `/admin/overview`. */
   directory: new Map(),
@@ -869,29 +874,82 @@ function renderThread(data) {
   el.reader.replaceChildren(container);
 }
 
+/**
+ * Un message du fil, replié ou déplié.
+ *
+ * Un fil se relit d'abord de haut en bas : ce qui doit sauter aux yeux est qui a écrit,
+ * quand, et sur quoi. Les corps sont donc repliés au départ, chaque message tenant sur sa
+ * ligne de titre, et c'est cette ligne qui l'ouvre. L'état est retenu par identifiant de
+ * message : le rafraîchissement automatique ne referme donc pas ce qu'on est en train de
+ * lire.
+ */
 function messageRow(message, isLast) {
   const item = node("li");
+  fillMessage(item, message, isLast);
+  return item;
+}
+
+/**
+ * Remplit la ligne d'un message, dépliée ou non.
+ *
+ * Le nœud est donné plutôt que rendu : ouvrir un message ne redessine que lui, et c'est
+ * bien cette ligne-là, celle qui est dans la page, qu'il faut réécrire — en reconstruire
+ * une autre reviendrait à modifier un élément que personne ne regarde.
+ */
+function fillMessage(item, message, isLast) {
+  const open = state.openMessages.has(message.message_id);
   const classes = ["message"];
+  if (open) classes.push("is-expanded");
   if (state.messageId === message.message_id) classes.push("is-open");
   else if (isLast) classes.push("is-last");
   const row = node("div", classes.join(" "));
+  const column = node("div", "message-body-col");
 
-  row.appendChild(agentAvatar(message.from));
+  /*
+    Tout ce qui est visible d'un message replié est cliquable, pastille comprise : le
+    bandeau est le bouton, et le survol le grise pour qu'on le voie comme tel. Pas de
+    chevron — sur une ligne qui s'annonce déjà comme une cible, il n'apprend rien.
+  */
+  const head = node("button", "message-head");
+  head.type = "button";
+  head.setAttribute("aria-expanded", open ? "true" : "false");
+  head.appendChild(agentAvatar(message.from));
+
+  const identity = node("span", "message-identity");
+  identity.appendChild(node("span", "message-from", party(message.from).name));
+  identity.appendChild(node("span", "message-to", `→ ${party(message.to).name}`));
+  if (message.priority === "high") identity.appendChild(tag("tag tag--high", "priorité haute"));
+  if (message.priority === "low") identity.appendChild(tag("tag", "priorité basse"));
+  if (!message.read) {
+    const dot = node("span", "message-dot");
+    dot.title = `non lu par ${party(message.to).name}`;
+    identity.appendChild(dot);
+  }
+  identity.appendChild(node("span", "message-time", formatShort(message.created_at)));
+  head.appendChild(identity);
 
-  const column = node("div", "message-body-col");
-  const head = node("div", "message-head");
-  head.appendChild(node("span", "message-from", party(message.from).name));
-  head.appendChild(node("span", "message-to", `→ ${party(message.to).name}`));
-  if (message.priority === "high") head.appendChild(tag("tag tag--high", "priorité haute"));
-  if (message.priority === "low") head.appendChild(tag("tag", "priorité basse"));
-  head.appendChild(node("span", "message-time", formatShort(message.created_at)));
+  // L'objet, toujours : c'est le titre du message, et c'est lui qu'on cherche du regard.
+  // Le bandeau ne bouge donc pas quand le message s'ouvre, seul le corps vient dessous.
+  head.appendChild(node("span", "message-subject", message.subject || "sans objet"));
+
+  head.addEventListener("click", () => {
+    if (open) state.openMessages.delete(message.message_id);
+    else state.openMessages.add(message.message_id);
+    fillMessage(item, message, isLast);
+  });
   column.appendChild(head);
 
-  // Le sujet n'est répété que s'il diffère du nom du fil : sinon c'est du bruit.
-  if (message.subject && message.subject !== message.thread_title) {
-    column.appendChild(node("p", "message-subject", message.subject));
+  if (!open) {
+    row.appendChild(column);
+    item.replaceChildren(row);
+    return;
   }
-  column.appendChild(messageText(message));
+
+  // Ce qui suit la ligne de titre s'aligne sous le texte, pas sous la pastille.
+  const content = node("div", "message-content");
+  column.appendChild(content);
+
+  content.appendChild(messageText(message));
 
   const foot = node("div", "message-foot");
   foot.appendChild(
@@ -899,18 +957,18 @@ function messageRow(message, isLast) {
       ? tag("tag tag--ok", `lu par ${party(message.to).name}`, "check")
       : tag("tag tag--warn", `non lu par ${party(message.to).name}`, "clock")
   );
-  const open = state.messageId === message.message_id;
+  // Le volet de détail, lui, s'ouvre à côté : c'est un autre état que le dépli du corps.
+  const sheetOpen = state.messageId === message.message_id;
   foot.appendChild(
-    button("btn btn--link", open ? "détails ouverts" : "détails", () => {
-      if (open) closeSheet();
+    button("btn btn--link", sheetOpen ? "détails ouverts" : "détails", () => {
+      if (sheetOpen) closeSheet();
       else openMessage(message.message_id);
     })
   );
-  column.appendChild(foot);
+  content.appendChild(foot);
 
   row.appendChild(column);
-  item.appendChild(row);
-  return item;
+  item.replaceChildren(row);
 }
 
 /**
@@ -1047,6 +1105,9 @@ function closeSheet() {
 async function openThread(threadId) {
   state.threadId = threadId;
   state.messageId = null;
+  // Un fil s'ouvre replié, même celui qu'on rouvre : ce qui était déplié l'était pour
+  // l'autre conversation.
+  state.openMessages.clear();
   el.sheet.hidden = true;
   el.console.classList.remove("has-sheet");
   await refreshThread();

package/dist/src/server/ui/styles.css

@@ -992,11 +992,39 @@ body {
   padding-left: 8px;
 }
 
-/* Le badge des non-lus survit au repli, réduit à une pastille sur l'avatar. */
-.is-collapsed .agent.has-unread .avatar {
+/*
+  Colonne repliée, deux signes distincts et souvent simultanés.
+
+  L'anneau dit ce qui est **sélectionné** : c'est un contour, il entoure, il désigne — la
+  teinte de fond qui sert à ça dans la colonne dépliée n'a plus de place ici. La pastille
+  dit qu'il reste du **non-lu** : un point posé sur l'avatar, la même convention que la
+  liste des fils. L'un n'implique pas l'autre, ils doivent donc se lire séparément.
+*/
+.is-collapsed .agent.is-selected {
+  background: none;
+}
+
+.is-collapsed .agent.is-selected .avatar {
   box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
 }
 
+.is-collapsed .agent.has-unread .avatar {
+  position: relative;
+}
+
+.is-collapsed .agent.has-unread .avatar::after {
+  content: "";
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--accent);
+  /* Le liseré détache la pastille de l'avatar, quelle que soit la couleur de celui-ci. */
+  box-shadow: 0 0 0 2px var(--bg);
+}
+
 .is-collapsed .agents {
   overflow-x: hidden;
 }
@@ -1320,14 +1348,25 @@ body {
 .messages {
   list-style: none;
   margin: 0;
-  padding: 20px 32px 40px;
+  /* Le retrait latéral du texte vient d'ici plus du cadre d'un message : 20 + 12. */
+  padding: 12px 20px 40px;
+}
+
+/*
+  Un trait entre deux messages, et non un simple blanc.
+
+  Repliés, les messages se suivent de près : sans démarcation, on devine où l'un s'arrête
+  à la seule présence de la pastille suivante. Le trait court sur toute la largeur de la
+  liste, et l'écart de part et d'autre vient du cadre des messages eux-mêmes.
+*/
+.messages > li + li {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: var(--border);
 }
 
 .message {
-  display: flex;
-  gap: 12px;
   padding: 12px;
-  margin: 0 -12px;
   border-radius: var(--radius);
 }
 
@@ -1342,15 +1381,83 @@ body {
 }
 
 .message-body-col {
-  flex: 1;
   min-width: 0;
 }
 
+/*
+  Le bandeau qui ouvre et referme le message.
+
+  Il tient tout ce qu'un message replié montre : la pastille, qui écrit à qui, l'heure, et
+  la ligne de résumé. Rien n'y ressemble à un bouton tant qu'on ne le survole pas — c'est
+  le fond gris qui dit alors que la zone entière est une cible, mieux qu'un chevron.
+
+  Deux colonnes, deux lignes : la pastille tient sur les deux, le texte occupe la seconde
+  colonne — qui écrit à qui sur la première ligne, l'objet du message sur la seconde.
+*/
 .message-head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 2px 12px;
+  width: 100%;
+  padding: 6px;
+  margin: -6px;
+  border: 0;
+  border-radius: var(--radius);
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.message-head:hover {
+  background: var(--neutral-soft);
+}
+
+.message-head:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.message-head > .avatar {
+  grid-row: span 2;
+}
+
+/* Qui écrit à qui, et quand : l'heure est poussée au bout de la ligne. */
+.message-identity {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   gap: 8px;
   flex-wrap: wrap;
+  min-width: 0;
+}
+
+/*
+  L'objet du message, sur sa ligne, replié comme déplié : c'est ce qui identifie le
+  message, et le bandeau ne doit pas changer de forme en s'ouvrant. Ce qui dépasse est
+  coupé — la ligne suivante appartient au message suivant.
+*/
+.message-subject {
+  font-weight: 600;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Le corps s'aligne sous le texte du bandeau, jamais sous la pastille. */
+.message-content {
+  padding-left: 40px;
+}
+
+/* Non lu : le même point que dans la liste des fils, et non un anneau ni une couleur. */
+.message-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+  flex: none;
 }
 
 .message-from {
@@ -1369,15 +1476,8 @@ body {
   white-space: nowrap;
 }
 
-.message-subject {
-  margin: 8px 0 0;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--muted);
-}
-
 .message-text {
-  margin: 6px 0 0;
+  margin: 8px 0 0;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const APP_VERSION = "1.0.23";
+export declare const APP_VERSION = "1.0.24";

package/dist/src/version.js

@@ -1,2 +1,2 @@
 // Généré par scripts/generate-version.js — ne pas modifier à la main.
-export const APP_VERSION = "1.0.23";
+export const APP_VERSION = "1.0.24";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imenam/mcp-messenger",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "main": "dist/src/index.js",
   "scripts": {
     "test": "npm run build && vitest run",