agentgui 1.0.26 → 1.0.28

package/AUTOMATIC_IMPORT.md

@@ -0,0 +1,284 @@
+# Automatic Continuous Importing Feature
+
+## Overview
+AgentGUI now automatically and continuously imports Claude Code conversations **without requiring any user action**. This ensures conversations are always available and up-to-date.
+
+## How It Works
+
+### Server-Side (Every 30 Seconds)
+```
+Server startup
+    ↓
+[IMMEDIATE] Import Claude Code conversations (first run)
+    ↓
+[EVERY 30 SECONDS] Auto-import new conversations
+    ↓
+If new conversations found:
+  • Add them to database
+  • Broadcast 'conversations_updated' event to all connected clients
+  • Log: "[AUTO-IMPORT] Imported X new Claude Code conversations"
+```
+
+### Frontend-Side
+```
+Page loads
+    ↓
+[IMMEDIATE] Fetch conversations from API
+    ↓
+[EVERY 10 SECONDS] Fetch conversations again (as fallback)
+    ↓
+[ON SYNC EVENT] Receive 'conversations_updated' from server
+    ↓
+Immediately refresh conversation list
+    ↓
+Users see new conversations appear in real-time
+```
+
+## Key Features
+
+✅ **Automatic**: No user action needed  
+✅ **Continuous**: Runs every 30 seconds (server) and 10 seconds (client)  
+✅ **Real-time**: New conversations appear immediately via WebSocket  
+✅ **No Duplicates**: Skips conversations already imported  
+✅ **Cross-tab**: Broadcasts via BroadcastChannel API  
+✅ **Resilient**: Fallback mechanism if WebSocket fails  
+✅ **Logging**: All imports logged for debugging  
+
+## Where Conversations Come From
+
+### Automatically Discovered From:
+1. **Claude Code Projects** (~/.claude/projects/)
+   - Scans sessions-index.json files
+   - Reads .jsonl message files
+   - Imports with "[project] title" format
+
+2. **Created in AgentGUI**
+   - New conversations created via UI
+   - Automatically stored in database
+
+## Example Flow
+
+### Scenario: User Uses Claude Code, Then Opens AgentGUI
+
+```
+11:00:00 - User creates conversation in Claude Code
+11:00:15 - AgentGUI server detects new conversation in ~/.claude/projects/
+11:00:20 - Server imports conversation automatically
+11:00:20 - Server broadcasts 'conversations_updated' event
+11:00:21 - All connected browser tabs receive update
+11:00:21 - Users see new conversation appear in sidebar
+```
+
+### Scenario: Multiple Tabs Open
+
+```
+Tab 1 opens AgentGUI
+Tab 2 opens AgentGUI (few seconds later)
+
+Tab 1 receives 'conversations_updated' from server
+Tab 1 uses BroadcastChannel to notify Tab 2
+Tab 2 also refreshes conversation list
+Both tabs show latest conversations in sync
+```
+
+## Server Logs
+
+You'll see logs like:
+```
+[AUTO-IMPORT] Imported 2 new Claude Code conversations (42 already exist)
+[AUTO-IMPORT] Imported 1 new Claude Code conversation (43 already exist)
+[AUTO-IMPORT] (nothing new this cycle)
+```
+
+## Client Logs
+
+In browser console:
+```
+[SYNC] Server imported 3 new conversations, refreshing...
+[DEBUG] Init: Auto-imported Claude Code conversations
+[DEBUG] Loaded conversations, total: 86
+```
+
+## Configuration
+
+### Import Frequency (Server)
+Current: **30 seconds**
+Location: `server.js` line `setInterval(performAutoImport, 30000);`
+
+To change:
+```javascript
+setInterval(performAutoImport, 60000); // 60 seconds
+setInterval(performAutoImport, 5000);  // 5 seconds
+```
+
+### Refresh Frequency (Client)
+Current: **10 seconds**
+Location: `app.js` line `setInterval(() => { ... }, 10000);`
+
+To change:
+```javascript
+}, 60000);  // 60 seconds
+}, 5000);   // 5 seconds
+```
+
+## Data Flow Diagram
+
+```
+┌─────────────────────────────────────────────────────┐
+│ Claude Code                                          │
+│ ~/.claude/projects/*/sessions-index.json            │
+└─────────────────┬───────────────────────────────────┘
+                  │ (monitors every 30s)
+                  ↓
+┌─────────────────────────────────────────────────────┐
+│ AgentGUI Server                                      │
+│ • queries.importClaudeCodeConversations()           │
+│ • Stores in ~/.gmgui/data.db                        │
+│ • Broadcasts via WebSocket                          │
+└──────┬──────────────────────────┬────────────────────┘
+       │                          │
+       │ (WebSocket event)        │ (HTTP API)
+       ↓                          ↓
+┌─────────────────────────────────────────────────────┐
+│ Browser (Frontend)                                   │
+│ • Listens on sync WebSocket                         │
+│ • Receives 'conversations_updated' event            │
+│ • Calls fetchConversations()                        │
+│ • Calls renderChatHistory()                         │
+└──────┬──────────────────────────────────────────────┘
+       │
+       ↓
+┌─────────────────────────────────────────────────────┐
+│ Chat Sidebar                                         │
+│ • Displays conversation list                        │
+│ • User can click to view conversation               │
+└─────────────────────────────────────────────────────┘
+```
+
+## Troubleshooting
+
+### Conversations Not Appearing
+
+**Check 1: Server Auto-Import**
+```bash
+# Look for these logs in server output
+grep "\[AUTO-IMPORT\]" server.log
+
+# If no logs, auto-import might not be running
+```
+
+**Check 2: Claude Code Availability**
+```bash
+# Check if Claude Code projects exist
+ls -la ~/.claude/projects/
+
+# Count projects with conversations
+find ~/.claude/projects -name "sessions-index.json" | wc -l
+```
+
+**Check 3: Browser Sync**
+```javascript
+// In browser console
+// Check if WebSocket is connected
+console.log('WebSocket state:', app.syncWs.ws?.readyState);
+
+// Try manual refresh
+await app.fetchConversations();
+app.renderChatHistory();
+```
+
+**Check 4: Database**
+```bash
+# Check total conversations in DB
+node -e "
+const DB = require('better-sqlite3');
+const db = new DB(process.env.HOME + '/.gmgui/data.db');
+const count = db.prepare('SELECT COUNT(*) as c FROM conversations').get();
+console.log('Database has:', count.c, 'conversations');
+db.close();
+"
+```
+
+### Too Many Import Logs
+
+If server logs are too verbose:
+1. Increase `setInterval` time (30000 → 60000 or more)
+2. Add log level filtering
+
+### Conversations Take Too Long to Appear
+
+If new conversations take > 1 minute:
+1. Check server auto-import interval (default 30s)
+2. Check client refresh interval (default 10s)
+3. Check network connectivity
+4. Check browser console for errors
+
+## Performance Considerations
+
+### Import Impact
+- **Minimal**: Import skips existing conversations
+- **Fast**: Only processes new conversations
+- **Efficient**: Uses database transactions
+
+### Client Impact
+- **WebSocket**: Real-time updates, low bandwidth
+- **Polling**: Every 10 seconds, minimal traffic
+- **Rendering**: Only updates when conversations change
+
+## Security Notes
+
+- Only imports from user's local `.claude/projects/`
+- No external network access needed
+- All conversations stored locally
+- Respects filesystem permissions
+
+## Future Enhancements
+
+Potential improvements:
+- Configurable import interval via UI
+- Import from multiple sources
+- Batch import optimization
+- Import history/logs viewer
+- Import statistics dashboard
+- Per-project import settings
+
+## Testing
+
+### Manual Test: Add Claude Code Conversation
+```bash
+# 1. Use Claude Code (creates ~/.claude/projects/*/sessions-index.json)
+# 2. Wait up to 30 seconds
+# 3. Check browser - should see new conversation appear
+# 4. Confirm console logs show "[AUTO-IMPORT] Imported X..."
+```
+
+### Manual Test: Force Import
+```javascript
+// In browser console
+await fetch('/gm/api/import/claude-code')
+  .then(r => r.json())
+  .then(d => console.log('Manual import result:', d));
+
+// Then refresh
+await app.fetchConversations();
+app.renderChatHistory();
+```
+
+## Related Files
+
+- `server.js` - Server auto-import implementation
+- `app.js` - Frontend sync handling
+- `database.js` - Query functions
+- `acp-launcher.js` - Claude Code connection
+
+## Changelog
+
+### Version 1.1.0 (Current)
+- ✅ Added automatic server-side importing every 30 seconds
+- ✅ Added WebSocket broadcast for instant updates
+- ✅ Added client-side sync event handler
+- ✅ Integrated with existing periodic sync
+
+### Version 1.0.0 (Previous)
+- Manual import on demand via `/api/import/claude-code`
+- No automatic background importing

package/package.json

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

package/static/app.js

@@ -90,7 +90,13 @@ class GMGUIApp {
     this.settings = { autoScroll: true, connectTimeout: 30000 };
     this.pendingMessages = new Map();
     this.idempotencyKeys = new Map();
-    this.init();
+    
+    // Start async initialization and handle errors
+    this.initPromise = this.init().catch(err => {
+      console.error('[CRITICAL] GMGUIApp.init() failed:', err);
+      console.error('[CRITICAL] Stack:', err.stack);
+      throw err;
+    });
   }
 
   async init() {
@@ -1336,37 +1342,62 @@ function confirmFolderSelection() {
 
 // 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; },
-    async forceRefetch() {
-      console.log('[FORCE] Forcing fetchConversations...');
-      await window.app.fetchConversations();
-      console.log('[FORCE] Conversations loaded:', window.app.conversations.size);
-      window.app.renderChatHistory();
-      console.log('[FORCE] renderChatHistory called');
-      return window.app.conversations.size;
+  try {
+    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');
+    try {
+      window.app = new GMGUIApp();
+      window._app = window.app;
+      console.log('[DEBUG] initializeApp: GMGUIApp constructor completed');
+    } catch (constructorError) {
+      console.error('[ERROR] GMGUIApp constructor failed:', constructorError.message);
+      console.error('[ERROR] Stack:', constructorError.stack);
+      throw constructorError;
+    }
+    
+    // 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; },
+      async forceRefetch() {
+        console.log('[FORCE] Forcing fetchConversations...');
+        await window.app.fetchConversations();
+        console.log('[FORCE] Conversations loaded:', window.app.conversations.size);
+        window.app.renderChatHistory();
+        console.log('[FORCE] renderChatHistory called');
+        return window.app.conversations.size;
+      }
+    };
+    
+    console.log('[DEBUG] initializeApp: GMGUIApp created successfully with', window.app.conversations.size, 'conversations');
+  } catch (error) {
+    console.error('[CRITICAL ERROR] initializeApp failed:', error.message);
+    console.error('[CRITICAL ERROR] Stack trace:', error.stack);
+    
+    // Show error on page
+    const chatList = document.getElementById('chatList');
+    if (chatList) {
+      chatList.innerHTML = `
+        <div style="color: red; padding: 1rem; font-family: monospace; font-size: 0.75rem;">
+          <strong>INITIALIZATION ERROR</strong><br>
+          ${error.message}<br>
+          <br>
+          Check browser console (F12) for details.
+        </div>
+      `;
     }
-  };
-  
-  console.log('[DEBUG] initializeApp: GMGUIApp created successfully');
+  }
 }
 
 if (document.readyState === 'loading') {