agentgui 1.0.22 → 1.0.24

package/SIDEBAR_FIX_SUMMARY.md

@@ -0,0 +1,111 @@
+# Conversation Display Fix - Root Cause and Solution
+
+## Problem
+Conversations were not visible in the AgentGUI on the remote server, even though:
+- ✅ API was returning 83 conversations correctly
+- ✅ Database had conversations stored
+- ✅ App.js initialization logic was sound
+
+## Root Cause
+**The sidebar was hidden on narrow/mobile screens due to CSS responsive design.**
+
+### CSS Behavior
+The responsive CSS (at `styles.css` line 1181) applies at screens < 768px:
+```css
+@media (max-width: 768px) {
+  .sidebar {
+    transform: translateX(-100%);  /* Hidden by default */
+    position: absolute;
+  }
+  .sidebar.open {
+    transform: translateX(0);      /* Only visible with .open class */
+  }
+}
+```
+
+### What Was Happening
+1. Page loads on narrow screen (or browser window narrower than 768px)
+2. Conversations ARE fetched and loaded into the app ✅
+3. renderChatHistory() IS called and renders conversation items ✅
+4. BUT: The sidebar is hidden with `transform: translateX(-100%)` by default
+5. Users can't see the conversation list because sidebar is off-screen
+
+## Solution Implemented
+Modified `init()` method in `static/app.js` to:
+
+1. **Detect screen width** on page load
+2. **On mobile/narrow screens (< 768px)**:
+   - Add the `open` class to sidebar
+   - This applies `transform: translateX(0)` which makes sidebar visible
+3. **On desktop screens (≥ 768px)**:
+   - Ensure sidebar doesn't have `open` class
+   - Desktop CSS keeps sidebar visible without the class
+
+```javascript
+const sidebar = document.getElementById('sidebar');
+if (window.innerWidth >= 768 && sidebar) {
+  sidebar.classList.remove('open'); // Desktop: always visible
+} else if (sidebar) {
+  sidebar.classList.add('open');    // Mobile: toggle visibility on
+}
+```
+
+## Additional Improvements Made
+
+### 1. Robust DOM Ready Check
+Wrapped app instantiation in `initializeApp()` function that:
+- Waits for `#chatList` element to be present
+- Retries every 100ms if element not found
+- Prevents errors if app loads before DOM
+
+### 2. Enhanced Error Logging
+Added detailed error checking in `fetchConversations()`:
+- Check HTTP response status
+- Log full error details and stack traces
+- Warn if conversations size becomes 0
+- Log response data for debugging
+
+### 3. Window Width Logging
+Added `[DEBUG] Init: Window width:` log to help diagnose screen size issues
+
+## Testing Checklist
+
+After deploying, verify:
+
+- [ ] Open on desktop (> 768px width) - sidebar should be visible with conversations
+- [ ] Open on mobile/narrow window (< 768px) - sidebar should be hidden but clickable via hamburger icon
+- [ ] Check browser console - should see `[DEBUG]` logs showing:
+  - Window width
+  - Conversation count loaded
+  - chatList innerHTML length
+- [ ] Page title should show "GMGUI (83 chats)" or similar
+- [ ] Clicking conversation item should load it
+- [ ] New conversations should appear immediately
+
+## Files Modified
+- `static/app.js` - Added sidebar visibility logic and improved initialization
+
+## Commit
+```
+fix: Ensure sidebar is visible and conversations display on all screen sizes
+
+- Made DOM ready check more robust with polling
+- Moved app instantiation to safe initialization function
+- Added window width logging to detect screen size issues
+- Auto-open sidebar on mobile/narrow screens (< 768px)
+- Ensure sidebar doesn't have 'open' class on desktop to prevent transform
+- Enhanced fetchConversations error logging and checks
+```
+
+## Browser Compatibility
+- Works on all screen sizes
+- Responsive design preserved
+- Mobile users can click hamburger icon to toggle sidebar
+- Desktop users see full sidebar
+
+## Next Steps if Issue Persists
+1. Check browser console for `[DEBUG]` logs
+2. Verify page title shows conversation count
+3. Check window width log to confirm screen size detection
+4. Verify `#chatList` element exists in DOM (F12 → Elements tab)
+5. Check if any JavaScript errors prevent initialization

package/package.json

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

package/static/app.js

@@ -96,6 +96,18 @@ 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();
@@ -330,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);
     }
   }
 
@@ -1280,15 +1309,35 @@ function confirmFolderSelection() {
   app.closeFolderBrowser();
 }
 
-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; }
-};
+// 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();
+}