agentgui 1.0.829 → 1.0.831

package/CHANGELOG.md

@@ -1,4 +1,5 @@
 ## 2026-04-12
+- refactor: split client.js (3212L) into 22 files ≤200L each; all 122 methods preserved including 2 extracted helpers (_setupUIButtonEvents, _setupUIWindowEvents, _loadConvRender); index.html updated with correct load order
 - 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

package/CLAUDE.md

@@ -74,7 +74,28 @@ static/js/app-shortcuts.js  Keyboard shortcuts overlay
 static/theme.js        Theme switching
 static/css/main.css              All application styles (extracted from index.html)
 static/css/tools-popup.css       Tool popup styles
-static/js/client.js    Main client logic
+static/js/client.js    AgentGUIClient class (constructor + _dbg + init); instantiation at bottom
+static/js/client-ws.js          WebSocket listeners, _convIsStreaming, _setConvStreaming, setupRendererListeners, restoreStateFromUrl, isValidId (prototype extension)
+static/js/client-url.js         URL/scroll helpers: updateUrlForConversation, saveScrollPosition, restoreScrollPosition, setupScrollTracking (prototype extension)
+static/js/client-ui.js          setupUI (modified, calls _setupUIButtonEvents/_setupUIWindowEvents) + setupChatMicButton (prototype extension)
+static/js/client-ui-controls.js _setupUIButtonEvents + _setupUIWindowEvents extracted helpers (prototype extension)
+static/js/client-ws-msg.js      connectWebSocket, handleWebSocketMessage, queueEvent (prototype extension)
+static/js/client-streaming.js   handleStreamingStart (prototype extension)
+static/js/client-streaming2.js  handleStreamingResumed, handleStreamingProgress, _handleStreamingProgressInner (prototype extension)
+static/js/client-streaming3.js  renderBlockContent, scrollToBottom, _showNewContentPill, _removeNewContentPill, handleStreamingError (prototype extension)
+static/js/client-streaming4.js  handleStreamingComplete, _promptPushIfWeOwnRemote, handleConversationCreated, handleMessageCreated, queue handlers (prototype extension)
+static/js/client-events.js      fetchAndRenderQueue, handleRateLimitHit/Clear, handleAllConversationsDeleted, isHtmlContent, sanitizeHtml, parseMarkdownCodeBlocks (prototype extension)
+static/js/client-render.js      renderCodeBlock, renderMessageContent (prototype extension)
+static/js/client-exec.js        startExecution, optimistic message helpers, _subscribeToConversationUpdates, _flushBgCache (prototype extension)
+static/js/client-helpers.js     _recoverMissedChunks, cache/placeholder/height/countdown/debug helpers, showLoadingSpinner/hideLoadingSpinner (prototype extension)
+static/js/client-ui2.js         _showWelcomeScreen, _showSkeletonLoading, streamToConversation, _hydrateSessionBlocks (prototype extension)
+static/js/client-conv.js        _getLazyObserver, _renderConversationContent, renderChunk, _renderChunkInner, loadAgents, loadSubAgentsForCli (prototype extension)
+static/js/client-agents.js      checkSpeechStatus, loadModelsForAgent, _populateModelSelector, lock/unlockAgentAndModel, applyAgentAndModelSelection, loadConversations, updateConnectionStatus (prototype extension)
+static/js/client-status.js      _updateConnectionIndicator, _handleModelDownloadProgress, _handleTTSSetupProgress, _toggleConnectionTooltip, updateMetrics, controls, toggleTheme, createNewConversation (prototype extension)
+static/js/client-cache.js       cacheCurrentConversation, invalidateCache, loadConversationMessages (prototype extension)
+static/js/client-load.js        _makeLoadRequest, _verifyRequestId, _completeLoadRequest, _loadConvRender (prototype extension)
+static/js/client-scroll.js      syncPromptState, updateBusyPromptArea, removeScrollUpDetection, setupScrollUpDetection (prototype extension)
+static/js/client-utils.js       renderMessagesFragment, renderMessages, escapeHtml, showError, on, emit, agent/model getters, draft/prompt helpers, destroy (prototype extension)
 static/js/conversations.js       Conversation management (class definition)
 static/js/conv-list-renderer.js  Conversation list render, CRUD, WS listener (prototype extension)
 static/js/conv-sidebar-actions.js  Sidebar delegated listeners, folder browser (prototype extension)

package/package.json

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

package/static/index.html

@@ -332,6 +332,27 @@
   <script defer src="/gm/js/pm2-monitor.js"></script>
   <script defer src="/gm/js/event-filter-config.js"></script>
   <script defer src="/gm/js/client.js"></script>
+  <script defer src="/gm/js/client-ws.js"></script>
+  <script defer src="/gm/js/client-url.js"></script>
+  <script defer src="/gm/js/client-ui.js"></script>
+  <script defer src="/gm/js/client-ui-controls.js"></script>
+  <script defer src="/gm/js/client-ws-msg.js"></script>
+  <script defer src="/gm/js/client-streaming.js"></script>
+  <script defer src="/gm/js/client-streaming2.js"></script>
+  <script defer src="/gm/js/client-streaming3.js"></script>
+  <script defer src="/gm/js/client-streaming4.js"></script>
+  <script defer src="/gm/js/client-events.js"></script>
+  <script defer src="/gm/js/client-render.js"></script>
+  <script defer src="/gm/js/client-exec.js"></script>
+  <script defer src="/gm/js/client-helpers.js"></script>
+  <script defer src="/gm/js/client-ui2.js"></script>
+  <script defer src="/gm/js/client-conv.js"></script>
+  <script defer src="/gm/js/client-agents.js"></script>
+  <script defer src="/gm/js/client-status.js"></script>
+  <script defer src="/gm/js/client-cache.js"></script>
+  <script defer src="/gm/js/client-load.js"></script>
+  <script defer src="/gm/js/client-scroll.js"></script>
+  <script defer src="/gm/js/client-utils.js"></script>
   <script defer src="/gm/js/features.js"></script>
   <script defer src="/gm/js/agent-auth.js"></script>
   <script defer src="/gm/js/agent-auth-oauth.js"></script>

package/static/js/client-agents.js

@@ -0,0 +1,155 @@
+Object.assign(AgentGUIClient.prototype, {
+  async checkSpeechStatus() {
+    try {
+      const status = await window.wsClient.rpc('speech.status');
+      if (status.modelsComplete) {
+        this._modelDownloadProgress = { done: true, complete: true };
+        this._modelDownloadInProgress = false;
+      } else if (status.modelsDownloading) {
+        this._modelDownloadProgress = status.modelsProgress || { downloading: true };
+        this._modelDownloadInProgress = true;
+      } else {
+        this._modelDownloadProgress = { done: false };
+        this._modelDownloadInProgress = false;
+      }
+    } catch (error) {
+      console.error('Failed to check speech status:', error);
+      this._modelDownloadProgress = { done: false };
+      this._modelDownloadInProgress = false;
+    }
+  },
+
+
+  async loadModelsForAgent(agentId) {
+    if (!agentId || !this.ui.modelSelector) return;
+    const cached = this._modelCache.get(agentId);
+    if (cached) {
+      this._populateModelSelector(cached);
+      return;
+    }
+    try {
+      const { models } = await window.wsClient.rpc('agent.models', { id: agentId });
+      this._modelCache.set(agentId, models);
+      this._populateModelSelector(models);
+    } catch (error) {
+      console.error('Failed to load models:', error);
+      this._populateModelSelector([]);
+    }
+  },
+
+
+  _populateModelSelector(models) {
+    if (!this.ui.modelSelector) return;
+    if (!models || models.length === 0) {
+      this.ui.modelSelector.innerHTML = '';
+      this.ui.modelSelector.setAttribute('data-empty', 'true');
+      return;
+    }
+    this.ui.modelSelector.removeAttribute('data-empty');
+    this.ui.modelSelector.innerHTML = models
+      .map(m => `<option value="${m.id}">${this.escapeHtml(m.label)}</option>`)
+      .join('');
+  },
+
+
+  lockAgentAndModel(agentId, model) {
+    this._agentLocked = true;
+    if (this.ui.cliSelector) {
+      this.ui.cliSelector.disabled = true;
+    }
+
+    this.loadModelsForAgent(agentId).then(() => {
+      if (this.ui.modelSelector && model) {
+        this.ui.modelSelector.value = model;
+      }
+    });
+  },
+
+
+  unlockAgentAndModel() {
+    this._agentLocked = false;
+    if (this.ui.cliSelector) {
+      this.ui.cliSelector.disabled = false;
+      if (this.ui.cliSelector.options.length > 0) {
+        this.ui.cliSelector.style.display = 'inline-block';
+      }
+    }
+    if (this.ui.modelSelector) {
+      this.ui.modelSelector.disabled = false;
+    }
+  },
+
+
+  applyAgentAndModelSelection(conversation, hasActivity) {
+    const agentId = conversation.agentId || conversation.agentType || null;
+    const model = conversation.model || null;
+    const subAgent = conversation.subAgent || null;
+
+    if (hasActivity) {
+      this._setCliSelectorToAgent(agentId);
+      this.lockAgentAndModel(agentId, model);
+    } else {
+      this.unlockAgentAndModel();
+      this._setCliSelectorToAgent(agentId);
+
+      const effectiveAgentId = agentId || this.getEffectiveAgentId();
+      this.loadSubAgentsForCli(effectiveAgentId).then(() => {
+        if (subAgent && this.ui.agentSelector) {
+          this.ui.agentSelector.value = subAgent;
+        }
+      });
+      this.loadModelsForAgent(effectiveAgentId).then(() => {
+        if (model && this.ui.modelSelector) {
+          this.ui.modelSelector.value = model;
+        }
+      });
+    }
+  },
+
+
+  _setCliSelectorToAgent(agentId) {
+    if (this.ui.cliSelector) {
+      this.ui.cliSelector.value = agentId;
+      if (!this.ui.cliSelector.value) {
+        this.ui.cliSelector.selectedIndex = 0;
+      }
+    }
+  },
+
+
+  async loadConversations() {
+    const now = Date.now();
+    if (this.conversationListCache.data.length > 0 &&
+        (now - this.conversationListCache.timestamp) < this.conversationListCache.ttl) {
+      this.state.conversations = this.conversationListCache.data;
+      return this.conversationListCache.data;
+    }
+
+    return this._dedupedFetch('loadConversations', async () => {
+      try {
+        const { conversations } = await window.wsClient.rpc('conv.ls');
+        this.state.conversations = conversations;
+        this.conversationListCache.data = conversations;
+        this.conversationListCache.timestamp = Date.now();
+        return conversations;
+      } catch (error) {
+        console.error('Failed to load conversations:', error);
+        return [];
+      }
+    });
+  },
+
+
+  updateConnectionStatus(status) {
+    if (this.ui.statusIndicator) {
+      this.ui.statusIndicator.dataset.status = status;
+      this.ui.statusIndicator.textContent = status.charAt(0).toUpperCase() + status.slice(1);
+    }
+    if (status === 'disconnected' || status === 'reconnecting') {
+      this._updateConnectionIndicator(status);
+    } else if (status === 'connected') {
+      this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
+    }
+  }
+
+});

package/static/js/client-cache.js

@@ -0,0 +1,172 @@
+Object.assign(AgentGUIClient.prototype, {
+  cacheCurrentConversation() {
+    const convId = this.state.currentConversation?.id;
+    if (!convId) return;
+    const outputEl = document.getElementById('output');
+    if (!outputEl || !outputEl.firstChild) return;
+    if (this._convIsStreaming(convId)) return;
+
+    this.saveScrollPosition(convId);
+    const clone = outputEl.cloneNode(true);
+    this.conversationCache.set(convId, {
+      dom: clone,
+      conversation: this.state.currentConversation,
+      timestamp: Date.now()
+    });
+
+    if (this.conversationCache.size > this.MAX_CACHE_SIZE) {
+      const oldest = this.conversationCache.keys().next().value;
+      this.conversationCache.delete(oldest);
+    }
+  },
+
+
+  invalidateCache(conversationId) {
+    this.conversationCache.delete(conversationId);
+  },
+
+
+  async loadConversationMessages(conversationId) {
+    performance.mark(`conv-load-start:${conversationId}`);
+    try {
+      if (this._previousConvAbort) {
+        this._previousConvAbort.abort();
+      }
+      this._previousConvAbort = new AbortController();
+      const convSignal = this._previousConvAbort.signal;
+
+      const prevConversationId = this.state.currentConversation?.id;
+      const availableFallback = this.state.conversations?.find(c => c.id !== conversationId) || null;
+      this.cacheCurrentConversation();
+  
+      this.removeScrollUpDetection();
+      if (this.renderer.resetScrollState) this.renderer.resetScrollState();
+      this._userScrolledUp = false;
+      this._removeNewContentPill();
+
+      if (this.ui.messageInput) {
+        this.ui.messageInput.value = '';
+        this.ui.messageInput.style.height = 'auto';
+      }
+
+      if (this.ui.stopButton) this.ui.stopButton.classList.remove('visible');
+      if (this.ui.injectButton) this.ui.injectButton.classList.remove('visible');
+      if (this.ui.queueButton) this.ui.queueButton.classList.remove('visible');
+      if (this.ui.sendButton) this.ui.sendButton.style.display = '';
+
+      var prevId = this.state.currentConversation?.id;
+      if (prevId && prevId !== conversationId) {
+        if (this.wsManager.isConnected && !this._convIsStreaming(prevId)) {
+          this.wsManager.sendMessage({ type: 'unsubscribe', conversationId: prevId });
+        }
+        this.state.currentSession = null;
+      }
+
+      const cachedConv = this.state.conversations.find(c => c.id === conversationId);
+      if (cachedConv && this.state.currentConversation?.id !== conversationId) {
+        window.ConversationState?.selectConversation(conversationId, 'cache_load', 1);
+        this.state.currentConversation = cachedConv;
+      }
+
+      this.updateUrlForConversation(conversationId);
+      if (this.wsManager.isConnected) {
+        this.wsManager.sendMessage({ type: 'subscribe', conversationId });
+      }
+
+      const cached = this.conversationCache.get(conversationId);
+      if (cached) { this.conversationCache.delete(conversationId); this.conversationCache.set(conversationId, cached); }
+      if (cached && (Date.now() - cached.timestamp) < 600000) {
+        const outputEl = document.getElementById('output');
+        if (outputEl) {
+          const children = [];
+          while (cached.dom.firstChild) children.push(cached.dom.firstChild);
+          outputEl.replaceChildren(...children);
+          window.ConversationState?.selectConversation(conversationId, 'dom_cache_load', 1);
+          this.state.currentConversation = cached.conversation;
+          window.dispatchEvent(new CustomEvent('conversation-changed', { detail: { conversationId, conversation: cached.conversation } }));
+          const cachedHasActivity = cached.conversation.messageCount > 0 || this._convIsStreaming(conversationId);
+          this.applyAgentAndModelSelection(cached.conversation, cachedHasActivity);
+          this.conversationCache.delete(conversationId);
+          if (this._lazyObserver) { this._lazyObserver.disconnect(); this._lazyObserver = null; }
+          this._flushBgCache && this._flushBgCache(conversationId);
+          this.setupScrollUpDetection && this.setupScrollUpDetection();
+          this.syncPromptState(conversationId);
+          this.restoreScrollPosition(conversationId);
+          return;
+        }
+      }
+
+      this.conversationCache.delete(conversationId);
+
+      if (this._lazyObserver) { this._lazyObserver.disconnect(); this._lazyObserver = null; }
+      this._showSkeletonLoading(conversationId);
+      await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+
+      let fullData;
+      try {
+        fullData = await window.wsClient.rpc('conv.full', { id: conversationId });
+        performance.mark(`conv-data-received:${conversationId}`);
+        if (convSignal.aborted) return;
+      } catch (wsErr) {
+        if (wsErr.code === 404) {
+          console.warn('Conversation no longer exists:', conversationId);
+          window.ConversationState?.clear('conversation_not_found');
+          this.state.currentConversation = null;
+          if (window.conversationManager) window.conversationManager.loadConversations();
+          const fallbackConv = prevConversationId ? prevConversationId : availableFallback?.id;
+          if (fallbackConv && fallbackConv !== conversationId) {
+            this._dbg('Resuming from fallback conversation:', fallbackConv);
+            this.showError('Conversation not found. Resuming previous conversation.');
+            await this.loadConversationMessages(fallbackConv);
+          } else {
+            const outputEl = document.getElementById('output');
+            if (outputEl) outputEl.innerHTML = '<p class="text-secondary" style="padding:2rem;text-align:center">Conversation not found. It may have been lost during a server restart.</p>';
+            this.enableControls();
+          }
+          return;
+        }
+        try {
+          const base = window.__BASE_URL || '';
+          const [convRes, chunksRes, msgsRes] = await Promise.all([
+            fetch(`${base}/api/conversations/${conversationId}`),
+            fetch(`${base}/api/conversations/${conversationId}/chunks`),
+            fetch(`${base}/api/conversations/${conversationId}/messages?limit=500`)
+          ]);
+          const convData = await convRes.json();
+          const chunksData = await chunksRes.json();
+          const msgsData = await msgsRes.json();
+          fullData = {
+            conversation: convData.conversation,
+            isActivelyStreaming: false,
+            latestSession: null,
+            chunks: chunksData.chunks || [],
+            totalChunks: chunksData.totalChunks || (chunksData.chunks || []).length,
+            messages: msgsData.messages || []
+          };
+          if (convSignal.aborted) return;
+        } catch (restErr) {
+          throw wsErr;
+        }
+      }
+      if (convSignal.aborted) return;
+      await this._loadConvRender(conversationId, convSignal, prevConversationId, availableFallback, fullData);
+    } catch (error) {
+      if (error.name === 'AbortError') return;
+      console.error('Failed to load conversation messages:', error);
+      const fallbackConv = prevConversationId ? prevConversationId : availableFallback?.id;
+      if (fallbackConv && fallbackConv !== conversationId) {
+        this._dbg('Resuming from fallback conversation due to error:', fallbackConv);
+        this.showError('Failed to load conversation. Resuming previous conversation.');
+        try {
+          await this.loadConversationMessages(fallbackConv);
+        } catch (fallbackError) {
+          console.error('Failed to resume fallback conversation:', fallbackError);
+          this.showError('Failed to load conversation: ' + error.message);
+        }
+      } else {
+        this.showError('Failed to load conversation: ' + error.message);
+      }
+    }
+    }
+  }
+});

package/static/js/client-conv.js

@@ -0,0 +1,198 @@
+Object.assign(AgentGUIClient.prototype, {
+  _getLazyObserver() {
+    if (this._lazyObserver) return this._lazyObserver;
+    if (typeof IntersectionObserver === 'undefined') return null;
+    this._lazyObserver = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        const msgDiv = entry.target;
+        const pendingChunks = msgDiv._lazyChunks;
+        if (!pendingChunks) continue;
+        delete msgDiv._lazyChunks;
+        this._lazyObserver.unobserve(msgDiv);
+        const blocksEl = msgDiv.querySelector('.message-blocks');
+        if (blocksEl) this._hydrateSessionBlocks(blocksEl, pendingChunks);
+      }
+    }, { rootMargin: '400px 0px' });
+    return this._lazyObserver;
+  },
+
+
+  _renderConversationContent(messagesContainer, chunks, userMessages, activeSessionId) {
+    if (!chunks || chunks.length === 0) return;
+    const sessionMap = new Map();
+    for (const chunk of chunks) {
+      if (!sessionMap.has(chunk.sessionId)) sessionMap.set(chunk.sessionId, []);
+      sessionMap.get(chunk.sessionId).push(chunk);
+    }
+
+    const sessionIds = [...sessionMap.keys()];
+    const EAGER_TAIL = 8;
+    const eagerSet = new Set(sessionIds.slice(-EAGER_TAIL));
+    if (activeSessionId) eagerSet.add(activeSessionId);
+    const observer = sessionIds.length > EAGER_TAIL ? this._getLazyObserver() : null;
+
+    const frag = document.createDocumentFragment();
+    let ui = 0;
+    for (const [sid, list] of sessionMap) {
+      const sessionStart = list[0].created_at;
+      while (ui < userMessages.length && userMessages[ui].created_at <= sessionStart) {
+        const m = userMessages[ui++];
+        const uDiv = document.createElement('div');
+        uDiv.className = 'message message-user';
+        uDiv.setAttribute('data-msg-id', m.id);
+        uDiv.innerHTML = `<div class="message-role">User<button class="msg-edit-btn" data-edit-msg="${this.escapeHtml(m.id)}" title="Edit and re-run">&#9998;</button></div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div>`;
+        frag.appendChild(uDiv);
+      }
+      const isActive = sid === activeSessionId;
+      const msgDiv = document.createElement('div');
+      msgDiv.className = `message message-assistant${isActive ? ' streaming-message' : ''}`;
+      msgDiv.id = isActive ? `streaming-${sid}` : `message-${sid}`;
+      msgDiv.setAttribute('data-session-id', sid);
+      msgDiv.innerHTML = '<div class="message-role">Assistant</div><div class="message-blocks streaming-blocks"></div>';
+      const blocksEl = msgDiv.querySelector('.message-blocks');
+
+      if (observer && !eagerSet.has(sid)) {
+        msgDiv._lazyChunks = list;
+        observer.observe(msgDiv);
+      } else {
+        this._hydrateSessionBlocks(blocksEl, list);
+      }
+
+      if (isActive) {
+        const ind = document.createElement('div');
+        ind.className = 'streaming-indicator';
+        ind.style = 'display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;';
+        ind.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">Processing...</span>';
+        msgDiv.appendChild(ind);
+      } else {
+        const ts = document.createElement('div');
+        ts.className = 'message-timestamp';
+        ts.textContent = new Date(list[list.length - 1].created_at).toLocaleString();
+        msgDiv.appendChild(ts);
+      }
+      frag.appendChild(msgDiv);
+    }
+    while (ui < userMessages.length) {
+      const m = userMessages[ui++];
+      const uDiv = document.createElement('div');
+      uDiv.className = 'message message-user';
+      uDiv.setAttribute('data-msg-id', m.id);
+      uDiv.innerHTML = `<div class="message-role">User<button class="msg-edit-btn" data-edit-msg="${this.escapeHtml(m.id)}" title="Edit and re-run">&#9998;</button></div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div>`;
+      frag.appendChild(uDiv);
+    }
+    messagesContainer.appendChild(frag);
+  },
+
+
+  renderChunk(chunk) {
+    try { return this._renderChunkInner(chunk); } catch (e) { console.error('[render-error] chunk:', e); }
+  },
+
+  _renderChunkInner(chunk) {
+    if (!chunk || !chunk.block) return;
+    const seq = chunk.sequence;
+    if (seq !== undefined) {
+      const seen = (this._renderedSeqs = this._renderedSeqs || {})[chunk.sessionId] || (this._renderedSeqs[chunk.sessionId] = new Set());
+      if (seen.has(seq)) return;
+      seen.add(seq);
+    }
+    const streamingEl = document.getElementById(`streaming-${chunk.sessionId}`);
+    if (!streamingEl) return;
+    const blocksEl = streamingEl.querySelector('.streaming-blocks');
+    if (!blocksEl) return;
+    if (chunk.block.type === 'tool_result') {
+      const matchById = chunk.block.tool_use_id && blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${chunk.block.tool_use_id}"]`);
+      const lastEl = blocksEl.lastElementChild;
+      const toolUseEl = matchById || (lastEl?.classList?.contains('block-tool-use') ? lastEl : null);
+      if (toolUseEl) {
+        this.renderer.mergeResultIntoToolUse(toolUseEl, chunk.block);
+        this.scrollToBottom();
+        return;
+      }
+    }
+    if (chunk.block.type === 'tool_status' || chunk.block.type === 'hook_progress') return;
+    const element = this.renderer.renderBlock(chunk.block, chunk, blocksEl);
+    if (!element) { this.scrollToBottom(); return; }
+    blocksEl.appendChild(element);
+    this.scrollToBottom();
+  },
+
+
+  async loadAgents() {
+    return this._dedupedFetch('loadAgents', async () => {
+      try {
+        const { agents } = await window.wsClient.rpc('agent.ls');
+        this.state.agents = agents;
+
+        const displayAgents = agents;
+
+        if (this.ui.cliSelector) {
+          if (displayAgents.length > 0) {
+            this.ui.cliSelector.innerHTML = displayAgents
+              .map(a => `<option value="${a.id}">${a.name.split(/[\s\-]+/)[0]}</option>`)
+              .join('');
+            this.ui.cliSelector.style.display = 'inline-block';
+          } else {
+            this.ui.cliSelector.innerHTML = '';
+            this.ui.cliSelector.style.display = 'none';
+          }
+        }
+
+        window.dispatchEvent(new CustomEvent('agents-loaded', { detail: { agents } }));
+
+        if (displayAgents.length > 0 && !this._agentLocked) {
+          const firstId = displayAgents[0].id;
+          await this.loadSubAgentsForCli(firstId);
+          this.loadModelsForAgent(this.getEffectiveAgentId());
+        }
+        return agents;
+      } catch (error) {
+        console.error('Failed to load agents:', error);
+        return [];
+      }
+    });
+  },
+
+
+  async loadSubAgentsForCli(cliAgentId) {
+    if (this.ui.agentSelector) {
+      this.ui.agentSelector.innerHTML = '';
+      this.ui.agentSelector.style.display = 'none';
+    }
+    try {
+      const { subAgents } = await window.wsClient.rpc('agent.subagents', { id: cliAgentId });
+      if (subAgents && subAgents.length > 0 && this.ui.agentSelector) {
+        this.ui.agentSelector.innerHTML = subAgents
+          .map(a => `<option value="${a.id}">${a.name.split(/[\s\-]+/)[0]}</option>`)
+          .join('');
+        this.ui.agentSelector.style.display = 'inline-block';
+        this._dbg(`[Agent Selector] Loaded ${subAgents.length} sub-agents for ${cliAgentId}`);
+        const firstSubAgentId = subAgents[0].id;
+        this.ui.agentSelector.value = firstSubAgentId;
+        this.loadModelsForAgent(cliAgentId);
+      } else {
+        this._dbg(`[Agent Selector] No sub-agents found for ${cliAgentId}`);
+        const cliToAcpMap = {
+          'cli-opencode': 'opencode',
+          'cli-gemini': 'gemini',
+          'cli-kilo': 'kilo',
+          'cli-codex': 'codex'
+        };
+        const acpAgentId = cliToAcpMap[cliAgentId] || cliAgentId;
+        this.loadModelsForAgent(acpAgentId);
+      }
+    } catch (err) {
+      console.warn(`[Agent Selector] Failed to load sub-agents for ${cliAgentId}:`, err.message);
+      const cliToAcpMap = {
+        'cli-opencode': 'opencode',
+        'cli-gemini': 'gemini',
+        'cli-kilo': 'kilo',
+        'cli-codex': 'codex'
+      };
+      const acpAgentId = cliToAcpMap[cliAgentId] || cliAgentId;
+      this.loadModelsForAgent(acpAgentId);
+    }
+  }
+
+});