@imenam/mcp-messenger 1.0.30 → 1.0.32

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

@@ -1,1632 +1,2655 @@
-// 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"],
-  info: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z", "M12 11v5", "M12 8h.01"],
-  paperclip: ["m21 11-8.5 8.5a5 5 0 0 1-7-7L14 4a3.5 3.5 0 0 1 5 5l-8.5 8.5a2 2 0 0 1-3-3L15 7"],
-  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,
-  /**
-   * Messages dépliés dans le lecteur, par identifiant. Vide au départ : un fil s'ouvre
-   * replié, et se parcourt avant de se lire.
-   */
-  openMessages: new Set(),
-  collapsed: false,
-  /** Annuaire des boîtes, indexé par adresse : rempli par chaque `/admin/overview`. */
-  directory: new Map(),
-  /** 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"),
-  threadsAvatar: document.getElementById("threads-avatar"),
-  threadsName: document.getElementById("threads-name"),
-  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"),
-  details: document.getElementById("details"),
-  detailsBody: document.getElementById("details-body"),
-  purge: document.getElementById("purge"),
-  purgeOpen: document.getElementById("purge-open"),
-  purgeClose: document.getElementById("purge-close"),
-  purgeCancel: document.getElementById("purge-cancel"),
-  purgeBefore: document.getElementById("purge-before"),
-  purgeCreatedBefore: document.getElementById("purge-created-before"),
-  purgePreview: document.getElementById("purge-preview"),
-  purgePreviewCreated: document.getElementById("purge-preview-created"),
-  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);
-}
-
-/**
- * Le nom de l'agent, et lui seul.
- *
- * `party().name` accole le nom de la boîte dès que plusieurs sessions d'un projet
- * existent : indispensable là où deux sessions doivent se distinguer, encombrant dans le
- * lecteur d'un fil, où l'on suit une conversation entre deux correspondants déjà connus.
- * Ce que la boîte ajoute — son nom, son adresse — se lit dans les détails du message.
- */
-function agentLabel(agentId) {
-  const who = party(agentId);
-  return who.agentName || who.box || shortAddress(agentId);
-}
-
-/**
- * Pastille de l'agent, et non de la boîte.
- *
- * Dans une liste, ce qui se cherche du regard est le projet : deux sessions d'un même
- * agent portent donc la même pastille, et c'est voulu — ce qui les distingue, le nom de
- * la boîte, se lit au survol. La pastille de boîte reste celle du lecteur et du volet,
- * là où l'on regarde une session en particulier.
- */
-function agentAvatar(agentId, extraClass, title) {
-  const who = party(agentId);
-  const seed = who.agentName || agentId;
-  const label = who.agentName || who.box || shortAddress(agentId);
-  return avatarFor(seed, label, title ?? boxTitle(agentId), extraClass, !who.registered);
-}
-
-/** Ce qu'une pastille dit au survol : le projet, la session, l'adresse. */
-function boxTitle(agentId) {
-  const who = party(agentId);
-  return [
-    who.agentName || "agent sans nom",
-    who.box || (who.registered ? "boîte sans nom" : "boîte jamais connectée"),
-    agentId,
-  ].join("\n");
-}
-
-// --- 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;
-}
-
-/**
- * Choisit ce que la liste des fils montre.
- *
- * Recliquer sur la sélection courante ne la relâche pas : cliquer un agent veut dire
- * « montre-moi cet agent », et le redire ne peut pas vouloir dire le contraire. On revient
- * à la vue générale par « Tous les agents », en tête de colonne, là où on l'attend.
- */
-function select(kind, key) {
-  if (isSelected(kind, key)) return;
-  state.selection = { kind, key };
-  state.threadId = null;
-  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 et sans effet l'un sur l'autre : le chevron
- * ouvre ou ferme, le nom filtre sur l'ensemble des sessions du projet. Filtrer ne déplie
- * pas — un clic ne doit faire que ce qu'il annonce, et voir les sessions d'un agent est
- * une autre question que ne lire que ses fils.
- */
-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", () => 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;
-  renderThreadsHead(threads.length);
-
-  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));
-}
-
-/**
- * En-tête de la liste : ce sur quoi elle est filtrée, en grand.
- *
- * Sans filtre, elle s'intitule « Fils » et rien d'autre. Dès qu'un agent est choisi, c'est
- * lui le sujet : sa pastille et son nom prennent la place du titre, et la ligne en dessous
- * dit ce que le filtre recouvre — toutes ses sessions, ou une seule.
- */
-function renderThreadsHead(count) {
-  const { kind, key } = state.selection;
-  const fils = plural(count, "fil");
-
-  if (kind === "all") {
-    el.threadsAvatar.hidden = true;
-    el.threadsAvatar.replaceChildren();
-    el.threadsName.textContent = "Fils";
-    el.threadsScope.textContent = `Toutes les boîtes · ${fils}`;
-    return;
-  }
-
-  // Une boîte est d'abord une session de son agent : c'est donc l'agent qui s'affiche,
-  // et le nom de la boîte qui précise de quelle session il s'agit.
-  const address = kind === "box" ? key : (state.groups.find((g) => g.key === key)?.boxes[0] || {}).id;
-  const who = address ? party(address) : null;
-  const sessions = kind === "agent" ? (state.groups.find((g) => g.key === key)?.boxes.length ?? 0) : 0;
-  const box = kind === "box" ? state.directory.get(key) : null;
-
-  el.threadsAvatar.hidden = false;
-  el.threadsAvatar.replaceChildren(
-    address ? agentAvatar(address, "avatar--lg") : avatarFor(key, key, key, "avatar--lg", false)
-  );
-  el.threadsName.textContent = kind === "agent" ? key : who?.agentName || selectionLabel();
-  el.threadsScope.textContent =
-    kind === "agent"
-      ? `${plural(sessions, "session")} · ${fils}`
-      : `${box ? boxLabel(box) : shortAddress(key)} · ${fils}`;
-}
-
-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 last = id === thread.last_message_from ? "\na écrit le dernier message" : "";
-    stack.appendChild(agentAvatar(id, "avatar--sm avatar--stack", `${boxTitle(id)}${last}`));
-  }
-  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");
-  // Le projet d'abord : deux sessions d'un même agent portent la même pastille, le nom
-  // de la boîte se lisant au survol.
-  for (const id of participants) stack.appendChild(agentAvatar(id, "avatar--sm avatar--stack"));
-  meta.appendChild(stack);
-  meta.appendChild(
-    node(
-      "span",
-      "reader-participants",
-      `${participants.map(agentLabel).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);
-}
-
-/**
- * Un message du fil, replié ou déplié.
- *
- * Un fil se relit d'abord de haut en bas : ce qui doit sauter aux yeux est qui a écrit,
- * quand, et sur quoi. Les corps sont donc repliés au départ, chaque message tenant sur sa
- * ligne de titre, et c'est cette ligne qui l'ouvre. L'état est retenu par identifiant de
- * message : le rafraîchissement automatique ne referme donc pas ce qu'on est en train de
- * lire.
- */
-function messageRow(message, isLast) {
-  const item = node("li");
-  fillMessage(item, message, isLast);
-  return item;
-}
-
-/**
- * Remplit la ligne d'un message, dépliée ou non.
- *
- * Le nœud est donné plutôt que rendu : ouvrir un message ne redessine que lui, et c'est
- * bien cette ligne-là, celle qui est dans la page, qu'il faut réécrire — en reconstruire
- * une autre reviendrait à modifier un élément que personne ne regarde.
- */
-function fillMessage(item, message, isLast) {
-  const open = state.openMessages.has(message.message_id);
-  const classes = ["message"];
-  if (open) classes.push("is-expanded");
-  if (isLast) classes.push("is-last");
-  const row = node("div", classes.join(" "));
-  const column = node("div", "message-body-col");
-
-  /*
-    Tout ce qui est visible d'un message replié est cliquable, pastille comprise : le
-    bandeau est le bouton, et le survol le grise pour qu'on le voie comme tel. Pas de
-    chevron — sur une ligne qui s'annonce déjà comme une cible, il n'apprend rien.
-  */
-  const head = node("button", "message-head");
-  head.type = "button";
-  head.setAttribute("aria-expanded", open ? "true" : "false");
-  head.appendChild(agentAvatar(message.from));
-
-  const identity = node("span", "message-identity");
-  identity.appendChild(node("span", "message-from", agentLabel(message.from)));
-  if (message.priority === "high") identity.appendChild(tag("tag tag--high", "priorité haute"));
-  if (message.priority === "low") identity.appendChild(tag("tag", "priorité basse"));
-  if (!message.read) {
-    const dot = node("span", "message-dot");
-    dot.title = `non lu par ${agentLabel(message.to)}`;
-    identity.appendChild(dot);
-  }
-  identity.appendChild(node("span", "message-time", formatShort(message.created_at)));
-  identity.appendChild(detailsButton(message));
-  head.appendChild(identity);
-
-  // L'objet, toujours : c'est le titre du message, et c'est lui qu'on cherche du regard.
-  // Le bandeau ne bouge donc pas quand le message s'ouvre, seul le corps vient dessous.
-  head.appendChild(node("span", "message-subject", message.subject || "sans objet"));
-
-  head.addEventListener("click", () => {
-    if (open) state.openMessages.delete(message.message_id);
-    else state.openMessages.add(message.message_id);
-    fillMessage(item, message, isLast);
-  });
-  column.appendChild(head);
-
-  if (!open) {
-    row.appendChild(column);
-    item.replaceChildren(row);
-    return;
-  }
-
-  // Ce qui suit la ligne de titre s'aligne sous le texte, pas sous la pastille.
-  const content = node("div", "message-content");
-  column.appendChild(content);
-
-  content.appendChild(messageText(message));
-  if (message.attachments && message.attachments.length > 0) {
-    content.appendChild(attachmentList(message.attachments));
-  }
-
-  const foot = node("div", "message-foot");
-  foot.appendChild(
-    message.read
-      ? tag("tag tag--ok", `lu par ${agentLabel(message.to)}`, "check")
-      : tag("tag tag--warn", `non lu par ${agentLabel(message.to)}`, "clock")
-  );
-  content.appendChild(foot);
-
-  row.appendChild(column);
-  item.replaceChildren(row);
-}
-
-/**
- * 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;
-}
-
-/** Pièces jointes d'un message : un lien de téléchargement par fichier. */
-function attachmentList(attachments) {
-  const list = node("ul", "attachments");
-  for (const attachment of attachments) {
-    const item = node("li");
-    const link = node("a", "attachment");
-    link.href = `/admin/attachments/${encodeURIComponent(attachment.attachment_id)}`;
-    link.download = attachment.filename;
-    link.title = attachment.mime_type;
-    link.appendChild(icon("paperclip"));
-    link.appendChild(node("span", "attachment-name", attachment.filename));
-    link.appendChild(node("span", "attachment-size", formatSize(attachment.size)));
-    item.appendChild(link);
-    list.appendChild(item);
-  }
-  return list;
-}
-
-function formatSize(bytes) {
-  if (bytes < 1024) return `${bytes} o`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} Ko`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`;
-}
-
-// --- Détails d'un message --------------------------------------------------
-
-/**
- * Bouton d'information, au bout de la ligne.
- *
- * Un fil ne lie que deux boîtes : répéter à chaque message qui écrit à qui, sous quel nom
- * de boîte, encombre la lecture pour une information déjà connue. Elle est donc rangée
- * ici, à un clic, avec tout le reste — adresses, identifiants, distribution.
- */
-function detailsButton(message) {
-  const open = node("button", "message-info");
-  open.type = "button";
-  open.title = "Détails du message";
-  open.setAttribute("aria-label", "Détails du message");
-  open.appendChild(icon("info"));
-  // Le bandeau entier ouvre le message : ce clic-ci ne doit pas le replier au passage.
-  open.addEventListener("click", (event) => {
-    event.stopPropagation();
-    openDetails(message.message_id);
-  });
-  return open;
-}
-
-async function openDetails(messageId) {
-  el.detailsBody.replaceChildren(node("p", "muted", "Chargement…"));
-  el.details.showModal();
-  try {
-    renderDetails(await api(`/admin/messages/${encodeURIComponent(messageId)}`));
-  } catch (error) {
-    if (error.message === "unauthorized") el.details.close();
-    else el.detailsBody.replaceChildren(node("p", "purge-error", `Erreur : ${error.message}`));
-  }
-}
-
-/** Tout ce que la conversation ne montre pas, et que la supervision peut vouloir lire. */
-function renderDetails(message) {
-  const container = document.createDocumentFragment();
-
-  const head = node("div", "modal-head");
-  const titles = node("div");
-  titles.appendChild(node("h2", null, "Détails du message"));
-  titles.appendChild(node("p", "details-subject", message.subject));
-  head.appendChild(titles);
-  const close = node("button", "btn btn--icon btn--ghost");
-  close.type = "button";
-  close.title = "Fermer";
-  close.setAttribute("aria-label", "Fermer les détails");
-  close.appendChild(icon("close"));
-  close.addEventListener("click", () => el.details.close());
-  head.appendChild(close);
-  container.appendChild(head);
-
-  const ids = node("div", "details-section");
-  ids.appendChild(node("span", "section-label", "Message"));
-  ids.appendChild(kvCopy("Identifiant", message.message_id));
-  ids.appendChild(kv("Objet", node("span", "kv-value", message.subject)));
-  ids.appendChild(kv("Envoyé le", node("span", "kv-value", formatDate(message.created_at))));
-  ids.appendChild(kv("Priorité", priorityTag(message.priority)));
-  container.appendChild(ids);
-
-  const thread = node("div", "details-section");
-  thread.appendChild(node("span", "section-label", "Fil"));
-  // Sans nom donné par un participant, le fil n'a que son identifiant et le sujet d'ouverture.
-  thread.appendChild(kv("Nom", node("span", "kv-value", message.thread_title || "fil sans nom")));
-  thread.appendChild(kvCopy("Identifiant", message.thread_id));
-  container.appendChild(thread);
-
-  container.appendChild(partySection("De", message.from));
-  container.appendChild(partySection("À", message.to));
-
-  const deliveries = node("div", "details-section");
-  deliveries.appendChild(node("span", "section-label", "Distribution"));
-  deliveries.appendChild(deliveriesTable(message.deliveries || []));
-  container.appendChild(deliveries);
-
-  el.detailsBody.replaceChildren(container);
-}
-
-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", "details-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;
-}
-
-// --- Navigation ------------------------------------------------------------
-
-async function openThread(threadId) {
-  state.threadId = threadId;
-  // Un fil s'ouvre replié, même celui qu'on rouvre : ce qui était déplié l'était pour
-  // l'autre conversation.
-  state.openMessages.clear();
-  await refreshThread();
-  await refresh({ keepThread: true });
-}
-
-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));
-  }
-}
-
-// --- 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é : ici, chacun borde le panneau qui
- * le précède. La distinction reste écrite car un panneau ancré à droite se réglerait à
- * l'envers, en comptant depuis son bord droit.
- */
-const PANELS = {
-  "resize-agents": { name: "--w-agents", panel: "agentsPane", edge: "before", min: 180, max: 520, initial: 240 },
-  "resize-threads": { name: "--w-threads", panel: "threadsPane", edge: "before", min: 260, max: 720, initial: 400 },
-};
-
-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);
-  const today = new Date().toISOString().slice(0, 10);
-  el.purgeBefore.value = month.toISOString().slice(0, 10);
-  el.purgeBefore.max = today;
-  el.purgeCreatedBefore.value = month.toISOString().slice(0, 10);
-  el.purgeCreatedBefore.max = today;
-  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);
-}
-
-/** Boîtes ouvertes avant la date choisie, qu'elles servent encore ou non. */
-async function previewCreated() {
-  const before = el.purgeCreatedBefore.value;
-  if (!before) return;
-  await previewPurge("created", () => api("/admin/mailboxes/created-before", { created_before: 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 quatre suppressions
-  // remplissent la même liste, et elles ne portent pas sur les mêmes boîtes. Les deux
-  // critères datés se distinguent par leur seule formulation : « depuis » regarde
-  // l'activité, « créée avant » regarde l'ouverture de la boîte.
-  const dated =
-    purge.mode === "created"
-      ? ` créée avant le ${formatDay(purge.before)}`
-      : ` sans activité depuis le ${formatDay(purge.before)}`;
-  const criterion = purge.mode === "empty" ? "vide" : purge.mode === "one" ? "" : dated;
-
-  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")}.`
-          : purge.mode === "created"
-            ? `${plural(count, "boîte créée", "boîtes créées")} avant le ${formatDay(purge.before)}.`
-            : `${plural(count, "boîte")}${dated}.`
-    )
-  );
-
-  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 }
-              : purge.mode === "created"
-                ? { created_before: purge.before }
-                : { 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;
-    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.purgeCreatedBefore.addEventListener("change", resetPurge);
-el.purgePreview.addEventListener("click", previewStale);
-el.purgePreviewCreated.addEventListener("click", previewCreated);
-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.openMessages = new Set();
-  state.directory = new Map();
-  state.groups = [];
-  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. Deux familles de commandes
+// écrivent : les liaisons entre boîtes (création, suppression), et les suppressions de
+// boîtes, qui 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"],
+  info: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z", "M12 11v5", "M12 8h.01"],
+  pencil: ["M21.2 6.8a2.8 2.8 0 0 0-4-4L3.8 16.2a2 2 0 0 0-.5.8L2 22l5-1.3a2 2 0 0 0 .8-.5z", "m15 5 4 4"],
+  paperclip: ["m21 11-8.5 8.5a5 5 0 0 1-7-7L14 4a3.5 3.5 0 0 1 5 5l-8.5 8.5a2 2 0 0 1-3-3L15 7"],
+  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"],
+  unlink: [
+    "m18.84 12.25 1.72-1.71a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+    "m5.17 11.75-1.71 1.71a5 5 0 0 0 7.07 7.07l1.71-1.71",
+    "M8 2v3",
+    "M2 8h3",
+    "M16 22v-3",
+    "M22 16h-3",
+  ],
+  search: ["m21 21-4.3-4.3", "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"],
+};
+
+const state = {
+  /** "threads" | "links" — l'écran affiché, choisi par les onglets de la barre du haut. */
+  view: "threads",
+  /** Liaisons du serveur, relues à chaque rafraîchissement. */
+  links: [],
+  /**
+   * 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,
+  /**
+   * Messages dépliés dans le lecteur, par identifiant. Vide au départ : un fil s'ouvre
+   * replié, et se parcourt avant de se lire.
+   */
+  openMessages: new Set(),
+  collapsed: false,
+  /** Annuaire des boîtes, indexé par adresse : rempli par chaque `/admin/overview`. */
+  directory: new Map(),
+  /** 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"),
+  threadsAvatar: document.getElementById("threads-avatar"),
+  threadsName: document.getElementById("threads-name"),
+  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"),
+  details: document.getElementById("details"),
+  detailsBody: document.getElementById("details-body"),
+  purge: document.getElementById("purge"),
+  purgeOpen: document.getElementById("purge-open"),
+  purgeClose: document.getElementById("purge-close"),
+  purgeCancel: document.getElementById("purge-cancel"),
+  purgeBefore: document.getElementById("purge-before"),
+  purgeCreatedBefore: document.getElementById("purge-created-before"),
+  purgePreview: document.getElementById("purge-preview"),
+  purgePreviewCreated: document.getElementById("purge-preview-created"),
+  purgePreviewEmpty: document.getElementById("purge-preview-empty"),
+  purgeResult: document.getElementById("purge-result"),
+  purgeConfirm: document.getElementById("purge-confirm"),
+  tabs: document.getElementById("tabs"),
+  linksBadge: document.getElementById("links-badge"),
+  links: document.getElementById("links"),
+  linksWindow: document.getElementById("links-window"),
+  linksScroll: document.getElementById("links-scroll"),
+  linksCanvas: document.getElementById("links-canvas"),
+  linksPanel: document.getElementById("links-panel"),
+};
+
+// --- 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 est nommée par son agent (`rename_mailbox`) ou depuis la carte des liaisons ;
+ * sans nom, 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);
+}
+
+/**
+ * Le nom de l'agent, et lui seul.
+ *
+ * `party().name` accole le nom de la boîte dès que plusieurs sessions d'un projet
+ * existent : indispensable là où deux sessions doivent se distinguer, encombrant dans le
+ * lecteur d'un fil, où l'on suit une conversation entre deux correspondants déjà connus.
+ * Ce que la boîte ajoute — son nom, son adresse — se lit dans les détails du message.
+ */
+function agentLabel(agentId) {
+  const who = party(agentId);
+  return who.agentName || who.box || shortAddress(agentId);
+}
+
+/**
+ * Pastille de l'agent, et non de la boîte.
+ *
+ * Dans une liste, ce qui se cherche du regard est le projet : deux sessions d'un même
+ * agent portent donc la même pastille, et c'est voulu — ce qui les distingue, le nom de
+ * la boîte, se lit au survol. La pastille de boîte reste celle du lecteur et du volet,
+ * là où l'on regarde une session en particulier.
+ */
+function agentAvatar(agentId, extraClass, title) {
+  const who = party(agentId);
+  const seed = who.agentName || agentId;
+  const label = who.agentName || who.box || shortAddress(agentId);
+  return avatarFor(seed, label, title ?? boxTitle(agentId), extraClass, !who.registered);
+}
+
+/** Ce qu'une pastille dit au survol : le projet, la session, l'adresse. */
+function boxTitle(agentId) {
+  const who = party(agentId);
+  return [
+    who.agentName || "agent sans nom",
+    who.box || (who.registered ? "boîte sans nom" : "boîte jamais connectée"),
+    agentId,
+  ].join("\n");
+}
+
+// --- 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. */
+async function post(path, body) {
+  return action("POST", path, body);
+}
+
+/** Modification partielle d'une ressource nommée par son adresse. */
+async function patch(path, body) {
+  return action("PATCH", 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 || state.view !== "threads";
+  el.links.hidden = !loggedIn || state.view !== "links";
+  el.tabs.hidden = !loggedIn;
+  el.controls.hidden = !loggedIn;
+  // La recherche porte sur les fils ; le volet des liaisons a la sienne.
+  el.searchBox.hidden = !loggedIn || state.view !== "threads";
+  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;
+}
+
+/**
+ * Choisit ce que la liste des fils montre.
+ *
+ * Recliquer sur la sélection courante ne la relâche pas : cliquer un agent veut dire
+ * « montre-moi cet agent », et le redire ne peut pas vouloir dire le contraire. On revient
+ * à la vue générale par « Tous les agents », en tête de colonne, là où on l'attend.
+ */
+function select(kind, key) {
+  if (isSelected(kind, key)) return;
+  state.selection = { kind, key };
+  state.threadId = null;
+  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 et sans effet l'un sur l'autre : le chevron
+ * ouvre ou ferme, le nom filtre sur l'ensemble des sessions du projet. Filtrer ne déplie
+ * pas — un clic ne doit faire que ce qu'il annonce, et voir les sessions d'un agent est
+ * une autre question que ne lire que ses fils.
+ */
+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", () => 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;
+  renderThreadsHead(threads.length);
+
+  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));
+}
+
+/**
+ * En-tête de la liste : ce sur quoi elle est filtrée, en grand.
+ *
+ * Sans filtre, elle s'intitule « Fils » et rien d'autre. Dès qu'un agent est choisi, c'est
+ * lui le sujet : sa pastille et son nom prennent la place du titre, et la ligne en dessous
+ * dit ce que le filtre recouvre — toutes ses sessions, ou une seule.
+ */
+function renderThreadsHead(count) {
+  const { kind, key } = state.selection;
+  const fils = plural(count, "fil");
+
+  if (kind === "all") {
+    el.threadsAvatar.hidden = true;
+    el.threadsAvatar.replaceChildren();
+    el.threadsName.textContent = "Fils";
+    el.threadsScope.textContent = `Toutes les boîtes · ${fils}`;
+    return;
+  }
+
+  // Une boîte est d'abord une session de son agent : c'est donc l'agent qui s'affiche,
+  // et le nom de la boîte qui précise de quelle session il s'agit.
+  const address = kind === "box" ? key : (state.groups.find((g) => g.key === key)?.boxes[0] || {}).id;
+  const who = address ? party(address) : null;
+  const sessions = kind === "agent" ? (state.groups.find((g) => g.key === key)?.boxes.length ?? 0) : 0;
+  const box = kind === "box" ? state.directory.get(key) : null;
+
+  el.threadsAvatar.hidden = false;
+  el.threadsAvatar.replaceChildren(
+    address ? agentAvatar(address, "avatar--lg") : avatarFor(key, key, key, "avatar--lg", false)
+  );
+  el.threadsName.textContent = kind === "agent" ? key : who?.agentName || selectionLabel();
+  el.threadsScope.textContent =
+    kind === "agent"
+      ? `${plural(sessions, "session")} · ${fils}`
+      : `${box ? boxLabel(box) : shortAddress(key)} · ${fils}`;
+}
+
+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 last = id === thread.last_message_from ? "\na écrit le dernier message" : "";
+    stack.appendChild(agentAvatar(id, "avatar--sm avatar--stack", `${boxTitle(id)}${last}`));
+  }
+  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");
+  // Le projet d'abord : deux sessions d'un même agent portent la même pastille, le nom
+  // de la boîte se lisant au survol.
+  for (const id of participants) stack.appendChild(agentAvatar(id, "avatar--sm avatar--stack"));
+  meta.appendChild(stack);
+  meta.appendChild(
+    node(
+      "span",
+      "reader-participants",
+      `${participants.map(agentLabel).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);
+}
+
+/**
+ * Un message du fil, replié ou déplié.
+ *
+ * Un fil se relit d'abord de haut en bas : ce qui doit sauter aux yeux est qui a écrit,
+ * quand, et sur quoi. Les corps sont donc repliés au départ, chaque message tenant sur sa
+ * ligne de titre, et c'est cette ligne qui l'ouvre. L'état est retenu par identifiant de
+ * message : le rafraîchissement automatique ne referme donc pas ce qu'on est en train de
+ * lire.
+ */
+function messageRow(message, isLast) {
+  const item = node("li");
+  fillMessage(item, message, isLast);
+  return item;
+}
+
+/**
+ * Remplit la ligne d'un message, dépliée ou non.
+ *
+ * Le nœud est donné plutôt que rendu : ouvrir un message ne redessine que lui, et c'est
+ * bien cette ligne-là, celle qui est dans la page, qu'il faut réécrire — en reconstruire
+ * une autre reviendrait à modifier un élément que personne ne regarde.
+ */
+function fillMessage(item, message, isLast) {
+  const open = state.openMessages.has(message.message_id);
+  const classes = ["message"];
+  if (open) classes.push("is-expanded");
+  if (isLast) classes.push("is-last");
+  const row = node("div", classes.join(" "));
+  const column = node("div", "message-body-col");
+
+  /*
+    Tout ce qui est visible d'un message replié est cliquable, pastille comprise : le
+    bandeau est le bouton, et le survol le grise pour qu'on le voie comme tel. Pas de
+    chevron — sur une ligne qui s'annonce déjà comme une cible, il n'apprend rien.
+  */
+  const head = node("button", "message-head");
+  head.type = "button";
+  head.setAttribute("aria-expanded", open ? "true" : "false");
+  head.appendChild(agentAvatar(message.from));
+
+  const identity = node("span", "message-identity");
+  identity.appendChild(node("span", "message-from", agentLabel(message.from)));
+  if (message.priority === "high") identity.appendChild(tag("tag tag--high", "priorité haute"));
+  if (message.priority === "low") identity.appendChild(tag("tag", "priorité basse"));
+  if (!message.read) {
+    const dot = node("span", "message-dot");
+    dot.title = `non lu par ${agentLabel(message.to)}`;
+    identity.appendChild(dot);
+  }
+  identity.appendChild(node("span", "message-time", formatShort(message.created_at)));
+  identity.appendChild(detailsButton(message));
+  head.appendChild(identity);
+
+  // L'objet, toujours : c'est le titre du message, et c'est lui qu'on cherche du regard.
+  // Le bandeau ne bouge donc pas quand le message s'ouvre, seul le corps vient dessous.
+  head.appendChild(node("span", "message-subject", message.subject || "sans objet"));
+
+  head.addEventListener("click", () => {
+    if (open) state.openMessages.delete(message.message_id);
+    else state.openMessages.add(message.message_id);
+    fillMessage(item, message, isLast);
+  });
+  column.appendChild(head);
+
+  if (!open) {
+    row.appendChild(column);
+    item.replaceChildren(row);
+    return;
+  }
+
+  // Ce qui suit la ligne de titre s'aligne sous le texte, pas sous la pastille.
+  const content = node("div", "message-content");
+  column.appendChild(content);
+
+  content.appendChild(messageText(message));
+  if (message.attachments && message.attachments.length > 0) {
+    content.appendChild(attachmentList(message.attachments));
+  }
+
+  const foot = node("div", "message-foot");
+  foot.appendChild(
+    message.read
+      ? tag("tag tag--ok", `lu par ${agentLabel(message.to)}`, "check")
+      : tag("tag tag--warn", `non lu par ${agentLabel(message.to)}`, "clock")
+  );
+  content.appendChild(foot);
+
+  row.appendChild(column);
+  item.replaceChildren(row);
+}
+
+/**
+ * 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;
+}
+
+/** Pièces jointes d'un message : un lien de téléchargement par fichier. */
+function attachmentList(attachments) {
+  const list = node("ul", "attachments");
+  for (const attachment of attachments) {
+    const item = node("li");
+    const link = node("a", "attachment");
+    link.href = `/admin/attachments/${encodeURIComponent(attachment.attachment_id)}`;
+    link.download = attachment.filename;
+    link.title = attachment.mime_type;
+    link.appendChild(icon("paperclip"));
+    link.appendChild(node("span", "attachment-name", attachment.filename));
+    link.appendChild(node("span", "attachment-size", formatSize(attachment.size)));
+    item.appendChild(link);
+    list.appendChild(item);
+  }
+  return list;
+}
+
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} o`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} Ko`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`;
+}
+
+// --- Détails d'un message --------------------------------------------------
+
+/**
+ * Bouton d'information, au bout de la ligne.
+ *
+ * Un fil ne lie que deux boîtes : répéter à chaque message qui écrit à qui, sous quel nom
+ * de boîte, encombre la lecture pour une information déjà connue. Elle est donc rangée
+ * ici, à un clic, avec tout le reste — adresses, identifiants, distribution.
+ */
+function detailsButton(message) {
+  const open = node("button", "message-info");
+  open.type = "button";
+  open.title = "Détails du message";
+  open.setAttribute("aria-label", "Détails du message");
+  open.appendChild(icon("info"));
+  // Le bandeau entier ouvre le message : ce clic-ci ne doit pas le replier au passage.
+  open.addEventListener("click", (event) => {
+    event.stopPropagation();
+    openDetails(message.message_id);
+  });
+  return open;
+}
+
+async function openDetails(messageId) {
+  el.detailsBody.replaceChildren(node("p", "muted", "Chargement…"));
+  el.details.showModal();
+  try {
+    renderDetails(await api(`/admin/messages/${encodeURIComponent(messageId)}`));
+  } catch (error) {
+    if (error.message === "unauthorized") el.details.close();
+    else el.detailsBody.replaceChildren(node("p", "purge-error", `Erreur : ${error.message}`));
+  }
+}
+
+/** Tout ce que la conversation ne montre pas, et que la supervision peut vouloir lire. */
+function renderDetails(message) {
+  const container = document.createDocumentFragment();
+
+  const head = node("div", "modal-head");
+  const titles = node("div");
+  titles.appendChild(node("h2", null, "Détails du message"));
+  titles.appendChild(node("p", "details-subject", message.subject));
+  head.appendChild(titles);
+  const close = node("button", "btn btn--icon btn--ghost");
+  close.type = "button";
+  close.title = "Fermer";
+  close.setAttribute("aria-label", "Fermer les détails");
+  close.appendChild(icon("close"));
+  close.addEventListener("click", () => el.details.close());
+  head.appendChild(close);
+  container.appendChild(head);
+
+  const ids = node("div", "details-section");
+  ids.appendChild(node("span", "section-label", "Message"));
+  ids.appendChild(kvCopy("Identifiant", message.message_id));
+  ids.appendChild(kv("Objet", node("span", "kv-value", message.subject)));
+  ids.appendChild(kv("Envoyé le", node("span", "kv-value", formatDate(message.created_at))));
+  ids.appendChild(kv("Priorité", priorityTag(message.priority)));
+  container.appendChild(ids);
+
+  const thread = node("div", "details-section");
+  thread.appendChild(node("span", "section-label", "Fil"));
+  // Sans nom donné par un participant, le fil n'a que son identifiant et le sujet d'ouverture.
+  thread.appendChild(kv("Nom", node("span", "kv-value", message.thread_title || "fil sans nom")));
+  thread.appendChild(kvCopy("Identifiant", message.thread_id));
+  container.appendChild(thread);
+
+  container.appendChild(partySection("De", message.from));
+  container.appendChild(partySection("À", message.to));
+
+  const deliveries = node("div", "details-section");
+  deliveries.appendChild(node("span", "section-label", "Distribution"));
+  deliveries.appendChild(deliveriesTable(message.deliveries || []));
+  container.appendChild(deliveries);
+
+  el.detailsBody.replaceChildren(container);
+}
+
+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", "details-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;
+}
+
+// --- Navigation ------------------------------------------------------------
+
+async function openThread(threadId) {
+  state.threadId = threadId;
+  // Un fil s'ouvre replié, même celui qu'on rouvre : ce qui était déplié l'était pour
+  // l'autre conversation.
+  state.openMessages.clear();
+  await refreshThread();
+  await refresh({ keepThread: true });
+}
+
+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));
+  }
+}
+
+// --- Boucle de rafraîchissement --------------------------------------------
+
+async function refresh(options) {
+  if (state.view === "links") {
+    await refreshLinks();
+    return;
+  }
+  try {
+    const [overview, list, links] = 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,
+      }),
+      api("/admin/links"),
+    ]);
+    setLoggedIn(true);
+    setStatus("ok", `connecté · ${window.location.host}`);
+    renderAgents(overview);
+    state.links = links.links;
+    renderLinksBadge();
+    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é : ici, chacun borde le panneau qui
+ * le précède. La distinction reste écrite car un panneau ancré à droite se réglerait à
+ * l'envers, en comptant depuis son bord droit.
+ */
+const PANELS = {
+  "resize-agents": { name: "--w-agents", panel: "agentsPane", edge: "before", min: 180, max: 520, initial: 240 },
+  "resize-threads": { name: "--w-threads", panel: "threadsPane", edge: "before", min: 260, max: 720, initial: 400 },
+};
+
+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();
+
+// --- Liaisons --------------------------------------------------------------
+
+/**
+ * Carte des liaisons : une colonne par agent, celle dont la dernière boîte est la plus
+ * récente à gauche ; en hauteur, l'heure exacte de création de chaque boîte, la plus
+ * récente en haut. Les cinq dernières minutes occupent la plus grande part de la hauteur,
+ * le reste de la fenêtre détaillée est resserré. Au-delà de la fenêtre, les boîtes sont
+ * empilées en liste sous leur agent.
+ */
+const LINKS_WINDOW_KEY = "messenger.links.window";
+const LINKS_WINDOWS = [5, 10, 15, 30, 60, 120, 240];
+/** Âge en deçà duquel une boîte est signalée comme fraîche. */
+const FRESH_MINUTES = 5;
+const MAP = {
+  axis: 92,
+  lane: 180,
+  gap: 12,
+  head: 56,
+  card: 46,
+  cardGap: 4,
+  /** Hauteur de la fenêtre détaillée, quelle que soit sa durée. */
+  timePx: 480,
+  oldRow: 30,
+  oldShown: 5,
+  /** Boîtes plus anciennes que la fenêtre proposées dans le volet avant « Afficher ». */
+  oldCandidates: 8,
+};
+
+const linksView = {
+  windowMinutes: 30,
+  /** Adresse de la boîte choisie sur la carte. */
+  selected: null,
+  /** Boîte pour laquelle le volet est construit : ses champs de saisie survivent aux rafraîchissements. */
+  panelFor: null,
+  search: "",
+  note: "",
+  /** Colonnes dont la liste des boîtes anciennes est entièrement dépliée. */
+  showOld: new Set(),
+  showAllCandidates: false,
+  /** Liaison dont la suppression attend son second clic. */
+  armedUnlink: null,
+  /** Glissé en cours depuis la poignée d'une boîte. */
+  drag: null,
+  /** Boîte dont le nom est en cours de saisie sur la carte. */
+  renaming: null,
+  /** Refus du serveur pour le dernier nom proposé : la saisie reste ouverte. */
+  renameError: "",
+  /** Dernier clic sur une boîte : un second clic rapproché sur la même ouvre la saisie. */
+  lastClick: null,
+  /** Position de chaque boîte affichée sur la carte, par adresse. */
+  rects: new Map(),
+  error: "",
+};
+
+function loadLinksWindow() {
+  let saved = null;
+  try {
+    saved = Number(window.localStorage.getItem(LINKS_WINDOW_KEY));
+  } catch {
+    saved = null;
+  }
+  if (LINKS_WINDOWS.includes(saved)) linksView.windowMinutes = saved;
+  el.linksWindow.value = String(linksView.windowMinutes);
+}
+
+function saveLinksWindow() {
+  try {
+    window.localStorage.setItem(LINKS_WINDOW_KEY, String(linksView.windowMinutes));
+  } catch {
+    // Stockage refusé : le réglage vaut pour cette visite.
+  }
+}
+
+/** Heure à la seconde : deux boîtes ouvertes dans la même minute doivent se distinguer. */
+function formatClock(value) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime())
+    ? String(value)
+    : date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+
+/** Âge lisible : « 38 s », « 4 min », « 2 h 05 ». */
+function formatAge(ms) {
+  const seconds = Math.max(0, Math.floor(ms / 1000));
+  if (seconds < 60) return `${seconds} s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes} min`;
+  const hours = Math.floor(minutes / 60);
+  return `${hours} h ${String(minutes % 60).padStart(2, "0")}`;
+}
+
+function formatOffset(minutes) {
+  if (minutes < 60) return `−${minutes} min`;
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+  return rest ? `−${hours} h ${String(rest).padStart(2, "0")}` : `−${hours} h`;
+}
+
+/** Boîtes qu'une liaison peut relier : celles qu'une session a ouvertes. */
+function linkableBoxes() {
+  return [...state.directory.values()].filter((box) => box.registered);
+}
+
+function ageOf(box, now) {
+  return now - new Date(box.created_at).getTime();
+}
+
+function isRecent(box, now) {
+  return ageOf(box, now) <= linksView.windowMinutes * 60_000;
+}
+
+/** Rang de création des boîtes de la fenêtre détaillée : 1 pour la plus récente. */
+function creationRanks(boxes, now) {
+  const recent = boxes.filter((box) => isRecent(box, now)).sort(byCreation);
+  return new Map(recent.map((box, index) => [box.id, index + 1]));
+}
+
+function byCreation(a, b) {
+  return a.created_at < b.created_at ? 1 : a.created_at > b.created_at ? -1 : a.id < b.id ? -1 : 1;
+}
+
+/** Adresses liées à chaque boîte. */
+function linkIndex() {
+  const index = new Map();
+  for (const link of state.links) {
+    const [a, b] = link.mailboxes.map((end) => end.mailbox);
+    if (!index.has(a)) index.set(a, new Set());
+    if (!index.has(b)) index.set(b, new Set());
+    index.get(a).add(b);
+    index.get(b).add(a);
+  }
+  return index;
+}
+
+/** Colonnes de la carte : les boîtes groupées par agent, l'agent le plus récent en tête. */
+function linkLanes(boxes) {
+  const lanes = new Map();
+  for (const box of boxes) {
+    const key = box.agent_name || box.id;
+    if (!lanes.has(key)) lanes.set(key, { key, name: box.agent_name || "agent sans nom", seed: key, boxes: [] });
+    lanes.get(key).boxes.push(box);
+  }
+  const list = [...lanes.values()];
+  for (const lane of list) lane.boxes.sort(byCreation);
+  list.sort((a, b) => byCreation(a.boxes[0], b.boxes[0]));
+  return list;
+}
+
+/** Nombre de boîtes de la fenêtre détaillée que rien ne relie encore. */
+function renderLinksBadge() {
+  const now = Date.now();
+  const linked = linkIndex();
+  const waiting = linkableBoxes().filter((box) => isRecent(box, now) && !linked.has(box.id)).length;
+  el.linksBadge.hidden = waiting === 0;
+  el.linksBadge.textContent = String(waiting);
+  el.linksBadge.title = `${plural(waiting, "boîte récente")} sans liaison`;
+}
+
+async function refreshLinks() {
+  try {
+    const [overview, links] = await Promise.all([api("/admin/overview"), api("/admin/links")]);
+    setLoggedIn(true);
+    setStatus("ok", `connecté · ${window.location.host}`);
+    renderAgents(overview);
+    state.links = links.links;
+    renderLinksView();
+  } catch (error) {
+    if (error.message === "unauthorized") {
+      setStatus("idle", "authentification requise");
+      return;
+    }
+    setStatus("ko", `erreur : ${error.message}`);
+  }
+}
+
+function renderLinksView() {
+  renderLinksBadge();
+  if (linksView.selected && !state.directory.has(linksView.selected)) linksView.selected = null;
+  // Un rafraîchissement pendant un glissé effacerait le fil qu'on est en train de tirer,
+  // et pendant un renommage le nom en cours de saisie.
+  if (!linksView.drag && !linksView.renaming) renderLinksMap();
+  renderLinksPanel();
+}
+
+function setView(view) {
+  if (state.view === view) return;
+  state.view = view;
+  for (const tab of el.tabs.querySelectorAll(".tab")) {
+    tab.classList.toggle("is-active", tab.dataset.view === view);
+  }
+  setLoggedIn(true);
+  refresh({ keepThread: true });
+}
+
+// Carte ---------------------------------------------------------------------
+
+function mapGeometry() {
+  const minutes = linksView.windowMinutes;
+  const nowY = MAP.head + MAP.card / 2 + 6;
+  return { minutes, nowY, bottom: nowY + MAP.timePx };
+}
+
+/** Hauteur, sur la carte, d'une boîte ouverte il y a `ageMinutes` : l'échelle est régulière sur toute la fenêtre. */
+function yForAge(geometry, ageMinutes) {
+  return geometry.nowY + (ageMinutes / geometry.minutes) * MAP.timePx;
+}
+
+/** Graduations de la fenêtre : un pas rond qui en donne six au plus, et la fin de la fenêtre. */
+function timeTicks(geometry) {
+  const { minutes } = geometry;
+  const step = [1, 2, 5, 10, 15, 30, 60].find((candidate) => minutes / candidate <= 6) || 60;
+  const ticks = [];
+  for (let m = step; m < minutes; m += step) ticks.push(m);
+  ticks.push(minutes);
+  return ticks;
+}
+
+function placed(element, x, y, width, height) {
+  element.style.left = `${x}px`;
+  element.style.top = `${y}px`;
+  if (width !== undefined) element.style.width = `${width}px`;
+  if (height !== undefined) element.style.height = `${height}px`;
+  return element;
+}
+
+function renderLinksMap() {
+  const now = Date.now();
+  const geometry = mapGeometry();
+  const boxes = linkableBoxes();
+  const lanes = linkLanes(boxes);
+  const ranks = creationRanks(boxes, now);
+  const linked = linkIndex();
+  const canvas = el.linksCanvas;
+  linksView.rects = new Map();
+
+  if (lanes.length === 0) {
+    const empty = node("div", "empty");
+    empty.appendChild(node("span", "empty-title", "Aucune boîte"));
+    empty.appendChild(document.createTextNode("Les boîtes apparaissent ici dès qu'une session se connecte."));
+    canvas.replaceChildren(empty);
+    canvas.style.width = "";
+    canvas.style.height = "";
+    return;
+  }
+
+  const width = MAP.axis + lanes.length * (MAP.lane + MAP.gap);
+  const fragment = document.createDocumentFragment();
+
+  // Colonnes, et ce qui les place : la position de chaque boîte est calculée ici, une fois.
+  const laneLayouts = lanes.map((lane, index) => {
+    const x = MAP.axis + index * (MAP.lane + MAP.gap);
+    const recent = lane.boxes.filter((box) => isRecent(box, now));
+    const old = lane.boxes.filter((box) => !isRecent(box, now));
+    let previousBottom = MAP.head + 4;
+    const cards = recent.map((box) => {
+      const center = yForAge(geometry, ageOf(box, now) / 60_000);
+      return { box, top: center - MAP.card / 2 };
+    });
+    // Deux boîtes trop proches dans le temps se chevaucheraient : la plus ancienne descend.
+    for (const card of cards) {
+      card.top = Math.max(card.top, previousBottom + MAP.cardGap);
+      previousBottom = card.top + MAP.card;
+    }
+    return { lane, x, cards, old, cardsBottom: previousBottom };
+  });
+
+  // La marge laisse la place au libellé de la dernière graduation, écrit sous son trait.
+  const timeBottom = Math.max(geometry.bottom + 32, ...laneLayouts.map((layout) => layout.cardsBottom + 12));
+  const oldTop = timeBottom + 28;
+  const oldRows = Math.max(
+    1,
+    ...laneLayouts.map((layout) =>
+      linksView.showOld.has(layout.lane.key) ? layout.old.length + 1 : Math.min(layout.old.length, MAP.oldShown) + 1
+    )
+  );
+  const height = oldTop + oldRows * MAP.oldRow + 16;
+
+  for (const layout of laneLayouts) fragment.appendChild(laneColumn(layout, height, now));
+
+  fragment.appendChild(timeAxis(geometry, width, now));
+
+  const separator = placed(node("div", "links-separator"), 8, timeBottom + 8, width - 16);
+  fragment.appendChild(separator);
+  const oldLabel = placed(node("div", "links-axis-label links-axis-old"), 8, timeBottom + 14, MAP.axis - 16);
+  oldLabel.appendChild(node("strong", null, `Plus de ${formatOffset(linksView.windowMinutes).slice(1)}`));
+  oldLabel.appendChild(node("span", null, "listes empilées"));
+  fragment.appendChild(oldLabel);
+
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", "links-wires");
+  svg.setAttribute("width", String(width));
+  svg.setAttribute("height", String(height));
+  fragment.appendChild(svg);
+
+  for (const layout of laneLayouts) {
+    for (const card of layout.cards) {
+      fragment.appendChild(boxCard(card.box, layout.x + 10, card.top, ranks.get(card.box.id), linked, now));
+    }
+    fragment.appendChild(oldList(layout, oldTop, linked));
+  }
+
+  const rename = linksView.renaming ? renameField(linksView.renaming) : null;
+  if (rename) fragment.appendChild(rename);
+  else linksView.renaming = null;
+
+  canvas.replaceChildren(fragment);
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  drawWires(svg);
+
+  const input = canvas.querySelector(".links-rename-input");
+  if (input) {
+    input.focus();
+    input.select();
+  }
+}
+
+function laneColumn(layout, height, now) {
+  const { lane, x } = layout;
+  const column = placed(node("div", "links-lane"), x, 0, MAP.lane, height);
+  const head = node("div", "links-lane-head");
+  head.appendChild(avatarFor(lane.seed, lane.name, lane.name, null, false));
+  const text = node("div", "links-lane-text");
+  text.appendChild(node("div", "links-lane-name", lane.name));
+  const age = ageOf(lane.boxes[0], now);
+  const last = node("div", "links-lane-last", `dernière : il y a ${formatAge(age)}`);
+  if (age <= FRESH_MINUTES * 60_000) last.classList.add("is-fresh");
+  text.appendChild(last);
+  head.appendChild(text);
+  head.title = `${lane.name} · ${plural(lane.boxes.length, "boîte")}`;
+  column.appendChild(head);
+  return column;
+}
+
+function timeAxis(geometry, width, now) {
+  const axis = document.createDocumentFragment();
+
+  const tick = (minutes, kind) => {
+    const y = yForAge(geometry, minutes);
+    axis.appendChild(placed(node("div", `links-tick links-tick--${kind}`), 8, y, width - 16));
+    const label = placed(node("div", `links-axis-label links-axis-label--${kind}`), 8, y + 3, MAP.axis - 16);
+    label.appendChild(node("strong", null, minutes === 0 ? "maintenant" : formatOffset(minutes)));
+    label.appendChild(node("span", "mono", formatClock(now - minutes * 60_000)));
+    axis.appendChild(label);
+  };
+
+  tick(0, "now");
+  for (const m of timeTicks(geometry)) tick(m, "step");
+  return axis;
+}
+
+/** États d'une boîte sur la carte : choisie, liée à la boîte choisie, renommée, ou source d'un glissé. */
+function boxClasses(base, boxId, linked) {
+  const classes = [base];
+  if (linksView.selected === boxId) classes.push("is-selected");
+  if (linksView.selected && linked.get(linksView.selected)?.has(boxId)) classes.push("is-linked");
+  if (linksView.renaming === boxId) classes.push("is-renaming");
+  if (linksView.drag?.from === boxId) classes.push("is-drag-source");
+  return classes.join(" ");
+}
+
+function boxCard(box, x, y, rank, linked, now) {
+  const age = ageOf(box, now);
+  const card = placed(node("button", boxClasses("links-card", box.id, linked)), x, y, MAP.lane - 20, MAP.card);
+  card.type = "button";
+  card.dataset.box = box.id;
+  card.title = boxTitle(box.id);
+
+  card.appendChild(node("span", rank <= 3 ? "links-rank is-top" : "links-rank", String(rank)));
+  const text = node("span", "links-card-text");
+  const line = node("span", "links-card-line");
+  const name = node("span", "links-card-name", box.display_name || box.id);
+  if (!box.display_name) name.classList.add("mono", "is-absent");
+  line.appendChild(name);
+  line.appendChild(renameHandle(box));
+  text.appendChild(line);
+  const meta = node("span", "links-card-meta");
+  meta.appendChild(node("span", "mono", formatClock(box.created_at)));
+  const ago = node("span", "links-card-ago", formatAge(age));
+  if (age <= FRESH_MINUTES * 60_000) ago.classList.add("is-fresh");
+  meta.appendChild(ago);
+  text.appendChild(meta);
+  card.appendChild(text);
+
+  const count = linked.get(box.id)?.size || 0;
+  if (count > 0) {
+    const badge = node("span", "links-card-count");
+    badge.appendChild(icon("link"));
+    badge.appendChild(document.createTextNode(String(count)));
+    badge.title = plural(count, "liaison");
+    card.appendChild(badge);
+  }
+
+  card.appendChild(dragHandle(box));
+  card.addEventListener("click", () => clickLinkBox(box.id));
+  linksView.rects.set(box.id, { x, y, w: MAP.lane - 20, h: MAP.card, kind: "card" });
+  return card;
+}
+
+function oldList(layout, top, linked) {
+  const { lane, x, old } = layout;
+  const list = document.createDocumentFragment();
+  const expanded = linksView.showOld.has(lane.key);
+  const shown = expanded ? old : old.slice(0, MAP.oldShown);
+
+  if (old.length === 0) {
+    list.appendChild(placed(node("div", "links-old-none", "aucune autre boîte"), x + 10, top, MAP.lane - 20, 24));
+    return list;
+  }
+
+  shown.forEach((box, index) => {
+    const y = top + index * MAP.oldRow;
+    const row = placed(node("button", boxClasses("links-old-row", box.id, linked)), x + 10, y, MAP.lane - 20, MAP.oldRow - 4);
+    row.type = "button";
+    row.dataset.box = box.id;
+    row.title = boxTitle(box.id);
+    const name = node("span", "links-old-name", box.display_name || box.id);
+    if (!box.display_name) name.classList.add("mono", "is-absent");
+    row.appendChild(name);
+    if (linked.get(box.id)?.size) row.appendChild(icon("link"));
+    row.appendChild(renameHandle(box));
+    row.appendChild(node("span", "links-old-date", formatShort(box.created_at)));
+    row.appendChild(dragHandle(box));
+    row.addEventListener("click", () => clickLinkBox(box.id));
+    linksView.rects.set(box.id, { x: x + 10, y, w: MAP.lane - 20, h: MAP.oldRow - 4, kind: "row" });
+    list.appendChild(row);
+  });
+
+  if (old.length > MAP.oldShown) {
+    const more = expanded ? "Replier" : `+ ${old.length - MAP.oldShown} autres`;
+    const toggle = placed(
+      button("links-old-more", more, () => {
+        if (expanded) linksView.showOld.delete(lane.key);
+        else linksView.showOld.add(lane.key);
+        renderLinksMap();
+      }),
+      x + 10,
+      top + shown.length * MAP.oldRow,
+      MAP.lane - 20
+    );
+    toggle.dataset.lane = lane.key;
+    list.appendChild(toggle);
+  }
+  return list;
+}
+
+/** Courbe d'une boîte à l'autre : des bords qui se font face, ou par la droite dans une même colonne. */
+function wirePath(from, to) {
+  const ay = from.y + from.h / 2;
+  const by = to.y + to.h / 2;
+  if (from.x + from.w <= to.x || to.x + to.w <= from.x) {
+    const [left, right, ly, ry] = from.x < to.x ? [from, to, ay, by] : [to, from, by, ay];
+    const x1 = left.x + left.w;
+    const x2 = right.x;
+    const dx = Math.max(24, (x2 - x1) / 2);
+    return `M${x1} ${ly} C${x1 + dx} ${ly} ${x2 - dx} ${ry} ${x2} ${ry}`;
+  }
+  const x = from.x + from.w;
+  return `M${x} ${ay} C${x + 40} ${ay} ${x + 40} ${by} ${x} ${by}`;
+}
+
+function wire(svg, d, className) {
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", d);
+  path.setAttribute("class", className);
+  svg.appendChild(path);
+  return path;
+}
+
+function drawWires(svg) {
+  for (const link of state.links) {
+    const [a, b] = link.mailboxes.map((end) => end.mailbox);
+    const from = linksView.rects.get(a);
+    const to = linksView.rects.get(b);
+    if (!from || !to) continue;
+    const active = linksView.selected === a || linksView.selected === b;
+    wire(svg, wirePath(from, to), active ? "links-wire is-active" : "links-wire");
+  }
+}
+
+/** Poignée d'une boîte : la tirer jusqu'à une autre boîte les lie. */
+function dragHandle(box) {
+  const handle = node("span", "links-handle");
+  handle.title = "Tirer jusqu'à une autre boîte pour les lier";
+  handle.addEventListener("click", (event) => event.stopPropagation());
+  handle.addEventListener("pointerdown", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    startLinkDrag(event, box.id, handle);
+  });
+  return handle;
+}
+
+function canvasPoint(event) {
+  const rect = el.linksCanvas.getBoundingClientRect();
+  return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+}
+
+/** Délai de survol au bout duquel « + N autres » se déplie pendant un glissé. */
+const SPRING_MS = 600;
+
+function startLinkDrag(event, boxId, handle) {
+  const svg = el.linksCanvas.querySelector(".links-wires");
+  const from = linksView.rects.get(boxId);
+  if (!svg || !from) return;
+  const start = { x: from.x + from.w, y: from.y + from.h / 2 };
+  let path = wire(svg, "", "links-wire is-drawing");
+  let point = start;
+  let target = null;
+  let spring = null;
+  linksView.drag = { from: boxId };
+  el.links.classList.add("is-linking");
+  handle.closest("[data-box]")?.classList.add("is-drag-source");
+  handle.setPointerCapture?.(event.pointerId);
+
+  const draw = () => {
+    const dx = Math.max(24, Math.abs(point.x - start.x) / 2);
+    path.setAttribute("d", `M${start.x} ${start.y} C${start.x + dx} ${start.y} ${point.x - dx} ${point.y} ${point.x} ${point.y}`);
+  };
+  const setTarget = (next) => {
+    if (target === next) return;
+    target?.classList.remove("is-drop-target");
+    target = next;
+    target?.classList.add("is-drop-target");
+  };
+  // Une liste repliée se déplie sous le fil : la carte est redessinée, le fil retracé.
+  const springOpen = (toggle) => {
+    const lane = toggle && !linksView.showOld.has(toggle.dataset.lane) ? toggle.dataset.lane : null;
+    if (spring?.lane === lane) return;
+    clearTimeout(spring?.timer);
+    spring = null;
+    if (!lane) return;
+    const timer = setTimeout(() => {
+      spring = null;
+      linksView.showOld.add(lane);
+      renderLinksMap();
+      target = null;
+      path = wire(el.linksCanvas.querySelector(".links-wires"), "", "links-wire is-drawing");
+      draw();
+    }, SPRING_MS);
+    spring = { lane, timer };
+  };
+
+  const onMove = (move) => {
+    point = canvasPoint(move);
+    draw();
+    const hit = document.elementFromPoint(move.clientX, move.clientY);
+    const box = hit?.closest("[data-box]");
+    setTarget(box && box.dataset.box !== boxId ? box : null);
+    springOpen(hit?.closest(".links-old-more[data-lane]") || null);
+  };
+  const onUp = (up) => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    clearTimeout(spring?.timer);
+    el.links.classList.remove("is-linking");
+    linksView.drag = null;
+    const target = document.elementFromPoint(up.clientX, up.clientY)?.closest("[data-box]");
+    const to = target?.dataset.box;
+    if (to && to !== boxId) createLink(boxId, to);
+    else renderLinksMap();
+  };
+  window.addEventListener("pointermove", onMove);
+  window.addEventListener("pointerup", onUp);
+}
+
+/** Crayon d'une boîte : ouvre la saisie de son nom. */
+function renameHandle(box) {
+  const pencil = node("span", "links-rename");
+  pencil.title = "Renommer · ou double-clic sur la boîte";
+  pencil.appendChild(icon("pencil"));
+  pencil.addEventListener("click", (event) => {
+    event.stopPropagation();
+    startRename(box.id);
+  });
+  return pencil;
+}
+
+/** Écart maximal entre deux clics sur une même boîte pour ouvrir la saisie de son nom. */
+const DOUBLE_CLICK_MS = 400;
+
+/**
+ * Un clic choisit la boîte, un second clic rapproché ouvre la saisie de son nom. Le
+ * double-clic natif ne sert pas : le premier clic redessine la carte, et le second tombe
+ * sur un autre élément.
+ */
+function clickLinkBox(boxId) {
+  const now = Date.now();
+  const last = linksView.lastClick;
+  if (last && last.box === boxId && now - last.at < DOUBLE_CLICK_MS) {
+    linksView.lastClick = null;
+    startRename(boxId);
+    return;
+  }
+  linksView.lastClick = { box: boxId, at: now };
+  selectLinkBox(boxId);
+}
+
+function startRename(boxId) {
+  linksView.renaming = boxId;
+  linksView.renameError = "";
+  if (linksView.selected !== boxId) {
+    linksView.selected = boxId;
+    linksView.armedUnlink = null;
+    linksView.error = "";
+  }
+  renderLinksMap();
+  renderLinksPanel();
+}
+
+function cancelRename() {
+  linksView.renaming = null;
+  linksView.renameError = "";
+  renderLinksMap();
+}
+
+/**
+ * Champ de saisie posé sur le nom de la boîte : sur la ligne du nom d'une carte, sur
+ * toute la ligne d'une boîte ancienne. Entrée ou la perte du focus enregistre, Échap annule.
+ */
+function renameField(boxId) {
+  const box = state.directory.get(boxId);
+  const rect = linksView.rects.get(boxId);
+  if (!box || !rect) return null;
+  const field = document.createDocumentFragment();
+  const input = document.createElement("input");
+  input.type = "text";
+  input.className = linksView.renameError ? "links-rename-input is-invalid" : "links-rename-input";
+  input.maxLength = 200;
+  input.value = box.display_name || "";
+  input.placeholder = "Nom de la boîte";
+  input.setAttribute("aria-label", `Nom de la boîte ${boxId}`);
+  if (rect.kind === "card") placed(input, rect.x + 36, rect.y + 4, rect.w - 46, 20);
+  else placed(input, rect.x, rect.y, rect.w, rect.h);
+
+  let done = false;
+  const finish = (save) => {
+    if (done) return;
+    done = true;
+    if (save) commitRename(boxId, input.value);
+    else cancelRename();
+  };
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      finish(true);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      finish(false);
+    }
+  });
+  input.addEventListener("blur", () => finish(true));
+  input.addEventListener("click", (event) => event.stopPropagation());
+  field.appendChild(input);
+
+  const hint = node(
+    "div",
+    linksView.renameError ? "links-rename-hint is-error" : "links-rename-hint",
+    linksView.renameError || "Entrée valider · Échap annuler"
+  );
+  field.appendChild(placed(hint, rect.x, rect.y + rect.h + 4));
+  return field;
+}
+
+/**
+ * Enregistre le nom saisi. La carte l'affiche aussitôt ; un refus du serveur rend l'ancien
+ * nom et rouvre la saisie avec le motif. Un nom vide efface celui de la boîte.
+ */
+async function commitRename(boxId, value) {
+  const box = state.directory.get(boxId);
+  const name = value.trim();
+  linksView.renaming = null;
+  linksView.renameError = "";
+  if (!box || name === (box.display_name || "")) {
+    renderLinksMap();
+    return;
+  }
+  state.directory.set(boxId, { ...box, display_name: name || null });
+  renderLinksMap();
+  renderLinksPanel();
+  try {
+    await patch(`/admin/mailboxes/${encodeURIComponent(boxId)}`, { display_name: name || null });
+  } catch (error) {
+    state.directory.set(boxId, box);
+    linksView.renaming = boxId;
+    linksView.renameError = error.message;
+    renderLinksMap();
+    renderLinksPanel();
+    return;
+  }
+  await refreshLinks();
+}
+
+function selectLinkBox(boxId) {
+  linksView.selected = linksView.selected === boxId ? null : boxId;
+  linksView.armedUnlink = null;
+  linksView.error = "";
+  renderLinksMap();
+  renderLinksPanel();
+}
+
+async function createLink(first, second) {
+  linksView.error = "";
+  try {
+    await post("/admin/links", { mailboxes: [first, second], note: linksView.note.trim() || null });
+    linksView.note = "";
+    const note = el.linksPanel.querySelector("#links-note");
+    if (note) note.value = "";
+  } catch (error) {
+    linksView.error = error.message;
+  }
+  await refreshLinks();
+}
+
+async function deleteLink(linkId) {
+  if (linksView.armedUnlink !== linkId) {
+    linksView.armedUnlink = linkId;
+    renderLinksPanel();
+    return;
+  }
+  linksView.armedUnlink = null;
+  linksView.error = "";
+  try {
+    await remove(`/admin/links/${encodeURIComponent(linkId)}`);
+  } catch (error) {
+    linksView.error = error.message;
+  }
+  await refreshLinks();
+}
+
+// Volet ---------------------------------------------------------------------
+
+/**
+ * Volet de la boîte choisie. Il n'est reconstruit qu'au changement de boîte : ses champs
+ * de saisie gardent leur contenu et le focus pendant les rafraîchissements, seules les
+ * listes sont redessinées.
+ */
+function renderLinksPanel() {
+  const id = linksView.selected;
+  if (!id) {
+    linksView.panelFor = null;
+    const empty = node("div", "empty");
+    empty.appendChild(node("span", "empty-title", "Aucune boîte choisie"));
+    empty.appendChild(document.createTextNode("Choisissez une boîte sur la carte pour voir ses liaisons et en créer."));
+    el.linksPanel.replaceChildren(empty, deliveryNote());
+    return;
+  }
+  if (linksView.panelFor !== id) buildLinksPanel(id);
+  fillLinksPanel(id);
+}
+
+function buildLinksPanel(id) {
+  linksView.panelFor = id;
+  linksView.search = "";
+  linksView.showAllCandidates = false;
+  const panel = document.createDocumentFragment();
+
+  const head = node("div", "links-panel-head");
+  head.appendChild(node("span", "section-label", "Boîte sélectionnée"));
+  const close = node("button", "btn btn--icon btn--ghost");
+  close.type = "button";
+  close.title = "Fermer";
+  close.setAttribute("aria-label", "Désélectionner la boîte");
+  close.appendChild(icon("close"));
+  close.addEventListener("click", () => selectLinkBox(id));
+  head.appendChild(close);
+  panel.appendChild(head);
+
+  panel.appendChild(node("div", "links-panel-box"));
+
+  const linksSection = node("div", "links-panel-section");
+  linksSection.appendChild(node("h3", null, "Liaisons"));
+  linksSection.appendChild(node("ul", "links-panel-links"));
+  panel.appendChild(linksSection);
+
+  const linkTo = node("div", "links-panel-section");
+  const title = node("div", "links-panel-title");
+  title.appendChild(node("h3", null, "Lier à…"));
+  title.appendChild(node("span", "muted", "rang de création"));
+  linkTo.appendChild(title);
+
+  const note = document.createElement("input");
+  note.type = "text";
+  note.id = "links-note";
+  note.className = "links-input";
+  note.maxLength = 500;
+  note.placeholder = "Motif transmis aux deux agents (facultatif)";
+  note.value = linksView.note;
+  note.addEventListener("input", () => {
+    linksView.note = note.value;
+  });
+  linkTo.appendChild(note);
+
+  const search = node("label", "links-search");
+  search.appendChild(icon("search"));
+  const input = document.createElement("input");
+  input.type = "search";
+  input.placeholder = "Agent ou nom de boîte…";
+  input.addEventListener("input", () => {
+    linksView.search = input.value.trim().toLowerCase();
+    fillLinksPanel(id);
+  });
+  search.appendChild(input);
+  linkTo.appendChild(search);
+
+  linkTo.appendChild(node("p", "links-error"));
+  linkTo.appendChild(node("ul", "links-candidates"));
+  panel.appendChild(linkTo);
+  panel.appendChild(deliveryNote());
+
+  el.linksPanel.replaceChildren(panel);
+}
+
+function deliveryNote() {
+  const note = node("p", "links-delivery");
+  note.appendChild(icon("info"));
+  note.appendChild(
+    document.createTextNode(
+      "Chaque agent reçoit la liaison à sa prochaine connexion (whoami), ou aussitôt si ses notifications sont armées."
+    )
+  );
+  return note;
+}
+
+function fillLinksPanel(id) {
+  const box = state.directory.get(id);
+  const now = Date.now();
+  const boxes = linkableBoxes();
+  const ranks = creationRanks(boxes, now);
+
+  const summary = el.linksPanel.querySelector(".links-panel-box");
+  summary.replaceChildren();
+  const identity = node("div", "links-panel-identity");
+  identity.appendChild(agentAvatar(id, "avatar--lg"));
+  const names = node("div", "agent-text");
+  names.appendChild(node("div", "links-panel-agent", agentLabel(id)));
+  const address = node("div", "party-addr");
+  address.appendChild(node("span", null, box.display_name || "boîte sans nom"));
+  address.appendChild(node("span", "mono", `· ${id}`));
+  address.appendChild(copyButton(id, "Copier l'adresse"));
+  names.appendChild(address);
+  identity.appendChild(names);
+  summary.appendChild(identity);
+  const rank = ranks.get(id);
+  summary.appendChild(
+    node(
+      "p",
+      "links-panel-meta",
+      [`Créée à ${formatClock(box.created_at)}`, `il y a ${formatAge(ageOf(box, now))}`, rank ? `rang #${rank}` : null]
+        .filter(Boolean)
+        .join(" · ")
+    )
+  );
+  if (box.description) summary.appendChild(node("p", "links-panel-meta", box.description));
+
+  const own = state.links.filter((link) => link.mailboxes.some((end) => end.mailbox === id));
+  const list = el.linksPanel.querySelector(".links-panel-links");
+  list.replaceChildren();
+  if (own.length === 0) list.appendChild(node("li", "links-panel-none", "Aucune liaison."));
+  for (const link of own) list.appendChild(linkRow(link, id));
+
+  el.linksPanel.querySelector(".links-error").textContent = linksView.error;
+
+  const linked = linkIndex().get(id) || new Set();
+  const search = linksView.search;
+  const candidates = boxes
+    .filter((other) => other.id !== id && !linked.has(other.id))
+    .filter(
+      (other) =>
+        !search ||
+        [other.agent_name, other.display_name, other.id].some((value) => (value || "").toLowerCase().includes(search))
+    )
+    .sort(byCreation);
+  const recent = candidates.filter((other) => isRecent(other, now));
+  const old = candidates.filter((other) => !isRecent(other, now));
+
+  const container = el.linksPanel.querySelector(".links-candidates");
+  container.replaceChildren();
+  if (candidates.length === 0) {
+    container.appendChild(node("li", "links-panel-none", search ? "Aucune boîte ne correspond." : "Aucune autre boîte à lier."));
+    return;
+  }
+  for (const other of recent) container.appendChild(candidateRow(id, other, ranks.get(other.id), now));
+  if (old.length > 0) {
+    container.appendChild(
+      node("li", "links-candidates-sep", `Plus de ${formatOffset(linksView.windowMinutes).slice(1)}`)
+    );
+    const shown = linksView.showAllCandidates ? old : old.slice(0, MAP.oldCandidates);
+    for (const other of shown) container.appendChild(candidateRow(id, other, null, now));
+    if (shown.length < old.length) {
+      const item = node("li");
+      item.appendChild(
+        button("btn btn--link", `Afficher les ${old.length - shown.length} autres`, () => {
+          linksView.showAllCandidates = true;
+          fillLinksPanel(id);
+        })
+      );
+      container.appendChild(item);
+    }
+  }
+}
+
+function linkRow(link, selfId) {
+  const item = node("li", "links-panel-link");
+  const otherId = link.mailboxes.find((end) => end.mailbox !== selfId).mailbox;
+  const other = state.directory.get(otherId);
+
+  const top = node("div", "links-panel-link-top");
+  top.appendChild(agentAvatar(otherId, "avatar--sm"));
+  const text = node("div", "agent-text");
+  text.appendChild(node("div", "agent-name", agentLabel(otherId)));
+  text.appendChild(node("div", "agent-box", other ? other.display_name || otherId : otherId));
+  top.appendChild(text);
+
+  const armed = linksView.armedUnlink === link.link_id;
+  const unlink = node("button", armed ? "btn btn--danger links-unlink" : "btn btn--icon btn--ghost links-unlink");
+  unlink.type = "button";
+  unlink.title = armed ? "Confirmer la suppression de la liaison" : "Supprimer la liaison";
+  unlink.setAttribute("aria-label", unlink.title);
+  if (armed) unlink.textContent = "Confirmer";
+  else unlink.appendChild(icon("unlink"));
+  unlink.addEventListener("click", () => deleteLink(link.link_id));
+  top.appendChild(unlink);
+  item.appendChild(top);
+
+  if (link.note) item.appendChild(node("p", "links-panel-note", link.note));
+
+  const status = node("div", "links-panel-status");
+  status.appendChild(node("span", "muted", `liée à ${formatClock(link.created_at)}`));
+  for (const end of link.mailboxes) {
+    const who = agentLabel(end.mailbox);
+    status.appendChild(
+      end.seen_at ? tag("tag tag--ok", `reçue par ${who}`, "check") : tag("tag tag--warn", `en attente : ${who}`, "clock")
+    );
+  }
+  item.appendChild(status);
+  return item;
+}
+
+function candidateRow(selfId, other, rank, now) {
+  const item = node("li", "links-candidate");
+  if (rank) item.appendChild(node("span", rank <= 3 ? "links-rank is-top" : "links-rank", String(rank)));
+  else item.appendChild(node("span", "links-rank is-old", "·"));
+  item.appendChild(agentAvatar(other.id, "avatar--sm"));
+  const text = node("div", "agent-text");
+  text.appendChild(node("div", "agent-name", agentLabel(other.id)));
+  const age = ageOf(other, now);
+  const meta = node(
+    "div",
+    "agent-box",
+    rank
+      ? `${other.display_name || shortAddress(other.id)} · ${formatClock(other.created_at)} · ${formatAge(age)}`
+      : `${other.display_name || shortAddress(other.id)} · ${formatShort(other.created_at)}`
+  );
+  if (rank && age <= FRESH_MINUTES * 60_000) meta.classList.add("is-fresh");
+  text.appendChild(meta);
+  item.appendChild(text);
+  item.title = boxTitle(other.id);
+  item.appendChild(button("btn links-link", "Lier", () => createLink(selfId, other.id)));
+  return item;
+}
+
+// --- 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);
+  const today = new Date().toISOString().slice(0, 10);
+  el.purgeBefore.value = month.toISOString().slice(0, 10);
+  el.purgeBefore.max = today;
+  el.purgeCreatedBefore.value = month.toISOString().slice(0, 10);
+  el.purgeCreatedBefore.max = today;
+  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);
+}
+
+/** Boîtes ouvertes avant la date choisie, qu'elles servent encore ou non. */
+async function previewCreated() {
+  const before = el.purgeCreatedBefore.value;
+  if (!before) return;
+  await previewPurge("created", () => api("/admin/mailboxes/created-before", { created_before: 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 quatre suppressions
+  // remplissent la même liste, et elles ne portent pas sur les mêmes boîtes. Les deux
+  // critères datés se distinguent par leur seule formulation : « depuis » regarde
+  // l'activité, « créée avant » regarde l'ouverture de la boîte.
+  const dated =
+    purge.mode === "created"
+      ? ` créée avant le ${formatDay(purge.before)}`
+      : ` sans activité depuis le ${formatDay(purge.before)}`;
+  const criterion = purge.mode === "empty" ? "vide" : purge.mode === "one" ? "" : dated;
+
+  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")}.`
+          : purge.mode === "created"
+            ? `${plural(count, "boîte créée", "boîtes créées")} avant le ${formatDay(purge.before)}.`
+            : `${plural(count, "boîte")}${dated}.`
+    )
+  );
+
+  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 }
+              : purge.mode === "created"
+                ? { created_before: purge.before }
+                : { 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;
+    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.purgeCreatedBefore.addEventListener("change", resetPurge);
+el.purgePreview.addEventListener("click", previewStale);
+el.purgePreviewCreated.addEventListener("click", previewCreated);
+el.purgePreviewEmpty.addEventListener("click", previewEmpty);
+el.purgeConfirm.addEventListener("click", confirmPurge);
+
+el.refresh.addEventListener("click", () => refresh({ keepThread: true }));
+
+el.tabs.addEventListener("click", (event) => {
+  const tab = event.target.closest(".tab");
+  if (tab) setView(tab.dataset.view);
+});
+
+el.linksWindow.addEventListener("change", () => {
+  linksView.windowMinutes = Number(el.linksWindow.value);
+  saveLinksWindow();
+  renderLinksView();
+});
+
+// Échap relâche la boîte choisie sur la carte, sauf depuis un champ du volet.
+document.addEventListener("keydown", (event) => {
+  if (event.key !== "Escape" || state.view !== "links" || !linksView.selected) return;
+  if (event.target.closest && event.target.closest("input, select, dialog")) return;
+  selectLinkBox(linksView.selected);
+});
+
+// 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.openMessages = new Set();
+  state.directory = new Map();
+  state.groups = [];
+  state.links = [];
+  linksView.selected = null;
+  linksView.panelFor = null;
+  el.linksCanvas.replaceChildren();
+  el.linksPanel.replaceChildren();
+  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}`;
+loadLinksWindow();
+renderEmptyReader();
+refresh();