@luckydraw/cumulus 0.28.7 → 0.28.9

package/dist/gateway/static/widget.js

@@ -859,6 +859,32 @@
     '.cumulus-topbar-title { font-weight: 600; font-size: 15px; color: #e0e0e0; }',
     '.cumulus-topbar-right { display: flex; align-items: center; gap: 10px; }',
 
+    /* ── Update banner ── */
+    '.cumulus-update-banner {',
+    '  display: flex; align-items: center; justify-content: space-between;',
+    '  padding: 8px 14px; gap: 12px;',
+    '  background: linear-gradient(90deg, #1a3a5c, #1a2a4a);',
+    '  border-bottom: 1px solid #2a5a8a;',
+    '  color: #8ab4f8; font-size: 13px;',
+    '  flex-shrink: 0;',
+    '}',
+    '.cumulus-update-banner-text { flex: 1; }',
+    '.cumulus-update-banner-btn {',
+    '  padding: 4px 14px; border-radius: 4px; border: none;',
+    '  background: #2a6acf; color: #fff; font-size: 12px; font-weight: 600;',
+    '  cursor: pointer;',
+    '}',
+    '.cumulus-update-banner-btn:hover { background: #3a7ae0; }',
+    '.cumulus-update-banner-dismiss {',
+    '  background: none; border: none; color: #6a8ab0; cursor: pointer;',
+    '  font-size: 16px; padding: 0 4px; line-height: 1;',
+    '}',
+    '.cumulus-update-banner-dismiss:hover { color: #8ab4f8; }',
+    '.cumulus-update-banner-progress {',
+    '  height: 3px; background: #2a6acf; border-radius: 2px;',
+    '  transition: width 0.3s;',
+    '}',
+
     /* ── Panel header action buttons ── */
     '.cumulus-panel-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 8px; }',
     '.cumulus-panel-action-btn {',
@@ -1189,6 +1215,101 @@
     '  .cumulus-standalone-empty-hint { display: none; }',
 
     '}',
+
+    /* ── Voice Mode ── */
+    '.cumulus-voice-overlay {',
+    '  position: absolute; top: 0; left: 0; right: 0; bottom: 0;',
+    '  z-index: 500;',
+    '  display: flex; flex-direction: column;',
+    '  align-items: center; justify-content: center;',
+    '  transition: background 0.4s ease;',
+    '  user-select: none;',
+    '}',
+    '.cumulus-voice-overlay.listening { background: #0a1a2e; }',
+    '.cumulus-voice-overlay.processing { background: #0a2e1a; }',
+    '.cumulus-voice-overlay.speaking { background: #1e1e1e; }',
+    '.cumulus-voice-overlay.idle { background: #1a1a1a; }',
+
+    '.cumulus-voice-indicator {',
+    '  width: 120px; height: 120px;',
+    '  border-radius: 50%;',
+    '  display: flex; align-items: center; justify-content: center;',
+    '  transition: all 0.3s ease;',
+    '  margin-bottom: 24px;',
+    '}',
+    '.cumulus-voice-overlay.listening .cumulus-voice-indicator {',
+    '  background: rgba(0, 102, 204, 0.2);',
+    '  border: 2px solid #0066cc;',
+    '  animation: cumulus-voice-pulse 1.5s ease-in-out infinite;',
+    '}',
+    '.cumulus-voice-overlay.processing .cumulus-voice-indicator {',
+    '  background: rgba(34, 197, 94, 0.15);',
+    '  border: 2px solid #22c55e;',
+    '  animation: cumulus-voice-spin 1s linear infinite;',
+    '}',
+    '.cumulus-voice-overlay.speaking .cumulus-voice-indicator {',
+    '  background: rgba(255, 255, 255, 0.08);',
+    '  border: 2px solid #888;',
+    '}',
+    '.cumulus-voice-overlay.idle .cumulus-voice-indicator {',
+    '  background: rgba(255, 255, 255, 0.05);',
+    '  border: 2px solid #555;',
+    '}',
+
+    '@keyframes cumulus-voice-pulse {',
+    '  0%, 100% { transform: scale(1); opacity: 1; }',
+    '  50% { transform: scale(1.08); opacity: 0.7; }',
+    '}',
+    '@keyframes cumulus-voice-spin {',
+    '  from { transform: rotate(0deg); }',
+    '  to { transform: rotate(360deg); }',
+    '}',
+
+    '.cumulus-voice-indicator-icon {',
+    '  font-size: 36px; color: #e0e0e0;',
+    '}',
+    '.cumulus-voice-overlay.listening .cumulus-voice-indicator-icon::after { content: "\\1F3A4"; }',
+    '.cumulus-voice-overlay.processing .cumulus-voice-indicator-icon::after { content: "\\2699"; }',
+    '.cumulus-voice-overlay.speaking .cumulus-voice-indicator-icon::after { content: "\\1F50A"; }',
+    '.cumulus-voice-overlay.idle .cumulus-voice-indicator-icon::after { content: "\\23F8"; }',
+
+    '.cumulus-voice-label {',
+    '  font-size: 16px; color: #aaa;',
+    '  margin-bottom: 32px;',
+    '  min-height: 24px;',
+    '}',
+
+    '.cumulus-voice-transcript {',
+    '  font-size: 18px; color: #e0e0e0;',
+    '  max-width: 80%; text-align: center;',
+    '  min-height: 28px;',
+    '  margin-bottom: 24px;',
+    '  font-style: italic;',
+    '}',
+
+    '.cumulus-voice-stop-btn {',
+    '  background: rgba(239, 68, 68, 0.15);',
+    '  border: 1px solid #ef4444;',
+    '  border-radius: 2em;',
+    '  color: #ef4444;',
+    '  font-size: 16px;',
+    '  padding: 12px 32px;',
+    '  cursor: pointer;',
+    '  transition: background 0.2s;',
+    '}',
+    '.cumulus-voice-stop-btn:hover { background: rgba(239, 68, 68, 0.25); }',
+
+    '.cumulus-mic-btn {',
+    '  width: 2.7em; height: 2.7em; flex-shrink: 0;',
+    '  background: #3d3d3d; border: 1px solid #4a4a4a;',
+    '  border-radius: 0.55em; color: #aaa;',
+    '  font-size: 14px; line-height: 1; cursor: pointer;',
+    '  display: flex; align-items: center; justify-content: center;',
+    '  padding: 0;',
+    '  transition: border-color 0.2s, color 0.2s;',
+    '}',
+    '.cumulus-mic-btn:hover { border-color: #0066cc; color: #ddd; }',
+    '.cumulus-mic-btn.active { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.15); }',
   ].join('\n');
 
   // ─── HTML Escaping ───────────────────────────────────────────────────────────
@@ -2246,6 +2367,7 @@
     var apiKey = opts.apiKey;
     var sessionId = opts.sessionId;
     var onMessage = opts.onMessage;
+    var onBinary = opts.onBinary || null;
     var onStatus = opts.onStatus;
     var skipHistory = opts.skipHistory || false;
 
@@ -2262,6 +2384,7 @@
       onStatus('connecting');
       currentStatus = 'connecting';
       ws = new WebSocket(wsUrl);
+      ws.binaryType = 'arraybuffer';
 
       ws.onopen = function () {
         if (destroyed) {
@@ -2286,6 +2409,11 @@
           currentStatus = 'connected';
           onStatus('connected');
         }
+        // Binary frames = voice audio PCM
+        if (event.data instanceof ArrayBuffer) {
+          if (onBinary) onBinary(event.data);
+          return;
+        }
         try {
           var data = JSON.parse(event.data);
           onMessage(data);
@@ -3478,6 +3606,124 @@
       // Periodic refresh every 30s
       if (refreshTimer) clearInterval(refreshTimer);
       refreshTimer = setInterval(requestThreadList, 30000);
+      // Check for updates
+      checkForUpdateBanner();
+    }
+
+    // ── Update banner ──
+    var updateBannerEl = null;
+
+    function checkForUpdateBanner() {
+      // Fetch version info from the gateway
+      var xhr = new XMLHttpRequest();
+      xhr.open('GET', '/api/version');
+      xhr.onload = function () {
+        if (xhr.status !== 200) return;
+        try {
+          var info = JSON.parse(xhr.responseText);
+          if (!info.updateAvailable) return;
+          // Check if user dismissed this version in this session
+          var dismissed = sessionStorage.getItem('cumulus-update-dismissed');
+          if (dismissed === info.latest) return;
+          showUpdateBanner(info);
+        } catch (e) {
+          // Ignore parse errors
+        }
+      };
+      xhr.send();
+    }
+
+    function showUpdateBanner(info) {
+      // Remove existing banner if any
+      if (updateBannerEl && updateBannerEl.parentNode) {
+        updateBannerEl.parentNode.removeChild(updateBannerEl);
+      }
+
+      updateBannerEl = document.createElement('div');
+      updateBannerEl.className = 'cumulus-update-banner';
+      updateBannerEl.setAttribute('data-testid', 'webchat-update-banner');
+
+      var textSpan = document.createElement('span');
+      textSpan.className = 'cumulus-update-banner-text';
+      textSpan.textContent = 'Update available: v' + info.current + ' \u2192 v' + info.latest;
+
+      var updateBtn = document.createElement('button');
+      updateBtn.className = 'cumulus-update-banner-btn';
+      updateBtn.setAttribute('data-testid', 'webchat-update-btn');
+      updateBtn.textContent = 'Update';
+      updateBtn.onclick = function () {
+        performUpdateFromBanner(info);
+      };
+
+      var dismissBtn = document.createElement('button');
+      dismissBtn.className = 'cumulus-update-banner-dismiss';
+      dismissBtn.setAttribute('data-testid', 'webchat-update-dismiss');
+      dismissBtn.textContent = '\u00d7';
+      dismissBtn.onclick = function () {
+        sessionStorage.setItem('cumulus-update-dismissed', info.latest);
+        if (updateBannerEl && updateBannerEl.parentNode) {
+          updateBannerEl.parentNode.removeChild(updateBannerEl);
+        }
+        updateBannerEl = null;
+      };
+
+      updateBannerEl.appendChild(textSpan);
+      updateBannerEl.appendChild(updateBtn);
+      updateBannerEl.appendChild(dismissBtn);
+
+      // Insert at the top of appLayout (before topbar)
+      appLayout.insertBefore(updateBannerEl, appLayout.firstChild);
+    }
+
+    function performUpdateFromBanner(info) {
+      if (!updateBannerEl) return;
+      // Replace banner content with progress
+      updateBannerEl.innerHTML = '';
+      var textSpan = document.createElement('span');
+      textSpan.className = 'cumulus-update-banner-text';
+      textSpan.textContent = 'Updating to v' + info.latest + '...';
+      var progressBar = document.createElement('div');
+      progressBar.style.cssText =
+        'flex:1; max-width:200px; height:3px; background:#1a2a4a; border-radius:2px; overflow:hidden;';
+      var progressFill = document.createElement('div');
+      progressFill.className = 'cumulus-update-banner-progress';
+      progressFill.style.width = '30%';
+      progressBar.appendChild(progressFill);
+      updateBannerEl.appendChild(textSpan);
+      updateBannerEl.appendChild(progressBar);
+
+      // POST /api/admin/update
+      var xhr = new XMLHttpRequest();
+      xhr.open('POST', '/api/admin/update');
+      xhr.setRequestHeader('Content-Type', 'application/json');
+      xhr.setRequestHeader('X-API-Key', activeApiKey);
+      xhr.onload = function () {
+        progressFill.style.width = '100%';
+        if (xhr.status === 200) {
+          textSpan.textContent =
+            '\u2713 Updated to v' + info.latest + ' \u2014 Restarting gateway...';
+          updateBannerEl.style.background = 'linear-gradient(90deg, #1a3a2a, #1a2a1a)';
+          updateBannerEl.style.borderBottomColor = '#2a8a5a';
+          textSpan.style.color = '#8af8b4';
+          // Auto-dismiss after 5s (gateway will restart and WS will reconnect)
+          setTimeout(function () {
+            if (updateBannerEl && updateBannerEl.parentNode) {
+              updateBannerEl.parentNode.removeChild(updateBannerEl);
+            }
+            updateBannerEl = null;
+          }, 5000);
+        } else {
+          textSpan.textContent = '\u2717 Update failed. Check gateway logs.';
+          updateBannerEl.style.background = 'linear-gradient(90deg, #3a1a1a, #2a1a1a)';
+          textSpan.style.color = '#f88a8a';
+        }
+      };
+      xhr.onerror = function () {
+        textSpan.textContent = '\u2717 Update failed: connection error.';
+        updateBannerEl.style.background = 'linear-gradient(90deg, #3a1a1a, #2a1a1a)';
+        textSpan.style.color = '#f88a8a';
+      };
+      xhr.send(JSON.stringify({ version: info.latest }));
     }
 
     // ── Thread list ──
@@ -3812,6 +4058,416 @@
     }
 
     // ── Thread panel builder ──
+    // ── Voice Mode ────────────────────────────────────────────────────────────
+    var SpeechRecognitionApi = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+    function createVoiceMode(panel, threadName, sendFn) {
+      var state = {
+        active: false,
+        phase: 'idle',
+        recognition: null,
+        synth: window.speechSynthesis,
+        speaking: false,
+        wakeLock: null,
+        watchdog: null,
+        transcript: '',
+        // Server-side TTS (Piper)
+        serverTTS: false,
+        serverSampleRate: 22050,
+        audioCtx: null,
+        audioQueue: [], // queue of Float32Array PCM chunks
+        audioPlaying: false, // currently playing audio
+        audioDone: false, // server signaled all audio sent
+      };
+
+      // ── Overlay DOM ──
+      var overlay = document.createElement('div');
+      overlay.className = 'cumulus-voice-overlay idle';
+      overlay.style.display = 'none';
+
+      var indicator = document.createElement('div');
+      indicator.className = 'cumulus-voice-indicator';
+      var indicatorIcon = document.createElement('span');
+      indicatorIcon.className = 'cumulus-voice-indicator-icon';
+      indicator.appendChild(indicatorIcon);
+      overlay.appendChild(indicator);
+
+      var transcriptEl = document.createElement('div');
+      transcriptEl.className = 'cumulus-voice-transcript';
+      overlay.appendChild(transcriptEl);
+
+      var label = document.createElement('div');
+      label.className = 'cumulus-voice-label';
+      overlay.appendChild(label);
+
+      var stopBtn = document.createElement('button');
+      stopBtn.className = 'cumulus-voice-stop-btn';
+      stopBtn.setAttribute('data-testid', 'webchat-voice-stop');
+      stopBtn.textContent = 'Exit Voice Mode';
+      stopBtn.addEventListener('click', function () {
+        deactivate();
+      });
+      overlay.appendChild(stopBtn);
+
+      panel.appendChild(overlay);
+
+      function setPhase(p) {
+        state.phase = p;
+        overlay.className = 'cumulus-voice-overlay ' + p;
+        if (p === 'listening') label.textContent = 'Listening\u2026';
+        else if (p === 'processing') label.textContent = 'Thinking\u2026';
+        else if (p === 'speaking') label.textContent = '';
+        else label.textContent = 'Tap mic to speak';
+      }
+
+      // ── Wake Lock ──
+      function requestWakeLock() {
+        if (navigator.wakeLock) {
+          navigator.wakeLock
+            .request('screen')
+            .then(function (lock) {
+              state.wakeLock = lock;
+            })
+            .catch(function () {});
+        }
+      }
+      function releaseWakeLock() {
+        if (state.wakeLock) {
+          state.wakeLock.release().catch(function () {});
+          state.wakeLock = null;
+        }
+      }
+
+      // ── Speech Recognition ──
+      function startRecognition() {
+        if (!SpeechRecognitionApi) {
+          label.textContent = 'Speech recognition not supported in this browser';
+          return;
+        }
+        if (state.recognition) {
+          try {
+            state.recognition.abort();
+          } catch (e) {}
+        }
+
+        var rec = new SpeechRecognitionApi();
+        rec.continuous = false;
+        rec.interimResults = true;
+        rec.lang = 'en-US';
+        state.recognition = rec;
+        state.transcript = '';
+        transcriptEl.textContent = '';
+
+        rec.onresult = function (event) {
+          var interim = '';
+          var final_ = '';
+          for (var i = event.resultIndex; i < event.results.length; i++) {
+            var t = event.results[i][0].transcript;
+            if (event.results[i].isFinal) {
+              final_ += t;
+            } else {
+              interim += t;
+            }
+          }
+          if (final_) {
+            state.transcript += final_;
+            transcriptEl.textContent = state.transcript;
+          } else {
+            transcriptEl.textContent = state.transcript + interim;
+          }
+
+          // Barge-in: if user speaks while TTS is playing, stop it
+          if (state.speaking) {
+            stopSpeaking();
+          }
+        };
+
+        rec.onend = function () {
+          clearWatchdog();
+          if (!state.active) return;
+
+          // If we got a transcript, send it
+          if (state.transcript.trim()) {
+            var msg = state.transcript.trim();
+            transcriptEl.textContent = msg;
+            setPhase('processing');
+            sendFn(msg);
+          } else {
+            // No speech detected — restart listening
+            setPhase('idle');
+            setTimeout(function () {
+              if (state.active) startRecognition();
+            }, 300);
+          }
+        };
+
+        rec.onerror = function (event) {
+          clearWatchdog();
+          if (event.error === 'no-speech' || event.error === 'aborted') {
+            // Normal — just restart
+            if (state.active) {
+              setPhase('idle');
+              setTimeout(function () {
+                if (state.active) startRecognition();
+              }, 500);
+            }
+          } else {
+            label.textContent = 'Mic error: ' + event.error;
+            setTimeout(function () {
+              if (state.active) startRecognition();
+            }, 1000);
+          }
+        };
+
+        setPhase('listening');
+        rec.start();
+
+        // Watchdog: SpeechRecognition dies after ~60s on iOS
+        startWatchdog();
+      }
+
+      function startWatchdog() {
+        clearWatchdog();
+        state.watchdog = setTimeout(function () {
+          if (state.active && state.phase === 'listening') {
+            try {
+              state.recognition.abort();
+            } catch (e) {}
+            startRecognition();
+          }
+        }, 55000); // restart before 60s iOS limit
+      }
+
+      function clearWatchdog() {
+        if (state.watchdog) {
+          clearTimeout(state.watchdog);
+          state.watchdog = null;
+        }
+      }
+
+      // ── Speech Synthesis (Phase 1 — browser TTS) ──
+      function speak(text) {
+        if (!state.synth || !state.active) return;
+
+        // Strip markdown and blex fences
+        var clean = text
+          .replace(/~~~blex:[\s\S]*?~~~/g, '')
+          .replace(/```[\s\S]*?```/g, '')
+          .replace(/[*_~`#]/g, '')
+          .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+          .replace(/https?:\/\/\S+/g, '')
+          .trim();
+
+        if (!clean) {
+          onSpeakDone();
+          return;
+        }
+
+        state.speaking = true;
+        setPhase('speaking');
+
+        var utterance = new SpeechSynthesisUtterance(clean);
+        utterance.rate = 1.0;
+        utterance.pitch = 1.0;
+
+        // Try to pick a decent voice
+        var voices = state.synth.getVoices();
+        var preferred =
+          voices.find(function (v) {
+            return v.name.indexOf('Samantha') >= 0;
+          }) ||
+          voices.find(function (v) {
+            return v.lang.startsWith('en') && v.localService;
+          }) ||
+          voices[0];
+        if (preferred) utterance.voice = preferred;
+
+        utterance.onend = function () {
+          onSpeakDone();
+        };
+        utterance.onerror = function () {
+          onSpeakDone();
+        };
+
+        state.synth.speak(utterance);
+      }
+
+      function stopSpeaking() {
+        if (state.serverTTS) {
+          stopServerAudio();
+        }
+        if (state.synth) state.synth.cancel();
+        state.speaking = false;
+      }
+
+      function onSpeakDone() {
+        state.speaking = false;
+        if (state.active) {
+          setPhase('idle');
+          setTimeout(function () {
+            if (state.active) startRecognition();
+          }, 300);
+        }
+      }
+
+      // ── Server-side TTS (Web Audio API playback) ──
+      function ensureAudioCtx() {
+        if (!state.audioCtx) {
+          state.audioCtx = new (window.AudioContext || window.webkitAudioContext)({
+            sampleRate: state.serverSampleRate,
+          });
+        }
+        // Resume if suspended (iOS requires user gesture)
+        if (state.audioCtx.state === 'suspended') {
+          state.audioCtx.resume();
+        }
+        return state.audioCtx;
+      }
+
+      function queuePCMAudio(arrayBuffer) {
+        if (!state.active || state.phase === 'listening') return;
+
+        // Strip 4-byte "VPCM" header
+        var pcmData = new Int16Array(arrayBuffer, 4);
+        // Convert Int16 to Float32 for Web Audio API
+        var float32 = new Float32Array(pcmData.length);
+        for (var i = 0; i < pcmData.length; i++) {
+          float32[i] = pcmData[i] / 32768.0;
+        }
+        state.audioQueue.push(float32);
+
+        if (!state.audioPlaying) {
+          state.speaking = true;
+          setPhase('speaking');
+          playNextChunk();
+        }
+      }
+
+      function playNextChunk() {
+        if (!state.active || state.audioQueue.length === 0) {
+          state.audioPlaying = false;
+          if (state.audioDone || state.audioQueue.length === 0) {
+            onServerSpeakDone();
+          }
+          return;
+        }
+
+        state.audioPlaying = true;
+        var ctx = ensureAudioCtx();
+        var samples = state.audioQueue.shift();
+        var buffer = ctx.createBuffer(1, samples.length, state.serverSampleRate);
+        buffer.getChannelData(0).set(samples);
+
+        var source = ctx.createBufferSource();
+        source.buffer = buffer;
+        source.connect(ctx.destination);
+        source.onended = function () {
+          playNextChunk();
+        };
+        source.start();
+        state._currentSource = source;
+      }
+
+      function stopServerAudio() {
+        state.audioQueue.length = 0;
+        state.audioPlaying = false;
+        state.audioDone = false;
+        if (state._currentSource) {
+          try {
+            state._currentSource.stop();
+          } catch (e) {}
+          state._currentSource = null;
+        }
+      }
+
+      function onServerSpeakDone() {
+        state.speaking = false;
+        state.audioDone = false;
+        if (state.active) {
+          setPhase('idle');
+          setTimeout(function () {
+            if (state.active) startRecognition();
+          }, 300);
+        }
+      }
+
+      // ── Public API ──
+      function activate() {
+        if (!SpeechRecognitionApi) {
+          alert('Speech recognition is not supported in this browser.');
+          return;
+        }
+        state.active = true;
+        overlay.style.display = 'flex';
+        requestWakeLock();
+
+        // Unlock audio on iOS (requires user gesture)
+        if (state.synth) {
+          var unlockUtterance = new SpeechSynthesisUtterance('');
+          unlockUtterance.volume = 0;
+          state.synth.speak(unlockUtterance);
+        }
+
+        setPhase('idle');
+        startRecognition();
+      }
+
+      function deactivate() {
+        state.active = false;
+        overlay.style.display = 'none';
+        stopSpeaking();
+        clearWatchdog();
+        releaseWakeLock();
+        if (state.recognition) {
+          try {
+            state.recognition.abort();
+          } catch (e) {}
+          state.recognition = null;
+        }
+        // Reset server TTS state
+        state.serverTTS = false;
+        if (state.audioCtx) {
+          state.audioCtx.close().catch(function () {});
+          state.audioCtx = null;
+        }
+        setPhase('idle');
+      }
+
+      // Called by the message handler when assistant response arrives
+      function onAssistantMessage(content) {
+        if (!state.active) return;
+        // Don't speak system or agent messages
+        if (typeof content === 'string' && content.startsWith('[System]')) return;
+        // If server TTS (Piper) is active, audio comes via binary WebSocket frames — skip browser TTS
+        if (state.serverTTS) return;
+        speak(content);
+      }
+
+      return {
+        activate: activate,
+        deactivate: deactivate,
+        onAssistantMessage: onAssistantMessage,
+        isActive: function () {
+          return state.active;
+        },
+        // Server TTS methods
+        setServerTTS: function (sampleRate) {
+          state.serverTTS = true;
+          state.serverSampleRate = sampleRate || 22050;
+          state.audioDone = false;
+        },
+        queuePCMAudio: queuePCMAudio,
+        onVoiceAudioDone: function () {
+          state.audioDone = true;
+          // If not currently playing, trigger done immediately
+          if (!state.audioPlaying && state.audioQueue.length === 0) {
+            onServerSpeakDone();
+          }
+        },
+        overlay: overlay,
+      };
+    }
+
     function buildThreadPanel(threadName) {
       var state = getThreadState(threadName);
 
@@ -4078,9 +4734,49 @@
       inputRow.appendChild(attachBtn);
       inputRow.appendChild(inputEl);
       inputRow.appendChild(sendBtn);
+
+      // Mic button for voice mode
+      var micBtn = document.createElement('button');
+      micBtn.className = 'cumulus-mic-btn';
+      micBtn.setAttribute('data-testid', 'webchat-mic-btn');
+      micBtn.setAttribute('title', 'Voice mode');
+      micBtn.innerHTML =
+        '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>';
+      if (!SpeechRecognitionApi) micBtn.style.display = 'none';
+      inputRow.appendChild(micBtn);
+
       inputArea.appendChild(inputRow);
       panel.appendChild(inputArea);
 
+      // ── Voice mode setup ──
+      var voiceMode = createVoiceMode(panel, threadName, function (spokenText) {
+        // Send the spoken text with voiceMode flag — server injects voice prompt into system prompt
+        if (!connection) return;
+        state.messages.push({ role: 'user', content: spokenText });
+        state.streaming = true;
+        state.streamBuffer = '';
+        renderPanelMessages();
+        connection.send({
+          type: 'message',
+          threadName: threadName,
+          message: spokenText,
+          voiceMode: true,
+        });
+      });
+
+      // Store voice mode on thread state so the message handler can trigger TTS
+      state._voiceMode = voiceMode;
+
+      micBtn.addEventListener('click', function () {
+        if (voiceMode.isActive()) {
+          voiceMode.deactivate();
+          micBtn.classList.remove('active');
+        } else {
+          voiceMode.activate();
+          micBtn.classList.add('active');
+        }
+      });
+
       // ── Panel-local render functions ──
       function scrollToBottom() {
         requestAnimationFrame(function () {
@@ -5212,6 +5908,26 @@
           // Reserved for future verbose display
           break;
 
+        case 'voice_info':
+          // Server has Piper TTS available — switch to server-side audio
+          if (data.threadName) {
+            var state = getThreadState(data.threadName);
+            if (state._voiceMode && state._voiceMode.isActive()) {
+              state._voiceMode.setServerTTS(data.sampleRate);
+            }
+          }
+          break;
+
+        case 'voice_audio_done':
+          // Server finished sending all audio for this response
+          if (data.threadName) {
+            var state = getThreadState(data.threadName);
+            if (state._voiceMode && state._voiceMode.isActive()) {
+              state._voiceMode.onVoiceAudioDone();
+            }
+          }
+          break;
+
         case 'done':
           if (data.threadName) {
             clearStreamingTimeout(data.threadName);
@@ -5228,13 +5944,18 @@
               break;
             }
             state.streaming = false;
+            var responseContent = data.response || state.streamBuffer;
             state.messages.push({
               role: 'assistant',
-              content: data.response || state.streamBuffer,
+              content: responseContent,
             });
             state.streamBuffer = '';
             updateThreadActivity(data.threadName);
             refreshThreadPanel(data.threadName);
+            // Voice mode: speak the assistant response
+            if (state._voiceMode && state._voiceMode.isActive()) {
+              state._voiceMode.onAssistantMessage(responseContent);
+            }
           }
           break;
 
@@ -5461,6 +6182,17 @@
         apiKey: activeApiKey,
         sessionId: sessionId,
         onMessage: handleServerMessage,
+        onBinary: function (arrayBuffer) {
+          // Route binary PCM audio to the active voice mode session
+          // Find which thread has active voice mode
+          for (var tn in threadStates) {
+            var ts = threadStates[tn];
+            if (ts._voiceMode && ts._voiceMode.isActive()) {
+              ts._voiceMode.queuePCMAudio(arrayBuffer);
+              break;
+            }
+          }
+        },
         onStatus: updateStatus,
         skipHistory: true, // standalone manages history per-thread
       });