@imenam/mcp-messenger 1.0.24 → 1.0.26

package/README.md

@@ -424,7 +424,9 @@ correspondants et l'état de lecture :
   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.
+  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
@@ -434,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,
@@ -447,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.
@@ -638,7 +641,7 @@ test/                   # store, config, API HTTP, outils MCP, binaire réel
 
 ### Tests
 
-284 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,6 @@ 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.
@@ -95,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"),
@@ -242,6 +242,19 @@ function avatar(agentId, extraClass) {
   return avatarFor(agentId, label, title, extraClass, !who.registered);
 }
 
+/**
+ * Le nom de l'agent, et lui seul.
+ *
+ * `party().name` accole le nom de la boîte dès que plusieurs sessions d'un projet
+ * existent : indispensable là où deux sessions doivent se distinguer, encombrant dans le
+ * lecteur d'un fil, où l'on suit une conversation entre deux correspondants déjà connus.
+ * Ce que la boîte ajoute — son nom, son adresse — se lit dans les détails du message.
+ */
+function agentLabel(agentId) {
+  const who = party(agentId);
+  return who.agentName || who.box || shortAddress(agentId);
+}
+
 /**
  * Pastille de l'agent, et non de la boîte.
  *
@@ -462,9 +475,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();
 }
 
@@ -856,7 +866,7 @@ function renderThread(data) {
     node(
       "span",
       "reader-participants",
-      `${participants.map((id) => party(id).name).join(", ")} · ${plural(messages.length, "message")}`
+      `${participants.map(agentLabel).join(", ")} · ${plural(messages.length, "message")}`
     )
   );
   const threadId = node("span", "mono muted", data.thread_id);
@@ -900,8 +910,7 @@ function fillMessage(item, message, isLast) {
   const open = state.openMessages.has(message.message_id);
   const classes = ["message"];
   if (open) classes.push("is-expanded");
-  if (state.messageId === message.message_id) classes.push("is-open");
-  else if (isLast) classes.push("is-last");
+  if (isLast) classes.push("is-last");
   const row = node("div", classes.join(" "));
   const column = node("div", "message-body-col");
 
@@ -916,16 +925,16 @@ function fillMessage(item, message, isLast) {
   head.appendChild(agentAvatar(message.from));
 
   const identity = node("span", "message-identity");
-  identity.appendChild(node("span", "message-from", party(message.from).name));
-  identity.appendChild(node("span", "message-to", `→ ${party(message.to).name}`));
+  identity.appendChild(node("span", "message-from", agentLabel(message.from)));
   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}`;
+    dot.title = `non lu par ${agentLabel(message.to)}`;
     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.
@@ -954,16 +963,8 @@ function fillMessage(item, message, isLast) {
   const foot = node("div", "message-foot");
   foot.appendChild(
     message.read
-      ? tag("tag tag--ok", `lu par ${party(message.to).name}`, "check")
-      : tag("tag tag--warn", `non lu par ${party(message.to).name}`, "clock")
-  );
-  // Le volet de détail, lui, s'ouvre à côté : c'est un autre état que le dépli du corps.
-  const sheetOpen = state.messageId === message.message_id;
-  foot.appendChild(
-    button("btn btn--link", sheetOpen ? "détails ouverts" : "détails", () => {
-      if (sheetOpen) closeSheet();
-      else openMessage(message.message_id);
-    })
+      ? tag("tag tag--ok", `lu par ${agentLabel(message.to)}`, "check")
+      : tag("tag tag--warn", `non lu par ${agentLabel(message.to)}`, "clock")
   );
   content.appendChild(foot);
 
@@ -983,44 +984,82 @@ function messageText(message) {
   return container;
 }
 
-// --- Volet de détail -------------------------------------------------------
+// --- Détails d'un 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}`));
+  }
+}
 
-function renderSheet(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) {
@@ -1050,7 +1089,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");
@@ -1092,24 +1131,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;
   // Un fil s'ouvre replié, même celui qu'on rouvre : ce qui était déplié l'était pour
   // l'autre conversation.
   state.openMessages.clear();
-  el.sheet.hidden = true;
-  el.console.classList.remove("has-sheet");
   await refreshThread();
   await refresh({ keepThread: true });
 }
@@ -1126,16 +1154,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) {
@@ -1173,14 +1191,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";
@@ -1457,9 +1474,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;
@@ -1547,11 +1561,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;
 }
 
@@ -1420,6 +1401,30 @@ body {
   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;
+  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;
 }
@@ -1435,11 +1440,11 @@ body {
 
 /*
   L'objet du message, sur sa ligne, replié comme déplié : c'est ce qui identifie le
-  message, et le bandeau ne doit pas changer de forme en s'ouvrant. Ce qui dépasse est
-  coupé — la ligne suivante appartient au message suivant.
+  message, 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 {
-  font-weight: 600;
   min-width: 0;
   white-space: nowrap;
   overflow: hidden;
@@ -1464,11 +1469,6 @@ body {
   font-weight: 600;
 }
 
-.message-to {
-  font-size: 13px;
-  color: var(--muted);
-}
-
 .message-time {
   margin-left: auto;
   font-size: 12px;
@@ -1639,48 +1639,26 @@ body {
   font-size: 12px;
 }
 
-/* --- Volet de détail ------------------------------------------------------ */
+/* --- Détails d'un message ------------------------------------------------- */
 
-.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;
-}
-
-.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;
 }
@@ -1817,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;
@@ -1831,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.24";
+export declare const APP_VERSION = "1.0.26";

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

package/package.json

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