@imenam/self-register-proxy 1.0.40 → 1.0.42

package/README.md

@@ -82,7 +82,8 @@ const response = await fetch('http://localhost:3000/proxy/register', {
   headers: { 'Content-Type': 'application/json' },
   body: JSON.stringify({
     path: '/myapp',      // Chemin d'accès via le proxy
-    name: 'My App'       // Nom de l'application (optionnel)
+    name: 'My App',      // Nom de l'application (optionnel)
+    group: 'Google'      // Section repliable du dashboard (optionnel)
   })
 });
 
@@ -163,6 +164,7 @@ Enregistre une nouvelle route et attribue un port.
 | `path` | string | ✅ | Chemin URL pour accéder à l'app |
 | `name` | string | ❌ | Nom descriptif |
 | `port` | number | ❌ | Port spécifique (sinon auto-attribué) |
+| `group` | string | ❌ | Section repliable du dashboard (repliée par défaut). Vide/absent ⇒ section « Non groupées » |
 
 **Response (201):**
 ```json

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imenam/self-register-proxy",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "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

@@ -77,6 +77,7 @@ router.get('/', requireAuth, (req, res) => {
       target: value.target || 'http://localhost',
       name: value.name,
       healthCheck: value.healthCheck,
+      group: value.group || null,
       registeredAt: value.registeredAt,
       fullTarget: `${value.target || 'http://localhost'}:${value.port}`
     });

package/routes/registration.js

@@ -10,8 +10,18 @@ const router = Router();
 /**
  * Logique commune d'enregistrement (auto et manuel)
  */
-async function registerRouteInternal({ path, name, port, target, healthCheck, autoAssignPort }) {
+/**
+ * Normalise un nom de groupe : trim, et chaîne vide => undefined (non groupé).
+ */
+function normalizeGroup(group) {
+  if (typeof group !== 'string') return undefined;
+  const trimmed = group.trim();
+  return trimmed === '' ? undefined : trimmed;
+}
+
+async function registerRouteInternal({ path, name, port, target, healthCheck, group, autoAssignPort }) {
   const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+  const normalizedGroup = normalizeGroup(group);
 
   let finalTarget = target || 'http://localhost';
   if (!finalTarget.startsWith('http://') && !finalTarget.startsWith('https://')) {
@@ -63,10 +73,11 @@ async function registerRouteInternal({ path, name, port, target, healthCheck, au
       target: finalTarget,
       name: name || normalizedPath,
       healthCheck: healthCheck !== undefined ? healthCheck === true || healthCheck === 'true' : true,
+      group: normalizedGroup,
       registeredAt: new Date().toISOString()
     });
 
-    console.log(`[REGISTER] ${normalizedPath} -> ${finalTarget}:${assignedPort} (${name || 'unnamed'}) [Health: ${healthCheck !== undefined ? healthCheck : 'default'}]`);
+    console.log(`[REGISTER] ${normalizedPath} -> ${finalTarget}:${assignedPort} (${name || 'unnamed'}) [Health: ${healthCheck !== undefined ? healthCheck : 'default'}]${normalizedGroup ? ` [Group: ${normalizedGroup}]` : ''}`);
 
     return {
       success: true,
@@ -75,6 +86,7 @@ async function registerRouteInternal({ path, name, port, target, healthCheck, au
       target: finalTarget,
       name: name || normalizedPath,
       healthCheck: healthCheck !== undefined ? healthCheck === true || healthCheck === 'true' : true,
+      group: normalizedGroup,
       message: `Route registered. Target: ${finalTarget}:${assignedPort}`
     };
 
@@ -95,12 +107,12 @@ async function registerRouteInternal({ path, name, port, target, healthCheck, au
  * Enregistrement automatique (rétro-compatibilité)
  */
 router.post('/proxy/register', requireLocalOnly, async (req, res) => {
-  const { path, name, target, healthCheck } = req.body;
+  const { path, name, target, healthCheck, group } = req.body;
 
   if (!path) return res.status(400).json({ success: false, error: 'Path is required' });
 
   try {
-    const result = await registerRouteInternal({ path, name, target, healthCheck, autoAssignPort: true });
+    const result = await registerRouteInternal({ path, name, target, healthCheck, group, autoAssignPort: true });
     res.json(result);
   } catch (error) {
     console.error('[REGISTER AUTO ERROR]', error.message);
@@ -114,13 +126,13 @@ router.post('/proxy/register', requireLocalOnly, async (req, res) => {
  * Enregistrement manuel via l'interface graphique (port obligatoire)
  */
 router.post('/proxy/register-manual', requireAuth, async (req, res) => {
-  const { path, name, port, target, healthCheck } = req.body;
+  const { path, name, port, target, healthCheck, group } = req.body;
 
   if (!path) return res.status(400).json({ success: false, error: 'Path is required' });
   if (!port) return res.status(400).json({ success: false, error: 'Port is required for manual registration' });
 
   try {
-    const result = await registerRouteInternal({ path, name, port, target, healthCheck, autoAssignPort: false });
+    const result = await registerRouteInternal({ path, name, port, target, healthCheck, group, autoAssignPort: false });
     res.json(result);
   } catch (error) {
     console.error('[REGISTER MANUAL ERROR]', error.message);
@@ -178,6 +190,7 @@ router.get('/proxy/routes', requireAuth, (req, res) => {
       target: value.target || 'http://localhost',
       name: value.name,
       healthCheck: value.healthCheck,
+      group: value.group || null,
       registeredAt: value.registeredAt,
       fullTarget: `${value.target || 'http://localhost'}:${value.port}`
     });

package/services/proxyRouter.js

@@ -1,99 +1,99 @@
-const { createProxyMiddleware } = require('http-proxy-middleware');
-const { registry } = require('./registry');
-const { findRouteForPath } = require('./portManager');
-const { unregisterServer } = require('./healthCheck');
-const { requireAuth } = require('./auth');
-
-/**
- * Échappe les caractères HTML pour éviter les injections XSS
- */
-function escapeHtml(text) {
-  const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
-  return String(text).replace(/[&<>"']/g, char => map[char]);
-}
-
-/**
- * Middleware de proxy persistant — créé une seule fois pour éviter les fuites mémoire
- */
-const persistentProxyMiddleware = createProxyMiddleware({
-  target: 'http://localhost',
-  router: (req) => req.proxyTarget,
-  changeOrigin: true,
-  pathRewrite: (path, req) => {
-    const routePath = req.proxyRoutePath;
-    if (routePath && path.startsWith(routePath)) {
-      return path.slice(routePath.length) || '/';
-    }
-    return path;
-  },
-  on: {
-    proxyReq: (proxyReq, req) => {
-      if (req.body && typeof req.body === 'object' && Object.keys(req.body).length > 0) {
-        const bodyData = JSON.stringify(req.body);
-        proxyReq.setHeader('Content-Type', 'application/json');
-        proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
-        proxyReq.write(bodyData);
-      }
-      console.log(`[PROXY] ${req.method} ${req.path} -> ${req.proxyTarget}`);
-    },
-    error: (err, req, res) => {
-      if (res.headersSent) return;
-      console.error(`[PROXY ERROR] ${req.path}:`, err.message);
-
-      if (err.code === 'ECONNREFUSED' || err.code === 'ETIMEDOUT') {
-        const route = findRouteForPath(req.path);
-        if (route) {
-          const routePath = [...registry.routes.entries()].find(([, v]) => v === route)?.[0];
-          if (routePath) {
-            unregisterServer(routePath, `connection error (${err.code})`).catch(() => {});
-            console.log(`[PROXY] Auto-unregistered ${routePath} due to connection error`);
-          }
-        }
-      }
-
-      res.status(502).json({ error: 'Proxy error' });
-    }
-  }
-});
-
-/**
- * Middleware principal de routage vers le proxy
- * Inclut le Smart Routing (Referer Fallback)
- */
-function routingMiddleware(req, res, next) {
-  if (req.path.startsWith('/proxy/')) return next();
-
-  requireAuth(req, res, () => {
-    let route = findRouteForPath(req.path);
-
-    if (!route && req.get('Referer')) {
-      try {
-        const refererUrl = new URL(req.get('Referer'));
-        if (refererUrl.host === req.get('host')) {
-          const refererPath = refererUrl.pathname;
-          route = findRouteForPath(refererPath);
-          if (route) {
-            console.log(`[SMART ROUTE] Inferred ${route.name} from referer: ${refererPath}`);
-          }
-        }
-      } catch {
-        // URL de referer invalide, on ignore
-      }
-    }
-
-    if (!route) {
-      return res.status(404).json({
-        error: 'No route registered for this path',
-        path: req.path,
-        hint: 'Register a route with POST /proxy/register or use the UI'
-      });
-    }
-
-    const target = route.target || 'http://localhost';
-    req.proxyTarget = `${target}:${route.port}`;
-    req.proxyRoutePath = [...registry.routes.entries()].find(([, v]) => v === route)?.[0];
-    persistentProxyMiddleware(req, res, next);
-  });
-}
-
-module.exports = { persistentProxyMiddleware, routingMiddleware, escapeHtml };
+const { createProxyMiddleware } = require('http-proxy-middleware');
+const { registry } = require('./registry');
+const { findRouteForPath } = require('./portManager');
+const { unregisterServer } = require('./healthCheck');
+const { requireAuth } = require('./auth');
+
+/**
+ * Échappe les caractères HTML pour éviter les injections XSS
+ */
+function escapeHtml(text) {
+  const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
+  return String(text).replace(/[&<>"']/g, char => map[char]);
+}
+
+/**
+ * Middleware de proxy persistant — créé une seule fois pour éviter les fuites mémoire
+ */
+const persistentProxyMiddleware = createProxyMiddleware({
+  target: 'http://localhost',
+  router: (req) => req.proxyTarget,
+  changeOrigin: true,
+  pathRewrite: (path, req) => {
+    const routePath = req.proxyRoutePath;
+    if (routePath && path.startsWith(routePath)) {
+      return path.slice(routePath.length) || '/';
+    }
+    return path;
+  },
+  on: {
+    proxyReq: (proxyReq, req) => {
+      if (req.body && typeof req.body === 'object' && Object.keys(req.body).length > 0) {
+        const bodyData = JSON.stringify(req.body);
+        proxyReq.setHeader('Content-Type', 'application/json');
+        proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
+        proxyReq.write(bodyData);
+      }
+      console.log(`[PROXY] ${req.method} ${req.path} -> ${req.proxyTarget}`);
+    },
+    error: (err, req, res) => {
+      if (res.headersSent) return;
+      console.error(`[PROXY ERROR] ${req.path}:`, err.message);
+
+      if (err.code === 'ECONNREFUSED' || err.code === 'ETIMEDOUT') {
+        const route = findRouteForPath(req.path);
+        if (route) {
+          const routePath = [...registry.routes.entries()].find(([, v]) => v === route)?.[0];
+          if (routePath) {
+            unregisterServer(routePath, `connection error (${err.code})`).catch(() => {});
+            console.log(`[PROXY] Auto-unregistered ${routePath} due to connection error`);
+          }
+        }
+      }
+
+      res.status(502).json({ error: 'Proxy error' });
+    }
+  }
+});
+
+/**
+ * Middleware principal de routage vers le proxy
+ * Inclut le Smart Routing (Referer Fallback)
+ */
+function routingMiddleware(req, res, next) {
+  if (req.path.startsWith('/proxy/')) return next();
+
+  requireAuth(req, res, () => {
+    let route = findRouteForPath(req.path);
+
+    if (!route && req.get('Referer')) {
+      try {
+        const refererUrl = new URL(req.get('Referer'));
+        if (refererUrl.host === req.get('host')) {
+          const refererPath = refererUrl.pathname;
+          route = findRouteForPath(refererPath);
+          if (route) {
+            console.log(`[SMART ROUTE] Inferred ${route.name} from referer: ${refererPath}`);
+          }
+        }
+      } catch {
+        // URL de referer invalide, on ignore
+      }
+    }
+
+    if (!route) {
+      return res.status(404).json({
+        error: 'No route registered for this path',
+        path: req.path,
+        hint: 'Register a route with POST /proxy/register or use the UI'
+      });
+    }
+
+    const target = route.target || 'http://localhost';
+    req.proxyTarget = `${target}:${route.port}`;
+    req.proxyRoutePath = [...registry.routes.entries()].find(([, v]) => v === route)?.[0];
+    persistentProxyMiddleware(req, res, next);
+  });
+}
+
+module.exports = { persistentProxyMiddleware, routingMiddleware, escapeHtml };

package/services/registry.js

@@ -31,7 +31,7 @@ class Mutex {
 }
 
 const registry = {
-  routes: new Map(),      // path -> { port, target, name, healthCheck, registeredAt }
+  routes: new Map(),      // path -> { port, target, name, healthCheck, group, registeredAt }
   usedPorts: new Set(),   // Ports déjà attribués
   nextPort: INTERNAL_PORT_START
 };

package/views/dashboard.js

@@ -1,5 +1,65 @@
 const { escapeHtml } = require('../services/proxyRouter');
 
+/** Libellé de la section pour les applications sans groupe (APP_GROUP absent). */
+const UNGROUPED_LABEL = 'Non groupées';
+
+/**
+ * Répartit les routes par groupe.
+ * @param {Array} routes
+ * @returns {Array<{ name: string, routes: Array }>} groupes ordonnés :
+ *   groupes nommés triés alphabétiquement, section "non groupées" en dernier.
+ */
+function groupRoutes(routes) {
+  const groups = new Map();
+  for (const route of routes) {
+    const key = (route.group && String(route.group).trim()) || UNGROUPED_LABEL;
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key).push(route);
+  }
+
+  return [...groups.entries()]
+    .map(([name, groupRoutes]) => ({ name, routes: groupRoutes }))
+    .sort((a, b) => {
+      if (a.name === UNGROUPED_LABEL) return 1;
+      if (b.name === UNGROUPED_LABEL) return -1;
+      return a.name.localeCompare(b.name);
+    });
+}
+
+/**
+ * Enveloppe des cartes de service dans des sections repliables (`<details>`),
+ * repliées par défaut. S'il n'existe qu'une seule section "non groupées",
+ * les cartes sont rendues à plat (aucun groupe explicite à afficher).
+ * @param {Array} routes
+ * @param {(route: any) => string} renderCard
+ * @returns {string}
+ */
+function renderGroupedServices(routes, renderCard) {
+  const groups = groupRoutes(routes);
+  const onlyUngrouped = groups.length === 1 && groups[0].name === UNGROUPED_LABEL;
+
+  if (onlyUngrouped) {
+    return `<div class="services-list">
+      ${groups[0].routes.map(renderCard).join('')}
+    </div>`;
+  }
+
+  return `<div class="service-groups">
+      ${groups.map(group => `
+      <details class="service-group"${group.name === UNGROUPED_LABEL ? ' open' : ''}>
+        <summary class="service-group-summary">
+          <span class="service-group-caret">&#9654;</span>
+          <span class="service-group-name">${escapeHtml(group.name)}</span>
+          <span class="service-group-count">${group.routes.length}</span>
+        </summary>
+        <div class="services-list">
+          ${group.routes.map(renderCard).join('')}
+        </div>
+      </details>
+      `).join('')}
+    </div>`;
+}
+
 /**
  * Page dashboard principale
  * @param {Array} routes - liste des routes enregistrées
@@ -11,9 +71,7 @@ const { escapeHtml } = require('../services/proxyRouter');
  */
 function renderDashboard(routes, availablePorts, proxyName, hasAuth, cleanUpCommand, minimalDashboard) {
   if (minimalDashboard) {
-    const servicesHtml = routes.length > 0
-      ? `<div class="services-list">
-      ${routes.map(route => `
+    const renderMinimalCard = (route) => `
       <div class="service-card">
         <div class="service-info">
           <span class="service-name">${escapeHtml(route.name)}</span>
@@ -22,8 +80,10 @@ function renderDashboard(routes, availablePorts, proxyName, hasAuth, cleanUpComm
           <a href="${escapeHtml(route.path)}" class="action-btn primary" title="Acc&eacute;der" target="_blank" rel="noopener noreferrer">Ouvrir</a>
         </div>
       </div>
-      `).join('')}
-    </div>`
+      `;
+
+    const servicesHtml = routes.length > 0
+      ? renderGroupedServices(routes, renderMinimalCard)
       : `<div class="empty-state minimal-empty">
       <p>Aucun service</p>
     </div>`;
@@ -52,6 +112,38 @@ function renderDashboard(routes, availablePorts, proxyName, hasAuth, cleanUpComm
       -webkit-text-fill-color: transparent;
       background-clip: text;
     }
+    .service-groups { display: flex; flex-direction: column; gap: 0.5rem; }
+    .service-group {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .service-group-summary {
+      list-style: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.55rem 0.8rem;
+      user-select: none;
+    }
+    .service-group-summary::-webkit-details-marker { display: none; }
+    .service-group-caret {
+      font-size: 0.7rem;
+      color: #8b5cf6;
+      transition: transform 0.15s ease;
+    }
+    .service-group[open] > .service-group-summary .service-group-caret { transform: rotate(90deg); }
+    .service-group-name { font-size: 0.9rem; font-weight: 600; color: #e4e4e7; }
+    .service-group-count {
+      font-size: 0.7rem;
+      color: #a1a1aa;
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: 999px;
+      padding: 0.05rem 0.5rem;
+    }
+    .service-group .services-list { padding: 0 0.6rem 0.6rem; }
     .services-list { display: flex; flex-direction: column; gap: 0.5rem; }
     .service-card {
       background: rgba(255, 255, 255, 0.05);
@@ -118,9 +210,7 @@ function renderDashboard(routes, availablePorts, proxyName, hasAuth, cleanUpComm
 </html>`;
   }
 
-  const servicesHtml = routes.length > 0
-    ? `<div class="services-list">
-      ${routes.map(route => `
+  const renderServiceCard = (route) => `
       <div class="service-card" data-path="${escapeHtml(route.path)}">
         <div class="service-info">
           <span class="service-name">${escapeHtml(route.name)}</span>
@@ -135,8 +225,10 @@ function renderDashboard(routes, availablePorts, proxyName, hasAuth, cleanUpComm
           <button onclick="killPort(${route.port}, this)" class="action-btn danger" title="Tuer le process">Tuer</button>
         </div>
       </div>
-      `).join('')}
-    </div>`
+      `;
+
+  const servicesHtml = routes.length > 0
+    ? renderGroupedServices(routes, renderServiceCard)
     : `<div class="empty-state">
       <h2>Aucun service enregistr&eacute;</h2>
       <p>Cliquez sur "+ Ajouter" ou utilisez l'API:</p>
@@ -371,6 +463,51 @@ function renderDashboard(routes, availablePorts, proxyName, hasAuth, cleanUpComm
     .modal .submit-btn:hover {
       opacity: 0.9;
     }
+    .service-groups {
+      display: flex;
+      flex-direction: column;
+      gap: 0.6rem;
+    }
+    .service-group {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 10px;
+      overflow: hidden;
+    }
+    .service-group-summary {
+      list-style: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+      padding: 0.7rem 1rem;
+      user-select: none;
+      transition: background 0.15s ease;
+    }
+    .service-group-summary:hover { background: rgba(255, 255, 255, 0.04); }
+    .service-group-summary::-webkit-details-marker { display: none; }
+    .service-group-caret {
+      font-size: 0.75rem;
+      color: #8b5cf6;
+      transition: transform 0.15s ease;
+    }
+    .service-group[open] > .service-group-summary .service-group-caret { transform: rotate(90deg); }
+    .service-group-name {
+      font-size: 0.95rem;
+      font-weight: 700;
+      color: #f4f4f5;
+      flex: 1;
+    }
+    .service-group-count {
+      font-size: 0.72rem;
+      font-weight: 600;
+      color: #a1a1aa;
+      background: rgba(139, 92, 246, 0.15);
+      border: 1px solid rgba(139, 92, 246, 0.25);
+      border-radius: 999px;
+      padding: 0.1rem 0.55rem;
+    }
+    .service-group .services-list { padding: 0 0.75rem 0.75rem; }
     .services-list {
       display: flex;
       flex-direction: column;
@@ -603,6 +740,10 @@ function renderDashboard(routes, availablePorts, proxyName, hasAuth, cleanUpComm
             <label for="port">Port</label>
             <input type="number" id="port" name="port" placeholder="4000" required>
           </div>
+          <div class="form-group">
+            <label for="group">Groupe (optionnel)</label>
+            <input type="text" id="group" name="group" placeholder="Laisser vide pour &laquo; Non group&eacute;es &raquo;">
+          </div>
           <div class="checkbox-group">
             <input type="checkbox" id="healthCheck" name="healthCheck">
             <label for="healthCheck">Health check actif</label>
@@ -669,6 +810,7 @@ function renderDashboard(routes, availablePorts, proxyName, hasAuth, cleanUpComm
         name: document.getElementById('name').value,
         target: document.getElementById('target').value,
         port: parseInt(document.getElementById('port').value),
+        group: document.getElementById('group').value,
         healthCheck: document.getElementById('healthCheck').checked
       };