agentgui 1.0.21 → 1.0.22

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.22",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",

package/static/app.js

@@ -95,6 +95,7 @@ class GMGUIApp {
 
   async init() {
     console.log('[DEBUG] Init: Starting initialization');
+    console.log('[DEBUG] Init: BASE_URL =', BASE_URL);
     this.loadSettings();
     this.setupEventListeners();
     await this.fetchHome();
@@ -105,12 +106,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() {
@@ -411,6 +414,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 +428,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' : ''}`;
@@ -1274,3 +1282,13 @@ function confirmFolderSelection() {
 
 const app = new GMGUIApp();
 window._app = app;
+
+// Debug: Log app state to window for inspection
+window._debug = {
+  get conversations() { return Array.from(app.conversations.values()).map(c => ({ id: c.id, title: c.title })); },
+  get conversationCount() { return app.conversations.size; },
+  get selectedAgent() { return app.selectedAgent; },
+  get currentConversation() { return app.currentConversation; },
+  checkChatListElement() { return document.getElementById('chatList'); },
+  checkChatListChildCount() { return document.getElementById('chatList')?.children?.length || 0; }
+};