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

@@ -8,10 +8,18 @@ pnpm-lock.yaml
 .env
 .env.local
 .env.*.local
+server/.env
+client/.env
+
+# Keep .env.example files (templates)
+!.env.example
+!client/.env.example
+!server/.env.example
 
 # Build outputs
 dist/
 build/
+dev-dist/
 *.log
 
 # OS files
@@ -43,3 +51,10 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+server.log
+
+# Runtime files
+/tmp/ptt-live.pid
+
+# Certificats SSL locaux (mkcert) - contiennent des clés privées
+certs/

CLAUDE.md

@@ -204,24 +204,91 @@ PTT Live/
 ## Commandes de développement
 
 ```bash
-# Installation initiale
-./install/macos.sh
+# Installation automatique (recommandé)
+./install.sh  # Détecte OS, configure tout automatiquement
 
-# Serveur (dev)
+# Démarrage rapide
+
+# Option 1 : Application Desktop (Interface graphique)
+./start-desktop.sh  # Lance l'app Electron avec dashboard
+
+# Option 2 : Mode CLI (deux terminaux)
+./start.sh --dev  # Mode développement
+./start.sh        # Mode production
+
+# OU manuellement (deux terminaux)
+# Serveur
 cd server
 npm install
 npm run dev
 
-# Client (dev)
+# Client
 cd client
 npm install
 npm run dev
-
-# Production
-cd server
-npm start
 ```
 
+## Application Desktop (v0.3.0)
+
+### Interface Electron
+- **Main Process** : spawn serveur Node.js, IPC handlers
+- **Renderer Process** : dashboard HTML/CSS/JS
+- **Communication** : IPC sécurisé (contextBridge) + HTTP vers API admin
+
+### Fonctionnalités
+- ✅ **Dashboard** : stats temps réel, utilisateurs, QR Code
+- ✅ **Configuration** : devices audio, sample rate, bitrate, jitter
+- ✅ **Groupes** : CRUD complet via API admin
+- ✅ **Monitoring** : logs filtrables (error/warn/info/debug)
+- ✅ **Notifications** : toast visuelles avec auto-dismiss
+- 🚧 **VU-mètres** : WebSocket audio levels (prévu)
+
+### Structure
+```
+electron/
+├── main.js              # Main Process (spawn serveur)
+├── preload.js           # IPC bridge sécurisé
+├── package.json         # Config Electron + electron-builder
+└── ui/
+    ├── index.html       # Interface dashboard
+    ├── styles.css       # Dark theme
+    └── app.js           # Logic + API calls
+```
+
+### Build & Distribution
+```bash
+cd electron
+npm run build:mac    # → dist/PTT Live Server.dmg
+npm run build:linux  # → dist/PTT Live Server.AppImage
+```
+
+Voir [DESKTOP-APP.md](DESKTOP-APP.md) pour la doc complète.
+
+---
+
+## Fonctionnalités de portabilité (v0.2.1)
+
+### Installation zéro-config
+- **Script multi-OS** : `install.sh` détecte automatiquement macOS/Linux
+- **Auto-détection IP** : Génère les `.env` avec l'IP réseau du serveur
+- **Devices audio** : API `/admin/devices/list` pour énumérer devices disponibles
+- **Templates** : `.env.example` pour serveur et client
+
+### QR Code terminal
+- **Affichage automatique** au démarrage du serveur
+- **Scan rapide** depuis smartphone (connexion en 5s)
+- **URL adaptative** : dev (5173) ou prod (3000) selon build client
+
+### HTTPS automatique
+- **Vite dev server** : HTTPS par défaut (certificat self-signed)
+- **Redirection HTTP → HTTPS** en mode développement
+- **Production** : utiliser reverse proxy (nginx/Caddy) pour HTTPS
+
+### Configuration dynamique
+- **LIVEKIT_URL: AUTO** dans config.yaml → détection IP runtime
+- **Vite loadEnv()** pour variables d'environnement dynamiques
+- **Serveur statique** : Express sert `client/dist/` en production
+
 ## Tests et validation
 
 ### Métriques critiques
@@ -307,7 +374,8 @@ test: description
 2. **Après chaque tâche complétée** :
    - ✅ Valider la tâche dans [TODO.md](TODO.md)
    - 🔄 Commiter avec message descriptif en français
-   - 📝 Mettre à jour CLAUDE.md si nécessaire
+   - 📝 Mettre à jour CLAUDE.md si nécessaire sans écrire "🤖 Generated with Claude Code Co-Authored-By: Claude noreply@anthropic.com"
+   - Ne pas créer de fichiers récapitulatifs markdown.
 
 **Exemple workflow** :
 ```bash
@@ -326,5 +394,5 @@ Voir [TODO.md](TODO.md) pour le plan détaillé.
 
 ---
 
-**Dernière mise à jour** : 2026-05-21
-**Version** : 0.1.0 (Phase 1 en cours)
+**Dernière mise à jour** : 2026-05-27
+**Version** : 0.2.1 (Portable + QR Code)

DESKTOP-APP.md

@@ -0,0 +1,438 @@
+# PTT Live - Application Desktop Server
+
+Application Electron pour gérer le serveur PTT Live avec interface graphique complète.
+
+## 📸 Aperçu
+
+L'application desktop intègre :
+- ✅ **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 temps réel via WebSocket, logs filtrables
+- ✅ **Contrôle serveur** : démarrage manuel/arrêt avec feedback visuel
+
+---
+
+## 🚀 Démarrage Rapide
+
+```bash
+# Depuis la racine du projet
+./start-desktop.sh
+
+# OU manuellement
+cd electron
+npm start
+```
+
+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.
+
+---
+
+## 📦 Installation
+
+Les dépendances sont déjà installées. Si nécessaire :
+
+```bash
+cd electron
+npm install
+```
+
+---
+
+## 🎯 Utilisation
+
+### 1. Dashboard
+
+**Stats temps réel** :
+- Uptime serveur
+- Nombre d'utilisateurs connectés
+- Groupes actifs
+- Total connexions
+
+**QR Code** :
+- 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
+- Groupe de chaque utilisateur
+- Heure de connexion
+
+### 2. Configuration Audio
+
+**Périphériques** :
+- Sélection input/output depuis dropdown auto-détecté
+- Support macOS (CoreAudio), Linux (JACK/PipeWire)
+- Appliquer instantanément (bridge audio rechargé)
+
+**Paramètres** :
+- Sample Rate : 44.1 / 48 / 96 kHz
+- Bitrate par défaut : 32-320 kbps
+- Jitter Buffer : 20-100 ms
+
+### 3. Gestion Groupes
+
+- **Créer** : bouton "➕ Nouveau groupe"
+- **Modifier** : depuis la liste (nom, bitrate)
+- **Supprimer** : confirmation requise
+- Sauvegardé automatiquement dans `config.yaml`
+
+### 4. Monitoring
+
+**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
+
+- Logs serveur en temps réel
+- Filtrage par niveau (error/warn/info/debug)
+- Bouton "Effacer"
+- Format timestamp + niveau + message
+
+---
+
+## 🏗️ Architecture Technique
+
+```
+┌─────────────────────────────────────────────────┐
+│           ELECTRON APP (Desktop)                │
+│                                                 │
+│  ┌───────────────────────────────────────────┐ │
+│  │        MAIN PROCESS (Node.js)             │ │
+│  │                                           │ │
+│  │  • spawn server/index.js                 │ │
+│  │  • IPC handlers (start/stop/status)      │ │
+│  │  • Tray icon (macOS/Linux)               │ │
+│  │  • Logs forwarding → Renderer            │ │
+│  └───────────────────────────────────────────┘ │
+│                    ↕ IPC                       │
+│  ┌───────────────────────────────────────────┐ │
+│  │      RENDERER PROCESS (Frontend)          │ │
+│  │                                           │ │
+│  │  • HTML/CSS/JS (pas de framework)        │ │
+│  │  • Fetch API REST :3000/admin/*          │ │
+│  │  • WebSocket audio levels (live)         │ │
+│  │  • QR Code (data URL via IPC)            │ │
+│  └───────────────────────────────────────────┘ │
+└─────────────────────────────────────────────────┘
+                    ↕ HTTPS (127.0.0.1, certs mkcert)
+┌─────────────────────────────────────────────────┐
+│         SERVEUR PTT LIVE (spawned)              │
+│                                                 │
+│  • LiveKit Server (binaire Go) :7880           │
+│  • Audio Bridge Manager                        │
+│  • 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
+
+L'interface desktop utilise toutes les routes admin existantes :
+
+| Endpoint | Méthode | Usage |
+|----------|---------|-------|
+| `/admin/stats` | GET | Dashboard metrics |
+| `/admin/users` | GET | Liste utilisateurs |
+| `/admin/groups` | GET | Liste groupes |
+| `/admin/groups` | POST | Créer groupe |
+| `/admin/groups/:id` | PUT | Modifier groupe |
+| `/admin/groups/:id` | DELETE | Supprimer groupe |
+| `/admin/config` | GET | Config complète |
+| `/admin/config/audio` | PUT | Mettre à jour audio |
+| `/admin/audio/devices` | GET | Énumérer devices |
+| `/admin/audio/device` | POST | Sélectionner device |
+| `/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 :
+- `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.
+
+---
+
+## 📦 Build pour Distribution
+
+### macOS
+
+```bash
+cd electron
+npm run build:mac
+```
+
+Génère :
+- `dist/mac/PTT Live Server.app`
+- `dist/PTT Live Server-0.3.0.dmg`
+
+### Linux
+
+```bash
+cd electron
+npm run build:linux
+```
+
+Génère :
+- `dist/PTT Live Server-0.3.0.deb`
+- `dist/PTT Live Server-0.3.0.AppImage`
+
+### Tester le build
+
+```bash
+# macOS
+open dist/mac/PTT\ Live\ Server.app
+
+# Linux
+./dist/PTT\ Live\ Server-0.3.0.AppImage
+```
+
+---
+
+## 🎨 Personnalisation
+
+### Icônes
+
+Placer les icônes dans `electron/assets/` :
+
+```
+electron/assets/
+├── icon.icns       # macOS (512x512 minimum)
+├── icon.png        # Linux (512x512)
+└── tray-icon.png   # Tray 22x22 ou 44x44 (retina)
+```
+
+Générer icônes depuis PNG :
+
+```bash
+# macOS .icns
+iconutil -c icns assets/icon.iconset
+
+# Linux .png
+convert icon.png -resize 512x512 assets/icon.png
+```
+
+### Thème
+
+Modifier `electron/ui/styles.css` :
+
+```css
+:root {
+  --bg-primary: #1a1a1a;
+  --accent-primary: #4a9eff;
+  /* ... */
+}
+```
+
+---
+
+## 🐛 Debug
+
+### DevTools
+
+Ouvrir automatiquement en mode dev :
+
+```bash
+cd electron
+npm run dev
+```
+
+Ou manuellement dans `main.js` :
+
+```javascript
+mainWindow.webContents.openDevTools();
+```
+
+### Logs Console
+
+**Main Process** :
+```javascript
+console.log('[Main]', ...); // Terminal qui a lancé npm start
+```
+
+**Renderer Process** :
+```javascript
+console.log('[Renderer]', ...); // DevTools → Console
+```
+
+**Serveur PTT Live** :
+```javascript
+// Transmis au Renderer via IPC
+window.electronAPI.server.onLog((log) => {
+  console.log('[Serveur]', log);
+});
+```
+
+### Erreurs courantes
+
+**Port 3000 déjà utilisé** :
+```bash
+# Tuer le process
+lsof -i :3000
+kill -9 <PID>
+
+# OU changer de port
+PORT=3001 npm start
+```
+
+**Serveur ne démarre pas** :
+- Vérifier que `server/index.js` existe
+- 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 (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
+- [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
+- [x] **Export logs** : bouton télécharger JSON (filtre niveau appliqué)
+- [ ] **Matrice routing** : interface graphique drag & drop
+- [x] **Export & import config** : bouton télécharger YAML et charger config (backup auto .bak)
+
+### Priorité basse
+- [ ] **Thème toggle** : dark/light mode
+- [ ] **Auto-update** : electron-updater pour mises à jour
+
+### Technique
+- [ ] **Tests** : Spectron ou Playwright pour Electron
+- [ ] **CI/CD** : GitHub Actions pour builds automatiques
+- [ ] **Signature code** : macOS notarization + Linux AppImage signature
+
+---
+
+## 📝 Notes de Développement
+
+### Structure Fichiers
+
+```
+electron/
+├── main.js              # Main Process
+│                        # - 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 (QR code reçu via IPC en data URL)
+```
+
+### Communication IPC
+
+**Renderer → Main** :
+
+```javascript
+// Depuis ui/app.js
+const result = await window.electronAPI.server.start();
+```
+
+**Main → Renderer** :
+
+```javascript
+// Depuis main.js
+mainWindow.webContents.send('server:status', { running: true });
+
+// Écouté dans ui/app.js
+window.electronAPI.server.onStatus((data) => {
+  console.log('Status:', data);
+});
+```
+
+### Sécurité
+
+- ✅ **contextIsolation: true** : isole Node.js du renderer
+- ✅ **nodeIntegration: false** : pas d'accès Node direct
+- ✅ **preload.js** : whitelist API exposées via contextBridge
+- ⚠️ **CSP manquant** : ajouter Content-Security-Policy en prod
+
+---
+
+## 🤝 Contribution
+
+L'app desktop est modulaire et extensible :
+
+1. **Ajouter une vue** : créer `<div id="view-xxx">` dans `index.html`
+2. **Ajouter un handler IPC** : `ipcMain.handle()` dans `main.js`
+3. **Exposer au renderer** : `contextBridge.exposeInMainWorld()` dans `preload.js`
+4. **Appeler l'API** : fetch dans `ui/app.js`
+
+---
+
+## 📚 Ressources
+
+- **Electron Docs** : https://www.electronjs.org/docs
+- **electron-builder** : https://www.electron.build
+- **LiveKit Server API** : https://docs.livekit.io
+- **QR Code.js** : https://github.com/soldair/node-qrcode
+
+---
+
+## 📄 Licence
+
+Même licence que PTT Live (MIT)
+
+---
+
+**Version** : 0.3.0
+**Dernière mise à jour** : 2026-06-30

README-PORTABLE.md

@@ -0,0 +1,408 @@
+# PTT Live - Guide de Déploiement Portable
+
+Ce guide explique comment déployer **PTT Live** sur n'importe quelle machine macOS ou Linux, sans configuration manuelle d'IP ou de devices audio.
+
+---
+
+## 🚀 Installation Rapide
+
+### Prérequis
+
+- **macOS** : Homebrew installé ([brew.sh](https://brew.sh))
+- **Linux** : Ubuntu 22.04+, Debian 11+, Arch Linux ou Fedora
+- **Node.js** : Version 20+ (installé automatiquement si absent)
+- **Connexion Internet** : Pour télécharger les dépendances
+
+### Commandes
+
+```bash
+# Cloner ou télécharger le projet
+cd ptt-live
+
+# Lancer l'installation (détection automatique OS)
+./install.sh
+
+# Ou manuellement selon votre système :
+./install/macos.sh   # macOS
+./install/linux.sh   # Linux
+```
+
+### Ce que l'installeur fait automatiquement
+
+✅ Détecte votre système d'exploitation  
+✅ Installe Node.js 20+ (si absent)  
+✅ Installe LiveKit Server (binaire local)  
+✅ Installe les backends audio (sox/PipeWire/JACK)  
+✅ Détecte votre IP réseau locale  
+✅ Génère les fichiers `.env` avec la bonne configuration  
+✅ Installe toutes les dépendances npm  
+
+---
+
+## 🎬 Démarrage
+
+### Méthode 1 : Script unifié (recommandé)
+
+```bash
+# Mode développement (serveur + client avec hot-reload)
+./start.sh --dev
+
+# Mode production (build client + serveur optimisé)
+./start.sh
+```
+
+L'IP réseau est **détectée automatiquement** et affichée au démarrage.
+
+### Méthode 2 : Manuel (deux terminaux)
+
+**Terminal 1 : Serveur**
+```bash
+cd server
+npm run dev
+```
+
+**Terminal 2 : Client**
+```bash
+cd client
+npm run dev
+```
+
+---
+
+## 🌐 Accès depuis d'autres appareils
+
+### Sur le même réseau WiFi
+
+Après le démarrage, notez l'**IP affichée** (exemple : `192.168.1.100`).
+
+#### Depuis un smartphone/tablette
+
+1. **Connectez l'appareil au même WiFi** que le serveur
+2. Ouvrez le navigateur
+3. Allez sur : `https://IP_SERVEUR:5173` (dev) ou `http://IP_SERVEUR:3000` (prod)
+4. **iOS** : Installez la PWA sur l'écran d'accueil pour activer les notifications
+
+#### Depuis un autre ordinateur
+
+Même procédure : `https://IP_SERVEUR:5173`
+
+---
+
+## ⚙️ Configuration Avancée
+
+### Changer l'IP du serveur manuellement
+
+Si l'auto-détection ne fonctionne pas (VPN, Docker, etc.) :
+
+**1. Modifier `server/.env`**
+
+```bash
+# Remplacer AUTO par l'IP voulue
+LIVEKIT_URL=ws://192.168.1.100:7880
+```
+
+**2. Pour le client (accès réseau)**
+
+Modifier `client/.env` :
+
+```bash
+# Décommenter et mettre l'IP du serveur
+VITE_API_URL=http://192.168.1.100:3000
+```
+
+**3. Redémarrer**
+
+```bash
+./start.sh --dev
+```
+
+### Lister les devices audio disponibles
+
+```bash
+# Via API (serveur doit tourner)
+curl http://localhost:3000/admin/devices/list
+
+# Retourne JSON :
+{
+  "inputs": [
+    { "id": 0, "name": "Microphone MacBook Pro" },
+    { "id": 4, "name": "USB Audio Interface" }
+  ],
+  "outputs": [...],
+  "platform": "darwin"
+}
+```
+
+Utilisez ensuite l'interface admin (`/admin`) pour sélectionner les devices.
+
+### Changer les ports
+
+**API serveur (port 3000 par défaut)**
+
+Modifier `server/.env` :
+
+```bash
+PORT=3001
+```
+
+**Client dev (port 5173 par défaut)**
+
+Modifier `client/vite.config.js` :
+
+```javascript
+server: {
+  port: 5174,
+  // ...
+}
+```
+
+---
+
+## 📦 Mode Production (événement en conditions réelles)
+
+### Build optimisé
+
+```bash
+# Build du client statique
+cd client
+npm run build
+
+# Le dossier dist/ contient le build optimisé
+```
+
+### Servir en production
+
+```bash
+# Méthode 1 : Script start.sh (recommandé)
+./start.sh
+
+# Méthode 2 : npm start direct
+cd server
+npm start
+
+# Le serveur Express sert automatiquement client/dist/
+```
+
+### Reverse proxy Nginx (optionnel)
+
+Pour un domaine personnalisé avec HTTPS :
+
+```nginx
+server {
+    listen 443 ssl http2;
+    server_name ptt.example.com;
+
+    ssl_certificate /path/to/cert.pem;
+    ssl_certificate_key /path/to/key.pem;
+
+    # Client PWA
+    location / {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+
+    # WebSocket LiveKit
+    location /livekit {
+        proxy_pass http://localhost:7880;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "Upgrade";
+        proxy_set_header Host $host;
+    }
+}
+```
+
+---
+
+## 🐛 Dépannage
+
+### Erreur "Port déjà utilisé"
+
+**Port 3000 (API)**
+```bash
+# Trouver le processus
+lsof -i :3000
+# Tuer ou changer PORT dans .env
+```
+
+**Port 7880 (LiveKit)**
+```bash
+lsof -i :7880
+# Arrêter LiveKit ou changer dans config.yaml
+```
+
+### IP détectée incorrecte
+
+**Lister toutes les interfaces réseau :**
+
+```bash
+# macOS
+ifconfig | grep "inet "
+
+# Linux
+ip addr show
+```
+
+Puis modifier `server/.env` avec la bonne IP.
+
+### Clients ne peuvent pas se connecter
+
+**1. Vérifier le serveur**
+```bash
+curl http://IP_SERVEUR:3000/health
+```
+
+**2. Vérifier LiveKit**
+```bash
+curl http://IP_SERVEUR:7880
+```
+
+**3. Firewall**
+
+macOS/Linux : autoriser ports 3000, 7880, 7882 (UDP)
+
+```bash
+# macOS
+sudo /usr/libexec/ApplicationFirewall/socketfilterfw --add /path/to/node
+sudo /usr/libexec/ApplicationFirewall/socketfilterfw --unblock /path/to/livekit-server
+
+# Linux (ufw)
+sudo ufw allow 3000/tcp
+sudo ufw allow 7880/tcp
+sudo ufw allow 7882/udp
+```
+
+### Pas d'audio (macOS)
+
+**Permissions microphone :**
+
+1. **Navigateur** : Autoriser le micro dans les préférences Safari/Chrome
+2. **Terminal** : `Réglages Système > Confidentialité > Microphone` → autoriser Terminal
+
+**Carte son externe :**
+
+```bash
+# Lister devices
+curl http://localhost:3000/admin/devices/list
+
+# Sélectionner via interface admin
+open http://localhost:3000/admin
+```
+
+### Pas d'audio (Linux)
+
+**Vérifier PipeWire :**
+
+```bash
+systemctl --user status pipewire
+pw-cli info 0
+```
+
+**Démarrer si inactif :**
+
+```bash
+systemctl --user start pipewire pipewire-pulse
+```
+
+**Lister devices PulseAudio :**
+
+```bash
+pactl list short sources  # Inputs
+pactl list short sinks    # Outputs
+```
+
+---
+
+## 📚 Architecture Portable
+
+### Structure des fichiers de configuration
+
+```
+PTT Live/
+├── server/
+│   ├── .env                 # Généré par install (IP auto)
+│   └── config/
+│       └── config.yaml      # LIVEKIT_URL = AUTO
+├── client/
+│   ├── .env                 # Généré par install
+│   └── .env.example         # Template
+└── install/
+    ├── macos.sh             # Détection IP + génération .env
+    └── linux.sh             # Idem
+```
+
+### Flux de configuration automatique
+
+```
+1. install.sh
+   └─> Détecte OS (macOS/Linux)
+   └─> Lance install/{os}.sh
+       └─> Détecte IP réseau (ifconfig/hostname)
+       └─> Génère server/.env avec LIVEKIT_URL=AUTO
+       └─> Génère client/.env avec IP dans commentaires
+
+2. npm run dev (serveur)
+   └─> Lit server/.env
+   └─> Si LIVEKIT_URL=AUTO → détecte IP au runtime (index.js:75)
+   └─> Lance LiveKit sur 0.0.0.0:7880
+   └─> Retourne ws://IP_DETECTÉE:7880 aux clients via /token
+
+3. Client se connecte
+   └─> Appelle POST /token avec username + groupId
+   └─> Reçoit { token, url: "ws://192.168.x.x:7880" }
+   └─> Se connecte automatiquement à la bonne URL
+```
+
+**Résultat** : **Zéro configuration manuelle** d'IP pour l'utilisateur final.
+
+---
+
+## 🔒 Sécurité en Production
+
+### Bonnes pratiques
+
+1. **Changer les clés LiveKit** (par défaut : `devkey/secret`)
+
+   Modifier `server/.env` :
+   ```bash
+   LIVEKIT_API_KEY=$(openssl rand -hex 32)
+   LIVEKIT_API_SECRET=$(openssl rand -hex 64)
+   ```
+
+2. **Activer HTTPS/WSS** (avec certificats Let's Encrypt ou mkcert)
+
+3. **Firewall strict** : Autoriser seulement les ports nécessaires
+
+4. **Authentification admin** : Ajouter un mot de passe sur `/admin` (Phase 2.3)
+
+5. **VLAN dédié** : Isoler le réseau PTT Live du reste du LAN (événements)
+
+---
+
+## ✨ Fonctionnalités Portables
+
+✅ **Auto-détection IP réseau** (macOS/Linux)  
+✅ **Auto-détection devices audio** (API `/admin/devices/list`)  
+✅ **Génération .env automatique** lors de l'installation  
+✅ **Scripts start.sh multi-OS** (dev/prod)  
+✅ **Configuration dynamique Vite** (loadEnv)  
+✅ **Support JACK, PipeWire, CoreAudio**  
+✅ **PWA installable** (iOS/Android)  
+
+---
+
+## 📖 Documentation Complémentaire
+
+- [README.md](README.md) — Guide utilisateur complet
+- [NETWORK_SETUP.md](NETWORK_SETUP.md) — Configuration réseau détaillée
+- [CLAUDE.md](CLAUDE.md) — Documentation développement
+- [docs/](docs/) — Guides techniques (JACK, Dante, AES67)
+
+---
+
+**Dernière mise à jour** : 2026-05-27  
+**Version** : 0.2.0 (Portable)

README.md

@@ -8,20 +8,68 @@ Communiquez via smartphone (PWA) en WiFi, le serveur fait le pont avec l'install
 
 ## 🚀 Démarrage rapide
 
-### Prérequis
+### 🖥️ Application Desktop (Nouveau !)
 
-- Node.js 20+ ([télécharger](https://nodejs.org))
-- Compte LiveKit Cloud gratuit ([créer ici](https://cloud.livekit.io))
+**Interface graphique complète pour gérer le serveur** :
 
-### Installation (5 minutes)
+```bash
+# Lancer l'application desktop
+./start-desktop.sh
+```
 
-1. **Installer les dépendances**
+✨ **Fonctionnalités** :
+- Dashboard temps réel (stats, utilisateurs)
+- Configuration audio (devices, bitrate)
+- Gestion groupes (CRUD)
+- QR Code pour connexion clients
+- Logs serveur filtrables
+
+📖 **Documentation complète** : [DESKTOP-APP.md](DESKTOP-APP.md)
+
+---
+
+### Installation Automatique (Recommandé)
+
+**Un seul script pour tout installer** (détection automatique macOS/Linux) :
+
+```bash
+# 1. Installer dépendances + LiveKit
+./install.sh
+
+# 2. Configurer certificats SSL locaux (NOUVEAU - requis pour HTTPS)
+./setup-certificates.sh
+
+# 3. Démarrer le système (mode CLI)
+./start.sh --dev
+```
+
+🔐 **Certificats SSL** : Le script `setup-certificates.sh` génère des certificats **automatiquement approuvés** (pas de warnings navigateur). Voir [SSL-SETUP.md](SSL-SETUP.md)
+
+✨ **L'installeur configure automatiquement** :
+- LiveKit Server local (pas besoin de compte cloud)
+- Détection et configuration IP réseau
+- Backends audio (sox/PipeWire/JACK selon OS)
+- Toutes les dépendances
+
+📖 **Guide portable complet** : [README-PORTABLE.md](README-PORTABLE.md)
+
+---
+
+### Installation Manuelle (avec LiveKit Cloud)
+
+**Alternative si vous préférez utiliser LiveKit Cloud**
+
+1. **Prérequis**
+   - Node.js 20+ ([télécharger](https://nodejs.org))
+   - Compte LiveKit Cloud gratuit ([créer ici](https://cloud.livekit.io))
+
+2. **Installer les dépendances**
    ```bash
    cd server && npm install
    cd ../client && npm install
    ```
 
-2. **Configurer LiveKit Cloud**
+3. **Configurer LiveKit Cloud**
 
    - Créer compte sur https://cloud.livekit.io
    - Créer un projet
@@ -35,7 +83,7 @@ Communiquez via smartphone (PWA) en WiFi, le serveur fait le pont avec l'install
    USE_LOCAL_LIVEKIT=false
    ```
 
-3. **Démarrer**
+4. **Démarrer**
 
    Terminal 1 :
    ```bash
@@ -47,13 +95,13 @@ Communiquez via smartphone (PWA) en WiFi, le serveur fait le pont avec l'install
    cd client && npm run dev
    ```
 
-4. **Tester** : http://localhost:5173
+5. **Tester** : https://localhost:5173
 
    - Se connecter avec votre nom
    - Ouvrir second onglet avec autre nom
    - Maintenir bouton PTT pour parler !
 
-📖 **Guide complet** : [docs/SETUP_LIVEKIT.md](docs/SETUP_LIVEKIT.md)
+📖 **Guide LiveKit Cloud** : [docs/SETUP_LIVEKIT.md](docs/SETUP_LIVEKIT.md)
 
 ---
 
@@ -84,6 +132,8 @@ Voir le guide complet : [docs/SETUP_LIVEKIT.md](docs/SETUP_LIVEKIT.md)
 
 ## 📚 Documentation
 
+- **[README-PORTABLE.md](README-PORTABLE.md)** - 🆕 **Guide déploiement portable** (zéro config)
+- **[NETWORK_SETUP.md](NETWORK_SETUP.md)** - Configuration réseau multi-appareils
 - **[docs/SETUP_LIVEKIT.md](docs/SETUP_LIVEKIT.md)** - Configuration LiveKit (Cloud + Local)
 - **[CLAUDE.md](CLAUDE.md)** - Documentation développement complète
 - **[TODO.md](TODO.md)** - Progression des phases
@@ -92,13 +142,12 @@ Voir le guide complet : [docs/SETUP_LIVEKIT.md](docs/SETUP_LIVEKIT.md)
 
 ## 🎯 État du projet
 
-- ✅ **Phase 1.1** : Infrastructure
-- ✅ **Phase 1.2** : Serveur + API REST
-- ⏳ **Phase 1.3** : Bridge audio macOS
-- ✅ **Phase 1.4** : Client PWA React
-- ⏳ **Phase 1.5** : Tests validation
+- ✅ **Phase 1** : MVP fonctionnel (WebRTC + PTT)
+- ✅ **Phase 2** : Fonctionnalités avancées (groupes, routing, admin)
+- 🆕 **Portable** : Installation zéro-config macOS/Linux
+- ⏳ **Phase 3** : Intégrations audio pro (Dante, AES67)
 
-**Version actuelle** : 0.1.0 (Phase 1 MVP en cours)
+**Version actuelle** : 0.2.0 (Portable - production-ready)
 
 ---
 

SSL-SETUP.md

@@ -0,0 +1,375 @@
+# 🔐 Configuration SSL 100% Locale - PTT Live
+
+## Problème Résolu
+
+❌ **Avant** : Certificats self-signed bloqués par navigateurs
+✅ **Après** : Certificats locaux **automatiquement approuvés**
+
+---
+
+## Solution : mkcert
+
+**mkcert** génère des certificats SSL locaux **de confiance** :
+- ✅ Approuvés automatiquement par Chrome/Safari/Edge/Firefox
+- ✅ Approuvés par le système (macOS/Linux)
+- ✅ Pas besoin de clics "Accepter le risque"
+- ✅ 100% local, pas de cloud, pas de domaine
+
+---
+
+## 🚀 Installation Automatique (Recommandée)
+
+### Un seul script fait tout
+
+```bash
+# Depuis la racine du projet
+./setup-certificates.sh
+```
+
+Ce script :
+1. ✅ Installe `mkcert` (si pas déjà installé)
+2. ✅ Installe la CA locale (Certificate Authority)
+3. ✅ Génère certificats pour localhost + IP réseau
+4. ✅ Configure automatiquement serveur et client
+5. ✅ Crée les `.env` avec chemins certificats
+
+**Temps : ~2 minutes**
+
+---
+
+## 📋 Ce qui est Créé
+
+### Structure
+
+```
+PTT Live/
+├── certs/                          # Nouveau dossier
+│   ├── localhost.pem               # Certificat public
+│   └── localhost-key.pem           # Clé privée
+│
+├── server/.env                     # Mis à jour automatiquement
+│   ├── SSL_CERT=/path/to/localhost.pem
+│   └── SSL_KEY=/path/to/localhost-key.pem
+│
+└── client/
+    ├── .env                        # Créé automatiquement
+    └── vite.config.js              # Mis à jour avec HTTPS
+```
+
+### Certificats Générés Pour
+
+- `localhost`
+- `127.0.0.1`
+- Votre **IP réseau** (ex: `192.168.1.10`)
+- `*.local` (wildcard)
+- `$(hostname).local`
+
+---
+
+## 🌐 URLs d'Accès
+
+Après installation, accès HTTPS sans warnings :
+
+```
+Serveur :  https://192.168.1.10:3000
+Client :   https://192.168.1.10:5173
+
+QR Code : généré automatiquement au démarrage
+```
+
+---
+
+## 📱 Smartphones (iOS/Android)
+
+### Première Connexion
+
+1. **Scanner le QR Code** affiché au démarrage du serveur
+2. Le navigateur ouvre l'URL HTTPS
+3. **Accepter le certificat** (une seule fois par appareil)
+   - iOS : Cliquer "Continuer" → "Visiter ce site web"
+   - Android : Cliquer "Avancé" → "Continuer vers le site"
+4. La PWA se charge normalement
+5. **Installer sur l'écran d'accueil** (recommandé)
+
+### Pourquoi Accepter Manuellement sur Mobile ?
+
+La CA locale est installée sur l'**ordinateur serveur**, pas sur le smartphone.
+
+**Options** :
+
+**A) Accepter à chaque appareil** (simple, rapide)
+- Une seule fois par smartphone
+- 2 clics
+
+**B) Installer la CA sur les mobiles** (optionnel, avancé)
+- iOS : Réglages → Général → VPN & Gestion → Profils
+- Android : Paramètres → Sécurité → Certificats
+
+💡 **Recommandation** : Option A (accepter manuellement), plus simple.
+
+---
+
+## 🛠️ Fonctionnement Technique
+
+### 1. mkcert
+
+```bash
+# Installer CA locale (une fois par machine)
+mkcert -install
+
+# Générer certificats
+mkcert localhost 192.168.1.10 *.local
+# → Crée localhost.pem + localhost-key.pem
+```
+
+### 2. Serveur Express (HTTPS)
+
+```javascript
+// server/index.js
+const https = require('https');
+const fs = require('fs');
+
+const httpsOptions = {
+  key: fs.readFileSync(process.env.SSL_KEY),
+  cert: fs.readFileSync(process.env.SSL_CERT)
+};
+
+https.createServer(httpsOptions, app).listen(3000);
+```
+
+### 3. Vite Dev Server (HTTPS)
+
+```javascript
+// client/vite.config.js
+export default defineConfig({
+  server: {
+    https: {
+      key: fs.readFileSync('../certs/localhost-key.pem'),
+      cert: fs.readFileSync('../certs/localhost.pem')
+    }
+  }
+});
+```
+
+---
+
+## 🔧 Installation Manuelle (Si Script Échoue)
+
+### macOS
+
+```bash
+# 1. Installer mkcert
+brew install mkcert
+brew install nss  # Pour Firefox
+
+# 2. Installer CA locale
+mkcert -install
+
+# 3. Créer dossier certificats
+mkdir certs
+cd certs
+
+# 4. Générer certificats (remplacer IP)
+mkcert localhost 127.0.0.1 192.168.1.10 *.local
+
+# 5. Renommer
+mv localhost+*.pem localhost.pem
+mv localhost+*-key.pem localhost-key.pem
+
+# 6. Configurer .env (voir ci-dessous)
+```
+
+### Linux
+
+```bash
+# 1. Installer dépendances
+sudo apt-get install libnss3-tools  # Debian/Ubuntu
+# OU
+sudo yum install nss-tools          # RedHat/CentOS
+
+# 2. Télécharger mkcert
+curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64"
+chmod +x mkcert-v*-linux-amd64
+sudo mv mkcert-v*-linux-amd64 /usr/local/bin/mkcert
+
+# 3-6. Mêmes étapes que macOS
+```
+
+### Configuration Manuelle .env
+
+**server/.env** :
+```bash
+USE_LOCAL_LIVEKIT=true
+LIVEKIT_API_KEY=devkey
+LIVEKIT_API_SECRET=secret
+LIVEKIT_URL=AUTO
+
+PORT=3000
+ENABLE_HTTPS=true
+
+# Chemins ABSOLUS
+SSL_CERT=/Users/vous/PTT Live/certs/localhost.pem
+SSL_KEY=/Users/vous/PTT Live/certs/localhost-key.pem
+
+NETWORK_IP=192.168.1.10  # Votre IP
+```
+
+**client/.env** :
+```bash
+VITE_SERVER_URL=https://192.168.1.10:3000
+```
+
+---
+
+## ✅ Vérification
+
+### 1. Certificats Créés ?
+
+```bash
+ls -lh certs/
+# Doit afficher :
+# localhost.pem
+# localhost-key.pem
+```
+
+### 2. CA Installée ?
+
+```bash
+mkcert -CAROOT
+# Affiche le chemin de la CA (ex: /Users/vous/Library/Application Support/mkcert)
+```
+
+### 3. Serveur HTTPS Fonctionne ?
+
+```bash
+# Démarrer
+./start.sh --dev
+
+# Vérifier
+curl -k https://localhost:3000/health
+# Doit retourner JSON sans erreur
+```
+
+### 4. Client HTTPS Fonctionne ?
+
+Ouvrir dans navigateur :
+```
+https://localhost:5173
+```
+
+✅ **Pas de warning SSL** = succès !
+
+---
+
+## 🐛 Dépannage
+
+### Erreur "Certificats SSL introuvables"
+
+**Symptôme** : Le serveur refuse de démarrer
+
+**Solution** :
+```bash
+# 1. Vérifier que les certificats existent
+ls certs/
+
+# 2. Relancer le script
+./setup-certificates.sh
+
+# 3. Vérifier .env
+cat server/.env | grep SSL_
+```
+
+### Warning SSL sur Smartphone
+
+**Symptôme** : "Votre connexion n'est pas privée"
+
+**Solution** : Normal ! Cliquer "Avancé" → "Continuer"
+- Une seule fois par appareil
+- La CA locale n'est pas sur le mobile
+
+### Firefox : Certificat Non Approuvé
+
+**Symptôme** : Firefox affiche warning (Chrome OK)
+
+**Solution** :
+```bash
+# Installer NSS tools
+brew install nss          # macOS
+sudo apt install libnss3-tools  # Linux
+
+# Réinstaller CA
+mkcert -install
+```
+
+### Certificat Expiré
+
+**Symptôme** : Après plusieurs mois
+
+**Solution** :
+```bash
+# Régénérer certificats
+cd certs
+rm *.pem
+mkcert localhost $(ipconfig getifaddr en0) *.local
+
+# Redémarrer serveur
+```
+
+---
+
+## 🔄 Renouvellement
+
+Les certificats mkcert sont valides **10 ans** (pas besoin de renouveler).
+
+Pour regénérer (changement d'IP, etc.) :
+
+```bash
+./setup-certificates.sh
+# Écrase les anciens certificats
+```
+
+---
+
+## 🌍 Production (Déploiement Réel)
+
+### Option 1 : mkcert (Réseau Local Privé)
+
+✅ **Si PTT Live reste sur réseau local privé** (WiFi événement)
+- Garder mkcert
+- Les clients acceptent le certificat une fois
+- Pas besoin de domaine/DNS
+
+### Option 2 : Let's Encrypt (Internet Public)
+
+⚠️ **Si PTT Live doit être accessible depuis Internet**
+- Nécessite un domaine (ex: `ptt.votredomaine.com`)
+- Utiliser Caddy ou Certbot (Let's Encrypt)
+- Pas recommandé pour intercom événementiel
+
+**Recommandation** : Rester sur **Option 1** (mkcert + réseau local)
+
+---
+
+## 📚 Ressources
+
+- **mkcert** : https://github.com/FiloSottile/mkcert
+- **Vite HTTPS** : https://vitejs.dev/config/server-options.html#server-https
+- **Node.js HTTPS** : https://nodejs.org/api/https.html
+
+---
+
+## ✅ Récapitulatif
+
+| Avant | Après |
+|-------|-------|
+| ❌ Certificats self-signed bloqués | ✅ Certificats approuvés automatiquement |
+| ❌ Warnings "Non sécurisé" | ✅ Cadenas vert 🔒 |
+| ❌ WebRTC refuse HTTPS invalide | ✅ WebRTC fonctionne |
+| ❌ Configuration manuelle complexe | ✅ Script automatique 2 min |
+| ❌ Dépendance cloud/domaine | ✅ 100% local |
+
+---
+
+**Solution : `./setup-certificates.sh` → 2 minutes → HTTPS fonctionnel**
+
+🎉 Problème résolu définitivement !

client/.env.example

@@ -1,7 +1,15 @@
-# PTT Live Client - Configuration environnement
+# Configuration Client PTT Live
+# Copiez ce fichier en .env et adaptez selon votre environnement
 
-# URL API serveur (en dev, utilise le proxy Vite)
+# URL de l'API serveur
+# En développement : laissez /api pour utiliser le proxy Vite
+# En production : spécifiez l'URL complète du serveur
+# Exemples :
+#   VITE_API_URL=/api                          # Dev local (via proxy Vite)
+#   VITE_API_URL=http://192.168.1.100:3000     # Serveur sur réseau local
+#   VITE_API_URL=https://ptt.example.com       # Production avec domaine
 VITE_API_URL=/api
 
-# Pour production, pointer vers le serveur
-# VITE_API_URL=https://your-server.com
+# URL LiveKit WebSocket (optionnel, normalement auto-détectée)
+# Ne définir que si vous voulez forcer une URL spécifique
+# VITE_LIVEKIT_URL=ws://192.168.1.100:7880

client/.env.production

@@ -0,0 +1,5 @@
+# Configuration PTT Live Client - Production
+# Le client est servi depuis le même domaine que l'API
+
+# URLs relatives directes (pas de proxy /api)
+VITE_API_URL=.

client/dev-dist/sw.js

@@ -81,7 +81,7 @@ define(['./workbox-290dd570'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.oebo7b1mt4g"
+    "revision": "0.t6h2k1g9avg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

client/src/Admin.jsx

@@ -1,11 +1,17 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import './Admin.css';
 import AudioRoutingMatrix from './components/AudioRoutingMatrix';
 
 const API_URL = import.meta.env.VITE_API_URL || '/api';
 
 function Admin() {
-  const [activeTab, setActiveTab] = useState('groups');
+  // Lire l'onglet depuis l'URL hash (ex: #audio) ou utiliser 'groups' par défaut
+  const getInitialTab = () => {
+    const hash = window.location.hash.slice(1); // Enlever le #
+    return ['groups', 'audio', 'users', 'stats', 'logs'].includes(hash) ? hash : 'groups';
+  };
+
+  const [activeTab, setActiveTab] = useState(getInitialTab());
   const [groups, setGroups] = useState([]);
   const [users, setUsers] = useState([]);
   const [stats, setStats] = useState(null);
@@ -15,25 +21,36 @@ function Admin() {
 
   // Audio devices (Phase 2.5)
   const [audioDevices, setAudioDevices] = useState([]);
-  const [currentDevice, setCurrentDevice] = useState(null);
+  const [currentDevice, setCurrentDevice] = useState({ inputChannels: 8, outputChannels: 8 });
   const [selectedInputDevice, setSelectedInputDevice] = useState(null);
   const [selectedOutputDevice, setSelectedOutputDevice] = useState(null);
   const [selectedSampleRate, setSelectedSampleRate] = useState(48000);
-  const [isEditingAudio, setIsEditingAudio] = useState(false);
+  const isEditingAudioRef = useRef(false);
 
   // Channel names (Phase 2.5)
   const [channelNames, setChannelNames] = useState({ inputs: {}, outputs: {} });
-  const [editingChannelNames, setEditingChannelNames] = useState(false);
 
   // Gestion formulaire nouveau groupe
   const [showGroupForm, setShowGroupForm] = useState(false);
   const [editingGroup, setEditingGroup] = useState(null);
   const [groupForm, setGroupForm] = useState({
     name: '',
-    audioBitrate: 96,
-    channels: []
+    audioBitrate: 96
   });
 
+  // Synchroniser l'onglet avec l'URL hash
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1);
+      if (['groups', 'audio', 'users', 'stats', 'logs'].includes(hash)) {
+        setActiveTab(hash);
+      }
+    };
+
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, []);
+
   // Rafraîchissement automatique
   useEffect(() => {
     loadData();
@@ -91,25 +108,30 @@ function Admin() {
   };
 
   const loadAudioDevices = async () => {
-    const [devicesRes, currentDeviceRes, channelNamesRes] = await Promise.all([
+    const [devicesRes, currentDeviceRes, channelNamesRes, groupsRes] = await Promise.all([
       fetch(`${API_URL}/admin/audio/devices`),
       fetch(`${API_URL}/admin/audio/device`),
-      fetch(`${API_URL}/admin/audio/channels/names`)
+      fetch(`${API_URL}/admin/audio/channels/names`),
+      fetch(`${API_URL}/admin/groups`)
     ]);
 
     const devicesData = await devicesRes.json();
     const currentData = await currentDeviceRes.json();
     const channelNamesData = await channelNamesRes.json();
+    const groupsData = await groupsRes.json();
 
     setAudioDevices(devicesData.devices || []);
-    setCurrentDevice(currentData.device || {});
+    setGroups(groupsData.groups || []);
+
+    const device = currentData.device || { inputChannels: 8, outputChannels: 8 };
+    setCurrentDevice(device);
     setChannelNames(channelNamesData.channelNames || { inputs: {}, outputs: {} });
 
-    // Ne réinitialiser les sélections que si l'utilisateur n'est pas en train d'éditer
-    if (!isEditingAudio) {
-      setSelectedInputDevice(currentData.device?.inputDeviceId ?? null);
-      setSelectedOutputDevice(currentData.device?.outputDeviceId ?? null);
-      setSelectedSampleRate(currentData.device?.sampleRate || 48000);
+    // Ne réinitialiser les sélections que lors du chargement initial (pas en train d'éditer)
+    if (!isEditingAudioRef.current) {
+      setSelectedInputDevice(device.inputDeviceId ?? null);
+      setSelectedOutputDevice(device.outputDeviceId ?? null);
+      setSelectedSampleRate(device.sampleRate || 48000);
     }
   };
 
@@ -189,8 +211,7 @@ function Admin() {
     setEditingGroup(group.id);
     setGroupForm({
       name: group.name,
-      audioBitrate: group.audioBitrate || 96,
-      channels: group.channels || []
+      audioBitrate: group.audioBitrate || 96
     });
     setShowGroupForm(true);
   };
@@ -198,38 +219,12 @@ function Admin() {
   const resetGroupForm = () => {
     setGroupForm({
       name: '',
-      audioBitrate: 96,
-      channels: []
+      audioBitrate: 96
     });
     setShowGroupForm(false);
     setEditingGroup(null);
   };
 
-  const addChannel = () => {
-    setGroupForm({
-      ...groupForm,
-      channels: [
-        ...groupForm.channels,
-        { name: '', audioInput: 0, audioOutput: 0 }
-      ]
-    });
-  };
-
-  const updateChannel = (index, field, value) => {
-    const newChannels = [...groupForm.channels];
-    newChannels[index] = {
-      ...newChannels[index],
-      [field]: field === 'audioInput' || field === 'audioOutput' ? parseInt(value) : value
-    };
-    setGroupForm({ ...groupForm, channels: newChannels });
-  };
-
-  const removeChannel = (index) => {
-    const newChannels = [...groupForm.channels];
-    newChannels.splice(index, 1);
-    setGroupForm({ ...groupForm, channels: newChannels });
-  };
-
   // ========== Gestion audio devices (Phase 2.5) ==========
 
   const handleSaveChannelNames = async () => {
@@ -242,7 +237,6 @@ function Admin() {
 
       if (res.ok) {
         alert('Noms de canaux sauvegardés avec succès!');
-        setEditingChannelNames(false);
         await loadAudioDevices();
       } else {
         const error = await res.json();
@@ -270,14 +264,14 @@ function Admin() {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          inputDeviceId: selectedInputDevice !== null ? parseInt(selectedInputDevice) : undefined,
-          outputDeviceId: selectedOutputDevice !== null ? parseInt(selectedOutputDevice) : undefined,
+          inputDeviceId: selectedInputDevice || undefined,
+          outputDeviceId: selectedOutputDevice || undefined,
           sampleRate: parseInt(selectedSampleRate)
         })
       });
 
       if (res.ok) {
-        setIsEditingAudio(false); // Désactiver le mode édition
+        isEditingAudioRef.current = false; // Désactiver le mode édition
         alert('Configuration audio sauvegardée avec succès!');
         await loadAudioDevices();
       } else {
@@ -337,31 +331,31 @@ function Admin() {
       <nav className="admin-tabs">
         <button
           className={activeTab === 'groups' ? 'active' : ''}
-          onClick={() => setActiveTab('groups')}
+          onClick={() => { window.location.hash = 'groups'; setActiveTab('groups'); }}
         >
           Groupes
         </button>
         <button
           className={activeTab === 'audio' ? 'active' : ''}
-          onClick={() => setActiveTab('audio')}
+          onClick={() => { window.location.hash = 'audio'; setActiveTab('audio'); }}
         >
           Audio
         </button>
         <button
           className={activeTab === 'users' ? 'active' : ''}
-          onClick={() => setActiveTab('users')}
+          onClick={() => { window.location.hash = 'users'; setActiveTab('users'); }}
         >
           Utilisateurs ({users.length})
         </button>
         <button
           className={activeTab === 'stats' ? 'active' : ''}
-          onClick={() => setActiveTab('stats')}
+          onClick={() => { window.location.hash = 'stats'; setActiveTab('stats'); }}
         >
           Statistiques
         </button>
         <button
           className={activeTab === 'logs' ? 'active' : ''}
-          onClick={() => setActiveTab('logs')}
+          onClick={() => { window.location.hash = 'logs'; setActiveTab('logs'); }}
         >
           Logs
         </button>
@@ -415,43 +409,9 @@ function Admin() {
                     </label>
                   </div>
 
-                  <div className="channels-section">
-                    <div className="channels-header">
-                      <h4>Canaux audio</h4>
-                      <button type="button" onClick={addChannel} className="btn-small">
-                        + Canal
-                      </button>
-                    </div>
-
-                    {groupForm.channels.map((channel, index) => (
-                      <div key={index} className="channel-item">
-                        <input
-                          type="text"
-                          placeholder="Nom canal (ex: Principal, Backup...)"
-                          value={channel.name}
-                          onChange={(e) => updateChannel(index, 'name', e.target.value)}
-                          required
-                        />
-                        <input
-                          type="number"
-                          placeholder="Input"
-                          value={channel.audioInput}
-                          onChange={(e) => updateChannel(index, 'audioInput', e.target.value)}
-                          min="0"
-                        />
-                        <input
-                          type="number"
-                          placeholder="Output"
-                          value={channel.audioOutput}
-                          onChange={(e) => updateChannel(index, 'audioOutput', e.target.value)}
-                          min="0"
-                        />
-                        <button type="button" onClick={() => removeChannel(index)} className="btn-danger">
-                          ×
-                        </button>
-                      </div>
-                    ))}
-                  </div>
+                  <p style={{color: 'var(--color-text-secondary)', fontSize: '0.9rem', marginTop: 'var(--spacing-md)'}}>
+                    Le routing audio se configure dans l'onglet "Audio" via la matrice de routing.
+                  </p>
 
                   <div className="form-actions">
                     <button type="submit" className="btn-primary">
@@ -482,18 +442,7 @@ function Admin() {
 
                   <div className="group-info">
                     <span>Bitrate: {group.audioBitrate || 96} kbps</span>
-                    <span>Canaux: {group.channels?.length || 0}</span>
                   </div>
-
-                  {group.channels && group.channels.length > 0 && (
-                    <div className="channels-list">
-                      {group.channels.map(channel => (
-                        <div key={channel.id} className="channel-badge">
-                          {channel.name} (I/O: {channel.audioInput}/{channel.audioOutput})
-                        </div>
-                      ))}
-                    </div>
-                  )}
                 </div>
               ))}
             </div>
@@ -509,103 +458,101 @@ function Admin() {
 
             <div className="audio-config-container">
               <div className="audio-section">
-                <h3>Carte son d'entrée (Input)</h3>
-                <select
-                  value={selectedInputDevice ?? ''}
-                  onChange={(e) => {
-                    setIsEditingAudio(true);
-                    setSelectedInputDevice(e.target.value === '' ? null : parseInt(e.target.value));
-                  }}
-                  className="device-select"
-                >
-                  <option value="">-- Sélectionner une carte --</option>
-                  {audioDevices
-                    .filter(d => d.maxInputChannels > 0)
-                    .map(device => (
-                      <option key={device.id} value={device.id}>
-                        {device.name} - {device.maxInputChannels} canaux - {device.defaultSampleRate}Hz
-                      </option>
-                    ))}
-                </select>
-                {selectedInputDevice !== null && (
-                  <p style={{marginTop: 'var(--spacing-sm)', color: 'var(--color-text-secondary)', fontSize: '0.85rem'}}>
-                    Device ID {selectedInputDevice} sélectionné
-                  </p>
-                )}
-              </div>
+                <h3>Configuration des cartes son</h3>
 
-              <div className="audio-section">
-                <h3>Carte son de sortie (Output)</h3>
-                <select
-                  value={selectedOutputDevice ?? ''}
-                  onChange={(e) => {
-                    setIsEditingAudio(true);
-                    setSelectedOutputDevice(e.target.value === '' ? null : parseInt(e.target.value));
-                  }}
-                  className="device-select"
-                >
-                  <option value="">-- Sélectionner une carte --</option>
-                  {audioDevices
-                    .filter(d => d.maxOutputChannels > 0)
-                    .map(device => (
-                      <option key={device.id} value={device.id}>
-                        {device.name} - {device.maxOutputChannels} canaux - {device.defaultSampleRate}Hz
-                      </option>
-                    ))}
-                </select>
-                {selectedOutputDevice !== null && (
-                  <p style={{marginTop: 'var(--spacing-sm)', color: 'var(--color-text-secondary)', fontSize: '0.85rem'}}>
-                    Device ID {selectedOutputDevice} sélectionné
-                  </p>
-                )}
-              </div>
+                <div style={{display: 'grid', gap: 'var(--spacing-lg)', marginTop: 'var(--spacing-md)'}}>
+                  <div>
+                    <label style={{display: 'block', marginBottom: 'var(--spacing-xs)', fontSize: '0.9rem', fontWeight: 600, color: 'var(--color-text-secondary)'}}>
+                      Carte son d'entrée (Input)
+                    </label>
+                    <select
+                      value={selectedInputDevice ?? ''}
+                      onChange={(e) => {
+                        isEditingAudioRef.current = true;
+                        setSelectedInputDevice(e.target.value === '' ? null : e.target.value);
+                      }}
+                      className="device-select"
+                    >
+                      <option value="">-- Sélectionner une carte --</option>
+                      {audioDevices
+                        .filter(d => d.maxInputChannels > 0)
+                        .map((device, index) => (
+                          <option key={`input-${device.id}-${index}`} value={device.id}>
+                            {device.name} - {device.maxInputChannels} canaux - {device.defaultSampleRate}Hz
+                          </option>
+                        ))}
+                    </select>
+                    {selectedInputDevice !== null && selectedInputDevice !== '' && (
+                      <p style={{marginTop: 'var(--spacing-sm)', color: 'var(--color-text-secondary)', fontSize: '0.85rem', wordBreak: 'break-all'}}>
+                        Device ID: {selectedInputDevice}
+                      </p>
+                    )}
+                  </div>
 
-              <div className="audio-section">
-                <h3>Sample Rate</h3>
-                <select
-                  value={selectedSampleRate}
-                  onChange={(e) => {
-                    setIsEditingAudio(true);
-                    setSelectedSampleRate(parseInt(e.target.value));
-                  }}
-                  className="device-select"
-                >
-                  <option value={44100}>44100 Hz (CD quality)</option>
-                  <option value={48000}>48000 Hz (Recommended)</option>
-                  <option value={96000}>96000 Hz (High quality)</option>
-                </select>
-              </div>
+                  <div>
+                    <label style={{display: 'block', marginBottom: 'var(--spacing-xs)', fontSize: '0.9rem', fontWeight: 600, color: 'var(--color-text-secondary)'}}>
+                      Carte son de sortie (Output)
+                    </label>
+                    <select
+                      value={selectedOutputDevice ?? ''}
+                      onChange={(e) => {
+                        isEditingAudioRef.current = true;
+                        setSelectedOutputDevice(e.target.value === '' ? null : e.target.value);
+                      }}
+                      className="device-select"
+                    >
+                      <option value="">-- Sélectionner une carte --</option>
+                      {audioDevices
+                        .filter(d => d.maxOutputChannels > 0)
+                        .map((device, index) => (
+                          <option key={`output-${device.id}-${index}`} value={device.id}>
+                            {device.name} - {device.maxOutputChannels} canaux - {device.defaultSampleRate}Hz
+                          </option>
+                        ))}
+                    </select>
+                    {selectedOutputDevice !== null && selectedOutputDevice !== '' && (
+                      <p style={{marginTop: 'var(--spacing-sm)', color: 'var(--color-text-secondary)', fontSize: '0.85rem', wordBreak: 'break-all'}}>
+                        Device ID: {selectedOutputDevice}
+                      </p>
+                    )}
+                  </div>
 
-              <div className="audio-actions">
-                <button onClick={handleSaveAudioDevice} className="btn-primary">
-                  Sauvegarder la configuration
-                </button>
-              </div>
-
-              <div className="audio-section">
-                <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-md)'}}>
-                  <h3>Nommage des canaux physiques</h3>
-                  {!editingChannelNames ? (
-                    <button onClick={() => setEditingChannelNames(true)} className="btn-secondary">
-                      Modifier les noms
-                    </button>
-                  ) : (
-                    <div style={{display: 'flex', gap: 'var(--spacing-sm)'}}>
-                      <button onClick={handleSaveChannelNames} className="btn-primary">
-                        Sauvegarder
-                      </button>
-                      <button onClick={() => { setEditingChannelNames(false); loadAudioDevices(); }} className="btn-secondary">
-                        Annuler
-                      </button>
-                    </div>
-                  )}
+                  <div>
+                    <label style={{display: 'block', marginBottom: 'var(--spacing-xs)', fontSize: '0.9rem', fontWeight: 600, color: 'var(--color-text-secondary)'}}>
+                      Sample Rate
+                    </label>
+                    <select
+                      value={selectedSampleRate}
+                      onChange={(e) => {
+                        isEditingAudioRef.current = true;
+                        setSelectedSampleRate(parseInt(e.target.value));
+                      }}
+                      className="device-select"
+                    >
+                      <option value={44100}>44100 Hz (CD quality)</option>
+                      <option value={48000}>48000 Hz (Recommended)</option>
+                      <option value={96000}>96000 Hz (High quality)</option>
+                    </select>
+                  </div>
                 </div>
 
-                <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-xl)'}}>
+                <div className="audio-actions">
+                  <button onClick={handleSaveAudioDevice} className="btn-primary">
+                    Sauvegarder la configuration audio
+                  </button>
+                </div>
+              </div>
+
+              <div className="audio-section">
+                <h3>Nommage des canaux physiques</h3>
+
+                <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-xl)', marginTop: 'var(--spacing-md)'}}>
                   <div>
-                    <h4 style={{marginBottom: 'var(--spacing-md)', color: 'var(--color-text-secondary)'}}>Entrées (Inputs)</h4>
+                    <h4 style={{marginBottom: 'var(--spacing-md)', color: 'var(--color-text-secondary)'}}>
+                      Entrées (Inputs) - {currentDevice.inputChannels || 0} canaux disponibles
+                    </h4>
                     <div style={{display: 'grid', gap: 'var(--spacing-sm)'}}>
-                      {Array.from({length: 8}, (_, i) => (
+                      {Array.from({length: currentDevice.inputChannels || 8}, (_, i) => (
                         <div key={`input-${i}`} style={{display: 'grid', gridTemplateColumns: '40px 1fr', gap: 'var(--spacing-sm)', alignItems: 'center'}}>
                           <span style={{color: 'var(--color-text-secondary)', fontSize: '0.85rem'}}>{i}</span>
                           <input
@@ -613,10 +560,9 @@ function Admin() {
                             value={channelNames.inputs?.[i] || ''}
                             onChange={(e) => updateChannelName('inputs', i, e.target.value)}
                             placeholder={`Input ${i}`}
-                            disabled={!editingChannelNames}
                             style={{
                               padding: 'var(--spacing-sm)',
-                              background: editingChannelNames ? 'var(--color-bg)' : 'var(--color-surface-hover)',
+                              background: 'var(--color-bg)',
                               border: '1px solid var(--color-border)',
                               borderRadius: '6px',
                               color: 'var(--color-text)',
@@ -629,9 +575,11 @@ function Admin() {
                   </div>
 
                   <div>
-                    <h4 style={{marginBottom: 'var(--spacing-md)', color: 'var(--color-text-secondary)'}}>Sorties (Outputs)</h4>
+                    <h4 style={{marginBottom: 'var(--spacing-md)', color: 'var(--color-text-secondary)'}}>
+                      Sorties (Outputs) - {currentDevice.outputChannels || 0} canaux disponibles
+                    </h4>
                     <div style={{display: 'grid', gap: 'var(--spacing-sm)'}}>
-                      {Array.from({length: 8}, (_, i) => (
+                      {Array.from({length: currentDevice.outputChannels || 8}, (_, i) => (
                         <div key={`output-${i}`} style={{display: 'grid', gridTemplateColumns: '40px 1fr', gap: 'var(--spacing-sm)', alignItems: 'center'}}>
                           <span style={{color: 'var(--color-text-secondary)', fontSize: '0.85rem'}}>{i}</span>
                           <input
@@ -639,10 +587,9 @@ function Admin() {
                             value={channelNames.outputs?.[i] || ''}
                             onChange={(e) => updateChannelName('outputs', i, e.target.value)}
                             placeholder={`Output ${i}`}
-                            disabled={!editingChannelNames}
                             style={{
                               padding: 'var(--spacing-sm)',
-                              background: editingChannelNames ? 'var(--color-bg)' : 'var(--color-surface-hover)',
+                              background: 'var(--color-bg)',
                               border: '1px solid var(--color-border)',
                               borderRadius: '6px',
                               color: 'var(--color-text)',
@@ -654,17 +601,24 @@ function Admin() {
                     </div>
                   </div>
                 </div>
+
+                <div className="audio-actions">
+                  <button onClick={handleSaveChannelNames} className="btn-primary">
+                    Sauvegarder les noms des canaux
+                  </button>
+                </div>
               </div>
 
               <AudioRoutingMatrix groups={groups} channelNames={channelNames} />
 
-              {currentDevice && Object.keys(currentDevice).length > 0 && (
+              {currentDevice && currentDevice.inputDeviceId && (
                 <div className="current-config">
                   <h3>Configuration actuelle</h3>
                   <div className="config-info">
-                    <p><strong>Input Device ID:</strong> {currentDevice.inputDeviceId ?? 'Non configuré'}</p>
-                    <p><strong>Output Device ID:</strong> {currentDevice.outputDeviceId ?? 'Non configuré'}</p>
+                    <p><strong>Input Device:</strong> {currentDevice.inputDeviceName || currentDevice.inputDeviceId}</p>
+                    <p><strong>Output Device:</strong> {currentDevice.outputDeviceName || currentDevice.outputDeviceId}</p>
                     <p><strong>Sample Rate:</strong> {currentDevice.sampleRate ?? 48000} Hz</p>
+                    <p><strong>Canaux:</strong> {currentDevice.inputChannels} entrées / {currentDevice.outputChannels} sorties</p>
                   </div>
                 </div>
               )}
@@ -683,9 +637,9 @@ function Admin() {
                     </tr>
                   </thead>
                   <tbody>
-                    {audioDevices.map(device => (
-                      <tr key={device.id}>
-                        <td>{device.id}</td>
+                    {audioDevices.map((device, index) => (
+                      <tr key={`${device.id}-${index}`}>
+                        <td style={{fontSize: '0.75rem', wordBreak: 'break-all', maxWidth: '200px'}}>{device.id}</td>
                         <td>{device.name}</td>
                         <td>{device.maxInputChannels}</td>
                         <td>{device.maxOutputChannels}</td>

client/src/App.jsx

@@ -100,11 +100,14 @@ function App() {
 
       const data = await response.json();
 
-      // Adapter l'URL LiveKit selon le protocole de la page
+      // Si HTTPS, utiliser le proxy WebSocket (résout mixed content)
+      // Sinon utiliser l'URL LiveKit directement
       let livekitUrl = data.url;
+
       if (window.location.protocol === 'https:') {
-        // En HTTPS, utiliser le proxy WSS local via Vite
-        livekitUrl = `${window.location.protocol}//${window.location.host}/livekit`;
+        // 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);
@@ -151,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

client/src/components/AudioRoutingMatrix.css

@@ -6,6 +6,13 @@
   margin-top: var(--spacing-lg);
 }
 
+.routing-actions {
+  margin-top: var(--spacing-xl);
+  display: flex;
+  justify-content: flex-start;
+  gap: var(--spacing-sm);
+}
+
 .routing-matrix-header {
   display: flex;
   justify-content: space-between;
@@ -169,9 +176,9 @@
   width: 100%;
   padding: 4px 8px;
   font-size: 0.75rem;
-  background: rgba(255, 255, 255, 0.9);
-  color: var(--color-text);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(59, 130, 246, 0.2);
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 1);
   border-radius: 4px;
   cursor: pointer;
   font-weight: 600;
@@ -180,8 +187,9 @@
 
 .gain-select:focus {
   outline: none;
-  border-color: rgba(255, 255, 255, 0.6);
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+  background: rgba(59, 130, 246, 0.3);
+  border-color: rgba(255, 255, 255, 1);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
 }
 
 @media (max-width: 1024px) {

client/src/components/AudioRoutingMatrix.jsx

@@ -10,9 +10,11 @@ function AudioRoutingMatrix({ groups, channelNames }) {
   const [routing, setRouting] = useState({ inputToGroup: {}, groupToOutput: {}, gains: {} });
   const [loading, setLoading] = useState(true);
   const [showOnlyNamedChannels, setShowOnlyNamedChannels] = useState(false);
+  const [audioDevice, setAudioDevice] = useState({ inputChannels: 8, outputChannels: 8 });
 
   useEffect(() => {
     loadRouting();
+    loadAudioDevice();
   }, []);
 
   const loadRouting = async () => {
@@ -30,6 +32,21 @@ function AudioRoutingMatrix({ groups, channelNames }) {
     }
   };
 
+  const loadAudioDevice = async () => {
+    try {
+      const res = await fetch(`${API_URL}/admin/audio/device`);
+      if (res.ok) {
+        const data = await res.json();
+        setAudioDevice({
+          inputChannels: data.device?.inputChannels || 8,
+          outputChannels: data.device?.outputChannels || 8
+        });
+      }
+    } catch (error) {
+      console.error('Erreur chargement audio device:', error);
+    }
+  };
+
   const saveRouting = async () => {
     try {
       const res = await fetch(`${API_URL}/admin/audio/routing`, {
@@ -146,7 +163,7 @@ function AudioRoutingMatrix({ groups, channelNames }) {
   };
 
   const getVisibleInputChannels = () => {
-    const allInputs = Array.from({length: 8}, (_, i) => i);
+    const allInputs = Array.from({length: audioDevice.inputChannels}, (_, i) => i);
     if (showOnlyNamedChannels) {
       return allInputs.filter(i => hasCustomName('inputs', i));
     }
@@ -154,7 +171,7 @@ function AudioRoutingMatrix({ groups, channelNames }) {
   };
 
   const getVisibleOutputChannels = () => {
-    const allOutputs = Array.from({length: 8}, (_, i) => i);
+    const allOutputs = Array.from({length: audioDevice.outputChannels}, (_, i) => i);
     if (showOnlyNamedChannels) {
       return allOutputs.filter(i => hasCustomName('outputs', i));
     }
@@ -177,19 +194,14 @@ function AudioRoutingMatrix({ groups, channelNames }) {
             {wsConnected ? '● Live' : '○ Offline'}
           </span>
         </div>
-        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
-            <input
-              type="checkbox"
-              checked={showOnlyNamedChannels}
-              onChange={(e) => setShowOnlyNamedChannels(e.target.checked)}
-            />
-            <span>Afficher uniquement les canaux nommés</span>
-          </label>
-          <button onClick={saveRouting} className="btn-primary">
-            Sauvegarder le routing
-          </button>
-        </div>
+        <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
+          <input
+            type="checkbox"
+            checked={showOnlyNamedChannels}
+            onChange={(e) => setShowOnlyNamedChannels(e.target.checked)}
+          />
+          <span>Afficher uniquement les canaux nommés</span>
+        </label>
       </div>
 
       <div className="routing-section">
@@ -324,6 +336,12 @@ function AudioRoutingMatrix({ groups, channelNames }) {
           ))}
         </div>
       </div>
+
+      <div className="routing-actions">
+        <button onClick={saveRouting} className="btn-primary">
+          Sauvegarder le routing audio
+        </button>
+      </div>
     </div>
   );
 }

client/src/components/PTTButton.jsx

@@ -22,16 +22,6 @@ export default function PTTButton({ isTalking, onPressStart, onPressEnd, audioLe
   const currentYRef = useRef(null);
   const [dragOffset, setDragOffset] = useState(0); // Offset visuel du drag (en pixels)
 
-  // Initialiser le mode selon les préférences au démarrage
-  useEffect(() => {
-    const currentSettings = loadSettings();
-    if (currentSettings.defaultPTTMode === 'continuous') {
-      setIsLockMode(true);
-      isLockModeRef.current = true;
-      console.log('Mode continu activé par défaut (préférences)');
-    }
-  }, []);
-
   useEffect(() => {
     const button = buttonRef.current;
     if (!button) return;

client/src/components/PWAInstallPrompt.css

@@ -3,8 +3,22 @@
   bottom: 0;
   left: 0;
   right: 0;
+  top: 0;
   z-index: 1001;
-  animation: slideUp 0.3s ease;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: flex-end;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes slideUp {
@@ -17,12 +31,14 @@
 }
 
 .pwa-prompt {
-  background: var(--bg-secondary);
+  width: 100%;
+  background: #1a1a1a;
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
   box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
   max-height: 80vh;
   overflow-y: auto;
+  animation: slideUp 0.3s ease;
 }
 
 .pwa-prompt-header {
@@ -36,13 +52,13 @@
 .pwa-prompt-header h3 {
   margin: 0;
   font-size: 1.2rem;
-  color: var(--text-primary);
+  color: #ffffff;
 }
 
 .pwa-prompt-close {
   background: none;
   border: none;
-  color: var(--text-secondary);
+  color: #9ca3af;
   cursor: pointer;
   padding: 0.5rem;
   border-radius: 8px;
@@ -50,8 +66,8 @@
 }
 
 .pwa-prompt-close:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
 }
 
 .pwa-prompt-content {
@@ -59,8 +75,8 @@
 }
 
 .pwa-prompt-content > p {
-  margin: 0 0 var(--spacing-lg) 0;
-  color: var(--text-secondary);
+  margin: 0 0 1.5rem 0;
+  color: #d1d5db;
   line-height: 1.6;
 }
 
@@ -73,9 +89,9 @@
 .pwa-prompt-step {
   display: flex;
   align-items: center;
-  gap: var(--spacing-md);
-  padding: var(--spacing-md);
-  background: var(--bg-hover);
+  gap: 1rem;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.05);
   border-radius: 8px;
 }
 
@@ -85,7 +101,7 @@
   justify-content: center;
   width: 32px;
   height: 32px;
-  background: var(--primary-color);
+  background: #3b82f6;
   color: white;
   border-radius: 50%;
   font-weight: 600;
@@ -95,13 +111,13 @@
 .pwa-prompt-step p {
   flex: 1;
   margin: 0;
-  color: var(--text-primary);
+  color: #ffffff;
   font-size: 0.95rem;
 }
 
 .pwa-prompt-step svg {
   flex-shrink: 0;
-  color: var(--primary-color);
+  color: #3b82f6;
 }
 
 .pwa-prompt-footer {

client/src/components/Settings.jsx

@@ -4,9 +4,7 @@ import './Settings.css';
 const STORAGE_KEY = 'ptt-live-settings';
 
 const defaultSettings = {
-  defaultPTTMode: 'normal', // 'normal' ou 'continuous'
-  vibrationEnabled: true,
-  audioFeedbackEnabled: true
+  vibrationEnabled: true
 };
 
 /**
@@ -68,39 +66,6 @@ export default function Settings({ isOpen, onClose }) {
         </div>
 
         <div className="settings-content">
-          <div className="setting-section">
-            <h3>Mode PTT</h3>
-            <p className="setting-description">
-              Choisissez le mode de fonctionnement par défaut du bouton PTT
-            </p>
-
-            <label className="radio-option">
-              <input
-                type="radio"
-                name="pttMode"
-                checked={settings.defaultPTTMode === 'normal'}
-                onChange={() => handleChange('defaultPTTMode', 'normal')}
-              />
-              <div>
-                <strong>Mode normal (Push-To-Talk)</strong>
-                <p>Maintenir le bouton pour parler, relâcher pour arrêter</p>
-              </div>
-            </label>
-
-            <label className="radio-option">
-              <input
-                type="radio"
-                name="pttMode"
-                checked={settings.defaultPTTMode === 'continuous'}
-                onChange={() => handleChange('defaultPTTMode', 'continuous')}
-              />
-              <div>
-                <strong>Mode continu (verrouillé)</strong>
-                <p>Un appui active le micro en continu, un second appui le désactive</p>
-              </div>
-            </label>
-          </div>
-
           <div className="setting-section">
             <h3>Feedback</h3>
 
@@ -112,19 +77,7 @@ export default function Settings({ isOpen, onClose }) {
               />
               <div>
                 <strong>Vibrations</strong>
-                <p>Activer le retour haptique (si disponible)</p>
-              </div>
-            </label>
-
-            <label className="checkbox-option">
-              <input
-                type="checkbox"
-                checked={settings.audioFeedbackEnabled}
-                onChange={(e) => handleChange('audioFeedbackEnabled', e.target.checked)}
-              />
-              <div>
-                <strong>Feedback audio</strong>
-                <p>Sons de confirmation pour les actions</p>
+                <p>Activer le retour haptique lors du verrouillage PTT</p>
               </div>
             </label>
           </div>

client/vite.config.js

@@ -1,9 +1,17 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react';
 import { VitePWA } from 'vite-plugin-pwa';
 import fs from 'fs';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => {
+  // Charger les variables d'environnement
+  const env = loadEnv(mode, process.cwd(), '');
+
+  // Déterminer l'URL de l'API (utilise variable d'environnement ou fallback localhost)
+  const apiUrl = env.VITE_API_URL || 'http://localhost:3000';
+  const livekitUrl = env.VITE_LIVEKIT_URL || 'ws://localhost:7880';
+
+  return {
   plugins: [
     react(),
     VitePWA({
@@ -68,12 +76,12 @@ export default defineConfig({
     },
     proxy: {
       '/api': {
-        target: 'http://localhost:3000',
+        target: apiUrl.startsWith('/') ? 'http://localhost:3000' : apiUrl,
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '')
       },
       '/livekit': {
-        target: 'ws://192.168.0.146:7880',
+        target: livekitUrl,
         ws: true,
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/livekit/, '')
@@ -84,4 +92,5 @@ export default defineConfig({
     outDir: 'dist',
     sourcemap: true
   }
+  };
 });

electron/.gitignore

@@ -0,0 +1,19 @@
+# Node
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# Electron
+dist/
+out/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+
+# Logs
+*.log

electron/CHANGELOG.md

@@ -0,0 +1,153 @@
+# PTT Live Desktop - Changelog
+
+## v0.3.0 - 2026-06-19
+
+### 🎉 Première version de l'application desktop Electron
+
+#### ✨ Nouvelles Fonctionnalités
+
+**Interface Electron**
+- Application desktop native (macOS/Linux)
+- Main Process spawn serveur Node.js automatiquement
+- IPC sécurisé via contextBridge (preload.js)
+- Démarrage/arrêt serveur depuis l'interface
+- Tray icon placeholder (à compléter)
+
+**Dashboard**
+- Stats temps réel (uptime, utilisateurs, connexions)
+- Liste utilisateurs connectés avec groupes
+- Génération QR Code automatique (détection IP réseau)
+- Bouton copier URL clients
+- Polling automatique toutes les 2 secondes
+
+**Configuration Audio**
+- Sélection devices input/output (auto-détectés)
+- Configuration sample rate (44.1/48/96 kHz)
+- Bitrate par défaut (32-320 kbps)
+- Jitter buffer (20-100 ms)
+- Sauvegarde dans config.yaml
+
+**Gestion Groupes**
+- Liste groupes existants
+- Création nouveau groupe (nom + bitrate)
+- Modification/suppression (via API admin)
+- Synchronisation config.yaml
+
+**Monitoring**
+- Logs serveur en temps réel
+- Filtrage par niveau (error/warn/info/debug)
+- Bouton effacer logs
+- Format timestamp + niveau + message
+
+**Notifications**
+- Toast visuelles (success/error/warning/info)
+- Auto-dismiss 5 secondes
+- Bouton fermeture manuelle
+- Animation slide-in
+
+#### 🛠️ Technique
+
+**Stack**
+- Electron 28.0.0
+- electron-builder 24.9.1
+- qrcode 1.5.3 (via CDN)
+- HTML/CSS/JS vanilla (pas de framework)
+
+**Architecture**
+- Main Process : spawn serveur, IPC handlers
+- Renderer Process : dashboard, fetch API admin
+- Communication : IPC + HTTP vers localhost:3000
+
+**API Utilisées**
+- `GET /admin/stats` : dashboard metrics
+- `GET /admin/users` : utilisateurs
+- `GET /admin/groups` : groupes
+- `POST /admin/groups` : créer groupe
+- `GET /admin/config` : config complète
+- `PUT /admin/config/audio` : config audio
+- `GET /admin/devices/list` : auto-détection devices
+- `POST /admin/audio/device` : sélectionner device
+- `GET /health` : health check
+
+**Build**
+- electron-builder configuré
+- macOS : .dmg + .app
+- Linux : .deb + .AppImage
+- Scripts : `npm run build:mac` / `build:linux`
+
+#### 📝 Documentation
+
+- [DESKTOP-APP.md](DESKTOP-APP.md) : doc complète (architecture, API, debug)
+- [QUICKSTART.md](QUICKSTART.md) : guide démarrage rapide
+- [README.md](README.md) : intégration Electron dans README principal
+- [CLAUDE.md](../CLAUDE.md) : section Application Desktop ajoutée
+
+#### 🚧 TODO / Limitations
+
+**À implémenter** :
+- [ ] WebSocket audio levels (VU-mètres temps réel)
+- [ ] Vraies icônes (icon.icns / icon.png)
+- [ ] Tray icon fonctionnel avec menu
+- [ ] Graphiques monitoring (Chart.js)
+- [ ] Export logs (CSV/JSON)
+- [ ] Matrice routing audio (drag & drop)
+- [ ] Auth admin (mot de passe)
+- [ ] Thème dark/light toggle
+- [ ] Auto-update (electron-updater)
+- [ ] Tests (Spectron/Playwright)
+
+**Limitations connues** :
+- QR Code utilise CDN (pas de lib locale)
+- Pas de CSP (Content-Security-Policy)
+- Pas de signature code (notarization macOS)
+- Tray icon pas implémenté (commenté dans main.js)
+
+#### 🔧 Installation
+
+```bash
+# Depuis la racine du projet
+./start-desktop.sh
+
+# OU depuis electron/
+cd electron
+npm install
+npm start
+```
+
+#### 🏗️ Structure Fichiers
+
+```
+electron/
+├── package.json         # Config Electron
+├── main.js              # Main Process (585 lignes)
+├── preload.js           # IPC bridge (40 lignes)
+├── README.md            # Doc technique
+├── QUICKSTART.md        # Guide démarrage
+├── CHANGELOG.md         # Ce fichier
+└── ui/
+    ├── index.html       # Interface (185 lignes)
+    ├── styles.css       # Styles (557 lignes)
+    └── app.js           # Logic frontend (627 lignes)
+```
+
+---
+
+## Prochaine version (v0.3.1)
+
+### 🎯 Priorités
+
+1. **VU-mètres WebSocket** : connexion `/audio-levels`
+2. **Icônes** : créer icon.icns + icon.png + tray-icon.png
+3. **Tray menu** : implémenter menu contextuel
+4. **Tests** : premiers tests Electron
+
+### 💡 Idées
+
+- Graphiques latence/bande passante (Chart.js)
+- Notifications desktop (Electron Notification API)
+- Matrice routing visuelle
+- Export config (JSON/YAML)
+
+---
+
+**Développé avec Claude Code**

electron/QUICKSTART.md

@@ -0,0 +1,139 @@
+# PTT Live Desktop - Quick Start Guide
+
+## 🚀 Lancement en 30 secondes
+
+```bash
+# Depuis la racine du projet
+./start-desktop.sh
+```
+
+C'est tout ! L'application démarre automatiquement le serveur.
+
+---
+
+## 📋 Checklist Première Utilisation
+
+### 1. Vérifier le serveur
+
+✅ Statut : **🟢 Actif** (coin haut-droit)
+✅ Dashboard : stats doivent s'afficher sous 5s
+
+### 2. Configurer l'audio
+
+**Configuration → Périphériques Audio**
+
+1. Sélectionner **Input Device** (carte son ou micro)
+2. Sélectionner **Output Device** (haut-parleurs)
+3. Cliquer **Appliquer**
+
+💡 Les devices sont auto-détectés depuis votre système
+
+### 3. Créer des groupes (optionnel)
+
+**Groupes → ➕ Nouveau groupe**
+
+1. Entrer un nom (ex: "Production")
+2. Bitrate par défaut : 96 kbps (voix standard)
+3. Sauvegarder
+
+Les groupes sont enregistrés dans `server/config/config.yaml`
+
+### 4. Connecter des clients
+
+**Dashboard → QR Code**
+
+1. Scanner le QR Code avec smartphone
+2. OU copier l'URL et ouvrir dans navigateur
+
+URL type : `https://192.168.1.10:5173`
+
+---
+
+## 🎯 Fonctionnalités Principales
+
+### Dashboard
+
+- **Stats** : uptime, utilisateurs, connexions
+- **QR Code** : connexion rapide clients
+- **Utilisateurs** : liste en temps réel
+
+### Configuration
+
+- **Audio** : devices, sample rate, bitrate, jitter buffer
+- **Groupes** : créer/modifier/supprimer
+
+### Monitoring
+
+- **Logs** : serveur en temps réel, filtrables
+
+---
+
+## 🐛 Problèmes Courants
+
+### Serveur ne démarre pas
+
+**Symptôme** : statut reste "⚪ Arrêté"
+
+**Solutions** :
+
+1. Vérifier port 3000 libre :
+   ```bash
+   lsof -i :3000
+   ```
+
+2. Vérifier LiveKit installé :
+   ```bash
+   livekit-server --version
+   # OU
+   ls ../server/bin/livekit-server
+   ```
+
+3. Voir logs dans **Monitoring → Logs**
+
+### QR Code ne s'affiche pas
+
+**Symptôme** : zone blanche
+
+**Solutions** :
+
+1. Attendre 5-10s (génération après démarrage serveur)
+2. Vérifier serveur actif (🟢)
+3. Recharger : **Dashboard** → cliquer nav
+
+### Pas d'audio
+
+**Symptôme** : clients connectés mais pas de son
+
+**Solutions** :
+
+1. **Configuration** → vérifier devices sélectionnés
+2. Vérifier permissions micro (système)
+3. Tester avec devices différents
+
+---
+
+## ⌨️ Raccourcis
+
+- `Cmd/Ctrl + R` : recharger interface
+- `Cmd/Ctrl + Q` : quitter app
+- `Cmd/Ctrl + Shift + I` : DevTools (debug)
+
+---
+
+## 📖 Documentation
+
+- [DESKTOP-APP.md](DESKTOP-APP.md) : doc complète
+- [README.md](../README.md) : vue d'ensemble projet
+- [CLAUDE.md](../CLAUDE.md) : doc développement
+
+---
+
+## 🆘 Support
+
+**Logs** : `Monitoring → Logs`
+**DevTools** : `npm run dev` (dans terminal)
+**Issues** : GitHub (si open source)
+
+---
+
+Bon intercom ! 🎙️

electron/README.md

@@ -0,0 +1,171 @@
+# PTT Live Desktop
+
+Application desktop Electron pour gérer le serveur PTT Live.
+
+## 🚀 Démarrage
+
+```bash
+# Depuis la racine du projet
+./start-desktop.sh
+
+# OU depuis electron/
+cd electron
+npm start
+```
+
+## 📦 Build pour distribution
+
+```bash
+cd electron
+
+# macOS
+npm run build:mac
+
+# Linux
+npm run build:linux
+
+# Les deux
+npm run build
+```
+
+Les builds seront dans `electron/dist/`.
+
+## 🎨 Fonctionnalités
+
+### Dashboard
+- ✅ Stats temps réel (uptime, utilisateurs, connexions)
+- ✅ Liste utilisateurs connectés
+- ✅ QR Code pour connexion rapide clients
+- ✅ Contrôles démarrage/arrêt serveur
+
+### Configuration
+- ✅ Sélection périphériques audio (input/output)
+- ✅ Paramètres audio (sample rate, bitrate, jitter buffer)
+- ✅ Sauvegarde automatique dans config.yaml
+
+### Groupes
+- ✅ Liste groupes configurés
+- ✅ Ajout/modification/suppression groupes
+- ✅ Configuration bitrate par groupe
+
+### Monitoring
+- 🚧 VU-mètres temps réel (WebSocket)
+- 🚧 Graphiques latence
+- 🚧 Stats réseau par client
+
+### Logs
+- ✅ Logs serveur en temps réel
+- ✅ Filtrage par niveau (error/warn/info/debug)
+- ✅ Export logs
+
+## 🏗️ Architecture
+
+```
+electron/
+├── main.js          # Main Process (Node.js)
+│                    # - Spawn serveur PTT Live
+│                    # - IPC avec renderer
+│                    # - Gestion tray icon
+│
+├── preload.js       # Bridge sécurisé IPC
+│
+└── ui/              # Renderer Process (Frontend)
+    ├── index.html   # Interface dashboard
+    ├── styles.css   # Styles
+    └── app.js       # Logic frontend
+                     # - Consomme API admin (/admin/*)
+                     # - Met à jour UI
+```
+
+## 🔌 Communication
+
+```
+┌─────────────────────────────────────────┐
+│         MAIN PROCESS (Node.js)          │
+│  ┌──────────────────────────────────┐   │
+│  │  Serveur PTT Live (spawn)        │   │
+│  │  - LiveKit Server                │   │
+│  │  - Audio Bridge                  │   │
+│  │  - API REST :3000                │   │
+│  └──────────────────────────────────┘   │
+│              ↕ IPC                      │
+│  ┌──────────────────────────────────┐   │
+│  │  Electron Window                 │   │
+│  └──────────────────────────────────┘   │
+└─────────────────────────────────────────┘
+              ↕ HTTP
+┌─────────────────────────────────────────┐
+│      RENDERER PROCESS (Frontend)        │
+│  - Fetch API admin                      │
+│  - WebSocket audio levels               │
+│  - Interface dashboard                  │
+└─────────────────────────────────────────┘
+```
+
+## 🛠️ API Utilisées
+
+Toutes les routes de l'API admin serveur :
+
+```
+GET  /admin/stats              → Dashboard metrics
+GET  /admin/users              → Utilisateurs connectés
+GET  /admin/groups             → Liste groupes
+POST /admin/groups             → Créer groupe
+PUT  /admin/groups/:id         → Modifier groupe
+DELETE /admin/groups/:id       → Supprimer groupe
+GET  /admin/config             → Config complète
+PUT  /admin/config/audio       → Mettre à jour config audio
+GET  /admin/audio/devices      → Énumérer devices
+POST /admin/audio/device       → Sélectionner device
+GET  /admin/audio/routing      → Config routing
+POST /admin/audio/routing      → Mettre à jour routing
+GET  /admin/devices/list       → Auto-détection devices
+GET  /admin/logs               → Logs serveur
+WS   /audio-levels             → WebSocket VU-mètres
+```
+
+## 🔧 TODO
+
+- [ ] Implémenter QR Code canvas (bibliothèque qrcode.js)
+- [ ] WebSocket audio levels pour VU-mètres
+- [ ] Notifications desktop (toast)
+- [ ] Tray icon avec vraie icône
+- [ ] Graphiques monitoring (Chart.js)
+- [ ] Export logs (CSV/JSON)
+- [ ] Auth admin (optionnel)
+- [ ] Thème dark/light toggle
+- [ ] Auto-update (electron-updater)
+
+## 📝 Notes de développement
+
+- **Main Process** : Gère le cycle de vie de l'app et spawn le serveur
+- **Renderer Process** : Interface web, appelle l'API REST du serveur
+- **IPC** : Communication sécurisée via contextBridge
+- **Serveur** : Tourne dans un process child_process, logs transmis au renderer
+- **Port** : 3000 par défaut (configurable via PORT env)
+
+## 🐛 Debug
+
+Ouvrir DevTools : automatique en mode `--dev`
+
+```bash
+npm run dev
+```
+
+Logs dans la console :
+- `[Serveur]` : logs du serveur PTT Live
+- `[Serveur Error]` : erreurs serveur
+- `✅/❌` : statut démarrage/arrêt
+
+## 📦 Packaging
+
+electron-builder crée :
+- **macOS** : `.dmg` + `.app` dans `dist/mac/`
+- **Linux** : `.deb` + `.AppImage` dans `dist/`
+
+Tester le build :
+
+```bash
+npm run build:mac
+open dist/mac/PTT\ Live\ Server.app
+```

electron/main.js

@@ -0,0 +1,580 @@
+/**
+ * PTT Live Desktop - Main Process
+ * Intègre le serveur Node.js existant dans une application Electron
+ */
+
+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;
+let serverProcess = null;
+let serverStarted = false;
+let rendererReady = false;
+
+const SERVER_PORT = process.env.PORT || 3000;
+// 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');
+
+/**
+ * Créer la fenêtre principale
+ */
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    minWidth: 900,
+    minHeight: 600,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+      nodeIntegration: false,
+      contextIsolation: true
+    },
+    title: 'PTT Live Server',
+    backgroundColor: '#1a1a1a'
+  });
+
+  // Charger l'interface dashboard
+  mainWindow.loadFile(path.join(__dirname, 'ui', 'index.html'));
+
+  // Attendre que le renderer soit prêt
+  mainWindow.webContents.on('did-finish-load', () => {
+    rendererReady = true;
+    console.log('✅ Interface chargée');
+
+    // Envoyer l'état initial du serveur
+    if (mainWindow) {
+      mainWindow.webContents.send('server:status', { running: serverStarted });
+    }
+  });
+
+  // DevTools en mode dev
+  if (isDev) {
+    mainWindow.webContents.openDevTools();
+  }
+
+  // Cleanup à la fermeture
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+    rendererReady = false;
+  });
+}
+
+/**
+ * Créer la tray icon (macOS/Linux)
+ */
+function createTray() {
+  // TODO: créer une vraie icône
+  // tray = new Tray(path.join(__dirname, 'assets', 'tray-icon.png'));
+
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: 'Ouvrir Dashboard',
+      click: () => {
+        if (mainWindow) {
+          mainWindow.show();
+        } else {
+          createWindow();
+        }
+      }
+    },
+    { type: 'separator' },
+    {
+      label: serverStarted ? '🟢 Serveur actif' : '⚪ Serveur arrêté',
+      enabled: false
+    },
+    {
+      label: serverStarted ? 'Arrêter serveur' : 'Démarrer serveur',
+      click: async () => {
+        if (serverStarted) {
+          await stopServer();
+        } else {
+          await startServer();
+        }
+      }
+    },
+    { type: 'separator' },
+    {
+      label: 'Quitter',
+      click: () => {
+        app.quit();
+      }
+    }
+  ]);
+
+  if (tray) {
+    tray.setContextMenu(contextMenu);
+    tray.setToolTip('PTT Live Server');
+  }
+}
+
+/**
+ * Démarrer le serveur Node.js
+ */
+async function startServer() {
+  return new Promise((resolve, reject) => {
+    if (serverProcess) {
+      console.log('⚠️  Serveur déjà démarré');
+      resolve({ success: false, message: 'Server already running' });
+      return;
+    }
+
+    console.log('🚀 Démarrage du serveur PTT Live...');
+
+    const serverPath = path.join(__dirname, '..', 'server', 'index.js');
+
+    serverProcess = spawn('node', [serverPath], {
+      cwd: path.join(__dirname, '..', 'server'),
+      env: {
+        ...process.env,
+        PORT: SERVER_PORT,
+        USE_LOCAL_LIVEKIT: 'true',
+        ENABLE_HTTPS: ENABLE_HTTPS ? 'true' : 'false',
+        NODE_ENV: isDev ? 'development' : 'production'
+      }
+    });
+
+    serverProcess.stdout.on('data', (data) => {
+      const output = data.toString();
+      console.log('[Serveur]', output);
+
+      // Transmettre les logs au renderer (seulement si prêt)
+      if (mainWindow && rendererReady) {
+        mainWindow.webContents.send('server:log', {
+          level: 'info',
+          message: output.trim()
+        });
+      }
+
+      // Détecter démarrage réussi
+      if (output.includes('Serveur prêt') || output.includes('API REST démarrée')) {
+        serverStarted = true;
+        console.log('✅ Serveur démarré avec succès');
+
+        if (mainWindow && rendererReady) {
+          mainWindow.webContents.send('server:status', { running: true });
+        }
+
+        createTray(); // Mettre à jour tray
+        resolve({ success: true, url: SERVER_URL });
+      }
+    });
+
+    serverProcess.stderr.on('data', (data) => {
+      const output = data.toString();
+
+      // LiveKit envoie INFO/WARN dans stderr (comportement normal Go)
+      // Ne les traiter comme erreurs que s'ils contiennent vraiment "ERROR"
+      const isError = output.includes('ERROR') || output.includes('Error:');
+
+      console.log(isError ? '[Serveur Error]' : '[Serveur]', output);
+
+      if (mainWindow && rendererReady) {
+        mainWindow.webContents.send('server:log', {
+          level: isError ? 'error' : 'info',
+          message: output.trim()
+        });
+      }
+
+      // Détecter démarrage LiveKit dans stderr
+      if (output.includes('starting LiveKit server') || output.includes('Serveur prêt')) {
+        if (!serverStarted) {
+          serverStarted = true;
+          console.log('✅ Serveur démarré (détecté via stderr)');
+
+          if (mainWindow && rendererReady) {
+            mainWindow.webContents.send('server:status', { running: true });
+          }
+
+          createTray();
+          resolve({ success: true, url: SERVER_URL });
+        }
+      }
+    });
+
+    serverProcess.on('error', (error) => {
+      console.error('❌ Erreur démarrage serveur:', error);
+      serverStarted = false;
+
+      if (mainWindow && rendererReady) {
+        mainWindow.webContents.send('server:status', { running: false, error: error.message });
+      }
+
+      reject(error);
+    });
+
+    serverProcess.on('exit', (code, signal) => {
+      console.log(`⚠️  Serveur arrêté (code: ${code}, signal: ${signal})`);
+      serverProcess = null;
+      serverStarted = false;
+
+      if (mainWindow && rendererReady) {
+        mainWindow.webContents.send('server:status', { running: false });
+      }
+
+      createTray(); // Mettre à jour tray
+    });
+
+    // Timeout de sécurité (15s)
+    setTimeout(() => {
+      if (!serverStarted && serverProcess) {
+        console.log('⏱️  Timeout démarrage serveur (15s), vérification health...');
+
+        // Vérifier que le serveur répond vraiment
+        pingServer().then((health) => {
+          if (health.success) {
+            serverStarted = true;
+            console.log('✅ Serveur répond au health check');
+
+            if (mainWindow) {
+              mainWindow.webContents.send('server:status', { running: true });
+            }
+
+            createTray();
+            resolve({ success: true, url: SERVER_URL });
+          } else {
+            console.error('❌ Serveur ne répond pas après 15s');
+            reject(new Error('Server startup timeout'));
+          }
+        });
+      }
+    }, 15000);
+  });
+}
+
+/**
+ * Arrêter le serveur Node.js
+ */
+async function stopServer() {
+  return new Promise((resolve) => {
+    if (!serverProcess) {
+      console.log('⚠️  Aucun serveur à arrêter');
+      resolve({ success: false, message: 'No server running' });
+      return;
+    }
+
+    console.log('🛑 Arrêt du serveur...');
+
+    serverProcess.on('exit', () => {
+      serverProcess = null;
+      serverStarted = false;
+      console.log('✅ Serveur arrêté');
+
+      if (mainWindow) {
+        mainWindow.webContents.send('server:status', { running: false });
+      }
+
+      createTray();
+      resolve({ success: true });
+    });
+
+    // Envoyer SIGTERM (shutdown gracieux)
+    serverProcess.kill('SIGTERM');
+
+    // Forcer après 5s si nécessaire
+    setTimeout(() => {
+      if (serverProcess) {
+        console.log('⚠️  Force kill du serveur');
+        serverProcess.kill('SIGKILL');
+      }
+    }, 5000);
+  });
+}
+
+/**
+ * Tester si le serveur répond
+ */
+async function pingServer() {
+  return new Promise((resolve) => {
+    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', () => {
+        try {
+          const json = JSON.parse(data);
+          resolve({ success: true, data: json });
+        } catch (e) {
+          resolve({ success: false, error: 'Invalid response' });
+        }
+      });
+    }).on('error', (err) => {
+      resolve({ success: false, error: err.message });
+    });
+  });
+}
+
+// ========== App Lifecycle ==========
+
+app.whenReady().then(async () => {
+  // Setup IPC Handlers (doit être après app.whenReady)
+  ipcMain.handle('server:start', async () => {
+    return await startServer();
+  });
+
+  ipcMain.handle('server:stop', async () => {
+    return await stopServer();
+  });
+
+  ipcMain.handle('server:status', async () => {
+    if (!serverStarted) {
+      return { running: false };
+    }
+
+    const health = await pingServer();
+    return {
+      running: health.success,
+      health: health.data,
+      error: health.error,
+      url: SERVER_URL
+    };
+  });
+
+  ipcMain.handle('server:ping', 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();
+
+  // Vérifier setup automatique (certificats)
+  console.log('🔍 Vérification configuration...');
+  const projectRoot = path.join(__dirname, '..');
+  const certsDir = path.join(projectRoot, 'certs');
+
+  if (!setupHelper.certificatesExist(certsDir)) {
+    console.log('⚠️  Certificats SSL manquants, configuration automatique...\n');
+
+    // Afficher dialog d'information
+    const infoResult = await dialog.showMessageBox(mainWindow, {
+      type: 'info',
+      title: 'Configuration initiale',
+      message: 'Première utilisation de PTT Live',
+      detail: 'Configuration des certificats SSL en cours...\nCela peut prendre 1-2 minutes.\n\nmkcert sera installé automatiquement.',
+      buttons: ['Continuer', 'Annuler']
+    });
+
+    if (infoResult.response === 1) {
+      console.log('⚠️  Configuration annulée par l\'utilisateur');
+      return;
+    }
+
+    // Lancer setup auto
+    const setupResult = await setupHelper.autoSetup(projectRoot);
+
+    if (!setupResult.success) {
+      // Échec du setup automatique
+      await dialog.showMessageBox(mainWindow, {
+        type: 'error',
+        title: 'Configuration échouée',
+        message: 'Impossible de configurer automatiquement les certificats SSL',
+        detail: setupResult.manual
+          ? 'Veuillez exécuter manuellement :\n./setup-certificates.sh\n\nOu installer mkcert : https://github.com/FiloSottile/mkcert'
+          : setupResult.error,
+        buttons: ['OK']
+      });
+
+      console.error('❌ Setup automatique échoué');
+      return; // Ne pas démarrer le serveur
+    }
+
+    // Setup réussi
+    await dialog.showMessageBox(mainWindow, {
+      type: 'info',
+      title: 'Configuration terminée',
+      message: 'Certificats SSL configurés avec succès !',
+      detail: `Votre IP réseau : ${setupResult.networkIP}\n\nLe serveur va démarrer...`,
+      buttons: ['OK']
+    });
+
+    console.log('✅ Setup automatique terminé\n');
+  } else {
+    console.log('✅ Certificats présents\n');
+  }
+
+  // NE PAS démarrer automatiquement
+  // L'utilisateur cliquera sur "Démarrer" dans l'interface
+  console.log('✅ Application prête');
+  console.log('💡 Cliquez sur "Démarrer" pour lancer le serveur\n');
+});
+
+app.on('window-all-closed', () => {
+  // Ne pas quitter l'app sur macOS (comportement standard)
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});
+
+// Cleanup au quit
+app.on('before-quit', async (event) => {
+  if (serverProcess) {
+    event.preventDefault();
+    console.log('🧹 Cleanup avant fermeture...');
+    await stopServer();
+    app.quit();
+  }
+});
+
+// Gestion des erreurs non catchées
+process.on('uncaughtException', (error) => {
+  console.error('❌ Erreur non catchée:', error);
+});
+
+process.on('unhandledRejection', (reason, promise) => {
+  console.error('❌ Promise rejection non gérée:', reason);
+});

electron/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "ptt-live-desktop",
+  "version": "0.3.0",
+  "description": "PTT Live - Desktop Server Application",
+  "main": "main.js",
+  "scripts": {
+    "start": "electron .",
+    "dev": "electron . --dev",
+    "build": "electron-builder",
+    "build:mac": "electron-builder --mac",
+    "build:linux": "electron-builder --linux"
+  },
+  "build": {
+    "appId": "com.pttlive.desktop",
+    "productName": "PTT Live Server",
+    "directories": {
+      "output": "dist"
+    },
+    "files": [
+      "main.js",
+      "preload.js",
+      "ui/**/*",
+      "../server/**/*",
+      "!../server/node_modules",
+      "../server/node_modules/**/*"
+    ],
+    "mac": {
+      "category": "public.app-category.utilities",
+      "icon": "assets/icon.icns",
+      "target": [
+        "dmg",
+        "zip"
+      ]
+    },
+    "linux": {
+      "category": "AudioVideo",
+      "icon": "assets/icon.png",
+      "target": [
+        "deb",
+        "AppImage"
+      ]
+    }
+  },
+  "keywords": [
+    "electron",
+    "webrtc",
+    "intercom",
+    "audio"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "electron": "^28.0.0",
+    "electron-builder": "^24.9.1"
+  },
+  "dependencies": {
+    "electron-store": "^8.1.0",
+    "qrcode": "^1.5.4",
+    "yaml": "^2.9.0"
+  }
+}

electron/preload.js

@@ -0,0 +1,59 @@
+/**
+ * PTT Live Desktop - Preload Script
+ * Bridge sécurisé entre Main Process et Renderer Process
+ */
+
+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'),
+    stop: () => ipcRenderer.invoke('server:stop'),
+    status: () => ipcRenderer.invoke('server:status'),
+    ping: () => ipcRenderer.invoke('server:ping'),
+
+    // Écouter les événements du serveur
+    onStatus: (callback) => {
+      ipcRenderer.on('server:status', (event, data) => callback(data));
+    },
+    onLog: (callback) => {
+      ipcRenderer.on('server:log', (event, data) => callback(data));
+    }
+  },
+
+  // 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'
+});
+
+console.log('✅ Preload script chargé');

electron/setup-helper.js

@@ -0,0 +1,249 @@
+/**
+ * PTT Live Desktop - Setup Helper
+ * Automatise l'installation des dépendances et certificats
+ */
+
+const { exec } = require('child_process');
+const { promisify } = require('util');
+const { existsSync } = require('fs');
+const { join } = require('path');
+const os = require('os');
+
+const execPromise = promisify(exec);
+
+/**
+ * Vérifie si mkcert est installé
+ */
+async function isMkcertInstalled() {
+  try {
+    await execPromise('mkcert -version');
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+/**
+ * Installe mkcert automatiquement
+ */
+async function installMkcert() {
+  const platform = os.platform();
+
+  console.log('📦 Installation de mkcert...');
+
+  try {
+    if (platform === 'darwin') {
+      // macOS - via Homebrew
+      if (await isHomebrewInstalled()) {
+        await execPromise('brew install mkcert nss');
+        console.log('✅ mkcert installé via Homebrew');
+        return true;
+      } else {
+        throw new Error('Homebrew requis sur macOS');
+      }
+    } else if (platform === 'linux') {
+      // Linux - téléchargement direct
+      await execPromise('curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64"');
+      await execPromise('chmod +x mkcert-v*-linux-amd64');
+      await execPromise('sudo mv mkcert-v*-linux-amd64 /usr/local/bin/mkcert');
+      console.log('✅ mkcert installé');
+      return true;
+    } else {
+      throw new Error(`Plateforme non supportée: ${platform}`);
+    }
+  } catch (error) {
+    console.error('❌ Erreur installation mkcert:', error.message);
+    return false;
+  }
+}
+
+/**
+ * Vérifie si Homebrew est installé
+ */
+async function isHomebrewInstalled() {
+  try {
+    await execPromise('brew --version');
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+/**
+ * Installe la CA locale
+ */
+async function installCA() {
+  try {
+    console.log('🔑 Installation de la Certificate Authority locale...');
+    await execPromise('mkcert -install');
+    console.log('✅ CA locale installée');
+    return true;
+  } catch (error) {
+    console.error('❌ Erreur installation CA:', error.message);
+    return false;
+  }
+}
+
+/**
+ * Détecte l'IP réseau locale
+ */
+function getNetworkIP() {
+  const interfaces = os.networkInterfaces();
+
+  // Priorité : WiFi > Ethernet
+  const priority = ['en0', 'en1', 'eth0', 'wlan0'];
+
+  for (const name of priority) {
+    const iface = interfaces[name];
+    if (iface) {
+      for (const net of iface) {
+        if (net.family === 'IPv4' && !net.internal) {
+          return net.address;
+        }
+      }
+    }
+  }
+
+  // Fallback : première IP non-interne
+  for (const name of Object.keys(interfaces)) {
+    for (const net of interfaces[name]) {
+      if (net.family === 'IPv4' && !net.internal) {
+        return net.address;
+      }
+    }
+  }
+
+  return '192.168.1.100'; // Fallback ultime
+}
+
+/**
+ * Génère les certificats SSL
+ */
+async function generateCertificates(certsDir) {
+  try {
+    const networkIP = getNetworkIP();
+    const hostname = os.hostname();
+
+    console.log('📜 Génération des certificats...');
+    console.log(`   IP réseau : ${networkIP}`);
+
+    // Créer répertoire si nécessaire
+    if (!existsSync(certsDir)) {
+      await execPromise(`mkdir -p "${certsDir}"`);
+    }
+
+    // Générer certificats
+    const cmd = `cd "${certsDir}" && mkcert localhost 127.0.0.1 ::1 "${networkIP}" "*.local" "${hostname}.local"`;
+    await execPromise(cmd);
+
+    // Renommer pour simplifier
+    const files = await execPromise(`ls "${certsDir}"/*.pem`);
+    const fileList = files.stdout.trim().split('\n');
+
+    // Trouver les fichiers générés
+    const certFile = fileList.find(f => !f.includes('-key.pem'));
+    const keyFile = fileList.find(f => f.includes('-key.pem'));
+
+    if (certFile && keyFile) {
+      // Copier avec noms standards
+      await execPromise(`cp "${certFile}" "${join(certsDir, 'localhost.pem')}"`);
+      await execPromise(`cp "${keyFile}" "${join(certsDir, 'localhost-key.pem')}"`);
+    }
+
+    console.log('✅ Certificats générés');
+    return { networkIP, certPath: join(certsDir, 'localhost.pem'), keyPath: join(certsDir, 'localhost-key.pem') };
+  } catch (error) {
+    console.error('❌ Erreur génération certificats:', error.message);
+    return null;
+  }
+}
+
+/**
+ * Vérifie si les certificats existent et sont valides
+ */
+function certificatesExist(certsDir) {
+  const certPath = join(certsDir, 'localhost.pem');
+  const keyPath = join(certsDir, 'localhost-key.pem');
+
+  return existsSync(certPath) && existsSync(keyPath);
+}
+
+/**
+ * Setup complet automatique
+ */
+async function autoSetup(projectRoot) {
+  const certsDir = join(projectRoot, 'certs');
+
+  console.log('🚀 Configuration automatique PTT Live...\n');
+
+  // 1. Vérifier certificats existants
+  if (certificatesExist(certsDir)) {
+    console.log('✅ Certificats déjà présents');
+    return { success: true, needsRestart: false };
+  }
+
+  console.log('⚠️  Certificats SSL non trouvés\n');
+
+  // 2. Vérifier mkcert
+  const hasMkcert = await isMkcertInstalled();
+
+  if (!hasMkcert) {
+    console.log('📦 mkcert non installé, installation...\n');
+
+    const installed = await installMkcert();
+    if (!installed) {
+      return {
+        success: false,
+        error: 'Installation mkcert échouée',
+        manual: true,
+        instructions: 'Installez mkcert manuellement : https://github.com/FiloSottile/mkcert'
+      };
+    }
+  } else {
+    console.log('✅ mkcert déjà installé\n');
+  }
+
+  // 3. Installer CA locale
+  const caInstalled = await installCA();
+  if (!caInstalled) {
+    return {
+      success: false,
+      error: 'Installation CA échouée',
+      manual: true
+    };
+  }
+
+  console.log('');
+
+  // 4. Générer certificats
+  const result = await generateCertificates(certsDir);
+  if (!result) {
+    return {
+      success: false,
+      error: 'Génération certificats échouée',
+      manual: true
+    };
+  }
+
+  console.log('\n✅ Configuration terminée !');
+  console.log(`   Certificats : ${certsDir}`);
+  console.log(`   IP réseau : ${result.networkIP}\n`);
+
+  return {
+    success: true,
+    needsRestart: false,
+    networkIP: result.networkIP,
+    certPath: result.certPath,
+    keyPath: result.keyPath
+  };
+}
+
+module.exports = {
+  isMkcertInstalled,
+  installMkcert,
+  installCA,
+  generateCertificates,
+  certificatesExist,
+  getNetworkIP,
+  autoSetup
+};

electron/ui/index.html

@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PTT Live Server</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <!-- Toast Container -->
+  <div class="toast-container" id="toast-container"></div>
+
+  <div id="app">
+    <!-- Header -->
+    <header class="header">
+      <div class="header-left">
+        <h1>🎙️ PTT Live Server</h1>
+        <span class="version" id="version">v0.3.0</span>
+      </div>
+      <div class="header-right">
+        <div class="server-status">
+          <span class="status-indicator" id="status-indicator">⚪</span>
+          <span id="status-text">Arrêté</span>
+        </div>
+        <button id="btn-start" class="btn btn-primary">Démarrer</button>
+        <button id="btn-stop" class="btn btn-secondary" disabled>Arrêter</button>
+      </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Sidebar Navigation -->
+      <nav class="sidebar">
+        <button class="nav-item active" data-view="dashboard">
+          📊 Dashboard
+        </button>
+        <button class="nav-item" data-view="config">
+          ⚙️ Configuration
+        </button>
+        <button class="nav-item" data-view="groups">
+          👥 Groupes
+        </button>
+        <button class="nav-item" data-view="monitoring">
+          📈 Monitoring
+        </button>
+        <button class="nav-item" data-view="logs">
+          📝 Logs
+        </button>
+      </nav>
+
+      <!-- Content Area -->
+      <div class="content">
+        <!-- Dashboard View -->
+        <div id="view-dashboard" class="view active">
+          <h2>Dashboard</h2>
+
+          <!-- Stats Cards -->
+          <div class="stats-grid">
+            <div class="stat-card">
+              <div class="stat-label">Uptime</div>
+              <div class="stat-value" id="stat-uptime">--</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-label">Utilisateurs</div>
+              <div class="stat-value" id="stat-users">--</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-label">Groupes actifs</div>
+              <div class="stat-value" id="stat-groups">--</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-label">Connexions totales</div>
+              <div class="stat-value" id="stat-total-connections">--</div>
+            </div>
+          </div>
+
+          <!-- QR Code Section -->
+          <div class="section">
+            <h3>📱 Connexion rapide clients</h3>
+            <div class="qr-container">
+              <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>
+                <button class="btn btn-small" id="btn-copy-url">Copier l'URL</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Active Users -->
+          <div class="section">
+            <h3>👤 Utilisateurs connectés</h3>
+            <div id="users-list" class="users-list">
+              <p class="empty-state">Aucun utilisateur connecté</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Configuration View -->
+        <div id="view-config" class="view">
+          <h2>Configuration Audio</h2>
+
+          <div class="section">
+            <h3>🔌 Périphériques Audio</h3>
+            <div class="form-group">
+              <label>Device Input</label>
+              <select id="input-device" class="form-control">
+                <option>Chargement...</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>Device Output</label>
+              <select id="output-device" class="form-control">
+                <option>Chargement...</option>
+              </select>
+            </div>
+            <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">
+              <label>Sample Rate</label>
+              <select id="sample-rate" class="form-control">
+                <option value="44100">44.1 kHz</option>
+                <option value="48000" selected>48 kHz</option>
+                <option value="96000">96 kHz</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>Bitrate par défaut (kbps)</label>
+              <input type="number" id="default-bitrate" class="form-control" value="96" min="32" max="320" step="32">
+            </div>
+            <div class="form-group">
+              <label>Jitter Buffer (ms)</label>
+              <input type="number" id="jitter-buffer" class="form-control" value="40" min="20" max="100" step="10">
+            </div>
+            <button class="btn btn-primary" id="btn-save-audio">Sauvegarder</button>
+          </div>
+        </div>
+
+        <!-- Groups View -->
+        <div id="view-groups" class="view">
+          <h2>Gestion des Groupes</h2>
+          <button class="btn btn-primary" id="btn-add-group">➕ Nouveau groupe</button>
+          <div id="groups-list" class="groups-list">
+            <p class="empty-state">Chargement des groupes...</p>
+          </div>
+        </div>
+
+        <!-- Monitoring View -->
+        <div id="view-monitoring" class="view">
+          <h2>Monitoring Audio</h2>
+          <div class="section">
+            <h3>🔊 VU-Mètres</h3>
+            <div id="vu-meters" class="vu-meters">
+              <p class="empty-state">En attente de données audio...</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Logs View -->
+        <div id="view-logs" class="view">
+          <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>
+              <option value="warn">Warnings</option>
+              <option value="info">Info</option>
+              <option value="debug">Debug</option>
+            </select>
+          </div>
+          <div id="logs-container" class="logs-container">
+            <p class="empty-state">Aucun log</p>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <!-- 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/styles.css

@@ -0,0 +1,802 @@
+/**
+ * PTT Live Desktop - Styles
+ */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --bg-primary: #1a1a1a;
+  --bg-secondary: #2a2a2a;
+  --bg-tertiary: #3a3a3a;
+  --text-primary: #ffffff;
+  --text-secondary: #b0b0b0;
+  --accent-primary: #4a9eff;
+  --accent-success: #4caf50;
+  --accent-warning: #ff9800;
+  --accent-error: #f44336;
+  --border-color: #444;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  overflow: hidden;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+/* Header */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.version {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  background: var(--bg-tertiary);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.server-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: var(--bg-tertiary);
+  border-radius: 6px;
+}
+
+.status-indicator {
+  font-size: 1.25rem;
+}
+
+/* Buttons */
+.btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--accent-primary);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #3d8eef;
+}
+
+.btn-secondary {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: #4a4a4a;
+}
+
+.btn-small {
+  padding: 0.375rem 0.75rem;
+  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;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 200px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-color);
+  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.nav-item {
+  padding: 0.75rem 1.5rem;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  text-align: left;
+  font-size: 0.9375rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  border-left: 3px solid transparent;
+}
+
+.nav-item:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.nav-item.active {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border-left-color: var(--accent-primary);
+}
+
+/* Content */
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 2rem;
+}
+
+.view {
+  display: none;
+}
+
+.view.active {
+  display: block;
+}
+
+.view h2 {
+  font-size: 1.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.view h3 {
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+}
+
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.stat-card {
+  background: var(--bg-secondary);
+  padding: 1.5rem;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+.stat-value {
+  font-size: 2rem;
+  font-weight: 600;
+  color: var(--accent-primary);
+}
+
+/* Sections */
+.section {
+  background: var(--bg-secondary);
+  padding: 1.5rem;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  margin-bottom: 1.5rem;
+}
+
+/* QR Code */
+.qr-container {
+  display: flex;
+  gap: 2rem;
+  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;
+}
+
+.url-text {
+  font-family: 'Courier New', monospace;
+  background: var(--bg-tertiary);
+  padding: 0.75rem;
+  border-radius: 6px;
+  margin: 0.5rem 0 1rem 0;
+  word-break: break-all;
+}
+
+/* Users List */
+.users-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.user-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  background: var(--bg-tertiary);
+  border-radius: 6px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.user-status {
+  font-size: 1.25rem;
+}
+
+.user-details h4 {
+  font-size: 1rem;
+  margin-bottom: 0.25rem;
+}
+
+.user-details p {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.user-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background: var(--bg-primary);
+}
+
+.user-badge.ptt-active {
+  background: var(--accent-error);
+}
+
+/* Forms */
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: var(--text-secondary);
+}
+
+.form-control {
+  width: 100%;
+  padding: 0.75rem;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 0.9375rem;
+}
+
+.form-control-small {
+  width: auto;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.form-control:focus {
+  outline: none;
+  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;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.group-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+}
+
+.group-info h4 {
+  font-size: 1.125rem;
+  margin-bottom: 0.5rem;
+}
+
+.group-info p {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.group-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* VU Meters */
+.vu-meters {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.vu-meter {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.vu-label {
+  width: 120px;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.vu-bar {
+  flex: 1;
+  height: 24px;
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+
+.vu-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent-success), var(--accent-warning), var(--accent-error));
+  transition: width 0.1s ease-out;
+}
+
+.vu-value {
+  width: 60px;
+  text-align: right;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Logs */
+.logs-controls {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.logs-container {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1rem;
+  max-height: 600px;
+  overflow-y: auto;
+  font-family: 'Courier New', monospace;
+  font-size: 0.8125rem;
+}
+
+.log-entry {
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  gap: 1rem;
+}
+
+.log-entry:last-child {
+  border-bottom: none;
+}
+
+.log-time {
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.log-level {
+  width: 60px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.log-level.error { color: var(--accent-error); }
+.log-level.warn { color: var(--accent-warning); }
+.log-level.info { color: var(--accent-primary); }
+.log-level.debug { color: var(--text-secondary); }
+
+.log-message {
+  flex: 1;
+  word-break: break-word;
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  color: var(--text-secondary);
+  padding: 2rem;
+  font-size: 0.9375rem;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #4a4a4a;
+}
+
+/* Toast Notifications */
+.toast-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.toast {
+  min-width: 300px;
+  padding: 1rem 1.5rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  animation: slideIn 0.3s ease-out;
+}
+
+.toast.success {
+  border-left: 4px solid var(--accent-success);
+}
+
+.toast.error {
+  border-left: 4px solid var(--accent-error);
+}
+
+.toast.warning {
+  border-left: 4px solid var(--accent-warning);
+}
+
+.toast.info {
+  border-left: 4px solid var(--accent-primary);
+}
+
+.toast-icon {
+  font-size: 1.5rem;
+}
+
+.toast-message {
+  flex: 1;
+  font-size: 0.9375rem;
+}
+
+.toast-close {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: 0;
+  transition: color 0.2s;
+}
+
+.toast-close:hover {
+  color: var(--text-primary);
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(400px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    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;
+  }
+}

install.sh

@@ -0,0 +1,47 @@
+#!/bin/bash
+
+# PTT Live - Script d'installation multi-OS
+# Détecte automatiquement le système et lance l'installeur approprié
+
+set -e
+
+# Couleurs
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+RED='\033[0;31m'
+BLUE='\033[0;34m'
+NC='\033[0m'
+
+echo -e "${BLUE}=================================="
+echo "🚀 PTT Live - Installation"
+echo "==================================${NC}"
+echo ""
+
+# Détection du système d'exploitation
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  echo -e "${GREEN}📱 Système détecté : macOS${NC}"
+  echo ""
+  exec ./install/macos.sh
+elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+  echo -e "${GREEN}🐧 Système détecté : Linux${NC}"
+  echo ""
+  exec ./install/linux.sh
+elif [[ "$OSTYPE" == "msys" ]] || [[ "$OSTYPE" == "cygwin" ]] || [[ "$OSTYPE" == "win32" ]]; then
+  echo -e "${YELLOW}🪟 Système détecté : Windows${NC}"
+  echo ""
+  echo -e "${RED}❌ Windows n'est pas encore supporté (Phase 3)${NC}"
+  echo ""
+  echo "Plateformes supportées :"
+  echo "  • macOS (via Homebrew)"
+  echo "  • Linux (Debian/Ubuntu/Fedora)"
+  echo ""
+  exit 1
+else
+  echo -e "${RED}❌ Système non reconnu : $OSTYPE${NC}"
+  echo ""
+  echo "Plateformes supportées :"
+  echo "  • macOS"
+  echo "  • Linux"
+  echo ""
+  exit 1
+fi

install/linux.sh

@@ -71,7 +71,8 @@ install_system_deps() {
                 # Outils PipeWire
                 sudo apt install -y \
                     pipewire-bin \
-                    libspa-0.2-jack
+                    libspa-0.2-jack \
+                    pulseaudio-utils
 
                 # Démarrage automatique
                 systemctl --user enable --now pipewire pipewire-pulse wireplumber
@@ -168,7 +169,8 @@ install_livekit_server() {
     echo ""
     echo "Téléchargement de LiveKit Server..."
 
-    LIVEKIT_VERSION="v1.5.2"
+    LIVEKIT_VERSION="v1.12.0"
+    LIVEKIT_VERSION_NUM="${LIVEKIT_VERSION#v}"  # Retire le 'v' pour le nom du fichier
     LIVEKIT_DIR="$PROJECT_ROOT/server/bin"
     LIVEKIT_BINARY="$LIVEKIT_DIR/livekit-server"
 
@@ -189,7 +191,7 @@ install_livekit_server() {
             ;;
     esac
 
-    LIVEKIT_URL="https://github.com/livekit/livekit/releases/download/${LIVEKIT_VERSION}/livekit_${LIVEKIT_VERSION}_linux_${LIVEKIT_ARCH}.tar.gz"
+    LIVEKIT_URL="https://github.com/livekit/livekit/releases/download/${LIVEKIT_VERSION}/livekit_${LIVEKIT_VERSION_NUM}_linux_${LIVEKIT_ARCH}.tar.gz"
 
     echo "Téléchargement depuis : $LIVEKIT_URL"
 
@@ -222,6 +224,61 @@ install_node_deps() {
     echo "Dépendances Node.js installées !"
 }
 
+# Configuration réseau et génération .env
+configure_network() {
+    echo ""
+    echo "Configuration réseau..."
+
+    # Détection IP réseau
+    NETWORK_IP=$(hostname -I | awk '{print $1}')
+
+    if [ -z "$NETWORK_IP" ]; then
+        echo "⚠️  IP réseau non détectée, utilisation localhost"
+        NETWORK_IP="localhost"
+    else
+        echo "✓ IP réseau détectée : ${NETWORK_IP}"
+    fi
+
+    # Générer .env serveur
+    echo "Génération configuration serveur..."
+
+    cat > "$PROJECT_ROOT/server/.env" << EOF
+# Configuration PTT Live Server
+# Généré automatiquement par install/linux.sh
+
+USE_LOCAL_LIVEKIT=true
+
+# LiveKit Configuration
+# AUTO = détection automatique IP réseau au démarrage
+LIVEKIT_URL=AUTO
+# En mode --dev, LiveKit utilise ces clés par défaut
+LIVEKIT_API_KEY=devkey
+LIVEKIT_API_SECRET=secret
+
+# Server Configuration
+PORT=3000
+NODE_ENV=development
+EOF
+
+    echo "✓ Configuration serveur générée (server/.env)"
+
+    # Générer .env client
+    echo "Génération configuration client..."
+
+    cat > "$PROJECT_ROOT/client/.env" << EOF
+# Configuration PTT Live Client
+# Généré automatiquement par install/linux.sh
+
+# En développement local, utilise le proxy Vite
+VITE_API_URL=/api
+
+# Pour accès réseau (autres devices), décommentez et mettez l'IP du serveur :
+# VITE_API_URL=http://${NETWORK_IP}:3000
+EOF
+
+    echo "✓ Configuration client générée (client/.env)"
+}
+
 # Configuration audio
 configure_audio() {
     echo ""
@@ -259,23 +316,35 @@ configure_audio() {
 print_summary() {
     echo ""
     echo "========================================"
-    echo "  Installation terminée !"
+    echo "  ✅ Installation terminée !"
     echo "========================================"
     echo ""
-    echo "Prochaines étapes :"
+    echo "🚀 Démarrage rapide :"
     echo ""
-    echo "1. Démarrer le serveur :"
-    echo "   cd $PROJECT_ROOT/server"
-    echo "   npm run dev"
+    echo "   # Mode développement (recommandé)"
+    echo "   ./start.sh --dev"
     echo ""
-    echo "2. Démarrer le client (autre terminal) :"
-    echo "   cd $PROJECT_ROOT/client"
-    echo "   npm run dev"
+    echo "   # Mode production"
+    echo "   ./start.sh"
     echo ""
-    echo "3. Accéder à l'interface :"
-    echo "   http://localhost:5173"
+    echo "📝 OU manuellement (deux terminaux) :"
+    echo ""
+    echo "   Terminal 1 : cd $PROJECT_ROOT/server && npm run dev"
+    echo "   Terminal 2 : cd $PROJECT_ROOT/client && npm run dev"
+    echo ""
+    echo "🌐 Accès après démarrage :"
+    echo "   • Développement local : https://localhost:5173"
+    echo "   • Depuis smartphone (WiFi) : https://${NETWORK_IP}:5173"
+    echo "   • Admin : https://${NETWORK_IP}:5173/admin"
+    echo ""
+    echo "💡 Configuration réseau :"
+    echo "   IP serveur détectée : ${NETWORK_IP}"
+    echo "   LiveKit URL : AUTO (détection dynamique)"
+    echo ""
+    echo "📖 Documentation :"
+    echo "   • README.md - Guide complet"
+    echo "   • README-PORTABLE.md - Déploiement portable"
     echo ""
-    echo "Documentation : $PROJECT_ROOT/README.md"
     echo "========================================"
     echo ""
 }
@@ -286,6 +355,7 @@ main() {
     install_system_deps
     install_livekit_server
     install_node_deps
+    configure_network
     configure_audio
     print_summary
 }

install/macos.sh

@@ -82,7 +82,7 @@ echo ""
 
 # Installer dépendances serveur
 echo "📦 Installation dépendances serveur..."
-cd ../server
+cd ./server
 npm install
 echo -e "${GREEN}✅ Dépendances serveur installées${NC}"
 echo ""
@@ -96,14 +96,30 @@ echo ""
 
 cd ..
 
-# Créer fichier .env
-echo "🔑 Génération configuration LiveKit..."
+# Détecter l'IP réseau locale
+echo "🌐 Détection configuration réseau..."
+NETWORK_IP=$(ifconfig | grep "inet " | grep -v 127.0.0.1 | awk '{print $2}' | head -n 1)
+
+if [ -z "$NETWORK_IP" ]; then
+    echo -e "${YELLOW}⚠️  IP réseau non détectée, utilisation localhost${NC}"
+    NETWORK_IP="localhost"
+else
+    echo -e "${GREEN}✅ IP réseau détectée : ${NETWORK_IP}${NC}"
+fi
+echo ""
+
+# Créer fichier .env serveur
+echo "🔑 Génération configuration serveur..."
 
 cat > server/.env << EOF
+# Configuration PTT Live Server
+# Généré automatiquement par install/macos.sh
+
 USE_LOCAL_LIVEKIT=true
 
 # LiveKit Configuration
-LIVEKIT_URL=ws://localhost:7880
+# AUTO = détection automatique IP réseau au démarrage
+LIVEKIT_URL=AUTO
 # En mode --dev, LiveKit utilise ces clés par défaut
 LIVEKIT_API_KEY=devkey
 LIVEKIT_API_SECRET=secret
@@ -113,22 +129,52 @@ PORT=3000
 NODE_ENV=development
 EOF
 
-echo -e "${GREEN}✅ Clés API générées (server/.env)${NC}"
+echo -e "${GREEN}✅ Configuration serveur générée (server/.env)${NC}"
+
+# Créer fichier .env client
+echo "🔑 Génération configuration client..."
+
+cat > client/.env << EOF
+# Configuration PTT Live Client
+# Généré automatiquement par install/macos.sh
+
+# En développement local, utilise le proxy Vite
+VITE_API_URL=/api
+
+# Pour accès réseau (autres devices), décommentez et mettez l'IP du serveur :
+# VITE_API_URL=http://${NETWORK_IP}:3000
+EOF
+
+echo -e "${GREEN}✅ Configuration client générée (client/.env)${NC}"
 echo ""
 
 # Message final
 echo "=================================="
 echo -e "${GREEN}✅ Installation terminée !${NC}"
 echo ""
-echo "📝 Prochaines étapes :"
+echo "🚀 Démarrage rapide :"
 echo ""
-echo "   1. Démarrer le serveur :"
-echo "      cd server && npm run dev"
+echo "   # Mode développement (recommandé)"
+echo "   ./start.sh --dev"
 echo ""
-echo "   2. Démarrer le client (nouveau terminal) :"
-echo "      cd client && npm run dev"
+echo "   # Mode production"
+echo "   ./start.sh"
 echo ""
-echo "   3. Ouvrir https://localhost:5173 dans votre navigateur"
+echo "📝 OU manuellement (deux terminaux) :"
 echo ""
-echo "📖 Documentation : README.md"
+echo "   Terminal 1 : cd server && npm run dev"
+echo "   Terminal 2 : cd client && npm run dev"
+echo ""
+echo "🌐 Accès après démarrage :"
+echo "   • Développement local : https://localhost:5173"
+echo "   • Depuis smartphone (WiFi) : https://${NETWORK_IP}:5173"
+echo "   • Admin : https://${NETWORK_IP}:5173/admin"
+echo ""
+echo "💡 Configuration réseau :"
+echo "   IP serveur détectée : ${NETWORK_IP}"
+echo "   LiveKit URL : AUTO (détection dynamique)"
+echo ""
+echo "📖 Documentation :"
+echo "   • README.md - Guide complet"
+echo "   • README-PORTABLE.md - Déploiement portable"
 echo ""

server/.env.example

@@ -1,17 +1,23 @@
-# PTT Live - Configuration environnement serveur
+# Configuration PTT Live Server
+# Copiez ce fichier en .env et adaptez selon votre environnement
 
-# LiveKit API Keys
-# En dev, utilise les valeurs par défaut si non définies
+# Mode LiveKit
+USE_LOCAL_LIVEKIT=true  # true = LiveKit local, false = LiveKit Cloud
+
+# LiveKit Configuration
+# Mode local : AUTO détecte automatiquement l'IP réseau
+# Mode cloud : URL complète wss://votre-projet.livekit.cloud
+LIVEKIT_URL=AUTO
+
+# Clés API LiveKit
+# Mode local --dev : devkey/secret (par défaut)
+# Mode cloud : récupérez vos clés sur https://cloud.livekit.io
 LIVEKIT_API_KEY=devkey
 LIVEKIT_API_SECRET=secret
 
-# URL LiveKit pour les clients
-# Pour permettre les connexions réseau, utilisez l'IP locale du serveur
-# Exemples :
-#   - Local uniquement : ws://localhost:7880
-#   - Réseau local : ws://192.168.1.100:7880 (remplacer par votre IP)
-#   - Utiliser AUTO pour détecter automatiquement l'IP réseau
-LIVEKIT_URL=AUTO
+# Configuration serveur
+PORT=3000
+NODE_ENV=development
 
-# Mode LiveKit local (démarre livekit-server automatiquement)
-USE_LOCAL_LIVEKIT=true
+# Logging (optionnel)
+# LOG_LEVEL=debug

server/api/admin.js

@@ -4,9 +4,6 @@
  */
 
 import { Router } from 'express';
-import { readFileSync, writeFileSync } from 'fs';
-import { join } from 'path';
-import YAML from 'yaml';
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
 import { CoreAudioBackend } from '../bridge/backends/CoreAudioBackend.js';
@@ -41,47 +38,6 @@ const stats = {
   logs: []
 };
 
-// Configuration file path
-const configPath = join(__dirname, '..', 'config', 'config.yaml');
-
-/**
- * Charge la configuration depuis le fichier YAML
- * et génère les IDs à partir des noms
- */
-function loadConfig() {
-  const configFile = readFileSync(configPath, 'utf8');
-  const config = YAML.parse(configFile);
-
-  // Générer les IDs pour les groupes
-  config.groups = config.groups.map(group => {
-    const groupId = slugify(group.name);
-    return {
-      ...group,
-      id: groupId
-    };
-  });
-
-  return config;
-}
-
-/**
- * Sauvegarde la configuration dans le fichier YAML
- * Ne sauvegarde PAS les IDs (ils sont générés dynamiquement)
- */
-function saveConfig(config) {
-  // Nettoyer les IDs avant de sauvegarder
-  const cleanConfig = {
-    ...config,
-    groups: config.groups.map(group => {
-      const { id, ...groupWithoutId } = group;
-      return groupWithoutId;
-    })
-  };
-
-  const yamlContent = YAML.stringify(cleanConfig);
-  writeFileSync(configPath, yamlContent, 'utf8');
-}
-
 /**
  * Ajoute un log au système
  */
@@ -166,7 +122,7 @@ export function addAudioStats(data) {
  */
 router.get('/groups', (req, res) => {
   try {
-    const config = loadConfig();
+    const config = configManager.get();
     res.json({
       groups: config.groups
     });
@@ -179,7 +135,7 @@ router.get('/groups', (req, res) => {
 /**
  * POST /admin/groups
  * Crée un nouveau groupe
- * Body: { name, audioBitrate?, channels }
+ * Body: { name, audioBitrate? }
  * L'ID est généré automatiquement à partir du nom
  */
 router.post('/groups', (req, res) => {
@@ -192,7 +148,7 @@ router.post('/groups', (req, res) => {
       });
     }
 
-    const config = loadConfig();
+    const config = configManager.get();
 
     // Générer l'ID à partir du nom
     const id = slugify(name);
@@ -204,14 +160,14 @@ router.post('/groups', (req, res) => {
       });
     }
 
-    // Créer le nouveau groupe (sans channels)
+    // Créer le nouveau groupe
     const newGroup = {
       name,
       ...(audioBitrate && { audioBitrate })
     };
 
     config.groups.push(newGroup);
-    saveConfig(config);
+    configManager.save(config);
 
     addLog('info', `Group created: ${name}`, { id });
 
@@ -237,7 +193,7 @@ router.put('/groups/:id', (req, res) => {
     const { id } = req.params;
     const { name, audioBitrate } = req.body;
 
-    const config = loadConfig();
+    const config = configManager.get();
 
     // Chercher le groupe par son nom (qui correspond à l'ID slugifié)
     const groupIndex = config.groups.findIndex(g => slugify(g.name) === id);
@@ -252,12 +208,12 @@ router.put('/groups/:id', (req, res) => {
     if (name !== undefined) config.groups[groupIndex].name = name;
     if (audioBitrate !== undefined) config.groups[groupIndex].audioBitrate = audioBitrate;
 
-    saveConfig(config);
+    configManager.save(config);
 
     addLog('info', `Group updated: ${config.groups[groupIndex].name}`, { id });
 
-    // Recharger pour obtenir les IDs générés
-    const updatedConfig = loadConfig();
+    // Récupérer la config à jour avec les IDs générés
+    const updatedConfig = configManager.get();
     const updatedGroupIndex = updatedConfig.groups.findIndex(g => slugify(g.name) === id || slugify(g.name) === slugify(name));
     const updatedGroup = updatedGroupIndex !== -1 ? updatedConfig.groups[updatedGroupIndex] : null;
 
@@ -281,7 +237,7 @@ router.delete('/groups/:id', (req, res) => {
   try {
     const { id } = req.params;
 
-    const config = loadConfig();
+    const config = configManager.get();
     const groupIndex = config.groups.findIndex(g => slugify(g.name) === id);
 
     if (groupIndex === -1) {
@@ -292,7 +248,7 @@ router.delete('/groups/:id', (req, res) => {
 
     const groupName = config.groups[groupIndex].name;
     config.groups.splice(groupIndex, 1);
-    saveConfig(config);
+    configManager.save(config);
 
     addLog('info', `Group deleted: ${groupName}`, { id });
 
@@ -412,7 +368,7 @@ router.get('/logs', (req, res) => {
  */
 router.get('/config', (req, res) => {
   try {
-    const config = loadConfig();
+    const config = configManager.get();
     res.json(config);
   } catch (error) {
     console.error('Erreur GET /admin/config:', error);
@@ -429,13 +385,13 @@ router.put('/config/audio', (req, res) => {
   try {
     const { sampleRate, defaultBitrate, jitterBufferMs } = req.body;
 
-    const config = loadConfig();
+    const config = configManager.get();
 
     if (sampleRate !== undefined) config.audio.sampleRate = sampleRate;
     if (defaultBitrate !== undefined) config.audio.defaultBitrate = defaultBitrate;
     if (jitterBufferMs !== undefined) config.audio.jitterBufferMs = jitterBufferMs;
 
-    saveConfig(config);
+    configManager.save(config);
 
     addLog('info', 'Audio config updated', { sampleRate, defaultBitrate, jitterBufferMs });
 
@@ -482,8 +438,28 @@ router.get('/audio/device', (req, res) => {
     const config = configManager.get();
     const audioDevice = config.audio?.device || {};
 
+    // Enrichir avec les infos réelles de la carte si configurée
+    const devices = CoreAudioBackend.getDevices();
+    let deviceInfo = { ...audioDevice };
+
+    if (audioDevice.inputDeviceId) {
+      const inputDev = devices.find(d => d.id === audioDevice.inputDeviceId);
+      if (inputDev) {
+        deviceInfo.inputChannels = inputDev.maxInputChannels;
+        deviceInfo.inputDeviceName = inputDev.name;
+      }
+    }
+
+    if (audioDevice.outputDeviceId) {
+      const outputDev = devices.find(d => d.id === audioDevice.outputDeviceId);
+      if (outputDev) {
+        deviceInfo.outputChannels = outputDev.maxOutputChannels;
+        deviceInfo.outputDeviceName = outputDev.name;
+      }
+    }
+
     res.json({
-      device: audioDevice
+      device: deviceInfo
     });
   } catch (error) {
     console.error('Erreur GET /admin/audio/device:', error);
@@ -644,4 +620,151 @@ router.post('/audio/device', (req, res) => {
   }
 });
 
+/**
+ * GET /admin/devices/list
+ * Liste tous les devices audio disponibles (auto-détection)
+ * Supporte macOS (CoreAudio), Linux (JACK/PipeWire), Windows (WASAPI)
+ */
+router.get('/devices/list', async (req, res) => {
+  try {
+    const devices = {
+      inputs: [],
+      outputs: [],
+      platform: process.platform
+    };
+
+    // Détection selon la plateforme
+    if (process.platform === 'darwin') {
+      // macOS : utiliser CoreAudioBackend.getDevices()
+      try {
+        const coreAudioDevices = CoreAudioBackend.getDevices();
+
+        // Séparer inputs et outputs
+        coreAudioDevices.forEach(device => {
+          if (device.maxInputChannels > 0) {
+            devices.inputs.push({
+              id: device.name, // Utiliser le nom comme ID (compatible avec inputDeviceName)
+              name: device.name,
+              channels: device.maxInputChannels,
+              sampleRate: device.defaultSampleRate,
+              isDefault: device.isDefault?.input || false
+            });
+          }
+
+          if (device.maxOutputChannels > 0) {
+            devices.outputs.push({
+              id: device.name, // Utiliser le nom comme ID (compatible avec outputDeviceName)
+              name: device.name,
+              channels: device.maxOutputChannels,
+              sampleRate: device.defaultSampleRate,
+              isDefault: device.isDefault?.output || false
+            });
+          }
+        });
+
+        // Fallback si aucun device trouvé
+        if (devices.inputs.length === 0) {
+          devices.inputs.push({ id: 'builtin-mic', name: 'Built-in Microphone', isDefault: true });
+        }
+        if (devices.outputs.length === 0) {
+          devices.outputs.push({ id: 'builtin-output', name: 'Built-in Output', isDefault: true });
+        }
+      } catch (error) {
+        console.warn('⚠️  Détection CoreAudio échouée:', error.message);
+
+        // Fallback : devices par défaut macOS
+        devices.inputs.push({ id: 'builtin-mic', name: 'Built-in Microphone', isDefault: true });
+        devices.outputs.push({ id: 'builtin-output', name: 'Built-in Output', isDefault: true });
+      }
+
+    } else if (process.platform === 'linux') {
+      // Linux : JACK ou PipeWire
+      const { exec } = await import('child_process');
+      const { promisify } = await import('util');
+      const execPromise = promisify(exec);
+
+      try {
+        // Essayer JACK d'abord
+        const { stdout: jackPorts } = await execPromise('jack_lsp 2>/dev/null || echo ""');
+
+        if (jackPorts.trim()) {
+          // Parser les ports JACK
+          const ports = jackPorts.split('\n').filter(Boolean);
+
+          ports.forEach(port => {
+            if (port.includes('capture')) {
+              devices.inputs.push({ id: port, name: port });
+            } else if (port.includes('playback')) {
+              devices.outputs.push({ id: port, name: port });
+            }
+          });
+        } else {
+          // Fallback : PipeWire/PulseAudio via pactl
+          const { stdout: paDevices } = await execPromise('pactl list short sources 2>/dev/null || echo ""');
+          const { stdout: paSinks } = await execPromise('pactl list short sinks 2>/dev/null || echo ""');
+
+          // Helper pour obtenir une description lisible
+          const getDeviceDescription = (deviceId) => {
+            // Extraire une description plus lisible du nom technique
+            if (deviceId.includes('alsa_input')) return deviceId.replace('alsa_input.', 'Input: ');
+            if (deviceId.includes('alsa_output')) return deviceId.replace('alsa_output.', 'Output: ');
+            return deviceId;
+          };
+
+          if (paDevices.trim()) {
+            paDevices.split('\n').filter(Boolean).forEach((line) => {
+              const parts = line.split('\t');
+              const deviceId = parts[1]; // Nom du device (ex: alsa_input.pci-...)
+              if (deviceId && !deviceId.includes('.monitor')) { // Ignorer les monitors
+                devices.inputs.push({
+                  id: deviceId,
+                  name: getDeviceDescription(deviceId)
+                });
+              }
+            });
+          }
+
+          if (paSinks.trim()) {
+            paSinks.split('\n').filter(Boolean).forEach((line) => {
+              const parts = line.split('\t');
+              const deviceId = parts[1]; // Nom du device (ex: alsa_output.pci-...)
+              if (deviceId) {
+                devices.outputs.push({
+                  id: deviceId,
+                  name: getDeviceDescription(deviceId)
+                });
+              }
+            });
+          }
+        }
+      } catch (linuxError) {
+        console.warn('⚠️  Détection devices Linux échouée:', linuxError.message);
+        devices.inputs.push({ id: 0, name: 'Default Input', isDefault: true });
+        devices.outputs.push({ id: 0, name: 'Default Output', isDefault: true });
+      }
+
+    } else if (process.platform === 'win32') {
+      // Windows : WASAPI (Phase 3)
+      // TODO: implémenter détection WASAPI
+      devices.inputs.push({ id: 0, name: 'Default Input (Windows)', isDefault: true });
+      devices.outputs.push({ id: 0, name: 'Default Output (Windows)', isDefault: true });
+    }
+
+    addLog('info', 'Audio devices listed', {
+      inputsCount: devices.inputs.length,
+      outputsCount: devices.outputs.length
+    });
+
+    res.json(devices);
+
+  } catch (error) {
+    console.error('Erreur GET /admin/devices/list:', error);
+    res.status(500).json({
+      error: 'Failed to list audio devices',
+      message: error.message,
+      platform: process.platform
+    });
+  }
+});
+
 export default router;

server/bridge/AudioBridge.js

@@ -54,7 +54,7 @@ export class AudioBridge extends EventEmitter {
     this.opusEncoder = null;
     this.opusDecoder = null;
     this.jitterBuffer = null;
-    this.liveKitClient = null;
+    this.liveKitClients = new Map(); // Map<groupName, LiveKitClient> - un client par groupe
     this.groupAudioRouter = null;
 
     // État
@@ -65,6 +65,16 @@ export class AudioBridge extends EventEmitter {
     this.inputChannelBuffers = new Map(); // Map<channelId, Float32Array>
     this.groupBuffersFromLiveKit = new Map(); // Map<groupName, Float32Array>
 
+    // Frame accumulators pour LiveKit (240 samples → 960 samples)
+    this.liveKitFrameAccumulators = new Map(); // Map<groupName, { buffer: Float32Array, offset: number }>
+
+    // Pool de buffers pré-alloués pour éviter allocations répétées
+    this.bufferPool = {
+      float32: [], // Pool de Float32Array réutilisables
+      pcm: []      // Pool de Buffer PCM réutilisables
+    };
+    this.maxPoolSize = 50; // Limite du pool (adapté pour 30+ clients)
+
     // Statistiques
     this.stats = {
       startTime: null,
@@ -189,16 +199,45 @@ export class AudioBridge extends EventEmitter {
       throw new Error(`Plateforme non supportée : ${os}`);
     }
 
+    // Résoudre les device IDs vers les noms pour CoreAudio/sox
+    let inputDeviceName = null;
+    let outputDeviceName = null;
+
+    if (this.options.inputDeviceId) {
+      const inputDevice = BackendClass.getDevices().find(d => d.id === this.options.inputDeviceId);
+      inputDeviceName = inputDevice ? inputDevice.name : this.options.inputDeviceId;
+      console.log(`📥 Input device: "${inputDeviceName}" (ID: ${this.options.inputDeviceId})`);
+    }
+
+    if (this.options.outputDeviceId) {
+      const outputDevice = BackendClass.getDevices().find(d => d.id === this.options.outputDeviceId);
+      outputDeviceName = outputDevice ? outputDevice.name : this.options.outputDeviceId;
+      console.log(`📤 Output device: "${outputDeviceName}" (ID: ${this.options.outputDeviceId})`);
+    }
+
     // Initialisation du backend sélectionné
-    this.audioBackend = new BackendClass({
+    const backendOptions = {
       sampleRate: this.options.sampleRate,
       channels: this.options.channels,
       framesPerBuffer: this.options.frameSize,
-      inputDeviceId: this.options.inputDeviceId,
-      outputDeviceId: this.options.outputDeviceId,
-      // Options spécifiques PipeWire
       latency: this.options.latency || 20
-    });
+    };
+
+    // PipeWire utilise targetDevice, CoreAudio utilise inputDeviceName/outputDeviceName
+    if (this.backendType === 'PipeWire') {
+      // Pour PipeWire, on utilise inputDeviceId directement comme targetDevice
+      // (startCapture et startPlayback peuvent avoir des targets différents)
+      backendOptions.inputTargetDevice = this.options.inputDeviceId;
+      backendOptions.outputTargetDevice = this.options.outputDeviceId;
+    } else {
+      // CoreAudio et autres backends
+      backendOptions.inputDeviceId = this.options.inputDeviceId;
+      backendOptions.inputDeviceName = inputDeviceName;
+      backendOptions.outputDeviceId = this.options.outputDeviceId;
+      backendOptions.outputDeviceName = outputDeviceName;
+    }
+
+    this.audioBackend = new BackendClass(backendOptions);
 
     // Liste des devices disponibles
     devices = BackendClass.getDevices();
@@ -288,45 +327,63 @@ export class AudioBridge extends EventEmitter {
   }
 
   /**
-   * Initialise la connexion LiveKit
+   * Initialise les connexions LiveKit (une par groupe)
    * @private
    */
   async _initLiveKit() {
-    if (!this.options.liveKitToken) {
-      throw new Error('Token LiveKit requis');
+    if (!this.options.liveKitTokens || !Array.isArray(this.options.liveKitTokens)) {
+      throw new Error('liveKitTokens requis (tableau d\'objets { groupName, groupId, token })');
     }
 
-    this.liveKitClient = new LiveKitClient({
-      url: this.options.liveKitUrl,
-      token: this.options.liveKitToken,
-      roomName: this.options.roomName,
-      participantName: 'AudioBridge',
-      sampleRate: this.options.sampleRate,
-      channels: this.options.channels,
-      audioBitrate: this.opusEncoder.options.bitrate
-    });
+    console.log(`🔌 Initialisation ${this.options.liveKitTokens.length} connexions LiveKit (une par groupe)...`);
 
-    // Events LiveKit
-    this.liveKitClient.on('connected', () => {
-      console.log('✓ LiveKit connecté');
-    });
+    // Créer un LiveKitClient pour chaque groupe
+    for (const { groupName, groupId, token } of this.options.liveKitTokens) {
+      const roomName = groupId; // La room porte le nom du groupId (slugifié)
 
-    this.liveKitClient.on('disconnected', (data) => {
-      const reason = data?.reason || 'unknown';
-      console.warn('⚠️  LiveKit déconnecté:', reason);
-      this.stats.errors.network++;
-    });
+      const client = new LiveKitClient({
+        url: this.options.liveKitUrl,
+        token,
+        roomName,
+        participantName: `AudioBridge-${groupId}`,
+        sampleRate: this.options.sampleRate,
+        channels: this.options.channels,
+        audioBitrate: this.opusEncoder.options.bitrate
+      });
 
-    this.liveKitClient.on('reconnecting', () => {
-      console.log('🔄 LiveKit reconnexion...');
-    });
+      // Events LiveKit pour ce groupe
+      client.on('connected', () => {
+        console.log(`✓ LiveKit connecté pour groupe "${groupName}" (room: ${roomName})`);
+      });
 
-    this.liveKitClient.on('audioTrackSubscribed', ({ track, participant }) => {
-      console.log(`🎵 Nouveau track audio : ${participant.identity}`);
-      this._handleRemoteAudioTrack(track);
-    });
+      client.on('disconnected', (data) => {
+        const reason = data?.reason || 'unknown';
+        console.warn(`⚠️  LiveKit déconnecté pour groupe "${groupName}":`, reason);
+        this.stats.errors.network++;
+      });
 
-    await this.liveKitClient.connect();
+      client.on('reconnecting', () => {
+        console.log(`🔄 LiveKit reconnexion pour groupe "${groupName}"...`);
+      });
+
+      client.on('audioTrackSubscribed', ({ track, participant }) => {
+        console.log(`🎵 Nouveau track audio dans groupe "${groupName}": ${participant.identity}`);
+      });
+
+      // Réception audio depuis les clients LiveKit de ce groupe
+      client.on('audioData', ({ participantName, pcmData, sampleRate, channels }) => {
+        // Router vers le bon groupe
+        this.emit('groupAudioIn', { groupName: groupId, pcmBuffer: pcmData });
+      });
+
+      // Connexion
+      await client.connect();
+
+      // Stocker le client par groupId
+      this.liveKitClients.set(groupId, client);
+    }
+
+    console.log(`✓ ${this.liveKitClients.size} connexions LiveKit établies`);
   }
 
   /**
@@ -342,37 +399,156 @@ export class AudioBridge extends EventEmitter {
         // Convertir PCM Buffer → Float32Array (pour GroupAudioRouter)
         const float32Data = this._bufferToFloat32(pcmData);
 
-        // Pour l'instant, on assume que l'audio vient du canal 0
-        // TODO: Supporter multi-canaux depuis la carte son
-        const channelId = this.options.inputDeviceChannel || 0;
-        this.inputChannelBuffers.set(channelId, float32Data);
+        // Séparer les canaux si audio multi-canaux (entrelacé)
+        const numChannels = this.options.channels || 1;
+
+        if (numChannels === 1) {
+          // Mono : un seul canal
+          const channelId = this.options.inputDeviceChannel || 0;
+          this.inputChannelBuffers.set(channelId, float32Data);
+        } else {
+          // Multi-canaux : dé-entrelacer les samples
+          // Format entrelacé : [L0, R0, L1, R1, ...] → [L0, L1, ...] et [R0, R1, ...]
+          const samplesPerChannel = float32Data.length / numChannels;
+
+          for (let ch = 0; ch < numChannels; ch++) {
+            const channelBuffer = new Float32Array(samplesPerChannel);
+
+            for (let i = 0; i < samplesPerChannel; i++) {
+              channelBuffer[i] = float32Data[i * numChannels + ch];
+            }
+
+            // Mapper canal hardware → canal logique (peut être configuré)
+            const logicalChannelId = this.options.channelMapping?.[ch] ?? ch;
+            this.inputChannelBuffers.set(logicalChannelId, channelBuffer);
+          }
+        }
 
         // ÉTAPE 1 : Inputs physiques → Groupes (via GroupAudioRouter)
         const groupBuffers = this.groupAudioRouter.processInputsToGroups(
           this.inputChannelBuffers
         );
 
-        // ÉTAPE 2 : Pour chaque groupe, envoyer vers LiveKit
+        if (this.stats.framesCapture % 100 === 0) {
+          // Détecter si l'audio est du silence (toutes les samples < 0.001)
+          let totalEnergy = 0;
+          this.inputChannelBuffers.forEach((buffer) => {
+            for (let i = 0; i < buffer.length; i++) {
+              totalEnergy += Math.abs(buffer[i]);
+            }
+          });
+          const avgEnergy = totalEnergy / (this.inputChannelBuffers.size * (this.options.frameSize || 960));
+          console.log(`[AudioBridge] Frame ${this.stats.framesCapture}: ${this.inputChannelBuffers.size} inputs → ${groupBuffers.size} groupes | Énergie audio: ${avgEnergy.toFixed(6)}`);
+        }
+
+        // ÉTAPE 2 : Pour chaque groupe, envoyer vers le LiveKitClient correspondant
         groupBuffers.forEach((groupBuffer, groupName) => {
-          // Convertir Float32Array → PCM Buffer
-          const pcmBuffer = this._float32ToBuffer(groupBuffer);
+          // Les groupes sont MONO (Float32Array de N samples)
+          // Mais la config globale peut être STÉRÉO (channels=2)
+          // → Adapter selon la configuration
 
-          // Encoder en Opus
-          const opusData = this.opusEncoder.encode(pcmBuffer);
+          let pcmBuffer;
+          const configChannels = this.options.channels || 1;
 
-          if (opusData) {
-            this.stats.framesCapture++;
-            this.stats.bytesEncoded += opusData.length;
+          if (configChannels === 1) {
+            // Config MONO : envoyer directement
+            pcmBuffer = this._float32ToBuffer(groupBuffer);
+          } else if (configChannels === 2) {
+            // Config STÉRÉO : dupliquer le canal mono
+            const samplesPerChannel = groupBuffer.length;
+            const stereoBuffer = new Float32Array(samplesPerChannel * 2);
 
-            // TODO: Envoyer opusData à LiveKit pour ce groupe spécifique
-            // this.liveKitClient.sendAudioToGroup(groupName, opusData);
+            // Entrelacer : [M0, M1, M2, ...] → [M0, M0, M1, M1, M2, M2, ...]
+            for (let i = 0; i < samplesPerChannel; i++) {
+              stereoBuffer[i * 2] = groupBuffer[i];     // Canal gauche
+              stereoBuffer[i * 2 + 1] = groupBuffer[i]; // Canal droit (dupliqué)
+            }
 
-            // Pour Phase 3, on émet un événement que le système d'intégration LiveKit écoutera
-            this.emit('groupAudioOut', { groupName, opusData, pcmBuffer });
+            pcmBuffer = this._float32ToBuffer(stereoBuffer);
+          } else {
+            console.error(`❌ Nombre de canaux non supporté: ${configChannels}`);
+            return;
           }
+
+          // Récupérer le client LiveKit pour ce groupe
+          const client = this.liveKitClients.get(groupName);
+
+          // Envoi vers LiveKit via sendAudioData (prend du PCM 16-bit)
+          // Note: LiveKit gère lui-même l'encodage Opus en interne
+          if (client && client.isConnected) {
+            client.sendAudioData(pcmBuffer);
+            if (this.stats.framesCapture % 100 === 0) {
+              const channelLabel = configChannels === 1 ? 'mono' : `${configChannels}ch`;
+              console.log(`[AudioBridge] → LiveKit groupe "${groupName}": ${pcmBuffer.length} bytes (${channelLabel})`);
+            }
+          } else {
+            if (this.stats.framesCapture % 100 === 0) {
+              console.log(`[AudioBridge] ⚠️  LiveKit non connecté pour groupe "${groupName}", audio non envoyé`);
+            }
+          }
+
+          // Émettre aussi pour monitoring/debug
+          this.emit('groupAudioOut', { groupName, pcmBuffer });
         });
 
+        // ÉTAPE 3 : Loopback local - Groupes → Outputs physiques (sans passer par LiveKit)
+        const outputBuffers = this.groupAudioRouter.processGroupsToOutputs(groupBuffers);
+
+        if (this.stats.framesCapture % 100 === 0) {
+          console.log(`[AudioBridge] Loopback local: ${groupBuffers.size} groupes → ${outputBuffers.size} outputs`);
+        }
+
+        // ÉTAPE 4 : Envoyer chaque output à la carte son
+        const numOutputChannels = this.options.channels || 1;
+
+        if (numOutputChannels === 1) {
+          // Mono : un seul output
+          if (outputBuffers.size > 0) {
+            const [firstChannelId, outputBuffer] = outputBuffers.entries().next().value;
+            const pcmBuffer = this._float32ToBuffer(outputBuffer);
+            this.audioBackend.queueAudio(pcmBuffer);
+
+            if (this.stats.framesCapture % 100 === 0) {
+              console.log(`[AudioBridge] → Output mono (canal ${firstChannelId}): ${pcmBuffer.length} bytes`);
+            }
+          }
+        } else {
+          // Multi-canaux : entrelacer les samples
+          // Récupérer les buffers dans l'ordre des canaux hardware
+          const channelBuffers = [];
+          const samplesPerChannel = this.options.frameSize;
+
+          for (let ch = 0; ch < numOutputChannels; ch++) {
+            const logicalChannelId = this.options.channelMapping?.[ch] ?? ch;
+            const buffer = outputBuffers.get(logicalChannelId);
+
+            if (buffer && buffer.length === samplesPerChannel) {
+              channelBuffers.push(buffer);
+            } else {
+              // Canal absent ou taille incorrecte : silence
+              channelBuffers.push(new Float32Array(samplesPerChannel));
+            }
+          }
+
+          // Entrelacer : [L0, L1, ...] et [R0, R1, ...] → [L0, R0, L1, R1, ...]
+          const interleavedBuffer = new Float32Array(samplesPerChannel * numOutputChannels);
+
+          for (let i = 0; i < samplesPerChannel; i++) {
+            for (let ch = 0; ch < numOutputChannels; ch++) {
+              interleavedBuffer[i * numOutputChannels + ch] = channelBuffers[ch][i];
+            }
+          }
+
+          const pcmBuffer = this._float32ToBuffer(interleavedBuffer);
+          this.audioBackend.queueAudio(pcmBuffer);
+
+          if (this.stats.framesCapture % 100 === 0) {
+            console.log(`[AudioBridge] → Output multi-canaux (${numOutputChannels}ch): ${pcmBuffer.length} bytes`);
+          }
+        }
+
         this.stats.framesCapture++;
+        this.stats.framesPlayback++;
       } catch (error) {
         console.error('Erreur routing capture:', error);
         this.stats.errors.capture++;
@@ -384,24 +560,57 @@ export class AudioBridge extends EventEmitter {
     // Écouter l'audio entrant de LiveKit (sera connecté par LiveKitServerBridge)
     this.on('groupAudioIn', ({ groupName, pcmBuffer }) => {
       try {
-        // Stocker le buffer du groupe pour le routing
+        // Convertir PCM Buffer → Float32Array
         const float32Data = this._bufferToFloat32(pcmBuffer);
-        this.groupBuffersFromLiveKit.set(groupName, float32Data);
+        const samplesReceived = float32Data.length;
 
-        // ÉTAPE 3 : Groupes → Outputs physiques (via GroupAudioRouter)
-        const outputBuffers = this.groupAudioRouter.processGroupsToOutputs(
-          this.groupBuffersFromLiveKit
-        );
+        // Initialiser l'accumulateur pour ce groupe si nécessaire
+        if (!this.liveKitFrameAccumulators.has(groupName)) {
+          this.liveKitFrameAccumulators.set(groupName, {
+            buffer: new Float32Array(960), // Frame size attendu par GroupRouter
+            offset: 0
+          });
+        }
 
-        // ÉTAPE 4 : Envoyer chaque output à la carte son
-        outputBuffers.forEach((outputBuffer, channelId) => {
-          const pcmBuffer = this._float32ToBuffer(outputBuffer);
+        const accumulator = this.liveKitFrameAccumulators.get(groupName);
 
-          // Envoyer à la carte son
-          this.audioBackend.queueAudio(pcmBuffer);
-        });
+        // Vérifier que le buffer ne débordera pas
+        const availableSpace = 960 - accumulator.offset;
+        const samplesToCopy = Math.min(samplesReceived, availableSpace);
 
-        this.stats.framesPlayback++;
+        // Copier les samples dans l'accumulateur
+        if (samplesToCopy > 0) {
+          accumulator.buffer.set(float32Data.subarray(0, samplesToCopy), accumulator.offset);
+          accumulator.offset += samplesToCopy;
+        }
+
+        // Si on a accumulé assez de samples (960), router vers les outputs
+        if (accumulator.offset >= 960) {
+          // Vérifier que le backend est toujours actif (évite crash pendant shutdown)
+          if (!this.audioBackend) {
+            return;
+          }
+
+          // Stocker le buffer complet pour le routing
+          this.groupBuffersFromLiveKit.set(groupName, accumulator.buffer);
+
+          // ÉTAPE 3 : Groupes → Outputs physiques (via GroupAudioRouter)
+          const outputBuffers = this.groupAudioRouter.processGroupsToOutputs(
+            this.groupBuffersFromLiveKit
+          );
+
+          // ÉTAPE 4 : Envoyer chaque output à la carte son
+          outputBuffers.forEach((outputBuffer, channelId) => {
+            const pcmBuffer = this._float32ToBuffer(outputBuffer);
+            this.audioBackend.queueAudio(pcmBuffer);
+          });
+
+          // Réinitialiser l'accumulateur
+          accumulator.offset = 0;
+          accumulator.buffer.fill(0);
+
+          this.stats.framesPlayback++;
+        }
       } catch (error) {
         console.error('Erreur routing lecture:', error);
         this.stats.errors.playback++;
@@ -418,37 +627,85 @@ export class AudioBridge extends EventEmitter {
   }
 
   /**
-   * Gère l'arrivée d'un track audio distant
-   * @param {RemoteAudioTrack} track - Track LiveKit
+   * Acquiert un Float32Array depuis le pool ou en crée un nouveau
+   * @param {number} size - Taille du buffer
+   * @returns {Float32Array}
    * @private
    */
-  _handleRemoteAudioTrack(track) {
-    // Récupération du MediaStream du track
-    const mediaStream = new MediaStream([track.mediaStreamTrack]);
-
-    // Note: Pour décoder Opus côté serveur, on aurait besoin d'accéder
-    // aux données brutes via DataChannel ou API bas niveau
-    // LiveKit gère nativement le décodage WebRTC → PCM dans le navigateur
-
-    // Pour un vrai bridge serveur, il faudrait :
-    // 1. Recevoir les paquets Opus via DataChannel ou API custom
-    // 2. Décoder avec opusDecoder
-    // 3. Envoyer au jitterBuffer
-    // 4. Lire depuis jitterBuffer vers CoreAudio
-
-    // TODO: Implémenter réception bas niveau Opus depuis LiveKit
-    console.warn('Réception track distant : implémentation complète en cours');
+  _acquireFloat32Buffer(size) {
+    const pooled = this.bufferPool.float32.find(b => b.length === size);
+    if (pooled) {
+      this.bufferPool.float32.splice(this.bufferPool.float32.indexOf(pooled), 1);
+      return pooled;
+    }
+    return new Float32Array(size);
   }
 
   /**
-   * Convertit Buffer PCM 16-bit → Float32Array [-1.0, 1.0]
-   * @param {Buffer} buffer - Buffer PCM 16-bit signed
+   * Retourne un Float32Array au pool pour réutilisation
+   * @param {Float32Array} buffer
+   * @private
+   */
+  _releaseFloat32Buffer(buffer) {
+    if (this.bufferPool.float32.length < this.maxPoolSize) {
+      this.bufferPool.float32.push(buffer);
+    }
+  }
+
+  /**
+   * Acquiert un Buffer PCM depuis le pool ou en crée un nouveau
+   * @param {number} size - Taille du buffer
+   * @returns {Buffer}
+   * @private
+   */
+  _acquirePcmBuffer(size) {
+    const pooled = this.bufferPool.pcm.find(b => b.length === size);
+    if (pooled) {
+      this.bufferPool.pcm.splice(this.bufferPool.pcm.indexOf(pooled), 1);
+      return pooled;
+    }
+    return Buffer.alloc(size);
+  }
+
+  /**
+   * Retourne un Buffer PCM au pool pour réutilisation
+   * @param {Buffer} buffer
+   * @private
+   */
+  _releasePcmBuffer(buffer) {
+    if (this.bufferPool.pcm.length < this.maxPoolSize) {
+      this.bufferPool.pcm.push(buffer);
+    }
+  }
+
+  /**
+   * Convertit Buffer/Int16Array PCM 16-bit → Float32Array [-1.0, 1.0]
+   * @param {Buffer|Int16Array|Uint8Array} buffer - Buffer PCM 16-bit signed
    * @returns {Float32Array}
    * @private
    */
   _bufferToFloat32(buffer) {
-    const samples = buffer.length / 2; // 2 bytes per sample (16-bit)
-    const float32 = new Float32Array(samples);
+    let samples;
+    let float32;
+
+    // Cas 1 : Int16Array (LiveKit Node SDK format)
+    if (buffer instanceof Int16Array) {
+      samples = buffer.length;
+      float32 = this._acquireFloat32Buffer(samples);
+
+      for (let i = 0; i < samples; i++) {
+        float32[i] = buffer[i] / 32768.0;
+      }
+      return float32;
+    }
+
+    // Cas 2 : Buffer/Uint8Array (format classique)
+    if (!(buffer instanceof Buffer)) {
+      buffer = Buffer.from(buffer);
+    }
+
+    samples = buffer.length / 2; // 2 bytes per sample (16-bit)
+    float32 = this._acquireFloat32Buffer(samples);
 
     for (let i = 0; i < samples; i++) {
       // Lire 16-bit signed little-endian
@@ -467,7 +724,7 @@ export class AudioBridge extends EventEmitter {
    * @private
    */
   _float32ToBuffer(float32) {
-    const buffer = Buffer.alloc(float32.length * 2); // 2 bytes per sample
+    const buffer = this._acquirePcmBuffer(float32.length * 2); // 2 bytes per sample
 
     for (let i = 0; i < float32.length; i++) {
       // Clamping [-1.0, 1.0]
@@ -496,10 +753,12 @@ export class AudioBridge extends EventEmitter {
       this.audioBackend = null;
     }
 
-    if (this.liveKitClient) {
-      await this.liveKitClient.destroy();
-      this.liveKitClient = null;
+    // Déconnecter tous les clients LiveKit
+    for (const [groupName, client] of this.liveKitClients.entries()) {
+      console.log(`🔌 Déconnexion LiveKit groupe "${groupName}"...`);
+      await client.destroy();
     }
+    this.liveKitClients.clear();
 
     if (this.groupAudioRouter) {
       this.groupAudioRouter.destroy();
@@ -525,6 +784,10 @@ export class AudioBridge extends EventEmitter {
     this.inputChannelBuffers.clear();
     this.groupBuffersFromLiveKit.clear();
 
+    // Nettoyer le pool de buffers
+    this.bufferPool.float32 = [];
+    this.bufferPool.pcm = [];
+
     this.isRunning = false;
 
     console.log('✓ AudioBridge arrêté');

server/bridge/AudioBridgeManager.js

@@ -21,8 +21,10 @@ class AudioBridgeManager extends EventEmitter {
 
   /**
    * Démarre le bridge audio avec la configuration actuelle
+   * @param {Object} options - Options de démarrage
+   * @param {string} options.liveKitUrl - URL LiveKit résolue (déjà avec IP si AUTO)
    */
-  async start() {
+  async start(options = {}) {
     if (this.isRunning) {
       console.warn('⚠️  AudioBridge déjà démarré');
       return;
@@ -32,31 +34,60 @@ class AudioBridgeManager extends EventEmitter {
       const config = configManager.get();
       console.log('🎵 Démarrage AudioBridge avec configuration:', config.audio);
 
-      // Génération du token JWT pour le participant serveur
-      const token = new AccessToken(
-        config.server?.livekit?.apiKey || 'devkey',
-        config.server?.livekit?.apiSecret || 'secret',
-        {
-          identity: 'AudioBridge',
-          name: 'Audio Bridge Server',
-          metadata: JSON.stringify({
-            role: 'bridge',
-            capabilities: ['audio-routing', 'monitoring']
-          })
-        }
-      );
+      // Générer un token JWT par groupe
+      const liveKitTokens = [];
 
-      // Permissions complètes pour le bridge serveur
-      token.addGrant({
-        room: 'main',
-        roomJoin: true,
-        canPublish: true,
-        canSubscribe: true,
-        canPublishData: true
-      });
+      // Fonction pour slugifier le nom (identique à admin.js)
+      const slugify = (text) => {
+        return text
+          .toString()
+          .normalize('NFD')
+          .replace(/[\u0300-\u036f]/g, '')
+          .toLowerCase()
+          .trim()
+          .replace(/\s+/g, '-')
+          .replace(/[^\w-]+/g, '')
+          .replace(/--+/g, '-');
+      };
 
-      const liveKitToken = await token.toJwt();
-      console.log('✓ Token JWT généré pour AudioBridge');
+      for (const group of config.groups || []) {
+        const groupId = slugify(group.name);
+        const groupName = group.name;
+
+        const token = new AccessToken(
+          config.server?.livekit?.apiKey || 'devkey',
+          config.server?.livekit?.apiSecret || 'secret',
+          {
+            identity: `AudioBridge-${groupId}`,
+            name: `Audio Bridge - ${groupName}`,
+            metadata: JSON.stringify({
+              role: 'bridge',
+              group: groupId,
+              capabilities: ['audio-routing', 'monitoring']
+            })
+          }
+        );
+
+        // Permissions complètes pour ce groupe
+        token.addGrant({
+          room: groupId, // Chaque groupe a sa propre room
+          roomJoin: true,
+          canPublish: true,
+          canSubscribe: true,
+          canPublishData: true
+        });
+
+        const jwt = await token.toJwt();
+        liveKitTokens.push({ groupName, groupId, token: jwt });
+
+        console.log(`✓ Token JWT généré pour groupe "${groupName}" (room: ${groupId})`);
+      }
+
+      if (liveKitTokens.length === 0) {
+        console.warn('⚠️  Aucun groupe configuré, AudioBridge ne pourra pas démarrer');
+        this.isRunning = false;
+        return;
+      }
 
       // Import dynamique du AudioBridge
       const { AudioBridge } = await import('./AudioBridge.js');
@@ -79,18 +110,27 @@ class AudioBridgeManager extends EventEmitter {
       if (audioConfig.defaultBitrate) audioConfig.defaultBitrate = parseInt(audioConfig.defaultBitrate, 10);
       if (audioConfig.customOpusBitrate) audioConfig.customOpusBitrate = parseInt(audioConfig.customOpusBitrate, 10);
 
+      // Extraire les device IDs depuis le sous-objet device
+      const inputDeviceId = audioConfig.device?.inputDeviceId || null;
+      const outputDeviceId = audioConfig.device?.outputDeviceId || null;
+
+      // Utiliser l'URL résolue passée en option, sinon fallback config
+      const liveKitUrl = options.liveKitUrl || config.server?.livekit?.url || 'ws://localhost:7880';
+
       // Créer l'instance avec la config
       this.bridge = new AudioBridge({
         ...audioConfig,
-        // Options LiveKit
-        liveKitUrl: config.server?.livekit?.url || 'ws://localhost:7880',
-        liveKitToken,
-        roomName: 'main',
+        // Options LiveKit (multi-rooms)
+        liveKitUrl,
+        liveKitTokens, // Tableau de { groupName, groupId, token }
         // Options de routing
         routing: config.audio?.routing || {},
         groups: config.groups || [],
         maxInputChannels: 32,
-        maxOutputChannels: 32
+        maxOutputChannels: 32,
+        // Device IDs extraits
+        inputDeviceId,
+        outputDeviceId
       });
 
       // Démarrer le bridge

server/bridge/GroupAudioRouter.js

@@ -10,6 +10,9 @@
  */
 
 import { EventEmitter } from 'events';
+import { getLogger } from '../utils/Logger.js';
+
+const logger = getLogger('Routing');
 
 /**
  * Représente une route audio avec gain
@@ -76,7 +79,10 @@ export class GroupAudioRouter extends EventEmitter {
    * Configure le routing depuis la config YAML
    */
   configure(routingConfig) {
-    console.log('Configuration du routing audio...');
+    logger.info('Configuration du routing audio...');
+    logger.debug('  Groupes disponibles:', this.config.groups.map(g => `${g.name || g} (id: ${g.id || g})`).join(', '));
+    logger.debug('  inputToGroup:', JSON.stringify(routingConfig.inputToGroup || {}));
+    logger.debug('  groupToOutput:', JSON.stringify(routingConfig.groupToOutput || {}));
 
     // Réinitialise les routes
     this.inputToGroupRoutes.clear();
@@ -104,7 +110,7 @@ export class GroupAudioRouter extends EventEmitter {
     }
 
     this._updateStatsActiveRoutes();
-    console.log(`Routing configuré : ${this.stats.routesActive} routes actives`);
+    logger.success(`Routing configuré : ${this.stats.routesActive} routes actives`);
     this.emit('configured', this.stats);
   }
 
@@ -128,7 +134,7 @@ export class GroupAudioRouter extends EventEmitter {
     const route = new AudioRoute(inputChannel, groupName, gainDb);
     this.inputToGroupRoutes.get(key).push(route);
 
-    console.log(`Route ajoutée : Input ${inputChannel} -> Group "${groupName}" (${gainDb}dB)`);
+    logger.info(`Input ${inputChannel} → Group "${groupName}" (${gainDb}dB)`);
     this._updateStatsActiveRoutes();
   }
 
@@ -145,7 +151,7 @@ export class GroupAudioRouter extends EventEmitter {
     const route = new AudioRoute(groupName, outputChannel, gainDb);
     this.groupToOutputRoutes.get(key).push(route);
 
-    console.log(`Route ajoutée : Group "${groupName}" -> Output ${outputChannel} (${gainDb}dB)`);
+    logger.info(`Group "${groupName}" → Output ${outputChannel} (${gainDb}dB)`);
     this._updateStatsActiveRoutes();
   }
 
@@ -205,7 +211,24 @@ export class GroupAudioRouter extends EventEmitter {
     // Réinitialise les buffers de groupe
     this.groupBuffers.clear();
     this.config.groups.forEach(group => {
-      this.groupBuffers.set(group.name, new Float32Array(this.config.frameSize));
+      // Utiliser l'ID (slugifié) plutôt que le nom pour correspondre au routing
+      const groupId = group.id || group.name || group;
+      this.groupBuffers.set(groupId, new Float32Array(this.config.frameSize));
+    });
+
+    // Compter le nombre de sources par groupe pour normalisation
+    const groupSourceCount = new Map();
+    inputChannelsData.forEach((_, channelId) => {
+      const key = `in_${channelId}`;
+      const routes = this.inputToGroupRoutes.get(key);
+      if (routes) {
+        routes.forEach(route => {
+          groupSourceCount.set(
+            route.destination,
+            (groupSourceCount.get(route.destination) || 0) + 1
+          );
+        });
+      }
     });
 
     // Pour chaque canal d'entrée
@@ -221,11 +244,17 @@ export class GroupAudioRouter extends EventEmitter {
       // Applique chaque route (mixage additif vers les groupes)
       routes.forEach(route => {
         const groupBuffer = this.groupBuffers.get(route.destination);
-        if (!groupBuffer) return;
+        if (!groupBuffer) {
+          logger.warn(`Buffer groupe "${route.destination}" introuvable pour routing depuis Input ${channelId}`);
+          return;
+        }
+
+        // Mixage avec gain + atténuation par nombre de sources
+        const sourceCount = groupSourceCount.get(route.destination) || 1;
+        const mixGain = route.linearGain / sourceCount;
 
-        // Mixage avec gain
         for (let i = 0; i < pcmData.length && i < groupBuffer.length; i++) {
-          groupBuffer[i] += pcmData[i] * route.linearGain;
+          groupBuffer[i] += pcmData[i] * mixGain;
         }
       });
     });
@@ -235,6 +264,9 @@ export class GroupAudioRouter extends EventEmitter {
       for (let i = 0; i < buffer.length; i++) {
         if (Math.abs(buffer[i]) > 1.0) {
           this.stats.clippingEvents++;
+          if (this.stats.clippingEvents % 1000 === 1) {
+            logger.warn(`Clipping détecté sur groupe "${groupName}" (${this.stats.clippingEvents} événements)`);
+          }
           buffer[i] = Math.sign(buffer[i]) * 1.0; // Hard clipping
         }
       }
@@ -260,7 +292,9 @@ export class GroupAudioRouter extends EventEmitter {
     groupBuffersData.forEach((pcmData, groupName) => {
       const routes = this.groupToOutputRoutes.get(groupName);
 
-      if (!routes || routes.length === 0) return;
+      if (!routes || routes.length === 0) {
+        return;
+      }
 
       // Applique chaque route vers les sorties
       routes.forEach(route => {
@@ -376,7 +410,7 @@ export class GroupAudioRouter extends EventEmitter {
     this.groupBuffers.clear();
     this.outputBuffers.clear();
     this.removeAllListeners();
-    console.log('GroupAudioRouter détruit');
+    logger.info('GroupAudioRouter détruit');
   }
 }
 

server/bridge/LiveKitClient.js

@@ -10,7 +10,7 @@
  * - Reconnexion automatique
  */
 
-import { Room, RoomEvent, AudioSource, AudioFrame, LocalAudioTrack, TrackSource } from '@livekit/rtc-node';
+import { Room, RoomEvent, AudioSource, AudioFrame, LocalAudioTrack, TrackSource, AudioStream, TrackKind } from '@livekit/rtc-node';
 import { EventEmitter } from 'events';
 
 export class LiveKitClient extends EventEmitter {
@@ -86,35 +86,21 @@ export class LiveKitClient extends EventEmitter {
    */
   async _createAudioSource() {
     try {
-      // Debug: afficher les valeurs avant conversion
+      // Conversion explicite en int32 pour l'API LiveKit
       const sampleRate = parseInt(this.options.sampleRate, 10);
       const channels = parseInt(this.options.channels, 10);
 
-      console.log('🔍 DEBUG AudioSource:', {
-        sampleRateOriginal: this.options.sampleRate,
-        sampleRateType: typeof this.options.sampleRate,
-        sampleRateConverted: sampleRate,
-        sampleRateConvertedType: typeof sampleRate,
-        channelsOriginal: this.options.channels,
-        channelsType: typeof this.options.channels,
-        channelsConverted: channels,
-        channelsConvertedType: typeof channels
-      });
-
-      // Création de l'AudioSource (conversion en int32 explicite)
+      // Création de l'AudioSource
       this.audioSource = new AudioSource(sampleRate, channels);
-      console.log('✓ AudioSource créée:', this.audioSource);
 
       // Création du LocalAudioTrack depuis l'AudioSource
       const localTrack = LocalAudioTrack.createAudioTrack('bridge-audio', this.audioSource);
-      console.log('✓ LocalAudioTrack créé:', localTrack);
 
       // Publication du track
       const options = {
         source: TrackSource.SOURCE_MICROPHONE // Simule un microphone pour les clients
       };
 
-      console.log('🔍 DEBUG publishTrack options:', options);
       this.localAudioTrack = await this.room.localParticipant.publishTrack(
         localTrack,
         options
@@ -150,8 +136,19 @@ export class LiveKitClient extends EventEmitter {
     });
 
     // Participants
-    this.room.on(RoomEvent.ParticipantConnected, (participant) => {
+    this.room.on(RoomEvent.ParticipantConnected, async (participant) => {
       console.log(`➕ Participant connecté: ${participant.identity}`);
+
+      // Parcourir les tracks publiés par ce participant et s'y abonner manuellement
+      for (const [trackSid, publication] of participant.trackPublications) {
+        console.log(`  📝 Track disponible: ${publication.kind} (${trackSid}), muted: ${publication.muted}`);
+
+        if (publication.kind === TrackKind.KIND_AUDIO && publication.track) {
+          console.log(`  ⚡ Souscription manuelle au track audio ${trackSid}...`);
+          await this._handleAudioTrack(publication.track, publication, participant);
+        }
+      }
+
       this.emit('participantConnected', participant);
     });
 
@@ -161,33 +158,30 @@ export class LiveKitClient extends EventEmitter {
       this.emit('participantDisconnected', participant);
     });
 
-    // Tracks
-    this.room.on(RoomEvent.TrackSubscribed, (track, publication, participant) => {
-      if (track.kind === 'audio') {
-        console.log(`🎵 Track audio souscrit de ${participant.identity}`);
+    // Tracks - Debug tous les événements
+    this.room.on(RoomEvent.TrackPublished, async (publication, participant) => {
+      console.log(`📢 Track publié par ${participant.identity}: ${publication.kind} (${publication.sid}), muted: ${publication.muted}`);
 
-        // Création d'un AudioStream pour recevoir les données PCM
-        const stream = new track.AudioStream(
-          this.options.sampleRate,
-          this.options.channels
-        );
+      // Si c'est un track audio, s'y abonner immédiatement
+      if (publication.kind === TrackKind.KIND_AUDIO && publication.track) {
+        console.log(`  ⚡ Track audio détecté, souscription...`);
+        await this._handleAudioTrack(publication.track, publication, participant);
+      } else if (publication.kind === TrackKind.KIND_AUDIO && !publication.track) {
+        console.log(`  ⚠️  Track audio publié mais track object non disponible encore`);
+      }
+    });
 
-        this.remoteParticipants.set(participant.sid, {
-          participant,
-          track,
-          publication,
-          stream
-        });
+    this.room.on(RoomEvent.TrackSubscribed, async (track, publication, participant) => {
+      console.log(`🎵 Track souscrit de ${participant.identity}: ${track.kind} (${publication.sid})`);
 
-        // Lecture des frames audio
-        this._startAudioReceive(participant.sid, stream);
-
-        this.emit('audioTrackSubscribed', { track, participant });
+      if (track.kind === TrackKind.KIND_AUDIO) {
+        console.log(`🎵 Track AUDIO souscrit de ${participant.identity} (événement TrackSubscribed)`);
+        await this._handleAudioTrack(track, publication, participant);
       }
     });
 
     this.room.on(RoomEvent.TrackUnsubscribed, (track, publication, participant) => {
-      if (track.kind === 'audio') {
+      if (track.kind === TrackKind.KIND_AUDIO) {
         console.log(`🔇 Track audio désouscrit de ${participant.identity}`);
         this.remoteParticipants.delete(participant.sid);
         this.emit('audioTrackUnsubscribed', { track, participant });
@@ -195,6 +189,33 @@ export class LiveKitClient extends EventEmitter {
     });
   }
 
+  /**
+   * Gère un track audio (création AudioStream et lecture)
+   * @private
+   */
+  async _handleAudioTrack(track, publication, participant) {
+    console.log(`🎧 Création AudioStream pour ${participant.identity}...`);
+
+    // Création d'un AudioStream pour recevoir les données PCM
+    const stream = new AudioStream(
+      track,
+      this.options.sampleRate,
+      this.options.channels
+    );
+
+    this.remoteParticipants.set(participant.sid, {
+      participant,
+      track,
+      publication,
+      stream
+    });
+
+    // Lecture des frames audio
+    this._startAudioReceive(participant.sid, stream);
+
+    this.emit('audioTrackSubscribed', { track, participant });
+  }
+
   /**
    * Démarre la réception audio d'un participant
    * @private
@@ -237,12 +258,24 @@ export class LiveKitClient extends EventEmitter {
       return;
     }
 
+    if (!this.isConnected || !this.localAudioTrack) {
+      // Silently drop frames si pas encore connecté
+      return;
+    }
+
     try {
-      // Création d'un AudioFrame (conversion en int32 explicite)
-      const samplesPerChannel = Math.floor(pcmData.length / 2 / this.options.channels);
+      // AudioFrame attend Int16Array, pas Buffer
+      // Convertir Buffer → Int16Array (éviter .slice, utiliser .subarray selon doc)
+      const int16Array = new Int16Array(
+        pcmData.buffer,
+        pcmData.byteOffset,
+        pcmData.length / 2  // length en samples, pas en bytes
+      );
+
+      const samplesPerChannel = Math.floor(int16Array.length / this.options.channels);
 
       const frame = new AudioFrame(
-        pcmData,
+        int16Array,
         parseInt(this.options.sampleRate, 10),
         parseInt(this.options.channels, 10),
         samplesPerChannel
@@ -252,7 +285,10 @@ export class LiveKitClient extends EventEmitter {
       await this.audioSource.captureFrame(frame);
 
     } catch (error) {
-      console.error('Erreur envoi audio:', error);
+      // Ne logger que les erreurs non-InvalidState pour éviter le spam
+      if (!error.message.includes('InvalidState')) {
+        console.error('Erreur envoi audio:', error);
+      }
     }
   }
 
@@ -320,7 +356,14 @@ export class LiveKitClient extends EventEmitter {
     if (this.room) {
       // Unpublish track
       if (this.localAudioTrack) {
-        await this.room.localParticipant.unpublishTrack(this.localAudioTrack.sid);
+        try {
+          await this.room.localParticipant.unpublishTrack(this.localAudioTrack.sid);
+        } catch (error) {
+          // Ignorer l'erreur si le track n'existe plus (shutdown rapide)
+          if (!error.message?.includes('track not found')) {
+            console.warn('⚠️  Erreur unpublish track:', error.message);
+          }
+        }
         this.localAudioTrack = null;
       }
 

server/bridge/LiveKitServerBridge.js

@@ -1,237 +0,0 @@
-/**
- * LiveKitServerBridge.js
- * Pont entre AudioBridge (cartes son) et LiveKit (clients WebRTC)
- *
- * Agit comme un participant virtuel qui :
- * - Publie l'audio des cartes son vers les clients WebRTC
- * - Reçoit l'audio des clients et le renvoie vers les cartes son
- *
- * Architecture :
- * [Carte Son] → AudioBridge → LiveKitServerBridge → LiveKit SFU → [Clients WebRTC]
- *                                      ↑
- *                            Gère le routing par groupe
- */
-
-import { RoomServiceClient, AccessToken, TrackSource } from 'livekit-server-sdk';
-import { EventEmitter } from 'events';
-
-export class LiveKitServerBridge extends EventEmitter {
-  constructor(audioBridge, options = {}) {
-    super();
-
-    this.audioBridge = audioBridge;
-
-    this.options = {
-      url: options.url || 'ws://localhost:7880',
-      apiKey: options.apiKey || process.env.LIVEKIT_API_KEY,
-      apiSecret: options.apiSecret || process.env.LIVEKIT_API_SECRET,
-      roomName: options.roomName || 'main',
-      participantName: options.participantName || 'AudioBridge',
-      ...options
-    };
-
-    this.roomServiceClient = null;
-    this.activeGroups = new Map(); // Map<groupName, { participants, audioData }>
-    this.isConnected = false;
-  }
-
-  /**
-   * Initialise la connexion au serveur LiveKit
-   */
-  async connect() {
-    try {
-      // Créer le client pour l'API LiveKit
-      this.roomServiceClient = new RoomServiceClient(
-        this.options.url.replace('ws://', 'http://').replace('wss://', 'https://'),
-        this.options.apiKey,
-        this.options.apiSecret
-      );
-
-      console.log('✓ LiveKitServerBridge : Connexion API établie');
-
-      // Configurer les événements AudioBridge
-      this._setupAudioBridgeListeners();
-
-      this.isConnected = true;
-      this.emit('connected');
-    } catch (error) {
-      console.error('Erreur connexion LiveKitServerBridge:', error);
-      throw error;
-    }
-  }
-
-  /**
-   * Configure les listeners pour l'AudioBridge
-   * @private
-   */
-  _setupAudioBridgeListeners() {
-    // FLUX SORTANT : Carte son → Groupes → LiveKit
-    this.audioBridge.on('groupAudioOut', ({ groupName, opusData, pcmBuffer }) => {
-      this._handleGroupAudioOut(groupName, opusData, pcmBuffer);
-    });
-
-    console.log('✓ LiveKitServerBridge : Listeners AudioBridge configurés');
-  }
-
-  /**
-   * Gère l'audio sortant d'un groupe vers LiveKit
-   * @param {string} groupName - Nom du groupe
-   * @param {Buffer} opusData - Données Opus encodées
-   * @param {Buffer} pcmBuffer - Données PCM (pour debug)
-   * @private
-   */
-  async _handleGroupAudioOut(groupName, opusData, pcmBuffer) {
-    try {
-      // Pour l'instant, on stocke les données pour les envoyer via DataChannel
-      // ou via un participant virtuel par groupe
-
-      // IMPLÉMENTATION PHASE 3+ :
-      // Option A : Utiliser @livekit/rtc-node pour créer un AudioSource par groupe
-      // Option B : Utiliser DataChannel pour envoyer Opus directement
-      // Option C : Utiliser un participant virtuel par groupe (simple mais plus de ressources)
-
-      // Pour Phase actuelle, on émet un événement pour debug/monitoring
-      this.emit('groupAudioProcessed', {
-        groupName,
-        opusSize: opusData.length,
-        pcmSize: pcmBuffer.length
-      });
-
-      // TODO: Implémenter l'envoi réel vers LiveKit
-      // Voir docs/LIVEKIT_AUDIO_BRIDGE.md pour les 3 approches possibles
-
-    } catch (error) {
-      console.error(`Erreur envoi audio groupe ${groupName}:`, error);
-      this.emit('error', { groupName, error });
-    }
-  }
-
-  /**
-   * Méthode pour simuler la réception d'audio depuis LiveKit
-   * (À connecter avec le vrai système LiveKit via webhook ou polling)
-   *
-   * @param {string} groupName - Nom du groupe
-   * @param {Buffer} pcmBuffer - Audio PCM depuis un client
-   */
-  injectGroupAudioIn(groupName, pcmBuffer) {
-    // Envoyer vers AudioBridge pour routing vers la carte son
-    this.audioBridge.emit('groupAudioIn', { groupName, pcmBuffer });
-  }
-
-  /**
-   * Génère un token d'accès pour un client
-   * @param {string} identity - Identité du participant (ex: "user123")
-   * @param {string} groupName - Groupe à rejoindre
-   * @returns {string} JWT token
-   */
-  async generateClientToken(identity, groupName) {
-    const at = new AccessToken(
-      this.options.apiKey,
-      this.options.apiSecret,
-      {
-        identity,
-        name: identity,
-        ttl: '24h'
-      }
-    );
-
-    at.addGrant({
-      room: groupName, // Chaque groupe = une room LiveKit
-      roomJoin: true,
-      canPublish: true,
-      canSubscribe: true,
-      canPublishData: true
-    });
-
-    return at.toJwt();
-  }
-
-  /**
-   * Liste tous les participants actifs dans une room/groupe
-   * @param {string} groupName - Nom du groupe
-   * @returns {Promise<Array>} Liste des participants
-   */
-  async listParticipants(groupName) {
-    try {
-      const participants = await this.roomServiceClient.listParticipants(groupName);
-      return participants;
-    } catch (error) {
-      console.error(`Erreur listing participants ${groupName}:`, error);
-      return [];
-    }
-  }
-
-  /**
-   * Vérifie si une room/groupe existe
-   * @param {string} groupName - Nom du groupe
-   * @returns {Promise<boolean>}
-   */
-  async roomExists(groupName) {
-    try {
-      const rooms = await this.roomServiceClient.listRooms();
-      return rooms.some(room => room.name === groupName);
-    } catch (error) {
-      console.error('Erreur vérification room:', error);
-      return false;
-    }
-  }
-
-  /**
-   * Crée une room/groupe si elle n'existe pas
-   * @param {string} groupName - Nom du groupe
-   */
-  async ensureRoomExists(groupName) {
-    const exists = await this.roomExists(groupName);
-
-    if (!exists) {
-      try {
-        await this.roomServiceClient.createRoom({
-          name: groupName,
-          emptyTimeout: 300, // 5 minutes timeout si vide
-          maxParticipants: 50
-        });
-        console.log(`✓ Room créée : ${groupName}`);
-      } catch (error) {
-        console.error(`Erreur création room ${groupName}:`, error);
-      }
-    }
-  }
-
-  /**
-   * Obtient les statistiques du bridge
-   */
-  getStats() {
-    return {
-      connected: this.isConnected,
-      activeGroups: this.activeGroups.size,
-      apiUrl: this.options.url,
-      roomName: this.options.roomName
-    };
-  }
-
-  /**
-   * Déconnexion
-   */
-  async disconnect() {
-    if (this.audioBridge) {
-      this.audioBridge.removeAllListeners('groupAudioOut');
-    }
-
-    this.activeGroups.clear();
-    this.isConnected = false;
-
-    console.log('✓ LiveKitServerBridge déconnecté');
-    this.emit('disconnected');
-  }
-
-  /**
-   * Détruit le bridge et libère les ressources
-   */
-  async destroy() {
-    await this.disconnect();
-    this.removeAllListeners();
-    console.log('✓ LiveKitServerBridge détruit');
-  }
-}
-
-export default LiveKitServerBridge;

server/bridge/backends/CoreAudioBackend.js

@@ -32,6 +32,11 @@ export class CoreAudioBackend extends EventEmitter {
     this.playbackProcess = null;
     this.isCapturing = false;
     this.isPlaying = false;
+    this.shuttingDown = false;
+
+    // Buffer d'accumulation pour la capture (sox envoie des chunks de taille variable)
+    this.captureAccumulator = Buffer.alloc(0);
+    this.targetCaptureBytes = this.options.framesPerBuffer * 2 * this.options.channels; // 2 bytes per sample
 
     // Buffer circulaire pour la lecture
     this.playbackBuffer = [];
@@ -48,7 +53,6 @@ export class CoreAudioBackend extends EventEmitter {
       const data = JSON.parse(output);
 
       const devices = [];
-      let id = 0;
 
       // Parse audio devices
       if (data.SPAudioDataType) {
@@ -62,13 +66,16 @@ export class CoreAudioBackend extends EventEmitter {
               const outputChannels = parseInt(device.coreaudio_device_output) || 0;
               const sampleRate = parseInt(device.coreaudio_device_srate) || 48000;
 
+              // Utiliser le UID CoreAudio comme ID (unique et stable)
+              const deviceUID = device._uniqueID || device.coreaudio_device_uid || name;
+
               // Ignorer les devices sans input ni output
               if (inputChannels === 0 && outputChannels === 0) {
                 return;
               }
 
               devices.push({
-                id: id++,
+                id: deviceUID,
                 name: name,
                 maxInputChannels: inputChannels,
                 maxOutputChannels: outputChannels,
@@ -90,7 +97,7 @@ export class CoreAudioBackend extends EventEmitter {
       if (devices.length === 0) {
         devices.push(
           {
-            id: 0,
+            id: 'builtin-mic',
             name: 'Built-in Microphone',
             maxInputChannels: 1,
             maxOutputChannels: 0,
@@ -98,7 +105,7 @@ export class CoreAudioBackend extends EventEmitter {
             hostAPIName: 'Core Audio'
           },
           {
-            id: 1,
+            id: 'builtin-output',
             name: 'Built-in Output',
             maxInputChannels: 0,
             maxOutputChannels: 2,
@@ -116,7 +123,7 @@ export class CoreAudioBackend extends EventEmitter {
       // Fallback : devices par défaut
       return [
         {
-          id: 0,
+          id: 'builtin-mic',
           name: 'Built-in Microphone',
           maxInputChannels: 1,
           maxOutputChannels: 0,
@@ -124,7 +131,7 @@ export class CoreAudioBackend extends EventEmitter {
           hostAPIName: 'Core Audio'
         },
         {
-          id: 1,
+          id: 'builtin-output',
           name: 'Built-in Output',
           maxInputChannels: 0,
           maxOutputChannels: 2,
@@ -182,35 +189,45 @@ export class CoreAudioBackend extends EventEmitter {
     }
 
     try {
-      // Commande sox pour capturer audio
-      // rec : enregistrer depuis input par défaut
-      // -t raw : format raw PCM
-      // -b 16 : 16-bit
-      // -e signed-integer : signed PCM
-      // -c 1 : mono (ou nombre de canaux)
-      // -r 48000 : sample rate
-      // - : sortie vers stdout
-      const args = [
-        '-t', 'coreaudio',  // Driver CoreAudio
-        'default',          // Device par défaut (ou spécifier nom)
-        '-t', 'raw',
-        '-b', '16',
-        '-e', 'signed-integer',
-        `-c`, String(this.options.channels),
-        `-r`, String(this.options.sampleRate),
-        '-'  // Stdout
-      ];
+      // Commande sox pour capturer audio sur macOS
+      // Sur macOS, sox utilise CoreAudio par défaut via 'rec' (alias de sox -d)
+      // Format: sox -d [options] output
+      // -d = default input device OU -t coreaudio "Device Name"
 
-      // Si device spécifié
+      const args = [];
+
+      // Spécifier le device d'entrée (CoreAudio capture en 32-bit natif)
       if (this.options.inputDeviceName) {
-        args[1] = this.options.inputDeviceName;
+        args.push('-t', 'coreaudio', this.options.inputDeviceName);
+      } else {
+        args.push('-d');
       }
 
+      // Format de sortie (stdout) - convertir 32→16 bit
+      args.push(
+        '-t', 'raw',      // Format sortie raw PCM
+        '-b', '16',       // Convertir vers 16-bit
+        '-e', 'signed-integer',
+        '-c', String(this.options.channels),
+        '-r', String(this.options.sampleRate),
+        '-'  // Stdout
+      );
+
+      console.log(`🎤 Démarrage capture sox: ${args.join(' ')}`);
       this.captureProcess = spawn('sox', args);
 
       this.captureProcess.stdout.on('data', (audioData) => {
-        // Émet les données audio capturées (Buffer PCM 16-bit)
-        this.emit('audioData', audioData);
+        // Accumuler les données jusqu'à avoir un frame complet
+        this.captureAccumulator = Buffer.concat([this.captureAccumulator, audioData]);
+
+        // Émettre des frames de taille fixe
+        while (this.captureAccumulator.length >= this.targetCaptureBytes) {
+          const frame = this.captureAccumulator.subarray(0, this.targetCaptureBytes);
+          this.emit('audioData', Buffer.from(frame)); // Copier pour éviter les références
+
+          // Garder le reste pour la prochaine frame
+          this.captureAccumulator = this.captureAccumulator.subarray(this.targetCaptureBytes);
+        }
       });
 
       this.captureProcess.stderr.on('data', (data) => {
@@ -246,6 +263,7 @@ export class CoreAudioBackend extends EventEmitter {
       this.captureProcess.kill('SIGTERM');
       this.captureProcess = null;
       this.isCapturing = false;
+      this.captureAccumulator = Buffer.alloc(0); // Reset accumulator
       console.log('✓ Capture audio arrêtée');
     }
   }
@@ -255,32 +273,42 @@ export class CoreAudioBackend extends EventEmitter {
    * @returns {Promise<void>}
    */
   async startPlayback() {
+    console.log('🔊 Démarrage playback sox...');
+
     if (this.isPlaying) {
-      console.warn('Lecture déjà active');
+      console.warn('⚠️  Lecture déjà active');
       return;
     }
 
     try {
-      // Commande sox pour lecture audio
-      // play : lire vers output par défaut
-      // -t raw : format raw PCM depuis stdin
+      // Commande sox pour lecture audio sur macOS
+      // Format: sox [options] input output
+      // Input = stdin (-)
+      // Output = -d (default) OU -t coreaudio "Device Name"
+
       const args = [
+        '--buffer', '65536',  // Buffer 64k (évite EOF prématuré)
         '-t', 'raw',
         '-b', '16',
         '-e', 'signed-integer',
-        `-c`, String(this.options.channels),
-        `-r`, String(this.options.sampleRate),
-        '-',  // Stdin
-        '-t', 'coreaudio',
-        'default'  // Device par défaut
+        '-c', String(this.options.channels),
+        '-r', String(this.options.sampleRate),
+        '-'  // Input = stdin
       ];
 
-      // Si device spécifié
+      // Spécifier le device de sortie
       if (this.options.outputDeviceName) {
-        args[args.length - 1] = this.options.outputDeviceName;
+        // Utiliser le device spécifié par son nom
+        args.push('-t', 'coreaudio', this.options.outputDeviceName);
+      } else {
+        // Device par défaut
+        args.push('-d');
       }
 
-      this.playbackProcess = spawn('sox', args);
+      console.log(`🔊 Démarrage playback sox: ${args.join(' ')}`);
+      this.playbackProcess = spawn('sox', args, {
+        stdio: ['pipe', 'ignore', 'pipe']  // stdin=pipe, stdout=ignore, stderr=pipe
+      });
 
       // Gérer l'erreur EPIPE sur stdin (si processus se ferme)
       this.playbackProcess.stdin.on('error', (error) => {
@@ -305,13 +333,35 @@ export class CoreAudioBackend extends EventEmitter {
       });
 
       this.playbackProcess.on('close', (code) => {
-        console.log(`Sox playback fermé (code ${code})`);
+        const uptime = ((Date.now() - this.playbackStartTime) / 1000).toFixed(1);
+        console.log(`⚠️  Sox playback fermé (code ${code}) après ${uptime}s`);
         this.isPlaying = false;
+
+        // Redémarrer automatiquement (sox se ferme quand le buffer stdin se vide)
+        if (!this.shuttingDown) {
+          console.log('🔄 Redémarrage automatique du playback...');
+          setTimeout(() => {
+            if (!this.shuttingDown) {
+              this.startPlayback().catch(err => {
+                console.error('Erreur redémarrage playback:', err);
+              });
+            }
+          }, 100);
+        }
       });
 
+      this.playbackStartTime = Date.now();
       this.isPlaying = true;
       this._startPlaybackLoop();
 
+      // Envoyer immédiatement du silence pour démarrer sox
+      const silenceBuffer = Buffer.alloc(this.options.framesPerBuffer * 2 * this.options.channels);
+      for (let i = 0; i < 10; i++) {
+        if (this.playbackProcess.stdin.writable) {
+          this.playbackProcess.stdin.write(silenceBuffer);
+        }
+      }
+
       console.log(`✓ Lecture audio démarrée : ${this.options.sampleRate}Hz, ${this.options.channels}ch`);
     } catch (error) {
       console.error('Erreur démarrage lecture:', error);
@@ -323,6 +373,11 @@ export class CoreAudioBackend extends EventEmitter {
    * Arrête la lecture audio
    */
   stopPlayback() {
+    if (this.playbackInterval) {
+      clearInterval(this.playbackInterval);
+      this.playbackInterval = null;
+    }
+
     if (this.playbackProcess && this.isPlaying) {
       this.playbackProcess.kill('SIGTERM');
       this.playbackProcess = null;
@@ -338,10 +393,16 @@ export class CoreAudioBackend extends EventEmitter {
    */
   queueAudio(audioData) {
     if (!this.isPlaying) {
-      console.warn('Tentative ajout audio alors que lecture inactive');
+      // Ne logger qu'une fois pour éviter le spam
+      if (!this.playbackInactiveWarned) {
+        console.warn('⚠️  Tentative ajout audio alors que lecture inactive (message unique)');
+        this.playbackInactiveWarned = true;
+      }
       return;
     }
 
+    this.playbackInactiveWarned = false;
+
     // Limite la taille du buffer pour éviter la latence excessive
     if (this.playbackBuffer.length < this.maxBufferSize) {
       this.playbackBuffer.push(audioData);
@@ -356,48 +417,55 @@ export class CoreAudioBackend extends EventEmitter {
    * @private
    */
   _startPlaybackLoop() {
-    const playNextChunk = () => {
+    // Calculer l'intervalle en ms (ex: 960 frames à 48kHz = 20ms)
+    const intervalMs = (this.options.framesPerBuffer / this.options.sampleRate) * 1000;
+
+    console.log(`🔁 Boucle playback démarrée (intervalle: ${intervalMs}ms)`);
+
+    // Utiliser setInterval pour garantir un flux continu
+    this.playbackInterval = setInterval(() => {
       if (!this.isPlaying || !this.playbackProcess || !this.playbackProcess.stdin) {
+        if (this.playbackInterval) {
+          clearInterval(this.playbackInterval);
+          this.playbackInterval = null;
+        }
         return;
       }
 
+      let chunk;
       if (this.playbackBuffer.length > 0) {
-        const chunk = this.playbackBuffer.shift();
-        try {
-          if (this.playbackProcess.stdin.writable) {
-            this.playbackProcess.stdin.write(chunk);
-          }
-        } catch (error) {
-          console.error('Erreur écriture stdin sox:', error);
-          this.isPlaying = false;
-          return;
-        }
+        chunk = this.playbackBuffer.shift();
       } else {
-        // Buffer vide : underrun (silence)
-        const silenceBuffer = Buffer.alloc(this.options.framesPerBuffer * 2 * this.options.channels);
-        try {
-          if (this.playbackProcess.stdin.writable) {
-            this.playbackProcess.stdin.write(silenceBuffer);
-          }
-        } catch (error) {
-          // Ignore si process fermé
-          this.isPlaying = false;
-          return;
-        }
-        this.emit('bufferUnderrun');
+        // Buffer vide : underrun (envoyer du silence)
+        chunk = Buffer.alloc(this.options.framesPerBuffer * 2 * this.options.channels);
       }
 
-      const intervalMs = (this.options.framesPerBuffer / this.options.sampleRate) * 1000;
-      setTimeout(playNextChunk, intervalMs);
-    };
-
-    playNextChunk();
+      // Toujours écrire quelque chose pour garder sox actif
+      try {
+        if (this.playbackProcess.stdin.writable) {
+          this.playbackProcess.stdin.write(chunk);
+        } else {
+          console.warn('⚠️  Sox stdin non writable, arrêt boucle');
+          this.isPlaying = false;
+          clearInterval(this.playbackInterval);
+          this.playbackInterval = null;
+        }
+      } catch (error) {
+        if (error.code !== 'EPIPE') {
+          console.error('Erreur écriture stdin sox:', error);
+        }
+        this.isPlaying = false;
+        clearInterval(this.playbackInterval);
+        this.playbackInterval = null;
+      }
+    }, intervalMs);
   }
 
   /**
    * Arrête tous les streams
    */
   destroy() {
+    this.shuttingDown = true;
     this.stopCapture();
     this.stopPlayback();
     this.removeAllListeners();

server/bridge/backends/JACKBackend.js

@@ -30,6 +30,12 @@ export class JACKBackend extends EventEmitter {
     this.jackProcess = null;
     this.isCapturing = false;
     this.isPlaying = false;
+    this.shuttingDown = false;
+
+    // Buffer d'accumulation pour la capture (JACK peut envoyer des chunks de taille variable)
+    this.captureAccumulator = Buffer.alloc(0);
+    this.targetCaptureBytes = this.options.framesPerBuffer * 2 * this.options.channels; // 2 bytes per sample
+
     this.playbackBuffer = [];
     this.maxBufferSize = 10;
 
@@ -213,8 +219,17 @@ export class JACKBackend extends EventEmitter {
       ]);
 
       this.jackProcess.stdout.on('data', (audioData) => {
-        // Émet les données audio capturées (Buffer PCM 16-bit)
-        this.emit('audioData', audioData);
+        // Accumuler les données jusqu'à avoir un frame complet
+        this.captureAccumulator = Buffer.concat([this.captureAccumulator, audioData]);
+
+        // Émettre des frames de taille fixe
+        while (this.captureAccumulator.length >= this.targetCaptureBytes) {
+          const frame = this.captureAccumulator.subarray(0, this.targetCaptureBytes);
+          this.emit('audioData', Buffer.from(frame)); // Copier pour éviter les références
+
+          // Garder le reste pour la prochaine frame
+          this.captureAccumulator = this.captureAccumulator.subarray(this.targetCaptureBytes);
+        }
       });
 
       this.jackProcess.stderr.on('data', (data) => {
@@ -248,6 +263,7 @@ export class JACKBackend extends EventEmitter {
       this.jackProcess.kill('SIGTERM');
       this.jackProcess = null;
       this.isCapturing = false;
+      this.captureAccumulator = Buffer.alloc(0); // Reset accumulator
       console.log('✓ Capture JACK arrêtée');
     }
   }
@@ -359,6 +375,7 @@ export class JACKBackend extends EventEmitter {
    * Arrête tous les streams
    */
   destroy() {
+    this.shuttingDown = true;
     this.stopCapture();
     this.stopPlayback();
     this.removeAllListeners();

server/bridge/backends/PipeWireBackend.js

@@ -23,7 +23,8 @@ export class PipeWireBackend extends EventEmitter {
       sampleRate: options.sampleRate || 48000,
       channels: options.channels || 1,
       framesPerBuffer: options.framesPerBuffer || 960,
-      targetDevice: options.targetDevice || null,
+      inputTargetDevice: options.inputTargetDevice || null,
+      outputTargetDevice: options.outputTargetDevice || null,
       latency: options.latency || 20, // ms
       ...options
     };
@@ -32,6 +33,12 @@ export class PipeWireBackend extends EventEmitter {
     this.playbackProcess = null;
     this.isCapturing = false;
     this.isPlaying = false;
+    this.shuttingDown = false;
+
+    // Buffer d'accumulation pour la capture (pw-cat envoie des chunks de taille variable)
+    this.captureAccumulator = Buffer.alloc(0);
+    this.targetCaptureBytes = this.options.framesPerBuffer * 2 * this.options.channels; // 2 bytes per sample
+
     this.playbackBuffer = [];
     this.maxBufferSize = 10;
   }
@@ -74,8 +81,10 @@ export class PipeWireBackend extends EventEmitter {
 
     try {
       // Utilise pactl (compatible PipeWire) pour lister les devices
-      const sourcesOutput = execSync('pactl list sources short', { encoding: 'utf8' });
-      const sinksOutput = execSync('pactl list sinks short', { encoding: 'utf8' });
+      // Chemin absolu pour éviter les problèmes de PATH avec /bin/sh
+      const pactlCmd = '/usr/bin/pactl';
+      const sourcesOutput = execSync(`${pactlCmd} list sources short`, { encoding: 'utf8' });
+      const sinksOutput = execSync(`${pactlCmd} list sinks short`, { encoding: 'utf8' });
 
       const devices = [];
 
@@ -126,7 +135,8 @@ export class PipeWireBackend extends EventEmitter {
    */
   static getDefaultInputDevice() {
     try {
-      const output = execSync('pactl get-default-source', { encoding: 'utf8' });
+      const pactlCmd = '/usr/bin/pactl';
+      const output = execSync(`${pactlCmd} get-default-source`, { encoding: 'utf8' });
       const defaultName = output.trim();
 
       const devices = this.getDevices();
@@ -144,7 +154,8 @@ export class PipeWireBackend extends EventEmitter {
    */
   static getDefaultOutputDevice() {
     try {
-      const output = execSync('pactl get-default-sink', { encoding: 'utf8' });
+      const pactlCmd = '/usr/bin/pactl';
+      const output = execSync(`${pactlCmd} get-default-sink`, { encoding: 'utf8' });
       const defaultName = output.trim();
 
       const devices = this.getDevices();
@@ -182,14 +193,24 @@ export class PipeWireBackend extends EventEmitter {
       ];
 
       // Ajoute le device cible si spécifié
-      if (this.options.targetDevice) {
-        args.push(`--target=${this.options.targetDevice}`);
+      if (this.options.inputTargetDevice) {
+        args.push(`--target=${this.options.inputTargetDevice}`);
       }
 
       this.captureProcess = spawn('pw-cat', args);
 
       this.captureProcess.stdout.on('data', (audioData) => {
-        this.emit('audioData', audioData);
+        // Accumuler les données jusqu'à avoir un frame complet
+        this.captureAccumulator = Buffer.concat([this.captureAccumulator, audioData]);
+
+        // Émettre des frames de taille fixe
+        while (this.captureAccumulator.length >= this.targetCaptureBytes) {
+          const frame = this.captureAccumulator.subarray(0, this.targetCaptureBytes);
+          this.emit('audioData', Buffer.from(frame)); // Copier pour éviter les références
+
+          // Garder le reste pour la prochaine frame
+          this.captureAccumulator = this.captureAccumulator.subarray(this.targetCaptureBytes);
+        }
       });
 
       this.captureProcess.stderr.on('data', (data) => {
@@ -226,6 +247,7 @@ export class PipeWireBackend extends EventEmitter {
       this.captureProcess.kill('SIGTERM');
       this.captureProcess = null;
       this.isCapturing = false;
+      this.captureAccumulator = Buffer.alloc(0); // Reset accumulator
       console.log('✓ Capture PipeWire arrêtée');
     }
   }
@@ -254,8 +276,8 @@ export class PipeWireBackend extends EventEmitter {
         '-' // Lecture depuis stdin
       ];
 
-      if (this.options.targetDevice) {
-        args.push(`--target=${this.options.targetDevice}`);
+      if (this.options.outputTargetDevice) {
+        args.push(`--target=${this.options.outputTargetDevice}`);
       }
 
       this.playbackProcess = spawn('pw-cat', args);
@@ -355,6 +377,7 @@ export class PipeWireBackend extends EventEmitter {
    * Arrête tous les streams
    */
   destroy() {
+    this.shuttingDown = true;
     this.stopCapture();
     this.stopPlayback();
     this.removeAllListeners();

server/config/config.yaml

@@ -1,51 +1,60 @@
 audio:
   sampleRate: 48000
+  channels: 2
   frameSize: 20
-  defaultBitrate: 96
+  defaultBitrate: 128
   jitterBufferMs: 40
   device:
-    inputDeviceId: 1
-    outputDeviceId: 0
+    inputDeviceId: Loopback Audio 4
+    outputDeviceId: Haut-parleurs MacBook Pro
     sampleRate: 48000
   routing:
     inputToGroup:
-      "1":
-        - technique
-      "2":
-        - technique
+      "0":
+        - default
+      "1": []
+      "2": []
       "4":
         - technique
       "5":
         - technique
-    groupToOutput: {}
+    groupToOutput:
+      technique:
+        - "1"
+      production:
+        - "0"
+        - "1"
+      default:
+        - "0"
     gains: {}
   channelNames:
     inputs:
-      "0": Micro Régisseur
+      "0": Mac
       "1": Talkback FOH
       "2": Retour Console
       "3": Liaison Scène
       "4": Monitor Mix
       "5": Spare 1
     outputs:
-      "0": Sortie Principale
-      "1": Retour Scène
+      "0": L
+      "1": R
       "2": Talkback Console
 groups:
+  - name: Default
+    audioBitrate: 96
+    channels: []
   - name: Production
     audioBitrate: 96
     channels: []
   - name: Technique
-    channels: []
-  - name: Sonorisation
-    audioBitrate: 128
+    audioBitrate: 96
     channels: []
 server:
   host: 0.0.0.0
   port: 3000
   livekit:
-    url: ws://localhost:7880
+    url: AUTO
 logging:
   level: debug
-  logLatency: true
-  logAudioStats: true
+  logLatency: false
+  logAudioStats: false

server/index.js

@@ -2,8 +2,10 @@
 
 import 'dotenv/config';
 import express from 'express';
+import https from 'https';
+import http from 'http';
 import { spawn } from 'child_process';
-import { readFileSync } from 'fs';
+import { readFileSync, existsSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { dirname, join } from 'path';
 import { networkInterfaces } from 'os';
@@ -13,12 +15,19 @@ import adminRouter, { registerUser, addLog } from './api/admin.js';
 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));
 
 // Chargement configuration via ConfigManager
 const config = configManager.get();
 
+// Configure le niveau de log
+const logLevel = config.logging?.level?.toUpperCase() || 'INFO';
+setGlobalLogLevel(logLevel);
+console.log(`📊 Niveau de log: ${logLevel}`);
+
 // Note: Les IDs sont maintenant générés automatiquement par le ConfigManager
 
 /**
@@ -61,6 +70,7 @@ const LIVEKIT_API_SECRET = process.env.LIVEKIT_API_SECRET || 'secret';
 const USE_LOCAL_LIVEKIT = process.env.USE_LOCAL_LIVEKIT === 'true';
 const SERVER_PORT = parseInt(process.env.PORT || config.server.port, 10);
 const SERVER_HOST = config.server.host;
+const ENABLE_HTTPS = process.env.ENABLE_HTTPS === 'true';
 
 // Configuration URL LiveKit
 let LIVEKIT_URL = process.env.LIVEKIT_URL || config.server.livekit.url;
@@ -99,8 +109,11 @@ let livekitProcess = null;
 
 function startLiveKitServer() {
   return new Promise((resolve, reject) => {
-    // Utiliser le binaire Homebrew (dans PATH)
-    const livekitBinary = 'livekit-server';
+    // Détection du binaire LiveKit :
+    // 1. Binaire local (Linux après install.sh) : server/bin/livekit-server
+    // 2. Binaire Homebrew (macOS) : livekit-server dans PATH
+    const localBinary = join(__dirname, 'bin', 'livekit-server');
+    const livekitBinary = existsSync(localBinary) ? localBinary : 'livekit-server';
 
     log('info', 'Démarrage LiveKit Server...');
     log('debug', 'Commande:', livekitBinary);
@@ -117,16 +130,27 @@ function startLiveKitServer() {
 
     livekitProcess = spawn(livekitBinary, args, {
       stdio: ['ignore', 'pipe', 'pipe'],
-      env: { ...process.env },
+      env: {
+        ...process.env,
+        LIVEKIT_LOG_LEVEL: 'info'  // Réduit les logs LiveKit (debug → info)
+      },
       shell: true  // Permet de trouver le binaire dans PATH
     });
 
     livekitProcess.stdout.on('data', (data) => {
       const output = data.toString().trim();
-      if (output) {
-        log('debug', '[LiveKit]', output);
+      if (!output) return;
+
+      // Filtrer les logs trop verbeux
+      if (output.includes('DEBUG') ||
+          output.includes('received signal request') ||
+          output.includes('sending signal response') ||
+          output.includes('handling signal request')) {
+        return; // Ignorer ces logs
       }
 
+      log('debug', '[LiveKit]', output);
+
       // Détection démarrage réussi
       if (output.includes('starting server') || output.includes('rtc server')) {
         resolve();
@@ -135,9 +159,14 @@ function startLiveKitServer() {
 
     livekitProcess.stderr.on('data', (data) => {
       const output = data.toString().trim();
-      if (output) {
-        log('warn', '[LiveKit Error]', output);
+      if (!output) return;
+
+      // Filtrer les logs DEBUG de stderr aussi
+      if (output.includes('DEBUG')) {
+        return;
       }
+
+      log('warn', '[LiveKit Error]', output);
     });
 
     livekitProcess.on('error', (error) => {
@@ -175,12 +204,36 @@ app.use((req, res, next) => {
   next();
 });
 
+// Middleware redirection HTTP → HTTPS (si activé)
+app.use((req, res, next) => {
+  // Si HTTPS activé et requête en HTTP, rediriger
+  if (ENABLE_HTTPS && req.protocol === 'http' && req.hostname !== 'localhost') {
+    const httpsUrl = `https://${req.hostname}:${SERVER_PORT}${req.url}`;
+    log('debug', `↪️  Redirection HTTPS: ${httpsUrl}`);
+    return res.redirect(301, httpsUrl);
+  }
+
+  next();
+});
+
 // Middleware logging
 app.use((req, res, next) => {
   log('debug', `${req.method} ${req.path}`);
   next();
 });
 
+// ========== Servir fichiers statiques client (production) ==========
+
+// En production, servir le build client depuis ../client/dist
+const clientDistPath = join(__dirname, '..', 'client', 'dist');
+
+if (existsSync(clientDistPath)) {
+  log('info', `📦 Serveur statique activé : ${clientDistPath}`);
+  app.use(express.static(clientDistPath));
+} else {
+  log('debug', '📦 Pas de build client (mode dev)');
+}
+
 // ========== Routes Admin ==========
 
 // Monter les routes admin sous /admin
@@ -188,11 +241,14 @@ app.use('/admin', adminRouter);
 
 // ========== Routes API ==========
 
+// Créer un router pour les routes API
+const apiRouter = express.Router();
+
 /**
  * GET /config
  * Retourne la configuration des groupes
  */
-app.get('/config', (req, res) => {
+apiRouter.get('/config', (req, res) => {
   try {
     const clientConfig = {
       groups: config.groups.map(g => ({
@@ -216,7 +272,7 @@ app.get('/config', (req, res) => {
  * GET /groups
  * Retourne la liste des groupes disponibles (simplifié)
  */
-app.get('/groups', (req, res) => {
+apiRouter.get('/groups', (req, res) => {
   try {
     const groups = config.groups.map(g => ({
       id: g.id,
@@ -235,7 +291,7 @@ app.get('/groups', (req, res) => {
  * Génère un token LiveKit pour un client
  * Body: { username: string, groupId: string }
  */
-app.post('/token', async (req, res) => {
+apiRouter.post('/token', async (req, res) => {
   try {
     const { username, groupId } = req.body;
 
@@ -314,7 +370,7 @@ app.post('/token', async (req, res) => {
  * GET /health
  * Health check
  */
-app.get('/health', (req, res) => {
+apiRouter.get('/health', (req, res) => {
   const isLivekitRunning = livekitProcess !== null;
   res.json({
     status: isLivekitRunning ? 'ok' : 'degraded',
@@ -323,22 +379,61 @@ app.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
+
 /**
  * GET /
- * Info serveur
+ * Info serveur OU client PWA (si build existe)
  */
 app.get('/', (req, res) => {
-  res.json({
-    name: 'PTT Live Server',
-    version: '0.1.0',
-    phase: 'Phase 1 - MVP',
-    endpoints: [
-      'GET  /config - Configuration groupes',
-      'GET  /groups - Liste des groupes',
-      'POST /token  - Générer token client',
-      'GET  /health - Health check'
-    ]
-  });
+  // Si build client existe, servir index.html
+  const indexPath = join(clientDistPath, 'index.html');
+  if (existsSync(indexPath)) {
+    res.sendFile(indexPath);
+  } else {
+    // Sinon, afficher info API
+    res.json({
+      name: 'PTT Live Server',
+      version: '0.2.0',
+      mode: 'development',
+      endpoints: [
+        'GET  /config - Configuration groupes',
+        'GET  /groups - Liste des groupes',
+        'POST /token  - Générer token client',
+        'GET  /health - Health check',
+        'GET  /admin - Interface administration'
+      ]
+    });
+  }
 });
 
 // ========== Démarrage ==========
@@ -366,23 +461,92 @@ async function start() {
       log('warn', '⚠️  Pour utiliser LiveKit local, définir USE_LOCAL_LIVEKIT=true dans .env');
     }
 
-    // 2. Démarrer API REST
-    const server = app.listen(SERVER_PORT, SERVER_HOST, () => {
-      log('info', `✓ API REST démarrée sur http://${SERVER_HOST}:${SERVER_PORT}`);
-      log('info', '');
-      log('info', 'Serveur prêt !');
-      log('info', `Groupes configurés: ${config.groups.map(g => g.name).join(', ')}`);
-    });
+    // 2. Démarrer API REST (HTTP ou HTTPS selon config)
+    let server;
+
+    if (ENABLE_HTTPS) {
+      // Charger certificats SSL depuis .env ou fallback
+      const certPath = process.env.SSL_CERT || join(__dirname, '..', 'certs', 'localhost.pem');
+      const keyPath = process.env.SSL_KEY || join(__dirname, '..', 'certs', 'localhost-key.pem');
+
+      if (!existsSync(certPath) || !existsSync(keyPath)) {
+        log('error', '❌ Certificats SSL introuvables');
+        log('info', '💡 Exécutez : ./setup-certificates.sh');
+        process.exit(1);
+      }
+
+      const httpsOptions = {
+        key: readFileSync(keyPath),
+        cert: readFileSync(certPath)
+      };
+
+      server = https.createServer(httpsOptions, app);
+      server.listen(SERVER_PORT, SERVER_HOST, () => {
+        log('info', `✓ API REST démarrée sur https://${SERVER_HOST}:${SERVER_PORT}`);
+        log('info', '');
+        log('info', 'Serveur prêt !');
+        log('info', `Groupes configurés: ${config.groups.map(g => g.name).join(', ')}`);
+        log('info', '');
+
+        // Afficher URLs d'accès
+        if (networkIP && networkIP !== 'localhost') {
+          const prodUrl = `https://${networkIP}:${SERVER_PORT}`;
+          log('info', '📱 Accès réseau WiFi :');
+          log('info', '');
+          log('info', `   Prod : ${prodUrl}`);
+          log('info', '');
+        }
+      });
+    } else {
+      server = http.createServer(app);
+      server.listen(SERVER_PORT, SERVER_HOST, () => {
+        log('info', `✓ API REST démarrée sur http://${SERVER_HOST}:${SERVER_PORT}`);
+        log('info', '');
+        log('info', 'Serveur prêt !');
+        log('info', `Groupes configurés: ${config.groups.map(g => g.name).join(', ')}`);
+        log('info', '');
+
+        // Afficher URLs d'accès
+        if (networkIP && networkIP !== 'localhost') {
+          const clientUrl = `https://${networkIP}:5173`; // Dev mode
+          const prodUrl = `http://${networkIP}:${SERVER_PORT}`; // Prod mode HTTP
+
+          log('info', '📱 Accès réseau WiFi :');
+          log('info', '');
+          log('info', `   Dev  : ${clientUrl}`);
+          log('info', `   Prod : ${prodUrl}`);
+          log('info', '');
+        }
+      });
+    }
 
     // 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();
-    log('info', `✓ WebSocket Audio Levels démarré sur ws://${SERVER_HOST}:${SERVER_PORT}`);
+
+    // 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}`);
 
     // 3. Démarrer Audio Bridge Manager (Phase 2.5)
     log('info', '');
     log('info', '🎵 Démarrage Audio Bridge Manager...');
-    await audioBridgeManager.start();
+    await audioBridgeManager.start({ liveKitUrl: LIVEKIT_URL });
     log('info', '✓ Audio Bridge Manager prêt (mode placeholder)');
 
     // Gérer erreur port déjà utilisé

server/package.json

@@ -22,8 +22,11 @@
     "@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",
     "ws": "^8.17.0",
     "yaml": "^2.4.2"
   },

server/utils/Logger.js

@@ -0,0 +1,78 @@
+/**
+ * Logger.js
+ * Système de logging centralisé avec niveaux configurables
+ */
+
+const LOG_LEVELS = {
+  ERROR: 0,
+  WARN: 1,
+  INFO: 2,
+  DEBUG: 3,
+  TRACE: 4
+};
+
+class Logger {
+  constructor(category = 'default', level = 'INFO') {
+    this.category = category;
+    this.level = LOG_LEVELS[level] ?? LOG_LEVELS.INFO;
+  }
+
+  setLevel(level) {
+    this.level = LOG_LEVELS[level] ?? LOG_LEVELS.INFO;
+  }
+
+  error(message, ...args) {
+    if (this.level >= LOG_LEVELS.ERROR) {
+      console.error(`[${this.category}] ❌`, message, ...args);
+    }
+  }
+
+  warn(message, ...args) {
+    if (this.level >= LOG_LEVELS.WARN) {
+      console.warn(`[${this.category}] ⚠️ `, message, ...args);
+    }
+  }
+
+  info(message, ...args) {
+    if (this.level >= LOG_LEVELS.INFO) {
+      console.log(`[${this.category}] ℹ️ `, message, ...args);
+    }
+  }
+
+  success(message, ...args) {
+    if (this.level >= LOG_LEVELS.INFO) {
+      console.log(`[${this.category}] ✓`, message, ...args);
+    }
+  }
+
+  debug(message, ...args) {
+    if (this.level >= LOG_LEVELS.DEBUG) {
+      console.log(`[${this.category}] 🔍`, message, ...args);
+    }
+  }
+
+  trace(message, ...args) {
+    if (this.level >= LOG_LEVELS.TRACE) {
+      console.log(`[${this.category}] 🔬`, message, ...args);
+    }
+  }
+}
+
+// Configuration globale depuis env ou config
+const globalLevel = process.env.LOG_LEVEL || 'INFO';
+
+// Loggers par catégorie
+const loggers = new Map();
+
+export function getLogger(category) {
+  if (!loggers.has(category)) {
+    loggers.set(category, new Logger(category, globalLevel));
+  }
+  return loggers.get(category);
+}
+
+export function setGlobalLogLevel(level) {
+  loggers.forEach(logger => logger.setLevel(level));
+}
+
+export default { getLogger, setGlobalLogLevel };

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
    */

setup-certificates.sh

@@ -0,0 +1,324 @@
+#!/bin/bash
+
+# PTT Live - Configuration Certificats SSL Locaux
+# Génère des certificats auto-signés DE CONFIANCE pour développement local
+
+set -e
+
+echo "🔐 Configuration Certificats SSL Locaux PTT Live"
+echo ""
+
+# Détection OS
+OS="$(uname -s)"
+
+# Couleurs
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+RED='\033[0;31m'
+NC='\033[0m' # No Color
+
+# ========== Installation mkcert ==========
+
+echo "📦 Vérification mkcert..."
+
+if ! command -v mkcert &> /dev/null; then
+    echo -e "${YELLOW}⚠️  mkcert non installé${NC}"
+    echo ""
+    echo "Installation de mkcert (génère certificats de confiance)..."
+    echo ""
+
+    if [[ "$OS" == "Darwin" ]]; then
+        # macOS
+        if command -v brew &> /dev/null; then
+            brew install mkcert
+            brew install nss # Pour Firefox
+        else
+            echo -e "${RED}❌ Homebrew requis sur macOS${NC}"
+            echo "Installez Homebrew : https://brew.sh"
+            exit 1
+        fi
+    elif [[ "$OS" == "Linux" ]]; then
+        # Linux
+        if command -v apt-get &> /dev/null; then
+            # Debian/Ubuntu
+            sudo apt-get update
+            sudo apt-get install -y libnss3-tools
+
+            # Télécharger mkcert
+            curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64"
+            chmod +x mkcert-v*-linux-amd64
+            sudo mv mkcert-v*-linux-amd64 /usr/local/bin/mkcert
+        elif command -v yum &> /dev/null; then
+            # RedHat/CentOS
+            sudo yum install -y nss-tools
+
+            curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64"
+            chmod +x mkcert-v*-linux-amd64
+            sudo mv mkcert-v*-linux-amd64 /usr/local/bin/mkcert
+        else
+            echo -e "${RED}❌ Gestionnaire de paquets non supporté${NC}"
+            echo "Installez mkcert manuellement : https://github.com/FiloSottile/mkcert"
+            exit 1
+        fi
+    else
+        echo -e "${RED}❌ OS non supporté : $OS${NC}"
+        exit 1
+    fi
+
+    echo -e "${GREEN}✅ mkcert installé${NC}"
+    echo ""
+else
+    echo -e "${GREEN}✅ mkcert déjà installé${NC}"
+    echo ""
+fi
+
+# ========== Installation CA Locale ==========
+
+echo "🔑 Installation Certificate Authority (CA) locale..."
+echo ""
+echo "⚠️  Ceci va ajouter une CA locale au système"
+echo "    Les certificats générés seront automatiquement approuvés"
+echo ""
+
+# Installer la CA locale (une seule fois par machine)
+mkcert -install
+
+if [ $? -eq 0 ]; then
+    echo -e "${GREEN}✅ CA locale installée${NC}"
+else
+    echo -e "${RED}❌ Erreur installation CA${NC}"
+    exit 1
+fi
+
+echo ""
+
+# ========== Génération Certificats ==========
+
+echo "📜 Génération certificats pour PTT Live..."
+echo ""
+
+# Détecter l'IP réseau
+if [[ "$OS" == "Darwin" ]]; then
+    # macOS
+    NETWORK_IP=$(ipconfig getifaddr en0 || ipconfig getifaddr en1 || echo "192.168.1.100")
+elif [[ "$OS" == "Linux" ]]; then
+    # Linux
+    NETWORK_IP=$(ip route get 1 | awk '{print $7; exit}' || echo "192.168.1.100")
+fi
+
+echo "🌐 IP réseau détectée : $NETWORK_IP"
+echo ""
+
+# Créer répertoire certificats
+CERT_DIR="$(pwd)/certs"
+mkdir -p "$CERT_DIR"
+
+cd "$CERT_DIR"
+
+# Générer certificats pour :
+# - localhost
+# - IP réseau locale
+# - *.local (wildcard)
+
+echo "Génération certificats pour :"
+echo "  - localhost"
+echo "  - $NETWORK_IP"
+echo "  - *.local"
+echo ""
+
+mkcert \
+    localhost \
+    127.0.0.1 \
+    ::1 \
+    "$NETWORK_IP" \
+    "*.local" \
+    "$(hostname).local"
+
+if [ $? -eq 0 ]; then
+    echo ""
+    echo -e "${GREEN}✅ Certificats générés dans : $CERT_DIR${NC}"
+    echo ""
+
+    # Renommer pour simplifier
+    mv localhost+*.pem localhost.pem 2>/dev/null || true
+    mv localhost+*-key.pem localhost-key.pem 2>/dev/null || true
+
+    echo "📁 Fichiers créés :"
+    ls -lh "$CERT_DIR"/*.pem
+else
+    echo -e "${RED}❌ Erreur génération certificats${NC}"
+    exit 1
+fi
+
+echo ""
+
+# ========== Configuration Serveur ==========
+
+echo "⚙️  Configuration automatique du serveur..."
+echo ""
+
+# Créer/mettre à jour .env serveur
+SERVER_ENV="$(pwd)/../server/.env"
+
+if [ -f "$SERVER_ENV" ]; then
+    # Backup
+    cp "$SERVER_ENV" "$SERVER_ENV.backup"
+    echo "💾 Backup : $SERVER_ENV.backup"
+fi
+
+# Détecter les fichiers de certificats générés
+CERT_FILE=$(ls "$CERT_DIR"/localhost.pem 2>/dev/null || ls "$CERT_DIR"/*+*.pem | head -1)
+KEY_FILE=$(ls "$CERT_DIR"/localhost-key.pem 2>/dev/null || ls "$CERT_DIR"/*-key.pem | head -1)
+
+if [ -z "$CERT_FILE" ] || [ -z "$KEY_FILE" ]; then
+    echo -e "${RED}❌ Certificats introuvables${NC}"
+    exit 1
+fi
+
+# Mettre à jour .env avec chemins absolus
+cat > "$SERVER_ENV" << EOF
+# PTT Live Server - Configuration
+# Généré automatiquement par setup-certificates.sh
+
+# LiveKit Local
+USE_LOCAL_LIVEKIT=true
+LIVEKIT_API_KEY=devkey
+LIVEKIT_API_SECRET=secret
+LIVEKIT_URL=AUTO
+
+# Serveur
+PORT=3000
+ENABLE_HTTPS=true
+
+# Certificats SSL (chemins absolus)
+SSL_CERT=$CERT_FILE
+SSL_KEY=$KEY_FILE
+
+# Réseau
+NETWORK_IP=$NETWORK_IP
+EOF
+
+echo -e "${GREEN}✅ .env serveur mis à jour${NC}"
+echo ""
+
+# ========== Configuration Client ==========
+
+echo "⚙️  Configuration client..."
+echo ""
+
+CLIENT_ENV="$(pwd)/../client/.env"
+
+cat > "$CLIENT_ENV" << EOF
+# PTT Live Client - Configuration
+# Généré automatiquement par setup-certificates.sh
+
+VITE_SERVER_URL=https://$NETWORK_IP:3000
+EOF
+
+echo -e "${GREEN}✅ .env client créé${NC}"
+echo ""
+
+# ========== Mettre à jour Vite Config ==========
+
+echo "⚙️  Configuration Vite HTTPS..."
+echo ""
+
+VITE_CONFIG="$(pwd)/../client/vite.config.js"
+
+cat > "$VITE_CONFIG" << EOF
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
+import fs from 'fs';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
+      manifest: {
+        name: 'PTT Live',
+        short_name: 'PTT Live',
+        description: 'Professional WebRTC Intercom',
+        theme_color: '#1a1a1a',
+        icons: [
+          {
+            src: 'pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      }
+    })
+  ],
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+    https: {
+      key: fs.readFileSync(path.resolve(__dirname, '../certs/$KEY_FILE')),
+      cert: fs.readFileSync(path.resolve(__dirname, '../certs/$CERT_FILE'))
+    }
+  }
+});
+EOF
+
+echo -e "${GREEN}✅ vite.config.js mis à jour avec HTTPS${NC}"
+echo ""
+
+# ========== Mettre à jour serveur index.js ==========
+
+echo "⚙️  Configuration serveur Express HTTPS..."
+echo ""
+
+# Le serveur lira SSL_CERT et SSL_KEY depuis .env
+# Pas besoin de modifier index.js si déjà compatible
+
+echo -e "${GREEN}✅ Configuration terminée${NC}"
+echo ""
+
+# ========== Récapitulatif ==========
+
+echo ""
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo -e "${GREEN}✅ CONFIGURATION CERTIFICATS TERMINÉE${NC}"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo ""
+echo "📜 Certificats générés :"
+echo "   $CERT_DIR"
+echo ""
+echo "🌐 URLs d'accès :"
+echo ""
+echo "   Serveur :  https://$NETWORK_IP:3000"
+echo "   Client :   https://$NETWORK_IP:5173"
+echo ""
+echo "🔐 Les certificats sont automatiquement approuvés par :"
+echo "   - Chrome/Edge/Safari"
+echo "   - Firefox (si nss installé)"
+echo "   - Système d'exploitation"
+echo ""
+echo "📱 Scan QR Code au démarrage pour connexion rapide"
+echo ""
+echo "🚀 Démarrer le système :"
+echo ""
+echo "   ./start.sh --dev"
+echo "   # OU"
+echo "   ./start-desktop.sh"
+echo ""
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo ""
+echo "💡 Pour smartphones iOS/Android :"
+echo ""
+echo "   1. Scanner le QR Code affiché au démarrage"
+echo "   2. Accepter le certificat (une seule fois)"
+echo "   3. Installer la PWA sur l'écran d'accueil"
+echo ""
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo ""

show-qr.sh

@@ -0,0 +1,56 @@
+#!/bin/bash
+
+# PTT Live - Affichage QR Code
+# Génère et affiche le QR code pour connexion smartphone
+
+set -e
+
+# Couleurs
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+NC='\033[0m'
+
+# Détection IP réseau
+get_network_ip() {
+  if [[ "$OSTYPE" == "darwin"* ]]; then
+    # macOS
+    ifconfig | grep "inet " | grep -v 127.0.0.1 | awk '{print $2}' | head -n 1
+  elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+    # Linux
+    hostname -I | awk '{print $1}'
+  else
+    echo "localhost"
+  fi
+}
+
+NETWORK_IP=$(get_network_ip)
+
+# Déterminer l'URL selon mode dev ou prod
+if [ -d "client/dist" ] && [ "$1" != "--dev" ]; then
+  # Mode production (HTTPS)
+  URL="https://${NETWORK_IP}:3000"
+  MODE="production"
+else
+  # Mode dev (HTTPS)
+  URL="https://${NETWORK_IP}:5173"
+  MODE="dev"
+fi
+
+echo ""
+echo -e "${BLUE}=================================="
+echo "📱 QR Code PTT Live ($MODE)"
+echo "==================================${NC}"
+echo ""
+
+# Générer le QR code avec le package installé dans server/
+(cd server && node -e "
+const qrcode = require('qrcode-terminal');
+qrcode.generate('$URL', { small: true });
+")
+
+echo ""
+echo -e "${GREEN}🔗 URL : $URL${NC}"
+echo ""
+echo "📱 Scannez ce QR code depuis votre smartphone"
+echo "   pour vous connecter instantanément"
+echo ""

start-desktop.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+# PTT Live - Lancement application desktop
+
+echo "🖥️  Démarrage PTT Live Desktop..."
+echo ""
+
+cd electron
+npm start

start.sh

@@ -0,0 +1,204 @@
+#!/bin/bash
+
+# PTT Live - Script de démarrage unifié
+# Lance le serveur et le client en mode production
+
+set -e
+
+# Couleurs
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+RED='\033[0;31m'
+BLUE='\033[0;34m'
+NC='\033[0m'
+
+# Détection IP réseau
+get_network_ip() {
+  if [[ "$OSTYPE" == "darwin"* ]]; then
+    # macOS
+    ifconfig | grep "inet " | grep -v 127.0.0.1 | awk '{print $2}' | head -n 1
+  elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+    # Linux
+    hostname -I | awk '{print $1}'
+  else
+    echo "localhost"
+  fi
+}
+
+NETWORK_IP=$(get_network_ip)
+
+echo -e "${BLUE}=================================="
+echo "🚀 PTT Live - Démarrage"
+echo "==================================${NC}"
+echo ""
+
+echo -e "${GREEN}📡 IP réseau détectée : ${NETWORK_IP}${NC}"
+echo ""
+
+# Vérifier que les dépendances sont installées
+if [ ! -d "server/node_modules" ]; then
+  echo -e "${RED}❌ Dépendances serveur manquantes${NC}"
+  echo "   Exécutez d'abord : ./install/macos.sh (ou linux.sh)"
+  exit 1
+fi
+
+if [ ! -d "client/node_modules" ]; then
+  echo -e "${RED}❌ Dépendances client manquantes${NC}"
+  echo "   Exécutez d'abord : ./install/macos.sh (ou linux.sh)"
+  exit 1
+fi
+
+# Créer fichier PID pour cleanup
+PID_FILE="/tmp/ptt-live.pid"
+
+# Fonction cleanup
+cleanup() {
+  echo ""
+  echo -e "${YELLOW}⏹  Arrêt PTT Live...${NC}"
+
+  if [ -f "$PID_FILE" ]; then
+    while read -r pid; do
+      if ps -p "$pid" > /dev/null 2>&1; then
+        kill "$pid" 2>/dev/null || true
+      fi
+    done < "$PID_FILE"
+    rm -f "$PID_FILE"
+  fi
+
+  echo -e "${GREEN}✓ Arrêté${NC}"
+  exit 0
+}
+
+trap cleanup SIGINT SIGTERM EXIT
+
+# Afficher le QR code AVANT de lancer le serveur
+if [ "$1" == "--dev" ]; then
+  ./show-qr.sh --dev
+else
+  ./show-qr.sh
+fi
+
+# Démarrer le serveur (silencieux, logs dans fichier)
+echo -e "${BLUE}🔧 Démarrage serveur...${NC}"
+echo ""
+
+cd server
+
+# En mode production (pas --dev), activer HTTPS
+if [ "$1" != "--dev" ]; then
+  export ENABLE_HTTPS=true
+fi
+
+# Lancer le serveur en background silencieux
+npm start > ../server.log 2>&1 &
+SERVER_PID=$!
+echo "$SERVER_PID" > "$PID_FILE"
+cd ..
+
+
+
+
+
+
+
+
+
+
+# Attendre que le serveur soit prêt
+echo ""
+echo -e "${YELLOW}⏳ Attente démarrage serveur...${NC}"
+
+# Déterminer le protocole selon le mode
+if [ "$1" != "--dev" ]; then
+  HEALTH_URL="https://localhost:3000/health"
+else
+  HEALTH_URL="http://localhost:3000/health"
+fi
+
+for i in {1..30}; do
+  if curl -kssf "$HEALTH_URL" > /dev/null 2>&1; then
+    echo -e "${GREEN}✓ Serveur prêt${NC}"
+    break
+  fi
+
+  if [ $i -eq 30 ]; then
+    echo -e "${RED}❌ Timeout : le serveur n'a pas démarré${NC}"
+    echo "   Consultez server.log pour plus de détails"
+    exit 1
+  fi
+
+  sleep 1
+done
+
+echo ""
+
+# Build client si pas déjà fait ou mode dev
+if [ "$1" == "--dev" ]; then
+  echo -e "${BLUE}🎨 Démarrage client (dev)...${NC}"
+  cd client
+  npm run dev &
+  CLIENT_PID=$!
+  echo "$CLIENT_PID" >> "$PID_FILE"
+  cd ..
+
+  echo -e "${GREEN}✓ Client dev démarré${NC}"
+  echo ""
+  echo -e "${GREEN}=================================="
+  echo "✅ PTT Live démarré (mode dev)"
+  echo "==================================${NC}"
+  echo ""
+  echo -e "${BLUE}🌐 ACCÈS CLIENT (HTTPS) :${NC}"
+  echo -e "${GREEN}   👉 Local   : https://localhost:5173${NC}"
+  echo -e "${GREEN}   👉 Réseau  : https://${NETWORK_IP}:5173${NC}"
+  echo ""
+  echo -e "${YELLOW}⚠️  Acceptez le certificat auto-signé dans votre navigateur${NC}"
+  echo -e "${YELLOW}   (Cliquez sur 'Avancé' puis 'Continuer')${NC}"
+  echo ""
+  echo "📊 API serveur (HTTP uniquement) : http://localhost:3000"
+  echo "🎛️  Interface admin : https://localhost:5173/admin"
+  echo ""
+  echo "📝 Logs serveur : tail -f server.log"
+  echo ""
+  echo -e "${YELLOW}Appuyez sur Ctrl+C pour arrêter${NC}"
+  echo ""
+
+  # Attendre indéfiniment
+  wait
+
+else
+  # Mode production : build et serve
+  echo -e "${BLUE}🎨 Build client production...${NC}"
+  cd client
+
+  if [ ! -d "dist" ] || [ "$1" == "--rebuild" ]; then
+    npm run build
+    echo -e "${GREEN}✓ Client buildé${NC}"
+  else
+    echo -e "${YELLOW}⚠️  Build existant utilisé (--rebuild pour forcer)${NC}"
+  fi
+
+  cd ..
+
+  echo ""
+  echo -e "${GREEN}=================================="
+  echo "✅ PTT Live démarré (production)"
+  echo "==================================${NC}"
+  echo ""
+  echo -e "${BLUE}🌐 ACCÈS CLIENT (HTTPS) :${NC}"
+  echo -e "${GREEN}   👉 Local   : https://localhost:3000${NC}"
+  echo -e "${GREEN}   👉 Réseau  : https://${NETWORK_IP}:3000${NC}"
+  echo ""
+  echo -e "${YELLOW}⚠️  Acceptez le certificat auto-signé dans votre navigateur${NC}"
+  echo -e "${YELLOW}   (Cliquez sur 'Avancé' puis 'Continuer')${NC}"
+  echo ""
+  echo "🎛️  Interface admin : https://localhost:3000/admin"
+  echo "📊 API serveur : https://localhost:3000/api"
+  echo ""
+  echo "📝 Logs serveur : tail -f server.log"
+  echo ""
+  echo -e "${YELLOW}Appuyez sur Ctrl+C pour arrêter${NC}"
+  echo ""
+
+  # Attendre indéfiniment
+  wait
+fi