@imenam/mcp-messenger 1.0.6 → 1.0.7

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

@@ -1,318 +1,320 @@
-// 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" : "");
-    // Le nom d'abord : l'adresse ne dit rien à l'utilisateur, elle reste là pour être copiée.
-    item.appendChild(node("div", "name", agent.display_name || "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.join(", ") || "—") + " · " + 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.join(", ") || "—") +
-        (message.cc.length ? " · Cc " + message.cc.join(", ") : "") +
-        "\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.join(", ") || "—") + " · " + 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.
+
+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();