agentgui 1.0.814 → 1.0.816

package/static/js/streaming-renderer.js

@@ -1,12 +1,6 @@
-/**
- * Streaming Renderer Engine
- * Manages real-time event processing, batching, and DOM rendering
- * for Claude Code streaming execution display
- */
 
 class StreamingRenderer {
   constructor(config = {}) {
-    // Configuration
     this.config = {
       batchSize: config.batchSize || 50,
       batchInterval: config.batchInterval || 16, // ~60fps
@@ -17,7 +11,6 @@ class StreamingRenderer {
       ...config
     };
 
-    // State
     this.eventQueue = [];
     this.eventHistory = [];
     this.isProcessing = false;
@@ -34,12 +27,10 @@ class StreamingRenderer {
       avgProcessTime: 0
     };
 
-    // DOM references
     this.outputContainer = null;
     this.scrollContainer = null;
     this.virtualScroller = null;
 
-    // Event listeners
     this.listeners = {
       'event:queued': [],
       'event:dequeued': [],
@@ -50,14 +41,10 @@ class StreamingRenderer {
       '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;
@@ -71,9 +58,6 @@ class StreamingRenderer {
     return this;
   }
 
-  /**
-   * Setup scroll optimization and auto-scroll
-   */
   setupScrollOptimization() {
     if (!this.scrollContainer) return;
     this._userScrolledUp = false;
@@ -85,23 +69,17 @@ class StreamingRenderer {
     });
   }
 
-  /**
-   * 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();
@@ -110,7 +88,6 @@ class StreamingRenderer {
     this.eventQueue.push(event);
     this.eventHistory.push(event);
 
-    // Trim history
     if (this.eventHistory.length > this.config.maxEventHistory) {
       this.eventHistory.shift();
     }
@@ -120,18 +97,12 @@ class StreamingRenderer {
     return true;
   }
 
-  /**
-   * Check if event is a duplicate
-   * For streaming_progress events, use seq+sessionId for precise dedup
-   * For other events, use type+id or type+sessionId
-   */
   isDuplicate(event) {
     const key = this.getEventKey(event);
     if (!key) return false;
 
     const lastSeq = this.dedupMap.get(key);
 
-    // For streaming_progress with seq, compare seq numbers directly
     if (event.type === 'streaming_progress' && event.seq !== undefined && lastSeq !== undefined) {
       if (event.seq <= lastSeq) {
         return true; // Same or older seq = duplicate
@@ -140,7 +111,6 @@ class StreamingRenderer {
       return false;
     }
 
-    // For other events, use time-based dedup
     const now = Date.now();
     if (lastSeq && typeof lastSeq === 'number' && lastSeq > now - 500) {
       return true; // Recent duplicate
@@ -156,30 +126,20 @@ class StreamingRenderer {
     return false;
   }
 
-  /**
-   * Generate deduplication key for event
-   * Use sessionId:seq for streaming_progress, fallback to type:id
-   */
   getEventKey(event) {
     if (!event.type) return null;
-    // For streaming events, use sessionId as primary key
     if (event.sessionId) {
       return `${event.sessionId}:${event.type}`;
     }
     return `${event.type}:${event.id || ''}`;
   }
 
-  /**
-   * 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) {
@@ -189,9 +149,6 @@ class StreamingRenderer {
     }
   }
 
-  /**
-   * Process queued events as a batch
-   */
   processBatch() {
     if (this.isProcessing) return;
     if (this.eventQueue.length === 0) return;
@@ -204,12 +161,10 @@ class StreamingRenderer {
     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;
@@ -221,7 +176,6 @@ class StreamingRenderer {
         metrics: this.performanceMetrics
       });
 
-      // Process more if queue is still full
       if (this.eventQueue.length >= this.config.batchSize) {
         this.isProcessing = false;
         setImmediate(() => this.processBatch());
@@ -241,9 +195,6 @@ class StreamingRenderer {
     this.performanceMetrics.avgProcessTime = this.performanceMetrics.avgProcessTime || processTime;
   }
 
-  /**
-   * Render a batch of events
-   */
   renderBatch(batch) {
     if (!this.outputContainer) return;
 
@@ -251,7 +202,6 @@ class StreamingRenderer {
     const renderStart = performance.now();
 
     try {
-      // Create document fragment for batch
       const fragment = document.createDocumentFragment();
       let nodeCount = 0;
 
@@ -267,16 +217,13 @@ class StreamingRenderer {
         }
       }
 
-      // Append all at once (minimizes reflows)
       if (nodeCount > 0) {
         this.outputContainer.appendChild(fragment);
         this.domNodeCount += nodeCount;
 
-        // Nest tool result blocks inside their corresponding tool use blocks
         this.nestToolResultsInToolUses();
       }
 
-      // Auto-scroll to bottom
       this.autoScroll();
 
       const renderTime = performance.now() - renderStart;
@@ -293,14 +240,10 @@ class StreamingRenderer {
     }
   }
 
-  /**
-   * 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);
       }
@@ -331,8 +274,6 @@ class StreamingRenderer {
         case 'code_block':
           return this.renderCode(event);
         case 'thinking_block':
-          // Thinking blocks are now rendered immediately via handleStreamingProgress
-          // Don't render them here to avoid duplicates
           return null;
         case 'tool_use':
           return this.renderToolUse(event);
@@ -355,9 +296,6 @@ class StreamingRenderer {
     }
   }
 
-  /**
-   * Render Claude message blocks with beautiful styling
-   */
   renderBlock(block, context = {}, targetContainer = null) {
     if (!block || !block.type) return null;
 
@@ -400,9 +338,6 @@ class StreamingRenderer {
     }
   }
 
-  /**
-   * Render text block with semantic HTML
-   */
   renderBlockText(block, context, targetContainer = null) {
     const text = block.text || '';
     const isHtml = this.containsHtmlTags(text);
@@ -457,9 +392,6 @@ class StreamingRenderer {
     return cleaned;
   }
 
-  /**
-   * Parse markdown and render links, code, bold, italic
-   */
   parseAndRenderMarkdown(text) {
     const esc = this.escapeHtml.bind(this);
     const lines = text.split('\n');
@@ -525,9 +457,6 @@ class StreamingRenderer {
       .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="text-decoration:underline;opacity:0.85" target="_blank">$1</a>');
   }
 
-  /**
-   * Render code block with syntax highlighting
-   */
   renderBlockCode(block, context) {
     const div = document.createElement('div');
     div.className = 'block-code';
@@ -567,9 +496,6 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Render thinking block (expandable), signature-aware
-   */
   renderBlockThinking(block, context) {
     const thinking = block.thinking || '';
     const hasSignature = !!block.signature;
@@ -596,9 +522,6 @@ class StreamingRenderer {
     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>',
@@ -616,9 +539,6 @@ class StreamingRenderer {
     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);
@@ -627,9 +547,6 @@ class StreamingRenderer {
     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 '';
 
@@ -707,7 +624,6 @@ class StreamingRenderer {
           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;
@@ -717,7 +633,6 @@ class StreamingRenderer {
           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 => {
@@ -734,9 +649,6 @@ class StreamingRenderer {
     }
   }
 
-  /**
-   * Render content preview with truncation
-   */
   renderContentPreview(content, label) {
     const maxLen = 500;
     const truncated = content.length > maxLen;
@@ -748,16 +660,10 @@ class StreamingRenderer {
     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) {
@@ -834,9 +740,6 @@ class StreamingRenderer {
     return details;
   }
 
-  /**
-   * Render content smartly - detect JSON, images, file lists, markdown
-   */
   renderSmartContent(contentStr) {
     const trimmed = contentStr.trim();
 
@@ -874,9 +777,6 @@ class StreamingRenderer {
     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>`;
@@ -900,7 +800,6 @@ class StreamingRenderer {
     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>`;
@@ -915,9 +814,6 @@ class StreamingRenderer {
     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;
@@ -926,12 +822,10 @@ class StreamingRenderer {
       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) {
@@ -940,7 +834,6 @@ class StreamingRenderer {
           }
         }
 
-        // Handle Claude image content block arrays: [{type:"image", source:{type:"base64", data:"...", media_type:"..."}}]
         if (Array.isArray(parsed) && parsed.length > 0) {
           const imgParts = parsed.filter(b => b.type === 'image' && b.source && b.source.type === 'base64' && b.source.data);
           if (imgParts.length > 0) {
@@ -951,36 +844,27 @@ class StreamingRenderer {
           }
         }
 
-        // 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;
@@ -991,10 +875,8 @@ class StreamingRenderer {
       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)/,
@@ -1010,12 +892,10 @@ class StreamingRenderer {
       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;
@@ -1024,11 +904,8 @@ class StreamingRenderer {
           }
           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 {
@@ -1036,13 +913,11 @@ class StreamingRenderer {
               }
               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;
@@ -1054,7 +929,6 @@ class StreamingRenderer {
         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 => {
@@ -1063,20 +937,16 @@ class StreamingRenderer {
           }).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);
         }
@@ -1085,13 +955,10 @@ class StreamingRenderer {
       }
     }
 
-    // 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 {
@@ -1099,7 +966,6 @@ class StreamingRenderer {
         }
       }
 
-      // Add system reminders
       html += StreamingRenderer.renderSystemReminders(systemReminders, esc);
       return html;
     }
@@ -1119,7 +985,6 @@ class StreamingRenderer {
       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);
@@ -1129,17 +994,12 @@ class StreamingRenderer {
     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>`;
         }
@@ -1160,11 +1020,7 @@ class StreamingRenderer {
     `;
   }
 
-  /**
-   * 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
@@ -1178,9 +1034,6 @@ class StreamingRenderer {
     return codePatterns.some(pattern => pattern.test(content));
   }
 
-  /**
-   * Render code with basic syntax highlighting
-   */
   static renderCodeWithHighlight(code, esc, flat = false) {
     const preStyle = "background:var(--color-bg-code);padding:1rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:var(--color-code-text);border:1px solid var(--color-code-border);margin:0";
     const codeHtml = `<pre style="${preStyle}"><code class="lazy-hl">${esc(code)}</code></pre>`;
@@ -1239,9 +1092,6 @@ class StreamingRenderer {
     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>`;
@@ -1269,7 +1119,6 @@ class StreamingRenderer {
     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>`;
@@ -1284,9 +1133,6 @@ class StreamingRenderer {
     return `<span>${esc(String(data))}</span>`;
   }
 
-  /**
-   * Render tool result as inline content to be merged into preceding tool_use block
-   */
   renderBlockToolResult(block, context) {
     const content = block.content || '';
     const toolName = block.tool_name || block.name || '';
@@ -1311,9 +1157,6 @@ class StreamingRenderer {
     return container;
   }
 
-  /**
-   * Render image block
-   */
   renderBlockImage(block, context) {
     const div = document.createElement('div');
     div.className = 'block-image';
@@ -1322,7 +1165,6 @@ class StreamingRenderer {
     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}`;
     }
@@ -1335,9 +1177,6 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Render bash command block
-   */
   renderBlockBash(block, context) {
     const div = document.createElement('div');
     div.className = 'block-bash';
@@ -1346,10 +1185,8 @@ class StreamingRenderer {
     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);
@@ -1362,9 +1199,6 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Render system event
-   */
   renderBlockSystem(block, context) {
     if (block.subtype === 'compact_boundary') return this.renderCompactBoundary(block);
     if (block.subtype === 'turn_duration') return this.renderTurnDuration(block);
@@ -1396,9 +1230,6 @@ class StreamingRenderer {
     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' : '';
@@ -1447,9 +1278,6 @@ class StreamingRenderer {
     return details;
   }
 
-  /**
-   * Render tool status block (ACP in_progress/pending updates)
-   */
   renderBlockToolStatus(block, context) {
     const status = block.status || 'pending';
     const statusIcons = {
@@ -1491,9 +1319,6 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Render usage block (ACP usage updates)
-   */
   renderBlockUsage(block, context) {
     const usage = block.usage || {};
     const used = usage.used || 0;
@@ -1513,9 +1338,6 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Render plan block (ACP plan updates)
-   */
   renderBlockPlan(block, context) {
     const entries = block.entries || [];
     if (entries.length === 0) return null;
@@ -1573,15 +1395,11 @@ class StreamingRenderer {
     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]) => {
@@ -1605,9 +1423,6 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Render block error
-   */
   renderBlockError(block, error) {
     const div = document.createElement('div');
     div.className = 'block-error';
@@ -1628,9 +1443,6 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Render streaming start event
-   */
   renderStreamingStart(event) {
     const div = document.createElement('div');
     div.className = 'event-streaming-start card mb-3 p-4 alert alert-info';
@@ -1653,16 +1465,11 @@ class StreamingRenderer {
     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 || '';
@@ -1680,9 +1487,6 @@ class StreamingRenderer {
     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 alert alert-success rounded-lg';
@@ -1716,9 +1520,6 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Detect if content is a base64-encoded image
-   */
   detectBase64Image(content) {
     if (!content || typeof content !== 'string') return null;
     const trimmed = content.trim();
@@ -1736,9 +1537,6 @@ class StreamingRenderer {
     return null;
   }
 
-  /**
-   * Render file read event
-   */
   renderFileRead(event) {
     const fileName = event.path ? event.path.split('/').pop() : 'unknown';
     const details = document.createElement('details');
@@ -1789,9 +1587,6 @@ class StreamingRenderer {
     return details;
   }
 
-  /**
-   * Render file write event
-   */
   renderFileWrite(event) {
     const fileName = event.path ? event.path.split('/').pop() : 'unknown';
     const details = document.createElement('details');
@@ -1817,9 +1612,6 @@ class StreamingRenderer {
     return details;
   }
 
-  /**
-   * Render git status event
-   */
   renderGitStatus(event) {
     const div = document.createElement('div');
     div.className = 'event-git-status card mb-3 p-4';
@@ -1850,9 +1642,6 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Render command execution event
-   */
   renderCommand(event) {
     const command = event.command || '';
     const output = event.output || '';
@@ -1888,9 +1677,6 @@ class StreamingRenderer {
     return details;
   }
 
-  /**
-   * Render error event
-   */
   renderError(event) {
     const message = event.message || event.error || 'Unknown error';
     const severity = event.severity || 'error';
@@ -1949,9 +1735,6 @@ class StreamingRenderer {
     return parts;
   }
 
-  /**
-   * Render text block event - for backward compatibility
-   */
   renderText(event) {
     const div = document.createElement('div');
     div.className = 'event-text mb-3';
@@ -1992,7 +1775,6 @@ class StreamingRenderer {
     });
     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');
@@ -2010,9 +1792,6 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Render code block event
-   */
   renderCode(event) {
     const div = document.createElement('div');
     div.className = 'event-code mb-3';
@@ -2022,7 +1801,6 @@ class StreamingRenderer {
     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 alert alert-info text-xs mb-2">
@@ -2044,9 +1822,6 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Render thinking block event
-   */
   renderThinking(event) {
     const div = document.createElement('div');
     div.className = 'event-thinking mb-3 p-4 alert rounded';
@@ -2063,11 +1838,7 @@ class StreamingRenderer {
     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',
@@ -2146,11 +1917,7 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Render generic event with formatted key-value pairs
-   */
   renderGeneric(event) {
-    // Check if this is actually a file read with base64 image content
     if ((event.content?.source?.type === 'base64' || event.content?.type === 'base64') && event.path) {
       return this.renderFileRead(event);
     }
@@ -2162,7 +1929,6 @@ class StreamingRenderer {
 
     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]) => {
@@ -2190,9 +1956,6 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Nest tool result blocks inside their corresponding tool use blocks
-   */
   nestToolResultsInToolUses() {
     if (!this.outputContainer) return;
 
@@ -2238,9 +2001,6 @@ class StreamingRenderer {
     });
   }
 
-  /**
-   * Auto-scroll to bottom of container
-   */
   mergeResultIntoToolUse(toolUseEl, block) {
     const content = block.content || '';
     const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
@@ -2302,23 +2062,14 @@ class StreamingRenderer {
     this._userScrolledUp = false;
   }
 
-  /**
-   * 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;
@@ -2327,17 +2078,11 @@ class StreamingRenderer {
     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 = '';
@@ -2348,9 +2093,6 @@ class StreamingRenderer {
     this.dedupMap.clear();
   }
 
-  /**
-   * Get performance metrics
-   */
   getMetrics() {
     return {
       ...this.performanceMetrics,
@@ -2361,9 +2103,6 @@ class StreamingRenderer {
     };
   }
 
-  /**
-   * Add event listener
-   */
   on(event, callback) {
     if (!this.listeners[event]) {
       this.listeners[event] = [];
@@ -2371,9 +2110,6 @@ class StreamingRenderer {
     this.listeners[event].push(callback);
   }
 
-  /**
-   * Emit event to listeners
-   */
   emit(event, data) {
     if (this.listeners[event]) {
       this.listeners[event].forEach(callback => {
@@ -2386,10 +2122,6 @@ class StreamingRenderer {
     }
   }
 
-  /**
-   * Render block header with lazy-loading placeholder for body
-   * Returns a <details> element with just the summary, body content deferred
-   */
   renderBlockHeader(block, context = {}) {
     if (!block || !block.type) return null;
 
@@ -2421,7 +2153,6 @@ class StreamingRenderer {
     details.open = block.type === 'success' || (block.type === 'tool_result' && !block.is_error);
     details.appendChild(summary);
 
-    // Attach lazy loader on first open
     details.addEventListener('toggle', async (e) => {
       if (details.open && details.getAttribute('data-lazy-load') === 'pending') {
         details.setAttribute('data-lazy-load', 'loading');
@@ -2441,9 +2172,6 @@ class StreamingRenderer {
     return details;
   }
 
-  /**
-   * Cleanup resources
-   */
   destroy() {
     if (this.observer) {
       this.observer.disconnect();
@@ -2459,7 +2187,6 @@ class StreamingRenderer {
   }
 }
 
-// Export for use in browser
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = StreamingRenderer;
 }