agentgui 1.0.645 → 1.0.646

package/SYNC_ARCHITECTURE.md

@@ -0,0 +1,279 @@
+# AgentGUI Sync-to-Display Architecture Report
+
+## Executive Summary
+
+The sync-to-display system handles real-time synchronization of execution state from server to client display. Current implementation has been improved through multiple fixes, particularly for queue display consistency and steering support. This document consolidates the architecture and identifies remaining optimization opportunities.
+
+## Architecture Overview
+
+### 1. Broadcast System (server.js:4269-4317)
+
+**BROADCAST_TYPES** - Global broadcast events sent to ALL connected clients:
+- `message_created`, `conversation_created/updated/deleted`
+- `queue_status`, `queue_updated`
+- `streaming_start`, `streaming_progress`, `streaming_complete`, `streaming_error`
+- `rate_limit_hit`, `rate_limit_clear`
+- Tool-related events (`tool_*`, `tools_*`)
+- Voice/speech events
+- PM2 monitoring events
+
+**broadcastSync()** function (line 4288):
+```
+1. Check if event.type is in BROADCAST_TYPES
+2. If broadcast: send to ALL syncClients
+3. If targeted: send to sessionId or conversationId subscribers only
+4. Also dispatch to SSE stream handlers if active
+```
+
+### 2. Client-Side Message Reception (static/js/client.js)
+
+**handleWsMessage()** routes events by type:
+```javascript
+case 'message_created': handleMessageCreated(data)
+case 'queue_status': handleQueueStatus(data)
+case 'streaming_start': handleStreamingStart(data)
+case 'streaming_progress': handleStreamingProgress(data)
+```
+
+### 3. Display Rendering Layers
+
+**Layer 1: Message Rendering** (handleMessageCreated)
+- Checks if message already exists (prevents duplicates)
+- For user messages: finds optimistic message, updates it
+- For assistant messages: skips if streaming (handled by chunks)
+
+**Layer 2: Streaming Progress** (handleStreamingProgress)
+- Adds chunks to queue
+- Batches rendering via StreamingRenderer
+- Handles thinking blocks directly
+
+**Layer 3: Queue Indicator** (fetchAndRenderQueue)
+- Polls via `q.ls` RPC every interval
+- Displays queued items in yellow control blocks
+- Renders with Edit/Delete/Steer buttons
+
+**Layer 4: Conversation State** (handleConversationUpdated)
+- Updates isStreaming flag
+- Refreshes UI based on new state
+
+## Recent Fixes & Status
+
+### Fixed Issues
+
+✅ **Queue Message Duplication** (commit fbfd1ad)
+- Problem: Queued messages appeared as both user prompt + queue item
+- Solution: Skip optimistic message when conversation is streaming
+- Impact: Clean queue display, no duplication
+
+✅ **Steering Support** (commit 81d83af)
+- Problem: Steering showed "Process not available" error
+- Solution: Keep stdin open (supportsStdin=true, closeStdin=false)
+- Impact: Users can send follow-up prompts during execution
+
+✅ **Chunk Rendering Race** (Session 3a)
+- Problem: Early chunks missed before polling started
+- Solution: Immediate chunk fetch on streaming_start
+- Impact: No missing initial output
+
+✅ **Dark Mode Selection** (fsbrowse)
+- Problem: Selection states hard to see in dark mode
+- Solution: Theme-aware colors for hover/focus
+- Impact: Better visual feedback in both themes
+
+### Remaining Consistency Issues
+
+⚠️ **Queue State Sync Timing**
+- Queue created on server via enqueue()
+- message_created broadcast may arrive before queue is populated
+- Client fetchAndRenderQueue() polls but timing is unpredictable
+- No atomic operation ensuring client sees both message and queue
+
+⚠️ **Multiple Sources of Truth**
+- Server: database, active execution map, queue map
+- Client: message list, streaming set, queue indicator
+- Conversation state: isStreaming flag can desync if connection drops
+- No single authoritative state object
+
+⚠️ **Optimistic Message Updates**
+- Client creates optimistic "sending" message on submit
+- Server creates actual message and broadcasts
+- handleMessageCreated() finds and updates optimistic message
+- If network is slow, both may briefly exist
+
+⚠️ **Queue Execution Transition**
+- Queue items don't explicitly transition to executed
+- Client must poll queue indicator to see it disappear
+- No event indicating "queue item now executing"
+- Confusing UX when queue suddenly empties
+
+## Data Flow Examples
+
+### Normal Execution (Ctrl+Enter with no active stream)
+
+```
+User input: "Write a function"
+    ↓
+startExecution()
+    → _showOptimisticMessage(pendingId, content)  // yellow "sending..." message
+    ↓
+streamToConversation() → msg.stream RPC
+    ↓
+Server: msg.stream handler
+    → createMessage(p.id, 'user', prompt)
+    → broadcastSync({ type: 'message_created', ... })
+    → startExecution() -> streaming_start broadcast
+    ↓
+Client: message_created event
+    → handleMessageCreated()
+    → Finds optimistic message by ID
+    → Updates it (removes "sending" style, adds timestamp)
+    ↓
+Client: streaming_start event
+    → Disables input, shows "thinking..."
+    → Subscribes to session
+    → Starts chunk polling
+```
+
+### Queue Case (Ctrl+Enter while streaming) - NOW FIXED
+
+```
+User input: "Now add subtraction" during execution
+    ↓
+startExecution()
+    → isStreaming = true
+    → SKIP _showOptimisticMessage ✓ (FIXED)
+    ↓
+streamToConversation() → msg.stream RPC
+    ↓
+Server: msg.stream handler
+    → createMessage(p.id, 'user', prompt)
+    → broadcastSync({ type: 'message_created', ... })
+    → activeExecutions.has(p.id) = true
+    → enqueue(p.id, prompt, ...)
+    → broadcastSync({ type: 'queue_status', ... })
+    ↓
+Client: message_created event
+    → handleMessageCreated()
+    → Message is not in current conversation display
+    → Emit event but don't render
+    ↓
+Client: queue_status event
+    → handleQueueStatus()
+    → fetchAndRenderQueue()
+    → Displays in yellow queue indicator ✓
+    ↓
+Result: Message only in queue, no duplication ✓
+```
+
+### Steering (Ctrl+Enter + Steer button during execution)
+
+```
+User clicks Steer button on queued message
+    ↓
+Client: conv.steer RPC with JSON-RPC format
+    ↓
+Server: conv.steer handler
+    → Finds active process stdin
+    → Writes JSON-RPC prompt request
+    → Removes from queue (optional)
+    ↓
+Claude Code: Receives JSON-RPC on stdin
+    → Processes prompt immediately
+    → Continues execution with new direction
+    ↓
+Client: receives streaming_progress chunks
+    → Renders new content below existing output
+```
+
+## Consistency Guarantees
+
+### What IS Consistent
+- Messages don't duplicate (handled in handleMessageCreated)
+- Streaming chunks are ordered (via session ID subscription)
+- Queue items maintain order (FIFO in server queue map)
+- Tool installations tracked atomically (per-tool in database)
+
+### What IS NOT Guaranteed
+- Client queue display and server queue state may briefly desync
+- If connection drops mid-queue, client state becomes stale
+- No explicit confirmation that user message was queued
+- Queue item execution not signaled with explicit event
+
+## Recommendations for Further Improvement
+
+### Priority 1: Explicit Queue Lifecycle
+Add dedicated broadcast events:
+```javascript
+'message_queued'        // Sent when msg added to queue
+'queue_item_executing'  // Sent when queue item becomes active
+'queue_item_completed'  // Sent when queue item finished
+```
+
+### Priority 2: Atomic State Snapshots
+Periodically broadcast conversation state:
+```javascript
+{
+  type: 'conversation_state',
+  conversationId,
+  state: {
+    isStreaming: boolean,
+    messageCount: number,
+    queueLength: number,
+    lastMessageId: string,
+    lastUpdate: timestamp
+  }
+}
+```
+
+### Priority 3: Deterministic Client State Machine
+Each conversation has explicit state mode:
+```javascript
+state = {
+  mode: 'IDLE' | 'STREAMING' | 'QUEUED',
+  messages: [],
+  queue: [],
+  isTransitioning: boolean  // true when queue→execute
+}
+```
+
+### Priority 4: Connection Recovery
+After reconnect, fetch complete conversation state:
+```javascript
+await wsClient.rpc('conv.sync', { id: conversationId })
+// Returns: { messages, queue, isStreaming, chunks }
+```
+
+## Testing Matrix
+
+| Scenario | Before Fix | After Fix | Status |
+|----------|-----------|-----------|--------|
+| Ctrl+Enter (not streaming) | ✓ Works | ✓ Works | ✓ OK |
+| Ctrl+Enter (streaming) | ✗ Duplicate | ✓ Single queue item | ✓ FIXED |
+| Queue indicator updates | ⚠️ Polling | ⚠️ Polling | ⚠️ Could improve |
+| Steering works | ✗ "Not available" | ✓ Works | ✓ FIXED |
+| Multiple queued items | ⚠️ Order unclear | ⚠️ Order unclear | ⚠️ OK but could confirm |
+| Page reload with queue | ✗ Queue lost | ✓ Persisted | ✓ OK |
+| Network disconnect | ⚠️ State stale | ⚠️ State stale | ⚠️ Could improve |
+
+## Files Modified in Latest Session
+
+1. **lib/claude-runner.js** - Steering support
+   - Changed `supportsStdin: false` → `true`
+   - Changed `closeStdin: true` → `false`
+   - Removed positional prompt argument
+
+2. **static/js/client.js** - Queue display fix
+   - Skip optimistic message when streaming
+   - Skip confirm/fail handlers for queued messages
+
+3. **static/index.html** - Hamburger animation
+   - Added `transition: none` to .sidebar
+
+4. **fsbrowse/public/style.css** - Dark mode colors
+   - Improved hover states
+   - Theme-aware modal focus colors
+
+## Conclusion
+
+The sync-to-display system is now more consistent with the queue display fix and steering support. The architecture handles the primary use cases well, but could benefit from explicit lifecycle events and atomic state snapshots for guaranteed consistency. The current implementation is pragmatic and performant, trading off some guarantees for simplicity and responsiveness.
+

package/docs/SYNC_TO_DISPLAY_REPORT.md

@@ -0,0 +1,279 @@
+# AgentGUI Sync-to-Display Architecture Report
+
+## Executive Summary
+
+The sync-to-display system handles real-time synchronization of execution state from server to client display. Current implementation has been improved through multiple fixes, particularly for queue display consistency and steering support. This document consolidates the architecture and identifies remaining optimization opportunities.
+
+## Architecture Overview
+
+### 1. Broadcast System (server.js:4269-4317)
+
+**BROADCAST_TYPES** - Global broadcast events sent to ALL connected clients:
+- `message_created`, `conversation_created/updated/deleted`
+- `queue_status`, `queue_updated`
+- `streaming_start`, `streaming_progress`, `streaming_complete`, `streaming_error`
+- `rate_limit_hit`, `rate_limit_clear`
+- Tool-related events (`tool_*`, `tools_*`)
+- Voice/speech events
+- PM2 monitoring events
+
+**broadcastSync()** function (line 4288):
+```
+1. Check if event.type is in BROADCAST_TYPES
+2. If broadcast: send to ALL syncClients
+3. If targeted: send to sessionId or conversationId subscribers only
+4. Also dispatch to SSE stream handlers if active
+```
+
+### 2. Client-Side Message Reception (static/js/client.js)
+
+**handleWsMessage()** routes events by type:
+```javascript
+case 'message_created': handleMessageCreated(data)
+case 'queue_status': handleQueueStatus(data)
+case 'streaming_start': handleStreamingStart(data)
+case 'streaming_progress': handleStreamingProgress(data)
+```
+
+### 3. Display Rendering Layers
+
+**Layer 1: Message Rendering** (handleMessageCreated)
+- Checks if message already exists (prevents duplicates)
+- For user messages: finds optimistic message, updates it
+- For assistant messages: skips if streaming (handled by chunks)
+
+**Layer 2: Streaming Progress** (handleStreamingProgress)
+- Adds chunks to queue
+- Batches rendering via StreamingRenderer
+- Handles thinking blocks directly
+
+**Layer 3: Queue Indicator** (fetchAndRenderQueue)
+- Polls via `q.ls` RPC every interval
+- Displays queued items in yellow control blocks
+- Renders with Edit/Delete/Steer buttons
+
+**Layer 4: Conversation State** (handleConversationUpdated)
+- Updates isStreaming flag
+- Refreshes UI based on new state
+
+## Recent Fixes & Status
+
+### Fixed Issues
+
+✅ **Queue Message Duplication** (commit fbfd1ad)
+- Problem: Queued messages appeared as both user prompt + queue item
+- Solution: Skip optimistic message when conversation is streaming
+- Impact: Clean queue display, no duplication
+
+✅ **Steering Support** (commit 81d83af)
+- Problem: Steering showed "Process not available" error
+- Solution: Keep stdin open (supportsStdin=true, closeStdin=false)
+- Impact: Users can send follow-up prompts during execution
+
+✅ **Chunk Rendering Race** (Session 3a)
+- Problem: Early chunks missed before polling started
+- Solution: Immediate chunk fetch on streaming_start
+- Impact: No missing initial output
+
+✅ **Dark Mode Selection** (fsbrowse)
+- Problem: Selection states hard to see in dark mode
+- Solution: Theme-aware colors for hover/focus
+- Impact: Better visual feedback in both themes
+
+### Remaining Consistency Issues
+
+⚠️ **Queue State Sync Timing**
+- Queue created on server via enqueue()
+- message_created broadcast may arrive before queue is populated
+- Client fetchAndRenderQueue() polls but timing is unpredictable
+- No atomic operation ensuring client sees both message and queue
+
+⚠️ **Multiple Sources of Truth**
+- Server: database, active execution map, queue map
+- Client: message list, streaming set, queue indicator
+- Conversation state: isStreaming flag can desync if connection drops
+- No single authoritative state object
+
+⚠️ **Optimistic Message Updates**
+- Client creates optimistic "sending" message on submit
+- Server creates actual message and broadcasts
+- handleMessageCreated() finds and updates optimistic message
+- If network is slow, both may briefly exist
+
+⚠️ **Queue Execution Transition**
+- Queue items don't explicitly transition to executed
+- Client must poll queue indicator to see it disappear
+- No event indicating "queue item now executing"
+- Confusing UX when queue suddenly empties
+
+## Data Flow Examples
+
+### Normal Execution (Ctrl+Enter with no active stream)
+
+```
+User input: "Write a function"
+    ↓
+startExecution()
+    → _showOptimisticMessage(pendingId, content)  // yellow "sending..." message
+    ↓
+streamToConversation() → msg.stream RPC
+    ↓
+Server: msg.stream handler
+    → createMessage(p.id, 'user', prompt)
+    → broadcastSync({ type: 'message_created', ... })
+    → startExecution() -> streaming_start broadcast
+    ↓
+Client: message_created event
+    → handleMessageCreated()
+    → Finds optimistic message by ID
+    → Updates it (removes "sending" style, adds timestamp)
+    ↓
+Client: streaming_start event
+    → Disables input, shows "thinking..."
+    → Subscribes to session
+    → Starts chunk polling
+```
+
+### Queue Case (Ctrl+Enter while streaming) - NOW FIXED
+
+```
+User input: "Now add subtraction" during execution
+    ↓
+startExecution()
+    → isStreaming = true
+    → SKIP _showOptimisticMessage ✓ (FIXED)
+    ↓
+streamToConversation() → msg.stream RPC
+    ↓
+Server: msg.stream handler
+    → createMessage(p.id, 'user', prompt)
+    → broadcastSync({ type: 'message_created', ... })
+    → activeExecutions.has(p.id) = true
+    → enqueue(p.id, prompt, ...)
+    → broadcastSync({ type: 'queue_status', ... })
+    ↓
+Client: message_created event
+    → handleMessageCreated()
+    → Message is not in current conversation display
+    → Emit event but don't render
+    ↓
+Client: queue_status event
+    → handleQueueStatus()
+    → fetchAndRenderQueue()
+    → Displays in yellow queue indicator ✓
+    ↓
+Result: Message only in queue, no duplication ✓
+```
+
+### Steering (Ctrl+Enter + Steer button during execution)
+
+```
+User clicks Steer button on queued message
+    ↓
+Client: conv.steer RPC with JSON-RPC format
+    ↓
+Server: conv.steer handler
+    → Finds active process stdin
+    → Writes JSON-RPC prompt request
+    → Removes from queue (optional)
+    ↓
+Claude Code: Receives JSON-RPC on stdin
+    → Processes prompt immediately
+    → Continues execution with new direction
+    ↓
+Client: receives streaming_progress chunks
+    → Renders new content below existing output
+```
+
+## Consistency Guarantees
+
+### What IS Consistent
+- Messages don't duplicate (handled in handleMessageCreated)
+- Streaming chunks are ordered (via session ID subscription)
+- Queue items maintain order (FIFO in server queue map)
+- Tool installations tracked atomically (per-tool in database)
+
+### What IS NOT Guaranteed
+- Client queue display and server queue state may briefly desync
+- If connection drops mid-queue, client state becomes stale
+- No explicit confirmation that user message was queued
+- Queue item execution not signaled with explicit event
+
+## Recommendations for Further Improvement
+
+### Priority 1: Explicit Queue Lifecycle
+Add dedicated broadcast events:
+```javascript
+'message_queued'        // Sent when msg added to queue
+'queue_item_executing'  // Sent when queue item becomes active
+'queue_item_completed'  // Sent when queue item finished
+```
+
+### Priority 2: Atomic State Snapshots
+Periodically broadcast conversation state:
+```javascript
+{
+  type: 'conversation_state',
+  conversationId,
+  state: {
+    isStreaming: boolean,
+    messageCount: number,
+    queueLength: number,
+    lastMessageId: string,
+    lastUpdate: timestamp
+  }
+}
+```
+
+### Priority 3: Deterministic Client State Machine
+Each conversation has explicit state mode:
+```javascript
+state = {
+  mode: 'IDLE' | 'STREAMING' | 'QUEUED',
+  messages: [],
+  queue: [],
+  isTransitioning: boolean  // true when queue→execute
+}
+```
+
+### Priority 4: Connection Recovery
+After reconnect, fetch complete conversation state:
+```javascript
+await wsClient.rpc('conv.sync', { id: conversationId })
+// Returns: { messages, queue, isStreaming, chunks }
+```
+
+## Testing Matrix
+
+| Scenario | Before Fix | After Fix | Status |
+|----------|-----------|-----------|--------|
+| Ctrl+Enter (not streaming) | ✓ Works | ✓ Works | ✓ OK |
+| Ctrl+Enter (streaming) | ✗ Duplicate | ✓ Single queue item | ✓ FIXED |
+| Queue indicator updates | ⚠️ Polling | ⚠️ Polling | ⚠️ Could improve |
+| Steering works | ✗ "Not available" | ✓ Works | ✓ FIXED |
+| Multiple queued items | ⚠️ Order unclear | ⚠️ Order unclear | ⚠️ OK but could confirm |
+| Page reload with queue | ✗ Queue lost | ✓ Persisted | ✓ OK |
+| Network disconnect | ⚠️ State stale | ⚠️ State stale | ⚠️ Could improve |
+
+## Files Modified in Latest Session
+
+1. **lib/claude-runner.js** - Steering support
+   - Changed `supportsStdin: false` → `true`
+   - Changed `closeStdin: true` → `false`
+   - Removed positional prompt argument
+
+2. **static/js/client.js** - Queue display fix
+   - Skip optimistic message when streaming
+   - Skip confirm/fail handlers for queued messages
+
+3. **static/index.html** - Hamburger animation
+   - Added `transition: none` to .sidebar
+
+4. **fsbrowse/public/style.css** - Dark mode colors
+   - Improved hover states
+   - Theme-aware modal focus colors
+
+## Conclusion
+
+The sync-to-display system is now more consistent with the queue display fix and steering support. The architecture handles the primary use cases well, but could benefit from explicit lifecycle events and atomic state snapshots for guaranteed consistency. The current implementation is pragmatic and performant, trading off some guarantees for simplicity and responsiveness.
+

package/lib/ws-handlers-conv.js

@@ -205,13 +205,17 @@ export function register(router, deps) {
     const idempotencyKey = p.idempotencyKey || null;
     const message = queries.createMessage(p.id, 'user', p.content, idempotencyKey);
     queries.createEvent('message.created', { role: 'user', messageId: message.id }, p.id);
-    broadcastSync({ type: 'message_created', conversationId: p.id, message, timestamp: Date.now() });
-    if (activeExecutions.has(p.id)) {
-      const qp = enqueue(p.id, p.content, agentId, model, message.id, subAgent);
-      return { message, queued: true, queuePosition: qp, idempotencyKey };
+
+    // Only broadcast message_created if NOT queuing - queued messages show in queue indicator instead
+    if (!activeExecutions.has(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 };
     }
-    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 };
   });
 
   router.handle('msg.get', (p) => {
@@ -229,13 +233,17 @@ export function register(router, deps) {
     const subAgent = p.subAgent || conv.subAgent || null;
     const userMessage = queries.createMessage(p.id, 'user', prompt);
     queries.createEvent('message.created', { role: 'user', messageId: userMessage.id }, p.id);
-    broadcastSync({ type: 'message_created', conversationId: p.id, message: userMessage, timestamp: Date.now() });
-    if (activeExecutions.has(p.id)) {
-      const qp = enqueue(p.id, prompt, agentId, model, userMessage.id, subAgent);
-      return { message: userMessage, queued: true, queuePosition: qp };
+
+    // Only broadcast message_created if NOT queuing - queued messages show in queue indicator instead
+    if (!activeExecutions.has(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 };
     }
-    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);
+    return { message: userMessage, queued: true, queuePosition: qp };
   });
 
   router.handle('q.ls', (p) => {

package/package.json

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

package/server.js

@@ -4179,7 +4179,16 @@ function drainMessageQueue(conversationId) {
   const next = queue.shift();
   if (queue.length === 0) messageQueues.delete(conversationId);
 
-  debugLog(`[queue] Draining next message for ${conversationId}`);
+  debugLog(`[queue] Draining next message for ${conversationId}, messageId=${next.messageId}`);
+
+  // Broadcast queue_item_dequeued so client can update UI immediately
+  broadcastSync({
+    type: 'queue_item_dequeued',
+    conversationId,
+    messageId: next.messageId,
+    queueLength: queue?.length || 0,
+    timestamp: Date.now()
+  });
 
   const session = queries.createSession(conversationId);
   queries.createEvent('session.created', { messageId: next.messageId, sessionId: session.id }, conversationId, session.id);

package/static/js/client.js

@@ -691,18 +691,23 @@ class AgentGUIClient {
 
       switch (data.type) {
         case 'streaming_start':
+          window.syncDebugger?.logEvent('streaming_start', data);
           this.handleStreamingStart(data).catch(e => console.error('handleStreamingStart error:', e));
           break;
         case 'streaming_resumed':
+          window.syncDebugger?.logEvent('streaming_resumed', data);
           this.handleStreamingResumed(data).catch(e => console.error('handleStreamingResumed error:', e));
           break;
         case 'streaming_progress':
+          window.syncDebugger?.logEvent('streaming_progress', { sessionId: data.sessionId });
           this.handleStreamingProgress(data);
           break;
         case 'streaming_complete':
+          window.syncDebugger?.logEvent('streaming_complete', data);
           this.handleStreamingComplete(data);
           break;
         case 'streaming_error':
+          window.syncDebugger?.logEvent('streaming_error', data);
           this.handleStreamingError(data);
           break;
         case 'conversation_created':
@@ -712,14 +717,22 @@ class AgentGUIClient {
           this.handleAllConversationsDeleted(data);
           break;
         case 'message_created':
+          window.syncDebugger?.logEvent('message_created', data);
           this.handleMessageCreated(data);
           break;
+        case 'conversation_updated':
+          window.syncDebugger?.logEvent('conversation_updated', data);
+          this.handleConversationUpdated(data);
+          break;
         case 'queue_status':
           this.handleQueueStatus(data);
           break;
         case 'queue_updated':
           this.handleQueueUpdated(data);
           break;
+        case 'queue_item_dequeued':
+          this.handleQueueItemDequeued(data);
+          break;
         case 'rate_limit_hit':
           this.handleRateLimitHit(data);
           break;
@@ -778,6 +791,7 @@ class AgentGUIClient {
     if (this.state.currentConversation?.id !== data.conversationId) {
       console.log('Streaming started for non-active conversation:', data.conversationId);
       this.state.streamingConversations.set(data.conversationId, true);
+      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);
 
@@ -1140,21 +1154,31 @@ class AgentGUIClient {
     if (conversationId && this.state.currentConversation?.id !== conversationId) {
       console.log('Streaming completed for non-active conversation:', conversationId);
       this.state.streamingConversations.delete(conversationId);
+      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);
+    console.log('[SYNC] streaming_complete - active conv:', { convId: conversationId, streamingCount: this.state.streamingConversations.size, interrupted: data.interrupted });
     this.updateBusyPromptArea(conversationId);
 
+    const sessionId = data.sessionId || this.state.currentSession?.id;
 
+    // Unsubscribe from session to prevent subscription leak
+    if (sessionId && this.wsManager) {
+      try {
+        this.wsManager.unsubscribeFromSession(sessionId);
+      } catch (e) {
+        // Session may not exist, ignore
+      }
+    }
 
     // Clear queue indicator when streaming completes
     const queueEl = document.querySelector('.queue-indicator');
     if (queueEl) queueEl.remove();
 
-    const sessionId = data.sessionId || this.state.currentSession?.id;
     // Remove ALL streaming indicators from the entire messages container
     const outputEl2 = document.getElementById('output');
     if (outputEl2) {
@@ -1220,6 +1244,13 @@ class AgentGUIClient {
       return;
     }
 
+    console.log('[SYNC] message_created:', { msgId: data.message.id, role: data.message.role, convId: data.conversationId });
+
+    // Update messageCount in current conversation state for user messages
+    if (data.message.role === 'user' && this.state.currentConversation) {
+      this.state.currentConversation.messageCount = (this.state.currentConversation.messageCount || 0) + 1;
+    }
+
     if (data.message.role === 'assistant' && this.state.streamingConversations.has(data.conversationId)) {
       this.emit('message:created', data);
       return;
@@ -1279,6 +1310,15 @@ class AgentGUIClient {
     this.emit('message:created', data);
   }
 
+  handleConversationUpdated(data) {
+    // Update current conversation metadata if this is the active conversation
+    if (data.conversation && data.conversation.id === this.state.currentConversation?.id) {
+      this.state.currentConversation = data.conversation;
+    }
+    // Emit event for sidebar/other listeners
+    this.emit('conversation:updated', data);
+  }
+
   handleQueueStatus(data) {
     if (data.conversationId !== this.state.currentConversation?.id) return;
     this.fetchAndRenderQueue(data.conversationId);
@@ -1289,6 +1329,13 @@ class AgentGUIClient {
     this.fetchAndRenderQueue(data.conversationId);
   }
 
+  handleQueueItemDequeued(data) {
+    if (data.conversationId !== this.state.currentConversation?.id) return;
+    // Item was dequeued and execution started - remove from queue indicator
+    // and update queue display
+    this.fetchAndRenderQueue(data.conversationId);
+  }
+
   async fetchAndRenderQueue(conversationId) {
     const outputEl = document.querySelector('.conversation-messages');
     if (!outputEl) return;
@@ -1848,7 +1895,26 @@ class AgentGUIClient {
         latencyEma: self.wsManager?._latencyEma || null,
         serverProcessingEstimate: self._serverProcessingEstimate,
         latencyTrend: self.wsManager?.latency?.trend || null
-      })
+      }),
+
+      // Sync-to-display debugging
+      getSyncState: () => ({
+        currentConversation: self.state.currentConversation,
+        isStreaming: self.state.currentConversation && self.state.streamingConversations.has(self.state.currentConversation.id),
+        streamingConversations: Array.from(self.state.streamingConversations),
+        rendererEventQueueLength: self.renderer?.eventQueue?.length || 0,
+        rendererEventHistoryLength: self.renderer?.eventHistory?.length || 0,
+      }),
+
+      // Message DOM state
+      getMessageState: () => {
+        const output = document.querySelector('.conversation-messages');
+        if (!output) return { error: 'No conversation output found' };
+        const messageCount = output.querySelectorAll('.message').length;
+        const queueItems = output.querySelectorAll('.queue-item').length;
+        const pendingMessages = output.querySelectorAll('.message-sending').length;
+        return { messageCount, queueItems, pendingMessages };
+      }
     };
   }
 

package/static/js/sync-debug.js

@@ -0,0 +1,148 @@
+/**
+ * Sync-to-Display Debug System
+ * Comprehensive logging and state validation for sync/render pipeline
+ */
+
+class SyncDebugger {
+  constructor() {
+    this.enabled = false;
+    this.eventLog = [];
+    this.maxLogSize = 500;
+    this.stateSnapshots = [];
+    this.processingStack = [];
+    this.startTime = Date.now();
+
+    // Event tracking
+    this.processedEventIds = new Set();
+    this.eventCounts = {};
+
+    // Timing
+    this.timingMarkers = {};
+  }
+
+  enable() {
+    this.enabled = true;
+    console.log('[SyncDebug] Enabled');
+    window.SyncDebugger = this;
+  }
+
+  disable() {
+    this.enabled = false;
+    console.log('[SyncDebug] Disabled');
+  }
+
+  logEvent(type, data) {
+    if (!this.enabled) return;
+
+    const timestamp = Date.now() - this.startTime;
+    const eventId = data?.id || data?.messageId || data?.conversationId || '?';
+
+    // Check for duplicates
+    const isDuplicate = this.processedEventIds.has(eventId) &&
+                        this.eventLog.some(e => e.type === type && e.eventId === eventId);
+
+    const entry = {
+      timestamp,
+      type,
+      eventId,
+      isDuplicate,
+      dataKeys: data ? Object.keys(data) : [],
+      dataSize: JSON.stringify(data || {}).length
+    };
+
+    this.eventLog.push(entry);
+    this.eventCounts[type] = (this.eventCounts[type] || 0) + 1;
+    this.processedEventIds.add(eventId);
+
+    if (this.eventLog.length > this.maxLogSize) {
+      this.eventLog.shift();
+    }
+
+    if (isDuplicate) {
+      console.warn(`[SyncDebug] DUPLICATE EVENT: ${type} - ${eventId}`, entry);
+    } else {
+      console.log(`[SyncDebug] Event: ${type} (${timestamp}ms)`, entry);
+    }
+  }
+
+  logStateChange(name, before, after) {
+    if (!this.enabled) return;
+
+    const timestamp = Date.now() - this.startTime;
+    const snapshot = {
+      timestamp,
+      name,
+      before: JSON.parse(JSON.stringify(before)),
+      after: JSON.parse(JSON.stringify(after)),
+      changed: JSON.stringify(before) !== JSON.stringify(after)
+    };
+
+    this.stateSnapshots.push(snapshot);
+    if (this.stateSnapshots.length > this.maxLogSize) {
+      this.stateSnapshots.shift();
+    }
+
+    if (snapshot.changed) {
+      console.log(`[SyncDebug] State changed: ${name}`, snapshot);
+    }
+  }
+
+  pushOperation(name) {
+    const marker = { name, start: Date.now() };
+    this.processingStack.push(marker);
+    console.log(`[SyncDebug] > ${name}`);
+  }
+
+  popOperation() {
+    const marker = this.processingStack.pop();
+    if (marker) {
+      const duration = Date.now() - marker.start;
+      console.log(`[SyncDebug] < ${marker.name} (${duration}ms)`);
+      if (duration > 100) {
+        console.warn(`[SyncDebug] SLOW: ${marker.name} took ${duration}ms`);
+      }
+    }
+  }
+
+  getReport() {
+    return {
+      totalEvents: this.eventLog.length,
+      eventCounts: this.eventCounts,
+      duplicates: this.eventLog.filter(e => e.isDuplicate).length,
+      stateChanges: this.stateSnapshots.length,
+      uniqueEventIds: this.processedEventIds.size,
+      recentEvents: this.eventLog.slice(-20),
+      recentStateChanges: this.stateSnapshots.slice(-20)
+    };
+  }
+
+  printReport() {
+    const report = this.getReport();
+    console.table(report);
+    console.table(report.recentEvents);
+    console.table(report.recentStateChanges);
+  }
+
+  clearLogs() {
+    this.eventLog = [];
+    this.stateSnapshots = [];
+    this.processedEventIds.clear();
+    this.eventCounts = {};
+    this.processingStack = [];
+    console.log('[SyncDebug] Logs cleared');
+  }
+}
+
+// Create global instance
+window.syncDebugger = new SyncDebugger();
+
+// Expose commands
+window.debugSync = {
+  enable: () => window.syncDebugger.enable(),
+  disable: () => window.syncDebugger.disable(),
+  report: () => window.syncDebugger.printReport(),
+  clear: () => window.syncDebugger.clearLogs(),
+  get: () => window.syncDebugger.getReport()
+};
+
+console.log('[SyncDebug] Available. Use: debugSync.enable(), debugSync.report(), debugSync.clear()');