agentgui 1.0.675 → 1.0.677

package/lib/tool-manager.js

@@ -156,7 +156,7 @@ const getPublishedVersion = async (pkg) => {
 const checkCliInstalled = (pkg) => {
   try {
     const cmd = isWindows ? 'where' : 'which';
-    const binMap = { '@anthropic-ai/claude-code': 'claude', 'opencode-ai': 'opencode', '@google/gemini-cli': 'gemini', '@kilocode/cli': 'kilo', '@openai/codex': 'codex' };
+    const binMap = { '@anthropic-ai/claude-code': 'claude', 'opencode-ai': 'opencode', '@google/gemini-cli': 'gemini', '@kilocode/cli': 'kilo', '@openai/codex': 'codex', 'agent-browser': 'agent-browser' };
     const bin = binMap[pkg];
     if (bin) {
       execSync(`${cmd} ${bin}`, { stdio: 'pipe', timeout: 3000, windowsHide: true });
@@ -168,12 +168,14 @@ const checkCliInstalled = (pkg) => {
 
 const getCliVersion = (pkg) => {
   try {
-    const binMap = { '@anthropic-ai/claude-code': 'claude', 'opencode-ai': 'opencode', '@google/gemini-cli': 'gemini', '@kilocode/cli': 'kilo', '@openai/codex': 'codex' };
+    const binMap = { '@anthropic-ai/claude-code': 'claude', 'opencode-ai': 'opencode', '@google/gemini-cli': 'gemini', '@kilocode/cli': 'kilo', '@openai/codex': 'codex', 'agent-browser': 'agent-browser' };
     const bin = binMap[pkg];
     if (bin) {
       try {
         // Use short timeout - we already know the binary exists from checkCliInstalled
-        const out = execSync(`${bin} --version`, { stdio: 'pipe', timeout: 1000, encoding: 'utf8', windowsHide: true });
+        // agent-browser uses -V (--version prints help); others use --version
+        const versionFlag = pkg === 'agent-browser' ? '-V' : '--version';
+        const out = execSync(`${bin} ${versionFlag}`, { stdio: 'pipe', timeout: 1000, encoding: 'utf8', windowsHide: true });
         const match = out.match(/(\d+\.\d+\.\d+)/);
         if (match) {
           console.log(`[tool-manager] CLI ${pkg} (${bin}) version: ${match[1]}`);

package/lib/ws-handlers-conv.js

@@ -7,7 +7,7 @@ function expandTilde(p) { return p && p.startsWith('~') ? path.join(os.homedir()
 
 export function register(router, deps) {
   const { queries, activeExecutions, messageQueues, rateLimitState,
-    broadcastSync, processMessageWithStreaming, activeProcessesByConvId, steeringTimeouts, cleanupExecution } = deps;
+    broadcastSync, processMessageWithStreaming, cleanupExecution, activeProcessesByConvId, steeringTimeouts } = deps;
 
   // Per-conversation queue seq counter for event ordering
   const queueSeqByConv = new Map();
@@ -87,8 +87,10 @@ export function register(router, deps) {
   router.handle('conv.chunks', (p) => {
     if (!queries.getConversation(p.id)) notFound('Conversation not found');
     const since = parseInt(p.since || '0');
-    const allChunks = queries.getConversationChunks(p.id);
-    return { ok: true, chunks: since > 0 ? allChunks.filter(c => c.created_at > since) : allChunks };
+    const chunks = since > 0
+      ? queries.getConversationChunksSince(p.id, since)
+      : queries.getConversationChunks(p.id);
+    return { ok: true, chunks };
   });
 
   router.handle('conv.chunks.earlier', (p) => {
@@ -131,53 +133,35 @@ export function register(router, deps) {
     const conv = queries.getConversation(p.id);
     if (!conv) notFound('Conversation not found');
     if (!p.content) fail(400, 'Missing content');
-    const entry = activeExecutions.get(p.id);
-    if (!entry) {
-      // Allow steering if we still have a process, even if execution entry is gone
-      const proc = activeProcessesByConvId.get(p.id);
-      if (!proc || !proc.stdin) fail(409, 'No active execution to steer');
-    }
-    const proc = activeProcessesByConvId.get(p.id);
-    if (!proc || !proc.stdin) fail(409, 'Process not available for steering');
 
-    const message = queries.createMessage(p.id, 'user', p.content);
-    queries.createEvent('message.created', { role: 'user', messageId: message.id }, p.id);
-    broadcastSync({ type: 'message_created', conversationId: p.id, message, timestamp: Date.now() });
+    const entry = activeExecutions.get(p.id);
+    const proc = (entry && entry.proc) || activeProcessesByConvId.get(p.id);
 
-    try {
-      // Send steering prompt using JSON-RPC format so agent processes it immediately
-      // Get the active session ID from the entry
-      const sessionId = entry?.sessionId || queries.getConversation(p.id)?.sessionId;
+    if (proc && proc.stdin && !proc.stdin.destroyed) {
+      // Agent is running and stdin is alive — inject prompt directly
+      const message = queries.createMessage(p.id, 'user', p.content);
+      queries.createEvent('message.created', { role: 'user', messageId: message.id }, p.id);
+      broadcastSync({ type: 'message_created', conversationId: p.id, message, timestamp: Date.now() });
 
-      // Send JSON-RPC prompt request with requestId for tracking
+      const sessionId = entry?.sessionId;
       const promptRequest = {
         jsonrpc: '2.0',
-        id: Date.now(), // Use timestamp as unique request ID
+        id: Date.now(),
         method: 'session/prompt',
-        params: {
-          sessionId,
-          prompt: [{ type: 'text', text: p.content }]
-        }
+        params: { sessionId, prompt: [{ type: 'text', text: p.content }] }
       };
-
       proc.stdin.write(JSON.stringify(promptRequest) + '\n');
 
-      // Clear the steering cleanup timeout so process stays alive longer
-      const timeout = steeringTimeouts.get(p.id);
-      if (timeout) {
-        clearTimeout(timeout);
-        // Set a new timeout (another 30 seconds for follow-up steers)
-        const newTimeout = setTimeout(() => {
-          activeProcessesByConvId.delete(p.id);
-          steeringTimeouts.delete(p.id);
-        }, 30000);
-        steeringTimeouts.set(p.id, newTimeout);
-      }
+      // Reset steering timeout
+      const existing = steeringTimeouts.get(p.id);
+      if (existing) clearTimeout(existing);
+      const t = setTimeout(() => { activeProcessesByConvId.delete(p.id); steeringTimeouts.delete(p.id); }, 30000);
+      steeringTimeouts.set(p.id, t);
 
       return { ok: true, steered: true, conversationId: p.id, messageId: message.id };
-    } catch (err) {
-      fail(500, `Failed to steer: ${err.message}`);
     }
+
+    fail(409, 'Process not available for steering');
   });
 
   router.handle('msg.ls', (p) => {

package/lib/ws-optimizer.js

@@ -1,8 +1,8 @@
 import { encode } from './codec.js';
 
 const MESSAGE_PRIORITY = {
-  high: ['streaming_error', 'streaming_complete', 'rate_limit_hit', 'streaming_cancelled', 'run_cancelled', 'tool_install_complete', 'tool_update_complete', 'tool_install_failed', 'tool_update_failed'],
-  normal: ['streaming_progress', 'streaming_start', 'message_created', 'queue_status', 'tool_install_progress', 'tool_update_progress'],
+  high: ['streaming_error', 'streaming_complete', 'rate_limit_hit', 'streaming_cancelled', 'run_cancelled', 'tool_install_complete', 'tool_update_complete', 'tool_install_failed', 'tool_update_failed', 'streaming_start', 'message_created'],
+  normal: ['streaming_progress', 'queue_status', 'tool_install_progress', 'tool_update_progress'],
   low: ['model_download_progress', 'stt_progress', 'tts_setup_progress', 'voice_list', 'tts_audio']
 };
 
@@ -33,7 +33,6 @@ class ClientQueue {
     this.normalPriority = [];
     this.lowPriority = [];
     this.timer = null;
-    this.lastKey = null;
     this.messageCount = 0;
     this.bytesSent = 0;
     this.windowStart = Date.now();
@@ -41,10 +40,6 @@ class ClientQueue {
   }
 
   add(event, priority) {
-    // Deduplicate by type+seq key
-    const key = event.type + (event.seq ?? '') + (event.sessionId ?? '');
-    if (this.lastKey === key) return;
-    this.lastKey = key;
     if (priority === 3) this.highPriority.push(event);
     else if (priority === 2) this.normalPriority.push(event);
     else this.lowPriority.push(event);
@@ -72,7 +67,7 @@ class ClientQueue {
       this.windowStart = now;
       this.rateLimitWarned = false;
     }
-    const batch = [...this.highPriority.splice(0), ...this.normalPriority.splice(0), ...this.lowPriority.splice(0, 5)];
+    const batch = [...this.highPriority.splice(0), ...this.normalPriority.splice(0), ...this.lowPriority.splice(0)];
     if (batch.length === 0) return;
     const messagesThisSecond = this.messageCount + batch.length;
     if (messagesThisSecond > 100) {
@@ -81,8 +76,14 @@ class ClientQueue {
         this.rateLimitWarned = true;
       }
       const allowedCount = 100 - this.messageCount;
-      if (allowedCount <= 0) { this.scheduleFlush(); return; }
-      batch.splice(allowedCount);
+      if (allowedCount <= 0) {
+        // Put everything back and reschedule — don't drop events
+        this.normalPriority.unshift(...batch);
+        this.scheduleFlush();
+        return;
+      }
+      // Return overflow to front of queue for next flush cycle
+      this.normalPriority.unshift(...batch.splice(allowedCount));
     }
     const envelope = batch.length === 1 ? batch[0] : batch;
     const binary = encode(envelope);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.675",
+  "version": "1.0.677",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",
@@ -31,9 +31,8 @@
     "busboy": "^1.6.0",
     "express": "^5.2.1",
     "form-data": "^4.0.5",
-    "fsbrowse": "^0.2.18",
+    "fsbrowse": "latest",
     "google-auth-library": "^10.5.0",
-    "gpt-tokenizer": "^3.4.0",
     "msgpackr": "^1.11.8",
     "onnxruntime-node": "1.21.0",
     "opencode-ai": "^1.2.15",

package/scripts/patch-fsbrowse.js

@@ -166,17 +166,30 @@ if (fs.existsSync(fsbrowseAppJSPath)) {
   try {
     let appContent = fs.readFileSync(fsbrowseAppJSPath, 'utf8');
 
-    // Check if theme sync is already patched
-    if (appContent.includes('setupThemeSync')) {
-      console.log('[PATCH] fsbrowse theme sync already patched');
+    // Ensure postMessage theme listener is present (storage events don't fire in same-window iframes)
+    if (appContent.includes('theme-change')) {
+      console.log('[PATCH] fsbrowse postMessage theme sync already present');
+    } else if (appContent.includes('setupThemeSync')) {
+      // setupThemeSync exists but lacks postMessage support - inject it
+      appContent = appContent.replace(
+        "    // Watch for storage changes from other tabs/windows\n    window.addEventListener('storage', e => {\n      if (e.key === 'gmgui-theme') syncTheme();\n    });",
+        "    // Watch for storage changes from other tabs/windows\n    window.addEventListener('storage', e => {\n      if (e.key === 'gmgui-theme') syncTheme();\n    });\n\n    // Watch for postMessage from parent window (same-window iframes don't receive storage events)\n    window.addEventListener('message', e => {\n      if (e.data && e.data.type === 'theme-change' && e.data.theme) syncTheme(e.data.theme);\n    });"
+      );
+      // Also make syncTheme accept an explicit theme argument
+      appContent = appContent.replace(
+        'const syncTheme = () => {\n      const theme = localStorage.getItem(\'gmgui-theme\') ||',
+        'const syncTheme = (theme) => {\n      theme = theme || localStorage.getItem(\'gmgui-theme\') ||'
+      );
+      fs.writeFileSync(fsbrowseAppJSPath, appContent, 'utf8');
+      console.log('[PATCH] fsbrowse postMessage theme sync injected');
     } else {
-      // Inject setupThemeSync call and method
+      // No setupThemeSync at all - inject full method
       const themeSyncMethod = `
   setupThemeSync() {
     // Sync theme from parent window/localStorage if available
-    const syncTheme = () => {
-      const theme = localStorage.getItem('gmgui-theme') ||
-                    (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    const syncTheme = (theme) => {
+      theme = theme || localStorage.getItem('gmgui-theme') ||
+              (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
       document.documentElement.className = theme;
       document.documentElement.setAttribute('data-theme', theme);
     };
@@ -188,23 +201,19 @@ if (fs.existsSync(fsbrowseAppJSPath)) {
       if (e.key === 'gmgui-theme') syncTheme();
     });
 
+    // Watch for postMessage from parent window (same-window iframes don't receive storage events)
+    window.addEventListener('message', e => {
+      if (e.data && e.data.type === 'theme-change' && e.data.theme) syncTheme(e.data.theme);
+    });
+
     // Watch for media query changes
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', syncTheme);
   },`;
 
-      // Add setupThemeSync call to init()
       appContent = appContent.replace(
         'async init() {',
         'async init() {\n    this.setupThemeSync();'
       );
-
-      // Add setupThemeSync method after init()
-      appContent = appContent.replace(
-        'async init() {\n    this.setupThemeSync();\n    this.setupDragDrop();',
-        'async init() {\n    this.setupThemeSync();\n    this.setupDragDrop();'
-      );
-
-      // Insert the method after the api() method
       appContent = appContent.replace(
         'api(path) {\n    return `${this.basePath}${path}`;\n  },',
         'api(path) {\n    return `${this.basePath}${path}`;\n  },' + themeSyncMethod

package/server.js

@@ -302,7 +302,7 @@ const activeProcessesByRunId = new Map();
 const activeProcessesByConvId = new Map(); // Store process handles by conversationId for steering
 const steeringTimeouts = new Map(); // Track timeout handles for process cleanup
 const checkpointManager = new CheckpointManager(queries);
-const STUCK_AGENT_THRESHOLD_MS = 600000;
+const STUCK_AGENT_THRESHOLD_MS = 1800000;
 const NO_PID_GRACE_PERIOD_MS = 60000;
 const DEFAULT_RATE_LIMIT_COOLDOWN_MS = 60000;
 
@@ -1106,11 +1106,7 @@ function compressAndSend(req, res, statusCode, contentType, body) {
     res.end(raw);
     return;
   }
-  if (acceptsEncoding(req, 'br')) {
-    const compressed = zlib.brotliCompressSync(raw, { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 4 } });
-    res.writeHead(statusCode, { ...baseHeaders, 'Content-Encoding': 'br', 'Content-Length': compressed.length });
-    res.end(compressed);
-  } else if (acceptsEncoding(req, 'gzip')) {
+  if (acceptsEncoding(req, 'gzip')) {
     const compressed = zlib.gzipSync(raw, { level: 6 });
     res.writeHead(statusCode, { ...baseHeaders, 'Content-Encoding': 'gzip', 'Content-Length': compressed.length });
     res.end(compressed);
@@ -1176,14 +1172,11 @@ const server = http.createServer(async (req, res) => {
 
     if (pathOnly === '/api/conversations' && req.method === 'GET') {
       const conversations = queries.getConversationsList();
-      // Filter out stale streaming state: check both activeExecutions AND database active sessions
+      // Filter out stale streaming state using a single bulk query instead of N+1 per-conversation queries
+      const activeSessionConvIds = new Set(queries.getActiveSessionConversationIds());
       for (const conv of conversations) {
-        if (conv.isStreaming) {
-          const hasActiveSession = queries.getSessionsByStatus(conv.id, 'active').length > 0 ||
-                                   queries.getSessionsByStatus(conv.id, 'pending').length > 0;
-          if (!activeExecutions.has(conv.id) && !hasActiveSession) {
-            conv.isStreaming = 0;
-          }
+        if (conv.isStreaming && !activeExecutions.has(conv.id) && !activeSessionConvIds.has(conv.id)) {
+          conv.isStreaming = 0;
         }
       }
             sendJSON(req, res, 200, { conversations });
@@ -3259,6 +3252,12 @@ function generateETag(stats) {
   return `"${stats.mtimeMs.toString(36)}-${stats.size.toString(36)}"`;
 }
 
+// In-memory cache: etag -> { br: Buffer, gz: Buffer, raw: Buffer }
+const _assetCache = new Map();
+// Cached processed HTML (invalidated on hot-reload or server restart)
+let _htmlCache = null;
+let _htmlCacheEtag = null;
+
 function serveFile(filePath, res, req) {
   const ext = path.extname(filePath).toLowerCase();
   const contentType = MIME_TYPES[ext] || 'application/octet-stream';
@@ -3272,43 +3271,68 @@ function serveFile(filePath, res, req) {
         res.end();
         return;
       }
-      const headers = {
-        'Content-Type': contentType,
-        'Content-Length': stats.size,
-        'ETag': etag,
-        'Cache-Control': ['.js', '.css'].includes(ext) ? 'public, max-age=0, must-revalidate' : 'public, max-age=3600, must-revalidate'
+      const isJsCss = ['.js', '.css'].includes(ext);
+      // Use long cache + ETag for immutable assets; browser only re-requests on server restart
+      const cacheControl = isJsCss
+        ? 'public, max-age=31536000, immutable'
+        : 'public, max-age=3600, must-revalidate';
+
+      const sendCached = (cached) => {
+        if (acceptsEncoding(req, 'gzip') && cached.gz) {
+          res.writeHead(200, { 'Content-Type': contentType, 'Content-Encoding': 'gzip', 'Content-Length': cached.gz.length, 'ETag': etag, 'Cache-Control': cacheControl });
+          res.end(cached.gz);
+        } else {
+          res.writeHead(200, { 'Content-Type': contentType, 'Content-Length': cached.raw.length, 'ETag': etag, 'Cache-Control': cacheControl });
+          res.end(cached.raw);
+        }
       };
-      if (acceptsEncoding(req, 'br') && stats.size > 860) {
-        const stream = fs.createReadStream(filePath);
-        headers['Content-Encoding'] = 'br';
-        delete headers['Content-Length'];
-        res.writeHead(200, headers);
-        stream.pipe(zlib.createBrotliCompress({ params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 4 } })).pipe(res);
-      } else if (acceptsEncoding(req, 'gzip') && stats.size > 860) {
-        const stream = fs.createReadStream(filePath);
-        headers['Content-Encoding'] = 'gzip';
-        delete headers['Content-Length'];
-        res.writeHead(200, headers);
-        stream.pipe(zlib.createGzip({ level: 6 })).pipe(res);
-      } else {
-        res.writeHead(200, headers);
-        fs.createReadStream(filePath).pipe(res);
-      }
+
+      const cached = _assetCache.get(etag);
+      if (cached) { sendCached(cached); return; }
+
+      fs.readFile(filePath, (err2, raw) => {
+        if (err2) { res.writeHead(500); res.end('Server error'); return; }
+        if (raw.length < 860) {
+          const entry = { raw, gz: null };
+          _assetCache.set(etag, entry);
+          sendCached(entry);
+          return;
+        }
+        // Pre-compress once with gzip, cache it
+        const gz = zlib.gzipSync(raw, { level: 6 });
+        const entry = { raw, gz };
+        _assetCache.set(etag, entry);
+        sendCached(entry);
+      });
     });
     return;
   }
 
-  fs.readFile(filePath, (err, data) => {
+  // HTML: cache processed result, invalidate when file changes
+  fs.stat(filePath, (err, stats) => {
     if (err) { res.writeHead(500); res.end('Server error'); return; }
-    let content = data.toString();
-    const baseTag = `<script>window.__BASE_URL='${BASE_URL}';window.__SERVER_VERSION='${PKG_VERSION}';</script>`;
-    content = content.replace('<head>', `<head>\n  <base href="${BASE_URL}/">\n  ` + baseTag);
-    content = content.replace(/(href|src)="vendor\//g, `$1="${BASE_URL}/vendor/`);
-    content = content.replace(/(src)="\/gm\/js\//g, `$1="${BASE_URL}/js/`);
-    if (watch) {
-      content += `\n<script>(function(){const ws=new WebSocket((location.protocol==='https:'?'wss://':'ws://')+location.host+'${BASE_URL}/hot-reload');ws.onmessage=e=>{if(JSON.parse(e.data).type==='reload')location.reload()};})();</script>`;
-    }
-    compressAndSend(req, res, 200, contentType, content);
+    const etag = generateETag(stats);
+    if (!watch && _htmlCache && _htmlCacheEtag === etag) {
+      res.writeHead(200, { 'Content-Type': contentType, 'Cache-Control': 'no-store', 'Content-Encoding': 'gzip', 'Content-Length': _htmlCache.length });
+      res.end(_htmlCache);
+      return;
+    }
+    fs.readFile(filePath, (err2, data) => {
+      if (err2) { res.writeHead(500); res.end('Server error'); return; }
+      let content = data.toString();
+      const baseTag = `<script>window.__BASE_URL='${BASE_URL}';window.__SERVER_VERSION='${PKG_VERSION}';</script>`;
+      content = content.replace('<head>', `<head>\n  <base href="${BASE_URL}/">\n  ` + baseTag);
+      content = content.replace(/(href|src)="vendor\//g, `$1="${BASE_URL}/vendor/`);
+      content = content.replace(/(src)="\/gm\/js\//g, `$1="${BASE_URL}/js/`);
+      if (watch) {
+        content += `\n<script>(function(){const ws=new WebSocket((location.protocol==='https:'?'wss://':'ws://')+location.host+'${BASE_URL}/hot-reload');ws.onmessage=e=>{if(JSON.parse(e.data).type==='reload')location.reload()};})();</script>`;
+      }
+      compressAndSend(req, res, 200, contentType, content);
+      if (!watch && acceptsEncoding(req, 'gzip')) {
+        _htmlCache = zlib.gzipSync(Buffer.from(content), { level: 6 });
+        _htmlCacheEtag = etag;
+      }
+    });
   });
 }
 
@@ -3426,8 +3450,8 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
       if (parsed.type === 'system') {
         if (parsed.subtype === 'task_notification') return;
 
-        if (parsed.session_id) {
-          queries.setClaudeSessionId(conversationId, parsed.session_id);
+        if (parsed.session_id && parsed.session_id !== resumeSessionId) {
+          queries.setClaudeSessionId(conversationId, parsed.session_id, sessionId);
           debugLog(`[stream] Eagerly persisted claudeSessionId=${parsed.session_id} for conv=${conversationId}`);
         }
 
@@ -3700,8 +3724,10 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
         if (entry) entry.pid = pid;
       },
       onProcess: (proc) => {
-        // Store process handle for steering
+        // Store process handle for steering - both maps so steer handler always finds it
         activeProcessesByConvId.set(conversationId, proc);
+        const entry = activeExecutions.get(conversationId);
+        if (entry) entry.proc = proc;
       }
     };
 
@@ -3853,6 +3879,8 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
       return;
     }
 
+    const isSessionConflict = error.exitCode === null && eventCount === 0;
+
     broadcastSync({
       type: 'streaming_error',
       sessionId,
@@ -3862,16 +3890,19 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
       exitCode: error.exitCode,
       stderrText: error.stderrText,
       recoverable: elapsed < 60000,
+      isSessionConflict,
       timestamp: Date.now()
     });
 
-    const errorMessage = queries.createMessage(conversationId, 'assistant', `Error: ${error.message}`);
-    broadcastSync({
-      type: 'message_created',
-      conversationId,
-      message: errorMessage,
-      timestamp: Date.now()
-    });
+    if (!isSessionConflict) {
+      const errorMessage = queries.createMessage(conversationId, 'assistant', `Error: ${error.message}`);
+      broadcastSync({
+        type: 'message_created',
+        conversationId,
+        message: errorMessage,
+        timestamp: Date.now()
+      });
+    }
   } finally {
     batcher.drain();
     // Use atomic cleanup but only if not in rate limit recovery
@@ -3910,6 +3941,7 @@ function scheduleRetry(conversationId, messageId, content, agentId, model, subAg
     conversationId,
     messageId,
     agentId,
+    queueLength: messageQueues.get(conversationId)?.length || 0,
     timestamp: Date.now()
   });
 
@@ -3961,6 +3993,7 @@ function drainMessageQueue(conversationId) {
     conversationId,
     messageId: next.messageId,
     agentId: next.agentId,
+    queueLength: queue?.length || 0,
     timestamp: Date.now()
   });
 
@@ -3995,10 +4028,10 @@ function drainMessageQueue(conversationId) {
 
 const wss = new WebSocketServer({
   server,
-  perMessageDeflate: {
-    zlibDeflateOptions: { level: 6 },
-    threshold: 256
-  }
+  perMessageDeflate: false  // Disabled: msgpack binary doesn't compress well, and
+                             // synchronous zlib on every frame blocks the event loop.
+                             // HTTP-layer gzip already handles static assets; WS
+                             // streaming events are small and latency-sensitive.
 });
 wss.on('error', (err) => {
   console.error('[WSS] WebSocket server error (contained):', err.message);
@@ -4071,6 +4104,11 @@ const wsOptimizer = new WSOptimizer();
 
 function broadcastSync(event) {
   try {
+    // Assign global sequence number to ALL events for ordering guarantee
+    if (!event.seq) {
+      event.seq = ++broadcastSeq;
+    }
+
     const isBroadcast = BROADCAST_TYPES.has(event.type);
 
     if (syncClients.size > 0) {
@@ -4152,12 +4190,15 @@ wsRouter.onLegacy((data, ws) => {
     if (data.conversationId && activeExecutions.has(data.conversationId)) {
       const execution = activeExecutions.get(data.conversationId);
       const conv = queries.getConversation(data.conversationId);
+      const queue = messageQueues.get(data.conversationId);
       sendWs(ws, ({
         type: 'streaming_start',
         sessionId: execution.sessionId,
         conversationId: data.conversationId,
         agentId: conv?.agentType || conv?.agentId || 'claude-code',
+        queueLength: queue?.length || 0,
         resumed: true,
+        seq: ++broadcastSeq,
         timestamp: Date.now()
       }));
     }
@@ -4382,7 +4423,12 @@ if (watch) {
       const fp = path.join(staticDir, file);
       if (watchedFiles.has(fp)) return;
       fs.watchFile(fp, { interval: 100 }, (curr, prev) => {
-        if (curr.mtime > prev.mtime) hotReloadClients.forEach(c => { if (c.readyState === 1) c.send(JSON.stringify({ type: 'reload' })); });
+        if (curr.mtime > prev.mtime) {
+          _assetCache.clear();
+          _htmlCache = null;
+          _htmlCacheEtag = null;
+          hotReloadClients.forEach(c => { if (c.readyState === 1) c.send(JSON.stringify({ type: 'reload' })); });
+        }
       });
       watchedFiles.set(fp, true);
     });
@@ -4569,7 +4615,7 @@ function performAgentHealthCheck() {
         debugLog(`[HEALTH] Agent PID ${entry.pid} for conv ${conversationId} has no activity for ${Math.round((now - entry.lastActivity) / 1000)}s`);
         // Kill stuck agent and clear streaming state
         try { process.kill(entry.pid, 'SIGTERM'); } catch (e) {}
-        markAgentDead(conversationId, entry, 'Agent was stuck (no activity for 10 minutes)');
+        markAgentDead(conversationId, entry, 'Agent was stuck (no activity for 30 minutes)');
       }
     } else {
       if (now - entry.startTime > NO_PID_GRACE_PERIOD_MS) {

package/static/index.html

@@ -840,6 +840,18 @@
       background-color: var(--color-bg-secondary);
     }
 
+    .agent-selector[data-streaming="true"], .model-selector[data-streaming="true"] {
+      opacity: 0.6;
+      cursor: not-allowed;
+      background-color: var(--color-bg-secondary);
+    }
+
+    .message-textarea[data-streaming="true"] {
+      opacity: 0.7;
+      cursor: not-allowed;
+      background-color: var(--color-bg-secondary);
+    }
+
     .model-selector {
       padding: 0.5rem;
       border: none;
@@ -910,6 +922,29 @@
 
     .send-btn:hover:not(:disabled) { background-color: var(--color-primary-dark); }
     .send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .send-btn[data-streaming="true"] { opacity: 0.5; cursor: not-allowed; background-color: var(--color-primary); }
+
+    /* ===== Data-streaming state styling for all prompt controls ===== */
+    .input-section[data-streaming="true"] {
+      opacity: 0.85;
+    }
+
+    .input-section[data-streaming="true"] .message-textarea {
+      opacity: 0.7;
+      cursor: not-allowed;
+      background-color: var(--color-bg-secondary);
+    }
+
+    .input-section[data-streaming="true"] .agent-selector,
+    .input-section[data-streaming="true"] .model-selector {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .input-section[data-streaming="true"] .send-btn {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
 
     .send-btn svg { width: 18px; height: 18px; }
 
@@ -3249,7 +3284,7 @@
   <script defer src="/gm/js/event-processor.js"></script>
   <script defer src="/gm/js/streaming-renderer.js"></script>
   <script defer src="/gm/js/image-loader.js"></script>
-  <script src="/gm/lib/msgpackr.min.js"></script>
+  <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>