agentgui 1.0.524 → 1.0.526

package/lib/tool-manager.js

@@ -5,10 +5,10 @@ import path from 'path';
 
 const isWindows = os.platform() === 'win32';
 const TOOLS = [
-  { id: 'gm-oc', name: 'gm-oc', pkg: 'gm-oc', pluginId: 'gm-oc' },
-  { id: 'gm-gc', name: 'gm-gc', pkg: 'gm-gc', pluginId: 'gm' },
-  { id: 'gm-kilo', name: 'gm-kilo', pkg: 'gm-kilo', pluginId: 'gm-kilo' },
-  { id: 'gm-cc', name: 'gm-cc', pkg: 'gm-cc', pluginId: 'gm-cc' },
+  { id: 'gm-cc', name: 'gm-cc', pkg: '@anthropic-ai/claude-code', pluginId: 'gm-cc' },
+  { id: 'gm-oc', name: 'gm-oc', pkg: 'opencode-ai', pluginId: 'gm-oc' },
+  { id: 'gm-gc', name: 'gm-gc', pkg: '@google/gemini-cli', pluginId: 'gm' },
+  { id: 'gm-kilo', name: 'gm-kilo', pkg: '@kilocode/cli', pluginId: 'gm-kilo' },
 ];
 
 const statusCache = new Map();

package/package.json

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

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,62 @@
       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;
+
+    // Load saved preferences
+    var savedAutoSpeak = localStorage.getItem('toolsAutoSpeak') === 'true';
+    var savedVoice = localStorage.getItem('toolsVoice') || 'default';
+
+    autoSpeakToggle.checked = savedAutoSpeak;
+    voiceSelector.value = savedVoice;
+
+    // Listen for voice list updates
+    window.addEventListener('ws-message', function(e) {
+      var data = e.detail;
+      if (data && data.type === 'voice_list') {
+        updateVoiceSelector(data.voices);
+      }
+    });
+
+    // Save preferences on change
+    autoSpeakToggle.addEventListener('change', function() {
+      localStorage.setItem('toolsAutoSpeak', this.checked);
+    });
+
+    voiceSelector.addEventListener('change', function() {
+      localStorage.setItem('toolsVoice', this.value);
+    });
+  }
+
+  function updateVoiceSelector(voices) {
+    var voiceSelector = document.getElementById('toolsVoiceSelector');
+    if (!voiceSelector || !voices || !Array.isArray(voices)) return;
+
+    var currentValue = voiceSelector.value;
+    voiceSelector.innerHTML = '<option value="default">Voice</option>';
+
+    voices.forEach(function(voice) {
+      var option = document.createElement('option');
+      option.value = voice;
+      option.textContent = voice;
+      voiceSelector.appendChild(option);
+    });
+
+    if (voices.includes(currentValue)) {
+      voiceSelector.value = currentValue;
+    }
+  }
+
   function refresh() {
     fetchTools();
   }
@@ -200,42 +253,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 +295,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 +358,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/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>