agentgui 1.0.827 → 1.0.828

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## 2026-04-12
+- refactor: split streaming-renderer.js (2193L) into 15 files ≤200L each; all 75 prototype methods and 8 static methods preserved; index.html updated with correct load order
+
 ## 2026-04-11
 - refactor: replace jsonl-watcher.js with @lanmower/cc-tail npm package (subclass CCTailWatcher, override _line() via JsonlParser); remove custom file-watching logic
 - refactor: split syntax-highlighter.js (216L) into syntax-highlighter.js (132L) + syntax-highlighter-render.js (73L)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.827",
+  "version": "1.0.828",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/static/index.html

@@ -281,6 +281,20 @@
   </script>
   <script defer src="/gm/js/event-processor.js"></script>
   <script defer src="/gm/js/streaming-renderer.js"></script>
+  <script defer src="/gm/js/streaming-renderer-static.js"></script>
+  <script defer src="/gm/js/streaming-renderer-static2.js"></script>
+  <script defer src="/gm/js/streaming-renderer-dispatch.js"></script>
+  <script defer src="/gm/js/streaming-renderer-text.js"></script>
+  <script defer src="/gm/js/streaming-renderer-tools.js"></script>
+  <script defer src="/gm/js/streaming-renderer-tools2.js"></script>
+  <script defer src="/gm/js/streaming-renderer-params.js"></script>
+  <script defer src="/gm/js/streaming-renderer-events.js"></script>
+  <script defer src="/gm/js/streaming-renderer-events2.js"></script>
+  <script defer src="/gm/js/streaming-renderer-stream.js"></script>
+  <script defer src="/gm/js/streaming-renderer-render.js"></script>
+  <script defer src="/gm/js/streaming-renderer-render-misc.js"></script>
+  <script defer src="/gm/js/streaming-renderer-render2.js"></script>
+  <script defer src="/gm/js/streaming-renderer-render3.js"></script>
   <script defer src="/gm/js/image-loader.js"></script>
   <script defer src="/gm/js/image-loader-element.js"></script>
   <script defer src="/gm/lib/webjsx.js"></script>

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

@@ -0,0 +1,144 @@
+Object.assign(StreamingRenderer.prototype, {
+  renderBatch(batch) {
+    if (!this.outputContainer) return;
+
+    this.emit('render:start', { eventCount: batch.length });
+    const renderStart = performance.now();
+
+    try {
+      const fragment = document.createDocumentFragment();
+      let nodeCount = 0;
+
+      for (const event of batch) {
+        try {
+          const element = this.renderEvent(event);
+          if (element) {
+            fragment.appendChild(element);
+            nodeCount++;
+          }
+        } catch (error) {
+          console.error('Event render error:', error, event);
+        }
+      }
+
+      if (nodeCount > 0) {
+        this.outputContainer.appendChild(fragment);
+        this.domNodeCount += nodeCount;
+
+        this.nestToolResultsInToolUses();
+      }
+
+      this.autoScroll();
+
+      const renderTime = performance.now() - renderStart;
+      this.lastRenderTime = renderTime;
+
+      this.emit('render:complete', {
+        eventCount: batch.length,
+        nodeCount,
+        renderTime
+      });
+    } catch (error) {
+      console.error('Batch render error:', error);
+      this.emit('error:render', { error, batch });
+    }
+  },
+
+  renderEvent(event) {
+    if (!event.type) return null;
+
+    try {
+      if (event.type === 'streaming_progress' && event.block) {
+        return this.renderBlock(event.block, event);
+      }
+
+      if (event.type === 'streaming_error' && event.isPrematureEnd) {
+        return this.renderBlockPremature({ type: 'premature', error: event.error, exitCode: event.exitCode });
+      }
+
+      switch (event.type) {
+        case 'streaming_start':
+          return this.renderStreamingStart(event);
+        case 'streaming_progress':
+          return this.renderStreamingProgress(event);
+        case 'streaming_complete':
+          return this.renderStreamingComplete(event);
+        case 'file_read':
+          return this.renderFileRead(event);
+        case 'file_write':
+          return this.renderFileWrite(event);
+        case 'git_status':
+          return this.renderGitStatus(event);
+        case 'command_execute':
+          return this.renderCommand(event);
+        case 'error':
+          return this.renderError(event);
+        case 'text_block':
+          return this.renderText(event);
+        case 'code_block':
+          return this.renderCode(event);
+        case 'thinking_block':
+          return null;
+        case 'tool_use':
+          return this.renderToolUse(event);
+        case 'compact_boundary':
+          return this.renderCompactBoundary(event);
+        case 'compact_summary':
+          return this.renderCompactBoundary(event);
+        case 'turn_duration':
+          return this.renderTurnDuration(event);
+        case 'agent_progress':
+          return this.renderAgentProgress(event);
+        case 'mcp_progress':
+          return this.renderMcpProgress(event);
+        default:
+          return this.renderGeneric(event);
+      }
+    } catch (error) {
+      console.error('Event render error:', error, event);
+      return this.renderError({ message: error.message, event });
+    }
+  },
+
+  renderBlock(block, context = {}, targetContainer = null) {
+    if (!block || !block.type) return null;
+
+    try {
+      switch (block.type) {
+        case 'text':
+          return this.renderBlockText(block, context, targetContainer);
+        case 'code':
+          return this.renderBlockCode(block, context);
+        case 'thinking':
+          return this.renderBlockThinking(block, context);
+        case 'tool_use':
+          return this.renderBlockToolUse(block, context);
+        case 'tool_result':
+          return this.renderBlockToolResult(block, context);
+        case 'image':
+          return this.renderBlockImage(block, context);
+        case 'bash':
+          return this.renderBlockBash(block, context);
+        case 'system':
+          return this.renderBlockSystem(block, context);
+        case 'result':
+          return this.renderBlockResult(block, context);
+        case 'tool_status':
+          return this.renderBlockToolStatus(block, context);
+        case 'usage':
+          return this.renderBlockUsage(block, context);
+        case 'plan':
+          return this.renderBlockPlan(block, context);
+        case 'premature':
+          return this.renderBlockPremature(block, context);
+        case 'hook_progress':
+          return this.renderBlockHookProgress(block, context);
+        default:
+          return this.renderBlockGeneric(block, context);
+      }
+    } catch (error) {
+      console.error('Block render error:', error, block);
+      return this.renderBlockError(block, error);
+    }
+  }
+});

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

@@ -0,0 +1,163 @@
+Object.assign(StreamingRenderer.prototype, {
+  renderBlockImage(block, context) {
+    const div = document.createElement('div');
+    div.className = 'block-image';
+    div.classList.add(this._getBlockTypeClass('image'));
+
+    let src = block.image || block.src || '';
+    const alt = block.alt || 'Image';
+
+    if (block.data && block.media_type) {
+      src = `data:${block.media_type};base64,${block.data}`;
+    }
+
+    div.innerHTML = `
+      <img src="${this.escapeHtml(src)}" alt="${this.escapeHtml(alt)}" loading="lazy">
+      ${block.alt ? `<div class="image-caption">${this.escapeHtml(alt)}</div>` : ''}
+    `;
+
+    return div;
+  },
+
+  renderBlockBash(block, context) {
+    const div = document.createElement('div');
+    div.className = 'block-bash';
+    div.classList.add(this._getBlockTypeClass('bash'));
+
+    const command = block.command || block.code || '';
+    const output = block.output || '';
+
+    let html = `<div class="bash-command"><span class="prompt">$</span><code>${this.escapeHtml(command)}</code></div>`;
+
+    if (output) {
+      if (StreamingRenderer.detectCodeContent(output)) {
+        html += StreamingRenderer.renderCodeWithHighlight(output, this.escapeHtml.bind(this), true);
+      } else {
+        html += `<pre class="bash-output"><code>${this.escapeHtml(output)}</code></pre>`;
+      }
+    }
+
+    div.innerHTML = html;
+    return div;
+  },
+
+  renderBlockSystem(block, context) {
+    if (block.subtype === 'compact_boundary') return this.renderCompactBoundary(block);
+    if (block.subtype === 'turn_duration') return this.renderTurnDuration(block);
+    if (!block.model && !block.cwd && !block.tools) return null;
+    const details = document.createElement('details');
+    details.className = 'folded-tool folded-tool-info permanently-expanded';
+    details.dataset.eventType = 'system';
+    details.classList.add(this._getBlockTypeClass('system'));
+    const desc = block.model ? this.escapeHtml(block.model) : 'Session';
+    const summary = document.createElement('summary');
+    summary.className = 'folded-tool-bar';
+    summary.innerHTML = `
+      <span class="folded-tool-icon"><svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg></span>
+      <span class="folded-tool-name">Session</span>
+      <span class="folded-tool-desc">${desc}</span>
+    `;
+    details.appendChild(summary);
+    const body = document.createElement('div');
+    body.className = 'folded-tool-body block-system';
+    body.innerHTML = `
+      <div class="system-body">
+        ${block.model ? `<div class="sys-field"><span class="sys-label">Model</span><span class="sys-value"><code>${this.escapeHtml(block.model)}</code></span></div>` : ''}
+        ${block.cwd ? `<div class="sys-field"><span class="sys-label">Directory</span><span class="sys-value"><code>${this.escapeHtml(block.cwd)}</code></span></div>` : ''}
+        ${block.session_id ? `<div class="sys-field"><span class="sys-label">Session</span><span class="sys-value"><code>${this.escapeHtml(block.session_id)}</code></span></div>` : ''}
+        ${block.tools && Array.isArray(block.tools) ? `<div class="sys-field" style="flex-direction:column;gap:0.375rem"><span class="sys-label">Tools (${block.tools.length})</span><div class="tools-list">${block.tools.map(t => `<span class="tool-badge">${this.escapeHtml(t)}</span>`).join('')}</div></div>` : ''}
+      </div>
+    `;
+    details.appendChild(body);
+    return details;
+  },
+
+  renderBlockResult(block, context) {
+    const isError = block.is_error || false;
+    const duration = block.duration_ms ? (block.duration_ms / 1000).toFixed(1) + 's' : '';
+    const cost = block.total_cost_usd ? '$' + block.total_cost_usd.toFixed(4) : '';
+    const turns = block.num_turns || '';
+    const statsDesc = [duration, cost, turns ? turns + ' turns' : ''].filter(Boolean).join(' / ');
+
+    const details = document.createElement('details');
+    details.className = isError ? 'folded-tool folded-tool-error permanently-expanded' : 'folded-tool permanently-expanded';
+    details.dataset.eventType = 'result';
+    details.classList.add(this._getBlockTypeClass(isError ? 'error' : 'result'));
+
+    const iconSvg = isError
+      ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
+      : '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
+
+    const summary = document.createElement('summary');
+    summary.className = 'folded-tool-bar';
+    summary.innerHTML = `
+      <span class="folded-tool-icon">${iconSvg}</span>
+      <span class="folded-tool-name">${isError ? 'Failed' : 'Complete'}</span>
+      <span class="folded-tool-desc">${this.escapeHtml(statsDesc)}</span>
+    `;
+    details.appendChild(summary);
+
+    if (block.result || duration || cost || turns) {
+      const body = document.createElement('div');
+      body.className = 'folded-tool-body';
+      let bodyHtml = '';
+      if (duration || cost || turns) {
+        bodyHtml += `<div class="block-result"><div class="result-stats">
+          ${duration ? `<div class="result-stat"><span class="stat-icon">&#9202;</span><span class="stat-value">${this.escapeHtml(duration)}</span><span class="stat-label">duration</span></div>` : ''}
+          ${cost ? `<div class="result-stat"><span class="stat-icon">&#128176;</span><span class="stat-value">${this.escapeHtml(cost)}</span><span class="stat-label">cost</span></div>` : ''}
+          ${turns ? `<div class="result-stat"><span class="stat-icon">&#128260;</span><span class="stat-value">${this.escapeHtml(String(turns))}</span><span class="stat-label">turns</span></div>` : ''}
+        </div></div>`;
+      }
+      if (block.result) {
+        const r = typeof block.result === 'string' ? block.result : JSON.stringify(block.result, null, 2);
+        const rendered = this.containsHtmlTags(r) ? '<div class="html-content">' + this.sanitizeHtml(r) + '</div>' : `<div style="font-size:0.8rem;white-space:pre-wrap;word-break:break-word;line-height:1.5">${this.escapeHtml(r)}</div>`;
+        bodyHtml += rendered;
+      }
+      body.innerHTML = bodyHtml;
+      details.appendChild(body);
+    }
+
+    return details;
+  },
+
+  renderBlockToolStatus(block, context) {
+    const status = block.status || 'pending';
+    const statusIcons = {
+      pending: '<svg viewBox="0 0 20 20" fill="currentColor" style="color:var(--color-text-secondary)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>',
+      in_progress: '<svg viewBox="0 0 20 20" fill="currentColor" class="animate-spin" style="color:var(--color-info)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>'
+    };
+    const statusLabels = {
+      pending: 'Pending',
+      in_progress: 'Running...'
+    };
+
+    const div = document.createElement('div');
+    div.className = 'block-tool-status';
+    div.dataset.toolUseId = block.tool_use_id || '';
+    div.classList.add(this._getBlockTypeClass('tool_status'));
+    div.innerHTML = `
+      <div style="display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;font-size:0.75rem;color:var(--color-text-secondary)">
+        ${statusIcons[status] || statusIcons.pending}
+        <span>${statusLabels[status] || this.escapeHtml(status)}</span>
+      </div>
+    `;
+    return div;
+  },
+
+  renderBlockHookProgress(block, context) {
+    const hookEvent = block.hookEvent || block.hookName || '';
+    const hookIcons = {
+      PreToolUse: '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem"><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>',
+      PostToolUse: '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem"><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>',
+      Stop: '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd"/></svg>'
+    };
+    const icon = hookIcons[hookEvent.split(':')[0]] || hookIcons.PreToolUse;
+    const label = hookEvent.includes(':') ? hookEvent.split(':').pop() : hookEvent;
+    const div = document.createElement('div');
+    div.className = 'block-hook-progress';
+    div.dataset.hookEvent = hookEvent;
+    div.style.cssText = 'display:none';
+    div.innerHTML = '<span class="hook-badge" style="display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.5rem;font-size:0.65rem;color:var(--color-text-secondary);opacity:0.5">' + icon + '<span>' + this.escapeHtml(label) + '</span></span>';
+    return div;
+  }
+});

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

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

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

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