feat: indicateur visuel de volume micro en temps réel et boîte de diagnostic des erreurs JS

app/static/app.js

@@ -1,5 +1,30 @@
 const $ = (id) => document.getElementById(id);
 
+// Capturer et afficher les erreurs JavaScript non gérées à l'écran
+window.onerror = function (message, source, lineno, colno, error) {
+  const errText = `Erreur JS : ${message} (Ligne ${lineno}:${colno} dans ${source ? source.split('/').pop() : 'inconnu'})`;
+  console.error(errText, error);
+  showVisualError(errText);
+};
+
+window.onunhandledrejection = function (event) {
+  const errText = `Erreur de Promesse : ${event.reason}`;
+  console.error(errText);
+  showVisualError(errText);
+};
+
+function showVisualError(text) {
+  let box = $('visual-error-box');
+  if (!box) {
+    box = document.createElement('div');
+    box.id = 'visual-error-box';
+    box.style.cssText = 'background: #4c1113; color: #ff8589; padding: 14px; margin: 10px; border: 2px solid #e5484d; border-radius: 8px; font-family: monospace; font-size: 0.85rem; white-space: pre-wrap; z-index: 10000; position: relative;';
+    const parent = $('transcript-panel') || document.body;
+    parent.insertBefore(box, parent.firstChild);
+  }
+  box.textContent = text;
+}
+
 // Vérification du contexte sécurisé (requis pour le micro et les périphériques)
 if (window.isSecureContext === false) {
   const warning = document.createElement('div');
@@ -185,12 +210,29 @@ function stopRecording(abrupt = false) {
   }
   if ($('title')) $('title').disabled = false;
   
+  const bar = $('volume-bar');
+  if (bar) bar.style.width = '0%';
+  
   // Toujours recharger les réunions pour synchroniser la liste (cas d'arrêt abrupt ou échec)
   loadMeetings();
 }
 
+function updateVolumeIndicator(samples) {
+  let sum = 0;
+  for (let i = 0; i < samples.length; i++) {
+    sum += samples[i] * samples[i];
+  }
+  const rms = Math.sqrt(sum / samples.length);
+  // Normaliser rms (amplitude max ~32768) vers un pourcentage (0 - 100)
+  // On applique un facteur de boost pour la visibilité des voix normales (divisé par 2500)
+  const percentage = Math.min(100, Math.round((rms / 2500) * 100));
+  const bar = $('volume-bar');
+  if (bar) bar.style.width = percentage + '%';
+}
+
 function queuePcm(samples) {
   if (!state.recording || !state.ws || state.ws.readyState !== WebSocket.OPEN) return;
+  updateVolumeIndicator(samples);
   state.sendBuffer.push(samples);
   state.sendBufferSamples += samples.length;
   if (state.sendBufferSamples >= BATCH_SAMPLES) flushPcm();

app/static/index.html

@@ -27,6 +27,9 @@
         </select>
         <button id="record-btn" class="record">● Démarrer</button>
         <span id="timer">00:00</span>
+        <div id="volume-container" class="volume-container" title="Volume du micro">
+          <div id="volume-bar" class="volume-bar"></div>
+        </div>
         <label id="diarization-toggle" class="toggle" title="Identifier les locuteurs">
           <input type="checkbox" id="diarization-cb">
           <span>👥 Locuteurs</span>

app/static/style.css

@@ -187,6 +187,28 @@ button.record.recording { background: var(--rec); }
   color: var(--text);
 }
 
+/* Indicateur de volume micro */
+.volume-container {
+  width: 60px;
+  height: 8px;
+  background: var(--panel-2);
+  border: 1px solid #2c3245;
+  border-radius: 4px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  padding: 1px;
+}
+.volume-bar {
+  width: 0%;
+  height: 100%;
+  background: #30a46c; /* Vert */
+  border-radius: 2px;
+  transition: width 0.1s ease;
+}
+
+
+
 @media (max-width: 720px) {
   .layout { flex-direction: column; }
   aside { width: 100%; max-height: 30vh; border-right: none; border-bottom: 1px solid #262b3a; }

task.md

@@ -20,6 +20,8 @@ Vérification de la cohérence de tous les fichiers (backend et frontend) et tes
 - [x] Vérification de la cohérence de tous les fichiers et validation
 - [x] Correction de tout bug ou problème détecté
 - [x] Rendre configurable le nombre maximal de locuteurs (DIARIZATION_MAX_SPEAKERS, défaut 8) dans main.py, .env.example et docker-compose.yml
+- [x] Créer l'afficheur de volume micro en temps réel (visualiseur audio) dans index.html, style.css et app.js
+- [x] Mettre en place la capture et l'affichage des erreurs JS non gérées à l'écran pour faciliter le diagnostic
 
 
 ## Progress Log
@@ -33,5 +35,7 @@ Vérification de la cohérence de tous les fichiers (backend et frontend) et tes
 - Ajout de la variable d'environnement DIARIZATION_MAX_SPEAKERS (défaut 8) et intégration dans l'instanciation de SpeakerDiarizer.
 - Résolution des problèmes de synchronisation de la liste des réunions (rechargement systématique dans stopRecording), détection des contextes non sécurisés (affichage d'un bandeau d'erreur si HTTP) et gestion des erreurs de connexion WebSocket.
 - Sécurisation globale de startRecording() et stopRecording() (bloc try/catch global, nettoyage complet et guards pour éléments null) et changement de contrainte de micro de 'exact' à 'ideal' pour éviter de bloquer la captation.
+- Création d'un indicateur visuel de volume micro en temps réel calculé par RMS.
+- Intégration d'un système de capture d'erreurs JavaScript globales affichées à l'écran pour le diagnostic.