agentgui 1.0.930 → 1.0.932

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

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

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

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

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

@@ -1,140 +0,0 @@
-Object.assign(StreamingRenderer, {
-  renderSystemReminders(reminders, esc) {
-    if (!reminders || reminders.length === 0) return '';
-
-    const reminderHtml = reminders.map(reminder => {
-      const lines = reminder.split('\n').filter(l => l.trim());
-      const formattedLines = lines.map(line => {
-        if (line.includes('IMPORTANT:') || line.includes('WARNING:')) {
-          return `<div style="font-weight:600;color:var(--color-warning);margin:0.25rem 0">${esc(line)}</div>`;
-        }
-        return `<div style="margin:0.125rem 0">${esc(line)}</div>`;
-      }).join('');
-
-      return formattedLines;
-    }).join('');
-
-    return `
-      <div style="margin-top:1rem;padding:0.75rem;background:var(--color-bg-secondary);border-left:3px solid var(--color-info);border-radius:0.25rem;font-size:0.8rem;color:var(--color-text-secondary)">
-        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
-          <span style="color:var(--color-info)">ℹ</span>
-          <span style="font-weight:600;font-size:0.85rem;color:var(--color-text-primary)">System Reminder</span>
-        </div>
-        ${reminderHtml}
-      </div>
-    `;
-  },
-
-  detectCodeContent(content) {
-    const codePatterns = [
-      /^\s*(function|const|let|var|class|import|export|async|await)/m,  // JavaScript
-      /^\s*(def|class|import|from|if __name__|lambda|async def)/m,      // Python
-      /^\s*(public|private|protected|class|interface|package|import)/m,  // Java/TypeScript
-      /^\s*(<\?php|namespace|use|trait)/m,                              // PHP
-      /^\s*(#include|int main|void|struct|typedef)/m,                   // C/C++
-      /[{}\[\];()]/,                                                    // Brackets and semicolons
-      /=>|->|::/,                                                         // Arrow functions, pointers
-    ];
-
-    return codePatterns.some(pattern => pattern.test(content));
-  },
-
-  renderCodeWithHighlight(code, esc, flat = false) {
-    const preStyle = "background:var(--color-bg-code);padding:1rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:var(--color-code-text);border:1px solid var(--color-code-border);margin:0";
-    const codeHtml = `<pre style="${preStyle}"><code class="lazy-hl">${esc(code)}</code></pre>`;
-    if (flat) return codeHtml;
-    const lineCount = code.split('\n').length;
-    const summaryLabel = `code - ${lineCount} line${lineCount !== 1 ? 's' : ''}`;
-    return `<details class="collapsible-code"><summary class="collapsible-code-summary">${summaryLabel}</summary>${codeHtml}</details>`;
-  },
-
-  _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);
-  },
-
-  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;
-  },
-
-  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 '';
-  },
-
-  renderParamsHTML(data, depth, esc) {
-    if (data === null || data === undefined) return `<span style="color:var(--color-text-secondary);font-style:italic">null</span>`;
-    if (typeof data === 'boolean') return `<span style="color:#d97706;font-weight:600">${data}</span>`;
-    if (typeof data === 'number') return `<span style="color:#7c3aed;font-weight:600">${data}</span>`;
-
-    if (typeof data === 'string') {
-      if (data.length > 200 && StreamingRenderer.detectCodeContent(data)) {
-        const displayData = data.length > 1000 ? data.substring(0, 1000) : data;
-        const suffix = data.length > 1000 ? `<div style="font-size:0.7rem;color:var(--color-text-secondary);text-align:center;padding:0.25rem">... ${data.length - 1000} more characters</div>` : '';
-        return `<div style="max-height:200px;overflow-y:auto">${StreamingRenderer.renderCodeWithHighlight(displayData, esc, true)}${suffix}</div>`;
-      }
-      if (data.length > 500) {
-        return `<div style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;background:var(--color-bg-code);color:var(--color-code-text);padding:0.5rem;border-radius:0.375rem;line-height:1.5">${esc(data.substring(0, 1000))}${data.length > 1000 ? '\n... (' + (data.length - 1000) + ' more chars)' : ''}</div>`;
-      }
-      const looksLikePath = /^[A-Za-z]:[\\\/]/.test(data) || data.startsWith('/');
-      if (looksLikePath && !data.includes(' ') && data.includes('.')) {
-        const parts = pathSplit(data);
-        const name = parts.pop();
-        const dir = parts.join('/');
-        return `<div style="display:flex;align-items:center;gap:0.375rem;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.8rem"><span style="opacity:0.5">&#128196;</span><span style="color:var(--color-text-secondary)">${esc(dir)}/</span><span style="font-weight:600">${esc(name)}</span></div>`;
-      }
-      return `<span style="color:var(--color-text-primary)">${esc(data)}</span>`;
-    }
-
-    if (Array.isArray(data)) {
-      if (data.length === 0) return `<span style="color:var(--color-text-secondary)">[]</span>`;
-      if (data.every(i => typeof i === 'string') && data.length <= 20) {
-        return `<div style="display:flex;flex-direction:column;gap:0.125rem;${depth > 0 ? 'padding-left:1rem' : ''}">${data.map((i, idx) => `<div style="display:flex;align-items:center;gap:0.375rem"><span style="color:var(--color-text-secondary);font-size:0.65rem;opacity:0.5">•</span><span style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem">${esc(i)}</span></div>`).join('')}</div>`;
-      }
-      return `<div style="display:flex;flex-direction:column;gap:0.25rem;${depth > 0 ? 'padding-left:1rem' : ''}">${data.map((item, i) => `<div style="display:flex;gap:0.5rem;align-items:flex-start"><span style="color:var(--color-text-secondary);font-size:0.7rem;min-width:1.5rem;text-align:right;flex-shrink:0">${i}</span><div style="flex:1;min-width:0">${StreamingRenderer.renderParamsHTML(item, depth + 1, esc)}</div></div>`).join('')}</div>`;
-    }
-
-    if (typeof data === 'object') {
-      const entries = Object.entries(data);
-      if (entries.length === 0) return `<span style="color:var(--color-text-secondary)">{}</span>`;
-      return `<div style="display:flex;flex-direction:column;gap:0.375rem;${depth > 0 ? 'padding-left:1rem' : ''}">${entries.map(([k, v]) => `<div style="display:flex;gap:0.5rem;align-items:flex-start"><span style="font-weight:600;font-size:0.75rem;color:#0891b2;flex-shrink:0;min-width:fit-content;font-family:'Monaco','Menlo','Ubuntu Mono',monospace">${esc(k)}</span><div style="flex:1;min-width:0;font-size:0.8rem">${StreamingRenderer.renderParamsHTML(v, depth + 1, esc)}</div></div>`).join('')}</div>`;
-    }
-
-    return `<span>${esc(String(data))}</span>`;
-  }
-});

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

@@ -1,170 +0,0 @@
-Object.assign(StreamingRenderer.prototype, {
-  renderStreamingStart(event) {
-    const div = document.createElement('div');
-    div.className = 'event-streaming-start card mb-3 p-4 alert alert-info';
-    div.dataset.eventId = event.id || event.sessionId || '';
-    div.dataset.eventType = 'streaming_start';
-
-    const time = new Date(event.timestamp).toLocaleTimeString();
-    div.innerHTML = `
-      <div class="flex items-center gap-2">
-        <svg class="w-5 h-5 text-info animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" opacity="0.25"></circle>
-          <path d="M4 12a8 8 0 018-8" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
-        </svg>
-        <div class="flex-1">
-          <h4 class="font-semibold text-info-content">Streaming Started</h4>
-          <p class="text-sm text-info-content/70">${time}</p>
-        </div>
-      </div>
-    `;
-    return div;
-  },
-
-  renderStreamingProgress(event) {
-    if (event.block) {
-      return this.renderBlock(event.block, event);
-    }
-
-    const div = document.createElement('div');
-    div.className = 'event-streaming-progress mb-2 p-2';
-    div.dataset.eventId = event.id || '';
-    div.dataset.eventType = 'streaming_progress';
-
-    const percentage = event.progress || 0;
-    div.innerHTML = `
-      <div class="flex items-center gap-2 text-sm">
-        <span class="text-secondary">${percentage}%</span>
-        <div class="progress progress-primary flex-1">
-          <div class="progress-bar" style="width: ${percentage}%"></div>
-        </div>
-      </div>
-    `;
-    return div;
-  },
-
-  renderStreamingComplete(event) {
-    const div = document.createElement('div');
-    div.className = 'event-streaming-complete card mb-3 p-4 alert alert-success rounded-lg';
-    div.dataset.eventId = event.id || event.sessionId || '';
-    div.dataset.eventType = 'streaming_complete';
-
-    const time = new Date(event.timestamp).toLocaleTimeString();
-    const eventCount = event.eventCount || 0;
-
-    div.innerHTML = `
-      <div class="flex items-start gap-3">
-        <div class="flex-shrink-0 mt-0.5">
-          <svg class="w-6 h-6 text-success animate-bounce" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
-          </svg>
-        </div>
-        <div class="flex-1">
-          <h4 class="font-bold text-lg text-success-content">✨ Execution Complete</h4>
-          <div class="mt-2 grid grid-cols-2 gap-3 text-sm">
-            <div>
-              <span class="text-success font-semibold">${eventCount}</span>
-              <span class="text-success/70">events processed</span>
-            </div>
-            <div class="text-right">
-              <span class="text-success/70">${time}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    return div;
-  },
-
-  detectBase64Image(content) {
-    if (!content || typeof content !== 'string') return null;
-    const trimmed = content.trim();
-    const signatures = {
-      'png': /^iVBORw0KGgo/,
-      'jpeg': /^\/9j\/4AAQ/,
-      'webp': /^UklGRi/,
-      'gif': /^R0lGODlh/
-    };
-    for (const [type, pattern] of Object.entries(signatures)) {
-      if (pattern.test(trimmed)) {
-        return { type, isBase64: true, data: trimmed };
-      }
-    }
-    return null;
-  },
-
-  renderFileRead(event) {
-    const fileName = event.path ? event.path.split('/').pop() : 'unknown';
-    const details = document.createElement('details');
-    details.className = 'block-tool-use folded-tool';
-    details.classList.add(this._getBlockTypeClass('tool_use'));
-    details.classList.add(this._getToolColorClass('Read'));
-    details.dataset.eventId = event.id || '';
-    details.dataset.eventType = 'file_read';
-    const summary = document.createElement('summary');
-    summary.className = 'folded-tool-bar';
-    summary.innerHTML = `
-      <span class="folded-tool-icon">${this.getToolIcon('Read')}</span>
-      <span class="folded-tool-name">Read</span>
-      <span class="folded-tool-desc">${this.escapeHtml(fileName)}</span>
-    `;
-    details.appendChild(summary);
-    if (event.path || event.content) {
-      const body = document.createElement('div');
-      body.className = 'folded-tool-body';
-      let html = '';
-      if (event.path) html += this.renderFilePath(event.path);
-      if (event.content) {
-        let base64Data = null;
-        let mimeType = event.media_type || 'application/octet-stream';
-        if (typeof event.content === 'string') {
-          const imageInfo = this.detectBase64Image(event.content);
-          if (imageInfo) {
-            base64Data = imageInfo.data;
-            mimeType = imageInfo.type === 'jpeg' ? 'image/jpeg' : `image/${imageInfo.type}`;
-          }
-        } else if (typeof event.content === 'object' && event.content !== null) {
-          if (event.content.source?.type === 'base64' && event.content.source?.data) {
-            base64Data = event.content.source.data;
-          } else if (event.content.type === 'base64' && event.content.data) {
-            base64Data = event.content.data;
-          }
-        }
-        if (base64Data) {
-          html += `<div style="padding:0.5rem;display:flex;flex-direction:column;gap:0.5rem"><img src="data:${mimeType};base64,${this.escapeHtml(base64Data)}" style="max-width:100%;max-height:600px;border-radius:0.375rem;border:1px solid var(--color-code-border)" loading="lazy"><div style="font-size:0.7rem;color:var(--color-text-secondary);font-family:'Monaco','Menlo','Ubuntu Mono',monospace;word-break:break-all">${this.escapeHtml(event.path)}</div></div>`;
-        } else {
-          const contentStr = typeof event.content === 'string' ? event.content : JSON.stringify(event.content, null, 2);
-          html += `<pre style="background:var(--color-bg-code);padding:0.75rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;line-height:1.5;color:var(--color-code-text);margin:0.5rem 0 0 0"><code class="lazy-hl">${this.escapeHtml(this.truncateContent(contentStr, 2000))}</code></pre>`;
-        }
-      }
-      body.innerHTML = html;
-      details.appendChild(body);
-    }
-    return details;
-  },
-
-  renderFileWrite(event) {
-    const fileName = event.path ? event.path.split('/').pop() : 'unknown';
-    const details = document.createElement('details');
-    details.className = 'block-tool-use folded-tool';
-    details.classList.add(this._getBlockTypeClass('tool_use'));
-    details.classList.add(this._getToolColorClass('Write'));
-    details.dataset.eventId = event.id || '';
-    details.dataset.eventType = 'file_write';
-    const summary = document.createElement('summary');
-    summary.className = 'folded-tool-bar';
-    summary.innerHTML = `
-      <span class="folded-tool-icon">${this.getToolIcon('Write')}</span>
-      <span class="folded-tool-name">Write</span>
-      <span class="folded-tool-desc">${this.escapeHtml(fileName)}</span>
-    `;
-    details.appendChild(summary);
-    if (event.path) {
-      const body = document.createElement('div');
-      body.className = 'folded-tool-body';
-      body.innerHTML = this.renderFilePath(event.path);
-      details.appendChild(body);
-    }
-    return details;
-  }
-});