agentgui 1.0.728 → 1.0.729

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();
       }
     });

package/static/js/prompt-machine.js

@@ -0,0 +1,108 @@
+(function() {
+  const { createMachine, createActor, assign } = XState;
+
+  const promptMachine = createMachine({
+    id: 'prompt-area',
+    initial: 'ready',
+    context: {
+      conversationId: null,
+      queueLength: 0,
+    },
+    states: {
+      ready: {
+        on: {
+          LOADING: 'loading',
+          STREAMING: {
+            target: 'streaming',
+            actions: assign(({ event }) => ({ conversationId: event.conversationId || null })),
+          },
+          DISABLED: 'disabled',
+        },
+      },
+      loading: {
+        on: {
+          READY: 'ready',
+          STREAMING: {
+            target: 'streaming',
+            actions: assign(({ event }) => ({ conversationId: event.conversationId || null })),
+          },
+          DISABLED: 'disabled',
+        },
+      },
+      streaming: {
+        on: {
+          QUEUED: {
+            target: 'queued',
+            actions: assign(({ event }) => ({ queueLength: event.queueLength || 1 })),
+          },
+          READY: {
+            target: 'ready',
+            actions: assign({ conversationId: null, queueLength: 0 }),
+          },
+          STREAMING: {
+            actions: assign(({ event }) => ({ conversationId: event.conversationId || null })),
+          },
+          QUEUE_UPDATE: {
+            actions: assign(({ event }) => ({ queueLength: event.queueLength || 0 })),
+          },
+        },
+      },
+      queued: {
+        on: {
+          STREAMING: {
+            target: 'streaming',
+            actions: assign(({ event }) => ({ conversationId: event.conversationId || null, queueLength: 0 })),
+          },
+          READY: {
+            target: 'ready',
+            actions: assign({ conversationId: null, queueLength: 0 }),
+          },
+          QUEUE_UPDATE: {
+            actions: assign(({ event }) => ({ queueLength: event.queueLength || 0 })),
+            guard: ({ event }) => (event.queueLength || 0) > 0,
+          },
+          QUEUE_EMPTY: {
+            target: 'ready',
+            actions: assign({ conversationId: null, queueLength: 0 }),
+          },
+        },
+      },
+      disabled: {
+        on: {
+          READY: 'ready',
+        },
+      },
+    },
+  });
+
+  const actor = createActor(promptMachine);
+  actor.start();
+
+  function sendEvent(event) {
+    actor.send(event);
+    return actor.getSnapshot();
+  }
+
+  function getState() {
+    return actor.getSnapshot().value;
+  }
+
+  function isReady() {
+    return getState() === 'ready';
+  }
+
+  function isStreaming() {
+    return getState() === 'streaming';
+  }
+
+  function isDisabled() {
+    return getState() === 'disabled';
+  }
+
+  function subscribe(fn) {
+    return actor.subscribe(fn);
+  }
+
+  window.__promptMachine = actor;
+  window.promptMachineAPI = { send: sendEvent, getState, isReady, isStreaming, isDisabled, subscribe };
+})();

package/static/js/tool-install-machine.js

@@ -0,0 +1,155 @@
+(function() {
+  const { createMachine, createActor, assign } = XState;
+
+  const toolInstallMachine = createMachine({
+    id: 'tool-install-ui',
+    initial: 'idle',
+    context: {
+      version: null,
+      error: null,
+      progress: 0,
+      installedVersion: null,
+      publishedVersion: null,
+    },
+    states: {
+      idle: {
+        entry: assign({ error: null, progress: 0 }),
+        on: {
+          INSTALL: 'installing',
+          UPDATE: 'updating',
+          SET_INSTALLED: {
+            target: 'installed',
+            actions: assign(({ event }) => ({
+              installedVersion: event.installedVersion || null,
+              publishedVersion: event.publishedVersion || null,
+              version: event.version || event.installedVersion || null,
+            })),
+          },
+          SET_NEEDS_UPDATE: {
+            target: 'needs_update',
+            actions: assign(({ event }) => ({
+              installedVersion: event.installedVersion || null,
+              publishedVersion: event.publishedVersion || null,
+            })),
+          },
+          SET_FAILED: {
+            target: 'failed',
+            actions: assign(({ event }) => ({ error: event.error || null })),
+          },
+        },
+      },
+      installing: {
+        entry: assign({ error: null, progress: 0 }),
+        on: {
+          PROGRESS: {
+            actions: assign(({ context, event }) => ({
+              progress: Math.min(event.progress || context.progress + 5, 90),
+            })),
+          },
+          COMPLETE: {
+            target: 'installed',
+            actions: assign(({ event }) => ({
+              version: event.version || null,
+              installedVersion: event.installedVersion || null,
+              publishedVersion: event.publishedVersion || null,
+              progress: 100,
+              error: null,
+            })),
+          },
+          FAILED: {
+            target: 'failed',
+            actions: assign(({ event }) => ({ error: event.error || null, progress: 0 })),
+          },
+        },
+      },
+      installed: {
+        on: {
+          UPDATE: 'updating',
+          SET_NEEDS_UPDATE: {
+            target: 'needs_update',
+            actions: assign(({ event }) => ({
+              installedVersion: event.installedVersion || null,
+              publishedVersion: event.publishedVersion || null,
+            })),
+          },
+        },
+      },
+      updating: {
+        entry: assign({ error: null, progress: 0 }),
+        on: {
+          PROGRESS: {
+            actions: assign(({ context, event }) => ({
+              progress: Math.min(event.progress || context.progress + 5, 90),
+            })),
+          },
+          COMPLETE: {
+            target: 'installed',
+            actions: assign(({ event }) => ({
+              version: event.version || null,
+              installedVersion: event.installedVersion || null,
+              publishedVersion: event.publishedVersion || null,
+              progress: 100,
+              error: null,
+            })),
+          },
+          FAILED: {
+            target: 'failed',
+            actions: assign(({ event }) => ({ error: event.error || null, progress: 0 })),
+          },
+        },
+      },
+      needs_update: {
+        on: {
+          UPDATE: 'updating',
+          SET_INSTALLED: {
+            target: 'installed',
+            actions: assign(({ event }) => ({
+              installedVersion: event.installedVersion || null,
+              publishedVersion: event.publishedVersion || null,
+            })),
+          },
+        },
+      },
+      failed: {
+        on: {
+          INSTALL: 'installing',
+          UPDATE: 'updating',
+        },
+      },
+    },
+  });
+
+  const toolInstallMachines = new Map();
+
+  function getOrCreate(toolId) {
+    if (toolInstallMachines.has(toolId)) return toolInstallMachines.get(toolId);
+    const actor = createActor(toolInstallMachine);
+    actor.start();
+    toolInstallMachines.set(toolId, actor);
+    return actor;
+  }
+
+  function sendEvent(toolId, event) {
+    const actor = getOrCreate(toolId);
+    actor.send(event);
+    return actor.getSnapshot();
+  }
+
+  function getState(toolId) {
+    const actor = toolInstallMachines.get(toolId);
+    return actor ? actor.getSnapshot().value : 'idle';
+  }
+
+  function isLocked(toolId) {
+    const s = getState(toolId);
+    return s === 'installing' || s === 'updating';
+  }
+
+  function remove(toolId) {
+    const actor = toolInstallMachines.get(toolId);
+    if (actor) { actor.stop(); toolInstallMachines.delete(toolId); }
+  }
+
+  window.__toolInstallMachines = toolInstallMachines;
+  window.toolInstallMachineAPI = { getOrCreate, send: sendEvent, getState, isLocked, remove };
+})();