agentgui 1.0.39 → 1.0.41
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 +87 -271
- package/package.json +3 -7
- package/server.js +3 -3
- package/stream-handler.js +14 -9
- 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/DELIVERABLES.txt +0 -212
- 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
|
@@ -1,287 +0,0 @@
|
|
|
1
|
-
# State Machine Implementation - Checklist & Reference
|
|
2
|
-
|
|
3
|
-
## ✅ Completed Features
|
|
4
|
-
|
|
5
|
-
### Core State Machine
|
|
6
|
-
- [x] StateManager class with 9 defined states
|
|
7
|
-
- [x] State transition validation
|
|
8
|
-
- [x] Invalid transition guards (throw errors)
|
|
9
|
-
- [x] State history tracking with timestamps
|
|
10
|
-
- [x] Reason/metadata for each transition
|
|
11
|
-
- [x] Automatic 120-second timeout watchdog
|
|
12
|
-
- [x] Promise-based completion API
|
|
13
|
-
- [x] Terminal state detection
|
|
14
|
-
- [x] State history retrieval
|
|
15
|
-
|
|
16
|
-
### Session Management
|
|
17
|
-
- [x] SessionStateStore global registry
|
|
18
|
-
- [x] Session creation with ID tracking
|
|
19
|
-
- [x] Session retrieval and validation
|
|
20
|
-
- [x] Active session filtering
|
|
21
|
-
- [x] Terminal session tracking
|
|
22
|
-
- [x] Automatic cleanup (>1 hour)
|
|
23
|
-
- [x] Diagnostic aggregation
|
|
24
|
-
|
|
25
|
-
### Server Integration
|
|
26
|
-
- [x] Import StateManager in server.js
|
|
27
|
-
- [x] Create global SessionStateStore
|
|
28
|
-
- [x] Rewrite processMessage() to use state machine
|
|
29
|
-
- [x] Add state transitions for each step
|
|
30
|
-
- [x] Implement error handling with state tracking
|
|
31
|
-
- [x] Add getACP() timeout protection (60s)
|
|
32
|
-
- [x] Create /api/diagnostics/sessions endpoint
|
|
33
|
-
- [x] Add comprehensive logging
|
|
34
|
-
|
|
35
|
-
### Database Fixes
|
|
36
|
-
- [x] Fix message content type handling (stringify objects)
|
|
37
|
-
- [x] Fix session response/error serialization
|
|
38
|
-
- [x] Fix event data JSON handling
|
|
39
|
-
- [x] Fix idempotencyKeys type conversion
|
|
40
|
-
|
|
41
|
-
### Documentation
|
|
42
|
-
- [x] StateManager code comments
|
|
43
|
-
- [x] Architecture diagrams
|
|
44
|
-
- [x] Usage examples
|
|
45
|
-
- [x] Monitoring guide
|
|
46
|
-
- [x] Diagnostics explanation
|
|
47
|
-
- [x] Issue diagnosis (ACP hang)
|
|
48
|
-
- [x] Next steps guide
|
|
49
|
-
|
|
50
|
-
---
|
|
51
|
-
|
|
52
|
-
## 📊 State Machine States
|
|
53
|
-
|
|
54
|
-
```
|
|
55
|
-
PENDING
|
|
56
|
-
↓
|
|
57
|
-
ACQUIRING_ACP ← Connect to Claude Code ACP
|
|
58
|
-
↓
|
|
59
|
-
ACP_ACQUIRED ← Connection established
|
|
60
|
-
↓
|
|
61
|
-
SENDING_PROMPT ← Sending prompt to ACP
|
|
62
|
-
↓
|
|
63
|
-
PROCESSING ← Processing response
|
|
64
|
-
↓
|
|
65
|
-
COMPLETED ← ✅ Success
|
|
66
|
-
|
|
67
|
-
ERROR ← ❌ Any step failed (at any point)
|
|
68
|
-
TIMEOUT ← ❌ Exceeded 120s (automatic)
|
|
69
|
-
CANCELLED ← Stopped by user
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
---
|
|
73
|
-
|
|
74
|
-
## 🔍 Diagnostics Endpoint
|
|
75
|
-
|
|
76
|
-
**Endpoint**: `GET /api/diagnostics/sessions`
|
|
77
|
-
|
|
78
|
-
**Response Format**:
|
|
79
|
-
```javascript
|
|
80
|
-
{
|
|
81
|
-
timestamp: ISO 8601 string,
|
|
82
|
-
activeSessions: number,
|
|
83
|
-
terminalSessions: number,
|
|
84
|
-
totalSessions: number,
|
|
85
|
-
active: [
|
|
86
|
-
{
|
|
87
|
-
sessionId: string,
|
|
88
|
-
state: string,
|
|
89
|
-
uptime: milliseconds
|
|
90
|
-
}
|
|
91
|
-
],
|
|
92
|
-
recentTerminal: [
|
|
93
|
-
{
|
|
94
|
-
sessionId: string,
|
|
95
|
-
conversationId: string,
|
|
96
|
-
messageId: string,
|
|
97
|
-
state: 'completed'|'error'|'timeout'|'cancelled',
|
|
98
|
-
duration: '1234ms',
|
|
99
|
-
historyLength: number,
|
|
100
|
-
history: ['0ms: pending (initialized)', ...],
|
|
101
|
-
data: {
|
|
102
|
-
fullTextLength: number,
|
|
103
|
-
blocksCount: number,
|
|
104
|
-
error: null | string,
|
|
105
|
-
hasStackTrace: boolean
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
]
|
|
109
|
-
}
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
---
|
|
113
|
-
|
|
114
|
-
## 🚀 Usage Examples
|
|
115
|
-
|
|
116
|
-
### Create a Session
|
|
117
|
-
```javascript
|
|
118
|
-
const stateManager = sessionStateStore.create(
|
|
119
|
-
sessionId,
|
|
120
|
-
conversationId,
|
|
121
|
-
messageId,
|
|
122
|
-
120000 // timeout in ms
|
|
123
|
-
);
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
### Transition State
|
|
127
|
-
```javascript
|
|
128
|
-
stateManager.transition(StateManager.STATES.ACQUIRING_ACP, {
|
|
129
|
-
reason: 'Starting ACP connection',
|
|
130
|
-
data: {}
|
|
131
|
-
});
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
### Check Current State
|
|
135
|
-
```javascript
|
|
136
|
-
const state = stateManager.getState();
|
|
137
|
-
// 'pending' | 'acquiring_acp' | 'acp_acquired' | ...
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
### Get Full History
|
|
141
|
-
```javascript
|
|
142
|
-
const history = stateManager.getHistory();
|
|
143
|
-
// Array of {state, timestamp, reason, details}
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
### Wait for Completion
|
|
147
|
-
```javascript
|
|
148
|
-
try {
|
|
149
|
-
const result = await stateManager.waitForCompletion();
|
|
150
|
-
console.log(`Success in ${result.data.duration}`);
|
|
151
|
-
} catch (err) {
|
|
152
|
-
console.error(`Failed: ${err.message}`);
|
|
153
|
-
}
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
### Get Diagnostics
|
|
157
|
-
```javascript
|
|
158
|
-
const diag = sessionStateStore.getDiagnostics();
|
|
159
|
-
console.log(`Active: ${diag.activeSessions}`);
|
|
160
|
-
console.log(`Terminal: ${diag.terminalSessions}`);
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
---
|
|
164
|
-
|
|
165
|
-
## 🛡️ Error Handling
|
|
166
|
-
|
|
167
|
-
### Invalid Transition
|
|
168
|
-
```javascript
|
|
169
|
-
// This will throw!
|
|
170
|
-
stateManager.transition(StateManager.STATES.COMPLETED, {});
|
|
171
|
-
// Error: "Invalid state transition: pending → completed. Valid: [acquiring_acp, cancelled]"
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
### Session Not Found
|
|
175
|
-
```javascript
|
|
176
|
-
const manager = sessionStateStore.getOrThrow(sessionId);
|
|
177
|
-
// Throws if sessionId doesn't exist
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
### Timeout
|
|
181
|
-
```javascript
|
|
182
|
-
// After 120 seconds in any non-terminal state:
|
|
183
|
-
// Automatically transitions to TIMEOUT state
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
---
|
|
187
|
-
|
|
188
|
-
## 📝 Logging Output
|
|
189
|
-
|
|
190
|
-
### State Transition Log
|
|
191
|
-
```
|
|
192
|
-
[StateManager] sess-123 transitioned: pending → acquiring_acp (+1ms) | Starting ACP connection
|
|
193
|
-
[StateManager] sess-123 transitioned: acquiring_acp → acp_acquired (+25ms) | ACP connected
|
|
194
|
-
[StateManager] sess-123 transitioned: acp_acquired → sending_prompt (+0ms) | Sending to ACP
|
|
195
|
-
[StateManager] sess-123 transitioned: sending_prompt → processing (+100ms) | Processing response
|
|
196
|
-
[StateManager] sess-123 transitioned: processing → completed (+2145ms) | Response successfully generated
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
### Process Message Log
|
|
200
|
-
```
|
|
201
|
-
[processMessage] Starting: conversationId=conv-123, sessionId=sess-456
|
|
202
|
-
[processMessage] Initial state: pending
|
|
203
|
-
[getACP] Step 1: Connecting to claude-code...
|
|
204
|
-
[getACP] Step 2: Connected, initializing...
|
|
205
|
-
[getACP] Step 3: Initialized, creating session...
|
|
206
|
-
[getACP] ✅ ACP connection ready for claude-code in /config
|
|
207
|
-
[processMessage] Sending prompt to ACP (45 chars)
|
|
208
|
-
[processMessage] ACP returned: stopReason=end_turn, fullText=12345 chars
|
|
209
|
-
[processMessage] ✅ Session completed: 2567ms
|
|
210
|
-
```
|
|
211
|
-
|
|
212
|
-
---
|
|
213
|
-
|
|
214
|
-
## 🔧 Configuration
|
|
215
|
-
|
|
216
|
-
### Timeouts
|
|
217
|
-
- **Session timeout**: 120 seconds (hardcoded)
|
|
218
|
-
- **ACP timeout**: 60 seconds (hardcoded in getACP)
|
|
219
|
-
- **Session cleanup TTL**: 3600000ms (1 hour)
|
|
220
|
-
|
|
221
|
-
### Cleanup Schedule
|
|
222
|
-
- Runs every 10 minutes (600000ms)
|
|
223
|
-
- Removes terminal sessions older than 1 hour
|
|
224
|
-
|
|
225
|
-
### Data Retention
|
|
226
|
-
- Recent terminal sessions: kept in memory indefinitely
|
|
227
|
-
- Cleanup prevents unbounded memory growth
|
|
228
|
-
|
|
229
|
-
---
|
|
230
|
-
|
|
231
|
-
## 🐛 Debugging
|
|
232
|
-
|
|
233
|
-
### See All Active Sessions
|
|
234
|
-
```bash
|
|
235
|
-
curl http://localhost:9899/gm/api/diagnostics/sessions | grep -A 5 "active"
|
|
236
|
-
```
|
|
237
|
-
|
|
238
|
-
### Find Stuck Sessions
|
|
239
|
-
```bash
|
|
240
|
-
curl http://localhost:9899/gm/api/diagnostics/sessions | grep "acquiring_acp"
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
### Get Session History
|
|
244
|
-
```bash
|
|
245
|
-
curl http://localhost:9899/gm/api/diagnostics/sessions | grep -A 20 "recentTerminal"
|
|
246
|
-
```
|
|
247
|
-
|
|
248
|
-
### Follow State Transitions
|
|
249
|
-
```bash
|
|
250
|
-
tail -f server.log | grep "StateManager"
|
|
251
|
-
```
|
|
252
|
-
|
|
253
|
-
### Find Errors
|
|
254
|
-
```bash
|
|
255
|
-
tail -f server.log | grep -E "ERROR|Stack:|❌"
|
|
256
|
-
```
|
|
257
|
-
|
|
258
|
-
---
|
|
259
|
-
|
|
260
|
-
## 📚 Files Modified
|
|
261
|
-
|
|
262
|
-
| File | Changes | Lines |
|
|
263
|
-
|------|---------|-------|
|
|
264
|
-
| state-manager.js | NEW | 350 |
|
|
265
|
-
| server.js | Modified | +300, -80 |
|
|
266
|
-
| database.js | Fixed | +40 |
|
|
267
|
-
| DIAGNOSTICS.md | NEW | 80 |
|
|
268
|
-
| STATE_MACHINE_SUMMARY.md | NEW | 220 |
|
|
269
|
-
|
|
270
|
-
---
|
|
271
|
-
|
|
272
|
-
## ✨ Key Improvements
|
|
273
|
-
|
|
274
|
-
**Before State Machine**:
|
|
275
|
-
- ❌ Fire-and-forget processing
|
|
276
|
-
- ❌ No visibility into failures
|
|
277
|
-
- ❌ Hangs cause no feedback
|
|
278
|
-
- ❌ Hidden race conditions
|
|
279
|
-
- ❌ Impossible to debug
|
|
280
|
-
|
|
281
|
-
**After State Machine**:
|
|
282
|
-
- ✅ Every session tracked
|
|
283
|
-
- ✅ Complete visibility
|
|
284
|
-
- ✅ Immediate timeout detection
|
|
285
|
-
- ✅ Explicit error handling
|
|
286
|
-
- ✅ Full audit trail
|
|
287
|
-
|
package/IMPLEMENTATION_STATUS.md
DELETED
|
@@ -1,189 +0,0 @@
|
|
|
1
|
-
# AgentGUI Implementation Status
|
|
2
|
-
|
|
3
|
-
## ✅ Completed Features
|
|
4
|
-
|
|
5
|
-
### 1. OAuth Authentication
|
|
6
|
-
- ✅ Binary discovery for `claude-code-acp`
|
|
7
|
-
- ✅ Automatic PATH management
|
|
8
|
-
- ✅ Timeout optimization for ACP bridge
|
|
9
|
-
- ✅ Uses local Claude Code credentials (no API key needed)
|
|
10
|
-
|
|
11
|
-
### 2. Response Formatting Infrastructure
|
|
12
|
-
- ✅ ResponseFormatter module for parsing responses
|
|
13
|
-
- ✅ Segment detection (code, headings, text, lists)
|
|
14
|
-
- ✅ Metadata extraction (tools, thinking, tasks, subagents)
|
|
15
|
-
- ✅ Frontend rendering for segments and metadata
|
|
16
|
-
|
|
17
|
-
### 3. HTML/RippleUI System
|
|
18
|
-
- ✅ Enhanced system prompt with detailed HTML instructions
|
|
19
|
-
- ✅ HTMLWrapper module for automatic HTML wrapping
|
|
20
|
-
- ✅ Markdown parsing to HTML conversion
|
|
21
|
-
- ✅ Tailwind CSS styling integration
|
|
22
|
-
|
|
23
|
-
### 4. Frontend Improvements
|
|
24
|
-
- ✅ Enhanced HTML detection (tags + Tailwind classes)
|
|
25
|
-
- ✅ Rich CSS styling for code blocks, metadata, segments
|
|
26
|
-
- ✅ Responsive design for all components
|
|
27
|
-
- ✅ Print-friendly styles
|
|
28
|
-
|
|
29
|
-
### 5. Infrastructure
|
|
30
|
-
- ✅ Hot reload preparation (HotReloadManager module)
|
|
31
|
-
- ✅ Git version control with comprehensive commit history
|
|
32
|
-
- ✅ Port configuration (3000 dev, 9897 production)
|
|
33
|
-
- ✅ Database persistence
|
|
34
|
-
|
|
35
|
-
## 🔄 Partially Implemented
|
|
36
|
-
|
|
37
|
-
### Hot Reload for Node Modules
|
|
38
|
-
- ⚠️ Static files auto-reload: YES (CSS, HTML, JS in browser)
|
|
39
|
-
- ⚠️ Node.js module changes: NO (requires server restart)
|
|
40
|
-
- **Workaround**: Changes to `.js` files in `/config/workspace/agentgui/` require manual server restart
|
|
41
|
-
- **Future**: Implement full ES module reloading
|
|
42
|
-
|
|
43
|
-
## 📊 Current Architecture
|
|
44
|
-
|
|
45
|
-
```
|
|
46
|
-
User → Browser (9897)
|
|
47
|
-
↓
|
|
48
|
-
Server.js (Node.js)
|
|
49
|
-
├→ ACP Pool (connects to claude-code-acp)
|
|
50
|
-
│ └→ OAuth via local credentials
|
|
51
|
-
├→ HTMLWrapper (wraps responses in HTML)
|
|
52
|
-
├→ ResponseFormatter (segments & metadata)
|
|
53
|
-
└→ Database (SQLite)
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
## 🎯 Current Limitations
|
|
57
|
-
|
|
58
|
-
1. **System Prompt Not Fully Enforced**
|
|
59
|
-
- Claude Code's system prompt about HTML responses works partially
|
|
60
|
-
- Plain text responses are now auto-wrapped by HTMLWrapper
|
|
61
|
-
- Result: All responses display as HTML regardless of original format
|
|
62
|
-
|
|
63
|
-
2. **Hot Module Reloading**
|
|
64
|
-
- Static files (CSS, HTML) reload automatically
|
|
65
|
-
- JavaScript/Node modules need manual restart
|
|
66
|
-
- Recommendation: Changes to server logic need restart
|
|
67
|
-
|
|
68
|
-
3. **ACP Skill Injection**
|
|
69
|
-
- `session/skill_inject` not supported by current ACP version
|
|
70
|
-
- Falls back gracefully without error
|
|
71
|
-
- System prompt still injected via context
|
|
72
|
-
|
|
73
|
-
## 📋 Next Steps
|
|
74
|
-
|
|
75
|
-
### For Full HTML Response Enforcement
|
|
76
|
-
1. ✅ Already Done: HTMLWrapper auto-converts plain text to HTML
|
|
77
|
-
2. No further action needed - all responses now display as beautifully formatted HTML
|
|
78
|
-
|
|
79
|
-
### For True Hot Module Reloading
|
|
80
|
-
1. Implement dynamic `import()` for module reloading
|
|
81
|
-
2. Add module-level cache busting
|
|
82
|
-
3. Handle state preservation during reload
|
|
83
|
-
|
|
84
|
-
### For Enhanced Display
|
|
85
|
-
1. Add streaming responses (real-time message display)
|
|
86
|
-
2. Add more sophisticated metadata visualization
|
|
87
|
-
3. Add export/sharing functionality
|
|
88
|
-
|
|
89
|
-
## 🧪 Testing
|
|
90
|
-
|
|
91
|
-
### Test a Message
|
|
92
|
-
```bash
|
|
93
|
-
CONV=$(curl -s -X POST http://localhost:9897/gm/api/conversations \
|
|
94
|
-
-H "Content-Type: application/json" \
|
|
95
|
-
-d '{"agentId": "claude-code", "title": "Test"}' | python3 -c "import sys,json; print(json.load(sys.stdin)['conversation']['id'])")
|
|
96
|
-
|
|
97
|
-
curl -s -X POST "http://localhost:9897/gm/api/conversations/$CONV/messages" \
|
|
98
|
-
-H "Content-Type: application/json" \
|
|
99
|
-
-d '{"agentId": "claude-code", "content": "Your question here", "idempotencyKey": "test-1"}'
|
|
100
|
-
|
|
101
|
-
# Check response after ~30-50 seconds
|
|
102
|
-
curl -s "http://localhost:9897/gm/api/conversations/$CONV/messages" | python3 -m json.tool
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
## 📝 Files Structure
|
|
106
|
-
|
|
107
|
-
```
|
|
108
|
-
agentgui/
|
|
109
|
-
├── server.js # Main HTTP server + WebSocket
|
|
110
|
-
├── acp-launcher.js # ACP connection management + system prompt
|
|
111
|
-
├── database.js # SQLite persistence
|
|
112
|
-
├── response-formatter.js # Response parsing & segmentation
|
|
113
|
-
├── html-wrapper.js # Markdown to HTML conversion
|
|
114
|
-
├── hot-reload-manager.js # Hot reload infrastructure (prepared)
|
|
115
|
-
├── static/
|
|
116
|
-
│ ├── app.js # Frontend logic
|
|
117
|
-
│ ├── index.html # UI template
|
|
118
|
-
│ ├── styles.css # Comprehensive styling
|
|
119
|
-
│ └── theme.js # Theme management
|
|
120
|
-
└── package.json # Dependencies
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
## 🚀 Running the Server
|
|
124
|
-
|
|
125
|
-
```bash
|
|
126
|
-
# Development (port 3000)
|
|
127
|
-
npm start
|
|
128
|
-
|
|
129
|
-
# Production (port 9897)
|
|
130
|
-
PORT=9897 npm start
|
|
131
|
-
|
|
132
|
-
# With hot reload enabled (default)
|
|
133
|
-
PORT=9897 HOT_RELOAD=true npm start
|
|
134
|
-
|
|
135
|
-
# To disable hot reload
|
|
136
|
-
PORT=9897 HOT_RELOAD=false npm start
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
## 💡 Key Implementation Details
|
|
140
|
-
|
|
141
|
-
### HTML Wrapping Flow
|
|
142
|
-
```
|
|
143
|
-
Claude's plain text response
|
|
144
|
-
↓
|
|
145
|
-
HTMLWrapper.wrapResponse()
|
|
146
|
-
↓
|
|
147
|
-
Parse markdown syntax
|
|
148
|
-
↓
|
|
149
|
-
Convert to HTML with Tailwind classes
|
|
150
|
-
↓
|
|
151
|
-
Wrap in container div
|
|
152
|
-
↓
|
|
153
|
-
Store as messageContent.text
|
|
154
|
-
↓
|
|
155
|
-
Frontend detects HTML (starts with <div)
|
|
156
|
-
↓
|
|
157
|
-
Renders with sanitization
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
### Response Structure
|
|
161
|
-
```json
|
|
162
|
-
{
|
|
163
|
-
"id": "msg-xxx",
|
|
164
|
-
"role": "assistant",
|
|
165
|
-
"content": {
|
|
166
|
-
"text": "<div class=\"space-y-4 p-6\">...HTML...</div>",
|
|
167
|
-
"segments": [...],
|
|
168
|
-
"metadata": {...},
|
|
169
|
-
"updateChunks": [...],
|
|
170
|
-
"blocks": [],
|
|
171
|
-
"isHTML": true
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
## ✨ Results
|
|
177
|
-
|
|
178
|
-
- All responses now display as beautiful, styled HTML
|
|
179
|
-
- Code blocks are properly syntax-highlighted
|
|
180
|
-
- Metadata (tools, thinking, tasks) are rich and interactive
|
|
181
|
-
- System runs on port 9897 for production
|
|
182
|
-
- OAuth authentication works seamlessly
|
|
183
|
-
- Database persists conversations and history
|
|
184
|
-
|
|
185
|
-
---
|
|
186
|
-
|
|
187
|
-
**Last Updated**: February 3, 2026
|
|
188
|
-
**Version**: 1.0.16+
|
|
189
|
-
**Status**: Production Ready (with auto-HTML wrapping)
|
package/README.md
DELETED
|
@@ -1,213 +0,0 @@
|
|
|
1
|
-
# GMGUI - Multi-Agent ACP Client
|
|
2
|
-
|
|
3
|
-
A buildless, hot-reloading web client for managing multiple Claude Agent Protocol (ACP) agents with real-time communication via WebSocket and MessagePack.
|
|
4
|
-
|
|
5
|
-
**Status**: ✅ Production Ready | **Version**: 1.0.0 | **License**: MIT
|
|
6
|
-
|
|
7
|
-
## Get Started Now - One Command
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
bunx agentgui
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
That's it. One command starts the server and opens http://localhost:3000/gm/ in your browser.
|
|
14
|
-
|
|
15
|
-
**Works anywhere:** Any system with Bun installed.
|
|
16
|
-
|
|
17
|
-
**Stop anytime:** Press Ctrl+C - clean shutdown.
|
|
18
|
-
|
|
19
|
-
## Features
|
|
20
|
-
|
|
21
|
-
- **Multi-Agent Management**: Connect unlimited ACP agents and switch between them instantly
|
|
22
|
-
- **Real-Time Communication**: WebSocket + MessagePack for efficient bidirectional messaging
|
|
23
|
-
- **Desktop Screenshots**: Capture and share desktop screenshots with agents (via scrot)
|
|
24
|
-
- **File Upload/Download**: Upload files for agents to access, download files from conversations
|
|
25
|
-
- **Modern Responsive UI**: Beautiful interface that works on mobile, tablet, and desktop
|
|
26
|
-
- **Conversation History**: Full message history with timestamps
|
|
27
|
-
- **Zero Build Step**: Pure HTML/CSS/JavaScript - no bundling or transpilation
|
|
28
|
-
- **Minimal Dependencies**: Only 1 production dependency (ws)
|
|
29
|
-
|
|
30
|
-
## How It Works
|
|
31
|
-
|
|
32
|
-
**Chat Interface**
|
|
33
|
-
- Real-time message display with timestamps
|
|
34
|
-
- Send/receive messages with agents
|
|
35
|
-
- Clear chat history
|
|
36
|
-
|
|
37
|
-
**File Management**
|
|
38
|
-
- Upload files for agents to access
|
|
39
|
-
- Download files from conversations
|
|
40
|
-
- Files stored automatically
|
|
41
|
-
|
|
42
|
-
**Desktop Sharing**
|
|
43
|
-
- Capture desktop screenshots
|
|
44
|
-
- Share directly with agents
|
|
45
|
-
|
|
46
|
-
**Agent Management**
|
|
47
|
-
- Add agents by ID and endpoint
|
|
48
|
-
- View connection status
|
|
49
|
-
- Switch between agents
|
|
50
|
-
|
|
51
|
-
**Responsive Design**
|
|
52
|
-
- Works on desktop, tablet, and mobile
|
|
53
|
-
- Touch-friendly interface
|
|
54
|
-
- Optimized for all screen sizes
|
|
55
|
-
|
|
56
|
-
## API Endpoints
|
|
57
|
-
|
|
58
|
-
### Get Agents
|
|
59
|
-
```
|
|
60
|
-
GET /api/agents
|
|
61
|
-
```
|
|
62
|
-
Response: `{"agents": [...]}`
|
|
63
|
-
|
|
64
|
-
### Send Message to Agent
|
|
65
|
-
```
|
|
66
|
-
POST /api/agents/{agentId}
|
|
67
|
-
Content-Type: application/json
|
|
68
|
-
|
|
69
|
-
{"type": "message", "content": "..."}
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
### Upload Files
|
|
73
|
-
```
|
|
74
|
-
POST /api/upload
|
|
75
|
-
Content-Type: multipart/form-data
|
|
76
|
-
|
|
77
|
-
file=@path/to/file.txt
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
### Capture Screenshot
|
|
81
|
-
```
|
|
82
|
-
POST /api/screenshot
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
### Download File
|
|
86
|
-
```
|
|
87
|
-
GET /uploads/{filename}
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
## Configuration
|
|
91
|
-
|
|
92
|
-
### Environment Variables
|
|
93
|
-
- `PORT` (default: 3000) - Server port
|
|
94
|
-
- `UPLOAD_DIR` (default: /tmp/gmgui-conversations) - File storage location
|
|
95
|
-
|
|
96
|
-
### Data Storage
|
|
97
|
-
|
|
98
|
-
**Conversation History**: Stored in `~/.gmgui/data.db` (hidden folder in your home directory)
|
|
99
|
-
- Uses SQLite database for persistent storage
|
|
100
|
-
- Auto-created on first run with proper permissions
|
|
101
|
-
- Contains conversations, messages, sessions, and event history
|
|
102
|
-
- Data persists across runs and restarts
|
|
103
|
-
- Private to current user (mode 0644)
|
|
104
|
-
|
|
105
|
-
**Browser Local Storage**
|
|
106
|
-
- `gmgui-settings` - User preferences and configuration
|
|
107
|
-
|
|
108
|
-
**Why Hidden Folder?**
|
|
109
|
-
Using `~/.gmgui/` follows Unix conventions:
|
|
110
|
-
- Hidden folders (starting with `.`) keep user directories clean
|
|
111
|
-
- Prevents accidental deletion or modification
|
|
112
|
-
- Private by convention - not visible in casual `ls` output
|
|
113
|
-
- Standard practice for application data (`.config`, `.local`, `.cache`)
|
|
114
|
-
|
|
115
|
-
## Architecture
|
|
116
|
-
|
|
117
|
-
### Server (Node.js)
|
|
118
|
-
- HTTP server with static file serving
|
|
119
|
-
- WebSocket server for agent connections
|
|
120
|
-
- File upload/download endpoints
|
|
121
|
-
- Screenshot capture endpoint
|
|
122
|
-
- Agent management
|
|
123
|
-
|
|
124
|
-
### Client (Browser)
|
|
125
|
-
- Real-time message display
|
|
126
|
-
- File management UI
|
|
127
|
-
- Screenshot capture and preview
|
|
128
|
-
- Agent connection management
|
|
129
|
-
- Settings persistence
|
|
130
|
-
|
|
131
|
-
### File Structure
|
|
132
|
-
```
|
|
133
|
-
gmgui/
|
|
134
|
-
├── server.js # HTTP + WebSocket server
|
|
135
|
-
├── database.js # SQLite persistence
|
|
136
|
-
├── acp-launcher.js # Agent management
|
|
137
|
-
├── bin/gmgui.cjs # npm entry point
|
|
138
|
-
├── static/
|
|
139
|
-
│ ├── index.html # Main UI
|
|
140
|
-
│ ├── app.js # Frontend logic
|
|
141
|
-
│ ├── styles.css # Responsive styles
|
|
142
|
-
│ ├── theme.js # Theme management
|
|
143
|
-
│ └── rippleui.css # CSS framework
|
|
144
|
-
├── install.sh # One-liner installer
|
|
145
|
-
├── package.json # Dependencies
|
|
146
|
-
└── README.md # This file
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
## Development
|
|
150
|
-
|
|
151
|
-
### Enable Hot Reload (during development)
|
|
152
|
-
```bash
|
|
153
|
-
npm run dev
|
|
154
|
-
```
|
|
155
|
-
Changes to `static/` files auto-refresh the browser.
|
|
156
|
-
|
|
157
|
-
## Browser Support
|
|
158
|
-
|
|
159
|
-
Works on all modern browsers:
|
|
160
|
-
- Chrome/Edge 63+
|
|
161
|
-
- Firefox 55+
|
|
162
|
-
- Safari 11+
|
|
163
|
-
- Mobile browsers (iOS Safari, Chrome Mobile, etc.)
|
|
164
|
-
|
|
165
|
-
## Performance
|
|
166
|
-
|
|
167
|
-
- **Fast Startup**: ~100ms with Bun
|
|
168
|
-
- **No Build Step**: Source code runs directly
|
|
169
|
-
- **Efficient Messaging**: MessagePack reduces payload size by 50%
|
|
170
|
-
- **Real-time Updates**: <50ms WebSocket latency
|
|
171
|
-
- **Memory Efficient**: ~20MB typical usage
|
|
172
|
-
|
|
173
|
-
## Troubleshooting
|
|
174
|
-
|
|
175
|
-
**Port Already in Use**
|
|
176
|
-
```bash
|
|
177
|
-
PORT=3001 bunx gmgui
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
**Agent Won't Connect**
|
|
181
|
-
- Verify agent endpoint is accessible
|
|
182
|
-
- Check browser console for errors
|
|
183
|
-
- Ensure agent is sending valid ACP messages
|
|
184
|
-
|
|
185
|
-
**Files Not Uploading**
|
|
186
|
-
- Check browser console for errors
|
|
187
|
-
- Verify sufficient disk space available
|
|
188
|
-
|
|
189
|
-
## Security
|
|
190
|
-
|
|
191
|
-
- Path traversal protection on file uploads
|
|
192
|
-
- WebSocket message validation
|
|
193
|
-
- File upload restrictions
|
|
194
|
-
- No sensitive data in logs
|
|
195
|
-
|
|
196
|
-
## License
|
|
197
|
-
|
|
198
|
-
MIT - Free to use, modify, and distribute
|
|
199
|
-
|
|
200
|
-
## Need Help?
|
|
201
|
-
|
|
202
|
-
Open an issue on GitHub: https://github.com/AnEntrypoint/gmgui/issues
|
|
203
|
-
|
|
204
|
-
---
|
|
205
|
-
|
|
206
|
-
**Ready to manage multiple ACP agents?** Run this now:
|
|
207
|
-
|
|
208
|
-
```bash
|
|
209
|
-
curl -fsSL https://raw.githubusercontent.com/AnEntrypoint/gmgui/main/install.sh | bash
|
|
210
|
-
```
|
|
211
|
-
|
|
212
|
-
Then open http://localhost:3000/gm/ in your browser
|
|
213
|
-
# Triggered npm publishing
|