agentgui 1.0.152 → 1.0.154

package/static/js/client.js

@@ -30,6 +30,10 @@ class AgentGUIClient {
       agents: []
     };
 
+    // Conversation DOM cache: store rendered DOM + scroll position per conversationId
+    this.conversationCache = new Map();
+    this.MAX_CACHE_SIZE = 10;
+
     // Event handlers
     this.eventHandlers = {};
 
@@ -368,6 +372,12 @@ class AgentGUIClient {
         case 'queue_status':
           this.handleQueueStatus(data);
           break;
+        case 'rate_limit_hit':
+          this.handleRateLimitHit(data);
+          break;
+        case 'rate_limit_clear':
+          this.handleRateLimitClear(data);
+          break;
         default:
           break;
       }
@@ -446,30 +456,42 @@ class AgentGUIClient {
                 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++];
-                  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 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');
-                sList.forEach(chunk => { if (chunk.block?.type) { const el = this.renderer.renderBlock(chunk.block, chunk); if (el) bEl.appendChild(el); } });
+                const bFrag = document.createDocumentFragment();
+                sList.forEach(chunk => { if (chunk.block?.type) { const el = this.renderer.renderBlock(chunk.block, chunk); if (el) 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);
-                messagesEl.appendChild(mDiv);
+                priorFrag.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>`);
+                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);
             } else {
-              messagesEl.innerHTML = this.renderMessages(fullData.messages || []);
+              messagesEl.appendChild(this.renderMessagesFragment(fullData.messages || []));
             }
           }
         } catch (e) {
@@ -587,8 +609,8 @@ class AgentGUIClient {
     console.log('Streaming completed:', data);
 
     const conversationId = data.conversationId || this.state.currentSession?.conversationId;
+    if (conversationId) this.invalidateCache(conversationId);
 
-    // If this event is for a conversation we are NOT currently viewing, just track state
     if (conversationId && this.state.currentConversation?.id !== conversationId) {
       console.log('Streaming completed for non-active conversation:', conversationId);
       this.emit('streaming:complete', data);
@@ -683,6 +705,37 @@ class AgentGUIClient {
     }
   }
 
+  handleRateLimitHit(data) {
+    if (data.conversationId !== this.state.currentConversation?.id) return;
+    this.state.isStreaming = false;
+    this.stopChunkPolling();
+
+    const sessionId = data.sessionId || this.state.currentSession?.id;
+    const streamingEl = document.getElementById(`streaming-${sessionId}`);
+    if (streamingEl) {
+      const indicator = streamingEl.querySelector('.streaming-indicator');
+      if (indicator) {
+        const retrySeconds = Math.ceil((data.retryAfterMs || 60000) / 1000);
+        indicator.innerHTML = `<span style="color:var(--color-warning);">Rate limited. Retrying in ${retrySeconds}s...</span>`;
+        let remaining = retrySeconds;
+        const countdownTimer = setInterval(() => {
+          remaining--;
+          if (remaining <= 0) {
+            clearInterval(countdownTimer);
+            indicator.innerHTML = '<span style="color:var(--color-info);">Restarting...</span>';
+          } else {
+            indicator.innerHTML = `<span style="color:var(--color-warning);">Rate limited. Retrying in ${remaining}s...</span>`;
+          }
+        }, 1000);
+      }
+    }
+  }
+
+  handleRateLimitClear(data) {
+    if (data.conversationId !== this.state.currentConversation?.id) return;
+    this.enableControls();
+  }
+
   isHtmlContent(text) {
     const htmlPattern = /<(?:div|table|section|article|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6]|p|blockquote|pre|code|span|strong|em|a|img|br|hr|li|td|tr|th|thead|tbody|tfoot)\b[^>]*>/i;
     return htmlPattern.test(text);
@@ -803,14 +856,11 @@ class AgentGUIClient {
               inputHtml = `<div class="folded-tool-body"><pre class="tool-input-pre">${this.escapeHtml(inputStr)}</pre></div>`;
             }
             const tn = block.name || 'unknown';
-            const foldable = tn.startsWith('mcp__') || tn === 'Edit';
-            if (foldable) {
-              const dName = typeof StreamingRenderer !== 'undefined' ? StreamingRenderer.getToolDisplayName(tn) : tn;
-              const tTitle = typeof StreamingRenderer !== 'undefined' && block.input ? StreamingRenderer.getToolTitle(tn, block.input) : '';
-              html += `<details class="streaming-block-tool-use folded-tool"><summary class="folded-tool-bar"><span class="folded-tool-name">${this.escapeHtml(dName)}</span>${tTitle ? `<span class="folded-tool-desc">${this.escapeHtml(tTitle)}</span>` : ''}</summary>${inputHtml}</details>`;
-            } else {
-              html += `<div class="streaming-block-tool-use"><div class="tool-use-header"><span class="tool-use-icon">&#9881;</span> <span class="tool-use-name">${this.escapeHtml(tn)}</span></div>${inputHtml}</div>`;
-            }
+            const hasRenderer = typeof StreamingRenderer !== 'undefined';
+            const dName = hasRenderer ? StreamingRenderer.getToolDisplayName(tn) : tn;
+            const tTitle = hasRenderer && block.input ? StreamingRenderer.getToolTitle(tn, block.input) : '';
+            const iconHtml = hasRenderer && this.renderer ? `<span class="folded-tool-icon">${this.renderer.getToolIcon(tn)}</span>` : '';
+            html += `<details class="folded-tool"><summary class="folded-tool-bar">${iconHtml}<span class="folded-tool-name">${this.escapeHtml(dName)}</span>${tTitle ? `<span class="folded-tool-desc">${this.escapeHtml(tTitle)}</span>` : ''}</summary>${inputHtml}</details>`;
           } else if (block.type === 'tool_result') {
             const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
             const smartHtml = typeof StreamingRenderer !== 'undefined' ? StreamingRenderer.renderSmartContentHTML(content, this.escapeHtml.bind(this)) : `<pre class="tool-result-pre">${this.escapeHtml(content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content)}</pre>`;
@@ -989,9 +1039,7 @@ class AgentGUIClient {
           pollState.backoffDelay = 150;
           const lastChunk = chunks[chunks.length - 1];
           pollState.lastFetchTimestamp = lastChunk.created_at;
-          chunks.forEach(chunk => {
-            if (chunk.block && chunk.block.type) this.renderChunk(chunk);
-          });
+          this.renderChunkBatch(chunks.filter(c => c.block && c.block.type));
         } else {
           pollState.backoffDelay = Math.min(pollState.backoffDelay + 50, 500);
         }
@@ -1035,23 +1083,44 @@ class AgentGUIClient {
    */
   renderChunk(chunk) {
     if (!chunk || !chunk.block) return;
-
-    const sessionId = chunk.sessionId;
-    const streamingEl = document.getElementById(`streaming-${sessionId}`);
+    const streamingEl = document.getElementById(`streaming-${chunk.sessionId}`);
     if (!streamingEl) return;
-
     const blocksEl = streamingEl.querySelector('.streaming-blocks');
     if (!blocksEl) return;
-
-    const block = chunk.block;
-    const element = this.renderer.renderBlock(block, chunk);
-
+    const element = this.renderer.renderBlock(chunk.block, chunk);
     if (element) {
       blocksEl.appendChild(element);
       this.scrollToBottom();
     }
   }
 
+  renderChunkBatch(chunks) {
+    if (!chunks.length) return;
+    const groups = {};
+    for (const chunk of chunks) {
+      const sid = chunk.sessionId;
+      if (!groups[sid]) groups[sid] = [];
+      groups[sid].push(chunk);
+    }
+    let appended = false;
+    for (const sid of Object.keys(groups)) {
+      const streamingEl = document.getElementById(`streaming-${sid}`);
+      if (!streamingEl) continue;
+      const blocksEl = streamingEl.querySelector('.streaming-blocks');
+      if (!blocksEl) continue;
+      const frag = document.createDocumentFragment();
+      for (const chunk of groups[sid]) {
+        const el = this.renderer.renderBlock(chunk.block, chunk);
+        if (el) frag.appendChild(el);
+      }
+      if (frag.childNodes.length) {
+        blocksEl.appendChild(frag);
+        appended = true;
+      }
+    }
+    if (appended) this.scrollToBottom();
+  }
+
   /**
    * Load agents
    */
@@ -1174,11 +1243,34 @@ class AgentGUIClient {
     }
   }
 
+  cacheCurrentConversation() {
+    const convId = this.state.currentConversation?.id;
+    if (!convId) return;
+    const outputEl = document.getElementById('output');
+    if (!outputEl || !outputEl.firstChild) return;
+    if (this.state.isStreaming) return;
+
+    this.saveScrollPosition(convId);
+    const clone = outputEl.cloneNode(true);
+    this.conversationCache.set(convId, {
+      dom: clone,
+      conversation: this.state.currentConversation,
+      timestamp: Date.now()
+    });
+
+    if (this.conversationCache.size > this.MAX_CACHE_SIZE) {
+      const oldest = this.conversationCache.keys().next().value;
+      this.conversationCache.delete(oldest);
+    }
+  }
+
+  invalidateCache(conversationId) {
+    this.conversationCache.delete(conversationId);
+  }
+
   async loadConversationMessages(conversationId) {
     try {
-      if (this.state.currentConversation?.id) {
-        this.saveScrollPosition(this.state.currentConversation.id);
-      }
+      this.cacheCurrentConversation();
       this.stopChunkPolling();
       if (this.state.isStreaming && this.state.currentConversation?.id !== conversationId) {
         this.state.isStreaming = false;
@@ -1190,9 +1282,27 @@ class AgentGUIClient {
         this.wsManager.sendMessage({ type: 'subscribe', conversationId });
       }
 
+      const cached = this.conversationCache.get(conversationId);
+      if (cached && (Date.now() - cached.timestamp) < 120000) {
+        const outputEl = document.getElementById('output');
+        if (outputEl) {
+          outputEl.innerHTML = '';
+          while (cached.dom.firstChild) {
+            outputEl.appendChild(cached.dom.firstChild);
+          }
+          this.state.currentConversation = cached.conversation;
+          this.conversationCache.delete(conversationId);
+          this.restoreScrollPosition(conversationId);
+          this.enableControls();
+          return;
+        }
+      }
+
+      this.conversationCache.delete(conversationId);
+
       const resp = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/full`);
       if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-      const { conversation, isActivelyStreaming, latestSession, chunks: rawChunks, messages: allMessages } = await resp.json();
+      const { conversation, isActivelyStreaming, latestSession, chunks: rawChunks, totalChunks, messages: allMessages } = await resp.json();
 
       this.state.currentConversation = conversation;
 
@@ -1201,6 +1311,7 @@ class AgentGUIClient {
         block: typeof chunk.data === 'string' ? JSON.parse(chunk.data) : chunk.data
       }));
       const userMessages = (allMessages || []).filter(m => m.role === 'user');
+      const hasMoreChunks = totalChunks && chunks.length < totalChunks;
 
       const shouldResumeStreaming = isActivelyStreaming && latestSession &&
         (latestSession.status === 'active' || latestSession.status === 'pending');
@@ -1217,6 +1328,29 @@ class AgentGUIClient {
         `;
 
         const messagesEl = outputEl.querySelector('.conversation-messages');
+
+        if (hasMoreChunks) {
+          const loadMoreBtn = document.createElement('button');
+          loadMoreBtn.className = 'btn btn-secondary';
+          loadMoreBtn.style.cssText = 'width:100%;margin-bottom:1rem;padding:0.5rem;font-size:0.8rem;';
+          loadMoreBtn.textContent = `Load earlier messages (${totalChunks - chunks.length} more chunks)`;
+          loadMoreBtn.addEventListener('click', async () => {
+            loadMoreBtn.disabled = true;
+            loadMoreBtn.textContent = 'Loading...';
+            try {
+              const fullResp = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/full?allChunks=1`);
+              if (fullResp.ok) {
+                this.invalidateCache(conversationId);
+                await this.loadConversationMessages(conversationId);
+              }
+            } catch (e) {
+              loadMoreBtn.textContent = 'Failed to load. Try again.';
+              loadMoreBtn.disabled = false;
+            }
+          });
+          messagesEl.appendChild(loadMoreBtn);
+        }
+
         if (chunks.length > 0) {
           const sessionOrder = [];
           const sessionChunks = {};
@@ -1228,7 +1362,16 @@ class AgentGUIClient {
             sessionChunks[chunk.sessionId].push(chunk);
           });
 
+          const frag = document.createDocumentFragment();
           let userMsgIdx = 0;
+
+          if (hasMoreChunks && sessionOrder.length > 0) {
+            const firstChunkTime = chunks[0].created_at;
+            while (userMsgIdx < userMessages.length && userMessages[userMsgIdx].created_at < firstChunkTime) {
+              userMsgIdx++;
+            }
+          }
+
           sessionOrder.forEach((sessionId) => {
             const sessionChunkList = sessionChunks[sessionId];
             const sessionStart = sessionChunkList[0].created_at;
@@ -1243,7 +1386,7 @@ class AgentGUIClient {
                 ${this.renderMessageContent(msg.content)}
                 <div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>
               `;
-              messagesEl.appendChild(userDiv);
+              frag.appendChild(userDiv);
               userMsgIdx++;
             }
 
@@ -1254,12 +1397,14 @@ class AgentGUIClient {
             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();
             sessionChunkList.forEach(chunk => {
               if (chunk.block && chunk.block.type) {
                 const element = this.renderer.renderBlock(chunk.block, chunk);
-                if (element) blocksEl.appendChild(element);
+                if (element) blockFrag.appendChild(element);
               }
             });
+            blocksEl.appendChild(blockFrag);
 
             if (isCurrentActiveSession) {
               const indicatorDiv = document.createElement('div');
@@ -1277,7 +1422,7 @@ class AgentGUIClient {
               messageDiv.appendChild(ts);
             }
 
-            messagesEl.appendChild(messageDiv);
+            frag.appendChild(messageDiv);
           });
 
           while (userMsgIdx < userMessages.length) {
@@ -1290,11 +1435,12 @@ class AgentGUIClient {
               ${this.renderMessageContent(msg.content)}
               <div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>
             `;
-            messagesEl.appendChild(userDiv);
+            frag.appendChild(userDiv);
             userMsgIdx++;
           }
+          messagesEl.appendChild(frag);
         } else {
-          messagesEl.innerHTML = this.renderMessages(allMessages || []);
+          messagesEl.appendChild(this.renderMessagesFragment(allMessages || []));
         }
 
         if (shouldResumeStreaming && latestSession) {
@@ -1330,109 +1476,36 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Render messages for display
-   */
+  renderMessagesFragment(messages) {
+    const frag = document.createDocumentFragment();
+    if (messages.length === 0) {
+      const p = document.createElement('p');
+      p.className = 'text-secondary';
+      p.textContent = 'No messages in this conversation yet';
+      frag.appendChild(p);
+      return frag;
+    }
+    for (const msg of messages) {
+      const div = document.createElement('div');
+      div.className = `message message-${msg.role}`;
+      div.innerHTML = `<div class="message-role">${msg.role.charAt(0).toUpperCase() + msg.role.slice(1)}</div>${this.renderMessageContent(msg.content)}<div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>`;
+      frag.appendChild(div);
+    }
+    return frag;
+  }
+
   renderMessages(messages) {
     if (messages.length === 0) {
       return '<p class="text-secondary">No messages in this conversation yet</p>';
     }
-
-    return messages.map(msg => {
-      let contentHtml = '';
-
-      if (typeof msg.content === 'string') {
-        if (this.isHtmlContent(msg.content)) {
-          contentHtml = `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${this.sanitizeHtml(msg.content)}</div></div>`;
-        } else {
-          contentHtml = `<div class="message-text">${this.escapeHtml(msg.content)}</div>`;
-        }
-      } else if (msg.content && typeof msg.content === 'object' && msg.content.type === 'claude_execution') {
-        contentHtml = '<div class="message-blocks">';
-        if (msg.content.blocks && Array.isArray(msg.content.blocks)) {
-          msg.content.blocks.forEach(block => {
-            if (block.type === 'text') {
-              const parts = this.parseMarkdownCodeBlocks(block.text);
-              parts.forEach(part => {
-                if (part.type === 'html') {
-                  contentHtml += `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${part.content}</div></div>`;
-                } else if (part.type === 'text') {
-                  contentHtml += `<div class="message-text">${this.escapeHtml(part.content)}</div>`;
-                } else if (part.type === 'code') {
-                  contentHtml += this.renderCodeBlock(part.language, part.code);
-                }
-              });
-            } else if (block.type === 'code_block') {
-              // Render HTML code blocks as actual HTML elements
-              if (block.language === 'html') {
-                contentHtml += `
-                  <div class="message-code">
-                    <div class="html-rendered-label mb-2 p-2 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700 text-xs text-blue-700 dark:text-blue-300">
-                      Rendered HTML
-                    </div>
-                    <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
-                      ${block.code}
-                    </div>
-                  </div>
-                `;
-              } else {
-                const cBlkLineCount = block.code.split('\n').length;
-                contentHtml += `<div class="message-code"><details class="collapsible-code"><summary class="collapsible-code-summary">${this.escapeHtml(block.language || 'code')} - ${cBlkLineCount} line${cBlkLineCount !== 1 ? 's' : ''}</summary><pre style="margin:0;border-radius:0 0 0.375rem 0.375rem">${this.escapeHtml(block.code)}</pre></details></div>`;
-              }
-            } else if (block.type === 'tool_use') {
-              let inputHtml = '';
-              if (block.input && Object.keys(block.input).length > 0) {
-                const inputStr = JSON.stringify(block.input, null, 2);
-                inputHtml = `<div class="folded-tool-body"><pre class="tool-input-pre">${this.escapeHtml(inputStr)}</pre></div>`;
-              }
-              const tn2 = block.name || 'unknown';
-              const foldable2 = tn2.startsWith('mcp__') || tn2 === 'Edit';
-              if (foldable2) {
-                const dName2 = typeof StreamingRenderer !== 'undefined' ? StreamingRenderer.getToolDisplayName(tn2) : tn2;
-                const tTitle2 = typeof StreamingRenderer !== 'undefined' && block.input ? StreamingRenderer.getToolTitle(tn2, block.input) : '';
-                contentHtml += `<details class="streaming-block-tool-use folded-tool"><summary class="folded-tool-bar"><span class="folded-tool-name">${this.escapeHtml(dName2)}</span>${tTitle2 ? `<span class="folded-tool-desc">${this.escapeHtml(tTitle2)}</span>` : ''}</summary>${inputHtml}</details>`;
-              } else {
-                contentHtml += `<div class="streaming-block-tool-use"><div class="tool-use-header"><span class="tool-use-icon">&#9881;</span> <span class="tool-use-name">${this.escapeHtml(tn2)}</span></div>${inputHtml}</div>`;
-              }
-            } else if (block.type === 'tool_result') {
-              const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
-              const smartHtml = typeof StreamingRenderer !== 'undefined' ? StreamingRenderer.renderSmartContentHTML(content, this.escapeHtml.bind(this)) : `<pre class="tool-result-pre">${this.escapeHtml(content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content)}</pre>`;
-              contentHtml += `<div class="streaming-block-tool-result${block.is_error ? ' tool-result-error' : ''}"><div class="tool-result-header">${block.is_error ? '<span class="tool-result-error-badge">Error</span>' : '<span class="tool-result-ok-badge">Result</span>'}</div>${smartHtml}</div>`;
-            }
-          });
-        }
-        contentHtml += '</div>';
-      } else {
-        // Fallback for non-array msg.content: format as key-value pairs
-        if (typeof msg.content === 'object' && msg.content !== null) {
-          const fieldsHtml = Object.entries(msg.content)
-            .map(([key, value]) => {
-              let displayValue = typeof value === 'string' ? value : JSON.stringify(value);
-              if (displayValue.length > 150) displayValue = displayValue.substring(0, 150) + '...';
-              return `<div style="font-size:0.8rem;margin-bottom:0.375rem"><span style="font-weight:600">${this.escapeHtml(key)}:</span> <code style="background:var(--color-bg-secondary);padding:0.125rem 0.25rem;border-radius:0.25rem">${this.escapeHtml(displayValue)}</code></div>`;
-            }).join('');
-          contentHtml = `<div class="message-text" style="background:var(--color-bg-secondary);padding:0.75rem;border-radius:0.375rem">${fieldsHtml}</div>`;
-        } else {
-          contentHtml = `<div class="message-text">${this.escapeHtml(String(msg.content))}</div>`;
-        }
-      }
-
-      return `
-        <div class="message message-${msg.role}">
-          <div class="message-role">${msg.role.charAt(0).toUpperCase() + msg.role.slice(1)}</div>
-          ${contentHtml}
-          <div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>
-        </div>
-      `;
-    }).join('');
+    return messages.map(msg => `<div class="message message-${msg.role}"><div class="message-role">${msg.role.charAt(0).toUpperCase() + msg.role.slice(1)}</div>${this.renderMessageContent(msg.content)}<div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div></div>`).join('');
   }
 
   /**
    * Escape HTML to prevent XSS
    */
   escapeHtml(text) {
-    const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
-    return text.replace(/[&<>"']/g, c => map[c]);
+    return window._escHtml(text);
   }
 
   /**

package/static/js/conversations.js

@@ -31,6 +31,7 @@ class ConversationManager {
 
   async init() {
     this.newBtn?.addEventListener('click', () => this.openFolderBrowser());
+    this.setupDelegatedListeners();
     this.loadConversations();
     this.setupWebSocketListener();
     this.setupFolderBrowser();
@@ -38,6 +39,23 @@ class ConversationManager {
     setInterval(() => this.loadConversations(), 30000);
   }
 
+  setupDelegatedListeners() {
+    this.listEl.addEventListener('click', (e) => {
+      const deleteBtn = e.target.closest('[data-delete-conv]');
+      if (deleteBtn) {
+        e.stopPropagation();
+        const convId = deleteBtn.dataset.deleteConv;
+        const conv = this.conversations.find(c => c.id === convId);
+        this.confirmDelete(convId, conv?.title || 'Untitled');
+        return;
+      }
+      const item = e.target.closest('[data-conv-id]');
+      if (item) {
+        this.select(item.dataset.convId);
+      }
+    });
+  }
+
   setupFolderBrowser() {
     this.folderBrowser.modal = document.getElementById('folderBrowserModal');
     this.folderBrowser.listEl = document.getElementById('folderList');
@@ -222,17 +240,56 @@ class ConversationManager {
       return;
     }
 
-    this.listEl.innerHTML = '';
     this.emptyEl.style.display = 'none';
 
     const sorted = [...this.conversations].sort((a, b) =>
       new Date(b.createdAt || 0) - new Date(a.createdAt || 0)
     );
 
-    sorted.forEach(conv => {
-      const item = this.createConversationItem(conv);
-      this.listEl.appendChild(item);
-    });
+    const existingMap = {};
+    for (const child of Array.from(this.listEl.children)) {
+      const cid = child.dataset.convId;
+      if (cid) existingMap[cid] = child;
+    }
+
+    const frag = document.createDocumentFragment();
+    for (const conv of sorted) {
+      const existing = existingMap[conv.id];
+      if (existing) {
+        this.updateConversationItem(existing, conv);
+        delete existingMap[conv.id];
+        frag.appendChild(existing);
+      } else {
+        frag.appendChild(this.createConversationItem(conv));
+      }
+    }
+
+    for (const orphan of Object.values(existingMap)) orphan.remove();
+    this.listEl.appendChild(frag);
+  }
+
+  updateConversationItem(el, conv) {
+    const isActive = conv.id === this.activeId;
+    el.classList.toggle('active', isActive);
+
+    const isStreaming = conv.isStreaming === 1 || conv.isStreaming === true || this.streamingConversations?.has(conv.id);
+    const title = conv.title || `Conversation ${conv.id.slice(0, 8)}`;
+    const timestamp = conv.created_at ? new Date(conv.created_at).toLocaleDateString() : 'Unknown';
+    const agent = conv.agentType || 'unknown';
+    const wd = conv.workingDirectory ? conv.workingDirectory.split('/').pop() : '';
+    const metaParts = [agent, timestamp];
+    if (wd) metaParts.push(wd);
+
+    const titleEl = el.querySelector('.conversation-item-title');
+    if (titleEl) {
+      const badgeHtml = isStreaming
+        ? '<span class="conversation-streaming-badge" title="Streaming in progress"><span class="streaming-dot"></span></span>'
+        : '';
+      titleEl.innerHTML = `${badgeHtml}${this.escapeHtml(title)}`;
+    }
+
+    const metaEl = el.querySelector('.conversation-item-meta');
+    if (metaEl) metaEl.textContent = metaParts.join(' \u2022 ');
   }
 
   createConversationItem(conv) {
@@ -267,14 +324,6 @@ class ConversationManager {
       </button>
     `;
 
-    // Handle delete button click
-    const deleteBtn = li.querySelector('[data-delete-conv]');
-    deleteBtn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      this.confirmDelete(conv.id, title);
-    });
-
-    li.addEventListener('click', () => this.select(conv.id));
     return li;
   }
 
@@ -368,8 +417,7 @@ class ConversationManager {
   }
 
   escapeHtml(text) {
-    const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
-    return text.replace(/[&<>"']/g, c => map[c]);
+    return window._escHtml(text);
   }
 }
 

package/static/js/event-processor.js

@@ -413,9 +413,7 @@ class EventProcessor {
    * HTML escape utility
    */
   escapeHtml(text) {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
+    return window._escHtml(text);
   }
 
   /**