agentgui 1.0.698 → 1.0.700

package/CLAUDE.md

@@ -73,7 +73,7 @@ XState v5 machines provide formal state tracking alongside (not replacing) the e
 - WebSocket endpoint is at `BASE_URL + /sync`. Supports subscribe/unsubscribe by sessionId or conversationId, and ping.
 - All WS RPC uses msgpack binary encoding (lib/codec.js). Wire format: `{ r, m, p }` request, `{ r, d }` reply, `{ type, seq }` broadcast push.
 - `perMessageDeflate` is disabled on the WS server — msgpack binary doesn't compress well and brotli/gzip was blocking the event loop. HTTP-layer gzip handles static assets.
-- Static assets use `Cache-Control: max-age=31536000, immutable` + ETag. Compressed once on first request, served from RAM (`_assetCache` Map keyed by etag).
+- Static assets use `Cache-Control: public, no-cache` + ETag. Browser always revalidates (sends If-None-Match), server returns 304 if unchanged. Compressed once on first request, served from RAM (`_assetCache` Map keyed by etag).
 - Deployment: runs behind Traefik/Caddy which handles TLS and can support WebTransport/QUIC.
 
 ## Environment Variables

package/lib/execution-machine.js

@@ -38,6 +38,9 @@ const machine = createMachine({
             queue: [...context.queue, event.item],
           })),
         },
+        SET_QUEUE: {
+          actions: assign(({ event }) => ({ queue: event.queue })),
+        },
         COMPLETE: [
           {
             guard: ({ context }) => context.queue.length > 0,
@@ -102,10 +105,21 @@ const machine = createMachine({
 });
 
 const actors = new Map();
+// Per-convId listeners: Map<convId, Set<(snapshot) => void>>
+const listeners = new Map();
+
+function notifyListeners(convId, snapshot) {
+  const set = listeners.get(convId);
+  if (!set) return;
+  for (const fn of set) {
+    try { fn(snapshot); } catch (_) {}
+  }
+}
 
 export function getOrCreate(convId) {
   if (actors.has(convId)) return actors.get(convId);
   const actor = createActor(machine);
+  actor.subscribe(snapshot => notifyListeners(convId, snapshot));
   actor.start();
   actors.set(convId, actor);
   return actor;
@@ -118,6 +132,7 @@ export function get(convId) {
 export function remove(convId) {
   const actor = actors.get(convId);
   if (actor) { actor.stop(); actors.delete(convId); }
+  listeners.delete(convId);
 }
 
 export function snapshot(convId) {
@@ -130,18 +145,38 @@ export function isStreaming(convId) {
   return s ? s.value === 'streaming' || s.value === 'rate_limited' : false;
 }
 
+export function isActive(convId) {
+  const s = snapshot(convId);
+  if (!s) return false;
+  return s.value === 'streaming' || s.value === 'rate_limited' || s.value === 'draining';
+}
+
 export function getContext(convId) {
   const s = snapshot(convId);
   return s ? s.context : null;
 }
 
+export function getQueue(convId) {
+  const ctx = getContext(convId);
+  return ctx ? ctx.queue : [];
+}
+
 export function send(convId, event) {
   const actor = getOrCreate(convId);
   actor.send(event);
   return actor.getSnapshot();
 }
 
+// Subscribe to state transitions for a conversation.
+// Returns an unsubscribe function.
+export function subscribe(convId, fn) {
+  if (!listeners.has(convId)) listeners.set(convId, new Set());
+  listeners.get(convId).add(fn);
+  return () => listeners.get(convId)?.delete(fn);
+}
+
 export function stopAll() {
   for (const [, actor] of actors) actor.stop();
   actors.clear();
+  listeners.clear();
 }

package/lib/ws-handlers-conv.js

@@ -55,7 +55,7 @@ export function register(router, deps) {
 
   router.handle('conv.ls', () => {
     const conversations = queries.getConversationsList();
-    for (const c of conversations) { if (c.isStreaming && !activeExecutions.has(c.id)) c.isStreaming = 0; }
+    for (const c of conversations) { if (c.isStreaming && !execMachine.isActive(c.id)) c.isStreaming = 0; }
     return { conversations };
   });
 
@@ -72,7 +72,7 @@ export function register(router, deps) {
     const conv = queries.getConversation(p.id);
     if (!conv) notFound();
     const machineSnap = execMachine.snapshot(p.id);
-    return { conversation: conv, isActivelyStreaming: activeExecutions.has(p.id), latestSession: queries.getLatestSession(p.id), executionState: machineSnap?.value || 'idle' };
+    return { conversation: conv, isActivelyStreaming: execMachine.isActive(p.id), latestSession: queries.getLatestSession(p.id), executionState: machineSnap?.value || 'idle' };
   });
 
   router.handle('conv.upd', (p) => {
@@ -110,7 +110,7 @@ export function register(router, deps) {
     const machineSnap = execMachine.snapshot(p.id);
     return {
       conversation: conv,
-      isActivelyStreaming: activeExecutions.has(p.id),
+      isActivelyStreaming: execMachine.isActive(p.id),
       executionState: machineSnap?.value || 'idle',
       latestSession: queries.getLatestSession(p.id),
       chunks,
@@ -141,15 +141,13 @@ export function register(router, deps) {
   });
 
   router.handle('conv.cancel', (p) => {
-    const entry = activeExecutions.get(p.id);
-    if (!entry) notFound('No active execution to cancel');
-    const { pid, sessionId } = entry;
+    if (!execMachine.isActive(p.id)) notFound('No active execution to cancel');
+    const ctx = execMachine.getContext(p.id);
+    const pid = ctx?.pid || activeExecutions.get(p.id)?.pid;
+    const sessionId = ctx?.sessionId || activeExecutions.get(p.id)?.sessionId;
     if (pid) { try { process.kill(-pid, 'SIGKILL'); } catch { try { process.kill(pid, 'SIGKILL'); } catch {} } }
     if (sessionId) queries.updateSession(sessionId, { status: 'interrupted', completed_at: Date.now() });
-
-    // Use atomic cleanup function to ensure state consistency
     cleanupExecution(p.id, false);
-
     broadcastSync({ type: 'streaming_complete', sessionId, conversationId: p.id, interrupted: true, timestamp: Date.now() });
     return { ok: true, cancelled: true, conversationId: p.id, sessionId };
   });
@@ -158,9 +156,8 @@ 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);
     const message = queries.createMessage(p.id, 'user', '[INJECTED] ' + p.content);
-    if (!entry) {
+    if (!execMachine.isActive(p.id)) {
       const agentId = conv.agentId || 'claude-code';
       const session = queries.createSession(p.id, agentId, 'pending');
       processMessageWithStreaming(p.id, message.id, session.id, message.content, agentId, conv.model || null, conv.subAgent || null);
@@ -173,10 +170,11 @@ export function register(router, deps) {
     const conv = queries.getConversation(p.id);
     if (!conv) notFound('Conversation not found');
 
-    const entry = activeExecutions.get(p.id);
-    if (!entry) fail(409, 'No active execution to steer');
+    if (!execMachine.isActive(p.id)) fail(409, 'No active execution to steer');
 
-    const { pid, sessionId } = entry;
+    const ctx = execMachine.getContext(p.id);
+    const pid = ctx?.pid || activeExecutions.get(p.id)?.pid;
+    const sessionId = ctx?.sessionId || activeExecutions.get(p.id)?.sessionId;
 
     if (pid) {
       try { process.kill(-pid, 'SIGKILL'); } catch { try { process.kill(pid, 'SIGKILL'); } catch (e) {} }
@@ -184,6 +182,7 @@ export function register(router, deps) {
 
     if (sessionId) queries.updateSession(sessionId, { status: 'interrupted', completed_at: Date.now() });
     queries.setIsStreaming(p.id, false);
+    execMachine.send(p.id, { type: 'CANCEL' });
     activeExecutions.delete(p.id);
 
     // Clear claudeSessionId so new execution starts fresh without --resume on a killed session
@@ -218,6 +217,8 @@ export function register(router, deps) {
   function startExecution(convId, message, agentId, model, content, subAgent) {
     const session = queries.createSession(convId);
     queries.createEvent('session.created', { messageId: message.id, sessionId: session.id }, convId, session.id);
+    // Machine is authoritative — START event sets sessionId in context
+    execMachine.send(convId, { type: 'START', sessionId: session.id });
     activeExecutions.set(convId, { pid: null, startTime: Date.now(), sessionId: session.id, lastActivity: Date.now() });
     queries.setIsStreaming(convId, true);
     broadcastSync({ type: 'streaming_start', sessionId: session.id, conversationId: convId, messageId: message.id, agentId, timestamp: Date.now() });
@@ -226,9 +227,13 @@ export function register(router, deps) {
   }
 
   function enqueue(convId, content, agentId, model, messageId, subAgent) {
+    const item = { content, agentId, model, messageId, subAgent };
+    // Machine is authoritative for queue — ENQUEUE event adds to machine context.queue
+    execMachine.send(convId, { type: 'ENQUEUE', item });
+    // Keep messageQueues in sync for legacy REST endpoints
     if (!messageQueues.has(convId)) messageQueues.set(convId, []);
-    messageQueues.get(convId).push({ content, agentId, model, messageId, subAgent });
-    const queueLength = messageQueues.get(convId).length;
+    messageQueues.get(convId).push(item);
+    const queueLength = execMachine.getQueue(convId).length;
     broadcastSync({ type: 'queue_status', conversationId: convId, queueLength, messageId, timestamp: Date.now() });
     return queueLength;
   }
@@ -249,14 +254,13 @@ export function register(router, deps) {
     const message = queries.createMessage(p.id, 'user', p.content, idempotencyKey);
     queries.createEvent('message.created', { role: 'user', messageId: message.id }, p.id);
 
-    // Only broadcast message_created if NOT queuing - queued messages show in queue indicator instead
-    if (!activeExecutions.has(p.id)) {
+    // Machine is authoritative: gate on machine state, not Map
+    if (!execMachine.isActive(p.id)) {
       broadcastSync({ type: 'message_created', conversationId: p.id, message, timestamp: Date.now() });
       const session = startExecution(p.id, message, agentId, model, p.content, subAgent);
       return { message, session, idempotencyKey };
     }
 
-    // Message is queued - don't broadcast as message_created, let queue_status handle the UI update
     const qp = enqueue(p.id, p.content, agentId, model, message.id, subAgent);
     return { message, queued: true, queuePosition: qp, idempotencyKey };
   });
@@ -283,20 +287,19 @@ export function register(router, deps) {
     const userMessage = queries.createMessage(p.id, 'user', prompt);
     queries.createEvent('message.created', { role: 'user', messageId: userMessage.id }, p.id);
 
-    // Only broadcast message_created if NOT queuing - queued messages show in queue indicator instead
-    if (!activeExecutions.has(p.id)) {
+    // Machine is authoritative: gate on machine state, not Map
+    if (!execMachine.isActive(p.id)) {
       broadcastSync({ type: 'message_created', conversationId: p.id, message: userMessage, timestamp: Date.now() });
       const session = startExecution(p.id, userMessage, agentId, model, prompt, subAgent);
       return { message: userMessage, session, streamId: session.id };
     }
 
-    // Message is queued - don't broadcast as message_created, let queue_status handle the UI update
     const qp = enqueue(p.id, prompt, agentId, model, userMessage.id, subAgent);
     const seq = getNextQueueSeq(p.id);
     broadcastSync({
       type: 'queue_status',
       conversationId: p.id,
-      queueLength: messageQueues.get(p.id)?.length || 1,
+      queueLength: execMachine.getQueue(p.id).length,
       seq,
       timestamp: Date.now()
     });
@@ -305,21 +308,34 @@ export function register(router, deps) {
 
   router.handle('q.ls', (p) => {
     if (!queries.getConversation(p.id)) notFound('Conversation not found');
-    return { queue: messageQueues.get(p.id) || [] };
+    // Read queue from machine context (authoritative), fall back to Map for compatibility
+    const machineQueue = execMachine.getQueue(p.id);
+    return { queue: machineQueue.length > 0 ? machineQueue : (messageQueues.get(p.id) || []) };
   });
 
   router.handle('q.del', (p) => {
-    const queue = messageQueues.get(p.id);
-    if (!queue) notFound('Queue not found');
-    const idx = queue.findIndex(q => q.messageId === p.messageId);
-    if (idx === -1) notFound('Queued message not found');
-    queue.splice(idx, 1);
-    if (queue.length === 0) messageQueues.delete(p.id);
+    const machineQueue = execMachine.getQueue(p.id);
+    const mapQueue = messageQueues.get(p.id);
+    if (!machineQueue.length && !mapQueue) notFound('Queue not found');
+    // Remove from both machine and Map
+    const idx = machineQueue.findIndex(q => q.messageId === p.messageId);
+    if (idx === -1 && (!mapQueue || mapQueue.findIndex(q => q.messageId === p.messageId) === -1)) notFound('Queued message not found');
+    // Update machine queue via direct send
+    if (idx !== -1) {
+      const newQueue = [...machineQueue];
+      newQueue.splice(idx, 1);
+      execMachine.send(p.id, { type: 'SET_QUEUE', queue: newQueue });
+    }
+    if (mapQueue) {
+      const mi = mapQueue.findIndex(q => q.messageId === p.messageId);
+      if (mi !== -1) mapQueue.splice(mi, 1);
+      if (mapQueue.length === 0) messageQueues.delete(p.id);
+    }
     const seq = getNextQueueSeq(p.id);
     broadcastSync({
       type: 'queue_status',
       conversationId: p.id,
-      queueLength: queue?.length || 0,
+      queueLength: execMachine.getQueue(p.id).length,
       seq,
       timestamp: Date.now()
     });
@@ -327,9 +343,10 @@ export function register(router, deps) {
   });
 
   router.handle('q.upd', (p) => {
-    const queue = messageQueues.get(p.id);
-    if (!queue) notFound('Queue not found');
-    const item = queue.find(q => q.messageId === p.messageId);
+    const machineQueue = execMachine.getQueue(p.id);
+    const mapQueue = messageQueues.get(p.id);
+    if (!machineQueue.length && !mapQueue) notFound('Queue not found');
+    const item = machineQueue.find(q => q.messageId === p.messageId) || mapQueue?.find(q => q.messageId === p.messageId);
     if (!item) notFound('Queued message not found');
     if (p.content !== undefined) item.content = p.content;
     if (p.agentId !== undefined) item.agentId = p.agentId;

package/package.json

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

package/server.js

@@ -319,18 +319,19 @@ function logError(op, err, ctx = {}) {
   } catch (_) {}
 }
 
-// Atomic cleanup function - ensures consistent state across all data structures
+// Atomic cleanup function - machine is authoritative, Map stays in sync
 function cleanupExecution(conversationId, broadcastCompletion = false) {
   debugLog(`[cleanup] Starting cleanup for ${conversationId}`);
 
-  activeExecutions.delete(conversationId);
-
-  // Sync execution machine to idle state
+  // Machine drives cleanup: send CANCEL (clears queue, transitions to idle)
   const machineSnap = execMachine.snapshot(conversationId);
   if (machineSnap && machineSnap.value !== 'idle') {
     execMachine.send(conversationId, { type: 'CANCEL' });
   }
 
+  // Keep Map in sync with machine
+  activeExecutions.delete(conversationId);
+
   // Clean database state
   queries.setIsStreaming(conversationId, false);
 
@@ -3304,11 +3305,9 @@ function serveFile(filePath, res, req) {
         res.end();
         return;
       }
-      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';
+      // Use ETag-based revalidation: browser always checks with server, serves from cache on 304
+      // Avoids stale immutable assets when server files change during development
+      const cacheControl = 'public, no-cache';
 
       const sendCached = (cached) => {
         if (acceptsEncoding(req, 'gzip') && cached.gz) {
@@ -3774,10 +3773,10 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
     batcher.drain();
     debugLog(`[stream] Claude returned ${outputs.length} outputs, sessionId=${claudeSessionId}`);
 
-    if (claudeSessionId) {
-      queries.setClaudeSessionId(conversationId, claudeSessionId);
-      debugLog(`[stream] Updated claudeSessionId=${claudeSessionId}`);
-    }
+    // Clear claudeSessionId after successful completion so next message starts fresh
+    // --resume on a completed session causes "No response requested." from the gm plugin
+    queries.setClaudeSessionId(conversationId, null);
+    debugLog(`[stream] Cleared claudeSessionId after successful completion`);
 
     // Mark session as complete
     queries.updateSession(sessionId, {
@@ -3983,20 +3982,36 @@ function scheduleRetry(conversationId, messageId, content, agentId, model, subAg
 }
 
 function drainMessageQueue(conversationId) {
-  const queue = messageQueues.get(conversationId);
-  if (!queue || queue.length === 0) return;
+  // Machine context queue is authoritative; fall back to legacy Map
+  const machineQueue = execMachine.getQueue(conversationId);
+  const mapQueue = messageQueues.get(conversationId);
+  if (machineQueue.length === 0 && (!mapQueue || mapQueue.length === 0)) return;
+
+  let next;
+  if (machineQueue.length > 0) {
+    // Consume from machine via COMPLETE transition (draining state pops nextItem)
+    execMachine.send(conversationId, { type: 'COMPLETE' });
+    const ctx = execMachine.getContext(conversationId);
+    next = ctx?.nextItem;
+    // Also keep Map in sync
+    if (mapQueue && mapQueue.length > 0) mapQueue.shift();
+    if (mapQueue && mapQueue.length === 0) messageQueues.delete(conversationId);
+  } else {
+    next = mapQueue.shift();
+    if (mapQueue.length === 0) messageQueues.delete(conversationId);
+  }
 
-  const next = queue.shift();
-  if (queue.length === 0) messageQueues.delete(conversationId);
+  if (!next) return;
 
   debugLog(`[queue] Draining next message for ${conversationId}, messageId=${next.messageId}`);
 
-  // Broadcast queue_item_dequeued so client can update UI immediately
+  const remainingQueueLength = execMachine.getQueue(conversationId).length || messageQueues.get(conversationId)?.length || 0;
+
   broadcastSync({
     type: 'queue_item_dequeued',
     conversationId,
     messageId: next.messageId,
-    queueLength: queue?.length || 0,
+    queueLength: remainingQueueLength,
     timestamp: Date.now()
   });
 
@@ -4009,24 +4024,25 @@ function drainMessageQueue(conversationId) {
     conversationId,
     messageId: next.messageId,
     agentId: next.agentId,
-    queueLength: queue?.length || 0,
+    queueLength: remainingQueueLength,
     timestamp: Date.now()
   });
 
   broadcastSync({
     type: 'queue_status',
     conversationId,
-    queueLength: queue?.length || 0,
+    queueLength: remainingQueueLength,
     timestamp: Date.now()
   });
 
   const startTime = Date.now();
+  // Machine START event makes machine authoritative for this execution
+  execMachine.send(conversationId, { type: 'START', sessionId: session.id });
   activeExecutions.set(conversationId, { pid: null, startTime, sessionId: session.id, lastActivity: startTime });
 
   processMessageWithStreaming(conversationId, next.messageId, session.id, next.content, next.agentId, next.model, next.subAgent)
     .catch(err => {
       debugLog(`[queue] Error processing queued message: ${err.message}`);
-      // CRITICAL: Clean up state on error so next message can be retried
       cleanupExecution(conversationId);
       broadcastSync({
         type: 'streaming_error',
@@ -4036,7 +4052,6 @@ function drainMessageQueue(conversationId) {
         recoverable: true,
         timestamp: Date.now()
       });
-      // Try to drain next message in queue
       setTimeout(() => drainMessageQueue(conversationId), 100);
     });
 }
@@ -4202,16 +4217,19 @@ wsRouter.onLegacy((data, ws) => {
     }));
 
     // Notify client if this conversation has an active streaming execution
-    if (data.conversationId && activeExecutions.has(data.conversationId)) {
+    // Machine is authoritative for streaming state check on subscribe
+    if (data.conversationId && execMachine.isActive(data.conversationId)) {
+      const ctx = execMachine.getContext(data.conversationId);
       const execution = activeExecutions.get(data.conversationId);
+      const sessionId = ctx?.sessionId || execution?.sessionId;
       const conv = queries.getConversation(data.conversationId);
-      const queue = messageQueues.get(data.conversationId);
+      const queueLength = execMachine.getQueue(data.conversationId).length || messageQueues.get(data.conversationId)?.length || 0;
       sendWs(ws, ({
         type: 'streaming_start',
-        sessionId: execution.sessionId,
+        sessionId,
         conversationId: data.conversationId,
         agentId: conv?.agentType || conv?.agentId || 'claude-code',
-        queueLength: queue?.length || 0,
+        queueLength,
         resumed: true,
         seq: ++broadcastSeq,
         timestamp: Date.now()

package/static/js/client.js

@@ -228,7 +228,7 @@ class AgentGUIClient {
       // Save draft from previous conversation before switching
       this.saveDraftPrompt();
 
-      const isStreaming = convId && this.state.streamingConversations.has(convId);
+      const isStreaming = this._convIsStreaming(convId);
       if (!isStreaming && window.switchView) {
         window.switchView('chat');
       }
@@ -242,7 +242,7 @@ class AgentGUIClient {
       const view = e.detail.view;
       if (view === 'chat') {
         const convId = this.state.currentConversation?.id;
-        const isStreaming = convId && this.state.streamingConversations.has(convId);
+        const isStreaming = this._convIsStreaming(convId);
         if (isStreaming) {
           this.disableControls();
         } else {
@@ -252,6 +252,25 @@ class AgentGUIClient {
     });
   }
 
+  // Authoritative streaming check: conv machine is source of truth, Map is fallback cache
+  _convIsStreaming(convId) {
+    if (!convId) return false;
+    if (typeof convMachineAPI !== 'undefined') return convMachineAPI.isStreaming(convId);
+    return this.state.streamingConversations.has(convId);
+  }
+
+  // Mark conversation as streaming in both machine and cache Map
+  _setConvStreaming(convId, streaming, sessionId, agentId) {
+    if (!convId) return;
+    if (streaming) {
+      this.state.streamingConversations.set(convId, true);
+      if (typeof convMachineAPI !== 'undefined') convMachineAPI.send(convId, { type: 'STREAM_START', sessionId, agentId });
+    } else {
+      this.state.streamingConversations.delete(convId);
+      if (typeof convMachineAPI !== 'undefined') convMachineAPI.send(convId, { type: 'COMPLETE' });
+    }
+  }
+
   /**
    * Setup renderer event listeners
    */
@@ -511,7 +530,7 @@ class AgentGUIClient {
     if (this.ui.injectButton) {
       this.ui.injectButton.addEventListener('click', async () => {
         if (!this.state.currentConversation) return;
-        const isStreaming = this.state.streamingConversations.has(this.state.currentConversation.id);
+        const isStreaming = this._convIsStreaming(this.state.currentConversation.id);
 
         if (isStreaming) {
           const message = this.ui.messageInput?.value || '';
@@ -810,8 +829,7 @@ class AgentGUIClient {
     // just track the state but do not modify the DOM or start polling
     if (this.state.currentConversation?.id !== data.conversationId) {
       console.log('Streaming started for non-active conversation:', data.conversationId);
-      this.state.streamingConversations.set(data.conversationId, true);
-      if (typeof convMachineAPI !== 'undefined') convMachineAPI.send(data.conversationId, { type: 'STREAM_START', sessionId: data.sessionId, agentId: data.agentId });
+      this._setConvStreaming(data.conversationId, true, data.sessionId, data.agentId);
       console.log('[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);
@@ -826,8 +844,7 @@ class AgentGUIClient {
       return;
     }
 
-    this.state.streamingConversations.set(data.conversationId, true);
-    if (typeof convMachineAPI !== 'undefined') convMachineAPI.send(data.conversationId, { type: 'STREAM_START', sessionId: data.sessionId, agentId: data.agentId });
+    this._setConvStreaming(data.conversationId, true, data.sessionId, data.agentId);
     this.updateBusyPromptArea(data.conversationId);
     this.state.currentSession = {
       id: data.sessionId,
@@ -1125,13 +1142,13 @@ class AgentGUIClient {
     // If this event is for a conversation we are NOT currently viewing, just track state
     if (conversationId && this.state.currentConversation?.id !== conversationId) {
       console.log('Streaming error for non-active conversation:', conversationId);
-      this.state.streamingConversations.delete(conversationId);
+      this._setConvStreaming(conversationId, false);
       this.updateBusyPromptArea(conversationId);
       this.emit('streaming:error', data);
       return;
     }
 
-    this.state.streamingConversations.delete(conversationId);
+    this._setConvStreaming(conversationId, false);
     this.updateBusyPromptArea(conversationId);
 
     // Clear queue indicator on error
@@ -1197,16 +1214,14 @@ class AgentGUIClient {
 
     if (conversationId && this.state.currentConversation?.id !== conversationId) {
       console.log('Streaming completed for non-active conversation:', conversationId);
-      this.state.streamingConversations.delete(conversationId);
-      if (typeof convMachineAPI !== 'undefined') convMachineAPI.send(conversationId, { type: 'COMPLETE' });
+      this._setConvStreaming(conversationId, false);
       console.log('[SYNC] streaming_complete - non-active conv:', { convId: conversationId, streamingCount: this.state.streamingConversations.size });
       this.updateBusyPromptArea(conversationId);
       this.emit('streaming:complete', data);
       return;
     }
 
-    this.state.streamingConversations.delete(conversationId);
-    if (typeof convMachineAPI !== 'undefined') convMachineAPI.send(conversationId, { type: 'COMPLETE' });
+    this._setConvStreaming(conversationId, false);
     console.log('[SYNC] streaming_complete - active conv:', { convId: conversationId, streamingCount: this.state.streamingConversations.size, interrupted: data.interrupted });
     this.updateBusyPromptArea(conversationId);
 
@@ -1302,7 +1317,7 @@ class AgentGUIClient {
       this.state.currentConversation.messageCount = (this.state.currentConversation.messageCount || 0) + 1;
     }
 
-    if (data.message.role === 'assistant' && this.state.streamingConversations.has(data.conversationId)) {
+    if (data.message.role === 'assistant' && this._convIsStreaming(data.conversationId)) {
       this.emit('message:created', data);
       return;
     }
@@ -1442,7 +1457,7 @@ class AgentGUIClient {
 
   handleRateLimitHit(data) {
     if (data.conversationId !== this.state.currentConversation?.id) return;
-    this.state.streamingConversations.delete(data.conversationId);
+    this._setConvStreaming(data.conversationId, false);
 
     this.enableControls();
 
@@ -1683,8 +1698,8 @@ class AgentGUIClient {
 
     const pendingId = 'pending-' + Date.now() + '-' + Math.random().toString(36).substr(2, 6);
 
-    // Check if streaming - only show optimistic message if NOT queuing
-    const isStreaming = this.state.currentConversation && this.state.streamingConversations.has(this.state.currentConversation.id);
+    // Conv machine is authoritative: check machine state for optimistic message gating
+    const isStreaming = this._convIsStreaming(this.state.currentConversation?.id);
     if (!isStreaming) {
       this._showOptimisticMessage(pendingId, savedPrompt);
     }
@@ -1705,7 +1720,7 @@ class AgentGUIClient {
       }
 
       if (conv?.id) {
-        const isNewConversation = !conv.messageCount && !this.state.streamingConversations.has(conv.id);
+        const isNewConversation = !conv.messageCount && !this._convIsStreaming(conv.id);
         const agentId = (isNewConversation ? this.getCurrentAgent() : null) || conv?.agentType || this.getCurrentAgent();
         const subAgent = this.getEffectiveSubAgent() || conv?.subAgent || null;
         const model = this.ui.modelSelector?.value || null;
@@ -1941,7 +1956,7 @@ class AgentGUIClient {
       // Sync-to-display debugging
       getSyncState: () => ({
         currentConversation: self.state.currentConversation,
-        isStreaming: self.state.currentConversation && self.state.streamingConversations.has(self.state.currentConversation.id),
+        isStreaming: self._convIsStreaming(self.state.currentConversation?.id),
         streamingConversations: Array.from(self.state.streamingConversations),
         convMachineStates: typeof convMachineAPI !== 'undefined' ? Object.fromEntries([...window.__convMachines].map(([k, a]) => [k, a.getSnapshot().value])) : {},
         wsConnectionState: self.wsManager?._wsActor?.getSnapshot().value || 'unknown',
@@ -2561,7 +2576,7 @@ class AgentGUIClient {
     if (!convId) return;
     const outputEl = document.getElementById('output');
     if (!outputEl || !outputEl.firstChild) return;
-    if (this.state.streamingConversations.has(convId)) return;
+    if (this._convIsStreaming(convId)) return;
 
     this.saveScrollPosition(convId);
     const clone = outputEl.cloneNode(true);
@@ -2661,7 +2676,7 @@ class AgentGUIClient {
 
       var prevId = this.state.currentConversation?.id;
       if (prevId && prevId !== conversationId) {
-        if (this.wsManager.isConnected && !this.state.streamingConversations.has(prevId)) {
+        if (this.wsManager.isConnected && !this._convIsStreaming(prevId)) {
           this.wsManager.sendMessage({ type: 'unsubscribe', conversationId: prevId });
         }
         this.state.currentSession = null;
@@ -2689,7 +2704,7 @@ class AgentGUIClient {
           window.ConversationState?.selectConversation(conversationId, 'dom_cache_load', 1);
           this.state.currentConversation = cached.conversation;
           window.dispatchEvent(new CustomEvent('conversation-changed', { detail: { conversationId, conversation: cached.conversation } }));
-          const cachedHasActivity = cached.conversation.messageCount > 0 || this.state.streamingConversations.has(conversationId);
+          const cachedHasActivity = cached.conversation.messageCount > 0 || this._convIsStreaming(conversationId);
           this.applyAgentAndModelSelection(cached.conversation, cachedHasActivity);
           this.conversationCache.delete(conversationId);
           this.syncPromptState(conversationId);
@@ -2733,7 +2748,7 @@ class AgentGUIClient {
       window.ConversationState?.selectConversation(conversationId, 'server_load', 1);
       this.state.currentConversation = conversation;
       window.dispatchEvent(new CustomEvent('conversation-changed', { detail: { conversationId, conversation } }));
-      const hasActivity = (allMessages && allMessages.length > 0) || isActivelyStreaming || latestSession || this.state.streamingConversations.has(conversationId);
+      const hasActivity = (allMessages && allMessages.length > 0) || isActivelyStreaming || latestSession || this._convIsStreaming(conversationId);
       this.applyAgentAndModelSelection(conversation, hasActivity);
 
       const chunks = (rawChunks || []).map(chunk => ({
@@ -2756,15 +2771,15 @@ class AgentGUIClient {
       const userMessages = (allMessages || []).filter(m => m.role === 'user' && !queuedMessageIds.has(m.id));
       const hasMoreChunks = totalChunks && chunks.length < totalChunks;
 
-      const clientKnowsStreaming = this.state.streamingConversations.has(conversationId);
+      const clientKnowsStreaming = this._convIsStreaming(conversationId);
       const shouldResumeStreaming = latestSession &&
         (latestSession.status === 'active' || latestSession.status === 'pending');
 
       if (shouldResumeStreaming) {
-        this.state.streamingConversations.set(conversationId, true);
+        this._setConvStreaming(conversationId, true, latestSession?.id, null);
         window.dispatchEvent(new CustomEvent('ws-message', { detail: { type: 'streaming_start', conversationId, sessionId: latestSession?.id } }));
       } else {
-        this.state.streamingConversations.delete(conversationId);
+        this._setConvStreaming(conversationId, false);
         window.dispatchEvent(new CustomEvent('ws-message', { detail: { type: 'streaming_complete', conversationId } }));
       }
 
@@ -2940,7 +2955,7 @@ class AgentGUIClient {
         }
 
         if (shouldResumeStreaming && latestSession) {
-          this.state.streamingConversations.set(conversationId, true);
+          this._setConvStreaming(conversationId, true, latestSession.id, null);
           this.state.currentSession = {
             id: latestSession.id,
             conversationId: conversationId,
@@ -3009,7 +3024,7 @@ class AgentGUIClient {
 
   updateBusyPromptArea(conversationId) {
     if (this.state.currentConversation?.id !== conversationId) return;
-    const isStreaming = this.state.streamingConversations.has(conversationId);
+    const isStreaming = this._convIsStreaming(conversationId);
     const isConnected = this.wsManager?.isConnected;
 
     const injectBtn = document.getElementById('injectBtn');

package/static/js/conv-machine.js

@@ -1,9 +1,9 @@
 // Per-conversation UI state machine using XState v5
 // Tracks IDLE -> STREAMING -> QUEUED states per conversation
 
-const { createMachine, createActor, assign } = XState;
+const { createMachine: cmCreateMachine, createActor: cmCreateActor, assign: cmAssign } = XState;
 
-const convMachine = createMachine({
+const convMachine = cmCreateMachine({
   id: 'conv-ui',
   initial: 'idle',
   context: {
@@ -13,11 +13,11 @@ const convMachine = createMachine({
   },
   states: {
     idle: {
-      entry: assign({ sessionId: null, agentId: null, queueLength: 0 }),
+      entry: cmAssign({ sessionId: null, agentId: null, queueLength: 0 }),
       on: {
         STREAM_START: {
           target: 'streaming',
-          actions: assign(({ event }) => ({
+          actions: cmAssign(({ event }) => ({
             sessionId: event.sessionId || null,
             agentId: event.agentId || null,
           })),
@@ -35,10 +35,10 @@ const convMachine = createMachine({
         ],
         ERROR: 'idle',
         QUEUE_UPDATE: {
-          actions: assign(({ event }) => ({ queueLength: event.queueLength || 0 })),
+          actions: cmAssign(({ event }) => ({ queueLength: event.queueLength || 0 })),
         },
         STREAM_START: {
-          actions: assign(({ event }) => ({
+          actions: cmAssign(({ event }) => ({
             sessionId: event.sessionId || null,
             agentId: event.agentId || null,
           })),
@@ -49,13 +49,13 @@ const convMachine = createMachine({
       on: {
         STREAM_START: {
           target: 'streaming',
-          actions: assign(({ event }) => ({
+          actions: cmAssign(({ event }) => ({
             sessionId: event.sessionId || null,
             agentId: event.agentId || null,
           })),
         },
         QUEUE_UPDATE: {
-          actions: assign(({ event }) => ({ queueLength: event.queueLength || 0 })),
+          actions: cmAssign(({ event }) => ({ queueLength: event.queueLength || 0 })),
           guard: ({ event }) => event.queueLength > 0,
         },
         QUEUE_EMPTY: 'idle',
@@ -70,7 +70,7 @@ const convMachines = new Map();
 
 function getOrCreate(convId) {
   if (convMachines.has(convId)) return convMachines.get(convId);
-  const actor = createActor(convMachine);
+  const actor = cmCreateActor(convMachine);
   actor.start();
   convMachines.set(convId, actor);
   return actor;
@@ -91,6 +91,17 @@ function isStreaming(convId) {
   return getState(convId) === 'streaming';
 }
 
+// isActive: streaming OR queued — use this to gate optimistic messages
+function isActive(convId) {
+  const s = getState(convId);
+  return s === 'streaming' || s === 'queued';
+}
+
+function getQueueLength(convId) {
+  const actor = convMachines.get(convId);
+  return actor ? actor.getSnapshot().context.queueLength : 0;
+}
+
 function remove(convId) {
   const actor = convMachines.get(convId);
   if (actor) { actor.stop(); convMachines.delete(convId); }
@@ -98,5 +109,5 @@ function remove(convId) {
 
 if (typeof window !== 'undefined') {
   window.__convMachines = convMachines;
-  window.convMachineAPI = { getOrCreate, send, getState, isStreaming, remove };
+  window.convMachineAPI = { getOrCreate, send, getState, isStreaming, isActive, getQueueLength, remove };
 }

package/static/js/websocket-manager.js

@@ -18,6 +18,8 @@ class WebSocketManager {
     this.ws = null;
     this._isConnected = false;
     this._isConnecting = false;
+    this._isManuallyDisconnected = false;
+    this._reconnectCount = 0;
     this.isManuallyDisconnected = false;
     this.reconnectCount = 0;
     this.reconnectTimer = null;
@@ -92,6 +94,22 @@ class WebSocketManager {
   }
   set connectionState(v) { this._connectionState = v; }
 
+  // Machine context is authoritative for these flags
+  get isManuallyDisconnected() {
+    if (this._wsActor) return !!this._wsActor.getSnapshot().context.manualDisconnect;
+    return this._isManuallyDisconnected;
+  }
+  set isManuallyDisconnected(v) {
+    this._isManuallyDisconnected = v;
+    if (this._wsActor && v) this._wsActor.send({ type: 'MANUAL_DISCONNECT' });
+  }
+
+  get reconnectCount() {
+    if (this._wsActor) return this._wsActor.getSnapshot().context.reconnectCount;
+    return this._reconnectCount;
+  }
+  set reconnectCount(v) { this._reconnectCount = v; }
+
   getWebSocketURL() {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const baseURL = window.__BASE_URL || '/gm';
@@ -555,7 +573,6 @@ class WebSocketManager {
 
   disconnect() {
     this.isManuallyDisconnected = true;
-    if (this._wsActor) this._wsActor.send({ type: 'MANUAL_DISCONNECT' });
     this.reconnectCount = 0;
     this.stopHeartbeat();
     if (this.reconnectTimer) {