@imenam/mcp-messenger 1.0.19 → 1.0.20

package/README.md

@@ -401,7 +401,12 @@ 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
+  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 ;
 - **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
@@ -459,7 +464,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 +556,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 +580,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 +622,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
+266 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 = {
@@ -284,13 +285,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);
@@ -603,10 +613,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;
@@ -672,7 +709,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 +723,38 @@ 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 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);
+  }
+  who.appendChild(stack);
+
+  who.appendChild(node("span", "thread-names", thread.participants.map((id) => party(id).name).join(" · ")));
+  return who;
+}
+
 // --- Lecteur du fil --------------------------------------------------------
 
 function renderEmptyReader() {
@@ -1100,6 +1169,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 +1233,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 +1308,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 +1328,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/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;
@@ -1100,15 +1148,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.20";

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.20";

package/package.json

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