@imenam/self-register-proxy 1.0.37 → 1.0.38

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.38",
   "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">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 => `