agentgui 1.0.20 → 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/DEBUG_GUIDE.md

@@ -0,0 +1,136 @@
+# Debug Guide - Conversation Display Issue
+
+## Problem
+Imported Claude Code conversations (83 total) are not visible in the chat list when the application loads, despite being stored in the database and returned by the API.
+
+## API Status - ✅ VERIFIED
+- Server is running on `http://localhost:9897`
+- API endpoint `/api/conversations` returns 83 conversations
+- Response structure is correct with proper ID, agentId, title, created_at, updated_at, status fields
+
+## Debug Logging Added
+We've added comprehensive debug logging to trace the initialization flow. The logging will help identify where conversations are being lost.
+
+### Enhanced Logging Points:
+1. **Init sequence** - Logs each step of initialization
+2. **fetchConversations** - Logs API request, response status, data received
+3. **renderAll** - Logs conversation count before rendering
+4. **renderChatHistory** - Logs final conversation count and whether empty state is shown
+
+## How to Debug
+
+### Step 1: Open the Application
+1. Open your web browser
+2. Navigate to: `http://localhost:9897/gm/`
+3. Press **F12** to open Developer Tools
+4. Go to the **Console** tab
+
+### Step 2: Look for Debug Logs
+Watch for logs starting with `[DEBUG]`. You should see:
+
+```
+[DEBUG] Init: Starting initialization
+[DEBUG] Init: Fetched home
+[DEBUG] Init: Fetched agents, count: X
+[DEBUG] Init: Auto-imported Claude Code conversations
+[DEBUG] fetchConversations: Starting fetch from http://localhost:9897/gm/api/conversations
+[DEBUG] fetchConversations: Response status: 200
+[DEBUG] fetchConversations response count: 83
+[DEBUG] fetchConversations response data: {...}
+[DEBUG] fetchConversations: Cleared conversations map
+[DEBUG] Loaded conversations, total: 83
+[DEBUG] First few conversation IDs: [...]
+[DEBUG] Init: Fetched conversations, count: 83
+[DEBUG] Init: About to renderAll with 83 conversations
+[DEBUG] renderAll: Called with 83 conversations
+[DEBUG] renderChatHistory - conversations.size: 83
+[DEBUG] renderChatHistory - sorted conversations count: 83
+[DEBUG] Init: renderAll completed
+```
+
+### Step 3: Analyze the Logs
+
+Check these specific values:
+
+| Log | Expected | Issue If Different |
+|-----|----------|-------------------|
+| `response count: 83` | 83 | API not returning conversations |
+| `Loaded conversations, total: 83` | 83 | Data not being added to map |
+| `About to renderAll with 83 conversations` | 83 | Conversations lost between fetch and render |
+| `renderChatHistory - conversations.size: 83` | 83 | Size changes between renderAll and renderChatHistory |
+| `No conversations to display - showing empty state` | Should NOT appear | renderChatHistory shows empty when size > 0 |
+
+### Step 4: Check Browser State
+In the Console, type:
+```javascript
+// Check if conversations were loaded into the app
+app.conversations.size
+
+// Check the actual conversations
+app.conversations
+
+// Check first conversation
+Array.from(app.conversations.values())[0]
+
+// Check if BASE_URL is correct
+BASE_URL
+```
+
+### Step 5: Check Network Tab
+1. Go to **Network** tab in DevTools
+2. Filter for `/api/conversations` request
+3. Check:
+   - Request Status: Should be 200
+   - Response body: Should contain array of 83 conversations
+   - Response headers: Should show correct content-type
+
+## Possible Issues and Solutions
+
+### Issue 1: API returns 0 conversations
+**Symptom**: `response count: 0`
+- Check: Is the database populated?
+- Command: `sqlite3 /config/workspace/agentgui/data/gmgui.db "SELECT COUNT(*) FROM conversations;"`
+- Fix: Import conversations or check database connection
+
+### Issue 2: API returns data but conversations.size is 0
+**Symptom**: `response count: 83` but `Loaded conversations, total: 0`
+- Likely cause: Data structure mismatch or forEach not working
+- Fix: Check if data.conversations is an array
+- Check: Are the conversation objects being created properly?
+
+### Issue 3: Conversations loaded but renderChatHistory shows empty
+**Symptom**: `About to renderAll with 83 conversations` but `No conversations to display`
+- Likely cause: Something clears conversations.map between renderAll and renderChatHistory
+- Check: Look for any handleSyncEvent calls that might clear or reset conversations
+- Fix: Add logging to sync event handlers
+
+### Issue 4: Conversations load but don't display in UI
+**Symptom**: All debug logs show 83 conversations, but chat list still shows "No chats yet"
+- Likely cause: CSS hiding, DOM structure issue, or rendering issue
+- Check: Look at HTML element with id="chatList" - is it hidden?
+- Check: Are chat items being created in the DOM?
+- Solution: Open Elements tab and expand chatList to see if items exist
+
+## Next Steps After Debugging
+
+1. **Identify the root cause** using the logs above
+2. **Document which log shows the problem**
+3. **Implement the appropriate fix**:
+   - If API issue: Fix server endpoint
+   - If data structure issue: Fix response parsing
+   - If sync issue: Fix sync event handlers
+   - If UI issue: Fix CSS or rendering logic
+4. **Verify fix** with the debug logs
+5. **Commit changes** to git
+
+## File Locations
+- Frontend code: `/config/workspace/agentgui/static/app.js`
+- Server code: `/config/workspace/agentgui/server.js`
+- Database: `/config/workspace/agentgui/data/gmgui.db`
+- API responses return from: `/api/conversations` endpoint in server.js
+
+## Important Notes
+- Hot reload is enabled for CSS/HTML/frontend JS
+- Debug logs will auto-reload in browser when app.js changes
+- Check DevTools console IMMEDIATELY after loading the page
+- Some logs may scroll off - use DevTools console filter to search for `[DEBUG]`

package/package.json

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

package/static/app.js

@@ -94,16 +94,26 @@ 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();
+    console.log('[DEBUG] Init: Fetched home');
     await this.fetchAgents();
+    console.log('[DEBUG] Init: Fetched agents, count:', this.agents.size);
     await this.autoImportClaudeCode();
+    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() {
@@ -317,14 +327,23 @@ class GMGUIApp {
 
   async fetchConversations() {
     try {
+      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);
       const data = await res.json();
+      console.log('[DEBUG] fetchConversations response count:', data.conversations?.length);
+      console.log('[DEBUG] fetchConversations response data:', data);
       if (data.conversations) {
         this.conversations.clear();
+        console.log('[DEBUG] fetchConversations: Cleared conversations map');
         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));
+      } else {
+        console.warn('[DEBUG] fetchConversations: data.conversations is undefined or null');
       }
     } catch (e) {
-      console.error('fetchConversations:', e);
+      console.error('fetchConversations error:', e);
     }
   }
 
@@ -340,9 +359,11 @@ class GMGUIApp {
   }
 
   renderAll() {
+    console.log('[DEBUG] renderAll: Called with', this.conversations.size, 'conversations');
     this.renderAgentCards();
     this.renderChatHistory();
     if (this.currentConversation) {
+      console.log('[DEBUG] renderAll: Displaying current conversation', this.currentConversation);
       this.displayConversation(this.currentConversation);
     }
   }
@@ -387,15 +408,27 @@ class GMGUIApp {
 
   renderChatHistory() {
     const list = document.getElementById('chatList');
-    if (!list) return;
+    if (!list) {
+      console.error('[DEBUG] chatList element not found!');
+      return;
+    }
     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);
       list.innerHTML = '<p style="color: var(--text-tertiary); font-size: 0.875rem; padding: 0.5rem;">No chats yet</p>';
       return;
     }
     const sorted = Array.from(this.conversations.values()).sort(
       (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' : ''}`;
@@ -1249,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; }
+};