agentgui 1.0.782 → 1.0.784

package/lib/db-queries.js

@@ -1038,32 +1038,28 @@ export function createQueries(db, prep, generateId) {
   },
 
   getChunksBefore(conversationId, beforeTimestamp, limit = 500) {
-    const countStmt = prep('SELECT COUNT(*) as count FROM chunks WHERE conversationId = ?');
-    const total = countStmt.get(conversationId).count;
+    const total = prep('SELECT COUNT(*) as count FROM chunks WHERE conversationId = ? AND created_at < ?')
+      .get(conversationId, beforeTimestamp).count;
 
-    const stmt = prep(`
+    const rows = prep(`
       SELECT id, sessionId, conversationId, sequence, type, data, created_at
       FROM chunks
       WHERE conversationId = ? AND created_at < ?
       ORDER BY created_at DESC LIMIT ?
-    `);
-    const rows = stmt.all(conversationId, beforeTimestamp, limit);
+    `).all(conversationId, beforeTimestamp, limit);
     rows.reverse();
 
     return {
       chunks: rows.map(row => {
         try {
-          return {
-            ...row,
-            data: typeof row.data === 'string' ? JSON.parse(row.data) : row.data
-          };
+          return { ...row, data: typeof row.data === 'string' ? JSON.parse(row.data) : row.data };
         } catch (e) {
           return row;
         }
       }),
       total,
       limit,
-      hasMore: total > (limit + 1)
+      hasMore: rows.length === limit
     };
   },
 

package/package.json

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

package/scripts/seed-large-conversation.js

@@ -0,0 +1,159 @@
+#!/usr/bin/env bun
+// Seed a large conversation for profiling browser rendering performance.
+// Usage: bun scripts/seed-large-conversation.js [--turns N] [--chunks-per-turn N]
+// Output: conversation ID on stdout, progress on stderr.
+
+import { Database } from 'bun:sqlite';
+import { randomUUID } from 'crypto';
+import path from 'path';
+import os from 'os';
+import fs from 'fs';
+
+const args = process.argv.slice(2);
+const getArg = (flag, def) => {
+  const i = args.indexOf(flag);
+  return i !== -1 ? parseInt(args[i + 1]) : def;
+};
+const turns = getArg('--turns', 6000);
+const chunksPerTurn = getArg('--chunks-per-turn', 5);
+
+const dataDir = process.env.PORTABLE_DATA_DIR || path.join(os.homedir(), '.gmgui');
+const dbDir = dataDir;
+fs.mkdirSync(dbDir, { recursive: true });
+const dbPath = path.join(dbDir, 'data.db');
+
+console.error(`[seed] opening ${dbPath}`);
+const db = new Database(dbPath);
+db.run('PRAGMA journal_mode = WAL');
+db.run('PRAGMA synchronous = NORMAL');
+
+db.run(`CREATE TABLE IF NOT EXISTS conversations (
+  id TEXT PRIMARY KEY, agentId TEXT NOT NULL, title TEXT,
+  created_at INTEGER NOT NULL, updated_at INTEGER NOT NULL, status TEXT DEFAULT 'active',
+  agentType TEXT, workingDirectory TEXT, model TEXT, isStreaming INTEGER DEFAULT 0,
+  claudeSessionId TEXT, subAgent TEXT, tags TEXT, pinned INTEGER DEFAULT 0,
+  sortOrder INTEGER DEFAULT 0, source TEXT DEFAULT 'gui'
+)`);
+db.run(`CREATE TABLE IF NOT EXISTS messages (
+  id TEXT PRIMARY KEY, conversationId TEXT NOT NULL, role TEXT NOT NULL,
+  content TEXT NOT NULL, created_at INTEGER NOT NULL
+)`);
+db.run(`CREATE TABLE IF NOT EXISTS sessions (
+  id TEXT PRIMARY KEY, conversationId TEXT NOT NULL, status TEXT NOT NULL,
+  started_at INTEGER NOT NULL, completed_at INTEGER, response TEXT, error TEXT,
+  run_id TEXT, input TEXT, config TEXT, interrupt TEXT, claudeSessionId TEXT
+)`);
+db.run(`CREATE TABLE IF NOT EXISTS chunks (
+  id TEXT PRIMARY KEY, sessionId TEXT NOT NULL, conversationId TEXT NOT NULL,
+  sequence INTEGER NOT NULL, type TEXT NOT NULL, data BLOB NOT NULL, created_at INTEGER NOT NULL
+)`);
+db.run(`CREATE INDEX IF NOT EXISTS idx_chunks_conv_created ON chunks(conversationId, created_at)`);
+db.run(`CREATE INDEX IF NOT EXISTS idx_chunks_session ON chunks(sessionId, sequence)`);
+try { db.run(`CREATE UNIQUE INDEX IF NOT EXISTS idx_chunks_unique ON chunks(sessionId, sequence)`); } catch(_) {}
+
+const convId = randomUUID();
+const now = Date.now();
+const TURN_INTERVAL_MS = 30000;
+const startTime = now - turns * TURN_INTERVAL_MS;
+
+console.error(`[seed] inserting conversation ${convId} with ${turns} turns, ${chunksPerTurn} chunks/turn`);
+
+db.run(
+  `INSERT INTO conversations (id, agentId, title, created_at, updated_at, status, agentType, workingDirectory, model)
+   VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+  [convId, 'cli-claude', `Profiling Seed — ${turns} turns`, startTime, now, 'active', 'claude', '/home/user', 'claude-opus-4-6']
+);
+
+const insertMsg = db.prepare(
+  `INSERT INTO messages (id, conversationId, role, content, created_at) VALUES (?, ?, ?, ?, ?)`
+);
+const insertSession = db.prepare(
+  `INSERT INTO sessions (id, conversationId, status, started_at, completed_at) VALUES (?, ?, ?, ?, ?)`
+);
+const insertChunk = db.prepare(
+  `INSERT INTO chunks (id, sessionId, conversationId, sequence, type, data, created_at) VALUES (?, ?, ?, ?, ?, ?, ?)`
+);
+
+const prompts = [
+  'Read the file src/index.ts and explain what it does.',
+  'Search for all uses of useEffect in the codebase.',
+  'Write a function to validate email addresses.',
+  'Fix the TypeScript error in lib/auth.ts line 42.',
+  'Add unit tests for the formatDate utility.',
+  'Refactor the database connection pool to use async/await.',
+  'Find all TODO comments in the project.',
+  'Implement pagination for the user list endpoint.',
+  'Add error handling to the upload route.',
+  'Create a migration to add the created_at column.',
+];
+const toolNames = ['Read', 'Bash', 'Glob', 'Grep', 'Write', 'Edit'];
+const filePaths = ['src/index.ts', 'lib/auth.ts', 'lib/db.ts', 'src/components/App.tsx', 'tests/auth.test.ts'];
+
+let totalChunks = 0;
+
+const runBatch = db.transaction((batchTurns) => {
+  for (const { turn, t } of batchTurns) {
+    const prompt = prompts[turn % prompts.length];
+    insertMsg.run(randomUUID(), convId, 'user', prompt, t);
+
+    const sessId = randomUUID();
+    const sessStart = t + 1000;
+    const sessEnd = sessStart + 8000 + (turn % 5) * 2000;
+    insertSession.run(sessId, convId, 'completed', sessStart, sessEnd);
+
+    let seq = 0;
+    insertChunk.run(
+      randomUUID(), sessId, convId, seq++, 'block',
+      JSON.stringify({ type: 'text', text: `I'll help with that. Let me analyze ${prompt.slice(0, 40)}...` }),
+      sessStart + 500
+    );
+
+    const pairs = Math.max(1, Math.floor((chunksPerTurn - 2) / 2));
+    for (let p = 0; p < pairs; p++) {
+      const tool = toolNames[(turn + p) % toolNames.length];
+      const file = filePaths[(turn + p) % filePaths.length];
+      const toolUseId = `tu_${turn}_${p}`;
+      const input = tool === 'Bash' ? { command: `cat ${file} | head -20` }
+                  : tool === 'Glob' ? { pattern: '**/*.ts' }
+                  : tool === 'Grep' ? { pattern: 'useEffect', path: '.' }
+                  : { file_path: file };
+      insertChunk.run(
+        randomUUID(), sessId, convId, seq++, 'block',
+        JSON.stringify({ type: 'tool_use', id: toolUseId, name: tool, input }),
+        sessStart + 1000 + p * 800
+      );
+      const resultContent = tool === 'Read' ? `// ${file}\nexport function main() {\n  return 42;\n}\n`
+                           : tool === 'Bash' ? `stdout: Line 1\nLine 2\nLine 3\n`
+                           : tool === 'Glob' ? `src/index.ts\nsrc/app.ts\n`
+                           : `src/App.tsx:12: useEffect(() => {\n`;
+      insertChunk.run(
+        randomUUID(), sessId, convId, seq++, 'block',
+        JSON.stringify({ type: 'tool_result', tool_use_id: toolUseId, content: resultContent }),
+        sessStart + 1400 + p * 800
+      );
+    }
+
+    insertChunk.run(
+      randomUUID(), sessId, convId, seq++, 'block',
+      JSON.stringify({ type: 'text', text: `Done. The file looks correct. I've completed turn ${turn + 1}.` }),
+      sessEnd - 200
+    );
+
+    totalChunks += seq;
+  }
+});
+
+const BATCH = 500;
+for (let i = 0; i < turns; i += BATCH) {
+  const batch = [];
+  for (let j = i; j < Math.min(i + BATCH, turns); j++) {
+    batch.push({ turn: j, t: startTime + j * TURN_INTERVAL_MS });
+  }
+  runBatch(batch);
+  process.stderr.write(`\r[seed] ${Math.min(i + BATCH, turns)}/${turns} turns`);
+}
+
+db.close();
+process.stderr.write('\n');
+console.error(`[seed] complete — ${totalChunks} total chunks for conv ${convId}`);
+console.log(convId);

package/static/index.html

@@ -6,23 +6,39 @@
   <meta name="description" content="AgentGUI - Real-time Claude Code Execution Visualization">
   <title>AgentGUI</title>
   <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%233b82f6'/%3E%3Ctext x='50' y='68' font-size='50' font-family='sans-serif' font-weight='bold' fill='white' text-anchor='middle'%3EG%3C/text%3E%3C/svg%3E">
+  <link rel="preload" href="/gm/css/main.css" as="style">
+  <link rel="preload" href="/gm/lib/xstate.umd.min.js" as="script">
+  <link rel="preload" href="/gm/lib/msgpackr.min.js" as="script">
 
   
   
   <script>
     (function(){
       var b=(window.__BASE_URL||'');
-      ['vendor/rippleui.css','vendor/prism-dark.css','vendor/highlight-js.css','vendor/xterm.css'].forEach(function(h){
+      // Critical CSS only - rippleui needed for layout
+      ['vendor/rippleui.css'].forEach(function(h){
         var l=document.createElement('link');l.rel='stylesheet';l.href=b+'/'+h;document.head.appendChild(l);
       });
-      ['vendor/highlight.min.js','vendor/xterm.min.js','vendor/xterm-addon-fit.min.js'].forEach(function(s){
-        var e=document.createElement('script');e.defer=true;e.src=b+'/'+s;document.head.appendChild(e);
+      // Non-critical CSS - load async via media trick
+      ['vendor/prism-dark.css','vendor/highlight-js.css','vendor/xterm.css'].forEach(function(h){
+        var l=document.createElement('link');l.rel='stylesheet';l.href=b+'/'+h;l.media='print';l.onload=function(){l.media='all';};document.head.appendChild(l);
       });
+      // Vendor JS - lazy load on idle or first use
+      window._vendorLoaded = false;
+      window._loadVendorJS = function() {
+        if (window._vendorLoaded) return;
+        window._vendorLoaded = true;
+        ['vendor/highlight.min.js','vendor/xterm.min.js','vendor/xterm-addon-fit.min.js'].forEach(function(s){
+          var e=document.createElement('script');e.defer=true;e.src=b+'/'+s;document.head.appendChild(e);
+        });
+      };
+      if (typeof requestIdleCallback !== 'undefined') requestIdleCallback(window._loadVendorJS, { timeout: 3000 });
+      else setTimeout(window._loadVendorJS, 1500);
     })();
   </script>
 
     <link rel="stylesheet" href="/gm/css/main.css">
-  <link rel="stylesheet" href="/gm/css/tools-popup.css">
+  <link rel="stylesheet" href="/gm/css/tools-popup.css" media="print" onload="this.media='all'">
 </head>
 <body>
   <!-- Sidebar overlay (mobile) -->
@@ -278,20 +294,20 @@
   <script defer src="/gm/lib/msgpackr.min.js"></script>
   <script defer src="/gm/js/websocket-manager.js"></script>
   <script defer src="/gm/js/ws-client.js"></script>
-<script defer src="/gm/js/syntax-highlighter.js"></script>
+  <script defer src="/gm/js/syntax-highlighter.js"></script>
   <script defer src="/gm/js/dialogs.js"></script>
   <script defer src="/gm/js/ui-components.js"></script>
   <script defer src="/gm/js/state-barrier.js"></script>
-   <script defer src="/gm/js/terminal.js"></script>
-   <script defer src="/gm/js/script-runner.js"></script>
-   <script defer src="/gm/js/tools-manager-ui.js"></script>
-   <script defer src="/gm/js/tools-manager.js"></script>
-   <script defer src="/gm/js/stt-handler.js"></script>
-   <script defer src="/gm/js/voice.js"></script>
-   <script defer src="/gm/js/pm2-monitor.js"></script>
-   <script defer src="/gm/js/client.js"></script>
-   <script defer src="/gm/js/features.js"></script>
-   <script defer src="/gm/js/agent-auth.js"></script>
+  <script defer src="/gm/js/terminal.js"></script>
+  <script defer src="/gm/js/script-runner.js"></script>
+  <script defer src="/gm/js/tools-manager-ui.js"></script>
+  <script defer src="/gm/js/tools-manager.js"></script>
+  <script defer src="/gm/js/stt-handler.js"></script>
+  <script defer src="/gm/js/voice.js"></script>
+  <script defer src="/gm/js/pm2-monitor.js"></script>
+  <script defer src="/gm/js/client.js"></script>
+  <script defer src="/gm/js/features.js"></script>
+  <script defer src="/gm/js/agent-auth.js"></script>
 
   <script>
     const savedTheme = localStorage.getItem('theme') || 'light';

package/static/js/client.js

@@ -103,28 +103,22 @@ class AgentGUIClient {
     try {
       this._dbg('Initializing AgentGUI client');
 
-      // Initialize renderer
+      // 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);
 
-      // Initialize image loader
       if (typeof ImageLoader !== 'undefined') {
         window.imageLoader = new ImageLoader();
-        this._dbg('Image loader initialized');
       }
 
-      // Setup event listeners
       this.setupWebSocketListeners();
       this.setupRendererListeners();
-
-      // Setup UI elements (must happen before loading data so DOM refs exist)
       this.setupUI();
 
-      // Connect WebSocket before loading data (RPC requires connection)
-      if (this.config.autoConnect) {
-        await this.connectWebSocket();
-      }
-
-      // Load initial data in parallel - none of these depend on each other
+      // Wait for WS, then load data in parallel
+      await wsReady;
       await Promise.all([
         this.loadAgents(),
         this.loadConversations(),
@@ -2162,6 +2156,56 @@ class AgentGUIClient {
     }
   }
 
+  _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);
+    for (const chunk of deferred) {
+      const b = chunk.block;
+      if (b.type === 'tool_result') {
+        const tid = b.tool_use_id;
+        const toolUseEl = (tid ? blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`) : null)
+          || (blocksEl.lastElementChild?.classList.contains('block-tool-use') ? blocksEl.lastElementChild : null);
+        if (toolUseEl) this.renderer.mergeResultIntoToolUse(toolUseEl, b);
+      } else if (b.type === 'tool_status') {
+        const tid = b.tool_use_id;
+        const toolUseEl = tid && blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`);
+        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');
+        }
+      }
+    }
+  }
+
+  _getLazyObserver() {
+    if (this._lazyObserver) return this._lazyObserver;
+    if (typeof IntersectionObserver === 'undefined') return null;
+    this._lazyObserver = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        const msgDiv = entry.target;
+        const pendingChunks = msgDiv._lazyChunks;
+        if (!pendingChunks) continue;
+        delete msgDiv._lazyChunks;
+        this._lazyObserver.unobserve(msgDiv);
+        const blocksEl = msgDiv.querySelector('.message-blocks');
+        if (blocksEl) this._hydrateSessionBlocks(blocksEl, pendingChunks);
+      }
+    }, { rootMargin: '400px 0px' });
+    return this._lazyObserver;
+  }
+
   _renderConversationContent(messagesContainer, chunks, userMessages, activeSessionId) {
     if (!chunks || chunks.length === 0) return;
     const sessionMap = new Map();
@@ -2169,6 +2213,13 @@ class AgentGUIClient {
       if (!sessionMap.has(chunk.sessionId)) sessionMap.set(chunk.sessionId, []);
       sessionMap.get(chunk.sessionId).push(chunk);
     }
+
+    const sessionIds = [...sessionMap.keys()];
+    const EAGER_TAIL = 8;
+    const eagerSet = new Set(sessionIds.slice(-EAGER_TAIL));
+    if (activeSessionId) eagerSet.add(activeSessionId);
+    const observer = sessionIds.length > EAGER_TAIL ? this._getLazyObserver() : null;
+
     const frag = document.createDocumentFragment();
     let ui = 0;
     for (const [sid, list] of sessionMap) {
@@ -2185,39 +2236,17 @@ class AgentGUIClient {
       const msgDiv = document.createElement('div');
       msgDiv.className = `message message-assistant${isActive ? ' streaming-message' : ''}`;
       msgDiv.id = isActive ? `streaming-${sid}` : `message-${sid}`;
+      msgDiv.setAttribute('data-session-id', sid);
       msgDiv.innerHTML = '<div class="message-role">Assistant</div><div class="message-blocks streaming-blocks"></div>';
       const blocksEl = msgDiv.querySelector('.message-blocks');
-      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);
-      for (const chunk of deferred) {
-        const b = chunk.block;
-        if (b.type === 'tool_result') {
-          const tid = b.tool_use_id;
-          const toolUseEl = (tid ? blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`) : null)
-            || (blocksEl.lastElementChild?.classList.contains('block-tool-use') ? blocksEl.lastElementChild : null);
-          if (toolUseEl) this.renderer.mergeResultIntoToolUse(toolUseEl, b);
-        } else if (b.type === 'tool_status') {
-          const tid = b.tool_use_id;
-          const toolUseEl = tid && blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`);
-          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');
-            }
-          }
-        }
+
+      if (observer && !eagerSet.has(sid)) {
+        msgDiv._lazyChunks = list;
+        observer.observe(msgDiv);
+      } else {
+        this._hydrateSessionBlocks(blocksEl, list);
       }
+
       if (isActive) {
         const ind = document.createElement('div');
         ind.className = 'streaming-indicator';
@@ -2759,6 +2788,7 @@ class AgentGUIClient {
   }
 
   async loadConversationMessages(conversationId) {
+    performance.mark(`conv-load-start:${conversationId}`);
     try {
       if (this._previousConvAbort) {
         this._previousConvAbort.abort();
@@ -2828,11 +2858,13 @@ class AgentGUIClient {
 
       this.conversationCache.delete(conversationId);
 
+      if (this._lazyObserver) { this._lazyObserver.disconnect(); this._lazyObserver = null; }
       this._showSkeletonLoading(conversationId);
 
       let fullData;
       try {
         fullData = await window.wsClient.rpc('conv.full', { id: conversationId });
+        performance.mark(`conv-data-received:${conversationId}`);
         if (convSignal.aborted) return;
       } catch (wsErr) {
         if (wsErr.code === 404) {
@@ -2960,7 +2992,11 @@ class AgentGUIClient {
 
         if (chunks.length > 0) {
           const activeSessionId = (shouldResumeStreaming && latestSession) ? latestSession.id : null;
+          performance.mark(`conv-render-start:${conversationId}`);
           if (!convSignal.aborted) this._renderConversationContent(messagesEl, chunks, userMessages, activeSessionId);
+          performance.mark(`conv-render-complete:${conversationId}`);
+          performance.measure(`conv-render:${conversationId}`, `conv-render-start:${conversationId}`, `conv-render-complete:${conversationId}`);
+          performance.measure(`conv-data-fetch:${conversationId}`, `conv-load-start:${conversationId}`, `conv-data-received:${conversationId}`);
         } else {
           if (!convSignal.aborted) messagesEl.appendChild(this.renderMessagesFragment(allMessages || []));
         }
@@ -3410,6 +3446,11 @@ class AgentGUIClient {
   }
 }
 
+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) }));
+};
+
 // Global instance
 let agentGUIClient = null;
 
@@ -3419,7 +3460,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     agentGUIClient = new AgentGUIClient();
     window.agentGuiClient = agentGUIClient;
     await agentGUIClient.init();
-    this._dbg('AgentGUI ready');
+    agentGUIClient._dbg('AgentGUI ready');
   } catch (error) {
     console.error('Failed to initialize AgentGUI:', error);
   }

package/static/js/streaming-renderer.js

@@ -66,25 +66,11 @@ class StreamingRenderer {
       throw new Error(`Output container not found: ${outputContainerId}`);
     }
 
-    this.setupDOMObserver();
-    this.setupResizeObserver();
     this.setupScrollOptimization();
     StreamingRenderer._setupGlobalLazyHL();
     return this;
   }
 
-  /**
-   * Setup DOM mutation observer for external changes
-   */
-  setupDOMObserver() {
-  }
-
-  /**
-   * Setup resize observer for viewport changes
-   */
-  setupResizeObserver() {
-  }
-
   /**
    * Setup scroll optimization and auto-scroll
    */
@@ -2273,9 +2259,6 @@ class StreamingRenderer {
     this._userScrolledUp = false;
   }
 
-  updateVirtualScroll() {
-  }
-
   /**
    * Update DOM node count for monitoring
    */

package/static/js/tools-manager.js

@@ -4,16 +4,16 @@
   var tools = [];
   var isRefreshing = false;
 
+  var hasRefreshed = false;
   function init() {
     if (!btn || !popup) return;
     btn.style.display = 'flex';
-    btn.addEventListener('click', togglePopup);
+    btn.addEventListener('click', function() { if (!hasRefreshed) { hasRefreshed = true; refresh(); } togglePopup(); });
     document.addEventListener('click', function(e) {
       if (!btn.contains(e.target) && !popup.contains(e.target)) closePopup();
     });
     window.addEventListener('ws-message', onWsMessage);
     initVoiceControls();
-    refresh();
   }
 
   function initVoiceControls() {

package/lib/acp-runner.js

@@ -1,136 +0,0 @@
-import { spawn } from 'child_process';
-import { spawnSync } from 'child_process';
-
-const isWindows = process.platform === 'win32';
-
-function getSpawnOptions(cwd) {
-  const options = { cwd, windowsHide: true };
-  if (isWindows) options.shell = true;
-  options.env = { ...process.env };
-  delete options.env.CLAUDECODE;
-  return options;
-}
-
-function resolveCommand(command, npxPackage) {
-  const whichCmd = isWindows ? 'where' : 'which';
-  const check = spawnSync(whichCmd, [command], { encoding: 'utf-8', timeout: 3000 });
-  if (check.status === 0 && (check.stdout || '').trim()) return { cmd: command, prefixArgs: [] };
-  if (npxPackage) {
-    if (spawnSync(whichCmd, ['npx'], { encoding: 'utf-8', timeout: 3000 }).status === 0) return { cmd: 'npx', prefixArgs: ['--yes', npxPackage] };
-    if (spawnSync(whichCmd, ['bun'], { encoding: 'utf-8', timeout: 3000 }).status === 0) return { cmd: 'bun', prefixArgs: ['x', npxPackage] };
-  }
-  return { cmd: command, prefixArgs: [] };
-}
-
-export function runACPOnce(agent, prompt, cwd, config = {}) {
-  return new Promise((resolve, reject) => {
-    const { timeout = 300000, onEvent = null, onError = null } = config;
-    let cmd, args;
-    if (agent.requiresAdapter && agent.adapterCommand) { cmd = agent.adapterCommand; args = [...agent.adapterArgs]; }
-    else { const resolved = resolveCommand(agent.command, agent.npxPackage); cmd = resolved.cmd; args = [...resolved.prefixArgs, ...agent.buildArgs(prompt, config)]; }
-    const spawnOpts = getSpawnOptions(cwd);
-    if (Object.keys(agent.spawnEnv).length > 0) spawnOpts.env = { ...spawnOpts.env, ...agent.spawnEnv };
-    const proc = spawn(cmd, args, spawnOpts);
-    if (config.onPid) { try { config.onPid(proc.pid); } catch (_) {} }
-    if (config.onProcess) { try { config.onProcess(proc); } catch (_) {} }
-    const outputs = [];
-    let timedOut = false, sessionId = null, requestId = 0, initialized = false, stderrText = '';
-    const timeoutHandle = setTimeout(() => { timedOut = true; proc.kill(); reject(new Error(`${agent.name} ACP timeout after ${timeout}ms`)); }, timeout);
-
-    const handleMessage = (message) => {
-      const normalized = agent.protocolHandler(message, { sessionId, initialized });
-      if (!normalized) { if (message.id === 1 && message.result) initialized = true; return; }
-      outputs.push(normalized);
-      if (normalized.session_id) sessionId = normalized.session_id;
-      if (onEvent) { try { onEvent(normalized); } catch (e) { console.error(`[${agent.id}] onEvent error: ${e.message}`); } }
-    };
-
-    proc.stdout.on('error', () => {});
-    proc.stderr.on('error', () => {});
-    let buffer = '';
-    proc.stdout.on('data', (chunk) => {
-      if (timedOut) return;
-      buffer += chunk.toString();
-      const lines = buffer.split('\n'); buffer = lines.pop();
-      for (const line of lines) { if (line.trim()) { try { handleMessage(JSON.parse(line)); } catch (e) { console.error(`[${agent.id}] JSON parse error:`, line.substring(0, 100)); } } }
-    });
-    proc.stderr.on('data', (chunk) => { const t = chunk.toString(); stderrText += t; console.error(`[${agent.id}] stderr:`, t); if (onError) { try { onError(t); } catch (_) {} } });
-
-    proc.stdin.on('error', () => {});
-    proc.stdin.write(JSON.stringify({ jsonrpc: '2.0', id: ++requestId, method: 'initialize', params: { protocolVersion: 1, clientCapabilities: { fs: { readTextFile: true, writeTextFile: true }, terminal: true }, clientInfo: { name: 'agentgui', title: 'AgentGUI', version: '1.0.0' } } }) + '\n');
-
-    let sessionCreated = false;
-    const checkInitAndSend = () => {
-      if (initialized && !sessionCreated) {
-        sessionCreated = true;
-        const sp = { cwd, mcpServers: [] };
-        if (config.model) sp.model = config.model;
-        if (config.subAgent) sp.agent = config.subAgent;
-        if (config.systemPrompt) sp.systemPrompt = config.systemPrompt;
-        proc.stdin.write(JSON.stringify({ jsonrpc: '2.0', id: ++requestId, method: 'session/new', params: sp }) + '\n');
-      } else if (!initialized) { setTimeout(checkInitAndSend, 100); }
-    };
-
-    let promptId = null, completed = false, draining = false;
-    const enhancedHandler = (message) => {
-      if (message.id && message.result && message.result.sessionId) {
-        sessionId = message.result.sessionId;
-        promptId = ++requestId;
-        proc.stdin.write(JSON.stringify({ jsonrpc: '2.0', id: promptId, method: 'session/prompt', params: { sessionId, prompt: [{ type: 'text', text: prompt }] } }) + '\n');
-        return;
-      }
-      if (message.id === promptId && message.result && message.result.stopReason) {
-        completed = true; draining = true; clearTimeout(timeoutHandle);
-        setTimeout(() => { draining = false; try { proc.kill(); } catch (_) {} resolve({ outputs, sessionId }); }, 1000);
-        return;
-      }
-      if (message.id === promptId && message.error) {
-        completed = true; draining = true; clearTimeout(timeoutHandle); handleMessage(message);
-        setTimeout(() => { draining = false; try { proc.kill(); } catch (_) {} reject(new Error(message.error.message || 'ACP prompt error')); }, 1000);
-        return;
-      }
-      handleMessage(message);
-    };
-
-    buffer = '';
-    proc.stdout.removeAllListeners('data');
-    proc.stdout.on('data', (chunk) => {
-      if (timedOut || (completed && !draining)) return;
-      buffer += chunk.toString();
-      const lines = buffer.split('\n'); buffer = lines.pop();
-      for (const line of lines) {
-        if (line.trim()) {
-          try { const m = JSON.parse(line); if (m.id === 1 && m.result) initialized = true; enhancedHandler(m); }
-          catch (e) { console.error(`[${agent.id}] JSON parse error:`, line.substring(0, 100)); }
-        }
-      }
-    });
-    setTimeout(checkInitAndSend, 200);
-
-    proc.on('close', (code) => {
-      clearTimeout(timeoutHandle);
-      if (timedOut || completed) return;
-      if (buffer.trim()) { try { const m = JSON.parse(buffer.trim()); if (m.id === 1 && m.result) initialized = true; enhancedHandler(m); } catch (_) {} }
-      if (code === 0 || outputs.length > 0) resolve({ outputs, sessionId });
-      else { const err = new Error(`${agent.name} ACP exited with code ${code}${stderrText ? `: ${stderrText.substring(0, 200)}` : ''}`); err.isPrematureEnd = true; err.exitCode = code; err.stderrText = stderrText; reject(err); }
-    });
-    proc.on('error', (err) => { clearTimeout(timeoutHandle); reject(err); });
-  });
-}
-
-export async function runACPWithRetry(agent, prompt, cwd, config = {}, _retryCount = 0) {
-  const maxRetries = config.maxRetries ?? 1;
-  try { return await runACPOnce(agent, prompt, cwd, config); }
-  catch (err) {
-    const isEmptyExit = err.isPrematureEnd || (err.message && err.message.includes('ACP exited with code'));
-    const isBinaryError = err.code === 'ENOENT' || (err.message && err.message.includes('ENOENT'));
-    if ((isEmptyExit || isBinaryError) && _retryCount < maxRetries) {
-      const delay = Math.min(1000 * Math.pow(2, _retryCount), 5000);
-      console.error(`[${agent.id}] ACP attempt ${_retryCount + 1} failed: ${err.message}. Retrying in ${delay}ms...`);
-      await new Promise(r => setTimeout(r, delay));
-      return runACPWithRetry(agent, prompt, cwd, config, _retryCount + 1);
-    }
-    if (err.isPrematureEnd) { const premErr = new Error(err.message); premErr.isPrematureEnd = true; premErr.exitCode = err.exitCode; premErr.stderrText = err.stderrText; throw premErr; }
-    throw err;
-  }
-}