agentgui 1.0.884 → 1.0.885

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agentgui",
3
- "version": "1.0.884",
3
+ "version": "1.0.885",
4
4
  "description": "Multi-agent ACP client with real-time communication",
5
5
  "type": "module",
6
6
  "main": "electron/main.js",
@@ -0,0 +1,450 @@
1
+ :root {
2
+ /* Brand palette — mirrors design/colors_and_type.css exactly */
3
+ --paper: #EFE9DD;
4
+ --ink: #0B0B09;
5
+ --acid: #B8FF00;
6
+ --link: #1F4DFF;
7
+ --warn: #FF3B1F;
8
+ --live: #00A86B;
9
+
10
+ --green: #247420;
11
+ --green-2: #92CEAC;
12
+ --green-deep: #1c5a19;
13
+ --green-fg: #FFFFFF;
14
+ --purple: #420247;
15
+ --purple-fg: #FFFFFF;
16
+ --mascot: #E84B8A;
17
+ --mascot-fg: #FFFFFF;
18
+ --sun: #FFD100;
19
+ --flame: #FF5C1A;
20
+ --sky: #3B82F6;
21
+
22
+ /* Panel surface tokens — light */
23
+ --panel-0: var(--paper);
24
+ --panel-1: #f6f1e7;
25
+ --panel-2: #ece5d8;
26
+ --panel-3: #ddd4c3;
27
+ --panel-hover: #e6dece;
28
+ --panel-select: #d8eed6;
29
+ --panel-text: var(--ink);
30
+ --panel-text-2: #4a473f;
31
+ --panel-text-3: #6d675b;
32
+ --panel-accent: var(--green);
33
+ --panel-accent-2: var(--green-deep);
34
+ --panel-accent-fg: #ffffff;
35
+ --panel-shadow: none;
36
+ --panel-shadow-top: none;
37
+
38
+ /* Semantic color aliases */
39
+ --color-primary: var(--green);
40
+ --color-primary-dark: var(--green-deep);
41
+ --color-bg-primary: var(--panel-0);
42
+ --color-bg-secondary: var(--panel-1);
43
+ --color-bg-raised: var(--panel-1);
44
+ --color-bg-hover: var(--panel-hover);
45
+ --color-bg-code: #f3eddf;
46
+ --color-code-text: var(--ink);
47
+ --color-code-border: var(--ink);
48
+ --color-thinking-bg: #efe7d5;
49
+ --color-text-primary: var(--panel-text);
50
+ --color-text-secondary: var(--panel-text-2);
51
+ --color-text-muted: var(--panel-text-3);
52
+ --color-border: var(--ink);
53
+ --color-success: var(--green);
54
+ --color-error: var(--warn);
55
+ --color-warning: #b36f00;
56
+ --color-info: var(--link);
57
+ --color-focus-ring: rgba(36, 116, 32, 0.2);
58
+
59
+ /* Mono color tokens */
60
+ --mono-1: var(--green);
61
+ --mono-2: var(--purple);
62
+ --mono-3: var(--mascot);
63
+ --mono-4: var(--sun);
64
+ --mono-5: var(--warn);
65
+ --mono-6: var(--sky);
66
+
67
+ /* Foreground tokens */
68
+ --fg: var(--ink);
69
+ --fg-3: var(--panel-text-3);
70
+ --bg: var(--paper);
71
+ --bg-2: var(--panel-2);
72
+
73
+ /* Typography */
74
+ --ff-display: "Archivo Black", "Arial Black", "Times New Roman", serif;
75
+ --ff-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
76
+ --ff-body: "Instrument Serif", Georgia, serif;
77
+ --ff-prose: "Instrument Serif", Georgia, serif;
78
+
79
+ /* Font sizes */
80
+ --fs-micro: 9px;
81
+ --fs-xs: 11px;
82
+ --fs-tiny: 11px;
83
+ --fs-sm: 12px;
84
+ --fs-body: 13px;
85
+ --fs-lg: 14px;
86
+ --fs-h3: 14px;
87
+ --fs-h4: 13px;
88
+ --fs-h2: 28px;
89
+ --fs-h1: 48px;
90
+ --fs-hero: 96px;
91
+
92
+ /* Line heights */
93
+ --lh-tight: 1.05;
94
+ --lh-snug: 1.2;
95
+ --lh-base: 1.5;
96
+ --lh-long: 1.6;
97
+
98
+ /* Letter spacing */
99
+ --tr-tight: -0.02em;
100
+ --tr-label: 0.08em;
101
+ --tr-caps: 0.05em;
102
+
103
+ /* Spacing scale (4px base) */
104
+ --space-1: 4px;
105
+ --space-2: 8px;
106
+ --space-3: 12px;
107
+ --space-4: 16px;
108
+ --space-5: 24px;
109
+ --space-6: 32px;
110
+ --space-7: 48px;
111
+ --space-8: 64px;
112
+
113
+ /* Border radius — flat by default */
114
+ --r-1: 0;
115
+ --r-2: 0;
116
+ --r-3: 0;
117
+ --r-pill: 9999px;
118
+ --radius-sm: 0;
119
+ --radius-md: 0;
120
+ --radius-lg: 0;
121
+ --radius-xl: 0;
122
+
123
+ /* Border widths */
124
+ --bw-hair: 1px;
125
+ --bw-rule: 2px;
126
+
127
+ /* Measure */
128
+ --measure: 72ch;
129
+
130
+ /* Motion */
131
+ --dur-snap: 80ms;
132
+ --dur-base: 160ms;
133
+ --ease: cubic-bezier(0.2, 0, 0, 1);
134
+
135
+ /* Surface overlays */
136
+ --surface-2: rgba(0,0,0,0.04);
137
+ --surface-ink-2: rgba(255,255,255,0.06);
138
+
139
+ --shadow-sm: none;
140
+ --shadow-md: none;
141
+ --shadow-lg: none;
142
+ }
143
+
144
+ html.dark,
145
+ [data-theme="dark"] {
146
+ --panel-0: #0B0B09;
147
+ --panel-1: #141411;
148
+ --panel-2: #1f1f1a;
149
+ --panel-3: #2a2a23;
150
+ --panel-hover: #24241f;
151
+ --panel-select: #1f3520;
152
+ --panel-text: #EFE9DD;
153
+ --panel-text-2: #d2cab9;
154
+ --panel-text-3: #afa797;
155
+ --panel-accent: var(--green-2);
156
+ --panel-accent-2: var(--green-2);
157
+ --panel-accent-fg: var(--ink);
158
+ --panel-shadow: none;
159
+
160
+ --mono-1: var(--green-2);
161
+ --mono-2: #c084fc;
162
+ --mono-3: var(--mascot);
163
+ --mono-4: var(--sun);
164
+ --mono-5: var(--warn);
165
+ --mono-6: var(--sky);
166
+
167
+ --fg: var(--panel-text);
168
+ --fg-3: var(--panel-text-3);
169
+ --bg: var(--panel-0);
170
+ --bg-2: var(--panel-2);
171
+
172
+ --color-primary: var(--green-2);
173
+ --color-primary-dark: #7ebe9a;
174
+ --color-bg-primary: var(--panel-0);
175
+ --color-bg-secondary: var(--panel-1);
176
+ --color-bg-raised: var(--panel-1);
177
+ --color-bg-hover: var(--panel-hover);
178
+ --color-bg-code: #1d1d18;
179
+ --color-code-text: var(--panel-text);
180
+ --color-code-border: var(--panel-text);
181
+ --color-thinking-bg: #1a1f18;
182
+ --color-text-primary: var(--panel-text);
183
+ --color-text-secondary: var(--panel-text-2);
184
+ --color-text-muted: var(--panel-text-3);
185
+ --color-border: var(--panel-text);
186
+ --color-focus-ring: rgba(146, 206, 172, 0.25);
187
+ }
188
+
189
+ html,
190
+ body {
191
+ background: var(--color-bg-primary);
192
+ color: var(--color-text-primary);
193
+ font-family: var(--ff-mono);
194
+ letter-spacing: 0;
195
+ }
196
+
197
+ * {
198
+ border-radius: 0 !important;
199
+ box-shadow: none !important;
200
+ }
201
+
202
+ .sidebar,
203
+ .main-header,
204
+ .view-toggle-bar,
205
+ .input-section,
206
+ .sidebar-search-bar,
207
+ .clone-input-bar,
208
+ .bulk-action-bar,
209
+ .pm2-monitor-panel,
210
+ .tools-popup-content,
211
+ .folder-modal,
212
+ .status-badge,
213
+ .input-card,
214
+ .cli,
215
+ .panel,
216
+ .kv,
217
+ .welcome-agents-grid > * {
218
+ border: 1px solid var(--color-border) !important;
219
+ }
220
+
221
+ .sidebar {
222
+ background: var(--panel-1);
223
+ }
224
+
225
+ .sidebar-header h2,
226
+ .header-title,
227
+ .welcome-title {
228
+ font-family: var(--ff-display);
229
+ text-transform: lowercase;
230
+ letter-spacing: -0.02em;
231
+ }
232
+
233
+ .sidebar-header h2,
234
+ .header-title {
235
+ font-size: 1rem;
236
+ }
237
+
238
+ .main-header,
239
+ .view-toggle-bar,
240
+ .sidebar-search-bar,
241
+ .input-section {
242
+ background: var(--panel-0);
243
+ }
244
+
245
+ .sidebar-new-btn,
246
+ .clone-go-btn,
247
+ .input-send-btn,
248
+ .btn-primary,
249
+ .view-toggle-btn.active,
250
+ .status-indicator[data-status="connected"],
251
+ .streaming-block-system,
252
+ .message-tool,
253
+ .conversation-item.active {
254
+ background: var(--panel-accent) !important;
255
+ color: var(--panel-accent-fg) !important;
256
+ }
257
+
258
+ .sidebar-overflow-btn,
259
+ .sidebar-toggle-btn,
260
+ .theme-toggle-btn,
261
+ .header-icon-btn,
262
+ .input-icon-btn,
263
+ .view-toggle-btn,
264
+ .btn,
265
+ .btn-ghost,
266
+ .status-cancel-btn,
267
+ .clone-cancel-btn,
268
+ .tools-popup-refresh-btn {
269
+ background: transparent;
270
+ color: var(--color-text-secondary);
271
+ border: 1px solid var(--color-border) !important;
272
+ }
273
+
274
+ .sidebar-overflow-btn:hover,
275
+ .sidebar-toggle-btn:hover,
276
+ .theme-toggle-btn:hover,
277
+ .header-icon-btn:hover,
278
+ .input-icon-btn:hover,
279
+ .view-toggle-btn:hover,
280
+ .btn:hover,
281
+ .btn-ghost:hover,
282
+ .status-cancel-btn:hover,
283
+ .clone-cancel-btn:hover,
284
+ .tools-popup-refresh-btn:hover {
285
+ background: var(--panel-hover) !important;
286
+ color: var(--color-text-primary) !important;
287
+ }
288
+
289
+ .welcome-logo {
290
+ background: var(--purple);
291
+ color: #fff;
292
+ border: 1px solid var(--color-border);
293
+ font-family: var(--ff-display);
294
+ }
295
+
296
+ .welcome-subtitle {
297
+ font-family: var(--ff-mono);
298
+ text-transform: lowercase;
299
+ color: var(--color-text-secondary);
300
+ }
301
+
302
+ .message {
303
+ border: 1px solid var(--color-border);
304
+ background: var(--panel-1);
305
+ }
306
+
307
+ .message-user {
308
+ background: #dcefd9;
309
+ }
310
+
311
+ html.dark .message-user {
312
+ background: #1f3520;
313
+ }
314
+
315
+ .message-role,
316
+ .conversation-item-meta,
317
+ .status-badge,
318
+ .sidebar-empty,
319
+ .sidebar-search-input,
320
+ .input-chip-select,
321
+ .input-card-textarea,
322
+ .sidebar-list,
323
+ .streaming-status-bar,
324
+ .kv td:first-child {
325
+ font-family: var(--ff-mono);
326
+ }
327
+
328
+ .message-content,
329
+ .message-text,
330
+ .welcome-subtitle,
331
+ .main-panel p {
332
+ font-family: var(--ff-body);
333
+ font-size: 0.98rem;
334
+ }
335
+
336
+ a,
337
+ .prose a,
338
+ .message-content a {
339
+ color: var(--link);
340
+ text-decoration: underline;
341
+ text-underline-offset: 2px;
342
+ }
343
+
344
+ a:hover,
345
+ .prose a:hover,
346
+ .message-content a:hover {
347
+ color: var(--panel-accent);
348
+ }
349
+
350
+ .input-card,
351
+ .sidebar-search-input,
352
+ .clone-input,
353
+ .input-chip-select,
354
+ .input-card-textarea,
355
+ .tools-popup-content,
356
+ .folder-modal,
357
+ .message-code,
358
+ pre,
359
+ code {
360
+ background: var(--color-bg-secondary) !important;
361
+ color: var(--color-text-primary);
362
+ }
363
+
364
+ .message-code,
365
+ pre,
366
+ code {
367
+ border: 1px solid var(--color-border);
368
+ }
369
+
370
+ .status-badge,
371
+ .app-shell,
372
+ .main-panel,
373
+ #output-scroll,
374
+ .messages-wrapper,
375
+ .sidebar-list,
376
+ .conversation-item,
377
+ .streaming-status-bar,
378
+ .input-card-toolbar,
379
+ .card,
380
+ .panel-body {
381
+ border-color: var(--color-border) !important;
382
+ }
383
+
384
+ .streaming-status-bar {
385
+ background: var(--panel-1);
386
+ }
387
+
388
+ .status-agent-name {
389
+ color: var(--panel-accent);
390
+ font-weight: 700;
391
+ }
392
+
393
+ .tools-popup,
394
+ .folder-modal-overlay {
395
+ background: rgba(11, 11, 9, 0.5) !important;
396
+ }
397
+
398
+ .drop-zone-overlay {
399
+ background: rgba(36, 116, 32, 0.12);
400
+ border: 1px dashed var(--color-border);
401
+ }
402
+
403
+ ::-webkit-scrollbar-thumb {
404
+ background: var(--panel-3);
405
+ }
406
+
407
+ @media (max-width: 768px) {
408
+ .sidebar {
409
+ border-right: 1px solid var(--color-border) !important;
410
+ }
411
+ }
412
+
413
+ /* Selection — mascot brand color */
414
+ ::selection { background: var(--mascot); color: var(--mascot-fg); }
415
+
416
+ /* Mono color utilities — colorful mono, the 247420 signature */
417
+ .mono-green { color: var(--mono-1); }
418
+ .mono-purple { color: var(--mono-2); }
419
+ .mono-mascot { color: var(--mono-3); }
420
+ .mono-sun { color: var(--mono-4); }
421
+ .mono-flame { color: var(--mono-5); }
422
+ .mono-sky { color: var(--mono-6); }
423
+ .mono-ink { color: var(--fg); }
424
+ .mono-dim { color: var(--fg-3); }
425
+
426
+ /* Highlight blocks — mono run on tinted bg */
427
+ .hl-green { background: var(--green); color: var(--green-fg); padding: 0.08em 0.4em; }
428
+ .hl-purple { background: var(--purple); color: var(--purple-fg); padding: 0.08em 0.4em; }
429
+ .hl-mascot { background: var(--mascot); color: var(--mascot-fg); padding: 0.08em 0.4em; }
430
+ .hl-sun { background: var(--sun); color: var(--ink); padding: 0.08em 0.4em; }
431
+
432
+ /* Syntax role classes */
433
+ .m-k { color: var(--mono-2); font-weight: 500; }
434
+ .m-s { color: var(--mono-4); }
435
+ .m-n { color: var(--mono-1); }
436
+ .m-c { color: var(--fg-3); font-style: italic; }
437
+ .m-tag{ color: var(--mono-3); }
438
+ .m-op { color: var(--mono-5); }
439
+ .m-ref{ color: var(--mono-6); text-decoration: underline; text-underline-offset: 3px; }
440
+
441
+ /* Row hover — translate + shadow like design system */
442
+ .conversation-item:hover {
443
+ transform: translateX(-1px);
444
+ }
445
+
446
+ /* Focus ring — green glow */
447
+ :focus-visible {
448
+ outline: 2px solid var(--panel-accent) !important;
449
+ outline-offset: 2px;
450
+ }
package/static/index.html CHANGED
@@ -3,11 +3,14 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6
- <meta name="description" content="AgentGUI - Real-time Claude Code Execution Visualization">
7
- <meta name="theme-color" content="#3b82f6" media="(prefers-color-scheme: light)">
8
- <meta name="theme-color" content="#1e293b" media="(prefers-color-scheme: dark)">
9
- <title>AgentGUI</title>
10
- <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%233b82f6'/%3E%3Ctext x='50' y='68' font-size='50' font-family='sans-serif' font-weight='bold' fill='white' text-anchor='middle'%3EG%3C/text%3E%3C/svg%3E">
6
+ <meta name="description" content="247420 branded AgentGUI - real-time multi-agent coding interface">
7
+ <meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)">
8
+ <meta name="theme-color" content="#1f1f1a" media="(prefers-color-scheme: dark)">
9
+ <title>247420 // AgentGUI</title>
10
+ <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23247420'/%3E%3Ctext x='50' y='68' font-size='50' font-family='sans-serif' font-weight='bold' fill='%23EFE9DD' text-anchor='middle'%3EG%3C/text%3E%3C/svg%3E">
11
+ <link rel="preconnect" href="https://fonts.googleapis.com">
12
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif&display=swap">
11
14
  <link rel="preload" href="/gm/css/main.css" as="style">
12
15
  <link rel="preload" href="/gm/lib/xstate.umd.min.js" as="script">
13
16
  <link rel="preload" href="/gm/lib/msgpackr.min.js" as="script">
@@ -42,6 +45,7 @@
42
45
  <link rel="stylesheet" href="/gm/css/main.css">
43
46
  <link rel="stylesheet" href="/gm/css/tools-popup.css" media="print" onload="this.media='all'">
44
47
  <link rel="stylesheet" href="/gm/css/gmail-skin.css">
48
+ <link rel="stylesheet" href="/gm/css/brand-bible.css">
45
49
  </head>
46
50
  <body>
47
51
  <a href="#app" class="skip-link">Skip to conversation</a>
@@ -397,3 +401,6 @@
397
401
  </script>
398
402
  </body>
399
403
  </html>
404
+
405
+
406
+