agentgui 1.0.882 → 1.0.884
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/README.md +11 -5
- package/docs/screenshots/conversation-dark.png +0 -0
- package/docs/screenshots/conversation-light.png +0 -0
- package/docs/screenshots/home-dark.png +0 -0
- package/docs/screenshots/home-light.png +0 -0
- package/docs/screenshots/tools-manager.png +0 -0
- package/fixtures/data.db +0 -0
- package/lib/server-startup.js +10 -6
- package/lib/server-startup2.js +1 -0
- package/package.json +4 -2
- package/scripts/build-rippleui.mjs +84 -0
- package/scripts/capture-screenshots.mjs +191 -0
- package/scripts/harvest-fixtures.mjs +211 -0
- package/static/css/gmail-skin.css +378 -0
- package/static/css/main.css +777 -0
- package/static/index.html +1 -4
- package/static/vendor/rippleui.css +35 -1
- package/static/css/ui-fixes-2.css +0 -179
- package/static/css/ui-fixes-3.css +0 -235
- package/static/css/ui-fixes-4.css +0 -156
- package/static/css/ui-fixes.css +0 -193
|
@@ -0,0 +1,378 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* gmail-skin.css — Gmail-inspired visual theme built on RippleUI tokens.
|
|
3
|
+
* Loaded LAST so it wins over main.css and ui-fixes*.css.
|
|
4
|
+
* Intentionally token-heavy: components pick these up automatically via RippleUI.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* ---------- Design tokens (Gmail palette) ---------- */
|
|
8
|
+
:root, [data-theme] {
|
|
9
|
+
/* Gmail accent: blue #1a73e8 = 26 115 232. Compose red: #ea4335 = 234 67 53. */
|
|
10
|
+
--primary: 26 115 232;
|
|
11
|
+
--secondary: 234 67 53;
|
|
12
|
+
--success: 52 168 83;
|
|
13
|
+
--warning: 251 188 4;
|
|
14
|
+
--error: 234 67 53;
|
|
15
|
+
|
|
16
|
+
/* Gmail light: warm-white canvas, paper panels */
|
|
17
|
+
--backgroundPrimary: 248 250 253; /* #f8fafd body */
|
|
18
|
+
--backgroundSecondary: 255 255 255; /* #ffffff panels */
|
|
19
|
+
--content1: 32 33 36; /* #202124 primary text */
|
|
20
|
+
--content2: 95 99 104; /* #5f6368 secondary text */
|
|
21
|
+
--content3: 154 160 166; /* #9aa0a6 muted */
|
|
22
|
+
--border: 218 220 224; /* #dadce0 hairline */
|
|
23
|
+
|
|
24
|
+
/* AgentGUI legacy variables that many custom rules still target */
|
|
25
|
+
--color-primary: #1a73e8;
|
|
26
|
+
--color-primary-hover: #1557b0;
|
|
27
|
+
--color-bg-primary: #ffffff;
|
|
28
|
+
--color-bg-secondary: #f8fafd;
|
|
29
|
+
--color-bg-tertiary: #f1f3f4;
|
|
30
|
+
--color-text-primary: #202124;
|
|
31
|
+
--color-text-secondary: #5f6368;
|
|
32
|
+
--color-text-muted: #9aa0a6;
|
|
33
|
+
--color-border: #dadce0;
|
|
34
|
+
--color-border-hover: #c4c7c5;
|
|
35
|
+
|
|
36
|
+
/* Gmail-style radii + typography */
|
|
37
|
+
--radius-sm: 4px;
|
|
38
|
+
--radius-md: 8px;
|
|
39
|
+
--radius-lg: 16px;
|
|
40
|
+
--radius-pill: 9999px;
|
|
41
|
+
--font-sans: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
|
42
|
+
|
|
43
|
+
/* Elevations */
|
|
44
|
+
--elev-0: none;
|
|
45
|
+
--elev-1: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
|
|
46
|
+
--elev-2: 0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
html.dark, [data-theme=dark] {
|
|
50
|
+
--backgroundPrimary: 32 33 36; /* #202124 body */
|
|
51
|
+
--backgroundSecondary: 40 42 46; /* #282a2e panels */
|
|
52
|
+
--content1: 232 234 237; /* primary text */
|
|
53
|
+
--content2: 189 193 198; /* secondary */
|
|
54
|
+
--content3: 154 160 166; /* muted */
|
|
55
|
+
--border: 63 67 73; /* #3f4349 */
|
|
56
|
+
|
|
57
|
+
--color-bg-primary: #202124;
|
|
58
|
+
--color-bg-secondary: #282a2e;
|
|
59
|
+
--color-bg-tertiary: #35363a;
|
|
60
|
+
--color-text-primary: #e8eaed;
|
|
61
|
+
--color-text-secondary: #bdc1c6;
|
|
62
|
+
--color-text-muted: #9aa0a6;
|
|
63
|
+
--color-border: #3f4349;
|
|
64
|
+
--color-border-hover: #5f6368;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* ---------- Base typography ---------- */
|
|
68
|
+
html, body {
|
|
69
|
+
font-family: var(--font-sans);
|
|
70
|
+
font-size: 14px; /* Gmail's density baseline */
|
|
71
|
+
color: var(--color-text-primary);
|
|
72
|
+
background: var(--color-bg-secondary);
|
|
73
|
+
-webkit-font-smoothing: antialiased;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* ---------- Top bar (main-header) — Gmail style ---------- */
|
|
77
|
+
.main-header {
|
|
78
|
+
background: var(--color-bg-primary) !important;
|
|
79
|
+
border-bottom: 1px solid var(--color-border) !important;
|
|
80
|
+
box-shadow: none !important;
|
|
81
|
+
height: 64px;
|
|
82
|
+
padding: 0 16px !important;
|
|
83
|
+
gap: 12px;
|
|
84
|
+
}
|
|
85
|
+
.main-header .header-title {
|
|
86
|
+
font-family: 'Product Sans', 'Google Sans', var(--font-sans);
|
|
87
|
+
font-size: 20px;
|
|
88
|
+
font-weight: 400;
|
|
89
|
+
color: var(--color-text-secondary);
|
|
90
|
+
letter-spacing: 0;
|
|
91
|
+
}
|
|
92
|
+
.main-header .sidebar-toggle-btn,
|
|
93
|
+
.main-header .header-icon-btn,
|
|
94
|
+
.main-header .theme-toggle-btn {
|
|
95
|
+
width: 40px;
|
|
96
|
+
height: 40px;
|
|
97
|
+
border-radius: var(--radius-pill) !important;
|
|
98
|
+
background: transparent !important;
|
|
99
|
+
color: var(--color-text-secondary) !important;
|
|
100
|
+
transition: background-color .15s;
|
|
101
|
+
}
|
|
102
|
+
.main-header .sidebar-toggle-btn:hover,
|
|
103
|
+
.main-header .header-icon-btn:hover,
|
|
104
|
+
.main-header .theme-toggle-btn:hover {
|
|
105
|
+
background: var(--color-bg-tertiary) !important;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* ---------- Sidebar — Gmail-style folder list ---------- */
|
|
109
|
+
.sidebar {
|
|
110
|
+
background: var(--color-bg-secondary) !important;
|
|
111
|
+
border-right: 0 !important;
|
|
112
|
+
padding-top: 8px;
|
|
113
|
+
}
|
|
114
|
+
.sidebar-header {
|
|
115
|
+
padding: 8px 16px 16px !important;
|
|
116
|
+
border-bottom: 0 !important;
|
|
117
|
+
}
|
|
118
|
+
.sidebar-header h2 {
|
|
119
|
+
font-family: 'Product Sans', 'Google Sans', var(--font-sans);
|
|
120
|
+
font-weight: 500;
|
|
121
|
+
font-size: 18px;
|
|
122
|
+
color: var(--color-text-primary);
|
|
123
|
+
}
|
|
124
|
+
.sidebar-new-btn {
|
|
125
|
+
background: var(--color-bg-primary) !important;
|
|
126
|
+
color: var(--color-text-primary) !important;
|
|
127
|
+
border-radius: var(--radius-lg) !important;
|
|
128
|
+
box-shadow: var(--elev-1) !important;
|
|
129
|
+
padding: 14px 24px !important;
|
|
130
|
+
font-weight: 500 !important;
|
|
131
|
+
letter-spacing: .2px;
|
|
132
|
+
transition: box-shadow .15s, background-color .15s;
|
|
133
|
+
border: 0 !important;
|
|
134
|
+
}
|
|
135
|
+
.sidebar-new-btn:hover {
|
|
136
|
+
box-shadow: var(--elev-2) !important;
|
|
137
|
+
background: var(--color-bg-tertiary) !important;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.sidebar-search-bar {
|
|
141
|
+
padding: 8px 16px !important;
|
|
142
|
+
background: var(--color-bg-secondary) !important;
|
|
143
|
+
border-bottom: 0 !important;
|
|
144
|
+
}
|
|
145
|
+
.sidebar-search-input {
|
|
146
|
+
background: var(--color-bg-tertiary) !important;
|
|
147
|
+
border: 0 !important;
|
|
148
|
+
border-radius: var(--radius-md) !important;
|
|
149
|
+
height: 36px;
|
|
150
|
+
padding: 0 14px !important;
|
|
151
|
+
font-size: 13px !important;
|
|
152
|
+
}
|
|
153
|
+
.sidebar-search-input:focus {
|
|
154
|
+
background: var(--color-bg-primary) !important;
|
|
155
|
+
box-shadow: var(--elev-1) !important;
|
|
156
|
+
outline: 0 !important;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* Sidebar list: Gmail's pill-selected row shape */
|
|
160
|
+
.sidebar-list {
|
|
161
|
+
padding: 4px 8px !important;
|
|
162
|
+
gap: 0 !important;
|
|
163
|
+
}
|
|
164
|
+
.sidebar-list li,
|
|
165
|
+
.sidebar-list > *,
|
|
166
|
+
.conversation-item {
|
|
167
|
+
border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
|
|
168
|
+
margin: 0 !important;
|
|
169
|
+
padding: 8px 16px 8px 20px !important;
|
|
170
|
+
font-size: 13px !important;
|
|
171
|
+
line-height: 1.35;
|
|
172
|
+
color: var(--color-text-primary) !important;
|
|
173
|
+
transition: background-color .1s;
|
|
174
|
+
cursor: pointer;
|
|
175
|
+
}
|
|
176
|
+
.sidebar-list li:hover,
|
|
177
|
+
.conversation-item:hover {
|
|
178
|
+
background: var(--color-bg-tertiary) !important;
|
|
179
|
+
}
|
|
180
|
+
.sidebar-list li.active,
|
|
181
|
+
.sidebar-list li[aria-selected="true"],
|
|
182
|
+
.conversation-item.active {
|
|
183
|
+
background: #fce8e6 !important; /* Gmail red-tinted active: light */
|
|
184
|
+
color: #d93025 !important; /* Gmail red text on active */
|
|
185
|
+
font-weight: 500 !important;
|
|
186
|
+
}
|
|
187
|
+
html.dark .sidebar-list li.active,
|
|
188
|
+
html.dark .sidebar-list li[aria-selected="true"],
|
|
189
|
+
html.dark .conversation-item.active,
|
|
190
|
+
[data-theme=dark] .sidebar-list li.active,
|
|
191
|
+
[data-theme=dark] .conversation-item.active {
|
|
192
|
+
background: rgba(234,67,53,.15) !important;
|
|
193
|
+
color: #f28b82 !important;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.sidebar-empty {
|
|
197
|
+
padding: 24px 20px !important;
|
|
198
|
+
color: var(--color-text-muted) !important;
|
|
199
|
+
font-size: 13px !important;
|
|
200
|
+
text-align: center;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* ---------- Input area — Gmail compose card ---------- */
|
|
204
|
+
.input-section {
|
|
205
|
+
padding: 16px 24px 24px !important;
|
|
206
|
+
background: transparent !important;
|
|
207
|
+
border-top: 0 !important;
|
|
208
|
+
}
|
|
209
|
+
.input-card {
|
|
210
|
+
background: var(--color-bg-primary) !important;
|
|
211
|
+
border: 1px solid var(--color-border) !important;
|
|
212
|
+
border-radius: var(--radius-lg) !important;
|
|
213
|
+
box-shadow: var(--elev-1) !important;
|
|
214
|
+
overflow: hidden;
|
|
215
|
+
transition: box-shadow .15s;
|
|
216
|
+
}
|
|
217
|
+
.input-card:focus-within {
|
|
218
|
+
box-shadow: var(--elev-2) !important;
|
|
219
|
+
border-color: transparent !important;
|
|
220
|
+
}
|
|
221
|
+
.input-card-textarea {
|
|
222
|
+
background: transparent !important;
|
|
223
|
+
border: 0 !important;
|
|
224
|
+
padding: 16px 20px !important;
|
|
225
|
+
font-size: 14px !important;
|
|
226
|
+
font-family: var(--font-sans) !important;
|
|
227
|
+
color: var(--color-text-primary) !important;
|
|
228
|
+
min-height: 52px;
|
|
229
|
+
}
|
|
230
|
+
.input-card-textarea:focus {
|
|
231
|
+
outline: 0 !important;
|
|
232
|
+
box-shadow: none !important;
|
|
233
|
+
}
|
|
234
|
+
.input-card-toolbar {
|
|
235
|
+
padding: 8px 12px !important;
|
|
236
|
+
border-top: 1px solid var(--color-bg-tertiary) !important;
|
|
237
|
+
background: transparent !important;
|
|
238
|
+
}
|
|
239
|
+
.input-icon-btn {
|
|
240
|
+
width: 36px !important;
|
|
241
|
+
height: 36px !important;
|
|
242
|
+
border-radius: var(--radius-pill) !important;
|
|
243
|
+
background: transparent !important;
|
|
244
|
+
color: var(--color-text-secondary) !important;
|
|
245
|
+
}
|
|
246
|
+
.input-icon-btn:hover {
|
|
247
|
+
background: var(--color-bg-tertiary) !important;
|
|
248
|
+
}
|
|
249
|
+
.input-send-btn {
|
|
250
|
+
background: rgb(var(--primary)) !important;
|
|
251
|
+
color: white !important;
|
|
252
|
+
border-radius: var(--radius-pill) !important;
|
|
253
|
+
width: auto !important;
|
|
254
|
+
min-width: 40px;
|
|
255
|
+
padding: 0 16px !important;
|
|
256
|
+
}
|
|
257
|
+
.input-send-btn:hover {
|
|
258
|
+
background: rgb(var(--primary) / .85) !important;
|
|
259
|
+
box-shadow: var(--elev-1) !important;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
/* Chip selects (agent/model) */
|
|
263
|
+
.input-chip-select {
|
|
264
|
+
background: var(--color-bg-tertiary) !important;
|
|
265
|
+
border: 0 !important;
|
|
266
|
+
border-radius: var(--radius-pill) !important;
|
|
267
|
+
height: 32px;
|
|
268
|
+
padding: 0 12px !important;
|
|
269
|
+
font-size: 12px !important;
|
|
270
|
+
color: var(--color-text-primary) !important;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
/* ---------- Welcome screen — Google-y centered logo ---------- */
|
|
274
|
+
.welcome-logo {
|
|
275
|
+
background: linear-gradient(135deg, #4285f4 0%, #34a853 33%, #fbbc04 66%, #ea4335 100%) !important;
|
|
276
|
+
color: white !important;
|
|
277
|
+
width: 96px;
|
|
278
|
+
height: 96px;
|
|
279
|
+
border-radius: 50%;
|
|
280
|
+
font-family: 'Product Sans', 'Google Sans', var(--font-sans);
|
|
281
|
+
font-size: 56px;
|
|
282
|
+
font-weight: 500;
|
|
283
|
+
}
|
|
284
|
+
.welcome-title {
|
|
285
|
+
font-family: 'Product Sans', 'Google Sans', var(--font-sans);
|
|
286
|
+
font-weight: 400;
|
|
287
|
+
font-size: 32px !important;
|
|
288
|
+
color: var(--color-text-primary) !important;
|
|
289
|
+
margin-top: 16px !important;
|
|
290
|
+
}
|
|
291
|
+
.welcome-subtitle {
|
|
292
|
+
color: var(--color-text-secondary) !important;
|
|
293
|
+
font-size: 14px !important;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
/* ---------- Status / connection badge ---------- */
|
|
297
|
+
.status-badge {
|
|
298
|
+
background: transparent !important;
|
|
299
|
+
border: 0 !important;
|
|
300
|
+
font-size: 11px !important;
|
|
301
|
+
color: var(--color-text-muted) !important;
|
|
302
|
+
gap: 6px;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
/* ---------- Streaming status bar (floating pill) ---------- */
|
|
306
|
+
.streaming-status-bar {
|
|
307
|
+
background: #202124 !important;
|
|
308
|
+
color: #e8eaed !important;
|
|
309
|
+
border-radius: var(--radius-pill) !important;
|
|
310
|
+
box-shadow: var(--elev-2) !important;
|
|
311
|
+
padding: 10px 20px !important;
|
|
312
|
+
border: 0 !important;
|
|
313
|
+
}
|
|
314
|
+
.status-cancel-btn {
|
|
315
|
+
background: transparent !important;
|
|
316
|
+
color: #8ab4f8 !important;
|
|
317
|
+
border: 0 !important;
|
|
318
|
+
font-weight: 500;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
/* ---------- Messages area background ---------- */
|
|
322
|
+
#output-scroll,
|
|
323
|
+
.messages-wrapper {
|
|
324
|
+
background: var(--color-bg-secondary) !important;
|
|
325
|
+
}
|
|
326
|
+
#output {
|
|
327
|
+
max-width: 900px;
|
|
328
|
+
margin: 0 auto;
|
|
329
|
+
padding: 24px 16px;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
/* ---------- Overflow menu (3-dot dropdown) ---------- */
|
|
333
|
+
.sidebar-overflow-btn {
|
|
334
|
+
width: 32px;
|
|
335
|
+
height: 32px;
|
|
336
|
+
border-radius: var(--radius-pill) !important;
|
|
337
|
+
background: transparent !important;
|
|
338
|
+
color: var(--color-text-secondary) !important;
|
|
339
|
+
}
|
|
340
|
+
.sidebar-overflow-btn:hover {
|
|
341
|
+
background: var(--color-bg-tertiary) !important;
|
|
342
|
+
}
|
|
343
|
+
.sidebar-overflow-menu {
|
|
344
|
+
background: var(--color-bg-primary) !important;
|
|
345
|
+
box-shadow: var(--elev-2) !important;
|
|
346
|
+
border: 0 !important;
|
|
347
|
+
border-radius: var(--radius-md) !important;
|
|
348
|
+
padding: 8px 0 !important;
|
|
349
|
+
}
|
|
350
|
+
.sidebar-overflow-menu-item {
|
|
351
|
+
padding: 8px 20px !important;
|
|
352
|
+
font-size: 13px !important;
|
|
353
|
+
color: var(--color-text-primary) !important;
|
|
354
|
+
border-radius: 0 !important;
|
|
355
|
+
}
|
|
356
|
+
.sidebar-overflow-menu-item:hover {
|
|
357
|
+
background: var(--color-bg-tertiary) !important;
|
|
358
|
+
}
|
|
359
|
+
.sidebar-overflow-menu-item.danger {
|
|
360
|
+
color: #d93025 !important;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
/* ---------- Modals (folder browser, tools popup) ---------- */
|
|
364
|
+
.folder-modal,
|
|
365
|
+
.tools-popup-content {
|
|
366
|
+
border-radius: var(--radius-lg) !important;
|
|
367
|
+
box-shadow: var(--elev-2) !important;
|
|
368
|
+
border: 0 !important;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
/* ---------- Small cleanup: remove double borders ---------- */
|
|
372
|
+
.sidebar, .sidebar-header, .main-header { border-right: 0; }
|
|
373
|
+
|
|
374
|
+
/* ---------- RippleUI preflight recovery: restore list/heading defaults for content ---------- */
|
|
375
|
+
#output h1, #output h2, #output h3, #output h4 { font-weight: 500; margin: 1em 0 .5em; }
|
|
376
|
+
#output ul { list-style: disc; padding-left: 1.5em; }
|
|
377
|
+
#output ol { list-style: decimal; padding-left: 1.5em; }
|
|
378
|
+
#output p { margin: .5em 0; }
|