agentgui 1.0.525 → 1.0.527

package/lib/speech.js

@@ -1,4 +1,51 @@
 import { createRequire } from 'module';
 const require = createRequire(import.meta.url);
 const speech = require('webtalk/speech');
-export const { transcribe, synthesize, synthesizeStream, getSTT, getStatus, getVoices, preloadTTS, ttsCacheKey, ttsCacheGet, splitSentences, resetSTTError, clearCorruptedSTTCache } = speech;
+
+const ttsMemCache = new Map();
+const TTS_CACHE_MAX_BYTES = 10 * 1024 * 1024;
+let ttsCacheBytes = 0;
+
+function ttsCacheKey(text, voiceId) {
+  return (voiceId || 'default') + ':' + text;
+}
+
+function ttsCacheGet(key) {
+  return ttsMemCache.get(key) || null;
+}
+
+function ttsCacheSet(key, wav) {
+  if (ttsMemCache.has(key)) return;
+  const size = wav ? wav.length : 0;
+  while (ttsCacheBytes + size > TTS_CACHE_MAX_BYTES && ttsMemCache.size > 0) {
+    const oldest = ttsMemCache.keys().next().value;
+    const old = ttsMemCache.get(oldest);
+    ttsCacheBytes -= old ? old.length : 0;
+    ttsMemCache.delete(oldest);
+  }
+  ttsMemCache.set(key, wav);
+  ttsCacheBytes += size;
+}
+
+async function synthesizeWithCache(text, voiceId) {
+  const key = ttsCacheKey(text, voiceId);
+  const cached = ttsCacheGet(key);
+  if (cached) return cached;
+  const wav = await speech.synthesize(text, voiceId);
+  ttsCacheSet(key, wav);
+  return wav;
+}
+
+export const transcribe = speech.transcribe;
+export const synthesize = synthesizeWithCache;
+export const synthesizeStream = speech.synthesizeStream;
+export const getSTT = speech.getSTT;
+export const getStatus = speech.getStatus;
+export const getVoices = speech.getVoices;
+export const preloadTTS = speech.preloadTTS;
+export { ttsCacheKey, ttsCacheGet, ttsCacheSet };
+export const splitSentences = speech.splitSentences;
+export const resetSTTError = speech.resetSTTError;
+export const clearCorruptedSTTCache = speech.clearCorruptedSTTCache;
+export const getSttOptions = speech.getSttOptions;
+export const VOICE_DIRS = speech.VOICE_DIRS;

package/package.json

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

package/server.js

@@ -64,7 +64,7 @@ const voiceCacheManager = {
     this.generating.set(cacheKey, true);
     try {
       const speech = await getSpeech();
-      const audioBlob = await speech.ttsSync(text, 'en-US');
+      const audioBlob = await speech.synthesize(text, 'default');
       const saved = queries.saveVoiceCache(conversationId, text, audioBlob);
       const totalSize = queries.getVoiceCacheSize(conversationId);
       if (totalSize > this.maxCacheSize) {
@@ -240,14 +240,15 @@ function flushTTSaccumulator(key, conversationId, sessionId) {
       }
     }
     if (voices.size === 0) return;
-    const cacheKey = speech.ttsCacheKey(text, vid);
     for (const vid of voices) {
+      const cacheKey = speech.ttsCacheKey(text, vid);
       const cached = speech.ttsCacheGet(cacheKey);
       if (cached) {
         pushTTSAudio(cacheKey, cached, conversationId, sessionId, vid);
         continue;
       }
       speech.synthesize(text, vid).then(wav => {
+        if (speech.ttsCacheSet) speech.ttsCacheSet(cacheKey, wav);
         pushTTSAudio(cacheKey, wav, conversationId, sessionId, vid);
       }).catch(() => {});
     }
@@ -2880,6 +2881,23 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
+    if (pathOnly.startsWith('/api/tts-cache/') && req.method === 'GET') {
+      const cacheKey = decodeURIComponent(pathOnly.slice('/api/tts-cache/'.length));
+      try {
+        const speech = await getSpeech();
+        const cached = speech.ttsCacheGet(cacheKey);
+        if (cached) {
+          res.writeHead(200, { 'Content-Type': 'audio/wav', 'Content-Length': cached.length, 'Cache-Control': 'public, max-age=3600' });
+          res.end(cached);
+        } else {
+          sendJSON(req, res, 404, { error: 'not cached' });
+        }
+      } catch (err) {
+        sendJSON(req, res, 500, { error: err.message });
+      }
+      return;
+    }
+
     if (pathOnly === '/api/speech-status' && req.method === 'GET') {
       try {
         const { getStatus } = await getSpeech();

package/static/css/tools-popup.css

@@ -40,7 +40,7 @@
   background: var(--color-bg-secondary);
   border-radius: 1rem;
   width: 90%;
-  max-width: 32rem;
+  max-width: 600px;
   max-height: 80vh;
   display: flex;
   flex-direction: column;
@@ -49,21 +49,91 @@
   font-family: system-ui, -apple-system, sans-serif;
 }
 
+@media (max-width: 768px) {
+  .tools-popup-content {
+    max-width: 90vw;
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .tools-popup-content {
+    max-width: 95vw;
+    width: 100%;
+    max-height: 85vh;
+  }
+
+  .tools-popup-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .tools-popup-header-controls {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+}
+
 .tools-popup-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.25rem 1.5rem;
+  padding: 0.875rem 1.25rem;
   flex-shrink: 0;
   border-bottom: 1px solid var(--color-border);
+  gap: 0.75rem;
 }
 
 .tools-popup-header h2 {
   margin: 0;
-  font-size: 1.25rem;
+  font-size: 1rem;
   font-weight: 700;
 }
 
+.tools-popup-header-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-shrink: 0;
+}
+
+.tools-voice-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.tools-voice-toggle input {
+  width: 0.875rem;
+  height: 0.875rem;
+  cursor: pointer;
+}
+
+.tools-voice-selector {
+  padding: 0.35rem 0.5rem;
+  font-size: 0.75rem;
+  border-radius: 0.3rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.tools-voice-selector:hover {
+  border-color: var(--color-primary);
+}
+
+.tools-voice-selector:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+
 .tools-popup-close {
   background: none;
   border: none;
@@ -83,9 +153,21 @@
   flex: 1;
   overflow-y: auto;
   padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+@media (max-width: 768px) {
+  .tools-popup-scroll {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  }
+}
+
+@media (max-width: 480px) {
+  .tools-popup-scroll {
+    grid-template-columns: 1fr;
+  }
 }
 
 .tools-popup-scroll::-webkit-scrollbar {
@@ -106,43 +188,50 @@
 }
 
 .tool-item {
-  padding: 1rem;
+  padding: 0.75rem;
   border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   background: var(--color-bg-primary);
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.375rem;
   transition: border-color 0.2s, background-color 0.2s;
+  min-height: 120px;
+  justify-content: space-between;
 }
 
 .tool-item:hover {
   border-color: var(--color-primary);
   background: var(--color-bg-secondary);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .tool-header {
   display: flex;
-  align-items: center;
-  gap: 0.75rem;
+  align-items: flex-start;
+  gap: 0.5rem;
   justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 .tool-name {
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   flex: 1;
+  word-break: break-word;
 }
 
 .tool-status-indicator {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
-  font-size: 0.8rem;
-  padding: 0.25rem 0.5rem;
+  gap: 0.25rem;
+  font-size: 0.7rem;
+  padding: 0.2rem 0.4rem;
   border-radius: 0.25rem;
   background: var(--color-bg-tertiary);
   color: var(--color-text-secondary);
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .tool-status-indicator.installed {
@@ -179,24 +268,28 @@
 }
 
 .tool-details {
-  font-size: 0.8rem;
+  font-size: 0.7rem;
   color: var(--color-text-secondary);
-  display: flex;
+  display: none;
   align-items: center;
   gap: 0.5rem;
+  line-height: 1.3;
+  max-height: 2.6em;
+  overflow: hidden;
 }
 
 .tool-progress-container {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.15rem;
+  margin-top: 0.25rem;
 }
 
 .tool-progress-bar {
   width: 100%;
-  height: 0.375rem;
+  height: 0.25rem;
   background: var(--color-bg-tertiary);
-  border-radius: 0.1875rem;
+  border-radius: 0.125rem;
   overflow: hidden;
 }
 
@@ -205,30 +298,31 @@
   background: linear-gradient(90deg, #3b82f6, #2563eb);
   width: 0%;
   transition: width 0.3s ease;
-  border-radius: 0.1875rem;
+  border-radius: 0.125rem;
 }
 
 .tool-progress-text {
-  font-size: 0.75rem;
+  font-size: 0.65rem;
   color: var(--color-text-secondary);
 }
 
 .tool-actions {
   display: flex;
-  gap: 0.5rem;
+  gap: 0.4rem;
   flex-wrap: wrap;
+  margin-top: 0.25rem;
 }
 
 .tool-btn {
-  padding: 0.5rem 0.875rem;
+  padding: 0.35rem 0.65rem;
   border: none;
-  border-radius: 0.375rem;
+  border-radius: 0.3rem;
   cursor: pointer;
-  font-size: 0.8rem;
+  font-size: 0.7rem;
   font-weight: 600;
   transition: all 0.2s;
   flex: 1;
-  min-width: fit-content;
+  min-width: 60px;
   white-space: nowrap;
 }
 
@@ -259,12 +353,15 @@
 }
 
 .tool-error-message {
-  font-size: 0.75rem;
+  font-size: 0.65rem;
   color: #ef4444;
   background: rgba(239, 68, 68, 0.1);
-  padding: 0.5rem;
+  padding: 0.375rem;
   border-radius: 0.25rem;
   border-left: 2px solid #ef4444;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 1.5em;
 }
 
 .tools-popup-footer {
@@ -318,18 +415,21 @@
 .tool-versions {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  font-size: 0.75rem;
+  gap: 0.15rem;
+  font-size: 0.65rem;
   color: var(--color-text-secondary);
-  background: var(--color-bg-secondary);
-  padding: 0.5rem;
+  background: transparent;
+  padding: 0;
   border-radius: 0.25rem;
+  line-height: 1.3;
 }
 
 .tool-version-item {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tool-version-item strong {

package/static/index.html

@@ -3125,8 +3125,19 @@
           <div class="tools-popup" id="toolsPopup">
             <div class="tools-popup-content" onclick="event.stopPropagation()">
               <div class="tools-popup-header">
-                <h2>Tools & Extensions</h2>
-                <button class="tools-popup-close" onclick="document.getElementById('toolsPopup').classList.remove('open')">×</button>
+                <div style="display: flex; align-items: center; gap: 0.75rem; flex: 1;">
+                  <h2 style="margin: 0; font-size: 1rem;">Tools & Extensions</h2>
+                </div>
+                <div class="tools-popup-header-controls" style="display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0;">
+                  <label class="tools-voice-toggle" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; cursor: pointer; user-select: none;">
+                    <input type="checkbox" id="toolsAutoSpeakToggle" style="width: 1rem; height: 1rem; cursor: pointer;">
+                    <span>Auto-speak</span>
+                  </label>
+                  <select class="tools-voice-selector" id="toolsVoiceSelector" style="padding: 0.4rem 0.6rem; font-size: 0.8rem; border-radius: 0.3rem; border: 1px solid var(--color-border); background: var(--color-bg-primary); color: var(--color-text-primary); cursor: pointer;">
+                    <option value="default">Voice</option>
+                  </select>
+                  <button class="tools-popup-close" onclick="document.getElementById('toolsPopup').classList.remove('open')" style="background: none; border: none; color: var(--color-text-secondary); font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1; transition: color 0.2s;">×</button>
+                </div>
               </div>
               <div class="tools-popup-scroll"></div>
               <div class="tools-popup-footer">

package/static/js/tools-manager.js

@@ -13,9 +13,96 @@
       if (!btn.contains(e.target) && !popup.contains(e.target)) closePopup();
     });
     window.addEventListener('ws-message', onWsMessage);
+
+    // Initialize voice controls
+    initVoiceControls();
     refresh();
   }
 
+  function initVoiceControls() {
+    var autoSpeakToggle = document.getElementById('toolsAutoSpeakToggle');
+    var voiceSelector = document.getElementById('toolsVoiceSelector');
+
+    if (!autoSpeakToggle || !voiceSelector) return;
+
+    var savedAutoSpeak = localStorage.getItem('toolsAutoSpeak') === 'true';
+    autoSpeakToggle.checked = savedAutoSpeak;
+
+    window.addEventListener('ws-message', function(e) {
+      var data = e.detail;
+      if (data && data.type === 'voice_list') updateVoiceSelector(data.voices);
+    });
+
+    function trySubscribeVsManager() {
+      if (window.wsManager && window.wsManager.subscribeToVoiceList) {
+        window.wsManager.subscribeToVoiceList(updateVoiceSelector);
+      } else {
+        var BASE = window.__BASE_URL || '';
+        fetch(BASE + '/api/voices').then(function(r) { return r.json(); }).then(function(d) {
+          if (d.ok && Array.isArray(d.voices)) updateVoiceSelector(d.voices);
+        }).catch(function() {});
+        setTimeout(function() {
+          if (window.wsManager && window.wsManager.subscribeToVoiceList) {
+            window.wsManager.subscribeToVoiceList(updateVoiceSelector);
+          }
+        }, 2000);
+      }
+    }
+    trySubscribeVsManager();
+
+    autoSpeakToggle.addEventListener('change', function() {
+      localStorage.setItem('toolsAutoSpeak', this.checked);
+      if (window.voiceModule) window.voiceModule.setAutoSpeak(this.checked);
+    });
+
+    voiceSelector.addEventListener('change', function() {
+      localStorage.setItem('toolsVoice', this.value);
+      if (window.voiceModule) window.voiceModule.setVoice(this.value);
+    });
+  }
+
+  function updateVoiceSelector(voices) {
+    var voiceSelector = document.getElementById('toolsVoiceSelector');
+    if (!voiceSelector || !voices || !Array.isArray(voices)) return;
+
+    var currentValue = voiceSelector.value || localStorage.getItem('toolsVoice') || 'default';
+    voiceSelector.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 && voice.gender !== 'custom') parts.push(voice.gender);
+        if (voice.accent && voice.accent !== 'custom') parts.push(voice.accent);
+        opt.textContent = voice.name + (parts.length ? ' (' + parts.join(', ') + ')' : '');
+        grp1.appendChild(opt);
+      });
+      voiceSelector.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);
+      });
+      voiceSelector.appendChild(grp2);
+    }
+
+    if (voiceSelector.querySelector('option[value="' + currentValue + '"]')) {
+      voiceSelector.value = currentValue;
+    }
+  }
+
   function refresh() {
     fetchTools();
   }
@@ -141,10 +228,23 @@
     popup.classList.remove('open');
   }
 
+  function isAutoSpeakOn() {
+    var toggle = document.getElementById('toolsAutoSpeakToggle');
+    return toggle ? toggle.checked : false;
+  }
+
   function onWsMessage(e) {
     var data = e.detail;
     if (!data) return;
 
+    if (data.type === 'streaming_progress' && data.block && data.block.type === 'text' && data.block.text) {
+      if (isAutoSpeakOn() && (!data.blockRole || data.blockRole === 'assistant')) {
+        if (window.voiceModule && typeof window.voiceModule.speakText === 'function') {
+          window.voiceModule.speakText(data.block.text);
+        }
+      }
+    }
+
     if (data.type === 'tools_update_started') {
       var updateTools = data.tools || [];
       updateTools.forEach(function(toolId) {
@@ -200,42 +300,41 @@
     if (!scroll) return;
 
     if (tools.length === 0) {
-      scroll.innerHTML = '<div class="tool-empty-state"><div class="tool-empty-state-icon">⚙️</div><div class="tool-empty-state-text">No tools available</div></div>';
+      scroll.innerHTML = '<div class="tool-empty-state" style="grid-column: 1 / -1;"><div class="tool-empty-state-icon">⚙️</div><div class="tool-empty-state-text">No tools available</div></div>';
       return;
     }
 
     scroll.innerHTML = tools.map(function(tool) {
       var statusClass = getStatusClass(tool);
       var isInstalling = tool.status === 'installing' || tool.status === 'updating';
-      var hasAction = !tool.installed || tool.hasUpdate || tool.status === 'failed';
       var versionInfo = '';
       if (tool.installedVersion || tool.publishedVersion) {
         versionInfo = '<div class="tool-versions">';
         if (tool.installedVersion) {
-          versionInfo += '<span class="tool-version-item">Installed: <strong>' + esc(tool.installedVersion) + '</strong></span>';
+          versionInfo += '<span class="tool-version-item">v' + esc(tool.installedVersion) + '</span>';
         }
-        if (tool.publishedVersion) {
-          versionInfo += '<span class="tool-version-item">Published: <strong>' + esc(tool.publishedVersion) + '</strong></span>';
+        if (tool.publishedVersion && tool.installedVersion !== tool.publishedVersion) {
+          versionInfo += '<span class="tool-version-item">(v' + esc(tool.publishedVersion) + ' available)</span>';
         }
         versionInfo += '</div>';
       }
 
       return '<div class="tool-item">' +
+        '<div style="display: flex; flex-direction: column; gap: 0.3rem;">' +
         '<div class="tool-header">' +
         '<span class="tool-name">' + esc(tool.id) + '</span>' +
-        '<span class="tool-status-indicator ' + statusClass + '">' +
+        '</div>' +
+        '<div class="tool-status-indicator ' + statusClass + '">' +
         '<span class="tool-status-dot"></span>' +
         '<span>' + getStatusText(tool) + '</span>' +
-        '</span>' +
         '</div>' +
         versionInfo +
-        (tool.description ? '<div class="tool-details">' + esc(tool.description) + '</div>' : '') +
         (isInstalling && tool.progress !== undefined ?
           '<div class="tool-progress-container">' +
           '<div class="tool-progress-bar"><div class="tool-progress-fill" style="width:' + Math.min(tool.progress, 100) + '%"></div></div>' +
-          '<div class="tool-progress-text">' + Math.floor(tool.progress) + '%</div>' +
           '</div>' : '') +
-        (tool.error_message ? '<div class="tool-error-message">Error: ' + esc(tool.error_message.substring(0, 60)) + '</div>' : '') +
+        (tool.error_message ? '<div class="tool-error-message">Error: ' + esc(tool.error_message.substring(0, 40)) + '</div>' : '') +
+        '</div>' +
         '<div class="tool-actions">' +
         (tool.status === 'not_installed' ?
           '<button class="tool-btn tool-btn-primary" onclick="window.toolsManager.install(\'' + tool.id + '\')" ' + (operationInProgress.has(tool.id) ? 'disabled' : '') + '>Install</button>' :
@@ -243,7 +342,7 @@
           '<button class="tool-btn tool-btn-primary" onclick="window.toolsManager.update(\'' + tool.id + '\')" ' + (operationInProgress.has(tool.id) ? 'disabled' : '') + '>Update</button>' :
           tool.status === 'failed' ?
           '<button class="tool-btn tool-btn-primary" onclick="window.toolsManager.install(\'' + tool.id + '\')" ' + (operationInProgress.has(tool.id) ? 'disabled' : '') + '>Retry</button>' :
-          '<button class="tool-btn tool-btn-secondary" onclick="window.toolsManager.refresh()" ' + (isRefreshing ? 'disabled' : '') + '>Refresh</button>'
+          '<button class="tool-btn tool-btn-secondary" onclick="window.toolsManager.refresh()" ' + (isRefreshing ? 'disabled' : '') + '>✓</button>'
         ) +
         '</div>' +
         '</div>';
@@ -306,6 +405,28 @@
     },
     install: function(toolId) { install(toolId); },
     update: function(toolId) { update(toolId); },
-    updateAll: function() { updateAll(); }
+    updateAll: function() { updateAll(); },
+    getAutoSpeak: function() {
+      var toggle = document.getElementById('toolsAutoSpeakToggle');
+      return toggle ? toggle.checked : false;
+    },
+    getVoice: function() {
+      var selector = document.getElementById('toolsVoiceSelector');
+      return selector ? selector.value : 'default';
+    },
+    setAutoSpeak: function(value) {
+      var toggle = document.getElementById('toolsAutoSpeakToggle');
+      if (toggle) {
+        toggle.checked = value;
+        localStorage.setItem('toolsAutoSpeak', value);
+      }
+    },
+    setVoice: function(value) {
+      var selector = document.getElementById('toolsVoiceSelector');
+      if (selector && Array.from(selector.options).some(opt => opt.value === value)) {
+        selector.value = value;
+        localStorage.setItem('toolsVoice', value);
+      }
+    }
   };
 })();

package/static/js/voice.js

@@ -18,7 +18,7 @@
   var _lastVoiceBlockText = null;
   var _lastVoiceBlockTime = 0;
   var _voiceBreakNext = false;
-  var selectedVoiceId = localStorage.getItem('voice-selected-id') || 'default';
+  var selectedVoiceId = localStorage.getItem('gmgui-voice-selection') || 'default';
   var ttsAudioCache = new Map();
   var TTS_CLIENT_CACHE_MAX = 50;
 
@@ -33,7 +33,7 @@
   function setupVoiceSelector() {
     var selector = document.getElementById('voiceSelector');
     if (!selector) return;
-    var saved = localStorage.getItem('voice-selected-id');
+    var saved = localStorage.getItem('gmgui-voice-selection');
     if (saved) selectedVoiceId = saved;
     if (window.wsManager) {
       window.wsManager.subscribeToVoiceList(function(voices) {
@@ -66,8 +66,8 @@
           });
           selector.appendChild(grp2);
         }
-        if (saved && selector.querySelector('option[value="' + saved + '"]')) {
-          selector.value = saved;
+        if (selectedVoiceId && selector.querySelector('option[value="' + selectedVoiceId + '"]')) {
+          selector.value = selectedVoiceId;
         }
       });
       return;
@@ -104,15 +104,15 @@
             });
             selector.appendChild(grp2);
           }
-          if (saved && selector.querySelector('option[value="' + saved + '"]')) {
-            selector.value = saved;
+          if (selectedVoiceId && selector.querySelector('option[value="' + selectedVoiceId + '"]')) {
+            selector.value = selectedVoiceId;
           }
         })
         .catch(function(err) { console.error('[Voice] Failed to load voices:', err); });
     }
     selector.addEventListener('change', function() {
       selectedVoiceId = selector.value;
-      localStorage.setItem('voice-selected-id', selectedVoiceId);
+      localStorage.setItem('gmgui-voice-selection', selectedVoiceId);
       sendVoiceToServer();
     });
   }
@@ -211,14 +211,14 @@
   function setupTTSToggle() {
     var toggle = document.getElementById('voiceTTSToggle');
     if (toggle) {
-      var saved = localStorage.getItem('voice-tts-enabled');
+      var saved = localStorage.getItem('gmgui-auto-speak');
       if (saved !== null) {
         ttsEnabled = saved === 'true';
         toggle.checked = ttsEnabled;
       }
       toggle.addEventListener('change', function() {
         ttsEnabled = toggle.checked;
-        localStorage.setItem('voice-tts-enabled', ttsEnabled);
+        localStorage.setItem('gmgui-auto-speak', ttsEnabled);
         if (!ttsEnabled) stopSpeaking();
       });
     }
@@ -352,6 +352,10 @@
 
   function speak(text) {
     if (!ttsEnabled) return;
+    speakDirect(text);
+  }
+
+  function speakDirect(text) {
     var clean = text.replace(/<[^>]*>/g, '').trim();
     if (!clean) return;
     var parts = [];
@@ -946,10 +950,39 @@
     return text.replace(/[&<>"']/g, function(c) { return map[c]; });
   }
 
+  function getAutoSpeak() {
+    return ttsEnabled;
+  }
+
+  function setAutoSpeak(value) {
+    ttsEnabled = Boolean(value);
+    localStorage.setItem('gmgui-auto-speak', ttsEnabled);
+    var toggle = document.getElementById('voiceTTSToggle');
+    if (toggle) toggle.checked = ttsEnabled;
+    if (!ttsEnabled) stopSpeaking();
+  }
+
+  function getVoice() {
+    return selectedVoiceId;
+  }
+
+  function setVoice(voiceId) {
+    selectedVoiceId = String(voiceId);
+    localStorage.setItem('gmgui-voice-selection', selectedVoiceId);
+    var selector = document.getElementById('voiceSelector');
+    if (selector) selector.value = selectedVoiceId;
+    sendVoiceToServer();
+  }
+
   window.voiceModule = {
     activate: activate,
     deactivate: deactivate,
-    handleBlock: handleVoiceBlock
+    handleBlock: handleVoiceBlock,
+    getAutoSpeak: getAutoSpeak,
+    setAutoSpeak: setAutoSpeak,
+    getVoice: getVoice,
+    setVoice: setVoice,
+    speakText: speakDirect
   };
 
   if (document.readyState === 'loading') {

package/static/tools-ui-test.html

@@ -0,0 +1,551 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tools UI Redesign Test - Compact Grid Layout</title>
+  <style>
+    * { box-sizing: border-box; }
+    
+    :root {
+      --color-primary: #3b82f6;
+      --color-primary-dark: #1e40af;
+      --color-bg-primary: #ffffff;
+      --color-bg-secondary: #f9fafb;
+      --color-bg-tertiary: #f3f4f6;
+      --color-text-primary: #111827;
+      --color-text-secondary: #6b7280;
+      --color-border: #e5e7eb;
+      --color-success: #10b981;
+    }
+    
+    html.dark {
+      --color-bg-primary: #111827;
+      --color-bg-secondary: #1f2937;
+      --color-bg-tertiary: #374151;
+      --color-text-primary: #f9fafb;
+      --color-text-secondary: #d1d5db;
+      --color-border: #374151;
+    }
+    
+    body {
+      margin: 0;
+      padding: 20px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: var(--color-bg-secondary);
+      color: var(--color-text-primary);
+    }
+    
+    .test-container {
+      max-width: 1000px;
+      margin: 0 auto;
+    }
+    
+    h1 {
+      font-size: 2rem;
+      margin-bottom: 10px;
+    }
+    
+    .description {
+      color: var(--color-text-secondary);
+      margin-bottom: 30px;
+      font-size: 0.95rem;
+      line-height: 1.5;
+    }
+    
+    .demo-section {
+      margin-bottom: 40px;
+    }
+    
+    .section-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 15px;
+      border-bottom: 2px solid var(--color-primary);
+      padding-bottom: 8px;
+    }
+    
+    /* Tools popup styles */
+    .tools-popup-content {
+      background: var(--color-bg-secondary);
+      border-radius: 1rem;
+      width: 100%;
+      max-width: 600px;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
+      color: var(--color-text-primary);
+      font-family: system-ui, -apple-system, sans-serif;
+      overflow: hidden;
+    }
+    
+    .tools-popup-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.875rem 1.25rem;
+      flex-shrink: 0;
+      border-bottom: 1px solid var(--color-border);
+      gap: 0.75rem;
+    }
+    
+    .tools-popup-header h2 {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 700;
+      flex: 1;
+    }
+    
+    .tools-popup-header-controls {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      flex-shrink: 0;
+    }
+    
+    .tools-voice-toggle {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.8rem;
+      cursor: pointer;
+      user-select: none;
+    }
+    
+    .tools-voice-toggle input {
+      width: 0.875rem;
+      height: 0.875rem;
+      cursor: pointer;
+    }
+    
+    .tools-voice-selector {
+      padding: 0.35rem 0.5rem;
+      font-size: 0.75rem;
+      border-radius: 0.3rem;
+      border: 1px solid var(--color-border);
+      background: var(--color-bg-primary);
+      color: var(--color-text-primary);
+      cursor: pointer;
+    }
+    
+    .tools-popup-scroll {
+      flex: 1;
+      overflow-y: auto;
+      padding: 1rem;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
+    }
+    
+    @media (max-width: 768px) {
+      .tools-popup-scroll {
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      }
+    }
+    
+    @media (max-width: 480px) {
+      .tools-popup-scroll {
+        grid-template-columns: 1fr;
+      }
+      
+      .tools-popup-header {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      
+      .tools-popup-header-controls {
+        width: 100%;
+        flex-wrap: wrap;
+      }
+    }
+    
+    .tool-item {
+      padding: 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: 0.5rem;
+      background: var(--color-bg-primary);
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+      transition: border-color 0.2s, background-color 0.2s;
+      min-height: 120px;
+      justify-content: space-between;
+    }
+    
+    .tool-item:hover {
+      border-color: var(--color-primary);
+      background: var(--color-bg-secondary);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+    
+    .tool-header {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+    
+    .tool-name {
+      font-weight: 600;
+      font-size: 0.9rem;
+      flex: 1;
+      word-break: break-word;
+    }
+    
+    .tool-status-indicator {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      font-size: 0.7rem;
+      padding: 0.2rem 0.4rem;
+      border-radius: 0.25rem;
+      background: var(--color-bg-tertiary);
+      color: var(--color-text-secondary);
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+    
+    .tool-status-indicator.installed {
+      background: rgba(16, 185, 129, 0.15);
+      color: #10b981;
+    }
+    
+    .tool-status-indicator.needs_update {
+      background: rgba(245, 158, 11, 0.15);
+      color: #f59e0b;
+    }
+    
+    .tool-status-indicator.not_installed {
+      background: rgba(107, 114, 128, 0.15);
+      color: #9ca3af;
+    }
+    
+    .tool-status-dot {
+      width: 0.375rem;
+      height: 0.375rem;
+      border-radius: 50%;
+      background: currentColor;
+      display: inline-block;
+    }
+    
+    .tool-versions {
+      display: flex;
+      flex-direction: column;
+      gap: 0.15rem;
+      font-size: 0.65rem;
+      color: var(--color-text-secondary);
+      line-height: 1.3;
+    }
+    
+    .tool-version-item {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .tool-actions {
+      display: flex;
+      gap: 0.4rem;
+      flex-wrap: wrap;
+      margin-top: 0.25rem;
+    }
+    
+    .tool-btn {
+      padding: 0.35rem 0.65rem;
+      border: none;
+      border-radius: 0.3rem;
+      cursor: pointer;
+      font-size: 0.7rem;
+      font-weight: 600;
+      transition: all 0.2s;
+      flex: 1;
+      min-width: 60px;
+      white-space: nowrap;
+    }
+    
+    .tool-btn-primary {
+      background: var(--color-primary);
+      color: white;
+    }
+    
+    .tool-btn-primary:hover {
+      background: var(--color-primary-dark);
+    }
+    
+    .tool-progress-bar {
+      width: 100%;
+      height: 0.25rem;
+      background: var(--color-bg-tertiary);
+      border-radius: 0.125rem;
+      overflow: hidden;
+      margin-top: 0.25rem;
+    }
+    
+    .tool-progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #3b82f6, #2563eb);
+      width: 60%;
+      border-radius: 0.125rem;
+    }
+    
+    .feature-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 15px;
+      margin: 20px 0;
+    }
+    
+    .feature-item {
+      padding: 12px;
+      background: var(--color-bg-primary);
+      border-radius: 0.5rem;
+      border-left: 3px solid var(--color-primary);
+    }
+    
+    .feature-item strong {
+      color: var(--color-primary);
+    }
+    
+    .size-demo {
+      display: flex;
+      gap: 10px;
+      margin: 20px 0;
+      flex-wrap: wrap;
+    }
+    
+    .size-demo-item {
+      text-align: center;
+      padding: 10px;
+      background: var(--color-bg-primary);
+      border-radius: 0.5rem;
+      border: 1px solid var(--color-border);
+    }
+    
+    .size-label {
+      font-size: 0.8rem;
+      color: var(--color-text-secondary);
+      margin-bottom: 5px;
+    }
+    
+    .toggle-dark {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      padding: 0.5rem 1rem;
+      background: var(--color-primary);
+      color: white;
+      border: none;
+      border-radius: 0.5rem;
+      cursor: pointer;
+      font-weight: 600;
+    }
+  </style>
+</head>
+<body>
+  <button class="toggle-dark" onclick="document.documentElement.classList.toggle('dark')">Toggle Dark</button>
+  
+  <div class="test-container">
+    <h1>Tools UI Redesign - Compact Grid Layout</h1>
+    <div class="description">
+      This test page demonstrates the new compact single-card tools UI with integrated voice controls.
+      The tools are arranged in a responsive 2x2 grid that adapts to smaller screens.
+    </div>
+    
+    <div class="demo-section">
+      <div class="section-title">New Features</div>
+      <div class="feature-list">
+        <div class="feature-item">
+          <strong>Compact Grid</strong><br>
+          All 4 tools fit in a 2x2 grid that's responsive
+        </div>
+        <div class="feature-item">
+          <strong>Integrated Voice</strong><br>
+          Auto-speak toggle and voice selector in header
+        </div>
+        <div class="feature-item">
+          <strong>Efficient Sizing</strong><br>
+          Tool cards ~120px height, optimized buttons
+        </div>
+        <div class="feature-item">
+          <strong>Responsive Design</strong><br>
+          Adapts from 2 columns to 1 on mobile
+        </div>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <div class="section-title">Live Preview</div>
+      <div style="display: flex; gap: 20px; margin-bottom: 30px; flex-wrap: wrap;">
+        <div>
+          <div class="size-label">Desktop (600px)</div>
+          <div class="tools-popup-content">
+            <div class="tools-popup-header">
+              <div style="display: flex; align-items: center; gap: 0.75rem; flex: 1;">
+                <h2 style="margin: 0; font-size: 1rem;">Tools & Extensions</h2>
+              </div>
+              <div class="tools-popup-header-controls">
+                <label class="tools-voice-toggle">
+                  <input type="checkbox" checked>
+                  <span>Auto-speak</span>
+                </label>
+                <select class="tools-voice-selector">
+                  <option>Voice</option>
+                  <option>en-US</option>
+                </select>
+                <button style="background: none; border: none; color: var(--color-text-secondary); font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1;">×</button>
+              </div>
+            </div>
+            <div class="tools-popup-scroll">
+              <div class="tool-item">
+                <div style="display: flex; flex-direction: column; gap: 0.3rem;">
+                  <div class="tool-header">
+                    <span class="tool-name">gm-cc</span>
+                  </div>
+                  <div class="tool-status-indicator installed">
+                    <span class="tool-status-dot"></span>
+                    <span>Up-to-date</span>
+                  </div>
+                  <div class="tool-versions">
+                    <span class="tool-version-item">v1.2.5</span>
+                  </div>
+                </div>
+                <div class="tool-actions">
+                  <button class="tool-btn tool-btn-primary">✓</button>
+                </div>
+              </div>
+              
+              <div class="tool-item">
+                <div style="display: flex; flex-direction: column; gap: 0.3rem;">
+                  <div class="tool-header">
+                    <span class="tool-name">gm-oc</span>
+                  </div>
+                  <div class="tool-status-indicator needs_update">
+                    <span class="tool-status-dot"></span>
+                    <span>Update avail</span>
+                  </div>
+                  <div class="tool-versions">
+                    <span class="tool-version-item">v1.0.2</span>
+                    <span class="tool-version-item">(v1.0.3 available)</span>
+                  </div>
+                </div>
+                <div class="tool-actions">
+                  <button class="tool-btn tool-btn-primary">Update</button>
+                </div>
+              </div>
+              
+              <div class="tool-item">
+                <div style="display: flex; flex-direction: column; gap: 0.3rem;">
+                  <div class="tool-header">
+                    <span class="tool-name">gm-gc</span>
+                  </div>
+                  <div class="tool-status-indicator installed">
+                    <span class="tool-status-dot"></span>
+                    <span>Up-to-date</span>
+                  </div>
+                  <div class="tool-versions">
+                    <span class="tool-version-item">v2.1.0</span>
+                  </div>
+                </div>
+                <div class="tool-actions">
+                  <button class="tool-btn tool-btn-primary">✓</button>
+                </div>
+              </div>
+              
+              <div class="tool-item">
+                <div style="display: flex; flex-direction: column; gap: 0.3rem;">
+                  <div class="tool-header">
+                    <span class="tool-name">gm-kilo</span>
+                  </div>
+                  <div class="tool-status-indicator not_installed">
+                    <span class="tool-status-dot"></span>
+                    <span>Not instal</span>
+                  </div>
+                  <div class="tool-versions">
+                  </div>
+                </div>
+                <div class="tool-actions">
+                  <button class="tool-btn tool-btn-primary">Install</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div>
+          <div class="size-label">Installing State</div>
+          <div class="tools-popup-content" style="max-width: 300px;">
+            <div class="tools-popup-header">
+              <h2 style="margin: 0; font-size: 1rem;">Tools & Extensions</h2>
+              <button style="background: none; border: none; color: var(--color-text-secondary); font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1;">×</button>
+            </div>
+            <div class="tools-popup-scroll">
+              <div class="tool-item">
+                <div style="display: flex; flex-direction: column; gap: 0.3rem;">
+                  <div class="tool-header">
+                    <span class="tool-name">gm-kilo</span>
+                  </div>
+                  <div class="tool-status-indicator" style="background: rgba(59, 130, 246, 0.15); color: #3b82f6;">
+                    <span class="tool-status-dot"></span>
+                    <span>Installing</span>
+                  </div>
+                </div>
+                <div class="tool-actions">
+                  <button class="tool-btn tool-btn-primary" disabled>Installing</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <div class="section-title">Size Comparison</div>
+      <div class="size-demo">
+        <div class="size-demo-item">
+          <div class="size-label">Tool Card Height</div>
+          <div style="font-size: 0.9rem; font-weight: 600; color: var(--color-primary);">120px min</div>
+        </div>
+        <div class="size-demo-item">
+          <div class="size-label">Tool Item Padding</div>
+          <div style="font-size: 0.9rem; font-weight: 600; color: var(--color-primary);">0.75rem</div>
+        </div>
+        <div class="size-demo-item">
+          <div class="size-label">Button Height</div>
+          <div style="font-size: 0.9rem; font-weight: 600; color: var(--color-primary);">28px</div>
+        </div>
+        <div class="size-demo-item">
+          <div class="size-label">Grid Gap</div>
+          <div style="font-size: 0.9rem; font-weight: 600; color: var(--color-primary);">1rem</div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <div class="section-title">Responsive Behavior</div>
+      <div class="feature-list">
+        <div class="feature-item">
+          <strong>Desktop (&gt;768px)</strong><br>
+          2x2 grid with 200px min-width per column
+        </div>
+        <div class="feature-item">
+          <strong>Tablet (481-768px)</strong><br>
+          Auto-fit with 150px min-width columns
+        </div>
+        <div class="feature-item">
+          <strong>Mobile (&lt;480px)</strong><br>
+          Single column layout, full width
+        </div>
+        <div class="feature-item">
+          <strong>Header on Mobile</strong><br>
+          Flex-direction column for better spacing
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>