agentgui 1.0.826 → 1.0.828

package/static/js/streaming-renderer-render.js

@@ -0,0 +1,181 @@
+Object.assign(StreamingRenderer.prototype, {
+  renderGitStatus(event) {
+    const div = document.createElement('div');
+    div.className = 'event-git-status card mb-3 p-4';
+    div.dataset.eventId = event.id || '';
+    div.dataset.eventType = 'git_status';
+
+    const branch = event.branch || 'unknown';
+    const changes = event.changes || {};
+    const total = (changes.added || 0) + (changes.modified || 0) + (changes.deleted || 0);
+
+    div.innerHTML = `
+      <div class="flex items-center gap-3 mb-2">
+        <svg class="w-4 h-4 text-warning" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M9.243 3.03a1 1 0 01.727 1.155L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H17a1 1 0 110 2h-2.97l-.5 2H17a1 1 0 110 2h-3.03l-.56 2.243a1 1 0 11-1.94-.486L12.47 14H9.53l-.56 2.243a1 1 0 11-1.94-.486L7.47 14H4a1 1 0 110-2h3.03l.5-2H4a1 1 0 110-2h2.97l.56-2.243a1 1 0 011.155-.727zM9.03 8l.5 2h2.94l-.5-2H9.03z" clip-rule="evenodd"></path>
+        </svg>
+        <div class="flex-1">
+          <h4 class="font-semibold text-sm">Git Status</h4>
+          <p class="text-xs text-secondary">Branch: ${this.escapeHtml(branch)}</p>
+        </div>
+      </div>
+      <div class="flex gap-4 text-xs">
+        ${changes.added ? `<span class="text-success">+${changes.added}</span>` : ''}
+        ${changes.modified ? `<span class="text-info">~${changes.modified}</span>` : ''}
+        ${changes.deleted ? `<span class="text-error">-${changes.deleted}</span>` : ''}
+        ${total === 0 ? '<span class="text-secondary">no changes</span>' : ''}
+      </div>
+    `;
+    return div;
+  },
+
+  renderCommand(event) {
+    const command = event.command || '';
+    const output = event.output || '';
+    const exitCode = event.exitCode !== undefined ? event.exitCode : null;
+    const cmdPreview = command.length > 60 ? command.substring(0, 57) + '...' : command;
+
+    const details = document.createElement('details');
+    details.className = 'block-tool-use folded-tool';
+    details.classList.add(this._getBlockTypeClass('tool_use'));
+    details.classList.add(this._getToolColorClass('Bash'));
+    details.dataset.eventId = event.id || '';
+    details.dataset.eventType = 'command_execute';
+    const summary = document.createElement('summary');
+    summary.className = 'folded-tool-bar';
+    summary.innerHTML = `
+      <span class="folded-tool-icon">${this.getToolIcon('Bash')}</span>
+      <span class="folded-tool-name">Bash</span>
+      <span class="folded-tool-desc">${this.escapeHtml(cmdPreview)}</span>
+    `;
+    details.appendChild(summary);
+
+    const body = document.createElement('div');
+    body.className = 'folded-tool-body';
+    let html = `<div class="tool-param-command"><span class="prompt-char">$</span><span class="command-text">${this.escapeHtml(command)}</span></div>`;
+    if (output) {
+      html += `<pre style="background:var(--color-bg-code);padding:0.75rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;line-height:1.5;color:var(--color-code-text);margin:0.5rem 0 0 0"><code class="lazy-hl">${this.escapeHtml(this.truncateContent(output, 2000))}</code></pre>`;
+    }
+    if (exitCode !== null && exitCode !== 0) {
+      html += `<div style="margin-top:0.375rem;font-size:0.75rem;color:#ef4444;font-weight:600">Exit code: ${exitCode}</div>`;
+    }
+    body.innerHTML = html;
+    details.appendChild(body);
+    return details;
+  },
+
+  renderError(event) {
+    const message = event.message || event.error || 'Unknown error';
+    const severity = event.severity || 'error';
+    const msgPreview = message.length > 80 ? message.substring(0, 77) + '...' : message;
+
+    const details = document.createElement('details');
+    details.className = 'folded-tool folded-tool-error permanently-expanded';
+    details.dataset.eventId = event.id || '';
+    details.dataset.eventType = 'error';
+    const summary = document.createElement('summary');
+    summary.className = 'folded-tool-bar';
+    summary.innerHTML = `
+      <span class="folded-tool-icon"><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></span>
+      <span class="folded-tool-name">Error</span>
+      <span class="folded-tool-desc">${this.escapeHtml(msgPreview)}</span>
+    `;
+    details.appendChild(summary);
+
+    const body = document.createElement('div');
+    body.className = 'folded-tool-body';
+    body.innerHTML = `<div style="font-size:0.8rem;white-space:pre-wrap;word-break:break-word;line-height:1.5">${this.escapeHtml(message)}</div>`;
+    details.appendChild(body);
+    return details;
+  },
+
+  isHtmlContent(text) {
+    const openTag = /<(?:div|table|section|article|form|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6])\b[^>]*>/i;
+    const closeTag = /<\/(?:div|table|section|article|form|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6])>/i;
+    return openTag.test(text) && closeTag.test(text);
+  },
+
+  parseMarkdownCodeBlocks(text) {
+    const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g;
+    const parts = [];
+    let lastIndex = 0;
+    let match;
+
+    while ((match = codeBlockRegex.exec(text)) !== null) {
+      if (match.index > lastIndex) {
+        const segment = text.substring(lastIndex, match.index);
+        parts.push({ type: this.isHtmlContent(segment) ? 'html' : 'text', content: segment });
+      }
+      parts.push({ type: 'code', language: match[1] || 'plain', code: match[2] });
+      lastIndex = codeBlockRegex.lastIndex;
+    }
+
+    if (lastIndex < text.length) {
+      const segment = text.substring(lastIndex);
+      parts.push({ type: this.isHtmlContent(segment) ? 'html' : 'text', content: segment });
+    }
+
+    if (parts.length === 0) {
+      return [{ type: this.isHtmlContent(text) ? 'html' : 'text', content: text }];
+    }
+
+    return parts;
+  },
+
+  renderText(event) {
+    const div = document.createElement('div');
+    div.className = 'event-text mb-3';
+    div.dataset.eventId = event.id || '';
+    div.dataset.eventType = 'text_block';
+
+    const text = event.text || event.content || '';
+    const parts = this.parseMarkdownCodeBlocks(text);
+    let html = '';
+    parts.forEach(part => {
+      if (part.type === 'html') {
+        html += `<div class="html-content mb-3">${part.content}</div>`;
+      } else if (part.type === 'text') {
+        html += `<div class="card card-body mb-3 leading-relaxed text-sm">${this.parseAndRenderMarkdown(part.content)}</div>`;
+      } else if (part.type === 'code') {
+        if (part.language.toLowerCase() === 'html') {
+          html += `<div class="html-rendered-container mb-3">
+            <div class="html-rendered-label">Rendered HTML</div>
+            <div class="html-content bg-base-100 p-4 overflow-x-auto">${part.code}</div>
+          </div>`;
+        } else {
+          const partLineCount = part.code.split('\n').length;
+          html += `<div class="card mb-3 rounded-lg overflow-hidden">
+            <details class="collapsible-code">
+              <summary class="collapsible-code-summary">
+                <span>${this.escapeHtml(part.language)} - ${partLineCount} line${partLineCount !== 1 ? 's' : ''}</span>
+                <button class="copy-code-btn" title="Copy code" onclick="event.preventDefault();event.stopPropagation();navigator.clipboard.writeText(this.closest('.collapsible-code').querySelector('code').textContent)">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+                  </svg>
+                </button>
+              </summary>
+              <pre class="bg-base-300 text-base-content p-4 overflow-x-auto" style="margin:0;border-radius:0 0 0.375rem 0.375rem"><code class="language-${this.escapeHtml(part.language)}">${this.escapeHtml(part.code)}</code></pre>
+            </details>
+          </div>`;
+        }
+      }
+    });
+    div.innerHTML = html;
+
+    div.querySelectorAll('.copy-code-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const codeElement = btn.closest('.mb-3')?.querySelector('code');
+        if (codeElement) {
+          const code = codeElement.textContent;
+          navigator.clipboard.writeText(code).then(() => {
+            const originalText = btn.innerHTML;
+            btn.innerHTML = '<svg class="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>';
+            setTimeout(() => { btn.innerHTML = originalText; }, 2000);
+          });
+        }
+      });
+    });
+
+    return div;
+  }
+});

package/static/js/streaming-renderer-render2.js

@@ -0,0 +1,149 @@
+Object.assign(StreamingRenderer.prototype, {
+  renderMcpProgress(event) {
+    const status = event.status || 'running';
+    const name = event.tool || event.name || 'MCP tool';
+    const statusColors = { running: '#0891b2', completed: '#059669', failed: '#dc2626' };
+    const color = statusColors[status] || statusColors.running;
+    const div = document.createElement('div');
+    div.className = 'event-mcp-progress';
+    div.dataset.eventType = 'mcp_progress';
+    div.innerHTML = `
+      <div style="display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.75rem;font-size:0.75rem;color:var(--color-text-secondary)">
+        <span style="width:0.5rem;height:0.5rem;border-radius:50%;background:${color};flex-shrink:0"></span>
+        <span style="color:${color};font-weight:600">MCP</span>
+        <span>${this.escapeHtml(name)}</span>
+        <span style="opacity:0.6">${this.escapeHtml(status)}</span>
+      </div>
+    `;
+    return div;
+  },
+
+  renderGeneric(event) {
+    if ((event.content?.source?.type === 'base64' || event.content?.type === 'base64') && event.path) {
+      return this.renderFileRead(event);
+    }
+
+    const div = document.createElement('div');
+    div.className = 'event-generic mb-3 p-3 bg-base-200 rounded text-sm';
+    div.dataset.eventId = event.id || '';
+    div.dataset.eventType = event.type;
+
+    const time = new Date(event.timestamp).toLocaleTimeString();
+
+    const fieldsHtml = Object.entries(event)
+      .filter(([key]) => !['type', 'timestamp'].includes(key))
+      .map(([key, value]) => {
+        let displayValue;
+        if (typeof value === 'string') {
+          displayValue = value.length > 100 ? value.substring(0, 100) + '...' : value;
+        } else if (typeof value === 'number' || typeof value === 'boolean') {
+          displayValue = String(value);
+        } else if (value === null) {
+          displayValue = 'null';
+        } else {
+          displayValue = JSON.stringify(value);
+          if (displayValue.length > 100) displayValue = displayValue.substring(0, 100) + '...';
+        }
+        return `<div style="font-size:0.75rem;margin-bottom:0.25rem"><span style="font-weight:600;color:var(--color-text-secondary)">${this.escapeHtml(key)}:</span> <span style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace">${this.escapeHtml(displayValue)}</span></div>`;
+      }).join('');
+
+    div.innerHTML = `
+      <div style="display:flex;justify-content:space-between;margin-bottom:0.5rem">
+        <span style="font-weight:600;color:var(--color-text-primary)">${this.escapeHtml(event.type)}</span>
+        <span style="font-size:0.75rem;color:var(--color-text-secondary)">${time}</span>
+      </div>
+      <div>${fieldsHtml || '<span style="color:var(--color-text-secondary);font-size:0.75rem">No additional data</span>'}</div>
+    `;
+    return div;
+  },
+
+  nestToolResultsInToolUses() {
+    if (!this.outputContainer) return;
+
+    const toolUseBlocks = this.outputContainer.querySelectorAll('details.block-tool-use[data-tool-use-id]');
+    const toolResultBlocks = this.outputContainer.querySelectorAll('.tool-result-pending[data-tool-use-id]');
+
+    toolResultBlocks.forEach(resultBlock => {
+      const toolUseId = resultBlock.dataset.toolUseId;
+      const isError = resultBlock.dataset.isError === '1';
+      const toolUseBlock = Array.from(toolUseBlocks).find(b => b.dataset.toolUseId === toolUseId);
+
+      if (toolUseBlock) {
+        const toolUseSummary = toolUseBlock.querySelector(':scope > summary');
+
+        if (toolUseSummary && !toolUseSummary.querySelector('.folded-tool-status')) {
+          const statusSvg = isError
+            ? '<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>';
+          const statusSpan = document.createElement('span');
+          statusSpan.className = 'folded-tool-status';
+          statusSpan.innerHTML = statusSvg;
+          toolUseSummary.appendChild(statusSpan);
+          toolUseBlock.classList.add(isError ? 'tool-result-error' : 'tool-result-success');
+        }
+
+        if (resultBlock.innerHTML.trim()) {
+          let toolUseBody = toolUseBlock.querySelector(':scope > .folded-tool-body');
+          if (!toolUseBody) {
+            toolUseBody = document.createElement('div');
+            toolUseBody.className = 'folded-tool-body';
+            toolUseBlock.appendChild(toolUseBody);
+          }
+          const resultContent = document.createElement('div');
+          resultContent.className = 'folded-tool-result-content';
+          resultContent.innerHTML = resultBlock.innerHTML;
+          toolUseBody.appendChild(resultContent);
+        }
+
+        resultBlock.remove();
+      } else {
+        resultBlock.remove();
+      }
+    });
+  },
+
+  mergeResultIntoToolUse(toolUseEl, block) {
+    const content = block.content || '';
+    const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
+    const isError = (block.is_error || false) && !contentStr.trimStart().startsWith('exec ran successfully.');
+
+    toolUseEl.classList.remove('has-success', 'has-error', 'tool-result-success', 'tool-result-error');
+    toolUseEl.classList.add(isError ? 'has-error' : 'has-success', isError ? 'tool-result-error' : 'tool-result-success');
+
+    const summary = toolUseEl.querySelector(':scope > summary');
+    if (summary && !summary.querySelector('.folded-tool-status')) {
+      const statusSvg = isError
+        ? '<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>';
+      const statusSpan = document.createElement('span');
+      statusSpan.className = 'folded-tool-status';
+      statusSpan.innerHTML = statusSvg;
+      summary.appendChild(statusSpan);
+      const startedAt = parseInt(toolUseEl.dataset.startedAt);
+      if (startedAt > 0) {
+        const ms = Date.now() - startedAt;
+        const label = ms < 1000 ? ms + 'ms' : (ms / 1000).toFixed(1) + 's';
+        const dur = document.createElement('span');
+        dur.className = 'folded-tool-duration';
+        dur.style.cssText = 'margin-left:0.375rem;font-size:0.6rem;opacity:0.45;font-weight:400';
+        dur.textContent = label;
+        summary.appendChild(dur);
+      }
+    }
+
+    const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this), true);
+    if (renderedContent && renderedContent.trim()) {
+      let toolUseBody = toolUseEl.querySelector(':scope > .folded-tool-body');
+      if (!toolUseBody) {
+        toolUseBody = document.createElement('div');
+        toolUseBody.className = 'folded-tool-body';
+        toolUseEl.appendChild(toolUseBody);
+      }
+      const resultContent = document.createElement('div');
+      resultContent.className = 'folded-tool-result-content';
+      resultContent.innerHTML = renderedContent;
+      toolUseBody.appendChild(resultContent);
+    }
+  }
+
+});

package/static/js/streaming-renderer-render3.js

@@ -0,0 +1,142 @@
+Object.assign(StreamingRenderer.prototype, {
+  autoScroll() {
+    if (this._scrollRafPending || this._userScrolledUp) return;
+    this._scrollRafPending = true;
+    requestAnimationFrame(() => {
+      this._scrollRafPending = false;
+      if (this.scrollContainer) {
+        this._programmaticScroll = true;
+        try { this.scrollContainer.scrollTop = this.scrollContainer.scrollHeight; } catch (_) {}
+        this._programmaticScroll = false;
+      }
+    });
+  },
+
+  resetScrollState() {
+    this._userScrolledUp = false;
+  },
+
+  updateDOMNodeCount() {
+    this.domNodeCount = this.outputContainer?.querySelectorAll('[data-event-id]').length || 0;
+  },
+
+  escapeHtml(text) {
+    return window._escHtml(text);
+  },
+
+  formatFileSize(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+  },
+
+  truncateContent(content, maxLength = 200) {
+    if (content.length <= maxLength) return content;
+    return content.substring(0, maxLength) + '...';
+  },
+
+  clear() {
+    if (this.outputContainer) {
+      this.outputContainer.innerHTML = '';
+    }
+    this.eventQueue = [];
+    this.eventHistory = [];
+    this.domNodeCount = 0;
+    this.dedupMap.clear();
+  },
+
+  getMetrics() {
+    return {
+      ...this.performanceMetrics,
+      domNodeCount: this.domNodeCount,
+      queueLength: this.eventQueue.length,
+      historyLength: this.eventHistory.length,
+      lastRenderTime: this.lastRenderTime
+    };
+  },
+
+  on(event, callback) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event].push(callback);
+  },
+
+  emit(event, data) {
+    if (this.listeners[event]) {
+      this.listeners[event].forEach(callback => {
+        try {
+          callback(data);
+        } catch (e) {
+          console.error('Listener error:', e);
+        }
+      });
+    }
+  },
+
+  renderBlockHeader(block, context = {}) {
+    if (!block || !block.type) return null;
+
+    const typeLabel = block.type.charAt(0).toUpperCase() + block.type.slice(1).replace(/_/g, ' ');
+    const summary = document.createElement('summary');
+    summary.style.cursor = 'pointer';
+    summary.style.userSelect = 'none';
+    summary.className = 'block-header-summary';
+
+    let summaryText = typeLabel;
+    if (block.type === 'code' && block.language) {
+      summaryText += ` (${block.language})`;
+    } else if (block.type === 'bash' && block.source) {
+      summaryText += ` - ${block.source}`;
+    } else if (block.type === 'tool_use' && block.name) {
+      summaryText += ` - ${block.name}`;
+    } else if (block.type === 'text' && block.text) {
+      const preview = block.text.substring(0, 60).replace(/\n/g, ' ');
+      summaryText = preview + (block.text.length > 60 ? '...' : '');
+    }
+
+    summary.textContent = summaryText;
+
+    const details = document.createElement('details');
+    details.className = `block-${block.type}`;
+    details.classList.add(this._getBlockTypeClass(block.type));
+    details.setAttribute('data-block-type', block.type);
+    details.setAttribute('data-lazy-load', 'pending');
+    details.open = block.type === 'success' || (block.type === 'tool_result' && !block.is_error);
+    details.appendChild(summary);
+
+    details.addEventListener('toggle', async (e) => {
+      if (details.open && details.getAttribute('data-lazy-load') === 'pending') {
+        details.setAttribute('data-lazy-load', 'loading');
+        try {
+          const body = this.renderBlock(block, context);
+          if (body && body !== summary) {
+            details.appendChild(body);
+          }
+          details.setAttribute('data-lazy-load', 'loaded');
+        } catch (err) {
+          console.error('Failed to lazy-load block:', err);
+          details.setAttribute('data-lazy-load', 'failed');
+        }
+      }
+    }, { once: false });
+
+    return details;
+  },
+
+  destroy() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    if (this.batchTimer) {
+      clearTimeout(this.batchTimer);
+    }
+    this.listeners = {};
+    this.clear();
+  }
+});

package/static/js/streaming-renderer-static.js

@@ -0,0 +1,181 @@
+Object.assign(StreamingRenderer, {
+  renderSmartContentHTML(contentStr, escapeHtml, flat = false) {
+    const trimmed = contentStr.trim();
+    const esc = escapeHtml || window._escHtml;
+
+    if (trimmed.startsWith('data:image/')) {
+      return `<div style="padding:0.5rem"><img src="${esc(trimmed)}" style="max-width:100%;max-height:24rem;border-radius:0.375rem" loading="lazy"></div>`;
+    }
+
+    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+      try {
+        const parsed = JSON.parse(trimmed);
+
+        if (Array.isArray(parsed) && parsed.length > 0 && parsed[0] && parsed[0].type === 'text') {
+          const textParts = parsed.filter(b => b.type === 'text' && b.text);
+          if (textParts.length > 0) {
+            const combined = textParts.map(b => b.text).join('\n');
+            return StreamingRenderer.renderSmartContentHTML(combined, esc, flat);
+          }
+        }
+
+        if (Array.isArray(parsed) && parsed.length > 0) {
+          const imgParts = parsed.filter(b => b.type === 'image' && b.source && b.source.type === 'base64' && b.source.data);
+          if (imgParts.length > 0) {
+            return imgParts.map(b => {
+              const mime = b.source.media_type || 'image/png';
+              return `<div style="padding:0.5rem"><img src="data:${esc(mime)};base64,${b.source.data}" style="max-width:100%;max-height:24rem;border-radius:0.375rem"></div>`;
+            }).join('');
+          }
+        }
+
+        return `<div style="padding:0.5rem 0.75rem">${StreamingRenderer.renderParamsHTML(parsed, 0, esc)}</div>`;
+      } catch (e) {
+      }
+    }
+
+    const lines = trimmed.split('\n');
+    const isCatNOutput = lines.length > 1 && lines[0].match(/^\s*\d+→/);
+    const isGrepOutput = lines.length > 1 && lines[0].match(/^\s*\d+-/);
+
+    if (isCatNOutput || isGrepOutput) {
+      const cleanedLines = lines.map(line => {
+        if (line === '--') return null;
+
+        const match = line.match(/^\s*\d+[→\-:](.*)/);
+        return match ? match[1] : line;
+      }).filter(line => line !== null);
+      const cleanedContent = cleanedLines.join('\n');
+
+      return StreamingRenderer.renderCodeWithHighlight(cleanedContent, esc, flat);
+    }
+
+    const systemReminderPattern = /<system-reminder>([\s\S]*?)<\/system-reminder>/g;
+    const systemReminders = [];
+    let contentWithoutReminders = trimmed;
+
+    let reminderMatch;
+    while ((reminderMatch = systemReminderPattern.exec(trimmed)) !== null) {
+      systemReminders.push(reminderMatch[1].trim());
+      contentWithoutReminders = contentWithoutReminders.replace(reminderMatch[0], '');
+    }
+
+    contentWithoutReminders = contentWithoutReminders.trim();
+
+    const successPatterns = [
+      /^Success\s+toolu_[\w]+$/m,
+      /^The file .* has been (updated|created|modified)/,
+      /^Here's the result of running `cat -n`/,
+      /^Applied \d+ edits? to/,
+      /^\w+ tool completed successfully/
+    ];
+
+    const hasSuccessPattern = successPatterns.some(pattern => pattern.test(contentWithoutReminders));
+
+    if (hasSuccessPattern) {
+      const contentLines = contentWithoutReminders.split('\n');
+      let successEndIndex = -1;
+      let codeStartIndex = -1;
+
+      for (let i = 0; i < contentLines.length; i++) {
+        const line = contentLines[i];
+        if (line.match(/^Success\s+toolu_/)) {
+          successEndIndex = i;
+          for (let j = i + 1; j < contentLines.length; j++) {
+            if (contentLines[j].trim() && !contentLines[j].match(/^The file|^Here's the result/)) {
+              codeStartIndex = j;
+              break;
+            }
+          }
+          break;
+        } else if (line.match(/^The file .* has been|^Applied \d+ edits? to|^Replaced|^Created|^Deleted/)) {
+          for (let j = i + 1; j < contentLines.length; j++) {
+            if (contentLines[j].match(/^Here's the result|^\s*\d+→/)) {
+              if (contentLines[j].match(/^Here's the result/)) {
+                codeStartIndex = j + 1;
+              } else {
+                codeStartIndex = j;
+              }
+              break;
+            } else if (contentLines[j].trim() && !contentLines[j].match(/^cat -n|^Running/)) {
+              codeStartIndex = j;
+              break;
+            }
+          }
+          if (codeStartIndex === -1) {
+            codeStartIndex = i + 2;
+          }
+          successEndIndex = codeStartIndex - 1;
+          break;
+        }
+      }
+
+      if (codeStartIndex > 0 && codeStartIndex < contentLines.length) {
+        const beforeCode = contentLines.slice(0, codeStartIndex).join('\n');
+        let codeContent = contentLines.slice(codeStartIndex).join('\n');
+
+        if (codeContent.match(/^\s*\d+→/m)) {
+          const codeLines = codeContent.split('\n');
+          codeContent = codeLines.map(line => {
+            const match = line.match(/^\s*\d+→(.*)/);
+            return match ? match[1] : line;
+          }).join('\n');
+        }
+
+        let html = '';
+
+        if (beforeCode.trim()) {
+          html += `<div style="color:var(--color-success);font-weight:600;margin-bottom:0.75rem;font-size:0.9rem">${esc(beforeCode.trim())}</div>`;
+        }
+
+        if (codeContent.trim()) {
+          html += StreamingRenderer.renderCodeWithHighlight(codeContent, esc, flat);
+        }
+
+        if (systemReminders.length > 0) {
+          html += StreamingRenderer.renderSystemReminders(systemReminders, esc);
+        }
+
+        return html;
+      }
+    }
+
+    if (systemReminders.length > 0) {
+      let html = '';
+
+      if (contentWithoutReminders) {
+        if (StreamingRenderer.detectCodeContent(contentWithoutReminders)) {
+          html += StreamingRenderer.renderCodeWithHighlight(contentWithoutReminders, esc, flat);
+        } else {
+          html += `<pre class="tool-result-pre">${esc(contentWithoutReminders)}</pre>`;
+        }
+      }
+
+      html += StreamingRenderer.renderSystemReminders(systemReminders, esc);
+      return html;
+    }
+
+    const allFilePaths = lines.length > 1 && lines.every(l => {
+      const t = l.trim();
+      return t === '' || t.startsWith('/') || /^[A-Za-z]:[\\\/]/.test(t);
+    });
+    if (allFilePaths && lines.filter(l => l.trim()).length > 0) {
+      const fileHtml = lines.filter(l => l.trim()).map(l => {
+        const p = l.trim();
+        const parts = pathSplit(p);
+        const name = parts.pop();
+        const dir = parts.join('/');
+        return `<div style="display:flex;align-items:center;gap:0.375rem;padding:0.1875rem 0;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem"><span style="opacity:0.5">&#128196;</span><span style="color:var(--color-text-secondary)">${esc(dir)}/</span><span style="font-weight:600">${esc(name)}</span></div>`;
+      }).join('');
+      return `<div style="padding:0.625rem 1rem">${fileHtml}</div>`;
+    }
+
+    const looksLikeCode = StreamingRenderer.detectCodeContent(trimmed);
+    if (looksLikeCode) {
+      return StreamingRenderer.renderCodeWithHighlight(trimmed, esc, flat);
+    }
+
+    const displayContent = trimmed.length > 2000 ? trimmed.substring(0, 2000) + '\n... (truncated)' : trimmed;
+    return `<pre class="tool-result-pre">${esc(displayContent)}</pre>`;
+  }
+});