agentgui 1.0.727 → 1.0.728

package/package.json

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

package/static/js/client.js

@@ -880,58 +880,7 @@ class AgentGUIClient {
             }));
             const userMsgs = (fullData.messages || []).filter(m => m.role === 'user');
             if (priorChunks.length > 0) {
-              const sessionOrder = [];
-              const sessionGroups = {};
-              priorChunks.forEach(c => {
-                if (!sessionGroups[c.sessionId]) { sessionGroups[c.sessionId] = []; sessionOrder.push(c.sessionId); }
-                sessionGroups[c.sessionId].push(c);
-              });
-              const priorFrag = document.createDocumentFragment();
-              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++];
-                  const uDiv = document.createElement('div');
-                  uDiv.className = 'message message-user';
-                  uDiv.setAttribute('data-msg-id', m.id);
-                  uDiv.innerHTML = `<div class="message-role">User</div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div>`;
-                  priorFrag.appendChild(uDiv);
-                }
-                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');
-                const bFrag = document.createDocumentFragment();
-                sList.forEach(chunk => {
-                  if (!chunk.block?.type) return;
-                  if (chunk.block.type === 'tool_result') {
-                    const lastInFrag = bFrag.lastElementChild;
-                    if (lastInFrag?.classList?.contains('block-tool-use')) {
-                      this.renderer.mergeResultIntoToolUse(lastInFrag, chunk.block);
-                      return;
-                    }
-                  }
-                  const el = this.renderer.renderBlock(chunk.block, chunk, bFrag);
-                  if (!el) return;
-                  bFrag.appendChild(el);
-                });
-                bEl.appendChild(bFrag);
-                const ts = document.createElement('div'); ts.className = 'message-timestamp'; ts.textContent = new Date(sList[sList.length - 1].created_at).toLocaleString();
-                mDiv.appendChild(ts);
-                priorFrag.appendChild(mDiv);
-              });
-              while (ui < userMsgs.length) {
-                const m = userMsgs[ui++];
-                const uDiv = document.createElement('div');
-                uDiv.className = 'message message-user';
-                uDiv.setAttribute('data-msg-id', m.id);
-                uDiv.innerHTML = `<div class="message-role">User</div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div>`;
-                priorFrag.appendChild(uDiv);
-              }
-              messagesEl.appendChild(priorFrag);
+              this._renderConversationContent(messagesEl, priorChunks, userMsgs, null);
             } else {
               messagesEl.appendChild(this.renderMessagesFragment(fullData.messages || []));
             }
@@ -955,7 +904,6 @@ class AgentGUIClient {
         `;
         messagesEl.appendChild(streamingDiv);
       } else {
-        // Reuse existing div - ensure streaming class and single indicator
         streamingDiv.classList.add('streaming-message');
         streamingDiv.querySelectorAll('.streaming-indicator').forEach(ind => ind.remove());
         const indDiv = document.createElement('div');
@@ -2130,12 +2078,75 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Render a single chunk to the output
-   */
+  _renderConversationContent(messagesContainer, chunks, userMessages, activeSessionId) {
+    if (!chunks || chunks.length === 0) return;
+    const sessionMap = new Map();
+    for (const chunk of chunks) {
+      if (!sessionMap.has(chunk.sessionId)) sessionMap.set(chunk.sessionId, []);
+      sessionMap.get(chunk.sessionId).push(chunk);
+    }
+    const frag = document.createDocumentFragment();
+    let ui = 0;
+    for (const [sid, list] of sessionMap) {
+      const sessionStart = list[0].created_at;
+      while (ui < userMessages.length && userMessages[ui].created_at <= sessionStart) {
+        const m = userMessages[ui++];
+        const uDiv = document.createElement('div');
+        uDiv.className = 'message message-user';
+        uDiv.setAttribute('data-msg-id', m.id);
+        uDiv.innerHTML = `<div class="message-role">User</div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div>`;
+        frag.appendChild(uDiv);
+      }
+      const isActive = sid === activeSessionId;
+      const msgDiv = document.createElement('div');
+      msgDiv.className = `message message-assistant${isActive ? ' streaming-message' : ''}`;
+      msgDiv.id = isActive ? `streaming-${sid}` : `message-${sid}`;
+      msgDiv.innerHTML = '<div class="message-role">Assistant</div><div class="message-blocks streaming-blocks"></div>';
+      const blocksEl = msgDiv.querySelector('.message-blocks');
+      const blockFrag = document.createDocumentFragment();
+      const deferred = [];
+      for (const chunk of list) {
+        if (!chunk.block?.type) continue;
+        if (chunk.block.type === 'tool_result') { deferred.push(chunk); continue; }
+        const el = this.renderer.renderBlock(chunk.block, chunk, blockFrag);
+        if (!el) continue;
+        el.classList.add('block-loaded');
+        blockFrag.appendChild(el);
+      }
+      blocksEl.appendChild(blockFrag);
+      for (const chunk of deferred) {
+        const tid = chunk.block.tool_use_id;
+        const toolUseEl = (tid ? blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`) : null)
+          || (blocksEl.lastElementChild?.classList.contains('block-tool-use') ? blocksEl.lastElementChild : null);
+        if (toolUseEl) this.renderer.mergeResultIntoToolUse(toolUseEl, chunk.block);
+      }
+      if (isActive) {
+        const ind = document.createElement('div');
+        ind.className = 'streaming-indicator';
+        ind.style = 'display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;';
+        ind.innerHTML = '<span class="animate-spin" style="display:inline-block;width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;"></span><span class="streaming-indicator-label">Processing...</span>';
+        msgDiv.appendChild(ind);
+      } else {
+        const ts = document.createElement('div');
+        ts.className = 'message-timestamp';
+        ts.textContent = new Date(list[list.length - 1].created_at).toLocaleString();
+        msgDiv.appendChild(ts);
+      }
+      frag.appendChild(msgDiv);
+    }
+    while (ui < userMessages.length) {
+      const m = userMessages[ui++];
+      const uDiv = document.createElement('div');
+      uDiv.className = 'message message-user';
+      uDiv.setAttribute('data-msg-id', m.id);
+      uDiv.innerHTML = `<div class="message-role">User</div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div>`;
+      frag.appendChild(uDiv);
+    }
+    messagesContainer.appendChild(frag);
+  }
+
   renderChunk(chunk) {
     if (!chunk || !chunk.block) return;
-    // Deduplicate: skip if already rendered via WebSocket streaming_progress
     const seq = chunk.sequence;
     if (seq !== undefined) {
       const seen = (this._renderedSeqs = this._renderedSeqs || {})[chunk.sessionId] || (this._renderedSeqs[chunk.sessionId] = new Set());
@@ -2847,103 +2858,8 @@ class AgentGUIClient {
         }
 
         if (chunks.length > 0) {
-          const sessionOrder = [];
-          const sessionChunks = {};
-          chunks.forEach(chunk => {
-            if (!sessionChunks[chunk.sessionId]) {
-              sessionChunks[chunk.sessionId] = [];
-              sessionOrder.push(chunk.sessionId);
-            }
-            sessionChunks[chunk.sessionId].push(chunk);
-          });
-
-          const frag = document.createDocumentFragment();
-          let userMsgIdx = 0;
-
-          sessionOrder.forEach((sessionId) => {
-            const sessionChunkList = sessionChunks[sessionId];
-            const sessionStart = sessionChunkList[0].created_at;
-
-            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>
-              `;
-              frag.appendChild(userDiv);
-              userMsgIdx++;
-            }
-
-            const isCurrentActiveSession = shouldResumeStreaming && latestSession && latestSession.id === sessionId;
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `message message-assistant${isCurrentActiveSession ? ' streaming-message' : ''}`;
-            messageDiv.id = isCurrentActiveSession ? `streaming-${sessionId}` : `message-${sessionId}`;
-            messageDiv.innerHTML = '<div class="message-role">Assistant</div><div class="message-blocks streaming-blocks"></div>';
-
-            const blocksEl = messageDiv.querySelector('.message-blocks');
-            const blockFrag = document.createDocumentFragment();
-            const toolResultBlocks = new Map();
-
-            sessionChunkList.forEach(chunk => {
-              if (!chunk.block?.type) return;
-              if (chunk.block.type === 'tool_result') {
-                toolResultBlocks.set(chunk.id, chunk);
-                return;
-              }
-              const element = this.renderer.renderBlock(chunk.block, chunk, blockFrag);
-              if (!element) return;
-              element.classList.add('block-loaded');
-              blockFrag.appendChild(element);
-            });
-
-            blocksEl.appendChild(blockFrag);
-
-            toolResultBlocks.forEach((chunk) => {
-              const toolUseId = chunk.block.tool_use_id;
-              const toolUseEl = toolUseId
-                ? blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${toolUseId}"]`)
-                : blocksEl.lastElementChild?.classList?.contains('block-type-tool_use') ? blocksEl.lastElementChild : null;
-              if (!toolUseEl) return;
-              this.renderer.mergeResultIntoToolUse(toolUseEl, chunk.block);
-            });
-
-            if (isCurrentActiveSession) {
-              const indicatorDiv = document.createElement('div');
-              indicatorDiv.className = 'streaming-indicator';
-              indicatorDiv.style = 'display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;';
-              indicatorDiv.innerHTML = `
-                <span class="animate-spin" style="display:inline-block;width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;"></span>
-                <span class="streaming-indicator-label">Processing...</span>
-              `;
-              messageDiv.appendChild(indicatorDiv);
-            } else {
-              const ts = document.createElement('div');
-              ts.className = 'message-timestamp';
-              ts.textContent = new Date(sessionChunkList[sessionChunkList.length - 1].created_at).toLocaleString();
-              messageDiv.appendChild(ts);
-            }
-
-            frag.appendChild(messageDiv);
-          });
-
-          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>
-            `;
-            frag.appendChild(userDiv);
-            userMsgIdx++;
-          }
-          if (!convSignal.aborted) messagesEl.appendChild(frag);
+          const activeSessionId = (shouldResumeStreaming && latestSession) ? latestSession.id : null;
+          if (!convSignal.aborted) this._renderConversationContent(messagesEl, chunks, userMessages, activeSessionId);
         } else {
           if (!convSignal.aborted) messagesEl.appendChild(this.renderMessagesFragment(allMessages || []));
         }