@imenam/self-register-proxy 1.0.37 → 1.0.40

package/README.md

@@ -41,6 +41,18 @@ npm start
 
 Le proxy démarre par défaut sur le port `3000`.
 
+#### Interface HTML minimale (`--minimal-dashboard`)
+
+Par défaut, la page d’accueil en HTML affiche l’interface complète (statistiques, barre d’outils, actions sur les services, etc.). Le flag **`--minimal-dashboard`** réduit cette page au **nom du proxy** (`PROXY_NAME`) et, pour chaque service enregistré, au **nom** et au bouton **Ouvrir** uniquement — sans URL détaillée, sans port visible, sans barre d’outils ni modale d’ajout. Il n’existe pas d’équivalent via variable d’environnement ; seul ce flag CLI est pris en charge.
+
+Avec **`npx`**, placez **`--`** avant le flag pour qu’il soit transmis au script Node :
+
+```bash
+npx @imenam/self-register-proxy -- --minimal-dashboard
+```
+
+Les réponses **JSON** de `GET /` lorsque le client envoie `Accept: application/json` restent **inchangées** (le mode minimal ne concerne que le HTML).
+
 ### Configuration via fichier .env
 
 Créez un fichier `.env` à la racine du projet (voir `.env.example`) :
@@ -91,7 +103,7 @@ http://localhost:3000/myapp/  →  votre application sur le port 4000
 
 L'URL racine `/` affiche une page listant tous les serveurs enregistrés avec des liens pour y accéder.
 
-Le nom du proxy (configurable via `PROXY_NAME`) est affiché dans le titre et l'en-tête de la page.
+Le nom du proxy (configurable via `PROXY_NAME`) est affiché dans le titre et l'en-tête de la page. Pour une variante HTML épurée (titre + noms + bouton « Ouvrir » uniquement), démarrez le proxy avec `--minimal-dashboard` (voir **Démarrage rapide**).
 
 - **Navigateurs** (`Accept: text/html`) → Page HTML avec interface moderne
 - **Clients API** (`Accept: application/json`) → Réponse JSON

package/config.js

@@ -15,6 +15,8 @@ const TERMINAL_CWD = process.env.PROXY_TERMINAL_CWD || process.env.HOME || proce
 const TERMINAL_COMMAND = process.env.PROXY_TERMINAL_COMMAND || '';
 const OPENCODE_CLEAN_UP = process.env.PROXY_OPENCODE_CLEAN_UP || '';
 
+const MINIMAL_DASHBOARD = process.argv.includes('--minimal-dashboard');
+
 module.exports = {
   PROXY_PORT,
   PROXY_NAME,
@@ -28,4 +30,5 @@ module.exports = {
   TERMINAL_CWD,
   TERMINAL_COMMAND,
   OPENCODE_CLEAN_UP,
+  MINIMAL_DASHBOARD,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imenam/self-register-proxy",
-  "version": "1.0.37",
+  "version": "1.0.40",
   "description": "Dynamic reverse proxy with self-registration API - applications can register themselves and receive an automatically assigned port",
   "main": "proxy-client.js",
   "bin": {

package/routes/dashboard.js

@@ -5,7 +5,7 @@ const { safeEqual, createSession, setSessionCookie, destroySession, clearSession
 const { registry } = require('../services/registry');
 const { renderLogin } = require('../views/login');
 const { renderDashboard } = require('../views/dashboard');
-const { PROXY_NAME, PROXY_PORT, ADMIN_PASSWORD, INTERNAL_PORT_START, INTERNAL_PORT_END, OPENCODE_CLEAN_UP, TERMINAL_CWD } = require('../config');
+const { PROXY_NAME, PROXY_PORT, ADMIN_PASSWORD, INTERNAL_PORT_START, INTERNAL_PORT_END, OPENCODE_CLEAN_UP, TERMINAL_CWD, MINIMAL_DASHBOARD } = require('../config');
 
 const router = Router();
 
@@ -100,7 +100,7 @@ router.get('/', requireAuth, (req, res) => {
   }
 
   const availablePorts = (INTERNAL_PORT_END - INTERNAL_PORT_START) - registry.usedPorts.size;
-  const html = renderDashboard(routes, availablePorts, PROXY_NAME, !!ADMIN_PASSWORD, OPENCODE_CLEAN_UP);
+  const html = renderDashboard(routes, availablePorts, PROXY_NAME, !!ADMIN_PASSWORD, OPENCODE_CLEAN_UP, MINIMAL_DASHBOARD);
   res.type('html').send(html);
 });
 

package/views/dashboard.js

@@ -7,8 +7,117 @@ const { escapeHtml } = require('../services/proxyRouter');
  * @param {string} proxyName
  * @param {boolean} hasAuth - true si l'authentification est activée
  * @param {string|undefined} cleanUpCommand - si défini, affiche le bouton de nettoyage
+ * @param {boolean} [minimalDashboard] - interface HTML réduite (nom + Ouvrir uniquement)
  */
-function renderDashboard(routes, availablePorts, proxyName, hasAuth, cleanUpCommand) {
+function renderDashboard(routes, availablePorts, proxyName, hasAuth, cleanUpCommand, minimalDashboard) {
+  if (minimalDashboard) {
+    const servicesHtml = routes.length > 0
+      ? `<div class="services-list">
+      ${routes.map(route => `
+      <div class="service-card">
+        <div class="service-info">
+          <span class="service-name">${escapeHtml(route.name)}</span>
+        </div>
+        <div class="service-actions">
+          <a href="${escapeHtml(route.path)}" class="action-btn primary" title="Acc&eacute;der" target="_blank" rel="noopener noreferrer">Ouvrir</a>
+        </div>
+      </div>
+      `).join('')}
+    </div>`
+      : `<div class="empty-state minimal-empty">
+      <p>Aucun service</p>
+    </div>`;
+
+    return `<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(proxyName)}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body.minimal-dashboard {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      min-height: 100vh;
+      color: #e4e4e7;
+      padding: 1rem;
+    }
+    .minimal-dashboard .container { max-width: 560px; margin: 0 auto; }
+    .minimal-dashboard header { text-align: center; margin-bottom: 1rem; }
+    .minimal-dashboard h1 {
+      font-size: 1.75rem;
+      background: linear-gradient(90deg, #6366f1, #8b5cf6);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .services-list { display: flex; flex-direction: column; gap: 0.5rem; }
+    .service-card {
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      padding: 0.6rem 0.9rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+      transition: all 0.15s ease;
+    }
+    .service-card:hover {
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(139, 92, 246, 0.4);
+    }
+    .service-info { display: flex; align-items: center; min-width: 0; flex: 1; }
+    .service-name {
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: #f4f4f5;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .service-actions { display: flex; flex-shrink: 0; align-items: center; }
+    .action-btn {
+      background: rgba(255, 255, 255, 0.1);
+      color: #e4e4e7;
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      padding: 0.35rem 0.6rem;
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 0.75rem;
+      font-weight: 500;
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+    }
+    .action-btn.primary {
+      background: linear-gradient(90deg, #6366f1, #8b5cf6);
+      border: none;
+      color: white;
+    }
+    .action-btn.primary:hover { opacity: 0.9; }
+    .empty-state.minimal-empty {
+      text-align: center;
+      padding: 2rem 1rem;
+      background: rgba(255, 255, 255, 0.03);
+      border-radius: 10px;
+      border: 1px dashed rgba(255, 255, 255, 0.1);
+    }
+    .empty-state.minimal-empty p { color: #a1a1aa; font-size: 0.95rem; }
+  </style>
+</head>
+<body class="minimal-dashboard">
+  <div class="container">
+    <header>
+      <h1>${escapeHtml(proxyName)}</h1>
+    </header>
+    ${servicesHtml}
+  </div>
+</body>
+</html>`;
+  }
+
   const servicesHtml = routes.length > 0
     ? `<div class="services-list">
       ${routes.map(route => `
@@ -21,7 +130,7 @@ function renderDashboard(routes, availablePorts, proxyName, hasAuth, cleanUpComm
           <span class="service-config"></span>
         </div>
         <div class="service-actions">
-          <a href="${escapeHtml(route.path)}" class="action-btn primary" title="Acc&eacute;der">Ouvrir</a>
+          <a href="${escapeHtml(route.path)}" class="action-btn primary" title="Acc&eacute;der" target="_blank" rel="noopener noreferrer">Ouvrir</a>
           <button onclick="checkHealth('${escapeHtml(route.path)}', this)" class="action-btn" title="V&eacute;rifier la sant&eacute;">Sant&eacute;</button>
           <button onclick="killPort(${route.port}, this)" class="action-btn danger" title="Tuer le process">Tuer</button>
         </div>

package/views/terminal.html

@@ -148,23 +148,6 @@
     .sb-icon-btn-blue   { background: rgba(99,102,241,0.75); }
     .sb-icon-btn-amber  { background: rgba(245,158,11,0.75); }
     .sb-icon-btn-purple { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
-    .sb-modal-fullscreen {
-      width: calc(100vw - 6rem); height: calc(100vh - 2rem);
-      background: #0f0f1a;
-      border-radius: 10px; padding: 0;
-      border: 1px solid rgba(139,92,246,0.4);
-      box-shadow: 0 0 0 4px rgba(99,102,241,0.15), 0 24px 48px rgba(0,0,0,0.6);
-      display: flex; flex-direction: column; overflow: hidden;
-    }
-    .sb-modal-fullscreen-bar {
-      display: flex; align-items: center; justify-content: space-between;
-      padding: 0.5rem 1rem;
-      background: rgba(255,255,255,0.04);
-      border-bottom: 1px solid rgba(255,255,255,0.08);
-      flex-shrink: 0;
-    }
-    .sb-modal-fullscreen-bar span { font-size: 0.85rem; font-weight: 600; color: #d4d4d8; }
-    .sb-modal-fullscreen iframe { flex: 1; border: none; width: 100%; background: #fff; }
     .sb-section-label {
       font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
       color: #52525b; text-transform: uppercase;
@@ -370,16 +353,6 @@
     <div id="terminal-container"></div>
   </div>
 
-  <div class="sb-modal-overlay" id="mcpIframeModal" onclick="if(event.target===this)closeMcpIframeModal()">
-    <div class="sb-modal-fullscreen">
-      <div class="sb-modal-fullscreen-bar">
-        <span id="mcpIframeTitle"></span>
-        <button class="sb-icon-btn sb-icon-btn-ghost" onclick="closeMcpIframeModal()" title="Fermer">&#x2715;</button>
-      </div>
-      <iframe id="mcpIframeEl" src="about:blank" allowfullscreen></iframe>
-    </div>
-  </div>
-
   <div class="sb-modal-overlay" id="sbModalOverlay" onclick="if(event.target===this)closeSbModal()">
     <div class="sb-modal">
       <div class="sb-modal-header">
@@ -965,11 +938,11 @@
         return;
       }
       el.innerHTML = routes.map(r =>
-        '<div class="sb-service-card" data-path="' + sbEsc(r.path) + '" data-name="' + sbEsc(r.name || r.path) + '" onclick="openMcpIframeModal(this.dataset.path, this.dataset.name)">'
+        '<div class="sb-service-card" data-path="' + sbEsc(r.path) + '" onclick="sidebarOpenRoute(this.dataset.path)">'
         + '<span class="sb-service-name" title="' + sbEsc(r.name || r.path) + '">' + sbEsc(r.name || r.path) + '</span>'
         + '<div class="sb-service-actions">'
-        + '<button class="sb-icon-btn sb-icon-btn-purple" data-path="' + sbEsc(r.path) + '" data-name="' + sbEsc(r.name || r.path) + '" onclick="event.stopPropagation(); openMcpIframeModal(this.dataset.path, this.dataset.name)" title="Ouvrir dans une fen&#234;tre">&#x26F6;</button>'
-        + '<button class="sb-icon-btn sb-icon-btn-blue" data-path="' + sbEsc(r.path) + '" onclick="event.stopPropagation(); sidebarOpenRoute(this.dataset.path)" title="Ouvrir">&#8599;</button>'
+        + '<button class="sb-icon-btn sb-icon-btn-purple" data-path="' + sbEsc(r.path) + '" onclick="event.stopPropagation(); sidebarOpenRoute(this.dataset.path)" title="Ouvrir dans une nouvelle fen&#234;tre">&#x26F6;</button>'
+        + '<button class="sb-icon-btn sb-icon-btn-blue" data-path="' + sbEsc(r.path) + '" onclick="event.stopPropagation(); sidebarOpenRoute(this.dataset.path)" title="Ouvrir dans une nouvelle fen&#234;tre">&#8599;</button>'
         + '<button class="sb-icon-btn sb-icon-btn-amber" data-path="' + sbEsc(r.path) + '" onclick="event.stopPropagation(); sidebarCheckHealth(this.dataset.path, this)" title="Sant&#233;">&#10084;</button>'
         + '</div></div>'
       ).join('');
@@ -979,17 +952,6 @@
       window.open(path, '_blank');
     }
 
-    function openMcpIframeModal(path, name) {
-      document.getElementById('mcpIframeEl').src = path;
-      document.getElementById('mcpIframeTitle').textContent = name || path;
-      document.getElementById('mcpIframeModal').classList.add('active');
-    }
-
-    function closeMcpIframeModal() {
-      document.getElementById('mcpIframeModal').classList.remove('active');
-      document.getElementById('mcpIframeEl').src = 'about:blank';
-    }
-
     async function sidebarCheckHealth(path, btn) {
       btn.disabled = true;
       btn.innerHTML = '<span class="sb-spinner"></span>';