@imenam/mcp-messenger 1.0.10 → 1.0.13

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

@@ -9,46 +9,111 @@
   <body>
     <header class="topbar">
       <div class="brand">
-        <span class="dot" id="status-dot"></span>
+        <svg class="brand-mark" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M22 12h-6l-2 3h-4l-2-3H2" />
+          <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+        </svg>
         <h1>MCP Messenger</h1>
-        <span class="muted" id="server-stats">chargement…</span>
+        <span class="pill pill--idle" id="status">
+          <span class="pill-dot"></span>
+          <span id="status-label">connexion…</span>
+        </span>
       </div>
-      <div class="controls">
-        <label class="auto">
+
+      <div class="topbar-search" id="search-box">
+        <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="search" placeholder="Rechercher un sujet, un fil, un agent…" />
+      </div>
+
+      <div class="topbar-controls" id="controls" hidden>
+        <label class="switch">
           <input type="checkbox" id="auto-refresh" checked />
-          rafraîchissement auto
+          <span class="switch-track"><span class="switch-knob"></span></span>
+          <span class="switch-label">auto · 5 s</span>
         </label>
-        <button id="refresh">Rafraîchir</button>
-        <button id="logout" hidden>Se déconnecter</button>
+        <button type="button" id="refresh" class="btn btn--icon" title="Rafraîchir" aria-label="Rafraîchir">
+          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
+            <path d="M21 3v5h-5" />
+            <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
+            <path d="M3 21v-5h5" />
+          </svg>
+        </button>
+        <button type="button" id="logout" class="btn btn--link">Se déconnecter</button>
       </div>
     </header>
 
-    <form id="login-form" class="token-bar" hidden>
-      <label for="token">Jeton d'accès requis</label>
-      <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>
-    </form>
-
-    <main>
-      <aside class="panel agents">
-        <h2>Agents</h2>
-        <ul id="agents"></ul>
+    <!-- Écran de connexion : une carte seule, sans les panneaux vides derrière elle. -->
+    <main class="login" id="login" hidden>
+      <form class="card" id="login-form">
+        <div class="card-badge">
+          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+            <rect x="3" y="11" width="18" height="11" rx="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+          </svg>
+        </div>
+        <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>
+          <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">
+              <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>
+
+        <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>
+      </form>
+    </main>
+
+    <!-- Console : agents, fils, lecteur du fil, volet de détail. -->
+    <main class="console" id="console" hidden>
+      <aside class="agents" id="agents-pane">
+        <div class="agents-head">
+          <span class="section-label">Agents</span>
+          <button type="button" class="btn btn--icon btn--ghost" id="collapse" title="Replier" aria-label="Replier la liste des agents">
+            <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+              <path d="M9 3v18" />
+            </svg>
+          </button>
+        </div>
+        <ul class="agent-list" id="agents"></ul>
+        <p class="agents-foot muted" id="agents-foot"></p>
       </aside>
 
-      <section class="panel messages">
-        <div class="filters">
-          <input type="search" id="search" placeholder="Rechercher dans les sujets et les corps…" />
-          <span class="muted" id="filter-label"></span>
-          <button id="clear-filters" class="link">tout afficher</button>
+      <section class="threads">
+        <div class="threads-head">
+          <h2>Fils</h2>
+          <p class="muted" id="threads-scope"></p>
+          <div class="chips" id="chips">
+            <button type="button" class="chip is-active" data-filter="all">Tous</button>
+            <button type="button" class="chip" data-filter="unread">Non lus</button>
+            <button type="button" class="chip" data-filter="high">Priorité haute</button>
+          </div>
         </div>
-        <ul id="messages"></ul>
+        <ul class="thread-list" id="threads"></ul>
       </section>
 
-      <section class="panel detail">
-        <div id="detail" class="empty">Sélectionnez un message pour voir son contenu.</div>
-      </section>
+      <section class="reader" id="reader"></section>
+
+      <aside class="sheet" id="sheet" hidden></aside>
     </main>
+
     <script type="module" src="./app.js"></script>
   </body>
 </html>