agentgui 1.0.828 → 1.0.830

package/static/js/client-ui.js

@@ -0,0 +1,128 @@
+Object.assign(AgentGUIClient.prototype, {
+  setupUI() {
+    const container = document.getElementById(this.config.containerId);
+    if (!container) {
+      throw new Error(`Container not found: ${this.config.containerId}`);
+    }
+
+    this.ui.statusIndicator = document.querySelector('[data-status-indicator]');
+    this.ui.messageInput = document.querySelector('[data-message-input]');
+    this.ui.sendButton = document.querySelector('[data-send-button]');
+    this.ui.cliSelector = document.querySelector('[data-cli-selector]');
+    this.ui.agentSelector = document.querySelector('[data-agent-selector]');
+    this.ui.modelSelector = document.querySelector('[data-model-selector]');
+
+    if (this.ui.messageInput) {
+      this.ui.messageInput.addEventListener('input', () => {
+        this.saveDraftPrompt();
+      });
+
+      const currentConvId = this.state.currentConversation?.id;
+      if (currentConvId) {
+        this.restoreDraftPrompt(currentConvId);
+      }
+    }
+
+    if (this.ui.cliSelector) {
+      this.ui.cliSelector.addEventListener('change', () => {
+        if (!this._agentLocked) {
+          this.loadSubAgentsForCli(this.ui.cliSelector.value);
+          this.loadModelsForAgent(this.ui.cliSelector.value);
+          this.saveAgentAndModelToConversation();
+        }
+      });
+    }
+
+    if (this.ui.agentSelector) {
+      this.ui.agentSelector.addEventListener('change', () => {
+        const parentAgentId = this.ui.cliSelector?.value;
+        if (parentAgentId) {
+          this.loadModelsForAgent(parentAgentId);
+        }
+        if (!this._agentLocked) {
+          this.saveAgentAndModelToConversation();
+        }
+      });
+    }
+
+    if (this.ui.modelSelector) {
+      this.ui.modelSelector.addEventListener('change', () => {
+        this.saveAgentAndModelToConversation();
+      });
+    }
+
+    if (this.ui.sendButton) {
+      this.ui.sendButton.addEventListener('click', () => this.startExecution());
+    }
+
+    this.setupChatMicButton();
+    this._setupUIButtonEvents();
+    this._setupUIWindowEvents();
+  },
+
+  setupChatMicButton() {
+    const chatMicBtn = document.getElementById('chatMicBtn');
+    if (!chatMicBtn) return;
+
+    let isRecording = false;
+
+    const startRecording = async () => {
+      if (isRecording) return;
+      isRecording = true;
+      chatMicBtn.classList.add('recording');
+      const result = await window.STTHandler.startRecording();
+      if (!result.success) {
+        isRecording = false;
+        chatMicBtn.classList.remove('recording');
+        alert('Microphone access denied: ' + result.error);
+      }
+    };
+
+    const stopRecording = async () => {
+      if (!isRecording) return;
+      isRecording = false;
+      chatMicBtn.classList.remove('recording');
+      const result = await window.STTHandler.stopRecording();
+      if (result.success) {
+        if (this.ui.messageInput) {
+          this.ui.messageInput.value = result.text;
+        }
+      } else {
+        alert('Transcription failed: ' + result.error);
+      }
+    };
+
+    chatMicBtn.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      startRecording();
+    });
+
+    chatMicBtn.addEventListener('mouseup', (e) => {
+      e.preventDefault();
+      stopRecording();
+    });
+
+    chatMicBtn.addEventListener('mouseleave', (e) => {
+      if (isRecording) {
+        stopRecording();
+      }
+    });
+
+    chatMicBtn.addEventListener('touchstart', (e) => {
+      e.preventDefault();
+      startRecording();
+    });
+
+    chatMicBtn.addEventListener('touchend', (e) => {
+      e.preventDefault();
+      stopRecording();
+    });
+
+    chatMicBtn.addEventListener('touchcancel', (e) => {
+      if (isRecording) {
+        stopRecording();
+      }
+    });
+  }
+
+});

package/static/js/client-ui2.js

@@ -0,0 +1,159 @@
+Object.assign(AgentGUIClient.prototype, {
+  _showWelcomeScreen() {
+    const outputEl = document.getElementById('output');
+    if (!outputEl) return;
+    const agents = this.state.agents || [];
+    const agentOptions = agents.map(a =>
+      `<option value="${this.escapeHtml(a.id)}">${this.escapeHtml(a.name.split(/[\s\-]+/)[0])}</option>`
+    ).join('');
+    outputEl.innerHTML = `
+      <div style="display:flex;align-items:center;justify-content:center;height:100%;flex-direction:column;gap:2rem;padding:2rem;">
+        <div style="text-align:center;">
+          <h1 style="margin:0;font-size:2.5rem;color:var(--color-text-primary);">Welcome to AgentGUI</h1>
+          <p style="margin:1rem 0 0 0;font-size:1.1rem;color:var(--color-text-secondary);">Start a new conversation or select one from the sidebar</p>
+        </div>
+        ${agents.length > 0 ? `
+        <div style="display:flex;flex-direction:column;align-items:center;gap:0.75rem;">
+          <label style="font-size:0.85rem;color:var(--color-text-secondary);font-weight:500;">Select Agent</label>
+          <select id="welcomeAgentSelect" style="padding:0.5rem 1rem;border-radius:0.375rem;border:1px solid var(--color-border);background:var(--color-bg-secondary);color:var(--color-text-primary);font-size:1rem;cursor:pointer;">
+            ${agentOptions}
+          </select>
+        </div>
+        ` : ''}
+        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;max-width:600px;">
+          <div style="padding:1.5rem;border-radius:0.5rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);">
+            <h3 style="margin:0 0 0.5rem 0;color:var(--color-primary);">New Conversation</h3>
+            <p style="margin:0;font-size:0.9rem;color:var(--color-text-secondary);">Create a new chat with any AI agent</p>
+          </div>
+          <div style="padding:1.5rem;border-radius:0.5rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);">
+            <h3 style="margin:0 0 0.5rem 0;color:var(--color-primary);">Available Agents</h3>
+            <p style="margin:0;font-size:0.9rem;color:var(--color-text-secondary);">${agents.length > 0 ? agents.map(a => a.name.split(/[\s\-]+/)[0]).join(', ') : 'Claude Code, Gemini, OpenCode, and more'}</p>
+          </div>
+        </div>
+      </div>
+    `;
+    const welcomeSel = document.getElementById('welcomeAgentSelect');
+    if (welcomeSel) {
+      if (this.ui.cliSelector) welcomeSel.value = this.ui.cliSelector.value;
+      welcomeSel.addEventListener('change', () => {
+        if (this.ui.cliSelector) {
+          this.ui.cliSelector.value = welcomeSel.value;
+          this.ui.cliSelector.dispatchEvent(new Event('change'));
+        }
+      });
+    }
+  },
+
+
+  _showSkeletonLoading(conversationId) {
+    const outputEl = document.getElementById('output');
+    if (!outputEl) return;
+    const conv = this.state.conversations.find(c => c.id === conversationId);
+    const title = conv?.title || 'Conversation';
+    const wdInfo = conv?.workingDirectory ? `${this.escapeHtml(conv.workingDirectory)}` : '';
+    const timestamp = conv ? new Date(conv.created_at).toLocaleDateString() : '';
+    const metaParts = [timestamp];
+    if (wdInfo) metaParts.push(wdInfo);
+    outputEl.innerHTML = `
+      <div class="conversation-header">
+        <h2>${this.escapeHtml(title)}</h2>
+        <p class="text-secondary">${metaParts.join(' - ')}</p>
+      </div>
+      <div class="conversation-messages">
+        <div class="skeleton-loading">
+          <div class="skeleton-block skeleton-pulse" style="height:3rem;margin-bottom:0.75rem;border-radius:0.5rem;background:var(--color-bg-secondary);"></div>
+          <div class="skeleton-block skeleton-pulse" style="height:6rem;margin-bottom:0.75rem;border-radius:0.5rem;background:var(--color-bg-secondary);"></div>
+          <div class="skeleton-block skeleton-pulse" style="height:2rem;margin-bottom:0.75rem;border-radius:0.5rem;background:var(--color-bg-secondary);"></div>
+          <div class="skeleton-block skeleton-pulse" style="height:5rem;margin-bottom:0.75rem;border-radius:0.5rem;background:var(--color-bg-secondary);"></div>
+        </div>
+      </div>
+    `;
+  },
+
+
+  async streamToConversation(conversationId, prompt, agentId, model, subAgent) {
+    try {
+      if (this.wsManager.isConnected) {
+        this.wsManager.sendMessage({ type: 'subscribe', conversationId });
+      }
+
+      let finalPrompt = prompt;
+      const streamBody = { id: conversationId, content: finalPrompt, agentId };
+      if (model) streamBody.model = model;
+      if (subAgent) streamBody.subAgent = subAgent;
+      let result;
+      try {
+        result = await window.wsClient.rpc('msg.stream', streamBody);
+      } catch (e) {
+        if (e.code === 404) {
+          console.warn('Conversation not found, recreating:', conversationId);
+          const conv = this.state.currentConversation;
+          const createBody = { agentId, title: conv?.title || prompt.substring(0, 50), workingDirectory: conv?.workingDirectory || null };
+          if (model) createBody.model = model;
+          if (subAgent) createBody.subAgent = subAgent;
+          const { conversation: newConv } = await window.wsClient.rpc('conv.new', createBody);
+          window.ConversationState?.selectConversation(newConv.id, 'stream_recreate', 1);
+          this.state.currentConversation = newConv;
+          if (window.conversationManager) {
+            window.conversationManager.loadConversations();
+            window.conversationManager.select(newConv.id);
+          }
+          this.updateUrlForConversation(newConv.id);
+          return this.streamToConversation(newConv.id, prompt, agentId, model, subAgent);
+        }
+        throw e;
+      }
+
+      if (result.queued) {
+        this._dbg('Message queued, position:', result.queuePosition);
+        this.enableControls();
+        return;
+      }
+
+      if (result.session && this.wsManager.isConnected) {
+        this.wsManager.subscribeToSession(result.session.id);
+      }
+
+      this._lastSendTime = Date.now();
+      this.emit('execution:started', result);
+    } catch (error) {
+      console.error('Stream execution error:', error);
+      this.showError('Failed to stream execution: ' + error.message);
+      this.enableControls();
+    }
+  },
+
+
+  _hydrateSessionBlocks(blocksEl, list) {
+    const blockFrag = document.createDocumentFragment();
+    const deferred = [];
+    for (const chunk of list) {
+      if (!chunk.block?.type) continue;
+      const bt = chunk.block.type;
+      if (bt === 'tool_result' || bt === 'tool_status' || bt === 'hook_progress') { deferred.push(chunk); continue; }
+      const el = this.renderer.renderBlock(chunk.block, chunk, blockFrag);
+      if (!el) continue;
+      el.classList.add('block-loaded');
+      blockFrag.appendChild(el);
+    }
+    blocksEl.appendChild(blockFrag);
+    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) {
+      const b = chunk.block;
+      if (b.type === 'tool_result') {
+        const toolUseEl = (b.tool_use_id && toolUseIndex.get(b.tool_use_id))
+          || (blocksEl.lastElementChild?.classList.contains('block-tool-use') ? blocksEl.lastElementChild : null);
+        if (toolUseEl) this.renderer.mergeResultIntoToolUse(toolUseEl, b);
+      } else if (b.type === 'tool_status') {
+        const toolUseEl = b.tool_use_id && toolUseIndex.get(b.tool_use_id);
+        if (toolUseEl) {
+          const isError = b.status === 'failed';
+          const isDone = b.status === 'completed';
+          if (isDone || isError) toolUseEl.classList.add(isError ? 'tool-result-error' : 'tool-result-success');
+        }
+      }
+    }
+  }
+
+});

package/static/js/client-url.js

@@ -0,0 +1,93 @@
+Object.assign(AgentGUIClient.prototype, {
+  updateUrlForConversation(conversationId, sessionId) {
+    if (!this.isValidId(conversationId)) return;
+    if (!this.routerState) return;
+
+    this.routerState.currentConversationId = conversationId;
+    if (sessionId && this.isValidId(sessionId)) {
+      this.routerState.currentSessionId = sessionId;
+    }
+
+    const basePath = window.location.pathname.replace(/\/conversations\/[^\/]+$/, '').replace(/\/$/, '');
+    let url = `${basePath}/conversations/${conversationId}`;
+    
+    if (sessionId && this.isValidId(sessionId)) {
+      url += `?session=${sessionId}`;
+    }
+    
+    window.history.pushState({ conversationId, sessionId }, '', url);
+  },
+
+
+  saveScrollPosition(conversationId) {
+    if (!this.isValidId(conversationId)) return;
+
+    const scrollContainer = document.getElementById(this.config.scrollContainerId);
+    if (scrollContainer) {
+      const position = scrollContainer.scrollTop;
+      try {
+        localStorage.setItem(`scroll_${conversationId}`, position.toString());
+      } catch (e) {
+        console.warn('Failed to save scroll position:', e);
+      }
+    }
+  },
+
+
+  restoreScrollPosition(conversationId) {
+    if (!this.isValidId(conversationId)) return;
+
+    try {
+      const position = localStorage.getItem(`scroll_${conversationId}`);
+      const scrollContainer = document.getElementById(this.config.scrollContainerId);
+      if (!scrollContainer) return;
+      
+      if (position !== null) {
+        const scrollTop = parseInt(position, 10);
+        if (!isNaN(scrollTop)) {
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              const maxScroll = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+              scrollContainer.scrollTop = Math.min(scrollTop, maxScroll);
+            });
+          });
+        }
+      } else {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            scrollContainer.scrollTop = 0;
+          });
+        });
+      }
+    } catch (e) {
+      console.warn('Failed to restore scroll position:', e);
+    }
+  },
+
+
+  setupScrollTracking() {
+    const scrollContainer = document.getElementById(this.config.scrollContainerId);
+    if (!scrollContainer) return;
+
+    this._userScrolledUp = false;
+    let scrollTimer = null;
+    let lastScrollTop = scrollContainer.scrollTop;
+    scrollContainer.addEventListener('scroll', () => {
+      const distFromBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
+      if (scrollContainer.scrollTop < lastScrollTop && distFromBottom > 200) {
+        this._userScrolledUp = true;
+      } else if (distFromBottom < 50) {
+        this._userScrolledUp = false;
+        this._removeNewContentPill();
+      }
+      lastScrollTop = scrollContainer.scrollTop;
+      if (scrollTimer) clearTimeout(scrollTimer);
+      scrollTimer = setTimeout(() => {
+        if (this.state.currentConversation?.id) {
+          this.saveScrollPosition(this.state.currentConversation.id);
+        }
+      }, 500);
+    });
+  }
+
+});

package/static/js/client-utils.js

@@ -0,0 +1,175 @@
+Object.assign(AgentGUIClient.prototype, {
+  renderMessages(messages) {
+    if (messages.length === 0) {
+      return '<p class="text-secondary">No messages in this conversation yet</p>';
+    }
+    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('');
+  }
+
+
+  escapeHtml(text) {
+    return window._escHtml(text);
+  }
+
+
+  showError(message) {
+    console.error(message);
+    if (window.UIDialog) {
+      window.UIDialog.alert(message, 'Error');
+    }
+  }
+
+
+  on(event, callback) {
+    if (!this.eventHandlers[event]) {
+      this.eventHandlers[event] = [];
+    }
+    this.eventHandlers[event].push(callback);
+  }
+
+
+  emit(event, data) {
+    if (this.eventHandlers[event]) {
+      this.eventHandlers[event].forEach(callback => {
+        try {
+          callback(data);
+        } catch (error) {
+          console.error(`Event handler error for ${event}:`, error);
+        }
+      });
+    }
+  }
+
+
+  getEffectiveAgentId() {
+    return this.ui.cliSelector?.value || null;
+  }
+
+
+  getEffectiveSubAgent() {
+    if (this.ui.agentSelector?.value && this.ui.agentSelector.style.display !== 'none') {
+      return this.ui.agentSelector.value;
+    }
+    return null;
+  }
+
+
+  getCurrentAgent() {
+    return this.getEffectiveAgentId();
+  }
+
+
+  saveAgentAndModelToConversation() {
+    const convId = this.state.currentConversation?.id;
+    if (!convId || this._agentLocked) return;
+    const agentId = this.getEffectiveAgentId();
+    const subAgent = this.getEffectiveSubAgent();
+    const model = this.getCurrentModel();
+    window.wsClient.rpc('conv.upd', { id: convId, agentType: agentId, subAgent: subAgent || undefined, model: model || undefined }).catch(() => {});
+  }
+
+
+  getCurrentModel() {
+    return this.ui.modelSelector?.value || null;
+  }
+
+
+  getMetrics() {
+    return {
+      renderer: this.renderer.getMetrics(),
+      websocket: this.wsManager.getStatus(),
+      eventProcessor: this.eventProcessor.getStats(),
+      state: this.state
+    };
+  }
+
+
+  saveDraftPrompt() {
+    const convId = this.state.currentConversation?.id;
+    if (convId && this.ui.messageInput) {
+      const draft = this.ui.messageInput.value;
+      this.draftPrompts.set(convId, draft);
+      if (draft) {
+        localStorage.setItem(`draft-${convId}`, draft);
+      }
+    }
+  }
+
+
+  restoreDraftPrompt(conversationId) {
+    if (!this.ui.messageInput) return;
+
+    let draft = this.draftPrompts.get(conversationId) || '';
+    if (!draft) {
+      draft = localStorage.getItem(`draft-${conversationId}`) || '';
+      if (draft) this.draftPrompts.set(conversationId, draft);
+    }
+
+    this.ui.messageInput.value = draft;
+  }
+
+
+  clearDraft(conversationId) {
+    this.draftPrompts.delete(conversationId);
+    localStorage.removeItem(`draft-${conversationId}`);
+  }
+
+
+  updateSendButtonState() {
+    if (this.ui.sendButton) {
+      this.ui.sendButton.disabled = !this.wsManager.isConnected;
+    }
+    if (this.ui.injectButton && this.ui.injectButton.classList.contains('visible')) {
+      this.ui.injectButton.disabled = !this.wsManager.isConnected;
+    }
+    if (this.ui.queueButton && this.ui.queueButton.classList.contains('visible')) {
+      this.ui.queueButton.disabled = !this.wsManager.isConnected;
+    }
+  }
+
+
+  disablePromptArea() {
+  }
+
+
+  enablePromptArea() {
+    if (this.ui.messageInput) {
+      this.ui.messageInput.disabled = false;
+    }
+    const injectBtn = document.getElementById('injectBtn');
+    if (injectBtn) injectBtn.disabled = false;
+  }
+
+
+  showStreamingPromptButtons() {
+    if (this.ui.injectButton) {
+      this.ui.injectButton.classList.add('visible');
+      this.ui.injectButton.disabled = !this.wsManager.isConnected;
+    }
+    if (this.ui.queueButton) {
+      this.ui.queueButton.classList.add('visible');
+      this.ui.queueButton.disabled = !this.wsManager.isConnected;
+    }
+  }
+
+
+  ensurePromptAreaAlwaysEnabled() {
+    if (this.ui.messageInput) {
+      this.ui.messageInput.disabled = false;
+    }
+  }
+
+
+  destroy() {
+
+    this.renderer.destroy();
+    this.wsManager.destroy();
+    this.eventHandlers = {};
+  }
+}
+
+window.__convPerfMetrics = () => {
+  const entries = performance.getEntriesByType('measure').filter(e => e.name.startsWith('conv-'));
+  return entries.map(e => ({ name: e.name, ms: Math.round(e.duration) }));
+};
+});

package/static/js/client-ws-msg.js

@@ -0,0 +1,88 @@
+Object.assign(AgentGUIClient.prototype, {
+  async connectWebSocket() {
+    try {
+      await this.wsManager.connect();
+      this.updateConnectionStatus('connected');
+    } catch (error) {
+      console.error('WebSocket connection failed:', error);
+      this.updateConnectionStatus('error');
+      throw error;
+    }
+  },
+
+
+  handleWebSocketMessage(data) {
+    try {
+      window.dispatchEvent(new CustomEvent('ws-message', { detail: data }));
+
+      switch (data.type) {
+        case 'streaming_start':
+          this.handleStreamingStart(data).catch(e => console.error('handleStreamingStart error:', e));
+          break;
+        case 'streaming_resumed':
+          this.handleStreamingResumed(data).catch(e => console.error('handleStreamingResumed error:', e));
+          break;
+        case 'streaming_progress':
+          this.handleStreamingProgress(data);
+          break;
+        case 'streaming_complete':
+          this.handleStreamingComplete(data);
+          break;
+        case 'streaming_error':
+          this.handleStreamingError(data);
+          break;
+        case 'conversation_created':
+          this.handleConversationCreated(data);
+          break;
+        case 'all_conversations_deleted':
+          this.handleAllConversationsDeleted(data);
+          break;
+        case 'message_created':
+          this.handleMessageCreated(data);
+          break;
+        case 'conversation_updated':
+          this.handleConversationUpdated(data);
+          break;
+        case 'queue_status':
+          this.handleQueueStatus(data);
+          break;
+        case 'queue_updated':
+          this.handleQueueUpdated(data);
+          break;
+        case 'queue_item_dequeued':
+          this.handleQueueItemDequeued(data);
+          break;
+        case 'rate_limit_hit':
+          this.handleRateLimitHit(data);
+          break;
+        case 'rate_limit_clear':
+          this.handleRateLimitClear(data);
+          break;
+        case 'model_download_progress':
+          this._handleModelDownloadProgress(data.progress || data);
+          break;
+        case 'tts_setup_progress':
+          this._handleTTSSetupProgress(data);
+          break;
+        default:
+          break;
+      }
+    } catch (error) {
+      console.error('Message handling error:', error);
+    }
+  },
+
+
+  queueEvent(data) {
+    try {
+      const processed = this.eventProcessor.processEvent(data);
+      if (!processed) return;
+      if (data.sessionId && this.state.currentSession?.id === data.sessionId) {
+        this.state.sessionEvents.push(processed);
+      }
+    } catch (error) {
+      console.error('Event queuing error:', error);
+    }
+  }
+
+});