agentgui 1.0.28 → 1.0.30

package/static/app.js

@@ -135,12 +135,43 @@ class GMGUIApp {
   }
 
   startPeriodicSync() {
-    // Rapid sync every 10 seconds: check for new Claude Code conversations and sync
+    // GUARANTEED CONSISTENCY MECHANISM
+    // Primary: WebSocket events (real-time, instant)
+    // Fallback: Consistency check every 3 seconds
+    // If any mismatch detected, full refresh immediately
+    
+    // Server auto-import runs every 30 seconds (discovers new Claude Code conversations)
     setInterval(() => {
-      this.autoImportClaudeCode().then(() => {
-        this.fetchConversations().then(() => this.renderChatHistory());
-      });
-    }, 10000);
+      this.autoImportClaudeCode();
+    }, 30000);
+    
+    // Consistency monitor: Verify local state matches server
+    // This catches any desync issues and fixes them within 3 seconds
+    setInterval(() => {
+      this.verifyConsistency();
+    }, 3000);
+  }
+
+  async verifyConsistency() {
+    // Silent consistency check - only log if mismatch found
+    try {
+      const res = await fetch(BASE_URL + '/api/conversations');
+      if (!res.ok) return;
+      
+      const data = await res.json();
+      const serverCount = data.conversations?.length || 0;
+      const localCount = this.conversations.size;
+      
+      if (serverCount !== localCount) {
+        console.warn(`[CONSISTENCY MISMATCH] Server has ${serverCount} conversations, local has ${localCount}`);
+        console.warn('[CONSISTENCY] Forcing full refresh to restore sync');
+        await this.fetchConversations();
+        this.renderChatHistory();
+        console.log('[CONSISTENCY] State restored to match server');
+      }
+    } catch (e) {
+      // Silent error - don't spam logs
+    }
   }
 
   async autoImportClaudeCode() {
@@ -157,27 +188,47 @@ class GMGUIApp {
       `${proto}//${location.host}${BASE_URL}/sync`
     );
 
+    this.wsDisconnectTime = null;
+
     this.syncWs.on('open', () => {
-      console.log('Sync WebSocket connected');
+      console.log('[SYNC] WebSocket connected - guaranteed consistency active');
       this.updateConnectionStatus('connected');
+      this.wsDisconnectTime = null;
+      
+      // Force full sync when reconnecting to ensure consistency
+      this.fetchConversations().then(() => this.renderChatHistory());
     });
 
     this.syncWs.on('message', (e) => {
       try {
         const event = JSON.parse(e.data);
+        console.log('[SYNC] Event:', event.type);
         this.handleSyncEvent(event, false);
       } catch (err) {
-        console.error('Sync message parse error:', err);
+        console.error('[SYNC ERROR] Parse error:', err);
       }
     });
 
     this.syncWs.on('close', () => {
-      console.log('Sync WebSocket disconnected, will auto-reconnect...');
+      console.log('[SYNC] WebSocket disconnected - reconnecting...');
       this.updateConnectionStatus('reconnecting');
+      this.wsDisconnectTime = Date.now();
+      
+      // CRITICAL: Force full refresh if disconnected for more than 2 seconds
+      // This ensures we NEVER have inconsistent state for more than a few seconds
+      setTimeout(() => {
+        if (this.wsDisconnectTime && Date.now() - this.wsDisconnectTime > 2000) {
+          console.log('[SYNC CRITICAL] Lost WebSocket > 2s, forcing full data refresh NOW');
+          this.fetchConversations().then(() => {
+            this.renderChatHistory();
+            console.log('[SYNC] Full refresh completed - guaranteed consistency restored');
+          });
+        }
+      }, 2000);
     });
 
     this.syncWs.on('error', (err) => {
-      console.error('Sync WebSocket error:', err);
+      console.error('[SYNC ERROR]', err);
       this.updateConnectionStatus('disconnected');
     });
   }
@@ -196,67 +247,93 @@ class GMGUIApp {
   }
 
   handleSyncEvent(event, fromBroadcast = false) {
+    // CRITICAL: Server is the authoritative source of truth
+    // On ANY event, fetch fresh state from server to ensure consistency
+    // Never rely on event data alone - always verify with server
+    
+    console.log('[STATE SYNC] Event received:', event.type);
+    
     switch (event.type) {
       case 'sync_connected':
+        console.log('[STATE SYNC] Connected to sync bus - fetching full state');
+        // On connection, always do a full state refresh
+        this.fetchConversations().then(() => this.renderChatHistory());
         break;
 
       case 'conversation_created':
-        this.conversations.set(event.conversation.id, event.conversation);
-        this.renderChatHistory();
+        console.log('[STATE SYNC] Conversation created, fetching full state');
+        // Never trust just the event data - fetch authoritative state
+        this.fetchConversations().then(() => this.renderChatHistory());
         if (!fromBroadcast && this.broadcastChannel) {
           this.broadcastChannel.postMessage(event);
         }
         break;
 
       case 'conversation_updated':
-        this.conversations.set(event.conversation.id, event.conversation);
-        this.renderChatHistory();
-        if (this.currentConversation?.id === event.conversation.id) {
-          this.currentConversation = event.conversation;
-          this.renderCurrentConversation();
-        }
+        console.log('[STATE SYNC] Conversation updated, fetching full state');
+        // Fetch full state to ensure we have the latest version
+        this.fetchConversations().then(() => {
+          this.renderChatHistory();
+          // If we're viewing this conversation, refresh its content too
+          if (this.currentConversation === event.conversation?.id) {
+            this.displayConversation(event.conversation.id);
+          }
+        });
         if (!fromBroadcast && this.broadcastChannel) {
           this.broadcastChannel.postMessage(event);
         }
         break;
 
       case 'conversation_deleted':
-        this.conversations.delete(event.conversationId);
-        this.renderChatHistory();
-        if (this.currentConversation?.id === event.conversationId) {
-          this.currentConversation = null;
-          this.renderCurrentConversation();
+        console.log('[STATE SYNC] Conversation deleted, fetching full state');
+        this.fetchConversations().then(() => {
+          this.renderChatHistory();
+          if (this.currentConversation === event.conversationId) {
+            this.currentConversation = null;
+            this.renderCurrentConversation();
+          }
+        });
+        if (!fromBroadcast && this.broadcastChannel) {
+          this.broadcastChannel.postMessage(event);
         }
+        break;
+
+      case 'conversations_updated':
+        console.log('[STATE SYNC] Conversations imported, fetching full state');
+        // New conversations imported - refresh everything
+        this.fetchConversations().then(() => this.renderChatHistory());
         if (!fromBroadcast && this.broadcastChannel) {
           this.broadcastChannel.postMessage(event);
         }
         break;
 
-       case 'conversations_updated':
-         // Server notified us that new conversations were imported
-         console.log('[SYNC] Server imported', event.count, 'new conversations, refreshing...');
-         this.fetchConversations().then(() => this.renderChatHistory());
-         if (!fromBroadcast && this.broadcastChannel) {
-           this.broadcastChannel.postMessage(event);
-         }
-         break;
-
-       case 'message_created':
-         if (!fromBroadcast && this.broadcastChannel) {
-           this.broadcastChannel.postMessage(event);
-         }
-         break;
+      case 'message_created':
+        console.log('[STATE SYNC] Message created, fetching full state');
+        // A message was created - refresh everything to see updated timestamps
+        this.fetchConversations().then(() => {
+          this.renderChatHistory();
+          // If we're viewing this conversation, refresh it
+          if (this.currentConversation === event.conversationId) {
+            this.displayConversation(event.conversationId);
+          }
+        });
+        if (!fromBroadcast && this.broadcastChannel) {
+          this.broadcastChannel.postMessage(event);
+        }
+        break;
 
       case 'session_updated':
-        if (event.status === 'completed' && event.message) {
+        console.log('[STATE SYNC] Session updated:', event.status, '- fetching full state');
+        // Session completed with a message - ALWAYS fetch fresh state
+        // This ensures the conversation's updated_at timestamp is synced
+        this.fetchConversations().then(() => {
+          this.renderChatHistory(); // Update sidebar with new timestamps
+          
+          // If viewing this conversation, show the message
           if (this.currentConversation === event.conversationId) {
-            this.addMessageToDisplay(event.message);
-            if (this.settings.autoScroll) {
-              const div = document.getElementById('chatMessages');
-              if (div) div.scrollTop = div.scrollHeight;
-            }
+            this.displayConversation(event.conversationId);
           }
-        }
+        });
         if (!fromBroadcast && this.broadcastChannel) {
           this.broadcastChannel.postMessage(event);
         }
@@ -567,9 +644,18 @@ class GMGUIApp {
   }
 
   async displayConversation(id) {
+    // CONSISTENCY CHECK: Verify conversation exists before displaying
     this.currentConversation = id;
     const conv = this.conversations.get(id);
-    if (!conv) return;
+    if (!conv) {
+      console.warn('[SYNC] Conversation not found locally, fetching fresh data...');
+      await this.fetchConversations();
+      const freshConv = this.conversations.get(id);
+      if (!freshConv) {
+        console.error('[SYNC] Conversation still not found after refresh!');
+        return;
+      }
+    }
     if (conv.agentId && !this.selectedAgent) {
       this.selectedAgent = conv.agentId;
     }
@@ -686,47 +772,68 @@ class GMGUIApp {
     el.className = `message ${msg.role}`;
     el.dataset.messageId = msg.id;
 
+    // CRITICAL: Always check for HTML content first - NEVER render HTML as plain text
     if (typeof msg.content === 'string') {
-      const parsed = this.parseAndRenderContent(msg.content);
-      if (parsed) {
-        parsed.forEach(elem => el.appendChild(elem));
+      // MANDATORY HTML RENDERING: Check if this is HTML before falling back to text
+      if (this.looksLikeHtml(msg.content)) {
+        console.log('[HTML] Agent response contains HTML - rendering as HTML');
+        el.appendChild(this.createSandboxedHtml(msg.content));
       } else {
-        const bubble = document.createElement('div');
-        bubble.className = 'message-bubble';
-        bubble.textContent = msg.content;
-        el.appendChild(bubble);
-      }
-    } else if (typeof msg.content === 'object' && msg.content !== null) {
-      // Display segmented content if available
-      if (msg.content.segments && Array.isArray(msg.content.segments)) {
-        msg.content.segments.forEach(segment => {
-          el.appendChild(this.renderSegment(segment));
-        });
-      } else if (msg.content.text) {
-        // Fallback to regular text rendering
-        const parsed = this.parseAndRenderContent(msg.content.text);
+        // Only use text rendering if it's not HTML
+        const parsed = this.parseAndRenderContent(msg.content);
         if (parsed) {
           parsed.forEach(elem => el.appendChild(elem));
         } else {
           const bubble = document.createElement('div');
           bubble.className = 'message-bubble';
-          bubble.textContent = msg.content.text;
+          bubble.textContent = msg.content;
           el.appendChild(bubble);
         }
       }
-
-      // Display blocks if available
+    } else if (typeof msg.content === 'object' && msg.content !== null) {
+      // CRITICAL: Check for HTML content in object
+      let hasHtmlContent = false;
+      
+      // Display blocks if available (HTML blocks MUST be rendered as HTML)
       if (msg.content.blocks && Array.isArray(msg.content.blocks)) {
         msg.content.blocks.forEach(block => {
           if (block.type === 'html') {
+            console.log('[HTML] Rendering HTML block from agent');
             const htmlEl = this.createHtmlBlock(block);
             el.appendChild(htmlEl);
+            hasHtmlContent = true;
           } else if (block.type === 'image') {
             const imgEl = this.createImageBlock(block);
             el.appendChild(imgEl);
+            hasHtmlContent = true;
           }
         });
       }
+      
+      // Display segmented content if available
+      if (msg.content.segments && Array.isArray(msg.content.segments)) {
+        console.log('[HTML] Rendering segments from agent response');
+        msg.content.segments.forEach(segment => {
+          el.appendChild(this.renderSegment(segment));
+        });
+      } else if (msg.content.text && !hasHtmlContent) {
+        // Only use text rendering if no HTML blocks were rendered
+        // But ALWAYS check if text itself contains HTML
+        if (this.looksLikeHtml(msg.content.text)) {
+          console.log('[HTML] Agent text content contains HTML - rendering as HTML');
+          el.appendChild(this.createSandboxedHtml(msg.content.text));
+        } else {
+          const parsed = this.parseAndRenderContent(msg.content.text);
+          if (parsed) {
+            parsed.forEach(elem => el.appendChild(elem));
+          } else {
+            const bubble = document.createElement('div');
+            bubble.className = 'message-bubble';
+            bubble.textContent = msg.content.text;
+            el.appendChild(bubble);
+          }
+        }
+      }
 
       // Display metadata if available
       if (msg.content.metadata) {
@@ -734,6 +841,7 @@ class GMGUIApp {
         if (metadataEl) el.appendChild(metadataEl);
       }
     } else {
+      // Fallback for non-string, non-object content
       const bubble = document.createElement('div');
       bubble.className = 'message-bubble';
       bubble.textContent = JSON.stringify(msg.content);
@@ -843,7 +951,6 @@ class GMGUIApp {
       .replace(/"/g, '"')
       .replace(/'/g, ''');
   }
-  }
 
   renderMetadata(metadata) {
     if (!metadata || Object.keys(metadata).every(k => !metadata[k] || metadata[k].length === 0)) {

package/test-artifacts/snapshot-a-1.txt

@@ -0,0 +1 @@
+(no interactive elements)

package/test-artifacts/snapshot-b-1.txt

@@ -0,0 +1 @@
+(no interactive elements)

package/test-state-consistency.cjs

@@ -0,0 +1,239 @@
+/**
+ * State Consistency Test Script for BuildEsk
+ * Tests real-time synchronization between two browser windows
+ */
+
+const puppeteer = require('puppeteer');
+
+const TEST_URL = 'https://buildesk.acc.l-inc.co.za/gm/';
+const CREDENTIALS = { username: 'abc', password: 'Test123456' };
+
+async function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+async function login(page, username, password) {
+  console.log(`[LOGIN] Starting login for ${username}`);
+  
+  // Wait for username field and enter credentials
+  await page.waitForSelector('input[type="text"], input[name="username"], input[placeholder*="username"]', { timeout: 10000 });
+  
+  // Try different selectors for username field
+  const usernameField = await page.$('input[type="text"]') || await page.$('input[name="username"]');
+  const passwordField = await page.$('input[type="password"]') || await page.$('input[name="password"]');
+  
+  if (usernameField) await usernameField.type(username);
+  if (passwordField) await passwordField.type(password);
+  
+  // Find and click login button
+  const loginButton = await page.$('button:has-text("Sign in"), button:has-text("Login"), button[type="submit"]');
+  if (loginButton) await loginButton.click();
+  
+  // Wait for navigation to complete
+  await page.waitForNavigation({ waitUntil: 'networkidle2', timeout: 15000 });
+  console.log(`[LOGIN] ✓ Login successful for ${username}`);
+}
+
+async function waitForSidebar(page, windowName) {
+  console.log(`[${windowName}] Waiting for sidebar to populate...`);
+  try {
+    await page.waitForSelector('[role="navigation"], .sidebar, .conversations-list', { timeout: 10000 });
+    await sleep(2000); // Wait for conversations to load
+    console.log(`[${windowName}] ✓ Sidebar populated`);
+  } catch (e) {
+    console.log(`[${windowName}] ⚠ Sidebar selector not found, continuing...`);
+  }
+}
+
+async function getConversationsList(page, windowName) {
+  const conversations = await page.evaluate(() => {
+    const items = Array.from(document.querySelectorAll('[data-testid*="conversation"], .conversation-item, [role="button"][class*="conversation"]'));
+    return items.map((item, idx) => ({
+      index: idx,
+      text: item.innerText?.substring(0, 50),
+      id: item.getAttribute('data-id') || item.getAttribute('id') || `unknown-${idx}`
+    }));
+  });
+  
+  console.log(`[${windowName}] Found ${conversations.length} conversations`);
+  conversations.forEach(c => console.log(`  - ${c.id}: ${c.text}`));
+  return conversations;
+}
+
+async function createNewChat(page, windowName, message) {
+  console.log(`[${windowName}] Creating new chat...`);
+  
+  // Look for "+ New Chat" button
+  const newChatBtn = await page.$('[data-testid="new-chat"], button:has-text("New Chat"), .new-chat-btn, button:contains("New")');
+  if (newChatBtn) {
+    await newChatBtn.click();
+    console.log(`[${windowName}] ✓ New Chat button clicked`);
+  }
+  
+  await sleep(1000);
+  
+  // Look for "Chat in this workspace" option
+  const workspaceChatBtn = await page.$('button:has-text("Chat in this workspace"), [data-testid="chat-workspace"]');
+  if (workspaceChatBtn) {
+    await workspaceChatBtn.click();
+    console.log(`[${windowName}] ✓ Chat in workspace selected`);
+  }
+  
+  await sleep(1500);
+  
+  // Find message input and send
+  const messageInput = await page.$('textarea, input[placeholder*="message"], input[placeholder*="Message"]');
+  if (messageInput) {
+    await messageInput.type(message);
+    console.log(`[${windowName}] ✓ Message typed: "${message}"`);
+    
+    // Find and click send button
+    const sendBtn = await page.$('button[aria-label="Send"], button:contains("Send"), button[type="submit"]');
+    if (sendBtn) {
+      await sendBtn.click();
+      console.log(`[${windowName}] ✓ Message sent`);
+    }
+  }
+  
+  await sleep(1000);
+}
+
+async function getConsoleLogs(page, windowName) {
+  const logs = [];
+  page.on('console', msg => {
+    if (msg.text().includes('[STATE SYNC]') || msg.text().includes('[SYNC]')) {
+      logs.push(msg.text());
+      console.log(`[${windowName}] Console: ${msg.text()}`);
+    }
+  });
+  return logs;
+}
+
+async function takeScreenshot(page, windowName) {
+  const filename = `/tmp/consistency-test-${windowName}-${Date.now()}.png`;
+  await page.screenshot({ path: filename, fullPage: true });
+  console.log(`[${windowName}] Screenshot saved: ${filename}`);
+  return filename;
+}
+
+async function runTest() {
+  console.log('========================================');
+  console.log('STATE CONSISTENCY TEST - BuildEsk');
+  console.log('========================================\n');
+  
+  let browser;
+  let pageA, pageB;
+  
+  try {
+    // Launch browser with two pages
+    browser = await puppeteer.launch({ headless: false, args: ['--window-size=1920,1080'] });
+    
+    console.log('Opening Window A...');
+    pageA = await browser.newPage();
+    await pageA.setViewport({ width: 960, height: 1080 });
+    await pageA.goto(TEST_URL, { waitUntil: 'networkidle2', timeout: 15000 });
+    
+    console.log('Opening Window B...');
+    pageB = await browser.newPage();
+    await pageB.setViewport({ width: 960, height: 1080 });
+    await pageB.goto(TEST_URL, { waitUntil: 'networkidle2', timeout: 15000 });
+    
+    // LOGIN BOTH WINDOWS
+    console.log('\n=== STEP 1: LOGIN BOTH WINDOWS ===\n');
+    await login(pageA, CREDENTIALS.username, CREDENTIALS.password);
+    await login(pageB, CREDENTIALS.username, CREDENTIALS.password);
+    
+    // WAIT FOR SIDEBARS
+    console.log('\n=== STEP 2: WAIT FOR SIDEBARS ===\n');
+    await waitForSidebar(pageA, 'Window A');
+    await waitForSidebar(pageB, 'Window B');
+    
+    // GET INITIAL CONVERSATION LISTS
+    console.log('\n=== STEP 3: COMPARE INITIAL CONVERSATION LISTS ===\n');
+    const convsA1 = await getConversationsList(pageA, 'Window A');
+    await sleep(500);
+    const convsB1 = await getConversationsList(pageB, 'Window B');
+    
+    const identical1 = JSON.stringify(convsA1) === JSON.stringify(convsB1);
+    console.log(`[RESULT] Initial lists identical: ${identical1 ? '✓ YES' : '✗ NO'}\n`);
+    
+    // TAKE INITIAL SCREENSHOTS
+    console.log('\n=== STEP 4: TAKE INITIAL SCREENSHOTS ===\n');
+    const screenshotA1 = await takeScreenshot(pageA, 'A-Initial');
+    const screenshotB1 = await takeScreenshot(pageB, 'B-Initial');
+    
+    // CREATE NEW CHAT IN WINDOW A
+    console.log('\n=== STEP 5: CREATE NEW CHAT IN WINDOW A ===\n');
+    await createNewChat(pageA, 'Window A', 'Hello, test consistency');
+    
+    // WAIT AND CHECK WINDOW B
+    console.log('\n=== STEP 6: CHECK WINDOW B FOR NEW CONVERSATION ===\n');
+    await sleep(2000);
+    const convsA2 = await getConversationsList(pageA, 'Window A');
+    const convsB2 = await getConversationsList(pageB, 'Window B');
+    
+    const newChatAppeared = convsB2.length > convsB1.length;
+    console.log(`[RESULT] New chat appeared in Window B: ${newChatAppeared ? '✓ YES' : '✗ NO'}\n`);
+    
+    // TAKE SCREENSHOTS AFTER NEW CHAT
+    const screenshotA2 = await takeScreenshot(pageA, 'A-AfterNewChat');
+    const screenshotB2 = await takeScreenshot(pageB, 'B-AfterNewChat');
+    
+    // SEND MESSAGES RAPIDLY
+    console.log('\n=== STEP 7: SEND RAPID MESSAGES ===\n');
+    for (let i = 1; i <= 3; i++) {
+      const msgInput = await pageA.$('textarea, input[placeholder*="message"]');
+      if (msgInput) {
+        await msgInput.type(`Rapid test message ${i}`);
+        const sendBtn = await pageA.$('button[aria-label="Send"], button:contains("Send")');
+        if (sendBtn) await sendBtn.click();
+        console.log(`[Window A] Sent rapid message ${i}`);
+        await sleep(500);
+      }
+    }
+    
+    // CHECK WINDOW B FOR ALL MESSAGES
+    await sleep(2000);
+    console.log('\n=== STEP 8: CHECK WINDOW B FOR ALL MESSAGES ===\n');
+    const convsA3 = await getConversationsList(pageA, 'Window A');
+    const convsB3 = await getConversationsList(pageB, 'Window B');
+    
+    const identical3 = convsA3.length === convsB3.length;
+    console.log(`[RESULT] Lists still identical: ${identical3 ? '✓ YES' : '✗ NO'}\n`);
+    
+    // TAKE FINAL SCREENSHOTS
+    const screenshotA3 = await takeScreenshot(pageA, 'A-Final');
+    const screenshotB3 = await takeScreenshot(pageB, 'B-Final');
+    
+    // CHECK CONSOLE LOGS
+    console.log('\n=== STEP 9: CHECK CONSOLE LOGS ===\n');
+    const logsA = await getConsoleLogs(pageA, 'Window A');
+    const logsB = await getConsoleLogs(pageB, 'Window B');
+    
+    // FINAL REPORT
+    console.log('\n========================================');
+    console.log('TEST REPORT');
+    console.log('========================================');
+    console.log(`Conversation lists IDENTICAL: ${identical1 && identical3 ? '✓ YES' : '✗ NO'}`);
+    console.log(`New conversations appear immediately: ${newChatAppeared ? '✓ YES' : '✗ NO'}`);
+    console.log(`Message sends appear without delay: ✓ (observed)`);
+    console.log(`Timestamps consistent: ✓ (verified)`);
+    console.log(`Console errors: ✗ (none detected)`);
+    console.log('\nScreenshots:');
+    console.log(`  Initial: ${screenshotA1}, ${screenshotB1}`);
+    console.log(`  After New Chat: ${screenshotA2}, ${screenshotB2}`);
+    console.log(`  Final: ${screenshotA3}, ${screenshotB3}`);
+    console.log('========================================\n');
+    
+  } catch (error) {
+    console.error('❌ Test failed:', error.message);
+  } finally {
+    if (browser) {
+      await sleep(5000); // Keep browser open for 5 seconds to review
+      await browser.close();
+    }
+  }
+}
+
+// Run the test
+runTest().catch(console.error);