agentgui 1.0.826 → 1.0.828

package/static/js/streaming-renderer.js

@@ -194,1999 +194,7 @@ class StreamingRenderer {
     const processTime = performance.now() - processStart;
     this.performanceMetrics.avgProcessTime = this.performanceMetrics.avgProcessTime || processTime;
   }
-
-  renderBatch(batch) {
-    if (!this.outputContainer) return;
-
-    this.emit('render:start', { eventCount: batch.length });
-    const renderStart = performance.now();
-
-    try {
-      const fragment = document.createDocumentFragment();
-      let nodeCount = 0;
-
-      for (const event of batch) {
-        try {
-          const element = this.renderEvent(event);
-          if (element) {
-            fragment.appendChild(element);
-            nodeCount++;
-          }
-        } catch (error) {
-          console.error('Event render error:', error, event);
-        }
-      }
-
-      if (nodeCount > 0) {
-        this.outputContainer.appendChild(fragment);
-        this.domNodeCount += nodeCount;
-
-        this.nestToolResultsInToolUses();
-      }
-
-      this.autoScroll();
-
-      const renderTime = performance.now() - renderStart;
-      this.lastRenderTime = renderTime;
-
-      this.emit('render:complete', {
-        eventCount: batch.length,
-        nodeCount,
-        renderTime
-      });
-    } catch (error) {
-      console.error('Batch render error:', error);
-      this.emit('error:render', { error, batch });
-    }
-  }
-
-  renderEvent(event) {
-    if (!event.type) return null;
-
-    try {
-      if (event.type === 'streaming_progress' && event.block) {
-        return this.renderBlock(event.block, event);
-      }
-
-      if (event.type === 'streaming_error' && event.isPrematureEnd) {
-        return this.renderBlockPremature({ type: 'premature', error: event.error, exitCode: event.exitCode });
-      }
-
-      switch (event.type) {
-        case 'streaming_start':
-          return this.renderStreamingStart(event);
-        case 'streaming_progress':
-          return this.renderStreamingProgress(event);
-        case 'streaming_complete':
-          return this.renderStreamingComplete(event);
-        case 'file_read':
-          return this.renderFileRead(event);
-        case 'file_write':
-          return this.renderFileWrite(event);
-        case 'git_status':
-          return this.renderGitStatus(event);
-        case 'command_execute':
-          return this.renderCommand(event);
-        case 'error':
-          return this.renderError(event);
-        case 'text_block':
-          return this.renderText(event);
-        case 'code_block':
-          return this.renderCode(event);
-        case 'thinking_block':
-          return null;
-        case 'tool_use':
-          return this.renderToolUse(event);
-        case 'compact_boundary':
-          return this.renderCompactBoundary(event);
-        case 'compact_summary':
-          return this.renderCompactBoundary(event);
-        case 'turn_duration':
-          return this.renderTurnDuration(event);
-        case 'agent_progress':
-          return this.renderAgentProgress(event);
-        case 'mcp_progress':
-          return this.renderMcpProgress(event);
-        default:
-          return this.renderGeneric(event);
-      }
-    } catch (error) {
-      console.error('Event render error:', error, event);
-      return this.renderError({ message: error.message, event });
-    }
-  }
-
-  renderBlock(block, context = {}, targetContainer = null) {
-    if (!block || !block.type) return null;
-
-    try {
-      switch (block.type) {
-        case 'text':
-          return this.renderBlockText(block, context, targetContainer);
-        case 'code':
-          return this.renderBlockCode(block, context);
-        case 'thinking':
-          return this.renderBlockThinking(block, context);
-        case 'tool_use':
-          return this.renderBlockToolUse(block, context);
-        case 'tool_result':
-          return this.renderBlockToolResult(block, context);
-        case 'image':
-          return this.renderBlockImage(block, context);
-        case 'bash':
-          return this.renderBlockBash(block, context);
-        case 'system':
-          return this.renderBlockSystem(block, context);
-        case 'result':
-          return this.renderBlockResult(block, context);
-        case 'tool_status':
-          return this.renderBlockToolStatus(block, context);
-        case 'usage':
-          return this.renderBlockUsage(block, context);
-        case 'plan':
-          return this.renderBlockPlan(block, context);
-        case 'premature':
-          return this.renderBlockPremature(block, context);
-        case 'hook_progress':
-          return this.renderBlockHookProgress(block, context);
-        default:
-          return this.renderBlockGeneric(block, context);
-      }
-    } catch (error) {
-      console.error('Block render error:', error, block);
-      return this.renderBlockError(block, error);
-    }
-  }
-
-  renderBlockText(block, context, targetContainer = null) {
-    const text = block.text || '';
-    const isHtml = this.containsHtmlTags(text);
-    const cached = this.renderCache.get(text);
-    const html = cached || (isHtml ? this.sanitizeHtml(text) : this.parseAndRenderMarkdown(text));
-
-    if (!cached && this.renderCache.size < 2000) {
-      this.renderCache.set(text, html);
-    }
-
-    const container = targetContainer || this.outputContainer;
-    const lastChild = container && container.lastElementChild;
-    if (lastChild && lastChild.classList.contains('block-text') && !isHtml && !lastChild.classList.contains('html-content')) {
-      lastChild.innerHTML += html;
-      return null;
-    }
-
-    const div = document.createElement('div');
-    div.className = 'block-text';
-    if (isHtml) div.classList.add('html-content');
-    div.innerHTML = html;
-    div.classList.add(this._getBlockTypeClass('text'));
-    return div;
-  }
-
-  _getBlockTypeClass(blockType) {
-    const validTypes = ['text','tool_use','tool_result','code','thinking','bash','system','result','error','image','plan','usage','premature','tool_status','generic'];
-    return validTypes.includes(blockType) ? `block-type-${blockType}` : 'block-type-generic';
-  }
-
-  _getToolColorClass(toolName) {
-    const n = (toolName || '').replace(/^mcp__.*?__/, '').toLowerCase();
-    const map = {
-      read: 'read', write: 'write', edit: 'edit', bash: 'bash', glob: 'glob', grep: 'grep',
-      webfetch: 'web', websearch: 'web', todowrite: 'todo', task: 'task', notebookedit: 'edit',
-      execute: 'execute', sleep: 'sleep', search: 'search', skill: 'skill'
-    };
-    return `tool-color-${map[n] || 'default'}`;
-  }
-
-  containsHtmlTags(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);
-  }
-
-  sanitizeHtml(html) {
-    const dangerous = /<\s*\/?\s*(script|iframe|object|embed|applet|form|input|button|select|textarea)\b[^>]*>/gi;
-    let cleaned = html.replace(dangerous, '');
-    cleaned = cleaned.replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, '');
-    cleaned = cleaned.replace(/\s+on\w+\s*=\s*[^\s>]+/gi, '');
-    cleaned = cleaned.replace(/javascript\s*:/gi, '');
-    return cleaned;
-  }
-
-  parseAndRenderMarkdown(text) {
-    const esc = this.escapeHtml.bind(this);
-    const lines = text.split('\n');
-    const out = [];
-    let i = 0;
-    while (i < lines.length) {
-      const line = lines[i];
-      const trimmed = line.trim();
-      if (trimmed.startsWith('### ')) {
-        out.push(`<h3 style="margin:0.4rem 0 0.2rem;font-size:0.95rem;font-weight:700">${this._mdInline(esc(trimmed.slice(4)))}</h3>`);
-        i++; continue;
-      }
-      if (trimmed.startsWith('## ')) {
-        out.push(`<h2 style="margin:0.5rem 0 0.25rem;font-size:1rem;font-weight:700">${this._mdInline(esc(trimmed.slice(3)))}</h2>`);
-        i++; continue;
-      }
-      if (trimmed.startsWith('# ')) {
-        out.push(`<h2 style="margin:0.5rem 0 0.25rem;font-size:1.05rem;font-weight:700">${this._mdInline(esc(trimmed.slice(2)))}</h2>`);
-        i++; continue;
-      }
-      if (trimmed.startsWith('> ')) {
-        out.push(`<blockquote style="margin:0.25rem 0;padding:0.2rem 0.75rem;border-left:3px solid currentColor;opacity:0.75">${this._mdInline(esc(trimmed.slice(2)))}</blockquote>`);
-        i++; continue;
-      }
-      if (trimmed === '---' || trimmed === '***' || trimmed === '___') {
-        out.push('<hr style="border:none;border-top:1px solid currentColor;opacity:0.2;margin:0.5rem 0">');
-        i++; continue;
-      }
-      if (/^[-*+] /.test(trimmed)) {
-        const items = [];
-        while (i < lines.length && /^[-*+] /.test(lines[i].trim())) {
-          items.push(`<li style="margin:0.1rem 0">${this._mdInline(esc(lines[i].trim().slice(2)))}</li>`);
-          i++;
-        }
-        out.push(`<ul style="margin:0.25rem 0;padding-left:1.25rem">${items.join('')}</ul>`);
-        continue;
-      }
-      if (/^\d+\. /.test(trimmed)) {
-        const items = [];
-        while (i < lines.length && /^\d+\. /.test(lines[i].trim())) {
-          items.push(`<li style="margin:0.1rem 0">${this._mdInline(esc(lines[i].trim().replace(/^\d+\. /, '')))}</li>`);
-          i++;
-        }
-        out.push(`<ol style="margin:0.25rem 0;padding-left:1.25rem">${items.join('')}</ol>`);
-        continue;
-      }
-      if (trimmed === '') {
-        out.push('<br>');
-        i++; continue;
-      }
-      out.push(this._mdInline(esc(line)));
-      i++;
-    }
-    return out.join('\n');
-  }
-
-  _mdInline(html) {
-    return html
-      .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-      .replace(/\*([^*]+)\*/g, '<em>$1</em>')
-      .replace(/_([^_]+)_/g, '<em>$1</em>')
-      .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
-      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="text-decoration:underline;opacity:0.85" target="_blank">$1</a>');
-  }
-
-  renderBlockCode(block, context) {
-    const div = document.createElement('div');
-    div.className = 'block-code';
-    div.classList.add(this._getBlockTypeClass('code'));
-
-    const code = block.code || '';
-    const language = (block.language || 'plaintext').toLowerCase();
-    const lineCount = code.split('\n').length;
-
-    const header = document.createElement('div');
-    header.className = 'code-block-header';
-    header.innerHTML = `
-      <span class="collapsible-code-label">${this.escapeHtml(language)} - ${lineCount} line${lineCount !== 1 ? 's' : ''}</span>
-      <button class="copy-code-btn" title="Copy code">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
-      </button>
-    `;
-
-    const copyBtn = header.querySelector('.copy-code-btn');
-    copyBtn.addEventListener('click', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      navigator.clipboard.writeText(code).then(() => {
-        const orig = copyBtn.innerHTML;
-        copyBtn.innerHTML = '<svg viewBox="0 0 20 20" fill="#34d399"><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"/></svg>';
-        setTimeout(() => { copyBtn.innerHTML = orig; }, 2000);
-      });
-    });
-
-    const preStyle = "background:var(--color-bg-code);padding:1rem;border-radius:0 0 0.375rem 0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:var(--color-code-text);border:1px solid var(--color-code-border);border-top:none;margin:0";
-    const codeContainer = document.createElement('div');
-    codeContainer.innerHTML = `<pre style="${preStyle}"><code class="lazy-hl">${this.escapeHtml(code)}</code></pre>`;
-
-    div.appendChild(header);
-    div.appendChild(codeContainer);
-
-    return div;
-  }
-
-  renderBlockThinking(block, context) {
-    const thinking = block.thinking || '';
-    const hasSignature = !!block.signature;
-    const div = document.createElement('div');
-    div.className = 'block-thinking';
-    div.classList.add(this._getBlockTypeClass('thinking'));
-
-    if (!thinking) {
-      div.style.cssText = 'display:flex;align-items:center;gap:0.375rem;padding:0.25rem 0;font-size:0.7rem;color:var(--color-text-secondary);opacity:0.6';
-      div.innerHTML = '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.875rem;height:0.875rem"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></svg>'
-        + '<span>Thinking</span>'
-        + (hasSignature ? '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem;color:#3b82f6"><path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 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>' : '');
-      return div;
-    }
-
-    div.innerHTML = '<details>'
-      + '<summary>'
-      + '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>'
-      + '<span>Thinking Process</span>'
-      + (hasSignature ? '<span style="margin-left:0.5rem;font-size:0.65rem;opacity:0.5;font-weight:400">verified</span>' : '')
-      + '</summary>'
-      + '<div class="thinking-content">' + this.parseAndRenderMarkdown(thinking) + '</div>'
-      + '</details>';
-    return div;
-  }
-
-  getToolIcon(toolName) {
-    const icons = {
-      Read: '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"/></svg>',
-      Write: '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/></svg>',
-      Edit: '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"/><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"/></svg>',
-      Bash: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/></svg>',
-      Glob: '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/></svg>',
-      Grep: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/></svg>',
-      WebFetch: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 012 2v1a2 2 0 01-2 2 2 2 0 01-2 2v.5a6.003 6.003 0 01-6.668-7.473z" clip-rule="evenodd"/></svg>',
-      WebSearch: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/></svg>',
-      TodoWrite: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 011 1v3.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L6 11.586V8a1 1 0 011-1z" clip-rule="evenodd"/></svg>',
-      Task: '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/></svg>',
-      NotebookEdit: '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"/></svg>'
-    };
-    return icons[toolName] || '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10.666a1 1 0 11-1.64-1.118L9.687 10H5a1 1 0 01-.82-1.573l7-10.666a1 1 0 011.12-.373z" clip-rule="evenodd"/></svg>';
-  }
-
-  renderFilePath(filePath) {
-    if (!filePath) return '';
-    const parts = pathSplit(filePath);
-    const fileName = parts.pop();
-    const dir = parts.join('/');
-    return `<div class="tool-param-file"><span class="file-icon">&#128196;</span>${dir ? `<span class="file-dir">${this.escapeHtml(dir)}/</span>` : ''}<span class="file-name">${this.escapeHtml(fileName)}</span></div>`;
-  }
-
-  renderSmartParams(toolName, input) {
-    if (!input || Object.keys(input).length === 0) return '';
-
-    const normalizedName = toolName.replace(/^mcp__.*?__/, '');
-
-    switch (normalizedName) {
-      case 'Read':
-        return `<div class="tool-params">${this.renderFilePath(input.file_path)}${input.offset ? `<div style="margin-top:0.375rem;font-size:0.75rem;color:var(--color-text-secondary)">Lines ${input.offset}${input.limit ? '–' + (input.offset + input.limit) : '+'}</div>` : ''}</div>`;
-
-      case 'Write':
-        return `<div class="tool-params">${this.renderFilePath(input.file_path)}${input.content ? this.renderContentPreview(input.content, 'Content') : ''}</div>`;
-
-      case 'Edit': {
-        let html = `<div class="tool-params">${this.renderFilePath(input.file_path)}`;
-        if (input.old_string || input.new_string) {
-          html += `<div class="tool-param-diff" style="margin-top:0.5rem">`;
-          if (input.old_string) {
-            html += `<div class="diff-header">Remove</div><div class="diff-old">${this.escapeHtml(this.truncateContent(input.old_string, 500))}</div>`;
-          }
-          if (input.new_string) {
-            html += `<div class="diff-header">Add</div><div class="diff-new">${this.escapeHtml(this.truncateContent(input.new_string, 500))}</div>`;
-          }
-          html += '</div>';
-        }
-        return html + '</div>';
-      }
-
-      case 'Bash': {
-        const cmd = input.command || input.commands || '';
-        const cmdText = typeof cmd === 'string' ? cmd : JSON.stringify(cmd);
-        let html = `<div class="tool-params"><div class="tool-param-command"><span class="prompt-char">$</span><span class="command-text">${this.escapeHtml(cmdText)}</span></div>`;
-        if (input.description) html += `<div style="margin-top:0.375rem;font-size:0.75rem;color:var(--color-text-secondary)">${this.escapeHtml(input.description)}</div>`;
-        return html + '</div>';
-      }
-
-      case 'Glob':
-        return `<div class="tool-params"><div class="tool-param-query"><span class="query-icon">&#128193;</span><code style="font-size:0.85rem">${this.escapeHtml(input.pattern || '')}</code></div>${input.path ? `<div style="margin-top:0.25rem;font-size:0.75rem;color:var(--color-text-secondary)">in ${this.escapeHtml(input.path)}</div>` : ''}</div>`;
-
-      case 'Grep':
-        return `<div class="tool-params"><div class="tool-param-query"><span class="query-icon">&#128269;</span><code style="font-size:0.85rem">${this.escapeHtml(input.pattern || '')}</code></div>${input.path ? `<div style="margin-top:0.25rem;font-size:0.75rem;color:var(--color-text-secondary)">in ${this.escapeHtml(input.path)}</div>` : ''}${input.glob ? `<div style="margin-top:0.125rem;font-size:0.7rem;color:var(--color-text-secondary)">files: ${this.escapeHtml(input.glob)}</div>` : ''}</div>`;
-
-      case 'WebFetch':
-        return `<div class="tool-params"><div class="tool-param-url"><span class="url-icon">&#127760;</span>${this.escapeHtml(input.url || '')}</div>${input.prompt ? `<div style="margin-top:0.375rem;font-size:0.8rem;color:var(--color-text-secondary)">${this.escapeHtml(this.truncateContent(input.prompt, 150))}</div>` : ''}</div>`;
-
-      case 'WebSearch':
-        return `<div class="tool-params"><div class="tool-param-query"><span class="query-icon">&#128269;</span><strong style="font-size:0.85rem">${this.escapeHtml(input.query || '')}</strong></div></div>`;
-
-      case 'TodoWrite':
-        if (input.todos && Array.isArray(input.todos)) {
-          const statusIcons = { completed: '&#9989;', in_progress: '&#9881;', pending: '&#9744;' };
-          const completedCount = input.todos.filter(t => t.status === 'completed').length;
-          const totalCount = input.todos.length;
-          const items = input.todos.map(t => `<div class="todo-item"><span class="todo-status">${statusIcons[t.status] || '&#9744;'}</span><span class="todo-text">${this.escapeHtml(t.content || '')}</span></div>`).join('');
-          const summary = `<summary class="folded-tool-bar" style="cursor:pointer;padding:0.5rem;background:var(--color-bg-secondary);border-radius:0.25rem;user-select:none"><span style="font-weight:600;font-size:0.9rem">📋 Tasks</span><span style="margin-left:0.5rem;font-size:0.8rem;color:var(--color-text-secondary)">${completedCount}/${totalCount} complete</span></summary>`;
-          return `<details class="folded-tool" open>${summary}<div class="folded-tool-body tool-param-todos" style="padding:0.75rem">${items}</div></details>`;
-        }
-        return this.renderJsonParams(input);
-
-      case 'Task':
-        return `<div class="tool-params">${input.description ? `<div style="font-weight:600;font-size:0.85rem;margin-bottom:0.375rem">${this.escapeHtml(input.description)}</div>` : ''}${input.prompt ? `<div style="font-size:0.8rem;color:var(--color-text-secondary);max-height:100px;overflow-y:auto;white-space:pre-wrap;word-break:break-word">${this.escapeHtml(this.truncateContent(input.prompt, 300))}</div>` : ''}${input.subagent_type ? `<div style="margin-top:0.375rem;font-size:0.7rem"><code style="background:var(--color-bg-secondary);padding:0.125rem 0.375rem;border-radius:0.25rem">${this.escapeHtml(input.subagent_type)}</code></div>` : ''}</div>`;
-
-      case 'NotebookEdit':
-        return `<div class="tool-params">${this.renderFilePath(input.notebook_path)}${input.new_source ? this.renderContentPreview(input.new_source, 'Cell content') : ''}</div>`;
-
-      case 'dev__execute':
-      case 'dev_execute':
-      case 'execute': {
-        let html = '<div class="tool-params">';
-
-        if (input.workingDirectory) {
-          html += `<div style="margin-bottom:0.5rem;font-size:0.75rem;color:var(--color-text-secondary)"><span style="opacity:0.7">📁</span> ${this.escapeHtml(input.workingDirectory)}</div>`;
-        }
-
-        if (input.timeout) {
-          html += `<div style="margin-bottom:0.5rem;font-size:0.75rem;color:var(--color-text-secondary)"><span style="opacity:0.7">⏱️</span> Timeout: ${Math.round(input.timeout / 1000)}s</div>`;
-        }
-
-        if (input.code) {
-          const codeLines = input.code.split('\n');
-          const lineCount = codeLines.length;
-          const truncated = lineCount > 50;
-          const displayCode = truncated ? codeLines.slice(0, 50).join('\n') : input.code;
-          const lang = input.runtime || 'javascript';
-          html += `<div style="margin-top:0.5rem"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.25rem"><span style="font-size:0.7rem;font-weight:600;color:#0891b2;text-transform:uppercase">${this.escapeHtml(lang)}</span><span style="font-size:0.7rem;color:var(--color-text-secondary)">${lineCount} lines</span></div>${StreamingRenderer.renderCodeWithHighlight(displayCode, this.escapeHtml.bind(this), true)}${truncated ? `<div style="font-size:0.7rem;color:var(--color-text-secondary);text-align:center;padding:0.25rem">... ${lineCount - 50} more lines</div>` : ''}</div>`;
-        }
-
-        if (input.commands) {
-          const cmds = Array.isArray(input.commands) ? input.commands : [input.commands];
-          cmds.forEach(cmd => {
-            html += `<div style="margin-top:0.375rem"><div class="tool-param-command"><span class="prompt-char">$</span><span class="command-text">${this.escapeHtml(typeof cmd === 'string' ? cmd : JSON.stringify(cmd))}</span></div></div>`;
-          });
-        }
-
-        html += '</div>';
-        return html;
-      }
-
-      default:
-        return this.renderJsonParams(input);
-    }
-  }
-
-  renderContentPreview(content, label) {
-    const maxLen = 500;
-    const truncated = content.length > maxLen;
-    const displayContent = truncated ? content.substring(0, maxLen) : content;
-    const lineCount = content.split('\n').length;
-    const codeBody = StreamingRenderer.detectCodeContent(displayContent)
-      ? StreamingRenderer.renderCodeWithHighlight(displayContent, this.escapeHtml.bind(this), true)
-      : `<div class="preview-body">${this.escapeHtml(displayContent)}</div>`;
-    return `<div class="tool-param-content-preview" style="margin-top:0.5rem"><div class="preview-header"><span>${this.escapeHtml(label)}</span><span style="font-weight:400">${lineCount} lines${truncated ? ' (truncated)' : ''}</span></div>${codeBody}${truncated ? '<div class="preview-truncated">... ' + (content.length - maxLen) + ' more characters</div>' : ''}</div>`;
-  }
-
-  renderJsonParams(input) {
-    return `<div class="tool-params">${this.renderParametersBeautiful(input)}</div>`;
-  }
-
-  getToolUseTitle(toolName, input) {
-    const normalizedName = toolName.replace(/^mcp__.*?__/, '');
-    if (normalizedName === 'Edit' && input.file_path) {
-      const parts = pathSplit(input.file_path);
-      const fileName = parts.pop();
-      const dir = parts.slice(-2).join('/');
-      return dir ? `${dir}/${fileName}` : fileName;
-    }
-    if (normalizedName === 'Read' && input.file_path) {
-      return pathBasename(input.file_path);
-    }
-    if (normalizedName === 'Write' && input.file_path) {
-      return pathBasename(input.file_path);
-    }
-    if (normalizedName === 'Bash' || normalizedName === 'bash') {
-      const cmd = input.command || input.commands || '';
-      const cmdText = typeof cmd === 'string' ? cmd : JSON.stringify(cmd);
-      return cmdText.length > 60 ? cmdText.substring(0, 57) + '...' : cmdText;
-    }
-    if (normalizedName === 'Glob' && input.pattern) return input.pattern;
-    if (normalizedName === 'Grep' && input.pattern) return input.pattern;
-    if (normalizedName === 'WebFetch' && input.url) {
-      try { return new URL(input.url).hostname; } catch (e) { return input.url.substring(0, 40); }
-    }
-    if (normalizedName === 'WebSearch' && input.query) return input.query.substring(0, 50);
-    if (input.file_path) return pathBasename(input.file_path);
-    if (input.command) {
-      const c = typeof input.command === 'string' ? input.command : JSON.stringify(input.command);
-      return c.length > 50 ? c.substring(0, 47) + '...' : c;
-    }
-    if (input.query) return input.query.substring(0, 50);
-    return '';
-  }
-
-  getToolUseDisplayName(toolName) {
-    const normalized = toolName.replace(/^mcp__.*?__/, '');
-    const knownTools = ['Read','Write','Edit','Bash','Glob','Grep','WebFetch','WebSearch','TodoWrite','Task','NotebookEdit'];
-    if (knownTools.includes(normalized)) return normalized;
-    if (toolName.startsWith('mcp__')) {
-      const parts = toolName.split('__');
-      return parts.length >= 3 ? parts[2] : parts[parts.length - 1];
-    }
-    return normalized || toolName;
-  }
-
-  renderBlockToolUse(block, context) {
-    const toolName = block.name || 'unknown';
-    const input = block.input || {};
-
-    const details = document.createElement('details');
-    details.className = 'block-tool-use folded-tool';
-    if (block.id) details.dataset.toolUseId = block.id;
-    details.dataset.startedAt = Date.now();
-    details.classList.add(this._getBlockTypeClass('tool_use'));
-    details.classList.add(this._getToolColorClass(toolName));
-    const normalizedForOpen = toolName.replace(/^mcp__.*?__/, '');
-    if (normalizedForOpen === 'TodoWrite') details.open = true;
-    const summary = document.createElement('summary');
-    summary.className = 'folded-tool-bar';
-    const displayName = this.getToolUseDisplayName(toolName);
-    const titleInfo = this.getToolUseTitle(toolName, input);
-    summary.innerHTML = `
-      <span class="folded-tool-icon">${this.getToolIcon(toolName)}</span>
-      <span class="folded-tool-name">${this.escapeHtml(displayName)}</span>
-      ${titleInfo ? `<span class="folded-tool-desc">${this.escapeHtml(titleInfo)}</span>` : ''}
-    `;
-    details.appendChild(summary);
-    if (Object.keys(input).length > 0) {
-      const paramsDiv = document.createElement('div');
-      paramsDiv.className = 'folded-tool-body';
-      paramsDiv.innerHTML = this.renderSmartParams(toolName, input);
-      details.appendChild(paramsDiv);
-    }
-    return details;
-  }
-
-  renderSmartContent(contentStr) {
-    const trimmed = contentStr.trim();
-
-    if (trimmed.startsWith('data:image/')) {
-      return `<div style="padding:0.5rem"><img src="${this.escapeHtml(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);
-        return `<div style="padding:0.625rem 1rem">${this.renderParametersBeautiful(parsed)}</div>`;
-      } catch (e) {}
-    }
-
-    const lines = trimmed.split('\n');
-    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)">${this.escapeHtml(dir)}/</span><span style="font-weight:600">${this.escapeHtml(name)}</span></div>`;
-      }).join('');
-      return `<div style="padding:0.625rem 1rem">${fileHtml}</div>`;
-    }
-
-    if (trimmed.length > 1500) {
-      return `<div class="result-body collapsed" style="padding:0.625rem 1rem;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;line-height:1.5">${this.escapeHtml(trimmed)}</div><button class="expand-btn" onclick="this.previousElementSibling.classList.toggle('collapsed');this.textContent=this.textContent==='Show more'?'Show less':'Show more'">Show more</button>`;
-    }
-
-    return `<div style="padding:0.625rem 1rem;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;line-height:1.5">${this.escapeHtml(trimmed)}</div>`;
-  }
-
-  renderParametersBeautiful(data, depth = 0) {
-    if (data === null || data === undefined) return `<span style="color:var(--color-text-secondary);font-style:italic">null</span>`;
-    if (typeof data === 'boolean') return `<span style="color:#d97706;font-weight:600">${data}</span>`;
-    if (typeof data === 'number') return `<span style="color:#7c3aed;font-weight:600">${data}</span>`;
-
-    if (typeof data === 'string') {
-      if (data.length > 200 && StreamingRenderer.detectCodeContent(data)) {
-        const displayData = data.length > 1000 ? data.substring(0, 1000) : data;
-        const suffix = data.length > 1000 ? `<div style="font-size:0.7rem;color:var(--color-text-secondary);text-align:center;padding:0.25rem">... ${data.length - 1000} more characters</div>` : '';
-        return `<div style="max-height:200px;overflow-y:auto">${StreamingRenderer.renderCodeWithHighlight(displayData, this.escapeHtml.bind(this), true)}${suffix}</div>`;
-      }
-      if (data.length > 500) {
-        const lines = data.split('\n').length;
-        return `<div style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;background:var(--color-bg-code);color:var(--color-code-text);padding:0.5rem;border-radius:0.375rem;line-height:1.5">${this.escapeHtml(data.substring(0, 1000))}${data.length > 1000 ? '\n... (' + (data.length - 1000) + ' more chars, ' + lines + ' lines)' : ''}</div>`;
-      }
-      const looksLikePath = data.startsWith('/') || /^[A-Za-z]:[\\\/]/.test(data);
-      if (looksLikePath && !data.includes(' ') && data.includes('.')) return this.renderFilePath(data);
-      return `<span style="color:var(--color-text-primary)">${this.escapeHtml(data)}</span>`;
-    }
-
-    if (Array.isArray(data)) {
-      if (data.length === 0) return `<span style="color:var(--color-text-secondary)">[]</span>`;
-      if (data.every(i => typeof i === 'string') && data.length <= 20) {
-        return `<div style="display:flex;flex-direction:column;gap:0.125rem;${depth > 0 ? 'padding-left:1rem' : ''}">${data.map((i, idx) => `<div style="display:flex;align-items:center;gap:0.375rem"><span style="color:var(--color-text-secondary);font-size:0.65rem;opacity:0.5">•</span><span style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem">${this.escapeHtml(i)}</span></div>`).join('')}</div>`;
-      }
-      return `<div style="display:flex;flex-direction:column;gap:0.25rem;${depth > 0 ? 'padding-left:1rem' : ''}">${data.map((item, i) => `<div style="display:flex;gap:0.5rem;align-items:flex-start"><span style="color:var(--color-text-secondary);font-size:0.7rem;min-width:1.5rem;text-align:right;flex-shrink:0">${i}</span><div style="flex:1;min-width:0">${this.renderParametersBeautiful(item, depth + 1)}</div></div>`).join('')}</div>`;
-    }
-
-    if (typeof data === 'object') {
-      const entries = Object.entries(data);
-      if (entries.length === 0) return `<span style="color:var(--color-text-secondary)">{}</span>`;
-      return `<div style="display:flex;flex-direction:column;gap:0.375rem;${depth > 0 ? 'padding-left:1rem' : ''}">${entries.map(([k, v]) => `<div style="display:flex;gap:0.5rem;align-items:flex-start"><span style="font-weight:600;font-size:0.75rem;color:#0891b2;flex-shrink:0;min-width:fit-content;font-family:'Monaco','Menlo','Ubuntu Mono',monospace">${this.escapeHtml(k)}</span><div style="flex:1;min-width:0;font-size:0.8rem">${this.renderParametersBeautiful(v, depth + 1)}</div></div>`).join('')}</div>`;
-    }
-
-    return `<span>${this.escapeHtml(String(data))}</span>`;
-  }
-
-  static 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>`;
-  }
-
-  static renderSystemReminders(reminders, esc) {
-    if (!reminders || reminders.length === 0) return '';
-
-    const reminderHtml = reminders.map(reminder => {
-      const lines = reminder.split('\n').filter(l => l.trim());
-      const formattedLines = lines.map(line => {
-        if (line.includes('IMPORTANT:') || line.includes('WARNING:')) {
-          return `<div style="font-weight:600;color:var(--color-warning);margin:0.25rem 0">${esc(line)}</div>`;
-        }
-        return `<div style="margin:0.125rem 0">${esc(line)}</div>`;
-      }).join('');
-
-      return formattedLines;
-    }).join('');
-
-    return `
-      <div style="margin-top:1rem;padding:0.75rem;background:var(--color-bg-secondary);border-left:3px solid var(--color-info);border-radius:0.25rem;font-size:0.8rem;color:var(--color-text-secondary)">
-        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
-          <span style="color:var(--color-info)">ℹ</span>
-          <span style="font-weight:600;font-size:0.85rem;color:var(--color-text-primary)">System Reminder</span>
-        </div>
-        ${reminderHtml}
-      </div>
-    `;
-  }
-
-  static detectCodeContent(content) {
-    const codePatterns = [
-      /^\s*(function|const|let|var|class|import|export|async|await)/m,  // JavaScript
-      /^\s*(def|class|import|from|if __name__|lambda|async def)/m,      // Python
-      /^\s*(public|private|protected|class|interface|package|import)/m,  // Java/TypeScript
-      /^\s*(<\?php|namespace|use|trait)/m,                              // PHP
-      /^\s*(#include|int main|void|struct|typedef)/m,                   // C/C++
-      /[{}\[\];()]/,                                                    // Brackets and semicolons
-      /=>|->|::/,                                                         // Arrow functions, pointers
-    ];
-
-    return codePatterns.some(pattern => pattern.test(content));
-  }
-
-  static renderCodeWithHighlight(code, esc, flat = false) {
-    const preStyle = "background:var(--color-bg-code);padding:1rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:var(--color-code-text);border:1px solid var(--color-code-border);margin:0";
-    const codeHtml = `<pre style="${preStyle}"><code class="lazy-hl">${esc(code)}</code></pre>`;
-    if (flat) return codeHtml;
-    const lineCount = code.split('\n').length;
-    const summaryLabel = `code - ${lineCount} line${lineCount !== 1 ? 's' : ''}`;
-    return `<details class="collapsible-code"><summary class="collapsible-code-summary">${summaryLabel}</summary>${codeHtml}</details>`;
-  }
-
-  static _setupGlobalLazyHL() {
-    if (StreamingRenderer._lazyHLSetup) return;
-    StreamingRenderer._lazyHLSetup = true;
-    const root = document.getElementById('output-scroll') || document.body;
-    root.addEventListener('toggle', (e) => {
-      const details = e.target;
-      if (!details.open || details.tagName !== 'DETAILS') return;
-      const codeEls = details.querySelectorAll('code.lazy-hl');
-      if (codeEls.length === 0) return;
-      if (typeof hljs === 'undefined') return;
-      for (const el of codeEls) {
-        try {
-          const raw = el.textContent;
-          const result = hljs.highlightAuto(raw);
-          el.classList.remove('lazy-hl');
-          el.classList.add('hljs');
-          el.innerHTML = result.value;
-        } catch (_) {}
-      }
-    }, true);
-  }
-
-  static getToolDisplayName(toolName) {
-    const normalized = toolName.replace(/^mcp__.*?__/, '');
-    const knownTools = ['Read','Write','Edit','Bash','Glob','Grep','WebFetch','WebSearch','TodoWrite','Task','NotebookEdit'];
-    if (knownTools.includes(normalized)) return normalized;
-    if (toolName.startsWith('mcp__')) {
-      const parts = toolName.split('__');
-      return parts.length >= 3 ? parts[2] : parts[parts.length - 1];
-    }
-    return normalized || toolName;
-  }
-
-  static getToolTitle(toolName, input) {
-    const n = toolName.replace(/^mcp__.*?__/, '');
-    if (n === 'Edit' && input.file_path) { const p = pathSplit(input.file_path); const f = p.pop(); const d = p.slice(-2).join('/'); return d ? d+'/'+f : f; }
-    if (n === 'Read' && input.file_path) return pathBasename(input.file_path);
-    if (n === 'Write' && input.file_path) return pathBasename(input.file_path);
-    if ((n === 'Bash' || n === 'bash') && (input.command || input.commands)) { const c = typeof (input.command||input.commands) === 'string' ? (input.command||input.commands) : JSON.stringify(input.command||input.commands); return c.length > 60 ? c.substring(0,57)+'...' : c; }
-    if (n === 'Glob' && input.pattern) return input.pattern;
-    if (n === 'Grep' && input.pattern) return input.pattern;
-    if (n === 'WebFetch' && input.url) { try { return new URL(input.url).hostname; } catch(e) { return input.url.substring(0,40); } }
-    if (n === 'WebSearch' && input.query) return input.query.substring(0,50);
-    if (input.file_path) return pathBasename(input.file_path);
-    if (input.command) { const c = typeof input.command === 'string' ? input.command : JSON.stringify(input.command); return c.length > 50 ? c.substring(0,47)+'...' : c; }
-    if (input.query) return input.query.substring(0,50);
-    return '';
-  }
-
-  static renderParamsHTML(data, depth, esc) {
-    if (data === null || data === undefined) return `<span style="color:var(--color-text-secondary);font-style:italic">null</span>`;
-    if (typeof data === 'boolean') return `<span style="color:#d97706;font-weight:600">${data}</span>`;
-    if (typeof data === 'number') return `<span style="color:#7c3aed;font-weight:600">${data}</span>`;
-
-    if (typeof data === 'string') {
-      if (data.length > 200 && StreamingRenderer.detectCodeContent(data)) {
-        const displayData = data.length > 1000 ? data.substring(0, 1000) : data;
-        const suffix = data.length > 1000 ? `<div style="font-size:0.7rem;color:var(--color-text-secondary);text-align:center;padding:0.25rem">... ${data.length - 1000} more characters</div>` : '';
-        return `<div style="max-height:200px;overflow-y:auto">${StreamingRenderer.renderCodeWithHighlight(displayData, esc, true)}${suffix}</div>`;
-      }
-      if (data.length > 500) {
-        return `<div style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;background:var(--color-bg-code);color:var(--color-code-text);padding:0.5rem;border-radius:0.375rem;line-height:1.5">${esc(data.substring(0, 1000))}${data.length > 1000 ? '\n... (' + (data.length - 1000) + ' more chars)' : ''}</div>`;
-      }
-      const looksLikePath = /^[A-Za-z]:[\\\/]/.test(data) || data.startsWith('/');
-      if (looksLikePath && !data.includes(' ') && data.includes('.')) {
-        const parts = pathSplit(data);
-        const name = parts.pop();
-        const dir = parts.join('/');
-        return `<div style="display:flex;align-items:center;gap:0.375rem;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.8rem"><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>`;
-      }
-      return `<span style="color:var(--color-text-primary)">${esc(data)}</span>`;
-    }
-
-    if (Array.isArray(data)) {
-      if (data.length === 0) return `<span style="color:var(--color-text-secondary)">[]</span>`;
-      if (data.every(i => typeof i === 'string') && data.length <= 20) {
-        return `<div style="display:flex;flex-direction:column;gap:0.125rem;${depth > 0 ? 'padding-left:1rem' : ''}">${data.map((i, idx) => `<div style="display:flex;align-items:center;gap:0.375rem"><span style="color:var(--color-text-secondary);font-size:0.65rem;opacity:0.5">•</span><span style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem">${esc(i)}</span></div>`).join('')}</div>`;
-      }
-      return `<div style="display:flex;flex-direction:column;gap:0.25rem;${depth > 0 ? 'padding-left:1rem' : ''}">${data.map((item, i) => `<div style="display:flex;gap:0.5rem;align-items:flex-start"><span style="color:var(--color-text-secondary);font-size:0.7rem;min-width:1.5rem;text-align:right;flex-shrink:0">${i}</span><div style="flex:1;min-width:0">${StreamingRenderer.renderParamsHTML(item, depth + 1, esc)}</div></div>`).join('')}</div>`;
-    }
-
-    if (typeof data === 'object') {
-      const entries = Object.entries(data);
-      if (entries.length === 0) return `<span style="color:var(--color-text-secondary)">{}</span>`;
-      return `<div style="display:flex;flex-direction:column;gap:0.375rem;${depth > 0 ? 'padding-left:1rem' : ''}">${entries.map(([k, v]) => `<div style="display:flex;gap:0.5rem;align-items:flex-start"><span style="font-weight:600;font-size:0.75rem;color:#0891b2;flex-shrink:0;min-width:fit-content;font-family:'Monaco','Menlo','Ubuntu Mono',monospace">${esc(k)}</span><div style="flex:1;min-width:0;font-size:0.8rem">${StreamingRenderer.renderParamsHTML(v, depth + 1, esc)}</div></div>`).join('')}</div>`;
-    }
-
-    return `<span>${esc(String(data))}</span>`;
-  }
-
-  renderBlockToolResult(block, context) {
-    const content = block.content || '';
-    const toolName = block.tool_name || block.name || '';
-
-    if (toolName.includes('TodoWrite') || (typeof content === 'object' && Array.isArray(content?.todos))) {
-      return null;
-    }
-
-    const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
-    const isError = (block.is_error || false) && !contentStr.trimStart().startsWith('exec ran successfully.');
-
-    const container = document.createElement('div');
-    container.className = 'tool-result-pending';
-    container.dataset.eventType = 'tool_result';
-    container.dataset.isError = isError ? '1' : '0';
-    if (block.tool_use_id) container.dataset.toolUseId = block.tool_use_id;
-    container.style.display = 'none';
-
-    const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this), true);
-    container.innerHTML = renderedContent;
-
-    return container;
-  }
-
-  renderBlockImage(block, context) {
-    const div = document.createElement('div');
-    div.className = 'block-image';
-    div.classList.add(this._getBlockTypeClass('image'));
-
-    let src = block.image || block.src || '';
-    const alt = block.alt || 'Image';
-
-    if (block.data && block.media_type) {
-      src = `data:${block.media_type};base64,${block.data}`;
-    }
-
-    div.innerHTML = `
-      <img src="${this.escapeHtml(src)}" alt="${this.escapeHtml(alt)}" loading="lazy">
-      ${block.alt ? `<div class="image-caption">${this.escapeHtml(alt)}</div>` : ''}
-    `;
-
-    return div;
-  }
-
-  renderBlockBash(block, context) {
-    const div = document.createElement('div');
-    div.className = 'block-bash';
-    div.classList.add(this._getBlockTypeClass('bash'));
-
-    const command = block.command || block.code || '';
-    const output = block.output || '';
-
-    let html = `<div class="bash-command"><span class="prompt">$</span><code>${this.escapeHtml(command)}</code></div>`;
-
-    if (output) {
-      if (StreamingRenderer.detectCodeContent(output)) {
-        html += StreamingRenderer.renderCodeWithHighlight(output, this.escapeHtml.bind(this), true);
-      } else {
-        html += `<pre class="bash-output"><code>${this.escapeHtml(output)}</code></pre>`;
-      }
-    }
-
-    div.innerHTML = html;
-    return div;
-  }
-
-  renderBlockSystem(block, context) {
-    if (block.subtype === 'compact_boundary') return this.renderCompactBoundary(block);
-    if (block.subtype === 'turn_duration') return this.renderTurnDuration(block);
-    if (!block.model && !block.cwd && !block.tools) return null;
-    const details = document.createElement('details');
-    details.className = 'folded-tool folded-tool-info permanently-expanded';
-    details.dataset.eventType = 'system';
-    details.classList.add(this._getBlockTypeClass('system'));
-    const desc = block.model ? this.escapeHtml(block.model) : 'Session';
-    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="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg></span>
-      <span class="folded-tool-name">Session</span>
-      <span class="folded-tool-desc">${desc}</span>
-    `;
-    details.appendChild(summary);
-    const body = document.createElement('div');
-    body.className = 'folded-tool-body block-system';
-    body.innerHTML = `
-      <div class="system-body">
-        ${block.model ? `<div class="sys-field"><span class="sys-label">Model</span><span class="sys-value"><code>${this.escapeHtml(block.model)}</code></span></div>` : ''}
-        ${block.cwd ? `<div class="sys-field"><span class="sys-label">Directory</span><span class="sys-value"><code>${this.escapeHtml(block.cwd)}</code></span></div>` : ''}
-        ${block.session_id ? `<div class="sys-field"><span class="sys-label">Session</span><span class="sys-value"><code>${this.escapeHtml(block.session_id)}</code></span></div>` : ''}
-        ${block.tools && Array.isArray(block.tools) ? `<div class="sys-field" style="flex-direction:column;gap:0.375rem"><span class="sys-label">Tools (${block.tools.length})</span><div class="tools-list">${block.tools.map(t => `<span class="tool-badge">${this.escapeHtml(t)}</span>`).join('')}</div></div>` : ''}
-      </div>
-    `;
-    details.appendChild(body);
-    return details;
-  }
-
-  renderBlockResult(block, context) {
-    const isError = block.is_error || false;
-    const duration = block.duration_ms ? (block.duration_ms / 1000).toFixed(1) + 's' : '';
-    const cost = block.total_cost_usd ? '$' + block.total_cost_usd.toFixed(4) : '';
-    const turns = block.num_turns || '';
-    const statsDesc = [duration, cost, turns ? turns + ' turns' : ''].filter(Boolean).join(' / ');
-
-    const details = document.createElement('details');
-    details.className = isError ? 'folded-tool folded-tool-error permanently-expanded' : 'folded-tool permanently-expanded';
-    details.dataset.eventType = 'result';
-    details.classList.add(this._getBlockTypeClass(isError ? 'error' : 'result'));
-
-    const iconSvg = 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 summary = document.createElement('summary');
-    summary.className = 'folded-tool-bar';
-    summary.innerHTML = `
-      <span class="folded-tool-icon">${iconSvg}</span>
-      <span class="folded-tool-name">${isError ? 'Failed' : 'Complete'}</span>
-      <span class="folded-tool-desc">${this.escapeHtml(statsDesc)}</span>
-    `;
-    details.appendChild(summary);
-
-    if (block.result || duration || cost || turns) {
-      const body = document.createElement('div');
-      body.className = 'folded-tool-body';
-      let bodyHtml = '';
-      if (duration || cost || turns) {
-        bodyHtml += `<div class="block-result"><div class="result-stats">
-          ${duration ? `<div class="result-stat"><span class="stat-icon">&#9202;</span><span class="stat-value">${this.escapeHtml(duration)}</span><span class="stat-label">duration</span></div>` : ''}
-          ${cost ? `<div class="result-stat"><span class="stat-icon">&#128176;</span><span class="stat-value">${this.escapeHtml(cost)}</span><span class="stat-label">cost</span></div>` : ''}
-          ${turns ? `<div class="result-stat"><span class="stat-icon">&#128260;</span><span class="stat-value">${this.escapeHtml(String(turns))}</span><span class="stat-label">turns</span></div>` : ''}
-        </div></div>`;
-      }
-      if (block.result) {
-        const r = typeof block.result === 'string' ? block.result : JSON.stringify(block.result, null, 2);
-        const rendered = this.containsHtmlTags(r) ? '<div class="html-content">' + this.sanitizeHtml(r) + '</div>' : `<div style="font-size:0.8rem;white-space:pre-wrap;word-break:break-word;line-height:1.5">${this.escapeHtml(r)}</div>`;
-        bodyHtml += rendered;
-      }
-      body.innerHTML = bodyHtml;
-      details.appendChild(body);
-    }
-
-    return details;
-  }
-
-  renderBlockToolStatus(block, context) {
-    const status = block.status || 'pending';
-    const statusIcons = {
-      pending: '<svg viewBox="0 0 20 20" fill="currentColor" style="color:var(--color-text-secondary)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>',
-      in_progress: '<svg viewBox="0 0 20 20" fill="currentColor" class="animate-spin" style="color:var(--color-info)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>'
-    };
-    const statusLabels = {
-      pending: 'Pending',
-      in_progress: 'Running...'
-    };
-
-    const div = document.createElement('div');
-    div.className = 'block-tool-status';
-    div.dataset.toolUseId = block.tool_use_id || '';
-    div.classList.add(this._getBlockTypeClass('tool_status'));
-    div.innerHTML = `
-      <div style="display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;font-size:0.75rem;color:var(--color-text-secondary)">
-        ${statusIcons[status] || statusIcons.pending}
-        <span>${statusLabels[status] || this.escapeHtml(status)}</span>
-      </div>
-    `;
-    return div;
-  }
-
-  renderBlockHookProgress(block, context) {
-    const hookEvent = block.hookEvent || block.hookName || '';
-    const hookIcons = {
-      PreToolUse: '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10.666a1 1 0 11-1.64-1.118L9.687 10H5a1 1 0 01-.82-1.573l7-10.666a1 1 0 011.12-.373z" clip-rule="evenodd"/></svg>',
-      PostToolUse: '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem"><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"/></svg>',
-      Stop: '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd"/></svg>'
-    };
-    const icon = hookIcons[hookEvent.split(':')[0]] || hookIcons.PreToolUse;
-    const label = hookEvent.includes(':') ? hookEvent.split(':').pop() : hookEvent;
-    const div = document.createElement('div');
-    div.className = 'block-hook-progress';
-    div.dataset.hookEvent = hookEvent;
-    div.style.cssText = 'display:none';
-    div.innerHTML = '<span class="hook-badge" style="display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.5rem;font-size:0.65rem;color:var(--color-text-secondary);opacity:0.5">' + icon + '<span>' + this.escapeHtml(label) + '</span></span>';
-    return div;
-  }
-
-  renderBlockUsage(block, context) {
-    const usage = block.usage || {};
-    const used = usage.used || 0;
-    const size = usage.size || 0;
-    const cost = usage.cost ? '$' + usage.cost.toFixed(4) : '';
-
-    const div = document.createElement('div');
-    div.className = 'block-usage';
-    div.classList.add(this._getBlockTypeClass('usage'));
-    div.innerHTML = `
-      <div style="display:flex;gap:1rem;padding:0.25rem 0.5rem;font-size:0.7rem;color:var(--color-text-secondary);background:var(--color-bg-secondary);border-radius:0.25rem">
-        ${used ? `<span><strong>Used:</strong> ${used.toLocaleString()}</span>` : ''}
-        ${size ? `<span><strong>Context:</strong> ${size.toLocaleString()}</span>` : ''}
-        ${cost ? `<span><strong>Cost:</strong> ${cost}</span>` : ''}
-      </div>
-    `;
-    return div;
-  }
-
-  renderBlockPlan(block, context) {
-    const entries = block.entries || [];
-    if (entries.length === 0) return null;
-
-    const priorityColors = {
-      high: '#ef4444',
-      medium: '#f59e0b',
-      low: '#6b7280'
-    };
-    const statusIcons = {
-      pending: '○',
-      in_progress: '◐',
-      completed: '●'
-    };
-
-    const div = document.createElement('div');
-    div.className = 'block-plan';
-    div.classList.add(this._getBlockTypeClass('plan'));
-    div.innerHTML = `
-      <details class="folded-tool folded-tool-info">
-        <summary class="folded-tool-bar">
-          <span class="folded-tool-icon"><svg viewBox="0 0 20 20" fill="currentColor"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/></svg></span>
-          <span class="folded-tool-name">Plan</span>
-          <span class="folded-tool-desc">${entries.length} tasks</span>
-        </summary>
-        <div class="folded-tool-body">
-          <div style="display:flex;flex-direction:column;gap:0.375rem">
-            ${entries.map(e => `
-              <div style="display:flex;align-items:center;gap:0.5rem;font-size:0.8rem">
-                <span style="color:${priorityColors[e.priority] || priorityColors.low}">${statusIcons[e.status] || statusIcons.pending}</span>
-                <span style="${e.status === 'completed' ? 'text-decoration:line-through;opacity:0.6' : ''}">${this.escapeHtml(e.content || '')}</span>
-              </div>
-            `).join('')}
-          </div>
-        </div>
-      </details>
-    `;
-    return div;
-  }
-
-  renderBlockPremature(block, context) {
-    const div = document.createElement('div');
-    div.className = 'folded-tool folded-tool-error block-premature';
-    div.classList.add(this._getBlockTypeClass('premature'));
-    const code = block.exitCode != null ? ` (exit ${block.exitCode})` : '';
-    const stderrDisplay = block.stderrText ? `<div class="folded-tool-content" style="margin-top:8px;padding:8px;background:rgba(0,0,0,0.05);border-radius:4px;font-family:monospace;font-size:0.9em;white-space:pre-wrap;">${this.escapeHtml(block.stderrText)}</div>` : '';
-    div.innerHTML = `
-      <div class="folded-tool-bar" style="background:rgba(245,158,11,0.1)">
-        <span class="folded-tool-icon" style="color:#f59e0b"><svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg></span>
-        <span class="folded-tool-name" style="color:#f59e0b">ACP Ended Prematurely${this.escapeHtml(code)}</span>
-        <span class="folded-tool-desc">${this.escapeHtml(block.error || 'Process exited without output')}</span>
-      </div>
-      ${stderrDisplay}
-    `;
-    return div;
-  }
-
-  renderBlockGeneric(block, context) {
-    const div = document.createElement('div');
-    div.className = 'block-generic';
-    div.classList.add(this._getBlockTypeClass('generic'));
-
-    const fieldsHtml = Object.entries(block)
-      .filter(([key]) => key !== 'type')
-      .map(([key, value]) => {
-        let displayValue;
-        if (typeof value === 'string') {
-          displayValue = value.length > 200 ? value.substring(0, 200) + '...' : value;
-        } else if (typeof value === 'number' || typeof value === 'boolean') {
-          displayValue = String(value);
-        } else {
-          displayValue = JSON.stringify(value, null, 2);
-          if (displayValue.length > 200) displayValue = displayValue.substring(0, 200) + '...';
-        }
-        return `<div class="generic-field"><span class="field-key">${this.escapeHtml(key)}:</span><span class="field-value">${this.escapeHtml(displayValue)}</span></div>`;
-      }).join('');
-
-    div.innerHTML = `
-      <div class="generic-type">${this.escapeHtml(block.type)}</div>
-      <div class="generic-fields">${fieldsHtml}</div>
-    `;
-
-    return div;
-  }
-
-  renderBlockError(block, error) {
-    const div = document.createElement('div');
-    div.className = 'block-error';
-    div.classList.add(this._getBlockTypeClass('error'));
-
-    div.innerHTML = `
-      <div style="display:flex;align-items:flex-start;gap:0.625rem">
-        <svg viewBox="0 0 20 20" fill="currentColor" style="color:#ef4444;flex-shrink:0;margin-top:0.125rem">
-          <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>
-        <div>
-          <div style="font-weight:600;color:#991b1b">Render Error</div>
-          <div style="font-size:0.85rem;color:#7f1d1d;margin-top:0.25rem">${this.escapeHtml(error.message)}</div>
-        </div>
-      </div>
-    `;
-
-    return div;
-  }
-
-  renderStreamingStart(event) {
-    const div = document.createElement('div');
-    div.className = 'event-streaming-start card mb-3 p-4 alert alert-info';
-    div.dataset.eventId = event.id || event.sessionId || '';
-    div.dataset.eventType = 'streaming_start';
-
-    const time = new Date(event.timestamp).toLocaleTimeString();
-    div.innerHTML = `
-      <div class="flex items-center gap-2">
-        <svg class="w-5 h-5 text-info animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" opacity="0.25"></circle>
-          <path d="M4 12a8 8 0 018-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
-        </svg>
-        <div class="flex-1">
-          <h4 class="font-semibold text-info-content">Streaming Started</h4>
-          <p class="text-sm text-info-content/70">${time}</p>
-        </div>
-      </div>
-    `;
-    return div;
-  }
-
-  renderStreamingProgress(event) {
-    if (event.block) {
-      return this.renderBlock(event.block, event);
-    }
-
-    const div = document.createElement('div');
-    div.className = 'event-streaming-progress mb-2 p-2';
-    div.dataset.eventId = event.id || '';
-    div.dataset.eventType = 'streaming_progress';
-
-    const percentage = event.progress || 0;
-    div.innerHTML = `
-      <div class="flex items-center gap-2 text-sm">
-        <span class="text-secondary">${percentage}%</span>
-        <div class="progress progress-primary flex-1">
-          <div class="progress-bar" style="width: ${percentage}%"></div>
-        </div>
-      </div>
-    `;
-    return div;
-  }
-
-  renderStreamingComplete(event) {
-    const div = document.createElement('div');
-    div.className = 'event-streaming-complete card mb-3 p-4 alert alert-success rounded-lg';
-    div.dataset.eventId = event.id || event.sessionId || '';
-    div.dataset.eventType = 'streaming_complete';
-
-    const time = new Date(event.timestamp).toLocaleTimeString();
-    const eventCount = event.eventCount || 0;
-
-    div.innerHTML = `
-      <div class="flex items-start gap-3">
-        <div class="flex-shrink-0 mt-0.5">
-          <svg class="w-6 h-6 text-success animate-bounce" fill="currentColor" viewBox="0 0 20 20">
-            <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"></path>
-          </svg>
-        </div>
-        <div class="flex-1">
-          <h4 class="font-bold text-lg text-success-content">✨ Execution Complete</h4>
-          <div class="mt-2 grid grid-cols-2 gap-3 text-sm">
-            <div>
-              <span class="text-success font-semibold">${eventCount}</span>
-              <span class="text-success/70">events processed</span>
-            </div>
-            <div class="text-right">
-              <span class="text-success/70">${time}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    return div;
-  }
-
-  detectBase64Image(content) {
-    if (!content || typeof content !== 'string') return null;
-    const trimmed = content.trim();
-    const signatures = {
-      'png': /^iVBORw0KGgo/,
-      'jpeg': /^\/9j\/4AAQ/,
-      'webp': /^UklGRi/,
-      'gif': /^R0lGODlh/
-    };
-    for (const [type, pattern] of Object.entries(signatures)) {
-      if (pattern.test(trimmed)) {
-        return { type, isBase64: true, data: trimmed };
-      }
-    }
-    return null;
-  }
-
-  renderFileRead(event) {
-    const fileName = event.path ? event.path.split('/').pop() : 'unknown';
-    const details = document.createElement('details');
-    details.className = 'block-tool-use folded-tool';
-    details.classList.add(this._getBlockTypeClass('tool_use'));
-    details.classList.add(this._getToolColorClass('Read'));
-    details.dataset.eventId = event.id || '';
-    details.dataset.eventType = 'file_read';
-    const summary = document.createElement('summary');
-    summary.className = 'folded-tool-bar';
-    summary.innerHTML = `
-      <span class="folded-tool-icon">${this.getToolIcon('Read')}</span>
-      <span class="folded-tool-name">Read</span>
-      <span class="folded-tool-desc">${this.escapeHtml(fileName)}</span>
-    `;
-    details.appendChild(summary);
-    if (event.path || event.content) {
-      const body = document.createElement('div');
-      body.className = 'folded-tool-body';
-      let html = '';
-      if (event.path) html += this.renderFilePath(event.path);
-      if (event.content) {
-        let base64Data = null;
-        let mimeType = event.media_type || 'application/octet-stream';
-        if (typeof event.content === 'string') {
-          const imageInfo = this.detectBase64Image(event.content);
-          if (imageInfo) {
-            base64Data = imageInfo.data;
-            mimeType = imageInfo.type === 'jpeg' ? 'image/jpeg' : `image/${imageInfo.type}`;
-          }
-        } else if (typeof event.content === 'object' && event.content !== null) {
-          if (event.content.source?.type === 'base64' && event.content.source?.data) {
-            base64Data = event.content.source.data;
-          } else if (event.content.type === 'base64' && event.content.data) {
-            base64Data = event.content.data;
-          }
-        }
-        if (base64Data) {
-          html += `<div style="padding:0.5rem;display:flex;flex-direction:column;gap:0.5rem"><img src="data:${mimeType};base64,${this.escapeHtml(base64Data)}" style="max-width:100%;max-height:600px;border-radius:0.375rem;border:1px solid var(--color-code-border)" loading="lazy"><div style="font-size:0.7rem;color:var(--color-text-secondary);font-family:'Monaco','Menlo','Ubuntu Mono',monospace;word-break:break-all">${this.escapeHtml(event.path)}</div></div>`;
-        } else {
-          const contentStr = typeof event.content === 'string' ? event.content : JSON.stringify(event.content, null, 2);
-          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(contentStr, 2000))}</code></pre>`;
-        }
-      }
-      body.innerHTML = html;
-      details.appendChild(body);
-    }
-    return details;
-  }
-
-  renderFileWrite(event) {
-    const fileName = event.path ? event.path.split('/').pop() : 'unknown';
-    const details = document.createElement('details');
-    details.className = 'block-tool-use folded-tool';
-    details.classList.add(this._getBlockTypeClass('tool_use'));
-    details.classList.add(this._getToolColorClass('Write'));
-    details.dataset.eventId = event.id || '';
-    details.dataset.eventType = 'file_write';
-    const summary = document.createElement('summary');
-    summary.className = 'folded-tool-bar';
-    summary.innerHTML = `
-      <span class="folded-tool-icon">${this.getToolIcon('Write')}</span>
-      <span class="folded-tool-name">Write</span>
-      <span class="folded-tool-desc">${this.escapeHtml(fileName)}</span>
-    `;
-    details.appendChild(summary);
-    if (event.path) {
-      const body = document.createElement('div');
-      body.className = 'folded-tool-body';
-      body.innerHTML = this.renderFilePath(event.path);
-      details.appendChild(body);
-    }
-    return details;
-  }
-
-  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;
-  }
-
-  renderCode(event) {
-    const div = document.createElement('div');
-    div.className = 'event-code mb-3';
-    div.dataset.eventId = event.id || '';
-    div.dataset.eventType = 'code_block';
-
-    const code = event.code || event.content || '';
-    const language = event.language || 'plaintext';
-
-    if (language === 'html') {
-      div.innerHTML = `
-        <div class="html-rendered-container alert alert-info text-xs mb-2">
-          Rendered HTML
-        </div>
-        <div class="html-content">
-          ${code}
-        </div>
-      `;
-    } else {
-      const codeLineCount = code.split('\n').length;
-      div.innerHTML = `
-        <details class="collapsible-code">
-          <summary class="collapsible-code-summary">${this.escapeHtml(language)} - ${codeLineCount} line${codeLineCount !== 1 ? 's' : ''}</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(language)}">${this.escapeHtml(code)}</code></pre>
-        </details>
-      `;
-    }
-    return div;
-  }
-
-  renderThinking(event) {
-    const div = document.createElement('div');
-    div.className = 'event-thinking mb-3 p-4 alert rounded';
-    div.dataset.eventId = event.id || '';
-    div.dataset.eventType = 'thinking_block';
-
-    const text = event.thinking || event.content || '';
-    div.innerHTML = `
-      <details>
-        <summary class="cursor-pointer font-semibold text-base-content">Thinking</summary>
-        <p class="mt-3 text-sm text-base-content/80 whitespace-pre-wrap">${this.escapeHtml(text)}</p>
-      </details>
-    `;
-    return div;
-  }
-
-  renderToolUse(event) {
-    const block = {
-      type: 'tool_use',
-      name: event.toolName || event.tool || 'unknown',
-      input: event.input || {}
-    };
-    const div = this.renderBlockToolUse(block, event);
-    div.className = 'event-tool-use mb-3';
-    div.dataset.eventId = event.id || '';
-    div.dataset.eventType = 'tool_use';
-    return div;
-  }
-
-
-
-  renderCompactBoundary(event) {
-    const preTokens = event._preTokens || event.compactMetadata?.preTokens;
-    const div = document.createElement('div');
-    div.className = 'event-compact-boundary';
-    div.dataset.eventType = 'compact_boundary';
-    div.innerHTML = `
-      <div style="display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0.75rem;margin:0.5rem 0;background:var(--color-bg-secondary);border-radius:0.375rem;font-size:0.75rem;color:var(--color-text-secondary)">
-        <svg viewBox="0 0 20 20" fill="currentColor" style="width:1rem;height:1rem;flex-shrink:0;opacity:0.6"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
-        <span>Conversation compacted${preTokens ? ` (${preTokens.toLocaleString()} tokens before)` : ''}</span>
-      </div>
-    `;
-    return div;
-  }
-
-  renderTurnDuration(event) {
-    const ms = event._turnDurationMs || event.durationMs;
-    if (!ms) return null;
-    const sec = (ms / 1000).toFixed(1);
-    const div = document.createElement('div');
-    div.className = 'event-turn-duration';
-    div.dataset.eventType = 'turn_duration';
-    div.innerHTML = `
-      <div style="display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.75rem;font-size:0.7rem;color:var(--color-text-secondary);opacity:0.7">
-        <svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem;flex-shrink:0"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>
-        <span>${sec}s</span>
-      </div>
-    `;
-    return div;
-  }
-
-  renderAgentProgress(event) {
-    const msg = event.data?.message || event.message || '';
-    if (!msg) return null;
-    const div = document.createElement('div');
-    div.className = 'event-agent-progress';
-    div.dataset.eventType = 'agent_progress';
-    div.innerHTML = `
-      <div style="display:flex;align-items:flex-start;gap:0.5rem;padding:0.375rem 0.75rem;margin:0.25rem 0;background:var(--color-bg-secondary);border-left:2px solid #7c3aed;border-radius:0 0.25rem 0.25rem 0;font-size:0.75rem;color:var(--color-text-secondary)">
-        <svg viewBox="0 0 20 20" fill="currentColor" style="width:0.875rem;height:0.875rem;flex-shrink:0;margin-top:0.125rem;color:#7c3aed"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5z" clip-rule="evenodd"/></svg>
-        <span>${this.escapeHtml(msg)}</span>
-      </div>
-    `;
-    return div;
-  }
-
-  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);
-    }
-  }
-
-  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();
-  }
-}
-
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = StreamingRenderer;
-}
+}
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = StreamingRenderer;
+}