agentgui 1.0.150 → 1.0.152

package/static/index.html

@@ -7,10 +7,14 @@
   <title>AgentGUI</title>
   <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 rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+  <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
   <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">
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css" rel="stylesheet">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
+  <link rel="preload" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-dark.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript><link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-dark.css" rel="stylesheet"></noscript>
+  <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css" rel="stylesheet"></noscript>
+  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
 
   <style>
     *, *::before, *::after { box-sizing: border-box; }
@@ -1158,6 +1162,19 @@
       font-size: 0.9rem;
     }
 
+    .block-text + .block-text {
+      margin-top: -0.75rem;
+      padding-top: 0;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    .block-text:has(+ .block-text) {
+      margin-bottom: 0;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
     .block-code {
       margin-bottom: 0.75rem;
       border-radius: 0.5rem;
@@ -2060,16 +2077,16 @@
     </div>
   </div>
 
-  <script src="/gm/js/event-processor.js"></script>
-  <script src="/gm/js/streaming-renderer.js"></script>
-  <script src="/gm/js/websocket-manager.js"></script>
-  <script src="/gm/js/event-filter.js"></script>
-  <script src="/gm/js/syntax-highlighter.js"></script>
-  <script src="/gm/js/ui-components.js"></script>
-  <script src="/gm/js/conversations.js"></script>
-  <script src="/gm/js/client.js"></script>
+  <script defer src="/gm/js/event-processor.js"></script>
+  <script defer src="/gm/js/streaming-renderer.js"></script>
+  <script defer src="/gm/js/websocket-manager.js"></script>
+  <script defer src="/gm/js/event-filter.js"></script>
+  <script defer src="/gm/js/syntax-highlighter.js"></script>
+  <script defer src="/gm/js/ui-components.js"></script>
+  <script defer src="/gm/js/conversations.js"></script>
+  <script defer src="/gm/js/client.js"></script>
   <script type="module" src="/gm/js/voice.js"></script>
-  <script src="/gm/js/features.js"></script>
+  <script defer src="/gm/js/features.js"></script>
 
   <script>
     const savedTheme = localStorage.getItem('theme') || 'light';

package/static/js/client.js

@@ -544,12 +544,13 @@ class AgentGUIClient {
   }
 
   scrollToBottom() {
-    const scrollContainer = document.getElementById('output-scroll');
-    if (scrollContainer) {
-      requestAnimationFrame(() => {
-        scrollContainer.scrollTop = scrollContainer.scrollHeight;
-      });
-    }
+    if (this._scrollRafPending) return;
+    this._scrollRafPending = true;
+    requestAnimationFrame(() => {
+      this._scrollRafPending = false;
+      const scrollContainer = document.getElementById('output-scroll');
+      if (scrollContainer) scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    });
   }
 
   handleStreamingError(data) {

package/static/js/streaming-renderer.js

@@ -135,12 +135,17 @@ class StreamingRenderer {
     const lastTime = this.dedupMap.get(key);
     const now = Date.now();
 
-    // Deduplicate within 100ms window
     if (lastTime && (now - lastTime) < 100) {
       return true;
     }
 
     this.dedupMap.set(key, now);
+    if (this.dedupMap.size > 5000) {
+      const cutoff = now - 1000;
+      for (const [k, t] of this.dedupMap) {
+        if (t < cutoff) this.dedupMap.delete(k);
+      }
+    }
     return false;
   }
 
@@ -358,17 +363,25 @@ class StreamingRenderer {
    * Render text block with semantic HTML
    */
   renderBlockText(block, context) {
-    const div = document.createElement('div');
-    div.className = 'block-text';
-
     const text = block.text || '';
-    if (this.containsHtmlTags(text)) {
-      div.innerHTML = this.sanitizeHtml(text);
-      div.classList.add('html-content');
-    } else {
-      div.innerHTML = this.parseAndRenderMarkdown(text);
+    const isHtml = this.containsHtmlTags(text);
+    const cached = this.renderCache.get(text);
+    const html = cached || (isHtml ? this.sanitizeHtml(text) : this.parseAndRenderMarkdown(text));
+
+    if (!cached && this.renderCache.size < 2000) {
+      this.renderCache.set(text, html);
+    }
+
+    const lastChild = this.outputContainer && this.outputContainer.lastElementChild;
+    if (lastChild && lastChild.classList.contains('block-text') && !isHtml && !lastChild.classList.contains('html-content')) {
+      lastChild.innerHTML += html;
+      return null;
     }
 
+    const div = document.createElement('div');
+    div.className = 'block-text';
+    if (isHtml) div.classList.add('html-content');
+    div.innerHTML = html;
     return div;
   }
 
@@ -447,11 +460,9 @@ class StreamingRenderer {
 
     const preStyle = "background:#1e293b;padding:1rem;border-radius:0 0 0.375rem 0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:#e2e8f0;border:1px solid #334155;border-top:none;margin:0";
     const codeContainer = document.createElement('div');
+    codeContainer.innerHTML = `<pre style="${preStyle}"><code>${this.escapeHtml(code)}</code></pre>`;
     if (typeof hljs !== 'undefined') {
-      const result = hljs.highlightAuto(code);
-      codeContainer.innerHTML = `<pre style="${preStyle}"><code class="hljs">${result.value}</code></pre>`;
-    } else {
-      codeContainer.innerHTML = `<pre style="${preStyle}"><code>${this.escapeHtml(code)}</code></pre>`;
+      this.lazyHighlight(codeContainer, code);
     }
 
     details.appendChild(summary);
@@ -1785,13 +1796,39 @@ class StreamingRenderer {
    * Auto-scroll to bottom of container
    */
   autoScroll() {
-    if (this.scrollContainer) {
-      try {
-        this.scrollContainer.scrollTop = this.scrollContainer.scrollHeight;
-      } catch (e) {
-        // Ignore scroll errors
+    if (this._scrollRafPending) return;
+    this._scrollRafPending = true;
+    requestAnimationFrame(() => {
+      this._scrollRafPending = false;
+      if (this.scrollContainer) {
+        try { this.scrollContainer.scrollTop = this.scrollContainer.scrollHeight; } catch (_) {}
       }
+    });
+  }
+
+  lazyHighlight(container, code) {
+    if (!this._hlObserver) {
+      this._hlObserver = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+          const el = entry.target;
+          const raw = el._rawCode;
+          if (!raw) continue;
+          this._hlObserver.unobserve(el);
+          try {
+            const codeEl = el.querySelector('code');
+            if (codeEl && typeof hljs !== 'undefined') {
+              const result = hljs.highlightAuto(raw);
+              codeEl.classList.add('hljs');
+              codeEl.innerHTML = result.value;
+            }
+          } catch (_) {}
+          delete el._rawCode;
+        }
+      }, { rootMargin: '200px' });
     }
+    container._rawCode = code;
+    this._hlObserver.observe(container);
   }
 
   updateVirtualScroll() {

package/static/js/websocket-manager.js

@@ -137,26 +137,23 @@ class WebSocketManager {
    */
   onMessage(event) {
     try {
-      const data = JSON.parse(event.data);
-      this.stats.totalMessagesReceived++;
-
-      // Handle pong response
-      if (data.type === 'pong') {
-        const requestId = data.requestId;
-        if (requestId && this.requestMap.has(requestId)) {
-          const request = this.requestMap.get(requestId);
-          request.resolve({ latency: Date.now() - request.sentTime });
-          this.requestMap.delete(requestId);
+      const parsed = JSON.parse(event.data);
+      const messages = Array.isArray(parsed) ? parsed : [parsed];
+      this.stats.totalMessagesReceived += messages.length;
+
+      for (const data of messages) {
+        if (data.type === 'pong') {
+          const requestId = data.requestId;
+          if (requestId && this.requestMap.has(requestId)) {
+            const request = this.requestMap.get(requestId);
+            request.resolve({ latency: Date.now() - request.sentTime });
+            this.requestMap.delete(requestId);
+          }
+          continue;
         }
-        return;
-      }
-
-      // Route message to listeners
-      this.emit('message', data);
 
-      // Route by type
-      if (data.type) {
-        this.emit(`message:${data.type}`, data);
+        this.emit('message', data);
+        if (data.type) this.emit(`message:${data.type}`, data);
       }
     } catch (error) {
       console.error('WebSocket message parse error:', error);
@@ -234,15 +231,7 @@ class WebSocketManager {
    * Start heartbeat/keepalive
    */
   startHeartbeat() {
-    if (this.heartbeatTimer) {
-      clearTimeout(this.heartbeatTimer);
-    }
-
-    this.heartbeatTimer = setInterval(() => {
-      if (this.isConnected) {
-        this.ping();
-      }
-    }, this.config.heartbeatInterval);
+    if (this.heartbeatTimer) clearTimeout(this.heartbeatTimer);
   }
 
   /**