agentgui 1.0.828 → 1.0.830

package/static/js/client-render.js

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

package/static/js/client-scroll.js

@@ -0,0 +1,178 @@
+Object.assign(AgentGUIClient.prototype, {
+  syncPromptState(conversationId) {
+    const conversation = this.state.currentConversation;
+    if (!conversation || conversation.id !== conversationId) return;
+
+    if (this.ui.messageInput) {
+      this.ui.messageInput.disabled = false;
+    }
+
+    this.updateBusyPromptArea(conversationId);
+  }
+
+
+  updateBusyPromptArea(conversationId) {
+    if (this.state.currentConversation?.id !== conversationId) return;
+    const isStreaming = this._convIsStreaming(conversationId);
+    const isConnected = this.wsManager?.isConnected;
+
+    const injectBtn = document.getElementById('injectBtn');
+    const queueBtn = document.getElementById('queueBtn');
+    const stopBtn = document.getElementById('stopBtn');
+
+    [injectBtn, queueBtn, stopBtn].forEach(btn => {
+      if (!btn) return;
+      btn.classList.toggle('visible', isStreaming);
+      btn.disabled = !isConnected;
+    });
+
+    if (this.ui.sendButton) this.ui.sendButton.style.display = isStreaming ? 'none' : '';
+  }
+
+
+  removeScrollUpDetection() {
+    const scrollContainer = document.getElementById(this.config.scrollContainerId);
+    if (scrollContainer && this._scrollUpHandler) {
+      scrollContainer.removeEventListener('scroll', this._scrollUpHandler);
+      this._scrollUpHandler = null;
+    }
+  }
+
+
+  setupScrollUpDetection(conversationId) {
+    const scrollContainer = document.getElementById(this.config.scrollContainerId);
+    if (!scrollContainer) return;
+
+    if (!this._scrollDetectionState) this._scrollDetectionState = {};
+
+    const detectionState = {
+      isLoading: false,
+      oldestTimestamp: Date.now(),
+      oldestMessageId: null,
+      conversation: conversationId
+    };
+
+    const handleScroll = async () => {
+      const scrollTop = scrollContainer.scrollTop;
+      const scrollHeight = scrollContainer.scrollHeight;
+      const clientHeight = scrollContainer.clientHeight;
+      const THRESHOLD = 300;
+
+      if (scrollTop < THRESHOLD && !detectionState.isLoading && scrollHeight > clientHeight) {
+        detectionState.isLoading = true;
+
+        try {
+          const messagesEl = document.querySelector('.conversation-messages');
+          if (!messagesEl) {
+            detectionState.isLoading = false;
+            return;
+          }
+
+          const firstMessageEl = messagesEl.querySelector('.message[data-msg-id]');
+          if (!firstMessageEl) {
+            const firstChunkEl = messagesEl.querySelector('[data-chunk-created]');
+            if (firstChunkEl) {
+              detectionState.oldestTimestamp = parseInt(firstChunkEl.getAttribute('data-chunk-created')) || 0;
+            }
+          } else {
+            detectionState.oldestMessageId = firstMessageEl.getAttribute('data-msg-id');
+          }
+
+          let result;
+          if (detectionState.oldestMessageId) {
+            try {
+              result = await window.wsClient.rpc('msg.ls.earlier', {
+                id: conversationId,
+                before: detectionState.oldestMessageId,
+                limit: 50
+              });
+            } catch (e) {
+              const base = window.__BASE_URL || '';
+              const r = await fetch(`${base}/api/conversations/${conversationId}/messages?limit=50`);
+              const d = await r.json();
+              result = { messages: d.messages || [] };
+            }
+          } else if (detectionState.oldestTimestamp > 0) {
+            try {
+              result = await window.wsClient.rpc('conv.chunks.earlier', {
+                id: conversationId,
+                before: detectionState.oldestTimestamp,
+                limit: 500
+              });
+            } catch (e) {
+              const base = window.__BASE_URL || '';
+              const r = await fetch(`${base}/api/conversations/${conversationId}/chunks`);
+              const d = await r.json();
+              result = { chunks: d.chunks || [] };
+            }
+          }
+
+          if (result && ((result.messages && result.messages.length > 0) || (result.chunks && result.chunks.length > 0))) {
+            const scrollHeightBefore = scrollContainer.scrollHeight;
+            const scrollTopBefore = scrollContainer.scrollTop;
+            const newContent = document.createDocumentFragment();
+
+            if (result.messages && result.messages.length > 0) {
+              result.messages.forEach(msg => {
+                const div = document.createElement('div');
+                div.className = `message message-${msg.role}`;
+                div.setAttribute('data-msg-id', msg.id);
+                div.innerHTML = `<div class="message-role">${msg.role.charAt(0).toUpperCase() + msg.role.slice(1)}</div>${this.renderMessageContent(msg.content)}<div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>`;
+                newContent.appendChild(div);
+              });
+            }
+
+            if (result.chunks && result.chunks.length > 0) {
+              result.chunks.forEach(chunk => {
+                const blockEl = this.renderer.renderBlock(chunk.data, {}, false);
+                if (blockEl) {
+                  const wrapper = document.createElement('div');
+                  wrapper.setAttribute('data-chunk-created', chunk.created_at);
+                  wrapper.appendChild(blockEl);
+                  newContent.appendChild(wrapper);
+                }
+              });
+            }
+
+            if (messagesEl.firstChild) {
+              messagesEl.insertBefore(newContent, messagesEl.firstChild);
+            } else {
+              messagesEl.appendChild(newContent);
+            }
+
+            const scrollHeightAfter = scrollContainer.scrollHeight;
+            scrollContainer.scrollTop = scrollTopBefore + (scrollHeightAfter - scrollHeightBefore);
+          }
+        } catch (error) {
+          console.error('Failed to load earlier messages:', error);
+        } finally {
+          detectionState.isLoading = false;
+        }
+      }
+    };
+
+    scrollContainer.removeEventListener('scroll', this._scrollUpHandler);
+    this._scrollUpHandler = handleScroll;
+    scrollContainer.addEventListener('scroll', this._scrollUpHandler, { passive: true });
+  }
+
+
+  renderMessagesFragment(messages) {
+    const frag = document.createDocumentFragment();
+    if (messages.length === 0) {
+      const p = document.createElement('p');
+      p.className = 'text-secondary';
+      p.textContent = 'No messages in this conversation yet';
+      frag.appendChild(p);
+      return frag;
+    }
+    for (const msg of messages) {
+      const div = document.createElement('div');
+      div.className = `message message-${msg.role}`;
+      div.innerHTML = `<div class="message-role">${msg.role.charAt(0).toUpperCase() + msg.role.slice(1)}</div>${this.renderMessageContent(msg.content)}<div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>`;
+      frag.appendChild(div);
+    }
+    return frag;
+  }
+
+});

package/static/js/client-status.js

@@ -0,0 +1,167 @@
+Object.assign(AgentGUIClient.prototype, {
+  _updateConnectionIndicator(quality) {
+    if (this._indicatorDebounce && !this._modelDownloadInProgress) return;
+    this._indicatorDebounce = true;
+    setTimeout(() => { this._indicatorDebounce = false; }, 1000);
+
+    let indicator = document.getElementById('connection-indicator');
+    if (!indicator) {
+      indicator = document.createElement('div');
+      indicator.id = 'connection-indicator';
+      indicator.className = 'connection-indicator';
+      indicator.innerHTML = '<span class="connection-dot"></span><span class="connection-label"></span>';
+      indicator.addEventListener('click', () => this._toggleConnectionTooltip());
+      const header = document.querySelector('.header-right') || document.querySelector('.app-header');
+      if (header) {
+        header.style.position = 'relative';
+        header.appendChild(indicator);
+      }
+    }
+
+    const dot = indicator.querySelector('.connection-dot');
+    const label = indicator.querySelector('.connection-label');
+    if (!dot || !label) return;
+
+    if (this._modelDownloadInProgress) {
+      dot.className = 'connection-dot downloading';
+      const progress = this._modelDownloadProgress;
+      if (progress && progress.totalBytes > 0) {
+        const pct = Math.round((progress.totalDownloaded / progress.totalBytes) * 100);
+        label.textContent = `Models ${pct}%`;
+      } else if (progress && progress.downloading) {
+        label.textContent = 'Downloading...';
+      } else {
+        label.textContent = 'Loading models...';
+      }
+      return;
+    }
+
+    dot.className = 'connection-dot';
+    if (quality === 'disconnected' || quality === 'reconnecting') {
+      dot.classList.add(quality);
+      label.textContent = quality === 'reconnecting' ? 'Reconnecting...' : 'Disconnected';
+    } else {
+      dot.classList.add(quality);
+      const latency = this.wsManager?.latency;
+      label.textContent = latency?.avg > 0 ? Math.round(latency.avg) + 'ms' : '';
+    }
+  },
+
+
+  _handleModelDownloadProgress(progress) {
+    this._modelDownloadProgress = progress;
+    if (progress.status === 'failed' || progress.error) {
+      this._modelDownloadInProgress = false;
+      console.error('[Models] Download error:', progress.error || progress.status);
+      this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
+      return;
+    }
+    if (progress.done || progress.status === 'completed') {
+      this._modelDownloadInProgress = false;
+      this._dbg('[Models] Download complete');
+      this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
+      return;
+    }
+    if (progress.started || progress.downloading || progress.status === 'downloading' || progress.status === 'connecting') {
+      this._modelDownloadInProgress = true;
+      this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
+    }
+  },
+
+
+  _handleTTSSetupProgress(data) {
+    if (data.step && data.status) {
+      this._dbg('[TTS Setup]', data.step, ':', data.status, data.message || '');
+    }
+  },
+
+
+  _toggleConnectionTooltip() {
+    let tooltip = document.getElementById('connection-tooltip');
+    if (tooltip) { tooltip.remove(); return; }
+
+    const indicator = document.getElementById('connection-indicator');
+    if (!indicator) return;
+
+    tooltip = document.createElement('div');
+    tooltip.id = 'connection-tooltip';
+    tooltip.className = 'connection-tooltip';
+
+    const latency = this.wsManager?.latency || {};
+    const stats = this.wsManager?.stats || {};
+    const state = this.wsManager?.connectionState || 'unknown';
+
+    tooltip.innerHTML = [
+      `<div>State: ${state}</div>`,
+      `<div>Latency: ${Math.round(latency.avg || 0)}ms</div>`,
+      `<div>Predicted: ${Math.round(latency.predicted || 0)}ms (Kalman)</div>`,
+      `<div>Trend: ${latency.trend || 'unknown'}</div>`,
+      `<div>Jitter: ${Math.round(latency.jitter || 0)}ms</div>`,
+      `<div>Quality: ${latency.quality || 'unknown'}</div>`,
+      `<div>Reconnects: ${stats.totalReconnects || 0}</div>`,
+      `<div>Uptime: ${stats.lastConnectedTime ? Math.round((Date.now() - stats.lastConnectedTime) / 1000) + 's' : 'N/A'}</div>`
+    ].join('');
+
+    indicator.appendChild(tooltip);
+    setTimeout(() => { if (tooltip.parentNode) tooltip.remove(); }, 5000);
+  },
+
+
+  updateMetrics(metrics) {
+    const metricsDisplay = document.querySelector('[data-metrics]');
+    if (metricsDisplay && metrics) {
+      metricsDisplay.textContent = `Batches: ${metrics.totalBatches} | Events: ${metrics.totalEvents} | Avg render: ${metrics.avgRenderTime.toFixed(2)}ms`;
+    }
+  },
+
+
+  disableControls() {
+    if (this.ui.sendButton) this.ui.sendButton.disabled = true;
+    if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'DISABLED' });
+  },
+
+
+  enableControls() {
+    if (this.ui.sendButton) {
+      this.ui.sendButton.disabled = !this.wsManager?.isConnected;
+    }
+    if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'READY' });
+    this.updateBusyPromptArea(this.state.currentConversation?.id);
+  },
+
+
+  toggleTheme() {
+    const isDark = document.documentElement.classList.toggle('dark');
+    localStorage.setItem('theme', isDark ? 'dark' : 'light');
+  },
+
+
+  async createNewConversation(workingDirectory, title) {
+    try {
+      const agentId = this.getEffectiveAgentId();
+      const model = this.ui.modelSelector?.value || null;
+      const convTitle = title || 'New Conversation';
+      const body = { agentId, title: convTitle };
+      if (workingDirectory) body.workingDirectory = workingDirectory;
+      if (model) body.model = model;
+
+      const { conversation } = await window.wsClient.rpc('conv.new', body);
+
+      await this.loadConversations();
+
+      if (window.conversationManager) {
+        await window.conversationManager.loadConversations();
+        window.conversationManager.select(conversation.id);
+      }
+
+      if (this.ui.messageInput) {
+        this.ui.messageInput.value = '';
+        this.ui.messageInput.focus();
+      }
+    } catch (error) {
+      console.error('Failed to create new conversation:', error);
+      this.showError(`Failed to create conversation: ${error.message}`);
+    }
+  }
+
+});

package/static/js/client-streaming.js

@@ -0,0 +1,117 @@
+Object.assign(AgentGUIClient.prototype, {
+  async handleStreamingStart(data) {
+    this._dbg('Streaming started:', data);
+    if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'STREAMING', conversationId: data.conversationId });
+    this._clearThinkingCountdown();
+    if (this._lastSendTime > 0) {
+      const actual = Date.now() - this._lastSendTime;
+      const predicted = this.wsManager?.latency?.predicted || 0;
+      const serverTime = Math.max(500, actual - predicted);
+      this._serverProcessingEstimate = 0.7 * this._serverProcessingEstimate + 0.3 * serverTime;
+    }
+
+    if (this.wsManager.isConnected) {
+      this.wsManager.subscribeToSession(data.sessionId);
+      if (!data.resumed) {
+        this.wsManager.sendMessage({ type: 'subscribe', conversationId: data.conversationId });
+      }
+    }
+
+    if (this.state.currentConversation?.id !== data.conversationId) {
+      this._dbg('Streaming started for non-active conversation:', data.conversationId);
+      this._setConvStreaming(data.conversationId, true, data.sessionId, data.agentId);
+      this._dbg('[SYNC] streaming_start - non-active conv:', { convId: data.conversationId, sessionId: data.sessionId, streamingCount: this.state.streamingConversations.size });
+      this.updateBusyPromptArea(data.conversationId);
+      this.emit('streaming:start', data);
+
+      if (!this.state.currentConversation && !this._isLoadingConversation) {
+        this._isLoadingConversation = true;
+        this.loadConversationMessages(data.conversationId).finally(() => {
+          this._isLoadingConversation = false;
+        });
+      }
+      return;
+    }
+
+    this._setConvStreaming(data.conversationId, true, data.sessionId, data.agentId);
+    this.updateBusyPromptArea(data.conversationId);
+    this.state.currentSession = {
+      id: data.sessionId,
+      conversationId: data.conversationId,
+      agentId: data.agentId,
+      startTime: Date.now()
+    };
+    this.state.sessionEvents = [];
+
+    this.updateUrlForConversation(data.conversationId, data.sessionId);
+
+    if (this.wsManager.isConnected) {
+      this.wsManager.subscribeToSession(data.sessionId);
+    }
+
+    const outputEl = document.getElementById('output');
+    if (outputEl) {
+      let messagesEl = outputEl.querySelector('.conversation-messages');
+      if (!messagesEl) {
+        const conv = this.state.currentConversation;
+        const wdInfo = conv?.workingDirectory ? `${this.escapeHtml(conv.workingDirectory)}` : '';
+        const timestamp = new Date(conv?.created_at || Date.now()).toLocaleDateString();
+        const metaParts = [timestamp];
+        if (conv?.agentType || conv?.agentId) metaParts.push(this.escapeHtml(conv.agentType || conv.agentId));
+        if (conv?.messageCount > 0) metaParts.push(`${conv.messageCount} msgs`);
+        if (wdInfo) metaParts.push(wdInfo);
+        outputEl.innerHTML = `
+          <div class="conversation-header">
+            <h2>${this.escapeHtml(conv?.title || 'Conversation')}</h2>
+            <p class="text-secondary">${metaParts.join(' - ')}</p>
+          </div>
+          <div class="conversation-messages"></div>
+        `;
+        messagesEl = outputEl.querySelector('.conversation-messages');
+      }
+      let streamingDiv = document.getElementById(`streaming-${data.sessionId}`);
+      if (!streamingDiv) {
+        streamingDiv = document.createElement('div');
+        streamingDiv.className = 'message message-assistant streaming-message';
+        streamingDiv.id = `streaming-${data.sessionId}`;
+        streamingDiv.innerHTML = `
+          <div class="message-role">Assistant</div>
+          <div class="message-blocks streaming-blocks"></div>
+          <div class="streaming-indicator" style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;">
+            <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">Thinking...</span>
+          </div>
+        `;
+        messagesEl.appendChild(streamingDiv);
+      } else {
+        streamingDiv.classList.add('streaming-message');
+        streamingDiv.querySelectorAll('.streaming-indicator').forEach(ind => ind.remove());
+        const indDiv = document.createElement('div');
+        indDiv.className = 'streaming-indicator';
+        indDiv.style = 'display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;';
+        indDiv.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">Thinking...</span>`;
+        streamingDiv.appendChild(indDiv);
+      }
+      this.scrollToBottom(true);
+    }
+
+    this._streamStartedAt = Date.now();
+    this._sessionCost = 0;
+    if (this._elapsedTimer) clearInterval(this._elapsedTimer);
+    this._elapsedTimer = setInterval(() => {
+      const label = streamingDiv?.querySelector('.streaming-indicator-label');
+      if (label) {
+        const sec = ((Date.now() - this._streamStartedAt) / 1000) | 0;
+        const time = sec < 60 ? sec + 's' : Math.floor(sec / 60) + 'm ' + (sec % 60) + 's';
+        label.textContent = this._sessionCost > 0 ? time + ' · $' + this._sessionCost.toFixed(4) : time;
+      }
+    }, 1000);
+
+    this._renderedSeqs[data.sessionId] = new Set();
+
+    this.showStreamingPromptButtons();
+
+    this.emit('streaming:start', data);
+  }
+
+});