agentgui 1.0.139 → 1.0.141

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.139",
+  "version": "1.0.141",
   "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

@@ -348,7 +348,7 @@ class AgentGUIClient {
 
       switch (data.type) {
         case 'streaming_start':
-          this.handleStreamingStart(data);
+          this.handleStreamingStart(data).catch(e => console.error('handleStreamingStart error:', e));
           break;
         case 'streaming_progress':
           this.handleStreamingProgress(data);
@@ -388,7 +388,7 @@ class AgentGUIClient {
     }
   }
 
-  handleStreamingStart(data) {
+  async handleStreamingStart(data) {
     console.log('Streaming started:', data);
 
     // If this streaming event is for a different conversation than what we are viewing,
@@ -420,8 +420,60 @@ class AgentGUIClient {
     if (outputEl) {
       let messagesEl = outputEl.querySelector('.conversation-messages');
       if (!messagesEl) {
-        outputEl.innerHTML = '<div class="conversation-messages"></div>';
+        // Load existing conversation history before starting the stream
+        const conv = this.state.currentConversation;
+        const wdInfo = conv?.workingDirectory ? ` - ${this.escapeHtml(conv.workingDirectory)}` : '';
+        outputEl.innerHTML = `
+          <div class="conversation-header">
+            <h2>${this.escapeHtml(conv?.title || 'Conversation')}</h2>
+            <p class="text-secondary">${conv?.agentType || 'unknown'} - ${new Date(conv?.created_at || Date.now()).toLocaleDateString()}${wdInfo}</p>
+          </div>
+          <div class="conversation-messages"></div>
+        `;
         messagesEl = outputEl.querySelector('.conversation-messages');
+        // Load prior messages into the container
+        try {
+          const msgResp = await fetch(window.__BASE_URL + `/api/conversations/${data.conversationId}/messages`);
+          if (msgResp.ok) {
+            const msgData = await msgResp.json();
+            const priorChunks = await this.fetchChunks(data.conversationId, 0);
+            if (priorChunks.length > 0) {
+              const userMsgs = (msgData.messages || []).filter(m => m.role === 'user');
+              const sessionOrder = [];
+              const sessionGroups = {};
+              priorChunks.forEach(c => {
+                if (!sessionGroups[c.sessionId]) { sessionGroups[c.sessionId] = []; sessionOrder.push(c.sessionId); }
+                sessionGroups[c.sessionId].push(c);
+              });
+              let ui = 0;
+              sessionOrder.forEach(sid => {
+                const sList = sessionGroups[sid];
+                const sStart = sList[0].created_at;
+                while (ui < userMsgs.length && userMsgs[ui].created_at <= sStart) {
+                  const m = userMsgs[ui++];
+                  messagesEl.insertAdjacentHTML('beforeend', `<div class="message message-user" data-msg-id="${m.id}"><div class="message-role">User</div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div></div>`);
+                }
+                const mDiv = document.createElement('div');
+                mDiv.className = 'message message-assistant';
+                mDiv.id = `message-${sid}`;
+                mDiv.innerHTML = '<div class="message-role">Assistant</div><div class="message-blocks streaming-blocks"></div>';
+                const bEl = mDiv.querySelector('.message-blocks');
+                sList.forEach(chunk => { if (chunk.block?.type) { const el = this.renderer.renderBlock(chunk.block, chunk); if (el) bEl.appendChild(el); } });
+                const ts = document.createElement('div'); ts.className = 'message-timestamp'; ts.textContent = new Date(sList[sList.length - 1].created_at).toLocaleString();
+                mDiv.appendChild(ts);
+                messagesEl.appendChild(mDiv);
+              });
+              while (ui < userMsgs.length) {
+                const m = userMsgs[ui++];
+                messagesEl.insertAdjacentHTML('beforeend', `<div class="message message-user" data-msg-id="${m.id}"><div class="message-role">User</div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div></div>`);
+              }
+            } else {
+              messagesEl.innerHTML = this.renderMessages(msgData.messages || []);
+            }
+          }
+        } catch (e) {
+          console.warn('Failed to load prior messages for streaming view:', e);
+        }
       }
       const streamingDiv = document.createElement('div');
       streamingDiv.className = 'message message-assistant streaming-message';
@@ -1181,17 +1233,48 @@ class AgentGUIClient {
           // Render all chunks
           const messagesEl = outputEl.querySelector('.conversation-messages');
           if (chunks.length > 0) {
-            // Group chunks by session
+            // Fetch user messages to interleave with session chunks
+            let userMessages = [];
+            try {
+              const msgResp = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/messages`);
+              if (msgResp.ok) {
+                const msgData = await msgResp.json();
+                userMessages = (msgData.messages || []).filter(m => m.role === 'user');
+              }
+            } catch (_) {}
+
+            // Group chunks by session, preserving order
+            const sessionOrder = [];
             const sessionChunks = {};
             chunks.forEach(chunk => {
               if (!sessionChunks[chunk.sessionId]) {
                 sessionChunks[chunk.sessionId] = [];
+                sessionOrder.push(chunk.sessionId);
               }
               sessionChunks[chunk.sessionId].push(chunk);
             });
 
-            // Render each session's chunks
-            Object.entries(sessionChunks).forEach(([sessionId, sessionChunkList]) => {
+            // Build a timeline: match user messages to sessions by timestamp
+            let userMsgIdx = 0;
+            sessionOrder.forEach((sessionId) => {
+              const sessionChunkList = sessionChunks[sessionId];
+              const sessionStart = sessionChunkList[0].created_at;
+
+              // Render user messages that came before this session
+              while (userMsgIdx < userMessages.length && userMessages[userMsgIdx].created_at <= sessionStart) {
+                const msg = userMessages[userMsgIdx];
+                const userDiv = document.createElement('div');
+                userDiv.className = 'message message-user';
+                userDiv.setAttribute('data-msg-id', msg.id);
+                userDiv.innerHTML = `
+                  <div class="message-role">User</div>
+                  ${this.renderMessageContent(msg.content)}
+                  <div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>
+                `;
+                messagesEl.appendChild(userDiv);
+                userMsgIdx++;
+              }
+
               const isCurrentActiveSession = shouldResumeStreaming && latestSession && latestSession.id === sessionId;
               const messageDiv = document.createElement('div');
               messageDiv.className = `message message-assistant${isCurrentActiveSession ? ' streaming-message' : ''}`;
@@ -1208,7 +1291,6 @@ class AgentGUIClient {
                 }
               });
 
-              // Add streaming indicator for active session
               if (isCurrentActiveSession) {
                 const indicatorDiv = document.createElement('div');
                 indicatorDiv.className = 'streaming-indicator';
@@ -1227,6 +1309,21 @@ class AgentGUIClient {
 
               messagesEl.appendChild(messageDiv);
             });
+
+            // Render any remaining user messages after the last session
+            while (userMsgIdx < userMessages.length) {
+              const msg = userMessages[userMsgIdx];
+              const userDiv = document.createElement('div');
+              userDiv.className = 'message message-user';
+              userDiv.setAttribute('data-msg-id', msg.id);
+              userDiv.innerHTML = `
+                <div class="message-role">User</div>
+                ${this.renderMessageContent(msg.content)}
+                <div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>
+              `;
+              messagesEl.appendChild(userDiv);
+              userMsgIdx++;
+            }
           } else {
             // Fall back to messages if no chunks
             const messagesResponse = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/messages`);

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';