agentgui 1.0.896 → 1.0.898
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/docs/demo.html +816 -0
- package/package.json +1 -1
- package/static/app.js +23 -0
- package/static/css/gmail-skin.css +588 -303
- package/static/index.html +25 -0
package/docs/demo.html
ADDED
|
@@ -0,0 +1,816 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>AgentGUI — Live Demo Preview</title>
|
|
7
|
+
<meta name="description" content="See what AgentGUI looks like on your machine — a non-interactive preview of the Gmail-inspired multi-agent interface.">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;500;600&family=Google+Sans:wght@300;400;500;700&display=swap">
|
|
11
|
+
<style>
|
|
12
|
+
/* ── Page chrome ─────────────────────────────────────── */
|
|
13
|
+
:root {
|
|
14
|
+
--paper: #EFE9DD; --ink: #0B0B09; --green: #247420; --green-2: #92CEAC;
|
|
15
|
+
--panel-0: var(--paper); --panel-1: #f6f1e7; --panel-2: #ece5d8; --panel-3: #ddd4c3;
|
|
16
|
+
--panel-text: var(--ink); --panel-text-2: #4a473f; --panel-text-3: #6d675b;
|
|
17
|
+
--panel-accent: var(--green); --panel-accent-fg: #fff;
|
|
18
|
+
--ff-display: 'Archivo Black', system-ui, sans-serif;
|
|
19
|
+
--ff-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
|
|
20
|
+
--ff-ui: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
|
21
|
+
}
|
|
22
|
+
@media (prefers-color-scheme: dark) {
|
|
23
|
+
:root {
|
|
24
|
+
--panel-0: #0B0B09; --panel-1: #141411; --panel-2: #1f1f1a; --panel-3: #2a2a23;
|
|
25
|
+
--panel-text: #EFE9DD; --panel-text-2: #d2cab9; --panel-text-3: #afa797;
|
|
26
|
+
--panel-accent: var(--green-2); --panel-accent-fg: #0B0B09;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
*, *::before, *::after { box-sizing: border-box; }
|
|
30
|
+
html, body { margin: 0; padding: 0; min-height: 100vh; }
|
|
31
|
+
body {
|
|
32
|
+
background: var(--panel-0);
|
|
33
|
+
color: var(--panel-text);
|
|
34
|
+
font-family: var(--ff-mono);
|
|
35
|
+
font-size: 13px;
|
|
36
|
+
line-height: 1.5;
|
|
37
|
+
-webkit-font-smoothing: antialiased;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* ── Page layout ─────────────────────────────────────── */
|
|
41
|
+
.page { display: flex; flex-direction: column; min-height: 100vh; }
|
|
42
|
+
|
|
43
|
+
.topbar {
|
|
44
|
+
position: sticky; top: 0; z-index: 100;
|
|
45
|
+
height: 40px;
|
|
46
|
+
background: var(--panel-2);
|
|
47
|
+
display: flex; align-items: center;
|
|
48
|
+
padding: 0 16px; gap: 16px;
|
|
49
|
+
font-size: 13px; flex-shrink: 0;
|
|
50
|
+
}
|
|
51
|
+
.brand { font-family: var(--ff-display); font-size: 14px; color: var(--panel-text); text-transform: lowercase; letter-spacing: -0.01em; }
|
|
52
|
+
.brand .slash { color: var(--panel-text-3); margin: 0 4px; font-family: var(--ff-mono); font-weight: 400; }
|
|
53
|
+
.topbar nav { margin-left: auto; display: flex; gap: 2px; }
|
|
54
|
+
.topbar nav a { color: var(--panel-text-2); text-decoration: none; padding: 6px 10px; font-size: 12px; }
|
|
55
|
+
.topbar nav a:hover { background: var(--panel-3); color: var(--panel-text); }
|
|
56
|
+
.topbar nav a.active { background: var(--panel-accent); color: var(--panel-accent-fg); }
|
|
57
|
+
|
|
58
|
+
.content { flex: 1; max-width: 1360px; margin: 0 auto; padding: 48px 24px 80px; width: 100%; }
|
|
59
|
+
|
|
60
|
+
.hero { margin-bottom: 48px; text-align: center; }
|
|
61
|
+
.hero h1 {
|
|
62
|
+
font-family: var(--ff-display); font-size: clamp(28px, 4vw, 48px);
|
|
63
|
+
line-height: 1.05; letter-spacing: -0.02em;
|
|
64
|
+
color: var(--panel-text); margin: 0 0 12px; text-transform: lowercase;
|
|
65
|
+
}
|
|
66
|
+
.hero p { color: var(--panel-text-2); font-size: 13px; margin: 0 0 8px; }
|
|
67
|
+
.hero .sub { font-size: 12px; color: var(--panel-text-3); }
|
|
68
|
+
|
|
69
|
+
/* ── Browser mockup ──────────────────────────────────── */
|
|
70
|
+
.mockup-wrap {
|
|
71
|
+
margin: 0 auto;
|
|
72
|
+
max-width: 1200px;
|
|
73
|
+
filter: drop-shadow(0 24px 48px rgba(0,0,0,0.28));
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.browser-chrome {
|
|
77
|
+
background: #e8e8e8;
|
|
78
|
+
border-radius: 10px 10px 0 0;
|
|
79
|
+
padding: 10px 12px 0;
|
|
80
|
+
display: flex; align-items: center; gap: 8px;
|
|
81
|
+
}
|
|
82
|
+
@media (prefers-color-scheme: dark) {
|
|
83
|
+
.browser-chrome { background: #3a3a3c; }
|
|
84
|
+
}
|
|
85
|
+
.browser-dots { display: flex; gap: 6px; margin-right: 4px; }
|
|
86
|
+
.browser-dot { width: 12px; height: 12px; border-radius: 50%; }
|
|
87
|
+
.dot-red { background: #ff5f57; }
|
|
88
|
+
.dot-yellow{ background: #ffbd2e; }
|
|
89
|
+
.dot-green { background: #28c840; }
|
|
90
|
+
.browser-bar {
|
|
91
|
+
flex: 1;
|
|
92
|
+
height: 26px;
|
|
93
|
+
background: #fff;
|
|
94
|
+
border-radius: 6px;
|
|
95
|
+
display: flex; align-items: center;
|
|
96
|
+
padding: 0 10px;
|
|
97
|
+
font-family: var(--ff-mono); font-size: 11px; color: #888;
|
|
98
|
+
gap: 6px;
|
|
99
|
+
}
|
|
100
|
+
@media (prefers-color-scheme: dark) {
|
|
101
|
+
.browser-bar { background: #555; color: #ccc; }
|
|
102
|
+
}
|
|
103
|
+
.browser-bar svg { width: 12px; height: 12px; opacity: 0.5; flex-shrink: 0; }
|
|
104
|
+
|
|
105
|
+
.browser-viewport {
|
|
106
|
+
background: #f6f8fc;
|
|
107
|
+
border-radius: 0 0 10px 10px;
|
|
108
|
+
overflow: hidden;
|
|
109
|
+
height: 620px;
|
|
110
|
+
}
|
|
111
|
+
@media (prefers-color-scheme: dark) {
|
|
112
|
+
.browser-viewport { background: #202124; }
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* ── Gmail-skin app shell (inside viewport) ──────────── */
|
|
116
|
+
.app-shell {
|
|
117
|
+
display: grid;
|
|
118
|
+
grid-template-columns: 72px 280px 1fr;
|
|
119
|
+
height: 100%;
|
|
120
|
+
font-family: var(--ff-ui);
|
|
121
|
+
font-size: 14px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Gmail tokens */
|
|
125
|
+
.app-shell {
|
|
126
|
+
--gm-surface: #f6f8fc;
|
|
127
|
+
--gm-panel: #ffffff;
|
|
128
|
+
--gm-hover: #f1f3f4;
|
|
129
|
+
--gm-active-bg: #d3e3fd;
|
|
130
|
+
--gm-active-text: #0b57d0;
|
|
131
|
+
--gm-border: #e0e0e0;
|
|
132
|
+
--gm-text-1: #202124;
|
|
133
|
+
--gm-text-2: #5f6368;
|
|
134
|
+
--gm-text-3: #9aa0a6;
|
|
135
|
+
--gm-blue: #1a73e8;
|
|
136
|
+
--gm-shadow1: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
|
|
137
|
+
--gm-shadow2: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
|
|
138
|
+
--gm-pill: 9999px;
|
|
139
|
+
--gm-r-lg: 16px;
|
|
140
|
+
}
|
|
141
|
+
@media (prefers-color-scheme: dark) {
|
|
142
|
+
.app-shell {
|
|
143
|
+
--gm-surface: #202124;
|
|
144
|
+
--gm-panel: #292a2d;
|
|
145
|
+
--gm-hover: #35363a;
|
|
146
|
+
--gm-active-bg: #1e3a5f;
|
|
147
|
+
--gm-active-text: #8ab4f8;
|
|
148
|
+
--gm-border: #3c4043;
|
|
149
|
+
--gm-text-1: #e8eaed;
|
|
150
|
+
--gm-text-2: #bdc1c6;
|
|
151
|
+
--gm-text-3: #9aa0a6;
|
|
152
|
+
--gm-shadow1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px 1px rgba(0,0,0,.2);
|
|
153
|
+
--gm-shadow2: 0 1px 3px rgba(0,0,0,.4), 0 4px 8px 3px rgba(0,0,0,.2);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Nav rail */
|
|
158
|
+
.nav-rail {
|
|
159
|
+
background: var(--gm-surface);
|
|
160
|
+
display: flex; flex-direction: column; align-items: center;
|
|
161
|
+
padding: 8px 0; gap: 4px;
|
|
162
|
+
border-right: 1px solid var(--gm-border);
|
|
163
|
+
}
|
|
164
|
+
.nav-item {
|
|
165
|
+
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
166
|
+
gap: 4px; width: 56px; min-height: 56px; padding: 8px 4px;
|
|
167
|
+
border-radius: 16px; cursor: default;
|
|
168
|
+
color: var(--gm-text-2); transition: background 0.15s;
|
|
169
|
+
}
|
|
170
|
+
.nav-item.active { background: var(--gm-active-bg); color: var(--gm-active-text); }
|
|
171
|
+
.nav-item svg { width: 20px; height: 20px; }
|
|
172
|
+
.nav-label { font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1; text-align: center; }
|
|
173
|
+
|
|
174
|
+
.nav-compose {
|
|
175
|
+
width: 56px; min-height: 56px;
|
|
176
|
+
background: var(--gm-panel);
|
|
177
|
+
box-shadow: var(--gm-shadow1);
|
|
178
|
+
border-radius: 16px;
|
|
179
|
+
margin-bottom: 8px;
|
|
180
|
+
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
181
|
+
gap: 4px; color: var(--gm-text-1); font-size: 10px; font-weight: 500; cursor: default;
|
|
182
|
+
}
|
|
183
|
+
.nav-compose svg { width: 20px; height: 20px; }
|
|
184
|
+
|
|
185
|
+
/* Sidebar */
|
|
186
|
+
.sidebar {
|
|
187
|
+
background: var(--gm-surface);
|
|
188
|
+
display: flex; flex-direction: column;
|
|
189
|
+
overflow: hidden;
|
|
190
|
+
border-right: 1px solid var(--gm-border);
|
|
191
|
+
}
|
|
192
|
+
.sidebar-hdr {
|
|
193
|
+
padding: 12px 12px 8px;
|
|
194
|
+
font-family: var(--ff-ui); font-size: 18px; font-weight: 400;
|
|
195
|
+
color: var(--gm-text-2);
|
|
196
|
+
}
|
|
197
|
+
.sidebar-search {
|
|
198
|
+
margin: 0 10px 8px;
|
|
199
|
+
height: 36px;
|
|
200
|
+
background: var(--gm-panel);
|
|
201
|
+
border: 1px solid var(--gm-border);
|
|
202
|
+
border-radius: var(--gm-pill);
|
|
203
|
+
display: flex; align-items: center; gap: 8px;
|
|
204
|
+
padding: 0 14px;
|
|
205
|
+
box-shadow: var(--gm-shadow1);
|
|
206
|
+
color: var(--gm-text-3); font-size: 13px;
|
|
207
|
+
}
|
|
208
|
+
.sidebar-search svg { width: 16px; height: 16px; flex-shrink: 0; }
|
|
209
|
+
|
|
210
|
+
.conv-list { flex: 1; overflow-y: auto; padding: 4px 0; }
|
|
211
|
+
.conv-item {
|
|
212
|
+
display: grid;
|
|
213
|
+
grid-template-columns: 1fr auto;
|
|
214
|
+
align-items: center;
|
|
215
|
+
padding: 0 16px;
|
|
216
|
+
margin: 0 8px 2px;
|
|
217
|
+
height: 52px;
|
|
218
|
+
border-radius: var(--gm-pill);
|
|
219
|
+
cursor: default;
|
|
220
|
+
gap: 8px;
|
|
221
|
+
}
|
|
222
|
+
.conv-item:hover, .conv-item.hov { background: var(--gm-hover); }
|
|
223
|
+
.conv-item.active { background: var(--gm-active-bg); }
|
|
224
|
+
.conv-title {
|
|
225
|
+
font-size: 13px; font-weight: 600;
|
|
226
|
+
color: var(--gm-text-1);
|
|
227
|
+
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
228
|
+
line-height: 1.4;
|
|
229
|
+
}
|
|
230
|
+
.conv-item.active .conv-title { color: var(--gm-active-text); }
|
|
231
|
+
.conv-meta {
|
|
232
|
+
font-size: 11px; color: var(--gm-text-3);
|
|
233
|
+
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
234
|
+
margin-top: 2px;
|
|
235
|
+
}
|
|
236
|
+
.conv-time {
|
|
237
|
+
font-size: 11px; color: var(--gm-text-3);
|
|
238
|
+
flex-shrink: 0;
|
|
239
|
+
}
|
|
240
|
+
.conv-item.active .conv-meta,
|
|
241
|
+
.conv-item.active .conv-time { color: var(--gm-active-text); opacity: 0.7; }
|
|
242
|
+
|
|
243
|
+
.streaming-dot {
|
|
244
|
+
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
|
|
245
|
+
background: #34a853; margin-right: 4px; vertical-align: middle;
|
|
246
|
+
animation: pulse 1.5s ease-in-out infinite;
|
|
247
|
+
}
|
|
248
|
+
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
|
|
249
|
+
|
|
250
|
+
/* Main panel */
|
|
251
|
+
.main {
|
|
252
|
+
display: flex; flex-direction: column;
|
|
253
|
+
background: var(--gm-panel);
|
|
254
|
+
overflow: hidden;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.main-header {
|
|
258
|
+
height: 64px; min-height: 64px;
|
|
259
|
+
background: var(--gm-surface);
|
|
260
|
+
border-bottom: 1px solid var(--gm-border);
|
|
261
|
+
display: flex; align-items: center; gap: 8px;
|
|
262
|
+
padding: 0 16px;
|
|
263
|
+
flex-shrink: 0;
|
|
264
|
+
}
|
|
265
|
+
.hdr-hamburger {
|
|
266
|
+
width: 40px; height: 40px; border-radius: 50%;
|
|
267
|
+
display: flex; align-items: center; justify-content: center;
|
|
268
|
+
color: var(--gm-text-2); flex-shrink: 0;
|
|
269
|
+
}
|
|
270
|
+
.hdr-hamburger svg { width: 20px; height: 20px; }
|
|
271
|
+
|
|
272
|
+
.hdr-search {
|
|
273
|
+
flex: 1; max-width: 720px; margin: 0 auto;
|
|
274
|
+
position: relative;
|
|
275
|
+
}
|
|
276
|
+
.hdr-search-inner {
|
|
277
|
+
display: flex; align-items: center; gap: 0;
|
|
278
|
+
height: 40px;
|
|
279
|
+
background: var(--gm-panel);
|
|
280
|
+
border: 1px solid var(--gm-border);
|
|
281
|
+
border-radius: var(--gm-pill);
|
|
282
|
+
padding: 0 16px 0 42px;
|
|
283
|
+
box-shadow: var(--gm-shadow1);
|
|
284
|
+
font-size: 14px; color: var(--gm-text-3);
|
|
285
|
+
}
|
|
286
|
+
.hdr-search svg {
|
|
287
|
+
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
|
|
288
|
+
width: 18px; height: 18px; color: var(--gm-text-2); pointer-events: none;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.hdr-actions {
|
|
292
|
+
display: flex; align-items: center; gap: 4px; flex-shrink: 0;
|
|
293
|
+
}
|
|
294
|
+
.hdr-btn {
|
|
295
|
+
width: 40px; height: 40px; border-radius: 50%;
|
|
296
|
+
display: flex; align-items: center; justify-content: center;
|
|
297
|
+
color: var(--gm-text-2);
|
|
298
|
+
}
|
|
299
|
+
.hdr-btn svg { width: 20px; height: 20px; }
|
|
300
|
+
|
|
301
|
+
.status-dot {
|
|
302
|
+
width: 8px; height: 8px; border-radius: 50%; background: #34a853;
|
|
303
|
+
}
|
|
304
|
+
.status-label { font-size: 11px; color: var(--gm-text-3); }
|
|
305
|
+
|
|
306
|
+
/* Messages */
|
|
307
|
+
.messages-area {
|
|
308
|
+
flex: 1; overflow-y: auto;
|
|
309
|
+
padding: 16px 0;
|
|
310
|
+
background: var(--gm-panel);
|
|
311
|
+
}
|
|
312
|
+
.messages-inner { max-width: 860px; margin: 0 auto; padding: 0 24px; }
|
|
313
|
+
|
|
314
|
+
.msg {
|
|
315
|
+
margin-bottom: 8px;
|
|
316
|
+
padding: 12px 16px;
|
|
317
|
+
border: 1px solid var(--gm-border);
|
|
318
|
+
border-radius: 12px;
|
|
319
|
+
background: var(--gm-panel);
|
|
320
|
+
box-shadow: var(--gm-shadow1);
|
|
321
|
+
}
|
|
322
|
+
.msg-user {
|
|
323
|
+
background: #e8f0fe;
|
|
324
|
+
border-color: #c5d6f9;
|
|
325
|
+
margin-left: auto;
|
|
326
|
+
max-width: 75%;
|
|
327
|
+
}
|
|
328
|
+
@media (prefers-color-scheme: dark) {
|
|
329
|
+
.msg-user { background: #1e3a5f; border-color: #2d5a9e; }
|
|
330
|
+
}
|
|
331
|
+
.msg-role {
|
|
332
|
+
font-size: 11px; font-weight: 600; text-transform: uppercase;
|
|
333
|
+
letter-spacing: 0.05em; color: var(--gm-text-2); margin-bottom: 6px;
|
|
334
|
+
display: flex; align-items: center; gap: 6px;
|
|
335
|
+
}
|
|
336
|
+
.msg-role-badge {
|
|
337
|
+
display: inline-block; padding: 1px 7px; border-radius: 4px;
|
|
338
|
+
background: #e8f0fe; color: #1a73e8; font-size: 10px; font-weight: 600;
|
|
339
|
+
}
|
|
340
|
+
@media (prefers-color-scheme: dark) {
|
|
341
|
+
.msg-role-badge { background: #1e3a5f; color: #8ab4f8; }
|
|
342
|
+
}
|
|
343
|
+
.msg-body {
|
|
344
|
+
font-size: 14px; line-height: 1.65; color: var(--gm-text-1);
|
|
345
|
+
}
|
|
346
|
+
.msg-body code {
|
|
347
|
+
background: #f1f3f4; border-radius: 4px; padding: 1px 6px;
|
|
348
|
+
font-family: var(--ff-mono); font-size: 12px; color: #c53929;
|
|
349
|
+
}
|
|
350
|
+
@media (prefers-color-scheme: dark) {
|
|
351
|
+
.msg-body code { background: #35363a; color: #f28b82; }
|
|
352
|
+
}
|
|
353
|
+
.msg-body pre {
|
|
354
|
+
background: #1e293b; border-radius: 8px; padding: 12px 14px;
|
|
355
|
+
overflow-x: auto; margin: 8px 0;
|
|
356
|
+
}
|
|
357
|
+
.msg-body pre code {
|
|
358
|
+
background: transparent; padding: 0; color: #e2e8f0;
|
|
359
|
+
font-size: 12px; line-height: 1.6;
|
|
360
|
+
}
|
|
361
|
+
.msg-ts { font-size: 11px; color: var(--gm-text-3); margin-top: 6px; }
|
|
362
|
+
|
|
363
|
+
/* Tool use block */
|
|
364
|
+
.tool-block {
|
|
365
|
+
border: 1px solid var(--gm-border); border-radius: 8px; overflow: hidden;
|
|
366
|
+
margin-bottom: 8px; font-size: 12px;
|
|
367
|
+
}
|
|
368
|
+
.tool-header {
|
|
369
|
+
padding: 6px 12px;
|
|
370
|
+
background: #f1f3f4;
|
|
371
|
+
display: flex; align-items: center; gap: 8px;
|
|
372
|
+
color: var(--gm-text-2);
|
|
373
|
+
}
|
|
374
|
+
@media (prefers-color-scheme: dark) {
|
|
375
|
+
.tool-header { background: #35363a; }
|
|
376
|
+
}
|
|
377
|
+
.tool-name { font-family: var(--ff-mono); font-weight: 600; color: var(--gm-text-1); }
|
|
378
|
+
.tool-ok { color: #34a853; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
379
|
+
.tool-body {
|
|
380
|
+
padding: 8px 12px;
|
|
381
|
+
background: #292a2d;
|
|
382
|
+
font-family: var(--ff-mono); font-size: 11px;
|
|
383
|
+
color: #9aa0a6; white-space: pre; overflow-x: auto;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
/* Streaming status */
|
|
387
|
+
.streaming-bar {
|
|
388
|
+
display: flex; align-items: center; gap: 10px;
|
|
389
|
+
padding: 8px 20px;
|
|
390
|
+
background: #202124;
|
|
391
|
+
border-radius: 9999px;
|
|
392
|
+
box-shadow: var(--gm-shadow2);
|
|
393
|
+
font-size: 13px; color: #e8eaed;
|
|
394
|
+
width: fit-content; margin: 0 auto 12px;
|
|
395
|
+
}
|
|
396
|
+
.streaming-dots { display: flex; gap: 4px; }
|
|
397
|
+
.streaming-dots span {
|
|
398
|
+
width: 6px; height: 6px; border-radius: 50%; background: #8ab4f8;
|
|
399
|
+
animation: bounce 1.2s ease-in-out infinite;
|
|
400
|
+
}
|
|
401
|
+
.streaming-dots span:nth-child(2) { animation-delay: 0.2s; }
|
|
402
|
+
.streaming-dots span:nth-child(3) { animation-delay: 0.4s; }
|
|
403
|
+
@keyframes bounce { 0%,80%,100%{transform:scale(0.8);opacity:0.5} 40%{transform:scale(1.1);opacity:1} }
|
|
404
|
+
.streaming-agent { color: #8ab4f8; font-weight: 600; }
|
|
405
|
+
|
|
406
|
+
/* Input area */
|
|
407
|
+
.input-area {
|
|
408
|
+
padding: 12px 24px 20px;
|
|
409
|
+
border-top: 1px solid var(--gm-border);
|
|
410
|
+
background: var(--gm-panel);
|
|
411
|
+
flex-shrink: 0;
|
|
412
|
+
}
|
|
413
|
+
.input-card {
|
|
414
|
+
background: var(--gm-panel);
|
|
415
|
+
border: 1px solid var(--gm-border);
|
|
416
|
+
border-radius: var(--gm-r-lg);
|
|
417
|
+
box-shadow: var(--gm-shadow2);
|
|
418
|
+
overflow: hidden;
|
|
419
|
+
}
|
|
420
|
+
.input-text {
|
|
421
|
+
padding: 14px 16px;
|
|
422
|
+
font-family: var(--ff-ui); font-size: 14px;
|
|
423
|
+
color: var(--gm-text-3);
|
|
424
|
+
min-height: 52px; display: flex; align-items: center;
|
|
425
|
+
}
|
|
426
|
+
.input-toolbar {
|
|
427
|
+
padding: 6px 10px;
|
|
428
|
+
border-top: 1px solid var(--gm-hover);
|
|
429
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
430
|
+
}
|
|
431
|
+
.input-chips { display: flex; gap: 6px; }
|
|
432
|
+
.chip {
|
|
433
|
+
height: 28px; padding: 0 12px;
|
|
434
|
+
background: var(--gm-hover); border-radius: var(--gm-pill);
|
|
435
|
+
font-size: 12px; color: var(--gm-text-1);
|
|
436
|
+
display: flex; align-items: center; gap: 4px;
|
|
437
|
+
}
|
|
438
|
+
.chip svg { width: 12px; height: 12px; }
|
|
439
|
+
.input-actions { display: flex; gap: 4px; align-items: center; }
|
|
440
|
+
.icon-btn {
|
|
441
|
+
width: 36px; height: 36px; border-radius: 50%;
|
|
442
|
+
display: flex; align-items: center; justify-content: center;
|
|
443
|
+
color: var(--gm-text-2);
|
|
444
|
+
}
|
|
445
|
+
.icon-btn svg { width: 18px; height: 18px; }
|
|
446
|
+
.send-btn {
|
|
447
|
+
background: var(--gm-blue); color: #fff;
|
|
448
|
+
height: 36px; padding: 0 16px;
|
|
449
|
+
border-radius: var(--gm-pill);
|
|
450
|
+
display: flex; align-items: center; gap: 6px;
|
|
451
|
+
font-size: 13px; font-weight: 500;
|
|
452
|
+
}
|
|
453
|
+
.send-btn svg { width: 16px; height: 16px; }
|
|
454
|
+
|
|
455
|
+
/* ── Below-fold sections ─────────────────────────────── */
|
|
456
|
+
.features { margin-top: 64px; }
|
|
457
|
+
.features h2 {
|
|
458
|
+
font-family: var(--ff-display); font-size: 24px; text-transform: lowercase;
|
|
459
|
+
letter-spacing: -0.01em; margin: 0 0 24px; color: var(--panel-text);
|
|
460
|
+
}
|
|
461
|
+
.feat-grid {
|
|
462
|
+
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
463
|
+
gap: 12px;
|
|
464
|
+
}
|
|
465
|
+
.feat-card {
|
|
466
|
+
background: var(--panel-1); padding: 20px 18px;
|
|
467
|
+
border: 1px solid var(--panel-text);
|
|
468
|
+
}
|
|
469
|
+
.feat-card:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--panel-text); }
|
|
470
|
+
.feat-icon { font-size: 22px; margin-bottom: 8px; }
|
|
471
|
+
.feat-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; color: var(--panel-text); }
|
|
472
|
+
.feat-desc { font-size: 12px; color: var(--panel-text-2); line-height: 1.5; }
|
|
473
|
+
|
|
474
|
+
.install-section { margin-top: 48px; }
|
|
475
|
+
.install-section h2 {
|
|
476
|
+
font-family: var(--ff-display); font-size: 24px; text-transform: lowercase;
|
|
477
|
+
letter-spacing: -0.01em; margin: 0 0 16px; color: var(--panel-text);
|
|
478
|
+
}
|
|
479
|
+
.install-cmd {
|
|
480
|
+
display: inline-flex; align-items: center; gap: 12px;
|
|
481
|
+
background: var(--panel-1); border: 1px solid var(--panel-accent);
|
|
482
|
+
padding: 10px 18px; font-family: var(--ff-mono); font-size: 14px;
|
|
483
|
+
color: var(--panel-accent);
|
|
484
|
+
}
|
|
485
|
+
.install-note { font-size: 12px; color: var(--panel-text-3); margin-top: 8px; }
|
|
486
|
+
|
|
487
|
+
/* ── Footer ──────────────────────────────────────────── */
|
|
488
|
+
.footer {
|
|
489
|
+
height: 24px; background: var(--panel-accent); color: var(--panel-accent-fg);
|
|
490
|
+
display: flex; align-items: center; padding: 0 14px; gap: 14px;
|
|
491
|
+
font-family: var(--ff-mono); font-size: 11px; flex-shrink: 0;
|
|
492
|
+
margin-top: auto;
|
|
493
|
+
}
|
|
494
|
+
.footer .spread { flex: 1; }
|
|
495
|
+
.footer a { color: inherit; text-decoration: none; }
|
|
496
|
+
.footer a:hover { text-decoration: underline; }
|
|
497
|
+
|
|
498
|
+
/* scrollbar */
|
|
499
|
+
::-webkit-scrollbar { width: 8px; }
|
|
500
|
+
::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 4px; }
|
|
501
|
+
</style>
|
|
502
|
+
</head>
|
|
503
|
+
<body>
|
|
504
|
+
<div class="page">
|
|
505
|
+
|
|
506
|
+
<!-- ── Top bar ── -->
|
|
507
|
+
<header class="topbar">
|
|
508
|
+
<span class="brand">247420<span class="slash">/</span>agentgui</span>
|
|
509
|
+
<nav>
|
|
510
|
+
<a href="index.html">home</a>
|
|
511
|
+
<a href="demo.html" class="active">demo</a>
|
|
512
|
+
<a href="https://github.com/AnEntrypoint/agentgui">github</a>
|
|
513
|
+
<a href="https://www.npmjs.com/package/agentgui">npm</a>
|
|
514
|
+
</nav>
|
|
515
|
+
</header>
|
|
516
|
+
|
|
517
|
+
<!-- ── Main content ── -->
|
|
518
|
+
<main class="content">
|
|
519
|
+
|
|
520
|
+
<section class="hero">
|
|
521
|
+
<h1>see it running</h1>
|
|
522
|
+
<p>A non-interactive preview of agentgui on a typical machine.</p>
|
|
523
|
+
<p class="sub">Gmail-inspired layout · Claude Code · real project · real output</p>
|
|
524
|
+
</section>
|
|
525
|
+
|
|
526
|
+
<!-- ── Browser mockup ── -->
|
|
527
|
+
<div class="mockup-wrap">
|
|
528
|
+
|
|
529
|
+
<!-- Browser chrome -->
|
|
530
|
+
<div class="browser-chrome">
|
|
531
|
+
<div class="browser-dots">
|
|
532
|
+
<div class="browser-dot dot-red"></div>
|
|
533
|
+
<div class="browser-dot dot-yellow"></div>
|
|
534
|
+
<div class="browser-dot dot-green"></div>
|
|
535
|
+
</div>
|
|
536
|
+
<div class="browser-bar">
|
|
537
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
538
|
+
localhost:3000/gm/
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
|
|
542
|
+
<!-- Viewport -->
|
|
543
|
+
<div class="browser-viewport">
|
|
544
|
+
<div class="app-shell">
|
|
545
|
+
|
|
546
|
+
<!-- Nav rail -->
|
|
547
|
+
<nav class="nav-rail">
|
|
548
|
+
<div class="nav-compose">
|
|
549
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
|
|
550
|
+
Compose
|
|
551
|
+
</div>
|
|
552
|
+
<div class="nav-item active">
|
|
553
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
|
|
554
|
+
<span class="nav-label">Chats</span>
|
|
555
|
+
</div>
|
|
556
|
+
<div class="nav-item">
|
|
557
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8v13H3V8"/><path d="M1 3h22v5H1z"/><path d="M10 12h4"/></svg>
|
|
558
|
+
<span class="nav-label">Archived</span>
|
|
559
|
+
</div>
|
|
560
|
+
<div class="nav-item">
|
|
561
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
|
562
|
+
<span class="nav-label">Tools</span>
|
|
563
|
+
</div>
|
|
564
|
+
</nav>
|
|
565
|
+
|
|
566
|
+
<!-- Sidebar -->
|
|
567
|
+
<div class="sidebar">
|
|
568
|
+
<div class="sidebar-hdr">agentgui</div>
|
|
569
|
+
<div class="sidebar-search">
|
|
570
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
571
|
+
Search in chats
|
|
572
|
+
</div>
|
|
573
|
+
<div class="conv-list">
|
|
574
|
+
<div class="conv-item active">
|
|
575
|
+
<div>
|
|
576
|
+
<div class="conv-title"><span class="streaming-dot"></span>Add Gmail layout</div>
|
|
577
|
+
<div class="conv-meta">claude-code · sonnet-4-7</div>
|
|
578
|
+
</div>
|
|
579
|
+
<div class="conv-time">now</div>
|
|
580
|
+
</div>
|
|
581
|
+
<div class="conv-item hov">
|
|
582
|
+
<div>
|
|
583
|
+
<div class="conv-title">Fix WebSocket race condition</div>
|
|
584
|
+
<div class="conv-meta">claude-code · opus-4-7</div>
|
|
585
|
+
</div>
|
|
586
|
+
<div class="conv-time">2h</div>
|
|
587
|
+
</div>
|
|
588
|
+
<div class="conv-item">
|
|
589
|
+
<div>
|
|
590
|
+
<div class="conv-title">Refactor db-queries into modules</div>
|
|
591
|
+
<div class="conv-meta">claude-code · sonnet-4-6</div>
|
|
592
|
+
</div>
|
|
593
|
+
<div class="conv-time">yesterday</div>
|
|
594
|
+
</div>
|
|
595
|
+
<div class="conv-item">
|
|
596
|
+
<div>
|
|
597
|
+
<div class="conv-title">Add XState tool-install machine</div>
|
|
598
|
+
<div class="conv-meta">opencode · claude-4-7</div>
|
|
599
|
+
</div>
|
|
600
|
+
<div class="conv-time">Mon</div>
|
|
601
|
+
</div>
|
|
602
|
+
<div class="conv-item">
|
|
603
|
+
<div>
|
|
604
|
+
<div class="conv-title">Brand bible chrome implementation</div>
|
|
605
|
+
<div class="conv-meta">claude-code · sonnet-4-6</div>
|
|
606
|
+
</div>
|
|
607
|
+
<div class="conv-time">Sun</div>
|
|
608
|
+
</div>
|
|
609
|
+
<div class="conv-item">
|
|
610
|
+
<div>
|
|
611
|
+
<div class="conv-title">OAuth Codex PKCE flow</div>
|
|
612
|
+
<div class="conv-meta">claude-code · opus-4-5</div>
|
|
613
|
+
</div>
|
|
614
|
+
<div class="conv-time">Sat</div>
|
|
615
|
+
</div>
|
|
616
|
+
<div class="conv-item">
|
|
617
|
+
<div>
|
|
618
|
+
<div class="conv-title">Gemini CLI integration</div>
|
|
619
|
+
<div class="conv-meta">gemini · gemini-2.5-pro</div>
|
|
620
|
+
</div>
|
|
621
|
+
<div class="conv-time">Fri</div>
|
|
622
|
+
</div>
|
|
623
|
+
</div>
|
|
624
|
+
</div>
|
|
625
|
+
|
|
626
|
+
<!-- Main panel -->
|
|
627
|
+
<div class="main">
|
|
628
|
+
<!-- Header -->
|
|
629
|
+
<div class="main-header">
|
|
630
|
+
<div class="hdr-hamburger">
|
|
631
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
|
632
|
+
</div>
|
|
633
|
+
<div class="hdr-search">
|
|
634
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
|
635
|
+
<div class="hdr-search-inner">Search in chats</div>
|
|
636
|
+
</div>
|
|
637
|
+
<div class="hdr-actions">
|
|
638
|
+
<div class="hdr-btn">
|
|
639
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
|
640
|
+
</div>
|
|
641
|
+
<div class="hdr-btn">
|
|
642
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/></svg>
|
|
643
|
+
</div>
|
|
644
|
+
<div class="status-dot"></div>
|
|
645
|
+
<span class="status-label">connected</span>
|
|
646
|
+
</div>
|
|
647
|
+
</div>
|
|
648
|
+
|
|
649
|
+
<!-- Messages -->
|
|
650
|
+
<div class="messages-area">
|
|
651
|
+
<div class="messages-inner">
|
|
652
|
+
|
|
653
|
+
<div class="msg msg-user">
|
|
654
|
+
<div class="msg-role">You</div>
|
|
655
|
+
<div class="msg-body">Make the GUI as Gmail-like as achievable. Add a nav rail, move search to the header, style conversation rows like email list items.</div>
|
|
656
|
+
<div class="msg-ts">10:42 AM</div>
|
|
657
|
+
</div>
|
|
658
|
+
|
|
659
|
+
<div class="tool-block">
|
|
660
|
+
<div class="tool-header">
|
|
661
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
|
662
|
+
<span class="tool-name">Read</span>
|
|
663
|
+
<span style="flex:1;font-size:11px;color:#9aa0a6">static/css/main.css</span>
|
|
664
|
+
<span class="tool-ok">✓ ok</span>
|
|
665
|
+
</div>
|
|
666
|
+
<div class="tool-body">read 620 lines · sidebar · main-panel · conversation-item · input-card</div>
|
|
667
|
+
</div>
|
|
668
|
+
|
|
669
|
+
<div class="tool-block">
|
|
670
|
+
<div class="tool-header">
|
|
671
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
|
672
|
+
<span class="tool-name">Read</span>
|
|
673
|
+
<span style="flex:1;font-size:11px;color:#9aa0a6">static/css/brand-bible.css</span>
|
|
674
|
+
<span class="tool-ok">✓ ok</span>
|
|
675
|
+
</div>
|
|
676
|
+
<div class="tool-body">read 449 lines · design tokens · panel vars · typography</div>
|
|
677
|
+
</div>
|
|
678
|
+
|
|
679
|
+
<div class="tool-block">
|
|
680
|
+
<div class="tool-header">
|
|
681
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
|
682
|
+
<span class="tool-name">Write</span>
|
|
683
|
+
<span style="flex:1;font-size:11px;color:#9aa0a6">static/css/gmail-skin.css</span>
|
|
684
|
+
<span class="tool-ok">✓ written</span>
|
|
685
|
+
</div>
|
|
686
|
+
<div class="tool-body">363 lines · grid layout · nav-rail · gm-* tokens · pill rows · search bar</div>
|
|
687
|
+
</div>
|
|
688
|
+
|
|
689
|
+
<div class="tool-block">
|
|
690
|
+
<div class="tool-header">
|
|
691
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
|
692
|
+
<span class="tool-name">Edit</span>
|
|
693
|
+
<span style="flex:1;font-size:11px;color:#9aa0a6">static/index.html</span>
|
|
694
|
+
<span class="tool-ok">✓ updated</span>
|
|
695
|
+
</div>
|
|
696
|
+
<div class="tool-body">added .nav-rail · .header-search-wrap · loaded gmail-skin.css</div>
|
|
697
|
+
</div>
|
|
698
|
+
|
|
699
|
+
<div class="msg">
|
|
700
|
+
<div class="msg-role">
|
|
701
|
+
<span class="msg-role-badge">claude-code</span>
|
|
702
|
+
Claude Code · sonnet-4-7
|
|
703
|
+
</div>
|
|
704
|
+
<div class="msg-body">
|
|
705
|
+
Done. Here's what changed:<br><br>
|
|
706
|
+
• <strong>Three-column grid</strong> — icon nav rail (72px) → conversation list (280px) → main panel<br>
|
|
707
|
+
• <strong>Nav rail</strong> with Compose FAB + Chats / Archived / Tools icons, pill hover/active states<br>
|
|
708
|
+
• <strong>Header search bar</strong> — prominent pill input spanning the header, syncs to sidebar search<br>
|
|
709
|
+
• <strong>Conversation rows</strong> — bold title, muted meta + timestamp, pill hover highlight in Google blue<br>
|
|
710
|
+
• <strong>Input card</strong> — rounded corners, elevation shadow, Google-blue send pill<br>
|
|
711
|
+
• <strong>Soft borders</strong> — <code>#e0e0e0</code> hairlines + drop shadows instead of brand-bible outlines
|
|
712
|
+
</div>
|
|
713
|
+
<div class="msg-ts">10:43 AM</div>
|
|
714
|
+
</div>
|
|
715
|
+
|
|
716
|
+
</div>
|
|
717
|
+
|
|
718
|
+
<!-- Streaming indicator -->
|
|
719
|
+
<div class="streaming-bar">
|
|
720
|
+
<div class="streaming-dots">
|
|
721
|
+
<span></span><span></span><span></span>
|
|
722
|
+
</div>
|
|
723
|
+
<span class="streaming-agent">Claude Code</span>
|
|
724
|
+
<span style="color:#bdc1c6">is thinking...</span>
|
|
725
|
+
<span style="color:#8ab4f8;font-weight:500;cursor:default;font-size:12px">Cancel</span>
|
|
726
|
+
</div>
|
|
727
|
+
|
|
728
|
+
</div>
|
|
729
|
+
|
|
730
|
+
<!-- Input area -->
|
|
731
|
+
<div class="input-area">
|
|
732
|
+
<div class="input-card">
|
|
733
|
+
<div class="input-text">message agentgui...</div>
|
|
734
|
+
<div class="input-toolbar">
|
|
735
|
+
<div class="input-chips">
|
|
736
|
+
<div class="chip">
|
|
737
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
738
|
+
claude-code
|
|
739
|
+
</div>
|
|
740
|
+
<div class="chip">claude-sonnet-4-7</div>
|
|
741
|
+
</div>
|
|
742
|
+
<div class="input-actions">
|
|
743
|
+
<div class="icon-btn">
|
|
744
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
|
745
|
+
</div>
|
|
746
|
+
<div class="send-btn">
|
|
747
|
+
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
|
|
748
|
+
Send
|
|
749
|
+
</div>
|
|
750
|
+
</div>
|
|
751
|
+
</div>
|
|
752
|
+
</div>
|
|
753
|
+
</div>
|
|
754
|
+
</div><!-- /main -->
|
|
755
|
+
|
|
756
|
+
</div><!-- /app-shell -->
|
|
757
|
+
</div><!-- /viewport -->
|
|
758
|
+
</div><!-- /mockup-wrap -->
|
|
759
|
+
|
|
760
|
+
<!-- ── Features section ── -->
|
|
761
|
+
<section class="features">
|
|
762
|
+
<h2>what you get</h2>
|
|
763
|
+
<div class="feat-grid">
|
|
764
|
+
<div class="feat-card">
|
|
765
|
+
<div class="feat-icon">⚡</div>
|
|
766
|
+
<div class="feat-title">Real-time streaming</div>
|
|
767
|
+
<div class="feat-desc">Watch tokens arrive live. Tool calls, thinking blocks, and results rendered as they happen via WebSocket.</div>
|
|
768
|
+
</div>
|
|
769
|
+
<div class="feat-card">
|
|
770
|
+
<div class="feat-icon">🤖</div>
|
|
771
|
+
<div class="feat-title">14 supported agents</div>
|
|
772
|
+
<div class="feat-desc">Claude Code, Gemini CLI, OpenCode, Kilo, Codex, Goose and more. Auto-detected from PATH at startup.</div>
|
|
773
|
+
</div>
|
|
774
|
+
<div class="feat-card">
|
|
775
|
+
<div class="feat-icon">🗂️</div>
|
|
776
|
+
<div class="feat-title">Persistent SQLite history</div>
|
|
777
|
+
<div class="feat-desc">Every conversation, session, and event stored locally in <code>~/.gmgui/data.db</code>. Resume any conversation.</div>
|
|
778
|
+
</div>
|
|
779
|
+
<div class="feat-card">
|
|
780
|
+
<div class="feat-icon">🎨</div>
|
|
781
|
+
<div class="feat-title">Gmail-inspired UI</div>
|
|
782
|
+
<div class="feat-desc">Icon nav rail, header search, email-row conversation list, elevated input card. Light and dark modes.</div>
|
|
783
|
+
</div>
|
|
784
|
+
<div class="feat-card">
|
|
785
|
+
<div class="feat-icon">🔄</div>
|
|
786
|
+
<div class="feat-title">Queue & steer</div>
|
|
787
|
+
<div class="feat-desc">Queue messages while the agent is running. Steer mid-session with a single click — no need to wait.</div>
|
|
788
|
+
</div>
|
|
789
|
+
<div class="feat-card">
|
|
790
|
+
<div class="feat-icon">🧩</div>
|
|
791
|
+
<div class="feat-title">Plugin system</div>
|
|
792
|
+
<div class="feat-desc">Server-side plugins for auth, tools, workflow and more. Hot-reload in watch mode. Zero restart required.</div>
|
|
793
|
+
</div>
|
|
794
|
+
</div>
|
|
795
|
+
</section>
|
|
796
|
+
|
|
797
|
+
<!-- ── Install section ── -->
|
|
798
|
+
<section class="install-section">
|
|
799
|
+
<h2>get started</h2>
|
|
800
|
+
<div class="install-cmd">$ npx agentgui</div>
|
|
801
|
+
<p class="install-note">Requires Node.js 18+. Opens on http://localhost:3000/gm/ — no account, no cloud, runs entirely local.</p>
|
|
802
|
+
</section>
|
|
803
|
+
|
|
804
|
+
</main>
|
|
805
|
+
|
|
806
|
+
<footer class="footer">
|
|
807
|
+
<span>main</span>
|
|
808
|
+
<span>• agentgui</span>
|
|
809
|
+
<span class="spread"></span>
|
|
810
|
+
<a href="https://github.com/AnEntrypoint/agentgui">github</a>
|
|
811
|
+
<span>• 247420 / mmxxvi</span>
|
|
812
|
+
</footer>
|
|
813
|
+
|
|
814
|
+
</div>
|
|
815
|
+
</body>
|
|
816
|
+
</html>
|