feat: gestion groupes sans serveur via IPC + lecture YAML directe

- Ajout du package yaml dans electron pour parser config.yaml
- Handlers IPC groups:list/create/update/delete lisent/écrivent config.yaml
  directement depuis le Main Process (sans serveur requis)
- fetchGroups() utilise toujours IPC (plus d'appel REST pour la lecture)
- editGroup/deleteGroup/addGroup : REST API si serveur actif, IPC sinon
- loadViewData : onglet Groupes chargé même si serveur arrêté
- Note affichée quand le serveur est arrêté : modifications appliquées
  au prochain démarrage

.gitignore

@@ -55,3 +55,6 @@ server.log
 
 # Runtime files
 /tmp/ptt-live.pid
+
+# Certificats SSL locaux (mkcert) - contiennent des clés privées
+certs/

DESKTOP-APP.md

@@ -5,11 +5,12 @@ Application Electron pour gérer le serveur PTT Live avec interface graphique co
 ## 📸 Aperçu
 
 L'application desktop intègre :
-- ✅ **Dashboard temps réel** : stats, utilisateurs, QR Code
+- ✅ **Dashboard temps réel** : stats, utilisateurs, QR Code (généré côté Main Process, sans dépendance CDN)
+- ✅ **HTTPS automatique** : certificats locaux mkcert installés au premier lancement
 - ✅ **Configuration audio** : sélection devices, sample rate, bitrate
 - ✅ **Gestion groupes** : CRUD complet avec API
-- ✅ **Monitoring** : VU-mètres (prévu), logs filtrables
-- ✅ **Contrôle serveur** : démarrage/arrêt avec feedback visuel
+- ✅ **Monitoring** : VU-mètres temps réel via WebSocket, logs filtrables
+- ✅ **Contrôle serveur** : démarrage manuel/arrêt avec feedback visuel
 
 ---
 
@@ -24,7 +25,7 @@ cd electron
 npm start
 ```
 
-L'application démarre automatiquement le serveur PTT Live au lancement.
+Au premier lancement, l'app configure automatiquement les certificats HTTPS locaux (mkcert) — voir [HTTPS et certificats](#-https-et-certificats). Le serveur PTT Live **ne démarre pas automatiquement** : cliquez sur "Démarrer" dans le dashboard pour le lancer.
 
 ---
 
@@ -50,9 +51,12 @@ npm install
 - Total connexions
 
 **QR Code** :
-- Généré automatiquement avec l'IP réseau
+- Généré côté Main Process (lib `qrcode`, pas de CDN externe — fonctionne sans accès Internet sur le WiFi d'un événement)
+- IP réseau détectée par le Main Process (même logique que pour les certificats mkcert)
+- URL construite à partir du protocole/port réels du serveur (HTTPS par défaut)
 - Scanner depuis smartphone pour connexion rapide
 - Bouton copier URL
+- Placeholder visuel tant que le serveur est arrêté ou qu'aucun QR code n'a été généré
 
 **Utilisateurs** :
 - Liste en temps réel
@@ -80,10 +84,10 @@ npm install
 
 ### 4. Monitoring
 
-**VU-Mètres** (à venir) :
-- Niveaux audio par canal (input/output)
-- Temps réel via WebSocket
-- Détection clipping
+**VU-Mètres** :
+- Niveaux audio par canal (input/output) et par groupe
+- Temps réel via WebSocket (`/audio-levels`, même port que l'API)
+- Reconnexion automatique si la connexion WebSocket tombe
 
 ### 5. Logs
 
@@ -114,21 +118,24 @@ npm install
 │  │                                           │ │
 │  │  • HTML/CSS/JS (pas de framework)        │ │
 │  │  • Fetch API REST :3000/admin/*          │ │
-│  │  • WebSocket audio levels (prévu)        │ │
-│  │  • QR Code (qrcode.js)                   │ │
+│  │  • WebSocket audio levels (live)         │ │
+│  │  • QR Code (data URL via IPC)            │ │
 │  └───────────────────────────────────────────┘ │
 └─────────────────────────────────────────────────┘
-                    ↕ HTTP
+                    ↕ HTTPS (127.0.0.1, certs mkcert)
 ┌─────────────────────────────────────────────────┐
 │         SERVEUR PTT LIVE (spawned)              │
 │                                                 │
-│  • LiveKit Server (binaire Go)                 │
+│  • LiveKit Server (binaire Go) :7880           │
 │  • Audio Bridge Manager                        │
-│  • API REST Express :3000                      │
-│  • WebSocket Audio Levels                      │
+│  • API REST Express :3000 (HTTPS)              │
+│  • Proxy HTTP + WS → LiveKit (/livekit/*)      │
+│  • WebSocket Audio Levels (/audio-levels)      │
 └─────────────────────────────────────────────────┘
 ```
 
+Le proxy `/livekit/*` (http-proxy natif) permet aux clients de joindre LiveKit via le même port/certificat HTTPS que l'API, sans exposer le port 7880 séparément. Le serveur Express dispatch lui-même les événements `upgrade` (un seul listener) entre le proxy LiveKit et le WebSocket audio-levels, qui partagent le même port.
+
 ---
 
 ## 🔌 API Consommées
@@ -150,9 +157,31 @@ L'interface desktop utilise toutes les routes admin existantes :
 | `/admin/devices/list` | GET | Auto-détection (macOS/Linux) |
 | `/admin/logs` | GET | Logs serveur |
 | `/health` | GET | Health check |
+| `/livekit/*` | ALL | Proxy HTTP vers LiveKit Server (port 7880) |
 
-WebSocket (prévu) :
-- `ws://localhost:3000/audio-levels` → VU-mètres temps réel
+WebSocket :
+- `wss://127.0.0.1:3000/audio-levels` → VU-mètres temps réel
+- `wss://127.0.0.1:3000/livekit/*` → Proxy WebSocket signaling LiveKit (clients PWA)
+
+---
+
+## 🔒 HTTPS et certificats
+
+L'app est en HTTPS par défaut (`ENABLE_HTTPS=false` pour revenir en HTTP explicitement).
+
+### Setup automatique (premier lancement)
+
+Au premier démarrage, si `certs/localhost.pem` et `certs/localhost-key.pem` sont absents, `electron/setup-helper.js` :
+1. Installe `mkcert` automatiquement (Homebrew sur macOS, téléchargement direct sur Linux)
+2. Installe la CA locale (`mkcert -install`) dans le trousseau système
+3. Détecte l'IP réseau et génère les certificats pour `localhost`, `127.0.0.1` et cette IP
+4. Affiche des dialogs de progression/erreur (avec fallback manuel `./setup-certificates.sh`)
+
+### Points d'attention
+
+- **127.0.0.1, pas localhost** : le serveur écoute en IPv4 (`host: 0.0.0.0`), mais le Node embarqué par Electron peut résoudre `localhost` en IPv6 (`::1`) en priorité. `main.js` et `preload.js` utilisent donc `127.0.0.1` pour tous les appels internes (ping, health check) afin d'éviter des échecs silencieux.
+- **Ping interne et `rejectUnauthorized`** : le module `https` de Node ne lit pas le trousseau système où mkcert installe sa CA (contrairement à Safari/Chrome/Electron renderer) ; `pingServer()` passe donc `rejectUnauthorized: false` pour son propre ping local.
+- **Proxy LiveKit en HTTPS** : LiveKit Server local tourne en HTTP brut (port 7880) ; le proxy Express (`http-proxy`) fait le pont HTTPS ↔ HTTP côté clients.
 
 ---
 
@@ -283,31 +312,37 @@ PORT=3001 npm start
 - Vérifier permissions LiveKit binaire
 - Voir logs dans DevTools console
 
+**Certificats SSL manquants / setup mkcert échoue** :
+- Exécuter manuellement : `./setup-certificates.sh`
+- Ou installer mkcert : https://github.com/FiloSottile/mkcert puis `mkcert -install`
+- Vérifier la présence de `certs/localhost.pem` et `certs/localhost-key.pem`
+
+**Statut serveur affiché à tort comme "arrêté"** :
+- Vérifier que le ping utilise bien `127.0.0.1` (pas `localhost`, qui peut résoudre en IPv6 alors que le serveur n'écoute qu'en IPv4)
+- En HTTPS, le ping interne ignore volontairement les erreurs de certificat (`rejectUnauthorized: false`) puisque Node ne lit pas le trousseau système où mkcert installe sa CA
+
 **QR Code ne s'affiche pas** :
-- Vérifier que le serveur tourne
-- Voir console : "✅ QR Code généré"
-- Script CDN chargé ?
+- Vérifier que le serveur tourne (le QR code est réinitialisé tant qu'il est arrêté)
+- Le QR code est généré côté Main Process (IPC `qrcode:generate`), pas de dépendance réseau/CDN
 
 ---
 
 ## 🚧 TODO / Améliorations
 
 ### Priorité haute
-- [ ] **WebSocket VU-mètres** : implémenter connexion `/audio-levels`
+- [x] **WebSocket VU-mètres** : implémenter connexion `/audio-levels`
 - [ ] **Vraies icônes** : icns/png pour macOS/Linux
 - [ ] **Tray icon** : avec menu contextuel fonctionnel
 
 ### Priorité moyenne
 - [ ] **Graphiques monitoring** : Chart.js pour latence/bande passante
-- [ ] **Export logs** : bouton télécharger CSV/JSON
+- [x] **Export logs** : bouton télécharger JSON (filtre niveau appliqué)
 - [ ] **Matrice routing** : interface graphique drag & drop
-- [ ] **Notifications desktop** : via Electron Notification API
+- [x] **Export & import config** : bouton télécharger YAML et charger config (backup auto .bak)
 
 ### Priorité basse
-- [ ] **Auth admin** : mot de passe pour accès dashboard
 - [ ] **Thème toggle** : dark/light mode
 - [ ] **Auto-update** : electron-updater pour mises à jour
-- [ ] **I18n** : français/anglais
 
 ### Technique
 - [ ] **Tests** : Spectron ou Playwright pour Electron
@@ -326,18 +361,21 @@ electron/
 │                        # - Spawn serveur
 │                        # - IPC handlers
 │                        # - Window management
+│                        # - Setup SSL au premier lancement
 │
 ├── preload.js           # IPC Bridge sécurisé
 │                        # - contextBridge
 │                        # - Expose electronAPI
 │
+├── setup-helper.js      # Installation auto mkcert + génération certificats
+│                        # - Détection IP réseau
+│
 ├── package.json         # Config Electron + electron-builder
 │
 └── ui/                  # Renderer Process (Frontend)
     ├── index.html       # Structure UI
     ├── styles.css       # Styles (dark theme)
-    ├── app.js           # Logic frontend
-    └── qrcode.min.js    # QR Code library
+    └── app.js           # Logic frontend (QR code reçu via IPC en data URL)
 ```
 
 ### Communication IPC
@@ -397,4 +435,4 @@ Même licence que PTT Live (MIT)
 ---
 
 **Version** : 0.3.0
-**Dernière mise à jour** : 2026-06-19
+**Dernière mise à jour** : 2026-06-30

client/src/App.jsx

@@ -100,17 +100,17 @@ function App() {
 
       const data = await response.json();
 
-      // En mode dev (HTTPS via Vite), utiliser le proxy WebSocket
-      // En mode prod (HTTP direct), utiliser l'URL LiveKit directement
+      // Si HTTPS, utiliser le proxy WebSocket (résout mixed content)
+      // Sinon utiliser l'URL LiveKit directement
       let livekitUrl = data.url;
 
-      if (import.meta.env.DEV && window.location.protocol === 'https:') {
-        // Mode dev avec Vite : utiliser le proxy WSS
-        livekitUrl = `${window.location.protocol}//${window.location.host}/livekit`;
+      if (window.location.protocol === 'https:') {
+        // HTTPS : utiliser le proxy WSS (wss://host:port/livekit)
+        livekitUrl = `wss://${window.location.host}/livekit`;
+        console.log('🔒 Mode HTTPS : utilisation proxy WebSocket');
       }
 
       console.log('🔗 Connexion LiveKit:', livekitUrl);
-      console.log('📝 Mode:', import.meta.env.DEV ? 'dev' : 'prod');
 
       // Se connecter à LiveKit avec les canaux virtuels
       await connect(livekitUrl, data.token, data.virtualChannels || []);
@@ -154,7 +154,7 @@ function App() {
       // Adapter l'URL LiveKit selon le protocole de la page
       let livekitUrl = data.url;
       if (window.location.protocol === 'https:') {
-        livekitUrl = `${window.location.protocol}//${window.location.host}/livekit`;
+        livekitUrl = `wss://${window.location.host}/livekit`;
       }
 
       // Changer de room LiveKit avec les canaux virtuels du nouveau groupe

electron/main.js

@@ -5,10 +5,29 @@
 
 const { app, BrowserWindow, ipcMain, Menu, Tray, dialog } = require('electron');
 const path = require('path');
+const fs = require('fs');
 const { spawn } = require('child_process');
 const http = require('http');
+const https = require('https');
+const QRCode = require('qrcode');
+const yaml = require('yaml');
 const setupHelper = require('./setup-helper');
 
+const CONFIG_PATH = path.join(__dirname, '..', 'server', 'config', 'config.yaml');
+
+function readConfig() {
+  return yaml.parse(fs.readFileSync(CONFIG_PATH, 'utf8'));
+}
+
+function writeConfig(config) {
+  fs.writeFileSync(CONFIG_PATH, yaml.stringify(config), 'utf8');
+}
+
+function slugify(text) {
+  return text.toString().normalize('NFD').replace(/[̀-ͯ]/g, '')
+    .toLowerCase().trim().replace(/\s+/g, '-').replace(/[^\w-]+/g, '').replace(/--+/g, '-');
+}
+
 // État de l'application
 let mainWindow = null;
 let tray = null;
@@ -17,7 +36,14 @@ let serverStarted = false;
 let rendererReady = false;
 
 const SERVER_PORT = process.env.PORT || 3000;
-const SERVER_URL = `http://localhost:${SERVER_PORT}`;
+// HTTPS activé par défaut (cohérent avec le setup mkcert automatique au premier
+// lancement) ; ENABLE_HTTPS=false permet de revenir explicitement en HTTP
+const ENABLE_HTTPS = process.env.ENABLE_HTTPS !== 'false';
+const SERVER_PROTOCOL = ENABLE_HTTPS ? 'https' : 'http';
+// 127.0.0.1 plutôt que localhost : le serveur n'écoute qu'en IPv4 (host: 0.0.0.0
+// dans config.yaml), or le Node embarqué par Electron peut résoudre "localhost"
+// en IPv6 (::1) en priorité, ce qui ferait échouer silencieusement le ping
+const SERVER_URL = `${SERVER_PROTOCOL}://127.0.0.1:${SERVER_PORT}`;
 const isDev = process.argv.includes('--dev');
 
 /**
@@ -133,6 +159,7 @@ async function startServer() {
         ...process.env,
         PORT: SERVER_PORT,
         USE_LOCAL_LIVEKIT: 'true',
+        ENABLE_HTTPS: ENABLE_HTTPS ? 'true' : 'false',
         NODE_ENV: isDev ? 'development' : 'production'
       }
     });
@@ -289,7 +316,13 @@ async function stopServer() {
  */
 async function pingServer() {
   return new Promise((resolve) => {
-    http.get(`${SERVER_URL}/health`, (res) => {
+    const client = ENABLE_HTTPS ? https : http;
+    // rejectUnauthorized: false : le cert mkcert est approuvé par le Keychain
+    // macOS (Safari/Chrome/Electron renderer), mais le module https de Node
+    // ne lit pas ce trust store et rejetterait sinon ce ping vers notre
+    // propre serveur local.
+    const options = ENABLE_HTTPS ? { rejectUnauthorized: false } : {};
+    client.get(`${SERVER_URL}/health`, options, (res) => {
       let data = '';
       res.on('data', (chunk) => { data += chunk; });
       res.on('end', () => {
@@ -327,6 +360,7 @@ app.whenReady().then(async () => {
     return {
       running: health.success,
       health: health.data,
+      error: health.error,
       url: SERVER_URL
     };
   });
@@ -335,6 +369,119 @@ app.whenReady().then(async () => {
     return await pingServer();
   });
 
+  ipcMain.handle('qrcode:generate', async (event, text) => {
+    try {
+      const dataUrl = await QRCode.toDataURL(text, { width: 256, margin: 2 });
+      return { success: true, dataUrl };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  });
+
+  ipcMain.handle('network:ip', async () => {
+    return setupHelper.getNetworkIP();
+  });
+
+  // ========== Groupes (lecture/écriture YAML directe, sans serveur) ==========
+
+  ipcMain.handle('groups:list', () => {
+    try {
+      const config = readConfig();
+      return { groups: config.groups || [] };
+    } catch (error) {
+      return { groups: [], error: error.message };
+    }
+  });
+
+  ipcMain.handle('groups:create', (event, { name, audioBitrate }) => {
+    try {
+      const config = readConfig();
+      const id = slugify(name);
+      if ((config.groups || []).find(g => slugify(g.name) === id)) {
+        return { success: false, error: `Un groupe "${name}" existe déjà` };
+      }
+      const group = { name, ...(audioBitrate ? { audioBitrate } : {}) };
+      config.groups = [...(config.groups || []), group];
+      writeConfig(config);
+      return { success: true, group };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  });
+
+  ipcMain.handle('groups:update', (event, { id, name, audioBitrate }) => {
+    try {
+      const config = readConfig();
+      const idx = (config.groups || []).findIndex(g => slugify(g.name) === id);
+      if (idx === -1) return { success: false, error: `Groupe ${id} introuvable` };
+      if (name !== undefined) config.groups[idx].name = name;
+      if (audioBitrate !== undefined) config.groups[idx].audioBitrate = audioBitrate;
+      writeConfig(config);
+      return { success: true, group: config.groups[idx] };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  });
+
+  ipcMain.handle('groups:delete', (event, { id }) => {
+    try {
+      const config = readConfig();
+      const idx = (config.groups || []).findIndex(g => slugify(g.name) === id);
+      if (idx === -1) return { success: false, error: `Groupe ${id} introuvable` };
+      config.groups.splice(idx, 1);
+      writeConfig(config);
+      return { success: true };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  });
+
+  ipcMain.handle('config:export', async () => {
+    const configPath = path.join(__dirname, '..', 'server', 'config', 'config.yaml');
+
+    try {
+      const content = fs.readFileSync(configPath, 'utf8');
+
+      const { filePath } = await dialog.showSaveDialog(mainWindow, {
+        title: 'Exporter la configuration',
+        defaultPath: 'config.yaml',
+        filters: [{ name: 'YAML', extensions: ['yaml', 'yml'] }]
+      });
+
+      if (!filePath) return { success: false, cancelled: true };
+
+      fs.writeFileSync(filePath, content, 'utf8');
+      return { success: true, filePath };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  });
+
+  ipcMain.handle('config:import', async () => {
+    const { filePaths } = await dialog.showOpenDialog(mainWindow, {
+      title: 'Importer une configuration',
+      filters: [{ name: 'YAML', extensions: ['yaml', 'yml'] }],
+      properties: ['openFile']
+    });
+
+    if (!filePaths || filePaths.length === 0) return { success: false, cancelled: true };
+
+    try {
+      const content = fs.readFileSync(filePaths[0], 'utf8');
+      const configPath = path.join(__dirname, '..', 'server', 'config', 'config.yaml');
+
+      // Backup de l'ancienne config avant remplacement
+      if (fs.existsSync(configPath)) {
+        fs.copyFileSync(configPath, configPath + '.bak');
+      }
+
+      fs.writeFileSync(configPath, content, 'utf8');
+      return { success: true };
+    } catch (error) {
+      return { success: false, error: error.message };
+    }
+  });
+
   // Créer fenêtre
   createWindow();
   createTray();

electron/package.json

@@ -55,6 +55,7 @@
   },
   "dependencies": {
     "electron-store": "^8.1.0",
-    "qrcode": "^1.5.4"
+    "qrcode": "^1.5.4",
+    "yaml": "^2.9.0"
   }
 }

electron/preload.js

@@ -5,8 +5,16 @@
 
 const { contextBridge, ipcRenderer } = require('electron');
 
+// Même logique que dans main.js : doit rester synchronisé avec SERVER_URL
+// (127.0.0.1 : le serveur n'écoute qu'en IPv4, voir le commentaire dans main.js)
+const SERVER_PORT = process.env.PORT || 3000;
+const ENABLE_HTTPS = process.env.ENABLE_HTTPS !== 'false';
+const SERVER_URL = `${ENABLE_HTTPS ? 'https' : 'http'}://127.0.0.1:${SERVER_PORT}`;
+
 // Exposer l'API au renderer de manière sécurisée
 contextBridge.exposeInMainWorld('electronAPI', {
+  serverUrl: SERVER_URL,
+
   // Contrôle serveur
   server: {
     start: () => ipcRenderer.invoke('server:start'),
@@ -23,6 +31,26 @@ contextBridge.exposeInMainWorld('electronAPI', {
     }
   },
 
+  // QR Code (généré côté Main Process, pas de dépendance CDN)
+  generateQRCode: (text) => ipcRenderer.invoke('qrcode:generate', text),
+
+  // IP réseau locale (même détection que pour les certificats mkcert)
+  getNetworkIP: () => ipcRenderer.invoke('network:ip'),
+
+  // Export/import configuration YAML via dialog système
+  config: {
+    export: () => ipcRenderer.invoke('config:export'),
+    import: () => ipcRenderer.invoke('config:import')
+  },
+
+  // Groupes : lecture/écriture YAML directe (fonctionne sans serveur)
+  groups: {
+    list: () => ipcRenderer.invoke('groups:list'),
+    create: (data) => ipcRenderer.invoke('groups:create', data),
+    update: (data) => ipcRenderer.invoke('groups:update', data),
+    delete: (data) => ipcRenderer.invoke('groups:delete', data)
+  },
+
   // Helpers
   platform: process.platform,
   version: process.env.npm_package_version || '0.3.0'

electron/ui/app.js

@@ -2,12 +2,23 @@
  * PTT Live Desktop - Renderer Process Logic
  */
 
-const API_BASE = 'http://localhost:3000';
+const API_BASE = window.electronAPI?.serverUrl || 'http://localhost:3000';
 
 // État global
 let serverRunning = false;
 let statsInterval = null;
 let logsBuffer = [];
+let audioLevelsWS = null;
+let audioLevelsData = {
+  inputs: {},
+  groups: {},
+  outputs: {},
+  routing: {
+    activeInputs: [],
+    activeGroups: [],
+    activeOutputs: []
+  }
+};
 
 // ========== Initialisation ==========
 
@@ -167,6 +178,9 @@ function updateServerStatus(running) {
     // Démarrer le polling
     startStatsPolling();
 
+    // Connecter WebSocket audio levels
+    connectAudioLevelsWS();
+
     // Charger les données initiales
     loadInitialData();
   } else {
@@ -177,6 +191,13 @@ function updateServerStatus(running) {
 
     // Arrêter le polling
     stopStatsPolling();
+
+    // Déconnecter WebSocket audio levels
+    disconnectAudioLevelsWS();
+
+    // QR code obsolète tant que le serveur est arrêté : revenir au placeholder
+    document.getElementById('qr-code').removeAttribute('src');
+    document.getElementById('client-url').textContent = '--';
   }
 }
 
@@ -281,28 +302,125 @@ async function fetchDevices() {
 }
 
 async function fetchGroups() {
-  const data = await apiCall('/admin/groups');
-  if (!data) return;
-
   const container = document.getElementById('groups-list');
 
+  // Lecture directe depuis config.yaml via IPC (fonctionne sans serveur)
+  const data = await window.electronAPI.groups.list();
+
   if (!data.groups || data.groups.length === 0) {
     container.innerHTML = '<p class="empty-state">Aucun groupe configuré</p>';
     return;
   }
 
-  container.innerHTML = data.groups.map(group => `
+  const serverNote = serverRunning ? '' : '<p class="config-note" style="margin-bottom:1rem">Serveur arrêté — les modifications seront appliquées au prochain démarrage.</p>';
+
+  container.innerHTML = serverNote + data.groups.map(group => {
+    const id = slugify(group.name);
+    return `
     <div class="group-item">
       <div class="group-info">
-        <h4>${group.name}</h4>
-        <p>Bitrate: ${group.audioBitrate || 96} kbps • ID: ${group.id}</p>
+        <h4>${escapeHtml(group.name)}</h4>
+        <p>Bitrate: ${group.audioBitrate || 96} kbps • ID: ${escapeHtml(id)}</p>
       </div>
       <div class="group-actions">
-        <button class="btn btn-small btn-secondary">Modifier</button>
-        <button class="btn btn-small btn-secondary">Supprimer</button>
+        <button class="btn btn-small btn-secondary"
+          data-action="edit"
+          data-id="${escapeHtml(id)}"
+          data-name="${escapeHtml(group.name)}"
+          data-bitrate="${group.audioBitrate || 96}">Modifier</button>
+        <button class="btn btn-small btn-danger"
+          data-action="delete"
+          data-id="${escapeHtml(id)}"
+          data-name="${escapeHtml(group.name)}">Supprimer</button>
       </div>
     </div>
-  `).join('');
+  `;
+  }).join('');
+}
+
+async function editGroup(id, currentName, currentBitrate) {
+  const result = await showModal({
+    title: 'Modifier le groupe',
+    fields: [
+      { name: 'name', label: 'Nom', default: currentName },
+      { name: 'bitrate', label: 'Bitrate (kbps)', type: 'number', default: currentBitrate, min: 32, max: 320, step: 1 }
+    ],
+    confirmLabel: 'Modifier'
+  });
+
+  if (!result) return;
+
+  const newName = result.name.trim();
+  const newBitrate = parseInt(result.bitrate);
+
+  if (!newName) { showNotification('Nom requis', 'error'); return; }
+  if (isNaN(newBitrate) || newBitrate < 32 || newBitrate > 320) {
+    showNotification('Bitrate invalide (32-320 kbps)', 'error');
+    return;
+  }
+
+  try {
+    let ok, errorMsg;
+
+    if (serverRunning) {
+      const response = await fetch(`${API_BASE}/admin/groups/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: newName, audioBitrate: newBitrate })
+      });
+      ok = response.ok;
+      if (!ok) errorMsg = (await response.json().catch(() => ({}))).error;
+    } else {
+      const res = await window.electronAPI.groups.update({ id, name: newName, audioBitrate: newBitrate });
+      ok = res.success;
+      errorMsg = res.error;
+    }
+
+    if (ok) {
+      showNotification('Groupe modifié', 'success');
+      await fetchGroups();
+    } else {
+      showNotification('Erreur: ' + (errorMsg || 'Modification échouée'), 'error');
+    }
+  } catch (error) {
+    console.error('Erreur edit group:', error);
+    showNotification('Erreur réseau', 'error');
+  }
+}
+
+async function deleteGroup(id, name) {
+  const confirmed = await showModal({
+    title: 'Supprimer le groupe',
+    message: `Supprimer le groupe "${name}" ? Cette action est irréversible.`,
+    confirmLabel: 'Supprimer',
+    confirmClass: 'btn-danger'
+  });
+
+  if (!confirmed) return;
+
+  try {
+    let ok, errorMsg;
+
+    if (serverRunning) {
+      const response = await fetch(`${API_BASE}/admin/groups/${id}`, { method: 'DELETE' });
+      ok = response.ok;
+      if (!ok) errorMsg = (await response.json().catch(() => ({}))).error;
+    } else {
+      const res = await window.electronAPI.groups.delete({ id });
+      ok = res.success;
+      errorMsg = res.error;
+    }
+
+    if (ok) {
+      showNotification('Groupe supprimé', 'success');
+      await fetchGroups();
+    } else {
+      showNotification('Erreur: ' + (errorMsg || 'Suppression échouée'), 'error');
+    }
+  } catch (error) {
+    console.error('Erreur delete group:', error);
+    showNotification('Erreur réseau', 'error');
+  }
 }
 
 async function fetchConfig() {
@@ -345,31 +463,29 @@ async function generateQRCode() {
 
     // Détecter l'IP réseau (depuis hostname ou config)
     const networkIP = await getNetworkIP();
-    const clientUrl = `https://${networkIP}:5173`; // Mode dev Vite
+    // En prod (Electron), le client buildé est servi par le serveur Express
+    // lui-même (même port que l'API), pas par Vite (port 5173, dev only)
+    // API_BASE pointe sur 127.0.0.1 (loopback, pour le ping interne) :
+    // on ne réutilise que protocole + port, l'IP doit être celle du réseau local
+    const serverOrigin = new URL(API_BASE);
+    const clientUrl = `${serverOrigin.protocol}//${networkIP}:${serverOrigin.port}`;
 
     document.getElementById('client-url').textContent = clientUrl;
 
-    // Générer QR Code
-    const canvas = document.getElementById('qr-code');
-    if (canvas && window.QRCode) {
-      QRCode.toCanvas(canvas, clientUrl, {
-        width: 256,
-        margin: 2,
-        color: {
-          dark: '#000000',
-          light: '#ffffff'
-        }
-      }, (error) => {
-        if (error) {
-          console.error('Erreur génération QR Code:', error);
-        } else {
+    // Générer QR Code (rendu côté Main Process, pas de dépendance réseau/CDN)
+    const img = document.getElementById('qr-code');
+    if (img) {
+      const result = await window.electronAPI.generateQRCode(clientUrl);
+      if (result.success) {
+        img.src = result.dataUrl;
         console.log('✅ QR Code généré');
+      } else {
+        console.error('Erreur génération QR Code:', result.error);
       }
-      });
     }
   } catch (error) {
     console.error('Erreur récupération URL:', error);
-    document.getElementById('client-url').textContent = 'https://localhost:5173';
+    document.getElementById('client-url').textContent = API_BASE;
   }
 
   // Bouton copier URL (setup une seule fois)
@@ -385,15 +501,12 @@ async function generateQRCode() {
 }
 
 async function getNetworkIP() {
-  // Méthode 1 : depuis l'API serveur (qui détecte déjà l'IP)
+  // Détection via le Main Process (même logique que pour les certs mkcert) :
+  // /admin/config renvoie la valeur YAML brute ("AUTO"), jamais l'IP résolue,
+  // donc inutilisable ici.
   try {
-    const config = await apiCall('/admin/config');
-    if (config && config.server && config.server.livekit && config.server.livekit.url) {
-      const url = config.server.livekit.url;
-      // Extraire l'IP depuis ws://IP:7880
-      const match = url.match(/ws:\/\/([^:]+):/);
-      if (match) return match[1];
-    }
+    const ip = await window.electronAPI.getNetworkIP();
+    if (ip) return ip;
   } catch (error) {
     console.error('Erreur détection IP:', error);
   }
@@ -459,6 +572,12 @@ async function loadInitialData() {
 }
 
 async function loadViewData(view) {
+  // Les groupes sont lisibles même sans serveur (config.yaml direct)
+  if (view === 'groups') {
+    await fetchGroups();
+    return;
+  }
+
   if (!serverRunning) return;
 
   switch (view) {
@@ -471,11 +590,8 @@ async function loadViewData(view) {
       await fetchDevices();
       await fetchConfig();
       break;
-    case 'groups':
-      await fetchGroups();
-      break;
     case 'monitoring':
-      // TODO: charger VU-mètres WebSocket
+      renderVUMeters();
       break;
     case 'logs':
       renderLogs();
@@ -543,21 +659,42 @@ document.addEventListener('DOMContentLoaded', () => {
   const btnAddGroup = document.getElementById('btn-add-group');
   if (btnAddGroup) {
     btnAddGroup.addEventListener('click', async () => {
-      const name = prompt('Nom du groupe:');
-      if (!name) return;
+      const result = await showModal({
+        title: 'Nouveau groupe',
+        fields: [
+          { name: 'name', label: 'Nom du groupe' },
+          { name: 'bitrate', label: 'Bitrate (kbps)', type: 'number', default: 96, min: 32, max: 320, step: 1 }
+        ],
+        confirmLabel: 'Créer'
+      });
+
+      if (!result || !result.name.trim()) return;
+
+      const name = result.name.trim();
+      const audioBitrate = parseInt(result.bitrate) || 96;
 
       try {
+        let ok, errorMsg;
+
+        if (serverRunning) {
           const response = await fetch(`${API_BASE}/admin/groups`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ name, audioBitrate: 96 })
+            body: JSON.stringify({ name, audioBitrate })
           });
+          ok = response.ok;
+          if (!ok) errorMsg = (await response.json().catch(() => ({}))).error;
+        } else {
+          const res = await window.electronAPI.groups.create({ name, audioBitrate });
+          ok = res.success;
+          errorMsg = res.error;
+        }
 
-        if (response.ok) {
+        if (ok) {
           showNotification('Groupe créé', 'success');
           await fetchGroups();
         } else {
-          showNotification('Erreur création groupe', 'error');
+          showNotification('Erreur: ' + (errorMsg || 'Création échouée'), 'error');
         }
       } catch (error) {
         console.error('Erreur add group:', error);
@@ -565,10 +702,167 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     });
   }
+
+  // Exporter config.yaml
+  const btnExportConfig = document.getElementById('btn-export-config');
+  if (btnExportConfig) {
+    btnExportConfig.addEventListener('click', async () => {
+      const result = await window.electronAPI.config.export();
+      if (result.success) {
+        showNotification('Configuration exportée', 'success');
+      } else if (!result.cancelled) {
+        showNotification('Erreur export: ' + (result.error || 'Échec'), 'error');
+      }
+    });
+  }
+
+  // Importer config.yaml
+  const btnImportConfig = document.getElementById('btn-import-config');
+  if (btnImportConfig) {
+    btnImportConfig.addEventListener('click', async () => {
+      const result = await window.electronAPI.config.import();
+      if (result.success) {
+        showNotification('Configuration importée - Redémarrez le serveur pour appliquer', 'warning');
+        if (serverRunning) {
+          await fetchConfig();
+        }
+      } else if (!result.cancelled) {
+        showNotification('Erreur import: ' + (result.error || 'Échec'), 'error');
+      }
+    });
+  }
+
+  // Exporter les logs
+  const btnExportLogs = document.getElementById('btn-export-logs');
+  if (btnExportLogs) {
+    btnExportLogs.addEventListener('click', () => {
+      const levelFilter = document.getElementById('log-level-filter').value;
+      const logs = levelFilter ? logsBuffer.filter(l => l.level === levelFilter) : logsBuffer;
+
+      if (logs.length === 0) {
+        showNotification('Aucun log à exporter', 'info');
+        return;
+      }
+
+      const content = JSON.stringify(logs, null, 2);
+      const blob = new Blob([content], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `ptt-live-logs-${new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-')}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      showNotification(`${logs.length} logs exportés`, 'success');
+    });
+  }
+
+  // Délégation d'événements pour modifier/supprimer un groupe
+  const groupsList = document.getElementById('groups-list');
+  if (groupsList) {
+    groupsList.addEventListener('click', async (e) => {
+      const btn = e.target.closest('[data-action]');
+      if (!btn) return;
+
+      const action = btn.dataset.action;
+      const id = btn.dataset.id;
+      const name = btn.dataset.name;
+
+      if (action === 'edit') {
+        await editGroup(id, name, parseInt(btn.dataset.bitrate));
+      } else if (action === 'delete') {
+        await deleteGroup(id, name);
+      }
+    });
+  }
 });
 
 // ========== Helpers ==========
 
+/**
+ * Modal générique (remplace prompt/confirm, non supportés dans Electron).
+ * - fields[] → formulaire ; message → confirmation simple
+ * Retourne : objet {champ: valeur} | true (confirm) | null (annulé)
+ */
+function showModal({ title, fields = [], confirmLabel = 'Confirmer', confirmClass = 'btn-primary', message = null }) {
+  return new Promise((resolve) => {
+    const overlay = document.getElementById('modal-overlay');
+    const titleEl = document.getElementById('modal-title');
+    const bodyEl = document.getElementById('modal-body');
+    const cancelBtn = document.getElementById('modal-cancel');
+    const confirmBtn = document.getElementById('modal-confirm');
+
+    titleEl.textContent = title;
+    confirmBtn.textContent = confirmLabel;
+    confirmBtn.className = `btn ${confirmClass}`;
+
+    if (message) {
+      bodyEl.innerHTML = `<p class="modal-message">${escapeHtml(message)}</p>`;
+    } else {
+      bodyEl.innerHTML = fields.map(field => `
+        <div class="form-group">
+          <label>${escapeHtml(field.label)}</label>
+          <input
+            type="${field.type || 'text'}"
+            id="modal-field-${field.name}"
+            class="form-control"
+            value="${escapeHtml(String(field.default ?? ''))}"
+            ${field.min !== undefined ? `min="${field.min}"` : ''}
+            ${field.max !== undefined ? `max="${field.max}"` : ''}
+            ${field.step !== undefined ? `step="${field.step}"` : ''}>
+        </div>
+      `).join('');
+    }
+
+    overlay.classList.remove('hidden');
+
+    const firstInput = bodyEl.querySelector('input');
+    if (firstInput) { firstInput.focus(); firstInput.select(); }
+
+    function cleanup() {
+      overlay.classList.add('hidden');
+      cancelBtn.removeEventListener('click', onCancel);
+      confirmBtn.removeEventListener('click', onConfirm);
+      overlay.removeEventListener('click', onOverlayClick);
+      document.removeEventListener('keydown', onKeydown);
+    }
+
+    function onCancel() { cleanup(); resolve(null); }
+
+    function onConfirm() {
+      if (message) {
+        cleanup(); resolve(true);
+      } else {
+        const result = {};
+        fields.forEach(f => {
+          const input = document.getElementById(`modal-field-${f.name}`);
+          result[f.name] = input ? input.value : '';
+        });
+        cleanup(); resolve(result);
+      }
+    }
+
+    function onOverlayClick(e) { if (e.target === overlay) onCancel(); }
+    function onKeydown(e) {
+      if (e.key === 'Escape') onCancel();
+      if (e.key === 'Enter' && document.activeElement?.tagName !== 'BUTTON') onConfirm();
+    }
+
+    cancelBtn.addEventListener('click', onCancel);
+    confirmBtn.addEventListener('click', onConfirm);
+    overlay.addEventListener('click', onOverlayClick);
+    document.addEventListener('keydown', onKeydown);
+  });
+}
+
+function slugify(text) {
+  return text.toString().normalize('NFD').replace(/[̀-ͯ]/g, '')
+    .toLowerCase().trim().replace(/\s+/g, '-').replace(/[^\w-]+/g, '').replace(/--+/g, '-');
+}
+
 function formatUptime(seconds) {
   if (!seconds) return '--';
 
@@ -579,6 +873,176 @@ function formatUptime(seconds) {
   return `${h}h ${m}m ${s}s`;
 }
 
+// ========== WebSocket Audio Levels ==========
+
+function connectAudioLevelsWS() {
+  if (audioLevelsWS && audioLevelsWS.readyState === WebSocket.OPEN) {
+    console.log('WebSocket audio-levels déjà connecté');
+    return;
+  }
+
+  const wsUrl = API_BASE.replace(/^http/, 'ws') + '/audio-levels';
+  console.log('Connexion WebSocket audio-levels...', wsUrl);
+
+  try {
+    audioLevelsWS = new WebSocket(wsUrl);
+
+    audioLevelsWS.onopen = () => {
+      console.log('WebSocket audio-levels connecté');
+      updateVUMetersStatus('Connecté');
+    };
+
+    audioLevelsWS.onmessage = (event) => {
+      try {
+        const message = JSON.parse(event.data);
+
+        switch (message.type) {
+          case 'initial':
+          case 'levels':
+            audioLevelsData = message.data;
+            renderVUMeters();
+            break;
+
+          case 'pong':
+            break;
+
+          default:
+            console.warn('Message WebSocket inconnu:', message.type);
+        }
+      } catch (error) {
+        console.error('Erreur parsing message WebSocket:', error);
+      }
+    };
+
+    audioLevelsWS.onerror = (error) => {
+      console.error('Erreur WebSocket audio-levels:', error);
+      updateVUMetersStatus('Erreur de connexion');
+    };
+
+    audioLevelsWS.onclose = () => {
+      console.log('WebSocket audio-levels déconnecté');
+      audioLevelsWS = null;
+      updateVUMetersStatus('Déconnecté');
+
+      // Reconnexion automatique si serveur actif
+      if (serverRunning) {
+        setTimeout(() => {
+          connectAudioLevelsWS();
+        }, 3000);
+      }
+    };
+
+    // Ping périodique
+    const pingInterval = setInterval(() => {
+      if (audioLevelsWS && audioLevelsWS.readyState === WebSocket.OPEN) {
+        audioLevelsWS.send(JSON.stringify({ type: 'ping' }));
+      } else {
+        clearInterval(pingInterval);
+      }
+    }, 10000);
+
+  } catch (error) {
+    console.error('Erreur création WebSocket:', error);
+    updateVUMetersStatus('Erreur de connexion');
+  }
+}
+
+function disconnectAudioLevelsWS() {
+  if (audioLevelsWS) {
+    audioLevelsWS.close();
+    audioLevelsWS = null;
+  }
+}
+
+function updateVUMetersStatus(status) {
+  const container = document.getElementById('vu-meters');
+  if (!container) return;
+
+  const statusEl = container.querySelector('.vu-status');
+  if (statusEl) {
+    statusEl.textContent = `WebSocket: ${status}`;
+    statusEl.className = `vu-status ${status === 'Connecté' ? 'connected' : 'disconnected'}`;
+  }
+}
+
+function renderVUMeters() {
+  const container = document.getElementById('vu-meters');
+  if (!container) return;
+
+  const hasData =
+    Object.keys(audioLevelsData.inputs).length > 0 ||
+    Object.keys(audioLevelsData.groups).length > 0 ||
+    Object.keys(audioLevelsData.outputs).length > 0;
+
+  if (!hasData) {
+    container.innerHTML = `
+      <p class="vu-status">WebSocket: En attente de connexion...</p>
+      <p class="empty-state">Aucune donnée audio disponible</p>
+    `;
+    return;
+  }
+
+  let html = '<div class="vu-status connected">WebSocket: Connecté</div>';
+
+  // Inputs
+  if (Object.keys(audioLevelsData.inputs).length > 0) {
+    html += '<div class="vu-section"><h4>Entrées Audio</h4><div class="vu-grid">';
+    Object.entries(audioLevelsData.inputs).forEach(([channelId, data]) => {
+      html += renderVUMeter(channelId, data, 'input');
+    });
+    html += '</div></div>';
+  }
+
+  // Groups
+  if (Object.keys(audioLevelsData.groups).length > 0) {
+    html += '<div class="vu-section"><h4>Groupes</h4><div class="vu-grid">';
+    Object.entries(audioLevelsData.groups).forEach(([groupName, data]) => {
+      html += renderVUMeter(groupName, data, 'group');
+    });
+    html += '</div></div>';
+  }
+
+  // Outputs
+  if (Object.keys(audioLevelsData.outputs).length > 0) {
+    html += '<div class="vu-section"><h4>Sorties Audio</h4><div class="vu-grid">';
+    Object.entries(audioLevelsData.outputs).forEach(([channelId, data]) => {
+      html += renderVUMeter(channelId, data, 'output');
+    });
+    html += '</div></div>';
+  }
+
+  container.innerHTML = html;
+}
+
+function renderVUMeter(label, data, type) {
+  const { rms, peak, clipping } = data;
+
+  // Convertir dBFS en pourcentage pour la barre (0dB = 100%, -60dB = 0%)
+  const rmsPercent = Math.max(0, Math.min(100, ((rms + 60) / 60) * 100));
+  const peakPercent = Math.max(0, Math.min(100, ((peak * 60 - 60 + 60) / 60) * 100));
+
+  // Couleur selon le niveau
+  let barClass = 'vu-bar-green';
+  if (rms > -6) barClass = 'vu-bar-red';
+  else if (rms > -12) barClass = 'vu-bar-yellow';
+
+  const clippingClass = clipping ? 'vu-meter-clipping' : '';
+
+  return `
+    <div class="vu-meter ${clippingClass}">
+      <div class="vu-label">${escapeHtml(label)}</div>
+      <div class="vu-bar-container">
+        <div class="vu-bar ${barClass}" style="width: ${rmsPercent}%"></div>
+        <div class="vu-peak" style="left: ${peakPercent}%"></div>
+      </div>
+      <div class="vu-values">
+        <span class="vu-rms">${rms.toFixed(1)} dB</span>
+        ${clipping ? '<span class="vu-clip">CLIP!</span>' : ''}
+      </div>
+    </div>
+  `;
+}
+
 function formatTime(isoString) {
   if (!isoString) return '--';
   const date = new Date(isoString);

electron/ui/index.html

@@ -78,7 +78,13 @@
           <div class="section">
             <h3>📱 Connexion rapide clients</h3>
             <div class="qr-container">
-              <canvas id="qr-code" width="256" height="256"></canvas>
+              <div class="qr-wrapper">
+                <img id="qr-code" width="256" height="256" alt="QR Code connexion" />
+                <div class="qr-placeholder" id="qr-placeholder">
+                  <span class="qr-placeholder-icon">📷</span>
+                  <span>En attente du démarrage du serveur</span>
+                </div>
+              </div>
               <div class="qr-info">
                 <p><strong>URL clients :</strong></p>
                 <p class="url-text" id="client-url">--</p>
@@ -117,6 +123,15 @@
             <button class="btn btn-primary" id="btn-save-device">Appliquer</button>
           </div>
 
+          <div class="section">
+            <h3>💾 Sauvegarde de configuration</h3>
+            <div class="config-actions">
+              <button class="btn btn-secondary" id="btn-export-config">Exporter config.yaml</button>
+              <button class="btn btn-secondary" id="btn-import-config">Importer config.yaml</button>
+            </div>
+            <p class="config-note">L'import remplace config.yaml (backup automatique en .bak). Redémarrez le serveur pour appliquer.</p>
+          </div>
+
           <div class="section">
             <h3>🎚️ Paramètres Audio</h3>
             <div class="form-group">
@@ -164,6 +179,7 @@
           <h2>Logs Serveur</h2>
           <div class="logs-controls">
             <button class="btn btn-small" id="btn-clear-logs">Effacer</button>
+            <button class="btn btn-small btn-secondary" id="btn-export-logs">Exporter JSON</button>
             <select id="log-level-filter" class="form-control form-control-small">
               <option value="">Tous les niveaux</option>
               <option value="error">Erreurs</option>
@@ -180,8 +196,21 @@
     </main>
   </div>
 
-  <!-- QR Code Library -->
-  <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
+  <!-- Modal générique -->
+  <div id="modal-overlay" class="modal-overlay hidden">
+    <div class="modal">
+      <div class="modal-header">
+        <h3 id="modal-title"></h3>
+      </div>
+      <div class="modal-body" id="modal-body"></div>
+      <div class="modal-footer">
+        <button class="btn btn-secondary" id="modal-cancel">Annuler</button>
+        <button class="btn btn-primary" id="modal-confirm">Confirmer</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Le QR Code est généré côté Main Process (lib qrcode Node), pas de dépendance CDN -->
   <script src="app.js"></script>
 </body>
 </html>

electron/ui/qrcode.min.js

@@ -1,2 +0,0 @@
-// Placeholder - QR Code sera généré via CDN
-// En production, utiliser une lib locale ou CDN

electron/ui/styles.css

@@ -121,6 +121,15 @@ body {
   font-size: 0.8125rem;
 }
 
+.btn-danger {
+  background: var(--accent-error);
+  color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: #d32f2f;
+}
+
 /* Main Content */
 .main-content {
   display: flex;
@@ -230,11 +239,51 @@ body {
   align-items: center;
 }
 
+.qr-wrapper {
+  position: relative;
+  width: 256px;
+  height: 256px;
+  flex-shrink: 0;
+}
+
 #qr-code {
+  display: none;
+  width: 256px;
+  height: 256px;
   border: 4px solid white;
   border-radius: 8px;
 }
 
+/* L'image n'a un attribut src qu'une fois le QR code généré */
+#qr-code[src] {
+  display: block;
+}
+
+#qr-code[src] ~ .qr-placeholder {
+  display: none;
+}
+
+.qr-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  height: 100%;
+  border: 2px dashed var(--border-color);
+  border-radius: 8px;
+  color: var(--text-secondary);
+  text-align: center;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.qr-placeholder-icon {
+  font-size: 2.5rem;
+  opacity: 0.5;
+}
+
 .qr-info {
   flex: 1;
 }
@@ -330,6 +379,70 @@ body {
   border-color: var(--accent-primary);
 }
 
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+
+.modal-overlay.hidden {
+  display: none;
+}
+
+.modal {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  width: 420px;
+  max-width: 90vw;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.modal-header h3 {
+  font-size: 1.125rem;
+  margin: 0;
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.modal-message {
+  color: var(--text-primary);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.modal-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+/* Config actions */
+.config-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.config-note {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+
 /* Groups List */
 .groups-list {
   display: flex;
@@ -554,3 +667,136 @@ body {
     opacity: 1;
   }
 }
+
+/* VU Meters */
+.vu-meters {
+  padding: 1rem 0;
+}
+
+.vu-status {
+  font-size: 0.875rem;
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+  border-radius: 4px;
+  background: var(--bg-tertiary);
+  text-align: center;
+}
+
+.vu-status.connected {
+  background: rgba(76, 175, 80, 0.2);
+  color: var(--accent-success);
+}
+
+.vu-status.disconnected {
+  background: rgba(244, 67, 54, 0.2);
+  color: var(--accent-error);
+}
+
+.vu-section {
+  margin-bottom: 2rem;
+}
+
+.vu-section h4 {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.vu-grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.vu-meter {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 0.75rem;
+  transition: border-color 0.2s;
+}
+
+.vu-meter-clipping {
+  border-color: var(--accent-error);
+  animation: pulseClipping 0.5s ease-in-out infinite;
+}
+
+@keyframes pulseClipping {
+  0%, 100% {
+    border-color: var(--accent-error);
+  }
+  50% {
+    border-color: transparent;
+  }
+}
+
+.vu-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: var(--text-primary);
+}
+
+.vu-bar-container {
+  position: relative;
+  height: 24px;
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+}
+
+.vu-bar {
+  height: 100%;
+  transition: width 0.05s linear;
+  border-radius: 3px;
+}
+
+.vu-bar-green {
+  background: linear-gradient(to right, #4caf50, #66bb6a);
+}
+
+.vu-bar-yellow {
+  background: linear-gradient(to right, #ff9800, #ffa726);
+}
+
+.vu-bar-red {
+  background: linear-gradient(to right, #f44336, #e57373);
+}
+
+.vu-peak {
+  position: absolute;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  background: #ffffff;
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
+  transition: left 0.1s linear;
+}
+
+.vu-values {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.75rem;
+}
+
+.vu-rms {
+  color: var(--text-secondary);
+}
+
+.vu-clip {
+  color: var(--accent-error);
+  font-weight: bold;
+  animation: blinkClip 0.5s ease-in-out infinite;
+}
+
+@keyframes blinkClip {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}

server/config/config.yaml

@@ -2,7 +2,7 @@ audio:
   sampleRate: 48000
   channels: 2
   frameSize: 20
-  defaultBitrate: 96
+  defaultBitrate: 128
   jitterBufferMs: 40
   device:
     inputDeviceId: Loopback Audio 4

server/index.js

@@ -16,6 +16,7 @@ import configManager from './config/ConfigManager.js';
 import audioBridgeManager from './bridge/AudioBridgeManager.js';
 import AudioLevelsServer from './websocket/AudioLevelsServer.js';
 import { setGlobalLogLevel } from './utils/Logger.js';
+import httpProxy from 'http-proxy';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -378,6 +379,33 @@ apiRouter.get('/health', (req, res) => {
   });
 });
 
+// Créer proxy WebSocket natif pour LiveKit (wss → ws)
+const livekitProxy = httpProxy.createProxyServer({
+  target: 'http://localhost:7880',
+  ws: true,
+  changeOrigin: true
+});
+
+livekitProxy.on('error', (err, req, res) => {
+  log('error', `❌ Erreur proxy LiveKit: ${err.message}`);
+  if (res && res.writeHead) {
+    res.writeHead(502, { 'Content-Type': 'text/plain' });
+    res.end('Proxy error');
+  }
+});
+
+livekitProxy.on('proxyReqWs', (proxyReq, req, socket, options, head) => {
+  log('debug', `🔀 Proxy WebSocket: ${req.url} → ws://localhost:7880`);
+});
+
+// Proxy HTTP pour LiveKit (requêtes REST comme /rtc/validate)
+app.use('/livekit', (req, res) => {
+  log('debug', `🔀 Proxy HTTP: ${req.originalUrl} → http://localhost:7880${req.url}`);
+  livekitProxy.web(req, res, {
+    target: 'http://localhost:7880'
+  });
+});
+
 // Monter le router API sous /api ET à la racine (rétrocompatibilité)
 app.use('/api', apiRouter);
 app.use(apiRouter); // Routes accessibles aussi sans préfixe /api
@@ -493,8 +521,25 @@ async function start() {
     }
 
     // 2.5 Démarrer WebSocket Audio Levels (même port que l'API)
+    // noServer: true en interne, l'upgrade est dispatché ci-dessous
     const audioLevelsServer = new AudioLevelsServer({ server });
     audioLevelsServer.start();
+
+    // 2.6 Dispatcher unique pour les upgrades WebSocket du port HTTP/HTTPS
+    // (proxy LiveKit et audio-levels partagent le même serveur, donc le même
+    // événement 'upgrade' : un seul listener doit trancher par chemin)
+    server.on('upgrade', (req, socket, head) => {
+      if (req.url.startsWith('/livekit')) {
+        req.url = req.url.replace(/^\/livekit/, '');
+        livekitProxy.ws(req, socket, head);
+      } else if (req.url.startsWith('/audio-levels')) {
+        audioLevelsServer.handleUpgrade(req, socket, head);
+      } else {
+        log('warn', `⚠️  Unknown WebSocket path: ${req.url}`);
+        socket.destroy();
+      }
+    });
+
     const wsProtocol = ENABLE_HTTPS ? 'wss' : 'ws';
     log('info', `✓ WebSocket Audio Levels démarré sur ${wsProtocol}://${SERVER_HOST}:${SERVER_PORT}`);
 

server/package.json

@@ -22,6 +22,8 @@
     "@livekit/rtc-node": "^0.13.28",
     "dotenv": "^17.4.2",
     "express": "^4.19.2",
+    "http-proxy": "^1.18.1",
+    "http-proxy-middleware": "^4.1.1",
     "livekit-server-sdk": "^2.6.0",
     "opusscript": "^0.1.1",
     "qrcode-terminal": "^0.12.0",

server/websocket/AudioLevelsServer.js

@@ -91,9 +91,11 @@ export class AudioLevelsServer extends EventEmitter {
     return new Promise((resolve, reject) => {
       try {
         // Si un serveur HTTP est fourni, utiliser le même port (upgrade HTTP → WebSocket)
+        // noServer: true car l'upgrade est dispatché manuellement par server/index.js
+        // (un seul listener 'upgrade' partagé avec le proxy LiveKit, voir handleUpgrade())
         // Sinon, créer un serveur WebSocket standalone sur son propre port
         const wsOptions = this.options.server
-          ? { server: this.options.server, path: '/audio-levels' }
+          ? { noServer: true }
           : { port: this.options.port };
 
         this.wss = new WebSocketServer(wsOptions);
@@ -125,6 +127,16 @@ export class AudioLevelsServer extends EventEmitter {
     });
   }
 
+  /**
+   * Complète l'upgrade WebSocket pour une requête déjà identifiée comme
+   * ciblant ce serveur (voir le dispatcher 'upgrade' dans server/index.js)
+   */
+  handleUpgrade(req, socket, head) {
+    this.wss.handleUpgrade(req, socket, head, (ws) => {
+      this.wss.emit('connection', ws, req);
+    });
+  }
+
   /**
    * Gère une nouvelle connexion client
    */