@imenam/mcp-messenger 1.0.20 → 1.0.22

package/README.md

@@ -385,7 +385,8 @@ correspondants et l'état de lecture :
   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**. La colonne se
+  **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.
 
@@ -403,11 +404,15 @@ correspondants et l'état de lecture :
 - **la liste des fils**, du plus récemment actif au plus ancien, chacun résumé par son
   nom, ses correspondants, son dernier message et sa priorité la plus haute. Les deux
   correspondants y sont d'abord **deux pastilles côte à côte**, séparées et non superposées
-  — leurs initiales doivent rester lisibles —, de la couleur que leur adresse leur donne
-  partout ailleurs : on voit qui parle avant de lire. Au survol, la
-  pastille dit d'où la boîte écrit, ce dont la session s'occupe, son adresse, et si c'est
-  elle qui a écrit en dernier. Trois puces
-  la filtrent : tous, non lus, priorité haute ;
+  — leurs initiales doivent rester lisibles. **Ces pastilles sont celles des agents, pas
+  des boîtes** : dans une liste, ce qu'on cherche du regard est le projet, et deux sessions
+  d'un même agent portent donc la même. Ce qui les distingue, le nom de la boîte, se lit au
+  survol, avec le projet, l'adresse et la mention de celle qui a écrit en dernier. Le
+  lecteur du fil suit la même règle, en tête de chaque message ;
+- **un en-tête qui dit sur quoi la liste est filtrée** : sans filtre elle s'intitule
+  « Fils », et dès qu'un agent est choisi c'est lui le sujet — sa pastille en grand, son
+  nom en titre, et en dessous ce que le filtre recouvre, toutes ses sessions ou une seule ;
+- **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,
@@ -622,7 +627,7 @@ test/                   # store, config, API HTTP, outils MCP, binaire réel
 
 ### Tests
 
-266 tests couvrant : les suppressions de boîtes commandées depuis la console — une boîte
+273 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

@@ -82,6 +82,8 @@ const el = {
   agents: document.getElementById("agents"),
   agentsFoot: document.getElementById("agents-foot"),
   collapse: document.getElementById("collapse"),
+  threadsAvatar: document.getElementById("threads-avatar"),
+  threadsName: document.getElementById("threads-name"),
   threadsScope: document.getElementById("threads-scope"),
   // Le panneau, pas la liste qu'il contient : c'est lui que le séparateur redimensionne.
   threadsPane: document.querySelector(".threads"),
@@ -235,6 +237,31 @@ function avatar(agentId, extraClass) {
   return avatarFor(agentId, label, title, extraClass, !who.registered);
 }
 
+/**
+ * Pastille de l'agent, et non de la boîte.
+ *
+ * Dans une liste, ce qui se cherche du regard est le projet : deux sessions d'un même
+ * agent portent donc la même pastille, et c'est voulu — ce qui les distingue, le nom de
+ * la boîte, se lit au survol. La pastille de boîte reste celle du lecteur et du volet,
+ * là où l'on regarde une session en particulier.
+ */
+function agentAvatar(agentId, extraClass, title) {
+  const who = party(agentId);
+  const seed = who.agentName || agentId;
+  const label = who.agentName || who.box || shortAddress(agentId);
+  return avatarFor(seed, label, title ?? boxTitle(agentId), extraClass, !who.registered);
+}
+
+/** Ce qu'une pastille dit au survol : le projet, la session, l'adresse. */
+function boxTitle(agentId) {
+  const who = party(agentId);
+  return [
+    who.agentName || "agent sans nom",
+    who.box || (who.registered ? "boîte sans nom" : "boîte jamais connectée"),
+    agentId,
+  ].join("\n");
+}
+
 // --- Dates -----------------------------------------------------------------
 
 function formatDate(iso) {
@@ -419,9 +446,16 @@ function isSelected(kind, key) {
   return state.selection.kind === kind && state.selection.key === key;
 }
 
+/**
+ * Choisit ce que la liste des fils montre.
+ *
+ * Recliquer sur la sélection courante ne la relâche pas : cliquer un agent veut dire
+ * « montre-moi cet agent », et le redire ne peut pas vouloir dire le contraire. On revient
+ * à la vue générale par « Tous les agents », en tête de colonne, là où on l'attend.
+ */
 function select(kind, key) {
-  // Recliquer sur la sélection courante la relâche : le filtre ne s'emprisonne pas.
-  state.selection = isSelected(kind, key) ? { kind: "all", key: null } : { kind, key };
+  if (isSelected(kind, key)) return;
+  state.selection = { kind, key };
   state.threadId = null;
   state.messageId = null;
   el.sheet.hidden = true;
@@ -672,7 +706,7 @@ function selectionLabel() {
 
 function renderThreads(threads) {
   state.threadCount = threads.length;
-  el.threadsScope.textContent = `${selectionLabel()} · ${plural(threads.length, "fil")}`;
+  renderThreadsHead(threads.length);
 
   el.threads.replaceChildren();
   if (threads.length === 0) {
@@ -685,6 +719,43 @@ function renderThreads(threads) {
   for (const thread of threads) el.threads.appendChild(threadRow(thread));
 }
 
+/**
+ * En-tête de la liste : ce sur quoi elle est filtrée, en grand.
+ *
+ * Sans filtre, elle s'intitule « Fils » et rien d'autre. Dès qu'un agent est choisi, c'est
+ * lui le sujet : sa pastille et son nom prennent la place du titre, et la ligne en dessous
+ * dit ce que le filtre recouvre — toutes ses sessions, ou une seule.
+ */
+function renderThreadsHead(count) {
+  const { kind, key } = state.selection;
+  const fils = plural(count, "fil");
+
+  if (kind === "all") {
+    el.threadsAvatar.hidden = true;
+    el.threadsAvatar.replaceChildren();
+    el.threadsName.textContent = "Fils";
+    el.threadsScope.textContent = `Toutes les boîtes · ${fils}`;
+    return;
+  }
+
+  // Une boîte est d'abord une session de son agent : c'est donc l'agent qui s'affiche,
+  // et le nom de la boîte qui précise de quelle session il s'agit.
+  const address = kind === "box" ? key : (state.groups.find((g) => g.key === key)?.boxes[0] || {}).id;
+  const who = address ? party(address) : null;
+  const sessions = kind === "agent" ? (state.groups.find((g) => g.key === key)?.boxes.length ?? 0) : 0;
+  const box = kind === "box" ? state.directory.get(key) : null;
+
+  el.threadsAvatar.hidden = false;
+  el.threadsAvatar.replaceChildren(
+    address ? agentAvatar(address, "avatar--lg") : avatarFor(key, key, key, "avatar--lg", false)
+  );
+  el.threadsName.textContent = kind === "agent" ? key : who?.agentName || selectionLabel();
+  el.threadsScope.textContent =
+    kind === "agent"
+      ? `${plural(sessions, "session")} · ${fils}`
+      : `${box ? boxLabel(box) : shortAddress(key)} · ${fils}`;
+}
+
 function emptyReason() {
   if (state.search) return "Aucun fil ne correspond à cette recherche.";
   if (state.filter === "unread") return "Tout est lu de ce côté.";
@@ -737,17 +808,8 @@ function threadParticipants(thread) {
 
   const stack = node("div", "avatar-stack");
   for (const id of thread.participants) {
-    const person = party(id);
-    const badge = avatar(id, "avatar--sm avatar--stack");
-    badge.title = [
-      person.agentName || "agent sans nom",
-      person.box || (person.registered ? "boîte sans nom" : "boîte jamais connectée"),
-      id,
-      id === thread.last_message_from ? "a écrit le dernier message" : null,
-    ]
-      .filter(Boolean)
-      .join("\n");
-    stack.appendChild(badge);
+    const last = id === thread.last_message_from ? "\na écrit le dernier message" : "";
+    stack.appendChild(agentAvatar(id, "avatar--sm avatar--stack", `${boxTitle(id)}${last}`));
   }
   who.appendChild(stack);
 
@@ -783,7 +845,9 @@ function renderThread(data) {
 
   const meta = node("div", "reader-meta");
   const stack = node("div", "avatar-stack");
-  for (const id of participants) stack.appendChild(avatar(id, "avatar--sm avatar--stack"));
+  // Le projet d'abord : deux sessions d'un même agent portent la même pastille, le nom
+  // de la boîte se lisant au survol.
+  for (const id of participants) stack.appendChild(agentAvatar(id, "avatar--sm avatar--stack"));
   meta.appendChild(stack);
   meta.appendChild(
     node(
@@ -814,7 +878,7 @@ function messageRow(message, isLast) {
   else if (isLast) classes.push("is-last");
   const row = node("div", classes.join(" "));
 
-  row.appendChild(avatar(message.from));
+  row.appendChild(agentAvatar(message.from));
 
   const column = node("div", "message-body-col");
   const head = node("div", "message-head");

package/dist/src/server/ui/index.html

@@ -168,8 +168,17 @@
 
       <section class="threads">
         <div class="threads-head">
-          <h2>Fils</h2>
-          <p class="muted" id="threads-scope"></p>
+          <!--
+            L'en-tête dit sur quoi la liste est filtrée. Quand c'est un agent, il y tient la
+            place principale, pastille comprise : c'est le sujet de ce qu'on lit en dessous.
+          -->
+          <div class="threads-title">
+            <span class="threads-avatar" id="threads-avatar" hidden></span>
+            <div class="threads-heading">
+              <h2 id="threads-name">Fils</h2>
+              <p class="muted" id="threads-scope"></p>
+            </div>
+          </div>
           <div class="chips" id="chips">
             <button type="button" class="chip is-active" data-filter="all">Tous</button>
             <button type="button" class="chip" data-filter="unread">Non lus</button>

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

@@ -1014,14 +1014,40 @@ body {
   padding: 16px 20px 12px;
 }
 
+/* L'agent filtré est le sujet de la liste : sa pastille et son nom ouvrent le panneau. */
+.threads-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.threads-heading {
+  min-width: 0;
+}
+
 .threads-head h2 {
   margin: 0;
-  font-size: 15px;
+  font-size: 17px;
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .threads-head p {
   margin: 2px 0 0;
   font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.avatar--lg {
+  width: 40px;
+  height: 40px;
+  font-size: 15px;
+  flex: 0 0 auto;
 }
 
 .chips {

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const APP_VERSION = "1.0.20";
+export declare const APP_VERSION = "1.0.22";

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.20";
+export const APP_VERSION = "1.0.22";

package/package.json

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