@imenam/mcp-messenger 1.0.32 → 1.0.34

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

@@ -8,8 +8,10 @@
 // écrites en dur dans ce fichier. Le corps des messages passe par `renderMarkdown`, qui
 // bâtit lui aussi des nœuds un par un et n'ouvre donc pas non plus de brèche.
 //
-// L'authentification tient dans un cookie de session HttpOnly posé par `/ui/login` :
-// ce script ne voit jamais le jeton et n'écrit rien dans le navigateur.
+// L'authentification tient dans un cookie de session HttpOnly posé par `/ui/login` (ou
+// `/ui/setup` à la création du compte) : ce script ne voit jamais l'identifiant de session.
+// La seule valeur secrète qu'il affiche est une clé API juste créée, une fois, dans le volet
+// des clés ; elle n'est gardée nulle part.
 
 import { renderMarkdown } from "./markdown.js";
 
@@ -39,10 +41,38 @@ const ICONS = {
     "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"],
+  plus: ["M5 12h14", "M12 5v14"],
+  users: [
+    "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",
+    "M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
+    "M22 21v-2a4 4 0 0 0-3-3.87",
+    "M16 3.13a4 4 0 0 1 0 7.75",
+  ],
+  arrowUpRight: ["M7 7h10v10", "M7 17 17 7"],
+  refresh: ["M3 12a9 9 0 0 1 15-6.7L21 8", "M21 3v5h-5", "M21 12a9 9 0 0 1-15 6.7L3 16", "M3 21v-5h5"],
+  ban: ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "m4.9 4.9 14.2 14.2"],
+  alert: ["m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3", "M12 9v4", "M12 17h.01"],
+  alertCircle: ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 8v4", "M12 16h.01"],
+  circleCheck: ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "m9 12 2 2 4-4"],
+  timer: ["M10 2h4", "m12 14 3-3", "M12 22a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"],
+  monitor: ["M4 3h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z", "M8 21h8", "M12 17v4"],
+  smartphone: ["M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z", "M12 18h.01"],
+  chevronDown: ["m6 9 6 6 6-6"],
+};
+
+/** Ce que la console sait de la connexion : le compte ouvert, ou s'il reste à créer. */
+const auth = {
+  loggedIn: false,
+  /** Aucun compte n'existe : la console propose de le créer, avec le code d'installation. */
+  setupRequired: false,
+  user: null,
 };
 
 const state = {
-  /** "threads" | "links" — l'écran affiché, choisi par les onglets de la barre du haut. */
+  /**
+   * "threads" | "links" | "keys" | "account" — l'écran affiché, choisi par les onglets de la
+   * barre du haut et par le menu du compte.
+   */
   view: "threads",
   /** Liaisons du serveur, relues à chaque rafraîchissement. */
   links: [],
@@ -89,13 +119,39 @@ const el = {
   autoRefresh: document.getElementById("auto-refresh"),
   refresh: document.getElementById("refresh"),
   logout: document.getElementById("logout"),
+  account: document.getElementById("account"),
+  accountButton: document.getElementById("account-button"),
+  accountMenu: document.getElementById("account-menu"),
+  accountInitial: document.getElementById("account-initial"),
+  accountName: document.getElementById("account-name"),
   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"),
+  loginUsername: document.getElementById("login-username"),
+  loginPassword: document.getElementById("login-password"),
+  loginRemember: document.getElementById("login-remember"),
+  loginError: document.getElementById("login-error"),
+  setup: document.getElementById("setup"),
+  setupForm: document.getElementById("setup-form"),
+  setupCode: document.getElementById("setup-code"),
+  setupUsername: document.getElementById("setup-username"),
+  setupPassword: document.getElementById("setup-password"),
+  setupConfirm: document.getElementById("setup-confirm"),
+  setupMeter: document.getElementById("setup-meter"),
+  setupMeterLabel: document.getElementById("setup-meter-label"),
+  setupError: document.getElementById("setup-error"),
+  setupSubmit: document.getElementById("setup-submit"),
+  keys: document.getElementById("keys"),
+  keyNew: document.getElementById("key-new"),
+  keyFilters: document.getElementById("key-filters"),
+  keySearch: document.getElementById("key-search"),
+  keyTable: document.getElementById("key-table"),
+  keyDrawer: document.getElementById("key-drawer"),
+  keyDrawerBody: document.getElementById("key-drawer-body"),
+  keyRevoke: document.getElementById("key-revoke"),
+  keyRevokeBody: document.getElementById("key-revoke-body"),
+  accountPage: document.getElementById("account-page"),
+  accountBody: document.getElementById("account-body"),
   console: document.getElementById("console"),
   agentsPane: document.getElementById("agents-pane"),
   agents: document.getElementById("agents"),
@@ -381,21 +437,71 @@ async function action(method, path, body) {
     throw new Error("unauthorized");
   }
   const payload = await response.json().catch(() => ({}));
-  if (!response.ok) throw new Error(payload.error || response.statusText);
+  if (!response.ok) {
+    // Le statut voyage avec l'erreur : certains refus se disent mieux en clair qu'avec le
+    // message du serveur (mot de passe actuel faux, clé déjà révoquée…).
+    const error = new Error(payload.error || response.statusText);
+    error.status = response.status;
+    throw error;
+  }
   return payload;
 }
 
 function setLoggedIn(loggedIn) {
-  el.login.hidden = loggedIn;
+  auth.loggedIn = loggedIn;
+  el.login.hidden = loggedIn || auth.setupRequired;
+  el.setup.hidden = loggedIn || !auth.setupRequired;
   el.console.hidden = !loggedIn || state.view !== "threads";
   el.links.hidden = !loggedIn || state.view !== "links";
+  el.keys.hidden = !loggedIn || state.view !== "keys";
+  el.accountPage.hidden = !loggedIn || state.view !== "account";
   el.tabs.hidden = !loggedIn;
-  el.controls.hidden = !loggedIn;
+  el.account.hidden = !loggedIn;
+  // Rafraîchissement et nettoyage portent sur les boîtes : ils n'ont rien à faire ailleurs.
+  el.controls.hidden = !loggedIn || (state.view !== "threads" && state.view !== "links");
   // 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();
+    closeAccountMenu();
+    if (el.keyDrawer.open) el.keyDrawer.close();
+    if (el.keyRevoke.open) el.keyRevoke.close();
+    if (auth.setupRequired) {
+      setStatus("warn", "aucun compte créé");
+      el.setupCode.focus();
+    } else {
+      setStatus("idle", "non connecté");
+      el.loginUsername.focus();
+    }
+  }
+}
+
+/** Le compte ouvert, tel que le menu de la barre du haut le montre. */
+function setAccountUser(user) {
+  auth.user = user;
+  el.accountName.textContent = user ? user.username : "";
+  el.accountInitial.textContent = user ? initials(user.username).slice(0, 1) : "";
+}
+
+/**
+ * Ce que la console affiche en arrivant : ses données si une session est ouverte, sinon la
+ * connexion — ou la création du compte, tant qu'il n'existe pas.
+ */
+async function checkSession() {
+  const response = await fetch("/ui/session", {
+    headers: { accept: "application/json" },
+    credentials: "same-origin",
+  }).catch(() => null);
+  if (!response || !response.ok) {
+    setStatus("ko", "serveur injoignable");
+    return;
+  }
+  const payload = await response.json();
+  auth.setupRequired = Boolean(payload.setup_required);
+  if (payload.authenticated) {
+    setAccountUser(payload.user);
+    await refresh();
+  } else {
+    setLoggedIn(false);
   }
 }
 
@@ -1220,6 +1326,14 @@ async function refresh(options) {
     await refreshLinks();
     return;
   }
+  if (state.view === "keys") {
+    await refreshKeys();
+    return;
+  }
+  if (state.view === "account") {
+    await refreshAccount();
+    return;
+  }
   try {
     const [overview, list, links] = await Promise.all([
       api("/admin/overview"),
@@ -1542,6 +1656,7 @@ function renderLinksView() {
 }
 
 function setView(view) {
+  closeAccountMenu();
   if (state.view === view) return;
   state.view = view;
   for (const tab of el.tabs.querySelectorAll(".tab")) {
@@ -2532,6 +2647,1204 @@ async function confirmPurge() {
   }
 }
 
+// --- Durées relatives ------------------------------------------------------
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+/** Une clé dont l'échéance tombe dans ce délai est signalée dans la liste. */
+const EXPIRY_WARNING_DAYS = 7;
+
+/** Passé lisible : « il y a 2 min », « hier 18:05 », « il y a 3 jours », puis la date. */
+function formatAgo(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return String(iso);
+  const minutes = Math.floor((Date.now() - date.getTime()) / 60_000);
+  if (minutes < 1) return "à l'instant";
+  if (minutes < 60) return `il y a ${minutes} min`;
+  const today = new Date();
+  const midnight = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
+  if (date.getTime() >= midnight) return `il y a ${Math.floor(minutes / 60)} h`;
+  if (date.getTime() >= midnight - DAY_MS) {
+    return `hier ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+  }
+  const days = Math.ceil((midnight - date.getTime()) / DAY_MS);
+  return days < 30 ? `il y a ${days} jours` : formatDay(iso);
+}
+
+/** Futur lisible : « dans 5 jours », « dans 3 h ». */
+function formatUntil(iso) {
+  const ms = new Date(iso).getTime() - Date.now();
+  if (ms < DAY_MS) return `dans ${Math.max(1, Math.round(ms / 3_600_000))} h`;
+  return `dans ${plural(Math.floor(ms / DAY_MS), "jour")}`;
+}
+
+function daysLeft(iso) {
+  return (new Date(iso).getTime() - Date.now()) / DAY_MS;
+}
+
+// --- Formulaires -----------------------------------------------------------
+
+/** Champ libellé : le libellé, la saisie, et l'aide en dessous s'il y en a une. */
+function formField(label, control, hint) {
+  const wrapper = node("label", "field field--tight");
+  wrapper.appendChild(node("span", "field-label", label));
+  const box = node("span", "field-input");
+  box.appendChild(control);
+  wrapper.appendChild(box);
+  if (hint) wrapper.appendChild(node("span", "field-hint", hint));
+  return wrapper;
+}
+
+function textArea(value, placeholder) {
+  const area = document.createElement("textarea");
+  area.value = value || "";
+  area.rows = 2;
+  area.maxLength = 2000;
+  if (placeholder) area.placeholder = placeholder;
+  return area;
+}
+
+function textInput(value, options = {}) {
+  const input = document.createElement("input");
+  input.type = options.type || "text";
+  input.value = value || "";
+  if (options.placeholder) input.placeholder = options.placeholder;
+  if (options.autocomplete) input.autocomplete = options.autocomplete;
+  if (options.list) input.setAttribute("list", options.list);
+  input.spellcheck = false;
+  return input;
+}
+
+/** Bandeau d'erreur ou d'avertissement au-dessus du bouton d'un formulaire. */
+function showBanner(element, kind, message) {
+  element.hidden = !message;
+  element.className = `form-banner form-banner--${kind}`;
+  element.replaceChildren();
+  if (!message) return;
+  element.appendChild(icon(kind === "warn" ? "timer" : "alertCircle"));
+  element.appendChild(document.createTextNode(message));
+}
+
+function formatWait(seconds) {
+  if (seconds < 60) return `${seconds} s`;
+  const minutes = Math.floor(seconds / 60);
+  const rest = seconds % 60;
+  return rest ? `${minutes} min ${String(rest).padStart(2, "0")} s` : `${minutes} min`;
+}
+
+/** Ce qu'un refus de formulaire dit à l'utilisateur, selon le statut rendu. */
+async function formRefusal(response, messages) {
+  if (!response) return "Serveur injoignable.";
+  const payload = await response.json().catch(() => ({}));
+  if (response.status === 429) {
+    return `Trop de tentatives. Réessayez dans ${formatWait(payload.retry_after_seconds || 900)}.`;
+  }
+  return messages[response.status] || payload.error || response.statusText;
+}
+
+/**
+ * Robustesse d'un mot de passe, de 0 (vide) à 4. En deçà de la longueur minimale, il est
+ * trop court quoi qu'il contienne ; au-delà, la variété des caractères et la longueur
+ * comptent.
+ */
+const PASSWORD_MIN = 12;
+
+function passwordStrength(password) {
+  if (!password) return { level: 0, label: `${PASSWORD_MIN} caractères minimum.` };
+  const length = `${plural(password.length, "caractère")} (${PASSWORD_MIN} minimum)`;
+  if (password.length < PASSWORD_MIN) return { level: 1, label: `Trop court · ${length}` };
+  const classes = [/[a-z]/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/].filter((re) => re.test(password)).length;
+  const score = Math.min(4, 1 + (classes >= 3 ? 1 : 0) + (password.length >= 16 ? 1 : 0) + (password.length >= 24 ? 1 : 0));
+  const words = { 2: "Correct", 3: "Solide", 4: "Très solide" };
+  return { level: Math.max(2, score), label: `${words[Math.max(2, score)]} · ${length}` };
+}
+
+function renderMeter(meter, label, password) {
+  const strength = passwordStrength(password);
+  meter.dataset.level = String(strength.level);
+  label.textContent = strength.label;
+  label.classList.toggle("is-weak", strength.level === 1);
+  label.classList.toggle("is-strong", strength.level >= 3);
+}
+
+// --- Menu du compte --------------------------------------------------------
+
+function closeAccountMenu() {
+  el.accountMenu.hidden = true;
+  el.accountButton.setAttribute("aria-expanded", "false");
+}
+
+function toggleAccountMenu() {
+  const open = el.accountMenu.hidden;
+  el.accountMenu.hidden = !open;
+  el.accountButton.setAttribute("aria-expanded", String(open));
+  for (const item of el.accountMenu.querySelectorAll("[data-view]")) {
+    item.classList.toggle("is-active", item.dataset.view === state.view);
+  }
+}
+
+// --- Clés API --------------------------------------------------------------
+
+/**
+ * Écran des clés : la liste, filtrée par état, et un volet qui sert à trois choses — créer
+ * une clé, la montrer une fois créée, en voir le détail.
+ */
+const keysView = {
+  list: [],
+  /** "active" | "expired" | "revoked" — la puce choisie au-dessus de la liste. */
+  filter: "active",
+  search: "",
+  /** Clé dont le volet montre le détail ; null quand il est fermé ou sert à autre chose. */
+  detailId: null,
+};
+
+/** Durées proposées à la création et à la prolongation, en jours ; null = sans échéance. */
+const KEY_LIFETIMES = [
+  { days: 30, label: "30 jours" },
+  { days: 90, label: "90 jours" },
+  { days: 365, label: "1 an" },
+  { days: null, label: "Jamais" },
+];
+
+async function refreshKeys() {
+  try {
+    const [overview, keys] = await Promise.all([api("/admin/overview"), api("/admin/keys")]);
+    setLoggedIn(true);
+    setStatus("ok", `connecté · ${window.location.host}`);
+    renderAgents(overview);
+    keysView.list = keys.keys;
+    renderKeys();
+  } catch (error) {
+    if (error.message === "unauthorized") {
+      setStatus("idle", "authentification requise");
+      return;
+    }
+    setStatus("ko", `erreur : ${error.message}`);
+  }
+}
+
+/** Noms d'agents connus : ceux des boîtes ouvertes et ceux des clés existantes. */
+function knownAgentNames() {
+  const names = new Set();
+  for (const box of state.directory.values()) if (box.agent_name) names.add(box.agent_name);
+  for (const key of keysView.list) if (key.agent_name) names.add(key.agent_name);
+  return [...names].sort((a, b) => a.localeCompare(b));
+}
+
+function keyLabel(key) {
+  return `${key.prefix}…${key.suffix}`;
+}
+
+function agentDot(name) {
+  return node("span", `key-dot avatar--c${colorIndex(name)}`);
+}
+
+/** Agent d'une clé : sa pastille et son nom, ou « Tous les agents ». */
+function keyAgent(key) {
+  const cell = node("span", "key-agent");
+  if (key.agent_name) {
+    cell.appendChild(agentDot(key.agent_name));
+    cell.appendChild(node("span", null, key.agent_name));
+  } else {
+    cell.classList.add("is-muted");
+    cell.appendChild(icon("users"));
+    cell.appendChild(node("span", null, "Tous les agents"));
+  }
+  return cell;
+}
+
+/** Échéance d'une clé, telle que la liste et le volet la montrent. */
+function keyExpiry(key) {
+  if (key.status === "revoked") return node("span", "key-muted", `révoquée le ${formatDay(key.revoked_at)}`);
+  if (key.status === "expired") return node("span", "key-muted", `expirée le ${formatDay(key.expires_at)}`);
+  if (!key.expires_at) return node("span", "key-muted", "jamais");
+  if (daysLeft(key.expires_at) <= EXPIRY_WARNING_DAYS) return tag("tag tag--warn", formatUntil(key.expires_at), "clock");
+  return node("span", null, formatUntil(key.expires_at));
+}
+
+function matchesKeySearch(key) {
+  const search = keysView.search.toLowerCase();
+  if (!search) return true;
+  return [key.name, key.agent_name || "tous les agents", key.prefix, key.suffix].some((value) =>
+    String(value).toLowerCase().includes(search)
+  );
+}
+
+function renderKeys() {
+  const counts = { active: 0, expired: 0, revoked: 0 };
+  for (const key of keysView.list) counts[key.status] += 1;
+  for (const chip of el.keyFilters.querySelectorAll(".chip")) {
+    chip.classList.toggle("is-active", chip.dataset.status === keysView.filter);
+    chip.querySelector(".chip-count").textContent = String(counts[chip.dataset.status]);
+  }
+
+  const shown = keysView.list.filter((key) => key.status === keysView.filter && matchesKeySearch(key));
+  const head = node("div", "key-row key-row--head");
+  for (const label of ["Nom", "Clé", "Agent autorisé", "Dernière utilisation", "Expiration", ""]) {
+    head.appendChild(node("span", null, label));
+  }
+  const rows = shown.map(keyRow);
+  if (rows.length === 0) {
+    const empty = {
+      active: "Aucune clé active. Créez-en une par poste ou par agent.",
+      expired: "Aucune clé expirée.",
+      revoked: "Aucune clé révoquée.",
+    }[keysView.filter];
+    rows.push(node("p", "key-empty", keysView.search ? "Aucune clé ne correspond à la recherche." : empty));
+  }
+  el.keyTable.replaceChildren(head, ...rows);
+}
+
+function keyRow(key) {
+  const row = node("div", "key-row");
+  row.tabIndex = 0;
+  row.setAttribute("role", "button");
+  row.dataset.key = key.id;
+  if (keysView.detailId === key.id && el.keyDrawer.open) row.classList.add("is-selected");
+
+  const name = node("span", "key-name");
+  name.appendChild(node("strong", null, key.name));
+  name.appendChild(node("span", "key-sub", `créée le ${formatDay(key.created_at)}`));
+  row.appendChild(name);
+  row.appendChild(node("span", "mono", keyLabel(key)));
+  row.appendChild(keyAgent(key));
+
+  const used = node("span", "key-name");
+  if (key.last_used_at) {
+    const recent = Date.now() - new Date(key.last_used_at).getTime() < 3_600_000;
+    used.appendChild(node("span", recent ? "key-recent" : null, formatAgo(key.last_used_at)));
+    if (key.last_used_ip) used.appendChild(node("span", "key-sub", key.last_used_ip));
+  } else {
+    used.appendChild(node("span", "key-muted", "jamais utilisée"));
+  }
+  row.appendChild(used);
+  row.appendChild(keyExpiry(key));
+
+  const actions = node("span", "key-actions");
+  if (key.status === "active") {
+    actions.appendChild(
+      button("btn key-revoke", "Révoquer", (event) => {
+        event.stopPropagation();
+        openRevoke(key);
+      })
+    );
+  }
+  actions.appendChild(icon("chevron"));
+  row.appendChild(actions);
+
+  row.addEventListener("click", () => openKeyDetail(key.id));
+  row.addEventListener("keydown", (event) => {
+    if (event.target !== row || (event.key !== "Enter" && event.key !== " ")) return;
+    event.preventDefault();
+    openKeyDetail(key.id);
+  });
+  return row;
+}
+
+// Volet ----------------------------------------------------------------------
+
+function openDrawer() {
+  if (!el.keyDrawer.open) el.keyDrawer.showModal();
+}
+
+function closeDrawer() {
+  if (el.keyDrawer.open) el.keyDrawer.close();
+}
+
+/** En-tête du volet : titre, sous-titre, bouton de fermeture. */
+function drawerHead(title, subtitle, titleNode) {
+  const head = node("div", "drawer-head");
+  const text = node("div", "drawer-title");
+  text.appendChild(titleNode || node("h2", null, title));
+  if (subtitle) text.appendChild(subtitle instanceof Node ? subtitle : node("p", "muted", subtitle));
+  head.appendChild(text);
+  const close = node("button", "btn btn--icon btn--ghost");
+  close.type = "button";
+  close.setAttribute("aria-label", "Fermer");
+  close.appendChild(icon("close"));
+  close.addEventListener("click", closeDrawer);
+  head.appendChild(close);
+  return head;
+}
+
+function drawerFoot(...buttons) {
+  const foot = node("div", "drawer-foot");
+  for (const item of buttons) foot.appendChild(item);
+  return foot;
+}
+
+/** Choix parmi des puces : une seule retenue, celle que `selected` désigne. */
+function choiceChips(options, selected, onPick) {
+  const group = node("div", "choice");
+  for (const option of options) {
+    const chip = button("choice-item", option.label, () => onPick(option));
+    chip.classList.toggle("is-active", option === selected);
+    chip.setAttribute("aria-pressed", String(option === selected));
+    group.appendChild(chip);
+  }
+  return group;
+}
+
+function openKeyCreate() {
+  keysView.detailId = null;
+  const form = { name: "", scope: "one", agent: "", description: "", lifetime: KEY_LIFETIMES[1] };
+  const names = knownAgentNames();
+
+  const nameInput = textInput("", { placeholder: "Poste, machine ou usage", autocomplete: "off" });
+  const agentInput = textInput("", { placeholder: "Nom de l'agent", autocomplete: "off", list: "key-agent-names" });
+  const descriptionInput = textArea("", "À quoi sert cet agent, pour ses correspondants");
+  descriptionInput.addEventListener("input", () => {
+    form.description = descriptionInput.value;
+  });
+  const datalist = node("datalist");
+  datalist.id = "key-agent-names";
+  for (const name of names) {
+    const option = document.createElement("option");
+    option.value = name;
+    datalist.appendChild(option);
+  }
+
+  const agentMark = node("span", "key-dot");
+  const newTag = node("span", "field-tag", "nouveau");
+  function updateAgentMark() {
+    const name = form.agent.trim();
+    agentMark.className = `key-dot avatar--c${colorIndex(name || "?")}`;
+    newTag.hidden = !name || names.includes(name);
+  }
+
+  const error = node("p", "form-banner");
+  error.hidden = true;
+  const create = button("btn btn--primary", "Créer la clé", submit);
+  const body = node("div", "drawer-content");
+
+  function render() {
+    const agentField = node("div", "field field--tight");
+    agentField.appendChild(node("span", "field-label", "Agent autorisé"));
+    const scopes = [
+      { id: "one", label: "Un seul agent" },
+      { id: "all", label: "Tous les agents" },
+    ];
+    const segmented = node("div", "segmented");
+    for (const scope of scopes) {
+      const item = button("segmented-item", scope.label, () => {
+        form.scope = scope.id;
+        render();
+      });
+      item.classList.toggle("is-active", form.scope === scope.id);
+      item.setAttribute("aria-pressed", String(form.scope === scope.id));
+      segmented.appendChild(item);
+    }
+    agentField.appendChild(segmented);
+    if (form.scope === "one") {
+      const box = node("span", "field-input field-input--spaced");
+      box.append(agentMark, agentInput, newTag);
+      updateAgentMark();
+      agentField.appendChild(box);
+      const description = node("span", "field-input field-input--area");
+      description.appendChild(descriptionInput);
+      agentField.appendChild(description);
+      agentField.appendChild(
+        node(
+          "span",
+          "field-hint",
+          "Le nom et la description s'appliquent à toutes les sessions ouvertes avec cette clé : rien à poser côté client."
+        )
+      );
+    } else {
+      agentField.appendChild(
+        node(
+          "span",
+          "field-hint",
+          "La clé ouvre les boîtes de tous les agents. Chaque client donne alors son nom d'agent dans MESSENGER_AGENT_NAME."
+        )
+      );
+    }
+
+    const lifetimeField = node("div", "field field--tight");
+    lifetimeField.appendChild(node("span", "field-label", "Expiration"));
+    lifetimeField.appendChild(
+      choiceChips(KEY_LIFETIMES, form.lifetime, (option) => {
+        form.lifetime = option;
+        render();
+      })
+    );
+    lifetimeField.appendChild(
+      node(
+        "span",
+        "field-hint",
+        form.lifetime.days === null
+          ? "La clé reste valable jusqu'à sa révocation."
+          : `Expire le ${formatDay(new Date(Date.now() + form.lifetime.days * DAY_MS).toISOString())}. Signalée dans la liste ${EXPIRY_WARNING_DAYS} jours avant.`
+      )
+    );
+
+    const focused = document.activeElement;
+    body.replaceChildren(
+      formField("Nom", nameInput, "Pour la reconnaître dans la liste : le poste, la machine, l'usage."),
+      agentField,
+      lifetimeField,
+      error,
+      datalist
+    );
+    // Le volet se reconstruit à chaque choix : la saisie en cours garde le curseur.
+    if (focused === agentInput || focused === nameInput || focused === descriptionInput) focused.focus();
+    create.disabled = !form.name.trim() || (form.scope === "one" && !form.agent.trim());
+  }
+
+  const updateCreate = () => {
+    create.disabled = !form.name.trim() || (form.scope === "one" && !form.agent.trim());
+  };
+  nameInput.addEventListener("input", () => {
+    form.name = nameInput.value;
+    updateCreate();
+  });
+  // La saisie du nom d'agent ne reconstruit pas le volet : elle ne touche qu'à sa pastille
+  // et à la mention « nouveau », sans quoi le champ perdrait le focus à chaque lettre.
+  agentInput.addEventListener("input", () => {
+    form.agent = agentInput.value;
+    updateAgentMark();
+    updateCreate();
+  });
+
+  async function submit() {
+    create.disabled = true;
+    showBanner(error, "error", "");
+    try {
+      const created = await post("/admin/keys", {
+        name: form.name.trim(),
+        agent_name: form.scope === "one" ? form.agent.trim() : null,
+        ...(form.scope === "one" && form.description.trim() ? { agent_description: form.description.trim() } : {}),
+        lifetime_days: form.lifetime.days,
+      });
+      renderKeyReveal(created.key, created.secret, null);
+      refreshKeys();
+    } catch (failure) {
+      showBanner(error, "error", failure.message);
+      create.disabled = false;
+    }
+  }
+
+  const cancel = button("btn btn--link", "Annuler", closeDrawer);
+  el.keyDrawerBody.replaceChildren(
+    drawerHead("Nouvelle clé API", "Elle s'affichera une seule fois, juste après sa création."),
+    body,
+    drawerFoot(cancel, create)
+  );
+  render();
+  openDrawer();
+  nameInput.focus();
+}
+
+/** Commande qui écrit l'entrée du client dans `.mcp.json`, clé et adresse comprises. */
+function setupCommand(secret) {
+  return `npx -y @imenam/mcp-messenger --claude-setup-mcp --server-url ${window.location.origin} --api-key ${secret}`;
+}
+
+function mcpJson(secret) {
+  const entry = {
+    mcpServers: {
+      messenger: {
+        command: "npx",
+        args: ["-y", "@imenam/mcp-messenger"],
+        env: { MESSENGER_SERVER_URL: window.location.origin, MESSENGER_API_KEY: secret },
+      },
+    },
+  };
+  // Le tableau des arguments tient sur une ligne, comme on l'écrit à la main.
+  return JSON.stringify(entry, null, 2).replace(/\[\s+("-y"),\s+("[^"]+")\s+\]/, "[$1, $2]");
+}
+
+/** Bouton « Copier » libellé : le geste principal de l'écran où la clé apparaît. */
+function copyLabelled(value, label) {
+  const element = node("button", "btn btn--primary btn--small");
+  element.type = "button";
+  const render = (iconName, text) => element.replaceChildren(icon(iconName), document.createTextNode(text));
+  render("copy", label);
+  element.addEventListener("click", async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      render("check", "Copiée");
+      setTimeout(() => render("copy", label), 1500);
+    } catch {
+      // Presse-papiers refusé : la clé reste affichée à côté, sélectionnable.
+    }
+  });
+  return element;
+}
+
+/**
+ * La clé en clair, une fois. Rien ne la garde : à la fermeture du volet, elle n'existe plus
+ * que chez qui l'a copiée.
+ */
+function renderKeyReveal(key, secret, replaced) {
+  keysView.detailId = null;
+  let tab = "json";
+
+  const summary = node("div", "notice notice--ok");
+  summary.appendChild(icon("circleCheck"));
+  const summaryText = node("div");
+  summaryText.appendChild(node("strong", null, key.name));
+  const scope = key.agent_name || "Tous les agents";
+  const expiry = key.expires_at ? `expire le ${formatDay(key.expires_at)}` : "sans échéance";
+  summaryText.appendChild(node("span", null, `${scope} · ${expiry}`));
+  if (replaced) {
+    summaryText.appendChild(
+      node("span", null, `L'ancienne clé reste valable jusqu'au ${formatDate(replaced.expires_at)}.`)
+    );
+  }
+  summary.appendChild(summaryText);
+
+  const keyField = node("div", "field field--tight");
+  keyField.appendChild(node("span", "field-label", "Votre clé"));
+  const keyBox = node("div", "secret");
+  keyBox.appendChild(node("code", "secret-value", secret));
+  keyBox.appendChild(copyLabelled(secret, "Copier"));
+  keyField.appendChild(keyBox);
+  const warning = node("p", "secret-warning");
+  warning.appendChild(icon("alert"));
+  warning.appendChild(
+    document.createTextNode(
+      "Le serveur n'en garde qu'une empreinte. Perdue, elle ne se retrouve pas : on la révoque et on en crée une autre."
+    )
+  );
+  keyField.appendChild(warning);
+
+  const config = node("div", "field field--tight");
+  config.appendChild(node("span", "field-label", "Configurer le client MCP"));
+  const tabs = node("div", "subtabs");
+  const code = node("div", "code-block");
+  const hint = node("span", "field-hint");
+
+  function renderConfig() {
+    tabs.replaceChildren(
+      ...[
+        { id: "json", label: ".mcp.json" },
+        { id: "command", label: "Commande d'installation" },
+      ].map((item) => {
+        const tabButton = button("subtab", item.label, () => {
+          tab = item.id;
+          renderConfig();
+        });
+        tabButton.classList.toggle("is-active", tab === item.id);
+        return tabButton;
+      })
+    );
+    const text = tab === "json" ? mcpJson(secret) : setupCommand(secret);
+    code.replaceChildren(node("pre", null, text), copyButton(text, "Copier"));
+    hint.textContent =
+      tab === "json"
+        ? "La clé y figure en entier : le bloc copié est prêt à coller."
+        : "À lancer dans le dossier du projet : elle écrit l'entrée messenger dans .mcp.json.";
+  }
+  renderConfig();
+  config.appendChild(tabs);
+  config.appendChild(code);
+  config.appendChild(hint);
+
+  const body = node("div", "drawer-content");
+  body.append(summary, keyField, config);
+  el.keyDrawerBody.replaceChildren(
+    drawerHead(replaced ? "Clé remplacée" : "Clé créée", "Copiez-la maintenant : elle ne sera plus jamais affichée."),
+    body,
+    drawerFoot(button("btn btn--primary", "J'ai copié la clé", closeDrawer))
+  );
+  openDrawer();
+}
+
+async function openKeyDetail(id) {
+  keysView.detailId = id;
+  try {
+    renderKeyDetail(await api(`/admin/keys/${encodeURIComponent(id)}`));
+    openDrawer();
+    renderKeys();
+  } catch (error) {
+    if (error.message !== "unauthorized") setStatus("ko", `erreur : ${error.message}`);
+  }
+}
+
+function renderKeyDetail({ key, mailboxes }) {
+  let renaming = false;
+  let describing = false;
+  let extendOpen = false;
+  const error = node("p", "form-banner");
+  error.hidden = true;
+
+  const fail = (failure) => showBanner(error, "error", failure.message);
+  const reload = async () => {
+    await openKeyDetail(key.id);
+    refreshKeys();
+  };
+
+  function title() {
+    const wrapper = node("div", "drawer-name");
+    if (renaming) {
+      const input = textInput(key.name, { autocomplete: "off" });
+      input.className = "inline-input";
+      // Entrée enregistre, puis la perte du focus qui suit voudrait enregistrer encore.
+      let saved = false;
+      const save = async () => {
+        if (saved) return;
+        saved = true;
+        const name = input.value.trim();
+        if (!name || name === key.name) {
+          renaming = false;
+          render();
+          return;
+        }
+        try {
+          await patch(`/admin/keys/${encodeURIComponent(key.id)}`, { name });
+          await reload();
+        } catch (failure) {
+          saved = false;
+          fail(failure);
+        }
+      };
+      input.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") save();
+        if (event.key === "Escape") {
+          // Échap referme la saisie, pas le volet.
+          event.preventDefault();
+          event.stopPropagation();
+          saved = true;
+          renaming = false;
+          render();
+        }
+      });
+      input.addEventListener("blur", save);
+      wrapper.appendChild(input);
+      setTimeout(() => input.focus(), 0);
+      return wrapper;
+    }
+    wrapper.appendChild(node("h2", null, key.name));
+    const rename = node("button", "btn btn--icon btn--ghost");
+    rename.type = "button";
+    rename.title = "Renommer";
+    rename.setAttribute("aria-label", "Renommer la clé");
+    rename.appendChild(icon("pencil"));
+    rename.addEventListener("click", () => {
+      renaming = true;
+      render();
+    });
+    wrapper.appendChild(rename);
+    return wrapper;
+  }
+
+  function states() {
+    const row = node("div", "drawer-tags");
+    const labels = { active: "active", expired: "expirée", revoked: "révoquée" };
+    const status = node("span", `tag tag--${key.status === "active" ? "ok" : "muted"}`);
+    if (key.status === "active") status.appendChild(node("span", "pill-dot"));
+    status.appendChild(document.createTextNode(labels[key.status]));
+    row.appendChild(status);
+    if (key.status === "active" && key.expires_at && daysLeft(key.expires_at) <= EXPIRY_WARNING_DAYS) {
+      row.appendChild(tag("tag tag--warn", `expire ${formatUntil(key.expires_at)}`, "clock"));
+    }
+    return row;
+  }
+
+  function extendControl() {
+    const wrapper = node("span", "split");
+    const extend = async (days) => {
+      try {
+        await post(`/admin/keys/${encodeURIComponent(key.id)}/extend`, { days });
+        await reload();
+      } catch (failure) {
+        fail(failure);
+      }
+    };
+    wrapper.appendChild(button("btn btn--small split-main", "Prolonger de 90 jours", () => extend(90)));
+    const more = node("button", "btn btn--small split-more");
+    more.type = "button";
+    more.setAttribute("aria-label", "Autres durées");
+    more.setAttribute("aria-expanded", String(extendOpen));
+    more.appendChild(icon("chevronDown"));
+    more.addEventListener("click", () => {
+      extendOpen = !extendOpen;
+      render();
+    });
+    wrapper.appendChild(more);
+    if (extendOpen) {
+      const menu = node("div", "split-menu");
+      for (const option of [
+        { days: 30, label: "Prolonger de 30 jours" },
+        { days: 365, label: "Prolonger d'un an" },
+        { days: null, label: "Retirer l'échéance" },
+      ]) {
+        menu.appendChild(button("split-item", option.label, () => extend(option.days)));
+      }
+      wrapper.appendChild(menu);
+    }
+    return wrapper;
+  }
+
+  function properties() {
+    const list = node("dl", "props");
+    const add = (label, value) => {
+      list.appendChild(node("dt", null, label));
+      const cell = node("dd");
+      for (const part of [].concat(value)) cell.appendChild(typeof part === "string" ? document.createTextNode(part) : part);
+      list.appendChild(cell);
+    };
+    add("Agent autorisé", keyAgent(key));
+    if (key.agent_name) add("Description", descriptionCell());
+    add("Créée", `${formatDay(key.created_at)}${key.created_by ? ` par ${key.created_by}` : ""}`);
+    add(
+      "Dernière utilisation",
+      key.last_used_at ? `${formatAgo(key.last_used_at)}${key.last_used_ip ? ` · ${key.last_used_ip}` : ""}` : "jamais"
+    );
+    const expiry = key.expires_at ? formatDay(key.expires_at) : "sans échéance";
+    add("Expiration", key.status === "revoked" ? [expiry] : [node("span", "props-value", expiry), extendControl()]);
+    if (key.revoked_at) add("Révoquée", formatDate(key.revoked_at));
+    return list;
+  }
+
+  /** Description de l'agent, modifiable sur place : Entrée enregistre, Échap annule. */
+  function descriptionCell() {
+    if (!describing) {
+      const value = node("span", key.agent_description ? "props-value" : "props-value key-muted", key.agent_description || "aucune");
+      const edit = node("button", "btn btn--icon btn--ghost props-edit");
+      edit.type = "button";
+      edit.title = "Modifier la description";
+      edit.setAttribute("aria-label", "Modifier la description de l'agent");
+      edit.appendChild(icon("pencil"));
+      edit.addEventListener("click", () => {
+        describing = true;
+        render();
+      });
+      return [value, edit];
+    }
+    const area = textArea(key.agent_description, "À quoi sert cet agent, pour ses correspondants");
+    area.className = "inline-area";
+    let saved = false;
+    const save = async () => {
+      if (saved) return;
+      saved = true;
+      const description = area.value.trim();
+      if (description === (key.agent_description || "")) {
+        describing = false;
+        render();
+        return;
+      }
+      try {
+        await patch(`/admin/keys/${encodeURIComponent(key.id)}`, { agent_description: description || null });
+        await reload();
+      } catch (failure) {
+        saved = false;
+        fail(failure);
+      }
+    };
+    area.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        save();
+      }
+      if (event.key === "Escape") {
+        // Échap referme la saisie, pas le volet.
+        event.preventDefault();
+        event.stopPropagation();
+        saved = true;
+        describing = false;
+        render();
+      }
+    });
+    area.addEventListener("blur", save);
+    setTimeout(() => area.focus(), 0);
+    return [area];
+  }
+
+  function boxes() {
+    const section = node("section", "drawer-section");
+    const head = node("div", "drawer-section-head");
+    head.appendChild(node("h3", null, "Boîtes ouvertes avec cette clé"));
+    head.appendChild(node("span", "muted", String(mailboxes.length)));
+    section.appendChild(head);
+    if (mailboxes.length === 0) {
+      section.appendChild(node("p", "key-muted", "Aucune boîte n'a encore été ouverte avec cette clé."));
+      return section;
+    }
+    const list = node("ul", "key-boxes");
+    for (const box of mailboxes) {
+      const item = node("li");
+      const line = button("key-box", "", () => {
+        closeDrawer();
+        state.selection = { kind: "box", key: box.id };
+        state.threadId = null;
+        setView("threads");
+      });
+      line.title = "Voir ses fils";
+      line.appendChild(avatarFor(box.agent_name || box.id, box.display_name || box.agent_name || box.id, box.id));
+      const text = node("span", "key-name");
+      text.appendChild(node("strong", null, box.display_name || "boîte sans nom"));
+      const activity = box.last_activity_at ? `activité ${formatShort(box.last_activity_at)}` : "aucune activité";
+      text.appendChild(node("span", "key-sub", `${box.id} · ${activity}`));
+      line.appendChild(text);
+      line.appendChild(icon("arrowUpRight"));
+      item.appendChild(line);
+      list.appendChild(item);
+    }
+    section.appendChild(list);
+    return section;
+  }
+
+  function rotate() {
+    const section = node("section", "drawer-section drawer-row");
+    const text = node("div");
+    text.appendChild(node("h3", null, "Remplacer la clé"));
+    text.appendChild(
+      node("p", "key-muted", "Nouvelle clé, mêmes réglages. L'ancienne reste valable 24 h, le temps de mettre le client à jour.")
+    );
+    section.appendChild(text);
+    const action = node("button", "btn");
+    action.type = "button";
+    action.append(icon("refresh"), document.createTextNode("Remplacer"));
+    action.addEventListener("click", async () => {
+      action.disabled = true;
+      try {
+        const rotated = await post(`/admin/keys/${encodeURIComponent(key.id)}/rotate`, {});
+        renderKeyReveal(rotated.key, rotated.secret, rotated.replaced);
+        refreshKeys();
+      } catch (failure) {
+        action.disabled = false;
+        fail(failure);
+      }
+    });
+    section.appendChild(action);
+    return section;
+  }
+
+  function danger() {
+    const section = node("section", "danger-zone");
+    const text = node("div");
+    text.appendChild(node("h3", null, "Révoquer la clé"));
+    text.appendChild(node("p", null, "Refusée dès l'appel suivant. Définitif."));
+    section.appendChild(text);
+    section.appendChild(button("btn btn--danger", "Révoquer…", () => openRevoke(key, mailboxes.length)));
+    return section;
+  }
+
+  function render() {
+    const subtitle = node("p", "mono muted", keyLabel(key));
+    const body = node("div", "drawer-content");
+    body.append(states(), properties(), boxes());
+    if (key.status === "active") body.appendChild(rotate());
+    if (key.status !== "revoked") body.appendChild(danger());
+    body.appendChild(error);
+    el.keyDrawerBody.replaceChildren(drawerHead(null, subtitle, title()), body);
+  }
+
+  render();
+}
+
+/** Confirmation de révocation : ce qui s'arrête, ce qui reste, et que c'est définitif. */
+function openRevoke(key, mailboxCount = key.mailboxes) {
+  const card = el.keyRevokeBody;
+  const head = node("div", "confirm-head");
+  const badge = node("span", "confirm-badge");
+  badge.appendChild(icon("ban"));
+  head.appendChild(badge);
+  const title = node("div");
+  title.appendChild(node("h2", null, `Révoquer « ${key.name} » ?`));
+  title.appendChild(node("p", "mono muted", `${keyLabel(key)} · ${key.agent_name || "Tous les agents"}`));
+  head.appendChild(title);
+
+  const consequences = node("ul", "confirm-list");
+  const lost = node("li", "is-lost");
+  lost.appendChild(icon("close"));
+  lost.appendChild(
+    document.createTextNode(
+      mailboxCount > 0
+        ? `${mailboxCount > 1 ? `Les ${mailboxCount} boîtes ouvertes` : "La boîte ouverte"} avec elle ${mailboxCount > 1 ? "perdent" : "perd"} l'accès dès leur prochain appel.`
+        : "Les sessions qui l'utilisent perdent l'accès dès leur prochain appel."
+    )
+  );
+  const kept = node("li", "is-kept");
+  kept.appendChild(icon("check"));
+  kept.appendChild(document.createTextNode("Leurs messages restent lisibles dans Fils."));
+  consequences.append(lost, kept);
+
+  const error = node("p", "form-banner");
+  error.hidden = true;
+  const confirm = button("btn btn--danger", "Révoquer la clé", async () => {
+    confirm.disabled = true;
+    try {
+      await post(`/admin/keys/${encodeURIComponent(key.id)}/revoke`, {});
+      el.keyRevoke.close();
+      if (el.keyDrawer.open && keysView.detailId === key.id) await openKeyDetail(key.id);
+      await refreshKeys();
+    } catch (failure) {
+      confirm.disabled = false;
+      showBanner(error, "error", failure.message);
+    }
+  });
+  const foot = node("div", "modal-foot");
+  foot.append(button("btn btn--link", "Annuler", () => el.keyRevoke.close()), confirm);
+
+  card.replaceChildren(head, consequences, node("p", "confirm-note", "Une clé révoquée ne se réactive pas."), error, foot);
+  el.keyRevoke.showModal();
+  confirm.focus();
+}
+
+// --- Mon compte ------------------------------------------------------------
+
+/** Navigateur et système lus dans l'en-tête `User-Agent`, assez pour reconnaître un appareil. */
+function describeDevice(userAgent) {
+  const ua = String(userAgent || "");
+  const browser = /Edg\//.test(ua)
+    ? "Edge"
+    : /OPR\//.test(ua)
+      ? "Opera"
+      : /Firefox\//.test(ua)
+        ? "Firefox"
+        : /Chrome\//.test(ua)
+          ? "Chrome"
+          : /Safari\//.test(ua)
+            ? "Safari"
+            : "Navigateur";
+  const system = /Android/.test(ua)
+    ? "Android"
+    : /iPhone|iPad/.test(ua)
+      ? "iOS"
+      : /Windows/.test(ua)
+        ? "Windows"
+        : /Mac OS X/.test(ua)
+          ? "macOS"
+          : /Linux/.test(ua)
+            ? "Linux"
+            : null;
+  return {
+    label: system ? `${browser} · ${system}` : browser,
+    mobile: /Mobi|Android|iPhone|iPad/.test(ua),
+  };
+}
+
+const accountView = {
+  data: null,
+  renaming: false,
+  /** Résultat de la dernière action, montré sous la carte concernée. */
+  notice: { identity: null, password: null, sessions: null },
+};
+
+async function refreshAccount() {
+  try {
+    const data = await api("/admin/account");
+    setLoggedIn(true);
+    setStatus("ok", `connecté · ${window.location.host}`);
+    accountView.data = data;
+    setAccountUser(data.user);
+    renderAccount();
+  } catch (error) {
+    if (error.message === "unauthorized") {
+      setStatus("idle", "authentification requise");
+      return;
+    }
+    setStatus("ko", `erreur : ${error.message}`);
+  }
+}
+
+function accountNotice(slot) {
+  const notice = accountView.notice[slot];
+  const element = node("p", "form-banner");
+  if (!notice) {
+    element.hidden = true;
+    return element;
+  }
+  if (notice.kind === "ok") {
+    element.className = "form-banner form-banner--ok";
+    element.append(icon("circleCheck"), document.createTextNode(notice.message));
+    return element;
+  }
+  showBanner(element, notice.kind, notice.message);
+  return element;
+}
+
+function renderAccount() {
+  const { user, sessions } = accountView.data;
+  el.accountBody.replaceChildren(identityCard(user), passwordCard(), sessionsCard(sessions));
+}
+
+function identityCard(user) {
+  const card = node("section", "panel-card panel-card--row");
+  card.appendChild(node("span", "account-avatar account-avatar--lg", initials(user.username).slice(0, 1)));
+  const text = node("div", "panel-card-main");
+  if (accountView.renaming) {
+    const input = textInput(user.username, { autocomplete: "username" });
+    input.className = "inline-input";
+    const save = async () => {
+      const username = input.value.trim();
+      if (!username || username === user.username) {
+        accountView.renaming = false;
+        renderAccount();
+        return;
+      }
+      try {
+        await patch("/admin/account", { username });
+        accountView.renaming = false;
+        accountView.notice.identity = { kind: "ok", message: `Identifiant changé : ${username}.` };
+        await refreshAccount();
+      } catch (failure) {
+        accountView.notice.identity = {
+          kind: "error",
+          message: failure.status === 409 ? "Cet identifiant est déjà pris." : failure.message,
+        };
+        renderAccount();
+      }
+    };
+    input.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") save();
+      if (event.key === "Escape") {
+        accountView.renaming = false;
+        renderAccount();
+      }
+    });
+    text.appendChild(input);
+    setTimeout(() => input.focus(), 0);
+  } else {
+    text.appendChild(node("strong", "panel-card-title", user.username));
+  }
+  text.appendChild(node("span", "key-sub", `Administrateur · compte créé le ${formatDay(user.created_at)}`));
+  text.appendChild(accountNotice("identity"));
+  card.appendChild(text);
+  if (!accountView.renaming) {
+    card.appendChild(
+      button("btn btn--link", "Changer l'identifiant", () => {
+        accountView.renaming = true;
+        accountView.notice.identity = null;
+        renderAccount();
+      })
+    );
+  }
+  return card;
+}
+
+function passwordCard() {
+  const card = node("section", "panel-card");
+  card.appendChild(node("h3", null, "Mot de passe"));
+  card.appendChild(
+    node(
+      "p",
+      "key-muted",
+      "Le changer déconnecte toutes les autres sessions de la console. Les clés API ne sont pas touchées."
+    )
+  );
+
+  const current = textInput("", { type: "password", autocomplete: "current-password" });
+  const next = textInput("", { type: "password", autocomplete: "new-password" });
+  const confirm = textInput("", { type: "password", autocomplete: "new-password" });
+  const meter = node("span", "meter");
+  meter.dataset.level = "0";
+  for (let i = 0; i < 4; i += 1) meter.appendChild(node("span"));
+  const meterLabel = node("span", "field-hint", `${PASSWORD_MIN} caractères minimum.`);
+
+  const nextField = formField("Nouveau mot de passe", next);
+  nextField.append(meter, meterLabel);
+  const grid = node("div", "form-grid");
+  const currentField = formField("Mot de passe actuel", current);
+  currentField.classList.add("form-grid-full");
+  grid.append(currentField, nextField, formField("Confirmer", confirm));
+
+  const submit = button("btn btn--primary", "Changer le mot de passe", async () => {
+    submit.disabled = true;
+    try {
+      const result = await post("/admin/account/password", {
+        current_password: current.value,
+        new_password: next.value,
+      });
+      accountView.notice.password = {
+        kind: "ok",
+        message:
+          result.closed_sessions > 0
+            ? `Mot de passe changé · ${plural(result.closed_sessions, "autre session fermée", "autres sessions fermées")}.`
+            : "Mot de passe changé.",
+      };
+      await refreshAccount();
+    } catch (failure) {
+      accountView.notice.password = {
+        kind: failure.status === 429 ? "warn" : "error",
+        message:
+          failure.status === 403
+            ? "Mot de passe actuel incorrect."
+            : failure.status === 429
+              ? "Trop de tentatives. Réessayez dans quelques minutes."
+              : failure.message,
+      };
+      renderAccount();
+    }
+  });
+  const update = () => {
+    renderMeter(meter, meterLabel, next.value);
+    submit.disabled = !current.value || next.value.length < PASSWORD_MIN || next.value !== confirm.value;
+  };
+  for (const input of [current, next, confirm]) input.addEventListener("input", update);
+  update();
+
+  const foot = node("div", "panel-card-foot");
+  foot.appendChild(submit);
+  card.append(grid, accountNotice("password"), foot);
+  return card;
+}
+
+function sessionsCard(sessions) {
+  const card = node("section", "panel-card panel-card--flush");
+  const head = node("div", "panel-card-head");
+  head.appendChild(node("h3", null, "Sessions de la console"));
+  head.appendChild(node("p", "key-muted", "Les navigateurs connectés avec votre mot de passe."));
+  card.appendChild(head);
+
+  const list = node("ul", "session-list");
+  for (const session of sessions) {
+    const device = describeDevice(session.user_agent);
+    const item = node("li", "session");
+    item.appendChild(icon(device.mobile ? "smartphone" : "monitor"));
+    const text = node("div", "key-name");
+    text.appendChild(node("strong", null, device.label));
+    const detail = session.current
+      ? `connecté depuis le ${formatDay(session.created_at)} · expire le ${formatDay(session.expires_at)}`
+      : `vue ${formatAgo(session.last_seen_at)}`;
+    text.appendChild(node("span", "key-sub", [session.ip, detail].filter(Boolean).join(" · ")));
+    item.appendChild(text);
+    if (session.current) {
+      item.appendChild(node("span", "tag tag--ok", "cet appareil"));
+    } else {
+      item.appendChild(
+        button("btn btn--small btn--danger-text", "Déconnecter", async () => {
+          try {
+            await remove(`/admin/account/sessions/${encodeURIComponent(session.id)}`);
+            accountView.notice.sessions = { kind: "ok", message: `${device.label} déconnecté.` };
+            await refreshAccount();
+          } catch (failure) {
+            accountView.notice.sessions = { kind: "error", message: failure.message };
+            renderAccount();
+          }
+        })
+      );
+    }
+    list.appendChild(item);
+  }
+  card.appendChild(list);
+
+  const foot = node("div", "panel-card-foot panel-card-foot--start");
+  if (sessions.some((session) => !session.current)) {
+    foot.appendChild(
+      button("btn btn--link btn--danger-text", "Déconnecter toutes les autres sessions", async () => {
+        try {
+          const result = await post("/admin/account/sessions/revoke-others", {});
+          accountView.notice.sessions = {
+            kind: "ok",
+            message: `${plural(result.closed_sessions, "session fermée", "sessions fermées")}.`,
+          };
+          await refreshAccount();
+        } catch (failure) {
+          accountView.notice.sessions = { kind: "error", message: failure.message };
+          renderAccount();
+        }
+      })
+    );
+  }
+  foot.appendChild(accountNotice("sessions"));
+  card.appendChild(foot);
+  return card;
+}
+
 // --- Écouteurs -------------------------------------------------------------
 
 el.purgeOpen.addEventListener("click", openPurge);
@@ -2592,41 +3905,141 @@ el.search.addEventListener("input", (event) => {
   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();
-});
+// L'œil d'un champ de mot de passe le montre ou le masque, sans quitter le champ.
+for (const reveal of document.querySelectorAll("[data-reveal]")) {
+  reveal.addEventListener("click", () => {
+    const input = document.getElementById(reveal.dataset.reveal);
+    const shown = input.type === "text";
+    input.type = shown ? "password" : "text";
+    reveal.setAttribute("aria-label", shown ? "Afficher le mot de passe" : "Masquer le mot de passe");
+    input.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", {
+function postForm(path, body) {
+  return fetch(path, {
     method: "POST",
-    headers: { "content-type": "application/json" },
+    headers: { "content-type": "application/json", accept: "application/json" },
     credentials: "same-origin",
-    body: JSON.stringify({ token }),
+    body: JSON.stringify(body),
   }).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";
+}
+
+el.loginForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  showBanner(el.loginError, "error", "");
+  const username = el.loginUsername.value.trim();
+  const password = el.loginPassword.value;
+  if (!username || !password) return;
+  const response = await postForm("/ui/login", { username, password, remember: el.loginRemember.checked });
+  // Le mot de passe ne reste pas dans la page, qu'il ait été accepté ou non.
+  el.loginPassword.value = "";
+  el.loginPassword.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.";
+    const message = await formRefusal(response, { 401: "Nom d'utilisateur ou mot de passe incorrect." });
+    showBanner(el.loginError, response && response.status === 429 ? "warn" : "error", message);
+    el.loginPassword.focus();
     return;
   }
-  refresh();
+  await checkSession();
+});
+
+function updateSetupForm() {
+  renderMeter(el.setupMeter, el.setupMeterLabel, el.setupPassword.value);
+  el.setupSubmit.disabled =
+    !el.setupCode.value.trim() ||
+    !el.setupUsername.value.trim() ||
+    el.setupPassword.value.length < PASSWORD_MIN ||
+    el.setupPassword.value !== el.setupConfirm.value;
+}
+
+for (const input of [el.setupCode, el.setupUsername, el.setupPassword, el.setupConfirm]) {
+  input.addEventListener("input", updateSetupForm);
+}
+
+el.setupForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  showBanner(el.setupError, "error", "");
+  if (el.setupSubmit.disabled) return;
+  const response = await postForm("/ui/setup", {
+    code: el.setupCode.value.trim(),
+    username: el.setupUsername.value.trim(),
+    password: el.setupPassword.value,
+  });
+  if (!response || !response.ok) {
+    // Le compte a été créé entre-temps, ailleurs : il ne reste qu'à s'y connecter.
+    if (response && response.status === 409) {
+      auth.setupRequired = false;
+      setLoggedIn(false);
+      return;
+    }
+    const message = await formRefusal(response, {
+      400: "Vérifiez les champs : un identifiant sans espace, un mot de passe de 12 caractères au moins.",
+      403: "Code d'installation incorrect. Recopiez celui du journal du serveur.",
+    });
+    showBanner(el.setupError, response && response.status === 429 ? "warn" : "error", message);
+    return;
+  }
+  el.setupPassword.value = "";
+  el.setupConfirm.value = "";
+  auth.setupRequired = false;
+  await checkSession();
+});
+
+el.accountButton.addEventListener("click", (event) => {
+  event.stopPropagation();
+  toggleAccountMenu();
+});
+
+el.accountMenu.addEventListener("click", (event) => {
+  const item = event.target.closest("[data-view]");
+  if (item) setView(item.dataset.view);
+});
+
+document.addEventListener("click", (event) => {
+  if (!el.accountMenu.hidden && !el.account.contains(event.target)) closeAccountMenu();
+});
+
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape" && !el.accountMenu.hidden) {
+    closeAccountMenu();
+    el.accountButton.focus();
+  }
+});
+
+el.keyNew.addEventListener("click", openKeyCreate);
+
+el.keyFilters.addEventListener("click", (event) => {
+  const chip = event.target.closest(".chip");
+  if (!chip) return;
+  keysView.filter = chip.dataset.status;
+  renderKeys();
+});
+
+el.keySearch.addEventListener("input", () => {
+  keysView.search = el.keySearch.value.trim();
+  renderKeys();
+});
+
+el.keyDrawer.addEventListener("close", () => {
+  // La clé montrée une fois disparaît avec le volet : rien n'en reste dans la page.
+  el.keyDrawerBody.replaceChildren();
+  keysView.detailId = null;
+  if (state.view === "keys") renderKeys();
+});
+
+// Un clic sur le voile, hors du volet, le referme.
+el.keyDrawer.addEventListener("click", (event) => {
+  if (event.target === el.keyDrawer) closeDrawer();
 });
 
 el.logout.addEventListener("click", async () => {
   await fetch("/ui/logout", { method: "POST", credentials: "same-origin" }).catch(() => null);
+  setAccountUser(null);
+  keysView.list = [];
+  accountView.data = null;
+  el.keyTable.replaceChildren();
+  el.accountBody.replaceChildren();
   state.selection = { kind: "all", key: null };
   state.expanded = new Set();
   state.showEmpty = new Set();
@@ -2645,11 +4058,13 @@ el.logout.addEventListener("click", async () => {
   setLoggedIn(false);
 });
 
+// La page du compte n'est pas rafraîchie en continu : elle porte des champs en cours de saisie.
 setInterval(() => {
-  if (el.autoRefresh.checked && el.login.hidden) refresh({ keepThread: true });
+  if (el.autoRefresh.checked && auth.loggedIn && state.view !== "account") refresh({ keepThread: true });
 }, REFRESH_MS);
 
 el.loginOrigin.textContent = `MCP Messenger · ${window.location.host}`;
 loadLinksWindow();
 renderEmptyReader();
-refresh();
+updateSetupForm();
+checkSession();