agentgui 1.0.138 → 1.0.140

package/package.json

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

package/static/index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <meta name="description" content="AgentGUI - Real-time Claude Code Execution Visualization">
   <title>AgentGUI</title>
-  <link rel="icon" type="image/svg+xml" href="/favicon.ico">
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%233b82f6'/%3E%3Ctext x='50' y='68' font-size='50' font-family='sans-serif' font-weight='bold' fill='white' text-anchor='middle'%3EG%3C/text%3E%3C/svg%3E">
 
   <link href="https://cdn.jsdelivr.net/npm/rippleui@1.12.1/dist/css/styles.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-dark.css" rel="stylesheet">
@@ -1511,6 +1511,13 @@
     html.dark .block-tool-result.result-success .result-body { color: #bbf7d0; }
     html.dark .block-tool-result.result-error .result-body { color: #fecaca; }
 
+    .result-collapsible { margin: 0; }
+    .result-collapsible > summary { list-style: none; }
+    .result-collapsible > summary::-webkit-details-marker { display: none; }
+    .result-collapsible > summary::marker { display: none; content: ''; }
+    .result-collapsible > summary .status-label::before { content: '\25b6'; font-size: 0.6rem; margin-right: 0.375rem; display: inline-block; transition: transform 0.15s; }
+    .result-collapsible[open] > summary .status-label::before { transform: rotate(90deg); }
+
     .block-tool-result .result-body.collapsed { max-height: 150px; position: relative; }
     .block-tool-result .result-body.collapsed::after {
       content: '';

package/static/js/client.js

@@ -223,7 +223,6 @@ class AgentGUIClient {
       const position = scrollContainer.scrollTop;
       try {
         localStorage.setItem(`scroll_${conversationId}`, position.toString());
-        console.log(`Saved scroll position for ${conversationId}: ${position}`);
       } catch (e) {
         console.warn('Failed to save scroll position:', e);
       }
@@ -245,7 +244,6 @@ class AgentGUIClient {
         if (scrollContainer && !isNaN(scrollTop)) {
           requestAnimationFrame(() => {
             scrollContainer.scrollTop = scrollTop;
-            console.log(`Restored scroll position for ${conversationId}: ${scrollTop}`);
           });
         }
       }
@@ -985,7 +983,6 @@ class AgentGUIClient {
     }
 
     pollState.isPolling = false;
-    console.log('Stopped chunk polling');
   }
 
   /**
@@ -1073,7 +1070,6 @@ class AgentGUIClient {
    */
   disableControls() {
     if (this.ui.sendButton) this.ui.sendButton.disabled = true;
-    if (this.ui.messageInput) this.ui.messageInput.disabled = true;
     if (this.ui.agentSelector) this.ui.agentSelector.disabled = true;
   }
 
@@ -1082,7 +1078,6 @@ class AgentGUIClient {
    */
   enableControls() {
     if (this.ui.sendButton) this.ui.sendButton.disabled = false;
-    if (this.ui.messageInput) this.ui.messageInput.disabled = false;
     if (this.ui.agentSelector) this.ui.agentSelector.disabled = false;
   }
 

package/static/js/streaming-renderer.js

@@ -76,48 +76,18 @@ class StreamingRenderer {
    * Setup DOM mutation observer for external changes
    */
   setupDOMObserver() {
-    try {
-      this.observer = new MutationObserver(() => {
-        this.updateDOMNodeCount();
-      });
-
-      this.observer.observe(this.outputContainer, {
-        childList: true,
-        subtree: true,
-        characterData: false,
-        attributes: false
-      });
-    } catch (e) {
-      console.warn('DOM observer setup failed:', e.message);
-    }
   }
 
   /**
    * Setup resize observer for viewport changes
    */
   setupResizeObserver() {
-    try {
-      this.resizeObserver = new ResizeObserver(() => {
-        this.updateVirtualScroll();
-      });
-
-      if (this.scrollContainer) {
-        this.resizeObserver.observe(this.scrollContainer);
-      }
-    } catch (e) {
-      console.warn('Resize observer setup failed:', e.message);
-    }
   }
 
   /**
    * Setup scroll optimization and auto-scroll
    */
   setupScrollOptimization() {
-    if (this.scrollContainer) {
-      this.scrollContainer.addEventListener('scroll', () => {
-        this.updateVirtualScroll();
-      }, { passive: true });
-    }
   }
 
   /**
@@ -1076,13 +1046,27 @@ class StreamingRenderer {
       ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
       : '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
 
-    div.innerHTML = `
-      <div class="result-header">
-        <span class="status-label">${iconSvg} ${isError ? 'Error' : 'Success'}</span>
-        ${toolUseId ? `<span class="result-id">${this.escapeHtml(toolUseId)}</span>` : ''}
-      </div>
-      ${StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this))}
-    `;
+    const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this));
+
+    if (isError) {
+      div.innerHTML = `
+        <div class="result-header">
+          <span class="status-label">${iconSvg} Error</span>
+          ${toolUseId ? `<span class="result-id">${this.escapeHtml(toolUseId)}</span>` : ''}
+        </div>
+        ${renderedContent}
+      `;
+    } else {
+      div.innerHTML = `
+        <details class="result-collapsible">
+          <summary class="result-header" style="cursor:pointer;list-style:none;user-select:none">
+            <span class="status-label">${iconSvg} Success</span>
+            ${toolUseId ? `<span class="result-id">${this.escapeHtml(toolUseId)}</span>` : ''}
+          </summary>
+          <div class="result-collapsible-body">${renderedContent}</div>
+        </details>
+      `;
+    }
 
     return div;
   }
@@ -1697,28 +1681,7 @@ class StreamingRenderer {
     }
   }
 
-  /**
-   * Update virtual scroll based on viewport
-   */
   updateVirtualScroll() {
-    if (!this.scrollContainer) return;
-
-    // Calculate visible items
-    const scrollTop = this.scrollContainer.scrollTop;
-    const viewportHeight = this.scrollContainer.clientHeight;
-    const itemHeight = 80; // Approximate item height
-
-    const firstVisible = Math.floor(scrollTop / itemHeight);
-    const lastVisible = Math.ceil((scrollTop + viewportHeight) / itemHeight);
-
-    // Update visibility of DOM nodes
-    const items = this.outputContainer?.querySelectorAll('[data-event-id]');
-    if (!items) return;
-
-    items.forEach((item, index) => {
-      const isVisible = index >= firstVisible && index <= lastVisible;
-      item.style.display = isVisible ? '' : 'none';
-    });
   }
 
   /**

package/static/js/voice.js

@@ -1,7 +1,19 @@
-import { STT, TTS } from 'webtalk-sdk';
-
 (function() {
   const BASE = window.__BASE_URL || '';
+  let STT = null;
+  let TTS = null;
+
+  async function loadSDK() {
+    try {
+      const mod = await import(BASE + '/webtalk/sdk.js');
+      STT = mod.STT;
+      TTS = mod.TTS;
+      return true;
+    } catch (e) {
+      console.warn('Webtalk SDK load failed:', e.message);
+      return false;
+    }
+  }
   let stt = null;
   let tts = null;
   let isRecording = false;
@@ -19,8 +31,14 @@ import { STT, TTS } from 'webtalk-sdk';
     setupUI();
     setupStreamingListener();
     setupAgentSelector();
-    initSTT();
-    initTTS();
+    var sdkLoaded = await loadSDK();
+    if (sdkLoaded) {
+      initSTT();
+      initTTS();
+    } else {
+      sttLoadPhase = 'failed';
+      updateMicState();
+    }
   }
 
   var sttLoadPhase = 'starting';