@imenam/mcp-messenger 1.0.10 → 1.0.13

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

@@ -1,372 +1,883 @@
-// Console de supervision : lecture seule sur les routes /admin du serveur.
-// Tout le contenu affiché provient d'agents : il est inséré via textContent uniquement.
-
-const REFRESH_MS = 5000;
-
-// L'authentification tient dans un cookie de session HttpOnly posé par `/ui/login` :
-// ce script ne voit jamais le jeton, et ne stocke rien dans le navigateur.
-
-const state = {
-  agent: null,
-  search: "",
-  selectedMessageId: null,
-  threadId: null,
-  threadTitle: null,
-  // Historique déplié ou non sous le message ouvert. En mémoire de page, comme le reste :
-  // rien n'est écrit dans le navigateur, mais le choix tient d'un message à l'autre.
-  historyExpanded: false,
-};
-
-const el = {
-  statusDot: document.getElementById("status-dot"),
-  serverStats: document.getElementById("server-stats"),
-  agents: document.getElementById("agents"),
-  messages: document.getElementById("messages"),
-  detail: document.getElementById("detail"),
-  search: document.getElementById("search"),
-  filterLabel: document.getElementById("filter-label"),
-  clearFilters: document.getElementById("clear-filters"),
-  refresh: document.getElementById("refresh"),
-  autoRefresh: document.getElementById("auto-refresh"),
-  logout: document.getElementById("logout"),
-  loginForm: document.getElementById("login-form"),
-  tokenInput: document.getElementById("token"),
-  tokenError: document.getElementById("token-error"),
-};
-
-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();
-}
-
-function setLoggedIn(loggedIn) {
-  el.loginForm.hidden = loggedIn;
-  el.logout.hidden = !loggedIn;
-  if (!loggedIn) el.tokenInput.focus();
-}
-
-/** Remplace le contenu du panneau de détail (et retire l'état « vide » hérité du HTML). */
-function setDetail(child, empty) {
-  el.detail.className = empty ? "empty" : "detail-content";
-  el.detail.replaceChildren(child);
-}
-
-function node(tag, className, text) {
-  const element = document.createElement(tag);
-  if (className) element.className = className;
-  if (text !== undefined) element.textContent = text;
-  return element;
-}
-
-function formatDate(iso) {
-  const date = new Date(iso);
-  return Number.isNaN(date.getTime()) ? iso : date.toLocaleString();
-}
-
-/** Le titre suit l'id : le bandeau de filtre doit rester lisible, pas afficher un id nu. */
-function setThreadFilter(threadId, title) {
-  state.threadId = threadId;
-  state.threadTitle = title;
-}
-
-function renderAgents(overview) {
-  el.serverStats.textContent =
-    overview.messages + " message(s) · " + overview.threads + " fil(s) · " + overview.agents.length + " agent(s)";
-  el.statusDot.className = "dot ok";
-  el.agents.replaceChildren();
-
-  for (const agent of overview.agents) {
-    const item = node("li", state.agent === agent.id ? "selected" : "");
-    // Deux noms, deux questions : l'agent dit d'où l'on écrit (le projet), la boîte de quoi
-    // cette session s'occupe. L'un sans l'autre ne suffit pas à s'y retrouver.
-    // L'adresse ne dit rien à l'utilisateur, elle reste là pour être copiée.
-    item.appendChild(node("div", "name", agent.agent_name || "agent sans nom"));
-    item.appendChild(node("div", "mailbox-name", agent.display_name || "boîte sans nom"));
-    item.appendChild(node("div", "id", agent.id));
-    item.appendChild(
-      node("div", "muted", "envoyés " + agent.sent + " · reçus " + agent.received + " · non lus " + agent.unread)
-    );
-    // La liste est classée sur cette date : sans elle, l'ordre paraîtrait arbitraire.
-    item.appendChild(
-      node("div", "muted", agent.last_activity_at ? "activité " + formatDate(agent.last_activity_at) : "aucune activité")
-    );
-    if (!agent.registered) item.appendChild(node("div", "muted", "jamais connecté"));
-    item.addEventListener("click", () => {
-      state.agent = state.agent === agent.id ? null : agent.id;
-      setThreadFilter(null, null);
-      refresh();
-    });
-    el.agents.appendChild(item);
-  }
-}
-
-function renderMessages(messages) {
-  el.filterLabel.textContent = [
-    state.agent ? "agent : " + state.agent : null,
-    state.threadId ? "fil : " + (state.threadTitle || state.threadId) : null,
-  ]
-    .filter(Boolean)
-    .join(" · ");
-
-  el.messages.replaceChildren();
-  if (messages.length === 0) {
-    el.messages.appendChild(node("li", "empty", "Aucun message."));
-    return;
-  }
-
-  for (const message of messages) {
-    const item = node("li", state.selectedMessageId === message.message_id ? "selected" : "");
-    const subject = node("div", "subject", message.subject);
-    if (message.priority !== "normal") {
-      const badge = node("span", "badge" + (message.priority === "high" ? " high" : ""), message.priority);
-      subject.appendChild(badge);
-    }
-    item.appendChild(subject);
-    // Le nom du fil dit de quelle conversation relève le message ; sans nom, rien à afficher.
-    if (message.thread_title) item.appendChild(node("div", "thread-name", message.thread_title));
-    item.appendChild(
-      node("div", "route", message.from + " → " + (message.to || "—") + " · " + formatDate(message.created_at))
-    );
-    item.appendChild(node("div", "preview", message.preview));
-    item.addEventListener("click", () => openMessage(message.message_id));
-    el.messages.appendChild(item);
-  }
-}
-
-async function openMessage(messageId) {
-  state.selectedMessageId = messageId;
-  try {
-    const message = await api("/admin/messages/" + encodeURIComponent(messageId));
-    // Le fil est chargé avec le message : déplier l'historique ne coûte pas d'aller-retour.
-    // Son échec n'empêche pas de lire le message, il ne fait que priver de l'historique.
-    const thread = await api("/admin/threads/" + encodeURIComponent(message.thread_id)).catch(() => null);
-    renderDetail(message, thread);
-    await refresh({ keepDetail: true });
-  } catch (error) {
-    setDetail(node("div", "error", error.message), false);
-  }
-}
-
-/**
- * Les messages du fil antérieurs à celui-ci, du plus récent au plus ancien.
- *
- * Un message se lit comme un mail : ce qui l'a précédé l'explique, ce qui l'a suivi appartient
- * à la suite du fil et se lit dans la vue du fil complet.
- */
-function earlierMessages(message, thread) {
-  const messages = (thread && thread.messages) || [];
-  const index = messages.findIndex((m) => m.message_id === message.message_id);
-  const earlier = index === -1 ? messages.filter((m) => m.created_at < message.created_at) : messages.slice(0, index);
-  return earlier.slice().reverse();
-}
-
-/** Bouton d'ouverture et bloc cité : replié par défaut, comme le fait une boîte mail. */
-function renderHistory(container, earlier) {
-  if (earlier.length === 0) return;
-  const label = () =>
-    (state.historyExpanded ? "Masquer" : "Afficher") + " les " + earlier.length + " message(s) précédent(s)";
-  const toggle = node("button", "history-toggle", label());
-  const history = node("div", "history");
-  history.hidden = !state.historyExpanded;
-
-  for (const previous of earlier) {
-    const block = node("div", "quoted");
-    block.appendChild(
-      node("div", "quoted-head", previous.from + " → " + (previous.to || "—") + " · " + formatDate(previous.created_at))
-    );
-    block.appendChild(node("div", "quoted-subject", previous.subject));
-    // `body` vient du fil complet ; l'aperçu ne sert que si une réponse ancienne n'en a pas.
-    block.appendChild(node("div", "quoted-body", previous.body || previous.preview || ""));
-    history.appendChild(block);
-  }
-
-  toggle.addEventListener("click", () => {
-    state.historyExpanded = !state.historyExpanded;
-    history.hidden = !state.historyExpanded;
-    toggle.textContent = label();
-  });
-  container.appendChild(toggle);
-  container.appendChild(history);
-}
-
-function renderDetail(message, thread) {
-  const container = node("div", "detail");
-  container.appendChild(node("h3", null, message.subject));
-  container.appendChild(
-    node(
-      "div",
-      "meta",
-      "De " +
-        message.from +
-        " · À " +
-        (message.to || "—") +
-        "\n" +
-        formatDate(message.created_at) +
-        " · priorité " +
-        message.priority +
-        "\nid " +
-        message.message_id +
-        " · fil " +
-        (message.thread_title ? message.thread_title + " (" + message.thread_id + ")" : message.thread_id)
-    )
-  );
-
-  container.appendChild(node("div", "body", message.body));
-
-  // Sous le corps, comme dans une boîte mail : d'abord ce qui a mené à ce message, replié ;
-  // la vue chronologique du fil entier reste une action à part, elle ne se déplie pas ici.
-  renderHistory(container, earlierMessages(message, thread));
-
-  const threadButton = node("button", "thread-link", "Voir le fil complet");
-  threadButton.addEventListener("click", () => showThread(message.thread_id));
-  container.appendChild(threadButton);
-
-  const deliveries = node("div", "deliveries");
-  deliveries.appendChild(node("h2", null, "Distribution"));
-  const list = node("ul");
-  for (const delivery of message.deliveries) {
-    list.appendChild(
-      node(
-        "li",
-        null,
-        delivery.agent_id +
-          " · " +
-          delivery.role +
-          " · dossier " +
-          delivery.folder +
-          " · " +
-          (delivery.read ? "lu" : "non lu")
-      )
-    );
-  }
-  deliveries.appendChild(list);
-  container.appendChild(deliveries);
-
-  setDetail(container, false);
-}
-
-async function showThread(threadId) {
-  try {
-    const data = await api("/admin/threads/" + encodeURIComponent(threadId));
-    const container = node("div", "detail");
-    const title = (data.thread && data.thread.title) || null;
-    container.appendChild(node("h3", null, (title || "Fil " + threadId) + " — " + data.messages.length + " message(s)"));
-    if (title) container.appendChild(node("div", "meta", "fil " + threadId));
-    if (data.thread && data.thread.description) {
-      container.appendChild(node("div", "thread-description", data.thread.description));
-    }
-
-    const filterButton = node("button", null, "Filtrer la liste sur ce fil");
-    filterButton.addEventListener("click", () => {
-      setThreadFilter(threadId, title);
-      refresh({ keepDetail: true });
-    });
-    container.appendChild(filterButton);
-
-    for (const message of data.messages) {
-      const block = node("div", "thread-message");
-      block.appendChild(node("div", "subject", message.subject));
-      block.appendChild(
-        node("div", "meta", message.from + " → " + (message.to || "—") + " · " + formatDate(message.created_at))
-      );
-      block.appendChild(node("div", "preview", message.preview));
-      const openButton = node("button", "link", "ouvrir");
-      openButton.addEventListener("click", () => openMessage(message.message_id));
-      block.appendChild(openButton);
-      container.appendChild(block);
-    }
-    setDetail(container, false);
-  } catch (error) {
-    setDetail(node("div", "error", error.message), false);
-  }
-}
-
-async function refresh(options) {
-  try {
-    const [overview, list] = await Promise.all([
-      api("/admin/overview"),
-      api("/admin/messages", { agent: state.agent, search: state.search, thread_id: state.threadId, limit: 100 }),
-    ]);
-    setLoggedIn(true);
-    renderAgents(overview);
-    renderMessages(list.messages);
-    if (!options || !options.keepDetail) {
-      if (!state.selectedMessageId) {
-        setDetail(node("div", null, "Sélectionnez un message pour voir son contenu."), true);
-      }
-    }
-  } catch (error) {
-    el.statusDot.className = "dot ko";
-    if (error.message === "unauthorized") {
-      el.serverStats.textContent = "authentification requise";
-    } else {
-      el.serverStats.textContent = "erreur : " + error.message;
-    }
-  }
-}
-
-el.refresh.addEventListener("click", () => refresh({ keepDetail: true }));
-el.clearFilters.addEventListener("click", () => {
-  state.agent = null;
-  setThreadFilter(null, null);
-  state.search = "";
-  el.search.value = "";
-  refresh({ keepDetail: true });
-});
-
-let searchTimer = null;
-el.search.addEventListener("input", (event) => {
-  state.search = event.target.value.trim();
-  clearTimeout(searchTimer);
-  searchTimer = setTimeout(() => refresh({ keepDetail: true }), 250);
-});
-
-el.loginForm.addEventListener("submit", async (event) => {
-  event.preventDefault();
-  el.tokenError.textContent = "";
-  const token = el.tokenInput.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.tokenInput.value = "";
-  if (!response || !response.ok) {
-    el.tokenError.textContent = response && response.status === 429 ? "trop de tentatives, réessayez plus tard" : "jeton refusé";
-    return;
-  }
-  refresh();
-});
-
-el.logout.addEventListener("click", async () => {
-  await fetch("/ui/logout", { method: "POST", credentials: "same-origin" }).catch(() => null);
-  setLoggedIn(false);
-  el.statusDot.className = "dot";
-  el.serverStats.textContent = "déconnecté";
-  el.agents.replaceChildren();
-  el.messages.replaceChildren();
-  state.selectedMessageId = null;
-  setDetail(node("div", null, "Sélectionnez un message pour voir son contenu."), true);
-});
-
-setInterval(() => {
-  if (el.autoRefresh.checked && el.loginForm.hidden) refresh({ keepDetail: true });
-}, REFRESH_MS);
-
-refresh();
+// Console de supervision : lecture seule sur les routes /admin du serveur.
+//
+// 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.
+//
+// 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.
+
+const REFRESH_MS = 5000;
+
+// Une adresse ne dit rien à qui lit la console : elle sert de graine à la couleur de
+// l'avatar, pour que la même boîte garde la même teinte d'un écran à l'autre.
+const AVATAR_COLORS = 8;
+
+const ICONS = {
+  copy: ["M9 3h9a2 2 0 0 1 2 2v9", "M5 7h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z"],
+  check: ["M20 6 9 17l-5-5"],
+  clock: ["M12 6v6l4 2", "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z"],
+  close: ["M18 6 6 18", "m6 6 12 12"],
+  link: ["M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1", "M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"],
+  chevron: ["m9 18 6-6-6-6"],
+};
+
+const state = {
+  /**
+   * Ce sur quoi la liste des fils est filtrée.
+   *
+   * `{ kind: "all" }` ne filtre rien ; `{ kind: "agent", key }` retient toutes les boîtes
+   * d'un projet ; `{ kind: "box", key }` une seule session. Deux niveaux, parce qu'un
+   * agent tient une boîte par session ouverte et que les deux questions se posent.
+   */
+  selection: { kind: "all", key: null },
+  /** Noms d'agents dépliés dans la colonne de gauche. Tout est replié au départ. */
+  expanded: new Set(),
+  /** "all" | "unread" | "high" — les puces au-dessus de la liste des fils. */
+  filter: "all",
+  search: "",
+  threadId: null,
+  /** Message dont le volet de détail est ouvert, ou null si le volet est fermé. */
+  messageId: null,
+  collapsed: false,
+  /** Annuaire des boîtes, indexé par adresse : rempli par chaque `/admin/overview`. */
+  directory: new Map(),
+  /** Boîtes regroupées par nom d'agent, dans l'ordre de l'annuaire. */
+  groups: [],
+};
+
+const el = {
+  status: document.getElementById("status"),
+  statusLabel: document.getElementById("status-label"),
+  searchBox: document.getElementById("search-box"),
+  search: document.getElementById("search"),
+  controls: document.getElementById("controls"),
+  autoRefresh: document.getElementById("auto-refresh"),
+  refresh: document.getElementById("refresh"),
+  logout: document.getElementById("logout"),
+  login: document.getElementById("login"),
+  loginForm: document.getElementById("login-form"),
+  loginOrigin: document.getElementById("login-origin"),
+  tokenField: document.querySelector("#login-form .field"),
+  token: document.getElementById("token"),
+  tokenReveal: document.getElementById("token-reveal"),
+  tokenError: document.getElementById("token-error"),
+  console: document.getElementById("console"),
+  agentsPane: document.getElementById("agents-pane"),
+  agents: document.getElementById("agents"),
+  agentsFoot: document.getElementById("agents-foot"),
+  collapse: document.getElementById("collapse"),
+  threadsScope: document.getElementById("threads-scope"),
+  chips: document.getElementById("chips"),
+  threads: document.getElementById("threads"),
+  reader: document.getElementById("reader"),
+  sheet: document.getElementById("sheet"),
+};
+
+// --- Fabrique de noeuds ----------------------------------------------------
+
+function node(tag, className, text) {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  if (text !== undefined) element.textContent = text;
+  return element;
+}
+
+function icon(name) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", "icon");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  for (const d of ICONS[name]) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", d);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+
+function button(className, label, onClick) {
+  const element = node("button", className, label);
+  element.type = "button";
+  element.addEventListener("click", onClick);
+  return element;
+}
+
+/** Bouton de copie : les adresses et les identifiants ne se recopient pas à la main. */
+function copyButton(value, label) {
+  const element = node("button", "copy");
+  element.type = "button";
+  element.title = label;
+  element.setAttribute("aria-label", label);
+  element.appendChild(icon("copy"));
+  element.addEventListener("click", async (event) => {
+    event.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(value);
+      element.replaceChildren(icon("check"));
+      setTimeout(() => element.replaceChildren(icon("copy")), 1200);
+    } catch {
+      // Presse-papiers refusé (contexte non sécurisé, permission) : la valeur reste
+      // affichée à côté, donc sélectionnable. Rien d'autre à signaler.
+    }
+  });
+  return element;
+}
+
+function tag(className, label, iconName) {
+  const element = node("span", className);
+  if (iconName) element.appendChild(icon(iconName));
+  element.appendChild(document.createTextNode(label));
+  return element;
+}
+
+// --- Annuaire des boîtes ---------------------------------------------------
+
+/**
+ * Deux noms par boîte, deux questions : l'agent dit d'où l'on écrit (le projet), la boîte
+ * de quoi cette session s'occupe. La console montre les deux, et n'affiche l'adresse que
+ * là où elle sert à être copiée.
+ *
+ * Un nom d'agent ne désigne personne : plusieurs sessions du même projet le portent. Dès
+ * qu'il est partagé, `name` lui accole le nom de la boîte — sans quoi un fil afficherait
+ * « Documentor Dev → Documentor Dev » sans dire de quelles sessions il parle.
+ */
+function party(agentId) {
+  const known = state.directory.get(agentId);
+  const agentName = (known && known.agent_name) || null;
+  const boxName = (known && known.display_name) || null;
+  const shared = agentName ? state.groups.some((g) => g.key === agentName && g.boxes.length > 1) : false;
+  // Parenthèses, et non un séparateur plat : les participants d'un fil sont eux-mêmes
+  // listés avec un point médian, qui ne doit pas se confondre avec cette précision.
+  const name = agentName
+    ? shared
+      ? `${agentName} (${boxName || shortAddress(agentId)})`
+      : agentName
+    : shortAddress(agentId);
+  return {
+    id: agentId,
+    name,
+    agentName,
+    box: boxName,
+    registered: !known || known.registered,
+    unread: (known && known.unread) || 0,
+  };
+}
+
+/**
+ * Nom de la boîte, ou son adresse à défaut.
+ *
+ * Une boîte n'est nommée que si l'agent l'a fait lui-même (`rename_mailbox`) ; tant qu'il
+ * ne l'a pas fait, seule l'adresse la distingue de ses sœurs, et c'est donc elle qu'on lit.
+ */
+function boxLabel(box) {
+  return box.display_name || box.id;
+}
+
+function shortAddress(agentId) {
+  const id = String(agentId || "");
+  return id.length > 12 ? `${id.slice(0, 10)}…` : id || "—";
+}
+
+function initials(label) {
+  const words = String(label).split(/[\s_·-]+/).filter(Boolean);
+  const letters = words.length >= 2 ? words[0][0] + words[1][0] : String(label).slice(0, 2);
+  return letters.toUpperCase();
+}
+
+/** Teinte stable : la même graine donne toujours la même couleur d'avatar. */
+function colorIndex(seed) {
+  let hash = 0;
+  for (const char of String(seed)) hash = (hash * 31 + char.charCodeAt(0)) % 100003;
+  return hash % AVATAR_COLORS;
+}
+
+/** Pastille d'initiales. `seed` teinte, `label` écrit, `title` explique au survol. */
+function avatarFor(seed, label, title, extraClass, absent) {
+  const classes = ["avatar"];
+  if (extraClass) classes.push(extraClass);
+  classes.push(absent ? "avatar--absent" : `avatar--c${colorIndex(seed)}`);
+  const element = node("span", classes.join(" "), initials(label));
+  element.title = title;
+  return element;
+}
+
+function avatar(agentId, extraClass) {
+  const who = party(agentId);
+  const label = who.box || who.agentName || shortAddress(agentId);
+  const title = [who.agentName, who.box, agentId].filter(Boolean).join(" — ");
+  return avatarFor(agentId, label, title, extraClass, !who.registered);
+}
+
+// --- Dates -----------------------------------------------------------------
+
+function formatDate(iso) {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? String(iso) : date.toLocaleString();
+}
+
+/** Heure seule aujourd'hui, « hier » la veille, date courte au-delà : la liste doit se survoler. */
+function formatShort(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return String(iso);
+  const time = date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  const day = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const today = new Date();
+  const midnight = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+  const days = Math.round((midnight - day) / 86400000);
+  if (days === 0) return time;
+  if (days === 1) return `hier ${time}`;
+  return date.toLocaleDateString([], { day: "2-digit", month: "2-digit" });
+}
+
+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();
+}
+
+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 });
+    }
+    const group = groups.get(key);
+    group.boxes.push(box);
+    group.unread += box.unread;
+  }
+  return [...groups.values()];
+}
+
+function isSelected(kind, key) {
+  return state.selection.kind === kind && state.selection.key === key;
+}
+
+function select(kind, key) {
+  // Recliquer sur la sélection courante la relâche : le filtre ne s'emprisonne pas.
+  state.selection = isSelected(kind, key) ? { kind: "all", key: null } : { kind, key };
+  state.threadId = null;
+  state.messageId = null;
+  el.sheet.hidden = true;
+  el.console.classList.remove("has-sheet");
+  refresh();
+}
+
+function renderAgents(overview) {
+  state.directory = new Map(overview.agents.map((box) => [box.id, box]));
+  state.groups = groupByAgent(overview.agents);
+  el.agentsFoot.textContent = [
+    plural(state.groups.length, "agent"),
+    plural(overview.agents.length, "boîte"),
+    plural(overview.threads, "fil"),
+  ].join(" · ");
+
+  el.agents.replaceChildren();
+  el.agents.appendChild(allRow(overview));
+  for (const group of state.groups) el.agents.appendChild(groupRow(group));
+}
+
+function allRow(overview) {
+  const item = node("li");
+  const unread = overview.agents.reduce((total, box) => total + box.unread, 0);
+  const row = node("button", `agent${isSelected("all", null) ? " is-selected" : ""}`);
+  row.type = "button";
+
+  const star = node("span", "avatar avatar--absent", "∗");
+  star.title = "Tous les agents";
+  row.appendChild(star);
+
+  const text = node("div", "agent-text");
+  text.appendChild(node("div", "agent-name", "Tous les agents"));
+  text.appendChild(node("div", "agent-box", plural(overview.threads, "fil")));
+  row.appendChild(text);
+  if (unread > 0) row.appendChild(node("span", "count count--accent", String(unread)));
+
+  row.addEventListener("click", () => select("all", null));
+  item.appendChild(row);
+  return item;
+}
+
+/**
+ * Un agent et, dépliées sous lui, ses boîtes.
+ *
+ * Deux zones de clic, deux gestes distincts : le chevron ouvre ou ferme, le nom filtre sur
+ * l'ensemble des sessions du projet. Filtrer déplie au passage, pour que la sélection
+ * montre toujours ce qu'elle recouvre.
+ */
+function groupRow(group) {
+  const item = node("li", "agent-group");
+  const open = state.expanded.has(group.key);
+
+  const header = node("div", `agent-head${open ? " is-open" : ""}`);
+
+  const toggle = node("button", "agent-toggle");
+  toggle.type = "button";
+  toggle.setAttribute("aria-expanded", open ? "true" : "false");
+  toggle.setAttribute("aria-label", `${open ? "Replier" : "Déplier"} les boîtes de ${group.name}`);
+  toggle.appendChild(icon("chevron"));
+  toggle.addEventListener("click", () => {
+    if (open) state.expanded.delete(group.key);
+    else state.expanded.add(group.key);
+    renderAgents({ agents: [...state.directory.values()], threads: currentThreadCount() });
+  });
+  header.appendChild(toggle);
+
+  const classes = ["agent"];
+  if (isSelected("agent", group.key)) classes.push("is-selected");
+  if (group.unread > 0) classes.push("has-unread");
+  if (group.boxes.every((box) => !box.registered)) classes.push("agent--muted");
+  const row = node("button", classes.join(" "));
+  row.type = "button";
+  row.appendChild(
+    avatarFor(
+      group.key,
+      group.name,
+      group.name,
+      null,
+      group.boxes.every((box) => !box.registered)
+    )
+  );
+
+  const text = node("div", "agent-text");
+  text.appendChild(node("div", "agent-name", group.name));
+  text.appendChild(node("div", "agent-box", plural(group.boxes.length, "boîte")));
+  row.appendChild(text);
+  if (group.unread > 0) row.appendChild(node("span", "count count--accent", String(group.unread)));
+  row.title = `${group.name} · ${plural(group.boxes.length, "boîte")}`;
+  row.addEventListener("click", () => {
+    state.expanded.add(group.key);
+    select("agent", group.key);
+  });
+  header.appendChild(row);
+  item.appendChild(header);
+
+  if (open) {
+    const list = node("ul", "box-list");
+    for (const box of group.boxes) list.appendChild(boxRow(box));
+    item.appendChild(list);
+  }
+  return item;
+}
+
+function boxRow(box) {
+  const item = node("li");
+  const classes = ["agent", "box"];
+  if (isSelected("box", box.id)) classes.push("is-selected");
+  if (box.unread > 0) classes.push("has-unread");
+  if (!box.registered) classes.push("agent--muted");
+  const row = node("button", classes.join(" "));
+  row.type = "button";
+
+  const label = boxLabel(box);
+  row.appendChild(avatarFor(box.id, label, box.id, "avatar--sm", !box.registered));
+
+  const text = node("div", "agent-text");
+  // Sans nom donné par l'agent, l'adresse tient lieu de nom : elle est alors la seule
+  // chose qui distingue cette session de ses sœurs.
+  const name = node("div", "agent-name", label);
+  if (!box.display_name) name.classList.add("mono", "is-absent");
+  text.appendChild(name);
+  text.appendChild(
+    node(
+      "div",
+      "agent-box",
+      box.registered ? `${plural(box.sent, "envoyé")} · ${plural(box.received, "reçu")}` : "jamais connectée"
+    )
+  );
+  row.appendChild(text);
+
+  if (box.unread > 0) row.appendChild(node("span", "count count--accent", String(box.unread)));
+  row.title = box.id;
+  row.addEventListener("click", () => select("box", box.id));
+  item.appendChild(row);
+  return item;
+}
+
+/** Nombre de fils affiché en pied de colonne, conservé entre deux rendus locaux. */
+function currentThreadCount() {
+  return state.threadCount || 0;
+}
+
+/** Adresses que la sélection courante recouvre, ou null quand elle ne filtre rien. */
+function selectedAddresses() {
+  if (state.selection.kind === "box") return [state.selection.key];
+  if (state.selection.kind === "agent") {
+    const group = state.groups.find((g) => g.key === state.selection.key);
+    return group ? group.boxes.map((box) => box.id) : [];
+  }
+  return null;
+}
+
+function selectionLabel() {
+  if (state.selection.kind === "box") {
+    const box = state.directory.get(state.selection.key);
+    return box ? boxLabel(box) : shortAddress(state.selection.key);
+  }
+  if (state.selection.kind === "agent") return state.selection.key;
+  return "Toutes les boîtes";
+}
+
+// --- Colonne des fils ------------------------------------------------------
+
+function renderThreads(threads) {
+  state.threadCount = threads.length;
+  el.threadsScope.textContent = `${selectionLabel()} · ${plural(threads.length, "fil")}`;
+
+  el.threads.replaceChildren();
+  if (threads.length === 0) {
+    const empty = node("li", "empty");
+    empty.appendChild(node("span", "empty-title", "Aucun fil"));
+    empty.appendChild(document.createTextNode(emptyReason()));
+    el.threads.appendChild(empty);
+    return;
+  }
+  for (const thread of threads) el.threads.appendChild(threadRow(thread));
+}
+
+function emptyReason() {
+  if (state.search) return "Aucun fil ne correspond à cette recherche.";
+  if (state.filter === "unread") return "Tout est lu de ce côté.";
+  if (state.filter === "high") return "Aucun message en priorité haute.";
+  if (state.selection.kind === "box") return "Cette boîte n'a encore échangé avec personne.";
+  if (state.selection.kind === "agent") return "Aucune session de cet agent n'a encore échangé.";
+  return "Aucun agent n'a encore écrit sur ce serveur.";
+}
+
+function threadRow(thread) {
+  const item = node("li");
+  const classes = ["thread"];
+  if (state.threadId === thread.thread_id) classes.push("is-selected");
+  if (thread.unread > 0) classes.push("is-unread");
+  const row = node("button", classes.join(" "));
+  row.type = "button";
+
+  const top = node("div", "thread-top");
+  // Le titre du fil prime ; tant que personne ne l'a nommé, le sujet d'ouverture en tient lieu.
+  top.appendChild(node("span", "thread-title", thread.title || thread.subject));
+  if (thread.priority === "high") top.appendChild(tag("tag tag--high", "haute"));
+  top.appendChild(node("span", "thread-time", formatShort(thread.last_message_at)));
+  row.appendChild(top);
+
+  row.appendChild(node("div", "thread-who", thread.participants.map((id) => party(id).name).join(" · ")));
+
+  const bottom = node("div", "thread-bottom");
+  bottom.appendChild(node("span", "thread-preview", thread.last_message_preview));
+  const count = node("span", thread.unread > 0 ? "count count--accent" : "count", String(thread.messages));
+  count.title = thread.unread > 0 ? `${plural(thread.messages, "message")}, ${thread.unread} non lu(s)` : plural(thread.messages, "message");
+  bottom.appendChild(count);
+  row.appendChild(bottom);
+
+  row.addEventListener("click", () => openThread(thread.thread_id));
+  item.appendChild(row);
+  return item;
+}
+
+// --- Lecteur du fil --------------------------------------------------------
+
+function renderEmptyReader() {
+  const empty = node("div", "empty");
+  empty.appendChild(node("span", "empty-title", "Aucun fil ouvert"));
+  empty.appendChild(document.createTextNode("Choisissez un fil pour lire la conversation."));
+  el.reader.replaceChildren(empty);
+}
+
+function renderThread(data) {
+  const thread = data.thread || {};
+  const messages = data.messages || [];
+  const container = document.createDocumentFragment();
+
+  const head = node("div", "reader-head");
+  const opening = messages.length > 0 ? messages[0].subject : "";
+  head.appendChild(node("h2", null, thread.title || opening || data.thread_id));
+  if (thread.description) head.appendChild(node("p", "reader-desc", thread.description));
+
+  const participants = [];
+  for (const message of messages) {
+    for (const id of [message.from, message.to]) {
+      if (id && !participants.includes(id)) participants.push(id);
+    }
+  }
+
+  const meta = node("div", "reader-meta");
+  const stack = node("div", "avatar-stack");
+  for (const id of participants) stack.appendChild(avatar(id, "avatar--sm avatar--stack"));
+  meta.appendChild(stack);
+  meta.appendChild(
+    node(
+      "span",
+      "reader-participants",
+      `${participants.map((id) => party(id).name).join(", ")} · ${plural(messages.length, "message")}`
+    )
+  );
+  const threadId = node("span", "mono muted", data.thread_id);
+  meta.appendChild(threadId);
+  meta.appendChild(copyButton(data.thread_id, "Copier l'identifiant du fil"));
+  head.appendChild(meta);
+  container.appendChild(head);
+
+  const list = node("ul", "messages");
+  messages.forEach((message, index) => {
+    list.appendChild(messageRow(message, index === messages.length - 1));
+  });
+  container.appendChild(list);
+
+  el.reader.replaceChildren(container);
+}
+
+function messageRow(message, isLast) {
+  const item = node("li");
+  const classes = ["message"];
+  if (state.messageId === message.message_id) classes.push("is-open");
+  else if (isLast) classes.push("is-last");
+  const row = node("div", classes.join(" "));
+
+  row.appendChild(avatar(message.from));
+
+  const column = node("div", "message-body-col");
+  const head = node("div", "message-head");
+  head.appendChild(node("span", "message-from", party(message.from).name));
+  head.appendChild(node("span", "message-to", `→ ${party(message.to).name}`));
+  if (message.priority === "high") head.appendChild(tag("tag tag--high", "priorité haute"));
+  if (message.priority === "low") head.appendChild(tag("tag", "priorité basse"));
+  head.appendChild(node("span", "message-time", formatShort(message.created_at)));
+  column.appendChild(head);
+
+  // Le sujet n'est répété que s'il diffère du nom du fil : sinon c'est du bruit.
+  if (message.subject && message.subject !== message.thread_title) {
+    column.appendChild(node("p", "message-subject", message.subject));
+  }
+  column.appendChild(node("p", "message-text", message.body || message.preview || ""));
+
+  const foot = node("div", "message-foot");
+  foot.appendChild(
+    message.read
+      ? tag("tag tag--ok", `lu par ${party(message.to).name}`, "check")
+      : tag("tag tag--warn", `non lu par ${party(message.to).name}`, "clock")
+  );
+  const open = state.messageId === message.message_id;
+  foot.appendChild(
+    button("btn btn--link", open ? "détails ouverts" : "détails", () => {
+      if (open) closeSheet();
+      else openMessage(message.message_id);
+    })
+  );
+  column.appendChild(foot);
+
+  row.appendChild(column);
+  item.appendChild(row);
+  return item;
+}
+
+// --- Volet de détail -------------------------------------------------------
+
+function renderSheet(message) {
+  const container = document.createDocumentFragment();
+
+  const head = node("div", "sheet-head");
+  const titles = node("div");
+  titles.appendChild(node("h3", null, "Détails du message"));
+  titles.appendChild(node("p", "sheet-subject", message.subject));
+  head.appendChild(titles);
+  const close = node("button", "btn btn--icon btn--ghost");
+  close.type = "button";
+  close.title = "Fermer";
+  close.setAttribute("aria-label", "Fermer le volet");
+  close.appendChild(icon("close"));
+  close.addEventListener("click", closeSheet);
+  head.appendChild(close);
+  container.appendChild(head);
+
+  const ids = node("div", "sheet-section");
+  ids.appendChild(node("span", "section-label", "Message"));
+  ids.appendChild(kvCopy("Identifiant", message.message_id));
+  ids.appendChild(kvCopy("Fil", message.thread_id));
+  ids.appendChild(kv("Envoyé le", node("span", "kv-value", formatDate(message.created_at))));
+  ids.appendChild(kv("Priorité", priorityTag(message.priority)));
+  container.appendChild(ids);
+
+  container.appendChild(partySection("De", message.from));
+  container.appendChild(partySection("À", message.to));
+
+  const deliveries = node("div", "sheet-section");
+  deliveries.appendChild(node("span", "section-label", "Distribution"));
+  deliveries.appendChild(deliveriesTable(message.deliveries || []));
+  container.appendChild(deliveries);
+
+  el.sheet.replaceChildren(container);
+  el.sheet.hidden = false;
+  el.console.classList.add("has-sheet");
+}
+
+function kv(key, valueNode) {
+  const row = node("div", "kv");
+  row.appendChild(node("span", "kv-key", key));
+  row.appendChild(valueNode);
+  row.appendChild(node("span"));
+  return row;
+}
+
+function kvCopy(key, value) {
+  const row = node("div", "kv");
+  row.appendChild(node("span", "kv-key", key));
+  row.appendChild(node("span", "kv-value mono", value));
+  row.appendChild(copyButton(value, `Copier ${key.toLowerCase()}`));
+  return row;
+}
+
+function priorityTag(priority) {
+  const labels = { high: "haute", normal: "normale", low: "basse" };
+  return tag(priority === "high" ? "tag tag--high" : "tag", labels[priority] || priority);
+}
+
+/**
+ * Une boîte, telle qu'elle doit se lire : le nom de l'agent, ce dont la session s'occupe,
+ * et seulement ensuite l'adresse — la seule chose qui identifie vraiment la session.
+ */
+function partySection(label, agentId) {
+  const who = party(agentId);
+  const section = node("div", "sheet-section");
+  section.appendChild(node("span", "section-label", label));
+
+  const block = node("div", "party");
+  block.appendChild(avatar(agentId, "avatar--sm"));
+
+  const text = node("div", "agent-text");
+  text.appendChild(node("div", "party-name", who.name));
+  text.appendChild(node("div", "party-box", who.box || (who.registered ? "boîte sans nom" : "jamais connectée")));
+  const addr = node("div", "party-addr");
+  addr.appendChild(node("span", "mono", agentId));
+  addr.appendChild(copyButton(agentId, "Copier l'adresse"));
+  text.appendChild(addr);
+
+  block.appendChild(text);
+  section.appendChild(block);
+  return section;
+}
+
+function deliveriesTable(deliveries) {
+  const table = node("table", "deliveries");
+  const head = node("tr");
+  for (const label of ["Agent", "Rôle", "Dossier", "État"]) head.appendChild(node("th", null, label));
+  table.appendChild(head);
+
+  for (const delivery of deliveries) {
+    const row = node("tr");
+    const who = node("td");
+    who.appendChild(document.createTextNode(party(delivery.agent_id).name));
+    row.appendChild(who);
+    row.appendChild(node("td", "role", delivery.role === "sender" ? "expéditeur" : "destinataire"));
+    row.appendChild(node("td", "folder", delivery.folder));
+    const stateCell = node("td");
+    stateCell.appendChild(
+      delivery.read ? tag("tag tag--ok", "lu") : tag("tag tag--warn", delivery.role === "sender" ? "—" : "non lu")
+    );
+    row.appendChild(stateCell);
+    table.appendChild(row);
+  }
+  return table;
+}
+
+function closeSheet() {
+  state.messageId = null;
+  el.sheet.hidden = true;
+  el.sheet.replaceChildren();
+  el.console.classList.remove("has-sheet");
+  if (state.threadId) refreshThread();
+}
+
+// --- Navigation ------------------------------------------------------------
+
+async function openThread(threadId) {
+  state.threadId = threadId;
+  state.messageId = null;
+  el.sheet.hidden = true;
+  el.console.classList.remove("has-sheet");
+  await refreshThread();
+  await refresh({ keepThread: true });
+}
+
+async function refreshThread() {
+  if (!state.threadId) {
+    renderEmptyReader();
+    return;
+  }
+  try {
+    renderThread(await api(`/admin/threads/${encodeURIComponent(state.threadId)}`));
+  } catch (error) {
+    if (error.message !== "unauthorized") el.reader.replaceChildren(node("div", "banner", error.message));
+  }
+}
+
+async function openMessage(messageId) {
+  state.messageId = messageId;
+  try {
+    renderSheet(await api(`/admin/messages/${encodeURIComponent(messageId)}`));
+    await refreshThread();
+  } catch (error) {
+    if (error.message !== "unauthorized") el.sheet.replaceChildren(node("div", "banner", error.message));
+  }
+}
+
+// --- Boucle de rafraîchissement --------------------------------------------
+
+async function refresh(options) {
+  try {
+    const [overview, list] = await Promise.all([
+      api("/admin/overview"),
+      api("/admin/threads", {
+        // Une sélection d'agent recouvre toutes ses sessions : la route prend la liste.
+        agent: (selectedAddresses() || []).join(","),
+        search: state.search,
+        unread_only: state.filter === "unread" ? "true" : undefined,
+        priority: state.filter === "high" ? "high" : undefined,
+        limit: 100,
+      }),
+    ]);
+    setLoggedIn(true);
+    setStatus("ok", `connecté · ${window.location.host}`);
+    renderAgents(overview);
+    renderThreads(list.threads);
+    if (!options || !options.keepThread) {
+      if (state.threadId) await refreshThread();
+      else renderEmptyReader();
+    }
+  } catch (error) {
+    if (error.message === "unauthorized") {
+      setStatus("idle", "authentification requise");
+      return;
+    }
+    setStatus("ko", `erreur : ${error.message}`);
+  }
+}
+
+// --- Écouteurs -------------------------------------------------------------
+
+el.refresh.addEventListener("click", () => refresh({ keepThread: true }));
+
+el.collapse.addEventListener("click", () => {
+  state.collapsed = !state.collapsed;
+  el.console.classList.toggle("is-collapsed", state.collapsed);
+  el.collapse.title = state.collapsed ? "Déplier" : "Replier";
+});
+
+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.threadId = null;
+  state.messageId = null;
+  state.directory = new Map();
+  state.groups = [];
+  el.sheet.hidden = true;
+  el.console.classList.remove("has-sheet");
+  el.agents.replaceChildren();
+  el.threads.replaceChildren();
+  renderEmptyReader();
+  setLoggedIn(false);
+});
+
+setInterval(() => {
+  if (el.autoRefresh.checked && el.login.hidden) refresh({ keepThread: true });
+}, REFRESH_MS);
+
+el.loginOrigin.textContent = `MCP Messenger · ${window.location.host}`;
+renderEmptyReader();
+refresh();