agentgui 1.0.727 → 1.0.729

package/static/js/client.js

@@ -75,16 +75,6 @@ class AgentGUIClient {
     this._loadInProgress = {}; // { [conversationId]: { requestId, abortController, timestamp, prevConversationId } }
     this._currentRequestId = 0; // Auto-incrementing request counter
 
-    // Prompt area state machine: READY | LOADING | STREAMING | QUEUED | DISABLED
-    // Controls atomic transitions to prevent inconsistent UI states
-    this._promptState = 'READY'; // Initial state
-    this._promptStateTransitions = {
-      'READY': ['LOADING', 'STREAMING', 'DISABLED'],
-      'LOADING': ['READY', 'STREAMING', 'DISABLED'],
-      'STREAMING': ['QUEUED', 'READY'],
-      'QUEUED': ['STREAMING', 'READY'],
-      'DISABLED': ['READY']
-    };
 
     this._scrollTarget = 0;
     this._scrollAnimating = false;
@@ -799,6 +789,7 @@ class AgentGUIClient {
 
   async handleStreamingStart(data) {
     console.log('Streaming started:', data);
+    if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'STREAMING', conversationId: data.conversationId });
     this._clearThinkingCountdown();
     if (this._lastSendTime > 0) {
       const actual = Date.now() - this._lastSendTime;
@@ -880,58 +871,7 @@ class AgentGUIClient {
             }));
             const userMsgs = (fullData.messages || []).filter(m => m.role === 'user');
             if (priorChunks.length > 0) {
-              const sessionOrder = [];
-              const sessionGroups = {};
-              priorChunks.forEach(c => {
-                if (!sessionGroups[c.sessionId]) { sessionGroups[c.sessionId] = []; sessionOrder.push(c.sessionId); }
-                sessionGroups[c.sessionId].push(c);
-              });
-              const priorFrag = document.createDocumentFragment();
-              let ui = 0;
-              sessionOrder.forEach(sid => {
-                const sList = sessionGroups[sid];
-                const sStart = sList[0].created_at;
-                while (ui < userMsgs.length && userMsgs[ui].created_at <= sStart) {
-                  const m = userMsgs[ui++];
-                  const uDiv = document.createElement('div');
-                  uDiv.className = 'message message-user';
-                  uDiv.setAttribute('data-msg-id', m.id);
-                  uDiv.innerHTML = `<div class="message-role">User</div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div>`;
-                  priorFrag.appendChild(uDiv);
-                }
-                const mDiv = document.createElement('div');
-                mDiv.className = 'message message-assistant';
-                mDiv.id = `message-${sid}`;
-                mDiv.innerHTML = '<div class="message-role">Assistant</div><div class="message-blocks streaming-blocks"></div>';
-                const bEl = mDiv.querySelector('.message-blocks');
-                const bFrag = document.createDocumentFragment();
-                sList.forEach(chunk => {
-                  if (!chunk.block?.type) return;
-                  if (chunk.block.type === 'tool_result') {
-                    const lastInFrag = bFrag.lastElementChild;
-                    if (lastInFrag?.classList?.contains('block-tool-use')) {
-                      this.renderer.mergeResultIntoToolUse(lastInFrag, chunk.block);
-                      return;
-                    }
-                  }
-                  const el = this.renderer.renderBlock(chunk.block, chunk, bFrag);
-                  if (!el) return;
-                  bFrag.appendChild(el);
-                });
-                bEl.appendChild(bFrag);
-                const ts = document.createElement('div'); ts.className = 'message-timestamp'; ts.textContent = new Date(sList[sList.length - 1].created_at).toLocaleString();
-                mDiv.appendChild(ts);
-                priorFrag.appendChild(mDiv);
-              });
-              while (ui < userMsgs.length) {
-                const m = userMsgs[ui++];
-                const uDiv = document.createElement('div');
-                uDiv.className = 'message message-user';
-                uDiv.setAttribute('data-msg-id', m.id);
-                uDiv.innerHTML = `<div class="message-role">User</div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div>`;
-                priorFrag.appendChild(uDiv);
-              }
-              messagesEl.appendChild(priorFrag);
+              this._renderConversationContent(messagesEl, priorChunks, userMsgs, null);
             } else {
               messagesEl.appendChild(this.renderMessagesFragment(fullData.messages || []));
             }
@@ -955,7 +895,6 @@ class AgentGUIClient {
         `;
         messagesEl.appendChild(streamingDiv);
       } else {
-        // Reuse existing div - ensure streaming class and single indicator
         streamingDiv.classList.add('streaming-message');
         streamingDiv.querySelectorAll('.streaming-indicator').forEach(ind => ind.remove());
         const indDiv = document.createElement('div');
@@ -1118,6 +1057,7 @@ class AgentGUIClient {
 
   handleStreamingError(data) {
     console.error('Streaming error:', data);
+    if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'READY' });
     this._clearThinkingCountdown();
 
     // Hide stop and inject buttons on error
@@ -1195,6 +1135,7 @@ class AgentGUIClient {
 
   handleStreamingComplete(data) {
     console.log('Streaming completed:', data);
+    if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'READY' });
     this._clearThinkingCountdown();
 
     const conversationId = data.conversationId || this.state.currentSession?.conversationId;
@@ -2130,12 +2071,75 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Render a single chunk to the output
-   */
+  _renderConversationContent(messagesContainer, chunks, userMessages, activeSessionId) {
+    if (!chunks || chunks.length === 0) return;
+    const sessionMap = new Map();
+    for (const chunk of chunks) {
+      if (!sessionMap.has(chunk.sessionId)) sessionMap.set(chunk.sessionId, []);
+      sessionMap.get(chunk.sessionId).push(chunk);
+    }
+    const frag = document.createDocumentFragment();
+    let ui = 0;
+    for (const [sid, list] of sessionMap) {
+      const sessionStart = list[0].created_at;
+      while (ui < userMessages.length && userMessages[ui].created_at <= sessionStart) {
+        const m = userMessages[ui++];
+        const uDiv = document.createElement('div');
+        uDiv.className = 'message message-user';
+        uDiv.setAttribute('data-msg-id', m.id);
+        uDiv.innerHTML = `<div class="message-role">User</div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div>`;
+        frag.appendChild(uDiv);
+      }
+      const isActive = sid === activeSessionId;
+      const msgDiv = document.createElement('div');
+      msgDiv.className = `message message-assistant${isActive ? ' streaming-message' : ''}`;
+      msgDiv.id = isActive ? `streaming-${sid}` : `message-${sid}`;
+      msgDiv.innerHTML = '<div class="message-role">Assistant</div><div class="message-blocks streaming-blocks"></div>';
+      const blocksEl = msgDiv.querySelector('.message-blocks');
+      const blockFrag = document.createDocumentFragment();
+      const deferred = [];
+      for (const chunk of list) {
+        if (!chunk.block?.type) continue;
+        if (chunk.block.type === 'tool_result') { deferred.push(chunk); continue; }
+        const el = this.renderer.renderBlock(chunk.block, chunk, blockFrag);
+        if (!el) continue;
+        el.classList.add('block-loaded');
+        blockFrag.appendChild(el);
+      }
+      blocksEl.appendChild(blockFrag);
+      for (const chunk of deferred) {
+        const tid = chunk.block.tool_use_id;
+        const toolUseEl = (tid ? blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`) : null)
+          || (blocksEl.lastElementChild?.classList.contains('block-tool-use') ? blocksEl.lastElementChild : null);
+        if (toolUseEl) this.renderer.mergeResultIntoToolUse(toolUseEl, chunk.block);
+      }
+      if (isActive) {
+        const ind = document.createElement('div');
+        ind.className = 'streaming-indicator';
+        ind.style = 'display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;';
+        ind.innerHTML = '<span class="animate-spin" style="display:inline-block;width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;"></span><span class="streaming-indicator-label">Processing...</span>';
+        msgDiv.appendChild(ind);
+      } else {
+        const ts = document.createElement('div');
+        ts.className = 'message-timestamp';
+        ts.textContent = new Date(list[list.length - 1].created_at).toLocaleString();
+        msgDiv.appendChild(ts);
+      }
+      frag.appendChild(msgDiv);
+    }
+    while (ui < userMessages.length) {
+      const m = userMessages[ui++];
+      const uDiv = document.createElement('div');
+      uDiv.className = 'message message-user';
+      uDiv.setAttribute('data-msg-id', m.id);
+      uDiv.innerHTML = `<div class="message-role">User</div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div>`;
+      frag.appendChild(uDiv);
+    }
+    messagesContainer.appendChild(frag);
+  }
+
   renderChunk(chunk) {
     if (!chunk || !chunk.block) return;
-    // Deduplicate: skip if already rendered via WebSocket streaming_progress
     const seq = chunk.sequence;
     if (seq !== undefined) {
       const seen = (this._renderedSeqs = this._renderedSeqs || {})[chunk.sessionId] || (this._renderedSeqs[chunk.sessionId] = new Set());
@@ -2521,15 +2525,14 @@ class AgentGUIClient {
    */
   disableControls() {
     if (this.ui.sendButton) this.ui.sendButton.disabled = true;
+    if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'DISABLED' });
   }
 
-  /**
-   * Enable UI controls after execution completes or fails
-   */
   enableControls() {
     if (this.ui.sendButton) {
       this.ui.sendButton.disabled = !this.wsManager?.isConnected;
     }
+    if (window.promptMachineAPI) window.promptMachineAPI.send({ type: 'READY' });
     this.updateBusyPromptArea(this.state.currentConversation?.id);
   }
 
@@ -2847,103 +2850,8 @@ class AgentGUIClient {
         }
 
         if (chunks.length > 0) {
-          const sessionOrder = [];
-          const sessionChunks = {};
-          chunks.forEach(chunk => {
-            if (!sessionChunks[chunk.sessionId]) {
-              sessionChunks[chunk.sessionId] = [];
-              sessionOrder.push(chunk.sessionId);
-            }
-            sessionChunks[chunk.sessionId].push(chunk);
-          });
-
-          const frag = document.createDocumentFragment();
-          let userMsgIdx = 0;
-
-          sessionOrder.forEach((sessionId) => {
-            const sessionChunkList = sessionChunks[sessionId];
-            const sessionStart = sessionChunkList[0].created_at;
-
-            while (userMsgIdx < userMessages.length && userMessages[userMsgIdx].created_at <= sessionStart) {
-              const msg = userMessages[userMsgIdx];
-              const userDiv = document.createElement('div');
-              userDiv.className = 'message message-user';
-              userDiv.setAttribute('data-msg-id', msg.id);
-              userDiv.innerHTML = `
-                <div class="message-role">User</div>
-                ${this.renderMessageContent(msg.content)}
-                <div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>
-              `;
-              frag.appendChild(userDiv);
-              userMsgIdx++;
-            }
-
-            const isCurrentActiveSession = shouldResumeStreaming && latestSession && latestSession.id === sessionId;
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `message message-assistant${isCurrentActiveSession ? ' streaming-message' : ''}`;
-            messageDiv.id = isCurrentActiveSession ? `streaming-${sessionId}` : `message-${sessionId}`;
-            messageDiv.innerHTML = '<div class="message-role">Assistant</div><div class="message-blocks streaming-blocks"></div>';
-
-            const blocksEl = messageDiv.querySelector('.message-blocks');
-            const blockFrag = document.createDocumentFragment();
-            const toolResultBlocks = new Map();
-
-            sessionChunkList.forEach(chunk => {
-              if (!chunk.block?.type) return;
-              if (chunk.block.type === 'tool_result') {
-                toolResultBlocks.set(chunk.id, chunk);
-                return;
-              }
-              const element = this.renderer.renderBlock(chunk.block, chunk, blockFrag);
-              if (!element) return;
-              element.classList.add('block-loaded');
-              blockFrag.appendChild(element);
-            });
-
-            blocksEl.appendChild(blockFrag);
-
-            toolResultBlocks.forEach((chunk) => {
-              const toolUseId = chunk.block.tool_use_id;
-              const toolUseEl = toolUseId
-                ? blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${toolUseId}"]`)
-                : blocksEl.lastElementChild?.classList?.contains('block-type-tool_use') ? blocksEl.lastElementChild : null;
-              if (!toolUseEl) return;
-              this.renderer.mergeResultIntoToolUse(toolUseEl, chunk.block);
-            });
-
-            if (isCurrentActiveSession) {
-              const indicatorDiv = document.createElement('div');
-              indicatorDiv.className = 'streaming-indicator';
-              indicatorDiv.style = 'display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;';
-              indicatorDiv.innerHTML = `
-                <span class="animate-spin" style="display:inline-block;width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;"></span>
-                <span class="streaming-indicator-label">Processing...</span>
-              `;
-              messageDiv.appendChild(indicatorDiv);
-            } else {
-              const ts = document.createElement('div');
-              ts.className = 'message-timestamp';
-              ts.textContent = new Date(sessionChunkList[sessionChunkList.length - 1].created_at).toLocaleString();
-              messageDiv.appendChild(ts);
-            }
-
-            frag.appendChild(messageDiv);
-          });
-
-          while (userMsgIdx < userMessages.length) {
-            const msg = userMessages[userMsgIdx];
-            const userDiv = document.createElement('div');
-            userDiv.className = 'message message-user';
-            userDiv.setAttribute('data-msg-id', msg.id);
-            userDiv.innerHTML = `
-              <div class="message-role">User</div>
-              ${this.renderMessageContent(msg.content)}
-              <div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>
-            `;
-            frag.appendChild(userDiv);
-            userMsgIdx++;
-          }
-          if (!convSignal.aborted) messagesEl.appendChild(frag);
+          const activeSessionId = (shouldResumeStreaming && latestSession) ? latestSession.id : null;
+          if (!convSignal.aborted) this._renderConversationContent(messagesEl, chunks, userMessages, activeSessionId);
         } else {
           if (!convSignal.aborted) messagesEl.appendChild(this.renderMessagesFragment(allMessages || []));
         }

package/static/js/conv-list-machine.js

@@ -0,0 +1,137 @@
+(function() {
+  const { createMachine, createActor, assign } = XState;
+
+  const convListMachine = createMachine({
+    id: 'conv-list',
+    initial: 'unloaded',
+    context: {
+      conversations: [],
+      activeId: null,
+      streamingIds: [],
+      version: 0,
+      lastPollAt: null,
+    },
+    states: {
+      unloaded: {
+        on: {
+          LOAD_START: 'loading',
+        },
+      },
+      loading: {
+        on: {
+          LOAD_DONE: {
+            target: 'loaded',
+            actions: assign(({ context, event }) => {
+              const incoming = event.conversations || [];
+              let conversations;
+              if (incoming.length === 0 && context.conversations.length > 0) {
+                conversations = context.conversations;
+              } else if (incoming.length > 0 && incoming.length < context.conversations.length) {
+                const polledIds = new Set(incoming.map(c => c.id));
+                const kept = context.conversations.filter(c => !polledIds.has(c.id));
+                conversations = incoming.map(pc => {
+                  const cached = context.conversations.find(c => c.id === pc.id);
+                  return cached ? Object.assign({}, cached, pc) : pc;
+                }).concat(kept);
+              } else {
+                conversations = incoming;
+              }
+              return { conversations, version: context.version + 1, lastPollAt: Date.now() };
+            }),
+          },
+          LOAD_ERROR: 'error',
+        },
+      },
+      loaded: {
+        on: {
+          LOAD_START: 'loading',
+          ADD: {
+            actions: assign(({ context, event }) => {
+              if (context.conversations.some(c => c.id === event.conversation.id)) return {};
+              return { conversations: [event.conversation, ...context.conversations], version: context.version + 1 };
+            }),
+          },
+          UPDATE: {
+            actions: assign(({ context, event }) => {
+              const idx = context.conversations.findIndex(c => c.id === event.conversation.id);
+              if (idx < 0) return {};
+              const updated = [...context.conversations];
+              updated[idx] = Object.assign({}, updated[idx], event.conversation);
+              return { conversations: updated, version: context.version + 1 };
+            }),
+          },
+          DELETE: {
+            actions: assign(({ context, event }) => ({
+              conversations: context.conversations.filter(c => c.id !== event.id),
+              activeId: context.activeId === event.id ? null : context.activeId,
+              streamingIds: context.streamingIds.filter(id => id !== event.id),
+              version: context.version + 1,
+            })),
+          },
+          CLEAR_ALL: {
+            actions: assign({ conversations: [], activeId: null, streamingIds: [], version: 0 }),
+          },
+          SET_STREAMING: {
+            actions: assign(({ context, event }) => ({
+              streamingIds: context.streamingIds.includes(event.id)
+                ? context.streamingIds
+                : [...context.streamingIds, event.id],
+            })),
+          },
+          CLEAR_STREAMING: {
+            actions: assign(({ context, event }) => ({
+              streamingIds: context.streamingIds.filter(id => id !== event.id),
+            })),
+          },
+          SELECT: {
+            actions: assign(({ event }) => ({ activeId: event.id })),
+          },
+        },
+      },
+      error: {
+        on: {
+          LOAD_START: 'loading',
+        },
+      },
+    },
+  });
+
+  const actor = createActor(convListMachine);
+  actor.start();
+
+  function sendEvent(event) {
+    actor.send(event);
+    return actor.getSnapshot();
+  }
+
+  function getState() {
+    return actor.getSnapshot().value;
+  }
+
+  function getContext() {
+    return actor.getSnapshot().context;
+  }
+
+  function getConversations() {
+    return actor.getSnapshot().context.conversations;
+  }
+
+  function getStreamingIds() {
+    return actor.getSnapshot().context.streamingIds;
+  }
+
+  function isStreaming(id) {
+    return actor.getSnapshot().context.streamingIds.includes(id);
+  }
+
+  function getActiveId() {
+    return actor.getSnapshot().context.activeId;
+  }
+
+  function subscribe(fn) {
+    return actor.subscribe(fn);
+  }
+
+  window.__convListMachine = actor;
+  window.convListMachineAPI = { send: sendEvent, getState, getContext, getConversations, getStreamingIds, isStreaming, getActiveId, subscribe };
+})();

package/static/js/conversations.js

@@ -15,19 +15,12 @@ function pathBasename(p) {
 
 class ConversationManager {
   constructor() {
-    this.conversations = [];
-    this.activeId = null;
     this.listEl = document.querySelector('[data-conversation-list]');
     this.emptyEl = document.querySelector('[data-conversation-empty]');
     this.newBtn = document.querySelector('[data-new-conversation]');
     this.sidebarEl = document.querySelector('[data-sidebar]');
-    this.streamingConversations = new Set();
     this.agents = new Map();
 
-    this._conversationVersion = 0;
-    this._lastMutationSource = null;
-    this._lastMutationTime = 0;
-
     this.folderBrowser = {
       modal: null,
       listEl: null,
@@ -43,6 +36,23 @@ class ConversationManager {
     this.init();
   }
 
+  get conversations() {
+    return window.convListMachineAPI ? window.convListMachineAPI.getConversations() : [];
+  }
+
+  get activeId() {
+    return window.convListMachineAPI ? window.convListMachineAPI.getActiveId() : null;
+  }
+
+  set activeId(id) {
+    if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'SELECT', id });
+  }
+
+  get streamingConversations() {
+    const ids = window.convListMachineAPI ? window.convListMachineAPI.getStreamingIds() : [];
+    return { has: (id) => ids.includes(id), add: (id) => window.convListMachineAPI?.send({ type: 'SET_STREAMING', id }), delete: (id) => window.convListMachineAPI?.send({ type: 'CLEAR_STREAMING', id }), clear: () => ids.forEach(id => window.convListMachineAPI?.send({ type: 'CLEAR_STREAMING', id })) };
+  }
+
   async init() {
     this.newBtn?.addEventListener('click', () => this.openFolderBrowser());
     this.setupDelegatedListeners();
@@ -80,27 +90,18 @@ class ConversationManager {
     }
   }
 
-  _updateConversations(newArray, source, context = {}) {
+  _updateConversations(newArray, source) {
+    if (!window.convListMachineAPI) return { version: 0, timestamp: Date.now(), oldLen: 0, newLen: 0 };
     const oldLen = this.conversations.length;
     const newLen = Array.isArray(newArray) ? newArray.length : 0;
-    const mutationId = ++this._conversationVersion;
-    const timestamp = Date.now();
-
-    this.conversations = Array.isArray(newArray) ? newArray : [];
-    this._lastMutationSource = source;
-    this._lastMutationTime = timestamp;
-
-    window._conversationCacheVersion = mutationId;
-
-    if (context.verbose) {
-      console.log(`[ConvMgr] mutation #${mutationId} (${source}): ${oldLen} → ${newLen} items, ts=${timestamp}`);
-    }
-
-    return { version: mutationId, timestamp, oldLen, newLen };
+    window.convListMachineAPI.send({ type: 'LOAD_DONE', conversations: Array.isArray(newArray) ? newArray : [] });
+    const version = window.convListMachineAPI.getContext().version;
+    window._conversationCacheVersion = version;
+    return { version, timestamp: Date.now(), oldLen, newLen };
   }
 
   getConversationCacheVersion() {
-    return this._conversationVersion;
+    return window.convListMachineAPI ? window.convListMachineAPI.getContext().version : 0;
   }
 
   getAgentDisplayName(agentId) {
@@ -315,9 +316,8 @@ class ConversationManager {
       this.deleteAllBtn.disabled = true;
       await window.wsClient.rpc('conv.del.all', {});
       console.log('[ConversationManager] Deleted all conversations');
-      this._updateConversations([], 'clear_all');
+      if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'CLEAR_ALL' });
       window.ConversationState?.clear('delete_all');
-      this.activeId = null;
       window.dispatchEvent(new CustomEvent('conversation-deselected'));
       this.render();
     } catch (err) {
@@ -424,6 +424,7 @@ class ConversationManager {
   }
 
   async loadConversations() {
+    if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'LOAD_START' });
     try {
       const base = window.__BASE_URL || '/gm';
       const res = await fetch(base + '/api/conversations');
@@ -431,44 +432,25 @@ class ConversationManager {
       const data = await res.json();
       const convList = data.conversations || [];
 
-      // Never clear conversations on poll if the list is empty — preserve existing state
-      // Empty list likely indicates a server error, not actually empty conversations
-      if (convList.length > 0) {
-        // If poll returns fewer conversations than cached, merge to avoid dropping items
-        // due to transient server errors or partial responses
-        if (convList.length < this.conversations.length) {
-          const polledIds = new Set(convList.map(c => c.id));
-          const kept = this.conversations.filter(c => !polledIds.has(c.id));
-          // Update polled items in place, append any cached items not in poll result
-          const merged = convList.map(pc => {
-            const cached = this.conversations.find(c => c.id === pc.id);
-            return cached ? Object.assign({}, cached, pc) : pc;
-          }).concat(kept);
-          this._updateConversations(merged, 'poll_merge');
-        } else {
-          this._updateConversations(convList, 'poll');
-        }
-      } else if (this.conversations.length === 0) {
-        // First load and empty - show empty state, but don't clear on subsequent polls
-        this._updateConversations(convList, 'poll');
+      if (window.convListMachineAPI) {
+        window.convListMachineAPI.send({ type: 'LOAD_DONE', conversations: convList });
       }
-      // If convList is empty but this.conversations has items, do nothing - keep existing
 
       const clientStreamingMap = window.agentGuiClient?.state?.streamingConversations;
       for (const conv of this.conversations) {
         const serverStreaming = conv.isStreaming === 1 || conv.isStreaming === true;
         const clientStreaming = clientStreamingMap ? clientStreamingMap.has(conv.id) : false;
         if (serverStreaming || clientStreaming) {
-          this.streamingConversations.add(conv.id);
+          if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'SET_STREAMING', id: conv.id });
         } else {
-          this.streamingConversations.delete(conv.id);
+          if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'CLEAR_STREAMING', id: conv.id });
         }
       }
 
       this.render();
     } catch (err) {
       console.error('Failed to load conversations:', err);
-      // Don't show error state if we already have conversations cached - server may be transient issue
+      if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'LOAD_ERROR' });
       if (this.conversations.length === 0) {
         this.showEmpty('Failed to load conversations');
       }
@@ -595,7 +577,7 @@ class ConversationManager {
       console.error('[ConvMgr] activeId mutation rejected:', result.reason);
       return;
     }
-    this.activeId = convId;
+    if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'SELECT', id: convId });
 
     document.querySelectorAll('.conversation-item').forEach(item => {
       item.classList.remove('active');
@@ -622,35 +604,20 @@ class ConversationManager {
   }
 
   addConversation(conv) {
-    if (this.conversations.some(c => c.id === conv.id)) {
-      return;
-    }
-    const newConvs = [conv, ...this.conversations];
-    this._updateConversations(newConvs, 'add', { convId: conv.id });
+    if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'ADD', conversation: conv });
     this.render();
   }
 
   updateConversation(convId, updates) {
-    const idx = this.conversations.findIndex(c => c.id === convId);
-    if (idx >= 0) {
-      const updated = Object.assign({}, this.conversations[idx], updates);
-      const newConvs = [
-        ...this.conversations.slice(0, idx),
-        updated,
-        ...this.conversations.slice(idx + 1)
-      ];
-      this._updateConversations(newConvs, 'update', { convId });
-      this.render();
-    }
+    if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'UPDATE', conversation: Object.assign({ id: convId }, updates) });
+    this.render();
   }
 
   deleteConversation(convId) {
     const wasActive = this.activeId === convId;
-    const newConvs = this.conversations.filter(c => c.id !== convId);
-    this._updateConversations(newConvs, 'delete', { convId });
+    if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'DELETE', id: convId });
     if (wasActive) {
       window.ConversationState?.deleteConversation(convId, 1);
-      this.activeId = null;
       window.dispatchEvent(new CustomEvent('conversation-deselected'));
     }
     this.render();
@@ -667,16 +634,14 @@ class ConversationManager {
       } else if (msg.type === 'conversation_deleted') {
         this.deleteConversation(msg.conversationId);
       } else if (msg.type === 'all_conversations_deleted') {
-        this._updateConversations([], 'ws_clear_all');
+        if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'CLEAR_ALL' });
         window.ConversationState?.clear('all_deleted');
-        this.activeId = null;
-        this.streamingConversations.clear();
         this.showEmpty('No conversations yet');
       } else if (msg.type === 'streaming_start' && msg.conversationId) {
-        this.streamingConversations.add(msg.conversationId);
+        if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'SET_STREAMING', id: msg.conversationId });
         this.render();
       } else if ((msg.type === 'streaming_complete' || msg.type === 'streaming_error') && msg.conversationId) {
-        this.streamingConversations.delete(msg.conversationId);
+        if (window.convListMachineAPI) window.convListMachineAPI.send({ type: 'CLEAR_STREAMING', id: msg.conversationId });
         this.render();
       }
     });