@imenam/mcp-messenger 1.0.18 → 1.0.20

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

@@ -1,1172 +1,1444 @@
-// Console de supervision : les routes /admin du serveur, en lecture — à une exception
-// près, la purge des boîtes inactives, seule commande de cette page qui écrit, et qui
-// détruit. Elle est donc tenue à part : un aperçu, puis une confirmation, et rien ne part
-// que le serveur n'ait redemandé sa date.
-//
-// 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. 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
-// l'avatar, pour que la même boîte garde la même teinte d'un écran à l'autre.
-const AVATAR_COLORS = 8;
-
-const ICONS = {
-  copy: ["M9 3h9a2 2 0 0 1 2 2v9", "M5 7h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z"],
-  check: ["M20 6 9 17l-5-5"],
-  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 = {
-  /**
-   * 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(),
-  /** 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: "",
-  threadId: null,
-  /** Message dont le volet de détail est ouvert, ou null si le volet est fermé. */
-  messageId: null,
-  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 = {
-  status: document.getElementById("status"),
-  statusLabel: document.getElementById("status-label"),
-  searchBox: document.getElementById("search-box"),
-  search: document.getElementById("search"),
-  controls: document.getElementById("controls"),
-  autoRefresh: document.getElementById("auto-refresh"),
-  refresh: document.getElementById("refresh"),
-  logout: document.getElementById("logout"),
-  login: document.getElementById("login"),
-  loginForm: document.getElementById("login-form"),
-  loginOrigin: document.getElementById("login-origin"),
-  tokenField: document.querySelector("#login-form .field"),
-  token: document.getElementById("token"),
-  tokenReveal: document.getElementById("token-reveal"),
-  tokenError: document.getElementById("token-error"),
-  console: document.getElementById("console"),
-  agentsPane: document.getElementById("agents-pane"),
-  agents: document.getElementById("agents"),
-  agentsFoot: document.getElementById("agents-foot"),
-  collapse: document.getElementById("collapse"),
-  threadsScope: document.getElementById("threads-scope"),
-  chips: document.getElementById("chips"),
-  threads: document.getElementById("threads"),
-  reader: document.getElementById("reader"),
-  sheet: document.getElementById("sheet"),
-  purge: document.getElementById("purge"),
-  purgeOpen: document.getElementById("purge-open"),
-  purgeClose: document.getElementById("purge-close"),
-  purgeCancel: document.getElementById("purge-cancel"),
-  purgeBefore: document.getElementById("purge-before"),
-  purgePreview: document.getElementById("purge-preview"),
-  purgeResult: document.getElementById("purge-result"),
-  purgeConfirm: document.getElementById("purge-confirm"),
-};
-
-// --- Fabrique de noeuds ----------------------------------------------------
-
-function node(tag, className, text) {
-  const element = document.createElement(tag);
-  if (className) element.className = className;
-  if (text !== undefined) element.textContent = text;
-  return element;
-}
-
-function icon(name) {
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("class", "icon");
-  svg.setAttribute("viewBox", "0 0 24 24");
-  svg.setAttribute("aria-hidden", "true");
-  for (const d of ICONS[name]) {
-    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-    path.setAttribute("d", d);
-    svg.appendChild(path);
-  }
-  return svg;
-}
-
-function button(className, label, onClick) {
-  const element = node("button", className, label);
-  element.type = "button";
-  element.addEventListener("click", onClick);
-  return element;
-}
-
-/** Bouton de copie : les adresses et les identifiants ne se recopient pas à la main. */
-function copyButton(value, label) {
-  const element = node("button", "copy");
-  element.type = "button";
-  element.title = label;
-  element.setAttribute("aria-label", label);
-  element.appendChild(icon("copy"));
-  element.addEventListener("click", async (event) => {
-    event.stopPropagation();
-    try {
-      await navigator.clipboard.writeText(value);
-      element.replaceChildren(icon("check"));
-      setTimeout(() => element.replaceChildren(icon("copy")), 1200);
-    } catch {
-      // Presse-papiers refusé (contexte non sécurisé, permission) : la valeur reste
-      // affichée à côté, donc sélectionnable. Rien d'autre à signaler.
-    }
-  });
-  return element;
-}
-
-function tag(className, label, iconName) {
-  const element = node("span", className);
-  if (iconName) element.appendChild(icon(iconName));
-  element.appendChild(document.createTextNode(label));
-  return element;
-}
-
-// --- Annuaire des boîtes ---------------------------------------------------
-
-/**
- * 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,
-    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(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 graine donne toujours la même couleur d'avatar. */
-function colorIndex(seed) {
-  let hash = 0;
-  for (const char of String(seed)) hash = (hash * 31 + char.charCodeAt(0)) % 100003;
-  return hash % AVATAR_COLORS;
-}
-
-/** 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(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) {
-  const date = new Date(iso);
-  return Number.isNaN(date.getTime()) ? String(iso) : date.toLocaleString();
-}
-
-/** Heure seule aujourd'hui, « hier » la veille, date courte au-delà : la liste doit se survoler. */
-function formatShort(iso) {
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) return String(iso);
-  const time = date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-  const day = new Date(date.getFullYear(), date.getMonth(), date.getDate());
-  const today = new Date();
-  const midnight = new Date(today.getFullYear(), today.getMonth(), today.getDate());
-  const days = Math.round((midnight - day) / 86400000);
-  if (days === 0) return time;
-  if (days === 1) return `hier ${time}`;
-  return date.toLocaleDateString([], { day: "2-digit", month: "2-digit" });
-}
-
-/** Jour seul, sans heure : une purge se raisonne en jours, pas en minutes. */
-function formatDay(iso) {
-  const date = new Date(iso);
-  return Number.isNaN(date.getTime()) ? String(iso) : date.toLocaleDateString();
-}
-
-function plural(count, singular, pluralForm) {
-  return `${count} ${count > 1 ? pluralForm || `${singular}s` : singular}`;
-}
-
-// --- Accès au serveur ------------------------------------------------------
-
-async function api(path, params) {
-  const url = new URL(path, window.location.origin);
-  for (const [key, value] of Object.entries(params || {})) {
-    if (value !== undefined && value !== null && value !== "") url.searchParams.set(key, value);
-  }
-  const response = await fetch(url, { headers: { accept: "application/json" }, credentials: "same-origin" });
-  if (response.status === 401) {
-    setLoggedIn(false);
-    throw new Error("unauthorized");
-  }
-  if (!response.ok) {
-    const payload = await response.json().catch(() => ({}));
-    throw new Error(payload.error || response.statusText);
-  }
-  return response.json();
-}
-
-/** Envoi d'une action à la console. La seule qui existe supprime : elle passe par ici. */
-async function post(path, body) {
-  const response = await fetch(path, {
-    method: "POST",
-    headers: { "content-type": "application/json", accept: "application/json" },
-    credentials: "same-origin",
-    body: JSON.stringify(body),
-  });
-  if (response.status === 401) {
-    setLoggedIn(false);
-    throw new Error("unauthorized");
-  }
-  const payload = await response.json().catch(() => ({}));
-  if (!response.ok) throw new Error(payload.error || response.statusText);
-  return payload;
-}
-
-function setLoggedIn(loggedIn) {
-  el.login.hidden = loggedIn;
-  el.console.hidden = !loggedIn;
-  el.controls.hidden = !loggedIn;
-  el.searchBox.hidden = !loggedIn;
-  if (!loggedIn) {
-    setStatus("idle", "non connecté");
-    el.token.focus();
-  }
-}
-
-function setStatus(kind, label) {
-  el.status.className = `pill pill--${kind}`;
-  el.statusLabel.textContent = 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, 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(byBox);
-  // Le classement est refait ici plutôt que laissé à l'ordre d'arrivée de l'annuaire :
-  // 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 || "";
-}
-
-/**
- * Compare deux dates ISO, la plus récente d'abord.
- *
- * Les dates ISO se comparent comme du texte, et la chaîne vide — une boîte qui n'a jamais
- * vécu — est plus petite que toute date : elle finit donc en queue, sans cas particulier.
- */
-function compareActivity(left, right) {
-  if (left === right) return 0;
-  return left < right ? 1 : -1;
-}
-
-/** 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) {
-  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((box) => [box.id, box]));
-  state.groups = groupByAgent(overview.agents);
-  el.agentsFoot.textContent = [
-    plural(state.groups.length, "agent"),
-    plural(overview.agents.length, "boîte"),
-    plural(overview.threads, "fil"),
-  ].join(" · ");
-
-  el.agents.replaceChildren();
-  el.agents.appendChild(allRow(overview));
-  for (const group of state.groups) el.agents.appendChild(groupRow(group));
-}
-
-function allRow(overview) {
-  const item = node("li");
-  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 (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)
-    )
-  );
-
-  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", counts));
-  row.appendChild(text);
-  if (group.unread > 0) row.appendChild(node("span", "count count--accent", String(group.unread)));
-  row.title = `${group.name} · ${counts}`;
-  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");
-    // 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");
-  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");
-  // 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);
-  // Les sessions d'un agent sont classées sur cette date : sans elle, leur ordre
-  // paraîtrait arbitraire. Les compteurs passent dans l'info-bulle, faute de place.
-  const activity = box.last_activity_at
-    ? `activité ${formatShort(box.last_activity_at)}`
-    : box.registered
-      ? "aucune activité"
-      : "jamais connectée";
-  const meta = node("div", "agent-box", activity);
-  if (!box.last_activity_at) meta.classList.add("is-absent");
-  text.appendChild(meta);
-  row.appendChild(text);
-
-  if (box.unread > 0) row.appendChild(node("span", "count count--accent", String(box.unread)));
-  row.title = `${box.id}\n${plural(box.sent, "envoyé")} · ${plural(box.received, "reçu")}`;
-  row.addEventListener("click", () => select("box", box.id));
-  item.appendChild(row);
-  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) {
-  state.threadCount = threads.length;
-  el.threadsScope.textContent = `${selectionLabel()} · ${plural(threads.length, "fil")}`;
-
-  el.threads.replaceChildren();
-  if (threads.length === 0) {
-    const empty = node("li", "empty");
-    empty.appendChild(node("span", "empty-title", "Aucun fil"));
-    empty.appendChild(document.createTextNode(emptyReason()));
-    el.threads.appendChild(empty);
-    return;
-  }
-  for (const thread of threads) el.threads.appendChild(threadRow(thread));
-}
-
-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.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.";
-}
-
-function threadRow(thread) {
-  const item = node("li");
-  const classes = ["thread"];
-  if (state.threadId === thread.thread_id) classes.push("is-selected");
-  if (thread.unread > 0) classes.push("is-unread");
-  const row = node("button", classes.join(" "));
-  row.type = "button";
-
-  const top = node("div", "thread-top");
-  // Le titre du fil prime ; tant que personne ne l'a nommé, le sujet d'ouverture en tient lieu.
-  top.appendChild(node("span", "thread-title", thread.title || thread.subject));
-  if (thread.priority === "high") top.appendChild(tag("tag tag--high", "haute"));
-  top.appendChild(node("span", "thread-time", formatShort(thread.last_message_at)));
-  row.appendChild(top);
-
-  row.appendChild(node("div", "thread-who", thread.participants.map((id) => party(id).name).join(" · ")));
-
-  const bottom = node("div", "thread-bottom");
-  bottom.appendChild(node("span", "thread-preview", thread.last_message_preview));
-  const count = node("span", thread.unread > 0 ? "count count--accent" : "count", String(thread.messages));
-  count.title = thread.unread > 0 ? `${plural(thread.messages, "message")}, ${thread.unread} non lu(s)` : plural(thread.messages, "message");
-  bottom.appendChild(count);
-  row.appendChild(bottom);
-
-  row.addEventListener("click", () => openThread(thread.thread_id));
-  item.appendChild(row);
-  return item;
-}
-
-// --- Lecteur du fil --------------------------------------------------------
-
-function renderEmptyReader() {
-  const empty = node("div", "empty");
-  empty.appendChild(node("span", "empty-title", "Aucun fil ouvert"));
-  empty.appendChild(document.createTextNode("Choisissez un fil pour lire la conversation."));
-  el.reader.replaceChildren(empty);
-}
-
-function renderThread(data) {
-  const thread = data.thread || {};
-  const messages = data.messages || [];
-  const container = document.createDocumentFragment();
-
-  const head = node("div", "reader-head");
-  const opening = messages.length > 0 ? messages[0].subject : "";
-  head.appendChild(node("h2", null, thread.title || opening || data.thread_id));
-  if (thread.description) head.appendChild(node("p", "reader-desc", thread.description));
-
-  const participants = [];
-  for (const message of messages) {
-    for (const id of [message.from, message.to]) {
-      if (id && !participants.includes(id)) participants.push(id);
-    }
-  }
-
-  const meta = node("div", "reader-meta");
-  const stack = node("div", "avatar-stack");
-  for (const id of participants) stack.appendChild(avatar(id, "avatar--sm avatar--stack"));
-  meta.appendChild(stack);
-  meta.appendChild(
-    node(
-      "span",
-      "reader-participants",
-      `${participants.map((id) => party(id).name).join(", ")} · ${plural(messages.length, "message")}`
-    )
-  );
-  const threadId = node("span", "mono muted", data.thread_id);
-  meta.appendChild(threadId);
-  meta.appendChild(copyButton(data.thread_id, "Copier l'identifiant du fil"));
-  head.appendChild(meta);
-  container.appendChild(head);
-
-  const list = node("ul", "messages");
-  messages.forEach((message, index) => {
-    list.appendChild(messageRow(message, index === messages.length - 1));
-  });
-  container.appendChild(list);
-
-  el.reader.replaceChildren(container);
-}
-
-function messageRow(message, isLast) {
-  const item = node("li");
-  const classes = ["message"];
-  if (state.messageId === message.message_id) classes.push("is-open");
-  else if (isLast) classes.push("is-last");
-  const row = node("div", classes.join(" "));
-
-  row.appendChild(avatar(message.from));
-
-  const column = node("div", "message-body-col");
-  const head = node("div", "message-head");
-  head.appendChild(node("span", "message-from", party(message.from).name));
-  head.appendChild(node("span", "message-to", `→ ${party(message.to).name}`));
-  if (message.priority === "high") head.appendChild(tag("tag tag--high", "priorité haute"));
-  if (message.priority === "low") head.appendChild(tag("tag", "priorité basse"));
-  head.appendChild(node("span", "message-time", formatShort(message.created_at)));
-  column.appendChild(head);
-
-  // Le sujet n'est répété que s'il diffère du nom du fil : sinon c'est du bruit.
-  if (message.subject && message.subject !== message.thread_title) {
-    column.appendChild(node("p", "message-subject", message.subject));
-  }
-  column.appendChild(messageText(message));
-
-  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")
-  );
-  const open = state.messageId === message.message_id;
-  foot.appendChild(
-    button("btn btn--link", open ? "détails ouverts" : "détails", () => {
-      if (open) closeSheet();
-      else openMessage(message.message_id);
-    })
-  );
-  column.appendChild(foot);
-
-  row.appendChild(column);
-  item.appendChild(row);
-  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) {
-  const container = document.createDocumentFragment();
-
-  const head = node("div", "sheet-head");
-  const titles = node("div");
-  titles.appendChild(node("h3", null, "Détails du message"));
-  titles.appendChild(node("p", "sheet-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.appendChild(icon("close"));
-  close.addEventListener("click", closeSheet);
-  head.appendChild(close);
-  container.appendChild(head);
-
-  const ids = node("div", "sheet-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("Envoyé le", node("span", "kv-value", formatDate(message.created_at))));
-  ids.appendChild(kv("Priorité", priorityTag(message.priority)));
-  container.appendChild(ids);
-
-  container.appendChild(partySection("De", message.from));
-  container.appendChild(partySection("À", message.to));
-
-  const deliveries = node("div", "sheet-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");
-}
-
-function kv(key, valueNode) {
-  const row = node("div", "kv");
-  row.appendChild(node("span", "kv-key", key));
-  row.appendChild(valueNode);
-  row.appendChild(node("span"));
-  return row;
-}
-
-function kvCopy(key, value) {
-  const row = node("div", "kv");
-  row.appendChild(node("span", "kv-key", key));
-  row.appendChild(node("span", "kv-value mono", value));
-  row.appendChild(copyButton(value, `Copier ${key.toLowerCase()}`));
-  return row;
-}
-
-function priorityTag(priority) {
-  const labels = { high: "haute", normal: "normale", low: "basse" };
-  return tag(priority === "high" ? "tag tag--high" : "tag", labels[priority] || priority);
-}
-
-/**
- * Une boîte, telle qu'elle doit se lire : le nom de l'agent, ce dont la session s'occupe,
- * et seulement ensuite l'adresse — la seule chose qui identifie vraiment la session.
- */
-function partySection(label, agentId) {
-  const who = party(agentId);
-  const section = node("div", "sheet-section");
-  section.appendChild(node("span", "section-label", label));
-
-  const block = node("div", "party");
-  block.appendChild(avatar(agentId, "avatar--sm"));
-
-  const text = node("div", "agent-text");
-  text.appendChild(node("div", "party-name", who.name));
-  text.appendChild(node("div", "party-box", who.box || (who.registered ? "boîte sans nom" : "jamais connectée")));
-  const addr = node("div", "party-addr");
-  addr.appendChild(node("span", "mono", agentId));
-  addr.appendChild(copyButton(agentId, "Copier l'adresse"));
-  text.appendChild(addr);
-
-  block.appendChild(text);
-  section.appendChild(block);
-  return section;
-}
-
-function deliveriesTable(deliveries) {
-  const table = node("table", "deliveries");
-  const head = node("tr");
-  for (const label of ["Agent", "Rôle", "Dossier", "État"]) head.appendChild(node("th", null, label));
-  table.appendChild(head);
-
-  for (const delivery of deliveries) {
-    const row = node("tr");
-    const who = node("td");
-    who.appendChild(document.createTextNode(party(delivery.agent_id).name));
-    row.appendChild(who);
-    row.appendChild(node("td", "role", delivery.role === "sender" ? "expéditeur" : "destinataire"));
-    row.appendChild(node("td", "folder", delivery.folder));
-    const stateCell = node("td");
-    stateCell.appendChild(
-      delivery.read ? tag("tag tag--ok", "lu") : tag("tag tag--warn", delivery.role === "sender" ? "—" : "non lu")
-    );
-    row.appendChild(stateCell);
-    table.appendChild(row);
-  }
-  return table;
-}
-
-function closeSheet() {
-  state.messageId = null;
-  el.sheet.hidden = true;
-  el.sheet.replaceChildren();
-  el.console.classList.remove("has-sheet");
-  if (state.threadId) refreshThread();
-}
-
-// --- Navigation ------------------------------------------------------------
-
-async function openThread(threadId) {
-  state.threadId = threadId;
-  state.messageId = null;
-  el.sheet.hidden = true;
-  el.console.classList.remove("has-sheet");
-  await refreshThread();
-  await refresh({ keepThread: true });
-}
-
-async function refreshThread() {
-  if (!state.threadId) {
-    renderEmptyReader();
-    return;
-  }
-  try {
-    renderThread(await api(`/admin/threads/${encodeURIComponent(state.threadId)}`));
-  } catch (error) {
-    if (error.message !== "unauthorized") el.reader.replaceChildren(node("div", "banner", error.message));
-  }
-}
-
-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) {
-  try {
-    const [overview, list] = await Promise.all([
-      api("/admin/overview"),
-      api("/admin/threads", {
-        // 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,
-        limit: 100,
-      }),
-    ]);
-    setLoggedIn(true);
-    setStatus("ok", `connecté · ${window.location.host}`);
-    renderAgents(overview);
-    renderThreads(list.threads);
-    if (!options || !options.keepThread) {
-      if (state.threadId) await refreshThread();
-      else renderEmptyReader();
-    }
-  } catch (error) {
-    if (error.message === "unauthorized") {
-      setStatus("idle", "authentification requise");
-      return;
-    }
-    setStatus("ko", `erreur : ${error.message}`);
-  }
-}
-
-// --- Purge des boîtes inactives --------------------------------------------
-
-/**
- * Ce que la fenêtre de purge a sous la main : la date de l'aperçu, les boîtes que le
- * serveur a désignées, celles qui restent cochées, et si la suppression a déjà été
- * demandée une fois. Le second clic est ce qui la déclenche.
- */
-const purge = { before: null, mailboxes: [], selected: new Set(), armed: false };
-
-function openPurge() {
-  const month = new Date(Date.now() - 30 * 86_400_000);
-  el.purgeBefore.value = month.toISOString().slice(0, 10);
-  el.purgeBefore.max = new Date().toISOString().slice(0, 10);
-  resetPurge();
-  el.purge.showModal();
-}
-
-/** Toute modification remet la confirmation à zéro : on ne supprime que ce qu'on vient de voir. */
-function resetPurge() {
-  purge.before = null;
-  purge.mailboxes = [];
-  purge.selected = new Set();
-  purge.armed = false;
-  el.purgeResult.replaceChildren();
-  el.purgeConfirm.disabled = true;
-  el.purgeConfirm.textContent = "Supprimer";
-}
-
-async function previewPurge() {
-  const before = el.purgeBefore.value;
-  if (!before) return;
-  resetPurge();
-  try {
-    const { mailboxes } = await api("/admin/mailboxes/stale", { before });
-    purge.before = before;
-    purge.mailboxes = mailboxes;
-    purge.selected = new Set(mailboxes.map((mailbox) => mailbox.id));
-    renderPurgePreview();
-  } catch (error) {
-    el.purgeResult.replaceChildren(node("p", "purge-error", `Erreur : ${error.message}`));
-  }
-}
-
-function renderPurgePreview() {
-  const container = document.createDocumentFragment();
-
-  if (purge.mailboxes.length === 0) {
-    container.appendChild(node("p", "purge-empty", `Aucune boîte sans activité depuis le ${formatDay(purge.before)}.`));
-    el.purgeResult.replaceChildren(container);
-    return;
-  }
-
-  container.appendChild(
-    node("p", "purge-count", `${plural(purge.mailboxes.length, "boîte")} sans activité depuis le ${formatDay(purge.before)}.`)
-  );
-
-  const list = node("ul", "purge-list");
-  for (const mailbox of purge.mailboxes) {
-    const item = node("li", "purge-item");
-    const label = node("label", "purge-line");
-
-    const box = document.createElement("input");
-    box.type = "checkbox";
-    box.checked = true;
-    box.addEventListener("change", () => {
-      if (box.checked) purge.selected.add(mailbox.id);
-      else purge.selected.delete(mailbox.id);
-      // Décocher change ce qui sera supprimé : la confirmation déjà armée ne vaut plus.
-      purge.armed = false;
-      updatePurgeButton();
-    });
-    label.appendChild(box);
-
-    const text = node("span", "purge-text");
-    text.appendChild(node("span", "purge-name", mailbox.display_name || mailbox.agent_name || "boîte sans nom"));
-    text.appendChild(node("span", "mono muted", mailbox.id));
-    const activity = mailbox.last_activity_at ? `dernière activité ${formatDay(mailbox.last_activity_at)}` : "jamais utilisée";
-    text.appendChild(node("span", "purge-meta", `${plural(mailbox.messages, "message")} · ${activity}`));
-    label.appendChild(text);
-
-    item.appendChild(label);
-    list.appendChild(item);
-  }
-  container.appendChild(list);
-
-  el.purgeResult.replaceChildren(container);
-  updatePurgeButton();
-}
-
-function updatePurgeButton() {
-  const count = purge.selected.size;
-  el.purgeConfirm.disabled = count === 0;
-  el.purgeConfirm.textContent = purge.armed
-    ? `Confirmer : supprimer ${plural(count, "boîte")}`
-    : `Supprimer ${plural(count, "boîte")}`;
-}
-
-async function confirmPurge() {
-  if (purge.selected.size === 0 || !purge.before) return;
-
-  // Premier clic : la suppression est armée, pas faite. Rien ne part sans un second clic.
-  if (!purge.armed) {
-    purge.armed = true;
-    updatePurgeButton();
-    return;
-  }
-
-  el.purgeConfirm.disabled = true;
-  try {
-    const removed = await post("/admin/mailboxes/purge", {
-      before: purge.before,
-      mailboxes: [...purge.selected],
-    });
-    resetPurge();
-    el.purgeResult.replaceChildren(
-      node(
-        "p",
-        "purge-done",
-        `${plural(removed.mailboxes, "boîte")} supprimée(s), ${plural(removed.messages, "message")} et ${plural(removed.threads, "fil")} avec.`
-      )
-    );
-    // La console montre encore ce qui n'existe plus : elle se relit entièrement.
-    state.threadId = null;
-    state.messageId = null;
-    el.sheet.hidden = true;
-    el.console.classList.remove("has-sheet");
-    await refresh();
-  } catch (error) {
-    purge.armed = false;
-    updatePurgeButton();
-    el.purgeResult.appendChild(node("p", "purge-error", `Erreur : ${error.message}`));
-  }
-}
-
-// --- Écouteurs -------------------------------------------------------------
-
-el.purgeOpen.addEventListener("click", openPurge);
-el.purgeClose.addEventListener("click", () => el.purge.close());
-el.purgeCancel.addEventListener("click", () => el.purge.close());
-el.purgeBefore.addEventListener("change", resetPurge);
-el.purgePreview.addEventListener("click", previewPurge);
-el.purgeConfirm.addEventListener("click", confirmPurge);
-
-el.refresh.addEventListener("click", () => refresh({ keepThread: true }));
-
-// Le bouton reste en place une fois la colonne repliée : il est le seul moyen de la
-// rouvrir. Seul ce qu'il annonce change.
-el.collapse.addEventListener("click", () => {
-  state.collapsed = !state.collapsed;
-  el.console.classList.toggle("is-collapsed", state.collapsed);
-  const label = state.collapsed ? "Déplier la liste des agents" : "Replier la liste des agents";
-  el.collapse.title = state.collapsed ? "Déplier" : "Replier";
-  el.collapse.setAttribute("aria-label", label);
-  el.collapse.setAttribute("aria-expanded", String(!state.collapsed));
-});
-
-el.chips.addEventListener("click", (event) => {
-  const chip = event.target.closest(".chip");
-  if (!chip) return;
-  state.filter = chip.dataset.filter;
-  for (const other of el.chips.querySelectorAll(".chip")) {
-    other.classList.toggle("is-active", other === chip);
-  }
-  refresh({ keepThread: true });
-});
-
-let searchTimer = null;
-el.search.addEventListener("input", (event) => {
-  state.search = event.target.value.trim();
-  clearTimeout(searchTimer);
-  searchTimer = setTimeout(() => refresh({ keepThread: true }), 250);
-});
-
-el.tokenReveal.addEventListener("click", () => {
-  const shown = el.token.type === "text";
-  el.token.type = shown ? "password" : "text";
-  el.tokenReveal.setAttribute("aria-label", shown ? "Afficher le jeton" : "Masquer le jeton");
-  el.token.focus();
-});
-
-el.loginForm.addEventListener("submit", async (event) => {
-  event.preventDefault();
-  el.tokenError.textContent = "";
-  el.tokenField.classList.remove("is-invalid");
-  const token = el.token.value.trim();
-  if (!token) return;
-  const response = await fetch("/ui/login", {
-    method: "POST",
-    headers: { "content-type": "application/json" },
-    credentials: "same-origin",
-    body: JSON.stringify({ token }),
-  }).catch(() => null);
-  // Le champ est vidé dans tous les cas : le jeton ne reste pas affiché dans la page.
-  el.token.value = "";
-  el.token.type = "password";
-  if (!response || !response.ok) {
-    el.tokenField.classList.add("is-invalid");
-    el.tokenError.textContent =
-      response && response.status === 429
-        ? "Trop de tentatives, réessayez dans quelques minutes."
-        : "Jeton refusé. Vérifiez MESSENGER_ADMIN_TOKEN côté serveur.";
-    return;
-  }
-  refresh();
-});
-
-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();
-  state.groups = [];
-  el.sheet.hidden = true;
-  el.console.classList.remove("has-sheet");
-  el.agents.replaceChildren();
-  el.threads.replaceChildren();
-  renderEmptyReader();
-  setLoggedIn(false);
-});
-
-setInterval(() => {
-  if (el.autoRefresh.checked && el.login.hidden) refresh({ keepThread: true });
-}, REFRESH_MS);
-
-el.loginOrigin.textContent = `MCP Messenger · ${window.location.host}`;
-renderEmptyReader();
-refresh();
+// Console de supervision : les routes /admin du serveur, en lecture — à trois exceptions
+// près, les suppressions de boîtes, seules commandes de cette page qui écrivent, et qui
+// détruisent. Elles passent toutes par la même fenêtre : un aperçu de ce qui va partir,
+// puis une confirmation en deux clics.
+//
+// Tout le contenu affiché provient d'agents : il est inséré via textContent uniquement,
+// jamais par innerHTML. Les seuls fragments de balisage construits ici sont les icônes,
+// é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
+// l'avatar, pour que la même boîte garde la même teinte d'un écran à l'autre.
+const AVATAR_COLORS = 8;
+
+const ICONS = {
+  copy: ["M9 3h9a2 2 0 0 1 2 2v9", "M5 7h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z"],
+  check: ["M20 6 9 17l-5-5"],
+  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"],
+  trash: ["M3 6h18", "M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2", "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"],
+};
+
+const state = {
+  /**
+   * 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(),
+  /** Agents dont on a demandé à voir les boîtes vides. Elles sont cachées au départ. */
+  showEmpty: new Set(),
+  /**
+   * Faut-il montrer les agents dont aucune session n'a rien échangé ? Non par défaut,
+   * comme les boîtes vides à l'intérieur d'un agent : le serveur alloue une boîte par
+   * session ouverte, et un projet entier peut n'avoir jamais rien dit.
+   */
+  showEmptyAgents: false,
+  /** "all" | "unread" | "high" — les puces au-dessus de la liste des fils. */
+  filter: "all",
+  search: "",
+  threadId: null,
+  /** Message dont le volet de détail est ouvert, ou null si le volet est fermé. */
+  messageId: null,
+  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 = {
+  status: document.getElementById("status"),
+  statusLabel: document.getElementById("status-label"),
+  searchBox: document.getElementById("search-box"),
+  search: document.getElementById("search"),
+  controls: document.getElementById("controls"),
+  autoRefresh: document.getElementById("auto-refresh"),
+  refresh: document.getElementById("refresh"),
+  logout: document.getElementById("logout"),
+  login: document.getElementById("login"),
+  loginForm: document.getElementById("login-form"),
+  loginOrigin: document.getElementById("login-origin"),
+  tokenField: document.querySelector("#login-form .field"),
+  token: document.getElementById("token"),
+  tokenReveal: document.getElementById("token-reveal"),
+  tokenError: document.getElementById("token-error"),
+  console: document.getElementById("console"),
+  agentsPane: document.getElementById("agents-pane"),
+  agents: document.getElementById("agents"),
+  agentsFoot: document.getElementById("agents-foot"),
+  collapse: document.getElementById("collapse"),
+  threadsScope: document.getElementById("threads-scope"),
+  // Le panneau, pas la liste qu'il contient : c'est lui que le séparateur redimensionne.
+  threadsPane: document.querySelector(".threads"),
+  chips: document.getElementById("chips"),
+  threads: document.getElementById("threads"),
+  reader: document.getElementById("reader"),
+  sheet: document.getElementById("sheet"),
+  purge: document.getElementById("purge"),
+  purgeOpen: document.getElementById("purge-open"),
+  purgeClose: document.getElementById("purge-close"),
+  purgeCancel: document.getElementById("purge-cancel"),
+  purgeBefore: document.getElementById("purge-before"),
+  purgePreview: document.getElementById("purge-preview"),
+  purgePreviewEmpty: document.getElementById("purge-preview-empty"),
+  purgeResult: document.getElementById("purge-result"),
+  purgeConfirm: document.getElementById("purge-confirm"),
+};
+
+// --- Fabrique de noeuds ----------------------------------------------------
+
+function node(tag, className, text) {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  if (text !== undefined) element.textContent = text;
+  return element;
+}
+
+function icon(name) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", "icon");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  for (const d of ICONS[name]) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", d);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+
+function button(className, label, onClick) {
+  const element = node("button", className, label);
+  element.type = "button";
+  element.addEventListener("click", onClick);
+  return element;
+}
+
+/** Bouton de copie : les adresses et les identifiants ne se recopient pas à la main. */
+function copyButton(value, label) {
+  const element = node("button", "copy");
+  element.type = "button";
+  element.title = label;
+  element.setAttribute("aria-label", label);
+  element.appendChild(icon("copy"));
+  element.addEventListener("click", async (event) => {
+    event.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(value);
+      element.replaceChildren(icon("check"));
+      setTimeout(() => element.replaceChildren(icon("copy")), 1200);
+    } catch {
+      // Presse-papiers refusé (contexte non sécurisé, permission) : la valeur reste
+      // affichée à côté, donc sélectionnable. Rien d'autre à signaler.
+    }
+  });
+  return element;
+}
+
+function tag(className, label, iconName) {
+  const element = node("span", className);
+  if (iconName) element.appendChild(icon(iconName));
+  element.appendChild(document.createTextNode(label));
+  return element;
+}
+
+// --- Annuaire des boîtes ---------------------------------------------------
+
+/**
+ * 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,
+    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(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 graine donne toujours la même couleur d'avatar. */
+function colorIndex(seed) {
+  let hash = 0;
+  for (const char of String(seed)) hash = (hash * 31 + char.charCodeAt(0)) % 100003;
+  return hash % AVATAR_COLORS;
+}
+
+/** 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(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) {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? String(iso) : date.toLocaleString();
+}
+
+/** Heure seule aujourd'hui, « hier » la veille, date courte au-delà : la liste doit se survoler. */
+function formatShort(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return String(iso);
+  const time = date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  const day = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const today = new Date();
+  const midnight = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  const days = Math.round((midnight - day) / 86400000);
+  if (days === 0) return time;
+  if (days === 1) return `hier ${time}`;
+  return date.toLocaleDateString([], { day: "2-digit", month: "2-digit" });
+}
+
+/** Jour seul, sans heure : une purge se raisonne en jours, pas en minutes. */
+function formatDay(iso) {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? String(iso) : date.toLocaleDateString();
+}
+
+function plural(count, singular, pluralForm) {
+  return `${count} ${count > 1 ? pluralForm || `${singular}s` : singular}`;
+}
+
+// --- Accès au serveur ------------------------------------------------------
+
+async function api(path, params) {
+  const url = new URL(path, window.location.origin);
+  for (const [key, value] of Object.entries(params || {})) {
+    if (value !== undefined && value !== null && value !== "") url.searchParams.set(key, value);
+  }
+  const response = await fetch(url, { headers: { accept: "application/json" }, credentials: "same-origin" });
+  if (response.status === 401) {
+    setLoggedIn(false);
+    throw new Error("unauthorized");
+  }
+  if (!response.ok) {
+    const payload = await response.json().catch(() => ({}));
+    throw new Error(payload.error || response.statusText);
+  }
+  return response.json();
+}
+
+/** Envoi d'une action à la console. Les seules qui existent suppriment : elles passent par ici. */
+async function post(path, body) {
+  return action("POST", path, body);
+}
+
+/** Suppression d'une ressource nommée par son adresse : pas de corps, l'URL suffit. */
+async function remove(path) {
+  return action("DELETE", path, null);
+}
+
+async function action(method, path, body) {
+  const response = await fetch(path, {
+    method,
+    headers: { "content-type": "application/json", accept: "application/json" },
+    credentials: "same-origin",
+    body: body === null ? undefined : JSON.stringify(body),
+  });
+  if (response.status === 401) {
+    setLoggedIn(false);
+    throw new Error("unauthorized");
+  }
+  const payload = await response.json().catch(() => ({}));
+  if (!response.ok) throw new Error(payload.error || response.statusText);
+  return payload;
+}
+
+function setLoggedIn(loggedIn) {
+  el.login.hidden = loggedIn;
+  el.console.hidden = !loggedIn;
+  el.controls.hidden = !loggedIn;
+  el.searchBox.hidden = !loggedIn;
+  if (!loggedIn) {
+    setStatus("idle", "non connecté");
+    el.token.focus();
+  }
+}
+
+function setStatus(kind, label) {
+  el.status.className = `pill pill--${kind}`;
+  el.statusLabel.textContent = 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, 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(byBox);
+  // Le classement est refait ici plutôt que laissé à l'ordre d'arrivée de l'annuaire :
+  // 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 || "";
+}
+
+/**
+ * Compare deux dates ISO, la plus récente d'abord.
+ *
+ * Les dates ISO se comparent comme du texte, et la chaîne vide — une boîte qui n'a jamais
+ * vécu — est plus petite que toute date : elle finit donc en queue, sans cas particulier.
+ */
+function compareActivity(left, right) {
+  if (left === right) return 0;
+  return left < right ? 1 : -1;
+}
+
+/** 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) {
+  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((box) => [box.id, box]));
+  state.groups = groupByAgent(overview.agents);
+  el.agentsFoot.textContent = [
+    plural(state.groups.length, "agent"),
+    plural(overview.agents.length, "boîte"),
+    plural(overview.threads, "fil"),
+  ].join(" · ");
+
+  el.agents.replaceChildren();
+  el.agents.appendChild(allRow(overview));
+  // Les agents sans le moindre échange sont derrière les autres dans `state.groups` :
+  // les montrer allonge la liste par la fin, sans jamais en réordonner le début.
+  const silent = state.groups.filter((group) => group.filled === 0).length;
+  for (const group of state.groups) {
+    if (group.filled === 0 && !state.showEmptyAgents) continue;
+    el.agents.appendChild(groupRow(group));
+  }
+  if (silent > 0) el.agents.appendChild(silentAgentsToggleRow(silent));
+}
+
+/**
+ * Dernière ligne de la colonne : ouvre ou referme les agents dont aucune session n'a rien
+ * échangé. Même geste que pour les boîtes vides d'un agent, un cran plus haut.
+ */
+function silentAgentsToggleRow(silent) {
+  const item = node("li");
+  const what = silent > 1 ? `les ${silent} agents sans échange` : "l'agent sans échange";
+  const toggle = button(
+    "box-empty-toggle agents-empty-toggle",
+    `${state.showEmptyAgents ? "Masquer" : "Afficher"} ${what}`,
+    () => {
+      state.showEmptyAgents = !state.showEmptyAgents;
+      renderAgents({ agents: [...state.directory.values()], threads: currentThreadCount() });
+    }
+  );
+  toggle.setAttribute("aria-expanded", state.showEmptyAgents ? "true" : "false");
+  item.appendChild(toggle);
+  return item;
+}
+
+function allRow(overview) {
+  const item = node("li");
+  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 (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)
+    )
+  );
+
+  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", counts));
+  row.appendChild(text);
+  if (group.unread > 0) row.appendChild(node("span", "count count--accent", String(group.unread)));
+  row.title = `${group.name} · ${counts}`;
+  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");
+    // 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");
+  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");
+  // 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);
+  // Les sessions d'un agent sont classées sur cette date : sans elle, leur ordre
+  // paraîtrait arbitraire. Les compteurs passent dans l'info-bulle, faute de place.
+  const activity = box.last_activity_at
+    ? `activité ${formatShort(box.last_activity_at)}`
+    : box.registered
+      ? "aucune activité"
+      : "jamais connectée";
+  const meta = node("div", "agent-box", activity);
+  if (!box.last_activity_at) meta.classList.add("is-absent");
+  text.appendChild(meta);
+  row.appendChild(text);
+
+  if (box.unread > 0) row.appendChild(node("span", "count count--accent", String(box.unread)));
+  row.title = `${box.id}\n${plural(box.sent, "envoyé")} · ${plural(box.received, "reçu")}`;
+  row.addEventListener("click", () => select("box", box.id));
+
+  // La ligne et son bouton de suppression sont deux boutons voisins, jamais imbriqués :
+  // un bouton dans un bouton n'est pas du HTML, et le clic n'y serait pas dissociable.
+  const line = node("div", "box-line");
+  line.appendChild(row);
+  line.appendChild(deleteBoxButton(box));
+  item.appendChild(line);
+  return item;
+}
+
+/**
+ * Suppression d'une boîte, à la main.
+ *
+ * Le bouton n'efface rien : il ouvre la fenêtre de nettoyage sur cette seule boîte, avec
+ * ce qu'elle contient sous les yeux et la même double confirmation que les nettoyages en
+ * lot. Un geste destructeur à un clic d'une liste ne peut pas être plus court que ça.
+ */
+function deleteBoxButton(box) {
+  const label = `Supprimer la boîte ${boxLabel(box)}`;
+  const remove = node("button", "box-delete");
+  remove.type = "button";
+  remove.title = label;
+  remove.setAttribute("aria-label", label);
+  remove.appendChild(icon("trash"));
+  remove.addEventListener("click", (event) => {
+    event.stopPropagation();
+    openPurgeFor(box);
+  });
+  return remove;
+}
+
+/** Nombre de fils affiché en pied de colonne, conservé entre deux rendus locaux. */
+function currentThreadCount() {
+  return state.threadCount || 0;
+}
+
+/** 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) {
+  state.threadCount = threads.length;
+  el.threadsScope.textContent = `${selectionLabel()} · ${plural(threads.length, "fil")}`;
+
+  el.threads.replaceChildren();
+  if (threads.length === 0) {
+    const empty = node("li", "empty");
+    empty.appendChild(node("span", "empty-title", "Aucun fil"));
+    empty.appendChild(document.createTextNode(emptyReason()));
+    el.threads.appendChild(empty);
+    return;
+  }
+  for (const thread of threads) el.threads.appendChild(threadRow(thread));
+}
+
+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.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.";
+}
+
+function threadRow(thread) {
+  const item = node("li");
+  const classes = ["thread"];
+  if (state.threadId === thread.thread_id) classes.push("is-selected");
+  if (thread.unread > 0) classes.push("is-unread");
+  const row = node("button", classes.join(" "));
+  row.type = "button";
+
+  const top = node("div", "thread-top");
+  // Le titre du fil prime ; tant que personne ne l'a nommé, le sujet d'ouverture en tient lieu.
+  top.appendChild(node("span", "thread-title", thread.title || thread.subject));
+  if (thread.priority === "high") top.appendChild(tag("tag tag--high", "haute"));
+  top.appendChild(node("span", "thread-time", formatShort(thread.last_message_at)));
+  row.appendChild(top);
+
+  row.appendChild(threadParticipants(thread));
+
+  const bottom = node("div", "thread-bottom");
+  bottom.appendChild(node("span", "thread-preview", thread.last_message_preview));
+  const count = node("span", thread.unread > 0 ? "count count--accent" : "count", String(thread.messages));
+  count.title = thread.unread > 0 ? `${plural(thread.messages, "message")}, ${thread.unread} non lu(s)` : plural(thread.messages, "message");
+  bottom.appendChild(count);
+  row.appendChild(bottom);
+
+  row.addEventListener("click", () => openThread(thread.thread_id));
+  item.appendChild(row);
+  return item;
+}
+
+/**
+ * Qui parle dans ce fil : les pastilles d'abord, les noms ensuite.
+ *
+ * Un fil lie exactement deux boîtes, la pastille suffit donc à les distinguer d'un coup
+ * d'œil, sans compter ni déborder. Chaque pastille garde la couleur de son adresse d'un
+ * écran à l'autre, et dit au survol tout ce qu'on peut vouloir savoir de la boîte : le
+ * projet d'où elle écrit, ce dont cette session s'occupe, son adresse, et si c'est elle
+ * qui a écrit en dernier.
+ */
+function threadParticipants(thread) {
+  const who = node("div", "thread-who");
+
+  const stack = node("div", "avatar-stack");
+  for (const id of thread.participants) {
+    const person = party(id);
+    const badge = avatar(id, "avatar--sm avatar--stack");
+    badge.title = [
+      person.agentName || "agent sans nom",
+      person.box || (person.registered ? "boîte sans nom" : "boîte jamais connectée"),
+      id,
+      id === thread.last_message_from ? "a écrit le dernier message" : null,
+    ]
+      .filter(Boolean)
+      .join("\n");
+    stack.appendChild(badge);
+  }
+  who.appendChild(stack);
+
+  who.appendChild(node("span", "thread-names", thread.participants.map((id) => party(id).name).join(" · ")));
+  return who;
+}
+
+// --- Lecteur du fil --------------------------------------------------------
+
+function renderEmptyReader() {
+  const empty = node("div", "empty");
+  empty.appendChild(node("span", "empty-title", "Aucun fil ouvert"));
+  empty.appendChild(document.createTextNode("Choisissez un fil pour lire la conversation."));
+  el.reader.replaceChildren(empty);
+}
+
+function renderThread(data) {
+  const thread = data.thread || {};
+  const messages = data.messages || [];
+  const container = document.createDocumentFragment();
+
+  const head = node("div", "reader-head");
+  const opening = messages.length > 0 ? messages[0].subject : "";
+  head.appendChild(node("h2", null, thread.title || opening || data.thread_id));
+  if (thread.description) head.appendChild(node("p", "reader-desc", thread.description));
+
+  const participants = [];
+  for (const message of messages) {
+    for (const id of [message.from, message.to]) {
+      if (id && !participants.includes(id)) participants.push(id);
+    }
+  }
+
+  const meta = node("div", "reader-meta");
+  const stack = node("div", "avatar-stack");
+  for (const id of participants) stack.appendChild(avatar(id, "avatar--sm avatar--stack"));
+  meta.appendChild(stack);
+  meta.appendChild(
+    node(
+      "span",
+      "reader-participants",
+      `${participants.map((id) => party(id).name).join(", ")} · ${plural(messages.length, "message")}`
+    )
+  );
+  const threadId = node("span", "mono muted", data.thread_id);
+  meta.appendChild(threadId);
+  meta.appendChild(copyButton(data.thread_id, "Copier l'identifiant du fil"));
+  head.appendChild(meta);
+  container.appendChild(head);
+
+  const list = node("ul", "messages");
+  messages.forEach((message, index) => {
+    list.appendChild(messageRow(message, index === messages.length - 1));
+  });
+  container.appendChild(list);
+
+  el.reader.replaceChildren(container);
+}
+
+function messageRow(message, isLast) {
+  const item = node("li");
+  const classes = ["message"];
+  if (state.messageId === message.message_id) classes.push("is-open");
+  else if (isLast) classes.push("is-last");
+  const row = node("div", classes.join(" "));
+
+  row.appendChild(avatar(message.from));
+
+  const column = node("div", "message-body-col");
+  const head = node("div", "message-head");
+  head.appendChild(node("span", "message-from", party(message.from).name));
+  head.appendChild(node("span", "message-to", `→ ${party(message.to).name}`));
+  if (message.priority === "high") head.appendChild(tag("tag tag--high", "priorité haute"));
+  if (message.priority === "low") head.appendChild(tag("tag", "priorité basse"));
+  head.appendChild(node("span", "message-time", formatShort(message.created_at)));
+  column.appendChild(head);
+
+  // Le sujet n'est répété que s'il diffère du nom du fil : sinon c'est du bruit.
+  if (message.subject && message.subject !== message.thread_title) {
+    column.appendChild(node("p", "message-subject", message.subject));
+  }
+  column.appendChild(messageText(message));
+
+  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")
+  );
+  const open = state.messageId === message.message_id;
+  foot.appendChild(
+    button("btn btn--link", open ? "détails ouverts" : "détails", () => {
+      if (open) closeSheet();
+      else openMessage(message.message_id);
+    })
+  );
+  column.appendChild(foot);
+
+  row.appendChild(column);
+  item.appendChild(row);
+  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) {
+  const container = document.createDocumentFragment();
+
+  const head = node("div", "sheet-head");
+  const titles = node("div");
+  titles.appendChild(node("h3", null, "Détails du message"));
+  titles.appendChild(node("p", "sheet-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.appendChild(icon("close"));
+  close.addEventListener("click", closeSheet);
+  head.appendChild(close);
+  container.appendChild(head);
+
+  const ids = node("div", "sheet-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("Envoyé le", node("span", "kv-value", formatDate(message.created_at))));
+  ids.appendChild(kv("Priorité", priorityTag(message.priority)));
+  container.appendChild(ids);
+
+  container.appendChild(partySection("De", message.from));
+  container.appendChild(partySection("À", message.to));
+
+  const deliveries = node("div", "sheet-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");
+}
+
+function kv(key, valueNode) {
+  const row = node("div", "kv");
+  row.appendChild(node("span", "kv-key", key));
+  row.appendChild(valueNode);
+  row.appendChild(node("span"));
+  return row;
+}
+
+function kvCopy(key, value) {
+  const row = node("div", "kv");
+  row.appendChild(node("span", "kv-key", key));
+  row.appendChild(node("span", "kv-value mono", value));
+  row.appendChild(copyButton(value, `Copier ${key.toLowerCase()}`));
+  return row;
+}
+
+function priorityTag(priority) {
+  const labels = { high: "haute", normal: "normale", low: "basse" };
+  return tag(priority === "high" ? "tag tag--high" : "tag", labels[priority] || priority);
+}
+
+/**
+ * Une boîte, telle qu'elle doit se lire : le nom de l'agent, ce dont la session s'occupe,
+ * et seulement ensuite l'adresse — la seule chose qui identifie vraiment la session.
+ */
+function partySection(label, agentId) {
+  const who = party(agentId);
+  const section = node("div", "sheet-section");
+  section.appendChild(node("span", "section-label", label));
+
+  const block = node("div", "party");
+  block.appendChild(avatar(agentId, "avatar--sm"));
+
+  const text = node("div", "agent-text");
+  text.appendChild(node("div", "party-name", who.name));
+  text.appendChild(node("div", "party-box", who.box || (who.registered ? "boîte sans nom" : "jamais connectée")));
+  const addr = node("div", "party-addr");
+  addr.appendChild(node("span", "mono", agentId));
+  addr.appendChild(copyButton(agentId, "Copier l'adresse"));
+  text.appendChild(addr);
+
+  block.appendChild(text);
+  section.appendChild(block);
+  return section;
+}
+
+function deliveriesTable(deliveries) {
+  const table = node("table", "deliveries");
+  const head = node("tr");
+  for (const label of ["Agent", "Rôle", "Dossier", "État"]) head.appendChild(node("th", null, label));
+  table.appendChild(head);
+
+  for (const delivery of deliveries) {
+    const row = node("tr");
+    const who = node("td");
+    who.appendChild(document.createTextNode(party(delivery.agent_id).name));
+    row.appendChild(who);
+    row.appendChild(node("td", "role", delivery.role === "sender" ? "expéditeur" : "destinataire"));
+    row.appendChild(node("td", "folder", delivery.folder));
+    const stateCell = node("td");
+    stateCell.appendChild(
+      delivery.read ? tag("tag tag--ok", "lu") : tag("tag tag--warn", delivery.role === "sender" ? "—" : "non lu")
+    );
+    row.appendChild(stateCell);
+    table.appendChild(row);
+  }
+  return table;
+}
+
+function closeSheet() {
+  state.messageId = null;
+  el.sheet.hidden = true;
+  el.sheet.replaceChildren();
+  el.console.classList.remove("has-sheet");
+  if (state.threadId) refreshThread();
+}
+
+// --- Navigation ------------------------------------------------------------
+
+async function openThread(threadId) {
+  state.threadId = threadId;
+  state.messageId = null;
+  el.sheet.hidden = true;
+  el.console.classList.remove("has-sheet");
+  await refreshThread();
+  await refresh({ keepThread: true });
+}
+
+async function refreshThread() {
+  if (!state.threadId) {
+    renderEmptyReader();
+    return;
+  }
+  try {
+    renderThread(await api(`/admin/threads/${encodeURIComponent(state.threadId)}`));
+  } catch (error) {
+    if (error.message !== "unauthorized") el.reader.replaceChildren(node("div", "banner", error.message));
+  }
+}
+
+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) {
+  try {
+    const [overview, list] = await Promise.all([
+      api("/admin/overview"),
+      api("/admin/threads", {
+        // 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,
+        limit: 100,
+      }),
+    ]);
+    setLoggedIn(true);
+    setStatus("ok", `connecté · ${window.location.host}`);
+    renderAgents(overview);
+    renderThreads(list.threads);
+    if (!options || !options.keepThread) {
+      if (state.threadId) await refreshThread();
+      else renderEmptyReader();
+    }
+  } catch (error) {
+    if (error.message === "unauthorized") {
+      setStatus("idle", "authentification requise");
+      return;
+    }
+    setStatus("ko", `erreur : ${error.message}`);
+  }
+}
+
+// --- Largeur des panneaux --------------------------------------------------
+
+/**
+ * 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.
+ */
+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";
+
+function setPanelWidth(id, pixels) {
+  const panel = PANELS[id];
+  const width = Math.round(Math.min(panel.max, Math.max(panel.min, pixels)));
+  // Passer par le CSSOM plutôt que par un attribut `style` : la CSP interdit le second.
+  el.console.style.setProperty(panel.name, `${width}px`);
+  return width;
+}
+
+function panelWidth(id) {
+  const current = parseInt(el.console.style.getPropertyValue(PANELS[id].name), 10);
+  return Number.isFinite(current) ? current : PANELS[id].initial;
+}
+
+/** Les largeurs suivent l'utilisateur d'une visite à l'autre : elles vivent dans son navigateur. */
+function saveLayout() {
+  try {
+    const widths = {};
+    for (const id of Object.keys(PANELS)) widths[id] = panelWidth(id);
+    window.localStorage.setItem(LAYOUT_KEY, JSON.stringify(widths));
+  } catch {
+    // Navigation privée, stockage refusé : la mise en page reste bonne pour cette visite.
+  }
+}
+
+function loadLayout() {
+  let saved = null;
+  try {
+    saved = JSON.parse(window.localStorage.getItem(LAYOUT_KEY) || "null");
+  } catch {
+    saved = null;
+  }
+  if (!saved) return;
+  for (const [id, width] of Object.entries(saved)) {
+    // Une largeur venue du stockage est une donnée comme une autre : elle est bornée
+    // comme si elle sortait d'un glissé, sinon une valeur aberrante casserait la page.
+    if (PANELS[id] && Number.isFinite(Number(width))) setPanelWidth(id, Number(width));
+  }
+}
+
+function startResize(event, id) {
+  const panel = PANELS[id];
+  const handle = document.getElementById(id);
+  const rect = el[panel.panel].getBoundingClientRect();
+  const measure = (x) => (panel.edge === "before" ? x - rect.left : rect.right - x);
+
+  el.console.classList.add("is-resizing");
+  handle.classList.add("is-active");
+  handle.setPointerCapture?.(event.pointerId);
+
+  const onMove = (move) => setPanelWidth(id, measure(move.clientX));
+  const onUp = () => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    el.console.classList.remove("is-resizing");
+    handle.classList.remove("is-active");
+    saveLayout();
+  };
+  window.addEventListener("pointermove", onMove);
+  window.addEventListener("pointerup", onUp);
+}
+
+/** Au clavier, les flèches déplacent le séparateur ; le pas est plus large avec Maj. */
+function nudgeResize(event, id) {
+  const step = (event.shiftKey ? 48 : 16) * (event.key === "ArrowLeft" ? -1 : 1);
+  const towards = PANELS[id].edge === "before" ? step : -step;
+  setPanelWidth(id, panelWidth(id) + towards);
+  saveLayout();
+}
+
+for (const id of Object.keys(PANELS)) {
+  const handle = document.getElementById(id);
+  handle.addEventListener("pointerdown", (event) => {
+    event.preventDefault();
+    startResize(event, id);
+  });
+  // Un double-clic rend sa largeur d'origine : c'est le moyen de sortir d'un réglage raté.
+  handle.addEventListener("dblclick", () => {
+    setPanelWidth(id, PANELS[id].initial);
+    saveLayout();
+  });
+  handle.addEventListener("keydown", (event) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+    event.preventDefault();
+    nudgeResize(event, id);
+  });
+}
+
+loadLayout();
+
+// --- Purge des boîtes inactives --------------------------------------------
+
+/**
+ * Ce que la fenêtre de nettoyage a sous la main : à quel titre les boîtes sont
+ * supprimables (`empty` ou une date), celles que le serveur a désignées, celles qui
+ * restent cochées, et si la suppression a déjà été demandée une fois. Le second clic est
+ * ce qui la déclenche.
+ */
+const purge = { mode: null, before: null, mailboxes: [], selected: new Set(), armed: false };
+
+function openPurge() {
+  const month = new Date(Date.now() - 30 * 86_400_000);
+  el.purgeBefore.value = month.toISOString().slice(0, 10);
+  el.purgeBefore.max = new Date().toISOString().slice(0, 10);
+  resetPurge();
+  el.purge.showModal();
+}
+
+/**
+ * Ouvre la fenêtre sur une seule boîte, celle qu'on vient de désigner dans la colonne.
+ *
+ * Rien à demander au serveur : l'annuaire vient d'être lu, et ce qu'il en dit est ce que
+ * la ligne cliquée affiche. La liste est donc dressée sur place, avec la même mise en
+ * forme et la même confirmation que les nettoyages en lot.
+ */
+function openPurgeFor(box) {
+  openPurge();
+  purge.mode = "one";
+  purge.mailboxes = [
+    {
+      id: box.id,
+      agent_name: box.agent_name,
+      display_name: box.display_name,
+      last_activity_at: box.last_activity_at,
+      messages: box.sent + box.received,
+    },
+  ];
+  purge.selected = new Set([box.id]);
+  renderPurgePreview();
+}
+
+/** Toute modification remet la confirmation à zéro : on ne supprime que ce qu'on vient de voir. */
+function resetPurge() {
+  purge.mode = null;
+  purge.before = null;
+  purge.mailboxes = [];
+  purge.selected = new Set();
+  purge.armed = false;
+  el.purgeResult.replaceChildren();
+  el.purgeConfirm.disabled = true;
+  el.purgeConfirm.textContent = "Supprimer";
+}
+
+/** Boîtes par lesquelles rien n'est jamais passé, sans considération de date. */
+async function previewEmpty() {
+  await previewPurge("empty", () => api("/admin/mailboxes/empty"));
+}
+
+/** Boîtes qui ont servi, mais que plus rien n'a touchées depuis la date choisie. */
+async function previewStale() {
+  const before = el.purgeBefore.value;
+  if (!before) return;
+  await previewPurge("stale", () => api("/admin/mailboxes/stale", { before }), before);
+}
+
+async function previewPurge(mode, load, before = null) {
+  resetPurge();
+  try {
+    const { mailboxes } = await load();
+    purge.mode = mode;
+    purge.before = before;
+    purge.mailboxes = mailboxes;
+    purge.selected = new Set(mailboxes.map((mailbox) => mailbox.id));
+    renderPurgePreview();
+  } catch (error) {
+    el.purgeResult.replaceChildren(node("p", "purge-error", `Erreur : ${error.message}`));
+  }
+}
+
+function renderPurgePreview() {
+  const container = document.createDocumentFragment();
+  const count = purge.mailboxes.length;
+  // Le critère est rappelé sous les yeux de qui va confirmer : les trois suppressions
+  // remplissent la même liste, et elles ne portent pas sur les mêmes boîtes.
+  const since = ` sans activité depuis le ${formatDay(purge.before)}`;
+  const criterion = purge.mode === "empty" ? "vide" : purge.mode === "one" ? "" : since;
+
+  if (count === 0) {
+    container.appendChild(node("p", "purge-empty", `Aucune boîte ${criterion.trim()}.`));
+    el.purgeResult.replaceChildren(container);
+    return;
+  }
+
+  container.appendChild(
+    node(
+      "p",
+      "purge-count",
+      purge.mode === "one"
+        ? "Cette boîte, et tout ce que personne d'autre ne pourrait plus lire :"
+        : purge.mode === "empty"
+          ? `${plural(count, "boîte vide", "boîtes vides")}.`
+          : `${plural(count, "boîte")}${since}.`
+    )
+  );
+
+  const list = node("ul", "purge-list");
+  for (const mailbox of purge.mailboxes) {
+    const item = node("li", "purge-item");
+    const label = node("label", "purge-line");
+
+    const box = document.createElement("input");
+    box.type = "checkbox";
+    box.checked = true;
+    box.addEventListener("change", () => {
+      if (box.checked) purge.selected.add(mailbox.id);
+      else purge.selected.delete(mailbox.id);
+      // Décocher change ce qui sera supprimé : la confirmation déjà armée ne vaut plus.
+      purge.armed = false;
+      updatePurgeButton();
+    });
+    label.appendChild(box);
+
+    const text = node("span", "purge-text");
+    text.appendChild(node("span", "purge-name", mailbox.display_name || mailbox.agent_name || "boîte sans nom"));
+    text.appendChild(node("span", "mono muted", mailbox.id));
+    const activity = mailbox.last_activity_at ? `dernière activité ${formatDay(mailbox.last_activity_at)}` : "jamais utilisée";
+    text.appendChild(node("span", "purge-meta", `${plural(mailbox.messages, "message")} · ${activity}`));
+    label.appendChild(text);
+
+    item.appendChild(label);
+    list.appendChild(item);
+  }
+  container.appendChild(list);
+
+  el.purgeResult.replaceChildren(container);
+  updatePurgeButton();
+}
+
+function updatePurgeButton() {
+  const count = purge.selected.size;
+  el.purgeConfirm.disabled = count === 0;
+  el.purgeConfirm.textContent = purge.armed
+    ? `Confirmer : supprimer ${plural(count, "boîte")}`
+    : `Supprimer ${plural(count, "boîte")}`;
+}
+
+async function confirmPurge() {
+  if (purge.selected.size === 0 || !purge.mode) return;
+
+  // Premier clic : la suppression est armée, pas faite. Rien ne part sans un second clic.
+  if (!purge.armed) {
+    purge.armed = true;
+    updatePurgeButton();
+    return;
+  }
+
+  el.purgeConfirm.disabled = true;
+  const deleted = [...purge.selected];
+  try {
+    // Une boîte désignée à la main s'efface par son adresse : il n'y a pas de critère à
+    // revérifier, l'utilisateur vient de la montrer du doigt.
+    const removed =
+      purge.mode === "one"
+        ? await remove(`/admin/mailboxes/${encodeURIComponent(deleted[0])}`)
+        : await post("/admin/mailboxes/purge", {
+            // Le critère repart avec les adresses : c'est lui que le serveur revérifie.
+            ...(purge.mode === "empty" ? { empty: true } : { before: purge.before }),
+            mailboxes: deleted,
+          });
+    resetPurge();
+    el.purgeResult.replaceChildren(
+      node(
+        "p",
+        "purge-done",
+        `${plural(removed.mailboxes, "boîte")} supprimée(s), ${plural(removed.messages, "message")} et ${plural(removed.threads, "fil")} avec.`
+      )
+    );
+    // La console montre encore ce qui n'existe plus : elle se relit entièrement, et son
+    // filtre est relâché s'il portait sur une boîte qui vient de disparaître.
+    if (state.selection.kind === "box" && deleted.includes(state.selection.key)) {
+      state.selection = { kind: "all", key: null };
+    }
+    state.threadId = null;
+    state.messageId = null;
+    el.sheet.hidden = true;
+    el.console.classList.remove("has-sheet");
+    await refresh();
+  } catch (error) {
+    purge.armed = false;
+    updatePurgeButton();
+    el.purgeResult.appendChild(node("p", "purge-error", `Erreur : ${error.message}`));
+  }
+}
+
+// --- Écouteurs -------------------------------------------------------------
+
+el.purgeOpen.addEventListener("click", openPurge);
+el.purgeClose.addEventListener("click", () => el.purge.close());
+el.purgeCancel.addEventListener("click", () => el.purge.close());
+el.purgeBefore.addEventListener("change", resetPurge);
+el.purgePreview.addEventListener("click", previewStale);
+el.purgePreviewEmpty.addEventListener("click", previewEmpty);
+el.purgeConfirm.addEventListener("click", confirmPurge);
+
+el.refresh.addEventListener("click", () => refresh({ keepThread: true }));
+
+// Le bouton reste en place une fois la colonne repliée : il est le seul moyen de la
+// rouvrir. Seul ce qu'il annonce change.
+el.collapse.addEventListener("click", () => {
+  state.collapsed = !state.collapsed;
+  el.console.classList.toggle("is-collapsed", state.collapsed);
+  const label = state.collapsed ? "Déplier la liste des agents" : "Replier la liste des agents";
+  el.collapse.title = state.collapsed ? "Déplier" : "Replier";
+  el.collapse.setAttribute("aria-label", label);
+  el.collapse.setAttribute("aria-expanded", String(!state.collapsed));
+});
+
+el.chips.addEventListener("click", (event) => {
+  const chip = event.target.closest(".chip");
+  if (!chip) return;
+  state.filter = chip.dataset.filter;
+  for (const other of el.chips.querySelectorAll(".chip")) {
+    other.classList.toggle("is-active", other === chip);
+  }
+  refresh({ keepThread: true });
+});
+
+let searchTimer = null;
+el.search.addEventListener("input", (event) => {
+  state.search = event.target.value.trim();
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => refresh({ keepThread: true }), 250);
+});
+
+el.tokenReveal.addEventListener("click", () => {
+  const shown = el.token.type === "text";
+  el.token.type = shown ? "password" : "text";
+  el.tokenReveal.setAttribute("aria-label", shown ? "Afficher le jeton" : "Masquer le jeton");
+  el.token.focus();
+});
+
+el.loginForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  el.tokenError.textContent = "";
+  el.tokenField.classList.remove("is-invalid");
+  const token = el.token.value.trim();
+  if (!token) return;
+  const response = await fetch("/ui/login", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    credentials: "same-origin",
+    body: JSON.stringify({ token }),
+  }).catch(() => null);
+  // Le champ est vidé dans tous les cas : le jeton ne reste pas affiché dans la page.
+  el.token.value = "";
+  el.token.type = "password";
+  if (!response || !response.ok) {
+    el.tokenField.classList.add("is-invalid");
+    el.tokenError.textContent =
+      response && response.status === 429
+        ? "Trop de tentatives, réessayez dans quelques minutes."
+        : "Jeton refusé. Vérifiez MESSENGER_ADMIN_TOKEN côté serveur.";
+    return;
+  }
+  refresh();
+});
+
+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();
+  state.groups = [];
+  el.sheet.hidden = true;
+  el.console.classList.remove("has-sheet");
+  el.agents.replaceChildren();
+  el.threads.replaceChildren();
+  renderEmptyReader();
+  setLoggedIn(false);
+});
+
+setInterval(() => {
+  if (el.autoRefresh.checked && el.login.hidden) refresh({ keepThread: true });
+}, REFRESH_MS);
+
+el.loginOrigin.textContent = `MCP Messenger · ${window.location.host}`;
+renderEmptyReader();
+refresh();