@imenam/mcp-messenger 1.0.5 → 1.0.6

package/README.md

@@ -43,7 +43,7 @@ npx @imenam/mcp-messenger --generate-token
 MESSENGER_TOKEN=<le-jeton> npx @imenam/mcp-messenger --server
 # → listening on http://127.0.0.1:3600 (loopback only)
 # → auth: shared token — required on every request
-# → web console: http://127.0.0.1:3600/ui/?token=<MESSENGER_ADMIN_TOKEN>
+# → web console: http://127.0.0.1:3600/ui/ (asks for MESSENGER_ADMIN_TOKEN once)
 ```
 
 Deux invariants, non négociables et vérifiés par les tests :
@@ -51,9 +51,10 @@ Deux invariants, non négociables et vérifiés par les tests :
 1. **Le serveur écoute toujours sur `127.0.0.1`.** `MESSENGER_HOST` n'est pas un réglage :
    toute autre valeur fait échouer le démarrage. Pour joindre la boîte depuis une autre
    machine, il faut placer un reverse proxy (TLS) devant.
-2. **Un jeton est obligatoire et vérifié sur chaque requête entrante** — API, `/health` et
-   console web comprises. Sans `MESSENGER_TOKEN` ni `MESSENGER_AGENT_TOKENS`, le serveur
-   refuse de démarrer.
+2. **Un jeton est obligatoire et vérifié sur chaque requête de données** — API, `/health`
+   et données de la console (`/admin`) comprises. Seule la page de la console, qui ne
+   contient aucun secret, est servie librement. Sans `MESSENGER_TOKEN` ni
+   `MESSENGER_AGENT_TOKENS`, le serveur refuse de démarrer.
 
 ### 2. Déclarer le MCP côté agent
 
@@ -273,8 +274,7 @@ configuration partagent alors la même boîte. Utile pour un service unique et s
 
 ## Console web
 
-`http://127.0.0.1:3600/ui/?token=<MESSENGER_ADMIN_TOKEN>` affiche, en lecture seule,
-**tous les échanges** de la flotte :
+`http://127.0.0.1:3600/ui/` affiche, en lecture seule, **tous les échanges** de la flotte :
 
 - la liste des agents avec leurs compteurs (envoyés, reçus, non lus) ;
 - tous les messages, filtrables par agent, par fil ou par recherche texte ;
@@ -282,14 +282,18 @@ configuration partagent alors la même boîte. Utile pour un service unique et s
 - le fil complet d'une conversation ;
 - un rafraîchissement automatique toutes les 5 secondes.
 
-Un navigateur ne peut pas poser d'en-tête sur une navigation : le jeton passe donc par
-`?token=` dans l'URL, et le serveur le propage aux ressources de la page (`styles.css`,
-`app.js`), elles aussi protégées. Ouvrir `/ui/` sans jeton renvoie un `401`. En dernier
-recours, la console propose un champ pour saisir le jeton et le conserve dans le
-`localStorage` du navigateur.
+À l'ouverture, la console demande `MESSENGER_ADMIN_TOKEN` dans un formulaire. Le serveur
+le vérifie (`POST /ui/login`) et ouvre une **session** de 12 heures, portée par un cookie
+`HttpOnly` + `SameSite=Strict` (+ `Secure` en HTTPS). Le cookie ne contient jamais le
+jeton, seulement un identifiant de session opaque, oublié au redémarrage du serveur ou
+sur « Se déconnecter ». Le navigateur ne stocke rien d'autre, et le jeton n'apparaît
+jamais dans une URL.
 
-> Le jeton apparaissant dans l'URL, il se retrouve dans l'historique du navigateur. C'est
-> le prix du « jeton exigé sur absolument tout », y compris la page elle-même.
+Cette session n'est reconnue que sur `/ui` et `/admin` : elle ne permet pas d'appeler
+l'API des agents. Un site tiers ne peut donc pas faire agir un agent à travers le
+navigateur de l'administrateur. Les routes `/admin` acceptent toujours le jeton admin en
+`Authorization: Bearer` pour les scripts. Le formulaire est limité à 10 tentatives par
+quart d'heure et par IP.
 
 La console n'écrit jamais : elle ne peut ni envoyer, ni supprimer, ni modifier.
 
@@ -330,10 +334,11 @@ Toutes les variables sont documentées dans [`.env.example`](.env.example). L'es
 
 ## API HTTP
 
-**Toutes** les routes exigent un jeton, présenté au choix par `Authorization: Bearer
-<token>`, l'en-tête `X-Messenger-Token`, ou `?token=` (réservé à la navigation navigateur).
-Les routes `/api/*` exigent en plus l'en-tête `X-Agent-Id`, et le jeton doit correspondre à
-cet agent lorsque `MESSENGER_AGENT_TOKENS` est utilisé.
+**Toutes** les routes de données exigent un jeton, présenté par `Authorization: Bearer
+<token>` ou par l'en-tête `X-Messenger-Token` — jamais dans l'URL. Les routes `/api/*`
+exigent en plus l'en-tête `X-Agent-Id`, et le jeton doit correspondre à cet agent lorsque
+`MESSENGER_AGENT_TOKENS` est utilisé. Les routes `/admin/*` acceptent aussi la session de
+la console (cookie), qui elle n'ouvre rien d'autre.
 
 | Méthode | Route | Rôle |
 |---|---|---|
@@ -355,6 +360,7 @@ cet agent lorsque `MESSENGER_AGENT_TOKENS` est utilisé.
 | `GET` `POST` `DELETE` | `/api/folders[/:name]` | Gérer les dossiers |
 | `GET` | `/api/wait` | Attente longue (`timeout_seconds`, `folder`, `watcher`) |
 | `GET` | `/admin/overview` · `/admin/messages[/:id]` · `/admin/threads/:id` | Supervision, lecture seule |
+| `POST` | `/ui/login` · `/ui/logout` | Session de la console (`{ "token": … }` → cookie `HttpOnly`) |
 
 ---
 

package/dist/src/cli/generate-token.d.ts

@@ -1,7 +1,7 @@
 /**
  * Génère un jeton aléatoire cryptographiquement sûr.
  *
- * L'encodage `base64url` est choisi pour que le jeton passe tel quel dans l'URL de la
- * console web (`/ui/?token=…`) : ni `+`, ni `/`, ni `=` à échapper.
+ * L'encodage `base64url` évite tout caractère à échapper (`+`, `/`, `=`) : le jeton se
+ * copie tel quel dans un `.env`, un `.mcp.json` ou un en-tête HTTP.
  */
 export declare function generateToken(bytes?: number): string;

package/dist/src/cli/generate-token.js

@@ -4,8 +4,8 @@ const DEFAULT_BYTES = 32;
 /**
  * Génère un jeton aléatoire cryptographiquement sûr.
  *
- * L'encodage `base64url` est choisi pour que le jeton passe tel quel dans l'URL de la
- * console web (`/ui/?token=…`) : ni `+`, ni `/`, ni `=` à échapper.
+ * L'encodage `base64url` évite tout caractère à échapper (`+`, `/`, `=`) : le jeton se
+ * copie tel quel dans un `.env`, un `.mcp.json` ou un en-tête HTTP.
  */
 export function generateToken(bytes = DEFAULT_BYTES) {
     return randomBytes(bytes).toString("base64url");

package/dist/src/cli/setup-mcp.js

@@ -140,7 +140,7 @@ export function runSetupMcp({ cwd, force }) {
     console.log("");
     console.log("Le serveur boîte aux lettres doit tourner à part, avec le même jeton :");
     console.log(`  MESSENGER_TOKEN=<votre-jeton> npx -y ${PACKAGE_NAME} --server`);
-    console.log(`  console web : ${DEFAULT_SERVER_URL}/ui/?token=<votre-jeton>`);
+    console.log(`  console web : ${DEFAULT_SERVER_URL}/ui/ (le jeton y est demandé une fois)`);
     console.log("");
     console.log("Chaque session d'agent reçoit sa propre boîte : demandez son adresse à l'agent");
     console.log("(outil whoami) pour la transmettre à un autre agent, ou pour la reprendre plus tard.");

package/dist/src/index.js

@@ -43,7 +43,7 @@ async function main() {
             "Ce jeton doit être identique aux trois endroits suivants :",
             "  1. le serveur       : MESSENGER_TOKEN",
             "  2. chaque agent     : MESSENGER_TOKEN dans son .mcp.json",
-            "  3. la console web   : http://127.0.0.1:3600/ui/?token=<jeton>",
+            "  3. la console web   : http://127.0.0.1:3600/ui/ (à saisir dans le formulaire)",
             "",
         ].join("\n"));
         return;

package/dist/src/server/app.js

@@ -1,5 +1,4 @@
 import express from "express";
-import fs from "node:fs";
 import helmet from "helmet";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
@@ -9,6 +8,7 @@ import { z } from "zod";
 import { MessengerError, normalizeAgentId } from "../core/store.js";
 import { PRIORITIES } from "../core/types.js";
 import { WatcherRegistry } from "./watchers.js";
+import { CONSOLE_COOKIE, ConsoleSessions, consoleSessionId } from "./console-session.js";
 import { APP_VERSION } from "../version.js";
 import { logger } from "../logger.js";
 const UI_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), "ui");
@@ -72,6 +72,7 @@ const waitQuerySchema = z.object({
     // attente longue, mais seul le premier prouve que l'agent est joignable en continu.
     watcher: z.enum(["true", "1"]).optional(),
 });
+const loginSchema = z.object({ token: z.string().min(1).max(1024) });
 const adminListSchema = z.object({
     search: z.string().trim().min(1).optional(),
     agent: z.string().trim().min(1).optional(),
@@ -106,8 +107,65 @@ export function createApp({ store, config }) {
         standardHeaders: "draft-8",
         legacyHeaders: false,
     }));
-    // Porte d'entrée unique : aucune requête, quelle qu'elle soit, n'est servie sans
-    // jeton valide. Les contrôles par route (identité de l'agent, console) viennent ensuite.
+    // --- Console web ----------------------------------------------------------
+    // La page et ses fichiers ne contiennent aucun secret : ils sont servis à tous. Ce sont
+    // les données (`/admin`) qui sont protégées, par une session ouverte contre le jeton
+    // admin. Voir `console-session.ts` pour le raisonnement.
+    const sessions = new ConsoleSessions();
+    const cookieOptions = (req) => ({
+        httpOnly: true,
+        sameSite: "strict",
+        // `req.secure` n'est vrai derrière un proxy TLS que si `trust proxy` est configuré.
+        secure: req.secure,
+        path: "/",
+    });
+    // Limite propre au formulaire : le jeton fait 256 bits, mais autant fermer la porte.
+    const loginLimiter = rateLimit({ windowMs: 15 * 60_000, limit: 10, standardHeaders: "draft-8", legacyHeaders: false });
+    app.post("/ui/login", loginLimiter, (req, res) => {
+        const input = loginSchema.parse(req.body ?? {});
+        if (!safeEqual(input.token, config.adminToken)) {
+            res.status(401).json({ error: "invalid admin token" });
+            return;
+        }
+        res.cookie(CONSOLE_COOKIE, sessions.create(), { ...cookieOptions(req), maxAge: sessions.ttlMs });
+        res.status(204).end();
+    });
+    app.post("/ui/logout", (req, res) => {
+        sessions.revoke(consoleSessionId(req));
+        res.clearCookie(CONSOLE_COOKIE, cookieOptions(req));
+        res.status(204).end();
+    });
+    // `maxAge: 0` + ETag : la console reflète immédiatement une mise à jour du paquet,
+    // sans laisser un navigateur servir l'ancienne version depuis son cache.
+    app.use("/ui", express.static(UI_DIR, { index: "index.html", maxAge: 0, etag: true }));
+    app.get("/", (_req, res) => {
+        res.redirect("/ui/");
+    });
+    // --- Supervision (lecture seule) -----------------------------------------
+    // Montée avant la porte d'entrée : son contrôle est au moins aussi strict (session de
+    // console ou jeton admin), et la session par cookie n'est reconnue nulle part ailleurs.
+    const admin = express.Router();
+    admin.use(authenticateAdmin(config, sessions));
+    admin.get("/overview", (_req, res) => {
+        res.json(store.overview());
+    });
+    admin.get("/messages", (req, res) => {
+        const query = adminListSchema.parse(req.query);
+        res.json({ messages: store.listAllMessages(query) });
+    });
+    admin.get("/messages/:id", (req, res) => {
+        res.json(store.getMessageAdmin(String(req.params.id)));
+    });
+    admin.get("/threads/:id", (req, res) => {
+        const threadId = String(req.params.id);
+        const messages = store.listAllMessages({ thread_id: threadId, limit: 100 });
+        if (messages.length === 0)
+            throw new MessengerError(`thread not found: ${threadId}`, 404);
+        res.json({ thread_id: threadId, thread: store.getThreadInfo(threadId), messages: messages.slice().reverse() });
+    });
+    app.use("/admin", admin);
+    // Porte d'entrée de tout le reste : aucune requête n'est servie sans jeton valide. Le
+    // contrôle par route (identité de l'agent) vient ensuite.
     app.use(requireAnyToken(config));
     // --- État du service ------------------------------------------------------
     app.get("/health", (_req, res) => {
@@ -260,53 +318,6 @@ export function createApp({ store, config }) {
         req.once("close", onClose);
     });
     app.use("/api", api);
-    // --- Supervision (lecture seule) -----------------------------------------
-    const admin = express.Router();
-    admin.use(authenticateAdmin(config));
-    admin.get("/overview", (_req, res) => {
-        res.json(store.overview());
-    });
-    admin.get("/messages", (req, res) => {
-        const query = adminListSchema.parse(req.query);
-        res.json({ messages: store.listAllMessages(query) });
-    });
-    admin.get("/messages/:id", (req, res) => {
-        res.json(store.getMessageAdmin(String(req.params.id)));
-    });
-    admin.get("/threads/:id", (req, res) => {
-        const threadId = String(req.params.id);
-        const messages = store.listAllMessages({ thread_id: threadId, limit: 100 });
-        if (messages.length === 0)
-            throw new MessengerError(`thread not found: ${threadId}`, 404);
-        res.json({ thread_id: threadId, thread: store.getThreadInfo(threadId), messages: messages.slice().reverse() });
-    });
-    app.use("/admin", admin);
-    // --- Interface web --------------------------------------------------------
-    // Un navigateur ne peut pas poser d'en-tête sur une navigation : la console s'ouvre
-    // donc avec `?token=`. La page est servie avec ce jeton propagé sur ses ressources,
-    // sans quoi le CSS et le script seraient refusés par la porte d'entrée.
-    app.get(["/ui", "/ui/", "/ui/index.html"], (req, res, next) => {
-        const token = presentedToken(req);
-        if (!token) {
-            next();
-            return;
-        }
-        fs.readFile(path.join(UI_DIR, "index.html"), "utf-8", (error, html) => {
-            if (error) {
-                next(error);
-                return;
-            }
-            const suffix = `?token=${encodeURIComponent(token)}`;
-            res.type("html").send(html.replaceAll("./styles.css", `./styles.css${suffix}`).replaceAll("./app.js", `./app.js${suffix}`));
-        });
-    });
-    // `maxAge: 0` + ETag : la console reflète immédiatement une mise à jour du paquet,
-    // sans laisser un navigateur servir l'ancienne version depuis son cache.
-    app.use("/ui", express.static(UI_DIR, { index: false, maxAge: 0, etag: true }));
-    app.get("/", (req, res) => {
-        const token = presentedToken(req);
-        res.redirect(token ? `/ui/?token=${encodeURIComponent(token)}` : "/ui/");
-    });
     // --- Erreurs --------------------------------------------------------------
     app.use((_req, res) => {
         res.status(404).json({ error: "not found" });
@@ -379,8 +390,13 @@ function authenticateAgent(config) {
         next();
     };
 }
-function authenticateAdmin(config) {
+/** Session de console (navigateur) ou jeton admin (script, `curl`). */
+function authenticateAdmin(config, sessions) {
     return (req, res, next) => {
+        if (sessions.has(consoleSessionId(req))) {
+            next();
+            return;
+        }
         const presented = presentedToken(req);
         if (!presented || !safeEqual(presented, config.adminToken)) {
             res.status(401).json({ error: "invalid or missing admin token" });
@@ -390,19 +406,15 @@ function authenticateAdmin(config) {
     };
 }
 /**
- * Jeton présenté par l'appelant, dans l'ordre de préférence : en-tête `Authorization`,
- * en-tête `X-Messenger-Token`, puis paramètre `?token=` — ce dernier existe pour la
- * navigation navigateur vers la console, qui ne peut pas poser d'en-tête.
+ * Jeton présenté par l'appelant : en-tête `Authorization`, sinon `X-Messenger-Token`.
+ * Jamais l'URL : un jeton en query string finit dans les journaux d'accès du proxy.
  */
 function presentedToken(req) {
     const header = req.header("authorization");
     if (header?.toLowerCase().startsWith("bearer "))
         return header.slice(7).trim() || null;
     const alt = req.header("x-messenger-token");
-    if (alt?.trim())
-        return alt.trim();
-    const query = req.query.token;
-    return typeof query === "string" && query.trim() ? query.trim() : null;
+    return alt?.trim() ? alt.trim() : null;
 }
 /** Comparaison à temps constant : évite de laisser fuiter le jeton octet par octet. */
 function safeEqual(a, b) {

package/dist/src/server/console-session.d.ts

@@ -0,0 +1,30 @@
+import type { Request } from "express";
+/**
+ * Sessions de la console web.
+ *
+ * Le navigateur ne peut pas poser d'en-tête sur une navigation, et faire transiter le
+ * jeton dans l'URL le dépose dans l'historique et les journaux d'accès du proxy. La
+ * console s'ouvre donc sans jeton, le demande une fois dans un formulaire, et reçoit en
+ * retour un identifiant de session opaque dans un cookie `HttpOnly`.
+ *
+ * Le cookie ne porte jamais le jeton lui-même : sa fuite ne donne qu'une session, à durée
+ * limitée, que le serveur oublie au redémarrage. Il n'est honoré que sur `/admin` et
+ * `/ui` : l'API des agents reste sur le Bearer, un site tiers ne peut donc pas faire
+ * agir un agent à travers le navigateur de l'administrateur.
+ */
+export declare const CONSOLE_COOKIE = "messenger_console";
+export declare class ConsoleSessions {
+    readonly ttlMs: number;
+    private readonly now;
+    private readonly sessions;
+    constructor(ttlMs?: number, now?: () => number);
+    /** Ouvre une session et rend son identifiant, seul contenu du cookie. */
+    create(): string;
+    /** Vrai si l'identifiant désigne une session encore valide. */
+    has(id: string | null): boolean;
+    revoke(id: string | null): void;
+    get size(): number;
+    private prune;
+}
+/** Identifiant de session porté par la requête, s'il y en a un. */
+export declare function consoleSessionId(req: Request): string | null;

package/dist/src/server/console-session.js

@@ -0,0 +1,85 @@
+import { randomBytes, timingSafeEqual } from "node:crypto";
+/**
+ * Sessions de la console web.
+ *
+ * Le navigateur ne peut pas poser d'en-tête sur une navigation, et faire transiter le
+ * jeton dans l'URL le dépose dans l'historique et les journaux d'accès du proxy. La
+ * console s'ouvre donc sans jeton, le demande une fois dans un formulaire, et reçoit en
+ * retour un identifiant de session opaque dans un cookie `HttpOnly`.
+ *
+ * Le cookie ne porte jamais le jeton lui-même : sa fuite ne donne qu'une session, à durée
+ * limitée, que le serveur oublie au redémarrage. Il n'est honoré que sur `/admin` et
+ * `/ui` : l'API des agents reste sur le Bearer, un site tiers ne peut donc pas faire
+ * agir un agent à travers le navigateur de l'administrateur.
+ */
+export const CONSOLE_COOKIE = "messenger_console";
+/** Durée de vie d'une session : assez pour une journée de supervision, pas plus. */
+const SESSION_TTL_MS = 12 * 60 * 60 * 1000;
+export class ConsoleSessions {
+    ttlMs;
+    now;
+    sessions = new Map();
+    constructor(ttlMs = SESSION_TTL_MS, now = Date.now) {
+        this.ttlMs = ttlMs;
+        this.now = now;
+    }
+    /** Ouvre une session et rend son identifiant, seul contenu du cookie. */
+    create() {
+        this.prune();
+        const id = randomBytes(32).toString("base64url");
+        this.sessions.set(id, { expiresAt: this.now() + this.ttlMs });
+        return id;
+    }
+    /** Vrai si l'identifiant désigne une session encore valide. */
+    has(id) {
+        if (!id)
+            return false;
+        // Parcours à temps constant : la Map compare ses clés en temps variable, ce qui
+        // laisserait deviner un identifiant octet par octet.
+        let match = null;
+        const presented = Buffer.from(id);
+        for (const [key, session] of this.sessions) {
+            const candidate = Buffer.from(key);
+            if (candidate.length === presented.length && timingSafeEqual(candidate, presented))
+                match = session;
+        }
+        if (!match)
+            return false;
+        if (match.expiresAt <= this.now()) {
+            this.sessions.delete(id);
+            return false;
+        }
+        return true;
+    }
+    revoke(id) {
+        if (id)
+            this.sessions.delete(id);
+    }
+    get size() {
+        this.prune();
+        return this.sessions.size;
+    }
+    prune() {
+        const now = this.now();
+        for (const [id, session] of this.sessions) {
+            if (session.expiresAt <= now)
+                this.sessions.delete(id);
+        }
+    }
+}
+/** Identifiant de session porté par la requête, s'il y en a un. */
+export function consoleSessionId(req) {
+    const header = req.headers.cookie;
+    if (!header)
+        return null;
+    for (const part of header.split(";")) {
+        const separator = part.indexOf("=");
+        if (separator < 0)
+            continue;
+        if (part.slice(0, separator).trim() !== CONSOLE_COOKIE)
+            continue;
+        const value = part.slice(separator + 1).trim();
+        return value ? decodeURIComponent(value) : null;
+    }
+    return null;
+}

package/dist/src/server/start.js

@@ -43,8 +43,7 @@ export async function runServerMode() {
     logger.info(`mcp-messenger v${APP_VERSION} listening on ${running.url} (loopback only)`);
     logger.info(`database: ${config.dbPath}`);
     logger.info(`auth: ${authMode} — required on every request`);
-    // Le jeton n'est pas écrit dans les logs : seule sa provenance est rappelée.
-    logger.info(`web console: ${running.url}/ui/?token=<MESSENGER_ADMIN_TOKEN>`);
+    logger.info(`web console: ${running.url}/ui/ (asks for MESSENGER_ADMIN_TOKEN once)`);
     let shuttingDown = false;
     const shutdown = (signal) => {
         if (shuttingDown)

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

@@ -1,295 +1,318 @@
-// 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 TOKEN_KEY = "messenger.admin.token";
-const REFRESH_MS = 5000;
-
-// Le serveur exige un jeton sur toute requête, y compris celle qui a servi cette page :
-// il est propagé sur l'URL de ce script. On le reprend tel quel comme jeton de session.
-const TOKEN_FROM_URL = new URL(import.meta.url).searchParams.get("token");
-
-const state = {
-  token: TOKEN_FROM_URL || localStorage.getItem(TOKEN_KEY) || "",
-  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"),
-  tokenBar: document.getElementById("token-bar"),
-  tokenInput: document.getElementById("token"),
-  tokenError: document.getElementById("token-error"),
-  saveToken: document.getElementById("save-token"),
-};
-
-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 headers = { accept: "application/json" };
-  if (state.token) headers.authorization = "Bearer " + state.token;
-
-  const response = await fetch(url, { headers });
-  if (response.status === 401) {
-    el.tokenBar.hidden = false;
-    throw new Error("unauthorized");
-  }
-  if (!response.ok) {
-    const payload = await response.json().catch(() => ({}));
-    throw new Error(payload.error || response.statusText);
-  }
-  return response.json();
-}
-
-/** 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 }),
-    ]);
-    el.tokenBar.hidden = 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.saveToken.addEventListener("click", () => {
-  state.token = el.tokenInput.value.trim();
-  localStorage.setItem(TOKEN_KEY, state.token);
-  el.tokenError.textContent = "";
-  refresh({ keepDetail: true }).then(() => {
-    if (!el.tokenBar.hidden) el.tokenError.textContent = "jeton refusé";
-  });
-});
-
-setInterval(() => {
-  if (el.autoRefresh.checked) 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" : "");
+    // 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();

package/dist/src/server/ui/index.html

@@ -19,15 +19,16 @@
           rafraîchissement auto
         </label>
         <button id="refresh">Rafraîchir</button>
+        <button id="logout" hidden>Se déconnecter</button>
       </div>
     </header>
 
-    <div id="token-bar" class="token-bar" hidden>
+    <form id="login-form" class="token-bar" hidden>
       <label for="token">Jeton d'accès requis</label>
-      <input type="password" id="token" placeholder="MESSENGER_ADMIN_TOKEN ou MESSENGER_TOKEN" />
-      <button id="save-token">Se connecter</button>
+      <input type="password" id="token" autocomplete="current-password" placeholder="MESSENGER_ADMIN_TOKEN" />
+      <button type="submit">Se connecter</button>
       <span class="error" id="token-error"></span>
-    </div>
+    </form>
 
     <main>
       <aside class="panel agents">

package/dist/src/server/ui/styles.css

@@ -121,6 +121,7 @@ input[type="password"] {
 }
 
 .token-bar {
+  margin: 0;
   display: flex;
   align-items: center;
   gap: 10px;

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const APP_VERSION = "1.0.5";
+export declare const APP_VERSION = "1.0.6";

package/dist/src/version.js

@@ -1,2 +1,2 @@
 // Généré par scripts/generate-version.js — ne pas modifier à la main.
-export const APP_VERSION = "1.0.5";
+export const APP_VERSION = "1.0.6";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imenam/mcp-messenger",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "main": "dist/src/index.js",
   "scripts": {
     "test": "npm run build && vitest run",