@imenam/self-register-proxy 1.0.42 → 1.0.43

package/views/terminal.js

@@ -1,30 +1,34 @@
-const fs = require('fs');
-const path = require('path');
-const { escapeHtml } = require('../services/proxyRouter');
-
-const templatePath = path.join(__dirname, 'terminal.html');
-let templateCache = null;
-
-function loadTemplate() {
-  if (!templateCache) {
-    templateCache = fs.readFileSync(templatePath, 'utf-8');
-  }
-  return templateCache;
-}
-
-/**
- * Page du terminal en ligne (xterm.js + WebSocket)
- * @param {string} proxyName
- * @param {string} terminalCommand
- */
-function renderTerminal(proxyName, terminalCommand) {
-  const commandHtml = terminalCommand
-    ? '<span class="terminal-command">' + escapeHtml(terminalCommand) + '</span>'
-    : '';
-
-  return loadTemplate()
-    .replace('{{PROXY_NAME}}', escapeHtml(proxyName))
-    .replace('{{TERMINAL_COMMAND}}', commandHtml);
-}
-
-module.exports = { renderTerminal };
+const fs = require('fs');
+const path = require('path');
+const { escapeHtml } = require('../services/proxyRouter');
+const { BASE_CSS } = require('./theme');
+
+const templatePath = path.join(__dirname, 'terminal.html');
+let templateCache = null;
+
+function loadTemplate() {
+  if (!templateCache) {
+    templateCache = fs.readFileSync(templatePath, 'utf-8');
+  }
+  return templateCache;
+}
+
+/**
+ * Page du terminal en ligne (xterm.js + WebSocket)
+ * @param {string} proxyName
+ * @param {string} terminalCommand
+ */
+function renderTerminal(proxyName, terminalCommand) {
+  const commandHtml = terminalCommand
+    ? '<span class="terminal-command">' + escapeHtml(terminalCommand) + '</span>'
+    : '';
+
+  // Remplacements par fonction : le CSS et la commande peuvent contenir des `$`,
+  // qui seraient sinon interprétés comme des motifs de remplacement.
+  return loadTemplate()
+    .replace('{{BASE_CSS}}', () => BASE_CSS)
+    .replace('{{PROXY_NAME}}', () => escapeHtml(proxyName))
+    .replace('{{TERMINAL_COMMAND}}', () => commandHtml);
+}
+
+module.exports = { renderTerminal };

package/views/theme.js

@@ -0,0 +1,431 @@
+const { escapeHtml } = require('../services/proxyRouter');
+
+/**
+ * Socle visuel partagé par toutes les pages du proxy.
+ * Un seul jeu de tokens, un seul accent, une seule échelle typographique.
+ */
+
+/** Icônes Lucide inlinées — pas de CDN, colorées par `currentColor`. */
+const ICONS = {
+  network: '<rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/>',
+  layers: '<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
+  terminal: '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
+  sliders: '<line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/>',
+  trash: '<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/>',
+  logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/>',
+  search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+  plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
+  more: '<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>',
+  activity: '<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>',
+  copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
+  circleX: '<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/>',
+  chevronDown: '<path d="m6 9 6 6 6-6"/>',
+  alert: '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+  circleAlert: '<circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/>',
+  lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+  arrowLeft: '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
+  arrowUp: '<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+  refresh: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
+  externalLink: '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
+  pencil: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>'
+};
+
+/**
+ * Rend une icône SVG inline.
+ * @param {string} name - clé de ICONS
+ * @param {number} [size=16]
+ */
+function icon(name, size = 16) {
+  const body = ICONS[name];
+  if (!body) return '';
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+}
+
+/** Tokens + composants communs. Injecté dans le <style> de chaque page. */
+const BASE_CSS = `
+  :root {
+    --bg: #0F0F12;
+    --sidebar: #131317;
+    --surface: #17171C;
+    --surface-2: #1C1C22;
+    --border: #26262E;
+    --border-subtle: #1F1F25;
+    --text: #F4F4F5;
+    --text-2: #A1A1AA;
+    --text-3: #71717A;
+    --text-4: #52525B;
+    --accent: #6366F1;
+    --accent-soft: #818CF8;
+    --green: #22C55E;
+    --amber: #F59E0B;
+    --red: #F87171;
+    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --mono: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: var(--sans);
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
+  }
+  a { color: inherit; text-decoration: none; }
+  ::selection { background: rgba(99,102,241,.35); }
+
+  /* Boutons */
+  .btn {
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    height: 34px; padding: 0 14px; border-radius: 8px;
+    font-family: inherit; font-size: 13px; cursor: pointer;
+    border: 1px solid transparent; white-space: nowrap; transition: background .15s, border-color .15s;
+  }
+  .btn-primary { background: var(--accent); color: #fff; font-weight: 600; }
+  .btn-primary:hover { background: #5457E5; }
+  .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
+  .btn-ghost:hover { border-color: #3A3A45; }
+  .btn-danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: var(--red); }
+  .btn-danger:hover { background: rgba(239,68,68,.2); }
+  .btn:disabled { opacity: .5; cursor: not-allowed; }
+  .btn-link {
+    background: none; border: 0; font-family: inherit; font-size: 13px;
+    color: var(--text-3); cursor: pointer; padding: 0;
+  }
+  .btn-link:hover { color: var(--text-2); }
+  .btn-link.danger { color: var(--red); }
+
+  /* Champs */
+  .input, select, textarea {
+    width: 100%; background: var(--surface); border: 1px solid var(--border);
+    border-radius: 8px; color: var(--text); font-family: inherit; font-size: 13px;
+    padding: 0 12px; height: 36px;
+  }
+  textarea { padding: 10px 12px; height: auto; resize: vertical; line-height: 1.5; }
+  .input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
+  .input::placeholder, textarea::placeholder { color: var(--text-3); }
+  .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
+  .field label { font-size: 12px; color: var(--text-2); }
+  .field-inline { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
+  .field-inline input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
+  .field-inline label { font-size: 13px; color: var(--text-2); }
+  .search { position: relative; }
+  .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
+  .search .input { padding-left: 34px; }
+
+  /* En-tête de page */
+  .page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
+  .page-title { font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
+  .page-sub { font-size: 13px; color: var(--text-3); margin-top: 5px; }
+  .page-actions { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
+
+  /* Listes */
+  .list-head {
+    display: flex; align-items: center; gap: 10px;
+    font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px;
+  }
+  .list-head .spacer { margin-left: auto; }
+  .list-head-meta { font-size: 12px; font-weight: 400; color: var(--text-4); }
+  .list { border-top: 1px solid var(--border-subtle); }
+  .row {
+    display: flex; align-items: center; gap: 16px;
+    min-height: 60px; padding: 8px; border-bottom: 1px solid var(--border-subtle);
+    border-radius: 10px; position: relative;
+  }
+  .row:hover { background: var(--surface); }
+  .row-main { min-width: 0; flex: 1 1 auto; }
+  .row-name { font-size: 15px; font-weight: 600; color: var(--text); }
+  .row-meta {
+    font-size: 12px; color: var(--text-4); font-family: var(--mono);
+    margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .row-open { font-size: 13px; font-weight: 500; color: var(--accent-soft); }
+  .row-open:hover { color: #A5B4FC; }
+
+  /* Pastilles, badges, étiquettes */
+  .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: #3F3F46; }
+  .dot.up { background: var(--green); }
+  .dot.warn { background: var(--amber); }
+  .dot.down { background: var(--red); }
+  .badge { font-size: 11px; padding: 2px 10px; border-radius: 999px; border: 1px solid; }
+  .badge-green { color: #4ADE80; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); }
+  .tag {
+    font-size: 11px; color: var(--text-2); background: var(--surface-2);
+    border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; white-space: nowrap;
+  }
+  .tag-muted { color: var(--text-3); }
+
+  /* Menu contextuel */
+  .menu-wrap { position: relative; flex-shrink: 0; }
+  .icon-btn {
+    display: grid; place-items: center; width: 28px; height: 28px;
+    border-radius: 6px; background: none; border: 0; color: var(--text-3); cursor: pointer;
+  }
+  .icon-btn:hover { background: var(--surface-2); color: var(--text-2); }
+  .menu {
+    position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 196px;
+    background: var(--surface-2); border: 1px solid #2E2E38; border-radius: 10px; padding: 6px;
+    box-shadow: 0 16px 40px rgba(0,0,0,.55); display: none;
+  }
+  .menu.open { display: block; }
+  .menu-up { top: auto; bottom: calc(100% + 4px); }
+  .menu-item {
+    display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 8px;
+    border-radius: 6px; border: 0; background: none; color: var(--text);
+    font-family: inherit; font-size: 13px; text-align: left; cursor: pointer;
+  }
+  .menu-item:hover { background: #26262E; }
+  .menu-item svg { color: var(--text-2); flex: 0 0 16px; }
+  .menu-item.danger, .menu-item.danger svg { color: var(--red); }
+  .menu-item.active svg { color: var(--accent-soft); }
+  .menu-sep { height: 1px; background: #2E2E38; margin: 5px -6px; }
+
+  /* Bandeaux */
+  .banner {
+    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
+    border-radius: 10px; font-size: 13px; margin-bottom: 24px;
+  }
+  .banner svg { flex: 0 0 16px; }
+  .banner-warn { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); color: #FBBF24; }
+  .banner-error { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); color: var(--red); }
+  .banner-action {
+    margin-left: auto; background: none; border: 0; color: inherit;
+    font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
+  }
+  .banner-action:hover { text-decoration: underline; }
+
+  /* Modale */
+  .overlay {
+    position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 100;
+    display: none; align-items: center; justify-content: center; padding: 24px;
+  }
+  .overlay.active { display: flex; }
+  .modal {
+    background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
+    padding: 24px; width: 100%; max-width: 400px; max-height: 90vh; overflow-y: auto;
+  }
+  .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+  .modal-head h2 { font-size: 17px; font-weight: 600; }
+
+  /* Divers */
+  .empty {
+    border: 1px dashed var(--border); border-radius: 12px; padding: 48px 24px;
+    text-align: center; color: var(--text-3); font-size: 14px;
+  }
+  .empty strong { display: block; color: var(--text-2); font-size: 15px; margin-bottom: 6px; font-weight: 600; }
+  .spinner {
+    display: inline-block; width: 12px; height: 12px; border-radius: 50%;
+    border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite;
+  }
+  .spinning { animation: spin .7s linear infinite; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .hidden { display: none !important; }
+`;
+
+/** Mise en page à panneau latéral fixe. */
+const SHELL_CSS = `
+  .app { display: flex; min-height: 100vh; }
+  .sidebar {
+    width: 240px; flex: 0 0 240px; background: var(--sidebar);
+    border-right: 1px solid var(--border); padding: 20px 0;
+    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
+  }
+  .brand { display: flex; align-items: center; gap: 12px; padding: 0 20px 26px; }
+  .brand-logo {
+    width: 32px; height: 32px; border-radius: 9px; background: var(--accent);
+    display: grid; place-items: center; color: #fff; flex-shrink: 0;
+  }
+  .brand-text { min-width: 0; }
+  .brand-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
+  .brand-host {
+    font-size: 11px; color: var(--text-3); font-family: var(--mono);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .nav-label {
+    font-size: 10px; font-weight: 600; letter-spacing: .09em;
+    color: var(--text-4); padding: 0 20px; margin-bottom: 8px;
+  }
+  .nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; margin-bottom: 26px; }
+  .nav-item {
+    display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 16px;
+    border: 0; background: none; border-radius: 8px; color: var(--text-2);
+    font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; position: relative;
+  }
+  .nav-item:hover { background: var(--surface); color: var(--text); }
+  .nav-item.active { background: var(--surface-2); color: var(--text); font-weight: 500; }
+  .nav-item.active::before {
+    content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
+    width: 2px; border-radius: 1px; background: var(--accent);
+  }
+  .nav-item > svg { flex: 0 0 16px; color: var(--text-3); }
+  .nav-item.active > svg { color: #A5B4FC; }
+  .nav-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .nav-count { font-size: 12px; color: var(--text-4); flex-shrink: 0; }
+  .nav-item.active .nav-count { color: var(--text-3); }
+  .nav-warn { color: var(--amber); display: none; flex-shrink: 0; }
+  .nav-warn.visible { display: block; }
+  .nav-item-plain { height: 32px; padding: 0 20px; }
+  .nav-item-plain .nav-item-label { font-size: 13px; }
+  .nav-item-muted { color: var(--text-3); }
+  .sidebar-spacer { flex: 1 1 auto; min-height: 24px; }
+  .status-card {
+    margin: 0 16px; padding: 14px 16px; border-radius: 10px;
+    background: var(--surface); border: 1px solid var(--border);
+  }
+  .status-line { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; }
+  .status-detail { font-size: 11px; color: var(--text-3); margin-top: 6px; }
+  .main { flex: 1 1 auto; min-width: 0; padding: 24px 32px 64px; }
+  .main-inner { max-width: 1160px; margin: 0 auto; }
+
+  @media (max-width: 900px) {
+    .app { flex-direction: column; }
+    .sidebar {
+      width: auto; flex: none; height: auto; position: static;
+      border-right: 0; border-bottom: 1px solid var(--border); padding: 16px 0;
+    }
+    .sidebar-spacer { display: none; }
+    .nav { flex-direction: row; flex-wrap: wrap; margin-bottom: 16px; }
+    .nav-item { width: auto; }
+    .nav-item.active::before { display: none; }
+    .status-card { display: none; }
+    .main { padding: 20px 16px 48px; }
+    .page-head { flex-wrap: wrap; }
+    .page-actions { margin-left: 0; width: 100%; }
+  }
+`;
+
+/**
+ * Panneau latéral commun.
+ * @param {Object} o
+ * @param {string} o.proxyName
+ * @param {string} [o.host] - libellé sous le nom du produit
+ * @param {'services'|'agent'|'meta'} o.active - page courante
+ * @param {number} [o.serviceCount]
+ * @param {boolean} [o.hasCleanUp]
+ * @param {boolean} [o.hasAuth]
+ * @param {string} [o.sectionLabel] - titre de la section contextuelle
+ * @param {string} [o.sectionHtml] - contenu de la section contextuelle
+ * @param {string} [o.statusDetail] - deuxième ligne de la carte de statut
+ */
+function renderSidebar(o) {
+  const count = typeof o.serviceCount === 'number'
+    ? `<span class="nav-count">${o.serviceCount}</span>`
+    : '';
+
+  return `<aside class="sidebar">
+    <div class="brand">
+      <span class="brand-logo">${icon('network', 16)}</span>
+      <span class="brand-text">
+        <span class="brand-name">${escapeHtml(o.proxyName)}</span>
+        <span class="brand-host">${escapeHtml(o.host || '')}</span>
+      </span>
+    </div>
+
+    <div class="nav-label">NAVIGATION</div>
+    <nav class="nav">
+      <a class="nav-item${o.active === 'services' ? ' active' : ''}" href="/">
+        ${icon('layers')}<span class="nav-item-label">Services</span>${count}
+      </a>
+      <a class="nav-item${o.active === 'agent' ? ' active' : ''}" href="/proxy/terminal" target="_blank" rel="noopener noreferrer">
+        ${icon('terminal')}<span class="nav-item-label">Agent</span>
+      </a>
+      <a class="nav-item${o.active === 'meta' ? ' active' : ''}" href="/proxy/meta-configs-ui">
+        ${icon('sliders')}<span class="nav-item-label">Meta configs</span>
+        <span class="nav-warn" id="navSyncWarn" title="Configurations désynchronisées">${icon('alert', 14)}</span>
+      </a>
+      ${o.hasCleanUp ? `<button class="nav-item" id="cleanupBtn" onclick="runCleanUp()">
+        ${icon('trash')}<span class="nav-item-label">Nettoyer les process</span>
+      </button>` : ''}
+    </nav>
+
+    ${o.sectionLabel ? `<div class="nav-label">${escapeHtml(o.sectionLabel)}</div>
+    <nav class="nav">${o.sectionHtml || ''}</nav>` : ''}
+
+    <div class="sidebar-spacer"></div>
+
+    ${o.hasAuth ? `<nav class="nav" style="margin-bottom:16px;">
+      <button class="nav-item" onclick="logout()">
+        ${icon('logout')}<span class="nav-item-label">Déconnexion</span>
+      </button>
+    </nav>` : ''}
+
+    <div class="status-card">
+      <div class="status-line"><span class="dot up"></span><span>Proxy en ligne</span></div>
+      <div class="status-detail">${escapeHtml(o.statusDetail || '')}</div>
+    </div>
+  </aside>`;
+}
+
+/** Scripts partagés : déconnexion, nettoyage, menus contextuels, badge de désync. */
+const SHELL_JS = `
+  function logout() {
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = '/proxy/logout';
+    document.body.appendChild(form);
+    form.submit();
+  }
+
+  async function runCleanUp() {
+    if (!confirm('Nettoyer tous les processus ?')) return;
+    const btn = document.getElementById('cleanupBtn');
+    const label = btn.querySelector('.nav-item-label');
+    const original = label.textContent;
+    btn.disabled = true;
+    label.textContent = 'Nettoyage…';
+    try {
+      await fetch('/proxy/cleanup', { method: 'POST' });
+      label.textContent = 'Nettoyé';
+    } catch (_) {
+      label.textContent = 'Échec du nettoyage';
+    } finally {
+      setTimeout(() => { label.textContent = original; btn.disabled = false; }, 3000);
+    }
+  }
+
+  /* Un seul menu ouvert à la fois ; clic extérieur et Échap le referment. */
+  function toggleMenu(btn) {
+    const menu = btn.nextElementSibling;
+    const wasOpen = menu.classList.contains('open');
+    closeAllMenus();
+    if (wasOpen) return;
+    menu.classList.remove('menu-up');
+    menu.classList.add('open');
+    // Bascule au-dessus du bouton quand le bas de la fenêtre est trop proche.
+    if (menu.getBoundingClientRect().bottom > window.innerHeight - 8) {
+      menu.classList.add('menu-up');
+    }
+  }
+
+  function closeAllMenus() {
+    document.querySelectorAll('.menu.open').forEach(m => m.classList.remove('open'));
+  }
+
+  document.addEventListener('click', (e) => {
+    if (!e.target.closest('.menu-wrap')) closeAllMenus();
+  });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeAllMenus();
+  });
+
+  /** Signale la désynchronisation des méta-configs dans le panneau. */
+  async function refreshSyncBadge() {
+    const el = document.getElementById('navSyncWarn');
+    if (!el) return;
+    try {
+      const res = await fetch('/proxy/meta-configs/active/sync');
+      const data = await res.json();
+      el.classList.toggle('visible', data.synced === false);
+    } catch (_) {}
+  }
+
+  function esc(str) {
+    const d = document.createElement('div');
+    d.textContent = String(str == null ? '' : str);
+    return d.innerHTML;
+  }
+`;
+
+module.exports = { BASE_CSS, SHELL_CSS, SHELL_JS, renderSidebar, icon };