agentgui 1.0.140 → 1.0.142

package/package.json

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

package/server.js

@@ -40,6 +40,24 @@ const expressApp = express();
 // Separate Express app for webtalk (STT/TTS) - isolated to contain COEP/COOP headers
 const webtalkApp = express();
 const webtalkInstance = webtalk(webtalkApp, { path: '/webtalk' });
+
+const webtalkSdkDir = path.dirname(require.resolve('webtalk'));
+const WASM_MIN_BYTES = 1000000;
+const webtalkCriticalFiles = [
+  { path: path.join(webtalkSdkDir, 'assets', 'ort-wasm-simd-threaded.jsep.wasm'), minBytes: WASM_MIN_BYTES }
+];
+for (const file of webtalkCriticalFiles) {
+  try {
+    if (fs.existsSync(file.path)) {
+      const stat = fs.statSync(file.path);
+      if (stat.size < file.minBytes) {
+        debugLog(`Removing corrupt file ${path.basename(file.path)} (${stat.size} bytes, need ${file.minBytes}+)`);
+        fs.unlinkSync(file.path);
+      }
+    }
+  } catch (e) { debugLog(`File check error: ${e.message}`); }
+}
+
 webtalkInstance.init().catch(err => debugLog('Webtalk init: ' + err.message));
 
 // File upload endpoint - copies dropped files to conversation workingDirectory
@@ -164,7 +182,7 @@ const server = http.createServer(async (req, res) => {
     pathOnly.startsWith('/tts/') ||
     pathOnly.startsWith('/models/');
   if (isWebtalkRoute) {
-    const webtalkSdkDir = path.dirname(require.resolve('webtalk/package.json'));
+    const webtalkSdkDir = path.dirname(require.resolve('webtalk'));
     const sdkFiles = { '/demo': 'app.html', '/sdk.js': 'sdk.js', '/stt.js': 'stt.js', '/tts.js': 'tts.js', '/tts-utils.js': 'tts-utils.js' };
     let stripped = pathOnly.startsWith(webtalkPrefix) ? pathOnly.slice(webtalkPrefix.length) : (pathOnly.startsWith('/webtalk') ? pathOnly.slice('/webtalk'.length) : null);
     if (stripped !== null && !sdkFiles[stripped] && !stripped.endsWith('.js') && sdkFiles[stripped + '.js']) stripped += '.js';
@@ -193,6 +211,10 @@ const server = http.createServer(async (req, res) => {
       });
     }
     if (req.url.startsWith(BASE_URL)) req.url = req.url.slice(BASE_URL.length) || '/';
+    const isModelOrAsset = pathOnly.includes('/models/') || pathOnly.includes('/assets/') || pathOnly.endsWith('.wasm') || pathOnly.endsWith('.onnx');
+    if (isModelOrAsset) {
+      res.setHeader('Cache-Control', 'public, max-age=604800, immutable');
+    }
     const origSetHeader = res.setHeader.bind(res);
     res.setHeader = (name, value) => {
       if (name.toLowerCase() === 'cross-origin-embedder-policy') return;
@@ -569,46 +591,50 @@ const server = http.createServer(async (req, res) => {
   }
 });
 
+const MIME_TYPES = { '.html': 'text/html; charset=utf-8', '.js': 'application/javascript; charset=utf-8', '.css': 'text/css; charset=utf-8', '.json': 'application/json', '.png': 'image/png', '.jpg': 'image/jpeg', '.svg': 'image/svg+xml', '.wasm': 'application/wasm', '.onnx': 'application/octet-stream' };
+
 function serveFile(filePath, res) {
   const ext = path.extname(filePath).toLowerCase();
-  const mimeTypes = { '.html': 'text/html; charset=utf-8', '.js': 'application/javascript; charset=utf-8', '.css': 'text/css; charset=utf-8', '.json': 'application/json', '.png': 'image/png', '.jpg': 'image/jpeg', '.svg': 'image/svg+xml' };
+  const contentType = MIME_TYPES[ext] || 'application/octet-stream';
+
+  if (ext !== '.html') {
+    fs.stat(filePath, (err, stats) => {
+      if (err) { res.writeHead(500); res.end('Server error'); return; }
+      res.writeHead(200, {
+        'Content-Type': contentType,
+        'Content-Length': stats.size,
+        'Cache-Control': 'public, max-age=3600'
+      });
+      fs.createReadStream(filePath).pipe(res);
+    });
+    return;
+  }
+
   fs.readFile(filePath, (err, data) => {
     if (err) { res.writeHead(500); res.end('Server error'); return; }
     let content = data.toString();
-    if (ext === '.html') {
-      const baseTag = `<script>window.__BASE_URL='${BASE_URL}';</script>\n  <script type="importmap">{"imports":{"webtalk-sdk":"${BASE_URL}/webtalk/sdk.js"}}</script>`;
-      content = content.replace('<head>', '<head>\n  ' + baseTag);
-      if (watch) {
-        content += `\n<script>(function(){const ws=new WebSocket('ws://'+location.host+'${BASE_URL}/hot-reload');ws.onmessage=e=>{if(JSON.parse(e.data).type==='reload')location.reload()};})();</script>`;
-      }
+    const baseTag = `<script>window.__BASE_URL='${BASE_URL}';</script>\n  <script type="importmap">{"imports":{"webtalk-sdk":"${BASE_URL}/webtalk/sdk.js"}}</script>`;
+    content = content.replace('<head>', '<head>\n  ' + baseTag);
+    if (watch) {
+      content += `\n<script>(function(){const ws=new WebSocket('ws://'+location.host+'${BASE_URL}/hot-reload');ws.onmessage=e=>{if(JSON.parse(e.data).type==='reload')location.reload()};})();</script>`;
     }
-    res.writeHead(200, { 'Content-Type': mimeTypes[ext] || 'application/octet-stream' });
+    res.writeHead(200, { 'Content-Type': contentType });
     res.end(content);
   });
 }
 
 function persistChunkWithRetry(sessionId, conversationId, sequence, blockType, blockData, maxRetries = 3) {
-  let lastError = null;
-  const backoffs = [100, 200, 400];
-
   for (let attempt = 0; attempt < maxRetries; attempt++) {
     try {
-      const chunk = queries.createChunk(sessionId, conversationId, sequence, blockType, blockData);
-      return chunk;
+      return queries.createChunk(sessionId, conversationId, sequence, blockType, blockData);
     } catch (err) {
-      lastError = err;
       debugLog(`[chunk] Persist attempt ${attempt + 1}/${maxRetries} failed: ${err.message}`);
-      if (attempt < maxRetries - 1) {
-        const delayMs = backoffs[attempt] || 400;
-        const endTime = Date.now() + delayMs;
-        while (Date.now() < endTime) {
-          // Synchronous sleep for backoff
-        }
+      if (attempt >= maxRetries - 1) {
+        debugLog(`[chunk] Failed to persist after ${maxRetries} retries: ${err.message}`);
+        return null;
       }
     }
   }
-
-  debugLog(`[chunk] Failed to persist after ${maxRetries} retries: ${lastError?.message}`);
   return null;
 }
 
@@ -941,23 +967,22 @@ wss.on('connection', (ws, req) => {
   }
 });
 
+const BROADCAST_TYPES = new Set([
+  'message_created', 'conversation_created', 'conversations_updated',
+  'conversation_deleted', 'queue_status', 'streaming_start',
+  'streaming_complete', 'streaming_error'
+]);
+
 function broadcastSync(event) {
+  if (syncClients.size === 0) return;
   const data = JSON.stringify(event);
+  const isBroadcast = BROADCAST_TYPES.has(event.type);
 
   for (const ws of syncClients) {
     if (ws.readyState !== 1) continue;
-
-    let shouldSend = false;
-
-    if (event.sessionId && ws.subscriptions?.has(event.sessionId)) {
-      shouldSend = true;
-    } else if (event.conversationId && ws.subscriptions?.has(`conv-${event.conversationId}`)) {
-      shouldSend = true;
-    } else if (event.type === 'message_created' || event.type === 'conversation_created' || event.type === 'conversations_updated' || event.type === 'conversation_deleted' || event.type === 'queue_status' || event.type === 'streaming_start' || event.type === 'streaming_complete' || event.type === 'streaming_error') {
-      shouldSend = true;
-    }
-
-    if (shouldSend) {
+    if (isBroadcast ||
+        (event.sessionId && ws.subscriptions?.has(event.sessionId)) ||
+        (event.conversationId && ws.subscriptions?.has(`conv-${event.conversationId}`))) {
       ws.send(data);
     }
   }

package/static/js/client.js

@@ -348,7 +348,7 @@ class AgentGUIClient {
 
       switch (data.type) {
         case 'streaming_start':
-          this.handleStreamingStart(data);
+          this.handleStreamingStart(data).catch(e => console.error('handleStreamingStart error:', e));
           break;
         case 'streaming_progress':
           this.handleStreamingProgress(data);
@@ -388,7 +388,7 @@ class AgentGUIClient {
     }
   }
 
-  handleStreamingStart(data) {
+  async handleStreamingStart(data) {
     console.log('Streaming started:', data);
 
     // If this streaming event is for a different conversation than what we are viewing,
@@ -420,8 +420,60 @@ class AgentGUIClient {
     if (outputEl) {
       let messagesEl = outputEl.querySelector('.conversation-messages');
       if (!messagesEl) {
-        outputEl.innerHTML = '<div class="conversation-messages"></div>';
+        // Load existing conversation history before starting the stream
+        const conv = this.state.currentConversation;
+        const wdInfo = conv?.workingDirectory ? ` - ${this.escapeHtml(conv.workingDirectory)}` : '';
+        outputEl.innerHTML = `
+          <div class="conversation-header">
+            <h2>${this.escapeHtml(conv?.title || 'Conversation')}</h2>
+            <p class="text-secondary">${conv?.agentType || 'unknown'} - ${new Date(conv?.created_at || Date.now()).toLocaleDateString()}${wdInfo}</p>
+          </div>
+          <div class="conversation-messages"></div>
+        `;
         messagesEl = outputEl.querySelector('.conversation-messages');
+        // Load prior messages into the container
+        try {
+          const msgResp = await fetch(window.__BASE_URL + `/api/conversations/${data.conversationId}/messages`);
+          if (msgResp.ok) {
+            const msgData = await msgResp.json();
+            const priorChunks = await this.fetchChunks(data.conversationId, 0);
+            if (priorChunks.length > 0) {
+              const userMsgs = (msgData.messages || []).filter(m => m.role === 'user');
+              const sessionOrder = [];
+              const sessionGroups = {};
+              priorChunks.forEach(c => {
+                if (!sessionGroups[c.sessionId]) { sessionGroups[c.sessionId] = []; sessionOrder.push(c.sessionId); }
+                sessionGroups[c.sessionId].push(c);
+              });
+              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++];
+                  messagesEl.insertAdjacentHTML('beforeend', `<div class="message message-user" data-msg-id="${m.id}"><div class="message-role">User</div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div></div>`);
+                }
+                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');
+                sList.forEach(chunk => { if (chunk.block?.type) { const el = this.renderer.renderBlock(chunk.block, chunk); if (el) bEl.appendChild(el); } });
+                const ts = document.createElement('div'); ts.className = 'message-timestamp'; ts.textContent = new Date(sList[sList.length - 1].created_at).toLocaleString();
+                mDiv.appendChild(ts);
+                messagesEl.appendChild(mDiv);
+              });
+              while (ui < userMsgs.length) {
+                const m = userMsgs[ui++];
+                messagesEl.insertAdjacentHTML('beforeend', `<div class="message message-user" data-msg-id="${m.id}"><div class="message-role">User</div>${this.renderMessageContent(m.content)}<div class="message-timestamp">${new Date(m.created_at).toLocaleString()}</div></div>`);
+              }
+            } else {
+              messagesEl.innerHTML = this.renderMessages(msgData.messages || []);
+            }
+          }
+        } catch (e) {
+          console.warn('Failed to load prior messages for streaming view:', e);
+        }
       }
       const streamingDiv = document.createElement('div');
       streamingDiv.className = 'message message-assistant streaming-message';
@@ -886,40 +938,29 @@ class AgentGUIClient {
     if (!conversationId) return;
 
     const pollState = this.chunkPollState;
-    if (pollState.isPolling) return; // Already polling
+    if (pollState.isPolling) return;
 
     pollState.isPolling = true;
     pollState.lastFetchTimestamp = Date.now();
-    pollState.backoffDelay = 100;
-
-    console.log('Starting chunk polling for conversation:', conversationId);
+    pollState.backoffDelay = 150;
+    pollState.sessionCheckCounter = 0;
 
     const pollOnce = async () => {
       if (!pollState.isPolling) return;
 
       try {
-        // Check session status periodically
-        if (this.state.currentSession?.id) {
+        pollState.sessionCheckCounter++;
+        if (pollState.sessionCheckCounter % 10 === 0 && this.state.currentSession?.id) {
           const sessionResponse = await fetch(`${window.__BASE_URL}/api/sessions/${this.state.currentSession.id}`);
           if (sessionResponse.ok) {
             const { session } = await sessionResponse.json();
             if (session && (session.status === 'complete' || session.status === 'error')) {
-              // Session has finished, trigger appropriate handler
               if (session.status === 'complete') {
-                this.handleStreamingComplete({
-                  sessionId: session.id,
-                  conversationId: conversationId,
-                  timestamp: Date.now()
-                });
+                this.handleStreamingComplete({ sessionId: session.id, conversationId, timestamp: Date.now() });
               } else {
-                this.handleStreamingError({
-                  sessionId: session.id,
-                  conversationId: conversationId,
-                  error: session.error || 'Unknown error',
-                  timestamp: Date.now()
-                });
+                this.handleStreamingError({ sessionId: session.id, conversationId, error: session.error || 'Unknown error', timestamp: Date.now() });
               }
-              return; // Stop polling
+              return;
             }
           }
         }
@@ -927,42 +968,28 @@ class AgentGUIClient {
         const chunks = await this.fetchChunks(conversationId, pollState.lastFetchTimestamp);
 
         if (chunks.length > 0) {
-          // Reset backoff on success
-          pollState.backoffDelay = 100;
-
-          // Update last fetch timestamp
+          pollState.backoffDelay = 150;
           const lastChunk = chunks[chunks.length - 1];
           pollState.lastFetchTimestamp = lastChunk.created_at;
-
-          // Render new chunks
           chunks.forEach(chunk => {
-            if (chunk.block && chunk.block.type) {
-              this.renderChunk(chunk);
-            }
+            if (chunk.block && chunk.block.type) this.renderChunk(chunk);
           });
+        } else {
+          pollState.backoffDelay = Math.min(pollState.backoffDelay + 50, 500);
         }
 
-        // Schedule next poll
         if (pollState.isPolling) {
-          pollState.pollTimer = setTimeout(pollOnce, 100);
+          pollState.pollTimer = setTimeout(pollOnce, pollState.backoffDelay);
         }
       } catch (error) {
-        console.warn('Chunk poll error, applying backoff:', error.message);
-
-        // Apply exponential backoff
-        pollState.backoffDelay = Math.min(
-          pollState.backoffDelay * 2,
-          pollState.maxBackoffDelay
-        );
-
-        // Schedule next poll with backoff
+        console.warn('Chunk poll error:', error.message);
+        pollState.backoffDelay = Math.min(pollState.backoffDelay * 2, pollState.maxBackoffDelay);
         if (pollState.isPolling) {
           pollState.pollTimer = setTimeout(pollOnce, pollState.backoffDelay);
         }
       }
     };
 
-    // Start polling loop
     pollOnce();
   }
 
@@ -1181,17 +1208,48 @@ class AgentGUIClient {
           // Render all chunks
           const messagesEl = outputEl.querySelector('.conversation-messages');
           if (chunks.length > 0) {
-            // Group chunks by session
+            // Fetch user messages to interleave with session chunks
+            let userMessages = [];
+            try {
+              const msgResp = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/messages`);
+              if (msgResp.ok) {
+                const msgData = await msgResp.json();
+                userMessages = (msgData.messages || []).filter(m => m.role === 'user');
+              }
+            } catch (_) {}
+
+            // Group chunks by session, preserving order
+            const sessionOrder = [];
             const sessionChunks = {};
             chunks.forEach(chunk => {
               if (!sessionChunks[chunk.sessionId]) {
                 sessionChunks[chunk.sessionId] = [];
+                sessionOrder.push(chunk.sessionId);
               }
               sessionChunks[chunk.sessionId].push(chunk);
             });
 
-            // Render each session's chunks
-            Object.entries(sessionChunks).forEach(([sessionId, sessionChunkList]) => {
+            // Build a timeline: match user messages to sessions by timestamp
+            let userMsgIdx = 0;
+            sessionOrder.forEach((sessionId) => {
+              const sessionChunkList = sessionChunks[sessionId];
+              const sessionStart = sessionChunkList[0].created_at;
+
+              // Render user messages that came before this session
+              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>
+                `;
+                messagesEl.appendChild(userDiv);
+                userMsgIdx++;
+              }
+
               const isCurrentActiveSession = shouldResumeStreaming && latestSession && latestSession.id === sessionId;
               const messageDiv = document.createElement('div');
               messageDiv.className = `message message-assistant${isCurrentActiveSession ? ' streaming-message' : ''}`;
@@ -1208,7 +1266,6 @@ class AgentGUIClient {
                 }
               });
 
-              // Add streaming indicator for active session
               if (isCurrentActiveSession) {
                 const indicatorDiv = document.createElement('div');
                 indicatorDiv.className = 'streaming-indicator';
@@ -1227,6 +1284,21 @@ class AgentGUIClient {
 
               messagesEl.appendChild(messageDiv);
             });
+
+            // Render any remaining user messages after the last session
+            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>
+              `;
+              messagesEl.appendChild(userDiv);
+              userMsgIdx++;
+            }
           } else {
             // Fall back to messages if no chunks
             const messagesResponse = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/messages`);

package/static/js/voice.js

@@ -127,32 +127,40 @@
     }
   }
 
-  async function initTTS() {
-    try {
-      tts = new TTS({
-        basePath: BASE + '/webtalk',
-        apiBasePath: BASE,
-        onStatus: function() {},
-        onAudioReady: function(url) {
-          var audio = new Audio(url);
-          audio.onended = function() {
-            isSpeaking = false;
-            processQueue();
-          };
-          audio.onerror = function() {
-            isSpeaking = false;
-            processQueue();
-          };
-          audio.play().catch(function() {
-            isSpeaking = false;
-            processQueue();
-          });
+  async function initTTS(retries) {
+    var maxRetries = retries || 3;
+    for (var attempt = 0; attempt < maxRetries; attempt++) {
+      try {
+        tts = new TTS({
+          basePath: BASE + '/webtalk',
+          apiBasePath: BASE,
+          onStatus: function() {},
+          onAudioReady: function(url) {
+            var audio = new Audio(url);
+            audio.onended = function() {
+              isSpeaking = false;
+              processQueue();
+            };
+            audio.onerror = function() {
+              isSpeaking = false;
+              processQueue();
+            };
+            audio.play().catch(function() {
+              isSpeaking = false;
+              processQueue();
+            });
+          }
+        });
+        await tts.init();
+        ttsReady = true;
+        return;
+      } catch (e) {
+        console.warn('TTS init attempt ' + (attempt + 1) + '/' + maxRetries + ' failed:', e.message);
+        tts = null;
+        if (attempt < maxRetries - 1) {
+          await new Promise(function(r) { setTimeout(r, 3000 * (attempt + 1)); });
         }
-      });
-      await tts.init();
-      ttsReady = true;
-    } catch (e) {
-      console.warn('TTS init failed:', e.message);
+      }
     }
   }