feat(logs): Add real-time server logs page with dedicated WebSocket

New features:
- Dedicated WebSocket endpoint /ws/logs for optimized log streaming
- LogsPage with level/component filters and real-time search
- Thread-safe circular buffer (1000 entries)
- Intelligent auto-scroll with pause on manual interaction
- Export logs to .log file

Technical:
- Separation of concerns: /ws for game, /ws/logs for logging
- LOG_HISTORY (initial snapshot) + LOG_ENTRY (real-time) messages
- Dedicated hook useLogsWebSocket() for logs connection
- Fixed layout with sticky toolbar and scrollable log list

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: CCoupel

CHANGELOG.md

@@ -3,6 +3,66 @@
 Historique des versions du projet BuzzControl.
 
 
+## [2.43.0] - 2026-01-26
+
+### Ajouts
+- **[Logs]**: WebSocket dédiée `/ws/logs` pour une gestion optimisée des logs
+  - **Séparation des WebSockets** : `/ws` pour le jeu, `/ws/logs` pour les logs
+  - **Connexion directe** : LogsPage se connecte à `/ws/logs` au lieu de `/ws`
+  - **Messages dédiés** : LOG_HISTORY (historique à la connexion), LOG_ENTRY (temps réel)
+  - **Pas de conflit** : Les logs ne transitent plus par la WebSocket de jeu
+
+### Modifié
+- **[LogsPage]**: Utilise `connectToLogs()` au lieu de `connect()`
+  - Hook personnalisé pour gérer la WebSocket `/ws/logs`
+  - Subscription/unsubscription automatique
+
+### Corrigé
+- **[LogsPage]**: Layout avec position fixed et scroll interne
+  - Page fixe sans scroll global (`.logs-page { position: fixed }`)
+  - Toolbar sticky en haut (`.logs-toolbar { position: sticky, z-index: 10 }`)
+  - Liste des logs scrollable (`.logs-list { flex: 1, overflow-y: auto }`)
+
+### Technique
+- `websocket.go` : Nouvelle fonction `ServeLogsWS()` pour `/ws/logs`
+- `main.go` : Handler `/ws/logs`, `ConnectToLogs()`, `DisconnectFromLogs()`
+- `LogsPage.jsx` : Hook `useLogsWebSocket()` avec connexion dédiée
+- `LogsPage.css` : Structure flexbox avec position fixed
+- `useWebSocket.js` : Suppression handlers LOG_HISTORY et LOG_ENTRY (déplacés vers useLogsWebSocket)
+
+---
+
+## [2.42.0] - 2026-01-26
+
+### Ajouts
+- **[Logs]**: Page de visualisation des logs serveur en temps reel
+  - **Route `/admin/logs` et `/anim/logs`** : Nouvelle page d'administration
+  - **LogBuffer** : Buffer circulaire thread-safe (capacite 1000 logs)
+  - **BroadcastLogger** : Logger avec diffusion temps reel via WebSocket
+  - **Filtres de niveau** : DEBUG (gris), INFO (blanc), WARN (orange), ERROR (rouge)
+  - **Filtres de composant** : App, Engine, HTTP, WebSocket, TCP, UDP
+  - **Recherche temps reel** : Debounce 300ms avec highlight des termes
+  - **Auto-scroll intelligent** : Pause automatique au scroll manuel, reprise en bas
+  - **Indicateur nouveaux logs** : Badge flottant cliquable pour descendre
+  - **Export** : Telechargement des logs filtres au format `.log`
+
+### Technique
+- `models.go` : Structs `LogLevel`, `LogComponent`, `LogEntry`
+- `logbuffer.go` : `LogBuffer` avec `Add()`, `GetAll()`, `GetRecent()`
+- `logger.go` : `BroadcastLogger` avec `Debug()`, `Info()`, `Warn()`, `Error()`
+- `websocket.go` : `SubscribeToLogs()`, `UnsubscribeFromLogs()`, `BroadcastToLogSubscribers()`
+- `messages.go` : Actions `SUBSCRIBE_LOGS`, `UNSUBSCRIBE_LOGS`, `LOG_HISTORY`, `LOG_ENTRY`
+- `main.go` : Handlers et integration du logger
+- `LogsPage.jsx` : Page principale avec toolbar et liste de logs
+- `LogEntry.jsx` : Composant d'affichage d'une ligne de log
+- `useWebSocket.js` : Handlers `LOG_HISTORY`, `LOG_ENTRY`, fonctions `subscribeLogs`, `unsubscribeLogs`
+- `Navbar.jsx` : Lien "Logs" dans la section Config
+
+### Tests
+- `logbuffer_test.go` : Tests unitaires pour LogBuffer (Add, Circular, Concurrency, GetRecent)
+
+---
+
 ## [2.41.0] - 2026-01-25
 
 ### Ajouts

CLAUDE.md

@@ -773,6 +773,35 @@ Page d'historique des événements de jeu :
 - **Badge catégorie** : Icône colorée par groupe dans l'historique (v2.23.0)
 - **Fichiers** : `HistoryPage.jsx`, `HistoryPage.css`, `engine.go:AddGameEvent()`
 
+#### Logs Page (v2.42.0)
+Page de visualisation des logs serveur en temps reel :
+- **Route** : `/admin/logs` et `/anim/logs`
+- **Fonctionnalites** :
+  - Affichage temps reel des logs via WebSocket dediee
+  - Filtrage par niveau : DEBUG (gris), INFO (blanc), WARN (orange), ERROR (rouge)
+  - Filtrage par composant : App, Engine, HTTP, WebSocket, TCP, UDP
+  - Recherche avec debounce 300ms et highlight des termes
+  - Auto-scroll intelligent (pause au scroll manuel, reprise en bas)
+  - Export des logs filtres au format `.log`
+- **Backend** :
+  - `LogBuffer` : Buffer circulaire thread-safe (1000 logs max)
+  - `BroadcastLogger` : Logger avec diffusion temps reel
+  - **WebSocket dediee** : `/ws/logs` (separee de `/ws` pour le jeu)
+- **Architecture WebSocket Logs** (v2.43.0) :
+  - **Endpoint** : `/ws/logs` (WebSocket dediee, independante de `/ws`)
+  - **Connexion** : Le client se connecte → recoit automatiquement `LOG_HISTORY`
+  - **Temps reel** : Chaque nouveau log est envoye via `LOG_ENTRY`
+  - **Deconnexion** : Fermer la WebSocket = desabonnement (pas d'action explicite)
+  - **Avantages** : Pas de gestion d'abonnement, isolation du trafic logs/jeu
+- **Messages WebSocket** :
+  | Message | Direction | Description |
+  |---------|-----------|-------------|
+  | `LOG_HISTORY` | Server->Client | Historique complet a la connexion |
+  | `LOG_ENTRY` | Server->Client | Nouveau log temps reel |
+- **Fichiers** :
+  - Backend : `logbuffer.go`, `logger.go`, `logswebsocket.go` (nouveau)
+  - Frontend : `LogsPage.jsx`, `LogsPage.css`, `LogEntry.jsx`, `LogEntry.css`
+
 #### CategoryBalance Component (v2.23.0)
 Visualisation de l'équilibre des catégories sur la page Questions :
 - **Location** : `components/CategoryBalance.jsx` + `components/CategoryBalance.css`

backlog/README.md

@@ -18,7 +18,7 @@ Chaque fichier correspond à une fonctionnalité ou un ensemble de fonctionnalit
 | [memory-game.md](memory-game.md) | ✅ v2.33.0 | Jeu de mémoire avec paires |
 | [mode-demo.md](mode-demo.md) | ✅ v2.40.0 | Mode démonstration avec données complètes |
 | [page-joueur.md](page-joueur.md) | ✅ v2.41.0 | Interface personnalisée pour jouer depuis smartphone |
-| [page-logs.md](page-logs.md) | 📋 Planifié | Affichage des logs serveur en temps réel |
+| [page-logs.md](page-logs.md) | ✅ v2.42.0 | Affichage des logs serveur en temps réel |
 | [tri-rapidite-reponse.md](tri-rapidite-reponse.md) | 📋 Planifié | Tri équipes/joueurs par rapidité de buzz |
 | [generateur-ia.md](generateur-ia.md) | 📋 Planifié | Générateur de jeu complet via IA |
 
@@ -66,6 +66,7 @@ vX.Y.Z
 
 ## Historique
 
+- 2026-01-26 : Completion page logs (v2.42.0)
 - 2026-01-25 : Ajout tri équipes/joueurs par rapidité de buzz (📋 Planifié, priorité haute)
 - 2026-01-25 : Ajout marqueurs indices QCM sur barre de temps (📋 Planifié)
 - 2026-01-25 : Ajout de la page logs (📋 Planifié)

backlog/page-logs.md

@@ -1,19 +1,19 @@
 # Page Logs (/logs)
 
-**Statut** : 📋 Planifié
+**Statut** : Implemente v2.42.0
 
 ## Description
 
 Une page `/logs` dans l'interface admin pour afficher les logs du serveur en temps réel. Cette page permet à l'animateur et aux administrateurs de surveiller l'activité du serveur, diagnostiquer les problèmes et comprendre le flux des événements.
 
 ## Objectifs
 
-- [ ] Afficher les logs du serveur Go en temps réel via WebSocket
-- [ ] Filtrer les logs par niveau (DEBUG, INFO, WARN, ERROR)
-- [ ] Filtrer les logs par composant (Engine, HTTP, WebSocket, TCP)
-- [ ] Permettre la recherche dans les logs
-- [ ] Auto-scroll avec pause au survol
-- [ ] Export des logs visibles
+- [x] Afficher les logs du serveur Go en temps réel via WebSocket
+- [x] Filtrer les logs par niveau (DEBUG, INFO, WARN, ERROR)
+- [x] Filtrer les logs par composant (Engine, HTTP, WebSocket, TCP, UDP, App)
+- [x] Permettre la recherche dans les logs
+- [x] Auto-scroll avec pause au survol
+- [x] Export des logs visibles
 
 ## Architecture
 
@@ -59,60 +59,61 @@ Page admin avec affichage des logs en temps réel.
 
 ### Phase 1 - Backend (v2.42.0)
 
-- [ ] **LogBuffer** : Buffer circulaire pour stocker les derniers 1000 logs
+- [x] **LogBuffer** : Buffer circulaire pour stocker les derniers 1000 logs
   - Struct `LogEntry` : Timestamp, Level, Component, Message
   - Thread-safe avec mutex
   - Méthode `GetRecent(n int)` pour récupérer les n derniers logs
 
-- [ ] **LogBroadcaster** : Broadcast des logs vers les clients WebSocket
+- [x] **LogBroadcaster** : Broadcast des logs vers les clients WebSocket
   - Canal Go pour recevoir les nouveaux logs
   - Action WebSocket `LOG_ENTRY` pour envoyer un log
   - Action WebSocket `LOG_HISTORY` pour envoyer l'historique initial
 
-- [ ] **Intégration CustomLogger** : Connecter le logger existant au buffer
+- [x] **Intégration CustomLogger** : Connecter le logger existant au buffer
   - Hook pour capturer chaque log
   - Parsing du niveau et du composant
 
-- [ ] **Action WebSocket SUBSCRIBE_LOGS** : Client demande à recevoir les logs
-  - Envoie l'historique récent (100 derniers)
+- [x] **Action WebSocket SUBSCRIBE_LOGS** : Client demande à recevoir les logs
+  - Envoie l'historique récent (tous les logs du buffer)
   - Ajoute le client à la liste des abonnés
 
-- [ ] **Action WebSocket UNSUBSCRIBE_LOGS** : Client arrête de recevoir les logs
+- [x] **Action WebSocket UNSUBSCRIBE_LOGS** : Client arrête de recevoir les logs
   - Retire le client de la liste des abonnés
 
 ### Phase 2 - Frontend (v2.42.0)
 
-- [ ] **LogsPage.jsx** : Page principale d'affichage des logs
+- [x] **LogsPage.jsx** : Page principale d'affichage des logs
   - Route `/admin/logs` et `/anim/logs`
   - Connexion WebSocket pour recevoir les logs
-  - État local pour stocker les logs reçus (max 5000)
+  - État local pour stocker les logs reçus
 
-- [ ] **Composant LogEntry** : Affichage d'une ligne de log
+- [x] **Composant LogEntry** : Affichage d'une ligne de log
   - Couleur selon le niveau (DEBUG=gris, INFO=blanc, WARN=orange, ERROR=rouge)
   - Badge coloré pour le composant
   - Timestamp formaté (HH:MM:SS.mmm)
   - Message avec highlight de la recherche
 
-- [ ] **Filtres de niveau** : Boutons toggle pour chaque niveau
+- [x] **Filtres de niveau** : Boutons toggle pour chaque niveau
   - DEBUG, INFO, WARN, ERROR
   - Filtrage côté client (tous les logs reçus, filtrés à l'affichage)
 
-- [ ] **Filtre de composant** : Dropdown pour filtrer par composant
-  - Options : Tous, Engine, HTTP, WebSocket, TCP, UDP
-  - Extraction automatique des composants depuis les logs
+- [x] **Filtre de composant** : Boutons toggle pour filtrer par composant
+  - Options : App, Engine, HTTP, WebSocket, TCP, UDP
+  - Sélection multiple
 
-- [ ] **Recherche** : Input de recherche temps réel
+- [x] **Recherche** : Input de recherche temps réel
   - Filtre sur le message du log
   - Highlight des termes trouvés
   - Debounce 300ms
 
-- [ ] **Auto-scroll** : Scroll automatique vers le bas
-  - Checkbox pour activer/désactiver
+- [x] **Auto-scroll** : Scroll automatique vers le bas
+  - Bouton pour activer/désactiver
   - Pause automatique si l'utilisateur scroll manuellement
   - Reprise si scroll en bas
+  - Indicateur visuel pour nouveaux logs
 
-- [ ] **Export** : Bouton pour exporter les logs visibles
-  - Format texte avec timestamp
+- [x] **Export** : Bouton pour exporter les logs visibles
+  - Format texte avec timestamp ISO
   - Téléchargement fichier `.log`
 
 ### Phase 3 - Améliorations (v2.43.0)