@luckydraw/cumulus 0.28.8 → 0.29.1

package/dist/gateway/static/widget.js

@@ -381,15 +381,13 @@
     '}',
     '.code-block-edit-btn:hover { border-color: #0066cc; color: #ddd; }',
     '.texitool-embed-container {',
-    '  border: 1px solid #3a3a3a;',
-    '  border-radius: 0.4em;',
     '  overflow: hidden;',
     '  margin: 0.6em 0;',
-    '  background: #1e1e1e;',
     '}',
     '.texitool-embed-container iframe {',
     '  width: 100%; border: none;',
     '  min-height: 400px;',
+    '  max-height: calc(100vh - 200px);',
     '  display: block;',
     '}',
     '.texitool-embed-actions {',
@@ -857,6 +855,7 @@
     '  flex-shrink: 0;',
     '}',
     '.cumulus-topbar-title { font-weight: 600; font-size: 15px; color: #e0e0e0; }',
+    '.cumulus-topbar-version { font-weight: 400; font-size: 11px; color: #777; margin-left: 4px; }',
     '.cumulus-topbar-right { display: flex; align-items: center; gap: 10px; }',
 
     /* ── Update banner ── */
@@ -1215,6 +1214,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 ───────────────────────────────────────────────────────────
@@ -1857,12 +1951,18 @@
     // Inline code (backtick)
     html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
 
-    // Links
+    // Links (markdown syntax)
     html = html.replace(
       /\[([^\]]+)\]\(([^)]+)\)/g,
       '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
     );
 
+    // Auto-link bare URLs (not already inside an <a> tag)
+    html = html.replace(
+      /(?<!href="|">)(https?:\/\/[^\s<)\]]+)/g,
+      '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>'
+    );
+
     // Phase 6: Convert remaining newlines to <br> (skip block-level elements)
     // Wrap sequences of plain text lines in <p> tags
     html = renderParagraphs(html);
@@ -1921,20 +2021,44 @@
   }
 
   // Texitool embed URL — change this if self-hosting
-  var TEXITOOL_EMBED_URL = 'https://texi.soapko.com';
+  var TEXITOOL_EMBED_URL = 'https://app.texitool.com';
 
   function openTexitoolEditor(wrapper) {
     var codeEl = wrapper.querySelector('code');
     if (!codeEl) return;
     var rawText = codeEl.textContent || '';
 
+    // Measure the code block height before replacing it
+    var codeBlockHeight = wrapper.getBoundingClientRect().height;
+    var iframeHeight = Math.max(codeBlockHeight, 400);
+
+    // Calculate rows/cols from content for Texitool canvas sizing
+    var contentLines = rawText.split('\n');
+    var rows = contentLines.length;
+    var cols = 0;
+    for (var li = 0; li < contentLines.length; li++) {
+      if (contentLines[li].length > cols) cols = contentLines[li].length;
+    }
+
     // Build iframe container
     var container = document.createElement('div');
     container.className = 'texitool-embed-container';
 
     var iframe = document.createElement('iframe');
-    var encodedContent = btoa(unescape(encodeURIComponent(rawText)));
-    iframe.src = TEXITOOL_EMBED_URL + '?embed=true&content=' + encodedContent;
+    var encodedContent = btoa(
+      encodeURIComponent(rawText).replace(/%([0-9A-F]{2})/g, function (_, p1) {
+        return String.fromCharCode(parseInt(p1, 16));
+      })
+    );
+    iframe.src =
+      TEXITOOL_EMBED_URL +
+      '?embed=true&rows=' +
+      (rows + 10) +
+      '&cols=' +
+      (cols + 10) +
+      '&content=' +
+      encodeURIComponent(encodedContent);
+    iframe.style.height = iframeHeight + 'px';
     iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
     iframe.setAttribute('data-testid', 'texitool-embed');
     container.appendChild(iframe);
@@ -1969,6 +2093,8 @@
 
     function finishEdit(newContent) {
       window.removeEventListener('message', onMessage);
+      // Trim trailing blank lines
+      newContent = newContent.replace(/\n+$/, '');
       // Rebuild the code block with updated content
       var newWrapper = document.createElement('div');
       newWrapper.innerHTML = buildCodeBlock(
@@ -2272,6 +2398,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;
 
@@ -2288,6 +2415,7 @@
       onStatus('connecting');
       currentStatus = 'connecting';
       ws = new WebSocket(wsUrl);
+      ws.binaryType = 'arraybuffer';
 
       ws.onopen = function () {
         if (destroyed) {
@@ -2312,6 +2440,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);
@@ -2690,6 +2823,9 @@
             })(msg.id);
             row.appendChild(cb);
           }
+          // Suppress thinking-role entries
+          if (msg.role === 'thinking') continue;
+
           if (msg.role === 'user' && isSystemMessage(msg.content)) {
             row.appendChild(buildSystemMsgEl(msg.content));
           } else if (msg.role === 'user') {
@@ -3348,7 +3484,7 @@
     topbar.className = 'cumulus-topbar';
     topbar.innerHTML =
       '<button class="cumulus-sidebar-toggle" data-testid="webchat-sidebar-toggle" aria-label="Toggle sidebar">&#9776;</button>' +
-      '<span class="cumulus-topbar-title">Cumulus</span>' +
+      '<span class="cumulus-topbar-title">Cumulus <span class="cumulus-topbar-version" data-testid="webchat-version"></span></span>' +
       '<div class="cumulus-topbar-right">' +
       '<span class="cumulus-header-status">' +
       '<span class="cumulus-status-dot" data-testid="webchat-status-dot-app"></span>' +
@@ -3956,6 +4092,557 @@
     }
 
     // ── Thread panel builder ──
+    // ── Voice Mode ────────────────────────────────────────────────────────────
+    var SpeechRecognitionApi = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+    // ── Safari Detection ──
+    function isSafari() {
+      var ua = navigator.userAgent;
+      var isIOS = /iP(ad|od|hone)/i.test(ua);
+      var isSafariBrowser = /Safari/i.test(ua) && !/Chrome/i.test(ua) && !/CriOS/i.test(ua);
+      return isIOS || isSafariBrowser;
+    }
+
+    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
+        // Voice loading state for Safari compatibility
+        voicesLoaded: false,
+        speakQueue: [],
+        voiceLoadTimer: null,
+        // Safari: prefer server TTS over browser TTS
+        isSafariClient: isSafari(),
+        waitingForServerTTS: false, // Safari waiting for voice_info
+        voicesLoaded: false,
+        speakQueue: [],
+        voiceLoadTimer: null,
+      };
+
+      // ── 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;
+        }
+      }
+
+      // ── Voice Loading (Safari fix) ──
+      function initVoices() {
+        // Safari: skip browser TTS init — prefer server TTS
+        if (state.isSafariClient) {
+          console.log('[Voice] Safari detected — skipping browser TTS, waiting for server TTS');
+          state.waitingForServerTTS = true;
+          state.voicesLoaded = true; // Mark as "ready" but don't use browser TTS
+          return;
+        }
+
+        if (!state.synth) return;
+
+        // Check if voices already loaded
+        var voices = state.synth.getVoices();
+        if (voices.length > 0) {
+          state.voicesLoaded = true;
+          console.log('[Voice] Voices loaded:', voices.length);
+          processSpeakQueue();
+          return;
+        }
+
+        console.log('[Voice] Waiting for voices to load...');
+
+        // Listen for voiceschanged event
+        state.synth.onvoiceschanged = function () {
+          state.voicesLoaded = true;
+          var loadedVoices = state.synth.getVoices();
+          console.log('[Voice] Voices loaded:', loadedVoices.length);
+          if (state.voiceLoadTimer) {
+            clearTimeout(state.voiceLoadTimer);
+            state.voiceLoadTimer = null;
+          }
+          processSpeakQueue();
+        };
+
+        // Fallback timeout: proceed after 3 seconds even if no voices
+        state.voiceLoadTimer = setTimeout(function () {
+          if (!state.voicesLoaded) {
+            console.log('[Voice] Voice loading timeout, proceeding anyway');
+            state.voicesLoaded = true;
+            processSpeakQueue();
+          }
+        }, 3000);
+      }
+
+      function processSpeakQueue() {
+        if (state.speakQueue.length === 0) return;
+        console.log('[Voice] Processing speak queue:', state.speakQueue.length, 'items');
+        while (state.speakQueue.length > 0) {
+          var text = state.speakQueue.shift();
+          speakNow(text);
+        }
+      }
+
+      // ── Speech Synthesis (Phase 1 — browser TTS) ──
+      function speak(text) {
+        if (!state.active) return;
+
+        // Safari: skip browser TTS entirely, wait for server TTS
+        if (state.isSafariClient) {
+          if (!state.serverTTS) {
+            console.log('[Voice] Safari — skipping browser TTS, waiting for server TTS (Piper)');
+            return;
+          }
+          // Server TTS will handle this via binary frames
+          return;
+        }
+
+        if (!state.synth) 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;
+        }
+
+        // Queue if voices not loaded yet
+        if (!state.voicesLoaded) {
+          console.log('[Voice] Voices not loaded, queueing speak()');
+          state.speakQueue.push(clean);
+          return;
+        }
+
+        speakNow(clean);
+      }
+
+      function speakNow(text) {
+        console.log('[Voice] TTS started');
+        state.speaking = true;
+        setPhase('speaking');
+
+        var utterance = new SpeechSynthesisUtterance(text);
+        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;
+          console.log('[Voice] Using voice:', preferred.name);
+        } else {
+          console.log('[Voice] No preferred voice, using default');
+        }
+
+        utterance.onend = function () {
+          console.log('[Voice] TTS ended');
+          onSpeakDone();
+        };
+        utterance.onerror = function (e) {
+          console.log('[Voice] TTS error:', e.error);
+          onSpeakDone();
+        };
+
+        try {
+          state.synth.speak(utterance);
+        } catch (e) {
+          console.log('[Voice] speechSynthesis.speak() failed:', e);
+          onSpeakDone();
+        }
+      }
+
+      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();
+
+        console.log('[Voice] Activating...');
+        console.log('[Voice] Safari detected:', state.isSafariClient);
+
+        // Initialize voice loading for Safari compatibility
+        initVoices();
+
+        // Unlock Web Audio context on iOS (required for server TTS playback)
+        ensureAudioCtx();
+
+        // For non-Safari: unlock browser TTS with silent utterance (requires user gesture)
+        if (!state.isSafariClient && state.synth) {
+          try {
+            var unlockUtterance = new SpeechSynthesisUtterance('');
+            unlockUtterance.volume = 0;
+            state.synth.speak(unlockUtterance);
+            console.log('[Voice] Sent silent utterance for browser TTS unlock');
+          } catch (e) {
+            console.log('[Voice] Silent unlock failed (not critical):', e);
+          }
+        }
+
+        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;
+        }
+        // Clear voice loading state
+        if (state.voiceLoadTimer) {
+          clearTimeout(state.voiceLoadTimer);
+          state.voiceLoadTimer = null;
+        }
+        state.speakQueue.length = 0;
+        state.voicesLoaded = false;
+        state.waitingForServerTTS = false;
+        console.log('[Voice] Deactivated');
+        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) {
+          console.log('[Voice] Using server TTS (Piper)');
+          return;
+        }
+        // Safari without server TTS: no TTS available (browser TTS unreliable)
+        if (state.isSafariClient) {
+          console.log('[Voice] Safari — no server TTS available, skipping TTS');
+          return;
+        }
+        speak(content);
+      }
+
+      return {
+        activate: activate,
+        deactivate: deactivate,
+        onAssistantMessage: onAssistantMessage,
+        isActive: function () {
+          return state.active;
+        },
+        // Server TTS methods
+        setServerTTS: function (sampleRate) {
+          console.log('[Voice] Using server TTS (Piper)');
+          state.serverTTS = true;
+          state.serverSampleRate = sampleRate || 22050;
+          state.audioDone = false;
+          state.waitingForServerTTS = 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);
 
@@ -4222,9 +4909,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 () {
@@ -4354,6 +5081,9 @@
             })(msg.id);
             row.appendChild(cb);
           }
+          // Suppress thinking-role entries
+          if (msg.role === 'thinking') continue;
+
           if (msg.role === 'user' && isSystemMessage(msg.content)) {
             row.appendChild(buildSystemMsgEl(msg.content));
           } else if (msg.role === 'user') {
@@ -5174,6 +5904,16 @@
           });
           showAppView();
           registerPushNotifications();
+          // Fetch and display version in topbar
+          fetch(window.location.protocol + '//' + window.location.host + '/api/version')
+            .then(function (r) {
+              return r.json();
+            })
+            .then(function (v) {
+              var vEl = document.querySelector('[data-testid="webchat-version"]');
+              if (vEl && v.current) vEl.textContent = 'v' + v.current;
+            })
+            .catch(function () {});
           break;
 
         case 'auth_error':
@@ -5356,6 +6096,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);
@@ -5372,13 +6132,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;
 
@@ -5605,6 +6370,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
       });