agentgui 1.0.264 → 1.0.266

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.264",
+  "version": "1.0.266",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",

package/server.js

@@ -2418,11 +2418,15 @@ const server = http.createServer(async (req, res) => {
                     sendJSON(req, res, 400, { error: 'No audio data' });
           return;
         }
+        broadcastSync({ type: 'stt_progress', status: 'transcribing', percentComplete: 0 });
         const { transcribe } = await getSpeech();
         const text = await transcribe(audioBuffer);
-                sendJSON(req, res, 200, { text: (text || '').trim() });
+        const finalText = (text || '').trim();
+        broadcastSync({ type: 'stt_progress', status: 'completed', percentComplete: 100, transcript: finalText });
+                sendJSON(req, res, 200, { text: finalText });
       } catch (err) {
         debugLog('[STT] Error: ' + err.message);
+        broadcastSync({ type: 'stt_progress', status: 'failed', percentComplete: 0, error: err.message });
         if (!res.headersSent) sendJSON(req, res, 500, { error: err.message || 'STT failed' });
       }
       return;
@@ -3303,7 +3307,7 @@ const BROADCAST_TYPES = new Set([
   'conversations_updated', 'conversation_deleted', 'queue_status', 'queue_updated',
   'rate_limit_hit', 'rate_limit_clear',
   'script_started', 'script_stopped', 'script_output',
-  'model_download_progress'
+  'model_download_progress', 'stt_progress', 'tts_setup_progress', 'voice_list'
 ]);
 
 const wsBatchQueues = new Map();
@@ -3600,8 +3604,24 @@ function onServerReady() {
   ensureModelsDownloaded().then(ok => {
     if (ok) console.log('[MODELS] Speech models ready');
     else console.log('[MODELS] Speech model download failed');
+    try {
+      const { getVoices } = require('./lib/speech.js');
+      const voices = getVoices();
+      broadcastSync({ type: 'voice_list', voices });
+    } catch (err) {
+      debugLog('[VOICE] Failed to broadcast voices: ' + err.message);
+      broadcastSync({ type: 'voice_list', voices: [] });
+    }
   }).catch(err => {
     console.error('[MODELS] Download error:', err.message);
+    try {
+      const { getVoices } = require('./lib/speech.js');
+      const voices = getVoices();
+      broadcastSync({ type: 'voice_list', voices });
+    } catch (err2) {
+      debugLog('[VOICE] Failed to broadcast voices: ' + err2.message);
+      broadcastSync({ type: 'voice_list', voices: [] });
+    }
   });
 
   getSpeech().then(s => s.preloadTTS()).catch(e => debugLog('[TTS] Preload failed: ' + e.message));

package/static/js/client.js

@@ -496,6 +496,12 @@ class AgentGUIClient {
         case 'model_download_progress':
           this._handleModelDownloadProgress(data.progress || data);
           break;
+        case 'stt_progress':
+          this._handleSTTProgress(data);
+          break;
+        case 'tts_setup_progress':
+          this._handleTTSSetupProgress(data);
+          break;
         default:
           break;
       }
@@ -2100,6 +2106,29 @@ class AgentGUIClient {
     }
   }
 
+  _handleSTTProgress(data) {
+    const el = document.getElementById('voiceTranscript');
+    if (!el) return;
+
+    if (data.status === 'transcribing') {
+      el.textContent = 'Transcribing...';
+      el.classList.add('transcribing');
+    } else if (data.status === 'completed') {
+      el.textContent = data.transcript || '';
+      el.setAttribute('data-final', data.transcript || '');
+      el.classList.remove('transcribing');
+    } else if (data.status === 'failed') {
+      el.textContent = 'Transcription failed: ' + (data.error || 'unknown error');
+      el.classList.remove('transcribing');
+    }
+  }
+
+  _handleTTSSetupProgress(data) {
+    if (data.step && data.status) {
+      console.log('[TTS Setup]', data.step, ':', data.status, data.message || '');
+    }
+  }
+
   _updateVoiceTabState() {
     var voiceBtn = document.querySelector('[data-view="voice"]');
     if (voiceBtn) {

package/static/js/tts-websocket-handler.js

@@ -0,0 +1,152 @@
+(function() {
+  class TTSWebSocketHandler {
+    constructor(wsManager) {
+      this.wsManager = wsManager;
+      this.streamBuffers = new Map();
+      this.playbackBuffers = new Map();
+      this.sequenceTrackers = new Map();
+      this.MIN_BUFFER_CHUNKS = 2;
+      this.JITTER_BUFFER_SIZE = 10;
+      this.chunkTimeoutMs = 5000;
+      this.chunkTimers = new Map();
+    }
+
+    initStream(streamId) {
+      if (!this.streamBuffers.has(streamId)) {
+        this.streamBuffers.set(streamId, []);
+        this.playbackBuffers.set(streamId, []);
+        this.sequenceTrackers.set(streamId, {
+          lastSeq: -1,
+          missing: [],
+          outOfOrder: 0,
+          complete: false
+        });
+      }
+    }
+
+    receiveChunk(streamId, chunk, seq, isLast) {
+      this.initStream(streamId);
+      const tracker = this.sequenceTrackers.get(streamId);
+      const buffer = this.streamBuffers.get(streamId);
+
+      clearTimeout(this.chunkTimers.get(`${streamId}:${seq}`));
+
+      if (seq <= tracker.lastSeq) {
+        tracker.outOfOrder++;
+        return false;
+      }
+
+      if (seq > tracker.lastSeq + 1) {
+        for (let i = tracker.lastSeq + 1; i < seq; i++) {
+          tracker.missing.push(i);
+        }
+      }
+
+      tracker.lastSeq = seq;
+      buffer.push({ chunk, seq, isLast, receivedAt: Date.now() });
+
+      if (buffer.length > this.JITTER_BUFFER_SIZE) {
+        buffer.shift();
+      }
+
+      if (isLast) {
+        this.markStreamComplete(streamId);
+      }
+
+      this.setChunkTimeout(streamId, seq);
+      return true;
+    }
+
+    setChunkTimeout(streamId, seq) {
+      const key = `${streamId}:${seq}`;
+      const timer = setTimeout(() => {
+        const tracker = this.sequenceTrackers.get(streamId);
+        if (tracker && !tracker.missing.includes(seq)) {
+          tracker.missing.push(seq);
+        }
+      }, this.chunkTimeoutMs);
+      this.chunkTimers.set(key, timer);
+    }
+
+    getPlayableChunks(streamId) {
+      const buffer = this.streamBuffers.get(streamId);
+      if (!buffer || buffer.length === 0) return [];
+
+      const playback = this.playbackBuffers.get(streamId);
+      const lastPlayedSeq = playback.length > 0
+        ? playback[playback.length - 1].seq
+        : -1;
+
+      const chunks = buffer.filter(c => c.seq > lastPlayedSeq);
+      return chunks;
+    }
+
+    markChunksPlayed(streamId, upToSeq) {
+      const buffer = this.streamBuffers.get(streamId);
+      const playback = this.playbackBuffers.get(streamId);
+
+      const toPlay = buffer.filter(c => c.seq <= upToSeq);
+      playback.push(...toPlay);
+
+      const newBuffer = buffer.filter(c => c.seq > upToSeq);
+      this.streamBuffers.set(streamId, newBuffer);
+    }
+
+    canStartPlayback(streamId) {
+      const buffer = this.streamBuffers.get(streamId);
+      const playback = this.playbackBuffers.get(streamId);
+      const tracker = this.sequenceTrackers.get(streamId);
+
+      if (!buffer) return false;
+      if (buffer.length === 0 && !tracker.complete) return false;
+
+      return buffer.length >= this.MIN_BUFFER_CHUNKS || tracker.complete;
+    }
+
+    markStreamComplete(streamId) {
+      const tracker = this.sequenceTrackers.get(streamId);
+      if (tracker) tracker.complete = true;
+    }
+
+    isStreamComplete(streamId) {
+      const tracker = this.sequenceTrackers.get(streamId);
+      return tracker && tracker.complete;
+    }
+
+    hasLostPackets(streamId) {
+      const tracker = this.sequenceTrackers.get(streamId);
+      return tracker && tracker.missing.length > 0;
+    }
+
+    getStreamStats(streamId) {
+      const tracker = this.sequenceTrackers.get(streamId);
+      const buffer = this.streamBuffers.get(streamId);
+      const playback = this.playbackBuffers.get(streamId);
+
+      return {
+        buffered: buffer ? buffer.length : 0,
+        played: playback ? playback.length : 0,
+        totalSeq: tracker ? tracker.lastSeq + 1 : 0,
+        missing: tracker ? tracker.missing.length : 0,
+        outOfOrder: tracker ? tracker.outOfOrder : 0,
+        complete: tracker ? tracker.complete : false
+      };
+    }
+
+    cleanupStream(streamId) {
+      this.streamBuffers.delete(streamId);
+      this.playbackBuffers.delete(streamId);
+      this.sequenceTrackers.delete(streamId);
+
+      const keys = Array.from(this.chunkTimers.keys());
+      keys.forEach(key => {
+        if (key.startsWith(`${streamId}:`)) {
+          clearTimeout(this.chunkTimers.get(key));
+          this.chunkTimers.delete(key);
+        }
+      });
+    }
+  }
+
+  window.TTSWebSocketHandler = TTSWebSocketHandler;
+})();

package/static/js/voice.js

@@ -35,6 +35,43 @@
     if (!selector) return;
     var saved = localStorage.getItem('voice-selected-id');
     if (saved) selectedVoiceId = saved;
+    if (window.wsManager) {
+      window.wsManager.subscribeToVoiceList(function(voices) {
+        if (!Array.isArray(voices)) return;
+        selector.innerHTML = '';
+        var builtIn = voices.filter(function(v) { return !v.isCustom; });
+        var custom = voices.filter(function(v) { return v.isCustom; });
+        if (builtIn.length) {
+          var grp1 = document.createElement('optgroup');
+          grp1.label = 'Built-in Voices';
+          builtIn.forEach(function(voice) {
+            var opt = document.createElement('option');
+            opt.value = voice.id;
+            var parts = [];
+            if (voice.gender) parts.push(voice.gender);
+            if (voice.accent) parts.push(voice.accent);
+            opt.textContent = voice.name + (parts.length ? ' (' + parts.join(', ') + ')' : '');
+            grp1.appendChild(opt);
+          });
+          selector.appendChild(grp1);
+        }
+        if (custom.length) {
+          var grp2 = document.createElement('optgroup');
+          grp2.label = 'Custom Voices';
+          custom.forEach(function(voice) {
+            var opt = document.createElement('option');
+            opt.value = voice.id;
+            opt.textContent = voice.name;
+            grp2.appendChild(opt);
+          });
+          selector.appendChild(grp2);
+        }
+        if (saved && selector.querySelector('option[value="' + saved + '"]')) {
+          selector.value = saved;
+        }
+      });
+      return;
+    }
     fetch(BASE + '/api/voices')
       .then(function(res) { return res.json(); })
       .then(function(data) {
@@ -672,7 +709,11 @@
       }
     });
     window.addEventListener('conversation-selected', function(e) {
-      currentConversationId = e.detail.conversationId;
+      var newConversationId = e.detail.conversationId;
+      if (currentConversationId && currentConversationId !== newConversationId) {
+        unsubscribeFromConversation();
+      }
+      currentConversationId = newConversationId;
       stopSpeaking();
       spokenChunks = new Set();
       renderedSeqs = new Set();
@@ -715,9 +756,11 @@
     _voiceBreakNext = false;
     if (!conversationId) {
       showVoiceEmpty(container);
+      unsubscribeFromConversation();
       return;
     }
     isLoadingHistory = true;
+    subscribeToConversation(conversationId);
     fetch(BASE + '/api/conversations/' + conversationId + '/chunks')
       .then(function(res) { return res.json(); })
       .then(function(data) {
@@ -751,6 +794,20 @@
       });
   }
 
+  function subscribeToConversation(conversationId) {
+    if (!conversationId || typeof agentGUIClient === 'undefined' || !agentGUIClient || !agentGUIClient.wsManager) {
+      return;
+    }
+    agentGUIClient.wsManager.sendMessage({ type: 'subscribe', conversationId: conversationId, timestamp: Date.now() });
+  }
+
+  function unsubscribeFromConversation() {
+    if (typeof agentGUIClient === 'undefined' || !agentGUIClient || !agentGUIClient.wsManager || !currentConversationId) {
+      return;
+    }
+    agentGUIClient.wsManager.sendMessage({ type: 'unsubscribe', conversationId: currentConversationId, timestamp: Date.now() });
+  }
+
   function showVoiceEmpty(container) {
     container.innerHTML = '<div class="voice-empty"><div class="voice-empty-icon"><svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg></div><div>Hold the microphone button to record.<br>Release to transcribe. Tap Send to submit.<br>New responses will be read aloud.</div></div>';
   }
@@ -770,6 +827,7 @@
   function deactivate() {
     voiceActive = false;
     stopSpeaking();
+    unsubscribeFromConversation();
   }
 
   function escapeHtml(text) {

package/static/js/websocket-manager.js

@@ -139,6 +139,13 @@ class WebSocketManager {
           continue;
         }
 
+        if (data.type === 'voice_list') {
+          this.cachedVoiceList = data.voices || [];
+          for (const listener of this.voiceListListeners) {
+            try { listener(this.cachedVoiceList); } catch (_) {}
+          }
+        }
+
         if (data.seq !== undefined && data.sessionId) {
           this.lastSeqBySession[data.sessionId] = Math.max(
             this.lastSeqBySession[data.sessionId] || -1, data.seq
@@ -565,6 +572,21 @@ class WebSocketManager {
     this.disconnect();
     this.listeners = {};
   }
+  subscribeToVoiceList(callback) {
+    if (!this.voiceListListeners.includes(callback)) {
+      this.voiceListListeners.push(callback);
+    }
+    if (this.cachedVoiceList !== null) {
+      callback(this.cachedVoiceList);
+    }
+  }
+
+  unsubscribeFromVoiceList(callback) {
+    const idx = this.voiceListListeners.indexOf(callback);
+    if (idx > -1) {
+      this.voiceListListeners.splice(idx, 1);
+    }
+  }
 }
 
 if (typeof module !== 'undefined' && module.exports) {