gm-copilot-cli 2.0.539 → 2.0.541
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/copilot-profile.md +1 -1
- package/index.html +973 -149
- package/manifest.yml +1 -1
- package/package.json +1 -1
- package/tools.json +1 -1
package/copilot-profile.md
CHANGED
package/index.html
CHANGED
|
@@ -2,174 +2,998 @@
|
|
|
2
2
|
<html lang="en"><head>
|
|
3
3
|
<meta charset="utf-8">
|
|
4
4
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
5
|
-
<title>Copilot CLI · gm</title>
|
|
5
|
+
<title>Copilot CLI · gm · 247420</title>
|
|
6
6
|
<meta name="description" content="State machine agent with hooks, skills, and automated git enforcement">
|
|
7
|
-
<meta name="color-scheme" content="light">
|
|
8
|
-
<meta name="theme-color" content="#
|
|
7
|
+
<meta name="color-scheme" content="light dark">
|
|
8
|
+
<meta name="theme-color" content="#181a1f" media="(prefers-color-scheme: dark)">
|
|
9
|
+
<meta name="theme-color" content="#f4f5f7" media="(prefers-color-scheme: light)">
|
|
9
10
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
11
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
11
|
-
<link href="https://fonts.googleapis.com/css2?family=
|
|
12
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
12
13
|
<style>
|
|
13
|
-
|
|
14
|
-
:
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
--
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
.
|
|
35
|
-
.t-hero .
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
.
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
.
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
.
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
.
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
.
|
|
91
|
-
.
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
14
|
+
|
|
15
|
+
/* Rows: no separators, hover surface tint instead */
|
|
16
|
+
.row { background: transparent; transition: background var(--dur-snap) var(--ease); }
|
|
17
|
+
.row:hover { background: var(--surface-2); }
|
|
18
|
+
[data-theme="ink"] .row:hover { background: var(--surface-ink-2); }
|
|
19
|
+
|
|
20
|
+
body {
|
|
21
|
+
background: var(--panel-0);
|
|
22
|
+
color: var(--panel-text);
|
|
23
|
+
font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
24
|
+
font-size: 13px;
|
|
25
|
+
line-height: 1.5;
|
|
26
|
+
-webkit-font-smoothing: antialiased;
|
|
27
|
+
-moz-osx-font-smoothing: grayscale;
|
|
28
|
+
text-rendering: optimizeLegibility;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* ============================================================
|
|
32
|
+
Semantic type classes
|
|
33
|
+
============================================================ */
|
|
34
|
+
|
|
35
|
+
/* Hero — project name, once per page. Archivo Black territory. */
|
|
36
|
+
.t-hero, h1.hero {
|
|
37
|
+
font-family: var(--ff-display);
|
|
38
|
+
font-size: clamp(64px, 12vw, var(--fs-hero));
|
|
39
|
+
line-height: var(--lh-tight);
|
|
40
|
+
letter-spacing: var(--tr-tight);
|
|
41
|
+
font-weight: 800;
|
|
42
|
+
margin: 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* h1 — page title */
|
|
46
|
+
.t-h1, h1 {
|
|
47
|
+
font-family: var(--ff-display);
|
|
48
|
+
font-size: clamp(40px, 6vw, var(--fs-h1));
|
|
49
|
+
line-height: var(--lh-tight);
|
|
50
|
+
letter-spacing: var(--tr-tight);
|
|
51
|
+
font-weight: 700;
|
|
52
|
+
margin: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* h2 — section */
|
|
56
|
+
.t-h2, h2 {
|
|
57
|
+
font-family: var(--ff-display);
|
|
58
|
+
font-size: var(--fs-h2);
|
|
59
|
+
line-height: var(--lh-snug);
|
|
60
|
+
letter-spacing: var(--tr-tight);
|
|
61
|
+
font-weight: 700;
|
|
62
|
+
margin: 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* h3 — subsection (mono, colorful-eligible) */
|
|
66
|
+
.t-h3, h3 {
|
|
67
|
+
font-family: var(--ff-mono);
|
|
68
|
+
font-size: var(--fs-h3);
|
|
69
|
+
line-height: var(--lh-snug);
|
|
70
|
+
letter-spacing: 0;
|
|
71
|
+
font-weight: 600;
|
|
72
|
+
margin: 0;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* h4 */
|
|
76
|
+
.t-h4, h4 {
|
|
77
|
+
font-family: var(--ff-mono);
|
|
78
|
+
font-size: var(--fs-h4);
|
|
79
|
+
line-height: var(--lh-snug);
|
|
80
|
+
font-weight: 500;
|
|
81
|
+
margin: 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Body UI — mono, the default UI voice */
|
|
85
|
+
.t-body {
|
|
86
|
+
font-family: var(--ff-mono);
|
|
87
|
+
font-size: var(--fs-body);
|
|
88
|
+
line-height: var(--lh-base);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Long-form prose — SANS, not serif. Space Grotesk. */
|
|
92
|
+
.t-prose, .prose p {
|
|
93
|
+
font-family: var(--ff-body);
|
|
94
|
+
font-size: var(--fs-lg);
|
|
95
|
+
line-height: var(--lh-long);
|
|
96
|
+
max-width: var(--measure);
|
|
97
|
+
text-wrap: pretty;
|
|
98
|
+
font-weight: 400;
|
|
99
|
+
}
|
|
100
|
+
.prose p { margin: 0 0 var(--space-4) 0; }
|
|
101
|
+
|
|
102
|
+
/* Label — mono caps, terminal voice */
|
|
103
|
+
.t-label {
|
|
104
|
+
font-family: var(--ff-mono);
|
|
105
|
+
font-size: var(--fs-xs);
|
|
106
|
+
text-transform: uppercase;
|
|
107
|
+
letter-spacing: var(--tr-label);
|
|
108
|
+
font-weight: 500;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Meta — mono, small, dim */
|
|
112
|
+
.t-meta {
|
|
113
|
+
font-family: var(--ff-mono);
|
|
114
|
+
font-size: var(--fs-xs);
|
|
115
|
+
color: var(--fg-3);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Micro — smallest, datelines */
|
|
119
|
+
.t-micro {
|
|
120
|
+
font-family: var(--ff-mono);
|
|
121
|
+
font-size: var(--fs-micro);
|
|
122
|
+
letter-spacing: var(--tr-label);
|
|
123
|
+
text-transform: uppercase;
|
|
124
|
+
color: var(--fg-3);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* Pull — display, for section intros and callouts */
|
|
128
|
+
.t-pull {
|
|
129
|
+
font-family: var(--ff-display);
|
|
130
|
+
font-size: var(--fs-h2);
|
|
131
|
+
line-height: var(--lh-snug);
|
|
132
|
+
font-weight: 600;
|
|
133
|
+
max-width: 20ch;
|
|
134
|
+
letter-spacing: var(--tr-tight);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Code */
|
|
138
|
+
code, .t-code {
|
|
139
|
+
font-family: var(--ff-mono);
|
|
140
|
+
font-size: 0.9em;
|
|
141
|
+
background: var(--bg-2);
|
|
142
|
+
padding: 0.15em 0.5em;
|
|
143
|
+
|
|
144
|
+
border-radius: var(--r-1);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* ============================================================
|
|
148
|
+
COLORFUL MONO — the signature treatment
|
|
149
|
+
Mono is the UI voice. We don't leave it grey. Every mono block
|
|
150
|
+
is allowed — encouraged — to carry a canonical hue per token.
|
|
151
|
+
============================================================ */
|
|
152
|
+
|
|
153
|
+
/* Hue utilities — apply to mono runs to tint them */
|
|
154
|
+
.mono-green { color: var(--mono-1); }
|
|
155
|
+
.mono-purple { color: var(--mono-2); }
|
|
156
|
+
.mono-mascot { color: var(--mono-3); }
|
|
157
|
+
.mono-sun { color: var(--mono-4); }
|
|
158
|
+
.mono-flame { color: var(--mono-5); }
|
|
159
|
+
.mono-sky { color: var(--mono-6); }
|
|
160
|
+
.mono-ink { color: var(--fg); }
|
|
161
|
+
.mono-dim { color: var(--fg-3); }
|
|
162
|
+
|
|
163
|
+
/* Highlight block — a mono run on a tinted bg with dark text */
|
|
164
|
+
.hl-green { background: var(--green); color: var(--green-fg); padding: 0.08em 0.4em; border-radius: var(--r-1); }
|
|
165
|
+
.hl-purple { background: var(--purple); color: var(--purple-fg); padding: 0.08em 0.4em; border-radius: var(--r-1); }
|
|
166
|
+
.hl-mascot { background: var(--mascot); color: var(--mascot-fg); padding: 0.08em 0.4em; border-radius: var(--r-1); }
|
|
167
|
+
.hl-sun { background: var(--sun); color: var(--ink); padding: 0.08em 0.4em; border-radius: var(--r-1); }
|
|
168
|
+
.hl-flame { background: var(--flame); color: var(--paper); padding: 0.08em 0.4em; border-radius: var(--r-1); }
|
|
169
|
+
.hl-sky { background: var(--sky); color: var(--paper); padding: 0.08em 0.4em; border-radius: var(--r-1); }
|
|
170
|
+
|
|
171
|
+
/* Role-colored mono spans — semantic, self-documenting */
|
|
172
|
+
.m-k { color: var(--mono-2); font-weight: 500; } /* keyword */
|
|
173
|
+
.m-s { color: var(--mono-4); } /* string */
|
|
174
|
+
.m-n { color: var(--mono-1); } /* number / live */
|
|
175
|
+
.m-c { color: var(--fg-3); font-style: italic; } /* comment */
|
|
176
|
+
.m-tag { color: var(--mono-3); } /* tag / mention */
|
|
177
|
+
.m-op { color: var(--mono-5); } /* operator / punct */
|
|
178
|
+
.m-ref { color: var(--mono-6); text-decoration: underline; text-underline-offset: 3px; }
|
|
179
|
+
|
|
180
|
+
/* Links in prose */
|
|
181
|
+
.prose a, a.t-link {
|
|
182
|
+
color: var(--link);
|
|
183
|
+
text-decoration: underline;
|
|
184
|
+
text-underline-offset: 3px;
|
|
185
|
+
text-decoration-thickness: 1px;
|
|
186
|
+
}
|
|
187
|
+
.prose a:hover, a.t-link:hover {
|
|
188
|
+
background: var(--link);
|
|
189
|
+
color: var(--paper);
|
|
190
|
+
text-decoration: none;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/* ============================================================
|
|
194
|
+
Primitives — rules, stamps, buttons
|
|
195
|
+
============================================================ */
|
|
196
|
+
|
|
197
|
+
.rule { margin: 0; }
|
|
198
|
+
.rule-double{ height: var(--bw-rule); margin: 0; }
|
|
199
|
+
.rule-dotted{ margin: 0; }
|
|
200
|
+
.rule-green { margin: 0; }
|
|
201
|
+
.rule-purple{ margin: 0; }
|
|
202
|
+
.rule-mascot{ margin: 0; }
|
|
203
|
+
|
|
204
|
+
/* The 247420 stamp */
|
|
205
|
+
.stamp {
|
|
206
|
+
display: inline-block;
|
|
207
|
+
padding: var(--space-1) var(--space-3);
|
|
208
|
+
|
|
209
|
+
border-radius: var(--r-pill);
|
|
210
|
+
color: var(--fg);
|
|
211
|
+
background: transparent;
|
|
212
|
+
font-family: var(--ff-mono);
|
|
213
|
+
font-size: var(--fs-tiny);
|
|
214
|
+
letter-spacing: var(--tr-label);
|
|
215
|
+
text-transform: uppercase;
|
|
216
|
+
font-weight: 600;
|
|
217
|
+
transform: rotate(-2deg);
|
|
218
|
+
}
|
|
219
|
+
.stamp.ink { background: var(--fg); color: var(--bg); }
|
|
220
|
+
.stamp.green { background: var(--green); color: var(--green-fg); }
|
|
221
|
+
.stamp.purple { background: var(--purple); color: var(--purple-fg); }
|
|
222
|
+
.stamp.mascot { background: var(--mascot); color: var(--mascot-fg); }
|
|
223
|
+
.stamp.sun { background: var(--sun); color: var(--ink); }
|
|
224
|
+
.stamp.flame { background: var(--flame); color: var(--paper); }
|
|
225
|
+
|
|
226
|
+
/* Legacy alias — .stamp.acid now means green */
|
|
227
|
+
.stamp.acid { background: var(--green); color: var(--green-fg); }
|
|
228
|
+
|
|
229
|
+
/* The "stamp button" */
|
|
230
|
+
.btn-stamp {
|
|
231
|
+
display: inline-flex;
|
|
232
|
+
align-items: center;
|
|
233
|
+
gap: var(--space-2);
|
|
234
|
+
padding: var(--space-3) var(--space-4);
|
|
235
|
+
background: var(--fg);
|
|
236
|
+
color: var(--bg);
|
|
237
|
+
|
|
238
|
+
border-radius: var(--r-2);
|
|
239
|
+
box-shadow: 4px 4px 0 var(--fg);
|
|
240
|
+
font-family: var(--ff-mono);
|
|
241
|
+
font-weight: 600;
|
|
242
|
+
font-size: var(--fs-sm);
|
|
243
|
+
text-transform: uppercase;
|
|
244
|
+
letter-spacing: var(--tr-caps);
|
|
245
|
+
text-decoration: none;
|
|
246
|
+
cursor: pointer;
|
|
247
|
+
transition: transform var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
|
|
248
|
+
}
|
|
249
|
+
.btn-stamp:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--fg); }
|
|
250
|
+
.btn-stamp:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--fg); }
|
|
251
|
+
|
|
252
|
+
.btn-stamp.green { background: var(--green); color: var(--green-fg); box-shadow: 4px 4px 0 var(--ink); }
|
|
253
|
+
.btn-stamp.purple { background: var(--purple); color: var(--purple-fg); box-shadow: 4px 4px 0 var(--ink); }
|
|
254
|
+
.btn-stamp.mascot { background: var(--mascot); color: var(--mascot-fg); box-shadow: 4px 4px 0 var(--ink); }
|
|
255
|
+
.btn-stamp.sun { background: var(--sun); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
|
|
256
|
+
.btn-stamp.flame { background: var(--flame); color: var(--paper); box-shadow: 4px 4px 0 var(--ink); }
|
|
257
|
+
.btn-stamp.acid { background: var(--green); color: var(--green-fg); box-shadow: 4px 4px 0 var(--ink); } /* legacy */
|
|
258
|
+
|
|
259
|
+
/* Plain button — default */
|
|
260
|
+
.btn {
|
|
261
|
+
display: inline-flex;
|
|
262
|
+
align-items: center;
|
|
263
|
+
gap: var(--space-2);
|
|
264
|
+
padding: var(--space-3) var(--space-4);
|
|
265
|
+
background: transparent;
|
|
266
|
+
color: var(--fg);
|
|
267
|
+
|
|
268
|
+
border-radius: var(--r-2);
|
|
269
|
+
font-family: var(--ff-mono);
|
|
270
|
+
font-weight: 500;
|
|
271
|
+
font-size: var(--fs-sm);
|
|
272
|
+
text-transform: uppercase;
|
|
273
|
+
letter-spacing: var(--tr-caps);
|
|
274
|
+
text-decoration: none;
|
|
275
|
+
cursor: pointer;
|
|
276
|
+
transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
|
|
277
|
+
}
|
|
278
|
+
.btn:hover { background: var(--fg); color: var(--bg); }
|
|
279
|
+
.btn:active { background: var(--green); color: var(--green-fg); }
|
|
280
|
+
|
|
281
|
+
/* Ghost/link button */
|
|
282
|
+
.btn-ghost {
|
|
283
|
+
background: transparent;
|
|
284
|
+
|
|
285
|
+
color: var(--fg);
|
|
286
|
+
font-family: var(--ff-mono);
|
|
287
|
+
font-size: var(--fs-sm);
|
|
288
|
+
text-transform: uppercase;
|
|
289
|
+
letter-spacing: var(--tr-caps);
|
|
290
|
+
padding: var(--space-2) 0;
|
|
291
|
+
cursor: pointer;
|
|
292
|
+
text-decoration: underline;
|
|
293
|
+
text-underline-offset: 4px;
|
|
294
|
+
}
|
|
295
|
+
.btn-ghost:hover { color: var(--green-fg); background: var(--green); }
|
|
296
|
+
|
|
297
|
+
/* Input — softened: full border, rounded, 2px default */
|
|
298
|
+
.input {
|
|
299
|
+
width: 100%;
|
|
300
|
+
background: var(--bg);
|
|
301
|
+
|
|
302
|
+
border-radius: var(--r-2);
|
|
303
|
+
padding: var(--space-3) var(--space-3);
|
|
304
|
+
font-family: var(--ff-mono);
|
|
305
|
+
font-size: var(--fs-body);
|
|
306
|
+
color: var(--fg);
|
|
307
|
+
|
|
308
|
+
transition: border-color var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
|
|
309
|
+
}
|
|
310
|
+
.input:focus {
|
|
311
|
+
|
|
312
|
+
box-shadow: 0 0 0 4px color-mix(in oklab, var(--green) 25%, transparent);
|
|
313
|
+
}
|
|
314
|
+
.input::placeholder { color: var(--fg-3); }
|
|
315
|
+
|
|
316
|
+
/* ============================================================
|
|
317
|
+
Layout scaffolds
|
|
318
|
+
============================================================ */
|
|
319
|
+
|
|
320
|
+
.page { min-height: 100vh; padding: var(--space-5); }
|
|
321
|
+
|
|
322
|
+
.dateline {
|
|
323
|
+
display: flex;
|
|
324
|
+
justify-content: space-between;
|
|
325
|
+
align-items: baseline;
|
|
326
|
+
gap: var(--space-4);
|
|
327
|
+
padding-bottom: var(--space-2);
|
|
328
|
+
|
|
329
|
+
font-family: var(--ff-mono);
|
|
330
|
+
font-size: var(--fs-xs);
|
|
331
|
+
text-transform: uppercase;
|
|
332
|
+
letter-spacing: var(--tr-label);
|
|
333
|
+
}
|
|
334
|
+
.dateline > * { white-space: nowrap; }
|
|
335
|
+
.dateline .spread { flex: 1; align-self: center; }
|
|
336
|
+
|
|
337
|
+
/* Index-card row — soft card with breathing room */
|
|
338
|
+
.row {
|
|
339
|
+
display: grid;
|
|
340
|
+
grid-template-columns: 80px 1fr auto;
|
|
341
|
+
gap: var(--space-4);
|
|
342
|
+
padding: var(--space-4);
|
|
343
|
+
|
|
344
|
+
border-radius: var(--r-3);
|
|
345
|
+
background: var(--bg);
|
|
346
|
+
align-items: baseline;
|
|
347
|
+
margin-bottom: calc(var(--bw-hair) * -1);
|
|
348
|
+
transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease), transform var(--dur-snap) var(--ease);
|
|
349
|
+
}
|
|
350
|
+
.row + .row { margin-top: var(--space-2); margin-bottom: 0; }
|
|
351
|
+
.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); }
|
|
352
|
+
.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); }
|
|
353
|
+
.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); }
|
|
354
|
+
.row:hover { background: var(--green); color: var(--green-fg); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
|
|
355
|
+
.row:hover .row-code { color: var(--sun); }
|
|
356
|
+
.row:hover .row-meta { color: var(--green-fg); }
|
|
357
|
+
|
|
358
|
+
/* Soft card — the generic container */
|
|
359
|
+
.card {
|
|
360
|
+
|
|
361
|
+
border-radius: var(--r-3);
|
|
362
|
+
background: var(--bg);
|
|
363
|
+
padding: var(--space-5);
|
|
364
|
+
}
|
|
365
|
+
.card.chunk { }
|
|
366
|
+
|
|
367
|
+
/* ============================================================
|
|
368
|
+
Selection
|
|
369
|
+
============================================================ */
|
|
370
|
+
::selection { background: var(--mascot); color: var(--mascot-fg); }
|
|
371
|
+
|
|
372
|
+
|
|
373
|
+
/* ============================================================
|
|
374
|
+
Panel surface tokens — VS-Code-inspired layered chrome
|
|
375
|
+
Light default. Dark via prefers-color-scheme or [data-theme="dark"].
|
|
376
|
+
============================================================ */
|
|
377
|
+
:root {
|
|
378
|
+
--panel-0: #f4f5f7; /* canvas */
|
|
379
|
+
--panel-1: #ffffff; /* elevated card */
|
|
380
|
+
--panel-2: #e7e9ec; /* chrome (topbar, tabbar) */
|
|
381
|
+
--panel-3: #d8dbe0; /* deepest */
|
|
382
|
+
--panel-hover: #ecedf0;
|
|
383
|
+
--panel-select: #dbe3f5;
|
|
384
|
+
--panel-text: #1f2328;
|
|
385
|
+
--panel-text-2: #59636e;
|
|
386
|
+
--panel-text-3: #8b949e;
|
|
387
|
+
--panel-accent: var(--green);
|
|
388
|
+
--panel-accent-2:var(--green-deep);
|
|
389
|
+
--panel-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.04);
|
|
390
|
+
--panel-shadow-top: 0 1px 0 rgba(0,0,0,0.05);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
@media (prefers-color-scheme: dark) {
|
|
394
|
+
:root:not([data-theme="light"]) {
|
|
395
|
+
--panel-0: #181a1f;
|
|
396
|
+
--panel-1: #21252b;
|
|
397
|
+
--panel-2: #2c313a;
|
|
398
|
+
--panel-3: #383e48;
|
|
399
|
+
--panel-hover: #2a3038;
|
|
400
|
+
--panel-select: #3a4050;
|
|
401
|
+
--panel-text: #e4e6eb;
|
|
402
|
+
--panel-text-2: #9aa3b2;
|
|
403
|
+
--panel-text-3: #6d7685;
|
|
404
|
+
--panel-accent: var(--green-2);
|
|
405
|
+
--panel-accent-2:var(--green-2);
|
|
406
|
+
--panel-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 6px rgba(0,0,0,0.25);
|
|
407
|
+
--panel-shadow-top: 0 1px 0 rgba(255,255,255,0.04);
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
[data-theme="dark"] {
|
|
412
|
+
--panel-0: #181a1f;
|
|
413
|
+
--panel-1: #21252b;
|
|
414
|
+
--panel-2: #2c313a;
|
|
415
|
+
--panel-3: #383e48;
|
|
416
|
+
--panel-hover: #2a3038;
|
|
417
|
+
--panel-select: #3a4050;
|
|
418
|
+
--panel-text: #e4e6eb;
|
|
419
|
+
--panel-text-2: #9aa3b2;
|
|
420
|
+
--panel-text-3: #6d7685;
|
|
421
|
+
--panel-accent: var(--green-2);
|
|
422
|
+
--panel-accent-2:var(--green-2);
|
|
423
|
+
--panel-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 6px rgba(0,0,0,0.25);
|
|
424
|
+
--panel-shadow-top: 0 1px 0 rgba(255,255,255,0.04);
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
[data-theme="light"] {
|
|
428
|
+
--panel-0: #f4f5f7;
|
|
429
|
+
--panel-1: #ffffff;
|
|
430
|
+
--panel-2: #e7e9ec;
|
|
431
|
+
--panel-3: #d8dbe0;
|
|
432
|
+
--panel-hover: #ecedf0;
|
|
433
|
+
--panel-select: #dbe3f5;
|
|
434
|
+
--panel-text: #1f2328;
|
|
435
|
+
--panel-text-2: #59636e;
|
|
436
|
+
--panel-text-3: #8b949e;
|
|
437
|
+
--panel-accent: var(--green);
|
|
438
|
+
--panel-accent-2:var(--green-deep);
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
/* Universal reset — no borders, no outlines except :focus-visible */
|
|
442
|
+
*, *::before, *::after { box-sizing: border-box; border: 0 !important; outline: 0 !important; }
|
|
443
|
+
:focus-visible { outline: 2px solid var(--panel-accent) !important; outline-offset: 2px; }
|
|
444
|
+
html, body { margin: 0; padding: 0; }
|
|
445
|
+
|
|
446
|
+
/* ============================================================
|
|
447
|
+
App shell — IDE-modern density patterns
|
|
448
|
+
Consumed by landing, ui_kits/*, docs, blog, slides
|
|
449
|
+
Light default · dark via prefers-color-scheme or [data-theme=dark]
|
|
450
|
+
============================================================ */
|
|
451
|
+
|
|
452
|
+
html, body {
|
|
453
|
+
background: var(--panel-0);
|
|
454
|
+
color: var(--panel-text);
|
|
455
|
+
font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
456
|
+
font-size: 13px;
|
|
457
|
+
line-height: 1.5;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.app {
|
|
461
|
+
min-height: 100vh;
|
|
462
|
+
display: flex;
|
|
463
|
+
flex-direction: column;
|
|
464
|
+
background: var(--panel-0);
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
/* Top bar — sticky chrome, elevated via shadow so content doesn't bleed under */
|
|
468
|
+
.app-topbar {
|
|
469
|
+
position: sticky;
|
|
470
|
+
top: 0;
|
|
471
|
+
z-index: 100;
|
|
472
|
+
height: 40px;
|
|
473
|
+
background: var(--panel-2);
|
|
474
|
+
color: var(--panel-text);
|
|
475
|
+
display: flex;
|
|
476
|
+
align-items: center;
|
|
477
|
+
padding: 0 16px;
|
|
478
|
+
gap: 16px;
|
|
479
|
+
font-size: 13px;
|
|
480
|
+
flex-shrink: 0;
|
|
481
|
+
box-shadow: 0 1px 0 rgba(0,0,0,0.06), var(--panel-shadow);
|
|
482
|
+
}
|
|
483
|
+
.app-topbar .brand {
|
|
484
|
+
font-weight: 600;
|
|
485
|
+
color: var(--panel-text);
|
|
486
|
+
display: inline-flex;
|
|
487
|
+
align-items: center;
|
|
488
|
+
}
|
|
489
|
+
.app-topbar .brand .slash { color: var(--panel-text-3); margin: 0 6px; font-weight: 400; }
|
|
490
|
+
.app-topbar nav {
|
|
491
|
+
display: flex;
|
|
492
|
+
gap: 2px;
|
|
493
|
+
margin-left: auto;
|
|
494
|
+
align-items: center;
|
|
495
|
+
}
|
|
496
|
+
.app-topbar nav a {
|
|
497
|
+
color: var(--panel-text-2);
|
|
498
|
+
text-decoration: none;
|
|
499
|
+
padding: 7px 12px;
|
|
500
|
+
font-size: 13px;
|
|
501
|
+
border-radius: 6px;
|
|
502
|
+
line-height: 1;
|
|
503
|
+
}
|
|
504
|
+
.app-topbar nav a:hover { background: var(--panel-hover); color: var(--panel-text); }
|
|
505
|
+
.app-topbar nav a.active { color: #ffffff; background: var(--panel-accent); }
|
|
506
|
+
|
|
507
|
+
/* Breadcrumb — under topbar */
|
|
508
|
+
.app-crumb {
|
|
509
|
+
position: sticky;
|
|
510
|
+
top: 40px;
|
|
511
|
+
z-index: 99;
|
|
512
|
+
background: var(--panel-1);
|
|
513
|
+
padding: 8px 20px;
|
|
514
|
+
font-family: var(--ff-mono);
|
|
515
|
+
font-size: 12px;
|
|
516
|
+
color: var(--panel-text-2);
|
|
517
|
+
display: flex;
|
|
518
|
+
gap: 6px;
|
|
519
|
+
align-items: center;
|
|
520
|
+
flex-shrink: 0;
|
|
521
|
+
box-shadow: 0 1px 0 rgba(0,0,0,0.04);
|
|
522
|
+
}
|
|
523
|
+
.app-crumb .sep { color: var(--panel-text-3); }
|
|
524
|
+
.app-crumb .leaf { color: var(--panel-text); }
|
|
525
|
+
|
|
526
|
+
/* Shell body — optional sidebar + main */
|
|
527
|
+
.app-body {
|
|
528
|
+
display: grid;
|
|
529
|
+
grid-template-columns: 240px 1fr;
|
|
530
|
+
flex: 1;
|
|
531
|
+
min-height: 0;
|
|
532
|
+
background: var(--panel-0);
|
|
533
|
+
}
|
|
534
|
+
.app-body.no-side { grid-template-columns: 1fr; }
|
|
535
|
+
|
|
536
|
+
/* Sidebar */
|
|
537
|
+
.app-side {
|
|
538
|
+
background: var(--panel-1);
|
|
539
|
+
padding: 12px 0;
|
|
540
|
+
overflow-y: auto;
|
|
541
|
+
box-shadow: inset -1px 0 0 rgba(0,0,0,0.05);
|
|
542
|
+
}
|
|
543
|
+
.app-side .group {
|
|
544
|
+
padding: 12px 16px 4px 16px;
|
|
545
|
+
font-family: var(--ff-mono);
|
|
546
|
+
font-size: 11px;
|
|
547
|
+
text-transform: uppercase;
|
|
548
|
+
letter-spacing: 0.08em;
|
|
549
|
+
color: var(--panel-text-2);
|
|
550
|
+
font-weight: 600;
|
|
551
|
+
}
|
|
552
|
+
.app-side a {
|
|
553
|
+
display: flex;
|
|
554
|
+
align-items: center;
|
|
555
|
+
gap: 8px;
|
|
556
|
+
padding: 5px 16px 5px 24px;
|
|
557
|
+
color: var(--panel-text);
|
|
558
|
+
text-decoration: none;
|
|
559
|
+
font-size: 13px;
|
|
560
|
+
}
|
|
561
|
+
.app-side a:hover { background: var(--panel-hover); }
|
|
562
|
+
.app-side a.active { background: var(--panel-select); color: var(--panel-text); font-weight: 500; }
|
|
563
|
+
.app-side a .glyph { color: var(--panel-text-2); font-family: var(--ff-mono); width: 14px; flex-shrink: 0; }
|
|
564
|
+
.app-side a.active .glyph { color: var(--panel-accent); }
|
|
565
|
+
|
|
566
|
+
/* Main content area */
|
|
567
|
+
.app-main {
|
|
568
|
+
background: var(--panel-0);
|
|
569
|
+
padding: 24px 32px 64px 32px;
|
|
570
|
+
overflow-y: auto;
|
|
571
|
+
}
|
|
572
|
+
.app-main.narrow { max-width: 820px; }
|
|
573
|
+
.app-main.centered { margin: 0 auto; }
|
|
574
|
+
|
|
575
|
+
.app-main h1 {
|
|
576
|
+
font-size: 28px;
|
|
577
|
+
font-weight: 600;
|
|
578
|
+
margin: 4px 0 4px 0;
|
|
579
|
+
color: var(--panel-text);
|
|
580
|
+
letter-spacing: -0.01em;
|
|
581
|
+
line-height: 1.2;
|
|
582
|
+
}
|
|
583
|
+
.app-main h2 {
|
|
584
|
+
font-size: 18px;
|
|
585
|
+
font-weight: 600;
|
|
586
|
+
margin: 32px 0 8px 0;
|
|
587
|
+
color: var(--panel-text);
|
|
588
|
+
letter-spacing: -0.005em;
|
|
589
|
+
}
|
|
590
|
+
.app-main h3 {
|
|
591
|
+
font-family: var(--ff-mono);
|
|
592
|
+
font-size: 12px;
|
|
593
|
+
font-weight: 600;
|
|
594
|
+
margin: 24px 0 8px 0;
|
|
595
|
+
color: var(--panel-accent);
|
|
596
|
+
text-transform: uppercase;
|
|
597
|
+
letter-spacing: 0.08em;
|
|
598
|
+
}
|
|
599
|
+
.app-main p {
|
|
600
|
+
margin: 0 0 12px 0;
|
|
601
|
+
max-width: 72ch;
|
|
602
|
+
font-size: 14px;
|
|
603
|
+
line-height: 1.6;
|
|
604
|
+
color: var(--panel-text);
|
|
605
|
+
}
|
|
606
|
+
.app-main .lede {
|
|
607
|
+
font-size: 15px;
|
|
608
|
+
color: var(--panel-text-2);
|
|
609
|
+
margin: 0 0 24px 0;
|
|
610
|
+
max-width: 60ch;
|
|
611
|
+
}
|
|
612
|
+
.app-main a {
|
|
613
|
+
color: var(--panel-accent);
|
|
614
|
+
text-decoration: none;
|
|
615
|
+
}
|
|
616
|
+
.app-main a:hover { text-decoration: underline; text-underline-offset: 2px; }
|
|
617
|
+
.app-main code {
|
|
618
|
+
font-family: var(--ff-mono);
|
|
619
|
+
font-size: 12px;
|
|
620
|
+
background: var(--panel-1);
|
|
621
|
+
padding: 1px 6px;
|
|
622
|
+
border-radius: 6px;
|
|
623
|
+
color: var(--panel-text);
|
|
624
|
+
box-shadow: var(--panel-shadow);
|
|
625
|
+
}
|
|
626
|
+
.app-main pre {
|
|
627
|
+
background: var(--panel-1);
|
|
628
|
+
padding: 14px 16px;
|
|
629
|
+
font-family: var(--ff-mono);
|
|
630
|
+
font-size: 12px;
|
|
631
|
+
line-height: 1.6;
|
|
632
|
+
color: var(--panel-text);
|
|
633
|
+
overflow-x: auto;
|
|
634
|
+
margin: 12px 0;
|
|
635
|
+
border-radius: 8px;
|
|
636
|
+
box-shadow: var(--panel-shadow);
|
|
637
|
+
}
|
|
638
|
+
.app-main pre code { background: transparent; padding: 0; box-shadow: none; }
|
|
639
|
+
.app-main pre .c { color: var(--panel-text-2); }
|
|
640
|
+
.app-main pre .k { color: var(--panel-accent); }
|
|
641
|
+
.app-main pre .s { color: #ce9178; }
|
|
642
|
+
|
|
643
|
+
/* Panel — grouped content block, elevated */
|
|
644
|
+
.panel {
|
|
645
|
+
background: var(--panel-1);
|
|
646
|
+
border-radius: 8px;
|
|
647
|
+
overflow: hidden;
|
|
648
|
+
margin: 12px 0;
|
|
649
|
+
box-shadow: var(--panel-shadow);
|
|
650
|
+
}
|
|
651
|
+
.panel-head {
|
|
652
|
+
padding: 10px 16px;
|
|
653
|
+
background: var(--panel-2);
|
|
654
|
+
font-family: var(--ff-mono);
|
|
655
|
+
font-size: 11px;
|
|
656
|
+
text-transform: uppercase;
|
|
657
|
+
letter-spacing: 0.08em;
|
|
658
|
+
color: var(--panel-text-2);
|
|
659
|
+
display: flex;
|
|
660
|
+
justify-content: space-between;
|
|
661
|
+
align-items: center;
|
|
662
|
+
gap: 12px;
|
|
663
|
+
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
|
|
664
|
+
}
|
|
665
|
+
.panel-body { padding: 0; background: var(--panel-1); }
|
|
666
|
+
|
|
667
|
+
/* Row — dense list item */
|
|
668
|
+
.row {
|
|
669
|
+
display: grid;
|
|
670
|
+
grid-template-columns: 80px 1fr auto;
|
|
671
|
+
gap: 12px;
|
|
672
|
+
padding: 8px 16px;
|
|
673
|
+
align-items: baseline;
|
|
674
|
+
color: var(--panel-text);
|
|
675
|
+
text-decoration: none;
|
|
676
|
+
font-size: 13px;
|
|
677
|
+
cursor: pointer;
|
|
678
|
+
background: transparent;
|
|
679
|
+
}
|
|
680
|
+
.row:hover { background: var(--panel-hover); }
|
|
681
|
+
.row.active { background: var(--panel-select); }
|
|
682
|
+
.row .code {
|
|
683
|
+
font-family: var(--ff-mono);
|
|
684
|
+
font-size: 11px;
|
|
685
|
+
color: var(--panel-text-2);
|
|
686
|
+
letter-spacing: 0.04em;
|
|
687
|
+
}
|
|
688
|
+
.row .title { color: var(--panel-text); font-weight: 500; }
|
|
689
|
+
.row .sub { color: var(--panel-text-2); font-size: 12px; margin-left: 8px; font-weight: 400; }
|
|
690
|
+
.row .meta { color: var(--panel-text-2); font-size: 11px; text-align: right; font-family: var(--ff-mono); }
|
|
691
|
+
|
|
692
|
+
/* CLI install block */
|
|
693
|
+
.cli {
|
|
694
|
+
display: flex;
|
|
695
|
+
align-items: stretch;
|
|
696
|
+
background: var(--panel-1);
|
|
697
|
+
border-radius: 8px;
|
|
698
|
+
overflow: hidden;
|
|
699
|
+
font-family: var(--ff-mono);
|
|
700
|
+
font-size: 13px;
|
|
701
|
+
max-width: 640px;
|
|
702
|
+
margin: 12px 0;
|
|
703
|
+
box-shadow: var(--panel-shadow);
|
|
704
|
+
}
|
|
705
|
+
.cli .prompt { padding: 10px 14px; color: var(--panel-accent); font-weight: 600; }
|
|
706
|
+
.cli .cmd { flex: 1; padding: 10px 0; color: var(--panel-text); }
|
|
707
|
+
.cli .copy {
|
|
708
|
+
padding: 0 16px;
|
|
709
|
+
background: var(--panel-2);
|
|
710
|
+
color: var(--panel-text-2);
|
|
711
|
+
cursor: pointer;
|
|
712
|
+
font-size: 11px;
|
|
713
|
+
text-transform: uppercase;
|
|
714
|
+
letter-spacing: 0.08em;
|
|
715
|
+
display: flex;
|
|
716
|
+
align-items: center;
|
|
717
|
+
}
|
|
718
|
+
.cli .copy:hover { background: var(--panel-3); color: var(--panel-text); }
|
|
719
|
+
|
|
720
|
+
/* Buttons */
|
|
721
|
+
.btn {
|
|
722
|
+
display: inline-flex;
|
|
723
|
+
align-items: center;
|
|
724
|
+
gap: 6px;
|
|
725
|
+
padding: 7px 14px;
|
|
726
|
+
background: var(--panel-2);
|
|
727
|
+
color: var(--panel-text);
|
|
728
|
+
font-family: inherit;
|
|
729
|
+
font-size: 13px;
|
|
730
|
+
font-weight: 500;
|
|
731
|
+
border-radius: 6px;
|
|
732
|
+
cursor: pointer;
|
|
733
|
+
text-decoration: none;
|
|
734
|
+
transition: background 80ms ease;
|
|
735
|
+
box-shadow: var(--panel-shadow);
|
|
736
|
+
}
|
|
737
|
+
.btn:hover { background: var(--panel-3); }
|
|
738
|
+
.btn:active { background: var(--panel-hover); }
|
|
739
|
+
|
|
740
|
+
.btn-primary {
|
|
741
|
+
display: inline-flex;
|
|
742
|
+
align-items: center;
|
|
743
|
+
gap: 6px;
|
|
744
|
+
padding: 7px 14px;
|
|
745
|
+
background: var(--panel-accent);
|
|
746
|
+
color: #ffffff;
|
|
747
|
+
font-family: inherit;
|
|
748
|
+
font-size: 13px;
|
|
749
|
+
font-weight: 500;
|
|
750
|
+
border-radius: 6px;
|
|
751
|
+
cursor: pointer;
|
|
752
|
+
text-decoration: none;
|
|
753
|
+
transition: filter 80ms ease;
|
|
754
|
+
box-shadow: var(--panel-shadow);
|
|
755
|
+
}
|
|
756
|
+
.btn-primary:hover { filter: brightness(1.08); }
|
|
757
|
+
.btn-primary:active { filter: brightness(0.94); }
|
|
758
|
+
|
|
759
|
+
.btn-ghost {
|
|
760
|
+
display: inline-flex;
|
|
761
|
+
align-items: center;
|
|
762
|
+
gap: 6px;
|
|
763
|
+
padding: 7px 14px;
|
|
764
|
+
background: transparent;
|
|
765
|
+
color: var(--panel-text-2);
|
|
766
|
+
font-family: inherit;
|
|
767
|
+
font-size: 13px;
|
|
768
|
+
cursor: pointer;
|
|
769
|
+
text-decoration: none;
|
|
770
|
+
border-radius: 6px;
|
|
771
|
+
transition: background 80ms ease;
|
|
772
|
+
}
|
|
773
|
+
.btn-ghost:hover { background: var(--panel-hover); color: var(--panel-text); }
|
|
774
|
+
|
|
775
|
+
/* Tag / chip */
|
|
776
|
+
.chip {
|
|
777
|
+
display: inline-flex;
|
|
778
|
+
align-items: center;
|
|
779
|
+
padding: 2px 8px;
|
|
780
|
+
border-radius: 6px;
|
|
781
|
+
font-family: var(--ff-mono);
|
|
782
|
+
font-size: 11px;
|
|
783
|
+
font-weight: 500;
|
|
784
|
+
background: var(--panel-2);
|
|
785
|
+
color: var(--panel-text);
|
|
786
|
+
}
|
|
787
|
+
.chip.accent { background: var(--panel-accent); color: #ffffff; }
|
|
788
|
+
.chip.dim { color: var(--panel-text-2); background: var(--panel-1); }
|
|
789
|
+
|
|
790
|
+
/* Status bar — accent-colored footer */
|
|
791
|
+
.app-status {
|
|
792
|
+
height: 24px;
|
|
793
|
+
background: var(--panel-accent);
|
|
794
|
+
color: #ffffff;
|
|
795
|
+
display: flex;
|
|
796
|
+
align-items: center;
|
|
797
|
+
padding: 0 14px;
|
|
798
|
+
gap: 14px;
|
|
799
|
+
font-family: var(--ff-mono);
|
|
800
|
+
font-size: 11px;
|
|
801
|
+
flex-shrink: 0;
|
|
802
|
+
}
|
|
803
|
+
.app-status .spread { flex: 1; }
|
|
804
|
+
.app-status .item { display: flex; align-items: center; gap: 4px; }
|
|
805
|
+
.app-status a { color: #ffffff; text-decoration: none; }
|
|
806
|
+
|
|
807
|
+
/* Key-value table */
|
|
808
|
+
.kv {
|
|
809
|
+
width: 100%;
|
|
810
|
+
max-width: 640px;
|
|
811
|
+
background: var(--panel-1);
|
|
812
|
+
border-radius: 8px;
|
|
813
|
+
overflow: hidden;
|
|
814
|
+
border-collapse: collapse;
|
|
815
|
+
box-shadow: var(--panel-shadow);
|
|
816
|
+
margin: 12px 0;
|
|
817
|
+
}
|
|
818
|
+
.kv td { padding: 8px 16px; font-size: 13px; }
|
|
819
|
+
.kv tr:nth-child(even) { background: var(--panel-2); }
|
|
820
|
+
.kv td:first-child {
|
|
821
|
+
color: var(--panel-text-2);
|
|
822
|
+
font-family: var(--ff-mono);
|
|
823
|
+
font-size: 11px;
|
|
824
|
+
text-transform: uppercase;
|
|
825
|
+
letter-spacing: 0.08em;
|
|
826
|
+
width: 160px;
|
|
827
|
+
}
|
|
828
|
+
.kv td:last-child { color: var(--panel-text); }
|
|
829
|
+
|
|
830
|
+
/* Card grid — landing index */
|
|
831
|
+
.cards {
|
|
832
|
+
display: grid;
|
|
833
|
+
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
834
|
+
gap: 8px;
|
|
835
|
+
margin: 12px 0 24px 0;
|
|
836
|
+
}
|
|
837
|
+
.card-item {
|
|
838
|
+
display: grid;
|
|
839
|
+
grid-template-columns: 44px 1fr;
|
|
840
|
+
gap: 10px;
|
|
841
|
+
padding: 14px 16px;
|
|
842
|
+
background: var(--panel-1);
|
|
843
|
+
color: var(--panel-text);
|
|
844
|
+
text-decoration: none;
|
|
845
|
+
align-items: baseline;
|
|
846
|
+
border-radius: 8px;
|
|
847
|
+
box-shadow: var(--panel-shadow);
|
|
848
|
+
transition: background 80ms ease, transform 80ms ease;
|
|
849
|
+
}
|
|
850
|
+
.card-item:hover { background: var(--panel-hover); transform: translateY(-1px); }
|
|
851
|
+
.card-item .code {
|
|
852
|
+
font-family: var(--ff-mono);
|
|
853
|
+
font-size: 11px;
|
|
854
|
+
color: var(--panel-accent);
|
|
855
|
+
letter-spacing: 0.04em;
|
|
856
|
+
font-weight: 600;
|
|
857
|
+
}
|
|
858
|
+
.card-item .name {
|
|
859
|
+
font-size: 13px;
|
|
860
|
+
font-weight: 500;
|
|
861
|
+
color: var(--panel-text);
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
/* Scrollbars */
|
|
865
|
+
::-webkit-scrollbar { width: 10px; height: 10px; }
|
|
866
|
+
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 5px; }
|
|
867
|
+
::-webkit-scrollbar-thumb:hover { background: var(--panel-hover); }
|
|
868
|
+
::-webkit-scrollbar-track { background: transparent; }
|
|
869
|
+
|
|
870
|
+
|
|
871
|
+
body { display: flex; flex-direction: column; min-height: 100vh; }
|
|
872
|
+
.app-main { max-width: 1100px; margin: 0 auto; width: 100%; padding: 24px 32px 64px 32px; }
|
|
873
|
+
.gm-hero { padding: 32px 0 24px 0; }
|
|
874
|
+
.gm-hero h1 { font-size: 36px; font-weight: 600; margin: 0 0 6px 0; color: var(--panel-text); letter-spacing: -0.01em; line-height: 1.15; }
|
|
875
|
+
.gm-hero .lede { font-size: 14px; line-height: 1.55; color: var(--panel-text-2); max-width: 64ch; margin: 0 0 20px 0; }
|
|
876
|
+
.gm-hero .actions { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
877
|
+
.gm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--panel-accent); color: var(--panel-1); border-radius: 6px; font-size: 13px; font-weight: 500; text-decoration: none; }
|
|
878
|
+
.gm-btn:hover { background: var(--panel-accent-2); text-decoration: none; }
|
|
879
|
+
.gm-btn.ghost { background: transparent; color: var(--panel-text); box-shadow: inset 0 0 0 1px var(--panel-3); }
|
|
880
|
+
.gm-btn.ghost:hover { background: var(--panel-hover); }
|
|
881
|
+
.gm-section-label { font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--panel-text-2); margin: 32px 0 8px 0; }
|
|
882
|
+
.gm-section-label .slash { color: var(--panel-text-3); margin-right: 6px; }
|
|
883
|
+
.panel-row-link { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; padding: 8px 16px; align-items: baseline; color: var(--panel-text); text-decoration: none; font-size: 13px; }
|
|
884
|
+
.panel-row-link:hover { background: var(--panel-hover); text-decoration: none; }
|
|
885
|
+
.panel-row-link .code { font-family: var(--ff-mono); font-size: 11px; color: var(--panel-text-2); letter-spacing: 0.04em; }
|
|
886
|
+
.panel-row-link .title { color: var(--panel-text); font-weight: 500; }
|
|
887
|
+
.panel-row-link .sub { color: var(--panel-text-2); font-size: 12px; margin-left: 8px; font-weight: 400; }
|
|
888
|
+
.panel-row-link .meta { color: var(--panel-text-2); font-size: 11px; text-align: right; font-family: var(--ff-mono); }
|
|
889
|
+
.gm-install { background: var(--panel-1); border-radius: 8px; margin: 12px 0; box-shadow: var(--panel-shadow); overflow: hidden; }
|
|
890
|
+
.gm-install .head { padding: 10px 16px; background: var(--panel-2); font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--panel-text-2); display: flex; justify-content: space-between; }
|
|
891
|
+
.gm-install-step { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 10px 16px; font-family: var(--ff-mono); font-size: 13px; color: var(--panel-text); }
|
|
892
|
+
.gm-install-step:not(:last-child) { box-shadow: inset 0 -1px 0 rgba(0,0,0,0.04); }
|
|
893
|
+
.gm-install-step .n { font-size: 11px; color: var(--panel-text-2); padding-top: 1px; }
|
|
894
|
+
.gm-install-step .d { color: var(--panel-text); font-family: 'Inter','Segoe UI',sans-serif; }
|
|
895
|
+
.gm-install-step pre { margin: 6px 0 0 0; padding: 6px 10px; background: var(--panel-2); border-radius: 4px; font-size: 12px; overflow-x: auto; }
|
|
896
|
+
.gm-install-step pre code { color: var(--panel-accent); font-family: var(--ff-mono); }
|
|
897
|
+
.gm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
898
|
+
@media (max-width: 720px) { .gm-cards { grid-template-columns: 1fr; } }
|
|
899
|
+
.gm-card { background: var(--panel-1); border-radius: 6px; padding: 14px 16px; box-shadow: var(--panel-shadow); }
|
|
900
|
+
.gm-card .t { font-weight: 600; font-size: 13px; color: var(--panel-text); margin-bottom: 4px; }
|
|
901
|
+
.gm-card .d { font-size: 12px; color: var(--panel-text-2); line-height: 1.55; }
|
|
902
|
+
.gm-footer { padding: 12px 20px; font-family: var(--ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--panel-text-3); display: flex; justify-content: space-between; background: var(--panel-1); box-shadow: inset 0 1px 0 rgba(0,0,0,0.04); flex-wrap: wrap; gap: 12px; }
|
|
903
|
+
.gm-footer a { color: var(--panel-text-2); }
|
|
904
|
+
.gm-footer a:hover { color: var(--panel-text); }
|
|
95
905
|
</style>
|
|
96
906
|
</head>
|
|
97
|
-
<body>
|
|
98
|
-
<header class="app-
|
|
99
|
-
<span class="brand">247420<span class="slash"
|
|
907
|
+
<body data-screen-label="gm / copilot cli">
|
|
908
|
+
<header class="app-topbar">
|
|
909
|
+
<span class="brand">247420<span class="slash"> / </span>gm<span class="slash"> / </span>copilot cli</span>
|
|
100
910
|
<nav>
|
|
101
|
-
<a href="https://anentrypoint.github.io/gm">← all platforms</a>
|
|
102
|
-
<a href="https://github.com/AnEntrypoint/gm-copilot-cli">source ↗</a>
|
|
911
|
+
<a href="https://anentrypoint.github.io/gm/">← all platforms</a>
|
|
912
|
+
<a href="https://github.com/AnEntrypoint/gm-copilot-cli" target="_blank" rel="noopener">source ↗</a>
|
|
103
913
|
</nav>
|
|
104
914
|
</header>
|
|
105
|
-
<div class="
|
|
106
|
-
<span class="
|
|
107
|
-
<span class="
|
|
108
|
-
<span class="
|
|
109
|
-
<span class="t-micro">2026-04-21</span>
|
|
110
|
-
<span class="t-micro">probably emerging 🌀</span>
|
|
915
|
+
<div class="app-crumb">
|
|
916
|
+
<span>247420</span><span class="sep">›</span>
|
|
917
|
+
<span>gm</span><span class="sep">›</span>
|
|
918
|
+
<span class="leaf">copilot cli</span>
|
|
111
919
|
</div>
|
|
112
|
-
<main class="
|
|
113
|
-
<section class="hero">
|
|
114
|
-
<
|
|
115
|
-
<
|
|
116
|
-
<
|
|
117
|
-
|
|
118
|
-
<a class="btn
|
|
920
|
+
<main class="app-main">
|
|
921
|
+
<section class="gm-hero">
|
|
922
|
+
<h1>gm · copilot cli</h1>
|
|
923
|
+
<p class="lede">State machine agent with hooks, skills, and automated git enforcement</p>
|
|
924
|
+
<div class="actions">
|
|
925
|
+
<a class="gm-btn" href="https://github.com/AnEntrypoint/gm-copilot-cli" target="_blank" rel="noopener">view on github</a>
|
|
926
|
+
<a class="gm-btn ghost" href="#install">install ↓</a>
|
|
119
927
|
</div>
|
|
120
928
|
</section>
|
|
121
|
-
<section
|
|
122
|
-
<div class="section-
|
|
123
|
-
<div class="
|
|
124
|
-
<div class="
|
|
929
|
+
<section>
|
|
930
|
+
<div class="gm-section-label"><span class="slash">//</span>status</div>
|
|
931
|
+
<div class="panel">
|
|
932
|
+
<div class="panel-head"><span>release · v2.0.541</span><span>probably emerging</span></div>
|
|
933
|
+
<div class="panel-body">
|
|
934
|
+
<div class="row">
|
|
935
|
+
<span class="code"><span style="color:var(--panel-accent)">●</span></span>
|
|
936
|
+
<span class="title">Copilot CLI<span class="sub">part of the gm family</span></span>
|
|
937
|
+
<span class="meta">live</span>
|
|
938
|
+
</div>
|
|
939
|
+
</div>
|
|
940
|
+
</div>
|
|
125
941
|
</section>
|
|
126
|
-
<section
|
|
127
|
-
<div class="section-
|
|
128
|
-
<
|
|
129
|
-
<
|
|
130
|
-
<
|
|
131
|
-
<
|
|
132
|
-
|
|
133
|
-
<li class="feat-row"><span class="t-label feat-tag">auto-recovery</span><span class="t-body feat-desc">supervisor hierarchy ensures the system never crashes</span></li></ul>
|
|
942
|
+
<section id="install">
|
|
943
|
+
<div class="gm-section-label"><span class="slash">//</span>install</div>
|
|
944
|
+
<div class="gm-install">
|
|
945
|
+
<div class="head"><span>install · 2 steps</span><span>shell</span></div>
|
|
946
|
+
<div class="gm-install-step"><span class="n">01</span><div><div class="d">install via GitHub CLI</div><pre><code>gh extension install AnEntrypoint/gm-copilot-cli</code></pre></div></div>
|
|
947
|
+
<div class="gm-install-step"><span class="n">02</span><div><div class="d">restart your terminal</div></div></div>
|
|
948
|
+
</div>
|
|
134
949
|
</section>
|
|
135
|
-
<section
|
|
136
|
-
<div class="section-
|
|
137
|
-
<
|
|
138
|
-
|
|
139
|
-
<
|
|
140
|
-
<
|
|
141
|
-
<
|
|
142
|
-
<
|
|
950
|
+
<section>
|
|
951
|
+
<div class="gm-section-label"><span class="slash">//</span>features</div>
|
|
952
|
+
<div class="gm-cards">
|
|
953
|
+
<div class="gm-card"><div class="t">state machine</div><div class="d">immutable PLAN→EXECUTE→EMIT→VERIFY→COMPLETE phases with full mutable tracking</div></div>
|
|
954
|
+
<div class="gm-card"><div class="t">semantic search</div><div class="d">natural language codebase exploration via codesearch skill</div></div>
|
|
955
|
+
<div class="gm-card"><div class="t">hooks</div><div class="d">pre-tool, session-start, prompt-submit, and stop hooks for full lifecycle control</div></div>
|
|
956
|
+
<div class="gm-card"><div class="t">agents</div><div class="d">gm, codesearch, and websearch agents pre-configured</div></div>
|
|
957
|
+
<div class="gm-card"><div class="t">mcp integration</div><div class="d">model context protocol server support built in</div></div>
|
|
958
|
+
<div class="gm-card"><div class="t">auto-recovery</div><div class="d">supervisor hierarchy ensures the system never crashes</div></div>
|
|
959
|
+
</div>
|
|
143
960
|
</section>
|
|
144
|
-
<section
|
|
145
|
-
<div class="section-
|
|
146
|
-
<div class="
|
|
147
|
-
<div class="
|
|
148
|
-
|
|
149
|
-
<div class="
|
|
150
|
-
<
|
|
151
|
-
<
|
|
152
|
-
<
|
|
153
|
-
<
|
|
154
|
-
<a class="idx-row idx-active" href="#"><span class="idx-mark">◆</span><span class="idx-label">copilot cli</span><span class="idx-tag t-meta">gm-copilot-cli</span></a>
|
|
155
|
-
<a class="idx-row" href="https://anentrypoint.github.io/gm-qwen"><span class="idx-mark">›</span><span class="idx-label">qwen code</span><span class="idx-tag t-meta">gm-qwen</span></a>
|
|
156
|
-
<a class="idx-row" href="https://anentrypoint.github.io/gm-hermes"><span class="idx-mark">›</span><span class="idx-label">hermes agent</span><span class="idx-tag t-meta">gm-hermes</span></a></div>
|
|
961
|
+
<section>
|
|
962
|
+
<div class="gm-section-label"><span class="slash">//</span>state machine</div>
|
|
963
|
+
<div class="panel">
|
|
964
|
+
<div class="panel-head"><span>5 phases · any new unknown → plan</span><span>strict order</span></div>
|
|
965
|
+
<div class="panel-body">
|
|
966
|
+
<div class="row"><span class="code">001</span><span class="title">plan<span class="sub">write the unknowns down</span></span><span class="meta">.gm/prd.yml</span></div>
|
|
967
|
+
<div class="row"><span class="code">002</span><span class="title">execute<span class="sub">run code against real services</span></span><span class="meta">exec:<lang></span></div>
|
|
968
|
+
<div class="row"><span class="code">003</span><span class="title">emit<span class="sub">write files after checks pass</span></span><span class="meta">pre + post gates</span></div>
|
|
969
|
+
<div class="row"><span class="code">004</span><span class="title">verify<span class="sub">end-to-end, real data</span></span><span class="meta">no mocks</span></div>
|
|
970
|
+
<div class="row"><span class="code">005</span><span class="title">complete<span class="sub">.prd empty, git clean, pushed</span></span><span class="meta">test.js</span></div>
|
|
157
971
|
</div>
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
<
|
|
162
|
-
<
|
|
163
|
-
<
|
|
972
|
+
</div>
|
|
973
|
+
</section>
|
|
974
|
+
<section>
|
|
975
|
+
<div class="gm-section-label"><span class="slash">//</span>also available</div>
|
|
976
|
+
<div class="panel">
|
|
977
|
+
<div class="panel-head"><span>platforms · 12</span><span>one state machine</span></div>
|
|
978
|
+
<div class="panel-body">
|
|
979
|
+
<a class="panel-row-link" href="https://anentrypoint.github.io/gm-cc" target="_blank" rel="noopener"><span class="code">001</span><span class="title">claude code<span class="sub">gm-cc</span></span><span class="meta">cli · live</span></a>
|
|
980
|
+
<a class="panel-row-link" href="https://anentrypoint.github.io/gm-gc" target="_blank" rel="noopener"><span class="code">002</span><span class="title">gemini cli<span class="sub">gm-gc</span></span><span class="meta">cli · live</span></a>
|
|
981
|
+
<a class="panel-row-link" href="https://anentrypoint.github.io/gm-oc" target="_blank" rel="noopener"><span class="code">003</span><span class="title">opencode<span class="sub">gm-oc</span></span><span class="meta">cli · live</span></a>
|
|
982
|
+
<a class="panel-row-link" href="https://anentrypoint.github.io/gm-kilo" target="_blank" rel="noopener"><span class="code">004</span><span class="title">kilo code<span class="sub">gm-kilo</span></span><span class="meta">cli · live</span></a>
|
|
983
|
+
<a class="panel-row-link" href="https://anentrypoint.github.io/gm-codex" target="_blank" rel="noopener"><span class="code">005</span><span class="title">codex<span class="sub">gm-codex</span></span><span class="meta">cli · live</span></a>
|
|
984
|
+
<a class="panel-row-link" href="#"><span class="code">006</span><span class="title">copilot cli<span class="sub">gm-copilot-cli</span></span><span class="meta">cli · here</span></a>
|
|
985
|
+
<a class="panel-row-link" href="https://anentrypoint.github.io/gm-vscode" target="_blank" rel="noopener"><span class="code">007</span><span class="title">vs code<span class="sub">gm-vscode</span></span><span class="meta">ide · live</span></a>
|
|
986
|
+
<a class="panel-row-link" href="https://anentrypoint.github.io/gm-cursor" target="_blank" rel="noopener"><span class="code">008</span><span class="title">cursor<span class="sub">gm-cursor</span></span><span class="meta">ide · live</span></a>
|
|
987
|
+
<a class="panel-row-link" href="https://anentrypoint.github.io/gm-zed" target="_blank" rel="noopener"><span class="code">009</span><span class="title">zed<span class="sub">gm-zed</span></span><span class="meta">ide · live</span></a>
|
|
988
|
+
<a class="panel-row-link" href="https://anentrypoint.github.io/gm-jetbrains" target="_blank" rel="noopener"><span class="code">010</span><span class="title">jetbrains<span class="sub">gm-jetbrains</span></span><span class="meta">ide · live</span></a>
|
|
989
|
+
<a class="panel-row-link" href="https://anentrypoint.github.io/gm-qwen" target="_blank" rel="noopener"><span class="code">011</span><span class="title">qwen code<span class="sub">gm-qwen</span></span><span class="meta">cli · live</span></a>
|
|
990
|
+
<a class="panel-row-link" href="https://anentrypoint.github.io/gm-hermes" target="_blank" rel="noopener"><span class="code">012</span><span class="title">hermes agent<span class="sub">gm-hermes</span></span><span class="meta">cli · live</span></a>
|
|
164
991
|
</div>
|
|
165
992
|
</div>
|
|
166
993
|
</section>
|
|
167
994
|
</main>
|
|
168
|
-
<footer class="
|
|
169
|
-
<
|
|
170
|
-
<
|
|
171
|
-
<span class="t-micro">generated by gm — convention-driven multi-platform plugin generator</span>
|
|
172
|
-
<span class="t-micro">probably emerging 🌀</span>
|
|
173
|
-
</div>
|
|
995
|
+
<footer class="gm-footer">
|
|
996
|
+
<span>copilot cli · part of <a href="https://anentrypoint.github.io/gm/">gm</a> · <a href="https://github.com/AnEntrypoint" target="_blank" rel="noopener">anentrypoint</a></span>
|
|
997
|
+
<span>probably emerging 🌀</span>
|
|
174
998
|
</footer>
|
|
175
999
|
</body></html>
|
package/manifest.yml
CHANGED
package/package.json
CHANGED