@imenam/mcp-messenger 1.0.9 → 1.0.11

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

@@ -1,320 +1,703 @@
-// 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,
-};
-
-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));
-    renderDetail(message);
-    await refresh({ keepDetail: true });
-  } catch (error) {
-    setDetail(node("div", "error", error.message), false);
-  }
-}
-
-function renderDetail(message) {
-  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)
-    )
-  );
-
-  const threadButton = node("button", null, "Voir le fil complet");
-  threadButton.addEventListener("click", () => showThread(message.thread_id));
-  container.appendChild(threadButton);
-
-  container.appendChild(node("div", "body", message.body));
-
-  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"],
+};
+
+const state = {
+  /** Adresse de la boîte sur laquelle la liste des fils est filtrée, ou null. */
+  agent: null,
+  /** "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(),
+};
+
+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.
+ */
+function party(agentId) {
+  const known = state.directory.get(agentId);
+  return {
+    id: agentId,
+    name: (known && known.agent_name) || shortAddress(agentId),
+    box: (known && known.display_name) || null,
+    registered: !known || known.registered,
+    unread: (known && known.unread) || 0,
+  };
+}
+
+function shortAddress(agentId) {
+  const id = String(agentId || "");
+  return id.length > 12 ? `${id.slice(0, 10)}…` : id || "—";
+}
+
+function initials(agentId) {
+  const name = party(agentId).name;
+  const words = name.split(/[\s_-]+/).filter(Boolean);
+  const letters = words.length >= 2 ? words[0][0] + words[1][0] : name.slice(0, 2);
+  return letters.toUpperCase();
+}
+
+/** Teinte stable : la même adresse donne toujours la même couleur d'avatar. */
+function colorIndex(agentId) {
+  let hash = 0;
+  for (const char of String(agentId)) hash = (hash * 31 + char.charCodeAt(0)) % 100003;
+  return hash % AVATAR_COLORS;
+}
+
+function avatar(agentId, extraClass) {
+  const who = party(agentId);
+  const classes = ["avatar"];
+  if (extraClass) classes.push(extraClass);
+  classes.push(who.registered ? `avatar--c${colorIndex(agentId)}` : "avatar--absent");
+  const element = node("span", classes.join(" "), initials(agentId));
+  element.title = who.box ? `${who.name} — ${who.box}` : who.name;
+  return element;
+}
+
+// --- 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 ----------------------------------------------------
+
+function renderAgents(overview) {
+  state.directory = new Map(overview.agents.map((agent) => [agent.id, agent]));
+  el.agentsFoot.textContent = [
+    plural(overview.agents.length, "agent"),
+    plural(overview.messages, "message"),
+    plural(overview.threads, "fil"),
+  ].join(" · ");
+
+  el.agents.replaceChildren();
+  el.agents.appendChild(agentRow(null, overview));
+  for (const agent of overview.agents) el.agents.appendChild(agentRow(agent, overview));
+}
+
+function agentRow(agent, overview) {
+  const item = node("li");
+  const selected = agent ? state.agent === agent.id : state.agent === null;
+  const unread = agent ? agent.unread : overview.agents.reduce((total, a) => total + a.unread, 0);
+
+  const classes = ["agent"];
+  if (selected) classes.push("is-selected");
+  if (unread > 0) classes.push("has-unread");
+  if (agent && !agent.registered) classes.push("agent--muted");
+  const row = node("button", classes.join(" "));
+  row.type = "button";
+
+  if (agent) {
+    row.appendChild(avatar(agent.id));
+  } else {
+    const all = node("span", "avatar avatar--absent", "∗");
+    all.title = "Tous les agents";
+    row.appendChild(all);
+  }
+
+  const text = node("div", "agent-text");
+  text.appendChild(node("div", "agent-name", agent ? party(agent.id).name : "Tous les agents"));
+  if (agent) {
+    // Une boîte jamais connectée n'a pas de nom : le dire vaut mieux qu'une ligne vide.
+    const boxName = agent.display_name || (agent.registered ? "boîte sans nom" : "jamais connectée");
+    const box = node("div", "agent-box", boxName);
+    if (!agent.display_name) box.classList.add("is-absent");
+    text.appendChild(box);
+  } else {
+    text.appendChild(node("div", "agent-box", plural(overview.threads, "fil")));
+  }
+  row.appendChild(text);
+
+  if (unread > 0) row.appendChild(node("span", "count count--accent", String(unread)));
+  row.title = agent ? agent.id : "Tous les agents";
+
+  row.addEventListener("click", () => {
+    const next = agent ? agent.id : null;
+    state.agent = state.agent === next ? null : next;
+    state.threadId = null;
+    state.messageId = null;
+    refresh();
+  });
+  item.appendChild(row);
+  return item;
+}
+
+// --- Colonne des fils ------------------------------------------------------
+
+function renderThreads(threads) {
+  const scope = state.agent ? party(state.agent).name : "Toutes les boîtes";
+  el.threadsScope.textContent = `${scope} · ${plural(threads.length, "fil")}`;
+
+  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.agent) return "Cette boîte n'a encore échangé avec personne.";
+  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", {
+        agent: state.agent,
+        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.agent = null;
+  state.threadId = null;
+  state.messageId = null;
+  state.directory = new Map();
+  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();