@imenam/mcp-messenger 1.0.30 → 1.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,225 +1,284 @@
1
- <!doctype html>
2
- <html lang="fr">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>MCP Messenger — supervision</title>
7
- <link rel="stylesheet" href="./styles.css" />
8
- </head>
9
- <body>
10
- <header class="topbar">
11
- <div class="brand">
12
- <svg class="brand-mark" viewBox="0 0 24 24" aria-hidden="true">
13
- <path d="M22 12h-6l-2 3h-4l-2-3H2" />
14
- <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" />
15
- </svg>
16
- <h1>MCP Messenger</h1>
17
- <span class="pill pill--idle" id="status">
18
- <span class="pill-dot"></span>
19
- <span id="status-label">connexion…</span>
20
- </span>
21
- </div>
22
-
23
- <div class="topbar-search" id="search-box">
24
- <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
25
- <circle cx="11" cy="11" r="8" />
26
- <path d="m21 21-4.3-4.3" />
27
- </svg>
28
- <input type="search" id="search" placeholder="Rechercher un sujet, un fil, un agent…" />
29
- </div>
30
-
31
- <div class="topbar-controls" id="controls" hidden>
32
- <label class="switch">
33
- <input type="checkbox" id="auto-refresh" checked />
34
- <span class="switch-track"><span class="switch-knob"></span></span>
35
- <span class="switch-label">auto · 5 s</span>
36
- </label>
37
- <button type="button" id="refresh" class="btn btn--icon" title="Rafraîchir" aria-label="Rafraîchir">
38
- <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
39
- <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
40
- <path d="M21 3v5h-5" />
41
- <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
42
- <path d="M3 21v-5h5" />
43
- </svg>
44
- </button>
45
- <button type="button" id="purge-open" class="btn btn--icon" title="Purger les boîtes inactives" aria-label="Purger les boîtes inactives">
46
- <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
47
- <path d="M3 6h18" />
48
- <path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" />
49
- <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
50
- </svg>
51
- </button>
52
- <button type="button" id="logout" class="btn btn--link">Se déconnecter</button>
53
- </div>
54
- </header>
55
-
56
- <!--
57
- Purge des boîtes inactives : la seule action de la console qui écrit, et elle
58
- détruit. Elle se fait donc en deux temps, l'aperçu puis la confirmation, et ne porte
59
- jamais que sur les boîtes affichées.
60
- -->
61
- <dialog class="modal" id="purge">
62
- <div class="modal-card">
63
- <div class="modal-head">
64
- <h2>Nettoyer les boîtes</h2>
65
- <button type="button" class="btn btn--icon btn--ghost" id="purge-close" aria-label="Fermer">
66
- <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
67
- <path d="M18 6 6 18" />
68
- <path d="m6 6 12 12" />
69
- </svg>
70
- </button>
71
- </div>
72
- <p class="modal-sub">
73
- Trois nettoyages, trois critères. La suppression est définitive dans tous les cas, et emporte les messages que
74
- plus personne ne pourrait lire ; ce que le correspondant a reçu de son côté reste intact. Un agent dont toutes
75
- les boîtes disparaissent quitte l'annuaire avec elles.
76
- </p>
77
-
78
- <!-- Premier critère : la boîte n'a jamais servi. Il ne dépend d'aucune date. -->
79
- <div class="purge-controls">
80
- <div class="purge-criterion">
81
- <span class="field-label">Boîtes vides</span>
82
- <span class="purge-hint">Rien n'y est jamais passé, ni envoi ni réception, quel que soit leur âge.</span>
83
- </div>
84
- <button type="button" class="btn" id="purge-preview-empty">Prévisualiser</button>
85
- </div>
86
-
87
- <!-- Second critère : la boîte a servi, mais plus rien ne l'a touchée depuis. -->
88
- <div class="purge-controls">
89
- <label class="field">
90
- <span class="field-label">Boîtes sans activité depuis le</span>
91
- <span class="field-input"><input type="date" id="purge-before" /></span>
92
- <span class="purge-hint">Ni connexion, ni message. Une boîte créée après cette date est épargnée.</span>
93
- </label>
94
- <button type="button" class="btn" id="purge-preview">Prévisualiser</button>
95
- </div>
96
-
97
- <!-- Troisième critère : l'âge de la boîte, que son activité ne rachète pas. -->
98
- <div class="purge-controls">
99
- <label class="field">
100
- <span class="field-label">Boîtes créées avant le</span>
101
- <span class="field-input"><input type="date" id="purge-created-before" /></span>
102
- <span class="purge-hint">Sur la seule date d'ouverture : une boîte encore active en fait partie.</span>
103
- </label>
104
- <button type="button" class="btn" id="purge-preview-created">Prévisualiser</button>
105
- </div>
106
-
107
- <div class="purge-result" id="purge-result"></div>
108
-
109
- <div class="modal-foot">
110
- <button type="button" class="btn btn--link" id="purge-cancel">Fermer</button>
111
- <button type="button" class="btn btn--danger" id="purge-confirm" disabled>Supprimer</button>
112
- </div>
113
- </div>
114
- </dialog>
115
-
116
- <!--
117
- Détails d'un message : tout ce que la conversation ne montre pas — adresses, noms de
118
- boîtes, identifiants, distribution. Une modale, parce que c'est une consultation
119
- ponctuelle : elle s'ouvre sur demande et rend la place en se fermant.
120
- -->
121
- <dialog class="modal" id="details">
122
- <div class="modal-card" id="details-body"></div>
123
- </dialog>
124
-
125
- <!-- Écran de connexion : une carte seule, sans les panneaux vides derrière elle. -->
126
- <main class="login" id="login" hidden>
127
- <form class="card" id="login-form">
128
- <div class="card-badge">
129
- <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
130
- <rect x="3" y="11" width="18" height="11" rx="2" />
131
- <path d="M7 11V7a5 5 0 0 1 10 0v4" />
132
- </svg>
133
- </div>
134
- <h2>Console de supervision</h2>
135
- <p class="card-sub" id="login-origin">MCP Messenger</p>
136
-
137
- <label class="field">
138
- <span class="field-label">Jeton administrateur</span>
139
- <span class="field-input">
140
- <input type="password" id="token" autocomplete="current-password" placeholder="MESSENGER_ADMIN_TOKEN" />
141
- <button type="button" class="field-eye" id="token-reveal" aria-label="Afficher le jeton">
142
- <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
143
- <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z" />
144
- <circle cx="12" cy="12" r="3" />
145
- </svg>
146
- </button>
147
- </span>
148
- <span class="field-error" id="token-error"></span>
149
- </label>
150
-
151
- <button type="submit" class="btn btn--primary btn--block">Se connecter</button>
152
- <p class="card-note">
153
- Le jeton n'est jamais conservé dans le navigateur : la session tient dans un cookie HttpOnly, fermé à la
154
- déconnexion.
155
- </p>
156
- </form>
157
- </main>
158
-
159
- <!-- Console : agents, fils, lecteur du fil. -->
160
- <main class="console" id="console" hidden>
161
- <aside class="agents" id="agents-pane">
162
- <div class="agents-head">
163
- <span class="section-label">Agents</span>
164
- <button type="button" class="btn btn--icon btn--ghost" id="collapse" title="Replier" aria-label="Replier la liste des agents" aria-expanded="true">
165
- <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
166
- <rect x="3" y="3" width="18" height="18" rx="2" />
167
- <path d="M9 3v18" />
168
- </svg>
169
- </button>
170
- </div>
171
- <ul class="agent-list" id="agents"></ul>
172
- <p class="agents-foot muted" id="agents-foot"></p>
173
- </aside>
174
-
175
- <!--
176
- Séparateurs déplaçables. Chacun redimensionne le panneau qu'il borde, à la souris
177
- comme aux flèches du clavier ; un double-clic rend sa largeur d'origine.
178
- -->
179
- <div
180
- class="resizer"
181
- id="resize-agents"
182
- role="separator"
183
- aria-orientation="vertical"
184
- aria-label="Largeur de la colonne des agents"
185
- tabindex="0"
186
- ></div>
187
-
188
- <section class="threads">
189
- <div class="threads-head">
190
- <!--
191
- L'en-tête dit sur quoi la liste est filtrée. Quand c'est un agent, il y tient la
192
- place principale, pastille comprise : c'est le sujet de ce qu'on lit en dessous.
193
- -->
194
- <div class="threads-title">
195
- <span class="threads-avatar" id="threads-avatar" hidden></span>
196
- <div class="threads-heading">
197
- <h2 id="threads-name">Fils</h2>
198
- <p class="muted" id="threads-scope"></p>
199
- </div>
200
- </div>
201
- <div class="chips" id="chips">
202
- <button type="button" class="chip is-active" data-filter="all">Tous</button>
203
- <button type="button" class="chip" data-filter="unread">Non lus</button>
204
- <button type="button" class="chip" data-filter="high">Priorité haute</button>
205
- </div>
206
- </div>
207
- <ul class="thread-list" id="threads"></ul>
208
- </section>
209
-
210
- <div
211
- class="resizer"
212
- id="resize-threads"
213
- role="separator"
214
- aria-orientation="vertical"
215
- aria-label="Largeur de la liste des fils"
216
- tabindex="0"
217
- ></div>
218
-
219
- <section class="reader" id="reader"></section>
220
-
221
- </main>
222
-
223
- <script type="module" src="./app.js"></script>
224
- </body>
225
- </html>
1
+ <!doctype html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>MCP Messenger — supervision</title>
7
+ <link rel="stylesheet" href="./styles.css" />
8
+ </head>
9
+ <body>
10
+ <header class="topbar">
11
+ <div class="brand">
12
+ <svg class="brand-mark" viewBox="0 0 24 24" aria-hidden="true">
13
+ <path d="M22 12h-6l-2 3h-4l-2-3H2" />
14
+ <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" />
15
+ </svg>
16
+ <h1>MCP Messenger</h1>
17
+ <span class="pill pill--idle" id="status">
18
+ <span class="pill-dot"></span>
19
+ <span id="status-label">connexion…</span>
20
+ </span>
21
+ </div>
22
+
23
+ <nav class="tabs" id="tabs" hidden>
24
+ <button type="button" class="tab is-active" data-view="threads">
25
+ <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
26
+ <path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z" />
27
+ <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
28
+ </svg>
29
+ Fils
30
+ </button>
31
+ <button type="button" class="tab" data-view="links">
32
+ <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
33
+ <path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1" />
34
+ <path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1" />
35
+ </svg>
36
+ Liaisons
37
+ <span class="count count--accent" id="links-badge" hidden></span>
38
+ </button>
39
+ </nav>
40
+
41
+ <div class="topbar-search" id="search-box">
42
+ <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
43
+ <circle cx="11" cy="11" r="8" />
44
+ <path d="m21 21-4.3-4.3" />
45
+ </svg>
46
+ <input type="search" id="search" placeholder="Rechercher un sujet, un fil, un agent…" />
47
+ </div>
48
+
49
+ <div class="topbar-controls" id="controls" hidden>
50
+ <label class="switch">
51
+ <input type="checkbox" id="auto-refresh" checked />
52
+ <span class="switch-track"><span class="switch-knob"></span></span>
53
+ <span class="switch-label">auto · 5 s</span>
54
+ </label>
55
+ <button type="button" id="refresh" class="btn btn--icon" title="Rafraîchir" aria-label="Rafraîchir">
56
+ <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
57
+ <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
58
+ <path d="M21 3v5h-5" />
59
+ <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
60
+ <path d="M3 21v-5h5" />
61
+ </svg>
62
+ </button>
63
+ <button type="button" id="purge-open" class="btn btn--icon" title="Purger les boîtes inactives" aria-label="Purger les boîtes inactives">
64
+ <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
65
+ <path d="M3 6h18" />
66
+ <path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" />
67
+ <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
68
+ </svg>
69
+ </button>
70
+ <button type="button" id="logout" class="btn btn--link">Se déconnecter</button>
71
+ </div>
72
+ </header>
73
+
74
+ <!--
75
+ Purge des boîtes inactives : la seule action de la console qui écrit, et elle
76
+ détruit. Elle se fait donc en deux temps, l'aperçu puis la confirmation, et ne porte
77
+ jamais que sur les boîtes affichées.
78
+ -->
79
+ <dialog class="modal" id="purge">
80
+ <div class="modal-card">
81
+ <div class="modal-head">
82
+ <h2>Nettoyer les boîtes</h2>
83
+ <button type="button" class="btn btn--icon btn--ghost" id="purge-close" aria-label="Fermer">
84
+ <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
85
+ <path d="M18 6 6 18" />
86
+ <path d="m6 6 12 12" />
87
+ </svg>
88
+ </button>
89
+ </div>
90
+ <p class="modal-sub">
91
+ Trois nettoyages, trois critères. La suppression est définitive dans tous les cas, et emporte les messages que
92
+ plus personne ne pourrait lire ; ce que le correspondant a reçu de son côté reste intact. Un agent dont toutes
93
+ les boîtes disparaissent quitte l'annuaire avec elles.
94
+ </p>
95
+
96
+ <!-- Premier critère : la boîte n'a jamais servi. Il ne dépend d'aucune date. -->
97
+ <div class="purge-controls">
98
+ <div class="purge-criterion">
99
+ <span class="field-label">Boîtes vides</span>
100
+ <span class="purge-hint">Rien n'y est jamais passé, ni envoi ni réception, quel que soit leur âge.</span>
101
+ </div>
102
+ <button type="button" class="btn" id="purge-preview-empty">Prévisualiser</button>
103
+ </div>
104
+
105
+ <!-- Second critère : la boîte a servi, mais plus rien ne l'a touchée depuis. -->
106
+ <div class="purge-controls">
107
+ <label class="field">
108
+ <span class="field-label">Boîtes sans activité depuis le</span>
109
+ <span class="field-input"><input type="date" id="purge-before" /></span>
110
+ <span class="purge-hint">Ni connexion, ni message. Une boîte créée après cette date est épargnée.</span>
111
+ </label>
112
+ <button type="button" class="btn" id="purge-preview">Prévisualiser</button>
113
+ </div>
114
+
115
+ <!-- Troisième critère : l'âge de la boîte, que son activité ne rachète pas. -->
116
+ <div class="purge-controls">
117
+ <label class="field">
118
+ <span class="field-label">Boîtes créées avant le</span>
119
+ <span class="field-input"><input type="date" id="purge-created-before" /></span>
120
+ <span class="purge-hint">Sur la seule date d'ouverture : une boîte encore active en fait partie.</span>
121
+ </label>
122
+ <button type="button" class="btn" id="purge-preview-created">Prévisualiser</button>
123
+ </div>
124
+
125
+ <div class="purge-result" id="purge-result"></div>
126
+
127
+ <div class="modal-foot">
128
+ <button type="button" class="btn btn--link" id="purge-cancel">Fermer</button>
129
+ <button type="button" class="btn btn--danger" id="purge-confirm" disabled>Supprimer</button>
130
+ </div>
131
+ </div>
132
+ </dialog>
133
+
134
+ <!--
135
+ Détails d'un message : tout ce que la conversation ne montre pas — adresses, noms de
136
+ boîtes, identifiants, distribution. Une modale, parce que c'est une consultation
137
+ ponctuelle : elle s'ouvre sur demande et rend la place en se fermant.
138
+ -->
139
+ <dialog class="modal" id="details">
140
+ <div class="modal-card" id="details-body"></div>
141
+ </dialog>
142
+
143
+ <!-- Écran de connexion : une carte seule, sans les panneaux vides derrière elle. -->
144
+ <main class="login" id="login" hidden>
145
+ <form class="card" id="login-form">
146
+ <div class="card-badge">
147
+ <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
148
+ <rect x="3" y="11" width="18" height="11" rx="2" />
149
+ <path d="M7 11V7a5 5 0 0 1 10 0v4" />
150
+ </svg>
151
+ </div>
152
+ <h2>Console de supervision</h2>
153
+ <p class="card-sub" id="login-origin">MCP Messenger</p>
154
+
155
+ <label class="field">
156
+ <span class="field-label">Jeton administrateur</span>
157
+ <span class="field-input">
158
+ <input type="password" id="token" autocomplete="current-password" placeholder="MESSENGER_ADMIN_TOKEN" />
159
+ <button type="button" class="field-eye" id="token-reveal" aria-label="Afficher le jeton">
160
+ <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
161
+ <path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z" />
162
+ <circle cx="12" cy="12" r="3" />
163
+ </svg>
164
+ </button>
165
+ </span>
166
+ <span class="field-error" id="token-error"></span>
167
+ </label>
168
+
169
+ <button type="submit" class="btn btn--primary btn--block">Se connecter</button>
170
+ <p class="card-note">
171
+ Le jeton n'est jamais conservé dans le navigateur : la session tient dans un cookie HttpOnly, fermé à la
172
+ déconnexion.
173
+ </p>
174
+ </form>
175
+ </main>
176
+
177
+ <!-- Console : agents, fils, lecteur du fil. -->
178
+ <main class="console" id="console" hidden>
179
+ <aside class="agents" id="agents-pane">
180
+ <div class="agents-head">
181
+ <span class="section-label">Agents</span>
182
+ <button type="button" class="btn btn--icon btn--ghost" id="collapse" title="Replier" aria-label="Replier la liste des agents" aria-expanded="true">
183
+ <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
184
+ <rect x="3" y="3" width="18" height="18" rx="2" />
185
+ <path d="M9 3v18" />
186
+ </svg>
187
+ </button>
188
+ </div>
189
+ <ul class="agent-list" id="agents"></ul>
190
+ <p class="agents-foot muted" id="agents-foot"></p>
191
+ </aside>
192
+
193
+ <!--
194
+ Séparateurs déplaçables. Chacun redimensionne le panneau qu'il borde, à la souris
195
+ comme aux flèches du clavier ; un double-clic rend sa largeur d'origine.
196
+ -->
197
+ <div
198
+ class="resizer"
199
+ id="resize-agents"
200
+ role="separator"
201
+ aria-orientation="vertical"
202
+ aria-label="Largeur de la colonne des agents"
203
+ tabindex="0"
204
+ ></div>
205
+
206
+ <section class="threads">
207
+ <div class="threads-head">
208
+ <!--
209
+ L'en-tête dit sur quoi la liste est filtrée. Quand c'est un agent, il y tient la
210
+ place principale, pastille comprise : c'est le sujet de ce qu'on lit en dessous.
211
+ -->
212
+ <div class="threads-title">
213
+ <span class="threads-avatar" id="threads-avatar" hidden></span>
214
+ <div class="threads-heading">
215
+ <h2 id="threads-name">Fils</h2>
216
+ <p class="muted" id="threads-scope"></p>
217
+ </div>
218
+ </div>
219
+ <div class="chips" id="chips">
220
+ <button type="button" class="chip is-active" data-filter="all">Tous</button>
221
+ <button type="button" class="chip" data-filter="unread">Non lus</button>
222
+ <button type="button" class="chip" data-filter="high">Priorité haute</button>
223
+ </div>
224
+ </div>
225
+ <ul class="thread-list" id="threads"></ul>
226
+ </section>
227
+
228
+ <div
229
+ class="resizer"
230
+ id="resize-threads"
231
+ role="separator"
232
+ aria-orientation="vertical"
233
+ aria-label="Largeur de la liste des fils"
234
+ tabindex="0"
235
+ ></div>
236
+
237
+ <section class="reader" id="reader"></section>
238
+
239
+ </main>
240
+
241
+ <!--
242
+ Liaisons : une colonne par agent, la plus récente à gauche ; en hauteur, l'heure de
243
+ création des boîtes, la plus récente en haut. La fenêtre détaillée est réglable ; au-delà,
244
+ les boîtes sont empilées en liste sous leur agent.
245
+ -->
246
+ <main class="links" id="links" hidden>
247
+ <section class="links-map">
248
+ <div class="links-toolbar">
249
+ <div>
250
+ <h2>Liaisons entre boîtes</h2>
251
+ <p class="muted">
252
+ Glissez la poignée d'une boîte vers une autre, ou choisissez-la dans le volet. Chaque agent reçoit la
253
+ liaison à sa prochaine connexion.
254
+ </p>
255
+ </div>
256
+ <label class="links-window">
257
+ <span>Détail sur</span>
258
+ <select id="links-window">
259
+ <option value="5">5 min</option>
260
+ <option value="10">10 min</option>
261
+ <option value="15">15 min</option>
262
+ <option value="30" selected>30 min</option>
263
+ <option value="60">1 h</option>
264
+ <option value="120">2 h</option>
265
+ <option value="240">4 h</option>
266
+ </select>
267
+ </label>
268
+ </div>
269
+ <div class="links-scroll" id="links-scroll">
270
+ <div class="links-canvas" id="links-canvas"></div>
271
+ </div>
272
+ <div class="links-legend">
273
+ <span class="links-legend-item"><span class="links-rank">1</span>rang de création, #1 = la plus récente</span>
274
+ <span class="links-legend-item"><span class="links-legend-line is-new"></span>liaison de la boîte choisie</span>
275
+ <span class="links-legend-item"><span class="links-legend-line"></span>liaison existante</span>
276
+ <span class="links-legend-item muted">Hauteur = heure exacte, à échelle régulière</span>
277
+ </div>
278
+ </section>
279
+ <aside class="links-panel" id="links-panel"></aside>
280
+ </main>
281
+
282
+ <script type="module" src="./app.js"></script>
283
+ </body>
284
+ </html>