agentgui 1.0.829 → 1.0.830

package/static/js/client-events.js

@@ -0,0 +1,164 @@
+Object.assign(AgentGUIClient.prototype, {
+  async fetchAndRenderQueue(conversationId) {
+    const outputEl = document.querySelector('.conversation-messages');
+    if (!outputEl) return;
+
+    try {
+      const { queue } = await window.wsClient.rpc('q.ls', { id: conversationId });
+
+      let queueEl = outputEl.querySelector('.queue-indicator');
+      if (!queue || queue.length === 0) {
+        if (queueEl) queueEl.remove();
+        return;
+      }
+
+      if (!queueEl) {
+        queueEl = document.createElement('div');
+        queueEl.className = 'queue-indicator';
+        outputEl.appendChild(queueEl);
+      }
+
+      queueEl.innerHTML = queue.map((q, i) => `
+        <div class="queue-item" data-message-id="${q.messageId}" style="padding:0.5rem 1rem;margin:0.5rem 0;border-radius:0.375rem;background:var(--color-warning);color:#000;font-size:0.875rem;display:flex;align-items:center;gap:0.5rem;">
+          <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${i + 1}. ${this.escapeHtml(q.content)}</span>
+          <button class="queue-edit-btn" data-index="${i}" style="padding:0.25rem 0.5rem;background:transparent;border:1px solid #000;border-radius:0.25rem;cursor:pointer;font-size:0.75rem;">Edit</button>
+          <button class="queue-delete-btn" data-index="${i}" style="padding:0.25rem 0.5rem;background:transparent;border:1px solid #000;border-radius:0.25rem;cursor:pointer;font-size:0.75rem;">Delete</button>
+        </div>
+      `).join('');
+
+      if (!queueEl._listenersAttached) {
+        queueEl._listenersAttached = true;
+        queueEl.addEventListener('click', async (e) => {
+          if (e.target.classList.contains('queue-delete-btn')) {
+            const index = parseInt(e.target.dataset.index);
+            const msgId = queue[index].messageId;
+            if (await window.UIDialog.confirm('Delete this queued message?', 'Delete Message')) {
+              await window.wsClient.rpc('q.del', { id: conversationId, messageId: msgId });
+            }
+          } else if (e.target.classList.contains('queue-edit-btn')) {
+            const index = parseInt(e.target.dataset.index);
+            const q = queue[index];
+            const newContent = await window.UIDialog.prompt('Edit message:', q.content, 'Edit Queued Message');
+            if (newContent !== null && newContent !== q.content) {
+              window.wsClient.rpc('q.upd', { id: conversationId, messageId: q.messageId, content: newContent });
+            }
+          }
+        });
+      }
+    } catch (err) {
+      console.error('Failed to fetch queue:', err);
+    }
+  },
+
+
+  handleRateLimitHit(data) {
+    if (data.conversationId !== this.state.currentConversation?.id) return;
+    this._setConvStreaming(data.conversationId, false);
+
+    this.enableControls();
+
+    const cooldownMs = data.retryAfterMs || 60000;
+    this._rateLimitSafetyTimer = setTimeout(() => {
+      this.enableControls();
+    }, cooldownMs + 10000);
+
+    const sessionId = data.sessionId || this.state.currentSession?.id;
+    const streamingEl = document.getElementById(`streaming-${sessionId}`);
+    if (streamingEl) {
+      const indicator = streamingEl.querySelector('.streaming-indicator');
+      if (indicator) {
+        const retrySeconds = Math.ceil(cooldownMs / 1000);
+        indicator.innerHTML = `<span style="color:var(--color-warning);">Rate limited. Retrying in ${retrySeconds}s...</span>`;
+        let remaining = retrySeconds;
+        const countdownTimer = setInterval(() => {
+          remaining--;
+          if (remaining <= 0) {
+            clearInterval(countdownTimer);
+            indicator.innerHTML = '<span style="color:var(--color-info);">Restarting...</span>';
+          } else {
+            indicator.innerHTML = `<span style="color:var(--color-warning);">Rate limited. Retrying in ${remaining}s...</span>`;
+          }
+        }, 1000);
+      }
+    }
+  },
+
+
+  handleRateLimitClear(data) {
+    if (data.conversationId !== this.state.currentConversation?.id) return;
+    if (this._rateLimitSafetyTimer) {
+      clearTimeout(this._rateLimitSafetyTimer);
+      this._rateLimitSafetyTimer = null;
+    }
+    this.enableControls();
+  },
+
+
+  handleAllConversationsDeleted(data) {
+    window.ConversationState?.clear('all_deleted');
+    this.state.currentConversation = null;
+    this.state.conversations = [];
+    this.state.sessionEvents = [];
+    this.conversationCache.clear();
+    this.conversationListCache = { data: [], timestamp: 0, ttl: 30000 };
+    this.draftPrompts.clear();
+    window.dispatchEvent(new CustomEvent('conversation-deselected'));
+    const outputEl = document.getElementById('output');
+    if (outputEl) outputEl.innerHTML = '';
+  },
+
+
+  isHtmlContent(text) {
+    const htmlPattern = /<(?:div|table|section|article|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6]|p|blockquote|pre|code|span|strong|em|a|img|br|hr|li|td|tr|th|thead|tbody|tfoot)\b[^>]*>/i;
+    return htmlPattern.test(text);
+  },
+
+
+  sanitizeHtml(html) {
+    const dangerous = /<\s*\/?\s*(script|iframe|object|embed|applet|form|input|button|select|textarea)\b[^>]*>/gi;
+    let cleaned = html.replace(dangerous, '');
+    cleaned = cleaned.replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, '');
+    cleaned = cleaned.replace(/\s+on\w+\s*=\s*[^\s>]+/gi, '');
+    cleaned = cleaned.replace(/javascript\s*:/gi, '');
+    return cleaned;
+  },
+
+
+  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;
+  }
+
+});

package/static/js/client-exec.js

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

@@ -0,0 +1,164 @@
+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;
+    window.__debug = {
+      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: typeof convMachineAPI !== 'undefined' ? Object.fromEntries([...window.__convMachines].map(([k, a]) => [k, a.getSnapshot().value])) : {},
+        toolInstallMachineStates: typeof window.__toolInstallMachines !== 'undefined' ? Object.fromEntries([...window.__toolInstallMachines].map(([k, a]) => [k, a.getSnapshot().value])) : {},
+        voiceMachineState: typeof window.__voiceMachine !== 'undefined' ? window.__voiceMachine.getSnapshot().value : 'unknown',
+        convListMachineState: typeof window.__convListMachine !== 'undefined' ? window.__convListMachine.getSnapshot().value : 'unknown',
+        promptMachineState: typeof window.__promptMachine !== 'undefined' ? window.__promptMachine.getSnapshot().value : 'unknown',
+        wsConnectionState: self.wsManager?._wsActor?.getSnapshot().value || 'unknown',
+        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' };
+        const messageCount = output.querySelectorAll('.message').length;
+        const queueItems = output.querySelectorAll('.queue-item').length;
+        const pendingMessages = output.querySelectorAll('.message-sending').length;
+        return { messageCount, queueItems, pendingMessages };
+      }
+    };
+  },
+
+
+  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

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