agentgui 1.0.931 → 1.0.933

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

@@ -1,125 +0,0 @@
-Object.assign(StreamingRenderer.prototype, {
-  renderBlockUsage(block, context) {
-    const usage = block.usage || {};
-    const used = usage.used || 0;
-    const size = usage.size || 0;
-    const cost = usage.cost ? '$' + usage.cost.toFixed(4) : '';
-
-    const div = document.createElement('div');
-    div.className = 'block-usage';
-    div.classList.add(this._getBlockTypeClass('usage'));
-    div.innerHTML = `
-      <div style="display:flex;gap:1rem;padding:0.25rem 0.5rem;font-size:0.7rem;color:var(--color-text-secondary);background:var(--color-bg-secondary);border-radius:0.25rem">
-        ${used ? `<span><strong>Used:</strong> ${used.toLocaleString()}</span>` : ''}
-        ${size ? `<span><strong>Context:</strong> ${size.toLocaleString()}</span>` : ''}
-        ${cost ? `<span><strong>Cost:</strong> ${cost}</span>` : ''}
-      </div>
-    `;
-    return div;
-  },
-
-  renderBlockPlan(block, context) {
-    const entries = block.entries || [];
-    if (entries.length === 0) return null;
-
-    const priorityColors = {
-      high: '#ef4444',
-      medium: '#f59e0b',
-      low: '#6b7280'
-    };
-    const statusIcons = {
-      pending: '○',
-      in_progress: '◐',
-      completed: '●'
-    };
-
-    const div = document.createElement('div');
-    div.className = 'block-plan';
-    div.classList.add(this._getBlockTypeClass('plan'));
-    div.innerHTML = `
-      <details class="folded-tool folded-tool-info">
-        <summary class="folded-tool-bar">
-          <span class="folded-tool-icon"><svg viewBox="0 0 20 20" fill="currentColor"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/></svg></span>
-          <span class="folded-tool-name">Plan</span>
-          <span class="folded-tool-desc">${entries.length} tasks</span>
-        </summary>
-        <div class="folded-tool-body">
-          <div style="display:flex;flex-direction:column;gap:0.375rem">
-            ${entries.map(e => `
-              <div style="display:flex;align-items:center;gap:0.5rem;font-size:0.8rem">
-                <span style="color:${priorityColors[e.priority] || priorityColors.low}">${statusIcons[e.status] || statusIcons.pending}</span>
-                <span style="${e.status === 'completed' ? 'text-decoration:line-through;opacity:0.6' : ''}">${this.escapeHtml(e.content || '')}</span>
-              </div>
-            `).join('')}
-          </div>
-        </div>
-      </details>
-    `;
-    return div;
-  },
-
-  renderBlockPremature(block, context) {
-    const div = document.createElement('div');
-    div.className = 'folded-tool folded-tool-error block-premature';
-    div.classList.add(this._getBlockTypeClass('premature'));
-    const code = block.exitCode != null ? ` (exit ${block.exitCode})` : '';
-    const stderrDisplay = block.stderrText ? `<div class="folded-tool-content" style="margin-top:8px;padding:8px;background:rgba(0,0,0,0.05);border-radius:4px;font-family:monospace;font-size:0.9em;white-space:pre-wrap;">${this.escapeHtml(block.stderrText)}</div>` : '';
-    div.innerHTML = `
-      <div class="folded-tool-bar" style="background:rgba(245,158,11,0.1)">
-        <span class="folded-tool-icon" style="color:#f59e0b"><svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg></span>
-        <span class="folded-tool-name" style="color:#f59e0b">ACP Ended Prematurely${this.escapeHtml(code)}</span>
-        <span class="folded-tool-desc">${this.escapeHtml(block.error || 'Process exited without output')}</span>
-      </div>
-      ${stderrDisplay}
-    `;
-    return div;
-  },
-
-  renderBlockGeneric(block, context) {
-    const div = document.createElement('div');
-    div.className = 'block-generic';
-    div.classList.add(this._getBlockTypeClass('generic'));
-
-    const fieldsHtml = Object.entries(block)
-      .filter(([key]) => key !== 'type')
-      .map(([key, value]) => {
-        let displayValue;
-        if (typeof value === 'string') {
-          displayValue = value.length > 200 ? value.substring(0, 200) + '...' : value;
-        } else if (typeof value === 'number' || typeof value === 'boolean') {
-          displayValue = String(value);
-        } else {
-          displayValue = JSON.stringify(value, null, 2);
-          if (displayValue.length > 200) displayValue = displayValue.substring(0, 200) + '...';
-        }
-        return `<div class="generic-field"><span class="field-key">${this.escapeHtml(key)}:</span><span class="field-value">${this.escapeHtml(displayValue)}</span></div>`;
-      }).join('');
-
-    div.innerHTML = `
-      <div class="generic-type">${this.escapeHtml(block.type)}</div>
-      <div class="generic-fields">${fieldsHtml}</div>
-    `;
-
-    return div;
-  },
-
-  renderBlockError(block, error) {
-    const div = document.createElement('div');
-    div.className = 'block-error';
-    div.classList.add(this._getBlockTypeClass('error'));
-
-    div.innerHTML = `
-      <div style="display:flex;align-items:flex-start;gap:0.625rem">
-        <svg viewBox="0 0 20 20" fill="currentColor" style="color:#ef4444;flex-shrink:0;margin-top:0.125rem">
-          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
-        </svg>
-        <div>
-          <div style="font-weight:600;color:#991b1b">Render Error</div>
-          <div style="font-size:0.85rem;color:#7f1d1d;margin-top:0.25rem">${this.escapeHtml(error.message)}</div>
-        </div>
-      </div>
-    `;
-
-    return div;
-  }
-});

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

@@ -1,38 +0,0 @@
-Object.assign(StreamingRenderer.prototype, {
-  renderParametersBeautiful(data, depth = 0) {
-    if (data === null || data === undefined) return `<span style="color:var(--color-text-secondary);font-style:italic">null</span>`;
-    if (typeof data === 'boolean') return `<span style="color:#d97706;font-weight:600">${data}</span>`;
-    if (typeof data === 'number') return `<span style="color:#7c3aed;font-weight:600">${data}</span>`;
-
-    if (typeof data === 'string') {
-      if (data.length > 200 && StreamingRenderer.detectCodeContent(data)) {
-        const displayData = data.length > 1000 ? data.substring(0, 1000) : data;
-        const suffix = data.length > 1000 ? `<div style="font-size:0.7rem;color:var(--color-text-secondary);text-align:center;padding:0.25rem">... ${data.length - 1000} more characters</div>` : '';
-        return `<div style="max-height:200px;overflow-y:auto">${StreamingRenderer.renderCodeWithHighlight(displayData, this.escapeHtml.bind(this), true)}${suffix}</div>`;
-      }
-      if (data.length > 500) {
-        const lines = data.split('\n').length;
-        return `<div style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;background:var(--color-bg-code);color:var(--color-code-text);padding:0.5rem;border-radius:0.375rem;line-height:1.5">${this.escapeHtml(data.substring(0, 1000))}${data.length > 1000 ? '\n... (' + (data.length - 1000) + ' more chars, ' + lines + ' lines)' : ''}</div>`;
-      }
-      const looksLikePath = data.startsWith('/') || /^[A-Za-z]:[\\\/]/.test(data);
-      if (looksLikePath && !data.includes(' ') && data.includes('.')) return this.renderFilePath(data);
-      return `<span style="color:var(--color-text-primary)">${this.escapeHtml(data)}</span>`;
-    }
-
-    if (Array.isArray(data)) {
-      if (data.length === 0) return `<span style="color:var(--color-text-secondary)">[]</span>`;
-      if (data.every(i => typeof i === 'string') && data.length <= 20) {
-        return `<div style="display:flex;flex-direction:column;gap:0.125rem;${depth > 0 ? 'padding-left:1rem' : ''}">${data.map((i, idx) => `<div style="display:flex;align-items:center;gap:0.375rem"><span style="color:var(--color-text-secondary);font-size:0.65rem;opacity:0.5">•</span><span style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem">${this.escapeHtml(i)}</span></div>`).join('')}</div>`;
-      }
-      return `<div style="display:flex;flex-direction:column;gap:0.25rem;${depth > 0 ? 'padding-left:1rem' : ''}">${data.map((item, i) => `<div style="display:flex;gap:0.5rem;align-items:flex-start"><span style="color:var(--color-text-secondary);font-size:0.7rem;min-width:1.5rem;text-align:right;flex-shrink:0">${i}</span><div style="flex:1;min-width:0">${this.renderParametersBeautiful(item, depth + 1)}</div></div>`).join('')}</div>`;
-    }
-
-    if (typeof data === 'object') {
-      const entries = Object.entries(data);
-      if (entries.length === 0) return `<span style="color:var(--color-text-secondary)">{}</span>`;
-      return `<div style="display:flex;flex-direction:column;gap:0.375rem;${depth > 0 ? 'padding-left:1rem' : ''}">${entries.map(([k, v]) => `<div style="display:flex;gap:0.5rem;align-items:flex-start"><span style="font-weight:600;font-size:0.75rem;color:#0891b2;flex-shrink:0;min-width:fit-content;font-family:'Monaco','Menlo','Ubuntu Mono',monospace">${this.escapeHtml(k)}</span><div style="flex:1;min-width:0;font-size:0.8rem">${this.renderParametersBeautiful(v, depth + 1)}</div></div>`).join('')}</div>`;
-    }
-
-    return `<span>${this.escapeHtml(String(data))}</span>`;
-  }
-});

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

@@ -1,107 +0,0 @@
-Object.assign(StreamingRenderer.prototype, {
-  renderCode(event) {
-    const div = document.createElement('div');
-    div.className = 'event-code mb-3';
-    div.dataset.eventId = event.id || '';
-    div.dataset.eventType = 'code_block';
-
-    const code = event.code || event.content || '';
-    const language = event.language || 'plaintext';
-
-    if (language === 'html') {
-      div.innerHTML = `
-        <div class="html-rendered-container alert alert-info text-xs mb-2">
-          Rendered HTML
-        </div>
-        <div class="html-content">
-          ${code}
-        </div>
-      `;
-    } else {
-      const codeLineCount = code.split('\n').length;
-      div.innerHTML = `
-        <details class="collapsible-code">
-          <summary class="collapsible-code-summary">${this.escapeHtml(language)} - ${codeLineCount} line${codeLineCount !== 1 ? 's' : ''}</summary>
-          <pre class="bg-base-300 text-base-content p-4 overflow-x-auto" style="margin:0;border-radius:0 0 0.375rem 0.375rem"><code class="language-${this.escapeHtml(language)}">${this.escapeHtml(code)}</code></pre>
-        </details>
-      `;
-    }
-    return div;
-  },
-
-  renderThinking(event) {
-    const div = document.createElement('div');
-    div.className = 'event-thinking mb-3 p-4 alert rounded';
-    div.dataset.eventId = event.id || '';
-    div.dataset.eventType = 'thinking_block';
-
-    const text = event.thinking || event.content || '';
-    div.innerHTML = `
-      <details>
-        <summary class="cursor-pointer font-semibold text-base-content">Thinking</summary>
-        <p class="mt-3 text-sm text-base-content/80 whitespace-pre-wrap">${this.escapeHtml(text)}</p>
-      </details>
-    `;
-    return div;
-  },
-
-  renderToolUse(event) {
-    const block = {
-      type: 'tool_use',
-      name: event.toolName || event.tool || 'unknown',
-      input: event.input || {}
-    };
-    const div = this.renderBlockToolUse(block, event);
-    div.className = 'event-tool-use mb-3';
-    div.dataset.eventId = event.id || '';
-    div.dataset.eventType = 'tool_use';
-    return div;
-  },
-
-
-
-  renderCompactBoundary(event) {
-    const preTokens = event._preTokens || event.compactMetadata?.preTokens;
-    const div = document.createElement('div');
-    div.className = 'event-compact-boundary';
-    div.dataset.eventType = 'compact_boundary';
-    div.innerHTML = `
-      <div style="display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0.75rem;margin:0.5rem 0;background:var(--color-bg-secondary);border-radius:0.375rem;font-size:0.75rem;color:var(--color-text-secondary)">
-        <svg viewBox="0 0 20 20" fill="currentColor" style="width:1rem;height:1rem;flex-shrink:0;opacity:0.6"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
-        <span>Conversation compacted${preTokens ? ` (${preTokens.toLocaleString()} tokens before)` : ''}</span>
-      </div>
-    `;
-    return div;
-  },
-
-  renderTurnDuration(event) {
-    const ms = event._turnDurationMs || event.durationMs;
-    if (!ms) return null;
-    const sec = (ms / 1000).toFixed(1);
-    const div = document.createElement('div');
-    div.className = 'event-turn-duration';
-    div.dataset.eventType = 'turn_duration';
-    div.innerHTML = `
-      <div style="display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.75rem;font-size:0.7rem;color:var(--color-text-secondary);opacity:0.7">
-        <svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem;flex-shrink:0"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>
-        <span>${sec}s</span>
-      </div>
-    `;
-    return div;
-  },
-
-  renderAgentProgress(event) {
-    const msg = event.data?.message || event.message || '';
-    if (!msg) return null;
-    const div = document.createElement('div');
-    div.className = 'event-agent-progress';
-    div.dataset.eventType = 'agent_progress';
-    div.innerHTML = `
-      <div style="display:flex;align-items:flex-start;gap:0.5rem;padding:0.375rem 0.75rem;margin:0.25rem 0;background:var(--color-bg-secondary);border-left:2px solid #7c3aed;border-radius:0 0.25rem 0.25rem 0;font-size:0.75rem;color:var(--color-text-secondary)">
-        <svg viewBox="0 0 20 20" fill="currentColor" style="width:0.875rem;height:0.875rem;flex-shrink:0;margin-top:0.125rem;color:#7c3aed"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5z" clip-rule="evenodd"/></svg>
-        <span>${this.escapeHtml(msg)}</span>
-      </div>
-    `;
-    return div;
-  }
-});

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

@@ -1,181 +0,0 @@
-Object.assign(StreamingRenderer.prototype, {
-  renderGitStatus(event) {
-    const div = document.createElement('div');
-    div.className = 'event-git-status card mb-3 p-4';
-    div.dataset.eventId = event.id || '';
-    div.dataset.eventType = 'git_status';
-
-    const branch = event.branch || 'unknown';
-    const changes = event.changes || {};
-    const total = (changes.added || 0) + (changes.modified || 0) + (changes.deleted || 0);
-
-    div.innerHTML = `
-      <div class="flex items-center gap-3 mb-2">
-        <svg class="w-4 h-4 text-warning" fill="currentColor" viewBox="0 0 20 20">
-          <path fill-rule="evenodd" d="M9.243 3.03a1 1 0 01.727 1.155L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H17a1 1 0 110 2h-2.97l-.5 2H17a1 1 0 110 2h-3.03l-.56 2.243a1 1 0 11-1.94-.486L12.47 14H9.53l-.56 2.243a1 1 0 11-1.94-.486L7.47 14H4a1 1 0 110-2h3.03l.5-2H4a1 1 0 110-2h2.97l.56-2.243a1 1 0 011.155-.727zM9.03 8l.5 2h2.94l-.5-2H9.03z" clip-rule="evenodd"></path>
-        </svg>
-        <div class="flex-1">
-          <h4 class="font-semibold text-sm">Git Status</h4>
-          <p class="text-xs text-secondary">Branch: ${this.escapeHtml(branch)}</p>
-        </div>
-      </div>
-      <div class="flex gap-4 text-xs">
-        ${changes.added ? `<span class="text-success">+${changes.added}</span>` : ''}
-        ${changes.modified ? `<span class="text-info">~${changes.modified}</span>` : ''}
-        ${changes.deleted ? `<span class="text-error">-${changes.deleted}</span>` : ''}
-        ${total === 0 ? '<span class="text-secondary">no changes</span>' : ''}
-      </div>
-    `;
-    return div;
-  },
-
-  renderCommand(event) {
-    const command = event.command || '';
-    const output = event.output || '';
-    const exitCode = event.exitCode !== undefined ? event.exitCode : null;
-    const cmdPreview = command.length > 60 ? command.substring(0, 57) + '...' : command;
-
-    const details = document.createElement('details');
-    details.className = 'block-tool-use folded-tool';
-    details.classList.add(this._getBlockTypeClass('tool_use'));
-    details.classList.add(this._getToolColorClass('Bash'));
-    details.dataset.eventId = event.id || '';
-    details.dataset.eventType = 'command_execute';
-    const summary = document.createElement('summary');
-    summary.className = 'folded-tool-bar';
-    summary.innerHTML = `
-      <span class="folded-tool-icon">${this.getToolIcon('Bash')}</span>
-      <span class="folded-tool-name">Bash</span>
-      <span class="folded-tool-desc">${this.escapeHtml(cmdPreview)}</span>
-    `;
-    details.appendChild(summary);
-
-    const body = document.createElement('div');
-    body.className = 'folded-tool-body';
-    let html = `<div class="tool-param-command"><span class="prompt-char">$</span><span class="command-text">${this.escapeHtml(command)}</span></div>`;
-    if (output) {
-      html += `<pre style="background:var(--color-bg-code);padding:0.75rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;line-height:1.5;color:var(--color-code-text);margin:0.5rem 0 0 0"><code class="lazy-hl">${this.escapeHtml(this.truncateContent(output, 2000))}</code></pre>`;
-    }
-    if (exitCode !== null && exitCode !== 0) {
-      html += `<div style="margin-top:0.375rem;font-size:0.75rem;color:#ef4444;font-weight:600">Exit code: ${exitCode}</div>`;
-    }
-    body.innerHTML = html;
-    details.appendChild(body);
-    return details;
-  },
-
-  renderError(event) {
-    const message = event.message || event.error || 'Unknown error';
-    const severity = event.severity || 'error';
-    const msgPreview = message.length > 80 ? message.substring(0, 77) + '...' : message;
-
-    const details = document.createElement('details');
-    details.className = 'folded-tool folded-tool-error permanently-expanded';
-    details.dataset.eventId = event.id || '';
-    details.dataset.eventType = 'error';
-    const summary = document.createElement('summary');
-    summary.className = 'folded-tool-bar';
-    summary.innerHTML = `
-      <span class="folded-tool-icon"><svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg></span>
-      <span class="folded-tool-name">Error</span>
-      <span class="folded-tool-desc">${this.escapeHtml(msgPreview)}</span>
-    `;
-    details.appendChild(summary);
-
-    const body = document.createElement('div');
-    body.className = 'folded-tool-body';
-    body.innerHTML = `<div style="font-size:0.8rem;white-space:pre-wrap;word-break:break-word;line-height:1.5">${this.escapeHtml(message)}</div>`;
-    details.appendChild(body);
-    return details;
-  },
-
-  isHtmlContent(text) {
-    const openTag = /<(?:div|table|section|article|form|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6])\b[^>]*>/i;
-    const closeTag = /<\/(?:div|table|section|article|form|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6])>/i;
-    return openTag.test(text) && closeTag.test(text);
-  },
-
-  parseMarkdownCodeBlocks(text) {
-    const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g;
-    const parts = [];
-    let lastIndex = 0;
-    let match;
-
-    while ((match = codeBlockRegex.exec(text)) !== null) {
-      if (match.index > lastIndex) {
-        const segment = text.substring(lastIndex, match.index);
-        parts.push({ type: this.isHtmlContent(segment) ? 'html' : 'text', content: segment });
-      }
-      parts.push({ type: 'code', language: match[1] || 'plain', code: match[2] });
-      lastIndex = codeBlockRegex.lastIndex;
-    }
-
-    if (lastIndex < text.length) {
-      const segment = text.substring(lastIndex);
-      parts.push({ type: this.isHtmlContent(segment) ? 'html' : 'text', content: segment });
-    }
-
-    if (parts.length === 0) {
-      return [{ type: this.isHtmlContent(text) ? 'html' : 'text', content: text }];
-    }
-
-    return parts;
-  },
-
-  renderText(event) {
-    const div = document.createElement('div');
-    div.className = 'event-text mb-3';
-    div.dataset.eventId = event.id || '';
-    div.dataset.eventType = 'text_block';
-
-    const text = event.text || event.content || '';
-    const parts = this.parseMarkdownCodeBlocks(text);
-    let html = '';
-    parts.forEach(part => {
-      if (part.type === 'html') {
-        html += `<div class="html-content mb-3">${part.content}</div>`;
-      } else if (part.type === 'text') {
-        html += `<div class="card card-body mb-3 leading-relaxed text-sm">${this.parseAndRenderMarkdown(part.content)}</div>`;
-      } else if (part.type === 'code') {
-        if (part.language.toLowerCase() === 'html') {
-          html += `<div class="html-rendered-container mb-3">
-            <div class="html-rendered-label">Rendered HTML</div>
-            <div class="html-content bg-base-100 p-4 overflow-x-auto">${part.code}</div>
-          </div>`;
-        } else {
-          const partLineCount = part.code.split('\n').length;
-          html += `<div class="card mb-3 rounded-lg overflow-hidden">
-            <details class="collapsible-code">
-              <summary class="collapsible-code-summary">
-                <span>${this.escapeHtml(part.language)} - ${partLineCount} line${partLineCount !== 1 ? 's' : ''}</span>
-                <button class="copy-code-btn" title="Copy code" onclick="event.preventDefault();event.stopPropagation();navigator.clipboard.writeText(this.closest('.collapsible-code').querySelector('code').textContent)">
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
-                  </svg>
-                </button>
-              </summary>
-              <pre class="bg-base-300 text-base-content p-4 overflow-x-auto" style="margin:0;border-radius:0 0 0.375rem 0.375rem"><code class="language-${this.escapeHtml(part.language)}">${this.escapeHtml(part.code)}</code></pre>
-            </details>
-          </div>`;
-        }
-      }
-    });
-    div.innerHTML = html;
-
-    div.querySelectorAll('.copy-code-btn').forEach(btn => {
-      btn.addEventListener('click', () => {
-        const codeElement = btn.closest('.mb-3')?.querySelector('code');
-        if (codeElement) {
-          const code = codeElement.textContent;
-          navigator.clipboard.writeText(code).then(() => {
-            const originalText = btn.innerHTML;
-            btn.innerHTML = '<svg class="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>';
-            setTimeout(() => { btn.innerHTML = originalText; }, 2000);
-          });
-        }
-      });
-    });
-
-    return div;
-  }
-});

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

@@ -1,149 +0,0 @@
-Object.assign(StreamingRenderer.prototype, {
-  renderMcpProgress(event) {
-    const status = event.status || 'running';
-    const name = event.tool || event.name || 'MCP tool';
-    const statusColors = { running: '#0891b2', completed: '#059669', failed: '#dc2626' };
-    const color = statusColors[status] || statusColors.running;
-    const div = document.createElement('div');
-    div.className = 'event-mcp-progress';
-    div.dataset.eventType = 'mcp_progress';
-    div.innerHTML = `
-      <div style="display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.75rem;font-size:0.75rem;color:var(--color-text-secondary)">
-        <span style="width:0.5rem;height:0.5rem;border-radius:50%;background:${color};flex-shrink:0"></span>
-        <span style="color:${color};font-weight:600">MCP</span>
-        <span>${this.escapeHtml(name)}</span>
-        <span style="opacity:0.6">${this.escapeHtml(status)}</span>
-      </div>
-    `;
-    return div;
-  },
-
-  renderGeneric(event) {
-    if ((event.content?.source?.type === 'base64' || event.content?.type === 'base64') && event.path) {
-      return this.renderFileRead(event);
-    }
-
-    const div = document.createElement('div');
-    div.className = 'event-generic mb-3 p-3 bg-base-200 rounded text-sm';
-    div.dataset.eventId = event.id || '';
-    div.dataset.eventType = event.type;
-
-    const time = new Date(event.timestamp).toLocaleTimeString();
-
-    const fieldsHtml = Object.entries(event)
-      .filter(([key]) => !['type', 'timestamp'].includes(key))
-      .map(([key, value]) => {
-        let displayValue;
-        if (typeof value === 'string') {
-          displayValue = value.length > 100 ? value.substring(0, 100) + '...' : value;
-        } else if (typeof value === 'number' || typeof value === 'boolean') {
-          displayValue = String(value);
-        } else if (value === null) {
-          displayValue = 'null';
-        } else {
-          displayValue = JSON.stringify(value);
-          if (displayValue.length > 100) displayValue = displayValue.substring(0, 100) + '...';
-        }
-        return `<div style="font-size:0.75rem;margin-bottom:0.25rem"><span style="font-weight:600;color:var(--color-text-secondary)">${this.escapeHtml(key)}:</span> <span style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace">${this.escapeHtml(displayValue)}</span></div>`;
-      }).join('');
-
-    div.innerHTML = `
-      <div style="display:flex;justify-content:space-between;margin-bottom:0.5rem">
-        <span style="font-weight:600;color:var(--color-text-primary)">${this.escapeHtml(event.type)}</span>
-        <span style="font-size:0.75rem;color:var(--color-text-secondary)">${time}</span>
-      </div>
-      <div>${fieldsHtml || '<span style="color:var(--color-text-secondary);font-size:0.75rem">No additional data</span>'}</div>
-    `;
-    return div;
-  },
-
-  nestToolResultsInToolUses() {
-    if (!this.outputContainer) return;
-
-    const toolUseBlocks = this.outputContainer.querySelectorAll('details.block-tool-use[data-tool-use-id]');
-    const toolResultBlocks = this.outputContainer.querySelectorAll('.tool-result-pending[data-tool-use-id]');
-
-    toolResultBlocks.forEach(resultBlock => {
-      const toolUseId = resultBlock.dataset.toolUseId;
-      const isError = resultBlock.dataset.isError === '1';
-      const toolUseBlock = Array.from(toolUseBlocks).find(b => b.dataset.toolUseId === toolUseId);
-
-      if (toolUseBlock) {
-        const toolUseSummary = toolUseBlock.querySelector(':scope > summary');
-
-        if (toolUseSummary && !toolUseSummary.querySelector('.folded-tool-status')) {
-          const statusSvg = isError
-            ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
-            : '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
-          const statusSpan = document.createElement('span');
-          statusSpan.className = 'folded-tool-status';
-          statusSpan.innerHTML = statusSvg;
-          toolUseSummary.appendChild(statusSpan);
-          toolUseBlock.classList.add(isError ? 'tool-result-error' : 'tool-result-success');
-        }
-
-        if (resultBlock.innerHTML.trim()) {
-          let toolUseBody = toolUseBlock.querySelector(':scope > .folded-tool-body');
-          if (!toolUseBody) {
-            toolUseBody = document.createElement('div');
-            toolUseBody.className = 'folded-tool-body';
-            toolUseBlock.appendChild(toolUseBody);
-          }
-          const resultContent = document.createElement('div');
-          resultContent.className = 'folded-tool-result-content';
-          resultContent.innerHTML = resultBlock.innerHTML;
-          toolUseBody.appendChild(resultContent);
-        }
-
-        resultBlock.remove();
-      } else {
-        resultBlock.remove();
-      }
-    });
-  },
-
-  mergeResultIntoToolUse(toolUseEl, block) {
-    const content = block.content || '';
-    const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
-    const isError = (block.is_error || false) && !contentStr.trimStart().startsWith('exec ran successfully.');
-
-    toolUseEl.classList.remove('has-success', 'has-error', 'tool-result-success', 'tool-result-error');
-    toolUseEl.classList.add(isError ? 'has-error' : 'has-success', isError ? 'tool-result-error' : 'tool-result-success');
-
-    const summary = toolUseEl.querySelector(':scope > summary');
-    if (summary && !summary.querySelector('.folded-tool-status')) {
-      const statusSvg = isError
-        ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
-        : '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
-      const statusSpan = document.createElement('span');
-      statusSpan.className = 'folded-tool-status';
-      statusSpan.innerHTML = statusSvg;
-      summary.appendChild(statusSpan);
-      const startedAt = parseInt(toolUseEl.dataset.startedAt);
-      if (startedAt > 0) {
-        const ms = Date.now() - startedAt;
-        const label = ms < 1000 ? ms + 'ms' : (ms / 1000).toFixed(1) + 's';
-        const dur = document.createElement('span');
-        dur.className = 'folded-tool-duration';
-        dur.style.cssText = 'margin-left:0.375rem;font-size:0.6rem;opacity:0.45;font-weight:400';
-        dur.textContent = label;
-        summary.appendChild(dur);
-      }
-    }
-
-    const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this), true);
-    if (renderedContent && renderedContent.trim()) {
-      let toolUseBody = toolUseEl.querySelector(':scope > .folded-tool-body');
-      if (!toolUseBody) {
-        toolUseBody = document.createElement('div');
-        toolUseBody.className = 'folded-tool-body';
-        toolUseEl.appendChild(toolUseBody);
-      }
-      const resultContent = document.createElement('div');
-      resultContent.className = 'folded-tool-result-content';
-      resultContent.innerHTML = renderedContent;
-      toolUseBody.appendChild(resultContent);
-    }
-  }
-
-});