devforgeai 1.0.7 → 1.0.9
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/docs/CNAME +1 -0
- package/docs/NPM-Publish.md +341 -0
- package/docs/api/API.md +1054 -0
- package/docs/architecture/ARCHITECTURE.md +724 -0
- package/docs/guides/DEVELOPER-GUIDE.md +398 -0
- package/docs/guides/ROADMAP.md +48 -0
- package/docs/guides/TROUBLESHOOTING.md +631 -0
- package/docs/index.html +2045 -0
- package/package.json +2 -2
- package/src/cli/commands/install.js +7 -2
- package/src/cli/lib/components.js +5 -9
- package/src/cli/lib/ide/claude-code.js +24 -9
- package/src/cli/lib/settings-merger.js +160 -0
- package/devforgeai/specs/context/.gitkeep +0 -0
- package/devforgeai/specs/context/anti-patterns.md +0 -285
- package/devforgeai/specs/context/architecture-constraints.md +0 -323
- package/devforgeai/specs/context/coding-standards.md +0 -472
- package/devforgeai/specs/context/dependencies.md +0 -208
- package/devforgeai/specs/context/source-tree.md +0 -1217
- package/devforgeai/specs/context/tech-stack.md +0 -560
package/docs/index.html
ADDED
|
@@ -0,0 +1,2045 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>DevForgeAI - Interactive Demo</title>
|
|
7
|
+
<style>
|
|
8
|
+
/* ============================================================
|
|
9
|
+
CSS CUSTOM PROPERTIES
|
|
10
|
+
============================================================ */
|
|
11
|
+
:root {
|
|
12
|
+
--bg-primary: #0d1117;
|
|
13
|
+
--bg-secondary: #161b22;
|
|
14
|
+
--bg-tertiary: #1c2128;
|
|
15
|
+
--bg-surface: #21262d;
|
|
16
|
+
--bg-hover: #292e36;
|
|
17
|
+
|
|
18
|
+
--text-primary: #e6edf3;
|
|
19
|
+
--text-secondary: #8b949e;
|
|
20
|
+
--text-muted: #484f58;
|
|
21
|
+
--text-link: #58a6ff;
|
|
22
|
+
|
|
23
|
+
--accent-green: #3fb950;
|
|
24
|
+
--accent-cyan: #58a6ff;
|
|
25
|
+
--accent-orange: #d29922;
|
|
26
|
+
--accent-red: #f85149;
|
|
27
|
+
--accent-purple: #bc8cff;
|
|
28
|
+
--accent-teal: #39d2c0;
|
|
29
|
+
|
|
30
|
+
--font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
|
31
|
+
--font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;
|
|
32
|
+
|
|
33
|
+
--sidebar-width: 220px;
|
|
34
|
+
--border-color: #30363d;
|
|
35
|
+
--border: 1px solid var(--border-color);
|
|
36
|
+
--radius-sm: 6px;
|
|
37
|
+
--radius-md: 10px;
|
|
38
|
+
--radius-lg: 16px;
|
|
39
|
+
|
|
40
|
+
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* ============================================================
|
|
44
|
+
RESET & BASE
|
|
45
|
+
============================================================ */
|
|
46
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
47
|
+
|
|
48
|
+
html { scroll-behavior: smooth; font-size: 16px; }
|
|
49
|
+
|
|
50
|
+
body {
|
|
51
|
+
font-family: var(--font-ui);
|
|
52
|
+
background: var(--bg-primary);
|
|
53
|
+
color: var(--text-primary);
|
|
54
|
+
line-height: 1.6;
|
|
55
|
+
overflow-x: hidden;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
a { color: var(--text-link); text-decoration: none; }
|
|
59
|
+
a:hover { text-decoration: underline; }
|
|
60
|
+
h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; }
|
|
61
|
+
h2 { font-size: 1.75rem; margin-bottom: 0.75rem; }
|
|
62
|
+
|
|
63
|
+
code {
|
|
64
|
+
font-family: var(--font-mono);
|
|
65
|
+
background: var(--bg-surface);
|
|
66
|
+
padding: 2px 6px;
|
|
67
|
+
border-radius: 4px;
|
|
68
|
+
font-size: 0.9em;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* ============================================================
|
|
72
|
+
SIDEBAR NAVIGATION
|
|
73
|
+
============================================================ */
|
|
74
|
+
#sidebar {
|
|
75
|
+
position: fixed;
|
|
76
|
+
top: 0; left: 0;
|
|
77
|
+
width: var(--sidebar-width);
|
|
78
|
+
height: 100vh;
|
|
79
|
+
background: var(--bg-secondary);
|
|
80
|
+
border-right: var(--border);
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
z-index: 100;
|
|
84
|
+
transition: transform 0.3s ease;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.sidebar-logo {
|
|
88
|
+
padding: 20px 16px;
|
|
89
|
+
font-size: 1.1rem;
|
|
90
|
+
font-weight: 700;
|
|
91
|
+
color: var(--text-primary);
|
|
92
|
+
border-bottom: var(--border);
|
|
93
|
+
font-family: var(--font-mono);
|
|
94
|
+
}
|
|
95
|
+
.sidebar-logo span { color: var(--accent-green); }
|
|
96
|
+
|
|
97
|
+
.nav-links {
|
|
98
|
+
list-style: none;
|
|
99
|
+
flex: 1;
|
|
100
|
+
padding: 12px 0;
|
|
101
|
+
overflow-y: auto;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.nav-links a {
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
gap: 10px;
|
|
108
|
+
padding: 8px 16px;
|
|
109
|
+
color: var(--text-secondary);
|
|
110
|
+
font-size: 0.85rem;
|
|
111
|
+
transition: all 0.2s;
|
|
112
|
+
border-left: 3px solid transparent;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.nav-links a:hover {
|
|
116
|
+
color: var(--text-primary);
|
|
117
|
+
background: var(--bg-hover);
|
|
118
|
+
text-decoration: none;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.nav-links a.active {
|
|
122
|
+
color: var(--accent-green);
|
|
123
|
+
border-left-color: var(--accent-green);
|
|
124
|
+
background: rgba(63, 185, 80, 0.08);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.nav-dot {
|
|
128
|
+
width: 8px; height: 8px;
|
|
129
|
+
border-radius: 50%;
|
|
130
|
+
border: 1.5px solid var(--text-muted);
|
|
131
|
+
flex-shrink: 0;
|
|
132
|
+
transition: all 0.3s;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.nav-links a.active .nav-dot,
|
|
136
|
+
.nav-links li.visited .nav-dot {
|
|
137
|
+
background: var(--accent-green);
|
|
138
|
+
border-color: var(--accent-green);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.sidebar-footer {
|
|
142
|
+
padding: 12px 16px;
|
|
143
|
+
border-top: var(--border);
|
|
144
|
+
font-size: 0.8rem;
|
|
145
|
+
}
|
|
146
|
+
.sidebar-footer a { color: var(--text-secondary); }
|
|
147
|
+
|
|
148
|
+
.hamburger {
|
|
149
|
+
display: none;
|
|
150
|
+
position: fixed;
|
|
151
|
+
top: 12px; left: 12px;
|
|
152
|
+
z-index: 200;
|
|
153
|
+
background: var(--bg-secondary);
|
|
154
|
+
border: var(--border);
|
|
155
|
+
border-radius: var(--radius-sm);
|
|
156
|
+
color: var(--text-primary);
|
|
157
|
+
padding: 8px 10px;
|
|
158
|
+
cursor: pointer;
|
|
159
|
+
font-size: 1.2rem;
|
|
160
|
+
line-height: 1;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* ============================================================
|
|
164
|
+
MAIN CONTENT
|
|
165
|
+
============================================================ */
|
|
166
|
+
#content {
|
|
167
|
+
margin-left: var(--sidebar-width);
|
|
168
|
+
min-height: 100vh;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.section {
|
|
172
|
+
min-height: 100vh;
|
|
173
|
+
padding: 80px 48px;
|
|
174
|
+
display: flex;
|
|
175
|
+
flex-direction: column;
|
|
176
|
+
justify-content: center;
|
|
177
|
+
position: relative;
|
|
178
|
+
opacity: 0;
|
|
179
|
+
transform: translateY(24px);
|
|
180
|
+
transition: opacity 0.6s ease, transform 0.6s ease;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.section.revealed { opacity: 1; transform: translateY(0); }
|
|
184
|
+
|
|
185
|
+
.section-intro {
|
|
186
|
+
color: var(--text-secondary);
|
|
187
|
+
max-width: 700px;
|
|
188
|
+
margin-bottom: 32px;
|
|
189
|
+
font-size: 1.05rem;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.section-divider {
|
|
193
|
+
text-align: center;
|
|
194
|
+
color: var(--text-muted);
|
|
195
|
+
font-family: var(--font-mono);
|
|
196
|
+
font-size: 0.85rem;
|
|
197
|
+
letter-spacing: 6px;
|
|
198
|
+
padding: 20px 0;
|
|
199
|
+
user-select: none;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* ============================================================
|
|
203
|
+
HERO SECTION
|
|
204
|
+
============================================================ */
|
|
205
|
+
#hero {
|
|
206
|
+
text-align: center;
|
|
207
|
+
background:
|
|
208
|
+
radial-gradient(circle at 20% 50%, rgba(63,185,80,0.06) 0%, transparent 50%),
|
|
209
|
+
radial-gradient(circle at 80% 50%, rgba(88,166,255,0.06) 0%, transparent 50%),
|
|
210
|
+
var(--bg-primary);
|
|
211
|
+
justify-content: center;
|
|
212
|
+
align-items: center;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.hero-title {
|
|
216
|
+
font-size: 4rem;
|
|
217
|
+
font-weight: 800;
|
|
218
|
+
letter-spacing: -1px;
|
|
219
|
+
margin-bottom: 12px;
|
|
220
|
+
}
|
|
221
|
+
.hero-title .accent { color: var(--accent-green); }
|
|
222
|
+
|
|
223
|
+
.hero-tagline {
|
|
224
|
+
font-size: 1.3rem;
|
|
225
|
+
color: var(--text-secondary);
|
|
226
|
+
max-width: 600px;
|
|
227
|
+
margin: 0 auto 12px;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.hero-sub {
|
|
231
|
+
font-size: 0.95rem;
|
|
232
|
+
color: var(--text-muted);
|
|
233
|
+
max-width: 550px;
|
|
234
|
+
margin: 0 auto 40px;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.hero-stats {
|
|
238
|
+
display: grid;
|
|
239
|
+
grid-template-columns: repeat(3, 1fr);
|
|
240
|
+
gap: 16px;
|
|
241
|
+
max-width: 600px;
|
|
242
|
+
margin: 0 auto 40px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.stat-card {
|
|
246
|
+
background: var(--bg-secondary);
|
|
247
|
+
border: var(--border);
|
|
248
|
+
border-radius: var(--radius-md);
|
|
249
|
+
padding: 20px 12px;
|
|
250
|
+
text-align: center;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.stat-number {
|
|
254
|
+
font-size: 2rem;
|
|
255
|
+
font-weight: 700;
|
|
256
|
+
color: var(--accent-green);
|
|
257
|
+
font-family: var(--font-mono);
|
|
258
|
+
display: block;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.stat-label {
|
|
262
|
+
font-size: 0.8rem;
|
|
263
|
+
color: var(--text-secondary);
|
|
264
|
+
margin-top: 4px;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.cta-group {
|
|
268
|
+
display: flex;
|
|
269
|
+
gap: 12px;
|
|
270
|
+
justify-content: center;
|
|
271
|
+
flex-wrap: wrap;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.cta-button {
|
|
275
|
+
display: inline-flex;
|
|
276
|
+
align-items: center;
|
|
277
|
+
gap: 8px;
|
|
278
|
+
padding: 12px 28px;
|
|
279
|
+
border-radius: var(--radius-sm);
|
|
280
|
+
font-size: 0.95rem;
|
|
281
|
+
font-weight: 600;
|
|
282
|
+
cursor: pointer;
|
|
283
|
+
border: none;
|
|
284
|
+
transition: all 0.2s;
|
|
285
|
+
text-decoration: none;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.cta-button.primary {
|
|
289
|
+
background: var(--accent-green);
|
|
290
|
+
color: #0d1117;
|
|
291
|
+
}
|
|
292
|
+
.cta-button.primary:hover { background: #4ac45a; text-decoration: none; }
|
|
293
|
+
|
|
294
|
+
.cta-button.secondary {
|
|
295
|
+
background: transparent;
|
|
296
|
+
color: var(--text-secondary);
|
|
297
|
+
border: var(--border);
|
|
298
|
+
}
|
|
299
|
+
.cta-button.secondary:hover { color: var(--text-primary); border-color: var(--text-secondary); text-decoration: none; }
|
|
300
|
+
|
|
301
|
+
/* ============================================================
|
|
302
|
+
TERMINAL COMPONENT
|
|
303
|
+
============================================================ */
|
|
304
|
+
.terminal {
|
|
305
|
+
background: var(--bg-tertiary);
|
|
306
|
+
border: var(--border);
|
|
307
|
+
border-radius: var(--radius-md);
|
|
308
|
+
overflow: hidden;
|
|
309
|
+
font-family: var(--font-mono);
|
|
310
|
+
font-size: 0.85rem;
|
|
311
|
+
line-height: 1.7;
|
|
312
|
+
text-align: left;
|
|
313
|
+
box-shadow: var(--shadow-md);
|
|
314
|
+
max-width: 780px;
|
|
315
|
+
width: 100%;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.terminal-header {
|
|
319
|
+
background: var(--bg-surface);
|
|
320
|
+
padding: 10px 14px;
|
|
321
|
+
display: flex;
|
|
322
|
+
align-items: center;
|
|
323
|
+
gap: 7px;
|
|
324
|
+
border-bottom: var(--border);
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.terminal-dot { width: 12px; height: 12px; border-radius: 50%; }
|
|
328
|
+
.terminal-dot.r { background: #f85149; }
|
|
329
|
+
.terminal-dot.y { background: #d29922; }
|
|
330
|
+
.terminal-dot.g { background: #3fb950; }
|
|
331
|
+
|
|
332
|
+
.terminal-title {
|
|
333
|
+
margin-left: 8px;
|
|
334
|
+
font-size: 0.75rem;
|
|
335
|
+
color: var(--text-muted);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.terminal-body {
|
|
339
|
+
padding: 16px;
|
|
340
|
+
max-height: 420px;
|
|
341
|
+
overflow-y: auto;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.terminal-body::-webkit-scrollbar { width: 6px; }
|
|
345
|
+
.terminal-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
|
|
346
|
+
|
|
347
|
+
.t-line { min-height: 1.7em; white-space: pre-wrap; word-break: break-all; }
|
|
348
|
+
.t-prompt { color: var(--accent-green); }
|
|
349
|
+
.t-cmd { color: var(--text-primary); font-weight: 600; }
|
|
350
|
+
.t-out { color: var(--text-secondary); }
|
|
351
|
+
.t-success { color: var(--accent-green); }
|
|
352
|
+
.t-warn { color: var(--accent-orange); }
|
|
353
|
+
.t-err { color: var(--accent-red); }
|
|
354
|
+
.t-info { color: var(--accent-cyan); }
|
|
355
|
+
.t-dim { color: var(--text-muted); }
|
|
356
|
+
.t-blank { height: 0.85em; }
|
|
357
|
+
|
|
358
|
+
.cursor {
|
|
359
|
+
display: inline-block;
|
|
360
|
+
width: 8px; height: 1.1em;
|
|
361
|
+
background: var(--accent-green);
|
|
362
|
+
vertical-align: text-bottom;
|
|
363
|
+
animation: blink 1s step-end infinite;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
@keyframes blink { 50% { opacity: 0; } }
|
|
367
|
+
|
|
368
|
+
/* ============================================================
|
|
369
|
+
QUICK START
|
|
370
|
+
============================================================ */
|
|
371
|
+
#quick-start { align-items: center; }
|
|
372
|
+
|
|
373
|
+
.install-tabs {
|
|
374
|
+
display: flex;
|
|
375
|
+
gap: 0;
|
|
376
|
+
margin-top: 24px;
|
|
377
|
+
max-width: 780px;
|
|
378
|
+
width: 100%;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.install-tab {
|
|
382
|
+
padding: 8px 20px;
|
|
383
|
+
background: var(--bg-surface);
|
|
384
|
+
color: var(--text-secondary);
|
|
385
|
+
border: var(--border);
|
|
386
|
+
cursor: pointer;
|
|
387
|
+
font-size: 0.85rem;
|
|
388
|
+
font-family: var(--font-mono);
|
|
389
|
+
transition: all 0.2s;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.install-tab:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
|
|
393
|
+
.install-tab:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
|
|
394
|
+
.install-tab + .install-tab { border-left: none; }
|
|
395
|
+
|
|
396
|
+
.install-tab.active {
|
|
397
|
+
background: var(--accent-green);
|
|
398
|
+
color: #0d1117;
|
|
399
|
+
border-color: var(--accent-green);
|
|
400
|
+
font-weight: 600;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.install-content {
|
|
404
|
+
max-width: 780px;
|
|
405
|
+
width: 100%;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.install-panel {
|
|
409
|
+
display: none;
|
|
410
|
+
background: var(--bg-tertiary);
|
|
411
|
+
border: var(--border);
|
|
412
|
+
border-top: none;
|
|
413
|
+
border-radius: 0 0 var(--radius-md) var(--radius-md);
|
|
414
|
+
padding: 20px;
|
|
415
|
+
font-family: var(--font-mono);
|
|
416
|
+
font-size: 0.85rem;
|
|
417
|
+
color: var(--text-secondary);
|
|
418
|
+
line-height: 1.8;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.install-panel.active { display: block; }
|
|
422
|
+
|
|
423
|
+
.prereqs {
|
|
424
|
+
margin-top: 24px;
|
|
425
|
+
display: flex;
|
|
426
|
+
gap: 16px;
|
|
427
|
+
flex-wrap: wrap;
|
|
428
|
+
justify-content: center;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.prereq-badge {
|
|
432
|
+
background: var(--bg-secondary);
|
|
433
|
+
border: var(--border);
|
|
434
|
+
border-radius: 20px;
|
|
435
|
+
padding: 6px 14px;
|
|
436
|
+
font-size: 0.8rem;
|
|
437
|
+
color: var(--text-secondary);
|
|
438
|
+
font-family: var(--font-mono);
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
/* ============================================================
|
|
442
|
+
PIPELINE
|
|
443
|
+
============================================================ */
|
|
444
|
+
#pipeline { align-items: center; }
|
|
445
|
+
.pipeline-container { width: 100%; max-width: 900px; }
|
|
446
|
+
|
|
447
|
+
.pipeline-diagram {
|
|
448
|
+
display: flex;
|
|
449
|
+
align-items: center;
|
|
450
|
+
justify-content: center;
|
|
451
|
+
gap: 0;
|
|
452
|
+
flex-wrap: wrap;
|
|
453
|
+
margin-bottom: 32px;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.pipeline-node {
|
|
457
|
+
display: flex;
|
|
458
|
+
flex-direction: column;
|
|
459
|
+
align-items: center;
|
|
460
|
+
cursor: pointer;
|
|
461
|
+
transition: all 0.2s;
|
|
462
|
+
padding: 8px;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.pipeline-circle {
|
|
466
|
+
width: 56px; height: 56px;
|
|
467
|
+
border-radius: 50%;
|
|
468
|
+
border: 2px solid var(--border-color);
|
|
469
|
+
display: flex;
|
|
470
|
+
align-items: center;
|
|
471
|
+
justify-content: center;
|
|
472
|
+
font-size: 0.7rem;
|
|
473
|
+
font-family: var(--font-mono);
|
|
474
|
+
font-weight: 700;
|
|
475
|
+
color: var(--text-secondary);
|
|
476
|
+
background: var(--bg-secondary);
|
|
477
|
+
transition: all 0.3s;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.pipeline-node:hover .pipeline-circle {
|
|
481
|
+
border-color: var(--accent-cyan);
|
|
482
|
+
color: var(--accent-cyan);
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
.pipeline-node.active .pipeline-circle {
|
|
486
|
+
border-color: var(--accent-green);
|
|
487
|
+
color: #0d1117;
|
|
488
|
+
background: var(--accent-green);
|
|
489
|
+
box-shadow: 0 0 20px rgba(63,185,80,0.4);
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.pipeline-label {
|
|
493
|
+
margin-top: 6px;
|
|
494
|
+
font-size: 0.7rem;
|
|
495
|
+
color: var(--text-muted);
|
|
496
|
+
text-align: center;
|
|
497
|
+
max-width: 70px;
|
|
498
|
+
transition: color 0.2s;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.pipeline-node.active .pipeline-label { color: var(--accent-green); }
|
|
502
|
+
|
|
503
|
+
.pipeline-arrow {
|
|
504
|
+
color: var(--text-muted);
|
|
505
|
+
font-size: 1.2rem;
|
|
506
|
+
margin: 0 2px;
|
|
507
|
+
padding-bottom: 20px;
|
|
508
|
+
user-select: none;
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
.pipeline-detail {
|
|
512
|
+
background: var(--bg-secondary);
|
|
513
|
+
border: var(--border);
|
|
514
|
+
border-radius: var(--radius-md);
|
|
515
|
+
padding: 24px;
|
|
516
|
+
min-height: 200px;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
.pipeline-detail h3 {
|
|
520
|
+
color: var(--accent-green);
|
|
521
|
+
font-family: var(--font-mono);
|
|
522
|
+
margin-bottom: 4px;
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
.pd-desc { color: var(--text-secondary); margin-bottom: 16px; }
|
|
526
|
+
|
|
527
|
+
.pd-row { display: flex; gap: 32px; flex-wrap: wrap; }
|
|
528
|
+
|
|
529
|
+
.pd-col h4 {
|
|
530
|
+
font-size: 0.8rem;
|
|
531
|
+
color: var(--text-muted);
|
|
532
|
+
text-transform: uppercase;
|
|
533
|
+
letter-spacing: 1px;
|
|
534
|
+
margin-bottom: 8px;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
.pd-col ul { list-style: none; font-size: 0.9rem; }
|
|
538
|
+
.pd-col li { padding: 2px 0; color: var(--text-secondary); }
|
|
539
|
+
|
|
540
|
+
.pd-cmd {
|
|
541
|
+
font-family: var(--font-mono);
|
|
542
|
+
background: var(--bg-tertiary);
|
|
543
|
+
padding: 8px 14px;
|
|
544
|
+
border-radius: var(--radius-sm);
|
|
545
|
+
margin-top: 12px;
|
|
546
|
+
font-size: 0.85rem;
|
|
547
|
+
color: var(--accent-green);
|
|
548
|
+
display: inline-block;
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
/* ============================================================
|
|
552
|
+
COMMAND EXPLORER
|
|
553
|
+
============================================================ */
|
|
554
|
+
#commands { align-items: center; }
|
|
555
|
+
.commands-container { max-width: 900px; width: 100%; }
|
|
556
|
+
|
|
557
|
+
.cmd-tabs {
|
|
558
|
+
display: flex;
|
|
559
|
+
gap: 0;
|
|
560
|
+
flex-wrap: wrap;
|
|
561
|
+
margin-bottom: 20px;
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
.cmd-tab {
|
|
565
|
+
padding: 8px 16px;
|
|
566
|
+
background: var(--bg-secondary);
|
|
567
|
+
color: var(--text-secondary);
|
|
568
|
+
border: var(--border);
|
|
569
|
+
cursor: pointer;
|
|
570
|
+
font-size: 0.8rem;
|
|
571
|
+
transition: all 0.2s;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.cmd-tab:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
|
|
575
|
+
.cmd-tab:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
|
|
576
|
+
.cmd-tab + .cmd-tab { border-left: none; }
|
|
577
|
+
|
|
578
|
+
.cmd-tab.active {
|
|
579
|
+
background: var(--accent-cyan);
|
|
580
|
+
color: #0d1117;
|
|
581
|
+
border-color: var(--accent-cyan);
|
|
582
|
+
font-weight: 600;
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
.cmd-grid {
|
|
586
|
+
display: grid;
|
|
587
|
+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
588
|
+
gap: 12px;
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
.cmd-card {
|
|
592
|
+
background: var(--bg-secondary);
|
|
593
|
+
border: var(--border);
|
|
594
|
+
border-radius: var(--radius-sm);
|
|
595
|
+
overflow: hidden;
|
|
596
|
+
transition: border-color 0.2s;
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
.cmd-card:hover { border-color: var(--text-muted); }
|
|
600
|
+
|
|
601
|
+
.cmd-card-header {
|
|
602
|
+
padding: 14px 16px;
|
|
603
|
+
cursor: pointer;
|
|
604
|
+
display: flex;
|
|
605
|
+
justify-content: space-between;
|
|
606
|
+
align-items: center;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
.cmd-card-name {
|
|
610
|
+
font-family: var(--font-mono);
|
|
611
|
+
font-size: 0.85rem;
|
|
612
|
+
color: var(--accent-cyan);
|
|
613
|
+
font-weight: 600;
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
.cmd-card-purpose {
|
|
617
|
+
font-size: 0.8rem;
|
|
618
|
+
color: var(--text-secondary);
|
|
619
|
+
margin-top: 2px;
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
.cmd-card-arrow {
|
|
623
|
+
color: var(--text-muted);
|
|
624
|
+
transition: transform 0.2s;
|
|
625
|
+
font-size: 0.8rem;
|
|
626
|
+
flex-shrink: 0;
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
.cmd-card.expanded .cmd-card-arrow { transform: rotate(180deg); }
|
|
630
|
+
|
|
631
|
+
.cmd-card-body {
|
|
632
|
+
display: none;
|
|
633
|
+
padding: 0 16px 14px;
|
|
634
|
+
border-top: var(--border);
|
|
635
|
+
}
|
|
636
|
+
|
|
637
|
+
.cmd-card.expanded .cmd-card-body { display: block; }
|
|
638
|
+
|
|
639
|
+
.cmd-example {
|
|
640
|
+
background: var(--bg-tertiary);
|
|
641
|
+
border-radius: var(--radius-sm);
|
|
642
|
+
padding: 12px;
|
|
643
|
+
margin-top: 10px;
|
|
644
|
+
font-family: var(--font-mono);
|
|
645
|
+
font-size: 0.8rem;
|
|
646
|
+
line-height: 1.6;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
/* ============================================================
|
|
650
|
+
TDD CYCLE
|
|
651
|
+
============================================================ */
|
|
652
|
+
#tdd-cycle { align-items: center; }
|
|
653
|
+
.tdd-container { max-width: 900px; width: 100%; }
|
|
654
|
+
|
|
655
|
+
.tdd-phases {
|
|
656
|
+
display: flex;
|
|
657
|
+
flex-wrap: wrap;
|
|
658
|
+
gap: 8px;
|
|
659
|
+
justify-content: center;
|
|
660
|
+
margin-bottom: 24px;
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
.tdd-node {
|
|
664
|
+
width: 90px;
|
|
665
|
+
padding: 10px 8px;
|
|
666
|
+
background: var(--bg-secondary);
|
|
667
|
+
border: 2px solid var(--border-color);
|
|
668
|
+
border-radius: var(--radius-sm);
|
|
669
|
+
text-align: center;
|
|
670
|
+
cursor: pointer;
|
|
671
|
+
transition: all 0.3s;
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
.tdd-node:hover { border-color: var(--text-muted); }
|
|
675
|
+
|
|
676
|
+
.tdd-node[data-color="red"] { --node-color: var(--accent-red); --node-glow: rgba(248,81,73,0.3); }
|
|
677
|
+
.tdd-node[data-color="green"] { --node-color: var(--accent-green); --node-glow: rgba(63,185,80,0.3); }
|
|
678
|
+
.tdd-node[data-color="cyan"] { --node-color: var(--accent-cyan); --node-glow: rgba(88,166,255,0.3); }
|
|
679
|
+
.tdd-node[data-color="purple"] { --node-color: var(--accent-purple); --node-glow: rgba(188,140,255,0.3); }
|
|
680
|
+
.tdd-node[data-color="orange"] { --node-color: var(--accent-orange); --node-glow: rgba(210,153,34,0.3); }
|
|
681
|
+
|
|
682
|
+
.tdd-node.active {
|
|
683
|
+
border-color: var(--node-color);
|
|
684
|
+
box-shadow: 0 0 16px var(--node-glow);
|
|
685
|
+
}
|
|
686
|
+
.tdd-node.active .tdd-phase-id { color: var(--node-color); }
|
|
687
|
+
|
|
688
|
+
.tdd-phase-id {
|
|
689
|
+
font-family: var(--font-mono);
|
|
690
|
+
font-size: 0.75rem;
|
|
691
|
+
font-weight: 700;
|
|
692
|
+
color: var(--text-muted);
|
|
693
|
+
transition: color 0.2s;
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
.tdd-phase-name {
|
|
697
|
+
font-size: 0.65rem;
|
|
698
|
+
color: var(--text-secondary);
|
|
699
|
+
margin-top: 4px;
|
|
700
|
+
line-height: 1.2;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
.tdd-controls {
|
|
704
|
+
display: flex;
|
|
705
|
+
gap: 8px;
|
|
706
|
+
justify-content: center;
|
|
707
|
+
margin-bottom: 20px;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
.tdd-btn {
|
|
711
|
+
padding: 6px 18px;
|
|
712
|
+
border-radius: var(--radius-sm);
|
|
713
|
+
border: var(--border);
|
|
714
|
+
background: var(--bg-secondary);
|
|
715
|
+
color: var(--text-secondary);
|
|
716
|
+
cursor: pointer;
|
|
717
|
+
font-size: 0.85rem;
|
|
718
|
+
font-family: var(--font-ui);
|
|
719
|
+
transition: all 0.2s;
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
.tdd-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
|
|
723
|
+
|
|
724
|
+
.tdd-btn.playing {
|
|
725
|
+
background: var(--accent-green);
|
|
726
|
+
color: #0d1117;
|
|
727
|
+
border-color: var(--accent-green);
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
.tdd-detail {
|
|
731
|
+
background: var(--bg-secondary);
|
|
732
|
+
border: var(--border);
|
|
733
|
+
border-radius: var(--radius-md);
|
|
734
|
+
padding: 20px 24px;
|
|
735
|
+
min-height: 150px;
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
.tdd-detail h3 { font-family: var(--font-mono); margin-bottom: 8px; }
|
|
739
|
+
.td-desc { color: var(--text-secondary); margin-bottom: 12px; }
|
|
740
|
+
.td-meta { display: flex; gap: 24px; flex-wrap: wrap; font-size: 0.85rem; }
|
|
741
|
+
|
|
742
|
+
.td-meta-label {
|
|
743
|
+
color: var(--text-muted);
|
|
744
|
+
font-size: 0.75rem;
|
|
745
|
+
text-transform: uppercase;
|
|
746
|
+
letter-spacing: 0.5px;
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
.td-meta-value { color: var(--text-secondary); margin-top: 2px; }
|
|
750
|
+
|
|
751
|
+
.td-badge {
|
|
752
|
+
display: inline-block;
|
|
753
|
+
background: var(--bg-tertiary);
|
|
754
|
+
border: 1px solid var(--border-color);
|
|
755
|
+
border-radius: 12px;
|
|
756
|
+
padding: 2px 10px;
|
|
757
|
+
font-size: 0.75rem;
|
|
758
|
+
font-family: var(--font-mono);
|
|
759
|
+
color: var(--accent-cyan);
|
|
760
|
+
margin: 2px;
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
/* ============================================================
|
|
764
|
+
QUALITY GATES
|
|
765
|
+
============================================================ */
|
|
766
|
+
#quality-gates { align-items: center; }
|
|
767
|
+
.gates-container { max-width: 900px; width: 100%; }
|
|
768
|
+
|
|
769
|
+
.gates-row {
|
|
770
|
+
display: flex;
|
|
771
|
+
align-items: stretch;
|
|
772
|
+
gap: 0;
|
|
773
|
+
justify-content: center;
|
|
774
|
+
flex-wrap: wrap;
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
.gate-card {
|
|
778
|
+
background: var(--bg-secondary);
|
|
779
|
+
border: var(--border);
|
|
780
|
+
border-radius: var(--radius-md);
|
|
781
|
+
padding: 24px 20px;
|
|
782
|
+
flex: 1;
|
|
783
|
+
min-width: 180px;
|
|
784
|
+
max-width: 220px;
|
|
785
|
+
text-align: center;
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
.gate-number {
|
|
789
|
+
font-family: var(--font-mono);
|
|
790
|
+
font-size: 2rem;
|
|
791
|
+
font-weight: 700;
|
|
792
|
+
color: var(--accent-green);
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
.gate-name {
|
|
796
|
+
font-size: 0.85rem;
|
|
797
|
+
color: var(--text-primary);
|
|
798
|
+
font-weight: 600;
|
|
799
|
+
margin: 4px 0;
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
.gate-transition {
|
|
803
|
+
font-size: 0.75rem;
|
|
804
|
+
color: var(--text-muted);
|
|
805
|
+
margin-bottom: 12px;
|
|
806
|
+
}
|
|
807
|
+
|
|
808
|
+
.gate-reqs {
|
|
809
|
+
list-style: none;
|
|
810
|
+
text-align: left;
|
|
811
|
+
font-size: 0.8rem;
|
|
812
|
+
color: var(--text-secondary);
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
.gate-reqs li { padding: 3px 0; }
|
|
816
|
+
|
|
817
|
+
.gate-arrow {
|
|
818
|
+
display: flex;
|
|
819
|
+
align-items: center;
|
|
820
|
+
color: var(--text-muted);
|
|
821
|
+
font-size: 1.4rem;
|
|
822
|
+
padding: 0 8px;
|
|
823
|
+
user-select: none;
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
.meters { margin-top: 32px; }
|
|
827
|
+
|
|
828
|
+
.meters h3 {
|
|
829
|
+
text-align: center;
|
|
830
|
+
color: var(--text-secondary);
|
|
831
|
+
font-size: 1rem;
|
|
832
|
+
margin-bottom: 16px;
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
.meter-row {
|
|
836
|
+
display: flex;
|
|
837
|
+
align-items: center;
|
|
838
|
+
gap: 12px;
|
|
839
|
+
margin-bottom: 10px;
|
|
840
|
+
max-width: 500px;
|
|
841
|
+
margin-left: auto;
|
|
842
|
+
margin-right: auto;
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
.meter-label {
|
|
846
|
+
font-size: 0.8rem;
|
|
847
|
+
color: var(--text-secondary);
|
|
848
|
+
width: 120px;
|
|
849
|
+
text-align: right;
|
|
850
|
+
flex-shrink: 0;
|
|
851
|
+
}
|
|
852
|
+
|
|
853
|
+
.meter-track {
|
|
854
|
+
flex: 1;
|
|
855
|
+
height: 24px;
|
|
856
|
+
background: var(--bg-tertiary);
|
|
857
|
+
border-radius: 12px;
|
|
858
|
+
overflow: hidden;
|
|
859
|
+
border: 1px solid var(--border-color);
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
.meter-fill {
|
|
863
|
+
height: 100%;
|
|
864
|
+
border-radius: 12px;
|
|
865
|
+
width: 0;
|
|
866
|
+
transition: width 1.5s ease-out;
|
|
867
|
+
display: flex;
|
|
868
|
+
align-items: center;
|
|
869
|
+
justify-content: flex-end;
|
|
870
|
+
padding-right: 10px;
|
|
871
|
+
font-size: 0.75rem;
|
|
872
|
+
font-weight: 700;
|
|
873
|
+
color: #0d1117;
|
|
874
|
+
font-family: var(--font-mono);
|
|
875
|
+
}
|
|
876
|
+
|
|
877
|
+
.meter-fill.fill-green { background: var(--accent-green); }
|
|
878
|
+
.meter-fill.fill-cyan { background: var(--accent-cyan); }
|
|
879
|
+
.meter-fill.fill-orange { background: var(--accent-orange); }
|
|
880
|
+
.meter-fill.animated { width: var(--target); }
|
|
881
|
+
|
|
882
|
+
/* ============================================================
|
|
883
|
+
CONSTITUTIONAL FILES
|
|
884
|
+
============================================================ */
|
|
885
|
+
#constitution { align-items: center; }
|
|
886
|
+
.const-container { max-width: 900px; width: 100%; }
|
|
887
|
+
|
|
888
|
+
.const-grid {
|
|
889
|
+
display: grid;
|
|
890
|
+
grid-template-columns: repeat(3, 1fr);
|
|
891
|
+
gap: 12px;
|
|
892
|
+
margin-bottom: 32px;
|
|
893
|
+
}
|
|
894
|
+
|
|
895
|
+
.const-card {
|
|
896
|
+
background: var(--bg-secondary);
|
|
897
|
+
border: var(--border);
|
|
898
|
+
border-radius: var(--radius-sm);
|
|
899
|
+
padding: 20px 16px;
|
|
900
|
+
cursor: pointer;
|
|
901
|
+
transition: all 0.2s;
|
|
902
|
+
border-left: 3px solid var(--accent-purple);
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
.const-card:hover { border-color: var(--accent-purple); }
|
|
906
|
+
|
|
907
|
+
.const-card-name {
|
|
908
|
+
font-family: var(--font-mono);
|
|
909
|
+
font-size: 0.85rem;
|
|
910
|
+
color: var(--accent-purple);
|
|
911
|
+
font-weight: 600;
|
|
912
|
+
margin-bottom: 8px;
|
|
913
|
+
}
|
|
914
|
+
|
|
915
|
+
.const-card-controls, .const-card-prevents {
|
|
916
|
+
font-size: 0.8rem;
|
|
917
|
+
margin-bottom: 4px;
|
|
918
|
+
}
|
|
919
|
+
|
|
920
|
+
.cc-label-controls { color: var(--accent-green); }
|
|
921
|
+
.cc-label-prevents { color: var(--accent-red); }
|
|
922
|
+
|
|
923
|
+
.const-card-body {
|
|
924
|
+
display: none;
|
|
925
|
+
margin-top: 12px;
|
|
926
|
+
padding-top: 12px;
|
|
927
|
+
border-top: var(--border);
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
.const-card.expanded .const-card-body { display: block; }
|
|
931
|
+
|
|
932
|
+
.const-snippet {
|
|
933
|
+
background: var(--bg-tertiary);
|
|
934
|
+
padding: 10px 12px;
|
|
935
|
+
border-radius: var(--radius-sm);
|
|
936
|
+
font-family: var(--font-mono);
|
|
937
|
+
font-size: 0.75rem;
|
|
938
|
+
color: var(--text-secondary);
|
|
939
|
+
line-height: 1.5;
|
|
940
|
+
white-space: pre-wrap;
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
.adr-flow {
|
|
944
|
+
background: var(--bg-secondary);
|
|
945
|
+
border: var(--border);
|
|
946
|
+
border-radius: var(--radius-md);
|
|
947
|
+
padding: 24px;
|
|
948
|
+
text-align: center;
|
|
949
|
+
}
|
|
950
|
+
|
|
951
|
+
.adr-flow h3 {
|
|
952
|
+
margin-bottom: 16px;
|
|
953
|
+
color: var(--text-secondary);
|
|
954
|
+
font-size: 1rem;
|
|
955
|
+
}
|
|
956
|
+
|
|
957
|
+
.adr-steps {
|
|
958
|
+
display: flex;
|
|
959
|
+
align-items: center;
|
|
960
|
+
justify-content: center;
|
|
961
|
+
gap: 0;
|
|
962
|
+
flex-wrap: wrap;
|
|
963
|
+
}
|
|
964
|
+
|
|
965
|
+
.adr-step {
|
|
966
|
+
background: var(--bg-tertiary);
|
|
967
|
+
border: var(--border);
|
|
968
|
+
border-radius: var(--radius-sm);
|
|
969
|
+
padding: 10px 16px;
|
|
970
|
+
font-size: 0.8rem;
|
|
971
|
+
color: var(--text-secondary);
|
|
972
|
+
font-family: var(--font-mono);
|
|
973
|
+
}
|
|
974
|
+
|
|
975
|
+
.adr-arrow { color: var(--text-muted); margin: 0 6px; font-size: 1.1rem; }
|
|
976
|
+
|
|
977
|
+
/* ============================================================
|
|
978
|
+
ARCHITECTURE
|
|
979
|
+
============================================================ */
|
|
980
|
+
#architecture { align-items: center; }
|
|
981
|
+
.arch-container { max-width: 900px; width: 100%; }
|
|
982
|
+
|
|
983
|
+
.arch-layers {
|
|
984
|
+
display: flex;
|
|
985
|
+
flex-direction: column;
|
|
986
|
+
gap: 0;
|
|
987
|
+
margin-bottom: 32px;
|
|
988
|
+
}
|
|
989
|
+
|
|
990
|
+
.arch-layer {
|
|
991
|
+
padding: 20px 24px;
|
|
992
|
+
border: var(--border);
|
|
993
|
+
text-align: center;
|
|
994
|
+
}
|
|
995
|
+
|
|
996
|
+
.arch-layer:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
|
|
997
|
+
.arch-layer:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
|
|
998
|
+
.arch-layer + .arch-layer { border-top: none; }
|
|
999
|
+
|
|
1000
|
+
.arch-layer-num {
|
|
1001
|
+
font-family: var(--font-mono);
|
|
1002
|
+
font-size: 0.7rem;
|
|
1003
|
+
color: var(--text-muted);
|
|
1004
|
+
text-transform: uppercase;
|
|
1005
|
+
letter-spacing: 1px;
|
|
1006
|
+
}
|
|
1007
|
+
|
|
1008
|
+
.arch-layer-name { font-size: 1.1rem; font-weight: 600; margin: 4px 0; }
|
|
1009
|
+
.arch-layer-count { font-family: var(--font-mono); font-size: 0.85rem; }
|
|
1010
|
+
|
|
1011
|
+
.arch-layer.l3 { background: linear-gradient(135deg, rgba(88,166,255,0.1), rgba(88,166,255,0.03)); }
|
|
1012
|
+
.arch-layer.l3 .arch-layer-name, .arch-layer.l3 .arch-layer-count { color: var(--accent-cyan); }
|
|
1013
|
+
|
|
1014
|
+
.arch-layer.l2 { background: linear-gradient(135deg, rgba(63,185,80,0.1), rgba(63,185,80,0.03)); }
|
|
1015
|
+
.arch-layer.l2 .arch-layer-name, .arch-layer.l2 .arch-layer-count { color: var(--accent-green); }
|
|
1016
|
+
|
|
1017
|
+
.arch-layer.l1 { background: linear-gradient(135deg, rgba(210,153,34,0.1), rgba(210,153,34,0.03)); }
|
|
1018
|
+
.arch-layer.l1 .arch-layer-name, .arch-layer.l1 .arch-layer-count { color: var(--accent-orange); }
|
|
1019
|
+
|
|
1020
|
+
.arch-layer.l0 { background: linear-gradient(135deg, rgba(188,140,255,0.1), rgba(188,140,255,0.03)); }
|
|
1021
|
+
.arch-layer.l0 .arch-layer-name, .arch-layer.l0 .arch-layer-count { color: var(--accent-purple); }
|
|
1022
|
+
|
|
1023
|
+
.agent-categories {
|
|
1024
|
+
display: grid;
|
|
1025
|
+
grid-template-columns: repeat(2, 1fr);
|
|
1026
|
+
gap: 12px;
|
|
1027
|
+
}
|
|
1028
|
+
|
|
1029
|
+
.agent-cat {
|
|
1030
|
+
background: var(--bg-secondary);
|
|
1031
|
+
border: var(--border);
|
|
1032
|
+
border-radius: var(--radius-sm);
|
|
1033
|
+
padding: 14px 16px;
|
|
1034
|
+
cursor: pointer;
|
|
1035
|
+
transition: border-color 0.2s;
|
|
1036
|
+
}
|
|
1037
|
+
|
|
1038
|
+
.agent-cat:hover { border-color: var(--text-muted); }
|
|
1039
|
+
|
|
1040
|
+
.agent-cat-header {
|
|
1041
|
+
display: flex;
|
|
1042
|
+
justify-content: space-between;
|
|
1043
|
+
align-items: center;
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1046
|
+
.agent-cat-name { font-size: 0.9rem; font-weight: 600; }
|
|
1047
|
+
|
|
1048
|
+
.agent-cat-count {
|
|
1049
|
+
font-family: var(--font-mono);
|
|
1050
|
+
font-size: 0.8rem;
|
|
1051
|
+
color: var(--text-muted);
|
|
1052
|
+
}
|
|
1053
|
+
|
|
1054
|
+
.agent-cat-list {
|
|
1055
|
+
display: none;
|
|
1056
|
+
margin-top: 10px;
|
|
1057
|
+
padding-top: 10px;
|
|
1058
|
+
border-top: var(--border);
|
|
1059
|
+
font-size: 0.8rem;
|
|
1060
|
+
color: var(--text-secondary);
|
|
1061
|
+
line-height: 1.8;
|
|
1062
|
+
font-family: var(--font-mono);
|
|
1063
|
+
}
|
|
1064
|
+
|
|
1065
|
+
.agent-cat.expanded .agent-cat-list { display: block; }
|
|
1066
|
+
|
|
1067
|
+
/* ============================================================
|
|
1068
|
+
GET STARTED
|
|
1069
|
+
============================================================ */
|
|
1070
|
+
#get-started { align-items: center; text-align: center; }
|
|
1071
|
+
|
|
1072
|
+
.get-started-steps {
|
|
1073
|
+
display: flex;
|
|
1074
|
+
gap: 24px;
|
|
1075
|
+
justify-content: center;
|
|
1076
|
+
margin: 32px 0;
|
|
1077
|
+
flex-wrap: wrap;
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
.gs-step {
|
|
1081
|
+
background: var(--bg-secondary);
|
|
1082
|
+
border: var(--border);
|
|
1083
|
+
border-radius: var(--radius-md);
|
|
1084
|
+
padding: 20px 24px;
|
|
1085
|
+
text-align: center;
|
|
1086
|
+
flex: 1;
|
|
1087
|
+
max-width: 220px;
|
|
1088
|
+
min-width: 160px;
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
.gs-step-num {
|
|
1092
|
+
font-family: var(--font-mono);
|
|
1093
|
+
font-size: 1.5rem;
|
|
1094
|
+
font-weight: 700;
|
|
1095
|
+
color: var(--accent-green);
|
|
1096
|
+
}
|
|
1097
|
+
|
|
1098
|
+
.gs-step-text {
|
|
1099
|
+
font-size: 0.9rem;
|
|
1100
|
+
color: var(--text-secondary);
|
|
1101
|
+
margin-top: 4px;
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
.gs-step-cmd {
|
|
1105
|
+
font-size: 0.75rem;
|
|
1106
|
+
color: var(--text-muted);
|
|
1107
|
+
margin-top: 4px;
|
|
1108
|
+
font-family: var(--font-mono);
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
/* ============================================================
|
|
1112
|
+
RESPONSIVE
|
|
1113
|
+
============================================================ */
|
|
1114
|
+
@media (max-width: 1023px) {
|
|
1115
|
+
#sidebar { transform: translateX(-100%); }
|
|
1116
|
+
#sidebar.open { transform: translateX(0); }
|
|
1117
|
+
.hamburger { display: block; }
|
|
1118
|
+
#content { margin-left: 0; }
|
|
1119
|
+
.section { padding: 60px 24px; }
|
|
1120
|
+
.hero-title { font-size: 3rem; }
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
@media (max-width: 767px) {
|
|
1124
|
+
.section { padding: 40px 16px; min-height: auto; padding-top: 60px; }
|
|
1125
|
+
.hero-title { font-size: 2.2rem; }
|
|
1126
|
+
.hero-stats { grid-template-columns: repeat(2, 1fr); }
|
|
1127
|
+
.const-grid { grid-template-columns: 1fr; }
|
|
1128
|
+
.agent-categories { grid-template-columns: 1fr; }
|
|
1129
|
+
.gates-row { flex-direction: column; align-items: center; }
|
|
1130
|
+
.gate-arrow { transform: rotate(90deg); padding: 4px 0; }
|
|
1131
|
+
.pipeline-diagram { flex-direction: column; }
|
|
1132
|
+
.pipeline-arrow { transform: rotate(90deg); padding: 0; }
|
|
1133
|
+
.adr-steps { flex-direction: column; gap: 6px; }
|
|
1134
|
+
.adr-arrow { transform: rotate(90deg); }
|
|
1135
|
+
.tdd-node { width: 75px; }
|
|
1136
|
+
.cmd-grid { grid-template-columns: 1fr; }
|
|
1137
|
+
.get-started-steps { flex-direction: column; align-items: center; }
|
|
1138
|
+
}
|
|
1139
|
+
|
|
1140
|
+
.overlay {
|
|
1141
|
+
display: none;
|
|
1142
|
+
position: fixed;
|
|
1143
|
+
inset: 0;
|
|
1144
|
+
background: rgba(0,0,0,0.6);
|
|
1145
|
+
z-index: 99;
|
|
1146
|
+
}
|
|
1147
|
+
.overlay.active { display: block; }
|
|
1148
|
+
</style>
|
|
1149
|
+
</head>
|
|
1150
|
+
<body>
|
|
1151
|
+
|
|
1152
|
+
<!-- HAMBURGER -->
|
|
1153
|
+
<button class="hamburger" onclick="toggleSidebar()" aria-label="Toggle navigation">☰</button>
|
|
1154
|
+
<div class="overlay" id="overlay" onclick="toggleSidebar()"></div>
|
|
1155
|
+
|
|
1156
|
+
<!-- SIDEBAR -->
|
|
1157
|
+
<nav id="sidebar">
|
|
1158
|
+
<div class="sidebar-logo">DevForge<span>AI</span></div>
|
|
1159
|
+
<ul class="nav-links" id="nav-links"></ul>
|
|
1160
|
+
<div class="sidebar-footer">
|
|
1161
|
+
<a href="https://github.com/bankielewicz/DevForgeAI" target="_blank" rel="noopener">GitHub Repository</a>
|
|
1162
|
+
</div>
|
|
1163
|
+
</nav>
|
|
1164
|
+
|
|
1165
|
+
<!-- MAIN CONTENT -->
|
|
1166
|
+
<main id="content">
|
|
1167
|
+
|
|
1168
|
+
<!-- HERO -->
|
|
1169
|
+
<section id="hero" class="section revealed">
|
|
1170
|
+
<h1 class="hero-title">DevForge<span class="accent">AI</span></h1>
|
|
1171
|
+
<p class="hero-tagline">Spec-driven development framework for Claude Code</p>
|
|
1172
|
+
<p class="hero-sub">Transform vague business ideas into production-ready code with zero technical debt through enforced TDD, quality gates, and immutable architectural constraints.</p>
|
|
1173
|
+
<div class="hero-stats" id="hero-stats"></div>
|
|
1174
|
+
<div class="cta-group">
|
|
1175
|
+
<button class="cta-button primary" onclick="scrollToEl('quick-start')">Start the Tour</button>
|
|
1176
|
+
<a class="cta-button secondary" href="https://github.com/bankielewicz/DevForgeAI" target="_blank" rel="noopener">View on GitHub</a>
|
|
1177
|
+
</div>
|
|
1178
|
+
</section>
|
|
1179
|
+
|
|
1180
|
+
<div class="section-divider">- - - - - - - - -</div>
|
|
1181
|
+
|
|
1182
|
+
<!-- QUICK START -->
|
|
1183
|
+
<section id="quick-start" class="section">
|
|
1184
|
+
<h2>Quick Start</h2>
|
|
1185
|
+
<p class="section-intro">From zero to spec-driven development in 8 commands. Each step feeds into the next, building a complete governed workflow.</p>
|
|
1186
|
+
<div class="terminal" id="qs-terminal">
|
|
1187
|
+
<div class="terminal-header">
|
|
1188
|
+
<span class="terminal-dot r"></span><span class="terminal-dot y"></span><span class="terminal-dot g"></span>
|
|
1189
|
+
<span class="terminal-title">claude-code</span>
|
|
1190
|
+
</div>
|
|
1191
|
+
<div class="terminal-body" id="qs-body"></div>
|
|
1192
|
+
</div>
|
|
1193
|
+
<div class="install-tabs" id="install-tabs"></div>
|
|
1194
|
+
<div class="install-content" id="install-content"></div>
|
|
1195
|
+
<div class="prereqs">
|
|
1196
|
+
<span class="prereq-badge">Node.js >= 18</span>
|
|
1197
|
+
<span class="prereq-badge">npm >= 8</span>
|
|
1198
|
+
<span class="prereq-badge">Git</span>
|
|
1199
|
+
<span class="prereq-badge">Claude Code Terminal</span>
|
|
1200
|
+
</div>
|
|
1201
|
+
</section>
|
|
1202
|
+
|
|
1203
|
+
<div class="section-divider">- - - - - - - - -</div>
|
|
1204
|
+
|
|
1205
|
+
<!-- PIPELINE -->
|
|
1206
|
+
<section id="pipeline" class="section">
|
|
1207
|
+
<h2>The Development Pipeline</h2>
|
|
1208
|
+
<p class="section-intro">Click any stage to explore what happens at each step of the spec-driven workflow.</p>
|
|
1209
|
+
<div class="pipeline-container">
|
|
1210
|
+
<div class="pipeline-diagram" id="pipeline-diagram"></div>
|
|
1211
|
+
<div class="pipeline-detail" id="pipeline-detail"></div>
|
|
1212
|
+
</div>
|
|
1213
|
+
</section>
|
|
1214
|
+
|
|
1215
|
+
<div class="section-divider">- - - - - - - - -</div>
|
|
1216
|
+
|
|
1217
|
+
<!-- COMMANDS -->
|
|
1218
|
+
<section id="commands" class="section">
|
|
1219
|
+
<h2>Command Explorer</h2>
|
|
1220
|
+
<p class="section-intro">46 slash commands organized by workflow phase. Click any command to see example usage.</p>
|
|
1221
|
+
<div class="commands-container">
|
|
1222
|
+
<div class="cmd-tabs" id="cmd-tabs"></div>
|
|
1223
|
+
<div class="cmd-grid" id="cmd-grid"></div>
|
|
1224
|
+
</div>
|
|
1225
|
+
</section>
|
|
1226
|
+
|
|
1227
|
+
<div class="section-divider">- - - - - - - - -</div>
|
|
1228
|
+
|
|
1229
|
+
<!-- TDD CYCLE -->
|
|
1230
|
+
<section id="tdd-cycle" class="section">
|
|
1231
|
+
<h2>10-Phase TDD Development Cycle</h2>
|
|
1232
|
+
<p class="section-intro">The <code>/dev</code> command orchestrates a strict Red-Green-Refactor cycle with AC verification, integration testing, and quality gates.</p>
|
|
1233
|
+
<div class="tdd-container">
|
|
1234
|
+
<div class="tdd-phases" id="tdd-phases"></div>
|
|
1235
|
+
<div class="tdd-controls">
|
|
1236
|
+
<button class="tdd-btn" id="tdd-play-btn" onclick="tddPlay()">Play Through</button>
|
|
1237
|
+
<button class="tdd-btn" onclick="tddStep()">Step</button>
|
|
1238
|
+
<button class="tdd-btn" onclick="tddReset()">Reset</button>
|
|
1239
|
+
</div>
|
|
1240
|
+
<div class="tdd-detail" id="tdd-detail"></div>
|
|
1241
|
+
</div>
|
|
1242
|
+
</section>
|
|
1243
|
+
|
|
1244
|
+
<div class="section-divider">- - - - - - - - -</div>
|
|
1245
|
+
|
|
1246
|
+
<!-- QUALITY GATES -->
|
|
1247
|
+
<section id="quality-gates" class="section">
|
|
1248
|
+
<h2>4 Quality Gates</h2>
|
|
1249
|
+
<p class="section-intro">Non-negotiable checkpoints that enforce coverage thresholds, constraint compliance, and release readiness.</p>
|
|
1250
|
+
<div class="gates-container">
|
|
1251
|
+
<div class="gates-row" id="gates-row"></div>
|
|
1252
|
+
<div class="meters" id="meters">
|
|
1253
|
+
<h3>Coverage Thresholds (Gate 2)</h3>
|
|
1254
|
+
<div class="meter-row">
|
|
1255
|
+
<span class="meter-label">Business Logic</span>
|
|
1256
|
+
<div class="meter-track"><div class="meter-fill fill-green" style="--target:95%">95%</div></div>
|
|
1257
|
+
</div>
|
|
1258
|
+
<div class="meter-row">
|
|
1259
|
+
<span class="meter-label">Application</span>
|
|
1260
|
+
<div class="meter-track"><div class="meter-fill fill-cyan" style="--target:85%">85%</div></div>
|
|
1261
|
+
</div>
|
|
1262
|
+
<div class="meter-row">
|
|
1263
|
+
<span class="meter-label">Infrastructure</span>
|
|
1264
|
+
<div class="meter-track"><div class="meter-fill fill-orange" style="--target:80%">80%</div></div>
|
|
1265
|
+
</div>
|
|
1266
|
+
</div>
|
|
1267
|
+
</div>
|
|
1268
|
+
</section>
|
|
1269
|
+
|
|
1270
|
+
<div class="section-divider">- - - - - - - - -</div>
|
|
1271
|
+
|
|
1272
|
+
<!-- CONSTITUTION -->
|
|
1273
|
+
<section id="constitution" class="section">
|
|
1274
|
+
<h2>6 Constitutional Context Files</h2>
|
|
1275
|
+
<p class="section-intro">Immutable constraints that govern all AI agent behavior. Changes require an Architecture Decision Record (ADR) and user approval.</p>
|
|
1276
|
+
<div class="const-container">
|
|
1277
|
+
<div class="const-grid" id="const-grid"></div>
|
|
1278
|
+
<div class="adr-flow">
|
|
1279
|
+
<h3>How to Change a Constitutional File</h3>
|
|
1280
|
+
<div class="adr-steps">
|
|
1281
|
+
<span class="adr-step">Propose Change</span>
|
|
1282
|
+
<span class="adr-arrow">→</span>
|
|
1283
|
+
<span class="adr-step">Create ADR</span>
|
|
1284
|
+
<span class="adr-arrow">→</span>
|
|
1285
|
+
<span class="adr-step">User Approval</span>
|
|
1286
|
+
<span class="adr-arrow">→</span>
|
|
1287
|
+
<span class="adr-step">/create-context</span>
|
|
1288
|
+
<span class="adr-arrow">→</span>
|
|
1289
|
+
<span class="adr-step">Propagation</span>
|
|
1290
|
+
</div>
|
|
1291
|
+
</div>
|
|
1292
|
+
</div>
|
|
1293
|
+
</section>
|
|
1294
|
+
|
|
1295
|
+
<div class="section-divider">- - - - - - - - -</div>
|
|
1296
|
+
|
|
1297
|
+
<!-- ARCHITECTURE -->
|
|
1298
|
+
<section id="architecture" class="section">
|
|
1299
|
+
<h2>Architecture</h2>
|
|
1300
|
+
<p class="section-intro">A layered architecture where slash commands invoke skills, which delegate to specialized subagents, all governed by immutable context files.</p>
|
|
1301
|
+
<div class="arch-container">
|
|
1302
|
+
<div class="arch-layers">
|
|
1303
|
+
<div class="arch-layer l3">
|
|
1304
|
+
<div class="arch-layer-num">Layer 3 — User Interface</div>
|
|
1305
|
+
<div class="arch-layer-name">Slash Commands</div>
|
|
1306
|
+
<div class="arch-layer-count">46 commands</div>
|
|
1307
|
+
</div>
|
|
1308
|
+
<div class="arch-layer l2">
|
|
1309
|
+
<div class="arch-layer-num">Layer 2 — Orchestration</div>
|
|
1310
|
+
<div class="arch-layer-name">Skills</div>
|
|
1311
|
+
<div class="arch-layer-count">26 inline prompt expansions</div>
|
|
1312
|
+
</div>
|
|
1313
|
+
<div class="arch-layer l1">
|
|
1314
|
+
<div class="arch-layer-num">Layer 1 — Execution</div>
|
|
1315
|
+
<div class="arch-layer-name">Subagents</div>
|
|
1316
|
+
<div class="arch-layer-count">44 isolated specialists</div>
|
|
1317
|
+
</div>
|
|
1318
|
+
<div class="arch-layer l0">
|
|
1319
|
+
<div class="arch-layer-num">Foundation — Governance</div>
|
|
1320
|
+
<div class="arch-layer-name">Constitutional Context Files</div>
|
|
1321
|
+
<div class="arch-layer-count">6 immutable constraint documents</div>
|
|
1322
|
+
</div>
|
|
1323
|
+
</div>
|
|
1324
|
+
<h3 style="margin:24px 0 12px;color:var(--text-secondary)">Subagent Categories</h3>
|
|
1325
|
+
<div class="agent-categories" id="agent-categories"></div>
|
|
1326
|
+
</div>
|
|
1327
|
+
</section>
|
|
1328
|
+
|
|
1329
|
+
<div class="section-divider">- - - - - - - - -</div>
|
|
1330
|
+
|
|
1331
|
+
<!-- GET STARTED -->
|
|
1332
|
+
<section id="get-started" class="section">
|
|
1333
|
+
<h2>Get Started</h2>
|
|
1334
|
+
<p class="section-intro">Three steps to spec-driven development.</p>
|
|
1335
|
+
<div class="get-started-steps">
|
|
1336
|
+
<div class="gs-step"><div class="gs-step-num">1</div><div class="gs-step-text">Install</div><div class="gs-step-cmd">npx devforgeai install</div></div>
|
|
1337
|
+
<div class="gs-step"><div class="gs-step-num">2</div><div class="gs-step-text">Configure</div><div class="gs-step-cmd">/create-context</div></div>
|
|
1338
|
+
<div class="gs-step"><div class="gs-step-num">3</div><div class="gs-step-text">Build</div><div class="gs-step-cmd">/dev STORY-001</div></div>
|
|
1339
|
+
</div>
|
|
1340
|
+
<div class="terminal" style="max-width:600px;margin:0 auto 32px">
|
|
1341
|
+
<div class="terminal-header">
|
|
1342
|
+
<span class="terminal-dot r"></span><span class="terminal-dot y"></span><span class="terminal-dot g"></span>
|
|
1343
|
+
<span class="terminal-title">get started</span>
|
|
1344
|
+
</div>
|
|
1345
|
+
<div class="terminal-body">
|
|
1346
|
+
<div class="t-line"><span class="t-prompt">$ </span><span class="t-cmd">npx devforgeai install</span></div>
|
|
1347
|
+
<div class="t-line t-success"> DevForgeAI installed successfully!</div>
|
|
1348
|
+
<div class="t-line t-out"> 44 agents, 26 skills, 46 commands ready.</div>
|
|
1349
|
+
<div class="t-line t-blank"></div>
|
|
1350
|
+
<div class="t-line t-dim"> Next: run /create-context to set up your project</div>
|
|
1351
|
+
</div>
|
|
1352
|
+
</div>
|
|
1353
|
+
<div class="cta-group">
|
|
1354
|
+
<a class="cta-button primary" href="https://github.com/bankielewicz/DevForgeAI" target="_blank" rel="noopener">View on GitHub</a>
|
|
1355
|
+
<a class="cta-button secondary" href="https://github.com/bankielewicz/DevForgeAI#readme" target="_blank" rel="noopener">Read the Docs</a>
|
|
1356
|
+
</div>
|
|
1357
|
+
</section>
|
|
1358
|
+
|
|
1359
|
+
<div style="padding:40px;text-align:center;color:var(--text-muted);font-size:0.8rem;font-family:var(--font-mono)">
|
|
1360
|
+
DevForgeAI — Spec-Driven Development for Claude Code
|
|
1361
|
+
</div>
|
|
1362
|
+
</main>
|
|
1363
|
+
|
|
1364
|
+
<script>
|
|
1365
|
+
/* ============================================================
|
|
1366
|
+
DATA
|
|
1367
|
+
============================================================ */
|
|
1368
|
+
|
|
1369
|
+
var NAV_ITEMS = [
|
|
1370
|
+
{id:'hero',label:'Overview'},{id:'quick-start',label:'Quick Start'},
|
|
1371
|
+
{id:'pipeline',label:'Pipeline'},{id:'commands',label:'Commands'},
|
|
1372
|
+
{id:'tdd-cycle',label:'TDD Cycle'},{id:'quality-gates',label:'Quality Gates'},
|
|
1373
|
+
{id:'constitution',label:'Constitution'},{id:'architecture',label:'Architecture'},
|
|
1374
|
+
{id:'get-started',label:'Get Started'}
|
|
1375
|
+
];
|
|
1376
|
+
|
|
1377
|
+
var STATS = [
|
|
1378
|
+
{n:44,label:'Subagents'},{n:26,label:'Skills'},{n:46,label:'Commands'},
|
|
1379
|
+
{n:6,label:'Constitutional Files'},{n:4,label:'Quality Gates'},{n:10,label:'Dev Phases'}
|
|
1380
|
+
];
|
|
1381
|
+
|
|
1382
|
+
var INSTALL_TABS = [
|
|
1383
|
+
{label:'npx (Recommended)',content:'<span class="t-cmd">npx devforgeai install</span><br><span class="t-out">Interactive wizard guides you through setup</span><br><br><span class="t-cmd">npx devforgeai install --yes</span><br><span class="t-out">Accept all defaults for quick setup</span>'},
|
|
1384
|
+
{label:'From Source',content:'<span class="t-cmd">git clone https://github.com/bankielewicz/DevForgeAI.git</span><br><span class="t-cmd">cd DevForgeAI && npm install</span><br><span class="t-cmd">node bin/devforgeai.js install /path/to/project</span>'},
|
|
1385
|
+
{label:'Global',content:'<span class="t-cmd">npm install -g devforgeai</span><br><span class="t-cmd">devforgeai install</span>'}
|
|
1386
|
+
];
|
|
1387
|
+
|
|
1388
|
+
var PIPELINE = [
|
|
1389
|
+
{id:'brainstorm',num:'1',label:'Brainstorm',cmd:'/brainstorm [topic]',desc:'Transform a vague business problem into a structured discovery document through a 7-phase guided interview.',artifacts:['BRAINSTORM-NNN.brainstorm.md','Stakeholder map','Problem statement','MoSCoW priorities'],agents:['stakeholder-analyst','internet-sleuth'],example:'/brainstorm "marketplace for local artisans"'},
|
|
1390
|
+
{id:'ideate',num:'2',label:'Ideate',cmd:'/ideate [idea]',desc:'Transform business idea into structured, actionable requirements through 3-phase discovery and elicitation.',artifacts:['requirements.md (F4 schema)','User personas','Functional requirements','Non-functional requirements'],agents:['requirements-analyst','internet-sleuth'],example:'/ideate marketplace-for-artisans'},
|
|
1391
|
+
{id:'context',num:'3',label:'Context',cmd:'/create-context',desc:'Generate the 6 immutable constitutional context files that govern all AI agent behavior throughout the project.',artifacts:['tech-stack.md','source-tree.md','dependencies.md','coding-standards.md','architecture-constraints.md','anti-patterns.md'],agents:['code-analyzer','tech-stack-detector'],example:'/create-context my-project'},
|
|
1392
|
+
{id:'epic',num:'4',label:'Epic',cmd:'/create-epic [name]',desc:'Create an epic with feature decomposition, story point estimation, and sprint assignment.',artifacts:['EPIC-NNN.epic.md','Feature breakdown','Story point estimates'],agents:['requirements-analyst'],example:'/create-epic core-marketplace-features'},
|
|
1393
|
+
{id:'story',num:'5',label:'Story',cmd:'/create-story [feature]',desc:'Generate implementation-ready user stories with acceptance criteria (Given/When/Then), technical specs, and UI specifications.',artifacts:['STORY-NNN.story.md','Acceptance criteria (XML)','Technical specification','Definition of Done'],agents:['story-requirements-analyst','api-designer'],example:'/create-story user-authentication'},
|
|
1394
|
+
{id:'dev',num:'6',label:'Dev',cmd:'/dev STORY-NNN',desc:'Execute the 10-phase TDD development cycle: Red (failing tests) then Green (implementation) then Refactor then Integration then QA gates.',artifacts:['Implementation code','Test suite (95%/85%/80%)','Phase state tracking','Coverage reports'],agents:['test-automator','backend-architect','refactoring-specialist','integration-tester'],example:'/dev STORY-001'},
|
|
1395
|
+
{id:'qa',num:'7',label:'QA',cmd:'/qa STORY-NNN deep',desc:'Comprehensive quality validation: coverage analysis, anti-pattern detection, spec compliance, security scanning.',artifacts:['QA report (pass/fail)','Coverage analysis','Anti-pattern report','Security scan'],agents:['coverage-analyzer','anti-pattern-scanner','security-auditor'],example:'/qa STORY-001 deep'},
|
|
1396
|
+
{id:'document',num:'8',label:'Document',cmd:'/document STORY-NNN',desc:'Auto-generate and maintain project documentation from completed stories: API docs, architecture, developer guides.',artifacts:['API.md','ARCHITECTURE.md','DEVELOPER-GUIDE.md','TROUBLESHOOTING.md'],agents:['documentation-writer','code-analyzer'],example:'/document STORY-001 --type=all'},
|
|
1397
|
+
{id:'release',num:'9',label:'Release',cmd:'/release STORY-NNN',desc:'Deploy to staging and production with smoke tests, deployment verification, and rollback plan.',artifacts:['Deployment verification','Smoke test results','Rollback plan'],agents:['deployment-engineer'],example:'/release STORY-001 production'}
|
|
1398
|
+
];
|
|
1399
|
+
|
|
1400
|
+
var CMD_DATA = {
|
|
1401
|
+
'Planning':[
|
|
1402
|
+
{cmd:'/brainstorm [topic]',purpose:'Transform vague problems into structured discovery'},
|
|
1403
|
+
{cmd:'/ideate [idea]',purpose:'Business idea to structured requirements'},
|
|
1404
|
+
{cmd:'/create-context',purpose:'Generate 6 constitutional context files'},
|
|
1405
|
+
{cmd:'/create-epic [name]',purpose:'Epic with feature decomposition'},
|
|
1406
|
+
{cmd:'/create-sprint [name]',purpose:'Sprint plan with story selection'},
|
|
1407
|
+
{cmd:'/assess-me',purpose:'Guided self-assessment for coaching'}
|
|
1408
|
+
],
|
|
1409
|
+
'Development':[
|
|
1410
|
+
{cmd:'/create-story [feature]',purpose:'User story with acceptance criteria'},
|
|
1411
|
+
{cmd:'/create-ui [STORY-ID]',purpose:'UI component specifications'},
|
|
1412
|
+
{cmd:'/dev STORY-NNN',purpose:'10-phase TDD development cycle'},
|
|
1413
|
+
{cmd:'/dev-status STORY-NNN',purpose:'Display progress without running workflow'},
|
|
1414
|
+
{cmd:'/resume-dev STORY-NNN',purpose:'Resume from a specific phase'}
|
|
1415
|
+
],
|
|
1416
|
+
'Validation':[
|
|
1417
|
+
{cmd:'/qa STORY-NNN [mode]',purpose:'Quality validation (light or deep)'},
|
|
1418
|
+
{cmd:'/validate-stories',purpose:'Validate against context files'},
|
|
1419
|
+
{cmd:'/fix-story',purpose:'Auto-fix story/epic file issues'},
|
|
1420
|
+
{cmd:'/validate-epic-coverage',purpose:'Detect coverage gaps in epics'}
|
|
1421
|
+
],
|
|
1422
|
+
'Release':[
|
|
1423
|
+
{cmd:'/release STORY-NNN [env]',purpose:'Deploy with smoke tests'},
|
|
1424
|
+
{cmd:'/orchestrate STORY-NNN',purpose:'Full lifecycle: dev + qa + release'},
|
|
1425
|
+
{cmd:'/document STORY-NNN',purpose:'Auto-generate documentation'},
|
|
1426
|
+
{cmd:'/create-missing-stories',purpose:'Create stories for coverage gaps'}
|
|
1427
|
+
],
|
|
1428
|
+
'Maintenance':[
|
|
1429
|
+
{cmd:'/rca',purpose:'Root Cause Analysis with 5 Whys'},
|
|
1430
|
+
{cmd:'/audit-alignment',purpose:'Cross-layer configuration audit'},
|
|
1431
|
+
{cmd:'/audit-deferrals',purpose:'Audit deferred DoD items'},
|
|
1432
|
+
{cmd:'/audit-w3',purpose:'Detect W3 compliance violations'},
|
|
1433
|
+
{cmd:'/audit-orphans',purpose:'Find orphaned files and duplicates'}
|
|
1434
|
+
],
|
|
1435
|
+
'Feedback':[
|
|
1436
|
+
{cmd:'/feedback',purpose:'Trigger feedback collection'},
|
|
1437
|
+
{cmd:'/feedback-search [query]',purpose:'Search feedback history'},
|
|
1438
|
+
{cmd:'/insights',purpose:'Session data mining queries'},
|
|
1439
|
+
{cmd:'/research [topic]',purpose:'Capture and query research findings'},
|
|
1440
|
+
{cmd:'/collaborate',purpose:'Cross-AI collaboration document'}
|
|
1441
|
+
]
|
|
1442
|
+
};
|
|
1443
|
+
|
|
1444
|
+
var TDD_PHASES = [
|
|
1445
|
+
{id:'01',name:'Pre-Flight',color:'cyan',desc:'Load context files, validate story format, init phase state, verify git status, detect tech stack.',agents:['git-validator','tech-stack-detector'],gate:'Phase init complete'},
|
|
1446
|
+
{id:'02',name:'Test-First (RED)',color:'red',desc:'test-automator writes failing tests from acceptance criteria. All tests must FAIL before proceeding. Integrity snapshot created.',agents:['test-automator'],gate:'All tests fail'},
|
|
1447
|
+
{id:'03',name:'Implementation (GREEN)',color:'green',desc:'backend-architect or frontend-developer implements minimum code to make tests pass. Context files enforced as constraints.',agents:['backend-architect','frontend-developer','context-validator'],gate:'All tests pass'},
|
|
1448
|
+
{id:'04',name:'Refactoring',color:'cyan',desc:'refactoring-specialist improves code quality. code-reviewer validates. Cyclomatic complexity checked.',agents:['refactoring-specialist','code-reviewer'],gate:'Coverage thresholds met'},
|
|
1449
|
+
{id:'04.5',name:'AC Verify (Post-Refactor)',color:'purple',desc:'ac-compliance-verifier checks that no acceptance criteria regressed during refactoring.',agents:['ac-compliance-verifier'],gate:'All ACs pass'},
|
|
1450
|
+
{id:'05',name:'Integration',color:'green',desc:'integration-tester writes integration tests. Coverage validated against 95%/85%/80% thresholds.',agents:['integration-tester'],gate:'Coverage 95/85/80%'},
|
|
1451
|
+
{id:'05.5',name:'AC Verify (Post-Integration)',color:'purple',desc:'ac-compliance-verifier re-checks acceptance criteria after integration testing.',agents:['ac-compliance-verifier'],gate:'All ACs pass'},
|
|
1452
|
+
{id:'06',name:'Deferral Challenge',color:'orange',desc:'deferral-validator reviews any deferred DoD items. Each deferral requires explicit user approval with justification.',agents:['deferral-validator'],gate:'User consent'},
|
|
1453
|
+
{id:'07',name:'DoD Update',color:'cyan',desc:'Mark all Definition of Done items in the story file. Format validated by pre-commit hook.',agents:[],gate:'DoD validator passes'},
|
|
1454
|
+
{id:'08',name:'Git Workflow',color:'cyan',desc:'Stage implementation and test files. Commit with pre-commit validation hooks.',agents:[],gate:'Commit succeeds'},
|
|
1455
|
+
{id:'09',name:'Feedback Hook',color:'cyan',desc:'Collect observations about friction, patterns, and improvements. framework-analyst produces recommendations.',agents:['framework-analyst','observation-extractor'],gate:'Report written'},
|
|
1456
|
+
{id:'10',name:'Result Summary',color:'green',desc:'dev-result-interpreter generates final status report with phases completed, test results, and next steps.',agents:['dev-result-interpreter'],gate:'Status updated'}
|
|
1457
|
+
];
|
|
1458
|
+
|
|
1459
|
+
var GATES = [
|
|
1460
|
+
{num:1,name:'Context Validation',transition:'Architecture \u2192 Ready',reqs:['All 6 context files present','Valid YAML/Markdown syntax','No conflicting dependencies']},
|
|
1461
|
+
{num:2,name:'Test Passing',transition:'Dev Complete \u2192 QA',reqs:['All tests pass (exit code 0)','Coverage 95%/85%/80%','No Critical/High violations']},
|
|
1462
|
+
{num:3,name:'QA Approval',transition:'QA \u2192 Releasing',reqs:['QA APPROVED marker set','All AC verified','Runtime smoke test passes']},
|
|
1463
|
+
{num:4,name:'Release Readiness',transition:'Releasing \u2192 Released',reqs:['Smoke tests pass','Deployment verified','Rollback plan documented']}
|
|
1464
|
+
];
|
|
1465
|
+
|
|
1466
|
+
var CONST_FILES = [
|
|
1467
|
+
{name:'tech-stack.md',controls:'Approved technologies and versions',prevents:'Technology sprawl, library substitution',snippet:'# Technology Stack\n\n## Languages\n- TypeScript (primary)\n- Python 3.10+ (CLI tools)\n\n## Frameworks\n- Node.js >= 18\n- Claude Code Terminal\n\n## PROHIBITED\n- No Bash for file operations\n- No unapproved libraries'},
|
|
1468
|
+
{name:'source-tree.md',controls:'Directory structure and file locations',prevents:'Components in wrong directories',snippet:'# Source Tree\n\nsrc/ # Development source\n.claude/ # Operational runtime\ndevforgeai/specs/ # Specifications\ntests/STORY-NNN/ # Story-scoped tests\ndocs/ # Documentation'},
|
|
1469
|
+
{name:'dependencies.md',controls:'Allowed packages and version ranges',prevents:'Dependency bloat, version conflicts',snippet:'# Dependencies\n\n## Approved\n- jest ^29.x (testing)\n- typescript ^5.x\n- eslint ^8.x\n\n## Prohibited\n- No mocha (use jest)\n- No yarn (use npm)'},
|
|
1470
|
+
{name:'coding-standards.md',controls:'Code patterns, naming, formatting',prevents:'Inconsistency, style violations',snippet:'# Coding Standards\n\n## Naming\n- camelCase for variables\n- PascalCase for classes\n- UPPER_SNAKE for constants\n\n## Patterns\n- Dependency injection\n- Single responsibility'},
|
|
1471
|
+
{name:'architecture-constraints.md',controls:'Layer boundaries, coupling rules',prevents:'Circular dependencies, tight coupling',snippet:'# Architecture Constraints\n\n## Single Responsibility\n- Each skill handles ONE phase\n- Each subagent has ONE domain\n\n## Layer Rules\n- Skills invoke subagents\n- Subagents are stateless'},
|
|
1472
|
+
{name:'anti-patterns.md',controls:'Forbidden patterns and practices',prevents:'God objects, hardcoded secrets',snippet:'# Anti-Patterns\n\n## Forbidden\n- God Objects (>500 lines)\n- Direct SQL concatenation\n- Hardcoded secrets\n- Bash for file operations\n- Skipping TDD phases'}
|
|
1473
|
+
];
|
|
1474
|
+
|
|
1475
|
+
var AGENT_CATS = [
|
|
1476
|
+
{name:'Architecture & Design',count:5,agents:'api-designer, architect-reviewer, backend-architect, frontend-developer, code-analyzer'},
|
|
1477
|
+
{name:'Testing & Quality',count:7,agents:'test-automator, integration-tester, coverage-analyzer, code-quality-auditor, ac-compliance-verifier, code-reviewer, deferral-validator'},
|
|
1478
|
+
{name:'Security',count:1,agents:'security-auditor'},
|
|
1479
|
+
{name:'Analysis & Detection',count:6,agents:'anti-pattern-scanner, dead-code-detector, diagnostic-analyst, refactoring-specialist, context-validator, tech-stack-detector'},
|
|
1480
|
+
{name:'Requirements',count:4,agents:'requirements-analyst, story-requirements-analyst, stakeholder-analyst, entrepreneur-assessor'},
|
|
1481
|
+
{name:'Infrastructure',count:3,agents:'deployment-engineer, git-validator, git-worktree-manager'},
|
|
1482
|
+
{name:'Documentation & Feedback',count:4,agents:'documentation-writer, framework-analyst, observation-extractor, session-miner'},
|
|
1483
|
+
{name:'Workflow Support',count:6,agents:'sprint-planner, dependency-graph-analyzer, file-overlap-detector, dev-result-interpreter, qa-result-interpreter, ideation-result-interpreter'}
|
|
1484
|
+
];
|
|
1485
|
+
|
|
1486
|
+
var QS_LINES = [
|
|
1487
|
+
{t:'p',x:'/brainstorm "I want to build a task manager"'},
|
|
1488
|
+
{t:'s',x:' BRAINSTORM-042 created with 7 discovery phases'},
|
|
1489
|
+
{t:'b'},{t:'p',x:'/ideate task-manager-app'},
|
|
1490
|
+
{t:'i',x:' Generated requirements.md with 12 functional requirements'},
|
|
1491
|
+
{t:'b'},{t:'p',x:'/create-context my-project'},
|
|
1492
|
+
{t:'s',x:' 6/6 constitutional context files generated'},
|
|
1493
|
+
{t:'b'},{t:'p',x:'/create-story user-authentication'},
|
|
1494
|
+
{t:'i',x:' STORY-001 created with 5 acceptance criteria'},
|
|
1495
|
+
{t:'b'},{t:'p',x:'/dev STORY-001'},
|
|
1496
|
+
{t:'o',x:' Phase 02: Test-First (RED)... 5 tests written, all failing'},
|
|
1497
|
+
{t:'o',x:' Phase 03: Implementation (GREEN)... All 5 tests passing'},
|
|
1498
|
+
{t:'o',x:' Phase 04: Refactoring... Code quality improved'},
|
|
1499
|
+
{t:'o',x:' Phase 05: Integration... Coverage 97%/89%/85%'},
|
|
1500
|
+
{t:'s',x:' STORY-001: Development complete'},
|
|
1501
|
+
{t:'b'},{t:'p',x:'/qa STORY-001 deep'},
|
|
1502
|
+
{t:'s',x:' QA APPROVED - All gates passed'}
|
|
1503
|
+
];
|
|
1504
|
+
|
|
1505
|
+
/* ============================================================
|
|
1506
|
+
SAFE DOM HELPERS
|
|
1507
|
+
============================================================ */
|
|
1508
|
+
|
|
1509
|
+
function el(tag, cls, text) {
|
|
1510
|
+
var e = document.createElement(tag);
|
|
1511
|
+
if (cls) e.className = cls;
|
|
1512
|
+
if (text !== undefined) e.textContent = text;
|
|
1513
|
+
return e;
|
|
1514
|
+
}
|
|
1515
|
+
|
|
1516
|
+
function appendTo(parent, child) {
|
|
1517
|
+
if (typeof parent === 'string') parent = document.getElementById(parent);
|
|
1518
|
+
parent.appendChild(child);
|
|
1519
|
+
return child;
|
|
1520
|
+
}
|
|
1521
|
+
|
|
1522
|
+
/* ============================================================
|
|
1523
|
+
RENDER FUNCTIONS (safe DOM methods, no innerHTML)
|
|
1524
|
+
============================================================ */
|
|
1525
|
+
|
|
1526
|
+
function renderNav() {
|
|
1527
|
+
var ul = document.getElementById('nav-links');
|
|
1528
|
+
NAV_ITEMS.forEach(function(item) {
|
|
1529
|
+
var li = document.createElement('li');
|
|
1530
|
+
var a = document.createElement('a');
|
|
1531
|
+
a.href = '#' + item.id;
|
|
1532
|
+
a.dataset.section = item.id;
|
|
1533
|
+
var dot = el('span','nav-dot');
|
|
1534
|
+
a.appendChild(dot);
|
|
1535
|
+
a.appendChild(document.createTextNode(item.label));
|
|
1536
|
+
a.addEventListener('click', function() {
|
|
1537
|
+
if (window.innerWidth < 1024) toggleSidebar();
|
|
1538
|
+
});
|
|
1539
|
+
li.appendChild(a);
|
|
1540
|
+
ul.appendChild(li);
|
|
1541
|
+
});
|
|
1542
|
+
}
|
|
1543
|
+
|
|
1544
|
+
function renderStats() {
|
|
1545
|
+
var container = document.getElementById('hero-stats');
|
|
1546
|
+
STATS.forEach(function(s) {
|
|
1547
|
+
var card = el('div','stat-card');
|
|
1548
|
+
var num = el('span','stat-number','0');
|
|
1549
|
+
num.dataset.target = s.n;
|
|
1550
|
+
var label = el('div','stat-label',s.label);
|
|
1551
|
+
card.appendChild(num);
|
|
1552
|
+
card.appendChild(label);
|
|
1553
|
+
container.appendChild(card);
|
|
1554
|
+
});
|
|
1555
|
+
}
|
|
1556
|
+
|
|
1557
|
+
function renderInstallTabs() {
|
|
1558
|
+
var tabsEl = document.getElementById('install-tabs');
|
|
1559
|
+
var contentEl = document.getElementById('install-content');
|
|
1560
|
+
INSTALL_TABS.forEach(function(tab, i) {
|
|
1561
|
+
var btn = el('button','install-tab' + (i === 0 ? ' active' : ''), tab.label);
|
|
1562
|
+
btn.addEventListener('click', function() { switchInstall(i); });
|
|
1563
|
+
tabsEl.appendChild(btn);
|
|
1564
|
+
|
|
1565
|
+
var panel = el('div','install-panel' + (i === 0 ? ' active' : ''));
|
|
1566
|
+
// Parse simple content safely
|
|
1567
|
+
var lines = tab.content.split('<br>');
|
|
1568
|
+
lines.forEach(function(line, li) {
|
|
1569
|
+
var cleaned = line.replace(/<[^>]+>/g, '');
|
|
1570
|
+
var span = el('span', line.indexOf('t-cmd') > -1 ? 't-cmd' : 't-out', cleaned);
|
|
1571
|
+
panel.appendChild(span);
|
|
1572
|
+
if (li < lines.length - 1) panel.appendChild(document.createElement('br'));
|
|
1573
|
+
});
|
|
1574
|
+
contentEl.appendChild(panel);
|
|
1575
|
+
});
|
|
1576
|
+
}
|
|
1577
|
+
|
|
1578
|
+
function renderPipeline() {
|
|
1579
|
+
var container = document.getElementById('pipeline-diagram');
|
|
1580
|
+
PIPELINE.forEach(function(node, i) {
|
|
1581
|
+
if (i > 0) {
|
|
1582
|
+
var arrow = el('span','pipeline-arrow');
|
|
1583
|
+
arrow.textContent = '\u2192';
|
|
1584
|
+
container.appendChild(arrow);
|
|
1585
|
+
}
|
|
1586
|
+
var div = el('div','pipeline-node' + (i === 0 ? ' active' : ''));
|
|
1587
|
+
div.dataset.id = node.id;
|
|
1588
|
+
div.addEventListener('click', function() { selectPipelineNode(node.id); });
|
|
1589
|
+
var circle = el('div','pipeline-circle',node.num);
|
|
1590
|
+
var label = el('div','pipeline-label',node.label);
|
|
1591
|
+
div.appendChild(circle);
|
|
1592
|
+
div.appendChild(label);
|
|
1593
|
+
container.appendChild(div);
|
|
1594
|
+
});
|
|
1595
|
+
selectPipelineNode('brainstorm');
|
|
1596
|
+
}
|
|
1597
|
+
|
|
1598
|
+
function selectPipelineNode(id) {
|
|
1599
|
+
var node = PIPELINE.find(function(n) { return n.id === id; });
|
|
1600
|
+
if (!node) return;
|
|
1601
|
+
document.querySelectorAll('.pipeline-node').forEach(function(n) {
|
|
1602
|
+
n.classList.toggle('active', n.dataset.id === id);
|
|
1603
|
+
});
|
|
1604
|
+
var detail = document.getElementById('pipeline-detail');
|
|
1605
|
+
detail.textContent = '';
|
|
1606
|
+
|
|
1607
|
+
var h3 = el('h3','',node.cmd);
|
|
1608
|
+
var desc = el('p','pd-desc',node.desc);
|
|
1609
|
+
var row = el('div','pd-row');
|
|
1610
|
+
|
|
1611
|
+
var col1 = el('div','pd-col');
|
|
1612
|
+
col1.appendChild(el('h4','','Artifacts'));
|
|
1613
|
+
var ul1 = document.createElement('ul');
|
|
1614
|
+
node.artifacts.forEach(function(a) { ul1.appendChild(el('li','',a)); });
|
|
1615
|
+
col1.appendChild(ul1);
|
|
1616
|
+
|
|
1617
|
+
var col2 = el('div','pd-col');
|
|
1618
|
+
col2.appendChild(el('h4','','Subagents'));
|
|
1619
|
+
var ul2 = document.createElement('ul');
|
|
1620
|
+
if (node.agents.length) {
|
|
1621
|
+
node.agents.forEach(function(a) { ul2.appendChild(el('li','',a)); });
|
|
1622
|
+
} else {
|
|
1623
|
+
var li = el('li','','None');
|
|
1624
|
+
li.style.color = 'var(--text-muted)';
|
|
1625
|
+
ul2.appendChild(li);
|
|
1626
|
+
}
|
|
1627
|
+
col2.appendChild(ul2);
|
|
1628
|
+
|
|
1629
|
+
row.appendChild(col1);
|
|
1630
|
+
row.appendChild(col2);
|
|
1631
|
+
|
|
1632
|
+
var cmd = el('div','pd-cmd','$ ' + node.example);
|
|
1633
|
+
|
|
1634
|
+
detail.appendChild(h3);
|
|
1635
|
+
detail.appendChild(desc);
|
|
1636
|
+
detail.appendChild(row);
|
|
1637
|
+
detail.appendChild(cmd);
|
|
1638
|
+
}
|
|
1639
|
+
|
|
1640
|
+
function renderCommandTabs() {
|
|
1641
|
+
var tabsEl = document.getElementById('cmd-tabs');
|
|
1642
|
+
var cats = Object.keys(CMD_DATA);
|
|
1643
|
+
cats.forEach(function(c, i) {
|
|
1644
|
+
var btn = el('button','cmd-tab' + (i === 0 ? ' active' : ''), c);
|
|
1645
|
+
btn.addEventListener('click', function() { switchCmdTab(c); });
|
|
1646
|
+
tabsEl.appendChild(btn);
|
|
1647
|
+
});
|
|
1648
|
+
renderCommandGrid(cats[0]);
|
|
1649
|
+
}
|
|
1650
|
+
|
|
1651
|
+
function switchCmdTab(cat) {
|
|
1652
|
+
document.querySelectorAll('.cmd-tab').forEach(function(t) {
|
|
1653
|
+
t.classList.toggle('active', t.textContent === cat);
|
|
1654
|
+
});
|
|
1655
|
+
renderCommandGrid(cat);
|
|
1656
|
+
}
|
|
1657
|
+
|
|
1658
|
+
function renderCommandGrid(cat) {
|
|
1659
|
+
var grid = document.getElementById('cmd-grid');
|
|
1660
|
+
grid.textContent = '';
|
|
1661
|
+
var cmds = CMD_DATA[cat] || [];
|
|
1662
|
+
cmds.forEach(function(c) {
|
|
1663
|
+
var card = el('div','cmd-card');
|
|
1664
|
+
card.addEventListener('click', function() { card.classList.toggle('expanded'); });
|
|
1665
|
+
|
|
1666
|
+
var header = el('div','cmd-card-header');
|
|
1667
|
+
var info = document.createElement('div');
|
|
1668
|
+
info.appendChild(el('div','cmd-card-name',c.cmd));
|
|
1669
|
+
info.appendChild(el('div','cmd-card-purpose',c.purpose));
|
|
1670
|
+
header.appendChild(info);
|
|
1671
|
+
header.appendChild(el('span','cmd-card-arrow','\u25BC'));
|
|
1672
|
+
|
|
1673
|
+
var body = el('div','cmd-card-body');
|
|
1674
|
+
var example = el('div','cmd-example');
|
|
1675
|
+
example.appendChild(el('span','t-prompt','$ '));
|
|
1676
|
+
example.appendChild(el('span','t-cmd',c.cmd));
|
|
1677
|
+
example.appendChild(document.createElement('br'));
|
|
1678
|
+
example.appendChild(el('span','t-success',' Command executed successfully'));
|
|
1679
|
+
body.appendChild(example);
|
|
1680
|
+
|
|
1681
|
+
card.appendChild(header);
|
|
1682
|
+
card.appendChild(body);
|
|
1683
|
+
grid.appendChild(card);
|
|
1684
|
+
});
|
|
1685
|
+
}
|
|
1686
|
+
|
|
1687
|
+
function renderTddPhases() {
|
|
1688
|
+
var container = document.getElementById('tdd-phases');
|
|
1689
|
+
TDD_PHASES.forEach(function(p) {
|
|
1690
|
+
var node = el('div','tdd-node');
|
|
1691
|
+
node.dataset.id = p.id;
|
|
1692
|
+
node.dataset.color = p.color;
|
|
1693
|
+
node.addEventListener('click', function() { selectTddPhase(p.id); });
|
|
1694
|
+
node.appendChild(el('div','tdd-phase-id',p.id));
|
|
1695
|
+
node.appendChild(el('div','tdd-phase-name',p.name));
|
|
1696
|
+
container.appendChild(node);
|
|
1697
|
+
});
|
|
1698
|
+
// Set initial state
|
|
1699
|
+
var detail = document.getElementById('tdd-detail');
|
|
1700
|
+
var h3 = el('h3','','Click a phase to explore');
|
|
1701
|
+
h3.style.color = 'var(--text-muted)';
|
|
1702
|
+
detail.appendChild(h3);
|
|
1703
|
+
detail.appendChild(el('p','td-desc','Each phase has specific subagents, quality gates, and output artifacts.'));
|
|
1704
|
+
}
|
|
1705
|
+
|
|
1706
|
+
function getAccentVar(color) {
|
|
1707
|
+
var map = {red:'var(--accent-red)',green:'var(--accent-green)',purple:'var(--accent-purple)',orange:'var(--accent-orange)',cyan:'var(--accent-cyan)'};
|
|
1708
|
+
return map[color] || 'var(--accent-cyan)';
|
|
1709
|
+
}
|
|
1710
|
+
|
|
1711
|
+
function selectTddPhase(id) {
|
|
1712
|
+
var phase = TDD_PHASES.find(function(p) { return p.id === id; });
|
|
1713
|
+
if (!phase) return;
|
|
1714
|
+
document.querySelectorAll('.tdd-node').forEach(function(n) {
|
|
1715
|
+
n.classList.toggle('active', n.dataset.id === id);
|
|
1716
|
+
});
|
|
1717
|
+
var detail = document.getElementById('tdd-detail');
|
|
1718
|
+
detail.textContent = '';
|
|
1719
|
+
|
|
1720
|
+
var h3 = el('h3','','Phase ' + phase.id + ': ' + phase.name);
|
|
1721
|
+
h3.style.color = getAccentVar(phase.color);
|
|
1722
|
+
detail.appendChild(h3);
|
|
1723
|
+
detail.appendChild(el('p','td-desc',phase.desc));
|
|
1724
|
+
|
|
1725
|
+
var meta = el('div','td-meta');
|
|
1726
|
+
|
|
1727
|
+
var gateDiv = document.createElement('div');
|
|
1728
|
+
gateDiv.appendChild(el('div','td-meta-label','Gate Requirement'));
|
|
1729
|
+
gateDiv.appendChild(el('div','td-meta-value',phase.gate));
|
|
1730
|
+
meta.appendChild(gateDiv);
|
|
1731
|
+
|
|
1732
|
+
var agentDiv = document.createElement('div');
|
|
1733
|
+
agentDiv.appendChild(el('div','td-meta-label','Subagents'));
|
|
1734
|
+
var agentVal = el('div','td-meta-value');
|
|
1735
|
+
if (phase.agents.length) {
|
|
1736
|
+
phase.agents.forEach(function(a) { agentVal.appendChild(el('span','td-badge',a)); });
|
|
1737
|
+
} else {
|
|
1738
|
+
var none = el('span','','None (orchestrator)');
|
|
1739
|
+
none.style.color = 'var(--text-muted)';
|
|
1740
|
+
agentVal.appendChild(none);
|
|
1741
|
+
}
|
|
1742
|
+
agentDiv.appendChild(agentVal);
|
|
1743
|
+
meta.appendChild(agentDiv);
|
|
1744
|
+
|
|
1745
|
+
detail.appendChild(meta);
|
|
1746
|
+
}
|
|
1747
|
+
|
|
1748
|
+
var tddInterval = null;
|
|
1749
|
+
var tddIdx = 0;
|
|
1750
|
+
|
|
1751
|
+
function tddPlay() {
|
|
1752
|
+
var btn = document.getElementById('tdd-play-btn');
|
|
1753
|
+
if (tddInterval) {
|
|
1754
|
+
clearInterval(tddInterval);
|
|
1755
|
+
tddInterval = null;
|
|
1756
|
+
btn.classList.remove('playing');
|
|
1757
|
+
btn.textContent = 'Play Through';
|
|
1758
|
+
return;
|
|
1759
|
+
}
|
|
1760
|
+
tddIdx = 0;
|
|
1761
|
+
btn.classList.add('playing');
|
|
1762
|
+
btn.textContent = 'Pause';
|
|
1763
|
+
selectTddPhase(TDD_PHASES[0].id);
|
|
1764
|
+
tddInterval = setInterval(function() {
|
|
1765
|
+
tddIdx++;
|
|
1766
|
+
if (tddIdx >= TDD_PHASES.length) {
|
|
1767
|
+
clearInterval(tddInterval);
|
|
1768
|
+
tddInterval = null;
|
|
1769
|
+
btn.classList.remove('playing');
|
|
1770
|
+
btn.textContent = 'Play Through';
|
|
1771
|
+
return;
|
|
1772
|
+
}
|
|
1773
|
+
selectTddPhase(TDD_PHASES[tddIdx].id);
|
|
1774
|
+
}, 1800);
|
|
1775
|
+
}
|
|
1776
|
+
|
|
1777
|
+
function tddStep() {
|
|
1778
|
+
var active = document.querySelector('.tdd-node.active');
|
|
1779
|
+
var idx = 0;
|
|
1780
|
+
if (active) {
|
|
1781
|
+
idx = TDD_PHASES.findIndex(function(p) { return p.id === active.dataset.id; });
|
|
1782
|
+
idx = (idx + 1) % TDD_PHASES.length;
|
|
1783
|
+
}
|
|
1784
|
+
selectTddPhase(TDD_PHASES[idx].id);
|
|
1785
|
+
}
|
|
1786
|
+
|
|
1787
|
+
function tddReset() {
|
|
1788
|
+
if (tddInterval) { clearInterval(tddInterval); tddInterval = null; }
|
|
1789
|
+
var btn = document.getElementById('tdd-play-btn');
|
|
1790
|
+
btn.classList.remove('playing');
|
|
1791
|
+
btn.textContent = 'Play Through';
|
|
1792
|
+
document.querySelectorAll('.tdd-node').forEach(function(n) { n.classList.remove('active'); });
|
|
1793
|
+
var detail = document.getElementById('tdd-detail');
|
|
1794
|
+
detail.textContent = '';
|
|
1795
|
+
var h3 = el('h3','','Click a phase to explore');
|
|
1796
|
+
h3.style.color = 'var(--text-muted)';
|
|
1797
|
+
detail.appendChild(h3);
|
|
1798
|
+
detail.appendChild(el('p','td-desc','Each phase has specific subagents, quality gates, and output artifacts.'));
|
|
1799
|
+
}
|
|
1800
|
+
|
|
1801
|
+
function renderGates() {
|
|
1802
|
+
var container = document.getElementById('gates-row');
|
|
1803
|
+
GATES.forEach(function(g, i) {
|
|
1804
|
+
var card = el('div','gate-card');
|
|
1805
|
+
card.appendChild(el('div','gate-number',String(g.num)));
|
|
1806
|
+
card.appendChild(el('div','gate-name',g.name));
|
|
1807
|
+
card.appendChild(el('div','gate-transition',g.transition));
|
|
1808
|
+
var ul = el('ul','gate-reqs');
|
|
1809
|
+
g.reqs.forEach(function(r) { ul.appendChild(el('li','',r)); });
|
|
1810
|
+
card.appendChild(ul);
|
|
1811
|
+
container.appendChild(card);
|
|
1812
|
+
if (i < GATES.length - 1) {
|
|
1813
|
+
var arrow = el('div','gate-arrow');
|
|
1814
|
+
arrow.textContent = '\u2192';
|
|
1815
|
+
container.appendChild(arrow);
|
|
1816
|
+
}
|
|
1817
|
+
});
|
|
1818
|
+
}
|
|
1819
|
+
|
|
1820
|
+
function renderConstitution() {
|
|
1821
|
+
var grid = document.getElementById('const-grid');
|
|
1822
|
+
CONST_FILES.forEach(function(f) {
|
|
1823
|
+
var card = el('div','const-card');
|
|
1824
|
+
card.addEventListener('click', function() { card.classList.toggle('expanded'); });
|
|
1825
|
+
card.appendChild(el('div','const-card-name',f.name));
|
|
1826
|
+
|
|
1827
|
+
var controls = el('div','const-card-controls');
|
|
1828
|
+
controls.appendChild(el('span','cc-label-controls','Controls: '));
|
|
1829
|
+
controls.appendChild(document.createTextNode(f.controls));
|
|
1830
|
+
card.appendChild(controls);
|
|
1831
|
+
|
|
1832
|
+
var prevents = el('div','const-card-prevents');
|
|
1833
|
+
prevents.appendChild(el('span','cc-label-prevents','Prevents: '));
|
|
1834
|
+
prevents.appendChild(document.createTextNode(f.prevents));
|
|
1835
|
+
card.appendChild(prevents);
|
|
1836
|
+
|
|
1837
|
+
var body = el('div','const-card-body');
|
|
1838
|
+
body.appendChild(el('pre','const-snippet',f.snippet));
|
|
1839
|
+
card.appendChild(body);
|
|
1840
|
+
|
|
1841
|
+
grid.appendChild(card);
|
|
1842
|
+
});
|
|
1843
|
+
}
|
|
1844
|
+
|
|
1845
|
+
function renderAgentCategories() {
|
|
1846
|
+
var container = document.getElementById('agent-categories');
|
|
1847
|
+
AGENT_CATS.forEach(function(c) {
|
|
1848
|
+
var cat = el('div','agent-cat');
|
|
1849
|
+
cat.addEventListener('click', function() { cat.classList.toggle('expanded'); });
|
|
1850
|
+
var header = el('div','agent-cat-header');
|
|
1851
|
+
header.appendChild(el('span','agent-cat-name',c.name));
|
|
1852
|
+
header.appendChild(el('span','agent-cat-count',c.count + ' agents'));
|
|
1853
|
+
cat.appendChild(header);
|
|
1854
|
+
cat.appendChild(el('div','agent-cat-list',c.agents));
|
|
1855
|
+
container.appendChild(cat);
|
|
1856
|
+
});
|
|
1857
|
+
}
|
|
1858
|
+
|
|
1859
|
+
/* ============================================================
|
|
1860
|
+
TERMINAL ANIMATION
|
|
1861
|
+
============================================================ */
|
|
1862
|
+
|
|
1863
|
+
function animateTerminal() {
|
|
1864
|
+
var body = document.getElementById('qs-body');
|
|
1865
|
+
body.textContent = '';
|
|
1866
|
+
var i = 0;
|
|
1867
|
+
|
|
1868
|
+
function nextLine() {
|
|
1869
|
+
if (i >= QS_LINES.length) return;
|
|
1870
|
+
var line = QS_LINES[i];
|
|
1871
|
+
|
|
1872
|
+
if (line.t === 'b') {
|
|
1873
|
+
var blank = el('div','t-line t-blank');
|
|
1874
|
+
body.appendChild(blank);
|
|
1875
|
+
i++;
|
|
1876
|
+
setTimeout(nextLine, 200);
|
|
1877
|
+
return;
|
|
1878
|
+
}
|
|
1879
|
+
|
|
1880
|
+
if (line.t === 'p') {
|
|
1881
|
+
var div = el('div','t-line');
|
|
1882
|
+
div.appendChild(el('span','t-prompt','$ '));
|
|
1883
|
+
var cmd = el('span','t-cmd');
|
|
1884
|
+
div.appendChild(cmd);
|
|
1885
|
+
body.appendChild(div);
|
|
1886
|
+
var c = 0;
|
|
1887
|
+
function typeChar() {
|
|
1888
|
+
if (c < line.x.length) {
|
|
1889
|
+
cmd.textContent += line.x[c];
|
|
1890
|
+
c++;
|
|
1891
|
+
body.scrollTop = body.scrollHeight;
|
|
1892
|
+
setTimeout(typeChar, 25);
|
|
1893
|
+
} else {
|
|
1894
|
+
i++;
|
|
1895
|
+
setTimeout(nextLine, 400);
|
|
1896
|
+
}
|
|
1897
|
+
}
|
|
1898
|
+
typeChar();
|
|
1899
|
+
return;
|
|
1900
|
+
}
|
|
1901
|
+
|
|
1902
|
+
var cls = line.t === 's' ? 't-success' : line.t === 'i' ? 't-info' : line.t === 'w' ? 't-warn' : 't-out';
|
|
1903
|
+
var out = el('div','t-line ' + cls, line.x);
|
|
1904
|
+
body.appendChild(out);
|
|
1905
|
+
body.scrollTop = body.scrollHeight;
|
|
1906
|
+
i++;
|
|
1907
|
+
setTimeout(nextLine, 150);
|
|
1908
|
+
}
|
|
1909
|
+
|
|
1910
|
+
nextLine();
|
|
1911
|
+
}
|
|
1912
|
+
|
|
1913
|
+
/* ============================================================
|
|
1914
|
+
INSTALL TABS
|
|
1915
|
+
============================================================ */
|
|
1916
|
+
|
|
1917
|
+
function switchInstall(idx) {
|
|
1918
|
+
document.querySelectorAll('.install-tab').forEach(function(t, i) {
|
|
1919
|
+
t.classList.toggle('active', i === idx);
|
|
1920
|
+
});
|
|
1921
|
+
document.querySelectorAll('.install-panel').forEach(function(p, i) {
|
|
1922
|
+
p.classList.toggle('active', i === idx);
|
|
1923
|
+
});
|
|
1924
|
+
}
|
|
1925
|
+
|
|
1926
|
+
/* ============================================================
|
|
1927
|
+
SCROLL OBSERVERS
|
|
1928
|
+
============================================================ */
|
|
1929
|
+
|
|
1930
|
+
function initScrollObserver() {
|
|
1931
|
+
var observer = new IntersectionObserver(function(entries) {
|
|
1932
|
+
entries.forEach(function(entry) {
|
|
1933
|
+
if (entry.isIntersecting) {
|
|
1934
|
+
entry.target.classList.add('revealed');
|
|
1935
|
+
var id = entry.target.id;
|
|
1936
|
+
document.querySelectorAll('.nav-links a').forEach(function(a) {
|
|
1937
|
+
a.classList.toggle('active', a.dataset.section === id);
|
|
1938
|
+
});
|
|
1939
|
+
var link = document.querySelector('.nav-links a[data-section="' + id + '"]');
|
|
1940
|
+
if (link && link.parentElement) link.parentElement.classList.add('visited');
|
|
1941
|
+
}
|
|
1942
|
+
});
|
|
1943
|
+
}, { threshold: 0.2 });
|
|
1944
|
+
document.querySelectorAll('.section').forEach(function(s) { observer.observe(s); });
|
|
1945
|
+
}
|
|
1946
|
+
|
|
1947
|
+
function initMeterObserver() {
|
|
1948
|
+
var observer = new IntersectionObserver(function(entries) {
|
|
1949
|
+
entries.forEach(function(entry) {
|
|
1950
|
+
if (entry.isIntersecting) {
|
|
1951
|
+
entry.target.querySelectorAll('.meter-fill').forEach(function(f) {
|
|
1952
|
+
f.classList.add('animated');
|
|
1953
|
+
});
|
|
1954
|
+
}
|
|
1955
|
+
});
|
|
1956
|
+
}, { threshold: 0.5 });
|
|
1957
|
+
var meters = document.getElementById('meters');
|
|
1958
|
+
if (meters) observer.observe(meters);
|
|
1959
|
+
}
|
|
1960
|
+
|
|
1961
|
+
function initTerminalObserver() {
|
|
1962
|
+
var done = false;
|
|
1963
|
+
var observer = new IntersectionObserver(function(entries) {
|
|
1964
|
+
entries.forEach(function(entry) {
|
|
1965
|
+
if (entry.isIntersecting && !done) {
|
|
1966
|
+
done = true;
|
|
1967
|
+
setTimeout(animateTerminal, 300);
|
|
1968
|
+
}
|
|
1969
|
+
});
|
|
1970
|
+
}, { threshold: 0.3 });
|
|
1971
|
+
var terminal = document.getElementById('qs-terminal');
|
|
1972
|
+
if (terminal) observer.observe(terminal);
|
|
1973
|
+
}
|
|
1974
|
+
|
|
1975
|
+
function initStatCounters() {
|
|
1976
|
+
var observer = new IntersectionObserver(function(entries) {
|
|
1977
|
+
entries.forEach(function(entry) {
|
|
1978
|
+
if (entry.isIntersecting) {
|
|
1979
|
+
entry.target.querySelectorAll('.stat-number').forEach(function(numEl) {
|
|
1980
|
+
var target = parseInt(numEl.dataset.target, 10);
|
|
1981
|
+
var current = 0;
|
|
1982
|
+
var step = Math.max(1, Math.floor(target / 30));
|
|
1983
|
+
var iv = setInterval(function() {
|
|
1984
|
+
current += step;
|
|
1985
|
+
if (current >= target) { current = target; clearInterval(iv); }
|
|
1986
|
+
numEl.textContent = current;
|
|
1987
|
+
}, 30);
|
|
1988
|
+
});
|
|
1989
|
+
observer.unobserve(entry.target);
|
|
1990
|
+
}
|
|
1991
|
+
});
|
|
1992
|
+
}, { threshold: 0.5 });
|
|
1993
|
+
var stats = document.getElementById('hero-stats');
|
|
1994
|
+
if (stats) observer.observe(stats);
|
|
1995
|
+
}
|
|
1996
|
+
|
|
1997
|
+
/* ============================================================
|
|
1998
|
+
SIDEBAR
|
|
1999
|
+
============================================================ */
|
|
2000
|
+
|
|
2001
|
+
function toggleSidebar() {
|
|
2002
|
+
document.getElementById('sidebar').classList.toggle('open');
|
|
2003
|
+
document.getElementById('overlay').classList.toggle('active');
|
|
2004
|
+
}
|
|
2005
|
+
|
|
2006
|
+
function scrollToEl(id) {
|
|
2007
|
+
var target = document.getElementById(id);
|
|
2008
|
+
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
2009
|
+
document.getElementById('sidebar').classList.remove('open');
|
|
2010
|
+
document.getElementById('overlay').classList.remove('active');
|
|
2011
|
+
}
|
|
2012
|
+
|
|
2013
|
+
/* ============================================================
|
|
2014
|
+
KEYBOARD
|
|
2015
|
+
============================================================ */
|
|
2016
|
+
|
|
2017
|
+
document.addEventListener('keydown', function(e) {
|
|
2018
|
+
if (e.key === 'Escape') {
|
|
2019
|
+
document.querySelectorAll('.expanded').forEach(function(x) { x.classList.remove('expanded'); });
|
|
2020
|
+
if (tddInterval) tddReset();
|
|
2021
|
+
}
|
|
2022
|
+
});
|
|
2023
|
+
|
|
2024
|
+
/* ============================================================
|
|
2025
|
+
INIT
|
|
2026
|
+
============================================================ */
|
|
2027
|
+
|
|
2028
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
2029
|
+
renderNav();
|
|
2030
|
+
renderStats();
|
|
2031
|
+
renderInstallTabs();
|
|
2032
|
+
renderPipeline();
|
|
2033
|
+
renderCommandTabs();
|
|
2034
|
+
renderTddPhases();
|
|
2035
|
+
renderGates();
|
|
2036
|
+
renderConstitution();
|
|
2037
|
+
renderAgentCategories();
|
|
2038
|
+
initScrollObserver();
|
|
2039
|
+
initMeterObserver();
|
|
2040
|
+
initTerminalObserver();
|
|
2041
|
+
initStatCounters();
|
|
2042
|
+
});
|
|
2043
|
+
</script>
|
|
2044
|
+
</body>
|
|
2045
|
+
</html>
|