agentgui 1.0.895 → 1.0.897
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/app.js +23 -0
- 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/css/gmail-skin.css +588 -303
- package/static/index.html +32 -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
package/static/app.js
CHANGED
|
@@ -236,3 +236,26 @@ const BASE_URL = window.__BASE_URL || '';
|
|
|
236
236
|
if (overlay) overlay.addEventListener('click', close);
|
|
237
237
|
document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isMobile()) close(); });
|
|
238
238
|
})();
|
|
239
|
+
|
|
240
|
+
(function initNavRail() {
|
|
241
|
+
const archivedRailBtn = document.getElementById('viewArchivedBtnRail');
|
|
242
|
+
const archivedBtn = document.getElementById('viewArchivedBtn');
|
|
243
|
+
if (archivedRailBtn && archivedBtn) {
|
|
244
|
+
archivedRailBtn.addEventListener('click', () => archivedBtn.click());
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
const toolsRailBtn = document.getElementById('toolsManagerBtnRail');
|
|
248
|
+
const toolsBtn = document.getElementById('toolsManagerBtn');
|
|
249
|
+
if (toolsRailBtn && toolsBtn) {
|
|
250
|
+
toolsRailBtn.addEventListener('click', () => toolsBtn.click());
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
const headerSearch = document.getElementById('headerSearchInput');
|
|
254
|
+
const sidebarSearch = document.getElementById('sidebarSearchInput');
|
|
255
|
+
if (headerSearch && sidebarSearch) {
|
|
256
|
+
headerSearch.addEventListener('input', () => {
|
|
257
|
+
sidebarSearch.value = headerSearch.value;
|
|
258
|
+
sidebarSearch.dispatchEvent(new Event('input'));
|
|
259
|
+
});
|
|
260
|
+
}
|
|
261
|
+
})();
|
|
@@ -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
|
+
}
|