agentgui 1.0.39 → 1.0.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CLAUDE.md +0 -0
- package/acp-launcher.js +14 -51
- package/package.json +1 -1
- package/01-initial-load.png +0 -0
- package/AUTOMATIC_IMPORT.md +0 -284
- package/CONVERSATION_DISPLAY_FIX.md +0 -125
- package/DEBUG_GUIDE.md +0 -136
- package/DIAGNOSTICS.md +0 -61
- package/FINAL_SUMMARY.md +0 -312
- package/IMPLEMENTATION_CHECKLIST.md +0 -287
- package/IMPLEMENTATION_STATUS.md +0 -189
- package/README.md +0 -213
- package/RECENT_UPDATES.md +0 -209
- package/REMOTE_DEBUG_GUIDE.md +0 -225
- package/RESPONSE_ISSUES.md +0 -157
- package/SIDEBAR_FIX_SUMMARY.md +0 -111
- package/STATE_CONSISTENCY_GUARANTEE.md +0 -183
- package/STATE_CONSISTENCY_TEST_INDEX.md +0 -268
- package/STATE_CONSISTENCY_TEST_REPORT.md +0 -256
- package/STATE_MACHINE_SUMMARY.md +0 -172
- package/TEST_README.md +0 -205
- package/TEST_SUMMARY.md +0 -159
- package/test-artifacts/01-window-a-initial.png +0 -0
- package/test-artifacts/01-window-b-initial.png +0 -0
- package/test-artifacts/02-window-a-after-send.png +0 -0
- package/test-artifacts/02-window-b-after-send.png +0 -0
- package/test-artifacts/snapshot-a-1.txt +0 -1
- package/test-artifacts/snapshot-b-1.txt +0 -1
- package/test-state-consistency.cjs +0 -239
- package/test-state-manager.js +0 -55
package/CLAUDE.md
ADDED
|
File without changes
|
package/acp-launcher.js
CHANGED
|
@@ -116,7 +116,6 @@ export default class ACPConnection {
|
|
|
116
116
|
this.pendingRequests = new Map();
|
|
117
117
|
this.sessionId = null;
|
|
118
118
|
this.onUpdate = null;
|
|
119
|
-
this.printMode = false;
|
|
120
119
|
this.cwd = '/config';
|
|
121
120
|
}
|
|
122
121
|
|
|
@@ -140,18 +139,13 @@ export default class ACPConnection {
|
|
|
140
139
|
await Promise.race([acpSetup(), deadline]);
|
|
141
140
|
console.log(`[ACP] Connected via ACP bridge (${agentType})`);
|
|
142
141
|
} catch (acpErr) {
|
|
143
|
-
console.
|
|
144
|
-
console.
|
|
145
|
-
this.printMode = true;
|
|
146
|
-
this.sessionId = 'print-' + Date.now();
|
|
142
|
+
console.error(`[ACP] ❌ FATAL: Bridge failed: ${acpErr.message}`);
|
|
143
|
+
console.error(`[ACP] The ACP bridge is REQUIRED. Please install the bridge for ${agentType}.`);
|
|
147
144
|
if (this.child) {
|
|
148
145
|
try { this.child.kill('SIGTERM'); } catch (_) {}
|
|
149
146
|
this.child = null;
|
|
150
147
|
}
|
|
151
|
-
|
|
152
|
-
clearTimeout(req.timeoutId);
|
|
153
|
-
}
|
|
154
|
-
this.pendingRequests.clear();
|
|
148
|
+
throw acpErr;
|
|
155
149
|
}
|
|
156
150
|
}
|
|
157
151
|
|
|
@@ -294,7 +288,6 @@ export default class ACPConnection {
|
|
|
294
288
|
}
|
|
295
289
|
|
|
296
290
|
async initialize() {
|
|
297
|
-
if (this.printMode) return {};
|
|
298
291
|
return this.sendRequest('initialize', {
|
|
299
292
|
protocolVersion: 1,
|
|
300
293
|
clientCapabilities: { fs: { readTextFile: true, writeTextFile: true } },
|
|
@@ -302,77 +295,47 @@ export default class ACPConnection {
|
|
|
302
295
|
}
|
|
303
296
|
|
|
304
297
|
async newSession(cwd) {
|
|
305
|
-
if (this.printMode) {
|
|
306
|
-
this.cwd = cwd;
|
|
307
|
-
return { sessionId: this.sessionId };
|
|
308
|
-
}
|
|
309
298
|
const result = await this.sendRequest('session/new', { cwd, mcpServers: [] }, 120000);
|
|
310
299
|
this.sessionId = result.sessionId;
|
|
311
300
|
return result;
|
|
312
301
|
}
|
|
313
302
|
|
|
314
303
|
async setSessionMode(modeId) {
|
|
315
|
-
if (this.printMode) return {};
|
|
316
304
|
return this.sendRequest('session/set_mode', { sessionId: this.sessionId, modeId });
|
|
317
305
|
}
|
|
318
306
|
|
|
319
307
|
async injectSkills(additionalContext = '') {
|
|
320
|
-
if (this.printMode) return {};
|
|
321
|
-
|
|
322
308
|
// Combine the system prompt with any additional context
|
|
323
309
|
const systemPrompt = additionalContext ? `${RIPPLEUI_SYSTEM_PROMPT}\n\n---\n\n${additionalContext}` : RIPPLEUI_SYSTEM_PROMPT;
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
});
|
|
331
|
-
return result;
|
|
332
|
-
} catch (e) {
|
|
333
|
-
// skill_inject may not be supported, try alternative methods
|
|
334
|
-
console.log(`[ACP] skill_inject failed (may not be supported): ${e.message}`);
|
|
335
|
-
return null;
|
|
336
|
-
}
|
|
310
|
+
|
|
311
|
+
return this.sendRequest('session/skill_inject', {
|
|
312
|
+
sessionId: this.sessionId,
|
|
313
|
+
skills: [],
|
|
314
|
+
notification: [{ type: 'text', text: systemPrompt }]
|
|
315
|
+
});
|
|
337
316
|
}
|
|
338
317
|
|
|
339
318
|
/**
|
|
340
319
|
* Inject system prompt as initial context
|
|
341
320
|
*/
|
|
342
321
|
async injectSystemContext() {
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
sessionId: this.sessionId,
|
|
349
|
-
context: RIPPLEUI_SYSTEM_PROMPT,
|
|
350
|
-
role: 'system'
|
|
351
|
-
});
|
|
352
|
-
return { success: true };
|
|
353
|
-
} catch (e) {
|
|
354
|
-
// This method may not be supported, silently fail
|
|
355
|
-
return null;
|
|
356
|
-
}
|
|
322
|
+
return this.sendRequest('session/context', {
|
|
323
|
+
sessionId: this.sessionId,
|
|
324
|
+
context: RIPPLEUI_SYSTEM_PROMPT,
|
|
325
|
+
role: 'system'
|
|
326
|
+
});
|
|
357
327
|
}
|
|
358
328
|
|
|
359
329
|
async sendPrompt(prompt) {
|
|
360
|
-
if (this.printMode) return this._sendPrintPrompt(prompt);
|
|
361
330
|
const promptContent = Array.isArray(prompt) ? prompt : [{ type: 'text', text: prompt }];
|
|
362
331
|
return this.sendRequest('session/prompt', { sessionId: this.sessionId, prompt: promptContent }, 300000);
|
|
363
332
|
}
|
|
364
333
|
|
|
365
|
-
async _sendPrintPrompt(prompt) {
|
|
366
|
-
throw new Error('Claude Code uses OAuth and requires the ACP bridge. The fallback to direct API calls is not supported because OAuth tokens cannot be used with the Anthropic API directly. Please ensure claude-code-acp is available in your PATH.');
|
|
367
|
-
}
|
|
368
|
-
|
|
369
334
|
isRunning() {
|
|
370
|
-
if (this.printMode) return true;
|
|
371
335
|
return this.child && !this.child.killed;
|
|
372
336
|
}
|
|
373
337
|
|
|
374
338
|
async terminate() {
|
|
375
|
-
if (this.printMode) { this.printMode = false; return; }
|
|
376
339
|
if (!this.child) return;
|
|
377
340
|
this.child.stdin.end();
|
|
378
341
|
this.child.kill('SIGTERM');
|
package/package.json
CHANGED
package/01-initial-load.png
DELETED
|
Binary file
|
package/AUTOMATIC_IMPORT.md
DELETED
|
@@ -1,284 +0,0 @@
|
|
|
1
|
-
# Automatic Continuous Importing Feature
|
|
2
|
-
|
|
3
|
-
## Overview
|
|
4
|
-
AgentGUI now automatically and continuously imports Claude Code conversations **without requiring any user action**. This ensures conversations are always available and up-to-date.
|
|
5
|
-
|
|
6
|
-
## How It Works
|
|
7
|
-
|
|
8
|
-
### Server-Side (Every 30 Seconds)
|
|
9
|
-
```
|
|
10
|
-
Server startup
|
|
11
|
-
↓
|
|
12
|
-
[IMMEDIATE] Import Claude Code conversations (first run)
|
|
13
|
-
↓
|
|
14
|
-
[EVERY 30 SECONDS] Auto-import new conversations
|
|
15
|
-
↓
|
|
16
|
-
If new conversations found:
|
|
17
|
-
• Add them to database
|
|
18
|
-
• Broadcast 'conversations_updated' event to all connected clients
|
|
19
|
-
• Log: "[AUTO-IMPORT] Imported X new Claude Code conversations"
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
### Frontend-Side
|
|
23
|
-
```
|
|
24
|
-
Page loads
|
|
25
|
-
↓
|
|
26
|
-
[IMMEDIATE] Fetch conversations from API
|
|
27
|
-
↓
|
|
28
|
-
[EVERY 10 SECONDS] Fetch conversations again (as fallback)
|
|
29
|
-
↓
|
|
30
|
-
[ON SYNC EVENT] Receive 'conversations_updated' from server
|
|
31
|
-
↓
|
|
32
|
-
Immediately refresh conversation list
|
|
33
|
-
↓
|
|
34
|
-
Users see new conversations appear in real-time
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
## Key Features
|
|
38
|
-
|
|
39
|
-
✅ **Automatic**: No user action needed
|
|
40
|
-
✅ **Continuous**: Runs every 30 seconds (server) and 10 seconds (client)
|
|
41
|
-
✅ **Real-time**: New conversations appear immediately via WebSocket
|
|
42
|
-
✅ **No Duplicates**: Skips conversations already imported
|
|
43
|
-
✅ **Cross-tab**: Broadcasts via BroadcastChannel API
|
|
44
|
-
✅ **Resilient**: Fallback mechanism if WebSocket fails
|
|
45
|
-
✅ **Logging**: All imports logged for debugging
|
|
46
|
-
|
|
47
|
-
## Where Conversations Come From
|
|
48
|
-
|
|
49
|
-
### Automatically Discovered From:
|
|
50
|
-
1. **Claude Code Projects** (~/.claude/projects/)
|
|
51
|
-
- Scans sessions-index.json files
|
|
52
|
-
- Reads .jsonl message files
|
|
53
|
-
- Imports with "[project] title" format
|
|
54
|
-
|
|
55
|
-
2. **Created in AgentGUI**
|
|
56
|
-
- New conversations created via UI
|
|
57
|
-
- Automatically stored in database
|
|
58
|
-
|
|
59
|
-
## Example Flow
|
|
60
|
-
|
|
61
|
-
### Scenario: User Uses Claude Code, Then Opens AgentGUI
|
|
62
|
-
|
|
63
|
-
```
|
|
64
|
-
11:00:00 - User creates conversation in Claude Code
|
|
65
|
-
11:00:15 - AgentGUI server detects new conversation in ~/.claude/projects/
|
|
66
|
-
11:00:20 - Server imports conversation automatically
|
|
67
|
-
11:00:20 - Server broadcasts 'conversations_updated' event
|
|
68
|
-
11:00:21 - All connected browser tabs receive update
|
|
69
|
-
11:00:21 - Users see new conversation appear in sidebar
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
### Scenario: Multiple Tabs Open
|
|
73
|
-
|
|
74
|
-
```
|
|
75
|
-
Tab 1 opens AgentGUI
|
|
76
|
-
Tab 2 opens AgentGUI (few seconds later)
|
|
77
|
-
|
|
78
|
-
Tab 1 receives 'conversations_updated' from server
|
|
79
|
-
Tab 1 uses BroadcastChannel to notify Tab 2
|
|
80
|
-
Tab 2 also refreshes conversation list
|
|
81
|
-
Both tabs show latest conversations in sync
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
## Server Logs
|
|
85
|
-
|
|
86
|
-
You'll see logs like:
|
|
87
|
-
```
|
|
88
|
-
[AUTO-IMPORT] Imported 2 new Claude Code conversations (42 already exist)
|
|
89
|
-
[AUTO-IMPORT] Imported 1 new Claude Code conversation (43 already exist)
|
|
90
|
-
[AUTO-IMPORT] (nothing new this cycle)
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
## Client Logs
|
|
94
|
-
|
|
95
|
-
In browser console:
|
|
96
|
-
```
|
|
97
|
-
[SYNC] Server imported 3 new conversations, refreshing...
|
|
98
|
-
[DEBUG] Init: Auto-imported Claude Code conversations
|
|
99
|
-
[DEBUG] Loaded conversations, total: 86
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
## Configuration
|
|
103
|
-
|
|
104
|
-
### Import Frequency (Server)
|
|
105
|
-
Current: **30 seconds**
|
|
106
|
-
Location: `server.js` line `setInterval(performAutoImport, 30000);`
|
|
107
|
-
|
|
108
|
-
To change:
|
|
109
|
-
```javascript
|
|
110
|
-
setInterval(performAutoImport, 60000); // 60 seconds
|
|
111
|
-
setInterval(performAutoImport, 5000); // 5 seconds
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
### Refresh Frequency (Client)
|
|
115
|
-
Current: **10 seconds**
|
|
116
|
-
Location: `app.js` line `setInterval(() => { ... }, 10000);`
|
|
117
|
-
|
|
118
|
-
To change:
|
|
119
|
-
```javascript
|
|
120
|
-
}, 60000); // 60 seconds
|
|
121
|
-
}, 5000); // 5 seconds
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
## Data Flow Diagram
|
|
125
|
-
|
|
126
|
-
```
|
|
127
|
-
┌─────────────────────────────────────────────────────┐
|
|
128
|
-
│ Claude Code │
|
|
129
|
-
│ ~/.claude/projects/*/sessions-index.json │
|
|
130
|
-
└─────────────────┬───────────────────────────────────┘
|
|
131
|
-
│ (monitors every 30s)
|
|
132
|
-
↓
|
|
133
|
-
┌─────────────────────────────────────────────────────┐
|
|
134
|
-
│ AgentGUI Server │
|
|
135
|
-
│ • queries.importClaudeCodeConversations() │
|
|
136
|
-
│ • Stores in ~/.gmgui/data.db │
|
|
137
|
-
│ • Broadcasts via WebSocket │
|
|
138
|
-
└──────┬──────────────────────────┬────────────────────┘
|
|
139
|
-
│ │
|
|
140
|
-
│ (WebSocket event) │ (HTTP API)
|
|
141
|
-
↓ ↓
|
|
142
|
-
┌─────────────────────────────────────────────────────┐
|
|
143
|
-
│ Browser (Frontend) │
|
|
144
|
-
│ • Listens on sync WebSocket │
|
|
145
|
-
│ • Receives 'conversations_updated' event │
|
|
146
|
-
│ • Calls fetchConversations() │
|
|
147
|
-
│ • Calls renderChatHistory() │
|
|
148
|
-
└──────┬──────────────────────────────────────────────┘
|
|
149
|
-
│
|
|
150
|
-
↓
|
|
151
|
-
┌─────────────────────────────────────────────────────┐
|
|
152
|
-
│ Chat Sidebar │
|
|
153
|
-
│ • Displays conversation list │
|
|
154
|
-
│ • User can click to view conversation │
|
|
155
|
-
└─────────────────────────────────────────────────────┘
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
## Troubleshooting
|
|
159
|
-
|
|
160
|
-
### Conversations Not Appearing
|
|
161
|
-
|
|
162
|
-
**Check 1: Server Auto-Import**
|
|
163
|
-
```bash
|
|
164
|
-
# Look for these logs in server output
|
|
165
|
-
grep "\[AUTO-IMPORT\]" server.log
|
|
166
|
-
|
|
167
|
-
# If no logs, auto-import might not be running
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
**Check 2: Claude Code Availability**
|
|
171
|
-
```bash
|
|
172
|
-
# Check if Claude Code projects exist
|
|
173
|
-
ls -la ~/.claude/projects/
|
|
174
|
-
|
|
175
|
-
# Count projects with conversations
|
|
176
|
-
find ~/.claude/projects -name "sessions-index.json" | wc -l
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
**Check 3: Browser Sync**
|
|
180
|
-
```javascript
|
|
181
|
-
// In browser console
|
|
182
|
-
// Check if WebSocket is connected
|
|
183
|
-
console.log('WebSocket state:', app.syncWs.ws?.readyState);
|
|
184
|
-
|
|
185
|
-
// Try manual refresh
|
|
186
|
-
await app.fetchConversations();
|
|
187
|
-
app.renderChatHistory();
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
**Check 4: Database**
|
|
191
|
-
```bash
|
|
192
|
-
# Check total conversations in DB
|
|
193
|
-
node -e "
|
|
194
|
-
const DB = require('better-sqlite3');
|
|
195
|
-
const db = new DB(process.env.HOME + '/.gmgui/data.db');
|
|
196
|
-
const count = db.prepare('SELECT COUNT(*) as c FROM conversations').get();
|
|
197
|
-
console.log('Database has:', count.c, 'conversations');
|
|
198
|
-
db.close();
|
|
199
|
-
"
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
### Too Many Import Logs
|
|
203
|
-
|
|
204
|
-
If server logs are too verbose:
|
|
205
|
-
1. Increase `setInterval` time (30000 → 60000 or more)
|
|
206
|
-
2. Add log level filtering
|
|
207
|
-
|
|
208
|
-
### Conversations Take Too Long to Appear
|
|
209
|
-
|
|
210
|
-
If new conversations take > 1 minute:
|
|
211
|
-
1. Check server auto-import interval (default 30s)
|
|
212
|
-
2. Check client refresh interval (default 10s)
|
|
213
|
-
3. Check network connectivity
|
|
214
|
-
4. Check browser console for errors
|
|
215
|
-
|
|
216
|
-
## Performance Considerations
|
|
217
|
-
|
|
218
|
-
### Import Impact
|
|
219
|
-
- **Minimal**: Import skips existing conversations
|
|
220
|
-
- **Fast**: Only processes new conversations
|
|
221
|
-
- **Efficient**: Uses database transactions
|
|
222
|
-
|
|
223
|
-
### Client Impact
|
|
224
|
-
- **WebSocket**: Real-time updates, low bandwidth
|
|
225
|
-
- **Polling**: Every 10 seconds, minimal traffic
|
|
226
|
-
- **Rendering**: Only updates when conversations change
|
|
227
|
-
|
|
228
|
-
## Security Notes
|
|
229
|
-
|
|
230
|
-
- Only imports from user's local `.claude/projects/`
|
|
231
|
-
- No external network access needed
|
|
232
|
-
- All conversations stored locally
|
|
233
|
-
- Respects filesystem permissions
|
|
234
|
-
|
|
235
|
-
## Future Enhancements
|
|
236
|
-
|
|
237
|
-
Potential improvements:
|
|
238
|
-
- Configurable import interval via UI
|
|
239
|
-
- Import from multiple sources
|
|
240
|
-
- Batch import optimization
|
|
241
|
-
- Import history/logs viewer
|
|
242
|
-
- Import statistics dashboard
|
|
243
|
-
- Per-project import settings
|
|
244
|
-
|
|
245
|
-
## Testing
|
|
246
|
-
|
|
247
|
-
### Manual Test: Add Claude Code Conversation
|
|
248
|
-
```bash
|
|
249
|
-
# 1. Use Claude Code (creates ~/.claude/projects/*/sessions-index.json)
|
|
250
|
-
# 2. Wait up to 30 seconds
|
|
251
|
-
# 3. Check browser - should see new conversation appear
|
|
252
|
-
# 4. Confirm console logs show "[AUTO-IMPORT] Imported X..."
|
|
253
|
-
```
|
|
254
|
-
|
|
255
|
-
### Manual Test: Force Import
|
|
256
|
-
```javascript
|
|
257
|
-
// In browser console
|
|
258
|
-
await fetch('/gm/api/import/claude-code')
|
|
259
|
-
.then(r => r.json())
|
|
260
|
-
.then(d => console.log('Manual import result:', d));
|
|
261
|
-
|
|
262
|
-
// Then refresh
|
|
263
|
-
await app.fetchConversations();
|
|
264
|
-
app.renderChatHistory();
|
|
265
|
-
```
|
|
266
|
-
|
|
267
|
-
## Related Files
|
|
268
|
-
|
|
269
|
-
- `server.js` - Server auto-import implementation
|
|
270
|
-
- `app.js` - Frontend sync handling
|
|
271
|
-
- `database.js` - Query functions
|
|
272
|
-
- `acp-launcher.js` - Claude Code connection
|
|
273
|
-
|
|
274
|
-
## Changelog
|
|
275
|
-
|
|
276
|
-
### Version 1.1.0 (Current)
|
|
277
|
-
- ✅ Added automatic server-side importing every 30 seconds
|
|
278
|
-
- ✅ Added WebSocket broadcast for instant updates
|
|
279
|
-
- ✅ Added client-side sync event handler
|
|
280
|
-
- ✅ Integrated with existing periodic sync
|
|
281
|
-
|
|
282
|
-
### Version 1.0.0 (Previous)
|
|
283
|
-
- Manual import on demand via `/api/import/claude-code`
|
|
284
|
-
- No automatic background importing
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
# Conversation Display Issue
|
|
2
|
-
|
|
3
|
-
## Problem
|
|
4
|
-
Imported Claude Code conversations are not visible in the UI when opening the application, even though they exist in the database (83 conversations found).
|
|
5
|
-
|
|
6
|
-
## Root Cause Analysis
|
|
7
|
-
|
|
8
|
-
Possible issues:
|
|
9
|
-
1. **Conversations not loading on page load** - fetchConversations() may fail silently
|
|
10
|
-
2. **Rendering issue** - chatList element may not be rendering properly
|
|
11
|
-
3. **CSS hiding** - Conversations may be present but hidden (display:none, opacity:0)
|
|
12
|
-
4. **Empty state** - renderChatHistory() shows "No chats yet" because this.conversations is empty
|
|
13
|
-
5. **Filter/agent selection** - Conversations filtered by agent selection not matching
|
|
14
|
-
|
|
15
|
-
## Investigation Steps
|
|
16
|
-
|
|
17
|
-
### Check 1: Network Request
|
|
18
|
-
- Open browser DevTools (F12)
|
|
19
|
-
- Network tab: Look for `/api/conversations` request
|
|
20
|
-
- Should return 83 conversations with agent IDs
|
|
21
|
-
|
|
22
|
-
### Check 2: Console Errors
|
|
23
|
-
- Console tab: Look for any JavaScript errors
|
|
24
|
-
- Look for "fetchConversations:" logs
|
|
25
|
-
|
|
26
|
-
### Check 3: DOM Elements
|
|
27
|
-
- Elements tab: Inspect #chatList
|
|
28
|
-
- Check if it has children
|
|
29
|
-
- Check CSS display property (should be visible)
|
|
30
|
-
|
|
31
|
-
### Check 4: Data Binding
|
|
32
|
-
- Console: `app.conversations.size` - should show 83
|
|
33
|
-
- Console: `app.conversations` - should contain conversation objects
|
|
34
|
-
|
|
35
|
-
## Solution Areas
|
|
36
|
-
|
|
37
|
-
### Frontend (static/app.js)
|
|
38
|
-
|
|
39
|
-
1. **Add logging to fetchConversations()**
|
|
40
|
-
- Log when fetch starts/completes
|
|
41
|
-
- Log number of conversations received
|
|
42
|
-
- Log any errors
|
|
43
|
-
|
|
44
|
-
2. **Add logging to renderChatHistory()**
|
|
45
|
-
- Log conversations.size
|
|
46
|
-
- Log if condition triggers "No chats yet"
|
|
47
|
-
|
|
48
|
-
3. **Force initial render**
|
|
49
|
-
- Ensure renderChatHistory() is called after fetchConversations()
|
|
50
|
-
- Add retry logic if conversations empty on first load
|
|
51
|
-
|
|
52
|
-
### Server (server.js)
|
|
53
|
-
|
|
54
|
-
1. **Verify /api/conversations endpoint**
|
|
55
|
-
- Check it returns all conversations
|
|
56
|
-
- Verify no filtering happening
|
|
57
|
-
- Check response format
|
|
58
|
-
|
|
59
|
-
2. **Verify import endpoint**
|
|
60
|
-
- Check /api/import/claude-code works
|
|
61
|
-
- Ensure conversations are created with proper agentId
|
|
62
|
-
|
|
63
|
-
## Implementation
|
|
64
|
-
|
|
65
|
-
Add debug logging to identify where conversations are lost:
|
|
66
|
-
|
|
67
|
-
```javascript
|
|
68
|
-
async fetchConversations() {
|
|
69
|
-
try {
|
|
70
|
-
const res = await fetch(BASE_URL + '/api/conversations');
|
|
71
|
-
const data = await res.json();
|
|
72
|
-
console.log('fetchConversations response:', data);
|
|
73
|
-
console.log('Conversations count:', data.conversations?.length);
|
|
74
|
-
|
|
75
|
-
if (data.conversations) {
|
|
76
|
-
this.conversations.clear();
|
|
77
|
-
data.conversations.forEach(c => {
|
|
78
|
-
console.log('Adding conversation:', c.id, c.title);
|
|
79
|
-
this.conversations.set(c.id, c);
|
|
80
|
-
});
|
|
81
|
-
console.log('Final conversations.size:', this.conversations.size);
|
|
82
|
-
}
|
|
83
|
-
} catch (e) {
|
|
84
|
-
console.error('fetchConversations error:', e);
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
renderChatHistory() {
|
|
89
|
-
const list = document.getElementById('chatList');
|
|
90
|
-
if (!list) {
|
|
91
|
-
console.error('chatList element not found!');
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
console.log('renderChatHistory - conversations.size:', this.conversations.size);
|
|
96
|
-
|
|
97
|
-
if (this.conversations.size === 0) {
|
|
98
|
-
console.warn('No conversations to display');
|
|
99
|
-
list.innerHTML = '<p>No chats yet</p>';
|
|
100
|
-
return;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
// ... rest of rendering
|
|
104
|
-
}
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
## Expected Behavior
|
|
108
|
-
|
|
109
|
-
1. Page loads
|
|
110
|
-
2. fetchConversations() retrieves 83 conversations from API
|
|
111
|
-
3. conversations Map populated with all 83 items
|
|
112
|
-
4. renderChatHistory() iterates over conversations
|
|
113
|
-
5. Chat list displays 83 conversation items
|
|
114
|
-
6. User can click to view any conversation
|
|
115
|
-
|
|
116
|
-
## Testing
|
|
117
|
-
|
|
118
|
-
```bash
|
|
119
|
-
# Verify conversations in database
|
|
120
|
-
curl http://localhost:9897/gm/api/conversations | python3 -m json.tool | grep -c '"id"'
|
|
121
|
-
|
|
122
|
-
# Verify a conversation has messages (pick one)
|
|
123
|
-
curl http://localhost:9897/gm/api/conversations/CONV_ID/messages
|
|
124
|
-
```
|
|
125
|
-
|
package/DEBUG_GUIDE.md
DELETED
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
# Debug Guide - Conversation Display Issue
|
|
2
|
-
|
|
3
|
-
## Problem
|
|
4
|
-
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.
|
|
5
|
-
|
|
6
|
-
## API Status - ✅ VERIFIED
|
|
7
|
-
- Server is running on `http://localhost:9897`
|
|
8
|
-
- API endpoint `/api/conversations` returns 83 conversations
|
|
9
|
-
- Response structure is correct with proper ID, agentId, title, created_at, updated_at, status fields
|
|
10
|
-
|
|
11
|
-
## Debug Logging Added
|
|
12
|
-
We've added comprehensive debug logging to trace the initialization flow. The logging will help identify where conversations are being lost.
|
|
13
|
-
|
|
14
|
-
### Enhanced Logging Points:
|
|
15
|
-
1. **Init sequence** - Logs each step of initialization
|
|
16
|
-
2. **fetchConversations** - Logs API request, response status, data received
|
|
17
|
-
3. **renderAll** - Logs conversation count before rendering
|
|
18
|
-
4. **renderChatHistory** - Logs final conversation count and whether empty state is shown
|
|
19
|
-
|
|
20
|
-
## How to Debug
|
|
21
|
-
|
|
22
|
-
### Step 1: Open the Application
|
|
23
|
-
1. Open your web browser
|
|
24
|
-
2. Navigate to: `http://localhost:9897/gm/`
|
|
25
|
-
3. Press **F12** to open Developer Tools
|
|
26
|
-
4. Go to the **Console** tab
|
|
27
|
-
|
|
28
|
-
### Step 2: Look for Debug Logs
|
|
29
|
-
Watch for logs starting with `[DEBUG]`. You should see:
|
|
30
|
-
|
|
31
|
-
```
|
|
32
|
-
[DEBUG] Init: Starting initialization
|
|
33
|
-
[DEBUG] Init: Fetched home
|
|
34
|
-
[DEBUG] Init: Fetched agents, count: X
|
|
35
|
-
[DEBUG] Init: Auto-imported Claude Code conversations
|
|
36
|
-
[DEBUG] fetchConversations: Starting fetch from http://localhost:9897/gm/api/conversations
|
|
37
|
-
[DEBUG] fetchConversations: Response status: 200
|
|
38
|
-
[DEBUG] fetchConversations response count: 83
|
|
39
|
-
[DEBUG] fetchConversations response data: {...}
|
|
40
|
-
[DEBUG] fetchConversations: Cleared conversations map
|
|
41
|
-
[DEBUG] Loaded conversations, total: 83
|
|
42
|
-
[DEBUG] First few conversation IDs: [...]
|
|
43
|
-
[DEBUG] Init: Fetched conversations, count: 83
|
|
44
|
-
[DEBUG] Init: About to renderAll with 83 conversations
|
|
45
|
-
[DEBUG] renderAll: Called with 83 conversations
|
|
46
|
-
[DEBUG] renderChatHistory - conversations.size: 83
|
|
47
|
-
[DEBUG] renderChatHistory - sorted conversations count: 83
|
|
48
|
-
[DEBUG] Init: renderAll completed
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
### Step 3: Analyze the Logs
|
|
52
|
-
|
|
53
|
-
Check these specific values:
|
|
54
|
-
|
|
55
|
-
| Log | Expected | Issue If Different |
|
|
56
|
-
|-----|----------|-------------------|
|
|
57
|
-
| `response count: 83` | 83 | API not returning conversations |
|
|
58
|
-
| `Loaded conversations, total: 83` | 83 | Data not being added to map |
|
|
59
|
-
| `About to renderAll with 83 conversations` | 83 | Conversations lost between fetch and render |
|
|
60
|
-
| `renderChatHistory - conversations.size: 83` | 83 | Size changes between renderAll and renderChatHistory |
|
|
61
|
-
| `No conversations to display - showing empty state` | Should NOT appear | renderChatHistory shows empty when size > 0 |
|
|
62
|
-
|
|
63
|
-
### Step 4: Check Browser State
|
|
64
|
-
In the Console, type:
|
|
65
|
-
```javascript
|
|
66
|
-
// Check if conversations were loaded into the app
|
|
67
|
-
app.conversations.size
|
|
68
|
-
|
|
69
|
-
// Check the actual conversations
|
|
70
|
-
app.conversations
|
|
71
|
-
|
|
72
|
-
// Check first conversation
|
|
73
|
-
Array.from(app.conversations.values())[0]
|
|
74
|
-
|
|
75
|
-
// Check if BASE_URL is correct
|
|
76
|
-
BASE_URL
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
### Step 5: Check Network Tab
|
|
80
|
-
1. Go to **Network** tab in DevTools
|
|
81
|
-
2. Filter for `/api/conversations` request
|
|
82
|
-
3. Check:
|
|
83
|
-
- Request Status: Should be 200
|
|
84
|
-
- Response body: Should contain array of 83 conversations
|
|
85
|
-
- Response headers: Should show correct content-type
|
|
86
|
-
|
|
87
|
-
## Possible Issues and Solutions
|
|
88
|
-
|
|
89
|
-
### Issue 1: API returns 0 conversations
|
|
90
|
-
**Symptom**: `response count: 0`
|
|
91
|
-
- Check: Is the database populated?
|
|
92
|
-
- Command: `sqlite3 /config/workspace/agentgui/data/gmgui.db "SELECT COUNT(*) FROM conversations;"`
|
|
93
|
-
- Fix: Import conversations or check database connection
|
|
94
|
-
|
|
95
|
-
### Issue 2: API returns data but conversations.size is 0
|
|
96
|
-
**Symptom**: `response count: 83` but `Loaded conversations, total: 0`
|
|
97
|
-
- Likely cause: Data structure mismatch or forEach not working
|
|
98
|
-
- Fix: Check if data.conversations is an array
|
|
99
|
-
- Check: Are the conversation objects being created properly?
|
|
100
|
-
|
|
101
|
-
### Issue 3: Conversations loaded but renderChatHistory shows empty
|
|
102
|
-
**Symptom**: `About to renderAll with 83 conversations` but `No conversations to display`
|
|
103
|
-
- Likely cause: Something clears conversations.map between renderAll and renderChatHistory
|
|
104
|
-
- Check: Look for any handleSyncEvent calls that might clear or reset conversations
|
|
105
|
-
- Fix: Add logging to sync event handlers
|
|
106
|
-
|
|
107
|
-
### Issue 4: Conversations load but don't display in UI
|
|
108
|
-
**Symptom**: All debug logs show 83 conversations, but chat list still shows "No chats yet"
|
|
109
|
-
- Likely cause: CSS hiding, DOM structure issue, or rendering issue
|
|
110
|
-
- Check: Look at HTML element with id="chatList" - is it hidden?
|
|
111
|
-
- Check: Are chat items being created in the DOM?
|
|
112
|
-
- Solution: Open Elements tab and expand chatList to see if items exist
|
|
113
|
-
|
|
114
|
-
## Next Steps After Debugging
|
|
115
|
-
|
|
116
|
-
1. **Identify the root cause** using the logs above
|
|
117
|
-
2. **Document which log shows the problem**
|
|
118
|
-
3. **Implement the appropriate fix**:
|
|
119
|
-
- If API issue: Fix server endpoint
|
|
120
|
-
- If data structure issue: Fix response parsing
|
|
121
|
-
- If sync issue: Fix sync event handlers
|
|
122
|
-
- If UI issue: Fix CSS or rendering logic
|
|
123
|
-
4. **Verify fix** with the debug logs
|
|
124
|
-
5. **Commit changes** to git
|
|
125
|
-
|
|
126
|
-
## File Locations
|
|
127
|
-
- Frontend code: `/config/workspace/agentgui/static/app.js`
|
|
128
|
-
- Server code: `/config/workspace/agentgui/server.js`
|
|
129
|
-
- Database: `/config/workspace/agentgui/data/gmgui.db`
|
|
130
|
-
- API responses return from: `/api/conversations` endpoint in server.js
|
|
131
|
-
|
|
132
|
-
## Important Notes
|
|
133
|
-
- Hot reload is enabled for CSS/HTML/frontend JS
|
|
134
|
-
- Debug logs will auto-reload in browser when app.js changes
|
|
135
|
-
- Check DevTools console IMMEDIATELY after loading the page
|
|
136
|
-
- Some logs may scroll off - use DevTools console filter to search for `[DEBUG]`
|