@imenam/mcp-messenger 1.0.11 → 1.0.13

package/README.md

@@ -340,9 +340,12 @@ configuration partagent alors la même boîte. Utile pour un service unique et s
 organisés autour du fil — l'unité d'une correspondance, celle qui porte le sujet, les deux
 correspondants et l'état de lecture :
 
-- **une colonne d'agents** : un par boîte, avec son nom d'agent, ce dont la session
-  s'occupe et son nombre de messages non lus. La sélection filtre les fils sur cette
-  boîte ; la colonne se replie sur ses seuls avatars quand la place manque ;
+- **une colonne d'agents à deux niveaux** : un agent tient une boîte par session ouverte,
+  la colonne l'écrit donc ainsi. Chaque agent est **replié par défaut** et se déplie d'un
+  chevron sur ses boîtes ; une boîte que son agent n'a pas nommée s'affiche à son adresse,
+  la seule chose qui la distingue alors de ses sœurs. Cliquer l'agent filtre les fils sur
+  **toutes ses sessions**, cliquer une boîte sur **cette seule session**. La colonne se
+  replie sur les seuls avatars d'agents quand la place manque ;
 - **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 ;
@@ -357,9 +360,11 @@ correspondants et l'état de lecture :
 - un rafraîchissement automatique toutes les 5 secondes, débrayable.
 
 **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 deux endroits où elle
-sert vraiment : le volet de détail et l'en-tête d'un fil, chaque fois avec un bouton de
-copie. Une boîte jamais connectée se distingue à son avatar en contour et à la mention
+`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
+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.
 
 À l'ouverture, la console demande `MESSENGER_ADMIN_TOKEN` dans un formulaire. Le serveur
@@ -440,7 +445,7 @@ la console (cookie), qui elle n'ouvre rien d'autre.
 | `GET` `POST` `DELETE` | `/api/folders[/:name]` | Gérer les dossiers |
 | `GET` | `/api/wait` | Attente longue (`timeout_seconds`, `folder`, `watcher`) |
 | `GET` | `/admin/overview` · `/admin/messages[/:id]` | Supervision, lecture seule |
-| `GET` | `/admin/threads` | Fils du serveur entier (`agent`, `search`, `unread_only`, `priority`, `limit`, `offset`) |
+| `GET` | `/admin/threads` | Fils du serveur entier (`agent` — une ou plusieurs adresses séparées par des virgules —, `search`, `unread_only`, `priority`, `limit`, `offset`) |
 | `GET` | `/admin/threads/:id` | Fil complet, corps inclus |
 | `POST` | `/ui/login` · `/ui/logout` | Session de la console (`{ "token": … }` → cookie `HttpOnly`) |
 

package/dist/src/core/store.d.ts

@@ -104,7 +104,14 @@ export declare class MessageStore extends EventEmitter<StoreEvents> {
      */
     listAllThreadsAdmin(opts?: {
         search?: string;
-        agent?: string;
+        /**
+         * Adresses de boîtes : un fil est gardé dès que l'une d'elles y participe.
+         *
+         * Une liste, et non une seule adresse, parce qu'un agent tient autant de boîtes
+         * qu'il a de sessions ouvertes : « les fils du projet Documentor » se demande en
+         * passant les adresses de toutes ses sessions d'un coup.
+         */
+        agents?: string[];
         unread_only?: boolean;
         priority?: Priority;
         limit?: number;

package/dist/src/core/store.js

@@ -626,12 +626,13 @@ export class MessageStore extends EventEmitter {
         const where = ["1 = 1"];
         const having = [];
         const params = [];
-        // Un agent « participe » au fil dès qu'il y a une livraison, qu'il ait écrit ou reçu :
-        // c'est la correspondance qui est filtrée, pas les messages qu'il a signés.
-        if (opts.agent) {
+        // Une boîte « participe » au fil dès qu'il y a une livraison, qu'elle ait écrit ou
+        // reçu : c'est la correspondance qui est filtrée, pas les messages qu'elle a signés.
+        const agents = dedupe((opts.agents ?? []).map((id) => normalizeAgentId(id)).filter(Boolean));
+        if (agents.length > 0) {
             where.push(`EXISTS (SELECT 1 FROM deliveries d JOIN messages mp ON mp.id = d.message_id
-                  WHERE mp.thread_id = m.thread_id AND d.agent_id = ?)`);
-            params.push(opts.agent);
+                  WHERE mp.thread_id = m.thread_id AND d.agent_id IN (${agents.map(() => "?").join(",")}))`);
+            params.push(...agents);
         }
         // La recherche porte sur le fil entier : son nom, sa description, et le texte de
         // n'importe lequel de ses messages. Un fil non nommé reste ainsi trouvable.

package/dist/src/server/app.js

@@ -81,7 +81,9 @@ const waitQuerySchema = z.object({
 const loginSchema = z.object({ token: z.string().min(1).max(1024) });
 const adminThreadsSchema = z.object({
     search: z.string().trim().min(1).optional(),
-    agent: z.string().trim().min(1).optional(),
+    // Une ou plusieurs adresses, séparées par des virgules : un agent tient une boîte par
+    // session ouverte, et la console filtre sur toutes celles d'un projet à la fois.
+    agent: z.string().trim().min(1).max(4096).optional(),
     unread_only: z.enum(["true", "1"]).optional(),
     priority: z.enum(PRIORITIES).optional(),
     limit: z.coerce.number().int().min(1).max(100).optional(),
@@ -176,7 +178,11 @@ export function createApp({ store, config }) {
         res.json({
             threads: store.listAllThreadsAdmin({
                 search: query.search,
-                agent: query.agent,
+                agents: query.agent
+                    ?.split(",")
+                    .map((id) => id.trim())
+                    .filter(Boolean)
+                    .slice(0, 100),
                 unread_only: query.unread_only !== undefined,
                 priority: query.priority,
                 limit: query.limit,

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

@@ -19,11 +19,20 @@ const ICONS = {
   clock: ["M12 6v6l4 2", "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z"],
   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"],
 };
 
 const state = {
-  /** Adresse de la boîte sur laquelle la liste des fils est filtrée, ou null. */
-  agent: null,
+  /**
+   * Ce sur quoi la liste des fils est filtrée.
+   *
+   * `{ kind: "all" }` ne filtre rien ; `{ kind: "agent", key }` retient toutes les boîtes
+   * d'un projet ; `{ kind: "box", key }` une seule session. Deux niveaux, parce qu'un
+   * agent tient une boîte par session ouverte et que les deux questions se posent.
+   */
+  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(),
   /** "all" | "unread" | "high" — les puces au-dessus de la liste des fils. */
   filter: "all",
   search: "",
@@ -33,6 +42,8 @@ const state = {
   collapsed: false,
   /** Annuaire des boîtes, indexé par adresse : rempli par chaque `/admin/overview`. */
   directory: new Map(),
+  /** Boîtes regroupées par nom d'agent, dans l'ordre de l'annuaire. */
+  groups: [],
 };
 
 const el = {
@@ -126,47 +137,78 @@ function tag(className, label, iconName) {
  * Deux noms par boîte, deux questions : l'agent dit d'où l'on écrit (le projet), la boîte
  * de quoi cette session s'occupe. La console montre les deux, et n'affiche l'adresse que
  * là où elle sert à être copiée.
+ *
+ * Un nom d'agent ne désigne personne : plusieurs sessions du même projet le portent. Dès
+ * qu'il est partagé, `name` lui accole le nom de la boîte — sans quoi un fil afficherait
+ * « Documentor Dev → Documentor Dev » sans dire de quelles sessions il parle.
  */
 function party(agentId) {
   const known = state.directory.get(agentId);
+  const agentName = (known && known.agent_name) || null;
+  const boxName = (known && known.display_name) || null;
+  const shared = agentName ? state.groups.some((g) => g.key === agentName && g.boxes.length > 1) : false;
+  // Parenthèses, et non un séparateur plat : les participants d'un fil sont eux-mêmes
+  // listés avec un point médian, qui ne doit pas se confondre avec cette précision.
+  const name = agentName
+    ? shared
+      ? `${agentName} (${boxName || shortAddress(agentId)})`
+      : agentName
+    : shortAddress(agentId);
   return {
     id: agentId,
-    name: (known && known.agent_name) || shortAddress(agentId),
-    box: (known && known.display_name) || null,
+    name,
+    agentName,
+    box: boxName,
     registered: !known || known.registered,
     unread: (known && known.unread) || 0,
   };
 }
 
+/**
+ * Nom de la boîte, ou son adresse à défaut.
+ *
+ * Une boîte n'est nommée que si l'agent l'a fait lui-même (`rename_mailbox`) ; tant qu'il
+ * ne l'a pas fait, seule l'adresse la distingue de ses sœurs, et c'est donc elle qu'on lit.
+ */
+function boxLabel(box) {
+  return box.display_name || box.id;
+}
+
 function shortAddress(agentId) {
   const id = String(agentId || "");
   return id.length > 12 ? `${id.slice(0, 10)}…` : id || "—";
 }
 
-function initials(agentId) {
-  const name = party(agentId).name;
-  const words = name.split(/[\s_-]+/).filter(Boolean);
-  const letters = words.length >= 2 ? words[0][0] + words[1][0] : name.slice(0, 2);
+function initials(label) {
+  const words = String(label).split(/[\s_·-]+/).filter(Boolean);
+  const letters = words.length >= 2 ? words[0][0] + words[1][0] : String(label).slice(0, 2);
   return letters.toUpperCase();
 }
 
-/** Teinte stable : la même adresse donne toujours la même couleur d'avatar. */
-function colorIndex(agentId) {
+/** Teinte stable : la même graine donne toujours la même couleur d'avatar. */
+function colorIndex(seed) {
   let hash = 0;
-  for (const char of String(agentId)) hash = (hash * 31 + char.charCodeAt(0)) % 100003;
+  for (const char of String(seed)) hash = (hash * 31 + char.charCodeAt(0)) % 100003;
   return hash % AVATAR_COLORS;
 }
 
-function avatar(agentId, extraClass) {
-  const who = party(agentId);
+/** Pastille d'initiales. `seed` teinte, `label` écrit, `title` explique au survol. */
+function avatarFor(seed, label, title, extraClass, absent) {
   const classes = ["avatar"];
   if (extraClass) classes.push(extraClass);
-  classes.push(who.registered ? `avatar--c${colorIndex(agentId)}` : "avatar--absent");
-  const element = node("span", classes.join(" "), initials(agentId));
-  element.title = who.box ? `${who.name} — ${who.box}` : who.name;
+  classes.push(absent ? "avatar--absent" : `avatar--c${colorIndex(seed)}`);
+  const element = node("span", classes.join(" "), initials(label));
+  element.title = title;
   return element;
 }
 
+function avatar(agentId, extraClass) {
+  const who = party(agentId);
+  const label = who.box || who.agentName || shortAddress(agentId);
+  const title = [who.agentName, who.box, agentId].filter(Boolean).join(" — ");
+  return avatarFor(agentId, label, title, extraClass, !who.registered);
+}
+
 // --- Dates -----------------------------------------------------------------
 
 function formatDate(iso) {
@@ -229,71 +271,205 @@ function setStatus(kind, label) {
 
 // --- Colonne des agents ----------------------------------------------------
 
+/**
+ * Regroupe les boîtes sous leur nom d'agent.
+ *
+ * L'agent dit d'où l'on écrit, la boîte quelle session parle : un projet qui a deux
+ * sessions ouvertes tient deux boîtes, et la colonne doit montrer cette imbrication plutôt
+ * que d'aligner des boîtes qui portent toutes le même nom. Une boîte sans nom d'agent est
+ * son propre groupe : rien ne permet de la rattacher à un projet.
+ *
+ * L'annuaire arrive déjà classé par activité : le groupe hérite du rang de sa boîte la
+ * plus récente, sans nouveau tri.
+ */
+function groupByAgent(boxes) {
+  const groups = new Map();
+  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 });
+    }
+    const group = groups.get(key);
+    group.boxes.push(box);
+    group.unread += box.unread;
+  }
+  return [...groups.values()];
+}
+
+function isSelected(kind, key) {
+  return state.selection.kind === kind && state.selection.key === key;
+}
+
+function select(kind, key) {
+  // Recliquer sur la sélection courante la relâche : le filtre ne s'emprisonne pas.
+  state.selection = isSelected(kind, key) ? { kind: "all", key: null } : { kind, key };
+  state.threadId = null;
+  state.messageId = null;
+  el.sheet.hidden = true;
+  el.console.classList.remove("has-sheet");
+  refresh();
+}
+
 function renderAgents(overview) {
-  state.directory = new Map(overview.agents.map((agent) => [agent.id, agent]));
+  state.directory = new Map(overview.agents.map((box) => [box.id, box]));
+  state.groups = groupByAgent(overview.agents);
   el.agentsFoot.textContent = [
-    plural(overview.agents.length, "agent"),
-    plural(overview.messages, "message"),
+    plural(state.groups.length, "agent"),
+    plural(overview.agents.length, "boîte"),
     plural(overview.threads, "fil"),
   ].join(" · ");
 
   el.agents.replaceChildren();
-  el.agents.appendChild(agentRow(null, overview));
-  for (const agent of overview.agents) el.agents.appendChild(agentRow(agent, overview));
+  el.agents.appendChild(allRow(overview));
+  for (const group of state.groups) el.agents.appendChild(groupRow(group));
 }
 
-function agentRow(agent, overview) {
+function allRow(overview) {
   const item = node("li");
-  const selected = agent ? state.agent === agent.id : state.agent === null;
-  const unread = agent ? agent.unread : overview.agents.reduce((total, a) => total + a.unread, 0);
+  const unread = overview.agents.reduce((total, box) => total + box.unread, 0);
+  const row = node("button", `agent${isSelected("all", null) ? " is-selected" : ""}`);
+  row.type = "button";
+
+  const star = node("span", "avatar avatar--absent", "∗");
+  star.title = "Tous les agents";
+  row.appendChild(star);
+
+  const text = node("div", "agent-text");
+  text.appendChild(node("div", "agent-name", "Tous les agents"));
+  text.appendChild(node("div", "agent-box", plural(overview.threads, "fil")));
+  row.appendChild(text);
+  if (unread > 0) row.appendChild(node("span", "count count--accent", String(unread)));
+
+  row.addEventListener("click", () => select("all", null));
+  item.appendChild(row);
+  return item;
+}
+
+/**
+ * Un agent et, dépliées sous lui, ses boîtes.
+ *
+ * Deux zones de clic, deux gestes distincts : le chevron ouvre ou ferme, le nom filtre sur
+ * l'ensemble des sessions du projet. Filtrer déplie au passage, pour que la sélection
+ * montre toujours ce qu'elle recouvre.
+ */
+function groupRow(group) {
+  const item = node("li", "agent-group");
+  const open = state.expanded.has(group.key);
+
+  const header = node("div", `agent-head${open ? " is-open" : ""}`);
+
+  const toggle = node("button", "agent-toggle");
+  toggle.type = "button";
+  toggle.setAttribute("aria-expanded", open ? "true" : "false");
+  toggle.setAttribute("aria-label", `${open ? "Replier" : "Déplier"} les boîtes de ${group.name}`);
+  toggle.appendChild(icon("chevron"));
+  toggle.addEventListener("click", () => {
+    if (open) state.expanded.delete(group.key);
+    else state.expanded.add(group.key);
+    renderAgents({ agents: [...state.directory.values()], threads: currentThreadCount() });
+  });
+  header.appendChild(toggle);
 
   const classes = ["agent"];
-  if (selected) classes.push("is-selected");
-  if (unread > 0) classes.push("has-unread");
-  if (agent && !agent.registered) classes.push("agent--muted");
+  if (isSelected("agent", group.key)) classes.push("is-selected");
+  if (group.unread > 0) classes.push("has-unread");
+  if (group.boxes.every((box) => !box.registered)) classes.push("agent--muted");
   const row = node("button", classes.join(" "));
   row.type = "button";
+  row.appendChild(
+    avatarFor(
+      group.key,
+      group.name,
+      group.name,
+      null,
+      group.boxes.every((box) => !box.registered)
+    )
+  );
 
-  if (agent) {
-    row.appendChild(avatar(agent.id));
-  } else {
-    const all = node("span", "avatar avatar--absent", "∗");
-    all.title = "Tous les agents";
-    row.appendChild(all);
+  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")));
+  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.addEventListener("click", () => {
+    state.expanded.add(group.key);
+    select("agent", group.key);
+  });
+  header.appendChild(row);
+  item.appendChild(header);
+
+  if (open) {
+    const list = node("ul", "box-list");
+    for (const box of group.boxes) list.appendChild(boxRow(box));
+    item.appendChild(list);
   }
+  return item;
+}
+
+function boxRow(box) {
+  const item = node("li");
+  const classes = ["agent", "box"];
+  if (isSelected("box", box.id)) classes.push("is-selected");
+  if (box.unread > 0) classes.push("has-unread");
+  if (!box.registered) classes.push("agent--muted");
+  const row = node("button", classes.join(" "));
+  row.type = "button";
+
+  const label = boxLabel(box);
+  row.appendChild(avatarFor(box.id, label, box.id, "avatar--sm", !box.registered));
 
   const text = node("div", "agent-text");
-  text.appendChild(node("div", "agent-name", agent ? party(agent.id).name : "Tous les agents"));
-  if (agent) {
-    // Une boîte jamais connectée n'a pas de nom : le dire vaut mieux qu'une ligne vide.
-    const boxName = agent.display_name || (agent.registered ? "boîte sans nom" : "jamais connectée");
-    const box = node("div", "agent-box", boxName);
-    if (!agent.display_name) box.classList.add("is-absent");
-    text.appendChild(box);
-  } else {
-    text.appendChild(node("div", "agent-box", plural(overview.threads, "fil")));
-  }
+  // Sans nom donné par l'agent, l'adresse tient lieu de nom : elle est alors la seule
+  // chose qui distingue cette session de ses sœurs.
+  const name = node("div", "agent-name", label);
+  if (!box.display_name) name.classList.add("mono", "is-absent");
+  text.appendChild(name);
+  text.appendChild(
+    node(
+      "div",
+      "agent-box",
+      box.registered ? `${plural(box.sent, "envoyé")} · ${plural(box.received, "reçu")}` : "jamais connectée"
+    )
+  );
   row.appendChild(text);
 
-  if (unread > 0) row.appendChild(node("span", "count count--accent", String(unread)));
-  row.title = agent ? agent.id : "Tous les agents";
-
-  row.addEventListener("click", () => {
-    const next = agent ? agent.id : null;
-    state.agent = state.agent === next ? null : next;
-    state.threadId = null;
-    state.messageId = null;
-    refresh();
-  });
+  if (box.unread > 0) row.appendChild(node("span", "count count--accent", String(box.unread)));
+  row.title = box.id;
+  row.addEventListener("click", () => select("box", box.id));
   item.appendChild(row);
   return item;
 }
 
+/** Nombre de fils affiché en pied de colonne, conservé entre deux rendus locaux. */
+function currentThreadCount() {
+  return state.threadCount || 0;
+}
+
+/** Adresses que la sélection courante recouvre, ou null quand elle ne filtre rien. */
+function selectedAddresses() {
+  if (state.selection.kind === "box") return [state.selection.key];
+  if (state.selection.kind === "agent") {
+    const group = state.groups.find((g) => g.key === state.selection.key);
+    return group ? group.boxes.map((box) => box.id) : [];
+  }
+  return null;
+}
+
+function selectionLabel() {
+  if (state.selection.kind === "box") {
+    const box = state.directory.get(state.selection.key);
+    return box ? boxLabel(box) : shortAddress(state.selection.key);
+  }
+  if (state.selection.kind === "agent") return state.selection.key;
+  return "Toutes les boîtes";
+}
+
 // --- Colonne des fils ------------------------------------------------------
 
 function renderThreads(threads) {
-  const scope = state.agent ? party(state.agent).name : "Toutes les boîtes";
-  el.threadsScope.textContent = `${scope} · ${plural(threads.length, "fil")}`;
+  state.threadCount = threads.length;
+  el.threadsScope.textContent = `${selectionLabel()} · ${plural(threads.length, "fil")}`;
 
   el.threads.replaceChildren();
   if (threads.length === 0) {
@@ -310,7 +486,8 @@ function emptyReason() {
   if (state.search) return "Aucun fil ne correspond à cette recherche.";
   if (state.filter === "unread") return "Tout est lu de ce côté.";
   if (state.filter === "high") return "Aucun message en priorité haute.";
-  if (state.agent) return "Cette boîte n'a encore échangé avec personne.";
+  if (state.selection.kind === "box") return "Cette boîte n'a encore échangé avec personne.";
+  if (state.selection.kind === "agent") return "Aucune session de cet agent n'a encore échangé.";
   return "Aucun agent n'a encore écrit sur ce serveur.";
 }
 
@@ -596,7 +773,8 @@ async function refresh(options) {
     const [overview, list] = await Promise.all([
       api("/admin/overview"),
       api("/admin/threads", {
-        agent: state.agent,
+        // Une sélection d'agent recouvre toutes ses sessions : la route prend la liste.
+        agent: (selectedAddresses() || []).join(","),
         search: state.search,
         unread_only: state.filter === "unread" ? "true" : undefined,
         priority: state.filter === "high" ? "high" : undefined,
@@ -682,10 +860,12 @@ el.loginForm.addEventListener("submit", async (event) => {
 
 el.logout.addEventListener("click", async () => {
   await fetch("/ui/logout", { method: "POST", credentials: "same-origin" }).catch(() => null);
-  state.agent = null;
+  state.selection = { kind: "all", key: null };
+  state.expanded = new Set();
   state.threadId = null;
   state.messageId = null;
   state.directory = new Map();
+  state.groups = [];
   el.sheet.hidden = true;
   el.console.classList.remove("has-sheet");
   el.agents.replaceChildren();

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

@@ -503,6 +503,80 @@ body {
   color: var(--muted);
 }
 
+/* --- Agent et ses boîtes --------------------------------------------------- */
+
+/* Deux zones de clic sur une même ligne : le chevron ouvre, le reste filtre. */
+.agent-head {
+  display: flex;
+  align-items: center;
+}
+
+.agent-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  flex: none;
+}
+
+.agent-toggle:hover {
+  color: var(--text);
+}
+
+.agent-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.agent-toggle .icon {
+  width: 14px;
+  height: 14px;
+  transition: transform 0.15s;
+}
+
+.agent-head.is-open .agent-toggle .icon {
+  transform: rotate(90deg);
+}
+
+/* Le chevron mange sa gouttière : la ligne d'agent reste alignée sur « Tous les agents ». */
+.agent-head .agent {
+  padding-left: 4px;
+}
+
+/* Les boîtes vivent sous leur agent : un cran d'indentation et un filet de rattachement. */
+.box-list {
+  list-style: none;
+  margin: 0 0 4px 22px;
+  padding: 0 0 0 14px;
+  border-left: 1px solid var(--border);
+}
+
+.box {
+  padding: 7px 10px;
+}
+
+.box .agent-name {
+  font-weight: 500;
+  font-size: 13px;
+}
+
+/* Une boîte sans nom se lit à son adresse : en mono, pour ce que c'est. */
+.box .agent-name.is-absent {
+  font-weight: 400;
+  color: var(--muted);
+}
+
+.box .agent-box {
+  font-size: 11px;
+}
+
 .agents-foot {
   padding: 16px 20px;
   font-size: 12px;
@@ -574,10 +648,13 @@ body {
   color: var(--accent);
 }
 
-/* Colonne repliée : il ne reste que les avatars, chacun avec son nom en info-bulle. */
+/* Colonne repliée : il ne reste que les avatars d'agents, nom en info-bulle. La
+   hiérarchie n'y tient pas — les boîtes se retrouvent en dépliant la colonne. */
 .is-collapsed .agents-head,
 .is-collapsed .agent-text,
 .is-collapsed .agents-foot,
+.is-collapsed .agent-toggle,
+.is-collapsed .box-list,
 .is-collapsed .agent .count {
   display: none;
 }
@@ -591,6 +668,10 @@ body {
   justify-content: center;
 }
 
+.is-collapsed .agent-head .agent {
+  padding-left: 8px;
+}
+
 /* Le badge des non-lus survit au repli, réduit à une pastille sur l'avatar. */
 .is-collapsed .agent.has-unread .avatar {
   box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const APP_VERSION = "1.0.11";
+export declare const APP_VERSION = "1.0.13";

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

package/package.json

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