agentgui 1.0.827 → 1.0.828

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

@@ -0,0 +1,140 @@
+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

@@ -0,0 +1,170 @@
+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;
+  }
+});

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

@@ -0,0 +1,185 @@
+Object.assign(StreamingRenderer.prototype, {
+  renderBlockText(block, context, targetContainer = null) {
+    const text = block.text || '';
+    const isHtml = this.containsHtmlTags(text);
+    const cached = this.renderCache.get(text);
+    const html = cached || (isHtml ? this.sanitizeHtml(text) : this.parseAndRenderMarkdown(text));
+
+    if (!cached && this.renderCache.size < 2000) {
+      this.renderCache.set(text, html);
+    }
+
+    const container = targetContainer || this.outputContainer;
+    const lastChild = container && container.lastElementChild;
+    if (lastChild && lastChild.classList.contains('block-text') && !isHtml && !lastChild.classList.contains('html-content')) {
+      lastChild.innerHTML += html;
+      return null;
+    }
+
+    const div = document.createElement('div');
+    div.className = 'block-text';
+    if (isHtml) div.classList.add('html-content');
+    div.innerHTML = html;
+    div.classList.add(this._getBlockTypeClass('text'));
+    return div;
+  },
+
+  _getBlockTypeClass(blockType) {
+    const validTypes = ['text','tool_use','tool_result','code','thinking','bash','system','result','error','image','plan','usage','premature','tool_status','generic'];
+    return validTypes.includes(blockType) ? `block-type-${blockType}` : 'block-type-generic';
+  },
+
+  _getToolColorClass(toolName) {
+    const n = (toolName || '').replace(/^mcp__.*?__/, '').toLowerCase();
+    const map = {
+      read: 'read', write: 'write', edit: 'edit', bash: 'bash', glob: 'glob', grep: 'grep',
+      webfetch: 'web', websearch: 'web', todowrite: 'todo', task: 'task', notebookedit: 'edit',
+      execute: 'execute', sleep: 'sleep', search: 'search', skill: 'skill'
+    };
+    return `tool-color-${map[n] || 'default'}`;
+  },
+
+  containsHtmlTags(text) {
+    const htmlPattern = /<(?:div|table|section|article|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6]|p|blockquote|pre|code|span|strong|em|a|img|br|hr|li|td|tr|th|thead|tbody|tfoot)\b[^>]*>/i;
+    return htmlPattern.test(text);
+  },
+
+  sanitizeHtml(html) {
+    const dangerous = /<\s*\/?\s*(script|iframe|object|embed|applet|form|input|button|select|textarea)\b[^>]*>/gi;
+    let cleaned = html.replace(dangerous, '');
+    cleaned = cleaned.replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, '');
+    cleaned = cleaned.replace(/\s+on\w+\s*=\s*[^\s>]+/gi, '');
+    cleaned = cleaned.replace(/javascript\s*:/gi, '');
+    return cleaned;
+  },
+
+  parseAndRenderMarkdown(text) {
+    const esc = this.escapeHtml.bind(this);
+    const lines = text.split('\n');
+    const out = [];
+    let i = 0;
+    while (i < lines.length) {
+      const line = lines[i];
+      const trimmed = line.trim();
+      if (trimmed.startsWith('### ')) {
+        out.push(`<h3 style="margin:0.4rem 0 0.2rem;font-size:0.95rem;font-weight:700">${this._mdInline(esc(trimmed.slice(4)))}</h3>`);
+        i++; continue;
+      }
+      if (trimmed.startsWith('## ')) {
+        out.push(`<h2 style="margin:0.5rem 0 0.25rem;font-size:1rem;font-weight:700">${this._mdInline(esc(trimmed.slice(3)))}</h2>`);
+        i++; continue;
+      }
+      if (trimmed.startsWith('# ')) {
+        out.push(`<h2 style="margin:0.5rem 0 0.25rem;font-size:1.05rem;font-weight:700">${this._mdInline(esc(trimmed.slice(2)))}</h2>`);
+        i++; continue;
+      }
+      if (trimmed.startsWith('> ')) {
+        out.push(`<blockquote style="margin:0.25rem 0;padding:0.2rem 0.75rem;border-left:3px solid currentColor;opacity:0.75">${this._mdInline(esc(trimmed.slice(2)))}</blockquote>`);
+        i++; continue;
+      }
+      if (trimmed === '---' || trimmed === '***' || trimmed === '___') {
+        out.push('<hr style="border:none;border-top:1px solid currentColor;opacity:0.2;margin:0.5rem 0">');
+        i++; continue;
+      }
+      if (/^[-*+] /.test(trimmed)) {
+        const items = [];
+        while (i < lines.length && /^[-*+] /.test(lines[i].trim())) {
+          items.push(`<li style="margin:0.1rem 0">${this._mdInline(esc(lines[i].trim().slice(2)))}</li>`);
+          i++;
+        }
+        out.push(`<ul style="margin:0.25rem 0;padding-left:1.25rem">${items.join('')}</ul>`);
+        continue;
+      }
+      if (/^\d+\. /.test(trimmed)) {
+        const items = [];
+        while (i < lines.length && /^\d+\. /.test(lines[i].trim())) {
+          items.push(`<li style="margin:0.1rem 0">${this._mdInline(esc(lines[i].trim().replace(/^\d+\. /, '')))}</li>`);
+          i++;
+        }
+        out.push(`<ol style="margin:0.25rem 0;padding-left:1.25rem">${items.join('')}</ol>`);
+        continue;
+      }
+      if (trimmed === '') {
+        out.push('<br>');
+        i++; continue;
+      }
+      out.push(this._mdInline(esc(line)));
+      i++;
+    }
+    return out.join('\n');
+  },
+
+  _mdInline(html) {
+    return html
+      .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*([^*]+)\*/g, '<em>$1</em>')
+      .replace(/_([^_]+)_/g, '<em>$1</em>')
+      .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="text-decoration:underline;opacity:0.85" target="_blank">$1</a>');
+  },
+
+  renderBlockCode(block, context) {
+    const div = document.createElement('div');
+    div.className = 'block-code';
+    div.classList.add(this._getBlockTypeClass('code'));
+
+    const code = block.code || '';
+    const language = (block.language || 'plaintext').toLowerCase();
+    const lineCount = code.split('\n').length;
+
+    const header = document.createElement('div');
+    header.className = 'code-block-header';
+    header.innerHTML = `
+      <span class="collapsible-code-label">${this.escapeHtml(language)} - ${lineCount} line${lineCount !== 1 ? 's' : ''}</span>
+      <button class="copy-code-btn" title="Copy code">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
+      </button>
+    `;
+
+    const copyBtn = header.querySelector('.copy-code-btn');
+    copyBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      navigator.clipboard.writeText(code).then(() => {
+        const orig = copyBtn.innerHTML;
+        copyBtn.innerHTML = '<svg viewBox="0 0 20 20" fill="#34d399"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>';
+        setTimeout(() => { copyBtn.innerHTML = orig; }, 2000);
+      });
+    });
+
+    const preStyle = "background:var(--color-bg-code);padding:1rem;border-radius:0 0 0.375rem 0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:var(--color-code-text);border:1px solid var(--color-code-border);border-top:none;margin:0";
+    const codeContainer = document.createElement('div');
+    codeContainer.innerHTML = `<pre style="${preStyle}"><code class="lazy-hl">${this.escapeHtml(code)}</code></pre>`;
+
+    div.appendChild(header);
+    div.appendChild(codeContainer);
+
+    return div;
+  },
+
+  renderBlockThinking(block, context) {
+    const thinking = block.thinking || '';
+    const hasSignature = !!block.signature;
+    const div = document.createElement('div');
+    div.className = 'block-thinking';
+    div.classList.add(this._getBlockTypeClass('thinking'));
+
+    if (!thinking) {
+      div.style.cssText = 'display:flex;align-items:center;gap:0.375rem;padding:0.25rem 0;font-size:0.7rem;color:var(--color-text-secondary);opacity:0.6';
+      div.innerHTML = '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.875rem;height:0.875rem"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></svg>'
+        + '<span>Thinking</span>'
+        + (hasSignature ? '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem;color:#3b82f6"><path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>' : '');
+      return div;
+    }
+
+    div.innerHTML = '<details>'
+      + '<summary>'
+      + '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>'
+      + '<span>Thinking Process</span>'
+      + (hasSignature ? '<span style="margin-left:0.5rem;font-size:0.65rem;opacity:0.5;font-weight:400">verified</span>' : '')
+      + '</summary>'
+      + '<div class="thinking-content">' + this.parseAndRenderMarkdown(thinking) + '</div>'
+      + '</details>';
+    return div;
+  }
+});