agentgui 1.0.930 → 1.0.932

package/static/js/client-exec.js

@@ -1,160 +0,0 @@
-Object.assign(AgentGUIClient.prototype, {
-  async startExecution() {
-    const prompt = this.ui.messageInput?.value || '';
-
-    if (!prompt.trim()) {
-      this.showError('Please enter a prompt');
-      return;
-    }
-
-    this.disableControls();
-    const ttsActive = window.TTSHandler && window.TTSHandler.getAutoSpeak && window.TTSHandler.getAutoSpeak();
-    const savedPrompt = ttsActive ? prompt + '\n\n[Respond optimized for text-to-speech: use short sentences, simple words, and focus on clarity.]' : prompt;
-    if (this.ui.messageInput) {
-      this.ui.messageInput.value = '';
-      this.ui.messageInput.style.height = 'auto';
-    }
-
-    const pendingId = 'pending-' + Date.now() + '-' + Math.random().toString(36).substr(2, 6);
-
-    const isStreaming = this._convIsStreaming(this.state.currentConversation?.id);
-    if (!isStreaming) {
-      this._showOptimisticMessage(pendingId, savedPrompt);
-    }
-
-    try {
-      let conv = this.state.currentConversation;
-
-      if (this._isLoadingConversation) {
-        this.showError('Conversation still loading. Please try again.');
-        this.enableControls();
-        return;
-      }
-
-      if (conv && typeof conv === 'string') {
-        this.showError('Conversation state invalid. Please reload.');
-        this.enableControls();
-        return;
-      }
-
-      if (conv?.id) {
-        const isNewConversation = !conv.messageCount && !this._convIsStreaming(conv.id);
-        const agentId = (isNewConversation ? this.getCurrentAgent() : null) || conv?.agentType || this.getCurrentAgent();
-        const subAgent = this.getEffectiveSubAgent() || conv?.subAgent || null;
-        const model = this.ui.modelSelector?.value || null;
-
-        this.lockAgentAndModel(agentId, model);
-        await this.streamToConversation(conv.id, savedPrompt, agentId, model, subAgent);
-        this.clearDraft(conv.id);
-        if (!isStreaming) {
-          this._confirmOptimisticMessage(pendingId);
-        }
-      } else {
-        const agentId = this.getCurrentAgent();
-        const subAgent = this.getEffectiveSubAgent() || null;
-        const model = this.ui.modelSelector?.value || null;
-
-        const body = { agentId, title: savedPrompt.substring(0, 50) };
-        if (model) body.model = model;
-        if (subAgent) body.subAgent = subAgent;
-        const { conversation } = await window.wsClient.rpc('conv.new', body);
-        window.ConversationState?.selectConversation(conversation.id, 'conversation_created', 1);
-        this.state.currentConversation = conversation;
-        this.lockAgentAndModel(agentId, model);
-
-        if (window.conversationManager) {
-          window.conversationManager.loadConversations();
-          window.conversationManager.select(conversation.id);
-        }
-
-        await this.streamToConversation(conversation.id, savedPrompt, agentId, model, subAgent);
-        this.clearDraft(conversation.id);
-        this._confirmOptimisticMessage(pendingId);
-      }
-    } catch (error) {
-      console.error('Execution error:', error);
-      if (!isStreaming) {
-        this._failOptimisticMessage(pendingId, savedPrompt, error.message);
-      }
-      this.enableControls();
-    }
-  },
-
-
-  _showOptimisticMessage(pendingId, content) {
-    const messagesEl = document.querySelector('.conversation-messages');
-    if (!messagesEl) return;
-    messagesEl.querySelectorAll('p.text-secondary').forEach(p => p.remove());
-    const div = document.createElement('div');
-    div.className = 'message message-user message-sending';
-    div.id = pendingId;
-    div.innerHTML = `<div class="message-role">User</div><div class="message-text">${this.escapeHtml(content)}</div><div class="message-timestamp" style="opacity:0.5">Sending...</div>`;
-    messagesEl.appendChild(div);
-    this.scrollToBottom(true);
-  },
-
-
-  _confirmOptimisticMessage(pendingId) {
-    const el = document.getElementById(pendingId);
-    if (!el) return;
-    el.classList.remove('message-sending');
-    const ts = el.querySelector('.message-timestamp');
-    if (ts) {
-      ts.style.opacity = '1';
-      ts.textContent = new Date().toLocaleString();
-    }
-  },
-
-
-  _failOptimisticMessage(pendingId, content, errorMsg) {
-    const el = document.getElementById(pendingId);
-    if (!el) return;
-    el.classList.remove('message-sending');
-    el.classList.add('message-send-failed');
-    const ts = el.querySelector('.message-timestamp');
-    if (ts) {
-      ts.style.opacity = '1';
-      ts.innerHTML = `<span style="color:var(--color-error)">Failed: ${this.escapeHtml(errorMsg)}</span>`;
-    }
-    if (this.ui.messageInput) {
-      this.ui.messageInput.value = content;
-    }
-  },
-
-
-  _subscribeToConversationUpdates() {
-    if (!this.state.conversations || this.state.conversations.length === 0) return;
-    for (const conv of this.state.conversations) {
-      this.wsManager.subscribeToConversation(conv.id);
-    }
-  },
-
-
-  _flushBgCache(conversationId, sessionId) {
-    const entry = this._bgCache.get(conversationId);
-    if (!entry || entry.items.length === 0) return;
-    if (entry.sessionId !== sessionId) { this._bgCache.delete(conversationId); return; }
-
-    const streamingEl = document.getElementById(`streaming-${sessionId}`);
-    if (!streamingEl) return;
-    const blocksEl = streamingEl.querySelector('.streaming-blocks');
-    if (!blocksEl) return;
-
-    const seenSeqs = this._renderedSeqs[sessionId] || (this._renderedSeqs[sessionId] = new Set());
-    for (const item of entry.items) {
-      if (item.seq !== undefined && seenSeqs.has(item.seq)) continue;
-      try {
-        const block = (typeof msgpackr !== 'undefined' && item.packed instanceof Uint8Array)
-          ? msgpackr.unpack(item.packed) : item.packed;
-        const el = this.renderer.renderBlock(block, { sessionId }, blocksEl);
-        if (el) {
-          if (item.seq !== undefined) seenSeqs.add(item.seq);
-          blocksEl.appendChild(el);
-        }
-      } catch (_) {}
-    }
-    this._bgCache.delete(conversationId);
-    this.scrollToBottom();
-  }
-
-});

package/static/js/client-helpers.js

@@ -1,199 +0,0 @@
-Object.assign(AgentGUIClient.prototype, {
-  async _recoverMissedChunks() {
-    if (!this.state.currentSession?.id) return;
-
-    const sessionId = this.state.currentSession.id;
-    const lastSeq = this.wsManager.getLastSeq(sessionId);
-
-    try {
-      const { chunks: rawChunks } = await window.wsClient.rpc('sess.chunks', { id: sessionId, sinceSeq: lastSeq });
-      if (!rawChunks || rawChunks.length === 0) return;
-
-      const chunks = rawChunks.map(c => ({
-        ...c,
-        block: typeof c.data === 'string' ? JSON.parse(c.data) : c.data
-      })).filter(c => c.block && c.block.type);
-
-      const seenSeqs = (this._renderedSeqs || {})[sessionId];
-      const dedupedChunks = chunks.filter(c => !seenSeqs || !seenSeqs.has(c.sequence));
-
-      if (dedupedChunks.length > 0) {
-        for (const chunk of dedupedChunks) {
-          try { this.renderChunk(chunk); } catch (chunkErr) { console.warn('Skipping bad chunk:', chunkErr.message); }
-        }
-      }
-    } catch (e) {
-      console.warn('Chunk recovery failed:', e.message);
-    }
-  },
-
-
-  _dedupedFetch(key, fetchFn) {
-    if (this._inflightRequests.has(key)) {
-      return this._inflightRequests.get(key);
-    }
-    const promise = fetchFn().finally(() => {
-      this._inflightRequests.delete(key);
-    });
-    this._inflightRequests.set(key, promise);
-    return promise;
-  },
-
-
-  _insertPlaceholder(sessionId) {
-    this._removePlaceholder();
-    const streamingEl = document.getElementById(`streaming-${sessionId}`);
-    if (!streamingEl) return;
-    const blocksEl = streamingEl.querySelector('.streaming-blocks');
-    if (!blocksEl) return;
-    const ph = document.createElement('div');
-    ph.className = 'chunk-placeholder';
-    ph.id = 'chunk-placeholder-active';
-    blocksEl.appendChild(ph);
-    this._placeholderAutoRemove = setTimeout(() => this._removePlaceholder(), 500);
-  },
-
-
-  _removePlaceholder() {
-    if (this._placeholderAutoRemove) { clearTimeout(this._placeholderAutoRemove); this._placeholderAutoRemove = null; }
-    const ph = document.getElementById('chunk-placeholder-active');
-    if (ph && ph.parentNode) ph.remove();
-  },
-
-
-  _trackBlockHeight(block, element) {
-    if (!element || !block?.type) return;
-    const h = element.offsetHeight;
-    if (h <= 0) return;
-    if (!this._blockHeightAvg) this._blockHeightAvg = {};
-    const t = block.type;
-    if (!this._blockHeightAvg[t]) this._blockHeightAvg[t] = { sum: 0, count: 0 };
-    this._blockHeightAvg[t].sum += h;
-    this._blockHeightAvg[t].count++;
-  },
-
-
-  _estimatedBlockHeight(type) {
-    const defaults = { text: 40, tool_use: 60, tool_result: 40 };
-    if (this._blockHeightAvg?.[type]?.count >= 3) {
-      return this._blockHeightAvg[type].sum / this._blockHeightAvg[type].count;
-    }
-    return defaults[type] || 40;
-  },
-
-
-  _startThinkingCountdown() {
-    this._clearThinkingCountdown();
-    if (!this._lastSendTime) return;
-    const predicted = this.wsManager?.latency?.predicted || 0;
-    const estimatedWait = predicted + this._serverProcessingEstimate;
-    if (estimatedWait < 1000) return;
-    let remaining = Math.ceil(estimatedWait / 1000);
-    const update = () => {
-      const indicator = document.querySelector('.streaming-indicator');
-      if (!indicator) return;
-      if (remaining > 0) {
-        indicator.textContent = `Thinking... (~${remaining}s)`;
-        remaining--;
-        this._countdownTimer = setTimeout(update, 1000);
-      } else {
-        indicator.textContent = 'Thinking... (taking longer than expected)';
-      }
-    };
-    this._countdownTimer = setTimeout(update, 100);
-  },
-
-
-  _clearThinkingCountdown() {
-    if (this._countdownTimer) { clearTimeout(this._countdownTimer); this._countdownTimer = null; }
-  },
-
-
-  _setupDebugHooks() {
-    if (typeof window === 'undefined') return;
-    const self = this;
-    const snap = (actor) => (actor && actor.getSnapshot) ? actor.getSnapshot().value : 'uninitialized';
-    const mapSnap = (m) => m ? Object.fromEntries([...m].map(([k, a]) => [k, snap(a)])) : {};
-    const registry = {
-      getState: () => ({
-        latencyEma: self.wsManager?._latencyEma || null,
-        serverProcessingEstimate: self._serverProcessingEstimate,
-        latencyTrend: self.wsManager?.latency?.trend || null
-      }),
-      getSyncState: () => ({
-        currentConversation: self.state.currentConversation,
-        isStreaming: self._convIsStreaming(self.state.currentConversation?.id),
-        streamingConversations: Array.from(self.state.streamingConversations),
-        convMachineStates: mapSnap(window.__convMachines),
-        toolInstallMachineStates: mapSnap(window.__toolInstallMachines),
-        voiceMachineState: snap(window.__voiceMachine),
-        convListMachineState: snap(window.__convListMachine),
-        promptMachineState: snap(window.__promptMachine),
-        wsConnectionState: snap(self.wsManager?._wsActor),
-        rendererEventQueueLength: self.renderer?.eventQueue?.length || 0,
-        rendererEventHistoryLength: self.renderer?.eventHistory?.length || 0,
-      }),
-      getMessageState: () => {
-        const output = document.querySelector('.conversation-messages');
-        if (!output) return { error: 'No conversation output found' };
-        return {
-          messageCount: output.querySelectorAll('.message').length,
-          queueItems: output.querySelectorAll('.queue-item').length,
-          pendingMessages: output.querySelectorAll('.message-sending').length,
-        };
-      }
-    };
-    const subkeys = {
-      machines: () => ({
-        conv: mapSnap(window.__convMachines),
-        toolInstall: mapSnap(window.__toolInstallMachines),
-        voice: snap(window.__voiceMachine),
-        convList: snap(window.__convListMachine),
-        prompt: snap(window.__promptMachine),
-        recording: snap(window.__recordingMachine),
-        terminal: snap(window.__terminalMachine),
-        ws: snap(self.wsManager?._wsActor),
-      }),
-      ws: () => ({
-        state: snap(self.wsManager?._wsActor),
-        latencyEma: self.wsManager?._latencyEma || null,
-        latencyTrend: self.wsManager?.latency?.trend || null,
-        url: window.__WS || null,
-      }),
-      auth: () => ({
-        state: window.__agentAuthState || null,
-        oauth: window.__agentAuthOAuth || null,
-      }),
-      perf: () => window.__convPerfMetrics || null,
-      config: () => ({ base: window.__BASE || null, server: window.__SERVER || null }),
-      renderer: () => ({
-        eventQueueLength: self.renderer?.eventQueue?.length || 0,
-        eventHistoryLength: self.renderer?.eventHistory?.length || 0,
-      }),
-      conv: () => ({
-        current: self.state.currentConversation,
-        streaming: Array.from(self.state.streamingConversations),
-      }),
-    };
-    for (const [k, fn] of Object.entries(subkeys)) Object.defineProperty(registry, k, { get: fn, enumerable: true });
-    window.__debug = registry;
-  },
-
-
-  showLoadingSpinner() {
-    document.documentElement.style.pointerEvents = 'auto';
-    const indicator = document.querySelector('[data-model-dl-indicator]');
-    if (indicator && !indicator.classList.contains('visible')) {
-      indicator.classList.add('visible');
-    }
-  },
-
-
-  hideLoadingSpinner() {
-    const indicator = document.querySelector('[data-model-dl-indicator]');
-    if (indicator && indicator.classList.contains('visible')) {
-      indicator.classList.remove('visible');
-    }
-  }
-
-});

package/static/js/client-load.js

@@ -1,175 +0,0 @@
-Object.assign(AgentGUIClient.prototype, {
-  _makeLoadRequest(conversationId) {
-    const requestId = ++this._currentRequestId;
-    const abortController = new AbortController();
-
-    if (this._loadInProgress[conversationId]) {
-      const prevReq = this._loadInProgress[conversationId];
-      try {
-        prevReq.abortController.abort();
-      } catch (e) {}
-    }
-
-    this._loadInProgress[conversationId] = {
-      requestId,
-      abortController,
-      timestamp: Date.now(),
-      prevConversationId: this.state.currentConversation?.id
-    };
-
-    return { requestId, abortController: abortController.signal };
-  },
-
-
-  _verifyRequestId(conversationId, requestId) {
-    const current = this._loadInProgress[conversationId];
-    if (!current) return false;
-    if (current.requestId !== requestId) return false;
-    return true;
-  },
-
-
-  _completeLoadRequest(conversationId, requestId) {
-    const req = this._loadInProgress[conversationId];
-    if (req && req.requestId === requestId) {
-      delete this._loadInProgress[conversationId];
-    }
-  },
-
-
-  async _loadConvRender(conversationId, convSignal, prevConversationId, availableFallback, fullData) {
-      const { conversation, isActivelyStreaming, latestSession, chunks: rawChunks, totalChunks, messages: allMessages } = fullData;
-
-      window.ConversationState?.selectConversation(conversationId, 'server_load', 1);
-      this.state.currentConversation = conversation;
-      window.dispatchEvent(new CustomEvent('conversation-changed', { detail: { conversationId, conversation } }));
-      const hasActivity = (allMessages && allMessages.length > 0) || isActivelyStreaming || latestSession || this._convIsStreaming(conversationId);
-      this.applyAgentAndModelSelection(conversation, hasActivity);
-
-      const queuePromise = window.wsClient.rpc('q.ls', { id: conversationId }).catch(() => ({ queue: [] }));
-      const chunks = (rawChunks || []).map(chunk => ({
-        ...chunk,
-        block: typeof chunk.data === 'string' ? JSON.parse(chunk.data) : chunk.data
-      }));
-
-      const { queue: queueResult } = await queuePromise;
-      const queuedMessageIds = new Set((queueResult || []).map(q => q.messageId));
-      const userMessages = (allMessages || []).filter(m => m.role === 'user' && !queuedMessageIds.has(m.id));
-      const hasMoreChunks = totalChunks && chunks.length < totalChunks;
-
-      const clientKnowsStreaming = this._convIsStreaming(conversationId);
-      const shouldResumeStreaming = latestSession &&
-        (latestSession.status === 'active' || latestSession.status === 'pending');
-
-      if (shouldResumeStreaming) {
-        this._setConvStreaming(conversationId, true, latestSession?.id, null);
-        window.dispatchEvent(new CustomEvent('ws-message', { detail: { type: 'streaming_start', conversationId, sessionId: latestSession?.id } }));
-      } else {
-        this._setConvStreaming(conversationId, false);
-        window.dispatchEvent(new CustomEvent('ws-message', { detail: { type: 'streaming_complete', conversationId } }));
-      }
-
-      if (this.ui.messageInput) {
-        this.ui.messageInput.disabled = false;
-      }
-
-      const outputEl = document.getElementById('output');
-      if (outputEl) {
-        const wdInfo = conversation.workingDirectory ? `${this.escapeHtml(conversation.workingDirectory)}` : '';
-        const timestamp = new Date(conversation.created_at).toLocaleDateString();
-        const metaParts = [timestamp];
-        if (wdInfo) metaParts.push(wdInfo);
-        outputEl.innerHTML = `
-          <div class="conversation-header">
-            <h2>${this.escapeHtml(conversation.title || 'Conversation')}</h2>
-            <p class="text-secondary">${metaParts.join(' - ')}</p>
-          </div>
-          <div class="conversation-messages"></div>
-        `;
-
-        const messagesEl = outputEl.querySelector('.conversation-messages');
-
-        if (hasMoreChunks) {
-          const loadMoreBtn = document.createElement('button');
-          loadMoreBtn.className = 'btn btn-secondary';
-          loadMoreBtn.style.cssText = 'width:100%;margin-bottom:1rem;padding:0.5rem;font-size:0.8rem;';
-          loadMoreBtn.textContent = `Load earlier messages (${totalChunks - chunks.length} more chunks)`;
-          loadMoreBtn.addEventListener('click', async () => {
-            loadMoreBtn.disabled = true;
-            loadMoreBtn.textContent = 'Loading...';
-            try {
-              try {
-                await window.wsClient.rpc('conv.full', { id: conversationId, allChunks: true });
-              } catch (wsErr) {}
-              this.invalidateCache(conversationId);
-              await this.loadConversationMessages(conversationId);
-            } catch (e) {
-              loadMoreBtn.textContent = 'Failed to load. Try again.';
-              loadMoreBtn.disabled = false;
-            }
-          });
-          messagesEl.appendChild(loadMoreBtn);
-        }
-
-        if (chunks.length > 0) {
-          const activeSessionId = (shouldResumeStreaming && latestSession) ? latestSession.id : null;
-          performance.mark(`conv-render-start:${conversationId}`);
-          await new Promise(r => requestAnimationFrame(r));
-          if (!convSignal.aborted) this._renderConversationContent(messagesEl, chunks, userMessages, activeSessionId);
-          performance.mark(`conv-render-complete:${conversationId}`);
-          performance.measure(`conv-render:${conversationId}`, `conv-render-start:${conversationId}`, `conv-render-complete:${conversationId}`);
-          performance.measure(`conv-data-fetch:${conversationId}`, `conv-load-start:${conversationId}`, `conv-data-received:${conversationId}`);
-        } else {
-          if (!convSignal.aborted) messagesEl.appendChild(this.renderMessagesFragment(allMessages || []));
-        }
-
-        if (!convSignal.aborted && shouldResumeStreaming && latestSession && chunks.length === 0) {
-          const streamDiv = document.createElement('div');
-          streamDiv.id = `streaming-${latestSession.id}`;
-          streamDiv.className = 'streaming-message';
-          const indicatorDiv = document.createElement('div');
-          indicatorDiv.className = 'streaming-indicator';
-          indicatorDiv.style = 'display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;';
-          indicatorDiv.innerHTML = `
-            <span class="animate-spin" style="display:inline-block;width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;"></span>
-            <span class="streaming-indicator-label">Agent is starting...</span>
-          `;
-          streamDiv.appendChild(indicatorDiv);
-          messagesEl.appendChild(streamDiv);
-        }
-
-        if (shouldResumeStreaming && latestSession) {
-          this._setConvStreaming(conversationId, true, latestSession.id, null);
-          this.state.currentSession = {
-            id: latestSession.id,
-            conversationId: conversationId,
-            agentId: conversation.agentType || null,
-            startTime: latestSession.created_at
-          };
-
-          if (this.wsManager.isConnected) {
-            this.wsManager.subscribeToSession(latestSession.id);
-            this.wsManager.sendMessage({ type: 'subscribe', conversationId });
-          }
-
-          this.updateUrlForConversation(conversationId, latestSession.id);
-
-          this._flushBgCache(conversationId, latestSession.id);
-
-          this.syncPromptState(conversationId);
-        } else {
-          this.syncPromptState(conversationId);
-        }
-
-        if (this.ui.sendButton) {
-          this.ui.sendButton.disabled = false;
-        }
-
-        this.restoreScrollPosition(conversationId);
-        this.setupScrollUpDetection(conversationId);
-
-        this.fetchAndRenderQueue(conversationId);
-
-      }
-  }
-});

package/static/js/client-render.js

@@ -1,132 +0,0 @@
-Object.assign(AgentGUIClient.prototype, {
-  renderCodeBlock(language, code) {
-    if (language.toLowerCase() === 'html') {
-      return `
-        <div class="message-code">
-          <div class="html-rendered-label">
-            Rendered HTML
-          </div>
-          <div class="html-content">
-            ${this.sanitizeHtml(code)}
-          </div>
-        </div>
-      `;
-    } else {
-      const lineCount = code.split('\n').length;
-      return `<div class="message-code"><details class="collapsible-code"><summary class="collapsible-code-summary">${this.escapeHtml(language)} - ${lineCount} line${lineCount !== 1 ? 's' : ''}</summary><pre style="margin:0;border-radius:0 0 0.375rem 0.375rem">${this.escapeHtml(code)}</pre></details></div>`;
-    }
-  },
-
-
-  renderMessageContent(content) {
-    if (typeof content === 'string') {
-      if (this.isHtmlContent(content)) {
-        return `<div class="message-text"><div class="html-content">${this.sanitizeHtml(content)}</div></div>`;
-      }
-      return `<div class="message-text">${this.escapeHtml(content)}</div>`;
-    } else if (content && typeof content === 'object' && content.type === 'claude_execution') {
-      let html = '<div class="message-blocks">';
-      if (content.blocks && Array.isArray(content.blocks)) {
-        let pendingToolUseClose = false;
-        let pendingHasInput = false;
-        content.blocks.forEach((block, blockIdx, blocks) => {
-          if (block.type !== 'tool_result' && pendingToolUseClose) {
-            if (pendingHasInput) html += '</div>';
-            html += '</details>';
-            pendingToolUseClose = false;
-            pendingHasInput = false;
-          }
-          if (block.type === 'text') {
-            const parts = this.parseMarkdownCodeBlocks(block.text);
-            parts.forEach(part => {
-              if (part.type === 'html') {
-                html += `<div class="message-text"><div class="html-content">${this.sanitizeHtml(part.content)}</div></div>`;
-              } else if (part.type === 'text') {
-                html += `<div class="message-text">${this.escapeHtml(part.content)}</div>`;
-              } else if (part.type === 'code') {
-                html += this.renderCodeBlock(part.language, part.code);
-              }
-            });
-          } else if (block.type === 'code_block') {
-            if (block.language === 'html') {
-              html += `
-                <div class="message-code">
-                  <div class="html-rendered-label">
-                    Rendered HTML
-                  </div>
-                  <div class="html-content">
-                    ${this.sanitizeHtml(block.code)}
-                  </div>
-                </div>
-              `;
-            } else {
-              const blkLineCount = block.code.split('\n').length;
-              html += `<div class="message-code"><details class="collapsible-code"><summary class="collapsible-code-summary">${this.escapeHtml(block.language || 'code')} - ${blkLineCount} line${blkLineCount !== 1 ? 's' : ''}</summary><pre style="margin:0;border-radius:0 0 0.375rem 0.375rem">${this.escapeHtml(block.code)}</pre></details></div>`;
-            }
-          } else if (block.type === 'tool_use') {
-            let inputContentHtml = '';
-            const hasInput = block.input && Object.keys(block.input).length > 0;
-            if (hasInput) {
-              const inputStr = JSON.stringify(block.input, null, 2);
-              inputContentHtml = `<pre class="tool-input-pre">${this.escapeHtml(inputStr)}</pre>`;
-            }
-            const tn = block.name || 'unknown';
-            const hasRenderer = typeof StreamingRenderer !== 'undefined';
-            const dName = hasRenderer ? StreamingRenderer.getToolDisplayName(tn) : tn;
-            const tTitle = hasRenderer && block.input ? StreamingRenderer.getToolTitle(tn, block.input) : '';
-            const iconHtml = hasRenderer && this.renderer ? `<span class="folded-tool-icon">${this.renderer.getToolIcon(tn)}</span>` : '';
-            const typeClass = hasRenderer && this.renderer ? this.renderer._getBlockTypeClass('tool_use') : 'block-type-tool_use';
-            const toolColorClass = hasRenderer && this.renderer ? this.renderer._getToolColorClass(tn) : 'tool-color-default';
-            const nextBlock = blocks[blockIdx + 1];
-            const resultClass = nextBlock?.type === 'tool_result' ? (nextBlock.is_error ? 'has-error tool-result-error' : 'has-success tool-result-success') : '';
-            const resultStatusIcon = nextBlock?.type === 'tool_result'
-              ? `<span class="folded-tool-status">${nextBlock.is_error
-                ? '<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>'
-              }</span>` : '';
-            if (hasInput) {
-              html += `<details class="block-tool-use folded-tool ${typeClass} ${toolColorClass} ${resultClass}"><summary class="folded-tool-bar">${iconHtml}<span class="folded-tool-name">${this.escapeHtml(dName)}</span>${tTitle ? `<span class="folded-tool-desc">${this.escapeHtml(tTitle)}</span>` : ''}${resultStatusIcon}</summary><div class="folded-tool-body">${inputContentHtml}`;
-              pendingHasInput = true;
-            } else {
-              html += `<details class="block-tool-use folded-tool ${typeClass} ${toolColorClass} ${resultClass}"><summary class="folded-tool-bar">${iconHtml}<span class="folded-tool-name">${this.escapeHtml(dName)}</span>${tTitle ? `<span class="folded-tool-desc">${this.escapeHtml(tTitle)}</span>` : ''}${resultStatusIcon}</summary>`;
-              pendingHasInput = false;
-            }
-            pendingToolUseClose = true;
-          } else if (block.type === 'tool_result') {
-            const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
-            const smartHtml = typeof StreamingRenderer !== 'undefined' ? StreamingRenderer.renderSmartContentHTML(content, this.escapeHtml.bind(this), true) : `<pre class="tool-result-pre">${this.escapeHtml(content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content)}</pre>`;
-            const resultContentHtml = `<div class="folded-tool-result-content">${smartHtml}</div>`;
-            if (pendingToolUseClose) {
-              if (pendingHasInput) {
-                html += resultContentHtml + '</div></details>';
-              } else {
-                html += `<div class="folded-tool-body">${resultContentHtml}</div></details>`;
-              }
-              pendingToolUseClose = false;
-            } else {
-              html += resultContentHtml;
-            }
-          }
-        });
-        if (pendingToolUseClose) {
-          if (pendingHasInput) html += '</div>';
-          html += '</details>';
-        }
-      }
-      html += '</div>';
-      return html;
-    } else {
-      if (typeof content === 'object' && content !== null) {
-        const fieldsHtml = Object.entries(content)
-          .map(([key, value]) => {
-            let displayValue = typeof value === 'string' ? value : JSON.stringify(value);
-            if (displayValue.length > 150) displayValue = displayValue.substring(0, 150) + '...';
-            return `<div style="font-size:0.8rem;margin-bottom:0.375rem"><span style="font-weight:600">${this.escapeHtml(key)}:</span> <code style="background:var(--color-bg-secondary);padding:0.125rem 0.25rem;border-radius:0.25rem">${this.escapeHtml(displayValue)}</code></div>`;
-          }).join('');
-        return `<div class="message-text" style="background:var(--color-bg-secondary);padding:0.75rem;border-radius:0.375rem">${fieldsHtml}</div>`;
-      }
-      return `<div class="message-text">${this.escapeHtml(String(content))}</div>`;
-    }
-  }
-
-});