agentgui 1.0.797 → 1.0.799

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.797",
+  "version": "1.0.799",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/static/index.html

@@ -290,6 +290,8 @@
   <script defer src="/gm/js/voice-machine.js"></script>
   <script defer src="/gm/js/conv-list-machine.js"></script>
   <script defer src="/gm/js/prompt-machine.js"></script>
+  <script defer src="/gm/js/recording-machine.js"></script>
+  <script defer src="/gm/js/terminal-machine.js"></script>
   <script defer src="/gm/js/conversations.js"></script>
   <script defer src="/gm/lib/msgpackr.min.js"></script>
   <script defer src="/gm/js/websocket-manager.js"></script>

package/static/js/client.js

@@ -2173,16 +2173,17 @@ class AgentGUIClient {
       blockFrag.appendChild(el);
     }
     blocksEl.appendChild(blockFrag);
+    // Build tool-use element index once for O(1) lookups instead of O(n) querySelectorAll per chunk
+    const toolUseIndex = new Map();
+    blocksEl.querySelectorAll('.block-tool-use[data-tool-use-id]').forEach(el => toolUseIndex.set(el.dataset.toolUseId, el));
     for (const chunk of deferred) {
       const b = chunk.block;
       if (b.type === 'tool_result') {
-        const tid = b.tool_use_id;
-        const toolUseEl = (tid ? blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`) : null)
+        const toolUseEl = (b.tool_use_id && toolUseIndex.get(b.tool_use_id))
           || (blocksEl.lastElementChild?.classList.contains('block-tool-use') ? blocksEl.lastElementChild : null);
         if (toolUseEl) this.renderer.mergeResultIntoToolUse(toolUseEl, b);
       } else if (b.type === 'tool_status') {
-        const tid = b.tool_use_id;
-        const toolUseEl = tid && blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${tid}"]`);
+        const toolUseEl = b.tool_use_id && toolUseIndex.get(b.tool_use_id);
         if (toolUseEl) {
           const isError = b.status === 'failed';
           const isDone = b.status === 'completed';
@@ -2845,10 +2846,9 @@ class AgentGUIClient {
       if (cached && (Date.now() - cached.timestamp) < 300000) {
         const outputEl = document.getElementById('output');
         if (outputEl) {
-          outputEl.innerHTML = '';
-          while (cached.dom.firstChild) {
-            outputEl.appendChild(cached.dom.firstChild);
-          }
+          const children = [];
+          while (cached.dom.firstChild) children.push(cached.dom.firstChild);
+          outputEl.replaceChildren(...children);
           window.ConversationState?.selectConversation(conversationId, 'dom_cache_load', 1);
           this.state.currentConversation = cached.conversation;
           window.dispatchEvent(new CustomEvent('conversation-changed', { detail: { conversationId, conversation: cached.conversation } }));
@@ -2921,23 +2921,15 @@ class AgentGUIClient {
       const hasActivity = (allMessages && allMessages.length > 0) || isActivelyStreaming || latestSession || this._convIsStreaming(conversationId);
       this.applyAgentAndModelSelection(conversation, hasActivity);
 
+      // Parse chunk data and fetch queue in parallel
+      const queuePromise = window.wsClient.rpc('q.ls', { id: conversationId }).catch(() => ({ queue: [] }));
       const chunks = (rawChunks || []).map(chunk => ({
         ...chunk,
         block: typeof chunk.data === 'string' ? JSON.parse(chunk.data) : chunk.data
       }));
 
-      // Fetch queue to exclude queued messages from being rendered as regular user messages
-      let queuedMessageIds = new Set();
-      try {
-        const { queue } = await window.wsClient.rpc('q.ls', { id: conversationId });
-        if (queue && queue.length > 0) {
-          queuedMessageIds = new Set(queue.map(q => q.messageId));
-        }
-      } catch (e) {
-        console.warn('Failed to fetch queue:', e.message);
-      }
-
-      // Filter out queued messages from user messages - they'll be rendered in queue indicator instead
+      const { queue: queueResult } = await queuePromise;
+      const queuedMessageIds = new Set((queueResult || []).map(q => q.messageId));
       const userMessages = (allMessages || []).filter(m => m.role === 'user' && !queuedMessageIds.has(m.id));
       const hasMoreChunks = totalChunks && chunks.length < totalChunks;
 

package/static/js/recording-machine.js

@@ -0,0 +1,49 @@
+(function() {
+  const { createMachine, createActor, assign } = XState;
+
+  const recordingMachine = createMachine({
+    id: 'recording',
+    initial: 'idle',
+    context: {
+      error: null,
+    },
+    states: {
+      idle: {
+        entry: assign({ error: null }),
+        on: {
+          START: { target: 'recording' },
+        },
+      },
+      recording: {
+        on: {
+          STOP: { target: 'processing' },
+          ERROR: {
+            target: 'idle',
+            actions: assign(({ event }) => ({ error: event.error || 'Recording failed' })),
+          },
+        },
+      },
+      processing: {
+        on: {
+          COMPLETE: { target: 'idle' },
+          ERROR: {
+            target: 'idle',
+            actions: assign(({ event }) => ({ error: event.error || 'Processing failed' })),
+          },
+        },
+      },
+    },
+  });
+
+  const actor = createActor(recordingMachine);
+  actor.start();
+
+  window.recordingMachineAPI = {
+    send: function(event) { actor.send(event); },
+    getState: function() { return actor.getSnapshot().value; },
+    isRecording: function() { return actor.getSnapshot().value === 'recording'; },
+    isProcessing: function() { return actor.getSnapshot().value === 'processing'; },
+    subscribe: function(fn) { return actor.subscribe(fn); },
+  };
+  window.__recordingMachine = actor;
+})();

package/static/js/stt-handler.js

@@ -7,11 +7,13 @@
   var recordedChunks = [];
   var TARGET_SAMPLE_RATE = 16000;
 
+  function rmApi() { return window.recordingMachineAPI; }
+
   window.STTHandler = {
-    isRecording: function() { return isRecording; },
+    isRecording: function() { return rmApi()?.isRecording() || isRecording; },
 
     startRecording: async function() {
-      if (isRecording) return;
+      if (isRecording || rmApi()?.isRecording()) return;
       try {
         mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
         audioContext = new (window.AudioContext || window.webkitAudioContext)();
@@ -24,16 +26,19 @@
         };
         source.connect(workletNode);
         isRecording = true;
+        if (rmApi()) rmApi().send({ type: 'START' });
         return { success: true };
       } catch (e) {
         isRecording = false;
+        if (rmApi()) rmApi().send({ type: 'ERROR', error: e.message });
         return { success: false, error: e.message };
       }
     },
 
     stopRecording: async function() {
-      if (!isRecording) return { success: false, error: 'Not recording' };
+      if (!isRecording && !rmApi()?.isRecording()) return { success: false, error: 'Not recording' };
       isRecording = false;
+      if (rmApi()) rmApi().send({ type: 'STOP' });
 
       if (workletNode) {
         workletNode.port.postMessage('stop');
@@ -77,13 +82,17 @@
         });
         var data = await resp.json();
         if (data.text) {
+          if (rmApi()) rmApi().send({ type: 'COMPLETE' });
           return { success: true, text: data.text };
         } else if (data.error) {
+          if (rmApi()) rmApi().send({ type: 'ERROR', error: data.error });
           return { success: false, error: data.error };
         } else {
+          if (rmApi()) rmApi().send({ type: 'ERROR', error: 'No transcription returned' });
           return { success: false, error: 'No transcription returned' };
         }
       } catch (e) {
+        if (rmApi()) rmApi().send({ type: 'ERROR', error: e.message });
         return { success: false, error: 'Transcription failed: ' + e.message };
       }
     }

package/static/js/terminal-machine.js

@@ -0,0 +1,51 @@
+(function() {
+  const { createMachine, createActor, assign } = XState;
+
+  const terminalMachine = createMachine({
+    id: 'terminal',
+    initial: 'inactive',
+    context: {
+      cwd: null,
+    },
+    states: {
+      inactive: {
+        on: {
+          START: { target: 'initializing' },
+        },
+      },
+      initializing: {
+        on: {
+          READY: { target: 'active' },
+          ERROR: { target: 'inactive' },
+        },
+      },
+      active: {
+        on: {
+          STOP: { target: 'inactive' },
+          SESSION_EXIT: { target: 'restarting' },
+          SET_CWD: {
+            actions: assign(({ event }) => ({ cwd: event.cwd })),
+          },
+        },
+      },
+      restarting: {
+        on: {
+          READY: { target: 'active' },
+          ERROR: { target: 'inactive' },
+          STOP: { target: 'inactive' },
+        },
+      },
+    },
+  });
+
+  const actor = createActor(terminalMachine);
+  actor.start();
+
+  window.terminalMachineAPI = {
+    send: function(event) { actor.send(event); },
+    getState: function() { return actor.getSnapshot().value; },
+    isActive: function() { var s = actor.getSnapshot().value; return s === 'active' || s === 'restarting'; },
+    subscribe: function(fn) { return actor.subscribe(fn); },
+  };
+  window.__terminalMachine = actor;
+})();

package/static/js/terminal.js

@@ -101,10 +101,14 @@
     var cwd = getCwd();
     var dims = term ? { cols: term.cols, rows: term.rows } : { cols: 80, rows: 24 };
     wsSend({ type: 'terminal_start', cwd: cwd, cols: dims.cols, rows: dims.rows });
+    if (tmApi()) tmApi().send({ type: 'READY' });
     setTimeout(function() { if (term && term.focus) term.focus(); }, 100);
   }
 
+  function tmApi() { return window.terminalMachineAPI; }
+
   function startTerminal() {
+    if (tmApi()) tmApi().send({ type: 'START' });
     if (!ensureTerm()) {
       setTimeout(startTerminal, 200);
       return;
@@ -124,6 +128,7 @@
 
   function stopTerminal() {
     termActive = false;
+    if (tmApi()) tmApi().send({ type: 'STOP' });
     if (_wsListener && window.wsManager) { window.wsManager.off('message', _wsListener); _wsListener = null; }
     wsSend({ type: 'terminal_stop' });
   }