@imenam/mcp-messenger 1.0.18 → 1.0.20

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

@@ -61,7 +61,7 @@
     <dialog class="modal" id="purge">
       <div class="modal-card">
         <div class="modal-head">
-          <h2>Purger les boîtes inactives</h2>
+          <h2>Nettoyer les boîtes</h2>
           <button type="button" class="btn btn--icon btn--ghost" id="purge-close" aria-label="Fermer">
             <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
               <path d="M18 6 6 18" />
@@ -70,16 +70,26 @@
           </button>
         </div>
         <p class="modal-sub">
-          Une boîte est inactive quand plus rien ne l'a touchée depuis la date choisie : ni connexion, ni message reçu
-          ou envoyé. Une boîte créée après cette date est laissée tranquille, même vide. La suppression est définitive
-          et emporte les messages que plus personne ne pourrait lire ; ce que le correspondant a reçu de son côté reste
-          intact.
+          Deux nettoyages, deux critères. La suppression est définitive dans les deux cas, et emporte les messages que
+          plus personne ne pourrait lire ; ce que le correspondant a reçu de son côté reste intact. Un agent dont toutes
+          les boîtes disparaissent quitte l'annuaire avec elles.
         </p>
 
+        <!-- Premier critère : la boîte n'a jamais servi. Il ne dépend d'aucune date. -->
+        <div class="purge-controls">
+          <div class="purge-criterion">
+            <span class="field-label">Boîtes vides</span>
+            <span class="purge-hint">Rien n'y est jamais passé, ni envoi ni réception, quel que soit leur âge.</span>
+          </div>
+          <button type="button" class="btn" id="purge-preview-empty">Prévisualiser</button>
+        </div>
+
+        <!-- Second critère : la boîte a servi, mais plus rien ne l'a touchée depuis. -->
         <div class="purge-controls">
           <label class="field">
-            <span class="field-label">Sans activité depuis le</span>
+            <span class="field-label">Boîtes sans activité depuis le</span>
             <span class="field-input"><input type="date" id="purge-before" /></span>
+            <span class="purge-hint">Ni connexion, ni message. Une boîte créée après cette date est épargnée.</span>
           </label>
           <button type="button" class="btn" id="purge-preview">Prévisualiser</button>
         </div>
@@ -143,6 +153,19 @@
         <p class="agents-foot muted" id="agents-foot"></p>
       </aside>
 
+      <!--
+        Séparateurs déplaçables. Chacun redimensionne le panneau qu'il borde, à la souris
+        comme aux flèches du clavier ; un double-clic rend sa largeur d'origine.
+      -->
+      <div
+        class="resizer"
+        id="resize-agents"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Largeur de la colonne des agents"
+        tabindex="0"
+      ></div>
+
       <section class="threads">
         <div class="threads-head">
           <h2>Fils</h2>
@@ -156,8 +179,27 @@
         <ul class="thread-list" id="threads"></ul>
       </section>
 
+      <div
+        class="resizer"
+        id="resize-threads"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Largeur de la liste des fils"
+        tabindex="0"
+      ></div>
+
       <section class="reader" id="reader"></section>
 
+      <!-- Suit le volet de détail : il n'existe que lorsque le volet est ouvert. -->
+      <div
+        class="resizer resizer--sheet"
+        id="resize-sheet"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Largeur du volet de détail"
+        tabindex="0"
+      ></div>
+
       <aside class="sheet" id="sheet" hidden></aside>
     </main>
 

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

@@ -335,15 +335,29 @@ body {
   color: var(--muted);
 }
 
+/* Un critère par ligne, son bouton au bout : les deux nettoyages se lisent en parallèle. */
 .purge-controls {
   display: flex;
   align-items: flex-end;
   gap: 12px;
+  padding: 12px 0;
 }
 
-.purge-controls .field {
+.purge-controls + .purge-controls {
+  border-top: 1px solid var(--border-soft);
+}
+
+.purge-controls .field,
+.purge-criterion {
   margin: 0;
   flex: 1;
+  display: grid;
+  gap: 4px;
+}
+
+.purge-hint {
+  font-size: 12px;
+  color: var(--muted);
 }
 
 .purge-result {
@@ -532,22 +546,80 @@ body {
 
 /* --- Console -------------------------------------------------------------- */
 
+/*
+  Largeurs des panneaux. Ce sont des variables parce qu'elles se déplacent : les
+  séparateurs les réécrivent au glissé, et le navigateur les retient d'une visite à
+  l'autre. La colonne du lecteur prend ce qui reste, elle n'a donc pas de variable.
+*/
 .console {
+  --w-agents: 240px;
+  --w-threads: 400px;
+  --w-sheet: 360px;
+  --w-gutter: 5px;
   display: grid;
-  grid-template-columns: 240px 400px minmax(0, 1fr);
+  grid-template-columns: var(--w-agents) var(--w-gutter) var(--w-threads) var(--w-gutter) minmax(0, 1fr);
   height: calc(100vh - var(--topbar-h));
 }
 
 .console.has-sheet {
-  grid-template-columns: 240px 360px minmax(0, 1fr) 360px;
+  grid-template-columns:
+    var(--w-agents) var(--w-gutter) var(--w-threads) var(--w-gutter)
+    minmax(0, 1fr) var(--w-gutter) var(--w-sheet);
 }
 
 .console.is-collapsed {
-  grid-template-columns: 57px 360px minmax(0, 1fr);
+  grid-template-columns: 57px var(--w-gutter) var(--w-threads) var(--w-gutter) minmax(0, 1fr);
 }
 
 .console.is-collapsed.has-sheet {
-  grid-template-columns: 57px 360px minmax(0, 1fr) 360px;
+  grid-template-columns:
+    57px var(--w-gutter) var(--w-threads) var(--w-gutter)
+    minmax(0, 1fr) var(--w-gutter) var(--w-sheet);
+}
+
+/* --- Séparateurs déplaçables ---------------------------------------------- */
+
+.resizer {
+  cursor: col-resize;
+  background: none;
+  /* La zone saisissable déborde du trait : viser 5 pixels à la souris est pénible. */
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  background-clip: padding-box;
+  margin: 0 -4px;
+  z-index: 1;
+}
+
+.resizer:hover,
+.resizer:focus-visible,
+.resizer.is-active {
+  background-color: var(--accent);
+  background-clip: padding-box;
+  outline: none;
+}
+
+/* Le volet de détail n'est pas toujours là ; son séparateur non plus. */
+.console:not(.has-sheet) .resizer--sheet {
+  display: none;
+}
+
+/* Colonne repliée : il n'y a plus de largeur à régler, seulement un rail d'avatars. */
+.console.is-collapsed #resize-agents {
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Pendant le glissé, rien d'autre ne doit réagir : ni sélection de texte, ni survol. */
+.console.is-resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
+.console.is-resizing .agents,
+.console.is-resizing .threads,
+.console.is-resizing .reader,
+.console.is-resizing .sheet {
+  pointer-events: none;
 }
 
 /* --- Colonne des agents --------------------------------------------------- */
@@ -697,6 +769,54 @@ body {
   padding: 7px 10px;
 }
 
+/* La ligne d'une boîte et son bouton de suppression, côte à côte. */
+.box-line {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.box-line .box {
+  flex: 1;
+  min-width: 0;
+}
+
+/*
+  Le bouton ne se montre qu'au survol ou au clavier : une corbeille par ligne, affichée en
+  permanence, transformerait la colonne en champ de mines. Il reste dans le flux — révélé
+  par l'opacité et non par `display` — pour que la ligne ne change pas de largeur.
+*/
+.box-delete {
+  display: flex;
+  padding: 5px;
+  border: 0;
+  border-radius: var(--radius);
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  opacity: 0;
+}
+
+.box-line:hover .box-delete,
+.box-delete:focus-visible {
+  opacity: 1;
+}
+
+.box-delete:hover {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.box-delete:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+/* Colonne repliée : il n'y a plus de boîtes affichées, donc rien à supprimer. */
+.is-collapsed .box-delete {
+  display: none;
+}
+
 .box .agent-name {
   font-weight: 500;
   font-size: 13px;
@@ -738,6 +858,19 @@ body {
   outline-offset: -2px;
 }
 
+/* Le même geste un cran plus haut : il se détache donc de la liste des agents. */
+.agents-empty-toggle {
+  margin-top: 6px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border-soft);
+  border-radius: 0;
+}
+
+/* Colonne repliée : plus de place pour une phrase, et rien à replier de toute façon. */
+.is-collapsed .agents-empty-toggle {
+  display: none;
+}
+
 /* Une boîte vide reste lisible mais s'efface : elle est là pour être retrouvée, pas lue. */
 .box.is-empty .agent-name {
   color: var(--muted);
@@ -1015,15 +1148,48 @@ body {
   color: var(--accent);
 }
 
+/* Les pastilles des deux correspondants, puis leurs noms : on voit qui parle avant de lire. */
 .thread-who {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  min-width: 0;
+}
+
+.thread-names {
   font-size: 12px;
   color: var(--muted);
-  margin-top: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+/* Dans une liste, la pastille sert de repère, pas de portrait : elle est plus petite. */
+.thread-who .avatar--sm {
+  width: 22px;
+  height: 22px;
+  font-size: 10px;
+}
+
+/*
+  Ici les pastilles ne se chevauchent pas. Le chevauchement du lecteur dit « ces gens vont
+  ensemble » quand la place manque ; dans une liste qui se survole, il mange les initiales,
+  et ce sont justement elles qui identifient la boîte. L'anneau qui détachait les pastilles
+  superposées n'a alors plus rien à détacher.
+*/
+.thread-who .avatar-stack {
+  gap: 4px;
+}
+
+.thread-who .avatar-stack .avatar + .avatar {
+  margin-left: 0;
+}
+
+.thread-who .avatar--stack {
+  box-shadow: none;
+}
+
 .thread-bottom {
   display: flex;
   align-items: center;

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const APP_VERSION = "1.0.18";
+export declare const APP_VERSION = "1.0.20";

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.18";
+export const APP_VERSION = "1.0.20";

package/package.json

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