agentgui 1.0.930 → 1.0.932

package/static/js/client-scroll.js

@@ -1,178 +0,0 @@
-Object.assign(AgentGUIClient.prototype, {
-  syncPromptState(conversationId) {
-    const conversation = this.state.currentConversation;
-    if (!conversation || conversation.id !== conversationId) return;
-
-    if (this.ui.messageInput) {
-      this.ui.messageInput.disabled = false;
-    }
-
-    this.updateBusyPromptArea(conversationId);
-  },
-
-
-  updateBusyPromptArea(conversationId) {
-    if (this.state.currentConversation?.id !== conversationId) return;
-    const isStreaming = this._convIsStreaming(conversationId);
-    const isConnected = this.wsManager?.isConnected;
-
-    const injectBtn = document.getElementById('injectBtn');
-    const queueBtn = document.getElementById('queueBtn');
-    const stopBtn = document.getElementById('stopBtn');
-
-    [injectBtn, queueBtn, stopBtn].forEach(btn => {
-      if (!btn) return;
-      btn.classList.toggle('visible', isStreaming);
-      btn.disabled = !isConnected;
-    });
-
-    if (this.ui.sendButton) this.ui.sendButton.style.display = isStreaming ? 'none' : '';
-  },
-
-
-  removeScrollUpDetection() {
-    const scrollContainer = document.getElementById(this.config.scrollContainerId);
-    if (scrollContainer && this._scrollUpHandler) {
-      scrollContainer.removeEventListener('scroll', this._scrollUpHandler);
-      this._scrollUpHandler = null;
-    }
-  },
-
-
-  setupScrollUpDetection(conversationId) {
-    const scrollContainer = document.getElementById(this.config.scrollContainerId);
-    if (!scrollContainer) return;
-
-    if (!this._scrollDetectionState) this._scrollDetectionState = {};
-
-    const detectionState = {
-      isLoading: false,
-      oldestTimestamp: Date.now(),
-      oldestMessageId: null,
-      conversation: conversationId
-    };
-
-    const handleScroll = async () => {
-      const scrollTop = scrollContainer.scrollTop;
-      const scrollHeight = scrollContainer.scrollHeight;
-      const clientHeight = scrollContainer.clientHeight;
-      const THRESHOLD = 300;
-
-      if (scrollTop < THRESHOLD && !detectionState.isLoading && scrollHeight > clientHeight) {
-        detectionState.isLoading = true;
-
-        try {
-          const messagesEl = document.querySelector('.conversation-messages');
-          if (!messagesEl) {
-            detectionState.isLoading = false;
-            return;
-          }
-
-          const firstMessageEl = messagesEl.querySelector('.message[data-msg-id]');
-          if (!firstMessageEl) {
-            const firstChunkEl = messagesEl.querySelector('[data-chunk-created]');
-            if (firstChunkEl) {
-              detectionState.oldestTimestamp = parseInt(firstChunkEl.getAttribute('data-chunk-created')) || 0;
-            }
-          } else {
-            detectionState.oldestMessageId = firstMessageEl.getAttribute('data-msg-id');
-          }
-
-          let result;
-          if (detectionState.oldestMessageId) {
-            try {
-              result = await window.wsClient.rpc('msg.ls.earlier', {
-                id: conversationId,
-                before: detectionState.oldestMessageId,
-                limit: 50
-              });
-            } catch (e) {
-              const base = window.__BASE_URL || '';
-              const r = await fetch(`${base}/api/conversations/${conversationId}/messages?limit=50`);
-              const d = await r.json();
-              result = { messages: d.messages || [] };
-            }
-          } else if (detectionState.oldestTimestamp > 0) {
-            try {
-              result = await window.wsClient.rpc('conv.chunks.earlier', {
-                id: conversationId,
-                before: detectionState.oldestTimestamp,
-                limit: 500
-              });
-            } catch (e) {
-              const base = window.__BASE_URL || '';
-              const r = await fetch(`${base}/api/conversations/${conversationId}/chunks`);
-              const d = await r.json();
-              result = { chunks: d.chunks || [] };
-            }
-          }
-
-          if (result && ((result.messages && result.messages.length > 0) || (result.chunks && result.chunks.length > 0))) {
-            const scrollHeightBefore = scrollContainer.scrollHeight;
-            const scrollTopBefore = scrollContainer.scrollTop;
-            const newContent = document.createDocumentFragment();
-
-            if (result.messages && result.messages.length > 0) {
-              result.messages.forEach(msg => {
-                const div = document.createElement('div');
-                div.className = `message message-${msg.role}`;
-                div.setAttribute('data-msg-id', msg.id);
-                div.innerHTML = `<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>`;
-                newContent.appendChild(div);
-              });
-            }
-
-            if (result.chunks && result.chunks.length > 0) {
-              result.chunks.forEach(chunk => {
-                const blockEl = this.renderer.renderBlock(chunk.data, {}, false);
-                if (blockEl) {
-                  const wrapper = document.createElement('div');
-                  wrapper.setAttribute('data-chunk-created', chunk.created_at);
-                  wrapper.appendChild(blockEl);
-                  newContent.appendChild(wrapper);
-                }
-              });
-            }
-
-            if (messagesEl.firstChild) {
-              messagesEl.insertBefore(newContent, messagesEl.firstChild);
-            } else {
-              messagesEl.appendChild(newContent);
-            }
-
-            const scrollHeightAfter = scrollContainer.scrollHeight;
-            scrollContainer.scrollTop = scrollTopBefore + (scrollHeightAfter - scrollHeightBefore);
-          }
-        } catch (error) {
-          console.error('Failed to load earlier messages:', error);
-        } finally {
-          detectionState.isLoading = false;
-        }
-      }
-    };
-
-    scrollContainer.removeEventListener('scroll', this._scrollUpHandler);
-    this._scrollUpHandler = handleScroll;
-    scrollContainer.addEventListener('scroll', this._scrollUpHandler, { passive: true });
-  },
-
-
-  renderMessagesFragment(messages) {
-    const frag = document.createDocumentFragment();
-    if (messages.length === 0) {
-      const p = document.createElement('p');
-      p.className = 'text-secondary';
-      p.textContent = 'No messages in this conversation yet';
-      frag.appendChild(p);
-      return frag;
-    }
-    for (const msg of messages) {
-      const div = document.createElement('div');
-      div.className = `message message-${msg.role}`;
-      div.innerHTML = `<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>`;
-      frag.appendChild(div);
-    }
-    return frag;
-  }
-
-});

package/static/js/client-status.js

@@ -1,167 +0,0 @@
-Object.assign(AgentGUIClient.prototype, {
-  _updateConnectionIndicator(quality) {
-    if (this._indicatorDebounce && !this._modelDownloadInProgress) return;
-    this._indicatorDebounce = true;
-    setTimeout(() => { this._indicatorDebounce = false; }, 1000);
-
-    let indicator = document.getElementById('connection-indicator');
-    if (!indicator) {
-      indicator = document.createElement('div');
-      indicator.id = 'connection-indicator';
-      indicator.className = 'connection-indicator';
-      indicator.innerHTML = '<span class="connection-dot"></span><span class="connection-label"></span>';
-      indicator.addEventListener('click', () => this._toggleConnectionTooltip());
-      const header = document.querySelector('.header-right') || document.querySelector('.app-header');
-      if (header) {
-        header.style.position = 'relative';
-        header.appendChild(indicator);
-      }
-    }
-
-    const dot = indicator.querySelector('.connection-dot');
-    const label = indicator.querySelector('.connection-label');
-    if (!dot || !label) return;
-
-    if (this._modelDownloadInProgress) {
-      dot.className = 'connection-dot downloading';
-      const progress = this._modelDownloadProgress;
-      if (progress && progress.totalBytes > 0) {
-        const pct = Math.round((progress.totalDownloaded / progress.totalBytes) * 100);
-        label.textContent = `Models ${pct}%`;
-      } else if (progress && progress.downloading) {
-        label.textContent = 'Downloading...';
-      } else {
-        label.textContent = 'Loading models...';
-      }
-      return;
-    }
-
-    dot.className = 'connection-dot';
-    if (quality === 'disconnected' || quality === 'reconnecting') {
-      dot.classList.add(quality);
-      label.textContent = quality === 'reconnecting' ? 'Reconnecting...' : 'Disconnected';
-    } else {
-      dot.classList.add(quality);
-      const latency = this.wsManager?.latency;
-      label.textContent = latency?.avg > 0 ? Math.round(latency.avg) + 'ms' : '';
-    }
-  },
-
-
-  _handleModelDownloadProgress(progress) {
-    this._modelDownloadProgress = progress;
-    if (progress.status === 'failed' || progress.error) {
-      this._modelDownloadInProgress = false;
-      console.error('[Models] Download error:', progress.error || progress.status);
-      this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
-      return;
-    }
-    if (progress.done || progress.status === 'completed') {
-      this._modelDownloadInProgress = false;
-      this._dbg('[Models] Download complete');
-      this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
-      return;
-    }
-    if (progress.started || progress.downloading || progress.status === 'downloading' || progress.status === 'connecting') {
-      this._modelDownloadInProgress = true;
-      this._updateConnectionIndicator(this.wsManager?.latency?.quality || 'unknown');
-    }
-  },
-
-
-  _handleTTSSetupProgress(data) {
-    if (data.step && data.status) {
-      this._dbg('[TTS Setup]', data.step, ':', data.status, data.message || '');
-    }
-  },
-
-
-  _toggleConnectionTooltip() {
-    let tooltip = document.getElementById('connection-tooltip');
-    if (tooltip) { tooltip.remove(); return; }
-
-    const indicator = document.getElementById('connection-indicator');
-    if (!indicator) return;
-
-    tooltip = document.createElement('div');
-    tooltip.id = 'connection-tooltip';
-    tooltip.className = 'connection-tooltip';
-
-    const latency = this.wsManager?.latency || {};
-    const stats = this.wsManager?.stats || {};
-    const state = this.wsManager?.connectionState || 'unknown';
-
-    tooltip.innerHTML = [
-      `<div>State: ${state}</div>`,
-      `<div>Latency: ${Math.round(latency.avg || 0)}ms</div>`,
-      `<div>Predicted: ${Math.round(latency.predicted || 0)}ms (Kalman)</div>`,
-      `<div>Trend: ${latency.trend || 'unknown'}</div>`,
-      `<div>Jitter: ${Math.round(latency.jitter || 0)}ms</div>`,
-      `<div>Quality: ${latency.quality || 'unknown'}</div>`,
-      `<div>Reconnects: ${stats.totalReconnects || 0}</div>`,
-      `<div>Uptime: ${stats.lastConnectedTime ? Math.round((Date.now() - stats.lastConnectedTime) / 1000) + 's' : 'N/A'}</div>`
-    ].join('');
-
-    indicator.appendChild(tooltip);
-    setTimeout(() => { if (tooltip.parentNode) tooltip.remove(); }, 5000);
-  },
-
-
-  updateMetrics(metrics) {
-    const metricsDisplay = document.querySelector('[data-metrics]');
-    if (metricsDisplay && metrics) {
-      metricsDisplay.textContent = `Batches: ${metrics.totalBatches} | Events: ${metrics.totalEvents} | Avg render: ${metrics.avgRenderTime.toFixed(2)}ms`;
-    }
-  },
-
-
-  disableControls() {
-    if (this.ui.sendButton) this.ui.sendButton.disabled = true;
-    if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'DISABLED' });
-  },
-
-
-  enableControls() {
-    if (this.ui.sendButton) {
-      this.ui.sendButton.disabled = !this.wsManager?.isConnected;
-    }
-    if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'READY' });
-    this.updateBusyPromptArea(this.state.currentConversation?.id);
-  },
-
-
-  toggleTheme() {
-    const isDark = document.documentElement.classList.toggle('dark');
-    localStorage.setItem('theme', isDark ? 'dark' : 'light');
-  },
-
-
-  async createNewConversation(workingDirectory, title) {
-    try {
-      const agentId = this.getEffectiveAgentId();
-      const model = this.ui.modelSelector?.value || null;
-      const convTitle = title || 'New Conversation';
-      const body = { agentId, title: convTitle };
-      if (workingDirectory) body.workingDirectory = workingDirectory;
-      if (model) body.model = model;
-
-      const { conversation } = await window.wsClient.rpc('conv.new', body);
-
-      await this.loadConversations();
-
-      if (window.conversationManager) {
-        await window.conversationManager.loadConversations();
-        window.conversationManager.select(conversation.id);
-      }
-
-      if (this.ui.messageInput) {
-        this.ui.messageInput.value = '';
-        this.ui.messageInput.focus();
-      }
-    } catch (error) {
-      console.error('Failed to create new conversation:', error);
-      this.showError(`Failed to create conversation: ${error.message}`);
-    }
-  }
-
-});

package/static/js/client-streaming.js

@@ -1,117 +0,0 @@
-Object.assign(AgentGUIClient.prototype, {
-  async handleStreamingStart(data) {
-    this._dbg('Streaming started:', data);
-    if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'STREAMING', conversationId: data.conversationId });
-    this._clearThinkingCountdown();
-    if (this._lastSendTime > 0) {
-      const actual = Date.now() - this._lastSendTime;
-      const predicted = this.wsManager?.latency?.predicted || 0;
-      const serverTime = Math.max(500, actual - predicted);
-      this._serverProcessingEstimate = 0.7 * this._serverProcessingEstimate + 0.3 * serverTime;
-    }
-
-    if (this.wsManager.isConnected) {
-      this.wsManager.subscribeToSession(data.sessionId);
-      if (!data.resumed) {
-        this.wsManager.sendMessage({ type: 'subscribe', conversationId: data.conversationId });
-      }
-    }
-
-    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);
-      this._dbg('[SYNC] streaming_start - non-active conv:', { convId: data.conversationId, sessionId: data.sessionId, streamingCount: this.state.streamingConversations.size });
-      this.updateBusyPromptArea(data.conversationId);
-      this.emit('streaming:start', data);
-
-      if (!this.state.currentConversation && !this._isLoadingConversation) {
-        this._isLoadingConversation = true;
-        this.loadConversationMessages(data.conversationId).finally(() => {
-          this._isLoadingConversation = false;
-        });
-      }
-      return;
-    }
-
-    this._setConvStreaming(data.conversationId, true, data.sessionId, data.agentId);
-    this.updateBusyPromptArea(data.conversationId);
-    this.state.currentSession = {
-      id: data.sessionId,
-      conversationId: data.conversationId,
-      agentId: data.agentId,
-      startTime: Date.now()
-    };
-    this.state.sessionEvents = [];
-
-    this.updateUrlForConversation(data.conversationId, data.sessionId);
-
-    if (this.wsManager.isConnected) {
-      this.wsManager.subscribeToSession(data.sessionId);
-    }
-
-    const outputEl = document.getElementById('output');
-    if (outputEl) {
-      let messagesEl = outputEl.querySelector('.conversation-messages');
-      if (!messagesEl) {
-        const conv = this.state.currentConversation;
-        const wdInfo = conv?.workingDirectory ? `${this.escapeHtml(conv.workingDirectory)}` : '';
-        const timestamp = new Date(conv?.created_at || Date.now()).toLocaleDateString();
-        const metaParts = [timestamp];
-        if (conv?.agentType || conv?.agentId) metaParts.push(this.escapeHtml(conv.agentType || conv.agentId));
-        if (conv?.messageCount > 0) metaParts.push(`${conv.messageCount} msgs`);
-        if (wdInfo) metaParts.push(wdInfo);
-        outputEl.innerHTML = `
-          <div class="conversation-header">
-            <h2>${this.escapeHtml(conv?.title || 'Conversation')}</h2>
-            <p class="text-secondary">${metaParts.join(' - ')}</p>
-          </div>
-          <div class="conversation-messages"></div>
-        `;
-        messagesEl = outputEl.querySelector('.conversation-messages');
-      }
-      let streamingDiv = document.getElementById(`streaming-${data.sessionId}`);
-      if (!streamingDiv) {
-        streamingDiv = document.createElement('div');
-        streamingDiv.className = 'message message-assistant streaming-message';
-        streamingDiv.id = `streaming-${data.sessionId}`;
-        streamingDiv.innerHTML = `
-          <div class="message-role">Assistant</div>
-          <div class="message-blocks streaming-blocks"></div>
-          <div class="streaming-indicator" style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;">
-            <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">Thinking...</span>
-          </div>
-        `;
-        messagesEl.appendChild(streamingDiv);
-      } else {
-        streamingDiv.classList.add('streaming-message');
-        streamingDiv.querySelectorAll('.streaming-indicator').forEach(ind => ind.remove());
-        const indDiv = document.createElement('div');
-        indDiv.className = 'streaming-indicator';
-        indDiv.style = 'display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;';
-        indDiv.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">Thinking...</span>`;
-        streamingDiv.appendChild(indDiv);
-      }
-      this.scrollToBottom(true);
-    }
-
-    this._streamStartedAt = Date.now();
-    this._sessionCost = 0;
-    if (this._elapsedTimer) clearInterval(this._elapsedTimer);
-    this._elapsedTimer = setInterval(() => {
-      const label = streamingDiv?.querySelector('.streaming-indicator-label');
-      if (label) {
-        const sec = ((Date.now() - this._streamStartedAt) / 1000) | 0;
-        const time = sec < 60 ? sec + 's' : Math.floor(sec / 60) + 'm ' + (sec % 60) + 's';
-        label.textContent = this._sessionCost > 0 ? time + ' · $' + this._sessionCost.toFixed(4) : time;
-      }
-    }, 1000);
-
-    this._renderedSeqs[data.sessionId] = new Set();
-
-    this.showStreamingPromptButtons();
-
-    this.emit('streaming:start', data);
-  }
-
-});

package/static/js/client-streaming2.js

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