@imenam/mcp-messenger 1.0.30 → 1.0.31

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

@@ -1,7 +1,7 @@
-// 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.
+// 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,
@@ -29,9 +29,22 @@ const ICONS = {
   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"],
+  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.
    *
@@ -108,6 +121,13 @@ const el = {
   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 ----------------------------------------------------
@@ -361,9 +381,12 @@ async function action(method, path, body) {
 
 function setLoggedIn(loggedIn) {
   el.login.hidden = loggedIn;
-  el.console.hidden = !loggedIn;
+  el.console.hidden = !loggedIn || state.view !== "threads";
+  el.links.hidden = !loggedIn || state.view !== "links";
+  el.tabs.hidden = !loggedIn;
   el.controls.hidden = !loggedIn;
-  el.searchBox.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();
@@ -1187,8 +1210,12 @@ async function refreshThread() {
 // --- Boucle de rafraîchissement --------------------------------------------
 
 async function refresh(options) {
+  if (state.view === "links") {
+    await refreshLinks();
+    return;
+  }
   try {
-    const [overview, list] = await Promise.all([
+    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.
@@ -1198,10 +1225,13 @@ async function refresh(options) {
         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();
@@ -1321,6 +1351,784 @@ for (const id of Object.keys(PANELS)) {
 
 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];
+const ZOOM_MINUTES = 5;
+const MAP = {
+  axis: 92,
+  lane: 180,
+  gap: 12,
+  head: 56,
+  card: 46,
+  cardGap: 4,
+  /** Hauteur d'une minute dans la zone agrandie. */
+  zoomPx: 64,
+  /** Hauteur de la zone resserrée, quelle que soit sa durée. */
+  restPx: 200,
+  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,
+  /** 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.
+  if (!linksView.drag) 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 zoomMinutes = Math.min(ZOOM_MINUTES, minutes);
+  const nowY = MAP.head + MAP.card / 2 + 6;
+  const zoomH = zoomMinutes * MAP.zoomPx;
+  const restH = minutes > zoomMinutes ? MAP.restPx : 0;
+  return { minutes, zoomMinutes, nowY, zoomH, restH, bottom: nowY + zoomH + restH };
+}
+
+/** Hauteur, sur la carte, d'une boîte ouverte il y a `ageMinutes`. */
+function yForAge(geometry, ageMinutes) {
+  const { minutes, zoomMinutes, nowY, zoomH, restH } = geometry;
+  if (ageMinutes <= zoomMinutes) return nowY + ageMinutes * MAP.zoomPx;
+  return nowY + zoomH + ((ageMinutes - zoomMinutes) / (minutes - zoomMinutes)) * restH;
+}
+
+/** Graduations de la zone resserrée : quelques repères ronds, et la fin de la fenêtre. */
+function restTicks(geometry) {
+  const { minutes, zoomMinutes } = geometry;
+  if (minutes <= zoomMinutes) return [];
+  const span = minutes - zoomMinutes;
+  const step = [5, 10, 15, 30, 60].find((candidate) => span / candidate <= 4) || 60;
+  const ticks = [];
+  for (let m = Math.ceil((zoomMinutes + 1) / step) * 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));
+  }
+
+  canvas.replaceChildren(fragment);
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  drawWires(svg);
+}
+
+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 <= ZOOM_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();
+  axis.appendChild(placed(node("div", "links-zoom"), MAP.axis - 8, geometry.nowY, width - MAP.axis, geometry.zoomH));
+
+  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)));
+    if (kind !== "rest") label.appendChild(node("span", "mono", formatClock(now - minutes * 60_000)));
+    axis.appendChild(label);
+  };
+
+  for (let m = 0; m <= geometry.zoomMinutes; m += 1) tick(m, m === 0 ? "now" : "zoom");
+  for (const m of restTicks(geometry)) tick(m, "rest");
+  return axis;
+}
+
+function boxCard(box, x, y, rank, linked, now) {
+  const classes = ["links-card"];
+  const age = ageOf(box, now);
+  if (linksView.selected === box.id) classes.push("is-selected");
+  if (linksView.selected && linked.get(linksView.selected)?.has(box.id)) classes.push("is-linked");
+  const card = placed(node("button", classes.join(" ")), 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 name = node("span", "links-card-name", box.display_name || box.id);
+  if (!box.display_name) name.classList.add("mono", "is-absent");
+  text.appendChild(name);
+  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 <= ZOOM_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", () => selectLinkBox(box.id));
+  linksView.rects.set(box.id, { x, y, w: MAP.lane - 20, h: MAP.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 classes = ["links-old-row"];
+    if (linksView.selected === box.id) classes.push("is-selected");
+    if (linksView.selected && linked.get(linksView.selected)?.has(box.id)) classes.push("is-linked");
+    const row = placed(node("button", classes.join(" ")), 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(node("span", "links-old-date", formatShort(box.created_at)));
+    row.addEventListener("click", () => selectLinkBox(box.id));
+    linksView.rects.set(box.id, { x: x + 10, y, w: MAP.lane - 20, h: MAP.oldRow - 4 });
+    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
+    );
+    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 };
+}
+
+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 };
+  const path = wire(svg, "", "links-wire is-drawing");
+  linksView.drag = { from: boxId };
+  el.links.classList.add("is-linking");
+  handle.setPointerCapture?.(event.pointerId);
+
+  const onMove = (move) => {
+    const point = canvasPoint(move);
+    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 onUp = (up) => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    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);
+}
+
+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 <= ZOOM_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 --------------------------------------------
 
 /**
@@ -1547,6 +2355,24 @@ 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", () => {
@@ -1617,6 +2443,11 @@ el.logout.addEventListener("click", async () => {
   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();
@@ -1628,5 +2459,6 @@ setInterval(() => {
 }, REFRESH_MS);
 
 el.loginOrigin.textContent = `MCP Messenger · ${window.location.host}`;
+loadLinksWindow();
 renderEmptyReader();
 refresh();