agentgui 1.0.895 → 1.0.896
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/AGENTS.md +13 -0
- package/CHANGELOG.md +11 -0
- package/package.json +1 -1
- package/static/css/app-shell.css +419 -0
- package/static/css/brand-bible.css +126 -1
- package/static/css/colors_and_type.css +568 -0
- package/static/index.html +7 -7
- package/static/js/client-ui2.js +19 -18
- package/static/theme.js +1 -2
package/AGENTS.md
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# AgentGUI — Agent Notes
|
|
2
|
+
|
|
3
|
+
## CI / GitHub Actions
|
|
4
|
+
|
|
5
|
+
**capture-screenshots must run under bun, not node.**
|
|
6
|
+
|
|
7
|
+
`npm install --ignore-scripts` in gh-pages.yml skips native compilation, leaving `better-sqlite3` without a compiled `.node` binding. `database.js` tries `bun:sqlite` first, then falls back to `better-sqlite3`. When the step runs under Node both fail and the server crashes silently within the 20s health-check window.
|
|
8
|
+
|
|
9
|
+
Fix: `bun run scripts/capture-screenshots.mjs` (not `node ...`).
|
|
10
|
+
|
|
11
|
+
Why it works: `process.execPath` becomes bun, so the spawned child server also runs under bun and loads `bun:sqlite` natively — no compiled binding needed.
|
|
12
|
+
|
|
13
|
+
Rule: any CI step that spawns the agentgui server (directly or via a script that inherits `process.execPath`) must invoke it with `bun`.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
## [Unreleased] - implement 247420 brand-bible chrome on main shell
|
|
2
|
+
|
|
3
|
+
- index.html: header brand line reads `247420 / agentgui / <leaf>`; sidebar brand line reads `247420 / agentgui` — mono slash `/` in muted color, matches canonical app-topbar pattern from c:/dev/design
|
|
4
|
+
- index.html: sidebar `New` button now uses `.btn-stamp.green` (flat mint stamp with 2px ink offset shadow) — removed `✦` sparkle, lowercase `new` label
|
|
5
|
+
- index.html: default theme is now `data-theme="dark"` — matches the design system's dark-first canvas (`#0B0B09` with mint `#92CEAC` accent)
|
|
6
|
+
- index.html: `data-message-input` moved onto the visible `#inputCardTextarea` — previous commit left it on a hidden absolutely-positioned textarea, breaking `setupUI()` binding and send-button wiring; placeholder lowercased `message agentgui...`
|
|
7
|
+
- theme.js: dropped `prefers-color-scheme` probe for the no-saved-theme fallback; new installs get dark unconditionally
|
|
8
|
+
- client-ui2.js: `_showWelcomeScreen()` rewritten — lowercase Archivo-Black h1 (`a state machine for coding agents.`), t-micro brand datelime, `.row` grid rows for new-conversation and available-agents cards, no hardcoded hex/inline Title-Case
|
|
9
|
+
- css/brand-bible.css: added `.brand-line` (mono slash separator), compact 40px `.main-header` / `.sidebar-header` shells, `.welcome-pane` + `.welcome-rows` styling that inherits panel tokens — all via tokens, no literals
|
|
10
|
+
- css/app-shell.css, css/colors_and_type.css: vendored from c:/dev/design so the same canonical token surface is available locally (currently unloaded; reserved for next-pass shell rebuild)
|
|
11
|
+
|
|
1
12
|
## [Unreleased] - remove duplicate welcome screen; wire agent/model chip selects
|
|
2
13
|
|
|
3
14
|
- index.html: removed static `#welcomeScreen` div (gradient-G logo block) that persisted over conversation views — JS `_showWelcomeScreen()` in `#output` already handles empty state
|
package/package.json
CHANGED
|
@@ -0,0 +1,419 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
App shell — IDE-modern density patterns
|
|
3
|
+
Consumed by landing, ui_kits/*, docs, blog, slides
|
|
4
|
+
Light default · dark via prefers-color-scheme or [data-theme=dark]
|
|
5
|
+
============================================================ */
|
|
6
|
+
|
|
7
|
+
html, body {
|
|
8
|
+
background: var(--panel-0);
|
|
9
|
+
color: var(--panel-text);
|
|
10
|
+
font-family: var(--ff-mono);
|
|
11
|
+
font-size: 13px;
|
|
12
|
+
line-height: 1.5;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.app {
|
|
16
|
+
min-height: 100vh;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
background: var(--panel-0);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* Top bar — sticky chrome, elevated via shadow so content doesn't bleed under */
|
|
23
|
+
.app-topbar {
|
|
24
|
+
position: sticky;
|
|
25
|
+
top: 0;
|
|
26
|
+
z-index: 100;
|
|
27
|
+
height: 40px;
|
|
28
|
+
background: var(--panel-2);
|
|
29
|
+
color: var(--panel-text);
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
padding: 0 16px;
|
|
33
|
+
gap: 16px;
|
|
34
|
+
font-size: 13px;
|
|
35
|
+
flex-shrink: 0;
|
|
36
|
+
}
|
|
37
|
+
.app-topbar .brand {
|
|
38
|
+
font-weight: 600;
|
|
39
|
+
color: var(--panel-text);
|
|
40
|
+
display: inline-flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
}
|
|
43
|
+
.app-topbar .brand .slash { color: var(--panel-text-3); margin: 0 6px; font-weight: 400; }
|
|
44
|
+
.app-topbar nav {
|
|
45
|
+
display: flex;
|
|
46
|
+
gap: 2px;
|
|
47
|
+
margin-left: auto;
|
|
48
|
+
align-items: center;
|
|
49
|
+
}
|
|
50
|
+
.app-topbar nav a {
|
|
51
|
+
color: var(--panel-text-2);
|
|
52
|
+
text-decoration: none;
|
|
53
|
+
padding: 7px 12px;
|
|
54
|
+
font-size: 13px;
|
|
55
|
+
border-radius: 6px;
|
|
56
|
+
line-height: 1;
|
|
57
|
+
}
|
|
58
|
+
.app-topbar nav a:hover { background: var(--panel-hover); color: var(--panel-text); }
|
|
59
|
+
.app-topbar nav a.active { color: var(--panel-accent-fg); background: var(--panel-accent); }
|
|
60
|
+
|
|
61
|
+
/* Breadcrumb — under topbar */
|
|
62
|
+
.app-crumb {
|
|
63
|
+
position: sticky;
|
|
64
|
+
top: 40px;
|
|
65
|
+
z-index: 99;
|
|
66
|
+
background: var(--panel-1);
|
|
67
|
+
padding: 8px 20px;
|
|
68
|
+
font-family: var(--ff-mono);
|
|
69
|
+
font-size: 12px;
|
|
70
|
+
color: var(--panel-text-2);
|
|
71
|
+
display: flex;
|
|
72
|
+
gap: 6px;
|
|
73
|
+
align-items: center;
|
|
74
|
+
flex-shrink: 0;
|
|
75
|
+
}
|
|
76
|
+
.app-crumb .sep { color: var(--panel-text-3); }
|
|
77
|
+
.app-crumb .leaf { color: var(--panel-text); }
|
|
78
|
+
|
|
79
|
+
/* Shell body — optional sidebar + main */
|
|
80
|
+
.app-body {
|
|
81
|
+
display: grid;
|
|
82
|
+
grid-template-columns: 240px 1fr;
|
|
83
|
+
flex: 1;
|
|
84
|
+
min-height: 0;
|
|
85
|
+
background: var(--panel-0);
|
|
86
|
+
}
|
|
87
|
+
.app-body.no-side { grid-template-columns: 1fr; }
|
|
88
|
+
|
|
89
|
+
/* Sidebar */
|
|
90
|
+
.app-side {
|
|
91
|
+
background: var(--panel-1);
|
|
92
|
+
padding: 12px 0;
|
|
93
|
+
overflow-y: auto;
|
|
94
|
+
}
|
|
95
|
+
.app-side .group {
|
|
96
|
+
padding: 12px 16px 4px 16px;
|
|
97
|
+
font-family: var(--ff-mono);
|
|
98
|
+
font-size: 11px;
|
|
99
|
+
text-transform: uppercase;
|
|
100
|
+
letter-spacing: 0.08em;
|
|
101
|
+
color: var(--panel-text-2);
|
|
102
|
+
font-weight: 600;
|
|
103
|
+
}
|
|
104
|
+
.app-side a {
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
gap: 8px;
|
|
108
|
+
padding: 5px 16px 5px 24px;
|
|
109
|
+
color: var(--panel-text);
|
|
110
|
+
text-decoration: none;
|
|
111
|
+
font-size: 13px;
|
|
112
|
+
}
|
|
113
|
+
.app-side a:hover { background: var(--panel-hover); }
|
|
114
|
+
.app-side a.active { background: var(--panel-select); color: var(--panel-text); font-weight: 500; }
|
|
115
|
+
.app-side a .glyph { color: var(--panel-text-2); font-family: var(--ff-mono); width: 14px; flex-shrink: 0; }
|
|
116
|
+
.app-side a.active .glyph { color: var(--panel-accent); }
|
|
117
|
+
|
|
118
|
+
/* Main content area */
|
|
119
|
+
.app-main {
|
|
120
|
+
background: var(--panel-0);
|
|
121
|
+
padding: 24px 32px 64px 32px;
|
|
122
|
+
overflow-y: auto;
|
|
123
|
+
}
|
|
124
|
+
.app-main.narrow { max-width: 820px; }
|
|
125
|
+
.app-main.centered { margin: 0 auto; }
|
|
126
|
+
|
|
127
|
+
.app-main h1 {
|
|
128
|
+
font-size: 28px;
|
|
129
|
+
font-weight: 600;
|
|
130
|
+
margin: 4px 0 4px 0;
|
|
131
|
+
color: var(--panel-text);
|
|
132
|
+
letter-spacing: -0.01em;
|
|
133
|
+
line-height: 1.2;
|
|
134
|
+
}
|
|
135
|
+
.app-main h2 {
|
|
136
|
+
font-size: 18px;
|
|
137
|
+
font-weight: 600;
|
|
138
|
+
margin: 32px 0 8px 0;
|
|
139
|
+
color: var(--panel-text);
|
|
140
|
+
letter-spacing: -0.005em;
|
|
141
|
+
}
|
|
142
|
+
.app-main h3 {
|
|
143
|
+
font-family: var(--ff-mono);
|
|
144
|
+
font-size: 12px;
|
|
145
|
+
font-weight: 600;
|
|
146
|
+
margin: 24px 0 8px 0;
|
|
147
|
+
color: var(--panel-accent);
|
|
148
|
+
text-transform: uppercase;
|
|
149
|
+
letter-spacing: 0.08em;
|
|
150
|
+
}
|
|
151
|
+
.app-main p {
|
|
152
|
+
margin: 0 0 12px 0;
|
|
153
|
+
max-width: 72ch;
|
|
154
|
+
font-size: 14px;
|
|
155
|
+
line-height: 1.6;
|
|
156
|
+
color: var(--panel-text);
|
|
157
|
+
}
|
|
158
|
+
.app-main .lede {
|
|
159
|
+
font-size: 15px;
|
|
160
|
+
color: var(--panel-text-2);
|
|
161
|
+
margin: 0 0 24px 0;
|
|
162
|
+
max-width: 60ch;
|
|
163
|
+
}
|
|
164
|
+
.app-main a {
|
|
165
|
+
color: var(--panel-accent);
|
|
166
|
+
text-decoration: none;
|
|
167
|
+
}
|
|
168
|
+
.app-main a:hover { text-decoration: underline; text-underline-offset: 2px; }
|
|
169
|
+
.app-main code {
|
|
170
|
+
font-family: var(--ff-mono);
|
|
171
|
+
font-size: 12px;
|
|
172
|
+
background: var(--panel-1);
|
|
173
|
+
padding: 1px 6px;
|
|
174
|
+
border-radius: 6px;
|
|
175
|
+
color: var(--panel-text);
|
|
176
|
+
box-shadow: var(--panel-shadow);
|
|
177
|
+
}
|
|
178
|
+
.app-main pre {
|
|
179
|
+
background: var(--panel-1);
|
|
180
|
+
padding: 14px 16px;
|
|
181
|
+
font-family: var(--ff-mono);
|
|
182
|
+
font-size: 12px;
|
|
183
|
+
line-height: 1.6;
|
|
184
|
+
color: var(--panel-text);
|
|
185
|
+
overflow-x: auto;
|
|
186
|
+
margin: 12px 0;
|
|
187
|
+
border-radius: 8px;
|
|
188
|
+
box-shadow: var(--panel-shadow);
|
|
189
|
+
}
|
|
190
|
+
.app-main pre code { background: transparent; padding: 0; box-shadow: none; }
|
|
191
|
+
.app-main pre .c { color: var(--panel-text-2); }
|
|
192
|
+
.app-main pre .k { color: var(--panel-accent); }
|
|
193
|
+
.app-main pre .s { color: #ce9178; }
|
|
194
|
+
|
|
195
|
+
/* Panel — grouped content block, elevated */
|
|
196
|
+
.panel {
|
|
197
|
+
background: var(--panel-1);
|
|
198
|
+
border-radius: 8px;
|
|
199
|
+
overflow: hidden;
|
|
200
|
+
margin: 12px 0;
|
|
201
|
+
box-shadow: var(--panel-shadow);
|
|
202
|
+
}
|
|
203
|
+
.panel-head {
|
|
204
|
+
padding: 10px 16px;
|
|
205
|
+
background: var(--panel-2);
|
|
206
|
+
font-family: var(--ff-mono);
|
|
207
|
+
font-size: 11px;
|
|
208
|
+
text-transform: uppercase;
|
|
209
|
+
letter-spacing: 0.08em;
|
|
210
|
+
color: var(--panel-text-2);
|
|
211
|
+
display: flex;
|
|
212
|
+
justify-content: space-between;
|
|
213
|
+
align-items: center;
|
|
214
|
+
gap: 12px;
|
|
215
|
+
}
|
|
216
|
+
.panel-body { padding: 0; background: var(--panel-1); }
|
|
217
|
+
|
|
218
|
+
/* Row — dense list item */
|
|
219
|
+
.row {
|
|
220
|
+
display: grid;
|
|
221
|
+
grid-template-columns: 80px 1fr auto;
|
|
222
|
+
gap: 12px;
|
|
223
|
+
padding: 8px 16px;
|
|
224
|
+
align-items: baseline;
|
|
225
|
+
color: var(--panel-text);
|
|
226
|
+
text-decoration: none;
|
|
227
|
+
font-size: 13px;
|
|
228
|
+
cursor: pointer;
|
|
229
|
+
background: transparent;
|
|
230
|
+
}
|
|
231
|
+
.row:hover { background: var(--panel-hover); }
|
|
232
|
+
.row.active { background: var(--panel-select); }
|
|
233
|
+
.row .code {
|
|
234
|
+
font-family: var(--ff-mono);
|
|
235
|
+
font-size: 11px;
|
|
236
|
+
color: var(--panel-text-2);
|
|
237
|
+
letter-spacing: 0.04em;
|
|
238
|
+
}
|
|
239
|
+
.row .title { color: var(--panel-text); font-weight: 500; }
|
|
240
|
+
.row .sub { color: var(--panel-text-2); font-size: 12px; margin-left: 8px; font-weight: 400; }
|
|
241
|
+
.row .meta { color: var(--panel-text-2); font-size: 11px; text-align: right; font-family: var(--ff-mono); }
|
|
242
|
+
|
|
243
|
+
/* CLI install block */
|
|
244
|
+
.cli {
|
|
245
|
+
display: flex;
|
|
246
|
+
align-items: stretch;
|
|
247
|
+
background: var(--panel-1);
|
|
248
|
+
border-radius: 8px;
|
|
249
|
+
overflow: hidden;
|
|
250
|
+
font-family: var(--ff-mono);
|
|
251
|
+
font-size: 13px;
|
|
252
|
+
max-width: 640px;
|
|
253
|
+
margin: 12px 0;
|
|
254
|
+
box-shadow: var(--panel-shadow);
|
|
255
|
+
}
|
|
256
|
+
.cli .prompt { padding: 10px 14px; color: var(--panel-accent); font-weight: 600; }
|
|
257
|
+
.cli .cmd { flex: 1; padding: 10px 0; color: var(--panel-text); }
|
|
258
|
+
.cli .copy {
|
|
259
|
+
padding: 0 16px;
|
|
260
|
+
background: var(--panel-2);
|
|
261
|
+
color: var(--panel-text-2);
|
|
262
|
+
cursor: pointer;
|
|
263
|
+
font-size: 11px;
|
|
264
|
+
text-transform: uppercase;
|
|
265
|
+
letter-spacing: 0.08em;
|
|
266
|
+
display: flex;
|
|
267
|
+
align-items: center;
|
|
268
|
+
}
|
|
269
|
+
.cli .copy:hover { background: var(--panel-3); color: var(--panel-text); }
|
|
270
|
+
|
|
271
|
+
/* Buttons */
|
|
272
|
+
.btn {
|
|
273
|
+
display: inline-flex;
|
|
274
|
+
align-items: center;
|
|
275
|
+
gap: 6px;
|
|
276
|
+
padding: 7px 14px;
|
|
277
|
+
background: var(--panel-2);
|
|
278
|
+
color: var(--panel-text);
|
|
279
|
+
font-family: inherit;
|
|
280
|
+
font-size: 13px;
|
|
281
|
+
font-weight: 500;
|
|
282
|
+
border-radius: 6px;
|
|
283
|
+
cursor: pointer;
|
|
284
|
+
text-decoration: none;
|
|
285
|
+
transition: background 80ms ease;
|
|
286
|
+
box-shadow: var(--panel-shadow);
|
|
287
|
+
}
|
|
288
|
+
.btn:hover { background: var(--panel-3); }
|
|
289
|
+
.btn:active { background: var(--panel-hover); }
|
|
290
|
+
|
|
291
|
+
.btn-primary {
|
|
292
|
+
display: inline-flex;
|
|
293
|
+
align-items: center;
|
|
294
|
+
gap: 6px;
|
|
295
|
+
padding: 7px 14px;
|
|
296
|
+
background: var(--panel-accent);
|
|
297
|
+
color: var(--panel-accent-fg);
|
|
298
|
+
font-family: inherit;
|
|
299
|
+
font-size: 13px;
|
|
300
|
+
font-weight: 500;
|
|
301
|
+
border-radius: 6px;
|
|
302
|
+
cursor: pointer;
|
|
303
|
+
text-decoration: none;
|
|
304
|
+
transition: filter 80ms ease;
|
|
305
|
+
box-shadow: var(--panel-shadow);
|
|
306
|
+
}
|
|
307
|
+
.btn-primary:hover { filter: brightness(1.08); }
|
|
308
|
+
.btn-primary:active { filter: brightness(0.94); }
|
|
309
|
+
|
|
310
|
+
.btn-ghost {
|
|
311
|
+
display: inline-flex;
|
|
312
|
+
align-items: center;
|
|
313
|
+
gap: 6px;
|
|
314
|
+
padding: 7px 14px;
|
|
315
|
+
background: transparent;
|
|
316
|
+
color: var(--panel-text-2);
|
|
317
|
+
font-family: inherit;
|
|
318
|
+
font-size: 13px;
|
|
319
|
+
cursor: pointer;
|
|
320
|
+
text-decoration: none;
|
|
321
|
+
border-radius: 6px;
|
|
322
|
+
transition: background 80ms ease;
|
|
323
|
+
}
|
|
324
|
+
.btn-ghost:hover { background: var(--panel-hover); color: var(--panel-text); }
|
|
325
|
+
|
|
326
|
+
/* Tag / chip */
|
|
327
|
+
.chip {
|
|
328
|
+
display: inline-flex;
|
|
329
|
+
align-items: center;
|
|
330
|
+
padding: 2px 8px;
|
|
331
|
+
border-radius: 6px;
|
|
332
|
+
font-family: var(--ff-mono);
|
|
333
|
+
font-size: 11px;
|
|
334
|
+
font-weight: 500;
|
|
335
|
+
background: var(--panel-2);
|
|
336
|
+
color: var(--panel-text);
|
|
337
|
+
}
|
|
338
|
+
.chip.accent { background: var(--panel-accent); color: var(--panel-accent-fg); }
|
|
339
|
+
.chip.dim { color: var(--panel-text-2); background: var(--panel-1); }
|
|
340
|
+
|
|
341
|
+
/* Status bar — accent-colored footer */
|
|
342
|
+
.app-status {
|
|
343
|
+
height: 24px;
|
|
344
|
+
background: var(--panel-accent);
|
|
345
|
+
color: var(--panel-accent-fg);
|
|
346
|
+
display: flex;
|
|
347
|
+
align-items: center;
|
|
348
|
+
padding: 0 14px;
|
|
349
|
+
gap: 14px;
|
|
350
|
+
font-family: var(--ff-mono);
|
|
351
|
+
font-size: 11px;
|
|
352
|
+
flex-shrink: 0;
|
|
353
|
+
}
|
|
354
|
+
.app-status .spread { flex: 1; }
|
|
355
|
+
.app-status .item { display: flex; align-items: center; gap: 4px; }
|
|
356
|
+
.app-status a { color: var(--panel-accent-fg); text-decoration: none; }
|
|
357
|
+
|
|
358
|
+
/* Key-value table */
|
|
359
|
+
.kv {
|
|
360
|
+
width: 100%;
|
|
361
|
+
max-width: 640px;
|
|
362
|
+
background: var(--panel-1);
|
|
363
|
+
border-radius: 8px;
|
|
364
|
+
overflow: hidden;
|
|
365
|
+
border-collapse: collapse;
|
|
366
|
+
box-shadow: var(--panel-shadow);
|
|
367
|
+
margin: 12px 0;
|
|
368
|
+
}
|
|
369
|
+
.kv td { padding: 8px 16px; font-size: 13px; }
|
|
370
|
+
.kv tr:nth-child(even) { background: var(--panel-2); }
|
|
371
|
+
.kv td:first-child {
|
|
372
|
+
color: var(--panel-text-2);
|
|
373
|
+
font-family: var(--ff-mono);
|
|
374
|
+
font-size: 11px;
|
|
375
|
+
text-transform: uppercase;
|
|
376
|
+
letter-spacing: 0.08em;
|
|
377
|
+
width: 160px;
|
|
378
|
+
}
|
|
379
|
+
.kv td:last-child { color: var(--panel-text); }
|
|
380
|
+
|
|
381
|
+
/* Card grid — landing index */
|
|
382
|
+
.cards {
|
|
383
|
+
display: grid;
|
|
384
|
+
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
385
|
+
gap: 8px;
|
|
386
|
+
margin: 12px 0 24px 0;
|
|
387
|
+
}
|
|
388
|
+
.card-item {
|
|
389
|
+
display: grid;
|
|
390
|
+
grid-template-columns: 44px 1fr;
|
|
391
|
+
gap: 10px;
|
|
392
|
+
padding: 14px 16px;
|
|
393
|
+
background: var(--panel-1);
|
|
394
|
+
color: var(--panel-text);
|
|
395
|
+
text-decoration: none;
|
|
396
|
+
align-items: baseline;
|
|
397
|
+
border-radius: 8px;
|
|
398
|
+
box-shadow: var(--panel-shadow);
|
|
399
|
+
transition: background 80ms ease, transform 80ms ease;
|
|
400
|
+
}
|
|
401
|
+
.card-item:hover { background: var(--panel-hover); transform: translateY(-1px); }
|
|
402
|
+
.card-item .code {
|
|
403
|
+
font-family: var(--ff-mono);
|
|
404
|
+
font-size: 11px;
|
|
405
|
+
color: var(--panel-accent);
|
|
406
|
+
letter-spacing: 0.04em;
|
|
407
|
+
font-weight: 600;
|
|
408
|
+
}
|
|
409
|
+
.card-item .name {
|
|
410
|
+
font-size: 13px;
|
|
411
|
+
font-weight: 500;
|
|
412
|
+
color: var(--panel-text);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
/* Scrollbars */
|
|
416
|
+
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
417
|
+
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 5px; }
|
|
418
|
+
::-webkit-scrollbar-thumb:hover { background: var(--panel-hover); }
|
|
419
|
+
::-webkit-scrollbar-track { background: transparent; }
|
|
@@ -463,4 +463,129 @@ code {
|
|
|
463
463
|
.sidebar-overflow-menu {
|
|
464
464
|
max-height: calc(100dvh - 80px);
|
|
465
465
|
overflow-y: auto;
|
|
466
|
-
}
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
/* ============================================================
|
|
469
|
+
Brand line — 247420 / project / leaf
|
|
470
|
+
============================================================ */
|
|
471
|
+
.brand-line {
|
|
472
|
+
font-family: var(--ff-mono) !important;
|
|
473
|
+
font-weight: 600 !important;
|
|
474
|
+
font-size: 14px !important;
|
|
475
|
+
letter-spacing: 0 !important;
|
|
476
|
+
color: var(--panel-text) !important;
|
|
477
|
+
text-transform: lowercase;
|
|
478
|
+
margin: 0 !important;
|
|
479
|
+
display: inline-flex;
|
|
480
|
+
align-items: center;
|
|
481
|
+
}
|
|
482
|
+
.brand-line .slash {
|
|
483
|
+
color: var(--panel-text-3);
|
|
484
|
+
font-weight: 400;
|
|
485
|
+
margin: 0 2px;
|
|
486
|
+
}
|
|
487
|
+
.brand-line .leaf {
|
|
488
|
+
color: var(--panel-accent);
|
|
489
|
+
font-weight: 500;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
/* Main header — flatten to app-topbar style */
|
|
493
|
+
.main-header {
|
|
494
|
+
background: var(--panel-2) !important;
|
|
495
|
+
height: 40px !important;
|
|
496
|
+
min-height: 40px !important;
|
|
497
|
+
padding: 0 16px !important;
|
|
498
|
+
gap: 12px !important;
|
|
499
|
+
box-shadow: none !important;
|
|
500
|
+
}
|
|
501
|
+
.main-header .header-title {
|
|
502
|
+
font-family: var(--ff-mono) !important;
|
|
503
|
+
font-size: 14px !important;
|
|
504
|
+
font-weight: 600 !important;
|
|
505
|
+
text-transform: lowercase;
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
/* Sidebar header */
|
|
509
|
+
.sidebar-header {
|
|
510
|
+
background: var(--panel-2) !important;
|
|
511
|
+
height: 40px !important;
|
|
512
|
+
min-height: 40px !important;
|
|
513
|
+
padding: 0 12px !important;
|
|
514
|
+
}
|
|
515
|
+
.sidebar-header h2.brand-line {
|
|
516
|
+
font-size: 13px !important;
|
|
517
|
+
}
|
|
518
|
+
.sidebar-header .btn-stamp {
|
|
519
|
+
padding: 4px 10px !important;
|
|
520
|
+
font-size: 11px !important;
|
|
521
|
+
height: 26px !important;
|
|
522
|
+
line-height: 1 !important;
|
|
523
|
+
box-shadow: 2px 2px 0 var(--ink) !important;
|
|
524
|
+
}
|
|
525
|
+
.sidebar-header .btn-stamp:hover {
|
|
526
|
+
box-shadow: 1px 1px 0 var(--ink) !important;
|
|
527
|
+
transform: translate(1px,1px);
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
/* Welcome pane — app-main narrow style */
|
|
531
|
+
.welcome-pane {
|
|
532
|
+
max-width: 720px;
|
|
533
|
+
margin: 0 auto;
|
|
534
|
+
padding: 48px 32px;
|
|
535
|
+
display: flex;
|
|
536
|
+
flex-direction: column;
|
|
537
|
+
gap: 32px;
|
|
538
|
+
}
|
|
539
|
+
.welcome-head { display: flex; flex-direction: column; gap: 8px; }
|
|
540
|
+
.welcome-title {
|
|
541
|
+
font-family: var(--ff-display);
|
|
542
|
+
font-size: 36px;
|
|
543
|
+
font-weight: 800;
|
|
544
|
+
letter-spacing: -0.01em;
|
|
545
|
+
line-height: 1.1;
|
|
546
|
+
margin: 0;
|
|
547
|
+
color: var(--panel-text);
|
|
548
|
+
text-transform: lowercase;
|
|
549
|
+
}
|
|
550
|
+
.welcome-lede {
|
|
551
|
+
font-size: 14px;
|
|
552
|
+
line-height: 1.6;
|
|
553
|
+
color: var(--panel-text-2);
|
|
554
|
+
margin: 0;
|
|
555
|
+
max-width: 60ch;
|
|
556
|
+
}
|
|
557
|
+
.welcome-select-row {
|
|
558
|
+
display: flex;
|
|
559
|
+
flex-direction: column;
|
|
560
|
+
gap: 8px;
|
|
561
|
+
max-width: 280px;
|
|
562
|
+
}
|
|
563
|
+
.welcome-rows {
|
|
564
|
+
display: flex;
|
|
565
|
+
flex-direction: column;
|
|
566
|
+
gap: 8px;
|
|
567
|
+
}
|
|
568
|
+
.welcome-rows .row {
|
|
569
|
+
grid-template-columns: 40px 180px 1fr;
|
|
570
|
+
padding: 12px 16px;
|
|
571
|
+
background: var(--panel-1);
|
|
572
|
+
border-radius: 0;
|
|
573
|
+
}
|
|
574
|
+
.welcome-rows .row .row-code {
|
|
575
|
+
color: var(--panel-accent);
|
|
576
|
+
font-weight: 600;
|
|
577
|
+
}
|
|
578
|
+
.welcome-rows .row .row-title {
|
|
579
|
+
font-family: var(--ff-mono);
|
|
580
|
+
font-weight: 600;
|
|
581
|
+
font-size: 13px;
|
|
582
|
+
letter-spacing: 0;
|
|
583
|
+
color: var(--panel-text);
|
|
584
|
+
text-transform: lowercase;
|
|
585
|
+
}
|
|
586
|
+
.welcome-rows .row .row-meta {
|
|
587
|
+
color: var(--panel-text-2);
|
|
588
|
+
text-transform: none;
|
|
589
|
+
letter-spacing: 0;
|
|
590
|
+
font-size: 12px;
|
|
591
|
+
}
|
|
@@ -0,0 +1,568 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
Design tokens — brand palette + type scale + motion
|
|
3
|
+
Loads before any consumer rule; all var(--*) refs resolve.
|
|
4
|
+
============================================================ */
|
|
5
|
+
:root {
|
|
6
|
+
--paper: #EFE9DD;
|
|
7
|
+
--ink: #0B0B09;
|
|
8
|
+
--acid: #B8FF00;
|
|
9
|
+
--link: #1F4DFF;
|
|
10
|
+
--warn: #FF3B1F;
|
|
11
|
+
--live: #00A86B;
|
|
12
|
+
|
|
13
|
+
--green: #247420;
|
|
14
|
+
--green-2: #92CEAC;
|
|
15
|
+
--green-deep: #1c5a19;
|
|
16
|
+
--green-fg: #FFFFFF;
|
|
17
|
+
--purple: #420247;
|
|
18
|
+
--purple-fg: #FFFFFF;
|
|
19
|
+
--mascot: #E84B8A;
|
|
20
|
+
--mascot-fg: #FFFFFF;
|
|
21
|
+
--sun: #FFD100;
|
|
22
|
+
|
|
23
|
+
--ff-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
|
|
24
|
+
--ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
25
|
+
--ff-prose: 'Instrument Serif', Georgia, serif;
|
|
26
|
+
|
|
27
|
+
--fs-hero: 120px;
|
|
28
|
+
--fs-h1: 64px;
|
|
29
|
+
--fs-h2: 32px;
|
|
30
|
+
--lh-tight: 1.05;
|
|
31
|
+
--lh-snug: 1.2;
|
|
32
|
+
--tr-tight: -0.02em;
|
|
33
|
+
|
|
34
|
+
--dur-snap: 80ms;
|
|
35
|
+
--dur-base: 160ms;
|
|
36
|
+
--ease: cubic-bezier(0.2, 0, 0, 1);
|
|
37
|
+
|
|
38
|
+
--surface-2: rgba(0,0,0,0.04);
|
|
39
|
+
--surface-ink-2: rgba(255,255,255,0.06);
|
|
40
|
+
|
|
41
|
+
--r-1: 0;
|
|
42
|
+
--r-2: 0;
|
|
43
|
+
--r-3: 0;
|
|
44
|
+
--r-pill: 9999px;
|
|
45
|
+
|
|
46
|
+
/* Extended brand palette */
|
|
47
|
+
--flame: #FF5C1A;
|
|
48
|
+
--sky: #3B82F6;
|
|
49
|
+
|
|
50
|
+
/* Foreground / background aliases — resolved after panel tokens are set;
|
|
51
|
+
these are reset below once panel tokens exist, but raw defaults here
|
|
52
|
+
ensure no unsatisfied var() at parse time if panel tokens are absent. */
|
|
53
|
+
--fg: #0B0B09;
|
|
54
|
+
--fg-3: #6d675b;
|
|
55
|
+
--bg: #EFE9DD;
|
|
56
|
+
--bg-2: #ece5d8;
|
|
57
|
+
|
|
58
|
+
/* Colorful-mono palette — canonical hue per slot */
|
|
59
|
+
--mono-1: var(--green);
|
|
60
|
+
--mono-2: var(--purple);
|
|
61
|
+
--mono-3: var(--mascot);
|
|
62
|
+
--mono-4: var(--sun);
|
|
63
|
+
--mono-5: var(--flame);
|
|
64
|
+
--mono-6: var(--sky);
|
|
65
|
+
|
|
66
|
+
/* Spacing scale (4px base) */
|
|
67
|
+
--space-1: 4px;
|
|
68
|
+
--space-2: 8px;
|
|
69
|
+
--space-3: 12px;
|
|
70
|
+
--space-4: 16px;
|
|
71
|
+
--space-5: 24px;
|
|
72
|
+
--space-6: 32px;
|
|
73
|
+
--space-7: 48px;
|
|
74
|
+
--space-8: 64px;
|
|
75
|
+
|
|
76
|
+
/* Border widths */
|
|
77
|
+
--bw-hair: 1px;
|
|
78
|
+
--bw-rule: 2px;
|
|
79
|
+
|
|
80
|
+
/* Measure */
|
|
81
|
+
--measure: 72ch;
|
|
82
|
+
|
|
83
|
+
/* Extended type scale */
|
|
84
|
+
--fs-body: 13px;
|
|
85
|
+
--fs-lg: 14px;
|
|
86
|
+
--fs-sm: 12px;
|
|
87
|
+
--fs-xs: 11px;
|
|
88
|
+
--fs-tiny: 11px;
|
|
89
|
+
--fs-micro: 9px;
|
|
90
|
+
--fs-h3: 14px;
|
|
91
|
+
--fs-h4: 13px;
|
|
92
|
+
|
|
93
|
+
/* Extended line heights */
|
|
94
|
+
--lh-base: 1.5;
|
|
95
|
+
--lh-long: 1.6;
|
|
96
|
+
|
|
97
|
+
/* Extended letter spacing */
|
|
98
|
+
--tr-label: 0.08em;
|
|
99
|
+
--tr-caps: 0.05em;
|
|
100
|
+
|
|
101
|
+
/* Font body alias */
|
|
102
|
+
--ff-body: var(--ff-prose);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Rows: no separators, hover surface tint instead */
|
|
106
|
+
.row { background: transparent; transition: background var(--dur-snap) var(--ease); }
|
|
107
|
+
.row:hover { background: var(--surface-2); }
|
|
108
|
+
[data-theme="ink"] .row:hover { background: var(--surface-ink-2); }
|
|
109
|
+
|
|
110
|
+
body {
|
|
111
|
+
background: var(--panel-0);
|
|
112
|
+
color: var(--panel-text);
|
|
113
|
+
font-family: var(--ff-mono);
|
|
114
|
+
font-size: 13px;
|
|
115
|
+
line-height: 1.5;
|
|
116
|
+
-webkit-font-smoothing: antialiased;
|
|
117
|
+
-moz-osx-font-smoothing: grayscale;
|
|
118
|
+
text-rendering: optimizeLegibility;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* ============================================================
|
|
122
|
+
Semantic type classes
|
|
123
|
+
============================================================ */
|
|
124
|
+
|
|
125
|
+
/* Hero — project name, once per page. Archivo Black territory. */
|
|
126
|
+
.t-hero, h1.hero {
|
|
127
|
+
font-family: var(--ff-display);
|
|
128
|
+
font-size: clamp(64px, 12vw, var(--fs-hero));
|
|
129
|
+
line-height: var(--lh-tight);
|
|
130
|
+
letter-spacing: var(--tr-tight);
|
|
131
|
+
font-weight: 800;
|
|
132
|
+
margin: 0;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* h1 — page title */
|
|
136
|
+
.t-h1, h1 {
|
|
137
|
+
font-family: var(--ff-display);
|
|
138
|
+
font-size: clamp(40px, 6vw, var(--fs-h1));
|
|
139
|
+
line-height: var(--lh-tight);
|
|
140
|
+
letter-spacing: var(--tr-tight);
|
|
141
|
+
font-weight: 700;
|
|
142
|
+
margin: 0;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* h2 — section */
|
|
146
|
+
.t-h2, h2 {
|
|
147
|
+
font-family: var(--ff-display);
|
|
148
|
+
font-size: var(--fs-h2);
|
|
149
|
+
line-height: var(--lh-snug);
|
|
150
|
+
letter-spacing: var(--tr-tight);
|
|
151
|
+
font-weight: 700;
|
|
152
|
+
margin: 0;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* h3 — subsection (mono, colorful-eligible) */
|
|
156
|
+
.t-h3, h3 {
|
|
157
|
+
font-family: var(--ff-mono);
|
|
158
|
+
font-size: var(--fs-h3);
|
|
159
|
+
line-height: var(--lh-snug);
|
|
160
|
+
letter-spacing: 0;
|
|
161
|
+
font-weight: 600;
|
|
162
|
+
margin: 0;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* h4 */
|
|
166
|
+
.t-h4, h4 {
|
|
167
|
+
font-family: var(--ff-mono);
|
|
168
|
+
font-size: var(--fs-h4);
|
|
169
|
+
line-height: var(--lh-snug);
|
|
170
|
+
font-weight: 500;
|
|
171
|
+
margin: 0;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* Body UI — mono, the default UI voice */
|
|
175
|
+
.t-body {
|
|
176
|
+
font-family: var(--ff-mono);
|
|
177
|
+
font-size: var(--fs-body);
|
|
178
|
+
line-height: var(--lh-base);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* Long-form prose — SANS, not serif. Space Grotesk. */
|
|
182
|
+
.t-prose, .prose p {
|
|
183
|
+
font-family: var(--ff-body);
|
|
184
|
+
font-size: var(--fs-lg);
|
|
185
|
+
line-height: var(--lh-long);
|
|
186
|
+
max-width: var(--measure);
|
|
187
|
+
text-wrap: pretty;
|
|
188
|
+
font-weight: 400;
|
|
189
|
+
}
|
|
190
|
+
.prose p { margin: 0 0 var(--space-4) 0; }
|
|
191
|
+
|
|
192
|
+
/* Label — mono caps, terminal voice */
|
|
193
|
+
.t-label {
|
|
194
|
+
font-family: var(--ff-mono);
|
|
195
|
+
font-size: var(--fs-xs);
|
|
196
|
+
text-transform: uppercase;
|
|
197
|
+
letter-spacing: var(--tr-label);
|
|
198
|
+
font-weight: 500;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
/* Meta — mono, small, dim */
|
|
202
|
+
.t-meta {
|
|
203
|
+
font-family: var(--ff-mono);
|
|
204
|
+
font-size: var(--fs-xs);
|
|
205
|
+
color: var(--fg-3);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/* Micro — smallest, datelines */
|
|
209
|
+
.t-micro {
|
|
210
|
+
font-family: var(--ff-mono);
|
|
211
|
+
font-size: var(--fs-micro);
|
|
212
|
+
letter-spacing: var(--tr-label);
|
|
213
|
+
text-transform: uppercase;
|
|
214
|
+
color: var(--fg-3);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* Pull — display, for section intros and callouts */
|
|
218
|
+
.t-pull {
|
|
219
|
+
font-family: var(--ff-display);
|
|
220
|
+
font-size: var(--fs-h2);
|
|
221
|
+
line-height: var(--lh-snug);
|
|
222
|
+
font-weight: 600;
|
|
223
|
+
max-width: 20ch;
|
|
224
|
+
letter-spacing: var(--tr-tight);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/* Code */
|
|
228
|
+
code, .t-code {
|
|
229
|
+
font-family: var(--ff-mono);
|
|
230
|
+
font-size: 0.9em;
|
|
231
|
+
background: var(--bg-2);
|
|
232
|
+
padding: 0.15em 0.5em;
|
|
233
|
+
|
|
234
|
+
border-radius: var(--r-1);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
/* ============================================================
|
|
238
|
+
COLORFUL MONO — the signature treatment
|
|
239
|
+
Mono is the UI voice. We don't leave it grey. Every mono block
|
|
240
|
+
is allowed — encouraged — to carry a canonical hue per token.
|
|
241
|
+
============================================================ */
|
|
242
|
+
|
|
243
|
+
/* Hue utilities — apply to mono runs to tint them */
|
|
244
|
+
.mono-green { color: var(--mono-1); }
|
|
245
|
+
.mono-purple { color: var(--mono-2); }
|
|
246
|
+
.mono-mascot { color: var(--mono-3); }
|
|
247
|
+
.mono-sun { color: var(--mono-4); }
|
|
248
|
+
.mono-flame { color: var(--mono-5); }
|
|
249
|
+
.mono-sky { color: var(--mono-6); }
|
|
250
|
+
.mono-ink { color: var(--fg); }
|
|
251
|
+
.mono-dim { color: var(--fg-3); }
|
|
252
|
+
|
|
253
|
+
/* Highlight block — a mono run on a tinted bg with dark text */
|
|
254
|
+
.hl-green { background: var(--green); color: var(--green-fg); padding: 0.08em 0.4em; border-radius: var(--r-1); }
|
|
255
|
+
.hl-purple { background: var(--purple); color: var(--purple-fg); padding: 0.08em 0.4em; border-radius: var(--r-1); }
|
|
256
|
+
.hl-mascot { background: var(--mascot); color: var(--mascot-fg); padding: 0.08em 0.4em; border-radius: var(--r-1); }
|
|
257
|
+
.hl-sun { background: var(--sun); color: var(--ink); padding: 0.08em 0.4em; border-radius: var(--r-1); }
|
|
258
|
+
.hl-flame { background: var(--flame); color: var(--paper); padding: 0.08em 0.4em; border-radius: var(--r-1); }
|
|
259
|
+
.hl-sky { background: var(--sky); color: var(--paper); padding: 0.08em 0.4em; border-radius: var(--r-1); }
|
|
260
|
+
|
|
261
|
+
/* Role-colored mono spans — semantic, self-documenting */
|
|
262
|
+
.m-k { color: var(--mono-2); font-weight: 500; } /* keyword */
|
|
263
|
+
.m-s { color: var(--mono-4); } /* string */
|
|
264
|
+
.m-n { color: var(--mono-1); } /* number / live */
|
|
265
|
+
.m-c { color: var(--fg-3); font-style: italic; } /* comment */
|
|
266
|
+
.m-tag { color: var(--mono-3); } /* tag / mention */
|
|
267
|
+
.m-op { color: var(--mono-5); } /* operator / punct */
|
|
268
|
+
.m-ref { color: var(--mono-6); text-decoration: underline; text-underline-offset: 3px; }
|
|
269
|
+
|
|
270
|
+
/* Links in prose */
|
|
271
|
+
.prose a, a.t-link {
|
|
272
|
+
color: var(--link);
|
|
273
|
+
text-decoration: underline;
|
|
274
|
+
text-underline-offset: 3px;
|
|
275
|
+
text-decoration-thickness: 1px;
|
|
276
|
+
}
|
|
277
|
+
.prose a:hover, a.t-link:hover {
|
|
278
|
+
background: var(--link);
|
|
279
|
+
color: var(--paper);
|
|
280
|
+
text-decoration: none;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
/* ============================================================
|
|
284
|
+
Primitives — rules, stamps, buttons
|
|
285
|
+
============================================================ */
|
|
286
|
+
|
|
287
|
+
.rule { margin: 0; }
|
|
288
|
+
.rule-double{ height: var(--bw-rule); margin: 0; }
|
|
289
|
+
.rule-dotted{ margin: 0; }
|
|
290
|
+
.rule-green { margin: 0; }
|
|
291
|
+
.rule-purple{ margin: 0; }
|
|
292
|
+
.rule-mascot{ margin: 0; }
|
|
293
|
+
|
|
294
|
+
/* The 247420 stamp */
|
|
295
|
+
.stamp {
|
|
296
|
+
display: inline-block;
|
|
297
|
+
padding: var(--space-1) var(--space-3);
|
|
298
|
+
|
|
299
|
+
border-radius: var(--r-pill);
|
|
300
|
+
color: var(--fg);
|
|
301
|
+
background: transparent;
|
|
302
|
+
font-family: var(--ff-mono);
|
|
303
|
+
font-size: var(--fs-tiny);
|
|
304
|
+
letter-spacing: var(--tr-label);
|
|
305
|
+
text-transform: uppercase;
|
|
306
|
+
font-weight: 600;
|
|
307
|
+
transform: rotate(-2deg);
|
|
308
|
+
}
|
|
309
|
+
.stamp.ink { background: var(--fg); color: var(--bg); }
|
|
310
|
+
.stamp.green { background: var(--green); color: var(--green-fg); }
|
|
311
|
+
.stamp.purple { background: var(--purple); color: var(--purple-fg); }
|
|
312
|
+
.stamp.mascot { background: var(--mascot); color: var(--mascot-fg); }
|
|
313
|
+
.stamp.sun { background: var(--sun); color: var(--ink); }
|
|
314
|
+
.stamp.flame { background: var(--flame); color: var(--paper); }
|
|
315
|
+
|
|
316
|
+
/* Legacy alias — .stamp.acid now means green */
|
|
317
|
+
.stamp.acid { background: var(--green); color: var(--green-fg); }
|
|
318
|
+
|
|
319
|
+
/* The "stamp button" */
|
|
320
|
+
.btn-stamp {
|
|
321
|
+
display: inline-flex;
|
|
322
|
+
align-items: center;
|
|
323
|
+
gap: var(--space-2);
|
|
324
|
+
padding: var(--space-3) var(--space-4);
|
|
325
|
+
background: var(--fg);
|
|
326
|
+
color: var(--bg);
|
|
327
|
+
|
|
328
|
+
border-radius: var(--r-2);
|
|
329
|
+
box-shadow: 4px 4px 0 var(--fg);
|
|
330
|
+
font-family: var(--ff-mono);
|
|
331
|
+
font-weight: 600;
|
|
332
|
+
font-size: var(--fs-sm);
|
|
333
|
+
text-transform: uppercase;
|
|
334
|
+
letter-spacing: var(--tr-caps);
|
|
335
|
+
text-decoration: none;
|
|
336
|
+
cursor: pointer;
|
|
337
|
+
transition: transform var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
|
|
338
|
+
}
|
|
339
|
+
.btn-stamp:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--fg); }
|
|
340
|
+
.btn-stamp:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--fg); }
|
|
341
|
+
|
|
342
|
+
.btn-stamp.green { background: var(--green); color: var(--green-fg); box-shadow: 4px 4px 0 var(--ink); }
|
|
343
|
+
.btn-stamp.purple { background: var(--purple); color: var(--purple-fg); box-shadow: 4px 4px 0 var(--ink); }
|
|
344
|
+
.btn-stamp.mascot { background: var(--mascot); color: var(--mascot-fg); box-shadow: 4px 4px 0 var(--ink); }
|
|
345
|
+
.btn-stamp.sun { background: var(--sun); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
|
|
346
|
+
.btn-stamp.flame { background: var(--flame); color: var(--paper); box-shadow: 4px 4px 0 var(--ink); }
|
|
347
|
+
.btn-stamp.acid { background: var(--green); color: var(--green-fg); box-shadow: 4px 4px 0 var(--ink); } /* legacy */
|
|
348
|
+
|
|
349
|
+
/* Plain button — default */
|
|
350
|
+
.btn {
|
|
351
|
+
display: inline-flex;
|
|
352
|
+
align-items: center;
|
|
353
|
+
gap: var(--space-2);
|
|
354
|
+
padding: var(--space-3) var(--space-4);
|
|
355
|
+
background: transparent;
|
|
356
|
+
color: var(--fg);
|
|
357
|
+
|
|
358
|
+
border-radius: var(--r-2);
|
|
359
|
+
font-family: var(--ff-mono);
|
|
360
|
+
font-weight: 500;
|
|
361
|
+
font-size: var(--fs-sm);
|
|
362
|
+
text-transform: uppercase;
|
|
363
|
+
letter-spacing: var(--tr-caps);
|
|
364
|
+
text-decoration: none;
|
|
365
|
+
cursor: pointer;
|
|
366
|
+
transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
|
|
367
|
+
}
|
|
368
|
+
.btn:hover { background: var(--fg); color: var(--bg); }
|
|
369
|
+
.btn:active { background: var(--green); color: var(--green-fg); }
|
|
370
|
+
|
|
371
|
+
/* Ghost/link button */
|
|
372
|
+
.btn-ghost {
|
|
373
|
+
background: transparent;
|
|
374
|
+
|
|
375
|
+
color: var(--fg);
|
|
376
|
+
font-family: var(--ff-mono);
|
|
377
|
+
font-size: var(--fs-sm);
|
|
378
|
+
text-transform: uppercase;
|
|
379
|
+
letter-spacing: var(--tr-caps);
|
|
380
|
+
padding: var(--space-2) 0;
|
|
381
|
+
cursor: pointer;
|
|
382
|
+
text-decoration: underline;
|
|
383
|
+
text-underline-offset: 4px;
|
|
384
|
+
}
|
|
385
|
+
.btn-ghost:hover { color: var(--green-fg); background: var(--green); }
|
|
386
|
+
|
|
387
|
+
/* Input — softened: full border, rounded, 2px default */
|
|
388
|
+
.input {
|
|
389
|
+
width: 100%;
|
|
390
|
+
background: var(--bg);
|
|
391
|
+
|
|
392
|
+
border-radius: var(--r-2);
|
|
393
|
+
padding: var(--space-3) var(--space-3);
|
|
394
|
+
font-family: var(--ff-mono);
|
|
395
|
+
font-size: var(--fs-body);
|
|
396
|
+
color: var(--fg);
|
|
397
|
+
|
|
398
|
+
transition: border-color var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
|
|
399
|
+
}
|
|
400
|
+
.input:focus {
|
|
401
|
+
|
|
402
|
+
box-shadow: 0 0 0 4px color-mix(in oklab, var(--green) 25%, transparent);
|
|
403
|
+
}
|
|
404
|
+
.input::placeholder { color: var(--fg-3); }
|
|
405
|
+
|
|
406
|
+
/* ============================================================
|
|
407
|
+
Layout scaffolds
|
|
408
|
+
============================================================ */
|
|
409
|
+
|
|
410
|
+
.page { min-height: 100vh; padding: var(--space-5); }
|
|
411
|
+
|
|
412
|
+
.dateline {
|
|
413
|
+
display: flex;
|
|
414
|
+
justify-content: space-between;
|
|
415
|
+
align-items: baseline;
|
|
416
|
+
gap: var(--space-4);
|
|
417
|
+
padding-bottom: var(--space-2);
|
|
418
|
+
|
|
419
|
+
font-family: var(--ff-mono);
|
|
420
|
+
font-size: var(--fs-xs);
|
|
421
|
+
text-transform: uppercase;
|
|
422
|
+
letter-spacing: var(--tr-label);
|
|
423
|
+
}
|
|
424
|
+
.dateline > * { white-space: nowrap; }
|
|
425
|
+
.dateline .spread { flex: 1; align-self: center; }
|
|
426
|
+
|
|
427
|
+
/* Index-card row — soft card with breathing room */
|
|
428
|
+
.row {
|
|
429
|
+
display: grid;
|
|
430
|
+
grid-template-columns: 80px 1fr auto;
|
|
431
|
+
gap: var(--space-4);
|
|
432
|
+
padding: var(--space-4);
|
|
433
|
+
|
|
434
|
+
border-radius: var(--r-3);
|
|
435
|
+
background: var(--bg);
|
|
436
|
+
align-items: baseline;
|
|
437
|
+
margin-bottom: calc(var(--bw-hair) * -1);
|
|
438
|
+
transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease), transform var(--dur-snap) var(--ease);
|
|
439
|
+
}
|
|
440
|
+
.row + .row { margin-top: var(--space-2); margin-bottom: 0; }
|
|
441
|
+
.row .row-code { font-family: var(--ff-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--mono-1); }
|
|
442
|
+
.row .row-title { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
|
|
443
|
+
.row .row-meta { font-family: var(--ff-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--fg-3); }
|
|
444
|
+
.row:hover { background: var(--green); color: var(--green-fg); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
|
|
445
|
+
.row:hover .row-code { color: var(--sun); }
|
|
446
|
+
.row:hover .row-meta { color: var(--green-fg); }
|
|
447
|
+
|
|
448
|
+
/* Soft card — the generic container */
|
|
449
|
+
.card {
|
|
450
|
+
|
|
451
|
+
border-radius: var(--r-3);
|
|
452
|
+
background: var(--bg);
|
|
453
|
+
padding: var(--space-5);
|
|
454
|
+
}
|
|
455
|
+
.card.chunk { }
|
|
456
|
+
|
|
457
|
+
/* ============================================================
|
|
458
|
+
Selection
|
|
459
|
+
============================================================ */
|
|
460
|
+
::selection { background: var(--mascot); color: var(--mascot-fg); }
|
|
461
|
+
|
|
462
|
+
|
|
463
|
+
/* ============================================================
|
|
464
|
+
Panel surface tokens — brand-bible parchment palette
|
|
465
|
+
Light default. Dark via prefers-color-scheme or [data-theme="dark"].
|
|
466
|
+
============================================================ */
|
|
467
|
+
:root {
|
|
468
|
+
--panel-0: var(--paper); /* #EFE9DD canvas */
|
|
469
|
+
--panel-1: #f6f1e7;
|
|
470
|
+
--panel-2: #ece5d8;
|
|
471
|
+
--panel-3: #ddd4c3;
|
|
472
|
+
--panel-hover: #e6dece;
|
|
473
|
+
--panel-select: #d8eed6;
|
|
474
|
+
--panel-text: var(--ink); /* #0B0B09 */
|
|
475
|
+
--panel-text-2: #4a473f;
|
|
476
|
+
--panel-text-3: #6d675b;
|
|
477
|
+
--panel-accent: var(--green);
|
|
478
|
+
--panel-accent-2: var(--green-deep);
|
|
479
|
+
--panel-accent-fg: #ffffff;
|
|
480
|
+
--panel-shadow: none;
|
|
481
|
+
--panel-shadow-top: none;
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
@media (prefers-color-scheme: dark) {
|
|
485
|
+
:root:not([data-theme="light"]) {
|
|
486
|
+
--panel-0: #0B0B09;
|
|
487
|
+
--panel-1: #141411;
|
|
488
|
+
--panel-2: #1f1f1a;
|
|
489
|
+
--panel-3: #2a2a23;
|
|
490
|
+
--panel-hover: #24241f;
|
|
491
|
+
--panel-select: #1f3520;
|
|
492
|
+
--panel-text: #EFE9DD;
|
|
493
|
+
--panel-text-2: #d2cab9;
|
|
494
|
+
--panel-text-3: #afa797;
|
|
495
|
+
--panel-accent: var(--green-2);
|
|
496
|
+
--panel-accent-2: var(--green-2);
|
|
497
|
+
--panel-accent-fg: var(--ink);
|
|
498
|
+
--panel-shadow: none;
|
|
499
|
+
--panel-shadow-top: none;
|
|
500
|
+
}
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
[data-theme="dark"] {
|
|
504
|
+
--panel-0: #0B0B09;
|
|
505
|
+
--panel-1: #141411;
|
|
506
|
+
--panel-2: #1f1f1a;
|
|
507
|
+
--panel-3: #2a2a23;
|
|
508
|
+
--panel-hover: #24241f;
|
|
509
|
+
--panel-select: #1f3520;
|
|
510
|
+
--panel-text: #EFE9DD;
|
|
511
|
+
--panel-text-2: #d2cab9;
|
|
512
|
+
--panel-text-3: #afa797;
|
|
513
|
+
--panel-accent: var(--green-2);
|
|
514
|
+
--panel-accent-2: var(--green-2);
|
|
515
|
+
--panel-accent-fg: var(--ink);
|
|
516
|
+
--panel-shadow: none;
|
|
517
|
+
--panel-shadow-top: none;
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
[data-theme="light"] {
|
|
521
|
+
--panel-0: var(--paper);
|
|
522
|
+
--panel-1: #f6f1e7;
|
|
523
|
+
--panel-2: #ece5d8;
|
|
524
|
+
--panel-3: #ddd4c3;
|
|
525
|
+
--panel-hover: #e6dece;
|
|
526
|
+
--panel-select: #d8eed6;
|
|
527
|
+
--panel-text: var(--ink);
|
|
528
|
+
--panel-text-2: #4a473f;
|
|
529
|
+
--panel-text-3: #6d675b;
|
|
530
|
+
--panel-accent: var(--green);
|
|
531
|
+
--panel-accent-2: var(--green-deep);
|
|
532
|
+
--panel-accent-fg: #ffffff;
|
|
533
|
+
--panel-shadow: none;
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
/* Foreground / background aliases derived from panel tokens */
|
|
537
|
+
:root {
|
|
538
|
+
--fg: var(--panel-text);
|
|
539
|
+
--fg-3: var(--panel-text-3);
|
|
540
|
+
--bg: var(--panel-0);
|
|
541
|
+
--bg-2: var(--panel-2);
|
|
542
|
+
}
|
|
543
|
+
@media (prefers-color-scheme: dark) {
|
|
544
|
+
:root:not([data-theme="light"]) {
|
|
545
|
+
--fg: var(--panel-text);
|
|
546
|
+
--fg-3: var(--panel-text-3);
|
|
547
|
+
--bg: var(--panel-0);
|
|
548
|
+
--bg-2: var(--panel-2);
|
|
549
|
+
}
|
|
550
|
+
}
|
|
551
|
+
[data-theme="dark"] { --fg: var(--panel-text); --fg-3: var(--panel-text-3); --bg: var(--panel-0); --bg-2: var(--panel-2); }
|
|
552
|
+
[data-theme="light"] { --fg: var(--panel-text); --fg-3: var(--panel-text-3); --bg: var(--panel-0); --bg-2: var(--panel-2); }
|
|
553
|
+
|
|
554
|
+
/* Contrast safety on any acid/lime/mint surface — text must be ink,
|
|
555
|
+
never light grey / white. Covers the --acid token and any hue that
|
|
556
|
+
pairs a near-white fg against a near-white accent. */
|
|
557
|
+
.on-acid, .on-lime, [data-accent="acid"], [data-accent="lime"] {
|
|
558
|
+
background: var(--acid);
|
|
559
|
+
color: var(--ink);
|
|
560
|
+
}
|
|
561
|
+
.on-acid *, .on-lime *, [data-accent="acid"] *, [data-accent="lime"] * {
|
|
562
|
+
color: inherit;
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
/* Universal reset — no borders, no outlines except :focus-visible */
|
|
566
|
+
*, *::before, *::after { box-sizing: border-box; border: 0 !important; outline: 0 !important; }
|
|
567
|
+
:focus-visible { outline: 2px solid var(--panel-accent) !important; outline-offset: 2px; }
|
|
568
|
+
html, body { margin: 0; padding: 0; }
|
package/static/index.html
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="en"
|
|
2
|
+
<html lang="en" data-theme="dark">
|
|
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">
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
<!-- ===== SIDEBAR ===== -->
|
|
57
57
|
<aside class="sidebar" data-sidebar role="navigation" aria-label="Conversation history">
|
|
58
58
|
<div class="sidebar-header">
|
|
59
|
-
<h2>
|
|
59
|
+
<h2 class="brand-line">247420<span class="slash"> / </span>agentgui</h2>
|
|
60
60
|
<div class="sidebar-header-actions">
|
|
61
61
|
<div class="sidebar-overflow-menu-wrapper">
|
|
62
62
|
<button class="sidebar-overflow-btn" id="sidebarOverflowBtn" title="More options" aria-label="More options">···</button>
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
</button>
|
|
80
80
|
</div>
|
|
81
81
|
</div>
|
|
82
|
-
<button id="newConversationBtn" class="sidebar-new-btn" data-new-conversation title="Start new conversation (Ctrl+N)"
|
|
82
|
+
<button id="newConversationBtn" class="sidebar-new-btn btn-stamp green" data-new-conversation title="Start new conversation (Ctrl+N)">new</button>
|
|
83
83
|
</div>
|
|
84
84
|
</div>
|
|
85
85
|
<div class="sidebar-search-bar" id="sidebarSearchBar">
|
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
</svg>
|
|
123
123
|
</button>
|
|
124
124
|
|
|
125
|
-
<h1 class="header-title">
|
|
125
|
+
<h1 class="header-title brand-line">247420<span class="slash"> / </span>agentgui<span class="slash"> / </span><span class="leaf" id="headerLeaf">chat</span></h1>
|
|
126
126
|
|
|
127
127
|
<div class="header-controls">
|
|
128
128
|
<div class="script-buttons" id="scriptButtons" style="display:none;">
|
|
@@ -237,13 +237,13 @@
|
|
|
237
237
|
<div style="display:none">
|
|
238
238
|
<select class="agent-selector sub-agent-selector" data-agent-selector title="Select sub-agent"></select>
|
|
239
239
|
<select id="presetSelector" class="preset-selector" title="Load preset"></select>
|
|
240
|
-
<textarea class="message-textarea" data-message-input rows="1" style="position:absolute;opacity:0;pointer-events:none;"></textarea>
|
|
241
240
|
</div>
|
|
242
241
|
<div class="input-card">
|
|
243
242
|
<textarea
|
|
244
|
-
class="input-card-textarea"
|
|
243
|
+
class="input-card-textarea message-textarea"
|
|
245
244
|
id="inputCardTextarea"
|
|
246
|
-
|
|
245
|
+
data-message-input
|
|
246
|
+
placeholder="message agentgui..."
|
|
247
247
|
aria-label="Message input"
|
|
248
248
|
rows="1"
|
|
249
249
|
></textarea>
|
package/static/js/client-ui2.js
CHANGED
|
@@ -6,28 +6,29 @@ Object.assign(AgentGUIClient.prototype, {
|
|
|
6
6
|
const agentOptions = agents.map(a =>
|
|
7
7
|
`<option value="${this.escapeHtml(a.id)}">${this.escapeHtml(a.name.split(/[\s\-]+/)[0])}</option>`
|
|
8
8
|
).join('');
|
|
9
|
+
const agentList = agents.length > 0 ? agents.map(a => a.name.split(/[\s\-]+/)[0].toLowerCase()).join(', ') : 'claude, gemini, opencode, kilo, codex';
|
|
9
10
|
outputEl.innerHTML = `
|
|
10
|
-
<div
|
|
11
|
-
<div
|
|
12
|
-
<
|
|
13
|
-
<
|
|
11
|
+
<div class="welcome-pane">
|
|
12
|
+
<div class="welcome-head">
|
|
13
|
+
<div class="t-micro">247420 / agentgui / welcome</div>
|
|
14
|
+
<h1 class="welcome-title">a state machine for coding agents.</h1>
|
|
15
|
+
<p class="welcome-lede">start a new conversation or pick one from the sidebar. pick your agent and model below.</p>
|
|
14
16
|
</div>
|
|
15
17
|
${agents.length > 0 ? `
|
|
16
|
-
<div
|
|
17
|
-
<
|
|
18
|
-
<select id="welcomeAgentSelect"
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<h3 style="margin:0 0 0.5rem 0;color:var(--color-primary);">New Conversation</h3>
|
|
26
|
-
<p style="margin:0;font-size:0.9rem;color:var(--color-text-secondary);">Create a new chat with any AI agent</p>
|
|
18
|
+
<div class="welcome-select-row">
|
|
19
|
+
<span class="t-label mono-dim">select agent</span>
|
|
20
|
+
<select id="welcomeAgentSelect" class="input">${agentOptions}</select>
|
|
21
|
+
</div>` : ''}
|
|
22
|
+
<div class="welcome-rows">
|
|
23
|
+
<div class="row">
|
|
24
|
+
<span class="row-code">01</span>
|
|
25
|
+
<span class="row-title">new conversation</span>
|
|
26
|
+
<span class="row-meta">create a new chat with any agent</span>
|
|
27
27
|
</div>
|
|
28
|
-
<div
|
|
29
|
-
<
|
|
30
|
-
<
|
|
28
|
+
<div class="row">
|
|
29
|
+
<span class="row-code">02</span>
|
|
30
|
+
<span class="row-title">available agents</span>
|
|
31
|
+
<span class="row-meta">${this.escapeHtml(agentList)}</span>
|
|
31
32
|
</div>
|
|
32
33
|
</div>
|
|
33
34
|
</div>
|
package/static/theme.js
CHANGED
|
@@ -7,12 +7,11 @@ class ThemeManager {
|
|
|
7
7
|
|
|
8
8
|
init() {
|
|
9
9
|
const savedTheme = localStorage.getItem(this.THEME_KEY);
|
|
10
|
-
const prefersDark = this.SYSTEM_DARK_MODE.matches;
|
|
11
10
|
|
|
12
11
|
if (savedTheme) {
|
|
13
12
|
this.setTheme(savedTheme);
|
|
14
13
|
} else {
|
|
15
|
-
this.setTheme(
|
|
14
|
+
this.setTheme('dark');
|
|
16
15
|
}
|
|
17
16
|
|
|
18
17
|
this.SYSTEM_DARK_MODE.addEventListener('change', (e) => {
|