@imenam/mcp-messenger 1.0.19 → 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.
 
@@ -401,8 +402,17 @@ correspondants et l'état de lecture :
   identiques sont départagées par l'adresse pour que l'ordre ne bouge pas d'un
   rafraîchissement à l'autre ;
 - **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. Trois puces
-  la filtrent : tous, non lus, priorité haute ;
+  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. **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,
@@ -459,7 +469,13 @@ chose :**
   touchées depuis. **Une boîte créée après cette date est épargnée, même vide** — une
   session qui vient de démarrer et n'a pas encore parlé n'est pas une boîte à l'abandon.
 
-L'un comme l'autre se font en deux temps, parce qu'ils ne se rattrapent pas :
+S'y ajoute la suppression d'**une boîte en particulier** : chaque ligne de la colonne de
+gauche porte une corbeille, révélée au survol ou au clavier. Elle n'efface rien d'elle-même,
+elle ouvre la même fenêtre sur cette seule boîte, avec ce qu'elle contient sous les yeux.
+C'est la seule des trois qui ne demande aucun critère : l'adresse vient d'être montrée du
+doigt, il n'y a rien à revérifier.
+
+Toutes se font en deux temps, parce qu'elles ne se rattrapent pas :
 
 1. **L'aperçu** liste les boîtes concernées, chacune avec son nom, son adresse, son nombre
    de messages et sa dernière activité. Chaque ligne se décoche.
@@ -545,6 +561,7 @@ la console (cookie), qui elle n'ouvre rien d'autre.
 | `GET` | `/admin/mailboxes/stale` | Boîtes sans activité depuis `before`, avec ce que chacune contient |
 | `GET` | `/admin/mailboxes/empty` | Boîtes par lesquelles rien n'est jamais passé, sans critère de date |
 | `POST` | `/admin/mailboxes/purge` | Supprime les boîtes nommées (`mailboxes`, plus `before` **ou** `empty: true`) — refusé si l'une d'elles ne répond plus au critère |
+| `DELETE` | `/admin/mailboxes/:id` | Supprime une boîte désignée, quel que soit son état — 404 si l'adresse est inconnue |
 | `POST` | `/ui/login` · `/ui/logout` | Session de la console (`{ "token": … }` → cookie `HttpOnly`) |
 
 ---
@@ -568,8 +585,8 @@ la console (cookie), qui elle n'ouvre rien d'autre.
   rendu en markdown par construction de nœuds, jamais par assignation de balisage, et la
   CSP interdit tout script tiers.
 - La console ne peut ni écrire ni modifier un message. Ses seules commandes destructrices
-  sont les deux nettoyages de boîtes, réservés au jeton d'administration, confirmés deux
-  fois et revérifiés par le serveur avant exécution.
+  suppriment des boîtes : réservées au jeton d'administration, confirmées deux fois, et
+  revérifiées par le serveur quand elles portent sur un lot.
 - Derrière un reverse proxy TLS, exposer le serveur en `https://` et donner cette URL aux
   agents via `MESSENGER_SERVER_URL`.
 
@@ -610,9 +627,9 @@ test/                   # store, config, API HTTP, outils MCP, binaire réel
 
 ### Tests
 
-253 tests couvrant : les deux nettoyages de boîtes commandés depuis la console — vides,
-ou inactives 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
+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
 l'innocuité du rendu : ni HTML interprété, ni lien vers un autre schéma qu'`http`, `https`
 ou `mailto`), le stockage et l'isolation des boîtes, la validation de configuration,

package/dist/src/server/app.js

@@ -264,6 +264,23 @@ export function createApp({ store, config }) {
         logger.warn(`admin purge: ${removed.mailboxes} mailbox(es) deleted, ${reason}`);
         res.json({ before: input.before ?? null, empty: input.empty ?? false, ...removed });
     });
+    /**
+     * Suppression d'une boîte désignée à la main, quel que soit son état.
+     *
+     * Pas de critère à revérifier ici, et c'est voulu : les deux nettoyages en lot se
+     * protègent d'une liste qui aurait vieilli entre l'aperçu et la confirmation, alors que
+     * celle-ci porte sur une boîte que l'on vient de montrer du doigt. La boîte doit
+     * exister — supprimer une adresse inconnue serait un geste sans effet présenté comme un
+     * succès.
+     */
+    admin.delete("/mailboxes/:id", (req, res) => {
+        const id = normalizeAgentId(String(req.params.id));
+        if (!store.getAgent(id))
+            throw new MessengerError(`mailbox not found: ${id}`, 404);
+        const removed = store.deleteMailboxes([id]);
+        logger.warn(`admin delete: mailbox ${id} deleted (${removed.messages} message(s) erased)`);
+        res.json({ mailbox: id, ...removed });
+    });
     app.use("/admin", admin);
     // Porte d'entrée de tout le reste : aucune requête n'est servie sans jeton valide. Le
     // contrôle par route (identité de l'agent) vient ensuite.

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

@@ -1,7 +1,7 @@
-// Console de supervision : les routes /admin du serveur, en lecture — à deux exceptions
-// près, les nettoyages de boîtes, seules commandes de cette page qui écrivent, et qui
-// détruisent. Elles sont donc tenues à part : un aperçu, puis une confirmation, et rien
-// ne part sans le critère que le serveur revérifiera.
+// Console de supervision : les routes /admin du serveur, en lecture — à trois exceptions
+// près, les suppressions de boîtes, seules commandes de cette page qui écrivent, et qui
+// détruisent. Elles passent toutes par la même fenêtre : un aperçu de ce qui va partir,
+// puis une confirmation en deux clics.
 //
 // Tout le contenu affiché provient d'agents : il est inséré via textContent uniquement,
 // jamais par innerHTML. Les seuls fragments de balisage construits ici sont les icônes,
@@ -26,6 +26,7 @@ const ICONS = {
   close: ["M18 6 6 18", "m6 6 12 12"],
   link: ["M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1", "M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"],
   chevron: ["m9 18 6-6-6-6"],
+  trash: ["M3 6h18", "M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2", "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"],
 };
 
 const state = {
@@ -81,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"),
@@ -234,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) {
@@ -284,13 +312,22 @@ async function api(path, params) {
   return response.json();
 }
 
-/** Envoi d'une action à la console. La seule qui existe supprime : elle passe par ici. */
+/** Envoi d'une action à la console. Les seules qui existent suppriment : elles passent par ici. */
 async function post(path, body) {
+  return action("POST", path, body);
+}
+
+/** Suppression d'une ressource nommée par son adresse : pas de corps, l'URL suffit. */
+async function remove(path) {
+  return action("DELETE", path, null);
+}
+
+async function action(method, path, body) {
   const response = await fetch(path, {
-    method: "POST",
+    method,
     headers: { "content-type": "application/json", accept: "application/json" },
     credentials: "same-origin",
-    body: JSON.stringify(body),
+    body: body === null ? undefined : JSON.stringify(body),
   });
   if (response.status === 401) {
     setLoggedIn(false);
@@ -409,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;
@@ -603,10 +647,37 @@ function boxRow(box) {
   if (box.unread > 0) row.appendChild(node("span", "count count--accent", String(box.unread)));
   row.title = `${box.id}\n${plural(box.sent, "envoyé")} · ${plural(box.received, "reçu")}`;
   row.addEventListener("click", () => select("box", box.id));
-  item.appendChild(row);
+
+  // La ligne et son bouton de suppression sont deux boutons voisins, jamais imbriqués :
+  // un bouton dans un bouton n'est pas du HTML, et le clic n'y serait pas dissociable.
+  const line = node("div", "box-line");
+  line.appendChild(row);
+  line.appendChild(deleteBoxButton(box));
+  item.appendChild(line);
   return item;
 }
 
+/**
+ * Suppression d'une boîte, à la main.
+ *
+ * Le bouton n'efface rien : il ouvre la fenêtre de nettoyage sur cette seule boîte, avec
+ * ce qu'elle contient sous les yeux et la même double confirmation que les nettoyages en
+ * lot. Un geste destructeur à un clic d'une liste ne peut pas être plus court que ça.
+ */
+function deleteBoxButton(box) {
+  const label = `Supprimer la boîte ${boxLabel(box)}`;
+  const remove = node("button", "box-delete");
+  remove.type = "button";
+  remove.title = label;
+  remove.setAttribute("aria-label", label);
+  remove.appendChild(icon("trash"));
+  remove.addEventListener("click", (event) => {
+    event.stopPropagation();
+    openPurgeFor(box);
+  });
+  return remove;
+}
+
 /** Nombre de fils affiché en pied de colonne, conservé entre deux rendus locaux. */
 function currentThreadCount() {
   return state.threadCount || 0;
@@ -635,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) {
@@ -648,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é.";
@@ -672,7 +780,7 @@ function threadRow(thread) {
   top.appendChild(node("span", "thread-time", formatShort(thread.last_message_at)));
   row.appendChild(top);
 
-  row.appendChild(node("div", "thread-who", thread.participants.map((id) => party(id).name).join(" · ")));
+  row.appendChild(threadParticipants(thread));
 
   const bottom = node("div", "thread-bottom");
   bottom.appendChild(node("span", "thread-preview", thread.last_message_preview));
@@ -686,6 +794,29 @@ function threadRow(thread) {
   return item;
 }
 
+/**
+ * Qui parle dans ce fil : les pastilles d'abord, les noms ensuite.
+ *
+ * Un fil lie exactement deux boîtes, la pastille suffit donc à les distinguer d'un coup
+ * d'œil, sans compter ni déborder. Chaque pastille garde la couleur de son adresse d'un
+ * écran à l'autre, et dit au survol tout ce qu'on peut vouloir savoir de la boîte : le
+ * projet d'où elle écrit, ce dont cette session s'occupe, son adresse, et si c'est elle
+ * qui a écrit en dernier.
+ */
+function threadParticipants(thread) {
+  const who = node("div", "thread-who");
+
+  const stack = node("div", "avatar-stack");
+  for (const id of thread.participants) {
+    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);
+
+  who.appendChild(node("span", "thread-names", thread.participants.map((id) => party(id).name).join(" · ")));
+  return who;
+}
+
 // --- Lecteur du fil --------------------------------------------------------
 
 function renderEmptyReader() {
@@ -714,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(
@@ -745,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");
@@ -1100,6 +1233,29 @@ function openPurge() {
   el.purge.showModal();
 }
 
+/**
+ * Ouvre la fenêtre sur une seule boîte, celle qu'on vient de désigner dans la colonne.
+ *
+ * Rien à demander au serveur : l'annuaire vient d'être lu, et ce qu'il en dit est ce que
+ * la ligne cliquée affiche. La liste est donc dressée sur place, avec la même mise en
+ * forme et la même confirmation que les nettoyages en lot.
+ */
+function openPurgeFor(box) {
+  openPurge();
+  purge.mode = "one";
+  purge.mailboxes = [
+    {
+      id: box.id,
+      agent_name: box.agent_name,
+      display_name: box.display_name,
+      last_activity_at: box.last_activity_at,
+      messages: box.sent + box.received,
+    },
+  ];
+  purge.selected = new Set([box.id]);
+  renderPurgePreview();
+}
+
 /** Toute modification remet la confirmation à zéro : on ne supprime que ce qu'on vient de voir. */
 function resetPurge() {
   purge.mode = null;
@@ -1141,19 +1297,28 @@ async function previewPurge(mode, load, before = null) {
 function renderPurgePreview() {
   const container = document.createDocumentFragment();
   const count = purge.mailboxes.length;
-  // Le critère est rappelé sous les yeux de qui va confirmer : les deux nettoyages
-  // remplissent la même liste, et ils ne suppriment pas les mêmes boîtes.
-  const since = purge.mode === "empty" ? "" : ` sans activité depuis le ${formatDay(purge.before)}`;
-  const found =
-    purge.mode === "empty" ? plural(count, "boîte vide", "boîtes vides") : `${plural(count, "boîte")}${since}`;
+  // Le critère est rappelé sous les yeux de qui va confirmer : les trois suppressions
+  // remplissent la même liste, et elles ne portent pas sur les mêmes boîtes.
+  const since = ` sans activité depuis le ${formatDay(purge.before)}`;
+  const criterion = purge.mode === "empty" ? "vide" : purge.mode === "one" ? "" : since;
 
   if (count === 0) {
-    container.appendChild(node("p", "purge-empty", `Aucune boîte ${purge.mode === "empty" ? "vide" : since.trim()}.`));
+    container.appendChild(node("p", "purge-empty", `Aucune boîte ${criterion.trim()}.`));
     el.purgeResult.replaceChildren(container);
     return;
   }
 
-  container.appendChild(node("p", "purge-count", `${found}.`));
+  container.appendChild(
+    node(
+      "p",
+      "purge-count",
+      purge.mode === "one"
+        ? "Cette boîte, et tout ce que personne d'autre ne pourrait plus lire :"
+        : purge.mode === "empty"
+          ? `${plural(count, "boîte vide", "boîtes vides")}.`
+          : `${plural(count, "boîte")}${since}.`
+    )
+  );
 
   const list = node("ul", "purge-list");
   for (const mailbox of purge.mailboxes) {
@@ -1207,12 +1372,18 @@ async function confirmPurge() {
   }
 
   el.purgeConfirm.disabled = true;
+  const deleted = [...purge.selected];
   try {
-    const removed = await post("/admin/mailboxes/purge", {
-      // Le critère repart avec les adresses : c'est lui que le serveur revérifie.
-      ...(purge.mode === "empty" ? { empty: true } : { before: purge.before }),
-      mailboxes: [...purge.selected],
-    });
+    // Une boîte désignée à la main s'efface par son adresse : il n'y a pas de critère à
+    // revérifier, l'utilisateur vient de la montrer du doigt.
+    const removed =
+      purge.mode === "one"
+        ? await remove(`/admin/mailboxes/${encodeURIComponent(deleted[0])}`)
+        : await post("/admin/mailboxes/purge", {
+            // Le critère repart avec les adresses : c'est lui que le serveur revérifie.
+            ...(purge.mode === "empty" ? { empty: true } : { before: purge.before }),
+            mailboxes: deleted,
+          });
     resetPurge();
     el.purgeResult.replaceChildren(
       node(
@@ -1221,7 +1392,11 @@ async function confirmPurge() {
         `${plural(removed.mailboxes, "boîte")} supprimée(s), ${plural(removed.messages, "message")} et ${plural(removed.threads, "fil")} avec.`
       )
     );
-    // La console montre encore ce qui n'existe plus : elle se relit entièrement.
+    // La console montre encore ce qui n'existe plus : elle se relit entièrement, et son
+    // filtre est relâché s'il portait sur une boîte qui vient de disparaître.
+    if (state.selection.kind === "box" && deleted.includes(state.selection.key)) {
+      state.selection = { kind: "all", key: null };
+    }
     state.threadId = null;
     state.messageId = null;
     el.sheet.hidden = true;

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

@@ -769,6 +769,54 @@ body {
   padding: 7px 10px;
 }
 
+/* La ligne d'une boîte et son bouton de suppression, côte à côte. */
+.box-line {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.box-line .box {
+  flex: 1;
+  min-width: 0;
+}
+
+/*
+  Le bouton ne se montre qu'au survol ou au clavier : une corbeille par ligne, affichée en
+  permanence, transformerait la colonne en champ de mines. Il reste dans le flux — révélé
+  par l'opacité et non par `display` — pour que la ligne ne change pas de largeur.
+*/
+.box-delete {
+  display: flex;
+  padding: 5px;
+  border: 0;
+  border-radius: var(--radius);
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  opacity: 0;
+}
+
+.box-line:hover .box-delete,
+.box-delete:focus-visible {
+  opacity: 1;
+}
+
+.box-delete:hover {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.box-delete:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+/* Colonne repliée : il n'y a plus de boîtes affichées, donc rien à supprimer. */
+.is-collapsed .box-delete {
+  display: none;
+}
+
 .box .agent-name {
   font-weight: 500;
   font-size: 13px;
@@ -966,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 {
@@ -1100,15 +1174,48 @@ body {
   color: var(--accent);
 }
 
+/* Les pastilles des deux correspondants, puis leurs noms : on voit qui parle avant de lire. */
 .thread-who {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  min-width: 0;
+}
+
+.thread-names {
   font-size: 12px;
   color: var(--muted);
-  margin-top: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+/* Dans une liste, la pastille sert de repère, pas de portrait : elle est plus petite. */
+.thread-who .avatar--sm {
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+}
+
+/*
+  Ici les pastilles ne se chevauchent pas. Le chevauchement du lecteur dit « ces gens vont
+  ensemble » quand la place manque ; dans une liste qui se survole, il mange les initiales,
+  et ce sont justement elles qui identifient la boîte. L'anneau qui détachait les pastilles
+  superposées n'a alors plus rien à détacher.
+*/
+.thread-who .avatar-stack {
+  gap: 4px;
+}
+
+.thread-who .avatar-stack .avatar + .avatar {
+  margin-left: 0;
+}
+
+.thread-who .avatar--stack {
+  box-shadow: none;
+}
+
 .thread-bottom {
   display: flex;
   align-items: center;

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const APP_VERSION = "1.0.19";
+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.19";
+export const APP_VERSION = "1.0.22";

package/package.json

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