agentgui 1.0.274 → 1.0.275

package/static/js/streaming-renderer.js

@@ -1,2120 +1,2123 @@
-/**
- * Streaming Renderer Engine
- * Manages real-time event processing, batching, and DOM rendering
- * for Claude Code streaming execution display
- */
-
-function pathSplit(p) {
-  return p.split(/[\/\\]/).filter(Boolean);
-}
-
-function pathBasename(p) {
-  const parts = pathSplit(p);
-  return parts.length ? parts.pop() : '';
-}
-
-class StreamingRenderer {
-  constructor(config = {}) {
-    // Configuration
-    this.config = {
-      batchSize: config.batchSize || 50,
-      batchInterval: config.batchInterval || 16, // ~60fps
-      maxQueueSize: config.maxQueueSize || 10000,
-      maxEventHistory: config.maxEventHistory || 1000,
-      virtualScrollThreshold: config.virtualScrollThreshold || 500,
-      debounceDelay: config.debounceDelay || 100,
-      ...config
-    };
-
-    // State
-    this.eventQueue = [];
-    this.eventHistory = [];
-    this.isProcessing = false;
-    this.batchTimer = null;
-    this.dedupMap = new Map();
-    this.renderCache = new Map();
-    this.domNodeCount = 0;
-    this.lastRenderTime = 0;
-    this.performanceMetrics = {
-      totalEvents: 0,
-      totalBatches: 0,
-      avgBatchSize: 0,
-      avgRenderTime: 0,
-      avgProcessTime: 0
-    };
-
-    // DOM references
-    this.outputContainer = null;
-    this.scrollContainer = null;
-    this.virtualScroller = null;
-
-    // Event listeners
-    this.listeners = {
-      'event:queued': [],
-      'event:dequeued': [],
-      'batch:start': [],
-      'batch:complete': [],
-      'render:start': [],
-      'render:complete': [],
-      'error:render': []
-    };
-
-    // Performance monitoring
-    this.observer = null;
-    this.resizeObserver = null;
-  }
-
-  /**
-   * Initialize the renderer with DOM elements
-   */
-  init(outputContainerId, scrollContainerId = null) {
-    this.outputContainer = document.getElementById(outputContainerId);
-    this.scrollContainer = scrollContainerId ? document.getElementById(scrollContainerId) : this.outputContainer;
-
-    if (!this.outputContainer) {
-      throw new Error(`Output container not found: ${outputContainerId}`);
-    }
-
-    this.setupDOMObserver();
-    this.setupResizeObserver();
-    this.setupScrollOptimization();
-    StreamingRenderer._setupGlobalLazyHL();
-    return this;
-  }
-
-  /**
-   * Setup DOM mutation observer for external changes
-   */
-  setupDOMObserver() {
-  }
-
-  /**
-   * Setup resize observer for viewport changes
-   */
-  setupResizeObserver() {
-  }
-
-  /**
-   * Setup scroll optimization and auto-scroll
-   */
-  setupScrollOptimization() {
-    if (!this.scrollContainer) return;
-    this._userScrolledUp = false;
-    this.scrollContainer.addEventListener('scroll', () => {
-      if (this._programmaticScroll) return;
-      const sc = this.scrollContainer;
-      const distFromBottom = sc.scrollHeight - sc.scrollTop - sc.clientHeight;
-      this._userScrolledUp = distFromBottom > 80;
-    });
-  }
-
-  /**
-   * Queue an event for batch processing
-   */
-  queueEvent(event) {
-    if (!event || typeof event !== 'object') return false;
-
-    // Add timestamp if not present
-    if (!event.timestamp) {
-      event.timestamp = Date.now();
-    }
-
-    // Deduplication
-    if (this.isDuplicate(event)) {
-      return false;
-    }
-
-    // Queue size check
-    if (this.eventQueue.length >= this.config.maxQueueSize) {
-      console.warn('Event queue overflow, dropping oldest events');
-      this.eventQueue.shift();
-    }
-
-    this.eventQueue.push(event);
-    this.eventHistory.push(event);
-
-    // Trim history
-    if (this.eventHistory.length > this.config.maxEventHistory) {
-      this.eventHistory.shift();
-    }
-
-    this.emit('event:queued', { event, queueLength: this.eventQueue.length });
-    this.scheduleBatchProcess();
-    return true;
-  }
-
-  /**
-   * Check if event is a duplicate
-   */
-  isDuplicate(event) {
-    const key = this.getEventKey(event);
-    if (!key) return false;
-
-    const lastTime = this.dedupMap.get(key);
-    const now = Date.now();
-
-    if (lastTime && (now - lastTime) < 100) {
-      return true;
-    }
-
-    this.dedupMap.set(key, now);
-    if (this.dedupMap.size > 5000) {
-      const cutoff = now - 1000;
-      for (const [k, t] of this.dedupMap) {
-        if (t < cutoff) this.dedupMap.delete(k);
-      }
-    }
-    return false;
-  }
-
-  /**
-   * Generate deduplication key for event
-   */
-  getEventKey(event) {
-    if (!event.type) return null;
-    return `${event.type}:${event.id || event.sessionId || ''}`;
-  }
-
-  /**
-   * Schedule batch processing
-   */
-  scheduleBatchProcess() {
-    if (this.isProcessing || this.batchTimer) return;
-
-    if (this.eventQueue.length >= this.config.batchSize) {
-      // Process immediately if batch is full
-      this.processBatch();
-    } else {
-      // Schedule for later
-      this.batchTimer = setTimeout(() => {
-        this.batchTimer = null;
-        if (this.eventQueue.length > 0) {
-          this.processBatch();
-        }
-      }, this.config.batchInterval);
-    }
-  }
-
-  /**
-   * Process queued events as a batch
-   */
-  processBatch() {
-    if (this.isProcessing) return;
-    if (this.eventQueue.length === 0) return;
-
-    this.isProcessing = true;
-    const processStart = performance.now();
-    const batchSize = Math.min(this.eventQueue.length, this.config.batchSize);
-    const batch = this.eventQueue.splice(0, batchSize);
-
-    this.emit('batch:start', { batchSize, queueLength: this.eventQueue.length });
-
-    try {
-      // Process and render batch
-      const renderStart = performance.now();
-      this.renderBatch(batch);
-      const renderTime = performance.now() - renderStart;
-
-      // Update metrics
-      this.performanceMetrics.totalBatches++;
-      this.performanceMetrics.totalEvents += batchSize;
-      this.performanceMetrics.avgBatchSize = this.performanceMetrics.totalEvents / this.performanceMetrics.totalBatches;
-      this.performanceMetrics.avgRenderTime = (this.performanceMetrics.avgRenderTime * (this.performanceMetrics.totalBatches - 1) + renderTime) / this.performanceMetrics.totalBatches;
-
-      this.emit('batch:complete', {
-        batchSize,
-        renderTime,
-        metrics: this.performanceMetrics
-      });
-
-      // Process more if queue is still full
-      if (this.eventQueue.length >= this.config.batchSize) {
-        this.isProcessing = false;
-        setImmediate(() => this.processBatch());
-      } else {
-        this.isProcessing = false;
-        if (this.eventQueue.length > 0) {
-          this.scheduleBatchProcess();
-        }
-      }
-    } catch (error) {
-      console.error('Batch processing error:', error);
-      this.isProcessing = false;
-      this.emit('error:render', { error, batch });
-    }
-
-    const processTime = performance.now() - processStart;
-    this.performanceMetrics.avgProcessTime = this.performanceMetrics.avgProcessTime || processTime;
-  }
-
-  /**
-   * Render a batch of events
-   */
-  renderBatch(batch) {
-    if (!this.outputContainer) return;
-
-    this.emit('render:start', { eventCount: batch.length });
-    const renderStart = performance.now();
-
-    try {
-      // Create document fragment for batch
-      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);
-        }
-      }
-
-      // Append all at once (minimizes reflows)
-      if (nodeCount > 0) {
-        this.outputContainer.appendChild(fragment);
-        this.domNodeCount += nodeCount;
-      }
-
-      // Auto-scroll to bottom
-      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 });
-    }
-  }
-
-  /**
-   * Render a single event to DOM element
-   */
-  renderEvent(event) {
-    if (!event.type) return null;
-
-    try {
-      // Handle block rendering from streaming_progress events
-      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 this.renderThinking(event);
-        case 'tool_use':
-          return this.renderToolUse(event);
-        default:
-          return this.renderGeneric(event);
-      }
-    } catch (error) {
-      console.error('Event render error:', error, event);
-      return this.renderError({ message: error.message, event });
-    }
-  }
-
-  /**
-   * Render Claude message blocks with beautiful styling
-   */
-  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);
-        default:
-          return this.renderBlockGeneric(block, context);
-      }
-    } catch (error) {
-      console.error('Block render error:', error, block);
-      return this.renderBlockError(block, error);
-    }
-  }
-
-  /**
-   * Render text block with semantic HTML
-   */
-  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' };
-    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;
-  }
-
-  /**
-   * Parse markdown and render links, code, bold, italic
-   */
-  parseAndRenderMarkdown(text) {
-    let html = this.escapeHtml(text);
-
-    // Render markdown bold: **text** -> <strong>text</strong>
-    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong class="font-semibold text-gray-900 dark:text-gray-100">$1</strong>');
-
-    // Render markdown italic: *text* or _text_
-    html = html.replace(/\*([^*]+)\*/g, '<em class="italic text-gray-700 dark:text-gray-300">$1</em>');
-    html = html.replace(/_([^_]+)_/g, '<em class="italic text-gray-700 dark:text-gray-300">$1</em>');
-
-    // Render inline code: `code`
-    html = html.replace(/`([^`]+)`/g, '<code class="inline-code bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-sm font-mono text-red-600 dark:text-red-400">$1</code>');
-
-    // Render markdown links: [text](url)
-    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-blue-600 dark:text-blue-400 hover:underline" target="_blank">$1</a>');
-
-    // Convert line breaks
-    html = html.replace(/\n/g, '<br>');
-
-    return html;
-  }
-
-  /**
-   * Render code block with syntax highlighting
-   */
-  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:#1e293b;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:#e2e8f0;border:1px solid #334155;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;
-  }
-
-  /**
-   * Render thinking block (expandable)
-   */
-  renderBlockThinking(block, context) {
-    const div = document.createElement('div');
-    div.className = 'block-thinking';
-    div.classList.add(this._getBlockTypeClass('thinking'));
-
-    const thinking = block.thinking || '';
-    div.innerHTML = `
-      <details open>
-        <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>
-        </summary>
-        <div class="thinking-content">${this.escapeHtml(thinking)}</div>
-      </details>
-    `;
-
-    return div;
-  }
-
-  /**
-   * Get a tool-specific icon SVG string
-   */
-  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>';
-  }
-
-  /**
-   * Render a file path with icon, directory breadcrumb, and filename
-   */
-  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>`;
-  }
-
-  /**
-   * Render smart tool parameters based on tool type
-   */
-  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 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('');
-          return `<div class="tool-params"><div class="tool-param-todos">${items}</div></div>`;
-        }
-        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>`;
-        }
-
-        // Render code with syntax highlighting
-        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>`;
-        }
-
-        // Render commands (bash commands)
-        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);
-    }
-  }
-
-  /**
-   * Render content preview with truncation
-   */
-  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>`;
-  }
-
-  /**
-   * Render params as formatted JSON (default fallback for unknown tools)
-   */
-  renderJsonParams(input) {
-    return `<div class="tool-params">${this.renderParametersBeautiful(input)}</div>`;
-  }
-
-  /**
-   * Render tool use block with smart parameter display
-   */
-  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.classList.add(this._getBlockTypeClass('tool_use'));
-    details.classList.add(this._getToolColorClass(toolName));
-    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;
-  }
-
-  /**
-   * Render content smartly - detect JSON, images, file lists, markdown
-   */
-  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>`;
-  }
-
-  /**
-   * Render parsed JSON/object as formatted key-value display
-   */
-  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:#d1d5db;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) {
-        // Render as an itemized list instead of inline badges
-        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 HTML version of smart content rendering for use in string templates
-   */
-  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>`;
-    }
-
-    // Parse JSON and render as structured content
-    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
-      try {
-        const parsed = JSON.parse(trimmed);
-
-        // Handle Claude content block arrays: [{type:"text", text:"..."}]
-        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);
-          }
-        }
-
-        // For other JSON, render as itemized key-value structure
-        return `<div style="padding:0.5rem 0.75rem">${StreamingRenderer.renderParamsHTML(parsed, 0, esc)}</div>`;
-      } catch (e) {
-        // Not valid JSON, might be code with braces
-      }
-    }
-
-    // Check if this looks like `cat -n` output or grep with line numbers
-    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) {
-      // Strip line numbers and arrows/hyphens from output
-      const cleanedLines = lines.map(line => {
-        // Skip grep context separator lines
-        if (line === '--') return null;
-
-        // Handle both cat -n (→) and grep (-n) formats
-        // Also handle grep with colon (:) for matching lines
-        const match = line.match(/^\s*\d+[→\-:](.*)/);
-        return match ? match[1] : line;
-      }).filter(line => line !== null);
-      const cleanedContent = cleanedLines.join('\n');
-
-      // Try to detect and highlight code based on content patterns
-      return StreamingRenderer.renderCodeWithHighlight(cleanedContent, esc, flat);
-    }
-
-    // Check for system reminder tags and format them specially
-    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], '');
-    }
-
-    // Clean up the content after removing reminders
-    contentWithoutReminders = contentWithoutReminders.trim();
-
-    // Check if this looks like a tool success message with formatted output
-    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;
-
-      // Find the success message and where code starts
-      for (let i = 0; i < contentLines.length; i++) {
-        const line = contentLines[i];
-        if (line.match(/^Success\s+toolu_/)) {
-          successEndIndex = i;
-          // Look for the next non-empty line that contains code
-          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 edit/write operations, code typically starts after the success message
-          // Look for "Here's the result" line or line numbers
-          for (let j = i + 1; j < contentLines.length; j++) {
-            if (contentLines[j].match(/^Here's the result|^\s*\d+→/)) {
-              // If it's "Here's the result", code starts on next line
-              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/)) {
-              // If we find non-empty content that's not a command, assume it's code
-              codeStartIndex = j;
-              break;
-            }
-          }
-          if (codeStartIndex === -1) {
-            // No line numbers found, treat next content as code
-            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');
-
-        // Check if code has line numbers and strip them
-        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');
-        }
-
-        // Build the formatted output
-        let html = '';
-
-        // Add success message
-        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>`;
-        }
-
-        // Add highlighted code
-        if (codeContent.trim()) {
-          html += StreamingRenderer.renderCodeWithHighlight(codeContent, esc, flat);
-        }
-
-        // Add system reminders if any
-        if (systemReminders.length > 0) {
-          html += StreamingRenderer.renderSystemReminders(systemReminders, esc);
-        }
-
-        return html;
-      }
-    }
-
-    // If there are system reminders but no success pattern, render them separately
-    if (systemReminders.length > 0) {
-      let html = '';
-
-      // Render the main content
-      if (contentWithoutReminders) {
-        // Check if remaining content looks like code
-        if (StreamingRenderer.detectCodeContent(contentWithoutReminders)) {
-          html += StreamingRenderer.renderCodeWithHighlight(contentWithoutReminders, esc, flat);
-        } else {
-          html += `<pre class="tool-result-pre">${esc(contentWithoutReminders)}</pre>`;
-        }
-      }
-
-      // Add system reminders
-      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>`;
-    }
-
-    // Check if this looks like code
-    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>`;
-  }
-
-  /**
-   * Render system reminders in a clean, formatted way
-   */
-  static renderSystemReminders(reminders, esc) {
-    if (!reminders || reminders.length === 0) return '';
-
-    const reminderHtml = reminders.map(reminder => {
-      // Parse reminder content for better formatting
-      const lines = reminder.split('\n').filter(l => l.trim());
-      const formattedLines = lines.map(line => {
-        // Make key points stand out
-        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>
-    `;
-  }
-
-  /**
-   * Detect if content looks like code
-   */
-  static detectCodeContent(content) {
-    // Common code patterns
-    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));
-  }
-
-  /**
-   * Render code with basic syntax highlighting
-   */
-  static renderCodeWithHighlight(code, esc, flat = false) {
-    const preStyle = "background:#1e293b;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:#e2e8f0;border:1px solid #334155;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 HTML version of parameter rendering
-   */
-  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:#d1d5db;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) {
-        // Render as an itemized list instead of inline badges
-        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>`;
-  }
-
-  /**
-   * Render tool result as inline content to be merged into preceding tool_use block
-   */
-  renderBlockToolResult(block, context) {
-    const isError = block.is_error || false;
-    const content = block.content || '';
-    const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
-    const parentIsOpen = context.parentIsOpen !== undefined ? context.parentIsOpen : true;
-
-    const wrapper = document.createElement('div');
-    wrapper.className = 'tool-result-inline' + (isError ? ' tool-result-error' : ' tool-result-success');
-    wrapper.dataset.eventType = 'tool_result';
-    if (block.tool_use_id) wrapper.dataset.toolUseId = block.tool_use_id;
-    wrapper.classList.add(this._getBlockTypeClass('tool_result'));
-
-    const header = document.createElement('div');
-    header.className = 'tool-result-status';
-    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>';
-    header.innerHTML = `
-      <span class="folded-tool-icon">${iconSvg}</span>
-      <span class="folded-tool-name">${isError ? 'Error' : 'Success'}</span>
-    `;
-    wrapper.appendChild(header);
-
-    const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this), true);
-    const body = document.createElement('div');
-    body.className = 'folded-tool-body';
-    if (!parentIsOpen) {
-      body.style.display = 'none';
-    }
-    body.innerHTML = renderedContent;
-    wrapper.appendChild(body);
-
-    return wrapper;
-  }
-
-  /**
-   * Render image block
-   */
-  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';
-
-    // Handle base64 data
-    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;
-  }
-
-  /**
-   * Render bash command block
-   */
-  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 || '';
-
-    // For the command, use simple escaping
-    let html = `<div class="bash-command"><span class="prompt">$</span><code>${this.escapeHtml(command)}</code></div>`;
-
-    // For output, check if it looks like code and use syntax highlighting
-    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;
-  }
-
-  /**
-   * Render system event
-   */
-  renderBlockSystem(block, context) {
-    const details = document.createElement('details');
-    details.className = 'folded-tool folded-tool-info';
-    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;
-  }
-
-  /**
-   * Render result block (execution summary)
-   */
-  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' : 'folded-tool';
-    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;
-  }
-
-  /**
-   * Render tool status block (ACP in_progress/pending updates)
-   */
-  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] || status}</span>
-      </div>
-    `;
-    return div;
-  }
-
-  /**
-   * Render usage block (ACP usage updates)
-   */
-  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;
-  }
-
-  /**
-   * Render plan block (ACP plan updates)
-   */
-  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;
-  }
-
-  /**
-   * Render generic block with formatted key-value pairs
-   */
-  renderBlockGeneric(block, context) {
-    const div = document.createElement('div');
-    div.className = 'block-generic';
-    div.classList.add(this._getBlockTypeClass('generic'));
-
-    // Show key-value pairs instead of raw JSON
-    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;
-  }
-
-  /**
-   * Render block error
-   */
-  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;
-  }
-
-  /**
-   * Render streaming start event
-   */
-  renderStreamingStart(event) {
-    const div = document.createElement('div');
-    div.className = 'event-streaming-start card mb-3 p-4 bg-blue-50 dark:bg-blue-900';
-    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-blue-600 dark:text-blue-400 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-blue-900 dark:text-blue-200">Streaming Started</h4>
-          <p class="text-sm text-blue-700 dark:text-blue-300">Agent: ${this.escapeHtml(event.agentId || 'unknown')} • ${time}</p>
-        </div>
-      </div>
-    `;
-    return div;
-  }
-
-  /**
-   * Render streaming progress event
-   */
-  renderStreamingProgress(event) {
-    // If there's a block in the progress event, render it beautifully
-    if (event.block) {
-      return this.renderBlock(event.block, event);
-    }
-
-    // Fallback: simple progress indicator
-    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="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
-          <div class="bg-blue-500 h-full transition-all" style="width: ${percentage}%"></div>
-        </div>
-      </div>
-    `;
-    return div;
-  }
-
-  /**
-   * Render streaming complete event with metadata
-   */
-  renderStreamingComplete(event) {
-    const div = document.createElement('div');
-    div.className = 'event-streaming-complete card mb-3 p-4 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950 dark:to-emerald-950 border border-green-200 dark:border-green-800 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-green-600 dark:text-green-400 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-green-900 dark:text-green-200">✨ Execution Complete</h4>
-          <div class="mt-2 grid grid-cols-2 gap-3 text-sm">
-            <div>
-              <span class="text-green-700 dark:text-green-400 font-semibold">${eventCount}</span>
-              <span class="text-green-600 dark:text-green-500">events processed</span>
-            </div>
-            <div class="text-right">
-              <span class="text-green-600 dark:text-green-500">${time}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    return div;
-  }
-
-  /**
-   * Render file read event
-   */
-  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) {
-        html += `<pre style="background:#1e293b;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:#e2e8f0;margin:0.5rem 0 0 0"><code class="lazy-hl">${this.escapeHtml(this.truncateContent(event.content, 2000))}</code></pre>`;
-      }
-      body.innerHTML = html;
-      details.appendChild(body);
-    }
-    return details;
-  }
-
-  /**
-   * Render file write event
-   */
-  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;
-  }
-
-  /**
-   * Render git status event
-   */
-  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-orange-600 dark:text-orange-400" 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-green-600 dark:text-green-400">+${changes.added}</span>` : ''}
-        ${changes.modified ? `<span class="text-blue-600 dark:text-blue-400">~${changes.modified}</span>` : ''}
-        ${changes.deleted ? `<span class="text-red-600 dark:text-red-400">-${changes.deleted}</span>` : ''}
-        ${total === 0 ? '<span class="text-secondary">no changes</span>' : ''}
-      </div>
-    `;
-    return div;
-  }
-
-  /**
-   * Render command execution event
-   */
-  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:#1e293b;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:#e2e8f0;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;
-  }
-
-  /**
-   * Render error event
-   */
-  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.setAttribute('open', '');
-    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;
-  }
-
-  /**
-   * Render text block event - for backward compatibility
-   */
-  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 bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto mb-3">${part.content}</div>`;
-      } else if (part.type === 'text') {
-        html += `<div class="p-4 bg-white dark:bg-gray-950 rounded-lg border border-gray-200 dark:border-gray-800 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 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
-            <div class="html-rendered-label px-4 py-2 bg-blue-100 dark:bg-blue-900 text-xs font-semibold text-blue-900 dark:text-blue-200">Rendered HTML</div>
-            <div class="html-content bg-white dark:bg-gray-800 p-4 overflow-x-auto">${part.code}</div>
-          </div>`;
-        } else {
-          const partLineCount = part.code.split('\n').length;
-          html += `<div class="mb-3 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
-            <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 text-gray-400 hover:text-gray-200 transition-colors p-1 rounded hover:bg-gray-800" 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-gray-900 text-gray-100 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;
-
-    // Add copy button functionality
-    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;
-  }
-
-  /**
-   * Render code block event
-   */
-  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';
-
-    // Render HTML code blocks as actual HTML elements
-    if (language === 'html') {
-      div.innerHTML = `
-        <div class="html-rendered-container mb-2 p-2 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700 text-xs text-blue-700 dark:text-blue-300">
-          Rendered HTML
-        </div>
-        <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
-          ${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-gray-900 text-gray-100 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;
-  }
-
-  /**
-   * Render thinking block event
-   */
-  renderThinking(event) {
-    const div = document.createElement('div');
-    div.className = 'event-thinking mb-3 p-4 bg-purple-50 dark:bg-purple-900 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-purple-900 dark:text-purple-200">Thinking</summary>
-        <p class="mt-3 text-sm text-purple-800 dark:text-purple-300 whitespace-pre-wrap">${this.escapeHtml(text)}</p>
-      </details>
-    `;
-    return div;
-  }
-
-  /**
-   * Render tool use event - for backward compatibility
-   */
-  renderToolUse(event) {
-    // Use the new block-based renderer for consistency
-    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;
-  }
-
-  /**
-   * Render generic event with formatted key-value pairs
-   */
-  renderGeneric(event) {
-    const div = document.createElement('div');
-    div.className = 'event-generic mb-3 p-3 bg-gray-100 dark:bg-gray-800 rounded text-sm';
-    div.dataset.eventId = event.id || '';
-    div.dataset.eventType = event.type;
-
-    const time = new Date(event.timestamp).toLocaleTimeString();
-
-    // Format event data as key-value pairs
-    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;
-  }
-
-  /**
-   * Auto-scroll to bottom of container
-   */
-  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;
-  }
-
-  updateVirtualScroll() {
-  }
-
-  /**
-   * Update DOM node count for monitoring
-   */
-  updateDOMNodeCount() {
-    this.domNodeCount = this.outputContainer?.querySelectorAll('[data-event-id]').length || 0;
-  }
-
-  /**
-   * HTML escape utility
-   */
-  escapeHtml(text) {
-    return window._escHtml(text);
-  }
-
-  /**
-   * Format file size for display
-   */
-  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];
-  }
-
-  /**
-   * Truncate content for display
-   */
-  truncateContent(content, maxLength = 200) {
-    if (content.length <= maxLength) return content;
-    return content.substring(0, maxLength) + '...';
-  }
-
-  /**
-   * Clear all rendered events
-   */
-  clear() {
-    if (this.outputContainer) {
-      this.outputContainer.innerHTML = '';
-    }
-    this.eventQueue = [];
-    this.eventHistory = [];
-    this.domNodeCount = 0;
-    this.dedupMap.clear();
-  }
-
-  /**
-   * Get performance metrics
-   */
-  getMetrics() {
-    return {
-      ...this.performanceMetrics,
-      domNodeCount: this.domNodeCount,
-      queueLength: this.eventQueue.length,
-      historyLength: this.eventHistory.length,
-      lastRenderTime: this.lastRenderTime
-    };
-  }
-
-  /**
-   * Add event listener
-   */
-  on(event, callback) {
-    if (!this.listeners[event]) {
-      this.listeners[event] = [];
-    }
-    this.listeners[event].push(callback);
-  }
-
-  /**
-   * Emit event to listeners
-   */
-  emit(event, data) {
-    if (this.listeners[event]) {
-      this.listeners[event].forEach(callback => {
-        try {
-          callback(data);
-        } catch (e) {
-          console.error('Listener error:', e);
-        }
-      });
-    }
-  }
-
-  /**
-   * Cleanup resources
-   */
-  destroy() {
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
-    if (this.batchTimer) {
-      clearTimeout(this.batchTimer);
-    }
-    this.listeners = {};
-    this.clear();
-  }
-}
-
-// Export for use in browser
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = StreamingRenderer;
-}
+/**
+ * Streaming Renderer Engine
+ * Manages real-time event processing, batching, and DOM rendering
+ * for Claude Code streaming execution display
+ */
+
+function pathSplit(p) {
+  return p.split(/[\/\\]/).filter(Boolean);
+}
+
+function pathBasename(p) {
+  const parts = pathSplit(p);
+  return parts.length ? parts.pop() : '';
+}
+
+class StreamingRenderer {
+  constructor(config = {}) {
+    // Configuration
+    this.config = {
+      batchSize: config.batchSize || 50,
+      batchInterval: config.batchInterval || 16, // ~60fps
+      maxQueueSize: config.maxQueueSize || 10000,
+      maxEventHistory: config.maxEventHistory || 1000,
+      virtualScrollThreshold: config.virtualScrollThreshold || 500,
+      debounceDelay: config.debounceDelay || 100,
+      ...config
+    };
+
+    // State
+    this.eventQueue = [];
+    this.eventHistory = [];
+    this.isProcessing = false;
+    this.batchTimer = null;
+    this.dedupMap = new Map();
+    this.renderCache = new Map();
+    this.domNodeCount = 0;
+    this.lastRenderTime = 0;
+    this.performanceMetrics = {
+      totalEvents: 0,
+      totalBatches: 0,
+      avgBatchSize: 0,
+      avgRenderTime: 0,
+      avgProcessTime: 0
+    };
+
+    // DOM references
+    this.outputContainer = null;
+    this.scrollContainer = null;
+    this.virtualScroller = null;
+
+    // Event listeners
+    this.listeners = {
+      'event:queued': [],
+      'event:dequeued': [],
+      'batch:start': [],
+      'batch:complete': [],
+      'render:start': [],
+      'render:complete': [],
+      'error:render': []
+    };
+
+    // Performance monitoring
+    this.observer = null;
+    this.resizeObserver = null;
+  }
+
+  /**
+   * Initialize the renderer with DOM elements
+   */
+  init(outputContainerId, scrollContainerId = null) {
+    this.outputContainer = document.getElementById(outputContainerId);
+    this.scrollContainer = scrollContainerId ? document.getElementById(scrollContainerId) : this.outputContainer;
+
+    if (!this.outputContainer) {
+      throw new Error(`Output container not found: ${outputContainerId}`);
+    }
+
+    this.setupDOMObserver();
+    this.setupResizeObserver();
+    this.setupScrollOptimization();
+    StreamingRenderer._setupGlobalLazyHL();
+    return this;
+  }
+
+  /**
+   * Setup DOM mutation observer for external changes
+   */
+  setupDOMObserver() {
+  }
+
+  /**
+   * Setup resize observer for viewport changes
+   */
+  setupResizeObserver() {
+  }
+
+  /**
+   * Setup scroll optimization and auto-scroll
+   */
+  setupScrollOptimization() {
+    if (!this.scrollContainer) return;
+    this._userScrolledUp = false;
+    this.scrollContainer.addEventListener('scroll', () => {
+      if (this._programmaticScroll) return;
+      const sc = this.scrollContainer;
+      const distFromBottom = sc.scrollHeight - sc.scrollTop - sc.clientHeight;
+      this._userScrolledUp = distFromBottom > 80;
+    });
+  }
+
+  /**
+   * Queue an event for batch processing
+   */
+  queueEvent(event) {
+    if (!event || typeof event !== 'object') return false;
+
+    // Add timestamp if not present
+    if (!event.timestamp) {
+      event.timestamp = Date.now();
+    }
+
+    // Deduplication
+    if (this.isDuplicate(event)) {
+      return false;
+    }
+
+    // Queue size check
+    if (this.eventQueue.length >= this.config.maxQueueSize) {
+      console.warn('Event queue overflow, dropping oldest events');
+      this.eventQueue.shift();
+    }
+
+    this.eventQueue.push(event);
+    this.eventHistory.push(event);
+
+    // Trim history
+    if (this.eventHistory.length > this.config.maxEventHistory) {
+      this.eventHistory.shift();
+    }
+
+    this.emit('event:queued', { event, queueLength: this.eventQueue.length });
+    this.scheduleBatchProcess();
+    return true;
+  }
+
+  /**
+   * Check if event is a duplicate
+   */
+  isDuplicate(event) {
+    const key = this.getEventKey(event);
+    if (!key) return false;
+
+    const lastTime = this.dedupMap.get(key);
+    const now = Date.now();
+
+    if (lastTime && (now - lastTime) < 100) {
+      return true;
+    }
+
+    this.dedupMap.set(key, now);
+    if (this.dedupMap.size > 5000) {
+      const cutoff = now - 1000;
+      for (const [k, t] of this.dedupMap) {
+        if (t < cutoff) this.dedupMap.delete(k);
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Generate deduplication key for event
+   */
+  getEventKey(event) {
+    if (!event.type) return null;
+    return `${event.type}:${event.id || event.sessionId || ''}`;
+  }
+
+  /**
+   * Schedule batch processing
+   */
+  scheduleBatchProcess() {
+    if (this.isProcessing || this.batchTimer) return;
+
+    if (this.eventQueue.length >= this.config.batchSize) {
+      // Process immediately if batch is full
+      this.processBatch();
+    } else {
+      // Schedule for later
+      this.batchTimer = setTimeout(() => {
+        this.batchTimer = null;
+        if (this.eventQueue.length > 0) {
+          this.processBatch();
+        }
+      }, this.config.batchInterval);
+    }
+  }
+
+  /**
+   * Process queued events as a batch
+   */
+  processBatch() {
+    if (this.isProcessing) return;
+    if (this.eventQueue.length === 0) return;
+
+    this.isProcessing = true;
+    const processStart = performance.now();
+    const batchSize = Math.min(this.eventQueue.length, this.config.batchSize);
+    const batch = this.eventQueue.splice(0, batchSize);
+
+    this.emit('batch:start', { batchSize, queueLength: this.eventQueue.length });
+
+    try {
+      // Process and render batch
+      const renderStart = performance.now();
+      this.renderBatch(batch);
+      const renderTime = performance.now() - renderStart;
+
+      // Update metrics
+      this.performanceMetrics.totalBatches++;
+      this.performanceMetrics.totalEvents += batchSize;
+      this.performanceMetrics.avgBatchSize = this.performanceMetrics.totalEvents / this.performanceMetrics.totalBatches;
+      this.performanceMetrics.avgRenderTime = (this.performanceMetrics.avgRenderTime * (this.performanceMetrics.totalBatches - 1) + renderTime) / this.performanceMetrics.totalBatches;
+
+      this.emit('batch:complete', {
+        batchSize,
+        renderTime,
+        metrics: this.performanceMetrics
+      });
+
+      // Process more if queue is still full
+      if (this.eventQueue.length >= this.config.batchSize) {
+        this.isProcessing = false;
+        setImmediate(() => this.processBatch());
+      } else {
+        this.isProcessing = false;
+        if (this.eventQueue.length > 0) {
+          this.scheduleBatchProcess();
+        }
+      }
+    } catch (error) {
+      console.error('Batch processing error:', error);
+      this.isProcessing = false;
+      this.emit('error:render', { error, batch });
+    }
+
+    const processTime = performance.now() - processStart;
+    this.performanceMetrics.avgProcessTime = this.performanceMetrics.avgProcessTime || processTime;
+  }
+
+  /**
+   * Render a batch of events
+   */
+  renderBatch(batch) {
+    if (!this.outputContainer) return;
+
+    this.emit('render:start', { eventCount: batch.length });
+    const renderStart = performance.now();
+
+    try {
+      // Create document fragment for batch
+      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);
+        }
+      }
+
+      // Append all at once (minimizes reflows)
+      if (nodeCount > 0) {
+        this.outputContainer.appendChild(fragment);
+        this.domNodeCount += nodeCount;
+      }
+
+      // Auto-scroll to bottom
+      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 });
+    }
+  }
+
+  /**
+   * Render a single event to DOM element
+   */
+  renderEvent(event) {
+    if (!event.type) return null;
+
+    try {
+      // Handle block rendering from streaming_progress events
+      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 this.renderThinking(event);
+        case 'tool_use':
+          return this.renderToolUse(event);
+        default:
+          return this.renderGeneric(event);
+      }
+    } catch (error) {
+      console.error('Event render error:', error, event);
+      return this.renderError({ message: error.message, event });
+    }
+  }
+
+  /**
+   * Render Claude message blocks with beautiful styling
+   */
+  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);
+        default:
+          return this.renderBlockGeneric(block, context);
+      }
+    } catch (error) {
+      console.error('Block render error:', error, block);
+      return this.renderBlockError(block, error);
+    }
+  }
+
+  /**
+   * Render text block with semantic HTML
+   */
+  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' };
+    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;
+  }
+
+  /**
+   * Parse markdown and render links, code, bold, italic
+   */
+  parseAndRenderMarkdown(text) {
+    let html = this.escapeHtml(text);
+
+    // Render markdown bold: **text** -> <strong>text</strong>
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong class="font-semibold text-gray-900 dark:text-gray-100">$1</strong>');
+
+    // Render markdown italic: *text* or _text_
+    html = html.replace(/\*([^*]+)\*/g, '<em class="italic text-gray-700 dark:text-gray-300">$1</em>');
+    html = html.replace(/_([^_]+)_/g, '<em class="italic text-gray-700 dark:text-gray-300">$1</em>');
+
+    // Render inline code: `code`
+    html = html.replace(/`([^`]+)`/g, '<code class="inline-code bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-sm font-mono text-red-600 dark:text-red-400">$1</code>');
+
+    // Render markdown links: [text](url)
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" class="text-blue-600 dark:text-blue-400 hover:underline" target="_blank">$1</a>');
+
+    // Convert line breaks
+    html = html.replace(/\n/g, '<br>');
+
+    return html;
+  }
+
+  /**
+   * Render code block with syntax highlighting
+   */
+  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:#1e293b;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:#e2e8f0;border:1px solid #334155;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;
+  }
+
+  /**
+   * Render thinking block (expandable)
+   */
+  renderBlockThinking(block, context) {
+    const div = document.createElement('div');
+    div.className = 'block-thinking';
+    div.classList.add(this._getBlockTypeClass('thinking'));
+
+    const thinking = block.thinking || '';
+    div.innerHTML = `
+      <details open>
+        <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>
+        </summary>
+        <div class="thinking-content">${this.escapeHtml(thinking)}</div>
+      </details>
+    `;
+
+    return div;
+  }
+
+  /**
+   * Get a tool-specific icon SVG string
+   */
+  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>';
+  }
+
+  /**
+   * Render a file path with icon, directory breadcrumb, and filename
+   */
+  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>`;
+  }
+
+  /**
+   * Render smart tool parameters based on tool type
+   */
+  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 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('');
+          return `<div class="tool-params"><div class="tool-param-todos">${items}</div></div>`;
+        }
+        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>`;
+        }
+
+        // Render code with syntax highlighting
+        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>`;
+        }
+
+        // Render commands (bash commands)
+        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);
+    }
+  }
+
+  /**
+   * Render content preview with truncation
+   */
+  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>`;
+  }
+
+  /**
+   * Render params as formatted JSON (default fallback for unknown tools)
+   */
+  renderJsonParams(input) {
+    return `<div class="tool-params">${this.renderParametersBeautiful(input)}</div>`;
+  }
+
+  /**
+   * Render tool use block with smart parameter display
+   */
+  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 permanently-expanded';
+    details.setAttribute('open', '');
+    if (block.id) details.dataset.toolUseId = block.id;
+    details.classList.add(this._getBlockTypeClass('tool_use'));
+    details.classList.add(this._getToolColorClass(toolName));
+    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;
+  }
+
+  /**
+   * Render content smartly - detect JSON, images, file lists, markdown
+   */
+  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>`;
+  }
+
+  /**
+   * Render parsed JSON/object as formatted key-value display
+   */
+  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:#d1d5db;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) {
+        // Render as an itemized list instead of inline badges
+        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 HTML version of smart content rendering for use in string templates
+   */
+  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>`;
+    }
+
+    // Parse JSON and render as structured content
+    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+      try {
+        const parsed = JSON.parse(trimmed);
+
+        // Handle Claude content block arrays: [{type:"text", text:"..."}]
+        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);
+          }
+        }
+
+        // For other JSON, render as itemized key-value structure
+        return `<div style="padding:0.5rem 0.75rem">${StreamingRenderer.renderParamsHTML(parsed, 0, esc)}</div>`;
+      } catch (e) {
+        // Not valid JSON, might be code with braces
+      }
+    }
+
+    // Check if this looks like `cat -n` output or grep with line numbers
+    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) {
+      // Strip line numbers and arrows/hyphens from output
+      const cleanedLines = lines.map(line => {
+        // Skip grep context separator lines
+        if (line === '--') return null;
+
+        // Handle both cat -n (→) and grep (-n) formats
+        // Also handle grep with colon (:) for matching lines
+        const match = line.match(/^\s*\d+[→\-:](.*)/);
+        return match ? match[1] : line;
+      }).filter(line => line !== null);
+      const cleanedContent = cleanedLines.join('\n');
+
+      // Try to detect and highlight code based on content patterns
+      return StreamingRenderer.renderCodeWithHighlight(cleanedContent, esc, flat);
+    }
+
+    // Check for system reminder tags and format them specially
+    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], '');
+    }
+
+    // Clean up the content after removing reminders
+    contentWithoutReminders = contentWithoutReminders.trim();
+
+    // Check if this looks like a tool success message with formatted output
+    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;
+
+      // Find the success message and where code starts
+      for (let i = 0; i < contentLines.length; i++) {
+        const line = contentLines[i];
+        if (line.match(/^Success\s+toolu_/)) {
+          successEndIndex = i;
+          // Look for the next non-empty line that contains code
+          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 edit/write operations, code typically starts after the success message
+          // Look for "Here's the result" line or line numbers
+          for (let j = i + 1; j < contentLines.length; j++) {
+            if (contentLines[j].match(/^Here's the result|^\s*\d+→/)) {
+              // If it's "Here's the result", code starts on next line
+              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/)) {
+              // If we find non-empty content that's not a command, assume it's code
+              codeStartIndex = j;
+              break;
+            }
+          }
+          if (codeStartIndex === -1) {
+            // No line numbers found, treat next content as code
+            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');
+
+        // Check if code has line numbers and strip them
+        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');
+        }
+
+        // Build the formatted output
+        let html = '';
+
+        // Add success message
+        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>`;
+        }
+
+        // Add highlighted code
+        if (codeContent.trim()) {
+          html += StreamingRenderer.renderCodeWithHighlight(codeContent, esc, flat);
+        }
+
+        // Add system reminders if any
+        if (systemReminders.length > 0) {
+          html += StreamingRenderer.renderSystemReminders(systemReminders, esc);
+        }
+
+        return html;
+      }
+    }
+
+    // If there are system reminders but no success pattern, render them separately
+    if (systemReminders.length > 0) {
+      let html = '';
+
+      // Render the main content
+      if (contentWithoutReminders) {
+        // Check if remaining content looks like code
+        if (StreamingRenderer.detectCodeContent(contentWithoutReminders)) {
+          html += StreamingRenderer.renderCodeWithHighlight(contentWithoutReminders, esc, flat);
+        } else {
+          html += `<pre class="tool-result-pre">${esc(contentWithoutReminders)}</pre>`;
+        }
+      }
+
+      // Add system reminders
+      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>`;
+    }
+
+    // Check if this looks like code
+    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>`;
+  }
+
+  /**
+   * Render system reminders in a clean, formatted way
+   */
+  static renderSystemReminders(reminders, esc) {
+    if (!reminders || reminders.length === 0) return '';
+
+    const reminderHtml = reminders.map(reminder => {
+      // Parse reminder content for better formatting
+      const lines = reminder.split('\n').filter(l => l.trim());
+      const formattedLines = lines.map(line => {
+        // Make key points stand out
+        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>
+    `;
+  }
+
+  /**
+   * Detect if content looks like code
+   */
+  static detectCodeContent(content) {
+    // Common code patterns
+    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));
+  }
+
+  /**
+   * Render code with basic syntax highlighting
+   */
+  static renderCodeWithHighlight(code, esc, flat = false) {
+    const preStyle = "background:#1e293b;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:#e2e8f0;border:1px solid #334155;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 HTML version of parameter rendering
+   */
+  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:#d1d5db;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) {
+        // Render as an itemized list instead of inline badges
+        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>`;
+  }
+
+  /**
+   * Render tool result as inline content to be merged into preceding tool_use block
+   */
+  renderBlockToolResult(block, context) {
+    const isError = block.is_error || false;
+    const content = block.content || '';
+    const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
+    const parentIsOpen = context.parentIsOpen !== undefined ? context.parentIsOpen : true;
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'tool-result-inline' + (isError ? ' tool-result-error' : ' tool-result-success');
+    wrapper.dataset.eventType = 'tool_result';
+    if (block.tool_use_id) wrapper.dataset.toolUseId = block.tool_use_id;
+    wrapper.classList.add(this._getBlockTypeClass('tool_result'));
+
+    const header = document.createElement('div');
+    header.className = 'tool-result-status';
+    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>';
+    header.innerHTML = `
+      <span class="folded-tool-icon">${iconSvg}</span>
+      <span class="folded-tool-name">${isError ? 'Error' : 'Success'}</span>
+    `;
+    wrapper.appendChild(header);
+
+    const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this), true);
+    const body = document.createElement('div');
+    body.className = 'folded-tool-body';
+    if (!parentIsOpen) {
+      body.style.display = 'none';
+    }
+    body.innerHTML = renderedContent;
+    wrapper.appendChild(body);
+
+    return wrapper;
+  }
+
+  /**
+   * Render image block
+   */
+  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';
+
+    // Handle base64 data
+    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;
+  }
+
+  /**
+   * Render bash command block
+   */
+  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 || '';
+
+    // For the command, use simple escaping
+    let html = `<div class="bash-command"><span class="prompt">$</span><code>${this.escapeHtml(command)}</code></div>`;
+
+    // For output, check if it looks like code and use syntax highlighting
+    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;
+  }
+
+  /**
+   * Render system event
+   */
+  renderBlockSystem(block, context) {
+    const details = document.createElement('details');
+    details.className = 'folded-tool folded-tool-info permanently-expanded';
+    details.setAttribute('open', '');
+    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;
+  }
+
+  /**
+   * Render result block (execution summary)
+   */
+  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.setAttribute('open', '');
+    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;
+  }
+
+  /**
+   * Render tool status block (ACP in_progress/pending updates)
+   */
+  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] || status}</span>
+      </div>
+    `;
+    return div;
+  }
+
+  /**
+   * Render usage block (ACP usage updates)
+   */
+  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;
+  }
+
+  /**
+   * Render plan block (ACP plan updates)
+   */
+  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;
+  }
+
+  /**
+   * Render generic block with formatted key-value pairs
+   */
+  renderBlockGeneric(block, context) {
+    const div = document.createElement('div');
+    div.className = 'block-generic';
+    div.classList.add(this._getBlockTypeClass('generic'));
+
+    // Show key-value pairs instead of raw JSON
+    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;
+  }
+
+  /**
+   * Render block error
+   */
+  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;
+  }
+
+  /**
+   * Render streaming start event
+   */
+  renderStreamingStart(event) {
+    const div = document.createElement('div');
+    div.className = 'event-streaming-start card mb-3 p-4 bg-blue-50 dark:bg-blue-900';
+    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-blue-600 dark:text-blue-400 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-blue-900 dark:text-blue-200">Streaming Started</h4>
+          <p class="text-sm text-blue-700 dark:text-blue-300">Agent: ${this.escapeHtml(event.agentId || 'unknown')} • ${time}</p>
+        </div>
+      </div>
+    `;
+    return div;
+  }
+
+  /**
+   * Render streaming progress event
+   */
+  renderStreamingProgress(event) {
+    // If there's a block in the progress event, render it beautifully
+    if (event.block) {
+      return this.renderBlock(event.block, event);
+    }
+
+    // Fallback: simple progress indicator
+    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="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
+          <div class="bg-blue-500 h-full transition-all" style="width: ${percentage}%"></div>
+        </div>
+      </div>
+    `;
+    return div;
+  }
+
+  /**
+   * Render streaming complete event with metadata
+   */
+  renderStreamingComplete(event) {
+    const div = document.createElement('div');
+    div.className = 'event-streaming-complete card mb-3 p-4 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950 dark:to-emerald-950 border border-green-200 dark:border-green-800 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-green-600 dark:text-green-400 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-green-900 dark:text-green-200">✨ Execution Complete</h4>
+          <div class="mt-2 grid grid-cols-2 gap-3 text-sm">
+            <div>
+              <span class="text-green-700 dark:text-green-400 font-semibold">${eventCount}</span>
+              <span class="text-green-600 dark:text-green-500">events processed</span>
+            </div>
+            <div class="text-right">
+              <span class="text-green-600 dark:text-green-500">${time}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    return div;
+  }
+
+  /**
+   * Render file read event
+   */
+  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) {
+        html += `<pre style="background:#1e293b;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:#e2e8f0;margin:0.5rem 0 0 0"><code class="lazy-hl">${this.escapeHtml(this.truncateContent(event.content, 2000))}</code></pre>`;
+      }
+      body.innerHTML = html;
+      details.appendChild(body);
+    }
+    return details;
+  }
+
+  /**
+   * Render file write event
+   */
+  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;
+  }
+
+  /**
+   * Render git status event
+   */
+  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-orange-600 dark:text-orange-400" 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-green-600 dark:text-green-400">+${changes.added}</span>` : ''}
+        ${changes.modified ? `<span class="text-blue-600 dark:text-blue-400">~${changes.modified}</span>` : ''}
+        ${changes.deleted ? `<span class="text-red-600 dark:text-red-400">-${changes.deleted}</span>` : ''}
+        ${total === 0 ? '<span class="text-secondary">no changes</span>' : ''}
+      </div>
+    `;
+    return div;
+  }
+
+  /**
+   * Render command execution event
+   */
+  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:#1e293b;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:#e2e8f0;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;
+  }
+
+  /**
+   * Render error event
+   */
+  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.setAttribute('open', '');
+    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;
+  }
+
+  /**
+   * Render text block event - for backward compatibility
+   */
+  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 bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto mb-3">${part.content}</div>`;
+      } else if (part.type === 'text') {
+        html += `<div class="p-4 bg-white dark:bg-gray-950 rounded-lg border border-gray-200 dark:border-gray-800 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 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
+            <div class="html-rendered-label px-4 py-2 bg-blue-100 dark:bg-blue-900 text-xs font-semibold text-blue-900 dark:text-blue-200">Rendered HTML</div>
+            <div class="html-content bg-white dark:bg-gray-800 p-4 overflow-x-auto">${part.code}</div>
+          </div>`;
+        } else {
+          const partLineCount = part.code.split('\n').length;
+          html += `<div class="mb-3 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
+            <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 text-gray-400 hover:text-gray-200 transition-colors p-1 rounded hover:bg-gray-800" 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-gray-900 text-gray-100 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;
+
+    // Add copy button functionality
+    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;
+  }
+
+  /**
+   * Render code block event
+   */
+  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';
+
+    // Render HTML code blocks as actual HTML elements
+    if (language === 'html') {
+      div.innerHTML = `
+        <div class="html-rendered-container mb-2 p-2 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700 text-xs text-blue-700 dark:text-blue-300">
+          Rendered HTML
+        </div>
+        <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
+          ${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-gray-900 text-gray-100 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;
+  }
+
+  /**
+   * Render thinking block event
+   */
+  renderThinking(event) {
+    const div = document.createElement('div');
+    div.className = 'event-thinking mb-3 p-4 bg-purple-50 dark:bg-purple-900 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-purple-900 dark:text-purple-200">Thinking</summary>
+        <p class="mt-3 text-sm text-purple-800 dark:text-purple-300 whitespace-pre-wrap">${this.escapeHtml(text)}</p>
+      </details>
+    `;
+    return div;
+  }
+
+  /**
+   * Render tool use event - for backward compatibility
+   */
+  renderToolUse(event) {
+    // Use the new block-based renderer for consistency
+    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;
+  }
+
+  /**
+   * Render generic event with formatted key-value pairs
+   */
+  renderGeneric(event) {
+    const div = document.createElement('div');
+    div.className = 'event-generic mb-3 p-3 bg-gray-100 dark:bg-gray-800 rounded text-sm';
+    div.dataset.eventId = event.id || '';
+    div.dataset.eventType = event.type;
+
+    const time = new Date(event.timestamp).toLocaleTimeString();
+
+    // Format event data as key-value pairs
+    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;
+  }
+
+  /**
+   * Auto-scroll to bottom of container
+   */
+  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;
+  }
+
+  updateVirtualScroll() {
+  }
+
+  /**
+   * Update DOM node count for monitoring
+   */
+  updateDOMNodeCount() {
+    this.domNodeCount = this.outputContainer?.querySelectorAll('[data-event-id]').length || 0;
+  }
+
+  /**
+   * HTML escape utility
+   */
+  escapeHtml(text) {
+    return window._escHtml(text);
+  }
+
+  /**
+   * Format file size for display
+   */
+  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];
+  }
+
+  /**
+   * Truncate content for display
+   */
+  truncateContent(content, maxLength = 200) {
+    if (content.length <= maxLength) return content;
+    return content.substring(0, maxLength) + '...';
+  }
+
+  /**
+   * Clear all rendered events
+   */
+  clear() {
+    if (this.outputContainer) {
+      this.outputContainer.innerHTML = '';
+    }
+    this.eventQueue = [];
+    this.eventHistory = [];
+    this.domNodeCount = 0;
+    this.dedupMap.clear();
+  }
+
+  /**
+   * Get performance metrics
+   */
+  getMetrics() {
+    return {
+      ...this.performanceMetrics,
+      domNodeCount: this.domNodeCount,
+      queueLength: this.eventQueue.length,
+      historyLength: this.eventHistory.length,
+      lastRenderTime: this.lastRenderTime
+    };
+  }
+
+  /**
+   * Add event listener
+   */
+  on(event, callback) {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event].push(callback);
+  }
+
+  /**
+   * Emit event to listeners
+   */
+  emit(event, data) {
+    if (this.listeners[event]) {
+      this.listeners[event].forEach(callback => {
+        try {
+          callback(data);
+        } catch (e) {
+          console.error('Listener error:', e);
+        }
+      });
+    }
+  }
+
+  /**
+   * Cleanup resources
+   */
+  destroy() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    if (this.batchTimer) {
+      clearTimeout(this.batchTimer);
+    }
+    this.listeners = {};
+    this.clear();
+  }
+}
+
+// Export for use in browser
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = StreamingRenderer;
+}