agentgui 1.0.151 → 1.0.153

package/static/index.html

@@ -527,39 +527,6 @@
       font-size: 0.75rem;
     }
 
-    .streaming-block-tool-use {
-      margin: 0.25rem 0;
-      border-left: 3px solid #06b6d4;
-      background: rgba(6,182,212,0.06);
-      border-radius: 0 0.375rem 0.375rem 0;
-      overflow: hidden;
-    }
-    .streaming-block-tool-use.folded-tool {
-      border-left: none;
-      border-radius: 0.375rem;
-      margin: 0.125rem 0;
-    }
-
-    .tool-use-header {
-      padding: 0.5rem 0.75rem;
-      font-weight: 600;
-      font-size: 0.85rem;
-      display: flex;
-      align-items: center;
-      gap: 0.375rem;
-    }
-
-    .tool-use-icon {
-      font-size: 0.9rem;
-      opacity: 0.7;
-    }
-
-    .tool-use-name {
-      color: #0891b2;
-    }
-
-    html.dark .tool-use-name { color: #22d3ee; }
-
     .tool-input-details {
     }
 
@@ -1102,6 +1069,12 @@
       opacity: 0.3;
     }
 
+    .conversation-messages { contain: content; }
+    .streaming-blocks { contain: content; }
+    .sidebar-list { contain: strict; content-visibility: auto; }
+    .message { contain: layout style; content-visibility: auto; contain-intrinsic-size: auto 120px; }
+    #output-scroll { will-change: transform; }
+
     .voice-block .voice-result-stats {
       font-size: 0.8rem;
       color: var(--color-text-secondary);
@@ -1585,6 +1558,90 @@
       font-size: 0.7rem;
     }
 
+    /* --- Error variant of folded-tool --- */
+    .folded-tool.folded-tool-error {
+      background: #fef2f2;
+      border-color: #fecaca;
+    }
+    html.dark .folded-tool.folded-tool-error {
+      background: #1c0f0f;
+      border-color: #7f1d1d;
+    }
+    .folded-tool-error > .folded-tool-bar {
+      background: #fee2e2;
+    }
+    html.dark .folded-tool-error > .folded-tool-bar {
+      background: #2c1010;
+    }
+    .folded-tool-error > .folded-tool-bar::before { color: #ef4444; }
+    html.dark .folded-tool-error > .folded-tool-bar::before { color: #f87171; }
+    .folded-tool-error > .folded-tool-bar:hover { background: #fecaca; }
+    html.dark .folded-tool-error > .folded-tool-bar:hover { background: #451a1a; }
+    .folded-tool-error .folded-tool-icon { color: #ef4444; }
+    html.dark .folded-tool-error .folded-tool-icon { color: #f87171; }
+    .folded-tool-error .folded-tool-name { color: #991b1b; }
+    html.dark .folded-tool-error .folded-tool-name { color: #fca5a5; }
+    .folded-tool-error .folded-tool-desc { color: #b91c1c; }
+    html.dark .folded-tool-error .folded-tool-desc { color: #f87171; }
+    .folded-tool-error > .folded-tool-body { border-top-color: #fecaca; }
+    html.dark .folded-tool-error > .folded-tool-body { border-top-color: #7f1d1d; }
+
+    /* --- Collapsible Code Summary --- */
+    .collapsible-code {
+      margin: 0.25rem 0;
+      border-radius: 0.375rem;
+      overflow: hidden;
+      background: #1e293b;
+      border: 1px solid #334155;
+    }
+    .collapsible-code-summary {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.3rem 0.75rem;
+      cursor: pointer;
+      user-select: none;
+      list-style: none;
+      font-size: 0.75rem;
+      line-height: 1.3;
+      background: #1f2937;
+      color: #9ca3af;
+      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
+      transition: background 0.15s;
+    }
+    .collapsible-code-summary::-webkit-details-marker { display: none; }
+    .collapsible-code-summary::marker { display: none; content: ''; }
+    .collapsible-code-summary::before {
+      content: '\25b6';
+      font-size: 0.5rem;
+      margin-right: 0.125rem;
+      display: inline-block;
+      transition: transform 0.15s;
+      color: #6b7280;
+      flex-shrink: 0;
+    }
+    .collapsible-code[open] > .collapsible-code-summary::before { transform: rotate(90deg); }
+    .collapsible-code-summary:hover { background: #374151; }
+    .collapsible-code-summary .copy-code-btn {
+      margin-left: auto;
+      background: none;
+      border: none;
+      color: #6b7280;
+      cursor: pointer;
+      padding: 0.125rem;
+      border-radius: 0.25rem;
+      display: flex;
+      align-items: center;
+      transition: all 0.15s;
+    }
+    .collapsible-code-summary .copy-code-btn:hover { color: #e5e7eb; background: #4b5563; }
+    .collapsible-code-summary .copy-code-btn svg { width: 0.875rem; height: 0.875rem; }
+    .collapsible-code-label {
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
     /* --- Tool Result Block --- */
     .block-tool-result {
       margin-bottom: 0.25rem;
@@ -2077,6 +2134,11 @@
     </div>
   </div>
 
+  <script>
+    var _escHtmlMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+    var _escHtmlRe = /[&<>"']/g;
+    window._escHtml = function(t) { return t.replace(_escHtmlRe, function(c) { return _escHtmlMap[c]; }); };
+  </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>

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) {
@@ -544,12 +566,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) {
@@ -682,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);
@@ -802,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>`;
@@ -988,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);
         }
@@ -1034,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
    */
@@ -1227,6 +1297,7 @@ class AgentGUIClient {
             sessionChunks[chunk.sessionId].push(chunk);
           });
 
+          const frag = document.createDocumentFragment();
           let userMsgIdx = 0;
           sessionOrder.forEach((sessionId) => {
             const sessionChunkList = sessionChunks[sessionId];
@@ -1242,7 +1313,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++;
             }
 
@@ -1253,12 +1324,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');
@@ -1276,7 +1349,7 @@ class AgentGUIClient {
               messageDiv.appendChild(ts);
             }
 
-            messagesEl.appendChild(messageDiv);
+            frag.appendChild(messageDiv);
           });
 
           while (userMsgIdx < userMessages.length) {
@@ -1289,11 +1362,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) {
@@ -1329,109 +1403,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);
   }
 }