@imenam/mcp-messenger 1.0.32 → 1.0.33

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

@@ -36,6 +36,13 @@
           Liaisons
           <span class="count count--accent" id="links-badge" hidden></span>
         </button>
+        <button type="button" class="tab" data-view="keys">
+          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M2.6 17.4A2 2 0 0 0 2 18.8V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.2a2 2 0 0 0 1.4-.6l.8-.8a6.5 6.5 0 1 0-4-4z" />
+            <path d="M16.5 7.5h.01" />
+          </svg>
+          Clés API
+        </button>
       </nav>
 
       <div class="topbar-search" id="search-box">
@@ -67,7 +74,41 @@
             <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
           </svg>
         </button>
-        <button type="button" id="logout" class="btn btn--link">Se déconnecter</button>
+      </div>
+
+      <!-- Menu du compte : la page « Mon compte », les clés, la déconnexion. -->
+      <div class="account" id="account" hidden>
+        <button type="button" class="account-button" id="account-button" aria-haspopup="menu" aria-expanded="false">
+          <span class="account-avatar" id="account-initial"></span>
+          <span class="account-name" id="account-name"></span>
+          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+        </button>
+        <div class="account-menu" id="account-menu" role="menu" hidden>
+          <button type="button" class="account-item" role="menuitem" data-view="account">
+            <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z" />
+              <path d="M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
+              <path d="M7 20.7v-.7a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v.7" />
+            </svg>
+            Mon compte
+          </button>
+          <button type="button" class="account-item" role="menuitem" data-view="keys">
+            <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M2.6 17.4A2 2 0 0 0 2 18.8V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.2a2 2 0 0 0 1.4-.6l.8-.8a6.5 6.5 0 1 0-4-4z" />
+              <path d="M16.5 7.5h.01" />
+            </svg>
+            Clés API
+          </button>
+          <div class="account-sep"></div>
+          <button type="button" class="account-item" role="menuitem" id="logout">
+            <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+              <path d="m16 17 5-5-5-5" />
+              <path d="M21 12H9" />
+            </svg>
+            Se déconnecter
+          </button>
+        </div>
       </div>
     </header>
 
@@ -152,28 +193,170 @@
         <h2>Console de supervision</h2>
         <p class="card-sub" id="login-origin">MCP Messenger</p>
 
-        <label class="field">
-          <span class="field-label">Jeton administrateur</span>
+        <label class="field field--tight">
+          <span class="field-label">Nom d'utilisateur</span>
+          <span class="field-input">
+            <input type="text" id="login-username" autocomplete="username" autocapitalize="none" spellcheck="false" required />
+          </span>
+        </label>
+
+        <label class="field field--tight">
+          <span class="field-label">Mot de passe</span>
           <span class="field-input">
-            <input type="password" id="token" autocomplete="current-password" placeholder="MESSENGER_ADMIN_TOKEN" />
-            <button type="button" class="field-eye" id="token-reveal" aria-label="Afficher le jeton">
+            <input type="password" id="login-password" autocomplete="current-password" required />
+            <button type="button" class="field-eye" data-reveal="login-password" aria-label="Afficher le mot de passe">
               <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
                 <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z" />
                 <circle cx="12" cy="12" r="3" />
               </svg>
             </button>
           </span>
-          <span class="field-error" id="token-error"></span>
         </label>
 
+        <label class="check">
+          <input type="checkbox" id="login-remember" />
+          <span>Rester connecté sur cet appareil (30 jours)</span>
+        </label>
+
+        <p class="form-banner" id="login-error" hidden></p>
+
         <button type="submit" class="btn btn--primary btn--block">Se connecter</button>
-        <p class="card-note">
-          Le jeton n'est jamais conservé dans le navigateur : la session tient dans un cookie HttpOnly, fermé à la
-          déconnexion.
+        <p class="card-note card-note--rule">
+          Mot de passe perdu ? Sur le serveur :<br />
+          <code>npx @imenam/mcp-messenger --reset-password</code>
         </p>
       </form>
     </main>
 
+    <!--
+      Premier lancement : aucun compte n'existe encore. Le code d'installation, écrit dans le
+      journal du serveur, prouve qu'on a accès à la machine.
+    -->
+    <main class="login" id="setup" hidden>
+      <form class="card" id="setup-form">
+        <div class="card-badge">
+          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+            <path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
+            <path d="M19 8v6" />
+            <path d="M22 11h-6" />
+          </svg>
+        </div>
+        <h2>Créer le compte administrateur</h2>
+        <p class="card-sub">Ce compte ouvre la console et gère les clés API des agents.</p>
+
+        <label class="field field--tight">
+          <span class="field-label">Code d'installation</span>
+          <span class="field-input">
+            <input type="text" id="setup-code" class="mono" autocomplete="off" autocapitalize="characters" spellcheck="false" required />
+          </span>
+          <span class="field-hint">Affiché dans le journal du serveur au démarrage. Valable une fois.</span>
+        </label>
+
+        <div class="card-rule"></div>
+
+        <label class="field field--tight">
+          <span class="field-label">Nom d'utilisateur</span>
+          <span class="field-input">
+            <input type="text" id="setup-username" autocomplete="username" autocapitalize="none" spellcheck="false" required />
+          </span>
+        </label>
+
+        <label class="field field--tight">
+          <span class="field-label">Mot de passe</span>
+          <span class="field-input">
+            <input type="password" id="setup-password" autocomplete="new-password" required />
+            <button type="button" class="field-eye" data-reveal="setup-password" aria-label="Afficher le mot de passe">
+              <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z" />
+                <circle cx="12" cy="12" r="3" />
+              </svg>
+            </button>
+          </span>
+          <span class="meter" id="setup-meter" data-level="0">
+            <span></span><span></span><span></span><span></span>
+          </span>
+          <span class="field-hint" id="setup-meter-label">12 caractères minimum.</span>
+        </label>
+
+        <label class="field field--tight">
+          <span class="field-label">Confirmer le mot de passe</span>
+          <span class="field-input">
+            <input type="password" id="setup-confirm" autocomplete="new-password" required />
+          </span>
+        </label>
+
+        <p class="form-banner" id="setup-error" hidden></p>
+
+        <button type="submit" class="btn btn--primary btn--block" id="setup-submit" disabled>
+          Créer le compte et se connecter
+        </button>
+        <p class="card-note">Le mot de passe est stocké haché (scrypt), jamais en clair.</p>
+      </form>
+    </main>
+
+    <!-- Clés API : une par poste ou par agent, montrée en clair une seule fois. -->
+    <main class="page" id="keys" hidden>
+      <div class="page-head">
+        <div>
+          <h2>Clés API</h2>
+          <p class="muted">
+            Une clé par poste ou par agent. Elle ne s'affiche qu'une fois, à sa création ; une clé révoquée est
+            refusée dès l'appel suivant.
+          </p>
+        </div>
+        <button type="button" class="btn btn--primary" id="key-new">
+          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14" /><path d="M12 5v14" /></svg>
+          Nouvelle clé
+        </button>
+      </div>
+      <div class="page-tools">
+        <div class="chips" id="key-filters">
+          <button type="button" class="chip is-active" data-status="active">Actives <span class="chip-count"></span></button>
+          <button type="button" class="chip" data-status="expired">Expirées <span class="chip-count"></span></button>
+          <button type="button" class="chip" data-status="revoked">Révoquées <span class="chip-count"></span></button>
+        </div>
+        <label class="page-search">
+          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.3-4.3" />
+          </svg>
+          <input type="search" id="key-search" placeholder="Nom, agent ou début de clé…" />
+        </label>
+      </div>
+      <div class="key-table" id="key-table"></div>
+      <p class="page-note">
+        <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z" />
+          <path d="M12 11v5" />
+          <path d="M12 8h.01" />
+        </svg>
+        Côté agent, la clé se pose dans MESSENGER_API_KEY. Révoquer une clé coupe l'accès de l'agent ; ses boîtes et ses
+        messages restent en place.
+      </p>
+    </main>
+
+    <!-- Mon compte : identifiant, mot de passe, navigateurs connectés. -->
+    <main class="page page--narrow" id="account-page" hidden>
+      <div class="page-head">
+        <div>
+          <h2>Mon compte</h2>
+          <p class="muted">Identifiant de la console, mot de passe et appareils connectés.</p>
+        </div>
+      </div>
+      <div id="account-body"></div>
+    </main>
+
+    <!-- Volet des clés : création, clé affichée une fois, détail d'une clé. -->
+    <dialog class="drawer" id="key-drawer">
+      <div class="drawer-body" id="key-drawer-body"></div>
+    </dialog>
+
+    <!-- Confirmation de révocation : la seule action définitive sur une clé. -->
+    <dialog class="modal modal--confirm" id="key-revoke">
+      <div class="modal-card" id="key-revoke-body"></div>
+    </dialog>
+
     <!-- Console : agents, fils, lecteur du fil. -->
     <main class="console" id="console" hidden>
       <aside class="agents" id="agents-pane">