agentgui 1.0.814 → 1.0.816

package/static/js/client.js

@@ -1,8 +1,3 @@
-/**
- * AgentGUI Client
- * Main application orchestrator that integrates WebSocket, event processing,
- * and streaming renderer for real-time Claude Code execution visualization
- */
 
 class AgentGUIClient {
   constructor(config = {}) {
@@ -14,13 +9,11 @@ class AgentGUIClient {
       ...config
     };
 
-    // Initialize components - reuse global wsManager/wsClient if available
     this.renderer = new StreamingRenderer(config.renderer || {});
     this.wsManager = window.wsManager || new WebSocketManager(config.websocket || {});
     if (!window.wsManager) window.wsManager = this.wsManager;
     this.eventProcessor = new EventProcessor(config.eventProcessor || {});
 
-    // Application state
     this.state = {
       isInitialized: false,
       currentSession: null,
@@ -31,24 +24,19 @@ class AgentGUIClient {
       agents: []
     };
 
-    // Conversation DOM cache: store rendered DOM + scroll position per conversationId
     this.conversationCache = new Map();
     this.MAX_CACHE_SIZE = 10;
 
-    // Conversation list cache with TTL
     this.conversationListCache = {
       data: [],
       timestamp: 0,
       ttl: 30000 // 30 seconds
     };
 
-    // Draft prompts per conversation
     this.draftPrompts = new Map();
 
-    // Event handlers
     this.eventHandlers = {};
 
-    // UI state
     this.ui = {
       statusIndicator: null,
       messageInput: null,
@@ -66,12 +54,9 @@ class AgentGUIClient {
     this._inflightRequests = new Map();
     this._previousConvAbort = null;
 
-    // Background conversation cache: keeps last 50 conversations' streaming blocks in memory
-    // Map<conversationId, { items: {seq,packed}[], seqSet: Set<number>, sessionId: string }>
     this._bgCache = new Map();
     this.BG_CACHE_MAX = 50;
 
-    // PHASE 2: Request Lifetime Tracking
     this._loadInProgress = {}; // { [conversationId]: { requestId, abortController, timestamp, prevConversationId } }
     this._currentRequestId = 0; // Auto-incrementing request counter
 
@@ -85,7 +70,6 @@ class AgentGUIClient {
     this._lastSendTime = 0;
     this._countdownTimer = null;
 
-    // Router state
     this.routerState = {
       currentConversationId: null,
       currentSessionId: null
@@ -96,17 +80,12 @@ class AgentGUIClient {
 
   _dbg(...args) { if (this._debug) console.log('[AgentGUI]', ...args); }
 
-  /**
-   * Initialize the client
-   */
   async init() {
     try {
       this._dbg('Initializing AgentGUI client');
 
-      // Start WebSocket connection immediately (don't wait for UI setup)
       const wsReady = this.config.autoConnect ? this.connectWebSocket() : Promise.resolve();
 
-      // Initialize renderer and UI in parallel with WS connection
       this.renderer.init(this.config.outputContainerId, this.config.scrollContainerId);
 
       if (typeof ImageLoader !== 'undefined') {
@@ -117,7 +96,6 @@ class AgentGUIClient {
       this.setupRendererListeners();
       this.setupUI();
 
-      // Wait for WS, then load data in parallel
       await wsReady;
       await Promise.all([
         this.loadAgents(),
@@ -125,10 +103,8 @@ class AgentGUIClient {
         this.checkSpeechStatus()
       ]);
 
-      // Enable controls for initial interaction
       this.enableControls();
 
-      // Restore state from URL on page load
       this.restoreStateFromUrl();
 
       this.state.isInitialized = true;
@@ -144,16 +120,11 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Setup WebSocket event listeners
-   */
   setupWebSocketListeners() {
     this.wsManager.on('connected', () => {
       this._dbg('WebSocket connected');
       this.updateConnectionStatus('connected');
       this._subscribeToConversationUpdates();
-      // On reconnect (not initial connect), invalidate current conversation's DOM
-      // cache so we fetch fresh chunks rather than serving potentially stale DOM.
       if (this.wsManager.stats.totalReconnects > 0 && this.state.currentConversation?.id) {
         this.invalidateCache(this.state.currentConversation.id);
       }
@@ -164,7 +135,6 @@ class AgentGUIClient {
         this.updateBusyPromptArea(this.state.currentConversation.id);
       }
       this.emit('ws:connected');
-      // Check if server was updated while client was loaded - reload if version changed
       if (window.__SERVER_VERSION) {
         fetch((window.__BASE_URL || '') + '/api/version').then(r => r.json()).then(d => {
           if (d.version && d.version !== window.__SERVER_VERSION) {
@@ -210,10 +180,8 @@ class AgentGUIClient {
       if (dot) dot.classList.remove('degrading');
     });
 
-    // Switch to idle view when selecting non-streaming conversation
     window.addEventListener('conversation-selected', (e) => {
       const convId = e.detail.conversationId;
-      // Save draft from previous conversation before switching
       this.saveDraftPrompt();
 
       const isStreaming = this._convIsStreaming(convId);
@@ -221,11 +189,9 @@ class AgentGUIClient {
         window.switchView('chat');
       }
 
-      // Restore draft for new conversation synchronously (setTimeout caused races)
       this.restoreDraftPrompt(convId);
     });
 
-    // Preserve controls state across tab switches
     window.addEventListener('view-switched', (e) => {
       const view = e.detail.view;
       if (view === 'chat') {
@@ -240,14 +206,12 @@ class AgentGUIClient {
     });
   }
 
-  // Authoritative streaming check: conv machine is source of truth, Map is fallback cache
   _convIsStreaming(convId) {
     if (!convId) return false;
     if (typeof convMachineAPI !== 'undefined') return convMachineAPI.isStreaming(convId);
     return this.state.streamingConversations.has(convId);
   }
 
-  // Mark conversation as streaming in both machine and cache Map
   _setConvStreaming(convId, streaming, sessionId, agentId) {
     if (!convId) return;
     if (streaming) {
@@ -259,9 +223,6 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Setup renderer event listeners
-   */
   setupRendererListeners() {
     this.renderer.on('batch:complete', (data) => {
       this._dbg('Batch rendered:', data);
@@ -273,16 +234,10 @@ class AgentGUIClient {
     });
   }
 
-  /**
-   * Router state management: restore conversation from URL
-   * Format: /conversations/<conversationId>?session=<sessionId>
-   */
   restoreStateFromUrl() {
-    // Parse path-based URL: /conversations/<conversationId>
     const pathMatch = window.location.pathname.match(/\/conversations\/([^\/]+)$/);
     const conversationId = pathMatch ? pathMatch[1] : null;
 
-    // Session ID still in query params
     const params = new URLSearchParams(window.location.search);
     const sessionId = params.get('session');
 
@@ -298,13 +253,11 @@ class AgentGUIClient {
       } else {
         this.loadConversationMessages(conversationId).catch((err) => {
           console.warn('Failed to restore conversation from URL, loading latest instead:', err);
-          // If the URL conversation doesn't exist, try loading the most recent conversation
           if (this.state.conversations && this.state.conversations.length > 0) {
             const latestConv = this.state.conversations[0];
             this._dbg('Loading latest conversation instead:', latestConv.id);
             return this.loadConversationMessages(latestConv.id);
           } else {
-            // No conversations available - show welcome screen
             this._showWelcomeScreen();
           }
         }).finally(() => {
@@ -312,25 +265,15 @@ class AgentGUIClient {
         });
       }
     } else {
-      // No conversation in URL - show welcome screen
       this._showWelcomeScreen();
     }
   }
 
-  /**
-   * Validate ID format to prevent XSS
-   * Alphanumeric, dash, underscore only
-   */
   isValidId(id) {
     if (!id || typeof id !== 'string') return false;
     return /^[a-zA-Z0-9_-]+$/.test(id) && id.length < 256;
   }
 
-  /**
-   * Update URL when conversation is selected
-   * Uses History API (pushState) for clean URLs
-   * Format: /conversations/<conversationId>?session=<sessionId>
-   */
   updateUrlForConversation(conversationId, sessionId) {
     if (!this.isValidId(conversationId)) return;
     if (!this.routerState) return;
@@ -340,11 +283,9 @@ class AgentGUIClient {
       this.routerState.currentSessionId = sessionId;
     }
 
-    // Use path-based URL for conversation
     const basePath = window.location.pathname.replace(/\/conversations\/[^\/]+$/, '').replace(/\/$/, '');
     let url = `${basePath}/conversations/${conversationId}`;
     
-    // Session ID still in query params for optional state
     if (sessionId && this.isValidId(sessionId)) {
       url += `?session=${sessionId}`;
     }
@@ -352,10 +293,6 @@ class AgentGUIClient {
     window.history.pushState({ conversationId, sessionId }, '', url);
   }
 
-  /**
-   * Save scroll position to localStorage
-   * Key format: scroll_<conversationId>
-   */
   saveScrollPosition(conversationId) {
     if (!this.isValidId(conversationId)) return;
 
@@ -370,10 +307,6 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Restore scroll position from localStorage
-   * Restores after conversation loads
-   */
   restoreScrollPosition(conversationId) {
     if (!this.isValidId(conversationId)) return;
 
@@ -404,10 +337,6 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Setup scroll position tracking
-   * Debounced to avoid excessive localStorage writes
-   */
   setupScrollTracking() {
     const scrollContainer = document.getElementById(this.config.scrollContainerId);
     if (!scrollContainer) return;
@@ -433,16 +362,12 @@ class AgentGUIClient {
     });
   }
 
-  /**
-   * Setup UI elements
-   */
   setupUI() {
     const container = document.getElementById(this.config.containerId);
     if (!container) {
       throw new Error(`Container not found: ${this.config.containerId}`);
     }
 
-    // Get references to key UI elements
     this.ui.statusIndicator = document.querySelector('[data-status-indicator]');
     this.ui.messageInput = document.querySelector('[data-message-input]');
     this.ui.sendButton = document.querySelector('[data-send-button]');
@@ -450,13 +375,11 @@ class AgentGUIClient {
     this.ui.agentSelector = document.querySelector('[data-agent-selector]');
     this.ui.modelSelector = document.querySelector('[data-model-selector]');
 
-    // Auto-save drafts on input
     if (this.ui.messageInput) {
       this.ui.messageInput.addEventListener('input', () => {
         this.saveDraftPrompt();
       });
 
-      // Restore draft when conversation loads
       const currentConvId = this.state.currentConversation?.id;
       if (currentConvId) {
         this.restoreDraftPrompt(currentConvId);
@@ -475,7 +398,6 @@ class AgentGUIClient {
 
     if (this.ui.agentSelector) {
       this.ui.agentSelector.addEventListener('change', () => {
-        // Load models for parent CLI agent when sub-agent changes
         const parentAgentId = this.ui.cliSelector?.value;
         if (parentAgentId) {
           this.loadModelsForAgent(parentAgentId);
@@ -492,7 +414,6 @@ class AgentGUIClient {
       });
     }
 
-    // Setup event listeners
     if (this.ui.sendButton) {
       this.ui.sendButton.addEventListener('click', () => this.startExecution());
     }
@@ -533,7 +454,6 @@ class AgentGUIClient {
             this.ui.messageInput.style.height = 'auto';
           }
 
-          // Stop agent and resume with new message
           window.wsClient.rpc('conv.steer', { id: this.state.currentConversation.id, content: steerMsg })
             .catch(err => {
               console.error('Failed to steer:', err);
@@ -557,7 +477,6 @@ class AgentGUIClient {
           return;
         }
         try {
-          // Queue uses msg.send which will enqueue if streaming is active
           const data = await window.wsClient.rpc('msg.send', { id: this.state.currentConversation.id, content: message });
           this._dbg('Queue response:', data);
           if (this.ui.messageInput) {
@@ -606,7 +525,6 @@ class AgentGUIClient {
       }
     });
 
-    // Setup theme toggle
     const themeToggle = document.querySelector('[data-theme-toggle]');
     if (themeToggle) {
       themeToggle.addEventListener('click', () => this.toggleTheme());
@@ -639,7 +557,6 @@ class AgentGUIClient {
       this.unlockAgentAndModel();
     });
 
-    // Listen for conversation selection (deduplicate rapid clicks)
     window.addEventListener('conversation-selected', async (event) => {
       const conversationId = event.detail.conversationId;
       if (this._isLoadingConversation && this._loadingConversationId === conversationId) return;
@@ -654,7 +571,6 @@ class AgentGUIClient {
       }
     });
 
-    // Listen for active conversation deletion
     window.addEventListener('conversation-deselected', () => {
       window.ConversationState?.clear('deselected');
       this.state.currentConversation = null;
@@ -735,9 +651,6 @@ class AgentGUIClient {
     });
   }
 
-  /**
-   * Connect to WebSocket
-   */
   async connectWebSocket() {
     try {
       await this.wsManager.connect();
@@ -751,7 +664,6 @@ class AgentGUIClient {
 
   handleWebSocketMessage(data) {
     try {
-      // Dispatch to window so other modules (conversations.js) can listen
       window.dispatchEvent(new CustomEvent('ws-message', { detail: data }));
 
       switch (data.type) {
@@ -834,10 +746,6 @@ class AgentGUIClient {
       this._serverProcessingEstimate = 0.7 * this._serverProcessingEstimate + 0.3 * serverTime;
     }
 
-    // Subscribe to the session so blocks are not lost, but skip conversation
-    // re-subscribe when resumed=true to prevent infinite loop (server sends
-    // streaming_start on subscribe when activeExecutions exists, which would
-    // trigger another subscribe here, looping forever)
     if (this.wsManager.isConnected) {
       this.wsManager.subscribeToSession(data.sessionId);
       if (!data.resumed) {
@@ -845,8 +753,6 @@ class AgentGUIClient {
       }
     }
 
-    // If this streaming event is for a different conversation than what we are viewing,
-    // just track the state but do not modify the DOM or start polling
     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);
@@ -854,7 +760,6 @@ class AgentGUIClient {
       this.updateBusyPromptArea(data.conversationId);
       this.emit('streaming:start', data);
 
-      // Auto-load if no conversation is currently selected (e.g. server resumed on startup)
       if (!this.state.currentConversation && !this._isLoadingConversation) {
         this._isLoadingConversation = true;
         this.loadConversationMessages(data.conversationId).finally(() => {
@@ -874,7 +779,6 @@ class AgentGUIClient {
     };
     this.state.sessionEvents = [];
 
-    // Update URL with session ID during streaming
     this.updateUrlForConversation(data.conversationId, data.sessionId);
 
     if (this.wsManager.isConnected) {
@@ -939,13 +843,10 @@ class AgentGUIClient {
       }
     }, 1000);
 
-    // Reset rendered block seq tracker for this session
     this._renderedSeqs[data.sessionId] = new Set();
 
-    // Show queue/steer UI when streaming starts (for busy prompt)
     this.showStreamingPromptButtons();
 
-    // IMMUTABLE: Prompt area remains enabled - user can queue/steer messages
     this.emit('streaming:start', data);
   }
 
@@ -968,7 +869,6 @@ class AgentGUIClient {
   _handleStreamingProgressInner(data) {
     if (!data.block || !data.sessionId) return;
 
-    // Deduplicate by seq number to guarantee exactly-once rendering
     const seen = this._renderedSeqs[data.sessionId] || (this._renderedSeqs[data.sessionId] = new Set());
     if (data.seq !== undefined) {
       if (seen.has(data.seq)) return;
@@ -977,12 +877,10 @@ class AgentGUIClient {
 
     const block = data.block;
 
-    // Cache block for background conversations (all 50 cached convs, not just active)
     const convId = data.conversationId;
     if (convId) {
       let entry = this._bgCache.get(convId);
       if (!entry) {
-        // Evict oldest if at capacity
         if (this._bgCache.size >= this.BG_CACHE_MAX) {
           const oldestKey = this._bgCache.keys().next().value;
           this._bgCache.delete(oldestKey);
@@ -993,7 +891,6 @@ class AgentGUIClient {
       if (data.seq === undefined || !entry.seqSet.has(data.seq)) {
         if (data.seq !== undefined) entry.seqSet.add(data.seq);
         entry.sessionId = data.sessionId;
-        // Store seq alongside packed data so _flushBgCache can dedup against _renderedSeqs
         try {
           const packed = typeof msgpackr !== 'undefined' ? msgpackr.pack(block) : block;
           entry.items.push({ seq: data.seq, packed });
@@ -1001,7 +898,6 @@ class AgentGUIClient {
       }
     }
 
-    // Only render for the currently-visible session
     if (this.state.currentSession?.id !== data.sessionId) return;
 
     const streamingEl = document.getElementById(`streaming-${data.sessionId}`);
@@ -1085,7 +981,6 @@ class AgentGUIClient {
         return this.escapeHtml(part.content);
       }).join('');
     }
-    // Fallback for unknown block types: show formatted key-value pairs
     const fieldsHtml = Object.entries(block)
       .filter(([key]) => key !== 'type')
       .map(([key, value]) => {
@@ -1147,14 +1042,12 @@ class AgentGUIClient {
     this._clearThinkingCountdown();
     if (this._elapsedTimer) { clearInterval(this._elapsedTimer); this._elapsedTimer = null; }
 
-    // Hide stop and inject buttons on error
     if (this.ui.stopButton) this.ui.stopButton.classList.remove('visible');
     if (this.ui.injectButton) this.ui.injectButton.classList.remove('visible');
     if (this.ui.sendButton) this.ui.sendButton.style.display = '';
 
     const conversationId = data.conversationId || this.state.currentSession?.conversationId;
 
-    // If this event is for a conversation we are NOT currently viewing, just track state
     if (conversationId && this.state.currentConversation?.id !== conversationId) {
       this._dbg('Streaming error for non-active conversation:', conversationId);
       this._setConvStreaming(conversationId, false);
@@ -1166,11 +1059,9 @@ class AgentGUIClient {
     this._setConvStreaming(conversationId, false);
     this.updateBusyPromptArea(conversationId);
 
-    // Clear queue indicator on error
     const queueEl = document.querySelector('.queue-indicator');
     if (queueEl) queueEl.remove();
 
-    // If this is a premature ACP end, render distinct warning block
     if (data.isPrematureEnd) {
       this.renderer.queueEvent({
         type: 'streaming_error',
@@ -1186,7 +1077,6 @@ class AgentGUIClient {
 
     const sessionId = data.sessionId || this.state.currentSession?.id;
 
-    // Remove all orphaned streaming indicators (handles case where session never started)
     const outputEl2 = document.getElementById('output');
     if (outputEl2) {
       outputEl2.querySelectorAll('.streaming-indicator').forEach(ind => {
@@ -1201,7 +1091,6 @@ class AgentGUIClient {
       if (indicator) {
         indicator.innerHTML = `<span style="color:var(--color-error);">Error: ${this.escapeHtml(data.error || 'Unknown error')}</span>`;
       }
-      // Remove all thinking blocks on error
       streamingEl.querySelectorAll('.block-thinking').forEach(block => block.remove());
     } else {
       const outputEl3 = document.getElementById('output');
@@ -1244,24 +1133,19 @@ class AgentGUIClient {
 
     const sessionId = data.sessionId || this.state.currentSession?.id;
 
-    // Unsubscribe from session to prevent subscription leak
     if (sessionId && this.wsManager) {
       try {
         this.wsManager.unsubscribeFromSession(sessionId);
       } catch (e) {
-        // Session may not exist, ignore
       }
     }
 
-    // Clear queue indicator when streaming completes
     const queueEl = document.querySelector('.queue-indicator');
     if (queueEl) queueEl.remove();
 
-    // Remove ALL streaming indicators from the entire messages container
     const outputEl2 = document.getElementById('output');
     if (outputEl2) {
       outputEl2.querySelectorAll('.streaming-indicator').forEach(ind => ind.remove());
-      // Remove session start/complete blocks that clutter the chat
       outputEl2.querySelectorAll('.event-streaming-start, .event-streaming-complete').forEach(block => block.remove());
     }
     const streamingEl = document.getElementById(`streaming-${sessionId}`);
@@ -1270,7 +1154,6 @@ class AgentGUIClient {
       const prevTextEl = streamingEl.querySelector('.streaming-text-current');
       if (prevTextEl) prevTextEl.classList.remove('streaming-text-current');
 
-      // Remove all thinking blocks (block-thinking elements)
       streamingEl.querySelectorAll('.block-thinking').forEach(block => block.remove());
 
       const ts = document.createElement('div');
@@ -1283,7 +1166,6 @@ class AgentGUIClient {
       this.saveScrollPosition(conversationId);
     }
 
-    // Recover any blocks missed during streaming (e.g. WS reconnects)
     this._recoverMissedChunks().catch(err => {
       console.warn('Chunk recovery failed:', err.message);
     });
@@ -1308,9 +1190,6 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Handle conversation created
-   */
   handleConversationCreated(data) {
     if (data.conversation) {
       if (this.state.conversations.some(c => c.id === data.conversation.id)) {
@@ -1329,7 +1208,6 @@ class AgentGUIClient {
 
     this._dbg('[SYNC] message_created:', { msgId: data.message.id, role: data.message.role, convId: data.conversationId });
 
-    // Update messageCount in current conversation state for user messages
     if (data.message.role === 'user' && this.state.currentConversation) {
       this.state.currentConversation.messageCount = (this.state.currentConversation.messageCount || 0) + 1;
     }
@@ -1346,7 +1224,6 @@ class AgentGUIClient {
     }
 
     if (data.message.role === 'user') {
-      // Find pending message by matching content to avoid duplicates
       const pending = outputEl.querySelector('.message-sending');
       if (pending) {
         pending.id = '';
@@ -1360,7 +1237,6 @@ class AgentGUIClient {
         this.emit('message:created', data);
         return;
       }
-      // Also check for pending ID (in case message-sending was already removed by _confirmOptimisticMessage)
       const pendingById = outputEl.querySelector('[id^="pending-"]');
       if (pendingById) {
         pendingById.id = '';
@@ -1373,7 +1249,6 @@ class AgentGUIClient {
         this.emit('message:created', data);
         return;
       }
-      // Check if a user message with this ID already exists (prevents duplicate on race condition)
       const existingMsg = outputEl.querySelector(`[data-msg-id="${data.message.id}"]`);
       if (existingMsg) {
         this.emit('message:created', data);
@@ -1397,11 +1272,9 @@ class AgentGUIClient {
   }
 
   handleConversationUpdated(data) {
-    // Update current conversation metadata if this is the active conversation
     if (data.conversation && data.conversation.id === this.state.currentConversation?.id) {
       this.state.currentConversation = data.conversation;
     }
-    // Emit event for sidebar/other listeners
     this.emit('conversation:updated', data);
   }
 
@@ -1418,8 +1291,6 @@ class AgentGUIClient {
 
   handleQueueItemDequeued(data) {
     if (data.conversationId !== this.state.currentConversation?.id) return;
-    // Item was dequeued and execution started - remove from queue indicator
-    // and update queue display
     this.fetchAndRenderQueue(data.conversationId);
   }
 
@@ -1579,9 +1450,6 @@ class AgentGUIClient {
     return parts;
   }
 
-  /**
-   * Render a markdown code block part
-   */
   renderCodeBlock(language, code) {
     if (language.toLowerCase() === 'html') {
       return `
@@ -1600,9 +1468,6 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Render message content based on type
-   */
   renderMessageContent(content) {
     if (typeof content === 'string') {
       if (this.isHtmlContent(content)) {
@@ -1633,7 +1498,6 @@ class AgentGUIClient {
               }
             });
           } else if (block.type === 'code_block') {
-            // Render HTML code blocks as actual HTML elements
             if (block.language === 'html') {
               html += `
                 <div class="message-code">
@@ -1702,7 +1566,6 @@ class AgentGUIClient {
       html += '</div>';
       return html;
     } else {
-      // Fallback for non-array content: format as key-value pairs
       if (typeof content === 'object' && content !== null) {
         const fieldsHtml = Object.entries(content)
           .map(([key, value]) => {
@@ -1734,7 +1597,6 @@ class AgentGUIClient {
 
     const pendingId = 'pending-' + Date.now() + '-' + Math.random().toString(36).substr(2, 6);
 
-    // Conv machine is authoritative: check machine state for optimistic message gating
     const isStreaming = this._convIsStreaming(this.state.currentConversation?.id);
     if (!isStreaming) {
       this._showOptimisticMessage(pendingId, savedPrompt);
@@ -1764,7 +1626,6 @@ class AgentGUIClient {
         this.lockAgentAndModel(agentId, model);
         await this.streamToConversation(conv.id, savedPrompt, agentId, model, subAgent);
         this.clearDraft(conv.id);
-        // Only confirm optimistic message if it was shown (not queued)
         if (!isStreaming) {
           this._confirmOptimisticMessage(pendingId);
         }
@@ -1792,7 +1653,6 @@ class AgentGUIClient {
       }
     } catch (error) {
       console.error('Execution error:', error);
-      // Only fail optimistic message if it was shown
       if (!isStreaming) {
         this._failOptimisticMessage(pendingId, savedPrompt, error.message);
       }
@@ -1845,7 +1705,6 @@ class AgentGUIClient {
     }
   }
 
-  // Flush background-cached blocks into the active streaming container
   _flushBgCache(conversationId, sessionId) {
     const entry = this._bgCache.get(conversationId);
     if (!entry || entry.items.length === 0) return;
@@ -1858,7 +1717,6 @@ class AgentGUIClient {
 
     const seenSeqs = this._renderedSeqs[sessionId] || (this._renderedSeqs[sessionId] = new Set());
     for (const item of entry.items) {
-      // Skip blocks already rendered (dedup by seq)
       if (item.seq !== undefined && seenSeqs.has(item.seq)) continue;
       try {
         const block = (typeof msgpackr !== 'undefined' && item.packed instanceof Uint8Array)
@@ -1876,13 +1734,8 @@ class AgentGUIClient {
 
   async _recoverMissedChunks() {
     if (!this.state.currentSession?.id) return;
-    // Note: do NOT gate on streamingConversations - this is called from handleStreamingComplete
-    // where we've already removed the conversation from the set. Allow recovery always.
 
     const sessionId = this.state.currentSession.id;
-    // Use lastSeq=-1 when no WS messages received yet (fresh load/full disconnect).
-    // Server query is `sequence > sinceSeq`, so -1 returns all chunks from seq 0.
-    // _renderedSeqs dedup prevents double-rendering anything already shown.
     const lastSeq = this.wsManager.getLastSeq(sessionId);
 
     try {
@@ -1991,7 +1844,6 @@ class AgentGUIClient {
         latencyTrend: self.wsManager?.latency?.trend || null
       }),
 
-      // Sync-to-display debugging
       getSyncState: () => ({
         currentConversation: self.state.currentConversation,
         isStreaming: self._convIsStreaming(self.state.currentConversation?.id),
@@ -2006,7 +1858,6 @@ class AgentGUIClient {
         rendererEventHistoryLength: self.renderer?.eventHistory?.length || 0,
       }),
 
-      // Message DOM state
       getMessageState: () => {
         const output = document.querySelector('.conversation-messages');
         if (!output) return { error: 'No conversation output found' };
@@ -2018,21 +1869,14 @@ class AgentGUIClient {
     };
   }
 
-  /**
-   * Show native loading spinner on document element
-   */
   showLoadingSpinner() {
     document.documentElement.style.pointerEvents = 'auto';
-    // Show native CSS loading indicator (not removing, just visual cue)
     const indicator = document.querySelector('[data-model-dl-indicator]');
     if (indicator && !indicator.classList.contains('visible')) {
       indicator.classList.add('visible');
     }
   }
 
-  /**
-   * Hide native loading spinner
-   */
   hideLoadingSpinner() {
     const indicator = document.querySelector('[data-model-dl-indicator]');
     if (indicator && indicator.classList.contains('visible')) {
@@ -2040,13 +1884,9 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Show welcome screen when no conversation is selected
-   */
   _showWelcomeScreen() {
     const outputEl = document.getElementById('output');
     if (!outputEl) return;
-    // Build agent options from loaded agents list
     const agents = this.state.agents || [];
     const agentOptions = agents.map(a =>
       `<option value="${this.escapeHtml(a.id)}">${this.escapeHtml(a.name.split(/[\s\-]+/)[0])}</option>`
@@ -2077,7 +1917,6 @@ class AgentGUIClient {
         </div>
       </div>
     `;
-    // Sync welcome agent select with the bottom bar cli selector
     const welcomeSel = document.getElementById('welcomeAgentSelect');
     if (welcomeSel) {
       if (this.ui.cliSelector) welcomeSel.value = this.ui.cliSelector.value;
@@ -2180,7 +2019,6 @@ class AgentGUIClient {
       blockFrag.appendChild(el);
     }
     blocksEl.appendChild(blockFrag);
-    // Build tool-use element index once for O(1) lookups instead of O(n) querySelectorAll per chunk
     const toolUseIndex = new Map();
     blocksEl.querySelectorAll('.block-tool-use[data-tool-use-id]').forEach(el => toolUseIndex.set(el.dataset.toolUseId, el));
     for (const chunk of deferred) {
@@ -2316,9 +2154,6 @@ class AgentGUIClient {
     this.scrollToBottom();
   }
 
-  /**
-   * Load agents
-   */
   async loadAgents() {
     return this._dedupedFetch('loadAgents', async () => {
       try {
@@ -2367,13 +2202,11 @@ class AgentGUIClient {
           .join('');
         this.ui.agentSelector.style.display = 'inline-block';
         this._dbg(`[Agent Selector] Loaded ${subAgents.length} sub-agents for ${cliAgentId}`);
-        // Auto-select first sub-agent and load its models
         const firstSubAgentId = subAgents[0].id;
         this.ui.agentSelector.value = firstSubAgentId;
         this.loadModelsForAgent(cliAgentId); // models keyed to parent agent
       } else {
         this._dbg(`[Agent Selector] No sub-agents found for ${cliAgentId}`);
-        // Load models for the CLI agent itself (fallback for agents without sub-agents)
         const cliToAcpMap = {
           'cli-opencode': 'opencode',
           'cli-gemini': 'gemini',
@@ -2384,9 +2217,7 @@ class AgentGUIClient {
         this.loadModelsForAgent(acpAgentId);
       }
     } catch (err) {
-      // No sub-agents available for this CLI tool — keep hidden
       console.warn(`[Agent Selector] Failed to load sub-agents for ${cliAgentId}:`, err.message);
-      // Fallback: load models for the corresponding ACP agent
       const cliToAcpMap = {
         'cli-opencode': 'opencode',
         'cli-gemini': 'gemini',
@@ -2474,10 +2305,6 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Apply agent and model selection based on conversation state
-   * Consolidates duplicate logic for cached and fresh conversation loads
-   */
   applyAgentAndModelSelection(conversation, hasActivity) {
     const agentId = conversation.agentId || conversation.agentType || null;
     const model = conversation.model || null;
@@ -2513,11 +2340,7 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Load conversations
-   */
   async loadConversations() {
-    // Return cached conversations if still fresh
     const now = Date.now();
     if (this.conversationListCache.data.length > 0 &&
         (now - this.conversationListCache.timestamp) < this.conversationListCache.ttl) {
@@ -2529,7 +2352,6 @@ class AgentGUIClient {
       try {
         const { conversations } = await window.wsClient.rpc('conv.ls');
         this.state.conversations = conversations;
-        // Update cache
         this.conversationListCache.data = conversations;
         this.conversationListCache.timestamp = Date.now();
         return conversations;
@@ -2540,9 +2362,6 @@ class AgentGUIClient {
     });
   }
 
-  /**
-   * Update connection status UI
-   */
   updateConnectionStatus(status) {
     if (this.ui.statusIndicator) {
       this.ui.statusIndicator.dataset.status = status;
@@ -2578,7 +2397,6 @@ class AgentGUIClient {
     const label = indicator.querySelector('.connection-label');
     if (!dot || !label) return;
 
-    // Check if model download is in progress
     if (this._modelDownloadInProgress) {
       dot.className = 'connection-dot downloading';
       const progress = this._modelDownloadProgress;
@@ -2660,9 +2478,6 @@ class AgentGUIClient {
     setTimeout(() => { if (tooltip.parentNode) tooltip.remove(); }, 5000);
   }
 
-  /**
-   * Update metrics display
-   */
   updateMetrics(metrics) {
     const metricsDisplay = document.querySelector('[data-metrics]');
     if (metricsDisplay && metrics) {
@@ -2670,9 +2485,6 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Disable UI controls during execution - prevents double-sends
-   */
   disableControls() {
     if (this.ui.sendButton) this.ui.sendButton.disabled = true;
     if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'DISABLED' });
@@ -2686,17 +2498,11 @@ class AgentGUIClient {
     this.updateBusyPromptArea(this.state.currentConversation?.id);
   }
 
-  /**
-   * Toggle theme
-   */
   toggleTheme() {
     const isDark = document.documentElement.classList.toggle('dark');
     localStorage.setItem('theme', isDark ? 'dark' : 'light');
   }
 
-  /**
-   * Create a new empty conversation
-   */
   async createNewConversation(workingDirectory, title) {
     try {
       const agentId = this.getEffectiveAgentId();
@@ -2750,16 +2556,10 @@ class AgentGUIClient {
     this.conversationCache.delete(conversationId);
   }
 
-  /**
-   * PHASE 2: Create a new load request with lifetime tracking
-   * Assigns unique requestId, tracks in _loadInProgress, returns abort signal
-   * Automatically cancels previous loads to this conversation
-   */
   _makeLoadRequest(conversationId) {
     const requestId = ++this._currentRequestId;
     const abortController = new AbortController();
 
-    // Cancel previous request to this conversation
     if (this._loadInProgress[conversationId]) {
       const prevReq = this._loadInProgress[conversationId];
       try {
@@ -2777,11 +2577,6 @@ class AgentGUIClient {
     return { requestId, abortController: abortController.signal };
   }
 
-  /**
-   * PHASE 2: Verify request is still current before rendering
-   * Returns true if requestId matches current load for this conversation
-   * Returns false if newer request arrived, or request was cancelled
-   */
   _verifyRequestId(conversationId, requestId) {
     const current = this._loadInProgress[conversationId];
     if (!current) return false;
@@ -2789,9 +2584,6 @@ class AgentGUIClient {
     return true;
   }
 
-  /**
-   * PHASE 2: Complete/cleanup a load request
-   */
   _completeLoadRequest(conversationId, requestId) {
     const req = this._loadInProgress[conversationId];
     if (req && req.requestId === requestId) {
@@ -2820,8 +2612,6 @@ class AgentGUIClient {
       if (this.ui.messageInput) {
         this.ui.messageInput.value = '';
         this.ui.messageInput.style.height = 'auto';
-        // Note: prompt disabled state will be set immutably based on shouldResumeStreaming
-        // after conversation data loads, don't set here
       }
 
       if (this.ui.stopButton) this.ui.stopButton.classList.remove('visible');
@@ -2875,7 +2665,6 @@ class AgentGUIClient {
 
       if (this._lazyObserver) { this._lazyObserver.disconnect(); this._lazyObserver = null; }
       this._showSkeletonLoading(conversationId);
-      // Yield to let skeleton paint before blocking on RPC
       await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
 
       let fullData;
@@ -2933,7 +2722,6 @@ class AgentGUIClient {
       const hasActivity = (allMessages && allMessages.length > 0) || isActivelyStreaming || latestSession || this._convIsStreaming(conversationId);
       this.applyAgentAndModelSelection(conversation, hasActivity);
 
-      // Parse chunk data and fetch queue in parallel
       const queuePromise = window.wsClient.rpc('q.ls', { id: conversationId }).catch(() => ({ queue: [] }));
       const chunks = (rawChunks || []).map(chunk => ({
         ...chunk,
@@ -3002,7 +2790,6 @@ class AgentGUIClient {
         if (chunks.length > 0) {
           const activeSessionId = (shouldResumeStreaming && latestSession) ? latestSession.id : null;
           performance.mark(`conv-render-start:${conversationId}`);
-          // Yield before heavy render to let header paint
           await new Promise(r => requestAnimationFrame(r));
           if (!convSignal.aborted) this._renderConversationContent(messagesEl, chunks, userMessages, activeSessionId);
           performance.mark(`conv-render-complete:${conversationId}`);
@@ -3043,16 +2830,13 @@ class AgentGUIClient {
 
           this.updateUrlForConversation(conversationId, latestSession.id);
 
-          // Flush any blocks accumulated in the background cache while this conv wasn't active
           this._flushBgCache(conversationId, latestSession.id);
 
-          // IMMUTABLE: Prompt remains enabled - syncPromptState will set correct state
           this.syncPromptState(conversationId);
         } else {
           this.syncPromptState(conversationId);
         }
 
-        // Re-enable send button after skeleton loading completes
         if (this.ui.sendButton) {
           this.ui.sendButton.disabled = false;
         }
@@ -3060,14 +2844,12 @@ class AgentGUIClient {
         this.restoreScrollPosition(conversationId);
         this.setupScrollUpDetection(conversationId);
 
-        // Fetch and display queue items so queued messages show in yellow blocks, not as user messages
         this.fetchAndRenderQueue(conversationId);
 
       }
     } catch (error) {
       if (error.name === 'AbortError') return;
       console.error('Failed to load conversation messages:', error);
-      // Resume from last successful conversation if available, or fall back to any available conversation
       const fallbackConv = prevConversationId ? prevConversationId : availableFallback?.id;
       if (fallbackConv && fallbackConv !== conversationId) {
         this._dbg('Resuming from fallback conversation due to error:', fallbackConv);
@@ -3263,16 +3045,10 @@ class AgentGUIClient {
     return messages.map(msg => `<div class="message message-${msg.role}"><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></div>`).join('');
   }
 
-  /**
-   * Escape HTML to prevent XSS
-   */
   escapeHtml(text) {
     return window._escHtml(text);
   }
 
-  /**
-   * Show error message
-   */
   showError(message) {
     console.error(message);
     if (window.UIDialog) {
@@ -3280,9 +3056,6 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Add event listener
-   */
   on(event, callback) {
     if (!this.eventHandlers[event]) {
       this.eventHandlers[event] = [];
@@ -3290,9 +3063,6 @@ class AgentGUIClient {
     this.eventHandlers[event].push(callback);
   }
 
-  /**
-   * Emit event
-   */
   emit(event, data) {
     if (this.eventHandlers[event]) {
       this.eventHandlers[event].forEach(callback => {
@@ -3305,9 +3075,6 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Get current selected agent
-   */
   getEffectiveAgentId() {
     return this.ui.cliSelector?.value || null;
   }
@@ -3332,16 +3099,10 @@ class AgentGUIClient {
     window.wsClient.rpc('conv.upd', { id: convId, agentType: agentId, subAgent: subAgent || undefined, model: model || undefined }).catch(() => {});
   }
 
-  /**
-   * Get current selected model
-   */
   getCurrentModel() {
     return this.ui.modelSelector?.value || null;
   }
 
-  /**
-   * Get metrics
-   */
   getMetrics() {
     return {
       renderer: this.renderer.getMetrics(),
@@ -3351,9 +3112,6 @@ class AgentGUIClient {
     };
   }
 
-  /**
-   * Save draft prompt for current conversation
-   */
   saveDraftPrompt() {
     const convId = this.state.currentConversation?.id;
     if (convId && this.ui.messageInput) {
@@ -3365,9 +3123,6 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Restore draft prompt for conversation
-   */
   restoreDraftPrompt(conversationId) {
     if (!this.ui.messageInput) return;
 
@@ -3380,22 +3135,15 @@ class AgentGUIClient {
     this.ui.messageInput.value = draft;
   }
 
-  /**
-   * Clear draft for conversation
-   */
   clearDraft(conversationId) {
     this.draftPrompts.delete(conversationId);
     localStorage.removeItem(`draft-${conversationId}`);
   }
 
-  /**
-   * Update send button state based on WebSocket connection
-   */
   updateSendButtonState() {
     if (this.ui.sendButton) {
       this.ui.sendButton.disabled = !this.wsManager.isConnected;
     }
-    // Also disable queue and inject buttons if disconnected
     if (this.ui.injectButton && this.ui.injectButton.classList.contains('visible')) {
       this.ui.injectButton.disabled = !this.wsManager.isConnected;
     }
@@ -3404,17 +3152,9 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Disable prompt area - NEVER CALLED. Prompt must always be enabled.
-   * Keeping method for backward compatibility but it does nothing.
-   */
   disablePromptArea() {
-    // NEVER disable messageInput - prompt must always be writable
   }
 
-  /**
-   * Enable prompt area (input and inject button) on connect
-   */
   enablePromptArea() {
     if (this.ui.messageInput) {
       this.ui.messageInput.disabled = false;
@@ -3423,9 +3163,6 @@ class AgentGUIClient {
     if (injectBtn) injectBtn.disabled = false;
   }
 
-  /**
-   * Show queue/inject buttons when streaming (busy prompt state)
-   */
   showStreamingPromptButtons() {
     if (this.ui.injectButton) {
       this.ui.injectButton.classList.add('visible');
@@ -3437,18 +3174,12 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Ensure prompt area is always enabled and shows queue/inject when agent streaming
-   */
   ensurePromptAreaAlwaysEnabled() {
     if (this.ui.messageInput) {
       this.ui.messageInput.disabled = false;
     }
   }
 
-  /**
-   * Cleanup resources
-   */
   destroy() {
 
     this.renderer.destroy();
@@ -3462,10 +3193,8 @@ window.__convPerfMetrics = () => {
   return entries.map(e => ({ name: e.name, ms: Math.round(e.duration) }));
 };
 
-// Global instance
 let agentGUIClient = null;
 
-// Initialize on DOM ready
 document.addEventListener('DOMContentLoaded', async () => {
   try {
     agentGUIClient = new AgentGUIClient();
@@ -3477,7 +3206,6 @@ document.addEventListener('DOMContentLoaded', async () => {
   }
 });
 
-// Export for testing
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = AgentGUIClient;
 }