agentgui 1.0.152 → 1.0.154

package/database.js

@@ -1031,6 +1031,11 @@ export const queries = {
     });
   },
 
+  getConversationChunkCount(conversationId) {
+    const stmt = prep('SELECT COUNT(*) as count FROM chunks WHERE conversationId = ?');
+    return stmt.get(conversationId).count;
+  },
+
   getConversationChunks(conversationId) {
     const stmt = prep(
       `SELECT id, sessionId, conversationId, sequence, type, data, created_at
@@ -1049,6 +1054,26 @@ export const queries = {
     });
   },
 
+  getRecentConversationChunks(conversationId, limit) {
+    const stmt = prep(
+      `SELECT id, sessionId, conversationId, sequence, type, data, created_at
+       FROM chunks WHERE conversationId = ?
+       ORDER BY created_at DESC LIMIT ?`
+    );
+    const rows = stmt.all(conversationId, limit);
+    rows.reverse();
+    return rows.map(row => {
+      try {
+        return {
+          ...row,
+          data: typeof row.data === 'string' ? JSON.parse(row.data) : row.data
+        };
+      } catch (e) {
+        return row;
+      }
+    });
+  },
+
   getChunksSince(sessionId, timestamp) {
     const stmt = prep(
       `SELECT id, sessionId, conversationId, sequence, type, data, created_at

package/lib/claude-runner.js

@@ -46,7 +46,8 @@ class AgentRunner {
       const {
         timeout = 300000,
         onEvent = null,
-        onError = null
+        onError = null,
+        onRateLimit = null
       } = config;
 
       const args = this.buildArgs(prompt, config);
@@ -60,6 +61,8 @@ class AgentRunner {
       const outputs = [];
       let timedOut = false;
       let sessionId = null;
+      let rateLimited = false;
+      let retryAfterSec = 60;
 
       const timeoutHandle = setTimeout(() => {
         timedOut = true;
@@ -103,6 +106,14 @@ class AgentRunner {
       proc.stderr.on('data', (chunk) => {
         const errorText = chunk.toString();
         console.error(`[${this.id}] stderr:`, errorText);
+
+        const rateLimitMatch = errorText.match(/rate.?limit|429|too many requests|overloaded|throttl/i);
+        if (rateLimitMatch) {
+          rateLimited = true;
+          const retryMatch = errorText.match(/retry.?after[:\s]+(\d+)/i);
+          if (retryMatch) retryAfterSec = parseInt(retryMatch[1], 10) || 60;
+        }
+
         if (onError) {
           try { onError(errorText); } catch (e) {}
         }
@@ -112,7 +123,17 @@ class AgentRunner {
         clearTimeout(timeoutHandle);
         if (timedOut) return;
 
-        // Some agents return non-zero but still produce valid output
+        if (rateLimited) {
+          const err = new Error(`Rate limited - retry after ${retryAfterSec}s`);
+          err.rateLimited = true;
+          err.retryAfterSec = retryAfterSec;
+          if (onRateLimit) {
+            try { onRateLimit({ retryAfterSec }); } catch (e) {}
+          }
+          reject(err);
+          return;
+        }
+
         const success = code === 0 || (outputs.length > 0 && this.allowNonZeroExit);
 
         if (success) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.152",
+  "version": "1.0.154",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",

package/server.js

@@ -24,9 +24,11 @@ const SYSTEM_PROMPT = `Write all responses as clean semantic HTML. Use tags like
 
 const activeExecutions = new Map();
 const messageQueues = new Map();
+const rateLimitState = new Map();
 const STUCK_AGENT_THRESHOLD_MS = 600000;
 const NO_PID_GRACE_PERIOD_MS = 60000;
 const STALE_SESSION_MIN_AGE_MS = 30000;
+const DEFAULT_RATE_LIMIT_COOLDOWN_MS = 60000;
 
 const debugLog = (msg) => {
   const timestamp = new Date().toISOString();
@@ -298,8 +300,8 @@ const server = http.createServer(async (req, res) => {
       const conv = queries.getConversation(conversationId);
       if (!conv) { sendJSON(req, res, 404, { error: 'Conversation not found' }); return; }
 
-      const prompt = body.content || '';
-      const agentId = body.agentId || 'claude-code';
+      const prompt = body.content || body.message || '';
+      const agentId = body.agentId || conv.agentType || conv.agentId || 'claude-code';
 
       const userMessage = queries.createMessage(conversationId, 'user', prompt);
       queries.createEvent('message.created', { role: 'user', messageId: userMessage.id }, conversationId);
@@ -362,14 +364,28 @@ const server = http.createServer(async (req, res) => {
       const latestSession = queries.getLatestSession(conversationId);
       const isActivelyStreaming = activeExecutions.has(conversationId) ||
         (latestSession && latestSession.status === 'active');
-      const chunks = queries.getConversationChunks(conversationId);
+
+      const url = new URL(req.url, 'http://localhost');
+      const chunkLimit = Math.min(parseInt(url.searchParams.get('chunkLimit') || '500'), 5000);
+      const allChunks = url.searchParams.get('allChunks') === '1';
+
+      const totalChunks = queries.getConversationChunkCount(conversationId);
+      let chunks;
+      if (allChunks || totalChunks <= chunkLimit) {
+        chunks = queries.getConversationChunks(conversationId);
+      } else {
+        chunks = queries.getRecentConversationChunks(conversationId, chunkLimit);
+      }
       const msgResult = queries.getPaginatedMessages(conversationId, 100, 0);
+      const rateLimitInfo = rateLimitState.get(conversationId) || null;
             sendJSON(req, res, 200, {
         conversation: conv,
         isActivelyStreaming,
         latestSession,
         chunks,
-        messages: msgResult.messages
+        totalChunks,
+        messages: msgResult.messages,
+        rateLimitInfo
       });
       return;
     }
@@ -702,6 +718,7 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
   activeExecutions.set(conversationId, { pid: null, startTime, sessionId, lastActivity: startTime });
   queries.setIsStreaming(conversationId, true);
   queries.updateSession(sessionId, { status: 'active' });
+  const batcher = createChunkBatcher();
 
   try {
     debugLog(`[stream] Starting: conversationId=${conversationId}, sessionId=${sessionId}`);
@@ -713,7 +730,6 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
     let allBlocks = [];
     let eventCount = 0;
     let currentSequence = queries.getMaxSequence(sessionId) ?? -1;
-    const batcher = createChunkBatcher();
 
     const onEvent = (parsed) => {
       eventCount++;
@@ -826,12 +842,13 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
     };
 
     const { outputs, sessionId: claudeSessionId } = await runClaudeWithStreaming(content, cwd, agentId || 'claude-code', config);
+    activeExecutions.delete(conversationId);
     batcher.drain();
     debugLog(`[stream] Claude returned ${outputs.length} outputs, sessionId=${claudeSessionId}`);
 
-    if (claudeSessionId && !conv?.claudeSessionId) {
+    if (claudeSessionId) {
       queries.setClaudeSessionId(conversationId, claudeSessionId);
-      debugLog(`[stream] Stored claudeSessionId=${claudeSessionId}`);
+      debugLog(`[stream] Updated claudeSessionId=${claudeSessionId}`);
     }
 
     // Mark session as complete
@@ -854,13 +871,47 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
     const elapsed = Date.now() - startTime;
     debugLog(`[stream] Error after ${elapsed}ms: ${error.message}`);
 
-    // Mark session as error
+    const isRateLimit = error.rateLimited ||
+      /rate.?limit|429|too many requests|overloaded|throttl/i.test(error.message);
+
     queries.updateSession(sessionId, {
       status: 'error',
       error: error.message,
       completed_at: Date.now()
     });
 
+    if (isRateLimit) {
+      const cooldownMs = (error.retryAfterSec || 60) * 1000;
+      const retryAt = Date.now() + cooldownMs;
+      rateLimitState.set(conversationId, { retryAt, cooldownMs });
+      debugLog(`[rate-limit] Conv ${conversationId} hit rate limit, retry in ${cooldownMs}ms`);
+
+      broadcastSync({
+        type: 'rate_limit_hit',
+        sessionId,
+        conversationId,
+        retryAfterMs: cooldownMs,
+        retryAt,
+        timestamp: Date.now()
+      });
+
+      batcher.drain();
+      activeExecutions.delete(conversationId);
+      queries.setIsStreaming(conversationId, false);
+
+      setTimeout(() => {
+        rateLimitState.delete(conversationId);
+        debugLog(`[rate-limit] Conv ${conversationId} cooldown expired, restarting`);
+        broadcastSync({
+          type: 'rate_limit_clear',
+          conversationId,
+          timestamp: Date.now()
+        });
+        scheduleRetry(conversationId, messageId, content, agentId);
+      }, cooldownMs);
+      return;
+    }
+
     broadcastSync({
       type: 'streaming_error',
       sessionId,
@@ -881,10 +932,29 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
     batcher.drain();
     activeExecutions.delete(conversationId);
     queries.setIsStreaming(conversationId, false);
-    drainMessageQueue(conversationId);
+    if (!rateLimitState.has(conversationId)) {
+      drainMessageQueue(conversationId);
+    }
   }
 }
 
+function scheduleRetry(conversationId, messageId, content, agentId) {
+  const newSession = queries.createSession(conversationId);
+  queries.createEvent('session.created', { messageId, sessionId: newSession.id, retryReason: 'rate_limit' }, conversationId, newSession.id);
+
+  broadcastSync({
+    type: 'streaming_start',
+    sessionId: newSession.id,
+    conversationId,
+    messageId,
+    agentId,
+    timestamp: Date.now()
+  });
+
+  processMessageWithStreaming(conversationId, messageId, newSession.id, content, agentId)
+    .catch(err => debugLog(`[retry] Error: ${err.message}`));
+}
+
 function drainMessageQueue(conversationId) {
   const queue = messageQueues.get(conversationId);
   if (!queue || queue.length === 0) return;
@@ -932,7 +1002,7 @@ async function processMessage(conversationId, messageId, content, agentId) {
       systemPrompt: SYSTEM_PROMPT
     });
 
-    if (claudeSessionId && !conv?.claudeSessionId) {
+    if (claudeSessionId) {
       queries.setClaudeSessionId(conversationId, claudeSessionId);
     }
 
@@ -1060,7 +1130,8 @@ wss.on('connection', (ws, req) => {
 const BROADCAST_TYPES = new Set([
   'message_created', 'conversation_created', 'conversations_updated',
   'conversation_deleted', 'queue_status', 'streaming_start',
-  'streaming_complete', 'streaming_error'
+  'streaming_complete', 'streaming_error', 'rate_limit_hit',
+  'rate_limit_clear'
 ]);
 
 const wsBatchQueues = new Map();

package/static/index.html

@@ -527,39 +527,6 @@
       font-size: 0.75rem;
     }
 
-    .streaming-block-tool-use {
-      margin: 0.25rem 0;
-      border-left: 3px solid #06b6d4;
-      background: rgba(6,182,212,0.06);
-      border-radius: 0 0.375rem 0.375rem 0;
-      overflow: hidden;
-    }
-    .streaming-block-tool-use.folded-tool {
-      border-left: none;
-      border-radius: 0.375rem;
-      margin: 0.125rem 0;
-    }
-
-    .tool-use-header {
-      padding: 0.5rem 0.75rem;
-      font-weight: 600;
-      font-size: 0.85rem;
-      display: flex;
-      align-items: center;
-      gap: 0.375rem;
-    }
-
-    .tool-use-icon {
-      font-size: 0.9rem;
-      opacity: 0.7;
-    }
-
-    .tool-use-name {
-      color: #0891b2;
-    }
-
-    html.dark .tool-use-name { color: #22d3ee; }
-
     .tool-input-details {
     }
 
@@ -1102,6 +1069,12 @@
       opacity: 0.3;
     }
 
+    .conversation-messages { contain: content; }
+    .streaming-blocks { contain: content; }
+    .sidebar-list { contain: strict; content-visibility: auto; }
+    .message { contain: layout style; content-visibility: auto; contain-intrinsic-size: auto 120px; }
+    #output-scroll { will-change: transform; }
+
     .voice-block .voice-result-stats {
       font-size: 0.8rem;
       color: var(--color-text-secondary);
@@ -1585,6 +1558,90 @@
       font-size: 0.7rem;
     }
 
+    /* --- Error variant of folded-tool --- */
+    .folded-tool.folded-tool-error {
+      background: #fef2f2;
+      border-color: #fecaca;
+    }
+    html.dark .folded-tool.folded-tool-error {
+      background: #1c0f0f;
+      border-color: #7f1d1d;
+    }
+    .folded-tool-error > .folded-tool-bar {
+      background: #fee2e2;
+    }
+    html.dark .folded-tool-error > .folded-tool-bar {
+      background: #2c1010;
+    }
+    .folded-tool-error > .folded-tool-bar::before { color: #ef4444; }
+    html.dark .folded-tool-error > .folded-tool-bar::before { color: #f87171; }
+    .folded-tool-error > .folded-tool-bar:hover { background: #fecaca; }
+    html.dark .folded-tool-error > .folded-tool-bar:hover { background: #451a1a; }
+    .folded-tool-error .folded-tool-icon { color: #ef4444; }
+    html.dark .folded-tool-error .folded-tool-icon { color: #f87171; }
+    .folded-tool-error .folded-tool-name { color: #991b1b; }
+    html.dark .folded-tool-error .folded-tool-name { color: #fca5a5; }
+    .folded-tool-error .folded-tool-desc { color: #b91c1c; }
+    html.dark .folded-tool-error .folded-tool-desc { color: #f87171; }
+    .folded-tool-error > .folded-tool-body { border-top-color: #fecaca; }
+    html.dark .folded-tool-error > .folded-tool-body { border-top-color: #7f1d1d; }
+
+    /* --- Collapsible Code Summary --- */
+    .collapsible-code {
+      margin: 0.25rem 0;
+      border-radius: 0.375rem;
+      overflow: hidden;
+      background: #1e293b;
+      border: 1px solid #334155;
+    }
+    .collapsible-code-summary {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.3rem 0.75rem;
+      cursor: pointer;
+      user-select: none;
+      list-style: none;
+      font-size: 0.75rem;
+      line-height: 1.3;
+      background: #1f2937;
+      color: #9ca3af;
+      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
+      transition: background 0.15s;
+    }
+    .collapsible-code-summary::-webkit-details-marker { display: none; }
+    .collapsible-code-summary::marker { display: none; content: ''; }
+    .collapsible-code-summary::before {
+      content: '\25b6';
+      font-size: 0.5rem;
+      margin-right: 0.125rem;
+      display: inline-block;
+      transition: transform 0.15s;
+      color: #6b7280;
+      flex-shrink: 0;
+    }
+    .collapsible-code[open] > .collapsible-code-summary::before { transform: rotate(90deg); }
+    .collapsible-code-summary:hover { background: #374151; }
+    .collapsible-code-summary .copy-code-btn {
+      margin-left: auto;
+      background: none;
+      border: none;
+      color: #6b7280;
+      cursor: pointer;
+      padding: 0.125rem;
+      border-radius: 0.25rem;
+      display: flex;
+      align-items: center;
+      transition: all 0.15s;
+    }
+    .collapsible-code-summary .copy-code-btn:hover { color: #e5e7eb; background: #4b5563; }
+    .collapsible-code-summary .copy-code-btn svg { width: 0.875rem; height: 0.875rem; }
+    .collapsible-code-label {
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
     /* --- Tool Result Block --- */
     .block-tool-result {
       margin-bottom: 0.25rem;
@@ -2077,6 +2134,11 @@
     </div>
   </div>
 
+  <script>
+    var _escHtmlMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+    var _escHtmlRe = /[&<>"']/g;
+    window._escHtml = function(t) { return t.replace(_escHtmlRe, function(c) { return _escHtmlMap[c]; }); };
+  </script>
   <script defer src="/gm/js/event-processor.js"></script>
   <script defer src="/gm/js/streaming-renderer.js"></script>
   <script defer src="/gm/js/websocket-manager.js"></script>