agentgui 1.0.577 → 1.0.579

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.
Files changed (3) hide show
  1. package/README.md +86 -16
  2. package/docs/index.html +474 -167
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,18 +1,24 @@
1
1
  # AgentGUI
2
2
 
3
+ [![npm version](https://img.shields.io/npm/v/agentgui?color=brightgreen)](https://www.npmjs.com/package/agentgui)
4
+ [![npm downloads](https://img.shields.io/npm/dw/agentgui?color=brightgreen)](https://www.npmjs.com/package/agentgui)
5
+ [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
6
+ [![GitHub Pages](https://img.shields.io/badge/docs-live-blue)](https://anentrypoint.github.io/agentgui/)
7
+
3
8
  Multi-agent GUI client for AI coding agents (Claude Code, Gemini CLI, OpenCode, Goose, etc.) with real-time streaming, WebSocket sync, and SQLite persistence.
4
9
 
5
10
  ![Main Interface](docs/screenshot-main.png)
6
11
 
7
12
  ## Features
8
13
 
9
- - **Real-time Agent Execution** - Watch agents work with streaming output and tool calls
10
- - **Multi-Agent Support** - Switch between Claude Code, Gemini CLI, OpenCode, Kilo, and more
11
- - **Session Management** - Full conversation history with SQLite persistence
12
- - **WebSocket Sync** - Live updates across multiple clients
13
- - **Voice Integration** - Speech-to-text and text-to-speech support
14
- - **Tool Management** - Install and update agent plugins from the UI
15
- - **File Browser** - Explore and manage conversation files
14
+ - 🤖 **Multi-Agent Support** - Switch between Claude Code, Gemini CLI, OpenCode, Kilo, and more from one interface
15
+ - ⚡ **Real-Time Streaming** - Watch agents work with live streaming output and tool calls via WebSocket
16
+ - 💾 **Session Persistence** - Full conversation history stored in SQLite with WAL mode
17
+ - 🔄 **WebSocket Sync** - Live updates across multiple clients with automatic reconnection
18
+ - 🎤 **Voice Integration** - Speech-to-text and text-to-speech powered by Hugging Face Transformers (no API keys)
19
+ - 🛠️ **Tool Management** - Install and update agent plugins directly from the UI
20
+ - 📁 **File Browser** - Drag-and-drop uploads, direct file editing, and context-aware operations
21
+ - 🔌 **Developer Friendly** - Hot reload, REST API, WebSocket endpoints, and extensible plugin system
16
22
 
17
23
  ### Screenshots
18
24
 
@@ -30,7 +36,17 @@ Multi-agent GUI client for AI coding agents (Claude Code, Gemini CLI, OpenCode,
30
36
 
31
37
  ## Quick Start
32
38
 
39
+ ### Using npx (Recommended)
40
+
41
+ ```bash
42
+ npx agentgui
43
+ ```
44
+
45
+ ### Manual Installation
46
+
33
47
  ```bash
48
+ git clone https://github.com/AnEntrypoint/agentgui.git
49
+ cd agentgui
34
50
  npm install
35
51
  npm run dev
36
52
  ```
@@ -39,9 +55,11 @@ Server starts on `http://localhost:3000/gm/`
39
55
 
40
56
  ## System Requirements
41
57
 
42
- - Node.js 18+
58
+ - Node.js 18+ (LTS recommended)
43
59
  - SQLite 3
44
60
  - Modern browser (Chrome, Firefox, Safari, Edge)
61
+ - At least one AI coding agent installed (Claude Code, Gemini CLI, etc.)
62
+ - Optional: Python 3.9+ for text-to-speech on Windows
45
63
 
46
64
  ## Architecture
47
65
 
@@ -62,37 +80,89 @@ static/js/websocket-manager.js WebSocket connection handling
62
80
  ### Key Details
63
81
 
64
82
  - Agent discovery scans PATH for known CLI binaries at startup
65
- - Database lives at `~/.gmgui/data.db`
66
- - WebSocket endpoint at `/gm/sync`
67
- - ACP tools (OpenCode, Kilo) auto-launch as HTTP servers on startup
83
+ - Database lives at `~/.gmgui/data.db` (WAL mode for concurrent access)
84
+ - WebSocket endpoint at `/gm/sync` for real-time updates
85
+ - ACP tools (OpenCode, Kilo) auto-launch as HTTP servers on startup with health checks
68
86
 
69
87
  ## REST API
70
88
 
71
89
  All routes prefixed with `/gm`:
72
90
 
91
+ **Conversations:**
73
92
  - `GET /api/conversations` - List conversations
74
93
  - `POST /api/conversations` - Create conversation
75
94
  - `GET /api/conversations/:id` - Get conversation with streaming status
76
95
  - `POST /api/conversations/:id/messages` - Send message
96
+ - `DELETE /api/conversations/:id` - Delete conversation
97
+
98
+ **Agents & Tools:**
77
99
  - `GET /api/agents` - List discovered agents
78
100
  - `GET /api/tools` - List detected tools with installation status
79
101
  - `POST /api/tools/:id/install` - Install tool
80
- - `POST /api/stt` - Speech-to-text
81
- - `POST /api/tts` - Text-to-speech
102
+ - `POST /api/tools/:id/update` - Update tool
103
+
104
+ **Speech:**
105
+ - `POST /api/stt` - Speech-to-text (raw audio input)
106
+ - `POST /api/tts` - Text-to-speech (returns audio)
107
+ - `GET /api/speech-status` - Check model download progress
108
+
109
+ **WebSocket:** `/gm/sync` - Subscribe to conversation/session updates with events like `streaming_start`, `streaming_progress`, `streaming_complete`
82
110
 
83
111
  ## Environment Variables
84
112
 
85
113
  - `PORT` - Server port (default: 3000)
86
114
  - `BASE_URL` - URL prefix (default: /gm)
87
115
  - `STARTUP_CWD` - Working directory passed to agents
116
+ - `HOT_RELOAD` - Enable watch mode (default: true)
117
+
118
+ ## Troubleshooting
119
+
120
+ ### Server Won't Start
121
+ - Check if port 3000 is in use: `lsof -i :3000` (macOS/Linux) or `netstat -ano | findstr :3000` (Windows)
122
+ - Try a different port: `PORT=4000 npm run dev`
123
+
124
+ ### Agent Not Detected
125
+ - Verify agent is installed: `which claude` / `where claude`
126
+ - Check PATH includes agent binary location
127
+ - Restart server after installing new agents
128
+
129
+ ### WebSocket Connection Failed
130
+ - Verify BASE_URL matches your deployment
131
+ - Check browser console for errors
132
+ - Ensure no firewall blocking WebSocket connections
133
+
134
+ ### Speech Models Not Downloading
135
+ - Check internet connection and firewall
136
+ - Verify `~/.gmgui/models/` is writable
137
+ - Monitor progress via `/api/speech-status` endpoint
88
138
 
89
139
  ## Development
90
140
 
91
141
  ```bash
92
- npm run dev # Start with watch mode
93
- npm start # Production mode
142
+ npm run dev # Start with watch mode and hot reload
143
+ npm start # Production mode (no watch)
144
+ npm test # Run tests (if available)
94
145
  ```
95
146
 
147
+ Hot reload is enabled by default. File changes trigger automatic restart without losing state.
148
+
149
+ ## Contributing
150
+
151
+ Contributions welcome! Please:
152
+
153
+ 1. Fork the repository
154
+ 2. Create a feature branch (`git checkout -b feature/amazing-feature`)
155
+ 3. Commit your changes (`git commit -m 'Add amazing feature'`)
156
+ 4. Push to the branch (`git push origin feature/amazing-feature`)
157
+ 5. Open a Pull Request
158
+
159
+ ## Links
160
+
161
+ - **GitHub:** https://github.com/AnEntrypoint/agentgui
162
+ - **npm:** https://www.npmjs.com/package/agentgui
163
+ - **Documentation:** https://anentrypoint.github.io/agentgui/
164
+ - **Issues:** https://github.com/AnEntrypoint/agentgui/issues
165
+
96
166
  ## License
97
167
 
98
- MIT
168
+ MIT © [AnEntrypoint](https://github.com/AnEntrypoint)
package/docs/index.html CHANGED
@@ -3,258 +3,565 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AgentGUI - Multi-Agent GUI Client</title>
6
+ <meta name="description" content="AgentGUI - Multi-agent GUI for AI coding assistants. Real-time streaming interface for Claude Code, Gemini CLI, OpenCode, and more.">
7
+ <title>AgentGUI - Multi-Agent GUI for AI Coding Assistants</title>
8
+
7
9
  <style>
8
- * { margin: 0; padding: 0; box-sizing: border-box; }
9
-
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ :root {
17
+ --primary: #3b82f6;
18
+ --primary-dark: #1e40af;
19
+ --secondary: #10b981;
20
+ --bg-dark: #111827;
21
+ --bg-darker: #0f172a;
22
+ --text-light: #f9fafb;
23
+ --text-gray: #9ca3af;
24
+ --border: #374151;
25
+ }
26
+
10
27
  body {
11
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
28
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
12
29
  line-height: 1.6;
13
30
  color: #333;
14
- background: #f9fafb;
31
+ background: #ffffff;
15
32
  }
16
-
33
+
34
+ /* Hero Section */
17
35
  .hero {
18
36
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
37
  color: white;
20
- padding: 4rem 2rem;
38
+ padding: 120px 20px 80px;
21
39
  text-align: center;
40
+ position: relative;
41
+ overflow: hidden;
42
+ }
43
+
44
+ .hero::before {
45
+ content: '';
46
+ position: absolute;
47
+ top: 0;
48
+ left: 0;
49
+ right: 0;
50
+ bottom: 0;
51
+ background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path fill="%23ffffff" fill-opacity="0.1" d="M0,0 L1200,0 L1200,60 Q600,120 0,60 Z"/></svg>') no-repeat bottom;
52
+ background-size: cover;
53
+ }
54
+
55
+ .hero-content {
56
+ max-width: 900px;
57
+ margin: 0 auto;
58
+ position: relative;
59
+ z-index: 1;
22
60
  }
23
-
61
+
24
62
  .hero h1 {
25
- font-size: 3rem;
26
- margin-bottom: 1rem;
27
- font-weight: 700;
63
+ font-size: 3.5rem;
64
+ font-weight: 800;
65
+ margin-bottom: 1.5rem;
66
+ line-height: 1.2;
28
67
  }
29
-
68
+
30
69
  .hero p {
31
- font-size: 1.25rem;
32
- opacity: 0.9;
33
- max-width: 600px;
34
- margin: 0 auto 2rem;
70
+ font-size: 1.3rem;
71
+ margin-bottom: 2.5rem;
72
+ opacity: 0.95;
35
73
  }
36
-
37
- .cta-button {
38
- display: inline-block;
39
- background: white;
40
- color: #667eea;
41
- padding: 1rem 2rem;
74
+
75
+ .badges {
76
+ display: flex;
77
+ gap: 10px;
78
+ justify-content: center;
79
+ flex-wrap: wrap;
80
+ margin-bottom: 2rem;
81
+ }
82
+
83
+ .badges img {
84
+ height: 20px;
85
+ }
86
+
87
+ .cta-buttons {
88
+ display: flex;
89
+ gap: 1rem;
90
+ justify-content: center;
91
+ flex-wrap: wrap;
92
+ }
93
+
94
+ .btn {
95
+ padding: 14px 32px;
42
96
  border-radius: 8px;
43
97
  text-decoration: none;
44
98
  font-weight: 600;
45
- transition: transform 0.2s;
99
+ font-size: 1.1rem;
100
+ transition: all 0.3s ease;
101
+ display: inline-block;
102
+ }
103
+
104
+ .btn-primary {
105
+ background: white;
106
+ color: #667eea;
107
+ box-shadow: 0 4px 14px rgba(0,0,0,0.2);
108
+ }
109
+
110
+ .btn-primary:hover {
111
+ transform: translateY(-2px);
112
+ box-shadow: 0 6px 20px rgba(0,0,0,0.3);
46
113
  }
47
-
48
- .cta-button:hover {
114
+
115
+ .btn-secondary {
116
+ background: rgba(255,255,255,0.2);
117
+ color: white;
118
+ border: 2px solid white;
119
+ }
120
+
121
+ .btn-secondary:hover {
122
+ background: rgba(255,255,255,0.3);
49
123
  transform: translateY(-2px);
50
124
  }
51
-
125
+
126
+ /* Container */
52
127
  .container {
53
128
  max-width: 1200px;
54
129
  margin: 0 auto;
55
- padding: 3rem 2rem;
130
+ padding: 0 20px;
56
131
  }
57
-
132
+
133
+ /* Section */
134
+ .section {
135
+ padding: 80px 20px;
136
+ }
137
+
58
138
  .section-title {
59
- font-size: 2rem;
60
139
  text-align: center;
61
- margin-bottom: 2rem;
140
+ font-size: 2.5rem;
141
+ font-weight: 700;
142
+ margin-bottom: 1rem;
62
143
  color: #1f2937;
63
144
  }
64
-
145
+
146
+ .section-subtitle {
147
+ text-align: center;
148
+ font-size: 1.2rem;
149
+ color: #6b7280;
150
+ margin-bottom: 4rem;
151
+ max-width: 700px;
152
+ margin-left: auto;
153
+ margin-right: auto;
154
+ }
155
+
156
+ /* Features Grid */
65
157
  .features-grid {
66
158
  display: grid;
67
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
68
- gap: 2rem;
69
- margin-bottom: 3rem;
159
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
160
+ gap: 2.5rem;
161
+ margin-top: 3rem;
70
162
  }
71
-
163
+
72
164
  .feature-card {
73
165
  background: white;
74
- padding: 2rem;
166
+ border: 1px solid #e5e7eb;
75
167
  border-radius: 12px;
76
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
77
- transition: transform 0.2s;
168
+ padding: 2rem;
169
+ transition: all 0.3s ease;
78
170
  }
79
-
171
+
80
172
  .feature-card:hover {
81
- transform: translateY(-4px);
173
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
174
+ transform: translateY(-5px);
82
175
  }
83
-
176
+
84
177
  .feature-icon {
85
178
  font-size: 2.5rem;
86
179
  margin-bottom: 1rem;
87
180
  }
88
-
181
+
89
182
  .feature-card h3 {
90
- font-size: 1.25rem;
91
- margin-bottom: 0.75rem;
92
- color: #667eea;
183
+ font-size: 1.3rem;
184
+ margin-bottom: 0.8rem;
185
+ color: #1f2937;
186
+ }
187
+
188
+ .feature-card p {
189
+ color: #6b7280;
190
+ line-height: 1.7;
93
191
  }
94
-
95
- .screenshots {
192
+
193
+ /* Screenshots */
194
+ .screenshot-gallery {
96
195
  display: grid;
97
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
98
- gap: 1.5rem;
99
- margin: 2rem 0;
196
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
197
+ gap: 2rem;
198
+ margin-top: 3rem;
100
199
  }
101
-
102
- .screenshot-card {
103
- background: white;
104
- border-radius: 8px;
200
+
201
+ .screenshot-item {
202
+ border-radius: 12px;
105
203
  overflow: hidden;
106
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
204
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
205
+ transition: all 0.3s ease;
206
+ }
207
+
208
+ .screenshot-item:hover {
209
+ transform: scale(1.03);
210
+ box-shadow: 0 8px 30px rgba(0,0,0,0.15);
107
211
  }
108
-
109
- .screenshot-card img {
212
+
213
+ .screenshot-item img {
110
214
  width: 100%;
215
+ height: auto;
111
216
  display: block;
112
217
  }
113
-
114
- .screenshot-card p {
218
+
219
+ .screenshot-caption {
115
220
  padding: 1rem;
221
+ background: #f9fafb;
116
222
  text-align: center;
117
223
  font-weight: 600;
118
- color: #667eea;
224
+ color: #374151;
119
225
  }
120
-
226
+
227
+ /* Code Block */
121
228
  .code-block {
122
229
  background: #1f2937;
123
230
  color: #f9fafb;
124
- padding: 1.5rem;
125
- border-radius: 8px;
231
+ padding: 2rem;
232
+ border-radius: 12px;
233
+ font-family: 'Courier New', monospace;
234
+ font-size: 1.1rem;
235
+ position: relative;
236
+ margin: 2rem 0;
237
+ }
238
+
239
+ .code-block pre {
240
+ margin: 0;
126
241
  overflow-x: auto;
127
- margin: 1.5rem 0;
128
242
  }
129
-
130
- .code-block code {
131
- font-family: 'Monaco', 'Menlo', monospace;
243
+
244
+ .copy-btn {
245
+ position: absolute;
246
+ top: 1rem;
247
+ right: 1rem;
248
+ background: #374151;
249
+ color: white;
250
+ border: none;
251
+ padding: 8px 16px;
252
+ border-radius: 6px;
253
+ cursor: pointer;
254
+ font-size: 0.9rem;
255
+ transition: background 0.2s;
256
+ }
257
+
258
+ .copy-btn:hover {
259
+ background: #4b5563;
260
+ }
261
+
262
+ /* Architecture */
263
+ .architecture {
264
+ background: #f9fafb;
265
+ padding: 3rem;
266
+ border-radius: 12px;
267
+ margin-top: 3rem;
268
+ }
269
+
270
+ .architecture pre {
271
+ background: white;
272
+ padding: 2rem;
273
+ border-radius: 8px;
274
+ overflow-x: auto;
132
275
  font-size: 0.9rem;
276
+ line-height: 1.6;
277
+ border: 1px solid #e5e7eb;
133
278
  }
134
-
135
- footer {
279
+
280
+ /* Footer */
281
+ .footer {
136
282
  background: #1f2937;
137
- color: white;
283
+ color: #9ca3af;
138
284
  text-align: center;
139
- padding: 2rem;
140
- margin-top: 4rem;
285
+ padding: 3rem 20px;
286
+ }
287
+
288
+ .footer-links {
289
+ display: flex;
290
+ gap: 2rem;
291
+ justify-content: center;
292
+ margin-bottom: 1.5rem;
293
+ flex-wrap: wrap;
294
+ }
295
+
296
+ .footer-links a {
297
+ color: #9ca3af;
298
+ text-decoration: none;
299
+ transition: color 0.2s;
300
+ }
301
+
302
+ .footer-links a:hover {
303
+ color: white;
141
304
  }
142
-
305
+
306
+ /* Responsive */
143
307
  @media (max-width: 768px) {
144
- .hero h1 { font-size: 2rem; }
145
- .hero p { font-size: 1rem; }
146
- .features-grid { grid-template-columns: 1fr; }
147
- .screenshots { grid-template-columns: 1fr; }
308
+ .hero h1 {
309
+ font-size: 2.5rem;
310
+ }
311
+
312
+ .hero p {
313
+ font-size: 1.1rem;
314
+ }
315
+
316
+ .section-title {
317
+ font-size: 2rem;
318
+ }
319
+
320
+ .features-grid {
321
+ grid-template-columns: 1fr;
322
+ }
323
+
324
+ .screenshot-gallery {
325
+ grid-template-columns: 1fr;
326
+ }
148
327
  }
149
328
  </style>
150
329
  </head>
151
330
  <body>
152
- <div class="hero">
153
- <h1>AgentGUI</h1>
154
- <p>Multi-agent GUI client for AI coding agents with real-time streaming, WebSocket sync, and SQLite persistence</p>
155
- <a href="https://github.com/AnEntrypoint/agentgui" class="cta-button">View on GitHub</a>
156
- </div>
157
-
158
- <div class="container">
159
- <h2 class="section-title">Features</h2>
160
- <div class="features-grid">
161
- <div class="feature-card">
162
- <div class="feature-icon">⚡</div>
163
- <h3>Real-time Streaming</h3>
164
- <p>Watch agents work with live output, tool calls, and file operations in real-time.</p>
165
- </div>
166
-
167
- <div class="feature-card">
168
- <div class="feature-icon">🤖</div>
169
- <h3>Multi-Agent Support</h3>
170
- <p>Switch between Claude Code, Gemini CLI, OpenCode, Kilo, and more from one interface.</p>
171
- </div>
331
+ <!-- Hero Section -->
332
+ <section class="hero">
333
+ <div class="hero-content">
334
+ <h1>AgentGUI</h1>
335
+ <p>Multi-agent GUI for AI coding assistants. One interface for all your AI agents.</p>
172
336
 
173
- <div class="feature-card">
174
- <div class="feature-icon">💾</div>
175
- <h3>Session Persistence</h3>
176
- <p>Full conversation history with SQLite database and session management.</p>
337
+ <div class="badges">
338
+ <img src="https://img.shields.io/npm/v/agentgui?color=brightgreen" alt="npm version">
339
+ <img src="https://img.shields.io/npm/dw/agentgui?color=brightgreen" alt="weekly downloads">
340
+ <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license">
177
341
  </div>
178
-
179
- <div class="feature-card">
180
- <div class="feature-icon">🔄</div>
181
- <h3>WebSocket Sync</h3>
182
- <p>Live updates across multiple clients with automatic reconnection.</p>
183
- </div>
184
-
185
- <div class="feature-card">
186
- <div class="feature-icon">🎤</div>
187
- <h3>Voice Integration</h3>
188
- <p>Speech-to-text and text-to-speech support powered by Transformers.js.</p>
189
- </div>
190
-
191
- <div class="feature-card">
192
- <div class="feature-icon">🛠️</div>
193
- <h3>Tool Management</h3>
194
- <p>Install and update agent plugins directly from the UI.</p>
342
+
343
+ <div class="cta-buttons">
344
+ <a href="https://github.com/AnEntrypoint/agentgui" class="btn btn-primary">View on GitHub</a>
345
+ <a href="https://www.npmjs.com/package/agentgui" class="btn btn-secondary">npm Package</a>
195
346
  </div>
196
347
  </div>
348
+ </section>
197
349
 
198
- <h2 class="section-title">Screenshots</h2>
199
- <div class="screenshots">
200
- <div class="screenshot-card">
201
- <img src="docs/screenshot-main.png" alt="Main Interface">
202
- <p>Main Interface</p>
203
- </div>
204
- <div class="screenshot-card">
205
- <img src="docs/screenshot-chat.png" alt="Chat View">
206
- <p>Chat View</p>
350
+ <!-- Quick Start -->
351
+ <section class="section">
352
+ <div class="container">
353
+ <h2 class="section-title">Get Started in Seconds</h2>
354
+ <p class="section-subtitle">No installation required. Run with npx and start coding with AI agents instantly.</p>
355
+
356
+ <div class="code-block">
357
+ <button class="copy-btn" onclick="copyCode(this)">Copy</button>
358
+ <pre><code>npx agentgui</code></pre>
207
359
  </div>
208
- <div class="screenshot-card">
209
- <img src="docs/screenshot-files.png" alt="Files Browser">
210
- <p>Files Browser</p>
360
+
361
+ <p style="text-align: center; color: #6b7280; margin-top: 1rem;">
362
+ Server starts at <strong>http://localhost:3000/gm/</strong>
363
+ </p>
364
+ </div>
365
+ </section>
366
+
367
+ <!-- Features -->
368
+ <section class="section" style="background: #f9fafb;">
369
+ <div class="container">
370
+ <h2 class="section-title">Features</h2>
371
+ <p class="section-subtitle">Everything you need to work with multiple AI coding agents in one place.</p>
372
+
373
+ <div class="features-grid">
374
+ <div class="feature-card">
375
+ <div class="feature-icon">🤖</div>
376
+ <h3>Multi-Agent Support</h3>
377
+ <p>Auto-discovers Claude Code, Gemini CLI, OpenCode, Goose, Kilo, Codex, and other CLI-based agents installed on your system.</p>
378
+ </div>
379
+
380
+ <div class="feature-card">
381
+ <div class="feature-icon">⚡</div>
382
+ <h3>Real-Time Streaming</h3>
383
+ <p>WebSocket-based streaming for instant responses. Watch your agent work in real-time with live execution visualization.</p>
384
+ </div>
385
+
386
+ <div class="feature-card">
387
+ <div class="feature-icon">💾</div>
388
+ <h3>Persistent Storage</h3>
389
+ <p>SQLite database stores all conversations, sessions, and execution history. Resume where you left off.</p>
390
+ </div>
391
+
392
+ <div class="feature-card">
393
+ <div class="feature-icon">📁</div>
394
+ <h3>File Management</h3>
395
+ <p>Integrated file browser with drag-and-drop uploads. Direct file editing and context-aware operations.</p>
396
+ </div>
397
+
398
+ <div class="feature-card">
399
+ <div class="feature-icon">🎤</div>
400
+ <h3>Speech Capabilities</h3>
401
+ <p>Built-in speech-to-text and text-to-speech via Hugging Face Whisper. No API keys required.</p>
402
+ </div>
403
+
404
+ <div class="feature-card">
405
+ <div class="feature-icon">🔧</div>
406
+ <h3>Developer Friendly</h3>
407
+ <p>Hot reload, REST API, WebSocket endpoints, and extensible plugin system for custom agents.</p>
408
+ </div>
211
409
  </div>
212
- <div class="screenshot-card">
213
- <img src="docs/screenshot-terminal.png" alt="Terminal View">
214
- <p>Terminal View</p>
410
+ </div>
411
+ </section>
412
+
413
+ <!-- Screenshots -->
414
+ <section class="section">
415
+ <div class="container">
416
+ <h2 class="section-title">Screenshots</h2>
417
+ <p class="section-subtitle">See AgentGUI in action</p>
418
+
419
+ <div class="screenshot-gallery">
420
+ <div class="screenshot-item">
421
+ <img src="screenshot-main.png" alt="Main Interface">
422
+ <div class="screenshot-caption">Main Interface</div>
423
+ </div>
424
+
425
+ <div class="screenshot-item">
426
+ <img src="screenshot-chat.png" alt="Chat View">
427
+ <div class="screenshot-caption">Chat & Conversation</div>
428
+ </div>
429
+
430
+ <div class="screenshot-item">
431
+ <img src="screenshot-files.png" alt="File Browser">
432
+ <div class="screenshot-caption">File Browser</div>
433
+ </div>
434
+
435
+ <div class="screenshot-item">
436
+ <img src="screenshot-terminal.png" alt="Terminal View">
437
+ <div class="screenshot-caption">Terminal Execution</div>
438
+ </div>
439
+
440
+ <div class="screenshot-item">
441
+ <img src="screenshot-tools-popup.png" alt="Tools Management">
442
+ <div class="screenshot-caption">Tools Management</div>
443
+ </div>
444
+
445
+ <div class="screenshot-item">
446
+ <img src="screenshot-conversation.png" alt="Conversation View">
447
+ <div class="screenshot-caption">Conversation History</div>
448
+ </div>
215
449
  </div>
216
- <div class="screenshot-card">
217
- <img src="docs/screenshot-tools-popup.png" alt="Tools Management">
218
- <p>Tools Management</p>
450
+ </div>
451
+ </section>
452
+
453
+ <!-- Architecture -->
454
+ <section class="section" style="background: #f9fafb;">
455
+ <div class="container">
456
+ <h2 class="section-title">Architecture</h2>
457
+ <p class="section-subtitle">Built for performance, reliability, and extensibility</p>
458
+
459
+ <div class="architecture">
460
+ <pre><code>┌─────────────────────────────────────────────────────────────────┐
461
+ │ Browser Client │
462
+ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────────────────┐ │
463
+ │ │ UI Layer │ │ WebSocket │ │ Streaming Renderer │ │
464
+ │ │ Components │ │ Manager │ │ (Event Processor) │ │
465
+ │ └──────────────┘ └──────────────┘ └──────────────────────────┘ │
466
+ └─────────────────────────────────────────────────────────────────┘
467
+ │
468
+ ┌─────────▼─────────┐
469
+ │ HTTP + WS │
470
+ │ Server │
471
+ │ (server.js) │
472
+ └─────────┬─────────┘
473
+ │
474
+ ┌─────────────────────┼─────────────────────┐
475
+ │ │ │
476
+ ┌───────▼────────┐ ┌─────────▼─────────┐ ┌───────▼────────┐
477
+ │ SQLite DB │ │ Agent Runner │ │ Speech │
478
+ │ (database.js) │ │ (claude-runner.js)│ │ (speech.js) │
479
+ └────────────────┘ └─────────┬─────────┘ └────────────────┘
480
+ │
481
+ ┌─────────▼─────────┐
482
+ │ Agent CLI Tools │
483
+ │ (spawned procs) │
484
+ └───────────────────┘</code></pre>
219
485
  </div>
220
- <div class="screenshot-card">
221
- <img src="docs/screenshot-conversation.png" alt="Conversation">
222
- <p>Conversation</p>
486
+
487
+ <div class="features-grid" style="margin-top: 3rem;">
488
+ <div class="feature-card">
489
+ <h3>REST API</h3>
490
+ <p>Complete REST API for conversations, messages, agents, tools, and speech operations.</p>
491
+ </div>
492
+
493
+ <div class="feature-card">
494
+ <h3>WebSocket Sync</h3>
495
+ <p>Real-time bidirectional communication with event-based streaming and subscription model.</p>
496
+ </div>
497
+
498
+ <div class="feature-card">
499
+ <h3>SQLite WAL Mode</h3>
500
+ <p>Write-Ahead Logging for concurrent reads and writes without blocking.</p>
501
+ </div>
223
502
  </div>
224
503
  </div>
504
+ </section>
225
505
 
226
- <h2 class="section-title">Quick Start</h2>
227
- <div class="code-block">
228
- <code>npm install
229
- npm run dev
506
+ <!-- Installation Options -->
507
+ <section class="section">
508
+ <div class="container">
509
+ <h2 class="section-title">Installation Options</h2>
510
+
511
+ <div style="max-width: 800px; margin: 0 auto;">
512
+ <h3 style="margin: 2rem 0 1rem;">Quick Start (Recommended)</h3>
513
+ <div class="code-block">
514
+ <button class="copy-btn" onclick="copyCode(this)">Copy</button>
515
+ <pre><code>npx agentgui</code></pre>
516
+ </div>
230
517
 
231
- # Server starts on http://localhost:3000/gm/</code>
232
- </div>
518
+ <h3 style="margin: 2rem 0 1rem;">Manual Installation</h3>
519
+ <div class="code-block">
520
+ <button class="copy-btn" onclick="copyCode(this)">Copy</button>
521
+ <pre><code>git clone https://github.com/AnEntrypoint/agentgui.git
522
+ cd agentgui
523
+ npm install
524
+ npm run dev</code></pre>
525
+ </div>
233
526
 
234
- <h2 class="section-title">System Requirements</h2>
235
- <div class="feature-card" style="max-width: 600px; margin: 0 auto;">
236
- <ul style="list-style-position: inside;">
237
- <li>Node.js 18+</li>
238
- <li>SQLite 3</li>
239
- <li>Modern browser (Chrome, Firefox, Safari, Edge)</li>
240
- </ul>
527
+ <h3 style="margin: 2rem 0 1rem;">System Requirements</h3>
528
+ <ul style="list-style: none; padding: 0;">
529
+ <li style="padding: 0.5rem 0; color: #4b5563;">✓ Node.js 18+ (LTS recommended)</li>
530
+ <li style="padding: 0.5rem 0; color: #4b5563;">✓ npm or bun package manager</li>
531
+ <li style="padding: 0.5rem 0; color: #4b5563;">✓ At least one AI coding agent (Claude Code, Gemini CLI, etc.)</li>
532
+ <li style="padding: 0.5rem 0; color: #4b5563;">✓ Optional: Python 3.9+ for TTS on Windows</li>
533
+ </ul>
534
+ </div>
241
535
  </div>
536
+ </section>
242
537
 
243
- <h2 class="section-title">Architecture</h2>
244
- <div class="code-block">
245
- <code>server.js HTTP server + WebSocket + API routes
246
- database.js SQLite (WAL mode), schema, queries
247
- lib/claude-runner.js Agent framework - CLI process spawner
248
- lib/acp-manager.js ACP tool lifecycle management
249
- lib/speech.js STT/TTS via @huggingface/transformers
250
- static/js/client.js Main client logic
251
- static/js/streaming-renderer.js Event rendering</code>
538
+ <!-- Footer -->
539
+ <footer class="footer">
540
+ <div class="container">
541
+ <div class="footer-links">
542
+ <a href="https://github.com/AnEntrypoint/agentgui">GitHub</a>
543
+ <a href="https://www.npmjs.com/package/agentgui">npm</a>
544
+ <a href="https://github.com/AnEntrypoint/agentgui/issues">Issues</a>
545
+ <a href="https://github.com/AnEntrypoint/agentgui#readme">Documentation</a>
546
+ </div>
547
+ <p>MIT License © 2024 AnEntrypoint</p>
548
+ <p style="margin-top: 1rem;">Made with ❤️ by the AgentGUI team</p>
252
549
  </div>
253
- </div>
254
-
255
- <footer>
256
- <p>&copy; 2024 AgentGUI. MIT License.</p>
257
- <p><a href="https://github.com/AnEntrypoint/agentgui" style="color: #667eea;">GitHub</a></p>
258
550
  </footer>
551
+
552
+ <script>
553
+ function copyCode(btn) {
554
+ const codeBlock = btn.nextElementSibling;
555
+ const text = codeBlock.textContent;
556
+
557
+ navigator.clipboard.writeText(text).then(() => {
558
+ const originalText = btn.textContent;
559
+ btn.textContent = 'Copied!';
560
+ setTimeout(() => {
561
+ btn.textContent = originalText;
562
+ }, 2000);
563
+ });
564
+ }
565
+ </script>
259
566
  </body>
260
- </html>
567
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agentgui",
3
- "version": "1.0.577",
3
+ "version": "1.0.579",
4
4
  "description": "Multi-agent ACP client with real-time communication",
5
5
  "type": "module",
6
6
  "main": "server.js",