agentgui 1.0.829 → 1.0.831

package/static/js/client-streaming2.js

@@ -0,0 +1,116 @@
+Object.assign(AgentGUIClient.prototype, {
+  async handleStreamingResumed(data) {
+    this._dbg('Streaming resumed:', data);
+    const conv = this.state.currentConversation || { id: data.conversationId };
+    await this.handleStreamingStart({
+      type: 'streaming_start',
+      sessionId: data.sessionId,
+      conversationId: data.conversationId,
+      agentId: conv.agentType || conv.agentId || 'claude-code',
+      resumed: true,
+      timestamp: data.timestamp
+    });
+  },
+
+
+  handleStreamingProgress(data) {
+    try { return this._handleStreamingProgressInner(data); } catch (e) { console.error('[render-error] streaming progress:', e); }
+  },
+
+  _handleStreamingProgressInner(data) {
+    if (!data.block || !data.sessionId) return;
+
+    const seen = this._renderedSeqs[data.sessionId] || (this._renderedSeqs[data.sessionId] = new Set());
+    if (data.seq !== undefined) {
+      if (seen.has(data.seq)) return;
+      seen.add(data.seq);
+    }
+
+    const block = data.block;
+
+    const convId = data.conversationId;
+    if (convId) {
+      let entry = this._bgCache.get(convId);
+      if (!entry) {
+        if (this._bgCache.size >= this.BG_CACHE_MAX) {
+          const oldestKey = this._bgCache.keys().next().value;
+          this._bgCache.delete(oldestKey);
+        }
+        entry = { items: [], seqSet: new Set(), sessionId: data.sessionId };
+        this._bgCache.set(convId, entry);
+      }
+      if (data.seq === undefined || !entry.seqSet.has(data.seq)) {
+        if (data.seq !== undefined) entry.seqSet.add(data.seq);
+        entry.sessionId = data.sessionId;
+        try {
+          const packed = typeof msgpackr !== 'undefined' ? msgpackr.pack(block) : block;
+          entry.items.push({ seq: data.seq, packed });
+        } catch (_) { entry.items.push({ seq: data.seq, packed: block }); }
+      }
+    }
+
+    if (this.state.currentSession?.id !== data.sessionId) return;
+
+    const streamingEl = document.getElementById(`streaming-${data.sessionId}`);
+    if (!streamingEl) return;
+    const blocksEl = streamingEl.querySelector('.streaming-blocks');
+    if (!blocksEl) return;
+
+    if (block.type === 'tool_result') {
+      const tid = block.tool_use_id;
+      const toolUseEl = (tid && blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`))
+        || (blocksEl.lastElementChild?.classList?.contains('block-tool-use') ? blocksEl.lastElementChild : null);
+      if (toolUseEl) {
+        this.renderer.mergeResultIntoToolUse(toolUseEl, block);
+        this.scrollToBottom();
+        return;
+      }
+    }
+
+    if (block.type === 'tool_status') {
+      const tid = block.tool_use_id;
+      const toolUseEl = tid && blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`);
+      if (toolUseEl) {
+        const summary = toolUseEl.querySelector(':scope > summary');
+        if (summary) {
+          let badge = summary.querySelector('.folded-tool-status-live');
+          if (!badge) { badge = document.createElement('span'); badge.className = 'folded-tool-status-live'; summary.appendChild(badge); }
+          const isRunning = block.status === 'in_progress';
+          badge.style.cssText = 'margin-left:auto;font-size:0.65rem;opacity:0.7;display:inline-flex;align-items:center;gap:0.25rem';
+          badge.innerHTML = (isRunning ? '<span class="animate-spin" style="display:inline-block;width:0.6rem;height:0.6rem;border:1.5px solid var(--color-border);border-top-color:var(--color-info);border-radius:50%"></span>' : '')
+            + '<span>' + (isRunning ? 'Running' : (block.status || '')) + '</span>';
+        }
+        this.scrollToBottom();
+        return;
+      }
+    }
+
+    if (block.type === 'hook_progress') {
+      const hookEvent = (block.hookEvent || '').split(':')[0];
+      if (hookEvent === 'PreToolUse' || hookEvent === 'PostToolUse') {
+        const lastTool = blocksEl.querySelector('.block-tool-use:last-of-type') || blocksEl.lastElementChild;
+        if (lastTool?.classList?.contains('block-tool-use')) {
+          const summary = lastTool.querySelector(':scope > summary');
+          if (summary) {
+            let hookBadge = summary.querySelector('.folded-tool-hook');
+            if (!hookBadge) { hookBadge = document.createElement('span'); hookBadge.className = 'folded-tool-hook'; hookBadge.style.cssText = 'margin-left:0.375rem;font-size:0.6rem;opacity:0.4;font-weight:400'; summary.appendChild(hookBadge); }
+            hookBadge.textContent = block.hookEvent?.split(':').pop() || hookEvent;
+          }
+          return;
+        }
+      }
+      return;
+    }
+
+    if (block.type === 'result' && block.total_cost_usd) {
+      this._sessionCost = (this._sessionCost || 0) + block.total_cost_usd;
+    }
+
+    const el = this.renderer.renderBlock(block, data, blocksEl);
+    if (el) {
+      blocksEl.appendChild(el);
+      this.scrollToBottom();
+    }
+  }
+
+});

package/static/js/client-streaming3.js

@@ -0,0 +1,153 @@
+Object.assign(AgentGUIClient.prototype, {
+  renderBlockContent(block) {
+    if (block.type === 'text' && block.text) {
+      const text = block.text;
+      if (this.isHtmlContent(text)) {
+        return `<div class="html-content">${this.sanitizeHtml(text)}</div>`;
+      }
+      const parts = this.parseMarkdownCodeBlocks(text);
+      if (parts.length === 1 && parts[0].type === 'text') {
+        return this.escapeHtml(text);
+      }
+      return parts.map(part => {
+        if (part.type === 'html') {
+          return `<div class="html-content">${this.sanitizeHtml(part.content)}</div>`;
+        } else if (part.type === 'code') {
+          return this.renderCodeBlock(part.language, part.code);
+        }
+        return this.escapeHtml(part.content);
+      }).join('');
+    }
+    const fieldsHtml = Object.entries(block)
+      .filter(([key]) => key !== 'type')
+      .map(([key, value]) => {
+        let displayValue = typeof value === 'string' ? value : JSON.stringify(value);
+        if (displayValue.length > 100) displayValue = displayValue.substring(0, 100) + '...';
+        return `<div style="font-size:0.75rem;margin-bottom:0.25rem"><span style="font-weight:600">${this.escapeHtml(key)}:</span> <code>${this.escapeHtml(displayValue)}</code></div>`;
+      }).join('');
+    return `<div style="padding:0.5rem;background:var(--color-bg-secondary);border-radius:0.375rem;border:1px solid var(--color-border)"><div style="font-size:0.7rem;font-weight:600;text-transform:uppercase;margin-bottom:0.25rem">${this.escapeHtml(block.type)}</div>${fieldsHtml}</div>`;
+  },
+
+
+  scrollToBottom(force = false) {
+    const scrollContainer = document.getElementById('output-scroll');
+    if (!scrollContainer) return;
+    const distFromBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
+
+    if (this._userScrolledUp && !force) {
+      this._unseenCount = (this._unseenCount || 0) + 1;
+      this._showNewContentPill();
+      return;
+    }
+
+    if (!force && distFromBottom > 150) {
+      this._unseenCount = (this._unseenCount || 0) + 1;
+      this._showNewContentPill();
+      return;
+    }
+
+    scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    this._removeNewContentPill();
+    this._scrollAnimating = false;
+  },
+
+
+  _showNewContentPill() {
+    let pill = document.getElementById('new-content-pill');
+    const scrollContainer = document.getElementById('output-scroll');
+    if (!scrollContainer) return;
+    if (!pill) {
+      pill = document.createElement('button');
+      pill.id = 'new-content-pill';
+      pill.className = 'new-content-pill';
+      pill.addEventListener('click', () => {
+        scrollContainer.scrollTop = scrollContainer.scrollHeight;
+        this._removeNewContentPill();
+      });
+      scrollContainer.appendChild(pill);
+    }
+    pill.textContent = (this._unseenCount || 1) + ' new';
+  },
+
+
+  _removeNewContentPill() {
+    this._unseenCount = 0;
+    const pill = document.getElementById('new-content-pill');
+    if (pill) pill.remove();
+  },
+
+
+  handleStreamingError(data) {
+    console.error('Streaming error:', data);
+    if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'READY' });
+    this._clearThinkingCountdown();
+    if (this._elapsedTimer) { clearInterval(this._elapsedTimer); this._elapsedTimer = null; }
+
+    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 (conversationId && this.state.currentConversation?.id !== conversationId) {
+      this._dbg('Streaming error for non-active conversation:', conversationId);
+      this._setConvStreaming(conversationId, false);
+      this.updateBusyPromptArea(conversationId);
+      this.emit('streaming:error', data);
+      return;
+    }
+
+    this._setConvStreaming(conversationId, false);
+    this.updateBusyPromptArea(conversationId);
+
+    const queueEl = document.querySelector('.queue-indicator');
+    if (queueEl) queueEl.remove();
+
+    if (data.isPrematureEnd) {
+      this.renderer.queueEvent({
+        type: 'streaming_error',
+        isPrematureEnd: true,
+        exitCode: data.exitCode,
+        error: data.error,
+        stderrText: data.stderrText,
+        sessionId: data.sessionId,
+        conversationId: data.conversationId,
+        timestamp: data.timestamp || Date.now()
+      });
+    }
+
+    const sessionId = data.sessionId || this.state.currentSession?.id;
+
+    const outputEl2 = document.getElementById('output');
+    if (outputEl2) {
+      outputEl2.querySelectorAll('.streaming-indicator').forEach(ind => {
+        ind.innerHTML = `<span style="color:var(--color-error);">Error: ${this.escapeHtml(data.error || 'Unknown error')}</span>`;
+      });
+    }
+
+    const streamingEl = document.getElementById(`streaming-${sessionId}`);
+    if (streamingEl) {
+      streamingEl.classList.remove('streaming-message');
+      const indicator = streamingEl.querySelector('.streaming-indicator');
+      if (indicator) {
+        indicator.innerHTML = `<span style="color:var(--color-error);">Error: ${this.escapeHtml(data.error || 'Unknown error')}</span>`;
+      }
+      streamingEl.querySelectorAll('.block-thinking').forEach(block => block.remove());
+    } else {
+      const outputEl3 = document.getElementById('output');
+      const messagesEl3 = outputEl3 && outputEl3.querySelector('.conversation-messages');
+      if (messagesEl3 && data.error) {
+        const errDiv = document.createElement('div');
+        errDiv.className = 'message';
+        errDiv.style = 'padding:0.75rem;border:1px solid var(--color-error, #e53e3e);border-radius:4px;margin:0.5rem 0;';
+        errDiv.innerHTML = `<span style="color:var(--color-error, #e53e3e);">Error: ${this.escapeHtml(data.error)}</span>`;
+        messagesEl3.appendChild(errDiv);
+      }
+    }
+
+    this.unlockAgentAndModel();
+    this.enableControls();
+    this.emit('streaming:error', data);
+  }
+
+});

package/static/js/client-streaming4.js

@@ -0,0 +1,194 @@
+Object.assign(AgentGUIClient.prototype, {
+  handleStreamingComplete(data) {
+    this._dbg('Streaming completed:', data);
+    if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'READY' });
+    this._clearThinkingCountdown();
+    if (this._elapsedTimer) { clearInterval(this._elapsedTimer); this._elapsedTimer = null; }
+
+    const conversationId = data.conversationId || this.state.currentSession?.conversationId;
+    if (conversationId) this.invalidateCache(conversationId);
+
+    if (conversationId && this.state.currentConversation?.id !== conversationId) {
+      this._dbg('Streaming completed for non-active conversation:', conversationId);
+      this._setConvStreaming(conversationId, false);
+      this._dbg('[SYNC] streaming_complete - non-active conv:', { convId: conversationId, streamingCount: this.state.streamingConversations.size });
+      this.updateBusyPromptArea(conversationId);
+      this.emit('streaming:complete', data);
+      return;
+    }
+
+    this._setConvStreaming(conversationId, false);
+    this._dbg('[SYNC] streaming_complete - active conv:', { convId: conversationId, streamingCount: this.state.streamingConversations.size, interrupted: data.interrupted });
+    this.updateBusyPromptArea(conversationId);
+
+    const sessionId = data.sessionId || this.state.currentSession?.id;
+
+    if (sessionId && this.wsManager) {
+      try {
+        this.wsManager.unsubscribeFromSession(sessionId);
+      } catch (e) {
+      }
+    }
+
+    const queueEl = document.querySelector('.queue-indicator');
+    if (queueEl) queueEl.remove();
+
+    const outputEl2 = document.getElementById('output');
+    if (outputEl2) {
+      outputEl2.querySelectorAll('.streaming-indicator').forEach(ind => ind.remove());
+      outputEl2.querySelectorAll('.event-streaming-start, .event-streaming-complete').forEach(block => block.remove());
+    }
+    const streamingEl = document.getElementById(`streaming-${sessionId}`);
+    if (streamingEl) {
+      streamingEl.classList.remove('streaming-message');
+      const prevTextEl = streamingEl.querySelector('.streaming-text-current');
+      if (prevTextEl) prevTextEl.classList.remove('streaming-text-current');
+
+      streamingEl.querySelectorAll('.block-thinking').forEach(block => block.remove());
+
+      const ts = document.createElement('div');
+      ts.className = 'message-timestamp';
+      ts.textContent = new Date().toLocaleString();
+      streamingEl.appendChild(ts);
+    }
+
+    if (conversationId) {
+      this.saveScrollPosition(conversationId);
+    }
+
+    this._recoverMissedChunks().catch(err => {
+      console.warn('Chunk recovery failed:', err.message);
+    });
+
+    this.enableControls();
+    this.emit('streaming:complete', data);
+
+    this._promptPushIfWeOwnRemote();
+  },
+
+
+  async _promptPushIfWeOwnRemote() {
+    try {
+      const { ownsRemote, hasChanges, hasUnpushed, remoteUrl } = await window.wsClient.rpc('git.check');
+      if (ownsRemote && (hasChanges || hasUnpushed)) {
+        const conv = this.state.currentConversation;
+        if (conv) {
+          this.streamToConversation(conv.id, 'Push the changes to the remote repository.', conv.agentId);
+        }
+      }
+    } catch (e) {
+      console.warn('Auto-push check failed:', e);
+    }
+  },
+
+
+  handleConversationCreated(data) {
+    if (data.conversation) {
+      if (this.state.conversations.some(c => c.id === data.conversation.id)) {
+        return;
+      }
+      this.state.conversations.push(data.conversation);
+      this.emit('conversation:created', data.conversation);
+    }
+  },
+
+
+  handleMessageCreated(data) {
+    if (data.conversationId !== this.state.currentConversation?.id || !data.message) {
+      this.emit('message:created', data);
+      return;
+    }
+
+    this._dbg('[SYNC] message_created:', { msgId: data.message.id, role: data.message.role, convId: data.conversationId });
+
+    if (data.message.role === 'user' && this.state.currentConversation) {
+      this.state.currentConversation.messageCount = (this.state.currentConversation.messageCount || 0) + 1;
+    }
+
+    if (data.message.role === 'assistant' && this._convIsStreaming(data.conversationId)) {
+      this.emit('message:created', data);
+      return;
+    }
+
+    const outputEl = document.querySelector('.conversation-messages');
+    if (!outputEl) {
+      this.emit('message:created', data);
+      return;
+    }
+
+    if (data.message.role === 'user') {
+      const pending = outputEl.querySelector('.message-sending');
+      if (pending) {
+        pending.id = '';
+        pending.setAttribute('data-msg-id', data.message.id);
+        pending.classList.remove('message-sending');
+        const ts = pending.querySelector('.message-timestamp');
+        if (ts) {
+          ts.style.opacity = '1';
+          ts.textContent = new Date(data.message.created_at).toLocaleString();
+        }
+        this.emit('message:created', data);
+        return;
+      }
+      const pendingById = outputEl.querySelector('[id^="pending-"]');
+      if (pendingById) {
+        pendingById.id = '';
+        pendingById.setAttribute('data-msg-id', data.message.id);
+        const ts = pendingById.querySelector('.message-timestamp');
+        if (ts) {
+          ts.style.opacity = '1';
+          ts.textContent = new Date(data.message.created_at).toLocaleString();
+        }
+        this.emit('message:created', data);
+        return;
+      }
+      const existingMsg = outputEl.querySelector(`[data-msg-id="${data.message.id}"]`);
+      if (existingMsg) {
+        this.emit('message:created', data);
+        return;
+      }
+    }
+
+    outputEl.querySelectorAll('p.text-secondary').forEach(p => p.remove());
+    const safeRole = this.escapeHtml(data.message.role || 'user');
+    const safeId = this.escapeHtml(data.message.id || '');
+    const messageHtml = `
+      <div class="message message-${safeRole}" data-msg-id="${safeId}">
+        <div class="message-role">${safeRole.charAt(0).toUpperCase() + safeRole.slice(1)}</div>
+        ${this.renderMessageContent(data.message.content)}
+        <div class="message-timestamp">${new Date(data.message.created_at).toLocaleString()}</div>
+      </div>
+    `;
+    outputEl.insertAdjacentHTML('beforeend', messageHtml);
+    this.scrollToBottom();
+    this.emit('message:created', data);
+  },
+
+
+  handleConversationUpdated(data) {
+    if (data.conversation && data.conversation.id === this.state.currentConversation?.id) {
+      this.state.currentConversation = data.conversation;
+    }
+    this.emit('conversation:updated', data);
+  },
+
+
+  handleQueueStatus(data) {
+    if (typeof convMachineAPI !== 'undefined') convMachineAPI.send(data.conversationId, { type: 'QUEUE_UPDATE', queueLength: data.queueLength || 0 });
+    if (data.conversationId !== this.state.currentConversation?.id) return;
+    this.fetchAndRenderQueue(data.conversationId);
+  },
+
+
+  handleQueueUpdated(data) {
+    if (data.conversationId !== this.state.currentConversation?.id) return;
+    this.fetchAndRenderQueue(data.conversationId);
+  },
+
+
+  handleQueueItemDequeued(data) {
+    if (data.conversationId !== this.state.currentConversation?.id) return;
+    this.fetchAndRenderQueue(data.conversationId);
+  }
+
+});

package/static/js/client-ui-controls.js

@@ -0,0 +1,170 @@
+Object.assign(AgentGUIClient.prototype, {
+  _setupUIButtonEvents() {
+    this.ui.stopButton = document.getElementById('stopBtn');
+    this.ui.injectButton = document.getElementById('injectBtn');
+    this.ui.queueButton = document.getElementById('queueBtn');
+
+    if (this.ui.stopButton) {
+      this.ui.stopButton.addEventListener('click', async () => {
+        if (!this.state.currentConversation) return;
+        try {
+          const data = await window.wsClient.rpc('conv.cancel', { id: this.state.currentConversation.id });
+          this._dbg('Stop response:', data);
+        } catch (err) {
+          console.error('Failed to stop:', err);
+        }
+      });
+    }
+
+    if (this.ui.injectButton) {
+      this.ui.injectButton.addEventListener('click', async () => {
+        if (!this.state.currentConversation) return;
+        const isStreaming = this._convIsStreaming(this.state.currentConversation.id);
+
+        if (isStreaming) {
+          const message = this.ui.messageInput?.value || '';
+          if (!message.trim()) {
+            this.showError('Please enter a message to steer');
+            return;
+          }
+
+          const steerMsg = message;
+          if (this.ui.messageInput) {
+            this.ui.messageInput.value = '';
+            this.ui.messageInput.style.height = 'auto';
+          }
+
+          window.wsClient.rpc('conv.steer', { id: this.state.currentConversation.id, content: steerMsg })
+            .catch(err => {
+              console.error('Failed to steer:', err);
+              this.showError('Failed to steer: ' + err.message);
+            });
+        } else {
+          const instructions = await window.UIDialog.prompt('Enter instructions to inject into the running agent:', '', 'Inject Instructions');
+          if (!instructions) return;
+          window.wsClient.rpc('conv.inject', { id: this.state.currentConversation.id, content: instructions })
+            .catch(err => console.error('Failed to inject:', err));
+        }
+      });
+    }
+
+    if (this.ui.queueButton) {
+      this.ui.queueButton.addEventListener('click', async () => {
+        if (!this.state.currentConversation) return;
+        const message = this.ui.messageInput?.value || '';
+        if (!message.trim()) {
+          this.showError('Please enter a message to queue');
+          return;
+        }
+        try {
+          const data = await window.wsClient.rpc('msg.send', { id: this.state.currentConversation.id, content: message });
+          this._dbg('Queue response:', data);
+          if (this.ui.messageInput) {
+            this.ui.messageInput.value = '';
+            this.ui.messageInput.style.height = 'auto';
+          }
+        } catch (err) {
+          console.error('Failed to queue:', err);
+          this.showError('Failed to queue: ' + err.message);
+        }
+      });
+    }
+
+    if (this.ui.messageInput) {
+      this.ui.messageInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && e.ctrlKey) {
+          this.startExecution();
+        }
+      });
+
+      this.ui.messageInput.addEventListener('input', () => {
+        const el = this.ui.messageInput;
+        el.style.height = 'auto';
+        el.style.height = Math.min(el.scrollHeight, 150) + 'px';
+      });
+    }
+  },
+
+  _setupUIWindowEvents() {
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'n' && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
+        e.preventDefault();
+        const newBtn = document.querySelector('[data-new-conversation], #newConversationBtn, .new-conversation-btn');
+        if (newBtn) newBtn.click();
+      }
+      if (e.key === 'b' && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
+        e.preventDefault();
+        const toggleBtn = document.querySelector('[data-sidebar-toggle]');
+        if (toggleBtn) toggleBtn.click();
+      }
+      if (e.key === 'Escape') {
+        const activeEl = document.activeElement;
+        if (activeEl && activeEl.tagName === 'TEXTAREA') { activeEl.blur(); return; }
+        if (this.state.isStreaming) {
+          const cancelBtn = document.querySelector('#cancelBtn, [data-cancel-btn]');
+          if (cancelBtn && cancelBtn.offsetParent !== null) cancelBtn.click();
+        }
+      }
+    });
+
+    const themeToggle = document.querySelector('[data-theme-toggle]');
+    if (themeToggle) {
+      themeToggle.addEventListener('click', () => this.toggleTheme());
+    }
+
+    if (this.ui.outputEl) {
+      this.ui.outputEl.addEventListener('click', async (e) => {
+        const editBtn = e.target.closest('[data-edit-msg]');
+        if (!editBtn || !this.state.currentConversation) return;
+        const msgEl = editBtn.closest('.message-user');
+        const textEl = msgEl?.querySelector('.message-text');
+        if (!textEl) return;
+        const original = textEl.textContent || '';
+        const edited = await window.UIDialog?.prompt('Edit message:', original, 'Edit & Re-run');
+        if (!edited || edited === original) return;
+        this.ui.messageInput.value = edited;
+        this.startExecution();
+      });
+    }
+
+    this.setupScrollTracking();
+
+    window.addEventListener('create-new-conversation', (event) => {
+      this.unlockAgentAndModel();
+      const detail = event.detail || {};
+      this.createNewConversation(detail.workingDirectory, detail.title);
+    });
+
+    window.addEventListener('preparing-new-conversation', () => {
+      this.unlockAgentAndModel();
+    });
+
+    window.addEventListener('conversation-selected', async (event) => {
+      const conversationId = event.detail.conversationId;
+      if (this._isLoadingConversation && this._loadingConversationId === conversationId) return;
+      this._loadingConversationId = conversationId;
+      this.updateUrlForConversation(conversationId);
+      this._isLoadingConversation = true;
+      try {
+        await this.loadConversationMessages(conversationId);
+      } finally {
+        this._isLoadingConversation = false;
+        this._loadingConversationId = null;
+      }
+    });
+
+    window.addEventListener('conversation-deselected', () => {
+      window.ConversationState?.clear('deselected');
+      this.state.currentConversation = null;
+      this.state.currentSession = null;
+      this.updateUrlForConversation(null);
+      this.enableControls();
+      this._showWelcomeScreen();
+      if (this.ui.messageInput) {
+        this.ui.messageInput.value = '';
+        this.ui.messageInput.style.height = 'auto';
+      }
+      this.unlockAgentAndModel();
+    });
+  }
+});