@imenam/mcp-messenger 1.0.23 → 1.0.25

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,15 @@ 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. Le destinataire
+  n'y figure pas — un fil ne lie que deux boîtes, le répéter à chaque ligne n'apprend
+  rien ;
+  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
@@ -426,9 +436,10 @@ correspondants et l'état de lecture :
   suivis. Une image n'est jamais chargée, elle est montrée par son intitulé et son lien.
   Les aperçus, eux, sont débarrassés de leur syntaxe par le serveur : ils tiennent sur une
   ligne, où un dièse ou une paire d'astérisques ne serait que du bruit ;
-- **le volet de détail** d'un message, ouvert à la demande : identifiants du message et du
-  fil, les deux noms et l'adresse de chaque boîte, et le tableau de distribution (rôle,
-  dossier, état). Tout ce qui se recopie a son bouton de copie ;
+- **les détails d'un message**, dans une modale ouverte par l'icône d'information au bout
+  de sa ligne : l'objet, le nom et l'identifiant du fil, les identifiants, la date, la
+  priorité, les deux noms et l'adresse de chaque boîte, et le tableau de distribution
+  (rôle, dossier, état). Tout ce qui se recopie a son bouton de copie ;
 - une recherche unique, qui couvre le nom d'un fil, sa description et le texte de ses
   messages ;
 - **des panneaux redimensionnables** : chaque ligne de séparation se saisit à la souris,
@@ -439,8 +450,8 @@ correspondants et l'état de lecture :
 
 **Les adresses ne sont pas de l'information de lecture.** La console résout partout
 `box_9f2c4a01b3d7e5f8` en nom d'agent, et ne montre l'adresse qu'aux endroits où elle sert
-vraiment : le volet de détail, l'en-tête d'un fil et les boîtes sans nom, chaque fois avec
-un bouton de copie. Quand plusieurs sessions d'un même projet apparaissent, le nom de
+vraiment : les détails d'un message, l'en-tête d'un fil et les boîtes sans nom, chaque fois
+avec un bouton de copie. Quand plusieurs sessions d'un même projet apparaissent, le nom de
 l'agent est suivi de celui de la boîte entre parenthèses — sans quoi un fil se lirait
 « Documentor Dev → Documentor Dev » sans dire de quelles sessions il parle. Une boîte jamais connectée se distingue à son avatar en contour et à la mention
 « jamais connectée » — elle reste listée, puisqu'elle a du courrier en attente.
@@ -630,7 +641,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
+287 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

@@ -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"],
+  info: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z", "M12 11v5", "M12 8h.01"],
   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"],
 };
 
@@ -52,8 +53,11 @@ const state = {
   filter: "all",
   search: "",
   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(),
@@ -90,7 +94,8 @@ const el = {
   chips: document.getElementById("chips"),
   threads: document.getElementById("threads"),
   reader: document.getElementById("reader"),
-  sheet: document.getElementById("sheet"),
+  details: document.getElementById("details"),
+  detailsBody: document.getElementById("details-body"),
   purge: document.getElementById("purge"),
   purgeOpen: document.getElementById("purge-open"),
   purgeClose: document.getElementById("purge-close"),
@@ -457,9 +462,6 @@ function select(kind, key) {
   if (isSelected(kind, key)) return;
   state.selection = { kind, key };
   state.threadId = null;
-  state.messageId = null;
-  el.sheet.hidden = true;
-  el.console.classList.remove("has-sheet");
   refresh();
 }
 
@@ -869,29 +871,81 @@ 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 (state.messageId === message.message_id) classes.push("is-open");
-  else if (isLast) classes.push("is-last");
+  if (open) classes.push("is-expanded");
+  if (isLast) classes.push("is-last");
   const row = node("div", classes.join(" "));
-
-  row.appendChild(agentAvatar(message.from));
-
   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)));
+
+  /*
+    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));
+  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)));
+  identity.appendChild(detailsButton(message));
+  head.appendChild(identity);
+
+  // 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 +953,10 @@ 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;
-  foot.appendChild(
-    button("btn btn--link", open ? "détails ouverts" : "détails", () => {
-      if (open) closeSheet();
-      else openMessage(message.message_id);
-    })
-  );
-  column.appendChild(foot);
+  content.appendChild(foot);
 
   row.appendChild(column);
-  item.appendChild(row);
-  return item;
+  item.replaceChildren(row);
 }
 
 /**
@@ -925,44 +971,82 @@ function messageText(message) {
   return container;
 }
 
-// --- Volet de détail -------------------------------------------------------
+// --- Détails d'un message --------------------------------------------------
 
-function renderSheet(message) {
+/**
+ * Bouton d'information, au bout de la ligne.
+ *
+ * Un fil ne lie que deux boîtes : répéter à chaque message qui écrit à qui, sous quel nom
+ * de boîte, encombre la lecture pour une information déjà connue. Elle est donc rangée
+ * ici, à un clic, avec tout le reste — adresses, identifiants, distribution.
+ */
+function detailsButton(message) {
+  const open = node("button", "message-info");
+  open.type = "button";
+  open.title = "Détails du message";
+  open.setAttribute("aria-label", "Détails du message");
+  open.appendChild(icon("info"));
+  // Le bandeau entier ouvre le message : ce clic-ci ne doit pas le replier au passage.
+  open.addEventListener("click", (event) => {
+    event.stopPropagation();
+    openDetails(message.message_id);
+  });
+  return open;
+}
+
+async function openDetails(messageId) {
+  el.detailsBody.replaceChildren(node("p", "muted", "Chargement…"));
+  el.details.showModal();
+  try {
+    renderDetails(await api(`/admin/messages/${encodeURIComponent(messageId)}`));
+  } catch (error) {
+    if (error.message === "unauthorized") el.details.close();
+    else el.detailsBody.replaceChildren(node("p", "purge-error", `Erreur : ${error.message}`));
+  }
+}
+
+/** Tout ce que la conversation ne montre pas, et que la supervision peut vouloir lire. */
+function renderDetails(message) {
   const container = document.createDocumentFragment();
 
-  const head = node("div", "sheet-head");
+  const head = node("div", "modal-head");
   const titles = node("div");
-  titles.appendChild(node("h3", null, "Détails du message"));
-  titles.appendChild(node("p", "sheet-subject", message.subject));
+  titles.appendChild(node("h2", null, "Détails du message"));
+  titles.appendChild(node("p", "details-subject", message.subject));
   head.appendChild(titles);
   const close = node("button", "btn btn--icon btn--ghost");
   close.type = "button";
   close.title = "Fermer";
-  close.setAttribute("aria-label", "Fermer le volet");
+  close.setAttribute("aria-label", "Fermer les détails");
   close.appendChild(icon("close"));
-  close.addEventListener("click", closeSheet);
+  close.addEventListener("click", () => el.details.close());
   head.appendChild(close);
   container.appendChild(head);
 
-  const ids = node("div", "sheet-section");
+  const ids = node("div", "details-section");
   ids.appendChild(node("span", "section-label", "Message"));
   ids.appendChild(kvCopy("Identifiant", message.message_id));
-  ids.appendChild(kvCopy("Fil", message.thread_id));
+  ids.appendChild(kv("Objet", node("span", "kv-value", message.subject)));
   ids.appendChild(kv("Envoyé le", node("span", "kv-value", formatDate(message.created_at))));
   ids.appendChild(kv("Priorité", priorityTag(message.priority)));
   container.appendChild(ids);
 
+  const thread = node("div", "details-section");
+  thread.appendChild(node("span", "section-label", "Fil"));
+  // Sans nom donné par un participant, le fil n'a que son identifiant et le sujet d'ouverture.
+  thread.appendChild(kv("Nom", node("span", "kv-value", message.thread_title || "fil sans nom")));
+  thread.appendChild(kvCopy("Identifiant", message.thread_id));
+  container.appendChild(thread);
+
   container.appendChild(partySection("De", message.from));
   container.appendChild(partySection("À", message.to));
 
-  const deliveries = node("div", "sheet-section");
+  const deliveries = node("div", "details-section");
   deliveries.appendChild(node("span", "section-label", "Distribution"));
   deliveries.appendChild(deliveriesTable(message.deliveries || []));
   container.appendChild(deliveries);
 
-  el.sheet.replaceChildren(container);
-  el.sheet.hidden = false;
-  el.console.classList.add("has-sheet");
+  el.detailsBody.replaceChildren(container);
 }
 
 function kv(key, valueNode) {
@@ -992,7 +1076,7 @@ function priorityTag(priority) {
  */
 function partySection(label, agentId) {
   const who = party(agentId);
-  const section = node("div", "sheet-section");
+  const section = node("div", "details-section");
   section.appendChild(node("span", "section-label", label));
 
   const block = node("div", "party");
@@ -1034,21 +1118,13 @@ function deliveriesTable(deliveries) {
   return table;
 }
 
-function closeSheet() {
-  state.messageId = null;
-  el.sheet.hidden = true;
-  el.sheet.replaceChildren();
-  el.console.classList.remove("has-sheet");
-  if (state.threadId) refreshThread();
-}
-
 // --- Navigation ------------------------------------------------------------
 
 async function openThread(threadId) {
   state.threadId = threadId;
-  state.messageId = null;
-  el.sheet.hidden = true;
-  el.console.classList.remove("has-sheet");
+  // 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();
   await refreshThread();
   await refresh({ keepThread: true });
 }
@@ -1065,16 +1141,6 @@ async function refreshThread() {
   }
 }
 
-async function openMessage(messageId) {
-  state.messageId = messageId;
-  try {
-    renderSheet(await api(`/admin/messages/${encodeURIComponent(messageId)}`));
-    await refreshThread();
-  } catch (error) {
-    if (error.message !== "unauthorized") el.sheet.replaceChildren(node("div", "banner", error.message));
-  }
-}
-
 // --- Boucle de rafraîchissement --------------------------------------------
 
 async function refresh(options) {
@@ -1112,14 +1178,13 @@ async function refresh(options) {
 /**
  * Ce que chaque séparateur commande.
  *
- * `edge` dit de quel côté se trouve le panneau réglé : les deux premiers bordent le
- * panneau qui les précède, celui du volet de détail borde le panneau qui le suit. Sans
- * cette distinction, tirer vers la droite élargirait un volet ancré à droite.
+ * `edge` dit de quel côté se trouve le panneau réglé : ici, chacun borde le panneau qui
+ * le précède. La distinction reste écrite car un panneau ancré à droite se réglerait à
+ * l'envers, en comptant depuis son bord droit.
  */
 const PANELS = {
   "resize-agents": { name: "--w-agents", panel: "agentsPane", edge: "before", min: 180, max: 520, initial: 240 },
   "resize-threads": { name: "--w-threads", panel: "threadsPane", edge: "before", min: 260, max: 720, initial: 400 },
-  "resize-sheet": { name: "--w-sheet", panel: "sheet", edge: "after", min: 280, max: 720, initial: 360 },
 };
 
 const LAYOUT_KEY = "messenger.layout";
@@ -1396,9 +1461,6 @@ async function confirmPurge() {
       state.selection = { kind: "all", key: null };
     }
     state.threadId = null;
-    state.messageId = null;
-    el.sheet.hidden = true;
-    el.console.classList.remove("has-sheet");
     await refresh();
   } catch (error) {
     purge.armed = false;
@@ -1486,11 +1548,9 @@ el.logout.addEventListener("click", async () => {
   state.expanded = new Set();
   state.showEmpty = new Set();
   state.threadId = null;
-  state.messageId = null;
+  state.openMessages = new Set();
   state.directory = new Map();
   state.groups = [];
-  el.sheet.hidden = true;
-  el.console.classList.remove("has-sheet");
   el.agents.replaceChildren();
   el.threads.replaceChildren();
   renderEmptyReader();

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

@@ -1,217 +1,215 @@
-<!doctype html>
-<html lang="fr">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>MCP Messenger — supervision</title>
-    <link rel="stylesheet" href="./styles.css" />
-  </head>
-  <body>
-    <header class="topbar">
-      <div class="brand">
-        <svg class="brand-mark" viewBox="0 0 24 24" aria-hidden="true">
-          <path d="M22 12h-6l-2 3h-4l-2-3H2" />
-          <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
-        </svg>
-        <h1>MCP Messenger</h1>
-        <span class="pill pill--idle" id="status">
-          <span class="pill-dot"></span>
-          <span id="status-label">connexion…</span>
-        </span>
-      </div>
-
-      <div class="topbar-search" id="search-box">
-        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-          <circle cx="11" cy="11" r="8" />
-          <path d="m21 21-4.3-4.3" />
-        </svg>
-        <input type="search" id="search" placeholder="Rechercher un sujet, un fil, un agent…" />
-      </div>
-
-      <div class="topbar-controls" id="controls" hidden>
-        <label class="switch">
-          <input type="checkbox" id="auto-refresh" checked />
-          <span class="switch-track"><span class="switch-knob"></span></span>
-          <span class="switch-label">auto · 5 s</span>
-        </label>
-        <button type="button" id="refresh" class="btn btn--icon" title="Rafraîchir" aria-label="Rafraîchir">
-          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-            <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
-            <path d="M21 3v5h-5" />
-            <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
-            <path d="M3 21v-5h5" />
-          </svg>
-        </button>
-        <button type="button" id="purge-open" class="btn btn--icon" title="Purger les boîtes inactives" aria-label="Purger les boîtes inactives">
-          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-            <path d="M3 6h18" />
-            <path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" />
-            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-          </svg>
-        </button>
-        <button type="button" id="logout" class="btn btn--link">Se déconnecter</button>
-      </div>
-    </header>
-
-    <!--
-      Purge des boîtes inactives : la seule action de la console qui écrit, et elle
-      détruit. Elle se fait donc en deux temps, l'aperçu puis la confirmation, et ne porte
-      jamais que sur les boîtes affichées.
-    -->
-    <dialog class="modal" id="purge">
-      <div class="modal-card">
-        <div class="modal-head">
-          <h2>Nettoyer les boîtes</h2>
-          <button type="button" class="btn btn--icon btn--ghost" id="purge-close" aria-label="Fermer">
-            <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M18 6 6 18" />
-              <path d="m6 6 12 12" />
-            </svg>
-          </button>
-        </div>
-        <p class="modal-sub">
-          Deux nettoyages, deux critères. La suppression est définitive dans les deux cas, et emporte les messages que
-          plus personne ne pourrait lire ; ce que le correspondant a reçu de son côté reste intact. Un agent dont toutes
-          les boîtes disparaissent quitte l'annuaire avec elles.
-        </p>
-
-        <!-- Premier critère : la boîte n'a jamais servi. Il ne dépend d'aucune date. -->
-        <div class="purge-controls">
-          <div class="purge-criterion">
-            <span class="field-label">Boîtes vides</span>
-            <span class="purge-hint">Rien n'y est jamais passé, ni envoi ni réception, quel que soit leur âge.</span>
-          </div>
-          <button type="button" class="btn" id="purge-preview-empty">Prévisualiser</button>
-        </div>
-
-        <!-- Second critère : la boîte a servi, mais plus rien ne l'a touchée depuis. -->
-        <div class="purge-controls">
-          <label class="field">
-            <span class="field-label">Boîtes sans activité depuis le</span>
-            <span class="field-input"><input type="date" id="purge-before" /></span>
-            <span class="purge-hint">Ni connexion, ni message. Une boîte créée après cette date est épargnée.</span>
-          </label>
-          <button type="button" class="btn" id="purge-preview">Prévisualiser</button>
-        </div>
-
-        <div class="purge-result" id="purge-result"></div>
-
-        <div class="modal-foot">
-          <button type="button" class="btn btn--link" id="purge-cancel">Fermer</button>
-          <button type="button" class="btn btn--danger" id="purge-confirm" disabled>Supprimer</button>
-        </div>
-      </div>
-    </dialog>
-
-    <!-- Écran de connexion : une carte seule, sans les panneaux vides derrière elle. -->
-    <main class="login" id="login" hidden>
-      <form class="card" id="login-form">
-        <div class="card-badge">
-          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-            <rect x="3" y="11" width="18" height="11" rx="2" />
-            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-          </svg>
-        </div>
-        <h2>Console de supervision</h2>
-        <p class="card-sub" id="login-origin">MCP Messenger</p>
-
-        <label class="field">
-          <span class="field-label">Jeton administrateur</span>
-          <span class="field-input">
-            <input type="password" id="token" autocomplete="current-password" placeholder="MESSENGER_ADMIN_TOKEN" />
-            <button type="button" class="field-eye" id="token-reveal" aria-label="Afficher le jeton">
-              <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z" />
-                <circle cx="12" cy="12" r="3" />
-              </svg>
-            </button>
-          </span>
-          <span class="field-error" id="token-error"></span>
-        </label>
-
-        <button type="submit" class="btn btn--primary btn--block">Se connecter</button>
-        <p class="card-note">
-          Le jeton n'est jamais conservé dans le navigateur : la session tient dans un cookie HttpOnly, fermé à la
-          déconnexion.
-        </p>
-      </form>
-    </main>
-
-    <!-- Console : agents, fils, lecteur du fil, volet de détail. -->
-    <main class="console" id="console" hidden>
-      <aside class="agents" id="agents-pane">
-        <div class="agents-head">
-          <span class="section-label">Agents</span>
-          <button type="button" class="btn btn--icon btn--ghost" id="collapse" title="Replier" aria-label="Replier la liste des agents" aria-expanded="true">
-            <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-              <rect x="3" y="3" width="18" height="18" rx="2" />
-              <path d="M9 3v18" />
-            </svg>
-          </button>
-        </div>
-        <ul class="agent-list" id="agents"></ul>
-        <p class="agents-foot muted" id="agents-foot"></p>
-      </aside>
-
-      <!--
-        Séparateurs déplaçables. Chacun redimensionne le panneau qu'il borde, à la souris
-        comme aux flèches du clavier ; un double-clic rend sa largeur d'origine.
-      -->
-      <div
-        class="resizer"
-        id="resize-agents"
-        role="separator"
-        aria-orientation="vertical"
-        aria-label="Largeur de la colonne des agents"
-        tabindex="0"
-      ></div>
-
-      <section class="threads">
-        <div class="threads-head">
-          <!--
-            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>
-            <button type="button" class="chip" data-filter="high">Priorité haute</button>
-          </div>
-        </div>
-        <ul class="thread-list" id="threads"></ul>
-      </section>
-
-      <div
-        class="resizer"
-        id="resize-threads"
-        role="separator"
-        aria-orientation="vertical"
-        aria-label="Largeur de la liste des fils"
-        tabindex="0"
-      ></div>
-
-      <section class="reader" id="reader"></section>
-
-      <!-- Suit le volet de détail : il n'existe que lorsque le volet est ouvert. -->
-      <div
-        class="resizer resizer--sheet"
-        id="resize-sheet"
-        role="separator"
-        aria-orientation="vertical"
-        aria-label="Largeur du volet de détail"
-        tabindex="0"
-      ></div>
-
-      <aside class="sheet" id="sheet" hidden></aside>
-    </main>
-
-    <script type="module" src="./app.js"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>MCP Messenger — supervision</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <div class="brand">
+        <svg class="brand-mark" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M22 12h-6l-2 3h-4l-2-3H2" />
+          <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+        </svg>
+        <h1>MCP Messenger</h1>
+        <span class="pill pill--idle" id="status">
+          <span class="pill-dot"></span>
+          <span id="status-label">connexion…</span>
+        </span>
+      </div>
+
+      <div class="topbar-search" id="search-box">
+        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.3-4.3" />
+        </svg>
+        <input type="search" id="search" placeholder="Rechercher un sujet, un fil, un agent…" />
+      </div>
+
+      <div class="topbar-controls" id="controls" hidden>
+        <label class="switch">
+          <input type="checkbox" id="auto-refresh" checked />
+          <span class="switch-track"><span class="switch-knob"></span></span>
+          <span class="switch-label">auto · 5 s</span>
+        </label>
+        <button type="button" id="refresh" class="btn btn--icon" title="Rafraîchir" aria-label="Rafraîchir">
+          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
+            <path d="M21 3v5h-5" />
+            <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
+            <path d="M3 21v-5h5" />
+          </svg>
+        </button>
+        <button type="button" id="purge-open" class="btn btn--icon" title="Purger les boîtes inactives" aria-label="Purger les boîtes inactives">
+          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M3 6h18" />
+            <path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" />
+            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+          </svg>
+        </button>
+        <button type="button" id="logout" class="btn btn--link">Se déconnecter</button>
+      </div>
+    </header>
+
+    <!--
+      Purge des boîtes inactives : la seule action de la console qui écrit, et elle
+      détruit. Elle se fait donc en deux temps, l'aperçu puis la confirmation, et ne porte
+      jamais que sur les boîtes affichées.
+    -->
+    <dialog class="modal" id="purge">
+      <div class="modal-card">
+        <div class="modal-head">
+          <h2>Nettoyer les boîtes</h2>
+          <button type="button" class="btn btn--icon btn--ghost" id="purge-close" aria-label="Fermer">
+            <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
+            </svg>
+          </button>
+        </div>
+        <p class="modal-sub">
+          Deux nettoyages, deux critères. La suppression est définitive dans les deux cas, et emporte les messages que
+          plus personne ne pourrait lire ; ce que le correspondant a reçu de son côté reste intact. Un agent dont toutes
+          les boîtes disparaissent quitte l'annuaire avec elles.
+        </p>
+
+        <!-- Premier critère : la boîte n'a jamais servi. Il ne dépend d'aucune date. -->
+        <div class="purge-controls">
+          <div class="purge-criterion">
+            <span class="field-label">Boîtes vides</span>
+            <span class="purge-hint">Rien n'y est jamais passé, ni envoi ni réception, quel que soit leur âge.</span>
+          </div>
+          <button type="button" class="btn" id="purge-preview-empty">Prévisualiser</button>
+        </div>
+
+        <!-- Second critère : la boîte a servi, mais plus rien ne l'a touchée depuis. -->
+        <div class="purge-controls">
+          <label class="field">
+            <span class="field-label">Boîtes sans activité depuis le</span>
+            <span class="field-input"><input type="date" id="purge-before" /></span>
+            <span class="purge-hint">Ni connexion, ni message. Une boîte créée après cette date est épargnée.</span>
+          </label>
+          <button type="button" class="btn" id="purge-preview">Prévisualiser</button>
+        </div>
+
+        <div class="purge-result" id="purge-result"></div>
+
+        <div class="modal-foot">
+          <button type="button" class="btn btn--link" id="purge-cancel">Fermer</button>
+          <button type="button" class="btn btn--danger" id="purge-confirm" disabled>Supprimer</button>
+        </div>
+      </div>
+    </dialog>
+
+    <!--
+      Détails d'un message : tout ce que la conversation ne montre pas — adresses, noms de
+      boîtes, identifiants, distribution. Une modale, parce que c'est une consultation
+      ponctuelle : elle s'ouvre sur demande et rend la place en se fermant.
+    -->
+    <dialog class="modal" id="details">
+      <div class="modal-card" id="details-body"></div>
+    </dialog>
+
+    <!-- Écran de connexion : une carte seule, sans les panneaux vides derrière elle. -->
+    <main class="login" id="login" hidden>
+      <form class="card" id="login-form">
+        <div class="card-badge">
+          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+            <rect x="3" y="11" width="18" height="11" rx="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+        </div>
+        <h2>Console de supervision</h2>
+        <p class="card-sub" id="login-origin">MCP Messenger</p>
+
+        <label class="field">
+          <span class="field-label">Jeton administrateur</span>
+          <span class="field-input">
+            <input type="password" id="token" autocomplete="current-password" placeholder="MESSENGER_ADMIN_TOKEN" />
+            <button type="button" class="field-eye" id="token-reveal" aria-label="Afficher le jeton">
+              <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z" />
+                <circle cx="12" cy="12" r="3" />
+              </svg>
+            </button>
+          </span>
+          <span class="field-error" id="token-error"></span>
+        </label>
+
+        <button type="submit" class="btn btn--primary btn--block">Se connecter</button>
+        <p class="card-note">
+          Le jeton n'est jamais conservé dans le navigateur : la session tient dans un cookie HttpOnly, fermé à la
+          déconnexion.
+        </p>
+      </form>
+    </main>
+
+    <!-- Console : agents, fils, lecteur du fil. -->
+    <main class="console" id="console" hidden>
+      <aside class="agents" id="agents-pane">
+        <div class="agents-head">
+          <span class="section-label">Agents</span>
+          <button type="button" class="btn btn--icon btn--ghost" id="collapse" title="Replier" aria-label="Replier la liste des agents" aria-expanded="true">
+            <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+              <path d="M9 3v18" />
+            </svg>
+          </button>
+        </div>
+        <ul class="agent-list" id="agents"></ul>
+        <p class="agents-foot muted" id="agents-foot"></p>
+      </aside>
+
+      <!--
+        Séparateurs déplaçables. Chacun redimensionne le panneau qu'il borde, à la souris
+        comme aux flèches du clavier ; un double-clic rend sa largeur d'origine.
+      -->
+      <div
+        class="resizer"
+        id="resize-agents"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Largeur de la colonne des agents"
+        tabindex="0"
+      ></div>
+
+      <section class="threads">
+        <div class="threads-head">
+          <!--
+            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>
+            <button type="button" class="chip" data-filter="high">Priorité haute</button>
+          </div>
+        </div>
+        <ul class="thread-list" id="threads"></ul>
+      </section>
+
+      <div
+        class="resizer"
+        id="resize-threads"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Largeur de la liste des fils"
+        tabindex="0"
+      ></div>
+
+      <section class="reader" id="reader"></section>
+
+    </main>
+
+    <script type="module" src="./app.js"></script>
+  </body>
+</html>

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

@@ -554,29 +554,16 @@ body {
 .console {
   --w-agents: 240px;
   --w-threads: 400px;
-  --w-sheet: 360px;
   --w-gutter: 5px;
   display: grid;
   grid-template-columns: var(--w-agents) var(--w-gutter) var(--w-threads) var(--w-gutter) minmax(0, 1fr);
   height: calc(100vh - var(--topbar-h));
 }
 
-.console.has-sheet {
-  grid-template-columns:
-    var(--w-agents) var(--w-gutter) var(--w-threads) var(--w-gutter)
-    minmax(0, 1fr) var(--w-gutter) var(--w-sheet);
-}
-
 .console.is-collapsed {
   grid-template-columns: 57px var(--w-gutter) var(--w-threads) var(--w-gutter) minmax(0, 1fr);
 }
 
-.console.is-collapsed.has-sheet {
-  grid-template-columns:
-    57px var(--w-gutter) var(--w-threads) var(--w-gutter)
-    minmax(0, 1fr) var(--w-gutter) var(--w-sheet);
-}
-
 /* --- Séparateurs déplaçables ---------------------------------------------- */
 
 .resizer {
@@ -598,11 +585,6 @@ body {
   outline: none;
 }
 
-/* Le volet de détail n'est pas toujours là ; son séparateur non plus. */
-.console:not(.has-sheet) .resizer--sheet {
-  display: none;
-}
-
 /* Colonne repliée : il n'y a plus de largeur à régler, seulement un rail d'avatars. */
 .console.is-collapsed #resize-agents {
   cursor: default;
@@ -617,8 +599,7 @@ body {
 
 .console.is-resizing .agents,
 .console.is-resizing .threads,
-.console.is-resizing .reader,
-.console.is-resizing .sheet {
+.console.is-resizing .reader {
   pointer-events: none;
 }
 
@@ -992,11 +973,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 +1329,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,24 +1362,111 @@ 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;
+}
+
+/*
+  L'information s'ouvre depuis la ligne sans la replier. Visuellement c'est un bouton posé
+  dans un autre ; dans le balisage, non — il est rangé au bout de la ligne d'identité, et
+  son clic ne remonte pas au bandeau.
+*/
+.message-info {
   display: flex;
-  align-items: baseline;
+  padding: 2px;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.message-info:hover {
+  color: var(--accent);
+}
+
+.message-info:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.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: center;
   gap: 8px;
   flex-wrap: wrap;
+  min-width: 0;
 }
 
-.message-from {
-  font-weight: 600;
+/*
+  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. Il se lit sans graisse
+  — c'est déjà la ligne la plus longue du bandeau, l'appuyer en ferait un titre de section.
+  Ce qui dépasse est coupé : la ligne suivante appartient au message suivant.
+*/
+.message-subject {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.message-to {
-  font-size: 13px;
-  color: var(--muted);
+/* 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 {
+  font-weight: 600;
 }
 
 .message-time {
@@ -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;
 }
@@ -1539,48 +1639,26 @@ body {
   font-size: 12px;
 }
 
-/* --- Volet de détail ------------------------------------------------------ */
-
-.sheet {
-  border-left: 1px solid var(--border);
-  background: var(--panel);
-  overflow-y: auto;
-  min-width: 0;
-}
-
-.sheet-head {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 18px 20px 14px;
-  border-bottom: 1px solid var(--border);
-}
-
-.sheet-head h3 {
-  margin: 0;
-  font-size: 15px;
-}
+/* --- Détails d'un message ------------------------------------------------- */
 
-.sheet-subject {
+/* L'objet, sous le titre de la modale : il dit de quel message on lit les détails. */
+.details-subject {
   margin: 4px 0 0;
   font-size: 13px;
   color: var(--muted);
 }
 
-.sheet-head .btn {
-  margin-left: auto;
-}
-
-.sheet-section {
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border);
+.details-section {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border-soft);
 }
 
-.sheet-section:last-of-type {
+.details-section:last-of-type {
   border-bottom: 0;
+  padding-bottom: 0;
 }
 
-.sheet-section .section-label {
+.details-section .section-label {
   display: block;
   margin-bottom: 12px;
 }
@@ -1717,13 +1795,6 @@ body {
 
 /* --- Écrans étroits ------------------------------------------------------- */
 
-@media (max-width: 1200px) {
-  .console.has-sheet,
-  .console.is-collapsed.has-sheet {
-    grid-template-columns: 57px 320px minmax(0, 1fr) 320px;
-  }
-}
-
 @media (max-width: 1000px) {
   .topbar-search {
     max-width: 240px;
@@ -1731,22 +1802,6 @@ body {
 
   .console,
   .console.is-collapsed {
-    grid-template-columns: 57px 300px minmax(0, 1fr);
-  }
-
-  /* Trop étroit pour quatre colonnes : le volet recouvre le lecteur. */
-  .console.has-sheet,
-  .console.is-collapsed.has-sheet {
-    grid-template-columns: 57px 300px minmax(0, 1fr);
-  }
-
-  .console.has-sheet .sheet {
-    position: fixed;
-    top: var(--topbar-h);
-    right: 0;
-    bottom: 0;
-    width: 340px;
-    max-width: 100%;
-    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
+    grid-template-columns: 57px var(--w-gutter) 300px var(--w-gutter) minmax(0, 1fr);
   }
 }

package/dist/src/version.d.ts

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

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

package/package.json

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