agentgui 1.0.21 → 1.0.23

package/CONVERSATION_DISPLAY_FIX.md

@@ -0,0 +1,125 @@
+# Conversation Display Issue
+
+## Problem
+Imported Claude Code conversations are not visible in the UI when opening the application, even though they exist in the database (83 conversations found).
+
+## Root Cause Analysis
+
+Possible issues:
+1. **Conversations not loading on page load** - fetchConversations() may fail silently
+2. **Rendering issue** - chatList element may not be rendering properly
+3. **CSS hiding** - Conversations may be present but hidden (display:none, opacity:0)
+4. **Empty state** - renderChatHistory() shows "No chats yet" because this.conversations is empty
+5. **Filter/agent selection** - Conversations filtered by agent selection not matching
+
+## Investigation Steps
+
+### Check 1: Network Request
+- Open browser DevTools (F12)
+- Network tab: Look for `/api/conversations` request
+- Should return 83 conversations with agent IDs
+
+### Check 2: Console Errors
+- Console tab: Look for any JavaScript errors
+- Look for "fetchConversations:" logs
+
+### Check 3: DOM Elements
+- Elements tab: Inspect #chatList
+- Check if it has children
+- Check CSS display property (should be visible)
+
+### Check 4: Data Binding
+- Console: `app.conversations.size` - should show 83
+- Console: `app.conversations` - should contain conversation objects
+
+## Solution Areas
+
+### Frontend (static/app.js)
+
+1. **Add logging to fetchConversations()**
+   - Log when fetch starts/completes
+   - Log number of conversations received
+   - Log any errors
+
+2. **Add logging to renderChatHistory()**
+   - Log conversations.size
+   - Log if condition triggers "No chats yet"
+
+3. **Force initial render**
+   - Ensure renderChatHistory() is called after fetchConversations()
+   - Add retry logic if conversations empty on first load
+
+### Server (server.js)
+
+1. **Verify /api/conversations endpoint**
+   - Check it returns all conversations
+   - Verify no filtering happening
+   - Check response format
+
+2. **Verify import endpoint**
+   - Check /api/import/claude-code works
+   - Ensure conversations are created with proper agentId
+
+## Implementation
+
+Add debug logging to identify where conversations are lost:
+
+```javascript
+async fetchConversations() {
+  try {
+    const res = await fetch(BASE_URL + '/api/conversations');
+    const data = await res.json();
+    console.log('fetchConversations response:', data);
+    console.log('Conversations count:', data.conversations?.length);
+    
+    if (data.conversations) {
+      this.conversations.clear();
+      data.conversations.forEach(c => {
+        console.log('Adding conversation:', c.id, c.title);
+        this.conversations.set(c.id, c);
+      });
+      console.log('Final conversations.size:', this.conversations.size);
+    }
+  } catch (e) {
+    console.error('fetchConversations error:', e);
+  }
+}
+
+renderChatHistory() {
+  const list = document.getElementById('chatList');
+  if (!list) {
+    console.error('chatList element not found!');
+    return;
+  }
+  
+  console.log('renderChatHistory - conversations.size:', this.conversations.size);
+  
+  if (this.conversations.size === 0) {
+    console.warn('No conversations to display');
+    list.innerHTML = '<p>No chats yet</p>';
+    return;
+  }
+  
+  // ... rest of rendering
+}
+```
+
+## Expected Behavior
+
+1. Page loads
+2. fetchConversations() retrieves 83 conversations from API
+3. conversations Map populated with all 83 items
+4. renderChatHistory() iterates over conversations
+5. Chat list displays 83 conversation items
+6. User can click to view any conversation
+
+## Testing
+
+```bash
+# Verify conversations in database
+curl http://localhost:9897/gm/api/conversations | python3 -m json.tool | grep -c '"id"'
+
+# Verify a conversation has messages (pick one)
+curl http://localhost:9897/gm/api/conversations/CONV_ID/messages
+```
+

package/package.json

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

package/static/app.js

@@ -95,6 +95,19 @@ class GMGUIApp {
 
   async init() {
     console.log('[DEBUG] Init: Starting initialization');
+    console.log('[DEBUG] Init: BASE_URL =', BASE_URL);
+    console.log('[DEBUG] Init: Window width:', window.innerWidth);
+    
+    // Ensure sidebar is visible on desktop (open on wide screens)
+    const sidebar = document.getElementById('sidebar');
+    if (window.innerWidth >= 768 && sidebar) {
+      console.log('[DEBUG] Init: Wide screen detected, ensuring sidebar is visible');
+      sidebar.classList.remove('open'); // On desktop, sidebar is always visible, no need for 'open' class
+    } else if (sidebar) {
+      console.log('[DEBUG] Init: Mobile/narrow screen detected, opening sidebar');
+      sidebar.classList.add('open');
+    }
+    
     this.loadSettings();
     this.setupEventListeners();
     await this.fetchHome();
@@ -105,12 +118,14 @@ class GMGUIApp {
     console.log('[DEBUG] Init: Auto-imported Claude Code conversations');
     await this.fetchConversations();
     console.log('[DEBUG] Init: Fetched conversations, count:', this.conversations.size);
+    console.log('[DEBUG] Init: Conversation details:', Array.from(this.conversations.values()).slice(0, 3));
     this.connectSyncWebSocket();
     this.setupCrossTabSync();
     this.startPeriodicSync();
     console.log('[DEBUG] Init: About to renderAll with', this.conversations.size, 'conversations');
     this.renderAll();
     console.log('[DEBUG] Init: renderAll completed');
+    console.log('[DEBUG] Init: chatList innerHTML length:', document.getElementById('chatList')?.innerHTML?.length || 0);
   }
 
   startPeriodicSync() {
@@ -327,20 +342,37 @@ class GMGUIApp {
       console.log('[DEBUG] fetchConversations: Starting fetch from', BASE_URL + '/api/conversations');
       const res = await fetch(BASE_URL + '/api/conversations');
       console.log('[DEBUG] fetchConversations: Response status:', res.status);
+      
+      if (!res.ok) {
+        console.error('[DEBUG] fetchConversations: Response not OK, status:', res.status);
+        return;
+      }
+      
       const data = await res.json();
       console.log('[DEBUG] fetchConversations response count:', data.conversations?.length);
-      console.log('[DEBUG] fetchConversations response data:', data);
+      
       if (data.conversations) {
+        console.log('[DEBUG] fetchConversations: About to clear and load conversations');
         this.conversations.clear();
-        console.log('[DEBUG] fetchConversations: Cleared conversations map');
-        data.conversations.forEach(c => this.conversations.set(c.id, c));
+        console.log('[DEBUG] fetchConversations: Cleared conversations map, size now:', this.conversations.size);
+        
+        data.conversations.forEach(c => {
+          this.conversations.set(c.id, c);
+        });
+        
         console.log('[DEBUG] Loaded conversations, total:', this.conversations.size);
         console.log('[DEBUG] First few conversation IDs:', Array.from(this.conversations.keys()).slice(0, 5));
+        
+        if (this.conversations.size === 0) {
+          console.error('[DEBUG] ERROR: conversations.size is 0 after loading!');
+        }
       } else {
         console.warn('[DEBUG] fetchConversations: data.conversations is undefined or null');
+        console.warn('[DEBUG] fetchConversations: Full response:', data);
       }
     } catch (e) {
-      console.error('fetchConversations error:', e);
+      console.error('[DEBUG] fetchConversations error:', e);
+      console.error('[DEBUG] Error details:', e.message, e.stack);
     }
   }
 
@@ -411,6 +443,10 @@ class GMGUIApp {
     }
     list.innerHTML = '';
     console.log('[DEBUG] renderChatHistory - conversations.size:', this.conversations.size);
+    
+    // Debug: Update page title with conversation count
+    document.title = `GMGUI (${this.conversations.size} chats)`;
+    
     if (this.conversations.size === 0) {
       console.warn('[DEBUG] No conversations to display - showing empty state');
       console.warn('[DEBUG] conversations map contents:', this.conversations);
@@ -421,6 +457,7 @@ class GMGUIApp {
       (a, b) => (b.updated_at || 0) - (a.updated_at || 0)
     );
     console.log('[DEBUG] renderChatHistory - sorted conversations count:', sorted.length);
+    console.log('[DEBUG] renderChatHistory - rendering', sorted.length, 'conversations');
     sorted.forEach(conv => {
       const item = document.createElement('button');
       item.className = `chat-item ${this.currentConversation === conv.id ? 'active' : ''}`;
@@ -1272,5 +1309,35 @@ function confirmFolderSelection() {
   app.closeFolderBrowser();
 }
 
-const app = new GMGUIApp();
-window._app = app;
+// Wait for DOM to be fully ready before initializing
+function initializeApp() {
+  console.log('[DEBUG] initializeApp: Checking if DOM is ready');
+  const chatList = document.getElementById('chatList');
+  if (!chatList) {
+    console.warn('[DEBUG] initializeApp: chatList not found, waiting 100ms');
+    setTimeout(initializeApp, 100);
+    return;
+  }
+  
+  console.log('[DEBUG] initializeApp: DOM is ready, creating GMGUIApp');
+  window.app = new GMGUIApp();
+  window._app = window.app;
+  
+  // Debug: Log app state to window for inspection
+  window._debug = {
+    get conversations() { return Array.from(window.app.conversations.values()).map(c => ({ id: c.id, title: c.title })); },
+    get conversationCount() { return window.app.conversations.size; },
+    get selectedAgent() { return window.app.selectedAgent; },
+    get currentConversation() { return window.app.currentConversation; },
+    checkChatListElement() { return document.getElementById('chatList'); },
+    checkChatListChildCount() { return document.getElementById('chatList')?.children?.length || 0; }
+  };
+  
+  console.log('[DEBUG] initializeApp: GMGUIApp created successfully');
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeApp);
+} else {
+  initializeApp();
+}