@imenam/mcp-messenger 1.0.22 → 1.0.24

package/README.md

@@ -382,13 +382,18 @@ organisés autour du fil — l'unité d'une correspondance, celle qui porte le s
 correspondants et l'état de lecture :
 
 - **une colonne d'agents à deux niveaux** : un agent tient une boîte par session ouverte,
-  la colonne l'écrit donc ainsi. Chaque agent est **replié par défaut** et se déplie d'un
-  chevron sur ses boîtes ; une boîte que son agent n'a pas nommée s'affiche à son adresse,
-  la seule chose qui la distingue alors de ses sœurs. Cliquer l'agent filtre les fils sur
-  **toutes ses sessions**, cliquer une boîte sur **cette seule session**. Recliquer ne
-  relâche rien : 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.
+  la colonne l'écrit donc ainsi. Une boîte que son agent n'a pas nommée s'affiche à son
+  adresse, la seule chose qui la distingue alors de ses sœurs.
+
+  **Deux gestes, deux effets, sans recouvrement.** Cliquer le nom d'un agent filtre les
+  fils sur **toutes ses sessions**, cliquer une boîte sur **cette seule session** ; le
+  chevron, lui, déplie ou replie les boîtes sans toucher au filtre. Chaque agent est
+  **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é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
@@ -415,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
@@ -627,7 +638,7 @@ test/                   # store, config, API HTTP, outils MCP, binaire réel
 
 ### Tests
 
-273 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(),
@@ -528,9 +533,10 @@ function allRow(overview) {
 /**
  * Un agent et, dépliées sous lui, ses boîtes.
  *
- * Deux zones de clic, deux gestes distincts : le chevron ouvre ou ferme, le nom filtre sur
- * l'ensemble des sessions du projet. Filtrer déplie au passage, pour que la sélection
- * montre toujours ce qu'elle recouvre.
+ * Deux zones de clic, deux gestes distincts et sans effet l'un sur l'autre : le chevron
+ * ouvre ou ferme, le nom filtre sur l'ensemble des sessions du projet. Filtrer ne déplie
+ * pas — un clic ne doit faire que ce qu'il annonce, et voir les sessions d'un agent est
+ * une autre question que ne lire que ses fils.
  */
 function groupRow(group) {
   const item = node("li", "agent-group");
@@ -577,10 +583,7 @@ function groupRow(group) {
   row.appendChild(text);
   if (group.unread > 0) row.appendChild(node("span", "count count--accent", String(group.unread)));
   row.title = `${group.name} · ${counts}`;
-  row.addEventListener("click", () => {
-    state.expanded.add(group.key);
-    select("agent", group.key);
-  });
+  row.addEventListener("click", () => select("agent", group.key));
   header.appendChild(row);
   item.appendChild(header);
 
@@ -871,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");
+
+  /*
+    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);
 
-  row.appendChild(agentAvatar(message.from));
+  // 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"));
 
-  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)));
+  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(
@@ -901,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);
 }
 
 /**
@@ -1049,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.22";
+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.22";
+export const APP_VERSION = "1.0.24";

package/package.json

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