@imenam/mcp-messenger 1.0.14 → 1.0.16

package/README.md

@@ -347,17 +347,29 @@ correspondants et l'état de lecture :
   **toutes ses sessions**, cliquer une boîte sur **cette seule session**. La colonne se
   replie sur les seuls avatars d'agents quand la place manque.
 
-  **Le classement se fait sur la dernière activité, la plus récente en tête** — les
-  sessions au sein d'un agent comme les agents entre eux, un agent héritant de l'activité
-  de sa session la plus vivante. Chaque boîte affiche donc la date qui la classe ; celles
-  qui n'ont jamais rien fait ferment la marche, et deux dates identiques sont départagées
-  par l'adresse pour que l'ordre ne bouge pas d'un rafraîchissement à l'autre ;
+  **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
+  boîte est vide tant que rien n'y est passé, ni envoi ni réception — le serveur en alloue
+  une par session ouverte, et beaucoup n'échangeront jamais rien. Ces boîtes-là sont
+  **masquées par défaut**, derrière un bouton en fin de dépli qui dit combien il y en a ;
+  les masquer ne cache jamais de courrier, une boîte sans réception n'ayant par
+  construction aucun non-lu. Un agent dont aucune session n'a rien échangé passe de même
+  derrière les autres. Chaque boîte affiche la date qui la classe, et deux dates
+  identiques sont départagées par l'adresse pour que l'ordre ne bouge pas d'un
+  rafraîchissement à l'autre ;
 - **la liste des fils**, du plus récemment actif au plus ancien, chacun résumé par son
   nom, ses correspondants, son dernier message et sa priorité la plus haute. Trois puces
   la filtrent : tous, non lus, priorité haute ;
 - **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 ;
+  l'a 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
+  écrit ne peut devenir une balise, et seuls les liens `http`, `https` et `mailto` sont
+  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 ;
@@ -503,6 +515,7 @@ src/
   server/watchers.ts    # présence des veilleurs, en mémoire : état de connexion
   server/start.ts       # démarrage, arrêt propre, purge de la corbeille
   server/ui/            # console web (HTML/CSS/JS sans dépendance)
+  server/ui/markdown.js # rendu markdown du corps des messages, en nœuds DOM
   cli/watch.ts          # mode veilleur : une ligne sur stdout par message entrant
   cli/watch-handoff.ts  # relais 0600 entre la session MCP et son veilleur
   client/               # client HTTP utilisé par le mode MCP
@@ -512,7 +525,9 @@ test/                   # store, config, API HTTP, outils MCP, binaire réel
 
 ### Tests
 
-112 tests couvrant : le stockage et l'isolation des boîtes, la validation de configuration,
+187 tests couvrant : 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,
 l'API HTTP et son authentification (refus systématique sans jeton, jeton partagé, jetons par
 agent, jeton de console distinct), les outils MCP de bout en bout (deux agents qui
 conversent à travers un vrai serveur), l'allocation des boîtes par session — deux processus

package/dist/src/core/store.js

@@ -848,9 +848,44 @@ function clamp(value, min, max) {
     return Math.min(max, Math.max(min, Math.trunc(value)));
 }
 function preview(body) {
-    const flat = body.replace(/\s+/g, " ").trim();
+    const flat = stripMarkdown(body).replace(/\s+/g, " ").trim();
     return flat.length <= PREVIEW_LENGTH ? flat : `${flat.slice(0, PREVIEW_LENGTH - 1)}…`;
 }
+/**
+ * Le corps d'un message est du markdown ; un aperçu, non — il tient sur une ligne, dans
+ * une liste, sans mise en forme pour le porter. La syntaxe y devient donc du bruit : on
+ * garde ce que le markdown dit, on jette ce qui sert à le mettre en forme.
+ *
+ * C'est un aplatissement, pas une analyse : l'aperçu n'a pas à rendre compte de la
+ * structure du message, seulement à en donner les premiers mots lisibles.
+ */
+function stripMarkdown(body) {
+    return (body
+        // Un bloc de code n'a rien de lisible en 160 caractères : seule sa langue renseigne.
+        .replace(/^ {0,3}(```|~~~)[^\n]*\n[\s\S]*?(?:\n {0,3}\1[^\n]*|$)/gm, (block) => {
+        const language = /^ {0,3}(?:```|~~~)\s*([^\s`]+)/.exec(block)?.[1];
+        return language ? `[code ${language}]` : "[code]";
+    })
+        .replace(/`+([^`]+)`+/g, "$1")
+        // Images et liens : l'intitulé porte le sens, l'URL encombre.
+        .replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1")
+        .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
+        .replace(/<((?:https?:\/\/|mailto:)[^\s>]+)>/g, "$1")
+        // Marqueurs de bloc en tête de ligne : titres, citations, puces, filets.
+        .replace(/^ {0,3}#{1,6}\s+/gm, "")
+        .replace(/^ {0,3}>[ \t]?/gm, "")
+        .replace(/^\s*([-*+]|\d{1,9}[.)])[ \t]+/gm, "· ")
+        .replace(/^ {0,3}([-*_])[ \t]*(?:\1[ \t]*){2,}$/gm, " ")
+        // Un tableau perd sa grille : ses cellules restent, séparées.
+        .replace(/^ {0,3}\|?[ \t]*:?-+:?[ \t]*(\|[ \t]*:?-+:?[ \t]*)+\|?[ \t]*$/gm, " ")
+        .replace(/^[ \t]*\|/gm, "")
+        .replace(/\|[ \t]*$/gm, "")
+        .replace(/[ \t]*\|[ \t]*/g, " · ")
+        // Emphase : les marques tombent, le texte reste.
+        .replace(/(\*\*|__)(\S[\s\S]*?\S)\1/g, "$2")
+        .replace(/~~(\S[\s\S]*?\S)~~/g, "$1")
+        .replace(/(?<![\w*])([*_])(\S[^*_\n]*?\S)\1(?![\w*])/g, "$2"));
+}
 /** Échappe les jokers SQL : la recherche reste littérale, `%` cherche bien un `%`. */
 function escapeLike(value) {
     return value.replace(/[\\%_]/g, (char) => `\\${char}`);

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

@@ -2,11 +2,14 @@
 //
 // 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,
-// écrites en dur dans ce fichier.
+// écrites en dur dans ce fichier. Le corps des messages passe par `renderMarkdown`, qui
+// bâtit lui aussi des nœuds un par un et n'ouvre donc pas non plus de brèche.
 //
 // L'authentification tient dans un cookie de session HttpOnly posé par `/ui/login` :
 // ce script ne voit jamais le jeton et n'écrit rien dans le navigateur.
 
+import { renderMarkdown } from "./markdown.js";
+
 const REFRESH_MS = 5000;
 
 // Une adresse ne dit rien à qui lit la console : elle sert de graine à la couleur de
@@ -33,6 +36,8 @@ const state = {
   selection: { kind: "all", key: null },
   /** Noms d'agents dépliés dans la colonne de gauche. Tout est replié au départ. */
   expanded: new Set(),
+  /** Agents dont on a demandé à voir les boîtes vides. Elles sont cachées au départ. */
+  showEmpty: new Set(),
   /** "all" | "unread" | "high" — les puces au-dessus de la liste des fils. */
   filter: "all",
   search: "",
@@ -287,23 +292,41 @@ function groupByAgent(boxes) {
   for (const box of boxes) {
     const key = box.agent_name || box.id;
     if (!groups.has(key)) {
-      groups.set(key, { key, name: box.agent_name || boxLabel(box), boxes: [], unread: 0, activity: "" });
+      groups.set(key, { key, name: box.agent_name || boxLabel(box), boxes: [], unread: 0, filled: 0, activity: "" });
     }
     const group = groups.get(key);
     group.boxes.push(box);
     group.unread += box.unread;
+    if (!isEmptyBox(box)) group.filled += 1;
     // L'agent hérite de l'activité de sa session la plus vivante.
     if (activityOf(box) > group.activity) group.activity = activityOf(box);
   }
   const list = [...groups.values()];
-  for (const group of list) group.boxes.sort(byActivity);
+  for (const group of list) group.boxes.sort(byBox);
   // Le classement est refait ici plutôt que laissé à l'ordre d'arrivée de l'annuaire :
-  // ce que la colonne promet — le plus récent en tête — ne doit pas dépendre du hasard
-  // d'un tri fait ailleurs.
-  list.sort((a, b) => compareActivity(a.activity, b.activity) || (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
+  // ce que la colonne promet ne doit pas dépendre du hasard d'un tri fait ailleurs. Un
+  // agent dont aucune session n'a rien échangé passe derrière les autres, comme ses boîtes.
+  list.sort(
+    (a, b) =>
+      compareEmpty(a.filled === 0, b.filled === 0) ||
+      compareActivity(a.activity, b.activity) ||
+      (a.key < b.key ? -1 : a.key > b.key ? 1 : 0)
+  );
   return list;
 }
 
+/**
+ * Une boîte est vide tant que rien n'y est passé, ni envoi ni réception.
+ *
+ * Le serveur alloue une boîte à chaque session ouverte : beaucoup n'échangeront jamais
+ * rien et n'ont donc rien à dire à qui supervise. Une boîte vide n'a par construction
+ * aucun non-lu — `received` à zéro l'implique — la masquer ne cache donc jamais de
+ * courrier en attente.
+ */
+function isEmptyBox(box) {
+  return box.sent + box.received === 0;
+}
+
 /** Dernière activité d'une boîte, ou chaîne vide quand elle n'a jamais rien fait. */
 function activityOf(box) {
   return box.last_activity_at || "";
@@ -320,9 +343,23 @@ function compareActivity(left, right) {
   return left < right ? 1 : -1;
 }
 
-/** À activité égale, l'adresse départage : deux rendus donnent le même ordre. */
-function byActivity(a, b) {
-  return compareActivity(activityOf(a), activityOf(b)) || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0);
+/** Le plein avant le vide. Premier critère du classement, avant même la date. */
+function compareEmpty(left, right) {
+  if (left === right) return 0;
+  return left ? 1 : -1;
+}
+
+/**
+ * Deux classements emboîtés : d'abord les boîtes qui ont servi, puis les vides ; dans
+ * chacun des deux, la plus récemment active en tête. À égalité, l'adresse départage, pour
+ * que l'ordre ne bouge pas d'un rafraîchissement à l'autre.
+ */
+function byBox(a, b) {
+  return (
+    compareEmpty(isEmptyBox(a), isEmptyBox(b)) ||
+    compareActivity(activityOf(a), activityOf(b)) ||
+    (a.id < b.id ? -1 : a.id > b.id ? 1 : 0)
+  );
 }
 
 function isSelected(kind, key) {
@@ -415,12 +452,17 @@ function groupRow(group) {
     )
   );
 
+  const empty = group.boxes.length - group.filled;
+  // Le décompte annonce ce que le dépli va montrer : sans quoi « 5 boîtes » suivi de deux
+  // lignes se lirait comme un bug plutôt que comme des boîtes vides mises de côté.
+  const counts = empty > 0 ? `${plural(group.filled, "boîte")} · ${plural(empty, "vide")}` : plural(group.filled, "boîte");
+
   const text = node("div", "agent-text");
   text.appendChild(node("div", "agent-name", group.name));
-  text.appendChild(node("div", "agent-box", plural(group.boxes.length, "boîte")));
+  text.appendChild(node("div", "agent-box", counts));
   row.appendChild(text);
   if (group.unread > 0) row.appendChild(node("span", "count count--accent", String(group.unread)));
-  row.title = `${group.name} · ${plural(group.boxes.length, "boîte")}`;
+  row.title = `${group.name} · ${counts}`;
   row.addEventListener("click", () => {
     state.expanded.add(group.key);
     select("agent", group.key);
@@ -430,15 +472,37 @@ function groupRow(group) {
 
   if (open) {
     const list = node("ul", "box-list");
-    for (const box of group.boxes) list.appendChild(boxRow(box));
+    // Les vides sont derrière dans `group.boxes` : les montrer, c'est allonger la liste,
+    // jamais en réordonner le début.
+    const revealed = state.showEmpty.has(group.key);
+    for (const box of group.boxes) {
+      if (isEmptyBox(box) && !revealed) continue;
+      list.appendChild(boxRow(box));
+    }
+    if (empty > 0) list.appendChild(emptyToggleRow(group, empty, revealed));
     item.appendChild(list);
   }
   return item;
 }
 
+/** Dernière ligne du dépli : ouvre ou referme les boîtes qui n'ont jamais rien échangé. */
+function emptyToggleRow(group, empty, revealed) {
+  const item = node("li");
+  const what = empty > 1 ? `les ${empty} boîtes vides` : "la boîte vide";
+  const toggle = button("box-empty-toggle", `${revealed ? "Masquer" : "Afficher"} ${what}`, () => {
+    if (revealed) state.showEmpty.delete(group.key);
+    else state.showEmpty.add(group.key);
+    renderAgents({ agents: [...state.directory.values()], threads: currentThreadCount() });
+  });
+  toggle.setAttribute("aria-expanded", revealed ? "true" : "false");
+  item.appendChild(toggle);
+  return item;
+}
+
 function boxRow(box) {
   const item = node("li");
   const classes = ["agent", "box"];
+  if (isEmptyBox(box)) classes.push("is-empty");
   if (isSelected("box", box.id)) classes.push("is-selected");
   if (box.unread > 0) classes.push("has-unread");
   if (!box.registered) classes.push("agent--muted");
@@ -626,7 +690,7 @@ function messageRow(message, isLast) {
   if (message.subject && message.subject !== message.thread_title) {
     column.appendChild(node("p", "message-subject", message.subject));
   }
-  column.appendChild(node("p", "message-text", message.body || message.preview || ""));
+  column.appendChild(messageText(message));
 
   const foot = node("div", "message-foot");
   foot.appendChild(
@@ -648,6 +712,18 @@ function messageRow(message, isLast) {
   return item;
 }
 
+/**
+ * Le corps d'un message, rendu comme du markdown : c'est la langue dans laquelle les
+ * agents s'écrivent. L'aperçu, lui, arrive déjà débarrassé de sa syntaxe par le serveur
+ * et reste donc du texte simple.
+ */
+function messageText(message) {
+  if (!message.body) return node("p", "message-text", message.preview || "");
+  const container = node("div", "message-text markdown");
+  container.appendChild(renderMarkdown(message.body));
+  return container;
+}
+
 // --- Volet de détail -------------------------------------------------------
 
 function renderSheet(message) {
@@ -894,6 +970,7 @@ el.logout.addEventListener("click", async () => {
   await fetch("/ui/logout", { method: "POST", credentials: "same-origin" }).catch(() => null);
   state.selection = { kind: "all", key: null };
   state.expanded = new Set();
+  state.showEmpty = new Set();
   state.threadId = null;
   state.messageId = null;
   state.directory = new Map();

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

@@ -0,0 +1,340 @@
+/**
+ * Rendu Markdown de la console.
+ *
+ * Les agents s'écrivent en markdown : un corps de message affiché tel quel se lit mal
+ * (titres en dièses, listes en tirets, blocs de code noyés dans le texte). Ce module
+ * traduit ce markdown en DOM.
+ *
+ * Il construit des nœuds, jamais du HTML : tout texte venu d'un message passe par
+ * `textContent`, donc rien de ce qu'un agent écrit ne peut devenir une balise. Les seules
+ * URL suivies sont http, https et mailto ; le reste retombe en texte.
+ *
+ * La couverture est celle du markdown qu'écrivent les agents : titres, listes, citations,
+ * code, tableaux, filets, emphase, liens. Pas de HTML brut, pas de notes de bas de page.
+ */
+
+const FENCE = /^ {0,3}(`{3,}|~{3,})\s*([^`\s]*)\s*$/;
+const HEADING = /^ {0,3}(#{1,6})\s+(.*?)\s*#*\s*$/;
+const RULE = /^ {0,3}([-*_])[ \t]*(?:\1[ \t]*){2,}$/;
+const QUOTE = /^ {0,3}>[ \t]?(.*)$/;
+const BULLET = /^(\s*)([-*+])[ \t]+(.*)$/;
+const ORDERED = /^(\s*)(\d{1,9})[.)][ \t]+(.*)$/;
+const TABLE_RULE = /^ {0,3}\|?[ \t]*:?-+:?[ \t]*(\|[ \t]*:?-+:?[ \t]*)+\|?[ \t]*$/;
+const SAFE_HREF = /^(https?:\/\/|mailto:)/i;
+
+/** Rend un corps de message et renvoie un fragment prêt à être inséré. */
+export function renderMarkdown(source) {
+  const fragment = document.createDocumentFragment();
+  const lines = String(source ?? "")
+    .replace(/\r\n?/g, "\n")
+    .split("\n");
+  for (const child of parseBlocks(lines)) fragment.appendChild(child);
+  return fragment;
+}
+
+// --- Blocs -----------------------------------------------------------------
+
+function parseBlocks(lines) {
+  const out = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    if (!line.trim()) {
+      i += 1;
+      continue;
+    }
+
+    const fence = FENCE.exec(line);
+    if (fence) {
+      const closing = new RegExp(`^ {0,3}\\${fence[1][0]}{${fence[1].length},}\\s*$`);
+      const body = [];
+      i += 1;
+      while (i < lines.length && !closing.test(lines[i])) {
+        body.push(lines[i]);
+        i += 1;
+      }
+      i += 1; // la clôture, ou la fin du texte si le bloc n'a jamais été refermé
+      out.push(codeBlock(body.join("\n"), fence[2]));
+      continue;
+    }
+
+    const heading = HEADING.exec(line);
+    if (heading) {
+      const el = document.createElement(`h${heading[1].length}`);
+      el.className = "md-heading";
+      renderInline(heading[2], el);
+      out.push(el);
+      i += 1;
+      continue;
+    }
+
+    if (RULE.test(line)) {
+      const hr = document.createElement("hr");
+      hr.className = "md-rule";
+      out.push(hr);
+      i += 1;
+      continue;
+    }
+
+    if (QUOTE.test(line)) {
+      const inner = [];
+      while (i < lines.length && QUOTE.test(lines[i])) {
+        inner.push(QUOTE.exec(lines[i])[1]);
+        i += 1;
+      }
+      const quote = document.createElement("blockquote");
+      quote.className = "md-quote";
+      for (const child of parseBlocks(inner)) quote.appendChild(child);
+      out.push(quote);
+      continue;
+    }
+
+    if (BULLET.test(line) || ORDERED.test(line)) {
+      const [list, next] = parseList(lines, i);
+      out.push(list);
+      i = next;
+      continue;
+    }
+
+    if (opensTable(lines, i)) {
+      const [table, next] = parseTable(lines, i);
+      if (table) {
+        out.push(table);
+        i = next;
+        continue;
+      }
+    }
+
+    // Paragraphe : tout jusqu'à la ligne vide ou au premier bloc d'un autre genre.
+    const text = [];
+    while (i < lines.length && lines[i].trim() && !(text.length > 0 && startsBlock(lines, i))) {
+      text.push(lines[i].trim());
+      i += 1;
+    }
+    const paragraph = document.createElement("p");
+    paragraph.className = "md-p";
+    renderInline(text.join("\n"), paragraph);
+    out.push(paragraph);
+  }
+
+  return out;
+}
+
+/** Une ligne qui, au milieu d'un paragraphe, ouvre malgré tout un autre bloc. */
+function startsBlock(lines, i) {
+  const line = lines[i];
+  return (
+    FENCE.test(line) ||
+    HEADING.test(line) ||
+    RULE.test(line) ||
+    QUOTE.test(line) ||
+    BULLET.test(line) ||
+    ORDERED.test(line) ||
+    opensTable(lines, i)
+  );
+}
+
+function opensTable(lines, i) {
+  return i + 1 < lines.length && lines[i].includes("|") && TABLE_RULE.test(lines[i + 1]);
+}
+
+function codeBlock(code, language) {
+  const pre = document.createElement("pre");
+  pre.className = "md-code";
+  const el = document.createElement("code");
+  if (language) {
+    el.className = `language-${language}`;
+    pre.dataset.language = language;
+  }
+  el.textContent = code;
+  pre.appendChild(el);
+  return pre;
+}
+
+/**
+ * Une liste et tout ce qu'elle contient. L'indentation seule décide de l'imbrication :
+ * une ligne plus rentrée que sa puce appartient à l'article ouvert, et c'est en le
+ * relisant comme un texte à part entière que la sous-liste apparaît.
+ */
+function parseList(lines, start) {
+  const ordered = !BULLET.test(lines[start]);
+  const first = ordered ? ORDERED.exec(lines[start]) : BULLET.exec(lines[start]);
+  const indent = first[1].length;
+
+  const list = document.createElement(ordered ? "ol" : "ul");
+  list.className = "md-list";
+  if (ordered && Number(first[2]) !== 1) list.start = Number(first[2]);
+
+  let i = start;
+  while (i < lines.length) {
+    if (!lines[i].trim()) {
+      // Une ligne vide ne ferme la liste que si plus rien derrière ne lui appartient.
+      if (!continues(lines, i, indent)) break;
+      i += 1;
+      continue;
+    }
+
+    const match = ordered ? ORDERED.exec(lines[i]) : BULLET.exec(lines[i]);
+    if (!match || match[1].length !== indent) break;
+
+    const own = [match[3]];
+    i += 1;
+    while (i < lines.length && (lines[i].trim() ? leadingSpaces(lines[i]) > indent : continues(lines, i, indent + 1))) {
+      own.push(lines[i].slice(Math.min(leadingSpaces(lines[i]), indent + 2)));
+      i += 1;
+    }
+
+    const item = document.createElement("li");
+    item.className = "md-item";
+    const children = parseBlocks(own);
+    // Un article d'une seule ligne n'a pas besoin d'un paragraphe autour de son texte.
+    if (children.length === 1 && children[0].tagName === "P") item.append(...children[0].childNodes);
+    else for (const child of children) item.appendChild(child);
+    list.appendChild(item);
+  }
+
+  return [list, i];
+}
+
+/** Vrai si, après la ligne vide `i`, du texte reste rentré d'au moins `indent`. */
+function continues(lines, i, indent) {
+  for (let j = i + 1; j < lines.length; j += 1) {
+    if (!lines[j].trim()) continue;
+    return leadingSpaces(lines[j]) >= indent;
+  }
+  return false;
+}
+
+function leadingSpaces(line) {
+  return line.length - line.replace(/^[ \t]*/, "").length;
+}
+
+function parseTable(lines, start) {
+  const header = splitRow(lines[start]);
+  const alignments = splitRow(lines[start + 1]).map((cell) => {
+    const left = cell.startsWith(":");
+    const right = cell.endsWith(":");
+    if (left && right) return "center";
+    if (right) return "right";
+    return left ? "left" : null;
+  });
+  if (header.length !== alignments.length) return [null, start];
+
+  const table = document.createElement("table");
+  table.className = "md-table";
+  const thead = document.createElement("thead");
+  thead.appendChild(row(header, alignments, "th"));
+  table.appendChild(thead);
+
+  const tbody = document.createElement("tbody");
+  let i = start + 2;
+  while (i < lines.length && lines[i].trim() && lines[i].includes("|")) {
+    tbody.appendChild(row(splitRow(lines[i]), alignments, "td"));
+    i += 1;
+  }
+  table.appendChild(tbody);
+  return [table, i];
+}
+
+function splitRow(line) {
+  return line
+    .trim()
+    .replace(/^\|/, "")
+    .replace(/\|$/, "")
+    .split("|")
+    .map((cell) => cell.trim());
+}
+
+function row(cells, alignments, tag) {
+  const tr = document.createElement("tr");
+  alignments.forEach((align, index) => {
+    const cell = document.createElement(tag);
+    if (align) cell.style.textAlign = align;
+    renderInline(cells[index] ?? "", cell);
+    tr.appendChild(cell);
+  });
+  return tr;
+}
+
+// --- Enrichissements de ligne ----------------------------------------------
+
+/**
+ * Les motifs sont confrontés au texte à chaque tour, et celui qui accroche le plus tôt
+ * l'emporte. Le code passe en premier à égalité de position : son contenu ne doit plus
+ * être relu, un `**` dans un extrait de code est du code et non de la graisse.
+ */
+const INLINE = [
+  { re: /(`+)([\s\S]+?)\1/, build: (m) => textNode("code", "md-inline-code", m[2].trim()) },
+  // La cible tolère une paire de parenthèses : une URL en contient parfois, et le lien
+  // ne doit pas se refermer sur la première rencontrée.
+  { re: /!\[([^\]]*)\]\(((?:[^\s()]|\([^\s()]*\))+)(?:\s+"[^"]*")?\)/, build: (m) => image(m[1], m[2]) },
+  { re: /\[([^\]]*)\]\(((?:[^\s()]|\([^\s()]*\))+)(?:\s+"[^"]*")?\)/, build: (m) => link(m[2], m[1]) },
+  { re: /<((?:https?:\/\/|mailto:)[^\s>]+)>/, build: (m) => link(m[1], m[1]) },
+  { re: /(\*\*|__)(?=\S)([\s\S]+?\S)\1/, build: (m) => inlineNode("strong", "md-strong", m[2]) },
+  { re: /(?<![\w*])(\*|_)(?=\S)([^*_\n]+?\S)\1(?![\w*])/, build: (m) => inlineNode("em", "md-em", m[2]) },
+  { re: /~~(?=\S)([\s\S]+?\S)~~/, build: (m) => inlineNode("del", "md-del", m[1]) },
+  { re: /(?<![("[])https?:\/\/[^\s<>"'`]*[^\s<>"'`.,;:!?)\]]/, build: (m) => link(m[0], m[0]) },
+];
+
+function renderInline(text, parent) {
+  let rest = text;
+
+  while (rest) {
+    let best = null;
+    for (const pattern of INLINE) {
+      const match = pattern.re.exec(rest);
+      if (match && (!best || match.index < best.match.index)) best = { match, pattern };
+      if (best && best.match.index === 0) break;
+    }
+
+    if (!best) break;
+    appendText(parent, rest.slice(0, best.match.index));
+    parent.appendChild(best.pattern.build(best.match));
+    rest = rest.slice(best.match.index + best.match[0].length);
+  }
+
+  appendText(parent, rest);
+}
+
+/** Les retours à la ligne d'un paragraphe sont voulus : un agent aligne, il n'habille pas. */
+function appendText(parent, text) {
+  if (!text) return;
+  text.split("\n").forEach((part, index) => {
+    if (index > 0) parent.appendChild(document.createElement("br"));
+    if (part) parent.appendChild(document.createTextNode(part));
+  });
+}
+
+function textNode(tag, className, text) {
+  const el = document.createElement(tag);
+  el.className = className;
+  el.textContent = text;
+  return el;
+}
+
+function inlineNode(tag, className, text) {
+  const el = document.createElement(tag);
+  el.className = className;
+  renderInline(text, el);
+  return el;
+}
+
+function link(href, label) {
+  if (!SAFE_HREF.test(href)) return document.createTextNode(label || href);
+  const el = document.createElement("a");
+  el.className = "md-link";
+  el.href = href;
+  el.target = "_blank";
+  el.rel = "noopener noreferrer";
+  appendText(el, label || href);
+  return el;
+}
+
+/** Une image distante est montrée par son intitulé et son lien : la console ne va rien chercher dehors. */
+function image(alt, src) {
+  const el = link(src, alt || src);
+  if (el.nodeType === 1) el.classList.add("md-image-link");
+  return el;
+}

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

@@ -577,6 +577,42 @@ body {
   font-size: 11px;
 }
 
+/* Les boîtes vides sont repliées derrière ce bouton : le lien ferme la liste plutôt que
+   d'aligner des sessions qui n'ont jamais rien échangé. */
+.box-empty-toggle {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: var(--radius);
+  background: none;
+  font: inherit;
+  font-size: 12px;
+  color: var(--muted);
+  text-align: left;
+  cursor: pointer;
+}
+
+.box-empty-toggle:hover {
+  background: var(--border-soft);
+  color: var(--accent);
+}
+
+.box-empty-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+/* Une boîte vide reste lisible mais s'efface : elle est là pour être retrouvée, pas lue. */
+.box.is-empty .agent-name {
+  color: var(--muted);
+  font-weight: 400;
+}
+
+.box.is-empty .avatar {
+  opacity: 0.5;
+}
+
 .agents-foot {
   padding: 16px 20px;
   font-size: 12px;
@@ -1003,6 +1039,151 @@ body {
   overflow-wrap: anywhere;
 }
 
+/* Le markdown est déjà mis en forme : plus besoin de conserver les blancs du source. */
+.message-text.markdown {
+  white-space: normal;
+}
+
+/* --- Corps de message rendu en markdown --- */
+
+.markdown > *:first-child {
+  margin-top: 0;
+}
+
+.markdown > *:last-child {
+  margin-bottom: 0;
+}
+
+.md-p {
+  margin: 0 0 8px;
+}
+
+.markdown .md-heading {
+  margin: 14px 0 6px;
+  line-height: 1.35;
+  font-weight: 600;
+}
+
+.markdown h1.md-heading {
+  font-size: 17px;
+}
+
+.markdown h2.md-heading {
+  font-size: 15px;
+}
+
+.markdown h3.md-heading,
+.markdown h4.md-heading,
+.markdown h5.md-heading,
+.markdown h6.md-heading {
+  font-size: 14px;
+}
+
+.markdown h4.md-heading,
+.markdown h5.md-heading,
+.markdown h6.md-heading {
+  color: var(--muted);
+}
+
+.md-list {
+  margin: 0 0 8px;
+  padding-left: 20px;
+}
+
+.md-item {
+  margin: 2px 0;
+}
+
+/* Un article qui porte une sous-liste passe par un paragraphe : il ne doit pas s'en écarter. */
+.md-item > .md-p {
+  margin-bottom: 2px;
+}
+
+.md-list .md-list {
+  margin: 2px 0;
+}
+
+.md-quote {
+  margin: 0 0 8px;
+  padding: 2px 0 2px 10px;
+  border-left: 3px solid var(--border);
+  color: var(--muted);
+}
+
+.md-rule {
+  margin: 12px 0;
+  border: 0;
+  border-top: 1px solid var(--border);
+}
+
+/* La langue annoncée par l'agent, posée en coin du bloc : elle dit ce qu'on lit. */
+.md-code[data-language]::before {
+  content: attr(data-language);
+  display: block;
+  margin-bottom: 6px;
+  color: var(--muted);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.md-code {
+  margin: 0 0 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius);
+  background: var(--neutral-soft);
+  overflow-x: auto;
+}
+
+.md-code code {
+  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  white-space: pre;
+}
+
+.md-inline-code {
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--neutral-soft);
+  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  overflow-wrap: anywhere;
+}
+
+.md-link {
+  color: var(--accent);
+  overflow-wrap: anywhere;
+}
+
+.md-strong {
+  font-weight: 600;
+}
+
+.md-del {
+  color: var(--muted);
+}
+
+.md-table {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  margin: 0 0 8px;
+  border-collapse: collapse;
+  overflow-x: auto;
+}
+
+.md-table th,
+.md-table td {
+  padding: 5px 10px;
+  border: 1px solid var(--border-soft);
+  text-align: left;
+  vertical-align: top;
+}
+
+.md-table th {
+  background: var(--neutral-soft);
+  font-weight: 600;
+}
+
 .message-foot {
   display: flex;
   align-items: center;

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const APP_VERSION = "1.0.14";
+export declare const APP_VERSION = "1.0.16";

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imenam/mcp-messenger",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "main": "dist/src/index.js",
   "scripts": {
     "test": "npm run build && vitest run",
@@ -49,6 +49,7 @@
     "@types/express": "^5.0.6",
     "@types/node": "^22.20.1",
     "@vitest/coverage-v8": "^3.2.7",
+    "jsdom": "^29.1.1",
     "typescript": "^5.9.3",
     "vitest": "^3.2.7"
   },